/* =====================================================================
   UNDERWRITER QUEUE  ·  TACTICAL COCKPIT
   ===================================================================== */

.uq-page {
    --uq-bg:        #f1f5f9;
    --uq-bg-grid:   rgba(15, 23, 42, .04);
    --uq-surface:   #ffffff;
    --uq-surface-2: #f8fafc;
    --uq-surface-3: #eef2f7;
    --uq-line:      rgba(15, 23, 42, .08);
    --uq-line-2:    rgba(15, 23, 42, .14);
    --uq-ink:       #0f172a;
    --uq-ink-2:     #334155;
    --uq-ink-3:     #64748b;
    --uq-ink-4:     #94a3b8;

    /* Tactical accents */
    --uq-cyan:      #0891b2;
    --uq-cyan-2:    #06b6d4;
    --uq-cyan-glow: rgba(8, 145, 178, .35);
    --uq-indigo:    #4f46e5;
    --uq-magenta:   #c026d3;
    --uq-amber:     #d97706;
    --uq-amber-2:   #f59e0b;
    --uq-green:     #059669;
    --uq-rose:      #e11d48;
    --uq-rose-2:    #ef4444;

    --uq-hud-bg:    #0b1220;
    --uq-hud-fg:    #cbd5e1;
    --uq-hud-mono:  'JetBrains Mono', 'SF Mono', Menlo, monospace;

    --uq-radius:    12px;
    --uq-shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px -3px rgba(15,23,42,.05), inset 0 0 0 1px rgba(15,23,42,.05);
    --uq-shadow-pop:  0 24px 48px -16px rgba(15,23,42,.25), 0 0 0 1px rgba(15,23,42,.08);
    --uq-shadow-glow: 0 0 0 1px rgba(8,145,178,.35), 0 0 24px rgba(8,145,178,.18);

    background: var(--uq-bg);
    background-image:
        linear-gradient(var(--uq-bg-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--uq-bg-grid) 1px, transparent 1px);
    background-size: 28px 28px;
    background-attachment: fixed;
}

/* ============================================================
   HUD COMMAND BAR
   ============================================================ */
.uq-hud {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--uq-hud-bg);
    color: var(--uq-hud-fg);
    overflow: hidden;
    border-bottom: 1px solid #1e293b;
}
.uq-hud-bg { position: absolute; inset: 0; pointer-events: none; }
.uq-hud-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(8, 145, 178, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8, 145, 178, .08) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.uq-hud-scan {
    position: absolute; left: 0; right: 0; top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--uq-cyan-2), transparent);
    opacity: .6;
    animation: uqHudScan 5s ease-in-out infinite;
}
@keyframes uqHudScan {
    0%   { transform: translateY(-40px); opacity: 0; }
    50%  { opacity: .8; }
    100% { transform: translateY(40px); opacity: 0; }
}
.uq-hud-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 32px;
    align-items: center;
    padding: 14px 28px;
    max-width: 1700px;
    margin: 0 auto;
}

.uq-hud-brand { display: flex; align-items: center; gap: 14px; }
.uq-hud-mark {
    position: relative;
    width: 38px; height: 38px;
    display: grid; place-items: center;
}
.uq-hud-mark-ring {
    position: absolute; inset: 0;
    border: 1px solid var(--uq-cyan-2);
    border-radius: 50%;
    border-right-color: transparent;
    border-bottom-color: transparent;
    animation: uqMarkSpin 4s linear infinite;
}
.uq-hud-mark-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--uq-cyan-2);
    box-shadow: 0 0 12px var(--uq-cyan-2);
    animation: uqMarkBlip 2s ease-in-out infinite;
}
@keyframes uqMarkSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes uqMarkBlip {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.3); opacity: .6; }
}
.uq-hud-eyebrow {
    font-family: var(--uq-hud-mono);
    font-size: 10px;
    letter-spacing: .12em;
    color: var(--uq-cyan-2);
    font-weight: 600;
}
.uq-hud-title {
    font-size: 17px;
    font-weight: 600;
    color: #f1f5f9;
    letter-spacing: -.01em;
    margin: 0;
}

.uq-hud-metrics {
    display: flex;
    gap: 1px;
    background: rgba(8, 145, 178, .15);
    padding: 1px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(8, 145, 178, .25);
}
.uq-hud-metric {
    background: #0b1220;
    padding: 7px 18px;
    text-align: center;
    min-width: 110px;
    position: relative;
}
.uq-hud-metric:first-child { border-radius: 7px 0 0 7px; }
.uq-hud-metric:last-child  { border-radius: 0 7px 7px 0; }
.uq-hud-m-label {
    display: block;
    font-family: var(--uq-hud-mono);
    font-size: 9px;
    letter-spacing: .14em;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 2px;
}
.uq-hud-m-val {
    display: block;
    font-family: var(--uq-hud-mono);
    font-size: 22px;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1;
    letter-spacing: -.02em;
    font-feature-settings: 'tnum';
}
.uq-hud-metric-warn .uq-hud-m-val { color: var(--uq-amber-2); text-shadow: 0 0 8px rgba(245, 158, 11, .5); }
.uq-hud-metric-warn::before {
    content: '';
    position: absolute;
    top: 6px; right: 6px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--uq-rose-2);
    box-shadow: 0 0 8px var(--uq-rose-2);
    animation: uqBlip 1s ease-in-out infinite;
}
@keyframes uqBlip {
    0%, 100% { opacity: 1; }
    50%      { opacity: .3; }
}

.uq-hud-user {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: flex-end;
}
.uq-hud-clock {
    font-family: var(--uq-hud-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--uq-cyan-2);
    text-shadow: 0 0 8px rgba(8, 145, 178, .3);
    letter-spacing: .05em;
}
.uq-hud-user-card {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 12px 5px 5px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(8, 145, 178, .2);
    border-radius: 999px;
}
.uq-hud-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid; place-items: center;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--uq-hud-mono);
}
.uq-hud-avatar[data-tone='teal']     { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.uq-hud-avatar[data-tone='violet']   { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.uq-hud-avatar[data-tone='sapphire'] { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.uq-hud-avatar[data-tone='amber']    { background: linear-gradient(135deg, #f59e0b, #b45309); }
.uq-hud-user-name {
    font-size: 12px; font-weight: 500; color: #e2e8f0;
    line-height: 1.2;
}
.uq-hud-user-name small {
    display: block;
    font-size: 9px;
    color: var(--uq-ink-4);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 1px;
}

@media (max-width: 1100px) {
    .uq-hud-inner { grid-template-columns: 1fr; gap: 12px; padding: 12px 20px; }
    .uq-hud-metrics { order: 1; }
    .uq-hud-brand { order: 0; }
    .uq-hud-user { order: 2; justify-content: flex-start; }
}

/* ============================================================
   COCKPIT LAYOUT
   ============================================================ */
.uq-cockpit {
    display: grid;
    grid-template-columns: 460px 1fr;
    gap: 18px;
    padding: 18px 24px;
    max-width: 1700px;
    margin: 0 auto;
}
@media (max-width: 1180px) { .uq-cockpit { grid-template-columns: 1fr; } }

/* ============================================================
   RADAR PANE
   ============================================================ */
.uq-radar-pane {
    background: var(--uq-surface);
    border-radius: var(--uq-radius);
    box-shadow: var(--uq-shadow-card);
    overflow: hidden;
    position: sticky;
    top: 80px;
    align-self: start;
    animation: uqPaneIn .6s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes uqPaneIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.uq-radar-head {
    padding: 12px 16px;
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(180deg, #f8fafc, #ffffff);
    border-bottom: 1px solid var(--uq-line);
}
.uq-radar-eyebrow {
    font-family: var(--uq-hud-mono);
    font-size: 9px;
    letter-spacing: .14em;
    color: var(--uq-cyan);
    font-weight: 700;
}
.uq-radar-title {
    font-size: 13px; font-weight: 600;
    color: var(--uq-ink);
    margin-top: 2px;
    letter-spacing: -.01em;
}
.uq-radar-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--uq-hud-mono);
    font-size: 10px;
    letter-spacing: .1em;
    color: var(--uq-cyan);
    font-weight: 600;
    padding: 4px 10px;
    background: rgba(8, 145, 178, .08);
    border-radius: 999px;
}
.uq-radar-pulse {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--uq-cyan);
    box-shadow: 0 0 6px var(--uq-cyan);
    animation: uqBlip 1.4s ease-in-out infinite;
}

/* Radar SVG stage */
.uq-radar-stage {
    position: relative;
    aspect-ratio: 1;
    padding: 12px;
}
.uq-radar-svg {
    width: 100%; height: 100%;
    display: block;
    cursor: crosshair;
}
.uq-radar-ring {
    fill: none;
    stroke: rgba(8, 145, 178, .14);
    stroke-width: 1;
}
.uq-radar-ring-outer { stroke: rgba(8, 145, 178, .22); }
.uq-radar-ring-inner {
    stroke: rgba(225, 29, 72, .35);
    stroke-dasharray: 3 3;
    animation: uqInnerPulse 2.4s ease-in-out infinite;
}
@keyframes uqInnerPulse {
    0%, 100% { stroke: rgba(225, 29, 72, .35); }
    50%      { stroke: rgba(225, 29, 72, .65); }
}
.uq-radar-core { animation: uqCorePulse 3s ease-in-out infinite; }
@keyframes uqCorePulse {
    0%, 100% { opacity: .5; }
    50%      { opacity: 1; }
}
.uq-radar-cross line {
    stroke: rgba(15, 23, 42, .04);
    stroke-width: 1;
    stroke-dasharray: 4 6;
}
.uq-radar-sweep {
    transform-origin: 250px 250px;
    animation: uqSweep 4s linear infinite;
}
@keyframes uqSweep { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.uq-radar-sweep-line {
    stroke: var(--uq-cyan-2);
    stroke-width: 1.5;
    opacity: .55;
    filter: drop-shadow(0 0 4px var(--uq-cyan-2));
}
.uq-radar-labels text {
    fill: var(--uq-ink-4);
    font-family: var(--uq-hud-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .1em;
}
.uq-radar-label-core {
    fill: var(--uq-rose) !important;
    font-size: 10px !important;
}
.uq-radar-wedges path { fill: rgba(8, 145, 178, .025); transition: fill .25s ease; }
.uq-radar-wedges path:hover { fill: rgba(8, 145, 178, .08); }
.uq-radar-wedges path.active { fill: rgba(8, 145, 178, .12); }
.uq-radar-wedge-labels text {
    fill: var(--uq-ink-3);
    font-family: var(--uq-hud-mono);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Case dots */
.uq-radar-dot {
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease;
    transform-box: fill-box;
    transform-origin: center;
}
.uq-radar-dot:hover { transform: scale(1.4); }
.uq-radar-dot[data-prio='critical'] { fill: var(--uq-rose); filter: drop-shadow(0 0 4px var(--uq-rose)); }
.uq-radar-dot[data-prio='high']     { fill: var(--uq-amber); filter: drop-shadow(0 0 3px var(--uq-amber)); }
.uq-radar-dot[data-prio='medium']   { fill: var(--uq-cyan); }
.uq-radar-dot[data-prio='low']      { fill: var(--uq-ink-4); }

.uq-radar-dot-ripple {
    fill: none;
    stroke: var(--uq-rose);
    stroke-width: 1.5;
    animation: uqRipple 1.6s ease-out infinite;
}
@keyframes uqRipple {
    0%   { r: 4; opacity: .8; }
    100% { r: 16; opacity: 0; }
}
.uq-radar-dot-active {
    fill: var(--uq-cyan);
    filter: drop-shadow(0 0 8px var(--uq-cyan));
}

.uq-radar-lock {
    pointer-events: none;
    animation: uqLockSpin 6s linear infinite;
}
@keyframes uqLockSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.uq-radar-lock .uq-lock-circle {
    stroke: var(--uq-cyan);
    stroke-width: 1.5;
    stroke-dasharray: 6 3;
    animation: uqLockPulse 1.4s ease-in-out infinite;
}
@keyframes uqLockPulse {
    0%, 100% { opacity: .9; }
    50%      { opacity: .4; }
}
.uq-radar-lock .uq-lock-tick {
    stroke: var(--uq-cyan);
    stroke-width: 1.5;
}

/* Radar tooltip */
.uq-radar-tooltip {
    position: absolute;
    background: var(--uq-hud-bg);
    color: var(--uq-hud-fg);
    font-family: var(--uq-hud-mono);
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 6px;
    box-shadow: 0 8px 16px rgba(15, 23, 42, .25);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -100%) translateY(-8px);
    transition: opacity .15s ease;
    border: 1px solid rgba(8, 145, 178, .35);
    white-space: nowrap;
    z-index: 10;
}
.uq-radar-tooltip.show { opacity: 1; }
.uq-radar-tooltip strong {
    display: block;
    font-size: 12px;
    color: var(--uq-cyan-2);
    margin-bottom: 1px;
}

/* Legend */
.uq-radar-legend {
    padding: 8px 16px;
    border-top: 1px solid var(--uq-line);
    background: var(--uq-surface-2);
}
.uq-legend-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    font-size: 10px;
    color: var(--uq-ink-3);
}
.uq-legend-label {
    font-family: var(--uq-hud-mono);
    font-size: 9px;
    letter-spacing: .12em;
    font-weight: 700;
    color: var(--uq-ink-4);
}
.uq-legend-key {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px;
    color: var(--uq-ink-2);
}
.uq-legend-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
}
.uq-legend-dot[data-prio='critical'] { background: var(--uq-rose); box-shadow: 0 0 6px var(--uq-rose); }
.uq-legend-dot[data-prio='high']     { background: var(--uq-amber); }
.uq-legend-dot[data-prio='medium']   { background: var(--uq-cyan); }
.uq-legend-dot[data-prio='low']      { background: var(--uq-ink-4); }

/* Filters */
.uq-radar-filters {
    padding: 12px 16px;
    border-top: 1px solid var(--uq-line);
    display: flex; flex-direction: column; gap: 10px;
}
.uq-filter-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.uq-filter-label {
    font-family: var(--uq-hud-mono);
    font-size: 9px;
    letter-spacing: .12em;
    font-weight: 700;
    color: var(--uq-ink-4);
}
.uq-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.uq-chip {
    padding: 4px 10px;
    background: var(--uq-surface-3);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11px;
    font-family: var(--uq-hud-mono);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--uq-ink-2);
    cursor: pointer;
    transition: all .15s ease;
    text-transform: uppercase;
}
.uq-chip:hover { background: var(--uq-line); color: var(--uq-ink); }
.uq-chip.active {
    background: var(--uq-hud-bg);
    color: var(--uq-cyan-2);
    box-shadow: inset 0 0 0 1px var(--uq-cyan), 0 0 8px rgba(8, 145, 178, .2);
}
.uq-mini-btn {
    padding: 5px 12px;
    background: transparent;
    border: 1px solid var(--uq-line-2);
    border-radius: 999px;
    font-size: 11px;
    font-family: var(--uq-hud-mono);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--uq-ink-2);
    cursor: pointer;
    transition: all .15s ease;
    text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 5px;
}
.uq-mini-btn:hover { border-color: var(--uq-cyan); color: var(--uq-cyan); }
.uq-mini-btn.active {
    background: var(--uq-hud-bg);
    color: var(--uq-cyan-2);
    border-color: var(--uq-cyan);
    box-shadow: 0 0 8px rgba(8, 145, 178, .2);
}

/* ============================================================
   FOCUS STAGE
   ============================================================ */
.uq-focus {
    background: var(--uq-surface);
    border-radius: var(--uq-radius);
    box-shadow: var(--uq-shadow-card);
    min-height: 720px;
    animation: uqPaneIn .6s cubic-bezier(.2,.7,.2,1) .1s both;
    position: relative;
    overflow: hidden;
}

.uq-focus-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 60px 32px;
    text-align: center;
    min-height: 720px;
    gap: 20px;
}
.uq-empty-radar {
    position: relative;
    width: 160px; height: 160px;
    display: grid; place-items: center;
    margin-bottom: 8px;
}
.uq-empty-r-ring {
    position: absolute;
    border: 1px solid var(--uq-cyan);
    border-radius: 50%;
    opacity: 0;
    animation: uqEmptyRing 3s linear infinite;
}
.uq-empty-r-1 { width: 60px; height: 60px; animation-delay: 0s; }
.uq-empty-r-2 { width: 60px; height: 60px; animation-delay: 1s; }
.uq-empty-r-3 { width: 60px; height: 60px; animation-delay: 2s; }
@keyframes uqEmptyRing {
    0%   { width: 60px; height: 60px; opacity: .8; }
    100% { width: 160px; height: 160px; opacity: 0; }
}
.uq-empty-r-core {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--uq-cyan), var(--uq-cyan-2));
    color: #fff;
    display: grid; place-items: center;
    font-size: 24px;
    box-shadow: 0 0 24px var(--uq-cyan-glow);
    z-index: 1;
}
.uq-focus-empty h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--uq-ink);
    letter-spacing: -.02em;
    margin: 0;
}
.uq-focus-empty p {
    font-size: 13px;
    color: var(--uq-ink-2);
    max-width: 460px;
    line-height: 1.6;
    margin: 0;
}

.uq-focus-body {
    display: flex; flex-direction: column;
    animation: uqFocusIn .4s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes uqFocusIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === Focus header (status strip) === */
.uq-focus-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--uq-hud-bg);
    color: var(--uq-hud-fg);
    position: relative;
    overflow: hidden;
}
.uq-focus-strip::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0; width: 3px;
}
.uq-focus-strip[data-prio='critical']::before { background: var(--uq-rose-2); box-shadow: 0 0 12px var(--uq-rose-2); }
.uq-focus-strip[data-prio='high']::before     { background: var(--uq-amber-2); }
.uq-focus-strip[data-prio='medium']::before   { background: var(--uq-cyan-2); }
.uq-focus-strip[data-prio='low']::before      { background: var(--uq-ink-4); }
.uq-focus-strip-left {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--uq-hud-mono);
    font-size: 11px;
    letter-spacing: .06em;
}
.uq-focus-strip-id {
    color: var(--uq-cyan-2);
    font-weight: 700;
}
.uq-focus-strip-led {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--uq-amber-2);
    box-shadow: 0 0 8px var(--uq-amber-2);
    animation: uqBlip 1.4s ease-in-out infinite;
}
.uq-focus-strip-led[data-status='open']           { background: var(--uq-cyan-2); box-shadow: 0 0 8px var(--uq-cyan-2); }
.uq-focus-strip-led[data-status='in_review']      { background: #c084fc;          box-shadow: 0 0 8px #c084fc; }
.uq-focus-strip-led[data-status='awaiting_info']  { background: var(--uq-amber-2);box-shadow: 0 0 8px var(--uq-amber-2); }
.uq-focus-strip-led[data-status='decided']        { background: #34d399;          box-shadow: 0 0 8px #34d399; animation: none; }
.uq-focus-strip-status {
    text-transform: uppercase;
    font-weight: 600;
    color: #e2e8f0;
}
.uq-focus-strip-right {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--uq-hud-mono);
    font-size: 10px;
    color: var(--uq-ink-4);
}
.uq-focus-strip-right strong {
    color: #e2e8f0;
    font-weight: 600;
}

/* === Command panel (top section: avatar + SLA ring + reason) === */
.uq-cmd {
    padding: 28px 28px 22px;
    display: grid;
    grid-template-columns: 1fr 240px 1fr;
    gap: 28px;
    align-items: center;
    background:
        radial-gradient(ellipse at 0% 100%, rgba(8,145,178,.04) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 0%, rgba(192,38,211,.025) 0%, transparent 50%),
        var(--uq-surface);
    border-bottom: 1px solid var(--uq-line);
}
.uq-cmd-cust {
    display: flex; flex-direction: column; gap: 4px;
}
.uq-cmd-cust-row {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 10px;
}
.uq-cmd-avatar {
    width: 64px; height: 64px;
    border-radius: 16px;
    display: grid; place-items: center;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    position: relative;
}
.uq-cmd-avatar[data-tone='sapphire'] { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.uq-cmd-avatar[data-tone='violet']   { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.uq-cmd-avatar[data-tone='teal']     { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.uq-cmd-avatar[data-tone='amber']    { background: linear-gradient(135deg, #f59e0b, #b45309); }
.uq-cmd-avatar[data-tone='rose']     { background: linear-gradient(135deg, #f43f5e, #be123c); }
.uq-cmd-avatar::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1px solid currentColor;
    border-radius: 18px;
    opacity: .15;
    animation: uqAvatarPulse 3s ease-in-out infinite;
}
@keyframes uqAvatarPulse {
    0%, 100% { transform: scale(1); opacity: .15; }
    50%      { transform: scale(1.05); opacity: 0; }
}
.uq-cmd-cust-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--uq-ink);
    letter-spacing: -.02em;
    margin: 0 0 4px;
    line-height: 1.1;
}
.uq-cmd-cust-meta {
    font-family: var(--uq-hud-mono);
    font-size: 11px;
    color: var(--uq-ink-3);
}
.uq-cmd-cust-meta strong { color: var(--uq-ink-2); }

.uq-cmd-quickfacts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-top: 4px;
}
.uq-cmd-fact {
    padding: 6px 10px;
    background: var(--uq-surface-2);
    border-radius: 6px;
    border-left: 2px solid var(--uq-cyan);
}
.uq-cmd-fact-label {
    font-family: var(--uq-hud-mono);
    font-size: 9px;
    letter-spacing: .1em;
    color: var(--uq-ink-4);
    font-weight: 600;
    text-transform: uppercase;
}
.uq-cmd-fact-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--uq-ink);
    line-height: 1.2;
    margin-top: 1px;
}
.uq-cmd-fact-val.mono { font-family: var(--uq-hud-mono); font-size: 12px; }

/* === SLA giant ring === */
.uq-sla-ring {
    position: relative;
    width: 240px; height: 240px;
    margin: 0 auto;
}
.uq-sla-ring svg {
    width: 100%; height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}
.uq-sla-ring-track {
    fill: none;
    stroke: var(--uq-surface-3);
    stroke-width: 10;
}
.uq-sla-ring-fill {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1), stroke .3s ease;
    filter: drop-shadow(0 0 8px currentColor);
}
.uq-sla-ring-fill.ok   { stroke: var(--uq-green); color: var(--uq-green); }
.uq-sla-ring-fill.warn { stroke: var(--uq-amber); color: var(--uq-amber); }
.uq-sla-ring-fill.bad  { stroke: var(--uq-rose);  color: var(--uq-rose); }
.uq-sla-ring-fill.over { stroke: var(--uq-rose);  color: var(--uq-rose); animation: uqOverPulse 1s ease-in-out infinite; }
.uq-sla-ring-fill.done { stroke: var(--uq-ink-4); color: var(--uq-ink-4); }
@keyframes uqOverPulse {
    0%, 100% { stroke-width: 10; }
    50%      { stroke-width: 12; }
}

.uq-sla-ring-tick {
    stroke: rgba(15, 23, 42, .1);
    stroke-width: 1.5;
}
.uq-sla-ring-tick-major {
    stroke: rgba(15, 23, 42, .2);
    stroke-width: 2;
}

.uq-sla-ring-text {
    position: absolute;
    inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
}
.uq-sla-ring-label {
    font-family: var(--uq-hud-mono);
    font-size: 9px;
    letter-spacing: .14em;
    color: var(--uq-ink-3);
    font-weight: 700;
    margin-bottom: 4px;
}
.uq-sla-ring-value {
    font-family: var(--uq-hud-mono);
    font-size: 44px;
    font-weight: 700;
    color: var(--uq-ink);
    letter-spacing: -.03em;
    line-height: 1;
    font-feature-settings: 'tnum';
    transition: color .3s ease;
}
.uq-sla-ring-value.warn { color: var(--uq-amber); }
.uq-sla-ring-value.bad  { color: var(--uq-rose); animation: uqSlaPulse 1.4s ease-in-out infinite; }
.uq-sla-ring-value.over { color: var(--uq-rose); text-shadow: 0 0 16px rgba(225, 29, 72, .4); animation: uqSlaPulse 1s ease-in-out infinite; }
.uq-sla-ring-value.done { color: var(--uq-ink-4); font-size: 22px; }
@keyframes uqSlaPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
}
.uq-sla-ring-sub {
    font-family: var(--uq-hud-mono);
    font-size: 10px;
    color: var(--uq-ink-3);
    margin-top: 4px;
    letter-spacing: .04em;
}

/* === Reason banner + assignee (right column) === */
.uq-cmd-right {
    display: flex; flex-direction: column; gap: 12px;
}
.uq-cmd-reason {
    display: flex; gap: 12px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(8, 145, 178, .04), rgba(8, 145, 178, .08));
    border: 1px solid rgba(8, 145, 178, .2);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.uq-cmd-reason::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--uq-cyan-2), transparent);
    animation: uqScanLine 3s ease-in-out infinite;
}
@keyframes uqScanLine {
    0%, 100% { opacity: .3; transform: translateY(0); }
    50%      { opacity: 1; transform: translateY(180px); }
}
.uq-cmd-reason-ico {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: grid; place-items: center;
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
}
.uq-cmd-reason-ico[data-tone='sapphire'] { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.uq-cmd-reason-ico[data-tone='violet']   { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.uq-cmd-reason-ico[data-tone='teal']     { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.uq-cmd-reason-ico[data-tone='amber']    { background: linear-gradient(135deg, #f59e0b, #b45309); }
.uq-cmd-reason-ico[data-tone='rose']     { background: linear-gradient(135deg, #f43f5e, #be123c); }
.uq-cmd-reason-eyebrow {
    font-family: var(--uq-hud-mono);
    font-size: 9px;
    letter-spacing: .12em;
    color: var(--uq-cyan);
    font-weight: 700;
    margin-bottom: 2px;
}
.uq-cmd-reason-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--uq-ink);
    margin-bottom: 4px;
}
.uq-cmd-reason-desc {
    font-size: 11px;
    color: var(--uq-ink-2);
    line-height: 1.5;
}

.uq-cmd-assignee {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--uq-surface-2);
    border-radius: 10px;
    border-left: 2px solid var(--uq-cyan);
}
.uq-cmd-assignee-label {
    font-family: var(--uq-hud-mono);
    font-size: 9px;
    letter-spacing: .12em;
    color: var(--uq-ink-4);
    font-weight: 700;
}
.uq-cmd-assignee-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--uq-ink);
}
.uq-cmd-assignee-title {
    font-size: 10px;
    color: var(--uq-ink-3);
}
.uq-cmd-assignee-empty {
    font-family: var(--uq-hud-mono);
    font-size: 11px;
    color: var(--uq-ink-4);
    font-style: italic;
    letter-spacing: .04em;
}

@media (max-width: 1000px) {
    .uq-cmd { grid-template-columns: 1fr; }
}

/* ============================================================
   SCORING STRIP
   ============================================================ */
.uq-scoring {
    padding: 22px 28px;
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: 20px;
    background: var(--uq-surface);
    border-bottom: 1px solid var(--uq-line);
}
@media (max-width: 1100px) { .uq-scoring { grid-template-columns: 1fr; } }

.uq-gauge-card {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    background: var(--uq-surface-2);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}
.uq-gauge-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0; width: 2px;
    background: var(--uq-cyan);
}
.uq-gauge-ring { position: relative; width: 80px; height: 80px; }
.uq-gauge-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.uq-gauge-track { fill: none; stroke: var(--uq-surface-3); stroke-width: 7; }
.uq-gauge-fill {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1);
}
.uq-gauge-text {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: var(--uq-hud-mono);
    font-size: 20px;
    font-weight: 700;
    color: var(--uq-ink);
}
.uq-gauge-label {
    font-family: var(--uq-hud-mono);
    font-size: 9px;
    letter-spacing: .12em;
    color: var(--uq-ink-4);
    font-weight: 700;
}
.uq-gauge-band {
    font-size: 14px;
    font-weight: 600;
    color: var(--uq-ink);
    margin-top: 2px;
}
.uq-gauge-window {
    font-family: var(--uq-hud-mono);
    font-size: 10px;
    color: var(--uq-ink-3);
    margin-top: 3px;
}

/* DBR meter */
.uq-dbr-card {
    padding: 14px 16px;
    background: var(--uq-surface-2);
    border-radius: 12px;
    border-left: 2px solid var(--uq-amber);
}
.uq-dbr-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 10px;
}
.uq-dbr-label {
    font-family: var(--uq-hud-mono);
    font-size: 9px;
    letter-spacing: .12em;
    color: var(--uq-ink-4);
    font-weight: 700;
}
.uq-dbr-val {
    font-family: var(--uq-hud-mono);
    font-size: 24px;
    font-weight: 700;
    color: var(--uq-ink);
    letter-spacing: -.02em;
    font-feature-settings: 'tnum';
}
.uq-dbr-val.warn { color: var(--uq-amber); }
.uq-dbr-val.bad  { color: var(--uq-rose); }
.uq-dbr-track {
    position: relative;
    height: 8px;
    background: var(--uq-surface-3);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 6px;
}
.uq-dbr-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background: linear-gradient(90deg, var(--uq-green), #34d399);
    border-radius: 999px;
    box-shadow: 0 0 8px currentColor;
    transition: width .9s cubic-bezier(.2,.7,.2,1), background .3s ease;
}
.uq-dbr-fill.warn { background: linear-gradient(90deg, var(--uq-amber), #fbbf24); }
.uq-dbr-fill.bad  { background: linear-gradient(90deg, var(--uq-rose), #f87171); }
.uq-dbr-marker {
    position: absolute;
    top: -3px;
    width: 2px; height: 14px;
    background: var(--uq-ink);
    transform: translateX(-1px);
}
.uq-dbr-marker::after {
    content: 'limit';
    position: absolute;
    top: -16px;
    left: 50%; transform: translateX(-50%);
    font-family: var(--uq-hud-mono);
    font-size: 8px;
    color: var(--uq-ink-3);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}
.uq-dbr-scale {
    display: flex; justify-content: space-between;
    font-family: var(--uq-hud-mono);
    font-size: 9px;
    color: var(--uq-ink-4);
    margin-top: 8px;
}

/* ============================================================
   ACTION BAR
   ============================================================ */
.uq-actions {
    padding: 18px 28px;
    background: linear-gradient(180deg, var(--uq-surface), var(--uq-surface-2));
    border-bottom: 1px solid var(--uq-line);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
}
.uq-actions::before {
    content: '';
    position: absolute;
    top: 0; left: 28px; right: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--uq-cyan), transparent);
    opacity: .3;
}

.uq-cmd-btn {
    flex: 1;
    min-width: 140px;
    padding: 14px 18px;
    background: var(--uq-surface);
    border: 1px solid var(--uq-line);
    border-radius: 10px;
    cursor: pointer;
    transition: all .2s cubic-bezier(.2,.7,.2,1);
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 4px;
    text-align: left;
    position: relative;
    overflow: hidden;
}
.uq-cmd-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.uq-cmd-btn:hover { transform: translateY(-2px); box-shadow: var(--uq-shadow-pop); }
.uq-cmd-btn:hover::before { transform: scaleX(1); }
.uq-cmd-btn-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: grid; place-items: center;
    font-size: 14px;
    color: #fff;
    margin-bottom: 4px;
}
.uq-cmd-btn-label {
    font-family: var(--uq-hud-mono);
    font-size: 9px;
    letter-spacing: .12em;
    color: var(--uq-ink-4);
    font-weight: 700;
    text-transform: uppercase;
}
.uq-cmd-btn-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--uq-ink);
    letter-spacing: -.01em;
}
.uq-cmd-btn-claim::before  { background: var(--uq-cyan); }
.uq-cmd-btn-claim  .uq-cmd-btn-icon { background: linear-gradient(135deg, var(--uq-cyan), var(--uq-cyan-2)); }
.uq-cmd-btn-approve::before{ background: var(--uq-green); }
.uq-cmd-btn-approve .uq-cmd-btn-icon { background: linear-gradient(135deg, var(--uq-green), #10b981); }
.uq-cmd-btn-decline::before{ background: var(--uq-rose); }
.uq-cmd-btn-decline .uq-cmd-btn-icon { background: linear-gradient(135deg, var(--uq-rose), var(--uq-rose-2)); }
.uq-cmd-btn-info::before   { background: var(--uq-amber); }
.uq-cmd-btn-info    .uq-cmd-btn-icon { background: linear-gradient(135deg, var(--uq-amber), var(--uq-amber-2)); }
.uq-cmd-btn-assign::before { background: var(--uq-indigo); }
.uq-cmd-btn-assign  .uq-cmd-btn-icon { background: linear-gradient(135deg, var(--uq-indigo), #6366f1); }
.uq-cmd-btn-skip::before   { background: var(--uq-ink-4); }
.uq-cmd-btn-skip    .uq-cmd-btn-icon { background: linear-gradient(135deg, #64748b, #475569); }

/* ============================================================
   AUDIT RIBBON (horizontal timeline)
   ============================================================ */
.uq-audit-ribbon {
    padding: 18px 28px;
    background: var(--uq-surface);
}
.uq-audit-ribbon-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.uq-audit-ribbon-title {
    font-family: var(--uq-hud-mono);
    font-size: 10px;
    letter-spacing: .12em;
    color: var(--uq-ink-3);
    font-weight: 700;
}
.uq-audit-ribbon-title strong {
    font-size: 13px;
    color: var(--uq-ink);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}
.uq-audit-ribbon-count {
    font-family: var(--uq-hud-mono);
    font-size: 10px;
    color: var(--uq-cyan);
    padding: 3px 8px;
    background: rgba(8, 145, 178, .08);
    border-radius: 999px;
    font-weight: 600;
}

.uq-ribbon {
    position: relative;
    padding-left: 0;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
}
.uq-ribbon::-webkit-scrollbar { width: 4px; }
.uq-ribbon::-webkit-scrollbar-thumb { background: var(--uq-line-2); border-radius: 2px; }

.uq-ribbon-row {
    display: grid;
    grid-template-columns: 80px 14px 1fr;
    gap: 12px;
    padding: 8px 0;
    align-items: flex-start;
    position: relative;
}
.uq-ribbon-row::after {
    content: '';
    position: absolute;
    left: 86px;
    top: 18px; bottom: -8px;
    width: 1px;
    background: var(--uq-line);
}
.uq-ribbon-row:last-child::after { display: none; }
.uq-ribbon-time {
    font-family: var(--uq-hud-mono);
    font-size: 10px;
    color: var(--uq-ink-3);
    text-align: right;
    padding-top: 1px;
    font-weight: 500;
}
.uq-ribbon-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--uq-surface);
    box-shadow: inset 0 0 0 2px var(--uq-ink-4);
    margin-top: 4px;
    z-index: 1;
}
.uq-ribbon-row.sys     .uq-ribbon-dot { box-shadow: inset 0 0 0 2px var(--uq-ink-4); }
.uq-ribbon-row.act     .uq-ribbon-dot { box-shadow: inset 0 0 0 2px var(--uq-cyan); }
.uq-ribbon-row.approve .uq-ribbon-dot { box-shadow: inset 0 0 0 2px var(--uq-green); }
.uq-ribbon-row.decline .uq-ribbon-dot { box-shadow: inset 0 0 0 2px var(--uq-rose); }
.uq-ribbon-row.info    .uq-ribbon-dot { box-shadow: inset 0 0 0 2px var(--uq-amber); }
.uq-ribbon-row:first-child .uq-ribbon-dot {
    animation: uqRibbonPulse 2s ease-in-out infinite;
}
@keyframes uqRibbonPulse {
    0%, 100% { box-shadow: inset 0 0 0 2px var(--uq-cyan), 0 0 0 0 rgba(8, 145, 178, .4); }
    50%      { box-shadow: inset 0 0 0 2px var(--uq-cyan), 0 0 0 4px rgba(8, 145, 178, 0); }
}
.uq-ribbon-info { min-width: 0; }
.uq-ribbon-line {
    font-size: 12px;
    color: var(--uq-ink);
}
.uq-ribbon-line strong { font-weight: 600; }
.uq-ribbon-detail {
    font-size: 11px;
    color: var(--uq-ink-2);
    margin-top: 2px;
    line-height: 1.5;
    font-family: var(--uq-hud-mono);
}

/* === Verdict summary (decided cases) === */
.uq-verdict-summary {
    padding: 18px 28px;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    align-items: center;
    border-bottom: 1px solid var(--uq-line);
    position: relative;
    overflow: hidden;
}
.uq-verdict-summary.approve {
    background:
        radial-gradient(ellipse at 0% 50%, rgba(5,150,105,.06) 0%, transparent 60%),
        var(--uq-surface);
    box-shadow: inset 4px 0 0 var(--uq-green);
}
.uq-verdict-summary.decline {
    background:
        radial-gradient(ellipse at 0% 50%, rgba(225,29,72,.06) 0%, transparent 60%),
        var(--uq-surface);
    box-shadow: inset 4px 0 0 var(--uq-rose);
}
.uq-verdict-ico {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: grid; place-items: center;
    color: #fff;
    font-size: 22px;
}
.uq-verdict-summary.approve .uq-verdict-ico { background: linear-gradient(135deg, #059669, #047857); box-shadow: 0 0 20px rgba(5, 150, 105, .3); }
.uq-verdict-summary.decline .uq-verdict-ico { background: linear-gradient(135deg, #e11d48, #be123c); box-shadow: 0 0 20px rgba(225, 29, 72, .3); }
.uq-verdict-eyebrow {
    font-family: var(--uq-hud-mono);
    font-size: 9px;
    letter-spacing: .14em;
    color: var(--uq-ink-3);
    font-weight: 700;
    margin-bottom: 2px;
}
.uq-verdict-name {
    font-size: 22px; font-weight: 700; color: var(--uq-ink);
    letter-spacing: -.02em;
    margin-bottom: 4px;
}
.uq-verdict-reason {
    font-size: 12px; color: var(--uq-ink-2);
}
.uq-verdict-reason code {
    font-family: var(--uq-hud-mono);
    font-size: 11px;
    background: var(--uq-surface);
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--uq-cyan);
    margin-right: 8px;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--uq-line-2);
}

/* ============================================================
   DECK STRIP (bottom)
   ============================================================ */
.uq-deck {
    padding: 18px 24px 28px;
    max-width: 1700px;
    margin: 0 auto;
}
.uq-deck-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 4px;
}
.uq-deck-eyebrow {
    font-family: var(--uq-hud-mono);
    font-size: 10px;
    letter-spacing: .14em;
    color: var(--uq-cyan);
    font-weight: 700;
}
.uq-deck-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--uq-ink);
    margin-top: 2px;
    letter-spacing: -.01em;
}
.uq-deck-controls { display: flex; gap: 6px; }
.uq-deck-arrow {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--uq-surface);
    border: 1px solid var(--uq-line);
    color: var(--uq-ink-2);
    cursor: pointer;
    display: grid; place-items: center;
    transition: all .15s ease;
}
.uq-deck-arrow:hover { background: var(--uq-hud-bg); color: var(--uq-cyan-2); border-color: var(--uq-cyan); }

.uq-deck-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 0 10px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}
.uq-deck-strip::-webkit-scrollbar { height: 4px; }
.uq-deck-strip::-webkit-scrollbar-thumb { background: var(--uq-line-2); border-radius: 2px; }

.uq-deck-card {
    flex-shrink: 0;
    width: 220px;
    background: var(--uq-surface);
    border-radius: 10px;
    box-shadow: var(--uq-shadow-card);
    padding: 12px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all .2s cubic-bezier(.2,.7,.2,1);
    animation: uqDeckIn .35s cubic-bezier(.2,.7,.2,1) both;
    animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes uqDeckIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.uq-deck-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
}
.uq-deck-card[data-prio='critical']::before { background: var(--uq-rose); }
.uq-deck-card[data-prio='high']::before     { background: var(--uq-amber); }
.uq-deck-card[data-prio='medium']::before   { background: var(--uq-cyan); }
.uq-deck-card[data-prio='low']::before      { background: var(--uq-ink-4); }
.uq-deck-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--uq-shadow-pop);
}
.uq-deck-card.active {
    box-shadow: 0 0 0 2px var(--uq-cyan), 0 12px 24px -8px rgba(8, 145, 178, .25);
}
.uq-deck-card.breach {
    background: linear-gradient(180deg, rgba(225,29,72,.04), rgba(225,29,72,.06));
}

.uq-deck-card-top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
}
.uq-deck-card-id {
    font-family: var(--uq-hud-mono);
    font-size: 10px;
    color: var(--uq-ink-3);
    letter-spacing: .04em;
}
.uq-deck-card-sla {
    font-family: var(--uq-hud-mono);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(5, 150, 105, .1);
    color: var(--uq-green);
}
.uq-deck-card-sla.warn { background: rgba(217, 119, 6, .12); color: var(--uq-amber); }
.uq-deck-card-sla.bad  { background: rgba(225, 29, 72, .12); color: var(--uq-rose); animation: uqSlaPulse 1.4s ease-in-out infinite; }
.uq-deck-card-sla.over { background: var(--uq-rose); color: #fff; animation: uqSlaPulse 1s ease-in-out infinite; }
.uq-deck-card-sla.done { background: var(--uq-surface-3); color: var(--uq-ink-4); }
.uq-deck-card-name {
    font-size: 13px; font-weight: 600; color: var(--uq-ink);
    margin-bottom: 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uq-deck-card-meta {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px;
    color: var(--uq-ink-2);
}
.uq-deck-card-reason {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--uq-hud-mono);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.uq-deck-card-amount {
    margin-left: auto;
    font-family: var(--uq-hud-mono);
    font-weight: 700;
    color: var(--uq-ink);
}

/* ============================================================
   BUTTONS (shared)
   ============================================================ */
.uq-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    font-size: 12px; font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s ease;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    font-family: var(--uq-hud-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.uq-btn-primary {
    background: var(--uq-hud-bg); color: var(--uq-cyan-2);
    box-shadow: inset 0 0 0 1px var(--uq-cyan), 0 0 12px rgba(8, 145, 178, .2);
}
.uq-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px var(--uq-cyan), 0 4px 16px rgba(8, 145, 178, .3);
}
.uq-btn-ghost { background: transparent; color: var(--uq-ink-2); }
.uq-btn-ghost:hover { background: var(--uq-surface-3); color: var(--uq-ink); }
.uq-btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; }

/* ============================================================
   MODALS
   ============================================================ */
.uq-modal {
    position: fixed; inset: 0;
    z-index: 250;
    display: grid; place-items: center;
    padding: 24px;
}
.uq-modal-scrim {
    position: absolute; inset: 0;
    background: rgba(11, 18, 32, .65);
    backdrop-filter: blur(6px);
    animation: uqScrimIn .25s ease-out both;
}
@keyframes uqScrimIn { from { opacity: 0; } to { opacity: 1; } }
.uq-modal-dialog {
    position: relative;
    background: var(--uq-surface);
    border-radius: 14px;
    box-shadow: var(--uq-shadow-pop), 0 0 0 1px rgba(8, 145, 178, .2);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    display: flex; flex-direction: column;
    animation: uqDlgIn .3s cubic-bezier(.2,.7,.2,1) both;
    overflow: hidden;
}
.uq-modal-wide { max-width: 640px; }
@keyframes uqDlgIn {
    from { opacity: 0; transform: scale(.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.uq-modal-head {
    padding: 14px 20px;
    background: var(--uq-hud-bg);
    color: #f1f5f9;
    border-bottom: 1px solid rgba(8, 145, 178, .25);
    display: flex; align-items: center; justify-content: space-between;
    position: relative;
}
.uq-modal-head::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--uq-cyan-2), transparent);
    opacity: .6;
}
.uq-modal-head h3 {
    font-family: var(--uq-hud-mono);
    font-size: 13px;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
    letter-spacing: .08em;
    display: flex; align-items: center; gap: 8px;
}
.uq-modal-head h3 i { color: var(--uq-cyan-2); font-size: 12px; }
.uq-modal-close {
    background: transparent; border: none;
    color: var(--uq-ink-4); cursor: pointer;
    width: 26px; height: 26px;
    border-radius: 6px; display: grid; place-items: center;
    transition: all .15s ease;
}
.uq-modal-close:hover { background: rgba(255,255,255,.08); color: #f1f5f9; }
.uq-modal-body { padding: 20px; flex: 1; overflow-y: auto; }
.uq-modal-foot {
    padding: 14px 20px;
    border-top: 1px solid var(--uq-line);
    background: var(--uq-surface-2);
    display: flex; justify-content: flex-end; gap: 8px;
}

/* Verdict modal tabs */
.uq-verdict-tabs {
    display: flex;
    background: var(--uq-hud-bg);
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
    margin-bottom: 16px;
}
.uq-verdict-tab {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: none;
    font-family: var(--uq-hud-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--uq-ink-4);
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s ease;
    text-transform: uppercase;
    letter-spacing: .1em;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.uq-verdict-tab:hover { color: #f1f5f9; }
.uq-verdict-tab.active {
    background: var(--uq-surface);
}
.uq-verdict-tab.active[data-tab='approve'] { color: var(--uq-green); box-shadow: 0 0 12px rgba(5, 150, 105, .3); }
.uq-verdict-tab.active[data-tab='decline'] { color: var(--uq-rose); box-shadow: 0 0 12px rgba(225, 29, 72, .25); }

/* Reason picker */
.uq-reasons {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 14px;
}
.uq-reason {
    display: grid;
    grid-template-columns: 22px 70px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: var(--uq-surface-2);
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s ease;
}
.uq-reason:hover { background: var(--uq-surface-3); }
.uq-reason.checked { box-shadow: inset 0 0 0 1px var(--uq-cyan); background: rgba(8, 145, 178, .04); }
.uq-reason[data-route='approve'].checked { background: rgba(5, 150, 105, .06); box-shadow: inset 0 0 0 1px var(--uq-green); }
.uq-reason[data-route='decline'].checked { background: rgba(225, 29, 72, .04); box-shadow: inset 0 0 0 1px var(--uq-rose); }
.uq-reason-check {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--uq-line-2);
    background: var(--uq-surface);
    display: grid; place-items: center;
    color: transparent;
    font-size: 9px;
    transition: all .15s ease;
}
.uq-reason.checked .uq-reason-check {
    background: var(--uq-cyan); border-color: var(--uq-cyan); color: #fff;
}
.uq-reason[data-route='approve'].checked .uq-reason-check { background: var(--uq-green); border-color: var(--uq-green); }
.uq-reason[data-route='decline'].checked .uq-reason-check { background: var(--uq-rose); border-color: var(--uq-rose); }
.uq-reason-code {
    font-family: var(--uq-hud-mono);
    font-size: 11px;
    color: var(--uq-cyan);
    background: var(--uq-surface);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    text-align: center;
    box-shadow: inset 0 0 0 1px var(--uq-line);
}
.uq-reason-label {
    font-size: 13px;
    color: var(--uq-ink);
    font-weight: 500;
}

.uq-note-row { display: flex; flex-direction: column; gap: 4px; }
.uq-note-row > label {
    font-family: var(--uq-hud-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 700;
    color: var(--uq-ink-3);
}
.uq-note {
    padding: 10px 12px;
    background: var(--uq-surface-2);
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 13px;
    color: var(--uq-ink);
    font-family: 'Inter', system-ui, sans-serif;
    min-height: 80px;
    resize: vertical;
    transition: all .15s ease;
}
.uq-note:focus {
    outline: none;
    background: var(--uq-surface);
    border-color: var(--uq-cyan);
    box-shadow: 0 0 0 3px rgba(8, 145, 178, .12);
}

/* Assignee picker */
.uq-assignee-picker { display: flex; flex-direction: column; gap: 6px; }
.uq-assignee-pick {
    display: grid;
    grid-template-columns: 22px 36px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: var(--uq-surface-2);
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s ease;
}
.uq-assignee-pick:hover { background: var(--uq-surface-3); }
.uq-assignee-pick.checked { box-shadow: inset 0 0 0 1px var(--uq-cyan); background: rgba(8, 145, 178, .04); }
.uq-assignee-pick-radio {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--uq-line-2);
    background: var(--uq-surface);
    position: relative;
    transition: all .15s ease;
}
.uq-assignee-pick.checked .uq-assignee-pick-radio { border-color: var(--uq-cyan); }
.uq-assignee-pick.checked .uq-assignee-pick-radio::after {
    content: '';
    position: absolute; inset: 3px;
    border-radius: 50%;
    background: var(--uq-cyan);
}
.uq-assignee-pick-avatar {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: grid; place-items: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--uq-hud-mono);
}
.uq-assignee-pick-avatar[data-tone='sapphire'] { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.uq-assignee-pick-avatar[data-tone='violet']   { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.uq-assignee-pick-avatar[data-tone='teal']     { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.uq-assignee-pick-avatar[data-tone='amber']    { background: linear-gradient(135deg, #f59e0b, #b45309); }
.uq-assignee-pick-name { font-size: 13px; font-weight: 600; color: var(--uq-ink); }
.uq-assignee-pick-title {
    font-family: var(--uq-hud-mono);
    font-size: 10px;
    color: var(--uq-ink-3);
    margin-top: 1px;
    letter-spacing: .04em;
}

/* ============================================================
   VERDICT REVEAL OVERLAY (futuristic)
   ============================================================ */
.uq-reveal {
    position: fixed; inset: 0;
    z-index: 999;
    display: grid; place-items: center;
    background: rgba(11, 18, 32, .8);
    backdrop-filter: blur(10px);
    animation: uqRevealIn .35s ease-out both;
}
@keyframes uqRevealIn {
    from { opacity: 0; backdrop-filter: blur(0); }
    to   { opacity: 1; backdrop-filter: blur(10px); }
}
.uq-reveal-stage {
    position: relative;
    width: 320px; height: 320px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.uq-reveal-rings { position: absolute; inset: 0; }
.uq-rev-ring {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid currentColor;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: uqRevealRing 2.2s ease-out infinite;
}
.uq-reveal-stage[data-route='approve'] .uq-rev-ring { color: #34d399; }
.uq-reveal-stage[data-route='decline'] .uq-rev-ring { color: #f87171; }
.uq-rev-ring-1 { width: 100px; height: 100px; animation-delay: 0s; }
.uq-rev-ring-2 { width: 100px; height: 100px; animation-delay: .7s; }
.uq-rev-ring-3 { width: 100px; height: 100px; animation-delay: 1.4s; }
@keyframes uqRevealRing {
    0%   { width: 100px; height: 100px; opacity: .9; }
    100% { width: 320px; height: 320px; opacity: 0; }
}
.uq-reveal-ico {
    width: 100px; height: 100px;
    border-radius: 50%;
    display: grid; place-items: center;
    color: #fff;
    font-size: 44px;
    box-shadow: 0 0 48px currentColor;
    animation: uqRevealIco .8s cubic-bezier(.34, 1.56, .64, 1) both .15s;
    z-index: 2;
}
.uq-reveal-ico.approve { background: linear-gradient(135deg, #059669, #047857); color: #34d399; }
.uq-reveal-ico.decline { background: linear-gradient(135deg, #e11d48, #be123c); color: #f87171; }
.uq-reveal-ico.info    { background: linear-gradient(135deg, #d97706, #b45309); color: #fbbf24; }
@keyframes uqRevealIco {
    0%   { transform: scale(0) rotate(-180deg); }
    60%  { transform: scale(1.15) rotate(10deg); }
    100% { transform: scale(1) rotate(0); }
}
.uq-reveal-typed {
    margin-top: 28px;
    font-family: var(--uq-hud-mono);
    font-size: 26px;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-shadow: 0 0 24px currentColor;
    min-height: 32px;
}
.uq-reveal-typed::after {
    content: '_';
    margin-left: 4px;
    animation: uqCursorBlink 1s steps(1) infinite;
    color: var(--uq-cyan-2);
}
@keyframes uqCursorBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}
.uq-reveal-sub {
    font-family: var(--uq-hud-mono);
    font-size: 12px;
    color: var(--uq-cyan-2);
    margin-top: 12px;
    opacity: 0;
    letter-spacing: .08em;
    animation: uqFadeIn .4s ease-out forwards 1.6s;
}
@keyframes uqFadeIn { to { opacity: 1; } }

.uq-reveal-particles {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.uq-particle {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 1px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   TOASTS
   ============================================================ */
.uq-toasts {
    position: fixed;
    top: 80px; right: 20px;
    z-index: 1000;
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
}
.uq-toast {
    pointer-events: auto;
    background: var(--uq-hud-bg);
    color: #f1f5f9;
    padding: 10px 16px;
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(11, 18, 32, .35), 0 0 0 1px rgba(8, 145, 178, .25);
    display: flex; align-items: center; gap: 8px;
    font-family: var(--uq-hud-mono);
    font-size: 12px; font-weight: 600;
    min-width: 220px;
    letter-spacing: .04em;
    animation: uqToastIn .3s cubic-bezier(.2,.7,.2,1);
}
.uq-toast i { color: var(--uq-green); }
.uq-toast.warn i { color: var(--uq-amber-2); }
.uq-toast.bad i  { color: var(--uq-rose-2); }
.uq-toast.out { animation: uqToastOut .25s ease-out forwards; }
@keyframes uqToastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes uqToastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(20px); } }

/* Slide-in transition for case swap */
.uq-focus-body.swapping {
    animation: uqSwap .4s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes uqSwap {
    0%   { opacity: 0; transform: translateX(20px); }
    100% { opacity: 1; transform: translateX(0); }
}