:root{
  --bg:#0e0f12; --panel:#16181d; --panel2:#1c1f26; --line:#262a31;
  --text:#f3f5f7; --muted:#9aa3ad; --accent:#1CAAD9; --accent2:#159fcb;
  --good:#3ddc84; --bad:#ff6b6b;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
code{background:#000;padding:1px 5px;border-radius:4px;font-size:.9em}

/* ---------- layout ---------- */
.site-header{padding:42px 24px 4px;text-align:center}
.site-header h1{margin:0;font-size:26px;letter-spacing:.4px}
.site-header p{margin:8px 0 0;color:var(--muted);font-size:14px}
.wrap{max-width:1080px;margin:0 auto;padding:28px 24px 72px}

/* ---------- add panel ---------- */
.add{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:20px;margin-bottom:30px;
}
.add h2{margin:0 0 4px;font-size:16px}
.add .hint{margin:0 0 14px;color:var(--muted);font-size:13px}
textarea{
  width:100%;min-height:96px;resize:vertical;background:var(--panel2);
  color:var(--text);border:1px solid var(--line);border-radius:10px;
  padding:12px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.5;
}
textarea:focus{outline:none;border-color:var(--accent)}
.row{display:flex;gap:12px;align-items:center;margin-top:12px;flex-wrap:wrap}
.row label{font-size:13px;color:var(--muted);min-width:60px}
input[type=text]{
  flex:1;min-width:200px;background:var(--panel2);color:var(--text);
  border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:14px;
}
input[type=text]:focus{outline:none;border-color:var(--accent)}
.status{font-size:13px;min-height:18px;margin-top:10px}
.status.ok{color:var(--good)}
.status.err{color:var(--bad)}
.status.idle{color:var(--muted)}

button{
  background:var(--accent);color:#04222c;border:0;border-radius:8px;
  padding:10px 18px;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s,opacity .15s;
}
button:hover{background:var(--accent2)}
button:disabled{opacity:.4;cursor:not-allowed}
button.ghost{background:transparent;color:var(--muted);border:1px solid var(--line);font-weight:600}
button.ghost:hover{background:var(--panel2);color:var(--text)}
.toolbar{display:flex;gap:10px;justify-content:flex-end;margin-bottom:14px}
.toolbar .count{margin-right:auto;color:var(--muted);font-size:13px;align-self:center}

/* ---------- gallery ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.card{
  display:flex;flex-direction:column;justify-content:space-between;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:18px;min-height:130px;
}
.card .t{font-size:16px;font-weight:600;line-height:1.3;word-break:break-word}
.card .meta{color:var(--muted);font-size:11.5px;margin-top:6px;font-family:ui-monospace,monospace}
.card .acts{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.card .acts button{padding:7px 12px;font-size:12.5px}
.card .del{background:transparent;color:var(--bad);border:1px solid #3a2326}
.card .del:hover{background:#2a1a1c}
.empty{color:var(--muted);text-align:center;padding:50px 0;line-height:1.6}

.foot{text-align:center;color:var(--muted);font-size:12px;padding:20px}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);
  background:var(--text);color:#0e0f12;padding:11px 18px;border-radius:999px;
  font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;transition:.2s;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- model viewer ---------- */
.viewer{position:fixed;inset:0;background:#000}
.viewer iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.notfound{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:15px;text-align:center;padding:24px}