/* ============================================================================
   NAUTIKA UI/UX FRAMEWORK  ·  components.css
   All interactive components. Requires nautika.core.css.
   ========================================================================== */

/* ICON ===================================================================== */
.nk-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.25em;height:1.25em;line-height:1;vertical-align:-.2em;flex-shrink:0;
}
.nk-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* Material Symbols set */
.nk-icon.material-symbols-outlined,.material-symbols-outlined{
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;vertical-align:-.22em}
.nk-icon-sm{font-size:.9rem}.nk-icon-lg{font-size:1.6rem}.nk-icon-xl{font-size:2.4rem}
.nk-icon-spin{animation:nk-spin 1.1s linear infinite}

/* BUTTONS ================================================================== */
.nk-btn{
  --_bg:var(--nk-primary);--_fg:#fff;--_bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--nk-font-display);font-weight:700;font-size:var(--nk-text-sm);
  line-height:1;letter-spacing:.01em;text-align:center;white-space:nowrap;
  padding:.85em 1.5em;border-radius:var(--nk-radius-sm);border:1.5px solid var(--_bd);
  background:var(--_bg);color:var(--_fg);cursor:pointer;user-select:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform var(--nk-dur-fast) var(--nk-ease),box-shadow var(--nk-dur) var(--nk-ease),
    background var(--nk-dur-fast),filter var(--nk-dur-fast);position:relative;overflow:hidden;
}
.nk-btn:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--nk-shadow-sm)}
.nk-btn:active{transform:translateY(1px) scale(.99)}
.nk-btn:disabled,.nk-btn.nk-disabled{opacity:.5;pointer-events:none}
/* ripple */
.nk-btn::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.5) 0%,transparent 45%);opacity:0;transition:opacity .5s}
.nk-btn:active::after{opacity:1;transition:none}
/* variants */
.nk-btn-primary  {--_bg:var(--nk-primary);--_fg:#fff}
.nk-btn-secondary{--_bg:var(--nk-secondary);--_fg:var(--nk-ink)}
.nk-btn-success  {--_bg:var(--nk-success);--_fg:#fff}
.nk-btn-warning  {--_bg:var(--nk-warning);--_fg:var(--nk-ink)}
.nk-btn-error    {--_bg:var(--nk-error);--_fg:#fff}
.nk-btn-dark     {--_bg:var(--nk-ink);--_fg:#fff}
.nk-btn-light    {--_bg:var(--nk-surface-2);--_fg:var(--nk-ink);--_bd:var(--nk-line)}
/* outline */
.nk-btn-outline  {--_bg:transparent;--_fg:var(--nk-primary-600);--_bd:var(--nk-primary);box-shadow:none}
.nk-btn-outline:hover{--_bg:var(--nk-primary-50);filter:none}
.nk-btn-outline.nk-btn-error{--_fg:var(--nk-error-700);--_bd:var(--nk-error)}
.nk-btn-outline.nk-btn-success{--_fg:var(--nk-success-700);--_bd:var(--nk-success)}
/* ghost / text */
.nk-btn-ghost{--_bg:transparent;--_fg:var(--nk-ink-soft);--_bd:transparent}
.nk-btn-ghost:hover{--_bg:var(--nk-surface-2);filter:none}
.nk-btn-link{--_bg:transparent;--_fg:var(--nk-primary-600);--_bd:transparent;padding-inline:.25em;text-decoration:underline;text-underline-offset:3px}
.nk-btn-link:hover{box-shadow:none}
.nk-btn-ghost,.nk-btn-link{box-shadow:none}
/* gradient (two-color, set via style: --c1 --c2) */
.nk-btn-gradient{--c1:var(--nk-primary);--c2:var(--nk-reef,#00d4c8);--_fg:#fff;--_bd:transparent;
  background:linear-gradient(120deg,var(--c1),var(--c2));background-size:160% 160%;background-position:0 0;
  transition:background-position .5s var(--nk-ease),transform var(--nk-dur-fast),box-shadow var(--nk-dur)}
.nk-btn-gradient:hover{background-position:100% 0;box-shadow:var(--nk-shadow-primary);filter:none}
/* sizes */
.nk-btn-xs{font-size:var(--nk-text-xs);padding:.5em .85em}
.nk-btn-sm{font-size:var(--nk-text-xs);padding:.65em 1.1em}
.nk-btn-lg{font-size:var(--nk-text-base);padding:.95em 1.8em}
.nk-btn-xl{font-size:var(--nk-text-lg);padding:1.1em 2.2em}
.nk-btn-block{display:flex;width:100%}
.nk-btn-pill{border-radius:var(--nk-radius-pill)}
/* icon button */
.nk-btn-icon{padding:.7em;aspect-ratio:1;border-radius:var(--nk-radius-sm)}
.nk-btn-icon.nk-btn-pill{border-radius:50%}
.nk-btn-icon.nk-btn-lg{padding:.85em}
/* button group */
.nk-btn-group{display:inline-flex}
.nk-btn-group .nk-btn{border-radius:0;border-right-width:0}
.nk-btn-group .nk-btn:first-child{border-radius:var(--nk-radius-sm) 0 0 var(--nk-radius-sm)}
.nk-btn-group .nk-btn:last-child{border-radius:0 var(--nk-radius-sm) var(--nk-radius-sm) 0;border-right-width:1.5px}

/* BADGE ==================================================================== */
.nk-badge{display:inline-flex;align-items:center;gap:.35em;
  font-family:var(--nk-font-display);font-weight:700;font-size:var(--nk-text-xs);line-height:1;
  padding:.4em .7em;border-radius:var(--nk-radius-pill);background:var(--nk-primary);color:#fff;letter-spacing:.02em}
.nk-badge-secondary{background:var(--nk-secondary);color:var(--nk-ink)}
.nk-badge-success{background:var(--nk-success);color:#fff}
.nk-badge-warning{background:var(--nk-warning);color:var(--nk-ink)}
.nk-badge-error{background:var(--nk-error);color:#fff}
.nk-badge-neutral{background:var(--nk-surface-2);color:var(--nk-ink-soft);border:1px solid var(--nk-line)}
.nk-badge-soft{background:var(--nk-primary-50);color:var(--nk-primary-700)}
.nk-badge-soft.nk-badge-success{background:var(--nk-success-50);color:var(--nk-success-700)}
.nk-badge-soft.nk-badge-warning{background:var(--nk-warning-50);color:var(--nk-warning-700)}
.nk-badge-soft.nk-badge-error{background:var(--nk-error-50);color:var(--nk-error-700)}
.nk-badge-dot{width:.6em;height:.6em;padding:0;border-radius:50%}
.nk-badge-outline{background:transparent;border:1.5px solid currentColor;color:var(--nk-primary)}
/* badge positioned on avatar/icon */
.nk-badge-float{position:absolute;top:-4px;right:-4px;border:2px solid var(--nk-surface);min-width:1.1rem;height:1.1rem;justify-content:center;padding:0 .3em}
/* let a floating badge escape a button's overflow clip so it stays fully visible */
.nk-btn:has(.nk-badge-float){overflow:visible}

/* AVATAR =================================================================== */
.nk-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;border-radius:50%;overflow:visible;flex-shrink:0;
  font-family:var(--nk-font-display);font-weight:700;color:#fff;background:var(--nk-grad-ocean)}
.nk-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.nk-avatar-xs{width:1.75rem;height:1.75rem;font-size:.7rem}
.nk-avatar-sm{width:2.25rem;height:2.25rem;font-size:.8rem}
.nk-avatar-lg{width:3.75rem;height:3.75rem;font-size:1.25rem}
.nk-avatar-xl{width:5.5rem;height:5.5rem;font-size:1.8rem}
.nk-avatar-square{border-radius:var(--nk-radius)}
.nk-avatar-square img{border-radius:var(--nk-radius)}
.nk-avatar-ring{box-shadow:0 0 0 3px var(--nk-surface),0 0 0 5px var(--nk-primary)}
.nk-avatar-status::after{content:"";position:absolute;bottom:1px;right:1px;width:28%;height:28%;
  border-radius:50%;background:var(--nk-success);border:2px solid var(--nk-surface)}
.nk-avatar-status.nk-offline::after{background:var(--nk-faint)}
.nk-avatar-status.nk-busy::after{background:var(--nk-error)}
.nk-avatar-group{display:inline-flex}
.nk-avatar-group .nk-avatar{border:3px solid var(--nk-surface);margin-left:-.85rem}
.nk-avatar-group .nk-avatar:first-child{margin-left:0}

/* CARD ===================================================================== */
.nk-card{position:relative;display:flex;flex-direction:column;background:var(--nk-surface);
  border:1px solid var(--nk-line);border-radius:var(--nk-radius-lg);overflow:hidden;
  box-shadow:var(--nk-shadow-xs);transition:transform var(--nk-dur) var(--nk-ease-out),box-shadow var(--nk-dur) var(--nk-ease-out),border-color var(--nk-dur)}
.nk-card-straight{border-radius:0}
.nk-card-sharp{border-radius:var(--nk-radius-xs)}
.nk-card-flat{box-shadow:none}
.nk-card-raised{box-shadow:var(--nk-shadow)}
.nk-card-float{box-shadow:var(--nk-shadow-lg)}
.nk-card-hover:hover{transform:translateY(-4px);box-shadow:var(--nk-shadow-lg);border-color:var(--nk-line-strong)}
.nk-card-hover-glow:hover{box-shadow:var(--nk-shadow-primary)}
.nk-card-body{padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.nk-card-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--nk-line);font-family:var(--nk-font-display);font-weight:700}
.nk-card-footer{padding:1rem 1.5rem;border-top:1px solid var(--nk-line);background:var(--nk-surface-2);
  display:flex;align-items:center;gap:.75rem}
.nk-card-title{font-family:var(--nk-font-display);font-weight:700;font-size:var(--nk-text-lg);color:var(--nk-ink)}
.nk-card-subtitle{color:var(--nk-muted);font-size:var(--nk-text-sm)}
/* image card */
.nk-card-media{position:relative;overflow:hidden;aspect-ratio:16/10}
.nk-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--nk-ease-out)}
.nk-card-hover:hover .nk-card-media img{transform:scale(1.07)}
.nk-card-media-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.5rem;color:#fff;background:linear-gradient(to top,rgba(8,32,51,.82) 0%,rgba(8,32,51,.1) 60%,transparent 100%)}
.nk-card-media-overlay .nk-card-title{color:#fff}
/* horizontal card */
.nk-card-horizontal{flex-direction:row}
.nk-card-horizontal .nk-card-media{aspect-ratio:auto;width:40%;flex-shrink:0}
@media(max-width:640px){.nk-card-horizontal{flex-direction:column}.nk-card-horizontal .nk-card-media{width:100%;aspect-ratio:16/10}}
/* sizes */
.nk-card-sm .nk-card-body{padding:1rem}
.nk-card-lg .nk-card-body{padding:2.25rem}

/* ALERT ==================================================================== */
.nk-alert{display:flex;align-items:flex-start;gap:.85rem;padding:1rem 1.15rem;
  border-radius:var(--nk-radius);background:var(--nk-primary-50);color:var(--nk-primary-900);
  border:1px solid var(--nk-primary-200);border-left-width:4px;position:relative}
.nk-alert .nk-icon{font-size:1.3rem;flex-shrink:0;margin-top:.05rem}
.nk-alert-title{font-family:var(--nk-font-display);font-weight:700;margin-bottom:.15rem}
.nk-alert-body{flex:1;font-size:var(--nk-text-sm)}
.nk-alert-close{margin-left:.5rem;color:inherit;opacity:.6;cursor:pointer;transition:opacity var(--nk-dur-fast)}
.nk-alert-close:hover{opacity:1}
.nk-alert-success{background:var(--nk-success-50);color:var(--nk-success-700);border-color:var(--nk-success)}
.nk-alert-warning{background:var(--nk-warning-50);color:var(--nk-warning-700);border-color:var(--nk-warning)}
.nk-alert-error{background:var(--nk-error-50);color:var(--nk-error-700);border-color:var(--nk-error)}
.nk-alert-info{background:var(--nk-primary-50);color:var(--nk-primary-700);border-color:var(--nk-primary)}
.nk-alert-solid{color:#fff;border:none}
.nk-alert-solid.nk-alert-success{background:var(--nk-success-500)}
.nk-alert-solid.nk-alert-warning{background:var(--nk-warning-500);color:var(--nk-ink)}
.nk-alert-solid.nk-alert-error{background:var(--nk-error-500)}
.nk-alert-solid.nk-alert-info{background:var(--nk-primary-500)}
.nk-alert.nk-closing{animation:nk-fade var(--nk-dur) reverse forwards}

/* DIVIDER ================================================================== */
.nk-divider{border:none;border-top:1px solid var(--nk-line);margin-block:1.5rem}
.nk-divider-dashed{border-top-style:dashed}
.nk-divider-dotted{border-top-style:dotted}
.nk-divider-thick{border-top-width:3px}
.nk-divider-gradient{height:2px;border:none;background:var(--nk-grad-ocean);opacity:.6}
.nk-divider-soft{border-color:var(--nk-surface-2)}
.nk-divider-vertical{border:none;border-left:1px solid var(--nk-line);width:1px;height:auto;align-self:stretch;margin-inline:1rem;margin-block:0}
.nk-divider-text{display:flex;align-items:center;gap:1rem;color:var(--nk-muted);font-size:var(--nk-text-sm);
  font-family:var(--nk-font-display);font-weight:600;margin-block:1.5rem}
.nk-divider-text::before,.nk-divider-text::after{content:"";flex:1;height:1px;background:var(--nk-line)}
.nk-divider-icon{width:2.4rem;height:2.4rem;border-radius:50%;background:var(--nk-surface-2);
  display:flex;align-items:center;justify-content:center;color:var(--nk-primary)}

/* DESCRIPTION LIST ========================================================= */
.nk-dl{display:grid;grid-template-columns:max-content 1fr;gap:.6rem 1.5rem}
.nk-dl dt{font-family:var(--nk-font-display);font-weight:600;color:var(--nk-muted);font-size:var(--nk-text-sm)}
.nk-dl dd{color:var(--nk-ink);font-weight:500}
.nk-dl-stacked{display:block}
.nk-dl-stacked dt{margin-top:.85rem}
.nk-dl-divided dt,.nk-dl-divided dd{padding-block:.7rem;border-bottom:1px solid var(--nk-line)}
.nk-dl-inline{grid-template-columns:none;display:flex;flex-wrap:wrap;gap:.4rem 2rem}
.nk-dl-inline div{display:flex;flex-direction:column}

/* BREADCRUMB =============================================================== */
.nk-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--nk-text-sm);color:var(--nk-muted)}
.nk-breadcrumb a{color:var(--nk-muted);font-weight:500}
.nk-breadcrumb a:hover{color:var(--nk-primary-600)}
.nk-breadcrumb li{display:flex;align-items:center;gap:.5rem}
.nk-breadcrumb li[aria-current],.nk-breadcrumb li:last-child{color:var(--nk-ink);font-weight:600}
.nk-breadcrumb li:not(:last-child)::after{content:"/";color:var(--nk-faint)}
.nk-breadcrumb-chevron li:not(:last-child)::after{content:"›";font-size:1.2em;line-height:1}
.nk-breadcrumb-arrow li:not(:last-child)::after{content:"→"}
.nk-breadcrumb-dot li:not(:last-child)::after{content:"•"}
.nk-breadcrumb-pill{background:var(--nk-surface);border:1px solid var(--nk-line);padding:.45rem 1rem;border-radius:var(--nk-radius-pill)}

/* SEARCH BOX =============================================================== */
.nk-search{position:relative;display:inline-flex;align-items:center;width:100%;max-width:420px}
.nk-search input{width:100%;padding:.55rem 3rem .55rem 1.1rem;border:1.5px solid var(--nk-line);
  border-radius:var(--nk-radius-pill);background:var(--nk-surface);font-size:var(--nk-text-sm);
  transition:border-color var(--nk-dur-fast),box-shadow var(--nk-dur-fast)}
.nk-search input:focus{outline:none;border-color:var(--nk-primary);box-shadow:0 0 0 4px var(--nk-primary-50)}
.nk-search-btn{position:absolute;right:.3rem;top:50%;transform:translateY(-50%);
  width:2rem;height:2rem;border-radius:50%;background:var(--nk-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:background var(--nk-dur-fast),transform var(--nk-dur-fast)}
.nk-search-btn:hover{background:var(--nk-primary-600);transform:translateY(-50%) scale(1.06)}
.nk-search-flush input{padding-left:2.8rem}
.nk-search-flush .nk-search-icon-left{position:absolute;left:1rem;color:var(--nk-muted);pointer-events:none}
.nk-search-square input{border-radius:var(--nk-radius-sm)}
.nk-search-square .nk-search-btn{border-radius:var(--nk-radius-xs)}

/* FORMS ==================================================================== */
.nk-field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.nk-label{font-family:var(--nk-font-display);font-weight:600;font-size:var(--nk-text-sm);color:var(--nk-ink-soft)}
.nk-label .nk-req{color:var(--nk-error)}
.nk-hint{font-size:var(--nk-text-xs);color:var(--nk-muted)}
.nk-error-text{font-size:var(--nk-text-xs);color:var(--nk-error-700);display:flex;align-items:center;gap:.3rem}
.nk-input,.nk-select,.nk-textarea{
  width:100%;padding:.5rem .8rem;font-size:var(--nk-text-sm);color:var(--nk-ink);line-height:1.45;
  background:var(--nk-surface);border:1.5px solid var(--nk-line);border-radius:var(--nk-radius-sm);
  transition:border-color var(--nk-dur-fast),box-shadow var(--nk-dur-fast),background var(--nk-dur-fast)}
.nk-input::placeholder,.nk-textarea::placeholder{color:var(--nk-faint)}
.nk-input:hover,.nk-select:hover,.nk-textarea:hover{border-color:var(--nk-line-strong)}
.nk-input:focus,.nk-select:focus,.nk-textarea:focus{outline:none;border-color:var(--nk-primary);
  box-shadow:0 0 0 4px var(--nk-primary-50);background:var(--nk-white)}
.nk-textarea{resize:vertical;min-height:6rem}
.nk-input:disabled,.nk-select:disabled{background:var(--nk-surface-2);color:var(--nk-faint);cursor:not-allowed}
.nk-input.nk-invalid,.nk-select.nk-invalid{border-color:var(--nk-error);box-shadow:0 0 0 4px var(--nk-error-50)}
.nk-input.nk-valid{border-color:var(--nk-success)}
.nk-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b8295' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}
.nk-input-sm{padding:.35rem .6rem;font-size:var(--nk-text-xs)}
.nk-input-lg{padding:.75rem 1rem;font-size:var(--nk-text-base)}
/* MudBlazor-style floating label */
.nk-float{position:relative}
.nk-float .nk-input,.nk-float .nk-select{padding-top:1.15rem;padding-bottom:.3rem}
.nk-float label{position:absolute;left:.8rem;top:.7rem;color:var(--nk-muted);font-size:var(--nk-text-sm);
  pointer-events:none;transition:all var(--nk-dur-fast) var(--nk-ease);transform-origin:left}
.nk-float .nk-input:focus+label,.nk-float .nk-input:not(:placeholder-shown)+label,
.nk-float .nk-select:focus+label,.nk-float .nk-select:valid+label{
  top:.4rem;font-size:.68rem;color:var(--nk-primary-600);font-weight:600}
/* input with affix */
.nk-input-group{display:flex;align-items:stretch}
.nk-input-group .nk-input{border-radius:0}
.nk-input-group>:first-child{border-radius:var(--nk-radius-sm) 0 0 var(--nk-radius-sm)}
.nk-input-group>:last-child{border-radius:0 var(--nk-radius-sm) var(--nk-radius-sm) 0}
.nk-input-affix{display:flex;align-items:center;padding:0 1rem;background:var(--nk-surface-2);
  border:1.5px solid var(--nk-line);color:var(--nk-muted);white-space:nowrap}
/* checkbox & radio */
.nk-check,.nk-radio{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;font-size:var(--nk-text-sm);user-select:none}
.nk-check input,.nk-radio input{position:absolute;opacity:0;width:0;height:0}
.nk-check .nk-box,.nk-radio .nk-box{width:1.25rem;height:1.25rem;border:2px solid var(--nk-line-strong);
  background:var(--nk-surface);display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all var(--nk-dur-fast) var(--nk-ease)}
.nk-check .nk-box{border-radius:6px}.nk-radio .nk-box{border-radius:50%}
.nk-check .nk-box::after{content:"";width:.34rem;height:.6rem;border:solid #fff;border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg) scale(0);transition:transform var(--nk-dur-fast) var(--nk-ease-spring);margin-bottom:2px}
.nk-radio .nk-box::after{content:"";width:.55rem;height:.55rem;border-radius:50%;background:#fff;transform:scale(0);transition:transform var(--nk-dur-fast) var(--nk-ease-spring)}
.nk-check input:checked+.nk-box,.nk-radio input:checked+.nk-box{background:var(--nk-primary);border-color:var(--nk-primary)}
.nk-check input:checked+.nk-box::after,.nk-radio input:checked+.nk-box::after{transform:rotate(45deg) scale(1)}
.nk-radio input:checked+.nk-box::after{transform:scale(1)}
.nk-check input:focus-visible+.nk-box,.nk-radio input:focus-visible+.nk-box{box-shadow:0 0 0 4px var(--nk-primary-50)}
/* switch (radio-type select toggle) */
.nk-switch{display:inline-flex;align-items:center;gap:.7rem;cursor:pointer;font-size:var(--nk-text-sm);user-select:none}
.nk-switch input{position:absolute;opacity:0}
.nk-switch .nk-track{width:2.9rem;height:1.6rem;border-radius:999px;background:var(--nk-line-strong);
  position:relative;transition:background var(--nk-dur) var(--nk-ease);flex-shrink:0}
.nk-switch .nk-track::after{content:"";position:absolute;top:2px;left:2px;width:1.2rem;height:1.2rem;
  border-radius:50%;background:#fff;box-shadow:var(--nk-shadow-sm);transition:transform var(--nk-dur) var(--nk-ease-spring)}
.nk-switch input:checked+.nk-track{background:var(--nk-primary)}
.nk-switch input:checked+.nk-track::after{transform:translateX(1.3rem)}
.nk-switch input:focus-visible+.nk-track{box-shadow:0 0 0 4px var(--nk-primary-50)}
.nk-switch-success input:checked+.nk-track{background:var(--nk-success)}
/* segmented switch group (radio buttons styled as segment toggle) */
.nk-segment{display:inline-flex;background:var(--nk-surface-2);border:1px solid var(--nk-line);border-radius:var(--nk-radius-pill);padding:.25rem}
.nk-segment label{position:relative;padding:.5rem 1.1rem;border-radius:var(--nk-radius-pill);font-size:var(--nk-text-sm);
  font-weight:600;color:var(--nk-muted);cursor:pointer;transition:color var(--nk-dur-fast);z-index:1}
.nk-segment input{position:absolute;opacity:0}
.nk-segment label:has(input:checked){background:var(--nk-surface);color:var(--nk-primary-700);box-shadow:var(--nk-shadow-sm)}
/* range / stepper */
.nk-range{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;background:var(--nk-line);outline:none}
.nk-range::-webkit-slider-thumb{-webkit-appearance:none;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--nk-primary);cursor:pointer;box-shadow:var(--nk-shadow-sm);border:3px solid #fff}
.nk-range::-moz-range-thumb{width:1.3rem;height:1.3rem;border-radius:50%;background:var(--nk-primary);cursor:pointer;border:3px solid #fff}
.nk-stepper{display:inline-flex;align-items:center;border:1.5px solid var(--nk-line);border-radius:var(--nk-radius-sm);overflow:hidden}
.nk-stepper button{width:2.1rem;height:2.1rem;font-size:1.15rem;color:var(--nk-primary);background:var(--nk-surface);transition:background var(--nk-dur-fast)}
.nk-stepper button:hover{background:var(--nk-primary-50)}
.nk-stepper input{width:2.6rem;text-align:center;border:none;border-inline:1.5px solid var(--nk-line);padding:.4rem 0;font-weight:700;font-family:var(--nk-font-display)}
.nk-stepper input:focus{outline:none}

/* DROPDOWN ================================================================= */
.nk-dropdown{position:relative;display:inline-block}
.nk-dropdown-toggle{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .8rem;
  background:var(--nk-surface);border:1.5px solid var(--nk-line);border-radius:var(--nk-radius-sm);
  font-size:var(--nk-text-sm);font-weight:500;cursor:pointer;transition:border-color var(--nk-dur-fast),box-shadow var(--nk-dur-fast);min-width:180px;justify-content:space-between}
.nk-dropdown-toggle:hover{border-color:var(--nk-line-strong)}
.nk-dropdown.nk-open .nk-dropdown-toggle{border-color:var(--nk-primary);box-shadow:0 0 0 4px var(--nk-primary-50)}
.nk-dropdown-toggle .nk-caret{transition:transform var(--nk-dur) var(--nk-ease);color:var(--nk-muted)}
.nk-dropdown.nk-open .nk-caret{transform:rotate(180deg)}
.nk-dropdown-menu{position:absolute;top:calc(100% + .5rem);left:0;min-width:100%;background:var(--nk-surface);
  border:1px solid var(--nk-line);border-radius:var(--nk-radius);box-shadow:var(--nk-shadow-lg);
  padding:.4rem;z-index:var(--nk-z-dropdown);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);
  transform-origin:top;transition:opacity var(--nk-dur) var(--nk-ease),transform var(--nk-dur) var(--nk-ease-out),visibility var(--nk-dur);max-height:320px;overflow-y:auto}
.nk-dropdown.nk-open .nk-dropdown-menu{opacity:1;visibility:visible;transform:none}
.nk-dropdown-menu.nk-dropdown-right{left:auto;right:0}
.nk-dropdown-item{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;border-radius:var(--nk-radius-sm);
  font-size:var(--nk-text-sm);color:var(--nk-ink-soft);cursor:pointer;transition:background var(--nk-dur-fast),color var(--nk-dur-fast)}
.nk-dropdown-item:hover{background:var(--nk-primary-50);color:var(--nk-primary-700)}
.nk-dropdown-item.nk-selected{background:var(--nk-primary-50);color:var(--nk-primary-700);font-weight:600}
.nk-dropdown-item.nk-selected::after{content:"check";font-family:'Material Symbols Outlined';margin-left:auto}
.nk-dropdown-label{padding:.5rem .8rem .25rem;font-size:var(--nk-text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--nk-faint);font-weight:700}
.nk-dropdown-divider{height:1px;background:var(--nk-line);margin:.4rem 0}
/* multiselect chips */
.nk-multiselect .nk-dropdown-toggle{flex-wrap:wrap;min-height:2.9rem;height:auto;gap:.35rem}
.nk-chip{display:inline-flex;align-items:center;gap:.3rem;background:var(--nk-primary-50);color:var(--nk-primary-700);
  font-size:var(--nk-text-xs);font-weight:600;padding:.25rem .6rem;border-radius:var(--nk-radius-pill)}
.nk-chip .nk-chip-x{cursor:pointer;opacity:.7;font-size:1rem;line-height:1}
.nk-chip .nk-chip-x:hover{opacity:1}
.nk-dropdown-search{padding:.4rem}
.nk-dropdown-search input{width:100%;padding:.5rem .75rem;border:1px solid var(--nk-line);border-radius:var(--nk-radius-sm);font-size:var(--nk-text-sm)}

/* ACCORDION ================================================================ */
.nk-accordion{display:flex;flex-direction:column;gap:.6rem}
.nk-accordion-item{border:1px solid var(--nk-line);border-radius:var(--nk-radius);background:var(--nk-surface);overflow:hidden;transition:box-shadow var(--nk-dur)}
.nk-accordion-item.nk-open{box-shadow:var(--nk-shadow-sm)}
.nk-accordion-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  padding:1.1rem 1.35rem;font-family:var(--nk-font-display);font-weight:600;font-size:var(--nk-text-base);
  color:var(--nk-ink);cursor:pointer;transition:background var(--nk-dur-fast),color var(--nk-dur-fast);text-align:left}
.nk-accordion-header:hover{background:var(--nk-surface-2)}
.nk-accordion-item.nk-open .nk-accordion-header{color:var(--nk-primary-700)}
.nk-accordion-icon{transition:transform var(--nk-dur) var(--nk-ease);color:var(--nk-muted);flex-shrink:0}
.nk-accordion-item.nk-open .nk-accordion-icon{transform:rotate(180deg);color:var(--nk-primary)}
.nk-accordion-content{max-height:0;overflow:hidden;transition:max-height var(--nk-dur) var(--nk-ease)}
.nk-accordion-content-inner{padding:0 1.35rem 1.35rem;color:var(--nk-ink-soft);font-size:var(--nk-text-sm)}
.nk-accordion-flush .nk-accordion-item{border-radius:0;border-left:0;border-right:0;border-top:0}
.nk-accordion-separated{gap:.85rem}

/* TABS ===================================================================== */
.nk-tabs{display:flex;flex-direction:column}
.nk-tabs-nav{display:flex;gap:.25rem;position:relative;border-bottom:1px solid var(--nk-line)}
.nk-tab{position:relative;padding:.85rem 1.25rem;font-family:var(--nk-font-display);font-weight:600;
  font-size:var(--nk-text-sm);color:var(--nk-muted);cursor:pointer;background:none;
  transition:color var(--nk-dur-fast);white-space:nowrap}
.nk-tab:hover{color:var(--nk-ink)}
.nk-tab.nk-active{color:var(--nk-primary-700)}
.nk-tabs-ink{position:absolute;bottom:-1px;height:3px;background:var(--nk-primary);border-radius:3px;
  transition:left var(--nk-dur) var(--nk-ease-out),width var(--nk-dur) var(--nk-ease-out)}
.nk-tabs-panels{position:relative;padding-top:1.4rem}
.nk-tab-panel{display:none;animation:nk-fade-up var(--nk-dur-slow) var(--nk-ease-out)}
.nk-tab-panel.nk-active{display:block}
/* bordered container */
.nk-tabs-bordered{border:1px solid var(--nk-line);border-radius:var(--nk-radius-lg);overflow:hidden}
.nk-tabs-bordered .nk-tabs-nav{background:var(--nk-surface-2);padding:0 .5rem}
.nk-tabs-bordered .nk-tabs-panels{padding:1.6rem}
/* vertical */
.nk-tabs-vertical{flex-direction:row;gap:1.5rem}
.nk-tabs-vertical .nk-tabs-nav{flex-direction:column;border-bottom:none;border-left:1px solid var(--nk-line);gap:.15rem;min-width:180px}
.nk-tabs-vertical .nk-tab{text-align:left}
.nk-tabs-vertical .nk-tabs-ink{bottom:auto;left:-1px;width:3px!important;height:auto;
  transition:top var(--nk-dur) var(--nk-ease-out),height var(--nk-dur) var(--nk-ease-out)}
.nk-tabs-vertical .nk-tabs-panels{flex:1;padding-top:0}
@media(max-width:640px){.nk-tabs-vertical{flex-direction:column}.nk-tabs-vertical .nk-tabs-nav{flex-direction:row;border-left:none;border-bottom:1px solid var(--nk-line);overflow-x:auto}}

/* PAGINATION =============================================================== */
.nk-pagination{display:inline-flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.nk-page{min-width:2.4rem;height:2.4rem;padding:0 .6rem;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--nk-radius-sm);font-family:var(--nk-font-display);font-weight:600;font-size:var(--nk-text-sm);
  color:var(--nk-ink-soft);background:var(--nk-surface);border:1px solid var(--nk-line);cursor:pointer;
  transition:all var(--nk-dur-fast) var(--nk-ease)}
.nk-page:hover{border-color:var(--nk-primary);color:var(--nk-primary-700);background:var(--nk-primary-50)}
.nk-page.nk-active{background:var(--nk-primary);color:#fff;border-color:var(--nk-primary);box-shadow:var(--nk-shadow-sm)}
.nk-page:disabled,.nk-page.nk-disabled{opacity:.45;pointer-events:none}
.nk-page-ellipsis{border:none;background:none;cursor:default}
.nk-pagination-pill .nk-page{border-radius:var(--nk-radius-pill)}
.nk-pagination-minimal .nk-page{border:none;background:none}
.nk-pagination-minimal .nk-page.nk-active{background:var(--nk-primary-50)}
.nk-pagination-rounded .nk-page{border-radius:50%}

/* TABLE ==================================================================== */
.nk-table-wrap{border:1px solid var(--nk-line);border-radius:var(--nk-radius-lg);background:var(--nk-surface);overflow:hidden}
.nk-table-toolbar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:1rem 1.25rem;border-bottom:1px solid var(--nk-line);background:var(--nk-surface-2)}
.nk-table-scroll{overflow:auto;max-height:none}
.nk-table-scroll.nk-fixed-header{max-height:520px}
.nk-table{width:100%;border-collapse:collapse;font-size:var(--nk-text-sm)}
.nk-table thead th{position:sticky;top:0;z-index:2;background:var(--nk-surface-2);text-align:left;
  font-family:var(--nk-font-display);font-weight:700;color:var(--nk-ink-soft);padding:.9rem 1.1rem;
  white-space:nowrap;border-bottom:2px solid var(--nk-line);font-size:var(--nk-text-xs);text-transform:uppercase;letter-spacing:.04em;user-select:none}
.nk-table tbody td{padding:.85rem 1.1rem;border-bottom:1px solid var(--nk-line);color:var(--nk-ink);vertical-align:middle}
.nk-table tbody tr{transition:background var(--nk-dur-fast)}
.nk-table tbody tr:hover{background:var(--nk-primary-50)}
.nk-table-striped tbody tr:nth-child(even){background:var(--nk-surface-2)}
.nk-table-striped tbody tr:nth-child(even):hover{background:var(--nk-primary-50)}
.nk-table-compact tbody td,.nk-table-compact thead th{padding:.5rem .8rem}
.nk-table-bordered td,.nk-table-bordered th{border:1px solid var(--nk-line)}
.nk-th-sort{cursor:pointer}
.nk-th-sort .nk-sort-ico{font-size:1rem;opacity:.4;vertical-align:middle;transition:opacity var(--nk-dur-fast),transform var(--nk-dur-fast)}
.nk-th-sort:hover .nk-sort-ico{opacity:.8}
.nk-th-sort[data-dir="asc"] .nk-sort-ico{opacity:1;color:var(--nk-primary);transform:rotate(180deg)}
.nk-th-sort[data-dir="desc"] .nk-sort-ico{opacity:1;color:var(--nk-primary)}
.nk-th-filter{margin-top:.4rem}
.nk-th-filter input{width:100%;padding:.3rem .5rem;font-size:var(--nk-text-xs);border:1px solid var(--nk-line);border-radius:var(--nk-radius-xs);font-weight:400;text-transform:none;letter-spacing:0}
.nk-row-group-header td{background:var(--nk-primary-50);font-family:var(--nk-font-display);font-weight:700;color:var(--nk-primary-800);cursor:pointer}
.nk-row-group-header .nk-icon{transition:transform var(--nk-dur)}
.nk-row-group-header.nk-collapsed .nk-icon{transform:rotate(-90deg)}
.nk-col-menu{position:relative}
.nk-col-toggle-list{display:flex;flex-direction:column;gap:.3rem;padding:.3rem}
.nk-col-toggle-list label{display:flex;align-items:center;gap:.5rem;padding:.35rem .5rem;border-radius:var(--nk-radius-xs);font-size:var(--nk-text-sm);cursor:pointer}
.nk-col-toggle-list label:hover{background:var(--nk-surface-2)}
.nk-table-empty{padding:3rem;text-align:center;color:var(--nk-muted)}

/* NAVBAR TOP =============================================================== */
.nk-navbar{position:sticky;top:0;z-index:var(--nk-z-nav);display:flex;align-items:center;gap:1.5rem;
  padding:.8rem var(--nk-gutter);background:rgba(255,255,255,.78);backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);border-bottom:1px solid var(--nk-line);
  transition:box-shadow var(--nk-dur),background var(--nk-dur)}
.nk-navbar.nk-scrolled{box-shadow:var(--nk-shadow-sm)}
.nk-navbar-dark{background:rgba(8,32,51,.82);border-color:rgba(255,255,255,.1)}
.nk-navbar-dark .nk-navbar-link,.nk-navbar-dark .nk-navbar-brand{color:#fff}
.nk-navbar-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--nk-font-display);font-weight:800;
  font-size:var(--nk-text-lg);color:var(--nk-ink);letter-spacing:-.02em}
.nk-navbar-logo{width:2.2rem;height:2.2rem;border-radius:var(--nk-radius-sm);background:var(--nk-grad-ocean);
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.nk-navbar-nav{display:flex;align-items:center;gap:.35rem;margin-left:auto}
.nk-navbar-link{padding:.55rem .9rem;border-radius:var(--nk-radius-sm);font-weight:600;font-size:var(--nk-text-sm);
  color:var(--nk-ink-soft);position:relative;transition:color var(--nk-dur-fast),background var(--nk-dur-fast)}
.nk-navbar-link:hover{color:var(--nk-primary-700);background:var(--nk-primary-50)}
.nk-navbar-link.nk-active{color:var(--nk-primary-700)}
.nk-navbar-link.nk-active::after{content:"";position:absolute;left:50%;bottom:.2rem;transform:translateX(-50%);width:18px;height:3px;border-radius:3px;background:var(--nk-primary)}
.nk-navbar-actions{display:flex;align-items:center;gap:.6rem}
.nk-hamburger{display:none;width:2.6rem;height:2.6rem;border-radius:var(--nk-radius-sm);align-items:center;justify-content:center;color:var(--nk-ink);border:1px solid var(--nk-line)}
@media(max-width:900px){
  .nk-hamburger{display:inline-flex;margin-left:auto;order:3}
  /* backdrop-filter on the bar would make it a containing block for the
     fixed off-canvas drawer — drop it on mobile so the drawer is viewport-relative */
  .nk-navbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--nk-surface)}
  .nk-navbar-backdrop{position:fixed;inset:0;background:var(--nk-overlay);z-index:calc(var(--nk-z-modal) - 1);
    opacity:0;visibility:hidden;transition:opacity var(--nk-dur)}
  .nk-navbar-nav.nk-open ~ .nk-navbar-backdrop,.nk-navbar-backdrop.nk-open{opacity:1;visibility:visible}
  .nk-navbar-nav{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);flex-direction:column;align-items:stretch;
    gap:.25rem;margin:0;padding:5rem 1.25rem 2rem;background:var(--nk-surface);box-shadow:var(--nk-shadow-xl);
    transform:translateX(100%);transition:transform var(--nk-dur) var(--nk-ease-out);z-index:var(--nk-z-modal)}
  .nk-navbar-nav.nk-open{transform:none}
  /* drawer always uses a light surface — force readable link color even if page set inline white */
  .nk-navbar-nav .nk-navbar-link{padding:.9rem 1rem;font-size:var(--nk-text-base);color:var(--nk-ink-soft)!important}
  .nk-navbar-nav .nk-navbar-link.nk-active{color:var(--nk-primary-700)!important}
  .nk-navbar-link.nk-active::after{display:none}
  .nk-navbar-actions{order:2}
}

/* NAV MENU LEFT (admin sidebar) =========================================== */
.nk-layout{display:flex;min-height:100vh}
.nk-sidebar{width:264px;flex-shrink:0;background:var(--nk-ink);color:#cdd;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;transition:width var(--nk-dur) var(--nk-ease);z-index:var(--nk-z-nav)}
.nk-sidebar-brand{display:flex;align-items:center;gap:.65rem;padding:1.25rem 1.35rem;color:#fff;
  font-family:var(--nk-font-display);font-weight:800;font-size:var(--nk-text-lg);border-bottom:1px solid rgba(255,255,255,.08)}
.nk-sidebar-nav{flex:1;overflow-y:auto;padding:1rem .8rem;display:flex;flex-direction:column;gap:.15rem}
.nk-sidebar-section{padding:1rem .8rem .35rem;font-size:var(--nk-text-xs);text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.4);font-weight:700}
.nk-nav-item{position:relative}
.nk-nav-link{display:flex;align-items:center;gap:.8rem;padding:.7rem .85rem;border-radius:var(--nk-radius-sm);
  color:rgba(255,255,255,.72);font-weight:600;font-size:var(--nk-text-sm);cursor:pointer;
  transition:background var(--nk-dur-fast),color var(--nk-dur-fast)}
.nk-nav-link:hover{background:rgba(255,255,255,.08);color:#fff}
.nk-nav-link.nk-active{background:var(--nk-primary);color:#fff;box-shadow:var(--nk-shadow-primary)}
.nk-nav-link .nk-nav-arrow{margin-left:auto;transition:transform var(--nk-dur);font-size:1.1rem;opacity:.7}
.nk-nav-item.nk-open>.nk-nav-link .nk-nav-arrow{transform:rotate(90deg)}
.nk-nav-badge{margin-left:auto;font-size:.65rem;padding:.15rem .45rem;background:var(--nk-error);color:#fff;border-radius:999px;font-weight:700}
.nk-nav-item.nk-open>.nk-nav-link .nk-nav-badge{margin-left:.5rem}
.nk-submenu{max-height:0;overflow:hidden;transition:max-height var(--nk-dur) var(--nk-ease);padding-left:1.1rem}
.nk-nav-item.nk-open>.nk-submenu{max-height:400px}
.nk-submenu .nk-nav-link{font-weight:500;padding:.55rem .85rem;color:rgba(255,255,255,.6)}
.nk-submenu .nk-nav-link::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;flex-shrink:0}
.nk-submenu .nk-nav-link.nk-active{background:rgba(0,153,255,.18);color:#fff;box-shadow:none}
.nk-sidebar-footer{padding:1rem;border-top:1px solid rgba(255,255,255,.08)}
/* collapsed (icon-only) */
.nk-sidebar.nk-collapsed{width:76px}
.nk-sidebar.nk-collapsed .nk-nav-link span:not(.nk-icon):not(.material-symbols-outlined),
.nk-sidebar.nk-collapsed .nk-sidebar-section,
.nk-sidebar.nk-collapsed .nk-nav-arrow,
.nk-sidebar.nk-collapsed .nk-sidebar-brand span{display:none}
.nk-sidebar.nk-collapsed .nk-submenu{display:none}
.nk-main{flex:1;min-width:0;display:flex;flex-direction:column}
.nk-topbar{display:flex;align-items:center;gap:1rem;padding:.85rem 1.5rem;background:var(--nk-surface);border-bottom:1px solid var(--nk-line);position:sticky;top:0;z-index:50}
.nk-content{padding:1.75rem;flex:1}
.nk-sidebar-toggle{width:2.4rem;height:2.4rem;border-radius:var(--nk-radius-sm);display:flex;align-items:center;justify-content:center;color:var(--nk-ink);border:1px solid var(--nk-line)}
@media(max-width:1024px){
  .nk-sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);box-shadow:var(--nk-shadow-xl)}
  .nk-sidebar.nk-mobile-open{transform:none}
  .nk-sidebar.nk-collapsed{width:264px}
  .nk-sidebar.nk-collapsed .nk-nav-link span,.nk-sidebar.nk-collapsed .nk-sidebar-section,
  .nk-sidebar.nk-collapsed .nk-nav-arrow,.nk-sidebar.nk-collapsed .nk-sidebar-brand span{display:revert}
}

/* MODAL ==================================================================== */
.nk-modal-backdrop{position:fixed;inset:0;background:var(--nk-overlay);backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);z-index:var(--nk-z-modal);display:flex;align-items:center;justify-content:center;
  padding:1.25rem;opacity:0;visibility:hidden;transition:opacity var(--nk-dur) var(--nk-ease),visibility var(--nk-dur)}
.nk-modal-backdrop.nk-open{opacity:1;visibility:visible}
.nk-modal{background:var(--nk-surface);border-radius:var(--nk-radius-xl);box-shadow:var(--nk-shadow-xl);
  width:min(540px,100%);max-height:90vh;display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(24px) scale(.96);opacity:0;transition:transform var(--nk-dur) var(--nk-ease-spring),opacity var(--nk-dur)}
.nk-modal-backdrop.nk-open .nk-modal{transform:none;opacity:1}
.nk-modal-sm{width:min(400px,100%)}.nk-modal-lg{width:min(760px,100%)}.nk-modal-xl{width:min(1000px,100%)}
.nk-modal-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.4rem 1.6rem;border-bottom:1px solid var(--nk-line)}
.nk-modal-title{font-family:var(--nk-font-display);font-weight:700;font-size:var(--nk-text-lg)}
.nk-modal-body{padding:1.6rem;overflow-y:auto}
.nk-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:1.2rem 1.6rem;border-top:1px solid var(--nk-line);background:var(--nk-surface-2)}
.nk-modal-close{width:2.2rem;height:2.2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--nk-muted);transition:background var(--nk-dur-fast),color var(--nk-dur-fast)}
.nk-modal-close:hover{background:var(--nk-surface-2);color:var(--nk-ink)}
/* transition variants */
.nk-modal-slide-down .nk-modal{transform:translateY(-60px);align-self:flex-start}
.nk-modal-backdrop.nk-open .nk-modal-slide-down,.nk-modal-slide-down.nk-modal-backdrop.nk-open .nk-modal{transform:none}
.nk-modal-zoom .nk-modal{transform:scale(.7)}
.nk-modal-drawer{align-items:stretch;justify-content:flex-end;padding:0}
.nk-modal-drawer .nk-modal{width:min(440px,100%);max-height:none;height:100vh;border-radius:0;transform:translateX(100%)}
.nk-modal-drawer.nk-open .nk-modal{transform:none}

/* OVERLAY ================================================================== */
.nk-overlay-parent{position:relative;overflow:hidden}
.nk-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:.5rem;color:#fff;padding:1.5rem;opacity:0;transition:opacity var(--nk-dur) var(--nk-ease)}
.nk-overlay-default{background:linear-gradient(to top,rgba(8,32,51,.85),rgba(8,32,51,.2))}
.nk-overlay-primary{background:linear-gradient(135deg,rgba(0,153,255,.85),rgba(0,212,212,.7))}
.nk-overlay-blur{background:rgba(8,32,51,.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.nk-overlay-bottom{justify-content:flex-end;align-items:flex-start;text-align:left}
.nk-overlay-parent:hover .nk-overlay,.nk-overlay.nk-always{opacity:1}
.nk-overlay-slide{transform:translateY(20px);transition:opacity var(--nk-dur),transform var(--nk-dur) var(--nk-ease-out)}
.nk-overlay-parent:hover .nk-overlay-slide{transform:none}

/* PROGRESS ================================================================= */
.nk-progress{width:100%;height:.6rem;background:var(--nk-line);border-radius:999px;overflow:hidden}
.nk-progress-bar{height:100%;background:var(--nk-grad-ocean);border-radius:999px;width:0;transition:width var(--nk-dur-slow) var(--nk-ease)}
.nk-progress-sm{height:.35rem}.nk-progress-lg{height:1rem}
.nk-progress-striped .nk-progress-bar{background-image:linear-gradient(45deg,rgba(255,255,255,.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.25) 75%,transparent 75%);background-size:1rem 1rem}
.nk-progress-animated .nk-progress-bar{animation:nk-wave 1s linear infinite}
.nk-progress-success .nk-progress-bar{background:var(--nk-success)}
.nk-progress-warning .nk-progress-bar{background:var(--nk-warning)}
.nk-progress-error .nk-progress-bar{background:var(--nk-error)}
/* indeterminate */
.nk-progress-indeterminate .nk-progress-bar{width:30%;animation:nk-progress-bar 1.3s var(--nk-ease) infinite}
/* spinner */
.nk-spinner{width:2.5rem;height:2.5rem;border:3px solid var(--nk-primary-100);border-top-color:var(--nk-primary);border-radius:50%;animation:nk-spin .8s linear infinite;display:inline-block}
.nk-spinner-sm{width:1.4rem;height:1.4rem;border-width:2px}.nk-spinner-lg{width:4rem;height:4rem;border-width:4px}
.nk-spinner-dots{display:inline-flex;gap:.4rem}
.nk-spinner-dots span{width:.7rem;height:.7rem;border-radius:50%;background:var(--nk-primary);animation:nk-bounce .9s var(--nk-ease) infinite}
.nk-spinner-dots span:nth-child(2){animation-delay:.12s}.nk-spinner-dots span:nth-child(3){animation-delay:.24s}
/* circular */
.nk-progress-ring{transform:rotate(-90deg)}
.nk-progress-ring circle{fill:none;stroke-width:8;stroke-linecap:round}
.nk-progress-ring .nk-ring-track{stroke:var(--nk-line)}
.nk-progress-ring .nk-ring-fill{stroke:var(--nk-primary);transition:stroke-dashoffset var(--nk-dur-slow) var(--nk-ease)}

/* TOOLTIP ================================================================== */
.nk-tooltip{position:relative;display:inline-flex}
.nk-tooltip::before,.nk-tooltip::after{position:absolute;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--nk-dur-fast) var(--nk-ease),transform var(--nk-dur-fast) var(--nk-ease);z-index:var(--nk-z-tooltip)}
.nk-tooltip::before{content:attr(data-tip);background:var(--nk-ink);color:#fff;font-size:var(--nk-text-xs);
  font-weight:500;padding:.45rem .7rem;border-radius:var(--nk-radius-sm);white-space:nowrap;box-shadow:var(--nk-shadow)}
.nk-tooltip::after{content:"";border:6px solid transparent}
.nk-tooltip:hover::before,.nk-tooltip:hover::after,.nk-tooltip:focus-visible::before,.nk-tooltip:focus-visible::after{opacity:1;visibility:visible}
/* top (default) */
.nk-tooltip::before{bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px)}
.nk-tooltip::after{bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);border-top-color:var(--nk-ink)}
.nk-tooltip:hover::before{transform:translateX(-50%)}
/* bottom */
.nk-tooltip-bottom::before{bottom:auto;top:calc(100% + 10px);transform:translateX(-50%) translateY(-4px)}
.nk-tooltip-bottom::after{bottom:auto;top:calc(100% + 4px);border-top-color:transparent;border-bottom-color:var(--nk-ink)}
.nk-tooltip-bottom:hover::before{transform:translateX(-50%)}
/* left */
.nk-tooltip-left::before{bottom:auto;left:auto;right:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(4px)}
.nk-tooltip-left::after{bottom:auto;left:auto;right:calc(100% + 4px);top:50%;transform:translateY(-50%);border-top-color:transparent;border-left-color:var(--nk-ink)}
.nk-tooltip-left:hover::before{transform:translateY(-50%)}
/* right */
.nk-tooltip-right::before{bottom:auto;left:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(-4px)}
.nk-tooltip-right::after{bottom:auto;left:calc(100% + 4px);top:50%;transform:translateY(-50%);border-top-color:transparent;border-right-color:var(--nk-ink)}
.nk-tooltip-right:hover::before{transform:translateY(-50%)}

/* MASONRY ================================================================== */
.nk-masonry{columns:3 280px;column-gap:1.25rem}
.nk-masonry>*{break-inside:avoid;margin-bottom:1.25rem;transition:opacity var(--nk-dur),transform var(--nk-dur) var(--nk-ease-out)}
.nk-masonry-2{columns:2 320px}.nk-masonry-4{columns:4 220px}
.nk-masonry-hidden{display:none}
.nk-filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.nk-filter-chip{padding:.5rem 1.1rem;border-radius:var(--nk-radius-pill);font-size:var(--nk-text-sm);font-weight:600;
  color:var(--nk-ink-soft);background:var(--nk-surface);border:1.5px solid var(--nk-line);cursor:pointer;transition:all var(--nk-dur-fast)}
.nk-filter-chip:hover{border-color:var(--nk-primary)}
.nk-filter-chip.nk-active{background:var(--nk-primary);color:#fff;border-color:var(--nk-primary)}

/* SLIDESHOW ================================================================ */
.nk-slideshow{position:relative;overflow:hidden;border-radius:var(--nk-radius-lg)}
.nk-slides{display:flex;height:100%}
.nk-slide{min-width:100%;position:relative}
.nk-slide img{width:100%;height:100%;object-fit:cover}
/* slide transition */
.nk-slideshow-slide .nk-slides{transition:transform var(--nk-dur-slow) var(--nk-ease-out)}
.nk-slideshow-fade .nk-slides{display:block}
.nk-slideshow-fade .nk-slide{position:absolute;inset:0;opacity:0;transition:opacity var(--nk-dur-slow) var(--nk-ease)}
.nk-slideshow-fade .nk-slide.nk-active{opacity:1;position:relative}
.nk-slide-caption{position:absolute;left:0;bottom:0;right:0;padding:2.5rem;color:#fff;
  background:linear-gradient(to top,rgba(8,32,51,.8),transparent)}
.nk-slide-handle{position:absolute;top:50%;transform:translateY(-50%);width:3rem;height:3rem;border-radius:50%;
  background:rgba(255,255,255,.85);color:var(--nk-ink);display:flex;align-items:center;justify-content:center;
  box-shadow:var(--nk-shadow);cursor:pointer;z-index:3;transition:background var(--nk-dur-fast),transform var(--nk-dur-fast)}
.nk-slide-handle:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.nk-slide-prev{left:1rem}.nk-slide-next{right:1rem}
.nk-slide-dots{position:absolute;bottom:1.1rem;left:50%;transform:translateX(-50%);display:flex;gap:.5rem;z-index:3}
.nk-slide-dot{width:.7rem;height:.7rem;border-radius:999px;background:rgba(255,255,255,.5);cursor:pointer;transition:all var(--nk-dur)}
.nk-slide-dot.nk-active{width:1.8rem;background:#fff}
.nk-slide-progress{position:absolute;left:0;bottom:0;height:4px;background:var(--nk-secondary);width:0;z-index:3}
.nk-slide-progress.nk-running{transition:width linear}

/* LIGHTBOX ================================================================= */
.nk-lightbox-backdrop{position:fixed;inset:0;background:rgba(4,16,26,.92);z-index:var(--nk-z-modal);
  display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity var(--nk-dur);padding:2rem}
.nk-lightbox-backdrop.nk-open{opacity:1;visibility:visible}
.nk-lightbox-media{max-width:90vw;max-height:85vh;border-radius:var(--nk-radius);box-shadow:var(--nk-shadow-xl);
  transform:scale(.9);transition:transform var(--nk-dur) var(--nk-ease-spring)}
.nk-lightbox-backdrop.nk-open .nk-lightbox-media{transform:none}
.nk-lightbox-close{position:absolute;top:1.5rem;right:1.5rem;color:#fff;width:3rem;height:3rem;border-radius:50%;
  background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;transition:background var(--nk-dur-fast)}
.nk-lightbox-close:hover{background:rgba(255,255,255,.25)}
.nk-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;width:3.4rem;height:3.4rem;border-radius:50%;
  background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;transition:background var(--nk-dur-fast)}
.nk-lightbox-nav:hover{background:rgba(255,255,255,.25)}
.nk-lightbox-prev{left:1.5rem}.nk-lightbox-next{right:1.5rem}
.nk-lightbox-caption{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);color:#fff;font-size:var(--nk-text-sm);background:rgba(0,0,0,.4);padding:.5rem 1rem;border-radius:var(--nk-radius-pill)}
.nk-gallery-thumb{cursor:pointer;overflow:hidden;border-radius:var(--nk-radius);position:relative}
.nk-gallery-thumb img{transition:transform var(--nk-dur-slow) var(--nk-ease-out)}
.nk-gallery-thumb:hover img{transform:scale(1.08)}

/* UPLOAD =================================================================== */
.nk-upload{display:flex;flex-direction:column;gap:1rem}
.nk-dropzone{border:2px dashed var(--nk-line-strong);border-radius:var(--nk-radius-lg);padding:2.5rem 1.5rem;
  text-align:center;background:var(--nk-surface-2);cursor:pointer;transition:all var(--nk-dur) var(--nk-ease);color:var(--nk-muted)}
.nk-dropzone:hover{border-color:var(--nk-primary);background:var(--nk-primary-50);color:var(--nk-primary-700)}
.nk-dropzone.nk-dragover{border-color:var(--nk-primary);background:var(--nk-primary-50);transform:scale(1.01);box-shadow:var(--nk-shadow)}
.nk-dropzone .nk-icon{font-size:3rem;color:var(--nk-primary);margin-bottom:.5rem}
.nk-upload-list{display:flex;flex-direction:column;gap:.6rem}
.nk-upload-file{display:flex;align-items:center;gap:.85rem;padding:.7rem 1rem;border:1px solid var(--nk-line);border-radius:var(--nk-radius);background:var(--nk-surface)}
.nk-upload-file .nk-file-ico{width:2.4rem;height:2.4rem;border-radius:var(--nk-radius-sm);background:var(--nk-primary-50);color:var(--nk-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nk-upload-file .nk-file-meta{flex:1;min-width:0}
.nk-upload-file .nk-file-name{font-weight:600;font-size:var(--nk-text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nk-upload-file .nk-file-size{font-size:var(--nk-text-xs);color:var(--nk-muted)}
.nk-upload-file .nk-file-x{color:var(--nk-muted);cursor:pointer;transition:color var(--nk-dur-fast)}
.nk-upload-file .nk-file-x:hover{color:var(--nk-error)}

/* PARALLAX ================================================================= */
.nk-parallax{position:relative;overflow:hidden}
.nk-parallax-bg{position:absolute;inset:-15% 0;background-size:cover;background-position:center;will-change:transform;z-index:0}
.nk-parallax-content{position:relative;z-index:1}

/* SCROLLSPY / SCROLL ======================================================= */
.nk-scrollspy-nav{display:flex;flex-direction:column;gap:.25rem;position:sticky;top:6rem}
.nk-scrollspy-nav a{padding:.5rem .9rem;border-left:2px solid var(--nk-line);color:var(--nk-muted);font-size:var(--nk-text-sm);font-weight:600;transition:all var(--nk-dur-fast)}
.nk-scrollspy-nav a.nk-active{border-color:var(--nk-primary);color:var(--nk-primary-700);background:var(--nk-primary-50)}
.nk-scroll-top{position:fixed;bottom:1.5rem;right:1.5rem;width:3rem;height:3rem;border-radius:50%;background:var(--nk-primary);
  color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--nk-shadow-lg);z-index:var(--nk-z-nav);
  opacity:0;visibility:hidden;transform:translateY(16px);transition:all var(--nk-dur) var(--nk-ease)}
.nk-scroll-top.nk-show{opacity:1;visibility:visible;transform:none}
.nk-scroll-top:hover{background:var(--nk-primary-600);transform:translateY(-3px)}

/* TOAST (alert helper) ===================================================== */
.nk-toast-host{position:fixed;top:1.25rem;right:1.25rem;z-index:var(--nk-z-toast);display:flex;flex-direction:column;gap:.75rem;max-width:380px}
.nk-toast{animation:nk-fade-left var(--nk-dur) var(--nk-ease-out) both;box-shadow:var(--nk-shadow-lg)}
.nk-toast.nk-closing{animation:nk-fade var(--nk-dur) reverse forwards}

/* FERRY SEARCH WIDGET (FerrySearch component) — "chart deck" ===============
   A dark navigation-console panel. Same DOM contract as v1:
   .booking > .nk-tabs + .trip-legs > .trip-leg (+ .booking-footer).
   Add .booking-light for the classic light card skin. */
.booking{position:relative;isolation:isolate;color:var(--nk-deck-text);
  background:linear-gradient(160deg,var(--nk-abyss-2) 0%,var(--nk-abyss) 100%);
  border:1px solid var(--nk-deck-line);border-radius:var(--nk-radius-xl);
  box-shadow:var(--nk-shadow-xl),inset 0 1px 0 rgba(151,195,235,.10);
  padding:1.4rem;color-scheme:dark}
.booking::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:.6;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%2397c3eb' stroke-opacity='.09' stroke-width='1.4'%3E%3Cpath d='M-40 120c90-45 190-60 300-28s220 18 340-30'/%3E%3Cpath d='M-40 210c110-50 220-40 330-6s200 30 310-24'/%3E%3Cpath d='M-40 306c100-40 210-52 320-16s210 40 320-18'/%3E%3Cpath d='M-40 402c120-46 230-30 330 4s220 22 310-30'/%3E%3C/g%3E%3C/svg%3E");
  background-size:560px 560px}
/* trip-type tabs → segmented pill on deck */
.booking .nk-tabs-nav{border-bottom:none;margin-bottom:1.1rem;display:inline-flex;gap:.2rem;
  background:rgba(151,195,235,.10);border-radius:var(--nk-radius-pill);padding:.28rem}
.booking .nk-tab{padding:.55rem 1.15rem;border-radius:var(--nk-radius-pill);color:var(--nk-deck-muted)}
.booking .nk-tab:hover{color:#fff}
.booking .nk-tab.nk-active{color:var(--nk-primary-900);background:var(--nk-secondary);box-shadow:var(--nk-shadow-sm)}
.booking .nk-tabs-ink{display:none}
.trip-legs{display:flex;flex-direction:column;gap:.7rem}
.trip-leg{display:grid;gap:.55rem;align-items:end;position:relative;grid-template-columns:1fr auto 1fr 1.1fr}      /* single */
.booking[data-trip="round"] .trip-leg{grid-template-columns:1fr auto 1fr 1fr 1fr}                                  /* +return */
.trip-legs.multi .trip-leg{grid-template-columns:1fr auto 1fr 1.1fr auto}                                          /* +remove */
.booking[data-trip="round"] .trip-legs.multi .trip-leg{grid-template-columns:1fr auto 1fr 1fr 1fr auto}            /* +both */
.bk-field.bk-return{display:none}
.booking[data-trip="round"] .bk-field.bk-return{display:flex}
.bk-field{display:flex;flex-direction:column;gap:.22rem;padding:.6rem .85rem;border-radius:var(--nk-radius);
  border:1.5px solid var(--nk-deck-line);background:rgba(4,18,31,.55);
  transition:border-color var(--nk-dur-fast),box-shadow var(--nk-dur-fast),background var(--nk-dur-fast);min-width:0}
.bk-field:hover{border-color:rgba(151,195,235,.32)}
.bk-field:focus-within{border-color:var(--nk-primary);box-shadow:0 0 0 4px rgba(0,153,255,.22);background:rgba(4,18,31,.75)}
.bk-field>label{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--nk-deck-muted)}
.bk-field input{border:none;outline:none;font-size:var(--nk-text-base);font-weight:600;font-family:var(--nk-font-display);
  background:none;padding:0;width:100%;color:#fff;font-variant-numeric:tabular-nums}
.bk-field .bk-icon{color:var(--nk-reef,#00d4c8)}
.bk-dd{flex:1;min-width:0}
.bk-dd .nk-dropdown-toggle{border:none;background:none;padding:0;min-width:0;width:100%;color:#fff;
  font-family:var(--nk-font-display);font-weight:600;font-size:var(--nk-text-base)}
.bk-dd .nk-dropdown-toggle:hover{box-shadow:none}
.bk-dd .nk-dropdown-menu{min-width:240px;color:var(--nk-ink);color-scheme:light}
.bk-dd .nk-dropdown-toggle [data-nk-dd-label]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-dd .nk-caret{color:var(--nk-deck-muted)}
/* swap — sits on a dashed chart line between From / To */
.swap-btn{align-self:center;width:2.5rem;height:2.5rem;border-radius:50%;position:relative;
  background:var(--nk-abyss-3);color:var(--nk-reef,#00d4c8);border:1px solid var(--nk-deck-line);
  display:flex;align-items:center;justify-content:center;margin-bottom:.45rem;flex-shrink:0;
  transition:transform var(--nk-dur),color var(--nk-dur-fast),border-color var(--nk-dur-fast)}
.swap-btn:hover{transform:rotate(180deg);color:#fff;border-color:var(--nk-primary)}
.trip-leg .bk-remove{align-self:center;color:var(--nk-deck-muted);background:none;width:2rem;height:2rem;display:none;
  align-items:center;justify-content:center;border-radius:50%;transition:color var(--nk-dur-fast),background var(--nk-dur-fast)}
.trip-leg .bk-remove:hover{color:var(--nk-error);background:rgba(255,102,102,.14)}
.trip-legs.multi .bk-remove{display:flex}
/* quick chips (dates / popular routes) */
.bk-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.8rem}
.bk-chip{padding:.42rem .9rem;border-radius:var(--nk-radius-pill);font-size:var(--nk-text-xs);font-weight:600;
  font-family:var(--nk-font-display);color:var(--nk-deck-muted);background:rgba(151,195,235,.08);
  border:1px solid var(--nk-deck-line);cursor:pointer;transition:all var(--nk-dur-fast)}
.bk-chip:hover{color:#fff;border-color:rgba(151,195,235,.4)}
.bk-chip.nk-active{color:var(--nk-primary-900);background:var(--nk-secondary);border-color:var(--nk-secondary)}
.booking-footer{display:flex;align-items:flex-end;gap:.6rem;margin-top:1rem;flex-wrap:wrap}
.booking-footer .bk-pax{flex:1;min-width:200px}
.booking-footer>.nk-btn[type=submit],.booking-footer>.nk-btn:last-child{min-height:3.6rem;padding-inline:2rem}
.pax-pop{position:relative}
.pax-menu{position:absolute;bottom:calc(100% + .5rem);left:0;right:0;min-width:260px;background:var(--nk-surface);
  border:1px solid var(--nk-line);border-radius:var(--nk-radius);box-shadow:var(--nk-shadow-lg);padding:1rem;z-index:30;display:none;
  color:var(--nk-ink);color-scheme:light}
.pax-pop.nk-open .pax-menu{display:block;animation:nk-fade-up var(--nk-dur) var(--nk-ease-out)}
.pax-row{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0}
.booking .nk-stepper{border-color:var(--nk-line)}
/* classic light skin */
.booking-light{background:var(--nk-surface);border-color:var(--nk-line);color:var(--nk-ink);color-scheme:light;
  box-shadow:var(--nk-shadow-xl)}
.booking-light::before{display:none}
.booking-light .nk-tabs-nav{background:var(--nk-surface-2)}
.booking-light .nk-tab{color:var(--nk-muted)}
.booking-light .nk-tab:hover{color:var(--nk-ink)}
.booking-light .bk-field{background:var(--nk-surface);border-color:var(--nk-line)}
.booking-light .bk-field:focus-within{box-shadow:0 0 0 4px var(--nk-primary-50)}
.booking-light .bk-field>label{color:var(--nk-muted)}
.booking-light .bk-field input,.booking-light .bk-dd .nk-dropdown-toggle{color:var(--nk-ink)}
.booking-light .swap-btn{background:var(--nk-primary-50);color:var(--nk-primary);border-color:transparent}
.booking-light .bk-chip{color:var(--nk-muted);background:var(--nk-surface-2);border-color:var(--nk-line)}
@media(max-width:820px){
  .booking{padding:1.1rem}
  .trip-leg,.booking[data-trip="round"] .trip-leg,.trip-legs.multi .trip-leg,.booking[data-trip="round"] .trip-legs.multi .trip-leg{grid-template-columns:1fr 1fr}
  .swap-btn{display:none!important}
  .trip-leg .bk-remove,.trip-legs.multi .bk-remove{position:absolute;top:.4rem;right:.4rem;margin:0;z-index:2}
}
@media(max-width:520px){
  .trip-leg,.booking[data-trip="round"] .trip-leg,.trip-legs.multi .trip-leg,.booking[data-trip="round"] .trip-legs.multi .trip-leg{grid-template-columns:1fr}
  .booking-footer .nk-btn{width:100%}
  .booking .nk-tabs-nav{width:100%;justify-content:center}
}

/* STAT CARD (admin) ======================================================== */
.nk-stat{display:flex;flex-direction:column;gap:.4rem;padding:1.4rem;background:var(--nk-surface);border:1px solid var(--nk-line);border-radius:var(--nk-radius-lg);position:relative;overflow:hidden}
.nk-stat-icon{width:3rem;height:3rem;border-radius:var(--nk-radius);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:.3rem}
.nk-stat-value{font-family:var(--nk-font-display);font-weight:800;font-size:var(--nk-text-2xl);line-height:1;color:var(--nk-ink);font-variant-numeric:tabular-nums}
.nk-stat-label{color:var(--nk-muted);font-size:var(--nk-text-sm);font-weight:500}
.nk-stat-trend{display:inline-flex;align-items:center;gap:.25rem;font-size:var(--nk-text-xs);font-weight:700}
.nk-trend-up{color:var(--nk-success-700)}.nk-trend-down{color:var(--nk-error-700)}

/* ROUTE LINE ===============================================================
   Port-to-port chart plot: <div class="nk-route"> <div class="nk-route-port">…
   Works on light surfaces; add .nk-route-dark on deck/dark panels. */
.nk-route{display:flex;align-items:center;gap:1rem;min-width:0}
.nk-route-port{display:flex;flex-direction:column;min-width:0}
.nk-route-port:last-child{text-align:right;align-items:flex-end}
.nk-route-time{font-family:var(--nk-font-display);font-weight:800;font-size:var(--nk-text-xl);line-height:1.1;
  color:var(--nk-ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.nk-route-code{font-family:var(--nk-font-mono);font-weight:700;font-size:var(--nk-text-xs);letter-spacing:.14em;color:var(--nk-primary-600)}
.nk-route-name{font-size:var(--nk-text-xs);color:var(--nk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nk-route-path{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-width:60px;height:2rem}
.nk-route-path::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;
  background-image:linear-gradient(90deg,var(--nk-line-strong) 55%,transparent 45%);background-size:12px 2px;background-repeat:repeat-x}
.nk-route-path::after{content:"";position:absolute;top:50%;right:-1px;width:8px;height:8px;margin-top:-4px;
  border-radius:50%;background:var(--nk-primary)}
.nk-route-path>span{position:relative;z-index:1;background:var(--nk-surface);border:1px solid var(--nk-line);
  border-radius:var(--nk-radius-pill);padding:.22rem .7rem;font-size:var(--nk-text-xs);font-weight:700;
  font-family:var(--nk-font-display);color:var(--nk-ink-soft);display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.nk-route-path>span .nk-icon{color:var(--nk-primary)}
.nk-route-animated .nk-route-path::before{animation:nk-dash-bg 1.2s linear infinite}
.nk-route-dark .nk-route-time{color:#fff}
.nk-route-dark .nk-route-code{color:var(--nk-reef,#00d4c8)}
.nk-route-dark .nk-route-name{color:var(--nk-deck-muted)}
.nk-route-dark .nk-route-path::before{background-image:linear-gradient(90deg,var(--nk-deck-line) 55%,transparent 45%)}
.nk-route-dark .nk-route-path>span{background:var(--nk-abyss-3);border-color:var(--nk-deck-line);color:var(--nk-deck-text)}

/* TICKET (boarding-pass card) ==============================================
   <article class="nk-ticket"><div class="nk-ticket-main">…</div>
   <div class="nk-ticket-stub">…</div></article> */
.nk-ticket{--nk-ticket-bg:var(--nk-bg);position:relative;display:flex;background:var(--nk-surface);
  border:1px solid var(--nk-line);border-radius:var(--nk-radius-lg);box-shadow:var(--nk-shadow-xs);
  transition:transform var(--nk-dur) var(--nk-ease-out),box-shadow var(--nk-dur) var(--nk-ease-out),border-color var(--nk-dur)}
.nk-ticket:hover{transform:translateY(-3px);box-shadow:var(--nk-shadow-lg);border-color:var(--nk-line-strong)}
.nk-ticket-main{flex:1;min-width:0;padding:1.25rem 1.5rem}
.nk-ticket-stub{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:.3rem;
  padding:1.25rem 1.5rem;border-left:2px dashed var(--nk-line-strong);position:relative;min-width:150px}
.nk-ticket-stub::before,.nk-ticket-stub::after{content:"";position:absolute;left:-9px;width:16px;height:16px;
  border-radius:50%;background:var(--nk-ticket-bg);border:1px solid var(--nk-line)}
.nk-ticket-stub::before{top:-9px;clip-path:inset(50% 0 0 0)}
.nk-ticket-stub::after{bottom:-9px;clip-path:inset(0 0 50% 0)}
.nk-ticket-featured{border-color:var(--nk-primary-200);box-shadow:var(--nk-shadow-sm),0 0 0 1px var(--nk-primary-200)}
.nk-ticket-flag{position:absolute;top:-1px;left:1.25rem;transform:translateY(-50%);z-index:1}
@media(max-width:640px){
  .nk-ticket{flex-direction:column}
  .nk-ticket-main{padding:1.1rem 1.15rem}
  .nk-ticket-stub{flex-direction:row;align-items:center;justify-content:space-between;width:100%;min-width:0;
    border-left:none;border-top:2px dashed var(--nk-line-strong);padding:.9rem 1.15rem}
  .nk-ticket-stub::before,.nk-ticket-stub::after{left:auto;top:-9px;bottom:auto}
  .nk-ticket-stub::before{left:-9px;clip-path:inset(0 0 0 50%)}
  .nk-ticket-stub::after{right:-9px;clip-path:inset(0 50% 0 0)}
}

/* STEPS (booking progress) =================================================
   <ol class="nk-steps"><li class="nk-step nk-done">…<li class="nk-step nk-active">… */
.nk-steps{display:flex;align-items:flex-start;counter-reset:nk-step}
.nk-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:.45rem;text-align:center;position:relative;
  font-size:var(--nk-text-xs);font-weight:600;color:var(--nk-muted);font-family:var(--nk-font-display)}
.nk-step::before{counter-increment:nk-step;content:counter(nk-step);width:2.1rem;height:2.1rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:700;
  background:var(--nk-surface-2);border:2px solid var(--nk-line-strong);color:var(--nk-muted);
  transition:all var(--nk-dur);position:relative;z-index:1}
.nk-step:not(:first-child)::after{content:"";position:absolute;top:1.05rem;right:50%;width:100%;height:2px;
  margin-right:1.05rem;background:var(--nk-line-strong);z-index:0}
.nk-step.nk-done{color:var(--nk-ink-soft)}
.nk-step.nk-done::before{content:"✓";background:var(--nk-success);border-color:var(--nk-success);color:#fff}
.nk-step.nk-done:not(:first-child)::after,.nk-step.nk-active:not(:first-child)::after{background:var(--nk-success)}
.nk-step.nk-active{color:var(--nk-primary-700)}
.nk-step.nk-active::before{background:var(--nk-primary);border-color:var(--nk-primary);color:#fff;box-shadow:var(--nk-focus-ring)}

/* SEAT METER =============================================================== */
.nk-seatmeter{display:inline-flex;flex-direction:column;gap:.3rem;min-width:90px}
.nk-seatmeter-bar{height:5px;border-radius:999px;background:var(--nk-line);overflow:hidden}
.nk-seatmeter-bar i{display:block;height:100%;border-radius:999px;background:var(--nk-success)}
.nk-seatmeter-low .nk-seatmeter-bar i{background:var(--nk-warning)}
.nk-seatmeter-critical .nk-seatmeter-bar i{background:var(--nk-error)}
.nk-seatmeter small{font-size:var(--nk-text-xs);font-weight:700;color:var(--nk-success-700)}
.nk-seatmeter-low small{color:var(--nk-warning-700)}
.nk-seatmeter-critical small{color:var(--nk-error-700)}

/* STAT BAND (count-up numbers, dark) ======================================= */
.nk-statband{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:1.5rem var(--nk-gutter);
  background:var(--nk-grad-deep);border-radius:var(--nk-radius-xl);padding:clamp(1.5rem,4vw,3rem);color:#fff}
.nk-statband-item{display:flex;flex-direction:column;gap:.2rem;text-align:center}
.nk-statband-value{font-family:var(--nk-font-display);font-weight:800;font-size:var(--nk-text-2xl);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.nk-statband-value .nk-suffix{color:var(--nk-secondary)}
.nk-statband-label{font-size:var(--nk-text-xs);letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--nk-deck-muted)}

/* RATING =================================================================== */
.nk-rating{--nk-rating:5;position:relative;display:inline-block;font-size:1rem;line-height:1;letter-spacing:2px;
  color:var(--nk-line-strong);user-select:none}
.nk-rating::before{content:"★★★★★"}
.nk-rating>i{position:absolute;inset:0;overflow:hidden;color:var(--nk-secondary-500);
  width:calc(var(--nk-rating)/5*100%);font-style:normal;white-space:nowrap}
.nk-rating>i::before{content:"★★★★★"}
.nk-rating-lg{font-size:1.4rem}

/* EMPTY STATE ============================================================== */
.nk-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  text-align:center;padding:3rem 1.5rem;color:var(--nk-muted)}
.nk-empty .nk-empty-icon{width:4rem;height:4rem;border-radius:50%;background:var(--nk-surface-2);
  display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--nk-faint)}
.nk-empty-title{font-family:var(--nk-font-display);font-weight:700;color:var(--nk-ink);font-size:var(--nk-text-lg)}
.nk-empty p{max-width:36ch;font-size:var(--nk-text-sm)}

/* PORT CODE CHIP =========================================================== */
.nk-port{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--nk-font-mono);font-weight:700;
  font-size:var(--nk-text-xs);letter-spacing:.12em;color:var(--nk-primary-700);background:var(--nk-primary-50);
  border:1px solid var(--nk-primary-100);border-radius:var(--nk-radius-xs);padding:.3rem .55rem;line-height:1}
.nk-port-dark{color:var(--nk-reef,#00d4c8);background:rgba(0,212,200,.08);border-color:rgba(0,212,200,.25)}