/* Aanvullingen op het ontwerp voor de werkende app */
body { padding-bottom: 0; }
#app { display: contents; }
body.ed-mode { display: block; }
body.ed-mode #app { display: block; }
.ed { height: 100vh; }
.toast { bottom: 16px; }
.ws { position: relative; }
.ws .mark.site { background: var(--accent); }
.wsmenu { position: absolute; left: 0; top: 36px; min-width: 220px; background: var(--bg); border-radius: var(--r-3); box-shadow: var(--shadow-pop); padding: 4px; z-index: 20; }
.wsmenu a { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: var(--r-2); color: var(--fg); font-weight: 500; }
.wsmenu a:hover { background: var(--bg-hover); }
.wsmenu a.on { background: var(--bg-active); }
.wsmenu .sep { height: 1px; background: var(--border); margin: 4px 0; }
.sidebar .trial .status { font-size: 12px; }
.stage iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.ed .stage { display: flex; flex-direction: column; }
.ed .stage .frame { flex: 1; min-height: 0; position: relative; }
.ed .stage .frame.pick::after { content: ""; position: absolute; inset: 0; pointer-events: none; outline: 2px solid var(--accent); outline-offset: -2px; }
.ed .stage .frame.pick iframe { cursor: crosshair; }
.ed .ch li { cursor: pointer; }
.ed .ch li.on { background: var(--accent-soft); margin: 0 -14px; padding-left: 14px; padding-right: 14px; border-radius: 0; }
.ed .ch li .i { width: 14px; height: 14px; }
.ed .efield .input, .ed .efield select.input { width: 100%; min-width: 0; }
.ed .efield textarea { outline: none; border-color: var(--border-strong); }
.ed .efield textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent-ring); }
.ed .panel .pb .pick-row { display: flex; gap: 6px; }
.ed .panel .pb .pick-row .input { flex: 1; font-family: var(--mono); font-size: 12px; }
.ed .ptabs a .cnt { font-size: 11px; color: var(--fg-3); background: var(--bg-subtle); border-radius: 999px; padding: 0 6px; line-height: 16px; }
.pick label.chk { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--r-2); background: var(--bg); font-weight: 500; cursor: pointer; font-size: 12.5px; }
.pick label.chk.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.pick label.chk input { margin: 0; }
.change .v code { font-family: var(--mono); font-size: 11.5px; background: var(--bg-subtle); padding: 1px 5px; border-radius: 3px; color: var(--fg-2); }
.change .v .sel { display: block; font-family: var(--mono); font-size: 11px; color: var(--fg-3); margin-top: 3px; }
.change .v pre { margin: 4px 0 0; font-family: var(--mono); font-size: 11.5px; background: var(--bg-subtle); padding: 6px 8px; border-radius: var(--r-2); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fg-2); }
.checks li.wait { color: var(--fg-3); }
.checks li.wait .i { color: var(--fg-4); }
.checks li.warn .i { color: var(--amber); }
.checks li small { display: block; color: var(--fg-3); font-size: 11px; }
.modal .body .field { margin-bottom: 0; }
.aside-box .btnrow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.conn .lg.img { background: var(--bg-subtle); color: var(--fg-2); border: 1px solid var(--border); }
.logrow td { font-size: 12.5px; }
.kvl code { font-family: var(--mono); font-size: 11.5px; background: var(--bg-subtle); padding: 1px 5px; border-radius: 3px; }
.sect { margin: 28px 0 10px; font-size: 14px; font-weight: 600; }
.sect + p { margin: -4px 0 12px; color: var(--fg-2); font-size: 12px; }
.snippet { user-select: all; }
.hint code { font-family: var(--mono); font-size: 11px; }
.page-h .rowh { flex: none; }
.empty .i { width: 24px; height: 24px; color: var(--fg-4); }
.co-table td { white-space: normal; }
.srow .v .input { min-width: 200px; }
.srow .v input[type=range] { width: 160px; margin: 0; }
.range-row b { min-width: 48px; text-align: right; }
.status.live::before { background: var(--accent); }
.sidebar .user .muted { font-size: 11px; }
@media (max-width: 1000px) { .ed .ed-body { grid-template-columns: 1fr; } .ed .panel { display: none; } }
/* ronde 2: suggesties, doelen, resultaten */
.sug-list{display:grid;gap:12px;max-width:820px}
.sug .bd{display:grid;gap:8px}.sug p{margin:0;color:var(--muted,#555)}
.sug-h{display:flex;gap:10px;align-items:flex-start}.sug-h b{font-size:14px;line-height:1.35}
.sug-h .mk{flex:0 0 26px;height:26px;border-radius:7px;background:#eef4ff;color:#2069f1;display:grid;place-items:center}.sug-h .mk .i{width:15px;height:15px}
.sug-facts{display:flex;flex-wrap:wrap;gap:8px}.sug-facts span{display:flex;gap:6px;align-items:baseline;border:1px solid #e5e7eb;border-radius:8px;padding:5px 9px;font-size:12px;color:#6b7280}.sug-facts b{font-size:15px;color:#111}
.sug-acts{display:flex;gap:8px;flex-wrap:wrap}
.res-h{font-size:14px;margin:18px 0 10px}
.res .bd{display:grid;gap:10px}.res-text{margin:0;line-height:1.5}
.res-bars{display:grid;gap:6px}.res-bars div{display:grid;grid-template-columns:120px 1fr 64px;align-items:center;gap:8px;font-size:12px;color:#4b5563}
.res-bars i{display:block;height:10px;border-radius:5px;background:#d6d6d6;min-width:2px}.res-bars i.v{background:var(--accent,#2069f1)}.res-bars b{text-align:right;color:#111}
.tbl.goals code{font-size:11px}
@media (max-width:640px){
  .res-bars div{grid-template-columns:96px 1fr 52px}
  .sug-acts .btn{flex:1;justify-content:center}
  .page-h{flex-wrap:wrap;gap:10px}
}
/* Bedrijven v2: lijst + detailpaneel */
.mp-logo{display:inline-flex;flex:0 0 auto;border-radius:6px;overflow:hidden;background:#fff;border:1px solid #eee}.mp-logo img{width:100%;height:100%;object-fit:contain}
.mp-mono{display:inline-grid;place-items:center;flex:0 0 auto;border-radius:6px;color:#fff;font-weight:600}
.co-segs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}.co-segs a{padding:5px 10px;border-radius:999px;border:1px solid #e5e7eb;font-size:12.5px;color:#374151;text-decoration:none;display:flex;gap:6px;align-items:center;background:#fff}.co-segs a.on{border-color:#2069f1;color:#2069f1;background:#eef4ff}.co-segs .cnt{font-size:11px;color:#6b7280}
.co-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.co-tools .search{flex:1 1 240px;margin:0;max-width:360px}.co-tools .search input{border:0;width:100%;min-width:0}
.sortsel{display:flex;gap:6px;align-items:center;font-size:12px;color:#6b7280}.sortsel select{height:30px;border:1px solid #e5e7eb;border-radius:7px;padding:0 6px;font:inherit}
.seg-days{display:inline-flex;background:#f3f4f6;border-radius:8px;padding:2px}.seg-days button{border:0;background:none;padding:4px 9px;border-radius:6px;font:inherit;font-size:12px;cursor:pointer;color:#4b5563}.seg-days button.on{background:#fff;color:#111;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.co-filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:10px 0}.fpill{display:inline-flex;gap:4px;align-items:center;background:#eef4ff;color:#1e40af;border-radius:999px;padding:3px 4px 3px 10px;font-size:12px}.fpill button{border:0;background:none;cursor:pointer;color:inherit;font-size:14px;padding:0 4px}
.fadd{position:relative}.fmenu{position:absolute;z-index:30;top:36px;left:0;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.12);padding:10px;display:grid;gap:8px;width:260px}.fmenu label{display:grid;gap:3px;font-size:12px;color:#6b7280}.fmenu select,.fmenu input{height:30px;border:1px solid #e5e7eb;border-radius:7px;padding:0 6px;font:inherit}
.co-bulk{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#111;color:#fff;border-radius:10px;padding:8px 10px;margin-bottom:10px}.co-bulk .btn.ghost{color:#fff}
.co-scroll{overflow-x:auto}.co-v2 th,.co-v2 td{white-space:nowrap}.co-v2 .ck{width:28px;padding-left:12px}.co-v2 .corow{cursor:pointer}.co-v2 .corow:hover,.co-v2 .corow.on{background:#f8fafc}.co-v2 .co{display:flex;gap:10px;align-items:center}.co-v2 code{font-size:11.5px}
.nowrap{white-space:nowrap}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ef4444;margin-right:5px;animation:mppulse 1.4s infinite}@keyframes mppulse{50%{opacity:.35}}
.intent{display:inline-flex;gap:6px;align-items:center}.ibar{width:54px;height:6px;border-radius:3px;background:#eee;overflow:hidden}.ibar i{display:block;height:100%}.intent b{font-size:12px;min-width:20px}.spark{display:block}
.co-cards{display:none}
.co-panel-bg{position:fixed;inset:0;background:rgba(17,17,17,.25);z-index:60}
.co-panel{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:100vw;background:#fff;z-index:61;box-shadow:-10px 0 40px rgba(0,0,0,.15);display:flex;flex-direction:column;overflow:hidden;animation:cpin .18s ease-out}@keyframes cpin{from{transform:translateX(40px);opacity:0}}
.cp-head{display:flex;gap:12px;align-items:center;padding:16px 16px 8px}.cp-t{display:grid;flex:1;min-width:0}.cp-t b{font-size:16px}.cp-t a{color:#2069f1;font-size:12.5px;text-decoration:none}.cp-x{font-size:20px}
.cp-chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px}.addtag{cursor:pointer;border:1px dashed #d1d5db;background:#fff}
.cp-score{display:flex;justify-content:space-between;align-items:center;margin:12px 16px 0;padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px}.cp-score div{display:flex;gap:10px;align-items:baseline}.cp-score b{font-size:28px}.cp-score svg{width:120px;height:32px}
.cp-why{margin:8px 16px 0;font-size:12.5px;color:#4b5563}
.cp-tabs{display:flex;gap:2px;border-bottom:1px solid #e5e7eb;margin:12px 0 0;padding:0 12px;overflow-x:auto}.cp-tabs button{border:0;background:none;padding:9px 8px;font:inherit;font-size:12.5px;cursor:pointer;color:#6b7280;border-bottom:2px solid transparent;white-space:nowrap}.cp-tabs button.on{color:#111;border-bottom-color:#2069f1;font-weight:600}
.cp-body{flex:1;overflow:auto;padding:12px 16px;display:grid;gap:10px;align-content:start}
.cp-foot{display:flex;gap:8px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid #e5e7eb}
.tl-day h4{margin:4px 0 6px;font-size:12px;color:#6b7280;text-transform:uppercase;letter-spacing:.03em}
.tl-sess{border:1px solid #e5e7eb;border-radius:10px;padding:10px;margin-bottom:8px;display:grid;gap:6px}.tl-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12.5px}
.tl-pages{margin:0;padding-left:18px;display:grid;gap:3px;font-size:12px}.tl-pages li{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tl-pages li span{color:#6b7280}.tl-pages li.val code{color:#166534;font-weight:600}
.tl-pers{font-size:12px;color:#4b5563}.tl-goal{font-size:12.5px;color:#92400e;font-weight:600}
.plist{list-style:none;margin:0;padding:0;display:grid;gap:6px}.plist li{display:grid;border:1px solid #e5e7eb;border-radius:8px;padding:8px}
@media (max-width:760px){
  .co-scroll{display:none}.co-cards{display:grid;gap:8px;padding:8px}
  .co-card{display:flex;gap:10px;text-align:left;border:1px solid #e5e7eb;border-radius:10px;background:#fff;padding:10px;font:inherit;cursor:pointer;width:100%}
  .cc-main{display:grid;gap:3px;min-width:0}.cc-main .sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .co-panel{width:100vw;animation:none}
  .co-tools .search{max-width:none}
  .fmenu{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;border-radius:14px 14px 0 0}
}
/* suggestiekaarten v2 + AI-assistent */
.sug-src{font-size:11.5px;color:#7c3aed;font-weight:500}
.sug-title{font-size:14.5px;line-height:1.35}.sug-sentence{margin:0;color:#374151}
.sug-ba{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.sug-ba figure{margin:0;display:grid;gap:4px;max-width:200px}.sug-ba figcaption{font-size:11.5px;color:#4b5563}
.sug-aud{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.sug-aud .logos{display:flex}.sug-aud .logos>span{margin-right:-6px;border:2px solid #fff;border-radius:8px;display:inline-flex}.sug-aud .more{margin-left:10px;font-size:12px;color:#6b7280;align-self:center}
.warn-s{display:inline-flex;gap:4px;align-items:center;font-size:11.5px;color:#92400e;background:#fffbeb;border-radius:6px;padding:2px 6px}.warn-s .i{width:12px;height:12px}
.sug-est{display:grid;grid-template-columns:1.1fr 1.3fr 1fr;gap:10px;border:1px solid #e5e7eb;border-radius:10px;padding:10px}.sug-est>div{display:grid;gap:2px;align-content:start}.sug-est .lbl{font-size:11px;color:#6b7280;text-transform:uppercase;letter-spacing:.03em}.sug-est .big{font-size:22px;color:#16a34a}.sug-est .muted{font-size:11.5px}
.dots{display:inline-flex;gap:3px}.dots i{width:8px;height:8px;border-radius:50%;background:#e5e7eb}.dots i.on{background:#7c3aed}
.sug-how summary{cursor:pointer;color:#2069f1;font-size:12.5px}.sug-how ul{margin:6px 0 0;padding-left:18px;font-size:12.5px;color:#374151;display:grid;gap:3px}
.thumbs{display:inline-flex;gap:2px;margin-left:auto}
.ai-card{margin-bottom:16px;border-color:#ede9fe;background:linear-gradient(#fff,#faf8ff)}.ai-card p{margin:4px 0 8px}.sug-mini{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.more-link{display:inline-block;margin-top:8px;color:#2069f1;font-size:12.5px}
@media (max-width:760px){.sug-est{grid-template-columns:1fr}.sug-mini{grid-template-columns:1fr}.thumbs{margin-left:0}.sug-ba figure{max-width:none;flex:1 1 140px}}
/* segmenten */
.seg-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0}
.seg-metrics div{background:var(--bg-2,#f7f7f8);border-radius:8px;padding:8px;display:grid}
.seg-metrics span{font-size:12px;color:var(--muted,#6b7280)}
.seg-ev{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}
.seg-co{display:inline-flex;gap:4px;align-items:center;border:1px solid var(--line,#e5e7eb);border-radius:999px;padding:2px 8px 2px 2px;font-size:13px}
.seg-form{display:grid;gap:8px}
.seg-form fieldset{border:1px solid var(--line,#e5e7eb);border-radius:8px;display:flex;flex-wrap:wrap;gap:4px 12px;padding:8px}
.seg-opt{display:inline-flex;gap:4px;align-items:center;font-weight:400}
.sug-kind{text-transform:uppercase;font-size:10px;letter-spacing:.04em}
@media (max-width:640px){.seg-metrics{grid-template-columns:1fr 1fr}.seg .hd{flex-wrap:wrap}}
.seg{min-width:0;max-width:100%}
.seg .seg-metrics>div{min-width:0}
@media (max-width:640px){.seg .hd{display:flex;flex-wrap:wrap;gap:6px}.seg .hd .r{margin-left:0!important;width:100%;display:flex;gap:6px}}
/* suggestiekaart (card.sug) niet laten botsen met de oude .sug-rij-layout */
section.card.sug{display:block;padding:0;grid-template-columns:none}
section.card.seg{display:block;padding:0;margin-bottom:12px}
section.card.seg>.hd{display:flex;align-items:center;gap:8px}
/* ronde 13: navigatie met logo, groepen, lade op mobiel; experimenten; profiel */
.sb-top{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 10px}
.sb-logo{display:inline-flex;align-items:center;min-height:44px;border-radius:6px}
.sb-logo img{display:block;height:24px;width:auto;max-width:150px}
.sb-logo:focus-visible,.nav a:focus-visible,.nav-close:focus-visible{outline:2px solid var(--accent,#2069f1);outline-offset:2px}
.nav-close{display:none}
.nav-h{cursor:default}
.nav a .nl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar .foot a.user{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;border-radius:6px;padding:4px;min-height:44px}
.sidebar .foot a.user:hover{background:rgba(0,0,0,.04)}
.sidebar .foot .who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.res-tabs{margin:0 0 14px}
.exp-card{margin-bottom:14px}
.exp-list{display:grid;gap:6px}
.exp-row{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:center;padding:10px 12px;border:1px solid var(--border,#e5e7eb);border-radius:8px;color:inherit;text-decoration:none;min-height:44px}
.exp-row:hover{border-color:var(--accent,#2069f1)}
.exp-row>.muted:not(.r){grid-column:2/3;font-size:12.5px}.exp-row .r{grid-column:3;grid-row:1/3;font-size:12.5px;text-align:right}
.flash{display:flex;gap:8px;align-items:center;background:#e8f7ee;color:#0f6b32;border:1px solid #bfe7cf;border-radius:8px;padding:10px 12px;margin-bottom:14px;font-weight:500}
ul.plain{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pw-form{display:grid;gap:6px;max-width:360px;margin-top:6px}.pw-form .btn{justify-self:start;margin-top:6px}
.pw-msg:empty{display:none}.pw-msg.err{color:#b42318}.pw-msg.ok{color:#0f6b32}
@media (max-width:1000px){
  .nav-close{display:inline-flex;min-width:44px;min-height:44px}
  .app .sidebar{overflow-y:auto}
  .app .sidebar .nav a,.app .sidebar .ws{min-height:44px;height:44px}
  .nav-btn{min-width:44px;min-height:44px}
  .exp-row{grid-template-columns:auto 1fr}.exp-row .r{grid-column:1/-1;grid-row:auto;text-align:left}
}

/* Instellingen: tabs + Herkenning (design/app-identiteit/richting-a/instellingen-herkenning.html) */
.settabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line, #e6e6e6); margin: 8px 0 16px; }
.settab { padding: 10px 12px; font-size: 13px; font-weight: 500; color: var(--fg-2, #5f5f5f); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; min-height: 44px; display: inline-flex; align-items: center; }
.settab.on { color: var(--accent, #2069f1); border-bottom-color: var(--accent, #2069f1); font-weight: 600; }
.recsrcs { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.recsrc { border: 1px solid var(--line, #e6e6e6); border-radius: 10px; padding: 12px; background: #fff; }
.recsrc .rowh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.recsrc .l { display: flex; flex-direction: column; min-width: 160px; flex: 1; }
.recsrc .l span { font-size: 12px; }
.recn { width: 22px; height: 22px; border-radius: 999px; background: #eaf1fd; color: #2069f1; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.recmv { display: inline-flex; gap: 4px; }
.recmv .btn { min-width: 36px; justify-content: center; }
.recdl { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin: 10px 0 0; font-size: 12px; }
.recdl dt { color: var(--fg-2, #5f5f5f); } .recdl dd { margin: 2px 0 0; font-weight: 600; }
.recconf { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.recconf li { display: flex; gap: 10px; align-items: flex-start; } .recconf li > span:last-child { display: flex; flex-direction: column; font-size: 13px; }
@media (max-width: 639px) { .recmv .btn { min-width: 44px; min-height: 44px; } }
/* Site toevoegen */
.add-site { margin: 6px 12px 0; justify-content: center; min-height: 44px; }
.mp-dlg { border: 0; border-radius: 14px; padding: 20px; width: min(440px, calc(100vw - 32px)); box-shadow: var(--shadow-pop); }
.mp-dlg::backdrop { background: rgba(15, 23, 42, .35); }
.mp-dlg h2 { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.mp-dlg label { display: block; font-size: 12px; font-weight: 600; margin: 14px 0 4px; }
.mp-dlg input { width: 100%; height: 40px; border: 1px solid var(--line-strong, #cbd5e1); border-radius: 8px; padding: 0 10px; font: inherit; }
.mp-dlg .err { color: #b42318; font-size: 13px; margin-top: 8px; }
.mp-dlg .muted { font-size: 13px; }
.mp-dlg .dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
@media (max-width: 640px) { .mp-dlg .dlg-actions .btn { min-height: 44px; flex: 1; justify-content: center; } }
/* richting A "Puzzel" */
.hero-match { position: relative; overflow: hidden; border-radius: 18px; background: linear-gradient(120deg,#1A5AD4 0%,#2069F1 45%,#5890F8 100%); color: #fff; padding: 22px 26px; margin-bottom: 16px; }
.hero-match .hm-puz { position: absolute; right: -14px; top: -14px; height: 190px; opacity: .15; }
@media (max-width: 639px) { .hero-match .hm-puz { display: none; } }
.hm-eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.85); margin: 0; }
.hm-concept { margin-left: 4px; border-radius: 999px; background: rgba(255,255,255,.2); padding: 1px 8px; text-transform: none; letter-spacing: 0; }
.hero-match h2 { margin: 8px 0 0; font-size: 44px; line-height: 1; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.hero-match h2 small { display: inline-block; margin-left: 6px; font-size: 17px; font-weight: 500; letter-spacing: 0; }
.hm-chips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.hm-chip { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: rgba(255,255,255,.15); padding: 4px 12px; font-size: 13px; }
.hm-chip i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.hm-foot { margin: 14px 0 0; font-size: 13px; color: rgba(255,255,255,.92); }
.hm-foot .eff, .hm-foot .eff-na { color: #fff; }
.puz { height: 64px; display: block; margin: 0 auto 8px; }
.puzzle-empty { border: 1px dashed #D6D6D6; border-radius: 14px; background: #fff; margin-bottom: 16px; }
.eff.up { color: #0F7A37; } .eff.down { color: #A51C1C; } .eff-na { color: #8B8B8B; cursor: help; }
.mp-example { margin-right: 6px; color: #8A4B05; }
.cp-icp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 20px 8px; font-size: 12px; }
.cp-icp .chip { min-height: 32px; cursor: pointer; } .cp-icp .chip[aria-pressed="true"] { outline: 2px solid currentColor; font-weight: 600; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 16px 0; }
.plan.cur { border: 2px solid #2069F1; } .plan ul { margin: 8px 0 12px; padding-left: 18px; font-size: 13px; } .plan .metric small { font-size: 12px; }
.notice { border-radius: 10px; background: #FDF1DC; color: #8A4B05; padding: 10px 14px; margin-top: 10px; font-size: 13px; }
@media (max-width: 639px) { .mp-example { font-size: 10px; padding: 1px 6px; margin-right: 2px; } .mp-example .ex-long { display: none; } }