/* ══════════════════════════════════════════════════════════
   FLEDGE CORE CSS v3
   Design language: Elevated · Restrained · Luxe
   
   Inspiration: Apple Dark · Arc Browser · Linear · Vercel
   
   Rule: Earn every pixel. Nothing decorative that isn't
   structural. Beauty through proportion and restraint.
   ══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&family=Space+Mono:wght@400;700&display=swap');
/* Global accent teal — used for interactive highlights across all themes */
:root{--teal:#2dd4bf;}

/* ══ THEMES ══════════════════════════════════════════════ */

/* ── OBSIDIAN (default dark) ── */
[data-theme=obsidian]{
  --bg:#0a0a0b;--bg2:#111113;--sf:#18181c;
  --ink:#f5f5f7;--soft:#a0a0a8;--mu:#48484f;
  --ln:rgba(255,255,255,.06);
  --a1:#f5f5f7;--a2:#a0a0a8;
  --gr:linear-gradient(135deg,#f5f5f7 0%,#a0a0a8 100%);
  --gs:rgba(255,255,255,.04);
  --r:14px;--rp:100px;
  --sh:0 1px 0 rgba(255,255,255,.04),0 4px 24px rgba(0,0,0,.4);
  --fd:'Instrument Serif',Georgia,serif;
  --fb:'Inter',system-ui,sans-serif;
  --mono:'Space Mono',monospace;
  --dark:1;
}

/* ── AURORA (dark teal) ── */
[data-theme=aurora]{
  --bg:#050b0f;--bg2:#080f14;--sf:#0e1a22;
  --ink:#e8f4f0;--soft:#6b9b8e;--mu:#2a4a40;
  --ln:rgba(56,210,180,.07);
  --a1:#38d2b4;--a2:#1a9b7f;
  --gr:linear-gradient(135deg,#38d2b4,#0ea5a0);
  --gs:rgba(56,210,180,.05);
  --r:14px;--rp:100px;
  --sh:0 1px 0 rgba(56,210,180,.06),0 4px 24px rgba(0,0,0,.5);
  --fd:'Instrument Serif',Georgia,serif;
  --fb:'Inter',system-ui,sans-serif;
  --mono:'Space Mono',monospace;
  --dark:1;
}

/* ── VOID (pure black) ── */
[data-theme=void]{
  --bg:#000000;--bg2:#050505;--sf:#0d0d0d;
  --ink:#ffffff;--soft:#666;--mu:#333;
  --ln:rgba(255,255,255,.05);
  --a1:#ffffff;--a2:#666;
  --gr:linear-gradient(135deg,#fff 0%,#888 100%);
  --gs:rgba(255,255,255,.03);
  --r:12px;--rp:100px;
  --sh:0 0 0 1px rgba(255,255,255,.07);
  --fd:'Instrument Serif',Georgia,serif;
  --fb:'Inter',system-ui,sans-serif;
  --mono:'Space Mono',monospace;
  --dark:1;
}

/* ── ARCTIC (clean white) ── */
[data-theme=arctic]{
  --bg:#fafafa;--bg2:#f4f4f5;--sf:#ffffff;
  --ink:#09090b;--soft:#52525b;--mu:#a1a1aa;
  --ln:rgba(0,0,0,.07);
  --a1:#09090b;--a2:#52525b;
  --gr:linear-gradient(135deg,#09090b,#52525b);
  --gs:rgba(0,0,0,.03);
  --r:14px;--rp:100px;
  --sh:0 1px 3px rgba(0,0,0,.06),0 1px 0 rgba(0,0,0,.04);
  --fd:'Instrument Serif',Georgia,serif;
  --fb:'Inter',system-ui,sans-serif;
  --mono:'Space Mono',monospace;
  --dark:0;
}

/* ── ECLIPSE (deep purple) ── */
[data-theme=eclipse]{
  --bg:#08070f;--bg2:#0e0d1a;--sf:#141325;
  --ink:#ede9ff;--soft:#7b72b0;--mu:#312e5a;
  --ln:rgba(139,92,246,.08);
  --a1:#a78bfa;--a2:#7c3aed;
  --gr:linear-gradient(135deg,#a78bfa,#7c3aed);
  --gs:rgba(139,92,246,.06);
  --r:14px;--rp:100px;
  --sh:0 1px 0 rgba(139,92,246,.08),0 4px 24px rgba(0,0,0,.5);
  --fd:'Instrument Serif',Georgia,serif;
  --fb:'Inter',system-ui,sans-serif;
  --mono:'Space Mono',monospace;
  --dark:1;
}

/* ── EMBER (warm dark) ── */
[data-theme=ember]{
  --bg:#0c0804;--bg2:#130f06;--sf:#1c1608;
  --ink:#faf0e4;--soft:#8a7058;--mu:#3a2a18;
  --ln:rgba(200,120,40,.08);
  --a1:#f4a636;--a2:#c27820;
  --gr:linear-gradient(135deg,#f4a636,#c27820);
  --gs:rgba(200,120,40,.06);
  --r:14px;--rp:100px;
  --sh:0 1px 0 rgba(200,120,40,.08),0 4px 24px rgba(0,0,0,.5);
  --fd:'Instrument Serif',Georgia,serif;
  --fb:'Inter',system-ui,sans-serif;
  --mono:'Space Mono',monospace;
  --dark:1;
}

/* ── FROST (cool grey) ── */
[data-theme=frost]{
  --bg:#f8f9fc;--bg2:#f1f3f8;--sf:#ffffff;
  --ink:#1a1d29;--soft:#5a607a;--mu:#a8b0c8;
  --ln:rgba(26,29,41,.07);
  --a1:#3b4bdb;--a2:#1e2a8a;
  --gr:linear-gradient(135deg,#3b4bdb,#1e2a8a);
  --gs:rgba(59,75,219,.04);
  --r:14px;--rp:100px;
  --sh:0 1px 3px rgba(26,29,41,.06),0 1px 0 rgba(26,29,41,.04);
  --fd:'Instrument Serif',Georgia,serif;
  --fb:'Inter',system-ui,sans-serif;
  --mono:'Space Mono',monospace;
  --dark:0;
}

/* ── SAKURA (soft pink) ── */
[data-theme=sakura]{
  --bg:#fdf6f8;--bg2:#f9eef2;--sf:#ffffff;
  --ink:#1a0d13;--soft:#7a4a5a;--mu:#c8a0b0;
  --ln:rgba(26,13,19,.07);
  --a1:#c2185b;--a2:#8b0038;
  --gr:linear-gradient(135deg,#c2185b,#8b0038);
  --gs:rgba(194,24,91,.04);
  --r:14px;--rp:100px;
  --sh:0 1px 3px rgba(26,13,19,.06),0 1px 0 rgba(26,13,19,.04);
  --fd:'Instrument Serif',Georgia,serif;
  --fb:'Inter',system-ui,sans-serif;
  --mono:'Space Mono',monospace;
  --dark:0;
}

/* ══ FONT SIZE ══ */
html[data-fontsize=small]  body{font-size:12px!important;}
html[data-fontsize=medium] body{font-size:14px!important;}
html[data-fontsize=large]  body{font-size:16px!important;}
html[data-fontsize=xlarge] body{font-size:18px!important;}

/* ══ RESET ══ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html,body{
  height:100%;overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  text-rendering:optimizeLegibility;
}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--fb);font-size:14px;
  font-weight:400;line-height:1.5;letter-spacing:-.01em;
}

/* ══ APP SHELL ══ */
.fledge-app{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg);}

/* ══ TOPBAR ══ */
.fledge-topbar{
  flex-shrink:0;height:52px;
  display:flex;align-items:center;gap:10px;
  padding:0 16px;
  border-bottom:1px solid var(--ln);
  backdrop-filter:saturate(1.4) blur(24px);
  -webkit-backdrop-filter:saturate(1.4) blur(24px);
  position:relative;z-index:10;
}
[data-theme=obsidian] .fledge-topbar,[data-theme=aurora] .fledge-topbar,
[data-theme=void] .fledge-topbar,[data-theme=eclipse] .fledge-topbar,
[data-theme=ember] .fledge-topbar{background:rgba(10,10,11,.82);}
[data-theme=arctic] .fledge-topbar,[data-theme=frost] .fledge-topbar,
[data-theme=sakura] .fledge-topbar{background:rgba(250,250,250,.88);}

.fledge-logo{
  font-family:'Instrument Serif',serif;font-size:1.2rem;font-weight:400;
  font-style:italic;letter-spacing:-.02em;color:var(--ink);
  background:var(--gr);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.fledge-page-title{
  flex:1;text-align:center;
  font-size:.82rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);
}
.fledge-back{
  color:var(--soft);background:none;border:none;
  font-family:var(--fb);font-size:.82rem;font-weight:500;
  cursor:pointer;padding:6px 2px;display:flex;align-items:center;gap:4px;
}
.fledge-back::before{content:'←';font-size:.9rem;}
.fledge-icon-btn{
  width:32px;height:32px;border-radius:50%;
  background:var(--gs);border:1px solid var(--ln);
  display:flex;align-items:center;justify-content:center;
  font-size:.88rem;cursor:pointer;transition:all .2s;
  flex-shrink:0;
}
.fledge-icon-btn:hover{border-color:var(--soft);}
.fledge-icon-btn:active{transform:scale(.92);}

/* ══ BOTTOM NAV ══ */
.fledge-bnav{
  flex-shrink:0;height:58px;
  display:flex;align-items:stretch;
  border-top:1px solid var(--ln);
  backdrop-filter:saturate(1.4) blur(24px);
  -webkit-backdrop-filter:saturate(1.4) blur(24px);
  position:fixed;bottom:0;left:0;right:0;z-index:100;
}
[data-theme=obsidian] .fledge-bnav,[data-theme=aurora] .fledge-bnav,
[data-theme=void] .fledge-bnav,[data-theme=eclipse] .fledge-bnav,
[data-theme=ember] .fledge-bnav{background:rgba(10,10,11,.9);}
[data-theme=arctic] .fledge-bnav,[data-theme=frost] .fledge-bnav,
[data-theme=sakura] .fledge-bnav{background:rgba(250,250,250,.92);}
.fledge-nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;cursor:pointer;
  border:none;background:none;padding:4px 0;
  transition:opacity .15s;
}
.fledge-nav-item:active{opacity:.6;}
.fledge-nav-icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;transition:transform .2s;}
.fledge-nav-label{
  font-size:.56rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--mu);
}
.fledge-nav-item.active .fledge-nav-icon{transform:scale(1.1);}
.fledge-nav-item.active .fledge-nav-label{
  background:var(--gr);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
}

/* ══ SCROLL ══ */
.fledge-scroll{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--ln) transparent;

  padding-bottom:70px;
}
.fledge-scroll::-webkit-scrollbar{width:3px;}
.fledge-scroll::-webkit-scrollbar-thumb{background:var(--ln);border-radius:2px;}
.fledge-wrap{padding:12px 16px 80px;max-width:600px;margin:0 auto;}

/* ══ SECTION LABEL ══ */
.fledge-section{
  font-size:.68rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mu);
  margin:20px 0 8px;
}

/* ══ CARDS ══ */
.fledge-card{
  background:var(--sf);border:1px solid var(--ln);
  border-radius:var(--r);padding:16px;
  margin-bottom:8px;box-shadow:var(--sh);
  transition:border-color .2s;
}
.fledge-card:active{border-color:var(--soft);}

/* ══ ROW ══ */
.fledge-row{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;background:var(--sf);
  border:1px solid var(--ln);border-radius:var(--r);
  margin-bottom:6px;cursor:pointer;
  transition:border-color .2s;box-shadow:var(--sh);
}
.fledge-row:hover{border-color:var(--soft);}
.fledge-row-icon{font-size:1rem;width:28px;text-align:center;flex-shrink:0;}
.fledge-row-body{flex:1;min-width:0;}
.fledge-row-title{font-size:.9rem;font-weight:500;color:var(--ink);}
.fledge-row-sub{font-size:.75rem;color:var(--mu);margin-top:2px;}

/* ══ TOGGLE ══ */
.fledge-toggle{
  width:38px;height:22px;border-radius:11px;
  cursor:pointer;flex-shrink:0;position:relative;border:none;
  transition:background .25s;
}
.fledge-toggle.on{background:var(--gr);}
.fledge-toggle.off{background:var(--ln);}
.fledge-toggle::after{
  content:'';position:absolute;top:3px;
  width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);
  transition:left .2s cubic-bezier(.34,1.56,.64,1);
}
.fledge-toggle.on::after{left:19px;}
.fledge-toggle.off::after{left:3px;}

/* ══ BUTTONS ══ */
.fledge-btn-primary{
  width:100%;padding:13px;border-radius:var(--rp);
  background:var(--ink);color:var(--bg);
  border:none;font-family:var(--fb);font-size:.9rem;
  font-weight:600;letter-spacing:-.01em;cursor:pointer;
  transition:opacity .2s,transform .1s;
}
.fledge-btn-primary:active{opacity:.8;transform:scale(.99);}
.fledge-btn-ghost{
  padding:8px 16px;border-radius:var(--rp);
  background:var(--gs);border:1px solid var(--ln);
  font-family:var(--fb);font-size:.8rem;font-weight:500;
  color:var(--soft);cursor:pointer;letter-spacing:-.01em;
}

/* ══ TABS ══ */
.fledge-tabs{
  flex-shrink:0;display:flex;overflow-x:auto;
  scrollbar-width:none;border-bottom:1px solid var(--ln);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.fledge-tabs::-webkit-scrollbar{display:none;}
[data-theme=obsidian] .fledge-tabs,[data-theme=aurora] .fledge-tabs,
[data-theme=void] .fledge-tabs,[data-theme=eclipse] .fledge-tabs,
[data-theme=ember] .fledge-tabs{background:rgba(10,10,11,.88);}
[data-theme=arctic] .fledge-tabs,[data-theme=frost] .fledge-tabs,
[data-theme=sakura] .fledge-tabs{background:rgba(250,250,250,.92);}
.fledge-tab{
  flex-shrink:0;padding:10px 18px;font-size:.8rem;font-weight:500;
  cursor:pointer;color:var(--mu);
  border:none;background:none;
  border-bottom:1.5px solid transparent;
  white-space:nowrap;font-family:var(--fb);
  letter-spacing:-.01em;transition:color .2s;
}
.fledge-tab.active{color:var(--ink);border-bottom-color:var(--ink);}

/* ══ AI BODY INPUT ══ */
.fledge-ai-bar{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  border-top:1px solid var(--ln);
}
[data-theme=obsidian] .fledge-ai-bar,[data-theme=void] .fledge-ai-bar,
[data-theme=eclipse] .fledge-ai-bar,[data-theme=ember] .fledge-ai-bar,
[data-theme=aurora] .fledge-ai-bar{background:rgba(10,10,11,.94);}
[data-theme=arctic] .fledge-ai-bar,[data-theme=frost] .fledge-ai-bar,
[data-theme=sakura] .fledge-ai-bar{background:rgba(250,250,250,.96);}
.fledge-ai-input{
  flex:1;background:var(--bg2);border:1px solid var(--ln);
  border-radius:var(--rp);padding:10px 14px;
  font-family:var(--fb);font-size:.88rem;color:var(--ink);
  outline:none;letter-spacing:-.01em;transition:border-color .2s;
}
.fledge-ai-input:focus{border-color:var(--soft);}
.fledge-ai-input::placeholder{color:var(--mu);}
.fledge-ai-send{
  width:36px;height:36px;border-radius:50%;
  background:var(--ink);border:none;cursor:pointer;
  color:var(--bg);font-size:.85rem;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.fledge-ai-voice,.fledge-ai-camera{
  width:36px;height:36px;border-radius:50%;
  background:var(--gs);border:1px solid var(--ln);
  cursor:pointer;font-size:.85rem;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s;
}
.fledge-ai-voice:hover,.fledge-ai-camera:hover{border-color:var(--soft);}
.fledge-ai-voice.recording{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.4);}

/* ══ THUMBNAILS ══ */
.fledge-thumb-card{
  background:var(--sf);border:1px solid var(--ln);
  border-radius:var(--r);overflow:hidden;
  margin-bottom:8px;box-shadow:var(--sh);cursor:pointer;
}
.fledge-thumb-img{width:100%;height:160px;object-fit:cover;display:block;background:var(--bg2);}
.fledge-thumb-img.loading{
  background:linear-gradient(90deg,var(--bg2) 25%,var(--gs) 50%,var(--bg2) 75%);
  background-size:200% 100%;animation:shimmer 1.6s infinite;
}
.fledge-thumb-body{padding:12px 14px;}
.fledge-thumb-title{font-size:.88rem;font-weight:500;color:var(--ink);margin-bottom:4px;line-height:1.4;}
.fledge-thumb-meta{font-size:.72rem;color:var(--mu);}

/* ══ STATUS BADGE ══ */
.fledge-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:100px;
  font-size:.68rem;font-weight:600;letter-spacing:.02em;
}
.fledge-badge-ok{background:rgba(34,197,94,.1);color:#22c55e;}
.fledge-badge-warn{background:rgba(245,158,11,.1);color:#f59e0b;}
.fledge-badge-err{background:rgba(239,68,68,.1);color:#ef4444;}

/* ══ TOAST ══ */
.fledge-toast{
  position:fixed;bottom:70px;left:50%;
  transform:translateX(-50%) translateY(8px);
  background:var(--sf);color:var(--ink);
  border:1px solid var(--ln);
  padding:10px 18px;border-radius:100px;
  font-size:.8rem;font-weight:500;letter-spacing:-.01em;
  opacity:0;pointer-events:none;
  transition:all .25s;z-index:600;white-space:nowrap;
  box-shadow:0 8px 32px rgba(0,0,0,.3);
}
.fledge-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ══ OFFLINE ══ */
.fledge-offline-bar{
  position:fixed;top:0;left:0;right:0;height:2px;
  background:rgba(239,68,68,.7);display:none;z-index:999;
}
.fledge-offline-bar.show{display:block;}

/* ══ ANIMATIONS ══ */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
@keyframes pulse{
  0%,100%{opacity:1;}50%{opacity:.5;}
}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes slideUp{
  from{transform:translateY(40px);opacity:0;}
  to{transform:none;opacity:1;}
}

/* ══ REFINED UI ELEMENTS ══ */

/* Status indicators - no emoji */
.status-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  display:inline-block;
}
.dot-green{background:#22c55e;}
.dot-amber{background:#f59e0b;}
.dot-grey{background:#6b7280;}

/* Metric card */
.metric-card{
  background:var(--sf);border:1px solid var(--ln);
  border-radius:var(--r);padding:16px;box-shadow:var(--sh);
}
.metric-val{
  font-size:2rem;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1;
  letter-spacing:-.04em;font-family:var(--fd);
}
.metric-label{font-size:.72rem;color:var(--mu);margin-top:4px;font-weight:500;letter-spacing:.02em;}
.metric-change{font-size:.72rem;font-weight:600;margin-top:2px;}
.metric-up{color:#22c55e;}
.metric-down{color:#ef4444;}
.metric-flat{color:var(--mu);}

/* Progress bar - refined */
.prog-bar{
  height:3px;border-radius:2px;background:var(--ln);overflow:hidden;
}
.prog-fill{
  height:100%;border-radius:2px;
  background:var(--gr);transition:width .6s ease;
}

/* Tag pill */
.tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:100px;
  font-size:.68rem;font-weight:600;letter-spacing:.02em;
  background:var(--bg2);border:1px solid var(--ln);color:var(--mu);
}
.tag-accent{background:var(--gs);border-color:var(--soft);color:var(--soft);}

/* Divider */
.divider{height:1px;background:var(--ln);margin:12px 0;}

/* Empty state */
.empty-state{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:48px 20px;gap:10px;
  text-align:center;
}
.empty-state-icon{
  width:48px;height:48px;border-radius:50%;
  background:var(--bg2);border:1px solid var(--ln);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;margin-bottom:4px;
}
.empty-state-title{font-size:.9rem;font-weight:600;color:var(--ink);}
.empty-state-sub{font-size:.78rem;color:var(--mu);line-height:1.6;}

/* Shimmer skeleton */
.skeleton{
  background:linear-gradient(90deg,var(--bg2) 25%,var(--ln) 50%,var(--bg2) 75%);
  background-size:200% 100%;animation:shimmer 1.6s infinite;
  border-radius:6px;
}