* { box-sizing: border-box; }

:root {
    --bg: #f4f6f8;
    --text: #222;
    --muted: #64748b;
    --nav-bg: #1f2a44;
    --nav-link: #cfd8ea;
    --panel: #ffffff;
    --border: #eef1f4;
    --th-bg: #eef1f6;
    --hover: #f8fafc;
    --input-bg: #ffffff;
    --input-border: #cbd5e1;
    --shadow: 0 1px 3px rgba(0,0,0,.08);
    --flash-bg: #e7f4e4; --flash-border: #9fce93;
    --badge-new-bg: #dbeafe; --badge-new-fg: #1d4ed8;
    --badge-work-bg: #fef3c7; --badge-work-fg: #b45309;
    --badge-closed-bg: #dcfce7; --badge-closed-fg: #15803d;
    --msg-bg: #eef1f6; --msg-author-bg: #dbeafe;
    --num-total: #1f2a44; --num-work: #d97706; --num-closed: #15803d;
    --btn-bg: #1f2a44; --btn-fg: #fff; --btn-danger: #b91c1c;
}

[data-theme="dark"] {
    --bg: #0f172a;
    --text: #e2e8f0;
    --muted: #94a3b8;
    --nav-bg: #020617;
    --nav-link: #94a3b8;
    --panel: #1e293b;
    --border: #334155;
    --th-bg: #273449;
    --hover: #263243;
    --input-bg: #0f172a;
    --input-border: #475569;
    --shadow: 0 1px 3px rgba(0,0,0,.4);
    --flash-bg: #14532d; --flash-border: #166534;
    --badge-new-bg: #1e3a8a; --badge-new-fg: #bfdbfe;
    --badge-work-bg: #78350f; --badge-work-fg: #fde68a;
    --badge-closed-bg: #14532d; --badge-closed-fg: #bbf7d0;
    --msg-bg: #273449; --msg-author-bg: #1e3a8a;
    --num-total: #e2e8f0; --num-work: #fbbf24; --num-closed: #4ade80;
    --btn-bg: #334155; --btn-fg: #e2e8f0; --btn-danger: #991b1b;
}

body { font-family: 'Segoe UI', Arial, sans-serif; margin: 0; background: var(--bg); color: var(--text); }
nav { background: var(--nav-bg); color: #fff; padding: 10px 24px; display: flex; gap: 18px; align-items: center; }
nav .brand { font-weight: 700; font-size: 18px; margin-right: 14px; }
nav a { color: var(--nav-link); text-decoration: none; }
nav a:hover { color: #fff; }
#theme-toggle { background: none; border: 1px solid var(--nav-link); color: var(--nav-link);
    border-radius: 6px; cursor: pointer; padding: 2px 9px; font-size: 14px; }
#theme-toggle:hover { color: #fff; border-color: #fff; }
main { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
h1 { font-size: 22px; }
a { color: inherit; }
.flash { background: var(--flash-bg); border: 1px solid var(--flash-border); padding: 8px 14px; border-radius: 6px; margin-bottom: 14px; }
.cards { display: flex; gap: 16px; margin: 18px 0; flex-wrap: wrap; }
.card { background: var(--panel); border-radius: 10px; padding: 18px 26px; box-shadow: var(--shadow); min-width: 180px; }
.card .num { font-size: 34px; font-weight: 700; }
.card.total .num { color: var(--num-total); }
.card.work .num { color: var(--num-work); }
.card.closed .num { color: var(--num-closed); }
table { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14px; }
th { background: var(--th-bg); }
tr:hover td { background: var(--hover); }
.badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; }
.badge.new { background: var(--badge-new-bg); color: var(--badge-new-fg); }
.badge.in_work { background: var(--badge-work-bg); color: var(--badge-work-fg); }
.badge.closed { background: var(--badge-closed-bg); color: var(--badge-closed-fg); }
.btn { display: inline-block; background: var(--btn-bg); color: var(--btn-fg); border: none; padding: 7px 14px; border-radius: 6px; cursor: pointer; text-decoration: none; font-size: 14px; }
.btn.small { padding: 3px 10px; font-size: 12px; }
.btn.danger { background: var(--btn-danger); }
form.inline { display: inline; }
label { display: block; margin: 10px 0 4px; font-size: 14px; }
input[type=text], input[type=number], input[type=password], input[type=date], select {
    padding: 7px 10px; border: 1px solid var(--input-border); border-radius: 6px;
    width: 320px; max-width: 100%; background: var(--input-bg); color: var(--text); }
.formbox { background: var(--panel); padding: 18px 22px; border-radius: 10px; box-shadow: var(--shadow); max-width: 480px; }
.chat { background: var(--panel); border-radius: 10px; padding: 14px; box-shadow: var(--shadow); }
.msg { margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: var(--msg-bg); max-width: 75%; }
.msg.author { background: var(--msg-author-bg); }
.msg .who { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.msg .when { font-size: 11px; color: var(--muted); }
.filters a { margin-right: 10px; }
.muted { color: var(--muted); font-size: 13px; }