/* ── the scroll catch ────────────────────────────────────────────────────── The theme sets `overflow-x: hidden` on BODY, which quietly makes body a scroll container in BOTH axes — and one of its rows carries `margin-bottom: -11px`, so the body has about ten scrollable pixels. A trackpad gesture starting anywhere over the page latches onto that tiny scroller, spends itself on ten pixels, and the page does not move until you swipe again. It reads as the scroll "catching". `clip` clips exactly like `hidden` and does NOT create a scroll container, so body stops competing with the document for the wheel. Scoped to console pages: the storefront is the theme's business, not ours. */ body.npa-console { overflow-x: clip; } /* Console styling. Utilitarian on purpose — this is a tool for one team. */ /* On :root, not .npa — toasts and modals are appended to , outside the console wrapper, so tokens scoped to .npa never resolved for them. That is why the toast rendered white text on no background. */ :root{--npa-ink:#1c2430;--npa-muted:#68738a;--npa-line:#e3e7ef;--npa-line-dk:#cdd4e0; --npa-bg:#f4f6fa;--npa-card:#ffffff; --npa-accent:#09245b;--npa-accent-soft:#eef2fa;--npa-ok:#1a7f5a;--npa-warn:#a87b12;--npa-err:#b32d2e; --npa-r:10px; --npa-shadow:0 1px 2px rgba(16,24,40,.05),0 4px 16px rgba(16,24,40,.05); --npa-ring:0 0 0 3px rgba(9,36,91,.14)} /* No max-width: the page builder owns the measure. The console fills whatever column it is dropped into. The gray ground is what lets the white cards read as surfaces instead of everything floating on the same white. */ .npa{padding:26px 26px 90px;color:var(--npa-ink);background:var(--npa-bg);min-height:70vh; font:14.5px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased} .npa h1{font-size:1.5rem;margin:0;letter-spacing:-.015em;font-weight:700} .npa h3{margin:28px 0 10px;font-size:1.05rem;letter-spacing:-.01em} .npa h4{margin:18px 0 6px;font-size:.92rem;color:var(--npa-muted)} .npa-sub,.npa-slug{color:var(--npa-muted);font-size:.83rem} .npa-lead{color:var(--npa-muted);max-width:70ch;margin:.25rem 0 1.1rem} .npa-muted{color:var(--npa-muted)} .npa-strong{font-weight:600;text-decoration:none;color:var(--npa-accent)} .npa-strong:hover{text-decoration:underline} .npa-slug{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem; letter-spacing:0;margin-top:1px} .npa-nav{display:flex;gap:2px;border-bottom:1px solid var(--npa-line);margin:0 -26px 24px; padding:0 26px;background:var(--npa-card);overflow-x:auto} .npa-nav a{padding:13px 12px 11px;text-decoration:none;color:var(--npa-muted);font-size:.92rem; border-bottom:2px solid transparent;white-space:nowrap;transition:color .12s} .npa-nav a:hover{color:var(--npa-ink)} .npa-nav a.is-current{color:var(--npa-accent);border-bottom-color:var(--npa-accent);font-weight:600} .npa-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px} .npa-tabs{display:flex;gap:2px;flex-wrap:wrap;margin:20px 0 0;position:relative;z-index:1} .npa-tabs a{padding:8px 15px;text-decoration:none;color:var(--npa-muted);border:1px solid var(--npa-line); border-bottom:none;border-radius:9px 9px 0 0;background:transparent;font-size:.9rem;transition:color .12s,background .12s} .npa-tabs a:hover{color:var(--npa-ink);background:rgba(255,255,255,.7)} .npa-tabs a.is-current{background:var(--npa-card);color:var(--npa-accent);font-weight:600;margin-bottom:-1px;padding-bottom:9px} .npa-panel{border:1px solid var(--npa-line);border-radius:0 var(--npa-r) var(--npa-r) var(--npa-r); padding:22px 24px;background:var(--npa-card);box-shadow:var(--npa-shadow)} /* Tables are CARDS: white surface, tinted header band, hoverable rows — border-collapse must be separate for the radius to hold. */ .npa-table{width:100%;border-collapse:separate;border-spacing:0;margin:10px 0; background:var(--npa-card);border:1px solid var(--npa-line);border-radius:var(--npa-r); box-shadow:var(--npa-shadow)} .npa-panel .npa-table,.npa-checks .npa-table{box-shadow:none} .npa-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em; color:var(--npa-muted);border-bottom:1px solid var(--npa-line);padding:10px 12px; background:#f8f9fc} .npa-table th:first-child{border-top-left-radius:var(--npa-r)} .npa-table th:last-child{border-top-right-radius:var(--npa-r)} .npa-table td{padding:11px 12px;border-bottom:1px solid var(--npa-line);vertical-align:middle} .npa-table tbody tr:last-child td{border-bottom:none} .npa-table tbody tr:last-child td:first-child{border-bottom-left-radius:var(--npa-r)} .npa-table tbody tr:last-child td:last-child{border-bottom-right-radius:var(--npa-r)} .npa-table tbody tr{transition:background .1s} .npa-table tbody tr:hover{background:#f8f9fc} .npa-table.npa-compact td,.npa-table.npa-compact th{padding:6px 10px} .npa-check{width:34px} .npa-flags{color:var(--npa-muted);font-size:.85rem} .npa-row-actions{text-align:right;white-space:nowrap} .npa-row-actions a,.npa-link{color:var(--npa-accent);background:none;border:none;cursor:pointer; padding:2px 6px;font:inherit;font-size:.9rem;text-decoration:none;border-radius:5px} .npa-row-actions a:hover,.npa-link:hover{background:var(--npa-accent-soft);text-decoration:none} .npa-link.npa-destructive:hover{background:#fdf1f1} .npa-pill{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.74rem;font-weight:600; background:#eef0f4;color:var(--npa-muted)} .npa-pill.npa-active,.npa-pill.npa-published{background:#e2f5ec;color:var(--npa-ok)} .npa-pill.npa-draft{background:#fbf2dc;color:var(--npa-warn)} .npa-pill.npa-archived{background:#eef0f4;color:var(--npa-muted)} .npa-field{display:block;margin:0 0 14px;max-width:640px} .npa-label{display:block;font-weight:600;font-size:.86rem;margin-bottom:5px} .npa-help{display:block;color:var(--npa-muted);font-size:.8rem;margin-top:5px;max-width:62ch;line-height:1.45} .npa input[type=text],.npa input[type=search],.npa input[type=number],.npa input[type=email], .npa input[type=url],.npa input:not([type]), .npa select,.npa textarea{width:100%;padding:8px 11px;border:1px solid var(--npa-line-dk); border-radius:8px;font:inherit;background:#fff;color:var(--npa-ink); transition:border-color .12s,box-shadow .12s} .npa input:focus,.npa select:focus,.npa textarea:focus{outline:none;border-color:var(--npa-accent); box-shadow:var(--npa-ring)} .npa-table input,.npa-table select{padding:5px 9px} .npa-checks{border:1px solid var(--npa-line);border-radius:var(--npa-r);padding:14px 16px;margin:14px 0; max-width:640px;background:var(--npa-card)} .npa-checks legend{font-weight:600;font-size:.86rem;padding:0 6px} .npa-check-row{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:10px 0;align-items:start} .npa-check-row .npa-help{grid-column:2} .npa-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border:1px solid var(--npa-line-dk); border-radius:8px;background:#fff;color:var(--npa-ink);text-decoration:none;cursor:pointer;font:inherit; font-size:.9rem;font-weight:500;transition:background .12s,border-color .12s,box-shadow .12s} .npa-btn:hover{background:var(--npa-bg);border-color:#b6bfce} .npa-btn:focus-visible{outline:none;box-shadow:var(--npa-ring)} .npa-btn.npa-primary{background:var(--npa-accent);border-color:var(--npa-accent);color:#fff; box-shadow:0 1px 2px rgba(9,36,91,.25)} .npa-btn.npa-primary:hover{background:#12326f;border-color:#12326f} .npa-btn.npa-destructive,.npa-link.npa-destructive{color:var(--npa-err)} .npa-btn.npa-destructive{border-color:#eccfcf} .npa-btn.npa-destructive:hover{background:#fdf6f6;border-color:#d9a7a7} .npa-btn[disabled]{opacity:.55;cursor:default} .npa-actions{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center} .npa-inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0} .npa-inline input,.npa-inline select{width:auto;min-width:150px} .npa-filters{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap} .npa-filters input{max-width:320px} .npa-filters select{width:auto} .npa-notice{display:block;padding:13px 16px;border-radius:var(--npa-r);margin:14px 0;background:var(--npa-card); border:1px solid var(--npa-line);border-left:4px solid var(--npa-muted);box-shadow:var(--npa-shadow)} .npa-notice strong{display:block} .npa-notice span{color:var(--npa-muted);font-size:.9rem} .npa-notice ul{margin:8px 0 0;padding-left:18px} .npa-notice li{margin:4px 0} .npa-notice.npa-ok{background:#f0faf5;border-left-color:var(--npa-ok)} .npa-notice.npa-warn{background:#fdf7e8;border-left-color:var(--npa-warn)} .npa-notice.npa-error{background:#fdf1f1;border-left-color:var(--npa-err)} .npa-danger{border:1px solid #eed4d4;border-radius:var(--npa-r);padding:16px 18px;margin-top:34px;background:#fffbfb;box-shadow:var(--npa-shadow)} .npa-danger h3{margin-top:0} .npa-danger p{color:var(--npa-muted);font-size:.9rem;max-width:66ch} .npa-mt{margin-top:16px} .npa-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px} .npa-grid li{border:1px solid var(--npa-line);border-radius:var(--npa-r);padding:10px;text-align:center; background:var(--npa-card);box-shadow:var(--npa-shadow);transition:box-shadow .12s} .npa-grid li:hover{box-shadow:0 2px 4px rgba(16,24,40,.07),0 8px 24px rgba(16,24,40,.08)} .npa-grid img{width:100%;height:130px;object-fit:contain;background:var(--npa-bg);border-radius:6px} .npa-grid span{display:block;font-size:.82rem;color:var(--npa-muted);margin:6px 0} .npa-bulkbar{display:flex;gap:10px;align-items:center;padding:9px 14px;background:var(--npa-card); border:1px dashed var(--npa-line-dk);border-radius:var(--npa-r);margin-bottom:12px; font-size:.9rem;color:var(--npa-muted)} .npa-bulkbar select{width:auto} .npa-pager{display:flex;gap:6px;margin-top:16px} .npa-pager a{padding:6px 12px;border:1px solid var(--npa-line);border-radius:8px;text-decoration:none; color:var(--npa-ink);background:var(--npa-card);transition:background .12s} .npa-pager a:hover{background:var(--npa-bg)} .npa-pager a.is-current{background:var(--npa-accent);border-color:var(--npa-accent);color:#fff} .npa-colour{display:flex;gap:8px;align-items:center} .npa-colour input[type=color]{width:44px;height:38px;padding:2px;border:1px solid var(--npa-line);border-radius:7px;background:#fff} .npa-empty{height:130px;display:flex;align-items:center;justify-content:center;background:var(--npa-bg); border-radius:6px;color:var(--npa-muted);font-size:.85rem} .npa-grid form{margin-top:6px} .npa-grid input[type=file]{font-size:.75rem;width:100%} /* Audit detail was spilling out of its cell — long JSON has no break points. */ .npa-flags{max-width:34ch;overflow-wrap:anywhere;word-break:break-word;white-space:normal} .npa-table{table-layout:auto} .npa-filters.is-loading{opacity:.6} .npa-filters select{width:auto} /* A class rule beats the UA stylesheet's [hidden], so declare it explicitly — otherwise a modal marked hidden renders open on page load. */ .npa-preview{background:var(--npa-bg);border-radius:8px;padding:10px;font-size:.8rem; max-height:180px;overflow:auto;margin:12px 0 0} tr[data-npa-new]{background:#f6fbff} /* Tree indentation. The depth marker used to be a span before a full-width input, so it wrapped onto its own line and read as a stray glyph rather than an indent. The CELL is indented instead, and the input shrinks to fit beside a branch mark. */ /* `.npa-table td` is (0,1,1) and sets the padding shorthand; `.npa-tree` alone is (0,1,0) and lost, so the indent never applied and every child rendered with only the branch mark — depth 2 and 3 looked identical. */ .npa-table td.npa-tree{display:flex;align-items:center;gap:6px; padding-left:calc(10px + var(--depth,0) * 26px)} .npa-table td.npa-tree input{flex:1;min-width:0} .npa-branch{flex:none;width:14px;height:14px;border-left:2px solid var(--npa-line); border-bottom:2px solid var(--npa-line);border-bottom-left-radius:4px; margin-top:-6px} /* ── Preview panel ─────────────────────────────────────────────────────── */ .npa-preview-panel{margin:28px 0 60px;padding:0 20px} .npa-preview-head h2{margin:0 0 2px;font-size:1.25rem;color:var(--npa-accent)} .npa-preview-body{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:26px; border:1px solid var(--npa-line);border-radius:var(--npa-r);padding:22px;background:var(--npa-card);margin-top:12px; align-items:start;box-shadow:var(--npa-shadow)} .npa-preview-media img{width:100%;border-radius:9px;background:var(--npa-bg);object-fit:contain;max-height:320px} .npa-eyebrow{color:var(--npa-muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;margin:0} .npa-preview-price{font-size:1.5rem;font-weight:600;margin:0 0 16px;color:var(--npa-accent)} .npa-preview-price small{font-size:.78rem;font-weight:400;color:var(--npa-muted)} @media (max-width:820px){.npa-preview-body{grid-template-columns:1fr}} /* Variants tab: the live ladder price beside the legacy base price. */ .npa-hint{display:block;font-size:.78rem;color:#6b7280;font-weight:400;margin-top:2px} .npa-table td.npa-warn strong{color:var(--npa-err)} /* Toasts and the attribute-builder modal are built in JS, not printed by PHP — which is how a grep of the templates once read them as dead and deleted these rules, leaving white text on nothing. */ .npa-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:9999; padding:12px 20px;border-radius:9px;background:#1f2933;background:var(--npa-ink,#1f2933); color:#fff;font-size:.92rem;max-width:min(680px,92vw); box-shadow:0 6px 22px rgba(0,0,0,.28);transition:opacity .4s} .npa-toast.npa-error{background:#b32d2e;background:var(--npa-err,#b32d2e)} .npa-toast.npa-warn{background:#a87b12;background:var(--npa-warn,#a87b12)} .npa-toast.npa-ok{background:#1a7f5a;background:var(--npa-ok,#1a7f5a)} .npa-toast.is-out{opacity:0} /* A class rule beats the UA stylesheet's [hidden], so declare it explicitly — otherwise a modal marked hidden renders open on page load. */ /* The bulk apply form: a short, deliberate thing at the end of the list. */ .npa-apply{border:1px solid var(--npa-line);border-radius:var(--npa-r);padding:20px 22px;background:var(--npa-card);max-width:640px;box-shadow:var(--npa-shadow)} .npa-apply .npa-field{margin-bottom:14px} /* Products on this shape: a fact about the blueprint, sitting under it. */ .npa-shape-products{margin:34px 0 0;padding-top:26px;border-top:1px solid var(--npa-line)} .npa-shape-products h3{margin-top:0} .npa-shape-line{margin:0 0 14px;font-size:.9rem;color:var(--npa-muted)} /* ── forms, closer together ──────────────────────────────────────────────── A product's details are a dozen short fields. One column of them down the left of a 1400px screen is a lot of scrolling to read very little, and the whitespace was not doing any work. Two columns, tighter rows, and the textarea sized to what people actually type in it. */ .npa-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;align-items:start} .npa-form-grid .npa-span{grid-column:1 / -1} @media (max-width:900px){.npa-form-grid{grid-template-columns:1fr}} .npa-form-grid .npa-field{margin:0 0 12px;max-width:none} .npa-form-grid .npa-field .npa-label{margin-bottom:3px} .npa-form-grid .npa-help{margin-top:3px;line-height:1.4} .npa-form-grid textarea{min-height:96px} .npa-form-grid .npa-checks{margin:0 0 14px;padding:12px 14px;max-width:none} /* A category tree of a dozen rows should read as a list, not a form. */ .npa-checks .npa-check-row{margin:0;padding:3px 0} .npa-checks .npa-check-row .npa-help{margin-left:24px} /* A four-column table stretched across 1400px reads as four separate lists. `npa-fit` lets it be as wide as its content needs and no wider. */ .npa-table.npa-fit{width:auto;min-width:min(760px,100%);max-width:100%} .npa-table .npa-num{text-align:right;white-space:nowrap} .npa-table .npa-num input{width:9ch;text-align:right} .npa-table.npa-fit input[name="sku[]"]{width:26ch} /* Two short fields and their button on one line. */ .npa-row-form{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:6px} .npa-row-form .npa-field{margin:0;max-width:320px} .npa-lead{margin:0 0 14px;max-width:70ch} /* A checkbox or radio that lives in a table cell, not in a form. */ .npa-inline-check{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .npa-inline-check input{margin:0} .npa-inline-check span{font-size:.82rem;color:var(--npa-muted)} /* Present to a screen reader, absent to everyone else — a radio whose column header already says what it means does not need the word beside it too. */ .npa-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* A shipping class no category points at charges nobody. */ .npa-warn-text{color:var(--npa-err)} .npa-table td select{max-width:190px} /* A form row whose answer is already decided — stated, not editable. */ .npa-fixed{display:inline-block;padding:7px 0;font-weight:600} /* "Ready to sell", said at the volume it deserves: a small green mark by the actions. The hover title carries the sentence the banner used to. */ .npa-ready{display:inline-flex;align-items:center;gap:6px;align-self:center; font-size:.82rem;font-weight:600;color:var(--npa-ok,#1a7f4b);white-space:nowrap;cursor:default} .npa-ready svg{width:14px;height:14px} .npa-head-actions{display:flex;align-items:center;gap:14px;flex-shrink:0} /* The retire actions, said once: a label and three buttons on one line. The prose they replaced lives in each button's title and its confirm. */ .npa-danger-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px} .npa-danger-lab{font-size:.82rem;font-weight:600;color:var(--npa-muted);margin-right:auto} /* "shared by N products": the fact at label volume, the paragraph it replaced in the hover title. */ .npa-shared{font-size:.82rem;color:var(--npa-muted)} .npa-shared a{color:inherit;text-decoration:underline} /* A slug mid-edit: the input the double-click revealed. */ .npa-slug{cursor:text} .npa-slug-input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;width:18ch} /* ── the template picker on a product ──────────────────────────────── */ .npa-tpl-row{display:flex;align-items:center;gap:10px;padding:4px 0;cursor:pointer} .npa-tpl-row input{flex:0 0 auto;margin:0} .npa-tpl-thumb{width:48px;height:36px;object-fit:cover;border-radius:4px;border:1px solid var(--npa-line); background:#fff;flex:0 0 auto;transition:transform .12s ease;transform-origin:left center;position:relative} /* The small chip is for scanning; hovering it is asking "which one is this, really" — so it answers at readable size, above everything. */ .npa-tpl-row:hover .npa-tpl-thumb{transform:scale(4);z-index:40;box-shadow:0 6px 24px rgba(15,23,42,.35)} .npa-tpl-none{display:inline-flex;align-items:center;justify-content:center;font-size:.62rem; color:var(--npa-mut,#8a939c)} .npa-tpl-none:hover,.npa-tpl-row:hover .npa-tpl-none{transform:none;box-shadow:none} /* ── templates + mockups living in the console ─────────────────────── */ .npa-thumb-cell{width:56px} .npa-thumb-cell .npa-tpl-thumb{transform-origin:left center} .npa-editor-topbar{display:flex;align-items:center;gap:14px;margin:0 0 10px;font-size:.9rem} .npa-editor-topbar a{text-decoration:none} /* The editor shell manages its own height; give it room to be an editor. */ .npa-editor-embed .npte-editor{min-height:78vh} .npa-mockups-embed{margin-top:6px} .npa-thumb-cell:hover .npa-tpl-thumb{transform:scale(4);z-index:40;box-shadow:0 6px 24px rgba(15,23,42,.35);position:relative} /* ── the working-org switcher + stale badge ── */ .npa-orgpick { margin-left: auto; display: flex; align-items: center; gap: 8px; } .npa-orgpick label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #8a93a2; } .npa-orgpick select { padding: 6px 28px 6px 10px; border: 1px solid #d5dae4; border-radius: 8px; font-size: 13px; background: #fff; max-width: 220px; } .npa-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: #b3261e; color: #fff; font-size: 10.5px; font-weight: 700; vertical-align: 1px; } /* ── industries ── */ .npa-industry-cell { max-width: 260px; } .npa-industry-cell .npa-inline-check { margin-right: 10px; white-space: nowrap; } .npa-industry-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--npa-line); max-width: 560px; } .npa-industry-row input[name="name"] { max-width: 220px; } .npa-multi { min-width: 170px; padding: 4px 6px; border: 1px solid #d5dae4; border-radius: 8px; font-size: 12.5px; } .npa-multi option { padding: 2px 6px; } /* ── checkbox dropdown ── */ .npa-dd { position: relative; display: inline-block; } .npa-dd-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid #d5dae4; border-radius: 8px; background: #fff; font-size: 12.5px; cursor: pointer; max-width: 220px; } .npa-dd-btn .npa-dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .npa-dd-caret { color: #8a93a2; font-size: 10px; } .npa-dd-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 200px; max-height: 240px; overflow-y: auto; background: #fff; border: 1px solid #d5dae4; border-radius: 10px; box-shadow: 0 10px 30px rgba(20,30,60,.14); padding: 6px; } .npa-dd-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; cursor: pointer; } .npa-dd-row:hover { background: #f2f5fa; } /* ── the import screen ── */ .npa-import .npa-field { margin-bottom: 14px; } .npa-import .npa-field > label:first-child { display: block; font-weight: 600; margin-bottom: 4px; } .npa-import .npa-hint { display: block; color: #667; font-size: 12px; margin-top: 4px; } .npa-inline-check { margin-left: 12px; font-weight: 400; } .npa-row-active td { background: #eaf7ef; } .npte-import-preview-wrap { max-width: 720px; border: 1px solid #d5dbe7; border-radius: 8px; padding: 8px; background: #f6f7fa; } .npte-import-preview-wrap canvas { max-width: 100%; height: auto; display: block; } /* brand review queue */ .npa-brand-reviews { border-left: 3px solid #d9a514; } .npa-review { border-top: 1px solid #e3e7ef; padding-top: 12px; margin-top: 12px; } .npa-review:first-of-type { border-top: 0; margin-top: 0; } .npa-review-head { margin-bottom: 8px; } .npa-chip { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid #ccd; vertical-align: -2px; } .npa-review-asset { max-height: 40px; max-width: 120px; } /* preset-first template creation */ .npa-kind-choice { display: flex; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; } .npa-kind { display: flex; flex-direction: column; gap: 2px; border: 1px solid #d5dae4; border-radius: 10px; padding: 12px 16px; cursor: pointer; min-width: 240px; } .npa-kind:has(input:checked) { border-color: #0f3460; box-shadow: 0 0 0 1px #0f3460; } .npa-kind input { position: absolute; opacity: 0; } .npa-kind span { color: #6b7484; font-size: 12.5px; } .npa-field-row { margin-bottom: 16px; } .npa-field-row label { display: inline-flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; } .npa-field-row input { min-width: 280px; } .npa-field-row.npa-inline { display: flex; gap: 14px; } .npa-field-row.npa-inline input { min-width: 90px; } .npa-preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 6px 0 16px; } .npa-preset { display: flex; flex-direction: column; gap: 2px; border: 1px solid #d5dae4; border-radius: 10px; padding: 12px 14px; cursor: pointer; } .npa-preset:has(input:checked) { border-color: #0f3460; box-shadow: 0 0 0 1px #0f3460; } .npa-preset input { position: absolute; opacity: 0; } .npa-preset span { color: #6b7484; font-size: 12.5px; } .npa-preset em { font-style: normal; font-size: 12px; color: #0f3460; font-weight: 600; } .npa-tpl-new [hidden] { display: none !important; } /* ── brand: site identity + kit manager ─────────────────────────────────── */ .npa-brand-identity, .npa-brand-kits { margin-top: 18px; } .npa-brand-kits h4, .npa-brand-identity h4 { margin: 18px 0 8px; font-size: .9rem; color: var(--npa-muted); } .npa-kit { border: 1px solid var(--npa-line); border-radius: var(--npa-r); padding: 0 14px; margin: 12px 0; } .npa-kit > summary { cursor: pointer; padding: 12px 2px; font-size: 1rem; list-style: none; display: flex; align-items: center; } .npa-kit > summary::-webkit-details-marker { display: none; } .npa-kit > summary::before { content: "▸"; margin-right: 8px; color: var(--npa-muted); transition: transform .15s; } .npa-kit[open] > summary::before { transform: rotate(90deg); } .npa-kit[open] > summary { border-bottom: 1px solid var(--npa-line); margin-bottom: 12px; } .npa-kit .npa-actions { padding-bottom: 14px; } .npa-kit-new { display: flex; gap: 10px; align-items: center; margin-top: 16px; } .npa-kit-new input { flex: 1; } .npa-empty-row { color: var(--npa-muted); padding: 10px 0; }