/* ============================================================
   TagTalk · Fun Layer  (theme-fun.css)
   Build-free enhancement layer. Loaded AFTER output.css and
   BEFORE each base template's inline <style>, so page tokens win
   and these fallbacks fill in anything a base doesn't define.
   Keyed off the existing --c-* design tokens. No Tailwind rebuild
   required — everything here is plain CSS.
   ============================================================ */
:root{
  --c-gold: #FCD116; --c-gold-dark: #B87800; --c-gold-bg: #FFF9E0;
  --c-primary-bg: rgba(0,56,168,.08);
  --tt-shadow-card: 0 1px 2px rgba(15,23,42,.06), 0 10px 28px rgba(0,56,168,.10);
  --tt-shadow-pop:  0 16px 44px rgba(0,56,168,.24);
}
@media (prefers-color-scheme: dark) {
  :root {
    --c-gold-bg: rgba(252,209,22,0.12);
    --tt-shadow-card: 0 1px 2px rgba(0,0,0,.2), 0 10px 28px rgba(0,0,0,.18);
    --tt-shadow-pop:  0 16px 44px rgba(0,0,0,.35);
  }
}
[data-theme="dark"] {
  --c-gold-bg: rgba(252,209,22,0.12);
  --tt-shadow-card: 0 1px 2px rgba(0,0,0,.2), 0 10px 28px rgba(0,0,0,.18);
  --tt-shadow-pop:  0 16px 44px rgba(0,0,0,.35);
}

body{ -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,h6{ letter-spacing:-.01em; }

/* Header → blue→light gradient capped by a gold hairline */
#header nav{
  background:linear-gradient(90deg,#0038A8 0%,#1f52bd 60%,#4D7BCE 100%) !important;
  border-bottom:2px solid var(--c-gold) !important;
}

/* Sidebar nav links → springy, gold-accented active state */
.nav-link{ font-weight:700; border-radius:10px; }
.nav-link:hover{ transform:translateX(2px); }
/* Rounded highlight with a gold rail that curves with it (inset shadow is clipped to the radius) */
.nav-link { border-radius: 10px !important; overflow: hidden; }
.nav-link.active { box-shadow: inset 3px 0 0 var(--c-gold); }

/* Page headers */
.page-header{ font-family:var(--font-display,'Fira Sans',sans-serif); font-size:30px !important; font-weight:800; }

/* list-card base primitive (self-sufficient so it works on every base) */
.list-card{ display:block; padding:16px 20px; border-radius:16px; border:1px solid var(--c-border);
  background:var(--c-surface); color:var(--c-text); text-decoration:none; }

/* Section labels → prouder, gold */
.section-label, .section-label-sm, [class*="section-label"]{
  color:var(--c-gold-dark) !important; font-weight:800 !important; letter-spacing:.08em !important;
}

/* Buttons → bolder, poppier.
   Layout rules here so .btn is self-sufficient on bases that don't define it
   inline (e.g. full-screen-content-base). Bases that DO define .btn override
   these harmlessly (identical values, later in source). */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.375rem;
  padding:.625rem 1.25rem; border-radius:9999px; font-size:.9375rem; line-height:1;
  cursor:pointer; border:1.5px solid transparent; text-decoration:none; white-space:nowrap;
  font-weight:800 !important; transition:transform .15s,box-shadow .15s,background .15s,border-color .15s,color .15s; }
.btn:active{ transform:scale(.96); }
.btn-primary{ background:linear-gradient(135deg,#0038A8,#1f52bd) !important; border-color:#0038A8 !important;
  color:#fff; box-shadow:0 6px 16px rgba(0,56,168,.28); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,56,168,.34); }
.btn-ghost{ background:transparent; color:var(--c-text-muted); border-color:var(--c-border); }
.btn-ghost:hover{ background:var(--c-primary-bg); color:var(--c-primary); border-color:var(--c-primary); }
.btn-secondary{ background:transparent; color:var(--c-primary); border-color:var(--c-primary); }
.btn-secondary:hover{ background:var(--c-primary-bg); }
.btn-sm{ padding:.375rem .875rem; font-size:.8125rem; }
.btn-gold{ box-shadow:0 6px 18px rgba(252,209,22,.45) !important; }
.btn-gold:hover{ transform:translateY(-1px); }

/* Form inputs → self-sufficient on bases that don't define .form-input inline
   (e.g. full-screen-content-base). Bases that DO define it override harmlessly. */
.form-input{ width:100%; padding:8px 12px; border:1px solid var(--c-border); border-radius:6px;
  font-size:14px; background:var(--c-surface); color:var(--c-text); transition:border-color .15s; }
.form-input:focus{ outline:none; border-color:var(--c-primary); }
.form-input::placeholder{ color:var(--c-text-muted); }

/* Badges → rounder, bolder */
.badge{ font-weight:800 !important; padding:.28rem .7rem !important; }

/* Universal card glow-up: inline-styled Tailwind list cards + shared card classes */
#main-content a[class*="rounded-lg"], #main-content a[class*="rounded-xl"],
#main-content a[class*="rounded-2xl"], .list-card, .home-action-card, .design-card{
  position:relative !important; overflow:hidden !important;
  box-shadow:var(--tt-shadow-card) !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
#main-content a[class*="rounded-lg"]::before, #main-content a[class*="rounded-xl"]::before,
#main-content a[class*="rounded-2xl"]::before, .list-card::before, .home-action-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(var(--c-gold),#FFDB4D);
  transform:scaleY(0); transform-origin:50% 100%; transition:transform .22s ease; z-index:2;
}
#main-content a[class*="rounded-lg"]:hover::before, #main-content a[class*="rounded-xl"]:hover::before,
#main-content a[class*="rounded-2xl"]:hover::before, .list-card:hover::before, .home-action-card:hover::before{
  transform:scaleY(1);
}
#main-content a[class*="rounded-lg"]::after{
  content:""; position:absolute; right:-26px; top:50%; transform:translateY(-50%);
  width:118px; height:118px; opacity:.05; pointer-events:none; z-index:0;
  background:url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%230038A8%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%227%22/%3E%3Cg%20stroke%3D%22%230038A8%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%3E%3Cline%20x1%3D%2216%22%20y1%3D%221.5%22%20x2%3D%2216%22%20y2%3D%226%22/%3E%3Cline%20x1%3D%2216%22%20y1%3D%2226%22%20x2%3D%2216%22%20y2%3D%2230.5%22/%3E%3Cline%20x1%3D%221.5%22%20y1%3D%2216%22%20x2%3D%226%22%20y2%3D%2216%22/%3E%3Cline%20x1%3D%2226%22%20y1%3D%2216%22%20x2%3D%2230.5%22%20y2%3D%2216%22/%3E%3Cline%20x1%3D%225.6%22%20y1%3D%225.6%22%20x2%3D%228.8%22%20y2%3D%228.8%22/%3E%3Cline%20x1%3D%2223.2%22%20y1%3D%2223.2%22%20x2%3D%2226.4%22%20y2%3D%2226.4%22/%3E%3Cline%20x1%3D%2226.4%22%20y1%3D%225.6%22%20x2%3D%2223.2%22%20y2%3D%228.8%22/%3E%3Cline%20x1%3D%228.8%22%20y1%3D%2223.2%22%20x2%3D%225.6%22%20y2%3D%2226.4%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E') center/contain no-repeat;
}
#main-content a[class*="rounded-lg"]:hover, #main-content a[class*="rounded-xl"]:hover,
#main-content a[class*="rounded-2xl"]:hover, .list-card:hover, .home-action-card:hover{
  transform:translateY(-3px) !important; box-shadow:var(--tt-shadow-pop) !important;
}
#main-content a[class*="rounded-lg"] > *, .list-card > *, .home-action-card > *{ position:relative; z-index:1; }

/* Staggered rise-in for card lists */
@keyframes ttRise{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
#lessons-list > *, #chats-list > *, #chat-list > *, #journals-list > *, #journal-list > *,
#instructors-list > *, #students-list > *, .home-action-card{ animation:ttRise .4s ease-out backwards; }
.home-action-card:nth-child(2){ animation-delay:.05s; } .home-action-card:nth-child(3){ animation-delay:.10s; }
.home-action-card:nth-child(4){ animation-delay:.15s; } .home-action-card:nth-child(5){ animation-delay:.20s; }
.home-action-card:nth-child(6){ animation-delay:.25s; }

/* ---- Reusable gamified components (for signature page markup) ---- */
.tt-streak{ display:inline-flex; align-items:center; gap:6px; background:var(--c-gold-bg);
  color:var(--c-gold-dark); font-weight:800; font-size:14px; padding:7px 14px; border-radius:9999px;
  border:1.5px solid rgba(184,120,0,.22); }
.tt-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:9999px;
  font-weight:800; font-size:12.5px; }
.tt-chip-blue{ background:var(--c-primary-bg); color:var(--c-primary); }
.tt-chip-gold{ background:var(--c-gold-bg); color:var(--c-gold-dark); }
.tt-grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.tt-grid-4{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
@media(min-width:1024px){ .tt-grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:639px){ .tt-grid-3{ grid-template-columns:1fr; } }
.tt-stat{ position:relative; overflow:hidden; background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:16px; padding:18px; box-shadow:var(--tt-shadow-card); }
.tt-stat .tt-ico{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.tt-stat .tt-big{ font-family:var(--font-display,'Fira Sans',sans-serif); font-weight:800; font-size:26px; line-height:1; font-variant-numeric:tabular-nums; }
.tt-stat .tt-cap{ font-size:12.5px; font-weight:700; color:var(--c-text-muted); margin-top:3px; }
.tt-hero-sun{ position:absolute; pointer-events:none; }

@media (prefers-reduced-motion: reduce){
  .home-action-card, #lessons-list > *, #chats-list > *, #journals-list > *{ animation:none !important; }
  .btn, .nav-link, [class*="rounded-lg"]{ transition:none !important; }
}

/* ============================================================
   Shared list-card content system (My Chats / Instructors /
   Lessons). Built on the .list-card primitive above, so cards
   inherit the sun-ray watermark, gold hover rail, and lift.
   ============================================================ */
.list-subtitle{ color:var(--c-text-muted); font-weight:600; font-size:15px; margin-top:2px; }

/* pill search bar with inline icon */
.cc-search{ position:relative; }
.cc-search .cc-search-ico{ position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--c-text-muted); pointer-events:none; }
.cc-search input{ width:100%; padding:12px 16px 12px 44px; border:1px solid var(--c-border);
  border-radius:9999px; font-family:var(--font-body,'Mulish',sans-serif); font-size:14px; font-weight:600;
  background:var(--c-surface); color:var(--c-text); box-shadow:var(--tt-shadow-card);
  transition:border-color .15s, box-shadow .15s; }
.cc-search input::placeholder{ color:var(--c-text-muted); }
.cc-search input:focus{ outline:none; border-color:var(--c-primary); box-shadow:0 0 0 3px var(--c-primary-bg); }

/* card interior */
.cc-row{ display:flex; gap:14px; align-items:flex-start; }
.cc-avatar{ width:46px; height:46px; border-radius:9999px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-family:var(--font-display,'Fira Sans',sans-serif); font-weight:800; font-size:18px;
  background:linear-gradient(140deg,var(--c-primary),var(--c-primary-light,#4D7BCE));
  box-shadow:0 4px 12px rgba(0,56,168,.22); }
.cc-avatar-gold{ background:linear-gradient(140deg,#FCD116,#E5A800); color:var(--c-gold-dark);
  box-shadow:0 4px 12px rgba(252,209,22,.30); }
.cc-main{ flex:1; min-width:0; }
.cc-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cc-title{ font-family:var(--font-display,'Fira Sans',sans-serif); font-weight:800; font-size:17px;
  color:var(--c-text); line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:color .15s; }
.list-card:hover .cc-title{ color:var(--c-primary); }
.cc-badge{ flex:0 0 auto; font-size:11px; font-weight:800; padding:3px 11px; border-radius:9999px; }
.cc-badge-shared{ background:var(--c-primary-bg); color:var(--c-primary); }
.cc-badge-private{ background:var(--c-border); color:var(--c-text-muted); }
.cc-badge-gold{ background:var(--c-gold-bg); color:var(--c-gold-dark); }
.cc-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:9px;
  font-size:13px; color:var(--c-text-muted); font-weight:600; }
.cc-meta svg{ width:14px; height:14px; flex:0 0 auto; }
.cc-with, .cc-date{ display:inline-flex; align-items:center; gap:5px; }
.cc-date{ white-space:nowrap; }

/* friendly empty state */
.cc-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:48px 20px; }
.cc-empty .cc-empty-sun{ width:56px; height:56px; opacity:.9; }
.cc-empty h3{ font-family:var(--font-display,'Fira Sans',sans-serif); font-weight:800; font-size:18px; color:var(--c-text); }
.cc-empty p{ font-size:14px; color:var(--c-text-muted); font-weight:600; }


/* ============================================================
   Form + panel + profile system (add / settings / detail).
   ============================================================ */
.tt-panel{ position:relative; overflow:hidden; background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:16px; padding:24px; box-shadow:var(--tt-shadow-card); }
.tt-panel-sun{ position:absolute; top:-30px; right:-30px; width:132px; height:132px; opacity:.05; pointer-events:none; z-index:0; }
.tt-panel > *{ position:relative; z-index:1; }
.tt-panel-title{ font-family:var(--font-display,'Fira Sans',sans-serif); font-weight:800; font-size:18px;
  color:var(--c-text); display:flex; align-items:center; gap:8px; }
.tt-panel-title svg{ width:18px; height:18px; flex:0 0 auto; }
.tt-panel-sub{ font-size:14px; color:var(--c-text-muted); font-weight:600; margin-top:4px; }

/* form controls */
.tt-form .tt-field{ margin-bottom:16px; }
.tt-form label{ display:block; font-size:13px; font-weight:800; color:var(--c-text); margin-bottom:6px; }
.tt-form input, .tt-form select, .tt-form textarea, .tt-form .form-input{
  width:100%; padding:11px 14px; border:1px solid var(--c-border); border-radius:10px;
  font-family:var(--font-body,'Mulish',sans-serif); font-size:14px; font-weight:600;
  background:var(--c-surface); color:var(--c-text); transition:border-color .15s, box-shadow .15s; }
.tt-form input::placeholder, .tt-form textarea::placeholder{ color:var(--c-text-muted); font-weight:500; }
.tt-form input:focus, .tt-form select:focus, .tt-form textarea:focus, .tt-form .form-input:focus{
  outline:none; border-color:var(--c-primary); box-shadow:0 0 0 3px var(--c-primary-bg); }
.tt-form select{ -webkit-appearance:none; appearance:none; padding-right:38px;
  background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%252364748B%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22/%3E%3C/svg%3E'); background-repeat:no-repeat; background-position:right 13px center; }
.tt-form textarea{ resize:vertical; min-height:96px; }

/* back link */
.tt-back{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700;
  color:var(--c-text-muted); text-decoration:none; transition:color .15s; }
.tt-back:hover{ color:var(--c-primary); }
.tt-back svg{ width:16px; height:16px; }

/* profile header (instructor detail) */
.tt-profile{ display:flex; align-items:center; gap:16px; }
.tt-profile-avatar{ width:64px; height:64px; border-radius:9999px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-display,'Fira Sans',sans-serif); font-weight:800; font-size:26px;
  background:linear-gradient(140deg,var(--c-primary),var(--c-primary-light,#4D7BCE)); box-shadow:0 6px 16px rgba(0,56,168,.24); }
.tt-profile-name{ font-family:var(--font-display,'Fira Sans',sans-serif); font-weight:800; font-size:24px; color:var(--c-text); line-height:1.15; }
.tt-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }

/* connected-instructor row (settings) */
.tt-conn{ position:relative; border:1px solid var(--c-border); border-radius:14px; padding:16px; background:var(--c-surface); box-shadow:var(--tt-shadow-card); }
.tt-conn-head{ display:flex; align-items:center; gap:12px; }
.tt-conn-avatar{ width:40px; height:40px; border-radius:9999px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-display,'Fira Sans',sans-serif); font-weight:800; font-size:15px;
  background:linear-gradient(140deg,var(--c-primary),var(--c-primary-light,#4D7BCE)); }

/* ============================================================
   Auth pages (login / signup / reset flow)
   ============================================================ */
.tt-auth-title { font-family:var(--font-display,'Fira Sans',sans-serif); font-weight:800; font-size:26px; color:var(--c-text); letter-spacing:-.01em; }
.tt-auth-sub { color:var(--c-text-muted); font-weight:600; font-size:14.5px; margin-top:4px; }
.tt-authlinks { text-align:center; font-size:14px; color:var(--c-text-muted); font-weight:600; margin-top:16px; }
.tt-authlinks a { color:var(--c-primary); font-weight:800; text-decoration:none; }
.tt-authlinks a:hover { text-decoration:underline; }
.tt-authlinks.sm { font-size:12.5px; margin-top:12px; line-height:1.6; }
.role-opt { display:block; flex:1; cursor:pointer; }
.role-box { text-align:center; padding:14px 12px; border-radius:12px; border:2px solid var(--c-border);
  font-weight:800; font-size:14px; color:var(--c-text-muted); transition:all .15s; }
.role-opt:hover .role-box { border-color:var(--c-primary-light,#4D7BCE); }
.role-opt input:checked + .role-box { border-color:var(--c-primary); background:var(--c-primary-bg); color:var(--c-primary); }