*{box-sizing:border-box} :root{--bg:#070707;--panel:#101010;--panel2:#151515;--line:#292929;--text:#f4f4f4;--muted:#929292;--soft:#cfcfcf;--white:#fff;--shadow:0 18px 50px rgba(0,0,0,.28)}body.light{--bg:#f5f5f5;--panel:#fff;--panel2:#f1f1f1;--line:#dedede;--text:#101010;--muted:#6e6e6e;--soft:#333;--white:#111}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;min-height:100vh}.app-shell{display:flex;min-height:100vh}.sidebar{width:245px;background:#0b0b0b;border-right:1px solid #242424;padding:25px 16px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:20}.brand{display:flex;align-items:center;gap:11px;padding:3px 10px 30px}.brand .mountain{font-size:27px}.brand strong{display:block;font-size:13px;letter-spacing:1.2px}.brand span{display:block;color:#707070;font-size:8px;letter-spacing:1.5px;margin-top:3px}.sidebar nav{display:grid;gap:5px}.nav-item{border:0;background:transparent;color:#888;text-align:left;padding:12px 12px;border-radius:8px;cursor:pointer;font-size:14px;display:flex;gap:12px;align-items:center}.nav-item:hover,.nav-item.active{background:#242424;color:#fff}.sidebar-quote{margin-top:auto;color:#666;font-size:11px;line-height:1.6;padding:15px 12px}.profile-mini{border-top:1px solid #242424;padding:17px 8px 2px;display:flex;gap:10px;align-items:center}.avatar{width:30px;height:30px;border-radius:50%;background:#eee;color:#111;display:grid;place-items:center;font-weight:700}.profile-mini b{font-size:11px;display:block}.profile-mini small{font-size:9px;color:#777}.main{margin-left:245px;width:calc(100% - 245px);padding:30px 34px 60px;max-width:1600px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.eyebrow{font-size:9px;letter-spacing:1.7px;color:#8a8a8a;font-weight:700}.topbar h1{font-size:25px;margin:7px 0 0}.topbar p{margin:0}.top-actions{display:flex;gap:9px;align-items:center}.date-chip,.icon-btn,.calendar-controls button{border:1px solid var(--line);background:var(--panel);color:var(--soft);border-radius:8px;padding:9px 12px;font-size:11px}.icon-btn,.calendar-controls button{cursor:pointer}.mobile-menu{display:none}.page{display:none}.page.active{display:block}.hero{min-height:170px;border:1px solid #303030;border-radius:10px;padding:30px;display:flex;justify-content:space-between;align-items:center;overflow:hidden;position:relative;background:radial-gradient(circle at 75% 30%,#3b3b3b 0,#171717 25%,#0b0b0b 62%)}.hero:after{content:"";position:absolute;inset:auto 0 0;height:50%;background:linear-gradient(transparent,rgba(0,0,0,.7));pointer-events:none}.hero h2{font-size:28px;margin:14px 0 8px;position:relative;z-index:1}.hero p{color:#aaa;font-size:12px;position:relative;z-index:1}.badge{font-size:9px;border:1px solid #555;border-radius:20px;padding:6px 10px;color:#ccc}.hero-mark{font-size:100px;opacity:.08;margin-right:7%;transform:rotate(180deg)}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}.stat,.card{border:1px solid var(--line);background:var(--panel);border-radius:10px}.stat{padding:17px}.stat span,.stat small{display:block;color:var(--muted);font-size:10px}.stat strong{font-size:25px;display:block;margin:8px 0 2px}.two-col{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;margin-top:14px}.card{padding:19px}.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.card-head h3{margin:5px 0 0;font-size:14px}.text-btn{border:0;background:none;color:#aaa;cursor:pointer;font-size:11px}.task-list{display:grid;gap:8px}.task-row{display:flex;align-items:center;gap:11px;border:1px solid var(--line);padding:11px;border-radius:8px;background:var(--panel2)}.check{width:17px;height:17px;border:1px solid #666;border-radius:4px;display:grid;place-items:center;cursor:pointer;flex:none}.check.done{background:#eee;color:#111;border-color:#eee}.task-info{flex:1;min-width:0}.task-info b{font-size:11px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task-info small{color:#777;font-size:9px}.task-tag{font-size:8px;color:#aaa;border:1px solid #383838;border-radius:12px;padding:4px 7px}.bars{height:190px;display:flex;align-items:end;gap:10px;padding:15px 5px 2px}.bar-wrap{flex:1;height:100%;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:7px}.bar{width:100%;max-width:32px;border-radius:4px 4px 2px 2px;background:#777;min-height:3px}.bar.today{background:#eee}.bar-wrap span{font-size:9px;color:#777}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}.quick{border:1px solid var(--line);background:var(--panel);color:var(--text);padding:14px;border-radius:8px;text-align:left;cursor:pointer}.quick:hover{border-color:#666}.quick span{font-size:11px;margin-left:8px}.section-head{display:flex;align-items:end;justify-content:space-between;margin:8px 0 22px}.section-head h2{margin:6px 0 0;font-size:27px}.primary{border:1px solid #fff;background:#fff;color:#111;border-radius:7px;padding:10px 14px;font-weight:700;font-size:11px;cursor:pointer}.full{width:100%;margin-top:6px}.tabs{display:flex;gap:6px;margin-bottom:14px}.tab{border:1px solid var(--line);background:var(--panel);color:#888;padding:8px 13px;border-radius:20px;font-size:10px;cursor:pointer}.tab.active{background:#eee;color:#111;border-color:#eee}.goal-list{display:grid;gap:11px}.goal{border:1px solid var(--line);background:var(--panel);padding:19px;border-radius:10px}.goal-top{display:flex;justify-content:space-between;gap:15px}.goal-icon{width:40px;height:40px;border:1px solid #444;border-radius:9px;display:grid;place-items:center;flex:none}.goal-main{flex:1}.goal-main h3{margin:1px 0 5px;font-size:14px}.goal-main p{margin:0;color:#777;font-size:10px}.goal-percent{font-weight:800}.progress-track{height:5px;background:#292929;border-radius:9px;overflow:hidden;margin-top:15px}.progress-track i{display:block;height:100%;background:#eee;border-radius:9px}.goal-meta{display:flex;justify-content:space-between;color:#777;font-size:9px;margin-top:7px}.task-page-list{display:grid;gap:8px}.task-page-list .task-row{padding:15px}.calendar-controls{display:flex;align-items:center;gap:9px;color:#aaa;font-size:12px}.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:14px}.day-name{text-align:center;color:#666;font-size:9px;padding:8px}.day{min-height:80px;border:1px solid var(--line);background:var(--panel);border-radius:7px;padding:9px;cursor:pointer}.day:hover,.day.selected{border-color:#aaa}.day.muted{opacity:.35}.day b{font-size:10px}.day .dot{width:5px;height:5px;background:#eee;border-radius:50%;margin-top:12px}.four{grid-template-columns:repeat(4,1fr)}.chart-card{min-height:270px}.line-chart{height:190px;display:flex;align-items:end;gap:12px;border-bottom:1px solid var(--line);padding:20px 8px 0}.line-point{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:end;height:100%;gap:8px}.line-point i{width:10px;height:10px;border:2px solid #eee;border-radius:50%;background:var(--panel);position:relative}.line-point .v{height:var(--h);width:2px;background:#777}.line-point span{font-size:9px;color:#666}.history-list{display:grid;gap:9px}.history-item{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);background:var(--panel);padding:17px;border-radius:9px}.history-item b{font-size:12px}.history-item small{display:block;color:#777;font-size:9px;margin-top:4px}.history-score{font-weight:800;font-size:17px}.analytics-list{display:grid;gap:12px;margin-top:18px}.analytics-row{display:grid;grid-template-columns:90px 1fr 40px;gap:10px;align-items:center;font-size:10px}.analytics-row .track{height:5px;background:#292929;border-radius:10px}.analytics-row i{display:block;height:100%;background:#eee;border-radius:10px}.settings-list{display:grid;gap:10px;max-width:700px}.setting{border:1px solid var(--line);background:var(--panel);padding:18px;border-radius:9px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--text);cursor:pointer}.setting b{font-size:12px;display:block}.setting small{font-size:9px;color:#777;display:block;margin-top:4px}.setting input{background:var(--panel2);border:1px solid var(--line);color:var(--text);padding:9px;border-radius:6px;max-width:180px}.setting.danger{border-color:#3b2929;color:#ddd}.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}.modal-backdrop.open{display:flex}.modal{width:min(430px,100%);background:#111;border:1px solid #333;border-radius:12px;padding:25px;position:relative;box-shadow:var(--shadow)}.modal h2{margin:7px 0 22px}.modal-close{position:absolute;right:14px;top:12px;background:none;border:0;color:#aaa;font-size:22px;cursor:pointer}.modal form{display:grid;gap:14px}.modal label{font-size:10px;color:#aaa}.modal input,.modal select{display:block;width:100%;margin-top:6px;padding:11px;background:#181818;border:1px solid #333;border-radius:7px;color:#eee;outline:none}.toast{position:fixed;right:25px;bottom:25px;background:#eee;color:#111;padding:11px 15px;border-radius:7px;font-size:11px;transform:translateY(100px);opacity:0;transition:.25s;z-index:200}.toast.show{transform:translateY(0);opacity:1}@media(max-width:900px){.sidebar{width:210px}.main{margin-left:210px;width:calc(100% - 210px);padding:24px}.stats-grid{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}.quick-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:680px){.sidebar{transform:translateX(-100%);transition:.25s;width:245px;box-shadow:10px 0 30px #000}.sidebar.open{transform:translateX(0)}.main{margin-left:0;width:100%;padding:18px 14px 35px}.mobile-menu{display:block;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:7px;padding:8px 10px;margin-right:10px}.topbar{justify-content:flex-start}.topbar>div:nth-child(2){flex:1}.topbar h1{font-size:18px}.date-chip{display:none}.top-actions{margin-left:auto}.hero{min-height:150px;padding:22px}.hero h2{font-size:20px}.hero-mark{display:none}.stats-grid,.four{grid-template-columns:repeat(2,1fr)}.stat{padding:13px}.stat strong{font-size:21px}.section-head{align-items:center}.section-head h2{font-size:22px}.calendar{gap:3px}.day{min-height:58px;padding:7px}.day-name{padding:5px 0}.day .dot{margin-top:7px}.task-tag{display:none}.goal-top{gap:9px}.goal-icon{width:34px;height:34px}.quick-grid{grid-template-columns:1fr 1fr}.card{padding:15px}}
/* Light mode mein bhi LIVE CARD black + text white rahe */
body.light .live-hero {
  background: #0a0a0a !important;
  color: #ffffff !important;
}

body.light .live-hero #liveTime,
body.light .live-hero #liveDate,
body.light .live-hero .live-progress-head strong {
  color: #ffffff !important;
}

/* Gradient overlay remove */
.live-hero:after {
  display: none !important;
}
/* ==========================================
   SIDEBAR CLOSE BUTTON
   ========================================== */

.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.brand-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.sidebar-close {
  display: none;
  width: 30px;
  height: 30px;
  border: 1px solid #ff4d4d;
  border-radius: 8px;
  background: #180909;
  color: #ff4d4d;
  font-size: 22px;
  line-height: 26px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: 0.2s ease;
  flex-shrink: 0;
}

.sidebar-close:hover {
  background: #ff4d4d;
  color: #ffffff;
  transform: scale(1.05);
}

/* Mobile / tablet sidebar */
@media (max-width: 900px) {

  .sidebar-close {
    display: flex;
  }

  .sidebar {
    z-index: 1000;
  }

}

/* Small screen polish */
@media (max-width: 680px) {

  .sidebar-close {
    width: 32px;
    height: 32px;
    font-size: 23px;
  }

}
/* ==========================================
   WINTER ARC - PERFECT LIGHT / DARK TEXT
   ========================================== */

/* ---------- LIGHT MODE ---------- */

body.light {
  color: #111111 !important;
}

/* All cards */
body.light .card,
body.light .stat,
body.light .goal,
body.light .history-item,
body.light .analytics-row,
body.light .task-row,
body.light .calendar-card,
body.light .progress-card {
  color: #111111 !important;
  background: #ffffff !important;
}

/* Card headings */
body.light .card h1,
body.light .card h2,
body.light .card h3,
body.light .card h4,
body.light .card strong,
body.light .card b,
body.light .stat strong,
body.light .goal h3 {
  color: #111111 !important;
}

/* Card small / secondary text */
body.light .card p,
body.light .card span,
body.light .card small,
body.light .stat span,
body.light .stat small,
body.light .goal p,
body.light .goal-meta,
body.light .task-info small {
  color: #111111 !important;
  opacity: 0.7;
}

/* ==========================================
   DARK MODE
   ========================================== */

body:not(.light) {
  color: #ffffff !important;
}

/* All cards */
body:not(.light) .card,
body:not(.light) .stat,
body:not(.light) .goal,
body:not(.light) .history-item,
body:not(.light) .analytics-row,
body:not(.light) .task-row,
body:not(.light) .calendar-card,
body:not(.light) .progress-card {
  color: #ffffff !important;
}

/* Card headings */
body:not(.light) .card h1,
body:not(.light) .card h2,
body:not(.light) .card h3,
body:not(.light) .card h4,
body:not(.light) .card strong,
body:not(.light) .card b,
body:not(.light) .stat strong,
body:not(.light) .goal h3 {
  color: #ffffff !important;
}

/* Card secondary text */
body:not(.light) .card p,
body:not(.light) .card span,
body:not(.light) .card small,
body:not(.light) .stat span,
body:not(.light) .stat small,
body:not(.light) .goal p,
body:not(.light) .goal-meta,
body:not(.light) .task-info small {
  color: #ffffff !important;
  opacity: 0.7;
}


/* ---------- LIVE TIMER DARK ---------- */

body:not(.light) .live-hero {
  background: #0a0a0a !important;
  color: #ffffff !important;
}

/* Live time */
body:not(.light) .live-hero #liveTime {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Live date */
body:not(.light) .live-hero #liveDate {
  color: #ffffff !important;
  opacity: 0.75 !important;
}

/* Progress */
body:not(.light) .live-hero .live-progress-head span,
body:not(.light) .live-hero .live-progress-head strong {
  color: #ffffff !important;
}

body:not(.light) .live-hero .live-meta span {
  color: #ffffff !important;
  opacity: 0.7 !important;
}

/* Progress bar */
body:not(.light) .live-hero .day-track {
  background: #292929 !important;
}

body:not(.light) .live-hero .day-track i {
  background: #ffffff !important;
}

/* Badge */
body:not(.light) .live-hero .badge {
  color: #ffffff !important;
  border-color: #555555 !important;
}


/* ---------- REMOVE LIVE HERO OVERLAY ---------- */

.live-hero:after {
  display: none !important;
}
/* ==========================================
   WINTER ARC - TOP HEADER SINGLE CARD
   ========================================== */

.topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  margin-bottom: 24px !important;
  min-height: 82px;
}

/* ONE SINGLE CARD */
.topbar-card {
  width: min(620px, calc(100% - 100px));
  min-height: 82px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  padding: 15px 28px;

  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;

  box-shadow:
    0 10px 30px rgba(0,0,0,.08);

  position: relative;
  overflow: hidden;
}

/* subtle premium shine */
.topbar-card::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  top: -130px;
  right: -70px;

  background: rgba(255,255,255,.05);
  border-radius: 50%;

  pointer-events: none;
}

/* top small text */
.topbar-card .eyebrow {
  margin: 0 0 5px !important;
  color: var(--muted) !important;

  font-size: 9px !important;
  font-weight: 800 !important;

  letter-spacing: 1.8px !important;
  text-align: center !important;
}

/* MAIN GREETING */
.topbar-card #pageTitle {
  margin: 0 !important;
  padding: 0 !important;

  color: var(--text) !important;

  font-size: 23px !important;
  line-height: 1.2 !important;

  font-weight: 800 !important;
  letter-spacing: -.4px !important;

  text-align: center !important;
}

/* DATE + ICON */
.topbar-date {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  margin-top: 6px;

  color: var(--muted);

  font-size: 9px;
  font-weight: 600;
}

.topbar-theme-icon {
  font-size: 12px;
  color: var(--muted);
}

/* keep right theme button but visually hide duplicate */
.top-actions {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
}

.top-actions .icon-btn {
  display: none;
}

/* hamburger */
.mobile-menu {
  position: absolute !important;
  left: 0 !important;
  z-index: 5;
}


/* ==========================================
   LIGHT MODE
   ========================================== */

body.light .topbar-card {
  background: #ffffff !important;
  border-color: #dddddd !important;

  box-shadow:
    0 10px 30px rgba(0,0,0,.07) !important;
}

body.light .topbar-card #pageTitle {
  color: #111111 !important;
}

body.light .topbar-card .eyebrow {
  color: #666666 !important;
}

body.light .topbar-date,
body.light .topbar-theme-icon {
  color: #777777 !important;
}


/* ==========================================
   DARK MODE
   ========================================== */

body:not(.light) .topbar-card {
  background: #101010 !important;
  border-color: #292929 !important;

  box-shadow:
    0 10px 30px rgba(0,0,0,.30) !important;
}

body:not(.light) .topbar-card #pageTitle {
  color: #ffffff !important;
}

body:not(.light) .topbar-card .eyebrow {
  color: #929292 !important;
}

body:not(.light) .topbar-date,
body:not(.light) .topbar-theme-icon {
  color: #888888 !important;
}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 680px) {

  .topbar {
    min-height: 72px !important;
    margin-bottom: 18px !important;
  }

  .topbar-card {
    width: calc(100% - 82px) !important;

    min-height: 72px !important;

    padding: 12px 10px !important;

    border-radius: 13px !important;
  }

  .topbar-card .eyebrow {
    font-size: 7.5px !important;
    letter-spacing: 1.2px !important;

    margin-bottom: 4px !important;
  }

  .topbar-card #pageTitle {
    font-size: 16px !important;
    letter-spacing: -.2px !important;
  }

  .topbar-date {
    font-size: 8px !important;
    margin-top: 5px !important;
  }

  .topbar-theme-icon {
    font-size: 10px !important;
  }

  .mobile-menu {
    left: 0 !important;
  }
}
/* ==========================================
   TOP CARD - LARGER PREMIUM SIZE
   ========================================== */

.topbar-card {
  width: min(720px, calc(100% - 100px)) !important;
  min-height: 115px !important;
  padding: 22px 35px !important;
  border-radius: 16px !important;
}

/* WINTER ARC • DATE */
.topbar-card .eyebrow {
  font-size: 11px !important;
  letter-spacing: 2px !important;
  margin-bottom: 8px !important;
}

/* GOOD MORNING / AFTERNOON / NIGHT */
.topbar-card #pageTitle {
  font-size: 30px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -.5px !important;
}

/* DATE */
.topbar-date {
  font-size: 11px !important;
  margin-top: 9px !important;
  gap: 9px !important;
}

.topbar-theme-icon {
  font-size: 14px !important;
}


/* ==========================================
   MOBILE - STILL LARGE
   ========================================== */

@media (max-width: 680px) {

  .topbar-card {
    width: calc(100% - 70px) !important;
    min-height: 105px !important;
    padding: 19px 16px !important;
    border-radius: 15px !important;
  }

  .topbar-card .eyebrow {
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 7px !important;
  }

  .topbar-card #pageTitle {
    font-size: 23px !important;
    line-height: 1.25 !important;
  }

  .topbar-date {
    font-size: 16px !important;
    margin-top: 8px !important;
  }

  .topbar-theme-icon {
    font-size: 12px !important;
  }
}
.topbar-card .eyebrow {
  display: none !important;
}
/* ==========================================
   MERGED TOP CARD + LIVE TIMER
   ========================================== */

.topbar {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  position: relative !important;
  margin-bottom: 24px !important;
}

.topbar-card {
  width: min(900px, calc(100% - 90px));
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  padding: 24px 32px 28px !important;
  text-align: center;
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
  overflow: hidden;
}

/* Greeting */
.topbar-card #pageTitle {
  margin: 0 !important;
  color: var(--text) !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

/* Date */
.topbar-date {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 9px !important;
  margin-top: 9px !important;
  color: var(--muted) !important;
  font-size: 11px !important;
}

/* Hide WINTER ARC • DATE */
.topbar-card .eyebrow {
  display: none !important;
}

/* Divider */
.top-live-divider {
  width: 100%;
  height: 1px;
  background: var(--line);
  margin: 22px 0 24px;
}


/* ==========================================
   LIVE TIMER INSIDE SAME CARD
   ========================================== */

.top-live {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 45px;
  text-align: left;
}

.top-live-left {
  flex: 1;
}

.top-live-left h2 {
  margin: 12px 0 5px !important;
  font-size: 48px !important;
  line-height: 1 !important;
  letter-spacing: -2px !important;
  font-variant-numeric: tabular-nums;
  color: var(--text) !important;
}

.top-live-left p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 11px !important;
}


/* Badge */
.top-live .badge {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 1px;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 6px 10px;
  color: var(--text);
}


/* Progress */
.top-live-progress {
  width: min(420px, 45%);
}

.top-live-progress .live-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--muted);
  font-weight: 700;
}

.top-live-progress .live-progress-head strong {
  font-size: 16px;
  letter-spacing: 0;
  color: var(--text);
}

.top-live-progress .day-track {
  height: 9px;
  background: var(--panel2);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.top-live-progress .day-track i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--text);
  border-radius: 99px;
  transition: width .5s linear;
}

.top-live-progress .live-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  color: var(--muted);
  font-size: 9px;
}


/* Hide duplicate right theme button */
.top-actions {
  display: none !important;
}


/* Hamburger */
.mobile-menu {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%);
  z-index: 5;
}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 680px) {

  .topbar {
    margin-bottom: 18px !important;
  }

  .topbar-card {
    width: calc(100% - 65px) !important;
    padding: 20px 17px 22px !important;
    border-radius: 16px !important;
  }

  .topbar-card #pageTitle {
    font-size: 23px !important;
  }

  .topbar-date {
    font-size: 10px !important;
  }

  .top-live-divider {
    margin: 18px 0 20px;
  }

  .top-live {
    display: block !important;
  }

  .top-live-left {
    text-align: center !important;
  }

  .top-live-left h2 {
    font-size: 43px !important;
    margin-top: 12px !important;
  }

  .top-live-left p {
    font-size: 10px !important;
  }

  .top-live-progress {
    width: 100% !important;
    margin-top: 25px !important;
  }

  .top-live-progress .live-progress-head {
    font-size: 8px;
  }

  .top-live-progress .live-meta {
    font-size: 8px;
  }
}
/* ==========================================
   WINTER ARC — FINAL TOP CARD
   ========================================== */

.topbar {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  position: relative !important;
  margin-bottom: 24px !important;
}

.topbar-card {
  width: min(900px, calc(100% - 90px)) !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  padding: 24px 32px 28px !important;
  text-align: center;
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
  overflow: hidden;
}

/* Greeting */
.topbar-card #pageTitle {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--text) !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

/* Date */
.topbar-date {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 9px !important;
  margin-top: 9px !important;
  color: var(--muted) !important;
  font-size: 11px !important;
}

/* Hide old WINTER ARC • DATE */
.topbar-card .eyebrow {
  display: none !important;
}

/* Theme button inside card */
.topbar-theme-icon {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  cursor: pointer;
}

/* Divider */
.top-live-divider {
  width: 100%;
  height: 1px;
  background: var(--line);
  margin: 22px 0 24px;
}

/* ==========================================
   LIVE TIMER
   ========================================== */

.top-live {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 45px;
  text-align: left;
}

.top-live-left {
  flex: 1;
}

.top-live-left h2 {
  margin: 12px 0 5px !important;
  color: var(--text) !important;
  font-size: 48px !important;
  line-height: 1 !important;
  letter-spacing: -2px !important;
  font-variant-numeric: tabular-nums;
}

.top-live-left p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 11px !important;
}

/* Live badge */
.top-live .badge {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 1px;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 6px 10px;
  color: var(--text);
}

/* Progress area */
.top-live-progress {
  width: min(420px, 45%);
}

.top-live-progress .live-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--muted);
  font-weight: 700;
}

.top-live-progress .live-progress-head strong {
  font-size: 16px;
  letter-spacing: 0;
  color: var(--text);
}

.top-live-progress .day-track {
  height: 9px;
  background: var(--panel2);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.top-live-progress .day-track i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--text);
  border-radius: 99px;
  transition: width .5s linear;
}

.top-live-progress .live-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  color: var(--muted);
  font-size: 9px;
}

/* Hide old right-side actions */
.top-actions {
  display: none !important;
}

/* Mobile menu */
.mobile-menu {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%);
  z-index: 5;
}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 680px) {

  .topbar {
    margin-bottom: 18px !important;
  }

  .topbar-card {
    width: calc(100% - 65px) !important;
    padding: 20px 17px 22px !important;
    border-radius: 16px !important;
  }

  .topbar-card #pageTitle {
    font-size: 23px !important;
  }

  .topbar-date {
    font-size: 10px !important;
  }

  .top-live-divider {
    margin: 18px 0 20px;
  }

  .top-live {
    display: block !important;
  }

  .top-live-left {
    text-align: center !important;
  }

  .top-live-left h2 {
    font-size: 43px !important;
  }

  .top-live-left p {
    font-size: 10px !important;
  }

  .top-live-progress {
    width: 100% !important;
    margin-top: 25px !important;
  }

  .top-live-progress .live-progress-head {
    font-size: 8px;
  }

  .top-live-progress .live-meta {
    font-size: 8px;
  }

  .topbar-theme-icon {
    font-size: 11px !important;
  }
}
/* =========================
   STYLISH THEME TOGGLE
========================= */

.topbar-theme-icon{
  position:absolute !important;
  top:20px !important;
  right:20px !important;

  width:42px !important;
  height:42px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border:1px solid var(--line) !important;
  border-radius:12px !important;

  background:var(--panel2) !important;
  color:var(--text) !important;

  font-size:18px !important;
  line-height:1 !important;

  cursor:pointer !important;

  box-shadow:0 6px 18px rgba(0,0,0,.12) !important;

  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .2s ease,
    box-shadow .25s ease !important;

  z-index:10;
}

.topbar-theme-icon:hover{
  transform:translateY(-2px) scale(1.04) !important;
  border-color:var(--text) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.18) !important;
}

.topbar-theme-icon:active{
  transform:scale(.94) !important;
}


/* LIGHT MODE */
body.light .topbar-theme-icon{
  background:#f4f4f4 !important;
  color:#111 !important;
  border-color:#d8d8d8 !important;
}


/* MOBILE */
@media(max-width:680px){

  .topbar-theme-icon{
    top:14px !important;
    right:14px !important;

    width:36px !important;
    height:36px !important;

    border-radius:10px !important;
    font-size:16px !important;
  }

  .topbar-card #pageTitle{
    padding-left:38px;
    padding-right:38px;
  }
}
/* =========================
   TOPBAR MENU + THEME BUTTONS
========================= */

.topbar{
  position:relative !important;
}

/* MENU BUTTON - TOP LEFT */
.mobile-menu{
  position:absolute !important;
  left:0 !important;
  top:20px !important;
  transform:none !important;

  width:42px !important;
  height:42px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border:1px solid var(--line) !important;
  border-radius:12px !important;

  background:var(--panel) !important;
  color:var(--text) !important;

  font-size:18px !important;
  line-height:1 !important;

  cursor:pointer !important;

  box-shadow:0 6px 18px rgba(0,0,0,.12) !important;

  transition:.2s ease !important;
}

/* THEME BUTTON - TOP RIGHT */
.topbar-theme-icon{
  position:absolute !important;
  top:20px !important;
  right:20px !important;

  width:42px !important;
  height:42px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border:1px solid var(--line) !important;
  border-radius:12px !important;

  background:var(--panel2) !important;
  color:var(--text) !important;

  font-size:18px !important;
  line-height:1 !important;

  cursor:pointer !important;

  box-shadow:0 6px 18px rgba(0,0,0,.12) !important;

  transition:.2s ease !important;
}

/* HOVER */
.mobile-menu:hover,
.topbar-theme-icon:hover{
  transform:translateY(-2px) !important;
  border-color:var(--text) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.18) !important;
}

/* CLICK */
.mobile-menu:active,
.topbar-theme-icon:active{
  transform:scale(.94) !important;
}


/* =========================
   MOBILE
========================= */

@media(max-width:680px){

  .mobile-menu{
    left:0 !important;
    top:14px !important;

    width:36px !important;
    height:36px !important;

    border-radius:10px !important;
    font-size:16px !important;
  }

  .topbar-theme-icon{
    top:14px !important;
    right:14px !important;

    width:36px !important;
    height:36px !important;

    border-radius:10px !important;
    font-size:16px !important;
  }

  .topbar-card #pageTitle{
    padding-left:42px !important;
    padding-right:42px !important;
  }
}
/* ==========================================
   MENU BUTTON — MOBILE ONLY
   ========================================== */

/* Desktop */
.mobile-menu {
  display: none !important;
}

/* Mobile / Tablet */
@media (max-width: 680px) {
  .mobile-menu {
    display: block !important;
  }
}
/* ==========================================
   GOAL LINKED TASK SYSTEM
   ========================================== */

#goalWrap,
#goalTargetWrap {
  width: 100%;
}


#itemGoal,
#itemGoalTarget {
  display: block;
  width: 100%;
  margin-top: 6px;

  padding: 11px;

  background: #181818;

  border: 1px solid #333;

  border-radius: 7px;

  color: #eee;

  outline: none;
}


#itemGoal:focus,
#itemGoalTarget:focus {
  border-color: #777;
}


/* Goal mini task list */

.goal-task-list {
  margin-top: 15px;

  padding-top: 12px;

  border-top: 1px solid var(--line);

  display: grid;

  gap: 7px;
}


.goal-task-mini {
  display: flex;

  align-items: center;

  gap: 8px;

  color: var(--muted);

  font-size: 9px;
}


.goal-task-check {
  width: 16px;
  height: 16px;

  border-radius: 4px;

  border: 1px solid #555;

  display: grid;

  place-items: center;

  flex-shrink: 0;

  font-size: 9px;
}


.goal-task-check.done {
  background: #eee;

  color: #111;

  border-color: #eee;
}


/* Goal task count */

.goal-meta {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 10px;
}


/* Mobile */

@media (max-width: 680px) {

  .goal-task-list {
    margin-top: 12px;
  }

  .goal-task-mini {
    font-size: 8px;
  }

}
/* =========================================================
   WINTER ARC - FINAL RESPONSIVE / STABLE LAYOUT
   Desktop + Mobile
   No zoom
   No horizontal movement
   No page sliding
   ========================================================= */


/* ---------- GLOBAL STABILITY ---------- */

html {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

body {
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  touch-action: pan-y;
}

* {
  max-width: 100%;
}

.app-shell {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.main {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.page {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  transform: none !important;
  transition: none !important;
}


/* ---------- NO HORIZONTAL SCROLL ---------- */

.topbar,
.topbar-card,
.card,
.stat,
.goal,
.task-row,
.history-item,
.settings-list,
.section-head,
.two-col,
.stats-grid,
.quick-grid,
.calendar,
.calendar-controls {
  max-width: 100%;
  min-width: 0;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 681px) {

  /* Desktop mein menu button NEVER show */

  .mobile-menu {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Desktop sidebar fixed rahe */

  .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: 245px !important;
  }

  .main {
    margin-left: 245px !important;
    width: calc(100% - 245px) !important;
  }

  /* Page change par koi slide animation nahi */

  .page,
  .page.active {
    transform: none !important;
    animation: none !important;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

  html,
  body {
    width: 100%;
    min-width: 320px;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .app-shell {
    width: 100%;
    min-width: 320px;
    overflow-x: hidden !important;
  }


  /* ---------- MOBILE SIDEBAR ---------- */

  .sidebar {
    width: 245px !important;
    max-width: 82vw !important;

    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;

    transform: translateX(-100%) !important;

    transition:
      transform 0.2s ease !important;

    z-index: 1000 !important;
  }

  .sidebar.open {
    transform: translateX(0) !important;
  }


  /* ---------- MOBILE MENU ---------- */

  .mobile-menu {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;

    position: absolute !important;

    left: 10px !important;
    top: 14px !important;

    width: 36px !important;
    height: 36px !important;

    margin: 0 !important;
    padding: 0 !important;

    align-items: center !important;
    justify-content: center !important;

    transform: none !important;

    border-radius: 10px !important;

    font-size: 16px !important;

    z-index: 10 !important;
  }

  .mobile-menu:hover {
    transform: none !important;
  }

  .mobile-menu:active {
    transform: none !important;
  }


  /* ---------- MAIN ---------- */

  .main {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;

    padding:
      14px
      14px
      30px !important;

    overflow-x: hidden !important;
  }


  /* ---------- TOPBAR ---------- */

  .topbar {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 16px !important;

    padding: 0 !important;

    overflow: visible !important;

    position: relative !important;
  }

  .topbar-card {
    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding:
      52px
      14px
      14px !important;

    border-radius: 14px !important;

    overflow: hidden !important;
  }


  /* ---------- TITLE ---------- */

  .topbar-card #pageTitle {
    width: 100% !important;

    padding:
      0 36px !important;

    margin: 0 !important;

    font-size: 18px !important;

    line-height: 1.25 !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    text-align: center !important;
  }


  /* ---------- THEME BUTTON ---------- */

  .topbar-theme-icon {
    position: absolute !important;

    top: 14px !important;
    right: 10px !important;

    width: 36px !important;
    height: 36px !important;

    transform: none !important;
  }

  .topbar-theme-icon:hover {
    transform: none !important;
  }

  .topbar-theme-icon:active {
    transform: none !important;
  }


  /* ---------- LIVE AREA ---------- */

  .top-live {
    width: 100% !important;

    min-width: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 16px !important;
  }

  .top-live-left,
  .top-live-progress {
    width: 100% !important;
    min-width: 0 !important;
  }

  .top-live-left {
    text-align: center !important;
  }

  .top-live-left h2 {
    font-size: 34px !important;

    white-space: nowrap !important;
  }


  /* ---------- STATS ---------- */

  .stats-grid,
  .stats-grid.four {
    width: 100% !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 8px !important;
  }

  .stat {
    min-width: 0 !important;

    padding: 12px !important;

    overflow: hidden !important;
  }

  .stat strong {
    font-size: 20px !important;

    white-space: nowrap !important;
  }


  /* ---------- TWO COLUMN ---------- */

  .two-col {
    width: 100% !important;

    grid-template-columns: 1fr !important;

    min-width: 0 !important;
  }


  /* ---------- QUICK BUTTONS ---------- */

  .quick-grid {
    width: 100% !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 8px !important;
  }

  .quick {
    min-width: 0 !important;

    overflow: hidden !important;
  }


  /* ---------- SECTION HEADER ---------- */

  .section-head {
    width: 100% !important;

    min-width: 0 !important;

    gap: 10px !important;
  }

  .section-head h2 {
    font-size: 22px !important;

    white-space: nowrap !important;
  }


  /* ---------- TASKS ---------- */

  .task-row {
    width: 100% !important;

    min-width: 0 !important;

    overflow: hidden !important;
  }

  .task-info {
    min-width: 0 !important;
  }

  .task-info b,
  .task-info small {
    max-width: 100% !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;
  }


  /* ---------- GOALS ---------- */

  .goal {
    width: 100% !important;

    min-width: 0 !important;

    overflow: hidden !important;
  }

  .goal-top {
    min-width: 0 !important;
  }

  .goal-main {
    min-width: 0 !important;
  }

  .goal-main h3,
  .goal-main p {
    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;
  }


  /* ---------- CALENDAR ---------- */

  .calendar {
    width: 100% !important;

    min-width: 0 !important;

    gap: 3px !important;
  }

  .day {
    min-width: 0 !important;

    min-height: 54px !important;

    overflow: hidden !important;
  }


  /* ---------- MODAL ---------- */

  .modal-backdrop {
    width: 100% !important;

    padding: 14px !important;

    overflow: hidden !important;
  }

  .modal {
    width: 100% !important;

    max-width: 430px !important;

    max-height: 90vh !important;

    overflow-y: auto !important;

    overflow-x: hidden !important;
  }


  /* ---------- NO PAGE MOVEMENT ---------- */

  .page,
  .page.active {
    position: relative !important;

    left: auto !important;
    right: auto !important;

    transform: none !important;

    animation: none !important;

    transition: none !important;
  }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

  .main {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .topbar-card {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .topbar-card #pageTitle {
    padding-left: 30px !important;
    padding-right: 30px !important;
    font-size: 16px !important;
  }

  .top-live-left h2 {
    font-size: 30px !important;
  }

  .stat {
    padding: 10px !important;
  }

  .stat strong {
    font-size: 18px !important;
  }
}
/* ==========================================
   LOGOUT BUTTON
   ========================================== */

.logout-setting {
  border-color: #444 !important;
  color: var(--text) !important;
  cursor: pointer !important;
}

.logout-setting:hover {
  border-color: #777 !important;
  background: var(--panel2) !important;
}

.logout-setting b {
  color: var(--text) !important;
}

.logout-setting small {
  color: var(--muted) !important;
}
/* =========================================================
   WINTER ARC — APP LOCK / NO ZOOM / NO PAGE MOVEMENT
   FINAL FORCE OVERRIDES
   ========================================================= */

/* ---------- VIEWPORT / ROOT ---------- */

html {
  width: 100% !important;
  min-width: 320px !important;
  max-width: 100% !important;

  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;

  overscroll-behavior: none !important;
  overscroll-behavior-x: none !important;

  touch-action: pan-y !important;
}


/* ---------- BODY ---------- */

body {
  width: 100% !important;
  min-width: 320px !important;
  max-width: 100% !important;

  height: 100% !important;
  min-height: 100dvh !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  position: fixed !important;
  inset: 0 !important;

  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;

  overscroll-behavior: none !important;
  overscroll-behavior-x: none !important;

  touch-action: pan-y !important;
}


/* ---------- APP SHELL ---------- */

.app-shell {
  position: fixed !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 320px !important;
  max-width: 100% !important;

  display: flex !important;

  overflow: hidden !important;

  transform: none !important;
}


/* =========================================================
   SIDEBAR — FIXED
   ========================================================= */

.sidebar {
  position: fixed !important;

  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;

  height: 100dvh !important;

  flex: none !important;

  z-index: 1000 !important;

  transform: none !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  overscroll-behavior: contain !important;
}


/* =========================================================
   MAIN APP AREA — ONLY THIS SCROLLS
   ========================================================= */

.main {
  position: relative !important;

  height: 100dvh !important;

  min-height: 0 !important;
  min-width: 0 !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  overscroll-behavior-x: none !important;
  overscroll-behavior-y: contain !important;

  transform: none !important;

  scroll-behavior: auto !important;
}


/* =========================================================
   PAGES — NO SLIDE / NO MOVEMENT
   ========================================================= */

.page,
.page.active {
  position: relative !important;

  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;

  transform: none !important;

  animation: none !important;

  transition: none !important;

  translate: none !important;

  width: 100% !important;

  min-width: 0 !important;
  max-width: 100% !important;

  overflow-x: hidden !important;
}


/* When hidden */

.page:not(.active) {
  transform: none !important;
  animation: none !important;
}


/* =========================================================
   TOPBAR — FIXED IN LAYOUT, NO SHIFT
   ========================================================= */

.topbar {
  position: relative !important;

  width: 100% !important;

  min-width: 0 !important;
  max-width: 100% !important;

  transform: none !important;

  animation: none !important;
  transition: none !important;
}


/* =========================================================
   CARDS / SECTIONS NEVER PUSH SCREEN SIDEWAYS
   ========================================================= */

.topbar-card,
.card,
.stat,
.goal,
.task-row,
.history-item,
.setting,
.quick,
.section-head,
.stats-grid,
.two-col,
.quick-grid,
.calendar,
.line-chart,
.goal-list,
.task-page-list,
.history-list,
.settings-list,
.analytics-list {
  min-width: 0 !important;
  max-width: 100% !important;

  transform: none !important;
}


/* =========================================================
   TEXT — DON'T CREATE HORIZONTAL OVERFLOW
   ========================================================= */

h1,
h2,
h3,
h4,
p,
span,
small,
b,
strong,
button {
  max-width: 100% !important;
}


/* =========================================================
   DESKTOP — 681px AND ABOVE
   ========================================================= */

@media (min-width: 681px) {

  /* MENU COMPLETELY OFF */

  .mobile-menu {
    display: none !important;

    visibility: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;

    position: fixed !important;

    width: 0 !important;
    height: 0 !important;

    overflow: hidden !important;
  }


  /* SIDEBAR STAYS */

  .sidebar {
    width: 245px !important;

    transform: translateX(0) !important;

    transition: none !important;
  }


  /* MAIN BESIDE SIDEBAR */

  .main {
    margin-left: 245px !important;

    width: calc(100% - 245px) !important;

    max-width: none !important;
  }


  /* NO PAGE MOVEMENT */

  .page {
    transform: none !important;

    animation: none !important;

    transition: none !important;
  }

}


/* =========================================================
   MOBILE — 680px AND BELOW
   ========================================================= */

@media (max-width: 680px) {

  html {
    width: 100vw !important;
    height: 100dvh !important;

    overflow: hidden !important;

    touch-action: pan-y !important;
  }


  body {
    width: 100vw !important;
    height: 100dvh !important;

    overflow: hidden !important;

    position: fixed !important;

    inset: 0 !important;

    touch-action: pan-y !important;
  }


  .app-shell {
    width: 100vw !important;

    height: 100dvh !important;

    overflow: hidden !important;
  }


  /* ---------- SIDEBAR ---------- */

  .sidebar {
    width: 245px !important;

    max-width: 82vw !important;

    left: 0 !important;

    top: 0 !important;

    bottom: 0 !important;

    height: 100dvh !important;

    transform: translateX(-110%) !important;

    transition:
      transform .22s ease !important;

    overflow-x: hidden !important;

    overflow-y: auto !important;

    box-shadow:
      12px 0 35px rgba(0,0,0,.28) !important;
  }


  .sidebar.open {
    transform: translateX(0) !important;
  }


  /* ---------- MOBILE MENU ONLY ---------- */

  .mobile-menu {
    display: flex !important;

    visibility: visible !important;

    opacity: 1 !important;

    pointer-events: auto !important;

    position: absolute !important;

    left: 10px !important;

    top: 14px !important;

    width: 36px !important;

    height: 36px !important;

    margin: 0 !important;

    padding: 0 !important;

    align-items: center !important;

    justify-content: center !important;

    transform: none !important;

    transition: none !important;

    z-index: 20 !important;
  }


  .mobile-menu:hover {
    transform: none !important;
  }

  .mobile-menu:active {
    transform: none !important;
  }


  /* ---------- MAIN ---------- */

  .main {
    width: 100vw !important;

    max-width: 100vw !important;

    min-width: 0 !important;

    height: 100dvh !important;

    margin-left: 0 !important;

    padding:
      14px
      12px
      30px !important;

    overflow-x: hidden !important;

    overflow-y: auto !important;

    transform: none !important;
  }


  /* ---------- TOP CARD ---------- */

  .topbar {
    width: 100% !important;

    max-width: 100% !important;

    margin: 0 0 15px !important;

    padding: 0 !important;

    transform: none !important;

    overflow: visible !important;
  }


  .topbar-card {
    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;

    transform: none !important;
  }


  /* ---------- TITLE ---------- */

  .topbar-card #pageTitle {
    width: 100% !important;

    max-width: 100% !important;

    padding-left: 42px !important;

    padding-right: 42px !important;

    margin: 0 !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    text-align: center !important;

    transform: none !important;
  }


  /* ---------- THEME ---------- */

  .topbar-theme-icon {
    position: absolute !important;

    top: 14px !important;

    right: 10px !important;

    width: 36px !important;

    height: 36px !important;

    transform: none !important;
  }


  .topbar-theme-icon:hover {
    transform: none !important;
  }

  .topbar-theme-icon:active {
    transform: none !important;
  }


  /* ---------- GRID ---------- */

  .stats-grid {
    width: 100% !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 8px !important;

    transform: none !important;
  }


  .two-col {
    width: 100% !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 10px !important;
  }


  .quick-grid {
    width: 100% !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 8px !important;
  }


  /* ---------- CARDS ---------- */

  .card,
  .stat,
  .goal,
  .history-item,
  .task-row,
  .setting,
  .quick {
    width: 100% !important;

    min-width: 0 !important;

    max-width: 100% !important;

    overflow: hidden !important;

    transform: none !important;
  }


  /* ---------- TASK TEXT ---------- */

  .task-info {
    min-width: 0 !important;

    max-width: 100% !important;
  }


  .task-info b,
  .task-info small {
    display: block !important;

    max-width: 100% !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;
  }


  /* ---------- GOAL TEXT ---------- */

  .goal-main {
    min-width: 0 !important;

    max-width: 100% !important;
  }


  .goal-main h3,
  .goal-main p {
    max-width: 100% !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;
  }


  /* ---------- CALENDAR ---------- */

  .calendar {
    width: 100% !important;

    max-width: 100% !important;

    grid-template-columns:
      repeat(7, minmax(0, 1fr)) !important;

    min-width: 0 !important;

    overflow: hidden !important;
  }


  .day {
    min-width: 0 !important;

    width: 100% !important;

    overflow: hidden !important;
  }


  /* ---------- MODAL ---------- */

  .modal-backdrop {
    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;

    height: 100dvh !important;

    padding: 12px !important;

    overflow: hidden !important;
  }


  .modal {
    width: 100% !important;

    max-width: 430px !important;

    max-height: 90dvh !important;

    overflow-x: hidden !important;

    overflow-y: auto !important;

    transform: none !important;
  }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

  .main {
    padding-left: 9px !important;

    padding-right: 9px !important;
  }


  .topbar-card {
    padding-left: 9px !important;

    padding-right: 9px !important;
  }


  .topbar-card #pageTitle {
    padding-left: 34px !important;

    padding-right: 34px !important;

    font-size: 16px !important;
  }


  .stats-grid,
  .quick-grid {
    gap: 6px !important;
  }

}


/* =========================================================
   KILL ALL COMMON SLIDE / ZOOM ANIMATIONS
   ========================================================= */

.page,
.sidebar,
.main,
.topbar,
.topbar-card,
.card,
.stat,
.goal,
.task-row,
.history-item,
.modal,
.mobile-menu,
.topbar-theme-icon {
  animation-duration: 0s !important;

  animation-delay: 0s !important;

  transition-property:
    opacity,
    visibility !important;
}


/* Sidebar needs only its open/close movement */
@media (max-width: 680px) {

  .sidebar {
    transition:
      transform .22s ease !important;
  }

}


/* =========================================================
   ABSOLUTELY NO HORIZONTAL PAGE MOVEMENT
   ========================================================= */

body::-webkit-scrollbar,
html::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.main::-webkit-scrollbar {
  width: 5px !important;
}

.main::-webkit-scrollbar-horizontal {
  display: none !important;
}


/* =========================================================
   PREVENT IMAGE / MEDIA FROM PUSHING LAYOUT
   ========================================================= */

img,
video,
canvas,
svg {
  max-width: 100% !important;

  height: auto !important;
}


/* =========================================================
   NO TEXT AUTO RESIZE
   ========================================================= */

input,
button,
select,
textarea {
  font: inherit !important;

  -webkit-text-size-adjust: 100% !important;
}


/* =========================================================
   KEEP UI STATIC
   ========================================================= */

* {
  scroll-margin: 0 !important;
}