/* Minimal Light Theme with Elegant Abstract Lines */
:root{
  --bg:#ffffff;
  --bg-2:#f7f9fc;
  --ink:#0b1220;
  --muted:#5b6b84;
  --card:#ffffff;
  --border:#e7ecf3;
  --accent:#1b63ff;
  --accent-soft:rgba(27,99,255,.08);
  --ok:#18a058;
  --danger:#d64545;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color:var(--ink);
  background: var(--bg);
  line-height:1.55;
  background-image:
    url('abstract-lines.svg'),
    radial-gradient(1200px 700px at 70% -20%, #eef3ff 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 110%, #f3f7ff 0%, transparent 60%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: top center, top right, bottom left;
  background-size: 1400px auto, auto, auto;
}
.container{width:100%; max-width:1080px; margin:0 auto; padding: 0 20px;}
.site-header{position:sticky; top:0; z-index:100; backdrop-filter:saturate(1.1) blur(8px); background: rgba(255,255,255,.7); border-bottom:1px solid var(--border);}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:64px;}
.brand{color:var(--ink); text-decoration:none; font-weight:700; letter-spacing:.2px; padding:8px 12px; border-radius:999px; background:var(--bg-2); border:1px solid var(--border);}
.nav{display:flex; gap:8px}
.nav-link{color:#415574; text-decoration:none; padding:8px 12px; border-radius:10px; transition:.2s;}
.nav-link:hover{background:#eef3ff; color:#143056}
.site-footer{border-top:1px solid var(--border); padding:24px 0; margin-top:40px; color:#63728b}
.hero{padding:28px 0 12px}
.hero h1{margin:0 0 6px; font-size:28px; letter-spacing:.2px}
.muted{color:#6c7a92}
.toolbar{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;}
#search{flex:1; min-width:200px; background:var(--bg); border:1px solid var(--border); color:var(--ink); padding:12px 14px; border-radius:12px; outline:none; transition:.15s border-color;}
#search:focus{border-color:#b9ccff; box-shadow:0 0 0 4px var(--accent-soft)}
#search::placeholder{color:#9aa8bf}
.btn, .btn-secondary{border:1px solid #cdd8ef; background: linear-gradient(180deg,#ffffff, #f7faff); color:#143056; padding:10px 14px; border-radius:12px; cursor:pointer; text-decoration:none; display:inline-block; transition:.2s; font-weight:600}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(27,99,255,.08)}
.btn:active{transform:translateY(0)}
.btn-secondary{background:#ffffff}
.btn-secondary:hover{background:#f4f7ff}
.grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 20px 0 0;
}
.card{background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding:14px; box-shadow: 0 8px 28px rgba(18,28,45,.06); display:flex; flex-direction:column; gap:10px;}
.card-head{display:flex; gap:8px; align-items:center; justify-content:space-between}
.card h3{margin:0; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.badge{font-size:12px; color:#516685; background:#f2f6ff; border:1px solid #e0e9ff; padding:4px 8px; border-radius:999px;}
.card-actions{display:flex; gap:10px}
audio{width:100%}
.empty{grid-column:1/-1; color:#7686a0; background: #f7faff; border:1px dashed var(--border); padding:24px; border-radius:16px; text-align:center;}
.alert{padding:12px 14px; border-radius:12px; margin:10px 0}
.alert-ok{background:#edf9f2; border:1px solid #cfeedd; color:#146c3a}
.alert-error{background:#fff1f1; border:1px solid #ffd8d8; color:#a33a3a}
.auth, .admin{padding:24px 0}
.auth-form, .upload-form{background:var(--card); border:1px solid var(--border); padding:16px; border-radius:16px; max-width:520px;}
label{display:block; margin:10px 0 6px; color:#3a4a65}
input[type="password"], input[type="file"]{width:100%; background:#fff; border:1px solid var(--border); color:var(--ink); padding:10px 12px; border-radius:12px; margin-top:6px;}
input[type="password"]:focus, input[type="file"]:focus{border-color:#b9ccff; box-shadow:0 0 0 4px var(--accent-soft)}
@media (max-width:600px){.header-inner{height:56px} .hero h1{font-size:24px}}