/* Shared components: defined once, reused on every page. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:10px;border:1px solid transparent;font-weight:600;cursor:pointer;white-space:nowrap;transition:background var(--t),border-color var(--t),filter var(--t)}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--primary);color:var(--on-primary)}.btn-primary:hover{filter:brightness(.92)}
.btn-secondary{background:var(--card);color:var(--text);border-color:var(--line)}.btn-secondary:hover{background:var(--bg)}
.btn-ghost{background:none;color:var(--text)}.btn-ghost:hover{background:var(--bg)}
.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{filter:brightness(.92)}
.btn-sm{min-height:36px;padding:0 12px}
.btn-icon{width:44px;padding:0}
.btn:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:1023px){.btn-sm{min-height:44px}}
.card-list a,.card-list .btn-icon{flex:none}
@media(max-width:1023px){.card-list a:not(.btn),.table-wrap td>a:not(.btn){display:inline-flex;align-items:center;min-height:44px}}
.field{display:flex;flex-direction:column;gap:4px}
.lbl{font-weight:600;font-size:.9375rem}
.input,.select,.textarea{width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);font:inherit;font-size:1rem}
.textarea{min-height:88px;resize:vertical}
.invalid{border-color:var(--danger)}
.err{display:flex;align-items:center;gap:4px;color:var(--danger);font-size:.875rem}
.err .i{width:16px;height:16px}
.switch{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:44px;cursor:pointer}
.switch input{position:absolute;inset-inline-start:0;width:44px;height:44px;opacity:0;margin:0;cursor:pointer}
.track{position:relative;width:44px;height:24px;border-radius:999px;background:var(--line);transition:background var(--t);flex:none}
.track::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:inset-inline-start var(--t)}
.switch input:checked+.track{background:var(--primary)}
.switch input:checked+.track::after{inset-inline-start:23px}
.switch input:focus-visible+.track{outline:2px solid var(--link);outline-offset:2px}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:999px;font-size:.875rem;font-weight:600;background:var(--bg);color:var(--muted);border:1px solid var(--border)}
.badge .i{width:14px;height:14px}
.b-success{background:var(--success-bg);color:var(--success);border-color:transparent}
.b-warning{background:var(--warning-bg);color:var(--warning);border-color:transparent}
.b-danger{background:var(--danger-bg);color:var(--danger);border-color:transparent}
.b-info{background:var(--info-bg);color:var(--info);border-color:transparent}
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:24px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.stack{display:flex;flex-direction:column;gap:16px}
.table-wrap{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 16px;text-align:start}
@media(max-width:1023px){th,td{padding:12px}}
th{font-size:.875rem;font-weight:600;color:var(--muted);background:var(--bg)}
td{border-top:1px solid var(--border)}
.num{text-align:end}
.card-list{display:none;gap:8px}
.row-card{display:flex;justify-content:space-between;gap:12px;padding:16px;background:var(--card);border:1px solid var(--border);border-radius:10px}
.row-card>div{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.row-card>div:last-child{align-items:flex-end}
@media(max-width:639px){.table-wrap{display:none}.card-list{display:grid}}
.table-wrap.always{display:block}.card-list.always{display:grid;max-width:420px}
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:16px;z-index:60;opacity:0;pointer-events:none;transition:opacity var(--t)}
.modal-back.on{opacity:1;pointer-events:auto}
.modal{background:var(--card);border-radius:10px;box-shadow:var(--shadow);width:100%;max-width:480px;max-height:90vh;display:flex;flex-direction:column;transform:translateY(8px);transition:transform var(--t)}
.modal-back.on .modal{transform:none}
.modal-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px;border-bottom:1px solid var(--border)}
.modal-b{padding:24px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.modal-f{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--border)}
@media(max-width:639px){
 .modal-back{padding:0;place-items:end stretch;grid-template-rows:100%}
 .modal{max-width:none;height:100%;max-height:100%;border-radius:0;transform:translateY(100%)}
 .modal.sm{height:auto;border-radius:16px 16px 0 0}
 .modal-f{position:sticky;bottom:0;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
 .modal-f .btn{flex:1}.modal-b{flex:1}
}
#toasts{position:fixed;inset-inline-end:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:80}
.toast{display:flex;align-items:center;gap:12px;min-width:240px;padding:12px 16px;background:var(--text);color:var(--bg);border-radius:10px;box-shadow:var(--shadow);border-inline-start:4px solid var(--success)}
.toast.error{border-inline-start-color:var(--danger)}
@media(max-width:639px){#toasts{inset-inline:16px;bottom:calc(var(--tabh) + 16px)}}
.empty{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:48px 24px}
.empty p{max-width:40ch;color:var(--muted)}
.empty-ic{width:56px;height:56px;border-radius:50%;background:var(--primary-soft);color:var(--link);display:grid;place-items:center}
.empty-ic .i{width:28px;height:28px}
.sk{height:16px;border-radius:8px;background:linear-gradient(90deg,var(--border),var(--bg),var(--border));background-size:200% 100%;animation:sk 1.4s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);overflow-x:auto}
.tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);font-weight:600;cursor:pointer;white-space:nowrap}
.tab[aria-selected=true]{color:var(--link);border-bottom-color:var(--primary)}
.count{min-width:24px;padding:0 6px;border-radius:999px;background:var(--primary);color:var(--on-primary);font-size:.875rem;text-align:center}
.menu{position:relative}
.menu-pop{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:220px;padding:8px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);display:none;z-index:50}
.menu.on .menu-pop{display:block}
.menu-who{padding:8px 12px;border-bottom:1px solid var(--border);margin-bottom:8px}
.menu-who small{display:block;color:var(--muted);font-size:.875rem}
.sw{height:48px;border-radius:10px;border:1px solid var(--border);margin-bottom:4px}
.sg{margin-bottom:32px}.sg>h2{margin-bottom:16px}.sg h3{margin:16px 0 8px}

.matrix{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.m-row{display:grid;grid-template-columns:minmax(120px,1.3fr) repeat(4,.6fr) 2.2fr;gap:8px;align-items:center;padding:4px 16px;border-top:1px solid var(--border)}
.m-head{background:var(--bg);color:var(--muted);font-size:.875rem;font-weight:600;border-top:0;padding-block:8px}
.m-page{font-weight:600}
.m-c,.m-o label{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.m-o{display:flex;flex-wrap:wrap;gap:0 16px}
@media(min-width:640px){.m-c span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
@media(max-width:639px){.m-row{grid-template-columns:1fr 1fr;padding:8px 16px}.m-head{display:none}.m-page,.m-o{grid-column:1/-1}.m-c:empty{display:none}}
.gcard{display:flex;flex-direction:column;gap:12px}
.gcard .row:last-child{margin-top:auto}

/* Stage 3: catalog lists (categories, products) */
.acts{display:flex;align-items:center;gap:4px}
td.num>.acts{justify-content:flex-end}
.nw{white-space:nowrap}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.filters .input{flex:1 1 240px}.filters .select{flex:0 1 240px}
@media(max-width:639px){.filters .input,.filters .select{flex:1 1 100%}}
.thumb{width:48px;height:48px;border-radius:10px;flex:none;background:var(--primary-soft);color:var(--link);display:grid;place-items:center;overflow:hidden;border:1px solid var(--border)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.lg{width:96px;height:96px}.thumb.lg .i{width:32px;height:32px}
.media{display:flex;align-items:center;gap:12px;min-width:0}
.media>div{display:flex;flex-direction:column;gap:2px;min-width:0;align-items:flex-start}
.row-card>.media{flex-direction:row;align-items:center}
.sub{font-size:.875rem;color:var(--muted)}
.file-btn{position:relative}
.file-btn:focus-within{outline:2px solid var(--link);outline-offset:2px}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}

/* Stage 4: orders and tables */
a.row-card{color:inherit}a.row-card:hover{text-decoration:none;border-color:var(--primary)}
.filters .select.sm{flex:0 1 180px}
@media(max-width:639px){.filters .select.sm{flex:1 1 100%}}
.back{margin-inline-start:-12px;margin-bottom:8px}
[dir=rtl] .back .i{transform:scaleX(-1)}
.o-cols{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px;align-items:start}
@media(max-width:899px){.o-cols{grid-template-columns:minmax(0,1fr)}}
.act-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
@media(max-width:639px){.act-bar .btn{flex:1 1 100%}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0}
.kv dt{color:var(--muted)}.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.line{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--border)}
.line:first-child{border-top:0;padding-top:0}
.line .q{font-weight:700;min-width:32px}
.line>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.sum-r{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.sum-r.big{font-size:1.25rem;font-weight:700;border-top:1px solid var(--border);margin-top:8px;padding-top:12px}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.choice{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--card);font-weight:600}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice:has(input:checked){border-color:var(--primary);background:var(--primary-soft);color:var(--link)}
.choice:has(input:focus-visible){outline:2px solid var(--link);outline-offset:2px}
.tbl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:16px}
.tbl-card{display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--card);border:1px solid var(--border);border-radius:10px;border-inline-start:4px solid var(--success)}
.tbl-card.occ{border-inline-start-color:var(--warning)}
.tbl-card .tn{font-size:1.25rem;font-weight:700}
.tbl-card .row{justify-content:space-between}
.tbl-card .tbl-acts{display:flex;align-items:center;gap:8px;margin-top:auto}.tbl-card .tbl-acts .btn-icon{flex:none;min-width:44px}.tbl-card .tbl-acts .btn:not(.btn-icon){min-width:0}
.tbl-card .tbl-acts .grow{flex:1}

/* Stage 4b: New Order (POS) screen */
.choices.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.choices.c3 .choice{flex-direction:column;justify-content:center;text-align:center;gap:4px;padding:8px 4px}
.pos{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
.pos-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.chip-b{flex:none;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:600;white-space:nowrap;cursor:pointer}
.chip-b[aria-pressed=true]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pos-p{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:44px;padding:12px;text-align:start;background:var(--card);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:border-color var(--t)}
.pos-p:hover{border-color:var(--primary)}
.pos-p strong{overflow-wrap:anywhere}
.pos-p:disabled{opacity:.55;cursor:not-allowed}.pos-p:disabled:hover{border-color:var(--border)}
.pos-p .count{position:absolute;top:8px;inset-inline-end:8px}
.pos-cart{position:sticky;top:calc(var(--tbh) + 16px);display:flex;flex-direction:column;max-height:calc(100vh - var(--tbh) - 32px);background:var(--card);border:1px solid var(--border);border-radius:10px}
.pos-cart-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border)}
.pos-cart-h .btn-icon{display:none}
.pos-cart-b{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px}
.pos-cart-f{padding:12px 16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.cl{display:flex;flex-direction:column;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.cl-top{display:flex;justify-content:space-between;gap:12px}
.cl-ctl{display:flex;align-items:center;gap:8px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px}
.qty .btn{min-height:44px;width:44px}
.qty b{min-width:32px;text-align:center}
.pos-bar{display:none;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:8px 16px;background:var(--primary);color:var(--on-primary);border:0;border-radius:10px;box-shadow:var(--shadow);font-weight:700;cursor:pointer}
.pos-bar.demo{display:flex}
.pos-done{max-width:520px;margin-inline:auto}
@media(max-width:1023px){.pos{grid-template-columns:minmax(0,1fr) 320px}}
@media(max-width:639px){
 .pos{grid-template-columns:minmax(0,1fr)}
 .pos-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pos-cart{position:fixed;inset:0;z-index:60;max-height:none;border:0;border-radius:0;visibility:hidden;transform:translateY(100%);transition:transform var(--t),visibility var(--t)}
 .pos-cart.open{visibility:visible;transform:none}
 .pos-cart-h .btn-icon{display:inline-flex}
 .pos-cart-f{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
 .pos-bar{position:fixed;inset-inline:16px;width:auto;bottom:calc(var(--tabh) + 8px + env(safe-area-inset-bottom));z-index:31;display:flex}
 body.app:has(.pos-bar:not([hidden])){padding-bottom:calc(var(--tabh) + 80px)}
}

/* Stage 5: kitchen board. Phone: one column at a time (tabs). Tablet and desktop: all columns side by side. */
.kb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.kb-tabs{display:none;margin-bottom:16px}
.kb-tabs .tab{flex:1;justify-content:center;padding:0 8px}
.kb-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.kb-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:8px;border-bottom:3px solid var(--border)}
.kb-h h2{font-size:1.125rem}
.kb-col.s-new .kb-h{border-bottom-color:var(--info)}.kb-col.s-preparing .kb-h{border-bottom-color:var(--warning)}.kb-col.s-ready .kb-h{border-bottom-color:var(--success)}
.kb-card{display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--card);border:1px solid var(--border);border-radius:10px}
.kb-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.kb-no{font-size:1.25rem;font-weight:700;color:var(--text);min-height:44px;display:inline-flex;align-items:center}
a.kb-no{color:var(--link)}
.kb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.kb-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.kb-items li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:start}
.kb-items .q{font-weight:700;min-width:32px}
.kb-items strong,.kb-items .sub{overflow-wrap:anywhere}
.kb-items li>div{display:flex;flex-direction:column;gap:2px}
.kb-note{padding:8px 12px;border-radius:10px;background:var(--warning-bg);color:var(--warning);font-size:.9375rem;overflow-wrap:anywhere}
.kb-acts{display:flex;flex-wrap:wrap;gap:8px}
.kb-acts .btn-primary{flex:1 1 100%}
.kb-empty{padding:24px 16px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:10px}
@media(min-width:640px){.kb-col[hidden]{display:flex!important}} /* base.css hides [hidden] with !important; tabs only apply on phones */
@media(max-width:639px){
 .kb{grid-template-columns:minmax(0,1fr)}
 .kb-tabs{display:flex}
 .kb-h{display:none}
}

/* Stage 6: Home (dashboard), offers, customers */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
.stat{display:flex;flex-direction:column;gap:4px;padding:16px;background:var(--card);border:1px solid var(--border);border-radius:10px;min-width:0}
a.stat{color:inherit}a.stat:hover{text-decoration:none;border-color:var(--primary)}
.stat-l{display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:600}
.stat-l .i{width:18px;height:18px;flex:none}
.stat-v{font-size:1.5rem;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.place{display:flex;align-items:center;gap:16px;padding:16px 24px}
.place-logo{width:56px;height:56px;border-radius:50%;flex:none;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-size:1.5rem;font-weight:700;overflow:hidden}
.place-logo img{width:100%;height:100%;object-fit:cover;display:block}
.place>div:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.place h2{overflow-wrap:anywhere}
.top-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.top-list li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--border)}
.top-list li:first-child{border-top:0;padding-top:0}.top-list li:last-child{padding-bottom:0}
.top-list .rk{font-weight:700;color:var(--muted);text-align:center}
.top-list .nm{display:flex;flex-direction:column;gap:4px;min-width:0}
.top-list .nm strong{overflow-wrap:anywhere}
.top-bar{height:8px;border-radius:999px;background:var(--primary-soft);overflow:hidden}
.top-bar i{display:block;height:100%;border-radius:999px;background:var(--primary)}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.offer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:16px}
.offer{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;min-width:0}
.offer-img{aspect-ratio:16/9;background:var(--primary-soft);color:var(--link);display:grid;place-items:center;overflow:hidden}
.offer-img img{width:100%;height:100%;object-fit:cover;display:block}
.offer-img .i{width:40px;height:40px}
.offer-b{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;flex:1;min-width:0;width:100%}
.offer-b h3{overflow-wrap:anywhere}
.offer-d{margin:0;color:var(--muted);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.offer-f{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin-top:auto;padding-top:8px;border-top:1px solid var(--border)}
.fold{padding:0}
.fold>summary{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 16px;cursor:pointer;font-weight:600;list-style:none}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"+";margin-inline-start:auto;font-size:1.25rem}
.fold[open]>summary::after{content:"\2212"}
.fold>summary:focus-visible{outline:2px solid var(--link);outline-offset:-2px;border-radius:10px}
.fold-b{display:flex;flex-direction:column;gap:12px;padding:0 16px 16px}
.cu-name{overflow-wrap:anywhere}
.cu-link{display:inline-flex;align-items:center;min-height:44px}
/* Stage 7 (Reports): hand-made bar chart, no library. Labels are 14px or larger. */
.rp-chart{display:flex;flex-direction:column;gap:8px;padding-inline:8px}
.rp-bars{display:flex;align-items:flex-end;gap:2px;height:160px;border-bottom:1px solid var(--border)}
.rp-bar{flex:1 1 0;min-width:0;display:flex;align-items:flex-end;height:100%}
.rp-bar i{display:block;width:100%;min-height:2px;border-radius:4px 4px 0 0;background:var(--primary)}
.rp-bar.zero i{background:var(--border)}
.rp-lbls{display:flex;gap:2px}
.rp-lbls span{flex:1 1 0;min-width:0;text-align:center;font-size:.875rem;color:var(--muted);white-space:nowrap;direction:ltr}
.rp-lbls span.skip{visibility:hidden}
.rp-top{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:baseline}
/* Stage 7 (Settings): form bar, color field, add-on cards, logo */
.form-bar{display:flex;justify-content:flex-end;gap:8px;padding-top:8px}
@media(max-width:639px){.form-bar{position:sticky;bottom:calc(var(--tabh) + env(safe-area-inset-bottom));z-index:5;background:var(--bg);border-top:1px solid var(--border);padding:12px 16px;margin-inline:-16px}.form-bar .btn{flex:1 1 100%}}
.color-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.color-in{width:64px;min-height:44px;height:44px;padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--card);cursor:pointer}
.logo .img,.logo img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}
.slip-logo-img{display:block;width:48px;height:48px;object-fit:contain;margin:0 auto 4px;filter:grayscale(1) contrast(1.2)}
.addon{display:flex;align-items:flex-start;gap:16px}
.addon-ic{width:44px;height:44px;border-radius:10px;background:var(--primary-soft);color:var(--link);display:grid;place-items:center;flex:none}
.addon-b{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.addon-b h3{overflow-wrap:anywhere}
.addon-x{color:var(--muted);font-size:.875rem}
@media(max-width:639px){.addon{flex-wrap:wrap}.addon-act{flex:1 1 100%}}
.ro-note{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--info-bg);color:var(--info);border-radius:10px}
.ro-note .i{flex:none}


/* page-entry skeleton */
.skel-wrap{display:none}
#page.skel-on{position:relative}
#page.skel-on>*:not(.skel-wrap){visibility:hidden}
#page.skel-on>.skel-wrap{display:grid;gap:12px;position:absolute;inset:24px 24px auto;visibility:visible;background:transparent}
@media(max-width:639px){#page.skel-on>.skel-wrap{inset:16px 16px auto}}