/* ── UI Kit bileşenleri (form, pencere, takvim, kanban, grafik) — ui.css'ten sonra yüklenir ── */
:root{ --ch-1:var(--c-primary); --ch-2:var(--c-collect); --ch-3:var(--c-warning); --ch-4:var(--c-success); --ch-5:var(--c-neutral); --ch-6:var(--c-danger); }

html{scrollbar-gutter:stable}
.ui-portal{display:contents}

/* Alan kutusu: ikon, sonek, doğrulama işareti */
.inp-wrap{position:relative; display:flex; align-items:center; min-width:0}
.inp-wrap .inp{flex:1; min-width:0}
.inp-wrap.has-ic .inp{padding-left:36px}
.inp-ic{position:absolute; left:12px; color:var(--c-faint); pointer-events:none}
.inp-wrap.has-sfx .inp{padding-right:40px}
.inp-sfx{position:absolute; right:12px; font-family:var(--font-mono); font-size:13px; color:var(--c-muted); pointer-events:none}
.inp-wrap.has-ok .inp{padding-right:34px}
.inp-wrap.has-ok.has-sfx .inp{padding-right:58px}
.inp-ok{position:absolute; right:12px; color:var(--c-success); opacity:0; transition:opacity .15s; pointer-events:none}
.inp-wrap.has-sfx .inp-ok{right:36px}
.inp-wrap.ok .inp-ok{opacity:1}
.inp-wrap.sel .inp{appearance:none; -webkit-appearance:none; padding-right:34px; cursor:pointer}
.sel-car{position:absolute; right:12px; color:var(--c-muted); pointer-events:none}
.inp:disabled{opacity:.55; cursor:default}
.money-in .inp{font-family:var(--font-mono); text-align:right}
.money-in.lg .inp{height:56px; font-size:26px; padding-right:44px}
.money-in.lg .inp-sfx{font-size:20px}
.numin{display:flex; align-items:center; gap:6px}
.numin .inp{width:90px; flex:none; text-align:center; font-family:var(--font-mono)}
.numin .btn.icon{width:40px; height:40px; font-size:18px; padding:0}
.fg-lbl{text-transform:none; letter-spacing:0; font-family:var(--font); font-size:13px; font-weight:500; color:var(--c-text)}
.fg-lbl i{color:var(--c-danger); font-style:normal}

/* Aranabilir seçim */
.cbx-btn{display:flex; align-items:center; gap:8px; text-align:left; cursor:pointer; padding-right:34px; position:relative; min-height:40px; height:auto}
.cbx-val{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cbx-ph{color:var(--c-faint)}
.cbx-btn .sel-car{right:12px}
.cbx-x{position:absolute; right:32px; top:50%; transform:translateY(-50%); width:22px; height:22px; display:grid; place-items:center; color:var(--c-muted); border-radius:4px}
.cbx-x:hover{color:var(--c-danger); background:var(--c-hover)}
.cbx-chips{flex:1; display:flex; flex-wrap:wrap; gap:4px; padding:6px 22px 6px 0; min-width:0}
.cbx-chip{display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 2px 0 8px; border-radius:4px; background:var(--c-aside); font-size:12.5px}
.cbx-chip span[role=button]{width:18px; height:18px; display:grid; place-items:center; color:var(--c-muted); border-radius:3px; font-size:15px}
.cbx-chip span[role=button]:hover{color:var(--c-danger)}
.cbx-pop{left:0; right:0; top:calc(100% + 4px); padding:0; overflow:hidden; min-width:0}
.cbx-search{display:flex; align-items:center; gap:8px; padding:0 12px; border-bottom:1px solid var(--c-border); color:var(--c-faint)}
.cbx-search input{flex:1; height:40px; border:0; outline:0; background:transparent; color:var(--c-text)}
.cbx-list{max-height:260px; overflow-y:auto; padding:4px}
.pop .cbx-list button{height:auto; min-height:36px; padding:6px 10px}
.cbx-list button .sp{flex:1; min-width:0; display:flex; flex-direction:column}
.cbx-list button small{font-size:12px; color:var(--c-muted)}
.cbx-list button.act{background:var(--c-hover)}
.cbx-list button.on{color:var(--c-primary)}
.cbx-tick{opacity:0} .cbx-list button.on .cbx-tick{opacity:1; color:var(--c-primary)}
.cbx-none{padding:14px; text-align:center; color:var(--c-muted); font-size:13px}

/* Seçim kartları */
.rcards{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px}
.rcard{position:relative; cursor:pointer}
.rcard input{position:absolute; opacity:0; pointer-events:none}
.rcard-in{display:flex; align-items:center; gap:12px; height:100%; padding:12px 14px; border:2px solid var(--c-btn-line); border-radius:6px; background:var(--c-surface); transition:border-color .12s}
.rcard-in .sp{flex:1; min-width:0}
.rcard-in b{display:block; font-weight:500}
.rcard-in small{display:block; font-size:12.5px; color:var(--c-muted)}
.rdot{width:18px; height:18px; flex:none; border-radius:999px; border:2px solid var(--c-border-strong)}
.rcard:hover .rcard-in{border-color:var(--c-border-strong)}
.rcard input:checked + .rcard-in{border-color:var(--c-primary)}
.rcard input:checked + .rcard-in .rdot{border:5px solid var(--c-primary)}
.rcard input:checked + .rcard-in .ic-box{background:var(--c-primary-soft); color:var(--c-primary)}
.rcard input:focus-visible + .rcard-in{outline:2px solid var(--c-primary); outline-offset:2px}

/* Tarih seçici */
.dp-pop{left:0; top:calc(100% + 4px); width:296px; padding:10px; min-width:0}
.dp-pop button{width:auto; height:auto; padding:0; justify-content:center}
.dp-h{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.dp-h b{font-weight:500}
.pop .dp-h .icon-btn{width:32px; height:32px}
.dp-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.dp-dow{font-family:var(--font-cond); font-size:11.5px; font-weight:600; color:var(--c-muted); text-align:center; padding:4px 0; text-transform:uppercase}
.pop .dp-d{height:34px; border-radius:6px; font-size:13px; font-variant-numeric:tabular-nums; display:grid; place-items:center}
.dp-d.we{color:var(--c-muted)}
.dp-d.out{opacity:.35}
.dp-d.today{box-shadow:inset 0 0 0 1px var(--c-primary); color:var(--c-primary)}
.pop .dp-d.mid{background:var(--c-primary-soft); border-radius:0}
.pop .dp-d.on,.pop .dp-d.on:hover{background:var(--c-primary); color:var(--c-primary-ink)}
.dp-f{display:flex; gap:6px; align-items:center; margin-top:8px; padding-top:8px; border-top:1px solid var(--c-border)}
.dp-f .sp{flex:1}
.pop .dp-f .btn{height:28px; padding:0 10px}
.dr-pop{display:grid; grid-template-columns:130px 260px 260px; gap:14px; width:auto}
.dr-pre{display:flex; flex-direction:column; gap:2px; border-right:1px solid var(--c-border); padding-right:10px}
.pop .dr-pre button{justify-content:flex-start; height:32px; padding:0 10px; font-size:13px}

/* Dosya yükleme */
.upl{display:flex; flex-direction:column; gap:8px}
.upl-inp{position:absolute; width:1px; height:1px; opacity:0}
.upl-zone{display:flex; align-items:center; gap:12px; padding:16px; border:2px dashed var(--c-btn-line); border-radius:6px; background:var(--c-surface-2); color:var(--c-muted); cursor:pointer; transition:border-color .12s, background .12s}
.upl-zone b{color:var(--c-text); font-weight:500}
.upl-zone:hover,.upl.drag .upl-zone{border-color:var(--c-primary); background:var(--c-primary-soft)}
.upl-inp:focus-visible + .upl-zone{outline:2px solid var(--c-primary); outline-offset:2px}
.upl-list{list-style:none; margin:0; padding:0}
.upl-list li{display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px solid var(--c-border); font-size:13.5px}
.upl-list li .sp{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* Adres */
.addr{display:flex; flex-direction:column; gap:8px}
.addr-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}

/* Pencere (modal) */
.dlg-wrap{position:fixed; inset:0; z-index:75; display:grid; place-items:center; padding:16px; overflow-y:auto}
.dlg-wrap .scrim{position:fixed; z-index:0}
.dlg{position:relative; z-index:1; width:min(560px,100%); max-height:calc(100dvh - 32px); display:flex; flex-direction:column; box-shadow:var(--shadow-pop)}
.dlg-sm{width:min(440px,100%)} .dlg-lg{width:min(820px,100%)}
.dlg-h{display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--c-border)}
.dlg-h .sp{flex:1; min-width:0}
.dlg-h h2{margin:0; font-size:18px; font-weight:400}
.dlg-h p{margin:2px 0 0; font-size:12.5px; color:var(--c-muted)}
.dlg-b{padding:18px 20px; overflow-y:auto; display:flex; flex-direction:column; gap:16px}
.dlg-f{display:flex; justify-content:flex-end; gap:8px; padding:12px 20px; border-top:1px solid var(--c-border); background:var(--c-surface-2); border-radius:0 0 6px 6px}
.ic-box.tone-danger{background:color-mix(in oklab, var(--c-danger) 14%, var(--c-surface)); color:var(--c-danger)}
.ic-box.tone-info{background:color-mix(in oklab, var(--c-info) 14%, var(--c-surface)); color:var(--c-info)}
.btn.danger-fill{background:var(--c-danger); border-color:var(--c-danger); color:#fff}
.btn.danger-fill:hover{background:color-mix(in oklab, var(--c-danger) 85%, #000); color:#fff}
.drawer.wide{width:min(720px,100%)}

/* Boş durum, ilerleme, iskelet */
.empty-state{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:40px 20px; color:var(--c-muted)}
.empty-state b{color:var(--c-text); font-weight:500; font-size:15px}
.empty-state p{margin:0; max-width:420px; font-size:13.5px}
.empty-ic{width:52px; height:52px; border-radius:999px; background:var(--c-aside); display:grid; place-items:center; margin-bottom:6px}
.empty-ic svg.i{width:24px; height:24px}
.empty-act{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:10px}
.progress-h{display:flex; justify-content:space-between; font-size:13px; color:var(--c-muted)}
.bar i.tone-success{background:var(--c-success)} .bar i.tone-warning{background:var(--c-warning)} .bar i.tone-danger{background:var(--c-danger)} .bar i.tone-collect{background:var(--c-collect)}
.skel{display:block; height:12px; border-radius:4px; background:linear-gradient(90deg, var(--c-surface-2) 25%, color-mix(in oklab, var(--c-text) 7%, var(--c-surface)) 50%, var(--c-surface-2) 75%); background-size:200% 100%; animation:skel 1.3s infinite linear}
.skel.sm{height:9px}
.skel.sq{width:44px; height:44px; border-radius:8px; flex:none}
@keyframes skel{to{background-position:-200% 0}}
.skel-row{display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--c-surface); border-bottom:1px solid var(--c-border)}
.skel-col{flex:1; display:flex; flex-direction:column; gap:8px}

/* İpucu (tooltip): data-tip="metin" */
[data-tip]{position:relative}
[data-tip]:hover::after,[data-tip]:focus-visible::after{content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%); z-index:85; padding:5px 8px; border-radius:4px; background:var(--c-cta); color:var(--c-cta-ink); font:500 12px/1.3 var(--font); white-space:nowrap; pointer-events:none; box-shadow:var(--shadow-pop)}

/* Bölümlü düğme grubu (Ay | Hafta | Ajanda) */
.seg{display:inline-flex; padding:2px; border-radius:6px; background:var(--c-field)}
.seg button{height:30px; padding:0 12px; border:0; border-radius:4px; background:transparent; color:var(--c-muted); font-size:12px; font-weight:600; letter-spacing:.5px; text-transform:uppercase}
.seg button.on{background:var(--c-surface); color:var(--c-text); box-shadow:0 1px 2px rgb(0 0 0 / .08)}

/* Takvim */
.cal-h{display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--c-border)}
.cal-h h3{flex:1; margin:0; font-size:17px; font-weight:400; min-width:140px}
.cal-nav{display:flex; align-items:center; gap:4px}
.cal-month{display:grid; grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-dow{padding:8px 10px; font-family:var(--font-cond); font-size:12px; font-weight:600; letter-spacing:.5px; color:var(--c-muted); text-transform:uppercase; border-bottom:1px solid var(--c-border)}
.cal-day{min-height:104px; padding:6px; border-right:1px solid var(--c-border); border-bottom:1px solid var(--c-border); display:flex; flex-direction:column; gap:3px; min-width:0}
.cal-day:nth-child(7n){border-right:0}
.cal-day.we{background:color-mix(in oklab, var(--c-surface-2) 60%, var(--c-surface))}
.cal-day.out .cal-n{opacity:.4}
.cal-n{font-size:12.5px; color:var(--c-muted); padding:2px 4px; align-self:flex-start; border-radius:999px; font-variant-numeric:tabular-nums}
.cal-day.today .cal-n{background:var(--c-primary); color:var(--c-primary-ink); padding:2px 7px}
.cal-day.over,.cal-wcol.over{background:var(--c-primary-soft)}
.cal-ev{--b:var(--c-neutral); display:flex; gap:5px; align-items:center; width:100%; min-width:0; padding:2px 6px; border:0; border-left:3px solid var(--b); border-radius:3px; background:color-mix(in oklab, var(--b) 12%, var(--c-surface)); color:var(--c-text); font-size:12px; text-align:left; cursor:grab}
.cal-ev span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cal-ev b{font-weight:500; font-family:var(--font-mono); font-size:11px}
.cal-ev.big{flex-direction:column; align-items:flex-start; gap:1px; padding:6px 8px}
.cal-ev.big span{white-space:normal}
.cal-ev.success{--b:var(--c-success)} .cal-ev.warning{--b:var(--c-warning)} .cal-ev.danger{--b:var(--c-danger)} .cal-ev.info{--b:var(--c-info)} .cal-ev.primary{--b:var(--c-primary)}
.cal-more{font-size:11.5px; color:var(--c-muted); padding-left:4px}
.cal-week{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); min-height:340px}
.cal-wcol{border-right:1px solid var(--c-border); padding:8px 6px; display:flex; flex-direction:column; gap:4px; min-width:0}
.cal-wcol:last-child{border-right:0}
.cal-wh{display:flex; flex-direction:column; align-items:center; padding-bottom:8px; margin-bottom:4px; border-bottom:1px solid var(--c-border); font-family:var(--font-cond); font-size:12px; font-weight:600; color:var(--c-muted); text-transform:uppercase}
.cal-wh b{font-family:var(--font); font-size:20px; font-weight:400; color:var(--c-text)}
.cal-wcol.today .cal-wh b{color:var(--c-primary)}
.cal-agenda{padding:6px 0}
.cal-ag-d{padding:12px 20px 4px; font-family:var(--font-cond); font-size:13px; font-weight:600; letter-spacing:.5px; color:var(--c-muted); text-transform:uppercase}
.cal-ag-d.today{color:var(--c-primary)}
.tdot{width:10px; height:10px; flex:none; border-radius:999px; background:var(--c-neutral)}
.tdot.success{background:var(--c-success)} .tdot.warning{background:var(--c-warning)} .tdot.danger{background:var(--c-danger)} .tdot.info{background:var(--c-info)} .tdot.primary{background:var(--c-primary)}
.timeline .tdot.danger{background:var(--c-danger)}

/* Kanban */
.kb{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px,1fr); gap:14px; overflow-x:auto; padding-bottom:6px; align-items:start}
.kb-col{background:var(--c-aside); border-radius:6px; box-shadow:var(--shadow-card); display:flex; flex-direction:column; min-height:160px; transition:background .12s}
.kb-col.over{background:var(--c-primary-soft)}
.kb-h{display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--c-border)}
.kb-h b{font-weight:500; font-size:14px}
.kb-h .sp{flex:1}
.kb-h .m{font-size:12.5px}
.kb-cards{display:flex; flex-direction:column; gap:8px; padding:10px; min-height:60px}
.kb-card{background:var(--c-surface); border-radius:6px; box-shadow:0 1px 3px rgb(0 0 0 / .08); padding:12px 12px 10px; cursor:grab}
.kb-card:hover{box-shadow:0 2px 8px rgb(0 0 0 / .14)}
.kb-card.dragging{opacity:.45}
.kb-card .l1{font-size:14px; white-space:normal}
.kb-f{display:flex; align-items:center; gap:8px; margin-top:10px; font-size:12.5px}
.kb-f .sp{flex:1}
.kb-empty{margin:-4px 10px 10px; padding:14px; border:2px dashed var(--c-btn-line); border-radius:6px; text-align:center; font-size:12.5px; color:var(--c-muted)}

/* Grafik */
.chart{display:flex; flex-direction:column; gap:10px; min-width:0}
.ch-legend{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--c-muted)}
.ch-legend li{display:flex; align-items:center; gap:6px}
.ch-legend i{width:10px; height:10px; border-radius:3px; flex:none}
.ch-legend.col{flex-direction:column; flex-wrap:nowrap; gap:0; flex:1; min-width:0}
.ch-legend.col li{padding:9px 0; border-bottom:1px solid var(--c-border); font-size:13.5px; color:var(--c-text); gap:10px}
.ch-legend.col li:last-child{border-bottom:0}
.ch-legend .sp{flex:1}
.ch-body{position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px}
.ch-y{position:relative; width:56px}
.ch-y span{position:absolute; right:0; transform:translateY(-50%); font-family:var(--font-mono); font-size:11px; color:var(--c-muted); white-space:nowrap}
.ch-plot{position:relative}
.ch-grid{position:absolute; left:0; right:0; border-top:1px dashed var(--c-border)}
.ch-grid.zero{border-top:1px solid var(--c-border-strong)}
.ch-slot{position:absolute; top:0; bottom:0}
.ch-group{position:absolute; inset:0 18%}
.ch-group .ch-bar,.ch-stack .ch-bar{position:absolute}
.ch-stack{position:absolute; inset:0 26%}
.ch-bar{display:block; border-radius:3px 3px 0 0; transition:opacity .12s}
.ch-stack .ch-bar{left:0; right:0; border-radius:0}
.ch-bar:hover{opacity:.8}
.ch-svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.ch-line{fill:none; stroke-width:2.25; stroke-linejoin:round; stroke-linecap:round}
.ch-area{opacity:.12; stroke:none}
.ch-dot{position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:999px; background:var(--c-surface); border:2px solid; z-index:1}
.ch-dot:hover{transform:scale(1.3)}
.ch-x{display:flex; margin-left:64px}
.ch-x span{flex:1; min-width:0; text-align:center; font-size:11.5px; color:var(--c-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chart-donut{flex-direction:row; align-items:center; gap:24px}
.donut{width:180px; height:180px; flex:none}
.donut-bg{fill:none; stroke:var(--c-surface-2); stroke-width:5}
.donut-seg{fill:none; stroke-width:5; transition:stroke-width .12s}
.donut-seg:hover{stroke-width:6.5}
.donut-v{font:500 5px var(--font-mono); fill:var(--c-text); text-anchor:middle}
.donut-l{font:600 2.6px var(--font-cond); fill:var(--c-muted); text-anchor:middle; text-transform:uppercase; letter-spacing:.2px}
.spark{display:inline-block; vertical-align:middle; overflow:visible}
.spark polyline{fill:none; stroke:var(--c-primary); stroke-width:1.75; stroke-linejoin:round; stroke-linecap:round}
.spark.tone-success polyline{stroke:var(--c-success)} .spark.tone-danger polyline{stroke:var(--c-danger)}

/* Tablo içi açılır menü: tablo kutusunun taşma kırpmasından kurtulmak için ekrana göre (x-anchor.fixed) konumlanır */
.pop.fx{position:fixed; z-index:60}

/* Satır seçimi (Paraşüt düzeni): simge kutusu üzerine gelince / seçim modunda onay kutusuna döner */
.rowsel{position:relative; display:block; width:44px; height:44px; cursor:pointer}
.rowsel input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; z-index:2; cursor:pointer}
.rowsel .selbox{display:none; width:44px; height:44px; border-radius:8px; background:var(--c-aside); border:1px solid var(--c-border-strong); place-items:center; color:transparent}
.rowsel.head,.rowsel.head .selbox{width:30px; height:30px; border-radius:6px}
.rowsel.head .selbox{display:grid; background:transparent; border-width:2px; color:transparent}
.rowsel input:checked ~ .selbox{background:var(--c-field); border-color:var(--c-field); color:var(--c-text)}
.rowsel.head input:checked ~ .selbox{background:var(--c-field); color:var(--c-text)}
.rowsel input:focus-visible ~ .selbox{outline:2px solid var(--c-primary); outline-offset:2px}
tr:hover .rowsel .unit-ic,.selmode .rowsel .unit-ic,.rowsel input:focus-visible ~ .unit-ic{display:none}
tr:hover .rowsel .selbox,.selmode .rowsel .selbox,.rowsel input:focus-visible ~ .selbox{display:grid}
tr:hover .rowsel input:not(:checked) ~ .selbox{color:var(--c-faint)}
.selbar{align-items:center; min-height:40px}
.selbar .btn.flat{height:40px; padding:0 16px; font-size:12px; color:var(--c-text)}
.selbar .btn.flat:hover{background:color-mix(in oklab, var(--c-field) 80%, var(--c-text))}
.selbar-info{font-size:13px; color:var(--c-muted); margin-left:4px}
.selbar-info b{color:var(--c-text)}

/* Kasa / banka kartları */
.cash-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px}
.cash-card{display:flex; align-items:center; gap:12px; padding:14px 16px; border:2px solid transparent; border-radius:6px; background:var(--c-surface); box-shadow:var(--shadow-card); text-align:left; color:var(--c-text)}
.cash-card .sp{flex:1; min-width:0}
.cash-card b{display:block; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cash-card small{display:block; font-size:12px; color:var(--c-muted)}
.cash-card .m{font-size:15px}
.cash-card.on{border-color:var(--c-primary)}
.cash-card.off{opacity:.6}

/* UI Kit sayfası */
.kit-nav{position:sticky; top:80px; z-index:4; display:flex; gap:6px; flex-wrap:wrap; padding:0 0 12px; background:var(--c-bg)}
.kit-nav a{height:30px; display:inline-flex; align-items:center; padding:0 12px; border-radius:999px; background:var(--c-surface); color:var(--c-muted); font-size:12px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; text-decoration:none; box-shadow:var(--shadow-card)}
.kit-nav a:hover{color:var(--c-text)}
.kit-sec{scroll-margin-top:136px}
.kit-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.kit-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.kit-code{font-family:var(--font-mono); font-size:12px; color:var(--c-muted); background:var(--c-surface-2); border-radius:4px; padding:2px 6px}

@media (max-width:899px){
  .addr-grid,.kit-grid{grid-template-columns:minmax(0,1fr)}
  .dr-pop{grid-template-columns:minmax(0,1fr); width:min(300px, calc(100vw - 32px))}
  .dr-pre{flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--c-border); padding:0 0 8px}
  .dr-m.k1{display:none}
  .cal-day{min-height:64px; padding:3px}
  .cal-ev span{display:none}
  .cal-ev{height:6px; padding:0; border-left-width:0; background:var(--b)}
  .cal-ev b{display:none}
  .cal-week{grid-auto-flow:row; grid-template-columns:minmax(0,1fr); min-height:0}
  .cal-wcol{border-right:0; border-bottom:1px solid var(--c-border); flex-direction:row; flex-wrap:wrap; align-items:center}
  .cal-wh{flex-direction:row; gap:6px; border-bottom:0; margin:0; padding:0; width:70px}
  .cal-wh b{font-size:15px}
  .cal-ev.big{width:auto; flex:1; min-width:140px; height:auto; padding:6px 8px; border-left-width:3px; background:color-mix(in oklab, var(--b) 12%, var(--c-surface))}
  .cal-ev.big span,.cal-ev.big b{display:block}
  .chart-donut{flex-direction:column; align-items:stretch}
  .donut{align-self:center}
  .kit-nav{top:64px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 16px 12px}
  .kit-nav a{flex:none}
  .top .search,.top .icon-btn,.top .org{flex:none}
  .ptitle{flex:1}
}
@media (max-width:560px){
  .ch-y{width:44px}
  .ch-x{margin-left:52px}
  .ch-x span:nth-child(even){visibility:hidden}
  .dlg-f,.drawer-f{flex-wrap:wrap}
  .top{gap:6px; padding:0 12px}
  .top .icon-btn,.top .search,.org .avatar{width:34px; height:34px}
  .top .btn.primary{height:34px; padding:0 10px}
  .ptitle h1{font-size:18px}
}