*{box-sizing:border-box}
:root{
  --bg:#0b1020;--panel:#131a3a;--panel2:#0f1630;--muted:#a9b4d6;--border:#2a3357;
  --accent:#5b7cff;--accent-2:#4b68e8;--danger:#ff5f5f;--ghost:#1f2a66
}
body{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;background:var(--bg);color:#e9eef8}
a{color:inherit;text-decoration:none}
header{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:12px 20px;background:#0f1630;position:sticky;top:0;border-bottom:1px solid var(--border);z-index:10}
.brand{display:flex;gap:10px;align-items:center}
.logo{font-size:20px}
.brand-title{font-weight:600;letter-spacing:.2px}
.nav{display:flex;gap:10px;flex-wrap:wrap}
.nav-link{padding:8px 10px;border-radius:10px;color:#cfd7ff}
.nav-link.active{background:#1c2555;color:#fff;border:1px solid var(--border)}
.auth button{margin-left:8px}
button{background:var(--accent);border:0;color:#fff;padding:8px 12px;border-radius:10px;cursor:pointer}
button:hover{background:var(--accent-2)}
button.hidden{display:none}
button.secondary{background:#2c3aa3}
button.danger{background:var(--danger)}
main{max-width:960px;margin:20px auto;padding:0 16px;display:grid;gap:16px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px}
.card-head{display:flex;align-items:center;gap:12px}
.row{display:flex;gap:8px;align-items:center}
input{padding:10px;border-radius:10px;border:1px solid #394376;background:var(--panel2);color:#e9eef8;flex:1}
ul{list-style:none;padding:0;margin:8px 0}
.list li{padding:10px;border-bottom:1px dashed var(--border)}
.note-row{display:flex;justify-content:space-between;gap:12px;align-items:center}
.note-actions{display:flex;gap:8px}
pre{white-space:pre-wrap;word-break:break-word}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,"Courier New",monospace;font-size:12px;background:rgba(0,0,0,.2);padding:8px;border-radius:8px;border:1px solid var(--border)}
.error{color:#ffb3b3}
.toast{position:fixed;right:16px;bottom:16px;background:#1a214a;padding:10px 14px;border:1px solid var(--border);border-radius:12px}
.tag{background:#253089;border:1px solid var(--border);padding:2px 8px;border-radius:999px;font-size:12px}
.hidden{display:none}
footer{display:flex;justify-content:center;padding:20px 0 40px;color:var(--muted)}

.hero{display:grid;gap:12px}
.hero h1{margin:0 0 4px 0}
.hero-actions{display:flex;gap:10px;margin-top:6px}
.cta{display:inline-block;background:var(--accent);padding:10px 14px;border-radius:12px;font-weight:600}
.cta.ghost{background:var(--ghost)}
.features{display:grid;gap:8px;margin:12px 0 0 0;padding-left:0}
.features li{display:flex;gap:8px;align-items:center;color:#dfe5ff}
.guard[data-guard="signedOut"].hidden,
.guard[data-guard="signedIn"].hidden{display:none}
.notice{
  background:#1e2a63;border:1px solid #2a3357;color:#dfe5ff;
  padding:10px 12px;border-radius:12px;margin-bottom:8px
}
.notice strong{color:#fff}
.hidden{display:none}

/* ==== Files row: align like notes, truncate long names ==== */
#route-files .file-row .note-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}

#route-files .file-row .note-main{
  display:flex; align-items:center; gap:8px;
  min-width:0;               /* allow ellipsis */
  flex:1;                    /* take remaining space */
}

#route-files .file-row .file-name{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#route-files .file-row .file-meta{
  flex-shrink:0;             /* don’t squish meta text */
}

#route-files .file-row .note-actions{
  display:flex; gap:8px;
  flex-shrink:0;             /* keep buttons visible */
}
/* Admin subnav polish (reuses .nav-link styles) */
#adminSubnav .nav-link { padding:6px 10px; }