:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --border: #d9dde3;
  --text: #1f2933;
  --muted: #6b7280;
  --primary: #1d4ed8;
  --danger: #b91c1c;
  --amber: #b45309;
  --amber-bg: #fef3c7;
  --green: #15803d;
  --red-bg: #fee2e2;
  --note-bg: #fffbeb;
  --out-bg: #eff6ff;
  --sys-bg: #f3f4f6;
  --badge-bg: #e5e7eb;
  --th-bg: #fafafa;
  --row-hover: #f8fafc;
  --bulk-bg: #eef4ff;
  --bulk-border: #c7d7fe;
  --bulk-text: #374151;
  --focus: #bfdbfe;
  --in-bg: #dcfce7;
  --out-border: #bfdbfe;
  --note-border: #fde68a;
  --flash-ok-bg: #f0fdf4;
  --flash-ok-border: #86efac;
  --flash-err-border: #fca5a5;
  --flash-info-border: #93c5fd;
  --shadow: rgba(0,0,0,.08);
  --badge-red-bg: #fee2e2;
  --badge-red-text: #991b1b;
  --primary-dark: color-mix(in srgb, var(--primary), black 18%);
  --font-size: 13.5px;
  --glass-alpha: 72%;
  --glass-blur: 14px;
  --radius: 4px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); font-size: var(--font-size); line-height: 1.4; color: var(--text); background: var(--bg-image, none) center / cover no-repeat fixed var(--bg); min-height: 100vh; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 20px; margin: 0 0 12px; }
h3 { font-size: 13px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
h3 .muted { text-transform: none; letter-spacing: 0; font-weight: normal; }
.muted { color: var(--muted); }
.hint { font-size: 12px; }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 2px 0; }

/* Top bar */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--panel); border-bottom: 1px solid var(--border); }
.topbar-inner { display: flex; align-items: center; gap: 12px; padding: 6px 16px; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 15px; color: var(--text); white-space: nowrap; }
.nav-views, .nav-boards { display: flex; gap: 2px; flex-wrap: wrap; }
.nav-views a, .nav-boards a, .nav-link { padding: 4px 8px; border-radius: var(--radius); color: var(--text); white-space: nowrap; }
.nav-views a:hover, .nav-boards a:hover, .nav-link:hover { background: var(--bg); text-decoration: none; }
.nav-boards { border-left: 1px solid var(--border); padding-left: 8px; }
.nav-boards a { color: var(--muted); }
.search { margin-left: auto; }
.search input { width: 240px; }
.usermenu { display: flex; gap: 10px; align-items: center; color: var(--muted); white-space: nowrap; }

.page { padding: 14px 16px; max-width: 1600px; margin: 0 auto; }
.narrow { max-width: 820px; }

/* Flash messages */
.flashes { margin-bottom: 10px; }
.flash { padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel); margin-bottom: 6px; }
.flash-success { border-color: var(--flash-ok-border); background: var(--flash-ok-bg); }
.flash-error { border-color: var(--flash-err-border); background: var(--red-bg); }
.flash-info { border-color: var(--flash-info-border); background: var(--out-bg); }

/* Forms and buttons */
input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"],
input[type="datetime-local"], select, textarea {
  font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 5px 7px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); border-color: var(--primary); }
textarea { resize: vertical; }
label { display: block; font-size: 12px; color: var(--muted); }
label > input, label > select, label > textarea { margin-top: 2px; }
label.check { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 13px; }
label.check input { width: auto; margin: 0; }
.w-small { width: 80px; }
.btn { display: inline-block; font: inherit; padding: 5px 11px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); color: var(--text); cursor: pointer; white-space: nowrap; line-height: 1.3; }
.btn:hover { background: var(--bg); text-decoration: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-danger { color: var(--danger); border-color: var(--flash-err-border); }
.btn-danger:hover { background: var(--red-bg); }
.btn-small { padding: 3px 8px; font-size: 12px; }
.btn-block { display: block; width: 100%; text-align: center; margin-top: 8px; }
.inline-form { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.inline-form input, .inline-form select { width: auto; flex: 1; min-width: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.form-grid-tight { gap: 6px 10px; margin-top: 6px; }
.field-wide, .form-grid .field-wide { grid-column: 1 / -1; }
.actions { display: flex; gap: 8px; }
.typeahead { position: relative; }
.typeahead-results { position: absolute; z-index: 10; left: 0; right: 0; top: 100%; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 4px 12px var(--shadow); max-height: 260px; overflow: auto; }
.typeahead-item { padding: 6px 8px; cursor: pointer; white-space: pre; }
.typeahead-item:hover { background: var(--out-bg); }

/* Login */
.login-box { max-width: 360px; margin: 60px auto; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 24px; }
.login-box h1 { text-align: center; }
.login-box label { margin-bottom: 10px; }
.divider { text-align: center; color: var(--muted); margin: 12px 0; }

/* Badges */
.badge { display: inline-block; font-size: 11px; line-height: 1; padding: 4px 6px; border-radius: 3px; background: var(--badge-bg); color: var(--text); white-space: nowrap; vertical-align: middle; }
.badge-outline { background: transparent; border: 1px solid var(--border); }
.badge-amber { background: var(--amber-bg); color: var(--amber); }
.badge-note { background: var(--amber-bg); color: var(--amber); }
.badge-system { background: var(--sys-bg); color: var(--muted); }
.badge-in { background: var(--in-bg); color: var(--green); }
.badge-out { background: var(--out-bg); color: var(--primary-dark); }
.badge-delivery { border: 1px solid var(--border); background: transparent; }
.badge-sent { color: var(--green); }
.badge-failed, .badge-bounced { color: var(--danger); background: var(--red-bg); }
.badge-pending { color: var(--amber); }
.sla { font-size: 12px; padding: 2px 6px; border-radius: 3px; white-space: nowrap; }
.sla-ok { color: var(--green); }
.sla-soon { background: var(--amber-bg); color: var(--amber); }
.sla-breached { background: var(--red-bg); color: var(--danger); font-weight: 600; }

/* Filter bar and tabs */
.filterbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.tab { padding: 5px 10px; border-radius: var(--radius); color: var(--text); border: 1px solid transparent; }
.tab:hover { background: var(--panel); text-decoration: none; }
.tab.active { background: var(--panel); border-color: var(--border); font-weight: 600; }
.filters { display: flex; gap: 8px; }
.filters select { width: auto; }
.searchnote { color: var(--muted); }

/* Ticket table */
.tablewrap { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; background: var(--th-bg); }
th.num, td.num { text-align: right; }
tbody tr:last-child td { border-bottom: 0; }
.tickets tbody tr:hover { background: var(--row-hover); }
.ticket-row.unread td.col-subject a, .ticket-row.unread td.col-num a { font-weight: 700; }
.col-num { width: 84px; white-space: nowrap; }
.col-subject { max-width: 460px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.empty { text-align: center; color: var(--muted); padding: 30px; }
table.compact th, table.compact td { padding: 4px 6px; font-size: 12.5px; }

/* Ticket detail */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.detail-main { min-width: 0; }
.detail-side { min-width: 0; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; }
.ticket-header { display: flex; align-items: center; gap: 10px; }
.ticket-number { font-weight: 700; color: var(--muted); white-space: nowrap; }
.subject-form { flex: 1; }
.subject-input { font-size: 18px; font-weight: 600; border-color: transparent; background: transparent; padding: 4px 6px; }
.subject-input:hover { border-color: var(--border); background: var(--panel); }
.subject-static { flex: 1; font-size: 18px; margin: 0; }
.ticket-meta { margin: 4px 0 12px; }
.kv { display: grid; grid-template-columns: 90px 1fr; gap: 3px 8px; margin: 6px 0 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.sidebar .row { margin-bottom: 6px; }
.chips { list-style: none; padding: 0; margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 12px; padding: 2px 8px; font-size: 12px; background: var(--bg); }
.chip-x { border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1; padding: 0 2px; }
.chip-x:hover { color: var(--danger); }
.activity { list-style: none; padding: 0; margin: 0; font-size: 12.5px; }
.activity li { padding: 4px 0; border-bottom: 1px solid var(--border); }
.activity li:last-child { border-bottom: 0; }
.activity .muted { margin-right: 4px; }

/* Thread */
.thread { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.msg { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; }
.msg-note { background: var(--note-bg); border-color: var(--note-border); }
.msg-outbound { background: var(--out-bg); border-color: var(--out-border); }
.msg-system { background: var(--sys-bg); font-size: 12px; padding: 4px 12px; color: var(--muted); }
.msg-system .msg-body { color: var(--muted); }
.msg-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.msg-time { margin-left: auto; }
.msg-body { white-space: normal; overflow-wrap: anywhere; }
.attachments { list-style: none; padding: 0; margin: 6px 0 0; display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.attachments li { border: 1px solid var(--border); border-radius: var(--radius); padding: 2px 6px; background: var(--bg); }

/* Reply form */
.reply-form { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; }
.reply-form.is-note { background: var(--note-bg); border-color: var(--note-border); }
.reply-kind { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; flex-wrap: wrap; }
.reply-kind label { display: inline-flex; align-items: center; gap: 4px; color: var(--text); font-size: 13px; }
.reply-kind input { width: auto; margin: 0; }
.reply-kind .canned { margin-left: auto; width: auto; }
.reply-controls { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.reply-controls label { font-size: 12px; }
.reply-controls select { width: auto; }
.reply-controls input[type="file"] { border: 0; padding: 0; width: auto; }
.reply-controls .btn { margin-left: auto; }

/* Time */
.time table { margin-top: 6px; }
.timer-running { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px; background: var(--amber-bg); border-radius: var(--radius); }
.timer-running .inline-form { margin: 0; flex: 1; }
.timer-elsewhere { padding: 4px 0; }
.manual-time { margin-top: 8px; }
.manual-time summary { cursor: pointer; color: var(--primary); font-size: 12px; }

/* Timesheet */
.weeknav { display: flex; align-items: center; gap: 10px; }
.week-total { margin-left: auto; }
.days { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; }
.day h3 { display: flex; justify-content: space-between; }

@media (max-width: 1000px) {
  .detail { grid-template-columns: 1fr; }
  .search input { width: 160px; }
  .form-grid { grid-template-columns: 1fr; }
  .days { grid-template-columns: 1fr; }
}

/* bulk actions and delete state */
.col-check { width: 28px; text-align: center; }
.bulkbar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 8px 12px; margin: 0 0 10px; background: var(--bulk-bg); border: 1px solid var(--bulk-border); border-radius: 6px; font-size: 13px; }
.bulkbar label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--bulk-text); }
.bulkbar select, .bulkbar input[type=text] { font-size: 13px; }
.bulk-count { margin-right: 6px; }
.badge-red { background: var(--badge-red-bg); color: var(--badge-red-text); }
.ticket-row.deleted td { opacity: 0.6; }

/* ---- Themes (html[data-theme]) ---- */
html[data-theme="paper"] {
  --bg: #f1ece1; --panel: #fffdf7; --border: #dcd3c1; --text: #2b2620; --muted: #7b7163; --primary: #9a5b1e;
  --danger: #b42318; --amber: #a15c07; --amber-bg: #fbeed0; --green: #3b6d11; --red-bg: #fbe3df; --note-bg: #fdf6dc; --out-bg: #edf1f5; --sys-bg: #f3efe6;
  --badge-bg: #e8e1d2; --th-bg: #f8f4ea; --row-hover: #f6f1e6; --bulk-bg: #f4ecdc; --bulk-border: #d9c8a6; --bulk-text: #4b4137; --focus: #e2c9a3;
  --in-bg: #e3f0d3; --out-border: #cbd5df; --note-border: #ecd28a; --flash-ok-bg: #eef7e4; --flash-ok-border: #a9cf85; --flash-err-border: #e9a39b; --flash-info-border: #a9bdd3;
}
html[data-theme="dark"] {
  --bg: #0f1317; --panel: #171c22; --border: #2a323c; --text: #e6e9ee; --muted: #98a2b3; --primary: #60a5fa;
  --primary-dark: color-mix(in srgb, var(--primary), white 12%);
  --danger: #f87171; --amber: #fbbf24; --amber-bg: #3a2f0f; --green: #4ade80; --red-bg: #3f1d1d; --note-bg: #2a2410; --out-bg: #12233d; --sys-bg: #1c222a;
  --badge-bg: #2a323c; --th-bg: #131820; --row-hover: #1c232c; --bulk-bg: #14243a; --bulk-border: #234a7a; --bulk-text: #cbd5e1; --focus: #1e3a8a;
  --in-bg: #113a22; --out-border: #1e3a8a; --note-border: #5a4a12; --flash-ok-bg: #0f2a18; --flash-ok-border: #166534; --flash-err-border: #991b1b; --flash-info-border: #1e40af;
  --shadow: rgba(0,0,0,.5); --badge-red-bg: #3f1d1d; --badge-red-text: #fca5a5;
  color-scheme: dark;
}
html[data-theme="midnight"] {
  --bg: #0a0f1f; --panel: #111a33; --border: #243052; --text: #e2e8f0; --muted: #94a3b8; --primary: #818cf8;
  --primary-dark: color-mix(in srgb, var(--primary), white 12%);
  --danger: #fb7185; --amber: #fcd34d; --amber-bg: #3b2f0e; --green: #34d399; --red-bg: #3f1d2a; --note-bg: #2b2611; --out-bg: #16234a; --sys-bg: #161f3a;
  --badge-bg: #243052; --th-bg: #0e162b; --row-hover: #172140; --bulk-bg: #172a52; --bulk-border: #2f4a8a; --bulk-text: #cbd5e1; --focus: #312e81;
  --in-bg: #0f3a2a; --out-border: #3730a3; --note-border: #6b5514; --flash-ok-bg: #0f2a22; --flash-ok-border: #14705a; --flash-err-border: #9f1239; --flash-info-border: #3730a3;
  --shadow: rgba(0,0,0,.55); --badge-red-bg: #3f1d2a; --badge-red-text: #fda4af;
  color-scheme: dark;
}
html[data-theme="dark"] .btn-primary, html[data-theme="midnight"] .btn-primary { color: #0b1020; }

/* ---- Backgrounds (html[data-bg]) ---- */
:root {
  --bgimg-aurora: radial-gradient(1200px 600px at 10% 0%, rgba(45,212,191,.35), transparent 60%), radial-gradient(1000px 700px at 90% 20%, rgba(139,92,246,.35), transparent 60%), radial-gradient(900px 600px at 50% 100%, rgba(59,130,246,.30), transparent 60%);
  --bgimg-sunset: linear-gradient(160deg, rgba(251,146,60,.40), rgba(236,72,153,.28) 50%, rgba(99,102,241,.35));
  --bgimg-ocean: linear-gradient(180deg, rgba(14,165,233,.35), rgba(6,78,120,.45)), radial-gradient(800px 500px at 80% 90%, rgba(45,212,191,.35), transparent 60%);
  --bgimg-forest: radial-gradient(1000px 600px at 15% 10%, rgba(34,197,94,.30), transparent 60%), radial-gradient(900px 600px at 85% 80%, rgba(20,83,45,.50), transparent 60%);
  --bgimg-graphite: radial-gradient(900px 600px at 20% 0%, rgba(148,163,184,.25), transparent 60%), radial-gradient(900px 600px at 90% 100%, rgba(71,85,105,.35), transparent 60%);
  --bgimg-dots: radial-gradient(color-mix(in srgb, var(--text) 14%, transparent) 1px, transparent 1px);
  --bgimg-grid: linear-gradient(color-mix(in srgb, var(--text) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 8%, transparent) 1px, transparent 1px);
}
html[data-bg="aurora"] { --bg-image: var(--bgimg-aurora); }
html[data-bg="sunset"] { --bg-image: var(--bgimg-sunset); }
html[data-bg="ocean"] { --bg-image: var(--bgimg-ocean); }
html[data-bg="forest"] { --bg-image: var(--bgimg-forest); }
html[data-bg="graphite"] { --bg-image: var(--bgimg-graphite); }
html[data-bg="dots"] { --bg-image: var(--bgimg-dots); }
html[data-bg="grid"] { --bg-image: var(--bgimg-grid); }
.bgtile[data-bg="aurora"] i { background-image: var(--bgimg-aurora); }
.bgtile[data-bg="sunset"] i { background-image: var(--bgimg-sunset); }
.bgtile[data-bg="ocean"] i { background-image: var(--bgimg-ocean); }
.bgtile[data-bg="forest"] i { background-image: var(--bgimg-forest); }
.bgtile[data-bg="graphite"] i { background-image: var(--bgimg-graphite); }
.bgtile[data-bg="dots"] i { background-image: var(--bgimg-dots); }
.bgtile[data-bg="grid"] i { background-image: var(--bgimg-grid); }
.bgtile[data-bg="dots"] i { background-size: 8px 8px; }
.bgtile[data-bg="grid"] i { background-size: 10px 10px; }
html[data-bg="dots"] body { background-size: 18px 18px; background-attachment: scroll; }
html[data-bg="grid"] body { background-size: 28px 28px; background-attachment: scroll; }

/* ---- Frosted glass (html[data-glass="1"]) ---- */
html[data-glass="1"] .tablewrap, html[data-glass="1"] .card, html[data-glass="1"] .msg, html[data-glass="1"] .topbar,
html[data-glass="1"] .bulkbar, html[data-glass="1"] .reply-form, html[data-glass="1"] .login-box, html[data-glass="1"] .flash,
html[data-glass="1"] .tab.active, html[data-glass="1"] .typeahead-results {
  background-color: color-mix(in srgb, var(--panel) var(--glass-alpha), transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%); backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
html[data-glass="1"] .msg-note, html[data-glass="1"] .reply-form.is-note { background-color: color-mix(in srgb, var(--note-bg) var(--glass-alpha), transparent); }
html[data-glass="1"] .msg-outbound { background-color: color-mix(in srgb, var(--out-bg) var(--glass-alpha), transparent); }
html[data-glass="1"] .msg-system { background-color: color-mix(in srgb, var(--sys-bg) var(--glass-alpha), transparent); }
html[data-glass="1"] .bulkbar { background-color: color-mix(in srgb, var(--bulk-bg) var(--glass-alpha), transparent); }
html[data-glass="1"] th { background: color-mix(in srgb, var(--th-bg) 55%, transparent); }
html[data-glass="1"] .filterbar, html[data-glass="1"] .weeknav, html[data-glass="1"] .ticket-header, html[data-glass="1"] .ticket-meta, html[data-glass="1"] h1 {
  background-color: color-mix(in srgb, var(--panel) var(--glass-alpha), transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%); backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px;
}
html[data-glass="1"] h1 { display: inline-block; }
html[data-glass="1"] .ticket-header { margin-bottom: 6px; }
html[data-glass="1"] .ticket-meta { margin: 0 0 12px; }
html[data-glass="1"] .tab:hover { background: color-mix(in srgb, var(--bg) 70%, transparent); }
html[data-glass="1"] .tickets tbody tr:hover { background: color-mix(in srgb, var(--row-hover) 60%, transparent); }
html[data-glass="1"] .tablewrap, html[data-glass="1"] .card, html[data-glass="1"] .msg, html[data-glass="1"] .reply-form { box-shadow: 0 6px 24px var(--shadow); }

/* ---- Appearance dialog ---- */
dialog.appearance { border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); padding: 16px 18px; width: min(520px, 92vw); box-shadow: 0 12px 40px var(--shadow); }
dialog.appearance::backdrop { background: rgba(0,0,0,.35); }
dialog.appearance h2 { margin: 0 0 10px; font-size: 16px; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.swatch { border: 2px solid var(--border); border-radius: 8px; padding: 0; width: 84px; height: 56px; cursor: pointer; overflow: hidden; background: var(--sw-bg, #fff); position: relative; font: inherit; color: var(--sw-text, #111); }
.swatch span { position: absolute; left: 6px; bottom: 4px; font-size: 11px; }
.swatch.active { border-color: var(--primary); outline: 2px solid var(--focus); }
.bgtiles { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.bgtile { width: 58px; height: 40px; border: 2px solid var(--border); border-radius: 6px; cursor: pointer; padding: 0; background: var(--bg); position: relative; overflow: hidden; }
.bgtile.active { border-color: var(--primary); outline: 2px solid var(--focus); }
.bgtile i { position: absolute; inset: 0; background-position: center; background-size: cover; }
.bgtile b { position: absolute; left: 0; right: 0; bottom: 0; font-size: 9px; font-weight: 500; text-align: center; background: color-mix(in srgb, var(--panel) 75%, transparent); }
.app-row { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; align-items: center; margin-top: 10px; font-size: 13px; }
.app-row label { display: contents; }
.app-row input[type="range"] { width: 100%; }
.app-row input[type="color"] { width: 44px; height: 28px; padding: 0; border: 1px solid var(--border); background: var(--panel); border-radius: var(--radius); }
.app-inline { display: flex; align-items: center; gap: 8px; }
.app-inline input[type="text"] { flex: 1; }
.app-actions { display: flex; gap: 8px; margin-top: 14px; }
.app-actions .btn-primary { margin-left: auto; }

/* ---- Landing page ---- */
.landing { display: flex; justify-content: center; padding: 6vh 0 40px; }
.landing-card { max-width: 560px; width: 100%; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 28px 28px 22px; text-align: center; }
.landing-brand { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 6px; }
.landing-card h1 { font-size: 26px; margin: 0 0 10px; }
.landing-lead { font-size: 15px; margin: 0 0 22px; color: var(--text); }
.landing-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-big { padding: 12px 22px; font-size: 15px; min-width: 180px; }
.landing-note { margin: 22px 0 0; font-size: 12.5px; }

/* ---- Phone layout ---- */
.nav-toggle { display: none; width: 40px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); cursor: pointer; padding: 6px 9px; flex-direction: column; justify-content: space-between; }
.nav-toggle span { display: block; height: 2px; background: var(--text); border-radius: 1px; }

@media (pointer: coarse) {
  .btn, .tab, .nav-views a, .nav-boards a, .nav-link { min-height: 36px; display: inline-flex; align-items: center; }
  input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input[type="datetime-local"], select, textarea { font-size: 16px; }
}

@media (max-width: 900px) {
  .topbar-inner { gap: 8px; padding: 6px 10px; }
  .nav-toggle { display: flex; order: 1; }
  .brand { order: 0; }
  .search { order: 2; margin-left: auto; }
  .search input { width: 140px; }
  .topbar-inner > .btn-primary { order: 3; padding: 6px 10px; }
  .nav-views, .nav-boards, .topbar-inner > .nav-link, .usermenu { display: none; order: 10; width: 100%; }
  .topbar.nav-open .nav-views, .topbar.nav-open .nav-boards, .topbar.nav-open > .topbar-inner > .nav-link, .topbar.nav-open .usermenu { display: flex; flex-wrap: wrap; gap: 4px; }
  .topbar.nav-open .nav-boards { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 6px; }
  .topbar.nav-open .usermenu { border-top: 1px solid var(--border); padding-top: 6px; justify-content: space-between; }
  .page { padding: 10px 10px; }
}

@media (max-width: 720px) {
  .filterbar { gap: 8px; }
  .tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .tab { flex: 0 0 auto; }
  .filters { width: 100%; }
  .filters select { flex: 1; min-width: 0; }
  .bulkbar { gap: 8px 12px; }
  .bulkbar label { flex: 1 1 100%; }
  .bulkbar select, .bulkbar input[type=text] { flex: 1; min-width: 0; }

  /* Ticket rows become cards */
  .tablewrap { border-left: 0; border-right: 0; border-radius: 0; margin: 0 -10px; }
  .tickets thead { display: none; }
  .tickets tr { display: grid; grid-template-columns: auto auto 1fr auto; grid-template-areas:
      "check num num status"
      "subject subject subject subject"
      "company company contact contact"
      "priority assignee activity sla";
    gap: 4px 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); }
  .tickets td { display: block; border: 0; padding: 0; min-width: 0; }
  .tickets td.col-check { grid-area: check; width: auto; }
  .tickets td.col-num { grid-area: num; width: auto; }
  .tickets td.col-status { grid-area: status; justify-self: end; }
  .tickets td.col-subject { grid-area: subject; max-width: none; white-space: normal; font-size: 14.5px; line-height: 1.3; }
  .tickets td.col-company { grid-area: company; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tickets td.col-contact { grid-area: contact; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
  .tickets td.col-priority { grid-area: priority; }
  .tickets td.col-assignee { grid-area: assignee; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tickets td.col-activity { grid-area: activity; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tickets td.col-sla { grid-area: sla; justify-self: end; }
  .tickets td.empty { display: block; grid-column: 1 / -1; }
  .tickets tr.ticket-row:hover { background: transparent; }

  /* Ticket detail */
  .ticket-header { flex-wrap: wrap; }
  .subject-static, .subject-input { font-size: 16px; }
  .kv { grid-template-columns: 80px 1fr; }
  .msg { padding: 8px 10px; }
  .reply-controls .btn { margin-left: 0; width: 100%; }
  .reply-kind .canned { margin-left: 0; width: 100%; }
  .landing-card { padding: 22px 16px 18px; border-radius: 8px; }
  .btn-big { width: 100%; }
  dialog.appearance { padding: 12px; }
  .app-row { grid-template-columns: 90px 1fr; }
}