:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1e222b;
  --border: #2a2f3a;
  --text: #e8eaed;
  --text-dim: #9aa2ad;
  --accent: #4f8cff;
  --accent-2: #2ecf7a;
  --danger: #ef5350;
  --radius: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: var(--accent); }
.link-btn {
  background: none; border: none; padding: 0; margin: 0;
  color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.brand {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.brand span { color: var(--accent); }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}

.card h2, .card h3 { margin-top: 0; }

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.95rem;
}

label { display: block; font-size: 0.85rem; color: var(--text-dim); margin: 12px 0 4px; }

button, .btn {
  display: inline-block;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

button.secondary, .btn.secondary { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); }
button.danger { background: transparent; border: 1px solid var(--danger); color: var(--danger); }

button:disabled { opacity: 0.5; cursor: not-allowed; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
th { color: var(--text-dim); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge.active { background: rgba(46, 207, 122, 0.15); color: var(--accent-2); }
.badge.unclaimed { background: rgba(239, 83, 80, 0.15); color: var(--danger); }
.badge.in-stock { background: rgba(46, 207, 122, 0.15); color: var(--accent-2); }
.badge.sold-out { background: rgba(239, 83, 80, 0.15); color: var(--danger); }

.overview-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.overview-stat { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; min-width: 0; }
.overview-stat .value { font-size: 2rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.overview-stat .label { color: var(--text-dim); font-size: 0.82rem; margin-top: 6px; }
.overview-stat.warn .value { color: var(--danger); }
.overview-stat.good .value { color: var(--accent-2); }

.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.status-dot.online { background: var(--accent-2); box-shadow: 0 0 6px rgba(46, 207, 122, 0.6); }
.status-dot.offline { background: var(--danger); box-shadow: 0 0 6px rgba(239, 83, 80, 0.6); }

.trend-chart { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.trend-chart .bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.trend-chart .bar { width: 100%; border-radius: 3px 3px 0 0; min-height: 2px; }
.trend-chart .bar.offline-bar { background: var(--danger); }
.trend-chart .bar.scan-bar { background: var(--accent); }
.trend-chart .bar-label { font-size: 0.62rem; color: var(--text-dim); margin-top: 4px; white-space: nowrap; }
.trend-chart .bar-value { font-size: 0.65rem; color: var(--text-dim); margin-bottom: 2px; }
.holiday-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-2); margin-left: 3px; vertical-align: middle; }
.trend-empty { color: var(--text-dim); font-size: 0.85rem; }

.check-list { display: flex; flex-direction: column; gap: 6px; max-height: 160px; overflow-y: auto; padding: 8px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); }
.check-list label { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 0.85rem; cursor: pointer; }
.check-list input[type="checkbox"] { width: auto; accent-color: var(--accent); }
.check-list .empty { color: var(--text-dim); font-size: 0.82rem; }

.msg { padding: 10px 14px; border-radius: 8px; margin: 12px 0; font-size: 0.9rem; }
.msg.error { background: rgba(239, 83, 80, 0.12); color: #ff8a85; border: 1px solid rgba(239,83,80,0.3); }
.msg.ok { background: rgba(46, 207, 122, 0.12); color: #7fe3ac; border: 1px solid rgba(46,207,122,0.3); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }

.muted { color: var(--text-dim); font-size: 0.85rem; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px;
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button { background: none; color: var(--text-dim); border-radius: 0; padding: 10px 16px; border-bottom: 2px solid transparent; flex: 0 0 auto; white-space: nowrap; }
.tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
code { background: var(--panel-2); padding: 2px 6px; border-radius: 4px; font-size: 0.85em; }

.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.library-item { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; transition: border-color 0.15s; }
.library-item:hover { border-color: var(--accent); }
.library-item .thumb { width: 100%; height: 100px; object-fit: cover; background: #000; display: block; }
.library-item .thumb-placeholder { width: 100%; height: 100px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 0.8rem; background: #000; }
.library-item .caption { padding: 8px 10px; font-size: 0.85rem; }
.library-item .caption .type { display: block; color: var(--text-dim); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }
.library-item .thumb-wrap { position: relative; cursor: pointer; }
.library-item .thumb-play-badge {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 0.78rem; font-weight: 600;
  opacity: 0; transition: opacity 0.15s;
}
.library-item .thumb-wrap:hover .thumb-play-badge { opacity: 1; }
.library-item .row { padding: 0 10px 10px; }

.sap-fields { background: var(--panel-2); border: 1px dashed var(--border); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.sap-fields .kicker-sm { color: var(--text-dim); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.sap-fields dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 0.85rem; }
.sap-fields dt { color: var(--text-dim); }
.sap-fields dd { margin: 0; }

/* Screen profiles — one nested block per profile (name, four holder
   pickers, deploy row), stacked inside the "Screen profiles" card. A
   dashed border (same treatment as .sap-fields) marks it as a distinct
   sub-unit within the card rather than a whole separate card each. */
.profile-block { background: var(--panel-2); border: 1px dashed var(--border); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
.profile-block h4 { margin: 0 0 2px; font-size: 1rem; }
.profile-block .holder-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 14px; }
.holder-group-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-dim); margin-bottom: 6px; }
.profile-deploy-row { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.profile-deploy-row .check-list { max-height: 130px; }

/* Voice layout builder — a scaled-down stand-in for the real display's
   own top/bottom holder rows (see public/display.js's renderHolderLayout
   for the real thing), just laid out with plain flexbox blocks instead
   of actual rotating content, since the point here is picking the
   COUNT/POSITION/direction and then what plays in each one, not a
   pixel-exact preview of the real screen. */
.voice-builder-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 18px; }
@media (max-width: 820px) { .voice-builder-panes { grid-template-columns: 1fr; } }
.voice-preview-canvas {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: linear-gradient(160deg, #1a2030, #090b11);
  border: 1px solid var(--border); border-radius: 10px;
  box-sizing: border-box;
  overflow: hidden;
}
/* Every block is positioned in absolute %-of-canvas terms (left/top/
   width/height set inline per-holder — see renderVoicePreviewCanvas),
   real drag-and-resize rather than a fixed top/bottom flex row. Sizing
   and position both start from a sensible zone-based default the first
   time a block appears, then whatever the user drags/resizes it to
   from there is exactly what gets saved (see saveVoiceProfile). */
.voice-preview-block {
  position: absolute; box-sizing: border-box;
  background: rgba(79,140,255,0.14);
  border: 1.5px dashed var(--accent);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; line-height: 1.25; color: var(--text-dim); text-align: center;
  cursor: grab; padding: 4px; overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.voice-preview-block.dragging, .voice-preview-block.resizing { cursor: grabbing; z-index: 5; transition: none; }
.voice-preview-block.selected { border-color: #fff; border-style: solid; background: rgba(79,140,255,0.32); }
.voice-preview-block .voice-block-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; pointer-events: none; }
.voice-preview-block .voice-block-label { position: relative; z-index: 1; background: rgba(0,0,0,0.55); border-radius: 4px; padding: 2px 4px; pointer-events: none; }
/* Bottom-right resize handle — its own mousedown target, separate from
   the block body's own drag handling (see the canvas's mousedown
   delegation in dashboard.js: a mousedown starting here is always a
   resize, never a drag/select). */
.voice-block-resize-handle {
  position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px;
  cursor: nwse-resize; z-index: 2;
  background: linear-gradient(135deg, transparent 50%, var(--accent) 50%);
  border-radius: 0 0 5px 0;
}
.voice-preview-block.selected .voice-block-resize-handle { background: linear-gradient(135deg, transparent 50%, #fff 50%); }
/* Top-left X — its own mousedown/click target, same "never starts a
   drag" treatment as the resize handle above (see dashboard.js's
   canvas mousedown delegation, which excludes both this and the title
   input before deciding drag vs. resize). */
.voice-block-remove {
  position: absolute; left: 3px; top: 3px; z-index: 3;
  width: 18px; height: 18px; line-height: 16px; padding: 0;
  border-radius: 50%; border: 1px solid var(--border);
  background: rgba(0,0,0,0.55); color: var(--text-dim);
  font-size: 0.85rem; cursor: pointer;
}
.voice-block-remove:hover { background: #c0392b; color: #fff; border-color: #c0392b; }
/* Editable block title — sits over the label placeholder, real text
   input rather than contenteditable so it behaves the same as every
   other form field in the dashboard (focus ring, IME, paste). Blank
   just shows the auto-generated placeholder (what's assigned, or a
   prompt to assign something) rather than forcing every block to be
   named. */
.voice-block-title-input {
  position: relative; z-index: 1; width: 88%;
  background: rgba(0,0,0,0.55); border: 1px solid transparent;
  border-radius: 4px; padding: 2px 4px; margin: 0;
  color: #fff; font-size: 0.62rem; text-align: center;
  cursor: text;
}
.voice-block-title-input:focus { border-color: var(--accent); outline: none; }
.voice-block-title-input::placeholder { color: var(--text-dim); }
.library-item.assignable { cursor: pointer; }
/* Brief highlight when "Deploy to screens" on the Screen preview canvas
   scrolls down to the Default profile's own block in the Screen
   profiles list below — same deploy checkboxes every profile already
   has, this just draws the eye to which one just got scrolled to. */
.profile-block.flash-highlight { animation: flash-highlight-pulse 1.8s ease; }
@keyframes flash-highlight-pulse {
  0%, 100% { box-shadow: none; }
  15% { box-shadow: 0 0 0 3px var(--accent); }
}
.library-item.assigned { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79,140,255,0.35); }

/* Shared "onboarding" visual language — used by the login page and the
   device-claim wizard, so the whole path from public marketing site to
   a claimed screen feels like one continuous, deliberately minimal
   product rather than a polished front door opening onto a plain admin
   form. One hero action per screen; everything else stays quieter. */
body.onboard-bg { background: radial-gradient(ellipse 900px 500px at 50% -10%, rgba(79,140,255,0.10), transparent 60%), var(--bg); }
/* A faint sketch-art wallpaper (line-art screens/QR/price-tags, see
   activate-bg.svg) for the front door of the whole activation flow —
   opt-in via this second class rather than folded into .onboard-bg
   itself, so claim.html/login.html aren't affected until they want it
   too. */
body.onboard-wallpaper {
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(79,140,255,0.14), transparent 60%),
    url('/activate-bg.svg') repeat,
    var(--bg);
}
.onboard-wrap { max-width: 420px; margin: 0 auto; padding: 48px 20px 80px; }
.onboard-progress { display: flex; gap: 6px; margin-bottom: 28px; }
.onboard-progress .dot { flex: 1; height: 3px; border-radius: 2px; background: var(--border); transition: background 0.25s; }
.onboard-progress .dot.done, .onboard-progress .dot.active { background: var(--accent); }

.onboard-card { text-align: center; }
.onboard-kicker {
  color: var(--accent); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px;
}
.onboard-icon {
  width: 56px; height: 56px; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px; background: rgba(79,140,255,0.12);
  color: var(--accent);
}
.onboard-card h1 { font-size: 1.5rem; margin: 0 0 8px; letter-spacing: -0.01em; }
.onboard-sub { color: var(--text-dim); font-size: 0.92rem; margin: 0 0 28px; line-height: 1.5; }

.btn-hero {
  display: block; width: 100%; padding: 16px; border: none; border-radius: 14px;
  background: var(--accent); color: #fff; font-size: 1.05rem; font-weight: 700;
  cursor: pointer; box-shadow: 0 8px 24px rgba(79,140,255,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-align: center; text-decoration: none;
}
.btn-hero:active { transform: scale(0.98); }
.btn-hero:disabled { opacity: 0.5; box-shadow: none; cursor: not-allowed; }
.btn-hero.subtle { background: var(--panel-2); color: var(--text); box-shadow: none; border: 1px solid var(--border); }

.onboard-disclosure { text-align: left; margin-top: 18px; }
.onboard-disclosure summary {
  cursor: pointer; color: var(--text-dim); font-size: 0.85rem; list-style: none;
  display: flex; align-items: center; gap: 6px; padding: 4px 0;
}
.onboard-disclosure summary::-webkit-details-marker { display: none; }
.onboard-disclosure summary::before { content: '›'; display: inline-block; transition: transform 0.15s; font-weight: 700; }
.onboard-disclosure[open] summary::before { transform: rotate(90deg); }
.onboard-disclosure .disclosure-body { padding: 10px 0 2px; }

.onboard-store label, .onboard-store input, .onboard-store select { text-align: left; }

/* Pill tabs — a lighter-weight alternative to the underline .tabs style,
   used where several equally-weighted entry points (log in / sign up /
   demo) sit above a single onboard-card rather than inside a dashboard. */
.onboard-tabs { display: flex; gap: 6px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 4px; margin-bottom: 20px; }
.onboard-tabs button { flex: 1; background: none; border: none; border-radius: 9px; padding: 9px 0; color: var(--text-dim); font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.onboard-tabs button.active { background: var(--accent); color: #fff; }

.done-check {
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%;
  background: rgba(46,207,122,0.14); display: flex; align-items: center; justify-content: center;
  animation: done-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes done-pop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .done-check { animation: none; }
}

.dropzone {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  color: var(--text-dim);
  cursor: pointer;
  margin-top: 4px;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone.dragover { border-color: var(--accent); background: rgba(79, 140, 255, 0.08); }
.dropzone img { max-width: 100%; max-height: 160px; border-radius: 6px; margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto; }

/* Screen preview — a rough, clickable map of the real display layout
   (see public/display.html), so managing content means "click the
   zone you want to change" instead of guessing which library feeds
   what. Deliberately not pixel-exact to the real display — just
   recognizable enough to map zone → section below. */
.screen-preview {
  background: #0c1420; border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; aspect-ratio: 16 / 8; max-width: 640px;
}
.sp-tape {
  background: #e53935; color: #fff; font-weight: 800; font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase; text-align: center;
  padding: 6px 0; cursor: pointer;
}
.sp-body {
  height: calc(100% - 27px); position: relative; cursor: pointer;
  background: radial-gradient(ellipse at 50% 20%, rgba(79,140,255,0.16), transparent 60%);
  display: flex; align-items: flex-end; padding: 10px;
}
.sp-wallpaper-label {
  position: absolute; top: 10px; left: 12px;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.4);
}
.sp-zone {
  flex: 1; margin: 0 4px; border-radius: 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 4px; padding: 10px 6px; height: 62%;
  border: 1px solid rgba(255,255,255,0.14); transition: transform 0.15s, border-color 0.15s;
}
.sp-zone:hover { transform: translateY(-3px); border-color: var(--accent); }
.sp-zone span { font-size: 0.78rem; font-weight: 700; color: #fff; }
.sp-zone small { font-size: 0.65rem; color: var(--text-dim); }
.sp-zone-price { background: rgba(255,255,255,0.06); position: relative; }
.sp-zone-instore { background: rgba(79,140,255,0.14); flex: 1.3; }
.sp-zone-ad { background: rgba(79,140,255,0.06); }
/* The "4th element" — Insure This — sits over the price card just like
   it does on the real display, rather than being a hidden setting with
   no place in the preview at all. */
.sp-insure-badge {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #00d4ff, #0080ff); color: #04121f;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.sp-zone.active, .sp-tape.active { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-insure-badge.active { outline: 2px solid #00d4ff; outline-offset: 2px; }

/* Shared modal — replaces every native confirm() and is the one place a
   piece of content actually plays before it's assigned to a screen. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(5, 7, 10, 0.72);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  padding: 28px; max-width: 420px; width: 100%;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  animation: modal-pop 0.18s ease-out;
}
.modal-card-wide { max-width: 720px; }
@keyframes modal-pop { 0% { transform: scale(0.96); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.modal-title { margin: 0 0 14px; font-size: 1.1rem; }
.modal-message { margin: 0 0 22px; font-size: 0.95rem; line-height: 1.5; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.modal-actions .btn-hero { width: auto; padding: 10px 20px; font-size: 0.9rem; box-shadow: none; }
.btn-hero.danger { background: var(--danger); color: #fff; }
.modal-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; margin-bottom: 18px; }
.modal-video-frame iframe, .modal-video-frame video { width: 100%; height: 100%; border: none; }
.modal-image { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: 10px; margin-bottom: 18px; }

@media (prefers-reduced-motion: reduce) {
  .modal-card { animation: none; }
}

/* Shared by login.html and claim.html's inline sign-in panel — both
   present the same password + "Continue with Google" choice, this way
   the styling only exists once. */
.auth-divider { display:flex; align-items:center; gap:10px; margin:16px 0; color:var(--text-dim); font-size:0.8rem; }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.google-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:11px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--panel-2); color:var(--text);
  font-size:0.95rem; font-weight:600; text-decoration:none; box-sizing:border-box;
  transition:border-color 0.15s;
}
.google-btn:hover { border-color:var(--text-dim); }
#auth-error { color:var(--danger); font-size:0.85rem; text-align:center; margin:0 0 14px; }