:root {
    /* brand */
    --brand: #ff6600;
    --brand-hover: #e65c00;
    --brand-active: #cc5200;
    --brand-weak: #ffb380;
    --brand-ghost: rgba(255, 102, 0, .12);
    /* accents */
    --accent-1: #60a5fa;
    --accent-2: #a78bfa;
    --accent-3: #2dd4bf;
    /* semantic */
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #60a5fa;
    /* neutrals (dark) */
    --bg: #0e0e10;
    --surface: #16161a;
    --elev-2: #1b1b21;
    --border: #1f1f24;
    --text: #e7e7ea;
    --text-muted: #9b9ba1;
    /* focus ring */
    --ring: 0 0 0 3px rgba(255, 102, 0, .35);
    --ring-subtle: 0 0 0 3px rgba(255, 179, 128, .3);
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: var(--bg);
    color: var(--text)
}

a {
    color: var(--brand);
    text-decoration: none
}

a:hover {
    color: var(--brand-hover)
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 16px
}

.btn {
    background: var(--brand);
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    color: #111 !important;
    cursor: pointer
}

.btn:hover {
    background: var(--brand-hover) !important
}

input, textarea {
    background: #121216;
    color: var(--text);
    border: 1px solid #2a2a31;
    border-radius: 8px;
    padding: 8px;
    width: 100%;
    outline: none
}

input:hover, textarea:hover {
    border-color: var(--brand-hover)
}

input:focus, textarea:focus {
    border-color: var(--brand);
    box-shadow: var(--ring)
}

.muted {
    color: var(--text-muted);
    font-size: 12px
}

.counter {
    display: inline-flex;
    gap: 8px;
    align-items: center
}