:root {
    color-scheme: dark;
    --void: #050d19;
    --navy-950: #071426;
    --navy-900: #0a1a30;
    --navy-850: #0d2139;
    --navy-800: #112943;
    --navy-700: #183552;
    --ink: #f4f7fb;
    --ink-soft: #b8c7d8;
    --muted: #7f94ad;
    --line: rgba(151, 181, 215, 0.16);
    --line-strong: rgba(151, 181, 215, 0.28);
    --blue: #4da8ff;
    --blue-bright: #77c2ff;
    --cyan: #4fe1bd;
    --orange: #ff6b47;
    --orange-hover: #ff7e5e;
    --yellow: #f5ca45;
    --danger: #ff647c;
    --shadow: 0 28px 80px rgba(0, 5, 14, 0.36);
    --radius: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    min-width: 320px;
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--navy-950);
    color: var(--ink);
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(circle at 8% 12%, rgba(77, 168, 255, 0.13), transparent 27rem),
        radial-gradient(circle at 88% 76%, rgba(79, 225, 189, 0.08), transparent 31rem),
        linear-gradient(145deg, var(--void), var(--navy-950) 45%, #081a30);
}

.ambient-grid {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: 0.34;
    background-image:
        linear-gradient(rgba(151, 181, 215, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(151, 181, 215, 0.035) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

::selection { background: var(--blue); color: var(--void); }

h1, h2, h3, h4, h5 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

button, input, textarea, select { font: inherit; }
input, textarea, select { font-family: 'Manrope', sans-serif; }
button, a, summary, label[role='button'] { -webkit-tap-highlight-color: transparent; }

.hidden { display: none !important; }
.view-container { display: none; min-height: 100vh; flex-direction: column; }
.view-container.active { display: flex; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.eyebrow,
.section-index {
    color: var(--blue-bright);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.69rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.eyebrow > span:first-child {
    display: inline-block;
    width: 26px;
    height: 1px;
    margin: 0 8px 3px 0;
    background: currentColor;
}

.glass-panel {
    background: linear-gradient(145deg, rgba(16, 41, 70, 0.98), rgba(9, 28, 50, 0.98));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow), inset 0 1px rgba(255, 255, 255, 0.035);
}

/* Brand */
.brand-lockup,
.header-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.brand-lockup > span:last-child,
.header-brand > span:last-child { display: flex; flex-direction: column; }
.brand-lockup strong,
.header-brand strong { font: 700 0.95rem/1 'Bricolage Grotesque', sans-serif; letter-spacing: 0.08em; }
.brand-lockup small,
.header-brand small { margin-top: 4px; color: var(--muted); font: 500 0.52rem/1 'IBM Plex Mono', monospace; letter-spacing: 0.19em; }

.brand-mark { position: relative; width: 46px; height: 32px; display: block; }
.brand-mark i {
    position: absolute;
    right: 0;
    display: block;
    height: 4px;
    border-radius: 999px;
    background: var(--ink);
    transform: skewX(-22deg);
}
.brand-mark i:nth-child(1) { top: 3px; width: 34px; }
.brand-mark i:nth-child(2) { top: 13px; width: 46px; background: var(--blue); }
.brand-mark i:nth-child(3) { top: 23px; width: 27px; }
.brand-mark--small { width: 36px; height: 26px; }
.brand-mark--small i { height: 3px; }
.brand-mark--small i:nth-child(1) { top: 2px; width: 26px; }
.brand-mark--small i:nth-child(2) { top: 11px; width: 36px; }
.brand-mark--small i:nth-child(3) { top: 20px; width: 21px; }

/* Login */
#login-view { justify-content: center; }

.login-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(380px, 0.75fr);
    width: min(1280px, calc(100% - 64px));
    min-height: min(780px, calc(100vh - 64px));
    margin: 32px auto;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(7, 20, 38, 0.84);
    box-shadow: 0 40px 120px rgba(0, 3, 10, 0.54);
    animation: shell-in 650ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes shell-in { from { opacity: 0; transform: translateY(12px) scale(.992); } to { opacity: 1; transform: none; } }

.login-story {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 48px 56px 38px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(77, 168, 255, 0.08), transparent 38%),
        radial-gradient(circle at 84% 31%, rgba(77, 168, 255, 0.16), transparent 20rem),
        var(--navy-900);
    border-right: 1px solid var(--line);
}

.login-story::before {
    content: '';
    position: absolute;
    width: 430px;
    height: 430px;
    top: 8%;
    right: -180px;
    border: 1px solid rgba(77, 168, 255, 0.17);
    border-radius: 50%;
    box-shadow: 0 0 0 70px rgba(77, 168, 255, 0.025), 0 0 0 140px rgba(77, 168, 255, 0.018);
}

.login-copy { position: relative; z-index: 1; max-width: 670px; margin-top: clamp(70px, 12vh, 125px); }
.login-copy h1 { margin: 18px 0 20px; font-size: clamp(3rem, 5vw, 5.25rem); }
.login-copy h1 em,
.workspace-intro h1 em { color: var(--blue); font-style: normal; }
.login-copy > p:last-child { max-width: 590px; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.75; }

.signal-map {
    position: relative;
    width: min(100%, 700px);
    height: 150px;
    margin: auto 0 36px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(77, 168, 255, 0.04), transparent);
}
.signal-map__label { position: absolute; top: 13px; left: 0; color: var(--muted); font: 500 0.58rem 'IBM Plex Mono', monospace; letter-spacing: 0.13em; text-transform: uppercase; }
.signal-path { position: absolute; top: 83px; height: 1px; background: linear-gradient(90deg, var(--blue), var(--cyan)); transform-origin: left; }
.signal-path::after { content: ''; position: absolute; top: -3px; right: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.signal-path--one { left: 15%; width: 29%; transform: rotate(-5deg); }
.signal-path--two { left: 51%; width: 30%; transform: rotate(5deg); }
.signal-node { position: absolute; top: 56px; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--navy-850); box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.signal-node b { color: var(--blue-bright); font: 600 0.72rem 'IBM Plex Mono', monospace; }
.signal-node span { color: var(--ink-soft); font-size: 0.72rem; font-weight: 600; }
.signal-node--source { left: 0; }
.signal-node--engine { left: 43%; border-color: rgba(77,168,255,.42); }
.signal-node--result { right: 0; border-color: rgba(79,225,189,.38); }
.signal-node--result b { color: var(--cyan); }

.login-metrics { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.login-metrics div { display: flex; flex-direction: column; padding: 22px 20px 0 0; }
.login-metrics div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.login-metrics strong { color: var(--ink); font: 600 1.15rem 'IBM Plex Mono', monospace; }
.login-metrics span { margin-top: 4px; color: var(--muted); font-size: 0.68rem; }

.login-panel {
    align-self: center;
    width: min(440px, calc(100% - 64px));
    margin: 40px auto;
    padding: 36px;
    border-top: 3px solid var(--orange);
}
.login-panel__topline { display: flex; align-items: center; gap: 8px; margin-bottom: 54px; color: var(--cyan); font: 500 0.65rem 'IBM Plex Mono', monospace; text-transform: uppercase; }
.login-panel__code { margin-left: auto; color: var(--muted); }
.live-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(79, 225, 189, 0.1), 0 0 16px rgba(79,225,189,.55); }
.login-panel > .eyebrow { margin-bottom: 10px; color: var(--orange); }
.login-panel h2 { font-size: 2.1rem; }
.login-panel .subtitle { margin: 12px 0 32px; color: var(--ink-soft); font-size: 0.86rem; line-height: 1.65; }
.secure-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; color: var(--muted); font-size: 0.68rem; }
.secure-note svg { width: 15px; color: var(--cyan); }

/* Forms */
.input-group { min-width: 0; margin-bottom: 21px; }
.input-group.compact { margin-bottom: 0; }
.input-group > label,
.supplier-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--ink-soft);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}
.input-group > label span { color: var(--muted); text-transform: none; letter-spacing: 0; }

input[type='text'], input[type='password'], input[type='url'], textarea, select {
    width: 100%;
    min-height: 48px;
    padding: 13px 15px;
    color: var(--ink);
    background: rgba(5, 17, 31, 0.66);
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: #60758e; }
input:hover, textarea:hover, select:hover { border-color: rgba(151,181,215,.42); }
input:focus, textarea:focus, select:focus { border-color: var(--blue); background: rgba(5,17,31,.9); box-shadow: 0 0 0 3px rgba(77,168,255,.12); }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px #091a30 inset; caret-color: var(--ink); }

.input-shell { position: relative; }
.input-shell > svg { position: absolute; z-index: 1; top: 50%; left: 15px; width: 18px; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.input-shell input { padding-left: 44px; }
.field-hint { margin-top: 9px; color: var(--muted); font-size: 0.69rem; }

button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 700;
    transition: transform 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
button:hover { transform: translateY(-1px); }
button:focus-visible, a:focus-visible, summary:focus-visible, label[role='button']:focus-visible { outline: 3px solid rgba(77,168,255,.36); outline-offset: 3px; }
button:disabled { opacity: .62; cursor: wait; transform: none; }
.btn-primary { padding: 12px 18px; color: #fff; background: var(--orange); box-shadow: 0 10px 28px rgba(255,107,71,.18); }
.btn-primary:hover { background: var(--orange-hover); box-shadow: 0 13px 32px rgba(255,107,71,.26); }
.btn-primary svg { width: 18px; }
.login-panel .btn-primary { width: 100%; min-height: 52px; margin-top: 5px; }
.btn-secondary { padding: 10px 15px; color: var(--ink-soft); background: rgba(255,255,255,.025); border: 1px solid var(--line-strong); }
.btn-secondary:hover { color: var(--ink); background: rgba(77,168,255,.08); border-color: rgba(77,168,255,.38); }
.btn-danger { padding: 10px 15px; color: #ffd8df; background: rgba(255,100,124,.1); border: 1px solid rgba(255,100,124,.28); }
.btn-danger:hover { background: rgba(255,100,124,.18); }
.btn-sm { width: auto; min-height: 36px; padding: 8px 13px; font-size: .73rem; }
.btn-large { min-height: 56px; padding: 15px 22px; }
.btn-icon-text svg { width: 17px; }

/* Header */
.glass-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    min-height: 74px;
    padding: 0 clamp(20px, 4vw, 58px);
    background: rgba(5, 15, 29, 0.88);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(18px);
}
.header-brand { padding-right: clamp(18px, 3vw, 42px); }
.header-context { display: flex; align-items: center; gap: 18px; }
.header-context__line { width: 1px; height: 32px; background: var(--line-strong); }
.header-context div { display: flex; flex-direction: column; }
.header-context small { color: var(--muted); font: 500 .55rem 'IBM Plex Mono', monospace; letter-spacing: .09em; text-transform: uppercase; }
.header-context strong { margin-top: 2px; font-size: .76rem; }
.workspace-nav { display: flex; gap: 7px; margin-left: auto; margin-right: 24px; }
.workspace-nav .btn-primary { box-shadow: none; }
.user-controls { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.connection-state { display: inline-flex; align-items: center; gap: 7px; margin-right: 5px; color: var(--muted); font: 500 .62rem 'IBM Plex Mono', monospace; text-transform: uppercase; }
.connection-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.badge { padding: 7px 10px; color: var(--blue-bright); background: rgba(77,168,255,.09); border: 1px solid rgba(77,168,255,.2); border-radius: 7px; font: 600 .61rem 'IBM Plex Mono', monospace; letter-spacing: .07em; text-transform: uppercase; }

/* Dashboard */
.dashboard-content { width: min(1220px, calc(100% - 48px)); margin: 0 auto; padding: 58px 0 88px; }
.workspace-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 44px; margin-bottom: 32px; }
.workspace-intro h1 { margin: 10px 0 12px; font-size: clamp(2.25rem, 4.5vw, 4.5rem); }
.workspace-intro > div:first-child > p:last-child { max-width: 700px; color: var(--ink-soft); }
.intro-metrics { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); min-width: 500px; border: 1px solid var(--line); border-radius: 13px; background: rgba(10,27,49,.74); }
.intro-metrics > div { display: flex; align-items: center; gap: 10px; padding: 13px 15px; }
.intro-metrics > div + div { border-left: 1px solid var(--line); }
.metric-icon { display: grid; flex: 0 0 auto; width: 31px; height: 31px; place-items: center; border-radius: 8px; font: 600 .68rem 'IBM Plex Mono', monospace; }
.metric-icon--blue { color: var(--blue-bright); background: rgba(77,168,255,.12); }
.metric-icon--green { color: var(--cyan); background: rgba(79,225,189,.1); }
.metric-icon--orange { color: var(--orange); background: rgba(255,107,71,.1); }
.intro-metrics p { display: flex; flex-direction: column; }
.intro-metrics small { color: var(--muted); font: 500 .54rem 'IBM Plex Mono', monospace; letter-spacing: .07em; text-transform: uppercase; }
.intro-metrics strong { margin-top: 2px; font-size: .69rem; white-space: nowrap; }

.quoting-panel, .admin-panel { overflow: hidden; }
.panel-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 30px 34px 26px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(77,168,255,.055), transparent 60%); }
.quote-heading { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.heading-mark { display: grid; width: 47px; height: 47px; place-items: center; color: var(--blue-bright); border: 1px solid rgba(77,168,255,.33); border-radius: 11px; background: rgba(77,168,255,.08); box-shadow: inset 0 0 18px rgba(77,168,255,.05); }
.heading-mark span { font: 600 .71rem 'IBM Plex Mono', monospace; }
.panel-heading h3 { margin: 5px 0 7px; font-size: 1.7rem; }
.panel-desc { max-width: 730px; color: var(--ink-soft); font-size: .82rem; }
.ready-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; color: var(--cyan); border: 1px solid rgba(79,225,189,.2); border-radius: 999px; background: rgba(79,225,189,.07); font: 500 .6rem 'IBM Plex Mono', monospace; white-space: nowrap; text-transform: uppercase; }
.ready-chip i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

.quote-form { display: grid; grid-template-columns: .82fr 1.18fr; }
.form-module { min-width: 0; padding: 29px 32px 10px; border-bottom: 1px solid var(--line); }
.form-module--location { border-right: 1px solid var(--line); }
.form-module--request { grid-row: span 2; }
.form-module--requirements { border-right: 1px solid var(--line); }
.module-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.module-heading > span { display: grid; width: 29px; height: 29px; place-items: center; color: var(--blue-bright); border: 1px solid rgba(77,168,255,.25); border-radius: 50%; font: 500 .58rem 'IBM Plex Mono', monospace; }
.module-heading > div { display: flex; flex-direction: column; }
.module-heading small { color: var(--muted); font: 500 .55rem 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.module-heading strong { margin-top: 2px; font-size: .78rem; }

.tabs { display: inline-flex; gap: 4px; margin-bottom: 20px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: rgba(5,17,31,.5); }
.tab-btn { min-height: 35px; padding: 8px 13px; color: var(--muted); background: transparent; border-radius: 7px; font-size: .7rem; }
.tab-btn:hover { color: var(--ink); background: rgba(255,255,255,.03); }
.tab-btn.active { color: var(--ink); background: var(--navy-700); box-shadow: 0 5px 14px rgba(0,0,0,.18); }
.tab-content { display: none; }
.tab-content.active { display: block; animation: content-in 250ms ease both; }
@keyframes content-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.file-drop-area { display: flex; min-height: 190px; padding: 24px; align-items: center; justify-content: center; flex-direction: column; gap: 9px; color: var(--ink-soft); border: 1px dashed rgba(151,181,215,.4); border-radius: 11px; background: rgba(5,17,31,.42); cursor: pointer; text-align: center; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.file-drop-area:hover { border-color: var(--blue); background: rgba(77,168,255,.055); }
.upload-icon { display: grid; width: 43px; height: 43px; margin-bottom: 3px; place-items: center; color: var(--blue-bright); border: 1px solid rgba(77,168,255,.28); border-radius: 10px; background: rgba(77,168,255,.08); }
.upload-icon svg { width: 20px; }
.file-msg { font-size: .8rem; font-weight: 700; overflow-wrap: anywhere; }
.file-drop-area small { color: var(--muted); font-size: .65rem; }
.file-drop-area input { display: none; }
.file-drop-area.is-dragging { border-style: solid; border-color: var(--blue); background: rgba(77,168,255,.1); transform: scale(.992); }
.file-drop-area.has-file { border-color: var(--cyan); background: rgba(79,225,189,.06); }
.file-drop-area.has-file .upload-icon, .file-drop-area.has-file .file-msg { color: var(--cyan); }
.file-drop-area.has-error { border-color: var(--danger); background: rgba(255,100,124,.06); }
.file-drop-area.has-error .upload-icon, .file-drop-area.has-error .file-msg { color: var(--danger); }

.quote-submit-row { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 32px; background: rgba(4,14,27,.3); }
.quote-submit-row > p { display: flex; align-items: center; gap: 12px; color: var(--ink-soft); }
.quote-submit-row > p > span:last-child { display: flex; flex-direction: column; }
.quote-submit-row > p strong { color: var(--ink); font-size: .72rem; }
.quote-submit-row > p small { color: var(--muted); font-size: .64rem; }
.quote-submit-row .btn-primary { min-width: 310px; }
#btn-quote:disabled > svg { display: none; }
#quote-msg { grid-column: 1 / -1; margin: 0 32px 24px; }

/* Telegram and progress */
.telegram-config { margin: 0; border-top: 1px solid var(--line); }
.telegram-config summary { display: flex; align-items: center; gap: 13px; padding: 18px 32px; cursor: pointer; list-style: none; }
.telegram-config summary::-webkit-details-marker { display: none; }
.telegram-icon { display: grid; width: 34px; height: 34px; place-items: center; color: var(--blue-bright); border-radius: 9px; background: rgba(77,168,255,.09); }
.telegram-config summary > span:nth-child(2) { display: flex; flex-direction: column; }
.telegram-config summary strong { font-size: .72rem; }
.telegram-config summary small { color: var(--muted); font-size: .62rem; }
.summary-action { margin-left: auto; color: var(--blue-bright); font: 500 .64rem 'IBM Plex Mono', monospace; text-transform: uppercase; }
.summary-action::after { content: '+'; margin-left: 8px; }
.telegram-config[open] .summary-action::after { content: '−'; }
.telegram-config__body { padding: 0 32px 22px 79px; }
.telegram-config__body .flex-row { flex-wrap: nowrap; }
.telegram-config__body .flex-row input { flex: 1; }

.quote-progress { margin: 24px 32px; padding: 20px; border: 1px solid rgba(77,168,255,.2); border-radius: 11px; background: rgba(77,168,255,.055); }
.qp-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: var(--ink-soft); font: 500 .65rem 'IBM Plex Mono', monospace; text-transform: uppercase; }
.qp-label strong { color: var(--blue-bright); font-weight: 500; }
.qp-bar { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(5,17,31,.8); }
.qp-fill { width: 5%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan)); box-shadow: 0 0 16px rgba(77,168,255,.5); transition: width 400ms ease; }
.qp-note { margin-top: 8px; color: var(--muted); font-size: .68rem; }

/* Results */
.results-container { padding: 32px; border-top: 1px solid var(--line); background: rgba(4,14,27,.28); }
.results-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.results-heading h4 { margin-top: 6px; font-size: 1.5rem; }
.quotes-list { display: grid; gap: 15px; }
.quote-card { position: relative; padding: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg, rgba(17,42,72,.9), rgba(8,26,47,.96)); transition: border-color 160ms ease, transform 160ms ease; }
.quote-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--blue); }
.quote-card:hover { transform: translateY(-2px); border-color: rgba(77,168,255,.3); }
.quote-card.not-found { opacity: .72; }
.quote-card.not-found::before { background: var(--muted); }
.quote-card.insufficient::before { background: var(--orange); }
.quote-card p { margin: 6px 0; color: var(--ink-soft); font-size: .8rem; overflow-wrap: anywhere; }
.quote-card .label { display: inline-block; margin-right: 7px; color: var(--muted); font: 500 .6rem 'IBM Plex Mono', monospace; letter-spacing: .05em; text-transform: uppercase; }
.quote-card a { color: var(--blue-bright); text-underline-offset: 3px; word-break: break-all; }
.quote-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.quote-header h5 { margin-bottom: 6px; font-size: 1.25rem; }
.price-tag { color: var(--cyan); font: 600 1.35rem 'IBM Plex Mono', monospace; white-space: nowrap; }
.price-tag.zero { color: var(--muted); text-decoration: line-through; }
.reasoning { margin-top: 15px; padding: 14px 16px; color: var(--ink-soft); border-left: 2px solid var(--blue); border-radius: 0 8px 8px 0; background: rgba(77,168,255,.055); font-size: .76rem; }
.reasoning.tip { border-left-color: var(--cyan); background: rgba(79,225,189,.055); }
.reasoning.caveats { border-left-color: var(--orange); background: rgba(255,107,71,.055); }
.candidates { margin-top: 16px; padding-top: 14px; overflow-x: auto; border-top: 1px solid var(--line); }
.candidates summary { color: var(--blue-bright); cursor: pointer; font: 500 .65rem 'IBM Plex Mono', monospace; text-transform: uppercase; }
.references-only summary { color: var(--orange); }
.candidates table { min-width: 760px; margin-top: 12px; table-layout: fixed; }
.candidates td, .candidates th { padding: 9px 8px; overflow-wrap: anywhere; vertical-align: top; font-size: .7rem; }
.candidates td:nth-child(3), .candidates td:nth-child(4) { font-family: 'IBM Plex Mono', monospace; white-space: nowrap; }
.cita { margin-top: 5px; color: var(--muted); font-size: .67rem; font-style: italic; }
.refs { margin-top: 5px; color: var(--yellow); font-size: .68rem; }
.tag { display: inline-block; margin-left: 5px; padding: 2px 6px; border-radius: 999px; font: 500 .55rem 'IBM Plex Mono', monospace; vertical-align: middle; white-space: nowrap; }
.tag-local { color: var(--cyan); border: 1px solid rgba(79,225,189,.25); background: rgba(79,225,189,.08); }
.tag-nac { color: var(--blue-bright); border: 1px solid rgba(77,168,255,.25); background: rgba(77,168,255,.08); }
.choose { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.choose select { width: auto; min-width: 280px; max-width: 100%; }
.confirm-bar { margin-top: 22px; padding: 20px; border: 1px solid rgba(255,107,71,.25); border-radius: 11px; background: rgba(255,107,71,.055); text-align: center; }
.confirm-bar p { margin-bottom: 12px; color: var(--ink-soft); }
.confirm-bar .btn-primary { width: auto; }

.actions-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; }
.report-download { display: inline-flex; align-items: center; gap: 12px; min-width: 260px; padding: 12px 16px; color: #fff; border: 1px solid rgba(255,107,71,.38); border-radius: 9px; background: var(--orange); box-shadow: 0 12px 28px rgba(255,107,71,.18); text-decoration: none; transition: transform 150ms ease, background 150ms ease; }
.report-download:hover { background: var(--orange-hover); transform: translateY(-2px); }
.report-download__mark { font: 600 1.35rem 'IBM Plex Mono', monospace; }
.report-download > span:last-child { display: flex; flex-direction: column; }
.report-download strong { font-size: .72rem; text-transform: uppercase; }
.report-download small { color: rgba(255,255,255,.7); font-size: .62rem; }
.telegram-notice { color: var(--muted); font: 500 .64rem 'IBM Plex Mono', monospace; }
.telegram-notice::before { content: '✓'; margin-right: 7px; color: var(--cyan); }

/* Admin */
.admin-grid { display: grid; grid-template-columns: minmax(280px, .68fr) minmax(0, 1.32fr); gap: 16px; padding: 28px 32px 0; }
.surface-card { padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: rgba(5,17,31,.38); }
.surface-card h4 { margin: 8px 0 18px; font-size: 1.1rem; }
.admin-form { display: flex; flex-direction: column; gap: 13px; }
.admin-form .btn-primary { margin-top: auto; }
.admin-actions .flex-row { margin-top: 12px; }
.flex-row { display: flex; gap: 8px; flex-wrap: wrap; }
.flex-row > input { flex: 1 1 180px; }
.table-scroll { overflow: auto; }
.table-scroll--users { max-height: 210px; margin-bottom: 14px; }
table { width: 100%; border-collapse: collapse; font-size: .77rem; }
th { color: var(--muted); font: 500 .58rem 'IBM Plex Mono', monospace; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
th, td { padding: 10px 9px; border-bottom: 1px solid var(--line); }
td { color: var(--ink-soft); }
.supplier-admin { margin: 16px 32px 32px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: rgba(5,17,31,.38); }
.supplier-admin__intro { display: grid; grid-template-columns: minmax(220px,.65fr) minmax(0,1.35fr); gap: 25px; align-items: end; }
.supplier-admin__intro h4 { margin-top: 8px; font-size: 1.1rem; }
.supplier-admin__intro p { color: var(--muted); font-size: .75rem; }
.supplier-form { display: grid; grid-template-columns: .7fr 1.4fr auto; gap: 10px; align-items: end; margin: 22px 0; }
.supplier-form label { margin: 0; }
.supplier-form input { margin-top: 8px; }
.supplier-table-wrap { max-height: 260px; overflow: auto; border-top: 1px solid var(--line); }
.supplier-table td:first-child { width: 28%; color: var(--ink); font-weight: 700; }
.supplier-table td:nth-child(2) { word-break: break-word; }
.supplier-table td:last-child { width: 80px; text-align: right; }
.supplier-table a { color: var(--blue-bright); }
.supplier-remove { min-height: 28px; padding: 0; color: var(--danger); background: transparent; font: 600 .6rem 'IBM Plex Mono', monospace; text-transform: uppercase; }
.supplier-empty { margin-top: 15px; color: var(--muted); font-size: .72rem; }

.loader { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.msg-box, .error-msg { min-height: 1.2em; margin-top: 10px; font: 500 .69rem 'IBM Plex Mono', monospace; }
.error-msg { color: var(--danger); }
.success-msg { color: var(--cyan); }

@media (max-width: 1080px) {
    .login-shell { grid-template-columns: 1fr minmax(360px, .75fr); }
    .login-story { padding: 40px; }
    .signal-map { margin-top: 45px; }
    .workspace-intro { grid-template-columns: 1fr; }
    .intro-metrics { min-width: 0; width: 100%; }
    .header-context { display: none; }
}

@media (max-width: 820px) {
    .login-shell { grid-template-columns: 1fr; width: min(620px, calc(100% - 32px)); margin: 16px auto; }
    .login-story { min-height: 440px; border-right: 0; border-bottom: 1px solid var(--line); }
    .login-copy { margin-top: 65px; }
    .login-copy h1 { font-size: clamp(2.7rem, 10vw, 4.1rem); }
    .signal-map { display: none; }
    .login-metrics { margin-top: auto; padding-top: 42px; }
    .login-panel { width: calc(100% - 48px); }
    .glass-header { flex-wrap: wrap; gap: 10px; padding-top: 12px; padding-bottom: 12px; }
    .workspace-nav { order: 3; width: 100%; margin: 0; }
    .workspace-nav button { flex: 1; }
    .quote-form { grid-template-columns: 1fr; }
    .form-module--request { grid-row: auto; }
    .form-module--location, .form-module--requirements { border-right: 0; }
    .admin-grid, .supplier-admin__intro { grid-template-columns: 1fr; }
    .supplier-form { grid-template-columns: 1fr 1.3fr; }
    .supplier-form button { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
    .login-story { min-height: 400px; padding: 28px 24px; }
    .login-copy { margin-top: 52px; }
    .login-copy > p:last-child { font-size: .9rem; }
    .login-metrics div { padding: 16px 8px 0 0; }
    .login-metrics div + div { padding-left: 10px; }
    .login-metrics strong { font-size: .9rem; }
    .login-metrics span { font-size: .57rem; }
    .login-panel { width: calc(100% - 32px); margin: 24px auto; padding: 28px 22px; }
    .login-panel__topline { margin-bottom: 38px; }
    .glass-header { padding-left: 16px; padding-right: 16px; }
    .header-brand small, .connection-state span, .btn-icon-text span { display: none; }
    .connection-state { margin-right: 0; }
    .dashboard-content { width: calc(100% - 28px); padding: 38px 0 60px; }
    .workspace-intro { gap: 24px; }
    .workspace-intro h1 { font-size: clamp(2.2rem, 12vw, 3.25rem); }
    .intro-metrics { grid-template-columns: 1fr; }
    .intro-metrics > div + div { border-left: 0; border-top: 1px solid var(--line); }
    .panel-heading, .quote-heading { grid-template-columns: auto minmax(0,1fr); padding: 24px 20px; }
    .quote-heading .ready-chip { grid-column: 2; justify-self: start; }
    .heading-mark { width: 40px; height: 40px; }
    .panel-heading h3 { font-size: 1.4rem; }
    .form-module { padding: 24px 20px 8px; }
    .tabs { display: flex; }
    .tab-btn { flex: 1; padding: 8px; font-size: .64rem; }
    .quote-submit-row { align-items: stretch; flex-direction: column; padding: 22px 20px; }
    .quote-submit-row .btn-primary { width: 100%; min-width: 0; }
    #quote-msg { margin-left: 20px; margin-right: 20px; }
    .telegram-config summary { padding: 18px 20px; }
    .telegram-config__body { padding: 0 20px 20px; }
    .telegram-config__body .flex-row { flex-wrap: wrap; }
    .telegram-config__body .btn-secondary { width: 100%; }
    .summary-action { font-size: 0; }
    .summary-action::after { font-size: 1rem; }
    .quote-progress, .supplier-admin { margin-left: 20px; margin-right: 20px; }
    .results-container { padding: 24px 20px; }
    .results-heading, .actions-footer { align-items: flex-start; flex-direction: column; }
    .report-download { width: 100%; }
    .quote-header { flex-direction: column; }
    .admin-grid { padding: 20px 20px 0; }
    .supplier-admin { margin-bottom: 20px; padding: 20px; }
    .supplier-form { grid-template-columns: 1fr; }
    .supplier-form button { grid-column: auto; }
    .admin-button-row button { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}