@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap");

:root { --bg:#0b0e14; --panel:#11151d; --panel-2:#171c26; --line:rgba(255,255,255,.09); --ink:#f3f5f9; --muted:#7f8898; --accent:#8cf5d2; --danger:#ff6b7a; --ease:cubic-bezier(.16,1,.3,1); }
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--ink); }
body { font-family:"Noto Sans SC",system-ui,sans-serif; }
button,input,textarea,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }

.login-view { min-height:100svh; display:grid; grid-template-columns:1.05fr .95fr; background:radial-gradient(circle at 20% 45%,rgba(140,245,210,.08),transparent 32%),var(--bg); }
.login-art { position:relative; display:grid; place-items:center; overflow:hidden; border-right:1px solid var(--line); }
.login-art::before { content:""; position:absolute; inset:0; background:linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(circle,black,transparent 67%); }
.login-orbit { position:relative; width:min(40vw,480px); aspect-ratio:1; border:1px solid rgba(140,245,210,.18); border-radius:50%; animation:orbit 24s linear infinite; }
.login-orbit::before,.login-orbit::after,.login-orbit i { content:""; position:absolute; border:1px solid rgba(255,255,255,.13); border-radius:50%; }
.login-orbit::before { inset:14%; transform:rotate(60deg) scaleY(.36); }
.login-orbit::after { inset:14%; transform:rotate(-60deg) scaleY(.36); }
.login-orbit i:first-child { inset:14%; transform:scaleY(.36); }
.login-orbit i:nth-child(2) { inset:38%; background:radial-gradient(circle at 36% 35%,#fff,var(--accent) 12%,rgba(140,245,210,.12) 50%,transparent 70%); border:0; box-shadow:0 0 80px rgba(140,245,210,.3); }
.login-orbit i:nth-child(3) { width:10px; height:10px; left:6%; top:48%; background:var(--accent); box-shadow:0 0 22px var(--accent); border:0; }
.login-orbit b { position:absolute; width:7px; height:7px; right:13%; top:20%; border-radius:50%; background:#ff7a59; box-shadow:0 0 20px #ff7a59; }
@keyframes orbit { to { transform:rotate(360deg); } }
.login-art p { position:absolute; left:9%; bottom:8%; margin:0; color:#596273; font:500 12px/1.8 "Space Grotesk"; letter-spacing:.18em; text-transform:uppercase; }
.login-card { width:min(440px,calc(100% - 56px)); align-self:center; justify-self:center; }
.login-brand { display:flex; align-items:center; gap:12px; margin-bottom:74px; }
.login-brand>span { width:28px; height:28px; border:1px solid var(--accent); border-radius:50%; box-shadow:inset 0 0 14px rgba(140,245,210,.2); }
.login-brand strong,.login-brand small { display:block; }
.login-brand strong { font-size:14px; letter-spacing:.12em; }
.login-brand small { margin-top:2px; color:var(--muted); font:9px/1 "Space Grotesk"; letter-spacing:.16em; }
.login-card h1 { margin:0 0 12px; font-size:46px; font-weight:300; letter-spacing:-.05em; }
.login-card>p { margin:0 0 42px; color:var(--muted); font-size:13px; }
.login-card label { display:block; margin-bottom:22px; }
.login-card label span { display:block; margin-bottom:9px; color:#9ba4b1; font-size:10px; letter-spacing:.12em; }
.login-card input { width:100%; height:48px; padding:0 14px; border:1px solid var(--line); outline:0; background:rgba(255,255,255,.025); color:var(--ink); transition:.25s; }
.login-card input:focus { border-color:rgba(140,245,210,.55); box-shadow:0 0 0 3px rgba(140,245,210,.05); }
.form-error { min-height:20px; color:var(--danger); font-size:11px; }
.primary-button { width:100%; height:52px; margin-top:8px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; border:0; background:var(--accent); color:#07120f; font-weight:600; cursor:pointer; transition:.3s var(--ease); }
.primary-button:hover { transform:translateY(-2px); box-shadow:0 12px 35px rgba(140,245,210,.16); }
.login-card>a { display:block; width:fit-content; margin-top:28px; color:var(--muted); font-size:11px; text-decoration:none; }

.admin-shell { min-height:100svh; display:grid; grid-template-columns:248px 1fr; }
.sidebar { position:fixed; z-index:10; inset:0 auto 0 0; width:248px; padding:30px 18px 18px; display:flex; flex-direction:column; border-right:1px solid var(--line); background:#0d1016; }
.admin-brand { padding:0 12px 32px; display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; border-bottom:1px solid var(--line); }
.admin-mark { position:relative; width:32px; height:32px; }
.admin-mark i { position:absolute; inset:8px 0; border:1px solid #dce2e8; border-radius:50%; transform:rotate(30deg); }
.admin-mark i:nth-child(2){transform:rotate(-30deg)} .admin-mark i:nth-child(3){inset:13px;border:0;background:var(--accent)}
.admin-brand strong,.admin-brand small { display:block; }
.admin-brand strong { font-size:13px; letter-spacing:.1em; }
.admin-brand small { margin-top:4px; color:var(--muted); font-size:9px; letter-spacing:.14em; }
.sidebar nav { margin-top:26px; display:grid; gap:6px; }
.sidebar nav button { position:relative; width:100%; height:44px; padding:0 12px; display:flex; align-items:center; gap:12px; border:0; border-radius:4px; background:none; color:#778090; text-align:left; font-size:11px; cursor:pointer; transition:.25s; }
.sidebar nav button i { width:20px; font:normal 15px/1 "Space Grotesk"; text-align:center; }
.sidebar nav button:hover { color:#cdd3dc; background:rgba(255,255,255,.035); }
.sidebar nav button.active { color:var(--ink); background:rgba(140,245,210,.085); }
.sidebar nav button.active::before { content:""; position:absolute; left:0; width:2px; height:20px; background:var(--accent); box-shadow:0 0 10px var(--accent); }
.sidebar-foot { margin-top:auto; padding:18px 10px 2px; border-top:1px solid var(--line); }
.admin-user { display:flex; align-items:center; gap:10px; }
.admin-user>span { flex:0 0 34px; height:34px; display:grid; place-items:center; border-radius:50%; background:rgba(140,245,210,.12); color:var(--accent); font:600 11px/1 "Space Grotesk"; }
.admin-user strong,.admin-user small { display:block; max-width:130px; overflow:hidden; text-overflow:ellipsis; }
.admin-user strong { font-size:10px; white-space:nowrap; }.admin-user small { margin-top:3px;color:var(--muted);font-size:8px; }
.sidebar-foot>button { margin:14px 0 0 44px; padding:0; border:0; background:none; color:#656e7c; font-size:9px; cursor:pointer; }

.admin-main { grid-column:2; min-width:0; }
.admin-topbar { height:126px; padding:30px 42px 24px; display:flex; align-items:end; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); background:rgba(11,14,20,.88); backdrop-filter:blur(18px); }
.breadcrumb { color:#5d6674; font:9px/1 "Space Grotesk"; letter-spacing:.13em; }.breadcrumb b{color:#9099a7;font-weight:400}
.admin-topbar h1 { margin:11px 0 0; font-size:28px; font-weight:300; letter-spacing:-.03em; }
.topbar-actions { display:flex; align-items:center; gap:14px; }
.topbar-actions a { padding:9px 13px; border:1px solid var(--line); border-radius:999px; color:#a8b0bc; font-size:9px; text-decoration:none; }
.status-pill { color:var(--muted); font-size:9px; }.status-pill i{display:inline-block;width:5px;height:5px;margin-right:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.admin-content { padding:34px 42px 60px; }

.welcome { display:flex; align-items:end; justify-content:space-between; margin-bottom:28px; }
.welcome h2 { margin:0 0 8px; font-size:22px; font-weight:400; }.welcome p{margin:0;color:var(--muted);font-size:11px}.welcome time{color:#646d7a;font:10px/1 "Space Grotesk"}
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.stat-card { min-height:154px; padding:21px; display:flex; flex-direction:column; border:1px solid var(--line); background:var(--panel); }
.stat-card>span { color:var(--muted); font-size:9px; letter-spacing:.12em; }.stat-card strong{margin:auto 0 6px;font:400 42px/1 "Space Grotesk"}.stat-card small{color:#616a78;font-size:9px}
.overview-grid { margin-top:14px; display:grid; grid-template-columns:1.25fr .75fr; gap:14px; }
.dashboard-panel { min-height:330px; padding:24px; border:1px solid var(--line); background:var(--panel); }
.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }.panel-head h3{margin:0;font-size:12px;font-weight:500;letter-spacing:.08em}.panel-head span{color:var(--muted);font-size:9px}
.activity-row { padding:15px 2px; display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.06); }.activity-row>span{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:rgba(140,245,210,.08);color:var(--accent);font-size:9px}.activity-row strong{font-size:10px;font-weight:400}.activity-row time{color:#626b79;font:9px/1 "Space Grotesk"}
.quick-list { display:grid; gap:8px; }.quick-list button{height:48px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);background:rgba(255,255,255,.025);color:#adb5c1;font-size:10px;cursor:pointer;transition:.25s}.quick-list button:hover{border-color:rgba(140,245,210,.4);color:var(--ink);transform:translateX(3px)}

.collection-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }.collection-toolbar p{margin:0;color:var(--muted);font-size:11px}.add-button,.save-button{height:38px;padding:0 16px;border:0;background:var(--accent);color:#07120f;font-size:10px;font-weight:600;cursor:pointer}.add-button:hover,.save-button:hover{filter:brightness(1.08)}
.collection-layout { min-height:620px; display:grid; grid-template-columns:300px 1fr; border:1px solid var(--line); background:var(--panel); }
.record-list { border-right:1px solid var(--line); }.record-search{height:56px;padding:0 15px;display:flex;align-items:center;border-bottom:1px solid var(--line)}.record-search input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:10px}.record-items{max-height:680px;overflow:auto}
.record-item { width:100%; min-height:70px; padding:12px 15px; display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:11px; border:0; border-bottom:1px solid rgba(255,255,255,.055); background:none; color:var(--ink); text-align:left; cursor:pointer; transition:.2s; }.record-item:hover{background:rgba(255,255,255,.025)}.record-item.active{background:rgba(140,245,210,.07)}
.record-dot{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.11);border-radius:50%;color:var(--record-accent,var(--accent));font:10px/1 "Space Grotesk"}.record-item strong,.record-item small{display:block;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.record-item strong{font-size:11px;font-weight:500}.record-item small{margin-top:4px;color:#636c7a;font-size:9px}.publish-dot{width:5px;height:5px;border-radius:50%;background:#56606d}.publish-dot.on{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.editor { padding:28px 30px 38px; min-width:0; }.editor-empty{min-height:550px;display:grid;place-items:center;color:#596271;font-size:11px}.editor-head{display:flex;align-items:start;justify-content:space-between;margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--line)}.editor-head span{color:var(--muted);font-size:9px;letter-spacing:.14em}.editor-head h2{margin:8px 0 0;font-size:22px;font-weight:400}.editor-actions{display:flex;gap:8px}.delete-button{height:38px;padding:0 13px;border:1px solid rgba(255,107,122,.28);background:rgba(255,107,122,.05);color:#ff8d98;font-size:9px;cursor:pointer}
.edit-form { display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; }.form-field{min-width:0}.form-field.full{grid-column:1/-1}.form-field label{display:block;margin-bottom:8px;color:#8b94a2;font-size:9px;letter-spacing:.1em}.form-field input,.form-field textarea,.form-field select{width:100%;border:1px solid var(--line);outline:0;background:#0e1219;color:var(--ink);font-size:11px;transition:.2s}.form-field input,.form-field select{height:42px;padding:0 12px}.form-field textarea{min-height:116px;padding:12px;resize:vertical;line-height:1.7}.form-field input:focus,.form-field textarea:focus,.form-field select:focus{border-color:rgba(140,245,210,.48)}.form-field input[type="color"]{padding:4px}.form-help{margin-top:6px;color:#596270;font-size:8px;line-height:1.5}

.settings-panel { max-width:880px; padding:30px; border:1px solid var(--line); background:var(--panel); }.settings-panel h2{margin:0 0 6px;font-size:19px;font-weight:400}.settings-panel>p{margin:0 0 28px;color:var(--muted);font-size:10px}.settings-form{display:grid;gap:18px}.settings-actions{margin-top:26px;display:flex;justify-content:flex-end}
.media-toolbar { padding:20px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);background:var(--panel); }.media-toolbar p{margin:0;color:var(--muted);font-size:10px}.upload-label{height:38px;padding:0 16px;display:flex;align-items:center;background:var(--accent);color:#07120f;font-size:10px;font-weight:600;cursor:pointer}.upload-label input{display:none}.media-grid{margin-top:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.media-card{position:relative;min-height:220px;border:1px solid var(--line);background:var(--panel);overflow:hidden}.media-preview{height:150px;display:grid;place-items:center;background:#0e1218}.media-preview img{width:100%;height:100%;object-fit:cover}.media-preview span{color:#68717f;font:32px/1 "Space Grotesk"}.media-info{padding:12px}.media-info strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;font-weight:400}.media-info small{display:block;margin-top:5px;color:#606977;font:8px/1 "Space Grotesk"}.media-delete{position:absolute;right:7px;top:7px;width:28px;height:28px;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(0,0,0,.64);color:#fff;cursor:pointer}
.toast { position:fixed; z-index:100; right:24px; bottom:24px; padding:12px 16px; border:1px solid rgba(140,245,210,.3); background:#111820; color:#dce3e8; font-size:10px; opacity:0; transform:translateY(14px); pointer-events:none; transition:.3s var(--ease); }.toast.show{opacity:1;transform:none}.toast.error{border-color:rgba(255,107,122,.4);color:#ff9ba4}

@media(max-width:1000px){.stat-grid{grid-template-columns:1fr 1fr}.overview-grid{grid-template-columns:1fr}.collection-layout{grid-template-columns:260px 1fr}.media-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.login-view{grid-template-columns:1fr}.login-art{display:none}.admin-shell{grid-template-columns:1fr}.sidebar{position:fixed;top:auto;right:0;width:auto;height:64px;padding:7px 10px;flex-direction:row;align-items:center;border:0;border-top:1px solid var(--line)}.admin-brand,.sidebar-foot{display:none}.sidebar nav{width:100%;margin:0;display:flex;justify-content:space-between}.sidebar nav button{width:auto;height:50px;padding:0 10px;display:grid;place-items:center;gap:2px;text-align:center}.sidebar nav button span{font-size:7px}.sidebar nav button.active::before{left:50%;top:-7px;width:18px;height:2px;transform:translateX(-50%)}.admin-main{grid-column:1}.admin-topbar{height:106px;padding:22px}.topbar-actions .status-pill{display:none}.admin-content{padding:22px 16px 90px}.collection-layout{display:block}.record-list{border-right:0;border-bottom:1px solid var(--line)}.record-items{max-height:230px}.editor{padding:24px 18px}.edit-form{grid-template-columns:1fr}.form-field.full{grid-column:1}.media-grid{grid-template-columns:1fr 1fr}}