:root { --bg:#06101d; --surface:#0c1b2d; --surface2:#11243a; --line:#213b58; --text:#eef6ff; --muted:#8fa7c0; --blue:#538cff; --purple:#755df5; --green:#25d69b; --red:#ff647d; --shadow:0 20px 55px rgba(0,0,0,.26); }
* { box-sizing:border-box; }
html { color-scheme:dark; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 9% 0,#112d50 0,transparent 34%),var(--bg); color:var(--text); font:15px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:#79a8ff; text-decoration:none; }
a:hover { color:#b2ccff; }
button,input { font:inherit; }
button { cursor:pointer; }
.topbar { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 max(28px,calc((100vw - 1240px)/2)); background:rgba(6,16,29,.9); border-bottom:1px solid rgba(255,255,255,.08); backdrop-filter:blur(18px); position:sticky; top:0; z-index:20; }
.brand { display:flex; align-items:center; gap:12px; color:white; font-weight:850; letter-spacing:-.02em; }
.brand-logo,.auth-logo-image { width:42px; height:42px; display:block; border-radius:13px; }
nav { display:flex; gap:6px; }
nav a { color:var(--muted); padding:9px 13px; border-radius:9px; font-weight:700; }
nav a:hover,nav a.active { color:white; background:rgba(255,255,255,.07); }
.nav-toggle { display:none; border:0; color:white; background:transparent; font-size:24px; }
.container { width:min(1240px,calc(100% - 40px)); margin:auto; padding:38px 0 60px; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:25px; }
.page-heading h1,.panel h2,.auth-card h1 { margin:0; line-height:1.18; letter-spacing:-.04em; }
.page-heading h1 { font-size:clamp(28px,4vw,40px); }
.panel h2 { font-size:22px; }
.eyebrow { margin:0 0 5px; color:#74a3ff; font-size:11px; font-weight:900; letter-spacing:.17em; }
.user-chip { padding:8px 13px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--muted); }
.muted { color:var(--muted); }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:18px; }
.stat,.panel { background:linear-gradient(145deg,rgba(17,36,58,.97),rgba(9,24,41,.97)); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }
.stat { padding:20px; position:relative; overflow:hidden; }
.stat::after { content:""; position:absolute; width:95px; height:95px; right:-37px; top:-37px; border-radius:50%; background:rgba(83,140,255,.14); }
.stat.success::after { background:rgba(37,214,155,.14); }
.stat span,.stat small { display:block; color:var(--muted); }
.stat strong { display:block; margin:5px 0 1px; font-size:30px; }
.stat small { font-size:12px; }
.panel { padding:22px; margin-bottom:18px; }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; margin-bottom:18px; }
.upload-panel { border-color:#315b88; }
label { display:block; margin-bottom:15px; color:#c9d7e7; font-size:13px; font-weight:750; }
input { width:100%; margin-top:6px; padding:11px 12px; border:1px solid #294660; border-radius:10px; outline:none; color:var(--text); background:#071626; }
input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(83,140,255,.15); }
label small { display:block; margin-top:5px; color:var(--muted); font-weight:500; }
.form-grid { display:grid; gap:0 14px; }
.form-grid.two { grid-template-columns:1fr 1fr; }
.span-two { grid-column:1/-1; }
.dropzone { display:grid; place-items:center; min-height:225px; padding:30px; border:2px dashed #345678; border-radius:15px; background:rgba(5,16,29,.42); text-align:center; cursor:pointer; transition:.2s; }
.dropzone:hover,.dropzone.dragging { border-color:#6b9dff; background:rgba(83,140,255,.08); transform:translateY(-1px); }
.dropzone input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.upload-icon { width:52px; height:52px; display:grid; place-items:center; margin-bottom:10px; border-radius:15px; background:linear-gradient(135deg,var(--blue),var(--purple)); font-size:27px; font-weight:900; }
.dropzone strong { font-size:18px; }
.dropzone small { margin:4px 0 12px; }
.file-name { max-width:100%; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06); color:#b9cbe0; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.button { display:inline-flex; justify-content:center; align-items:center; padding:10px 15px; border:1px solid transparent; border-radius:10px; background:linear-gradient(135deg,var(--blue),var(--purple)); color:white; font-weight:850; box-shadow:0 9px 22px rgba(83,140,255,.2); }
.button:hover { color:white; filter:brightness(1.08); }
.button:disabled { opacity:.65; cursor:wait; }
.button.full { width:100%; }
.button.small { padding:7px 10px; border-radius:8px; font-size:12px; }
.button.secondary { color:#cbd9e8; background:rgba(255,255,255,.045); border-color:var(--line); box-shadow:none; }
.button.danger-button { color:#ff91a3; background:rgba(255,100,125,.08); border-color:rgba(255,100,125,.24); box-shadow:none; }
.badge { display:inline-flex; padding:4px 9px; border-radius:999px; font-size:11px; font-weight:850; white-space:nowrap; }
.badge-info { color:#8db4ff; background:rgba(83,140,255,.12); }
.badge-muted { color:#b1c0d1; background:rgba(143,167,192,.12); }
.gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.image-card { min-width:0; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(5,16,29,.45); }
.thumb { display:block; aspect-ratio:16/10; overflow:hidden; background:#06101d; }
.thumb img { width:100%; height:100%; object-fit:cover; transition:transform .25s; }
.thumb:hover img { transform:scale(1.025); }
.image-info { padding:14px; }
.image-info>strong,.image-info>small { display:block; }
.image-info>small { color:var(--muted); font-size:11px; }
.truncate { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.copy-row { display:flex; gap:7px; margin:12px 0; }
.copy-row input { min-width:0; margin:0; padding:8px 9px; font-size:12px; }
.copy-row button { flex-shrink:0; }
.card-actions { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
.card-actions form { display:inline-flex; }
.alert { margin-bottom:16px; padding:11px 13px; border:1px solid; border-radius:11px; }
.alert-success { color:#76ebc0; background:rgba(37,214,155,.09); border-color:rgba(37,214,155,.25); }
.alert-danger { color:#ff9bad; background:rgba(255,100,125,.09); border-color:rgba(255,100,125,.25); }
.alert-info { color:#9abdff; background:rgba(83,140,255,.09); border-color:rgba(83,140,255,.25); }
.empty { display:grid; place-items:center; gap:4px; min-height:180px; color:var(--muted); text-align:center; }
.empty strong { color:var(--text); font-size:18px; }
.grow { min-width:0; flex:1; }
.grow strong,.grow small { display:block; }
.grow small { color:var(--muted); font-size:12px; }
.note { margin:0 0 15px; padding:12px; color:#aec1d6; background:rgba(247,189,86,.07); border:1px solid rgba(247,189,86,.18); border-radius:10px; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.details { margin:0; }
.details div { display:grid; grid-template-columns:145px 1fr; gap:12px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.details dt { color:var(--muted); }
.details dd { margin:0; overflow-wrap:anywhere; font-weight:700; }
.auth-page { display:grid; place-items:center; padding:28px; }
.auth-card { width:min(430px,100%); padding:30px; background:linear-gradient(145deg,rgba(17,36,58,.98),rgba(9,23,39,.98)); border:1px solid var(--line); border-radius:20px; box-shadow:0 30px 80px rgba(0,0,0,.4); }
.auth-card.install-card { width:min(720px,100%); }
.auth-logo-image { margin-bottom:20px; }
.auth-card h1 { margin-bottom:6px; font-size:30px; }
.auth-card form { margin-top:22px; }
.maker-line { display:flex; align-items:center; gap:8px; margin:10px 0 0; color:var(--muted); font-size:12px; }
.maker-line img { width:24px; height:24px; border-radius:7px; }
footer { display:flex; align-items:center; justify-content:center; gap:8px; padding:0 20px 30px; color:#667d96; text-align:center; font-size:12px; }
.maker-logo { width:27px; height:27px; border-radius:8px; }
@media(max-width:920px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-grid{grid-template-columns:1fr}}
@media(max-width:680px){.topbar{padding:0 18px}.nav-toggle{display:block}nav{display:none;position:absolute;top:64px;left:12px;right:12px;padding:10px;flex-direction:column;background:#0b1a2c;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow)}nav.open{display:flex}.container{width:calc(100% - 24px);padding-top:25px}.user-chip{display:none}.stats-grid{grid-template-columns:1fr}.gallery{grid-template-columns:1fr}.form-grid.two{grid-template-columns:1fr}.span-two{grid-column:auto}.panel{padding:16px}.dropzone{min-height:190px}.details div{grid-template-columns:1fr;gap:2px}}
@media(max-width:430px){.brand span:last-child{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.auth-page{padding:14px}.auth-card{padding:22px}}