:root{
  --bg:#07070a; --bg-elev:#0f0f16; --card:#141422;
  --text:#f5f3ff; --muted:#bdb7ff; --purple:#8b5cf6; --purple-700:#6d28d9; --danger:#ff9aa2;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  background:var(--bg);
  background-image:url("/static/img/background.png");
  background-size:cover; background-position:center; background-attachment:fixed;
}
.bg-overlay{position:fixed; inset:0; background:linear-gradient(180deg, rgba(7,7,10,.16), rgba(7,7,10,.24)); pointer-events:none;}
.bg-overlay.light{background:linear-gradient(180deg, rgba(7,7,10,.12), rgba(7,7,10,.20));}
.app-header{position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center;
  background:rgba(10,10,14,.50); backdrop-filter:blur(6px); padding:.6rem .9rem; box-shadow:var(--shadow);}
.brand{display:flex; align-items:center; gap:.75rem}
.brand-mark{width:36px; height:36px; border-radius:999px; background:radial-gradient(circle at 30% 30%, var(--purple), #3b0764);
  box-shadow:inset 0 0 25px rgba(139,92,246,.55), 0 0 10px rgba(139,92,246,.35);}
.brand-text h1{margin:0; font-size:1.15rem; letter-spacing:.06em}
.brand-text .tagline{margin:0; font-size:.75rem; color:var(--muted)}
.nav{display:flex; align-items:center; gap:.5rem}
.input{width:100%; border:1px solid rgba(139,92,246,.35); background:rgba(15,15,22,.88);
  color:var(--text); padding:.55rem .7rem; border-radius:12px; outline:none;}
.input.big{min-height:40vh}
.badge{display:inline-block; font-size:.7rem; padding:.15rem .4rem; border-radius:999px; border:1px solid rgba(139,92,246,.35); color:var(--muted)}
.badge.private{border-color:var(--danger); color:var(--danger)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.5rem .8rem; border-radius:12px; border:1px solid rgba(139,92,246,.35);
  background:rgba(15,15,22,.8); color:var(--text); text-decoration:none; cursor:pointer; transition:transform .06s ease;}
.btn:hover{transform:translateY(-1px)}
.btn.small{padding:.35rem .6rem; font-size:.85rem}
.btn.primary{background:linear-gradient(180deg, var(--purple), var(--purple-700)); border-color:transparent;}
.container{max-width:1100px; margin:1rem auto; padding:0 .75rem;}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.75rem}
.card{display:block; background:rgba(20,20,34,.90); border:1px solid rgba(139,92,246,.25); border-radius:16px; padding:.9rem; text-decoration:none; color:var(--text)}
.card h3{margin:.2rem 0}
.dashboard-grid{display:grid; gap:1rem; grid-template-columns:1fr;}
.panel{background:rgba(20,20,34,.90); border:1px solid rgba(139,92,246,.25); border-radius:16px; padding:.75rem; box-shadow:var(--shadow);}
.panel-head{display:flex; justify-content:space-between; align-items:center; gap:.5rem; border-bottom:1px solid rgba(139,92,246,.25); padding-bottom:.5rem; margin-bottom:.75rem;}
h2{margin:.25rem 0; font-size:1.05rem;}
.table-wrap{width:100%; overflow:auto; -webkit-overflow-scrolling:touch;}
.table{width:100%; border-collapse:collapse; font-size:.95rem}
.table thead th{text-align:left; font-weight:600; color:var(--muted); padding:.5rem; position:sticky; top:0; background:rgba(20,20,34,.98);}
.table tbody td{padding:.55rem; border-top:1px solid rgba(139,92,246,.15)}
.table .expired{color:var(--danger); font-weight:600}
.pagination{display:flex; gap:.35rem; margin-top:.5rem; flex-wrap:wrap}
.pagination .page{padding:.35rem .55rem; border-radius:10px; border:1px solid rgba(139,92,246,.35); cursor:pointer; user-select:none}
.pagination .page.active{background:var(--purple); border-color:transparent; color:#fff}
.notes-list{display:grid; gap:.6rem}
.note{background:rgba(10,10,22,.85); border:1px solid rgba(139,92,246,.25); padding:.6rem .65rem; border-radius:12px;}
.note h4{margin:.1rem 0 .25rem 0}
.note .meta{font-size:.75rem; color:var(--muted)}
.note-editor{margin-top:.75rem}
.note-editor.hidden{display:none}
.editor-actions{display:flex; gap:.5rem; margin-top:.5rem; flex-wrap:wrap}
.muted{color:var(--muted)}
.login-body{display:grid; place-items:center; background-image:url("/static/img/background.png"); background-size:cover; background-position:center;}
.login-card{width:min(92vw, 420px); background:rgba(20,20,34,.92); border:1px solid rgba(139,92,246,.35); border-radius:16px; padding:1rem; box-shadow:var(--shadow);}
.login-title{margin:.25rem 0; text-align:center}
.login-subtitle{text-align:center; color:var(--muted); margin-top:0}
.login-form{display:grid; gap:.6rem}
.error{margin:.5rem 0; color:#ffd1d1}
.hide-sm{display:none}
@media (min-width: 640px){
  .hide-sm{display:table-cell}
  .table{font-size:1rem}
}

/* Modal */
.modal.hidden{display:none}
.modal{position:fixed; inset:0; z-index:50; display:grid; place-items:center;}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(2px);}
.modal-card{position:relative; width:min(92vw,520px); background:rgba(20,20,34,.98); border:1px solid rgba(139,92,246,.35);
  border-radius:16px; padding:.9rem; box-shadow:var(--shadow); z-index:51;}
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; border-bottom:1px solid rgba(139,92,246,.25); padding-bottom:.4rem;}