:root {
    --face: #ece9d8;
    --silver: #f3f3ee;
    --win: #ffffff;
    --desk: #ffffff;
    --ink: #000000;
    --muted: #5a5a5a;
    --grid: #c6c6c6;
    --head: #e6e6e6;
    --navy: #003399;
    --title: #0a59d6;
    --title-2: #5aa1ff;
    --select: #316ac5;
    --ok: #216c2a;
    --err: #9c1b1b;
    --warn: #7a5b00;
    --xp: #0055ea;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--desk);
    color: var(--ink);
    font: 13px/1.5 Tahoma, "MS Sans Serif", Verdana, sans-serif;
}

a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

.app { min-height: 100vh; display: flex; flex-direction: column; background: #fff; }

.menubar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    background: linear-gradient(#fff, #ece9d8);
    border-bottom: 1px solid #808080;
}

.brand {
    font: 700 14px Tahoma, sans-serif;
    color: #000;
    padding: 5px 8px;
    text-decoration: none;
    border: 1px solid transparent;
}
.brand:hover { text-decoration: none; background: #fff; border-color: #808080; }

.nav { display: flex; gap: 1px; flex: 1; flex-wrap: wrap; }

.nav a, .side-list a {
    color: #000;
    padding: 6px 10px;
    text-decoration: none;
}

.nav a:hover, .side-list a:hover { background: #fff; text-decoration: none; }
.nav a.is-active, .side-list a.is-active {
    background: #fff;
    border-top: 1px solid #808080;
    border-left: 1px solid #808080;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.clock {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 2px 7px;
    background: #fff;
    border-top: 1px solid #808080;
    border-left: 1px solid #808080;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    min-width: 280px;
    justify-content: flex-end;
}

.clock-lab { color: var(--muted); }
.clock strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.clock small, .clock em { color: var(--muted); font-style: normal; }

.workspace {
    flex: 1;
    display: block;
    padding: 10px 12px;
    background: #fff;
}

.win, .sidebar, .panel, .auth-card {
    background: var(--face);
    border: 2px solid var(--xp);
    outline: 1px solid #0031a0;
}

.win-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: linear-gradient(180deg, #1c86f0 0%, #0b61d6 48%, #0050cc 52%, #0a59d6 100%);
    color: #fff;
    font: 700 13px Tahoma, sans-serif;
    padding: 6px 8px;
    text-shadow: 1px 1px 0 #003399;
}
.win-title a { color: #000; text-decoration: none; }

.main { min-width: 0; }
.win { min-height: calc(100vh - 62px); }
.content { padding: 16px 18px; background: #fff; display: grid; gap: 16px; }

.panel { overflow: hidden; background: #fff; }
.panel-head, .panel > h2, .form-panel h2 {
    margin: 0;
    background: linear-gradient(180deg, #1c86f0, #0a59d6);
    color: #fff;
    padding: 6px 10px;
    font: 700 13px Tahoma, sans-serif;
    text-shadow: 1px 1px 0 #003399;
}
.panel-head { display: flex; justify-content: space-between; align-items: center; }
.panel-head a { color: #fff; }
.panel-head small { color: #e4f0ff; }

.form-panel { padding-bottom: 10px; background: #fff; }
.form-panel h2 { margin-bottom: 8px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--grid); }
.stat {
    background: #fff;
    border-right: 1px solid var(--grid);
    padding: 8px 9px;
}
.stat:last-child { border-right: 0; }
.stat span { color: var(--muted); font-size: 10px; }
.stat { padding: 10px 12px; }
.stat b { display: block; font-size: 22px; line-height: 1.15; margin: 4px 0 2px; }
.stat small { color: var(--muted); }

.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 14px; }
.empty, .lede, .muted, .hint { color: var(--muted); }
.lede { padding: 8px 10px 0; }

.timeline, .log-list { list-style: none; margin: 0; padding: 0; }
.timeline li, .log-list li {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0;
    border-bottom: 1px solid var(--grid);
    background: #fff;
}
.log-list li { grid-template-columns: 120px 90px 1fr; }
.timeline li:nth-child(even), .log-list li:nth-child(even), .table tr:nth-child(even) td { background: #f7f7f7; }
.timeline time, .log-list time, .timeline div, .log-list div, .log-list .badge { padding: 5px 6px; }
.timeline time, .log-list time { color: var(--navy); }

.cards { display: grid; gap: 0; border: 1px solid var(--grid); }
.mini-card {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 8px;
    align-items: center;
    color: inherit;
    padding: 5px 6px;
    border-bottom: 1px solid var(--grid);
    background: #fff;
}
.mini-card:hover { background: #e8f0ff; text-decoration: none; }
.mini-card img, .mini-ph, .thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    background: #fff;
    border: 1px solid var(--grid);
}
.mini-ph, .thumb-empty { display: grid; place-items: center; color: var(--muted); }

.badge {
    display: inline-block;
    padding: 1px 5px;
    border: 1px solid #b0b0b0;
    background: #fff;
    font-style: normal;
    font-size: 10px;
}
.badge-pending { background: #fff8d0; }
.badge-sent { background: #dff5e1; }
.badge-failed { background: #f8dcdc; }
.badge-draft { background: #f0f0f0; }
.badge-swear { background: #f8dcdc; }
.badge-join { background: #dff5e1; }
.badge-leave { background: #fff8d0; }
.badge-purge { background: #f0f0f0; }

.toolbar, .form-actions { display: flex; gap: 6px; justify-content: space-between; align-items: center; }
.form-actions { justify-content: flex-start; padding: 6px 10px 10px; }

label { display: grid; gap: 5px; margin: 12px 14px; font-size: 13px; }
label input, label textarea, label select, .filters select, .inline-form input, .toolbar select {
    width: 100%;
    background: #fff;
    color: #000;
    font: 13px Tahoma, sans-serif;
    border-top: 1px solid #808080;
    border-left: 1px solid #808080;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding: 8px 9px;
}

.sched {
    display: grid;
    grid-template-columns: repeat(5, minmax(68px, 1fr));
    gap: 10px;
    margin: 10px 14px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--grid);
}
.sched label { margin: 0; }

.editor { margin: 10px 14px; border: 1px solid var(--grid); background: #fff; }
.editor label { margin: 10px; }
.editor textarea { min-height: 150px; font-size: 14px; }
.fmt-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; padding: 8px; background: var(--face); border-bottom: 1px solid var(--grid); }
.fmt-bar select { width: auto; min-width: 140px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--grid); margin: 0 0 8px; }
.table { width: 100%; border-collapse: collapse; background: #fff; }
.table th {
    text-align: left;
    background: var(--head);
    border: 1px solid var(--grid);
    padding: 8px 10px;
    font-weight: 700;
}
.table td {
    padding: 5px 6px;
    border: 1px solid var(--grid);
    vertical-align: top;
    background: #fff;
}
.title-link { font-weight: 700; color: #000; }

.actions { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; }
.actions form { margin: 0; }
.inline-form { display: flex; gap: 3px; align-items: center; }
.inline-form input { width: 110px; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #000;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
    box-shadow: 1px 1px 0 #404040;
    padding: 5px 12px;
    font: 13px Tahoma, sans-serif;
    cursor: default;
    text-decoration: none;
}
.btn:hover { text-decoration: none; background: #fafafa; }
.btn:active {
    border-top: 1px solid #808080;
    border-left: 1px solid #808080;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    box-shadow: none;
}
.btn-accent { background: #fff; font-weight: 700; }
.btn-danger { color: #000; }
.btn-block { width: 100%; }
.btn-sm { padding: 2px 7px; }

.alert {
    padding: 6px 8px;
    background: #fff;
    border: 1px solid var(--grid);
}
.alert-success { border-left: 3px solid var(--ok); }
.alert-error { border-left: 3px solid var(--err); }
.alert-warn { border-left: 3px solid var(--warn); }

.form-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 10px; }

.tg-card {
    margin: 8px;
    background: #fff;
    border: 1px solid var(--grid);
}
.tg-image {
    min-height: 190px;
    background: #fff;
    display: grid;
    place-items: center;
    color: var(--muted);
}
.tg-image img { width: 100%; max-height: 360px; object-fit: contain; display: block; background: #fff; }
.tg-card p, .caption-view {
    padding: 14px 16px 16px;
    margin: 0;
    white-space: pre-wrap;
    border-top: 1px solid var(--grid);
    font-size: 14px;
    line-height: 1.5;
}
.font-tahoma { font-family: Tahoma, Verdana, sans-serif; }
.font-verdana { font-family: Verdana, Geneva, sans-serif; }
.font-georgia { font-family: Georgia, "Times New Roman", serif; }
.font-trebuchet { font-family: "Trebuchet MS", Tahoma, sans-serif; }
.font-palatino { font-family: Palatino, "Palatino Linotype", serif; }
.font-times { font-family: "Times New Roman", Times, serif; }

.code-box {
    background: #fff;
    border: 1px solid var(--grid);
    padding: 7px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 8px 10px;
    font: 11px "Courier New", monospace;
}

.err { color: var(--err); max-width: 240px; }
.menu-btn { display: none; background: #fff; }

.auth-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: #fff;
    padding: 20px;
}
.auth-wrap { width: min(420px, 100%); }
.install-wrap { width: min(600px, 100%); }
.auth-card { padding: 0 0 12px; }
.auth-card .brand {
    display: block;
    background: linear-gradient(180deg, #1c86f0, #0a59d6);
    color: #fff;
    padding: 6px 8px;
    margin: 0;
    text-shadow: 1px 1px 0 #003399;
    border: 0;
}
.auth-card h1 { font: 700 14px Tahoma, sans-serif; margin: 12px 12px 4px; }
.auth-card .lede, .auth-card form, .auth-card .alert, .auth-card .steps, .auth-card .checklist {
    margin-left: 12px;
    margin-right: 12px;
}
.steps { display: flex; gap: 8px; padding: 0; list-style: none; color: var(--muted); }
.steps li.is-on { color: var(--navy); font-weight: 700; }

@media (max-width: 980px) {
    .stats, .split, .form-layout, .grid-2, .sched { grid-template-columns: 1fr; }
    .clock { min-width: 0; flex-wrap: wrap; }
    .win { min-height: 0; }
}