/* Shared Kangkoong identity, matched to kangkoong.com. */
:root {
    color-scheme: dark;
    --accent: #c2f74f;
    --surface: #101113;
    --surface-raised: #171719;
    --forest: #c2f74f;
    --forest-dark: #08090a;
    --green: #c2f74f;
    --lime: #c2f74f;
    --ink: #f2f2ef;
    --muted: #999a95;
    --paper: #050506;
    --white: #101113;
    --line: #232326;
    --amber: #e7bd72;
    --radius: 12px;
    --shadow: none;
    --font-body: "Be Vietnam Pro", "Segoe UI", sans-serif;
    --font-display: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", Consolas, monospace;
}
body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 14px; }
h1,h2,h3,h4 { font-family: var(--font-display); color: var(--ink); letter-spacing: -.045em; }
h1 { font-weight: 800; }
h2,h3,h4 { font-weight: 700; }
::selection { color: #08090a; background: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.muted,.form-hint { color: var(--muted); }
.mono { font-family: var(--font-mono); }
.brand { color: var(--ink); font-family: var(--font-display); font-size: 23px; font-weight: 800; gap: 11px; letter-spacing: -.9px; }
.brand-logo { width: 38px; height: 38px; flex-shrink: 0; object-fit: contain; background: transparent; }
.brand-wordmark { color: var(--ink); line-height: 1.1; }
.brand small { color: var(--muted); font-family: var(--font-mono); font-size: 8px; font-weight: 400; letter-spacing: 1.8px; margin: 7px 0 0; }
.eyebrow { color: var(--muted); font-family: var(--font-mono); font-weight: 400; font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; }
.btn { min-height: 44px; border-radius: 999px; padding: 12px 22px; font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: -.2px; transition: background .15s, border-color .15s; }
.btn:hover { transform: none; }
.btn-primary,.btn-lime { background: var(--accent); color: #08090a; border-color: var(--accent); }
.btn-primary:hover,.btn-lime:hover { color: #08090a; background: #d2ff70; border-color: #d2ff70; }
.btn-secondary { background: transparent; color: var(--ink); border-color: #353639; }
.btn-secondary:hover { color: var(--ink); background: var(--surface-raised); border-color: #72746b; }
.btn-danger { background: #291715; color: #ffaaa0; border-color: #61322d; }
.btn-danger:hover { background: #3b211d; }
.btn-small { min-height: 35px; padding: 8px 14px; font-size: 11px; }
.btn-lg { min-height: 54px; padding: 15px 25px; font-size: 15px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn .icon { width: 18px; height: 18px; }
.icon-button { color: #a4a59f; background: transparent; border-radius: 50%; }
.icon-button:hover { color: var(--accent); background: #202219; }
.text-link { color: var(--accent); font-weight: 500; font-size: 12px; }
.text-link:hover { color: #daff94; }
.pill { font-family: var(--font-mono); color: var(--accent); font-size: 9px; font-weight: 400; letter-spacing: 1.6px; border-color: #333c24; background: #1b2211; }
.pill-light { color: var(--accent); background: #c2f74f0c; border-color: #c2f74f33; }
.pill-light .status-dot,.tiny-dot { color: var(--accent); }
.badge { font-family: var(--font-mono); font-weight: 400; font-size: 9px; text-transform: uppercase; letter-spacing: .45px; padding: 5px 8px; border-radius: 4px; }
.badge-green,.green { background: #202b14; color: #c2f74f; }
.badge-amber,.amber { background: #302614; color: #e7bd72; }
.badge-violet,.violet { background: #282136; color: #c4aff2; }
.badge-gray { background: #242427; color: #b5b6b0; }
.blue { background: #192a35; color: #92c9e8; }
.count-badge { background: #242724; color: #bfc4b8; font-family: var(--font-mono); border-radius: 4px; }
.avatar { color: var(--accent); background: #29331d; border: 1px solid #3a4729; font-family: var(--font-display); }
.card { background: var(--surface); border-color: var(--line); border-radius: var(--radius); box-shadow: none; }
.card-header { border-color: var(--line); }
.card-header h2 { color: var(--ink); font-size: 17px; }
.card-header p { color: var(--muted); font-size: 12px; }
.card-header>.icon { color: #777a71; }
.form-group { min-width: 0; }
.form-label { color: #c0c2b9; font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 1.1px; text-transform: uppercase; }
.form-input,.form-select,.form-textarea { color: var(--ink); background: #0b0c0d; border: 1px solid #35363a; border-radius: 8px; font-size: 14px; min-height: 47px; box-shadow: none; }
.form-input::placeholder,.form-textarea::placeholder { color: #73756f; }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px #c2f74f15; background: #0b0c0d; }
.form-input:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px #101113 inset; caret-color: var(--accent); }
.form-select option { background: var(--surface); color: var(--ink); }
.form-footer { border-color: var(--line); }
.form-hint { font-size: 11px; line-height: 1.7; }
.password-toggle { color: #90938a; }
.checkbox-label { color: #afb1a8; font-size: 11px; }
input[type=checkbox] { accent-color: var(--accent); }
.field-error { color: #ffaaa0; font-size: 12px; }
.alert { border-radius: 9px; font-size: 13px; }
.alert-success { color: #d7efb1; background: #172012; border-color: #3d4f2b; }
.alert-error { color: #ffc0b7; background: #281818; border-color: #633630; }
.alert .icon { color: inherit; }
.data-table { color: #d2d4ca; font-size: 12px; }
.data-table thead { background: #0b0c0d; }
.data-table th { color: #94978c; font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; font-weight: 400; text-transform: uppercase; padding: 16px 20px; }
.data-table td { color: #c3c5bc; border-color: #262729; padding: 20px; }
.data-table td strong { color: var(--ink); }
.data-table tbody tr:hover { background: #151719; }
.data-table td.amount,.amount { color: var(--accent); }
.table-meta { color: #898c81; font-size: 10px; }
.table-note { color: #a5a89c; }
.pagination-wrap { border-color: var(--line); }
.pagination-summary { color: #92958b; }
.kang-pagination .pagination-controls>a,.kang-pagination .pagination-controls>span { color: #bac2aa; background: #111311; border-color: #32372c; }
.kang-pagination .pagination-controls>a:hover { color: var(--accent); background: #242c19; }
.kang-pagination .pagination-controls>.pagination-current { color: #08090a; background: var(--accent); border-color: var(--accent); }
.kang-pagination .pagination-controls>.pagination-disabled { color: #64695d; background: #0b0d0a; }
.kang-pagination .pagination-controls>.pagination-ellipsis { color: #9ca58e; background: transparent; border-color: transparent; }
.skip-link { background: var(--accent); color: #08090a; font-weight: 700; }
@media(max-width:560px) {
    .form-input,.form-select,.form-textarea { font-size: 16px; }
    .btn { min-height: 44px; }
}