/* ===============================
   Starsystem — Theming refresh
   =============================== */
:root{
  --topbar-h:56px; --sidebar-w:320px; --page-pad:20px; --content-max:1600px; --content-gutter-fix:6px;

  /* DARK THEME (defaults) */
  --bg:#101010;
  --bg-grad:#101010;
  --panel:#3C3C3Ccc;
  --panel-border:#5B5B5B;
  --ink:#F0F0F0;
  --muted:#B5B5B5;
  --brand:#8DC3B5;

  /* Accents */
  --accent-primary:#8DC3B5;
  --accent-secondary:#F4743B;

  /* Component tints */
  --surface-soft:#2B2B2B;
  --chip-bg:#2d2d2d;

  /* Rings/Shadows */
  --ring:0 0 0 2px color-mix(in srgb, var(--accent-primary) 45%, transparent);
  --shadow-1:0 10px 30px rgba(0,0,0,.35);
  --blur:blur(10px);

  /* Map — pure accent */
  --map-node: var(--accent-primary);
  --map-stroke:#1b1b1b;
  --map-link:#5B5B5B;
  --map-text:#EDEDED;

  /* Entry icons */
  --icon-pen:#B8D6BC;
  --icon-mic:#8DC3B5;

  /* Buttons */
  --btn-ink:#0a0a0a;
}

:root[data-theme="light"]{
  --bg:#DDDDDD;
  --bg-grad:#DDDDDD;
  --panel:#FFFFFFcc;
  --panel-border:#A8BBB4;
  --ink:#485665;
  --muted:#6f8087;
  --brand:#485665;

  --accent-primary:#F4743B;
  --accent-secondary:#B8D6BC;

  --surface-soft:#F3F6F5;
  --chip-bg:#EEF3F1;

  --ring:0 0 0 2px color-mix(in srgb, var(--accent-primary) 35%, transparent);
  --shadow-1:0 12px 28px rgba(40,60,100,.18);

  --map-node: var(--accent-primary);
  --map-stroke:#FFFFFF;
  --map-link:var(--accent-primary);
  --map-text:#000000;

  --icon-pen:#A8BBB4;
  --icon-mic:#F4743B;

  --btn-ink:#ffffff;
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(1200px 500px at 50% -180px, var(--bg-grad) 0%, var(--bg) 45%) fixed,
    linear-gradient(180deg, var(--bg), var(--bg));
  font:15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing:.01em;
}
.glass{ background:var(--panel); border:1px solid var(--panel-border); border-radius:16px; box-shadow:var(--shadow-1); backdrop-filter:var(--blur); }
.muted{ color:var(--muted); } .tiny{ font-size:12px; } .mt8{ margin-top:8px; }
.hidden{ display:none !important; }

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:0; z-index:50; height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between; padding:8px var(--page-pad);
  border-bottom:1px solid var(--panel-border); background:color-mix(in hsl, var(--bg) 70%, transparent); backdrop-filter:blur(8px);
}
.brand{ font-weight:800; letter-spacing:.24em; color:var(--brand); font-size:14px; }
.top-actions{ display:flex; gap:8px; align-items:center; }
.top-actions .auth{ display:flex; gap:8px; align-items:center; } .top-actions .auth span{ color:var(--muted); }
.demo-chip{ padding:3px 8px; border-radius:999px; background:var(--chip-bg); color:var(--ink); font-size:12px; border:1px solid var(--panel-border); }

/* Accent on nav buttons */
.top-actions .ghost.fav{ color: var(--accent-primary); }
.top-actions .ghost.fav:hover{ text-decoration: underline; text-underline-offset: 3px; }

/* Theme button uses accent color */
.icon-btn{
  display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px; padding:0; line-height:0; border:1px solid transparent;
  color: var(--accent-primary);
}
.icon-btn svg{ width:18px; height:18px; display:block; }
#icon-sun{ display:none; }
:root[data-theme="light"] #icon-moon{ display:none; }
:root[data-theme="light"] #icon-sun{ display:block; }

/* ===== Buttons ===== */
button{
  appearance:none; border:1px solid var(--panel-border); background:var(--surface-soft); color:var(--ink);
  padding:10px 12px; border-radius:12px; cursor:pointer; transition:.18s transform,.18s border-color,.18s background,.18s color;
}
button:hover{ transform:translateY(-1px); border-color: color-mix(in srgb, var(--accent-primary) 40%, var(--panel-border)); }
button:active{ transform:translateY(0); }
button.primary{
  background: var(--accent-primary); border-color: color-mix(in srgb, var(--accent-primary) 75%, var(--panel-border)); color: var(--btn-ink);
  font-weight:700;
}
button.secondary{ border-color: color-mix(in srgb, var(--accent-secondary) 40%, var(--panel-border)); }
button.ghost{ background:transparent; border-color:transparent; color: color-mix(in srgb, var(--ink) 85%, var(--muted)); }
button.full{ width:100%; }

/* Ghost with accent border (New Note) */
button.fav-border{
  border:1px dashed color-mix(in srgb, var(--accent-primary) 60%, transparent);
  color: var(--accent-primary);
  background: transparent;
}
button.fav-border:hover{ border-style: solid; }

/* Record active */
button.record[aria-pressed="true"]{
  background: color-mix(in srgb, var(--accent-secondary) 18%, var(--surface-soft));
  border-color: color-mix(in srgb, var(--accent-secondary) 55%, var(--panel-border));
}

/* ===== Sidebar ===== */
.sidebar{ position:fixed; top:var(--topbar-h); left:0; width:var(--sidebar-w); height:calc(100vh - var(--topbar-h)); padding:var(--page-pad); }
.sidebar-card{ height:100%; display:flex; flex-direction:column; gap:12px; padding:12px 14px 12px 16px; }
.side-sep{ border:0; height:1px; background:var(--panel-border); margin:8px 0; }

.username-row{ display:grid; grid-template-columns:32px 1fr; align-items:center; gap:10px; padding-left:2px; }
.avatar{ width:32px; height:32px; background:var(--surface-soft); border-radius:50%; overflow:hidden; }
.avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.un{ color:var(--muted); line-height:1; transform:translateY(.5px); }

/* Entries */
.panel-title{ margin:0 0 6px 2px; font-size:13px; letter-spacing:.08em; color: color-mix(in srgb, var(--ink) 85%, var(--muted)); 
	display: flex;
    align-items: center;
    justify-content: space-between;
}
.entries{ display:flex; flex-direction:column; gap:8px; min-height:0; flex:1 1 auto; overflow:auto; padding-right:2px; }

.entry{
  display:grid; grid-template-columns: 22px 1fr auto; gap:8px; align-items:center;
  padding:8px; border:1px solid var(--panel-border); border-radius:12px; background: color-mix(in srgb, var(--surface-soft) 85%, transparent);
}
.entry .icon{ width:22px; height:22px; border-radius:6px; display:grid; place-items:center; }
.entry .icon.pen { background:color-mix(in srgb, var(--icon-pen) 25%, transparent); }
.entry .icon.mic { background:color-mix(in srgb, var(--icon-mic) 25%, transparent); }
.entry .icon svg{ width:14px; height:14px; color: color-mix(in srgb, var(--ink) 90%, var(--icon-pen)); }
.entry .title{ font-weight:600; }
.entry .date{ color:var(--muted); font-size:12px; }

/* Sidebar footer + trash + built-by */
.sidebar-footer{
  margin-top:auto; display:flex; align-items:center; gap:10px; padding-top:8px;
}
.trash-btn{ width:36px; height:36px; border-radius:9px; padding:0; display:grid; place-items:center; color:var(--ink); border:1px solid var(--panel-border); background:var(--surface-soft); }
.trash-btn svg{ width:18px; height:18px; display:block; }
.trash-btn.drag-over{ outline:2px dashed var(--accent-primary); outline-offset:2px; }

.built-by{ color:var(--muted); font-size:12px; margin-left:auto; text-align:right; }
.built-by a{ color: var(--accent-primary); text-decoration: none; }
.built-by a:hover{ text-decoration: underline; }

/* ===== Content column ===== */
main{ margin-left:calc(var(--sidebar-w) + var(--page-pad) + var(--content-gutter-fix)); padding:var(--page-pad); max-width:var(--content-max); }
.view{ display:none; } .view.active{ display:block; } .content{ display:block; }

/* ===== Editor ===== */
.doc{ min-height:560px; padding:14px 16px; }
.doc-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.title-input{
  flex:1; min-width:0; font-size:28px; background:transparent; color:var(--ink);
  border:none; outline:none; font-weight:800; letter-spacing:.015em; padding-left:2px;
}
.title-input:focus{ box-shadow: var(--ring); border-radius:8px; }
.doc-date{ color:var(--muted); white-space:nowrap; }

/* Rich text editor */
.note-editor{
  margin-top:12px; width:100%; min-height:460px;
  background: var(--surface-soft); color:var(--ink);
  border:1px solid var(--panel-border); border-radius:12px; padding:16px 18px; outline:none;
}
.note-editor:empty:before{ content:attr(placeholder); color:var(--muted); }

/* Toolbar (below editor) */
.toolbar{
  display:flex; align-items:center; gap:6px; margin-top:10px;
  border:1px solid var(--panel-border); border-radius:10px; padding:6px 8px; background: var(--chip-bg);
}
.tbtn{ border:1px solid transparent; background:transparent; color:var(--ink); padding:6px 8px; border-radius:8px; }
.tbtn:hover{ background: color-mix(in srgb, var(--accent-primary) 12%, transparent); }
.tsep{ width:1px; height:20px; background:var(--panel-border); margin:0 2px; }
.tselect{ display:flex; align-items:center; gap:6px; }
.ts-label{ color:var(--muted); font-size:12px; }
.toolbar select{ background:transparent; color:var(--ink); border:1px solid var(--panel-border); border-radius:8px; padding:4px 8px; }

/* Actions */
.actions{ display:flex; gap:8px; align-items:center; margin-top:12px; }

/* Related */
.related-card{ margin-top:16px; position:sticky; bottom:16px; padding:14px 16px; max-width:100%; }
.rc-title{ font-size:13px; letter-spacing:.08em; color: color-mix(in srgb, var(--ink) 85%, var(--muted)); margin-bottom:6px; padding-left:2px; }
.rc-list{ list-style:none; margin:0; padding:0; display:flex; gap:8px; overflow:auto; }
.rc-list li{ white-space:nowrap; padding:6px 8px; border:1px solid var(--panel-border); border-radius:10px; background: var(--chip-bg); }
.rc-list a{ color: var(--accent-secondary); text-decoration:none; }
.rc-list a:hover{ text-decoration:underline; }

/* ===== Map ===== */
.map-wrap{ height: calc(100vh - 180px); padding:14px 16px; overflow:hidden; }
#map-canvas{ width:100%; height:100%; background: var(--surface-soft); border:1px solid var(--panel-border); border-radius:12px; cursor: grab; }
#map-canvas:active{ cursor: grabbing; }

/* Mic pulse */
.mic-dot{ width:8px; height:8px; border-radius:50%; background:#e85a5a; margin-right:6px; display:inline-block; transform:translateY(1px); opacity:.35; }
button.record[aria-pressed="true"] .mic-dot{ animation:pulse 1s infinite; opacity:1; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(232,90,90,.6);} 70%{ box-shadow:0 0 0 8px rgba(232,90,90,0);} 100%{ box-shadow:0 0 0 0 rgba(232,90,90,0);} }

/* Transcription progress */
.progress { position: relative; height: 4px; background: var(--panel-border); border-radius: 999px; overflow: hidden; }
.progress.hidden { display: none; }
.progress .bar { width: 40%; height: 100%; background: var(--accent-primary); animation: slide 1.1s linear infinite; }
@keyframes slide { 0% { transform: translateX(-100%);} 100% { transform: translateX(250%);} }

/* Auth/Demo visibility */
body[data-auth="off"] #btn-signout { display:none; }
body[data-auth="on"]  #btn-signin { display:none; }
body[data-demo="on"] .demo-chip{ display:inline-block; } body[data-demo="off"] .demo-chip{ display:none; }

/* ===== Waveform audio (new, compact) ===== */
.audio-player { display:flex; flex-direction:column; gap:6px; padding:8px; border:1px solid var(--panel-border); border-radius:12px; background: var(--chip-bg); margin: 10px 0 12px; }
.audio-player .controls { display:flex; align-items:center; gap:8px; font-size:12px; }
.audio-player .controls button { padding:4px 8px; border-radius:8px; }
.audio-player .times { margin-left:auto; letter-spacing:.04em; }
.audio-player .download a { text-decoration:none; }
.wavesurfer { height:56px; }

/* Responsive */
@media (max-width:980px){ :root{ --sidebar-w:280px; } }
@media (max-width:820px){
  .sidebar{ position:static; width:auto; height:auto; }
  main{ margin-left:0; }
}