/* iC Connect — makieta interaktywna (W1 / W2). Wartości 1:1 z Figma "iSmaControlli-2026". */

@font-face{font-family:'General Sans';src:url('../assets/fonts/GeneralSans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('../assets/fonts/GeneralSans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('../assets/fonts/GeneralSans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --navy:#191464;--blue:#0052CF;--blue-hover:#0046B0;
  --text-2:#7472A3;--text-3:#A3A1C0;
  --border:#E9E9E9;--border-strong:#C0C0CC;
  --subtle:#F4F4F7;--accent:#EEF3FD;--accent-strong:#CCDCF5;--canvas:#E9E9E9;
  --success:#0E7C5A;--success-bg:#E6F4EF;
  --warning:#B45309;--warning-bg:#FCF3E7;--warning-border:#EBC98F;
  --error:#C0362C;
  --tool-bg:#E4F5F0;--product-bg:#E9E9F2;--edu:#A03C7A;--edu-bg:#FAECF4;--plugin:#5B4BC4;--plugin-bg:#EDEBFA;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--canvas);color:var(--navy);font-family:'General Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left}
p{margin:0}
img{display:block}
.sp{display:block;width:1px;flex-shrink:0}
.nowrap{white-space:nowrap}

/* ---------- ikony (wrapper 1:1 jak w eksporcie Figma: box > group(inset) > overflow(outset) > img) ---------- */
.ico{position:relative;display:block;flex-shrink:0}
.ico>img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.ico-g{position:absolute}
.ico-g>img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.ico-o{position:absolute}
.ico-o>img{width:100%;height:100%;max-width:none}

/* ---------- ikony aplikacji (crop 1:1 z Figma) ---------- */
.appicon{position:relative;flex-shrink:0;width:40px;height:40px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff}
.appicon>img{position:absolute;max-width:none}
.appicon--36{width:36px;height:36px;border-radius:9px}
.appicon--64{width:64px;height:64px;border-radius:14px}
.appicon--blank{background:var(--accent)}

/* ---------- szkielet ---------- */
.app{display:flex;flex-direction:column;min-height:100vh;min-width:1280px}
.body{display:flex;align-items:stretch;flex:1}
.main{flex:1;min-width:1px;display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:28px 32px 40px}
.main>*{width:100%}
.main--home{gap:24px;padding:32px 32px 40px}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:20;height:72px;background:#fff;border-bottom:1px solid var(--border);box-shadow:0 2px 8px rgba(25,20,100,.06);display:flex;align-items:center;justify-content:space-between;padding:0 32px}
.logo{display:block;width:192.789px;height:33px;flex-shrink:0}
.logo img{width:100%;height:100%}
.search{display:flex;align-items:center;gap:10px;height:44px;width:560px;flex-shrink:0;padding-left:18px;padding-right:8px;background:var(--subtle);border:1px solid var(--border);border-radius:22px;margin:0}
.search:focus-within{border-color:var(--border-strong)}
/* panel podpowiedzi wyszukiwarki (na wpisywanie) */
.search{position:relative}
.sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(25,20,100,.12);padding:6px;max-height:min(70vh,560px);overflow-y:auto;cursor:default;text-align:left}
.sg-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;color:var(--navy);font-size:14px;line-height:1.4}
.sg-item:hover{background:var(--subtle)}
.sg-item.is-active,.sg-item.is-active:hover{background:var(--accent)}
.sg-search{font-weight:500}
.sg-search img{width:16px;height:16px;flex-shrink:0}
.sg-title{flex:1;min-width:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-title b{font-weight:600}
.sg-pill{flex-shrink:0;background:var(--subtle);border-radius:12px;padding:3px 10px;font-size:12px;font-weight:500;line-height:1.4;color:var(--text-2);white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.sg-sec{display:flex;align-items:center;gap:10px;padding:10px 12px 4px;font-size:11px;font-weight:500;letter-spacing:.3px;text-transform:uppercase;color:var(--text-3);line-height:1.4}
.sg-sec::after{content:"";flex:1;height:1px;background:var(--border)}
.search input{flex:1;min-width:1px;height:100%;border:0;background:transparent;font:inherit;font-size:14px;line-height:1.4;color:var(--navy);outline:none;padding:0;margin:0}
.search input::placeholder{color:var(--text-2);opacity:1}
.search input.has-value{font-weight:500;color:var(--text-2)}
.kbd{background:#fff;border:1px solid var(--border);border-radius:26px;padding:4px 8px;font-size:11px;font-weight:500;letter-spacing:.3px;line-height:1.4;color:var(--text-3);white-space:nowrap}
.account{display:flex;align-items:center;gap:16px;flex-shrink:0}
.lang{display:flex;align-items:center;gap:6px;padding:8px 12px 8px 14px;background:#fff;border:1px solid var(--border);border-radius:20px;font-size:13px;font-weight:500;line-height:1.4;white-space:nowrap}
.lang:hover{background:var(--subtle)}
.seg{display:flex;align-items:center;gap:2px;padding:3px;background:var(--subtle);border:1px solid var(--border);border-radius:19px}
.seg--view{border-radius:18px}
.seg-btn{width:32px;height:30px;border-radius:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.seg-btn:hover{background:rgba(255,255,255,.6)}
.seg-btn.is-active{background:#fff;box-shadow:0 1px 3px rgba(25,20,100,.1)}
.bell{display:block;width:22px;height:22px;flex-shrink:0}
.user{display:flex;align-items:center;gap:10px}
.avatar{width:36px;height:36px;border-radius:18px;background:var(--accent-strong);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0}
.user-info{display:flex;flex-direction:column;gap:1px;white-space:nowrap;line-height:1.4}
.user-name{font-size:13px;font-weight:600}
.user-mail{font-size:11px;color:var(--text-2)}

/* ---------- sidebar W1 ---------- */
.sidebar{width:280px;flex-shrink:0;background:#fff;border-right:1px solid var(--border);padding:24px 16px 32px;display:flex;flex-direction:column;gap:28px}
/* menu przewija się niezależnie od treści: przyklejone pod top barem, własny scroll */
.sidebar,.sidebar2{position:sticky;top:72px;align-self:flex-start;height:calc(100vh - 72px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.sidebar::-webkit-scrollbar,.sidebar2::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb,.sidebar2::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}
.sidebar::-webkit-scrollbar-track,.sidebar2::-webkit-scrollbar-track{background:transparent}
.sidebar>*,.sidebar2>*{flex-shrink:0}
.nav-group{display:flex;flex-direction:column;gap:2px;width:100%}
.nav-head{display:flex;align-items:center;justify-content:space-between;padding:0 8px 4px 12px}
.nav-label{font-size:11px;font-weight:500;letter-spacing:.3px;line-height:1.4;color:var(--text-3);white-space:nowrap}
.nav-label--overline{font-weight:600;letter-spacing:1.2px}
.nav-label--muted{color:var(--text-2)}
.count{display:inline-flex;align-items:center;background:var(--subtle);border-radius:10px;padding:2px 8px;font-size:11px;font-weight:500;line-height:1.4;color:var(--text-2);white-space:nowrap}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:8px;color:var(--navy);font-size:14px;font-weight:500;line-height:1.4;transition:background .12s}
.nav-item:hover{background:var(--subtle)}
.nav-item.is-active,.nav-item.is-active:hover{background:var(--accent);font-weight:600}
.nav-item.is-blue{color:var(--blue)}
.nav-item .lbl{flex:1;min-width:1px}
.nav-item .lbl.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* W1: drzewo kategorii (ekran "Software — Products") */
.nav-tree{display:flex;flex-direction:column;gap:2px;width:100%}
.nav-tree.is-collapsed .nav-sub{display:none}
.nav-item.is-open .lbl{font-weight:600}
.nav-item .chev{transition:transform .15s}
.nav-item.is-open .chev{transform:rotate(90deg)}
.nav-sub{display:block;width:100%;padding:10px 12px 10px 41px;border-radius:8px;color:var(--navy);font-size:14px;font-weight:500;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background .12s}
.nav-sub:hover{background:var(--subtle)}
.nav-sub.is-active,.nav-sub.is-active:hover{background:var(--accent);font-weight:600}

/* ---------- sidebar W2 (PROPO 2) ---------- */
/* W2: 260 px w układzie (16 + 244), ale kontener scrolla ma 272 px z -12 px marginesu, żeby pasek przewijania
   nie zabierał miejsca kartom — trafia w szary odstęp przed treścią (main ma padding-left 24 px) */
.sidebar2{width:272px;margin-right:-12px;z-index:1;flex-shrink:0;padding:20px 0 24px 16px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.nav-card{width:244px;background:#fff;border:1px solid var(--border);border-radius:6px;padding:12px 10px 10px;display:flex;flex-direction:column;gap:2px}
.nav-card .nav-head{padding:0 4px 6px 6px}
.nav-card .nav-item{padding:9px 10px;border-radius:6px;font-size:13px}
.promo{position:relative;width:244px;height:274px;border-radius:6px;overflow:hidden;background:var(--navy);padding:16px 16px 14px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;color:#fff;font-size:14px;font-weight:600;line-height:1.4}
.promo>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:6px}
.promo>*{position:relative}
.promo .dots{display:block;width:45px;height:6px}
.promo .dots img{width:100%;height:100%}

/* ---------- category rail W2 ---------- */
.rail{display:flex;align-items:flex-start;gap:8px;background:#fff;border:1px solid var(--border);border-radius:4px;padding:20px 24px 18px}
.rail-item{display:flex;flex-direction:column;align-items:center;gap:8px;width:90px;flex-shrink:0;text-align:center;font-size:11px;font-weight:500;line-height:1.4;color:var(--text-2)}
.rail-circle{width:58px;height:58px;border-radius:29px;background:var(--subtle);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}
.rail-item:hover .rail-circle{background:var(--accent)}
.rail-item.is-active .rail-circle,.rail-item.is-active:hover .rail-circle{background:var(--navy);border:1px solid var(--navy)}
.rail-item.is-active .rail-circle img{filter:brightness(0) invert(1)}
.rail-item.is-active{color:var(--navy);font-weight:600}

/* ---------- W2: main, home, kategoria ---------- */
.main--w2{padding:20px 32px 40px 24px}
.main--gap18{gap:18px}
.hcard--w2{border:1px solid var(--border);padding:22px 28px 26px}
.hcard--w2 .hcard-head{padding-bottom:16px}
.hcard--w2 .empty{padding:38px 0}
.hcard--w2 .empty-ico{width:60px;height:60px;border-radius:30px}
.btn--cta2{padding:12px 20px 12px 24px;border-radius:22px;font-size:13px;gap:8px}
.nav-item.is-active.is-plain{font-weight:500}
.subcats{display:flex;align-items:center;gap:10px}
.subcat{padding:9px 20px;border-radius:18px;background:#fff;border:1px solid var(--border);font-size:13px;font-weight:500;line-height:1.4;white-space:nowrap}
.subcat:hover{background:var(--subtle)}
.subcat.is-active,.subcat.is-active:hover{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.pthumb{display:flex;align-items:center;justify-content:center;width:56px;height:44px;flex-shrink:0;background:var(--subtle);border:1px solid var(--border);border-radius:4px;overflow:hidden}
.pthumb img{width:100%;height:100%;object-fit:contain;padding:2px}
.appicon--product{background:var(--accent);display:flex;align-items:center;justify-content:center}
.appicon--product>img{position:static;width:100%;height:100%;object-fit:contain;padding:3px;max-width:100%}
.thumb{display:flex;align-items:center;justify-content:center;overflow:hidden}
.thumb img{max-width:100%;max-height:100%;object-fit:contain;padding:8px}
.pimg{display:flex;align-items:center;justify-content:center;overflow:hidden}
.pimg img{width:100%;height:100%;object-fit:contain;padding:12px}
.subcats{flex-wrap:wrap}
a.thumb-item:hover .thumb-label,a.pthumb:hover{color:var(--blue)}
.col-res{width:220px;height:20px;display:flex;align-items:center;gap:6px;flex-shrink:0;font-size:12px;font-weight:500;color:var(--text-2);white-space:nowrap}
.fav{position:relative;width:18px;height:18px;flex-shrink:0}
.fav .ico{position:absolute;inset:0}
.fav .ico:last-child{display:none}
.fav.is-on .ico:first-child{display:none}
.fav.is-on .ico:last-child{display:block}

/* ---------- breadcrumb / nagłówki ---------- */
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.4;white-space:nowrap}
.crumb a{font-weight:500;color:var(--text-2)}
.crumb a:hover{color:var(--navy)}
.crumb .sep{color:var(--text-3)}
.crumb .cur{font-weight:600;color:var(--navy)}
.page-head{display:flex;align-items:center;justify-content:space-between}
.title-block{display:flex;flex-direction:column;gap:2px;white-space:nowrap;line-height:1.4}
.h1{font-size:26px;font-weight:600;letter-spacing:-.4px;line-height:1.25}
.h2{font-size:22px;font-weight:600;letter-spacing:-.2px;line-height:1.4}
.h3{font-size:19px;font-weight:600;letter-spacing:-.2px;line-height:1.4}
.h4{font-size:17px;font-weight:600;letter-spacing:-.1px;line-height:1.4}
.h5b{font-size:14px;font-weight:600;line-height:1.4}
.sub{font-size:12px;color:var(--text-2)}
.hint{font-size:12px;font-weight:500;color:var(--text-3)}
.head-right{display:flex;align-items:center;gap:32px}
.filters{display:flex;align-items:center;gap:8px}
.filter{display:flex;align-items:center;gap:6px;padding:8px 10px 8px 14px;background:#fff;border:1px solid var(--border);border-radius:18px;font-size:13px;font-weight:500;line-height:1.4;white-space:nowrap}
.filter:hover{background:var(--subtle)}
.filter.is-active,.filter.is-active:hover{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600;padding:8px 14px}

/* ---------- przyciski ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:20px;font-size:13px;font-weight:600;line-height:1.4;white-space:nowrap;transition:background .12s,border-color .12s}
.btn--primary{background:var(--blue);color:#fff}
.btn--primary:hover{background:var(--blue-hover)}
.btn--outline{background:#fff;border:1px solid var(--border-strong);color:var(--navy)}
.btn--outline:hover{background:var(--subtle)}
.btn--warn{background:#fff;border:1px solid var(--warning-border);color:var(--warning);padding:8px 16px;border-radius:18px}
.btn--warn:hover{background:var(--warning-bg)}
.btn--card{width:100%;padding:10px 16px;border-radius:20px}
.btn--row{padding:9px 18px;border-radius:18px}
.btn--sm{padding:8px 16px;border-radius:18px}
.btn--hero{padding:11px 22px;font-size:14px;border-radius:20px}
.btn--cta{padding:13px 20px 13px 24px;font-size:14px;border-radius:24px}
.btn--wide{width:100%;padding:10px 20px;border-radius:18px}
.btn.is-disabled{opacity:.5;pointer-events:none}
.icon-btn{width:40px;height:40px;border-radius:20px;background:#fff;border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.icon-btn:hover{background:var(--subtle)}

/* ---------- chipy / badge ---------- */
.chip{display:inline-flex;align-items:center;padding:3px 8px;border-radius:6px;background:var(--accent);color:var(--blue);font-size:11px;font-weight:600;letter-spacing:.3px;line-height:1.4;white-space:nowrap}
.chip--sm{padding:2px 8px}
.chip--outline{background:transparent;border:1px solid var(--border-strong);color:var(--text-2);font-weight:500}
.chip--tool{background:var(--tool-bg);color:var(--success)}
.chip--product{background:var(--product-bg);color:var(--navy)}
.chip--docs{background:var(--warning-bg);color:var(--warning)}
.chip--edu{background:var(--edu-bg);color:var(--edu)}
.chip--plugin{background:var(--plugin-bg);color:var(--plugin)}

/* ---------- statusy ---------- */
.status{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;line-height:1.4;white-space:nowrap}
.status--strong{font-weight:600}
.status--ok{color:var(--success)}
.status--update{color:var(--warning)}
.status--muted{color:var(--text-2)}
.status--busy{color:var(--blue)}
.status--error{color:var(--error)}
.progress{display:block;height:6px;background:var(--canvas);border-radius:3px;overflow:hidden;flex-shrink:0}
.progress>i{display:block;height:6px;background:var(--blue);border-radius:3px;transition:width .1s linear}
.searches{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--blue);white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 10px;border-radius:14px;font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap}
.pill--ok{background:var(--success-bg);color:var(--success)}
.pill--muted{background:var(--subtle);color:var(--text-2)}

/* ---------- karty (All Software / grid) ---------- */
.grid{display:flex;flex-direction:column;gap:20px}
.grid-row{display:flex;align-items:stretch;gap:20px}
.card{flex:1;min-width:1px;background:#fff;border:1px solid var(--border);border-radius:4px;padding:18px 20px;display:flex;flex-direction:column;align-items:flex-start;transition:box-shadow .12s}
.card:hover{box-shadow:0 2px 10px rgba(25,20,100,.06)}
.card--legacy{border-style:dashed;border-color:var(--border-strong)}
.card-top{display:flex;align-items:center;justify-content:space-between;width:100%}
.card-top .left{display:flex;align-items:center;gap:10px}
.card-name{font-size:16px;font-weight:600;letter-spacing:-.1px;line-height:1.4;white-space:nowrap}
a.card-name:hover{color:var(--blue)}
.card-sub{font-size:12px;color:var(--text-2);line-height:1.4;white-space:nowrap}
.card-meta{display:flex;align-items:center;justify-content:space-between;width:100%}
.card-installing{display:flex;flex-direction:column;gap:14px;width:100%}
.more{display:block;width:18px;height:18px;flex-shrink:0;border-radius:4px}
.more:hover{background:var(--subtle)}

/* ---------- wiersze list ---------- */
.rows{display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--border);border-radius:4px;padding:14px 18px;transition:box-shadow .12s}
.row:hover{box-shadow:0 2px 10px rgba(25,20,100,.06)}
.row--legacy{border-style:dashed;border-color:var(--border-strong)}
.row[hidden]{display:none}
.row-name{flex:1;min-width:1px;display:flex;flex-direction:column;gap:2px;line-height:1.4}
.row-title{font-size:15px;font-weight:600;letter-spacing:-.1px}
a.row-title:hover{color:var(--blue)}
.row-sub{font-size:12px;color:var(--text-2);white-space:nowrap}
.row-err{font-size:12px;font-weight:500;color:var(--error)}
.row-note{font-size:12px;font-weight:500;color:var(--text-2)}
.col-type{width:96px;height:26px;display:flex;align-items:center;flex-shrink:0}
.col-status{width:200px;height:20px;display:flex;align-items:center;flex-shrink:0}
.col-action{width:140px;height:36px;display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}

/* ---------- szczegół ---------- */
.phead{display:flex;align-items:center;justify-content:space-between}
.phead .left{display:flex;align-items:center;gap:18px;flex:1;min-width:1px}
.identity{display:flex;flex-direction:column;gap:6px;flex:1;min-width:1px;align-items:flex-start}
.meta{display:flex;align-items:center;gap:10px}
.meta-text{font-size:13px;color:var(--text-2);white-space:nowrap}
.actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.panel{background:#fff;border:1px solid var(--border);border-radius:4px;padding:20px 24px 24px;display:flex;flex-direction:column;align-items:flex-start}
.panel>*{max-width:100%}
.panel-head{display:flex;align-items:center;justify-content:space-between;width:100%;line-height:1.4;white-space:nowrap}
.long{font-size:13px;color:var(--text-2);line-height:1.55;width:100%}
.features{display:flex;flex-direction:column;gap:8px;width:100%}
.feature{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--text-2);line-height:1.4}
.feature .txt{flex:1;min-width:1px}
.link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--blue);line-height:1.4;white-space:nowrap}
.link:hover{text-decoration:underline}
.link--sm{font-size:12px}
.thumbs{display:flex;align-items:center;gap:14px;width:100%}
.thumb-item{flex:1;min-width:1px;display:flex;flex-direction:column;gap:8px}
.thumb{height:96px;width:100%;background:var(--subtle);border:1px solid var(--border);border-radius:4px}
.thumb-label{font-size:12px;font-weight:500;line-height:1.4}
.srow{display:flex;align-items:center;gap:14px;width:100%;background:var(--subtle);border-radius:4px;padding:12px 14px}
.srow .row-name{white-space:nowrap}
.srow .row-title{font-size:14px;letter-spacing:0}
.srow .col-status{width:180px}
.docs{display:flex;flex-direction:column;width:100%}
.doc{display:flex;align-items:center;justify-content:space-between;padding:12px 0;width:100%}
.doc .left{display:flex;align-items:center;gap:12px;flex:1;min-width:1px}
.doc-name{display:flex;flex-direction:column;gap:1px;white-space:nowrap;line-height:1.4}
.doc-title{font-size:14px;font-weight:500}
.doc-meta{font-size:11px;color:var(--text-3)}
.divider{height:1px;background:var(--border);width:100%;flex-shrink:0}
.note{display:flex;align-items:flex-start;gap:10px;width:100%;background:var(--subtle);border:1px dashed var(--border-strong);border-radius:4px;padding:12px 14px}
.note .text{flex:1;min-width:1px;display:flex;flex-direction:column;gap:3px;line-height:1.4}
.note-title{font-size:13px;font-weight:600;white-space:nowrap}
.note-desc{font-size:12px;color:var(--text-2)}
.banner{display:flex;align-items:flex-start;gap:12px;background:var(--warning-bg);border:1px solid var(--warning-border);border-radius:4px;padding:14px 16px}
.banner .text{flex:1;min-width:1px;display:flex;flex-direction:column;gap:3px;color:var(--warning)}
.banner-title{font-size:13px;font-weight:600;line-height:1.4;white-space:nowrap}
.banner-desc{font-size:12px;line-height:1.5}

/* ---------- produkt ---------- */
.pdesc{display:flex;align-items:flex-start;gap:24px;width:100%}
.pimg{width:240px;height:180px;flex-shrink:0;background:var(--subtle);border:1px solid var(--border);border-radius:4px}
.specs{flex:1;min-width:1px;display:flex;flex-direction:column;gap:12px;font-size:13px}
.spec{display:flex;flex-direction:column;gap:2px}
.spec b{font-weight:600;line-height:1.4;white-space:nowrap}
.spec span{color:var(--text-2);line-height:1.55}
.variants{display:flex;align-items:center;gap:10px;width:100%}
.variant{padding:10px 18px;border-radius:18px;background:#fff;border:1px solid var(--border-strong);font-size:13px;font-weight:500;line-height:1.4;white-space:nowrap}
.variant:hover{background:var(--subtle)}
.variant.is-active,.variant.is-active:hover{background:var(--accent);border-color:var(--blue);color:var(--blue);font-weight:600}
.sw-grid{display:flex;align-items:stretch;gap:16px;width:100%}
.sw-card{flex:1;min-width:1px;background:var(--subtle);border:1px solid var(--border);border-radius:4px;padding:16px 18px;display:flex;flex-direction:column;align-items:flex-start}
.sw-card .btn{margin-top:auto}
.sw-top{display:flex;align-items:center;gap:10px;width:100%}
.sw-name{flex:1;min-width:1px;display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.sw-desc{font-size:12px;color:var(--text-2);line-height:1.5;width:100%}
.acc{display:flex;flex-direction:column;width:100%}
.acc-sec{display:flex;flex-direction:column;width:100%}
.acc-head{display:flex;align-items:center;justify-content:space-between;padding:14px 0;width:100%;cursor:pointer}
.acc-head .left{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;line-height:1.4;white-space:nowrap}
.acc-body{display:flex;flex-direction:column;width:100%}
.acc-sec:not(.is-open) .acc-body{display:none}
.file{display:flex;align-items:center;justify-content:space-between;background:var(--subtle);border-radius:4px;padding:12px 14px;width:100%}
.file .left{display:flex;align-items:center;gap:12px;flex:1;min-width:1px}
.file-name{display:flex;flex-direction:column;gap:1px;line-height:1.4;min-width:1px}
.file-title{font-size:13px;font-weight:500}
.file-meta{font-size:11px;color:var(--text-3);white-space:nowrap}
.tut-grid{display:flex;flex-direction:column;gap:16px;width:100%}
.tut-row{display:flex;align-items:flex-start;gap:16px;width:100%}
.tut{flex:1;min-width:1px;display:flex;align-items:flex-start;gap:14px;background:var(--subtle);border:1px solid var(--border);border-radius:4px;padding:14px}
.tut-thumb{width:72px;height:56px;flex-shrink:0;background:#fff;border:1px solid var(--border);border-radius:4px}
.tut-text{flex:1;min-width:1px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.tut-title{font-size:13px;font-weight:600;line-height:1.4}
.tut-desc{font-size:12px;color:var(--text-2);line-height:1.5}
.videos{display:flex;align-items:flex-start;gap:16px;width:100%}
.video{flex:1;min-width:1px;display:flex;flex-direction:column;gap:8px}
.video-thumb{height:112px;width:100%;background:var(--navy);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.video-thumb:hover{background:#231c80}
.video-meta{display:flex;align-items:flex-start;gap:8px;line-height:1.4}
.video-title{flex:1;min-width:1px;font-size:12px;font-weight:500}
.video-dur{font-size:11px;font-weight:600;color:var(--text-3);white-space:nowrap}

/* ---------- home ---------- */
.hero{position:relative;height:190px;border-radius:4px;overflow:hidden;background:var(--navy);display:flex;align-items:center;justify-content:space-between;padding:36px 40px}
.hero>img{position:absolute;left:0;top:-112.24%;width:114.65%;height:324.47%;max-width:none}
.hero-copy{position:relative;display:flex;flex-direction:column;gap:20px;flex:1;min-width:1px}
.hero-title{font-size:26px;font-weight:600;color:#fff;letter-spacing:-.4px;line-height:1.25}
.hero-dots{display:block;width:53px;height:8px}
.hero-dots img{width:100%;height:100%}
.hcard{background:#fff;border-radius:4px;padding:24px 28px 28px;display:flex;flex-direction:column}
.hcard-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px}
.count--lg{padding:3px 10px;border-radius:12px;font-size:12px}
.empty{display:flex;flex-direction:column;align-items:center;padding:44px 0;text-align:center}
.empty-ico{width:64px;height:64px;border-radius:32px;background:var(--subtle);display:flex;align-items:center;justify-content:center}
.empty-title{font-size:16px;font-weight:600;letter-spacing:-.1px;line-height:1.4}
.empty-desc{font-size:13px;color:var(--text-2);line-height:1.4}