/* created by Shaurya Seth
at Dominion Dynamics
September 24, 2025 */

:root {
  --bg:#0f172a;
  --card:#111827;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --accent:#60a5fa;
  --accent-border:#3b82f6;
  --ok:#10b981;
  --err:#ef4444;
  --border: #1f2937;
  --field: #0b1220;
}
body { margin: 0; font-family: Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; }
.wrap { max-width: 600px; margin: 0 auto; padding: 12px; }

/* card */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; box-shadow: 0 3px 10px rgba(0,0,0,.25); }

/* zone */
.zone { background: var(--field); color: var(--muted); border: 2px dashed var(--border); border-radius: 8px; padding: 24px; text-align: center; }
.zone:hover { color: var(--text); border-color: var(--accent-border); }
.zone input { display: none; }

/* button */
.btn { display:inline-flex; align-items:center; gap:.5rem; background:#0061ff; border: 1px solid var(--border); color:white; padding:8px 10px; border-radius: 8px; cursor:pointer; }
.btn:hover { background: #0052d9;}
.btn:disabled { opacity:.6; cursor:not-allowed; }

/* list */
.list { margin-top: 16px; display: grid; gap: 8px; }
.row { display:grid; grid-template-columns: 1fr auto; gap: 12px; align-items:center; background: var(--field); border:1px solid var(--border); border-radius:8px; padding:16px; }
.meta { display:flex; flex-direction:column; gap:6px; }
.name { color: var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sub { color: var(--muted); opacity:.8; font-size:12px; }

/* progress bar */
.bar { width:100%; height:8px; background:#1b1f2c; border-radius:999px; overflow:hidden; }
.fill { height:100%; width:0%; background:var(--ok); border-radius:999px; transition: width .1s linear; }

/* upload status */
.status { font-size:12px; padding:4px 8px; border-radius:8px; color: var(--muted); border:1px solid var(--muted); }
.ok { color: var(--ok); border-color: var(--ok); }
.fail { color: var(--rr); border-color: var(--rr); }
.queue { color: var(--muted); border-color: var(--muted); }

.prog { opacity:.9; }
.controls { display:flex; gap:8px; margin-top:12px; justify-content:center; }
a.link { color:#a5b4fc; text-decoration:none; }
footer { opacity:.7; margin-top: 20px; font-size: 12px; text-align:center; }
label { color: var(--muted); font-size: 12px; }

/* text field and dropdown */
.row.inline { display:flex; gap:12px; align-items:stretch; }
.row.inline input { flex:1; }

input[type="text"],
select {
  width: 84%;
  background: var(--field);
  color: var(--text);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  outline:none;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transition: border-color .15s, box-shadow .15s, background .25s;
}

input[type="text"]::placeholder {
  color: var(--muted);
  opacity:.7;
}

input[type="text"]:focus,
select:focus {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 2px rgba(96,165,250,.25);
}

select {
  width: 100%;
  display: block;
  appearance:none;
  cursor:pointer;
  padding-right:36px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% - 5px),
    calc(100% - 14px) calc(50% - 5px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

select option {
  background: var(--card);
  color: var(--text);
}

input[type="text"]:disabled,
select:disabled {
  opacity:.55;
  cursor:not-allowed;
}

/* message under Create Scene */
.hint {
  font-size: 12px;
  margin-top: 4px;
  color: var(--muted);
}
.hint.ok {
  color: var(--ok);
}
.hint.err {
  color: var(--err);
}

/* create row */
.create-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: 12px;
}

.create-row input {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
}