/* PlodNee Web — desktop theme tokens (from Web Dashboard v2 design) */
:root{
  --w-page:radial-gradient(900px 600px at 90% -10%,rgba(200,16,46,.4),transparent 60%),linear-gradient(160deg,#5e0a1a,#3c0812 35%,#240509 70%,#140204);
  --w-solid:#140204; --w-bar:rgba(30,4,10,.55); --w-menu:#3a0a14; --w-card:rgba(255,255,255,.095); --w-soft:rgba(255,255,255,.08);
  --w-line:rgba(255,255,255,.16); --w-text:#f7f4f4; --w-muted:rgba(247,244,244,.62); --w-track:rgba(0,0,0,.3); --w-grid:rgba(255,255,255,.1);
  --w-active-bg:linear-gradient(145deg,#ff5a63,#c8102e); --w-active-fg:#fff; --w-label:#fff; --w-label-fg:#1c0a0d;
}
:root[data-theme="dark"]{
  --w-page:#0b0b0d; --w-solid:#0b0b0d; --w-bar:rgba(11,11,13,.8); --w-menu:#1b1b20; --w-card:#1b1b20; --w-soft:#232329;
  --w-line:rgba(255,255,255,.08); --w-text:#f4f4f6; --w-muted:rgba(244,244,246,.55); --w-track:#2a2a31; --w-grid:rgba(255,255,255,.08);
}
:root[data-theme="light"]{
  --w-page:linear-gradient(160deg,#fbe9eb,#f4eef0 50%,#ece8ee); --w-solid:#f4eef0; --w-bar:rgba(255,255,255,.75); --w-menu:#ffffff; --w-card:#f7f5f6; --w-soft:#ffffff;
  --w-line:#ebe5e6; --w-text:#1c0a0d; --w-muted:#8a7a7c; --w-track:#e8e2e3; --w-grid:#ece6e7;
  --w-active-bg:#ffffff; --w-active-fg:#c8102e; --w-label:#1c0a0d; --w-label-fg:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--w-solid);color:var(--w-text);font-family:'Noto Sans Thai',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#c8102e;text-decoration:none}a:hover{color:#ff5a63}
button{font-family:inherit;cursor:pointer}
.num{font-variant-numeric:tabular-nums}
@keyframes pn-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pn-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(-1deg)}}
@keyframes pn-shine{0%{transform:translateX(-140%) skewX(-20deg)}100%{transform:translateX(260%) skewX(-20deg)}}
@keyframes pn-draw{from{stroke-dashoffset:2000}to{stroke-dashoffset:0}}
@keyframes pn-fill{from{opacity:0}to{opacity:1}}
@keyframes pn-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pn-pulse{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}}
@keyframes pn-cup{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-6px) rotate(6deg)}}
@keyframes pn-tick{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@keyframes pn-spin{to{transform:rotate(360deg)}}
@keyframes pn-orb{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.06) rotate(180deg)}}

.w-page{min-height:100vh;background:var(--w-page);transition:background .6s}
/* top bar */
.w-bar{position:sticky;top:0;z-index:40;background:var(--w-bar);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border-bottom:1px solid var(--w-line)}
.w-bar-in{max-width:1400px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:16px}
.w-logo{display:flex;align-items:baseline;flex:none;text-decoration:none;line-height:1;padding-right:6px}
.w-logo .p{font-size:34px;font-weight:900;letter-spacing:-.06em;color:#c8102e;text-shadow:0 6px 18px rgba(200,16,46,.3)}
.w-logo .n{font-family:'Caveat',cursive;font-size:29px;font-weight:700;color:var(--w-text);margin-left:-2px;transform:rotate(-3deg) translateY(-1px);display:inline-block}
.w-nav{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow:auto;scrollbar-width:none}
.w-nav a{position:relative;display:flex;align-items:center;gap:5px;padding:8px 8px;border-radius:12px;white-space:nowrap;font-size:12px;font-weight:600;color:var(--w-muted);transition:all .25s}
.w-nav a:hover{background:var(--w-soft);color:var(--w-text)}
.w-nav a.on{font-weight:800;color:var(--w-text);background:var(--w-soft)}
.w-nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:-11px;height:3px;border-radius:2px;background:#ff5a63;transform:scaleX(0);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.w-nav a.on::after{transform:scaleX(1)}
.w-tools{display:flex;align-items:center;gap:8px;flex:none}
.w-pill{display:flex;align-items:center;gap:6px;background:var(--w-card);border:1px solid var(--w-line);border-radius:12px;padding:8px 11px;color:var(--w-muted);font-size:12px;height:36px}
.w-pill.text{color:var(--w-text);font-weight:700;font-size:11px}
.w-search{width:128px;cursor:text}
.w-search kbd{font-size:10px;border:1px solid var(--w-line);border-radius:5px;padding:1px 5px;font-family:inherit}
.w-seg{display:flex;background:var(--w-card);border:1px solid var(--w-line);border-radius:12px;padding:3px}
.w-seg button{font-size:10.5px;font-weight:800;border-radius:9px;padding:5px 8px;border:none;background:transparent;color:var(--w-muted)}
.w-seg button.on{background:#c8102e;color:#fff}
.w-modes-float{position:fixed;left:20px;bottom:20px;z-index:45;display:flex;gap:7px;align-items:center;background:var(--w-card);border:1px solid var(--w-line);border-radius:999px;padding:8px 11px;box-shadow:0 10px 30px rgba(0,0,0,.28);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%)}
.w-modes-float .pn-mode{width:18px;height:18px;border-radius:50%;padding:0;border:2px solid rgba(255,255,255,.25);cursor:pointer;transition:transform .2s}
.w-modes-float .pn-mode:hover{transform:scale(1.15)}
.w-modes-float .pn-mode[data-mode="red"]{background:linear-gradient(145deg,#ff5a63,#7a0a1c)}
.w-modes-float .pn-mode[data-mode="dark"]{background:#0b0b0d}
.w-modes-float .pn-mode[data-mode="light"]{background:#f6f6f8}
.w-modes-float .pn-mode.is-active{border-color:#fff;transform:scale(1.15)}
:root[data-theme="light"] .w-modes-float .pn-mode{border-color:rgba(0,0,0,.18)}
:root[data-theme="light"] .w-modes-float .pn-mode.is-active{border-color:#c8102e}
@media print{.w-modes-float{display:none}}
.w-modes{display:flex;gap:6px;align-items:center;background:var(--w-card);border:1px solid var(--w-line);border-radius:12px;padding:0 9px;height:36px}
.w-modes .pn-mode{width:16px;height:16px;border-radius:50%;padding:0;border:2px solid rgba(255,255,255,.25);transition:transform .2s}
.w-modes .pn-mode:hover{transform:scale(1.15)}
.w-modes .pn-mode[data-mode="red"]{background:linear-gradient(145deg,#ff5a63,#7a0a1c)}.w-modes .pn-mode[data-mode="dark"]{background:#0b0b0d}.w-modes .pn-mode[data-mode="light"]{background:#f6f6f8}
.w-modes .pn-mode.is-active{border-color:#fff}:root[data-theme="light"] .w-modes .pn-mode.is-active{border-color:#ffd88a}
.w-cta{display:flex;align-items:center;gap:6px;height:36px;padding:0 11px 0 9px;border-radius:12px;background:linear-gradient(145deg,#ff5a63,#c8102e);color:#fff;font-size:11.5px;font-weight:800;border:none;box-shadow:0 8px 20px rgba(200,16,46,.3);transition:transform .2s;white-space:nowrap}
.w-cta:hover{transform:translateY(-1px)}
.w-icon{width:36px;height:36px;border-radius:12px;background:var(--w-card);border:1px solid var(--w-line);display:flex;align-items:center;justify-content:center;color:var(--w-text);position:relative;padding:0}
.w-dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:#ff5a63;border:2px solid var(--w-card)}
.w-avatar{display:flex;align-items:center;gap:5px;background:var(--w-card);border:1px solid var(--w-line);border-radius:12px;padding:3px 6px 3px 3px;transition:all .3s}
.w-avatar.open{border-color:#ff5a63}
.w-avatar .a{width:28px;height:28px;border-radius:9px;background:linear-gradient(145deg,#ff5a63,#7a0a1c);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px}
.w-menu{position:absolute;right:0;top:44px;width:240px;border-radius:18px;background:var(--w-menu);border:1px solid var(--w-line);box-shadow:0 24px 60px rgba(0,0,0,.35);padding:8px;animation:pn-in .25s both;z-index:50}
.w-menu[hidden]{display:none}
.w-menu-head{display:flex;align-items:center;gap:10px;padding:10px 10px 12px;border-bottom:1px solid var(--w-line)}
.w-menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;font-size:12.5px;font-weight:700;color:var(--w-text);transition:background .2s}
.w-menu a:hover{background:var(--w-soft)}
.w-menu a.danger{color:#ff5a63}
.w-badge{font-size:10px;font-weight:800;color:#fff;background:#c8102e;border-radius:999px;padding:2px 7px;margin-left:auto}
/* content */
.w-content{max-width:1400px;margin:0 auto;padding:22px 28px 40px;display:flex;flex-direction:column;gap:16px}
.w-row1{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:16px}
.w-row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr);gap:16px}
.w-row3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1fr);gap:16px}
@media (max-width:1100px){.w-row1,.w-row2,.w-row3{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.w-row1,.w-row2,.w-row3{grid-template-columns:1fr}.w-nav{display:none}.w-search{display:none}}
.w-card{border-radius:24px;padding:20px 22px;background:var(--w-card);border:1px solid var(--w-line);animation:pn-in .5s both;transition:background .5s;min-width:0}
.w-h{font-size:16px;font-weight:900;color:var(--w-text)}
.w-muted{font-size:12px;color:var(--w-muted)}
.w-link{font-size:11.5px;font-weight:700;color:#c8102e;background:none;border:none;padding:0}
/* hero */
.w-hero{padding:22px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:24px;position:relative;overflow:hidden}
.w-hero-title{font-size:24px;font-weight:900;color:var(--w-text);letter-spacing:-.02em}
.w-ccard-wrap{position:relative;margin-top:14px;max-width:300px;padding-bottom:24px}
.w-ccard-back{position:absolute;left:10px;right:-4px;top:26px;bottom:8px;border-radius:18px;background:linear-gradient(135deg,#ffd88a,#f59e0b);transform:rotate(4deg);opacity:.9}
.w-ccard{position:relative;aspect-ratio:1.6;border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(135deg,#ff5a63 0%,#c8102e 45%,#7a0a1c 100%);box-shadow:0 18px 40px rgba(200,16,46,.35);color:#fff;overflow:hidden;animation:pn-float 5s ease-in-out infinite;cursor:pointer}
.w-ccard::before{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 110% 120%,transparent 0 12px,rgba(255,255,255,.07) 12px 13px)}
.w-ccard::after{content:"";position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:pn-shine 4s ease-in-out infinite}
.w-ccard > *{position:relative}
.w-ccard-top{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;font-weight:700;opacity:.9}
.w-ccard-top b{font-size:12px;font-weight:900;letter-spacing:.06em}
.w-ccard-num{font-size:19px;font-weight:700;letter-spacing:.14em}
.w-ccard-foot{display:flex;justify-content:space-between;align-items:flex-end}
.w-ccard-foot small{display:block;font-size:9px;opacity:.75}
.w-dots{display:flex;gap:6px;margin-top:6px}
.w-dots i{height:5px;border-radius:3px;width:8px;background:var(--w-track);transition:all .3s;display:inline-block;cursor:pointer}
.w-dots i.on{width:26px;background:#c8102e}
.w-total{font-size:clamp(26px,2.8vw,40px);font-weight:900;letter-spacing:-.03em;color:var(--w-text);line-height:1.1}
.w-chip{font-size:12.5px;font-weight:800;color:#16a34a;background:rgba(22,163,74,.12);border-radius:999px;padding:3px 9px}
.w-chip.red{color:#c8102e;background:rgba(200,16,46,.12)}
.w-track{height:12px;border-radius:7px;background:var(--w-track);margin-top:14px;overflow:hidden;position:relative}
.w-fill{height:100%;width:0%;border-radius:7px;background:linear-gradient(90deg,#7a0a1c,#c8102e,#ff5a63);transition:width 1.6s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden}
.w-fill::after{content:"";position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:pn-shine 2.6s ease-in-out infinite}
.w-sub{display:flex;justify-content:space-between;font-size:11px;color:var(--w-muted);margin-top:6px}
.w-sub b{color:var(--w-text)}
.w-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:9px;margin-top:8px}
.w-action{display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 6px 11px;border-radius:16px;background:var(--w-soft);border:1px solid var(--w-line);transition:all .25s;text-decoration:none;color:var(--w-text)}
.w-action:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(200,16,46,.18);color:var(--w-text)}
.w-action .ic{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}
.w-action span{font-size:11.5px;font-weight:800;text-align:center;line-height:1.2}
/* path */
.w-scen{display:flex;background:var(--w-soft);border-radius:999px;padding:3px}
.w-scen button{font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:999px;border:none;background:transparent;color:var(--w-muted);transition:all .25s}
.w-scen button.on{background:#c8102e;color:#fff}
.w-reach{display:flex;align-items:baseline;gap:8px;margin-top:6px;flex-wrap:wrap}
.w-reach b{font-size:18px;font-weight:900;color:#16a34a}
.w-axis{display:flex;justify-content:space-between;font-size:10px;color:var(--w-muted);margin-top:4px}
/* minis */
.w-mini-head{display:flex;align-items:center;gap:10px}
.w-mini-ic{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.w-mini-val{display:flex;align-items:baseline;gap:9px;margin-top:auto;padding-top:10px;flex-wrap:wrap}
.w-mini-val b{font-size:clamp(18px,1.8vw,26px);font-weight:900;letter-spacing:-.02em}
.w-delta{font-size:11px;font-weight:800;border-radius:999px;padding:2px 8px}
/* bars */
.w-legend{margin-left:auto;display:flex;gap:12px;font-size:10.5px;color:var(--w-muted);white-space:nowrap}
.w-legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px}
.w-bars{display:flex;gap:8px;align-items:flex-end;height:130px;margin-top:16px}
.w-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;cursor:pointer;background:none;border:none;padding:0}
.w-bar-stack{position:relative;flex:1;width:100%;border-radius:8px;background:var(--w-track);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;outline:2px solid transparent;outline-offset:2px;transition:outline .2s}
.w-bar.on .w-bar-stack{outline-color:#c8102e}
.w-bar-dca{background:#f59e0b;transform-origin:bottom;animation:pn-grow .8s cubic-bezier(.2,.8,.2,1) both}
.w-bar-debt{background:linear-gradient(180deg,#ff5a63,#c8102e);border-radius:0 0 8px 8px;transform-origin:bottom;animation:pn-grow .8s cubic-bezier(.2,.8,.2,1) both}
.w-bar-lbl{font-size:10px;color:var(--w-muted);font-weight:500}
.w-bar.on .w-bar-lbl{color:#c8102e;font-weight:900}
.w-bar-note{margin-top:12px;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--w-text);background:var(--w-soft);border-radius:12px;padding:9px 13px;animation:pn-tick .3s both}
.w-bar-note b{color:#c8102e}
/* goals */
.w-goal{border-radius:16px;padding:12px 14px;background:var(--w-soft);border:1px solid var(--w-line)}
.w-goal-head{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:800}
.w-goal-head small{font-size:11px;color:var(--w-muted);font-weight:500}
.w-goal-head small b{color:var(--w-text)}
.w-goal-track{height:9px;border-radius:5px;background:var(--w-track);margin-top:8px;overflow:hidden}
.w-goal-fill{height:100%;width:0%;border-radius:5px;transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
/* txns */
.w-tx{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--w-line);animation:pn-tick .4s both;transition:padding .2s}
.w-tx:hover{padding-left:6px}
.w-tx-date{width:110px;font-size:11px;color:var(--w-muted);line-height:1.4}
.w-tx-ch{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900}
.w-tx-l{font-size:13px;font-weight:800}
.w-tx-s{font-size:11px;color:var(--w-muted)}
.w-tx-amt{font-size:13.5px;font-weight:900}
.w-tx-st{font-size:10.5px;color:var(--w-muted)}
/* streak */
.w-streak{background:linear-gradient(145deg,#a40d26,#46081a);border:1px solid rgba(255,255,255,.1);color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column}
.w-streak::before{content:"";position:absolute;right:-30px;top:-30px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.08)}
.w-streak > *{position:relative}
.w-cup{flex:1;display:flex;align-items:center;justify-content:center;min-height:90px;font-size:64px;animation:pn-cup 3s ease-in-out infinite;filter:drop-shadow(0 12px 18px rgba(0,0,0,.35))}
/* modal */
.w-overlay{position:fixed;inset:0;z-index:80;background:rgba(20,2,6,.6);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;animation:pn-fill .25s both}
.w-overlay[hidden]{display:none}
.w-modal{width:420px;max-width:calc(100vw - 40px);border-radius:26px;background:var(--w-menu);border:1px solid var(--w-line);box-shadow:0 40px 100px rgba(0,0,0,.5);padding:28px;animation:pn-in .35s both;position:relative}
.w-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--w-muted);background:var(--w-soft);border:none}
.w-qr{margin:20px auto 0;width:220px;height:220px;border-radius:20px;background:#fff;padding:14px;position:relative;box-shadow:0 12px 30px rgba(0,0,0,.2)}
.w-qr-grid{display:grid;grid-template-columns:repeat(21,1fr);width:100%;height:100%}
.w-qr-c{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px #fff}
.w-qr-c i{width:36px;height:36px;border-radius:10px;background:linear-gradient(145deg,#ff5a63,#7a0a1c);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;font-style:normal;letter-spacing:-.06em}
.w-btn{flex:1;text-align:center;padding:11px;border-radius:13px;font-size:12.5px;font-weight:800;border:1px solid var(--w-line);color:var(--w-text);background:var(--w-soft)}
.w-btn.primary{color:#fff;background:linear-gradient(145deg,#ff5a63,#c8102e);border-color:transparent}
/* AI panel */
.w-ai-fab{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;align-items:center;gap:9px;padding:8px 16px 8px 8px;border-radius:999px;background:var(--w-menu);border:1px solid var(--w-line);box-shadow:0 20px 50px rgba(0,0,0,.35);color:var(--w-text);font-size:13px;font-weight:800;cursor:pointer}
.w-orb{width:34px;height:34px;border-radius:50%;background:conic-gradient(from 90deg,#ff5a63,#ffb3b8,#c8102e,#ff5a63);animation:pn-orb 6s ease-in-out infinite;box-shadow:0 8px 20px rgba(200,16,46,.5),inset 0 1px 0 rgba(255,255,255,.5)}
.w-ai{position:fixed;right:24px;bottom:24px;width:400px;max-width:calc(100vw - 48px);height:min(640px,calc(100vh - 48px));z-index:70;border-radius:24px;background:var(--w-menu);border:1px solid var(--w-line);box-shadow:0 40px 100px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden;animation:pn-in .3s both}
.w-ai[hidden]{display:none}
.w-ai-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--w-line)}
.w-ai-thread{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.w-msg{max-width:88%;border-radius:16px 16px 16px 4px;padding:10px 13px;background:var(--w-soft);border:1px solid var(--w-line);font-size:13px;line-height:1.6;white-space:pre-wrap}
.w-msg.user{align-self:flex-end;border-radius:16px 16px 4px 16px;background:linear-gradient(145deg,#ff5a63,#c8102e);color:#fff;border-color:transparent}
.w-msg .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.w-msg .acts a{font-size:11px;font-weight:800;color:#fff;background:#c8102e;border-radius:999px;padding:5px 10px}
.w-msg .src{font-size:10px;color:var(--w-muted);margin-top:6px;padding-top:6px;border-top:1px solid var(--w-line)}
.w-sugg{text-align:left;font-size:12px;font-weight:700;color:var(--w-text);background:var(--w-soft);border:1px solid var(--w-line);border-radius:12px;padding:9px 12px}
.w-ai-box{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--w-line)}
.w-ai-box input{flex:1;border-radius:12px;border:1px solid var(--w-line);background:var(--w-card);color:var(--w-text);padding:10px 12px;font-size:13px;font-family:inherit;outline:none}
.w-send{width:40px;height:40px;border-radius:12px;border:none;background:linear-gradient(145deg,#ff5a63,#c8102e);color:#fff;font-weight:900}
.w-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--w-menu);color:var(--w-text);border:1px solid var(--w-line);border-radius:999px;padding:9px 16px;font-size:12.5px;font-weight:700;z-index:90;animation:pn-in .3s both}
[hidden]{display:none !important}

/* ===== Sub-pages (Web Debts / Money / Invest / Calendar) ===== */
.w-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.w-title{font-size:24px;font-weight:900;color:var(--w-text);letter-spacing:-.02em;line-height:1.1}
.w-top .w-muted{font-size:12px}
.w-btn2{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--w-text);background:var(--w-card);border:1px solid var(--w-line);border-radius:14px;padding:9px 13px;cursor:pointer;transition:transform .2s;white-space:nowrap;font-family:inherit}
.w-btn2:hover{transform:translateY(-2px);color:var(--w-text)}
.w-btn2.primary{font-weight:800;background:#c8102e;color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(200,16,46,.35)}
.w-btn2.green{font-weight:800;background:#16a34a;color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(22,163,74,.3)}
.w-btn2.sm{font-size:11.5px;padding:6px 11px;border-radius:10px}
.w-month{display:flex;align-items:center;gap:4px;background:var(--w-card);border:1px solid var(--w-line);border-radius:14px;padding:4px}
.w-month button{width:30px;height:30px;border-radius:10px;border:none;background:transparent;color:var(--w-text);font-size:16px}
.w-month button:hover{background:var(--w-soft)}
.w-month span{font-size:13px;font-weight:800;color:var(--w-text);min-width:110px;text-align:center}
.w-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.w-kpi{border-radius:22px;padding:16px 18px;background:var(--w-card);border:1px solid var(--w-line);animation:pn-in .5s both;position:relative;overflow:hidden;min-width:0}
.w-kpi .glow{position:absolute;right:-10px;top:-10px;width:70px;height:70px;border-radius:50%}
.w-kpi .lb{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--w-muted)}
.w-kpi .ic{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.w-kpi .v{font-size:clamp(20px,1.9vw,28px);font-weight:900;letter-spacing:-.02em;margin-top:8px;font-variant-numeric:tabular-nums}
.w-kpi .s{font-size:11px;color:var(--w-muted);margin-top:2px}
.w-g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.w-g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
.w-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:16px;align-items:start}
@media (max-width:1000px){.w-split{grid-template-columns:1fr}}
.w-seg2{display:flex;background:var(--w-soft);border-radius:999px;padding:3px}
.w-seg2 button{font-size:10.5px;font-weight:800;padding:5px 12px;border-radius:999px;border:none;background:transparent;color:var(--w-muted);transition:all .25s;white-space:nowrap}
.w-seg2 button.on{background:#c8102e;color:#fff}
.w-strat{display:flex;background:var(--w-track);border-radius:999px;padding:4px;position:relative}
.w-strat .knob{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:linear-gradient(145deg,#ff5a63,#c8102e);box-shadow:0 4px 14px rgba(200,16,46,.4);transition:left .35s cubic-bezier(.6,0,.2,1.2)}
.w-strat.snow .knob{left:50%}
.w-strat button{flex:1;position:relative;font-size:12.5px;font-weight:800;padding:8px 0;border:none;background:transparent;color:var(--w-muted);transition:color .3s;white-space:nowrap}
.w-strat button.on{color:#fff}
input[type=range].w-range{width:100%;accent-color:#c8102e;margin-top:6px}
.w-soft{border-radius:14px;padding:11px 13px;background:var(--w-soft);border:1px solid var(--w-line)}
.w-stat .l{font-size:10.5px;color:var(--w-muted)}.w-stat .v{font-size:clamp(14px,1.3vw,18px);font-weight:900;font-variant-numeric:tabular-nums;margin-top:2px}.w-stat .s{font-size:10px;color:var(--w-muted)}
.w-stats4{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:14px}
/* debt list */
.w-debt{border-radius:20px;padding:16px 18px;background:var(--w-card);border:1.5px solid var(--w-line);cursor:pointer;transition:all .3s;animation:pn-in .5s both;position:relative;overflow:hidden}
.w-debt:hover{transform:translateX(4px)}
.w-debt.sel{background:rgba(200,16,46,.16);border-color:#ff5a63}
.w-debt .focusbar{position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,#ff5a63,#c8102e)}
.w-debt .n{width:30px;height:30px;border-radius:10px;background:var(--w-soft);color:var(--w-muted);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;flex:none}
.w-debt.focus .n{background:#c8102e;color:#fff}
.w-tag{font-size:9px;font-weight:900;color:#fff;background:#c8102e;border-radius:5px;padding:1px 6px}
.w-bar8{height:8px;border-radius:5px;background:var(--w-track);margin-top:12px;overflow:hidden}
.w-bar8 > div{height:100%;width:0;border-radius:5px;background:var(--w-label);transition:width 1.4s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden}
.w-debt.focus .w-bar8 > div{background:linear-gradient(90deg,#ff5a63,#c8102e)}
.w-bar8 > div::after{content:"";position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:pn-shine 3s ease-in-out infinite}
.w-closed{border-radius:20px;padding:14px 18px;background:var(--w-card);border:1px dashed var(--w-line);display:flex;align-items:center;gap:12px;animation:pn-in .5s .4s both}
/* tables */
.w-table{overflow-x:auto}
.w-tr{display:grid;gap:8px;align-items:center;padding:9px 10px;white-space:nowrap;border-radius:12px;font-size:12px;color:var(--w-text);animation:pn-tick .35s both;transition:background .2s}
.w-tr:hover{background:var(--w-soft)}
.w-th{display:grid;gap:8px;font-size:10.5px;font-weight:800;color:var(--w-muted);padding:12px 10px 8px;white-space:nowrap;border-bottom:1px solid var(--w-line)}
.w-scroll{display:flex;flex-direction:column;max-height:320px;overflow:auto}
.w-pi{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--w-track)}
.w-pi .p{background:linear-gradient(90deg,#16a34a,#4ade80)}.w-pi .i{background:linear-gradient(90deg,#c8102e,#ff5a63)}
.w-foot{display:flex;gap:16px;margin-top:12px;padding-top:12px;border-top:1px solid var(--w-line);font-size:11.5px;color:var(--w-muted);flex-wrap:wrap}
.w-foot i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px}
/* chips */
.w-chips{display:flex;gap:6px;flex-wrap:wrap}
.w-chp{font-size:11.5px;font-weight:800;padding:6px 11px;border-radius:999px;cursor:pointer;background:transparent;color:var(--w-text);border:1px solid var(--w-line);transition:all .2s;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.w-chp.on{color:#fff;border-color:transparent;background:#c8102e}
.w-chp i{width:8px;height:8px;border-radius:50%;display:inline-block}
.w-chp.off{opacity:.55}
/* accounts grid */
/* สถานะกำลังโหลดในปุ่ม — จุด 3 จุดไล่ระดับเป็นคลื่น */
.w-dots{display:inline-flex;align-items:center;gap:4px;height:1em}
.w-dots i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block;animation:w-dot 1.1s ease-in-out infinite}
.w-dots i:nth-child(2){animation-delay:.15s}
.w-dots i:nth-child(3){animation-delay:.3s}
@keyframes w-dot{0%,70%,100%{transform:translateY(0);opacity:.35}35%{transform:translateY(-5px);opacity:1}}
@media (prefers-reduced-motion:reduce){.w-dots i{animation:none;opacity:.7}}
.w-accs{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:6px;margin-top:6px}
.w-acc{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;padding:8px 6px;border-radius:12px;cursor:pointer;background:var(--w-soft);border:1.5px solid var(--w-line);transition:all .2s;font-family:inherit;color:var(--w-text);min-width:0;overflow:hidden;text-align:center}
.w-acc:hover{transform:translateY(-2px)}
.w-acc.on{background:rgba(255,255,255,.12);border-color:var(--w-label)}
.w-acc.on.credit{background:rgba(200,16,46,.14);border-color:#ff5a63}
.w-acc .l{font-size:11px;font-weight:800;white-space:normal;line-height:1.25;word-break:break-word;hyphens:auto;max-width:100%}
.w-acc .s{font-size:9.5px;color:var(--w-muted);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.w-acc.credit .s{color:#ff8a8f}
/* forms */
.w-field{border-radius:12px;background:var(--w-soft);border:1px solid var(--w-line);padding:8px 12px}
.w-field label{display:block;font-size:10px;color:var(--w-muted);font-weight:700}
.w-field input,.w-field select,.w-field textarea{width:100%;background:transparent;border:none;outline:none;font-size:16px;font-weight:800;color:var(--w-text);padding:2px 0 0;font-family:inherit}
.w-field select option{color:#1c0a0d}
.w-field input.big{font-size:22px;font-weight:900}
.w-input{width:100%;box-sizing:border-box;background:var(--w-soft);border:1px solid var(--w-line);border-radius:12px;padding:10px 12px;font-size:13px;color:var(--w-text);outline:none;font-family:inherit}
.w-amount{display:flex;align-items:baseline;gap:6px;padding:10px 14px;border-radius:14px;background:var(--w-soft);border:1px solid var(--w-line)}
.w-amount b{font-size:22px;font-weight:900}
.w-amount input{flex:1;background:transparent;border:none;outline:none;font-size:32px;font-weight:900;color:var(--w-text);min-width:0;padding:0;font-family:inherit}
.w-note{border-radius:12px;padding:10px 12px;font-size:11.5px;line-height:1.5;color:var(--w-text)}
.w-note.red{background:rgba(200,16,46,.12);border:1px solid rgba(255,90,99,.4)}
.w-note.amber{background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.4)}
.w-note.green{background:rgba(22,163,74,.12);border:1px solid rgba(22,163,74,.4)}
.w-submit{margin-top:14px;width:100%;text-align:center;font-size:14px;font-weight:900;color:#fff;background:linear-gradient(145deg,#ff5a63,#c8102e);border-radius:14px;padding:13px;border:none;box-shadow:0 8px 22px rgba(200,16,46,.35);font-family:inherit}
.w-modal.wide{width:460px}
.w-modal h3{margin:0;font-size:18px;font-weight:900}
.w-f2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.w-type{display:flex;background:var(--w-track);border-radius:999px;padding:4px}
.w-type button{flex:1;text-align:center;font-size:12.5px;font-weight:800;padding:8px;border-radius:999px;border:none;background:transparent;color:var(--w-muted);transition:all .25s}
.w-type button.on{color:#fff;background:#c8102e} /* ต้องมีพื้นแดง — โหมดขาว track เป็นสีอ่อน ตัวหนังสือขาวลอยจะอ่านไม่ออก */
/* money daily bars */
.w-days{display:flex;gap:4px;align-items:flex-end;height:100%}
.w-day{flex:1;display:flex;flex-direction:column;height:100%;justify-content:flex-end;cursor:pointer;border-radius:4px;transition:background .2s;border:none;background:transparent;padding:0}
.w-day:hover{background:var(--w-soft)}.w-day.on{background:rgba(255,255,255,.12)}
.w-day .in{background:#16a34a;border-radius:3px 3px 0 0;transform-origin:bottom;animation:pn-grow .7s both}
.w-day .ex{background:#c8102e;border-radius:3px;transform-origin:bottom;animation:pn-grow .7s both}
.w-day .ex.over{background:linear-gradient(180deg,#ff5a63,#c8102e)}.w-day .ex.debt{background:var(--w-label);opacity:.6}
.w-cat{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:10px;cursor:pointer;transition:background .2s;border:none;background:transparent;width:100%;font-family:inherit;color:var(--w-text);text-align:left}
.w-cat:hover{background:var(--w-soft)}.w-cat.on{background:rgba(255,255,255,.12)}
.w-cat i{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}
.w-cat .nm{flex:1;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-cat .tr{width:clamp(36px,20%,70px);height:5px;border-radius:3px;background:var(--w-track);overflow:hidden}.w-cat .tr div{height:100%;width:0;transition:width 1s}
.w-cat .am{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.w-red{background:linear-gradient(145deg,#a40d26,#46081a);border:1px solid rgba(255,255,255,.1);color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column}
.w-red::before{content:"";position:absolute;right:-30px;top:-30px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.08)}
.w-red > *{position:relative}
.w-drop{margin-top:14px;border:1.5px dashed rgba(255,255,255,.4);border-radius:16px;padding:18px 14px;text-align:center;background:rgba(0,0,0,.18);overflow:hidden;cursor:pointer;position:relative;transition:background .2s}
.w-drop:hover,.w-drop.over{background:rgba(0,0,0,.3)}
.w-drop .beam{position:absolute;left:8%;right:8%;height:2px;background:linear-gradient(90deg,transparent,#ffd88a,transparent);animation:pn-scan 2.6s ease-in-out infinite;box-shadow:0 0 12px #ffd88a}
@keyframes pn-scan{0%{top:8%}50%{top:88%}100%{top:8%}}
.w-imp{display:flex;align-items:center;gap:9px;font-size:11.5px;background:rgba(255,255,255,.1);border-radius:10px;padding:7px 10px}
.w-catpill{font-size:10.5px;font-weight:800;border-radius:999px;padding:3px 9px;white-space:nowrap}
.w-del{border:none;background:transparent;color:var(--w-muted);cursor:pointer;font-size:14px;padding:2px 6px;border-radius:8px;opacity:0;transition:opacity .2s}
.w-tr:hover .w-del{opacity:1}.w-del:hover{color:#ff5a63;background:var(--w-soft)}
.w-searchbox{display:flex;align-items:center;gap:7px;background:var(--w-soft);border:1px solid var(--w-line);border-radius:12px;padding:6px 11px;color:var(--w-muted);font-size:12px;width:200px}
.w-searchbox input{flex:1;background:transparent;border:none;outline:none;color:var(--w-text);font-size:12px;min-width:0;font-family:inherit}
/* invest */
.w-hold{display:grid;gap:10px;align-items:center;padding:10px;border-radius:12px;font-size:12.5px;color:var(--w-text);animation:pn-tick .35s both;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:background .2s}
.w-hold:hover{background:var(--w-soft)}.w-hold.on{background:rgba(255,255,255,.12);border-color:var(--w-line)}
.w-hold .tick{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;flex:none}
.w-rule{display:grid;grid-template-columns:minmax(0,1fr) 78px;gap:10px;align-items:center;padding:8px 12px;border-radius:14px;background:var(--w-soft);border:1px solid var(--w-line)}
.w-rule input[type=number]{width:44px;text-align:right;background:transparent;border:none;outline:none;font-size:18px;font-weight:900;color:var(--w-text);padding:0;font-family:inherit}
.w-sig{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--w-text);padding:7px 10px;border-radius:11px;border:1px solid transparent}
.w-sig i{width:8px;height:8px;border-radius:50%;flex:none}
.w-mos{position:relative;height:10px;border-radius:5px;background:linear-gradient(90deg,#16a34a,#f59e0b 55%,#c8102e);margin-top:4px}
.w-mos div{position:absolute;top:-4px;width:4px;height:18px;border-radius:2px;background:var(--w-text);transform:translateX(-50%);transition:left .4s;box-shadow:0 0 0 3px var(--w-card)}
.w-slider .h{display:flex;justify-content:space-between;font-size:11px;color:var(--w-muted);font-weight:700}
.w-slider input{width:100%;margin:4px 0 0;accent-color:#c8102e}
/* calendar */
.w-cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;font-size:10.5px;font-weight:800;color:var(--w-muted);text-align:center;padding-bottom:6px}
.w-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.w-cell{min-height:92px;border-radius:14px;padding:7px 8px;background:var(--w-track);border:1.5px solid var(--w-line);cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:all .2s;position:relative;min-width:0}
:root[data-theme="light"] .w-cell{background:#fff}
.w-cell:hover{transform:translateY(-2px)}
.w-cell.empty{background:transparent;border-color:transparent;cursor:default;opacity:0}
.w-cell.past{opacity:.55}.w-cell.low{border-color:rgba(255,90,99,.5)}.w-cell.sel{background:rgba(255,255,255,.12);border-color:var(--w-label)}
:root[data-theme="light"] .w-cell.sel{background:#fde8eb}
.w-cell .d{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:900;flex:none}
.w-cell.today .d{background:#c8102e;color:#fff}.w-cell.wk .d{color:#ff8a8f}
.w-cell .bal{font-size:9.5px;font-weight:800;color:var(--w-muted);font-variant-numeric:tabular-nums;white-space:nowrap}.w-cell.low .bal{color:#ff8a8f}
.w-ev{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:700;border-radius:6px;padding:2px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:var(--w-text)}
.w-ev i{width:5px;height:5px;border-radius:50%;display:inline-block;flex:none}
.w-ev span{overflow:hidden;text-overflow:ellipsis}
.w-evrow{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:12px;background:var(--w-soft);border:1px solid var(--w-line);animation:pn-tick .3s both}
.w-evrow .ic{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;flex:none}
.w-up{display:flex;align-items:center;gap:9px;font-size:11.5px;background:rgba(255,255,255,.1);border-radius:11px;padding:7px 10px;cursor:pointer;transition:background .2s}
.w-up:hover{background:rgba(255,255,255,.18)}
@keyframes pn-blink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes pn-donut{from{stroke-dasharray:0 1000}}
@media print{.w-bar,.w-ai-fab,.w-ai,.w-top .w-btn2,.w-red{display:none !important}.w-page{background:#fff}.w-card{break-inside:avoid}}

/* ===== Settings / Reports / Tax / Pro ===== */
.w-secnav{flex:1 1 200px;max-width:100%;width:200px;display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start}
.w-secnav button{flex:1 1 160px;display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:12px;border:none;background:transparent;color:var(--w-muted);font-size:12.5px;font-weight:800;white-space:nowrap;transition:all .2s;font-family:inherit;text-align:left}
.w-secnav button:hover{background:var(--w-soft)}.w-secnav button.on{background:var(--w-card);color:var(--w-text)}
.w-secnav .bd{margin-left:auto;font-size:9.5px;font-weight:900;color:#fff;background:#c8102e;border-radius:999px;padding:2px 7px}
.w-toggle{width:38px;height:22px;border-radius:11px;background:var(--w-track);position:relative;cursor:pointer;transition:background .25s;flex:none;border:none;padding:0}
.w-toggle::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .25s}
.w-toggle.on{background:#16a34a}.w-toggle.on::after{left:18px}
.w-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:var(--w-soft);border:1px solid var(--w-line)}
.w-row .t{font-size:12.5px;font-weight:800}.w-row .s{font-size:10.5px;color:var(--w-muted)}
.w-opt{border-radius:16px;padding:14px;background:var(--w-soft);border:1.5px solid var(--w-line);cursor:pointer;transition:all .2s}
.w-opt:hover{transform:translateY(-2px)}.w-opt.on{background:rgba(255,255,255,.12);border-color:var(--w-label)}
:root[data-theme="light"] .w-opt.on{background:#fde8eb}
/* สถานะ "เลือกอยู่" ที่ใช้ขาวโปร่ง 12% มองไม่เห็นบนพื้นขาว → ใช้ชมพูอ่อนแบบเดียวกับ .w-opt.on */
:root[data-theme="light"] .w-acc.on,:root[data-theme="light"] .w-day.on,:root[data-theme="light"] .w-cat.on,:root[data-theme="light"] .w-hold.on{background:#fde8eb}
.w-radio{margin-left:auto;width:16px;height:16px;border-radius:50%;border:2px solid var(--w-muted);flex:none}.w-opt.on .w-radio{border-color:var(--w-label);background:var(--w-label)}
.w-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.w-check{width:22px;height:22px;border-radius:7px;border:2px solid var(--w-muted);background:transparent;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:900;cursor:pointer;transition:all .2s;padding:0;font-family:inherit}
.w-check.on{background:#16a34a;border-color:#16a34a}
.w-score{display:flex;align-items:center;gap:14px}
.w-tl{display:flex;gap:12px;align-items:flex-start;padding:7px 0;position:relative;animation:pn-tick .35s both}
.w-tl .d{width:40px;flex:none;text-align:center;border-radius:10px;padding:4px 0;font-size:10px;font-weight:900;line-height:1.2;position:relative;background:var(--w-soft)}
@keyframes pn-growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.w-pro-wrap{min-height:100vh;padding:26px;display:flex;align-items:center;justify-content:center;background:radial-gradient(900px 600px at 90% -10%,rgba(200,16,46,.4),transparent 60%),linear-gradient(160deg,#5e0a1a,#3c0812 35%,#240509 70%,#140204)}
.w-pro{width:100%;max-width:1040px;border-radius:30px;padding:40px 44px 36px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 100px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.2);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);position:relative;animation:pn-in .5s both;color:#f7f4f4}
.w-pro-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:start;margin-top:14px}
@media (max-width:820px){.w-pro-grid{grid-template-columns:1fr}.w-pro{padding:28px 22px}}
.w-perk{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:15px;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.w-plan{position:relative;border-radius:16px;padding:14px;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.18);cursor:pointer;transition:all .25s}
.w-plan:hover{transform:translateY(-2px)}
.w-plan.on{background:linear-gradient(135deg,rgba(255,216,138,.22),rgba(255,255,255,.06));border-color:#ffd88a;box-shadow:0 14px 40px rgba(245,158,11,.25),inset 0 1px 0 rgba(255,255,255,.4)}
.w-pro-cta{position:relative;overflow:hidden;border-radius:16px;padding:14px;text-align:center;margin-top:16px;background:linear-gradient(145deg,#ff5a63,#c8102e);border:1px solid rgba(255,255,255,.3);box-shadow:0 14px 40px rgba(200,16,46,.5),inset 0 1px 0 rgba(255,255,255,.45);cursor:pointer;width:100%;color:#fff;font-family:inherit;transition:transform .2s}
.w-pro-cta:hover{transform:translateY(-2px)}.w-pro-cta.active{background:linear-gradient(145deg,#16a34a,#15803d);box-shadow:0 14px 40px rgba(22,163,74,.4)}
.w-pro-cta::before{content:"";position:absolute;top:0;bottom:0;width:36%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:pn-shine 3.2s ease-in-out infinite}
/* phone-frame modal for mobile-only tools + AI typing */
.w-phone{position:relative;width:400px;max-width:calc(100vw - 32px);height:min(820px,calc(100vh - 40px));border-radius:40px;background:#140204;border:8px solid #1c0a0d;box-shadow:0 40px 100px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.12);overflow:hidden;animation:pn-in .3s both}
.w-phone iframe{width:100%;height:100%;border:0;display:block;background:#140204}
.w-phone .w-x{position:absolute;top:10px;right:10px;z-index:2;background:rgba(0,0,0,.5);color:#fff}
.w-typing{display:flex;align-items:center;gap:8px;color:var(--w-muted)}
.w-dots3{display:inline-flex;gap:3px}.w-dots3 i{width:6px;height:6px;border-radius:50%;background:#ff5a63;animation:pn-blink 1s infinite}.w-dots3 i:nth-child(2){animation-delay:.2s}.w-dots3 i:nth-child(3){animation-delay:.4s}