:root {
  --modern-primary: #1f5fbf;
  --modern-primary-dark: #16498f;
  --modern-ink: #142943;
  --modern-muted: #667892;
  --modern-border: #d6e1ee;
  --modern-surface: #ffffff;
  --modern-soft: #f3f7fc;
  --modern-radius: 16px;
  --modern-shadow: 0 14px 35px rgba(20, 41, 67, .08);
  --modern-shadow-hover: 0 18px 42px rgba(20, 41, 67, .15);
}

html { scroll-behavior: smooth; }
body { background: linear-gradient(145deg, #f4f8fc 0%, #edf3fa 55%, #f8fbff 100%); color: var(--modern-ink); }
img { max-width: 100%; height: auto; }
a { text-underline-offset: 3px; }
:focus-visible { outline: 3px solid rgba(31, 95, 191, .35); outline-offset: 3px; }

.wrap { width: min(1180px, calc(100% - 32px)); }
.site-header { background: linear-gradient(135deg, #ffffff 0%, #f4f8fd 100%); border-bottom: 1px solid var(--modern-border); }
.site-header .wrap { min-height: 86px; display: flex; align-items: center; gap: 18px; }
.brand { letter-spacing: -.02em; font-weight: 800; }
.brand-mark { color: var(--modern-primary); }
.main-nav { background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--modern-border); box-shadow: 0 4px 16px rgba(20, 41, 67, .04); backdrop-filter: blur(12px); }
.main-nav .wrap { min-height: 58px; }
.main-nav a, .main-nav button { transition: background-color .18s ease, color .18s ease, transform .18s ease; }
.main-nav .nav-links a { color: var(--modern-ink); }
.main-nav .nav-links a:hover, .main-nav .nav-links a:focus-visible { background: #eaf2fc; color: var(--modern-primary-dark); }
.button, button, input[type="submit"] { border-radius: 9px; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.button:hover, button:hover, input[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(31, 95, 191, .17); }
.button.secondary { background: #eaf2fc; color: var(--modern-primary-dark); }

.page-right > main, .admin-layout > main { min-width: 0; }
.content-card, .admin-card, .quick-actions, .home-service-hub, .hero-news, .startpage-content, .stat-card, .admin-alert, .dashboard-focus-grid > a { border-radius: var(--modern-radius); box-shadow: var(--modern-shadow); }
.content-card, .admin-card, .quick-actions, .home-service-hub { border: 1px solid var(--modern-border); background: var(--modern-surface); }
.content-card:hover, .dashboard-focus-grid > a:hover, .home-service-card:hover { box-shadow: var(--modern-shadow-hover); transform: translateY(-2px); }
.home-service-hub { margin: 30px 0; padding: clamp(20px, 4vw, 38px); }
.home-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.home-section-heading h2 { margin: 0; font-size: clamp(1.45rem, 3vw, 2rem); }
.home-section-heading .meta { margin: 7px 0 0; color: var(--modern-muted); }
.home-service-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.home-service-card { grid-column: span 2; display: flex; gap: 14px; min-height: 150px; padding: 20px; border: 1px solid var(--modern-border); background: linear-gradient(145deg, #fff, #f5f9fe); color: var(--modern-ink); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.home-service-card:nth-child(4), .home-service-card:nth-child(5) { grid-column: span 3; }
.home-service-card:hover { border-color: #a9c6e9; }
.home-service-card > span:last-child { display: flex; flex: 1; flex-direction: column; gap: 5px; }
.home-service-card strong { font-size: 1.08rem; }
.home-service-card small { color: var(--modern-muted); line-height: 1.45; }
.home-service-card em { margin-top: auto; color: var(--modern-primary); font-size: .88rem; font-style: normal; font-weight: 700; }
.home-service-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 12px; background: #e2efff; color: var(--modern-primary); font-size: 1.35rem; font-weight: 800; }

.dashboard-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.dashboard-heading h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.55rem); letter-spacing: -.03em; }
.dashboard-heading .meta { max-width: 620px; color: var(--modern-muted); }
.dashboard-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.dashboard-focus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 24px 0 30px; }
.dashboard-focus-grid > a { display: flex; align-items: center; gap: 13px; border: 1px solid var(--modern-border); padding: 18px; background: var(--modern-surface); color: var(--modern-ink); transition: transform .2s ease, box-shadow .2s ease; }
.dashboard-focus-grid > a > span:nth-child(2) { display: grid; gap: 4px; flex: 1; }
.dashboard-focus-grid small { color: var(--modern-muted); }
.dashboard-focus-grid b { color: var(--modern-primary); font-size: 1.2rem; }
.dashboard-focus-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: #eaf2fc; color: var(--modern-primary); font-weight: 800; }
.stat-card { border: 1px solid var(--modern-border); background: var(--modern-surface); }
.admin-alert-grid, .quick-grid { gap: 14px; }
.admin-alert, .quick-grid a { border: 1px solid var(--modern-border); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.admin-alert:hover, .quick-grid a:hover { transform: translateY(-2px); border-color: #a9c6e9; box-shadow: var(--modern-shadow-hover); }

table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--modern-border); border-radius: 12px; background: var(--modern-surface); }
th { background: var(--modern-soft); color: var(--modern-ink); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
th, td { padding: 13px 15px; border-bottom: 1px solid #e6edf5; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f8fbff; }
.table-responsive, .admin-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.table-responsive table, .admin-table-wrap table { min-width: 680px; }
.search-filters, .filter-card { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 16px; border: 1px solid var(--modern-border); border-radius: 14px; background: var(--modern-soft); }
.search-filters label, .filter-card label { display: grid; gap: 6px; color: var(--modern-ink); font-size: .88rem; font-weight: 700; }
input, select, textarea { border-color: #b8c8dc; border-radius: 9px; }
input:focus, select:focus, textarea:focus { border-color: var(--modern-primary); box-shadow: 0 0 0 3px rgba(31, 95, 191, .12); outline: 0; }
form fieldset { border: 1px solid var(--modern-border); border-radius: 14px; background: #fbfdff; }
form fieldset legend { padding: 0 8px; color: var(--modern-primary-dark); font-weight: 800; }
.notice { border-radius: 11px; }
.skip-link { z-index: 1000; }
.admin-sidebar { position: sticky; top: 18px; align-self: start; }
.product-filters { grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(150px, 1fr)) auto auto; }
.product-bulk-editor { display: grid; gap: 12px; margin: 18px 0; padding: 16px; border: 1px solid var(--modern-border); border-radius: 14px; background: var(--modern-soft); }
.bulk-actions-heading, .bulk-editor-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.bulk-actions-heading .button { margin: 0; }
.bulk-editor-controls label { display: grid; gap: 5px; margin: 0; min-width: 180px; }
.bulk-editor-controls button { margin: 0; }
.article-label { display: grid; gap: 5px; min-height: 170px; padding: 15px; border: 1px dashed #8ea5c0; border-radius: 8px; background: #fff; color: #142943; }
.article-label-brand { color: var(--modern-primary); font-size: .72rem; font-weight: 800; letter-spacing: .09em; }
.article-label code { font-size: 1rem; font-weight: 800; }
.article-label span, .article-label small { color: #667892; }
.article-label-bars { height: 34px; margin-top: auto; background: repeating-linear-gradient(90deg, #142943 0 2px, transparent 2px 4px, #142943 4px 5px, transparent 5px 8px); }
.label-sheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.label-print-actions { margin-top: 18px; }
@media print { .no-print, .site-header, .main-nav, .admin-sidebar, footer { display: none !important; } body { background: #fff; } .label-sheet { grid-template-columns: repeat(3, 1fr); margin: 0; } .article-label { break-inside: avoid; box-shadow: none; } }

.homepage-theme-settings { margin: 24px 0; padding: 22px; }
.admin-card-heading h2 { margin: 0; }
.admin-card-heading .meta { margin: 6px 0 0; color: var(--modern-muted); }
.homepage-theme-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.homepage-theme-option { display: grid; gap: 10px; cursor: pointer; border: 2px solid transparent; border-radius: 14px; padding: 10px; background: var(--modern-soft); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.homepage-theme-option:hover { border-color: #9fbee5; transform: translateY(-2px); }
.homepage-theme-option:has(input:checked) { border-color: var(--modern-primary); box-shadow: 0 0 0 3px rgba(31, 95, 191, .12); }
.homepage-theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.theme-preview { display: grid; grid-template-columns: 22% 1fr; grid-template-rows: 22px 1fr 13px; gap: 4px; min-height: 76px; padding: 7px; overflow: hidden; border-radius: 9px; background: #f4f8fd; }
.theme-preview i, .theme-preview b, .theme-preview em { display: block; border-radius: 4px; }
.theme-preview i { grid-row: 1 / -1; background: var(--preview-accent); }
.theme-preview b { background: var(--preview-primary); }
.theme-preview em { background: var(--preview-surface); border: 1px solid rgba(20, 41, 67, .12); }
.theme-preview-modern { --preview-primary: #1f5fbf; --preview-accent: #16498f; --preview-surface: #fff; }
.theme-preview-ocean { --preview-primary: #098eaa; --preview-accent: #07566f; --preview-surface: #e9fbff; }
.theme-preview-graphite { --preview-primary: #b5d3ff; --preview-accent: #1b2433; --preview-surface: #536176; }
.theme-preview-sunset { --preview-primary: #df694d; --preview-accent: #9c3b3c; --preview-surface: #fff4e9; }
.theme-preview-forest { --preview-primary: #29805b; --preview-accent: #1f4e43; --preview-surface: #eef8ef; }
.homepage-theme-copy { display: grid; gap: 4px; }
.homepage-theme-copy strong { font-size: .93rem; }
.homepage-theme-copy small { color: var(--modern-muted); line-height: 1.35; }
.theme-live-note { margin: 17px 0 0; padding: 11px 13px; border-radius: 9px; background: #eaf2fc; color: var(--modern-primary-dark); }

body.site-theme-ocean:not(.admin-theme) { --modern-primary: #067c95; --modern-primary-dark: #07566f; --modern-ink: #10384a; --modern-muted: #5a7884; --modern-border: #c8e2e8; --modern-soft: #effafd; --modern-shadow: 0 14px 35px rgba(7, 86, 111, .10); }
body.site-theme-ocean:not(.admin-theme) .site-header { background: linear-gradient(135deg, #f8ffff, #dff7fa); }
body.site-theme-ocean:not(.admin-theme) .home-service-card { background: linear-gradient(145deg, #fff, #effcff); }
body.site-theme-graphite:not(.admin-theme) { --modern-primary: #78b2ff; --modern-primary-dark: #d7e8ff; --modern-ink: #edf4ff; --modern-muted: #adbed4; --modern-border: #3e4d63; --modern-surface: #202b3b; --modern-soft: #2b394d; --modern-shadow: 0 14px 35px rgba(0, 0, 0, .28); }
body.site-theme-graphite:not(.admin-theme) { background: linear-gradient(145deg, #111927, #1c2738 60%, #111927); }
body.site-theme-graphite:not(.admin-theme) .site-header, body.site-theme-graphite:not(.admin-theme) .main-nav { background: rgba(21, 31, 46, .96); border-color: var(--modern-border); }
body.site-theme-graphite:not(.admin-theme) .home-service-card { background: linear-gradient(145deg, #263448, #1d2939); }
body.site-theme-graphite:not(.admin-theme) .home-service-icon, body.site-theme-graphite:not(.admin-theme) .theme-live-note { background: #2d4563; }
body.site-theme-sunset:not(.admin-theme) { --modern-primary: #b74c3e; --modern-primary-dark: #873536; --modern-ink: #4a2930; --modern-muted: #755a60; --modern-border: #efd7cd; --modern-soft: #fff6ef; --modern-shadow: 0 14px 35px rgba(156, 59, 60, .10); }
body.site-theme-sunset:not(.admin-theme) { background: linear-gradient(145deg, #fffaf4, #fff1e6 60%, #fffaf8); }
body.site-theme-sunset:not(.admin-theme) .site-header { background: linear-gradient(135deg, #fffdf9, #ffe8d9); }
body.site-theme-sunset:not(.admin-theme) .home-service-card { background: linear-gradient(145deg, #fff, #fff3e9); }
body.site-theme-forest:not(.admin-theme) { --modern-primary: #29805b; --modern-primary-dark: #1f4e43; --modern-ink: #1f3b35; --modern-muted: #658177; --modern-border: #cfe1d5; --modern-soft: #f0f8f1; --modern-shadow: 0 14px 35px rgba(31, 78, 67, .10); }
body.site-theme-forest:not(.admin-theme) { background: linear-gradient(145deg, #f7fcf6, #eaf5eb 60%, #fbfefb); }
body.site-theme-forest:not(.admin-theme) .site-header { background: linear-gradient(135deg, #fff, #e5f3e7); }
body.site-theme-forest:not(.admin-theme) .home-service-card { background: linear-gradient(145deg, #fff, #f0f8f0); }

/* Contrast guardrails for the dark theme. Every dark surface gets light text,
   while controls stay white with dark text for predictable keyboard and form use. */
body.site-theme-graphite:not(.admin-theme) main,
body.site-theme-graphite:not(.admin-theme) .account-panel,
body.site-theme-graphite:not(.admin-theme) .sidebar section,
body.site-theme-graphite:not(.admin-theme) .cart-strip,
body.site-theme-graphite:not(.admin-theme) .recommended-products-bar,
body.site-theme-graphite:not(.admin-theme) footer,
body.site-theme-graphite:not(.admin-theme) .content-card,
body.site-theme-graphite:not(.admin-theme) .startpage-content,
body.site-theme-graphite:not(.admin-theme) .home-service-hub,
body.site-theme-graphite:not(.admin-theme) .product-card,
body.site-theme-graphite:not(.admin-theme) .checkout-summary,
body.site-theme-graphite:not(.admin-theme) .checkout-fields fieldset,
body.site-theme-graphite:not(.admin-theme) .voucher-builder,
body.site-theme-graphite:not(.admin-theme) .voucher-editor-card,
body.site-theme-graphite:not(.admin-theme) .invoice,
body.site-theme-graphite:not(.admin-theme) .success-panel {
  background-color: #202b3b;
  border-color: #3e4d63;
  color: #edf4ff;
}
body.site-theme-graphite:not(.admin-theme) .homepage-intro,
body.site-theme-graphite:not(.admin-theme) .hero-news,
body.site-theme-graphite:not(.admin-theme) .shop-filter-form,
body.site-theme-graphite:not(.admin-theme) .checkout-summary,
body.site-theme-graphite:not(.admin-theme) .voucher-editor-preview,
body.site-theme-graphite:not(.admin-theme) .product-placeholder {
  background: #2b394d;
  color: #edf4ff;
  border-color: #3e4d63;
}
body.site-theme-graphite:not(.admin-theme) h1,
body.site-theme-graphite:not(.admin-theme) h2,
body.site-theme-graphite:not(.admin-theme) h3,
body.site-theme-graphite:not(.admin-theme) h4,
body.site-theme-graphite:not(.admin-theme) strong,
body.site-theme-graphite:not(.admin-theme) main p,
body.site-theme-graphite:not(.admin-theme) main li,
body.site-theme-graphite:not(.admin-theme) main td,
body.site-theme-graphite:not(.admin-theme) main th,
body.site-theme-graphite:not(.admin-theme) main label,
body.site-theme-graphite:not(.admin-theme) .rich-content,
body.site-theme-graphite:not(.admin-theme) .account-panel,
body.site-theme-graphite:not(.admin-theme) .sidebar {
  color: #edf4ff;
}
body.site-theme-graphite:not(.admin-theme) small,
body.site-theme-graphite:not(.admin-theme) .meta,
body.site-theme-graphite:not(.admin-theme) .shop-result-count,
body.site-theme-graphite:not(.admin-theme) .price-tax-note,
body.site-theme-graphite:not(.admin-theme) .popular-product-copy small,
body.site-theme-graphite:not(.admin-theme) .legal-nav a,
body.site-theme-graphite:not(.admin-theme) .product-meta,
body.site-theme-graphite:not(.admin-theme) footer {
  color: #adbed4;
}
body.site-theme-graphite:not(.admin-theme) a,
body.site-theme-graphite:not(.admin-theme) .rich-content a,
body.site-theme-graphite:not(.admin-theme) .text-link,
body.site-theme-graphite:not(.admin-theme) .cart-link {
  color: #a8caff;
}
body.site-theme-graphite:not(.admin-theme) input,
body.site-theme-graphite:not(.admin-theme) select,
body.site-theme-graphite:not(.admin-theme) textarea {
  background: #fff;
  border-color: #7186a3;
  color: #142943;
}
body.site-theme-graphite:not(.admin-theme) button,
body.site-theme-graphite:not(.admin-theme) .button,
body.site-theme-graphite:not(.admin-theme) input[type="submit"] { background: #78b2ff; color: #142943; }
body.site-theme-graphite:not(.admin-theme) .main-nav a,
body.site-theme-graphite:not(.admin-theme) .brand { color: #edf4ff; }
body.site-theme-graphite:not(.admin-theme) .main-nav .nav-links a:hover,
body.site-theme-graphite:not(.admin-theme) .main-nav .nav-links a:focus-visible { background: #2d4563; color: #ffffff; }
body.site-theme-graphite:not(.admin-theme) table,
body.site-theme-graphite:not(.admin-theme) th,
body.site-theme-graphite:not(.admin-theme) td { border-color: #3e4d63; }
body.site-theme-graphite:not(.admin-theme) tbody tr:hover { background: #2b394d; }

@media (max-width: 900px) {
  .home-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-service-card, .home-service-card:nth-child(4), .home-service-card:nth-child(5) { grid-column: span 1; }
  .dashboard-focus-grid { grid-template-columns: 1fr; }
  .dashboard-heading { align-items: flex-start; flex-direction: column; }
  .dashboard-heading-actions { justify-content: flex-start; }
  .homepage-theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .wrap { width: min(100% - 22px, 1180px); }
  .site-header .wrap { min-height: 70px; }
  .main-nav .wrap { align-items: stretch; flex-direction: column; padding: 8px 0; }
  .main-nav .nav-links { overflow-x: auto; white-space: nowrap; }
  .main-nav .nav-search { width: 100%; }
  .home-section-heading { align-items: flex-start; flex-direction: column; }
  .home-service-grid { grid-template-columns: 1fr; }
  .home-service-card, .home-service-card:nth-child(4), .home-service-card:nth-child(5) { grid-column: span 1; }
  .dashboard-heading-actions .button { flex: 1 1 100%; text-align: center; }
  th, td { padding: 11px 12px; }
  .search-filters, .filter-card { align-items: stretch; flex-direction: column; }
  .search-filters > *, .filter-card > * { width: 100%; }
  .admin-sidebar { position: static; }
  .homepage-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-filters { grid-template-columns: 1fr; }
  .label-sheet { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

.accounting-period-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; margin: 18px 0; }
.accounting-period-filter label { min-width: 170px; }
.accounting-period-filter button { margin-top: 0; }
.admin-accordion { display: grid; gap: 16px; }
.admin-accordion > details { overflow: hidden; }
.admin-accordion > details > summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; list-style: none; padding: 18px 20px; }
.admin-accordion > details > summary::-webkit-details-marker { display: none; }
.admin-accordion > details > summary::after { content: '+'; font-size: 1.35rem; color: #2b5dad; }
.admin-accordion > details[open] > summary::after { content: '−'; }
.admin-accordion .accordion-content { padding: 0 20px 20px; }
.admin-accordion .form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; margin-bottom: 18px; }
.admin-accordion .form-grid .span-2 { grid-column: span 2; }
.admin-accordion .form-grid button { white-space: nowrap; }
.period-close-form { margin: 18px 0; align-items: end; }
.status-danger { color: #a3292f; font-weight: 700; }
@media (max-width: 850px) {
  .admin-accordion .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-accordion .form-grid .span-2 { grid-column: span 2; }
}
@media (max-width: 560px) {
  .admin-accordion .form-grid { grid-template-columns: 1fr; }
  .admin-accordion .form-grid .span-2 { grid-column: auto; }
  .admin-accordion > details > summary { align-items: flex-start; flex-direction: column; }
}