/* ===== Premium Light — Finexy-inspired, VPS-adapted ===== */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

.pm {
  --canvas: oklch(0.972 0.003 250);
  --app: oklch(0.988 0.002 250);
  --card: oklch(1 0 0);
  --ink: oklch(0.23 0.012 255);
  --ink-2: oklch(0.50 0.012 255);
  --ink-3: oklch(0.66 0.010 255);
  --line: oklch(0.23 0.02 255 / 0.09);
  --line-soft: oklch(0.23 0.02 255 / 0.05);
  --green: oklch(0.70 0.155 159);
  --green-700: oklch(0.52 0.12 160);
  --lime: oklch(0.86 0.19 128);
  --lime-soft: oklch(0.93 0.10 128);
  --hero-grad: linear-gradient(135deg, oklch(0.42 0.11 162) 0%, oklch(0.62 0.16 155) 45%, oklch(0.85 0.19 128) 130%);
  --shadow-card: 0 1px 2px oklch(0.3 0.02 255/0.04), 0 6px 20px -10px oklch(0.3 0.04 255/0.12);
  --shadow-soft: 0 1px 2px oklch(0.3 0.02 255/0.05);
  --r: 16px; --r-sm: 11px; --r-xs: 8px;
  --danger: oklch(0.62 0.19 22); --warn: oklch(0.78 0.14 70);
  font-family: var(--font-ui, 'Geist'), system-ui, -apple-system, sans-serif;
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.pm * { box-sizing: border-box; }
.pm .mono { font-family: 'IBM Plex Mono', monospace; }

/* ---- DARK ---- */
.pm[data-theme="dark"] {
  --canvas: oklch(0.165 0.012 255);
  --app: oklch(0.205 0.014 255);
  --card: oklch(0.245 0.016 255);
  --ink: oklch(0.96 0.005 250);
  --ink-2: oklch(0.72 0.012 252);
  --ink-3: oklch(0.55 0.014 254);
  --line: oklch(1 0 0 / 0.09);
  --line-soft: oklch(1 0 0 / 0.05);
  --lime-soft: oklch(0.55 0.12 128 / 0.22);
  --shadow-card: 0 1px 2px oklch(0 0 0/0.3), 0 10px 28px -14px oklch(0 0 0/0.55);
  --shadow-soft: 0 1px 2px oklch(0 0 0/0.3);
}
.pm[data-theme="dark"] .pm-app { box-shadow: 0 24px 60px -28px oklch(0 0 0/0.6); }
.pm[data-theme="dark"] .pm-pc.dark { background: linear-gradient(135deg, oklch(0.34 0.012 255), oklch(0.24 0.012 255)); }

/* shell */
.pm-shell { height: 100vh; padding: 14px; display: flex; }
.pm-app { flex: 1; background: var(--app); border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 24px 60px -28px oklch(0.3 0.05 255/0.25); display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.pm-topbar { display: flex; align-items: center; gap: 18px; padding: 13px 22px 12px 14px; }
.pm-brandpill { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 18px 6px 6px; box-shadow: var(--shadow-soft); font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.pm-brandpill .bm { width: 32px; height: 32px; border-radius: 10px; background: var(--hero-grad); display: grid; place-items: center; color: white; }
.pm-brandpill .bm svg { width: 18px; height: 18px; }
.pm-bodyrow { flex: 1; display: grid; grid-template-columns: 76px 1fr; min-height: 0; }

/* dock — 3 capsule groups, distributed top/middle/bottom */
.pm-dock { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 14px 0; }
.pm-theme, .pm-navdock, .pm-bottom { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 5px; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tt { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); cursor: pointer; border: 0; background: transparent; transition: all .14s; padding: 0; }
.tt svg { width: 16px; height: 16px; }
.tt.on { background: var(--canvas); color: var(--ink); }
.pm-di { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); cursor: pointer; transition: all .15s; }
.pm-di svg { width: 19px; height: 19px; }
.pm-di:hover { background: var(--canvas); color: var(--ink); }
.pm-di.on { background: var(--ink); color: var(--app); box-shadow: 0 6px 14px -6px oklch(0.2 0.02 255/0.5); }

/* main */
.pm-main { display: flex; flex-direction: column; min-width: 0; }
.pm-head { display: flex; align-items: center; gap: 18px; padding: 16px 26px; }
.pm-brand { font-weight: 800; font-size: 19px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 9px; }
.pm-brand .bm { width: 30px; height: 30px; border-radius: 9px; background: var(--hero-grad); display: grid; place-items: center; color: white; }
.pm-brand .bm svg { width: 17px; height: 17px; }
.pm-nav { display: flex; gap: 2px; background: var(--canvas); border-radius: 999px; padding: 5px; margin: 0 auto; }
.pm-nav a { padding: 8px 17px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: all .15s; white-space: nowrap; text-decoration: none; }
.pm-nav a:hover { color: var(--ink); }
.pm-nav a.on { background: var(--ink); color: var(--app); box-shadow: 0 4px 12px -4px oklch(0.2 0.02 255/0.4); }
.pm-tools { display: flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 5px; box-shadow: var(--shadow-soft); }
.pm-tb { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; color: var(--ink-2); cursor: pointer; transition: all .14s; position: relative; }
.pm-tb:hover { background: var(--canvas); color: var(--ink); }
.pm-tb svg { width: 18px; height: 18px; }
.pm-tb .pip { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); border: 2px solid var(--card); }
.pm-user { display: flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px 5px 5px; box-shadow: var(--shadow-soft); cursor: pointer; }
.pm-av { width: 34px; height: 34px; border-radius: 50%; background: var(--hero-grad); display: grid; place-items: center; color: white; font-weight: 700; font-size: 13px; }
.pm-user .un { font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.pm-user .ue { font-size: 11px; color: var(--ink-3); white-space: nowrap; }

.pm-body { flex: 1; overflow-y: auto; padding: 16px 24px 28px; }
.pm-greet h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
.pm-greet p { color: var(--ink-2); margin-top: 5px; font-size: 14.5px; }
.pm-greet { margin-bottom: 16px; }

/* grid */
.pm-layout { display: grid; grid-template-columns: 312px 1fr; gap: 13px; align-items: start; }
.pm-right { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.pm-toprow { display: grid; grid-template-columns: 1.25fr 1fr; gap: 13px; align-items: start; }
.pm-col { display: flex; flex-direction: column; gap: 13px; }

.pm-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-card); padding: 16px; }
.pm-card-t { font-size: 13px; color: var(--ink-2); font-weight: 600; }

/* wallet */
.pm-balance { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 4px; }
.pm-delta { font-size: 12.5px; color: var(--green-700); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.pm-delta svg { width: 13px; height: 13px; }
.pm-actions { display: flex; gap: 9px; margin-top: 16px; }
.pm-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-size: 13.5px; font-weight: 700; padding: 11px; border-radius: 999px; border: 0; cursor: pointer; transition: all .15s; }
.pm-btn svg { width: 16px; height: 16px; }
.pm-btn-green { background: var(--green); color: oklch(0.20 0.04 160); box-shadow: 0 8px 18px -8px oklch(0.6 0.16 155/0.6); }
.pm-btn-green:hover { filter: brightness(1.05); }
.pm-btn-soft { background: var(--canvas); color: var(--ink); }
.pm-btn-soft:hover { background: oklch(0.92 0.005 250); }

.pm-divline { height: 1px; background: var(--line-soft); margin: 16px 0; }
.pm-methods .pm-mt { font-size: 12px; color: var(--ink-3); font-weight: 600; margin-bottom: 10px; display: flex; justify-content: space-between; }
.pm-method { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.pm-method .mi { width: 34px; height: 24px; border-radius: 6px; background: var(--canvas); display: grid; place-items: center; font-size: 9px; font-weight: 700; color: var(--ink-2); border: 1px solid var(--line); }
.pm-method .mn { font-size: 13px; font-weight: 600; flex: 1; }
.pm-method .ms { font-size: 11px; color: var(--ink-3); }
.pm-pill-tag { font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.pm-pill-tag.act { background: var(--lime-soft); color: var(--green-700); }
.pm-pill-tag.inact { background: var(--canvas); color: var(--ink-3); }

/* spend limit */
.pm-bar { height: 9px; border-radius: 999px; background: var(--canvas); overflow: hidden; margin: 12px 0 8px; }
.pm-bar i { display: block; height: 100%; border-radius: 999px; background: var(--hero-grad); }
.pm-bar-l { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }

/* cards (payment) */
.pm-cards { display: flex; gap: 11px; }
.pm-pc { flex: 1; aspect-ratio: 1.6; border-radius: 14px; padding: 13px; color: white; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.pm-pc.dark { background: linear-gradient(135deg, oklch(0.28 0.01 255), oklch(0.18 0.01 255)); }
.pm-pc.green { background: var(--hero-grad); }
.pm-pc .pcn { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.05em; }
.pm-pc .pct { font-size: 9px; opacity: .8; }
.pm-pc .pchip { width: 26px; height: 18px; border-radius: 4px; background: oklch(1 0 0 / 0.25); }

/* stat tiles */
.pm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px; box-shadow: var(--shadow-card); }
.pm-stat { background: var(--canvas); border: 1px solid var(--line); border-radius: 12px; padding: 15px; }
.pm-stat.hero { background: var(--hero-grad); border: 0; color: white; box-shadow: 0 18px 40px -18px oklch(0.5 0.16 150/0.7); }
.pm-stat .st-top { display: flex; align-items: center; justify-content: space-between; }
.pm-stat .st-l { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.pm-stat.hero .st-l { color: oklch(1 0 0 / 0.85); }
.pm-stat .st-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--card); color: var(--green-700); }
.pm-stat.hero .st-ic { background: oklch(1 0 0 / 0.2); color: white; }
.pm-stat .st-ic svg { width: 17px; height: 17px; }
.pm-stat .st-v { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 10px 0 4px; }
.pm-stat .st-d { font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 7px; }
.st-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px; border-radius: 999px; font-weight: 600; font-size: 11.5px; }
.st-pill svg { width: 12px; height: 12px; }
.st-pill.up { background: var(--lime-soft); color: var(--green-700); }
.st-pill.down { background: color-mix(in oklch, var(--danger) 16%, transparent); color: var(--danger); }
.st-pill.neutral { background: var(--card); color: var(--ink-3); }
.st-sub { color: var(--ink-3); }
.pm-stat.hero .st-pill.up { background: oklch(1 0 0 / 0.22); color: white; }
.pm-stat.hero .st-pill.neutral { background: oklch(1 0 0 / 0.18); color: white; }
.pm-stat.hero .st-sub { color: oklch(1 0 0 / 0.85); }

/* chart card */
.pm-chart-card { display: flex; flex-direction: column; }
.pm-inner { background: var(--canvas); border-radius: 13px; padding: 13px; }
.ch-t { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.ch-s { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.pm-legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); font-weight: 600; }
.pm-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 5px; }
.pm-bars { display: flex; align-items: flex-end; gap: 10px; height: 148px; margin-top: 14px; }
.pm-bcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.pm-bpair { display: flex; gap: 3px; align-items: flex-end; height: 100%; width: 100%; justify-content: center; }
.pm-bpair span { width: 9px; border-radius: 5px 5px 3px 3px; }
.pm-bpair .a { background: var(--lime); }
.pm-bpair .b { background: var(--ink); }
.pm-bcol .bl { font-size: 10.5px; color: var(--ink-3); font-weight: 600; }

/* table */
.pm-table-card { margin-top: 16px; }
.pm-tch { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pm-tch h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.pm-tch .tools { display: flex; gap: 9px; }
.pm-search { display: flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: 13px; color: var(--ink-3); width: 230px; }
.pm-search svg { width: 16px; height: 16px; }
.pm-filter { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: 13px; color: var(--ink); font-weight: 500; cursor: pointer; }
.pm-filter svg { width: 15px; height: 15px; }
table.pm-tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
table.pm-tbl thead th { background: var(--canvas); }
.pm-table-wrap { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
table.pm-tbl th { text-align: left; font-size: 11.5px; color: var(--ink-3); font-weight: 500; padding: 12px 14px; text-transform: none; }
table.pm-tbl td { padding: 15px 14px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
table.pm-tbl tbody tr:last-child td { border-bottom: 0; }
table.pm-tbl tbody tr { transition: background .12s; }
table.pm-tbl tbody tr:hover { background: var(--canvas); }
table.pm-tbl tbody tr.sel { background: var(--canvas); }
.pm-svc { display: flex; align-items: center; gap: 10px; }
.pm-svc .si { width: 32px; height: 32px; border-radius: 9px; background: var(--canvas); display: grid; place-items: center; color: var(--green-700); }
.pm-svc .si.t-green  { background: color-mix(in oklch, oklch(0.65 0.16 155) 14%, var(--card)); color: oklch(0.56 0.14 158); }
.pm-svc .si.t-blue   { background: color-mix(in oklch, oklch(0.6 0.16 255) 14%, var(--card)); color: oklch(0.58 0.15 255); }
.pm-svc .si.t-amber  { background: color-mix(in oklch, oklch(0.72 0.15 70) 16%, var(--card)); color: oklch(0.56 0.13 62); }
.pm-svc .si.t-violet { background: color-mix(in oklch, oklch(0.6 0.17 300) 14%, var(--card)); color: oklch(0.58 0.16 300); }
.pm-svc .si.t-red    { background: color-mix(in oklch, oklch(0.62 0.19 25) 14%, var(--card)); color: oklch(0.6 0.18 25); }
.pm-svc .si svg { width: 16px; height: 16px; }
.pm-svc .sn { font-weight: 700; font-size: 13px; }
.pm-svc .sip { font-size: 11px; color: var(--ink-3); font-family: 'IBM Plex Mono', monospace; }
.pm-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.pm-status .d { width: 7px; height: 7px; border-radius: 50%; }
.pm-status.ok .d { background: var(--green); }
.pm-status.pend .d { background: var(--warn); }
.pm-status.prog .d { background: oklch(0.62 0.13 250); }
.pm-status.over .d { background: var(--danger); }
.pm-status.over { color: var(--danger); }
.pm-check { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--line); display: inline-grid; place-items: center; }
.pm-check.on { background: var(--ink); border-color: var(--ink); color: var(--app); }
.pm-check.on svg { width: 12px; height: 12px; }
.pm-dots { color: var(--ink-3); cursor: pointer; }

@media (max-width: 1240px) { .pm-toprow { grid-template-columns: 1fr; } }
@media (max-width: 980px) { .pm-layout { grid-template-columns: 1fr; } .pm-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .pm-stats { grid-template-columns: 1fr; } .pm-nav { display: none; } }

/* ---- Tweaks panel ---- */
.pm-tw-btn { position: fixed; bottom: 16px; left: 16px; z-index: 300; display: flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); border-radius: 999px; padding: 8px 15px 8px 8px; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--ink); }
.pm-tw-btn .ai { width: 26px; height: 26px; border-radius: 8px; background: var(--hero-grad); color: white; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.pm-tw { position: fixed; bottom: 60px; left: 16px; z-index: 300; width: 286px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-card); padding: 16px; display: none; }
.pm-tw.open { display: block; animation: twin .18s ease; }
@keyframes twin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pm-tw .twh { display: flex; align-items: center; justify-content: space-between; }
.pm-tw .twh h4 { font-size: 14px; font-weight: 700; }
.pm-tw .twx { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-3); cursor: pointer; }
.pm-tw .twx:hover { background: var(--canvas); color: var(--ink); }
.tw-sec { margin-top: 14px; }
.tw-lab { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); font-weight: 600; margin-bottom: 8px; }
.tw-fonts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tw-font { border: 1px solid var(--line); border-radius: 11px; padding: 8px 11px; cursor: pointer; text-align: left; background: var(--app); color: var(--ink); transition: all .14s; }
.tw-font:hover { border-color: var(--border-strong, var(--ink-3)); }
.tw-font.on { border-color: var(--green); box-shadow: 0 0 0 2px color-mix(in oklch, var(--green) 22%, transparent); }
.tw-font .nm { font-weight: 600; font-size: 13px; }
.tw-font .pv { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; margin-top: 1px; }
.tw-row { display: flex; gap: 8px; align-items: center; }
.tw-sw { width: 30px; height: 30px; border-radius: 9px; cursor: pointer; border: 2px solid transparent; }
.tw-sw.on { border-color: var(--ink); }
.tw-slider { width: 100%; accent-color: var(--green); }

/* form input */
.input{font:inherit;font-size:13.5px;background:var(--canvas);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:10px 13px;width:100%;}
.input::placeholder{color:var(--ink-3);}
.input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px color-mix(in oklch,var(--green) 18%,transparent);}
.reply .input{flex:1;width:auto;}