/* ============================================================
   SamGenie EduShelf — Redesign v3 (mockup-faithful mobile UI)
   Additive layer loaded AFTER style.css + redesign-v2.css.
   Mobile-first. Rebuilds the look to match the approved mockups:
   greeting header, 5-tab nav, dashboard cards, profile menu,
   practice/explore hubs, bottom-sheet payments.
   ============================================================ */

:root{
  --v3-violet:#6A1FB5; --v3-violet2:#8B3CE0; --v3-deep:#4E1190;
  --v3-orange:#FF7A29; --v3-orange2:#F76B12;
  --v3-bg:#EEF1F8; --v3-card:#FFFFFF; --v3-ink:#17171F; --v3-muted:#7C7E90;
  --v3-border:#ECECF4;
  --v3-grad:linear-gradient(135deg,#7D35E0 0%,#6A1FB5 52%,#56149C 100%);
  --v3-grad-gold:linear-gradient(135deg,#FF9248 0%,#F76B12 100%);
  --v3-shadow:0 10px 30px -12px rgba(35,20,70,.18);
  --v3-shadow-sm:0 4px 14px -6px rgba(35,20,70,.12);
}

/* ---------- Exam Hub + Personal Study Planner ---------- */
.sg-examhub-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--v3-grad);color:#fff;border-radius:22px;padding:20px;margin:8px 0 18px;box-shadow:var(--v3-shadow);overflow:hidden;}
.sg-examhub-kicker,.sg-planner-kicker{display:block;font-size:9px;letter-spacing:.11em;font-weight:900;opacity:.78;margin-bottom:7px;}
.sg-examhub-hero h2{font-size:22px;margin:0 0 6px;letter-spacing:-.02em;}
.sg-examhub-hero p{font-size:12px;line-height:1.5;opacity:.86;margin:0;max-width:260px;}
.sg-examhub-hero-icon{width:60px;height:60px;border-radius:20px;background:rgba(255,255,255,.17);display:grid;place-items:center;font-size:30px;flex:none;}
.sg-examhub-exams{display:grid;gap:10px;}
.sg-exam-card,.sg-hub-tool{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border:1px solid var(--v3-border);background:#fff;border-radius:17px;padding:13px 14px;cursor:pointer;box-shadow:var(--v3-shadow-sm);font-family:inherit;color:var(--v3-ink);}
.sg-exam-card:hover,.sg-hub-tool:hover{border-color:#d8b9e8;transform:translateY(-1px);}
.sg-exam-card-icon,.sg-hub-tool-icon{width:43px;height:43px;border-radius:13px;display:grid;place-items:center;font-size:21px;flex:none;background:#fff0d7;}
.sg-exam-card.blue .sg-exam-card-icon{background:#e7f2ff;}.sg-exam-card.green .sg-exam-card-icon{background:#e5f7ed;}.sg-exam-card.pink .sg-exam-card-icon{background:#fdeaf2;}
.sg-exam-card-copy,.sg-hub-tool span:nth-child(2){display:grid;gap:3px;min-width:0;flex:1;}
.sg-exam-card-copy b,.sg-hub-tool b{font-size:14px;}.sg-exam-card-copy small,.sg-hub-tool small{font-size:11px;color:var(--v3-muted);line-height:1.35;}
.sg-exam-card-arrow{font-size:23px;color:var(--v3-violet);font-weight:400;}
.sg-examhub-tools{display:grid;gap:9px;}
.sg-hub-tool-icon{background:#f4eafb;color:var(--v3-violet);font-size:18px;}
.sg-examhub-note,.sg-planner-note{background:#fff8e8;border:1px solid #f4dfaa;color:#805d17;border-radius:14px;padding:11px 13px;font-size:11px;line-height:1.5;margin-top:15px;}
.sg-planner-intro{display:flex;align-items:center;gap:12px;background:var(--v3-grad);color:#fff;border-radius:22px;padding:18px;margin:8px 0 18px;box-shadow:var(--v3-shadow);}
.sg-planner-intro-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:rgba(255,255,255,.18);font-size:24px;flex:none;}
.sg-planner-intro h2{font-size:20px;margin:0 0 5px;}.sg-planner-intro p{font-size:12px;line-height:1.45;opacity:.86;margin:0;}
.sg-planner-setup{background:#fff;border:1px solid var(--v3-border);border-radius:20px;padding:17px;box-shadow:var(--v3-shadow-sm);}
.sg-planner-label{display:block;color:var(--v3-muted);font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;margin:3px 0 7px;}
.sg-planner-select{width:100%;height:43px;border:1px solid var(--v3-border);border-radius:11px;padding:0 11px;background:#fff;color:var(--v3-ink);font:inherit;font-size:13px;margin-bottom:15px;}
.sg-planner-subject-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;}.sg-planner-subject-heading > span:last-child{font-size:10px;color:var(--v3-violet);font-weight:900;margin-bottom:7px;white-space:nowrap;}.sg-planner-help{font-size:11px;color:var(--v3-muted);line-height:1.45;margin:-2px 0 9px;}.sg-planner-subjects{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:8px;max-height:355px;overflow:auto;padding-right:2px;}.sg-planner-subject{display:flex;align-items:center;gap:7px;background:#fbf9fd;border:1px solid #eee6f3;border-radius:10px;padding:9px;font-size:11px;color:var(--v3-ink);cursor:pointer;}.sg-planner-subject input{accent-color:var(--v3-violet);}.sg-planner-subject:has(input:checked){background:#f4eafb;border-color:#d8b9e8;font-weight:800;}.sg-planner-subject input:disabled{opacity:.35;}.sg-planner-start-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 6px;}.sg-planner-start-option{display:flex;align-items:center;gap:8px;border:1px solid var(--v3-border);border-radius:12px;padding:10px;background:#fff;cursor:pointer;}.sg-planner-start-option:has(input:checked){background:#f4eafb;border-color:#cda8df;}.sg-planner-start-option input{accent-color:var(--v3-violet);}.sg-planner-start-option span{display:grid;gap:3px;}.sg-planner-start-option b{font-size:11px;}.sg-planner-start-option small{font-size:9px;color:var(--v3-muted);}.sg-planner-empty{grid-column:1/-1;background:#fbf9fd;border:1px dashed #d8c4e4;border-radius:11px;padding:12px;text-align:center;color:var(--v3-muted);font-size:11px;line-height:1.45;}.sg-planner-status{font-size:11px;color:var(--v3-violet);margin-top:9px;min-height:15px;}.sg-planner-status.error{color:#b42318;}
.sg-planner-running{font-size:10px;color:#fff;background:rgba(255,255,255,.14);border-radius:9px;padding:7px 9px;margin-top:11px;}.sg-planner-task.today{border-color:#d4b3e4;}.sg-planner-task.incomplete{background:#fff8f8;border-color:#f2caca;}.sg-planner-task.upcoming{opacity:.75;}.sg-planner-task button:disabled{opacity:.45;cursor:not-allowed;}.sg-planner-task-copy small{line-height:1.35;}
.sg-planner-modal{position:fixed;inset:0;z-index:22000;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(33,15,46,.58);backdrop-filter:blur(3px);}.sg-planner-modal.open{display:flex;}.sg-planner-modal-card{width:min(390px,100%);background:#fff;border-radius:22px;padding:24px 20px 20px;box-shadow:0 26px 70px rgba(31,12,44,.35);position:relative;text-align:center;}.sg-planner-modal-close{position:absolute;right:12px;top:10px;width:32px;height:32px;border:0;border-radius:9px;background:#f7f2fa;color:#6a1fb5;font-size:22px;line-height:1;cursor:pointer;}.sg-planner-modal-icon{width:54px;height:54px;margin:2px auto 13px;border-radius:17px;display:grid;place-items:center;background:#fff0d8;color:#9b5e04;font-size:28px;font-weight:900;}.sg-planner-modal-card h2{font-size:20px;color:var(--v3-ink);margin:0 0 8px;}.sg-planner-modal-card p{font-size:12px;color:var(--v3-muted);line-height:1.6;margin:0 auto;max-width:310px;}.sg-planner-modal-actions{display:flex;gap:8px;margin-top:20px;}.sg-planner-modal-actions button{flex:1;margin:0;}
.sg-planner-summary{background:var(--v3-grad);color:#fff;border-radius:20px;padding:17px;box-shadow:var(--v3-shadow);}
.sg-planner-summary-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}.sg-planner-summary h3{font-size:20px;margin:3px 0 5px;}.sg-planner-summary p{font-size:11px;opacity:.82;margin:0;}.sg-planner-edit{border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff;border-radius:9px;padding:7px 9px;font:inherit;font-size:10px;font-weight:800;cursor:pointer;white-space:nowrap;}
.sg-planner-progress-row{display:flex;justify-content:space-between;gap:10px;font-size:11px;margin-top:17px;}.sg-planner-progress{height:7px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden;margin-top:7px;}.sg-planner-progress i{display:block;height:100%;background:#f0bc4f;border-radius:99px;transition:width .25s;}
.sg-planner-tasks{display:grid;gap:8px;}.sg-planner-task{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--v3-border);border-radius:15px;padding:10px;box-shadow:var(--v3-shadow-sm);}.sg-planner-task.done{background:#f4fbf7;border-color:#cdebdc;}.sg-planner-check{width:30px;height:30px;border-radius:10px;border:0;background:#f4eafb;color:var(--v3-violet);font-weight:900;cursor:pointer;flex:none;}.sg-planner-task.done .sg-planner-check{background:#16a36b;color:#fff;}.sg-planner-task-copy{display:grid;gap:4px;min-width:0;flex:1;}.sg-planner-task-copy b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.sg-planner-task-copy small{font-size:10px;color:var(--v3-muted);}.sg-planner-start{border:0;background:#f4eafb;color:var(--v3-violet);border-radius:8px;padding:7px 8px;font:inherit;font-size:10px;font-weight:800;cursor:pointer;flex:none;}

/* ---------- Base canvas ---------- */
@media (max-width:980px){
  body{ background:var(--v3-bg); }
  .app{ padding-top:0 !important; background:var(--v3-bg); }
  .content{
    padding:14px 16px 120px !important;
    background:var(--v3-bg);
  }
  /* Hide the legacy desktop topbar on mobile; greeting header replaces it */
  .topbar{ display:none !important; }

  /* Brand ribbon tab (former design) — small centered hanging tab on every page */
  .top-center-brand{
    display:block !important;
    position:fixed; top:0; left:50%; transform:translateX(-50%);
    width:auto; max-width:calc(100vw - 24px); height:auto;
    margin:0; padding:6px 18px;
    border-radius:0 0 14px 14px;
    background:var(--v3-grad); color:#fff;
    font-family:'Fraunces',Georgia,'Times New Roman',serif;
    font-weight:600; font-size:13px; letter-spacing:.06em; line-height:1.2;
    text-align:center; white-space:nowrap; z-index:100;
    box-shadow:0 8px 22px -8px rgba(90,20,160,.6);
    opacity:1 !important; pointer-events:none; overflow:hidden; text-overflow:ellipsis;
  }
  .app{ padding-top:40px !important; }
  /* Screens that carried an inline display:none must still show when active */
  .screen{ display:none !important; }
  .screen.active{ display:block !important; }
}

/* ---------- Greeting header (injected by redesign-shell.js) ---------- */
.sg-greet{
  display:flex; align-items:center; gap:14px;
  background:var(--v3-grad); color:#fff;
  border-radius:24px; padding:18px 18px;
  margin-bottom:18px; position:relative; overflow:hidden;
  box-shadow:0 18px 40px -18px rgba(90,20,160,.6);
}
.sg-greet::after{
  content:''; position:absolute; right:-40px; top:-60px; width:180px; height:180px;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%); border-radius:50%;
}
.sg-greet-av{
  width:56px; height:56px; border-radius:18px; flex-shrink:0;
  background:rgba(255,255,255,.22); border:1.5px solid rgba(255,255,255,.35);
  display:grid; place-items:center; font-weight:800; font-size:22px; color:#fff;
  cursor:pointer;
}
.sg-greet-txt{ flex:1; min-width:0; position:relative; z-index:1; }
.sg-greet-hi{ font-size:13px; opacity:.85; font-weight:600; }
.sg-greet-name{ font-size:19px; font-weight:800; line-height:1.2; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sg-greet-bell{
  position:relative; z-index:1; width:46px; height:46px; border-radius:15px;
  background:rgba(255,255,255,.18); border:1.5px solid rgba(255,255,255,.28);
  display:grid; place-items:center; cursor:pointer; color:#fff; flex-shrink:0;
}
.sg-greet-bell .dot{
  position:absolute; top:7px; right:9px; min-width:16px; height:16px; padding:0 4px;
  background:var(--v3-orange); border:2px solid #fff; border-radius:99px;
  font-size:9px; font-weight:800; display:grid; place-items:center; color:#fff;
}

/* ---------- Section headings ---------- */
.sg-sec{ display:flex; align-items:center; justify-content:space-between; margin:22px 2px 12px; }
.sg-sec h2{ font-size:19px; font-weight:800; color:var(--v3-ink); letter-spacing:-.01em; }
.sg-sec .sg-link{ font-size:13px; font-weight:700; color:var(--v3-violet); cursor:pointer; }

/* ---------- Generic mockup card + list rows ---------- */
.sg-card{
  background:var(--v3-card); border-radius:20px; padding:16px;
  box-shadow:var(--v3-shadow-sm); border:1px solid var(--v3-border);
}
.sg-row{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--v3-card); border:1px solid var(--v3-border);
  border-radius:20px; padding:15px 16px; margin-bottom:12px; cursor:pointer;
  box-shadow:var(--v3-shadow-sm); transition:.15s;
}
.sg-row:active{ transform:scale(.99); }
.sg-ico{
  width:52px; height:52px; border-radius:16px; flex-shrink:0;
  display:grid; place-items:center; font-size:24px;
}
.sg-ico.v{ background:#F0E7FB; } .sg-ico.o{ background:#FFEBDD; }
.sg-ico.g{ background:#E2F6EC; } .sg-ico.b{ background:#E4EEFD; }
.sg-ico.r{ background:#FDE7EC; } .sg-ico.y{ background:#FFF4D6; }
.sg-row-main{ flex:1; min-width:0; }
.sg-row-main b{ font-size:16px; font-weight:800; color:var(--v3-ink); display:block; }
.sg-row-main small{ font-size:12.5px; color:var(--v3-muted); display:block; margin-top:3px; line-height:1.35; }
.sg-row .chev{ color:#B9BBC9; font-size:20px; flex-shrink:0; }
.sg-row .trail{ flex-shrink:0; font-size:13px; font-weight:800; color:var(--v3-muted); }

/* status pills */
.sg-pill{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800;
  padding:5px 11px; border-radius:99px; }
.sg-pill.green{ background:#E2F6EC; color:#157F4E; }
.sg-pill.orange{ background:#FFEBDD; color:#C8510F; }
.sg-pill.red{ background:#FDE7EC; color:#C4283E; }
.sg-pill.violet{ background:#F0E7FB; color:var(--v3-violet); }
.sg-pill.grey{ background:#F1F2F7; color:var(--v3-muted); }

/* progress bar */
.sg-bar{ height:8px; border-radius:99px; background:#ECECF4; margin-top:10px; overflow:hidden; }
.sg-bar > i{ display:block; height:100%; border-radius:99px; background:var(--v3-grad); }
.sg-bar.g > i{ background:linear-gradient(90deg,#2BCB84,#159E63); }
.sg-bar.o > i{ background:var(--v3-grad-gold); }

/* ---------- Buttons ---------- */
@media (max-width:980px){
  .btn{ border-radius:16px !important; font-weight:800; }
  .btn-dark, .btn-orange.sg-primary{ background:var(--v3-grad) !important; color:#fff !important;
    box-shadow:0 14px 28px -12px rgba(106,31,181,.6) !important; }
  .sg-btn-pay{ background:var(--v3-grad-gold) !important; color:#fff !important;
    box-shadow:0 14px 28px -12px rgba(247,107,18,.55) !important; }
}
.sg-btn-block{ width:100%; padding:15px; font-size:15px; border-radius:16px; border:0; font-weight:800;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
.sg-btn-primary{ background:var(--v3-grad); color:#fff; box-shadow:0 14px 28px -12px rgba(106,31,181,.6); }
.sg-btn-gold{ background:var(--v3-grad-gold); color:#fff; box-shadow:0 14px 28px -12px rgba(247,107,18,.55); }
.sg-btn-ghost{ background:#fff; color:var(--v3-violet); border:1.5px solid var(--v3-border); }
.sg-btn-wa{ background:#25D366; color:#fff; }

/* ---------- Filter chips (All / Unlocked / Locked etc.) ---------- */
.sg-chips{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin:4px 0 14px; }
.sg-chips::-webkit-scrollbar{ display:none; }
.sg-chip{
  flex-shrink:0; border:0; cursor:pointer; font-weight:800; font-size:13px;
  padding:9px 18px; border-radius:99px; background:#fff; color:var(--v3-muted);
  border:1.5px solid var(--v3-border);
}
.sg-chip.active{ background:var(--v3-violet); color:#fff; border-color:var(--v3-violet); }

/* ---------- Search field (explore) ---------- */
.sg-search{
  display:flex; align-items:center; gap:10px; background:#fff;
  border:1.5px solid var(--v3-border); border-radius:18px; padding:8px 8px 8px 16px;
  box-shadow:var(--v3-shadow-sm); margin-bottom:6px;
}
.sg-search input{ flex:1; border:0; outline:none; font-size:15px; background:transparent; color:var(--v3-ink); }
.sg-search button{ border:0; background:#F0E7FB; color:var(--v3-violet); font-weight:800;
  padding:10px 18px; border-radius:13px; cursor:pointer; font-size:14px; }

/* ---------- Bottom nav (5-tab mockup) ---------- */
@media (max-width:980px){
  .bottom-nav{
    bottom:14px; width:calc(100% - 24px); max-width:440px;
    background:#fff; border:1px solid var(--v3-border); border-radius:26px;
    padding:8px; gap:2px; box-shadow:0 18px 44px -14px rgba(30,20,60,.28);
  }
  .bnav-item{ padding:9px 2px; border-radius:16px; color:#9A9CAD; }
  .bnav-item .ico svg{ width:23px; height:23px; }
  .bnav-item span{ font-size:10.5px; font-weight:700; margin-top:3px; }
  .bnav-item.active{ background:#F0E7FB; color:var(--v3-violet); box-shadow:none; }
  .bnav-item.active .ico svg{ stroke:var(--v3-violet); }
  .bnav-item{ position:relative; }
  .bnav-item .bnav-badge{
    position:absolute; top:0; right:12px; min-width:18px; height:18px; padding:0 5px;
    background:var(--v3-orange); color:#fff; border:2px solid #fff; border-radius:99px;
    font-size:10px !important; font-weight:800; line-height:1;
    display:grid; place-items:center; z-index:3; margin:0;
  }
  .bnav-item .bnav-badge[style*="none"]{ display:none !important; }
}

/* ---------- Profile ---------- */
.sg-prof-head{
  background:var(--v3-grad); color:#fff; border-radius:24px; padding:20px 18px;
  margin-bottom:16px; box-shadow:0 18px 40px -18px rgba(90,20,160,.6); position:relative; overflow:hidden;
}
.sg-prof-top{ display:flex; align-items:center; gap:14px; }
.sg-prof-av{ width:64px; height:64px; border-radius:20px; background:rgba(255,255,255,.22);
  border:1.5px solid rgba(255,255,255,.35); display:grid; place-items:center; font-size:26px; font-weight:800; }
.sg-prof-name{ font-size:21px; font-weight:800; line-height:1.15; }
.sg-prof-sub{ font-size:12.5px; opacity:.85; margin-top:3px; }
.sg-prof-edit{ margin-left:auto; background:rgba(255,255,255,.18); border:1.5px solid rgba(255,255,255,.3);
  color:#fff; font-weight:800; font-size:13px; padding:9px 16px; border-radius:99px; cursor:pointer; flex-shrink:0; }
.sg-prof-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }
.sg-prof-stat{ background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.2);
  border-radius:16px; padding:12px 8px; text-align:center; }
.sg-prof-stat b{ font-size:20px; font-weight:800; display:block; }
.sg-prof-stat span{ font-size:11px; opacity:.85; font-weight:600; }
.sg-menu{ background:#fff; border:1px solid var(--v3-border); border-radius:22px; overflow:hidden; box-shadow:var(--v3-shadow-sm); }
.sg-menu .sg-row{ border:0; border-bottom:1px solid var(--v3-border); border-radius:0; margin:0; box-shadow:none; }
.sg-menu .sg-row:last-child{ border-bottom:0; }
.sg-logout{ text-align:center; margin:22px 0 8px; color:#E5484D; font-weight:800; font-size:16px; cursor:pointer; }

/* ---------- Countdown / highlight banner ---------- */
.sg-count{ background:var(--v3-grad); color:#fff; border-radius:20px; padding:16px; box-shadow:var(--v3-shadow); }
.sg-count b{ font-size:15px; } .sg-count .big{ font-size:30px; font-weight:800; }

/* ---------- Modal bottom sheets (unlock / subject access) ---------- */
@media (max-width:980px){
  #unlockModal, #subjectAccessModal{
    align-items:flex-end !important; padding:0 !important; background:rgba(20,12,40,.45) !important;
  }
  #unlockModal > div, #subjectAccessModal > div{
    width:100% !important; max-width:520px !important; margin:0 auto !important;
    border-radius:28px 28px 0 0 !important; padding:22px 20px calc(28px + env(safe-area-inset-bottom)) !important;
    background:#fff !important; animation:sgSheetUp .28s ease;
  }
  #unlockModal::before, #subjectAccessModal::before{
    content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:44px; height:5px; border-radius:99px; background:#D9D9E3; z-index:5;
  }
  @keyframes sgSheetUp{ from{ transform:translateY(40px); opacity:.4; } to{ transform:translateY(0); opacity:1; } }
}

/* ---------- Hide legacy marketing bits that clash with dashboard on mobile ---------- */
@media (max-width:980px){
  #screen-home .app-banner{ display:none; }
  #screen-home .why-card, #screen-home .app-grid{ /* keep popular grid but restyle */ }
  .app-grid{ grid-template-columns:1fr !important; gap:12px !important; }
  .app-card{ border-radius:20px; }
  .breadcrumb{ display:none; }       /* mockup uses big titles, not crumbs */
  .back-btn{ border-radius:99px; font-weight:800; }
}

/* ---------- Real exam countdown card (JS renders a dark inline box) ---------- */
@media (max-width:980px){
  #examCountdownHome > div{
    background:var(--v3-grad) !important;
    color:#fff !important; border-radius:20px !important;
    padding:16px !important; box-shadow:var(--v3-shadow) !important;
  }
}

/* ---------- SVG icons replacing emoji ---------- */
.sg-emoji-ic{ display:inline-flex; align-items:center; justify-content:center; vertical-align:-0.08em; line-height:0; }
.sg-emoji-ic + .sg-emoji-ic{ margin-left:2px; }
.sg-ic{ width:1.08em; height:1.08em; display:inline-block; }
/* Larger icons inside icon tiles */
.sg-ico .sg-emoji-ic .sg-ic, .sg-ico .sg-ic{ width:26px; height:26px; }
/* Big feature-card icons inherit their 26px font-size */
.sg-card .sg-emoji-ic .sg-ic{ width:1.08em; height:1.08em; }

/* ---------- Notifications ---------- */
.sg-dot-new{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--v3-orange); margin-left:8px; vertical-align:middle;
}
.sg-row .sg-clear-order{ color:var(--v3-muted); }
.sg-notif-meta{ font-size:11px; color:var(--v3-muted); margin-top:2px; }

/* ---------- Clear authentication feedback ---------- */
.auth-status{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:42px; margin-top:14px; padding:10px 12px;
  border-radius:13px; border:1px solid var(--v3-border);
  background:#F8F7FC; color:var(--v3-muted); font-size:13px;
  font-weight:700; line-height:1.4; text-align:center;
}
.auth-status:empty{ display:none; }
.auth-status.status-loading{ background:#F1E9FC; border-color:#D9C4F3; color:var(--v3-deep); }
.auth-status.status-success{ background:#EAF9F1; border-color:#BCE8CD; color:#087443; }
.auth-status.status-error{ background:#FFF0F0; border-color:#F2B8B8; color:#B42318; }
.auth-spinner{
  width:16px; height:16px; flex:0 0 16px; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent;
  animation:sgAuthSpin .7s linear infinite;
}
@keyframes sgAuthSpin{ to{ transform:rotate(360deg); } }

/* ---------- Forgot-password modal ---------- */
.sg-forgot-overlay{
  position:fixed; inset:0; z-index:10020; display:flex;
  align-items:center; justify-content:center; padding:18px;
  background:rgba(21,10,42,.62); backdrop-filter:blur(4px);
}
.sg-forgot-card{
  position:relative; width:min(430px,100%); padding:24px;
  border:1px solid rgba(106,31,181,.18); border-radius:24px;
  background:#fff; box-shadow:0 28px 80px rgba(21,10,42,.32);
}
.sg-forgot-close{
  position:absolute; top:12px; right:13px; width:36px; height:36px;
  border:0; border-radius:50%; background:#F5F2FA; color:var(--v3-ink);
  font-size:24px; line-height:1; cursor:pointer;
}
.sg-forgot-icon{
  width:54px; height:54px; display:grid; place-items:center;
  border-radius:17px; background:linear-gradient(135deg,#F3E9FF,#FFF0E6);
  font-size:27px; margin-bottom:15px;
}
.sg-forgot-card h3{ margin:0; color:var(--v3-ink); font-size:22px; }
.sg-forgot-card > p{ margin:8px 0 16px; color:var(--v3-muted); font-size:13px; line-height:1.6; }
.sg-forgot-card label{ display:block; color:var(--v3-ink); font-size:12px; font-weight:800; margin-bottom:7px; }
.sg-forgot-card input{
  width:100%; padding:13px 14px; border:1.5px solid var(--v3-border);
  border-radius:12px; color:var(--v3-ink); font:inherit; outline:none;
}
.sg-forgot-card input:focus{ border-color:var(--v3-violet2); box-shadow:0 0 0 4px rgba(106,31,181,.11); }
.sg-forgot-status{
  margin-top:12px; padding:12px 13px; border-radius:12px;
  font-size:13px; font-weight:750; line-height:1.5;
}
.sg-forgot-status[hidden]{ display:none; }
.sg-forgot-status.info{ background:#F1E9FC; color:var(--v3-deep); }
.sg-forgot-status.success{ background:#EAF9F1; border:1px solid #BCE8CD; color:#087443; }
.sg-forgot-status.error{ background:#FFF0F0; border:1px solid #F2B8B8; color:#B42318; }
.sg-forgot-actions{ display:flex; gap:9px; margin-top:18px; }
.sg-forgot-actions .btn{ flex:1; }
.sg-forgot-actions .btn:disabled{ opacity:.65; cursor:not-allowed; transform:none; }
@media (max-width:480px){
  .sg-forgot-card{ padding:21px; border-radius:20px; }
  .sg-forgot-actions{ flex-direction:column-reverse; }
}

/* Big page title used on hubs */
.sg-pagehead{ margin:6px 2px 16px; }
.sg-pagehead h1{ font-size:26px; font-weight:800; color:var(--v3-ink); letter-spacing:-.02em; }
.sg-pagehead p{ font-size:13.5px; color:var(--v3-muted); margin-top:4px; }

/* Sign-up validation feedback */
.signup-missing-field{
  border-color:#C62828 !important;
  box-shadow:0 0 0 3px rgba(198,40,40,.14) !important;
}