:root {
    --bg: #0a0b0d;
    --bg-1: #101216;
    --bg-2: #15181e;
    --bg-3: #1c2027;
    --line: #262b34;
    --line-2: #353c47;
    --txt: #e6e8ec;
    --txt-dim: #8b94a3;
    --txt-faint: #59626f;
    --amber: #ffae3b;
    --amber-dim: #c9851f;
    --green: #4ade80;
    --red: #f87171;
    --blue: #60a5fa;
    --cyan: #38d9c8;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --disp: 'Archivo', sans-serif;
    --r: 4px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg);
    color: var(--txt);
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.hidden { display: none !important; }
.muted { color: var(--txt-dim); font-weight: 400; font-size: 12px; }
.req { color: var(--amber); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.trunc { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 0; border: 2px solid var(--bg-1); }
::-webkit-scrollbar-thumb:hover { background: #4a525f; }

/* ============ INPUTS / BUTTONS ============ */
.inp {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--txt);
    font-family: var(--mono);
    font-size: 13px;
    padding: 10px 12px;
    border-radius: var(--r);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.inp:focus { border-color: var(--amber-dim); box-shadow: 0 0 0 3px rgba(255,174,59,0.08); }
.inp::placeholder { color: var(--txt-faint); }
.inp-sm { width: auto; padding: 6px 10px; font-size: 12px; }
.area { resize: vertical; line-height: 1.5; }
textarea.inp { white-space: pre; overflow-wrap: normal; overflow-x: auto; }

.btn {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: var(--r);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .12s;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--amber); color: #1a1205; border-color: var(--amber); font-weight: 700; }
.btn-primary:hover { background: #ffbe5e; box-shadow: 0 0 18px rgba(255,174,59,0.25); }
.btn-ghost { background: var(--bg-2); color: var(--txt-dim); border-color: var(--line); }
.btn-ghost:hover { color: var(--txt); border-color: var(--line-2); background: var(--bg-3); }
.btn-danger { background: transparent; color: var(--red); border-color: rgba(248,113,113,0.3); }
.btn-danger:hover { background: rgba(248,113,113,0.1); border-color: var(--red); }
.btn.block { width: 100%; }
.btn-sm { padding: 5px 11px; font-size: 12px; }

.icon-btn {
    background: transparent; border: none; color: var(--txt-dim);
    font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: var(--r);
    transition: all .12s; line-height: 1;
}
.icon-btn:hover { color: var(--amber); background: var(--bg-3); }

.link-btn {
    background: none; border: none; color: var(--txt-dim); font-family: var(--mono);
    font-size: 12px; cursor: pointer; padding: 4px 0; margin-top: 4px;
}
.link-btn:hover { color: var(--amber); }

.field-label {
    display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--txt-dim); margin-bottom: 6px; font-weight: 500;
}

.row { display: flex; gap: 10px; align-items: center; }
.row.between { justify-content: space-between; }

.empty {
    text-align: center; color: var(--txt-faint); padding: 60px 20px; font-size: 13px;
    border: 1px dashed var(--line); border-radius: 8px; background: var(--bg-1);
}

@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }