/* ===== Percentage calculator — color system =====
   6 tools, 6 accent colors. Cards 5-6 map to the finance convention
   (green = profit, red = loss) so color also carries meaning, not just decoration.
   1 หาผลลัพธ์จาก%  : indigo  #4f46e5
   2 ค้นหา%          : teal    #0d9488
   3 หาเลขต้น        : violet  #7c3aed
   4 %เพิ่ม/ลด        : amber   #d97706
   5 กำไร%           : emerald #059669
   6 ขาดทุน%          : rose    #e11d48

   Cross-browser note: below, every tinted color is written TWICE —
   a plain solid hex/rgba first, then a color-mix() line right after it.
   color-mix() needs a 2023+ browser. If a browser doesn't understand it,
   that single line is dropped and the solid color just above it is used
   instead, so old browsers/in-app webviews still get a fully-colored,
   readable page — just with a flat tint instead of a computed one.
*/

.percent-card{
  --accent:#2563eb;
  position:relative;
  background:#fff;
  border-radius:24px;
  padding:26px 26px 24px;
  margin:28px -30px 42px;
  border:1px solid #dce6ff;
  border-top:5px solid var(--accent);
  box-shadow:0 8px 18px rgba(16,24,40,.045);
  transition:box-shadow .2s ease;
}
.percent-card:hover{box-shadow:0 10px 22px rgba(16,24,40,.065)}

.percent-card.card-1{--accent:#4f46e5}
.percent-card.card-2{--accent:#d97706}
.percent-card.card-3{--accent:#0891b2}
.percent-card.card-4{--accent:#7c3aed}
.percent-card.card-5{--accent:#059669}
.percent-card.card-6{--accent:#e11d48}

.percent-card h3{
  font-size:1.48rem;line-height:1.42;font-weight:900;color:#101828;
  margin:0 0 20px;display:flex;align-items:center;gap:13px;
}
.card-num{
  flex:0 0 auto;
  width:36px;height:36px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-size:1.05rem;font-weight:900;
  box-shadow:0 4px 10px rgba(37,99,235,.45);
  box-shadow:0 4px 10px color-mix(in srgb, var(--accent) 45%, transparent);
}

.percent-desc{
  position:relative;
  overflow:hidden;
  background:#f8fafc;
  border:1px solid #e8edf5;
  border-left:4px solid var(--accent);
  border-radius:16px;
  padding:19px 22px;
  line-height:2;
  margin:18px 0 24px;
  font-size:1.18rem;
  color:#3d4a5c;
}
.percent-desc::after{
  content:"%";
  position:absolute;
  right:-10px;bottom:-30px;
  font-size:7.5rem;
  font-weight:900;
  line-height:1;
  color:var(--accent);
  opacity:.07;
  pointer-events:none;
  user-select:none;
}
.percent-desc b{
  display:inline-block;
  background:#eef2ff;
  color:var(--accent);
  padding:2px 10px;
  border-radius:8px;
  font-weight:800;
  margin:2px 0;
}

.percent-row{display:grid;grid-template-columns:1fr;gap:16px;margin-top:18px}
.percent-row.two{grid-template-columns:1fr 1fr}
.percent-field label{font-size:1.12rem;line-height:1.5;font-weight:800;color:#344054;margin-bottom:8px;display:block}
.percent-input-wrap{display:flex;align-items:center}
.percent-input{
  width:100%;height:64px;border:1px solid #d9e4f2;border-radius:16px;
  font-size:1.8rem;line-height:1.2;font-weight:800;padding:0 11px;text-align:right;
  font-family:inherit;font-variant-numeric:tabular-nums;box-sizing:border-box;
  -webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s;
}
.percent-input:focus{
  outline:0;border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(37,99,235,.14);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.percent-addon{
  background:#eef4ff;color:var(--accent);
  min-width:48px;height:64px;margin-left:8px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:1.1rem;white-space:nowrap;
}
.percent-result{
  margin-top:22px;
  background:#f4faff;
  border:1px solid #dceeff;
  border-radius:19px;padding:19px;text-align:center;
  font-size:1.88rem;line-height:1.18;font-weight:800;color:var(--accent);
}
.percent-result small{display:block;margin-top:6px;font-size:1rem;line-height:1.7;font-weight:400;color:#667085}

/* ---- per-card fallback (solid) + color-mix (modern) overrides ---- */
.percent-card.card-1{border-color:#d8d6f8;border-top-color:var(--accent)}
.percent-card.card-1{border-color:color-mix(in srgb, var(--accent) 24%, #fff);border-top-color:var(--accent)}
.percent-card.card-1 .card-num{box-shadow:0 4px 10px rgba(79,70,229,0.45)}
.percent-card.card-1 .card-num{box-shadow:0 4px 10px color-mix(in srgb, var(--accent) 45%, transparent)}
.percent-card.card-1 .percent-desc{background:#f4f4fd;border-color:#dfdefa #dfdefa #dfdefa var(--accent)}
.percent-card.card-1 .percent-desc{background:color-mix(in srgb, var(--accent) 6%, #fff);border-color:color-mix(in srgb, var(--accent) 18%, #fff) color-mix(in srgb, var(--accent) 18%, #fff) color-mix(in srgb, var(--accent) 18%, #fff) var(--accent)}
.percent-card.card-1 .percent-desc b{background:#e5e3fb}
.percent-card.card-1 .percent-desc b{background:color-mix(in srgb, var(--accent) 15%, #fff)}
.percent-card.card-1 .percent-input:focus{box-shadow:0 0 0 4px rgba(79,70,229,0.14)}
.percent-card.card-1 .percent-input:focus{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent)}
.percent-card.card-1 .percent-addon{background:#e3e1fb}
.percent-card.card-1 .percent-addon{background:color-mix(in srgb, var(--accent) 16%, #fff)}
.percent-card.card-1 .percent-result{background:#edecfc;border-color:#cecbf8}
.percent-card.card-1 .percent-result{background:color-mix(in srgb, var(--accent) 10%, #fff);border-color:color-mix(in srgb, var(--accent) 28%, #fff)}

.percent-card.card-2{border-color:#f6e1c8;border-top-color:var(--accent)}
.percent-card.card-2{border-color:color-mix(in srgb, var(--accent) 24%, #fff);border-top-color:var(--accent)}
.percent-card.card-2 .card-num{box-shadow:0 4px 10px rgba(217,119,6,0.45)}
.percent-card.card-2 .card-num{box-shadow:0 4px 10px color-mix(in srgb, var(--accent) 45%, transparent)}
.percent-card.card-2 .percent-desc{background:#fdf7f0;border-color:#f8e7d2 #f8e7d2 #f8e7d2 var(--accent)}
.percent-card.card-2 .percent-desc{background:color-mix(in srgb, var(--accent) 6%, #fff);border-color:color-mix(in srgb, var(--accent) 18%, #fff) color-mix(in srgb, var(--accent) 18%, #fff) color-mix(in srgb, var(--accent) 18%, #fff) var(--accent)}
.percent-card.card-2 .percent-desc b{background:#f9ebda}
.percent-card.card-2 .percent-desc b{background:color-mix(in srgb, var(--accent) 15%, #fff)}
.percent-card.card-2 .percent-input:focus{box-shadow:0 0 0 4px rgba(217,119,6,0.14)}
.percent-card.card-2 .percent-input:focus{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent)}
.percent-card.card-2 .percent-addon{background:#f9e9d7}
.percent-card.card-2 .percent-addon{background:color-mix(in srgb, var(--accent) 16%, #fff)}
.percent-card.card-2 .percent-result{background:#fbf1e6;border-color:#f4d9b9}
.percent-card.card-2 .percent-result{background:color-mix(in srgb, var(--accent) 10%, #fff);border-color:color-mix(in srgb, var(--accent) 28%, #fff)}

.percent-card.card-3{border-color:#c7e8ef;border-top-color:var(--accent)}
.percent-card.card-3{border-color:color-mix(in srgb, var(--accent) 24%, #fff);border-top-color:var(--accent)}
.percent-card.card-3 .card-num{box-shadow:0 4px 10px rgba(8,145,178,0.45)}
.percent-card.card-3 .card-num{box-shadow:0 4px 10px color-mix(in srgb, var(--accent) 45%, transparent)}
.percent-card.card-3 .percent-desc{background:#f0f9fb;border-color:#d1ebf0 #d1ebf0 #d1ebf0 var(--accent)}
.percent-card.card-3 .percent-desc{background:color-mix(in srgb, var(--accent) 6%, #fff);border-color:color-mix(in srgb, var(--accent) 18%, #fff) color-mix(in srgb, var(--accent) 18%, #fff) color-mix(in srgb, var(--accent) 18%, #fff) var(--accent)}
.percent-card.card-3 .percent-desc b{background:#daeff3}
.percent-card.card-3 .percent-desc b{background:color-mix(in srgb, var(--accent) 15%, #fff)}
.percent-card.card-3 .percent-input:focus{box-shadow:0 0 0 4px rgba(8,145,178,0.14)}
.percent-card.card-3 .percent-input:focus{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent)}
.percent-card.card-3 .percent-addon{background:#d7eef3}
.percent-card.card-3 .percent-addon{background:color-mix(in srgb, var(--accent) 16%, #fff)}
.percent-card.card-3 .percent-result{background:#e6f4f7;border-color:#b9dfe8}
.percent-card.card-3 .percent-result{background:color-mix(in srgb, var(--accent) 10%, #fff);border-color:color-mix(in srgb, var(--accent) 28%, #fff)}

.percent-card.card-4{border-color:#e1d4fb;border-top-color:var(--accent)}
.percent-card.card-4{border-color:color-mix(in srgb, var(--accent) 24%, #fff);border-top-color:var(--accent)}
.percent-card.card-4 .card-num{box-shadow:0 4px 10px rgba(124,58,237,0.45)}
.percent-card.card-4 .card-num{box-shadow:0 4px 10px color-mix(in srgb, var(--accent) 45%, transparent)}
.percent-card.card-4 .percent-desc{background:#f7f3fe;border-color:#e7dcfc #e7dcfc #e7dcfc var(--accent)}
.percent-card.card-4 .percent-desc{background:color-mix(in srgb, var(--accent) 6%, #fff);border-color:color-mix(in srgb, var(--accent) 18%, #fff) color-mix(in srgb, var(--accent) 18%, #fff) color-mix(in srgb, var(--accent) 18%, #fff) var(--accent)}
.percent-card.card-4 .percent-desc b{background:#ebe1fc}
.percent-card.card-4 .percent-desc b{background:color-mix(in srgb, var(--accent) 15%, #fff)}
.percent-card.card-4 .percent-input:focus{box-shadow:0 0 0 4px rgba(124,58,237,0.14)}
.percent-card.card-4 .percent-input:focus{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent)}
.percent-card.card-4 .percent-addon{background:#eadffc}
.percent-card.card-4 .percent-addon{background:color-mix(in srgb, var(--accent) 16%, #fff)}
.percent-card.card-4 .percent-result{background:#f2ebfd;border-color:#dac8fa}
.percent-card.card-4 .percent-result{background:color-mix(in srgb, var(--accent) 10%, #fff);border-color:color-mix(in srgb, var(--accent) 28%, #fff)}

.percent-card.card-5{border-color:#c9e8dd;border-top-color:var(--accent)}
.percent-card.card-5{border-color:color-mix(in srgb, var(--accent) 24%, #fff);border-top-color:var(--accent)}
.percent-card.card-5 .card-num{box-shadow:0 4px 10px rgba(5,150,105,0.45)}
.percent-card.card-5 .card-num{box-shadow:0 4px 10px color-mix(in srgb, var(--accent) 45%, transparent)}
.percent-card.card-5 .percent-desc{background:#f0f9f6;border-color:#d2ece4 #d2ece4 #d2ece4 var(--accent)}
.percent-card.card-5 .percent-desc{background:color-mix(in srgb, var(--accent) 6%, #fff);border-color:color-mix(in srgb, var(--accent) 18%, #fff) color-mix(in srgb, var(--accent) 18%, #fff) color-mix(in srgb, var(--accent) 18%, #fff) var(--accent)}
.percent-card.card-5 .percent-desc b{background:#daefe8}
.percent-card.card-5 .percent-desc b{background:color-mix(in srgb, var(--accent) 15%, #fff)}
.percent-card.card-5 .percent-input:focus{box-shadow:0 0 0 4px rgba(5,150,105,0.14)}
.percent-card.card-5 .percent-input:focus{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent)}
.percent-card.card-5 .percent-addon{background:#d7eee7}
.percent-card.card-5 .percent-addon{background:color-mix(in srgb, var(--accent) 16%, #fff)}
.percent-card.card-5 .percent-result{background:#e6f4f0;border-color:#b9e2d5}
.percent-card.card-5 .percent-result{background:color-mix(in srgb, var(--accent) 10%, #fff);border-color:color-mix(in srgb, var(--accent) 28%, #fff)}

.percent-card.card-6{border-color:#f8ced8;border-top-color:var(--accent)}
.percent-card.card-6{border-color:color-mix(in srgb, var(--accent) 24%, #fff);border-top-color:var(--accent)}
.percent-card.card-6 .card-num{box-shadow:0 4px 10px rgba(225,29,72,0.45)}
.percent-card.card-6 .card-num{box-shadow:0 4px 10px color-mix(in srgb, var(--accent) 45%, transparent)}
.percent-card.card-6 .percent-desc{background:#fdf1f4;border-color:#fad6de #fad6de #fad6de var(--accent)}
.percent-card.card-6 .percent-desc{background:color-mix(in srgb, var(--accent) 6%, #fff);border-color:color-mix(in srgb, var(--accent) 18%, #fff) color-mix(in srgb, var(--accent) 18%, #fff) color-mix(in srgb, var(--accent) 18%, #fff) var(--accent)}
.percent-card.card-6 .percent-desc b{background:#fadde4}
.percent-card.card-6 .percent-desc b{background:color-mix(in srgb, var(--accent) 15%, #fff)}
.percent-card.card-6 .percent-input:focus{box-shadow:0 0 0 4px rgba(225,29,72,0.14)}
.percent-card.card-6 .percent-input:focus{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent)}
.percent-card.card-6 .percent-addon{background:#fadbe2}
.percent-card.card-6 .percent-addon{background:color-mix(in srgb, var(--accent) 16%, #fff)}
.percent-card.card-6 .percent-result{background:#fce8ed;border-color:#f7c0cc}
.percent-card.card-6 .percent-result{background:color-mix(in srgb, var(--accent) 10%, #fff);border-color:color-mix(in srgb, var(--accent) 28%, #fff)}

.percent-divider{
  height:1px;margin:0 -30px 42px;
  background:linear-gradient(90deg,transparent,#dbe4ef 25%,#dbe4ef 75%,transparent);
}

.percent-linkbox{
  display:block;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#2563eb 0%,#4f46e5 100%);
  border:0;border-radius:22px;padding:26px 26px 24px;margin-top:24px;
  text-decoration:none;color:#eef2ff;
  box-shadow:0 14px 30px rgba(37,99,235,.28);
  transition:transform .18s ease, box-shadow .18s ease;
  font-size:1.08rem;line-height:1.8;
}
.percent-linkbox:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(37,99,235,.36)}
.percent-linkbox h3{color:#fff;margin-top:0;font-size:1.35rem;line-height:1.4;font-weight:900}
.percent-linkbox b{color:#fff}

.percent-img{width:100%;border-radius:16px;margin-top:10px}

.date-select{width:100%;height:56px;border-radius:14px;border:1px solid #cfdce7;background:#fff;padding:0 14px;font-size:20px;line-height:1.2;font-weight:700;color:#333;box-sizing:border-box;font-family:inherit;-webkit-appearance:none;appearance:none}
.date-select:focus{outline:0;border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.08)}
.health-good{color:#16a34a;font-weight:700}
.health-normal{color:#d97706;font-weight:700}
.health-bad{color:#dc2626;font-weight:700}
.health-danger{color:#be123c;font-weight:800}
.health-empty,.percent-result .health-empty{font-size:1.25rem;line-height:1.6;font-weight:900;color:#667085}
.health-main,.percent-result .health-main{font-size:2.35rem;line-height:1.35;font-weight:900;color:#2563eb;text-align:center;margin-bottom:20px}
.health-result-title,.percent-result .health-result-title{font-size:1.25rem!important;line-height:1.45!important;font-weight:900;text-align:center;margin:10px 0 8px}
.health-result-subtitle span,.health-result-title span,.percent-result .health-result-subtitle span,.percent-result .health-result-title span{font-size:inherit!important;line-height:inherit!important;font-weight:inherit!important}
.health-result-subtitle,.percent-result .health-result-subtitle{font-size:1.15rem!important;line-height:1.5!important;font-weight:800;text-align:center;margin:0 0 18px}
.health-note,.percent-result .health-note{display:block;margin-top:18px;line-height:1.9;font-size:1.12rem;font-weight:500;color:#4b5563}
.health-note b,.percent-result .health-note b{color:#2563eb;font-weight:800}
.countdown-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:17px 0}
.count-box{background:#f8fbff;border:1px solid #dceeff;border-radius:15px;padding:15px 10px;text-align:center}
.count-number{font-size:2rem;font-weight:900;line-height:1;color:#2563eb}
.count-label{font-size:.95rem;color:#667085;margin-top:8px}
@media(max-width:768px){
.percent-card{padding:16px 14px 14px;margin:20px -6px 30px;border-radius:18px}
.percent-divider{margin:0 -6px 30px}
.percent-card h3{font-size:1.4rem;line-height:1.4;margin-bottom:16px;gap:10px}
.card-num{width:32px;height:32px;font-size:.98rem}
.percent-desc{font-size:1.15rem;line-height:1.7;padding:15px 14px;margin:12px 0 20px;border-radius:14px}
.percent-row.two{grid-template-columns:1fr;gap:18px}
.percent-field label{font-size:1.25rem;line-height:1.5}
.percent-input{height:64px;font-size:1.7rem;line-height:1.2;padding:0 12px}
.percent-addon{height:64px;font-size:1.08rem}
.percent-result{font-size:1.6rem;line-height:1.25;padding:15px 10px}
.percent-result small{font-size:1.04rem}
.percent-linkbox{font-size:1.14rem;line-height:1.8;padding:18px 16px}
.date-select{height:54px;font-size:18px}
.health-main,.percent-result .health-main{font-size:2.1rem}
.health-result-title,.percent-result .health-result-title{font-size:1.15rem!important;line-height:1.45!important}
.health-result-subtitle span,.health-result-title span,.percent-result .health-result-subtitle span,.percent-result .health-result-title span{font-size:inherit!important;line-height:inherit!important}
.health-result-subtitle,.percent-result .health-result-subtitle{font-size:1.05rem!important;line-height:1.55!important}
.health-note,.percent-result .health-note{font-size:1.12rem;line-height:1.9}
.health-empty,.percent-result .health-empty{font-size:1.2rem}
.countdown-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.count-number{font-size:1.65rem}
.count-box{padding:12px 8px}
}