/* Marketplace in the Verstak Warehouse style (2026-10-23).
   One visual layer for the user-facing marketplace: /products,
   /products/<id>, /requests, /requests/<id>, /requests/new,
   /requests/mine, /favorites, /seller/<uin>, /sell and the seller cabinet
   (/sell/overview, /sell/products[/new|/<id>/edit], /sell/requests,
   /sell/settings). EVERY rule is scoped under body.mp-ui -- the class only
   those templates put on <body> -- so no other page sees it. Markup,
   routes, forms and JS hooks are untouched: this file only repaints the
   existing classes, the same way static/css/warehouse-brutalist.css
   repaints warehouse.css. Values (palette, 2px rules, square corners,
   Oswald for headings/labels/buttons, Inter for data, acid-lime for
   primary/active) mirror warehouse-brutalist.css; semantic status colors
   (published, in stock, rejected, ...) keep their meaning. No sidebar or
   navigation is added -- each page keeps its own. */

@font-face{font-family:"Oswald";font-style:normal;font-weight:600;font-display:swap;src:url("/static/fonts/oswald/oswald-cyrillic-600-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Oswald";font-style:normal;font-weight:600;font-display:swap;src:url("/static/fonts/oswald/oswald-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Oswald";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/oswald/oswald-cyrillic-700-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Oswald";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/oswald/oswald-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* --- Tokens (same values as warehouse-brutalist.css) ------------------- */
body.mp-ui{
    --mpw-bg:#ebebe8;
    --mpw-surface:#ffffff;
    --mpw-surface-2:#f4f4f1;
    --mpw-ink:#111111;
    --mpw-on-ink:#ffffff;
    --mpw-muted:#5b5b57;
    --mpw-hair:#d2d2cd;
    --mpw-lime:#d6ff2e;
    --mpw-lime-hover:#c4f000;
    --mpw-on-lime:#111111;
    --mpw-red:#d42a1c;
    --mpw-red-soft:#ffe7e3;
    --mpw-font-display:"Oswald","Arial Narrow","Roboto Condensed",sans-serif;

    /* Existing page tokens remapped INSIDE the marketplace only, so every
       pre-existing component rule picks up the neutral palette without
       being rewritten. Status-badge tokens (--bg-dcfce7, --bg-fef3c7,
       --bg-fee2e2, --bg-e0f2fe and their text colors) are deliberately
       NOT remapped: they carry meaning. */
    --bg-fff:var(--mpw-surface);
    --panel:var(--mpw-surface);
    --line:var(--mpw-hair);
    --shadow:none;
    --btn-radius:0px;
    --text:var(--mpw-ink);
    --text-071329:var(--mpw-ink);
    --text-111827:var(--mpw-ink);
    --text-1f2937:var(--mpw-ink);
    --text-0f62c9:var(--mpw-ink);
    --text-4b5563:var(--mpw-muted);
    --text-64748b:var(--mpw-muted);
    --bg-f8fafc:var(--mpw-surface-2);
    --bg-f2f5f9:var(--mpw-surface-2);
    --bg-f1f3f6:var(--mpw-surface-2);
    --border-9bbbea:var(--mpw-ink);
    --mp-blue-bg:var(--mpw-surface);
    --mp-green-bg:var(--mpw-surface);
    --mp-pink-bg:var(--mpw-surface);
    --mp-blue-border:var(--mpw-ink);
    --mp-green-border:var(--mpw-ink);
    --mp-pink-border:var(--mpw-ink);

    background:var(--mpw-bg);
    color:var(--mpw-ink);
}
:root[data-theme="dark"] body.mp-ui{
    --mpw-bg:#0d0d0d;
    --mpw-surface:#161616;
    --mpw-surface-2:#1f1f1f;
    --mpw-ink:#edede8;
    --mpw-on-ink:#111111;
    --mpw-muted:#a3a39d;
    --mpw-hair:#343432;
    --mpw-lime:#d6ff2e;
    --mpw-lime-hover:#e4ff6a;
    --mpw-on-lime:#111111;
    --mpw-red:#ff6a5c;
    --mpw-red-soft:#3a1512;
}

/* --- Top bar: logo | UTC clock ... account (same bar as /docs) -------- */
body.mp-ui .divider{display:none}
body.mp-ui .header{
    display:flex;
    align-items:center;
    min-height:64px;
    padding:0 24px;
    background:var(--mpw-surface);
    border-bottom:2px solid var(--mpw-ink);
    text-align:left;
}
body.mp-ui .header .logo-link{color:var(--mpw-ink)}
body.mp-ui .header .logo-link:focus-visible{outline:3px solid var(--mpw-lime);outline-offset:2px}
/* The original Script Smooth wordmark, only resized (same 40px as /docs). */
body.mp-ui .header .logo{font-size:40px;line-height:1;padding:.32em 0 .08em;font-synthesis:none}
body.mp-ui .topbar{
    position:absolute;
    top:0;
    left:166px;
    z-index:2;
    display:flex;
    align-items:center;
    gap:10px;
    height:64px;
    padding:0 0 0 24px;
    border-left:1px solid var(--mpw-hair);
    color:var(--mpw-muted);
    font-family:var(--mpw-font-display);
    font-size:15px;
    font-weight:600;
    line-height:22px;
    letter-spacing:.02em;
    text-align:left;
}
/* Pinned in the bar at every width (the pages' own <=900px rule would
   otherwise drop it into the flow above the logo). */
body.mp-ui .language-switch{position:absolute;top:0;right:24px;height:64px;padding:0;z-index:5;color:var(--mpw-muted);font-size:13px}
body.mp-ui .language-switch .active{color:var(--mpw-ink)}
body.mp-ui .language-switch .account-nav-link{
    min-height:40px;
    padding:4px 14px;
    border:2px solid var(--mpw-ink);
    border-radius:0;
    background:var(--mpw-lime);
    color:var(--mpw-on-lime);
    font-family:var(--mpw-font-display);
    font-size:16px;
    font-weight:600;
    letter-spacing:.02em;
}
body.mp-ui .language-switch .account-nav-link:hover,
body.mp-ui .language-switch .account-nav-link:focus-visible{border-color:var(--mpw-ink);background:var(--mpw-lime-hover)}
body.mp-ui .language-switch .account-nav-link.owner-uin{color:var(--mpw-on-lime)!important}
body.mp-ui .language-switch .account-avatar-slot img{border:1px solid var(--mpw-on-lime)}

/* --- Page structure ----------------------------------------------------- */
body.mp-ui .main{padding-top:24px}
body.mp-ui .page-title,
body.mp-ui .cabinet-page-title,
body.mp-ui .product-title,
body.mp-ui .request-title,
body.mp-ui .seller-name{
    font-family:var(--mpw-font-display);
    font-weight:700;
    letter-spacing:.01em;
    color:var(--mpw-ink);
}
body.mp-ui .page-title,
body.mp-ui .cabinet-page-title{font-size:28px;line-height:1.1;text-transform:uppercase}
body.mp-ui .product-title,
body.mp-ui .request-title{font-size:30px;line-height:1.12}
body.mp-ui .page-subtitle,
body.mp-ui .mp-intro-sub{color:var(--mpw-muted)}

/* Containers: white surface, 2px near-black rule, square, flat. */
body.mp-ui .panel,
body.mp-ui .product-info,
body.mp-ui .request-info,
body.mp-ui .mp-intro,
body.mp-ui .cabinet-panel,
body.mp-ui .cabinet-side-card,
body.mp-ui .cabinet-stat-card,
body.mp-ui .product-card,
body.mp-ui .request-card,
body.mp-ui .modal,
body.mp-ui .danger-zone,
body.mp-ui .gallery-main,
body.mp-ui .empty-state{
    background:var(--mpw-surface);
    border:2px solid var(--mpw-ink);
    border-radius:0;
    box-shadow:none;
}
body.mp-ui .danger-zone{border-color:var(--mpw-red)}
body.mp-ui .modal-overlay{background:rgba(0,0,0,.55)}
body.mp-ui .gallery-main img{border:0;border-radius:0;background:transparent}

/* Section headings / labels: condensed display type. */
body.mp-ui .panel h2,
body.mp-ui .cabinet-panel h2,
body.mp-ui .cabinet-panel-head h2,
body.mp-ui .cabinet-side-card h2,
body.mp-ui .modal h2,
body.mp-ui .mp-intro h1,
body.mp-ui .mp-intro h2,
body.mp-ui .cabinet-form-section-title,
body.mp-ui .empty-state-title{
    font-family:var(--mpw-font-display);
    font-weight:600;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:var(--mpw-ink);
}
body.mp-ui .panel h2,
body.mp-ui .cabinet-panel h2,
body.mp-ui .cabinet-panel-head h2,
body.mp-ui .cabinet-side-card h2{font-size:16px}
body.mp-ui .cabinet-form-section-title{font-size:14px;border-bottom:1px solid var(--mpw-hair)}
body.mp-ui .cabinet-panel-head a:not(.cabinet-btn),
body.mp-ui .cabinet-profile-list a{color:var(--mpw-ink);font-weight:600}

/* Fields: 2px rule, square, lime focus ring. */
/* :where() keeps this at (0,1,1) so composite controls below (quantity
   steppers, search shells) can override it. */
body.mp-ui :where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=hidden]):not([type=range]), select, textarea){
    border:2px solid var(--mpw-ink);
    border-radius:0;
    background-color:var(--mpw-surface);
    color:var(--mpw-ink);
    box-shadow:none;
}
body.mp-ui :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea):focus{border-color:var(--mpw-ink);outline:none;box-shadow:0 0 0 3px var(--mpw-lime)}
/* The 2px rule is 1px wider per side than the pages' own 1px border:
   take that 1px back from the side padding so filter labels such as
   "Любое состояние" keep the exact room they had (no truncation at 390px). */
body.mp-ui .mp-filters select{padding-left:10px;padding-right:10px}
body.mp-ui input::placeholder,
body.mp-ui textarea::placeholder{color:var(--mpw-muted)}
body.mp-ui .qty-stepper{border:2px solid var(--mpw-ink);border-radius:0}
/* Compact stepper: the input itself is the bordered box, arrows sit inside it. */
body.mp-ui .qty-arrows{top:2px;right:2px;bottom:2px;border-radius:0;border-left:1px solid var(--mpw-hair)}
body.mp-ui .qty-stepper input{border:0;border-left:1px solid var(--mpw-hair);border-right:1px solid var(--mpw-hair);box-shadow:none}
body.mp-ui .qty-stepper:focus-within{box-shadow:0 0 0 3px var(--mpw-lime)}
body.mp-ui .qty-stepper button,
body.mp-ui .qty-arrow-btn{border-radius:0;color:var(--mpw-ink);background:var(--mpw-surface)}
body.mp-ui .qty-stepper button:hover,
body.mp-ui .qty-arrow-btn:hover{background:var(--mpw-lime);color:var(--mpw-on-lime)}
body.mp-ui label,
body.mp-ui .mp-filters-grid label,
body.mp-ui .field > label{color:var(--mpw-ink)}
body.mp-ui .field-hint,
body.mp-ui .char-count,
body.mp-ui .photo-upload-hint{color:var(--mpw-muted)}
body.mp-ui .error-message{border-radius:0;border:2px solid var(--mpw-red);background:var(--mpw-red-soft);color:var(--mpw-red)}
body.mp-ui .file-picker-label{border-radius:0;border:2px solid var(--mpw-ink);background:var(--mpw-surface);color:var(--mpw-ink);font-family:var(--mpw-font-display);font-weight:600;letter-spacing:.02em}
body.mp-ui .file-picker-label:hover{background:var(--mpw-ink);color:var(--mpw-on-ink)}
body.mp-ui .cabinet-search input{padding-left:34px}

/* --- Buttons (Warehouse primary / secondary / danger) ------------------ */
body.mp-ui .mp-btn,
body.mp-ui .primary-button,
body.mp-ui .secondary-button,
body.mp-ui .danger-button,
body.mp-ui .small-button,
body.mp-ui .cabinet-btn,
body.mp-ui .back-link,
body.mp-ui .pagination a{
    border:2px solid var(--mpw-ink);
    border-radius:0;
    box-shadow:none;
    font-family:var(--mpw-font-display);
    font-weight:600;
    letter-spacing:.02em;
    text-decoration:none;
    transition:background-color .12s ease,color .12s ease,border-color .12s ease;
}
body.mp-ui .mp-btn,
body.mp-ui .primary-button,
body.mp-ui .secondary-button,
body.mp-ui .danger-button,
body.mp-ui .cabinet-btn{font-size:15px}
body.mp-ui .mp-btn-accent,
body.mp-ui .primary-button,
body.mp-ui .cabinet-btn:not(.cabinet-btn-ghost){background:var(--mpw-lime);border-color:var(--mpw-ink);color:var(--mpw-on-lime)}
body.mp-ui .mp-btn-accent:hover,
body.mp-ui .primary-button:hover,
body.mp-ui .cabinet-btn:not(.cabinet-btn-ghost):hover{background:var(--mpw-ink);border-color:var(--mpw-ink);color:var(--mpw-lime)}
body.mp-ui .mp-btn-ghost,
body.mp-ui .secondary-button,
body.mp-ui .small-button,
body.mp-ui .cabinet-btn-ghost,
body.mp-ui .back-link,
body.mp-ui .pagination a{background:var(--mpw-surface);border-color:var(--mpw-ink);color:var(--mpw-ink)}
body.mp-ui .mp-btn-ghost:hover,
body.mp-ui .secondary-button:hover,
body.mp-ui .small-button:hover,
body.mp-ui .cabinet-btn-ghost:hover,
body.mp-ui .back-link:hover,
body.mp-ui .pagination a:hover{background:var(--mpw-ink);border-color:var(--mpw-ink);color:var(--mpw-on-ink)}
body.mp-ui .danger-button{background:var(--mpw-surface);border-color:var(--mpw-red);color:var(--mpw-red)}
body.mp-ui .danger-button:hover{background:var(--mpw-red);border-color:var(--mpw-red);color:#fff}
body.mp-ui .mp-btn:focus-visible,
body.mp-ui .primary-button:focus-visible,
body.mp-ui .secondary-button:focus-visible,
body.mp-ui .danger-button:focus-visible,
body.mp-ui .small-button:focus-visible,
body.mp-ui .cabinet-btn:focus-visible,
body.mp-ui .back-link:focus-visible{outline:none;box-shadow:0 0 0 3px var(--mpw-lime)}
body.mp-ui .back-link{padding:6px 12px;min-height:36px;align-items:center}
body.mp-ui .cabinet-btn-small,
body.mp-ui .small-button{font-size:13px}

/* --- Navigation: active = lime, inactive = outlined (Warehouse) -------- */
body.mp-ui .mp-nav-tabs{gap:0;margin-bottom:18px}
body.mp-ui .mp-nav-tabs a{
    padding:8px 18px;
    border:2px solid var(--mpw-ink);
    border-radius:0;
    background:var(--mpw-surface);
    color:var(--mpw-ink);
    font-family:var(--mpw-font-display);
    font-size:15px;
    font-weight:600;
    letter-spacing:.03em;
    text-transform:uppercase;
}
body.mp-ui .mp-nav-tabs a + a{margin-left:-2px}
body.mp-ui .mp-nav-tabs a.active{background:var(--mpw-lime);border-color:var(--mpw-ink);color:var(--mpw-on-lime)}
body.mp-ui .mp-nav-tabs a:not(.active):hover{background:var(--mpw-ink);color:var(--mpw-on-ink)}

body.mp-ui .cabinet-side-nav{gap:0;border:2px solid var(--mpw-ink);background:var(--mpw-surface)}
/* Text-only cabinet navigation, like the Warehouse sidebar. */
body.mp-ui .cabinet-side-link svg{display:none}
body.mp-ui .cabinet-side-link{
    border:0;
    border-bottom:1px solid var(--mpw-hair);
    border-radius:0;
    padding:11px 14px;
    color:var(--mpw-ink);
    font-family:var(--mpw-font-display);
    font-size:15px;
    font-weight:600;
    letter-spacing:.02em;
}
body.mp-ui .cabinet-side-link:last-child{border-bottom:0}
body.mp-ui .cabinet-side-link.active{background:var(--mpw-lime);border-color:var(--mpw-hair);color:var(--mpw-on-lime)}
body.mp-ui .cabinet-side-link:not(.active):hover{background:var(--mpw-ink);border-color:var(--mpw-ink);color:var(--mpw-on-ink)}
body.mp-ui .cabinet-side-link:focus-visible{outline:3px solid var(--mpw-lime);outline-offset:-3px}
body.mp-ui .cabinet-side-badge,
body.mp-ui .cabinet-mobile-nav-badge{border-radius:0;background:var(--mpw-red);color:#fff;font-family:var(--font-ui)}

body.mp-ui .cabinet-status-tabs{gap:6px 0}
body.mp-ui .cabinet-status-tabs a,
body.mp-ui .cabinet-mobile-toggle a,
body.mp-ui .cabinet-mobile-settings-link{
    border:2px solid var(--mpw-ink);
    border-radius:0;
    background:var(--mpw-surface);
    color:var(--mpw-ink);
    font-family:var(--mpw-font-display);
    font-size:14px;
    font-weight:600;
    letter-spacing:.03em;
    text-transform:uppercase;
}
body.mp-ui .cabinet-status-tabs a + a{margin-left:-2px}
body.mp-ui .cabinet-status-tabs a.active,
body.mp-ui .cabinet-mobile-toggle a.active,
body.mp-ui .cabinet-mobile-settings-link.active{background:var(--mpw-lime);border-color:var(--mpw-ink);color:var(--mpw-on-lime)}
body.mp-ui .cabinet-status-tabs a:not(.active):hover,
body.mp-ui .cabinet-mobile-toggle a:not(.active):hover,
body.mp-ui .cabinet-mobile-settings-link:not(.active):hover{background:var(--mpw-ink);border-color:var(--mpw-ink);color:var(--mpw-on-ink)}
body.mp-ui .cabinet-status-tabs a:focus-visible,
body.mp-ui .cabinet-mobile-toggle a:focus-visible,
body.mp-ui .cabinet-mobile-settings-link:focus-visible{outline:none;box-shadow:0 0 0 3px var(--mpw-lime)}
body.mp-ui .cabinet-mobile-settings-link svg{display:none}

/* Phone bottom bar of the seller cabinet: text-only, lime = current. */
body.mp-ui .seller-shell .cabinet-mobile-nav{border-top:2px solid var(--mpw-ink);background:var(--mpw-surface);box-shadow:none;padding-left:0;padding-right:0}
body.mp-ui .cabinet-mobile-nav-item svg{display:none}
body.mp-ui .cabinet-mobile-nav-item{
    border-radius:0;
    color:var(--mpw-ink);
    font-family:var(--mpw-font-display);
    font-size:13px;
    font-weight:600;
    letter-spacing:.02em;
    line-height:15px;
}
body.mp-ui .cabinet-mobile-nav-item.active{background:var(--mpw-lime);color:var(--mpw-on-lime)}
body.mp-ui .cabinet-mobile-nav-item:hover:not(.add-product):not(.active){background:var(--mpw-ink);color:var(--mpw-on-ink)}
body.mp-ui .cabinet-mobile-nav-item:focus-visible{outline:3px solid var(--mpw-lime);outline-offset:-3px}
body.mp-ui .cabinet-mobile-nav-item.add-product{color:var(--mpw-ink)}
body.mp-ui .cabinet-mobile-nav-plus{border-radius:0;border:2px solid var(--mpw-ink);background:var(--mpw-lime);color:var(--mpw-on-lime);font-family:var(--font-ui)}
body.mp-ui .cabinet-mobile-nav-item.add-product.active .cabinet-mobile-nav-plus{background:var(--mpw-ink);border-color:var(--mpw-ink);color:var(--mpw-lime)}
body.mp-ui .cabinet-mobile-nav-badge{top:4px;right:calc(50% - 26px)}

/* --- Seller cabinet: plain "label + real value" stats, no icons -------- */
body.mp-ui .cabinet-stat-grid{gap:12px;grid-auto-rows:1fr}
body.mp-ui .cabinet-stat-card{padding:14px 16px}
body.mp-ui .cabinet-stat-label{
    margin:0 0 4px;
    color:var(--mpw-muted);
    font-family:var(--mpw-font-display);
    font-size:15px;
    font-weight:600;
    letter-spacing:.02em;
}
body.mp-ui .cabinet-stat-card{display:flex;flex-direction:column;justify-content:flex-start}
body.mp-ui .cabinet-stat-label{font-size:14px;line-height:18px;hyphens:none;overflow-wrap:normal}
body.mp-ui .cabinet-stat-value{font-family:var(--mpw-font-display);font-size:38px;line-height:1.05;font-weight:700;color:var(--mpw-ink)}
/* Secondary note under the number (e.g. "Без лимита"): small, calm, one line. */
body.mp-ui .cabinet-stat-note{margin:6px 0 0;color:var(--mpw-muted);font-family:var(--font-ui);font-size:12px;line-height:16px;font-weight:500;white-space:nowrap}
/* The "add product" tile keeps its link/action, styled as a primary block. */
body.mp-ui .cabinet-stat-card-add{background:var(--mpw-lime);border-style:solid;color:var(--mpw-on-lime);font-family:var(--mpw-font-display);font-weight:600;letter-spacing:.03em;text-transform:uppercase}
body.mp-ui .cabinet-stat-card-add:hover{background:var(--mpw-ink);color:var(--mpw-lime)}
body.mp-ui .cabinet-stat-card-add *{color:inherit}
body.mp-ui .cabinet-limit-list li,
body.mp-ui .cabinet-profile-list li{font-size:13px;color:var(--mpw-muted)}
/* Limits: every row is  name | number | note,  with the numbers in one
   shared column (subgrid; fixed columns as the fallback). Same component
   on the dashboard, the product form and every cabinet sidebar. */
body.mp-ui .cabinet-limit-list{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:0 12px}
body.mp-ui .cabinet-limit-list li{
    display:grid;
    grid-column:1/-1;
    grid-template-columns:minmax(0,1fr) 4.6em 6.4em;
    grid-template-columns:subgrid;
    align-items:baseline;
    gap:0 12px;
    padding:8px 0;
    border-bottom:1px solid var(--mpw-hair);
}
body.mp-ui .cabinet-limit-list li:first-child{padding-top:0}
body.mp-ui .cabinet-limit-list li:last-child{padding-bottom:0;border-bottom:0}
body.mp-ui .cabinet-limit-list strong{font-family:var(--mpw-font-display);font-size:16px;line-height:20px;font-weight:700;color:var(--mpw-ink);text-align:right;white-space:nowrap}
body.mp-ui .cabinet-limit-note{color:var(--mpw-muted);font-size:12px;line-height:16px;white-space:nowrap}
body.mp-ui .cabinet-tip-list li::before{border-radius:0;background:var(--mpw-ink)}
/* Product-form checklist: a clearly visible check in a solid square
   (white on black in light theme, inverted in dark theme). */
body.mp-ui .cabinet-tip-list.checklist li::before{
    content:"✓";
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 18px;
    width:18px;
    height:18px;
    margin-top:0;
    border-radius:0;
    background:var(--mpw-ink);
    color:var(--mpw-surface);
    font-family:var(--font-ui);
    font-size:12px;
    font-weight:700;
    line-height:1;
}
body.mp-ui .checklist li,
body.mp-ui .cabinet-tip-list li{color:var(--mpw-muted)}

/* Rows inside a container: hairline boxes, not floating cards. */
body.mp-ui .cabinet-item,
body.mp-ui .offer-row,
body.mp-ui .photo-card,
body.mp-ui .choose-product-option,
body.mp-ui .spec-list li{border:1px solid var(--mpw-hair);border-radius:0;background:var(--mpw-surface);box-shadow:none}
body.mp-ui .cabinet-item:hover,
body.mp-ui .offer-row:hover{border-color:var(--mpw-ink)}
body.mp-ui .spec-list li.spec-category{border-color:var(--mpw-hair);background:var(--mpw-surface-2)}
body.mp-ui .spec-list dt{color:var(--mpw-muted);font-family:var(--mpw-font-display);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
body.mp-ui .cabinet-item-thumb,
body.mp-ui .request-card-image,
body.mp-ui .request-card-image img,
body.mp-ui .gallery-thumbs img,
body.mp-ui .gallery-thumbs button,
body.mp-ui .photo-card img,
body.mp-ui .seller-avatar{border-radius:0}
body.mp-ui .cabinet-item-title,
body.mp-ui .offer-row-title{color:var(--mpw-ink)}
body.mp-ui .cabinet-item-notice{border-radius:0}
body.mp-ui .seller-head{border-radius:0;border:1px solid var(--mpw-hair);background:var(--mpw-surface-2)}
body.mp-ui .seller-avatar{border:2px solid var(--mpw-ink);background:var(--mpw-surface);color:var(--mpw-ink);font-family:var(--mpw-font-display)}
body.mp-ui .meta-list li{border-top:1px solid var(--mpw-hair)}

/* --- Catalog / requests cards ----------------------------------------- */
body.mp-ui .product-card,
body.mp-ui .request-card{overflow:hidden;transition:background-color .12s ease}
body.mp-ui .product-card:hover,
body.mp-ui .request-card:hover{transform:none;box-shadow:none;background:var(--mpw-surface-2)}
body.mp-ui .product-card:focus-within,
body.mp-ui .request-card:focus-within{box-shadow:0 0 0 3px var(--mpw-lime)}
body.mp-ui .product-card-image{border-bottom:2px solid var(--mpw-ink)}
body.mp-ui .request-card-image{border-bottom:2px solid var(--mpw-ink)}
body.mp-ui .product-card-title,
body.mp-ui .request-card-title{color:var(--mpw-ink)}
body.mp-ui .product-card-price,
body.mp-ui .product-price,
body.mp-ui .cabinet-item-price{color:var(--mpw-ink);font-family:var(--mpw-font-display);font-weight:700;letter-spacing:.01em}
body.mp-ui .product-card-price{font-size:19px}
body.mp-ui .product-price{font-size:34px}
body.mp-ui .cabinet-item-price{font-size:16px}
body.mp-ui .favorite-toggle-btn{border-radius:0;border:1px solid var(--mpw-ink);background:var(--mpw-surface)}

/* --- Badges / chips: square, condensed, semantic color kept ------------ */
body.mp-ui .status-badge,
body.mp-ui .avail-badge,
body.mp-ui .meta-chip,
body.mp-ui .product-card-condition,
body.mp-ui .request-card-condition,
body.mp-ui .cover-tag,
body.mp-ui .online,
body.mp-ui .offline,
body.mp-ui .away{
    border-radius:0;
    font-family:var(--mpw-font-display);
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
}
body.mp-ui .status-badge,
body.mp-ui .avail-badge{font-size:12px}
body.mp-ui .meta-chip{border-color:var(--mpw-ink);background:var(--mpw-surface);color:var(--mpw-ink)}
body.mp-ui .product-card-condition,
body.mp-ui .request-card-condition{background:var(--mpw-surface);color:var(--mpw-ink);box-shadow:inset 0 0 0 1px var(--mpw-ink)}

/* --- Footer ------------------------------------------------------------ */
body.mp-ui .footer{border-top:2px solid var(--mpw-ink);background:var(--mpw-surface);color:var(--mpw-muted);font-size:12px}
body.mp-ui .footer a{color:var(--mpw-ink);font-weight:600}

/* --- Phones ------------------------------------------------------------ */
@media(max-width:768px){
    body.mp-ui .header{order:1;min-height:56px;padding:0 12px}
    body.mp-ui .header .logo{font-size:34px}
    body.mp-ui .language-switch{position:absolute;top:0;right:12px;width:auto;height:56px;padding:0;justify-content:flex-end;flex-wrap:nowrap}
    body.mp-ui .language-switch .account-nav-link{min-height:36px;padding:3px 10px;font-size:15px}
    body.mp-ui .topbar{position:static;order:2;height:auto;padding:6px 12px;border-left:0;border-bottom:1px solid var(--mpw-hair);background:var(--mpw-surface);font-size:13px;line-height:20px}
    body.mp-ui .page-title,
    body.mp-ui .cabinet-page-title{font-size:22px}
    body.mp-ui .product-title,
    body.mp-ui .request-title{font-size:24px}
    body.mp-ui .product-price{font-size:28px}
    body.mp-ui .cabinet-stat-value{font-size:30px}
    body.mp-ui .cabinet-side-nav{border:0;background:transparent}
    body.mp-ui .cabinet-side-nav{gap:6px}
    body.mp-ui .cabinet-side-link{border:2px solid var(--mpw-ink)}
    body.mp-ui .cabinet-side-link:last-child{border-bottom:2px solid var(--mpw-ink)}
}

/* =======================================================================
   2026-10-23 polish -- the same layer, extended (no new palette, no new
   components): the UIN account dropdown, roomier seller-cabinet columns,
   and the account/info pages that still had the old look -- /contact,
   /terms, /security/devices and the guest auth screens (/chat guest gate
   + sign-in / create-UIN modal, /link). Those templates opt in exactly
   like the marketplace ones (body.mp-ui + one page class); their own
   <style> blocks, markup ids, forms and JS hooks stay as they were.
   ======================================================================= */

/* The UIN account dropdown is styled by its own component stylesheet,
   static/css/account-menu.css (linked from _account_menu.html), so it
   looks the same on every page that shows the UIN, not only here. */

/* --- Cabinet proportions (one place for every page on .cabinet-shell:
   the seller cabinet, /requests/mine, /favorites) --------------------- */
/* The page grows (1180 -> 1440px) so the side rails get real width for
   their text without taking it from the centre column. */
@media(min-width:1101px){
    body.mp-ui .main:has(> .cabinet-shell){width:min(1440px,100%)}
    body.mp-ui .cabinet-shell{grid-template-columns:248px minmax(0,1fr) 352px;gap:24px}
    body.mp-ui .cabinet-shell .cabinet-side-link{padding:12px 20px;font-size:16px;line-height:20px}
}
@media(min-width:1366px) and (max-width:1439px){
    body.mp-ui .cabinet-shell{grid-template-columns:236px minmax(0,1fr) 340px;gap:20px}
}
@media(min-width:1280px) and (max-width:1365px){
    body.mp-ui .cabinet-shell{grid-template-columns:224px minmax(0,1fr) 340px;gap:18px}
}
@media(min-width:1101px) and (max-width:1279px){
    body.mp-ui .cabinet-shell{grid-template-columns:216px minmax(0,1fr) 292px;gap:18px}
}
@media(min-width:769px) and (max-width:1100px){
    body.mp-ui .cabinet-shell{grid-template-columns:216px minmax(0,1fr)}
    body.mp-ui .cabinet-shell .cabinet-side-link{padding:12px 18px;font-size:16px;line-height:20px}
}
body.mp-ui .cabinet-shell .cabinet-side-card{padding:20px 22px}
body.mp-ui .cabinet-shell .cabinet-side-card h2{font-size:17px;margin-bottom:12px}
body.mp-ui .cabinet-shell .cabinet-limit-list li,
body.mp-ui .cabinet-shell .cabinet-profile-list li{font-size:14px;line-height:20px}
body.mp-ui .cabinet-shell .cabinet-profile-list li + li{margin-top:8px}
body.mp-ui .cabinet-shell .cabinet-limit-list strong{font-size:17px}
body.mp-ui .cabinet-shell .cabinet-limit-note{font-size:13px}
body.mp-ui .cabinet-shell .cabinet-tip-list li{font-size:14px;line-height:20px}
body.mp-ui .cabinet-shell .cabinet-tip-list li::before{margin-top:7px}
body.mp-ui .cabinet-shell .cabinet-tip-list.checklist li::before{margin-top:1px}

/* --- Account / info pages: shared frame ------------------------------- */
/* Phones: the same header order the marketplace pages use (logo bar,
   then the clock line), then the page, then the footer. */
@media(max-width:768px){
    body.mp-ui.vs-page{display:flex;flex-direction:column;align-items:stretch;max-width:100%;overflow-x:hidden;text-align:left}
    body.mp-ui.vs-page .vs-main{order:3}
    body.mp-ui.vs-page .footer{order:4}
}
body.mp-ui.vs-page{display:flex;flex-direction:column;min-height:100vh;text-align:left}
body.mp-ui .vs-main{flex:1 0 auto;box-sizing:border-box;width:min(920px,100%);margin:0 auto;padding:32px 24px 48px;text-align:left;line-height:1.5}
body.mp-ui .vs-main .page-title,
body.mp-ui .vs-main .sec-title{margin:0 0 6px;font-family:var(--mpw-font-display);font-size:40px;line-height:1.05;font-weight:700;letter-spacing:.01em;text-transform:uppercase;text-align:left;color:var(--mpw-ink)}
body.mp-ui .vs-page-lead{margin:0 0 24px;color:var(--mpw-muted);font-size:15px}
body.mp-ui.vs-page .footer{padding:16px;text-align:center;font-size:13px;line-height:22px}
body.mp-ui.vs-page .footer a{text-decoration:none}
@media(max-width:768px){
    body.mp-ui .vs-main{width:100%;max-width:100%;margin:0;padding:22px 16px 36px}
    body.mp-ui .vs-main .page-title,
    body.mp-ui .vs-main .sec-title{font-size:30px}
}

/* --- /contact ---------------------------------------------------------- */
body.mp-ui.vs-contact .contacts-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0}
body.mp-ui.vs-contact .contact-link{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
    min-width:0;
    min-height:64px;
    padding:14px 20px;
    border:2px solid var(--mpw-ink);
    border-radius:0;
    background:var(--mpw-surface);
    color:var(--mpw-ink);
    font-family:var(--mpw-font-display);
    font-size:20px;
    font-weight:600;
    letter-spacing:.03em;
    text-transform:uppercase;
    transition:background-color .12s ease,color .12s ease;
}
body.mp-ui.vs-contact .contact-link::after{content:"→";margin-left:auto;font-family:var(--font-ui);font-size:20px;line-height:1}
body.mp-ui.vs-contact .contact-link:hover{background:var(--mpw-lime);color:var(--mpw-on-lime)}
body.mp-ui.vs-contact .contact-link:focus-visible{outline:none;box-shadow:0 0 0 3px var(--mpw-lime)}
body.mp-ui.vs-contact .contact-link img,
body.mp-ui.vs-contact .telegram-icon-accent{width:28px;height:28px;flex:none}
body.mp-ui.vs-contact .about{max-width:none;margin:0;padding:22px 24px;border:2px solid var(--mpw-ink);background:var(--mpw-surface);text-align:left}
body.mp-ui.vs-contact .about h2{margin:0 0 10px;font-family:var(--mpw-font-display);font-size:20px;line-height:1.2;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--mpw-ink)}
body.mp-ui.vs-contact .about p{max-width:68ch;margin:0;color:var(--mpw-ink);font-size:15px;line-height:1.65;text-align:left}
body.mp-ui.vs-contact .about a{color:var(--mpw-ink);font-weight:600}
@media(max-width:600px){
    body.mp-ui.vs-contact .contacts-row{grid-template-columns:1fr;gap:10px;margin:18px 0}
    body.mp-ui.vs-contact .contact-link{width:100%;max-width:none;min-height:56px;font-size:18px}
    body.mp-ui.vs-contact .about{padding:18px 16px}
    body.mp-ui.vs-contact .about p{max-width:none;font-size:15px}
}

/* --- /terms (presentation only; the text itself is _terms_content.html) */
body.mp-ui.vs-terms .vs-main{width:min(860px,100%)}
body.mp-ui.vs-terms .terms-body{padding:8px 28px 24px;border:2px solid var(--mpw-ink);background:var(--mpw-surface)}
body.mp-ui.vs-terms .terms-revision{display:inline-block;margin:16px 0 4px;padding:3px 10px;border:1px solid var(--mpw-ink);color:var(--mpw-ink);font-size:13px;font-weight:600;text-align:left}
body.mp-ui.vs-terms .terms-body h4{margin:26px 0 10px;padding-top:16px;border-top:2px solid var(--mpw-ink);color:var(--mpw-ink);font-family:var(--mpw-font-display);font-size:20px;line-height:1.25;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
body.mp-ui.vs-terms .terms-body h4:first-of-type{margin-top:18px}
body.mp-ui.vs-terms .terms-body p,
body.mp-ui.vs-terms .terms-body li{max-width:72ch;color:var(--mpw-ink);font-size:15px;line-height:1.7}
body.mp-ui.vs-terms .terms-body p{margin:0 0 10px}
body.mp-ui.vs-terms .terms-body ul{margin:0 0 12px;padding-left:22px}
@media(max-width:600px){
    body.mp-ui.vs-terms .terms-body{padding:4px 16px 18px}
    body.mp-ui.vs-terms .terms-body h4{font-size:18px}
    body.mp-ui.vs-terms .terms-body p,
    body.mp-ui.vs-terms .terms-body li{font-size:15px;line-height:1.65}
}

/* --- /security/devices (CSS only: rows/badges/buttons are built by the
   device controller with these same class names) ----------------------- */
body.mp-ui.vs-devices .back-link{margin:0 0 18px;font-size:15px}
body.mp-ui.vs-devices .sec-intro,
body.mp-ui.vs-devices .sec-intro-extra{color:var(--mpw-muted);font-size:14px;line-height:1.55}
body.mp-ui.vs-devices .sec-intro{margin:0 0 6px}
body.mp-ui.vs-devices .sec-intro-extra{margin:0 0 14px}
body.mp-ui.vs-devices .sec-no-recovery-warning{margin:0 0 22px;padding:10px 14px;border-left:4px solid var(--mpw-red);background:var(--mpw-red-soft);color:var(--mpw-red);font-size:14px}
body.mp-ui.vs-devices .sec-card{padding:0;border:2px solid var(--mpw-ink);border-radius:0;background:var(--mpw-surface);margin-bottom:16px}
body.mp-ui.vs-devices #sec-link-device-card,
body.mp-ui.vs-devices .sec-confirm-overlay .sec-card,
body.mp-ui.vs-devices #sec-qr-modal > .sec-card{padding:18px 20px}
body.mp-ui.vs-devices #sec-devices-list:empty{min-height:24px}
body.mp-ui.vs-devices .sec-device-row{align-items:center;gap:20px;padding:16px 20px;border-bottom:1px solid var(--mpw-hair)}
body.mp-ui.vs-devices .sec-device-row:last-child{border-bottom:0}
body.mp-ui.vs-devices .sec-device-row > div:first-child{min-width:0}
body.mp-ui.vs-devices .sec-device-name{gap:8px;margin-bottom:4px;color:var(--mpw-ink);font-family:var(--mpw-font-display);font-size:19px;line-height:1.25;font-weight:600;letter-spacing:.02em}
body.mp-ui.vs-devices .sec-device-meta{color:var(--mpw-muted);font-size:13px;line-height:1.5;overflow-wrap:anywhere}
body.mp-ui.vs-devices .sec-badge{display:inline-flex;align-items:center;min-height:22px;margin-top:6px;padding:1px 8px;border-radius:0;font-family:var(--mpw-font-display);font-size:12px;line-height:1.5;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
body.mp-ui.vs-devices .sec-device-name .sec-badge{margin-top:0}
body.mp-ui.vs-devices .sec-badge-current{border:2px solid var(--mpw-ink);background:var(--mpw-lime);color:var(--mpw-on-lime)}
body.mp-ui.vs-devices .sec-badge-verified{border:2px solid var(--green);background:transparent;color:var(--green)}
body.mp-ui.vs-devices .sec-badge-unverified{border:2px solid var(--amber);background:var(--amber-soft);color:var(--amber)}
body.mp-ui.vs-devices .sec-badge-revoked{border:2px solid var(--mpw-red);color:var(--mpw-red)}
body.mp-ui.vs-devices .sec-actions button{
    min-height:40px;
    padding:8px 14px;
    border:2px solid var(--mpw-ink);
    border-radius:0;
    background:var(--mpw-surface);
    color:var(--mpw-ink);
    font-family:var(--mpw-font-display);
    font-size:15px;
    font-weight:600;
    letter-spacing:.02em;
}
body.mp-ui.vs-devices .sec-actions button:hover{background:var(--mpw-ink);border-color:var(--mpw-ink);color:var(--mpw-on-ink)}
body.mp-ui.vs-devices .sec-actions button.danger,
body.mp-ui.vs-devices button.danger{border:2px solid var(--mpw-red);border-radius:0;background:var(--mpw-surface);color:var(--mpw-red)}
body.mp-ui.vs-devices .sec-actions button.danger:hover,
body.mp-ui.vs-devices button.danger:hover{background:var(--mpw-red);border-color:var(--mpw-red);color:#fff}
body.mp-ui.vs-devices .sec-actions button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--mpw-lime)}
body.mp-ui.vs-devices .sec-device-row .sec-actions{width:236px;gap:8px;margin-top:0}
body.mp-ui.vs-devices .sec-primary-cta{min-height:50px;border:2px solid var(--mpw-ink);border-radius:0;background:var(--mpw-lime);box-shadow:none;color:var(--mpw-on-lime);font-family:var(--mpw-font-display);font-size:17px;letter-spacing:.03em;text-transform:uppercase}
body.mp-ui.vs-devices .sec-primary-cta:hover{background:var(--mpw-ink);color:var(--mpw-lime)}
body.mp-ui.vs-devices .sec-primary-cta:focus-visible{outline:none;box-shadow:0 0 0 3px var(--mpw-lime)}
body.mp-ui.vs-devices .sec-warning{border:2px solid var(--mpw-red);border-radius:0;background:var(--mpw-red-soft);color:var(--mpw-red);font-size:14px}
body.mp-ui.vs-devices .sec-devices-loading{padding:26px 0;color:var(--mpw-muted);font-size:14px}
body.mp-ui.vs-devices .sec-confirm-overlay,
body.mp-ui.vs-devices #sec-qr-modal:not(.sec-hidden),
body.mp-ui.vs-devices .acct-confirm-overlay{background:rgba(0,0,0,.55)}
body.mp-ui.vs-devices .sec-confirm-title,
body.mp-ui.vs-devices #sec-qr-title{font-family:var(--mpw-font-display);font-size:20px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--mpw-ink)}
body.mp-ui.vs-devices .sec-confirm-body{color:var(--mpw-muted);font-size:14px}
body.mp-ui.vs-devices .sec-qr-box{border:2px solid var(--mpw-ink);border-radius:0}
body.mp-ui.vs-devices .acct-danger-zone{margin-top:28px;padding:20px 22px;border:2px solid var(--mpw-red);border-radius:0;background:var(--mpw-surface)}
body.mp-ui.vs-devices .acct-danger-zone h2{font-family:var(--mpw-font-display);font-size:20px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--mpw-red)}
body.mp-ui.vs-devices .acct-danger-notice{font-size:14px}
body.mp-ui.vs-devices .acct-danger-explainer,
body.mp-ui.vs-devices .acct-danger-history{color:var(--mpw-muted);font-size:14px;line-height:1.55}
body.mp-ui.vs-devices .acct-delete-button{min-height:48px;border:2px solid var(--mpw-red);border-radius:0;background:var(--mpw-red);color:#fff;font-family:var(--mpw-font-display);font-size:16px;letter-spacing:.03em;text-transform:uppercase}
body.mp-ui.vs-devices .acct-delete-button:hover{filter:none;background:var(--mpw-surface);color:var(--mpw-red)}
body.mp-ui.vs-devices .acct-confirm-card{border:2px solid var(--mpw-red);border-radius:0;background:var(--mpw-surface)}
body.mp-ui.vs-devices .acct-confirm-card h3{font-family:var(--mpw-font-display);font-size:20px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
body.mp-ui.vs-devices .acct-confirm-card input[type="password"],
body.mp-ui.vs-devices .acct-confirm-card input:not([type]){border:2px solid var(--mpw-ink);border-radius:0}
body.mp-ui.vs-devices .acct-form-error{border:2px solid var(--mpw-red);border-radius:0;background:var(--mpw-red-soft)}
body.mp-ui.vs-devices .acct-modal-actions button{min-height:42px;border-radius:0;font-family:var(--mpw-font-display);font-size:15px;letter-spacing:.02em}
body.mp-ui.vs-devices #acct-delete-cancel{border:2px solid var(--mpw-ink);background:var(--mpw-surface);color:var(--mpw-ink)}
body.mp-ui.vs-devices #acct-delete-cancel:hover{background:var(--mpw-ink);color:var(--mpw-on-ink)}
body.mp-ui.vs-devices #acct-delete-submit{border:2px solid var(--mpw-red)}
@media(max-width:600px){
    body.mp-ui.vs-devices .sec-device-row{align-items:stretch;padding:14px 16px}
    body.mp-ui.vs-devices .sec-device-row .sec-actions{width:100%;margin-top:4px}
    body.mp-ui.vs-devices .sec-device-name{font-size:18px}
    body.mp-ui.vs-devices .acct-danger-zone{padding:16px}
}

/* --- Guest auth screens: /chat guest gate + modal, /link -------------- */
body.mp-ui.vs-auth{--chat-panel-border:var(--mpw-hair);--chat-input-border:var(--mpw-ink);--chat-panel-bg-sidebar:var(--mpw-surface-2)}
/* /chat's own top bar for a guest: wordmark left, RU/EN + theme right. */
body.mp-ui.vs-auth .messenger-topbar{height:64px;padding:0 24px;border-bottom:2px solid var(--mpw-ink);background:var(--mpw-surface)}
body.mp-ui.vs-auth .brand-link{color:var(--mpw-ink)}
body.mp-ui.vs-auth .brand-name{font-size:40px;padding:.32em 0 .08em;font-synthesis:none}
body.mp-ui.vs-auth .header-actions .language-switch{position:static;height:auto;padding:0;font-size:13px}
body.mp-ui.vs-auth .msg-guest-gate{min-height:calc(100vh - 66px);padding:32px 16px;align-items:flex-start;box-sizing:border-box}
body.mp-ui.vs-auth .msg-guest-gate-card{box-sizing:border-box;max-width:480px;margin-top:4vh;padding:28px 28px 30px;border:2px solid var(--mpw-ink);border-radius:0;background:var(--mpw-surface)}
body.mp-ui.vs-auth .msg-guest-gate-icon{width:64px;height:64px;margin-bottom:14px;border-radius:0;border:2px solid var(--mpw-ink)}
body.mp-ui.vs-auth .msg-guest-gate-card > p:not([class]){margin:0 0 24px;color:var(--mpw-ink);font-family:var(--mpw-font-display);font-size:22px;line-height:1.25;font-weight:600;letter-spacing:.01em}
body.mp-ui.vs-auth .msg-guest-gate-card .msg-guest-gate-label{margin:0 0 10px;color:var(--mpw-ink);font-family:var(--mpw-font-display);font-size:15px;line-height:20px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
body.mp-ui.vs-auth .msg-guest-gate-card .msg-guest-gate-hint{margin:8px 0 0;color:var(--mpw-muted);font-size:13px;line-height:18px}
body.mp-ui.vs-auth .msg-guest-gate-divider{margin:20px 0;color:var(--mpw-muted);font-family:var(--mpw-font-display);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
body.mp-ui.vs-auth .msg-guest-gate-divider::before,
body.mp-ui.vs-auth .msg-guest-gate-divider::after{background:var(--mpw-hair)}
/* Primary path = lime; the other two = outlined (secondary). */
body.mp-ui.vs-auth .msg-primary-cta-pill,
body.mp-ui.vs-auth .msg-guest-gate-section .secondary-button,
body.mp-ui.vs-auth .msg-auth-form .primary-button{
    min-height:50px;
    padding:12px 20px;
    border:2px solid var(--mpw-ink);
    border-radius:0;
    box-shadow:none;
    font-family:var(--mpw-font-display);
    font-size:17px;
    font-weight:600;
    letter-spacing:.03em;
    text-transform:uppercase;
}
body.mp-ui.vs-auth .msg-primary-cta-pill,
body.mp-ui.vs-auth .msg-auth-form .primary-button{background:var(--mpw-lime);color:var(--mpw-on-lime)}
body.mp-ui.vs-auth .msg-primary-cta-pill:hover,
body.mp-ui.vs-auth .msg-auth-form .primary-button:hover:not(:disabled){background:var(--mpw-ink);color:var(--mpw-lime)}
body.mp-ui.vs-auth .msg-auth-form .primary-button:disabled{opacity:.45;cursor:not-allowed}
body.mp-ui.vs-auth .msg-guest-gate-section .secondary-button{width:100%;background:var(--mpw-surface);color:var(--mpw-ink)}
body.mp-ui.vs-auth .msg-guest-gate-section .secondary-button:hover{background:var(--mpw-ink);color:var(--mpw-on-ink)}
body.mp-ui.vs-auth .msg-primary-cta-pill:focus-visible,
body.mp-ui.vs-auth .secondary-button:focus-visible,
body.mp-ui.vs-auth .primary-button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--mpw-lime)}
/* Sign-in / create-UIN / success modal and the Terms modal. */
body.mp-ui.vs-auth .msg-modal-overlay{background:rgba(0,0,0,.55)}
body.mp-ui.vs-auth .msg-modal{border:2px solid var(--mpw-ink);border-radius:0;background:var(--mpw-surface);box-shadow:none}
body.mp-ui.vs-auth .msg-modal h3,
body.mp-ui.vs-auth .vs-auth-title{margin:0 0 4px;color:var(--mpw-ink);font-family:var(--mpw-font-display);font-size:26px;line-height:1.15;font-weight:700;letter-spacing:.01em;text-transform:uppercase}
body.mp-ui.vs-auth .msg-modal-close{color:var(--mpw-ink);font-size:26px}
body.mp-ui.vs-auth .msg-auth-form label{color:var(--mpw-ink);font-size:14px}
body.mp-ui.vs-auth .msg-auth-form input[type="text"],
body.mp-ui.vs-auth .msg-auth-form input[type="password"],
body.mp-ui.vs-auth .msg-auth-form input:not([type]){min-height:48px;border:2px solid var(--mpw-ink);border-radius:0;background:var(--mpw-surface);color:var(--mpw-ink)}
body.mp-ui.vs-auth .msg-auth-form input:focus{outline:none;box-shadow:0 0 0 3px var(--mpw-lime)}
body.mp-ui.vs-auth .msg-checkbox-row{color:var(--mpw-ink);font-weight:500}
body.mp-ui.vs-auth .msg-checkbox-row input{accent-color:var(--mpw-ink)}
body.mp-ui.vs-auth .msg-form-error{color:var(--mpw-red);font-size:14px;font-weight:600}
/* Proposed / issued UIN: set apart, easy to read, never oversized. */
body.mp-ui.vs-auth .msg-uin-propose-row{padding:12px 14px;border:2px solid var(--mpw-ink);background:var(--mpw-surface-2);color:var(--mpw-ink)}
body.mp-ui.vs-auth .msg-uin-propose-row strong{font-family:var(--mpw-font-display);font-size:24px;font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums}
body.mp-ui.vs-auth .msg-uin-propose-row .secondary-button,
body.mp-ui.vs-auth .msg-success-block .secondary-button,
body.mp-ui.vs-auth #uin-propose-error .secondary-button{min-height:40px;border:2px solid var(--mpw-ink);border-radius:0;background:var(--mpw-surface);color:var(--mpw-ink);font-family:var(--mpw-font-display);font-size:14px;letter-spacing:.02em}
body.mp-ui.vs-auth .msg-uin-propose-row .secondary-button:hover,
body.mp-ui.vs-auth .msg-success-block .secondary-button:hover,
body.mp-ui.vs-auth #uin-propose-error .secondary-button:hover{background:var(--mpw-ink);color:var(--mpw-on-ink)}
body.mp-ui.vs-auth .msg-success-label{color:var(--mpw-muted);font-family:var(--mpw-font-display);font-size:14px;letter-spacing:.06em}
body.mp-ui.vs-auth .msg-success-value{padding:16px;border:2px solid var(--mpw-ink);border-radius:0;background:var(--mpw-lime);color:var(--mpw-on-lime);font-family:var(--mpw-font-display);font-size:34px;letter-spacing:.1em;font-variant-numeric:tabular-nums}
body.mp-ui.vs-auth .msg-danger-zone{border:2px solid var(--mpw-red);border-radius:0;background:var(--mpw-red-soft)}
body.mp-ui.vs-auth .msg-danger-zone h5{color:var(--mpw-red);font-family:var(--mpw-font-display);font-size:15px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
body.mp-ui.vs-auth .msg-danger-zone p{color:var(--mpw-ink);font-size:14px;line-height:1.5}
body.mp-ui.vs-auth .msg-terms-open-link{padding:1px 2px;color:var(--mpw-ink);font-size:14px;text-decoration:none}
body.mp-ui.vs-auth .msg-terms-open-link:hover{background:var(--mpw-lime);color:var(--mpw-on-lime)}
body.mp-ui.vs-auth .msg-terms-open-link:focus-visible{outline:2px solid var(--mpw-ink);outline-offset:2px}
body.mp-ui.vs-auth .msg-terms-required-badge{border:2px solid var(--mpw-red);border-radius:0;font-family:var(--mpw-font-display);font-size:12px;letter-spacing:.05em}
body.mp-ui.vs-auth .msg-terms-accepted-badge{padding:2px 8px;border:2px solid var(--mpw-ink);background:var(--mpw-lime);color:var(--mpw-on-lime);font-family:var(--mpw-font-display);font-size:12px;letter-spacing:.05em;text-transform:uppercase}
body.mp-ui.vs-auth .msg-terms-modal-header,
body.mp-ui.vs-auth .msg-terms-modal-footer{border-color:var(--mpw-ink)}
body.mp-ui.vs-auth .msg-terms-modal-body h4{color:var(--mpw-ink);font-family:var(--mpw-font-display);font-size:16px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
body.mp-ui.vs-auth .msg-terms-modal-body p,
body.mp-ui.vs-auth .msg-terms-modal-body li{color:var(--mpw-ink);font-size:14px}
body.mp-ui.vs-auth .msg-terms-modal-footer .primary-button{min-height:50px;border:2px solid var(--mpw-ink);border-radius:0;background:var(--mpw-lime);color:var(--mpw-on-lime);font-family:var(--mpw-font-display);font-size:17px;letter-spacing:.03em;text-transform:uppercase}
body.mp-ui.vs-auth .msg-terms-modal-footer .primary-button:disabled{opacity:.45}
/* /link: the same card language. */
body.mp-ui.vs-link .main{width:min(480px,100%);padding:28px 16px 56px}
body.mp-ui.vs-link .dl-title{margin:0 0 16px;font-family:var(--mpw-font-display);font-size:30px;line-height:1.1;font-weight:700;letter-spacing:.01em;text-transform:uppercase;text-align:left;color:var(--mpw-ink)}
body.mp-ui.vs-link #dl-step-done .dl-title{font-size:20px}
body.mp-ui.vs-link .dl-card{padding:22px 22px 24px;border:2px solid var(--mpw-ink);border-radius:0;background:var(--mpw-surface)}
body.mp-ui.vs-link .dl-intro{color:var(--mpw-muted);font-size:14px;line-height:1.55;text-align:left}
body.mp-ui.vs-link .dl-card label{color:var(--mpw-ink);font-size:14px}
body.mp-ui.vs-link .dl-card input{min-height:48px;border:2px solid var(--mpw-ink);border-radius:0;font-family:var(--mpw-font-display);font-size:22px;letter-spacing:.08em}
body.mp-ui.vs-link .dl-warning{border:2px solid var(--amber);border-radius:0;font-size:13px}
body.mp-ui.vs-link .dl-error{border:2px solid var(--mpw-red);border-radius:0;background:var(--mpw-red-soft);color:var(--mpw-red)}
body.mp-ui.vs-link .dl-actions button{min-height:50px;width:100%;border:2px solid var(--mpw-ink);border-radius:0;background:var(--mpw-lime);color:var(--mpw-on-lime);box-shadow:none;font-family:var(--mpw-font-display);font-size:17px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
body.mp-ui.vs-link .dl-actions #dl-continue-button{border-color:var(--mpw-ink);background:var(--mpw-lime);color:var(--mpw-on-lime);box-shadow:none}
body.mp-ui.vs-link .dl-actions button:hover{background:var(--mpw-ink);color:var(--mpw-lime)}
body.mp-ui.vs-link .dl-actions #dl-continue-button:hover{background:var(--mpw-ink);color:var(--mpw-lime)}
body.mp-ui.vs-link .dl-actions button.secondary{background:var(--mpw-surface);color:var(--mpw-ink)}
body.mp-ui.vs-link .dl-actions button.secondary:hover{background:var(--mpw-ink);color:var(--mpw-on-ink)}
body.mp-ui.vs-link .dl-actions button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--mpw-lime)}
body.mp-ui.vs-link .dl-qr-box{border:2px solid var(--mpw-ink);border-radius:0}
body.mp-ui.vs-link #dl-status,
body.mp-ui.vs-link #dl-ttl{color:var(--mpw-muted)}
@media(max-width:640px){
    body.mp-ui.vs-auth .messenger-topbar{height:auto;min-height:56px;padding:8px 12px;padding-top:max(8px, env(safe-area-inset-top));flex-direction:row;align-items:center}
    body.mp-ui.vs-auth .brand-link{width:auto;justify-content:flex-start}
    body.mp-ui.vs-auth .brand-name{font-size:34px}
    body.mp-ui.vs-auth .header-actions{width:auto;margin-left:auto;justify-content:flex-end}
    body.mp-ui.vs-auth .msg-guest-gate{min-height:0;padding:16px 12px 28px}
    body.mp-ui.vs-auth .msg-guest-gate-card{margin-top:0;padding:20px 16px 22px}
    body.mp-ui.vs-auth .msg-guest-gate-icon{width:48px;height:48px;margin-bottom:10px}
    body.mp-ui.vs-auth .msg-guest-gate-card > p:not([class]){margin-bottom:18px;font-size:19px}
    body.mp-ui.vs-auth .msg-guest-gate-divider{margin:16px 0}
    body.mp-ui.vs-auth .msg-modal{border-width:2px}
    body.mp-ui.vs-auth .msg-modal h3,
    body.mp-ui.vs-auth .vs-auth-title{font-size:22px}
    body.mp-ui.vs-auth .msg-success-value{font-size:28px}
    body.mp-ui.vs-link .dl-title{font-size:26px}
}

/* --- No underlines anywhere in the new UI (2026-10-24) ---------------- */
/* Links never underline -- not at rest, hover, focus, active or visited.
   Buttons/tabs/nav keep their own fill states; plain text links get a
   lime highlight on hover and a solid outline for keyboard focus. */
body.mp-ui a,
body.mp-ui a:is(:link,:visited,:hover,:focus,:focus-visible,:active){text-decoration:none}
body.mp-ui a:focus-visible{outline:2px solid var(--mpw-ink);outline-offset:2px}
body.mp-ui :is(.footer, .cabinet-profile-list, .cabinet-panel-head, .about, .terms-body) a:not(.cabinet-btn){padding:1px 3px;margin:0 -3px;transition:background-color .12s ease,color .12s ease}
body.mp-ui :is(.footer, .cabinet-profile-list, .cabinet-panel-head, .about, .terms-body) a:not(.cabinet-btn):is(:hover,:active){background:var(--mpw-lime);color:var(--mpw-on-lime)}