:root {
  --bg: #111111;
  --surface: #191919;
  --surface2: #202020;
  --border: #2a2a2a;
  --border2: #323232;
  --border3: #444444;
  --text: #f0f0f0;
  --text2: #999999;
  --text3: #606060;
  --red: #d95f5f;
  --red-dim: rgba(217,95,95,.1);
  --amber: #d4a84b;
  --green: #7ecf9e;
  --font: 'Inter', sans-serif;
  --mono: 'DM Mono', monospace;
  --topbar: 52px;
  --safe-t: env(safe-area-inset-top,0px);
  --safe-b: env(safe-area-inset-bottom,0px);
  --safe-l: env(safe-area-inset-left,0px);
  --safe-r: env(safe-area-inset-right,0px);
  --card-bg-a: rgba(28,28,28,0.90);
  --card-bg-b: rgba(16,16,16,0.96);
  --card-edge: rgba(255,255,255,0.07);
  --card-edge-top: rgba(255,255,255,0.13);
  --card-shadow: 0 16px 40px rgba(0,0,0,.50);
  --card-shadow-hover: 0 22px 56px rgba(0,0,0,.60);
  --liquid-edge: rgba(255,255,255,0.07);
  --liquid-shadow: 0 16px 40px rgba(0,0,0,.50);
  --accent-grad: linear-gradient(135deg, #4a4a4a, #2a2a2a);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;}
body{background: linear-gradient(160deg, #151515 0%, #111111 35%, #0e0e0e 65%, #131313 100%);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;font-size:14px;}
::-webkit-scrollbar{display:none;}
/* ── Smooth elastic scroll ── */
.dash-body {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
  will-change: scroll-position;
}
*{-ms-overflow-style:none;scrollbar-width:none;}

@media (pointer:fine) {
  html, body, body *, body *::before, body *::after {
    cursor: none !important;
  }

  #helm-cursor {
    position: fixed;
    top: 0; left: 0;
    width: 10px; height: 10px;
    margin: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(0,0,0,0.75);
    box-shadow:
      0 0 0 6px rgba(255,255,255,0.08),
      0 0 18px rgba(255,255,255,0.20);
    pointer-events: none;
    z-index: 2147483647;
    transform: translate3d(-9999px,-9999px,0);
    transition: none !important;
    will-change: transform, opacity;
  }

  #helm-cursor.hovering {
    box-shadow:
      0 0 0 10px rgba(255,255,255,0.10),
      0 0 24px rgba(255,255,255,0.24);
  }

  #helm-cursor.clicking {
    opacity: 0.82;
    box-shadow:
      0 0 0 4px rgba(255,255,255,0.14),
      0 0 12px rgba(255,255,255,0.22);
  }
}
@media (pointer:coarse) {
  #helm-cursor { display: none !important; }
} 

.screen{position:fixed;inset:0;}
.screen.hidden{display:none!important;}

#screen-login,#screen-totp{display:flex;align-items:center;justify-content:center;padding:24px;min-height:100vh;background:linear-gradient(160deg, #151515 0%, #111111 35%, #0e0e0e 65%, #131313 100%);}
.login-card,.totp-card{width:100%;max-width:360px;animation:slideUp .6s cubic-bezier(.16,1,.3,1);background: linear-gradient(145deg, var(--card-bg-a) 0%, var(--card-bg-b) 100%);backdrop-filter:blur(20px) saturate(1.5);border:1px solid var(--card-edge);border-top:1px solid var(--card-edge-top);border-radius:24px;padding:28px;box-shadow:var(--card-shadow),inset 0 1px 0 rgba(140,150,255,0.08);position:relative;overflow:hidden;}
.login-card::before,.totp-card::before{content:'';position:absolute;inset:0;height:45%;background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,transparent 100%);pointer-events:none;}
.login-wordmark{font-family:var(--mono);font-size:11px;color:var(--text3);margin-bottom:24px;display:flex;align-items:center;gap:6px;letter-spacing:.02em;}
.login-wordmark .wm-name{color:var(--text2);} .login-wordmark .wm-sep{color:var(--border3);} .login-wordmark .wm-tag{color:var(--text3);}
.login-heading{font-size:26px;font-weight:700;letter-spacing:-.04em;margin-bottom:4px;line-height:1.2;}
.login-sub{font-size:13px;color:var(--text3);margin-bottom:24px;}
.login-from{display:none;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--border2);border-radius:10px;padding:10px 14px;margin-bottom:14px;font-family:var(--mono);font-size:11px;color:var(--text2);}
.login-from.show{display:flex;} .login-from i{color:var(--text3);font-size:11px;}
.login-field{position:relative;margin-bottom:10px;}
.login-input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--text);font-family:var(--mono);font-size:14px;padding:14px 16px;border-radius:14px;outline:none;transition:border-color .25s,box-shadow .25s,background .25s;letter-spacing:.04em;}
.login-input:focus{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.25);box-shadow:0 0 0 4px rgba(255,255,255,.04);}
.login-input.err{border-color:var(--red);box-shadow:0 0 0 4px var(--red-dim);}
.login-input::placeholder{color:var(--text3);}
.login-btn{width:100%;padding:14px;background:var(--accent-grad);color:#fff;border:none;border-radius:14px;font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer;transition:transform .2s cubic-bezier(.25,1,.5,1),opacity .2s,box-shadow .2s;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;box-shadow:0 4px 20px rgba(99,102,241,0.35);}
.login-btn:hover:not(:disabled){transform:scale(.985);box-shadow:0 6px 24px rgba(99,102,241,0.45);}
.login-btn:active:not(:disabled){transform:scale(.97);}
.login-btn:disabled{opacity:.45;cursor:not-allowed;}
.login-error{font-family:var(--mono);font-size:12px;color:var(--red);margin-top:10px;opacity:0;transition:opacity .2s;text-align:center;min-height:16px;}
.login-error.show{opacity:1;}

#screen-totp{display:flex;align-items:center;justify-content:center;padding:24px;}
.totp-card{width:100%;max-width:340px;animation:slideUp .6s cubic-bezier(.16,1,.3,1);background: linear-gradient(145deg, rgba(15,17,45,0.92) 0%, rgba(10,12,35,0.96) 100%);backdrop-filter:blur(20px) saturate(1.5);border:1px solid rgba(100,110,255,0.2);border-top:1px solid rgba(140,150,255,0.32);border-radius:24px;padding:28px;box-shadow:0 20px 60px rgba(0,0,20,0.65),inset 0 1px 0 rgba(140,150,255,0.08);position:relative;overflow:hidden;}
.totp-card::before{content:'';position:absolute;inset:0;height:45%;background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,transparent 100%);pointer-events:none;}
.totp-icon{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;margin-bottom:20px;}
.totp-heading{font-size:22px;font-weight:700;letter-spacing:-.03em;margin-bottom:6px;color:#fff;}
.totp-sub{font-size:13px;color:var(--text3);margin-bottom:20px;line-height:1.5;}
.totp-code-input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#fff;font-family:var(--mono);font-size:28px;letter-spacing:.25em;text-align:center;padding:16px;border-radius:14px;outline:none;transition:all .25s;}
.totp-code-input:focus{border-color:rgba(255,255,255,.25);box-shadow:0 0 0 4px rgba(255,255,255,.04);background:rgba(255,255,255,.06);}

#screen-dash{display:flex;flex-direction:column;height:100%;}
.topbar{height:calc(var(--topbar) + var(--safe-t));padding-top:var(--safe-t);display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;z-index:100;padding-left:calc(16px + var(--safe-l));padding-right:calc(16px + var(--safe-r));}
.brand{font-family:var(--mono);font-size:14px;color:var(--text2);display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:500;position:absolute;left:50%;transform:translateX(-50%);transition:color .2s;}
.brand:hover .b-name{color:var(--text);}
.brand .b-sep{color:var(--text3);} .brand .b-dest{color:#fff;}
.subbar{height:36px;padding-left:calc(16px + var(--safe-l));padding-right:calc(16px + var(--safe-r));display:none;align-items:center;gap:12px;flex-shrink:0;z-index:99;}
.subbar.show{display:flex;}
.subbar-back{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--text2);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;}
.subbar-back:hover{background:rgba(255,255,255,.1);color:var(--text);}
.subbar-crumb{font-family:var(--mono);font-size:12px;color:var(--text3);display:flex;align-items:center;gap:8px;}
.crumb-link{color:var(--text3);cursor:pointer;transition:color .2s;} .crumb-link:hover{color:var(--text);}
.subbar-crumb .crumb-sep{color:var(--border3);}

.dash-body{flex:1;overflow-y:auto;padding:12px 16px;padding-bottom:calc(60px + var(--safe-b));width:100%;box-sizing:border-box;}
.tab-panel{display:none;animation:fadeIn .3s cubic-bezier(.25,1,.5,1);} .tab-panel.active{display:block;}

.widget{
  background: linear-gradient(145deg, var(--card-bg-a) 0%, var(--card-bg-b) 100%);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--card-edge);
  border-top-color: var(--card-edge-top);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  box-shadow: var(--card-shadow), inset 0 1px 0 rgba(140,150,255,0.07);
  position: relative;
  overflow: hidden;
  transition: transform .32s cubic-bezier(.25,1,.5,1), box-shadow .32s, border-color .25s;
}
.widget::before{
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(ellipse 80% 50% at 10% 0%, rgba(99,102,241,0.07), transparent 60%),
               radial-gradient(ellipse 60% 40% at 90% 100%, rgba(139,92,246,0.05), transparent 55%);
  pointer-events:none;
}
.widget::after{ display:none; }
.widget:hover{transform:translateY(-3px) scale(1.004);box-shadow:var(--card-shadow-hover), inset 0 1px 0 rgba(140,150,255,0.10);border-color:rgba(120,130,255,0.30);}
.widget:active{transform:translateY(0);transition:transform .1s;}
.w-header{display:flex;justify-content:space-between;align-items:center;z-index:1;}
.w-title{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--text);letter-spacing:-.01em;}
.w-icon{background:linear-gradient(135deg,rgba(99,102,241,0.15),rgba(139,92,246,0.08));color:#a5b4fc;border:1px solid rgba(100,110,255,0.2);width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:13px;transition:background .2s,transform .2s;}
.widget:hover .w-icon{background:rgba(255,255,255,.1);transform:scale(1.05);}
.w-body{flex:1;display:flex;flex-direction:column;justify-content:center;z-index:1;overflow:hidden;}
.w-mail .w-icon{color:#809fff;}
.w-gym  .w-icon{color:#a3ffb4;}
.w-money .w-icon{color:#a3ffb4;}
.w-todo{grid-column:1/2;max-height:300px;overflow:hidden;}

.pill-widget{background:linear-gradient(145deg,rgba(15,17,50,.75),rgba(10,12,38,.85));backdrop-filter:blur(12px) saturate(1.3);border:1px solid rgba(100,110,255,0.18);border-radius:999px;padding:8px 13px;display:flex;align-items:center;gap:8px;color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;transition:background .25s,border-color .25s,transform .2s,box-shadow .25s;}
.pill-widget:hover{background:linear-gradient(145deg,rgba(25,28,80,.9),rgba(18,20,60,.95));color:#fff;transform:translateY(-1px);box-shadow:0 4px 16px rgba(99,102,241,0.2);border-color:rgba(120,130,255,0.30);}
.pill-widget:active{transform:scale(.97);transition:transform .1s;}

.widget-todo {
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .05);
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  padding: 18px 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 250px;
}

.todo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025) 0%, transparent 100%);
  pointer-events: none;
}

.todo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}

.todo-title-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.todo-icon-box {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(163, 255, 180, .08);
  border: 1px solid rgba(163, 255, 180, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.todo-icon-box i {
  color: #a3ffb4;
  font-size: 9px;
}

.todo-label {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}

#todo-count {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text3);
}

.todo-content-area {
  z-index: 1;
  flex: 1;
  overflow-y: auto;
  max-height: 260px;
}

.widget-helm {
  max-height: 250px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .05);
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  padding: 18px 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.helm-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  justify-content: center;
  z-index: 1;
}

.pill-widget i.fa-calendar-day { color: #a3ffb4; }
.pill-widget i.fa-inbox { color: #809fff; }
.pill-widget i.fa-cloud { color: var(--text2); }

.helm-bar {
  z-index: 1;
}

.helm-content {
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.helm-section-label {
  font-size: 8px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.helm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  flex: 1;
}

.helm-card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  padding: 11px;
  cursor: pointer;
  transition: background .2s, transform .2s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 80px;
}

.helm-card:hover {
  background: rgba(255, 255, 255, .07);
  transform: translateY(-1px);
}

.helm-card-header {
  display: flex;
  align-items: center;
  gap: 5px;
}

.helm-card-header span {
  font-size: 9px;
  color: var(--text3);
}

.helm-card-icon {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid;
}

.helm-card-icon i {
  font-size: 7px;
}

.widget-upnext {
  max-height: 500px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .05);
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.upnext-overlay {
  position: absolute;
  inset: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025) 0%, transparent 100%);
  pointer-events: none;
}

.upnext-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  z-index: 1;
}

.upnext-icon-box {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.upnext-icon-box i {
  color: var(--text3);
  font-size: 9px;
}

.upnext-label {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}

.upnext-now-block {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-left: 2px solid rgba(255, 255, 255, .25);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  z-index: 1;
}

.upnext-next-block {
  background: rgba(255, 255, 255, .02);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  z-index: 1;
}

.upnext-status-label {
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 4px;
}

.upnext-event-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.upnext-event-title-alt {
  font-size: 13px;
  font-weight: 700;
  color: var(--text2);
  letter-spacing: -.02em;
  line-height: 1.2;
}

.upnext-event-sub {
  font-size: 10px;
  color: var(--text3);
  margin-top: 2px;
}

.upnext-roster-container {
  z-index: 1;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.roster-label {
  margin-bottom: 6px;
}

.upnext-roster-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.upnext-loading {
  font-size: 11px;
  color: var(--text3);
  padding: 4px 0;
}

/* Icon Colors */
.chat-card .helm-card-icon { background: rgba(128, 159, 255, .12); border-color: rgba(128, 159, 255, .22); }
.chat-card i { color: #809fff; }

.project-card-alt .helm-card-icon { background: rgba(255, 235, 153, .12); border-color: rgba(255, 235, 153, .22); }
.project-card-alt i { color: #ffeb99; }

.project-card .helm-card-icon { background: rgba(163, 255, 180, .12); border-color: rgba(163, 255, 180, .22); }
.project-card i { color: #a3ffb4; }

.mail-card .helm-card-icon { background: rgba(196, 181, 253, .12); border-color: rgba(196, 181, 253, .22); }
.mail-card i { color: #c4b5fd; }

.helm-card-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}

.helm-view-more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 999px;
  padding: 7px 0;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.helm-view-more:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .12);
}

.helm-view-more span {
  font-size: 11px;
  color: var(--text2);
  font-weight: 500;
}
.widget-upnext {
  width: 100%;
  height: 250px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .05);
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  padding: 18px 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.widget-upnext:hover {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.upnext-active-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1;
  flex: 0 0 180px;
}

.upnext-now-block {
  flex: 0 0 40%;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-left: 2px solid rgba(255, 255, 255, .25);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.upnext-next-block {
  flex: 0 0 48%;
  background: rgba(255, 255, 255, .02);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.upnext-roster-container {
  display: none;
}

.upnext-overlay {
  position: absolute;
  inset: 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03) 0%, transparent 100%);
  pointer-events: none;
}

.upnext-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  z-index: 1;
}

.upnext-icon-box {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.upnext-icon-box i { color: var(--text3); font-size: 9px; }
.upnext-label { font-size: 11px; font-weight: 600; color: #fff; }

.upnext-status-label {
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 6px;
}

.upnext-event-title { font-size: 14px; font-weight: 700; color: #fff; }
.upnext-event-title-alt { font-size: 15px; font-weight: 700; color: var(--text2); }
.upnext-event-sub { font-size: 11px; color: var(--text3); margin-top: 4px; }
.helm-bar{display:flex;align-items:center;gap:12px;background:linear-gradient(145deg,rgba(15,17,50,.8),rgba(10,12,38,.9));border:1px solid rgba(100,110,255,0.2);border-radius:999px;padding:10px 16px;backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 8px 28px rgba(0,0,20,.4),inset 0 1px 0 rgba(140,150,255,0.06);transition:background .25s,border-color .25s,box-shadow .25s;}
.helm-bar:focus-within{background:rgba(20,22,60,.85);border-color:rgba(120,130,255,0.38);box-shadow:0 0 0 3px rgba(99,102,241,0.15),0 8px 28px rgba(0,0,20,.4);}
.helm-bar i{color:rgba(255,255,255,.25);font-size:12px;flex-shrink:0;transition:color .25s;}
.helm-bar:focus-within i{color:rgba(255,255,255,.5);}
.helm-bar input{background:transparent;border:none;color:#fff;flex:1;outline:none;font-family:var(--font);font-size:13px;min-width:0;}
.helm-bar input::placeholder{color:var(--text3);}

.widget-grid{display:grid;grid-template-columns:3fr 5fr;gap:12px;width:100%;}
.w-mail,.w-gym,.w-wallet{grid-column:1/-1;}
.w-todo{grid-column:1/2;max-height:300px;overflow:hidden;}


.wallet-flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.wallet-main{font-size:26px;font-weight:700;color:#fff;letter-spacing:-.04em;}
.wallet-subs{display:flex;gap:20px;flex-wrap:wrap;}
.wallet-sub{display:flex;flex-direction:column;}
.m-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px;}
.m-val{font-size:13px;font-weight:600;color:var(--text2);}
.m-val.plus{color:#a3ffb4;} .m-val.minus{color:#ff9999;}

.event-row{display:flex;gap:10px;align-items:flex-start;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.045);transition:background .2s;border-radius:0;}
.event-row:last-child{border-bottom:none;}
.event-row:hover{background:rgba(255,255,255,.03);border-radius:8px;padding-left:6px;padding-right:6px;margin:0 -6px;}
.event-time{font-family:var(--mono);font-size:11px;color:var(--text3);width:36px;flex-shrink:0;padding-top:2px;}
.event-name{font-size:13px;font-weight:600;color:#fff;}
.event-sub{font-size:11px;color:var(--text3);margin-top:1px;}
.events-day-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;font-family:var(--mono);}

.w-mail-item{padding:10px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.03);transition:background .2s,transform .2s;margin-bottom:6px;display:flex;flex-direction:column;gap:4px;cursor:pointer;}
.w-mail-item:last-child{margin-bottom:0;}
.w-mail-item:hover{background:rgba(255,255,255,.07);transform:translateX(2px);}
.w-mail-sender{font-size:10px;font-weight:700;color:var(--text2);letter-spacing:.06em;text-transform:uppercase;}
.w-mail-sub{font-size:13px;font-weight:500;color:#fff;}

.todo-list{display:flex;flex-direction:column;gap:2px;}
.todo-add-row{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.05);}
.todo-add-input{flex:1;background:transparent;border:none;color:var(--text);font-family:var(--font);font-size:13px;outline:none;}
.todo-add-input::placeholder{color:var(--text3);}
.todo-add-btn{width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .15s;flex-shrink:0;}
.todo-add-btn:hover{background:rgba(255,255,255,.18);transform:scale(1.08);}
.todo-item{display:flex;align-items:center;gap:10px;padding:7px 6px;border-radius:10px;transition:background .2s;cursor:pointer;position:relative;user-select:none;}
.todo-item:hover{background:rgba(255,255,255,.04);}
.todo-check{width:18px;height:18px;border-radius:6px;border:1.5px solid rgba(255,255,255,.2);background:transparent;flex-shrink:0;position:relative;transition:background .25s,border-color .25s;overflow:hidden;}
.todo-check::after{content:'';position:absolute;inset:0;background:#a3ffb4;transform:scaleX(0);transform-origin:left;transition:transform 0s;}
.todo-item.done .todo-check{border-color:#a3ffb4;background:rgba(163,255,180,.15);}
.todo-item.done .todo-check::after{transform:scaleX(1);transition:transform .32s cubic-bezier(.25,1,.5,1);}
.todo-item.undoing .todo-check::after{transform:scaleX(0);transition:transform .28s cubic-bezier(.7,0,.3,1);}
.todo-label{font-size:13px;color:var(--text);flex:1;position:relative;transition:color .25s;}
.todo-label::after{content:'';position:absolute;left:0;top:50%;height:1px;width:100%;background:rgba(255,255,255,.4);transform:scaleX(0);transform-origin:left;transition:transform 0s;}
.todo-item.done .todo-label{color:var(--text3);}
.todo-item.done .todo-label::after{transform:scaleX(1);transition:transform .35s .05s cubic-bezier(.25,1,.5,1);}
.todo-item.undoing .todo-label::after{transform:scaleX(0);transition:transform .28s cubic-bezier(.7,0,.3,1);}
.todo-delete{opacity:0;width:18px;height:18px;border-radius:5px;background:rgba(224,85,85,.1);border:1px solid rgba(224,85,85,.15);color:var(--red);font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity .15s,transform .15s,background .15s;flex-shrink:0;}
.todo-item:hover .todo-delete{opacity:1;}
.todo-delete:hover{background:rgba(224,85,85,.25);transform:scale(1.1);}

.menu-wrap,.security-wrap{max-width:560px;margin:0 auto;animation:slideUp .5s cubic-bezier(.16,1,.3,1);}
.sessions-wrap,.audit-wrap{max-width:680px;margin:0 auto;animation:slideUp .5s cubic-bezier(.16,1,.3,1);}
.section-title{font-size:18px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px;color:#fff;}
.section-sub{font-size:14px;color:var(--text3);margin-bottom:20px;}
.sessions-list{display:flex;flex-direction:column;gap:10px;}
.sessions-actions{margin-top:20px;}
.sessions-loading{font-family:var(--mono);font-size:13px;color:var(--text3);text-align:center;padding:32px 0;}
.session-row{background:rgba(15,17,45,0.6);border:1px solid rgba(100,110,255,0.12);border-radius:16px;padding:14px 16px;display:flex;align-items:flex-start;gap:14px;backdrop-filter:blur(10px);transition:background .2s,transform .25s;}
.session-row:hover{background:rgba(255,255,255,.04);transform:translateX(2px);}
.session-row.current{border-color:rgba(120,130,255,0.32);background:rgba(25,28,80,0.5);}
.session-icon{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;flex-shrink:0;}
.session-info{flex:1;min-width:0;}
.session-ua{font-size:14px;font-weight:600;color:#fff;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.session-meta{font-family:var(--mono);font-size:11px;color:var(--text3);display:flex;flex-wrap:wrap;gap:8px;}
.session-badge{font-family:var(--mono);font-size:10px;background:rgba(255,255,255,.1);color:#fff;border-radius:6px;padding:2px 8px;margin-bottom:4px;display:inline-block;}
.session-kill{background:rgba(224,85,85,.1);border:1px solid rgba(224,85,85,.2);color:var(--red);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;flex-shrink:0;align-self:center;}
.session-kill:hover{background:var(--red);color:#fff;}
.audit-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px;background:rgba(12,14,40,0.7);border-radius:16px;overflow:hidden;border:1px solid rgba(100,110,255,0.12);}
.audit-table th{text-align:left;color:var(--text3);padding:12px 16px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;font-size:11px;border-bottom:1px solid rgba(255,255,255,.05);}
.audit-table td{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.02);color:var(--text);vertical-align:middle;transition:background .15s;}
.audit-table tr:hover td{background:rgba(255,255,255,.02);}
.audit-table tr:last-child td{border-bottom:none;}
.event-badge{display:inline-block;padding:3px 7px;border-radius:6px;font-size:10px;font-weight:600;}
.event-badge.ok{background:rgba(255,255,255,.1);color:#fff;} .event-badge.fail{background:rgba(224,85,85,.15);color:var(--red);} .event-badge.info{background:rgba(255,255,255,.05);color:var(--text2);} .event-badge.warn{background:rgba(245,166,35,.15);color:var(--amber);}
.btn-danger{padding:10px 16px;background:rgba(224,85,117,.08);color:var(--red);border:1px solid rgba(224,85,117,.22);border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;}
.btn-danger:hover{background:var(--red);color:#fff;transform:translateY(-1px);}
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.1);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:inline-block;}
.expires-badge{font-family:var(--mono);font-size:11px;color:var(--text3);}
.expires-badge.warn{color:var(--red);}

.nav-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;animation:slideUp .5s cubic-bezier(.16,1,.3,1);}
.nav-card{background:linear-gradient(145deg,rgba(15,17,45,0.88) 0%,rgba(10,12,35,0.94) 100%);border:1px solid rgba(100,110,255,0.18);border-top-color:rgba(140,150,255,0.28);border-radius:20px;padding:20px;cursor:pointer;transition:transform .3s cubic-bezier(.25,1,.5,1),background .3s,border-color .3s,box-shadow .3s;display:flex;flex-direction:column;gap:12px;text-decoration:none;overflow:hidden;backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 12px 32px rgba(0,0,20,.45),inset 0 1px 0 rgba(140,150,255,0.06);}
.nav-card:hover{transform:translateY(-3px);background:linear-gradient(145deg,rgba(22,25,65,0.92) 0%,rgba(16,18,52,0.97) 100%);border-color:rgba(120,130,255,0.32);box-shadow:0 16px 44px rgba(0,0,30,.55),inset 0 1px 0 rgba(140,150,255,0.10);}
.card-icon{background:rgba(255,255,255,.06);color:#fff;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;border:1px solid rgba(255,255,255,.1);transition:transform .25s,background .25s;}
.nav-card:hover .card-icon{transform:scale(1.1);background:rgba(255,255,255,.1);}
.card-name{font-size:15px;font-weight:600;letter-spacing:-.01em;color:#fff;}
.card-desc{font-size:13px;color:var(--text2);line-height:1.5;flex:1;}
.card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
.card-url{font-family:var(--mono);font-size:11px;color:var(--text3);}
.card-arrow{color:var(--text3);font-size:12px;transition:transform .25s,color .25s;}
.nav-card:hover .card-arrow{transform:translateX(5px);color:#fff;}

.w-dynamic{grid-column:1/-1;order:-1;border:1px solid rgba(255,255,255,.1);transform-origin:top center;animation:expandWidget .35s cubic-bezier(.25,1,.5,1) both;}
@keyframes expandWidget{from{opacity:0;transform:translateY(-12px) scaleY(0.95);}to{opacity:1;transform:translateY(0) scaleY(1);}}

@media(max-width:599px){
  /* ── Layout ── */
  .dash-body{padding:8px;padding-bottom:calc(68px + var(--safe-b));}
  .topbar{height:calc(44px + var(--safe-t));padding-left:calc(10px + var(--safe-l));padding-right:calc(10px + var(--safe-r));}

  /* ── Top area: single column stack ── */
  .top-area-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    margin-bottom:8px !important;
    margin-top:0 !important;
  }

  /* ── Widget grid: single column ── */
  .widget-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
  }
  .w-todo,.w-events,.w-mail,.w-gym,.w-wallet{ grid-column:unset !important; }

  /* ── Cards ── */
  .widget{padding:12px;border-radius:16px;}
  .nav-card{flex-direction:row;align-items:center;padding:12px;gap:10px;border-radius:14px;}
  .card-desc{display:none;}
  .card-name{font-size:14px;}
  .nav-cards{grid-template-columns:1fr;gap:8px;}

  /* ── Pills ── */
  .pill-widget{padding:6px 10px;font-size:11px;}
  .helm-bar{padding:8px 12px;}

  /* ── Events ── */
  .event-row{padding:5px 0;}
  .event-name{font-size:12px;}
  .event-sub{font-size:10px;}

  /* ── Tables ── */
  .audit-table th,.audit-table td{padding:9px 10px;}

  /* ── Weather pill: hide on mobile (weather shown in top card) ── */
  #weather-pill{display:none !important;}

  /* ── Events widget: auto height on mobile ── */
  .w-events{max-height:none !important;height:auto !important;}

  /* ── Todo card in top-area: auto height ── */
  .top-area-grid > div:first-child{max-height:none !important;}

  /* ── Performance: disable blur on mobile ── */
  .widget,
  .nav-card,
  .top-area-grid > div,
  .helm-bar,
  .pill-widget,
  .w-mail-item,
  .session-row,
  .login-card,
  .totp-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ── Disable heavy animations on mobile ── */
  .widget, .nav-card, .top-area-grid > div {
    animation: none !important;
    transition: transform .15s, box-shadow .15s !important;
  }
  .widget::before,.widget::after,
  .nav-card::before,.nav-card::after,
  .top-area-grid > div::before,.top-area-grid > div::after {
    display: none !important;
  }

  /* ── Subbar ── */
  .subbar{padding-left:calc(10px + var(--safe-l));padding-right:calc(10px + var(--safe-r));}
}

@keyframes liquid-shift{0%{background-position:0% 0%,0% 0%,0% 0%;}50%{background-position:20% 10%, -10% 5%,0% 0%;}100%{background-position:40% 20%,-20% 10%,0% 0%;}}
@keyframes liquid-spec{0%{transform:translateX(0) translateY(0);}50%{transform:translateX(12px) translateY(6px);}100%{transform:translateX(-8px) translateY(4px);}}
@keyframes slideUp{from{opacity:0;transform:translateY(24px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(163,255,180,0);}50%{box-shadow:0 0 0 6px rgba(163,255,180,.08);}}

.w-todo{grid-column:1/2;max-height:300px;overflow:hidden;}

/* ── WEATHER PILL ── */
#weather-pill {
  position: absolute;
  left: calc(16px + var(--safe-l));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  height: 35px;
padding: 0 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  cursor: default;
  z-index: 200;
  transition: background .25s, border-color .25s, box-shadow .25s;
  backdrop-filter: blur(12px);
}
#weather-pill:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
#weather-pill .wp-icon { font-size: 11px; color: #ffeb99; }
#weather-pill .wp-temp { color: #fff; }

/* Dropdown */
#weather-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: linear-gradient(165deg,rgba(22,22,22,.92) 0%,rgba(8,8,8,.97) 100%);
  border: 1px solid rgba(255,255,255,.13);
  border-top: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 20px 48px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px) scale(.97);
  transform-origin: top left;
  transition: opacity .22s cubic-bezier(.25,1,.5,1), transform .22s cubic-bezier(.25,1,.5,1);
  z-index: 300;
}
#weather-pill:hover #weather-dropdown,
#weather-pill:focus-within #weather-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.wd-row { display: flex; align-items: center; justify-content: space-between; }
.wd-stat { display: flex; flex-direction: column; gap: 1px; }
.wd-stat-lbl { font-size: 8px; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; }
.wd-stat-val { font-size: 12px; font-weight: 600; color: #fff; }
.wd-divider { height: 1px; background: rgba(255,255,255,.06); margin: 10px 0; }
.wd-tmr-row { display: flex; align-items: center; gap: 6px; }
.wd-tmr-icon { font-size: 10px; color: #ffeb99; }
.wd-tmr-label { font-size: 10px; color: var(--text3); flex: 1; }
.wd-tmr-range { font-size: 11px; color: var(--text2); }
.wd-tmr-max { font-size: 11px; font-weight: 700; color: #fff; margin-left: 4px; }

/* ── Subtle body depth ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 15% 10%,  rgba(255,255,255,0.025), transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 90%,  rgba(0,0,0,0.25),        transparent 55%);
  pointer-events: none;
  z-index: 0;
}
#screen-login, #screen-totp, #screen-dash { z-index: 1; position: relative; }

/* ── Cards ── */
.top-area-grid > div,
.widget,
.login-card,
.totp-card,
.nav-card,
#totp-status-block {
  background: linear-gradient(160deg, rgba(30,30,30,0.92) 0%, rgba(16,16,16,0.97) 100%) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-top-color: rgba(255,255,255,0.13) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 16px 44px rgba(0,0,0,0.52) !important;
  transition: transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s, border-color .22s !important;
  animation: none !important;
}

/* Subtle inner highlight — top-left catch light */
.top-area-grid > div::before,
.widget::before,
.login-card::before,
.totp-card::before,
.nav-card::before,
#totp-status-block::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 45% at 12% 0%, rgba(255,255,255,0.04), transparent 52%);
  border-radius: inherit;
}

.top-area-grid > div::after,
.widget::after,
.login-card::after,
.totp-card::after,
.nav-card::after,
#totp-status-block::after { display: none !important; }

.top-area-grid > div:hover,
.widget:hover,
.nav-card:hover {
  transform: translateY(-2px) scale(1.003) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 22px 56px rgba(0,0,0,0.62) !important;
}

/* ── Secondary surfaces ── */
.helm-bar,
.pill-widget,
.w-mail-item,
.session-row,
.audit-table,
.login-input,
.totp-code-input,
.session-kill,
.btn-danger,
.todo-add-btn,
.todo-delete {
  background: linear-gradient(160deg, rgba(28,28,28,0.80), rgba(14,14,14,0.92)) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 4px 14px rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.login-input:focus,
.totp-code-input:focus {
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 3px rgba(255,255,255,0.05) !important;
  background: linear-gradient(160deg, rgba(32,32,32,0.88), rgba(18,18,18,0.95)) !important;
}

/* ── Login button ── */
.login-btn {
  background: linear-gradient(160deg, #3a3a3a 0%, #222222 100%) !important;
  color: #f0f0f0 !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.login-btn:hover:not(:disabled) {
  background: linear-gradient(160deg, #444444 0%, #2a2a2a 100%) !important;
  box-shadow: 0 6px 22px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

/* ── w-icon ── */
.w-icon {
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)) !important;
  color: #c0c0c0 !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
}

/* ── Weather pill ── */
#weather-pill {
  background: linear-gradient(145deg, rgba(28,28,28,0.88), rgba(16,16,16,0.95)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
#weather-pill:hover {
  border-color: rgba(255,255,255,0.14) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45) !important;
}
#weather-dropdown {
  background: linear-gradient(160deg, rgba(26,26,26,0.97), rgba(14,14,14,0.99)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-top-color: rgba(255,255,255,0.14) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* ── Pill / helm bar ── */
.helm-bar:focus-within {
  border-color: rgba(255,255,255,0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 3px rgba(255,255,255,0.04) !important;
}
.pill-widget:hover {
  background: linear-gradient(160deg, rgba(36,36,36,0.90), rgba(22,22,22,0.97)) !important;
  color: #f0f0f0 !important;
  border-color: rgba(255,255,255,0.14) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.40) !important;
}


/* ── Manage pill ── */
#manage-pill {
  position: absolute;
  right: calc(16px + var(--safe-r));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(145deg, rgba(28,28,28,0.88), rgba(16,16,16,0.95));
  border: 1px solid rgba(255,255,255,0.08);
  border-top-color: rgba(255,255,255,0.13);
  border-radius: 999px;
  height: 35px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  cursor: default;
  z-index: 200;
  box-shadow: 0 4px 14px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
  white-space: nowrap;
  max-width: 90px;
  transition:
    max-width .45s cubic-bezier(.25,1,.4,1),
    border-color .2s,
    box-shadow .2s;
}
#manage-pill:hover {
  max-width: 400px;
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 6px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,0.07);
}

/* gear icon */
#manage-pill .mp-icon {
  font-size: 11px;
  color: var(--text3);
  flex-shrink: 0;
  transition: color .2s;
}
#manage-pill:hover .mp-icon { color: var(--text2); }

/* "Manage" label */
#manage-pill .mp-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  flex-shrink: 0;
  transition: color .2s;
}
#manage-pill:hover .mp-label { color: var(--text); }

/* divider line between label and options */
#manage-pill .mp-divider {
  width: 1px;
  height: 12px;
  background: rgba(255,255,255,0.10);
  flex-shrink: 0;
  opacity: 0;
  transform: scaleY(0.5);
  transition: opacity .2s .1s, transform .2s .1s;
}
#manage-pill:hover .mp-divider {
  opacity: 1;
  transform: scaleY(1);
}

/* each option */
#manage-pill .mp-opt {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .22s, transform .22s, background .15s, color .15s;
}
#manage-pill:hover .mp-opt { opacity: 1; transform: translateX(0); }
#manage-pill:hover .mp-opt:nth-child(4) { transition-delay: .05s; }
#manage-pill:hover .mp-opt:nth-child(5) { transition-delay: .10s; }
#manage-pill:hover .mp-opt:nth-child(6) { transition-delay: .15s; }

#manage-pill .mp-opt:hover { background: rgba(255,255,255,0.07); color: #fff; }
#manage-pill .mp-opt i { font-size: 9px; opacity: .65; }

#manage-pill .mp-opt .fa-arrow-right-from-bracket {
  font-size: 10px;
  opacity: 1;
}


/* dot separators */
#manage-pill .mp-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .2s .08s;
}
#manage-pill:hover .mp-sep { opacity: 1; }

@media(max-width:599px){ #manage-pill { display: none !important; } }

/* ── Up Next card ── */
#upnext-card {
  background: linear-gradient(160deg, rgba(30,30,30,0.92) 0%, rgba(16,16,16,0.97) 100%) !important;
}
#upnext-now {
  background: rgba(255,255,255,.035) !important;
  border-left-color: rgba(255,255,255,.30) !important;
}

/* ── Scroll performance ── */

/* Promote scrolling container to its own compositor layer */
.dash-body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
  will-change: scroll-position;
  transform: translateZ(0);
}

/* Stop cards from causing repaints during scroll */
.widget,
.top-area-grid > div,
.nav-card {
  will-change: transform;
  contain: layout style paint;
}

/* Prevent subpixel jitter on scroll */
.widget-grid,
.top-area-grid,
#dynamic-widgets-container {
  transform: translateZ(0);
}

/* Smooth momentum on all inner scrollable areas */
.w-events .w-body,
.w-todo .w-body,
#sessions-list,
.w-body[style*="overflow"],
.audit-wrap,
.sessions-wrap {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

@media (max-width: 599px) {
  /* On mobile: contain is too aggressive for flex column, soften it */
  .widget,
  .top-area-grid > div {
    contain: layout style;
  }

  /* Kill will-change on low-priority widgets to free GPU memory */
  .w-gym, .w-wallet, .w-mail {
    will-change: auto;
  }

  /* Elastic feel — let the page bounce naturally */
  .dash-body {
    overscroll-behavior-y: auto;
  }
}

/* ── Mobile: kill body overlay + all backdrop-filters ── */
@media(max-width:599px){
  body::before { display: none !important; }
  * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .widget, .top-area-grid > div, .nav-card {
    background: #1c1c1c !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.40) !important;
    animation: none !important;
  }
  .helm-bar, .pill-widget, .login-card, .totp-card {
    background: #181818 !important;
  }
  #weather-pill { display: none !important; }
}

/* ── Cursor — off-white dot ── */
@media (pointer:fine) {
  body { cursor: none !important; }
  #helm-cursor,
  #helm-cursor.hovering,
  #helm-cursor.clicking {
    width: 8px !important;
    height: 8px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(240,240,240,0.95) !important;
    box-shadow: none !important;
    transition: none !important;
    will-change: transform !important;
  }
}
@media (pointer:coarse) { #helm-cursor { display: none !important; } }