:root {
    --red:#c51f2b;
    --red-bright:#ed3341;
    --panel:rgba(12,15,20,.92);
    --panel-2:rgba(22,26,33,.94);
    --line:rgba(255,255,255,.1);
    --muted:#9da5b2;
    --text:#f4f6f8;
    --green:#35c77a;
    --amber:#f0ad4e
}

* {
    box-sizing:border-box
}

body {
    min-height:100vh;
    margin:0;
    color:var(--text);
    background:
        radial-gradient(circle at 15% 0%, rgba(213,31,43,.12), transparent 30rem),
        linear-gradient(180deg, #090a0c, #050607);
    font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif
}

.page-shell {
    max-width:1500px
}

.brand-header {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    padding-bottom:18px
}

.brand-header h1 {
    font-size:clamp(2rem,4vw,3.3rem);
    font-weight:800;
    letter-spacing:-.04em;
    margin:.15rem 0
}

.brand-header p {
    color:var(--muted);
    margin:0
}

.eyebrow,.section-kicker {
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.18em;
    color:var(--red-bright)
}

.header-badge {
    border:1px solid rgba(237,51,65,.45);
    background:rgba(197,31,43,.12);
    border-radius:999px;
    padding:.6rem .9rem;
    font-size:.75rem;
    font-weight:800;
    letter-spacing:.12em
}

.status-dot {
    display:inline-block;
    width:8px;
    height:8px;
    background:var(--green);
    border-radius:50%;
    box-shadow:0 0 12px var(--green);
    margin-right:7px
}

.panel,.metric-card {
    background:linear-gradient(180deg,var(--panel-2),var(--panel));
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:0 16px 40px rgba(0,0,0,.25)
}

.panel {
    padding:20px
}

.panel-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px
}

.panel-heading h2,.public-search h2,.modal-title {
    font-size:1.25rem;
    margin:.15rem 0 0;
    font-weight:750
}

.metrics-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px
}

.metric-card {
    padding:16px 18px;
    border-top:2px solid rgba(213,31,43,.55)
}

.metric-card span {
    display:block;
    color:var(--muted);
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.12em
}

.metric-card strong {
    display:block;
    font-size:1.8rem;
    margin-top:3px
}

.form-control,.form-select {
    background:#0b0e13!important;
    border-color:rgba(255,255,255,.14)!important;
    color:#fff!important
}

.form-control:focus,.form-select:focus {
    border-color:var(--red-bright)!important;
    box-shadow:0 0 0 .2rem rgba(197,31,43,.18)!important
}

.form-label {
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#b6bdc8;
    font-weight:700
}

.btn-accent {
    background:linear-gradient(135deg,var(--red-bright),#95141e);
    border:0;
    color:#fff;
    font-weight:750
}

.btn-accent:hover {
    background:#e62d3a;
    color:#fff
}

.priority-check {
    padding:8px 0 2px 1.7rem
}

.priority-check.compact {
    font-size:.8rem
}

.priority-check .form-check-input:checked {
    background-color:var(--red);
    border-color:var(--red)
}

.queue-help {
    color:var(--muted);
    font-size:.82rem
}

.queue-list {
    display:flex;
    flex-direction:column;
    gap:10px
}

.queue-item {
    display:grid;
    grid-template-columns:35px 48px 1fr auto;
    gap:12px;
    align-items:center;
    padding:13px;
    border-radius:13px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.025);
    transition:border-color .2s,transform .2s,opacity .2s
}

.queue-item:hover {
    border-color:rgba(255,255,255,.2)
}

.queue-item.is-priority {
    border-left:4px solid var(--red-bright);
    background:linear-gradient(90deg,rgba(213,31,43,.06),rgba(255,255,255,.02) 45%)
}

.queue-item.dragging {
    opacity:.45;
    transform:scale(.995)
}

.drag-handle {
    font-size:1.35rem;
    letter-spacing:-.35rem;
    color:#77808d;
    cursor:grab;
    user-select:none
}

.drag-handle:active {
    cursor:grabbing
}

.position-number {
    font-size:1.35rem;
    font-weight:850;
    color:#fff;
    text-align:center
}

.queue-main {
    min-width:0
}

.queue-meta {
    margin-top:6px;
    font-size:.7rem;
    color:#7f8998
}

.priority-tag {
    margin-left:10px;
    color:#ff6470;
    font-weight:850;
    letter-spacing:.1em
}

.queue-actions {
    display:flex;
    flex-direction:column;
    gap:7px;
    min-width:155px
}

.save-status {
    text-align:right;
    color:var(--green);
    font-size:.78rem;
    min-height:1.2rem;
    margin-top:8px
}

.save-status.error {
    color:#ff6571
}

.empty-state {
    padding:50px;
    text-align:center;
    color:var(--muted)
}

.modal-content {
    background:#11151b;
    border:1px solid var(--line);
    box-shadow:0 20px 80px #000
}

.modal-header,.modal-footer {
    border-color:var(--line)
}

.completion-customer,.transfer-note {
    padding:11px 13px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--line);
    border-radius:9px
}

.transfer-note {
    font-size:.78rem;
    color:var(--muted)
}

.public-grid {
    display:grid;
    grid-template-columns:minmax(300px,.8fr) minmax(360px,1.2fr);
    gap:20px
}

.public-status {
    text-align:center;
    padding:38px 25px
}

.public-count {
    font-size:5.2rem;
    line-height:1;
    font-weight:900;
    letter-spacing:-.06em;
    margin-top:18px
}

.public-count-label {
    color:#c4cad2;
    margin:6px 0 25px
}

.turnaround {
    display:inline-block;
    padding:10px 16px;
    border-radius:999px;
    font-weight:800;
    margin-bottom:18px
}

.turnaround-success {
    background:rgba(53,199,122,.14);
    color:#62e89d;
    border:1px solid rgba(53,199,122,.35)
}

.turnaround-warning {
    background:rgba(240,173,78,.14);
    color:#ffc76f;
    border:1px solid rgba(240,173,78,.35)
}

.turnaround-orange {
    background:rgba(253,126,20,.14);
    color:#ff9d4f;
    border:1px solid rgba(253,126,20,.35)
}

.turnaround-danger {
    background:rgba(237,51,65,.14);
    color:#ff6b76;
    border:1px solid rgba(237,51,65,.35)
}

.public-status p,.public-search p {
    color:var(--muted)
}

.search-form {
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px
}

.lookup-result {
    margin-top:18px;
    padding:20px;
    border-radius:12px;
    text-align:center
}

.lookup-result.found {
    background:rgba(53,199,122,.09);
    border:1px solid rgba(53,199,122,.28)
}

.lookup-result.found>span {
    font-size:.7rem;
    letter-spacing:.15em;
    color:#62e89d;
    font-weight:850
}

.lookup-result.found>strong {
    display:block;
    font-size:3.6rem;
    line-height:1.1
}

.lookup-result dl {
    display:grid;
    grid-template-columns:1fr 1fr;
    margin:18px 0 0;
    border-top:1px solid var(--line);
    padding-top:14px
}

.lookup-result dl div {
    display:flex;
    flex-direction:column
}

.lookup-result dt {
    font-size:.68rem;
    color:var(--muted);
    text-transform:uppercase
}

.lookup-result dd {
    margin:3px 0 0;
    font-weight:700
}

.lookup-result.not-found {
    background:rgba(240,173,78,.1);
    border:1px solid rgba(240,173,78,.28);
    color:#ffd083
}

@media (max-width: 1100px) {
    .queue-item {
        grid-template-columns:30px 42px 1fr
    }

    .queue-actions {
        grid-column:3;
        flex-direction:row
    }

    .metrics-grid {
        grid-template-columns:repeat(2,1fr)
    }

}

@media (max-width: 760px) {
    .brand-header {
        align-items:flex-start;
        gap:15px;
        flex-direction:column
    }

    .metrics-grid,.public-grid {
        grid-template-columns:1fr
    }

    .queue-item {
        grid-template-columns:26px 34px 1fr;
        padding:10px
    }

    .queue-actions {
        grid-column:1/-1;
        margin-left:60px;
        flex-wrap:wrap
    }

    .queue-actions>* {
        flex:1
    }

    .search-form {
        grid-template-columns:1fr
    }

    .public-count {
        font-size:4rem
    }

}

@media (max-width: 520px) {
    .metrics-grid {
        grid-template-columns:1fr 1fr
    }

    .panel {
        padding:15px
    }

    .queue-item {
        grid-template-columns:24px 30px 1fr
    }

    .queue-actions {
        margin-left:0
    }

    .header-badge {
        display:none
    }

}