/* ════════════════════════════════════════════════════════════════
   UNIVERSAL CSS STRUCTURE
   Comprehensive boilerplate — design-agnostic, ready to theme.

   INDEX
   ─────────────────────────────────────────────────────────────
   00  CUSTOM PROPERTIES (tokens)
       00a  Color palette
       00b  Typography
       00c  Spacing scale
       00d  Borders & shadows
       00e  Transitions & motion
       00f  Z-index scale
       00g  Breakpoints (reference only)

   01  RESET & BASE
       01a  Box model
       01b  Root & body
       01c  Scrolling

   02  TYPOGRAPHY
       02a  Headings h1–h6
       02b  Paragraphs & running text
       02c  Links
       02d  Strong, em, small, abbr, mark
       02e  Blockquote & cite
       02f  Lists (ul, ol, dl)
       02g  Code & pre
       02h  Horizontal rule

   03  LAYOUT
       03a  Container
       03b  Section / page regions
       03c  CSS Grid utilities
       03d  Flexbox utilities

   04  NAVIGATION
       04a  Primary nav
       04b  Breadcrumb
       04c  Pagination

   05  FORMS
       05a  Form wrapper & fieldset
       05b  Labels
       05c  Text inputs & textarea
       05d  Select
       05e  Checkbox & radio
       05f  Range slider
       05g  File input
       05h  Form feedback (error, success, hint)
       05i  Form groups & layout

   06  BUTTONS
       06a  Base button
       06b  Variants (primary, secondary, ghost, danger, link)
       06c  Sizes (sm, md, lg)
       06d  States (loading, disabled)
       06e  Button group

   07  TABLES
       07a  Base table
       07b  Responsive wrapper
       07c  Variants (striped, bordered, compact)

   08  MEDIA
       08a  Images & figures
       08b  Video & iframe embeds
       08c  Avatar

   09  COMPONENTS
       09a  Card
       09b  Badge / tag
       09c  Alert / notice
       09d  Modal overlay
       09e  Tooltip
       09f  Accordion / details
       09g  Tabs
       09h  Progress bar
       09i  Spinner / loader
       09j  Divider
       09k  Stat / metric block

   10  UTILITIES
       10a  Display
       10b  Visibility
       10c  Spacing helpers (margin, padding)
       10d  Text alignment & transform
       10e  Color helpers
       10f  Overflow & truncation
       10g  Cursor
       10h  Pointer events
       10i  Aspect ratio

   11  ANIMATION & TRANSITIONS
       11a  Keyframes
       11b  Animation utility classes

   12  RESPONSIVE
       12a  Mobile-first media queries
       12b  Responsive typography
       12c  Responsive layout overrides

   13  PRINT
   ════════════════════════════════════════════════════════════════ */




/* ════════════════════════════════════════════════════════════════
   00  CUSTOM PROPERTIES
   ════════════════════════════════════════════════════════════════ */

:root {

  /* ── 00a COLOR PALETTE ─────────────────────────────────────── */
  /*
     Brilobot · Výkres design system
     ─────────────────────────────────
     Drafting paper + navy ink + red BETA badge
     #EBE6DB  background  — tisk. papír
     #1B3E6B  primary     — námořní modř / inkoust
     #CC2010  accent      — červená / BETA rámeček
  */

  /* Base */
  --color-bg:            #EBE6DB;   /* drafting paper */
  --color-bg-alt:        #DDD8CC;   /* tmavší papír — sekce, zebra */
  --color-surface:       #E3DDCF;   /* karta / panel */
  --color-surface-alt:   #D6D0C1;   /* vyvýšená plocha */
  --color-overlay:       rgba(27, 62, 107, 0.45);   /* modální přesah */

  /* Text */
  --color-text:          #1B3E6B;   /* námořní inkoust */
  --color-text-muted:    #4A6A96;   /* světlejší inkoust */
  --color-text-faint:    #8A9DB8;   /* placeholder, disabled */
  --color-text-inverse:  #EBE6DB;   /* krém na tmavém pozadí */

  /* Brand */
  --color-primary:        #1B3E6B;   /* námořní modř */
  --color-primary-hover:  #153258;
  --color-primary-active: #0F2540;
  --color-primary-muted:  rgba(27, 62, 107, 0.08);

  --color-secondary:      #4A6A96;
  --color-secondary-hover:#3A5A86;
  --color-secondary-muted:rgba(74, 106, 150, 0.10);

  --color-accent:         #CC2010;   /* červená — BETA badge, hover CTA */

  /* Semantic */
  --color-success:       #2A6B3A;
  --color-success-muted: rgba(42, 107, 58, 0.10);
  --color-warning:       #8B6914;
  --color-warning-muted: rgba(139, 105, 20, 0.10);
  --color-danger:        #CC2010;
  --color-danger-muted:  rgba(204, 32, 16, 0.10);
  --color-info:          #1B3E6B;
  --color-info-muted:    rgba(27, 62, 107, 0.08);

  /* Border */
  --color-border:        rgba(27, 62, 107, 0.20);   /* výkresová čára */
  --color-border-strong: rgba(27, 62, 107, 0.50);   /* zvýrazněná čára */
  --color-border-faint:  rgba(27, 62, 107, 0.10);   /* dělicí čára */

  /* ── 00b TYPOGRAPHY ────────────────────────────────────────── */
  /*
     Tři pásma:
     Display / headings  → Arial Narrow, bold, letter-spacing wide
     Body / UI           → Arial Narrow, regular
     Data / labels / kód → IBM Plex Mono
  */

  --font-sans:    'Arial Narrow', 'Arial', sans-serif;
  --font-serif:   Georgia, 'Times New Roman', serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;
  --font-display: 'Arial Narrow', 'Arial', sans-serif;

  --font-size-xs:    0.75rem;   /* 12px */
  --font-size-sm:    0.875rem;  /* 14px */
  --font-size-base:  1rem;      /* 16px */
  --font-size-md:    1.125rem;  /* 18px */
  --font-size-lg:    1.25rem;   /* 20px */
  --font-size-xl:    1.5rem;    /* 24px */
  --font-size-2xl:   1.875rem;  /* 30px */
  --font-size-3xl:   2.25rem;   /* 36px */
  --font-size-4xl:   3rem;      /* 48px */
  --font-size-5xl:   3.75rem;   /* 60px */

  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

  --line-height-tight:   1.15;
  --line-height-snug:    1.35;
  --line-height-base:    1.6;
  --line-height-relaxed: 1.8;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.05em;
  --letter-spacing-wider:  0.12em;
  --letter-spacing-widest: 0.22em;

  /* ── 00c SPACING SCALE ─────────────────────────────────────── */

  --space-1:    0.25rem;   /*  4px */
  --space-2:    0.5rem;    /*  8px */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */
  --space-32:   8rem;      /* 128px */

  /* ── 00d BORDERS & SHADOWS ─────────────────────────────────── */

  --radius-none:   0;
  --radius-sm:     0.25rem;   /*  4px */
  --radius-md:     0.5rem;    /*  8px */
  --radius-lg:     0.75rem;   /* 12px */
  --radius-xl:     1rem;      /* 16px */
  --radius-2xl:    1.5rem;    /* 24px */
  --radius-full:   9999px;    /* pill */

  --border-width:        1px;
  --border-width-md:     1.5px;
  --border-width-lg:     2px;

  --shadow-sm:    0 1px 2px rgba(27, 62, 107, 0.08);
  --shadow-md:    0 2px 8px rgba(27, 62, 107, 0.12);
  --shadow-lg:    0 4px 16px rgba(27, 62, 107, 0.16);
  --shadow-xl:    0 8px 32px rgba(27, 62, 107, 0.20);
  --shadow-inner: inset 0 1px 3px rgba(27, 62, 107, 0.10);

  /* ── 00e TRANSITIONS & MOTION ──────────────────────────────── */

  --duration-instant:  80ms;
  --duration-fast:     150ms;
  --duration-base:     250ms;
  --duration-slow:     400ms;
  --duration-slower:   600ms;

  --ease-default:  ease;
  --ease-in:       ease-in;
  --ease-out:      ease-out;
  --ease-in-out:   ease-in-out;
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);

  /* ── 00f Z-INDEX SCALE ─────────────────────────────────────── */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ── 00g BREAKPOINTS (reference — use in media queries) ─────── */
  /*
    sm:   640px
    md:   768px
    lg:  1024px
    xl:  1280px
    2xl: 1536px
  */

}




/* ════════════════════════════════════════════════════════════════
   01  RESET & BASE
   ════════════════════════════════════════════════════════════════ */

/* ── 01a BOX MODEL ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── 01b ROOT & BODY ── */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── 01c SCROLLING ── */
html {
  scroll-behavior: smooth;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}




/* ════════════════════════════════════════════════════════════════
   02  TYPOGRAPHY
   ════════════════════════════════════════════════════════════════ */

/* ── 02a HEADINGS ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display, var(--font-sans));
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-md); }

/* ── 02b PARAGRAPHS & RUNNING TEXT ── */
p {
  margin-bottom: var(--space-4);
  max-width: 70ch; /* comfortable reading line length */
}

p:last-child { margin-bottom: 0; }

/* Lead / intro paragraph */
.lead {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

/* ── 02c LINKS ── */
a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--duration-fast) var(--ease-default);
}

a:hover  { color: var(--color-primary-hover); }
a:active { color: var(--color-primary-active); }

a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Unstyled link */
a.link-unstyled {
  color: inherit;
  text-decoration: none;
}

/* ── 02d INLINE ELEMENTS ── */
strong, b { font-weight: var(--font-weight-bold); }
em, i     { font-style: italic; }

small {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

mark {
  background-color: var(--color-warning-muted);
  color: inherit;
  padding: 0 0.2em;
  border-radius: var(--radius-sm);
}

del { text-decoration: line-through; color: var(--color-text-muted); }
ins { text-decoration: underline; }

sub, sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* ── 02e BLOCKQUOTE & CITE ── */
blockquote {
  border-left: var(--border-width-lg) solid var(--color-border-strong);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-6) 0;
  color: var(--color-text-muted);
  font-style: italic;
}

blockquote cite {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  font-style: normal;
  color: var(--color-text-faint);
}

blockquote cite::before { content: "— "; }

/* ── 02f LISTS ── */
ul, ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

li { margin-bottom: var(--space-1); }

/* Nested lists */
ul ul, ol ol, ul ol, ol ul {
  margin-top: var(--space-1);
  margin-bottom: 0;
}

/* Unstyled list */
ul.list-none, ol.list-none {
  list-style: none;
  padding-left: 0;
}

/* Definition list */
dl { margin-bottom: var(--space-4); }
dt {
  font-weight: var(--font-weight-semibold);
  margin-top: var(--space-3);
}
dd {
  padding-left: var(--space-6);
  color: var(--color-text-muted);
}

/* ── 02g CODE & PRE ── */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background-color: var(--color-surface-alt);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

pre {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  overflow-x: auto;
  margin-bottom: var(--space-4);
  line-height: var(--line-height-relaxed);
}

/* Reset inline code inside pre */
pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

/* ── 02h HORIZONTAL RULE ── */
hr {
  border: none;
  border-top: var(--border-width) solid var(--color-border);
  margin: var(--space-8) 0;
}




/* ════════════════════════════════════════════════════════════════
   03  LAYOUT
   ════════════════════════════════════════════════════════════════ */

/* ── 03a CONTAINER ── */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container-sm  { max-width: 640px; }
.container-md  { max-width: 768px; }
.container-lg  { max-width: 1024px; }
.container-xl  { max-width: 1280px; }
.container-full{ max-width: none; }

/* ── 03b PAGE REGIONS ── */
header, nav, main, footer, aside, section, article {
  display: block;
}

[hidden] { display: none !important; }

main { min-height: 60vh; }

/* ── 03c CSS GRID UTILITIES ── */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-1  { grid-template-columns: 1fr; }
.grid-2  { grid-template-columns: repeat(2, 1fr); }
.grid-3  { grid-template-columns: repeat(3, 1fr); }
.grid-4  { grid-template-columns: repeat(4, 1fr); }

/* Auto-fit responsive grid */
.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-full   { grid-column: 1 / -1; }

/* ── 03d FLEXBOX UTILITIES ── */
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }

.flex-row     { flex-direction: row; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-nowrap  { flex-wrap: nowrap; }

.items-start  { align-items: flex-start; }
.items-center { align-items: center; }
.items-end    { align-items: flex-end; }
.items-stretch{ align-items: stretch; }

.justify-start  { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.justify-between{ justify-content: space-between; }
.justify-around { justify-content: space-around; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

.flex-1    { flex: 1; }
.flex-auto { flex: auto; }
.flex-none { flex: none; }
.shrink-0  { flex-shrink: 0; }




/* ════════════════════════════════════════════════════════════════
   04  NAVIGATION
   ════════════════════════════════════════════════════════════════ */

/* ── 04a PRIMARY NAV ── */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-border-strong);
}

.nav-logo {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  color: var(--color-text);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
}

.nav-links a {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  color: var(--color-text-muted);
  transition: color var(--duration-fast);
}
.nav-links a:hover { color: var(--color-text); }
.nav-links a.active { color: var(--color-primary); }

/* Sticky nav */
.nav-sticky {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

/* Fixed nav */
.nav-fixed {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-sticky);
}

/* ── 04b BREADCRUMB ── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.breadcrumb li + li::before {
  content: "/";
  color: var(--color-border-strong);
}

.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--color-primary); }

.breadcrumb li:last-child {
  color: var(--color-text);
  pointer-events: none;
}

/* ── 04c PAGINATION ── */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  text-decoration: none;
  color: var(--color-text);
  transition: background-color var(--duration-fast);
}

.pagination a:hover          { background-color: var(--color-surface-alt); }
.pagination .active a        { background-color: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }
.pagination .disabled span   { opacity: 0.4; pointer-events: none; }




/* ════════════════════════════════════════════════════════════════
   05  FORMS
   ════════════════════════════════════════════════════════════════ */

/* ── 05a FORM WRAPPER & FIELDSET ── */
form { width: 100%; }

fieldset {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

legend {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  padding: 0 var(--space-2);
  color: var(--color-text-muted);
}

/* ── 05b LABELS ── */
label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
  cursor: pointer;
}

label .required {
  color: var(--color-danger);
  margin-left: 0.2em;
}

/* ── 05c TEXT INPUTS & TEXTAREA ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  transition:
    border-color var(--duration-fast) var(--ease-default),
    box-shadow   var(--duration-fast) var(--ease-default);
  appearance: none;
}

input::placeholder, textarea::placeholder {
  color: var(--color-text-faint);
}

input:hover, textarea:hover {
  border-color: var(--color-border-strong);
}

input:focus, textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-muted);
}

input:disabled, textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-bg-alt);
}

input[readonly], textarea[readonly] {
  background-color: var(--color-bg-alt);
  color: var(--color-text-muted);
}

textarea {
  min-height: 120px;
  resize: vertical;
}

/* ── 05d SELECT ── */
select {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-8) var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  transition: border-color var(--duration-fast);
}

select:hover { border-color: var(--color-border-strong); }
select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-muted); }
select:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── 05e CHECKBOX & RADIO ── */
.checkbox,
.radio {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
}

.checkbox input[type="checkbox"],
.radio input[type="radio"] {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.15em;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.checkbox label,
.radio label {
  margin-bottom: 0;
  font-weight: var(--font-weight-regular);
  cursor: pointer;
}

/* Custom checkbox (optional, replaces browser default) */
.checkbox-custom input[type="checkbox"] {
  appearance: none;
  border: var(--border-width-md) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.checkbox-custom input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath d='M1 4l3.5 3.5L11 1' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ── 05f RANGE SLIDER ── */
input[type="range"] {
  display: block;
  width: 100%;
  height: 4px;
  appearance: none;
  background: var(--color-border);
  border-radius: var(--radius-full);
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  border: 2px solid var(--color-bg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  border: 2px solid var(--color-bg);
  cursor: pointer;
}

/* ── 05g FILE INPUT ── */
input[type="file"] {
  display: block;
  width: 100%;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}

input[type="file"]::file-selector-button {
  padding: var(--space-2) var(--space-4);
  margin-right: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background: var(--color-surface-alt);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast);
}
input[type="file"]::file-selector-button:hover {
  background: var(--color-bg-alt);
}

/* ── 05h FORM FEEDBACK ── */
.form-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.form-error {
  font-size: var(--font-size-sm);
  color: var(--color-danger);
  margin-top: var(--space-2);
}

.form-success {
  font-size: var(--font-size-sm);
  color: var(--color-success);
  margin-top: var(--space-2);
}

/* Error state on input */
input.is-error, textarea.is-error, select.is-error {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-muted);
}

/* Success state on input */
input.is-success, textarea.is-success, select.is-success {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-muted);
}

/* ── 05i FORM GROUPS & LAYOUT ── */
.form-group {
  margin-bottom: var(--space-6);
}

/* Inline input + button combo */
.input-group {
  display: flex;
  align-items: stretch;
}
.input-group input {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  border-right: none;
  flex: 1;
}
.input-group .btn {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  flex-shrink: 0;
}

/* Two-column form grid */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-6);
}




/* ════════════════════════════════════════════════════════════════
   06  BUTTONS
   ════════════════════════════════════════════════════════════════ */

/* ── 06a BASE BUTTON ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  appearance: none;
  transition:
    background-color var(--duration-fast) var(--ease-default),
    color            var(--duration-fast) var(--ease-default),
    border-color     var(--duration-fast) var(--ease-default),
    box-shadow       var(--duration-fast) var(--ease-default),
    opacity          var(--duration-fast) var(--ease-default),
    transform        var(--duration-fast) var(--ease-default);
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn:active { transform: scale(0.98); }

/* ── 06b VARIANTS ── */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}
.btn-primary:hover  { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); }

.btn-secondary {
  background-color: var(--color-surface-alt);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-secondary:hover { background-color: var(--color-bg-alt); border-color: var(--color-border-strong); }

.btn-ghost {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-ghost:hover { background-color: var(--color-surface); }

.btn-danger {
  background-color: var(--color-danger);
  color: var(--color-text-inverse);
  border-color: var(--color-danger);
}
.btn-danger:hover { opacity: 0.88; }

.btn-link {
  background: none;
  border: none;
  color: var(--color-primary);
  text-decoration: underline;
  padding-inline: 0;
}
.btn-link:hover { color: var(--color-primary-hover); }

/* ── 06c SIZES ── */
.btn-sm {
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-4);
}

.btn-md {
  font-size: var(--font-size-base);
  padding: var(--space-3) var(--space-6);
}

.btn-lg {
  font-size: var(--font-size-lg);
  padding: var(--space-4) var(--space-8);
}

.btn-full { width: 100%; }

/* ── 06d STATES ── */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

.btn.is-loading {
  pointer-events: none;
  position: relative;
  color: transparent;
}
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: spin 0.6s linear infinite;
  color: var(--color-text-inverse);
}

/* ── 06e BUTTON GROUP ── */
.btn-group {
  display: inline-flex;
  gap: 0;
}
.btn-group .btn {
  border-radius: 0;
  border-right-width: 0;
}
.btn-group .btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.btn-group .btn:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; border-right-width: var(--border-width); }




/* ════════════════════════════════════════════════════════════════
   07  TABLES
   ════════════════════════════════════════════════════════════════ */

/* ── 07a BASE TABLE ── */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
  color: var(--color-text);
}

thead {
  background-color: var(--color-surface);
}

th {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width-lg) solid var(--color-border-strong);
  white-space: nowrap;
  color: var(--color-text-muted);
}

td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border-faint);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background-color: var(--color-surface); }

tfoot td {
  font-weight: var(--font-weight-semibold);
  border-top: var(--border-width-lg) solid var(--color-border-strong);
}

/* ── 07b RESPONSIVE WRAPPER ── */
.table-wrap {
  overflow-x: auto;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

/* ── 07c VARIANTS ── */
.table-striped tbody tr:nth-child(even) {
  background-color: var(--color-bg-alt);
}

.table-bordered td,
.table-bordered th {
  border: var(--border-width) solid var(--color-border);
}

.table-compact td,
.table-compact th {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}




/* ════════════════════════════════════════════════════════════════
   08  MEDIA
   ════════════════════════════════════════════════════════════════ */

/* ── 08a IMAGES & FIGURES ── */
img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

figure {
  margin: var(--space-6) 0;
}

figcaption {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
}

/* ── 08b VIDEO & IFRAME EMBEDS ── */
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Responsive embed ratio */
.embed {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.embed-16-9 { padding-top: 56.25%; }
.embed-4-3  { padding-top: 75%; }
.embed-1-1  { padding-top: 100%; }

.embed iframe,
.embed video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

/* ── 08c AVATAR ── */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  overflow: hidden;
  flex-shrink: 0;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm  { width: 2rem;   height: 2rem;   font-size: var(--font-size-xs); }
.avatar-lg  { width: 3.5rem; height: 3.5rem; font-size: var(--font-size-md); }
.avatar-xl  { width: 5rem;   height: 5rem;   font-size: var(--font-size-xl); }




/* ════════════════════════════════════════════════════════════════
   09  COMPONENTS
   ════════════════════════════════════════════════════════════════ */

/* ── 09a CARD ── */
.card {
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card-body   { padding: var(--space-6); }
.card-header {
  padding: var(--space-4) var(--space-6);
  border-bottom: var(--border-width) solid var(--color-border-faint);
  font-weight: var(--font-weight-semibold);
}
.card-footer {
  padding: var(--space-4) var(--space-6);
  border-top: var(--border-width) solid var(--color-border-faint);
  background-color: var(--color-bg-alt);
}
.card-image img { width: 100%; object-fit: cover; }

/* Hoverable card */
.card-hover {
  transition: box-shadow var(--duration-base), transform var(--duration-base);
  cursor: pointer;
}
.card-hover:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ── 09b BADGE / TAG ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
  white-space: nowrap;
  background-color: var(--color-surface-alt);
  color: var(--color-text-muted);
  border: var(--border-width) solid var(--color-border);
}

.badge-primary { background: var(--color-primary-muted); color: var(--color-primary); border-color: var(--color-primary-muted); }
.badge-success { background: var(--color-success-muted); color: var(--color-success); border-color: var(--color-success-muted); }
.badge-danger  { background: var(--color-danger-muted);  color: var(--color-danger);  border-color: var(--color-danger-muted);  }
.badge-warning { background: var(--color-warning-muted); color: var(--color-warning); border-color: var(--color-warning-muted); }
.badge-info    { background: var(--color-info-muted);    color: var(--color-info);    border-color: var(--color-info-muted);    }

/* Square tag variant */
.tag {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-alt);
  color: var(--color-text-muted);
  border: var(--border-width) solid var(--color-border);
}

/* ── 09c ALERT / NOTICE ── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: var(--border-width) solid transparent;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.alert-info    { background: var(--color-info-muted);    border-color: var(--color-info);    color: var(--color-info);    }
.alert-success { background: var(--color-success-muted); border-color: var(--color-success); color: var(--color-success); }
.alert-warning { background: var(--color-warning-muted); border-color: var(--color-warning); color: var(--color-warning); }
.alert-danger  { background: var(--color-danger-muted);  border-color: var(--color-danger);  color: var(--color-danger);  }

.alert-title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
  display: block;
}

/* ── 09d MODAL OVERLAY ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-6);
}

.modal {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-width) solid var(--color-border-faint);
  font-weight: var(--font-weight-semibold);
}

.modal-body    { padding: var(--space-6); }
.modal-footer  {
  padding: var(--space-4) var(--space-6);
  border-top: var(--border-width) solid var(--color-border-faint);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--font-size-xl);
  line-height: 1;
  padding: var(--space-1);
}
.modal-close:hover { color: var(--color-text); }

/* ── 09e TOOLTIP ── */
[data-tooltip] { position: relative; }

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast);
  z-index: var(--z-tooltip);
}

[data-tooltip]:hover::after { opacity: 1; }

/* ── 09f ACCORDION / DETAILS ── */
details {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

details + details { border-top: none; border-radius: 0; }
details:first-of-type { border-radius: var(--radius-md) var(--radius-md) 0 0; }
details:last-of-type  { border-radius: 0 0 var(--radius-md) var(--radius-md); }
details:only-of-type  { border-radius: var(--radius-md); }

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 1.2em; transition: transform var(--duration-fast); }
details[open] summary::after { content: "−"; }

.details-body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: var(--border-width) solid var(--color-border-faint);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ── 09g TABS ── */
.tabs {
  border-bottom: var(--border-width) solid var(--color-border);
  display: flex;
  gap: 0;
  margin-bottom: var(--space-6);
}

.tab {
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  transition: color var(--duration-fast), border-color var(--duration-fast);
}
.tab:hover { color: var(--color-text); }
.tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── 09h PROGRESS BAR ── */
.progress {
  width: 100%;
  height: 6px;
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-smooth);
}

.progress-bar.success { background-color: var(--color-success); }
.progress-bar.warning { background-color: var(--color-warning); }
.progress-bar.danger  { background-color: var(--color-danger);  }

/* ── 09i SPINNER / LOADER ── */
.spinner {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: spin var(--duration-slow) linear infinite;
}

.spinner-sm { width: 1rem;   height: 1rem; }
.spinner-lg { width: 2rem;   height: 2rem; border-width: 3px; }
.spinner-xl { width: 3rem;   height: 3rem; border-width: 4px; }

/* ── 09j DIVIDER ── */
.divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0;
  color: var(--color-text-faint);
  font-size: var(--font-size-sm);
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* ── 09k STAT / METRIC BLOCK ── */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.stat-value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: 1;
}

.stat-change {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.stat-change.up   { color: var(--color-success); }
.stat-change.down { color: var(--color-danger);  }




/* ════════════════════════════════════════════════════════════════
   10  UTILITIES
   ════════════════════════════════════════════════════════════════ */

/* ── 10a DISPLAY ── */
.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.hidden       { display: none; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ── 10b VISIBILITY ── */
.invisible { visibility: hidden; }
.visible   { visibility: visible; }
.opacity-0 { opacity: 0; }
.opacity-50{ opacity: 0.5; }
.opacity-100{ opacity: 1; }

/* ── 10c SPACING HELPERS ── */
.m-auto  { margin: auto; }
.mx-auto { margin-inline: auto; }
.my-auto { margin-block: auto; }

/* Margin top shortcuts */
.mt-0  { margin-top: 0; }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }

/* Margin bottom shortcuts */
.mb-0  { margin-bottom: 0; }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

/* Padding shortcuts */
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.px-4 { padding-inline: var(--space-4); }
.px-6 { padding-inline: var(--space-6); }
.py-4 { padding-block: var(--space-4); }
.py-6 { padding-block: var(--space-6); }
.py-8 { padding-block: var(--space-8); }

/* ── 10d TEXT ALIGNMENT & TRANSFORM ── */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize{ text-transform: capitalize; }
.text-normal    { text-transform: none; }

.text-xs   { font-size: var(--font-size-xs); }
.text-sm   { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg   { font-size: var(--font-size-lg); }
.text-xl   { font-size: var(--font-size-xl); }

.font-light    { font-weight: var(--font-weight-light); }
.font-regular  { font-weight: var(--font-weight-regular); }
.font-medium   { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold     { font-weight: var(--font-weight-bold); }

.italic  { font-style: italic; }
.not-italic { font-style: normal; }

/* ── 10e COLOR HELPERS ── */
.text-muted   { color: var(--color-text-muted); }
.text-faint   { color: var(--color-text-faint); }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-danger  { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }

/* ── 10f OVERFLOW & TRUNCATION ── */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }

.break-word  { word-break: break-word; overflow-wrap: break-word; }
.break-all   { word-break: break-all; }
.whitespace-nowrap { white-space: nowrap; }

/* ── 10g CURSOR ── */
.cursor-default  { cursor: default; }
.cursor-pointer  { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

/* ── 10h POINTER EVENTS ── */
.pointer-none   { pointer-events: none; }
.pointer-auto   { pointer-events: auto; }

/* ── 10i ASPECT RATIO ── */
.aspect-square { aspect-ratio: 1/1; }
.aspect-video  { aspect-ratio: 16/9; }
.aspect-portrait { aspect-ratio: 3/4; }




/* ════════════════════════════════════════════════════════════════
   11  ANIMATION & TRANSITIONS
   ════════════════════════════════════════════════════════════════ */

/* ── 11a KEYFRAMES ── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}

/* ── 11b ANIMATION UTILITY CLASSES ── */
.animate-spin      { animation: spin          0.6s linear infinite; }
.animate-pulse     { animation: pulse         2s   ease-in-out infinite; }
.animate-fade-in   { animation: fadeIn        var(--duration-base) var(--ease-out) both; }
.animate-fade-up   { animation: fadeInUp      var(--duration-base) var(--ease-out) both; }
.animate-fade-down { animation: fadeInDown    var(--duration-base) var(--ease-out) both; }
.animate-scale-in  { animation: scaleIn       var(--duration-base) var(--ease-spring) both; }
.animate-slide-in  { animation: slideInRight  var(--duration-base) var(--ease-out) both; }

/* Delay helpers */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* Skeleton loader */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface) 25%,
    var(--color-surface-alt) 50%,
    var(--color-surface) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius-md);
  display: block;
}




/* ════════════════════════════════════════════════════════════════
   12  RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

/* ── 12a MOBILE-FIRST MEDIA QUERIES ── */

/* sm: 640px+ */
@media (min-width: 640px) {
  .sm-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .sm-flex-row { flex-direction: row; }
  .sm-hidden { display: none; }
  .sm-block  { display: block; }
}

/* md: 768px+ */
@media (min-width: 768px) {
  .md-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .md-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .md-hidden { display: none; }
  .md-block  { display: block; }
  .form-grid-2 { grid-template-columns: 1fr 1fr; }
}

/* lg: 1024px+ */
@media (min-width: 1024px) {
  .lg-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .lg-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .lg-hidden { display: none; }
  .lg-block  { display: block; }
}

/* xl: 1280px+ */
@media (min-width: 1280px) {
  .xl-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .xl-hidden { display: none; }
  .xl-block  { display: block; }
}

/* ── 12b RESPONSIVE TYPOGRAPHY ── */
@media (max-width: 640px) {
  h1 { font-size: var(--font-size-2xl); }
  h2 { font-size: var(--font-size-xl); }
  h3 { font-size: var(--font-size-lg); }
  .container { padding-inline: var(--space-4); }
}

/* ── HAMBURGER NAV TOGGLE ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-primary);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── 12c RESPONSIVE LAYOUT OVERRIDES ── */
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .tabs { overflow-x: auto; }

  .nav-toggle { display: flex; }
  .nav { position: relative; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: var(--border-width) solid var(--color-border-strong);
    padding: var(--space-4) var(--space-6);
    flex-direction: column;
    gap: var(--space-4);
    z-index: 100;
  }
  .nav-links.open { display: flex; }
}




/* ════════════════════════════════════════════════════════════════
   13  PRINT
   ════════════════════════════════════════════════════════════════ */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body { font-size: 12pt; line-height: 1.5; }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }

  .nav, .nav-fixed, .nav-sticky,
  .btn, .modal-overlay,
  .no-print { display: none !important; }

  h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
  p, blockquote           { orphans: 3; widows: 3; }
  img { max-width: 100% !important; page-break-inside: avoid; }
  table { border-collapse: collapse !important; }
  td, th { background-color: #fff !important; }

  @page {
    margin: 2cm;
  }
}




/* ════════════════════════════════════════════════════════════════
   14  BRILOBOT — design-specific components
       Výkres style · navy ink · drafting paper · red BETA badge
   ════════════════════════════════════════════════════════════════ */

/* ── 14a GOOGLE FONTS IMPORT ── */
/*
  @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');
  Arial Narrow je systémový font — nevyžaduje import.
*/


/* ── 14b HEADINGS — výkresový styl ── */
/*
  Všechny nadpisy jsou Arial Narrow, bold, wide letter-spacing.
  Efekt: technický štítek na výkrese, ne marketingový titulek.
*/
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-primary);
}

h1 { letter-spacing: var(--letter-spacing-wider); }
h2 { letter-spacing: var(--letter-spacing-wide);  }


/* ── 14c BETA BADGE ── */
/*
  Červený rámeček — součást layoutu, ne razítko.
  Používat inline vedle loga nebo nadpisu.

  <span class="badge-beta">BETA</span>
*/
.badge-beta {
  display: inline-flex;
  align-items: center;
  padding: 0.15em 0.55em;
  border: var(--border-width-lg) solid var(--color-accent);
  color: var(--color-accent);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--radius-none);   /* výkres = ostré rohy */
  background: transparent;
  vertical-align: middle;
  flex-shrink: 0;
}


/* ── 14d LOGO SESTAVA ── */
/*
  Kombinace wordmarku a BETA badge na jedné řádce.

  <div class="logo-lockup">
    <span class="logo-wordmark">BRILOBOT</span>
    <span class="badge-beta">BETA</span>
  </div>
*/
.logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.logo-wordmark {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-2xl);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-primary);
  line-height: 1;
}

.logo-wordmark-sm {
  font-size: var(--font-size-lg);
}

.logo-tagline {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.logo-tagline::before,
.logo-tagline::after {
  content: '|';
  opacity: 0.4;
}


/* ── 14e VÝKRESOVÁ HORIZONTÁLNÍ LINKA ── */
/*
  Tenká dělicí čára s volitelným středovým popiskem.
  Vizuálně odpovídá dělicím čarám na technickém výkrese.

  <div class="drawing-rule"></div>
  <div class="drawing-rule" data-label="GEN.EYEWEAR"></div>
*/
.drawing-rule {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  height: 1px;
  border: none;
  position: relative;
  margin: var(--space-4) 0;
}

.drawing-rule::before,
.drawing-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-primary);
  opacity: 0.5;
}

.drawing-rule[data-label] {
  gap: var(--space-3);
}

.drawing-rule[data-label]::before,
.drawing-rule[data-label]::after {
  opacity: 0.5;
}

.drawing-rule[data-label]::before {
  content: '| ' attr(data-label) ' |';
  flex: none;
  height: auto;
  background: none;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 0.6;
}

.drawing-rule[data-label]::after {
  content: '';
}


/* ── 14f KÓTOVACÍ LABEL (dimension annotation) ── */
/*
  Technický popisek hodnoty — jako kóta na výkrese.
  Monospace, malé, s jednotkou.

  <span class="dim-label">52 mm</span>
*/
.dim-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-normal);
}


/* ── 14g KARTA — výkresový styl ── */
/*
  Karta bez zaoblení, s tenkou modrou linkou.
  Ostrý roh = výkres, ne UI kit.
*/
.card-drawing {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-none);
  padding: var(--space-6);
}

.card-drawing-header {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}


/* ── 14h PARAMETRICKÁ TABULKA ── */
/*
  Dvousloupcová tabulka klíč–hodnota jako spec sheet.
  Klíč: monospace muted, hodnota: tučné navy.

  <dl class="param-table">
    <dt>lens_width</dt><dd>52 mm</dd>
  </dl>
*/
.param-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  font-size: var(--font-size-sm);
  border-top: var(--border-width) solid var(--color-border-faint);
}

.param-table dt,
.param-table dd {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border-faint);
  margin: 0;
}

.param-table dt {
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}

.param-table dd {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  letter-spacing: var(--letter-spacing-wide);
  text-align: right;
}


/* ── 14i PRIMÁRNÍ TLAČÍTKO ── */
/*
  Výkresový styl: obrys, ne plná plocha.
  Hover → navy fill s krémovým textem.
*/
.btn-primary {
  background-color: transparent;
  color: var(--color-primary);
  border: var(--border-width-lg) solid var(--color-primary);
  border-radius: var(--radius-none);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
}

.btn-primary:hover {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

/* CTA tlačítko s červeným akcentem (hlavní výzva k akci) */
.btn-cta {
  background-color: transparent;
  color: var(--color-accent);
  border: var(--border-width-lg) solid var(--color-accent);
  border-radius: var(--radius-none);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-6);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-default),
    color            var(--duration-fast) var(--ease-default);
}

.btn-cta:hover {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
}


/* ── 14j MONO LABEL / TAG ── */
/*
  Malý technický popisek — stav jobu, metadata, verze.
  Používat pro: GEN.01, #job_id, status, timestamps.
*/
.mono-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-wide);
  line-height: 1;
}

.mono-label-primary {
  color: var(--color-primary);
}


/* ── 14k VÝKRESOVÁ MŘÍŽKA (background pattern) ── */
/*
  Jemná grafická mřížka pro hero sekce nebo prázdné stavy.
  Aplikovat jako background na section nebo div.
*/
.drawing-grid-bg {
  background-image:
    linear-gradient(rgba(27, 62, 107, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 62, 107, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}

.drawing-grid-bg-fine {
  background-image:
    linear-gradient(rgba(27, 62, 107, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 62, 107, 0.04) 1px, transparent 1px);
  background-size: 16px 16px;
}


/* ════════════════════════════════════════════════════════════════
   15  BRILOBOT UTILITY CLASSES
   ════════════════════════════════════════════════════════════════ */

/* Nav container: flex row, vertically centered, spaced between */
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

/* Main content area with standard page padding */
.section-content {
  padding: var(--space-10) 0;
  min-height: 60vh;
}

/* Large section vertical padding */
.section-pad-lg { padding: var(--space-14) 0; }

/* Horizontal button/action group */
.button-group {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Secondary body text with standard spacing */
.text-lead {
  color: var(--color-text-muted);
  margin: var(--space-4) 0 var(--space-6);
  line-height: var(--line-height-relaxed);
}

/* Accent variant of card-drawing (e.g. P3 Early Adopter) */
.card-drawing--accent {
  border-color: var(--color-accent);
}
.card-drawing--accent .card-drawing-header {
  border-bottom-color: rgba(204, 32, 16, 0.20);
  color: var(--color-accent);
}

/* Pre/code output block (FreeCAD logs etc.) */
.pre-output {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  color: var(--color-primary);
  padding: var(--space-4);
  overflow: auto;
  max-height: 300px;
  margin: var(--space-3) 0;
}

/* Grid with outer border (pipeline, param grid) */
.grid-bordered {
  border: 1px solid var(--color-border-strong);
}

/* Footer inner layout */
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Site footer spacing */
.site-footer {
  border-top: 1px solid var(--color-border-strong);
  padding: var(--space-6) 0;
  margin-top: var(--space-16);
}

/* Missing spacing scale entries */
.py-10 { padding-block: var(--space-10); }
.py-14 { padding-block: var(--space-14); }
.py-16 { padding-block: var(--space-16); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }

/* ── 14l NAV — výkresový styl ── */
.nav {
  background-color: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-border-strong);
}

.nav-links a {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  text-decoration: none;
  color: var(--color-text-muted);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-primary);
}


/* ── 14m CODE / LOG OUTPUT ── */
/*
  Výpis logu, parametrů, příkazové řádky.
  Tmavší papírové pozadí, navy inkoust, monospace.
*/
code, kbd, samp {
  font-family: var(--font-mono);
  background: var(--color-surface-alt);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-none);   /* výkres = ostré rohy */
  color: var(--color-primary);
}

pre {
  font-family: var(--font-mono);
  background: var(--color-surface-alt);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-none);
  color: var(--color-primary);
}