:root{
    --font-head:'IBM Plex Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;
    --font-body:'IBM Plex Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;
    --navy:#16315c; --navy2:#1f4480; --teal:#0fa3a3; --teal-d:#0c7e7e;
    --gold:#f5a623; --green:#27ae60; --ink:#1c2733; --muted:#6b7a8d;
    --bg:#f4f7fb; --card:#ffffff; --line:#e3eaf2; --soft:#eef4fb;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
  h1,h2,h3,h4,.f{font-family:var(--font-head)}
  .wrap{max-width:980px;margin:0 auto;padding:0 20px}
  /* top bar */
  .topbar{background:var(--navy);color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(0,0,0,.12)}
  .topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
  .brand{display:flex;align-items:center;gap:12px;font-family:var(--font-head);font-weight:600;font-size:18px}
  .logo-chip{background:#fff;border-radius:9px;padding:4px 9px;display:inline-flex;align-items:center;height:42px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
  .logo-chip img{height:32px;display:block}
  .brand .sep{width:1px;height:26px;background:rgba(255,255,255,.25)}
  .nav-toggle{display:flex;gap:6px;background:rgba(255,255,255,.12);padding:4px;border-radius:10px}
  .nav-toggle button{background:none;border:none;color:#cdd8e6;font-family:var(--font-head);font-size:13px;padding:6px 12px;border-radius:7px;cursor:pointer;transition:.2s}
  .nav-toggle button.active{background:#fff;color:var(--navy)}
  /* screens */
  .screen{display:none;animation:fade .4s ease}
  .screen.active{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  /* hero */
  .hero{background:linear-gradient(135deg,var(--navy),var(--navy2) 70%,var(--teal-d));color:#fff;padding:54px 0 64px;position:relative;overflow:hidden}
  .hero:after{content:"";position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:rgba(15,163,163,.25);filter:blur(10px)}
  .hero .wrap{position:relative;z-index:2}
  .pill{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);padding:6px 14px;border-radius:30px;font-size:13px;margin-bottom:18px}
  .hero h1{font-size:38px;font-weight:700;line-height:1.25;max-width:720px;margin-bottom:14px}
  .hero h1 span{color:#7fe3e3}
  .hero p{font-size:17px;color:#d7e2f0;max-width:620px;margin-bottom:28px}
  .cta{display:inline-flex;align-items:center;gap:9px;background:var(--gold);color:#3a2700;font-family:var(--font-head);font-weight:600;font-size:16px;border:none;padding:14px 28px;border-radius:12px;cursor:pointer;box-shadow:0 8px 22px rgba(245,166,35,.4);transition:.2s}
  .cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(245,166,35,.5)}
  .cta.ghost{background:rgba(255,255,255,.12);color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.3)}
  .hero-stats{display:flex;gap:34px;margin-top:40px;flex-wrap:wrap}
  .hero-stats div{}
  .hero-stats b{font-family:var(--font-head);font-size:26px;display:block;color:#fff}
  .hero-stats small{color:#b9c8da;font-size:13px}
  /* how it works */
  .section{padding:50px 0}
  .section h2{font-size:26px;text-align:center;margin-bottom:8px}
  .section .sub{text-align:center;color:var(--muted);margin-bottom:36px}
  .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
  .step{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 16px;position:relative}
  .step .n{width:40px;height:40px;border-radius:11px;background:var(--soft);color:var(--navy2);font-family:var(--font-head);font-weight:700;display:grid;place-items:center;font-size:18px;margin-bottom:14px}
  .step h3{font-size:17px;margin-bottom:6px}
  .step p{font-size:14px;color:var(--muted)}
  .arrow{position:absolute;right:-12px;top:36px;color:var(--line);font-size:24px;z-index:3}
  /* form card */
  .card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:0 4px 24px rgba(22,49,92,.06)}
  .page-head{padding:34px 20px 6px}
  .page-head h2{font-size:25px}
  .page-head p{color:var(--muted)}
  .progress{display:flex;gap:8px;margin:18px 0 26px}
  .progress span{flex:1;height:6px;border-radius:4px;background:var(--line)}
  .progress span.on{background:var(--teal)}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  label.fld{display:block;font-family:var(--font-head);font-size:14px;font-weight:500;margin-bottom:7px;color:var(--ink)}
  .field{margin-bottom:18px}
  select,input[type=text],input[type=number]{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;font-family:var(--font-body);font-size:15px;background:#fbfdff;transition:.15s}
  select:focus,input:focus{outline:none;border-color:var(--teal);background:#fff}
  .chips{display:flex;flex-wrap:wrap;gap:10px}
  .chip{border:1.5px solid var(--line);background:#fbfdff;padding:10px 16px;border-radius:30px;font-size:14px;cursor:pointer;user-select:none;transition:.15s;display:flex;align-items:center;gap:7px}
  .chip:hover{border-color:var(--teal)}
  .chip.sel{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:500}
  .row-btns{display:flex;justify-content:space-between;margin-top:26px;gap:12px}
  .btn{font-family:var(--font-head);font-weight:600;font-size:15px;border:none;border-radius:11px;padding:13px 24px;cursor:pointer;transition:.2s}
  .btn-primary{background:var(--teal);color:#fff;box-shadow:0 6px 16px rgba(15,163,163,.3)}
  .btn-primary:hover{background:var(--teal-d)}
  .btn-light{background:var(--soft);color:var(--navy2)}
  /* analyzing */
  .analyze{text-align:center;padding:70px 20px}
  .spinner{width:64px;height:64px;border:6px solid var(--soft);border-top-color:var(--teal);border-radius:50%;margin:0 auto 24px;animation:spin 1s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .analyze h3{font-size:20px;margin-bottom:6px}
  .analyze .log{color:var(--muted);font-size:14px;height:24px;transition:.2s}
  /* results */
  .match-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:6px}
  .match-head .tot{font-family:var(--font-head);color:var(--green);font-weight:600}
  .fund{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--teal);border-radius:14px;padding:22px;margin-bottom:16px;display:flex;gap:18px;align-items:flex-start}
  .fund .meter{flex:0 0 78px;text-align:center}
  .ring{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:19px;color:var(--navy);background:conic-gradient(var(--teal) var(--p),#e9eef5 0)}
  .ring i{width:56px;height:56px;background:#fff;border-radius:50%;display:grid;place-items:center;font-style:normal}
  .ring small{font-size:10px;color:var(--muted);font-family:var(--font-body);display:block;font-weight:400}
  .fund .body{flex:1}
  .fund h3{font-size:17px;margin-bottom:3px}
  .fund .agency{font-size:13px;color:var(--muted);margin-bottom:10px}
  .fund .amt{font-family:var(--font-head);font-weight:600;color:var(--navy2);font-size:15px;margin-bottom:10px}
  .crit{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:#46586b;margin-bottom:14px}
  .crit span:before{content:"✓ ";color:var(--green);font-weight:700}
  .fund .act{display:flex;gap:10px;align-items:center}
  .mini{font-size:13px;padding:9px 16px;border-radius:9px}
  .tag-hot{background:#fff4e0;color:#b9770a;font-size:11px;padding:3px 9px;border-radius:6px;font-weight:600;font-family:var(--font-head)}
  /* draft */
  .doc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:32px 36px;font-size:14.5px;line-height:1.85;box-shadow:0 4px 20px rgba(0,0,0,.05);min-height:340px}
  .doc h4{font-family:var(--font-head);color:var(--navy);margin:18px 0 6px;font-size:15px}
  .doc .docttl{text-align:center;border-bottom:2px solid var(--navy);padding-bottom:12px;margin-bottom:18px}
  .doc .docttl b{font-family:var(--font-head);font-size:18px;color:var(--navy);display:block}
  .doc .docttl small{color:var(--muted)}
  .typing:after{content:"▍";color:var(--teal);animation:blink 1s steps(2) infinite}
  @keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
  .hl{background:#fff7dd;padding:0 3px;border-radius:3px}
  /* admin */
  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
  .kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
  .kpi b{font-family:var(--font-head);font-size:28px;color:var(--navy);display:block}
  .kpi small{color:var(--muted);font-size:13px}
  .kpi .up{color:var(--green);font-size:12px;font-weight:600}
  .panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:18px}
  .panel h3{font-size:16px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
  table{width:100%;border-collapse:collapse;font-size:14px}
  th,td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--line)}
  th{font-family:var(--font-head);font-weight:500;color:var(--muted);font-size:13px}
  .st{font-size:12px;padding:3px 10px;border-radius:20px;font-weight:600}
  .st.ok{background:#e5f6ec;color:#1d8a47}
  .st.wait{background:#fef3e0;color:#b9770a}
  .st.draft{background:#eef0f4;color:#5b6b7d}
  .bar{height:9px;background:var(--soft);border-radius:6px;overflow:hidden;margin-top:5px}
  .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--navy2))}
  .note{background:#fffbf0;border:1px solid #f3e3bd;border-radius:10px;padding:12px 16px;font-size:13px;color:#7a5a14;margin-top:14px}
  footer{background:var(--navy);color:#b9c8da;padding:30px 16px;font-size:13px;text-align:center;margin-top:40px}
  footer b{color:#fff;font-family:var(--font-head)}
  .cobrand{display:flex;gap:18px;justify-content:center;align-items:center;margin-bottom:10px;flex-wrap:wrap}
  .cobrand span{font-family:var(--font-head);color:#fff;font-weight:500}
  @media(max-width:760px){
    .form-grid,.steps,.kpis{grid-template-columns:1fr}
    .hero h1{font-size:28px}.arrow{display:none}
    .doc{padding:22px}
  }

  /* ---- additions for the real app ---- */
  .narrow{max-width:520px;margin:0 auto}
  .muted{color:var(--muted)} .small{font-size:13px}
  .err{background:#fdecec;border:1px solid #f5c2c2;color:#a12a2a;border-radius:10px;padding:10px 14px;font-size:14px;margin:12px 0}
  .ok{background:#e5f6ec;border:1px solid #bfe6cd;color:#1d6b3c;border-radius:10px;padding:10px 14px;font-size:14px;margin:12px 0}
  .hidden{display:none!important}
  input[type=email],input[type=tel],textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;font-family:var(--font-body);font-size:15px;background:#fbfdff}
  textarea{min-height:90px;resize:vertical}
  input.otp{font-size:26px;letter-spacing:10px;text-align:center;font-family:var(--font-head)}
  .btn[disabled]{opacity:.55;cursor:not-allowed}
  .check{display:flex;gap:10px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
  .check input{margin-top:5px;width:18px;height:18px;accent-color:var(--teal);flex:0 0 auto}
  .req{color:#c0392b;font-weight:600}
  .user-chip{color:#cdd8e6;font-size:13px;display:flex;align-items:center;gap:10px}
  .user-chip button{background:rgba(255,255,255,.12);border:none;color:#fff;border-radius:8px;padding:5px 10px;font-family:var(--font-head);font-size:12px;cursor:pointer}
  .section-title{font-family:var(--font-head);font-size:16px;font-weight:600;margin:6px 0 12px;color:var(--navy)}
  .crit span.fail:before{content:"✗ ";color:#c0392b}
  .crit span.unknown:before{content:"? ";color:#b9770a}
  .crit span.pass:before{content:"✓ ";color:var(--green)}
  .crit span:before{content:none}
  .tag-unverified{background:#fff4e0;color:#8a5a00;font-size:11px;padding:3px 9px;border-radius:6px;font-family:var(--font-head)}
  .hint{font-size:13px;color:#7a5a14;background:#fffbf0;border-radius:8px;padding:8px 12px;margin:-4px 0 12px}
  .ai-expl{font-size:14px;color:#2d4a6b;background:var(--soft);border-radius:8px;padding:8px 12px;margin-bottom:12px}
  .fund.dim{border-left-color:#c9d3df;opacity:.85}
  .ring.dim{background:conic-gradient(#9aa8b8 var(--p),#e9eef5 0)}
  .loading{text-align:center;padding:60px 0;color:var(--muted)}
  .topbar .right{display:flex;align-items:center;gap:14px}
  @media(max-width:760px){.brand .txt-hide{display:none}.topbar .wrap{height:auto;padding-top:8px;padding-bottom:8px;flex-wrap:wrap;gap:8px}}
  .sec{white-space:pre-wrap;border:1px dashed #dfe7f0;border-radius:8px;padding:4px 8px;margin:0 -8px;min-height:2em;transition:.15s}
  .sec:hover{border-color:#cfd9e5}
  .sec:focus{border:1px solid var(--teal);outline:none;background:#fff}
  .secview{white-space:pre-wrap}
  mark.hl{color:inherit;background:#fff7dd;padding:0 3px;border-radius:3px}
  .blank{background:#fdecea;color:#a5362b;padding:0 3px;border-radius:3px;font-weight:500}
  .doc .legend{font-size:12.5px;color:var(--muted);margin:-6px 0 6px;text-align:center}
  .doc .docfoot{color:#6b7a8d;font-size:13px;margin-top:18px}
  .hint:empty{display:none}
  .submit-panel{background:var(--card);border:1.5px solid var(--teal);border-radius:12px;padding:16px 18px;margin-top:14px}
  .submit-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .submit-row input{flex:1;min-width:160px}
  .next-step{background:#e9f8f1;border:1px solid #bfe8d3;border-radius:12px;padding:16px 18px;margin-bottom:16px;font-size:14px}
  .next-step b{font-family:var(--font-head);color:#1d8a47;font-size:15px;display:block;margin-bottom:6px}
  .next-step ol{margin:6px 0 10px 20px}
  .nav-toggle:has(button:not(.hidden)){display:flex}
  .nav-toggle{display:none}
  .st.ok,.st.wait,.st.draft{padding:3px 10px;margin:0;border:none;font-size:12px;display:inline-block;white-space:nowrap}
  a.btn{text-decoration:none;display:inline-block}
  @media(max-width:760px){#userEmail{display:none}}
  input[type=password]{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;font-family:var(--font-body);font-size:15px;background:#fbfdff}
  .tabs button{flex:1;color:var(--muted)}
  .tabs button.active{background:#fff;color:var(--navy);box-shadow:0 1px 4px rgba(0,0,0,.08)}
  /* "ดูเงื่อนไข" panel */
  .terms{margin-top:14px;padding:14px 16px;background:#f6f8fb;border:1px solid var(--line);border-radius:10px;font-size:14px}
  .terms h4{font-family:var(--font-head);font-size:14px;color:var(--navy);margin:10px 0 4px}
  .terms h4:first-child{margin-top:0}
  .terms p{margin:0 0 6px;line-height:1.6}
  .terms .btn{margin-top:8px}
  .tlist{list-style:none;padding:0;margin:0 0 6px}
  .tlist li{padding:2px 0}
  .tlist li.pass b{color:var(--green)} .tlist li.fail b{color:#c0392b} .tlist li.unknown b{color:#b9770a}
  .fund .act{flex-wrap:wrap}
  /* profile summary above results + edit link */
  @media(max-width:760px){.topbar .right{width:100%;flex-wrap:wrap;justify-content:flex-end;gap:8px}.topbar .nav-toggle{order:2;width:100%;overflow-x:auto}.nav-toggle button{flex:1;white-space:nowrap}.user-chip{order:1}}

/* =====================================================================
   Theme "A · Clear" (26 ต.ค. 69) — light, airy, card-based.
   Layered on top of the rules above; same features, new look.
   ===================================================================== */
:root{--teal-d:#0c7e7e;--ink2:#45566a;--muted:#5b6b7d;--line:#e3eaf2;--line2:#d5dfea;--bg:#f4f7fb}
body{background:var(--bg)}
.wrap{max-width:1160px;padding:0 24px}
.wrap.mid{max-width:880px}
.wrap.narrow{max-width:520px}
h2{color:var(--navy)}
a{color:var(--teal-d)}

/* top bar: white */
.topbar{background:#fff;color:var(--navy);box-shadow:none;border-bottom:1px solid var(--line)}
.topbar .wrap{height:68px}
.brand{color:var(--navy);text-decoration:none;font-size:19px}
.logo-chip{background:none;box-shadow:none;padding:0;height:44px}
.logo-chip img{height:44px}
.brand .sep{background:var(--line)}
.nav-toggle{background:#f1f5f9;border-radius:12px;padding:4px;gap:4px}
.nav-toggle button{color:var(--ink2);font-size:15px;padding:8px 16px;border-radius:9px}
.nav-toggle button:hover{color:var(--navy)}
.nav-toggle button.active{background:#fff;color:var(--navy);font-weight:600;box-shadow:0 1px 3px rgba(22,49,92,.12)}
.user-chip{color:var(--muted);font-size:14px}
.user-chip button{background:#fff;color:var(--navy);border:1px solid var(--line2);font-size:13px;padding:7px 12px;border-radius:9px}
#btnLogin{background:#fff;border:1px solid var(--line2)}

/* buttons + inputs */
.btn{border-radius:12px;font-size:15px}
.btn-primary{background:var(--teal-d);box-shadow:none}
.btn-primary:hover{background:#0a6969}
.btn-light{background:#fff;color:var(--navy);border:1px solid var(--line2)}
.btn-light:hover{border-color:#b8c7d8}
.mini{font-size:14px;padding:10px 16px;border-radius:11px}
select,input[type=text],input[type=number],input[type=email],input[type=tel],input[type=password],textarea{background:#fff;border:1.5px solid var(--line2);border-radius:10px}
select:focus,input:focus,textarea:focus{border-color:var(--teal-d);outline:none;box-shadow:0 0 0 3px rgba(15,163,163,.15)}
.chip{background:#fff;border-color:var(--line2);font-family:var(--font-head);font-size:15px}
.chip.sel{background:var(--teal-d);border-color:var(--teal-d)}
.card{border-radius:20px;box-shadow:none;padding:32px}
.panel{border-radius:20px;padding:24px}
.page-head{padding:36px 24px 8px}
.page-head h2{font-size:28px}
.progress span.on{background:var(--teal-d)}
.section-title{font-size:17px}

/* home */
.hero{background:none;color:var(--ink);padding:64px 0 40px;overflow:visible}
.hero:after{display:none}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:56px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;background:#e6f5f5;border:none;color:#0c6b6b;font-weight:600;font-size:14px;padding:6px 14px;margin-bottom:22px}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.hero h1{font-size:50px;line-height:1.2;color:var(--navy);margin-bottom:18px}
.hero h1 span{color:var(--teal-d)}
.hero p{font-size:19px;line-height:1.7;color:var(--ink2);max-width:520px;margin-bottom:30px}
.cta{background:var(--teal-d);color:#fff;box-shadow:none;border-radius:14px;padding:16px 28px;font-size:17px}
.cta:hover{background:#0a6969;box-shadow:0 10px 24px rgba(12,126,126,.25)}
.trust{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:36px}
.trust div{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink2)}
.trust svg{color:var(--teal-d);flex:0 0 auto}
.preview{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:0 24px 60px rgba(22,49,92,.10)}
.preview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;font-size:13px;color:var(--muted)}
.preview-head b{font-family:var(--font-head);font-size:15px;color:var(--navy)}
.preview-row{display:flex;gap:16px;align-items:center;padding:16px;border-radius:16px;background:#f7f9fc;margin-bottom:12px}
.preview-row>div:nth-child(2){flex:1}
.preview-row b{font-family:var(--font-head);color:var(--navy);display:block}
.preview-row small{color:var(--muted);font-size:13px}
.preview .ring{width:60px;height:60px;font-size:14px}
.preview .ring i{width:46px;height:46px}
.preview-foot{display:flex;gap:10px;align-items:center;padding:14px 16px;border:1px dashed #cfdae6;border-radius:14px;font-size:14px;color:var(--ink2)}
.preview-foot svg{color:var(--teal-d);width:18px;height:18px}
.section{padding-top:48px;padding-bottom:72px}
.section h2{font-size:32px;text-align:left}
.section .sub{text-align:left;font-size:17px;margin-bottom:28px}
.steps{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.step{border-radius:20px;padding:24px}
.step .n{width:44px;height:44px;border-radius:12px;background:#e6f5f5;color:var(--teal-d);margin-bottom:16px}
.step small{font-size:13px;color:var(--muted);font-weight:600}
.step h3{font-size:18px;color:var(--navy);margin:4px 0 6px}
.step p{font-size:15px}
.step.last{background:var(--navy);border-color:var(--navy)}
.step.last .n{background:rgba(255,255,255,.12);color:var(--gold)}
.step.last small,.step.last p{color:#c6d3e3}
.step.last h3{color:#fff}
.arrow{display:none}

/* results: profile card + list */
.results-layout{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start;padding-top:36px;padding-bottom:24px}
.profile-card{flex:1 1 280px;max-width:330px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;position:sticky;top:92px}
.results-main{flex:999 1 560px;min-width:0}
.results-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.results-head h2{font-size:30px;margin-bottom:2px}
.results-head p{font-size:15px}
.pc-label{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:4px}
.pc-name{font-family:var(--font-head);font-size:20px;font-weight:600;color:var(--navy);margin-bottom:14px}
.profile-card dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:15px;margin-bottom:14px}
.profile-card dt{color:var(--muted)} .profile-card dd{margin:0}
.pc-needs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.pc-needs span{font-size:13px;color:#0c6b6b;background:#e6f5f5;padding:4px 10px;border-radius:999px}
.profile-card .btn{display:block;text-align:center}
.fund{border:1px solid var(--line);border-left:1px solid var(--line);border-radius:20px;padding:24px;gap:20px;margin-bottom:14px}
.fund.dim{border-left-color:var(--line);opacity:1;background:#fbfcfe}
.fund.dim h3{color:var(--muted)}
.fund .meter{flex:0 0 76px}
.ring{width:76px;height:76px;font-size:17px;background:conic-gradient(var(--teal) var(--p),#e3eaf2 0)}
.ring i{width:60px;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.ring small{font-size:11px;margin-top:2px}
.ring.info{background:conic-gradient(#e0a030 var(--p),#e3eaf2 0)}
.fund-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.fund h3{font-size:19px;color:var(--navy);margin:0}
.fund .agency{font-size:14px;margin-bottom:12px}
.fund .amt{font-size:15px;margin-bottom:12px}
.fund .amt.pending{font-family:var(--font-body);font-weight:400;font-size:14px;color:var(--muted);margin:-6px 0 12px}
.crit{font-size:14px;color:#33475b}
.ai-expl{font-size:14px;color:#2d4a6b;background:#f4f7fb;border-radius:10px;padding:10px 14px}
.hint{border-radius:10px;font-size:14px;margin:0 0 14px}
.pill-st{font-family:var(--font-head);font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}
.pill-st.s-ok{background:#e5f6ec;color:#1d7a45}
.pill-st.s-info{background:#fef3e0;color:#8a5300}
.pill-st.s-no{background:#eef0f4;color:#5b6b7d}
.terms{background:#f7f9fc;border-radius:14px}

/* draft / documents / admin */
.doc{border-radius:20px;box-shadow:none}
.kpi{border-radius:20px;padding:22px}
.st{border-radius:999px}
.st.wait{color:#8a5300}
.bar i{background:var(--teal-d)}
.submit-panel{border-radius:16px;border-color:var(--teal-d)}

/* footer: light */
footer{background:#fff;border-top:1px solid var(--line);color:var(--muted);text-align:left;padding:0;margin-top:56px;font-size:14px}
footer .foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:28px;padding-bottom:28px}
footer a{color:var(--teal-d)}

@media(max-width:760px){
  .wrap{padding:0 16px}
  .topbar .wrap{height:auto;min-height:60px;padding-top:10px;padding-bottom:10px}
  .hero{padding:36px 0 24px}
  .hero h1{font-size:32px}
  .hero p{font-size:17px}
  .section h2{font-size:26px}
  .profile-card{position:static;max-width:none}
  .results-head h2{font-size:24px}
  .fund{padding:18px;gap:14px}
  .fund .meter{flex-basis:64px}
  .ring{width:64px;height:64px;font-size:15px}.ring i{width:50px;height:50px}
  .card{padding:22px}
  .steps{grid-template-columns:1fr;gap:10px}
  .step{display:grid;grid-template-columns:44px 1fr;column-gap:14px;padding:16px 18px}
  .step .n{grid-row:span 3;margin:0}
  .step h3{margin:0}
  .results-layout{padding-top:20px}
  .logo-chip,.logo-chip img{height:38px}
}

/* เอกสารของฉัน — card list */
.app-card{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px 22px;margin-bottom:12px}
.app-ic{width:44px;height:44px;border-radius:12px;background:#f1f5f9;color:var(--muted);display:grid;place-items:center;flex:0 0 auto}
.app-card.todo .app-ic{background:#e6f5f5;color:var(--teal-d)}
.app-body{flex:1;min-width:0}
.app-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.app-title h3{font-size:18px;color:var(--navy);margin:0}
.app-agency{font-size:14px;color:var(--muted);margin-top:2px}
.app-next{font-size:15px;color:var(--ink);margin-top:10px}
.app-meta{font-size:13px;color:var(--muted);margin-top:4px}
.app-act{display:flex;gap:8px;align-items:center;flex:0 0 auto;align-self:center}
.app-card{position:relative;align-items:center;transition:border-color .15s,box-shadow .15s}
.app-card:hover{border-color:#b8c7d8;box-shadow:0 6px 18px rgba(22,49,92,.06)}
.app-open::after{content:"";position:absolute;inset:0;border-radius:20px}   /* whole card opens the document */
.icon-btn{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:none;cursor:pointer;flex:0 0 auto;text-decoration:none}
.icon-slot{width:48px;height:48px;flex:0 0 auto}
.app-open{background:#f1f5f9;color:var(--navy)}
.app-card:hover .app-open{background:var(--teal-d);color:#fff}
.btn-del{position:relative;z-index:1;background:transparent;color:#8a97a8;border-radius:12px}
.btn-del:hover{background:#fdecea;color:#a5362b}
.btn-del.danger{width:auto;display:flex;gap:6px;padding:0 14px;background:#fdecea;color:#a5362b;font-family:var(--font-head);font-size:14px;font-weight:600}
.btn-del[disabled]{opacity:.5}
.app-open:focus-visible,.btn-del:focus-visible{outline:3px solid rgba(15,163,163,.4);outline-offset:2px}
.app-empty{background:#fff;border:1px dashed #cfdae6;border-radius:20px;padding:40px 24px;text-align:center}
.app-empty .app-ic{margin:0 auto 12px;background:#e6f5f5;color:var(--teal-d)}
.app-empty b{font-family:var(--font-head);font-size:18px;color:var(--navy);display:block}
.app-empty p{margin:4px 0 18px}
@media(max-width:760px){
  .app-card{padding:16px;gap:12px}
  .app-ic{display:none}
}

/* hero illustration — skeleton blocks */
.sk{padding:22px}
.sk-bar{display:flex;gap:6px;margin-bottom:18px}
.sk-bar span{width:10px;height:10px;border-radius:50%;background:#e3eaf2}
.sk-row{display:flex;align-items:center;gap:16px;padding:16px;border-radius:16px;background:#f7f9fc;margin-bottom:12px}
.sk-ring{width:52px;height:52px;border-radius:50%;flex:0 0 auto;background:conic-gradient(var(--teal) var(--p),#e3eaf2 0);-webkit-mask:radial-gradient(circle,transparent 17px,#000 18px);mask:radial-gradient(circle,transparent 17px,#000 18px)}
.sk-ring.info{background:conic-gradient(#e0a030 var(--p),#e3eaf2 0)}
.sk-lines{flex:1;display:flex;flex-direction:column;gap:8px}
.sk-lines i{display:block;height:12px;border-radius:6px;background:#d5dfea}
.sk-lines i.s{height:9px;background:#e6ecf3}
.sk-pill{width:64px;height:22px;border-radius:999px;background:#d8f0e2;flex:0 0 auto}
.sk-pill.info{background:#fbe6c4}
.sk-btn{width:44%;height:40px;border-radius:12px;background:var(--teal-d);margin-top:18px}
.sk2{position:relative;height:400px;max-width:500px;margin-left:auto;width:100%}
.sk2-doc{position:absolute;right:10px;top:0;width:62%;height:330px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 24px;display:flex;flex-direction:column;gap:12px;transform:rotate(3deg);box-shadow:0 16px 40px rgba(22,49,92,.08)}
.sk2-doc i{display:block;height:10px;border-radius:5px;background:#e6ecf3}
.sk2-doc i:first-child{height:14px;background:#cbd6e3;margin-bottom:8px}
.sk2-doc i.hl{background:#fbecc2}
.sk2-card{position:absolute;left:0;top:96px;width:76%;background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px 16px 4px;box-shadow:0 24px 60px rgba(22,49,92,.14)}
.sk2-badge{position:absolute;left:12%;bottom:6px;display:flex;align-items:center;gap:10px;background:var(--navy);border-radius:14px;padding:12px 16px;box-shadow:0 12px 28px rgba(22,49,92,.25)}
.sk2-badge span{width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center}
.sk2-badge i{display:block;width:90px;height:10px;border-radius:5px;background:rgba(255,255,255,.35)}
@media(max-width:760px){
  .sk2{height:320px;max-width:420px;margin:0 auto 8px}
  .sk2-badge{bottom:0}
  .sk2-doc{height:250px;padding:20px 18px;gap:10px}
  .sk2-card{top:64px;width:84%}
  .sk-row{padding:12px;gap:12px}
  .sk-ring{width:44px;height:44px;-webkit-mask:radial-gradient(circle,transparent 14px,#000 15px);mask:radial-gradient(circle,transparent 14px,#000 15px)}
  .sk-pill{width:48px}
}

/* council queue: equal-size action buttons · cards on phones */
#adminQueue .q-act{text-align:right}
#adminQueue .q-act .btn{min-width:132px;text-align:center}
@media(max-width:760px){
  #adminQueue,#adminQueue tbody,#adminQueue tr,#adminQueue td{display:block;width:100%}
  #adminQueue tr:first-child{display:none}
  #adminQueue tr{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px;background:#fff}
  #adminQueue td{border:none;padding:4px 0;display:flex;justify-content:space-between;gap:12px;text-align:right}
  #adminQueue td[data-label]::before{content:attr(data-label);color:var(--muted);font-size:13px;text-align:left;flex:0 0 auto}
  #adminQueue td.q-member{font-weight:600;color:var(--navy);font-size:16px;text-align:left;padding-bottom:8px}
  #adminQueue td.q-act{padding-top:10px}
  #adminQueue td.q-act .btn{width:100%;padding:12px}
  #adminQueue td[colspan]{display:block;text-align:left}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi{padding:16px}
}

/* background decoration — paper & approval-stamp shapes (purely decorative) */
.hero{position:relative;overflow:hidden}
.hero-grid{position:relative;z-index:1}
/* fixed size, pinned to the top centre: never stretches when the content height changes (e.g. login ↔ sign-up tab) */
.deco{position:absolute;top:0;left:50%;width:1440px;height:auto;margin-left:-720px;pointer-events:none;z-index:0}
#login{position:relative;overflow:hidden}
#login>.wrap{position:relative;z-index:1}
.empty-art{display:block;width:180px;height:auto;margin:0 auto 14px}
@media(max-width:760px){.deco{display:none}}

/* footer always at the bottom of the window on short pages (login, empty states) — not floating over content */
body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.screen.active{flex:1 0 auto;padding-bottom:56px}
footer{margin-top:0;flex-shrink:0}
.member-check{border:none;padding:0;margin:-4px 0 22px;cursor:pointer;align-items:center;width:fit-content}
.member-check input{margin-top:0}

/* partnership mark (option A: three equal partners). Montivory = sub-logo "With Only (M)" per its Brand Bible:
   navy circle + white m on light surfaces, never rotated/outlined/recoloured, clear space kept by the gaps. */
.pm{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.pm-co{height:46px;width:auto;display:block}
.pm-mt{height:40px;width:40px;display:block}
.pm-mv{font-family:var(--font-head);font-weight:600;font-size:17px;color:var(--navy);letter-spacing:-.01em;white-space:nowrap;line-height:1}
.pm-x{color:#9aa8b8;font-size:18px;line-height:1}
.pm-sm{gap:14px}.pm-sm .pm-co{height:34px}.pm-sm .pm-mt{height:30px;width:30px}.pm-sm .pm-mv{font-size:14px}.pm-sm .pm-x{font-size:15px}
.login-partners{justify-content:center;margin-top:24px}
.partners-band{margin-top:8px}
.partners-band .pb-lead{text-align:center;color:var(--muted);font-size:15px;margin:0 0 22px}
.pb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px 12px}
.pb-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:0 20px}
.pb-item+.pb-item{border-left:1px solid var(--line)}
.pb-logo{height:68px;display:flex;align-items:center;margin-bottom:10px}
.pb-co{height:62px;width:auto}
.pb-mt{height:56px;width:56px}
.pb-mv{font-size:24px}
.pb-item b{color:var(--navy);font-weight:600;font-size:15px}
.pb-item small{color:var(--muted);font-size:14px}
@media(max-width:760px){
  .partners-band{margin-bottom:28px}
  .pb-grid{grid-template-columns:1fr;padding:8px 16px}
  .pb-item{padding:20px 0}
  .pb-item+.pb-item{border-left:none;border-top:1px solid var(--line)}
  .pm{gap:12px}.pm .pm-co{height:36px}.pm .pm-mt{height:32px;width:32px}.pm .pm-mv{font-size:15px}
}


/* hero: small partnership row under the trust lines (Montivory = Brand Bible official logo, light version) */
.hero-partners{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:28px;padding-top:18px;border-top:1px solid var(--line);max-width:560px}
.hero-partners .hp-lab{font-size:13px;font-weight:600;color:var(--muted);margin-right:4px}
.hero-partners .hp-co{height:30px;width:auto;display:block}
.hero-partners .hp-wm{height:20px;width:auto;display:block}
.hero-partners .hp-mv{font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--navy);white-space:nowrap}
.hero-partners .hp-x{color:#9aa8b8;font-size:13px}
@media(max-width:760px){.hero-partners{gap:9px}.hero-partners .hp-lab{width:100%;margin:0 0 2px}}
/* keep the partnership row in the first screen on common laptops (≈1366×657 visible) and phones */
.hero{padding-top:44px}
.hero .trust{margin-top:28px}
.hero-partners{margin-top:22px;padding-top:16px}
@media(max-width:760px){.hero{padding-top:24px}.hero .trust{margin-top:22px;gap:8px 28px}.hero h1{margin-bottom:12px}.hero p{margin-bottom:22px}.hero-partners{margin-top:18px;padding-top:14px}}
/* login card: every mode (login · sign-up · forgot · new password) sits in one grid cell. The inactive ones
   keep their space but are invisible, so the card has one fixed height and the footer never moves. */
.auth-stack{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.auth-stack>*{grid-area:1/1}
#pwMode{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
#pwMode>#pwTabs{grid-row:1}
#pwMode>form{grid-row:2;grid-column:1}
.auth-stack>.hidden,#pwMode>form.hidden{display:block!important;visibility:hidden}
#pwMode.hidden{display:grid!important}
#pwMode.hidden>#pwTabs.hidden{display:flex!important}
.auth-stack .hidden,.auth-stack .hidden *{transition:none!important}
/* consent (lean): 3 points + one tick */
.consent-points{list-style:none;padding:0;margin:0 0 8px;display:flex;flex-direction:column;gap:14px}
.consent-points li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.6}
.consent-points svg{flex:0 0 auto;color:var(--teal-d);background:#e6f5f5;border-radius:10px;padding:8px;width:36px;height:36px}
.consent-agree{border-top:1px solid var(--line);border-bottom:none;margin-top:14px;padding-top:16px;font-weight:500}
/* privacy + contact */
.policy h3{font-size:16px;color:var(--navy);margin:18px 0 4px}.policy h3:first-child{margin-top:0}
.policy p{font-size:15px;line-height:1.75;color:var(--ink)}
.contact-card{margin-top:16px;scroll-margin-top:90px}
.contact-card h3{font-size:17px;color:var(--navy);margin:0 0 12px}
.contact-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.contact-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.6}
.contact-list svg{flex:0 0 auto;color:var(--teal-d);margin-top:2px}
.contact-list a{color:var(--navy);text-decoration:none;font-weight:500}.contact-list a:hover{color:var(--teal-d);text-decoration:underline}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}

  /* FAQ (home) */
  .faq{padding-top:10px}
  .faq h2{margin-bottom:24px}
  .faq-list{max-width:820px;display:flex;flex-direction:column;gap:10px}
  .faq-item{background:var(--card);border:1px solid var(--line);border-radius:12px;transition:border-color .15s}
  .faq-item[open]{border-color:var(--teal)}
  .faq-item summary{list-style:none;cursor:pointer;padding:15px 48px 15px 18px;font-family:var(--font-head);font-weight:500;font-size:15.5px;color:var(--navy);position:relative}
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary:after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
  .faq-item[open] summary:after{transform:translateY(-30%) rotate(-135deg)}
  .faq-item summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:12px}
  .faq-item p{padding:0 18px 16px;color:#46586b;font-size:14.5px}
  .faq-more{max-width:820px;text-align:left;color:var(--muted);font-size:14px;margin-top:20px}
  .faq-more a{color:var(--teal-d);font-weight:600}