:root{
  --bg:#eef1f7;--panel:#ffffff;--panel-2:#f2f5fa;--line:#dfe4ee;
  --ink:#1b2536;--muted:#64748b;
  --go:#21c074;--go-deep:#178a53;--out:#f0a23b;--out-deep:#c47d20;
  --hud:#0f9d63;--warn:#f0a23b;--bad:#ef5c6b;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(1200px 700px at 50% -10%,#ffffff,var(--bg));
  color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.card{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);
  border-radius:20px;overflow:hidden;box-shadow:0 18px 50px -28px rgba(16,24,40,.25)}
.card header{padding:24px 24px 6px}
.card h1{margin:0;font-size:21px;letter-spacing:-.01em}
.card p.sub{margin:5px 0 0;color:var(--muted);font-size:13px}
.form{padding:18px 24px 24px}
label{display:block;font-size:12px;color:var(--muted);margin:14px 2px 6px}
label:first-child{margin-top:0}
input,select{width:100%;padding:13px 14px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:11px;color:var(--ink);font-size:16px;outline:none}
select{appearance:none;-webkit-appearance:none;font-family:inherit;padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a96b0' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center}
input:focus,select:focus{border-color:var(--go)}
button.primary{width:100%;margin-top:20px;padding:15px;border:0;border-radius:12px;cursor:pointer;
  font-size:16px;font-weight:700;color:#04130b;background:linear-gradient(180deg,var(--go),var(--go-deep));
  transition:filter .15s,transform .05s}
button.primary:hover{filter:brightness(1.06)}
button.primary:active{transform:translateY(1px)}
.msg{margin:16px 2px 0;font-size:13px;padding:11px 13px;border-radius:10px}
.msg.bad{background:#fdecee;border:1px solid #ef5c6b55;color:#b42318}
.msg.good{background:#e7f6ee;border:1px solid #21c07455;color:#0f7a48}
.alt{text-align:center;padding:0 24px 22px;color:var(--muted);font-size:13px}
.alt a{color:var(--hud);text-decoration:none}
.alt a:hover{text-decoration:underline}

/* Mobile polish */
@media (max-width: 480px){
  .center{padding:14px}
  .card{border-radius:16px}
  .form{padding:16px 18px 20px}
  .card header{padding:20px 18px 4px}
}

/* ---- Mobile overflow fixes (applies app-wide) ---- */
@media (max-width: 640px){
  /* Collapse any two/three-column grids to a single column so fields don't overlap */
  .grid2{grid-template-columns:1fr !important}
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr !important}
  /* Flex rows (label/value or two inputs) stack vertically */
  .row{flex-direction:column !important}
  .row>div{width:100%}
  /* Inputs and controls never exceed their container */
  input, select, textarea, .form input, .form select, .form textarea{max-width:100%;width:100%;box-sizing:border-box}
  /* Filter bars wrap instead of overflowing */
  .filters{flex-wrap:wrap}
  .filters > *{min-width:0}
  /* Tables get horizontal scrolling rather than squashing/overlapping */
  .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:520px}
  .wrap, .center{overflow-x:hidden}
  .appbar .ctx{max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ============================================================
   Professional polish — applies app-wide (additive, safe)
   ============================================================ */
html{-webkit-text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;line-height:1.5}
::selection{background:rgba(33,192,116,.26);color:#fff}

/* Refined, quieter scrollbars */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#c3ccdb;border-radius:10px;border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:#aab4c6}
*{scrollbar-width:thin;scrollbar-color:#c3ccdb transparent}

/* Consistent, accessible focus + input feel */
input,select,textarea{transition:border-color .14s,box-shadow .14s}
input:focus,select:focus,textarea:focus{border-color:var(--go);box-shadow:0 0 0 3px rgba(33,192,116,.15)}
::placeholder{color:#63708c}
a{transition:color .12s}
button{font-family:inherit}
button:focus-visible,a:focus-visible{outline:2px solid var(--go);outline-offset:2px}

/* Headings & section titles read cleaner */
.wrap h1,.top h1{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:2px 0 4px}
.wrap h2{letter-spacing:-.01em}
.sub{color:var(--muted);font-size:13px;margin:2px 0 14px}

/* Cards / panels get a subtle depth so pages feel layered, not flat */
.wrap .card,.wrap .sheet,.wrap .panel,.wrap .kpi,.wrap .filters,.wrap .controls{
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 26px -20px rgba(16,24,40,.14)}

/* Tables: quiet header, gentle row hover, tabular numbers — pages can still override */
table{border-spacing:0}
tbody tr{transition:background .12s}
tbody tr:hover{background:rgba(127,224,176,.04)}
thead th{font-weight:700}
td,th{font-variant-numeric:tabular-nums}

/* Pills & badges: crisper */
.pill{font-weight:800;letter-spacing:.01em}

/* Buttons feel tactile everywhere */
button,.btn{transition:filter .15s,transform .05s,box-shadow .15s}
button:active,.btn:active{transform:translateY(1px)}

/* Print: keep it clean and inkless */
@media print{
  body{background:#fff!important}
  .noprint{display:none!important}
}