/* ============================================================================


   TESTKAV SKILLS — DESIGN SYSTEM (Phase 0)


   Font: AzarMehr (body/UI) + Pinar (headings h1–h6) · Palette: Amber #ffc218 + Charcoal + White


   Light-first · Dark-ready · RTL · Restrained type scale


   Load order in templates:  azarmehr.css + pinar.css  →  testkav-ds.css  →  app css


   ============================================================================ */





/* ----------------------------------------------------------------------------


   1. TOKENS


   ---------------------------------------------------------------------------- */


:root{


  /* brand */


  --tk-amber:#ffc218;


  --tk-amber-deep:#e9ad00;


  --tk-amber-press:#cf9a00;


  --tk-amber-soft:rgba(255,194,24,.14);


  --tk-amber-line:rgba(255,194,24,.45);


  --tk-charcoal:#181a1d;





  /* surfaces (light) */


  --tk-bg:#f6f5f1;


  --tk-surface:#ffffff;


  --tk-surface-2:#f4f3ef;


  --tk-surface-3:#eceae4;





  /* text (light) */


  --tk-ink:#1a1c1f;


  --tk-ink-soft:rgba(26,28,31,.62);


  --tk-ink-faint:rgba(26,28,31,.40);


  --tk-on-amber:#181a1d;





  /* lines */


  --tk-line:rgba(26,28,31,.10);


  --tk-line-strong:rgba(26,28,31,.16);





  /* status */


  --tk-ok:#1f9d57;        --tk-ok-soft:rgba(31,157,87,.12);


  --tk-info:#3b6fd4;      --tk-info-soft:rgba(59,111,212,.12);


  --tk-warn:#d98a1f;      --tk-warn-soft:rgba(217,138,31,.12);


  --tk-danger:#e5484d;    --tk-danger-soft:rgba(229,72,77,.12);





  /* typography — RESTRAINED scale */


  --tk-font:'AzarMehr','Pinar','Vazirmatn',Tahoma,system-ui,sans-serif;         /* body & UI */


  --tk-font-heading:'Pinar','AzarMehr','Vazirmatn',Tahoma,system-ui,sans-serif; /* h1–h6 only */


  --tk-fs-display:clamp(28px,3.6vw,44px);  /* landing hero only */


  --tk-fs-h1:26px;     /* page title */


  --tk-fs-h2:20px;     /* section title */


  --tk-fs-h3:16.5px;   /* card title */


  --tk-fs-h4:14.5px;


  --tk-fs-body:14.5px;


  --tk-fs-sm:13px;


  --tk-fs-xs:12px;


  --tk-lh:1.75;


  --tk-lh-tight:1.3;





  /* weights — titles heavy, body light */


  --tk-fw-body:400;


  --tk-fw-medium:500;


  --tk-fw-label:600;   /* buttons, nav, labels */


  --tk-fw-title:800;   /* section/card titles */


  --tk-fw-display:900; /* big titles */





  /* radius */


  --tk-r-sm:10px; --tk-r-md:14px; --tk-r-lg:20px; --tk-r-xl:26px; --tk-r-pill:999px;





  /* shadow */


  --tk-shadow-sm:0 6px 22px rgba(24,26,29,.06);


  --tk-shadow-md:0 16px 44px rgba(24,26,29,.10);


  --tk-shadow-lg:0 30px 70px rgba(24,26,29,.16);


  --tk-shadow-amber:0 16px 36px rgba(255,194,24,.28);





  /* layout */


  --tk-container:1240px;


  --tk-sidebar:280px;


  --tk-topbar:70px;





  --tk-ease:cubic-bezier(.22,.61,.36,1);


  --tk-dur:.22s;


}





[data-theme="dark"]{


  --tk-bg:#0f1012;


  --tk-surface:#191b1e;


  --tk-surface-2:#202327;


  --tk-surface-3:#272a2f;


  --tk-charcoal:#0b0c0e;


  --tk-ink:#f1f2ef;


  --tk-ink-soft:rgba(241,242,239,.64);


  --tk-ink-faint:rgba(241,242,239,.40);


  --tk-line:rgba(241,242,239,.10);


  --tk-line-strong:rgba(241,242,239,.18);


  --tk-amber-soft:rgba(255,194,24,.16);


  --tk-ok-soft:rgba(31,157,87,.18);


  --tk-info-soft:rgba(59,111,212,.18);


  --tk-warn-soft:rgba(217,138,31,.18);


  --tk-danger-soft:rgba(229,72,77,.18);


  --tk-shadow-sm:0 6px 22px rgba(0,0,0,.4);


  --tk-shadow-md:0 16px 44px rgba(0,0,0,.5);


  --tk-shadow-lg:0 30px 70px rgba(0,0,0,.6);


}





/* ----------------------------------------------------------------------------


   2. RESET + ELEMENT DEFAULTS (baseline restyle for un-classed content)


   ---------------------------------------------------------------------------- */


*{margin:0;padding:0;box-sizing:border-box}


html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}


body{


  font-family:var(--tk-font);


  font-size:var(--tk-fs-body);


  font-weight:var(--tk-fw-body);


  line-height:var(--tk-lh);


  background:var(--tk-bg);


  color:var(--tk-ink);


  accent-color:var(--tk-amber);


  transition:background .4s var(--tk-ease),color .4s var(--tk-ease);


}


h1,h2,h3,h4,h5,h6{font-family:var(--tk-font-heading);line-height:var(--tk-lh-tight);letter-spacing:-.4px;color:var(--tk-ink)}


h1{font-size:var(--tk-fs-h1);font-weight:var(--tk-fw-display)}


h2{font-size:var(--tk-fs-h2);font-weight:var(--tk-fw-title)}


h3{font-size:var(--tk-fs-h3);font-weight:var(--tk-fw-title)}


h4{font-size:var(--tk-fs-h4);font-weight:var(--tk-fw-label)}


p{font-weight:var(--tk-fw-body);color:var(--tk-ink-soft)}


small{font-size:var(--tk-fs-sm);color:var(--tk-ink-soft);font-weight:var(--tk-fw-body)}


strong,b{font-weight:var(--tk-fw-label)}


a{color:inherit;text-decoration:none}


img,svg,video,canvas{max-width:100%;display:block}


button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}


ul,ol{padding-inline-start:1.4em}


::selection{background:rgba(255,194,24,.4);color:var(--tk-on-amber)}


:focus-visible{outline:3px solid var(--tk-amber-line);outline-offset:2px;border-radius:6px}


hr{border:none;border-top:1px solid var(--tk-line);margin:20px 0}





/* ----------------------------------------------------------------------------


   3. LAYOUT HELPERS


   ---------------------------------------------------------------------------- */


.tk-container{width:min(var(--tk-container),92vw);margin-inline:auto}


.tk-stack{display:flex;flex-direction:column;gap:16px}


.tk-row{display:flex;align-items:center;gap:12px}


.tk-grid{display:grid;gap:18px}


.tk-spread{display:flex;align-items:center;justify-content:space-between;gap:16px}





/* section heading */


.tk-shead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}


.tk-kick{display:inline-flex;align-items:center;gap:8px;font-size:var(--tk-fs-sm);font-weight:var(--tk-fw-label);


  color:var(--tk-amber-deep);margin-bottom:10px}


.tk-kick::before{content:"";width:20px;height:2px;background:var(--tk-amber);border-radius:2px}


.tk-shead h2{font-weight:var(--tk-fw-title)}


.tk-shead p{font-size:var(--tk-fs-body);margin-top:6px;max-width:48ch}





/* ----------------------------------------------------------------------------


   4. BUTTONS


   ---------------------------------------------------------------------------- */


.tk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;


  border-radius:var(--tk-r-pill);font-weight:var(--tk-fw-label);font-size:var(--tk-fs-body);


  white-space:nowrap;transition:var(--tk-dur) var(--tk-ease)}


.tk-btn svg{width:18px;height:18px}


.tk-btn-sm{height:38px;padding:0 16px;font-size:var(--tk-fs-sm)}


.tk-btn-lg{height:50px;padding:0 26px}


.tk-btn-primary{background:var(--tk-amber);color:var(--tk-on-amber);box-shadow:var(--tk-shadow-amber)}


.tk-btn-primary:hover{background:var(--tk-amber-deep);transform:translateY(-2px)}


.tk-btn-primary:active{background:var(--tk-amber-press);transform:translateY(0)}


.tk-btn-dark{background:var(--tk-charcoal);color:#fff}


.tk-btn-dark:hover{transform:translateY(-2px);box-shadow:var(--tk-shadow-md)}


.tk-btn-ghost{background:var(--tk-surface);color:var(--tk-ink);border:1px solid var(--tk-line-strong)}


.tk-btn-ghost:hover{background:var(--tk-surface-2);transform:translateY(-2px)}


.tk-btn-soft{background:var(--tk-amber-soft);color:var(--tk-amber-deep)}


.tk-btn-soft:hover{background:var(--tk-amber);color:var(--tk-on-amber)}


.tk-btn-quiet{background:transparent;color:var(--tk-ink-soft)}


.tk-btn-quiet:hover{background:var(--tk-surface-2);color:var(--tk-ink)}


.tk-btn:disabled,.tk-btn[aria-disabled="true"]{opacity:.5;pointer-events:none}


.tk-iconbtn{width:42px;height:42px;border-radius:var(--tk-r-md);border:1px solid var(--tk-line);


  background:var(--tk-surface);display:grid;place-items:center;transition:var(--tk-dur) var(--tk-ease)}


.tk-iconbtn:hover{border-color:var(--tk-line-strong);transform:translateY(-1px)}


.tk-iconbtn svg{width:19px;height:19px}





/* ----------------------------------------------------------------------------


   5. FORMS


   ---------------------------------------------------------------------------- */


.tk-label{display:block;font-size:var(--tk-fs-sm);font-weight:var(--tk-fw-label);margin-bottom:7px;color:var(--tk-ink)}


.tk-input,.tk-select,.tk-textarea,


input[type=text],input[type=email],input[type=search],input[type=number],


input[type=password],input[type=tel],input[type=url],input[type=date],select,textarea{


  width:100%;border:1px solid var(--tk-line-strong);border-radius:var(--tk-r-md);background:var(--tk-surface);


  padding:11px 14px;font-family:inherit;font-size:var(--tk-fs-body);font-weight:var(--tk-fw-body);


  color:var(--tk-ink);transition:border-color var(--tk-dur),box-shadow var(--tk-dur)}


input::placeholder,textarea::placeholder{color:var(--tk-ink-faint);font-weight:var(--tk-fw-body)}


.tk-input:focus,.tk-select:focus,.tk-textarea:focus,input:focus,select:focus,textarea:focus{


  /* border-color:var(--tk-amber-line); */


  /* box-shadow:0 0 0 4px var(--tk-amber-soft); */


  outline:none


  }


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


.tk-help{font-size:var(--tk-fs-xs);color:var(--tk-ink-faint);margin-top:6px;font-weight:var(--tk-fw-body)}


.tk-field{margin-bottom:18px}


/* search field with icon */


.tk-search{display:flex;align-items:center;gap:9px;background:var(--tk-surface);border:1px solid var(--tk-line);


  border-radius:var(--tk-r-md);padding:10px 14px}


.tk-search svg{width:18px;height:18px;color:var(--tk-ink-faint);flex-shrink:0}


.tk-search input{border:none;background:none;padding:0;flex:1}


.tk-search input:focus{box-shadow:none}


/* switch */


.tk-switch{position:relative;display:inline-block;width:46px;height:26px}


.tk-switch input{opacity:0;width:0;height:0}


.tk-switch .sl{position:absolute;inset:0;background:var(--tk-surface-3);border-radius:999px;transition:var(--tk-dur)}


.tk-switch .sl::before{content:"";position:absolute;width:20px;height:20px;inset-inline-start:3px;top:3px;


  background:#fff;border-radius:50%;transition:var(--tk-dur) var(--tk-ease);box-shadow:0 1px 3px rgba(0,0,0,.2)}


.tk-switch input:checked+.sl{background:var(--tk-amber)}


.tk-switch input:checked+.sl::before{transform:translateX(-20px)}





/* ----------------------------------------------------------------------------


   6. CARDS


   ---------------------------------------------------------------------------- */


.tk-card{background:var(--tk-surface);border:1px solid var(--tk-line);border-radius:var(--tk-r-xl);


  padding:24px;transition:var(--tk-dur) var(--tk-ease)}


.tk-card-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}


.tk-card-h h3{font-weight:var(--tk-fw-title);display:flex;align-items:center;gap:9px}


.tk-card-h h3 .d{width:8px;height:8px;border-radius:2px;background:var(--tk-amber)}


.tk-card-h a{font-size:var(--tk-fs-sm);font-weight:var(--tk-fw-label);color:var(--tk-ink-soft);


  display:inline-flex;align-items:center;gap:5px}


.tk-card-h a:hover{color:var(--tk-ink)}


.tk-card-hover:hover{transform:translateY(-4px);box-shadow:var(--tk-shadow-md)}





/* ----------------------------------------------------------------------------


   7. BADGES / TAGS / PILLS


   ---------------------------------------------------------------------------- */


.tk-badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--tk-fs-xs);font-weight:var(--tk-fw-label);


  padding:4px 10px;border-radius:var(--tk-r-pill);background:var(--tk-surface-2);color:var(--tk-ink-soft)}


.tk-badge-amber{background:var(--tk-amber-soft);color:var(--tk-amber-deep)}


.tk-badge-ok{background:var(--tk-ok-soft);color:var(--tk-ok)}


.tk-badge-info{background:var(--tk-info-soft);color:var(--tk-info)}


.tk-badge-warn{background:var(--tk-warn-soft);color:var(--tk-warn)}


.tk-badge-danger{background:var(--tk-danger-soft);color:var(--tk-danger)}


.tk-badge-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}





/* ----------------------------------------------------------------------------


   8. TABLES (data tables for panels)


   ---------------------------------------------------------------------------- */


.tk-table{width:100%;border-collapse:collapse;font-size:var(--tk-fs-body)}


.tk-table th{text-align:start;font-weight:var(--tk-fw-label);font-size:var(--tk-fs-sm);color:var(--tk-ink-faint);


  padding:12px 14px;border-bottom:1px solid var(--tk-line-strong)}


.tk-table td{padding:14px;border-bottom:1px solid var(--tk-line);font-weight:var(--tk-fw-body);color:var(--tk-ink)}


.tk-table tbody tr{transition:background var(--tk-dur)}


.tk-table tbody tr:hover{background:var(--tk-surface-2)}


.tk-table tbody tr:last-child td{border-bottom:none}





/* ----------------------------------------------------------------------------


   9. TABS


   ---------------------------------------------------------------------------- */


.tk-tabs{display:flex;gap:4px;border-bottom:1px solid var(--tk-line);margin-bottom:22px;overflow-x:auto}


.tk-tab{padding:11px 16px;font-weight:var(--tk-fw-label);font-size:var(--tk-fs-body);color:var(--tk-ink-soft);


  border-bottom:2px solid transparent;white-space:nowrap;transition:var(--tk-dur)}


.tk-tab:hover{color:var(--tk-ink)}


.tk-tab.active{color:var(--tk-ink);border-bottom-color:var(--tk-amber)}





/* ----------------------------------------------------------------------------


   10. ALERTS / MESSAGES


   ---------------------------------------------------------------------------- */


.tk-alert{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--tk-r-md);


  font-size:var(--tk-fs-body);font-weight:var(--tk-fw-medium);border:1px solid transparent}


.tk-alert svg{width:20px;height:20px;flex-shrink:0;margin-top:1px}


.tk-alert-ok{background:var(--tk-ok-soft);color:var(--tk-ok);border-color:rgba(31,157,87,.25)}


.tk-alert-info{background:var(--tk-info-soft);color:var(--tk-info);border-color:rgba(59,111,212,.25)}


.tk-alert-warn{background:var(--tk-warn-soft);color:var(--tk-warn);border-color:rgba(217,138,31,.25)}


.tk-alert-danger{background:var(--tk-danger-soft);color:var(--tk-danger);border-color:rgba(229,72,77,.25)}





/* ----------------------------------------------------------------------------


   11. MODAL


   ---------------------------------------------------------------------------- */


.tk-modal-bg{position:fixed;inset:0;background:rgba(10,11,13,.5);backdrop-filter:blur(3px);


  display:grid;place-items:center;z-index:100;padding:20px}


.tk-modal{background:var(--tk-surface);border-radius:var(--tk-r-xl);padding:28px;width:min(520px,100%);


  box-shadow:var(--tk-shadow-lg);max-height:90vh;overflow-y:auto}


.tk-modal-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}


.tk-modal-h h3{font-weight:var(--tk-fw-title)}





/* ----------------------------------------------------------------------------


   12. BREADCRUMB / PAGINATION / EMPTY


   ---------------------------------------------------------------------------- */


.tk-crumb{display:flex;align-items:center;gap:8px;font-size:var(--tk-fs-sm);color:var(--tk-ink-faint);


  font-weight:var(--tk-fw-medium);flex-wrap:wrap}


.tk-crumb a{color:var(--tk-ink-soft)}


.tk-crumb a:hover{color:var(--tk-ink)}


.tk-crumb .sep{opacity:.5}


.tk-crumb .cur{color:var(--tk-ink)}





.tk-pager{display:flex;gap:6px;justify-content:center;align-items:center}


.tk-pager a,.tk-pager span{min-width:40px;height:40px;display:grid;place-items:center;border-radius:var(--tk-r-sm);


  font-weight:var(--tk-fw-label);font-size:var(--tk-fs-sm);border:1px solid var(--tk-line);background:var(--tk-surface);


  color:var(--tk-ink-soft);transition:var(--tk-dur)}


.tk-pager a:hover{border-color:var(--tk-line-strong);color:var(--tk-ink)}


.tk-pager .cur{background:var(--tk-charcoal);color:#fff;border-color:var(--tk-charcoal)}





.tk-empty{text-align:center;padding:54px 24px}


.tk-empty .ic{width:64px;height:64px;border-radius:var(--tk-r-lg);background:var(--tk-surface-2);


  display:grid;place-items:center;margin:0 auto 18px}


.tk-empty .ic svg{width:30px;height:30px;color:var(--tk-ink-faint)}


.tk-empty h3{font-weight:var(--tk-fw-title);margin-bottom:8px}


.tk-empty p{font-size:var(--tk-fs-body);max-width:34ch;margin:0 auto 18px}





/* avatar */


.tk-avatar{border-radius:var(--tk-r-md);background:var(--tk-amber);display:grid;place-items:center;


  font-weight:var(--tk-fw-title);color:var(--tk-on-amber);width:42px;height:42px;font-size:15px}





/* ----------------------------------------------------------------------------


   13. INFOGRAPHIC PRIMITIVES (reused on every data page)


   ---------------------------------------------------------------------------- */


/* level meter L1..L5 */


.tk-levels{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}


.tk-levels i{height:30px;border-radius:8px;background:var(--tk-surface-3);display:grid;place-items:center;


  font-size:var(--tk-fs-xs);font-weight:var(--tk-fw-title);color:var(--tk-ink-faint);transition:.5s var(--tk-ease)}


.tk-levels i.on{background:var(--tk-amber);color:var(--tk-on-amber)}


.tk-levels i.cur{box-shadow:0 0 0 3px var(--tk-amber-soft)}


/* compact level dots */


.tk-lv{display:flex;gap:3px}


.tk-lv i{width:6px;height:14px;border-radius:2px;background:var(--tk-line-strong)}


.tk-lv i.on{background:var(--tk-amber)}


/* progress bar */


.tk-progress{height:8px;border-radius:999px;background:var(--tk-surface-3);overflow:hidden}


.tk-progress i{display:block;height:100%;border-radius:999px;background:var(--tk-amber);width:0;transition:width 1.1s var(--tk-ease)}


/* radial ring (use with JS to set --p 0..100) */


.tk-ring{position:relative;width:104px;height:104px}


.tk-ring svg{transform:rotate(-90deg)}


.tk-ring .c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}


.tk-ring .c b{font-size:24px;font-weight:var(--tk-fw-display);line-height:1}


.tk-ring .c span{font-size:var(--tk-fs-xs);color:var(--tk-ink-faint);font-weight:var(--tk-fw-medium)}


/* sparkline bars */


.tk-spark{display:flex;align-items:flex-end;gap:3px;height:28px}


.tk-spark i{flex:1;background:var(--tk-surface-3);border-radius:2px;height:20%;transition:height .9s var(--tk-ease)}


.tk-spark i.on{background:var(--tk-amber)}


/* radar chart shared styles (SVG geometry supplied in markup) */


.tk-radar .grid-l{stroke:var(--tk-line-strong);fill:none;stroke-width:1}


.tk-radar .axis{stroke:var(--tk-line-strong);stroke-width:1}


.tk-radar .lab{fill:var(--tk-ink-soft);font-size:11px;font-weight:var(--tk-fw-label);font-family:var(--tk-font)}


.tk-radar .poly{fill:rgba(255,194,24,.28);stroke:var(--tk-amber-deep);stroke-width:2.5;stroke-linejoin:round;


  transform-origin:140px 140px;transform:scale(0)}


.tk-radar .dot{fill:var(--tk-amber-deep);opacity:0}


.tk-radar.in .poly{animation:tk-pop 1.1s var(--tk-ease) forwards}


.tk-radar.in .dot{animation:tk-fade .5s ease .4s forwards}


@keyframes tk-pop{0%{transform:scale(0)}70%{transform:scale(1.06)}100%{transform:scale(1)}}


@keyframes tk-fade{to{opacity:1}}





/* KPI / stat card */


.tk-kpi{background:var(--tk-surface);border:1px solid var(--tk-line);border-radius:var(--tk-r-lg);padding:20px;


  transition:var(--tk-dur) var(--tk-ease)}


.tk-kpi:hover{transform:translateY(-3px);box-shadow:var(--tk-shadow-md)}


.tk-kpi .top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}


.tk-kpi .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--tk-amber-soft);color:var(--tk-amber-deep)}


.tk-kpi .ic svg{width:22px;height:22px}


.tk-kpi .num{font-size:30px;font-weight:var(--tk-fw-display);letter-spacing:-1px;line-height:1}


.tk-kpi .num small{font-size:15px;color:var(--tk-ink-faint);font-weight:var(--tk-fw-label)}


.tk-kpi .lab{font-size:var(--tk-fs-sm);color:var(--tk-ink-soft);font-weight:var(--tk-fw-medium);margin-top:5px}





/* ----------------------------------------------------------------------------


   14. PANEL SHELL (sidebar + topbar) — used by base_panel.html


   ---------------------------------------------------------------------------- */


.tk-shell{display:grid;grid-template-columns:var(--tk-sidebar) 1fr;min-height:100vh}


.tk-sidebar{background:var(--tk-surface);border-inline-end:1px solid var(--tk-line);position:sticky;top:0;


  height:100vh;display:flex;flex-direction:column;padding:22px 16px;z-index:40}


.tk-sb-brand{display:flex;align-items:center;gap:11px;padding:6px 8px 22px;border-bottom:1px solid var(--tk-line)}


.tk-sb-brand .mark{width:40px;height:40px;border-radius:11px;background:var(--tk-charcoal);display:grid;place-items:center}


.tk-sb-brand b{font-size:16.5px;font-weight:var(--tk-fw-title);letter-spacing:-.3px}


.tk-sb-brand small{display:block;font-size:11px;color:var(--tk-ink-faint);font-weight:var(--tk-fw-medium);margin-top:-2px}


.tk-sb-section{font-size:11px;font-weight:var(--tk-fw-label);color:var(--tk-ink-faint);padding:18px 12px 8px}


.tk-sb-nav{display:flex;flex-direction:column;gap:3px;overflow-y:auto;flex:1}


.tk-navlink{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:13px;font-weight:var(--tk-fw-label);


  font-size:var(--tk-fs-body);color:var(--tk-ink-soft);position:relative;transition:.18s var(--tk-ease)}


.tk-navlink svg{width:20px;height:20px;flex-shrink:0;opacity:.85}


.tk-navlink .badge{margin-inline-start:auto;font-size:11px;font-weight:var(--tk-fw-title);background:var(--tk-surface-2);


  color:var(--tk-ink-soft);padding:2px 8px;border-radius:999px;min-width:22px;text-align:center}


.tk-navlink:hover{background:var(--tk-surface-2);color:var(--tk-ink)}


.tk-navlink.active{background:var(--tk-charcoal);color:#fff}


.tk-navlink.active svg{opacity:1;color:var(--tk-amber)}


.tk-navlink.active .badge{background:var(--tk-amber);color:var(--tk-on-amber)}


.tk-navlink.active::before{content:"";position:absolute;inset-inline-start:-16px;top:50%;transform:translateY(-50%);


  width:4px;height:22px;background:var(--tk-amber);border-radius:0 4px 4px 0}





.tk-main{min-width:0;display:flex;flex-direction:column}


.tk-topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--tk-bg) 84%,transparent);


  backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--tk-line);


  display:flex;align-items:center;gap:16px;padding:14px 28px;min-height:var(--tk-topbar)}


.tk-hamb{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--tk-line);


  background:var(--tk-surface);place-items:center}


.tk-hamb svg{width:20px;height:20px}


.tk-role{display:flex;align-items:center;gap:9px;background:var(--tk-surface);border:1px solid var(--tk-line-strong);


  border-radius:12px;padding:8px 14px;font-weight:var(--tk-fw-label);font-size:var(--tk-fs-sm)}


.tk-role:hover{background:var(--tk-surface-2)}


.tk-role .dot{width:8px;height:8px;border-radius:50%;background:var(--tk-amber)}


.tk-content{padding:28px;display:flex;flex-direction:column;gap:22px}


.tk-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:39}


.tk-overlay.show{display:block}





/* ----------------------------------------------------------------------------


   15. MOTION UTILITIES


   ---------------------------------------------------------------------------- */


[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .6s var(--tk-ease),transform .6s var(--tk-ease)}


[data-reveal].in{opacity:1;transform:none}





/* ----------------------------------------------------------------------------


   16. RESPONSIVE


   ---------------------------------------------------------------------------- */


@media(max-width:980px){


  .tk-shell{grid-template-columns:1fr}


  .tk-sidebar{position:fixed;top:0;inset-inline-end:0;width:var(--tk-sidebar);transform:translateX(100%);


    transition:transform .3s var(--tk-ease);box-shadow:var(--tk-shadow-md)}


  .tk-sidebar.open{transform:translateX(0)}


  .tk-hamb{display:grid}


}


@media(max-width:640px){


  .tk-content{padding:18px}


  .tk-topbar{padding:12px 18px}


  .tk-shead{flex-direction:column;align-items:flex-start}


}





/* ----------------------------------------------------------------------------


   17. REDUCED MOTION


   ---------------------------------------------------------------------------- */


@media(prefers-reduced-motion:reduce){


  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;


    transition:none!important;scroll-behavior:auto!important}


  [data-reveal]{opacity:1;transform:none}


  .tk-radar .poly{transform:scale(1)!important}.tk-radar .dot{opacity:1!important}


}