@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── MD3 TOKENS ── */
:root {
  --pri:        #6750A4;
  --on-pri:     #FFFFFF;
  --pri-con:    #EADDFF;
  --on-pri-con: #21005D;
  --sec-con:    #E8DEF8;
  --on-sec-con: #1D192B;
  --ter-con:    #FFD8E4;
  --on-ter:     #7D5260;
  --err:        #B3261E;
  --err-con:    #F9DEDC;
  --on-err-con: #410E0B;
  --surf:       #FFFBFE;
  --surf-var:   #E7E0EC;
  --on-surf:    #1C1B1F;
  --on-surf-v:  #49454F;
  --outline:    #79747E;
  --out-var:    #CAC4D0;
  --s1:         #F4EEFF;
  --s2:         #EDE8F5;
  --s3:         #E6DFEF;
  --scrim:      rgba(0,0,0,0.32);

  /* Liquid Glass tokens */
  --glass-bg:     rgba(255,255,255,0.55);
  --glass-border: rgba(255,255,255,0.75);
  --glass-shadow: 0 8px 32px rgba(103,80,164,0.13), 0 1.5px 0 rgba(255,255,255,0.7) inset;
  --glass-blur:   blur(28px) saturate(180%);

  --nav-h: 82px;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; overflow:hidden; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--surf);
  color: var(--on-surf);
  max-width: 480px;
  margin: 0 auto;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ── BACKGROUND GRADIENT (subtle, behind everything) ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 10%, rgba(167,139,250,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 50% 30% at 80% 80%, rgba(244,114,182,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── CLASS SELECT ── */
#classScreen {
  position: fixed; inset: 0; z-index: 300;
  background: var(--surf);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 32px 24px; overflow-y: auto;
  max-width: 480px; margin: 0 auto;
}

.brand-wrap { text-align: center; margin-bottom: 48px; }

.brand-icon {
  width: 84px; height: 84px;
  background: linear-gradient(145deg, var(--pri-con), #d4bbff);
  border-radius: 26px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 4px 24px rgba(103,80,164,0.18), 0 1px 0 rgba(255,255,255,0.8) inset;
}

.brand-icon svg { width: 44px; height: 44px; fill: var(--on-pri-con); }
.brand-wrap h1 { font-size: 28px; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.5px; }
.brand-wrap p { color: var(--on-surf-v); font-size: 14px; }

.pick-lbl {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--on-surf-v);
  margin-bottom: 16px; align-self: flex-start; width: 100%;
}

.cls-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; width: 100%; }

.cls-tile {
  background: var(--glass-bg);
  border: 1.5px solid var(--glass-border);
  border-radius: 18px; padding: 20px 8px; text-align: center; cursor: pointer;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  transition: transform .15s cubic-bezier(.34,1.56,.64,1), background .15s;
  position: relative; overflow: hidden;
}

.cls-tile::before {
  content: '';
  position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
}

.cls-tile:active { transform: scale(.93); }
.cls-tile:hover { background: rgba(255,255,255,0.68); }

.cls-n { font-size: 26px; font-weight: 600; color: var(--pri); display: block; line-height: 1.2; }
.cls-l { font-size: 12px; color: var(--on-surf-v); display: block; margin-top: 4px; }

/* ── TOP BAR ── */
.top-bar {
  height: 60px;
  padding: 0 8px 0 20px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  position: relative; z-index: 2;
}

.top-left { display: flex; align-items: center; gap: 10px; }

.cls-chip {
  background: var(--pri-con);
  color: var(--on-pri-con);
  border-radius: 100px; padding: 4px 12px;
  font-size: 12px; font-weight: 600; letter-spacing: .3px;
}

.top-title { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }

.icon-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: none; background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; color: var(--on-surf-v);
  transition: background .15s;
}
.icon-btn:hover { background: var(--s2); }
.icon-btn svg { width: 22px; height: 22px; fill: currentColor; }

.bdot {
  width: 8px; height: 8px; background: var(--err); border-radius: 50%;
  position: absolute; top: 9px; right: 9px;
  border: 2px solid var(--surf); display: none;
}

/* ── SCROLL ── */
.scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 4px 16px calc(var(--nav-h) + 24px);
  scrollbar-width: none; position: relative; z-index: 1;
}
.scroll::-webkit-scrollbar { display: none; }

/* ── PAGES ── */
.page { display: none; }
.page.active {
  display: block;
  animation: pgIn .25s cubic-bezier(.2,0,0,1);
}
@keyframes pgIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:none; }
}

/* ── HOME ── */
.greet-big {
  font-size: 26px; font-weight: 700; letter-spacing: -0.6px;
  line-height: 1.3; padding: 16px 0 4px;
}
.greet-big span { color: var(--pri); }
.greet-sub { color: var(--on-surf-v); font-size: 14px; margin-bottom: 4px; }
.sec-lbl {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--on-surf-v); margin: 22px 0 10px;
}

/* ── FOLDER LIST ── */
.folder-list { display: flex; flex-direction: column; gap: 8px; }

.folder-item {
  background: var(--glass-bg);
  border: 1.5px solid var(--glass-border);
  border-radius: 16px; padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  transition: transform .15s cubic-bezier(.34,1.4,.64,1), background .15s;
  position: relative; overflow: hidden;
}
.folder-item::before {
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
}
.folder-item:active { transform: scale(.97); }
.folder-item:hover { background: rgba(255,255,255,0.68); }

.f-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.f-icon svg { width: 22px; height: 22px; }
.f-text { flex: 1; min-width: 0; }
.f-text h3 { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-text p { font-size: 12px; color: var(--on-surf-v); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-chev { color: var(--on-surf-v); flex-shrink: 0; }
.f-chev svg { width: 18px; height: 18px; fill: currentColor; }

.fp { background: rgba(103,80,164,0.12); } .fp svg { fill: var(--pri); }
.fs { background: rgba(98,91,113,0.12); }  .fs svg { fill: var(--on-sec-con); }
.ft { background: rgba(125,82,96,0.12); }  .ft svg { fill: var(--on-ter); }
.fg { background: rgba(27,94,32,0.10); }   .fg svg { fill: #1B5E20; }
.fo { background: rgba(191,54,12,0.10); }  .fo svg { fill: #BF360C; }

/* ── CONTENT HEADER ── */
.con-hdr { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; padding: 8px 0; }
.back-btn {
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: transparent; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--on-surf); transition: background .15s; flex-shrink: 0;
}
.back-btn:hover { background: var(--s2); }
.back-btn svg { width: 22px; height: 22px; fill: currentColor; }
.con-hdr h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }

/* ── VIDEO CARDS ── */
.con-list { display: flex; flex-direction: column; gap: 12px; }

.vid-card {
  background: var(--glass-bg);
  border: 1.5px solid var(--glass-border);
  border-radius: 18px; overflow: hidden; cursor: pointer;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  transition: transform .15s;
}
.vid-card:active { transform: scale(.98); }

.vid-thumb { width: 100%; aspect-ratio: 16/9; background: var(--surf-var); position: relative; overflow: hidden; }
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.play-fab { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.14); }
.play-btn-fab {
  width: 52px; height: 52px; border-radius: 16px; background: var(--pri);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(103,80,164,0.4);
}
.play-btn-fab svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; }
.vid-info { padding: 14px 16px 16px; }
.vid-info h3 { font-size: 15px; font-weight: 600; line-height: 1.4; }
.vid-info p { font-size: 13px; color: var(--on-surf-v); margin-top: 4px; }
.vid-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--s2); border-radius: 8px; padding: 3px 9px; font-size: 11px; font-weight: 500; color: var(--on-surf-v); margin-top: 8px; }

.img-card {
  background: var(--glass-bg); border: 1.5px solid var(--glass-border);
  border-radius: 18px; overflow: hidden; margin-bottom: 12px;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.img-card img { width: 100%; display: block; }
.img-info { padding: 12px 16px; }
.img-info h3 { font-size: 14px; font-weight: 600; }

/* ── Q&A ── */
.qa-send-card {
  background: var(--glass-bg); border: 1.5px solid var(--glass-border);
  border-radius: 18px; padding: 16px; margin-bottom: 16px;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow); position: relative; overflow: hidden;
}
.qa-send-card::before {
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
}
.qa-send-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.qa-send-card h3 svg { width: 18px; height: 18px; fill: var(--pri); }
.qa-textarea {
  width: 100%; border: 1.5px solid var(--out-var); border-radius: 10px;
  padding: 12px; font-family: 'Inter', sans-serif; font-size: 14px;
  color: var(--on-surf); background: rgba(255,255,255,0.7);
  resize: none; min-height: 80px; outline: none; transition: border-color .15s;
}
.qa-textarea:focus { border-color: var(--pri); }
.qa-img-preview { width: 100%; border-radius: 10px; margin: 10px 0; display: none; max-height: 200px; object-fit: contain; background: var(--surf-var); }
.upload-progress { height: 3px; background: var(--out-var); border-radius: 2px; margin-top: 8px; display: none; }
.upload-progress-bar { height: 100%; background: var(--pri); border-radius: 2px; width: 0; transition: width .3s; }
.qa-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.upload-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--out-var);
  background: rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: background .15s;
}
.upload-btn:hover { background: var(--s2); }
.upload-btn svg { width: 20px; height: 20px; fill: var(--on-surf-v); }
.send-btn {
  flex: 1; padding: 10px 20px; border-radius: 100px; border: none;
  background: var(--pri); color: #fff; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: 'Inter',sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: opacity .15s;
}
.send-btn:hover { opacity: .9; }
.send-btn:disabled { opacity: .45; cursor: not-allowed; }
.send-btn svg { width: 15px; height: 15px; fill: currentColor; }

.qa-list { display: flex; flex-direction: column; gap: 12px; }

.qa-card {
  background: var(--glass-bg); border: 1.5px solid var(--glass-border);
  border-radius: 18px; overflow: hidden;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.qa-card-q { padding: 14px 16px; background: rgba(103,80,164,0.06); border-bottom: 1px solid var(--out-var); }
.qa-card-q-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.qa-card-q-text { font-size: 14px; line-height: 1.5; flex: 1; }
.qa-card-q-img { width: 100%; border-radius: 10px; margin-top: 10px; max-height: 180px; object-fit: contain; display: block; cursor: pointer; }
.qa-meta { font-size: 11px; color: var(--outline); margin-top: 6px; }
.qa-card-a { padding: 14px 16px; }
.qa-card-a-lbl { font-size: 11px; font-weight: 600; color: var(--pri); letter-spacing: .5px; text-transform: uppercase; margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
.qa-card-a-lbl svg { width: 14px; height: 14px; fill: currentColor; }
.qa-card-a-text { font-size: 14px; line-height: 1.6; }
.qa-card-a-img { width: 100%; border-radius: 10px; margin-top: 8px; display: block; }
.qa-pending { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--outline); font-style: italic; }
.qa-pending svg { width: 16px; height: 16px; fill: currentColor; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── PROFILE ── */
.prof-hero { text-align: center; padding: 24px 0 28px; }
.avatar {
  width: 88px; height: 88px; border-radius: 50%;
  background: linear-gradient(145deg, var(--pri-con), #d4bbff);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  box-shadow: 0 4px 20px rgba(103,80,164,0.2), 0 1px 0 rgba(255,255,255,0.8) inset;
}
.avatar svg { width: 44px; height: 44px; fill: var(--on-pri-con); }
.prof-name { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
.prof-sub { font-size: 14px; color: var(--on-surf-v); margin-top: 4px; }
.prof-list { display: flex; flex-direction: column; }
.prof-row { display: flex; align-items: center; gap: 14px; padding: 16px 4px; border-bottom: 1px solid var(--out-var); }
.prof-row:last-child { border-bottom: none; }
.prof-row svg { width: 22px; height: 22px; fill: var(--on-surf-v); flex-shrink: 0; }
.prof-row-text .lbl { font-size: 11px; color: var(--on-surf-v); font-weight: 500; letter-spacing: .3px; }
.prof-row-text .val { font-size: 15px; font-weight: 600; margin-top: 2px; }
.tonal-btn {
  width: 100%; margin-top: 24px; padding: 14px; border-radius: 100px; border: none;
  background: var(--glass-bg);
  border: 1.5px solid var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  color: var(--pri); font-size: 14px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Inter',sans-serif;
  box-shadow: var(--glass-shadow);
  transition: background .15s;
}
.tonal-btn:hover { background: rgba(255,255,255,0.7); }
.tonal-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* ── NOTIFICATIONS ── */
.notif-list { display: flex; flex-direction: column; gap: 8px; }
.notif-item {
  background: var(--glass-bg); border: 1.5px solid var(--glass-border);
  border-radius: 14px; padding: 16px;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow); position: relative; overflow: hidden;
}
.notif-item::before {
  content: '';
  position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
}
.notif-item.unread { border-color: rgba(103,80,164,0.4); background: rgba(234,221,255,0.55); }
.notif-item.unread::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--pri); border-radius: 14px 0 0 14px; }
.notif-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.notif-body { font-size: 13px; color: var(--on-surf-v); line-height: 1.5; }
.notif-time { font-size: 11px; color: var(--outline); margin-top: 8px; }

/* ── EMPTY STATE ── */
.empty-s { text-align: center; padding: 52px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty-s svg { width: 52px; height: 52px; fill: var(--out-var); }
.empty-s h3 { font-size: 16px; font-weight: 600; color: var(--on-surf-v); }
.empty-s p { font-size: 14px; color: var(--outline); }

/* ════════════════════════════════════════════════════
   LIQUID GLASS NAV BAR
   Pure CSS + SVG filter — no framework needed
   ════════════════════════════════════════════════════ */

/* Hidden SVG filter — must be in HTML */
.lg-filter-svg { position: absolute; width: 0; height: 0; overflow: hidden; }

.nav-bar {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 28px);
  max-width: 452px;
  margin-bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 100;
  pointer-events: none;
  flex-shrink: 0;
}

/* The frosted pill container */
.nav-track {
  display: flex; align-items: center;
  background: rgba(255,255,255,0.52);
  border: 1.5px solid rgba(255,255,255,0.78);
  border-radius: 100px;
  padding: 6px;
  pointer-events: all;
  position: relative;
  overflow: hidden;
  /* Multi-layer glass shadow */
  box-shadow:
    0 2px 0 rgba(255,255,255,0.75) inset,
    0 -1px 0 rgba(0,0,0,0.06) inset,
    0 16px 48px rgba(103,80,164,0.18),
    0 4px 12px rgba(0,0,0,0.10);
  /* Frosted blur */
  backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
}

/* Top specular line — the "glass" edge */
.nav-track::before {
  content: '';
  position: absolute; top: 0; left: 8%; right: 8%; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
  border-radius: 100px;
  pointer-events: none;
}

/* Sliding active pill (liquid glass thumb) */
.nav-thumb {
  position: absolute;
  top: 6px; bottom: 6px;
  border-radius: 100px;
  background: rgba(255,255,255,0.65);
  border: 1.5px solid rgba(255,255,255,0.88);
  box-shadow:
    0 2px 0 rgba(255,255,255,0.9) inset,
    0 -1px 0 rgba(0,0,0,0.08) inset,
    0 4px 20px rgba(103,80,164,0.22),
    0 1px 4px rgba(0,0,0,0.08);
  transition: left .32s cubic-bezier(.34,1.56,.64,1), width .32s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
  z-index: 0;
  will-change: left, width;
}

/* Each nav item */
.nav-item {
  flex: 1; height: 58px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; cursor: pointer;
  border-radius: 100px;
  position: relative; z-index: 1;
  user-select: none; -webkit-user-select: none;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}

.nav-item:active { transform: scale(.88); }

.nav-item svg {
  width: 22px; height: 22px; fill: var(--on-surf-v);
  transition: fill .22s, transform .28s cubic-bezier(.34,1.56,.64,1);
  display: block; flex-shrink: 0;
}

.nav-lbl {
  font-size: 10.5px; font-weight: 600; letter-spacing: .2px;
  color: var(--on-surf-v);
  transition: color .22s, font-weight .15s;
  line-height: 1;
}

/* Active state */
.nav-item.active svg {
  fill: var(--pri);
  transform: scale(1.12) translateY(-1px);
}
.nav-item.active .nav-lbl {
  color: var(--pri);
  font-weight: 700;
}

/* Notification dot */
.nav-bdot {
  position: absolute; top: 10px; right: calc(50% - 16px);
  width: 7px; height: 7px;
  background: var(--err); border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.8);
  display: none;
  animation: bdotPulse 2s ease-in-out infinite;
}
@keyframes bdotPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

/* ── VIDEO BOTTOM SHEET ── */
.sheet-back {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 300; display: none; align-items: flex-end;
  max-width: 480px; left: 50%; transform: translateX(-50%);
}
.sheet-back.open { display: flex; }
.b-sheet {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(40px) saturate(200%); -webkit-backdrop-filter: blur(40px) saturate(200%);
  border: 1.5px solid rgba(255,255,255,0.8);
  border-radius: 28px 28px 0 0; width: 100%;
  overflow: hidden;
  animation: sheetUp .34s cubic-bezier(.2,0,0,1);
  max-height: 92dvh; display: flex; flex-direction: column;
  box-shadow: 0 -4px 40px rgba(103,80,164,0.15), 0 1px 0 rgba(255,255,255,0.9) inset;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.sheet-handle { width: 36px; height: 4px; background: rgba(0,0,0,0.15); border-radius: 2px; margin: 12px auto 0; flex-shrink: 0; }
.sheet-hdr { padding: 12px 16px 8px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.sheet-title { font-size: 15px; font-weight: 600; flex: 1; line-height: 1.4; }
.sheet-close { width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.sheet-close:hover { background: rgba(0,0,0,0.13); }
.sheet-close svg { width: 18px; height: 18px; fill: var(--on-surf); }
.sheet-vid { aspect-ratio: 16/9; width: 100%; background: #000; flex-shrink: 0; }
.sheet-vid.webpage-mode { aspect-ratio: unset; flex: 1; min-height: 65dvh; background: var(--surf); }
.sheet-vid iframe { width: 100%; height: 100%; border: none; display: block; }
.sheet-desc { padding: 12px 16px 24px; font-size: 14px; color: var(--on-surf-v); line-height: 1.5; }

/* ── SNACKBAR ── */
.snack {
  position: fixed; bottom: calc(var(--nav-h) + 16px); left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: rgba(28,27,31,0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: #fff; padding: 12px 20px; border-radius: 12px;
  font-size: 14px; font-weight: 500; opacity: 0;
  transition: all .28s cubic-bezier(.2,0,0,1);
  white-space: nowrap; z-index: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2); font-family: 'Inter',sans-serif;
}
.snack.show { opacity: 1; transform: translateX(-50%) translateY(0); }