/* /static/style.css */

/* ---------- Theme ---------- */
:root{
  --bg:#0b0c0f;
  --text:#e9eef5;
  --muted:#9fb0c3;
  --accent:#0088cc;
  --accent-hover:#00aaff;
  --card:#14161a;
  --border:#1e2026;
  --danger:#c93434;
  --ok:#22c55e;
  --focus: #80d4ff;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  padding:12px 12px 84px;
  min-height:100vh;
  line-height:1.35;
}

/* ---------- Layout ---------- */
.container{ max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.between{ justify-content:space-between; }

/* ---------- Cards / lists ---------- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 16px 14px;
}
.card + .card{ margin-top:8px; }

.list{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.list-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:rgba(255,255,255,.02);
}

/* ---------- Typography ---------- */
h1,h2,h3{ margin:.25rem 0 .5rem; font-weight:600; }
h2{ font-size:1.45rem; }
h3{ font-size:1.15rem; }
.muted{ color:var(--muted); }
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; font-size:.85rem;
  border:1px solid var(--border);
  border-radius:999px; background:transparent; color:var(--muted);
}

/* little colored text helpers */
.ok{ color:var(--ok); font-weight:600; }
.danger{ color:var(--danger); font-weight:600; }

/* ---------- Controls ---------- */
label{ display:block; margin:10px 0 6px; font-size:.95rem; opacity:.9; }
input,select,button,textarea{
  width:100%; padding:12px 14px; height:46px;
  font-size:1rem; border-radius:10px;
  border:1px solid var(--border);
  background:var(--card); color:var(--text);
  outline:none; transition:border-color .15s, background .15s, transform .05s;
}
textarea{ height:auto; min-height:96px; resize:vertical; }
input:focus,select:focus,textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 40%, transparent);
}

/* Buttons */
button{
  cursor:pointer; background:var(--accent); color:#fff; border:none;
}
button:hover{ background:var(--accent-hover); }
button:active{ transform:translateY(1px); }
button.secondary{
  background:transparent; border:1px solid var(--border); color:var(--text);
}
button.secondary:hover{
  border-color:var(--accent);
}
button.danger{
  background:var(--danger); color:#fff;
}
button[disabled]{ opacity:.6; cursor:not-allowed; transform:none; }

/* group */
.btn-row{ display:flex; gap:10px; align-items:center; }
.btn-row > *{ flex:1; }

/* Links */
a.link{
  color:var(--accent-hover);
  text-decoration:none;
  border-bottom:1px dashed color-mix(in srgb, var(--accent) 60%, transparent);
}
a.link:hover{ color:#cdefff; border-bottom-color:#cdefff; }

/* ---------- File input – pretty "Choose file" without changing HTML ---------- */
input[type="file"]{
  border:1px dashed var(--border);
  border-radius:12px;
  padding:10px;
  height:auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
input[type="file"]:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 40%, transparent);
}

/* Native button in file input */
input[type="file"]::file-selector-button{
  margin-right:12px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  border-radius:10px;
  padding:10px 14px;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
input[type="file"]::file-selector-button:hover{
  background:var(--accent-hover);
  border-color:var(--accent-hover);
}
input[type="file"]::file-selector-button:active{
  transform:translateY(1px);
}

/* Preview thumbs */
#preview{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.thumb{
  width:88px; height:88px; object-fit:cover;
  border-radius:10px; border:1px solid var(--border);
}

/* ---------- Bottom nav ---------- */
.nav{
  position:fixed; left:0; right:0; bottom:0; z-index:10;
  display:flex; gap:10px; justify-content:space-around;
  background:var(--card);
  border-top:1px solid var(--border);
  padding:10px 12px;
  backdrop-filter:saturate(120%) blur(4px);
}
.nav-btn{
  flex:1; height:48px; border-radius:12px;
  background:transparent; color:var(--text);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:1.05rem;
}
.nav-btn svg{ width:22px; height:22px; display:block; }
.nav-btn.active{
  background:var(--accent); color:#fff; border-color:var(--accent);
  box-shadow:0 6px 22px -8px rgba(0,136,204,.8);
}

/* ---------- Utilities ---------- */
.panel{ display:none; }
.panel.active{ display:block; }

.footer{ text-align:center; color:var(--muted); font-size:.9rem; margin-top:8px; }
.footer a{ color:var(--muted); text-decoration:none; }
.footer a:hover{ text-decoration:underline; }

#debug-init{
  position:fixed; bottom:66px; left:10px;
  color:#8ea2b4; font:12px monospace; opacity:.9;
}

/* ---------- Responsive ---------- */
@media (min-width:1024px){
  html{ font-size:19px; }
  .container{ max-width:980px; }
}