:root{
    --bg:#0e0d0c;
    --surface:#1a1714;
    --surface-2:#241f1a;
    --line:#332c25;
    --ember:#ff5a1f;
    --ember-2:#ff8a1e;
    --text:#f6efe6;
    --muted:#a59a8c;
    --danger:#e23b2e;
    --ok:#34a85a;
    --radius:18px;
    --radius-sm:12px;
}

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

body{
    background:var(--bg);
    color:var(--text);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}

button{ font:inherit; cursor:pointer; color:inherit; }
a{ color:inherit; }

/* ---- buttons -------------------------------------------------------- */
.btn{
    border:none;
    border-radius:var(--radius-sm);
    padding:12px 16px;
    font-weight:700;
    color:var(--text);
    background:var(--surface-2);
    transition:transform .08s ease, opacity .2s ease;
}
.btn:active{ transform:scale(.97); }
.btn:disabled{ opacity:.6; cursor:default; }
.btn.ember{ background:linear-gradient(135deg,var(--ember),var(--ember-2)); color:#1a0f06; }
.btn.ok{ background:var(--ok); color:#06140a; }
.btn.danger{ background:transparent; color:var(--danger); box-shadow:inset 0 0 0 1.5px var(--danger); }
.btn.ghost{ background:transparent; color:var(--muted); box-shadow:inset 0 0 0 1.5px var(--line); }
.btn.full{ width:100%; }

.btn.loading{ position:relative; color:transparent !important; }
.btn.loading::after{
    content:""; position:absolute; inset:0; margin:auto;
    width:16px; height:16px; border-radius:50%;
    border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
    animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---- ember countdown ring (signature element) ----------------------- */
.ring{ position:relative; width:64px; height:64px; flex:0 0 auto; }
.ring svg{ width:100%; height:100%; transform:rotate(-90deg); display:block; }
.ring-bg{ fill:none; stroke:var(--line); stroke-width:8; }
.ring-fg{
    fill:none; stroke:var(--ember); stroke-width:8; stroke-linecap:round;
    stroke-dasharray:276.46; stroke-dashoffset:276.46;
    transition:stroke-dashoffset .5s linear;
    filter:drop-shadow(0 0 4px rgba(255,90,31,.5));
}
.ring-label{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:13px; letter-spacing:.3px;
}
.ring.indeterminate svg{ animation:ring-spin 1.1s linear infinite; }
.ring.indeterminate .ring-fg{ stroke-dashoffset:200; transition:none; }
@keyframes ring-spin{ from{ transform:rotate(-90deg); } to{ transform:rotate(270deg); } }

/* ---- modal ---------------------------------------------------------- */
.modal{
    position:fixed; inset:0; z-index:150;
    background:rgba(0,0,0,.78);
    display:flex; align-items:center; justify-content:center;
    padding:16px;
}
.modal-content{
    position:relative;
    background:var(--surface);
    width:100%; max-width:520px; max-height:90vh; overflow:auto;
    border-radius:var(--radius); padding:22px;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.modal-content h2{ margin-bottom:14px; font-size:22px; font-weight:800; }
.modal-close{
    position:absolute; top:12px; right:12px;
    width:36px; height:36px; border:none; border-radius:50%;
    background:var(--surface-2); color:var(--text); font-size:20px; line-height:1;
}
.hidden{ display:none !important; }

/* ---- inputs --------------------------------------------------------- */
input, textarea{
    width:100%; padding:12px;
    border:1px solid var(--line); border-radius:var(--radius-sm);
    background:var(--surface-2); color:var(--text); font:inherit;
}
textarea{ min-height:80px; resize:vertical; }
input:focus, textarea:focus{
    outline:2px solid var(--ember); outline-offset:1px; border-color:transparent;
}

/* ---- toast ---------------------------------------------------------- */
.toast{
    position:fixed; left:50%; bottom:96px;
    transform:translate(-50%,12px);
    background:#000; color:var(--text);
    padding:12px 18px; border-radius:var(--radius-sm);
    max-width:90%; box-shadow:0 8px 24px rgba(0,0,0,.45);
    opacity:0; pointer-events:none; z-index:300;
    transition:opacity .2s ease, transform .2s ease;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

@media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}