/* neo.css — mockup-grade UI (v3)  */
/* Typography & reset */
:root{
  --bg: #0b1220;
  --panel: rgba(255,255,255,.65);
  --panel-dark: rgba(17,24,39,.7);
  --stroke: rgba(148,163,184,.35);
  --ink: #0f172a;
  --ink-inv: #e5e7eb;
  --accent: #7c3aed;       /* Twilight default */
  --accent-2: #22d3ee;
  --shadow: 0 18px 48px rgba(2,6,23,.20);
  --radius: 18px;
  --tile-bg: rgba(255,255,255,.75);
  --tile-bg-dark: rgba(17,24,39,.6);
  --grid-gap: 16px;
  --glass: blur(12px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--ink);
  background:
    radial-gradient(900px 600px at -10% -10%, color-mix(in oklab, var(--accent) 35%, #a8a29e) 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 10%, color-mix(in oklab, var(--accent-2) 25%, #a8a29e) 0%, transparent 60%),
    linear-gradient(180deg, #f8fafc, #eef2ff);
}
.dark body{
  color:var(--ink-inv);
  background:
    radial-gradient(900px 600px at -10% -10%, color-mix(in oklab, var(--accent) 25%, #0b1220) 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 10%, color-mix(in oklab, var(--accent-2) 18%, #0b1220) 0%, transparent 60%),
    linear-gradient(180deg, #0b1220, #0f172a);
}
a{color:inherit; text-decoration:none}
.container{max-width:1280px; margin:0 auto; padding:16px}
.card{
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  background: radial-gradient(80% 100% at 0 0, rgba(255,255,255,.75), transparent 60%),
              linear-gradient(180deg, var(--panel), rgba(255,255,255,.45));
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass);
}
.dark .card{
  background: radial-gradient(80% 100% at 0 0, rgba(30,41,59,.6), transparent 60%),
              linear-gradient(180deg, var(--panel-dark), rgba(15,23,42,.5));
  box-shadow: 0 25px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.badge{display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; padding:.25rem .6rem; border:1px solid var(--stroke); border-radius:999px; opacity:.9}
.hr{height:1px; background:var(--stroke); margin:10px 0}
/* Top nav (replaces sidebar) */
.topbar{
  display:flex; align-items:center; justify-content:space-between; padding:10px 14px;
  border-radius: var(--radius);
}
.brand{display:flex; gap:10px; align-items:center; font-weight:800; font-size:18px}
.brand .logo{
  width:36px; height:36px; display:grid; place-items:center; border-radius:10px;
  border:1px solid var(--stroke);
  background: conic-gradient(from 210deg, var(--accent), var(--accent-2));
  color:#fff; font-weight:900; box-shadow: inset 0 0 1px rgba(255,255,255,.6);
}
.tabs{display:flex; gap:8px}
.tab{display:inline-flex; align-items:center; gap:.5rem; padding:.6rem .9rem; border-radius:12px; border:1px solid transparent; transition:.16s}
.tab:hover{border-color:var(--stroke); background:rgba(148,163,184,.12)}
.tab.active{border-color:color-mix(in oklab, var(--accent) 35%, #94a3b8); background:rgba(148,163,184,.16)}
.btn{display:inline-flex; align-items:center; gap:.55rem; padding:.7rem 1rem; border-radius:12px; border:1px solid color-mix(in oklab, var(--accent) 35%, #94a3b8); background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.35)); cursor:pointer; transition:.16s}
.btn:hover{box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent); transform:translateY(-1px)}
.dark .btn{background:linear-gradient(180deg, rgba(30,41,59,.7), rgba(15,23,42,.5))}
.btn-primary{border-color:var(--accent); background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 40%, #fff), color-mix(in oklab, var(--accent) 15%, #fff)); color:#0b1324}
.dark .btn-primary{color:#e2e8f0; background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 35%, #0b1220), color-mix(in oklab, var(--accent) 15%, #0b1220))}
.icon{width:18px; height:18px}
/* Tiles on home */
.tiles{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--grid-gap)}
@media (max-width:1100px){ .tiles{grid-template-columns:1fr} }
.tile{
  border:1px solid var(--stroke); border-radius:16px; padding:14px;
  background:var(--tile-bg); transition:.2s;
}
.dark .tile{ background:var(--tile-bg-dark) }
.tile:hover{ transform: translateY(-2px); box-shadow:0 10px 28px rgba(2,6,23,.18) }
.tile-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.tile-head h2{font-size:18px; margin:0; display:flex; gap:8px; align-items:center}
/* Files grid */
.grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px}
@media (max-width:1100px){ .grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
.cell{
  border:1px solid var(--stroke); border-radius:14px; padding:12px;
  background:rgba(255,255,255,.75); display:flex; gap:10px; align-items:center; justify-content:space-between;
}
.dark .cell{background:rgba(15,23,42,.45)}
.cell .meta{opacity:.75; font-size:.82rem}
.file-head{display:flex; gap:10px; align-items:center}
.thumb{width:36px; height:36px; border-radius:10px; border:1px solid var(--stroke); display:grid; place-items:center; background:radial-gradient(80% 100% at 0 0, rgba(255,255,255,.8), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.4))}
.dark .thumb{background:radial-gradient(80% 100% at 0 0, rgba(30,41,59,.7), transparent 60%), linear-gradient(180deg, rgba(30,41,59,.6), rgba(15,23,42,.45))}
/* Breadcrumbs */
.breadcrumbs{display:flex; gap:8px; flex-wrap:wrap; margin:6px 0}
.crumb{display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .6rem; border:1px solid var(--stroke); border-radius:999px}
/* Error & empty */
.empty{opacity:.7; border:1px dashed var(--stroke); border-radius:.8rem; padding:.8rem; text-align:center}
.errorbox{border:1px solid #ef4444; background:#fee2e2; color:#7f1d1d; padding:10px; border-radius:10px}
.dark .errorbox{ background:#7f1d1d; color:#fee2e2 }
/* Calendar */
.kcal{border:1px solid var(--stroke); border-radius:16px; overflow:hidden}
.kcal .toolbar{display:flex; gap:8px; justify-content:space-between; padding:10px; border-bottom:1px solid var(--stroke); background:rgba(148,163,184,.1)}
.kcal .view{padding:10px}
.k-month{display:grid; grid-template-columns:repeat(7,1fr); gap:8px}
.k-day{border:1px solid var(--stroke); border-radius:12px; padding:8px; min-height:110px; position:relative; cursor:pointer}
.k-day:hover{outline:2px dashed color-mix(in oklab, var(--accent) 55%, #94a3b8); outline-offset:2px}
.k-day .date{font-size:.8rem; opacity:.75}
.k-dots{display:flex; gap:4px; flex-wrap:wrap; margin-top:4px}
.dot{width:6px; height:6px; border-radius:999px}
.k-week{display:grid; grid-template-columns:80px repeat(7, 1fr)}
.k-hours .h{height:40px; border-bottom:1px solid var(--stroke); display:flex; justify-content:flex-end; align-items:center; padding-right:6px}
.k-col{position:relative; border-left:1px solid var(--stroke)}
.k-col .head{padding:6px; text-align:center; border-bottom:1px solid var(--stroke); background:rgba(148,163,184,.12); position:sticky; top:0}
.k-cell{height:40px; border-bottom:1px solid var(--stroke); cursor:crosshair}
.event{position:absolute; left:4px; right:4px; border:1px solid var(--stroke); border-radius:10px; box-shadow:0 6px 14px rgba(2,6,23,.18); overflow:hidden; background:rgba(255,255,255,.65)}
.event .cap{font-weight:700; font-size:.78rem; padding:.2rem .35rem}
.dark .event{background:rgba(17,24,39,.6)}
/* Paper checklist */
.paper{
  position:relative; border-radius:14px; background:#fff;
  box-shadow:0 10px 30px rgba(2,6,23,.10), inset 0 0 0 1px var(--stroke);
  padding:18px 18px 12px 64px;
  background-image:
    repeating-linear-gradient(to bottom, rgba(100,116,139,.18) 0, rgba(100,116,139,.18) 1px, transparent 1px, transparent 28px),
    radial-gradient(circle, rgba(2,6,23,.35) 0, rgba(2,6,23,.35) 6px, transparent 6px);
  background-size:100% 28px, 14px 40px;
  background-position:0 0, 18px 20px; background-repeat:repeat, repeat-y; min-height:220px
}
.paper::before{content:""; position:absolute; top:0; bottom:0; left:44px; width:2px; background:color-mix(in oklab, var(--accent) 55%, rgba(255,255,255,.2)); box-shadow:1px 0 0 rgba(255,255,255,.75)}
.row{display:flex; align-items:center; gap:.6rem}
.todo-row{padding:.35rem .5rem; border-radius:.55rem; transition:.12s}
.todo-row:hover{background:rgba(148,163,184,.10)}
.txt{flex:1; white-space:pre-wrap}
.done{text-decoration:line-through; opacity:.65}
.drag-over{outline:2px dashed color-mix(in oklab, var(--accent) 60%, #94a3b8)}
/* Theme picker modal */
.modal{position:fixed; inset:0; display:none; place-items:center; background:rgba(2,6,23,.28)}
.modal.show{display:grid}
.modal .content{width:min(520px,92%); padding:14px; background:#fff; border-radius:16px; border:1px solid var(--stroke)}
.dark .modal .content{background:#0f172a}
.palette{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.swatch{border:1px solid var(--stroke); border-radius:12px; padding:10px; cursor:pointer}
.swatch .s{height:20px; border-radius:6px; background:linear-gradient(90deg, var(--a), var(--b)); margin-bottom:6px}