:root {
    --bg: #0d1117;
    --bg-gradient: radial-gradient(ellipse at top left, #161b22 0%, #0d1117 60%);
    --surface: #161b22;
    --surface-2: #1c2128;
    --surface-3: #21262d;
    --border: #30363d;
    --border-hover: #484f58;
    --accent: #3b82f6;
    --accent-hover: #60a5fa;
    --accent-soft: rgba(59, 130, 246, 0.1);
    --text: #c9d1d9;
    --text-muted: #8b949e;
    --text-dim: #6e7681;
    --success: #238636;
    --success-hover: #2ea043;
    --warning: #d29922;
    --danger: #da3633;
    --danger-hover: #f85149;
    --info: #388bfd;
    --radius: 8px;
    --radius-sm: 4px;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --gitflow-topbar: 0px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
*::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
}
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
    background: transparent;
}
html, body {
    height: 100%;
    height: 100dvh;
    height: var(--app-height, 100dvh);
    max-height: 100dvh;
    max-height: var(--app-height, 100dvh);
}
body {
    font-family: var(--font-sans);
    background: var(--bg-gradient);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
}
.mobile-topbar {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--gitflow-topbar, 48px);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    align-items: center;
    padding: env(safe-area-inset-top, 0px) 12px 0;
    z-index: 100;
    gap: 12px;
}
.hamburger {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    width: 34px; height: 34px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.hamburger:hover { background: var(--surface-3); }
.mobile-topbar .title {
    font-weight: 600;
    font-size: 0.9rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}
.mobile-topbar-spacer {
    width: 10px;
    height: 18px;
    flex: 0 0 10px;
    margin: 0 2px;
    border-left: 1px solid var(--border);
}
.overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(1, 4, 9, 0.7);
    z-index: 90;
}
.overlay.open { display: block; }
.app-shell {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
aside {
    width: 280px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 12px;
    overflow: hidden;
    height: 100%;
    flex-shrink: 0;
}
aside .sidebar-header { flex-shrink: 0; }
#grokBody,
#settingsBody { flex-shrink: 0; }
#workspaceBody:not(.collapsed) {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    gap: 10px;
}
.workspace-filter { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.kind-toggle {
    display: flex;
    align-self: stretch;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
}
.kind-toggle-btn {
    flex: 1;
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.2;
}
.kind-toggle-btn:hover { color: var(--text); }
.kind-toggle-btn[aria-pressed="true"] {
    background: var(--surface-3);
    color: var(--text);
    box-shadow: 0 0 0 1px var(--border);
}
.link-btn {
    align-self: flex-start;
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent-hover);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.link-btn:hover { color: var(--text); }
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    border: 1px solid var(--border-hover);
    border-radius: 4px;
    background: var(--bg);
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
    vertical-align: middle;
}
input[type="checkbox"]::after {
    content: "";
    width: 8px;
    height: 5px;
    border: 2px solid #fff;
    border-top: 0;
    border-right: 0;
    transform: rotate(-46deg) scale(0);
    transform-origin: center;
    margin-top: -1px;
    transition: transform 0.12s;
}
input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
    transform: rotate(-46deg) scale(1);
}
input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.check-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1.35;
}
.check-row input { margin-top: 2px; }
.switch-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    cursor: pointer;
    user-select: none;
}
.switch-row:hover { border-color: var(--border-hover); }
.switch-copy { flex: 1; min-width: 0; }
.switch-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text);
    font-weight: 550;
}
.switch-title .ti { font-size: 15px; color: var(--text-muted); }
.switch-desc {
    display: block;
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-top: 3px;
    line-height: 1.4;
}
.switch-row > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.switch-ui {
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    position: relative;
    flex-shrink: 0;
    margin-top: 1px;
    transition: background 0.15s, border-color 0.15s;
}
.switch-ui::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform 0.15s, background 0.15s;
}
.switch-row > input[type="checkbox"]:checked + .switch-ui {
    background: var(--accent);
    border-color: var(--accent);
}
.switch-row > input[type="checkbox"]:checked + .switch-ui::after {
    transform: translateX(18px);
    background: #fff;
}
.switch-row > input[type="checkbox"]:focus-visible + .switch-ui {
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.switch-row.is-denied { opacity: 0.72; }
.perm-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.perm-status {
    display: block;
    font-size: 0.7rem;
    color: var(--text-dim);
    margin-top: 4px;
}
.perm-status.ok { color: #56d364; }
.perm-status.bad { color: var(--danger-hover); }
.perm-status.warn { color: var(--warning); }
.project-settings-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.modal.modal-permissions {
    max-width: 480px;
    width: 100%;
}
.list-item.ref-item .badge-ref,
.badge.badge-ref {
    color: var(--warning);
    border-color: rgba(210, 153, 34, 0.45);
    background: rgba(210, 153, 34, 0.12);
}
.list-item.ref-item.active .badge-ref {
    color: #fff;
    background: var(--warning);
    border-color: var(--warning);
}
.file-list.ref-pick-list { max-height: 180px; }
.file-row.ref-pick .badge-ref { margin-left: auto; }
.ref-pick-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}
.ref-pick-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}
.ref-pick-wrap .ref-pick-filter { flex-shrink: 0; }
.ref-pick-wrap .ref-pick-none { padding: 12px; }
body.is-reference .page-header h1 .path { color: var(--warning); }
.workspace-filter input[type="search"] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-family: inherit;
    line-height: 1.4;
}
.workspace-filter input[type="search"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.workspace-filter input[type="search"]::-webkit-search-decoration,
.workspace-filter input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
.workspace-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-right: 2px;
}
.workspace-scroll::-webkit-scrollbar { width: 6px; }
.workspace-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
button.sidebar-header {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    color: inherit;
    cursor: pointer;
    text-align: left;
    font: inherit;
    padding: 4px 0 12px;
}
button.sidebar-header .brand { flex: 1; display: flex; align-items: center; gap: 8px; }
button.sidebar-header .chevron, button.sidebar-header .ti-chevron-down,
.sidebar-toggle .chevron, .sidebar-toggle .ti-chevron-down {
    margin-left: auto;
    transition: transform 0.15s;
}
button.sidebar-header[aria-expanded="false"] .chevron,
button.sidebar-header[aria-expanded="false"] .ti-chevron-down,
.sidebar-toggle[aria-expanded="false"] .chevron,
.sidebar-toggle[aria-expanded="false"] .ti-chevron-down { transform: rotate(-90deg); }
.grok-section-head {
    display: flex;
    align-items: center;
    gap: 8px 10px;
}
.grok-section-head .brand { flex: 0 0 auto; }
.grok-flow-brand {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.grok-flow-link {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: var(--accent-hover);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    text-decoration: none;
}
.grok-flow-link:hover { color: var(--accent); }
.grok-head-chevron {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}
.grok-head-chevron:hover { color: var(--text); }
.grok-head-chevron .ti { margin-left: 0; }
.sidebar-body { display: flex; flex-direction: column; gap: 16px; }
.sidebar-body.collapsed { display: none; }
.grok-usage { display: flex; flex-direction: column; gap: 6px; }
.usage-bar {
    height: 8px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 99px;
    overflow: hidden;
}
.usage-bar-fill {
    height: 100%;
    width: 0;
    background: var(--accent);
    border-radius: 99px;
    transition: width 0.3s ease, background 0.3s ease;
}
.usage-bar-fill.high { background: var(--warning); }
.usage-bar-fill.full { background: var(--danger); }
.grok-usage-badges {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.usage-meta { font-size: 0.7rem; color: var(--text-dim); line-height: 1.3; }
#grokResetCountdown { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.settings-link {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.settings-logout {
    background: none;
    border: 0;
    color: var(--text-muted);
    font: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    width: 100%;
    text-align: left;
}
.settings-logout:hover { color: var(--danger-hover); }
.mail-count {
    font-size: 0.65rem;
    font-weight: 700;
    font-family: var(--font-mono);
    min-width: 16px;
    padding: 1px 5px;
    border-radius: 10px;
    background: var(--surface-3);
    color: var(--text-muted);
    border: 1px solid var(--border);
    text-align: center;
}
.strip-btn { position: relative; }
.strip-mail-count {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.6rem;
    font-weight: 700;
    font-family: var(--font-mono);
    background: var(--accent);
    color: #fff;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: auto;
    position: relative;
    padding: 48px 20px 132px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(30, 64, 175, 0.18), transparent 46%),
        linear-gradient(180deg, #070b14 0%, #0a1220 52%, #070b14 100%);
}
body.login-page::before {
    content: "";
    position: fixed;
    inset: -18%;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    background-image:
        radial-gradient(circle, rgba(148, 163, 184, 0.14) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(37, 99, 235, 0.1) 0 1px, transparent 1.6px);
    background-size: 92px 92px, 148px 148px;
    background-position: 0 0, 46px 36px;
    animation: login-mesh-drift 80s linear infinite;
}
@keyframes login-mesh-drift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-92px, -74px, 0); }
}
@media (prefers-reduced-motion: reduce) {
    body.login-page::before { animation: none; }
}
.login-mesh {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none !important;
    user-select: none !important;
    touch-action: none;
}
.login-card {
    width: 400px;
    max-width: 92vw;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 36px 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 1;
    box-shadow: none;
}
.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 8px;
}
.login-logo {
    width: 160px;
    height: 160px;
    border: 0;
    border-radius: 0;
    background: transparent;
    display: block;
    object-fit: contain;
}
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-page .field-label {
    margin-bottom: 0;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(203, 213, 225, 0.62);
}
.login-page input[type="text"],
.login-page input[type="password"] {
    background: rgba(7, 11, 20, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 2px;
    height: 42px;
    padding: 8px 12px;
    color: var(--text);
}
.login-page input[type="text"]:focus,
.login-page input[type="password"]:focus {
    border-color: rgba(96, 165, 250, 0.7);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.login-password-wrap {
    position: relative;
    display: block;
    width: 100%;
}
.login-password-wrap input { padding-right: 42px; }
.login-toggle-pass {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    padding: 0;
}
.login-toggle-pass:hover,
.login-toggle-pass[aria-pressed="true"] {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
}
.login-toggle-pass .ti { font-size: 16px; }
.login-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
}
.login-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: rgba(203, 213, 225, 0.78);
    cursor: pointer;
    user-select: none;
    flex: 1;
    min-width: 0;
}
.login-remember input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid rgba(148, 163, 184, 0.42);
    background: rgba(7, 11, 20, 0.45);
    border-radius: 2px;
    display: grid;
    place-content: center;
    transition: background 0.15s, border-color 0.15s;
}
.login-remember input[type="checkbox"]::after {
    content: "";
    width: 9px;
    height: 5px;
    border: solid #fff;
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg) scale(0);
    margin-top: -2px;
    transition: transform 0.12s ease;
}
.login-remember input[type="checkbox"]:checked {
    background: #1d4ed8;
    border-color: #60a5fa;
}
.login-remember input[type="checkbox"]:checked::after {
    transform: rotate(-45deg) scale(1);
}
.login-remember input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.28);
}
.login-remember:hover { color: #fff; }
.login-page button.btn.primary.login-submit {
    width: auto;
    min-width: 128px;
    flex: 0 0 auto;
    justify-content: center;
    margin-top: 0;
    height: 42px;
    border-radius: 2px;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}
.login-page button.btn.primary.login-submit:hover {
    background: #2563eb;
    border-color: #2563eb;
}
.login-foot {
    position: fixed;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(400px, 92vw);
    pointer-events: none;
}
.login-copy {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: rgba(203, 213, 225, 0.52);
    text-align: center;
    line-height: 1.4;
}
.login-install {
    pointer-events: auto;
    width: auto;
    min-width: 0;
    height: auto;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: rgba(203, 213, 225, 0.52);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    text-decoration: none;
    display: inline;
    cursor: pointer;
    box-shadow: none;
}
.login-install:hover {
    background: none;
    border: 0;
    color: rgba(203, 213, 225, 0.82);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.login-install-hint {
    pointer-events: auto;
    font-size: 0.72rem;
    color: var(--text-dim);
    line-height: 1.35;
    margin: 0;
    text-align: center;
}
@media (display-mode: standalone) {
    #pwaInstall, .login-install-hint { display: none !important; }
}
.distribute-log-wrap {
    margin-top: 10px;
    flex: 1 1 0;
    min-height: 120px;
    display: flex;
    flex-direction: column;
}
.distribute-log {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-muted);
}
.mail-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; min-height: 0; }
.mail-modal {
    min-height: min(50vh, calc(100dvh - 24px));
}
.mail-modal > .modal-head,
.mail-modal > .description-text,
.mail-modal > .mail-modal-tabs { flex-shrink: 0; }
.mail-modal .mail-list { flex: 1; max-height: none; }
.mail-modal-head { position: relative; }
.mail-modal-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 0 4px;
}
.mail-row.is-received { border-left: 3px solid #58a6ff; }
.mail-row.is-sent { border-left: 3px solid #3fb950; }
.mail-row.is-scheduled { border-left: 3px solid #d29922; }
.mail-row.is-trash { border-left: 3px solid var(--text-dim); }
.mail-sync-strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    overflow: hidden;
    background: transparent;
    pointer-events: none;
}
.mail-sync-strip.active,
.mail-sync-strip:not([hidden]) { display: block; }
.mail-sync-strip span {
    display: block;
    height: 100%;
    width: 32%;
    background: var(--accent);
    border-radius: 2px;
    animation: mail-sync-slide 1.15s ease-in-out infinite;
}
@keyframes mail-sync-slide {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(380%); }
}
.mail-row {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.mail-row.unseen { border-color: var(--accent); }
.mail-row.open {
    flex: 1;
    min-height: 0;
}
.mail-row-top {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-shrink: 0;
}
.mail-row-head {
    width: auto;
    background: var(--surface-2);
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    z-index: 2;
}
.mail-claim-btn,
.mail-row-top .mail-folder-act {
    flex-shrink: 0;
    align-self: center;
    margin: 8px 10px 8px 0;
}
.mail-row-top .mail-folder-act {
    margin-left: 0;
}
.mail-claimed-tag {
    color: var(--accent-hover);
    font-weight: 600;
}
.mail-row.claimed {
    border-color: var(--accent);
}
.mail-row.open .mail-row-top {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.mail-row.open .mail-row-head {
    border-bottom: 0;
}
.mail-row-head .mail-subject { font-weight: 600; }
.mail-folder-prefix {
    color: var(--text-dim);
    font-weight: 500;
}
.mail-row-head .mail-meta { font-size: 0.7rem; color: var(--text-dim); font-family: var(--font-mono); }
.mail-row-body { display: none; flex-direction: column; min-height: 0; flex: 1; padding: 0; }
.mail-row.open .mail-row-body { display: flex; }
.mail-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
}
.mail-row-footer {
    flex-shrink: 0;
    padding: 8px 12px 10px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    z-index: 2;
}
.mail-row.open .mail-row-footer {
    position: sticky;
    bottom: 0;
}
.mail-row-body textarea {
    width: 100%;
    min-height: 140px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
}
.mail-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mail-row-actions .icon-btn {
    width: 34px;
    height: 34px;
}
.mail-row-actions .icon-btn .ti { font-size: 18px; }
.inv-form .mail-row-actions .btn.danger {
    margin-right: auto;
}
.mail-row-head .mail-badges,
.mail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 6px;
}
.mail-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 3px 10px;
    margin: 0;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: var(--surface-3);
}
.mail-badge-inv { color: var(--accent-hover); border-color: rgba(59, 130, 246, 0.4); background: var(--accent-soft); }
.mail-badge-sent, .mail-badge-paid { color: #56d364; border-color: rgba(35, 134, 54, 0.45); background: rgba(35, 134, 54, 0.12); }
.mail-badge-unsent, .mail-badge-unpaid { color: var(--warning); border-color: rgba(210, 153, 34, 0.4); background: rgba(210, 153, 34, 0.1); }
.mail-badge-overdue { color: var(--danger-hover); border-color: rgba(218, 54, 51, 0.45); background: rgba(218, 54, 51, 0.12); }
.mail-ticket { color: var(--accent-hover); font-weight: 600; }
.mail-follows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mail-follow {
    margin-left: 16px;
    padding: 10px 12px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    background: var(--bg);
    border-radius: var(--radius);
}
.mail-follow.out {
    border-left-color: var(--success);
    background: var(--surface-2);
}
.mail-follow-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.mail-follow-meta {
    font-size: 0.7rem;
    color: var(--text-dim);
    font-family: var(--font-mono);
    min-width: 0;
}
.mail-follow-top .btn {
    flex-shrink: 0;
    font-size: 0.72rem;
    padding: 4px 8px;
}
.mail-follow-acts {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.mail-follow-acts .icon-btn {
    width: 28px;
    height: 28px;
    color: var(--text-muted);
}
.mail-follow-acts .icon-btn:hover {
    color: var(--danger-hover);
    border-color: var(--danger);
}
.mail-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--text-dim);
}
.mail-price-row input {
    width: 110px;
    max-width: 140px;
    padding: 4px 8px;
}
.mail-reply-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.mail-follow-body {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--font-sans);
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text);
}
.mail-reply-composer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
}
.mail-reply-composer.open { grid-template-rows: 1fr; }
.mail-reply-composer-inner {
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mail-reply-text {
    min-height: 110px;
    margin-top: 4px;
}
.mail-reply-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.mail-reply-subject {
    font-size: 0.72rem;
    color: var(--text-dim);
    font-family: var(--font-mono);
}
.mail-atts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mail-att {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    color: var(--text);
    font-size: 0.8rem;
}
.mail-att-menu {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}
.mail-att-menu .ti { font-size: 16px; }
.mail-att-link {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    padding: 3px 0;
}
.mail-att:hover,
.mail-att:hover .mail-att-link {
    border-color: var(--accent);
    color: var(--accent-hover);
}
.mail-att-save {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}
.mail-att-save svg {
    width: 15px;
    height: 15px;
}
.mail-att-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 0.75rem;
}
.mail-att-act {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.mail-att:hover .mail-att-act { color: var(--accent-hover); }
.mail-follow .mail-atts { margin-top: 8px; }
.modal.modal-invoice {
    max-width: 640px;
    width: 100%;
    max-height: min(90vh, calc(100dvh - 24px));
    overflow: auto;
}
.inv-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
#invoiceForm[hidden],
#invoiceStatus[hidden],
#invoiceModalHint[hidden],
#invScheduleSection[hidden],
.inv-form[hidden] {
    display: none !important;
}
.inv-section { display: flex; flex-direction: column; gap: 8px; }
.inv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: end;
}
.inv-total-box {
    text-align: right;
}
.inv-total {
    font-size: 1.15rem;
    font-weight: 650;
    color: var(--text);
    font-family: var(--font-mono);
}
.inv-items-head, .inv-item {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) 72px 90px 70px 32px;
    gap: 8px;
    align-items: center;
}
.inv-items-head {
    font-size: 0.68rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 2px;
}
.inv-items { display: flex; flex-direction: column; gap: 8px; }
.inv-item {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px;
}
.inv-item input[type="text"],
.inv-item input[type="number"] {
    width: 100%;
    min-width: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: inherit;
}
.inv-item input.inv-name { font-weight: 550; }
.inv-item .inv-remove {
    width: 28px;
    height: 28px;
    color: var(--text-muted);
}
.inv-empty {
    font-size: 0.8rem;
    color: var(--text-dim);
    padding: 10px 8px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    text-align: center;
}
.inv-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.inv-add-row select {
    flex: 1;
    min-width: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}
.inv-schedule-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
}
.inv-schedule-row > * {
    flex: 1;
    min-width: 0;
}
.inv-schedule-row input[type="datetime-local"] {
    width: 100%;
    max-width: 100%;
}
.inv-send-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    font-size: 0.85rem;
    color: var(--text);
    cursor: pointer;
    min-height: 38px;
    box-sizing: border-box;
}
.inv-send-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0 2px 0 0;
    flex-shrink: 0;
}
.inv-status-card {
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.inv-preview {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.inv-preview-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.inv-preview-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    margin: 0;
}
.inv-preview-meta div {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
}
.inv-preview-meta dt {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    margin-bottom: 3px;
}
.inv-preview-meta dd {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 550;
}
.inv-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.inv-preview-table th,
.inv-preview-table td {
    text-align: left;
    padding: 8px 6px;
    border-bottom: 1px solid var(--border);
}
.inv-preview-table th {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    font-weight: 650;
}
.inv-preview-table td:nth-child(2),
.inv-preview-table td:nth-child(3),
.inv-preview-table td:nth-child(4),
.inv-preview-table th:nth-child(2),
.inv-preview-table th:nth-child(3),
.inv-preview-table th:nth-child(4) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
    font-size: 0.78rem;
}
.inv-preview-notes {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    white-space: pre-wrap;
}
.inv-log .field-label { margin-bottom: 6px; }
.inv-send-log {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}
.inv-send-log li {
    padding: 6px 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.inv-send-empty {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-dim);
}
.inv-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
@media (max-width: 640px) {
    .inv-grid { grid-template-columns: 1fr; }
    .inv-schedule-row { flex-direction: column; }
    .inv-items-head { display: none; }
    .inv-item { grid-template-columns: 1fr 1fr; }
    .inv-item .inv-name { grid-column: 1 / -1; }
    .inv-preview-meta { grid-template-columns: 1fr; }
    .sced-day-meta {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 56px;
    }
    .mail-preset-select { max-width: 100%; }
}
.logo {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text);
}
.sidebar-header .brand { font-weight: 600; font-size: 0.9rem; letter-spacing: -0.01em; }
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.section-title {
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.icon-btn {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 22px; height: 22px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    transition: all 0.15s;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-hover); }
.list { display: flex; flex-direction: column; gap: 4px; }
.list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    transition: all 0.15s;
}
.list-item:hover { background: var(--surface-2); }
.list-item.active { background: var(--accent-soft); border-color: rgba(59, 130, 246, 0.3); }
.list-item .name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
    font-family: var(--font-mono); font-size: 0.8rem;
    color: var(--text);
}
.list-item.active .name { color: var(--accent-hover); }
.list-item .name.no-preview,
.list-item.active .name.no-preview { color: var(--text-muted); }
.list-item .badge {
    font-size: 0.7rem; padding: 2px 8px; border-radius: var(--radius-sm);
    background: var(--surface-3); color: var(--text-muted);
    font-weight: 400; text-transform: none; letter-spacing: 0;
    border: 1px solid var(--border);
}
.list-item.active .badge { background: var(--surface-3); color: var(--text-muted); border-color: var(--border); }
.btn-tiny {
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
}
.btn-tiny:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-tiny.danger:hover { background: var(--danger); border-color: var(--danger); }
.btn-tiny.is-static {
    cursor: default;
    pointer-events: none;
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.btn-tiny.is-static:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
body.view-dashboard .btn-tiny.is-static[data-leave-dashboard] {
    pointer-events: auto;
    cursor: pointer;
}
.settings-pair {
    display: flex;
    gap: 4px;
}
.settings-pair .settings-link {
    flex: 1;
    min-width: 0;
}
.sidebar-dashboard {
    flex-shrink: 0;
    width: 100%;
    cursor: pointer;
    font: inherit;
    text-align: left;
    appearance: none;
}
.sidebar-dashboard .name {
    font-family: inherit;
    font-size: 0.85rem;
}
.dash-projects {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.dash-projects h3,
.dash-cron h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 2px;
    flex-shrink: 0;
}
.dash-cron {
    background: transparent;
    border: 0;
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.dash-cron-log {
    margin: 0;
    padding: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--text);
    white-space: pre-wrap;
    overflow: auto;
    max-height: 280px;
}
.dash-cron-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.dash-thoughts {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: none;
    min-width: 0;
    align-self: stretch;
}
.dash-thoughts-bar,
.dash-thoughts-filters,
.dash-thoughts-tags {
    width: 100%;
}
.dash-thoughts-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.dash-thoughts-search {
    position: relative;
    flex: 1 1 180px;
    min-width: 0;
}
.dash-thoughts-search .ti {
    position: absolute;
    left: 12px;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    color: var(--text-dim);
    font-size: 15px;
    line-height: 1;
    pointer-events: none;
}
.dash-thoughts-search input[type="search"] {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius);
    padding: 8px 12px 8px 36px;
    font: inherit;
    font-size: 0.85rem;
}
.dash-thoughts-tools {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.dash-thoughts-tool {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
}
.dash-thoughts-tool:hover,
.dash-thoughts-tool.is-on {
    border-color: var(--accent);
    color: var(--accent-hover);
}
.dash-thoughts-tool.is-plus {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}
.dash-thoughts-tool.is-plus:hover { background: var(--success-hover); color: #fff; }
.dash-thoughts-filters,
.dash-thoughts-tags {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.dash-thoughts-filters::-webkit-scrollbar,
.dash-thoughts-tags::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}
.dash-thoughts-filters .dash-thoughts-chip,
.dash-thoughts-tags .dash-thoughts-chip {
    flex: 0 0 auto;
    white-space: nowrap;
}
.dash-thoughts-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    border-radius: var(--radius);
    padding: 6px 10px;
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}
.dash-thoughts-chip .count { opacity: 0.65; }
.dash-thoughts-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.dash-thoughts-chip.is-on .count { opacity: 0.75; }
.dash-thoughts-chip.is-events.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.dash-thoughts-chip.is-done.is-on { background: var(--success); border-color: var(--success); color: #fff; }
.dash-thoughts-chip.is-tags.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.dash-thoughts-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.dash-thought-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(100%, 28rem);
    max-width: 28rem;
    min-width: 0;
    box-sizing: border-box;
}
.dash-thought-card.is-playing { border-color: var(--accent); }
.dash-thought-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-thought-mini {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: 0.68rem;
    padding: 2px 8px;
}
.dash-thought-mini.is-event { color: #93c5fd; border-color: #1d4ed8; }
.dash-thought-mini.is-late { color: #fca5a5; border-color: var(--danger); }
.dash-thought-mini.is-done { color: #86efac; border-color: var(--success); }
.dash-thought-body {
    display: flex;
    gap: 10px;
    min-width: 0;
    cursor: pointer;
}
.dash-thought-cover {
    width: 84px;
    min-height: 5.5rem;
    height: auto;
    align-self: stretch;
    object-fit: cover;
    border-radius: 12px;
    background: var(--surface-3);
    flex-shrink: 0;
}
.dash-thought-thumbs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    margin-bottom: 6px;
}
.dash-thought-thumbs img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}
.dash-thought-deps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    color: var(--text-dim);
    font-size: 0.72rem;
}
.dash-thought-file {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-decoration: none;
}
.dash-thought-lang {
    letter-spacing: 0.06em;
    font-size: 0.65rem;
    text-transform: uppercase;
}
.dash-thought-copy { min-width: 0; flex: 1; }
.dash-thought-copy .thought-md {
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}
.dash-thought-copy .thought-md p { margin: 0 0 6px; }
.dash-thought-copy .thought-md p:last-child { margin-bottom: 0; }
.dash-thought-copy .thought-md pre {
    margin: 0.4em 0;
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    max-width: 100%;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.45;
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
    color: var(--text);
}
.dash-thought-copy .thought-md pre code,
.dash-thought-copy .thought-md pre code.hljs {
    display: block;
    background: transparent;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    white-space: inherit;
    overflow-wrap: inherit;
    word-break: inherit;
}
.dash-thought-copy .thought-md .thought-code {
    margin: 0.4em 0;
    max-width: 100%;
    min-width: 0;
}
.dash-thought-copy .thought-md .thought-code pre { margin: 0; }
.thought-code-reveal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--accent-hover);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 0.75rem;
    padding: 6px 10px;
    cursor: pointer;
}
.thought-code-reveal:hover { border-color: var(--accent); }
.dash-thought-code-modal {
    width: min(100%, 40rem);
    max-height: calc(100% - 24px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.dash-thought-code-view {
    margin: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 12px 14px;
    background: var(--bg);
    border: 0;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.45;
    white-space: pre;
    color: var(--text);
}
.dash-thought-code-view code,
.dash-thought-code-view code.hljs {
    display: block;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
    white-space: inherit;
}
.dash-thought-code-foot {
    padding: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}
.dash-thought-meta {
    margin-top: 6px;
    color: var(--text-dim);
    font-size: 0.72rem;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.dash-thought-progress {
    margin-top: 8px;
    height: 4px;
    background: var(--surface-3);
    border-radius: 99px;
    overflow: hidden;
}
.dash-thought-progress > span {
    display: block;
    height: 100%;
    background: var(--accent);
    width: 0;
}
.dash-thought-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.dash-thought-tag {
    font-size: 0.68rem;
    background: var(--surface-3);
    color: var(--text-muted);
    border-radius: 99px;
    padding: 2px 7px;
}
.dash-thought-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.dash-thought-side {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.72rem;
    padding: 6px 4px;
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.dash-thought-side:hover { background: var(--surface-3); color: var(--text); }
.dash-thought-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
}
.dash-thought-center .icon-btn { width: 32px; height: 32px; }
.dash-thought-playcount {
    font-size: 0.65rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
    margin-left: 2px;
}
.dash-thought-mini.is-from { color: #c084fc; border-color: rgba(168, 85, 247, 0.45); cursor: pointer; }
.dash-thought-mini.is-from.is-unknown { color: #fdba74; border-color: rgba(251, 146, 60, 0.45); }
.dash-thought-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: max-content;
    max-width: 100%;
    min-width: 0;
}
.dash-thought-group-head {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    width: 100%;
    max-width: none;
    margin: 0 0 4px;
}
.dash-thought-group-head button {
    border: 0;
    background: transparent;
    color: var(--text-dim);
    font: inherit;
    font-size: 0.72rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.dash-thought-group-scroll {
    display: flex;
    justify-content: safe center;
    align-items: flex-start;
    gap: 10px;
    overflow-x: auto;
    width: max-content;
    max-width: 100%;
    padding: 0 0 4px;
    box-sizing: border-box;
}
.dash-thought-group-scroll .dash-thought-card {
    flex: 0 0 28rem;
    width: 28rem;
    max-width: 28rem;
}
.dash-thought-map {
    flex: 0 0 38%;
    min-height: 140px;
    border-bottom: 1px solid var(--border);
    background: #111;
}
.dash-thought-map iframe { width: 100%; height: 100%; border: 0; }
.dash-thought-info {
    flex: 1;
    overflow: auto;
    padding: 12px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dash-thought-info details {
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}
.dash-thought-info summary {
    cursor: pointer;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 6px 0;
}
.dash-thought-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.dash-thought-stat { min-width: 0; }
.dash-thought-stat.span-2 { grid-column: 1 / -1; }
.dash-thought-stat b {
    display: block;
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-dim);
    margin-bottom: 2px;
}
.dash-thought-stat span {
    display: block;
    font-size: 0.82rem;
    word-break: break-word;
}
.dash-thoughts-dialog {
    position: absolute;
    inset: 0;
    z-index: 36;
    background: rgba(1, 4, 9, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.dash-thoughts-dialog[hidden] { display: none !important; }
.dash-thought-share {
    width: min(100%, 24rem);
    max-height: calc(100% - 24px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.dash-thought-share-search {
    position: relative;
    padding: 0 12px;
}
.dash-thought-share-search .ti {
    position: absolute;
    left: 22px;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    color: var(--text-dim);
    line-height: 1;
    pointer-events: none;
}
.dash-thought-share-search input[type="search"] {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius);
    padding: 8px 12px 8px 36px;
    font: inherit;
}
.dash-thought-share-tools { display: flex; justify-content: flex-end; padding: 6px 12px 0; }
.dash-thought-share-list { flex: 1; overflow: auto; padding: 8px; min-height: 120px; }
.dash-thought-friend {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    padding: 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.dash-thought-friend:hover { background: var(--surface-2); }
.dash-thought-friend strong { display: block; font-size: 0.85rem; }
.dash-thought-friend em { display: block; font-style: normal; font-size: 0.68rem; color: var(--text-dim); font-family: var(--font-mono); }
.dash-thought-share-foot { padding: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.dash-thought-share-row { display: flex; gap: 8px; }
.dash-thought-share-row .btn { flex: 1; justify-content: center; }
.dash-thought-share-foot .btn.primary { background: var(--success); border-color: var(--success); color: #fff; }
.dash-thoughts-pane {
    position: absolute;
    inset: 0;
    z-index: 30;
    background: #0d1117;
    color: var(--text);
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: 100%;
}
.dash-thoughts-pane[hidden] { display: none !important; }
.dash-thoughts-pane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.dash-thoughts-pane-head h2 { font-size: 1rem; font-weight: 600; }
.dash-thoughts-pane-head p { color: var(--text-dim); font-size: 0.75rem; }
.dash-thoughts-playlist { flex: 1; overflow: auto; min-height: 0; }
.dash-thoughts-track {
    width: 100%;
    text-align: left;
    background: transparent;
    color: inherit;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
    padding: 12px 16px;
    cursor: pointer;
    font: inherit;
}
.dash-thoughts-track.is-current {
    background: var(--accent-soft);
    border-left-color: var(--accent);
}
.dash-thoughts-track strong { display: block; font-weight: 500; font-size: 0.88rem; }
.dash-thoughts-track span { color: var(--text-dim); font-size: 0.72rem; }
.dash-thoughts-player {
    border-top: 1px solid var(--border);
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
}
.dash-thoughts-player-title {
    text-align: center;
    font-size: 0.85rem;
    margin-bottom: 8px;
    max-height: 2.7em;
    overflow: hidden;
}
.dash-thoughts-player-bar {
    height: 4px;
    background: var(--surface-3);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 12px;
}
.dash-thoughts-player-bar > div { height: 100%; width: 0; background: var(--accent); }
.dash-thoughts-player-controls { display: flex; justify-content: center; align-items: center; gap: 18px; }
.dash-thoughts-playmain {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 0;
    background: var(--success);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
}
.dash-thoughts-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dash-thoughts-stage[hidden] { display: none !important; }
#dashThoughtsRecord {
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 24px 20px 32px;
    gap: 16px;
    background:
        radial-gradient(ellipse at center, var(--accent-soft), transparent 55%),
        var(--bg);
}
.dash-thoughts-stage-close { position: absolute; top: 12px; right: 12px; }
.dash-thoughts-bubble {
    width: 148px;
    height: 148px;
    border-radius: 50%;
    border: 0;
    background: var(--success);
    color: #fff;
    font-size: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}
.dash-thoughts-bubble.is-live { box-shadow: 0 0 0 12px var(--accent-soft); }
.dash-thoughts-waves { display: flex; align-items: center; gap: 4px; height: 36px; }
.dash-thoughts-waves span {
    width: 4px;
    height: 10px;
    background: var(--accent);
    border-radius: 99px;
    animation: dash-thought-wave 0.9s ease-in-out infinite;
}
.dash-thoughts-waves span:nth-child(2) { animation-delay: 0.1s; }
.dash-thoughts-waves span:nth-child(3) { animation-delay: 0.2s; }
.dash-thoughts-waves span:nth-child(4) { animation-delay: 0.3s; }
.dash-thoughts-waves span:nth-child(5) { animation-delay: 0.15s; }
.dash-thoughts-waves span:nth-child(6) { animation-delay: 0.25s; }
.dash-thoughts-waves span:nth-child(7) { animation-delay: 0.05s; }
.dash-thoughts-waves span:nth-child(8) { animation-delay: 0.35s; }
@keyframes dash-thought-wave {
    0%, 100% { height: 8px; }
    50% { height: 28px; }
}
.dash-thoughts-record-status { color: var(--text-muted); font-size: 0.9rem; }
.dash-thoughts-live {
    width: min(520px, 100%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    min-height: 72px;
}
.dash-thoughts-record-actions { display: flex; gap: 16px; }
.dash-thoughts-round {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    font-size: 1.2rem;
}
.dash-thoughts-round.is-stop { background: var(--danger); border-color: var(--danger); color: #fff; }
.dash-thoughts-round.is-go { background: var(--success); border-color: var(--success); color: #fff; }
.dash-thoughts-duration { font-family: var(--font-mono); color: var(--text-dim); }
.dash-thoughts-review-body {
    flex: 1;
    overflow: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dash-thoughts-review-body textarea,
.dash-thoughts-review-body input[type="number"],
.dash-thoughts-review-body input[type="text"],
.dash-thoughts-review-body input[type="datetime-local"],
.dash-thoughts-review-body select {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font: inherit;
}
.dash-thoughts-review-body textarea { min-height: 120px; resize: vertical; }
.dash-thoughts-type { display: flex; gap: 8px; }
.dash-thoughts-type .dash-thoughts-chip { flex: 1; }
.dash-thoughts-intervals .dash-thoughts-chip { font-size: 0.7rem; padding: 8px 4px; }
.dash-thoughts-audio,
.dash-thoughts-location {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px;
}
.dash-thoughts-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-thoughts-photos img,
.dash-thoughts-photos .file-pill {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
}
.dash-thoughts-tag-row { display: flex; gap: 8px; }
.dash-thoughts-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-thoughts-tag-list button {
    border: 0;
    background: var(--surface-3);
    color: var(--text);
    border-radius: 99px;
    padding: 4px 8px;
    cursor: pointer;
    font: inherit;
    font-size: 0.75rem;
}
.dash-thoughts-review-foot {
    display: flex;
    gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
}
.dash-thoughts-review-foot .btn { flex: 1; justify-content: center; }
.dash-thoughts-review-foot .btn.primary { flex: 2; background: var(--success); border-color: var(--success); color: #fff; }
.dash-thoughts-camera-stage { flex: 1; min-height: 0; background: #000; position: relative; }
.dash-thoughts-camera-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.dash-thoughts-camera-shot {
    display: flex;
    justify-content: center;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
#dashThoughtsShutter {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 4px solid #d1d5db;
    background: #fff;
    cursor: pointer;
}
.thought-link {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    max-width: 100%;
    height: 1.15em;
    vertical-align: -0.12em;
    margin: 0 0.12em;
    padding: 0 0.28em 0 0.12em;
    border-radius: 0.25rem;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--accent-hover) !important;
    text-decoration: none !important;
    font-size: 0.9em;
    line-height: 1;
    cursor: pointer;
}
.thought-link-icon {
    width: 0.85em;
    height: 0.85em;
    border-radius: 2px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--surface-3);
}
.thought-link-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 16rem;
}
.dash-link-preview {
    position: absolute;
    z-index: 40;
    width: min(22rem, calc(100% - 1rem));
    max-width: 22rem;
    background: #0a0a0a;
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: min(28rem, calc(100% - 1rem));
}
.dash-link-preview[hidden] { display: none !important; }
.dash-link-preview.is-zen {
    inset: 0.5rem;
    width: auto;
    max-width: none;
    max-height: none;
    height: auto;
}
.dash-link-preview-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    cursor: grab;
    touch-action: none;
    flex-shrink: 0;
}
.dash-link-preview-bar img {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    object-fit: cover;
    flex-shrink: 0;
}
.dash-link-preview-bar p {
    min-width: 0;
    flex: 1;
    margin: 0;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-link-preview-frame {
    width: 100%;
    flex: 1;
    min-height: 12rem;
    border: 0;
    background: #000;
}
.dash-link-preview.is-zen .dash-link-preview-frame { min-height: 0; }
@media (max-width: 720px) {
    .dash-thoughts-bar { align-items: stretch; }
    .dash-thoughts-tools { width: 100%; justify-content: space-between; }
    .dash-thoughts-tool { flex: 1; }
}
.dash-projects-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    max-width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    padding: 2px 2px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
}
.dash-project-section {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
}
.dash-project-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
    padding: 0 2px 8px;
    white-space: nowrap;
}
.dash-branch-strip {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    padding: 0 0 6px;
    -webkit-overflow-scrolling: touch;
}
.dash-branch-card {
    flex: 0 0 auto;
    width: 320px;
    max-width: 100%;
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: var(--radius);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    box-sizing: border-box;
}
.dash-branch-card.is-gitflow {
    background: #182433;
    border-color: #3d5a80;
}
.dash-branch-card.is-collapsed {
    width: auto;
    max-width: 100%;
    padding: 2px;
    gap: 0;
    background: transparent;
    border-color: transparent;
}
.dash-branch-card.is-collapsed.is-gitflow {
    background: transparent;
    border-color: transparent;
}
.dash-branch-card.is-collapsed .dash-queue,
.dash-branch-card.is-collapsed .dash-card-actions,
.dash-branch-card.is-collapsed .dash-mail-btn,
.dash-branch-card.is-collapsed .dash-head-btn,
.dash-branch-card.is-collapsed .btn-tiny.is-static {
    display: none;
}
.dash-branch-card.is-collapsed .dash-branch-head {
    gap: 0;
}
.dash-branch-card.is-collapsed .dash-branch-head .name {
    flex: 0 1 auto;
}
button.branch-chip {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    cursor: pointer;
    text-align: left;
    color: inherit;
}
.dash-branch-head .branch-chip[data-dash-chip] {
    cursor: pointer;
}
@media (max-width: 1024px) {
    .dash-projects-row {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: visible;
        gap: 12px;
    }
    .dash-projects-row::-webkit-scrollbar,
    .dash-projects-chip-row::-webkit-scrollbar,
    .dash-projects-row .dash-branch-strip::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        background: transparent;
    }
    .dash-project-section {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        min-width: 0;
    }
    .dash-branch-card.is-solo {
        flex: 0 0 auto;
        align-self: stretch;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        contain: inline-size;
    }
    .dash-branch-card.is-solo::before {
        content: attr(data-dash-project);
        display: block;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text);
        line-height: 1.2;
    }
    .dash-branch-card.is-solo .dash-branch-head,
    .dash-branch-card.is-solo .dash-branch-head .name,
    .dash-branch-card.is-solo .dash-card-actions,
    .dash-branch-card.is-solo .dash-stream-preview,
    .dash-branch-card.is-solo .dash-stream-preview-body,
    .dash-branch-card.is-solo .dash-stream-preview-body > span,
    .dash-branch-card.is-solo .dash-queue,
    .dash-branch-card.is-solo .dash-queue-main,
    .dash-branch-card.is-solo .dash-queue-meta,
    .dash-branch-card.is-solo .dash-queue-who,
    .dash-branch-card.is-solo .dash-queue-text {
        min-width: 0;
        max-width: 100%;
    }
    .dash-branch-card.is-solo .dash-stream-preview,
    .dash-branch-card.is-solo .dash-stream-preview-body,
    .dash-branch-card.is-solo .dash-stream-preview-body > span,
    .dash-branch-card.is-solo .dash-queue-who,
    .dash-branch-card.is-solo .dash-queue-text {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .dash-branch-card.is-solo .dash-stream-preview-body > span {
        display: block;
        width: 100%;
    }
    .dash-branch-card {
        width: auto;
        max-width: 100%;
    }
    .dash-branch-card.is-collapsed {
        width: auto;
        max-width: none;
    }
    .dash-projects-row .dash-branch-strip {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .dash-projects-chip-row {
        display: flex;
        flex: 0 0 auto;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 16px;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    .dash-projects-chip-row .dash-project-section {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        min-width: min-content;
    }
    .dash-projects-chip-row .dash-branch-strip {
        flex-wrap: nowrap;
        max-width: none;
        overflow: visible;
    }
    .dash-projects-chip-row .dash-branch-card:not(.is-collapsed) {
        flex: 0 0 auto;
        width: calc(100vw - 48px);
        max-width: calc(100vw - 48px);
        min-width: 0;
    }
}
.dash-branch-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: visible;
}
.dash-branch-head .name {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-head-btn,
.dash-mail-btn {
    position: relative;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    cursor: pointer;
    line-height: 1;
    appearance: none;
    -webkit-appearance: none;
    text-decoration: none;
}
.dash-head-btn .ti,
.dash-mail-btn .ti {
    font-size: 13px;
}
.dash-head-btn:hover,
.dash-mail-btn:hover { border-color: var(--accent); color: var(--accent-hover); }
.dash-head-btn.is-primary {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}
.dash-head-btn.is-primary:hover {
    background: var(--success-hover);
    border-color: var(--success-hover);
    color: #fff;
}
.dash-branch-head .btn-tiny.is-static {
    height: 22px;
    min-height: 22px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    box-sizing: border-box;
}
.dash-mail-btn .mail-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dash-mail-btn .mail-count.is-zero { display: none; }
.dash-branch-card .dash-queue {
    flex: 0 0 auto;
    min-height: 42px;
    max-height: none;
    overflow: visible;
}
.dash-branch-card .dash-card-actions {
    margin-top: auto;
}
.dash-queue {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dash-queue-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
}
.dash-queue-main {
    flex: 1 1 auto;
    min-width: 0;
}
.dash-queue-check {
    flex: 0 0 auto;
    display: flex;
    margin-top: 1px;
}
.dash-queue-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}
.dash-queue-item.is-off {
    background: var(--surface-3);
    border-color: var(--border);
    color: var(--text-dim);
}
.dash-queue-item.is-off .dash-queue-text,
.dash-queue-item.is-off .dash-queue-who,
.dash-queue-item.is-off .dash-queue-qedits {
    color: var(--text-dim);
}
.dash-queue-item.is-off .dash-queue-text {
    opacity: 0.72;
}
.dash-queue-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.dash-queue-meta {
    font-size: 0.72rem;
    color: var(--text-dim);
    min-width: 0;
}
.dash-queue-who {
    font-size: 0.72rem;
    color: var(--text-dim);
}
.dash-queue-qedits {
    font-size: 0.62rem;
    opacity: 0.65;
    margin-top: 2px;
}
.dash-queue-acts {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.dash-queue-acts .icon-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.dash-queue-item .grok-msg-qtag {
    border-color: var(--border);
    color: var(--text-muted);
}
.dash-queue-text {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.85rem;
}
.dash-card-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dash-card-actions:has([data-dash-send][hidden]:only-child),
.dash-card-actions[hidden] {
    display: none !important;
}
[data-dash-send].is-busy {
    pointer-events: auto;
    cursor: pointer;
    gap: 6px;
}
.dash-card-actions:has(.dash-stream-preview) {
    justify-content: stretch;
}
button.btn.dash-stream-preview {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 4px;
    padding: 6px 8px 7px;
    text-align: left;
    font-weight: 400;
    line-height: 1.35;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    background: var(--bg);
    border-color: var(--border);
}
button.btn.dash-stream-preview:hover {
    background: var(--bg);
    border-color: var(--accent);
}
.dash-stream-preview-head {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 4px;
    min-width: 0;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--text-dim);
}
.dash-stream-preview-head .dash-working-cog {
    font-size: 12px;
    line-height: 1;
}
.dash-stream-preview-body {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: calc(1.35em * 2);
    max-height: calc(1.35em * 2);
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.dash-stream-preview-body > span {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.dash-stream-preview-body > span.is-empty {
    color: var(--text-dim);
}
[data-dash-send].is-locked {
    pointer-events: none;
    opacity: 0.45;
    cursor: default;
    filter: grayscale(0.3);
}
.dash-working-cog {
    animation: wasm-spin 0.9s linear infinite;
}
main.workspace {
    flex: 1;
    display: flex;
    flex-direction: row;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    padding: 0;
}
.git-pane {
    order: 1;
    flex: 0 0 var(--git-pane-width, 52%);
    min-width: 280px;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    min-height: 0;
    position: relative;
}
.git-pane-scroll {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.git-pane-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
body.pane-hidden .git-pane-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
body.pane-hidden .git-pane-scroll::-webkit-scrollbar { display: block; width: 8px; }
body.pane-hidden .git-pane-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.git-pane-overlay {
    position: absolute;
    inset: 0;
    z-index: 25;
    pointer-events: none;
}
.git-pane-overlay > *:not(.marek) { pointer-events: auto; }
.git-pane-overlay[hidden],
body:not(.view-dashboard) .git-pane-overlay { display: none !important; }
#projectView {
    flex: 0 0 auto;
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: visible;
}
#dashboardView {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
    min-height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
}
.dash-scroll {
    flex: 0 0 auto;
    min-width: 0;
    min-height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
#devicesView,
#serverView,
#forecastView {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
    min-height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
}
#projectView[hidden],
#dashboardView[hidden],
#devicesView[hidden],
#serverView[hidden],
#forecastView[hidden] {
    display: none !important;
}
.server-stat {
    font-size: 1.35rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.2;
    margin: 2px 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.server-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
}
.server-filter {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
.server-filter .ti {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    pointer-events: none;
}
.server-filter input[type="search"] {
    width: 100%;
    padding-left: 32px;
}
.server-live {
    flex: 0 0 auto;
    font-size: 0.72rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.server-live.is-on { color: var(--success-hover); }
.server-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    max-height: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
}
.server-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}
.server-table th,
.server-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    font-size: 0.8rem;
}
.server-table th {
    position: sticky;
    top: 0;
    background: var(--surface);
    color: var(--text-muted);
    font-weight: 550;
    font-size: 0.72rem;
}
.server-table tbody tr:last-child td { border-bottom: none; }
.server-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text);
}
.server-proc { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.server-name { color: var(--text); font-weight: 550; }
.server-pid, .server-cmd { color: var(--text-dim); font-size: 0.72rem; }
.server-origin, .server-cmd {
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
    word-break: break-word;
}
.server-origin { color: var(--text-muted); font-size: 0.75rem; }
.server-role { color: var(--text); font-size: 0.75rem; }
.server-output {
    margin: 0;
    max-height: 240px;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
}
.server-acts { white-space: nowrap; text-align: right; }
.server-acts .btn-tiny { margin-left: 4px; }
#serverView .dash-scroll > .card { min-width: 0; max-width: 100%; }
#serverStats .dash-stat-card { flex: 1 1 140px; max-width: none; }
#forecastView .dash-scroll > .card { min-width: 0; max-width: 100%; }
.forecast-graph { min-height: 120px; }
.forecast-plot { display: block; width: 100%; height: auto; }
.forecast-plot .plot-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.forecast-plot .plot-area { fill: var(--accent); opacity: 0.16; }
.forecast-plot .plot-zero { stroke: var(--border); stroke-dasharray: 3 3; }
.forecast-plot .plot-grid { stroke: var(--border); stroke-opacity: 0.55; }
.forecast-plot text { fill: var(--text-dim); font-size: 11px; font-family: var(--font-mono); }
@media (max-width: 1024px) {
    .forecast-plot .plot-y { display: none; }
}
.forecast-caption { color: var(--text-muted); font-size: 0.8rem; margin: 8px 0 12px; }
.forecast-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
}
.forecast-horizon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
}
.forecast-horizon-label {
    margin-right: 4px;
    color: var(--text-dim);
    font-size: 0.75rem;
}
.forecast-horizon button {
    min-width: 36px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text-muted);
    font: inherit;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.forecast-horizon button.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.forecast-bar .server-filter {
    flex: 1 1 180px;
}
.forecast-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.forecast-day {
    margin: 0;
}
.forecast-date {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    color: var(--text-muted);
    font-size: 1.05rem;
}
.forecast-date-name {
    color: var(--text);
}
.forecast-date-rel {
    color: var(--text-dim);
    font-size: 0.82rem;
}
.forecast-count {
    margin-left: auto;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--bg);
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 28px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.forecast-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-top: 0;
    border-left: 4px solid var(--plot, var(--accent));
    border-radius: 0;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.forecast-day .forecast-item:last-child {
    border-radius: 0 0 4px 4px;
}
.forecast-item:hover {
    background: var(--surface);
}
.forecast-kind {
    flex: 0 0 auto;
    color: var(--text-dim);
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.forecast-sent {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border: 1px solid rgba(35, 134, 54, 0.45);
    border-radius: 999px;
    background: rgba(35, 134, 54, 0.12);
    color: #56d364;
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.4;
    text-transform: none;
}
.forecast-time {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}
.forecast-title {
    flex: 1 1 160px;
    min-width: 0;
    font-weight: 550;
    overflow-wrap: anywhere;
}
.forecast-detail {
    flex: 1 1 100%;
    color: var(--text-muted);
    font-size: 0.78rem;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.contact-file-list { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; }
.contact-file-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.contact-file-row a { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.contact-file-row span { flex: 0 0 auto; color: var(--text-dim); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.contact-file-add { display: inline-flex; margin: 0 0 8px; cursor: pointer; }
.devices-note {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin: 0;
}
.devices-cmd {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.45;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--text);
}
.devices-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#devicesView .dash-scroll > .card {
    min-width: 0;
    max-width: 100%;
}
.devices-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}
.devices-filter {
    position: relative;
    flex: 1 1 180px;
    min-width: 0;
}
.devices-filter .ti {
    position: absolute;
    left: 12px;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    color: var(--text-dim);
    font-size: 15px;
    line-height: 1;
    pointer-events: none;
}
.devices-filter input[type="search"],
#devicesFilter {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius);
    padding: 8px 12px 8px 36px;
    font: inherit;
    font-size: 0.85rem;
}
.devices-table-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
}
.devices-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.devices-table thead th {
    position: sticky;
    top: 0;
    background: var(--surface-2);
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    z-index: 1;
}
.devices-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.devices-table tbody tr:last-child td { border-bottom: none; }
.devices-table tbody tr.is-inactive { opacity: 0.5; }
.devices-table tbody tr.is-inactive:focus-within { opacity: 1; }
.devices-table td:nth-child(1) { min-width: 160px; }
.devices-table td:nth-child(2) { min-width: 120px; }
.devices-table td:nth-child(3) { min-width: 150px; }
.devices-table th:last-child,
.devices-table td:last-child {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}
.devices-id-mini {
    display: block;
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-dim);
}
.devices-seen {
    white-space: nowrap;
    color: var(--text-dim);
    font-size: 0.75rem;
    padding-top: 16px;
}
.devices-status {
    color: var(--text-muted);
    font-size: 0.75rem;
    min-width: 140px;
    max-width: 280px;
    white-space: normal;
}
.devices-status a { color: var(--accent-hover); }
.devices-empty-row td {
    text-align: center;
    color: var(--text-dim);
    padding: 28px 10px;
}
@media (max-width: 720px) {
    .devices-table { min-width: 640px; }
}
.devices-source {
    margin: 0;
    font-size: 0.75rem;
    color: var(--success-hover);
}
.devices-job {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
}
.devices-job:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.devices-job-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.devices-job-status {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-dim);
}
.devices-job-status.is-done { color: var(--success-hover); }
.devices-job-status.is-failed { color: var(--danger-hover); }
.devices-job-status.is-queued,
.devices-job-status.is-claimed { color: var(--warning); }
.devices-job p {
    margin: 0;
    color: var(--text-muted);
    word-break: break-word;
}
body.view-dashboard .dash-scroll {
    padding-bottom: 56px;
}
.marek {
    display: none;
    position: absolute;
    right: 16px;
    bottom: 16px;
    left: auto;
    top: auto;
    z-index: 40;
    width: auto;
    height: auto;
    max-width: min(320px, calc(100% - 32px));
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
    flex-direction: column-reverse;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
    pointer-events: none;
}
body.view-dashboard .marek { display: flex; }
.marek-chip,
.marek-card { pointer-events: auto; }
.marek-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 10px 6px 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.marek-chip:hover { border-color: var(--border-hover); }
.marek-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent-hover);
    font-size: 0.85rem;
    font-weight: 700;
}
.marek-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.marek-card {
    width: 280px;
    max-width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
    overflow: hidden;
}
.marek-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.marek-head strong {
    flex: 1;
    font-size: 0.82rem;
}
.marek-min {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    font: inherit;
    line-height: 1;
    padding: 2px 6px;
}
.marek-min:hover { color: var(--text); }
.marek-body { padding: 12px; }
.marek-kicker {
    margin: 0 0 4px;
    font-size: 0.72rem;
    color: var(--text-dim);
    font-weight: 600;
}
.marek-q {
    margin: 0 0 10px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}
.marek-idle {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.marek-input {
    width: 100%;
    margin: 0 0 10px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
}
.marek-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}
.marek-later {
    display: block;
    margin: 8px 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-dim);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}
.marek-later:hover { color: var(--text); }
#projectView > .page-header,
#projectView > .action-strip,
#projectView > .grid-2,
#projectView > .conflict-card,
#projectView > .card.collapsible {
    flex-shrink: 0;
}
.split-handle {
    order: 2;
    flex: 0 0 12px;
    width: 12px;
    cursor: all-scroll;
    background: var(--border);
    position: relative;
    z-index: 5;
    touch-action: none;
    user-select: none;
}
.philosophy-pane { order: 3; }
.preview-pane { order: 4; }
.split-thumb {
    position: absolute;
    left: 2px;
    right: 2px;
    border-radius: 4px;
    background: var(--text-dim);
    min-height: 36px;
    pointer-events: none;
}
.split-thumb[hidden] { display: none !important; }
.split-handle:hover .split-thumb,
.split-handle.dragging .split-thumb {
    background: var(--accent);
}
.split-handle:hover,
.split-handle.dragging {
    background: var(--border-hover, var(--border));
}
body.is-split-dragging {
    cursor: col-resize;
    user-select: none;
}
body.is-split-scrolling {
    cursor: ns-resize;
    user-select: none;
}
body.is-split-dragging .preview-frame,
body.is-split-dragging .wasm-frame,
body.is-split-scrolling .preview-frame,
body.is-split-scrolling .wasm-frame {
    pointer-events: none !important;
}
.preview-pane {
    flex: 1 1 auto;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    background: #010409;
    height: 100%;
    min-height: 0;
}
.philosophy-pane {
    display: none;
    flex-direction: column;
    flex: 0 0 380px;
    width: 380px;
    min-width: 380px;
    max-width: 380px;
    height: 100%;
    min-height: 0;
    background: var(--surface);
    border-left: 1px solid var(--border);
    overflow: hidden;
}
@media (min-width: 1921px) {
    .philosophy-pane { display: flex; }
    body.view-dashboard .philosophy-pane { display: none; }
}
.philosophy-head {
    flex-shrink: 0;
    padding: 12px 14px 10px;
    font-size: 0.85rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}
.philosophy-feed {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}
.philosophy-feed::-webkit-scrollbar { width: 6px; }
.philosophy-feed::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.philosophy-post {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.philosophy-post-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.philosophy-post-time {
    font-size: 0.68rem;
    color: var(--text-dim);
    font-family: var(--font-mono);
    flex: 1;
    min-width: 0;
}
.philosophy-post-top .icon-btn {
    margin-left: auto;
}
.philosophy-post-body {
    font-size: 0.82rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--text);
}
.philosophy-compose {
    flex-shrink: 0;
    margin: 0;
    border-radius: 0;
}
.philosophy-compose textarea {
    border-radius: 18px;
}
aside.right-aside {
    width: 48px;
    flex-shrink: 0;
    background: var(--surface);
    border-left: 1px solid var(--border);
    border-right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 7px;
    height: 100%;
    overflow: hidden;
}
.rail-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.rail-spacer {
    flex: 1 1 auto;
    min-height: 8px;
    width: 1px;
    background: var(--border);
    opacity: 0.7;
}
.rail-btn {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}
.rail-btn.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-hover);
}
.gitflow-tip {
    position: fixed;
    z-index: 500;
    background: var(--surface-3);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 5px 8px;
    font-size: 0.75rem;
    line-height: 1.2;
    border-radius: var(--radius-sm);
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.gitflow-tip[hidden] { display: none !important; }
.browser-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.browser-chrome .nav-btn {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.browser-chrome .nav-btn:hover { background: var(--surface-3); border-color: var(--border-hover); }
.browser-chrome .nav-btn.danger:hover {
    background: rgba(218, 54, 51, 0.14);
    border-color: var(--danger);
    color: var(--danger-hover);
}
.browser-chrome .nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
@keyframes gitflow-reload-glow {
    0%, 100% {
        background: var(--surface-2);
        border-color: var(--border);
        color: var(--text);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
    50% {
        background: var(--accent);
        border-color: var(--accent-hover);
        color: #fff;
        box-shadow: 0 0 14px 2px rgba(59, 130, 246, 0.55);
    }
}
#browserReload.stale {
    animation: gitflow-reload-glow 2.6s ease-in-out infinite;
}
.browser-url {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 999px;
}
.browser-url:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.sced-pane {
    display: none;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    background: var(--bg);
}
body.sced-open .sced-pane { display: flex; }
body.sced-open .preview-chrome,
body.sced-open .file-chrome,
body.sced-open .preview-frame,
body.sced-open .file-tree-pane,
body.sced-open .preview-wait,
body.sced-open .preview-empty {
    display: none !important;
}
.sced-chrome { flex-shrink: 0; }
.sced-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sced-view {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    flex: 1 1 auto;
}
.sced-view[hidden] { display: none !important; }
#scedViewWarehouse { overflow: hidden; }
.sced-view-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sced-view-head h2 { font-size: 1rem; margin: 0; flex: 1; }
.sced-inv-actions {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    max-width: 100%;
}
.sced-inv-kinds {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.sced-row.sced-inv-quote {
    border-left: 3px solid #d29922;
    background: color-mix(in srgb, #d29922 14%, var(--surface-2));
}
.sced-row.sced-inv-quote strong { color: #e3b341; }
.sced-row.sced-inv-expense {
    border-left: 3px solid #f85149;
    background: color-mix(in srgb, #f85149 14%, var(--surface-2));
}
.sced-row.sced-inv-expense strong { color: #ff7b72; }
#expenseModal .modal-foot .btn.danger { margin-right: auto; }
.sced-row[data-invoice-id] strong {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.inv-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    line-height: 1.4;
}
.inv-chip-sent {
    color: #56d364;
    border-color: rgba(35, 134, 54, 0.45);
    background: rgba(35, 134, 54, 0.12);
}
.inv-chip-paid {
    color: #79c0ff;
    border-color: rgba(56, 139, 253, 0.45);
    background: rgba(56, 139, 253, 0.14);
}
.sced-wh-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.sced-wh-scroll > .empty { padding: 12px; }
.sced-wh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    line-height: 1.25;
}
.sced-wh-table th,
.sced-wh-table td {
    padding: 0.25em 0.5em;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}
.sced-wh-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-2);
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.sced-wh-table tbody tr {
    cursor: pointer;
}
.sced-wh-table tbody tr:nth-child(even) {
    background: var(--surface-2);
}
.sced-wh-table tbody tr:hover {
    background: var(--accent-soft);
}
.sced-wh-table .sced-wh-title {
    font-weight: 650;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sced-wh-table .sced-wh-title-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.sced-wh-thumb {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--surface-2);
    flex-shrink: 0;
}
.sced-wh-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.sced-wh-sale {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-hover);
}
.modal.modal-warehouse {
    max-width: 540px;
    width: 100%;
    max-height: min(94vh, 760px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.modal.modal-warehouse .modal-form {
    min-height: 0;
}
.wh-tabs {
    width: 100%;
}
.wh-tabs .wh-tab {
    position: relative;
    overflow: hidden;
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    min-height: 44px;
}
.wh-tabs .wh-tab > .ti {
    display: inline-flex;
    flex-shrink: 0;
    font-size: 18px;
    color: inherit;
}
.wh-tab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.wh-pane { display: flex; flex-direction: column; gap: 6px; }
.wh-pane[hidden] { display: none !important; }
.wh-market-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
}
.wh-market-switches {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.wh-market-row .switch-row {
    min-width: 0;
    margin: 0;
    padding: 6px 12px;
    align-items: center;
    min-height: 38px;
    box-sizing: border-box;
}
.wh-market-row .switch-ui {
    margin-top: 0;
}
.wh-market-row > .btn {
    justify-self: end;
    align-self: stretch;
    min-height: 38px;
    box-sizing: border-box;
}
.wh-movements {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.wh-movements[hidden] { display: none !important; }
.wh-move {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: baseline;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.wh-move-expl {
    color: var(--text);
    font-weight: 550;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wh-move-meta { flex-shrink: 0; color: var(--text-dim); }
#whPrice:read-only {
    background: var(--surface-2);
    cursor: default;
}
.wh-cat-select {
    min-height: 9rem;
    font-size: 0.8rem;
}
.wh-cam {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    max-height: 220px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #111;
    color: var(--text-muted);
}
.wh-cam video {
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: cover;
}
.wh-cam-fallback {
    margin: 0;
    padding: 12px;
    text-align: center;
    font-size: 0.8rem;
    color: #ccc;
}
.wh-cam-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.wh-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 88px;
    padding: 8px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.78rem;
}
.wh-thumbs.is-drop {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.wh-thumb {
    position: relative;
    width: calc(25% - 6px);
    min-width: 72px;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #111;
}
.wh-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wh-thumb button {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
}
.wh-type-fields[hidden] { display: none !important; }
@media (min-width: 768px) {
    .wh-tabs .wh-tab {
        padding: 8px 6px;
        min-height: 0;
    }
    .wh-tabs .wh-tab > .ti { display: none; }
    .wh-tab-label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: hidden;
        clip: auto;
        text-overflow: ellipsis;
    }
}
@media (max-width: 640px) {
    .modal.modal-warehouse {
        max-width: 100%;
        max-height: min(96vh, calc(100dvh - 12px));
        border-radius: var(--radius);
    }
    .wh-market-row .switch-row,
    .wh-market-row > .btn { min-height: 38px; }
    .sced-wh-col-make,
    .sced-wh-col-serial { display: none; }
}
.sced-timer-section {
    margin: 8px 0 0;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.sced-timer-captured-head {
    display: flex;
    align-items: center;
    gap: 8px 12px;
    flex-wrap: wrap;
    margin: 8px 0 0;
    min-width: 0;
}
.sced-timer-captured-head .sced-timer-section {
    margin: 0;
    flex: 1 1 auto;
}
.sced-timer-acts {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}
.sced-timer-acts[hidden] { display: none !important; }
.sced-timer-acts .icon-btn {
    width: 28px;
    height: 28px;
}
.sced-timer-acts .icon-btn:disabled,
.sced-timer-acts .btn-tiny:disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}
.sced-timer-acts .btn-tiny {
    height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    white-space: nowrap;
}
.sced-timer-acts .btn-tiny .ti {
    font-size: 14px;
}
.sced-timer-pick {
    flex-shrink: 0;
}
.sced-timer-mail-atts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0 8px;
}
.sced-timer-mail-atts .field-label { margin-bottom: 0; }
.sced-compose-att-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.mail-file-btn {
    cursor: pointer;
    margin: 0;
    background: var(--surface-3);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.mail-file-btn:hover { background: var(--border-hover); border-color: var(--border-hover); }
.mail-file-btn input { display: none; }
.sced-compose-atts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sced-compose-atts:empty { display: none; }
.sced-compose-att {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    font-size: 0.8rem;
}
.sced-compose-att-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sced-compose-att .icon-btn {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}
.mail-reply-sources {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
}
.mail-reply-sources .field-label {
    flex: 1 1 180px;
    margin: 0;
}
.mail-reply-sources select { width: 100%; margin-top: 4px; }
.icon-btn:disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}
.sced-timer-running,
.sced-timer-captured,
.sced-timer-month-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.sced-timer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    min-width: 0;
}
.sced-timer-row.is-running {
    border-left: 3px solid var(--accent);
}
.sced-timer-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
}
.sced-timer-elapsed {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--text);
    font-family: var(--font-mono);
}
.sced-timer-when {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--text-dim);
    font-family: var(--font-mono);
}
.sced-timer-row [data-timer-stop] {
    flex-shrink: 0;
    margin-left: auto;
}
.sced-timer-cal {
    cursor: default;
}
.sced-timer-month {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    overflow: hidden;
}
.sced-timer-month-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}
.sced-timer-month-head:hover {
    background: var(--surface-3);
}
.sced-timer-month-head span:last-child {
    color: var(--text-dim);
    font-size: 0.75rem;
    font-weight: 500;
}
.sced-timer-month-body {
    padding: 0 8px 8px;
}
.sced-timer-month-body .sced-timer-row {
    background: var(--bg);
}
.sced-timer-row:has(.sced-timer-pick:checked),
.sced-timer-month-body .sced-timer-row:has(.sced-timer-pick:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.sced-cal-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sced-cal-nav h2 {
    flex: 1;
    text-align: center;
    font-size: 1rem;
    margin: 0;
}
.sced-cal-weekdays,
.sced-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    min-width: 0;
}
.sced-cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    flex-wrap: wrap;
    min-width: 0;
}
.sced-cal-today-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}
.sced-cal-today-link {
    appearance: none;
    background: none;
    border: 0;
    padding: 4px 0;
    margin: 0;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    text-decoration: underline;
    flex-shrink: 0;
}
.sced-cal-today-link:hover {
    color: var(--accent-hover);
}
.sced-cal-today-row > .icon-btn {
    width: 22px;
    height: 22px;
}
.sced-cal-today-row > .icon-btn[aria-pressed="true"] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-hover);
}
.sced-cal-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    min-width: 0;
}
.sced-cal-filter-link {
    appearance: none;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 4px 12px;
    margin: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}
.sced-cal-filter-link:hover {
    color: var(--text);
    border-color: var(--border-hover);
}
.sced-cal-filter-link.off,
.sced-cal-filter-link[aria-pressed="false"] {
    background: var(--surface-2);
    color: var(--text-dim);
    border-color: var(--border);
}
.sced-cal-filter-link[aria-pressed="true"] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-hover);
}
.sced-cal-weekdays span {
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-dim);
    font-weight: 600;
}
.sced-cal-day {
    appearance: none;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    min-height: 58px;
    padding: 6px 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font: inherit;
}
.sced-cal-day.mute { opacity: 0.45; }
.sced-cal-day.today { border-color: var(--accent); }
.sced-cal-day.holiday {
    background: rgba(248, 81, 73, 0.16);
    border-color: rgba(248, 81, 73, 0.38);
}
.sced-cal-day.holiday.mute {
    background: rgba(248, 81, 73, 0.1);
}
.sced-cal-day.selected {
    background: var(--accent-soft);
    border-color: var(--accent);
}
.sced-cal-day.holiday.selected {
    background: rgba(248, 81, 73, 0.26);
    border-color: rgba(248, 81, 73, 0.6);
}
.sced-holiday-row strong { color: #f85149; }
.sced-event-repeat {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 550;
    cursor: pointer;
    user-select: none;
}
.sced-event-repeat input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}
.sced-event-repeat[hidden] { display: none !important; }
#scedEventUntilWrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#scedEventUntilWrap[hidden] { display: none !important; }
#scedEventDatesWrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#scedEventDatesWrap[hidden] { display: none !important; }
.sced-event-del {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-right: auto;
}
.sced-event-del[hidden] { display: none !important; }
#scedEventSeriesNote[hidden] { display: none !important; }
.sced-cal-num { font-size: 0.72rem; font-weight: 600; }
.sced-cal-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}
#scedViewCalendar {
    flex: 1 1 auto;
    min-height: 0;
}
.sced-day {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    padding: 0;
    background: transparent;
    border: 0;
}
.sced-day h3 {
    font-size: 0.9rem;
    margin: 0;
    font-weight: 600;
}
.sced-list, .sced-day-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}
.sced-day-list > .sced-cal-listed {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}
#scedMsgList {
    gap: 16px;
}
.sced-mail-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.sced-mail-tab {
    appearance: none;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.78rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sced-mail-tab.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-hover);
}
.sced-mail-tab-count {
    min-width: 1.25em;
    padding: 0 5px;
    height: 16px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text);
    font-size: 0.68rem;
    font-weight: 650;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sced-mail-tab.active .sced-mail-tab-count {
    background: var(--accent);
    color: #fff;
}
.sced-row.sced-mail-item {
    flex-direction: row;
    align-items: stretch;
    gap: 4px;
    padding: 0;
}
.sced-mail-item .sced-mail-open {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.sced-mail-item .sced-mail-act {
    flex-shrink: 0;
    align-self: center;
    margin: 0 8px 0 0;
}
.sced-mail-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.sced-mail-block-title {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.sced-mail-thread {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.sced-mail-reply {
    margin-left: 1.15rem;
}
.sced-mail-received {
    border-left: 3px solid #58a6ff;
}
.sced-mail-sent {
    border-left: 3px solid #3fb950;
}
.sced-mail-scheduled,
.sced-inv-scheduled {
    border-left: 3px solid #d29922;
}
.sced-sms-failed {
    border-left: 3px solid var(--danger-hover);
}
.sced-sms-queued,
.sced-sms-claimed {
    border-left: 3px solid #3fb950;
}
.sced-sms-claimed {
    opacity: 0.75;
}
#scedSmsModal .modal-foot .btn.danger,
#scedSmsRestore {
    margin-right: auto;
}
.sced-msg-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-left: 8px;
    padding-right: 10px;
}
.sced-msg-kind {
    margin-right: 4px;
    color: var(--text-dim);
    vertical-align: -2px;
}
#scedSmsModal select:disabled {
    opacity: 0.9;
    cursor: default;
}
.sced-mail-trashed {
    border-left: 3px solid var(--text-dim);
    opacity: 0.85;
}
.sced-mail-claimed,
.sced-mail-thread.sced-mail-claimed {
    opacity: 0.62;
}
.sced-mail-thread.sced-mail-claimed .sced-mail-item {
    opacity: 1;
}
.sced-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.sced-row:hover { border-color: var(--accent); }
.sced-row strong { font-size: 0.85rem; }
.sced-row span { font-size: 0.75rem; color: var(--text-dim); }
.sced-row-feedback {
    display: flex;
    align-items: stretch;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.sced-row-feedback:hover { border-color: var(--accent); }
.sced-row-feedback.is-done {
    border-color: #3fb950;
    box-shadow: inset 3px 0 0 #3fb950;
}
.sced-row-feedback.is-done:hover { border-color: #3fb950; }
.sced-row-feedback .sced-event-done {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    cursor: pointer;
    flex-shrink: 0;
}
.sced-row-feedback .sced-event-done input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #3fb950;
}
.sced-row-feedback > .sced-row {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
}
.sced-row-feedback > .sced-row:hover { border: 0; }
.sced-event-flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    min-width: 0;
}
.sced-event-feedback {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-width: 0;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 550;
    cursor: pointer;
    user-select: none;
}
.sced-event-feedback span {
    min-width: 0;
}
.sced-event-feedback input {
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--accent);
}
.sced-order-acts {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.sced-order-acts .btn-tiny {
    min-width: 26px;
    padding: 2px 6px;
}
.sced-order-acts .btn-tiny:disabled {
    opacity: 0.35;
}
.sced-day-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}
.sced-day-chips:empty { display: none; }
.sced-day-chips .sced-row {
    flex: 0 0 80px;
    width: 80px;
    box-sizing: border-box;
    padding: 8px;
    cursor: default;
}
.sced-preset-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sced-preset-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.sced-preset-tab {
    appearance: none;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.78rem;
    cursor: pointer;
}
.sced-preset-tab.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-hover);
}
.sced-preset-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}
.sced-preset-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sced-preset-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.sced-preset-swatch {
    width: 10px;
    height: 32px;
    border-radius: 3px;
    flex-shrink: 0;
}
.sced-preset-item-body {
    flex: 1;
    min-width: 0;
}
.sced-preset-item-body strong {
    display: block;
    font-size: 0.85rem;
}
.sced-preset-item-body span {
    display: block;
    font-size: 0.75rem;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sced-preset-item-acts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    align-items: flex-end;
    justify-content: flex-start;
    margin-left: auto;
}
.sced-preset-item-opts {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
#scedPresetDayFields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#scedPresetDayFields[hidden] { display: none !important; }
.sced-day-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 160px) 72px;
    gap: 10px;
    align-items: end;
}
.sced-day-meta > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.sced-day-events {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.sced-day-events-head { display: none; }
.sced-event-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.sced-event-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px;
}
.sced-event-times {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    min-width: 0;
}
.sced-event-main {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}
.sced-event-times input {
    min-width: 0;
    width: 100%;
}
.sced-event-main > input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}
.sced-event-opts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 6px;
    flex-shrink: 0;
}
.sced-event-opts .sced-order-acts {
    justify-content: flex-end;
}
.sced-event-row [data-ev-remove] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
#scedPresetDayAddEvent {
    align-self: flex-start;
    width: auto;
}
.sced-week-map {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sced-week-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 8px 10px;
    align-items: center;
}
.sced-week-map .field-label {
    margin: 0;
}
.sced-week-map select {
    width: 100%;
    min-width: 0;
}
.sced-year-fill {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.sced-year-fill select {
    flex: 1 1 160px;
    min-width: 0;
}
#scedPresetYearFields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#scedPresetYearFields[hidden] { display: none !important; }
.sced-year-map {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 360px;
    overflow: auto;
}
.sced-year-month {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 8px 0 2px;
}
.sced-year-month:first-child { padding-top: 0; }
.sced-year-week {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 6px 10px;
    align-items: center;
}
.sced-year-map .field-label {
    margin: 0;
    font-size: 0.72rem;
}
.sced-year-map select {
    width: 100%;
    min-width: 0;
}
.dav-cals {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
}
.dav-cal-scroll {
    max-height: min(42vh, 320px);
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    min-height: 0;
}
.dav-cal-scroll::-webkit-scrollbar { width: 6px; }
.dav-cal-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.dav-cal-scroll .empty { padding: 16px 10px; }
.dav-cal-table {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.dav-cal-head,
.dav-cal-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px;
}
.dav-cal-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: 0.68rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.dav-cal-row {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.dav-cal-row:last-child { border-bottom: 0; }
.dav-cal-row > div {
    min-width: 0;
}
.dav-cal-row input[type="text"] {
    min-width: 0;
    width: 100%;
}
.dav-cal-row .dav-cal-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.dav-cal-row .dav-cal-id,
.dav-cal-row .dav-cal-default {
    font-size: 0.68rem;
    color: var(--text-dim);
    font-family: var(--font-mono);
}
.dav-cal-row .dav-cal-default {
    font-family: inherit;
    margin-left: 0;
}
.dav-cal-acts {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    justify-content: flex-end;
}
.btn-tiny:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.dav-cal-new {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px auto;
    gap: 8px;
    align-items: center;
}
.modal.modal-sced-mail {
    max-width: 560px;
    width: 100%;
    max-height: min(92vh, 720px);
    overflow: hidden;
    padding: 0;
    gap: 0;
}
.modal.modal-sced-mail textarea {
    min-height: 180px;
    resize: vertical;
}
#scedMailComposeWhenWrap[hidden],
#scedMailComposeDelWrap[hidden] {
    display: none !important;
}
.modal.modal-sced-mail input[readonly],
.modal.modal-sced-mail textarea[readonly] {
    opacity: 0.9;
    cursor: default;
}
.sced-mail-kind {
    font-size: 0.72rem;
    color: var(--text-dim);
}
.modal.modal-sced-cals {
    max-width: 460px;
    width: 100%;
    max-height: min(92vh, 640px);
    overflow: hidden;
    padding: 0;
    gap: 0;
}
.modal.modal-sced-cals .modal-scroll {
    max-height: none;
    flex: 1 1 auto;
    min-height: 180px;
}
.modal.modal-sced-cals .sced-cal-pick-filter {
    margin-left: -12px;
    margin-right: -12px;
    padding: 8px 12px;
}
.sced-cal-pick-filter {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.sced-cal-pick-acts {
    display: flex;
    gap: 6px;
}
.sced-cal-pick-row {
    display: grid;
    grid-template-columns: 18px 12px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
    background: transparent;
    width: 100%;
}
.sced-cal-pick-row:last-child { border-bottom: 0; }
.sced-cal-pick-row:hover { background: var(--surface-2); }
.sced-cal-pick-row input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent);
}
.sced-cal-pick-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
    border: 1px solid var(--border);
}
.sced-cal-pick-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
}
.mail-preset-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--text-dim);
}
.mail-preset-select {
    font: inherit;
    font-size: 0.75rem;
    max-width: 160px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
}
.modal.modal-sced-preset {
    max-width: 520px;
    width: 100%;
    max-height: min(92vh, 720px);
    overflow: hidden;
}
.sced-cal-events {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    margin-top: 2px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
.sced-cal-event {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sced-cal-listed {
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: var(--cal-color, #3b82f6);
}
.sced-cal-listed .sced-cal-open {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.sced-cal-listed strong {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}
.sced-cal-listed-swatch {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cal-color, #3b82f6);
    flex-shrink: 0;
}
.sced-cal-listed strong .sced-cal-listed-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: inherit;
    color: inherit;
}
.sced-attach-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: var(--text-dim);
}
.sced-attach-icons .ti {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: var(--accent-hover);
    flex-shrink: 0;
}
.sced-bind-hit {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent-hover);
    cursor: pointer;
}
.sced-bind-hit:hover,
.sced-bind-hit:focus-visible {
    color: var(--text);
}
#scedEventForm .field-pair input,
#scedEventForm .field-pair select {
    width: 100%;
    min-width: 0;
}
#scedEventForm .field-pair .field-label {
    margin-bottom: 0;
}
.sced-from-preset {
    opacity: 0.78;
}
.sced-from-preset:hover {
    opacity: 0.94;
}
.sced-row-feedback.sced-from-preset > .sced-row {
    opacity: 1;
}
.sced-cal-flow,
.sced-cal-grok,
.sced-cal-git,
.sced-cal-job {
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.sced-cal-flow.pos, .sced-row .pos, .sced-ledger-banner .pos { color: #3fb950; }
.sced-cal-flow.neg, .sced-row .neg, .sced-ledger-banner .neg { color: #f85149; }
.sced-cal-grok, .sced-row .grok, .sced-day-flow .fin-grok { color: #a78bfa; }
.sced-cal-git, .sced-day-flow .fin-git { color: var(--text-muted); }
.sced-cal-job { color: #3b82f6; }
.sced-cal-mail {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-size: 0.52rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
.sced-cal-mail-up { color: #3fb950; }
.sced-cal-mail-down { color: #58a6ff; }
.sced-cal-mail-sched { color: #d29922; }
.sced-day-flow .fin-mail {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
}
.sced-cal-wx {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--text-muted);
}
.sced-cal-wx .wx-icon { font-size: 0.78rem; line-height: 1; }
.sced-cal-wx .wx-temp { font-variant-numeric: tabular-nums; }
.sced-day-flow .fin-wx { color: var(--text-muted); font-weight: 600; }
.sced-day-flow .fin-sun {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-weight: 600;
}
.sced-day-flow .fin-sun .ti { font-size: 0.95rem; }
.sced-day-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    margin: 0 0 8px;
    font-variant-numeric: tabular-nums;
}
.sced-day-flow .fin-in { color: #3fb950; }
.sced-day-flow .fin-out { color: #f85149; }
.sced-day-trip {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 10px;
}
.sced-day-trip[hidden] { display: none !important; }
.sced-day-trip-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}
.sced-day-trip-head strong { font-size: 0.85rem; }
.sced-day-trip-head span {
    font-size: 0.75rem;
    color: var(--text-dim);
}
.sced-trip-note {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--text-muted);
}
.sced-trip-map {
    position: relative;
    height: 220px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #161b22;
}
.sced-trip-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #161b22;
}
.sced-trip-drive {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.sced-trip-you {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.78rem;
}
.sced-trip-you span { color: var(--text-dim); }
.sced-trip-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "moves stop"
        "moves end";
    align-items: start;
    column-gap: 6px;
    row-gap: 4px;
}
.sced-trip-moves {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    flex: 0 0 auto;
    grid-area: moves;
    align-self: center;
}
.sced-trip-moves .btn-tiny:disabled,
.sced-trip-moves .btn-tiny:disabled:hover {
    opacity: 0.35;
    background: var(--surface-3);
    border-color: var(--border);
    color: var(--text);
    cursor: default;
}
.sced-trip-line .sced-row {
    grid-area: stop;
    min-width: 0;
}
.sced-trip-stop { border-left: 3px solid #3b82f6; }
.sced-trip-stop span { white-space: pre-wrap; }
.sced-trip-actions {
    grid-area: end;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-self: start;
}
.sced-trip-end,
.sced-trip-end-me,
.sced-trip-waze,
.sced-trip-call,
.sced-trip-cancel {
    flex: 0 0 auto;
    align-self: center;
}
a.sced-trip-waze,
a.sced-trip-call {
    display: inline-flex;
    align-items: center;
    line-height: 1.4;
    text-decoration: none;
}
.sced-trip-line.is-cancelled .sced-trip-stop {
    border-left-color: var(--text-dim);
    opacity: 0.72;
}
.sced-trip-line.is-cancelled .sced-trip-stop strong {
    text-decoration: line-through;
}
.sced-trip-end[aria-pressed="true"],
.sced-trip-end-me[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.forecast-day .sced-day-trip {
    margin: 0;
    padding: 10px 12px 12px;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: var(--bg);
}
.modal-overlay.trip-drive {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}
.trip-drive-pane {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface);
}
.trip-drive-frame {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border: 0;
    background: #161b22;
}
@media (max-width: 600px) {
    .sced-trip-map { height: 200px; }
}
.sced-ledger-banner {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.sced-ledger-filter {
    width: 100%;
}
.sced-view-head .sced-ledger-filter {
    flex: 1 1 140px;
    min-width: 120px;
    width: auto;
}
.sced-contact-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 280px;
    min-width: min(100%, 240px);
}
.sced-contact-tools .sced-ledger-filter {
    flex: 1 1 auto;
    min-width: 0;
}
.sced-contact-tag-select {
    flex: 0 1 9.5rem;
    width: auto;
    min-width: 6.5rem;
    max-width: 11rem;
}
.sced-contact-bulk {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}
.sced-contact-bulk[hidden] { display: none !important; }
.sced-contact-bulk .btn-tiny {
    height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    white-space: nowrap;
}
.sced-contact-bulk .btn-tiny .ti { font-size: 14px; }
.sced-contact-bulk .btn-tiny:disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}
.sced-contact-pick {
    flex-shrink: 0;
    margin: 0;
}
.sced-contact-card:has(.sced-contact-pick:checked) {
    border-color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent);
}
.sced-contact-msg-who {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    max-height: 168px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.sced-contact-msg-who:empty { display: none; }
.sced-contact-msg-who li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 10px;
    font-size: 0.78rem;
    border-bottom: 1px solid var(--border);
}
.sced-contact-msg-who li:last-child { border-bottom: 0; }
.sced-contact-msg-who li span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--text);
}
.sced-contact-msg-who li span:last-child {
    flex-shrink: 0;
    color: var(--text-dim);
    text-align: right;
}
.sced-contact-msg-who li.is-warn span:last-child { color: var(--danger-hover, #f85149); }
#scedContactMsgSubjectWrap[hidden],
#scedContactMsgDeviceWrap[hidden],
#scedContactMsgFromWrap[hidden] { display: none !important; }
.sced-contact-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.sced-contact-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid hsl(var(--chip-h, 210) 42% 46% / 0.5);
    background: hsl(var(--chip-h, 210) 46% 48% / 0.16);
    color: var(--text);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: 0.01em;
}
button.sced-contact-chip {
    cursor: pointer;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 600;
}
button.sced-contact-chip:hover {
    background: hsl(var(--chip-h, 210) 46% 48% / 0.28);
}
.sced-contact-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: -4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.72;
}
.sced-contact-chip-x:hover { opacity: 1; background: hsl(var(--chip-h, 210) 40% 40% / 0.22); }
.sced-contact-chip-x .ti { font-size: 11px; }
.contact-tag-field { position: relative; }
.contact-tag-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
}
.contact-tag-box:focus-within { border-color: var(--accent); }
.contact-tag-chips { display: contents; }
.contact-tag-box input {
    flex: 1 1 7rem;
    min-width: 6rem;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text);
    padding: 4px 2px;
    font: inherit;
}
.contact-tag-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 8;
    margin-top: 2px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    max-height: 180px;
    overflow: auto;
    display: flex;
    flex-direction: column;
}
.contact-tag-suggest[hidden] { display: none !important; }
.contact-tag-suggest button {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    color: inherit;
    font: inherit;
    text-align: left;
    padding: 7px 10px;
    cursor: pointer;
}
.contact-tag-suggest button:last-child { border-bottom: 0; }
.contact-tag-suggest button:hover { background: var(--accent-soft); }
.sced-contacts-stage {
    display: flex;
    flex-direction: column;
    height: 620px;
    min-height: 620px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    overflow: hidden;
}
.sced-contacts-stage.is-full {
    position: fixed;
    inset: 0;
    z-index: 160;
    width: auto;
    height: 100%;
    height: 100dvh;
    max-height: none;
    min-height: 0;
    border: 0;
    border-radius: 0;
}
.sced-contacts-stage-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 0 0 auto;
    padding: 6px 8px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.sced-contacts-view-toggle {
    display: flex;
    gap: 4px;
    min-width: 0;
}
.sced-contacts-view-btn {
    appearance: none;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 4px 12px;
    margin: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.2;
}
.sced-contacts-view-btn[aria-pressed="true"] {
    background: var(--surface-3);
    border-color: var(--accent);
    color: var(--text);
}
.sced-contacts-stage .icon-btn {
    width: 28px;
    height: 28px;
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}
.sced-contacts-stage .icon-btn:hover {
    background: var(--surface-3);
    color: var(--text);
    border-color: var(--border-hover);
}
.sced-contacts-map,
.sced-contacts-monopoly {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: var(--bg);
}
@media (max-width: 600px) {
    .sced-contacts-stage:not(.is-full) {
        height: 620px;
        min-height: 620px;
    }
}
.sced-contact-card {
    cursor: default;
    position: relative;
    border-top-width: 2px;
    border-top-color: color-mix(in srgb, var(--border) 70%, transparent);
}
.sced-contact-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: -2px;
    height: 2px;
    width: var(--contact-fill, 0%);
    background: color-mix(in srgb, var(--contact-fill-color, #da3633) 38%, transparent);
    pointer-events: none;
}
.sced-contact-card.is-business {
    background: color-mix(in srgb, var(--surface-2) 78%, #3d5a80 22%);
}
.sced-contact-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}
.sced-contact-flag {
    flex: 0 0 auto;
    font-size: 1.05rem;
    line-height: 1;
}
.sced-contact-head strong {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sced-contact-acts {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    flex-shrink: 0;
    margin-top: 0;
    margin-left: auto;
    color: inherit;
    font-size: inherit;
}
.sced-contact-acts .icon-btn {
    width: 26px;
    height: 26px;
}
.sced-contact-acts .icon-btn .ti { font-size: 16px; }
.sced-ctx-menu {
    position: fixed;
    z-index: 900;
    min-width: 176px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
}
.sced-ctx-menu[hidden] { display: none !important; }
.sced-ctx-menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    color: var(--text);
    padding: 7px 10px;
    border-radius: 4px;
    font-size: 0.82rem;
    cursor: pointer;
}
.sced-ctx-menu button:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--surface-2); }
.sced-ctx-menu button:disabled,
.sced-ctx-menu button[aria-disabled="true"] {
    opacity: 0.45;
    cursor: default;
}
.sced-ctx-menu button.is-danger { color: var(--danger-hover); }
.sced-ctx-menu button.is-danger:hover:not(:disabled):not([aria-disabled="true"]) { background: rgba(248, 81, 73, 0.1); }
.sced-contact-meta {
    display: block;
}
.growth-exec {
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.growth-exec-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    font-size: 0.78rem;
}
.growth-exec-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.growth-exec-pill {
    flex-shrink: 0;
    font-size: 0.72rem;
    padding: 1px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
}
.growth-exec-pill.is-done {
    background: color-mix(in srgb, var(--success, #3fb950) 22%, transparent);
    border-color: var(--success, #3fb950);
    color: var(--success, #3fb950);
}
.growth-steps-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px;
    scrollbar-width: thin;
}
.growth-step-chip {
    flex: 0 0 168px;
    min-height: 86px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    color: inherit;
}
.growth-step-chip:hover { border-color: var(--border-hover); }
.growth-step-chip.is-done {
    border-color: color-mix(in srgb, var(--success, #3fb950) 50%, var(--border));
    background: color-mix(in srgb, var(--success, #3fb950) 10%, var(--surface-2));
}
.growth-step-num {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    display: flex;
    justify-content: space-between;
}
.growth-step-title { font-size: 0.8rem; font-weight: 600; }
.growth-step-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.growth-step-att { font-size: 0.68rem; color: var(--text-dim); }
.growth-apply-btn {
    width: 100%;
    margin-top: 8px;
    border-style: dashed;
}
.modal.modal-growth-plan {
    max-width: 640px;
    width: 100%;
    max-height: min(92vh, 800px);
    overflow: hidden;
}
.modal.modal-growth-plan .field-input:not(textarea),
.modal.modal-growth-plan .btn {
    min-height: 38px;
    height: 38px;
    box-sizing: border-box;
}
.modal.modal-growth-plan textarea.field-input {
    min-height: 64px;
    height: auto;
    resize: vertical;
    line-height: 1.4;
}
.modal.modal-growth-plan .modal-foot .btn { width: auto; }
.modal.modal-growth-plan .modal-foot .btn.danger { margin-right: auto; }
.growth-att:not(:has([data-att-rm])) { padding-right: 10px; }
#growthStepFiles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.growth-plan-steps-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.growth-plan-steps-head .field-label {
    flex: 1;
    margin: 0;
}
.growth-plan-steps-head .btn {
    width: auto;
    flex-shrink: 0;
    padding-left: 12px;
    padding-right: 12px;
}
.growth-steps-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    counter-reset: gstep;
}
.growth-step-edit {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--surface-2);
    counter-increment: gstep;
}
.growth-step-edit-top {
    display: flex;
    gap: 8px;
    align-items: center;
}
.growth-step-index {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}
.growth-step-index::before { content: counter(gstep); }
.growth-step-edit-top .field-input { flex: 1; min-width: 0; width: auto; }
.growth-step-rm {
    width: 38px;
    min-width: 38px;
    padding: 0;
    flex-shrink: 0;
    justify-content: center;
}
.growth-step-rm .ti { font-size: 16px; }
.growth-step-atts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.growth-step-files {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
.growth-step-atts > .btn {
    width: auto;
    flex: 0 0 auto;
    padding-left: 12px;
    padding-right: 12px;
}
.growth-att {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: min(100%, 320px);
    min-height: 38px;
    height: 38px;
    padding: 0 4px 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    box-sizing: border-box;
}
.growth-att-link {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    color: var(--accent-hover);
    text-decoration: none;
    font-size: 0.82rem;
}
.growth-att-link:hover { text-decoration: underline; }
.growth-att-link .ti {
    flex-shrink: 0;
    font-size: 15px;
    color: var(--text-muted);
}
.growth-att-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.growth-att .icon-btn {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}
.sced-multi-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sced-multi-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.sced-multi-row .field-input { flex: 1; min-width: 0; }
.sced-multi-row .sced-md-day { flex: 0 0 5.5rem; width: 5.5rem; }
.sced-multi-row .sced-md-month { flex: 1; }
.modal.modal-contact {
    max-width: 560px;
    width: 100%;
    max-height: min(92vh, 760px);
    overflow: hidden;
}
.modal.modal-ledger { max-width: 720px; }
.modal.modal-contact-share { max-width: 440px; }
#contactShareUrl { font-size: 0.78rem; }
#contactShareModal .modal-foot .btn[hidden] { display: none; }
.sced-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    align-items: start;
}
.sced-contact-grid .field-label { margin: 0; }
.sced-contact-grid .span-2,
.sced-contact-grid #contactStreet { grid-column: 1 / -1; }
.sced-contact-grid .switch-row { margin: 4px 0; }
.sced-contact-grid .contact-lang-wrap { min-width: 0; }
.field-pair > .contact-lang-wrap { flex: 0 1 210px; }
.contact-lang-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.contact-lang-row .field-input { flex: 1 1 auto; min-width: 0; }
.contact-lang-row .sced-contact-flag { font-size: 1.35rem; }
.contact-org-lookup {
    position: relative;
    min-width: 0;
}
.contact-org-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 8;
    margin-top: 2px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    max-height: 220px;
    overflow: auto;
    display: flex;
    flex-direction: column;
}
.contact-org-suggest[hidden] { display: none !important; }
.contact-org-suggest button {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    color: inherit;
    font: inherit;
    text-align: left;
    padding: 8px 10px;
    cursor: pointer;
}
.contact-org-suggest button:last-child { border-bottom: 0; }
.contact-org-suggest button:hover,
.contact-org-suggest button.is-active {
    background: var(--accent-soft);
}
.contact-org-suggest strong {
    display: block;
    font-size: 0.82rem;
}
.contact-org-suggest span {
    display: block;
    font-size: 0.7rem;
    color: var(--text-dim);
}
#contactNotes {
    min-height: 160px;
    resize: vertical;
    line-height: 1.45;
    white-space: pre-wrap;
}
@media (max-width: 600px) {
    .sced-contact-grid { grid-template-columns: 1fr; }
    .sced-contacts-stage:not(.is-full) {
        height: 620px;
        min-height: 620px;
    }
    .sced-contact-tools { flex: 1 1 100%; }
}
.sced-ledger-row > span:not(.sced-ledger-links) {
    display: block;
}
.sced-ledger-row > .sced-ledger-when {
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    font-size: 0.78rem;
    color: var(--text);
}
.sced-ledger-row {
    text-align: left;
}
.sced-ledger-row.is-linked {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.sced-ledger-line {
    display: flex;
    align-items: stretch;
    gap: 4px;
}
.sced-ledger-line > .sced-ledger-row { flex: 1 1 auto; min-width: 0; }
.sced-ledger-manual-acts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    flex: 0 0 auto;
}
.sced-ledger-manual-acts .icon-btn { width: 28px; height: 28px; }
.sced-ledger-row.is-manual {
    border-color: color-mix(in srgb, var(--success, #238636) 35%, var(--border));
}
.sced-ledger-row .sced-ledger-pos {
    display: inline;
    margin: 0 6px 0 0;
    padding: 0 4px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    vertical-align: 1px;
}
.ledger-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    width: 100%;
}
.ledger-pair-3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.ledger-pair > .ledger-combo-field {
    min-width: 0;
    width: auto;
}
.ledger-combo-field { min-width: 0; }
.ledger-combo {
    position: relative;
    min-width: 0;
}
.ledger-combo > .field-input,
.ledger-pair input[type="search"] {
    width: 100%;
    min-width: 0;
}
.ledger-combo > .field-input {
    padding-right: 28px;
}
.ledger-combo input[type="search"]::-webkit-search-cancel-button {
    appearance: none;
    display: none;
}
.ledger-combo-clear {
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}
.ledger-combo-clear:hover { color: var(--text); }
.ledger-combo-list {
    position: fixed;
    z-index: 800;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    max-height: 220px;
    overflow: auto;
    display: flex;
    flex-direction: column;
}
.ledger-combo-list[hidden] { display: none !important; }
.ledger-combo-list button {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    color: inherit;
    font: inherit;
    text-align: left;
    padding: 8px 10px;
    cursor: pointer;
}
.ledger-combo-list button:last-child { border-bottom: 0; }
.ledger-combo-list button:hover,
.ledger-combo-list button.is-active {
    background: var(--accent-soft);
}
.ledger-combo-list strong {
    display: block;
    font-size: 0.82rem;
}
.ledger-combo-list span {
    display: block;
    font-size: 0.7rem;
    color: var(--text-dim);
}
.ledger-combo-list .empty {
    padding: 8px 10px;
    font-size: 0.78rem;
    color: var(--text-dim);
}
.sced-pre {
    margin: 6px 0 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.85rem;
    color: var(--text);
    font-family: inherit;
}
.preview-frame {
    flex: 1;
    width: 100%;
    border: 0;
    background: #fff;
    min-height: 0;
}
.preview-empty,
.preview-wait {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 0.85rem;
    padding: 24px;
    text-align: center;
}
.preview-wait.hidden,
.preview-frame.hidden { display: none; }
.page-header .header-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}
.header-cog {
    width: 28px;
    height: 28px;
}
.header-cog .ti { font-size: 14px; }
.preview-toggle {
    display: none;
}
.action-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: -4px;
}
.strip-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.strip-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    padding: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.strip-btn:hover { background: var(--surface-3); border-color: var(--border-hover); }
.strip-btn.is-live {
    background: rgba(210, 153, 34, 0.18);
    border-color: var(--warning);
    color: var(--warning);
}
.strip-btn.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-hover);
}
.modal-branch-services { max-width: 520px; }
#branchServicesWorker[hidden] { display: none !important; }
.svc-token-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.svc-token-row input {
    flex: 1 1 180px;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
}
.svc-url {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    word-break: break-all;
    color: var(--text-muted);
}
.strip-endpoints {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}
.strip-ep {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    max-width: 100%;
}
.strip-ep:hover { border-color: var(--accent); color: var(--accent-hover); }
.strip-ep svg { flex-shrink: 0; color: var(--text-dim); }
.file-chrome { display: none; }
.file-chrome-title {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    min-width: 0;
}
.file-tree-pane {
    display: none;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--bg);
    flex-direction: column;
}
body.pane-files .file-tree-pane { display: flex; }
.file-split {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow: hidden;
}
.file-tree {
    flex: 0 0 42%;
    min-width: 140px;
    max-width: 380px;
    overflow: auto;
    padding: 10px 12px 16px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    border-right: 1px solid var(--border);
}
.file-editor {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #0d1117;
}
.file-editor[hidden] { display: none !important; }
.file-image-preview {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #0d1117;
}
.file-image-preview[hidden] { display: none !important; }
.img-edit-stage {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 12px;
    user-select: none;
}
.img-edit-canvas-wrap {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    line-height: 0;
    flex: 0 1 auto;
    overflow: hidden;
}
.img-edit-canvas-wrap canvas {
    display: block;
    background:
        linear-gradient(45deg, #161b22 25%, transparent 25%) 0 0 / 16px 16px,
        linear-gradient(45deg, transparent 75%, #161b22 75%) 8px 8px / 16px 16px,
        #0d1117;
}
.file-image-preview img {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}
.img-edit-crop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.img-edit-crop-rect {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #fff;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}
.img-edit-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 1px solid #0d1117;
    border-radius: 1px;
    pointer-events: auto;
    touch-action: none;
    z-index: 2;
}
.img-edit-handle::after {
    content: "";
    position: absolute;
    inset: -10px;
}
.img-edit-handle[data-h="nw"] { left: -6px; top: -6px; cursor: nwse-resize; }
.img-edit-handle[data-h="ne"] { right: -6px; top: -6px; cursor: nesw-resize; }
.img-edit-handle[data-h="se"] { right: -6px; bottom: -6px; cursor: nwse-resize; }
.img-edit-handle[data-h="sw"] { left: -6px; bottom: -6px; cursor: nesw-resize; }
.img-edit-handle[data-h="n"] { left: 50%; top: -6px; margin-left: -6px; cursor: ns-resize; }
.img-edit-handle[data-h="s"] { left: 50%; bottom: -6px; margin-left: -6px; cursor: ns-resize; }
.img-edit-handle[data-h="w"] { left: -6px; top: 50%; margin-top: -6px; cursor: ew-resize; }
.img-edit-handle[data-h="e"] { right: -6px; top: 50%; margin-top: -6px; cursor: ew-resize; }
.img-edit-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}
.img-edit-grid path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 0.035;
}
.img-edit-grid .img-edit-grid-shadow {
    stroke: rgba(0, 0, 0, 0.45);
    stroke-width: 0.08;
}
.img-edit-tools {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px 10px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}
.img-edit-tool-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.img-edit-tools .img-edit-tool {
    padding: 6px 10px;
    font-size: 0.75rem;
}
.img-edit-tools .img-edit-tool.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-hover);
}
@media (max-width: 720px) {
    .img-edit-tools .img-edit-tool-label { display: none; }
    .img-edit-tools .img-edit-tool {
        padding: 8px;
        min-width: 36px;
        justify-content: center;
    }
}
.img-edit-control {
    display: flex;
    align-items: center;
    gap: 8px;
}
.img-edit-control[hidden] { display: none !important; }
.img-edit-range-label {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--text-muted);
    min-width: 5em;
}
.img-edit-control input[type="range"] {
    flex: 1 1 auto;
    min-width: 0;
    accent-color: var(--accent);
    height: 18px;
}
.img-edit-range-val {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    color: var(--text);
    min-width: 3.4em;
    text-align: right;
    font-family: var(--font-mono);
}
.file-split:not(.has-editor) .file-tree {
    flex: 1 1 auto;
    max-width: 380px;
    border-right: 0;
}
.file-editor .CodeMirror {
    flex: 1 1 auto;
    height: 100%;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.45;
}
.file-editor .CodeMirror pre,
.file-editor .CodeMirror-line,
.file-editor .CodeMirror-code {
    white-space: pre !important;
    word-wrap: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}
.file-chrome-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.tree-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    opacity: 0;
}
.tree-dir summary:hover .tree-actions,
.tree-actions:focus-within {
    opacity: 1;
}
.tree-new,
.tree-mkdir,
.tree-del {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tree-new:hover,
.tree-mkdir:hover {
    background: var(--surface-3);
    color: var(--text);
}
.tree-del:hover {
    background: rgba(218, 54, 51, 0.14);
    color: var(--danger-hover);
}
@media (hover: none) {
    .tree-actions { opacity: 0.9; }
}
.page-header h1 .project-rename-btn {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}
.page-header h1 .project-rename-btn .ti {
    font-size: 14px;
}
.file-chrome-title.dirty::after {
    content: " *";
    color: var(--warning);
}
.file-chrome .nav-btn[aria-pressed="true"] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-hover);
}
.file-bulk-bar {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    padding: 8px;
    background: var(--surface);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.file-bulk-bar[hidden] { display: none !important; }
.file-bulk-acts,
.file-bulk-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.file-bulk-acts .btn,
.file-bulk-status .btn {
    width: auto;
    flex: 0 0 auto;
    padding: 6px 10px;
    font-size: 0.75rem;
}
.file-bulk-acts .btn:not(#fileBulkConcat) {
    padding: 6px 8px;
    min-width: 34px;
    justify-content: center;
}
.file-bulk-status span {
    flex: 1 1 140px;
    min-width: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.tree-dir-wrap {
    display: flex;
    align-items: center;
    gap: 0;
}
.tree-dir-wrap > .tree-dir { flex: 1; min-width: 0; }
.tree-check {
    display: none;
    flex-shrink: 0;
    margin: 0;
    padding: 0 6px 0 0;
    min-width: 0;
    min-height: 0;
    height: 14px;
    line-height: 0;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.file-tree.is-bulk .tree-check { display: inline-flex; }
.tree-check input {
    width: 13px;
    height: 13px;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
    pointer-events: none;
    vertical-align: top;
}
.tree-root {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    color: var(--text-dim);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-style: italic;
}
.tree-dir.is-dest > summary,
.tree-root.is-dest {
    background: var(--accent-soft);
    color: var(--accent-hover);
    outline: 1px solid var(--accent);
}
.file-new-drop {
    border: 1px dashed var(--border-hover);
    border-radius: var(--radius);
    padding: 16px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--surface-2);
    min-height: 72px;
}
.file-new-drop.is-over {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.file-new-drop input[type="file"] { display: none; }
.file-new-drop-label {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.8rem;
}
.file-new-progress-bar {
    height: 8px;
    background: var(--surface-3);
    border-radius: 99px;
    overflow: hidden;
}
.file-new-progress-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent);
}
.file-new-progress-text {
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-top: 4px;
}
.file-search-bar {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    padding: 8px;
    background: var(--surface);
}
.file-search-bar input[type="search"] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-family: inherit;
    line-height: 1.4;
}
.file-search-bar input[type="search"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.file-search-bar input[type="search"]::-webkit-search-decoration,
.file-search-bar input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
.tree-file {
    cursor: pointer;
}
.tree-file.active {
    background: var(--accent-soft);
    color: var(--accent-hover);
}
.tree-file.hit span,
.tree-dir.hit > summary span { color: var(--accent-hover); }
.tree-dir { margin: 1px 0; }
.tree-dir summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border-radius: var(--radius-sm);
    color: var(--text);
}
.tree-dir summary::-webkit-details-marker { display: none; }
.tree-dir summary:hover,
.tree-file:hover { background: var(--surface-2); }
.tree-dir[open] > summary { color: var(--accent-hover); }
.tree-children { margin-left: 14px; border-left: 1px solid var(--border); padding-left: 8px; }
.tree-file {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
}
.tree-file svg,
.tree-dir summary svg { flex-shrink: 0; color: var(--text-dim); }
body.pane-files .preview-chrome,
body.pane-files .preview-frame,
body.pane-files .preview-wait,
body.pane-files .preview-empty { display: none !important; }
body.pane-files .file-chrome { display: flex; }
body.pane-files .file-tree-pane { display: flex; }
body.pane-preview .file-chrome,
body.pane-preview .file-tree-pane { display: none; }
body.pane-hidden .preview-pane,
body.pane-hidden .split-handle { display: none; }
body.pane-hidden .git-pane { flex: 1 1 auto; }
.endpoint-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    transition: border-color 0.2s, background 0.2s;
}
.endpoint-row .ep-url {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    word-break: break-all;
    color: var(--text);
}
.endpoint-row .ep-status {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    white-space: nowrap;
}
.endpoint-row.pending { border-color: var(--border); }
.endpoint-row.sending { border-color: var(--accent); background: var(--accent-soft); }
.endpoint-row.ok {
    border-color: var(--success);
    background: rgba(35, 134, 54, 0.12);
}
.endpoint-row.ok .ep-status { color: #56d364; }
.endpoint-row.fail {
    border-color: var(--danger);
    background: rgba(218, 54, 51, 0.1);
}
.endpoint-row.fail .ep-status { color: var(--danger-hover); }
.distribute-modal {
    min-height: 0;
    overflow: hidden;
}
.distribute-modal > .modal-head,
.distribute-modal > .description-text,
.distribute-modal > .modal-foot {
    flex-shrink: 0;
}
.distribute-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 auto;
    max-height: 180px;
    overflow-y: auto;
}
.field-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px;
}
.page-header h1 {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.page-header h1 .path {
    color: var(--text);
}
.page-header .sub {
    color: var(--text-muted); font-size: 0.8rem; margin-top: 4px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    width: 100%;
}
.branch-pill,
.branch-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--branch-color, var(--surface-2));
    color: #fff;
    padding: 2px 8px; border-radius: 999px;
    font-weight: 500; font-size: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--branch-color, var(--border)) 65%, #000);
    font-family: var(--font-mono);
    max-width: 100%;
}
.branch-pill svg,
.branch-chip svg,
.branch-chip .ti { color: inherit; flex-shrink: 0; }
.list-item .branch-chip {
    flex: 1;
    min-width: 0;
}
.dash-branch-head .branch-chip {
    flex: 1;
    min-width: 0;
}
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
}
.card h3 {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-muted); font-weight: 600;
    display: flex; align-items: center; gap: 6px;
}
.card h3 svg { color: var(--text-dim); }
.count {
    background: var(--surface-3); color: var(--text-muted);
    padding: 1px 6px; border-radius: 10px; font-size: 0.65rem;
    font-weight: 500;
    font-family: var(--font-mono);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}
.card h3 .count {
    margin-left: auto;
    max-width: 62%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.grok-card > h3 { flex-shrink: 0; flex-wrap: nowrap; }
.grok-card > h3 .grok-head-badges,
.grok-head-badges {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.grok-card > h3 .count {
    margin-left: 0;
    max-width: none;
}
.grok-mobile-usage { display: none; }
.grok-card > h3 [data-grok-history] { flex-shrink: 0; }
.grok-zen-btn { flex-shrink: 0; }
.grok-history-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: inherit;
    font: inherit;
}
.grok-history-item:hover { border-color: var(--accent); }
.grok-history-item.is-favorite {
    background: rgba(196, 155, 48, 0.16);
    border-color: rgba(212, 175, 55, 0.42);
}
.grok-history-item.is-favorite:hover { border-color: #d4af37; }
.grok-history-main {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}
.grok-history-open {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
    text-align: left;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.grok-history-star {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    margin-top: -2px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    cursor: pointer;
}
.grok-history-star .ti { font-size: 16px; line-height: 1; }
.grok-history-star:hover {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.2);
}
.grok-history-star.is-on,
.grok-history-item.is-favorite .grok-history-star {
    color: #ffd700;
}
.grok-history-star:disabled { opacity: 0.6; cursor: wait; }
.grok-history-item strong {
    font-size: 0.88rem;
    font-weight: 600;
    white-space: pre-wrap;
    word-break: break-word;
}
.grok-history-item span {
    font-size: 0.75rem;
    color: var(--text-dim);
}
.grok-history-item.is-abandoned span { color: var(--warning); }
.grok-history-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-self: flex-start;
}
#grokHistoryList {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#grokHistoryAnswerPrompt {
    white-space: pre-wrap;
    word-break: break-word;
    padding: 8px 12px 0;
}
.grok-md {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text);
}
.grok-md > :first-child { margin-top: 0; }
.grok-md > :last-child { margin-bottom: 0; }
.grok-md h1, .grok-md h2, .grok-md h3, .grok-md h4 {
    margin: 1em 0 0.4em;
    font-weight: 650;
    line-height: 1.3;
    color: var(--text);
}
.grok-md h1 { font-size: 1.25rem; }
.grok-md h2 { font-size: 1.1rem; }
.grok-md h3 { font-size: 1rem; }
.grok-md p { margin: 0 0 0.8em; }
.grok-md ul, .grok-md ol { margin: 0 0 0.8em; padding-left: 1.3rem; }
.grok-md li { margin: 0.2em 0; }
.grok-md blockquote {
    margin: 0 0 0.8em;
    padding: 0 0 0 12px;
    border-left: 3px solid var(--border);
    color: var(--text-muted);
}
.grok-md pre, .grok-md-pre {
    margin: 0 0 0.8em;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: auto;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}
.grok-md code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--surface-3);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}
.grok-md pre code, .grok-md-pre code {
    background: none;
    padding: 0;
    font-size: inherit;
}
.grok-md a { color: var(--accent-hover); }
.grok-zen-btn[aria-pressed="true"] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-hover);
}
.grok-zen-btn .grok-zen-collapse { display: none; }
.grok-zen-btn[aria-pressed="true"] .grok-zen-expand { display: none; }
.grok-zen-btn[aria-pressed="true"] .grok-zen-collapse { display: inline-flex; }
body.grok-zen .grok-card {
    position: fixed;
    inset: 0;
    z-index: 180;
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-width: none;
    margin: 0;
    border-radius: 0;
    border: 0;
    flex: none;
    overflow: hidden;
    min-height: 0;
    gap: 8px;
    background: var(--bg);
    padding: max(4px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(4px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
}
body.grok-zen .grok-card > h3 {
    background: transparent;
    padding: 4px 4px 0;
    margin: 0;
}
body.grok-zen .grok-form {
    background: transparent;
}
body.grok-zen .grok-card .grok-thread {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}
.card.collapsible { gap: 0; }
.card.collapsible .card-head {
    cursor: pointer;
    user-select: none;
    margin: -4px 0;
    padding: 4px 0;
}
.card.collapsible .card-head .chevron {
    color: var(--text-dim);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.card.collapsible.open .card-head .chevron { transform: rotate(180deg); }
.card.collapsible .card-body {
    display: none;
    padding-top: 12px;
}
.card.collapsible.open .card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="number"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="color"], input.field-input, select, textarea {
    background: var(--bg); border: 1px solid var(--border); color: var(--text);
    padding: 8px 10px; border-radius: var(--radius-sm); width: 100%;
    min-width: 0; max-width: 100%;
    font-size: 0.85rem; font-family: inherit; transition: border-color 0.15s;
    color-scheme: dark;
}
input[type="text"]:focus, input[type="search"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="url"]:focus, input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, input.field-input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type="date"], input[type="time"], input[type="datetime-local"] {
    min-height: 38px;
    appearance: none;
    -webkit-appearance: none;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
    cursor: pointer;
    opacity: 0.7;
}
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]::-webkit-datetime-edit-text,
input[type="datetime-local"]::-webkit-datetime-edit-year-field,
input[type="datetime-local"]::-webkit-datetime-edit-month-field,
input[type="datetime-local"]::-webkit-datetime-edit-day-field,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
input[type="datetime-local"]::-webkit-datetime-edit-ampm-field {
    color: var(--text);
    padding: 0;
}
input[type="color"] {
    padding: 4px;
    height: 38px;
    cursor: pointer;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text);
    box-shadow: 0 0 0 1000px var(--bg) inset !important;
    -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important;
    border-color: var(--border) !important;
    background-color: var(--bg) !important;
    background-image: none !important;
    color: var(--text) !important;
    transition: background-color 99999s ease-out 0s, color 99999s ease-out 0s;
}
input:-moz-autofill,
input:-moz-autofill-preview {
    filter: none;
    background-color: var(--bg) !important;
    color: var(--text) !important;
}
.autofill-decoy {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 30px; }
button.btn {
    background: var(--surface-3); color: var(--text); border: 1px solid var(--border);
    padding: 8px 14px; border-radius: var(--radius-sm);
    font-weight: 500; font-size: 0.8rem; cursor: pointer;
    transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none;
}
button.btn:hover { background: var(--border-hover); border-color: var(--border-hover); }
button.btn.primary { background: var(--success); border-color: var(--success); color: #fff; }
button.btn.primary:hover { background: var(--success-hover); }
button.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger-hover); }
button.btn.danger:hover { background: var(--danger); color: #fff; }
button.btn.ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
button.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
button.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.alert {
    padding: 10px 12px; border-radius: var(--radius-sm);
    font-size: 0.8rem; border: 1px solid;
    display: flex; align-items: center; gap: 8px;
}
.alert-error { background: rgba(248, 81, 73, 0.1); border-color: var(--danger); color: var(--danger-hover); }
.alert-success { background: rgba(63, 185, 80, 0.1); border-color: var(--success); color: #56d364; }
.alert svg { flex-shrink: 0; }
.privacy-lock {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(1, 4, 9, 0.97);
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.privacy-lock[hidden] { display: none !important; }
.privacy-lock:not([hidden]) { display: flex; }
body.privacy-locked { overflow: hidden; }
.privacy-unlock {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
.privacy-unlock .ti { font-size: 30px; }
.privacy-unlock:hover {
    color: var(--text);
    border-color: var(--border-hover);
    background: var(--surface-3);
}
.sced-alarm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 12000;
    background: rgba(13, 17, 23, 0.94);
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.sced-alarm-overlay[hidden] { display: none !important; }
.sced-alarm-overlay:not([hidden]) { display: flex; }
.sced-alarm-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
    max-width: 28rem;
    width: 100%;
}
.sced-alarm-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--warning);
    animation: sced-alarm-pulse 0.82s ease-in-out infinite;
}
.sced-alarm-glyph .ti {
    font-size: 72px;
    line-height: 1;
}
.sced-alarm-card h2 {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 650;
    color: var(--text);
    line-height: 1.35;
    word-break: break-word;
}
.sced-alarm-card .btn {
    min-width: 140px;
}
@keyframes sced-alarm-pulse {
    0%, 100% { transform: scale(1); opacity: 0.72; }
    50% { transform: scale(1.12); opacity: 1; }
}
.relog-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(13, 17, 23, 0.94);
    align-items: center;
    justify-content: center;
    padding: 24px;
    cursor: pointer;
}
.relog-overlay[hidden] { display: none !important; }
.relog-overlay:not([hidden]) { display: flex; }
.relog-copy {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    line-height: 1.5;
    max-width: 28rem;
}
.relog-link {
    color: var(--accent-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.relog-link:hover {
    color: #fff;
}
.toast-stack {
    position: fixed;
    right: 16px;
    top: 16px;
    left: auto;
    bottom: auto;
    transform: none;
    z-index: 11000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: min(360px, calc(100vw - 24px));
}
.toast-stack .alert {
    pointer-events: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    animation: toast-in 0.28s ease;
    backdrop-filter: blur(8px);
}
@keyframes toast-in {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: translateY(0); }
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dash-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.dash-stat-card {
    flex: 1 1 auto;
    max-width: 300px;
    min-width: 0;
}
.file-list { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.file-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-bottom: 1px solid var(--border);
    font-size: 0.8rem; transition: background 0.1s; cursor: pointer;
}
.file-row:last-child { border-bottom: none; }
.file-row:hover { background: var(--surface-2); }
.file-row input[type="checkbox"] { width: 16px; height: 16px; }
.file-row .fname {
    flex: 1; font-family: var(--font-mono); font-size: 0.75rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text);
}
.file-row .status-tag {
    font-size: 0.6rem; padding: 2px 6px; border-radius: var(--radius-sm);
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    border: 1px solid;
}
.status-tag.warning { color: var(--warning); border-color: var(--warning); background: rgba(210, 153, 34, 0.1); }
.status-tag.success { color: #56d364; border-color: var(--success); background: rgba(35, 134, 54, 0.1); }
.status-tag.danger { color: var(--danger-hover); border-color: var(--danger); background: rgba(218, 54, 51, 0.1); }
.status-tag.info { color: var(--info); border-color: var(--info); background: rgba(56, 139, 253, 0.1); }
.status-tag.muted { color: var(--text-dim); border-color: var(--border); background: var(--surface-3); }
.conflict-card { border-color: var(--danger); background: linear-gradient(180deg, rgba(218, 54, 51, 0.03), var(--surface)); }
.conflict-card[hidden] { display: none !important; }
.ops-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 12px;
    align-items: stretch;
}
.ops-actions .btn {
    flex: 1;
    margin-top: 0;
    justify-content: center;
    min-width: 0;
}
.modal.modal-ops {
    max-width: 640px;
    width: 100%;
    max-height: min(92vh, 840px);
    overflow: hidden;
    padding: 0;
    gap: 0;
}
.modal.modal-ops .modal-scroll {
    gap: 0;
}
.ops-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0 14px;
    border-bottom: 1px solid var(--border);
}
.ops-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.ops-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}
.ops-section-head .count {
    margin-left: auto;
}
.ops-section .file-list {
    max-height: 180px;
}
.ops-section .description-text {
    margin: 0;
}
.ops-commit-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
    align-items: center;
}
.ops-commit-row input[type="text"] {
    flex: 1;
    min-width: 180px;
}
.ops-commit-row .btn { flex-shrink: 0; }
.conflict-banner-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.icon-flip svg { transform: scaleX(-1); }
.modal.modal-wide {
    width: 100%;
    max-width: 1100px;
    min-width: 0;
    height: 88vh;
    max-height: 92vh;
    height: min(88vh, calc(100dvh - 24px));
    max-height: min(92vh, calc(100dvh - 24px));
    padding: 0;
    gap: 0;
    overflow: hidden;
}
.conflict-modal {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.conflict-modal > .grok-thread,
.dash-watch-modal > .grok-thread {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 0;
    max-width: none;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.dash-watch-modal {
    min-height: 0;
    overflow: hidden;
}
.dash-watch-modal .grok-chat {
    flex: 1 1 auto;
}
.conflict-modal .modal-head h3 {
    flex: 1;
}
.grok-chat.is-spectator .grok-msg-acts {
    display: none !important;
}
body.conflict-zen #conflictModal {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}
body.conflict-zen .conflict-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    width: 100vw;
    max-width: none;
    height: 100%;
    height: 100dvh;
    max-height: none;
    min-height: 100dvh;
    margin: 0;
    border-radius: 0;
    border: 0;
    flex: none;
    background: var(--bg);
    padding: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}
body.conflict-zen .conflict-modal > .modal-head {
    background: var(--bg);
    padding: 8px 12px;
}
.conflict-modal-head {
    gap: 12px;
}
.conflict-head-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.conflict-head-main h3 {
    margin: 0;
    white-space: nowrap;
}
.conflict-path {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    word-break: break-all;
    padding: 0 2px;
}
.conflict-split {
    display: flex;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.conflict-pane {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    overflow: hidden;
}
.conflict-pane-label {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.conflict-pane-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    margin: 0;
    padding: 10px 12px;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
}
.conflict-pane-body.is-empty { color: var(--text-dim); font-style: italic; }
.conflict-file-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    flex-shrink: 0;
}
.conflict-modal-foot {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    border-top: 1px solid var(--border);
    padding-top: 10px;
    flex-shrink: 0;
}
.choice-row { display: flex; gap: 6px; flex-wrap: wrap; }
.choice-row label {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 10px; background: var(--bg);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 0.75rem; cursor: pointer; flex: 1;
    min-width: 100px; justify-content: center; transition: all 0.15s;
    color: var(--text-muted);
}
.choice-row label:hover { border-color: var(--border-hover); color: var(--text); }
.choice-row input[type="radio"] { accent-color: var(--accent); width: 12px; height: 12px; }
.choice-row label.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); }
.timeline { position: relative; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.timeline::before {
    content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px;
    width: 1px; background: var(--border);
}
.commit {
    position: relative; background: var(--surface-2); border: 1px solid var(--border);
    padding: 8px 12px; border-radius: var(--radius-sm);
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    appearance: none;
}
.commit:hover { border-color: var(--border-hover); background: var(--surface-3); }
.commit.just-committed {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.commit::before {
    content: ''; position: absolute; left: -19px; top: 50%;
    transform: translateY(-50%); width: 8px; height: 8px;
    border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--accent);
}
.commit .msg { font-weight: 500; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.commit .meta {
    font-size: 0.7rem; color: var(--text-dim);
    font-family: var(--font-mono); white-space: nowrap;
    display: flex; gap: 8px; align-items: center;
}
.commit .meta .hash { color: var(--accent-hover); }
#commitsFilter {
    width: 100%;
    padding: 6px 10px;
    font-size: 0.8rem;
}
.commits-list {
    max-height: none;
    overflow: visible;
    flex: 0 0 auto;
    min-height: 0;
}
.commits-list::-webkit-scrollbar { width: 6px; }
.commits-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.commits-list .empty { padding: 16px 8px; }
.modal-overlay {
    position: fixed; inset: 0; background: rgba(1, 4, 9, 0.8);
    display: none; justify-content: center; align-items: center;
    z-index: 200; padding: 12px;
}
.modal-overlay.open { display: flex; }
.modal-overlay.overlay-top { z-index: 260; }
.modal-head-actions { display: flex; align-items: center; gap: 4px; }
.modal-head-actions .icon-btn[aria-pressed="true"] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-hover);
}
.modal {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 0;
    width: 100%; max-width: 440px; min-width: 0;
    display: flex; flex-direction: column;
    gap: 0; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    max-height: min(92vh, calc(100dvh - 24px));
    overflow-x: hidden;
    overflow-y: auto;
}
.modal > *:not(.modal-head):not(.modal-foot):not(.modal-form):not(.modal-scroll):not(.modal-tabs):not(.grok-thread):not(.develop-chat-pane):not(.develop-commits-pane):not(.develop-refs-pane):not(.develop-files-pane) {
    padding-left: 12px;
    padding-right: 12px;
    min-width: 0;
    max-width: 100%;
}
.modal > .description-text:first-of-type,
.modal > p:first-of-type,
.modal-head + *:not(.modal-tabs):not(.grok-thread):not(.develop-chat-pane):not(.develop-commits-pane):not(.develop-refs-pane):not(.develop-files-pane):not(.modal-form):not(.modal-scroll) {
    padding-top: 8px;
}
.modal > *:not(.modal-head):not(.modal-foot):not(.grok-thread):not(.develop-chat-pane):not(.develop-commits-pane):not(.develop-refs-pane):not(.develop-files-pane):last-child {
    padding-bottom: 12px;
}
.modal.modal-connectors {
    max-width: 520px;
    width: 100%;
    max-height: min(92vh, 720px);
    overflow: hidden;
    padding: 0;
    gap: 0;
}
.modal.modal-connectors .modal-scroll {
    flex: 1;
    overflow: auto;
    min-height: 0;
    padding: 8px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.connectors-dav {
    border-top: 1px solid var(--border);
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.connectors-dav .field-input {
    width: 100%;
}
.connectors-dav h4 {
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
}
#davHint {
    white-space: pre-wrap;
}
.modal-head {
    display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; gap: 8px;
    position: sticky; top: 0; z-index: 5;
    padding: 10px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.modal-foot {
    display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px;
    flex-shrink: 0;
    position: sticky; bottom: 0; z-index: 5;
    padding: 8px 12px 12px;
    margin-top: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
}
.modal form > .mail-row-actions:last-child {
    display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px;
    flex-shrink: 0;
    padding: 8px 0 0;
    margin-top: 4px;
    border-top: 1px solid var(--border);
}
.modal-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    padding: 0 !important;
}
.modal-form > .modal-scroll,
.modal > .modal-scroll {
    flex: 1;
    overflow: auto;
    min-height: 0;
    padding: 8px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.field-scan {
    position: relative;
}
.field-scan > input,
.field-scan > .field-input {
    padding-right: 36px;
}
.field-scan-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 36px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    z-index: 1;
}
.field-scan-btn:hover { color: var(--text); }
.field-scan-btn .ti { font-size: 18px; }
.wh-scan-reader {
    width: 100%;
    min-height: 240px;
    background: #000;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.wh-scan-reader video {
    width: 100% !important;
    max-width: 100%;
}
.modal.modal-scan { max-width: 480px; width: 100%; }
.field-pair {
    display: flex;
    gap: 10px;
    grid-column: 1 / -1;
}
.field-pair > * {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.modal-head h3 {
    font-size: 0.95rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text);
    display: flex; align-items: center; gap: 8px; min-width: 0;
}
.modal-head h3 .count { flex-shrink: 0; }
.close-btn {
    background: transparent; border: none; color: var(--text-muted);
    cursor: pointer; width: 28px; height: 28px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
}
.close-btn:hover { background: var(--surface-2); color: var(--text); }
.modal-list { max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--border); padding: 8px; border-radius: var(--radius-sm); background: var(--bg); }
.modal-list-item {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--surface-2); border: 1px solid var(--border);
    padding: 6px 8px; border-radius: var(--radius-sm); gap: 8px;
}
.modal-list-item .path {
    font-family: var(--font-mono); font-size: 0.7rem;
    word-break: break-all; color: var(--text-muted); flex: 1;
}
.modal-list-item .icon-btn {
    flex-shrink: 0;
}
.icon-btn.danger {
    color: var(--danger-hover);
}
.icon-btn.danger:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}
.empty { text-align: center; padding: 24px 12px; color: var(--text-dim); font-size: 0.85rem; }
.description-text {
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-bottom: 8px;
    line-height: 1.4;
}
.description-text code {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    background: var(--surface-3);
    padding: 1px 5px;
    border-radius: 3px;
}
#usersModal .modal-users {
    max-width: 560px;
    width: 100%;
    max-height: min(90vh, calc(100dvh - 24px));
    gap: 8px;
}
#imapModal .modal-mail-settings {
    max-width: 640px;
    width: 100%;
    height: min(90vh, calc(100dvh - 24px));
    max-height: min(90vh, calc(100dvh - 24px));
    gap: 0;
    overflow: hidden;
}
.modal-tabs {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}
.modal-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-dim);
    padding: 8px 12px;
    margin-bottom: -1px;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 550;
    cursor: pointer;
    white-space: nowrap;
}
.modal-tab:hover { color: var(--text); }
.modal-tab.active {
    color: var(--text);
    border-bottom-color: var(--accent);
}
.mail-tab-panels {
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
}
.mail-tab-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-bottom: 12px;
}
.mail-tab-panel[hidden] { display: none !important; }
.mail-tab-panel > .description-text { margin-bottom: 0; }
.mail-tab-panel.op-mail-panel {
    overflow: hidden;
}
.op-mail-accounts {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 0 0 auto;
}
.op-mail-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    scrollbar-width: thin;
    padding-bottom: 2px;
}
.op-mail-tabs .empty {
    padding: 4px 0;
    white-space: nowrap;
}
.op-mail-accounts #opMailNew,
.op-mail-accounts #bankMailNew,
.op-mail-accounts #genMailCog {
    flex: 0 0 auto;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
}
.op-mail-accounts #opMailNew .ti,
.op-mail-accounts #bankMailNew .ti,
.op-mail-accounts #genMailCog .ti { font-size: 16px; }
#genMailSettings {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}
#genMailSettings[hidden] { display: none !important; }
.op-mail-tab {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 999px;
    padding: 2px 10px 2px 2px;
    max-width: 100%;
}
.op-mail-tab:not(:has(.op-mail-cog)) {
    padding-left: 10px;
}
.op-mail-tab.is-open {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.op-mail-tab.is-edit {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent);
}
.op-mail-tab .op-mail-cog {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    background: transparent;
    border-color: transparent;
    color: var(--text-dim);
}
.op-mail-tab .op-mail-cog:hover {
    color: var(--text);
    background: var(--surface-3);
    border-color: var(--border);
}
.op-mail-tab-label {
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 3px 2px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.op-mail-browse {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
}
.op-mail-browse[hidden] { display: none !important; }
.op-mail-split {
    display: flex;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
}
.op-mail-folders {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    flex: 0 0 auto;
    padding: 1px;
}
.op-mail-folder {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--folder-color, var(--border)) 55%, var(--border));
    background: color-mix(in srgb, var(--folder-color, var(--surface-3)) 22%, var(--surface-2));
    color: var(--folder-color, var(--text-muted));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.op-mail-folder .ti { font-size: 15px; }
.op-mail-folder:hover {
    background: color-mix(in srgb, var(--folder-color, var(--surface-3)) 34%, var(--surface-2));
}
.op-mail-folder.is-open {
    background: color-mix(in srgb, var(--folder-color, var(--accent)) 42%, var(--surface-2));
    box-shadow: inset 0 0 0 1px var(--folder-color, var(--accent));
}
.op-mail-msgs {
    flex: 1 1 auto;
    min-width: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.op-mail-msg {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    min-width: 0;
}
.op-mail-msg-open {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.op-mail-msg-open strong {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 600;
}
.op-mail-msg-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.op-mail-att {
    flex: 0 0 auto;
    font-size: 0.95rem;
    color: var(--text-dim);
}
.op-mail-msg-open span {
    color: var(--text-dim);
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.op-mail-msg-open:hover { background: var(--surface-3); }
.mail-settings-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}
.mail-settings-form[hidden] { display: none !important; }
.mail-settings-form-split {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    margin-top: 4px;
}
.imap-port-row,
.mail-auth-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.imap-port-row input[type="number"] { width: 90px; }
.mail-auth-row input {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}
.bank-imap-block {
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.bank-imap-block:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}
.bank-imap-block .description-text { margin-bottom: 0; }
#usersModal .description-text { margin-bottom: 0; padding-top: 0; }
.users-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
    min-width: 0;
    max-width: 100%;
}
.users-inline-form input,
.users-inline-form select {
    width: auto;
    flex: 1 1 140px;
    min-width: 0;
    max-width: 100%;
}
.users-inline-form button {
    flex: 0 0 auto;
    white-space: nowrap;
}
#usersFilter { width: 100%; max-width: 100%; }
.users-table-wrap {
    min-width: 0;
    max-width: 100%;
    min-height: 240px;
    max-height: 240px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
}
.users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.users-table thead th {
    position: sticky;
    top: 0;
    background: var(--surface-2);
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    z-index: 1;
}
.users-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.users-table tbody tr:hover { background: var(--surface-2); }
.users-table tbody tr:last-child td { border-bottom: none; }
.users-table td:last-child,
.users-table th:last-child {
    text-align: right;
    width: 1%;
    max-width: none;
}
.users-created {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}
.users-empty-row td {
    text-align: center;
    color: var(--text-dim);
    padding: 28px 10px;
    white-space: normal;
}
.grok-card {
    gap: 10px;
    flex: 0 0 auto;
    min-height: 180px;
    overflow: visible;
}
.grok-thread {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.grok-split {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.grok-split .grok-chat {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
}
.grok-thread > script {
    display: none;
}
.grok-session-ref {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--text-dim);
    font-family: var(--font-mono);
    padding: 8px 12px 0;
    line-height: 1.4;
    word-break: break-all;
}
.grok-chat {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 12px 8px;
}
body:not(.grok-zen) .git-pane-scroll .grok-card {
    max-height: calc(100dvh - var(--gitflow-topbar, 0px) - 200px);
    min-height: min(240px, calc(100dvh - var(--gitflow-topbar, 0px) - 200px));
    overflow: hidden;
}
body:not(.grok-zen) .git-pane-scroll .grok-thread,
body:not(.grok-zen) .git-pane-scroll .grok-split,
body:not(.grok-zen) .git-pane-scroll .grok-chat,
body:not(.grok-zen) .git-pane-scroll .grok-split .grok-chat,
body:not(.grok-zen) .git-pane-scroll .grok-queue-dock {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    height: auto;
}
body:not(.grok-zen) .git-pane-scroll .grok-thread,
body:not(.grok-zen) .git-pane-scroll .grok-split {
    overflow: hidden;
}
body:not(.grok-zen) .git-pane-scroll .grok-chat,
body:not(.grok-zen) .git-pane-scroll .grok-split .grok-chat,
body:not(.grok-zen) .git-pane-scroll .grok-queue-dock {
    overflow-x: hidden;
    overflow-y: auto;
    align-self: stretch;
}
body:not(.grok-zen) .git-pane-scroll .grok-form {
    position: static;
}
body.grok-zen .grok-thread,
body.grok-zen .grok-split,
body.grok-zen .grok-split .grok-chat,
body.grok-zen .grok-chat {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
body.grok-zen .grok-chat,
body.grok-zen .grok-split .grok-chat {
    overflow-y: auto;
    overflow-x: hidden;
}
body.grok-zen .grok-form { position: static; }
html.is-phone .grok-chat {
    gap: 12px;
}
.grok-chat::-webkit-scrollbar { width: 6px; }
.grok-chat::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.grok-chat .empty { padding: 28px 12px; }
.grok-msg {
    max-width: 78%;
    min-width: 0;
    border: 0;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.grok-msg.user {
    align-self: flex-end;
    background: var(--accent);
    color: #fff;
    border-radius: 14px 14px 4px 14px;
}
.grok-msg.assistant {
    align-self: flex-start;
    background: var(--surface-3);
    color: var(--text);
    border-radius: 14px 14px 14px 4px;
}
.grok-msg-wrap {
    max-width: 78%;
    width: fit-content;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.grok-msg-wrap.user,
.grok-msg-wrap.queued {
    align-self: flex-end;
    align-items: flex-end;
}
.grok-msg-wrap.assistant {
    align-self: flex-start;
    align-items: flex-start;
}
.grok-msg-wrap .grok-msg {
    max-width: 100%;
    align-self: stretch;
}
.grok-msg-acts {
    display: none;
    gap: 2px;
    flex-shrink: 0;
    padding: 0 2px;
}
html.is-phone .grok-msg-acts {
    display: flex;
}
.grok-msg-acts .icon-btn {
    width: 28px;
    height: 28px;
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
}
.grok-msg-acts .icon-btn:hover,
.grok-msg-acts .icon-btn:active {
    background: var(--surface-3);
    color: var(--text);
    border-color: var(--border-hover);
}
.grok-msg-acts .ti { font-size: 15px; }
.grok-msg-act-share { display: none; }
html.is-phone.can-share .grok-msg-act-share { display: flex; }
.grok-msg .role {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.7;
}
.grok-msg.user .role { color: #fff; }
.grok-msg.assistant .role { color: var(--text-dim); }
.grok-msg.user.queued {
    flex-direction: row;
    align-items: flex-start;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.grok-msg.user.queued .grok-queue-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.grok-msg.user.queued .dash-queue-check input {
    accent-color: #fff;
}
.grok-msg.user.queued.is-off {
    background: var(--surface-3);
    color: var(--text-dim);
    box-shadow: inset 0 0 0 1px var(--border);
}
.grok-msg.user.queued.is-off .dash-queue-check input {
    accent-color: var(--accent);
}
.grok-msg.user.queued.is-off .body,
.grok-msg.user.queued.is-off .grok-msg-who,
.grok-msg.user.queued.is-off .grok-msg-qedits {
    color: var(--text-dim);
    opacity: 0.8;
}
.grok-msg-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.grok-msg-qmeta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.grok-msg-who {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.78;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.grok-msg-qtag {
    letter-spacing: 0.06em;
    font-size: 0.58rem;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    opacity: 0.9;
}
.grok-msg-qedits {
    font-size: 0.62rem;
    opacity: 0.65;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.grok-msg-qacts {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.grok-msg-qacts .icon-btn {
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.grok-msg-qacts .icon-btn:hover {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
}
.grok-msg-qacts .icon-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.grok-msg-qacts .ti { font-size: 13px; }
#queueEditText {
    width: 100%;
    min-height: 140px;
    resize: vertical;
}
.grok-msg .stream {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.grok-msg .body {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-size: 0.85rem;
    color: inherit;
    max-width: 100%;
}
.grok-msg .thought {
    color: var(--text-dim);
    font-style: italic;
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
    opacity: 0.85;
}
.grok-msg.user .thought { color: rgba(255,255,255,0.8); }
.grok-tool {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 3px 7px;
    border-radius: 0;
    align-self: flex-start;
}
.grok-tool.done { color: #56d364; border-color: var(--success); }
.grok-tool.fail { color: var(--danger-hover); border-color: var(--danger); }
.grok-msg.working .stream > .live::after {
    content: "▍";
    color: var(--accent-hover);
    animation: grok-caret 1s step-end infinite;
}
@keyframes grok-caret {
    50% { opacity: 0; }
}
.grok-pending {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 0 2px;
    min-height: 1.15em;
}
.grok-pending span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: grok-bounce 0.9s ease-in-out infinite;
}
.grok-pending span:nth-child(2) { animation-delay: 0.12s; }
.grok-pending span:nth-child(3) { animation-delay: 0.24s; }
.grok-pending span:nth-child(4) { animation-delay: 0.36s; }
@keyframes grok-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
    40% { transform: translateY(-5px); opacity: 1; }
}
.grok-queue-dock {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    max-height: min(36vh, 280px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px 12px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}
.grok-queue-dock[hidden] {
    display: none !important;
}
.grok-queue-dock .grok-msg-wrap {
    max-width: 78%;
}
.grok-queue-handle {
    display: none;
    flex: 0 0 6px;
    cursor: col-resize;
    background: var(--border);
    position: relative;
    z-index: 3;
}
.grok-queue-handle:hover,
.grok-queue-handle.dragging {
    background: var(--accent);
}
html.is-phone .grok-thread:has(.grok-queue-dock:not([hidden])) .grok-form {
    border-top: 0;
}
html:not(.is-phone) .grok-split {
    flex-direction: row;
    align-items: stretch;
}
html:not(.is-phone) .grok-split .grok-chat {
    min-width: 160px;
    width: auto;
}
html:not(.is-phone) .grok-split:has(.grok-queue-dock:not([hidden])) .grok-queue-handle {
    display: block;
}
html:not(.is-phone) .grok-queue-dock:not([hidden]) {
    flex: 0 0 var(--grok-queue-width, 32%);
    width: var(--grok-queue-width, 32%);
    min-width: 160px;
    max-width: 62%;
    max-height: none;
    height: auto;
    align-self: stretch;
    align-items: stretch;
    border-top: 0;
    border-left: 0;
}
html:not(.is-phone) body:not(.grok-zen) .git-pane-scroll .grok-queue-dock:not([hidden]) {
    flex: 0 0 var(--grok-queue-width, 32%);
    width: var(--grok-queue-width, 32%);
    max-width: 62%;
    min-width: 160px;
    min-height: 0;
    max-height: none;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    align-self: stretch;
}
body.grok-zen .git-pane-scroll .grok-queue-dock:not([hidden]) {
    overflow-x: hidden;
    overflow-y: auto;
    align-self: stretch;
    max-height: none;
    height: auto;
}
html:not(.is-phone) .grok-queue-dock .grok-msg-wrap {
    max-width: 100%;
    align-self: stretch;
}
html:not(.is-phone) .grok-queue-dock .grok-msg-wrap.queued {
    align-items: stretch;
}
@media (max-width: 1024px) {
    html:not(.is-phone) .grok-split {
        flex-direction: column;
    }
    html:not(.is-phone) .grok-split:has(.grok-queue-dock:not([hidden])) .grok-queue-handle {
        display: none;
    }
    html:not(.is-phone) .grok-queue-dock:not([hidden]) {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        min-width: 0;
        max-height: min(36vh, 280px);
        border-top: 1px solid var(--border);
        align-items: flex-end;
    }
    html:not(.is-phone) body:not(.grok-zen) .git-pane-scroll .grok-queue-dock:not([hidden]) {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        min-width: 0;
        min-height: 0;
        max-height: min(36vh, 280px);
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
        align-self: flex-end;
    }
    html:not(.is-phone) .grok-queue-dock .grok-msg-wrap {
        max-width: 78%;
    }
}
.grok-form {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: flex-end;
    padding: 8px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
    min-width: 0;
}
.grok-form textarea {
    flex: 1;
    width: auto;
    min-width: 0;
    min-height: 38px;
    max-height: 180px;
    resize: none;
    overflow-y: auto;
    line-height: 1.4;
    border-radius: 18px;
    padding: 8px 12px;
}
.grok-form-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: flex-end;
}
.grok-form button {
    flex-shrink: 0;
    border-radius: 18px;
    height: 38px;
    padding: 0 14px;
}
.grok-form .grok-clear-btn,
.grok-form .grok-lock-btn {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 18px;
}
.grok-auto-send {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 2px;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 550;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.grok-auto-send:hover { color: var(--text); }
.grok-auto-send input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}
.modal.modal-wide.develop-modal,
.develop-modal {
    width: 100%;
    max-width: 1100px;
    gap: 0;
    padding: 0;
    min-height: 0;
    overflow: hidden;
}
.develop-modal > .modal-head {
    margin: 0;
    border-radius: 0;
}
.develop-modal > .develop-chat-pane,
.develop-modal > .develop-commits-pane,
.develop-modal > .develop-files-pane {
    margin: 0;
    padding: 0;
    max-width: none;
}
.develop-modal > .develop-refs-pane {
    margin: 0;
    padding: 12px;
    max-width: none;
    overflow: auto;
}
.develop-modal .grok-thread {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    border: 0;
    border-radius: 0;
    background: var(--bg);
    margin: 0;
    padding: 0;
}
.develop-modal .grok-session-ref {
    padding: 6px 12px;
}
.develop-modal .grok-split {
    flex: 1 1 auto;
    min-height: 0;
}
.develop-modal .grok-chat,
.develop-modal .grok-split .grok-chat {
    min-height: 0;
    overflow-y: auto;
    padding: 8px 10px;
}
.develop-modal .grok-form {
    border-radius: 0;
    margin: 0;
    padding: 8px 12px;
}
.develop-modal .grok-queue-dock {
    padding-left: 8px;
    padding-right: 8px;
}
body.develop-zen #developModal {
    padding: 0;
    inset: 0;
    align-items: stretch;
    justify-content: stretch;
}
body.develop-zen .modal.modal-wide.develop-modal,
body.develop-zen .develop-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    width: 100vw;
    max-width: none;
    height: 100%;
    height: 100dvh;
    max-height: none;
    min-height: 100dvh;
    margin: 0;
    border-radius: 0;
    border: 0;
    flex: none;
    background: var(--bg);
    padding: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}
body.develop-zen .develop-modal > .modal-head {
    background: var(--bg);
}
body.develop-zen .grok-form {
    background: transparent;
}
.develop-chat-pane,
.develop-commits-pane,
.develop-refs-pane,
.develop-files-pane {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.develop-chat-pane[hidden],
.develop-commits-pane[hidden],
.develop-refs-pane[hidden],
.develop-files-pane[hidden] {
    display: none !important;
}
.develop-refs-pane form {
    flex: 1 1 auto;
    min-height: 0;
}
.develop-refs-pane .ref-pick-block,
.develop-refs-pane .ref-pick-wrap {
    flex: 1 1 auto;
    min-height: 0;
}
.develop-refs-pane .ref-pick-list {
    max-height: none;
    flex: 1 1 auto;
    overflow: auto;
}
.develop-commits-pane .timeline {
    flex: 1 1 auto;
    min-height: 160px;
    overflow: auto;
    margin: 4px 8px 8px;
}
.gf-inspect-hint {
    flex-shrink: 0;
    margin: 0;
    padding: 8px 12px 4px;
    font-size: 0.75rem;
    color: var(--text-dim);
}
.gf-inspect-cols,
.gf-inspect-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px 4.75rem;
    gap: 8px;
    align-items: center;
}
.gf-inspect-cols {
    flex-shrink: 0;
    padding: 4px 12px;
    font-size: 0.68rem;
    font-family: var(--font-sans);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border);
}
.gf-inspect-cols span:last-child,
.gf-inspect-size {
    text-align: right;
}
.gf-inspect-tree {
    flex: 1 1 auto;
    min-height: 160px;
    overflow: auto;
    margin: 0 4px 8px;
    padding: 4px 4px 8px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
}
.gf-inspect-dir {
    margin: 0;
}
.gf-inspect-dir > summary {
    list-style: none;
    cursor: pointer;
}
.gf-inspect-dir > summary::-webkit-details-marker {
    display: none;
}
.gf-inspect-row {
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    color: var(--text);
}
.gf-inspect-dir > summary:hover,
.gf-inspect-file:hover {
    background: var(--surface-2);
}
.gf-inspect-dir[open] > summary {
    color: var(--accent-hover);
}
.gf-inspect-root {
    font-weight: 600;
    color: var(--text);
}
.gf-inspect-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.gf-inspect-name > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gf-inspect-name .ti {
    flex-shrink: 0;
    font-size: 14px;
    color: var(--text-dim);
}
.gf-inspect-dir[open] > summary .ti-folder {
    display: none;
}
.gf-inspect-dir > summary .ti-folder-open {
    display: none;
}
.gf-inspect-dir[open] > summary .ti-folder-open {
    display: inline-flex;
}
.gf-inspect-mtime,
.gf-inspect-size {
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.gf-inspect-file {
    cursor: default;
}
.develop-modal .grok-form-actions {
    flex-shrink: 0;
}
.commit-detail-meta {
    font-size: 0.75rem;
    color: var(--text-dim);
    font-family: var(--font-mono);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}
.commit-detail-meta .hash { color: var(--accent-hover); }
.commit-detail-body {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 0.8rem;
    font-family: var(--font-mono);
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
    max-height: 240px;
    overflow-y: auto;
    min-height: 48px;
}
@media (max-width: 1024px) {
    :root { --gitflow-topbar: calc(48px + env(safe-area-inset-top, 0px)); }
    .mobile-topbar { display: flex; }
    html, body {
        height: var(--app-height, 100svh);
        max-height: var(--app-height, 100svh);
    }
    body:not(.login-page):not(.share-page) { padding-top: var(--gitflow-topbar); }
    .app-shell,
    main.workspace,
    .git-pane {
        height: 100%;
        min-height: 0;
        max-height: 100%;
    }
    .marek {
        right: 10px;
        bottom: 10px;
    }
    #projectView {
        overflow: visible;
    }
    .git-pane-scroll {
        padding: 16px;
        scrollbar-width: thin;
        scrollbar-color: var(--border) transparent;
    }
    .git-pane-scroll::-webkit-scrollbar { display: block; width: 8px; }
    .git-pane-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
    .grok-card { min-height: 200px; }
    .mobile-topbar { z-index: 120; }
    .overlay {
        z-index: 110;
        top: var(--gitflow-topbar);
    }
    aside#sidebar {
        position: fixed;
        top: var(--gitflow-topbar);
        left: 0;
        bottom: 0;
        height: auto;
        z-index: 115;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 4px 0 16px rgba(0,0,0,0.4);
    }
    body.sidebar-open aside#sidebar { transform: translateX(0); }
    aside.right-aside {
        position: fixed;
        top: var(--gitflow-topbar);
        right: 0;
        left: auto;
        bottom: 0;
        height: auto;
        width: 48px;
        z-index: 115;
        transform: translateX(100%);
        transition: transform 0.2s ease;
        box-shadow: -4px 0 16px rgba(0,0,0,0.4);
    }
    body.rails-open aside.right-aside { transform: translateX(0); }
    main.workspace { height: 100%; }
    .git-pane { flex: 1 1 auto; min-width: 0; padding: 0; }
    .split-handle { display: none; }
    .preview-toggle { display: inline-flex; }
    .preview-pane {
        position: fixed;
        top: var(--gitflow-topbar);
        right: 0;
        bottom: 0;
        height: auto;
        width: min(100%, 480px);
        z-index: 96;
        transform: translateX(100%);
        transition: transform 0.22s ease;
        box-shadow: -4px 0 16px rgba(0,0,0,0.4);
        border-left: 1px solid var(--border);
    }
    body.preview-open .preview-pane { transform: translateX(0); }
    body.pane-hidden .preview-pane { display: flex; transform: translateX(100%); }
    body.pane-hidden.preview-open .preview-pane { transform: translateX(0); }
    .wasm-pane { top: var(--gitflow-topbar); }
    .grid-2 { grid-template-columns: 1fr; }
    .conflict-split { flex-direction: column; }
    .grok-mobile-usage:not(:empty) { display: inline; }
    .sced-body { padding: 12px; }
    .sced-cal-day {
        min-height: 48px;
        padding: 4px 3px;
    }
}
@media (max-width: 600px) {
    .users-inline-form button { flex: 1 1 100%; }
    .grok-form { flex-wrap: wrap; }
    .grok-form textarea { flex: 1 1 100%; }
    .grok-form-actions { width: 100%; justify-content: flex-end; }
    .grok-form .grok-auto-send { margin-right: auto; }
    .conflict-split { flex-direction: column; }
    .conflict-modal-foot { justify-content: stretch; }
    .conflict-modal-foot .btn, .conflict-file-actions .btn { flex: 1 1 auto; }
    .page-header h1 { font-size: 1rem; }
    .commit { flex-direction: column; align-items: flex-start; }
    .action-strip { flex-direction: column; align-items: stretch; }
    .strip-endpoints { flex-direction: column; align-items: stretch; }
    .strip-ep { border-radius: var(--radius-sm); }
    .file-split { flex-direction: column; }
    .file-tree {
        flex: 0 0 36%;
        max-width: 380px;
        border-right: 0;
        border-top: 1px solid var(--border);
        order: 2;
    }
    .file-editor { order: 1; min-height: 180px; }
    .file-editor:has(#fileImagePreview:not([hidden])) { min-height: 280px; }
    .sced-body { padding: 10px 8px 16px; }
    .sced-cal-toolbar {
        gap: 6px 8px;
    }
    .sced-cal-filter-link {
        padding: 4px 10px;
        font-size: 0.75rem;
    }
    .sced-cal-day {
        min-height: 42px;
        padding: 3px 2px;
    }
    .sced-day-list .sced-row {
        padding: 8px 10px;
    }
}
.ti {
    font-size: 15px;
    line-height: 1;
    width: 1em;
    height: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.strip-btn .ti,
.nav-btn .ti,
.icon-btn .ti,
.hamburger .ti,
.close-btn .ti { font-size: 16px; }
.card h3 .ti,
.branch-pill .ti,
.file-chrome-title .ti { font-size: 14px; }
.logo .ti { font-size: 18px; }
.spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: wasm-spin 0.7s linear infinite;
}
@keyframes wasm-spin { to { transform: rotate(360deg); } }
.wasm-busy {
    position: absolute;
    top: 22px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: rgba(1, 4, 9, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}
.wasm-busy[hidden] { display: none !important; }
.wasm-busy-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    min-width: 220px;
}
.wasm-busy-card p { font-size: 0.85rem; color: var(--text-muted); }
.wasm-pane {
    position: fixed;
    inset: 0;
    z-index: 420;
    background: var(--bg);
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    pointer-events: none;
    overscroll-behavior: none;
}
body.wasm-open {
    overscroll-behavior: none;
}
.wasm-pane.open {
    transform: translateY(0);
    pointer-events: auto;
}
.wasm-handle {
    flex: 0 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--surface-2);
    border: 0;
    border-bottom: 1px solid var(--border);
    width: 100%;
    padding: 0;
    margin: 0;
    color: inherit;
    appearance: none;
    -webkit-appearance: none;
    touch-action: none;
    user-select: none;
}
.wasm-handle::after {
    content: "";
    width: 42px;
    height: 4px;
    border-radius: 4px;
    background: var(--border-hover);
}
.wasm-handle:hover::after,
.wasm-handle:focus-visible::after {
    background: var(--text-muted);
}
.wasm-frame {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    background: var(--bg);
}
.share-links-modal {
    max-width: 720px;
    max-height: min(88vh, calc(100dvh - 24px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.share-links-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
    min-height: 0;
    flex: 1;
    margin-top: 10px;
}
.share-link-card {
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.share-link-card.is-live {
    border-color: var(--warning);
    background: rgba(210, 153, 34, 0.1);
}
.share-link-top {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.share-link-url {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    word-break: break-all;
    color: var(--text);
}
.share-link-meta {
    font-size: 0.72rem;
    color: var(--text-dim);
}
.share-links-modal .modal-tabs {
    padding: 0 12px;
}
body.share-preview-page.share-preview-live {
    background: #fff;
}
body.share-preview-page.share-preview-live .share-shell {
    max-width: none;
    padding: 0;
    gap: 0;
    height: 100%;
    position: relative;
}
body.share-preview-page.share-preview-live .share-head,
body.share-preview-page.share-preview-live .share-gate,
body.share-preview-page.share-preview-live .share-ended {
    display: none !important;
}
.share-preview-work {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}
body.share-preview-page.share-preview-live .share-preview-work {
    position: absolute;
    inset: 0;
}
body.share-preview-page.share-preview-live .share-wasm-frame {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}
.share-wasm-status {
    position: absolute;
    z-index: 2;
    left: 12px;
    top: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 0.8rem;
}
.share-wasm-status[hidden] { display: none !important; }
.share-wasm-frame {
    flex: 1;
    min-height: 0;
    width: 100%;
    border: 0;
    background: #0d1117;
}
.share-link-card.is-live .share-link-url { color: var(--warning); }
.share-link-acts {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.share-link-sent {
    color: var(--text-dim);
    font-size: 0.72rem;
    white-space: nowrap;
}
.share-send-emails {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.share-send-email {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    cursor: pointer;
    font-size: 0.85rem;
}
.share-send-email:hover { border-color: var(--border-hover); }
.share-send-email:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.share-send-email input { accent-color: var(--accent); }
.share-visit {
    font-size: 0.78rem;
    color: var(--text-dim);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0 0;
    border-top: 1px solid var(--border);
}
.share-visit.is-live { color: var(--warning); }
.share-visit-meta { color: var(--text); }
.share-visit.is-live .share-visit-meta { color: var(--warning); }
.share-visit-files {
    margin: 4px 0 0;
    padding-left: 18px;
}
.share-visit-ended { font-size: 0.72rem; }
.share-visit .btn { align-self: flex-start; width: auto; margin-top: 6px; }
.share-links-modal .mail-row-actions {
    justify-content: flex-start;
    flex-shrink: 0;
}
.share-links-modal .mail-row-actions .btn,
.share-links-modal .btn {
    width: auto;
    flex: 0 0 auto;
    align-self: flex-start;
}
body.share-page {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
    padding: 0 !important;
}
.share-shell {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 24px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.share-head { flex-shrink: 0; }
.share-head h1 { font-size: 1.2rem; }
.share-head p {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-dim);
}
.share-gate { flex-shrink: 0; }
.share-gate form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    max-width: 420px;
}
.share-gate form input[type="text"] { width: 100%; }
.share-gate form .btn {
    width: auto;
    align-self: flex-start;
    margin-top: 4px;
}
.share-gate-error {
    color: var(--danger-hover);
    font-size: 0.85rem;
}
.share-work {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.share-work > .description-text,
.share-target {
    flex-shrink: 0;
}
body.share-contact-page .share-shell {
    overflow: auto;
}
.share-contact-work {
    overflow: auto;
}
.share-contact-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    max-width: 420px;
}
.share-contact-form .field-label { margin: 0; }
.share-contact-form .field-input,
.share-contact-form textarea.field-input {
    width: 100%;
}
.share-contact-form .btn {
    width: auto;
    align-self: flex-start;
    margin-top: 4px;
}
.share-target {
    font-size: 0.82rem;
    color: var(--text-muted);
}
.share-tree {
    flex: 0 1 34%;
    min-height: 140px;
    max-height: 36vh;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    overflow: auto;
}
.share-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    font-size: 0.85rem;
}
.share-folder { cursor: pointer; }
.share-folder:hover { background: var(--surface-2); }
.share-folder.is-target {
    background: var(--accent-soft);
    color: var(--accent-hover);
}
.share-file {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.share-file:hover,
.share-file.is-open { background: var(--surface-2); }
.share-ads-split {
    display: grid;
    grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
    flex: 1;
}
.share-ads-side,
.share-ads-pane {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.share-ads-page .share-tree {
    flex: 1 1 auto;
    max-height: none;
}
.share-ads-pane {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    overflow: hidden;
}
.share-ads-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid var(--border);
}
.share-ads-bar strong {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
}
.share-ads-view {
    flex: 1;
    min-height: 220px;
    overflow: auto;
    padding: 8px;
}
.share-ads-editor {
    width: 100%;
    min-height: 280px;
    height: 100%;
    resize: vertical;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.82rem;
    line-height: 1.45;
}
.share-ads-preview,
.share-ads-frame {
    display: block;
    width: 100%;
    max-height: 70vh;
    border: 0;
    background: var(--bg);
}
.share-ads-frame { height: 70vh; }
@media (max-width: 800px) {
    .share-ads-split { grid-template-columns: 1fr; }
}
.share-dir { display: block; }
.share-dir > summary { list-style: none; }
.share-dir > summary::-webkit-details-marker { display: none; }
.share-drop {
    flex: 1 1 auto;
    min-height: 180px;
    margin-top: 16px;
    border: 1px dashed var(--border-hover);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--surface-2);
}
.share-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.share-drop input[type="file"] { display: none; }
.share-drop-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
}
.share-drop-label:hover {
    background: var(--border-hover);
    border-color: var(--border-hover);
}
.share-progress,
.share-log { flex-shrink: 0; }
.share-progress-bar {
    height: 8px;
    background: var(--surface-3);
    border-radius: 99px;
    overflow: hidden;
}
.share-progress-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent);
}
.share-progress-text {
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-top: 4px;
}
.share-log {
    font-size: 0.78rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.share-log .ok { color: var(--success-hover); }
.share-log .err { color: var(--danger-hover); }
.share-ended {
    padding: 24px;
    text-align: center;
    color: var(--warning);
}