:root{ --base-font: 15px; --editor-font: calc(var(--base-font) * 1.5); --radius: 16px; --radius-sm: 12px; --radius-lg: 22px; --shadow: 0 8px 24px rgba(0,0,0,.35); }
    body.theme-dark{ --bg:#0b0c0f; --panel:#12141a; --elev:#171922; --text:#e9ecf2; --muted:#9aa3b2; --accent:#6aa3ff; --accent-2:#7fd4c6; --border:#232634; --toggle-track:#0f1117; --toggle-thumb:#e9ecf2; --icon:#9aa3b2; }
    body.theme-light{ --bg:#f6f7fb; --panel:#ffffff; --elev:#f1f3f9; --text:#131722; --muted:#6b7280; --accent:#2f6df6; --accent-2:#22c1a7; --border:#e3e6ef; --toggle-track:#e5e7eb; --toggle-thumb:#111827; --icon:#6b7280; }
    *{box-sizing:border-box} html,body{height:100%}
    body{ margin:0; background:linear-gradient(180deg,var(--bg),color-mix(in hsl, var(--bg) 80%, #0000)); color:var(--text); font: var(--base-font)/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
    .app{display:grid; grid-template-columns:320px 1fr; gap:16px; height:100%; padding:16px}
    .sidebar{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow)}
    .brand{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border)}
    .logo{display:flex; align-items:center; gap:10px}
    .logo-badge{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 40%, #0000)}
    .brand h1{font-size:14px; letter-spacing:.3px; margin:0; font-weight:600}
    .theme-toggle{display:flex; align-items:center; gap:10px}
    .switch{position:relative; width:60px; height:30px; background:var(--toggle-track); border:1px solid var(--border); border-radius:999px; box-shadow: inset 0 1px 2px rgba(0,0,0,.08)}
    .switch input{appearance:none; width:100%; height:100%; margin:0; outline:none; cursor:pointer;}
    .switch .knob{position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:var(--toggle-thumb); box-shadow:0 2px 8px rgba(0,0,0,.25); transition: transform .25s cubic-bezier(.2,.7,.2,1)}
    .switch input:checked + .knob{ transform: translateX(30px); }
    .switch .icons{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 8px; pointer-events:none}
    .switch svg{width:14px; height:14px; stroke: var(--icon); fill: none; stroke-width: 1.8; opacity:.9}
    .controls{display:flex; gap:8px; padding:10px 16px; border-bottom:1px solid var(--border)}
    .btn{appearance:none; border:none; cursor:pointer; color:var(--text); background:var(--elev); border:1px solid var(--border); padding:10px 12px; border-radius:12px; display:inline-flex; align-items:center; gap:8px; transition:.2s ease all}
    .btn:hover{transform:translateY(-1px); background:color-mix(in srgb, var(--elev) 85%, #fff 15%)}
    .btn.primary{background:linear-gradient(180deg,color-mix(in srgb, var(--accent) 12%, var(--elev) 88%), var(--elev)); border-color: color-mix(in srgb, var(--accent) 40%, var(--border) 60%)}
    .btn.ghost{background:transparent}
    .search{padding:12px 16px 12px; border-bottom:1px solid var(--border)}
    .search input{width:100%; padding:10px 12px; border-radius:10px; background:var(--elev); color:var(--text); border:1px solid var(--border)}
    .list{flex:1 1 auto; overflow:auto; padding:8px}
    .entry{border:1px solid var(--border); border-radius:12px; padding:10px 12px; background:var(--elev); margin:8px; cursor:pointer; transition:.15s ease transform, .2s ease background}
    .entry:hover{background:color-mix(in srgb, var(--elev) 85%, #fff 15%)}
    .entry.active{outline:2px solid var(--accent); background:color-mix(in srgb, var(--elev) 75%, var(--accent) 25%)}
    .entry .top{display:flex; align-items:center; justify-content:space-between}
    .entry .title{font-size:13px; font-weight:600; margin:0;}
    .entry .meta{display:flex; gap:8px; align-items:center; color:var(--muted); font-size:12px; margin-top:4px}
    .entry .snippet{color:color-mix(in srgb, var(--text) 80%, #000 20%); font-size:12px; margin-top:6px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
    .star{color:var(--muted); background:transparent; border:none; cursor:pointer; font-size:18px; line-height:1; padding:4px; border-radius:8px}
    /* White, minimal active star with subtle contrast halo for light mode readability */
    .star.active{ color:#ffffff !important; text-shadow: 0 0 1px rgba(0,0,0,.35); }
    .star:disabled{opacity:.5; cursor:not-allowed}

    .main{display:grid; grid-template-rows:auto auto 1fr auto; gap:12px}
    .toolbar{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:space-between; padding:10px 12px; gap:12px}
    .left,.right{display:flex; align-items:center; gap:8px}
    .wordcount{font-size:12px; color:var(--muted); padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:var(--elev)}
    .save-state{font-size:12px; color:var(--muted)}

    .titlebar{display:flex; align-items:center; gap:8px}
    #title{ flex:1; min-width:0; padding:12px 14px; border-radius:12px; background:var(--panel); border:1px solid var(--border); color:var(--text); font-weight:600; font-size:var(--editor-font); }
    #title::placeholder{ color:var(--muted); font-weight:300; opacity:.9; }

    .editor-wrap{position:relative}
    #editor{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:22px 24px 160px; overflow:auto; height:calc(100vh - 200px); outline:none; box-shadow:var(--shadow); caret-color:color-mix(in srgb, var(--accent) 60%, #fff 40%); font-size:var(--editor-font)}
    #editor p{margin:0 0 10px} #editor ul,#editor ol{margin:0 0 10px 26px} #editor li{margin:4px 0}
    #editor img{max-width:100%; height:auto; border-radius:12px; border:1px solid var(--border); box-shadow:0 8px 24px rgba(0,0,0,.25)}
    #editor.placeholder::before{content: attr(data-placeholder); color:var(--muted); pointer-events:none; white-space:pre-wrap}

    .footer{display:flex; align-items:center; justify-content:space-between; color:var(--muted)} .footer .hint{font-size:12px; opacity:.85}

    body.fs .sidebar{display:none} body.fs .app{grid-template-columns:1fr} body.fs #editor{height:calc(100vh - 152px)}
    @media (max-width:920px){ .app{grid-template-columns:1fr; padding:12px} .sidebar{order:2} .main{order:1} }

/* === Ambient Panel (light/dark friendly) === */
#ambientPanel{
  position: fixed;
  top: 64px;
  right: 24px;
  z-index: 10000;
  width: 320px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: none;
}
#ambientPanel.open{ display:block; }
#ambientPanel h3{ margin: 6px 0 10px; font-size: 14px; letter-spacing:.2px; }
#ambientPanel .opt{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:12px; }
#ambientPanel .opt:hover{ background: color-mix(in srgb, var(--elev) 88%, #fff 12%); }
#ambientPanel .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
#ambientPanel .row .label{ font-size:12px; color: var(--muted); }
#ambientPanel .row input[type="range"]{ width: 160px; }
#ambientPanel .footer{ display:flex; justify-content:space-between; margin-top:10px; gap:8px; }
#ambientBtn.badge-on::after{
  content: '●';
  display:inline-block;
  margin-left:8px;
  font-size:10px;
  line-height:1;
  color: var(--accent);
}
/* Hide the "New" button but keep it available for scripts */
#newBtn { display: none !important; }