*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden;max-width:100vw}
body{font-family:var(--font);color:var(--text);min-height:100vh;line-height:1.5}
/* ════════════ APP-LAYOUT ════════════ */
.app{display:grid;grid-template-columns:minmax(0,540px) 1fr;gap:1.75rem;padding:1.75rem;max-width:1740px;margin:0 auto;width:100%}
@media(max-width:1100px){.app{grid-template-columns:1fr;padding:1rem;gap:1rem}}
.app>*{min-width:0}
/* ════════════ PANEL (offert-card-stil) ════════════ */
.panel{background:var(--card-bg);border-radius:14px;overflow:hidden;border:none;margin-bottom:1.1rem;max-width:100%;transition:all .15s}
/* ════════════ ACCORDION (sub-sektioner inom panel) ════════════ */
.acc{background:rgba(255,255,255,.75);border:1px solid var(--mg-line-warm,rgba(168,119,66,.24));border-radius:8px;overflow:hidden;margin-bottom:.55rem;transition:all .15s}
.acc.open{border-color:rgba(13,38,63,.18);box-shadow:0 2px 10px rgba(13,38,63,.05)}
.acc.open .acc-sum{background:rgba(168,119,66,.06)}
.acc-sum{display:flex;align-items:center;gap:.7rem;padding:.85rem 1.1rem .85rem .85rem;cursor:pointer;user-select:none;transition:background .12s}
.acc-sum:hover{background:rgba(255,255,255,.4)}
.acc-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:rgba(13,38,63,.06);color:var(--text-soft);font-size:.72rem;font-weight:600;flex-shrink:0;font-family:var(--font);transition:all .15s}
.acc.open .acc-num{background:var(--mg-navy);color:#fff}
.acc-lbl{flex:1;min-width:0}
.acc-lbl strong{font-size:.95rem;font-weight:600;color:var(--text);display:block;line-height:1.2;font-family:var(--font)}
.acc-lbl span{font-size:.72rem;color:var(--text-soft);display:block;margin-top:.12rem}
.acc-chev{color:var(--text-soft);transition:transform .2s;flex-shrink:0}
.acc.open .acc-chev{transform:rotate(180deg);color:var(--g)}
.acc-body{display:none;padding:.6rem 1.1rem 1.2rem .85rem;border-top:1px dashed rgba(13,38,63,.08);background:rgba(255,255,255,.55)}
.acc.open .acc-body{display:block}
.acc-body .sec-title{margin-top:.85rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);font-weight:700;padding-bottom:.3rem;border-bottom:1px solid rgba(13,38,63,.08)}
.acc-body .sec-title:first-child{margin-top:.4rem}
/* Kostnader-grid (2 kolumner) */
.kost-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.55rem .85rem;margin-top:.65rem}
.kost-fl{min-width:0}
.kost-fl input,.kost-fl .input-with-unit input{min-width:0;width:100%;box-sizing:border-box}
.kost-fl .input-with-unit{display:flex;align-items:center;gap:.3rem;min-width:0}
.kost-grid .full{grid-column:1/-1}
.kost-fl{display:flex;flex-direction:column}
.kost-fl label{font-size:.72rem;color:var(--text-soft);font-weight:500;margin-bottom:.22rem;letter-spacing:.005em}
.kost-fl .input-with-unit{display:flex;align-items:center;gap:.45rem}
.kost-fl input{flex:1;min-width:0;background:#fff;border:1px solid var(--line);border-radius:6px;padding:.42rem .55rem;font-family:inherit;font-size:.82rem;color:var(--text)}
.kost-fl input:focus{outline:none;border-color:var(--g);box-shadow:0 0 0 2.5px rgba(168,119,66,.13)}
.kost-fl .unit{font-size:.72rem;color:var(--text-soft);font-weight:500;flex-shrink:0;min-width:54px}
.kost-summa{margin-top:.85rem;padding:.7rem .9rem;background:rgba(255,255,255,.65);border:1px solid rgba(13,38,63,.08);border-radius:8px;display:flex;justify-content:space-between;align-items:center}
.kost-summa-lbl{font-size:.78rem;font-weight:600;color:var(--text)}
.kost-summa-val{font-family:var(--mg-serif);font-size:1.2rem;font-weight:600;color:var(--mg-navy)}
.kost-summa-val small{font-family:var(--font);font-size:.7rem;color:var(--text-soft);font-weight:500;margin-left:.2rem}
/* Pantsatt/Pantbrev Ja-Nej-toggle */
.pant-row{margin-top:.85rem;padding:.75rem .9rem;background:rgba(255,255,255,.55);border:1px solid rgba(13,38,63,.08);border-radius:8px;display:flex;align-items:center;gap:.85rem;flex-wrap:wrap}
.pant-row > label{font-size:.82rem;font-weight:600;color:var(--text);flex:0 0 auto}
.pant-toggle{display:inline-flex;gap:.3rem;background:rgba(13,38,63,.04);padding:.18rem;border-radius:6px}
.pant-toggle button{position:relative;background:transparent;border:none;padding:.32rem .85rem;border-radius:4px;cursor:pointer;font-family:inherit;font-size:.75rem;font-weight:600;color:var(--text-soft);transition:all .12s}
.pant-toggle button.active{background:var(--mg-navy);color:#fff;box-shadow:0 2px 6px rgba(13,38,63,.18)}
.pant-toggle button.active::after{content:'';position:absolute;top:4px;right:5px;width:5px;height:5px;border-radius:50%;background:var(--g)}
.pant-summa-input{flex:1;min-width:140px;display:flex;align-items:center;gap:.4rem}
.pant-summa-input input{flex:1;min-width:0;background:#fff;border:1px solid var(--line);border-radius:6px;padding:.4rem .55rem;font-family:inherit;font-size:.82rem}
.pant-summa-input input:focus{outline:none;border-color:var(--g);box-shadow:0 0 0 2.5px rgba(168,119,66,.13)}
.pant-summa-input .unit{font-size:.72rem;color:var(--text-soft);font-weight:500}
/* Till broschyr-knapp i preview */
.to-broschyr-row{display:flex;justify-content:flex-end;margin-top:1rem;padding-top:.85rem;border-top:1px solid rgba(13,38,63,.08)}
.to-broschyr-btn{display:inline-flex;align-items:center;gap:.45rem;background:var(--mg-navy);color:#fff;font-size:.85rem;font-weight:600;text-decoration:none;padding:.6rem 1.05rem;border-radius:7px;border:1px solid var(--mg-navy);cursor:pointer;font-family:inherit;transition:all .15s;box-shadow:0 4px 12px rgba(13,38,63,.18)}
.to-broschyr-btn:hover{background:var(--mg-navy-2);transform:translateY(-1px);box-shadow:0 6px 16px rgba(13,38,63,.26)}
.to-broschyr-btn svg{width:14px;height:14px;flex-shrink:0}
.ph{background:transparent;color:var(--text);border-bottom:0;padding:1.4rem 1.7rem;font-weight:600;font-size:1.18rem;font-family:var(--mg-serif);display:flex;align-items:center;gap:.85rem;cursor:pointer;user-select:none;letter-spacing:-.005em;transition:background .15s}
.ph:hover{background:rgba(255,255,255,.3)}
.ph-icon{width:48px;height:48px;border-radius:50%;background:var(--mg-surface-stat);color:var(--mg-navy);display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0}
.ph-icon svg{width:22px;height:22px;opacity:1}
.ph-arrow{margin-left:auto;transition:transform .2s;font-size:1rem;color:var(--text-soft)}
.ph-arrow.open{transform:rotate(180deg)}
.pb{padding:0 1.7rem 1.7rem;display:none}.pb.open{display:block}
/* Sub-section labels */
.sec-title{font-family:var(--font);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);margin:1rem 0 .85rem;padding-bottom:0;border-bottom:0}
.pb > .sec-title:first-child{margin-top:0}
/* FORM */
.fg{display:grid;gap:.75rem}
.fg2{grid-template-columns:1fr 1fr}
.fg3{grid-template-columns:1fr 1fr 1fr}
.fl{display:flex;flex-direction:column;gap:5px}
label{font-size:.85rem;font-weight:500;color:var(--mg-ink-soft-alt);display:flex;align-items:center;gap:3px;font-family:var(--font)}
input,select,textarea{width:100%;padding:.7rem .9rem;border:1px solid var(--line);border-radius:8px;font-size:1rem;font-family:var(--font);background:#fff;color:var(--text);transition:border-color .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--g);background:#fff;box-shadow:0 0 0 3px rgba(168,119,66,.15)}
textarea{resize:vertical;min-height:80px}
/* BUTTONS */
.btn-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
button{cursor:pointer;font-family:var(--font);font-size:.94rem;font-weight:600;padding:.6rem 1.15rem;border-radius:8px;border:none;transition:all .15s}
/* .btn-p / .btn-g / .btn-o / .btn-sm — form + ljusa färger ägs nu av mg-brand.css (Prowebb-look).
Dark-färgerna för .btn-p/.btn-o ligger kvar nedan (navy-panel). */
.btn-danger{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}.btn-danger:hover{background:#fca5a5}
/* "Klar/genererad"-markör på AI-text-knappar: ribba + prick efter generering */
.btn-o.done,.btn-p.done{position:relative}
.btn-o.done{box-shadow:inset 4px 0 0 var(--p)}
.btn-o.done::after{content:'';position:absolute;top:6px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--p)}
.btn-p.done{box-shadow:inset 4px 0 0 rgba(255,255,255,.25),0 12px 24px rgba(13,38,63,.18)}
.btn-p.done::after{content:'';position:absolute;top:7px;right:9px;width:6px;height:6px;border-radius:50%;background:var(--g)}
.btn-purple{background:#ede9fe;color:#5b21b6;border:1px solid #ddd6fe}.btn-purple:hover{background:#ddd6fe}
/* IMAGES */
.img-dropzone{border:2px dashed var(--line);border-radius:10px;padding:1.5rem;text-align:center;cursor:pointer;transition:all .2s;color:var(--text-soft);font-size:.88rem;background:#fff}
.img-dropzone:hover,.img-dropzone.drag{border-color:var(--g);background:var(--card-stat);color:var(--text)}
.img-dropzone input{display:none}
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.55rem;margin-top:.7rem}
.img-card{border-radius:8px;overflow:hidden;border:1px solid var(--line);position:relative;background:#fff;cursor:grab;transition:box-shadow .15s}
.img-card:hover{box-shadow:0 3px 10px rgba(0,0,0,.08)}
.img-card.dragging{opacity:.4}
.img-card img{width:100%;height:100px;object-fit:cover;display:block;pointer-events:none}
.img-card-bar{display:flex;gap:3px;padding:4px;background:rgba(0,0,0,.03)}
.img-card-bar button{flex:1;padding:3px;font-size:.7rem;border-radius:5px}
.img-card .img-num{position:absolute;top:4px;left:4px;background:rgba(0,0,0,.6);color:#fff;font-size:.65rem;font-weight:700;padding:1px 5px;border-radius:4px;pointer-events:none}
.img-card .img-slot-lbl{position:absolute;bottom:32px;left:0;right:0;background:rgba(26,58,92,.75);color:#fff;font-size:.58rem;font-weight:700;text-align:center;padding:2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.img-card.editing-ai{outline:2px solid var(--g);outline-offset:2px}
.img-card.dragover{outline:2px solid var(--g);outline-offset:2px}
/* ── FULLSCREEN IMAGE EDITOR ─────────────────────── */
#imgFullscreen{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:700;display:none;flex-direction:column}
#imgFullscreen.open{display:flex}
/* ── Beskär & räta (crop / djup) ── */
#imgCrop{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:1300;display:none;flex-direction:column}
#imgCrop.open{display:flex}
.crop-header{background:var(--p);color:#fff;padding:.65rem 1.1rem;display:flex;align-items:center;gap:.75rem;flex-shrink:0}
.crop-title{font-weight:700;font-size:.95rem;flex:1}
.crop-close{background:rgba(255,255,255,.12);border:none;color:#fff;width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:1rem;line-height:1}
.crop-close:hover{background:rgba(255,255,255,.24)}
.crop-stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;background:#111;overflow:hidden;padding:0}
/* :not(.cropper-hidden) — rör aldrig Croppers dolda käll-![]()
; annars visas det som ett
synligt flex-syskon som krymper/förskjuter .cropper-container och "delar" bilden. */
.crop-stage img:not(.cropper-hidden){display:block;max-width:100%}
/* Live djup-förhandsvisning: overlay-kopia med CSS-perspektiv medan man drar; Croppern göms
under tiden så den riktiga (platta) bilden inte tittar fram i kanten. */
#cropKeyPreviewWrap{position:absolute;display:none;overflow:hidden;pointer-events:none;z-index:5;background:#fff}
#cropKeyPreviewWrap.on{display:block}
#cropKeyPreview{display:block;width:100%;height:100%;max-width:none;transform-origin:center center;will-change:transform}
.crop-stage.keypreview .cropper-container{visibility:hidden}
.crop-toolbar{background:#1a1a2a;border-top:1px solid rgba(255,255,255,.08);padding:14px 20px 18px;display:flex;flex-direction:column;gap:12px;flex-shrink:0}
.crop-sliders{display:flex;gap:28px;flex-wrap:wrap;justify-content:center}
.crop-slider-block{display:flex;flex-direction:column;gap:5px;min-width:min(440px,90vw)}
.crop-slider-head{display:flex;justify-content:space-between;align-items:baseline}
.crop-slider-lbl{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8}
.crop-degree{font-size:1.1rem;font-weight:600;color:var(--a);font-variant-numeric:tabular-nums}
.crop-toolbar input[type="range"]{width:100%;accent-color:var(--a)}
.crop-fine-row{display:flex;gap:6px;justify-content:center;margin-top:2px}
.crop-hint{font-size:.72rem;color:#8b98a5;text-align:center;margin-top:2px}
.crop-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.crop-row-lbl{font-size:.68rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.1em;margin-right:4px}
.crop-toolbar button{font-family:var(--font);font-size:.8rem;padding:.42rem .8rem;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#e2e8f0;cursor:pointer;transition:all .15s}
.crop-toolbar button:hover{border-color:var(--a);background:rgba(255,255,255,.12)}
.crop-toolbar button.on{background:var(--a);border-color:var(--a);color:#10161b;font-weight:700}
.crop-toolbar button:disabled{opacity:.38;cursor:default}
.crop-toolbar button:disabled:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15)}
.crop-cancel{margin-left:auto}
.crop-save{background:var(--a);border-color:var(--a);color:#10161b;font-weight:700;padding:.5rem 1.3rem}
.crop-save:hover{filter:brightness(1.08)}
.crop-outsize{font-size:.74rem;color:#8b98a5;font-variant-numeric:tabular-nums}
/* Crop-ingång i editorn — tydlig knapp för både ljust (default) och mörkt tema */
#imgFullscreen .ifs-crop-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;align-self:stretch;margin:12px 18px 2px;padding:.62rem;border:1px solid rgba(13,38,63,.22);background:#fff;color:#0d263f;border-radius:9px;font-family:var(--font);font-size:.85rem;font-weight:800;cursor:pointer;transition:all .15s}
#imgFullscreen .ifs-crop-btn:hover{border-color:#a87742;background:rgba(168,119,66,.08);color:#0d263f}
#imgFullscreen .ifs-crop-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
body[data-theme="dark"] #imgFullscreen .ifs-crop-btn{background:rgba(255,255,255,.08);color:#f3efe8;border-color:rgba(243,239,232,.2)}
body[data-theme="dark"] #imgFullscreen .ifs-crop-btn:hover{border-color:#c99a5f;background:rgba(255,255,255,.14);color:#f3efe8}
/* Styrke-kontroll: ren 3-segments (INTE .ifs-ba-toggle som är 2-kol-grid) */
.ifs-strength-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;margin:0 18px;border-radius:999px;background:rgba(13,38,63,.075);border:1px solid rgba(13,38,63,.14)}
.ifs-strength-row .ifs-str-btn{min-height:38px;border:0;border-radius:999px;background:transparent;color:#657385;font-size:.82rem;font-weight:800;cursor:pointer;font-family:var(--font);transition:all .15s}
.ifs-strength-row .ifs-str-btn:hover{background:rgba(255,255,255,.55);color:#0d263f}
.ifs-strength-row .ifs-str-btn.active{background:#0d263f;color:#fff;box-shadow:0 2px 8px rgba(13,38,63,.16)}
body[data-theme="dark"] .ifs-strength-row{background:rgba(255,255,255,.075);border-color:rgba(243,239,232,.16)}
body[data-theme="dark"] .ifs-strength-row .ifs-str-btn{color:rgba(243,239,232,.7)}
body[data-theme="dark"] .ifs-strength-row .ifs-str-btn:hover{color:#f3efe8;background:rgba(255,255,255,.1)}
body[data-theme="dark"] .ifs-strength-row .ifs-str-btn.active{background:#f3efe8;color:#0d263f}
.ifs-header{background:var(--p);color:#fff;padding:.65rem 1.1rem;display:flex;align-items:center;gap:.75rem;flex-shrink:0}
.ifs-title{font-weight:700;font-size:.95rem}
.ifs-close{margin-left:auto;background:rgba(255,255,255,.15);border:none;color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center}
.ifs-body{display:flex;flex:1;overflow:hidden;gap:0}
.ifs-img-wrap{flex:1;display:flex;align-items:center;justify-content:center;background:#111;position:relative;overflow:hidden}
.ifs-img-wrap img{max-width:100%;max-height:100%;object-fit:contain}
.ifs-ba-label{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.6);color:#fff;font-size:.7rem;font-weight:700;padding:3px 12px;border-radius:20px}
.ifs-side{width:300px;background:#1a1a2a;display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0}
.ifs-side-title{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;padding:.7rem .9rem .35rem;border-bottom:1px solid rgba(255,255,255,.06)}
.ifs-presets{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;padding:.65rem .75rem}
.ifs-preset-btn{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#e2e8f0;border-radius:8px;padding:.5rem .4rem;font-size:.75rem;font-weight:600;cursor:pointer;text-align:center;transition:all .15s;font-family:var(--font);line-height:1.3}
.ifs-preset-btn:hover{background:rgba(143,181,210,.4);border-color:var(--a)}
.ifs-preset-btn .pi{font-size:1.1rem;display:block;margin-bottom:2px}
.ifs-custom{padding:.3rem .75rem .75rem}
.ifs-custom textarea{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#e2e8f0;border-radius:8px;padding:.45rem .65rem;font-size:.8rem;font-family:var(--font);resize:none;height:60px}
.ifs-custom button{width:100%;margin-top:.4rem;background:var(--mg-navy);color:#fff;border:none;border-radius:8px;padding:.5rem;font-size:.85rem;font-weight:700;cursor:pointer;font-family:var(--font)}
.ifs-status{padding:.4rem .8rem;font-size:.75rem;color:#94a3b8;min-height:28px;border-top:1px solid rgba(255,255,255,.06)}
.ifs-ba-toggle{display:flex;gap:.4rem;padding:.4rem .75rem;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0}
.ifs-ba-btn{flex:1;padding:.4rem;font-size:.78rem;font-weight:600;border-radius:7px;cursor:pointer;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.07);color:#e2e8f0;font-family:var(--font);transition:all .15s}
.ifs-ba-btn.active{background:var(--mg-navy);border-color:var(--mg-navy);color:#fff}
.ifs-actions{display:flex;gap:.4rem;padding:.55rem .75rem;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0}
.ifs-use{flex:1;background:var(--mg-navy);color:#fff;border:none;border-radius:8px;padding:.5rem;font-size:.82rem;font-weight:700;cursor:pointer;font-family:var(--font)}
.ifs-use:hover{filter:brightness(1.1)}
.ifs-discard{background:rgba(255,255,255,.07);color:#94a3b8;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:.5rem .8rem;font-size:.82rem;cursor:pointer;font-family:var(--font)}
.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;padding:.8rem}
.preset-btn{background:#fff;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:.55rem .4rem;font-size:.77rem;font-weight:600;cursor:pointer;text-align:center;transition:all .15s;font-family:var(--font);line-height:1.3}
.preset-btn:hover{background:var(--mg-navy);color:#fff;border-color:var(--mg-navy)}
.preset-btn .preset-icon{font-size:1.2rem;display:block;margin-bottom:2px}
.preset-custom{padding:.55rem .8rem .8rem;border-top:1px solid var(--line)}
.preset-custom textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:.45rem .65rem;font-size:.82rem;font-family:var(--font);resize:none;height:54px}
.preset-custom button{width:100%;margin-top:.45rem;background:var(--mg-navy);color:#fff;border:none;border-radius:8px;padding:.5rem;font-size:.85rem;font-weight:700;cursor:pointer;font-family:var(--font)}
.preset-custom button:hover{filter:brightness(1.1)}
.preset-status{text-align:center;padding:.35rem;font-size:.75rem;color:var(--text-soft);border-top:1px solid var(--line);display:none}
/* ── BEFORE/AFTER MODAL ─────────────────────────── */
#baModal{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:800;display:none;align-items:center;justify-content:center;flex-direction:column;gap:.75rem}
#baModal.open{display:flex}
.ba-box{background:#fff;border-radius:14px;overflow:hidden;max-width:90vw;max-height:80vh;box-shadow:0 16px 48px rgba(0,0,0,.4)}
.ba-header{background:var(--p);color:#fff;padding:.65rem 1.1rem;display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9rem}
.ba-close{margin-left:auto;background:rgba(255,255,255,.15);border:none;color:#fff;width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:.9rem}
.ba-images{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.ba-col{position:relative;overflow:hidden}
.ba-col img{width:100%;height:100%;object-fit:cover;display:block;max-height:60vh}
.ba-label{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.65);color:#fff;font-size:.7rem;font-weight:700;padding:3px 11px;border-radius:20px;white-space:nowrap}
.ba-actions{display:flex;gap:.5rem;padding:.65rem .8rem;border-top:1px solid var(--line);background:#fff}
.ba-actions button{flex:1;padding:.45rem;font-size:.82rem;font-weight:700;border-radius:7px;cursor:pointer;border:none;font-family:var(--font)}
.ba-use{background:var(--mg-navy);color:#fff}.ba-use:hover{background:var(--mg-navy-2);filter:brightness(1.0)}
.ba-keep{background:var(--card-stat);color:var(--text-soft)}.ba-keep:hover{background:var(--line)}
/* DUMMY LOADER (pilot-testdata) */
.dummy-loader{background:var(--card-soft);border:1px solid var(--p);border-radius:10px;padding:.85rem 1rem;margin-bottom:1rem;display:flex;flex-direction:column;align-items:center;gap:.65rem}
.dummy-loader-label{font-size:.78rem;color:var(--text);font-weight:500;letter-spacing:.01em;display:flex;align-items:center;gap:.4rem;text-align:center}
.dummy-loader-label svg{width:15px;height:15px;color:var(--g);flex-shrink:0}
.dummy-loader-buttons{display:flex;gap:.55rem;flex-wrap:wrap;justify-content:center}
.dummy-btn{background:rgba(255,255,255,.64);border:1px solid var(--p);color:var(--text);font-size:.8rem;font-weight:500;padding:.45rem 1rem;border-radius:7px;cursor:pointer;font-family:var(--font);transition:all .15s;display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.dummy-btn:hover{background:#fff;border-color:var(--mg-line-warm);transform:translateY(-1px);box-shadow:0 8px 22px rgba(13,38,63,.06)}
.dummy-btn svg{width:14px;height:14px}
/* PDF ANALYSIS */
.pdf-drop{border:2px dashed var(--line);border-radius:10px;padding:1.4rem;text-align:center;cursor:pointer;background:#fff;color:var(--text-soft);font-size:.88rem;transition:all .2s}
.pdf-drop:hover{background:var(--card-stat);border-color:var(--g);color:var(--text)}
.pdf-drop input{display:none}
.pdf-result{background:var(--card-stat);border-radius:8px;padding:.95rem;border:1px solid var(--line);margin-top:.7rem;font-size:.88rem}
.pdf-result h4{font-size:.78rem;font-weight:700;color:var(--text);margin-bottom:.45rem;text-transform:uppercase;letter-spacing:.06em}
.pdf-field{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--line);font-size:.85rem}
.pdf-field:last-child{border:none}
.pdf-field .k{color:var(--text-soft)}
.pdf-field .v{font-weight:600;color:var(--text)}
/* NETTOSKULD */
.ns-box{background:var(--card-stat);border-radius:10px;padding:1rem;border:1px solid var(--line)}
.ns-result{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.75rem}
.ns-kpi{background:#fff;border-radius:8px;padding:.65rem .9rem;border:1px solid var(--line)}
.ns-kpi.hi{background:var(--p);border-color:var(--p)}
.kpi-lbl{font-size:.72rem;color:var(--text-soft);margin-bottom:3px}
.kpi-val{font-size:1.08rem;font-weight:700;color:var(--text)}
.ns-kpi.hi .kpi-lbl{color:rgba(255,255,255,.65)}
.ns-kpi.hi .kpi-val{color:#fff}
/* TEXT OUTPUT */
.txt-out{background:#fff;border:1px solid var(--line);border-radius:8px;padding:.75rem;font-size:.9rem;line-height:1.7;min-height:60px;white-space:pre-wrap;margin-top:.45rem;cursor:text;color:var(--text)}
.txt-out:empty::before{content:attr(data-ph);color:var(--mg-ink-faint);font-style:italic}
.txt-out[contenteditable="true"]:focus{outline:2px solid var(--g);border-color:var(--g)}
.char-count{font-size:.76rem;font-weight:600;margin-top:4px}
.char-count.ok{color:#16a34a}.char-count.warn{color:#ca8a04}.char-count.over{color:#dc2626}
/* Tonläge-väljare */
.tone-btn{font:inherit;font-size:.78rem;font-weight:600;padding:.32rem .7rem;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--text-soft);cursor:pointer;transition:all .12s}
.tone-btn:hover{border-color:var(--p);color:var(--text)}
.tone-btn.active{background:var(--p);border-color:var(--p);color:#fff}
body[data-theme="dark"] .tone-btn{background:rgba(21,34,51,.7);border-color:rgba(255,255,255,.12);color:var(--text)}
body[data-theme="dark"] .tone-btn.active{background:var(--p);border-color:var(--p);color:#fff}
/* ════════════ PREVIEW (höger kolumn) ════════════ */
.preview-sticky{position:relative}
.preview-panel{background:var(--card-bg);border-radius:14px;overflow:hidden}
/* Vänsterpanel: sticky med egen inre scroll. Höger panel scrollar med sidan. */
.left-scroll{
position:sticky;
top:102px;
/* Begränsar max-höjd så att scroll-arean slutar där preview slutar.
Använder samma topp-offset som preview-panelen. */
max-height:calc(100vh - 102px);
overflow-y:auto;
overflow-x:hidden;
padding-right:.4rem;
scrollbar-width:thin;
scrollbar-color:rgba(13,38,63,.18) transparent;
/* Säkerställer att kolumnen inte sträcker sig längre ner än preview */
align-self:start;
}
/* På bredare skärmar: matcha höjd med preview-panel via grid */
@media(min-width:1101px){
.app{align-items:start}
.preview-sticky{align-self:start}
}
.left-scroll::-webkit-scrollbar{width:8px}
.left-scroll::-webkit-scrollbar-track{background:transparent}
.left-scroll::-webkit-scrollbar-thumb{background:rgba(13,38,63,.18);border-radius:4px}
.left-scroll::-webkit-scrollbar-thumb:hover{background:rgba(13,38,63,.3)}
@media (max-width: 1023px){
.left-scroll{position:static;max-height:none;overflow:visible;padding-right:0}
}
.preview-head{display:flex;align-items:center;gap:.85rem;padding:1.4rem 1.7rem 1rem;font-family:var(--mg-serif);font-size:1.18rem;font-weight:600;color:var(--text);letter-spacing:-.005em}
.preview-head .ph-icon{width:48px;height:48px;border-radius:50%;background:var(--mg-surface-stat);color:var(--mg-navy);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.preview-head .ph-icon svg{width:22px;height:22px}
.preview-realtime{margin-left:auto;font-size:.88rem;font-weight:500;color:#16a34a;display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font)}
.preview-realtime::before{content:'';width:8px;height:8px;border-radius:50%;background:#16a34a}
.preview-tabs{display:flex;gap:0;padding:0 1.7rem;border-bottom:1px solid var(--line);background:transparent}
.preview-tab{padding:.75rem 1.1rem .85rem;font-size:.98rem;font-weight:500;cursor:pointer;color:var(--text-soft);border-bottom:2.5px solid transparent;margin-bottom:-1px;transition:all .15s;font-family:var(--font);background:transparent;border-left:0;border-right:0;border-top:0}
.preview-tab.active{color:var(--text);border-bottom-color:var(--g);font-weight:600}
.preview-tab:hover{color:var(--text)}
.preview-body{padding:1.7rem}
/* ── MAGAZINE PREVIEW (stora kortet med eyebrow + titel + stat-grid + detail-grid) ── */
.hp{font-family:var(--font)}
.mag-card{background:var(--card-soft);border-radius:14px;padding:2.5rem 2rem 1.75rem;text-align:center;border:1px solid rgba(13,38,63,.06)}
/* Hero-bild + tumnaglar i preview-kortet */
.mag-hero{position:relative;width:calc(100% + 4rem);margin:-2.5rem -2rem 1.75rem;aspect-ratio:16/10;overflow:hidden;background:#e8e2d2;border-radius:14px 14px 0 0;display:flex;align-items:center;justify-content:center}
.mag-hero img{width:100%;height:100%;object-fit:cover;display:block}
.mag-hero-empty{color:#bba98a;font-family:var(--mg-serif);font-style:italic;font-size:1rem}
.mag-hero-empty svg{width:42px;height:42px;opacity:.5;display:block;margin:0 auto .35rem}
.mag-hero-count{position:absolute;bottom:.75rem;right:.85rem;background:rgba(13,38,63,.78);color:#fff;font-size:.7rem;font-weight:600;padding:.32rem .65rem;border-radius:14px;letter-spacing:.02em;display:flex;align-items:center;gap:.3rem;backdrop-filter:blur(4px)}
.mag-hero-count svg{width:11px;height:11px}
.mag-thumbs{display:flex;gap:.4rem;margin:-.5rem 0 1.4rem;overflow-x:auto;padding-bottom:.3rem;scrollbar-width:thin}
.mag-thumb{flex:0 0 56px;height:42px;border-radius:5px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border-color .15s}
.mag-thumb.active{border-color:var(--g)}
.mag-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mag-eyebrow{font-family:var(--font);font-size:.86rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text);margin-bottom:1.2rem}
.mag-title{font-family:var(--mg-serif);font-size:3rem;font-weight:500;letter-spacing:-.02em;color:var(--text);line-height:1.08;margin-bottom:.75rem}
.mag-subtitle{font-family:var(--mg-serif);font-style:italic;font-size:1.1rem;color:var(--text-soft);margin-bottom:1.6rem;line-height:1.5}
.mag-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1.5rem}
.mag-stat{background:#fff;border-radius:10px;padding:.95rem .9rem;display:flex;align-items:center;gap:.7rem;text-align:left}
.mag-stat-icon{width:36px;height:36px;border-radius:8px;background:var(--card-stat);color:var(--text);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mag-stat-icon svg{width:18px;height:18px}
.mag-stat-text{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.mag-stat-val{font-family:var(--mg-serif);font-size:1.1rem;font-weight:600;color:var(--text);line-height:1.1}
.mag-stat-lbl{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft)}
.mag-addr-line{font-family:var(--mg-serif);font-style:italic;font-size:1rem;color:var(--text-soft);margin:1rem 0 1.25rem;text-align:left}
.mag-details{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:left}
.mag-detail{display:flex;flex-direction:column;gap:3px}
.mag-detail-lbl{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft)}
.mag-detail-val{font-family:var(--mg-serif);font-size:1.02rem;color:var(--text);line-height:1.3}
/* Mäklare-card under preview */
.mag-broker{display:flex;align-items:center;gap:.85rem;padding:1rem 1.25rem;background:#fff;border-radius:12px;margin-top:1.25rem;border:1px solid var(--line)}
.mag-broker-logo{width:42px;height:42px;border-radius:50%;background:var(--p);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.82rem;font-weight:700;flex-shrink:0;font-family:var(--mg-serif)}
.mag-broker-text{flex:1;min-width:0}
.mag-broker-name{font-size:.95rem;font-weight:600;color:var(--text);line-height:1.2}
.mag-broker-sub{font-size:.78rem;color:var(--text-soft);margin-top:2px}
.mag-broker-broschyr{display:inline-flex;align-items:center;gap:.45rem;background:var(--mg-navy);color:#fff;border:1px solid var(--mg-navy);border-radius:8px;padding:.55rem .95rem;font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;flex-shrink:0;transition:all .15s;box-shadow:0 3px 10px rgba(13,38,63,.18)}
.mag-broker-broschyr:hover{background:var(--mg-navy-2);transform:translateY(-1px);box-shadow:0 5px 14px rgba(13,38,63,.26)}
.mag-broker-broschyr svg{width:13px;height:13px;flex-shrink:0}
/* Hemnet-style fallback badges (för bakåtkompatibilitet med befintliga IDs) */
.hp-img{display:none}
.hp-badges{display:none}
.hp-price,.hp-addr,.hp-facts,.hp-fact,.hp-fact .fl,.hp-fact .fv{display:none}
.hp-desc{font-size:.9rem;line-height:1.7;color:var(--text);white-space:pre-wrap;margin-top:1.5rem;padding:1.25rem;background:#fff;border-radius:10px;border:1px solid var(--line)}
.hp-desc:empty{display:none}
.hp-ns{background:var(--card-stat);border-radius:8px;padding:.7rem 1rem;margin-top:1.25rem;font-size:.86rem;border:1px solid var(--line)}
.hp-ns strong{color:var(--text)}
.hp-office{display:none}
/* SPINNER / STATUS */
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:5px}
@keyframes spin{to{transform:rotate(360deg)}}
.status-bar{padding:.55rem 1.5rem;font-size:.82rem;border-top:1px solid var(--line);color:var(--text-soft);display:flex;align-items:center;gap:.4rem;font-family:var(--font);background:transparent}
.sdot{width:8px;height:8px;border-radius:50%;background:#16a34a;flex-shrink:0}
.sdot.busy{background:var(--g-shine);animation:pulse .7s ease-in-out infinite}
.sdot.err{background:#ef4444}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
#toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--p);color:#fff;padding:.65rem 1.2rem;border-radius:8px;font-size:.88rem;transform:translateY(60px);opacity:0;transition:all .3s;z-index:9999;pointer-events:none}
#toast.show{transform:translateY(0);opacity:1}
.progress-bar{height:3px;background:var(--card-stat);border-radius:2px;overflow:hidden;margin-top:.4rem;display:none}
.progress-fill{height:100%;background:var(--mg-navy);width:0;transition:width .3s;border-radius:2px}
/* HJÄLP-IKON PER PANEL-RUBRIK: flyttad till mg-help.css (en definition för
hela appen). Låg tidigare här, i mg-sociala-medier.css och inline i
broschyr.html med olika bakgrund, ram och marginal. */
/* ── HJÄLP-SIDOPANEL ────────────────────────────────────────── */
/* Kvarvarande dubblett av mg-help.css. Den här filen laddas EFTER den, så det
är z-index här som gäller — håll värdet i takt med mg-help.css, annars
hamnar hjälpen bakom dikteringsmodalen igen. */
#helpPanel{position:fixed;top:0;right:0;width:460px;max-width:90vw;height:100vh;background:#fff;z-index:10500;display:flex;flex-direction:column;box-shadow:-6px 0 32px rgba(13,38,63,.18);transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}
#helpPanel.open{transform:translateX(0)}
#helpPanel .hp-header{background:linear-gradient(135deg,var(--mg-navy) 0%,var(--mg-navy-2) 100%);color:#fff;padding:1.15rem 1.3rem;display:flex;align-items:center;gap:.85rem;flex-shrink:0;border-bottom:3px solid var(--a)}
#helpPanel .hp-header-icon{width:40px;height:40px;border-radius:8px;background:rgba(168,119,66,.25);display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0}
#helpPanel .hp-header-title{font-size:1.02rem;font-weight:700;line-height:1.2;font-family:var(--font);letter-spacing:-.005em}
#helpPanel .hp-header-sub{font-size:.76rem;opacity:.7;margin-top:2px}
#helpPanel .hp-close{margin-left:auto;background:rgba(255,255,255,.12);border:none;color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:.95rem;display:flex;align-items:center;justify-content:center;transition:background .15s;flex-shrink:0;padding:0}
#helpPanel .hp-close:hover{background:rgba(168,119,66,.4)}
#helpPanel .hp-body{padding:1.25rem 1.3rem;overflow-y:auto;flex:1;font-size:.92rem;color:var(--text);line-height:1.7;font-family:var(--font);background:#fff}
#helpPanel .hp-body h4{font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--a);margin:1.05rem 0 .4rem;padding-bottom:.3rem;border-bottom:1px solid var(--line)}
#helpPanel .hp-body h4:first-child{margin-top:0}
#helpPanel .hp-body p{margin-bottom:.6rem;color:var(--text)}
#helpPanel .hp-body ul{padding-left:1.2rem;margin-bottom:.6rem}
#helpPanel .hp-body li{margin-bottom:.3rem;color:var(--text)}
#helpPanel .hp-body .hp-tip{background:linear-gradient(135deg,rgba(168,119,66,.1) 0%,rgba(168,119,66,.04) 100%);border-left:3px solid var(--a);border-radius:0 8px 8px 0;padding:.65rem .85rem;font-size:.86rem;color:var(--text);margin:.7rem 0}
#helpPanel .hp-body .hp-warn{background:linear-gradient(135deg,rgba(168,119,66,.14) 0%,rgba(168,119,66,.05) 100%);border-left:3px solid var(--g);border-radius:0 8px 8px 0;padding:.65rem .85rem;font-size:.86rem;color:var(--text);margin:.7rem 0}
#helpPanel .hp-body code{background:var(--card-stat);border-radius:4px;padding:1px 6px;font-size:.85rem;color:var(--text)}
#helpPanel .hp-divider{display:flex;align-items:center;gap:.55rem;padding:.55rem 1.1rem;flex-shrink:0;border-top:1px solid var(--line)}
#helpPanel .hp-divider::before,#helpPanel .hp-divider::after{content:'';flex:1;height:1px;background:var(--line)}
#helpPanel .hp-divider span{font-size:.72rem;font-weight:600;color:var(--text-soft);white-space:nowrap}
#helpPanel .hp-chat-area{display:flex;flex-direction:column;background:var(--mg-surface);border-top:1px solid var(--line);flex-shrink:0;max-height:280px}
#helpPanel .hp-messages{overflow-y:auto;padding:.65rem .8rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
#helpPanel .hp-messages::-webkit-scrollbar{width:3px}
#helpPanel .hp-messages::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}
#helpPanel .hp-msg{max-width:88%;font-size:.8rem;line-height:1.5;padding:.45rem .65rem;border-radius:10px;animation:msgIn .18s ease;font-family:var(--font)}
@keyframes msgIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
#helpPanel .hp-msg.bot{background:#fff;color:var(--text);border-bottom-left-radius:3px;align-self:flex-start;border:1px solid var(--line)}
#helpPanel .hp-msg.user{background:var(--mg-navy);color:#fff;border-bottom-right-radius:3px;align-self:flex-end}
#helpPanel .hp-msg.typing{background:#fff;align-self:flex-start;color:var(--text-soft);font-style:italic;font-size:.78rem;border:1px solid var(--line)}
#helpPanel .hp-suggestions{display:flex;flex-wrap:wrap;gap:.3rem;padding:.35rem .8rem 0}
#helpPanel .hp-sugg{background:#fff;color:var(--text);border:1px solid var(--line);border-radius:20px;padding:4px 11px;font-size:.74rem;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font)}
#helpPanel .hp-sugg:hover{background:var(--mg-navy);color:#fff;border-color:var(--mg-navy);border-image:none}
#helpPanel .hp-input-row{display:flex;gap:.4rem;padding:.55rem .8rem;border-top:1px solid var(--line)}
#helpPanel .hp-input-row input{flex:1;padding:.45rem .7rem;border:1px solid var(--line);border-radius:20px;font-size:.82rem;font-family:var(--font);background:#fff;outline:none;transition:border-color .15s}
#helpPanel .hp-input-row input:focus{border-color:var(--g)}
#helpPanel .hp-send{background:var(--mg-navy);color:#fff;border:none;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
#helpPanel .hp-send:hover{filter:brightness(1.1)}
#helpPanel .hp-send svg{width:17px!important;height:17px!important;display:block!important;flex:0 0 17px!important;color:currentColor!important;fill:currentColor!important}
/* Mjuka placeholders så fält inte ser ifyllda ut */
input::placeholder, textarea::placeholder{color:var(--mg-ink-faint) !important;opacity:1 !important;font-weight:400}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{color:var(--mg-ink-faint) !important;opacity:1 !important;font-weight:400}
input::-moz-placeholder, textarea::-moz-placeholder{color:var(--mg-ink-faint) !important;opacity:1 !important;font-weight:400}
/* Auto-grow textareas i objektsdata */
#objDesc, #objLocation, #objExtra, #renoveringar{min-height:60px;overflow-y:auto;transition:height .12s}
/* Magasin-stat-grid responsivt */
@media(max-width:900px){
.mag-stats{grid-template-columns:repeat(2,1fr)}
.mag-details{grid-template-columns:repeat(2,1fr)}
.mag-title{font-size:2.2rem}
.mag-card{padding:1.5rem 1.25rem 1.25rem}
}
@media(max-width:480px){
.app{padding:.75rem;gap:.7rem}
.fg.fg3{grid-template-columns:1fr 1fr}
.pb{padding:0 1rem 1rem}
.ph{padding:.95rem 1.1rem;font-size:.95rem}
.mag-stats,.mag-details{grid-template-columns:1fr 1fr}
}
/* ══════════════════════════════════════════════════════
DARK MODE — END-OF-FILE OVERRIDES (maximum cascade priority)
══════════════════════════════════════════════════════ */
body[data-theme="dark"] .acc{background:rgba(21,34,51,.65)!important;border-color:rgba(255,255,255,.08)!important}
body[data-theme="dark"] .acc-body{background:rgba(21,34,51,.55)!important;border-color:rgba(255,255,255,.06)!important}
body[data-theme="dark"] .acc-head:hover{background:rgba(21,34,51,.70)!important}
body[data-theme="dark"] .acc-sum:hover{background:rgba(255,255,255,.04)!important}
body[data-theme="dark"] .acc.open .acc-num{background:rgba(201,154,95,.85)!important;color:var(--mg-navy)!important}
body[data-theme="dark"] .panel{background:var(--mg-dark-surface)!important}
body[data-theme="dark"] .preview-body{background:var(--mg-dark-surface)!important}
body[data-theme="dark"] .preview-head{background:rgba(21,34,51,.80)!important;border-color:rgba(255,255,255,.08)!important}
body[data-theme="dark"] .preview-tab{color:var(--text-soft)!important}
body[data-theme="dark"] .preview-tab.active{color:var(--text)!important;border-color:var(--g)!important}
body[data-theme="dark"] .mag-card{background:var(--mg-dark-surface-2)!important;border-color:rgba(255,255,255,.08)!important}
body[data-theme="dark"] .mag-hero{border-color:rgba(255,255,255,.08)!important}
body[data-theme="dark"] .mag-stat-icon{background:rgba(201,154,95,.15)!important}
body[data-theme="dark"] .dummy-loader{background:var(--mg-dark-surface-2)!important}
body[data-theme="dark"] .h-btn{background:rgba(21,34,51,.60)!important;border-color:rgba(255,255,255,.08)!important;color:var(--text)!important}
body[data-theme="dark"] .h-btn:hover{background:rgba(21,34,51,.80)!important;border-color:rgba(201,154,95,.35)!important}
body[data-theme="dark"] .h-btn.active{background:rgba(21,34,51,.90)!important;color:var(--text)!important;border-color:rgba(255,255,255,.10)!important}
body[data-theme="dark"] .settings-btn{background:rgba(21,34,51,.60)!important;border-color:rgba(255,255,255,.10)!important;color:var(--text)!important}
body[data-theme="dark"] .settings-btn:hover{background:rgba(21,34,51,.80)!important;border-color:rgba(201,154,95,.40)!important}
body[data-theme="dark"] input,body[data-theme="dark"] select,body[data-theme="dark"] textarea{background:rgba(21,34,51,.80)!important;color:var(--mg-dark-ink)!important;border-color:rgba(255,255,255,.12)!important}
body[data-theme="dark"] input:focus,body[data-theme="dark"] select:focus,body[data-theme="dark"] textarea:focus{background:rgba(21,34,51,.90)!important;border-color:rgba(201,154,95,.45)!important;box-shadow:0 0 0 3px rgba(201,154,95,.12)!important}
body[data-theme="dark"] input::placeholder,body[data-theme="dark"] textarea::placeholder{color:var(--mg-dark-ink-faint)!important}
body[data-theme="dark"] label{color:var(--text-soft)!important}
body[data-theme="dark"] .ph{color:var(--text)!important}
body[data-theme="dark"] .ph:hover{background:rgba(255,255,255,.04)!important}
body[data-theme="dark"] .ph-icon{background:rgba(201,154,95,.15)!important;color:var(--text)!important}
body[data-theme="dark"] .kost-summa{background:rgba(21,34,51,.50)!important;border-color:rgba(255,255,255,.08)!important}
body[data-theme="dark"] .kost-summa-lbl{color:var(--text)!important}
body[data-theme="dark"] .kost-summa-val{color:var(--text)!important}
body[data-theme="dark"] .kost-summa-val small{color:var(--text-soft)!important}
body[data-theme="dark"] .kost-fl input{background:rgba(21,34,51,.85)!important;color:var(--text)!important;border-color:rgba(255,255,255,.10)!important}
body[data-theme="dark"] .kost-fl input:focus{border-color:rgba(201,154,95,.55)!important;box-shadow:0 0 0 2.5px rgba(201,154,95,.18)!important}
body[data-theme="dark"] .pant-row{background:rgba(21,34,51,.50)!important;border-color:rgba(255,255,255,.08)!important}
body[data-theme="dark"] .pant-row > label{color:var(--text)!important}
body[data-theme="dark"] .pant-summa-input input{background:rgba(21,34,51,.85)!important;color:var(--text)!important;border-color:rgba(255,255,255,.10)!important}
body[data-theme="dark"] .pant-row{background:rgba(21,34,51,.50)!important;border-color:rgba(255,255,255,.08)!important}
body[data-theme="dark"] .pant-toggle button{background:rgba(21,34,51,.70)!important;border-color:rgba(255,255,255,.12)!important;color:var(--text)!important}
body[data-theme="dark"] .to-broschyr-btn{background:rgba(201,154,95,.85)!important;color:var(--mg-navy)!important;border-color:rgba(201,154,95,.60)!important}
body[data-theme="dark"] .btn-o{background:rgba(21,34,51,.70)!important;color:var(--text)!important;border-color:rgba(255,255,255,.12)!important}
body[data-theme="dark"] .mg-wordmark{color:var(--text)!important}
body[data-theme="dark"] .h-name,body[data-theme="dark"] .h-sub{color:var(--text-soft)!important;border-color:rgba(255,255,255,.10)!important}
body[data-theme="dark"] .h-menu-panel{background:var(--mg-dark-surface)!important}
body[data-theme="dark"] .h-menu-head{color:var(--text)!important;border-color:rgba(255,255,255,.08)!important}
body[data-theme="dark"] .h-menu-list a:hover{background:rgba(201,154,95,.10)!important}
/* PILOT-badge: navy text på ljus guld i dark mode (vit försvinner) */
body[data-theme="dark"] .badge{color:var(--mg-navy)!important;text-shadow:none!important}
/* Lag-banner i Nettoskuld-fliken (inline #fff7ed) */
body[data-theme="dark"] #tabNs > div[style*="fff7ed"]{background:rgba(201,154,95,.08)!important;border-color:rgba(201,154,95,.30)!important;color:var(--mg-dark-gold-light)!important}
body[data-theme="dark"] #tabNs > div[style*="fff7ed"] strong{color:var(--mg-dark-gold-light)!important}
/* Indirekt nettoskuld rubrik */
body[data-theme="dark"] #tabNs > div:first-child{color:var(--text-soft)!important}
body[data-theme="dark"] #pvNsBody > div{color:var(--text-soft)!important}
/* Pantsatt Ja/Nej: navy active istället för gold */
body[data-theme="dark"] .pant-toggle{background:rgba(21,34,51,.50)!important}
body[data-theme="dark"] .pant-toggle button{background:transparent!important;color:var(--text-soft)!important;border:none!important}
body[data-theme="dark"] .pant-toggle button.active{background:rgba(21,34,51,.90)!important;color:var(--text)!important;box-shadow:inset 0 0 0 1px rgba(201,154,95,.40)!important}
body[data-theme="dark"] .pant-toggle button.active::after{background:var(--text)}
/* Left-scroll: stoppa vid preview-bottom (sätts dynamiskt via JS men säkerhetsfallback) */
.app{align-items:start!important}
.preview-sticky{align-self:start!important}
/* Pilot footer banner (mag-broker) - navy bakgrund i dark mode */
body[data-theme="dark"] .mag-broker{background:rgba(21,34,51,.70)!important;border-color:rgba(255,255,255,.10)!important}
body[data-theme="dark"] .mag-broker-name{color:var(--text)!important}
body[data-theme="dark"] .mag-broker-sub{color:var(--text-soft)!important}
body[data-theme="dark"] .mag-broker-broschyr{background:rgba(21,34,51,.85)!important;color:var(--text)!important;border-color:rgba(201,154,95,.40)!important;box-shadow:0 3px 10px rgba(0,0,0,.25)!important}
body[data-theme="dark"] .mag-broker-broschyr:hover{background:rgba(21,34,51,.95)!important;border-color:rgba(201,154,95,.65)!important}
/* ── Dina verktyg-style buttons (sidspecifika) ── */
body[data-theme="dark"] .dummy-btn{background:rgba(21,34,51,.70)!important;border-color:rgba(216,224,232,.45)!important;color:var(--text)!important}
body[data-theme="dark"] .dummy-btn:hover{background:rgba(21,34,51,.90)!important;border-color:rgba(201,154,95,.40)!important;color:var(--text)!important;box-shadow:0 2px 6px rgba(0,0,0,.30)!important}
body[data-theme="dark"] .txt-out{background:rgba(21,34,51,.80)!important;color:var(--text)!important;border-color:rgba(255,255,255,.12)!important}
body[data-theme="dark"] .txt-out:empty::before{color:#7a7263!important}
body[data-theme="dark"] .mag-stat{background:rgba(21,34,51,.55)!important;border:1px solid rgba(255,255,255,.06)!important}
body[data-theme="dark"] .mag-stat-text strong{color:var(--text)!important}
body[data-theme="dark"] .mag-stat-text small{color:var(--text-soft)!important}
/* btn-p: navy-style in dark mode, NOT gold */
body[data-theme="dark"] .btn-p{background:rgba(21,34,51,.85)!important;color:var(--text)!important;border-color:rgba(201,154,95,.40)!important;box-shadow:0 4px 12px rgba(0,0,0,.20)!important}
body[data-theme="dark"] .btn-p:hover{background:rgba(21,34,51,.95)!important;border-color:rgba(201,154,95,.60)!important;box-shadow:0 6px 16px rgba(0,0,0,.30)!important}
/* Char count colors stay readable in dark */
body[data-theme="dark"] .char-count.ok{color:#4ade80!important}
body[data-theme="dark"] .char-count.warn{color:#fbbf24!important}
body[data-theme="dark"] .char-count.over{color:#f87171!important}
/* Shared replacement for former inline helpers */
#helpOverlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:10490;opacity:0;pointer-events:none;transition:opacity .25s}
.text-actions-row{display:flex;gap:.45rem;align-items:center;margin-bottom:.7rem}
.text-clear-button{margin-left:auto;color:#dc2626;border-color:#e9c2c2}
/* Keep shared header/menu controlled by mg-brand, not legacy text-page button rules. */
#mg-header .utility-link,
#mg-header .menu-button,
#mg-header .icon-button,
#mg-header .app-menu-close,
#mg-header .theme-option {
font-family: var(--font);
}
#mg-header .app-menu-close {
padding: 0;
}
#mg-header .menu-button,
#mg-header .utility-link {
padding: 0 17px;
border-radius: 999px;
}
#mg-header .icon-button {
padding: 0;
}
#mg-header .menu-theme-options .theme-option {
padding: 9px;
border-radius: 8px;
}
/* Former inline styles extracted from text.html */
.text-inline-001{margin-top:.5rem}
.text-inline-002{display:none}
.text-inline-003{width:100%;padding:.45rem .65rem;border:1px solid var(--line);border-radius:8px;font-size:.85rem;font-family:var(--font);resize:none}
.text-inline-004{margin-top:.75rem}
.text-inline-005{display:none;margin-top:.4rem}
.text-inline-006{margin-top:.6rem}
.text-inline-007{gap:.5rem;margin-top:.3rem}
.text-inline-008{font-size:.72rem;color:var(--text-soft);font-weight:500}
.text-inline-009{width:100%;padding:.45rem .55rem;border:1px solid var(--line);border-radius:8px;font-size:.85rem;font-family:var(--font);background:#fff}
.text-inline-010{gap:.5rem;margin-top:.4rem}
.text-inline-011{width:100%;padding:.45rem .65rem;border:1px solid var(--line);border-radius:8px;font-size:.85rem;font-family:var(--font);resize:none;margin-top:.3rem}
.text-inline-012{display:none;margin-top:.5rem}
.text-inline-013{font-size:.7rem;color:#9aa4b1;margin-top:.2rem}
.text-inline-014{margin-top:.95rem}
.text-inline-015{flex-direction:column;gap:.4rem;margin-top:.4rem}
.text-inline-016{display:flex;gap:.4rem}
.text-inline-017{flex:1;padding:.42rem .65rem;border:1px solid var(--line);border-radius:7px;font-size:.8rem;font-family:var(--font);background:#fff}
.text-inline-018{font-size:.7rem;color:#657385;line-height:1.45;font-style:italic;padding:.2rem 0}
.text-inline-019{font-size:.72rem;color:#9aa4b1;display:none}
.text-inline-020{margin-top:.4rem}
.text-inline-021{margin-top:.85rem;font-size:.63rem}
.text-inline-022{margin-top:.3rem}
.text-inline-023{color:#22863a}
.text-inline-024{border-color:#b7e0c8}
.text-inline-025{display:none;background:#f0f7ff;border-radius:7px;padding:.4rem .7rem;font-size:.76rem;margin-top:.5rem;color:#284157}
.text-inline-026{font-size:.68rem;opacity:.65;margin-left:.4rem}
.text-inline-027{display:none;margin-top:.6rem}
.text-inline-028{font-size:.68rem;color:#9aa4b1;margin-top:.5rem;line-height:1.5}
.text-inline-029{color:#657385}
.text-inline-030{font-size:1.3rem;margin-bottom:.3rem;opacity:.5}
.text-inline-031{font-weight:600}
.text-inline-032{font-size:.72rem;margin-top:.2rem;opacity:.65}
.text-inline-033{font-size:.7rem;color:#9aa4b1;margin-top:.3rem}
.text-inline-034{font-size:.75rem;color:#657385;margin-top:.4rem;display:none}
.text-inline-035{background:#fef3c7;border-left:3px solid #f59e0b;border-radius:6px;padding:.55rem .7rem;font-size:.72rem;color:#78350f;margin:.4rem 0 .65rem;line-height:1.45}
.text-inline-036{font-size:1.5rem;margin-bottom:.35rem;opacity:.4}
.text-inline-037{font-size:.7rem;margin-top:.2rem;opacity:.6}
.text-inline-038{font-size:.7rem;color:#9aa4b1;margin-top:.4rem}
.text-inline-039{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.7rem}
.text-inline-040{font-size:.82rem;font-weight:600;color:var(--text-soft)}
.text-inline-041{display:flex;gap:.35rem;flex-wrap:wrap}
.text-inline-042{margin-top:.8rem}
.text-inline-043{margin-top:.65rem}
.text-inline-044{color:#9aa4b1}
.text-inline-045{margin-top:.85rem}
.text-inline-046{background:var(--card-stat);border-radius:10px;padding:1.1rem;border:1px solid var(--line)}
.text-inline-047{font-size:.74rem;font-weight:700;color:var(--text-soft);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.6rem;font-family:var(--font)}
.text-inline-048{font-size:.92rem;line-height:1.65;white-space:pre-wrap;color:#9aa4b1;font-style:italic}
.text-inline-049{margin-top:.8rem;padding:.75rem .9rem;background:rgba(168,119,66,.08);border-left:3px solid var(--g);border-radius:0 8px 8px 0;font-size:.82rem;color:var(--text)}
.text-inline-050{font-size:.9rem;line-height:1.75;white-space:pre-wrap;color:#9aa4b1;font-style:italic}
.text-inline-051{font-size:.68rem;font-weight:700;color:#657385;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.65rem}
.text-inline-052{color:#9aa4b1;font-style:italic;font-size:.82rem}
.text-inline-053{margin-top:.85rem;padding:.65rem;background:#fff7ed;border-radius:7px;font-size:.75rem;color:#607086;border:.5px solid #fed7aa}
.text-inline-054{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:500;align-items:center;justify-content:center;flex-direction:column}
.text-inline-055{background:#fff;border-radius:14px;padding:1.25rem;width:90%;max-width:520px;max-height:80vh;overflow-y:auto}
.text-inline-056{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem}
.text-inline-057{font-weight:700;font-size:1rem;color:var(--p)}
.text-inline-058{display:flex;gap:.4rem;align-items:center}
.text-inline-059{background:#f0f4ff;color:var(--a);border:1px solid #c5d8f5;border-radius:6px;padding:4px 10px;font-size:.72rem;font-weight:600;cursor:pointer}
.text-inline-060{font-size:.7rem;color:#9aa4b1;margin-bottom:.6rem}
.text-inline-061{color:#9aa4b1;font-size:.82rem;font-style:italic}
.text-inline-062{padding:.6rem .8rem;border:.5px solid rgba(13,38,63,.12);border-radius:8px;margin-bottom:.4rem;cursor:pointer;font-size:.82rem}
.text-inline-063{font-weight:600;color:var(--p)}
.text-inline-064{font-size:.7rem;color:#657385}
/* Reference-aligned Text page panels. */
.app {
width: min(1820px, calc(100vw - 48px));
max-width: none;
grid-template-columns: minmax(420px, 1fr) minmax(0, 2.17fr);
gap: 22px;
align-items: start;
padding: 14px 0 28px;
}
.left-scroll {
padding-right: 0;
}
.panel,
.preview-panel {
border: 1px solid var(--line);
border-radius: var(--radius);
background: rgba(255, 255, 255, .96);
box-shadow: var(--shadow-soft);
overflow: hidden;
}
.panel {
margin-bottom: 12px;
}
.ph,
.preview-head {
min-height: 64px;
padding: 0 22px;
border-bottom: 1px solid var(--line);
font-family: var(--font);
font-size: 15px;
font-weight: 800;
color: var(--ink);
}
.ph:hover {
background: rgba(13, 38, 63, .025);
}
.ph-icon,
.preview-head .ph-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(13, 38, 63, .075);
color: var(--ink);
}
.ph-icon svg,
.preview-head .ph-icon svg {
width: 19px;
height: 19px;
}
.pb {
padding: 20px 22px;
}
.acc {
border-color: rgba(13, 38, 63, .11);
background: rgba(255, 255, 255, .78);
border-radius: var(--radius);
margin-bottom: 10px;
}
.acc.open {
border-color: rgba(168, 119, 66, .22);
box-shadow: none;
}
.acc.open .acc-sum {
background: rgba(168, 119, 66, .06);
}
.acc-sum {
padding: 13px 14px;
}
.acc-body {
padding: 14px;
background: rgba(255, 253, 249, .68);
border-top-color: rgba(13, 38, 63, .08);
}
.fg {
gap: 12px;
}
.fl {
gap: 6px;
}
label,
.kost-fl label {
color: var(--brand-primary);
font-size: 12px;
font-weight: 800;
}
input,
select,
textarea,
.kost-fl input,
.pant-summa-input input {
min-height: 42px;
border-color: var(--line);
border-radius: 7px;
background: rgba(255, 255, 255, .90);
color: var(--ink);
font-size: 14px;
padding: 0 12px;
}
textarea {
padding-top: 10px;
padding-bottom: 10px;
}
input:focus,
select:focus,
textarea:focus,
.kost-fl input:focus,
.pant-summa-input input:focus {
border-color: rgba(168, 119, 66, .52);
background: #fff;
box-shadow: 0 0 0 3px rgba(201, 154, 95, .14);
}
.dummy-loader,
.kost-summa,
.pant-row,
.ns-box,
.pdf-result {
border-color: rgba(13, 38, 63, .10);
background: rgba(255, 253, 249, .70);
border-radius: var(--radius);
}
.preview-panel {
width: 100%;
}
.preview-head {
display: flex;
align-items: center;
gap: 12px;
}
.preview-realtime {
font-family: var(--font);
font-size: 12px;
font-weight: 800;
}
.preview-tabs {
padding: 0 22px;
border-bottom-color: var(--line);
}
.preview-body {
padding: 22px;
}
.mag-card {
border-radius: var(--radius);
border-color: rgba(13, 38, 63, .08);
background: rgba(255, 253, 249, .78);
}
body[data-theme="dark"] .panel,
body[data-theme="dark"] .preview-panel {
background: rgba(21, 34, 51, .94) !important;
border-color: rgba(255, 255, 255, .13) !important;
box-shadow: 0 18px 46px rgba(0, 0, 0, .28) !important;
}
body[data-theme="dark"] .ph,
body[data-theme="dark"] .preview-head {
background: rgba(21, 34, 51, .88) !important;
border-color: rgba(255, 255, 255, .10) !important;
color: var(--mg-dark-ink) !important;
}
body[data-theme="dark"] .ph-icon,
body[data-theme="dark"] .preview-head .ph-icon {
background: rgba(201, 154, 95, .12) !important;
color: var(--mg-dark-gold-light) !important;
}
body[data-theme="dark"] .acc {
background: rgba(16, 25, 37, .42) !important;
border-color: rgba(255, 255, 255, .10) !important;
}
body[data-theme="dark"] .acc.open .acc-sum {
background: rgba(201, 154, 95, .08) !important;
}
body[data-theme="dark"] .acc-body,
body[data-theme="dark"] .dummy-loader,
body[data-theme="dark"] .kost-summa,
body[data-theme="dark"] .pant-row,
body[data-theme="dark"] .ns-box,
body[data-theme="dark"] .pdf-result {
background: rgba(16, 25, 37, .46) !important;
border-color: rgba(255, 255, 255, .09) !important;
}
body[data-theme="dark"] label,
body[data-theme="dark"] .kost-fl label {
color: var(--mg-dark-ink-soft) !important;
}
body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea,
body[data-theme="dark"] .kost-fl input,
body[data-theme="dark"] .pant-summa-input input {
background: rgba(21, 34, 51, .86) !important;
color: var(--mg-dark-ink) !important;
border-color: rgba(255, 255, 255, .12) !important;
}
body[data-theme="dark"] .mag-card {
background: rgba(16, 25, 37, .50) !important;
border-color: rgba(255, 255, 255, .10) !important;
}
@media (max-width: 1280px) {
.app {
grid-template-columns: 1fr;
}
.left-scroll {
position: static;
max-height: none;
overflow: visible;
}
}
@media (max-width: 760px) {
.app {
width: min(100vw - 28px, 1820px);
padding: 8px 0 22px;
}
.pb,
.preview-body {
padding: 18px;
}
.ph,
.preview-head {
padding: 0 18px;
}
}
/* Text page top panel headings are static; only inner .acc blocks are accordions. */
.panel > .ph {
cursor: default;
}
.panel > .ph:hover {
background: transparent;
}
body[data-theme="dark"] .panel > .ph:hover {
background: rgba(21, 34, 51, .88) !important;
}
/* Neutral left-panel content backgrounds. */
.left-scroll .acc-body,
.left-scroll .dummy-loader,
.left-scroll .kost-summa,
.left-scroll .pant-row,
.left-scroll .ns-box,
.left-scroll .pdf-result,
.left-scroll .text-inline-046 {
background: rgba(255, 255, 255, .82);
border-color: rgba(13, 38, 63, .10);
}
.left-scroll .acc.open .acc-sum {
background: rgba(13, 38, 63, .035);
}
.left-scroll .acc {
background: rgba(255, 255, 255, .72);
}
body[data-theme="dark"] .left-scroll .acc-body,
body[data-theme="dark"] .left-scroll .dummy-loader,
body[data-theme="dark"] .left-scroll .kost-summa,
body[data-theme="dark"] .left-scroll .pant-row,
body[data-theme="dark"] .left-scroll .ns-box,
body[data-theme="dark"] .left-scroll .pdf-result,
body[data-theme="dark"] .left-scroll .text-inline-046 {
background: rgba(16, 25, 37, .46) !important;
border-color: rgba(255, 255, 255, .09) !important;
}
body[data-theme="dark"] .left-scroll .acc.open .acc-sum {
background: rgba(255, 255, 255, .045) !important;
}
/* Objektdata title icon follows the text-page reference. */
.text-object-title-icon {
width: 20px;
height: 20px;
flex: 0 0 auto;
color: currentColor;
}
body[data-theme="dark"] .text-object-title-icon {
color: var(--mg-dark-ink);
}
/* Reference-aligned inner accordion headers. */
.left-scroll .acc {
background: #fbfaf7;
border-color: #eadfce;
box-shadow: none;
}
.left-scroll .acc.open {
background: #fff;
border-color: #d9c8b4;
box-shadow: none;
}
.left-scroll .acc-sum {
background: #fbfaf7;
padding: 14px 14px;
}
.left-scroll .acc-sum:hover {
background: #f8f5ee;
}
.left-scroll .acc.open .acc-sum {
background: #f3eee7;
border-bottom: 1px solid #e2d3c2;
}
.left-scroll .acc-lbl strong {
color: var(--brand-primary);
font-size: .9rem;
font-weight: 800;
}
.left-scroll .acc-lbl span,
.left-scroll .acc-chev {
color: var(--brand-primary);
}
body[data-theme="dark"] .left-scroll .acc {
background: rgba(21, 34, 51, .86) !important;
border-color: rgba(255, 255, 255, .12) !important;
}
body[data-theme="dark"] .left-scroll .acc.open {
background: rgba(16, 25, 37, .92) !important;
border-color: rgba(201, 154, 95, .38) !important;
box-shadow: none !important;
}
body[data-theme="dark"] .left-scroll .acc-sum {
background: rgba(21, 34, 51, .86) !important;
}
body[data-theme="dark"] .left-scroll .acc-sum:hover {
background: rgba(255, 255, 255, .045) !important;
}
body[data-theme="dark"] .left-scroll .acc.open .acc-sum {
background: rgba(201, 154, 95, .12) !important;
border-bottom: 1px solid rgba(201, 154, 95, .22) !important;
}
body[data-theme="dark"] .left-scroll .acc-lbl strong,
body[data-theme="dark"] .left-scroll .acc-lbl span,
body[data-theme="dark"] .left-scroll .acc-chev {
color: var(--mg-dark-ink) !important;
}
/* Open accordion body follows the reference page. */
.left-scroll .acc.open .acc-body {
background: #fff;
border-top: 0;
}
body[data-theme="dark"] .left-scroll .acc.open .acc-body {
background: rgba(16, 25, 37, .92) !important;
border-top: 0 !important;
}
/* Description accordion spacing. */
#accBeskrivning .sec-title {
margin-top: 22px;
}
/* Left panel clarity and cost summary. */
.left-scroll .sec-title {
color: var(--brand-primary);
font-size: .76rem;
font-weight: 850;
letter-spacing: .09em;
margin: 18px 0 10px;
}
.left-scroll .acc-body > .sec-title:first-child,
.left-scroll .acc-body > div:first-child > .sec-title:first-child {
margin-top: 2px;
}
.left-scroll .fl {
gap: 7px;
}
.left-scroll .fg {
row-gap: 14px;
}
.left-scroll .input-with-unit,
.left-scroll .pant-summa-input {
align-items: stretch;
}
.left-scroll .input-with-unit .unit,
.left-scroll .pant-summa-input .unit {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 64px;
min-height: 42px;
padding: 0 9px;
border: 1px solid var(--line);
border-radius: 7px;
background: #f7f4ee;
color: var(--brand-primary);
font-size: 11px;
font-weight: 800;
white-space: nowrap;
}
#accKostnader .kost-grid {
gap: 14px 12px;
margin-top: 10px;
}
#accKostnader .kost-summa {
position: relative;
align-items: flex-end;
gap: 16px;
margin-top: 18px;
padding: 15px 16px 15px 18px;
border-color: #d9c8b4;
background: #fff;
}
#accKostnader .kost-summa::before {
content: "";
position: absolute;
left: 0;
top: 12px;
bottom: 12px;
width: 3px;
border-radius: 999px;
background: var(--brand-accent);
}
#accKostnader .kost-summa-lbl {
display: flex;
flex-direction: column;
gap: 3px;
color: var(--brand-primary);
font-size: 13px;
font-weight: 850;
line-height: 1.25;
}
#accKostnader .kost-summa-lbl small {
color: var(--text-soft);
font-size: 11px;
font-weight: 650;
}
#accKostnader .kost-summa-val {
color: var(--brand-primary);
font-family: var(--font);
font-size: 1.35rem;
font-variant-numeric: tabular-nums;
font-weight: 850;
letter-spacing: 0;
line-height: 1;
text-align: right;
white-space: nowrap;
}
#accKostnader .kost-summa-val small {
color: var(--brand-primary);
font-size: .68rem;
font-weight: 800;
margin-left: 5px;
}
body[data-theme="dark"] .left-scroll .input-with-unit .unit,
body[data-theme="dark"] .left-scroll .pant-summa-input .unit {
background: rgba(255, 255, 255, .055) !important;
border-color: rgba(255, 255, 255, .12) !important;
color: var(--mg-dark-ink) !important;
}
body[data-theme="dark"] #accKostnader .kost-summa {
background: rgba(16, 25, 37, .92) !important;
border-color: rgba(201, 154, 95, .34) !important;
}
body[data-theme="dark"] #accKostnader .kost-summa-lbl,
body[data-theme="dark"] #accKostnader .kost-summa-val,
body[data-theme="dark"] #accKostnader .kost-summa-val small {
color: var(--mg-dark-ink) !important;
}
body[data-theme="dark"] #accKostnader .kost-summa-lbl small {
color: var(--mg-dark-ink-soft) !important;
}
/* Clarify complex left-panel sections. */
#accBeskrivning.acc.open .acc-body,
#accForening.acc.open .acc-body,
#accEnergi.acc.open .acc-body,
.text-generator-panel .pb {
display: flex;
flex-direction: column;
gap: 14px;
}
#accBeskrivning .sec-title,
#accForening .sec-title,
#accEnergi .sec-title {
margin: 4px 0 0;
padding-top: 14px;
border-top: 1px solid rgba(13, 38, 63, .08);
}
#accBeskrivning .acc-body > .sec-title:first-child,
#accForening .acc-body > .sec-title:first-child,
#accEnergi .acc-body > .sec-title:first-child {
padding-top: 0;
border-top: 0;
}
#accBeskrivning textarea {
min-height: 92px;
}
#accBeskrivning #renoveringarWrap {
padding-top: 2px;
}
#accBeskrivning .text-inline-013,
#accEnergi .text-inline-033,
#accBeskrivning .text-inline-018,
#accForening .text-inline-028 {
border-left: 3px solid rgba(168, 119, 66, .36);
border-radius: 0 7px 7px 0;
background: #fbfaf7;
color: var(--text-soft);
font-size: 12px;
font-style: normal;
line-height: 1.5;
margin-top: 0;
padding: 8px 10px;
}
#accBeskrivning .text-inline-015 {
gap: 10px;
margin-top: 0;
}
#accBeskrivning .text-inline-016 {
align-items: stretch;
gap: 8px;
}
#accBeskrivning #fetchUrlBtn {
flex: 0 0 auto;
}
#accForening #brfFields,
#accForening .ns-box,
#accEnergi #pdfResult,
.text-generator-panel .text-output-group {
border: 1px solid rgba(13, 38, 63, .10);
border-radius: var(--radius);
background: #fff;
padding: 14px;
}
#accForening .ns-box {
display: flex;
flex-direction: column;
gap: 12px;
}
#accForening .ns-box .fg,
#accEnergi .fg {
row-gap: 14px;
}
#accForening .text-inline-021 {
margin: 2px 0 0;
padding-top: 12px;
font-size: .7rem;
}
#accForening .text-inline-020,
#accForening .text-inline-022,
#accForening .text-inline-027 {
margin-top: 0;
}
#accForening .text-inline-023 {
color: var(--brand-primary);
}
#accForening .text-inline-024 {
border-color: var(--line);
}
#accForening .text-inline-025 {
background: #fbfaf7;
border: 1px solid rgba(13, 38, 63, .08);
color: var(--brand-primary);
margin-top: 0;
}
#accForening .text-inline-026 {
display: block;
margin: 3px 0 0;
}
#accForening .ns-result {
gap: 8px;
}
#accForening .ns-kpi {
padding: 10px 11px;
}
#accForening .ns-kpi.hi {
background: var(--brand-primary);
border-color: var(--brand-primary);
}
#accForening .kpi-lbl {
font-size: 11px;
line-height: 1.3;
}
#accForening .kpi-val {
font-family: var(--font);
font-variant-numeric: tabular-nums;
}
#accForening .pdf-drop,
#accEnergi .pdf-drop {
border-width: 1px;
border-style: solid;
border-color: rgba(13, 38, 63, .12);
background: #fff;
padding: 16px;
}
#accForening .text-inline-030,
#accEnergi .text-inline-030 {
display: none;
}
#accForening .text-inline-031,
#accEnergi .text-inline-031 {
color: var(--brand-primary);
font-size: 14px;
font-weight: 850;
}
#accForening .text-inline-032,
#accEnergi .text-inline-032 {
color: var(--text-soft);
font-size: 12px;
line-height: 1.45;
opacity: 1;
}
#accEnergi .text-inline-035 {
background: #fbfaf7;
border-left-color: var(--brand-accent);
color: var(--brand-primary);
}
.text-generator-panel .ph {
cursor: default;
}
.text-generator-panel .tone-row {
align-items: center;
gap: 10px;
margin-bottom: 0;
}
.text-generator-panel .text-inline-040 {
color: var(--brand-primary);
font-size: 12px;
font-weight: 850;
}
.text-generator-panel #toneGroup {
gap: 7px;
}
.text-generator-panel .btn-row {
gap: 8px;
margin-top: 0;
}
.text-generator-panel .text-output-group {
display: flex;
flex-direction: column;
gap: 7px;
}
.text-generator-panel .text-output-group label {
color: var(--brand-primary);
}
.text-generator-panel .txt-out {
margin-top: 0;
min-height: 86px;
background: #fff;
line-height: 1.6;
}
.text-generator-panel #tHemnet {
min-height: 58px;
}
.text-generator-panel .char-count {
align-self: flex-end;
margin-top: 0;
}
.text-generator-panel .status-bar {
border-top-color: rgba(13, 38, 63, .08);
}
body[data-theme="dark"] #accBeskrivning .text-inline-013,
body[data-theme="dark"] #accEnergi .text-inline-033,
body[data-theme="dark"] #accBeskrivning .text-inline-018,
body[data-theme="dark"] #accForening .text-inline-028,
body[data-theme="dark"] #accForening #brfFields,
body[data-theme="dark"] #accForening .ns-box,
body[data-theme="dark"] #accEnergi #pdfResult,
body[data-theme="dark"] .text-generator-panel .text-output-group {
background: rgba(16, 25, 37, .62) !important;
border-color: rgba(255, 255, 255, .10) !important;
color: var(--mg-dark-ink-soft) !important;
}
body[data-theme="dark"] #accForening .text-inline-025,
body[data-theme="dark"] #accForening .pdf-drop,
body[data-theme="dark"] #accEnergi .pdf-drop,
body[data-theme="dark"] .text-generator-panel .txt-out {
background: rgba(16, 25, 37, .70) !important;
border-color: rgba(255, 255, 255, .12) !important;
}
body[data-theme="dark"] #accForening .text-inline-031,
body[data-theme="dark"] #accEnergi .text-inline-031,
body[data-theme="dark"] .text-generator-panel .text-inline-040,
body[data-theme="dark"] .text-generator-panel .text-output-group label {
color: var(--mg-dark-ink) !important;
}
/* Stable left-panel scrolling when many accordions are open. */
@media (min-width: 1281px) {
.left-scroll {
box-sizing: border-box;
top: 102px;
max-height: calc(100vh - 102px) !important;
padding-bottom: 34px;
}
}
/* Unit labels are passive input suffixes, not buttons. */
.left-scroll .input-with-unit {
gap: 0;
}
.left-scroll .input-with-unit input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.left-scroll .input-with-unit .unit,
.left-scroll .pant-summa-input .unit {
min-width: 56px;
padding: 0 8px;
border-left: 0;
border-radius: 0 7px 7px 0;
background: #fff;
color: var(--text-soft);
font-size: 11px;
font-weight: 700;
}
.left-scroll .pant-summa-input {
gap: 0;
}
.left-scroll .pant-summa-input input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
body[data-theme="dark"] .left-scroll .input-with-unit .unit,
body[data-theme="dark"] .left-scroll .pant-summa-input .unit {
background: rgba(21, 34, 51, .86) !important;
color: var(--mg-dark-ink-soft) !important;
}
/* Autosave status. */
#mgAutosaveFlash {
position: fixed;
top: 82px;
right: 28px;
z-index: 9999;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 32px;
padding: 7px 12px;
border: 1px solid rgba(13, 38, 63, .10);
border-radius: 999px;
background: rgba(255, 255, 255, .94);
box-shadow: 0 10px 28px rgba(13, 38, 63, .10);
color: var(--brand-primary);
font-family: var(--font);
font-size: 12px;
font-weight: 800;
line-height: 1;
opacity: 0;
pointer-events: none;
transform: translateY(-8px);
transition: opacity .18s ease, transform .18s ease;
}
#mgAutosaveFlash.show {
opacity: 1;
transform: translateY(0);
}
#mgAutosaveFlash .mg-autosave-dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: #166534;
box-shadow: 0 0 0 3px rgba(22, 101, 52, .10);
}
body[data-theme="dark"] #mgAutosaveFlash {
background: rgba(21, 34, 51, .94);
border-color: rgba(255, 255, 255, .12);
color: var(--mg-dark-ink);
box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}
/* AI text generation button hierarchy. */
.text-generator-panel .text-gen-actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.text-generator-panel .text-gen-primary-row,
.text-generator-panel .text-gen-secondary-row {
display: grid;
gap: 8px;
}
.text-generator-panel .text-gen-primary-row {
grid-template-columns: 1fr;
}
.text-generator-panel .text-gen-secondary-row {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.text-generator-panel .text-gen-actions button {
width: 100%;
justify-content: center;
min-height: 42px;
}
.text-generator-panel #btnAll {
min-height: 46px;
}
@media (max-width: 560px) {
.text-generator-panel .text-gen-secondary-row {
grid-template-columns: 1fr;
}
}
/* Unified left-panel field system. */
.left-scroll .acc.open .acc-body,
#fastighetFields,
#brfGrundFields,
#brfFields {
display: flex;
flex-direction: column;
gap: 14px;
}
.left-scroll .fg,
.left-scroll .kost-grid {
gap: 14px 12px;
margin-top: 0;
}
.left-scroll .fg2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.left-scroll .fg3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.left-scroll .fl,
.left-scroll .kost-fl {
gap: 5px;
min-width: 0;
}
.left-scroll label,
.left-scroll .kost-fl label {
min-height: 16px;
margin: 0;
line-height: 1.25;
}
.left-scroll .fg2 > .fl > label,
.left-scroll .fg3 > .fl > label,
.left-scroll .kost-grid > .kost-fl > label {
align-items: flex-end;
min-height: 32px;
}
.left-scroll .text-inline-001,
.left-scroll .text-inline-012,
.left-scroll .text-inline-014,
.left-scroll .fg,
.left-scroll .fl {
margin-top: 0 !important;
}
@media (max-width: 760px) {
.left-scroll .fg2,
.left-scroll .fg3 {
grid-template-columns: 1fr;
}
}
/* Reference-style generate-all button. */
.text-generator-panel .text-gen-actions {
display: flex !important;
flex-direction: column;
gap: 10px;
}
.text-generator-panel .text-gen-primary-row {
display: grid !important;
grid-template-columns: 1fr;
}
.text-generator-panel #btnAll {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 100%;
min-height: 46px;
border: 1px solid var(--ink) !important;
background: var(--ink) !important;
color: #fff !important;
border-radius: 7px;
box-shadow: 0 12px 25px rgba(13, 38, 63, .18);
gap: 8px;
font-size: 13px;
font-weight: 850;
opacity: 1;
visibility: visible;
}
.text-generator-panel #btnAll:hover {
background: var(--ink);
border-color: var(--ink);
}
.text-generator-panel #btnAll .text-gen-primary-icon {
width: 17px;
height: 17px;
flex: 0 0 auto;
}
.text-generator-panel .ai-choice-label {
color: var(--text-soft);
font-size: 11px;
font-weight: 850;
letter-spacing: .08em;
line-height: 1.2;
margin-top: 2px;
text-transform: uppercase;
}
body[data-theme="dark"] .text-generator-panel #btnAll {
background: #f3efe8 !important;
border-color: #f3efe8 !important;
color: #0d263f !important;
}
body[data-theme="dark"] .text-generator-panel .ai-choice-label {
color: var(--mg-dark-ink-soft) !important;
}
/* Clean AI text generation panel. */
.text-generator-panel .pb.open {
display: flex;
flex-direction: column;
gap: 16px;
}
.text-generator-panel .tone-row {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(13, 38, 63, .08);
}
.text-generator-panel .text-inline-040 {
color: var(--ink);
font-size: 12px;
font-weight: 850;
line-height: 1.2;
}
.text-generator-panel #toneGroup {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.text-generator-panel .tone-btn {
justify-content: center;
min-height: 38px;
padding: 0 10px;
white-space: nowrap;
}
.text-generator-panel .text-gen-actions {
display: flex !important;
flex-direction: column;
gap: 10px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(13, 38, 63, .08);
}
.text-generator-panel .text-gen-primary-row {
display: grid !important;
grid-template-columns: 1fr;
}
.text-generator-panel .text-gen-secondary-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.text-generator-panel .ai-choice-label {
margin: 0;
color: var(--text-soft);
font-size: 11px;
font-weight: 850;
letter-spacing: .04em;
line-height: 1.2;
text-transform: uppercase;
}
.text-generator-panel #btnAll {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
border: 1px solid var(--ink) !important;
background: var(--ink) !important;
color: #fff !important;
border-radius: 7px;
box-shadow: 0 12px 25px rgba(13, 38, 63, .18);
gap: 8px;
font-size: 13px;
font-weight: 850;
opacity: 1;
visibility: visible;
}
.text-generator-panel #btnAll:hover {
background: #071827 !important;
border-color: #071827 !important;
}
.text-generator-panel #btnAll .text-gen-primary-icon {
width: 17px;
height: 17px;
flex: 0 0 auto;
}
.text-generator-panel .text-output-group {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.text-generator-panel .text-output-group label {
color: var(--ink);
font-size: 12px;
font-weight: 850;
line-height: 1.2;
}
.text-generator-panel .txt-out {
margin-top: 0;
min-height: 96px;
background: #fff;
border: 1px solid rgba(13, 38, 63, .14);
border-radius: 8px;
line-height: 1.6;
padding: 12px;
}
.text-generator-panel #tHemnet {
min-height: 70px;
}
.text-generator-panel .char-count {
align-self: flex-end;
margin-top: -2px;
}
.text-generator-panel .btn-row.text-inline-045 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 0;
padding-top: 14px;
border-top: 1px solid rgba(13, 38, 63, .08);
}
.text-generator-panel .btn-row.text-inline-045 button {
width: 100%;
justify-content: center;
}
body[data-theme="dark"] .text-generator-panel .tone-row,
body[data-theme="dark"] .text-generator-panel .text-gen-actions,
body[data-theme="dark"] .text-generator-panel .btn-row.text-inline-045 {
border-color: rgba(255, 255, 255, .10) !important;
}
body[data-theme="dark"] .text-generator-panel .text-inline-040,
body[data-theme="dark"] .text-generator-panel .text-output-group label {
color: var(--mg-dark-ink) !important;
}
body[data-theme="dark"] .text-generator-panel .ai-choice-label {
color: var(--mg-dark-ink-soft) !important;
}
body[data-theme="dark"] .text-generator-panel .txt-out {
background: rgba(16, 25, 37, .70) !important;
border-color: rgba(255, 255, 255, .12) !important;
color: var(--mg-dark-ink) !important;
}
body[data-theme="dark"] .text-generator-panel #btnAll {
background: #f3efe8 !important;
border-color: #f3efe8 !important;
color: #0d263f !important;
}
@media (max-width: 760px) {
.text-generator-panel #toneGroup,
.text-generator-panel .text-gen-secondary-row,
.text-generator-panel .btn-row.text-inline-045 {
grid-template-columns: 1fr;
}
}
/* Image upload controls. */
.left-scroll .img-dropzone {
border-color: rgba(13, 38, 63, .16);
background: #fff;
color: var(--text-soft);
}
.left-scroll .img-dropzone:hover,
.left-scroll .img-dropzone.drag {
border-color: rgba(13, 38, 63, .42);
background: rgba(13, 38, 63, .035);
color: var(--ink);
box-shadow: inset 0 0 0 1px rgba(13, 38, 63, .05);
}
.left-scroll .text-clear-images-btn {
border-color: rgba(127, 29, 29, .18);
background: #fff;
color: #7f1d1d;
box-shadow: none;
}
.left-scroll .text-clear-images-btn:hover {
border-color: rgba(127, 29, 29, .30);
background: rgba(127, 29, 29, .06);
color: #7f1d1d;
}
.left-scroll .text-clear-images-btn[hidden] {
display: none !important;
}
body[data-theme="dark"] .left-scroll .img-dropzone {
background: rgba(16, 25, 37, .70) !important;
border-color: rgba(255, 255, 255, .14) !important;
color: var(--mg-dark-ink-soft) !important;
}
body[data-theme="dark"] .left-scroll .img-dropzone:hover,
body[data-theme="dark"] .left-scroll .img-dropzone.drag {
background: rgba(255, 255, 255, .055) !important;
border-color: rgba(243, 239, 232, .34) !important;
color: var(--mg-dark-ink) !important;
}
body[data-theme="dark"] .left-scroll .text-clear-images-btn {
background: rgba(16, 25, 37, .55) !important;
border-color: rgba(248, 113, 113, .24) !important;
color: #fecaca !important;
}
body[data-theme="dark"] .left-scroll .text-clear-images-btn:hover {
background: rgba(127, 29, 29, .22) !important;
border-color: rgba(248, 113, 113, .34) !important;
}
/* Image action disabled state. */
.left-scroll #btnEditAll:disabled {
opacity: .48;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* Left panel visual polish: reduce nested borders. */
.left-scroll #accForening #brfFields,
.left-scroll #accForening .ns-box,
.left-scroll #accEnergi #pdfResult {
border: 0;
border-radius: 0;
background: transparent;
padding: 0;
}
.left-scroll #accForening .ns-box {
gap: 14px;
}
.left-scroll #accForening .text-inline-025,
.left-scroll #accForening .text-inline-028,
.left-scroll #accBeskrivning .text-inline-013,
.left-scroll #accBeskrivning .text-inline-018,
.left-scroll #accEnergi .text-inline-033,
.left-scroll #accEnergi .text-inline-035 {
border: 0;
border-radius: 7px;
background: rgba(13, 38, 63, .035);
color: var(--text-soft);
padding: 9px 11px;
}
.left-scroll #accForening .ns-result {
margin-top: 0;
}
.left-scroll #accForening .ns-kpi {
border: 0;
background: rgba(13, 38, 63, .045);
}
.left-scroll #accForening .ns-kpi.hi {
background: var(--ink);
color: #fff;
}
.left-scroll #accForening .pdf-drop,
.left-scroll #accEnergi .pdf-drop {
border: 1px dashed rgba(13, 38, 63, .20);
background: rgba(255, 255, 255, .72);
}
.left-scroll #accForening .pdf-drop:hover,
.left-scroll #accEnergi .pdf-drop:hover {
border-color: rgba(13, 38, 63, .42);
background: rgba(13, 38, 63, .035);
color: var(--ink);
}
.left-scroll #accForening .sec-title,
.left-scroll #accEnergi .sec-title,
.left-scroll #accBeskrivning .sec-title {
border-top: 0;
border-bottom: 0;
padding-top: 8px;
padding-bottom: 0;
color: var(--ink);
}
body[data-theme="dark"] .left-scroll #accForening #brfFields,
body[data-theme="dark"] .left-scroll #accForening .ns-box,
body[data-theme="dark"] .left-scroll #accEnergi #pdfResult {
background: transparent !important;
border: 0 !important;
}
body[data-theme="dark"] .left-scroll #accForening .text-inline-025,
body[data-theme="dark"] .left-scroll #accForening .text-inline-028,
body[data-theme="dark"] .left-scroll #accBeskrivning .text-inline-013,
body[data-theme="dark"] .left-scroll #accBeskrivning .text-inline-018,
body[data-theme="dark"] .left-scroll #accEnergi .text-inline-033,
body[data-theme="dark"] .left-scroll #accEnergi .text-inline-035,
body[data-theme="dark"] .left-scroll #accForening .ns-kpi {
background: rgba(255, 255, 255, .045) !important;
border: 0 !important;
color: var(--mg-dark-ink-soft) !important;
}
body[data-theme="dark"] .left-scroll #accForening .ns-kpi.hi {
background: rgba(243, 239, 232, .92) !important;
color: #0d263f !important;
}
body[data-theme="dark"] .left-scroll #accForening .pdf-drop,
body[data-theme="dark"] .left-scroll #accEnergi .pdf-drop {
background: rgba(16, 25, 37, .55) !important;
border-color: rgba(255, 255, 255, .16) !important;
}
body[data-theme="dark"] .left-scroll #accForening .pdf-drop:hover,
body[data-theme="dark"] .left-scroll #accEnergi .pdf-drop:hover {
background: rgba(255, 255, 255, .055) !important;
border-color: rgba(243, 239, 232, .34) !important;
color: var(--mg-dark-ink) !important;
}
body[data-theme="dark"] .left-scroll #accForening .sec-title,
body[data-theme="dark"] .left-scroll #accEnergi .sec-title,
body[data-theme="dark"] .left-scroll #accBeskrivning .sec-title {
color: var(--mg-dark-ink) !important;
}
/* Image dropzone normal state. */
.left-scroll .img-dropzone {
border-color: rgba(13, 38, 63, .34);
background: rgba(13, 38, 63, .035);
color: var(--ink);
box-shadow: inset 0 0 0 1px rgba(13, 38, 63, .05);
}
.left-scroll .img-dropzone:hover,
.left-scroll .img-dropzone.drag {
border-color: rgba(13, 38, 63, .48);
background: rgba(13, 38, 63, .055);
}
body[data-theme="dark"] .left-scroll .img-dropzone {
background: rgba(255, 255, 255, .055) !important;
border-color: rgba(243, 239, 232, .28) !important;
color: var(--mg-dark-ink) !important;
}
body[data-theme="dark"] .left-scroll .img-dropzone:hover,
body[data-theme="dark"] .left-scroll .img-dropzone.drag {
background: rgba(255, 255, 255, .075) !important;
border-color: rgba(243, 239, 232, .40) !important;
}
/* Image card presentation. */
.left-scroll .img-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
margin-top: 12px;
}
.left-scroll .img-card {
border: 1px solid rgba(13, 38, 63, .10);
border-radius: 8px;
background: #fff;
box-shadow: 0 8px 22px rgba(13, 38, 63, .07);
cursor: grab;
overflow: hidden;
transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.left-scroll .img-card:hover {
border-color: rgba(13, 38, 63, .20);
box-shadow: 0 12px 28px rgba(13, 38, 63, .12);
transform: translateY(-1px);
}
.left-scroll .img-card img {
aspect-ratio: 4 / 3;
height: auto;
width: 100%;
background: rgba(13, 38, 63, .04);
object-fit: cover;
}
.left-scroll .img-card .img-num {
top: 8px;
left: 8px;
min-width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 7px;
border-radius: 999px;
background: rgba(13, 38, 63, .88);
color: #fff;
font-size: 11px;
font-weight: 850;
}
.left-scroll .img-card .img-slot-lbl {
position: static;
display: block;
min-height: 30px;
padding: 8px 10px 0;
background: transparent;
color: var(--ink);
font-size: 12px;
font-weight: 850;
line-height: 1.2;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.left-scroll .img-card-bar {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
padding: 9px 10px 10px;
background: transparent;
}
.left-scroll .img-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0;
height: 38px;
padding: 0;
border: 1px solid rgba(13, 38, 63, .12);
border-radius: 7px;
background: rgba(13, 38, 63, .035);
color: var(--ink);
box-shadow: none;
}
.left-scroll .img-action-btn svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
}
.left-scroll .img-action-btn:hover {
border-color: rgba(13, 38, 63, .24);
background: rgba(13, 38, 63, .075);
transform: none;
}
.left-scroll .img-action-edit {
background: rgba(13, 38, 63, .035);
border-color: rgba(13, 38, 63, .12);
color: var(--ink);
}
.left-scroll .img-action-edit:hover {
background: rgba(13, 38, 63, .075);
border-color: rgba(13, 38, 63, .24);
color: var(--ink);
}
.left-scroll .img-action-remove {
color: #7f1d1d;
}
.left-scroll .img-action-remove:hover {
border-color: rgba(127, 29, 29, .24);
background: rgba(127, 29, 29, .06);
}
.left-scroll .img-card.dragover {
outline: 2px solid rgba(13, 38, 63, .40);
outline-offset: 2px;
}
body[data-theme="dark"] .left-scroll .img-card {
background: rgba(16, 25, 37, .72) !important;
border-color: rgba(255, 255, 255, .10) !important;
box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}
body[data-theme="dark"] .left-scroll .img-card:hover {
border-color: rgba(243, 239, 232, .22) !important;
box-shadow: 0 14px 30px rgba(0, 0, 0, .30);
}
body[data-theme="dark"] .left-scroll .img-action-edit {
background: rgba(255, 255, 255, .055) !important;
border-color: rgba(255, 255, 255, .14) !important;
color: var(--mg-dark-ink) !important;
}
body[data-theme="dark"] .left-scroll .img-action-edit:hover {
background: rgba(255, 255, 255, .09) !important;
border-color: rgba(255, 255, 255, .24) !important;
}
body[data-theme="dark"] .left-scroll .img-card .img-slot-lbl {
color: var(--mg-dark-ink) !important;
}
body[data-theme="dark"] .left-scroll .img-action-btn {
background: rgba(255, 255, 255, .055) !important;
border-color: rgba(255, 255, 255, .12) !important;
color: var(--mg-dark-ink) !important;
}
body[data-theme="dark"] .left-scroll .img-action-edit {
background: #f3efe8 !important;
border-color: #f3efe8 !important;
color: #0d263f !important;
}
body[data-theme="dark"] .left-scroll .img-action-remove {
color: #fecaca !important;
}
body[data-theme="dark"] .left-scroll .img-action-remove:hover {
background: rgba(127, 29, 29, .22) !important;
border-color: rgba(248, 113, 113, .34) !important;
}
/* Image card final tuning. */
.left-scroll .img-card .img-slot-lbl {
min-height: 28px;
padding: 8px 10px;
color: var(--ink);
font-size: 12px;
font-weight: 800;
line-height: 1;
}
.left-scroll .img-card-bar {
gap: 0;
padding: 0;
border-top: 1px solid rgba(13, 38, 63, .10);
}
.left-scroll .img-action-btn {
height: 42px;
border-width: 0;
border-left: 1px solid rgba(13, 38, 63, .10);
border-radius: 0;
background: #fff;
}
.left-scroll .img-action-btn:first-child {
border-left: 0;
}
.left-scroll .img-action-edit {
background: rgba(13, 38, 63, .035);
color: var(--ink);
}
.left-scroll .img-action-reset:hover {
background: rgba(13, 38, 63, .06);
}
.left-scroll .img-action-remove:hover {
background: rgba(127, 29, 29, .07);
}
body[data-theme="dark"] .left-scroll .img-card-bar {
border-top-color: rgba(255, 255, 255, .10) !important;
}
body[data-theme="dark"] .left-scroll .img-action-btn {
background: rgba(16, 25, 37, .86) !important;
border-left-color: rgba(255, 255, 255, .10) !important;
}
body[data-theme="dark"] .left-scroll .img-action-edit {
background: rgba(255, 255, 255, .055) !important;
color: var(--mg-dark-ink) !important;
}
/* Clear-all placement. */
.left-scroll .text-actions-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-bottom: 12px;
}
.left-scroll .text-actions-row button {
width: 100%;
justify-content: center;
}
.left-scroll .text-reset-area {
display: flex;
justify-content: flex-end;
padding-top: 14px;
border-top: 1px solid rgba(13, 38, 63, .08);
}
.left-scroll .text-clear-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 38px;
padding: 0 12px;
border: 1px solid rgba(127, 29, 29, .18);
border-radius: 7px;
background: #fff;
color: #7f1d1d;
font-size: 12px;
font-weight: 800;
box-shadow: none;
}
.left-scroll .text-clear-button svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
}
.left-scroll .text-clear-button:hover {
border-color: rgba(127, 29, 29, .30);
background: rgba(127, 29, 29, .06);
transform: none;
}
body[data-theme="dark"] .left-scroll .text-reset-area {
border-top-color: rgba(255, 255, 255, .10) !important;
}
body[data-theme="dark"] .left-scroll .text-clear-button {
background: rgba(16, 25, 37, .55) !important;
border-color: rgba(248, 113, 113, .24) !important;
color: #fecaca !important;
}
body[data-theme="dark"] .left-scroll .text-clear-button:hover {
background: rgba(127, 29, 29, .22) !important;
border-color: rgba(248, 113, 113, .34) !important;
}
/* Hide image role labels until labels are finalized. */
.left-scroll .img-card .img-slot-lbl {
display: none !important;
}
/* AI-enhanced image state. */
.left-scroll .img-action-edit.is-ai-enhanced {
background: #14532d !important;
border-color: #14532d !important;
color: #fff !important;
}
.left-scroll .img-action-edit.is-ai-enhanced:hover {
background: #166534 !important;
border-color: #166534 !important;
}
body[data-theme="dark"] .left-scroll .img-action-edit.is-ai-enhanced {
background: #166534 !important;
border-color: #166534 !important;
color: #fff !important;
}
body[data-theme="dark"] .left-scroll .img-action-edit.is-ai-enhanced:hover {
background: #15803d !important;
border-color: #15803d !important;
}
/* Image editor modal interface. */
#imgFullscreen {
background: #07111d;
color: #f3efe8;
z-index: 1200;
}
#imgFullscreen .ifs-header {
min-height: 58px;
padding: 0 18px;
background: rgba(13, 38, 63, .96);
border-bottom: 1px solid rgba(243, 239, 232, .10);
color: #f3efe8;
box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}
#imgFullscreen .ifs-title {
min-width: 0;
color: #f3efe8;
font-size: 15px;
font-weight: 850;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#imgFullscreen .ifs-close {
width: 36px;
height: 36px;
border: 1px solid rgba(243, 239, 232, .16);
border-radius: 999px;
background: rgba(255, 255, 255, .06);
color: #f3efe8;
font-size: 16px;
line-height: 1;
}
#imgFullscreen .ifs-close:hover {
background: rgba(255, 255, 255, .12);
}
#imgFullscreen .ifs-body {
background: #07111d;
}
#imgFullscreen .ifs-img-wrap {
background:
radial-gradient(circle at center, rgba(255, 255, 255, .055), transparent 38rem),
#07111d;
padding: 24px;
}
#imgFullscreen .ifs-img-wrap img {
max-width: 100%;
max-height: calc(100vh - 106px);
border-radius: 6px;
box-shadow: 0 22px 60px rgba(0, 0, 0, .38);
}
#imgFullscreen .ifs-ba-label {
top: 18px;
border: 1px solid rgba(243, 239, 232, .16);
background: rgba(13, 38, 63, .86);
color: #f3efe8;
font-size: 12px;
font-weight: 850;
padding: 7px 12px;
border-radius: 999px;
}
#imgFullscreen .ifs-side {
width: 340px;
background: #101925;
border-left: 1px solid rgba(243, 239, 232, .10);
color: #f3efe8;
}
#imgFullscreen .ifs-side-title {
padding: 18px 18px 8px;
border-bottom: 0;
color: #f3efe8;
font-size: 12px;
font-weight: 850;
letter-spacing: .04em;
}
#imgFullscreen .ifs-presets {
grid-template-columns: 1fr;
gap: 8px;
padding: 8px 18px 18px;
}
#imgFullscreen .ifs-preset-btn {
display: grid;
grid-template-columns: 26px minmax(0, 1fr);
align-items: center;
min-height: 44px;
padding: 9px 11px;
border: 1px solid rgba(243, 239, 232, .12);
border-radius: 8px;
background: rgba(255, 255, 255, .055);
color: #e8eef6;
font-size: 13px;
font-weight: 750;
line-height: 1.2;
text-align: left;
}
#imgFullscreen .ifs-preset-btn:hover {
border-color: rgba(201, 154, 95, .42);
background: rgba(201, 154, 95, .12);
}
#imgFullscreen .ifs-preset-btn .pi {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
font-size: 17px;
}
#imgFullscreen .ifs-custom {
padding: 8px 18px 18px;
}
#imgFullscreen .ifs-custom textarea {
height: 92px;
border: 1px solid rgba(243, 239, 232, .14);
border-radius: 8px;
background: rgba(255, 255, 255, .06);
color: #f3efe8;
font-size: 13px;
line-height: 1.45;
}
#imgFullscreen .ifs-custom textarea::placeholder {
color: rgba(243, 239, 232, .52);
}
#imgFullscreen .ifs-custom textarea:focus {
border-color: rgba(201, 154, 95, .48);
box-shadow: 0 0 0 3px rgba(201, 154, 95, .14);
}
#imgFullscreen .ifs-custom button,
#imgFullscreen .ifs-use {
min-height: 42px;
border: 1px solid #f3efe8;
border-radius: 8px;
background: #f3efe8;
color: #0d263f;
font-weight: 850;
box-shadow: none;
}
#imgFullscreen .ifs-custom button:hover,
#imgFullscreen .ifs-use:hover {
filter: none;
background: #fff;
border-color: #fff;
}
#imgFullscreen .ifs-status {
min-height: 38px;
padding: 10px 18px;
border-top: 1px solid rgba(243, 239, 232, .10);
color: rgba(243, 239, 232, .72);
font-size: 12px;
}
#imgFullscreen .ifs-ba-toggle {
gap: 0;
padding: 14px 18px;
border-top: 1px solid rgba(243, 239, 232, .10);
}
#imgFullscreen .ifs-ba-btn {
min-height: 38px;
border-color: rgba(243, 239, 232, .14);
border-radius: 0;
background: rgba(255, 255, 255, .055);
color: rgba(243, 239, 232, .72);
}
#imgFullscreen .ifs-ba-btn:first-child {
border-radius: 8px 0 0 8px;
}
#imgFullscreen .ifs-ba-btn:last-child {
border-radius: 0 8px 8px 0;
border-left: 0;
}
#imgFullscreen .ifs-ba-btn.active {
background: #f3efe8;
border-color: #f3efe8;
color: #0d263f;
}
#imgFullscreen .ifs-actions {
gap: 8px;
padding: 14px 18px 18px;
border-top: 1px solid rgba(243, 239, 232, .10);
}
#imgFullscreen .ifs-discard {
min-height: 42px;
border: 1px solid rgba(243, 239, 232, .14);
border-radius: 8px;
background: rgba(255, 255, 255, .055);
color: rgba(243, 239, 232, .78);
font-weight: 800;
}
#imgFullscreen .ifs-discard:hover {
background: rgba(255, 255, 255, .10);
color: #f3efe8;
}
@media (max-width: 900px) {
#imgFullscreen .ifs-body {
flex-direction: column;
}
#imgFullscreen .ifs-img-wrap {
min-height: 44vh;
padding: 16px;
}
#imgFullscreen .ifs-side {
width: 100%;
max-height: 46vh;
border-left: 0;
border-top: 1px solid rgba(243, 239, 232, .10);
}
}
/* Image editor preset SVG icons. */
#imgFullscreen .ifs-preset-btn .pi svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
}
/* Harmonized image editor surfaces. */
#imgFullscreen,
#imgFullscreen .ifs-body,
#imgFullscreen .ifs-img-wrap,
#imgFullscreen .ifs-side {
background: #0d263f !important;
}
#imgFullscreen .ifs-header {
background: #0f2b47 !important;
border-bottom-color: rgba(243, 239, 232, .12) !important;
box-shadow: none !important;
}
#imgFullscreen .ifs-img-wrap {
background-image: none !important;
}
#imgFullscreen .ifs-side {
border-left-color: rgba(243, 239, 232, .12) !important;
}
#imgFullscreen .ifs-img-wrap img {
box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}
@media (max-width: 900px) {
#imgFullscreen .ifs-side {
border-top-color: rgba(243, 239, 232, .12) !important;
}
}
/* Image editor preset label and spacing. */
#imgFullscreen .ifs-preset-btn {
grid-template-columns: 32px minmax(0, 1fr);
column-gap: 10px;
}
#imgFullscreen .ifs-preset-btn .pi svg {
width: 21px;
height: 21px;
}
/* Image editor side panel follows theme. */
#imgFullscreen .ifs-side {
background: #fffdfa !important;
border-left-color: rgba(13, 38, 63, .12) !important;
color: var(--ink) !important;
}
#imgFullscreen .ifs-side-title {
color: var(--ink) !important;
}
#imgFullscreen .ifs-preset-btn {
border-color: rgba(13, 38, 63, .12) !important;
background: #fff !important;
color: var(--ink) !important;
}
#imgFullscreen .ifs-preset-btn:hover {
border-color: rgba(13, 38, 63, .24) !important;
background: rgba(13, 38, 63, .045) !important;
}
#imgFullscreen .ifs-custom textarea {
border-color: rgba(13, 38, 63, .14) !important;
background: #fff !important;
color: var(--ink) !important;
}
#imgFullscreen .ifs-custom textarea::placeholder {
color: var(--text-soft) !important;
}
#imgFullscreen .ifs-status,
#imgFullscreen .ifs-ba-toggle,
#imgFullscreen .ifs-actions {
border-top-color: rgba(13, 38, 63, .10) !important;
}
#imgFullscreen .ifs-status {
color: var(--text-soft) !important;
}
#imgFullscreen .ifs-ba-btn {
border-color: rgba(13, 38, 63, .14) !important;
background: #fff !important;
color: var(--text-soft) !important;
}
#imgFullscreen .ifs-ba-btn.active,
#imgFullscreen .ifs-custom button,
#imgFullscreen .ifs-use {
border-color: var(--ink) !important;
background: var(--ink) !important;
color: #fff !important;
}
#imgFullscreen .ifs-discard {
border-color: rgba(13, 38, 63, .14) !important;
background: #fff !important;
color: var(--text-soft) !important;
}
#imgFullscreen .ifs-discard:hover {
background: rgba(13, 38, 63, .045) !important;
color: var(--ink) !important;
}
body[data-theme="dark"] #imgFullscreen .ifs-side {
background: #0d263f !important;
border-left-color: rgba(243, 239, 232, .12) !important;
color: #f3efe8 !important;
}
body[data-theme="dark"] #imgFullscreen .ifs-side-title {
color: #f3efe8 !important;
}
body[data-theme="dark"] #imgFullscreen .ifs-preset-btn,
body[data-theme="dark"] #imgFullscreen .ifs-custom textarea,
body[data-theme="dark"] #imgFullscreen .ifs-ba-btn,
body[data-theme="dark"] #imgFullscreen .ifs-discard {
border-color: rgba(243, 239, 232, .14) !important;
background: rgba(255, 255, 255, .055) !important;
color: #e8eef6 !important;
}
body[data-theme="dark"] #imgFullscreen .ifs-preset-btn:hover,
body[data-theme="dark"] #imgFullscreen .ifs-discard:hover {
border-color: rgba(201, 154, 95, .42) !important;
background: rgba(201, 154, 95, .12) !important;
color: #f3efe8 !important;
}
body[data-theme="dark"] #imgFullscreen .ifs-custom textarea::placeholder,
body[data-theme="dark"] #imgFullscreen .ifs-status {
color: rgba(243, 239, 232, .68) !important;
}
body[data-theme="dark"] #imgFullscreen .ifs-status,
body[data-theme="dark"] #imgFullscreen .ifs-ba-toggle,
body[data-theme="dark"] #imgFullscreen .ifs-actions {
border-top-color: rgba(243, 239, 232, .10) !important;
}
body[data-theme="dark"] #imgFullscreen .ifs-ba-btn.active,
body[data-theme="dark"] #imgFullscreen .ifs-custom button,
body[data-theme="dark"] #imgFullscreen .ifs-use {
border-color: #f3efe8 !important;
background: #f3efe8 !important;
color: #0d263f !important;
}
@media (max-width: 900px) {
#imgFullscreen .ifs-side {
border-top-color: rgba(13, 38, 63, .12) !important;
}
body[data-theme="dark"] #imgFullscreen .ifs-side {
border-top-color: rgba(243, 239, 232, .12) !important;
}
}
/* Image editor active preset state. */
#imgFullscreen .ifs-preset-btn.active {
border-color: var(--ink) !important;
background: rgba(13, 38, 63, .08) !important;
color: var(--ink) !important;
box-shadow: inset 3px 0 0 var(--ink);
}
/* ── Bild-AI-tillägg (2026-07): Auto / AI-optimera / window-pull ── */
#imgFullscreen .ifs-preset-btn.ifs-auto-primary {
border-color: rgba(201, 154, 95, .6) !important;
background: linear-gradient(135deg, rgba(201, 154, 95, .22), rgba(201, 154, 95, .10)) !important;
color: var(--ink) !important;
font-weight: 850 !important;
}
#imgFullscreen .ifs-preset-btn.ifs-auto-primary:hover {
border-color: #c99a5f !important;
background: linear-gradient(135deg, rgba(201, 154, 95, .34), rgba(201, 154, 95, .16)) !important;
}
body[data-theme="dark"] #imgFullscreen .ifs-preset-btn.ifs-auto-primary {
color: #f3efe8 !important;
}
#imgFullscreen .ifs-preset-btn.ifs-ai-btn {
border-color: rgba(46, 110, 160, .42) !important;
}
#imgFullscreen .ifs-preset-btn.ifs-ai-btn:hover {
border-color: rgba(46, 110, 160, .72) !important;
background: rgba(46, 110, 160, .10) !important;
}
#imgFullscreen .ifs-preset-btn.ifs-win-btn {
border-color: rgba(46, 110, 160, .3) !important;
}
/* Bara aktuell Exteriör/Interiör-grupp syns (hidden biter inte annars pga display:grid). */
#imgFullscreen .ifs-presets[hidden] { display: none !important; }
/* AI-analys: förklaringsrad + resultatnotis */
#imgFullscreen .ifs-ai-hint {
margin: 0;
padding: 0 18px 12px;
font-size: 11.5px;
line-height: 1.5;
color: var(--text-soft) !important;
}
#imgFullscreen .ifs-ai-note {
margin: 0 18px 14px;
padding: 12px 14px;
background: rgba(46, 110, 160, .08);
border: 1px solid rgba(46, 110, 160, .26);
border-radius: 11px;
}
body[data-theme="dark"] #imgFullscreen .ifs-ai-note {
background: rgba(127, 176, 224, .10);
border-color: rgba(127, 176, 224, .30);
}
#imgFullscreen .ifs-ai-note-head {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 800;
color: var(--ink) !important;
margin-bottom: 7px;
}
#imgFullscreen .ifs-ai-note-badge {
background: #2b5f97;
color: #fff;
font-size: 9.5px;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 5px;
}
#imgFullscreen .ifs-ai-note-body {
margin: 0;
font-size: 12.5px;
line-height: 1.6;
color: var(--ink) !important;
}
body[data-theme="dark"] #imgFullscreen .ifs-preset-btn.active {
border-color: #f3efe8 !important;
background: rgba(243, 239, 232, .12) !important;
color: #f3efe8 !important;
box-shadow: inset 3px 0 0 #f3efe8;
}
/* Image editor compare controls. */
#imgFullscreen .ifs-ba-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
}
#imgFullscreen .ifs-ai-icon {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
}
#imgFullscreen .ifs-ba-btn.active {
background: var(--ink) !important;
border-color: var(--ink) !important;
color: #fff !important;
box-shadow: inset 0 -3px 0 rgba(201, 154, 95, .95);
}
#imgFullscreen .ifs-status {
display: flex;
align-items: center;
gap: 9px;
line-height: 1.45;
}
#imgFullscreen .ifs-status.is-ready,
#imgFullscreen .ifs-status.is-busy {
margin: 0 18px 12px;
padding: 10px 12px;
border: 1px solid rgba(13, 38, 63, .10) !important;
border-radius: 8px;
background: rgba(13, 38, 63, .045);
color: var(--ink) !important;
}
#imgFullscreen .ifs-status-icon {
width: 9px;
height: 9px;
flex: 0 0 auto;
border-radius: 999px;
background: #166534;
box-shadow: 0 0 0 4px rgba(22, 101, 52, .12);
}
#imgFullscreen .ifs-status.is-busy .ifs-status-icon {
background: #c99a5f;
box-shadow: 0 0 0 4px rgba(201, 154, 95, .16);
}
body[data-theme="dark"] #imgFullscreen .ifs-ba-btn.active {
background: #f3efe8 !important;
border-color: #f3efe8 !important;
color: #0d263f !important;
box-shadow: inset 0 -3px 0 rgba(201, 154, 95, .95);
}
body[data-theme="dark"] #imgFullscreen .ifs-status.is-ready,
body[data-theme="dark"] #imgFullscreen .ifs-status.is-busy {
border-color: rgba(243, 239, 232, .12) !important;
background: rgba(255, 255, 255, .055) !important;
color: #f3efe8 !important;
}
/* Refined image editor active states. */
#imgFullscreen .ifs-ba-btn.active {
background: var(--ink) !important;
border-color: var(--ink) !important;
color: #fff !important;
box-shadow: none !important;
}
#imgFullscreen .ifs-preset-btn.active {
border-color: rgba(168, 119, 66, .26) !important;
background: rgba(168, 119, 66, .06) !important;
color: var(--ink) !important;
box-shadow: none !important;
}
body[data-theme="dark"] #imgFullscreen .ifs-ba-btn.active {
background: #f3efe8 !important;
border-color: #f3efe8 !important;
color: #0d263f !important;
box-shadow: none !important;
}
body[data-theme="dark"] #imgFullscreen .ifs-preset-btn.active {
border-color: rgba(201, 154, 95, .34) !important;
background: rgba(201, 154, 95, .12) !important;
color: #f3efe8 !important;
box-shadow: none !important;
}
/* Image editor comparison switch. */
#imgFullscreen .ifs-ba-toggle {
gap: 0;
padding: 14px 18px;
}
#imgFullscreen .ifs-ba-btn {
min-height: 40px;
border: 1px solid rgba(13, 38, 63, .14) !important;
background: rgba(13, 38, 63, .035) !important;
color: var(--text-soft) !important;
box-shadow: none !important;
}
#imgFullscreen .ifs-ba-btn + .ifs-ba-btn {
border-left: 0 !important;
}
#imgFullscreen .ifs-ba-btn.active {
background: #fff !important;
color: var(--ink) !important;
box-shadow: inset 0 0 0 1px rgba(13, 38, 63, .32) !important;
}
#imgFullscreen .ifs-use {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
#imgFullscreen .ifs-use .ifs-ai-icon {
width: 17px;
height: 17px;
}
body[data-theme="dark"] #imgFullscreen .ifs-ba-btn {
border-color: rgba(243, 239, 232, .16) !important;
background: rgba(255, 255, 255, .055) !important;
color: rgba(243, 239, 232, .72) !important;
}
body[data-theme="dark"] #imgFullscreen .ifs-ba-btn.active {
background: rgba(243, 239, 232, .14) !important;
color: #f3efe8 !important;
box-shadow: inset 0 0 0 1px rgba(243, 239, 232, .38) !important;
}
/* Clearer image editor side panel. */
#imgFullscreen .ifs-side {
width: min(404px, 40vw);
padding: 18px;
gap: 16px;
background: #f8f6f2 !important;
border-left: 1px solid rgba(13, 38, 63, .12) !important;
}
#imgFullscreen .ifs-side-title {
padding: 0 !important;
border: 0 !important;
color: var(--ink) !important;
font-size: .82rem !important;
font-weight: 900 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
#imgFullscreen .ifs-presets,
#imgFullscreen .ifs-custom,
#imgFullscreen .ifs-status,
#imgFullscreen .ifs-ba-toggle,
#imgFullscreen .ifs-actions {
margin: 0 !important;
}
#imgFullscreen .ifs-presets {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
padding: 0 !important;
}
#imgFullscreen .ifs-preset-btn {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
min-height: 48px;
padding: 10px 12px !important;
border-radius: 8px !important;
background: #fff !important;
border-color: rgba(13, 38, 63, .12) !important;
color: var(--ink) !important;
text-align: left !important;
font-size: .86rem !important;
font-weight: 800 !important;
}
#imgFullscreen .ifs-preset-btn:hover {
background: rgba(13, 38, 63, .035) !important;
border-color: rgba(13, 38, 63, .22) !important;
}
#imgFullscreen .ifs-preset-btn.active {
background: rgba(168, 119, 66, .10) !important;
border-color: rgba(168, 119, 66, .34) !important;
color: var(--ink) !important;
}
#imgFullscreen .ifs-preset-btn .pi {
display: inline-grid !important;
width: 34px;
height: 34px;
place-items: center;
margin: 0 !important;
flex: 0 0 auto;
border-radius: 8px;
background: rgba(13, 38, 63, .06);
color: var(--ink);
}
#imgFullscreen .ifs-preset-btn .pi svg {
width: 19px;
height: 19px;
}
#imgFullscreen .ifs-custom {
display: grid;
gap: 10px;
padding: 0 !important;
}
#imgFullscreen .ifs-custom textarea {
min-height: 108px;
border-radius: 8px !important;
background: #fff !important;
}
#imgFullscreen .ifs-custom button,
#imgFullscreen .ifs-use,
#imgFullscreen .ifs-discard {
min-height: 42px;
border-radius: 8px !important;
font-size: .86rem !important;
}
#imgFullscreen .ifs-status {
min-height: 0;
}
#imgFullscreen .ifs-status.is-ready,
#imgFullscreen .ifs-status.is-busy {
padding: 12px 13px !important;
border-radius: 8px;
background: #fff !important;
}
#imgFullscreen .ifs-ba-toggle {
position: relative;
padding: 26px 0 0 !important;
border-top: 1px solid rgba(13, 38, 63, .10) !important;
}
#imgFullscreen .ifs-ba-toggle::before {
content: "Jämför resultat";
position: absolute;
top: 0;
left: 0;
color: var(--ink);
font-size: .78rem;
font-weight: 900;
}
#imgFullscreen .ifs-actions {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
padding: 0 !important;
border: 0 !important;
}
#imgFullscreen .ifs-use {
flex: 0 1 auto;
}
#imgFullscreen .ifs-discard {
min-width: 92px;
}
body[data-theme="dark"] #imgFullscreen .ifs-side {
background: #102b45 !important;
border-left-color: rgba(243, 239, 232, .14) !important;
}
body[data-theme="dark"] #imgFullscreen .ifs-side-title,
body[data-theme="dark"] #imgFullscreen .ifs-ba-toggle::before {
color: #f3efe8 !important;
}
body[data-theme="dark"] #imgFullscreen .ifs-preset-btn,
body[data-theme="dark"] #imgFullscreen .ifs-custom textarea,
body[data-theme="dark"] #imgFullscreen .ifs-status.is-ready,
body[data-theme="dark"] #imgFullscreen .ifs-status.is-busy {
background: rgba(255, 255, 255, .065) !important;
border-color: rgba(243, 239, 232, .14) !important;
color: #f3efe8 !important;
}
body[data-theme="dark"] #imgFullscreen .ifs-preset-btn:hover {
background: rgba(255, 255, 255, .10) !important;
border-color: rgba(243, 239, 232, .22) !important;
}
body[data-theme="dark"] #imgFullscreen .ifs-preset-btn.active {
background: rgba(201, 154, 95, .16) !important;
border-color: rgba(201, 154, 95, .40) !important;
}
body[data-theme="dark"] #imgFullscreen .ifs-preset-btn .pi {
background: rgba(243, 239, 232, .10);
color: #f3efe8;
}
body[data-theme="dark"] #imgFullscreen .ifs-ba-toggle {
border-top-color: rgba(243, 239, 232, .12) !important;
}
@media (max-width: 900px) {
#imgFullscreen .ifs-side {
width: 100%;
padding: 16px;
border-left: 0 !important;
}
}
/* Clearer Original/AI comparison toggle. */
#imgFullscreen .ifs-ba-toggle {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 4px !important;
padding: 30px 0 0 !important;
border: 0 !important;
}
#imgFullscreen .ifs-ba-toggle::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 44px;
border-radius: 999px;
background: rgba(13, 38, 63, .075);
border: 1px solid rgba(13, 38, 63, .14);
pointer-events: none;
z-index: 0;
}
#imgFullscreen .ifs-ba-btn {
position: relative;
z-index: 1;
min-height: 44px;
border: 0 !important;
border-radius: 999px !important;
background: transparent !important;
color: var(--text-soft) !important;
font-size: .85rem !important;
font-weight: 900 !important;
transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
#imgFullscreen .ifs-ba-btn + .ifs-ba-btn {
border-left: 0 !important;
}
#imgFullscreen .ifs-ba-btn:hover {
color: var(--ink) !important;
background: rgba(255, 255, 255, .45) !important;
}
#imgFullscreen .ifs-ba-btn.active {
background: var(--ink) !important;
color: #fff !important;
box-shadow: 0 2px 8px rgba(13, 38, 63, .16) !important;
}
body[data-theme="dark"] #imgFullscreen .ifs-ba-toggle::after {
background: rgba(255, 255, 255, .075);
border-color: rgba(243, 239, 232, .16);
}
body[data-theme="dark"] #imgFullscreen .ifs-ba-btn {
background: transparent !important;
color: rgba(243, 239, 232, .70) !important;
}
body[data-theme="dark"] #imgFullscreen .ifs-ba-btn:hover {
background: rgba(255, 255, 255, .08) !important;
color: #f3efe8 !important;
}
body[data-theme="dark"] #imgFullscreen .ifs-ba-btn.active {
background: #f3efe8 !important;
color: #0d263f !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, .24) !important;
}
/* More breathing room above the image comparison toggle. */
#imgFullscreen .ifs-ba-toggle {
margin-top: 10px !important;
padding-top: 34px !important;
border-top: 0 !important;
}
#imgFullscreen .ifs-ba-toggle::before {
top: 4px;
}
body[data-theme="dark"] #imgFullscreen .ifs-ba-toggle {
border-top: 0 !important;
}
/* Calmer image editor side panel controls. */
#imgFullscreen .ifs-side {
gap: 12px;
}
#imgFullscreen .ifs-side-title {
margin: 0 !important;
}
#imgFullscreen .ifs-presets {
gap: 0 !important;
padding: 4px !important;
border: 1px solid rgba(13, 38, 63, .10);
border-radius: 8px;
background: #fff;
}
#imgFullscreen .ifs-preset-btn {
min-height: 40px;
gap: 10px;
padding: 8px 9px !important;
border: 0 !important;
border-radius: 6px !important;
background: transparent !important;
box-shadow: none !important;
font-size: .82rem !important;
}
#imgFullscreen .ifs-preset-btn + .ifs-preset-btn {
margin-top: 2px;
}
#imgFullscreen .ifs-preset-btn:hover {
background: rgba(13, 38, 63, .045) !important;
}
#imgFullscreen .ifs-preset-btn.active {
background: rgba(168, 119, 66, .12) !important;
border: 0 !important;
}
#imgFullscreen .ifs-preset-btn .pi {
width: 28px;
height: 28px;
border-radius: 7px;
background: rgba(13, 38, 63, .055);
}
#imgFullscreen .ifs-preset-btn .pi svg {
width: 16px;
height: 16px;
}
#imgFullscreen .ifs-side-title + .ifs-custom {
margin-top: -6px !important;
}
#imgFullscreen .ifs-custom {
gap: 8px;
}
#imgFullscreen .ifs-custom textarea {
min-height: 96px;
}
#imgFullscreen .ifs-custom button {
min-height: 40px;
}
#imgFullscreen .ifs-status.is-ready,
#imgFullscreen .ifs-status.is-busy {
margin-top: 2px !important;
}
body[data-theme="dark"] #imgFullscreen .ifs-presets {
background: rgba(255, 255, 255, .045);
border-color: rgba(243, 239, 232, .12);
}
body[data-theme="dark"] #imgFullscreen .ifs-preset-btn {
background: transparent !important;
}
body[data-theme="dark"] #imgFullscreen .ifs-preset-btn:hover {
background: rgba(255, 255, 255, .075) !important;
}
body[data-theme="dark"] #imgFullscreen .ifs-preset-btn.active {
background: rgba(201, 154, 95, .16) !important;
}
/* Balanced image editor action buttons. */
#imgFullscreen .ifs-actions {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
margin-top: 8px !important;
}
#imgFullscreen .ifs-use,
#imgFullscreen .ifs-discard {
width: 100%;
min-width: 0 !important;
}
/* Slightly more space before custom instruction. */
#imgFullscreen .ifs-presets + .ifs-side-title {
margin-top: 6px !important;
}
#imgFullscreen .ifs-side-title + .ifs-custom {
margin-top: -3px !important;
}
/* Explicit hidden state for image editor compare/actions. */
#imgFullscreen #ifsBaToggle[hidden],
#imgFullscreen #ifsActionsRow[hidden] {
display: none !important;
}
/* Generated texts live in the preview panel. */
.preview-text-editor {
margin-top: 18px;
padding: 18px;
border: 1px solid rgba(13, 38, 63, .10);
border-radius: 8px;
background: #fff;
}
.preview-text-editor label {
display: flex;
align-items: baseline;
justify-content: flex-end;
gap: 10px;
color: var(--ink);
font-size: 12px;
font-weight: 850;
line-height: 1.2;
}
.preview-text-editor .txt-out {
min-height: 150px;
margin-top: 10px;
border-color: rgba(13, 38, 63, .14);
background: #fff;
}
#tabHemtxt .preview-text-editor .txt-out {
min-height: 120px;
}
#tabFort .preview-text-editor .txt-out {
min-height: 150px;
}
.preview-text-editor .char-count {
justify-content: flex-end;
margin-top: 8px;
}
.overview-facts {
margin-top: 18px;
display: grid;
gap: 12px;
}
.overview-fact-section {
padding: 16px;
border: 1px solid rgba(13, 38, 63, .10);
border-radius: 8px;
background: #fff;
}
.overview-fact-section h3 {
margin: 0 0 12px;
color: var(--ink);
font-size: .92rem;
font-weight: 900;
}
.overview-fact-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 14px;
}
.overview-fact {
display: grid;
gap: 3px;
min-width: 0;
}
.overview-fact span {
color: var(--text-soft);
font-size: 11px;
font-weight: 800;
line-height: 1.25;
}
.overview-fact strong {
color: var(--text);
font-family: var(--font);
font-size: .92rem;
font-weight: 700;
line-height: 1.35;
overflow-wrap: anywhere;
}
.overview-empty {
padding: 16px;
border: 1px dashed rgba(13, 38, 63, .16);
border-radius: 8px;
background: #fff;
color: var(--text-soft);
font-size: .9rem;
}
body[data-theme="dark"] .preview-text-editor,
body[data-theme="dark"] .overview-fact-section,
body[data-theme="dark"] .overview-empty {
background: rgba(16, 25, 37, .70) !important;
border-color: rgba(255, 255, 255, .12) !important;
}
body[data-theme="dark"] .preview-text-editor label,
body[data-theme="dark"] .overview-fact-section h3,
body[data-theme="dark"] .overview-fact strong {
color: var(--mg-dark-ink) !important;
}
body[data-theme="dark"] .overview-fact span,
body[data-theme="dark"] .overview-empty {
color: var(--mg-dark-ink-soft) !important;
}
@media (max-width: 760px) {
.overview-fact-grid {
grid-template-columns: 1fr;
}
}
/* Overview fact sections are now a little denser with more rows. */
.overview-fact-section {
text-align: left;
}
.overview-fact-grid {
align-items: start;
}
/* Compact overview workspace in the middle panel. */
@media (min-width: 1101px) {
.preview-sticky {
max-height: calc(100vh - 102px);
}
.preview-panel {
max-height: calc(100vh - 102px);
overflow-y: auto;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: rgba(13, 38, 63, .18) transparent;
}
.preview-panel::-webkit-scrollbar {
width: 8px;
}
.preview-panel::-webkit-scrollbar-track {
background: transparent;
}
.preview-panel::-webkit-scrollbar-thumb {
background: rgba(13, 38, 63, .18);
border-radius: 4px;
}
.preview-panel::-webkit-scrollbar-thumb:hover {
background: rgba(13, 38, 63, .30);
}
}
#tabMain .mag-card {
padding: 14px !important;
text-align: left !important;
background: #fff !important;
border-radius: 8px !important;
}
#tabMain .mag-hero {
width: 100% !important;
max-height: 260px;
margin: 0 !important;
aspect-ratio: 4 / 2.6 !important;
border-radius: 8px !important;
}
#tabMain .mag-hero-empty {
width: 100%;
display: grid;
place-items: center;
gap: 6px;
min-height: 150px;
color: var(--text-soft);
font-family: var(--font);
font-size: .9rem;
font-style: normal;
}
#tabMain .mag-hero-empty svg {
width: 30px;
height: 30px;
margin: 0;
}
#tabMain .mag-thumbs {
margin-top: 10px;
}
#tabMain .mag-eyebrow,
#tabMain .mag-title,
#tabMain .mag-subtitle,
#tabMain .mag-stats,
#tabMain .mag-addr-line,
#tabMain .mag-details,
#tabMain .mag-broker {
display: none !important;
}
#tabMain .overview-facts {
margin-top: 14px;
gap: 14px;
}
#tabMain .overview-fact-section {
padding: 16px !important;
border-radius: 8px !important;
}
#tabMain .overview-fact-section h3 {
margin-bottom: 12px;
font-size: .88rem;
}
#tabMain .overview-fact-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px 18px;
}
#tabMain .overview-fact {
padding-bottom: 9px;
border-bottom: 1px solid rgba(13, 38, 63, .08);
}
#tabMain .overview-fact span {
font-size: 11px;
}
#tabMain .overview-fact strong {
font-size: .9rem;
}
#tabMain .preview-text-editor {
margin-top: 14px;
}
@media (max-width: 1280px) {
#tabMain .overview-fact-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
#tabMain .mag-hero {
aspect-ratio: 16 / 8 !important;
max-height: none;
}
#tabMain .overview-fact-grid {
grid-template-columns: 1fr;
}
}
body[data-theme="dark"] .preview-panel::-webkit-scrollbar-thumb {
background: rgba(243, 239, 232, .18);
}
body[data-theme="dark"] .preview-panel::-webkit-scrollbar-thumb:hover {
background: rgba(243, 239, 232, .30);
}
body[data-theme="dark"] #tabMain .mag-card {
background: rgba(16, 25, 37, .70) !important;
border-color: rgba(255, 255, 255, .12) !important;
}
body[data-theme="dark"] #tabMain .overview-fact {
border-bottom-color: rgba(255, 255, 255, .10);
}
/* Denser overview facts and AI-generated text cue. */
#tabMain .overview-fact {
display: grid;
grid-template-columns: minmax(92px, .85fr) minmax(0, 1.15fr);
align-items: start;
gap: 10px;
}
#tabMain .overview-fact span {
line-height: 1.35;
}
#tabMain .overview-fact strong {
text-align: right;
}
.preview-text-editor .text-ai-label {
display: inline-flex;
align-items: center;
gap: 7px;
}
.preview-text-editor .text-ai-label svg {
width: 16px;
height: 16px;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
color: var(--brand-accent);
}
@media (max-width: 560px) {
#tabMain .overview-fact {
grid-template-columns: 1fr;
gap: 3px;
}
#tabMain .overview-fact strong {
text-align: left;
}
}
/* Compact AI text generation controls. */
.text-generator-panel .pb.open {
gap: 10px !important;
}
.text-generator-panel .tone-row {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr);
align-items: center !important;
gap: 10px !important;
padding: 8px !important;
border: 1px solid rgba(13, 38, 63, .10) !important;
border-radius: 8px;
background: #fff;
}
.text-generator-panel .text-inline-040 {
color: var(--ink) !important;
font-size: 11px !important;
font-weight: 900 !important;
letter-spacing: 0 !important;
line-height: 1.2 !important;
white-space: nowrap;
}
.text-generator-panel #toneGroup {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 3px !important;
padding: 3px;
border-radius: 999px;
background: rgba(13, 38, 63, .055);
}
.text-generator-panel .tone-btn {
min-height: 30px !important;
padding: 0 8px !important;
border: 0 !important;
border-radius: 999px !important;
background: transparent !important;
color: var(--text-soft) !important;
font-size: 11px !important;
font-weight: 850 !important;
box-shadow: none !important;
}
.text-generator-panel .tone-btn:hover {
color: var(--ink) !important;
background: rgba(255, 255, 255, .70) !important;
}
.text-generator-panel .tone-btn.active {
background: var(--ink) !important;
color: #fff !important;
}
.text-generator-panel .text-gen-actions {
gap: 8px !important;
padding-bottom: 10px !important;
}
.text-generator-panel #btnAll {
min-height: 42px !important;
box-shadow: none !important;
}
.text-generator-panel .text-gen-secondary-row {
gap: 6px !important;
}
.text-generator-panel .text-gen-actions button {
min-height: 36px !important;
}
.text-generator-panel .btn-row.text-inline-045 {
padding-top: 10px !important;
}
body[data-theme="dark"] .text-generator-panel .tone-row {
background: rgba(16, 25, 37, .70) !important;
border-color: rgba(255, 255, 255, .12) !important;
}
body[data-theme="dark"] .text-generator-panel #toneGroup {
background: rgba(255, 255, 255, .07) !important;
}
body[data-theme="dark"] .text-generator-panel .tone-btn {
background: transparent !important;
color: var(--mg-dark-ink-soft) !important;
}
body[data-theme="dark"] .text-generator-panel .tone-btn:hover {
background: rgba(255, 255, 255, .08) !important;
color: var(--mg-dark-ink) !important;
}
body[data-theme="dark"] .text-generator-panel .tone-btn.active {
background: #f3efe8 !important;
color: #0d263f !important;
}
@media (max-width: 560px) {
.text-generator-panel .tone-row {
grid-template-columns: 1fr !important;
}
.text-generator-panel #toneGroup {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
border-radius: 8px;
}
.text-generator-panel .tone-btn {
border-radius: 6px !important;
}
}
/* Match Nettoskuld law note to the Kort beskrivning tip style. */
#tabNs .text-inline-053 {
margin-top: .8rem !important;
padding: .75rem .9rem !important;
background: rgba(168, 119, 66, .08) !important;
border: 0 !important;
border-left: 3px solid var(--g) !important;
border-radius: 0 8px 8px 0 !important;
color: var(--text) !important;
font-size: .82rem !important;
line-height: 1.45;
}
#tabNs .text-inline-053 strong {
color: var(--text) !important;
}
body[data-theme="dark"] #tabNs .text-inline-053 {
background: rgba(201, 154, 95, .08) !important;
border-color: var(--g) !important;
color: var(--mg-dark-ink) !important;
}
body[data-theme="dark"] #tabNs .text-inline-053 strong {
color: var(--mg-dark-ink) !important;
}
/* Clearer polished overview. */
#tabMain .overview-facts {
gap: 14px;
}
#tabMain .overview-summary,
#tabMain .overview-board {
border: 1px solid rgba(13, 38, 63, .10);
border-radius: 8px;
background: #fff;
}
#tabMain .overview-summary {
padding: 16px;
}
#tabMain .overview-summary h2,
#tabMain .overview-board-head h3,
#tabMain .overview-fact-section h3 {
margin: 0;
color: var(--ink);
font-family: var(--font);
font-weight: 750;
line-height: 1.25;
}
#tabMain .overview-summary h2 {
font-size: 1.05rem;
}
#tabMain .overview-summary p {
margin: 7px 0 0;
color: var(--text-soft);
font-size: .88rem;
font-weight: 500;
line-height: 1.4;
}
#tabMain .overview-board {
overflow: hidden;
}
#tabMain .overview-board-head {
padding: 13px 16px;
border-bottom: 1px solid rgba(13, 38, 63, .08);
background: rgba(244, 240, 234, .45);
}
#tabMain .overview-board-head h3,
#tabMain .overview-fact-section h3 {
font-size: .92rem;
}
#tabMain .overview-fact-section {
overflow: hidden;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
#tabMain .overview-fact-section h3 {
padding: 13px 16px 6px;
border: 0 !important;
background: transparent !important;
}
#tabMain .overview-fact-grid {
row-gap: 0;
column-gap: 34px;
padding: 0 16px 16px;
}
#tabMain .overview-fact {
display: grid;
grid-template-columns: minmax(120px, .78fr) minmax(0, 1.22fr);
align-items: baseline;
column-gap: 24px;
min-height: 38px;
padding: 9px 0;
border-bottom: 1px solid rgba(13, 38, 63, .10);
border-radius: 0;
background: transparent;
}
#tabMain .overview-fact span,
#tabMain .overview-fact strong {
min-width: 0;
font-size: .86rem;
line-height: 1.3;
}
#tabMain .overview-fact span {
color: var(--ink);
font-weight: 600;
}
#tabMain .overview-fact strong {
color: var(--ink);
font-weight: 400;
text-align: right;
overflow-wrap: anywhere;
}
#tabMain .overview-fact-section--long .overview-fact-grid {
grid-template-columns: 1fr;
column-gap: 0;
}
#tabMain .overview-fact-section--long .overview-fact {
grid-template-columns: 1fr;
align-items: start;
row-gap: 4px;
}
#tabMain .overview-fact-section--long .overview-fact strong {
text-align: left;
line-height: 1.45;
}
#tabMain .overview-empty {
margin: 0;
padding: 16px;
color: var(--text-soft);
font-size: .88rem;
font-weight: 500;
}
body[data-theme="dark"] #tabMain .overview-summary,
body[data-theme="dark"] #tabMain .overview-board {
background: rgba(16, 25, 37, .70) !important;
border-color: rgba(255, 255, 255, .12) !important;
}
body[data-theme="dark"] #tabMain .overview-board-head {
background: rgba(255, 255, 255, .045) !important;
border-bottom-color: rgba(255, 255, 255, .10) !important;
}
body[data-theme="dark"] #tabMain .overview-summary h2,
body[data-theme="dark"] #tabMain .overview-board-head h3,
body[data-theme="dark"] #tabMain .overview-fact-section h3,
body[data-theme="dark"] #tabMain .overview-fact strong {
color: var(--mg-dark-ink) !important;
}
body[data-theme="dark"] #tabMain .overview-summary p,
body[data-theme="dark"] #tabMain .overview-fact span,
body[data-theme="dark"] #tabMain .overview-empty {
color: var(--mg-dark-ink-soft) !important;
}
body[data-theme="dark"] #tabMain .overview-fact-section + .overview-fact-section {
border-top-color: rgba(255, 255, 255, .10) !important;
}
body[data-theme="dark"] #tabMain .overview-fact {
background: transparent !important;
border-bottom-color: rgba(255, 255, 255, .12) !important;
}
@media (max-width: 760px) {
#tabMain .overview-fact {
grid-template-columns: 1fr;
gap: 2px;
}
#tabMain .overview-fact strong {
text-align: left;
}
}
/* Overview image gallery with proportional hero and thumbnail grid. */
#tabMain .mag-card {
display: grid;
grid-template-columns: minmax(190px, .85fr) minmax(280px, 1.15fr);
gap: 14px;
align-items: start;
}
#tabMain .mag-hero {
min-height: 0;
max-height: none;
aspect-ratio: 4 / 3 !important;
}
#tabMain .mag-thumbs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-content: start;
gap: 8px;
margin: 0 !important;
padding: 0;
max-height: none;
overflow: visible;
}
#tabMain .mag-thumb {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
border-radius: 7px;
border-width: 2px;
}
#tabMain .mag-card--many-images .mag-thumbs {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
#tabMain .mag-card:has(.mag-thumbs[style*="none"]) {
grid-template-columns: minmax(0, 1fr);
}
#tabMain .mag-card:has(.mag-thumbs[style*="none"]) {
justify-content: start;
}
#tabMain .mag-card:has(.mag-thumbs[style*="none"]) .mag-hero {
width: min(100%, 360px) !important;
}
@media (max-width: 980px) {
#tabMain .mag-card {
grid-template-columns: minmax(180px, .85fr) minmax(220px, 1.15fr);
}
#tabMain .mag-thumbs {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
#tabMain .mag-card {
grid-template-columns: 1fr;
}
#tabMain .mag-hero {
aspect-ratio: 4 / 3 !important;
}
#tabMain .mag-thumbs {
grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
}
}
/* Cleaner preview tabs and overview surface. */
.preview-tabs {
display: flex;
gap: 4px;
margin: 0 22px;
padding: 4px !important;
border: 1px solid rgba(13, 38, 63, .10) !important;
border-radius: 8px;
background: rgba(13, 38, 63, .035) !important;
overflow-x: auto;
}
.preview-tab {
flex: 0 0 auto;
min-height: 34px;
margin: 0 !important;
padding: 0 12px !important;
border: 0 !important;
border-radius: 6px;
background: transparent !important;
color: var(--text-soft);
font-size: .86rem;
font-weight: 650;
line-height: 1;
white-space: nowrap;
box-shadow: none !important;
}
.preview-tab:hover {
background: rgba(255, 255, 255, .72) !important;
color: var(--ink);
}
.preview-tab.active {
background: #fff !important;
color: var(--ink) !important;
font-weight: 750;
box-shadow: 0 1px 2px rgba(13, 38, 63, .10) !important;
}
#tabMain .overview-facts {
gap: 18px;
}
#tabMain .overview-summary {
padding: 2px 0 0;
border: 0 !important;
border-radius: 0;
background: transparent !important;
}
#tabMain .overview-summary h2 {
font-size: 1.04rem;
}
#tabMain .overview-summary p {
margin-top: 6px;
}
#tabMain .overview-board {
overflow: visible;
border: 0 !important;
border-radius: 0;
background: transparent !important;
}
#tabMain .overview-board-head {
padding: 0 0 10px;
border-bottom: 1px solid rgba(13, 38, 63, .10);
background: transparent !important;
}
#tabMain .overview-fact-section h3 {
padding: 14px 0 6px;
}
#tabMain .overview-fact-grid {
padding: 0 0 16px;
}
body[data-theme="dark"] .preview-tabs {
background: rgba(255, 255, 255, .055) !important;
border-color: rgba(255, 255, 255, .12) !important;
}
body[data-theme="dark"] .preview-tab {
color: var(--mg-dark-ink-soft) !important;
}
body[data-theme="dark"] .preview-tab:hover {
background: rgba(255, 255, 255, .075) !important;
color: var(--mg-dark-ink) !important;
}
body[data-theme="dark"] .preview-tab.active {
background: rgba(243, 239, 232, .12) !important;
color: var(--mg-dark-ink) !important;
box-shadow: none !important;
}
body[data-theme="dark"] #tabMain .overview-summary,
body[data-theme="dark"] #tabMain .overview-board,
body[data-theme="dark"] #tabMain .overview-board-head {
background: transparent !important;
border-color: rgba(255, 255, 255, .12) !important;
}
/* Overview images should sit without an extra frame. */
#tabMain .mag-card {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body[data-theme="dark"] #tabMain .mag-card {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
/* Larger overview address without metadata row. */
#tabMain .overview-summary {
padding-bottom: 6px;
}
#tabMain .overview-summary h2 {
font-size: 1.22rem;
line-height: 1.22;
}
/* Cleaner text editor tabs without nested frame. */
#tabHemtxt .preview-text-editor,
#tabFort .preview-text-editor {
margin-top: 0;
padding: 0;
border: 0 !important;
border-radius: 0;
background: transparent !important;
}
#tabHemtxt .preview-text-editor label,
#tabFort .preview-text-editor label {
margin-bottom: 10px;
}
#tabHemtxt .preview-text-editor .txt-out,
#tabFort .preview-text-editor .txt-out {
margin-top: 0;
}
body[data-theme="dark"] #tabHemtxt .preview-text-editor,
body[data-theme="dark"] #tabFort .preview-text-editor {
background: transparent !important;
border-color: transparent !important;
}
/* Realtime indicator: neutral text, green status dot. */
.preview-realtime {
display: inline-flex !important;
color: var(--text-soft) !important;
}
.preview-realtime::before {
background: #16a34a !important;
}
body[data-theme="dark"] .preview-realtime {
color: var(--mg-dark-ink-soft) !important;
}
/* Cleaner object description editor in overview. */
#tabMain .preview-text-editor {
padding: 0 !important;
border: 0 !important;
border-radius: 0;
background: transparent !important;
}
#tabMain .preview-text-editor label {
margin-bottom: 10px;
}
#tabMain .preview-text-editor .txt-out {
margin-top: 0;
}
body[data-theme="dark"] #tabMain .preview-text-editor {
background: transparent !important;
border-color: transparent !important;
}
/* More space between primary and individual AI generation actions. */
.text-generator-panel .text-gen-actions .ai-choice-label {
margin-top: 8px;
}
/* Softer empty image state in overview. */
#tabMain .mag-hero:has(.mag-hero-empty) {
background: rgba(168, 119, 66, .075) !important;
border: 1px dashed rgba(168, 119, 66, .24);
}
#tabMain .mag-hero-empty {
color: var(--ink);
}
#tabMain .mag-hero-empty svg {
color: var(--brand-accent);
opacity: .78;
}
body[data-theme="dark"] #tabMain .mag-hero:has(.mag-hero-empty) {
background: rgba(201, 154, 95, .08) !important;
border-color: rgba(201, 154, 95, .20);
}
body[data-theme="dark"] #tabMain .mag-hero-empty {
color: var(--mg-dark-ink-soft) !important;
}
/* More breathing room between overview images and address. */
#tabMain .mag-card + .overview-facts {
margin-top: 22px;
}
/* Empty overview image state is a full-width, lower drop zone. */
#tabMain .mag-card:has(.mag-hero-empty) {
grid-template-columns: 1fr;
}
#tabMain .mag-card:has(.mag-hero-empty) .mag-hero {
width: 100% !important;
min-height: 118px;
aspect-ratio: auto !important;
}
#tabMain .mag-card:has(.mag-hero-empty) .mag-hero-empty {
min-height: 118px;
padding-top: 14px;
box-sizing: border-box;
}
/* Copy controls in preview text tabs. */
.text-copy-all-left {
display: none !important;
}
.preview-tabs {
align-items: center;
flex: 0 0 auto;
min-height: 52px;
overflow-y: visible;
}
.preview-copy-all-btn,
.preview-copy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px solid rgba(13, 38, 63, .14);
border-radius: 7px;
background: #fff;
color: var(--text);
font-family: var(--font);
font-weight: 650;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
white-space: nowrap;
}
.preview-copy-all-btn {
min-height: 34px;
padding: 0 12px;
margin-left: auto;
font-size: .84rem;
}
.preview-copy-btn {
min-height: 30px;
padding: 0 10px;
font-size: .78rem;
}
.preview-copy-all-btn svg,
.preview-copy-btn svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
flex: 0 0 auto;
}
.preview-copy-all-btn:hover,
.preview-copy-btn:hover {
background: rgba(13, 38, 63, .06);
border-color: rgba(13, 38, 63, .26);
color: var(--text);
}
.preview-field-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.preview-field-head label {
margin: 0 !important;
}
.preview-field-head + .txt-out {
margin-top: 0 !important;
}
@media (max-width: 760px) {
.preview-tabs {
flex-wrap: wrap;
overflow-x: visible;
}
.preview-copy-all-btn {
width: 100%;
margin-left: 0;
}
}
@media (max-width: 560px) {
.preview-field-head {
align-items: flex-start;
}
.preview-copy-btn {
width: 34px;
min-width: 34px;
padding: 0;
}
.preview-copy-btn span {
display: none;
}
}
body[data-theme="dark"] .preview-copy-all-btn,
body[data-theme="dark"] .preview-copy-btn {
background: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .14);
color: var(--text);
}
body[data-theme="dark"] .preview-copy-all-btn:hover,
body[data-theme="dark"] .preview-copy-btn:hover {
background: rgba(255, 255, 255, .10);
border-color: rgba(255, 255, 255, .24);
}
/* Slimmer focus ring for text fields. */
input:focus,
select:focus,
textarea:focus,
.kost-fl input:focus,
.pant-summa-input input:focus,
#imgFullscreen .ifs-custom textarea:focus {
border-color: var(--g) !important;
box-shadow: 0 0 0 1.5px rgba(201, 154, 95, .16) !important;
}
.txt-out[contenteditable="true"]:focus {
outline: 1px solid var(--g) !important;
outline-offset: 0;
border-color: var(--g) !important;
}
body[data-theme="dark"] input:focus,
body[data-theme="dark"] select:focus,
body[data-theme="dark"] textarea:focus,
body[data-theme="dark"] .kost-fl input:focus,
body[data-theme="dark"] .pant-summa-input input:focus,
body[data-theme="dark"] #imgFullscreen .ifs-custom textarea:focus {
border-color: rgba(201, 154, 95, .48) !important;
box-shadow: 0 0 0 1.5px rgba(201, 154, 95, .16) !important;
}
body[data-theme="dark"] .txt-out[contenteditable="true"]:focus {
outline-color: rgba(201, 154, 95, .55) !important;
border-color: rgba(201, 154, 95, .48) !important;
}
/* Text page must scroll vertically when panels stack on smaller screens. */
html,
body {
height: auto !important;
min-height: 100vh !important;
max-height: none !important;
overflow-y: auto !important;
}
/* In stacked layouts, keep the middle/preview panel reachable above the long editor panel. */
@media (max-width: 1280px) {
.preview-col {
order: -1;
}
}
/* Archive modal controls. */
.archive-file-btn {
min-height: 34px;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 7px;
padding: 0 12px !important;
border-radius: 7px !important;
border: 1px solid rgba(13, 38, 63, .14) !important;
background: #fff !important;
color: var(--text) !important;
font-size: .8rem !important;
font-weight: 700 !important;
line-height: 1;
cursor: pointer;
}
.archive-file-btn:hover {
background: rgba(13, 38, 63, .06) !important;
border-color: rgba(13, 38, 63, .26) !important;
}
.archive-close {
width: 30px;
height: 30px;
padding: 0 !important;
border: 0;
border-radius: 50%;
background: var(--mg-navy);
color: #fff;
cursor: pointer;
font-size: 1rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.archive-close:hover {
background: var(--mg-navy-2);
}
.text-inline-060 {
max-width: 440px;
color: var(--text-soft);
font-size: .78rem;
line-height: 1.45;
}
body[data-theme="dark"] .archive-file-btn {
background: rgba(255, 255, 255, .06) !important;
border-color: rgba(255, 255, 255, .14) !important;
color: var(--text) !important;
}
body[data-theme="dark"] .archive-file-btn:hover {
background: rgba(255, 255, 255, .10) !important;
border-color: rgba(255, 255, 255, .24) !important;
}
body[data-theme="dark"] .archive-close {
background: rgba(255, 255, 255, .15);
}
body[data-theme="dark"] .archive-close:hover {
background: rgba(255, 255, 255, .28);
}
/* Flow Grunduppgifter and Kostnader top-to-bottom in responsive columns. */
#tabMain .overview-fact-section--flow-columns .overview-fact-grid {
display: block;
column-count: 3;
column-gap: 34px;
}
#tabMain .overview-fact-section--flow-columns .overview-fact {
break-inside: avoid;
page-break-inside: avoid;
width: 100%;
}
@media (max-width: 1320px) {
#tabMain .overview-fact-section--flow-columns .overview-fact-grid {
column-count: 2;
}
}
@media (max-width: 760px) {
#tabMain .overview-fact-section--flow-columns .overview-fact-grid {
column-count: 1;
column-gap: 0;
}
}
/* Keep postal code compact and let city use the remaining width. */
.left-scroll .postal-row {
grid-template-columns: minmax(74px, 8ch) minmax(0, 1fr) !important;
}
#postalCode {
max-width: 8ch;
}
@media (max-width: 480px) {
.left-scroll .postal-row {
grid-template-columns: minmax(74px, 8ch) minmax(0, 1fr) !important;
}
}
@media (min-width: 1180px) {
#tabMain .overview-summary h2 {
font-size: 1.38rem;
line-height: 1.18;
}
}
/* Persistent save/next actions in the preview panel. */
.preview-panel {
position: relative;
}
.text-save-top-btn,
.text-save-ai-btn {
display: none !important;
}
.preview-next-row {
position: sticky;
bottom: 0;
z-index: 12;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding: 12px 22px 16px;
margin-top: 4px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--card-bg) 32%);
pointer-events: none;
}
.preview-save-btn,
.preview-next-btn {
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 0 16px 0 18px;
border-radius: 8px;
font-family: var(--font);
font-size: .9rem;
font-weight: 750;
line-height: 1;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
pointer-events: auto;
white-space: nowrap;
}
.preview-save-btn {
border: 1px solid var(--mg-navy-2);
background: var(--mg-navy-2);
color: #fff;
box-shadow: 0 8px 18px rgba(13, 38, 63, .16);
}
.preview-save-btn:hover {
background: var(--mg-navy);
border-color: var(--mg-navy);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(13, 38, 63, .22);
}
.preview-next-btn {
border: 1px solid var(--mg-navy);
background: var(--mg-navy);
color: #fff;
box-shadow: 0 8px 20px rgba(13, 38, 63, .18);
}
.preview-next-btn:hover {
background: var(--mg-navy-2);
border-color: var(--mg-navy-2);
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(13, 38, 63, .24);
}
.preview-next-btn svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
flex: 0 0 auto;
}
body[data-theme="dark"] .preview-next-row {
background: linear-gradient(180deg, rgba(21, 34, 51, 0), rgba(21, 34, 51, .96) 32%);
}
body[data-theme="dark"] .preview-save-btn {
background: #2f5f8f;
border-color: #2f5f8f;
color: #fff;
box-shadow: 0 10px 26px rgba(0, 0, 0, .24);
}
body[data-theme="dark"] .preview-save-btn:hover {
background: #3b73aa;
border-color: #3b73aa;
}
body[data-theme="dark"] .preview-next-btn {
background: var(--mg-dark-gold-light);
border-color: var(--mg-dark-gold-light);
color: var(--mg-navy);
box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}
body[data-theme="dark"] .preview-next-btn:hover {
background: #f3d7ab;
border-color: #f3d7ab;
}
@media (max-width: 1100px) {
.preview-next-row {
position: static;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
padding: 0 18px 18px;
margin-top: -4px;
background: transparent !important;
}
.preview-save-btn,
.preview-next-btn {
width: 100%;
}
}
@media (max-width: 560px) {
.preview-next-row {
grid-template-columns: 1fr;
}
}
/* Selected object context and picker for text.html. */
.text-object-context {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
margin-bottom: 12px;
padding: 14px;
border: 1px solid rgba(13, 38, 63, .14);
border-radius: var(--radius);
background: linear-gradient(135deg, rgba(13, 38, 63, .075), rgba(13, 38, 63, .035));
box-shadow: inset 3px 0 0 rgba(13, 38, 63, .18);
}
.text-object-context__main {
min-width: 0;
display: grid;
gap: 3px;
}
.text-object-context__kicker {
color: var(--text-soft);
font-size: 11px;
font-weight: 850;
letter-spacing: .04em;
line-height: 1;
text-transform: uppercase;
}
.text-object-context strong {
color: var(--ink);
font-size: .9rem;
font-weight: 750;
line-height: 1.25;
overflow-wrap: anywhere;
}
.text-object-context__main > span:last-child {
color: var(--text-soft);
font-size: .82rem;
font-weight: 600;
line-height: 1.35;
}
.text-object-context__button {
min-height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 12px;
border: 1px solid rgba(13, 38, 63, .14);
border-radius: 7px;
background: #fff;
color: var(--ink);
font-family: var(--font);
font-size: .8rem;
font-weight: 750;
cursor: pointer;
white-space: nowrap;
}
.text-object-context__button:hover {
background: rgba(13, 38, 63, .06);
border-color: rgba(13, 38, 63, .26);
}
.text-object-picker {
position: fixed;
inset: 0;
z-index: 9400;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(13, 38, 63, .46);
backdrop-filter: blur(6px);
}
.text-object-picker.open {
display: flex;
}
.text-object-picker__panel {
width: min(620px, 100%);
max-height: min(760px, calc(100vh - 48px));
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(13, 38, 63, .10);
border-radius: var(--radius);
background: #fff;
box-shadow: 0 24px 70px rgba(13, 38, 63, .24);
}
.text-object-picker__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 18px 20px 14px;
border-bottom: 1px solid rgba(13, 38, 63, .08);
}
.text-object-picker__head h2 {
margin: 0;
color: var(--ink);
font-size: 1.05rem;
line-height: 1.2;
}
.text-object-picker__head p {
margin: 5px 0 0;
color: var(--text-soft);
font-size: .86rem;
line-height: 1.4;
}
.text-object-picker__close {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border: 0;
border-radius: 50%;
background: var(--mg-navy);
color: #fff;
cursor: pointer;
font-size: 1rem;
}
.text-object-picker__search {
padding: 14px 20px;
}
.text-object-picker__search input {
width: 100%;
}
.text-object-picker__list {
display: grid;
gap: 8px;
padding: 0 20px 20px;
overflow-y: auto;
scrollbar-width: thin;
}
.text-object-picker__item,
.text-object-picker__empty {
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 12px 13px;
border: 1px solid rgba(13, 38, 63, .10);
border-radius: 8px;
background: rgba(255, 253, 249, .70);
color: var(--ink);
text-align: left;
}
.text-object-picker__item {
cursor: pointer;
}
.text-object-picker__item:hover,
.text-object-picker__item.active {
background: rgba(168, 119, 66, .075);
border-color: rgba(168, 119, 66, .24);
}
.text-object-picker__item-main {
min-width: 0;
display: grid;
gap: 4px;
}
/* Inline badges in the object picker title row. */
.text-object-picker__title-row {
min-width: 0;
display: flex;
align-items: center;
gap: 14px;
}
.text-object-picker__title-row .text-object-picker__address {
min-width: 0;
}
.text-object-picker__title-row .text-object-picker__badge {
flex: 0 0 auto;
}
.text-object-picker__address {
color: var(--ink);
font-size: .92rem;
font-weight: 750;
line-height: 1.25;
overflow-wrap: anywhere;
}
.text-object-picker__meta,
.text-object-picker__empty span {
color: var(--text-soft);
font-size: .8rem;
font-weight: 600;
line-height: 1.35;
}
.text-object-picker__status,
.text-object-picker__badge {
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 0 8px;
border-radius: 999px;
background: rgba(13, 38, 63, .07);
color: var(--ink);
font-size: .72rem;
font-weight: 800;
white-space: nowrap;
}
.text-object-picker__badge {
margin-left: 7px;
background: rgba(168, 119, 66, .14);
}
.text-object-picker__badge.is-test {
background: var(--mg-gold, #a87742);
color: #fff;
box-shadow: none;
}
@media (max-width: 560px) {
.text-object-context {
grid-template-columns: 1fr;
}
.text-object-context__button {
width: 100%;
}
.text-object-picker {
align-items: stretch;
padding: 12px;
}
.text-object-picker__panel {
max-height: calc(100vh - 24px);
}
.text-object-picker__item,
.text-object-picker__empty {
grid-template-columns: 1fr;
}
}
body[data-theme="dark"] .text-object-context,
body[data-theme="dark"] .text-object-picker__panel {
background: rgba(21, 34, 51, .96);
border-color: rgba(255, 255, 255, .13);
}
body[data-theme="dark"] .text-object-context strong,
body[data-theme="dark"] .text-object-picker__head h2,
body[data-theme="dark"] .text-object-picker__address,
body[data-theme="dark"] .text-object-picker__status {
color: var(--mg-dark-ink);
}
body[data-theme="dark"] .text-object-context__kicker,
body[data-theme="dark"] .text-object-context__main > span:last-child,
body[data-theme="dark"] .text-object-picker__head p,
body[data-theme="dark"] .text-object-picker__meta,
body[data-theme="dark"] .text-object-picker__empty span {
color: var(--mg-dark-ink-soft);
}
body[data-theme="dark"] .text-object-context__button,
body[data-theme="dark"] .text-object-picker__item,
body[data-theme="dark"] .text-object-picker__empty {
background: rgba(16, 25, 37, .58);
border-color: rgba(255, 255, 255, .12);
color: var(--mg-dark-ink);
}
body[data-theme="dark"] .text-object-context__button:hover,
body[data-theme="dark"] .text-object-picker__item:hover,
body[data-theme="dark"] .text-object-picker__item.active {
background: rgba(201, 154, 95, .10);
border-color: rgba(201, 154, 95, .28);
}
body[data-theme="dark"] .text-object-picker__status,
body[data-theme="dark"] .text-object-picker__badge {
background: rgba(255, 255, 255, .08);
}
/* Clean object picker modal rows. */
.text-object-picker {
background: rgba(13, 38, 63, .34);
}
.text-object-picker__panel {
width: min(760px, 100%);
border: 1px solid rgba(13, 38, 63, .12);
border-radius: 8px;
background: #fff;
box-shadow: 0 22px 68px rgba(13, 38, 63, .24);
}
.text-object-picker__head {
min-height: 74px;
align-items: center;
padding: 18px 20px;
border-bottom: 1px solid rgba(13, 38, 63, .10);
background: #fff;
}
.text-object-picker__head h2 {
font-size: 1rem;
font-weight: 800;
}
.text-object-picker__head p {
margin-top: 5px;
color: var(--text-soft);
font-size: .86rem;
}
.text-object-picker__close {
width: 38px;
height: 38px;
border: 1px solid rgba(13, 38, 63, .12);
background: #fff;
color: var(--ink);
font-size: 1.25rem;
font-weight: 500;
}
.text-object-picker__close:hover {
background: rgba(13, 38, 63, .045);
}
.text-object-picker__search {
padding: 14px 20px;
border-bottom: 1px solid rgba(13, 38, 63, .08);
background: #fff;
}
.text-object-picker__search input {
min-height: 42px;
border-radius: 6px;
background: #fff;
}
.text-object-picker__list {
gap: 0;
padding: 0 0 20px;
background: #fff;
}
.text-object-picker__item,
.text-object-picker__empty {
min-height: 62px;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px;
padding: 13px 20px 13px 28px;
border: 0;
border-bottom: 1px solid rgba(13, 38, 63, .08);
border-radius: 0;
background: #fff;
box-shadow: none;
}
.text-object-picker__item:hover,
.text-object-picker__item.active {
background: rgba(13, 38, 63, .045);
border-color: rgba(13, 38, 63, .08);
}
.text-object-picker__address {
color: var(--ink);
font-size: .94rem;
font-weight: 800;
line-height: 1.22;
}
.text-object-picker__meta {
color: var(--text-soft);
font-size: .84rem;
font-weight: 500;
line-height: 1.35;
}
.text-object-picker__status-wrap {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
min-width: 98px;
}
.text-object-picker__status-wrap:empty {
display: none;
}
.text-object-picker__status {
min-height: 0;
padding: 0;
border-radius: 0;
background: transparent;
color: var(--text-soft);
font-size: .84rem;
font-weight: 500;
}
.text-object-picker__badge {
min-height: 24px;
margin-left: 0;
padding: 0 10px;
border-radius: 999px;
background: rgba(42, 117, 148, .12);
color: #2b6f8f;
font-size: .75rem;
font-weight: 800;
line-height: 1;
}
.text-object-picker__badge.is-test {
background: var(--mg-gold, #a87742);
color: #fff;
box-shadow: none;
}
@media (max-width: 560px) {
.text-object-picker__item,
.text-object-picker__empty {
grid-template-columns: 1fr;
gap: 7px;
}
.text-object-picker__status-wrap {
justify-content: flex-start;
min-width: 0;
}
}
body[data-theme="dark"] .text-object-picker__panel,
body[data-theme="dark"] .text-object-picker__head,
body[data-theme="dark"] .text-object-picker__search,
body[data-theme="dark"] .text-object-picker__list,
body[data-theme="dark"] .text-object-picker__item,
body[data-theme="dark"] .text-object-picker__empty {
background: rgba(21, 34, 51, .98);
}
body[data-theme="dark"] .text-object-picker__close {
background: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .14);
color: var(--mg-dark-ink);
}
body[data-theme="dark"] .text-object-picker__item:hover,
body[data-theme="dark"] .text-object-picker__item.active {
background: rgba(255, 255, 255, .055);
}
/* Object picker stays neutral white across themes. */
body[data-theme="dark"] .text-object-picker__panel,
body[data-theme="dark"] .text-object-picker__head,
body[data-theme="dark"] .text-object-picker__search,
body[data-theme="dark"] .text-object-picker__list,
body[data-theme="dark"] .text-object-picker__item,
body[data-theme="dark"] .text-object-picker__empty {
background: #fff !important;
border-color: rgba(13, 38, 63, .10) !important;
}
body[data-theme="dark"] .text-object-picker__head h2,
body[data-theme="dark"] .text-object-picker__address,
body[data-theme="dark"] .text-object-picker__status {
color: var(--ink) !important;
}
body[data-theme="dark"] .text-object-picker__head p,
body[data-theme="dark"] .text-object-picker__meta,
body[data-theme="dark"] .text-object-picker__empty span {
color: var(--text-soft) !important;
}
body[data-theme="dark"] .text-object-picker__close {
background: #fff !important;
border-color: rgba(13, 38, 63, .12) !important;
color: var(--ink) !important;
}
body[data-theme="dark"] .text-object-picker__item:hover,
body[data-theme="dark"] .text-object-picker__item.active {
background: rgba(13, 38, 63, .045) !important;
border-color: rgba(13, 38, 63, .08) !important;
}
/* Object picker white modal fixed text colors. */
.text-object-picker__panel,
.text-object-picker__item,
.text-object-picker__empty,
.text-object-picker__close {
color: #0d263f !important;
}
.text-object-picker__head h2,
.text-object-picker__address,
.text-object-picker__status,
body[data-theme="dark"] .text-object-picker__head h2,
body[data-theme="dark"] .text-object-picker__address,
body[data-theme="dark"] .text-object-picker__status,
body[data-theme="dark"] .text-object-picker__close {
color: #0d263f !important;
}
.text-object-picker__head p,
.text-object-picker__meta,
.text-object-picker__empty span,
body[data-theme="dark"] .text-object-picker__head p,
body[data-theme="dark"] .text-object-picker__meta,
body[data-theme="dark"] .text-object-picker__empty span {
color: #5d6f85 !important;
}
/* Keep object picker modal height stable while filtering. */
.text-object-picker__panel {
height: min(560px, calc(100vh - 48px));
}
.text-object-picker__list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.text-object-picker__empty {
min-height: 100%;
align-content: start;
}
@media (max-width: 560px) {
.text-object-picker__panel {
height: calc(100vh - 24px);
}
}
/* Keep selected object card aligned with the reference page in all themes. */
body[data-theme="dark"] .text-object-context {
border-color: rgba(13, 38, 63, .14);
background: linear-gradient(135deg, rgba(13, 38, 63, .075), rgba(13, 38, 63, .035));
box-shadow: inset 3px 0 0 rgba(13, 38, 63, .18);
}
body[data-theme="dark"] .text-object-context strong {
color: var(--ink);
}
body[data-theme="dark"] .text-object-context__kicker,
body[data-theme="dark"] .text-object-context__main > span:last-child {
color: var(--text-soft);
}
body[data-theme="dark"] .text-object-context__button {
background: #fff;
border-color: rgba(13, 38, 63, .14);
color: var(--ink);
}
body[data-theme="dark"] .text-object-context__button:hover {
background: rgba(13, 38, 63, .06);
border-color: rgba(13, 38, 63, .26);
}
/* Hide legacy dummy loader while keeping it available for future use. */
.dummy-loader {
display: none !important;
}
/* Let the preview panel fill the available viewport height on desktop. */
@media (min-width: 1101px) {
.preview-sticky {
height: calc(100vh - 102px);
}
.preview-panel {
height: 100%;
display: flex;
flex-direction: column;
}
.preview-body {
flex: 1 0 auto;
}
}
/* Keep object picker test badge aligned with pilot styling in dark mode. */
body[data-theme="dark"] .text-object-picker__badge.is-test {
background: var(--mg-gold, #a87742);
color: #fff;
box-shadow: none;
}
/* Refined empty overview image state. */
#tabMain .mag-hero:has(.mag-hero-empty) {
background:
linear-gradient(135deg, rgba(13, 38, 63, .055), rgba(13, 38, 63, .025)) !important;
border: 1px dashed rgba(13, 38, 63, .18);
}
#tabMain .mag-hero-empty {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
color: var(--text);
font-family: var(--font);
font-size: .88rem;
font-style: normal;
font-weight: 650;
line-height: 1.25;
text-align: center;
}
#tabMain .mag-hero-empty svg {
width: 30px;
height: 30px;
margin: 0;
color: var(--mg-navy);
opacity: .72;
}
body[data-theme="dark"] #tabMain .mag-hero:has(.mag-hero-empty) {
background:
linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035)) !important;
border-color: rgba(255, 255, 255, .16);
}
body[data-theme="dark"] #tabMain .mag-hero-empty {
color: var(--mg-dark-ink);
}
body[data-theme="dark"] #tabMain .mag-hero-empty svg {
color: var(--mg-dark-ink);
opacity: .68;
}
/* Final polish for empty overview image state contrast. */
#tabMain .mag-hero:has(.mag-hero-empty) {
background:
linear-gradient(135deg, rgba(13, 38, 63, .065), rgba(13, 38, 63, .032)) !important;
border-color: rgba(13, 38, 63, .22) !important;
}
body[data-theme="dark"] #tabMain .mag-hero:has(.mag-hero-empty) {
background:
linear-gradient(135deg, rgba(21, 34, 51, .92), rgba(16, 25, 37, .72)) !important;
border-color: rgba(216, 224, 232, .18) !important;
}
body[data-theme="dark"] #tabMain .mag-hero-empty {
color: rgba(244, 247, 250, .86) !important;
}
body[data-theme="dark"] #tabMain .mag-hero-empty svg {
color: rgba(244, 247, 250, .78) !important;
}
/* Hide redundant open-object button; kept in markup for possible reuse. */
.text-open-object-btn {
display: none !important;
}
/* Hide the now-empty legacy object actions row so the left panel aligns with preview. */
.left-scroll > .text-actions-row {
display: none !important;
margin-bottom: 0 !important;
}
/* Delete action for saved objects in the object picker. */
.text-object-picker__row {
display: grid;
grid-template-columns: minmax(0, 1fr) 62px;
align-items: stretch;
border-bottom: 1px solid rgba(13, 38, 63, .08);
background: #fff;
}
.text-object-picker__row .text-object-picker__item {
border-bottom: 0;
padding-right: 12px;
}
.text-object-picker__delete {
width: 34px;
height: 34px;
min-height: 34px;
align-self: center;
justify-self: center;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid transparent;
border-radius: 999px;
background: transparent;
color: #9a3d3d;
cursor: pointer;
box-shadow: none;
}
.text-object-picker__delete svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.text-object-picker__delete:hover,
.text-object-picker__delete:focus-visible {
background: rgba(163, 61, 61, .08);
border-color: rgba(163, 61, 61, .18);
color: #7f1d1d;
}
.text-object-picker__delete:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(163, 61, 61, .12);
}
@media (max-width: 560px) {
.text-object-picker__row {
grid-template-columns: minmax(0, 1fr) 50px;
}
.text-object-picker__title-row {
gap: 8px;
flex-wrap: wrap;
}
}
body[data-theme="dark"] .text-object-picker__delete {
background: transparent !important;
border-color: transparent !important;
color: #9a3d3d !important;
}
body[data-theme="dark"] .text-object-picker__delete:hover,
body[data-theme="dark"] .text-object-picker__delete:focus-visible {
background: rgba(163, 61, 61, .08) !important;
border-color: rgba(163, 61, 61, .18) !important;
color: #7f1d1d !important;
}
/* Empty overview image state must span the full overview width. */
#tabMain .mag-card:has(.mag-hero-empty) {
display: block !important;
grid-template-columns: 1fr !important;
}
#tabMain .mag-card:has(.mag-hero-empty) .mag-hero {
grid-column: 1 / -1 !important;
width: 100% !important;
max-width: none !important;
min-height: 118px;
aspect-ratio: auto !important;
}
#tabMain .mag-card:has(.mag-hero-empty) .mag-hero-empty {
width: 100%;
min-height: 118px;
}
/* Empty overview image state must span the full overview width, including after object switches. */
#tabMain .mag-card.mag-card--empty-images {
display: block !important;
grid-template-columns: 1fr !important;
}
#tabMain .mag-card.mag-card--empty-images .mag-hero {
grid-column: 1 / -1 !important;
width: 100% !important;
max-width: none !important;
min-height: 118px;
aspect-ratio: auto !important;
}
#tabMain .mag-card.mag-card--empty-images .mag-hero-empty {
width: 100%;
min-height: 118px;
}
/* Empty state overrides the single-image 360px rule because thumbnails are also hidden. */
#tabMain .mag-card.mag-card--empty-images:has(.mag-thumbs[style*="none"]) {
justify-content: stretch !important;
}
#tabMain .mag-card.mag-card--empty-images:has(.mag-thumbs[style*="none"]) .mag-hero {
width: 100% !important;
max-width: none !important;
}
/* Prevent page-level scroll on desktop text workspace. */
@media (min-width: 1101px) {
html,
body {
height: 100vh !important;
min-height: 100vh !important;
max-height: 100vh !important;
overflow-y: hidden !important;
}
.app {
height: calc(100dvh - 87px);
padding-bottom: .75rem;
grid-template-columns: minmax(390px, 520px) minmax(0, 1fr) !important;
align-items: stretch !important;
overflow: hidden;
}
.left-scroll {
position: sticky !important;
top: 102px !important;
height: 100%;
max-height: 100% !important;
min-height: 0;
overflow-y: auto !important;
overflow-x: hidden !important;
padding-right: .4rem;
}
.preview-col,
.preview-sticky,
.preview-panel {
height: 100%;
max-height: 100% !important;
min-height: 0;
}
.preview-col {
order: 0 !important;
}
.preview-panel {
overflow-y: auto !important;
overflow-x: hidden !important;
scrollbar-width: thin;
scrollbar-color: rgba(13, 38, 63, .18) transparent;
}
}
/* Shared help sidebar polish 2026-07-01 */
#helpPanel {
width: min(430px, 100vw) !important;
max-width: 100vw !important;
height: 100dvh !important;
background: #fff !important;
border-left: 1px solid rgba(13, 38, 63, .12) !important;
box-shadow: -24px 0 60px rgba(13, 38, 63, .18) !important;
overflow: hidden !important;
}
#helpPanel .hp-header {
min-height: 82px !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) 38px !important;
align-items: center !important;
gap: 14px !important;
padding: 20px 22px !important;
border-bottom: 0 !important;
background: var(--mg-navy, #0d263f) !important;
color: #fff !important;
}
#helpPanel .hp-header-icon {
display: none !important;
}
#helpPanel .hp-header-text,
#helpPanel .sm-static-005 {
min-width: 0 !important;
}
#helpPanel .hp-header-title,
#helpPanel .sm-static-006 {
margin: 0 !important;
color: #fff !important;
font-family: var(--font, 'Inter', sans-serif) !important;
font-size: 1.03rem !important;
font-weight: 800 !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
}
#helpPanel .hp-header-sub,
#helpPanel .sm-static-007 {
margin-top: .25rem !important;
color: rgba(255, 255, 255, .72) !important;
font-family: var(--font, 'Inter', sans-serif) !important;
font-size: .82rem !important;
font-weight: 600 !important;
line-height: 1.35 !important;
}
#helpPanel .hp-close {
width: 38px !important;
height: 38px !important;
margin-left: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid rgba(255, 255, 255, .24) !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, .08) !important;
color: #fff !important;
box-shadow: none !important;
cursor: pointer !important;
}
#helpPanel .hp-close:hover {
background: rgba(255, 255, 255, .14) !important;
border-color: rgba(255, 255, 255, .36) !important;
}
#helpPanel .hp-body,
#hpBody.sm-static-009,
#hpBody {
flex: 1 1 auto !important;
padding: 22px !important;
overflow: auto !important;
background: #fff !important;
color: var(--text, var(--mg-navy, #0d263f)) !important;
font-family: var(--font, 'Inter', sans-serif) !important;
font-size: .9rem !important;
line-height: 1.62 !important;
scrollbar-width: thin;
scrollbar-color: rgba(13, 38, 63, .24) transparent;
}
#helpPanel .hp-body h4,
#hpBody h4 {
margin: 1.2rem 0 .45rem !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
color: var(--mg-navy, #0d263f) !important;
font-family: var(--font, 'Inter', sans-serif) !important;
font-size: .78rem !important;
font-weight: 800 !important;
letter-spacing: .08em !important;
line-height: 1.25 !important;
text-transform: uppercase !important;
}
#helpPanel .hp-body h4:first-child,
#hpBody h4:first-child {
margin-top: 0 !important;
}
#helpPanel .hp-body p,
#helpPanel .hp-body li,
#hpBody p,
#hpBody li {
color: var(--text, var(--mg-navy, #0d263f)) !important;
}
#helpPanel .hp-body .hp-tip,
#helpPanel .hp-body .hp-warn,
#hpBody .hp-tip,
#hpBody .hp-warn {
margin: 1rem 0 !important;
padding: .82rem .95rem !important;
border: 1px solid rgba(168, 119, 66, .18) !important;
border-left: 3px solid var(--mg-gold, #a87742) !important;
border-radius: 8px !important;
background: rgba(168, 119, 66, .08) !important;
color: var(--mg-navy, #0d263f) !important;
font-size: .84rem !important;
line-height: 1.5 !important;
}
#helpPanel .hp-divider,
#helpPanel .sm-static-010 {
display: grid !important;
grid-template-columns: 1fr auto 1fr !important;
align-items: center !important;
gap: .65rem !important;
padding: 0 22px 12px !important;
border-top: 0 !important;
background: #fff !important;
}
#helpPanel .hp-divider::before,
#helpPanel .hp-divider::after,
#helpPanel .sm-static-011 {
content: '' !important;
height: 1px !important;
background: rgba(13, 38, 63, .10) !important;
}
#helpPanel .hp-divider span,
#helpPanel .sm-static-012 {
color: var(--mg-ink-soft-alt, #5b6577) !important;
font-size: .72rem !important;
font-weight: 800 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
#helpPanel .hp-chat-area,
#helpPanel .sm-static-013 {
flex: 0 0 auto !important;
padding: 0 22px 20px !important;
border-top: 0 !important;
background: #fff !important;
}
#helpPanel .hp-messages,
#hpMessages.sm-static-014,
#hpMessages {
max-height: 150px !important;
display: flex !important;
flex-direction: column !important;
gap: .45rem !important;
margin-bottom: .75rem !important;
padding: 0 .25rem 0 0 !important;
overflow: auto !important;
scrollbar-width: thin;
scrollbar-color: rgba(13, 38, 63, .22) transparent;
}
#helpPanel .hp-messages:empty,
#hpMessages:empty,
#hpMessages.sm-static-014:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
#helpPanel .hp-msg,
.hp-chat-bubble {
max-width: 88% !important;
padding: .56rem .72rem !important;
border-radius: 10px !important;
font-family: var(--font, 'Inter', sans-serif) !important;
font-size: .8rem !important;
line-height: 1.48 !important;
}
#helpPanel .hp-msg.bot,
.hp-chat-bubble--bot {
align-self: flex-start !important;
background: #f8fafc !important;
border: 1px solid rgba(13, 38, 63, .10) !important;
color: var(--mg-navy, #0d263f) !important;
}
#helpPanel .hp-msg.user,
.hp-chat-bubble--user {
align-self: flex-end !important;
background: rgba(168, 119, 66, .08) !important;
border: 1px solid rgba(168, 119, 66, .18) !important;
color: var(--mg-navy, #0d263f) !important;
}
#helpPanel .hp-suggestions,
#hpSuggestions.sm-static-015 {
display: flex !important;
flex-wrap: wrap !important;
gap: .45rem !important;
margin-bottom: .75rem !important;
padding: 0 !important;
}
#helpPanel .hp-sugg,
.hp-suggestion {
display: inline-flex !important;
align-items: center !important;
min-height: 30px !important;
padding: .35rem .72rem !important;
border: 1px solid rgba(13, 38, 63, .14) !important;
border-radius: 999px !important;
background: #fff !important;
color: var(--mg-navy, #0d263f) !important;
font-family: var(--font, 'Inter', sans-serif) !important;
font-size: .73rem !important;
font-weight: 750 !important;
}
#helpPanel .hp-sugg:hover,
.hp-suggestion:hover {
background: rgba(13, 38, 63, .06) !important;
border-color: rgba(13, 38, 63, .24) !important;
color: var(--mg-navy, #0d263f) !important;
}
#helpPanel .hp-input-row,
#helpPanel .sm-static-016 {
display: flex !important;
gap: .5rem !important;
padding: 0 !important;
border-top: 0 !important;
}
#helpPanel .hp-input-row input,
#helpPanel .sm-static-017 {
min-height: 38px !important;
flex: 1 1 auto !important;
padding: 0 .85rem !important;
border: 1px solid rgba(13, 38, 63, .16) !important;
border-radius: 8px !important;
background: #fff !important;
color: var(--mg-navy, #0d263f) !important;
font-family: var(--font, 'Inter', sans-serif) !important;
font-size: .84rem !important;
outline: none !important;
}
#helpPanel .hp-send,
#helpPanel .sm-static-018 {
width: 38px !important;
height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 38px !important;
border: 1px solid var(--mg-navy, #0d263f) !important;
border-radius: 8px !important;
background: var(--mg-navy, #0d263f) !important;
color: #fff !important;
}
body[data-theme="dark"] #helpPanel,
body[data-theme="dark"] #helpPanel .hp-body,
body[data-theme="dark"] #hpBody,
body[data-theme="dark"] #helpPanel .hp-divider,
body[data-theme="dark"] #helpPanel .sm-static-010,
body[data-theme="dark"] #helpPanel .hp-chat-area,
body[data-theme="dark"] #helpPanel .sm-static-013 {
background: var(--mg-dark-surface, #152233) !important;
border-color: rgba(255, 255, 255, .12) !important;
}
body[data-theme="dark"] #helpPanel .hp-header {
background: #0d263f !important;
}
body[data-theme="dark"] #helpPanel .hp-body h4,
body[data-theme="dark"] #hpBody h4,
body[data-theme="dark"] #helpPanel .hp-body p,
body[data-theme="dark"] #helpPanel .hp-body li,
body[data-theme="dark"] #hpBody p,
body[data-theme="dark"] #hpBody li,
body[data-theme="dark"] #helpPanel .hp-msg.bot,
body[data-theme="dark"] .hp-chat-bubble--bot,
body[data-theme="dark"] #helpPanel .hp-msg.user,
body[data-theme="dark"] .hp-chat-bubble--user {
color: var(--mg-dark-ink, #e8eef4) !important;
}
body[data-theme="dark"] #helpPanel .hp-msg.bot,
body[data-theme="dark"] .hp-chat-bubble--bot,
body[data-theme="dark"] #helpPanel .hp-input-row input,
body[data-theme="dark"] #helpPanel .sm-static-017,
body[data-theme="dark"] #helpPanel .hp-sugg,
body[data-theme="dark"] .hp-suggestion {
background: rgba(255, 255, 255, .06) !important;
border-color: rgba(255, 255, 255, .14) !important;
color: var(--mg-dark-ink, #e8eef4) !important;
}
body[data-theme="dark"] #helpPanel .hp-msg.user,
body[data-theme="dark"] .hp-chat-bubble--user,
body[data-theme="dark"] #helpPanel .hp-body .hp-tip,
body[data-theme="dark"] #helpPanel .hp-body .hp-warn,
body[data-theme="dark"] #hpBody .hp-tip,
body[data-theme="dark"] #hpBody .hp-warn {
background: rgba(201, 154, 95, .10) !important;
border-color: rgba(201, 154, 95, .24) !important;
}
/* Text page object switch button polish 2026-07-01 */
.text-object-context__button {
min-height: 38px !important;
padding: 0 14px !important;
border-color: rgba(13, 38, 63, .24) !important;
background: #fff !important;
color: #0d263f !important;
font-size: .8rem !important;
font-weight: 850 !important;
box-shadow: 0 1px 0 rgba(13, 38, 63, .05) !important;
}
.text-object-context__button:hover {
background: rgba(13, 38, 63, .055) !important;
border-color: rgba(13, 38, 63, .34) !important;
color: #0d263f !important;
box-shadow: none !important;
}
body[data-theme="dark"] .text-object-context__button {
background: #fff !important;
border-color: rgba(13, 38, 63, .24) !important;
color: #0d263f !important;
}
body[data-theme="dark"] .text-object-context__button:hover {
background: rgba(13, 38, 63, .055) !important;
border-color: rgba(13, 38, 63, .34) !important;
color: #0d263f !important;
}
/* Clean text page panel surfaces 2026-07-01 */
.left-scroll > .panel,
.preview-panel {
box-shadow: none !important;
}
body[data-theme="dark"] .left-scroll > .panel,
body[data-theme="dark"] .preview-panel {
box-shadow: none !important;
}
/* ─── Fritext-först (fas 1): flikar + underlagsruta + källor + inline-granskning ─── */
.mgf-tabs{display:flex;gap:.4rem;margin:0 0 .8rem}
.mgf-tab{flex:1;font-family:inherit;font-size:.9rem;font-weight:600;padding:.6rem;border:0.5px solid var(--line,#e6e0d4);border-radius:9px;background:transparent;color:var(--muted,#657385);cursor:pointer}
.mgf-tab-on{background:#0d263f;color:#fff;border-color:#0d263f}
.mgf-panel{margin:0 0 1rem}
.mgf-lbl{display:block;font-size:.8rem;color:var(--muted,#657385);margin:.6rem 0 .3rem;font-weight:600}
.mgf-opt{font-weight:400;font-style:italic}
.mgf-underlag{width:100%;min-height:130px;border:0.5px solid var(--line,#e6e0d4);border-radius:9px;padding:.7rem .8rem;font-family:inherit;font-size:.9rem;line-height:1.55;box-sizing:border-box;resize:vertical}
.mgf-instr{width:100%;border:0.5px solid var(--line,#e6e0d4);border-radius:9px;padding:.55rem .8rem;font-family:inherit;font-size:.9rem;box-sizing:border-box}
.mgf-fill{margin-top:.8rem;width:100%;font-family:inherit;font-size:.95rem;font-weight:700;padding:.7rem;border:0;border-radius:9px;background:#0d263f;color:#fff;cursor:pointer}
.mgf-fill:hover{background:#1b3a5c}
.mgf-fill:disabled{opacity:.6;cursor:default}
.mgf-sources{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin:.8rem 0 0}
.mgf-src-lbl{font-size:.76rem;color:var(--muted,#657385)}
.mgf-src{font-family:inherit;font-size:.8rem;padding:.35rem .7rem;border-radius:999px;border:0.5px solid var(--line,#e6e0d4);background:transparent;color:var(--muted,#657385);cursor:pointer}
.mgf-src-on{background:#0d263f;color:#fff;border-color:#0d263f}
.mgf-src-off{opacity:.5;cursor:default}
.mgf-urlrow{display:flex;gap:.4rem;margin:.6rem 0 0}
.mgf-urlrow .mgf-instr{margin:0}
.mgf-urlrow button{white-space:nowrap;font-family:inherit;font-size:.82rem;font-weight:600;padding:.35rem .9rem;border-radius:9px;border:0;background:#0d263f;color:#fff;cursor:pointer}
.mgf-summary{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 .6rem}
.mgf-stat{font-size:.8rem;font-weight:600;padding:.3rem .7rem;border-radius:999px;background:#f1efe8;color:#5f5e5a}
.mgf-stat.mgf-ok{background:#e1f5ee;color:#0f6e56}
.mgf-stat.mgf-warn{background:#faeeda;color:#854f0b}
.mgf-missing{margin:.6rem 0 0;padding:.7rem .8rem;border:0.5px solid var(--line,#e6e0d4);border-radius:9px}
.mgf-missing-lbl{font-size:.8rem;color:var(--muted,#657385);margin-bottom:.4rem}
.mgf-miss{display:inline-block;font-size:.78rem;padding:.25rem .6rem;margin:.15rem;border-radius:999px;background:#f1efe8;color:#5f5e5a}
.mgf-hint{font-size:.76rem;color:var(--muted,#657385);margin-top:.7rem;line-height:1.5}
body[data-theme="dark"] .mgf-tab-on,body[data-theme="dark"] .mgf-src-on{background:#3f6ea8;border-color:#3f6ea8}
body[data-theme="dark"] .mgf-fill{background:#3f6ea8}
body[data-theme="dark"] .mgf-fill:hover{background:#4d80bd}
body[data-theme="dark"] .mgf-urlrow button{background:#3f6ea8}
body[data-theme="dark"] .mgf-underlag,body[data-theme="dark"] .mgf-instr{background:#0f1d2c;color:#e8edf2}
body[data-theme="dark"] .mgf-stat{background:#1b2b3d;color:#9aa8ba}