@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap');
:root{
  color-scheme:light;
  --ink:#1e3155;
  --ink-strong:#152847;
  --muted:#637993;
  --blue:#3979e9;
  --green:#138d65;
  --red:#d44d75;
  --glass:rgba(255,255,255,.40);
  --edge:rgba(255,255,255,.83);
  --shadow:0 18px 45px rgba(55,79,136,.095),0 2px 8px rgba(60,83,137,.035);
  font-family:'DM Sans','IBM Plex Sans Thai',system-ui,-apple-system,sans-serif;
  font-synthesis:none;
  color:var(--ink);
  background:#cbdaf2;
}
*,*::before,*::after{box-sizing:border-box}
html{min-width:320px}
body{margin:0;min-width:320px;min-height:100vh;background:#cbdaf2}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid #487fdb;outline-offset:3px}
button:disabled{cursor:not-allowed;opacity:.5}
svg{display:block}
::selection{background:#91baf3;color:#172c4a}

/* A luminous backdrop: colors remain visible through every sheet of glass */
.ambient-backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:
  radial-gradient(ellipse at 95% 12%,rgba(255,220,232,.88),transparent 49%),
  radial-gradient(ellipse at 30% 100%,rgba(168,220,255,.92),transparent 52%),
  linear-gradient(125deg,#c9e1f7 4%,#e7e9f8 39%,#f0e2f5 69%,#bddcf6 100%)}
.ambient-backdrop::before{content:"";position:absolute;inset:-16%;
  background:radial-gradient(ellipse at 74% 35%,rgba(251,255,255,.60),transparent 36%),
  radial-gradient(ellipse at 16% 25%,rgba(126,185,250,.50),transparent 37%),
  radial-gradient(ellipse at 60% 78%,rgba(174,155,245,.40),transparent 40%);
  filter:blur(5px)}
.aurora{position:absolute;border-radius:50%;filter:blur(35px);opacity:.8;transform:translateZ(0);animation:floatGlow 18s ease-in-out infinite alternate}
.aurora-a{width:720px;height:720px;left:-270px;top:-240px;background:radial-gradient(circle,rgba(125,205,255,.85),rgba(140,173,246,.2) 57%,transparent 71%)}
.aurora-b{width:650px;height:650px;right:-180px;top:170px;background:radial-gradient(circle,rgba(231,150,232,.63),rgba(255,199,229,.14) 61%,transparent 72%);animation-delay:-7s}
.aurora-c{width:790px;height:690px;left:24%;bottom:-470px;background:radial-gradient(circle,rgba(116,232,217,.59),rgba(141,197,249,.11) 67%,transparent 73%);animation-delay:-12s}
.ambient-grain{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.45) .65px,transparent .65px);background-size:6px 6px;opacity:.20}
.glass-bubble{position:absolute;border-radius:50%;
 background:linear-gradient(135deg,rgba(255,255,255,.77) 0%,rgba(255,255,255,.09) 40%,rgba(189,225,255,.15) 65%,rgba(255,255,255,.4) 100%);
 border:1px solid rgba(255,255,255,.65);
 box-shadow:inset 9px 12px 22px rgba(255,255,255,.60),inset -10px -12px 25px rgba(106,154,225,.14),0 12px 40px rgba(73,99,172,.10);
 backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:floatBubble 14s ease-in-out infinite alternate}
.bubble-a{width:140px;height:140px;right:8%;top:10%}
.bubble-b{width:95px;height:95px;left:20%;bottom:12%;animation-delay:-7s}
@keyframes floatGlow{to{transform:translate3d(35px,-25px,0) scale(1.1)}}
@keyframes floatBubble{to{transform:translate3d(4px,-25px,0)}}

.app-shell{min-height:100vh;display:grid;grid-template-columns:252px minmax(0,1fr)}
.sidebar{margin:17px 0 17px 17px;padding:27px 17px 22px;border-radius:30px;display:flex;flex-direction:column;min-height:calc(100vh - 34px);position:sticky;top:17px;align-self:start;height:calc(100vh - 34px);
 border:1px solid rgba(255,255,255,.65);background:linear-gradient(138deg,rgba(255,255,255,.43),rgba(230,241,255,.30) 40%,rgba(245,239,255,.26));
 -webkit-backdrop-filter:blur(38px) saturate(165%);backdrop-filter:blur(38px) saturate(165%);
 box-shadow:0 14px 45px rgba(80,109,170,.08),inset 0 1px 0 rgba(255,255,255,.80),inset 1px 0 0 rgba(255,255,255,.65)}
.brand{display:flex;gap:12px;align-items:center;padding:3px 10px 0}
.brand-logo{height:49px;width:49px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(212,236,255,.26));box-shadow:inset 0 2px 1px #fffc,0 8px 23px #7aa1d944,inset 0 -2px 5px #a1c2e344;border:1px solid rgba(255,255,255,.95);border-radius:16px;color:#356ad9}
.brand-logo svg{width:31px;height:31px;filter:drop-shadow(0 2px 2px rgba(38,93,167,.14))}
.brand strong{font-size:23px;font-weight:800;letter-spacing:-.08em;line-height:1}
.brand-muted{color:#3e84ef}
.brand small{display:block;color:#6b83a0;font-weight:700;letter-spacing:.18em;font-size:9px;margin-top:6px}
.workspace-pill{display:flex;align-items:center;gap:9px;padding:13px 12px;margin:33px 2px 40px;color:#506b8f;font-size:11px;font-weight:700;background:rgba(255,255,255,.32);border:1px solid rgba(255,255,255,.65);border-radius:13px;box-shadow:inset 0 1px 0 #fff9}
.workspace-ring{width:12px;height:12px;border:3px solid #61b7ef;border-radius:50%;box-shadow:0 0 0 3px #80c4ef27}
.workspace-chevron{margin-left:auto;font-size:17px;color:#8e9fb8}
.nav-label{font-size:10px;letter-spacing:.16em;color:#849bb7;font-weight:800;margin:0 0 13px 17px}
.sidebar nav{display:grid;gap:8px}
.nav-item{display:flex;align-items:center;gap:13px;width:100%;text-align:left;color:#5d7596;background:transparent;border:1px solid transparent;border-radius:16px;padding:14px 15px;font-size:13px;font-weight:700;min-height:51px;transition:background .2s,box-shadow .2s,transform .2s}
.nav-item:hover{background:rgba(255,255,255,.46);transform:translateY(-1px)}
.nav-item.active{color:#2862c3;background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(220,235,255,.43));border-color:rgba(255,255,255,.95);box-shadow:0 6px 17px rgba(75,112,173,.09),inset 0 1px 0 #fff}
.nav-icon{width:19px;height:19px;flex-shrink:0}
.nav-arrow{margin-left:auto;font-size:22px;color:#6496d7}
.sidebar-bottom{margin-top:auto}
.side-status{display:flex;align-items:center;gap:11px;padding:15px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.78);background:rgba(255,255,255,.35);box-shadow:inset 0 1px 0 #fff9}
.status-light{flex-shrink:0;width:9px;height:9px;border-radius:50%;background:#a3afc6;box-shadow:0 0 0 4px rgba(150,165,192,.13)}
.status-light.connected{background:#22af7b;box-shadow:0 0 0 4px #30b78c24,0 0 13px #21bf9b}
.side-status b,.side-status small{display:block}.side-status b{font-size:12px;color:#304567}.side-status small{font-size:10px;color:#8492a8;margin-top:4px}
.side-caption{display:flex;align-items:center;justify-content:center;gap:6px;color:#7e94af;font-size:11px;font-weight:600;margin-top:21px}

.main{min-width:0}
.topbar{height:85px;padding:0 44px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(255,255,255,.43);background:rgba(255,255,255,.09);backdrop-filter:blur(8px)}
.breadcrumbs{font-size:12px;color:#7188a6;display:flex;gap:13px;align-items:center;font-weight:600}.crumb-sep{color:#a4b3c8}.breadcrumbs strong{color:#27446e}
.top-actions{display:flex;align-items:center;gap:14px}
.timezone{display:flex;align-items:center;gap:7px;font-size:11px;color:#607a9a;font-weight:700;padding:10px 12px;border-radius:99px;background:rgba(255,255,255,.31);border:1px solid rgba(255,255,255,.65)}
.tz-dot{width:6px;height:6px;background:#3dbf9c;border-radius:50%}.tz-utc{font-size:10px;color:#8aa0bb}
.icon-button,.avatar{display:grid;place-items:center;height:37px;width:37px;border-radius:12px;flex-shrink:0}
.icon-button{background:rgba(255,255,255,.39);color:#4a719f;border:1px solid rgba(255,255,255,.79);box-shadow:inset 0 1px 0 #fff,0 5px 18px #679ac51b}
.icon-button:hover{background:rgba(255,255,255,.74)}
.avatar{background:linear-gradient(135deg,#6bbfff,#677be5);color:white;font-size:13px;font-weight:800;box-shadow:inset 0 1px 1px #ffffff8a,0 6px 16px #6b99e550;border:1px solid rgba(255,255,255,.72);border-radius:50%}

.content{padding:50px 44px 30px;max-width:1780px;margin:auto}
.page-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.18em;font-weight:800;color:#5078b2}.eyebrow-star{font-size:14px;color:#6599ef}.eyebrow-line{height:1px;width:23px;background:#8caad4}
h1{font-size:clamp(32px,3.3vw,48px);letter-spacing:-.064em;font-weight:800;margin:11px 0 11px;line-height:1.18;color:#273d63}
.liquid-heading{background:linear-gradient(112deg,#326acb,#6380e3 45%,#5577d6 62%,#7e80d5);-webkit-background-clip:text;background-clip:text;color:transparent}
.header-dot{color:#6f9add;-webkit-text-fill-color:#6f9add}
.subheading{font-size:13px;color:#5c7493;margin:0;line-height:1.8}
.intro-actions{display:flex;gap:11px;align-items:center;padding-bottom:4px}
.primary-btn,.secondary-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:45px;padding:11px 17px;border-radius:15px;font-size:12px;font-weight:700;white-space:nowrap;transition:box-shadow .2s,transform .2s,background .2s}
.primary-btn{color:white;background:linear-gradient(132deg,#5b96f5,#4d72df);border:1px solid rgba(255,255,255,.65);box-shadow:inset 0 1px 1px #ffffff8c,inset 0 -2px 2px #2152ba30,0 8px 22px #4f85df58}
.primary-btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 1px #fffa,0 12px 24px #4d81de6f}
.primary-btn span{padding-left:4px}
.secondary-btn{color:#446188;background:rgba(255,255,255,.40);border:1px solid rgba(255,255,255,.83);box-shadow:inset 0 1px 0 #fffc,0 6px 18px #6d91ca18;backdrop-filter:blur(12px)}
.secondary-btn:hover{background:rgba(255,255,255,.70);transform:translateY(-2px)}
.notice{padding:13px 17px;border:1px solid rgba(255,255,255,.68);border-left:3px solid #86a6e2;background:rgba(255,255,255,.36);backdrop-filter:blur(12px);color:#506d91;font-size:12px;font-weight:600;border-radius:13px;margin-bottom:22px;box-shadow:inset 0 1px 0 #fffb}
.notice.success{border-left-color:#21b387}.notice.error{border-left-color:#e05a82}.notice.hidden{display:none}

.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:19px}
.kpi-card,.panel{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.31) 52%,rgba(239,247,255,.24));border:1px solid var(--edge);
 -webkit-backdrop-filter:blur(32px) saturate(170%);backdrop-filter:blur(32px) saturate(170%);
 box-shadow:var(--shadow),inset 0 1px 1px rgba(255,255,255,.95),inset 0 -1px 3px rgba(255,255,255,.27);border-radius:25px}
.kpi-card::before,.panel::before{content:"";pointer-events:none;position:absolute;inset:0;border-radius:inherit;box-shadow:inset 1px 1px 0 #ffffffa9,inset -1px -1px 0 #ffffff44;z-index:-1}
.kpi-card::after,.panel::after{content:"";pointer-events:none;position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,white,transparent);opacity:.8}
.kpi-card{min-width:0;min-height:155px;padding:22px 21px;transition:transform .25s,box-shadow .25s}
.kpi-card:hover{transform:translateY(-3px);box-shadow:0 23px 44px rgba(56,94,152,.15),inset 0 1px 2px #fffe}
.kpi-one{background:linear-gradient(140deg,rgba(255,255,255,.73),rgba(234,255,250,.40) 62%,rgba(255,255,255,.27))}
.kpi-two{background:linear-gradient(140deg,rgba(255,255,255,.70),rgba(235,235,255,.38) 65%,rgba(255,255,255,.24))}
.kpi-three{background:linear-gradient(140deg,rgba(255,255,255,.69),rgba(228,247,255,.39) 67%,rgba(255,255,255,.24))}
.kpi-four{background:linear-gradient(140deg,rgba(255,255,255,.70),rgba(250,237,255,.36) 67%,rgba(255,255,255,.24))}
.kpi-head{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#587192;font-size:12px;font-weight:700}
.kpi-glyph{height:38px;width:38px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.51);border:1px solid rgba(255,255,255,.84);color:#5b85cc;box-shadow:inset 0 1px 1px #fffd,0 4px 11px #6d91cb23}
.kpi-glyph svg{width:20px;height:20px}.kpi-one .kpi-glyph{color:#25a58d}.kpi-two .kpi-glyph{color:#776eda}.kpi-three .kpi-glyph{color:#4e98d2}.kpi-four .kpi-glyph{color:#c18bb9}
.kpi-value{font-size:30px;font-weight:800;letter-spacing:-.06em;margin:13px 0 8px;line-height:1.13;white-space:nowrap;color:#203c62}
.positive{color:var(--green)!important}.negative{color:var(--red)!important}
.kpi-foot{display:flex;align-items:center;gap:6px;color:#8395ad;font-size:10px;font-weight:600}.kpi-mini-circle{width:6px;height:6px;border-radius:50%;background:#36c39c}

.dashboard-columns{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(335px,1fr);gap:19px;align-items:stretch}
.panel{padding:26px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:26px}
.panel-kicker{display:flex;align-items:center;gap:6px;color:#7992b5;font-size:9px;font-weight:800;letter-spacing:.14em}
.label-spark{font-size:15px;color:#73a7e9}
.panel h2{font-size:19px;letter-spacing:-.035em;margin:9px 0 0;font-weight:800;color:#273f65}
.month-switch{display:flex;align-items:center;gap:7px;padding:5px;border:1px solid rgba(255,255,255,.78);background:rgba(255,255,255,.36);box-shadow:inset 0 1px 1px #fff9;border-radius:15px;flex-shrink:0}
.month-switch button{width:30px;height:29px;display:grid;place-items:center;border:1px solid transparent;border-radius:10px;background:rgba(255,255,255,.49);font-size:22px;font-weight:400;color:#5b7fae;line-height:1}
.month-switch button:hover{background:white;box-shadow:0 3px 9px #7c9fc333}
.month-switch b{font-size:11px;min-width:100px;color:#345476;text-align:center}
.weekday-row,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.weekday-row{margin:0 0 9px}
.weekday-row span{padding:7px 0;text-align:center;color:#7890ad;font-size:11px;font-weight:700}
.calendar-grid{grid-auto-rows:minmax(76px,1fr)}
.calendar-day{min-width:0;text-align:left;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:4px;padding:10px;
 border-radius:16px;border:1px solid rgba(255,255,255,.66);
 background:rgba(255,255,255,.29);color:#58718f;
 box-shadow:inset 0 1px 1px #fffa,0 3px 10px rgba(63,105,166,.025);
 transition:background .16s,border-color .16s,transform .16s,box-shadow .16s}
.calendar-day:hover{background:rgba(255,255,255,.63);transform:translateY(-2px);border-color:rgba(255,255,255,.98);box-shadow:0 7px 16px #8aaad72b,inset 0 1px 1px #fff}
.calendar-day.selected{border:1px solid rgba(79,134,222,.95);box-shadow:inset 0 0 0 1px rgba(70,133,217,.55),0 4px 14px #4c82da27;background:rgba(255,255,255,.52)}
.calendar-day.today .day-num{background:rgba(79,130,217,.88);color:white;border-radius:8px;padding:2px 6px;margin:-2px -6px}
.calendar-day.blank{pointer-events:none;background:transparent;box-shadow:none;border-color:transparent}
.calendar-day.win{background:linear-gradient(145deg,rgba(154,249,208,.55),rgba(230,255,248,.39));border-color:rgba(229,255,246,.86)}
.calendar-day.loss{background:linear-gradient(145deg,rgba(255,181,207,.55),rgba(255,234,246,.37));border-color:rgba(255,234,246,.89)}
.calendar-day.win.selected{box-shadow:inset 0 0 0 1px rgba(31,144,113,.47),0 4px 14px #4e9d8740;border-color:#52b69d}
.calendar-day.loss.selected{box-shadow:inset 0 0 0 1px rgba(195,70,112,.39),0 4px 14px #ad648040;border-color:#cd83a0}
.day-num{font-size:11px;font-weight:800;color:#617c9c}
.day-amount{font-size:11px;font-weight:800;letter-spacing:-.025em;overflow-wrap:anywhere}
.win .day-amount{color:#168765}.loss .day-amount{color:#c74070}
.calendar-legend{display:flex;justify-content:flex-end;gap:15px;margin-top:22px;flex-wrap:wrap;color:#758aaa;font-size:10px;font-weight:700}
.calendar-legend span{display:flex;align-items:center;gap:7px}.calendar-legend i{width:9px;height:9px;border-radius:4px;display:inline-block}
.legend-green{background:#75deb7}.legend-red{background:#f0a3bc}.legend-neutral{background:#e4edf9;border:1px solid #c3d8ec}

.right-column{display:grid;grid-template-rows:minmax(245px,auto) minmax(286px,1fr);gap:19px;min-width:0}
.trend-panel{background:linear-gradient(145deg,rgba(255,255,255,.59),rgba(233,245,255,.26) 67%,rgba(211,255,253,.31))}
.trend-panel .panel-head{margin-bottom:20px}.sparkline-icon{font-size:24px;color:#5c92dc;background:#fffc;border:1px solid white;border-radius:13px;height:34px;width:34px;display:grid;place-items:center;box-shadow:inset 0 1px 1px white}
.chart-value{font-size:27px;letter-spacing:-.055em;font-weight:800;color:#2d517d}
.mini-label{font-size:11px;color:#7a93b0;margin-top:5px}
.chart-wrap{height:130px;margin-top:5px;position:relative;isolation:isolate}
.chart-wrap::before{content:"";position:absolute;inset:7px 0 12px;z-index:-1;border-top:1px dashed rgba(112,152,195,.17);border-bottom:1px dashed rgba(112,152,195,.18)}
.chart-wrap svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 5px #48ab9132)}
.day-panel{background:linear-gradient(135deg,rgba(255,255,255,.67),rgba(251,244,255,.26) 70%,rgba(237,247,255,.32))}
.day-panel .panel-head{margin-bottom:20px}
.day-net{font-size:27px;font-weight:800;color:#2b4c77}
.day-small{margin-top:8px;font-size:12px;color:#7c92b1}
.deal-list{margin-top:20px;max-height:245px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#b0c9e2 transparent}
.deal-row{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid rgba(255,255,255,.73);padding:12px 0}
.deal-name{font-size:12px;color:#375578;font-weight:800}
.deal-meta{font-size:10px;color:#8195b1;margin-top:5px;font-weight:600}
.deal-profit{font-size:12px;font-weight:800;white-space:nowrap}
.empty-list{font-size:12px;color:#889db7;border-top:1px solid rgba(255,255,255,.71);padding-top:18px;margin:0}
footer{display:flex;justify-content:space-between;gap:12px;margin:28px 1px 0;color:#8399b3;font-size:10px;font-weight:600}
.footer-lock{color:#4386c8;padding-right:4px}

.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(29,53,89,.27);display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(13px) saturate(115%);-webkit-backdrop-filter:blur(13px) saturate(115%)}
.modal-backdrop.hidden{display:none}
.modal{width:100%;max-width:455px;max-height:calc(100vh - 36px);overflow:auto;padding:29px;border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(236,244,255,.71));border:1px solid rgba(255,255,255,.93);box-shadow:0 26px 80px rgba(54,75,119,.27),inset 0 2px 1px #fff;-webkit-backdrop-filter:blur(37px);backdrop-filter:blur(37px)}
.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h2{margin:0;font-size:21px;letter-spacing:-.04em;color:#263f69}
.close-btn{display:grid;place-items:center;border-radius:12px;width:34px;height:34px;border:1px solid #ffffffb9;background:#ffffff8c;color:#6580a1;font-size:22px;line-height:1}
.modal-desc,.modal-foot{font-size:12px;color:#7188a8;line-height:1.85}
.modal label{display:block;font-size:12px;color:#466384;font-weight:700;margin:20px 0 10px}
.modal input[type=password]{width:100%;padding:13px 14px;border:1px solid #bbd1e8;border-radius:12px;background:rgba(255,255,255,.67);color:#274365;font-size:13px}
.modal input[type=password]::placeholder{color:#8ea4ba}
.modal-submit{width:100%;margin-top:17px}
.modal-separator{text-align:center;font-size:11px;color:#8ba0b5;margin:23px 0 0}
.modal .file-import{margin-top:13px;display:block;cursor:pointer;border:1px dashed #94bcdd;border-radius:14px;background:rgba(255,255,255,.38);padding:14px;text-align:center;color:#4b79ac}
.file-import input{display:none}.modal-foot{font-size:11px;margin-bottom:0}

@media(max-width:1350px){
  .app-shell{grid-template-columns:225px minmax(0,1fr)}.sidebar{margin-left:12px;padding-left:12px;padding-right:12px}
  .content{padding:40px 29px 28px}.topbar{padding:0 30px}
  .kpi-grid{gap:12px}.kpi-card{padding:19px 16px}.kpi-value{font-size:25px}
  .dashboard-columns{grid-template-columns:minmax(0,1.25fr) minmax(320px,1fr)}
  .panel{padding:22px}.calendar-day{padding:8px}.calendar-grid,.weekday-row{gap:6px}
}
@media(max-width:1100px){
  .dashboard-columns{grid-template-columns:minmax(0,1fr)}
  .right-column{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr}
  .calendar-grid{grid-auto-rows:minmax(85px,1fr)}
}
@media(max-width:820px){
  .app-shell{display:block}.sidebar{display:none}
  .topbar{height:69px;padding:0 21px}
  .content{padding:34px 21px 26px}
  .page-intro{align-items:flex-start;flex-direction:column;gap:20px}
  .intro-actions{padding:0}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .right-column{grid-template-columns:1fr}
  .calendar-grid{grid-auto-rows:minmax(80px,1fr)}
}
@media(max-width:480px){
  .content{padding:25px 13px 26px}.topbar{padding:0 15px}
  .timezone{font-size:10px;padding:8px}.tz-utc{display:none}
  .top-actions{gap:7px}.breadcrumbs{gap:7px;font-size:11px}
  .page-intro h1{font-size:34px}
  .subheading{font-size:12px}.intro-actions{width:100%;gap:8px}.primary-btn,.secondary-btn{font-size:11px;flex:1;min-width:0;padding:10px 9px;gap:6px}.primary-btn span{display:none}
  .kpi-grid{gap:9px}.kpi-card{min-height:136px;padding:15px 12px;border-radius:21px}
  .kpi-head{font-size:10px}.kpi-glyph{height:29px;width:29px;border-radius:10px}.kpi-glyph svg{width:17px;height:17px}
  .kpi-value{font-size:22px}.kpi-foot{font-size:9px;line-height:1.45}
  .panel{padding:16px;border-radius:23px}.panel-head{flex-wrap:wrap;gap:13px;margin-bottom:18px}
  .panel h2{font-size:17px}
  .month-switch{margin-left:auto}.month-switch b{min-width:95px;font-size:10px}
  .calendar-grid,.weekday-row{gap:4px}.calendar-grid{grid-auto-rows:minmax(63px,1fr)}
  .calendar-day{padding:6px 5px;border-radius:10px}
  .day-amount{font-size:9px;line-height:1.1;letter-spacing:-.055em}.day-num{font-size:10px}
  .calendar-legend{gap:9px;font-size:9px}.right-column{gap:12px}footer{flex-direction:column}
}
.mobile-dock{display:none}
@media(max-width:820px){
  .content{padding-bottom:120px}
  .mobile-dock{position:fixed;bottom:max(15px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:40;
    display:flex;align-items:center;justify-content:space-evenly;gap:4px;width:min(330px,calc(100% - 42px));padding:8px 10px;
    border-radius:27px;border:1px solid rgba(255,255,255,.88);
    background:linear-gradient(140deg,rgba(255,255,255,.66),rgba(235,243,255,.49) 55%,rgba(255,255,255,.61));
    -webkit-backdrop-filter:blur(32px) saturate(190%);backdrop-filter:blur(32px) saturate(190%);
    box-shadow:0 15px 45px #496ca454,inset 0 1px 2px #fff,inset 0 -1px 2px #fff5}
  .mobile-dock::before{content:"";position:absolute;top:0;left:18%;width:65%;height:1px;background:linear-gradient(90deg,transparent,white,transparent);pointer-events:none}
  .dock-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px 4px 6px;border:1px solid transparent;border-radius:19px;color:#6883a9;background:transparent;min-width:0;font-size:10px;font-weight:700}
  .dock-item svg{width:20px;height:20px}.dock-item.selected{color:#356bc7;background:linear-gradient(145deg,#ffffffc9,#e3efff9e);border-color:#fff;box-shadow:0 4px 15px #77a4d531,inset 0 1px 0 #fff}
  .dock-item:hover{background:#ffffffe3;color:#2863ba}
  .calendar-panel{scroll-margin-top:15px}
}

/* Remembered login controls */
.modal-logout{width:100%;margin-top:10px;color:#ba4269;}
.modal-logout[hidden]{display:none!important;}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}