:root{
  --bg:#0b0b12;
  --panel:#121225;
  --panel2:#15152b;
  --border:rgba(255,255,255,.08);
  --text:#f3f4ff;
  --muted:rgba(243,244,255,.7);
  --muted2:rgba(243,244,255,.55);
  --accent:#b14cff;
  --accent2:#ff4fd8;
  --good:#37d67a;
  --bad:#ff5d5d;
  --warn:#ffcc66;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --r:18px;
  --gap:14px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(1200px 700px at 20% -20%, rgba(177,76,255,.25), transparent 60%),
    radial-gradient(900px 600px at 110% 20%, rgba(255,79,216,.20), transparent 55%),
    linear-gradient(180deg, #07070c, #0b0b12);
  color:var(--text);
}
a{color:inherit}
.app{max-width:1200px;margin:24px auto;padding:0 16px 60px;}
header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px;}
.title{display:flex;flex-direction:column;gap:6px;}
.title h1{margin:0;font-size:22px;letter-spacing:.2px;}
.subtitle{color:var(--muted);font-size:13px;}
.top-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end;}
.btn{
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:var(--text);
  padding:9px 12px;border-radius:12px;cursor:pointer;
  font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25); user-select:none;
}
.btn:hover{border-color: rgba(255,255,255,.16);}
.btn.primary{background: linear-gradient(135deg, rgba(177,76,255,.95), rgba(255,79,216,.85));border-color: rgba(255,255,255,.14);}
.btn.danger{background: linear-gradient(135deg, rgba(255,93,93,.90), rgba(255,93,93,.65));border-color: rgba(255,255,255,.14);}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel .hd{
  padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent);
  border-bottom:1px solid var(--border);
}
.panel .hd h2{margin:0;font-size:14px;letter-spacing:.2px;}
.panel .bd{padding:16px;}
.cards{display:grid;grid-template-columns: repeat(3, 1fr);gap: var(--gap);}
@media (max-width: 980px){.cards{grid-template-columns:1fr;} header{flex-direction:column;align-items:flex-start;}}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius: var(--r);
  padding:16px; box-shadow: var(--shadow);
  position:relative; overflow:hidden;
}
.card:before{
  content:""; position:absolute; inset:-80px -120px auto auto; width:220px;height:220px;
  background:
    radial-gradient(circle at 30% 30%, rgba(177,76,255,.30), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255,79,216,.22), transparent 55%);
  filter: blur(4px); transform: rotate(12deg); pointer-events:none;
}
.card .label{color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;}
.card .value{margin-top:10px;font-size:28px;font-weight:900;letter-spacing:.2px;}
.card .hint{margin-top:6px;color:var(--muted2);font-size:12px;}
.grid{display:grid;grid-template-columns: 1.4fr 1fr;gap: var(--gap);}
@media (max-width:980px){.grid{grid-template-columns:1fr;}}
.canvas-box{
  background: rgba(0,0,0,.12);
  border:1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  min-height: 260px;
}
table.data{
  width:100%;
  border-collapse: collapse;
  background: rgba(0,0,0,.12);
  border:1px solid var(--border);
  border-radius: 16px;
  overflow:hidden;
}
table.data thead th{
  text-align:left;padding:10px 10px;font-size:12px;color:var(--muted);
  font-weight:900;letter-spacing:.3px;border-bottom:1px solid var(--border);
  background: rgba(255,255,255,.03);white-space:nowrap;
}
table.data tbody td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align: middle;}
table.data tbody tr:last-child td{border-bottom:none;}
.cell-input{
  width:100%; background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:8px 10px;color:var(--text);font-size:13px;outline:none;
}
.cell-input:focus{
  border-color: rgba(177,76,255,.45);
  box-shadow: 0 0 0 4px rgba(177,76,255,.14);
}
.num{text-align:right;font-variant-numeric: tabular-nums;}
.progress{font-weight:900;font-variant-numeric: tabular-nums;}
.progress.good{color:var(--good);}
.progress.warn{color:var(--warn);}
.progress.bad{color:var(--bad);}
.row-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center;white-space:nowrap;}
.icon-btn{
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);cursor:pointer;color:var(--text);font-weight:900;
}
.icon-btn:hover{border-color: rgba(255,255,255,.18);}
.two-col{display:grid;grid-template-columns: 1fr 1fr;gap: var(--gap);margin-top: var(--gap);}
@media (max-width:980px){.two-col{grid-template-columns:1fr;}}
.toast{
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: rgba(10,10,18,.9); border:1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow);
  color: var(--text); font-weight: 800; font-size: 13px;
  opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease;
}
.toast.show{opacity:1; transform: translateX(-50%) translateY(-6px);}
.auth-shell{max-width:520px;margin:80px auto;padding:0 16px;}
.form-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.form-row .cell-input{max-width:360px;}
.small-note{color:var(--muted2);font-size:12px;line-height:1.5;margin-top:10px;}
.select{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:8px 10px;
  color: var(--text);
  font-size: 13px;
  outline:none;
}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--border);background: rgba(255,255,255,.04);
  font-weight:700;font-size:12px;color:var(--text);
}
.pdf-root{ background: var(--bg) !important; }

.auth-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.auth-logo{
  width:44px;height:44px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-weight:1000;letter-spacing:.5px;
  background: linear-gradient(135deg, rgba(177,76,255,.95), rgba(255,79,216,.85));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.auth-name{font-weight:950;font-size:16px;}
.auth-tag{color:var(--muted2);font-size:12px;margin-top:2px;}
.auth-divider{
  display:flex;align-items:center;gap:10px;
  margin: 14px 0 12px 0;
  color: var(--muted2);
  font-weight:800;
  font-size:12px;
}
.auth-divider:before, .auth-divider:after{
  content:"";
  height:1px;
  flex:1;
  background: rgba(255,255,255,.10);
}
.auth-divider span{
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius:999px;
}
.btn.google{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
}
.btn.google:hover{border-color: rgba(255,255,255,.22);}
.gicon{display:inline-flex;align-items:center;justify-content:center;}