:root{
    color-scheme:dark;
    --bg:#080b12;
    --panel:#111827;
    --panel-soft:#162033;
    --text:#f5f7fb;
    --muted:#9aa8bd;
    --line:rgba(255,255,255,0.12);
    --accent:#9c7cff;
    --accent-2:#57d6ff;
    --danger:#ff6b86;
    --ok:#78f0b0;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    min-height:100vh;
    background:
        radial-gradient(circle at top left, rgba(156,124,255,0.22), transparent 34rem),
        var(--bg);
    color:var(--text);
    font-family:Inter, Segoe UI, Arial, sans-serif;
}

.app{
    width:min(1180px, calc(100% - 32px));
    margin:0 auto;
    padding:32px 0 56px;
}

.top-nav{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:18px;
}

.top-nav a,
.hero-action{
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(255,255,255,0.07);
    color:var(--text);
    font-weight:800;
    padding:10px 14px;
    text-decoration:none;
}

.top-nav a.active,
.hero-action{
    border-color:rgba(156,124,255,0.9);
    background:rgba(156,124,255,0.25);
}

.hero,
.panel{
    border:1px solid var(--line);
    border-radius:28px;
    background:linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    box-shadow:0 24px 70px rgba(0,0,0,0.28);
}

.hero{
    display:flex;
    justify-content:space-between;
    gap:24px;
    align-items:flex-end;
    padding:28px;
    margin-bottom:18px;
}

.kicker{
    margin:0 0 8px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:0.14em;
    font-size:12px;
}

h1,
h2{
    margin:0;
}

h1{
    max-width:760px;
    font-size:clamp(36px, 6vw, 72px);
    line-height:0.95;
}

p{
    color:var(--muted);
    line-height:1.65;
}

.upload{
    display:grid;
    gap:10px;
    min-width:min(100%, 320px);
    padding:18px;
    border:1px solid var(--line);
    border-radius:20px;
    background:rgba(255,255,255,0.06);
    cursor:pointer;
}

.upload-stack{
    display:grid;
    gap:12px;
    min-width:min(100%, 340px);
}

.upload span{
    font-weight:800;
}

.upload input{
    width:100%;
}

.notice{
    margin-bottom:18px;
    padding:14px 16px;
    border:1px solid var(--line);
    border-radius:18px;
    background:rgba(255,255,255,0.06);
}

.notice.error{
    border-color:rgba(255,107,134,0.6);
    color:#ffd8df;
}

.notice.ok{
    border-color:rgba(120,240,176,0.55);
    color:#dbffeb;
}

.dashboard{
    display:grid;
    gap:18px;
    margin-bottom:18px;
}

.panel{
    padding:22px;
}

.stats{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:14px;
}

.stat span{
    display:block;
    color:var(--muted);
}

.stat strong{
    display:block;
    margin-top:8px;
    font-size:38px;
}

.section-head{
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin-bottom:14px;
    align-items:flex-start;
}

.section-head.compact{
    align-items:center;
    margin:22px 0 12px;
}

.section-head.compact h3{
    margin:0;
}

.workspace{
    display:grid;
    gap:18px;
}

.cards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:18px;
}

.nav-card{
    color:inherit;
    text-decoration:none;
}

.actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

button,
.button-like{
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(255,255,255,0.08);
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-weight:800;
    padding:10px 14px;
}

button:hover,
.button-like:hover{
    border-color:rgba(156,124,255,0.75);
}

.button-like input{
    display:none;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
    gap:12px;
}

label,
.field-label{
    display:grid;
    gap:7px;
    color:var(--muted);
    font-size:13px;
}

input,
select,
textarea{
    width:100%;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(8,11,18,0.72);
    color:var(--text);
    font:inherit;
    padding:11px 12px;
}

textarea{
    resize:vertical;
}

.wide-label{
    margin-top:12px;
}

.subsection{
    border-top:1px solid var(--line);
    margin-top:20px;
    padding-top:2px;
}

.extra-expenses-block{
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid var(--line);
}

.extra-expenses-block .section-head.compact{
    margin-bottom:8px;
}

.extra-expenses-list{
    display:grid;
    gap:10px;
}

.extra-expense-row{
    display:grid;
    grid-template-columns:minmax(100px,140px) 1fr auto;
    gap:10px;
    align-items:start;
}

.extra-expense-row input[type="number"],
.extra-expense-row input[type="text"]{
    width:100%;
}

.extra-expense-row .danger{
    margin-top:2px;
}

.editable-list{
    display:grid;
    gap:10px;
}

.editor-row,
.proposal-row{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:10px;
    align-items:end;
    padding:12px;
    border:1px solid var(--line);
    border-radius:18px;
    background:rgba(255,255,255,0.04);
}

.editor-row .span-2,
.proposal-row .span-2{
    grid-column:span 2;
}

.editor-row .span-3,
.proposal-row .span-3{
    grid-column:span 3;
}

.editor-row .span-4,
.proposal-row .span-4{
    grid-column:span 4;
}

.editor-row .span-5,
.proposal-row .span-5{
    grid-column:span 5;
}

.editor-row .span-6,
.proposal-row .span-6{
    grid-column:span 6;
}

.row-actions{
    display:flex;
    gap:8px;
}

.danger{
    color:#ffd8df;
    border-color:rgba(255,107,134,0.45);
}

.hardware-stack{
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px 12px 6px;
    margin-bottom:12px;
    background:rgba(255,255,255,.45);
}
.hardware-stack-title{
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--muted);
    margin:0 0 8px;
}
.proposal-grid{
    display:grid;
    gap:14px;
    margin-top:18px;
}

.proposal-block{
    border:1px solid var(--line);
    border-radius:20px;
    padding:16px;
    background:rgba(255,255,255,0.035);
}

.proposal-block h3{
    margin:0 0 12px;
}

.muted{
    color:var(--muted);
}

.span-12{
    grid-column:1 / -1;
}

summary{
    cursor:pointer;
}

.media-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
    gap:12px;
}

.media-card{
    display:grid;
    gap:8px;
    border:1px solid var(--line);
    border-radius:18px;
    padding:10px;
    background:rgba(255,255,255,0.04);
}

.media-card img{
    width:100%;
    aspect-ratio:4 / 3;
    object-fit:cover;
    border-radius:14px;
}

.money{
    font-weight:900;
    color:var(--accent-2);
    text-align:right;
}

.total-card{
    margin-top:18px;
    padding:20px;
    border:1px solid rgba(156,124,255,0.5);
    border-radius:24px;
    background:linear-gradient(145deg, rgba(156,124,255,0.20), rgba(87,214,255,0.08));
}

.total-card span{
    display:block;
    color:var(--muted);
}

.total-card strong{
    display:block;
    margin-top:6px;
    font-size:clamp(36px, 7vw, 68px);
    line-height:1;
}

.table-wrap{
    overflow:auto;
    border:1px solid var(--line);
    border-radius:18px;
}

table{
    width:100%;
    border-collapse:collapse;
}

th,
td{
    padding:12px;
    border-bottom:1px solid var(--line);
    text-align:left;
}

th{
    color:var(--muted);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.08em;
}

tr:last-child td{
    border-bottom:0;
}

.price-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:18px;
}

.price-tabs button{
    border-radius:999px;
}

.price-tabs button.active{
    border-color:rgba(156,124,255,0.9);
    background:rgba(156,124,255,0.25);
}

.price-tab-panel{
    display:grid;
    gap:18px;
}

.price-tab-panel[hidden]{
    display:none !important;
}

.help-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:14px;
}

.help-card{
    border:1px solid var(--line);
    border-radius:18px;
    padding:16px;
    background:rgba(255,255,255,0.04);
}

.help-card p{
    margin:8px 0 0;
    color:var(--muted);
}

.attention-list{
    margin:0;
    padding-left:20px;
    color:var(--muted);
}

.attention-list li{
    margin-bottom:8px;
}

.markup-form{
    align-items:end;
}

.markup-action button{
    width:100%;
}

.material-card summary{
    list-style:none;
}

.material-summary{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:center;
}

.material-summary-meta{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    justify-content:flex-end;
}

.material-quick{
    margin:12px 0;
}

.material-advanced{
    border-top:1px solid var(--line);
    padding-top:10px;
}

.material-advanced summary{
    color:var(--muted);
    margin-bottom:10px;
}

.category-parts{
    border-top:1px solid var(--line);
    margin:12px 0;
    padding-top:12px;
}

.category-parts h4{
    font-size:14px;
    margin:0 0 4px;
}

.parts-table{
    border-collapse:collapse;
    margin-top:10px;
    width:100%;
}

.parts-table th,
.parts-table td{
    border-bottom:1px solid var(--line);
    padding:6px 8px;
    text-align:left;
    vertical-align:middle;
}

.parts-table input{
    width:100%;
}

.parts-table .compact{
    min-width:36px;
    padding:4px 8px;
}

.template-workspace{
    display:grid;
    gap:18px;
    grid-template-columns:minmax(300px,420px) minmax(0,1fr);
}

.template-settings h3{
    font-size:14px;
    margin:18px 0 8px;
}

.checkbox-grid{
    display:grid;
    gap:8px 16px;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    margin:8px 0 4px;
}

.checkbox-grid label{
    align-items:center;
    display:flex;
    gap:8px;
}

.device-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.device-btn{
    background:rgba(255,255,255,0.06);
    border:1px solid var(--line);
    border-radius:999px;
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-weight:700;
    padding:8px 14px;
}

.device-btn.active{
    background:rgba(87,214,255,0.18);
    border-color:rgba(87,214,255,0.55);
    color:var(--accent);
}

.device-hint{
    font-size:13px;
    margin:0 0 10px;
}

.preview-stage{
    background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border:1px solid var(--line);
    border-radius:20px;
    overflow:auto;
    padding:18px;
}

.device-frame{
    margin:0 auto;
    max-width:100%;
    transition:width .2s ease;
    width:min(100%, var(--device-width, 1200px));
}

.device-frame iframe{
    background:#000;
    border:1px solid var(--line);
    border-radius:16px;
    display:block;
    height:min(78vh, 860px);
    min-height:520px;
    width:100%;
}

.device-frame.is-phone iframe{
    min-height:640px;
}

.manufacturer-table input,
.manufacturer-table select{
    min-width:72px;
    width:100%;
}

.manufacturer-table td:first-child{
    text-align:center;
    width:44px;
}

.manufacturer-table .compact{
    min-width:36px;
    padding:4px 8px;
}

.profitability-inputs{
    margin:12px 0;
    padding:12px;
}

.profitability-inputs summary{
    cursor:pointer;
    font-weight:700;
    margin-bottom:8px;
}

#profitabilityStats{
    display:grid;
    gap:10px;
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
}

@media (max-width:1100px){
    .template-workspace{
        grid-template-columns:1fr;
    }

    .device-frame iframe{
        min-height:480px;
    }
}

.catalog-sections,
.catalog-subsections{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:12px 0;
}

.catalog-chip{
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(255,255,255,0.06);
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-weight:700;
    padding:8px 12px;
}

.catalog-chip span{
    color:var(--muted);
    font-size:12px;
    margin-left:6px;
}

.catalog-chip.active{
    border-color:rgba(156,124,255,0.9);
    background:rgba(156,124,255,0.22);
}

.catalog-filters{
    margin-top:8px;
}

.catalog-checkbox{
    display:flex;
    align-items:center;
    gap:8px;
    align-self:end;
}

.catalog-checkbox input{
    width:auto;
}

.catalog-table-wrap{
    max-height:min(70vh, 720px);
}

.panel-soft{
    margin-top:16px;
    padding:16px;
    border:1px solid var(--line);
    border-radius:18px;
    background:rgba(255,255,255,0.04);
}

.catalog-bulk h4{
    margin:0 0 8px;
}

.catalog-bulk-form{
    margin-top:10px;
}

.catalog-save-hint{
    margin:10px 0 0;
    font-size:12px;
}

.catalog-price-cell{
    width:120px;
}

.catalog-price-input{
    width:100%;
    min-width:96px;
    text-align:right;
    font-weight:800;
}

.catalog-active-cell{
    width:52px;
    text-align:center;
}

.catalog-active-input{
    width:18px;
    height:18px;
    cursor:pointer;
}

.catalog-row-inactive{
    opacity:0.55;
}

.catalog-row-inactive .catalog-price-input{
    opacity:0.7;
}

.catalog-active-actions{
    margin-top:10px;
}

.remnant-list{
    display:grid;
    gap:12px;
}

.remnant-card{
    border:1px solid var(--line);
    border-radius:18px;
    padding:14px;
    background:rgba(255,255,255,0.04);
}

.remnant-card-muted{
    opacity:0.55;
}

.remnant-card-urgent{
    border-color:rgba(255,180,80,0.55);
}

.remnant-card-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
}

.remnant-badge{
    border:1px solid var(--line);
    border-radius:999px;
    padding:4px 10px;
    font-size:12px;
    white-space:nowrap;
}

.order-row{
    cursor:pointer;
}

.order-row-selected{
    background:rgba(156,124,255,0.12);
}

.order-status{
    border-radius:999px;
    padding:4px 10px;
    font-size:12px;
    font-weight:800;
}

.order-status-draft{
    background:rgba(255,255,255,0.08);
}

.order-status-accepted{
    background:rgba(87,214,255,0.18);
}

.order-status-completed{
    background:rgba(120,240,176,0.18);
}

.order-card{
    margin-top:18px;
}

@media (max-width:760px){
    .hero{
        display:grid;
    }

    .section-head{
        display:grid;
    }

    .editor-row,
    .proposal-row{
        grid-template-columns:1fr;
    }

    .editor-row .span-2,
    .editor-row .span-3,
    .editor-row .span-4,
    .editor-row .span-5,
    .editor-row .span-6,
    .proposal-row .span-2,
    .proposal-row .span-3,
    .proposal-row .span-4,
    .proposal-row .span-5,
    .proposal-row .span-6{
        grid-column:auto;
    }
}

.formula-catalog{
    display:grid;
    gap:12px;
    margin:16px 0 20px;
}
.formula-card{
    padding:14px 16px;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(255,255,255,.03);
}
.formula-card h3{
    margin:0 0 8px;
    font-size:15px;
}
.formula-expr code{
    font-family:var(--mono, ui-monospace, monospace);
    font-size:13px;
    color:var(--accent);
}
.formula-lock-bar{
    margin-bottom:12px;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.02);
}
.formula-params.is-locked input:disabled{
    opacity:.65;
    cursor:not-allowed;
}