/* =============================================================
   Stromcom Auth · admin UI stylesheet
   Engineering console aesthetic · light + dark · mobile ready
   Servuje se přes /assets/ui.css (AssetsController).
   ============================================================= */

/* IBM Plex byl předlohou; protože CSP zakazuje externí style-src, používáme
   systémové fallback fonty. Pokud chceš IBM Plex, self-hostni woff2 do assets/
   a uprav font-family deklarace níž. */

/* ----- 1. Reset --------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html,body{height:100%}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* ----- 2. Theme tokens -------------------------------------- */
:root{
  --radius-sm:4px;
  --radius:6px;
  --radius-lg:10px;
}
:root,[data-theme="light"]{
  --bg:#f6f4ec;
  --bg-pattern:rgba(20,20,15,.05);
  --surface:#ffffff;
  --surface-alt:#efece1;
  --surface-hover:#e9e5d5;
  --surface-sunken:#ebe8dc;
  --border:#dfdacb;
  --border-strong:#c4bea9;
  --text:#1a1a14;
  --text-muted:#65635a;
  --text-faint:#928f84;
  --accent:#0a8a5a;
  --accent-hover:#086e48;
  --accent-fg:#ffffff;
  --accent-soft:#d6efe2;
  --accent-soft-text:#06593a;
  --danger:#c83a3a;
  --danger-soft:#fbe2e2;
  --danger-soft-text:#8a1f1f;
  --warning:#b67110;
  --warning-soft:#f6e5c8;
  --warning-soft-text:#6b4108;
  --info:#2563b9;
  --info-soft:#dbe7fa;
  --info-soft-text:#143f7d;
  --shadow-sm:0 1px 2px rgba(20,20,15,.06);
  --shadow:0 4px 12px -2px rgba(20,20,15,.08),0 2px 4px -1px rgba(20,20,15,.04);
  --shadow-lg:0 22px 50px -10px rgba(20,20,15,.20),0 6px 12px -3px rgba(20,20,15,.08);
  --backdrop:rgba(20,20,15,.45);
}
[data-theme="dark"]{
  --bg:#0b0d0c;
  --bg-pattern:rgba(255,255,250,.05);
  --surface:#13181a;
  --surface-alt:#191f21;
  --surface-hover:#1f2629;
  --surface-sunken:#0e1213;
  --border:#262d2f;
  --border-strong:#3a4244;
  --text:#ecead9;
  --text-muted:#9aa19a;
  --text-faint:#6a706a;
  --accent:#2ad17e;
  --accent-hover:#46df93;
  --accent-fg:#06140d;
  --accent-soft:#0e2a1e;
  --accent-soft-text:#7ee9b3;
  --danger:#ff6e6e;
  --danger-soft:#2b1414;
  --danger-soft-text:#ffb4b4;
  --warning:#f0a83f;
  --warning-soft:#2c1f10;
  --warning-soft-text:#ffd58a;
  --info:#5fa4ff;
  --info-soft:#102236;
  --info-soft-text:#a8c8ff;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 4px 14px -2px rgba(0,0,0,.55),0 2px 4px -1px rgba(0,0,0,.35);
  --shadow-lg:0 22px 50px -10px rgba(0,0,0,.7),0 6px 12px -3px rgba(0,0,0,.45);
  --backdrop:rgba(0,0,0,.6);
}

/* ----- 3. Base body ----------------------------------------- */
body{
  font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14px;
  line-height:1.5;
  font-weight:400;
  color:var(--text);
  background-color:var(--bg);
  background-image:radial-gradient(var(--bg-pattern) 1px,transparent 1px);
  background-size:22px 22px;
  background-position:0 0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.ui-mono,code,kbd,samp{font-family:'IBM Plex Mono','Menlo','Consolas',monospace}
.ui-numbers{font-variant-numeric:tabular-nums}

/* ----- 4. Typography ---------------------------------------- */
h1,h2,h3,h4,h5,h6{font-weight:600;letter-spacing:-.01em;color:var(--text);line-height:1.25}
h1{font-size:1.75rem;letter-spacing:-.02em}
h2{font-size:1.375rem}
h3{font-size:1.125rem}
h4{font-size:1rem}
p{color:var(--text)}
small,.ui-small{font-size:12px;color:var(--text-muted)}
.ui-muted{color:var(--text-muted)}
.ui-faint{color:var(--text-faint)}
.ui-eyebrow{font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--text-muted);font-weight:500}
hr,.ui-hr{border:0;border-top:1px solid var(--border);margin:1.25rem 0}

/* ----- 5. App shell ----------------------------------------- */
.ui-app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.ui-sidebar{
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  z-index:40;
}
.ui-sidebar__brand{
  display:flex;align-items:center;gap:.625rem;
  padding:1.125rem 1.25rem;
  border-bottom:1px solid var(--border);
  font-weight:600;font-size:.95rem;
  letter-spacing:-.01em;
}
.ui-sidebar__brand-mark{
  width:28px;height:28px;border-radius:7px;
  background:var(--text);color:var(--bg);
  display:grid;place-items:center;
  font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:13px;
  position:relative;
}
.ui-sidebar__brand-mark::after{
  content:"";position:absolute;inset:auto -3px -3px auto;
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);border:2px solid var(--surface);
}
.ui-sidebar__nav{flex:1;overflow-y:auto;padding:.875rem .625rem;display:flex;flex-direction:column;gap:.125rem}
.ui-sidebar__section{margin-top:1rem}
.ui-sidebar__section:first-child{margin-top:0}
.ui-sidebar__label{
  padding:.25rem .75rem .5rem;
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);
}
.ui-nav-item{
  display:flex;align-items:center;gap:.625rem;
  padding:.5rem .75rem;border-radius:var(--radius,6px);
  color:var(--text-muted);font-weight:500;font-size:13.5px;
  cursor:pointer;transition:background .12s,color .12s;
  border:1px solid transparent;
}
.ui-nav-item:hover{background:var(--surface-hover);color:var(--text)}
.ui-nav-item.is-active{background:var(--surface-alt);color:var(--text);border-color:var(--border)}
.ui-nav-item.is-active .ui-nav-item__icon{color:var(--accent)}
.ui-nav-item__icon{width:16px;height:16px;flex-shrink:0;color:var(--text-faint)}
.ui-nav-item__badge{
  margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  background:var(--surface-alt);color:var(--text-muted);
  padding:.05rem .375rem;border-radius:99px;border:1px solid var(--border);
}
.ui-sidebar__footer{padding:.75rem;border-top:1px solid var(--border);display:flex;align-items:center;gap:.5rem}

.ui-main{display:flex;flex-direction:column;min-width:0}
.ui-topbar{
  position:sticky;top:0;z-index:30;
  background:rgba(255,255,255,.0);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  background-color:color-mix(in srgb,var(--bg) 75%,transparent);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:.75rem;
  padding:.625rem 1.5rem;min-height:56px;
}
.ui-topbar__title{font-size:.95rem;font-weight:600;letter-spacing:-.005em}
.ui-topbar__crumbs{display:flex;align-items:center;gap:.4rem;color:var(--text-faint);font-size:13px}
.ui-topbar__crumbs span{font-family:'IBM Plex Mono',monospace;color:var(--text-faint)}
.ui-topbar__crumbs strong{font-weight:500;color:var(--text)}
.ui-topbar__spacer{flex:1}
.ui-topbar__actions{display:flex;align-items:center;gap:.5rem}

.ui-content{padding:1.75rem 1.5rem 3rem;max-width:1320px;width:100%;margin:0 auto}
.ui-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.ui-page-head__title{display:flex;flex-direction:column;gap:.25rem}
.ui-page-head__actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}

.ui-mobile-toggle{display:none;width:36px;height:36px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);align-items:center;justify-content:center;cursor:pointer}
.ui-mobile-toggle svg{width:18px;height:18px}

/* ----- 6. Buttons ------------------------------------------- */
.ui-btn{
  --btn-bg:var(--surface);
  --btn-fg:var(--text);
  --btn-border:var(--border-strong);
  --btn-bg-hover:var(--surface-hover);
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  height:34px;padding:0 .85rem;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-border);border-radius:var(--radius);
  font-weight:500;font-size:13.5px;letter-spacing:-.005em;
  cursor:pointer;user-select:none;white-space:nowrap;
  transition:background .12s,border-color .12s,transform .04s;
}
.ui-btn:hover{background:var(--btn-bg-hover)}
.ui-btn:active{transform:translateY(.5px)}
.ui-btn:disabled,.ui-btn.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.ui-btn svg{width:14px;height:14px}
.ui-btn--primary{--btn-bg:var(--accent);--btn-fg:var(--accent-fg);--btn-border:var(--accent);--btn-bg-hover:var(--accent-hover)}
.ui-btn--primary:hover{border-color:var(--accent-hover)}
.ui-btn--danger{--btn-bg:var(--danger);--btn-fg:#fff;--btn-border:var(--danger);--btn-bg-hover:#a82a2a}
.ui-btn--ghost{--btn-bg:transparent;--btn-border:transparent;--btn-bg-hover:var(--surface-hover)}
.ui-btn--soft{--btn-bg:var(--surface-alt);--btn-border:var(--border)}
.ui-btn--sm{height:28px;padding:0 .625rem;font-size:12.5px;border-radius:var(--radius-sm)}
.ui-btn--lg{height:42px;padding:0 1.1rem;font-size:14.5px}
.ui-btn--icon{width:34px;padding:0}
.ui-btn--icon.ui-btn--sm{width:28px}
.ui-btn--block{width:100%}
.ui-btn-group{display:inline-flex}
.ui-btn-group .ui-btn{border-radius:0}
.ui-btn-group .ui-btn:first-child{border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius)}
.ui-btn-group .ui-btn:last-child{border-top-right-radius:var(--radius);border-bottom-right-radius:var(--radius)}
.ui-btn-group .ui-btn+.ui-btn{border-left-width:0}

/* ----- 7. Forms --------------------------------------------- */
.ui-form{display:flex;flex-direction:column;gap:1rem}
.ui-form-row{display:grid;grid-template-columns:1fr 1fr;gap:.875rem}
.ui-field{display:flex;flex-direction:column;gap:.375rem;min-width:0}
.ui-label{
  font-size:12.5px;font-weight:500;color:var(--text);
  display:flex;align-items:center;gap:.4rem;
}
.ui-label__req{color:var(--danger);font-weight:600}
.ui-label__hint{margin-left:auto;color:var(--text-faint);font-weight:400;font-size:11.5px}
.ui-help{font-size:12px;color:var(--text-muted);line-height:1.4}
.ui-error{font-size:12px;color:var(--danger);display:none;align-items:center;gap:.3rem}
.ui-field.has-error .ui-error{display:flex}
.ui-field.has-error .ui-input,.ui-field.has-error .ui-select,.ui-field.has-error .ui-textarea{border-color:var(--danger)}

.ui-input,.ui-select,.ui-textarea{
  width:100%;height:36px;padding:0 .75rem;
  background:var(--surface);color:var(--text);
  border:1px solid var(--border-strong);border-radius:var(--radius);
  font-size:13.5px;font-family:inherit;
  transition:border-color .12s,box-shadow .12s,background .12s;
}
.ui-textarea{height:auto;min-height:96px;padding:.55rem .75rem;resize:vertical;line-height:1.5}
.ui-input::placeholder,.ui-textarea::placeholder{color:var(--text-faint)}
.ui-input:hover,.ui-select:hover,.ui-textarea:hover{border-color:var(--text-muted)}
.ui-input:focus,.ui-select:focus,.ui-textarea:focus{
  outline:0;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);
}
.ui-input--mono{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:-.005em}
.ui-input--lg{height:42px;font-size:14.5px}
.ui-input--sm{height:30px;font-size:12.5px}

.ui-select{appearance:none;-webkit-appearance:none;background-repeat:no-repeat;background-position:right .75rem center;background-size:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23656565' stroke-width='1.5'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  padding-right:2.25rem;
}

/* input groups (icon prefix / suffix) */
.ui-input-group{position:relative;display:flex;align-items:stretch}
.ui-input-group__icon{
  position:absolute;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--text-faint);pointer-events:none;
}
.ui-input-group__icon--left{left:.7rem}
.ui-input-group__icon--right{right:.7rem;pointer-events:auto;cursor:pointer}
.ui-input-group__icon--left ~ .ui-input{padding-left:2.25rem}
.ui-input-group__icon--right ~ .ui-input,.ui-input-group .ui-input:has(~ .ui-input-group__icon--right){padding-right:2.25rem}
.ui-input-group:has(.ui-input-group__icon--right) .ui-input{padding-right:2.25rem}

/* checkbox & radio & switch */
.ui-check{display:inline-flex;align-items:flex-start;gap:.55rem;cursor:pointer;font-size:13.5px;line-height:1.4}
.ui-check input{
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;flex-shrink:0;margin-top:1px;
  background:var(--surface);border:1.5px solid var(--border-strong);border-radius:4px;
  cursor:pointer;display:grid;place-items:center;transition:background .12s,border-color .12s;
}
.ui-check input[type="radio"]{border-radius:50%}
.ui-check input:hover{border-color:var(--text-muted)}
.ui-check input:checked{background:var(--accent);border-color:var(--accent)}
.ui-check input[type="checkbox"]:checked::after{
  content:"";width:9px;height:5px;border-left:2px solid var(--accent-fg);border-bottom:2px solid var(--accent-fg);
  transform:rotate(-45deg) translate(.5px,-1px);
}
.ui-check input[type="radio"]:checked::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-fg)}
.ui-check span{color:var(--text)}
.ui-check small{display:block;color:var(--text-muted);margin-top:2px;font-size:12px}

/* radio cards — when .ui-check is combined with .ui-card */
.ui-radio-cards .ui-check.ui-card{
  display:flex;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.ui-radio-cards .ui-check.ui-card:hover{border-color:var(--border-strong);background:var(--surface-2)}
.ui-radio-cards .ui-check.ui-card.is-selected{
  border-color:var(--accent);background:var(--accent-soft);
  box-shadow:0 0 0 1px var(--accent) inset;
}
.ui-radio-cards .ui-check.ui-card.is-selected strong{color:var(--accent)}

.ui-switch{display:inline-flex;align-items:center;gap:.625rem;cursor:pointer;user-select:none}
.ui-switch input{position:absolute;opacity:0;pointer-events:none}
.ui-switch__track{
  width:32px;height:18px;border-radius:99px;
  background:var(--border-strong);position:relative;flex-shrink:0;
  transition:background .15s;
}
.ui-switch__track::after{
  content:"";position:absolute;top:2px;left:2px;
  width:14px;height:14px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s;
}
.ui-switch input:checked + .ui-switch__track{background:var(--accent)}
.ui-switch input:checked + .ui-switch__track::after{transform:translateX(14px)}

/* ----- 8. Cards & sections ---------------------------------- */
.ui-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.ui-card__head{
  padding:.875rem 1.125rem;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:.625rem;
}
.ui-card__title{font-size:14px;font-weight:600;letter-spacing:-.005em}
.ui-card__desc{font-size:12.5px;color:var(--text-muted);margin-top:2px}
.ui-card__spacer{flex:1}
.ui-card__body{padding:1.125rem}
.ui-card__foot{padding:.75rem 1.125rem;border-top:1px solid var(--border);background:var(--surface-alt);border-radius:0 0 var(--radius-lg) var(--radius-lg);display:flex;align-items:center;gap:.5rem}
.ui-card__foot--end{justify-content:flex-end}
.ui-card--flush .ui-card__body{padding:0}

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

/* stat card */
.ui-stat{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:1rem 1.125rem;
  display:flex;flex-direction:column;gap:.375rem;position:relative;overflow:hidden;
}
.ui-stat__label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.ui-stat__value{font-size:1.65rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ui-stat__delta{font-size:12px;display:inline-flex;align-items:center;gap:.25rem;color:var(--text-muted)}
.ui-stat__delta--up{color:var(--accent)}
.ui-stat__delta--down{color:var(--danger)}

/* ----- 9. Badges -------------------------------------------- */
.ui-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.05rem .45rem;
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.02em;
  border-radius:99px;
  background:var(--surface-alt);color:var(--text-muted);
  border:1px solid var(--border);
  text-transform:lowercase;
}
.ui-badge--success{background:var(--accent-soft);color:var(--accent-soft-text);border-color:transparent}
.ui-badge--danger{background:var(--danger-soft);color:var(--danger-soft-text);border-color:transparent}
.ui-badge--warning{background:var(--warning-soft);color:var(--warning-soft-text);border-color:transparent}
.ui-badge--info{background:var(--info-soft);color:var(--info-soft-text);border-color:transparent}
.ui-badge--solid{background:var(--text);color:var(--bg);border-color:transparent}
.ui-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}

/* ----- 10. Tables ------------------------------------------- */
/* Bez `overflow:hidden`, aby dropdowny v posledním sloupci nebyly useknuté.
   Border-radius odsekneme přes radius na vnitřních prvcích (toolbar/pagination/cells). */
.ui-table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.ui-table-wrap > .ui-table-toolbar:first-child{border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.ui-table-wrap > .ui-pagination:last-child{border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.ui-table-toolbar{padding:.75rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.ui-table-toolbar__search{flex:1;min-width:180px;max-width:340px}
/* `overflow:visible` aby dropdown menu (action menu v posledním sloupci) nebylo useknuté.
   Default wrap na cells (níž) drží tabulku v rozumné šířce; na mobilu pomáhá responsive layout. */
.ui-table-scroll{overflow:visible;-webkit-overflow-scrolling:touch}
.ui-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.ui-table th,.ui-table td{padding:.625rem .875rem;text-align:left;vertical-align:middle;border-bottom:1px solid var(--border)}
/* default = wrap; jen monospace / číselné cells si drží nowrap, aby se neroztrhly datumy/ID */
.ui-table td .ui-mono,
.ui-table th .ui-mono,
.ui-table .ui-table__id,
.ui-table .ui-numbers,
.ui-table td.is-nowrap{white-space:nowrap}
/* explicitní wrap (legacy helper, nechávám pro případné inline použití) */
.ui-table td.is-wrap,
.ui-table td.is-wrap .ui-mono{white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.ui-table td.is-wrap .ui-badge{margin-bottom:2px}
.ui-table th{
  font-weight:500;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);background:var(--surface-alt);
  position:sticky;top:0;
}
.ui-table tbody tr{transition:background .1s}
.ui-table tbody tr:hover{background:var(--surface-hover)}
.ui-table tbody tr:last-child td{border-bottom:0}
.ui-table td .ui-mono{color:var(--text)}
.ui-table__id{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--text-muted)}
.ui-table__primary{font-weight:500;color:var(--text)}
.ui-table__sub{font-size:12px;color:var(--text-muted);margin-top:2px;font-weight:400}
.ui-table__actions{text-align:right;width:1px}
.ui-table__check{width:1px;padding-right:0}
.ui-table .ui-th-sort{cursor:pointer;user-select:none;display:inline-flex;align-items:center;gap:.3rem}
.ui-table .ui-th-sort::after{content:"";width:0;height:0;border:3px solid transparent;border-top-color:var(--text-faint);margin-top:4px;opacity:.7}
.ui-table .ui-th-sort.is-asc::after{border:3px solid transparent;border-bottom-color:var(--accent);margin-top:-4px}
.ui-table .ui-th-sort.is-desc::after{border-top-color:var(--accent)}

.ui-pagination{padding:.625rem .875rem;border-top:1px solid var(--border);display:flex;align-items:center;gap:.5rem;background:var(--surface-alt)}
.ui-pagination__info{font-size:12.5px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.ui-pagination__spacer{flex:1}

.ui-empty{padding:3rem 1.5rem;text-align:center;color:var(--text-muted)}
.ui-empty__icon{width:48px;height:48px;border-radius:12px;background:var(--surface-alt);display:grid;place-items:center;margin:0 auto 1rem;color:var(--text-faint)}
.ui-empty h3{font-size:1rem;color:var(--text);margin-bottom:.25rem}

/* ----- 11. Code blocks / token rows ------------------------- */
.ui-code{
  display:flex;align-items:center;gap:.5rem;
  background:var(--surface-sunken);border:1px solid var(--border);
  border-radius:var(--radius);padding:.5rem .625rem;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--text);
  overflow-x:auto;
}
.ui-code__value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:all}
.ui-code--block{display:block;white-space:pre;padding:.75rem .875rem;line-height:1.55}
.ui-secret{letter-spacing:.08em}
.ui-secret.is-hidden .ui-code__value{filter:blur(4px);user-select:none}

/* ----- 12. Tabs --------------------------------------------- */
.ui-tabs{display:flex;align-items:center;gap:.125rem;border-bottom:1px solid var(--border);overflow-x:auto}
.ui-tab{
  padding:.625rem .875rem;font-size:13.5px;font-weight:500;
  color:var(--text-muted);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  white-space:nowrap;transition:color .12s,border-color .12s;
}
.ui-tab:hover{color:var(--text)}
.ui-tab.is-active{color:var(--text);border-bottom-color:var(--accent)}
.ui-tab__count{
  display:inline-block;margin-left:.4rem;
  font-family:'IBM Plex Mono',monospace;font-size:11px;
  background:var(--surface-alt);color:var(--text-muted);
  padding:.05rem .35rem;border-radius:99px;border:1px solid var(--border);
}
.ui-tab-panel{display:none;padding-top:1.25rem}
.ui-tab-panel.is-active{display:block}

/* ----- 13. Dropdown ----------------------------------------- */
.ui-dropdown{position:relative;display:inline-block}
.ui-dropdown__menu{
  position:absolute;top:calc(100% + 6px);right:0;
  min-width:200px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:.3rem;
  z-index:50;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s,transform .14s,visibility .14s;
}
.ui-dropdown.is-open .ui-dropdown__menu{opacity:1;visibility:visible;transform:translateY(0)}
.ui-dropdown__menu--left{right:auto;left:0}
.ui-dropdown__item{
  display:flex;align-items:center;gap:.5rem;
  padding:.4rem .55rem;border-radius:var(--radius-sm);
  font-size:13px;color:var(--text);cursor:pointer;
  transition:background .1s;
}
.ui-dropdown__item:hover{background:var(--surface-hover)}
.ui-dropdown__item svg{width:14px;height:14px;color:var(--text-muted)}
.ui-dropdown__item--danger{color:var(--danger)}
.ui-dropdown__item--danger svg{color:var(--danger)}
.ui-dropdown__sep{height:1px;background:var(--border);margin:.3rem 0}
.ui-dropdown__label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);padding:.4rem .55rem .15rem}

/* ----- 14. Modal -------------------------------------------- */
.ui-modal{
  position:fixed;inset:0;z-index:100;
  display:none;align-items:center;justify-content:center;
  padding:1rem;
  animation:ui-fade .14s ease;
}
.ui-modal.is-open{display:flex}
.ui-modal__backdrop{position:absolute;inset:0;background:var(--backdrop);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.ui-modal__dialog{
  position:relative;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  width:100%;max-width:520px;max-height:calc(100vh - 2rem);
  display:flex;flex-direction:column;overflow:hidden;
  animation:ui-rise .16s cubic-bezier(.2,.8,.3,1);
}
.ui-modal__dialog--lg{max-width:720px}
.ui-modal__dialog--sm{max-width:400px}
.ui-modal__head{padding:1rem 1.125rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.625rem}
.ui-modal__title{font-size:15px;font-weight:600;letter-spacing:-.005em}
.ui-modal__close{margin-left:auto;width:28px;height:28px;display:grid;place-items:center;border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;border:0;background:transparent}
.ui-modal__close:hover{background:var(--surface-hover);color:var(--text)}
.ui-modal__body{padding:1.125rem;overflow-y:auto;flex:1}
.ui-modal__foot{padding:.75rem 1.125rem;border-top:1px solid var(--border);background:var(--surface-alt);display:flex;align-items:center;gap:.5rem;justify-content:flex-end}

@keyframes ui-fade{from{opacity:0}to{opacity:1}}
@keyframes ui-rise{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* ----- 15. Toasts ------------------------------------------- */
.ui-toasts{
  position:fixed;z-index:200;bottom:1rem;right:1rem;
  display:flex;flex-direction:column-reverse;gap:.5rem;
  max-width:calc(100vw - 2rem);width:380px;
  pointer-events:none;
}
.ui-toast{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:.7rem .875rem;display:flex;align-items:flex-start;gap:.625rem;
  pointer-events:auto;
  animation:ui-toast-in .2s cubic-bezier(.2,.8,.3,1);
  border-left:3px solid var(--accent);
}
.ui-toast--success{border-left-color:var(--accent)}
.ui-toast--danger{border-left-color:var(--danger)}
.ui-toast--warning{border-left-color:var(--warning)}
.ui-toast--info{border-left-color:var(--info)}
.ui-toast__icon{width:18px;height:18px;flex-shrink:0;margin-top:1px;color:var(--accent)}
.ui-toast--danger .ui-toast__icon{color:var(--danger)}
.ui-toast--warning .ui-toast__icon{color:var(--warning)}
.ui-toast--info .ui-toast__icon{color:var(--info)}
.ui-toast__body{flex:1;min-width:0}
.ui-toast__title{font-weight:500;font-size:13.5px}
.ui-toast__msg{font-size:12.5px;color:var(--text-muted);margin-top:2px}
.ui-toast__close{background:transparent;border:0;color:var(--text-faint);cursor:pointer;padding:2px}
.ui-toast.is-leaving{animation:ui-toast-out .18s forwards ease}
@keyframes ui-toast-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes ui-toast-out{from{opacity:1}to{opacity:0;transform:translateX(20px)}}

/* ----- 16. Alerts ------------------------------------------- */
.ui-alert{
  display:flex;align-items:flex-start;gap:.625rem;
  padding:.75rem .875rem;
  border:1px solid var(--border);border-left-width:3px;
  border-radius:var(--radius);
  background:var(--surface-alt);
  font-size:13px;
}
.ui-alert__icon{width:16px;height:16px;flex-shrink:0;margin-top:1px;color:var(--text-muted)}
.ui-alert__title{font-weight:500;color:var(--text)}
.ui-alert__body{color:var(--text-muted);margin-top:2px;line-height:1.45}
.ui-alert--success{background:var(--accent-soft);border-left-color:var(--accent);color:var(--accent-soft-text)}
.ui-alert--success .ui-alert__icon,.ui-alert--success .ui-alert__title{color:var(--accent-soft-text)}
.ui-alert--success .ui-alert__body{color:var(--accent-soft-text);opacity:.85}
.ui-alert--danger{background:var(--danger-soft);border-left-color:var(--danger)}
.ui-alert--danger .ui-alert__icon,.ui-alert--danger .ui-alert__title{color:var(--danger-soft-text)}
.ui-alert--danger .ui-alert__body{color:var(--danger-soft-text);opacity:.85}
.ui-alert--warning{background:var(--warning-soft);border-left-color:var(--warning)}
.ui-alert--warning .ui-alert__icon,.ui-alert--warning .ui-alert__title{color:var(--warning-soft-text)}
.ui-alert--warning .ui-alert__body{color:var(--warning-soft-text);opacity:.9}
.ui-alert--info{background:var(--info-soft);border-left-color:var(--info)}
.ui-alert--info .ui-alert__icon,.ui-alert--info .ui-alert__title{color:var(--info-soft-text)}
.ui-alert--info .ui-alert__body{color:var(--info-soft-text);opacity:.9}

/* ----- 17. Avatar & user blocks ----------------------------- */
.ui-avatar{
  width:28px;height:28px;border-radius:50%;
  background:var(--surface-alt);color:var(--text);
  display:inline-grid;place-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  border:1px solid var(--border);text-transform:uppercase;
  flex-shrink:0;
}
.ui-avatar--lg{width:36px;height:36px;font-size:12.5px}
.ui-user{display:flex;align-items:center;gap:.55rem}
.ui-user__name{font-weight:500;font-size:13.5px;line-height:1.2}
.ui-user__email{color:var(--text-muted);font-size:12px;line-height:1.2;margin-top:2px}

/* ----- 18. Login screen ------------------------------------- */
.ui-auth{
  min-height:100vh;display:grid;
  grid-template-columns:1fr;
  background:var(--bg);
}
.ui-auth--split{grid-template-columns:1fr 1.05fr}
.ui-auth__panel{
  padding:2rem 1.5rem;display:flex;flex-direction:column;
  align-items:stretch;justify-content:center;
}
.ui-auth__inner{width:100%;max-width:360px;margin:0 auto}
.ui-auth__brand{display:flex;align-items:center;gap:.625rem;margin-bottom:2.5rem}
.ui-auth__brand-mark{
  width:36px;height:36px;border-radius:9px;
  background:var(--text);color:var(--bg);
  display:grid;place-items:center;
  font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:15px;
  position:relative;
}
.ui-auth__brand-mark::after{
  content:"";position:absolute;inset:auto -4px -4px auto;
  width:11px;height:11px;border-radius:50%;
  background:var(--accent);border:2px solid var(--bg);
}
.ui-auth__brand-name{font-weight:600;letter-spacing:-.01em;font-size:15px}
.ui-auth h1{font-size:1.5rem;margin-bottom:.375rem}
.ui-auth__sub{color:var(--text-muted);font-size:13.5px;margin-bottom:1.75rem}
.ui-auth__divider{
  display:flex;align-items:center;gap:.75rem;
  margin:1.25rem 0;color:var(--text-faint);
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.ui-auth__divider::before,.ui-auth__divider::after{content:"";flex:1;height:1px;background:var(--border)}
.ui-auth__foot{margin-top:1.5rem;font-size:12.5px;color:var(--text-muted);text-align:center}
.ui-auth__foot a{color:var(--accent);font-weight:500}
.ui-auth__legal{margin-top:auto;padding-top:2rem;font-size:11.5px;color:var(--text-faint);display:flex;justify-content:space-between;gap:1rem}

/* Aside panel — decorative engineering console */
.ui-auth__aside{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--surface-alt) 0%,var(--surface) 60%,var(--surface-alt) 100%);
  border-left:1px solid var(--border);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:2.5rem;
}
.ui-auth__aside::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at 70% 30%,black 40%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 70% 30%,black 40%,transparent 75%);
  opacity:.65;
}
.ui-auth__aside-content{position:relative}
.ui-auth__aside-eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:.875rem;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.25rem .55rem;border:1px solid var(--border);border-radius:99px;background:var(--surface);
}
.ui-auth__aside-eyebrow .ui-badge__dot{background:var(--accent)}
.ui-auth__aside h2{font-size:1.625rem;line-height:1.2;letter-spacing:-.02em;max-width:24ch}
.ui-auth__aside p{margin-top:.75rem;color:var(--text-muted);font-size:14px;max-width:38ch}
.ui-auth__cli{
  position:relative;margin-top:2rem;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;
  font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.7;
  max-width:420px;box-shadow:var(--shadow);
}
.ui-auth__cli-head{
  display:flex;align-items:center;gap:.5rem;
  padding:.5rem .75rem;border-bottom:1px solid var(--border);
  font-size:11px;color:var(--text-muted);
}
.ui-auth__cli-dots{display:flex;gap:.25rem}
.ui-auth__cli-dots span{width:8px;height:8px;border-radius:50%;background:var(--border-strong)}
.ui-auth__cli-body{padding:.75rem .875rem;color:var(--text-muted)}
.ui-auth__cli-body .c-prompt{color:var(--accent)}
.ui-auth__cli-body .c-key{color:var(--text)}
.ui-auth__cli-body .c-str{color:var(--info)}
.ui-auth__cli-body .c-ok{color:var(--accent)}
.ui-auth__aside-stats{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem;margin-top:auto}
.ui-auth__aside-stat{padding:.625rem .75rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.ui-auth__aside-stat strong{display:block;font-size:1.15rem;letter-spacing:-.01em;font-weight:600;font-variant-numeric:tabular-nums}
.ui-auth__aside-stat span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}

/* ----- 19. KBD / inline marks ------------------------------- */
kbd,.ui-kbd{
  font-family:'IBM Plex Mono',monospace;font-size:11px;
  padding:.05rem .375rem;border:1px solid var(--border-strong);
  border-bottom-width:2px;border-radius:4px;
  background:var(--surface);color:var(--text-muted);
}

/* ----- 20. Utility ------------------------------------------ */
.ui-stack{display:flex;flex-direction:column;gap:1rem}
.ui-stack--sm{gap:.5rem}
.ui-stack--lg{gap:1.5rem}
.ui-row{display:flex;align-items:center;gap:.625rem}
.ui-row--end{justify-content:flex-end}
.ui-row--between{justify-content:space-between}
.ui-row--wrap{flex-wrap:wrap}
.ui-spacer{flex:1}
.ui-hide{display:none!important}
.ui-only-mobile{display:none}
.ui-only-desktop{}
.ui-text-right{text-align:right}
.ui-text-center{text-align:center}
.ui-w-full{width:100%}

/* ----- 21. Loading & skeleton ------------------------------- */
.ui-spinner{
  width:14px;height:14px;border-radius:50%;
  border:1.5px solid var(--border-strong);border-top-color:var(--accent);
  animation:ui-spin .7s linear infinite;flex-shrink:0;
}
.ui-spinner--lg{width:20px;height:20px;border-width:2px}
@keyframes ui-spin{to{transform:rotate(360deg)}}
.ui-skel{
  background:linear-gradient(90deg,var(--surface-alt) 0%,var(--surface-hover) 50%,var(--surface-alt) 100%);
  background-size:200% 100%;
  border-radius:4px;animation:ui-skel 1.2s ease infinite;
}
@keyframes ui-skel{from{background-position:200% 0}to{background-position:-200% 0}}

/* ----- 22. Theme toggle styling ----------------------------- */
.ui-theme-toggle{position:relative}
.ui-theme-toggle .ui-icon-sun,.ui-theme-toggle .ui-icon-moon{transition:opacity .15s,transform .15s}
[data-theme="dark"] .ui-theme-toggle .ui-icon-sun{display:block}
[data-theme="dark"] .ui-theme-toggle .ui-icon-moon{display:none}
[data-theme="light"] .ui-theme-toggle .ui-icon-sun,:root:not([data-theme="dark"]) .ui-theme-toggle .ui-icon-sun{display:none}
[data-theme="light"] .ui-theme-toggle .ui-icon-moon,:root:not([data-theme="dark"]) .ui-theme-toggle .ui-icon-moon{display:block}

/* ----- 23. Responsive --------------------------------------- */
@media (max-width:960px){
  .ui-app{grid-template-columns:1fr}
  .ui-sidebar{
    position:fixed;inset:0 auto 0 0;width:264px;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:var(--shadow-lg);
  }
  .ui-sidebar.is-open{transform:none}
  .ui-mobile-toggle{display:inline-flex}
  .ui-sidebar-backdrop{
    position:fixed;inset:0;z-index:39;background:var(--backdrop);
    opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;
  }
  .ui-sidebar-backdrop.is-open{opacity:1;visibility:visible}
  .ui-only-mobile{display:initial}
  .ui-only-desktop{display:none!important}
  .ui-auth--split{grid-template-columns:1fr}
  .ui-auth__aside{display:none}
  .ui-content{padding:1.25rem 1rem 2.5rem}
  .ui-grid--2,.ui-grid--3,.ui-grid--4{grid-template-columns:1fr 1fr}
  .ui-form-row{grid-template-columns:1fr}
  .ui-topbar{padding:.625rem .875rem}
  /* Na mobilu povolíme zalomení mono obsahu uvnitř tabulek (dlouhý JSON metadata,
     URL v `target`, atd.), aby buňka nevytlačila tabulku za viewport.
     Desktop pravidlo (sekce 10) drží datumy/IP na jednom řádku. */
  .ui-table td .ui-mono,
  .ui-table th .ui-mono,
  .ui-table .ui-table__id,
  .ui-table .ui-numbers{
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  /* Pojistka pro tabulky, které i tak přetečou (např. audit log se 6 sloupci):
     scroll uvnitř wrapu místo rozhození celé stránky.
     `min-width:0` na ancestorech je nutné — grid/flex children defaultně počítají
     šířku z `min-content`, takže by se rozšířily a tabulku vytlačily ven z viewportu.
     `max-width:100vw` na samotném scroll wrapu je poslední pojistka, kdyby nějaký
     parent (.ui-card jako přímé dítě page-head apod.) min-width override nedostal. */
  .ui-content,
  .ui-card,
  .ui-table-wrap{min-width:0}
  .ui-table-scroll{overflow-x:auto;max-width:100%}
}
@media (max-width:560px){
  h1{font-size:1.45rem}
  .ui-grid--2,.ui-grid--3,.ui-grid--4{grid-template-columns:1fr}
  .ui-modal{padding:.5rem;align-items:flex-end}
  .ui-modal__dialog{max-height:calc(100vh - 1rem);width:100%;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
  .ui-toasts{left:.5rem;right:.5rem;bottom:.5rem;width:auto}
  .ui-table th,.ui-table td{padding:.55rem .65rem}
  .ui-page-head__actions .ui-btn{flex:1}
}

/* ----- 24. Scrollbar polish --------------------------------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--text-faint)}

/* ----- 25. Project-specific helpers ------------------------- */
/* Group picker — vlastní výběr skupin se search inputem */
.group-picker{
  border:1px solid var(--border-strong);border-radius:var(--radius);
  background:var(--surface);max-height:420px;
  display:flex;flex-direction:column;overflow:hidden;
}
.group-picker__toolbar{
  display:flex;align-items:center;gap:.5rem;
  padding:.45rem .55rem;background:var(--surface-alt);
  border-bottom:1px solid var(--border);
}
.group-picker__search{
  border:1px solid var(--border);border-radius:var(--radius-sm,6px);
  padding:.4rem .6rem;background:var(--surface);
  font-family:'IBM Plex Mono',monospace;font-size:13px;
  flex:1;min-width:0;
}
.group-picker__search:focus{outline:0;border-color:var(--accent)}
.group-picker__count{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  color:var(--text-muted);white-space:nowrap;
  padding:.25rem .55rem;border-radius:999px;background:var(--surface);
  border:1px solid var(--border);
}
.group-picker__list{overflow-y:auto;padding:.25rem 0;flex:1}
.gp-ns{padding:0}
.gp-ns + .gp-ns{border-top:1px solid var(--border)}
.gp-ns__header{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-faint);
  padding:.5rem .875rem;cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:.5rem;user-select:none;
}
.gp-ns__header::-webkit-details-marker{display:none}
.gp-ns__header::before{
  content:'▸';font-size:10px;color:var(--text-faint);
  transition:transform .12s ease;display:inline-block;
}
.gp-ns[open] > .gp-ns__header::before{transform:rotate(90deg)}
.gp-ns__header:hover{background:var(--surface-hover)}
.gp-ns__header strong{color:var(--text);font-weight:600;flex:1;letter-spacing:0;text-transform:none;font-size:13px}
.gp-ns__count{
  font-size:11px;color:var(--text-muted);
  padding:.1rem .45rem;border-radius:999px;
  background:var(--surface-alt);border:1px solid var(--border);
}
.gp-ns__body{padding:.1rem 0 .4rem}
.gp-group{
  display:flex;align-items:baseline;gap:.5rem;
  padding:.3rem .875rem .3rem 2rem;cursor:pointer;line-height:1.4;
  color:var(--text);font-size:13px;
}
.gp-group:hover{background:var(--surface-hover)}
.gp-group input{width:auto;flex:0 0 auto;margin:0;accent-color:var(--accent)}
.gp-group__name{font-family:'IBM Plex Mono',monospace;font-size:12.5px}
.gp-group__desc{color:var(--text-muted);font-size:12px}

/* Pre / code block — větší formátovaný block */
.ui-pre{
  background:var(--surface-sunken);border:1px solid var(--border);
  border-radius:var(--radius);padding:.75rem .875rem;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;line-height:1.55;
  color:var(--text);overflow-x:auto;white-space:pre;
}
.ui-pre--wrap{white-space:pre-wrap;word-break:break-all}

/* Definition list — key/value table */
.ui-dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1rem;font-size:13.5px}
.ui-dl dt{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);padding-top:2px;white-space:nowrap}
.ui-dl dd{color:var(--text);margin:0;min-width:0;word-break:break-word}
@media (max-width:560px){
  .ui-dl{grid-template-columns:1fr;gap:.25rem 0}
  .ui-dl dt{margin-top:.5rem}
}

/* OTP / centered digit input */
.ui-otp{
  font-family:'IBM Plex Mono',monospace !important;font-size:22px !important;
  letter-spacing:.4em;text-align:center;height:52px;
}

/* Hero (landing) */
.ui-hero{
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-hover) 100%);
  color:var(--accent-fg);
  border-radius:var(--radius-lg);
  padding:3rem 2rem;margin-bottom:1.75rem;
  position:relative;overflow:hidden;
}
.ui-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 80% 20%,rgba(255,255,255,.12) 0%,transparent 50%),
    radial-gradient(circle at 10% 90%,rgba(255,255,255,.08) 0%,transparent 50%);
}
.ui-hero__inner{position:relative;max-width:680px}
.ui-hero__kicker{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;opacity:.85;margin-bottom:.625rem;
  padding:.25rem .55rem;border:1px solid rgba(255,255,255,.25);border-radius:99px;
}
.ui-hero h1{font-size:2.25rem;line-height:1.15;margin:0 0 .6rem;letter-spacing:-.02em;color:inherit}
.ui-hero p{margin:0 0 1.25rem;font-size:15px;line-height:1.55;opacity:.92;max-width:560px;color:inherit}
.ui-hero__actions{display:flex;gap:.5rem;flex-wrap:wrap}
.ui-hero__actions .ui-btn{background:#fff;color:var(--accent);border-color:#fff}
.ui-hero__actions .ui-btn:hover{background:rgba(255,255,255,.92)}
.ui-hero__actions .ui-btn--soft{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.35);backdrop-filter:blur(6px)}
.ui-hero__actions .ui-btn--soft:hover{background:rgba(255,255,255,.28)}
@media (max-width:560px){
  .ui-hero{padding:2rem 1.25rem}
  .ui-hero h1{font-size:1.75rem}
}

/* Endpoint list — landing */
.ui-endpoints{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.75rem}
.ui-endpoint{
  display:flex;flex-direction:column;gap:.25rem;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:.875rem 1rem;color:var(--text);text-decoration:none;
  transition:border-color .15s,background .15s;
}
.ui-endpoint:hover{border-color:var(--accent);background:var(--surface-hover);text-decoration:none}
.ui-endpoint code{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--accent);background:transparent;padding:0}
.ui-endpoint span{font-size:12px;color:var(--text-muted)}