/* Login, full-width pages (AI agent · Reports · Settings) and modals. */

/* ---- login / first-run setup ---- */
.login{height:100%;display:flex;align-items:center;justify-content:center}
.login .card{padding:40px 44px;width:380px;display:flex;flex-direction:column;gap:14px;border-radius:16px}
.login h1{font-size:24px;letter-spacing:.01em;font-weight:800}
.login h1 span{color:var(--acc)}
.login .sub2{color:var(--ink2);font-size:12.5px;margin-top:-8px}
.login label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;font-weight:600;color:var(--ink2)}
.login input,.login select{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 13px;color:var(--ink);font-weight:400}
.login button[type="submit"]{background:var(--acc);color:var(--acc-ink);font-weight:700;border-radius:var(--r-md);padding:11px;margin-top:4px}
.login .err{color:var(--bad);font-size:12.5px}
.login .linkbtn{background:none;border:0;color:var(--ink3);font-size:12px;text-decoration:underline;cursor:pointer;padding:0;align-self:center}
.login .linkbtn:hover{color:var(--ink)}
/* password-rule checklist (login setup, forced change, account page, team form) */
.pwrules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--ink3);font-weight:500}
.pwrules li{display:flex;align-items:center;gap:6px}
.pwrules li .i{width:12px;height:12px;flex:none}
.pwrules li.ok{color:var(--good)}
.login .pwrules{margin-top:-6px}
.pwrules-wrap{margin-top:-4px}

/* ---- pages ---- */
.pagehead{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:18px;max-width:980px}
.pagehead h2{font-size:20px;font-weight:700;display:flex;align-items:center;gap:8px;flex-basis:100%}
.pagehead h2 .i{width:20px;height:20px;color:var(--acc)}
.aiagent .pagehead h2 .i{color:var(--ai)}
.pagehead .sub{color:var(--ink2);font-size:13px;max-width:760px;flex:1 1 400px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:980px;margin-bottom:14px}
.spanels{display:flex;flex-direction:column;gap:12px;max-width:860px;margin-bottom:14px}
.card.inactive{opacity:.6}
.stats.four{grid-template-columns:1fr 1fr}
.aitot{font-size:12.5px;color:var(--ink2);margin-bottom:8px}
.aitot b{color:var(--ink)}
.brow{display:grid;grid-template-columns:160px 1fr 44px;gap:10px;align-items:center;padding:5px 0;font-size:12.5px}
.brow .lbl{color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow.total{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.bar{height:8px;border-radius:4px;background:var(--panel2);overflow:hidden}
.bar div{height:100%;background:var(--acc);border-radius:4px}
.brow .n{font-family:var(--mono);font-size:10.5px;text-align:right}
.rtable{width:100%;border-collapse:collapse;font-size:12.5px}
.rtable th{text-align:left;font-size:10.5px;color:var(--ink2);text-transform:uppercase;letter-spacing:.05em;padding:4px 0;border-bottom:1px solid var(--line)}
.rtable td{padding:6px 0;border-bottom:1px solid var(--line)}
.sphead{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.sphead .btn{height:28px}
.testres{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sh3{font-size:14px;margin:18px 0 10px;font-weight:700}
.page .chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-width:0}
.page .chips.wrap{margin-top:10px}
.note{max-width:860px;margin-top:14px;font-size:12px;color:var(--ink2);background:var(--panel2);border-radius:var(--r-md);padding:11px 14px;line-height:1.55}
.note b{color:var(--ink)}
.note.warn-note{background:var(--chip-amber-bg);color:var(--chip-amber-ink);margin-top:0;margin-bottom:14px}
.card.aiuser{border-color:var(--ai-border);background:var(--ai-soft)}

/* forms (settings, AI agent, modals) */
.sform{margin-top:14px;border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:12px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.fgrid.three{grid-template-columns:1fr 1fr 1fr}
.sform label,.aiform label,.modal label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;font-weight:600;color:var(--ink2)}
.sform input,.sform select,.sform textarea,.aiform input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),.modal input,.modal select,.modal textarea{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:8px 11px;color:var(--ink);font-weight:400}
.sform input:focus,.sform select:focus,.sform textarea:focus,.aiform input:focus,.modal input:focus,.modal select:focus,.modal textarea:focus{outline:2px solid var(--acc);outline-offset:-1px}
.sform textarea,.modal textarea{resize:vertical}
.chk{flex-direction:row!important;align-items:center;gap:8px;font-weight:500!important;color:var(--ink)!important;font-size:12.5px!important}
.chk input{accent-color:var(--acc);margin:0}
.chk.locked{color:var(--ink2)!important}
.factions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.aiform{max-width:980px;display:flex;flex-direction:column;gap:14px}
.aiform>.ch{margin:6px 0 -4px}
.aiform .chk input{accent-color:var(--ai)}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.modes .mode{flex-direction:row!important;align-items:flex-start!important;gap:9px;border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;background:var(--panel2);cursor:pointer;color:var(--ink)!important;font-weight:500!important}
.modes .mode.on{border-color:var(--ai-border);background:var(--ai-soft)}
.modes .mode input{margin-top:3px;accent-color:var(--ai)}
.modes .mode b{display:block;font-size:12.5px}
.modes .mode small{display:block;font-weight:400;color:var(--ink2);font-size:11.5px;line-height:1.45;margin-top:2px}
.rangerow{display:flex;align-items:center;gap:10px}
.rangerow input[type="range"]{flex:1;accent-color:var(--ai)}
.rangerow output{font-family:var(--mono);font-weight:700;color:var(--ink);min-width:28px;text-align:right}
.chkrow{display:flex;flex-direction:column;gap:6px}
.chkgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 12px}
.hours{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;max-width:640px}
.hrow{display:grid;grid-template-columns:130px 1fr auto 1fr;align-items:center;gap:8px}
.hrow .to{font-size:11.5px;color:var(--ink2)}
.aiform input:disabled{opacity:.55}

/* ---- modals ---- */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:60}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);padding:22px 24px;width:460px;max-width:92vw;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-pop)}
.modal h3{font-size:16px;font-weight:700}
.modal .sub2{color:var(--ink2);font-size:12.5px;margin-top:-6px}
.modal .req{color:var(--bad)}
.modal .hint2{font-size:11px;color:var(--ink2);margin:-8px 0 0 24px;line-height:1.4}
.modal .vtop{display:flex;gap:10px}
.modal .vtop .grow{flex:1}
.vq{border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;background:var(--bg);display:flex;flex-direction:column;gap:8px;align-items:center}
.vqh{align-self:flex-start;font-size:11.5px;font-weight:600;color:var(--ink2)}
.vrow{display:grid;grid-template-columns:1fr 1fr 1fr 28px;gap:6px;width:100%;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:8px}
.vrow select,.vrow input{min-width:0;padding:7px 8px;font-size:12px}
.vrow .x{color:var(--ink2);width:22px;height:22px}
.vrow .x:disabled{opacity:.3}
.vnone{text-align:center;color:var(--ink2)}
.swatches{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.swatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent;padding:0}
.swatch.on{border-color:var(--ink)}
/* image lightbox */
.overlay.lightbox{background:rgba(20,18,16,.78);z-index:70;outline:none;cursor:zoom-out}
.lightbox figure{margin:0;display:flex;flex-direction:column;gap:8px;max-width:92vw;max-height:92vh;cursor:default}
.lightbox img{max-width:92vw;max-height:calc(92vh - 40px);object-fit:contain;border-radius:var(--r-md);background:var(--panel);box-shadow:var(--shadow-pop)}
.lightbox figcaption{display:flex;align-items:center;gap:12px;color:#fff;font-size:12px;min-width:0}
.lightbox figcaption .ell{flex:1;opacity:.85}
.lightbox figcaption a{color:#fff;font-weight:600;text-decoration:underline;white-space:nowrap}
.lightbox figcaption .x{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:13px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.lightbox figcaption .x:hover{background:rgba(255,255,255,.3)}
/* new email dialog */
.modal .aiwrite{display:flex;gap:6px}
.modal .aiwrite input{flex:1;min-width:0}
.modal .aiwrite .btn{flex:none;color:var(--ai);border-color:var(--ai-border)}
.modal textarea#ne-body{min-height:180px;font-size:13px;line-height:1.5}
.modal .factions .muted{font-size:11px;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* prompt / confirm dialogs */
.modal .hint2.nolead{margin-left:0}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.danger:hover{filter:brightness(.95)}
.btn.ghost.danger{background:transparent;color:var(--bad);border-color:transparent}
/* modal labels: caption + required star + hint on ONE line, field below
   (Rome 09-09: the star on its own line "ziet er niet uit") */
.modal label{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 5px}
.modal label>input,.modal label>textarea,.modal label>select,.modal label>div{flex:1 0 100%}
.modal label .hint{font-weight:400;color:var(--ink3)}
.modal.wide{width:680px}
.modal.wide textarea#ne-body{min-height:260px}
.modal.wide .fgrid{grid-template-columns:3fr 2fr}
/* label dialog (Rome 09-09) */
.modal.labelmodal{width:520px;gap:14px}
.labelmodal .lhead{display:flex;align-items:center;gap:12px}
.labelmodal .lhead h3{flex:1}
.labelmodal .chip.big{height:24px;font-size:12px;padding:0 10px;border-radius:12px;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.labelmodal .lfield{display:flex;flex-direction:column;gap:6px}
.labelmodal .lcap{font-size:11.5px;font-weight:600;color:var(--ink2)}
.labelmodal .swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin:0}
.labelmodal .swatch{width:100%;aspect-ratio:1;height:auto;border-radius:50%;border:2px solid transparent;display:inline-flex;align-items:center;justify-content:center;background:var(--chip-grey-bg);color:transparent;transition:transform .08s}
.labelmodal .swatch:hover{transform:scale(1.08)}
.labelmodal .swatch.on{border-color:var(--ink);color:var(--ink)}
.labelmodal .swatch .i{stroke-width:3}
.labelmodal .swatch.red{background:var(--chip-red-bg);color:transparent}.labelmodal .swatch.red.on{color:var(--chip-red-ink)}
.labelmodal .swatch.orange{background:var(--chip-orange-bg)}.labelmodal .swatch.orange.on{color:var(--chip-orange-ink)}
.labelmodal .swatch.amber{background:var(--chip-amber-bg)}.labelmodal .swatch.amber.on{color:var(--chip-amber-ink)}
.labelmodal .swatch.yellow{background:var(--chip-yellow-bg)}.labelmodal .swatch.yellow.on{color:var(--chip-yellow-ink)}
.labelmodal .swatch.lime{background:var(--chip-lime-bg)}.labelmodal .swatch.lime.on{color:var(--chip-lime-ink)}
.labelmodal .swatch.green{background:var(--chip-green-bg)}.labelmodal .swatch.green.on{color:var(--chip-green-ink)}
.labelmodal .swatch.teal{background:var(--chip-teal-bg)}.labelmodal .swatch.teal.on{color:var(--chip-teal-ink)}
.labelmodal .swatch.cyan{background:var(--chip-cyan-bg)}.labelmodal .swatch.cyan.on{color:var(--chip-cyan-ink)}
.labelmodal .swatch.blue{background:var(--chip-blue-bg)}.labelmodal .swatch.blue.on{color:var(--chip-blue-ink)}
.labelmodal .swatch.indigo{background:var(--chip-indigo-bg)}.labelmodal .swatch.indigo.on{color:var(--chip-indigo-ink)}
.labelmodal .swatch.purple{background:var(--chip-purple-bg)}.labelmodal .swatch.purple.on{color:var(--chip-purple-ink)}
.labelmodal .swatch.pink{background:var(--chip-pink-bg)}.labelmodal .swatch.pink.on{color:var(--chip-pink-ink)}
.labelmodal .swatch.rose{background:var(--chip-rose-bg)}.labelmodal .swatch.rose.on{color:var(--chip-rose-ink)}
.labelmodal .swatch.brown{background:var(--chip-brown-bg)}.labelmodal .swatch.brown.on{color:var(--chip-brown-ink)}
.labelmodal .swatch.slate{background:var(--chip-slate-bg)}.labelmodal .swatch.slate.on{color:var(--chip-slate-ink)}
.labelmodal .swatch.grey.on{color:var(--chip-grey-ink)}
.labelmodal .lauto{border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;display:flex;flex-direction:column;gap:6px;background:var(--panel2)}
.labelmodal .lauto.on{border-color:var(--ai-border);background:var(--ai-soft)}
.labelmodal .lauto .chk{font-size:12.5px!important}
.labelmodal .lauto .chk b{font-weight:600}
.labelmodal .lsub{font-size:11px;color:var(--ink2);line-height:1.4;margin-left:24px}
.labelmodal .lauto textarea{margin-top:2px;background:var(--panel)}
.labelmodal .lrow{padding:2px 0}
.modal label.chk>input{flex:none;width:14px;height:14px}

/* Settings → Auto-reply + Policies (Rome 09-09) */
.spanels.wide{max-width:980px}
.ackgrid{grid-template-columns:1fr 1fr}
.ackgrid textarea{font-family:inherit;font-size:12.5px;line-height:1.5;min-height:220px}
.ackprev{margin:0;white-space:pre-wrap;font:400 12.5px/1.55 inherit;font-family:inherit;color:var(--ink);background:var(--panel2);border:1px dashed var(--line);border-radius:var(--r);padding:12px 14px;min-height:220px}
.sform .chk{flex-direction:row;align-items:center;gap:8px;font-weight:500;color:var(--ink)}
.sform .chk>input{flex:none;accent-color:var(--acc)}
.pollist{display:flex;flex-direction:column;margin-top:12px;border-top:1px solid var(--line)}
.polrow{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line)}
.polrow.bad .polmeta{color:var(--chip-red-ink)}
.polmain{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.polmain b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.polurl{font-size:11px;color:var(--ink2);text-decoration:none;display:inline-flex;align-items:center;gap:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.polurl:hover{color:var(--acc)}
.polmeta{font-size:11px;color:var(--ink2);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.polmeta .chip{height:18px;font-size:10px}
.polform{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.polform input{flex:1;min-width:260px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:8px 11px;color:var(--ink)}
.polform input:focus{outline:2px solid var(--acc);outline-offset:-1px}
@media (max-width:900px){.ackgrid{grid-template-columns:1fr}}
/* Rules tab (fase 2, 09-17): if-this-then-that per store + SLA promise */
.rulecard .polrow.off .polmain{opacity:.5}
.slaform{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.slaform label{font-size:12px;font-weight:600}
.slaform .hint{font-weight:400}
.slarow{display:flex;gap:8px;align-items:center}
.slarow input{width:90px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:7px 10px;color:var(--ink)}
.slarow input:focus{outline:2px solid var(--acc);outline-offset:-1px}
.ruleform{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.ruleform .rchk{align-self:end;padding-bottom:8px}
.rsect{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin:10px 0 0;padding:10px 12px;border:1px dashed var(--line);border-radius:var(--r2)}
.rsect>b{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}
.rrowline{display:flex;gap:6px;align-items:center;flex-wrap:wrap;width:100%}
.rrowline select,.rrowline input{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:6px 9px;color:var(--ink);font-size:12px}
.rrowline input{flex:1;min-width:140px}
.rrowline select:focus,.rrowline input:focus{outline:2px solid var(--acc);outline-offset:-1px}
/* lightbox gallery arrows (Rome 09-10) */
.lightbox{gap:14px}
.lightbox .nav{flex:none;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:30px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:0}
.lightbox .nav:hover{background:rgba(255,255,255,.32)}
.lightbox figcaption .cnt{font-variant-numeric:tabular-nums;opacity:.85;white-space:nowrap}
@media (max-width:700px){.lightbox .nav{position:fixed;top:50%;transform:translateY(-50%)}.lightbox .prev{left:8px}.lightbox .next{right:8px}}
/* previous conversation popup (Rome 09-10) */
.modal.relmodal{width:760px;max-height:88vh}
.relmodal .relhead h3{font-size:14px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.relmodal .relhead .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.relmodal .relsumm{margin-top:8px;font-size:12.5px;color:var(--ink2);line-height:1.5;background:var(--panel2);border-radius:var(--r-md);padding:8px 11px}
.relmodal .relmsgs{overflow:auto;min-height:0;display:flex;flex-direction:column;gap:10px;padding:2px 2px 2px 0;max-height:56vh}
.relmsg{max-width:82%;border:1px solid var(--line);border-radius:14px;padding:9px 13px;background:var(--panel);display:flex;flex-direction:column;gap:5px}
.relmsg.in{align-self:flex-start}
.relmsg.out{align-self:flex-end;background:var(--acc-soft);border-color:var(--acc-border)}
.relmeta{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--ink2);flex-wrap:wrap}
.relmeta b{color:var(--ink);font-size:11.5px}
.relbody{font-size:12.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.relbody a{color:var(--acc-strong);text-decoration:underline}
/* "Show original" popup (Rome 09-19): one mail as Gmail holds it */
.modal.origmodal{width:760px;max-height:88vh}
.origmodal .orighead{display:flex;align-items:center;gap:9px}
.origmodal .orighead h3{font-size:14px;margin:0}
.origmodal .orighead .spacer{flex:1}
.origmodal .seg.lang button{height:22px;padding:0 9px;font-size:11.5px}
.origmodal .seg.lang button:disabled{opacity:.5;cursor:default}
.origmodal .origbox{overflow:auto;min-height:120px;max-height:62vh;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel)}
.origmodal .orignote{font-size:11.5px;color:var(--ink2);background:var(--panel2);padding:7px 12px;border-bottom:1px solid var(--line)}
.orighdrs{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:3px 12px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:12px;background:var(--panel2)}
.orighdrs .hk{color:var(--ink2);font-weight:600}
.orighdrs .hv{word-break:break-word}
.origbody{padding:12px;font-size:12.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.origbody a{color:var(--acc-strong);text-decoration:underline}
.origmodal .none{padding:22px 12px;text-align:center;color:var(--ink2);font-size:12.5px}
/* Export for dispute (Rome 10-02): pick the mails, then PDF or text */
.modal.expmodal{width:760px;max-height:88vh}
.expmodal .expbody{display:flex;flex-direction:column;gap:10px;min-height:0}
.expmodal .expopts{display:flex;align-items:center;gap:8px 22px;flex-wrap:wrap}
.expmodal .expopts .chk .hint{margin-left:2px}
.expmodal label.explang{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--ink)}
.expmodal label.explang>select{flex:none;width:auto;padding:5px 8px}
.expmodal .explist{overflow:auto;min-height:0;max-height:52vh;border:1px solid var(--line);border-radius:var(--r-md)}
.expmodal .expgrp+.expgrp{border-top:1px solid var(--line)}
.expmodal label.exptk{position:sticky;top:0;z-index:1;flex-wrap:nowrap;padding:8px 12px;background:var(--panel2);border-bottom:1px solid var(--line)}
.expmodal .exptk b{flex:none}
.expmodal .exptk .ell{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.expmodal label.expmail{flex-wrap:nowrap;gap:9px;padding:6px 12px 6px 32px;font-weight:400!important;cursor:pointer}
.expmodal .expmail:hover{background:var(--hover)}
.expmodal .expmail .who{flex:none;width:128px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.expmodal .expmail.out .who{color:var(--acc-strong)}
.expmodal .expmail .when{flex:none;width:92px;color:var(--ink2);font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.expmodal .expmail .ex{flex:1;min-width:0;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.expmodal .expmail .chip{flex:none}
.expmodal .expnote{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink2)}
.expmodal .none{padding:22px 12px;text-align:center;color:var(--ink2);font-size:12.5px}
.expmodal .factions .btn .i{margin-right:2px}
@media (max-width:640px){.expmodal .expmail .when{display:none}.expmodal .expmail .who{width:88px}.expmodal .expmail{padding-left:20px}}

/* Appearance card (Settings → My account, 09-14): bubble colours per theme */
.appear .bubgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:18px 28px;margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.appear .bubrows{display:flex;flex-direction:column;gap:14px;min-width:0}
.appear .bublabel{display:block;font-size:11.5px;font-weight:600;color:var(--ink2);margin-bottom:6px}
.appear .swatches{align-items:center}
.appear .swatch{border:2px solid var(--line);box-shadow:inset 0 0 0 1px rgba(28,27,25,.04);display:inline-flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer}
.appear .swatch svg{opacity:0}
.appear .swatch.on{border-color:var(--ink)}
.appear .swatch.on svg{opacity:1}
.appear .swatch.custom{position:relative;background:conic-gradient(#f5a3a3,#f5d7a3,#e6f5a3,#a3f5c4,#a3d8f5,#c4a3f5,#f5a3d8,#f5a3a3);color:#1c1b19}
.appear .swatch.custom svg{opacity:.9}
.appear .swatch.custom input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;padding:0;border:0}
.appear .linkbtn{font-size:11px;color:var(--ink2);text-decoration:underline;text-underline-offset:2px;margin-left:2px}
.appear .bubprev{display:flex;flex-direction:column;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;align-self:start}
.appear .bubprev .bub{max-width:88%}
.appear .bubprev .bub.note{max-width:96%}
.appear .factions{margin-top:14px}
@media (max-width:900px){.appear .bubgrid{grid-template-columns:1fr}}

/* store form in three blocks with fold-out guides (Rome 09-14: "setup lastig te begrijpen") */
.fsect{display:flex;flex-direction:column;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel)}
.fsh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fsh b{font-size:13px;color:var(--ink)}
.fsh .hint{font-weight:400;font-size:11.5px;color:var(--ink3)}
.sform .connect{display:flex;flex-direction:column;gap:6px;font-size:11.5px;font-weight:600;color:var(--ink2)}
.sform .connect .lbl{font-size:11.5px}
.sform .connect .crow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:34px}
.sform .connect .hint{font-weight:400;line-height:1.5}
.sform .connect .hint.warn{color:var(--chip-amber-ink)}
.sform .hint b{color:var(--ink)}
details.guide{border:1px dashed var(--line);border-radius:var(--r);background:var(--panel2);font-size:12px;color:var(--ink2);line-height:1.55}
details.guide>summary{display:flex;align-items:center;gap:7px;padding:8px 12px;cursor:pointer;list-style:none;font-weight:600;color:var(--ink);font-size:12px}
details.guide>summary::-webkit-details-marker{display:none}
details.guide>summary:hover{background:var(--hover);border-radius:var(--r)}
details.guide>summary .chev{margin-left:auto;color:var(--ink3);transition:transform .12s}
details.guide[open]>summary .chev{transform:rotate(180deg)}
details.guide .steps{margin:0;padding:2px 14px 12px 32px;display:flex;flex-direction:column;gap:7px}
details.guide .steps li::marker{font-weight:700;color:var(--acc-strong)}
details.guide b{color:var(--ink)}
details.guide a{color:var(--acc-strong);text-decoration:underline;text-underline-offset:2px}
details.guide code{font-family:var(--mono);font-size:11px;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
details.guide .why{display:block;margin-top:4px;font-size:11px;color:var(--ink3)}
details.guide .gbody{padding:2px 14px 12px;display:flex;flex-direction:column;gap:8px}
details.guide .gbody p{margin:0}
details.guide>.hint{display:block;padding:0 14px 12px;font-size:11px;color:var(--ink3)}
.copybox{display:inline-flex;align-items:center;gap:6px;max-width:100%;margin:4px 0;padding:5px 9px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink);cursor:pointer;font:inherit;text-align:left}
.copybox code{background:none;border:0;padding:0;white-space:pre-wrap;word-break:break-all;font-size:11px}
.copybox .i{color:var(--ink3);flex:none}
.copybox:hover{border-color:var(--acc);color:var(--acc-strong)}
.copybox.copied{border-color:var(--good);color:var(--good)}
.copybox.copied .i{color:var(--good)}

.modal .steps.loop{margin:8px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:12px;font-size:12.5px;line-height:1.55;color:var(--ink2)}
.modal .steps.loop li::marker{font-weight:700;color:var(--acc-strong)}
.modal .steps.loop b{color:var(--ink)}
.modal .steps.loop code{font-family:var(--mono);font-size:11px;background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.modal .steps.loop textarea{display:block;width:100%;margin-top:6px;font-family:var(--mono);font-size:11px;box-sizing:border-box}
.modal .steps.loop .btn{vertical-align:middle}
.sform .linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--acc-strong);text-decoration:underline;text-underline-offset:2px;cursor:pointer}

/* Settings → Templates (per-store library, Rome 09-14) */
.tplcard .tplstatus{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tplcard .tplstatus .hint{font-weight:400}
.tplform{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.tplform textarea{width:100%;box-sizing:border-box;font-family:var(--mono);font-size:11.5px;line-height:1.5;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;color:var(--ink);resize:vertical;min-height:240px}
.tplform textarea[readonly]{color:var(--ink2)}
.tplform textarea:focus{outline:2px solid var(--acc);outline-offset:-1px}