/* ============================================================
   RADARANK — design tokens
   Signature: radar-sweep beacon mark + console/status-board layout
   ============================================================ */

:root{
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --shadow-soft: 0 8px 30px -12px rgba(0,0,0,0.35);
  --shadow-pop: 0 14px 40px -14px rgba(0,0,0,0.45);

  --dur: 180ms;
}

/* ---------- Dark theme: "Night Radar" (default) ---------- */
[data-theme="dark"]{
  --bg: #060C1A;
  --bg-grid: #090F20;
  --surface: #0F1729;
  --surface-2: #162035;
  --surface-3: #1E2C47;
  --text: #E8ECF6;
  --text-dim: #8C9DC0;
  --text-faint: #4E5F80;
  --border: #223050;
  --accent: #FFB454;
  --accent-ink: #2A1B04;
  --accent-2: #5DDEC8;
  --accent-2-ink: #06251E;
  --accent-3: #FF6F91;
  --danger: #FF6F91;
  --success: #5DDEC8;
}

/* ---------- Pastel / Cream theme: "Cream Signal" ---------- */
[data-theme="pastel"]{
  --bg: #F5EDD8;
  --bg-grid: #EDE0C4;
  --surface: #FFFDF5;
  --surface-2: #FBF5E6;
  --surface-3: #F2E8D0;
  --text: #2C1F0A;
  --text-dim: #6B5535;
  --text-faint: #A8896A;
  --border: #DCCCA8;
  --accent: #B85C00;
  --accent-ink: #FFF6EE;
  --accent-2: #2A7A5E;
  --accent-2-ink: #E0FFF4;
  --accent-3: #C03060;
  --danger: #C03060;
  --success: #2A7A5E;
}

/* ---------- Citrus theme: "Citrus Beacon" ---------- */
[data-theme="citrus"]{
  --bg: #FFE566;
  --bg-grid: #FFD830;
  --surface: #FFFFF0;
  --surface-2: #FFFAD0;
  --surface-3: #FFF4A8;
  --text: #1A1000;
  --text-dim: #5A4200;
  --text-faint: #9A7820;
  --border: #E0C040;
  --accent: #B84800;
  --accent-ink: #FFF8EE;
  --accent-2: #005E70;
  --accent-2-ink: #E0FEFF;
  --accent-3: #B00040;
  --danger: #B00040;
  --success: #005E70;
}

/* ---------- Bubblegum theme: "Bubblegum Pulse" ---------- */
[data-theme="bubblegum"]{
  --bg: #FFB8E0;
  --bg-grid: #FF98D0;
  --surface: #FFF5FC;
  --surface-2: #FFE4F6;
  --surface-3: #FFC8EC;
  --text: #280010;
  --text-dim: #701040;
  --text-faint: #B04070;
  --border: #EF90CC;
  --accent: #900060;
  --accent-ink: #FFF0F8;
  --accent-2: #005080;
  --accent-2-ink: #E0F4FF;
  --accent-3: #A06000;
  --danger: #900060;
  --success: #005080;
}

/* ---------- Lagoon theme: "Lagoon Bright" ---------- */
[data-theme="lagoon"]{
  --bg: #70E8D0;
  --bg-grid: #48DCC0;
  --surface: #EDFDF9;
  --surface-2: #C0F4E8;
  --surface-3: #90E8D8;
  --text: #01201A;
  --text-dim: #084E40;
  --text-faint: #207A68;
  --border: #48C8B0;
  --accent: #003E60;
  --accent-ink: #DDF4FF;
  --accent-2: #982000;
  --accent-2-ink: #FFF0EA;
  --accent-3: #680058;
  --danger: #882000;
  --success: #003E60;
}

/* ---------- Midnight Purple theme: "Midnight Signal" ---------- */
[data-theme="midnight"]{
  --bg: #0D0820;
  --bg-grid: #110C28;
  --surface: #18103A;
  --surface-2: #20184A;
  --surface-3: #2A205C;
  --text: #EAE4FF;
  --text-dim: #9888CC;
  --text-faint: #5C4E88;
  --border: #38286A;
  --accent: #FF9F54;
  --accent-ink: #2A1200;
  --accent-2: #60D4FF;
  --accent-2-ink: #002030;
  --accent-3: #FF5FA8;
  --danger: #FF5FA8;
  --success: #60D4FF;
}

/* ---------- Forest theme: "Deep Forest" ---------- */
[data-theme="forest"]{
  --bg: #0A1A0C;
  --bg-grid: #0E2010;
  --surface: #122014;
  --surface-2: #1A2E1C;
  --surface-3: #223C24;
  --text: #D8F0D8;
  --text-dim: #80B080;
  --text-faint: #4A7050;
  --border: #2A4830;
  --accent: #88FF66;
  --accent-ink: #0A1E06;
  --accent-2: #FFB840;
  --accent-2-ink: #2A1800;
  --accent-3: #40D8D8;
  --danger: #FF6060;
  --success: #88FF66;
}

/* ---------- Sunset theme: "Sunset Warm" ---------- */
[data-theme="sunset"]{
  --bg: #FF6820;
  --bg-grid: #F05010;
  --surface: #FFF5EE;
  --surface-2: #FFE8D8;
  --surface-3: #FFD0B8;
  --text: #1A0800;
  --text-dim: #5C2800;
  --text-faint: #9A5830;
  --border: #E8A080;
  --accent: #8A0040;
  --accent-ink: #FFE8F4;
  --accent-2: #003880;
  --accent-2-ink: #E8F0FF;
  --accent-3: #006840;
  --danger: #8A0020;
  --success: #006840;
}

/* ---------- Rose Gold theme: "Rose Studio" ---------- */
[data-theme="rosegold"]{
  --bg: #F2D8CE;
  --bg-grid: #E8C8BC;
  --surface: #FFFAF8;
  --surface-2: #FAF0EC;
  --surface-3: #F0E0D8;
  --text: #280C08;
  --text-dim: #784040;
  --text-faint: #B07878;
  --border: #D8A898;
  --accent: #902020;
  --accent-ink: #FFF4F0;
  --accent-2: #205880;
  --accent-2-ink: #E8F4FF;
  --accent-3: #606000;
  --danger: #902020;
  --success: #205880;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(circle at 15% 0%, var(--bg-grid), transparent 45%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  transition: background var(--dur) ease, color var(--dur) ease;
  -webkit-font-smoothing: antialiased;
}

a{ color: var(--accent-2); }

::selection{ background: var(--accent); color: var(--accent-ink); }

/* scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background: var(--surface-3); border-radius: 10px; }
::-webkit-scrollbar-track{ background: transparent; }

button, input, textarea, select{ font-family: inherit; }

.hidden{ display:none !important; }

/* ============================================================
   Header / console bar
   ============================================================ */
.topbar{
  display:flex;
  flex-direction: column;
  gap:0;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), transparent);
  position: sticky;
  top:0;
  z-index: 40;
  backdrop-filter: blur(10px);
  /* CRITICAL: overflow must be visible so tooltip ::after pseudo-elements
     can render outside the topbar bounds */
  overflow: visible;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-mark{
  width:38px; height:38px;
  border-radius:50%;
  position:relative;
  flex-shrink:0;
}
.brand-mark svg{ width:100%; height:100%; display:block; }

.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text b{
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.2px;
}
.brand-text span{
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.clock-chip{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  font-family: var(--font-mono);
  padding: 6px 12px;
  border:1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: default;
}
.clock-chip .t{ font-size:15px; font-weight:600; letter-spacing:0.5px; }
.clock-chip .z{ font-size:9.5px; color: var(--text-dim); text-transform:uppercase; letter-spacing:0.5px; }

.icon-btn{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius: var(--radius-md);
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor:pointer;
  font-size:17px;
  transition: transform var(--dur) ease, background var(--dur) ease, border-color var(--dur) ease;
}
.icon-btn:hover{ background: var(--surface-2); border-color: var(--accent-2); transform: translateY(-1px); }
.icon-btn:active{ transform: translateY(0); }

/* Settings tab theme picker uses full labeled buttons */
.theme-picker{ display:flex; gap:10px; flex-wrap:wrap; }
.theme-picker button{
  display:flex; align-items:center; gap:8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  cursor:pointer;
  font-weight:600;
  font-size:13.5px;
  transition: all var(--dur) ease;
}
.theme-picker button .sw{
  width:14px; height:14px; border-radius:50%; display:inline-block;
}
.theme-picker button[data-theme-choice="dark"]       .sw{ background: linear-gradient(135deg,#060C1A,#FFB454); }
.theme-picker button[data-theme-choice="pastel"]     .sw{ background: linear-gradient(135deg,#F5EDD8,#B85C00); }
.theme-picker button[data-theme-choice="citrus"]     .sw{ background: linear-gradient(135deg,#FFE566,#B84800); }
.theme-picker button[data-theme-choice="bubblegum"]  .sw{ background: linear-gradient(135deg,#FFB8E0,#900060); }
.theme-picker button[data-theme-choice="lagoon"]     .sw{ background: linear-gradient(135deg,#70E8D0,#003E60); }
.theme-picker button[data-theme-choice="midnight"]   .sw{ background: linear-gradient(135deg,#0D0820,#FF9F54); }
.theme-picker button[data-theme-choice="forest"]     .sw{ background: linear-gradient(135deg,#0A1A0C,#88FF66); }
.theme-picker button[data-theme-choice="sunset"]     .sw{ background: linear-gradient(135deg,#FF6820,#8A0040); }
.theme-picker button[data-theme-choice="rosegold"]   .sw{ background: linear-gradient(135deg,#F2D8CE,#902020); }
.theme-picker button.active{
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ============================================================
   Header layout: brand+controls row, then quote+clock row
   ============================================================ */
.topbar-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.quote-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:12px;
  padding-top:12px;
  border-top: 1px dashed var(--border);
}
.quote-text{
  flex: 1 1 260px;
  min-width: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13.5px;
  color: var(--text-dim);
  line-height:1.5;
  overflow-wrap: anywhere;
}

/* ============================================================
   Tabs
   ============================================================ */
.tabbar{
  display:flex;
  gap:8px;
  padding: 14px 24px 0;
  max-width: 1180px;
  margin: 0 auto;
  /* IMPORTANT: do NOT set overflow:auto here — it clips tooltip ::after pseudo-elements.
     Scrolling is handled by .tabbar-inner below. */
  overflow: visible;
}
.tabbar-inner{
  display:flex;
  gap:8px;
  overflow-x: auto;
  padding-bottom: 2px; /* prevent scrollbar overlapping border */
  scrollbar-width: thin;
  width: 100%;
}
.tab-btn{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 10px 16px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  background: var(--surface);
  color: var(--text-dim);
  cursor:pointer;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--dur) ease;
}
.tab-btn:hover{ color: var(--text); }
.tab-btn.active{
  color: var(--text);
  background: var(--surface-2);
  box-shadow: inset 0 3px 0 var(--accent);
}

.app-main{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 60px;
}

.panel{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  padding: 26px;
  animation: fadeIn 220ms ease;
}
@keyframes fadeIn{ from{ opacity:0; transform: translateY(4px);} to{opacity:1; transform:translateY(0);} }

.panel h2{
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0 0 4px;
}
.panel .sub{
  color: var(--text-dim);
  font-size: 13.5px;
  margin: 0 0 20px;
}

/* ============================================================
   Form elements
   ============================================================ */
.field{ margin-bottom: 16px; }
.field label{
  display:block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.field .hint{
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 5px;
}

input[type="text"], input[type="password"], input[type="date"], input[type="number"], textarea, select{
  width:100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}
input:focus, textarea:focus, select:focus{
  outline:none;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 22%, transparent);
}
textarea{ resize: vertical; min-height: 92px; line-height:1.5; }

.row{ display:flex; gap:14px; flex-wrap:wrap; }
.row > *{ flex:1; min-width: 180px; }

.chip-select{ display:flex; gap:8px; flex-wrap:wrap; }
.chip-select label{
  display:flex; align-items:center; gap:6px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 8px 13px;
  border-radius: 999px;
  cursor:pointer;
  font-size: 13px;
  text-transform:none;
  font-weight:500;
  color: var(--text);
  transition: all var(--dur) ease;
}
.chip-select input{ display:none; }
.chip-select input:checked + span{ color: var(--accent-ink); }
.chip-select label:has(input:checked){
  background: var(--accent);
  border-color: var(--accent);
}
.chip-select label:has(input:checked) span{ color: var(--accent-ink); font-weight:700; }

.platform-select{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 18px; }
.platform-select button{
  display:flex; align-items:center; gap:8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 11px 18px;
  border-radius: var(--radius-md);
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  transition: all var(--dur) ease;
}
.platform-select button.active{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-soft);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  justify-content:center;
  border: none;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  cursor:pointer;
  font-weight: 700;
  font-size: 14px;
  font-family: var(--font-display);
  letter-spacing: 0.2px;
  transition: transform var(--dur) ease, box-shadow var(--dur) ease, opacity var(--dur) ease;
}
.btn:active{ transform: scale(0.98); }
.btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: var(--accent-ink);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover{ box-shadow: var(--shadow-pop); transform: translateY(-1px); }
.btn-primary:disabled{ opacity:0.55; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-ghost{
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-ghost:hover{ border-color: var(--accent-2); }
.btn-sm{ padding: 7px 13px; font-size: 12.5px; border-radius: var(--radius-sm); }
.btn-danger{ background: var(--danger); color:#fff; }

/* ============================================================
   Output cards
   ============================================================ */
.output{ margin-top: 24px; display:flex; flex-direction:column; gap:16px; }
.out-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.out-card .out-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 8px;
}
.out-card .out-head h4{
  margin:0; font-family: var(--font-display); font-size: 14.5px;
  display:flex; align-items:center; gap:7px;
}
.out-card .meta{ font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); }
.out-card .body{ font-size: 14px; line-height:1.65; white-space: pre-wrap; }
.tag-list{ display:flex; flex-wrap:wrap; gap:7px; }
.tag{
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-family: var(--font-mono);
}

.copy-badge{
  font-size: 11px;
  color: var(--success);
  font-family: var(--font-mono);
  opacity:0;
  transition: opacity var(--dur) ease;
}
.copy-badge.show{ opacity:1; }

.loading-line{
  display:flex; align-items:center; gap:10px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 14px 0;
}
.dot-pulse{
  width:8px; height:8px; border-radius:50%; background: var(--accent);
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:0.25; transform:scale(0.8);} 50%{opacity:1; transform:scale(1.15);} }

.error-box{
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  border: 1px solid var(--danger);
  color: var(--text);
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  margin-top: 14px;
}

/* ============================================================
   Idea list (Indian cooking suggestions etc.)
   ============================================================ */
.idea-panel{
  margin-top: 26px;
  border-top: 1px dashed var(--border);
  padding-top: 22px;
}
.idea-panel h3{
  font-family: var(--font-display);
  font-size: 16px;
  margin: 0 0 4px;
  display:flex; align-items:center; gap:8px;
}
.idea-list{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.idea-item{
  display:flex; align-items:center; gap:10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.idea-item.done{ opacity:0.5; }
.idea-item.done .idea-text{ text-decoration: line-through; }
.idea-text{ flex:1; font-size: 13.5px; }
.idea-item input[type="date"]{ width:150px; padding:6px 9px; font-size:12.5px; }
.add-idea-row{ display:flex; gap:8px; margin-top:14px; }
.add-idea-row input{ flex:1; }

/* ============================================================
   Blog suggestions
   ============================================================ */
.suggestion-list{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.suggestion-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  cursor:pointer;
  transition: border-color var(--dur) ease;
}
.suggestion-item:hover{ border-color: var(--accent-2); }

.history-strip{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;
}
.history-chip{
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
}

/* ============================================================
   Settings / Help
   ============================================================ */
.settings-grid{ display:flex; flex-direction:column; gap:18px; max-width: 560px; }
.key-row{ display:flex; gap:8px; }
.key-row input{ flex:1; }

.accordion{ border: 1px solid var(--border); border-radius: var(--radius-md); overflow:hidden; margin-bottom:10px; }
.accordion summary{
  padding: 14px 16px;
  cursor:pointer;
  font-weight:600;
  background: var(--surface);
  list-style:none;
  display:flex; align-items:center; gap:9px;
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion[open] summary{ border-bottom: 1px solid var(--border); }
.accordion .acc-body{
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-dim);
  background: var(--surface-2);
}
.accordion .acc-body code{
  background: var(--surface-3);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  color: var(--text);
}

/* ============================================================
   Utility modals: calculator + calendar
   ============================================================ */
.modal-overlay{
  position: fixed; inset:0; background: rgba(0,0,0,0.5);
  display:flex; align-items:center; justify-content:center;
  z-index: 100; padding: 20px;
  backdrop-filter: blur(3px);
}
.modal{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  width: 100%; max-width: 340px;
  box-shadow: var(--shadow-pop);
  animation: popIn 180ms ease;
}
@keyframes popIn{ from{ opacity:0; transform: scale(0.94);} to{opacity:1; transform:scale(1);} }
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.modal-head h3{ margin:0; font-family: var(--font-display); font-size:16px; }

.calc-display{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 14px;
  text-align:right;
  font-family: var(--font-mono);
  font-size: 26px;
  margin-bottom: 12px;
  overflow-x:auto;
  white-space:nowrap;
}
.calc-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:8px; }
.calc-grid button{
  padding: 14px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  cursor:pointer;
  font-family: var(--font-mono);
  transition: background var(--dur) ease;
}
.calc-grid button:hover{ background: var(--surface-3); }
.calc-grid button.op{ background: var(--accent); color: var(--accent-ink); font-weight:700; border-color: var(--accent); }
.calc-grid button.eq{ background: var(--accent-2); color: var(--accent-2-ink); font-weight:700; grid-column: span 2; border-color: var(--accent-2); }
.calc-grid button.wide{ grid-column: span 2; }

.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cal-head b{ font-family: var(--font-display); }
.cal-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:4px; text-align:center; font-size:12px; }
.cal-grid .dow{ color: var(--text-faint); font-family: var(--font-mono); padding:4px 0; font-size:10.5px; }
.cal-grid .day{ padding:8px 0; border-radius:8px; cursor:default; }
.cal-grid .day.today{ background: var(--accent); color: var(--accent-ink); font-weight:700; }
.cal-grid .day.empty{ visibility:hidden; }

footer.app-footer{
  text-align:center;
  color: var(--text-faint);
  font-size: 12px;
  padding: 30px 0 40px;
  font-family: var(--font-mono);
}

@media (max-width: 640px){
  .topbar{ padding: 12px 14px; }
  .tabbar{ padding: 12px 14px 0; }
  .app-main{ padding: 0 14px 40px; }
  .panel{ padding: 18px; }
  .quote-row{ justify-content: flex-start; }
  .quote-text{ flex-basis: 100%; }
  .clock-chip{ align-self: flex-start; }
}

@media (max-width: 420px){
  .clock-chip .z{ display:none; }
}

/* ============================================================
   Tooltips — rendered as a single fixed div injected by JS
   (avoids all overflow/stacking-context clipping issues)
   ============================================================ */
#radarank-tooltip{
  position: fixed;
  z-index: 9999;
  background: #1a1a2e;
  color: #f0f0f8;
  border: 1px solid #4a4a7a;
  padding: 6px 11px;
  border-radius: 8px;
  font-size: 12px;
  font-family: var(--font-mono);
  line-height: 1.45;
  max-width: 220px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 4px 18px rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity 120ms ease;
  white-space: normal;
  word-break: break-word;
}
#radarank-tooltip.visible{ opacity: 1; }

/* ============================================================
   Greeting toast
   ============================================================ */
.toast{
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: var(--accent-ink);
  padding: 13px 22px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  box-shadow: var(--shadow-pop);
  z-index: 500;
  opacity: 0;
  transition: opacity 260ms ease, transform 260ms ease;
  cursor: pointer;
  max-width: 90vw;
  text-align:center;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   Auth / login overlay
   ============================================================ */
body.locked{ overflow:hidden; }
.auth-overlay{
  position: fixed; inset:0;
  background: var(--bg);
  background-image: radial-gradient(circle at 20% 10%, var(--bg-grid), transparent 50%);
  display:flex; align-items:center; justify-content:center;
  z-index: 1000; padding:20px;
}
.auth-card{
  width:100%; max-width: 380px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-pop);
  text-align:center;
  animation: popIn 220ms ease;
}
.auth-mark{ width:56px; height:56px; margin: 0 auto 14px; }
.auth-mark svg{ width:100%; height:100%; }
.auth-card h2{ font-family: var(--font-display); font-size:20px; margin: 0 0 6px; }
.auth-card .sub{ margin-bottom:20px; }
.auth-card .field{ text-align:left; }
.auth-card .btn{ width:100%; }
.auth-switch{
  margin-top:14px; font-size:12.5px; color: var(--text-dim);
  cursor:pointer; text-decoration:underline; text-underline-offset:3px;
  background:none; border:none; font-family: var(--font-body);
}
.auth-switch:hover{ color: var(--text); }

/* ============================================================
   Tips & Tricks tab extras
   ============================================================ */
.tips-grid{ display:flex; flex-direction:column; gap:16px; }
.tips-list{ margin:0; padding-left: 0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.tips-list li{
  display:flex; gap:9px; align-items:flex-start;
  font-size:14px; line-height:1.55;
}
.tips-list li::before{ content:"✨"; flex-shrink:0; }

/* ============================================================
   Language badge (Generate Text tab)
   ============================================================ */
.lang-badge-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:18px;
}
.lang-badge{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.lang-badge b{ color: var(--text); }
#textLangQuickSelect{
  width:auto;
  padding: 7px 12px;
  font-size: 12.5px;
  border-radius: 999px;
}

/* ============================================================
   Lists — Microsoft To-Do inspired style
   ============================================================ */
#todoList, #shopList, #customList{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
}

.todo-item{
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface);
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  min-height: 56px;
  transition: background var(--dur) ease;
  position: relative;
}
.todo-item:first-child{ border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.todo-item:last-child{ border-bottom: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.todo-item:only-child{ border-radius: var(--radius-sm); border-bottom: none; }
.todo-item:hover{ background: var(--surface-2); }
.todo-item.done{ opacity: 0.6; }
.todo-item.done .todo-text{ text-decoration: line-through; color: var(--text-faint); }

/* Circle checkbox on far left */
.todo-check-wrap{
  flex-shrink: 0;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.todo-circle{
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--text-faint);
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur) ease;
  flex-shrink: 0;
}
.todo-circle:hover{ border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 15%, transparent); }
.todo-item.done .todo-circle{
  border-color: var(--accent-2);
  background: var(--accent-2);
}
.todo-item.done .todo-circle::after{
  content: "✓";
  color: var(--accent-2-ink);
  font-size: 11px;
  font-weight: 700;
}

/* Text content — centre of card */
.todo-main{
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  cursor: default;
}
.todo-text{
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.todo-meta{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 3px;
  flex-wrap: wrap;
}
.todo-when{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 4px;
}
.todo-when.overdue{ color: var(--danger); }
.todo-qty{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}
.todo-note-text{
  font-size: 11px;
  color: var(--text-faint);
  font-style: italic;
}

/* Actions on the right — hidden until hover or always visible on mobile */
.todo-right{
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 10px 0 6px;
  flex-shrink: 0;
}
.todo-star{
  width: 32px; height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 15px;
  color: var(--text-faint);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--dur) ease, background var(--dur) ease;
  flex-shrink: 0;
}
.todo-star:hover{ color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.todo-item.starred .todo-star{ color: var(--accent); }

.todo-action-btns{
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--dur) ease;
}
.todo-item:hover .todo-action-btns,
.todo-item:focus-within .todo-action-btns{ opacity: 1; }

@media (max-width: 640px){
  .todo-action-btns{ opacity: 1; }
}

.todo-icon-btn{
  width: 30px; height: 30px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-faint);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--dur) ease, background var(--dur) ease;
}
.todo-icon-btn:hover{ color: var(--text); background: var(--surface-3); }
.todo-icon-btn.danger:hover{ color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }

/* Wrap all lists in a subtle panel background so bg colour shows as gaps */
.list-wrap{
  background: var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.todo-item.done{ opacity: 0.55; }

/* ============================================================
   Notification bell
   ============================================================ */
.bell-wrap{
  position: relative;
}
.bell-badge{
  position: absolute;
  top: -4px; right: -4px;
  background: var(--accent-3);
  color: #fff;
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  border-radius: 999px;
  min-width: 17px; height: 17px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  pointer-events: none;
  line-height: 1;
}
.notif-dropdown{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;
  max-width: 92vw;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  z-index: 9000;
  overflow: hidden;
  animation: popIn 150ms ease;
}
.notif-dropdown.hidden{ display:none; }
.notif-header{
  padding: 11px 14px 8px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.notif-item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.45;
}
.notif-item:last-child{ border-bottom: none; }
.notif-icon{ font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.notif-empty{
  padding: 16px 14px;
  color: var(--text-faint);
  font-size: 13px;
  text-align: center;
  font-family: var(--font-mono);
}

/* ============================================================
   Prompt tips (Generate Text tab)
   ============================================================ */
.prompt-tip{
  margin-top: 8px;
  padding: 10px 13px;
  background: color-mix(in srgb, var(--accent-2) 10%, var(--surface));
  border-left: 3px solid var(--accent-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.6;
}
.prompt-tip b{ color: var(--text); }
.output-actions{
  display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin-bottom: 4px;
}

/* ============================================================
   Field note (inline label annotation)
   ============================================================ */
.field-note{
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 400;
  font-family: var(--font-body);
}

/* ============================================================
   Input/textarea reset (clear) button
   ============================================================ */
.input-reset-wrap{
  position: relative;
  display: flex;
  align-items: flex-start;
}
.input-reset-wrap input,
.input-reset-wrap textarea{
  flex: 1;
  padding-right: 32px;
}
.reset-field-btn{
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 13px;
  padding: 4px;
  line-height: 1;
  border-radius: 4px;
  transition: color var(--dur) ease;
}
.input-reset-wrap textarea ~ .reset-field-btn{
  top: 10px;
  transform: none;
}
.reset-field-btn:hover{ color: var(--danger); }

/* ============================================================
   Sub-tabs (inside Lists tab)
   ============================================================ */
.sub-tabbar{
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.sub-tab{
  padding: 8px 16px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font-display);
  transition: all var(--dur) ease;
}
.sub-tab:hover{ color: var(--text); background: var(--surface); }
.sub-tab.active{
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
  border-bottom-color: var(--surface);
  box-shadow: inset 0 3px 0 var(--accent-2);
}
.sub-panel{ padding-top: 8px; }
.sub-panel.hidden{ display: none; }

/* ============================================================
   List action bar
   ============================================================ */
.list-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px dashed var(--border);
}

/* ============================================================
   Print styles
   ============================================================ */
@media print {
  .topbar, .tabbar, footer, .btn, .list-actions,
  .add-idea-row, .idea-panel, .modal-overlay,
  .auth-overlay, #radarank-tooltip, .toast{ display: none !important; }
  body{ background: #fff !important; color: #000 !important; }
  .panel{ border: none !important; padding: 0 !important; box-shadow: none !important; }
  .tab-panel.hidden{ display: block !important; }
  .tab-panel:not(#tab-todo):not(#tab-lists){ display: none !important; }
  .sub-panel.hidden{ display: block !important; }
  .idea-item, .todo-item{ break-inside: avoid; }
}

/* ============================================================
   Video Generator Tab
   ============================================================ */
.vid-slide-card{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 10px;
  transition: box-shadow var(--dur) ease;
  cursor: grab;
}
.vid-slide-card:active{ cursor: grabbing; box-shadow: var(--shadow-pop); }
.vid-slide-card.drag-over{ border-color: var(--accent-2); background: var(--surface-2); }

.vid-slide-thumb{
  width: 96px;
  height: 64px;
  flex-shrink: 0;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border);
}
.vid-slide-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.vid-slide-thumb .vid-no-img{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color: var(--text-faint); font-size:22px;
}

.vid-slide-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.vid-slide-num{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.vid-slide-img-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: all var(--dur) ease;
}
.vid-slide-img-btn:hover{ border-color: var(--accent-2); color: var(--accent-2); }
.vid-slide-img-input{ display:none; }

.vid-slide-text{
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  resize: vertical;
  min-height: 52px;
  font-family: var(--font-body);
}
.vid-slide-text:focus{ outline:none; border-color: var(--accent-2); }

.vid-slide-text-style{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.vid-slide-text-style select,
.vid-slide-text-style input[type="range"]{
  padding: 4px 8px;
  font-size: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.vid-slide-actions{
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-end;
}

#vidCanvas{
  display: block;
}

/* Progress bar for recording */
.vid-progress-wrap{
  width: 100%; max-width: 420px;
  height: 6px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
  display:none;
}
.vid-progress-wrap.show{ display:block; }
.vid-progress-bar{
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  border-radius: 999px;
  transition: width 200ms ease;
  width: 0%;
}