/* New-design site pages: home, tools index, contact, login/register, download, 404,
   review calculator, and the seller visitor landing (croppers/new_ui/seller_landing.html).
   Tokens from desk.css. */

/* ── Home ──────────────────────────────────────────────────── */
.home-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 30px; align-items: center; padding: 34px 0 18px; }
.home-hero h1 { font-size: 40px; font-weight: var(--fw-bold); letter-spacing: -.025em; line-height: 1.1; margin: 12px 0 12px; }
.home-hero h1 em { font-style: normal; color: var(--primary-text); }
.home-hero .lead { color: var(--text-muted); font-size: 17px; line-height: 1.55; max-width: 520px; }
.home-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.home-hero .trust { justify-content: flex-start; margin-top: 16px; }
.brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.brand-tile { display: flex; align-items: center; gap: 10px; padding: 12px 14px; text-decoration: none; color: var(--text); font-weight: var(--fw-semibold); font-size: var(--fs-label); }
.brand-tile img { width: 30px; height: 30px; border-radius: 8px; background: #fff; padding: 2px; border: 1px solid var(--border); }
.brand-tile:hover { border-color: var(--primary); background: var(--surface-alt); }
.brand-tile--more { justify-content: center; color: var(--primary-text); }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; padding: 24px 26px; margin-top: 34px; }
.calc h2 { font-size: 22px; font-weight: var(--fw-bold); letter-spacing: -.01em; }
.calc p { color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.calc__form { display: grid; gap: 12px; }
.calc__form label { display: grid; gap: 6px; font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--text-muted); }
.calc__form .input { height: 40px; font-size: var(--fs-section); }
.calc__out { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.calc__stat { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; }
.calc__stat b { display: block; font-size: 24px; font-weight: var(--fw-bold); color: var(--primary-text); letter-spacing: -.02em; }
.calc__stat span { font-size: var(--fs-label); color: var(--text-muted); }
.calc__note { font-size: var(--fs-small); color: var(--text-faint); }
@media (max-width: 960px) { .home-hero { grid-template-columns: 1fr; } .calc { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .home-hero h1 { font-size: 30px; } .brand-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Tools index ───────────────────────────────────────────── */
.tool-section { margin-top: 30px; }
.tool-section h2 { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: .08em; color: var(--text-faint); margin-bottom: 10px; }
.tools-grid--wide { grid-template-columns: repeat(4, 1fr); }
.tool-card img { width: 24px; height: 24px; }
@media (max-width: 960px) { .tools-grid--wide { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tools-grid--wide { grid-template-columns: 1fr; } }

/* ── Contact / login / register / 404 / download ─────────── */
.narrow { max-width: 480px; margin: 0 auto; }
.narrow--md { max-width: 620px; }
.contact-options { display: grid; gap: 10px; margin-top: 18px; }
.contact-option { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; color: var(--text); transition: border-color .15s, background .15s; }
.contact-option:hover { border-color: var(--primary); background: var(--surface-alt); }
.contact-option__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: var(--primary-soft); color: var(--primary-text); }
.contact-option__icon--wa { background: #e7f6ec; color: #1f8a4c; }
.contact-option__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contact-option strong { display: block; }
.contact-option small { color: var(--text-muted); }
.contact-hours { margin-top: 14px; text-align: center; color: var(--text-faint); font-size: var(--fs-label); }
.auth-card { padding: 28px 26px 22px; text-align: center; margin-top: 26px; }
.auth-card__icon { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 12px; background: var(--primary-soft); color: var(--primary-text); display: grid; place-items: center; }
.auth-card__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.auth-card h1 { font-size: 24px; font-weight: var(--fw-bold); letter-spacing: -.02em; }
.auth-card p { color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.btn--google { width: 100%; height: 46px; border-radius: 23px; border: 1px solid var(--border-strong); background: #fff; color: #1f1f1f; font-weight: var(--fw-semibold); font-size: var(--fs-body-lg); display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; margin-top: 18px; }
.btn--google:hover { background: #f8fafc; border-color: var(--primary); }
.btn--google svg { width: 20px; height: 20px; }
.auth-last { display: none; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 12px; border-radius: var(--r-md); background: var(--warning-soft); border: 1px solid var(--warning); color: var(--warning-text); font-size: var(--fs-label); text-align: left; }
.auth-last.on { display: flex; }
.auth-last img { width: 30px; height: 30px; border-radius: 50%; }
.auth-alt { margin-top: 14px; font-size: var(--fs-label); color: var(--text-muted); }
.auth-terms { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: var(--fs-small); color: var(--text-faint); line-height: 1.5; }
.auth-perks { margin-top: 16px; display: grid; gap: 7px; text-align: left; font-size: var(--fs-label); }
.auth-perks div { display: flex; gap: 8px; align-items: center; }
.auth-perks svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: var(--success); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.auth-message { margin-top: 18px; padding: 10px 14px; border-radius: var(--r-md); background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger-text); text-align: center; }
.download-card { padding: 30px 26px; text-align: center; margin-top: 26px; }
.download-card h1 { font-size: 24px; font-weight: var(--fw-bold); }
.download-card .file { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 18px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-alt); font-weight: var(--fw-semibold); max-width: 100%; }
.download-card .file svg { width: 18px; height: 18px; fill: none; stroke: var(--danger); stroke-width: 2; flex-shrink: 0; }
.download-card .file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.download-card .done__check { width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 12px; background: var(--success-soft); color: var(--success); display: grid; place-items: center; }
.download-card .done__check svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.download-card .done__check--warn { background: var(--warning-soft); color: var(--warning); }
.download-card .done__actions { margin-top: 16px; }
.download-card .done__actions .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; margin-right: 6px; }
.download-spinner { width: 42px; height: 42px; margin: 14px auto; border: 3px solid var(--primary-soft); border-top-color: var(--primary); border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ad-slot { margin-top: 18px; min-height: 120px; }
.promo-band { margin-top: 18px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--sidebar-bg); color: var(--sidebar-strong); display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; text-align: left; }
.promo-band p { color: var(--sidebar-text); margin-top: 2px; }
.promo-band .btn { background: #fff; color: #033d63; border-color: #fff; }
.notfound { text-align: center; padding: 50px 0 30px; }
.notfound h1 { font-size: 34px; font-weight: var(--fw-bold); letter-spacing: -.02em; }
.notfound p { color: var(--text-muted); margin: 8px 0 20px; }
.notfound__code { font-size: 80px; font-weight: 800; letter-spacing: -.05em; color: var(--primary-soft-border); line-height: 1; }

/* The campaign banner grid (.promo-slot) used to live here. It moved to
   experiments/campaigns_assets.html so the public PDF tool pages can use it too: they
   load tool.css, not this file, and this file cannot simply be added beside it - 13 of
   its class names (.done__check, .file, .lead, .field …) collide with tool.css. */

/* ── Seller visitor landing ──────────────────────────────────
   The hero is the one the rest of the site uses - the home page (home.css .hh), the public tool
   pages (tool.css .th), the tools index and the Desktop App page: the same lit grid behind it, the
   same eyebrow pill, the same fluid headline and the same room around it. Only the tokens are
   shared, not a stylesheet: each of those pages loads its own file, so the values are repeated here
   the way tools-index.css repeats them, rather than any of them being made to depend on this one.
   Nothing below changes what the card does - the markup, the ids and the scripts are untouched. */
.s-hero { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(22px, 3.2vw, 46px); align-items: center; }
/* The room around the hero is on its two columns, not on the band, exactly as tool.css puts it on
   .th__copy and .dropcard - so the copy and the card start and end together however tall either
   one is. The backdrop is excluded: it is positioned from the top of the document, and a margin
   would push it off the header it has to reach. */
.s-hero > *:not(.ph__bg) { margin-block: clamp(20px, 2.8vw, 38px); }
/* The marketplace badge reads as the eyebrow the other heroes open with, and keeps its logo */
.s-hero__brand { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--primary-text); background: var(--primary-soft); border: 1px solid var(--primary-soft-border); border-radius: 999px; padding: 5px 13px 5px 6px; }
.s-hero__brand img { width: 20px; height: 20px; border-radius: 6px; }
.s-hero h1 { font-size: clamp(29px, 3.3vw, 40px); font-weight: var(--fw-bold); letter-spacing: -.035em; line-height: 1.08; margin: 14px 0 10px; text-wrap: balance; }
.s-hero h1 em { font-style: normal; color: var(--primary-text); }
.s-hero__lead { color: var(--text-muted); font-size: 17px; line-height: 1.55; max-width: 46ch; }
.s-points { list-style: none; margin: 18px 0 0; display: grid; gap: 10px; }
.s-points li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-body-lg); }
.s-points svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: var(--success); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.s-hero .trust { justify-content: flex-start; margin-top: 18px; }
/* The tool card lifts off the grid the way the tool pages' .dropcard does (tool.css): a deeper,
   wider shadow and the larger radius, so it reads as the subject of the hero rather than as the
   first card of the page. .t-card is only used by this landing. */
.t-card { padding: 16px; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 84px -48px rgba(3,61,99,.5), 0 6px 16px -10px rgba(10,29,41,.18); }
/* Its title runs as a bar across the top of the card, like .dropcard__bar on the tool pages: the
   negative margins take it back out to the card's padding so the tint reaches the edges, and the
   card clips it to the rounded corners. */
.t-card__head { display: flex; align-items: center; gap: 10px; margin: -16px -16px 16px; padding: 12px 15px; background: var(--surface-alt); border-bottom: 1px solid var(--border); }
.t-card__head h2 { min-width: 0; font-size: var(--fs-body-lg); font-weight: var(--fw-bold); }
.t-card__head .pill { margin-left: auto; }
.t-card__ico { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: var(--grad); color: var(--on-primary); display: grid; place-items: center; }
.t-card__ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* The drop area follows the tool pages' .dropzone - same radius, same dashes, same gaps below the
   button - but stays lighter than it inside. This is the first thing a visitor sees, and the tool
   pages can afford more weight there because their art is a flat drawing of a page; a glyph in a
   bordered white tile with a shadow under it is a much heavier object at the same size. So the
   tile is a soft tint with no border and no shadow, and the box around it is a little shallower. */
.t-drop { border: 2px dashed var(--border-strong); border-radius: 18px; background: var(--surface-alt); padding: 26px 18px; text-align: center; transition: border-color .15s, background .15s; }
body.dragging .t-drop { border-color: var(--primary); background: var(--primary-soft); }
.t-drop__icon { width: 48px; height: 48px; border-radius: 14px; margin: 0 auto 14px; background: var(--primary-soft); color: var(--primary-text); display: grid; place-items: center; }
.t-drop__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.t-drop .btn--lg { min-width: 230px; }
.t-drop__or { color: var(--text-muted); margin-top: 10px; }
.t-drop__hint { color: var(--text-faint); font-size: var(--fs-small); margin-top: 10px; }
.t-work { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; }
.t-preview { background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm); aspect-ratio: 3 / 4; display: grid; place-items: center; overflow: hidden; position: relative; }
.t-preview canvas { width: 100%; height: 100%; object-fit: contain; }
.t-preview .ph { width: 70%; display: grid; gap: 5px; } .t-preview .ph i { height: 5px; border-radius: 3px; background: var(--grid); display: block; }
.t-preview__tag { position: absolute; left: 6px; bottom: 6px; font-size: 10px; font-weight: var(--fw-bold); background: rgba(10,29,41,.72); color: #fff; border-radius: 8px; padding: 2px 7px; }
.t-files { display: flex; flex-direction: column; gap: 6px; }
.t-file { display: flex; align-items: center; gap: 8px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 10px; font-size: var(--fs-label); }
.t-file svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: var(--danger); stroke-width: 2; }
.t-file span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-semibold); }
.t-file small { color: var(--text-muted); white-space: nowrap; }
.t-file button { border: none; background: none; color: var(--text-faint); cursor: pointer; font-size: 15px; line-height: 1; }
.t-file button:hover { color: var(--danger-text); }
.t-add { font-size: var(--fs-label); color: var(--primary-text); cursor: pointer; font-weight: var(--fw-semibold); display: inline-block; margin-top: 6px; }
.t-settings { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.t-settings__group { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .08em; color: var(--text-faint); margin: 8px 0 4px; }
.t-settings__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.t-settings .check { font-size: var(--fs-label); }
.t-settings .check--child { padding-left: 22px; }
.t-settings summary { list-style: none; cursor: pointer; font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--primary-text); padding: 6px 0 2px; }
.t-settings summary::-webkit-details-marker { display: none; }
.t-cta { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.t-cta .btn { width: 100%; }
.t-cta small { text-align: center; color: var(--text-faint); font-size: var(--fs-small); }
/* Flipkart quick crop inside the landing card (ids and classes from croppers/js_source/anonymous-flipkart-crop.js) */
.t-drop--quick { display: block; cursor: pointer; }
.t-drop--quick .btn { pointer-events: none; }
.fk-anonymous-file-list { margin-top: 10px; }
.fk-anonymous-file-empty { display: none; }
.fk-anonymous-file-item { display: flex; align-items: center; gap: 8px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 10px; font-size: var(--fs-label); }
.fk-anonymous-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-semibold); }
.fk-anonymous-file-meta { color: var(--text-muted); white-space: nowrap; }
.fk-anonymous-file-remove { border: none; background: none; color: var(--text-faint); cursor: pointer; font-size: 16px; line-height: 1; width: 22px; height: 22px; }
.fk-anonymous-file-remove:hover { color: var(--danger-text); }
.fk-anonymous-file-remove .fa-times::before { content: "×"; }
.fk-anonymous-output-mode { margin-top: 10px; }
.fk-anonymous-output-mode[hidden] { display: none; }
.fk-anonymous-output-title { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .08em; color: var(--text-faint); margin: 8px 0 6px; text-transform: uppercase; }
.fk-anonymous-output-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fk-anonymous-output-option { display: flex; gap: 8px; align-items: flex-start; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; background: var(--surface); }
.fk-anonymous-output-option input { margin-top: 3px; accent-color: var(--primary); }
.fk-anonymous-output-option strong { display: block; font-size: var(--fs-label); }
.fk-anonymous-output-option span span { display: block; color: var(--text-muted); font-size: var(--fs-small); line-height: 1.35; }
.fk-anonymous-output-option.is-selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.fk-anonymous-output-option.is-disabled { opacity: .5; cursor: not-allowed; }
.t-card--quick .t-cta { flex-direction: row; }
.t-card--quick .t-cta .btn { width: auto; flex: 1; }
.fk-anonymous-crop-action .fa-spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; margin-right: 6px; }
.fk-anonymous-crop-action .fa-crop-alt { display: none; }
.fk-anonymous-progress { background: var(--surface-alt); border-radius: 4px; height: 8px; margin-top: 12px; overflow: hidden; }
.fk-anonymous-progress[hidden] { display: none; }
.fk-anonymous-progress span { display: block; height: 100%; background: var(--grad); width: 0; transition: width .2s ease; }
.fk-anonymous-status { color: var(--text-muted); font-size: var(--fs-label); margin-top: 10px; text-align: center; min-height: 18px; }
.fk-anonymous-status.is-error { color: var(--danger-text); }
.fk-anonymous-status.is-success { color: var(--success-text); }
.fk-anonymous-settings-lock { margin-top: 12px; padding: 12px; border-radius: var(--r-md); background: var(--surface-alt); border: 1px solid var(--border); font-size: var(--fs-label); color: var(--text-muted); display: grid; gap: 6px; justify-items: start; }
.fk-anonymous-settings-lock[hidden] { display: none; }
.fk-anonymous-settings-lock strong { color: var(--text); }
@media (max-width: 560px) { .fk-anonymous-output-options { grid-template-columns: 1fr; } .t-card--quick .t-cta { flex-direction: column; } }
.gate { position: fixed; inset: 0; z-index: 70; background: rgba(10,29,41,.5); display: grid; place-items: center; padding: 16px; }
.gate[hidden] { display: none; }
.gate__box { position: relative; width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 24px 22px 20px; text-align: center; box-shadow: 0 30px 60px -20px rgba(0,0,0,.35); }
.gate__close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%; border: none; background: transparent; color: var(--text-muted); font-size: 18px; cursor: pointer; }
.gate__close:hover { background: var(--primary-soft); color: var(--primary-text); }
.gate__ready { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--success-text); background: var(--success-soft); border: 1px solid var(--success); border-radius: 12px; padding: 4px 10px; }
.gate__ready svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gate h3 { font-size: 20px; font-weight: var(--fw-bold); margin: 12px 0 6px; }
.gate p { color: var(--text-muted); line-height: 1.5; }
.gate .btn--google { margin-top: 18px; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.feature-card { padding: 16px 18px; }
.feature-card__icon { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--primary-soft); color: var(--primary-text); display: grid; place-items: center; margin-bottom: 10px; }
.feature-card__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feature-card h3 { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); margin-bottom: 4px; }
.feature-card p { color: var(--text-muted); line-height: 1.5; }
.platforms { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.platform { display: flex; align-items: center; gap: 10px; padding: 12px 14px; text-decoration: none; color: var(--text); font-weight: var(--fw-semibold); }
.platform img { width: 28px; height: 28px; border-radius: 8px; background: #fff; padding: 2px; border: 1px solid var(--border); }
.platform:hover { border-color: var(--primary); background: var(--surface-alt); }
.desk-band { margin-top: 34px; padding: 24px 26px; border-radius: var(--r-lg); background: var(--sidebar-bg); color: var(--sidebar-strong); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.desk-band h2 { font-size: 20px; font-weight: var(--fw-bold); margin-bottom: 6px; }
.desk-band p { color: var(--sidebar-text); line-height: 1.5; }
.desk-band ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.desk-band li { font-size: var(--fs-small); font-weight: var(--fw-semibold); background: rgba(255,255,255,.08); border: 1px solid var(--sidebar-border); border-radius: 12px; padding: 3px 10px; }
.desk-band .btn { background: #fff; color: #033d63; border-color: #fff; }
@media (max-width: 980px) { .s-hero { grid-template-columns: 1fr; } .features { grid-template-columns: 1fr 1fr; } .platforms { grid-template-columns: repeat(3, 1fr); } .desk-band { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .features, .t-settings__grid { grid-template-columns: 1fr; } .platforms { grid-template-columns: 1fr 1fr; } .t-work { grid-template-columns: 96px minmax(0, 1fr); } .t-file { flex-wrap: wrap; row-gap: 2px; } .t-file small { order: 3; flex-basis: 100%; padding-left: 23px; } }
[hidden] { display: none !important; }

/* ── Seller landing: FBA sticker form (landing_kind 'form') ───────────── */
.v-form { display: grid; gap: 12px; }
.v-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.v-form .field { display: grid; gap: 5px; }
.v-form .field .input { height: 36px; }
.v-form__a4 { font-weight: var(--fw-medium); }
.v-sticker { position: relative; width: 100%; max-width: 320px; aspect-ratio: 2 / 1; margin: 2px auto 0; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: 6px; background: #fff; color: #111; display: grid; grid-template-rows: auto 1fr auto auto; gap: 2px; text-align: center; box-shadow: 0 6px 20px -12px rgba(3,61,99,.5); overflow: hidden; }
.v-sticker__name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-sticker__bars { height: 100%; min-height: 34px; background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px, #111 4px 5px, transparent 5px 8px, #111 8px 11px, transparent 11px 13px, #111 13px 14px, transparent 14px 17px); }
.v-sticker__code { font-family: "Courier New", monospace; font-size: 13px; letter-spacing: .12em; }
.v-sticker__mrp { font-size: 11px; font-weight: 700; }
.v-sticker .t-preview__tag { top: auto; bottom: 6px; right: 6px; left: auto; }

/* ── Seller landing: label editor preview (landing_kind 'editor') ─────── */
.t-card--editor { padding-bottom: 16px; }
/* The side column is wide enough for the three tab words at 10px bold; at 150px they were wider
   than the column, and because a grid item will not shrink below its own content on its own, the
   row and the element tiles under it ran out past the panel and .v-editor's overflow cut them off.
   The min-width: 0 on each of them is what lets them take the column's width instead. */
.v-editor { display: grid; grid-template-columns: 176px minmax(0, 1fr); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; min-height: 260px; }
.v-editor__side { min-width: 0; background: var(--surface-alt); border-right: 1px solid var(--border); padding: 10px; display: grid; gap: 8px; align-content: start; }
.v-editor__tabs { min-width: 0; display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.v-editor__tabs span { flex: 1 1 0; min-width: 0; text-align: center; font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--text-muted); padding: 4px 0 6px; border-bottom: 2px solid transparent; }
.v-editor__tabs span.on { color: var(--primary-text); border-bottom-color: var(--primary); }
.v-editor__elements { min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.v-editor__elements span { min-width: 0; display: grid; place-items: center; gap: 3px; padding: 8px 4px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-muted); }
.v-editor__elements b { font-size: 16px; color: var(--primary-text); font-weight: var(--fw-bold); }
.v-editor__elements svg { width: 16px; height: 16px; fill: none; stroke: var(--primary-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v-editor__sizes { min-width: 0; display: grid; gap: 2px; }
.v-editor__sizes .check { min-height: 22px; font-size: var(--fs-label); }
.v-editor__sizes .check input { width: 15px; height: 15px; }
.v-editor__canvas { display: grid; place-items: center; padding: 20px; background: repeating-conic-gradient(var(--surface-alt) 0% 25%, var(--surface) 0% 50%) 50% / 18px 18px; }
.v-label { position: relative; width: 220px; aspect-ratio: 2 / 1; background: #fff; color: #111; border-radius: 4px; box-shadow: 0 8px 24px -10px rgba(3,61,99,.55); outline: 1.5px solid var(--primary); outline-offset: 3px; padding: 8px 12px; display: grid; grid-template-rows: auto 1fr auto auto; gap: 2px; text-align: center; transition: width .2s, aspect-ratio .2s; overflow: hidden; }
.v-label[data-size="75x50"] { width: 210px; aspect-ratio: 3 / 2; }
.v-label[data-size="100x50"] { width: 250px; aspect-ratio: 2 / 1; }
.v-label[data-size="100x100"] { width: 190px; aspect-ratio: 1 / 1; }
.v-label__text { font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-label .v-sticker__bars { min-height: 26px; }
.v-label__code { font-family: "Courier New", monospace; font-size: 11px; letter-spacing: .1em; }
.v-label__mrp { font-size: 10px; font-weight: 700; }
.v-label__handle { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 1.5px solid var(--primary); }
.v-label__handle--tl { top: -4px; left: -4px; } .v-label__handle--tr { top: -4px; right: -4px; }
.v-label__handle--bl { bottom: -4px; left: -4px; } .v-label__handle--br { bottom: -4px; right: -4px; }
@media (max-width: 560px) {
  .v-form__grid { grid-template-columns: 1fr; }
  .v-editor { grid-template-columns: 1fr; }
  .v-editor__side { border-right: none; border-bottom: 1px solid var(--border); }
  .v-editor__elements { grid-template-columns: repeat(4, 1fr); }
  .v-editor__sizes { grid-template-columns: 1fr 1fr; }
}

/* ── Review calculator ───────────────────────────────────────
   landing/new_ui/review_calculator.html. The form posts to the same view, with the same field
   names and the same round-trip, as the old page (landing/review-calculator.html); only the
   layout changes. */
.rc { max-width: 620px; margin: 30px auto; display: grid; gap: 16px; }
/* The shared .table sets min-width on its <table>; without this the grid items take that as
   their automatic minimum and widen the whole page on a phone instead of scrolling. */
.rc > * { min-width: 0; }
.rc-card { padding: 20px 22px; display: grid; gap: 16px; }
.rc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rc-field { display: grid; gap: 6px; }
/* Upper-cased in CSS, not in the markup, so screen readers still read the words. */
.rc-field .field-label { text-transform: uppercase; }
.rc-field .input { height: 42px; font-size: var(--fs-section); }
.rc-card .btn { justify-self: start; }
/* The view sends the error as `<p style="color:red">`, so the inline colour needs overriding to
   stay legible on the dark theme. The markup itself is the view's, left as it is. */
.rc-error { padding: 11px 14px; border-radius: var(--r-md); background: var(--danger-soft); border: 1px solid var(--danger); }
.rc-error p { margin: 0; color: var(--danger-text) !important; font-weight: var(--fw-medium); }
.rc-now { display: flex; flex-wrap: wrap; gap: 10px; }
.rc-now__stat { flex: 1; min-width: 150px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md); padding: 11px 14px; }
.rc-now__stat b { display: block; font-size: 22px; font-weight: var(--fw-bold); color: var(--primary-text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rc-now__stat span { font-size: var(--fs-label); color: var(--text-muted); }
.rc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rc-head h2 { font-size: var(--fs-page); font-weight: var(--fw-bold); letter-spacing: -.01em; }
.rc-target { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semibold); }
.rc-target svg { width: 14px; height: 14px; fill: var(--accent); stroke: none; flex-shrink: 0; }
.rc-count { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); color: var(--primary-text); }
.rc-table { margin-top: 10px; }
.rc-note { font-size: var(--fs-small); color: var(--text-faint); line-height: 1.5; }
@media (max-width: 520px) { .rc-fields { grid-template-columns: 1fr; } }