/* ENDA / glass edition. Surfaces follow the device's light and dark theme. */
:root {
  --bg: #e9effc;
  --paper: rgba(255,255,255,.59);
  --ink: #162b50;
  --muted: #607291;
  --line: rgba(255,255,255,.73);
  --blue: #205ddd;
  --light: rgba(231,239,255,.66);
  --glass: rgba(255,255,255,.47);
  --glass-solid: #edf3ff;
  --glass-border: rgba(255,255,255,.82);
  --glass-inset: inset 0 1px 0 rgba(255,255,255,.9);
  --shadow: var(--glass-inset), 0 10px 30px rgba(44,79,149,.075);
}
html { min-height:100%; background:var(--bg); }
body { min-height:100vh; isolation:isolate; background:transparent; }
body::before {
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 12% 9%, rgba(96,166,255,.37), transparent 46%),
    radial-gradient(ellipse at 90% 37%, rgba(155,144,249,.25), transparent 45%),
    radial-gradient(ellipse at 28% 91%, rgba(121,213,242,.30), transparent 44%),
    linear-gradient(145deg,#e9f1ff 0%,#edf0fc 50%,#e4edfb 100%);
}
.shell { position:relative; }
.sidebar {
  background:rgba(255,255,255,.14);
  border-right:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
}
.brand img { box-shadow:0 5px 15px #235ee32b, inset 0 1px 0 #ffffff80; }
.card, .iconbtn, .datechip, .account, .widget, .tabs, .note {
  background:var(--glass);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(20px) saturate(145%);
  backdrop-filter:blur(20px) saturate(145%);
}
.card { border-radius:20px; }
.tasks .task, .settings-row, .metric-table td, .metric-table th { border-bottom-color:rgba(89,126,186,.12); }
.hero {
  background:linear-gradient(115deg,rgba(26,76,190,.9),rgba(45,110,238,.76) 67%,rgba(97,161,255,.66));
  border:1px solid rgba(255,255,255,.52);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(93,163,255,.35),0 18px 42px rgba(37,92,204,.18);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
}
.hero::before {
  width:210px;height:210px;right:-35px;top:-100px;
  background:radial-gradient(circle at 35% 60%,#b1dcff22,transparent 65%);
  border-color:#d5eaff3d;
  box-shadow:0 0 0 25px #c8e1ff0a,0 0 0 52px #c8e1ff08;
}
.hero::after {
  width:150px;height:150px;right:-42px;top:85px;
  border-color:#d5eaff25;
  background:linear-gradient(135deg,#d6ecff20,#ffffff00);
  box-shadow:inset 0 1px 0 #ffffff30;
}
.hero-top,.hero-bottom { position:relative;z-index:1; }
.hero p { color:#e2edff; }
.hero-label { color:#e1ecff; }
.hero-icon {
  background:linear-gradient(140deg,#ffffff30,#c9e4ff14);
  border-color:#ffffff55;
  box-shadow:inset 0 1px 0 #ffffff55,0 6px 20px #112e7512;
}
.hero-icon svg { filter:drop-shadow(0 0 7px #c7eaff88); }
.hero-bottom .progress-track { background:#ffffff30; }
.hero-bottom .progress-track i { box-shadow:0 0 8px #d8edff70; }
.tile-icon {
  background:linear-gradient(145deg,#ffffffb0,#b8d3ff66);
  border:1px solid #ffffffb0;
  box-shadow:inset 0 1px 0 #ffffffcf,0 4px 12px #4379c511;
}
.tile-icon.green { background:linear-gradient(145deg,#ffffffa0,#a5e7d85c);border-color:#ffffffa0; }
.tile-icon.orange { background:linear-gradient(145deg,#ffffffa0,#ffdaab66);border-color:#ffffffa0; }
.pill { background:#dbe9ffb3; }
.pill.green { color:#197a61;background:#d4f3e5b3; }
.pill.orange { color:#986116;background:#ffedcfbd; }
.pill.red { color:#b84259;background:#ffe2eabf; }
.pill.gray,.count { color:var(--muted);background:#d9e4f080; }
.project .progress-track,.budget .progress-track { background:rgba(75,112,172,.12); }
.project .progress-track i,.budget .progress-track i { background:linear-gradient(90deg,#3b77ed,#74acff);box-shadow:0 0 8px #578ff622; }
.dateblock { background:linear-gradient(145deg,#ffffffa3,#c4d9ff85);border:1px solid #ffffffb0;box-shadow:inset 0 1px 0 #fff9; }
.check { background:#ffffff40;border-color:#8ca4c667;box-shadow:inset 0 1px 2px #15386508; }
.check.done,.primary,.sidenav button.active,.fab {
  background:linear-gradient(135deg,#2463e9,#4487f2);
  color:#fff;
  box-shadow:inset 0 1px 0 #ffffff55,0 6px 17px #285ed927;
}
.secondary { background:rgba(228,239,255,.62);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 #ffffff99; }
.avatar { background:linear-gradient(145deg,#ffffffb3,#c4d9ff80);border:1px solid #ffffffbb;box-shadow:var(--shadow); }
.tabs { padding:5px; }
.tabs button.active { background:rgba(255,255,255,.74);box-shadow:inset 0 1px 0 #fff,0 3px 8px #2e4e9110; }
.pillrow button { background:rgba(255,255,255,.36);border-color:var(--glass-border); }
.pillrow button.active { background:linear-gradient(135deg,#2463e9,#4487f2);color:#fff; }
.account { background:linear-gradient(115deg,#ffffff70,#d7e7ff70); }
.listitem .actions button,.listitem .actions a { background:rgba(211,226,249,.35);border:1px solid #ffffff66; }
.note { color:#526b8d;background:rgba(223,236,255,.55); }
.notice { color:#946426;background:rgba(255,239,211,.69); }
.rotator { padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.18); }
dialog {
  background:rgba(239,245,255,.91);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 #fff,0 25px 90px #12377830;
  -webkit-backdrop-filter:blur(28px) saturate(140%);
  backdrop-filter:blur(28px) saturate(140%);
}
dialog::backdrop { background:rgba(16,38,77,.32);backdrop-filter:blur(7px); }
input,select,textarea { background:rgba(255,255,255,.48);border-color:rgba(121,153,201,.26);box-shadow:inset 0 1px 3px #23477905; }
input:focus,select:focus,textarea:focus { box-shadow:0 0 0 3px #397cec12; }
select option { background:var(--glass-solid);color:var(--ink); }
button { transition:background .18s ease,box-shadow .18s ease; }
@media(hover:hover) {
  .project:hover,.listitem .actions button:hover { box-shadow:inset 0 1px 0 #ffffffbd,0 13px 32px #2d5bac15; }
  .secondary:hover,.iconbtn:hover { background:rgba(255,255,255,.72); }
}
@media(max-width:700px) {
  .content { padding-top:max(22px,env(safe-area-inset-top)); }
  .bottomnav {
    width:calc(100% - 24px);
    max-width:496px;
    bottom:10px;
    padding:13px 6px calc(13px + env(safe-area-inset-bottom));
    border:1px solid rgba(255,255,255,.85);
    border-radius:22px;
    background:rgba(245,249,255,.73);
    box-shadow:inset 0 1px 0 #fff,0 10px 38px #204e8e1c;
    -webkit-backdrop-filter:blur(24px) saturate(160%);
    backdrop-filter:blur(24px) saturate(160%);
  }
  .bottomnav button { position:relative;padding:5px 6px;border-radius:12px;min-width:51px; }
  .bottomnav button.active { background:rgba(207,226,255,.53); }
  .bottomnav button.active::before { display:none; }
  .bottomnav button.active svg { filter:drop-shadow(0 2px 5px #4c86ed33); }
  .hero { border-radius:22px; }
  .datechip { padding:8px 9px; }
  .fab { bottom:110px; }
}
@media(prefers-color-scheme:dark) {
  :root {
    --bg:#080f21;
    --paper:rgba(25,44,74,.60);
    --ink:#ebf3ff;
    --muted:#a4b5d0;
    --line:rgba(154,196,255,.14);
    --blue:#82b4ff;
    --light:rgba(51,91,147,.27);
    --glass:rgba(25,44,74,.48);
    --glass-solid:#15263f;
    --glass-border:rgba(156,201,255,.17);
    --glass-inset:inset 0 1px 0 rgba(201,225,255,.09);
    --shadow:var(--glass-inset),0 10px 30px rgba(0,7,24,.20);
  }
  body::before {
    background:
      radial-gradient(ellipse at 3% 8%,rgba(37,107,219,.26),transparent 45%),
      radial-gradient(ellipse at 98% 37%,rgba(102,67,191,.21),transparent 45%),
      radial-gradient(ellipse at 22% 91%,rgba(19,139,174,.16),transparent 40%),
      linear-gradient(145deg,#0a142b,#0d152a 55%,#071827);
  }
  .sidebar { background:rgba(10,23,46,.24); }
  .hero { background:linear-gradient(115deg,rgba(32,77,160,.73),rgba(35,101,203,.59) 70%,rgba(65,148,220,.38));border-color:rgba(157,205,255,.32);box-shadow:inset 0 1px 0 #b5d9ff33,0 15px 45px #06214338; }
  .hero::before { border-color:#bddfff30; }
  .hero-icon { background:linear-gradient(145deg,#c1e4ff20,#4886d61a);border-color:#c8e7ff3b; }
  .hero p,.hero-label { color:#d0e4ff; }
  .tile-icon { background:linear-gradient(145deg,#7caaff22,#3865b523);border-color:#9cc3ff2b;box-shadow:inset 0 1px 0 #c7e1ff20,0 4px 12px #00000012; }
  .tile-icon.green { color:#7ae2c0;background:linear-gradient(145deg,#74dbc120,#257f7225);border-color:#9ce4cd25; }
  .tile-icon.orange { color:#ffd093;background:linear-gradient(145deg,#ffd29a20,#8e632225);border-color:#ebc38e25; }
  .pill { color:#a0c4ff;background:#4a83df2e; }
  .pill.green { color:#91e2c4;background:#43bf9224; }
  .pill.orange { color:#f2c58b;background:#d4954524; }
  .pill.red { color:#ff9eb2;background:#e0658524; }
  .pill.gray,.count { color:var(--muted);background:#9ebde812; }
  .dateblock { background:linear-gradient(145deg,#91bfff22,#4185e025);border-color:#a5cfff24;box-shadow:inset 0 1px 0 #d6ebff12; }
  .check { background:#bfdcff08;border-color:#b0cdf544; }
  .check.done,.primary,.sidenav button.active,.fab { background:linear-gradient(135deg,#2867de,#4187ea);box-shadow:inset 0 1px 0 #c4e3ff55,0 7px 22px #0c48a82b; }
  .secondary { background:#4e89e220;box-shadow:inset 0 1px 0 #d6eaff12; }
  .avatar { color:#acd1ff;background:linear-gradient(145deg,#98beff2e,#3767b329);border-color:#a3cdff38; }
  .tabs button.active { background:#93bfff1c;box-shadow:inset 0 1px 0 #baddff1c,0 2px 8px #0000000d; }
  .pillrow button { background:#a6c8ff08; }
  .pillrow button.active { background:linear-gradient(135deg,#2867de,#4187ea); }
  .account { background:linear-gradient(115deg,#83b4ff13,#49a0f51c); }
  .listitem .actions button,.listitem .actions a { background:#a5c8fb0c;border-color:#adceff12; }
  .note { color:#b6cbe7;background:#559ef018; }
  .notice { color:#e6c18d;background:#e4b35e15; }
  .rotator { background:#afd3ff06; }
  dialog { background:rgba(17,33,57,.95);box-shadow:inset 0 1px 0 #bddcff26,0 25px 90px #0008; }
  dialog::backdrop { background:#02091685; }
  input,select,textarea { background:#0a162946;border-color:#9dc5ff25; }
  .project .progress-track,.budget .progress-track { background:#a1c7ff19; }
  .tasks .task,.settings-row,.metric-table td,.metric-table th { border-bottom-color:#a1c7ff16; }
  .danger { background:#f06c8b20;color:#ffafc0; }
  @media(max-width:700px) {
    .bottomnav { background:rgba(18,34,59,.76);border-color:#a5d0ff26;box-shadow:inset 0 1px 0 #c6e2ff17,0 10px 38px #0005; }
    .bottomnav button.active { background:#599aff21; }
  }
  @media(hover:hover) { .secondary:hover,.iconbtn:hover { background:#accbff1c; } }
}
/* Solid fallbacks preserve legibility on older browsers and accessibility settings. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .card,.iconbtn,.datechip,.account,.widget,.tabs,.note,.bottomnav { background:var(--glass-solid); }
  dialog { background:var(--glass-solid); }
}
@media(prefers-reduced-transparency:reduce) {
  .card,.iconbtn,.datechip,.account,.widget,.tabs,.note,.bottomnav,.sidebar,dialog { background:var(--glass-solid);backdrop-filter:none;-webkit-backdrop-filter:none; }
  .hero { background:#225cbd;backdrop-filter:none;-webkit-backdrop-filter:none; }
}
@media(prefers-reduced-motion:reduce) { button { transition:none; } }