/* 2026-09-06: low-glare midnight palette and four-card graffiti treatment. */

/* Every theme keeps its own palette while the four workflow cards get distinct paint clouds. */
:root[data-theme]{--metric-graffiti-opacity:.58;--metric-graffiti-saturation:.92}
.metrics .metric{position:relative;isolation:isolate;overflow:hidden!important;background:linear-gradient(145deg,color-mix(in srgb,var(--theme-surface) 94%,transparent),var(--theme-surface))!important;border-color:color-mix(in srgb,var(--theme-line) 88%,transparent)!important;box-shadow:0 12px 30px color-mix(in srgb,var(--theme-text) 8%,transparent)!important}
.metrics .metric>*{position:relative;z-index:2}
.metrics .metric:before{content:"";position:absolute;z-index:0;inset:-34%;pointer-events:none;background:var(--metric-graffiti);filter:blur(15px) saturate(var(--metric-graffiti-saturation));opacity:var(--metric-graffiti-opacity);transform:rotate(-7deg) scale(1.04)}
.metrics .metric:after{content:"";position:absolute;z-index:1;inset:8px;pointer-events:none;border-radius:12px;background:radial-gradient(ellipse at 83% 15%,transparent 0 35%,rgba(255,255,255,.42) 36%,transparent 38%),radial-gradient(ellipse at 8% 112%,transparent 0 48%,rgba(255,255,255,.3) 49%,transparent 51%);opacity:.3;mix-blend-mode:soft-light}
.metrics .metric.open{--metric-graffiti:radial-gradient(circle at 77% 30%,rgba(235,83,169,.78) 0 14%,transparent 38%),radial-gradient(ellipse at 27% 84%,rgba(157,101,224,.65) 0 18%,transparent 44%),radial-gradient(circle at 18% 6%,rgba(255,190,156,.54) 0 10%,transparent 34%)}
.metrics .metric.progress{--metric-graffiti:radial-gradient(circle at 79% 37%,rgba(47,201,211,.82) 0 17%,transparent 43%),radial-gradient(ellipse at 20% 87%,rgba(75,137,230,.67) 0 18%,transparent 45%),radial-gradient(circle at 10% 8%,rgba(183,128,235,.45) 0 11%,transparent 34%)}
.metrics .metric.done{--metric-graffiti:radial-gradient(circle at 78% 62%,rgba(238,119,66,.77) 0 17%,transparent 42%),radial-gradient(ellipse at 25% 15%,rgba(139,100,218,.6) 0 15%,transparent 42%),radial-gradient(circle at 12% 92%,rgba(245,177,84,.48) 0 9%,transparent 31%)}
.metrics .metric.all{--metric-graffiti:radial-gradient(circle at 75% 28%,rgba(115,169,187,.66) 0 17%,transparent 43%),radial-gradient(ellipse at 24% 78%,rgba(126,139,164,.57) 0 20%,transparent 47%),radial-gradient(circle at 8% 9%,rgba(194,209,204,.52) 0 12%,transparent 34%)}
.metrics .metric strong{letter-spacing:-.04em;text-shadow:0 1px 0 color-mix(in srgb,var(--theme-surface) 36%,transparent)}
.metrics .metric .metric-icon{border:1px solid color-mix(in srgb,currentColor 20%,transparent);background:color-mix(in srgb,var(--theme-surface) 66%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}

/* Midnight uses warm charcoal layers instead of blue-black panels and luminous purple borders. */
:root[data-theme="midnight"]{--theme-bg:#080a0a;--theme-bg-2:#0b0e0d;--theme-surface:#111414;--theme-surface-glass:#111414;--theme-soft:#171b19;--theme-text:#dce2de;--theme-muted:#89928d;--theme-primary:#4aa47d;--theme-primary-2:#2d7257;--theme-accent:#79b99c;--theme-line:#282e2b;--theme-shadow:0 14px 38px rgba(0,0,0,.3);--theme-mix-base:#111414;--theme-art:radial-gradient(circle at 84% 0,rgba(74,164,125,.055),transparent 28%),radial-gradient(circle at 18% 95%,rgba(121,185,156,.035),transparent 31%),linear-gradient(145deg,#070909,#0a0d0c);--metric-graffiti-opacity:.27;--metric-graffiti-saturation:.72}
:root[data-theme="midnight"] body,:root[data-theme="midnight"] .app-shell:before{background:var(--theme-art)!important}
:root[data-theme="midnight"] .sidebar,:root[data-theme="midnight"] .topbar,:root[data-theme="midnight"] .workspace,:root[data-theme="midnight"] .modal,:root[data-theme="midnight"] .drawer,:root[data-theme="midnight"] .ticket-detail-drawer,:root[data-theme="midnight"] .ticket-detail-drawer .detail-drawer-scroll,:root[data-theme="midnight"] .profile-settings-card,:root[data-theme="midnight"] .person-card-v2,:root[data-theme="midnight"] .shop-card,:root[data-theme="midnight"] .account-create-v2,:root[data-theme="midnight"] .editor-ticket-filter,:root[data-theme="midnight"] .multi-picker-panel,:root[data-theme="midnight"] .assignment-panel,:root[data-theme="midnight"] .workflow-videos,:root[data-theme="midnight"] .name-style-card,:root[data-theme="midnight"] .name-style-preview{background:#111414!important;border-color:#282e2b!important;color:var(--theme-text)!important;box-shadow:var(--theme-shadow)!important}
:root[data-theme="midnight"] .workspace-head,:root[data-theme="midnight"] .filters,:root[data-theme="midnight"] .table th,:root[data-theme="midnight"] .table td,:root[data-theme="midnight"] .today,:root[data-theme="midnight"] .person-card-v2 .person-actions,:root[data-theme="midnight"] .profile-mini-facts,:root[data-theme="midnight"] .profile-mini-facts>div+div,:root[data-theme="midnight"] .profile-card-head{border-color:#252a28!important}
:root[data-theme="midnight"] .table th{background:#0d100f!important;color:#858e89!important}
:root[data-theme="midnight"] .table td{color:#cfd5d1!important}
:root[data-theme="midnight"] .ticket-row:hover{background:#151a18!important}
:root[data-theme="midnight"] .search,:root[data-theme="midnight"] .field input,:root[data-theme="midnight"] .field textarea,:root[data-theme="midnight"] .field select,:root[data-theme="midnight"] .account-create-v2 input,:root[data-theme="midnight"] .account-create-v2 select,:root[data-theme="midnight"] .shop-create-page input,:root[data-theme="midnight"] .profile-compact-form select,:root[data-theme="midnight"] .profile-password-form input,:root[data-theme="midnight"] .multi-picker-trigger,:root[data-theme="midnight"] .video-head-toolbar input,:root[data-theme="midnight"] .video-url-field,:root[data-theme="midnight"] .workflow-videos .video-note-panel textarea{background:#0c0f0e!important;border-color:#2b322f!important;color:#dce2de!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important}
:root[data-theme="midnight"] input::placeholder,:root[data-theme="midnight"] textarea::placeholder{color:#626b66!important}
:root[data-theme="midnight"] .field input:focus,:root[data-theme="midnight"] .field textarea:focus,:root[data-theme="midnight"] .field select:focus,:root[data-theme="midnight"] .search:focus-within,:root[data-theme="midnight"] .multi-picker-trigger:focus-visible{border-color:#4b9272!important;box-shadow:0 0 0 3px rgba(74,164,125,.12)!important}
:root[data-theme="midnight"] .chip,:root[data-theme="midnight"] .secondary,:root[data-theme="midnight"] .date-preset,:root[data-theme="midnight"] .range-popover summary,:root[data-theme="midnight"] .theme-trigger,:root[data-theme="midnight"] .ticket-copy-actions button,:root[data-theme="midnight"] .ticket-copy-actions a,:root[data-theme="midnight"] .ticket-page-controls button{background:#171b19!important;border-color:#2c332f!important;color:#a4bdb1!important;box-shadow:none!important}
:root[data-theme="midnight"] .chip:hover,:root[data-theme="midnight"] .secondary:hover,:root[data-theme="midnight"] .date-preset:hover,:root[data-theme="midnight"] .range-popover summary:hover,:root[data-theme="midnight"] .theme-trigger:hover,:root[data-theme="midnight"] .ticket-copy-actions button:hover,:root[data-theme="midnight"] .ticket-copy-actions a:hover{background:#1a211e!important;border-color:#385345!important;color:#c2d9ce!important;box-shadow:none!important}
:root[data-theme="midnight"] .chip.active,:root[data-theme="midnight"] .date-preset.active,:root[data-theme="midnight"] .range-popover summary.active,:root[data-theme="midnight"] .range-popover[open] summary,:root[data-theme="midnight"] .ticket-scope-switch button.active{background:linear-gradient(135deg,#315f4c,#234b3b)!important;border-color:#477961!important;color:#e1ebe6!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important}
:root[data-theme="midnight"] .nav button{color:#8b948f!important}
:root[data-theme="midnight"] .nav button:hover,:root[data-theme="midnight"] .nav button.active{background:linear-gradient(90deg,rgba(74,164,125,.14),transparent)!important;color:#c5d5cd!important}
:root[data-theme="midnight"] .nav i,:root[data-theme="midnight"] .eyebrow,:root[data-theme="midnight"] .ticket-button code,:root[data-theme="midnight"] .detail-video-overview span,:root[data-theme="midnight"] .detail-video-top a,:root[data-theme="midnight"] .video-reference-text{color:#77b696!important}
:root[data-theme="midnight"] .topbar h1,:root[data-theme="midnight"] .workspace h2,:root[data-theme="midnight"] .metric strong,:root[data-theme="midnight"] .ticket-button,:root[data-theme="midnight"] .person-summary-v2 b,:root[data-theme="midnight"] .profile-card-head h3,:root[data-theme="midnight"] .ticket-fact b,:root[data-theme="midnight"] .detail-section-title h3{color:#e1e6e3!important}
:root[data-theme="midnight"] .brand-sub,:root[data-theme="midnight"] .sidebar-status,:root[data-theme="midnight"] .muted,:root[data-theme="midnight"] .meta,:root[data-theme="midnight"] .metric p,:root[data-theme="midnight"] .metric small,:root[data-theme="midnight"] .ticket-button small,:root[data-theme="midnight"] .table .date,:root[data-theme="midnight"] .person-summary-v2 small,:root[data-theme="midnight"] .ticket-fact span{color:#87908b!important}
:root[data-theme="midnight"] .person-controls-v2,:root[data-theme="midnight"] .multi-picker-option,:root[data-theme="midnight"] .operator-picker-option,:root[data-theme="midnight"] .operator-filter-card,:root[data-theme="midnight"] .collection-product-tabs,:root[data-theme="midnight"] .collection-product-picker,:root[data-theme="midnight"] .collection-current-title,:root[data-theme="midnight"] .ticket-status-segment,:root[data-theme="midnight"] .date-range-selection,:root[data-theme="midnight"] .video-card.compact-entry,:root[data-theme="midnight"] .detail-video-card,:root[data-theme="midnight"] .ticket-fact{background:#161a18!important;border-color:#2a302d!important;color:#cfd5d1!important;box-shadow:none!important}
:root[data-theme="midnight"] .multi-picker-option:hover,:root[data-theme="midnight"] .multi-picker-option:has(input:checked),:root[data-theme="midnight"] .operator-picker-option:hover,:root[data-theme="midnight"] .operator-picker-option.selected,:root[data-theme="midnight"] .operator-filter-card:hover,:root[data-theme="midnight"] .operator-filter-card.selected,:root[data-theme="midnight"] .collection-product-chip:hover{background:#1a251f!important;border-color:#3b5d4c!important;color:#d7e3dd!important;box-shadow:none!important}
:root[data-theme="midnight"] .collection-product-chip{background:#171b19!important;border-color:#303632!important;color:#a7b0ab!important}
:root[data-theme="midnight"] .collection-product-chip.active{background:linear-gradient(135deg,#35654f,#28503f)!important;border-color:#4b8067!important;color:#e5eee9!important;box-shadow:none!important}
:root[data-theme="midnight"] .ticket-pagination{background:#101312!important;border-color:#252a28!important;box-shadow:0 -10px 22px rgba(0,0,0,.16)!important}
:root[data-theme="midnight"] .primary{background:linear-gradient(135deg,#3f8c69,#2f6f55)!important;box-shadow:0 7px 17px rgba(32,101,74,.18)!important;color:#f0f5f2!important}
:root[data-theme="midnight"] .profile-identity-card{background:radial-gradient(circle at 50% 0,rgba(74,164,125,.11),transparent 44%),linear-gradient(155deg,#151a18,#101312)!important}
:root[data-theme="midnight"] .ticket-brief-inline,:root[data-theme="midnight"] .ticket-detail-drawer .detail-description-section{background:linear-gradient(135deg,#13201a,#151a18)!important;border-color:#315443!important;box-shadow:none!important}
:root[data-theme="midnight"] .ticket-brief-field textarea,:root[data-theme="midnight"] .ticket-detail-drawer .detail-description-section .detail-text,:root[data-theme="midnight"] .detail-video-card.compact .detail-video-note-text{background:#101915!important;border-color:#315443!important;color:#a9cbbb!important;box-shadow:none!important}
:root[data-theme="midnight"] .metrics .metric{background:linear-gradient(145deg,#151817,#111413)!important;border-color:#2a302d!important;box-shadow:0 12px 30px rgba(0,0,0,.24)!important}
:root[data-theme="midnight"] .metrics .metric:after{opacity:.14}

@media(max-width:680px){.metrics .metric:before{inset:-24%;filter:blur(12px)}.metrics .metric:after{display:none}}
@media(prefers-reduced-motion:reduce){.metrics .metric:before{transform:none}}

/* 2026-09-06 second art pass: softer, more organic paint clouds. */
:root[data-theme]{
  --metric-graffiti-opacity:.44;
  --metric-graffiti-saturation:.82;
  --metric-graffiti-blur:24px;
  --metric-open-a:color-mix(in srgb,var(--theme-primary) 32%,#f7b8cc 68%);
  --metric-open-b:color-mix(in srgb,var(--theme-accent) 28%,#cbb7ed 72%);
  --metric-open-c:color-mix(in srgb,var(--theme-primary-2) 20%,#f5cfb8 80%);
  --metric-progress-a:color-mix(in srgb,var(--theme-accent) 42%,#a7e5e3 58%);
  --metric-progress-b:color-mix(in srgb,var(--theme-primary-2) 32%,#a9c9ee 68%);
  --metric-progress-c:color-mix(in srgb,var(--theme-primary) 25%,#d2c4ed 75%);
  --metric-done-a:color-mix(in srgb,var(--theme-primary) 25%,#efb07e 75%);
  --metric-done-b:color-mix(in srgb,var(--theme-accent) 20%,#d2b7e8 80%);
  --metric-done-c:color-mix(in srgb,var(--theme-primary-2) 20%,#efd39a 80%);
  --metric-all-a:color-mix(in srgb,var(--theme-accent) 32%,#b6d3ce 68%);
  --metric-all-b:color-mix(in srgb,var(--theme-primary) 18%,#aeb9c8 82%);
  --metric-all-c:color-mix(in srgb,var(--theme-primary-2) 15%,#d6ded8 85%);
}
.metrics .metric{
  background:linear-gradient(145deg,color-mix(in srgb,var(--theme-surface) 91%,#fff 9%),var(--theme-surface))!important;
}
.metrics .metric:before{
  inset:-15%;
  border-radius:34% 66% 42% 58% / 54% 38% 62% 46%;
  filter:blur(var(--metric-graffiti-blur)) saturate(var(--metric-graffiti-saturation));
  opacity:var(--metric-graffiti-opacity);
  transform:rotate(-8deg) scale(1.08);
}
.metrics .metric:after{
  inset:auto -13% -31% auto;
  width:74%;
  height:108%;
  border-radius:61% 39% 52% 48% / 44% 58% 42% 56%;
  background:var(--metric-graffiti-haze);
  filter:blur(22px) saturate(.78);
  opacity:calc(var(--metric-graffiti-opacity) * .82);
  mix-blend-mode:soft-light;
  transform:rotate(16deg);
}
.metrics .metric.open{
  --metric-graffiti:radial-gradient(ellipse 58% 76% at 78% 37%,color-mix(in srgb,var(--metric-open-a) 86%,transparent) 0 32%,transparent 72%),radial-gradient(ellipse 54% 66% at 31% 77%,color-mix(in srgb,var(--metric-open-b) 78%,transparent) 0 35%,transparent 74%),radial-gradient(ellipse 42% 52% at 12% 13%,color-mix(in srgb,var(--metric-open-c) 62%,transparent) 0 32%,transparent 72%);
  --metric-graffiti-haze:radial-gradient(ellipse at 42% 45%,color-mix(in srgb,var(--metric-open-a) 88%,transparent),transparent 67%),radial-gradient(ellipse at 82% 76%,color-mix(in srgb,var(--metric-open-b) 72%,transparent),transparent 66%);
}
.metrics .metric.progress{
  --metric-graffiti:radial-gradient(ellipse 59% 75% at 79% 42%,color-mix(in srgb,var(--metric-progress-a) 86%,transparent) 0 34%,transparent 73%),radial-gradient(ellipse 55% 69% at 25% 82%,color-mix(in srgb,var(--metric-progress-b) 78%,transparent) 0 34%,transparent 74%),radial-gradient(ellipse 43% 55% at 10% 12%,color-mix(in srgb,var(--metric-progress-c) 62%,transparent) 0 31%,transparent 70%);
  --metric-graffiti-haze:radial-gradient(ellipse at 38% 44%,color-mix(in srgb,var(--metric-progress-a) 90%,transparent),transparent 66%),radial-gradient(ellipse at 80% 76%,color-mix(in srgb,var(--metric-progress-b) 72%,transparent),transparent 68%);
}
.metrics .metric.done{
  --metric-graffiti:radial-gradient(ellipse 59% 78% at 79% 59%,color-mix(in srgb,var(--metric-done-a) 84%,transparent) 0 33%,transparent 73%),radial-gradient(ellipse 55% 68% at 27% 22%,color-mix(in srgb,var(--metric-done-b) 76%,transparent) 0 34%,transparent 73%),radial-gradient(ellipse 42% 52% at 9% 91%,color-mix(in srgb,var(--metric-done-c) 60%,transparent) 0 31%,transparent 70%);
  --metric-graffiti-haze:radial-gradient(ellipse at 42% 44%,color-mix(in srgb,var(--metric-done-a) 88%,transparent),transparent 67%),radial-gradient(ellipse at 84% 75%,color-mix(in srgb,var(--metric-done-b) 70%,transparent),transparent 68%);
}
.metrics .metric.all{
  --metric-graffiti:radial-gradient(ellipse 59% 76% at 77% 34%,color-mix(in srgb,var(--metric-all-a) 78%,transparent) 0 34%,transparent 74%),radial-gradient(ellipse 57% 70% at 27% 79%,color-mix(in srgb,var(--metric-all-b) 72%,transparent) 0 35%,transparent 74%),radial-gradient(ellipse 43% 54% at 9% 11%,color-mix(in srgb,var(--metric-all-c) 66%,transparent) 0 31%,transparent 70%);
  --metric-graffiti-haze:radial-gradient(ellipse at 40% 43%,color-mix(in srgb,var(--metric-all-a) 82%,transparent),transparent 67%),radial-gradient(ellipse at 82% 76%,color-mix(in srgb,var(--metric-all-b) 68%,transparent),transparent 68%);
}

/* Complete midnight surface pass. The group and account modules ship later,
   page-specific blue/white declarations, so the final theme layer owns them. */
:root[data-theme="midnight"]{
  --metric-graffiti-opacity:.43;
  --metric-graffiti-saturation:.66;
  --metric-graffiti-blur:27px;
}
:root[data-theme="midnight"] .metrics .metric{
  background:linear-gradient(148deg,#1a1e1c,#141817 62%,#121514)!important;
  border-color:#303733!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 13px 32px rgba(0,0,0,.23)!important;
}
:root[data-theme="midnight"] .metrics .metric:before,
:root[data-theme="midnight"] .metrics .metric:after{mix-blend-mode:screen}

:root[data-theme="midnight"] .group-board,
:root[data-theme="midnight"] .team-cluster,
:root[data-theme="midnight"] .account-create-panel,
:root[data-theme="midnight"] .self-relation,
:root[data-theme="midnight"] .profile-hero,
:root[data-theme="midnight"] .shop-create-page{
  border-color:#29312d!important;
  background:linear-gradient(155deg,#121615,#0f1311)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.2)!important;
}
:root[data-theme="midnight"] .group-board-card,
:root[data-theme="midnight"] .person-card-v2,
:root[data-theme="midnight"] .shop-card,
:root[data-theme="midnight"] .profile-details article,
:root[data-theme="midnight"] .profile-settings-card,
:root[data-theme="midnight"] .account-create-v2{
  border-color:#2b332f!important;
  background:linear-gradient(148deg,#171b19,#131715)!important;
  color:#dce2de!important;
  box-shadow:0 8px 22px rgba(0,0,0,.17)!important;
}
:root[data-theme="midnight"] .person-card-v2:hover,
:root[data-theme="midnight"] .shop-card:hover{
  border-color:#3a4941!important;
  background:linear-gradient(148deg,#1a201d,#151a17)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.21)!important;
}
:root[data-theme="midnight"] .person-controls-v2,
:root[data-theme="midnight"] .group-member-field-card,
:root[data-theme="midnight"] .member-editable-field,
:root[data-theme="midnight"] .member-readonly-field,
:root[data-theme="midnight"] .profile-group-membership>div,
:root[data-theme="midnight"] .pending-member-card .person-controls-v2,
:root[data-theme="midnight"] .multi-picker-option.is-pending{
  border-color:#2d3732!important;
  background:linear-gradient(145deg,#131816,#171c19)!important;
  color:#929d97!important;
  box-shadow:none!important;
}
:root[data-theme="midnight"] .pending-member-card{
  border-color:#56492f!important;
  background:linear-gradient(145deg,#191914,#171512)!important;
}
:root[data-theme="midnight"] .team-cluster>header,
:root[data-theme="midnight"] .group-board-head,
:root[data-theme="midnight"] .person-card-v2 .person-actions,
:root[data-theme="midnight"] .name-style-modal .name-style-actions{
  border-color:#282f2c!important;
}

:root[data-theme="midnight"] .group-board-head h2,
:root[data-theme="midnight"] .team-cluster h3,
:root[data-theme="midnight"] .group-card-top b,
:root[data-theme="midnight"] .account-create-panel h3,
:root[data-theme="midnight"] .group-member-field-value>b,
:root[data-theme="midnight"] .member-readonly-field>b,
:root[data-theme="midnight"] .member-editable-field>select,
:root[data-theme="midnight"] .group-member-field-card>select,
:root[data-theme="midnight"] .multi-picker-head b,
:root[data-theme="midnight"] .multi-picker-option>span b,
:root[data-theme="midnight"] .feature-permission-option b,
:root[data-theme="midnight"] .feature-permission-summary>b,
:root[data-theme="midnight"] .zwt-smart-select-option,
:root[data-theme="midnight"] .group-picker-option,
:root[data-theme="midnight"] .profile-details b{
  color:#dbe2de!important;
}
:root[data-theme="midnight"] .group-card-top small,
:root[data-theme="midnight"] .team-cluster header p:not(.eyebrow),
:root[data-theme="midnight"] .account-create-panel header p:not(.eyebrow),
:root[data-theme="midnight"] .create-group-form label,
:root[data-theme="midnight"] .group-board-card>label,
:root[data-theme="midnight"] .group-manager-field,
:root[data-theme="midnight"] .group-member-field>span,
:root[data-theme="midnight"] .account-create-v2>label,
:root[data-theme="midnight"] .create-member-fields>label,
:root[data-theme="midnight"] .person-controls-v2 label,
:root[data-theme="midnight"] .account-multi-field,
:root[data-theme="midnight"] .feature-permission-option small,
:root[data-theme="midnight"] .feature-permission-summary>small,
:root[data-theme="midnight"] .profile-details span{
  color:#89938e!important;
}

:root[data-theme="midnight"] .create-group-form input,
:root[data-theme="midnight"] .group-board-card input,
:root[data-theme="midnight"] .group-picker-trigger,
:root[data-theme="midnight"] .group-picker-panel,
:root[data-theme="midnight"] .zwt-smart-select-trigger,
:root[data-theme="midnight"] .zwt-smart-select-panel,
:root[data-theme="midnight"] .feature-permission-trigger,
:root[data-theme="midnight"] .feature-permission-panel,
:root[data-theme="midnight"] .operator-avatar-display,
:root[data-theme="midnight"] .self-relation select,
:root[data-theme="midnight"] .name-style-modal .name-style-controls select,
:root[data-theme="midnight"] .name-style-modal .name-style-controls input[type="color"]{
  border-color:#303a35!important;
  background:#0d110f!important;
  color:#dce2de!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
}
:root[data-theme="midnight"] .multi-picker-panel,
:root[data-theme="midnight"] .feature-permission-panel,
:root[data-theme="midnight"] .zwt-smart-select-panel,
:root[data-theme="midnight"] .group-picker-panel,
:root[data-theme="midnight"] .collection-operator-panel{
  border-color:#303a35!important;
  background:linear-gradient(155deg,#151917,#101412)!important;
  box-shadow:0 20px 50px rgba(0,0,0,.38)!important;
}
:root[data-theme="midnight"] .multi-picker-option,
:root[data-theme="midnight"] .feature-permission-option,
:root[data-theme="midnight"] .zwt-smart-select-option,
:root[data-theme="midnight"] .group-picker-option,
:root[data-theme="midnight"] .collection-operator-option{
  border-color:transparent!important;
  background:#151a17!important;
  color:#cfd7d2!important;
}
:root[data-theme="midnight"] .multi-picker-option:hover,
:root[data-theme="midnight"] .multi-picker-option:has(input:checked),
:root[data-theme="midnight"] .feature-permission-option:hover,
:root[data-theme="midnight"] .feature-permission-option:has(input:checked),
:root[data-theme="midnight"] .zwt-smart-select-option:hover,
:root[data-theme="midnight"] .zwt-smart-select-option:focus-visible,
:root[data-theme="midnight"] .zwt-smart-select-option.is-selected,
:root[data-theme="midnight"] .group-picker-option:hover,
:root[data-theme="midnight"] .group-picker-option:focus-visible,
:root[data-theme="midnight"] .group-picker-option.selected,
:root[data-theme="midnight"] .collection-operator-option:hover,
:root[data-theme="midnight"] .collection-operator-option:focus-visible,
:root[data-theme="midnight"] .collection-operator-option.selected{
  border-color:#3d594b!important;
  background:linear-gradient(110deg,#1a2821,#17201c)!important;
  color:#dbe7e1!important;
}

/* Muted controls replace the remaining paper-white buttons and pills. */
:root[data-theme="midnight"] .topbar .ghost,
:root[data-theme="midnight"] .topbar .secondary,
:root[data-theme="midnight"] .system-notification-button,
:root[data-theme="midnight"] .account-panel-toggle,
:root[data-theme="midnight"] .team-cluster-count,
:root[data-theme="midnight"] .cluster-toggle,
:root[data-theme="midnight"] .list-custom-trigger,
:root[data-theme="midnight"] .group-card-actions button,
:root[data-theme="midnight"] .person-actions button,
:root[data-theme="midnight"] .row-action,
:root[data-theme="midnight"] .row-action.view,
:root[data-theme="midnight"] .row-action.edit,
:root[data-theme="midnight"] .sidebar-toggle,
:root[data-theme="midnight"] .small-button,
:root[data-theme="midnight"] .icon,
:root[data-theme="midnight"] .icon-button,
:root[data-theme="midnight"] .note-toggle,
:root[data-theme="midnight"] .remove-video,
:root[data-theme="midnight"] .close,
:root[data-theme="midnight"] .danger-button,
:root[data-theme="midnight"] .text-danger,
:root[data-theme="midnight"] .name-style-presets button,
:root[data-theme="midnight"] .management-locked-action:disabled{
  border-color:#303934!important;
  background:#171c19!important;
  color:#a9b7b0!important;
  box-shadow:none!important;
}
:root[data-theme="midnight"] .topbar .ghost:hover,
:root[data-theme="midnight"] .topbar .secondary:hover,
:root[data-theme="midnight"] .account-panel-toggle:hover,
:root[data-theme="midnight"] .team-cluster-count:hover,
:root[data-theme="midnight"] .cluster-toggle:hover,
:root[data-theme="midnight"] .list-custom-trigger:hover,
:root[data-theme="midnight"] .group-card-actions button:hover,
:root[data-theme="midnight"] .person-actions button:not(:disabled):hover,
:root[data-theme="midnight"] .row-action:hover,
:root[data-theme="midnight"] .sidebar-toggle:hover,
:root[data-theme="midnight"] .small-button:hover,
:root[data-theme="midnight"] .icon:hover,
:root[data-theme="midnight"] .icon-button:hover,
:root[data-theme="midnight"] .note-toggle:hover,
:root[data-theme="midnight"] .remove-video:hover,
:root[data-theme="midnight"] .close:hover,
:root[data-theme="midnight"] .name-style-presets button:hover{
  border-color:#3d574a!important;
  background:#1b241f!important;
  color:#d2ded8!important;
  box-shadow:none!important;
}
:root[data-theme="midnight"] .system-notification-button[data-notification-state="on"]{
  border-color:#37624f!important;background:#16271f!important;color:#83c5a6!important
}
:root[data-theme="midnight"] .system-notification-button[data-notification-state="blocked"]{
  border-color:#655333!important;background:#292216!important;color:#d2ae67!important
}
:root[data-theme="midnight"] .system-notification-button[data-notification-state="off"]{
  border-color:#303934!important;background:#171c19!important;color:#929d97!important
}
:root[data-theme="midnight"] .account-panel-toggle i{background:#202923!important;color:#83b99f!important}
:root[data-theme="midnight"] .group-card-mark,
:root[data-theme="midnight"] .admin-account-avatar>label{
  border-color:#202622!important;
  background:linear-gradient(135deg,#4f9b77,#32664e)!important;
  color:#edf4f0!important;
  box-shadow:0 6px 14px rgba(22,81,57,.2)!important;
}
:root[data-theme="midnight"] .group-member-field>span:before,
:root[data-theme="midnight"] .group-picker-trigger i{
  background:#6ca88b!important;
  box-shadow:0 0 0 3px rgba(108,168,139,.12)!important;
}

/* Pills retain meaning without introducing bright white islands. */
:root[data-theme="midnight"] .priority.normal,
:root[data-theme="midnight"] .role-pill.unassigned,
:root[data-theme="midnight"] .count-pill{
  border:1px solid #363e3a!important;background:#202522!important;color:#aab3ae!important
}
:root[data-theme="midnight"] .priority.urgent{background:#382027!important;color:#d88b9c!important}
:root[data-theme="midnight"] .priority.high,
:root[data-theme="midnight"] .role-pill.admin,
:root[data-theme="midnight"] .role-pill.manager,
:root[data-theme="midnight"] .role-pill.pending{background:#332a19!important;color:#d3ad67!important}
:root[data-theme="midnight"] .priority.low,
:root[data-theme="midnight"] .role-pill.operator{background:#183126!important;color:#79ba99!important}
:root[data-theme="midnight"] .role-pill.editor{background:#27263a!important;color:#aaa5cf!important}
:root[data-theme="midnight"] .group-pill{background:#1b2b24!important;color:#7fb69b!important}
:root[data-theme="midnight"] .group-pill.external{background:#29263a!important;color:#ada6d0!important}

/* Secondary detail/create surfaces that previously mixed white or navy. */
:root[data-theme="midnight"] .name-style-modal .name-style-preview,
:root[data-theme="midnight"] .name-style-tuning,
:root[data-theme="midnight"] .name-style-card,
:root[data-theme="midnight"] .name-style-preview,
:root[data-theme="midnight"] .ticket-brief-editor,
:root[data-theme="midnight"] .operator-avatar-display,
:root[data-theme="midnight"] .detail-video-card.compact,
:root[data-theme="midnight"] .ticket-detail-drawer .video-panel-expanded .video-reference-section,
:root[data-theme="midnight"] .ticket-detail-drawer .video-panel-expanded .detail-video-card.compact{
  border-color:#2d3732!important;
  background:linear-gradient(145deg,#151a17,#111512)!important;
  color:#d8dfdb!important;
  box-shadow:none!important;
}
:root[data-theme="midnight"] .ticket-brief-editor textarea,
:root[data-theme="midnight"] .video-compact-row .video-url-field,
:root[data-theme="midnight"] .video-compact-row .video-url-field input{
  border-color:#303a35!important;background:#0d110f!important;color:#dce2de!important
}

:root[data-theme="midnight"] .theme-menu,
:root[data-theme="midnight"] .date-range-panel,
:root[data-theme="midnight"] .range-panel,
:root[data-theme="midnight"] .ticket-column-editor{
  border-color:#303a35!important;
  background:#121614!important;
  color:#dce2de!important;
  box-shadow:0 22px 56px rgba(0,0,0,.42)!important;
}
:root[data-theme="midnight"] .theme-option,
:root[data-theme="midnight"] .column-editor-row,
:root[data-theme="midnight"] .date-range-heading nav button,
:root[data-theme="midnight"] .date-range-calendar button,
:root[data-theme="midnight"] .column-editor-row button{
  border-color:#2c3531!important;
  background:#171c19!important;
  color:#aab7b0!important;
  box-shadow:none!important;
}
:root[data-theme="midnight"] .theme-option:hover,
:root[data-theme="midnight"] .theme-option.active,
:root[data-theme="midnight"] .column-editor-row button:hover:not(:disabled),
:root[data-theme="midnight"] .date-range-heading nav button:hover,
:root[data-theme="midnight"] .date-range-calendar button:hover,
:root[data-theme="midnight"] .date-range-calendar button.is-in-range{
  border-color:#3c584a!important;
  background:#1a2821!important;
  color:#c8d9d0!important;
  box-shadow:none!important;
}
:root[data-theme="midnight"] .date-range-calendar button.is-start,
:root[data-theme="midnight"] .date-range-calendar button.is-end{
  border-color:#54886f!important;
  background:linear-gradient(135deg,#3e805f,#2d644b)!important;
  color:#f0f5f2!important;
  box-shadow:0 4px 11px rgba(27,92,65,.2)!important;
}
:root[data-theme="midnight"] .theme-option>i,
:root[data-theme="midnight"] .theme-trigger>i{
  border-color:#66716b!important;
  box-shadow:0 2px 8px rgba(0,0,0,.3)!important;
}
:root[data-theme="midnight"] .theme-menu header>span,
:root[data-theme="midnight"] .column-order{
  background:#202923!important;
  color:#83b99f!important;
}

:root[data-theme="midnight"]{color-scheme:dark;scrollbar-color:#365444 #0b0e0d}
:root[data-theme="midnight"] *::-webkit-scrollbar{width:10px;height:10px}
:root[data-theme="midnight"] *::-webkit-scrollbar-track{background:#0b0e0d}
:root[data-theme="midnight"] *::-webkit-scrollbar-thumb{border:2px solid #0b0e0d;border-radius:999px;background:#365444}
:root[data-theme="midnight"] *::-webkit-scrollbar-thumb:hover{background:#47705a}

/* Collection status labels are filters without changing the existing type scale. */
.collection-status-legend button{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin:0;
  padding:0;
  border:0;
  border-radius:7px;
  outline:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:850;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.collection-status-legend button i{width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 2px rgba(84,92,175,.1)}
.collection-status-legend button.open{color:#a82d59}.collection-status-legend button.open i{background:#d94675;box-shadow:0 0 0 2px rgba(217,70,117,.16)}
.collection-status-legend button.progress{color:#1f3fa6}.collection-status-legend button.progress i{background:#244fb5;box-shadow:0 0 0 2px rgba(36,79,181,.18)}
.collection-status-legend button.done{color:#087a4b}.collection-status-legend button.done i{background:#16b368;box-shadow:0 0 0 2px rgba(22,179,104,.16)}
.collection-status-legend button:hover,.collection-status-legend button:focus-visible{background:color-mix(in srgb,currentColor 8%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,currentColor 8%,transparent)}
.collection-status-legend button.active{background:color-mix(in srgb,currentColor 11%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,currentColor 10%,transparent)}
.collection-status-legend button:active{transform:translateY(1px)}
.collection-status-empty{width:100%;margin:4px 0;padding:8px 4px;color:var(--theme-muted);text-align:center}
.collection-filter-empty{display:grid;flex:1;place-content:center;justify-items:center;gap:6px;padding:24px;color:var(--theme-muted);text-align:center}
.collection-filter-empty span{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--theme-line);border-radius:12px;background:var(--theme-soft);color:var(--theme-primary)}
.collection-filter-empty b,.collection-filter-empty p{margin:0}.collection-filter-empty b{color:var(--theme-text)}
:root[data-theme="midnight"] .collection-status-legend button.open{color:#d888a3}
:root[data-theme="midnight"] .collection-status-legend button.progress{color:#83a5e4}
:root[data-theme="midnight"] .collection-status-legend button.done{color:#6bc79c}

/* Duplicate supplement links: every matching row stays easy to locate. */
.ticket-supplement-form .video-card.compact-entry.is-duplicate{
  border-color:color-mix(in srgb,#df5b75 76%,var(--theme-line))!important;
  background:linear-gradient(145deg,color-mix(in srgb,#df5b75 9%,var(--theme-surface)),color-mix(in srgb,#ff9bad 5%,var(--theme-surface)))!important;
  box-shadow:inset 3px 0 0 color-mix(in srgb,#d94764 82%,var(--theme-primary)),0 5px 15px color-mix(in srgb,#b72f4d 13%,transparent)!important;
}
.ticket-supplement-form .video-card.compact-entry.is-duplicate .video-url-field{
  border-color:color-mix(in srgb,#d94b68 70%,var(--theme-line))!important;
  background:color-mix(in srgb,#fff1f4 62%,var(--theme-surface))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,#df5b75 10%,transparent)!important;
}
.ticket-supplement-form .video-card.compact-entry.is-duplicate .video-index{
  background:linear-gradient(135deg,#ef6d84,#c83f5b)!important;
  color:#fff!important;
  box-shadow:0 5px 12px rgba(188,48,78,.24)!important;
}
.ticket-supplement-form .video-card.compact-entry.is-duplicate .video-duplicate-hint{
  display:flex;
  align-items:center;
  width:fit-content;
  margin:5px 0 1px 36px;
  padding:3px 8px 3px 4px;
  border-radius:999px;
  background:color-mix(in srgb,#df5b75 10%,var(--theme-surface));
  color:color-mix(in srgb,#b82d4c 88%,var(--theme-text));
  font-size:10px;
  font-weight:900;
}
.ticket-supplement-form .video-card.compact-entry.is-duplicate .video-duplicate-hint[hidden]{display:none}
.ticket-supplement-form .video-card.compact-entry.is-operator-duplicate{
  border-color:color-mix(in srgb,#dc8b22 78%,var(--theme-line))!important;
  background:linear-gradient(145deg,color-mix(in srgb,#f2a83d 12%,var(--theme-surface)),color-mix(in srgb,#ffd98b 7%,var(--theme-surface)))!important;
  box-shadow:inset 3px 0 0 #d6811d,0 5px 15px color-mix(in srgb,#b96c13 14%,transparent)!important;
}
.ticket-supplement-form .video-card.compact-entry.is-operator-duplicate .video-url-field{
  border-color:color-mix(in srgb,#d78a24 74%,var(--theme-line))!important;
  background:color-mix(in srgb,#fff5dc 68%,var(--theme-surface))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,#e59a30 12%,transparent)!important;
}
.ticket-supplement-form .video-card.compact-entry.is-operator-duplicate .video-index{
  background:linear-gradient(135deg,#f2ad45,#cb7417)!important;
  color:#fff!important;
  box-shadow:0 5px 12px rgba(180,101,14,.24)!important;
}
.ticket-supplement-form .video-card.compact-entry.is-operator-duplicate .video-duplicate-hint{
  display:flex;
  align-items:center;
  width:fit-content;
  margin:5px 0 1px 36px;
  padding:3px 8px 3px 4px;
  border-radius:999px;
  background:color-mix(in srgb,#efa43a 15%,var(--theme-surface));
  color:color-mix(in srgb,#9c5909 90%,var(--theme-text));
  font-size:10px;
  font-weight:900;
}
.ticket-supplement-form .video-card.compact-entry.is-operator-duplicate .video-duplicate-hint:before{
  background:#ffe4ad;
  color:#995508;
}
.ticket-supplement-form .video-card.compact-entry.is-operator-duplicate .video-duplicate-hint[hidden]{display:none}
:root[data-theme="midnight"] .ticket-supplement-form .video-card.compact-entry.is-duplicate{
  border-color:#7a4050!important;
  background:linear-gradient(145deg,#24171b,#1b1517)!important;
  box-shadow:inset 3px 0 0 #bd526b,0 6px 17px rgba(0,0,0,.2)!important;
}
:root[data-theme="midnight"] .ticket-supplement-form .video-card.compact-entry.is-duplicate .video-url-field{
  border-color:#895064!important;
  background:#160f12!important;
  box-shadow:0 0 0 3px rgba(190,75,101,.1)!important;
}
:root[data-theme="midnight"] .ticket-supplement-form .video-card.compact-entry.is-duplicate .video-duplicate-hint{
  background:#301a20;
  color:#e8a0b0;
}
:root[data-theme="midnight"] .ticket-supplement-form .video-card.compact-entry.is-operator-duplicate{
  border-color:#765328!important;
  background:linear-gradient(145deg,#292116,#1d1811)!important;
  box-shadow:inset 3px 0 0 #bf7d2b,0 6px 17px rgba(0,0,0,.2)!important;
}
:root[data-theme="midnight"] .ticket-supplement-form .video-card.compact-entry.is-operator-duplicate .video-url-field{
  border-color:#805d30!important;
  background:#17120b!important;
  box-shadow:0 0 0 3px rgba(190,126,42,.11)!important;
}
:root[data-theme="midnight"] .ticket-supplement-form .video-card.compact-entry.is-operator-duplicate .video-duplicate-hint{
  background:#332510;
  color:#e8bc70;
}
:root[data-theme="midnight"] .ticket-supplement-form .video-card.compact-entry.is-operator-duplicate .video-duplicate-hint:before{
  background:#5a3c17;
  color:#f2ca84;
}

@media(max-width:680px){
  .metrics .metric:before{inset:-12%;filter:blur(19px) saturate(var(--metric-graffiti-saturation))}
  .metrics .metric:after{display:block;width:78%;height:98%;filter:blur(18px)}
}