/* *{box-sizing:border-box;margin:0;padding:0} */
header{background:rgba(255,253,249,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--mg-line);padding:0;height:88px;display:flex;align-items:center;position:sticky;top:0;z-index:200}
.header-inner{max-width:1740px;margin:0 auto;width:100%;padding:0 1.5rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
.header-left{display:flex;align-items:center;gap:.9rem;min-width:0}
.header-center{display:flex;align-items:center;gap:.4rem;justify-self:center}
.header-right{display:flex;align-items:center;gap:.55rem;justify-self:end}
.mg-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit;flex-shrink:0}
.mg-brand .mg-hex{flex-shrink:0;transition:transform .3s ease}
.mg-brand:hover .mg-hex{transform:rotate(18deg)}
.mg-wordmark{font-family:'Cormorant Garamond',Georgia,serif;font-size:2rem;font-weight:600;letter-spacing:0;color:var(--mg-navy);line-height:1;white-space:nowrap}
.mg-wordmark em{font-style:italic;color:var(--mg-gold);font-weight:500}
.h-logo{height:38px;object-fit:contain;display:none}.h-logo.show{display:block}
.h-name,.h-sub,.h-subtitle{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.18rem;color:#5b6577;padding-left:14px;border-left:1px solid var(--mg-line);white-space:nowrap;font-weight:400}
.badge-pilot{background:var(--mg-gold);color:#fff;font-size:.72rem;font-weight:700;padding:.35rem .8rem;border-radius:20px;white-space:nowrap;letter-spacing:.04em;}
.badge{font-family:inherit;font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--mg-gold);padding:5px 12px;border:1px solid var(--mg-gold);border-radius:999px}

.settings-btn{background:rgba(255,255,255,.95) !important;border:1px solid var(--mg-line) !important;border-radius:50% !important;width:46px !important;height:46px !important;display:flex !important;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .15s;padding:0 !important}
.settings-btn:hover{background:#fff !important;transform:rotate(30deg);border-color:var(--mg-gold) !important}
.settings-btn svg{width:21px !important;height:21px !important;color:var(--mg-navy)}

@media(max-width:1200px){
  .header-center{display:none}
}
/* Help icons + content blocks */
.ph-help{background:rgba(13,38,63,.12);border:1px solid rgba(13,38,63,.45);color:var(--mg-navy);border-radius:50%;width:22px;height:22px;font-size:.82rem;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;margin-left:.45rem;flex-shrink:0;transition:all .18s;line-height:1;padding:0}
.ph-help:hover{background:var(--mg-navy);color:#fff;border-color:var(--mg-navy);transform:scale(1.12);box-shadow:0 2px 6px rgba(13,38,63,.4)}
#hpBody h4{font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mg-gold);margin:1.05rem 0 .4rem;padding-bottom:.3rem;border-bottom:1px solid var(--mg-line)}
#hpBody h4:first-child{margin-top:0}
#hpBody p{margin-bottom:.6rem;color:var(--mg-navy)}
#hpBody ul{padding-left:1.2rem;margin-bottom:.6rem}
#hpBody li{margin-bottom:.3rem;color:var(--mg-navy)}
#hpBody .hp-tip{background:linear-gradient(135deg,rgba(168,119,66,.1) 0%,rgba(168,119,66,.04) 100%);border-left:3px solid var(--mg-gold);border-radius:0 8px 8px 0;padding:.65rem .85rem;font-size:.86rem;color:var(--mg-navy);margin:.7rem 0}
#hpBody .hp-warn{background:linear-gradient(135deg,rgba(168,119,66,.14) 0%,rgba(168,119,66,.05) 100%);border-left:3px solid var(--mg-gold);border-radius:0 8px 8px 0;padding:.65rem .85rem;font-size:.86rem;color:var(--mg-navy);margin:.7rem 0}

.app{max-width:1820px;margin:0 auto;padding:1.5rem 1.5rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:1.25rem;align-items:start;width:100%;box-sizing:border-box}
/* DOM-ordning är: pubBanner, VÄNSTER (bilder), HÖGER (text), MITTEN (preview).
   CSS order placerar dem visuellt: bilder | preview | text — konsekvent med broschyr-tänket. */
.app > div:nth-child(2){order:1}  /* VÄNSTER bilder */
.app > div:nth-child(3){order:3}  /* HÖGER text */
.app > div:nth-child(4){order:2}  /* MITTEN preview */
@media(max-width:1100px){
  /* Stack till 1 kolumn på smala skärmar — naturlig ordning: bilder → preview → text */
  .app{grid-template-columns:1fr}
}
@media(max-width:700px){
  /* HÅRD MOBIL-OVERRIDE — allt med !important för att eliminera kaskad-strul */
  html,body{overflow-x:hidden !important;width:100% !important;max-width:100vw !important}
  body{margin:0 !important}
  header{height:64px !important;padding:0 .8rem !important}
  .h-sub{display:none !important}
  .mg-wordmark{font-size:1.25rem !important}
  .mg-brand .mg-hex{width:34px !important;height:34px !important}
  .h-mobile-hide{display:none !important}
  .app{padding:.6rem !important;gap:.7rem !important;width:100% !important;max-width:100vw !important;box-sizing:border-box !important}
  .panel{max-width:100% !important;box-sizing:border-box !important}
  .pb{padding:.7rem !important;box-sizing:border-box !important}
  .ph{padding:.5rem .7rem !important;font-size:.74rem !important;flex-wrap:wrap !important;box-sizing:border-box !important}
  /* Content tabs i 3+3-layout (Bild/Carousel/Video och Story/Storytelling/Video-länk) */
  .content-tabs{grid-template-columns:repeat(3,1fr) !important;gap:.35rem !important;width:100% !important}
  .ctab{font-size:.66rem !important;padding:.65rem .15rem .45rem !important;min-width:0 !important;overflow:hidden !important;min-height:66px !important;gap:.3rem !important}
  .ctab-icon{font-size:1.5rem !important}
  /* Förhindra att flex/grid-children tvingar bredd */
  .panel,.pb,.ph,.app>*{min-width:0 !important}
  /* Knappar wrappar istället för att spränga */
  .btn-row{flex-wrap:wrap !important}
  /* Story-preview tar inte hela höjden */
  .story-preview{max-height:280px}
  /* Editor är tightare */
  .editor-canvas-wrap{max-width:100% !important}
  /* Bilder från pilotappen-rubrik kan wrappa */
  #pilotImgsSection > div:first-child{flex-wrap:wrap !important;gap:.3rem !important}
  /* Pilot-grid: 3 kolumner på mobil med proportionellt mindre höjd */
  #pilotImgGrid{grid-template-columns:repeat(3,1fr) !important;gap:.35rem !important}
  #pilotImgGrid > div > img{height:95px !important}
}

/* Hamburger för mobil */
.menu-toggle{display:none;background:var(--paper,#f4f1ec);border:1px solid var(--mg-line);color:var(--text,var(--mg-navy));cursor:pointer;padding:5px;border-radius:6px;width:34px;height:34px;align-items:center;justify-content:center;transition:all .15s}
.menu-toggle:hover{background:#fff;border-color:var(--mg-gold)}
/* Header-knappar hover-effekt */
header .h-mobile-hide:hover{background:#fff !important;border-color:var(--mg-gold) !important}
/* Reopen-knapp: aldrig synlig som default; visas bara när body.has-pub */
.reopen-pub-btn{display:none !important}
body.has-pub .reopen-pub-btn{display:inline-flex !important;align-items:center}
body.has-pub .reopen-pub-btn:hover{background:#15803d !important;border-color:#15803d !important;transform:translateY(-1px)}
@media(max-width:700px){
  body.has-pub .reopen-pub-btn{display:none !important}
}
/* Platform-tabs (Facebook/Instagram/Båda) — wrap till grid på smal skärm så Båda inte clippas */
@media(max-width:520px){
  .platform-tabs{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:.3rem !important}
  .ptab{padding:.5rem .25rem !important;font-size:.7rem !important;flex:none !important;min-width:0 !important;overflow:hidden}
  .ptab svg{width:14px;height:14px;flex-shrink:0}
}
.h-menu-overlay{display:none}
.h-menu-panel{display:none}
@media(max-width:700px){
  .menu-toggle{display:flex}
  .h-menu-overlay{display:block;position:fixed;inset:0;background:rgba(13,38,63,.5);z-index:99;opacity:0;pointer-events:none;transition:opacity .2s}
  .h-menu-overlay.open{opacity:1;pointer-events:auto}
  .h-menu-panel{display:flex;position:fixed;top:0;right:0;height:100vh;width:80vw;max-width:300px;background:#fff;z-index:100;transform:translateX(100%);transition:transform .25s ease-out;flex-direction:column;box-shadow:-4px 0 16px rgba(0,0,0,.1)}
  .h-menu-panel.open{transform:translateX(0)}
  .h-menu-head{padding:1.1rem 1.2rem;border-bottom:1px solid var(--mg-line);font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:var(--mg-navy);display:flex;align-items:center;justify-content:space-between}
  .h-menu-close{background:none;border:none;font-size:1.4rem;color:#5b6577;cursor:pointer;padding:0;width:30px;height:30px}
  .h-menu-list{padding:.5rem 0;flex:1}
  .h-menu-list a,.h-menu-list button{display:block;padding:.85rem 1.2rem;color:var(--mg-navy);text-decoration:none;font-weight:500;font-size:.95rem;border-bottom:1px solid #f4f1ec;background:none;border-left:none;border-right:none;border-top:none;width:100%;text-align:left;font-family:inherit;cursor:pointer}
  .h-menu-list a:hover,.h-menu-list a.active,.h-menu-list button:hover{background:#f4f1ec}
  .h-menu-foot{padding:1rem 1.2rem;border-top:1px solid var(--mg-line);font-size:.75rem;color:#5b6577;text-align:center;font-family:'Cormorant Garamond',serif;font-style:italic}
}
/* Headerknappar — konsekvent större storlek */
.h-btn{background:var(--paper,#f4f1ec);border:1px solid transparent;color:var(--text,var(--mg-navy));border-radius:999px;padding:.52rem 1rem;font-size:.88rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;transition:all .15s;line-height:1;white-space:nowrap;position:relative}
.h-btn:hover{background:#fff;border-color:var(--mg-gold);transform:translateY(-1px)}
.h-btn.active{background:#fff;border-color:transparent;color:var(--mg-navy);font-weight:700}
.h-btn.active::after{content:'';position:absolute;left:18%;right:18%;bottom:-14px;height:2px;background:var(--mg-gold);border-radius:2px}
.h-btn--white{background:#fff;border-color:var(--mg-line)}
.h-btn--success{background:#16a34a;border-color:#15803d;color:#fff}
.h-btn--success:hover{background:#15803d;border-color:#15803d;color:#fff;transform:translateY(-1px)}
.h-btn svg{width:15px;height:15px;flex-shrink:0;opacity:.7}
.h-btn.active svg{opacity:1;color:var(--mg-navy)}
.h-right-group{margin-left:auto;display:flex;gap:.55rem;align-items:center}
.panel{background:var(--mg-cream);border:1px solid var(--mg-line);border-radius:8px;margin-bottom:1.05rem}  /* overflow:hidden borttaget — klippte bildinnehåll */
.panel:last-child{margin-bottom:0}
.ph{background:transparent;border-bottom:0;padding:1.5rem 1.75rem .35rem;font-weight:600;font-size:1.18rem;color:var(--mg-navy);display:flex;align-items:center;gap:.55rem;letter-spacing:-.005em;cursor:pointer;user-select:none;font-family:'Cormorant Garamond',serif;transition:background .12s}
.ph:hover{background:rgba(255,255,255,.18)}
.ph-num{font-size:.95rem;font-weight:600;color:#5b6577;letter-spacing:0;flex-shrink:0}
.ph-arrow{margin-left:auto;transition:transform .2s;font-size:1.05rem;color:#5b6577;flex-shrink:0}
.ph-arrow.open{transform:rotate(180deg)}
.pb{padding:1rem 1.75rem 1.75rem}
/* Desktop 3-kolumn: panelerna får ~30% mer höjd så de balanserar skärmen */
/* Tidigare hade vi min-height:72vh på paneler för desktop, men det
   gjorde att vänsterkolumnens content blev längre än viewport och
   förstörde scroll-strategin. Borttaget — panelerna växer naturligt
   och scrollas inom sin kolumn-container istället. */
/* (gamla .ph och .pb borttagna — använd nya högre upp) */

/* HELP PANEL & FEEDBACK */
.aichat-header{background:var(--p);color:#fff;padding:.75rem 1rem;display:flex;align-items:center;gap:.6rem;font-size:.85rem;font-weight:700;flex-shrink:0}
.close-btn{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;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.close-btn:hover{background:rgba(255,255,255,.3)}
.hp-tip{background:#f0f7ff;border-left:3px solid var(--mg-line);border-radius:0 6px 6px 0;padding:.45rem .65rem;font-size:.78rem;color:var(--mg-navy-2);margin:.5rem 0}
.hp-warn{background:#fffbea;border-left:3px solid var(--g);border-radius:0 6px 6px 0;padding:.45rem .65rem;font-size:.78rem;color:#5a3e00;margin:.5rem 0}
#hpBody{padding:1rem;overflow-y:auto;flex:1;font-size:.82rem;color:#333;line-height:1.65}
#hpBody h4{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--a);margin:.85rem 0 .3rem;padding-bottom:.25rem;border-bottom:1.5px solid var(--l)}
#hpBody h4:first-child{margin-top:0}
#hpBody p{margin-bottom:.5rem;color:#444}

/* CONTENT TYPE TABS */
.content-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:.55rem;margin-bottom:1.5rem}
.ctab{padding:.95rem .35rem .85rem;border-radius:8px;font-size:.82rem;font-weight:600;cursor:pointer;border:1.5px solid var(--mg-line);background:#fff;text-align:center;transition:all .15s;color:var(--mg-navy);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.55rem;min-height:96px;letter-spacing:.005em}
.ctab:hover{border-color:var(--mg-gold);background:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(168,119,66,.12)}
.ctab.active{background:var(--mg-navy);color:#fff;border-color:var(--mg-navy);box-shadow:0 4px 14px rgba(13,38,63,.25)}
.ctab.active::after{content:none}
.ctab-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;line-height:1;color:var(--mg-navy)}
.ctab-icon svg{width:32px;height:32px}
.ctab.active .ctab-icon{color:#fff}

/* MEDIA UPLOAD */
.media-zone{border:1.5px dashed var(--mg-line);border-radius:8px;padding:2rem 1.5rem;text-align:center;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;background:rgba(255,255,255,.4)}
.media-zone:hover,.media-zone.drag{border-color:var(--mg-gold);background:rgba(255,255,255,.7)}
.media-zone input{display:none}
.media-zone-icon{display:flex;align-items:center;justify-content:center;margin-bottom:.55rem;color:#8a8475;opacity:.85}
.media-zone:hover .media-zone-icon,.media-zone.drag .media-zone-icon{color:var(--mg-navy-2);opacity:1}
.media-zone-text{font-size:.95rem;color:var(--mg-navy);font-weight:500}
.media-zone-sub{font-size:.78rem;color:#8a929e;margin-top:.3rem}
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-top:.65rem}
.media-grid > div[data-mid]:hover{box-shadow:0 3px 10px rgba(0,0,0,.08)}
.media-grid > div[data-mid].mg-drag-over{transform:scale(.96);outline:2px dashed var(--mg-gold);outline-offset:-2px}
.tone-opt{position:relative;cursor:pointer}
.tone-opt input{position:absolute;opacity:0;pointer-events:none}
.tone-opt span{display:inline-block;padding:.22rem .55rem;font-size:.68rem;font-weight:600;color:#5b6577;border-radius:5px;transition:all .15s;white-space:nowrap}
.tone-opt:hover span{color:var(--mg-navy);background:rgba(255,255,255,.6)}
.tone-opt input:checked + span{background:var(--mg-navy);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.chip-input-ok{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;padding:.4rem .75rem;height:30px;border-radius:6px;cursor:pointer;font-family:inherit;font-size:.78rem;font-weight:600;margin-left:.3rem;transition:all .15s;flex-shrink:0;background:var(--mg-navy);color:#fff;border:1px solid var(--mg-navy);line-height:1}
.chip-input-ok:hover{background:var(--mg-navy-2);border-color:var(--mg-navy-2);transform:translateY(-1px);box-shadow:0 2px 6px rgba(13,38,63,.18)}
.chip-input-ok svg{flex-shrink:0}
.chip-input-cancel{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border-radius:6px;cursor:pointer;font-family:inherit;margin-left:.2rem;transition:all .15s;flex-shrink:0;background:#fff;color:#5b6577;border:1px solid var(--mg-line)}
.chip-input-cancel:hover{background:#fff0f0;color:#c14040;border-color:#c14040}
.desc-len-toggle{display:inline-flex;align-items:center;gap:.18rem;background:#f4f1ec;padding:.18rem;border-radius:6px;border:1px solid var(--mg-line)}
.dlt-label{font-size:.65rem;color:#5b6577;padding:0 .35rem;font-weight:600}
.dlt-opt{position:relative;cursor:pointer}
.dlt-opt input{position:absolute;opacity:0;pointer-events:none}
.dlt-opt span{display:inline-block;padding:.2rem .55rem;font-size:.66rem;font-weight:600;color:#5b6577;border-radius:4px;transition:all .15s;white-space:nowrap}
.dlt-opt:hover span{color:var(--mg-navy);background:rgba(255,255,255,.6)}
.dlt-opt input:checked + span{background:var(--mg-navy);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.preview-copy-row{padding:.55rem .75rem;background:#fafaf8;display:flex;justify-content:center}
.copy-btn{display:inline-flex;align-items:center;gap:.4rem;background:#fff;color:var(--mg-navy);border:1px solid var(--mg-line);padding:.4rem .85rem;border-radius:6px;font-size:.72rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.copy-btn:hover{background:var(--mg-navy);color:#fff;border-color:var(--mg-navy)}
.copy-btn.copied{background:#16a34a;color:#fff;border-color:#16a34a}
.copy-btn svg{flex-shrink:0}
.sp-act-btn{background:#fff;color:var(--mg-navy);border:1px solid var(--mg-line);padding:.32rem .65rem;border-radius:5px;font-size:.7rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap}
.sp-act-btn:hover{background:var(--mg-navy);color:#fff;border-color:var(--mg-navy)}
.sp-act-btn.sp-act-copy:hover{background:var(--mg-navy);border-color:var(--mg-navy)}
.sp-act-btn.sp-act-danger{color:#c14040;border-color:rgba(220,38,38,.35)}
.sp-act-btn.sp-act-danger:hover{background:#dc2626;color:#fff;border-color:#dc2626}
#scratchpadBlock.collapsed #scratchpadBody{display:none}
#scratchpadBlock.collapsed #spChevron{transform:rotate(-90deg)}
/* Vänsterkolumnen får egen scroll när innehåll (bildgrid m.m.) blir längre än fönstret.
   Position sticky + max-height + overflow gör att kolumnen "hänger kvar"
   medan användaren scrollar mitten/höger separat. */
/* Vänsterkolumn och högerkolumn: stack med gap (default på alla viewports) */
.left-col,.right-col{
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
}

/* -------------------------------------------------------------------
   DESKTOP LAYOUT: lås viewport-höjd + separat scroll per kolumn
   Strategi: body blir flex-container med exakt 100vh höjd och
   overflow:hidden. Header tar sin naturliga höjd, .app får
   flex:1 och fyller resten. Sedan får varje kolumn (left-col,
   preview-sticky, right-col) egen overflow-y:auto så de scrollas
   oberoende av varandra utan att sidan själv kan scrollas.
   ------------------------------------------------------------------- */
@media (min-width: 900px){
  html, body{
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  body{
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .app{
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
    padding-bottom: 1rem;
    /* KRITISK FIX
       grid-template-areas tvingar kolumnerna till explicit positioner i
       en specifik row. Utan denna placerar grid items via auto-flow vilket
       blir oförutsägbart med order-CSS:n (rad 49-51) i kombination med
       grid-row på items. Med named areas vet vi exakt var varje sak hamnar.
       Plus: row 1 = auto (pubBanner, 0 om display:none),
             row 2 = minmax(0,1fr) = exakt .app-restens-höjd,
       så kolumnernas overflow-y:auto faktiskt aktiveras. */
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "banner banner banner"
      "left   mid    right";
  }
  /* Placera kolumnerna i sina named areas — overrider order-CSS */
  .app > #pubBanner   { grid-area: banner }
  .app > .left-col    { grid-area: left }
  .app > .preview-sticky { grid-area: mid }
  .app > .right-col   { grid-area: right }
  .left-col,
  .preview-sticky,
  .right-col{
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: .55rem;
    padding-bottom: 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(13,38,63,.32) transparent;
  }
  /* Tydlig scrollbar — alltid synlig i koppar/cream så användaren ser
     att scroll finns. Bredare än tidigare (10px) för bättre target. */
  .left-col::-webkit-scrollbar,
  .preview-sticky::-webkit-scrollbar,
  .right-col::-webkit-scrollbar{ width: 10px }
  .left-col::-webkit-scrollbar-track,
  .preview-sticky::-webkit-scrollbar-track,
  .right-col::-webkit-scrollbar-track{ background: rgba(13,38,63,.06); border-radius: 5px }
  .left-col::-webkit-scrollbar-thumb,
  .preview-sticky::-webkit-scrollbar-thumb,
  .right-col::-webkit-scrollbar-thumb{ background: rgba(13,38,63,.32); border-radius: 5px; border: 2px solid transparent }
  .left-col::-webkit-scrollbar-thumb:hover,
  .preview-sticky::-webkit-scrollbar-thumb:hover,
  .right-col::-webkit-scrollbar-thumb:hover{ background: rgba(13,38,63,.5) }
}
.pub-mode-bar{display:flex;align-items:center;gap:.18rem;background:#f4f1ec;padding:.22rem;border-radius:7px;border:1px solid var(--mg-line);margin:.7rem 0 .5rem}
.pub-mode-opt{position:relative;cursor:pointer;flex:1}
.pub-mode-opt input{position:absolute;opacity:0;pointer-events:none}
.pub-mode-opt span{display:flex;align-items:center;justify-content:center;gap:.35rem;padding:.4rem .55rem;font-size:.72rem;font-weight:600;color:#5b6577;border-radius:5px;transition:all .15s;white-space:nowrap}
.pub-mode-opt:hover span{color:var(--mg-navy);background:rgba(255,255,255,.6)}
.pub-mode-opt input:checked + span{background:var(--mg-navy);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.pub-mode-opt input[value="dark"]:checked + span{background:#5b2c6f;color:#fff}
.pub-mode-help{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:1px solid var(--mg-navy);background:#fdfcfa;color:var(--mg-navy);border-radius:50%;font-size:.72rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0;margin-left:.2rem}
.pub-mode-help:hover{background:var(--mg-navy);color:#fff}
.pub-mode-warning{display:flex;align-items:flex-start;gap:.5rem;padding:.55rem .7rem;background:#fef3e7;border:1px solid #f0c896;border-radius:7px;font-size:.72rem;color:#7a4e1f;margin-bottom:.6rem;line-height:1.45}
.pub-mode-warning svg{flex-shrink:0;color:#d97706;margin-top:1px}
.pub-mode-warning a{color:#7a4e1f;text-decoration:underline;font-weight:600}
.pub-mode-warning a:hover{color:#5b3815}
/* Färga publicera-knappen lila när dark post valt */
.action-btn.primary.dark-mode{background:#5b2c6f}
.action-btn.primary.dark-mode:hover{background:#4a2359}
.lang-bar{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem .7rem;background:#fdfcfa;border:1px solid var(--mg-line);border-radius:7px;margin:.7rem 0 .85rem;flex-wrap:wrap}
.lang-bar-left{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.lang-bar-right{display:flex;align-items:center;gap:.5rem}
.lang-bar select{background:#fff;border:1px solid var(--mg-line);border-radius:5px;padding:.28rem .45rem;font-size:.74rem;font-weight:600;color:var(--mg-navy);cursor:pointer;font-family:inherit}
.lang-bar select:hover{border-color:var(--mg-gold)}
.lang-translate-btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--mg-navy);color:#fff;border:none;padding:.32rem .65rem;border-radius:5px;font-size:.7rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.lang-translate-btn:hover{background:#a87859}
.lang-translate-btn:disabled{opacity:.6;cursor:wait}
.lang-bar.non-sv{background:#fef9f0;border-color:#e8d5b7}
.media-thumb{position:relative;aspect-ratio:1;border-radius:7px;overflow:hidden;border:2px solid #e2e8f0;cursor:pointer;transition:all .15s;background:#f0f4f8}
.media-thumb:hover{border-color:var(--a)}
.media-thumb.selected{border-color:var(--a);box-shadow:0 0 0 2px rgba(46,117,182,.2)}
.media-thumb img,.media-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.media-thumb .del{position:absolute;top:3px;right:3px;background:rgba(220,38,38,.85);color:#fff;border:none;border-radius:50%;width:18px;height:18px;font-size:.6rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.media-thumb .badge-type{position:absolute;bottom:3px;left:3px;background:rgba(0,0,0,.6);color:#fff;font-size:.55rem;font-weight:700;padding:1px 5px;border-radius:4px}
.media-thumb.selected::after{content:'✓';position:absolute;top:3px;right:22px;background:var(--mg-navy);color:#fff;font-size:.55rem;font-weight:800;padding:1px 4px;border-radius:20px}

/* EDITOR MODAL */
.editor-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:500;display:none;align-items:center;justify-content:center;flex-direction:column}
.editor-overlay.show{display:flex}
.editor-box{background:#1a1a2a;border-radius:14px;overflow:hidden;width:min(94vw,720px);max-height:92vh;display:flex;flex-direction:column}
.editor-header{background:#111827;color:#fff;padding:.7rem 1rem;display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:.85rem}
.editor-canvas-wrap{position:relative;flex:1;display:flex;align-items:center;justify-content:center;background:#111;min-height:280px;max-height:380px;overflow:hidden}
.editor-canvas-wrap canvas{max-width:100%;max-height:100%;display:block}
/* Text overlay input */
.overlay-input{position:absolute;border:none;background:transparent;color:#fff;font-size:22px;font-weight:700;text-align:center;cursor:move;min-width:60px;outline:2px dashed rgba(255,255,255,.4);padding:2px 6px;text-shadow:0 2px 8px rgba(0,0,0,.7);resize:none;overflow:hidden}
.editor-tools{background:#1e293b;padding:.65rem 1rem;display:flex;gap:.35rem;flex-wrap:wrap;border-top:.5px solid #334155}
.tool-btn{background:#334155;color:#94a3b8;border:none;border-radius:6px;padding:.35rem .6rem;font-size:.7rem;font-weight:600;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:.25rem;white-space:nowrap}
.tool-btn:hover{background:#475569;color:#fff}
.tool-btn.active{background:var(--mg-navy);color:#fff}
.tool-separator{width:1px;background:#334155;align-self:stretch;margin:0 .1rem}
/* Sliders */
.editor-sliders{background:#1e293b;padding:.65rem 1rem;border-top:.5px solid #334155;display:none}
.editor-sliders.show{display:block}
.slider-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.35rem}
.slider-lbl{font-size:.68rem;color:#94a3b8;width:60px;flex-shrink:0}
.slider-row input[type=range]{flex:1;accent-color:var(--a);height:3px}
.slider-val{font-size:.68rem;color:#64748b;width:28px;text-align:right}
.editor-actions{background:#111827;padding:.65rem 1rem;display:flex;justify-content:flex-end;gap:.5rem;border-top:.5px solid #1e293b}
/* Filter strip */
.filter-strip{display:flex;gap:.4rem;overflow-x:auto;padding:.5rem 0;scrollbar-width:none}
.filter-strip::-webkit-scrollbar{display:none}
.filter-opt{flex-shrink:0;text-align:center;cursor:pointer}
.filter-swatch{width:52px;height:40px;border-radius:6px;border:2px solid transparent;overflow:hidden;transition:all .15s;background:#333}
.filter-opt.active .filter-swatch{border-color:var(--a)}
.filter-swatch canvas{width:100%;height:100%;display:block}
.filter-name{font-size:.58rem;color:#94a3b8;margin-top:2px;text-align:center}

/* STORY BUILDER */
.story-slides{display:flex;gap:.5rem;overflow-x:auto;padding:.5rem 0;scrollbar-width:thin}
.story-slide{flex-shrink:0;width:80px;border-radius:8px;overflow:hidden;border:2px solid #e2e8f0;cursor:pointer;position:relative;background:#f0f4f8;aspect-ratio:9/16}
.story-slide.active{border-color:var(--a)}
.story-slide img{width:100%;height:100%;object-fit:cover}
.story-add{flex-shrink:0;width:80px;aspect-ratio:9/16;border-radius:8px;border:2px dashed #d0d7df;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.4rem;color:#bbb;transition:all .15s;background:#fafbfc}
.story-add:hover{border-color:var(--a);color:var(--a)}
.story-slide-num{position:absolute;bottom:3px;left:3px;background:rgba(0,0,0,.6);color:#fff;font-size:.55rem;font-weight:700;padding:1px 4px;border-radius:3px}
.story-duration{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}
.story-dur-lbl{font-size:.72rem;color:#666;width:60px}
/* Story text overlays */
.story-text-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem;margin-top:.5rem}
.story-txt-style{padding:.5rem;border-radius:8px;border:2px solid #e2e8f0;text-align:center;cursor:pointer;font-size:.68rem;font-weight:700;transition:all .18s}
.story-txt-style:hover{border-color:var(--a);background:var(--l);color:var(--a)}
.story-txt-style.active{border-color:var(--mg-navy);background:var(--mg-navy);color:#fff;box-shadow:0 2px 6px rgba(13,38,63,.18)}
.hashtag-chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.65rem}
.chip{background:#f0f7ff;color:var(--a);border:1.5px solid #b5d4f4;border-radius:20px;padding:4px 11px;font-size:.72rem;font-weight:700;cursor:pointer;transition:all .18s}
.chip:hover{background:var(--a);color:#fff;border-color:var(--a)}
.chip.active{background:var(--a);color:#fff;border-color:var(--a);box-shadow:0 2px 6px rgba(168,119,66,.18)}

/* PLATFORM & TEXT */
.platform-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin-bottom:1.1rem}
.ptab{padding:.95rem .35rem;border-radius:8px;font-size:.92rem;font-weight:600;cursor:pointer;border:1.5px solid var(--mg-line);background:#fff;text-align:center;transition:all .15s;color:var(--mg-navy);display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.55rem;min-height:54px;letter-spacing:.005em}
.ptab:hover{border-color:var(--mg-gold);background:#fff;transform:translateY(-1px)}
.ptab.active{background:var(--mg-navy);color:#fff;border-color:var(--mg-navy);box-shadow:0 4px 14px rgba(13,38,63,.22)}
.ptab svg{width:20px;height:20px;flex-shrink:0;fill:currentColor}
.ptab{display:flex;align-items:center;gap:.4rem;padding:.55rem 1rem;border-radius:10px;font-size:.82rem;font-weight:700;cursor:pointer;border:2px solid #e2e8f0;background:#fafbfc;transition:all .18s;color:#555;flex:1;justify-content:center}
.ptab:hover{border-color:var(--a);background:#f0f6ff}
.ptab.active{color:#fff;border-color:transparent;box-shadow:0 3px 10px rgba(0,0,0,.2)}
.ptab.fb.active{background:#1877F2}
.ptab.ig.active{background:linear-gradient(135deg,#f09433,#dc2743,#bc1888)}
.ptab.both.active{background:var(--p)}
.ptab svg{width:17px;height:17px;flex-shrink:0}
label{font-size:.85rem;font-weight:500;color:#5b6577;display:block;margin-bottom:.45rem;font-family:var(--font)}
.fl{display:flex;flex-direction:column;gap:4px;margin-bottom:.85rem}
textarea{width:100%;padding:.85rem 1rem;border:1px solid var(--mg-line);border-radius:9px;font-size:.95rem;background:#fff;color:var(--mg-navy);resize:vertical;line-height:1.55;transition:border-color .15s}
textarea:focus{outline:none;border-color:var(--mg-gold);background:#fff;box-shadow:0 0 0 3px rgba(168,119,66,.15)}
.char-count{font-size:.78rem;font-weight:500;margin-top:4px;color:#16a34a}
.char-count.ok{color:#16a34a}.char-count.warn{color:#ca8a04}.char-count.over{color:#dc2626}
.emoji-row{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:.55rem;align-items:center}
.emoji-btn{padding:.5rem .7rem;border-radius:9px;border:1px solid var(--mg-line);background:#fff;cursor:pointer;font-size:1.1rem;transition:all .15s;line-height:1}
.emoji-btn:hover{background:#fff;border-color:var(--mg-gold);transform:translateY(-1px)}

/* Emoji "+ Fler" trigger-knapp */
.emoji-more-btn{padding:.5rem .85rem;border-radius:9px;border:1px solid var(--mg-line);background:#fff;cursor:pointer;font-size:.88rem;font-weight:500;color:var(--mg-navy);transition:all .15s;display:inline-flex;align-items:center;gap:.35rem}
.emoji-more-btn:hover{border-color:var(--mg-gold);background:#fff;transform:translateY(-1px)}
.emoji-more-btn .chev{transition:transform .15s;font-size:.72rem;opacity:.6}
.emoji-more-btn.open .chev{transform:rotate(180deg)}

/* Emoji-picker (dropdown-panel) */
.emoji-picker{display:none;background:#fff;border:1px solid var(--mg-line);border-radius:10px;box-shadow:0 6px 20px rgba(13,38,63,.08);padding:.95rem 1rem;margin-bottom:.85rem;max-height:340px;overflow-y:auto}
.emoji-picker.open{display:block}
.emoji-picker-title{font-size:.78rem;font-weight:600;color:var(--mg-navy);margin-bottom:.5rem;font-family:var(--font)}
.emoji-search{position:relative;margin-bottom:.85rem}
.emoji-search input{width:100%;padding:.55rem .85rem .55rem 2.1rem;border:1px solid var(--mg-line);border-radius:8px;font-size:.85rem;background:#faf8f4;outline:none;transition:border-color .15s}
.emoji-search input:focus{border-color:var(--mg-gold);background:#fff}
.emoji-search svg{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);color:#8a929e;width:14px;height:14px}
.emoji-cat-title{font-size:.78rem;font-weight:600;color:var(--mg-navy);margin:.6rem 0 .4rem;font-family:var(--font)}
.emoji-cat-title:first-child{margin-top:0}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.3rem;margin-bottom:.6rem}
.emoji-grid .e-cell{padding:.4rem;border-radius:7px;border:1px solid transparent;background:transparent;cursor:pointer;font-size:1.15rem;text-align:center;transition:all .15s;line-height:1}
.emoji-grid .e-cell:hover{background:#faf3eb;border-color:var(--mg-gold);transform:scale(1.08)}
.emoji-cat-list{display:flex;flex-direction:column;gap:.05rem}
.emoji-cat-row{padding:.6rem .3rem;font-size:.88rem;color:var(--mg-navy);cursor:pointer;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f0ece2;transition:background .12s;font-family:var(--font)}
.emoji-cat-row:hover{background:#faf8f4}
.emoji-cat-row:last-child{border-bottom:none}
.emoji-cat-row .cat-chev{color:#8a929e;font-size:.78rem;opacity:.7}
.emoji-cat-expanded{display:none;padding-left:.5rem;padding-right:.5rem;padding-bottom:.4rem}
.emoji-cat-expanded.open{display:block}

.hashtag-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.85rem;align-items:center}
/* INAKTIV chip: ljus bakgrund, koppar-kantad, kopparfärgad text */
.chip{background:#fdfcfa;color:var(--mg-navy);border:1.5px solid #e6d4c2;border-radius:20px;padding:.35rem .85rem .35rem .65rem;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:.3rem;user-select:none}
.chip:hover{background:#fff;border-color:var(--mg-navy-2);color:var(--mg-navy)}
/* Bock-ikon: visas som tom cirkel när inaktiv, fylld med ✓ när aktiv */
.chip::before{content:'';display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;border:1.5px solid currentColor;font-size:.6rem;font-weight:900;line-height:1;transition:all .15s}
/* AKTIV chip: koppar-fylld, vit text, bock-ikon synlig */
.chip.active{background:var(--mg-navy);color:#fff;border-color:var(--mg-navy);box-shadow:0 2px 6px rgba(13,38,63,.3)}
.chip.active:hover{background:var(--mg-navy-2);border-color:var(--mg-navy-2);color:#fff}
.chip.active::before{content:'\2713';background:#fff;color:var(--mg-navy);border-color:#fff}
.chip:hover{filter:brightness(1.08);transform:translateY(-1px)}
.chip-add{background:#fff;color:var(--mg-navy);border:1px solid var(--mg-line);border-radius:20px;padding:.35rem .85rem;font-size:.82rem;font-weight:500;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:.25rem}
.chip-add:hover{border-color:var(--mg-gold);background:#fff;transform:translateY(-1px)}
.chip-input{display:none;flex:1 1 100%;min-width:0}
.chip-input.open{display:flex;align-items:center;gap:.45rem}
.chip-input input{flex:1 1 240px;min-width:180px;max-width:320px;padding:.42rem .75rem;border:1px solid var(--mg-gold);border-radius:20px;font-size:.82rem;background:#fff;outline:none}

/* Action-knappar (stora outline-knappar Schemalägg + Spara utkast) */
.action-btns{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}
.action-btn{padding:.85rem 1.1rem;border-radius:10px;border:1px solid var(--mg-line);background:#fff;cursor:pointer;font-size:.92rem;font-weight:500;color:var(--mg-navy);transition:all .15s;display:flex;align-items:center;justify-content:center;gap:.55rem;width:100%}
.action-btn:hover{border-color:var(--mg-navy-2);background:#fff;transform:translateY(-1px)}
.action-btn svg{width:18px;height:18px;color:var(--mg-navy)}
.action-btn.primary{background:var(--mg-navy);color:#fff;border-color:var(--mg-navy)}
.action-btn.primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.action-btn.primary svg{color:#fff}

/* BUTTONS */
.btn-row{display:flex;gap:.55rem;margin-top:.95rem;flex-wrap:wrap}
button{cursor:pointer;font-size:.9rem;font-weight:600;padding:.7rem 1.15rem;border-radius:9px;border:none;transition:all .15s}
.btn-p{background:var(--mg-navy);color:#fff}.btn-p:hover{filter:brightness(1.5);transform:translateY(-1px)}
.btn-p:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-g{background:var(--mg-gold);color:#fff}.btn-g:hover{filter:brightness(.92);transform:translateY(-1px)}
.btn-o{background:#fff;color:var(--mg-navy);border:1.5px solid var(--mg-line)}.btn-o:hover{background:#fff;border-color:var(--mg-gold);transform:translateY(-1px)}
.btn-dark{background:#1e293b;color:#94a3b8}.btn-dark:hover{background:#334155;color:#fff}
.btn-red{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}.btn-red:hover{border-color:rgba(127,29,29,.30);background:rgba(127,29,29,.06);transform:none}

/* STATUS */
.status-bar{padding:.4rem 1.1rem;font-size:.72rem;border-top:.5px solid #e2e8f0;color:#777;display:flex;align-items:center;gap:.35rem}
.sdot{width:7px;height:7px;border-radius:50%;background:#22c55e;flex-shrink:0}
.sdot.demo{background:var(--g)}


/* FB */
.fb-preview{border:.5px solid #e2e8f0;border-radius:10px;overflow:hidden;font-family:-apple-system,sans-serif}
.fb-header{padding:.7rem .9rem;display:flex;align-items:center;gap:.6rem;background:#fff;border-bottom:.5px solid rgba(13,38,63,.08)}
.fb-av{width:36px;height:36px;border-radius:50%;background:var(--p);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.72rem;font-weight:700;flex-shrink:0}
.fb-name{font-size:.82rem;font-weight:700;color:#050505}
.fb-time{font-size:.7rem;color:#65676b}
.fb-time {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.fb-time-sep {
  color: currentColor;
}

.fb-privacy-icon {
  width: 12px;
  height: 12px;
  display: inline-flex;
  color: currentColor;
  opacity: .88;
}

.fb-privacy-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fb-media{background:#f0f4f8;min-height:180px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.fb-media img,.fb-media video{width:100%;max-height:280px;object-fit:cover;display:block}
.fb-media .no-media{opacity:.2;font-size:2.5rem}
.fb-body{padding:.65rem .9rem}
.fb-txt{font-size:.82rem;line-height:1.55;color:#050505;white-space:pre-wrap}
.fb-actions{display:flex;border-top:.5px solid #e2e8f0}
.fb-act{flex:1;padding:.45rem;text-align:center;font-size:.72rem;color:#65676b;font-weight:600;cursor:pointer;border-right:.5px solid #e2e8f0}
.fb-act:last-child{border-right:none}
/* IG */
.ig-preview{border:.5px solid #dbdbdb;border-radius:10px;overflow:hidden;font-family:-apple-system,sans-serif;margin-top:.65rem}
.ig-header{padding:.6rem .85rem;display:flex;align-items:center;gap:.55rem}
.ig-av{width:30px;height:30px;border-radius:50%;background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);padding:2px;flex-shrink:0}
.ig-av-inner{width:100%;height:100%;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:.58rem;font-weight:800;color:var(--p)}
.ig-user{font-size:.8rem;font-weight:700;color:#262626}
.ig-media{background:#f0f4f8;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;max-height:260px}
.ig-media img,.ig-media video{width:100%;height:100%;object-fit:cover;display:block}
.ig-media .no-media{opacity:.2;font-size:2.5rem}
/* Story preview */
.story-preview-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.55rem}
.story-preview-play{min-height:36px;border:1px solid rgba(13,38,63,.14);border-radius:999px;background:#fff;color:var(--mg-navy,#0d263f);display:inline-flex;align-items:center;justify-content:center;gap:.42rem;padding:.45rem .78rem;cursor:pointer;box-shadow:0 4px 14px rgba(13,38,63,.07);transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;font-family:var(--font);font-size:.78rem;font-weight:750;line-height:1;white-space:nowrap}
.story-preview-play:hover{background:rgba(13,38,63,.055);border-color:rgba(13,38,63,.24);transform:translateY(-1px);box-shadow:0 7px 18px rgba(13,38,63,.10)}
.story-preview-play svg{width:14px;height:14px;fill:currentColor;flex-shrink:0}
.story-preview{background:#000;border-radius:10px;overflow:hidden;aspect-ratio:9/16;max-height:320px;position:relative;margin-bottom:.65rem}
.story-preview img,.story-preview video{width:100%;height:100%;object-fit:cover}
.story-overlay-text{position:absolute;bottom:20%;left:50%;transform:translateX(-50%);color:#fff;font-size:1rem;font-weight:800;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.8);width:85%;background:rgba(0,0,0,.35);padding:.4rem .7rem;border-radius:8px}
.story-preview .no-story{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#333;font-size:2rem;opacity:.3}

/* VIDEO LINK */
.video-link-input-wrap{display:flex;gap:.4rem;margin-bottom:.65rem}
.video-link-input-wrap input{flex:1;padding:.6rem .75rem;border:2px solid #d0d7df;border-radius:9px;font-size:.85rem;background:#fafbfc;transition:border-color .18s}
.video-link-input-wrap input:focus{outline:none;border-color:var(--a);background:#fff;box-shadow:0 0 0 3px rgba(168,119,66,.18)}
.video-thumb-card{border:1.5px solid #d8dee6;border-radius:10px;overflow:hidden;margin-bottom:.65rem;display:none}
.video-thumb-card.show{display:block}
.video-thumb-img{position:relative;aspect-ratio:16/9;background:#0d0d0d;overflow:hidden}
.video-thumb-img img{width:100%;height:100%;object-fit:cover;display:block}
.video-play-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.video-play-badge span{background:rgba(0,0,0,.65);color:#fff;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;backdrop-filter:blur(4px)}
.video-platform-badge{position:absolute;top:8px;left:8px;border-radius:5px;padding:2px 8px;font-size:.65rem;font-weight:800;letter-spacing:.04em}
.video-platform-badge.yt{background:#FF0000;color:#fff}
.video-platform-badge.vm{background:#1ab7ea;color:#fff}
.video-meta{padding:.65rem .85rem;background:#f8fafc}
.video-meta-title{font-size:.82rem;font-weight:700;color:#1a1a2e;margin-bottom:.2rem;line-height:1.4}
.video-meta-sub{font-size:.7rem;color:#888;display:flex;gap:.6rem;align-items:center}
.video-use-row{padding:.55rem .85rem;border-top:1px solid #e8ecf0;display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;background:#fff}
.video-platform-tabs{display:flex;gap:.3rem;margin-bottom:.65rem}
.vptab{padding:.45rem .75rem;border-radius:8px;font-size:.75rem;font-weight:700;cursor:pointer;border:2px solid #e2e8f0;background:#fafbfc;transition:all .18s;color:#666;display:flex;align-items:center;gap:.3rem}
.vptab:hover{border-color:var(--a);color:var(--a)}
.vptab.active{background:var(--p);color:#fff;border-color:var(--p);box-shadow:0 2px 8px rgba(40,65,87,.2)}

#toast{position:fixed;bottom:1.25rem;right:1.25rem;background:var(--p);color:#fff;padding:.5rem .95rem;border-radius:8px;font-size:.78rem;transform:translateY(60px);opacity:0;transition:all .3s;z-index:9999;pointer-events:none}
#toast.show{transform:translateY(0);opacity:1}

/* KAMPANJ-WIZARD */
.cw-overlay{position:fixed;inset:0;background:rgba(13,38,63,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);z-index:9999;display:none;align-items:center;justify-content:center;padding:1rem;font-family:var(--font)}
.cw-overlay.open{display:flex}
.cw-modal{background:#fff;border:1px solid rgba(13,38,63,.12);border-radius:8px;max-width:760px;width:min(760px,calc(100vw - 32px));max-height:92vh;display:flex;flex-direction:column;box-shadow:0 24px 70px rgba(13,38,63,.28);overflow:hidden;color:var(--mg-navy)}
.cw-header{padding:1.25rem 1.45rem 1rem;border-bottom:1px solid rgba(13,38,63,.10);background:#fff;color:var(--mg-navy);position:relative}
.cw-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mg-gold);margin-bottom:.42rem;font-family:var(--font)}
.cw-title{font-family:var(--font);font-size:1.18rem;font-weight:800;letter-spacing:0;line-height:1.2;margin:0 2.8rem .28rem 0;color:var(--mg-navy)}
.cw-sub{font-size:.9rem;color:var(--mg-ink-soft-alt,#5b6577);line-height:1.5;max-width:56ch}
.cw-close{position:absolute;top:1rem;right:1rem;background:#fff;border:1px solid rgba(13,38,63,.14);color:var(--mg-navy);width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(13,38,63,.08);transition:background .15s,border-color .15s,transform .15s}
.cw-close:hover{background:rgba(13,38,63,.04);border-color:rgba(13,38,63,.24);transform:translateY(-1px)}
.cw-progress{display:flex;gap:.45rem;padding:.8rem 1.45rem;background:#f8fafc;border-bottom:1px solid rgba(13,38,63,.08);flex-shrink:0}
.cw-step-dot{flex:1;height:4px;background:rgba(13,38,63,.14);border-radius:999px;position:relative;overflow:hidden}
.cw-step-dot.done{background:var(--mg-navy)}
.cw-step-dot.current{background:linear-gradient(90deg,var(--mg-gold) 0%,var(--mg-gold) 52%,rgba(13,38,63,.14) 52%,rgba(13,38,63,.14) 100%)}
.cw-body{padding:1.35rem 1.45rem;overflow-y:auto;flex:1;background:#fff;scrollbar-width:thin;scrollbar-color:rgba(13,38,63,.28) transparent}
.cw-body::-webkit-scrollbar{width:8px}
.cw-body::-webkit-scrollbar-track{background:transparent}
.cw-body::-webkit-scrollbar-thumb{background:rgba(13,38,63,.24);border-radius:999px;border:2px solid #fff}
.cw-step{display:none;animation:cwFade .2s ease-out}
.cw-step.active{display:block}
@keyframes cwFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.cw-step-title{font-family:var(--font);font-size:1rem;font-weight:800;color:var(--mg-navy);margin-bottom:.35rem;letter-spacing:0}
.cw-step-intro{font-size:.88rem;color:var(--mg-ink-soft-alt,#5b6577);line-height:1.55;margin-bottom:1.15rem}
.cw-field{margin-bottom:1rem}
.cw-label{display:block;font-size:.78rem;font-weight:800;letter-spacing:0;text-transform:none;color:var(--mg-navy);margin-bottom:.38rem;font-family:var(--font)}
.cw-input{width:100%;padding:.72rem .82rem;background:#fff;border:1px solid rgba(13,38,63,.14);border-radius:8px;font-family:var(--font);font-size:.92rem;color:var(--mg-navy);transition:border-color .15s,box-shadow .15s,background .15s;box-sizing:border-box}
.cw-input:focus{outline:none;border-color:var(--mg-gold);background:#fff;box-shadow:0 0 0 2px rgba(201,154,95,.18)}
.cw-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-bottom:1rem}
.cw-helper{font-size:.78rem;color:var(--mg-ink-soft-alt,#5b6577);margin-top:.35rem;line-height:1.45}
.cw-source-line{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--mg-ink-soft-alt,#5b6577);margin-top:.45rem;padding:.48rem .6rem;background:rgba(13,38,63,.045);border-radius:7px;border-left:3px solid var(--mg-gold);font-family:var(--font)}
.cw-source-line .cw-source-label{color:var(--mg-navy);font-weight:800;text-transform:none;letter-spacing:0;font-size:.76rem}
.cw-source-line .cw-source-val{color:var(--mg-ink-soft-alt,#5b6577);font-weight:600;font-size:.78rem;font-family:var(--font)}
.cw-chip-grid{display:flex;flex-wrap:wrap;gap:.45rem}
.cw-chip{padding:.5rem .82rem;background:#fff;border:1px solid rgba(13,38,63,.14);border-radius:999px;font-size:.82rem;font-weight:700;color:var(--mg-navy);cursor:pointer;transition:border-color .15s,background .15s,color .15s,transform .15s;display:inline-flex;align-items:center;gap:.4rem}
.cw-chip:hover{border-color:rgba(13,38,63,.28);background:rgba(13,38,63,.045)}
.cw-chip.active{background:var(--mg-navy);color:#fff;border-color:var(--mg-navy)}
.cw-chip.active .cw-chip-x{opacity:.7}
.cw-chip-x{font-size:.85rem;opacity:0;transition:opacity .15s}
.cw-chip.removable .cw-chip-x{opacity:.5}
.cw-chip.removable:hover .cw-chip-x{opacity:1}
.cw-add-chip{padding:.5rem .82rem;background:#fff;border:1px dashed rgba(13,38,63,.28);border-radius:999px;font-size:.82rem;font-weight:700;color:var(--mg-navy);cursor:pointer;transition:border-color .15s,background .15s}
.cw-add-chip:hover{background:rgba(13,38,63,.045);border-color:var(--mg-gold)}
.cw-radius-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;margin-bottom:.65rem}
.cw-radius-btn,.cw-budget-btn{padding:.72rem .45rem;background:#fff;border:1px solid rgba(13,38,63,.14);border-radius:8px;font-size:.84rem;font-weight:800;color:var(--mg-navy);cursor:pointer;text-align:center;transition:border-color .15s,background .15s,color .15s,box-shadow .15s;font-family:var(--font)}
.cw-radius-btn:hover,.cw-budget-btn:hover{border-color:rgba(13,38,63,.28);background:rgba(13,38,63,.04)}
.cw-radius-btn.active,.cw-budget-btn.active{background:var(--mg-navy);color:#fff;border-color:var(--mg-navy);box-shadow:0 8px 18px rgba(13,38,63,.16)}
.cw-age-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;align-items:end}
.cw-age-slider-v2{position:relative;height:42px;padding:18px 12px;touch-action:none;user-select:none;-webkit-user-select:none}
.cw-age-track-v2{position:relative;height:6px;background:rgba(13,38,63,.12);border-radius:999px;margin-top:0}
.cw-age-fill-v2{position:absolute;height:6px;background:var(--mg-navy);border-radius:999px;top:0;left:0;right:0}
.cw-age-thumb{position:absolute;top:50%;width:22px;height:22px;background:#fff;border:3px solid var(--mg-navy);border-radius:50%;cursor:grab;transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(13,38,63,.20);transition:box-shadow .15s,transform .1s,border-color .15s;z-index:2}
.cw-age-thumb:hover{box-shadow:0 4px 12px rgba(13,38,63,.25);transform:translate(-50%,-50%) scale(1.06);border-color:var(--mg-gold)}
.cw-age-thumb:active,.cw-age-thumb.dragging{cursor:grabbing;box-shadow:0 4px 14px rgba(13,38,63,.32);border-color:var(--mg-gold);transform:translate(-50%,-50%) scale(1.1);z-index:3}
.cw-age-thumb:focus{outline:none;box-shadow:0 0 0 3px rgba(201,154,95,.20),0 2px 8px rgba(13,38,63,.18)}
.cw-age-display{display:flex;justify-content:space-between;font-size:.82rem;color:var(--mg-navy);font-weight:800;font-family:var(--font);margin-top:.4rem;padding:0 8px}
.cw-budget-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;margin-bottom:.5rem}
.cw-budget-btn .cw-budget-unit{font-size:.7rem;display:block;opacity:.72;margin-top:.18rem;font-weight:600;letter-spacing:0}
.cw-summary{background:#f8fafc;border:1px solid rgba(13,38,63,.10);border-radius:8px;padding:.95rem 1rem;margin-bottom:.9rem}
.cw-summary-row{display:flex;justify-content:space-between;align-items:flex-start;padding:.55rem 0;border-bottom:1px solid rgba(13,38,63,.08);gap:1rem}
.cw-summary-row:last-child{border-bottom:none}
.cw-summary-row-label{font-size:.78rem;font-weight:800;letter-spacing:0;text-transform:none;color:var(--mg-navy);font-family:var(--font);flex-shrink:0;padding-top:.1rem}
.cw-summary-row-val{font-size:.88rem;color:var(--mg-ink-soft-alt,#5b6577);text-align:right;line-height:1.45;font-weight:600}
.cw-callout{background:rgba(13,38,63,.045);border:1px solid rgba(13,38,63,.10);border-left:3px solid var(--mg-gold);border-radius:8px;padding:.9rem 1rem;margin-bottom:1rem;font-size:.84rem;line-height:1.55;color:var(--mg-ink-soft-alt,#5b6577)}
.cw-callout strong{color:var(--mg-navy);font-weight:800}
.cw-footer{padding:1rem 1.45rem;border-top:1px solid rgba(13,38,63,.10);background:#f8fafc;display:flex;gap:.7rem;justify-content:space-between;align-items:center;flex-shrink:0}
.cw-btn{min-height:40px;padding:.68rem 1.25rem;border-radius:8px;font-family:var(--font);font-size:.88rem;font-weight:800;cursor:pointer;border:1px solid transparent;transition:background .15s,border-color .15s,color .15s,transform .15s;display:inline-flex;align-items:center;justify-content:center;gap:.45rem}
.cw-btn:hover{transform:translateY(-1px)}
.cw-btn-secondary{background:#fff;color:var(--mg-navy);border-color:rgba(13,38,63,.14)}
.cw-btn-secondary:hover{background:rgba(13,38,63,.045);border-color:rgba(13,38,63,.24);color:var(--mg-navy)}
.cw-btn-primary{background:var(--mg-navy);color:#fff;border-color:var(--mg-navy)}
.cw-btn-primary:hover{background:var(--mg-navy-2);border-color:var(--mg-navy-2)}
.cw-btn-primary:disabled{background:rgba(13,38,63,.30);border-color:transparent;cursor:not-allowed;transform:none}
.cw-btn-accent{background:var(--mg-navy);border-color:var(--mg-navy);color:#fff;font-weight:800;padding:.68rem 1.35rem}
.cw-btn-accent:hover{background:var(--mg-navy-2);border-color:var(--mg-navy-2)}
/* ── Dubbelannons-skydd ──────────────────────────────────────────────────────
   Egen overlay som kan ligga OVANPÅ publiceringsflödets modal (z-index 9999),
   därför 10000. Återanvänder .cw-modal/.cw-header/.cw-footer så mörkt läge och
   typografi följer med utan att dupliceras. */
.ag-overlay{position:fixed;inset:0;background:rgba(13,38,63,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);z-index:10000;display:none;align-items:center;justify-content:center;padding:1rem;font-family:var(--font)}
.ag-overlay.open{display:flex}
.ag-overlay .cw-modal{max-width:600px;width:min(600px,calc(100vw - 32px))}
/* Valen är knappar, inte radioknappar: varje val är en avslutad handling med
   olika konsekvens för plånboken, och en lista med radio + separat "Fortsätt"
   döljer vilket val som faktiskt kostar pengar. */
.ag-choices{display:flex;flex-direction:column;gap:.6rem}
.ag-choice{display:block;width:100%;text-align:left;background:#fff;border:1px solid rgba(13,38,63,.14);border-radius:8px;padding:.85rem 1rem;cursor:pointer;font-family:var(--font);transition:background .15s,border-color .15s,transform .15s}
.ag-choice:hover{background:rgba(13,38,63,.04);border-color:rgba(13,38,63,.28);transform:translateY(-1px)}
.ag-choice[disabled]{opacity:.55;cursor:wait;transform:none}
.ag-choice-t{display:block;font-size:.92rem;font-weight:800;color:var(--mg-navy);margin-bottom:.18rem}
.ag-choice-d{display:block;font-size:.79rem;line-height:1.45;color:var(--mg-ink-soft-alt,#5b6577)}
.ag-choice.rec{border-color:var(--mg-gold);border-left-width:3px}
.ag-choice.rec .ag-choice-t::after{content:'Rekommenderas';margin-left:.5rem;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mg-gold)}
/* Kvarvarande annonser från tidigare publiceringar — visas i statusrutan så att
   en annons vi slutat styra ändå går att pausa utan Ads Manager. */
.ag-lingering{margin-top:.35rem;padding:.45rem .65rem;border:1px solid #f0d69a;border-radius:6px;font-size:.74rem;background:#fff6e0;color:#7a5a12}
.ag-lingering + .ag-lingering{margin-top:.3rem}
.ag-lingering button{margin-left:.5rem;padding:.22rem .6rem;background:#fff;border:1px solid currentColor;border-radius:5px;cursor:pointer;font-size:.7rem;font-weight:600;font-family:inherit;color:inherit}
body[data-theme="dark"] .ag-overlay{background:rgba(5,10,16,.72)}
body[data-theme="dark"] .ag-choice{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
body[data-theme="dark"] .ag-choice:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.26)}
body[data-theme="dark"] .ag-choice-t{color:var(--mg-dark-ink)}
body[data-theme="dark"] .ag-choice-d{color:var(--mg-dark-ink-soft)}
body[data-theme="dark"] .ag-lingering{background:rgba(240,214,154,.10);border-color:rgba(240,214,154,.34);color:#f0d69a}

body[data-theme="dark"] .cw-overlay{background:rgba(5,10,16,.72)}
body[data-theme="dark"] .cw-modal{background:var(--mg-dark-surface);border-color:rgba(255,255,255,.12);color:var(--mg-dark-ink);box-shadow:0 24px 70px rgba(0,0,0,.52)}
body[data-theme="dark"] .cw-header,body[data-theme="dark"] .cw-body{background:var(--mg-dark-surface);color:var(--mg-dark-ink)}
body[data-theme="dark"] .cw-header,body[data-theme="dark"] .cw-progress,body[data-theme="dark"] .cw-footer{border-color:rgba(255,255,255,.10)}
body[data-theme="dark"] .cw-progress,body[data-theme="dark"] .cw-footer{background:rgba(255,255,255,.04)}
body[data-theme="dark"] .cw-title,body[data-theme="dark"] .cw-step-title,body[data-theme="dark"] .cw-label,body[data-theme="dark"] .cw-source-line .cw-source-label,body[data-theme="dark"] .cw-summary-row-label,body[data-theme="dark"] .cw-callout strong,body[data-theme="dark"] .cw-age-display{color:var(--mg-dark-ink)}
body[data-theme="dark"] .cw-sub,body[data-theme="dark"] .cw-step-intro,body[data-theme="dark"] .cw-helper,body[data-theme="dark"] .cw-source-line,body[data-theme="dark"] .cw-source-line .cw-source-val,body[data-theme="dark"] .cw-summary-row-val,body[data-theme="dark"] .cw-callout{color:var(--mg-dark-ink-soft)}
body[data-theme="dark"] .cw-close,body[data-theme="dark"] .cw-input,body[data-theme="dark"] .cw-chip,body[data-theme="dark"] .cw-add-chip,body[data-theme="dark"] .cw-radius-btn,body[data-theme="dark"] .cw-budget-btn,body[data-theme="dark"] .cw-btn-secondary{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:var(--mg-dark-ink)}
body[data-theme="dark"] .cw-close:hover,body[data-theme="dark"] .cw-chip:hover,body[data-theme="dark"] .cw-add-chip:hover,body[data-theme="dark"] .cw-radius-btn:hover,body[data-theme="dark"] .cw-budget-btn:hover,body[data-theme="dark"] .cw-btn-secondary:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);color:var(--mg-dark-ink)}
body[data-theme="dark"] .cw-input:focus{background:rgba(255,255,255,.08);border-color:rgba(201,154,95,.58);box-shadow:0 0 0 2px rgba(201,154,95,.20)}
body[data-theme="dark"] .cw-source-line,body[data-theme="dark"] .cw-summary,body[data-theme="dark"] .cw-callout{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.10)}
body[data-theme="dark"] .cw-summary-row{border-bottom-color:rgba(255,255,255,.10)}
body[data-theme="dark"] .cw-step-dot{background:rgba(255,255,255,.16)}
body[data-theme="dark"] .cw-step-dot.current{background:linear-gradient(90deg,var(--mg-dark-gold) 0%,var(--mg-dark-gold) 52%,rgba(255,255,255,.16) 52%,rgba(255,255,255,.16) 100%)}
body[data-theme="dark"] .cw-step-dot.done,body[data-theme="dark"] .cw-radius-btn.active,body[data-theme="dark"] .cw-budget-btn.active,body[data-theme="dark"] .cw-chip.active,body[data-theme="dark"] .cw-btn-primary,body[data-theme="dark"] .cw-btn-accent{background:var(--mg-dark-gold);border-color:var(--mg-dark-gold);color:var(--mg-navy)}
body[data-theme="dark"] .cw-age-track-v2{background:rgba(255,255,255,.14)}
body[data-theme="dark"] .cw-age-fill-v2{background:var(--mg-dark-gold)}
body[data-theme="dark"] .cw-age-thumb{background:var(--mg-dark-surface);border-color:var(--mg-dark-gold)}
body[data-theme="dark"] .cw-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.24);border-color:var(--mg-dark-surface)}

@media (max-width: 600px) {
  .cw-overlay{padding:.7rem}
  .cw-modal{width:100%;max-height:96vh;border-radius:8px}
  .cw-header{padding:1rem 1.1rem .85rem}
  .cw-title{font-size:1.06rem}
  .cw-sub{font-size:.84rem}
  .cw-close{width:34px;height:34px;top:.85rem;right:.85rem}
  .cw-progress{padding:.75rem 1.1rem}
  .cw-body{padding:1.05rem 1.1rem}
  .cw-footer{padding:.85rem 1.1rem;flex-wrap:wrap}
  .cw-row,.cw-age-row{grid-template-columns:1fr}
  .cw-radius-row,.cw-budget-grid{grid-template-columns:repeat(2,1fr)}
  .cw-btn{flex:1}
}

/* Kampanjstatus i headern */
.mg-campaign-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .75rem;background:rgba(148,210,172,.15);border:1px solid rgba(148,210,172,.4);border-radius:20px;font-size:.7rem;color:var(--mg-navy);font-weight:600;cursor:pointer;transition:all .15s;font-family:'JetBrains Mono',monospace;letter-spacing:.04em}
.mg-campaign-badge:hover{background:rgba(148,210,172,.25);border-color:#94d2ac}
.mg-campaign-badge .dot{width:6px;height:6px;border-radius:50%;background:#16a34a;box-shadow:0 0 6px rgba(22,163,74,.6)}
.mg-campaign-badge.inactive{background:rgba(212,160,86,.15);border-color:rgba(212,160,86,.4)}
.mg-campaign-badge.inactive .dot{background:#d4a056;box-shadow:0 0 6px rgba(212,160,86,.5)}


/* OBJEKT-IMPORT */
.oi-bar{display:flex;gap:.5rem;margin-bottom:.85rem;flex-wrap:wrap}
.oi-input-wrap{position:relative;flex:1;min-width:240px}
.oi-input{width:100%;padding:.7rem .85rem .7rem 2.4rem;background:#fff;border:1.5px solid var(--mg-line);border-radius:9px;font-size:.88rem;color:var(--mg-navy);transition:all .15s;box-sizing:border-box}
.oi-input:focus{outline:none;border-color:var(--mg-gold);box-shadow:0 0 0 3px rgba(168,119,66,.15)}
.oi-input-icon{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:#9b9282;pointer-events:none}
.oi-input-icon svg{width:16px;height:16px}
.oi-btn{padding:.7rem 1.15rem;background:var(--mg-navy);color:#fff;border:none;border-radius:9px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:.45rem}
.oi-btn:hover{background:var(--mg-navy-2)}
.oi-btn:disabled{background:#9b9282;cursor:not-allowed}
.oi-btn-secondary{background:transparent;color:#5d5547;border:1.5px solid var(--mg-line)}
.oi-btn-secondary:hover{background:#fafaf6;border-color:var(--mg-gold);color:var(--mg-navy)}
.oi-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:oiSpin .8s linear infinite}
@keyframes oiSpin{to{transform:rotate(360deg)}}
.oi-status{font-size:.78rem;color:#5d5547;padding:.5rem .75rem;background:#fafaf6;border-radius:7px;border-left:3px solid var(--mg-gold);margin-bottom:.85rem;display:none;line-height:1.5}
.oi-status.show{display:block}
.oi-status.error{border-left-color:#d47875;background:rgba(212,120,117,.06);color:#8b3f3c}
.oi-status.success{border-left-color:#94d2ac;background:rgba(148,210,172,.10);color:#1a5a3a}
.oi-source-tag{display:inline-block;padding:1px 7px;background:rgba(168,119,66,.15);color:#9c6a3e;border-radius:10px;font-size:.65rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-left:.4rem;font-family:'JetBrains Mono',monospace}

.oi-card{background:#fff;border:1.5px solid #ece6d6;border-radius:11px;padding:1rem;display:flex;gap:1rem;align-items:flex-start;margin-bottom:.85rem;animation:oiFadeIn .25s ease-out}
@keyframes oiFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.oi-card-img{width:120px;height:90px;border-radius:8px;background:#fafaf6;background-size:cover;background-position:center;flex-shrink:0;position:relative;overflow:hidden}
.oi-card-img.empty::after{content:'Ingen bild';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.65rem;color:#9b9282}
.oi-card-img-count{position:absolute;bottom:4px;right:4px;background:rgba(13,38,63,.85);color:#fff;font-size:.62rem;padding:2px 6px;border-radius:10px;font-family:'JetBrains Mono',monospace;font-weight:600}
.oi-card-body{flex:1;min-width:0}
.oi-card-title{font-family:'Cormorant Garamond',serif;font-size:1.05rem;font-weight:500;color:var(--mg-navy);margin-bottom:.2rem;line-height:1.25;letter-spacing:-.005em}
.oi-card-addr{font-size:.78rem;color:#5d5547;margin-bottom:.45rem}
.oi-card-facts{display:flex;flex-wrap:wrap;gap:.4rem .85rem;font-size:.74rem;color:#5d5547;margin-bottom:.55rem}
.oi-card-fact{display:flex;align-items:center;gap:.3rem}
.oi-card-fact strong{color:var(--mg-navy);font-weight:600}
.oi-card-price{font-family:'Cormorant Garamond',serif;font-size:1.05rem;font-weight:500;color:#9c6a3e}
.oi-card-actions{display:flex;gap:.4rem;margin-top:.65rem;flex-wrap:wrap}
.oi-card-action{padding:.4rem .75rem;background:#fafaf6;border:1px solid #e4dccc;border-radius:6px;font-size:.72rem;font-weight:600;color:#5d5547;cursor:pointer;transition:all .15s}
.oi-card-action:hover{border-color:var(--mg-gold);color:var(--mg-navy)}
.oi-card-action.primary{background:var(--mg-navy);color:#fff;border-color:var(--mg-navy)}
.oi-card-action.primary:hover{background:var(--mg-navy-2)}
.oi-card-clear{margin-left:auto;padding:.4rem .55rem;background:transparent;border:none;color:#9b9282;cursor:pointer;font-size:.95rem}
.oi-card-clear:hover{color:#d47875}

.oi-empty{margin-top:.8rem;padding:.75rem .9rem;background:rgba(168,119,66,.08) !important;border:0;border-left:3px solid var(--g,var(--mg-gold));border-radius:0 8px 8px 0;font-size:.82rem;color:var(--text,var(--mg-navy));line-height:1.45;text-align:left}
.oi-empty strong{display:block;color:var(--text,var(--mg-navy));font-weight:800;margin-bottom:.2rem;font-size:.84rem}

.oi-recents{margin-top:.85rem;padding-top:.85rem;border-top:1px solid #ece6d6}
.oi-recents-title{font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#7d745f;margin-bottom:.5rem;font-family:'JetBrains Mono',monospace}
.oi-recents-list{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  max-height: 360px;        /* visar ~6-7 objekt — scrolla för resten */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: .35rem;
  scrollbar-width: thin;
  scrollbar-color: var(--mg-line) transparent;
}
.oi-recents-list::-webkit-scrollbar{ width: 8px }
.oi-recents-list::-webkit-scrollbar-track{ background: transparent }
.oi-recents-list::-webkit-scrollbar-thumb{ background: var(--mg-line); border-radius: 4px }
.oi-recents-list::-webkit-scrollbar-thumb:hover{ background: rgba(13,38,63,.45) }
/* RSS-feed-resultatet (alla objekt från sajten) — scrollbar container */
.oi-rss-scroll{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  max-height: 420px;          /* visar ~7-8 objekt — scrolla för resten */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: .35rem;
  scrollbar-width: thin;
  scrollbar-color: var(--mg-line) transparent;
}
.oi-rss-scroll::-webkit-scrollbar{ width: 8px }
.oi-rss-scroll::-webkit-scrollbar-track{ background: transparent }
.oi-rss-scroll::-webkit-scrollbar-thumb{ background: var(--mg-line); border-radius: 4px }
.oi-rss-scroll::-webkit-scrollbar-thumb:hover{ background: rgba(13,38,63,.45) }
.oi-recent{display:flex;align-items:center;gap:.55rem;padding:.45rem .65rem;background:#fafaf6;border:1px solid #ece6d6;border-radius:7px;cursor:pointer;transition:all .15s}
.oi-recent:hover{border-color:var(--mg-gold);background:#fff}
.oi-recent-thumb{width:32px;height:32px;border-radius:5px;background-size:cover;background-position:center;background-color:#e4dccc;flex-shrink:0}
.oi-recent-body{flex:1;min-width:0}
.oi-recent-title{font-size:.78rem;font-weight:600;color:var(--mg-navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oi-recent-meta{font-size:.68rem;color:#7d745f}

@media (max-width: 600px){
  .oi-card{flex-direction:column;align-items:stretch}
  .oi-card-img{width:100%;height:160px}
}

#pubPrepOverlay{
    --mgpf-ink:var(--mg-navy);--mgpf-ink2:var(--mg-navy-2);--mgpf-gold:var(--mg-gold);--mgpf-gold-dark:var(--mg-gold-dark);
    --mgpf-gold-shine:linear-gradient(180deg,var(--mg-gold-light) 0%,var(--mg-gold) 50%,var(--mg-gold-dark) 100%);
    --mgpf-paper:var(--mg-cream);--mgpf-paper2:var(--mg-surface);--mgpf-line:rgba(13,38,63,.12);--mgpf-muted:var(--mg-ink-soft);
    position:fixed;inset:0;z-index:900;display:none;
    align-items:center;justify-content:center;padding:1.5rem;
    background:rgba(13,38,63,.45);backdrop-filter:blur(3px);
    font-family:var(--font,'Inter',system-ui,sans-serif);
  }
  #pubPrepOverlay.open{display:flex;animation:mgpfFade .22s ease}
  @keyframes mgpfFade{from{opacity:0}to{opacity:1}}
  .mgpf-modal{
    background:var(--mgpf-paper);border-radius:8px;
    width:92%;max-width:880px;max-height:90vh;overflow:hidden;
    box-shadow:0 30px 80px rgba(13,38,63,.3);
    display:flex;flex-direction:column;animation:mgpfUp .28s ease;
  }
  @keyframes mgpfUp{from{opacity:0;transform:translateY(15px) scale(.985)}to{opacity:1;transform:none}}
  .mgpf-head{padding:1.35rem 1.7rem 1.05rem;border-bottom:1px solid var(--mgpf-line);
    display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;position:relative}
  .mgpf-head::after{content:'';position:absolute;left:1.7rem;right:1.7rem;bottom:-1px;height:1px;
    background:linear-gradient(90deg,var(--mgpf-gold) 0,transparent 70%)}
  .mgpf-eyebrow{font-size:.66rem;color:var(--mgpf-gold-dark);font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.25rem}
  .mgpf-title{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-size:1.5rem;font-weight:600;letter-spacing:-.01em;line-height:1.15;color:var(--mgpf-ink)}
  .mgpf-title em{font-style:italic;font-weight:500;color:var(--mgpf-gold-dark)}
  .mgpf-sub{font-size:.82rem;color:var(--mgpf-muted);margin-top:.35rem}
  .mgpf-close{background:transparent;border:none;cursor:pointer;width:32px;height:32px;border-radius:7px;
    display:flex;align-items:center;justify-content:center;color:var(--mgpf-muted);flex-shrink:0;transition:all .15s}
  .mgpf-close:hover{background:var(--mgpf-line);color:var(--mgpf-ink)}
  .mgpf-body{padding:1.5rem 1.7rem 1.7rem;overflow-y:auto;flex:1}

  /* Vy A — snabbval */
  .mgpf-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem;margin-bottom:1.1rem}
  .mgpf-card{background:var(--mgpf-paper2);border:1.5px solid var(--mgpf-line);border-radius:11px;
    padding:1.1rem 1.05rem 1rem;cursor:pointer;position:relative;transition:all .18s;text-align:left;
    font-family:inherit;display:flex;flex-direction:column;gap:.55rem;width:100%}
  .mgpf-card:hover{border-color:var(--mgpf-gold);transform:translateY(-2px);box-shadow:0 8px 24px rgba(13,38,63,.08)}
  .mgpf-card.rec{border:1.5px solid var(--mgpf-ink);background:#fff}
  .mgpf-card.rec::before{content:'Rekommenderad';position:absolute;top:-9px;left:1.05rem;background:var(--mgpf-ink);color:#fff;
    font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.25rem .55rem;border-radius:5px}
  .mgpf-card-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;
    background:rgba(13,38,63,.12);color:var(--mg-navy)}
  .mgpf-card.rec .mgpf-card-ico{background:var(--mgpf-ink);color:#fff}
  .mgpf-card-ico svg{width:16px;height:16px}
  .mgpf-card h3{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-size:1.05rem;font-weight:600;color:var(--mgpf-ink);line-height:1.2}
  .mgpf-card-desc{font-size:.77rem;color:var(--mgpf-muted);line-height:1.5}
  .mgpf-card-vals{margin-top:.35rem;padding-top:.6rem;border-top:1px dashed var(--mgpf-line);
    font-size:.72rem;color:var(--mgpf-ink);display:flex;flex-wrap:wrap;gap:.3rem .5rem;align-items:center}
  .mgpf-val{display:inline-flex;align-items:center;gap:.25rem;font-weight:500}
  .mgpf-val::before{content:'•';color:var(--mg-navy);font-weight:700}
  .mgpf-val:first-child::before{display:none}
  .mgpf-kbd{position:absolute;top:.8rem;right:.8rem;background:var(--mgpf-line);border-radius:4px;padding:.18rem .4rem;
    font-size:.6rem;font-weight:600;color:var(--mgpf-muted);font-family:monospace;letter-spacing:.05em}

  .mgpf-annot{background:#fff8ed;border:1px dashed var(--mgpf-gold);border-radius:7px;padding:.55rem .75rem;
    font-size:.74rem;line-height:1.5;color:var(--mgpf-gold-dark);display:flex;align-items:flex-start;gap:.5rem;margin-top:.85rem}
  .mgpf-annot strong{color:var(--mgpf-ink);font-weight:600}

  /* Vy B — wizard */
  .mgpf-stepper{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.4rem;padding:0 .25rem}
  .mgpf-wstep{display:flex;flex-direction:column;align-items:center;gap:.4rem;position:relative;flex:1;cursor:pointer}
  .mgpf-wdot{width:30px;height:30px;border-radius:50%;background:#fff;border:1.5px solid var(--mgpf-line);
    display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:600;color:var(--mgpf-muted);
    z-index:2;position:relative;transition:all .2s}
  .mgpf-wstep.done .mgpf-wdot{background:var(--mgpf-ink);border-color:var(--mgpf-ink);color:#fff}
  .mgpf-wstep.active .mgpf-wdot{background:var(--mgpf-ink);border-color:var(--mgpf-ink);color:#fff;box-shadow:0 0 0 4px rgba(13,38,63,.15)}
  .mgpf-wlabel{font-size:.74rem;font-weight:600;color:var(--mgpf-muted);text-align:center}
  .mgpf-wstep.active .mgpf-wlabel,.mgpf-wstep.done .mgpf-wlabel{color:var(--mgpf-ink)}
  .mgpf-wline{position:absolute;top:15px;left:50%;width:100%;height:1.5px;background:var(--mgpf-line);z-index:1}
  .mgpf-wstep.done .mgpf-wline{background:var(--mgpf-ink)}
  .mgpf-wstep:last-child .mgpf-wline{display:none}
  .mgpf-wpanel{display:none}
  .mgpf-wpanel.show{display:block;animation:mgpfFade .22s ease}
  .mgpf-q-eyebrow{font-size:.66rem;color:var(--mgpf-gold-dark);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    margin-bottom:.35rem;display:flex;align-items:center;gap:.5rem}
  .mgpf-q-eyebrow .num{background:var(--mg-navy);color:#fff;border-radius:4px;padding:.12rem .35rem;font-size:.6rem}
  .mgpf-q-title{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-size:1.35rem;font-weight:600;line-height:1.2;color:var(--mgpf-ink);margin-bottom:.3rem}
  .mgpf-q-sub{font-size:.84rem;color:var(--mgpf-muted);margin-bottom:1.05rem;line-height:1.55}
  .mgpf-q-sub em{color:var(--mgpf-ink);font-style:normal;font-weight:600}

  .mgpf-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:1rem}
  .mgpf-opts.two{grid-template-columns:repeat(2,1fr)}
  .mgpf-opt{background:#fff;border:1.5px solid var(--mgpf-line);border-radius:9px;padding:.95rem 1rem;cursor:pointer;
    text-align:left;font-family:inherit;position:relative;transition:all .15s;display:flex;flex-direction:column;gap:.35rem}
  .mgpf-opt:hover{border-color:var(--mgpf-gold);transform:translateY(-1px)}
  .mgpf-opt.selected{background:var(--mgpf-ink);color:#fff;border-color:var(--mgpf-ink);box-shadow:0 4px 14px rgba(13,38,63,.22)}
  .mgpf-opt.selected .mgpf-opt-sub{color:rgba(255,255,255,.72)}
  .mgpf-opt.selected .mgpf-opt-badge{background:var(--mgpf-gold);color:#fff}
  .mgpf-opt.disabled{opacity:.6;cursor:not-allowed}
  .mgpf-opt.disabled:hover{border-color:var(--mgpf-line);transform:none}
  .mgpf-opt-title{font-size:.9rem;font-weight:700;line-height:1.2;display:flex;align-items:center;gap:.4rem}
  .mgpf-opt-sub{font-size:.72rem;color:var(--mgpf-muted);line-height:1.5}
  .mgpf-opt-badge{position:absolute;top:.5rem;right:.5rem;background:var(--mgpf-line);color:var(--mgpf-muted);
    font-size:.56rem;font-weight:700;padding:.12rem .35rem;border-radius:4px;letter-spacing:.08em;text-transform:uppercase}
  .mgpf-gate{background:#fff4d6;border:1px solid #f0c896;color:#7a4e1f;border-radius:7px;padding:.6rem .8rem;
    font-size:.74rem;line-height:1.5;margin-bottom:.9rem;display:none}
  .mgpf-gate.show{display:block}
  .mgpf-gate strong{color:#5a3a14}
  .mgpf-acct{margin-bottom:.9rem}
  .mgpf-acct-label{display:block;font-size:.7rem;font-weight:700;color:var(--mgpf-muted);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.05em}
  .mgpf-acct-sel{width:100%;border:1px solid var(--mgpf-line);border-radius:7px;padding:.55rem .65rem;font-family:inherit;font-size:.82rem;color:var(--mgpf-ink);background:#fff}
  .mgpf-acct-note{font-size:.74rem;margin-top:.35rem;color:var(--mgpf-muted);line-height:1.45}
  .mgpf-acct-note.ok{color:#2e7d32}
  .mgpf-acct-note.warn{color:#a8660f}

  .mgpf-summary{background:var(--mgpf-paper2);border:1px solid var(--mgpf-line);border-radius:9px;padding:1rem 1.15rem;margin-bottom:.75rem}
  .mgpf-summary h4{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-size:1rem;font-weight:600;font-style:italic;margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem}
  .mgpf-summary h4::before{content:'';width:18px;height:1px;background:var(--mg-navy)}
  .mgpf-au-row{display:grid;grid-template-columns:130px 1fr;gap:.55rem .85rem;font-size:.82rem;align-items:center}
  .mgpf-au-key{color:var(--mgpf-muted);font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em}
  .mgpf-au-val{color:var(--mgpf-ink);font-weight:500}
  .mgpf-pill{background:rgba(168,119,66,.10);border:1px solid rgba(168,119,66,.35);padding:.18rem .5rem;border-radius:5px;
    font-size:.72rem;color:var(--mgpf-gold-dark);font-weight:600;display:inline-block;margin:0 .25rem .25rem 0}

  .mgpf-field{margin-bottom:.8rem}
  .mgpf-field label{display:block;font-size:.7rem;font-weight:700;color:var(--mgpf-muted);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.05em}
  .mgpf-field input,.mgpf-field select{width:100%;border:1px solid var(--mgpf-line);border-radius:7px;padding:.55rem .65rem;
    font-family:inherit;font-size:.82rem;color:var(--mgpf-ink);background:#fff}
  .mgpf-ai-btn{width:100%;background:#fff;border:1.5px dashed var(--mgpf-gold);color:var(--mgpf-gold-dark);border-radius:9px;padding:.6rem;font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;margin-bottom:.7rem;transition:all .15s}
  .mgpf-ai-btn:hover{background:#fff8ed}
  .mgpf-ai-btn:disabled{opacity:.6;cursor:default}
  .mgpf-city-row{display:grid;grid-template-columns:1fr 92px 34px;gap:.5rem;margin-bottom:.5rem;align-items:end}
  .mgpf-city-row .mgpf-field{margin-bottom:0}
  .mgpf-city-del{height:38px;border:1px solid var(--mgpf-line);background:#fff;border-radius:7px;cursor:pointer;color:var(--mgpf-muted);font-size:.95rem;line-height:1}
  .mgpf-city-del:hover{border-color:#c14040;color:#c14040}
  .mgpf-addcity{background:#fff;border:1px solid var(--mgpf-line);color:var(--mgpf-ink);border-radius:7px;padding:.45rem .8rem;font-family:inherit;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .15s}
  .mgpf-addcity:hover{border-color:var(--mgpf-gold);color:var(--mgpf-gold-dark)}
  .mgpf-custom{display:none;margin-top:.4rem;padding:1rem;background:#fff;border:1px solid var(--mgpf-line);border-radius:9px}
  .mgpf-custom.show{display:block}
  .mgpf-row2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}

  .mgpf-budget{background:#fff;border:1.5px solid var(--mgpf-line);border-radius:9px;padding:1.1rem 1.2rem;margin-bottom:.9rem;
    display:flex;align-items:center;justify-content:space-between;gap:1rem}
  .mgpf-budget-amt{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-size:2.1rem;font-weight:600;color:var(--mgpf-ink);line-height:1}
  .mgpf-budget-cur{font-size:.95rem;color:var(--mgpf-muted);font-style:italic;margin-left:.2rem;font-weight:500}
  .mgpf-budget-meta{text-align:right;font-size:.77rem;color:var(--mgpf-muted)}
  .mgpf-budget-meta strong{color:var(--mgpf-ink);font-weight:600}
  .mgpf-presets{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.7rem}
  .mgpf-bp{background:#fff;border:1px solid var(--mgpf-line);border-radius:14px;padding:.32rem .8rem;font-size:.74rem;font-weight:600;cursor:pointer;color:var(--mgpf-ink);transition:all .15s}
  .mgpf-bp.active{background:var(--mgpf-ink);color:#fff;border-color:var(--mgpf-ink)}
  .mgpf-bp:hover:not(.active){border-color:var(--mgpf-gold);color:var(--mgpf-gold-dark)}
  .mgpf-range{width:100%;margin:.2rem 0 1rem;accent-color:var(--mgpf-gold)}

  /* footer / nav */
  .mgpf-foot{display:flex;justify-content:space-between;align-items:center;padding-top:1.1rem;margin-top:1.2rem;border-top:1px solid var(--mgpf-line)}
  .mgpf-btn-back{background:transparent;border:1px solid var(--mgpf-line);color:var(--mgpf-muted);padding:.6rem 1rem;border-radius:8px;
    font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;transition:all .15s}
  .mgpf-btn-back:hover{border-color:var(--mgpf-ink);color:var(--mgpf-ink)}
  .mgpf-btn-next{background:var(--mgpf-ink);color:#fff;border:none;padding:.7rem 1.35rem;border-radius:8px;font-family:inherit;
    font-size:.85rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;transition:all .15s;box-shadow:0 3px 10px rgba(13,38,63,.18)}
  .mgpf-btn-next:hover{background:var(--mgpf-ink2);transform:translateY(-1px)}
  .mgpf-btn-next.publish{background:var(--mgpf-gold-shine)}
  .mgpf-foot-link{color:var(--mgpf-gold-dark);font-weight:600;text-decoration:none;font-size:.78rem;cursor:pointer;background:none;border:none;font-family:inherit}
  .mgpf-foot-link:hover{text-decoration:underline}
  .mgpf-modal-foot{padding:.85rem 1.7rem 1.1rem;border-top:1px solid var(--mgpf-line);font-size:.74rem;color:var(--mgpf-muted);
    background:rgba(255,255,255,.4);display:flex;justify-content:space-between;align-items:center;gap:1rem}
  .mgpf-foot-hint{font-style:italic;font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-size:.86rem}

  /* Vy C — mallar */
  .mgpf-tmpl-list{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1rem}
  .mgpf-tmpl{display:flex;align-items:center;gap:.8rem;background:#fff;border:1.5px solid var(--mgpf-line);border-radius:9px;padding:.8rem 1rem}
  .mgpf-tmpl-main{flex:1;cursor:pointer;min-width:0}
  .mgpf-tmpl-name{font-weight:700;font-size:.9rem;color:var(--mgpf-ink)}
  .mgpf-tmpl-meta{font-size:.74rem;color:var(--mgpf-muted);margin-top:.15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mgpf-tmpl-act{background:none;border:1px solid var(--mgpf-line);border-radius:6px;padding:.35rem .6rem;cursor:pointer;font-family:inherit;font-size:.74rem;font-weight:600;color:var(--mgpf-muted)}
  .mgpf-tmpl-act:hover{border-color:var(--mgpf-ink);color:var(--mgpf-ink)}
  .mgpf-tmpl-act.del:hover{border-color:#c14040;color:#c14040}
  .mgpf-empty{text-align:center;color:var(--mgpf-muted);font-size:.85rem;padding:1.5rem 1rem;font-style:italic;font-family:var(--serif,Georgia,serif)}

  @media(max-width:760px){
    .mgpf-cards,.mgpf-opts,.mgpf-opts.two,.mgpf-row2{grid-template-columns:1fr}
  }
  /* Dark theme (modulen kan toggla) */
  body[data-theme="dark"] #pubPrepOverlay{--mgpf-paper:var(--mg-dark-surface);--mgpf-paper2:#1b2b3d;--mgpf-line:rgba(255,255,255,.12);--mgpf-ink:#e8edf2;--mgpf-muted:#9aa8ba}
  body[data-theme="dark"] .mgpf-card,body[data-theme="dark"] .mgpf-opt,body[data-theme="dark"] .mgpf-tmpl,body[data-theme="dark"] .mgpf-budget,body[data-theme="dark"] .mgpf-field input,body[data-theme="dark"] .mgpf-field select{background:#0f1d2c;color:#e8edf2}
  body[data-theme="dark"] .mgpf-wdot{background:#0f1d2c}

/* Campaign wizard markup helpers moved from inline attributes. */
.cw-label-note{ text-transform:none; letter-spacing:0; font-weight:600; color:var(--mg-ink-soft-alt,#5b6577); }
.cw-field--flush{ margin-bottom:0; }
.cw-inline-add-row{ margin-top:.5rem; display:flex; gap:.4rem; }
.cw-input-grow{ flex:1; min-width:0; }
.cw-btn-compact{ padding:.65rem 1rem; }
.cw-range-to{ color:var(--mg-ink-soft-alt,#5b6577); font-weight:600; }
.cw-back-initial{ visibility:hidden; }
.cw-footer-status{ display:flex; gap:.5rem; align-items:center; }
.cw-step-count{ font-size:.72rem; color:var(--mg-ink-soft-alt,#5b6577); font-family:var(--font); font-weight:700; }
body[data-theme="dark"] .cw-label-note,
body[data-theme="dark"] .cw-range-to,
body[data-theme="dark"] .cw-step-count{ color:var(--mg-dark-ink-soft); }

/* Campaign wizard visual hierarchy polish. */
.cw-modal{
  background:#f6f8fa;
  border-color:rgba(13,38,63,.16);
}
.cw-header{
  background:#fff;
  border-bottom-color:rgba(13,38,63,.14);
  box-shadow:0 1px 0 rgba(13,38,63,.04);
}
.cw-eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:.18rem .48rem;
  border-radius:999px;
  background:rgba(201,154,95,.12);
  color:#7b5730;
  margin-bottom:.55rem;
}
.cw-title{
  font-size:1.24rem;
}
.cw-sub{
  color:#516378;
}
.cw-progress{
  background:#edf2f6;
  border-bottom-color:rgba(13,38,63,.12);
}
.cw-body{
  background:#fff;
}
.cw-step.active{
  padding:.15rem 0 .25rem;
}
.cw-step-title{
  font-size:1.06rem;
  padding-bottom:.65rem;
  margin-bottom:.65rem;
  border-bottom:1px solid rgba(13,38,63,.10);
}
.cw-step-intro{
  max-width:58ch;
  color:#516378;
  margin-bottom:1.25rem;
}
.cw-field{
  padding:.9rem 0;
  margin-bottom:0;
  border-bottom:1px solid rgba(13,38,63,.07);
}
.cw-field:last-child,
.cw-row + .cw-field:last-child{
  border-bottom:0;
}
.cw-row{
  gap:1rem;
  margin-bottom:0;
}
.cw-row .cw-field{
  padding-bottom:0;
  border-bottom:0;
}
.cw-label{
  font-size:.82rem;
  color:#0d263f;
}
.cw-helper{
  color:#64748b;
}
.cw-input{
  border-color:rgba(13,38,63,.18);
  background:#fff;
}
.cw-input:focus{
  border-color:rgba(13,38,63,.42);
  box-shadow:0 0 0 2px rgba(13,38,63,.08);
}
.cw-source-line{
  background:#f6f8fa;
  border-color:rgba(13,38,63,.12);
  border-left-color:var(--mg-gold);
}
.cw-callout{
  background:rgba(168,119,66,.08) !important;
  border-color:rgba(13,38,63,.12);
  border-left-color:var(--mg-gold);
}
.cw-chip,
.cw-add-chip,
.cw-radius-btn,
.cw-budget-btn{
  background:#f8fafc;
  border-color:rgba(13,38,63,.16);
}
.cw-chip:hover,
.cw-add-chip:hover,
.cw-radius-btn:hover,
.cw-budget-btn:hover{
  background:#eef3f7;
  border-color:rgba(13,38,63,.28);
}
.cw-chip.active,
.cw-radius-btn.active,
.cw-budget-btn.active{
  background:#0d263f;
  border-color:#0d263f;
  color:#fff;
  box-shadow:none;
}
.cw-summary{
  background:#fff;
  border-color:rgba(13,38,63,.14);
  box-shadow:0 1px 2px rgba(13,38,63,.04);
}
.cw-footer{
  background:#edf2f6;
  border-top-color:rgba(13,38,63,.12);
}
.cw-step-count{
  color:#516378;
}
body[data-theme="dark"] .cw-modal,
body[data-theme="dark"] .cw-header,
body[data-theme="dark"] .cw-body{
  background:var(--mg-dark-surface);
}
body[data-theme="dark"] .cw-progress,
body[data-theme="dark"] .cw-footer{
  background:rgba(255,255,255,.055);
}
body[data-theme="dark"] .cw-eyebrow{
  background:rgba(201,154,95,.18);
  color:var(--mg-dark-gold);
}
body[data-theme="dark"] .cw-step-title,
body[data-theme="dark"] .cw-field{
  border-color:rgba(255,255,255,.10);
}
body[data-theme="dark"] .cw-sub,
body[data-theme="dark"] .cw-step-intro,
body[data-theme="dark"] .cw-helper,
body[data-theme="dark"] .cw-step-count{
  color:var(--mg-dark-ink-soft);
}
body[data-theme="dark"] .cw-source-line,
body[data-theme="dark"] .cw-callout,
body[data-theme="dark"] .cw-summary{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.12);
}
body[data-theme="dark"] .cw-input,
body[data-theme="dark"] .cw-chip,
body[data-theme="dark"] .cw-add-chip,
body[data-theme="dark"] .cw-radius-btn,
body[data-theme="dark"] .cw-budget-btn{
  background:rgba(255,255,255,.065);
  border-color:rgba(255,255,255,.16);
}


/* Social media page panel polish. */
.app {
  gap: 1.35rem;
}

.left-col,
.right-col {
  gap: 1rem;
}

.left-col,
.preview-sticky,
.right-col {
  scrollbar-width: thin;
  scrollbar-color: rgba(13, 38, 63, .22) transparent;
}

.left-col::-webkit-scrollbar,
.preview-sticky::-webkit-scrollbar,
.right-col::-webkit-scrollbar {
  width: 8px;
}

.left-col::-webkit-scrollbar-track,
.preview-sticky::-webkit-scrollbar-track,
.right-col::-webkit-scrollbar-track {
  background: transparent;
}

.left-col::-webkit-scrollbar-thumb,
.preview-sticky::-webkit-scrollbar-thumb,
.right-col::-webkit-scrollbar-thumb {
  background: rgba(13, 38, 63, .22);
  border: 0;
  border-radius: 999px;
}

.left-col::-webkit-scrollbar-thumb:hover,
.preview-sticky::-webkit-scrollbar-thumb:hover,
.right-col::-webkit-scrollbar-thumb:hover {
  background: rgba(13, 38, 63, .34);
}

.panel {
  background: #fff;
  border: 1px solid rgba(13, 38, 63, .12);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(13, 38, 63, .06);
  overflow: visible;
}

.left-col > .panel,
.right-col > .panel,
.preview-sticky > .panel {
  margin-bottom: 0;
}

.ph {
  min-height: 64px;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid rgba(13, 38, 63, .08);
  background: #fff;
  color: var(--mg-navy);
  font-family: var(--font);
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.25;
}

.ph:hover {
  background: #f8fafc;
}

.ph-num {
  min-width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(13, 38, 63, .08);
  color: var(--mg-navy);
  font-family: var(--font);
  font-size: .76rem;
  font-weight: 800;
}

.ph-help {
  margin-left: auto;
  background: #fff;
  border-color: rgba(13, 38, 63, .18);
  color: var(--mg-navy);
  box-shadow: 0 1px 3px rgba(13, 38, 63, .08);
}

.ph-help:hover {
  transform: none;
  box-shadow: none;
}

.pb {
  padding: 1rem 1.1rem 1.15rem;
  background: #fff;
}

.content-tabs,
.platform-tabs {
  gap: .5rem;
}

.ctab,
.ptab {
  border: 1px solid rgba(13, 38, 63, .14);
  background: #fff;
  color: var(--mg-navy);
  box-shadow: none;
}

.ctab:hover,
.ptab:hover {
  border-color: rgba(13, 38, 63, .28);
  background: #f8fafc;
  transform: none;
  box-shadow: none;
}

.ctab.active,
.ptab.active,
.ptab.fb.active,
.ptab.ig.active,
.ptab.both.active {
  background: var(--mg-navy);
  border-color: var(--mg-navy);
  color: #fff;
  box-shadow: none;
}

.media-zone {
  background: #f8fafc;
  border: 1px dashed rgba(13, 38, 63, .24);
  border-radius: 8px;
}

.media-zone:hover,
.media-zone.drag {
  background: rgba(168, 119, 66, .08);
  border-color: rgba(168, 119, 66, .42);
}

.media-zone-text,
.emoji-picker-title,
.emoji-cat-title,
.video-meta-title,
.fb-name,
.ig-user {
  color: var(--mg-navy);
}

.media-zone-sub,
label,
.story-dur-lbl,
.char-count,
.fb-time {
  color: var(--mg-ink-soft-alt, #5b6577);
}

.lang-bar,
.tone-group,
.desc-len-toggle,
.emoji-picker,
#scratchpadBlock,
#scratchpadBlock .sp-header {
  background: #f8fafc !important;
  border-color: rgba(13, 38, 63, .12) !important;
}

.tone-opt input:checked + span,
.dlt-opt input:checked + span {
  background: var(--mg-navy);
  color: #fff;
  box-shadow: none;
}

textarea,
select,
input[type="url"],
input[type="text"],
input[type="number"],
input[type="datetime-local"] {
  border-color: rgba(13, 38, 63, .16);
  border-radius: 7px;
  background: #fff;
  color: var(--mg-navy);
}

textarea:focus,
select:focus,
input[type="url"]:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="datetime-local"]:focus {
  border-color: rgba(13, 38, 63, .42);
  box-shadow: 0 0 0 2px rgba(13, 38, 63, .08);
}

.btn-o,
.copy-btn,
.sp-act-btn,
.chip-add,
.emoji-more-btn,
.emoji-btn {
  border-color: rgba(13, 38, 63, .14);
  background: #fff;
  color: var(--mg-navy);
  box-shadow: none;
}

.btn-o:hover,
.copy-btn:hover,
.sp-act-btn:hover,
.chip-add:hover,
.emoji-more-btn:hover,
.emoji-btn:hover {
  background: #f8fafc;
  border-color: rgba(13, 38, 63, .28);
  color: var(--mg-navy);
  transform: none;
}

.btn-p,
.action-btn.primary,
.lang-translate-btn,
.oi-btn,
.chip-input-ok {
  background: var(--mg-navy);
  border-color: var(--mg-navy);
  color: #fff;
  box-shadow: none;
}

.btn-p:hover,
.action-btn.primary:hover,
.lang-translate-btn:hover,
.oi-btn:hover,
.chip-input-ok:hover {
  background: var(--mg-navy-2, #284157);
  border-color: var(--mg-navy-2, #284157);
  filter: none;
  transform: none;
}

.btn-g {
  background: var(--mg-navy);
  color: #fff;
}

.action-btn {
  border-color: rgba(13, 38, 63, .14);
  border-radius: 8px;
  background: #fff;
  color: var(--mg-navy);
  font-weight: 700;
  box-shadow: none;
}

.action-btn:hover {
  background: #f8fafc;
  border-color: rgba(13, 38, 63, .28);
  transform: none;
}

.preview-copy-row {
  background: #f8fafc;
  border-top: 1px solid rgba(13, 38, 63, .08);
}

.fb-preview,
.ig-preview {
  border: 1px solid rgba(13, 38, 63, .12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(13, 38, 63, .04);
}

.fb-media,
.ig-media,
.story-add,
.story-slide {
  background: #f3f6f8;
}

.fb-actions,
.fb-act {
  border-color: rgba(13, 38, 63, .08);
}

.status-bar {
  background: #f8fafc;
  border-top: 1px solid rgba(13, 38, 63, .08);
  color: var(--mg-ink-soft-alt, #5b6577);
}

body[data-theme="dark"] .left-col,
body[data-theme="dark"] .preview-sticky,
body[data-theme="dark"] .right-col {
  scrollbar-color: rgba(255, 255, 255, .28) transparent;
}

body[data-theme="dark"] .left-col::-webkit-scrollbar-thumb,
body[data-theme="dark"] .preview-sticky::-webkit-scrollbar-thumb,
body[data-theme="dark"] .right-col::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .26);
}

body[data-theme="dark"] .panel,
body[data-theme="dark"] .ph,
body[data-theme="dark"] .pb,
body[data-theme="dark"] .fb-preview,
body[data-theme="dark"] .ig-preview {
  background: var(--mg-dark-surface);
  border-color: rgba(255, 255, 255, .12);
  color: var(--mg-dark-ink);
}

body[data-theme="dark"] .ph:hover,
body[data-theme="dark"] .status-bar,
body[data-theme="dark"] .story-preview-play,
body[data-theme="dark"] .preview-copy-row,
body[data-theme="dark"] .lang-bar,
body[data-theme="dark"] .tone-group,
body[data-theme="dark"] .desc-len-toggle,
body[data-theme="dark"] .emoji-picker,
body[data-theme="dark"] #scratchpadBlock,
body[data-theme="dark"] #scratchpadBlock .sp-header {
  background: rgba(255, 255, 255, .055) !important;
  border-color: rgba(255, 255, 255, .10) !important;
}

body[data-theme="dark"] .ph,
body[data-theme="dark"] .media-zone-text,
body[data-theme="dark"] label,
body[data-theme="dark"] .fb-name,
body[data-theme="dark"] .ig-user,
body[data-theme="dark"] .fb-txt {
  color: var(--mg-dark-ink);
}

body[data-theme="dark"] .media-zone,
body[data-theme="dark"] .fb-media,
body[data-theme="dark"] .ig-media,
body[data-theme="dark"] .story-add,
body[data-theme="dark"] .story-slide,
body[data-theme="dark"] textarea,
body[data-theme="dark"] select,
body[data-theme="dark"] input[type="url"],
body[data-theme="dark"] input[type="text"],
body[data-theme="dark"] input[type="number"],
body[data-theme="dark"] input[type="datetime-local"],
body[data-theme="dark"] .ctab,
body[data-theme="dark"] .ptab,
body[data-theme="dark"] .btn-o,
body[data-theme="dark"] .copy-btn,
body[data-theme="dark"] .sp-act-btn,
body[data-theme="dark"] .chip-add,
body[data-theme="dark"] .emoji-more-btn,
body[data-theme="dark"] .emoji-btn,
body[data-theme="dark"] .action-btn {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  color: var(--mg-dark-ink);
}


/* Social media dark primary action refinement. */
body[data-theme="dark"] .btn-p,
body[data-theme="dark"] .action-btn.primary,
body[data-theme="dark"] .lang-translate-btn,
body[data-theme="dark"] .oi-btn,
body[data-theme="dark"] .chip-input-ok {
  background: #fff;
  border-color: #fff;
  color: var(--mg-navy);
  box-shadow: none;
}

body[data-theme="dark"] .btn-p:hover,
body[data-theme="dark"] .action-btn.primary:hover,
body[data-theme="dark"] .lang-translate-btn:hover,
body[data-theme="dark"] .oi-btn:hover,
body[data-theme="dark"] .chip-input-ok:hover {
  background: rgba(255, 255, 255, .86);
  border-color: rgba(255, 255, 255, .86);
  color: var(--mg-navy);
  filter: none;
}

body[data-theme="dark"] .ctab.active,
body[data-theme="dark"] .ptab.active,
body[data-theme="dark"] .ptab.fb.active,
body[data-theme="dark"] .ptab.ig.active,
body[data-theme="dark"] .ptab.both.active,
body[data-theme="dark"] .tone-opt input:checked + span,
body[data-theme="dark"] .dlt-opt input:checked + span {
  background: #fff;
  border-color: #fff;
  color: var(--mg-navy);
}


/* Social object picker and import panel refinements. */
.social-import-panel > .pb[data-collapsed="1"] {
  display: none;
}

.social-import-heading {
  align-items: center;
}

.social-import-heading__text {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.social-import-heading__title {
  color: var(--mg-navy);
  font-size: .98rem;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

.social-import-heading__sub {
  color: var(--mg-ink-soft-alt, #5b6577);
  font-family: var(--font);
  font-size: .78rem;
  font-weight: 650;
  line-height: 1.3;
}

.social-import-panel .ph-help {
  margin-left: auto;
}

.social-import-panel .ph-arrow {
  margin-left: 0;
}

.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 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(--mg-navy);
  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);
}



/* Align the content-type help button with the shared panel help buttons. */
.left-col > .social-content-panel > .ph {
  display: flex !important;
  align-items: center !important;
  gap: .7rem !important;
}

.left-col > .social-content-panel .social-panel-title {
  min-width: 0;
  flex: 0 1 auto;
}

.left-col > .social-content-panel > .ph .ph-help {
  margin-left: .4rem !important;
  margin-right: 0 !important;
}
/* Import URL action should match the secondary "Byt objekt" button. */
.oi-bar .oi-btn:not(.oi-btn-secondary) {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(13, 38, 63, .14) !important;
  border-radius: 7px;
  background: #fff !important;
  color: var(--mg-navy) !important;
  font-family: var(--font);
  font-size: .8rem;
  font-weight: 750;
  box-shadow: none;
}

.oi-bar .oi-btn:not(.oi-btn-secondary):hover {
  background: rgba(13, 38, 63, .06) !important;
  border-color: rgba(13, 38, 63, .26) !important;
  color: var(--mg-navy) !important;
  transform: none;
}

.oi-bar .oi-btn:not(.oi-btn-secondary):disabled {
  background: rgba(13, 38, 63, .05) !important;
  border-color: rgba(13, 38, 63, .12) !important;
  color: var(--text-soft, #607086) !important;
  cursor: not-allowed;
}

.oi-bar .oi-btn:not(.oi-btn-secondary) .oi-spinner {
  border-color: rgba(13, 38, 63, .18);
  border-top-color: var(--mg-navy);
}

body[data-theme="dark"] .oi-bar .oi-btn:not(.oi-btn-secondary) {
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 255, 255, .18) !important;
  color: var(--mg-dark-ink) !important;
}

body[data-theme="dark"] .oi-bar .oi-btn:not(.oi-btn-secondary):hover {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .28) !important;
  color: var(--mg-dark-ink) !important;
}
/* Social accordion scope: only the left panel collapses. */
.left-col > .panel {
  background: var(--card-bg);
  border: 0;
  border-radius: 14px;
  box-shadow: none;
  overflow: visible;
}

.left-col > .panel .ph {
  min-height: 0;
  padding: 1.4rem 1.7rem;
  border-bottom: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--mg-serif);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -.005em;
  gap: .85rem;
  cursor: pointer;
}

.left-col > .panel .ph:hover {
  background: rgba(255, 255, 255, .3);
}

.left-col > .panel .ph-num {
  min-width: 24px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(13, 38, 63, .06);
  color: var(--text-soft);
  font-family: var(--font);
  font-size: .72rem;
  font-weight: 600;
}

.left-col > .panel .ph-arrow {
  margin-left: auto;
  color: var(--text-soft);
  font-size: 1rem;
}

.left-col > .panel .pb {
  padding: 0 1.7rem 1.7rem;
}

.right-col > .panel .ph,
.preview-sticky > .panel .ph {
  cursor: default;
  user-select: text;
}

.right-col > .panel .ph:hover,
.preview-sticky > .panel .ph:hover {
  background: #fff;
}

.right-col > .panel .ph-arrow,
.preview-sticky > .panel .ph-arrow {
  display: none;
}

body[data-theme="dark"] .left-col > .panel {
  background: var(--mg-dark-surface) !important;
}

body[data-theme="dark"] .left-col > .panel .ph {
  color: var(--text) !important;
}

body[data-theme="dark"] .left-col > .panel .ph:hover {
  background: rgba(255, 255, 255, .04) !important;
}

body[data-theme="dark"] .right-col > .panel .ph:hover,
body[data-theme="dark"] .preview-sticky > .panel .ph:hover {
  background: rgba(255, 255, 255, .045) !important;
}


/* Social media UI pass 1: align panels with the main interface. */
.app {
  gap: 1.45rem;
}

.left-col,
.right-col {
  gap: .9rem;
}

.right-col > .panel,
.preview-sticky > .panel {
  background: var(--card-bg);
  border: 0;
  border-radius: 14px;
  box-shadow: none;
  overflow: hidden;
}

.right-col > .panel .ph,
.preview-sticky > .panel .ph {
  min-height: 0;
  padding: 1.35rem 1.55rem;
  border-bottom: 1px solid rgba(13, 38, 63, .08);
  background: transparent;
  color: var(--text);
  font-family: var(--mg-serif);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  cursor: default;
  user-select: text;
}

.right-col > .panel .ph:hover,
.preview-sticky > .panel .ph:hover {
  background: transparent;
}

.right-col > .panel .ph-num,
.preview-sticky > .panel .ph-num {
  display: none;
}

.right-col > .panel .pb,
.preview-sticky > .panel .pb {
  padding: 1.25rem 1.55rem 1.55rem;
}

.left-col > .panel {
  background: rgba(255, 255, 255, .75);
  border: 1px solid var(--mg-line-warm, rgba(168, 119, 66, .24));
  border-radius: 8px;
  box-shadow: none;
  overflow: visible;
}

.left-col > .panel .ph {
  min-height: 0;
  padding: .85rem 1.1rem .85rem .85rem;
  border-bottom: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  gap: .7rem;
  cursor: pointer;
}

.left-col > .panel .ph:hover {
  background: rgba(255, 255, 255, .4);
}

.left-col > .panel .ph-num {
  min-width: 24px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(13, 38, 63, .06);
  color: var(--text-soft);
  font-family: var(--font);
  font-size: .72rem;
  font-weight: 600;
}

.left-col > .panel .ph-help {
  margin-left: auto;
  margin-right: .35rem;
  background: rgba(13, 38, 63, .10);
  border-color: var(--p);
  color: var(--text);
  font-family: var(--font);
  font-size: .7rem;
  font-weight: 600;
  box-shadow: none;
}

.left-col > .panel .ph-help:hover {
  background: var(--mg-navy);
  border-color: var(--mg-navy);
  color: #fff;
}

.left-col > .panel .ph-arrow {
  margin-left: 0;
  color: var(--text-soft);
  font-size: 1rem;
}

.left-col > .panel .pb {
  padding: .6rem 1.1rem 1.2rem .85rem;
  border-top: 1px dashed rgba(13, 38, 63, .08);
  background: rgba(255, 255, 255, .55);
}

.social-import-panel > .pb[data-collapsed="1"] {
  display: none;
}

.social-import-heading__title {
  color: var(--text);
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: 0;
}

.social-import-heading__sub {
  color: var(--text-soft);
  font-size: .72rem;
  font-weight: 500;
}

.content-tabs,
.platform-tabs {
  gap: .45rem;
}

.ctab,
.ptab,
.tone-opt span,
.dlt-opt span {
  border-radius: 6px;
}

.lang-bar,
.tone-group,
.desc-len-toggle,
.emoji-picker,
#scratchpadBlock,
#scratchpadBlock .sp-header {
  background: rgba(255, 255, 255, .55) !important;
}

body[data-theme="dark"] .right-col > .panel,
body[data-theme="dark"] .preview-sticky > .panel,
body[data-theme="dark"] .left-col > .panel {
  background: var(--mg-dark-surface) !important;
  border-color: rgba(255, 255, 255, .10) !important;
}

body[data-theme="dark"] .right-col > .panel .ph,
body[data-theme="dark"] .preview-sticky > .panel .ph,
body[data-theme="dark"] .left-col > .panel .ph,
body[data-theme="dark"] .social-import-heading__title {
  color: var(--text) !important;
}

body[data-theme="dark"] .left-col > .panel .pb {
  background: rgba(21, 34, 51, .55) !important;
  border-color: rgba(255, 255, 255, .06) !important;
}

body[data-theme="dark"] .left-col > .panel .ph:hover {
  background: rgba(255, 255, 255, .04) !important;
}

body[data-theme="dark"] .social-import-heading__sub {
  color: var(--mg-dark-ink-soft) !important;
}


/* Social media UI pass 2: panel and accordion surfaces match text.html. */
.right-col > .panel,
.preview-sticky > .panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.right-col > .panel .ph,
.preview-sticky > .panel .ph {
  min-height: 64px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.25;
  cursor: default;
  user-select: text;
}

.right-col > .panel .ph:hover,
.preview-sticky > .panel .ph:hover {
  background: transparent;
}

.right-col > .panel .ph-help,
.preview-sticky > .panel .ph-help {
  margin-left: .4rem;
  margin-right: 0;
  background: rgba(255, 255, 255, .72);
  border-color: var(--line);
  color: var(--ink);
}

.right-col > .panel .pb,
.preview-sticky > .panel .pb {
  padding: 20px 22px;
  background: rgba(255, 255, 255, .96);
}

.left-col > .panel {
  margin-bottom: 10px;
  border: 1px solid #eadfce;
  border-radius: var(--radius);
  background: #fbfaf7;
  box-shadow: none;
  overflow: hidden;
  transition: border-color .15s, background .15s;
}

.left-col > .panel:has(> .pb:not([data-collapsed="1"])) {
  border-color: #d9c8b4;
  background: #fff;
}

.left-col > .panel .ph {
  min-height: 0;
  padding: 14px;
  border-bottom: 0;
  background: #fbfaf7;
  color: var(--brand-primary);
  font-family: var(--font);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  gap: .7rem;
  cursor: pointer;
}

.left-col > .panel .ph:hover {
  background: #f8f5ee;
}

.left-col > .panel:has(> .pb:not([data-collapsed="1"])) .ph {
  background: #f3eee7;
  border-bottom: 1px solid #e2d3c2;
}

.left-col > .panel .ph-num {
  min-width: 24px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(13, 38, 63, .06);
  color: var(--text-soft);
  font-family: var(--font);
  font-size: .72rem;
  font-weight: 600;
}

.left-col > .panel .ph-help {
  margin-left: auto;
  margin-right: .35rem;
  width: 22px;
  height: 22px;
  background: rgba(13, 38, 63, .10);
  border-color: var(--p);
  color: var(--text);
  font-family: var(--font);
  font-size: .7rem;
  font-weight: 600;
  box-shadow: none;
}

.left-col > .panel .ph-help:hover {
  background: var(--mg-navy);
  border-color: var(--mg-navy);
  color: #fff;
}

.left-col > .panel .ph-arrow {
  margin-left: 0;
  color: var(--brand-primary);
  font-size: 1rem;
}

.left-col > .panel .ph-arrow.open {
  color: var(--brand-primary);
}

.left-col > .panel .pb {
  padding: 14px;
  border-top: 0;
  background: #fff;
}

.social-import-panel > .pb[data-collapsed="1"] {
  display: none;
}

.social-import-heading__title {
  color: var(--brand-primary);
  font-family: var(--font);
  font-size: .9rem;
  font-weight: 800;
}

.social-import-heading__sub {
  color: var(--brand-primary);
  font-size: .72rem;
  font-weight: 500;
}

body[data-theme="dark"] .right-col > .panel,
body[data-theme="dark"] .preview-sticky > .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"] .right-col > .panel .ph,
body[data-theme="dark"] .preview-sticky > .panel .ph {
  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"] .right-col > .panel .pb,
body[data-theme="dark"] .preview-sticky > .panel .pb {
  background: rgba(21, 34, 51, .94) !important;
}

body[data-theme="dark"] .left-col > .panel {
  background: rgba(21, 34, 51, .86) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

body[data-theme="dark"] .left-col > .panel:has(> .pb:not([data-collapsed="1"])) {
  background: rgba(16, 25, 37, .92) !important;
  border-color: rgba(201, 154, 95, .38) !important;
}

body[data-theme="dark"] .left-col > .panel .ph {
  background: rgba(21, 34, 51, .86) !important;
  color: var(--mg-dark-ink) !important;
}

body[data-theme="dark"] .left-col > .panel .ph:hover {
  background: rgba(255, 255, 255, .045) !important;
}

body[data-theme="dark"] .left-col > .panel:has(> .pb:not([data-collapsed="1"])) .ph {
  background: rgba(201, 154, 95, .12) !important;
  border-bottom: 1px solid rgba(201, 154, 95, .22) !important;
}

body[data-theme="dark"] .left-col > .panel .pb {
  background: rgba(16, 25, 37, .92) !important;
}

body[data-theme="dark"] .left-col > .panel .ph-arrow,`n/* Static inline styles extracted from sociala-medier.html. */
.sm-static-001{position:fixed;inset:0;background:transparent;z-index:490;pointer-events:none;transition:background-color .25s}
.sm-static-002{position:fixed;top:0;right:-460px;width:460px;max-width:90vw;height:100vh;background:#fff;z-index:500;display:flex;flex-direction:column;box-shadow:-6px 0 32px rgba(13,38,63,.18);transition:right .3s cubic-bezier(.4,0,.2,1)}
.sm-static-003{background:linear-gradient(135deg,#0d263f 0%,#284157 100%);color:#fff;padding:1.15rem 1.3rem;display:flex;align-items:center;gap:.85rem;flex-shrink:0;border-bottom:3px solid #a87742;font-family:'Inter',sans-serif}
.sm-static-004{width:40px;height:40px;border-radius:9px;background:rgba(168,119,66,.25);display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0}
.sm-static-005{min-width:0}
.sm-static-006{font-size:1.02rem;font-weight:700;line-height:1.2;letter-spacing:-.005em}
.sm-static-007{font-size:.76rem;opacity:.7;margin-top:2px}
.sm-static-008{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;flex-shrink:0;padding:0;font-family:inherit}
.sm-static-009{padding:1.25rem 1.3rem;overflow-y:auto;flex:1;font-size:.92rem;color:#0d263f;line-height:1.7;font-family:'Inter',sans-serif}
.sm-static-010{display:flex;align-items:center;gap:.55rem;padding:.55rem 1.3rem;flex-shrink:0;border-top:1px solid var(--mg-line)}
.sm-static-011{flex:1;height:1px;background:var(--mg-line)}
.sm-static-012{font-size:.72rem;font-weight:600;color:#5b6577;white-space:nowrap}
.sm-static-013{display:flex;flex-direction:column;background:#faf8f4;flex-shrink:0;max-height:260px}
.sm-static-014{overflow-y:auto;padding:.65rem .85rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.sm-static-015{display:flex;flex-wrap:wrap;gap:.3rem;padding:.35rem .85rem 0}
.sm-static-016{display:flex;gap:.4rem;padding:.55rem .85rem;border-top:1px solid var(--mg-line)}
.sm-static-017{flex:1;padding:.45rem .7rem;border:1px solid var(--mg-line);border-radius:20px;font-size:.82rem;font-family:'Inter',sans-serif;background:#fff;outline:none;transition:border-color .15s}
.sm-static-018{background:#0d263f;color:#fff;border:none;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0}
.sm-static-019{position:fixed;bottom:1.5rem;right:1.5rem;width:320px;background:#fff;border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.18);z-index:600;overflow:hidden;border:.5px solid #d8dee6;transform:translateY(12px) scale(.96);opacity:0;pointer-events:none;transition:all .25s cubic-bezier(.4,0,.2,1)}
.sm-static-020{padding:1rem}
.sm-static-021{font-size:.72rem;font-weight:600;color:#555;display:block;margin-bottom:3px}
.sm-static-022{width:100%;padding:.45rem .65rem;border:1px solid #d0d7df;border-radius:7px;font-size:.82rem;background:#fafbfc;margin-bottom:.65rem}
.sm-static-023{width:100%;padding:.45rem .65rem;border:1px solid #d0d7df;border-radius:7px;font-size:.82rem;background:#fafbfc;min-height:80px;resize:vertical;margin-bottom:.65rem}
.sm-static-024{width:100%;background:#0d263f;color:#fff;border:none;border-radius:8px;padding:.55rem;font-size:.82rem;font-weight:700;cursor:pointer;font-family:var(--font)}
.sm-static-025{text-align:center;padding:.85rem;font-size:.82rem;color:#16a34a;font-weight:600;display:none}
.sm-static-026{display:none;color:#16a34a}
.sm-static-027{display:flex;gap:.4rem}
.sm-static-028{padding:.3rem .65rem;font-size:.7rem}
.sm-static-029{display:none;left:50%;top:50%;transform:translate(-50%,-50%);width:80%}
.sm-static-030{display:none}
.sm-static-031{font-size:.7rem;color:#94a3b8;margin-bottom:.4rem;font-weight:600}
.sm-static-032{display:flex;gap:.4rem;flex-wrap:wrap}
.sm-static-033{width:28px;height:28px;border:none;border-radius:4px;cursor:pointer;padding:0}
.sm-static-034{flex:1;accent-color:var(--a)}
.sm-static-035{font-size:.7rem;color:#64748b;align-self:center}
.sm-static-036{grid-column:1/-1;display:none;background:linear-gradient(135deg,#fff 0%,#faf6ee 100%);border:1px solid var(--mg-line);border-radius:8px;padding:1.1rem 1.3rem;margin-bottom:1.1rem;position:relative;box-shadow:0 4px 14px rgba(13,38,63,.06)}
.sm-static-037{position:absolute;top:.55rem;right:.7rem;background:none;border:none;width:26px;height:26px;border-radius:50%;cursor:pointer;color:#64748b;font-size:1.1rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .15s}
.sm-static-038{display:flex;align-items:center;gap:.65rem;margin-bottom:.7rem}
.sm-static-039{width:30px;height:30px;border-radius:50%;background:#16a34a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0}
.sm-static-040{font-size:.95rem;font-weight:700;color:#0d263f}
.sm-static-041{font-weight:500;color:#64748b}
.sm-static-042{font-size:.74rem;color:#64748b}
.sm-static-043{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.85rem}
.sm-static-044{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.sm-static-045{display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;padding:.4rem .75rem}
.sm-static-046{position:relative;display:inline-block}
.sm-static-047{display:none;position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #d8dee6;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.12);min-width:200px;z-index:20;overflow:hidden}
.sm-static-048{display:block;width:100%;text-align:left;padding:.55rem .75rem;background:none;border:none;font-size:.76rem;color:#0d263f;cursor:pointer;border-bottom:1px solid #f0ece2}
.sm-static-049{display:block;width:100%;text-align:left;padding:.55rem .75rem;background:none;border:none;font-size:.76rem;color:#0d263f;cursor:pointer}
.sm-static-050{margin-bottom:1rem}
.sm-static-051{font-size:.78rem;font-weight:700;color:#5b6577;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.5rem;display:flex;align-items:center;justify-content:space-between}
.sm-static-052{background:#fff;border:1px solid var(--mg-line);color:#0d263f;border-radius:8px;padding:.4rem .9rem;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .15s}
.sm-static-053{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:.55rem}
.sm-static-054{font-size:.76rem;color:#8a929e;font-style:italic}
.sm-static-055{font-size:.75rem;color:#555;margin-bottom:.4rem;font-weight:600}
.sm-static-056{font-size:.66rem;color:#888;margin-bottom:.5rem;font-style:italic}
.sm-static-057{margin-top:.5rem}
.sm-static-058{font-size:.7rem;color:#666}
.sm-static-059{font-size:.7rem;color:#888;min-width:24px}
.sm-static-060{font-size:.7rem;color:#555;margin:.6rem 0 .3rem;font-weight:600}
.sm-static-061{font-size:.82rem}
.sm-static-062{margin-top:.65rem}
.sm-static-063{background:#f0f7ff;border:.5px solid var(--mg-line);border-radius:8px;padding:.85rem;margin-bottom:.75rem}
.sm-static-064{font-size:.78rem;font-weight:700;color:var(--p);margin-bottom:.4rem}
.sm-static-065{font-size:.75rem;color:#555;line-height:1.6}
.sm-static-066{margin-bottom:.65rem}
.sm-static-067{margin-bottom:.5rem;width:100%}
.sm-static-068{flex:1}
.sm-static-069{font-size:.78rem;font-weight:700;color:var(--p);margin-bottom:.3rem}
.sm-static-070{white-space:nowrap;padding:.6rem .9rem}
.sm-static-071{font-size:.7rem;color:#aaa;margin-top:-.4rem;margin-bottom:.65rem}
.sm-static-072{cursor:pointer;display:block;text-decoration:none;color:inherit}
.sm-static-073{font-size:.72rem;font-weight:600;color:#555}
.sm-static-074{font-size:.72rem;padding:.3rem .7rem}
.sm-static-075{font-size:.72rem;font-weight:700;color:#555;margin-bottom:.4rem}
.sm-static-076{display:none;background:#fff8e1;border:.5px solid #ffe082;border-radius:7px;padding:.55rem .75rem;font-size:.72rem;color:#7b5800;margin-bottom:.55rem;line-height:1.6}
.sm-static-077{font-size:.72rem;font-weight:600;color:#5b6577}
.sm-static-078{display:flex;justify-content:space-between;align-items:center;margin-bottom:.35rem}
.sm-static-079{margin:0}
.sm-static-080{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.4rem}
.sm-static-081{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.sm-static-082{display:flex;align-items:center;gap:.15rem;background:#f4f1ec;padding:.18rem;border-radius:6px;border:1px solid var(--mg-line)}
.sm-static-083{font-size:.65rem;color:#5b6577;padding:0 .35rem;font-weight:600}
.sm-static-084{padding:.2rem .55rem;font-size:.68rem}
.sm-static-085{margin-bottom:.4rem}
.sm-static-086{font-weight:400}
.sm-static-087{display:flex;justify-content:space-between;align-items:center}
.sm-static-088{margin-bottom:0}
.sm-static-089{font-size:.78rem;opacity:.65;font-weight:400;margin-left:auto;font-family:var(--font)}
.sm-static-090{font-size:.7rem;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem}
.sm-static-091{display:flex;justify-content:center;gap:.3rem;margin-top:.4rem}
.sm-static-092{font-size:.68rem;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem}
.sm-static-093{font-size:.68rem;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.06em;margin:.75rem 0 .4rem}
.sm-static-094{margin-left:auto;color:#262626;cursor:pointer;font-size:1.1rem}
.sm-static-095{padding:.5rem .85rem}
.sm-static-096{font-size:.85rem;font-weight:700}
.sm-static-097{padding:0 .85rem .5rem;font-size:.8rem;line-height:1.5;color:#262626}
.sm-static-098{color:#00376b;font-size:.78rem;margin-top:.2rem}
.sm-static-099{border-top:.5px solid #efefef}
.sm-static-100{padding:0 .85rem .65rem;font-size:.68rem;color:#8e8e8e;text-transform:uppercase}
.sm-static-101{margin-top:.75rem;background:#fdfcfa;border:1px solid var(--mg-line);border-radius:10px;overflow:hidden}
.sm-static-102{display:flex;align-items:center;justify-content:space-between;padding:.6rem .85rem;cursor:pointer;background:#f4f1ec;border-bottom:1px solid var(--mg-line)}
.sm-static-103{display:flex;align-items:center;gap:.45rem}
.sm-static-104{font-size:.78rem;font-weight:700;color:#0d263f;letter-spacing:.02em}
.sm-static-105{font-size:.65rem;color:#8e8e8e;font-weight:500}
.sm-static-106{font-size:.75rem;color:#5b6577;transition:transform .2s}
.sm-static-107{padding:.65rem .85rem .85rem}
.sm-static-108{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.5rem}
.sm-static-109{width:100%;font-family:inherit;font-size:.82rem;line-height:1.5;color:#0d263f;background:#fff;border:1px solid var(--mg-line);border-radius:7px;padding:.6rem .7rem;resize:vertical;min-height:120px}
.sm-static-110{display:flex;justify-content:space-between;align-items:center;margin-top:.35rem}
.sm-static-111{font-size:.65rem;color:#8e8e8e}
.sm-static-112{background:#000;border-radius:10px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.sm-static-113{font-size:2.5rem;opacity:.2}
.sm-static-114{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.7));padding:1rem .75rem;color:#fff;font-size:.82rem;font-weight:600;display:none}
.sm-static-115{font-size:.72rem;color:#888;margin-top:.4rem;text-align:center}
.sm-static-116{background:rgba(168,119,66,.08);border-color:rgba(168,119,66,.24);color:#0d263f}
.sm-static-117{width:100%;justify-content:center;margin-top:1rem}
.sm-static-118{margin-bottom:.35rem}
.sm-static-119{margin-top:.6rem}
.sm-static-120{font-size:.72rem;color:var(--mgpf-muted);margin-top:.2rem}
.sm-static-121{display:flex;gap:.6rem;align-items:center}
.sm-static-122{width:100%;justify-content:center}

/* Social media final alignment with text.html panels. */
.app {
  width: min(1820px, calc(100vw - 48px));
  max-width: none;
  column-gap: 22px;
  row-gap: 0;
  padding: 14px 0 28px;
  align-items: start;
}

@media (min-width: 900px) {
  .app {
    padding-top: 14px;
    padding-bottom: 18px;
  }
}

.left-col,
.right-col {
  gap: 12px;
}

.left-col > .panel,
.right-col > .panel,
.preview-sticky > .panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.left-col > .panel {
  margin-bottom: 0;
}

.left-col > .panel > .ph,
.right-col > .panel > .ph,
.preview-sticky > .panel > .ph {
  min-height: 64px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.25;
}

.left-col > .panel > .pb,
.right-col > .panel > .pb,
.preview-sticky > .panel > .pb {
  padding: 20px 22px;
  background: rgba(255, 255, 255, .96);
}

.social-object-panel > .ph {
  cursor: default;
  user-select: text;
}

.social-object-panel > .ph:hover {
  background: transparent;
}

.social-object-panel > .pb {
  padding: 20px 22px 10px;
}

.social-object-panel .text-object-title-icon {
  width: 17px;
  height: 17px;
  color: var(--ink);
  flex-shrink: 0;
}

.social-object-panel .text-object-context {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .app {
    width: 100% !important;
    padding: .8rem !important;
  }

  .left-col > .panel > .ph,
  .right-col > .panel > .ph,
  .preview-sticky > .panel > .ph {
    min-height: 56px;
    padding: 0 14px !important;
    font-size: .88rem !important;
  }

  .left-col > .panel > .pb,
  .right-col > .panel > .pb,
  .preview-sticky > .panel > .pb {
    padding: 14px !important;
  }
}

body[data-theme="dark"] .left-col > .panel,
body[data-theme="dark"] .right-col > .panel,
body[data-theme="dark"] .preview-sticky > .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"] .left-col > .panel > .ph,
body[data-theme="dark"] .right-col > .panel > .ph,
body[data-theme="dark"] .preview-sticky > .panel > .ph {
  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"] .left-col > .panel > .pb,
body[data-theme="dark"] .right-col > .panel > .pb,
body[data-theme="dark"] .preview-sticky > .panel > .pb {
  background: rgba(21, 34, 51, .94) !important;
}

/* Social media left panel correction: object + content panels. */
.left-col > .social-object-panel,
.left-col > .social-content-panel {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: var(--shadow-soft) !important;
  overflow: hidden !important;
}

.left-col > .social-object-panel > .ph,
.left-col > .social-content-panel > .ph {
  min-height: 64px !important;
  padding: 0 22px !important;
  border-bottom: 1px solid var(--line) !important;
  background: #fff !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
  cursor: default !important;
  user-select: text !important;
}

.left-col > .social-object-panel > .ph:hover,
.left-col > .social-content-panel > .ph:hover {
  background: #fff !important;
}

.left-col > .social-object-panel > .pb,
.left-col > .social-content-panel > .pb {
  padding: 20px 22px !important;
  border-top: 0 !important;
  background: #fff !important;
}

.social-object-panel__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.social-object-panel .text-object-context {
  margin-bottom: 0;
}

.social-object-panel .text-object-title-icon {
  width: 17px;
  height: 17px;
  color: var(--ink);
  flex-shrink: 0;
}
`n.social-content-panel__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.social-content-panel .content-tabs {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 8px !important;
  border: 1px solid rgba(13, 38, 63, .10) !important;
  border-radius: 8px;
  background: #fff;
}

.social-content-panel .ctab {
  min-height: 78px;
  padding: 10px 8px;
  border: 0 !important;
  border-radius: 8px !important;
  background: rgba(13, 38, 63, .045) !important;
  box-shadow: none !important;
}

.social-content-panel .ctab:hover {
  background: rgba(13, 38, 63, .075) !important;
  transform: none !important;
}

.social-content-panel .ctab.active {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
}


/* Space object image section away from content type choices. */
.social-content-panel #mediaSection {
  margin-top: 0;
}

.social-content-panel #mediaSection.has-visible-settings {
  margin-top: 0;
}

.social-content-panel #pilotImgsSection > .sm-static-051 {
  margin-bottom: 10px;
}
@media (max-width: 700px) {
  .left-col > .social-object-panel > .ph,
  .left-col > .social-content-panel > .ph {
    min-height: 56px !important;
    padding: 0 14px !important;
  }

  .left-col > .social-object-panel > .pb,
  .left-col > .social-content-panel > .pb {
    padding: 14px !important;
  }

  .social-content-panel .content-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

body[data-theme="dark"] .left-col > .social-object-panel,
body[data-theme="dark"] .left-col > .social-content-panel {
  background: rgba(21, 34, 51, .94) !important;
  border-color: rgba(255, 255, 255, .13) !important;
}

body[data-theme="dark"] .left-col > .social-object-panel > .ph,
body[data-theme="dark"] .left-col > .social-content-panel > .ph,
body[data-theme="dark"] .left-col > .social-object-panel > .pb,
body[data-theme="dark"] .left-col > .social-content-panel > .pb {
  background: rgba(21, 34, 51, .94) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  color: var(--mg-dark-ink) !important;
}

body[data-theme="dark"] .social-content-panel .content-tabs {
  background: rgba(16, 25, 37, .70) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}
`n/* Match social media help buttons to text.html. */
.ph .ph-help,
.left-col > .panel .ph-help,
.right-col > .panel .ph-help,
.preview-sticky > .panel .ph-help {
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 22px !important;
  margin-left: .4rem !important;
  margin-right: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .72) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  font-family: var(--font) !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all .18s !important;
}

.ph .ph-help:hover,
.left-col > .panel .ph-help:hover,
.right-col > .panel .ph-help:hover,
.preview-sticky > .panel .ph-help:hover {
  background: var(--mg-navy) !important;
  border-color: var(--mg-navy) !important;
  color: #fff !important;
  transform: scale(1.12) !important;
  box-shadow: 0 2px 6px rgba(13, 38, 63, .35) !important;
}

body[data-theme="dark"] .ph .ph-help,
body[data-theme="dark"] .left-col > .panel .ph-help,
body[data-theme="dark"] .right-col > .panel .ph-help,
body[data-theme="dark"] .preview-sticky > .panel .ph-help {
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 255, 255, .18) !important;
  color: var(--mg-dark-ink) !important;
}

body[data-theme="dark"] .ph .ph-help:hover,
body[data-theme="dark"] .left-col > .panel .ph-help:hover,
body[data-theme="dark"] .right-col > .panel .ph-help:hover,
body[data-theme="dark"] .preview-sticky > .panel .ph-help:hover {
  background: var(--mg-dark-gold) !important;
  border-color: var(--mg-dark-gold) !important;
  color: var(--mg-navy) !important;
}

/* Content type help button should match the shared help buttons. */
.left-col > .social-content-panel > .ph .ph-help {
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 22px !important;
  margin-left: .4rem !important;
  margin-right: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .72) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  font-family: var(--font) !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.left-col > .social-content-panel > .ph .ph-help:hover {
  background: var(--mg-navy) !important;
  border-color: var(--mg-navy) !important;
  color: #fff !important;
}

body[data-theme="dark"] .left-col > .social-content-panel > .ph .ph-help {
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 255, 255, .18) !important;
  color: var(--mg-dark-ink) !important;
}

.social-object-panel .ph-help[hidden] {
  display: none !important;
}

.sm-static-001.is-open {
  background: rgba(0, 0, 0, .35) !important;
  pointer-events: all !important;
}

.sm-static-002.is-open {
  right: 0 !important;
}
/* Story duration control: keep label, value and slider readable. */
.story-duration {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px !important;
  margin-top: 14px !important;
  padding: 12px 14px;
  border: 1px solid rgba(13, 38, 63, .10);
  border-radius: 8px;
  background: #fff;
}

.story-dur-lbl {
  width: auto !important;
  min-width: 0;
  color: var(--brand-primary) !important;
  font-size: .82rem !important;
  font-weight: 800;
  line-height: 1.25;
}

.story-duration #durVal {
  justify-self: end;
  min-width: 34px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(13, 38, 63, .06);
  color: var(--ink);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.story-duration input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  height: 4px;
  margin: 4px 0 0;
  accent-color: var(--brand-primary);
}

body[data-theme="dark"] .story-duration {
  background: rgba(16, 25, 37, .70);
  border-color: rgba(255, 255, 255, .12);
}

body[data-theme="dark"] .story-duration #durVal {
  background: rgba(255, 255, 255, .08);
  color: var(--mg-dark-ink);
}
/* Keep object context visible while the social content panel scrolls. */
@media (min-width: 900px) {
  .app > .left-col {
    align-self: stretch !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box;
    padding-bottom: 0 !important;
  }

  .left-col > .social-object-panel {
    flex: 0 0 auto !important;
  }

  .left-col > .social-content-panel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .left-col > .social-content-panel > .ph {
    flex: 0 0 auto;
  }

  .left-col > .social-content-panel > .pb,
  .social-content-panel__body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(13, 38, 63, .22) transparent;
  }

  .left-col > .social-content-panel > .pb::-webkit-scrollbar,
  .social-content-panel__body::-webkit-scrollbar {
    width: 8px;
  }

  .left-col > .social-content-panel > .pb::-webkit-scrollbar-track,
  .social-content-panel__body::-webkit-scrollbar-track {
    background: transparent;
  }

  .left-col > .social-content-panel > .pb::-webkit-scrollbar-thumb,
  .social-content-panel__body::-webkit-scrollbar-thumb {
    background: rgba(13, 38, 63, .22);
    border-radius: 999px;
  }

  .left-col > .social-content-panel > .pb::-webkit-scrollbar-thumb:hover,
  .social-content-panel__body::-webkit-scrollbar-thumb:hover {
    background: rgba(13, 38, 63, .34);
  }
}

@media (max-width: 899px) {
  html,
  body {
    height: auto !important;
    min-height: 100%;
    overflow-y: auto !important;
  }

  .app,
  .app > .left-col,
  .left-col > .social-content-panel,
  .left-col > .social-content-panel > .pb {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

body[data-theme="dark"] .oi-empty {
  background: rgba(201, 154, 95, .08) !important;
  border-left-color: var(--g, var(--mg-gold));
  color: var(--mg-dark-ink) !important;
}

body[data-theme="dark"] .oi-empty strong {
  color: var(--mg-dark-ink) !important;
}

/* Keep the RSS helper available without competing with the primary import action. */
.oi-bar .oi-btn-rss {
  padding: .55rem .75rem;
  background: rgba(13, 38, 63, .04);
  border-color: rgba(13, 38, 63, .08);
  box-shadow: none;
  color: var(--muted, #617086);
  font-size: .78rem;
  font-weight: 700;
}

.oi-bar .oi-btn-rss svg {
  width: 13px;
  height: 13px;
}

.oi-bar .oi-btn-rss:hover {
  background: rgba(13, 38, 63, .07);
  border-color: rgba(13, 38, 63, .12);
  color: var(--mg-navy);
  box-shadow: none;
}

body[data-theme="dark"] .oi-bar .oi-btn-rss {
  background: rgba(232, 238, 244, .08);
  border-color: rgba(232, 238, 244, .12);
  color: rgba(232, 238, 244, .68);
}

body[data-theme="dark"] .oi-bar .oi-btn-rss:hover {
  background: rgba(232, 238, 244, .12);
  border-color: rgba(232, 238, 244, .18);
  color: var(--mg-dark-ink);
}


/* Upload zones are clearer without mixed emoji/icons above the instruction text. */
.media-zone-icon {
  display: none !important;
}

.media-zone-text {
  margin-top: 0;
}


/* Storytelling form selects should follow the shared interface style, without icon-like option text. */
#storytellingSection .fl select,
#stLength {
  width: 100%;
  min-height: 42px;
  padding: .62rem 2.2rem .62rem .78rem;
  border: 1px solid var(--mg-line);
  border-radius: 8px;
  background-color: #fff;
  color: var(--mg-navy);
  font-family: var(--font, 'Inter', sans-serif);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: none;
  cursor: pointer;
}

#storytellingSection .fl select:hover,
#stLength:hover {
  border-color: rgba(13, 38, 63, .28);
}

#storytellingSection .fl select:focus,
#stLength:focus {
  outline: none;
  border-color: var(--mg-gold);
  box-shadow: 0 0 0 2px rgba(168, 119, 66, .14);
}

body[data-theme="dark"] #storytellingSection .fl select,
body[data-theme="dark"] #stLength {
  background-color: rgba(15, 29, 44, .92);
  border-color: rgba(232, 238, 244, .16);
  color: var(--mg-dark-ink);
}


/* Storytelling and video-link info boxes should match the shared tip/callout surface. */
.sm-static-063 {
  margin: .8rem 0 .85rem;
  padding: .72rem .9rem;
  background: rgba(168, 119, 66, .08) !important;
  border: 0 !important;
  border-left: 3px solid var(--g, var(--mg-gold)) !important;
  border-radius: 0 8px 8px 0 !important;
}

.sm-static-064,
.sm-static-069 {
  margin-bottom: .2rem;
  color: var(--text, var(--mg-navy));
  font-family: var(--font, 'Inter', sans-serif);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.35;
}

.sm-static-065 {
  color: var(--text, var(--mg-navy));
  font-family: var(--font, 'Inter', sans-serif);
  font-size: .78rem;
  line-height: 1.45;
}

textarea {
  font-family: var(--font, 'Inter', sans-serif) !important;
}

body[data-theme="dark"] .sm-static-063 {
  background: rgba(201, 154, 95, .08) !important;
  border-left-color: var(--mg-gold) !important;
}

body[data-theme="dark"] .sm-static-064,
body[data-theme="dark"] .sm-static-069,
body[data-theme="dark"] .sm-static-065 {
  color: var(--mg-dark-ink) !important;
}


/* Keep empty live-preview media surfaces clean until actual media is loaded. */
.fb-media .no-media,
.ig-media .no-media {
  display: none !important;
}


/* Textareas should read like the rest of the interface, not oversized editor text. */
textarea {
  font-size: .86rem !important;
  line-height: 1.5;
}


/* Text generation controls should read as one calm toolbar below the textarea. */
.sm-static-080 {
  align-items: flex-start !important;
  gap: .55rem !important;
  margin-top: .5rem;
}

.sm-static-080 .char-count {
  flex: 0 0 auto;
  padding-top: .52rem;
  color: var(--muted, #617086);
  font-size: .72rem;
  font-weight: 700;
}

.sm-static-081 {
  flex: 1 1 100%;
  align-items: center !important;
  gap: .55rem !important;
}

.tone-group {
  flex: 1 1 auto;
  min-width: 240px;
  gap: .18rem !important;
  padding: .2rem !important;
  background: rgba(13, 38, 63, .045) !important;
  border: 1px solid rgba(13, 38, 63, .10) !important;
  border-radius: 8px !important;
}

.tone-group .sm-static-083 {
  margin: 0 .35rem 0 .2rem;
  color: var(--mg-navy);
  font-size: .74rem;
  font-weight: 800;
  white-space: nowrap;
}

.tone-opt span {
  min-height: 30px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: .36rem .62rem !important;
  border-radius: 6px !important;
  color: var(--mg-navy) !important;
  font-size: .74rem !important;
  font-weight: 700 !important;
}

.tone-opt:hover span {
  background: rgba(255, 255, 255, .72) !important;
}

.tone-opt input:checked + span {
  background: var(--mg-navy) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.sm-static-084 {
  min-height: 36px;
  padding: .48rem .9rem !important;
  border-radius: 8px !important;
  font-size: .8rem !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

body[data-theme="dark"] .tone-group {
  background: rgba(232, 238, 244, .06) !important;
  border-color: rgba(232, 238, 244, .12) !important;
}

body[data-theme="dark"] .tone-group .sm-static-083,
body[data-theme="dark"] .tone-opt span {
  color: var(--mg-dark-ink) !important;
}

@media (max-width: 720px) {
  .sm-static-081 {
    align-items: stretch !important;
  }

  .tone-group,
  .sm-static-084 {
    width: 100%;
  }
}


/* Emoji dropdown should feel like a compact picker, with a slim scrollbar. */
.emoji-picker {
  margin-top: .55rem !important;
  padding: .85rem !important;
  max-height: 300px !important;
  border: 1px solid rgba(13, 38, 63, .12) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 12px 34px rgba(13, 38, 63, .12) !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(13, 38, 63, .22) transparent;
}

.emoji-picker::-webkit-scrollbar {
  width: 6px;
}

.emoji-picker::-webkit-scrollbar-track {
  background: transparent;
}

.emoji-picker::-webkit-scrollbar-thumb {
  background: rgba(13, 38, 63, .22);
  border-radius: 999px;
}

.emoji-picker::-webkit-scrollbar-thumb:hover {
  background: rgba(13, 38, 63, .34);
}

.emoji-picker-title,
.emoji-cat-title {
  font-size: .74rem !important;
  font-weight: 800 !important;
  color: var(--mg-navy) !important;
}

.emoji-search {
  margin-bottom: .7rem !important;
}

.emoji-search input {
  background: #fff !important;
  border-color: rgba(13, 38, 63, .14) !important;
  font-family: var(--font, 'Inter', sans-serif);
}

.emoji-grid {
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)) !important;
  gap: .28rem !important;
  padding-top: .35rem;
}

.emoji-grid .e-cell {
  min-height: 34px;
  padding: .28rem !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: rgba(13, 38, 63, .035) !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}

.emoji-grid .e-cell:hover {
  background: rgba(168, 119, 66, .10) !important;
  border-color: rgba(168, 119, 66, .28) !important;
  transform: none !important;
}

.emoji-cat-row {
  min-height: 38px;
  padding: .55rem .35rem !important;
  border-bottom-color: rgba(13, 38, 63, .08) !important;
  font-size: .82rem !important;
  font-weight: 700;
}

body[data-theme="dark"] .emoji-picker {
  background: var(--mg-dark-surface) !important;
  border-color: rgba(232, 238, 244, .14) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .34) !important;
  scrollbar-color: rgba(232, 238, 244, .26) transparent;
}

body[data-theme="dark"] .emoji-picker::-webkit-scrollbar-thumb {
  background: rgba(232, 238, 244, .26);
}

body[data-theme="dark"] .emoji-picker-title,
body[data-theme="dark"] .emoji-cat-title,
body[data-theme="dark"] .emoji-cat-row {
  color: var(--mg-dark-ink) !important;
}

body[data-theme="dark"] .emoji-grid .e-cell {
  background: rgba(232, 238, 244, .07) !important;
}


/* Description length and tone controls share the same segmented-control language. */
.sm-static-078 {
  align-items: flex-end !important;
  gap: .7rem !important;
}

.desc-len-toggle,
.tone-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: .18rem !important;
  min-height: 38px;
  padding: .22rem !important;
  background: rgba(13, 38, 63, .045) !important;
  border: 1px solid rgba(13, 38, 63, .10) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.desc-len-toggle {
  flex: 0 0 auto;
  margin-left: auto;
}

.dlt-label,
.tone-group .sm-static-083 {
  margin: 0 .36rem 0 .22rem !important;
  padding: 0 !important;
  color: var(--mg-navy) !important;
  font-family: var(--font, 'Inter', sans-serif);
  font-size: .74rem !important;
  font-weight: 800 !important;
  line-height: 1;
  white-space: nowrap;
}

.dlt-opt,
.tone-opt {
  display: inline-flex;
  margin-bottom: 0;
  position: relative;
  cursor: pointer;
}

.dlt-opt span,
.tone-opt span {
  min-height: 30px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: .36rem .64rem !important;
  border-radius: 6px !important;
  color: var(--mg-navy) !important;
  font-family: var(--font, 'Inter', sans-serif);
  font-size: .74rem !important;
  font-weight: 700 !important;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none !important;
}

.dlt-opt:hover span,
.tone-opt:hover span {
  background: rgba(255, 255, 255, .76) !important;
}

.dlt-opt input:checked + span,
.tone-opt input:checked + span {
  background: var(--mg-navy) !important;
  color: #fff !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .desc-len-toggle,
body[data-theme="dark"] .tone-group {
  background: rgba(232, 238, 244, .06) !important;
  border-color: rgba(232, 238, 244, .12) !important;
}

body[data-theme="dark"] .dlt-label,
body[data-theme="dark"] .tone-group .sm-static-083,
body[data-theme="dark"] .dlt-opt span,
body[data-theme="dark"] .tone-opt span {
  color: var(--mg-dark-ink) !important;
}

body[data-theme="dark"] .dlt-opt input:checked + span,
body[data-theme="dark"] .tone-opt input:checked + span {
  background: var(--mg-gold) !important;
  color: #101925 !important;
}

@media (max-width: 720px) {
  .sm-static-078 {
    align-items: flex-start !important;
    flex-direction: column;
  }

  .desc-len-toggle {
    width: 100%;
    margin-left: 0;
  }
}

/* Keep shared header/menu controlled by mg-brand, not legacy social-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;
  font-weight: 400;
}

body[data-theme="dark"] .fb-header,
body[data-theme="dark"] .ig-header {
  background: rgba(255, 255, 255, .035);
  border-bottom-color: rgba(255, 255, 255, .10);
}
body[data-theme="dark"] .btn-red{background:rgba(16,25,37,.55)!important;border-color:rgba(248,113,113,.24)!important;color:#fecaca!important}body[data-theme="dark"] .btn-red:hover{background:rgba(127,29,29,.22)!important;border-color:rgba(248,113,113,.34)!important}
#mediaActions .btn-o{min-height:38px;padding:0 12px;border-radius:7px;font-size:12px;font-weight:800}

/* Right text panel: calmer spacing and section labels. */
.right-col > .panel > .pb {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.right-col .fl,
.right-col #hashWrap {
  margin-bottom: 0 !important;
}

.right-col .sm-static-079,
.right-col .sm-static-085,
.right-col #igTxtWrap > label,
.right-col #hashWrap > label {
  display: flex !important;
  align-items: center;
  min-height: 18px;
  margin: 0 0 .5rem !important;
  color: var(--mg-ink-soft-alt, #5b6577) !important;
  font-family: var(--font, 'Inter', sans-serif) !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  line-height: 1.2;
  text-transform: uppercase;
}

.right-col #igTxtWrap > label small {
  margin-left: .35rem;
  color: inherit;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
}

.right-col textarea {
  min-height: 118px;
}

.right-col .sm-static-080,
.right-col .sm-static-087 {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  gap: .5rem !important;
  margin-top: .22rem !important;
}

.right-col .sm-static-080 .char-count,
.right-col .sm-static-087 .char-count {
  align-self: flex-end;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--muted, #617086) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  line-height: 1.2;
}

.right-col .sm-static-081 {
  width: 100%;
  margin-top: .18rem;
}

.right-col .sm-static-087 .sm-static-084 {
  align-self: flex-end;
}

.right-col .tone-group {
  margin-bottom: .35rem !important;
}

.right-col .sm-static-080 + div,
.right-col #igTxtWrap {
  margin-top: .55rem !important;
}

.right-col .emoji-row {
  margin-bottom: .95rem !important;
}

.right-col .emoji-picker.open {
  margin-bottom: 1rem !important;
}

.right-col #hashWrap {
  margin-top: 1rem !important;
}

.right-col .hashtag-chips {
  margin-bottom: 1.1rem !important;
}

.right-col .action-btns {
  margin-top: .55rem !important;
  gap: .55rem !important;
}

body[data-theme="dark"] .right-col .sm-static-079,
body[data-theme="dark"] .right-col .sm-static-085,
body[data-theme="dark"] .right-col #igTxtWrap > label,
body[data-theme="dark"] .right-col #hashWrap > label {
  color: rgba(232, 238, 244, .72) !important;
}

.right-col .fl + div {
  margin-top: .8rem !important;
}

/* Help sidebar: align with the shared interface design.
   Träffar bara en panel som bär sm-static-klasserna — den injicerade panelen
   gör inte det i dag. Värdena hålls ändå i takt med mg-help.css: reglerna har
   högre specificitet och skulle annars lägga hjälpen bakom dikteringsmodalen
   den dag markupen får tillbaka klasserna. */
#helpOverlay.sm-static-001 {
  position: fixed;
  inset: 0;
  z-index: 10490;
  background: rgba(13, 38, 63, .34);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

#helpPanel.sm-static-002 {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10500;
  width: min(430px, 100vw);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid rgba(13, 38, 63, .12);
  box-shadow: -24px 0 60px rgba(13, 38, 63, .18);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
  overflow: hidden;
}

#helpPanel .hp-header {
  min-height: 88px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(13, 38, 63, .10);
  background: #fff;
}

#helpPanel .hp-header-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(13, 38, 63, .06);
  color: var(--mg-navy);
  font-size: 1.12rem;
  font-weight: 800;
}

#helpPanel .sm-static-005 {
  min-width: 0;
}

#helpPanel .sm-static-006 {
  margin: 0;
  color: var(--mg-navy);
  font-family: var(--font, 'Inter', sans-serif);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
}

#helpPanel .sm-static-007 {
  margin-top: .25rem;
  color: var(--mg-ink-soft-alt, #5b6577);
  font-family: var(--font, 'Inter', sans-serif);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
}

#helpPanel .hp-close {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(13, 38, 63, .14);
  border-radius: 50%;
  background: #fff;
  color: var(--mg-navy);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition: background .15s, border-color .15s, color .15s;
}

#helpPanel .hp-close:hover {
  background: rgba(13, 38, 63, .06);
  border-color: rgba(13, 38, 63, .24);
}

#hpBody.sm-static-009 {
  flex: 1 1 auto;
  padding: 22px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(13, 38, 63, .24) transparent;
}

#hpBody::-webkit-scrollbar,
#hpMessages::-webkit-scrollbar {
  width: 6px;
}

#hpBody::-webkit-scrollbar-track,
#hpMessages::-webkit-scrollbar-track {
  background: transparent;
}

#hpBody::-webkit-scrollbar-thumb,
#hpMessages::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(13, 38, 63, .24);
}

#hpBody h4 {
  margin: 1.2rem 0 .45rem;
  color: var(--mg-navy);
  font-family: var(--font, 'Inter', sans-serif);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.25;
  text-transform: uppercase;
}

#hpBody h4:first-child {
  margin-top: 0;
}

#hpBody p {
  margin: 0 0 .85rem;
  color: var(--text, #0d263f);
  font-family: var(--font, 'Inter', sans-serif);
  font-size: .88rem;
  line-height: 1.58;
}

#hpBody strong {
  color: var(--mg-navy);
  font-weight: 800;
}

#hpBody .hp-tip,
#hpBody .hp-warn {
  margin: 1rem 0;
  padding: .82rem .95rem;
  border: 1px solid rgba(168, 119, 66, .18);
  border-left: 3px solid var(--mg-gold);
  border-radius: 8px;
  background: rgba(168, 119, 66, .08) !important;
  color: var(--mg-navy);
  font-family: var(--font, 'Inter', sans-serif);
  font-size: .84rem;
  line-height: 1.5;
}

#helpPanel .sm-static-010 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .65rem;
  padding: 0 22px 12px;
  background: #fff;
}

#helpPanel .sm-static-011 {
  height: 1px;
  background: rgba(13, 38, 63, .10);
}

#helpPanel .sm-static-012 {
  color: var(--mg-ink-soft-alt, #5b6577);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#helpPanel .sm-static-013 {
  flex: 0 0 auto;
  padding: 0 22px 20px;
  background: #fff;
}

#hpMessages.sm-static-014 {
  max-height: 150px;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-bottom: .75rem;
  padding-right: .25rem;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(13, 38, 63, .22) transparent;
}

.hp-chat-bubble {
  max-width: 88%;
  padding: .56rem .72rem;
  border-radius: 10px;
  font-family: var(--font, 'Inter', sans-serif);
  font-size: .8rem;
  line-height: 1.48;
}

.hp-chat-bubble--bot {
  align-self: flex-start;
  background: #f8fafc;
  border: 1px solid rgba(13, 38, 63, .10);
  color: var(--mg-navy);
}

.hp-chat-bubble--user {
  align-self: flex-end;
  background: var(--mg-navy);
  color: #fff;
}

#hpSuggestions.sm-static-015 {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: .75rem;
}

.hp-suggestion {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: .35rem .72rem;
  border: 1px solid rgba(13, 38, 63, .14);
  border-radius: 999px;
  background: #fff;
  color: var(--mg-navy);
  font-family: var(--font, 'Inter', sans-serif);
  font-size: .73rem;
  font-weight: 750;
  cursor: pointer;
}

.hp-suggestion:hover {
  background: rgba(13, 38, 63, .06);
  border-color: rgba(13, 38, 63, .24);
}

#helpPanel .sm-static-016 {
  display: flex;
  gap: .5rem;
  padding: 0;
  border-top: 0;
}

#helpPanel .sm-static-017 {
  min-height: 38px;
  flex: 1 1 auto;
  padding: 0 .85rem;
  border: 1px solid rgba(13, 38, 63, .16);
  border-radius: 8px;
  background: #fff;
  color: var(--mg-navy);
  font-family: var(--font, 'Inter', sans-serif);
  font-size: .84rem;
  outline: none;
}

#helpPanel .sm-static-017:focus {
  border-color: rgba(13, 38, 63, .42);
  box-shadow: 0 0 0 2px rgba(13, 38, 63, .08);
}

#helpPanel .sm-static-018 {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  border: 1px solid var(--mg-navy);
  border-radius: 8px;
  background: var(--mg-navy);
  color: #fff;
  cursor: pointer;
}

@media (max-width: 560px) {
  #helpPanel.sm-static-002 {
    width: 100vw;
  }

  #helpPanel .hp-header,
  #hpBody.sm-static-009,
  #helpPanel .sm-static-013 {
    padding-left: 18px;
    padding-right: 18px;
  }

  #helpPanel .sm-static-010 {
    padding-left: 18px;
    padding-right: 18px;
  }
}

body[data-theme="dark"] #helpOverlay.sm-static-001 {
  background: rgba(0, 0, 0, .52);
}

body[data-theme="dark"] #helpPanel.sm-static-002,
body[data-theme="dark"] #helpPanel .hp-header,
body[data-theme="dark"] #helpPanel .sm-static-010,
body[data-theme="dark"] #helpPanel .sm-static-013 {
  background: var(--mg-dark-surface);
  border-color: rgba(255, 255, 255, .12);
}

body[data-theme="dark"] #helpPanel .hp-header-icon,
body[data-theme="dark"] .hp-chat-bubble--bot {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .12);
}

body[data-theme="dark"] #helpPanel .sm-static-006,
body[data-theme="dark"] #hpBody h4,
body[data-theme="dark"] #hpBody strong,
body[data-theme="dark"] #hpBody p,
body[data-theme="dark"] .hp-chat-bubble--bot {
  color: var(--mg-dark-ink);
}

body[data-theme="dark"] #helpPanel .sm-static-007,
body[data-theme="dark"] #helpPanel .sm-static-012 {
  color: var(--mg-dark-ink-soft);
}

body[data-theme="dark"] #helpPanel .hp-close,
body[data-theme="dark"] .hp-suggestion,
body[data-theme="dark"] #helpPanel .sm-static-017 {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  color: var(--mg-dark-ink);
}

body[data-theme="dark"] #helpPanel .hp-close:hover,
body[data-theme="dark"] .hp-suggestion:hover {
  background: rgba(255, 255, 255, .10);
}

body[data-theme="dark"] #hpBody .hp-tip,
body[data-theme="dark"] #hpBody .hp-warn {
  background: rgba(201, 154, 95, .08) !important;
  border-color: rgba(201, 154, 95, .24);
  border-left-color: var(--mg-dark-gold);
  color: var(--mg-dark-ink);
}

#helpPanel.sm-static-002.is-open {
  transform: translateX(0) !important;
}

#helpOverlay.sm-static-001.is-open {
  opacity: 1 !important;
  pointer-events: all !important;
}

/* Scratchpad chevron should match accordion arrows. */
#spChevron.sm-static-106 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: auto;
  color: var(--brand-primary, var(--mg-navy));
  transform: rotate(180deg);
  transition: transform .2s, color .15s;
}

#spChevron.sm-static-106 svg {
  width: 14px;
  height: 14px;
  display: block;
}

#scratchpadBlock.collapsed #spChevron {
  transform: rotate(0deg);
}

body[data-theme="dark"] #spChevron.sm-static-106 {
  color: var(--mg-dark-gold, var(--mg-gold));
}

/* Image editor modal: light theme is the default interface. */
.editor-overlay {
  background: rgba(13, 38, 63, .34) !important;
  z-index: 520 !important;
  padding: 24px;
}

.editor-box {
  width: min(96vw, 1040px) !important;
  max-height: min(94vh, 880px) !important;
  border: 1px solid rgba(13, 38, 63, .12) !important;
  border-radius: var(--radius, 8px) !important;
  background: #fff !important;
  box-shadow: 0 24px 70px rgba(13, 38, 63, .22) !important;
  color: var(--mg-navy) !important;
}

.editor-header {
  min-height: 64px;
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(13, 38, 63, .10) !important;
  background: #fff !important;
  color: var(--mg-navy) !important;
  font-family: var(--font, 'Inter', sans-serif) !important;
  font-size: .95rem !important;
  font-weight: 800 !important;
}

.editor-header .sm-static-027 {
  align-items: center;
  gap: .5rem;
}

.editor-canvas-wrap {
  min-height: 360px !important;
  max-height: 500px !important;
  padding: 16px 0 !important;
  background:
    linear-gradient(45deg, rgba(13, 38, 63, .045) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(13, 38, 63, .045) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(13, 38, 63, .045) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(13, 38, 63, .045) 75%) !important;
  background-color: #f8fafc !important;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0 !important;
  background-size: 20px 20px !important;
}

.editor-canvas-wrap canvas {
  max-width: min(100%, 920px) !important;
  max-height: 468px !important;
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(13, 38, 63, .16);
}

.editor-tools,
.editor-sliders,
.editor-actions {
  background: #fff !important;
  border-top: 1px solid rgba(13, 38, 63, .10) !important;
}

.editor-tools {
  padding: 14px 18px !important;
  gap: .5rem !important;
}

.editor-sliders {
  padding: 14px 18px !important;
}

.editor-actions {
  min-height: 52px;
  padding: 12px 18px !important;
  align-items: center;
}

.tool-btn {
  min-height: 36px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .48rem !important;
  padding: 0 .78rem !important;
  border: 1px solid rgba(13, 38, 63, .14) !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: var(--mg-navy) !important;
  font-family: var(--font, 'Inter', sans-serif) !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.tool-btn svg,
.editor-header .sm-static-028 svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke-width: 2.2;
}

.editor-header .sm-static-028 {
  min-height: 36px;
  height: 36px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .48rem !important;
  padding: 0 .82rem !important;
  line-height: 1 !important;
}

.tool-btn:hover {
  background: rgba(13, 38, 63, .06) !important;
  border-color: rgba(13, 38, 63, .26) !important;
  color: var(--mg-navy) !important;
}

.tool-btn.active {
  background: var(--mg-navy) !important;
  border-color: var(--mg-navy) !important;
  color: #fff !important;
}

.tool-separator {
  background: rgba(13, 38, 63, .12) !important;
}

.slider-row {
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr) 36px;
  gap: .75rem !important;
  margin-bottom: .65rem !important;
}

.slider-row:last-child {
  margin-bottom: 0 !important;
}

.slider-lbl,
.slider-val,
.filter-name,
#editorInfo {
  color: var(--mg-ink-soft-alt, #5b6577) !important;
  font-family: var(--font, 'Inter', sans-serif) !important;
}

.slider-lbl {
  width: auto !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
}

.slider-val {
  width: auto !important;
  font-size: .74rem !important;
  font-weight: 700 !important;
}

.slider-row input[type=range] {
  accent-color: var(--mg-navy) !important;
}

.filter-strip {
  justify-content: center;
  align-items: flex-start;
  gap: .7rem !important;
  padding: .25rem 0 !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(13, 38, 63, .22) transparent;
}

.filter-opt {
  display: inline-flex;
  min-width: 66px;
  flex-direction: column;
  align-items: center;
}

.filter-swatch {
  width: 58px !important;
  height: 44px !important;
  border: 1px solid rgba(13, 38, 63, .14) !important;
  border-radius: 7px !important;
  background: #f8fafc !important;
}

.filter-opt.active .filter-swatch {
  border-color: var(--mg-navy) !important;
  background: rgba(13, 38, 63, .04) !important;
  box-shadow: 0 0 0 2px rgba(13, 38, 63, .12);
}

.filter-opt.active .filter-name {
  color: var(--mg-navy) !important;
}

.filter-name {
  margin-top: .28rem !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
}

.btn-dark {
  min-height: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(13, 38, 63, .14) !important;
  border-radius: 7px;
  background: #fff !important;
  color: var(--mg-navy) !important;
  font-family: var(--font, 'Inter', sans-serif);
  font-size: .76rem;
  font-weight: 800;
}

.btn-dark:hover {
  background: rgba(13, 38, 63, .06) !important;
  border-color: rgba(13, 38, 63, .26) !important;
  color: var(--mg-navy) !important;
}

.editor-header .btn-red {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0 !important;
  border: 1px solid rgba(13, 38, 63, .14) !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--mg-navy) !important;
}

.editor-header .btn-red:hover {
  background: rgba(13, 38, 63, .06) !important;
  border-color: rgba(13, 38, 63, .24) !important;
}

.overlay-input {
  min-width: 160px !important;
  max-width: min(80%, 520px);
  padding: 4px 8px !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff;
  text-shadow: none !important;
  font-family: var(--font, 'Inter', sans-serif) !important;
  line-height: 1.22;
  cursor: move;
}

.overlay-input:focus {
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.overlay-input.is-dragging {
  cursor: grabbing;
}

body[data-theme="dark"] .editor-overlay {
  background: rgba(0, 0, 0, .58) !important;
}

body[data-theme="dark"] .editor-box,
body[data-theme="dark"] .editor-header,
body[data-theme="dark"] .editor-tools,
body[data-theme="dark"] .editor-sliders,
body[data-theme="dark"] .editor-actions {
  background: var(--mg-dark-surface, #152233) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: var(--mg-dark-ink, #e8eef4) !important;
}

body[data-theme="dark"] .editor-canvas-wrap {
  background-color: #101925 !important;
}

body[data-theme="dark"] .tool-btn,
body[data-theme="dark"] .btn-dark,
body[data-theme="dark"] .editor-header .btn-red {
  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"] .tool-btn:hover,
body[data-theme="dark"] .btn-dark:hover {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  color: var(--mg-dark-ink, #e8eef4) !important;
}

body[data-theme="dark"] .tool-btn.active {
  background: var(--mg-dark-gold, var(--mg-gold)) !important;
  border-color: var(--mg-dark-gold, var(--mg-gold)) !important;
  color: #101925 !important;
}

body[data-theme="dark"] .slider-lbl,
body[data-theme="dark"] .slider-val,
body[data-theme="dark"] .filter-name,
body[data-theme="dark"] #editorInfo {
  color: var(--mg-dark-ink-soft, rgba(232, 238, 244, .72)) !important;
}

body[data-theme="dark"] .slider-row input[type=range] {
  accent-color: var(--mg-dark-gold, var(--mg-gold)) !important;
}

body[data-theme="dark"] .filter-swatch {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .14) !important;
}

@media (max-width: 720px) {
  .editor-overlay {
    padding: 12px;
  }

  .editor-box {
    width: 100% !important;
    max-height: 94vh !important;
  }

  .editor-header {
    align-items: flex-start;
    flex-direction: column;
    gap: .75rem;
  }

  .editor-header .sm-static-027 {
    width: 100%;
    flex-wrap: wrap;
  }

  .editor-header .sm-static-027 .btn-p,
  .editor-header .sm-static-027 .btn-dark {
    flex: 1 1 auto;
  }

  .editor-canvas-wrap {
    min-height: 300px !important;
    max-height: 420px !important;
    padding: 12px 0 !important;
  }
}

/* Story setup intro appears before the object image list in Story mode. */
.story-intro {
  margin: 0 0 14px;
  padding: .72rem .9rem;
  background: rgba(168, 119, 66, .08) !important;
  border: 0 !important;
  border-left: 3px solid var(--g, var(--mg-gold)) !important;
  border-radius: 0 8px 8px 0 !important;
}

.story-intro__title {
  margin-bottom: .18rem;
  color: var(--text, var(--mg-navy));
  font-family: var(--font, 'Inter', sans-serif);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.35;
}

.story-intro__hint {
  color: var(--text, var(--mg-navy));
  font-family: var(--font, 'Inter', sans-serif);
  font-size: .78rem;
  line-height: 1.45;
}

body[data-theme="dark"] .story-intro {
  background: rgba(201, 154, 95, .08) !important;
  border-left-color: var(--mg-gold) !important;
}

body[data-theme="dark"] .story-intro__title,
body[data-theme="dark"] .story-intro__hint {
  color: var(--mg-dark-ink) !important;
}
/* Keep the language picker flat so it does not read as a nested field. */
.lang-bar {
  background: transparent !important;
  border: 0 !important;
  padding: .15rem 0 .35rem !important;
  margin: .65rem 0 .9rem !important;
}

.lang-bar-left {
  min-height: 34px;
  padding: .15rem .35rem .15rem 0;
}

.lang-bar-left svg {
  color: var(--mg-ink-soft-alt, #5b6577);
  stroke: currentColor !important;
}

.lang-bar select {
  width: auto;
  min-width: 126px;
  border: 0 !important;
  border-radius: 6px;
  background: rgba(13, 38, 63, .055) !important;
  color: var(--mg-navy) !important;
  padding: .34rem 1.75rem .34rem .58rem !important;
  box-shadow: none !important;
  outline: 0;
}

.lang-bar select:hover {
  background: rgba(13, 38, 63, .08) !important;
}

.lang-bar select:focus {
  border: 0 !important;
  box-shadow: 0 0 0 2px rgba(13, 38, 63, .10) !important;
}

.lang-bar.non-sv {
  background: transparent !important;
  border: 0 !important;
}

body[data-theme="dark"] .lang-bar {
  background: transparent !important;
  border: 0 !important;
}

body[data-theme="dark"] .lang-bar select {
  background: rgba(255, 255, 255, .075) !important;
  color: var(--mg-dark-ink) !important;
}

body[data-theme="dark"] .lang-bar select:hover {
  background: rgba(255, 255, 255, .11) !important;
}

body[data-theme="dark"] .lang-bar select:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .14) !important;
}
/* Help sidebar compact empty-chat state and object accordion behavior. */
#helpPanel .sm-static-010 {
  border-top: 0 !important;
}

#helpPanel .sm-static-016 {
  margin-bottom: 6px !important;
}

#hpMessages.sm-static-014:empty {
  display: none !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.social-object-panel > .ph {
  cursor: pointer;
}

.social-object-panel > .ph .ph-arrow {
  margin-left: auto;
}

.social-object-panel > .ph .ph-help[hidden] + .ph-arrow {
  margin-left: auto;
}

/* Right panel controls: match text.html tone-row and compact hashtags. */
.right-col .desc-len-toggle,.right-col .tone-group{display:grid!important;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);align-items:center!important;gap:3px!important;min-height:0!important;padding:8px!important;border:1px solid rgba(13,38,63,.10)!important;border-radius:8px!important;background:#fff!important;box-shadow:none!important}.right-col .tone-group{grid-template-columns:auto repeat(4,minmax(0,1fr));width:100%}.right-col .desc-len-toggle{margin-left:auto!important}.right-col .dlt-label,.right-col .tone-group .sm-static-083{margin:0 7px 0 2px!important;color:var(--ink,var(--mg-navy))!important;font-size:11px!important;font-weight:900!important;line-height:1.2!important;white-space:nowrap}.right-col .dlt-opt,.right-col .tone-opt{min-width:0;margin:0!important}.right-col .dlt-opt span,.right-col .tone-opt span{width:100%;min-height:30px!important;padding:0 8px!important;border:0!important;border-radius:999px!important;background:transparent!important;color:var(--text-soft,var(--mg-ink-soft-alt,#5b6577))!important;font-size:11px!important;font-weight:850!important;line-height:1!important;box-shadow:none!important}.right-col .dlt-opt:hover span,.right-col .tone-opt:hover span{color:var(--ink,var(--mg-navy))!important;background:rgba(13,38,63,.055)!important}.right-col .dlt-opt input:checked+span,.right-col .tone-opt input:checked+span{background:var(--ink,var(--mg-navy))!important;color:#fff!important}
.right-col .hashtag-chips{gap:6px!important;margin:.35rem 0 1rem!important}.right-col .chip{min-height:32px;padding:0 .62rem!important;border:1px solid rgba(13,38,63,.14)!important;border-radius:8px!important;background:#fff!important;color:var(--mg-navy)!important;font-size:.73rem!important;font-weight:750!important;gap:0!important;box-shadow:none!important;transform:none!important}.right-col .chip::before{display:none!important}.right-col .chip:hover{background:rgba(13,38,63,.045)!important;border-color:rgba(13,38,63,.26)!important;filter:none!important;transform:none!important}.right-col .chip.active{background:rgba(13,38,63,.92)!important;border-color:rgba(13,38,63,.92)!important;color:#fff!important}.right-col .chip-add{min-height:32px;padding:0 .7rem!important;border-radius:8px!important;border-style:dashed!important;font-size:.73rem!important;font-weight:750!important}.right-col .chip-input.open{margin-top:2px}
body[data-theme=dark] .right-col .desc-len-toggle,body[data-theme=dark] .right-col .tone-group{background:rgba(16,25,37,.70)!important;border-color:rgba(255,255,255,.12)!important}body[data-theme=dark] .right-col .dlt-label,body[data-theme=dark] .right-col .tone-group .sm-static-083{color:var(--mg-dark-ink)!important}body[data-theme=dark] .right-col .dlt-opt span,body[data-theme=dark] .right-col .tone-opt span{color:var(--mg-dark-ink-soft)!important}body[data-theme=dark] .right-col .dlt-opt:hover span,body[data-theme=dark] .right-col .tone-opt:hover span{background:rgba(255,255,255,.08)!important;color:var(--mg-dark-ink)!important}body[data-theme=dark] .right-col .dlt-opt input:checked+span,body[data-theme=dark] .right-col .tone-opt input:checked+span,body[data-theme=dark] .right-col .chip.active{background:#f3efe8!important;border-color:#f3efe8!important;color:#0d263f!important}body[data-theme=dark] .right-col .chip{background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.14)!important;color:var(--mg-dark-ink)!important}@media (max-width:720px){.right-col .tone-group{grid-template-columns:1fr 1fr}.right-col .tone-group .sm-static-083{grid-column:1/-1;margin-bottom:2px!important}}

/* 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;
}

/* Preview copy row cleanup 2026-07-01 */
.preview-copy-row {
  background: transparent !important;
  border: 0 !important;
}
/* Facebook text language picker placement 2026-07-01 */
.right-col .sm-static-080 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center !important;
  gap: .42rem .7rem !important;
  margin-top: .28rem !important;
}

.right-col .sm-static-080 .lang-bar {
  justify-self: start;
  width: auto;
  margin: 0 !important;
  padding: 0 !important;
}

.right-col .sm-static-080 .lang-bar-left {
  min-height: 30px;
  padding: 0 !important;
}

.right-col .sm-static-080 .char-count {
  justify-self: end;
  align-self: center;
}

.right-col .sm-static-080 .sm-static-081 {
  grid-column: 1 / -1;
}

@media (max-width: 620px) {
  .right-col .sm-static-080 {
    grid-template-columns: 1fr;
  }

  .right-col .sm-static-080 .char-count {
    justify-self: start;
  }
}
/* Platform text visibility and language placement 2026-07-01 */
.text-lang-slot {
  display: flex;
  justify-content: flex-start;
  min-width: 0;
}

.right-col .sm-static-087 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center !important;
  gap: .42rem .7rem !important;
  margin-top: .28rem !important;
}

.right-col .sm-static-087 .text-lang-slot {
  justify-self: start;
}

.right-col .sm-static-087 .lang-bar {
  width: auto;
  margin: 0 !important;
  padding: 0 !important;
}

.right-col .sm-static-087 .char-count {
  justify-self: end;
  align-self: center;
}

.right-col .sm-static-087 .sm-static-084 {
  grid-column: 1 / -1;
  justify-self: end;
}

@media (max-width: 620px) {
  .right-col .sm-static-087 {
    grid-template-columns: 1fr;
  }

  .right-col .sm-static-087 .char-count,
  .right-col .sm-static-087 .sm-static-084 {
    justify-self: start;
  }
}
/* Taller single-platform text fields 2026-07-01 */
.right-col > .panel.single-platform-text #fbTxt,
.right-col > .panel.single-platform-text #igTxt {
  min-height: 190px;
}

@media (max-width: 720px) {
  .right-col > .panel.single-platform-text #fbTxt,
  .right-col > .panel.single-platform-text #igTxt {
    min-height: 165px;
  }
}
/* Emoji target selector 2026-07-01 */
.emoji-target-row {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin: 0 0 .45rem;
  padding: .2rem;
  border: 1px solid rgba(13, 38, 63, .10);
  border-radius: 8px;
  background: rgba(13, 38, 63, .045);
}

.emoji-target-row > span {
  margin: 0 .35rem 0 .25rem;
  color: var(--mg-navy);
  font-family: var(--font, 'Inter', sans-serif);
  font-size: .72rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.emoji-target-btn {
  min-height: 28px;
  padding: 0 .62rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--mg-ink-soft-alt, #5b6577);
  font-family: var(--font, 'Inter', sans-serif);
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
}

.emoji-target-btn:hover {
  background: rgba(255, 255, 255, .78);
  color: var(--mg-navy);
}

.emoji-target-btn.active {
  background: var(--mg-navy);
  color: #fff;
}

.emoji-target-row.single {
  background: transparent;
  border-color: transparent;
  padding-left: 0;
}

body[data-theme=dark] .emoji-target-row {
  background: rgba(232, 238, 244, .06);
  border-color: rgba(232, 238, 244, .12);
}

body[data-theme=dark] .emoji-target-row > span {
  color: var(--mg-dark-ink);
}

body[data-theme=dark] .emoji-target-btn {
  color: var(--mg-dark-ink-soft);
}

body[data-theme=dark] .emoji-target-btn:hover {
  background: rgba(255, 255, 255, .08);
  color: var(--mg-dark-ink);
}

body[data-theme=dark] .emoji-target-btn.active {
  background: #f3efe8;
  color: #0d263f;
}
/* Pilot delivery polish: social content flow 2026-07-01 */
.social-content-panel__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.social-content-panel .content-tabs {
  margin-bottom: .15rem;
}

#mediaSection {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.story-intro,
.sm-static-063 {
  margin: 0 !important;
}
#storyIntro + #carouselIntro {
  margin-top: .45rem !important;
}

#storySection,
#storytellingSection,
#videolinkSection {
  margin-top: 0 !important;
}

#storySection .story-slides,
#storySection .btn-row.sm-static-062 {
  display: none !important;
}

.social-media-library {
  display: flex;
  flex-direction: column;
  gap: .95rem;
  margin-top: .15rem;
}

.social-media-library__intro {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  padding: .75rem .85rem;
  border-left: 3px solid rgba(168, 119, 66, .55);
  border-radius: 8px;
  background: rgba(168, 119, 66, .08);
  color: var(--mg-navy);
}

.social-media-library__intro strong {
  font-size: .84rem;
  font-weight: 850;
}

.social-media-library__intro span {
  color: var(--mg-ink-soft-alt, #5b6577);
  font-size: .76rem;
  line-height: 1.45;
}

.social-media-library__head,
#pilotImgsSection .sm-static-051 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  margin-bottom: .55rem;
}

.social-media-library__head span,
#pilotImgsSection .sm-static-051 span {
  color: var(--mg-ink-soft-alt, #5b6577);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.social-media-library__head small {
  color: var(--mg-ink-soft-alt, #5b6577);
  font-size: .72rem;
  font-weight: 700;
}

#mediaGrid:empty,
#mediaActions[style*='display: none'] {
  display: none !important;
}

.pilot-img-card {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 10px;
  background: #f4f1ec;
  cursor: grab;
  transition: opacity .15s, border-color .15s, box-shadow .15s, transform .15s;
}

.pilot-img-card:hover {
  box-shadow: 0 8px 20px rgba(13, 38, 63, .10);
}

.pilot-img-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
}

.pilot-img-check {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  transition: all .15s;
}

.pilot-img-order {
  position: absolute;
  bottom: 6px;
  left: 6px;
  z-index: 2;
  min-width: 23px;
  height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(13, 38, 63, .92);
  color: #fff;
  font-size: .68rem;
  font-weight: 850;
}

.pilot-source-badge,
.pilot-edited-badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--mg-navy);
  font-size: .58rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pilot-source-badge--user {
  background: rgba(168, 119, 66, .92);
  color: #fff;
}

.pilot-edited-badge {
  right: auto;
  left: 36px;
  background: rgba(22, 101, 52, .92);
  color: #fff;
}

.pilot-img-action {
  position: absolute;
  top: 5px;
  z-index: 3;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, .95);
  cursor: pointer;
  transition: all .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

.pilot-img-action--edit {
  color: #0d263f;
  border: 1px solid rgba(168, 119, 66, .5);
}

.pilot-img-action--edit:hover {
  background: #a87742;
  border-color: #a87742;
  color: #fff;
}

.pilot-img-action--delete {
  right: 5px;
  color: #8c2d2d;
  border: 1px solid rgba(220,38,38,.35);
}

.pilot-img-action--delete:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

/* Pilot delivery polish: calmer right text panel 2026-07-01 */
.right-col .platform-tabs {
  margin-bottom: .8rem !important;
}

.right-col #fbTxtWrap,
.right-col #igTxtWrap,
.right-col #hashWrap {
  padding-top: .7rem;
  border-top: 1px solid rgba(13, 38, 63, .08);
}

.right-col #fbTxtWrap {
  padding-top: 0;
  border-top: 0;
}

.right-col .sm-static-078 {
  align-items: center !important;
  margin-bottom: .5rem !important;
}

.right-col textarea {
  font-size: .86rem !important;
  line-height: 1.55 !important;
}

.right-col .emoji-target-row {
  margin-top: .1rem;
}

.right-col .emoji-row {
  margin-bottom: .75rem !important;
}

.right-col #hashWrap {
  margin-top: .85rem !important;
}

.right-col .hashtag-chips {
  margin-bottom: .9rem !important;
}

.right-col .action-btns {
  padding-top: .85rem;
  border-top: 1px solid rgba(13, 38, 63, .08);
}

body[data-theme='dark'] .social-media-library__intro {
  background: rgba(168, 119, 66, .12);
}

body[data-theme='dark'] .social-media-library__intro,
body[data-theme='dark'] .social-media-library__intro span {
  color: var(--mg-dark-ink);
}

body[data-theme='dark'] .pilot-img-card {
  background: rgba(255,255,255,.06);
}

body[data-theme='dark'] .right-col #fbTxtWrap,
body[data-theme='dark'] .right-col #igTxtWrap,
body[data-theme='dark'] .right-col #hashWrap,
body[data-theme='dark'] .right-col .action-btns {
  border-color: rgba(255,255,255,.10);
}
/* Story/Reel settings accordion and image-list clarity 2026-07-01 */
.social-settings-accordion {
  border: 1px solid rgba(168, 119, 66, .28);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.social-settings-accordion[style*='display: none'] {
  display: none !important;
}

.social-settings-accordion > summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem .9rem;
  background: rgba(168, 119, 66, .10);
  color: var(--mg-navy);
  cursor: pointer;
  list-style: none;
}

.social-settings-accordion > summary::-webkit-details-marker {
  display: none;
}

.social-settings-accordion > summary::after {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .16s ease;
}

.social-settings-accordion[open] > summary::after {
  transform: rotate(225deg);
}

.social-settings-accordion > summary span {
  font-size: .86rem;
  font-weight: 850;
}

.social-settings-accordion > summary small {
  margin-left: auto;
  color: var(--mg-ink-soft-alt, #5b6577);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.social-settings-accordion__body {
  display: flex;
  flex-direction: column;
  gap: .78rem;
  padding: .9rem;
}

.social-settings-accordion .story-slides,
.social-settings-accordion #stDropZone,
.social-settings-accordion .social-reel-image-grid,
.social-settings-accordion .btn-row.sm-static-062 {
  display: none !important;
}

#pilotImgsSection {
  display: flex;
  flex-direction: column;
}

#pilotImgsSection .sm-static-051 {
  order: 1;
}

#pilotImgHint {
  order: 2;
  margin: 0 0 .55rem !important;
  color: var(--mg-ink-soft-alt, #5b6577) !important;
  font-size: .74rem !important;
  font-weight: 750 !important;
}

#pilotImgGrid {
  order: 3;
}

.pilot-source-badge:not(.pilot-source-badge--user) {
  display: none !important;
}

.pilot-img-order {
  display: none !important;
}

.pilot-img-card {
  cursor: pointer;
}

.pilot-img-card.is-included {
  box-shadow: 0 0 0 1px rgba(13, 38, 63, .12);
}

body[data-theme='dark'] .social-settings-accordion {
  background: rgba(16,25,37,.78);
  border-color: rgba(201,154,95,.26);
}

body[data-theme='dark'] .social-settings-accordion > summary {
  background: rgba(201,154,95,.12);
  color: var(--mg-dark-ink);
}

body[data-theme='dark'] .social-settings-accordion > summary small,
body[data-theme='dark'] #pilotImgHint {
  color: var(--mg-dark-ink-soft) !important;
}
/* Final pilot fixes for media settings visibility 2026-07-01 */
.social-media-library__manual:empty {
  display: none !important;
}

.social-settings-accordion {
  display: block;
}

.social-settings-accordion[style*='display: none'] {
  display: none !important;
}

#manualMediaSection {
  margin: 0;
}

#manualMediaSection #mediaGrid:empty + #mediaActions {
  display: none !important;
}

#vidPrevBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Hide Story/Reel settings outside their content type 2026-07-01 */
.social-settings-accordion[hidden] {
  display: none !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Image hint and content type visibility cleanup 2026-07-01 */
.social-media-library[hidden] {
  display: none !important;
}

.social-media-library__intro {
  display: none !important;
}

.social-image-hint {
  order: 2;
  margin: 0 0 .58rem;
  color: var(--mg-ink-soft-alt, #5b6577);
  font-size: .76rem;
  font-weight: 500;
  line-height: 1.45;
}

#pilotImgsSection .sm-static-051 {
  order: 1;
}

.social-image-hint {
  order: 2;
}

#pilotImgGrid {
  order: 3;
}

body[data-theme='dark'] .social-image-hint {
  color: var(--mg-dark-ink-soft);
}
/* Robust Story/Reel settings accordion visibility 2026-07-01 */
.social-settings-accordion.is-hidden {
  display: none !important;
}

.social-settings-accordion:not(.is-hidden) {
  display: block !important;
}

.social-settings-accordion:not(.is-hidden)[open] > .social-settings-accordion__body {
  display: flex !important;
}

.social-settings-accordion:not(.is-hidden):not([open]) > .social-settings-accordion__body {
  display: none !important;
}
/* Final robust Story/Reel settings accordions 2026-07-01 */
#storySection:not(.is-hidden),
#storytellingSection:not(.is-hidden) {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  height: auto !important;
  min-height: 58px !important;
  overflow: visible !important;
  opacity: 1 !important;
  margin-top: 0 !important;
}

#storySection.is-hidden,
#storytellingSection.is-hidden {
  display: none !important;
}

#storySection[open] > .social-settings-accordion__body,
#storytellingSection[open] > .social-settings-accordion__body {
  display: flex !important;
  visibility: visible !important;
  height: auto !important;
  opacity: 1 !important;
}

#storySection:not([open]) > .social-settings-accordion__body,
#storytellingSection:not([open]) > .social-settings-accordion__body {
  display: none !important;
}
/* Story preview play button polish 2026-07-01 */
.story-preview-play span {
  display: inline-block;
}

body[data-theme="dark"] .story-preview-play {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: var(--mg-dark-ink) !important;
}

body[data-theme="dark"] .story-preview-play:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.24) !important;
}
/* Story preview playback state 2026-07-01 */
.story-preview-play.is-playing {
  background: var(--mg-navy, #0d263f) !important;
  border-color: var(--mg-navy, #0d263f) !important;
  color: #fff !important;
}

.story-preview-play.is-playing:hover {
  background: #284157 !important;
  border-color: #284157 !important;
}

body[data-theme="dark"] .story-preview-play.is-playing {
  background: var(--mg-dark-ink) !important;
  border-color: var(--mg-dark-ink) !important;
  color: #0d263f !important;
}
/* Explicit Story/Reel settings accordions 2026-07-01 */
.social-settings-accordion__header {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem .9rem;
  border: 0;
  background: rgba(168, 119, 66, .10);
  color: var(--mg-navy);
  cursor: pointer;
  font-family: var(--font);
  text-align: left;
}

.social-settings-accordion__header::after {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .16s ease;
  flex-shrink: 0;
}

.social-settings-accordion.is-open > .social-settings-accordion__header::after {
  transform: rotate(225deg);
}

.social-settings-accordion__header span {
  font-size: .86rem;
  font-weight: 850;
}

.social-settings-accordion__header small {
  margin-left: auto;
  color: var(--mg-ink-soft-alt, #5b6577);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.social-settings-accordion:not(.is-hidden) {
  display: block !important;
}

.social-settings-accordion.is-hidden {
  display: none !important;
}

.social-settings-accordion > .social-settings-accordion__body {
  display: none !important;
}

.social-settings-accordion.is-open > .social-settings-accordion__body {
  display: flex !important;
  flex-direction: column;
  gap: .78rem;
  padding: .9rem;
}

body[data-theme='dark'] .social-settings-accordion__header {
  background: rgba(201,154,95,.12);
  color: var(--mg-dark-ink);
}

body[data-theme='dark'] .social-settings-accordion__header small {
  color: var(--mg-dark-ink-soft) !important;
}
/* Override legacy details/open rules after explicit accordion conversion 2026-07-01 */
#storySection.is-open > .social-settings-accordion__body,
#storytellingSection.is-open > .social-settings-accordion__body {
  display: flex !important;
  flex-direction: column !important;
  gap: .78rem !important;
  padding: .9rem !important;
  visibility: visible !important;
  height: auto !important;
  opacity: 1 !important;
}

#storySection:not(.is-open) > .social-settings-accordion__body,
#storytellingSection:not(.is-open) > .social-settings-accordion__body {
  display: none !important;
}
/* Match Story/Reel settings headers to social import accordion 2026-07-01 */
.social-settings-accordion__header.social-import-toggle {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 14px;
  border: 0;
  background: #fff;
  color: var(--brand-primary, var(--mg-navy));
  cursor: pointer;
  font-family: var(--font);
  text-align: left;
}

.social-settings-accordion__header.social-import-toggle::after {
  content: none !important;
}

.social-settings-accordion .social-import-toggle__chev {
  color: var(--brand-primary, var(--mg-navy));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .16s ease;
}

.social-settings-accordion.is-open .social-import-toggle__chev {
  transform: rotate(180deg);
}

.social-settings-accordion__header .social-import-heading__title,
.social-settings-accordion__header .social-import-heading__sub {
  font-family: var(--font);
}

body[data-theme="dark"] .social-settings-accordion__header.social-import-toggle {
  background: rgba(255,255,255,.04) !important;
  color: var(--mg-dark-ink) !important;
}

body[data-theme="dark"] .social-settings-accordion .social-import-toggle__chev,
body[data-theme="dark"] .social-settings-accordion__header .social-import-heading__title,
body[data-theme="dark"] .social-settings-accordion__header .social-import-heading__sub {
  color: var(--mg-dark-ink) !important;
}
#storySection.is-open:not(.is-hidden),
#storytellingSection.is-open:not(.is-hidden) {
  flex: 0 0 auto !important;
  height: max-content !important;
  min-height: max-content !important;
}
#storySection > .social-settings-accordion__header,
#storytellingSection > .social-settings-accordion__header {
  border-bottom: 1px solid rgba(168, 119, 66, .24) !important;
}
#storyIntro + #carouselIntro + #mediaZone,
#storyIntro + #mediaZone {
  margin-top: .45rem !important;
}
/* Video preview placeholder 2026-07-01 */
.social-video-empty {
  min-height: 180px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .34rem;
  padding: 1.35rem;
  color: var(--mg-navy, #0d263f);
  text-align: center;
  background: linear-gradient(135deg, rgba(13, 38, 63, .045), rgba(168, 119, 66, .055));
}

.social-video-empty__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 2px;
  background: rgba(13, 38, 63, .1);
  color: var(--mg-navy, #0d263f);
  font-size: .9rem;
  line-height: 1;
}

.social-video-empty__title {
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.25;
}

.social-video-empty span {
  color: var(--mg-ink-soft-alt, #5b6577);
  font-size: .76rem;
  font-weight: 600;
}

body[data-theme='dark'] .social-video-empty {
  background: rgba(255,255,255,.055);
  color: var(--mg-dark-ink, #f7f2ea);
}

body[data-theme='dark'] .social-video-empty__icon {
  background: rgba(255,255,255,.1);
  color: var(--mg-dark-ink, #f7f2ea);
}

/* Right panel generate controls 2026-07-01 */
.right-col .sm-static-081 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: .55rem !important;
  width: 100% !important;
}

.right-col .sm-static-081 .tone-group {
  width: auto !important;
  min-width: 0 !important;
}

.right-col .sm-static-081 .sm-static-084,
.right-col .sm-static-087 .sm-static-084 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .42rem !important;
  min-height: 36px !important;
  padding: 0 .9rem !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
}

.right-col .sm-static-081 .sm-static-084 {
  justify-self: end !important;
}

.right-col .sm-static-081 .sm-static-084 svg,
.right-col .sm-static-087 .sm-static-084 svg {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
  display: block !important;
}

@media (max-width: 720px) {
  .right-col .sm-static-081 {
    grid-template-columns: 1fr !important;
  }

  .right-col .sm-static-081 .sm-static-084 {
    justify-self: stretch !important;
    width: 100% !important;
  }
}

/* Clean social media panel surfaces 2026-07-01 */
.left-col > .social-object-panel,
.left-col > .social-content-panel,
.preview-sticky > .panel,
.right-col > .panel {
  background: #fff !important;
  border: 1px solid rgba(13, 38, 63, .12) !important;
  box-shadow: none !important;
}

.left-col > .social-object-panel:hover,
.left-col > .social-content-panel:hover,
.preview-sticky > .panel:hover,
.right-col > .panel:hover {
  box-shadow: none !important;
}

body[data-theme="dark"] .left-col > .social-object-panel,
body[data-theme="dark"] .left-col > .social-content-panel,
body[data-theme="dark"] .preview-sticky > .panel,
body[data-theme="dark"] .right-col > .panel {
  background: var(--mg-dark-surface, #152233) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  box-shadow: none !important;
}

/* Social text generation setting and separate language rows 2026-07-01 */
.right-col .social-generate-setting {
  display: grid;
  gap: .55rem;
  margin: 0 0 .85rem;
  padding: .78rem;
  border: 1px solid rgba(13, 38, 63, .10);
  border-radius: 8px;
  background: rgba(13, 38, 63, .025);
}

.right-col .social-generate-setting__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
}

.right-col .social-generate-setting__head > span {
  color: var(--mg-navy);
  font-size: .78rem;
  font-weight: 850;
}

.right-col .social-generate-setting__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  min-height: 34px;
  padding: 0 .85rem;
  border-radius: 8px;
  white-space: nowrap;
}

.right-col .social-generate-setting__button svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

.right-col .social-generate-targets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(13, 38, 63, .10);
  border-radius: 8px;
  background: #fff;
}

.right-col .social-generate-target {
  min-width: 0;
  margin: 0;
}

.right-col .social-generate-target input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.right-col .social-generate-target span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 6px;
  color: var(--mg-ink-soft-alt, #5b6577);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
}

.right-col .social-generate-target input:checked + span {
  background: var(--mg-navy);
  color: #fff;
}

.right-col .text-lang-slot .lang-bar {
  margin: 0 !important;
}

body[data-theme="dark"] .right-col .social-generate-setting {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .12);
}

body[data-theme="dark"] .right-col .social-generate-setting__head > span {
  color: var(--mg-dark-ink, #e8eef4);
}

body[data-theme="dark"] .right-col .social-generate-targets {
  background: rgba(16, 25, 37, .70);
  border-color: rgba(255, 255, 255, .12);
}

body[data-theme="dark"] .right-col .social-generate-target span {
  color: var(--mg-dark-ink-soft, #b8c3cf);
}

body[data-theme="dark"] .right-col .social-generate-target input:checked + span {
  background: #f3efe8;
  color: #0d263f;
}

/* Dark-mode polish for social controls 2026-07-01 */
body[data-theme="dark"] .social-content-panel .ctab {
  background: rgba(255, 255, 255, .045) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  color: var(--mg-dark-ink, #e8eef4) !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-theme="dark"] .social-content-panel .ctab .ctab-icon {
  color: var(--mg-dark-ink, #e8eef4) !important;
}

body[data-theme="dark"] .social-content-panel .ctab:hover {
  background: rgba(255, 255, 255, .075) !important;
  border-color: rgba(201, 154, 95, .34) !important;
  color: var(--mg-dark-ink, #e8eef4) !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .social-content-panel .ctab.active {
  background: rgba(201, 154, 95, .18) !important;
  border-color: rgba(201, 154, 95, .52) !important;
  color: var(--mg-dark-ink, #e8eef4) !important;
  box-shadow: inset 0 0 0 1px rgba(201, 154, 95, .18) !important;
}

body[data-theme="dark"] .social-content-panel .ctab.active .ctab-icon {
  color: var(--mg-dark-ink, #e8eef4) !important;
}

body[data-theme="dark"] #helpPanel .hp-body .hp-tip,
body[data-theme="dark"] #hpBody .hp-tip {
  background: rgba(168, 119, 66, .12) !important;
  border-color: rgba(201, 154, 95, .42) !important;
  color: var(--mg-dark-ink, #e8eef4) !important;
}

body[data-theme="dark"] #scratchpadBlock {
  background: rgba(255, 255, 255, .035) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

body[data-theme="dark"] #scratchpadBlock .sp-header {
  background: rgba(255, 255, 255, .055) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  color: var(--mg-dark-ink, #e8eef4) !important;
}

body[data-theme="dark"] #scratchpadBlock .sp-header svg,
body[data-theme="dark"] #scratchpadBlock #spChevron {
  color: var(--mg-dark-ink, #e8eef4) !important;
  stroke: currentColor !important;
}

body[data-theme="dark"] #scratchpadBody {
  background: transparent !important;
}

body[data-theme="dark"] #scratchpadTxt {
  background: rgba(255, 255, 255, .055) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  color: var(--mg-dark-ink, #e8eef4) !important;
}

body[data-theme="dark"] .sp-act-btn {
  background: rgba(255, 255, 255, .055) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  color: var(--mg-dark-ink, #e8eef4) !important;
}

body[data-theme="dark"] .sp-act-btn:hover {
  background: rgba(201, 154, 95, .16) !important;
  border-color: rgba(201, 154, 95, .42) !important;
  color: var(--mg-dark-ink, #e8eef4) !important;
}

body[data-theme="dark"] .sp-act-btn.sp-act-danger {
  color: #f2b7b7 !important;
  border-color: rgba(242, 183, 183, .34) !important;
}

body[data-theme="dark"] .sp-act-btn.sp-act-danger:hover {
  background: rgba(127, 29, 29, .24) !important;
  border-color: rgba(242, 183, 183, .48) !important;
  color: #ffd6d6 !important;
}

/* Calmer active hashtags 2026-07-01 */
.right-col .chip.active {
  background: #edf7ff !important;
  border-color: #c9e3f6 !important;
  color: var(--mg-navy) !important;
  box-shadow: none !important;
}

.right-col .chip.active:hover {
  background: #e4f2fc !important;
  border-color: #b7d8ef !important;
  color: var(--mg-navy) !important;
}

body[data-theme="dark"] .right-col .chip.active {
  background: rgba(180, 213, 238, .18) !important;
  border-color: rgba(180, 213, 238, .36) !important;
  color: var(--mg-dark-ink, #e8eef4) !important;
}

/* Match social text toggles to text.html AI tone row 2026-07-01 */
.right-col .sm-static-078 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
  gap: .45rem !important;
}

.right-col .desc-len-toggle,
.right-col .tone-group {
  display: grid !important;
  align-items: center !important;
  gap: 3px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 8px !important;
  border: 1px solid rgba(13, 38, 63, .10) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.right-col .desc-len-toggle {
  grid-template-columns: auto repeat(2, minmax(0, 1fr)) !important;
}

.right-col .tone-group {
  grid-template-columns: auto repeat(4, minmax(0, 1fr)) !important;
}

.right-col .dlt-label,
.right-col .tone-group .sm-static-083 {
  margin: 0 7px 0 2px !important;
  color: var(--ink, var(--mg-navy)) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.right-col .dlt-opt,
.right-col .tone-opt {
  min-width: 0 !important;
  margin: 0 !important;
}

.right-col .dlt-opt span,
.right-col .tone-opt span {
  width: 100% !important;
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(13, 38, 63, .055) !important;
  color: var(--text-soft, var(--mg-ink-soft-alt, #5b6577)) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.right-col .dlt-opt:hover span,
.right-col .tone-opt:hover span {
  color: var(--ink, var(--mg-navy)) !important;
  background: rgba(13, 38, 63, .085) !important;
}

.right-col .dlt-opt input:checked + span,
.right-col .tone-opt input:checked + span {
  background: var(--ink, var(--mg-navy)) !important;
  color: #fff !important;
}

body[data-theme="dark"] .right-col .desc-len-toggle,
body[data-theme="dark"] .right-col .tone-group {
  background: rgba(16, 25, 37, .70) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

body[data-theme="dark"] .right-col .dlt-label,
body[data-theme="dark"] .right-col .tone-group .sm-static-083 {
  color: var(--mg-dark-ink, #e8eef4) !important;
}

body[data-theme="dark"] .right-col .dlt-opt span,
body[data-theme="dark"] .right-col .tone-opt span {
  background: rgba(255, 255, 255, .07) !important;
  color: var(--mg-dark-ink-soft, #b8c3cf) !important;
}

body[data-theme="dark"] .right-col .dlt-opt:hover span,
body[data-theme="dark"] .right-col .tone-opt:hover span {
  background: rgba(255, 255, 255, .10) !important;
  color: var(--mg-dark-ink, #e8eef4) !important;
}

body[data-theme="dark"] .right-col .dlt-opt input:checked + span,
body[data-theme="dark"] .right-col .tone-opt input:checked + span {
  background: #f3efe8 !important;
  color: #0d263f !important;
}

@media (max-width: 720px) {
  .right-col .desc-len-toggle,
  .right-col .tone-group {
    grid-template-columns: 1fr 1fr !important;
  }

  .right-col .dlt-label,
  .right-col .tone-group .sm-static-083 {
    grid-column: 1 / -1 !important;
    margin: 0 0 2px !important;
  }

  .right-col .dlt-opt span,
  .right-col .tone-opt span {
    border-radius: 6px !important;
  }
}

/* Passive modern Facebook preview actions 2026-07-01 */
.fb-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  border-top: 1px solid rgba(13, 38, 63, .10) !important;
  background: transparent !important;
}

.fb-act {
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .34rem !important;
  padding: 0 .45rem !important;
  border-right: 1px solid rgba(13, 38, 63, .08) !important;
  color: #667085 !important;
  cursor: default !important;
  pointer-events: none !important;
  user-select: none !important;
  font-size: .72rem !important;
  font-weight: 650 !important;
}

.fb-act:last-child {
  border-right: 0 !important;
}

.fb-act svg {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body[data-theme="dark"] .fb-actions {
  border-color: rgba(255, 255, 255, .12) !important;
}

body[data-theme="dark"] .fb-act {
  border-color: rgba(255, 255, 255, .10) !important;
  color: var(--mg-dark-ink-soft, #b8c3cf) !important;
}

/* Right panel UX cleanup and per-field emoji 2026-07-01 */
.right-col .social-generate-setting {
  gap: .68rem !important;
  padding: .85rem !important;
  background: #fff !important;
  border-color: rgba(13, 38, 63, .12) !important;
  box-shadow: none !important;
}

.right-col .social-ai-options {
  display: grid;
  gap: .5rem;
}

.right-col .social-generate-setting .desc-len-toggle,
.right-col .social-generate-setting .tone-group {
  margin: 0 !important;
}

.right-col .social-text-card {
  display: grid;
  gap: .55rem !important;
  margin: 0 0 .85rem !important;
  padding: .85rem !important;
  border: 1px solid rgba(13, 38, 63, .10) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.right-col .social-text-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
}

.right-col .social-text-card__head label {
  margin: 0 !important;
  color: var(--mg-navy) !important;
  font-size: .78rem !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.right-col .social-text-card__head small {
  color: var(--mg-ink-soft-alt, #5b6577) !important;
  font-size: .72rem !important;
  font-weight: 750 !important;
}

.right-col .social-text-card__meta {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  align-items: center;
  gap: .55rem;
}

.right-col .social-text-card__meta .lang-bar {
  width: max-content !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.right-col .social-text-card__meta .lang-bar-left {
  min-height: 34px;
  padding: 0 .55rem;
  border: 1px solid rgba(13, 38, 63, .12);
  border-radius: 8px;
  background: rgba(13, 38, 63, .025);
}

.right-col .social-text-card__meta select {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 1.6rem 0 .35rem !important;
  border: 0 !important;
  background-color: transparent !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
}

.right-col .social-text-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .3rem;
  min-width: 0;
}

.right-col .social-text-tools__label {
  margin-right: .2rem;
  color: var(--mg-ink-soft-alt, #5b6577);
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}

.right-col .emoji-chip,
.right-col .social-text-tools .emoji-more-btn {
  min-width: 32px;
  min-height: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(13, 38, 63, .12) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--mg-navy) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.right-col .emoji-chip {
  padding: 0 !important;
  font-size: .94rem !important;
  line-height: 1 !important;
}

.right-col .social-text-tools .emoji-more-btn {
  gap: .32rem;
  padding: 0 .62rem !important;
  font-size: .73rem !important;
  font-weight: 850 !important;
  white-space: nowrap;
}

.right-col .emoji-chip:hover,
.right-col .social-text-tools .emoji-more-btn:hover,
.right-col .social-text-tools .emoji-more-btn.open {
  background: rgba(13, 38, 63, .055) !important;
  border-color: rgba(13, 38, 63, .24) !important;
  transform: none !important;
}

.right-col .social-text-card > .emoji-picker {
  margin: .15rem 0 0 !important;
  border-color: rgba(13, 38, 63, .12) !important;
  box-shadow: none !important;
}

.right-col #hashWrap {
  margin-top: .2rem !important;
}

.right-col .emoji-target-row,
.right-col .emoji-row {
  display: none !important;
}

body[data-theme="dark"] .right-col .social-generate-setting,
body[data-theme="dark"] .right-col .social-text-card {
  background: rgba(16, 25, 37, .86) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

body[data-theme="dark"] .right-col .social-text-card__head label,
body[data-theme="dark"] .right-col .social-generate-setting__head > span {
  color: var(--mg-dark-ink, #e8eef4) !important;
}

body[data-theme="dark"] .right-col .social-text-card__head small,
body[data-theme="dark"] .right-col .social-text-tools__label {
  color: var(--mg-dark-ink-soft, #b8c3cf) !important;
}

body[data-theme="dark"] .right-col .social-text-card__meta .lang-bar-left,
body[data-theme="dark"] .right-col .emoji-chip,
body[data-theme="dark"] .right-col .social-text-tools .emoji-more-btn {
  background: rgba(255, 255, 255, .055) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  color: var(--mg-dark-ink, #e8eef4) !important;
}

body[data-theme="dark"] .right-col .emoji-chip:hover,
body[data-theme="dark"] .right-col .social-text-tools .emoji-more-btn:hover,
body[data-theme="dark"] .right-col .social-text-tools .emoji-more-btn.open {
  background: rgba(255, 255, 255, .09) !important;
  border-color: rgba(255, 255, 255, .22) !important;
}

@media (max-width: 720px) {
  .right-col .social-text-card__meta {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .right-col .social-text-tools {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .right-col .social-text-tools__label {
    flex: 0 0 100%;
  }
}

/* Social text card visibility follows selected platform 2026-07-01 */
.right-col #igTxtWrap.sm-static-030:not([style]) {
  display: none !important;
}

.right-col #fbTxtWrap[style*="display: none"],
.right-col #igTxtWrap[style*="display: none"] {
  display: none !important;
}

.right-col #fbTxtWrap[style*="display: block"],
.right-col #igTxtWrap[style*="display: block"],
.right-col #fbTxtWrap:not([style*="display: none"]):not(.sm-static-030),
.right-col #igTxtWrap:not([style*="display: none"]):not(.sm-static-030) {
  display: grid !important;
}

/* Cleaner per-field emoji trigger 2026-07-01 */
.right-col .social-text-tools {
  justify-content: flex-end !important;
}

.right-col .social-text-tools .emoji-chip,
.right-col .social-text-tools__label {
  display: none !important;
}

.right-col .social-text-tools .emoji-more-btn {
  width: auto !important;
  min-width: 132px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 .72rem !important;
  gap: .42rem !important;
  font-size: .76rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.right-col .social-text-tools .emoji-more-btn svg {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
}

.right-col .social-text-tools .emoji-more-btn .chev {
  margin-left: .12rem;
  font-size: .68rem;
  opacity: .72;
}

.right-col .social-text-tools .emoji-more-btn.open .chev {
  transform: rotate(180deg);
}

.right-col .social-text-card > .emoji-picker.open {
  display: block !important;
}

@media (max-width: 720px) {
  .right-col .social-text-tools .emoji-more-btn {
    width: 100% !important;
  }
}

/* Social text meta columns for emoji button 2026-07-01 */
.right-col .social-text-card__meta {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.right-col .social-text-tools {
  width: max-content !important;
  justify-self: end !important;
}

@media (max-width: 720px) {
  .right-col .social-text-tools {
    width: 100% !important;
    justify-self: stretch !important;
  }
}

/* Generate target choices only in both mode 2026-07-01 */
.right-col .social-generate-setting:not(.show-targets) .social-generate-targets {
  display: none !important;
}

.right-col .social-generate-setting.show-targets .social-generate-targets {
  display: grid !important;
}

/* Calmer generate text toggles 2026-07-01 */
.right-col .social-generate-setting .dlt-opt input:checked + span,
.right-col .social-generate-setting .tone-opt input:checked + span {
  background: rgba(168, 119, 66, .12) !important;
  color: var(--mg-navy, #0d263f) !important;
  box-shadow: inset 0 0 0 1px rgba(168, 119, 66, .26) !important;
}

.right-col .social-generate-setting .dlt-opt:hover span,
.right-col .social-generate-setting .tone-opt:hover span {
  background: rgba(168, 119, 66, .08) !important;
  color: var(--mg-navy, #0d263f) !important;
}

body[data-theme="dark"] .right-col .social-generate-setting .dlt-opt input:checked + span,
body[data-theme="dark"] .right-col .social-generate-setting .tone-opt input:checked + span {
  background: rgba(201, 154, 95, .22) !important;
  color: var(--mg-dark-ink, #e8eef4) !important;
  box-shadow: inset 0 0 0 1px rgba(201, 154, 95, .34) !important;
}

body[data-theme="dark"] .right-col .social-generate-setting .dlt-opt:hover span,
body[data-theme="dark"] .right-col .social-generate-setting .tone-opt:hover span {
  background: rgba(201, 154, 95, .16) !important;
  color: var(--mg-dark-ink, #e8eef4) !important;
}

/* Pub prep modal follows shared interface 2026-07-01 */
#pubPrepOverlay {
  --mgpf-ink: var(--mg-navy, #0d263f) !important;
  --mgpf-ink2: var(--mg-navy-2, #183653) !important;
  --mgpf-gold: var(--mg-gold, #a87742) !important;
  --mgpf-gold-dark: var(--mg-gold-dark, #7b5730) !important;
  --mgpf-paper: #fff !important;
  --mgpf-paper2: #fff !important;
  --mgpf-line: rgba(13, 38, 63, .12) !important;
  --mgpf-muted: var(--mg-ink-soft-alt, #5b6577) !important;
  z-index: 1400 !important;
  padding: clamp(1rem, 3vw, 2rem) !important;
  background: rgba(13, 38, 63, .44) !important;
  backdrop-filter: blur(4px) !important;
  font-family: var(--font, 'Inter', system-ui, sans-serif) !important;
}

#pubPrepOverlay .mgpf-modal {
  width: min(920px, 94vw) !important;
  max-height: min(88vh, 780px) !important;
  background: #fff !important;
  border: 1px solid rgba(13, 38, 63, .14) !important;
  border-radius: 8px !important;
  box-shadow: 0 24px 70px rgba(13, 38, 63, .22) !important;
}

#pubPrepOverlay .mgpf-head {
  padding: 1.15rem 1.35rem 1rem !important;
  background: #fff !important;
  border-bottom: 1px solid rgba(13, 38, 63, .12) !important;
  box-shadow: none !important;
}

#pubPrepOverlay .mgpf-head::after { display: none !important; }

#pubPrepOverlay .mgpf-eyebrow {
  margin-bottom: .35rem !important;
  color: var(--mg-ink-soft-alt, #5b6577) !important;
  font-size: .7rem !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
}

#pubPrepOverlay .mgpf-title,
#pubPrepOverlay .mgpf-card h3,
#pubPrepOverlay .mgpf-q-title,
#pubPrepOverlay .mgpf-summary h4,
#pubPrepOverlay .mgpf-budget-amt,
#pubPrepOverlay .mgpf-foot-hint,
#pubPrepOverlay .mgpf-empty {
  font-family: var(--font, 'Inter', system-ui, sans-serif) !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
}

#pubPrepOverlay .mgpf-title {
  color: var(--mg-navy, #0d263f) !important;
  font-size: 1.18rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

#pubPrepOverlay .mgpf-title em {
  color: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
}

#pubPrepOverlay .mgpf-sub {
  max-width: 58ch !important;
  color: var(--mg-ink-soft-alt, #5b6577) !important;
  font-size: .86rem !important;
  line-height: 1.45 !important;
}

#pubPrepOverlay .mgpf-close {
  width: 40px !important;
  height: 40px !important;
  /* Nollställ den ärvda knapp-paddingen (.7rem 1.15rem) — annars äter den upp
     innehållsbredden i 40px-knappen och stäng-X:et krymps till ~1px (osynligt). */
  padding: 0 !important;
  border: 1px solid rgba(13, 38, 63, .12) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--mg-navy, #0d263f) !important;
  box-shadow: 0 8px 20px rgba(13, 38, 63, .08) !important;
}
/* Extra säkring: X-ikonen ska aldrig flex-krympas under sin 16px. */
#pubPrepOverlay .mgpf-close svg { flex-shrink: 0; }

#pubPrepOverlay .mgpf-close:hover {
  background: rgba(13, 38, 63, .055) !important;
  border-color: rgba(13, 38, 63, .18) !important;
  transform: none !important;
}

#pubPrepOverlay .mgpf-body {
  padding: 1.25rem 1.35rem 1.35rem !important;
  background: #fff !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(13, 38, 63, .26) transparent !important;
}

#pubPrepOverlay .mgpf-body::-webkit-scrollbar { width: 7px !important; }
#pubPrepOverlay .mgpf-body::-webkit-scrollbar-track { background: transparent !important; }
#pubPrepOverlay .mgpf-body::-webkit-scrollbar-thumb { background: rgba(13, 38, 63, .24) !important; border-radius: 999px !important; }
#pubPrepOverlay .mgpf-cards,
#pubPrepOverlay .mgpf-opts { gap: .75rem !important; }

#pubPrepOverlay .mgpf-card,
#pubPrepOverlay .mgpf-opt,
#pubPrepOverlay .mgpf-summary,
#pubPrepOverlay .mgpf-budget,
#pubPrepOverlay .mgpf-custom,
#pubPrepOverlay .mgpf-tmpl {
  background: #fff !important;
  border: 1px solid rgba(13, 38, 63, .12) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

#pubPrepOverlay .mgpf-card {
  min-height: 164px !important;
  padding: 1rem !important;
  gap: .55rem !important;
}

#pubPrepOverlay .mgpf-card:hover,
#pubPrepOverlay .mgpf-opt:hover,
#pubPrepOverlay .mgpf-tmpl:hover {
  border-color: rgba(13, 38, 63, .24) !important;
  background: rgba(13, 38, 63, .025) !important;
  box-shadow: none !important;
  transform: none !important;
}

#pubPrepOverlay .mgpf-card.rec,
#pubPrepOverlay .mgpf-opt.selected {
  background: rgba(168, 119, 66, .08) !important;
  border-color: rgba(168, 119, 66, .36) !important;
  color: var(--mg-navy, #0d263f) !important;
  box-shadow: inset 0 0 0 1px rgba(168, 119, 66, .12) !important;
}

#pubPrepOverlay .mgpf-card.rec::before,
#pubPrepOverlay .mgpf-opt-badge {
  min-height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: rgba(168, 119, 66, .16) !important;
  color: #7b5730 !important;
  font-family: var(--font, 'Inter', system-ui, sans-serif) !important;
  font-size: .64rem !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#pubPrepOverlay .mgpf-card.rec::before {
  top: .75rem !important;
  right: .75rem !important;
  left: auto !important;
  padding: .12rem .5rem !important;
}

#pubPrepOverlay .mgpf-card-ico {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: rgba(13, 38, 63, .065) !important;
  color: var(--mg-navy, #0d263f) !important;
}

#pubPrepOverlay .mgpf-card.rec .mgpf-card-ico {
  background: rgba(13, 38, 63, .09) !important;
  color: var(--mg-navy, #0d263f) !important;
}

#pubPrepOverlay .mgpf-card h3,
#pubPrepOverlay .mgpf-opt-title,
#pubPrepOverlay .mgpf-tmpl-name {
  color: var(--mg-navy, #0d263f) !important;
  font-size: .92rem !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

#pubPrepOverlay .mgpf-card-desc,
#pubPrepOverlay .mgpf-opt-sub,
#pubPrepOverlay .mgpf-tmpl-meta,
#pubPrepOverlay .mgpf-acct-note,
#pubPrepOverlay .mgpf-budget-meta,
#pubPrepOverlay .mgpf-q-sub {
  color: var(--mg-ink-soft-alt, #5b6577) !important;
  font-size: .78rem !important;
  line-height: 1.48 !important;
}

#pubPrepOverlay .mgpf-card-vals {
  margin-top: auto !important;
  padding-top: .55rem !important;
  border-top: 1px solid rgba(13, 38, 63, .08) !important;
}

#pubPrepOverlay .mgpf-val {
  color: var(--mg-navy, #0d263f) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
}

#pubPrepOverlay .mgpf-val::before { color: rgba(13, 38, 63, .5) !important; }
#pubPrepOverlay .mgpf-kbd { display: none !important; }

#pubPrepOverlay .mgpf-annot,
#pubPrepOverlay .mgpf-gate,
#pubPrepOverlay .sm-static-120 {
  background: rgba(168, 119, 66, .08) !important;
  border: 0 !important;
  border-left: 3px solid rgba(168, 119, 66, .42) !important;
  border-radius: 8px !important;
  color: var(--mg-navy, #0d263f) !important;
  font-size: .8rem !important;
  line-height: 1.5 !important;
}

#pubPrepOverlay .mgpf-annot strong,
#pubPrepOverlay .mgpf-gate strong {
  color: var(--mg-navy, #0d263f) !important;
  font-weight: 850 !important;
}

#pubPrepOverlay .mgpf-stepper { margin-bottom: 1.2rem !important; padding: .15rem 0 .35rem !important; }

#pubPrepOverlay .mgpf-wdot {
  width: 28px !important;
  height: 28px !important;
  border: 1px solid rgba(13, 38, 63, .18) !important;
  background: #fff !important;
  color: var(--mg-ink-soft-alt, #5b6577) !important;
  font-size: .76rem !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

#pubPrepOverlay .mgpf-wstep.active .mgpf-wdot,
#pubPrepOverlay .mgpf-wstep.done .mgpf-wdot,
#pubPrepOverlay .mgpf-q-eyebrow .num,
#pubPrepOverlay .mgpf-bp.active {
  background: var(--mg-navy, #0d263f) !important;
  border-color: var(--mg-navy, #0d263f) !important;
  color: #fff !important;
  box-shadow: none !important;
}

#pubPrepOverlay .mgpf-wline,
#pubPrepOverlay .mgpf-wstep.done .mgpf-wline { background: rgba(13, 38, 63, .14) !important; }

#pubPrepOverlay .mgpf-wlabel,
#pubPrepOverlay .mgpf-q-eyebrow,
#pubPrepOverlay .mgpf-acct-label,
#pubPrepOverlay .mgpf-field label,
#pubPrepOverlay .mgpf-au-key {
  color: var(--mg-ink-soft-alt, #5b6577) !important;
  font-size: .72rem !important;
  font-weight: 850 !important;
  letter-spacing: .02em !important;
}

#pubPrepOverlay .mgpf-wstep.active .mgpf-wlabel,
#pubPrepOverlay .mgpf-wstep.done .mgpf-wlabel { color: var(--mg-navy, #0d263f) !important; }

#pubPrepOverlay .mgpf-q-title {
  margin-bottom: .28rem !important;
  color: var(--mg-navy, #0d263f) !important;
  font-size: 1.08rem !important;
  font-weight: 850 !important;
}

#pubPrepOverlay .mgpf-summary h4 {
  margin-bottom: .7rem !important;
  color: var(--mg-navy, #0d263f) !important;
  font-size: .9rem !important;
  font-weight: 850 !important;
}

#pubPrepOverlay .mgpf-summary h4::before { display: none !important; }
#pubPrepOverlay .mgpf-au-row { grid-template-columns: minmax(92px, 132px) minmax(0, 1fr) !important; gap: .45rem .8rem !important; }
#pubPrepOverlay .mgpf-au-val { color: var(--mg-navy, #0d263f) !important; font-size: .82rem !important; font-weight: 650 !important; }

#pubPrepOverlay .mgpf-field input,
#pubPrepOverlay .mgpf-field select,
#pubPrepOverlay .mgpf-acct-sel {
  min-height: 40px !important;
  border: 1px solid rgba(13, 38, 63, .14) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--mg-navy, #0d263f) !important;
  font-family: var(--font, 'Inter', system-ui, sans-serif) !important;
  font-size: .84rem !important;
  box-shadow: none !important;
}

#pubPrepOverlay .mgpf-field input:focus,
#pubPrepOverlay .mgpf-field select:focus,
#pubPrepOverlay .mgpf-acct-sel:focus {
  border-color: rgba(168, 119, 66, .56) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 2px rgba(168, 119, 66, .12) !important;
}

#pubPrepOverlay .mgpf-ai-btn,
#pubPrepOverlay .mgpf-addcity,
#pubPrepOverlay .mgpf-bp,
#pubPrepOverlay .mgpf-tmpl-act,
#pubPrepOverlay .mgpf-btn-back,
#pubPrepOverlay .mgpf-foot-link {
  border: 1px solid rgba(13, 38, 63, .12) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--mg-navy, #0d263f) !important;
  font-family: var(--font, 'Inter', system-ui, sans-serif) !important;
  font-size: .8rem !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

#pubPrepOverlay .mgpf-ai-btn:hover,
#pubPrepOverlay .mgpf-addcity:hover,
#pubPrepOverlay .mgpf-bp:hover:not(.active),
#pubPrepOverlay .mgpf-tmpl-act:hover,
#pubPrepOverlay .mgpf-btn-back:hover,
#pubPrepOverlay .mgpf-foot-link:hover {
  background: rgba(13, 38, 63, .055) !important;
  border-color: rgba(13, 38, 63, .22) !important;
  color: var(--mg-navy, #0d263f) !important;
}

#pubPrepOverlay .mgpf-btn-next {
  min-height: 40px !important;
  border: 1px solid var(--mg-navy, #0d263f) !important;
  border-radius: 8px !important;
  background: var(--mg-navy, #0d263f) !important;
  color: #fff !important;
  font-family: var(--font, 'Inter', system-ui, sans-serif) !important;
  font-size: .82rem !important;
  font-weight: 850 !important;
  box-shadow: 0 12px 26px rgba(13, 38, 63, .12) !important;
}

#pubPrepOverlay .mgpf-btn-next:hover { background: var(--mg-navy-2, #183653) !important; border-color: var(--mg-navy-2, #183653) !important; transform: none !important; }
#pubPrepOverlay .mgpf-btn-next.publish { background: var(--mg-navy, #0d263f) !important; }
#pubPrepOverlay .mgpf-city-del,
#pubPrepOverlay .mgpf-tmpl-act.del { color: #9b2f2f !important; }
#pubPrepOverlay .mgpf-budget { padding: 1rem !important; }
#pubPrepOverlay .mgpf-budget-amt { color: var(--mg-navy, #0d263f) !important; font-size: 1.65rem !important; font-weight: 850 !important; }
#pubPrepOverlay .mgpf-budget-cur { color: var(--mg-ink-soft-alt, #5b6577) !important; font-style: normal !important; font-size: .86rem !important; font-weight: 700 !important; }
#pubPrepOverlay .mgpf-range { accent-color: var(--mg-navy, #0d263f) !important; }

#pubPrepOverlay .mgpf-pill {
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(13, 38, 63, .065) !important;
  color: var(--mg-navy, #0d263f) !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
}

#pubPrepOverlay .mgpf-foot { margin-top: 1.05rem !important; padding-top: 1rem !important; border-top: 1px solid rgba(13, 38, 63, .08) !important; }

#pubPrepOverlay .mgpf-modal-foot {
  padding: .82rem 1.35rem !important;
  border-top: 1px solid rgba(13, 38, 63, .1) !important;
  background: rgba(13, 38, 63, .025) !important;
  color: var(--mg-ink-soft-alt, #5b6577) !important;
}

#pubPrepOverlay .mgpf-foot-hint { color: var(--mg-ink-soft-alt, #5b6577) !important; font-size: .8rem !important; font-weight: 650 !important; }

@media (max-width: 760px) {
  #pubPrepOverlay { align-items: stretch !important; padding: .75rem !important; }
  #pubPrepOverlay .mgpf-modal { width: 100% !important; max-height: calc(100vh - 1.5rem) !important; }
  #pubPrepOverlay .mgpf-head,
  #pubPrepOverlay .mgpf-body,
  #pubPrepOverlay .mgpf-modal-foot { padding-left: 1rem !important; padding-right: 1rem !important; }
  #pubPrepOverlay .mgpf-stepper { overflow-x: auto !important; gap: .65rem !important; }
  #pubPrepOverlay .mgpf-wstep { min-width: 72px !important; }
  #pubPrepOverlay .mgpf-modal-foot,
  #pubPrepOverlay .mgpf-foot { align-items: stretch !important; flex-direction: column !important; }
  #pubPrepOverlay .mgpf-foot .sm-static-121,
  #pubPrepOverlay .mgpf-btn-next,
  #pubPrepOverlay .mgpf-btn-back { width: 100% !important; justify-content: center !important; }
}

body[data-theme="dark"] #pubPrepOverlay {
  --mgpf-paper: #172436 !important;
  --mgpf-paper2: rgba(255, 255, 255, .055) !important;
  --mgpf-line: rgba(255, 255, 255, .13) !important;
  --mgpf-ink: var(--mg-dark-ink, #e8eef4) !important;
  --mgpf-ink2: var(--mg-dark-ink, #e8eef4) !important;
  --mgpf-muted: var(--mg-dark-ink-soft, #b8c3cf) !important;
  background: rgba(5, 10, 17, .62) !important;
}

body[data-theme="dark"] #pubPrepOverlay .mgpf-modal,
body[data-theme="dark"] #pubPrepOverlay .mgpf-head,
body[data-theme="dark"] #pubPrepOverlay .mgpf-body { background: #172436 !important; border-color: rgba(255, 255, 255, .12) !important; }

body[data-theme="dark"] #pubPrepOverlay .mgpf-title,
body[data-theme="dark"] #pubPrepOverlay .mgpf-card h3,
body[data-theme="dark"] #pubPrepOverlay .mgpf-opt-title,
body[data-theme="dark"] #pubPrepOverlay .mgpf-q-title,
body[data-theme="dark"] #pubPrepOverlay .mgpf-summary h4,
body[data-theme="dark"] #pubPrepOverlay .mgpf-au-val,
body[data-theme="dark"] #pubPrepOverlay .mgpf-val { color: var(--mg-dark-ink, #e8eef4) !important; }

body[data-theme="dark"] #pubPrepOverlay .mgpf-sub,
body[data-theme="dark"] #pubPrepOverlay .mgpf-card-desc,
body[data-theme="dark"] #pubPrepOverlay .mgpf-opt-sub,
body[data-theme="dark"] #pubPrepOverlay .mgpf-tmpl-meta,
body[data-theme="dark"] #pubPrepOverlay .mgpf-acct-note,
body[data-theme="dark"] #pubPrepOverlay .mgpf-budget-meta,
body[data-theme="dark"] #pubPrepOverlay .mgpf-q-sub,
body[data-theme="dark"] #pubPrepOverlay .mgpf-wlabel,
body[data-theme="dark"] #pubPrepOverlay .mgpf-q-eyebrow,
body[data-theme="dark"] #pubPrepOverlay .mgpf-acct-label,
body[data-theme="dark"] #pubPrepOverlay .mgpf-field label,
body[data-theme="dark"] #pubPrepOverlay .mgpf-au-key,
body[data-theme="dark"] #pubPrepOverlay .mgpf-foot-hint { color: var(--mg-dark-ink-soft, #b8c3cf) !important; }

body[data-theme="dark"] #pubPrepOverlay .mgpf-card,
body[data-theme="dark"] #pubPrepOverlay .mgpf-opt,
body[data-theme="dark"] #pubPrepOverlay .mgpf-summary,
body[data-theme="dark"] #pubPrepOverlay .mgpf-budget,
body[data-theme="dark"] #pubPrepOverlay .mgpf-custom,
body[data-theme="dark"] #pubPrepOverlay .mgpf-tmpl,
body[data-theme="dark"] #pubPrepOverlay .mgpf-field input,
body[data-theme="dark"] #pubPrepOverlay .mgpf-field select,
body[data-theme="dark"] #pubPrepOverlay .mgpf-acct-sel,
body[data-theme="dark"] #pubPrepOverlay .mgpf-close,
body[data-theme="dark"] #pubPrepOverlay .mgpf-ai-btn,
body[data-theme="dark"] #pubPrepOverlay .mgpf-addcity,
body[data-theme="dark"] #pubPrepOverlay .mgpf-bp,
body[data-theme="dark"] #pubPrepOverlay .mgpf-tmpl-act,
body[data-theme="dark"] #pubPrepOverlay .mgpf-btn-back,
body[data-theme="dark"] #pubPrepOverlay .mgpf-foot-link,
body[data-theme="dark"] #pubPrepOverlay .mgpf-wdot {
  background: rgba(255, 255, 255, .055) !important;
  border-color: rgba(255, 255, 255, .13) !important;
  color: var(--mg-dark-ink, #e8eef4) !important;
}

body[data-theme="dark"] #pubPrepOverlay .mgpf-card.rec,
body[data-theme="dark"] #pubPrepOverlay .mgpf-opt.selected,
body[data-theme="dark"] #pubPrepOverlay .mgpf-annot,
body[data-theme="dark"] #pubPrepOverlay .mgpf-gate,
body[data-theme="dark"] #pubPrepOverlay .sm-static-120 {
  background: rgba(201, 154, 95, .16) !important;
  border-color: rgba(201, 154, 95, .32) !important;
  color: var(--mg-dark-ink, #e8eef4) !important;
}

body[data-theme="dark"] #pubPrepOverlay .mgpf-modal-foot { background: rgba(255, 255, 255, .035) !important; border-color: rgba(255, 255, 255, .1) !important; }

body[data-theme="dark"] #pubPrepOverlay .mgpf-btn-next,
body[data-theme="dark"] #pubPrepOverlay .mgpf-wstep.active .mgpf-wdot,
body[data-theme="dark"] #pubPrepOverlay .mgpf-wstep.done .mgpf-wdot,
body[data-theme="dark"] #pubPrepOverlay .mgpf-q-eyebrow .num,
body[data-theme="dark"] #pubPrepOverlay .mgpf-bp.active {
  background: var(--mg-dark-ink, #e8eef4) !important;
  border-color: var(--mg-dark-ink, #e8eef4) !important;
  color: #0d263f !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   FIX: högerkolumnens panel klippte bort sitt eget innehåll
   ─────────────────────────────────────────────────────────────────────────
   Symptom: "Förbered publicering" (.action-btns, sista sektionen i panelen)
   gick inte att nå — och eftersom "Anslut Facebook" bara fanns inne i det
   flödet blev även Meta-anslutningen oåtkomlig. Ett fel, två symptom.

   Orsak: .right-col är en kolumn-flexbox med låst höjd (se blocket ~rad 216).
   Panelen fick `overflow: hidden` (rad ~1763, för att klippa mot border-radius).
   Per flexbox-specen sätter overflow != visible flex-objektets automatiska
   minimihöjd till 0 — så panelen krympte UNDER sitt innehåll i stället för att
   trycka ut kolumnen. Kolumnens overflow-y:auto fick då inget att scrolla, och
   `hidden` (inte `auto`) gav ingen scrollbar på panelen heller. ~146px föll bort.

   Fix: panelen får egen scroll. Rubriken görs sticky så man ser vilken panel
   man är i medan innehållet rullar. overflow-x lämnas hidden → radius klipps
   fortfarande. Rör inte .preview-sticky, som delar regeln på rad 1757.
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 900px){
  .right-col > .panel{
    overflow-y: auto;
  }
  .right-col > .panel > .ph{
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--card-bg); /* temastyrd (mg-tokens/mg-dark) — måste vara opak */
  }
}

/* Facebook-anslutning i kampanjwizardens steg 1. Följer .cw-helper/.cw-label-note
   för färg och storlek; knappen återanvänder .cw-btn .cw-btn-secondary. */
.cw-connect-row{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-top:.15rem;
}
.cw-connect-status{
  font-size:.82rem; font-weight:700; color:var(--mg-ink-soft-alt,#5b6577);
  display:inline-flex; align-items:center; gap:.4rem;
}
.cw-connect-status::before{
  content:''; width:8px; height:8px; border-radius:50%;
  background:rgba(13,38,63,.28); flex:0 0 auto;
}
.cw-connect-status.is-connected{ color:#15803d }
.cw-connect-status.is-connected::before{ background:#16a34a }

/* ==================================================================
   FIX 2026-07-19: Innehallspanelens scroller (.left-col >
   .social-content-panel > .pb) far aldrig krympa under anvandbar
   hojd nar #pubBanner (grid-rad 1 i .app) ar oppen.
   Appendad SIST i filen — vinner pa kallordning mot !important-
   reglerna i raderna ~2676-2713 (samma selektorer = samma
   specificitet, samma media query).
   Matt (globalt box-sizing:border-box, mg-brand.css):
     240px anvandbart innehall + 2*20px .pb-padding = 280px
     .ph 64px inkl 1px border-bottom + .pb 280px + panelram 2*1px = 346px
   ================================================================== */
@media (min-width: 900px) {
  /* 1. Scroller-golv: overskuggar min-height:0 !important. */
  .left-col > .social-content-panel > .pb,
  .social-content-panel__body {
    min-height: 280px !important;
  }

  /* 2. Panel-golv: utan detta kryms panelen (flex:1 1 auto, min-height:0
        !important) under ph+pb-golvet och panelens overflow:hidden klipper
        scrollerns nederkant. */
  .left-col > .social-content-panel {
    min-height: 346px !important;
  }

  /* 3. Gracios fallback: nar objektpanel + panel-golv inte ryms (hog banner /
        lag viewport) scrollar hela kolumnen i stallet for att klippa.
        Longhands vinner over shorthand overflow:hidden !important pa
        kallordning. I normalfallet (allt ryms) uppstar ingen kolumn-scroll —
        designen "objektkontext synlig" behalls ointakt. */
  .app > .left-col {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

/* Lankar i gula infoboxar (annons-gate + banner-status): lasbara pa gul
   botten, tydligt klickbara. Galler aven #pubBannerAdStatus som ateranvander
   .mgpf-gate utanfor overlayen. */
.mgpf-gate a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

/* ==================================================================
   FIX 2026-07-20: Meta-anslutningens UI monteras i statusraden.
   meta-connect.js renderUI() har hela tiden kunnat rita anslut-knapp,
   sidvaljare och "Koppla fran"-meny, men skrev till #mgMetaSlot — ett
   element som saknades i ALLA HTML-filer. Darfor fanns det ingen vag
   att koppla fran, och ingen vag att byta Facebook-sida. Elementet ar
   nu monterat; harunder stilarna som aldrig skrevs.
   ================================================================== */
.mg-meta-slot {
  margin-left: auto;         /* skjut till hoger i statusraden */
  display: inline-flex;
  align-items: center;
  position: relative;        /* ankare for .mg-meta-menu */
}

/* Frankopplat lage */
.mg-meta-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .5rem;
  background: #1877f2; color: #fff;
  border: 0; border-radius: 5px;
  font-family: inherit; font-size: .7rem; font-weight: 700;
  cursor: pointer;
}
.mg-meta-btn:hover { background: #1465d8 }

/* Anslutet lage */
.mg-meta-connected { display: inline-flex; align-items: center; gap: .35rem }
.mg-meta-page {
  font-weight: 700; color: var(--mg-navy, #0d263f);
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mg-meta-page-sel {
  font-family: inherit; font-size: .7rem; font-weight: 600;
  color: var(--mg-navy, #0d263f);
  background: #fff; border: 1px solid var(--mg-line, rgba(13,38,63,.14));
  border-radius: 5px; padding: .12rem .3rem; max-width: 170px; cursor: pointer;
}
.mg-meta-more {
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: .85rem; line-height: 1;
  color: var(--mg-ink-soft-alt, #5b6577);
  padding: .1rem .3rem; border-radius: 4px;
}
.mg-meta-more:hover { background: rgba(13,38,63,.07) }

/* Menyn: ligger ovanfor statusraden (som star langst ned i panelen) */
.mg-meta-menu {
  position: absolute; right: 0; bottom: calc(100% + 6px);
  min-width: 190px; z-index: 30;
  background: #fff; border: 1px solid var(--mg-line, rgba(13,38,63,.14));
  border-radius: 8px; box-shadow: 0 6px 20px rgba(13,38,63,.14);
  padding: .4rem;
}
.mg-meta-menu-user {
  font-size: .7rem; color: var(--mg-ink-soft-alt, #5b6577);
  padding: .3rem .45rem .4rem;
  border-bottom: 1px solid var(--mg-line, rgba(13,38,63,.1));
  margin-bottom: .3rem;
}
.mg-meta-menu button {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: .74rem; font-weight: 600;
  color: #b42318; padding: .4rem .45rem; border-radius: 5px;
}
.mg-meta-menu button:hover { background: rgba(180,35,24,.08) }

/* Statusraden fastnar i botten av den scrollande panelen sa att
   anslutningslaget alltid syns (panelen fick egen scroll 2026-07-19). */
.status-bar {
  position: sticky; bottom: 0; z-index: 5;
  background: #f8fafc;
}

body[data-theme="dark"] .mg-meta-page,
body[data-theme="dark"] .mg-meta-page-sel { color: var(--mg-dark-ink, #e8eef4) }
body[data-theme="dark"] .mg-meta-page-sel,
body[data-theme="dark"] .mg-meta-menu { background: var(--mg-dark-surface, #16202e); border-color: rgba(255,255,255,.14) }
body[data-theme="dark"] .mg-meta-menu button { color: #ff8a80 }

/* Byt-till-friskt-konto-raden i annonskontoväljaren (2026-07-22).
   adsAvailable() godkänner även status 3 ("ej reglerat"), så annonsvägen
   kan öppnas på ett konto Meta sedan nekar. Vi byter inte åt användaren —
   det avgör vem som debiteras — men pekar ut alternativet med ett klick. */
.mgpf-acct-switch-row {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  margin-top: .4rem; padding-top: .4rem;
  border-top: 1px solid rgba(13, 38, 63, .12);
}
.mgpf-acct-switch {
  border: 1px solid currentColor; background: transparent; color: inherit;
  border-radius: 6px; padding: .18rem .5rem; cursor: pointer;
  font-family: inherit; font-size: .72rem; font-weight: 700;
}
.mgpf-acct-switch:hover { background: rgba(13, 38, 63, .07); }
body[data-theme="dark"] .mgpf-acct-switch-row { border-top-color: rgba(255, 255, 255, .16); }

/* ── Krock: valt objekt kontra importerat objekt ─────────────────────────
   Kortet visar mg_selected_object medan en URL/RSS-import fyller text och
   bilder från ett annat objekt. Notisen gör skillnaden synlig i stället för
   att låta användaren gissa vilken bostad hen arbetar med. */
.social-object-mismatch{
  margin:10px 0 0;padding:12px 14px;border-radius:12px;
  background:rgba(168,119,66,.08);border:1px solid rgba(168,119,66,.34);
}
.social-object-mismatch .som-rad{display:flex;gap:10px;align-items:flex-start}
.social-object-mismatch .som-ikon{
  flex:0 0 20px;width:20px;height:20px;border-radius:50%;
  background:var(--gold,#a87742);color:#fff;font-weight:900;font-size:.78rem;
  display:grid;place-items:center;margin-top:1px;
}
.social-object-mismatch .som-text{display:flex;flex-direction:column;gap:3px;font-size:.86rem;line-height:1.45}
.social-object-mismatch .som-text strong{font-size:.9rem}
.social-object-mismatch .som-knappar{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.social-object-mismatch .som-btn{
  min-height:34px;padding:0 12px;border-radius:8px;cursor:pointer;
  font-family:inherit;font-size:.8rem;font-weight:800;
  border:1px solid var(--line,#e7ded0);background:rgba(255,255,255,.7);color:inherit;
}
.social-object-mismatch .som-btn:hover{background:#fff}
.social-object-mismatch .som-btn-primar{
  background:var(--gold,#a87742);border-color:var(--gold,#a87742);color:#fff;
}
.social-object-mismatch .som-btn-primar:hover{filter:brightness(1.07)}
body[data-theme="dark"] .social-object-mismatch{background:rgba(201,154,95,.12);border-color:rgba(201,154,95,.34)}
body[data-theme="dark"] .social-object-mismatch .som-btn{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}

/* ═══════════════════════════════════════════════════════════════════════════
   FRÅGETECKNET — en enda look, delad med övriga moduler

   Sociala medier hade ett tjugotal regler för .ph-help spridda över fyra
   layoutregioner (.ph, .left-col > .panel, .right-col > .panel,
   .preview-sticky > .panel) och båda teman, med olika bakgrund, ram, storlek
   och marginal. Det var därför symbolen såg annorlunda ut här än i Text och
   Broschyr. Blocket lämnar tillbaka utseendet till mg-help.css.

   Varför överstyrning i stället för radering: reglerna ligger i GRUPPERADE
   selektorlistor. Klipper man bort den sista selektorn följer dess {…} med och
   raderna ovanför blir en lista utan kropp — de smälter då ihop med nästa regel
   och får fel egenskaper. Klammerbalansen ser fortfarande rätt ut, så felet är
   tyst. Det hände under arbetet och fångades bara för att utfallet mättes.
   Att rensa listorna en och en är rätt städning, men bör göras som en egen
   omgång med verifiering per regel.
   ═══════════════════════════════════════════════════════════════════════════ */
.ph .ph-help,
.left-col > .panel .ph-help,
.right-col > .panel .ph-help,
.preview-sticky > .panel .ph-help,
.left-col > .social-content-panel > .ph .ph-help,
.social-import-panel .ph-help {
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border: 1px solid var(--p) !important;
  border-radius: 50% !important;
  background: rgba(13, 38, 63, .10) !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  vertical-align: middle !important;
}

/* Linjering: samma grepp som i mg-help.css. Frågetecknet till högerkanten,
   pilen slutar konkurrera om det lediga utrymmet. */
.ph > .ph-help {
  margin-left: auto !important;
  margin-right: 0 !important;
}
.ph > .ph-help ~ .ph-arrow { margin-left: .5rem !important; }

.ph .ph-help:hover,
.left-col > .panel .ph-help:hover,
.right-col > .panel .ph-help:hover,
.preview-sticky > .panel .ph-help:hover,
.left-col > .social-content-panel > .ph .ph-help:hover,
.social-import-panel .ph-help:hover {
  background: var(--mg-navy) !important;
  border-color: var(--mg-navy) !important;
  color: #fff !important;
  transform: scale(1.12) !important;
  box-shadow: 0 2px 6px rgba(13, 38, 63, .35) !important;
}

body[data-theme="dark"] .ph .ph-help,
body[data-theme="dark"] .left-col > .panel .ph-help,
body[data-theme="dark"] .right-col > .panel .ph-help,
body[data-theme="dark"] .preview-sticky > .panel .ph-help,
body[data-theme="dark"] .left-col > .social-content-panel > .ph .ph-help,
body[data-theme="dark"] .social-import-panel .ph-help {
  background: rgba(255, 255, 255, .04) !important;
  border-color: rgba(243, 239, 232, .45) !important;
  color: var(--text) !important;
}

body[data-theme="dark"] .ph .ph-help:hover,
body[data-theme="dark"] .left-col > .panel .ph-help:hover,
body[data-theme="dark"] .right-col > .panel .ph-help:hover,
body[data-theme="dark"] .preview-sticky > .panel .ph-help:hover,
body[data-theme="dark"] .left-col > .social-content-panel > .ph .ph-help:hover,
body[data-theme="dark"] .social-import-panel .ph-help:hover {
  background: rgba(21, 34, 51, .90) !important;
  border-color: rgba(243, 239, 232, .70) !important;
  color: var(--text) !important;
}
/* ═══════════════════════════════════════════════════════════════
   Livscykel-serie — Kommande → Till salu → Visning → Sålt
   Ett klick genererar objektets hela inläggsserie via /api/claude.
   ═══════════════════════════════════════════════════════════════ */
.mglc-trigger-row { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Paret är flex-objektet som bryter, så knapp och frågetecken aldrig hamnar på
   var sin rad. Formen och färgen bärs av .mg-splitbtn i mg-help.css. */
.mglc-trigger-pair { flex: 1 1 150px; min-width: 0; }
.mglc-trigger { flex: 1 1 auto; min-width: 0; justify-content: center; gap: 8px; }
.mglc-trigger svg { width: 18px; height: 18px; }
/* Subtexten ligger på .btn-p:s navy — var(--muted) blir oläsligt där. */
.mglc-trigger-sub { font-weight: 600; color: rgba(255,255,255,.72); font-size: .82em; }

.mglc-panel { border: 1px solid var(--line, #ebe2d4); border-radius: 14px; background: var(--surface, #fffdf9); margin: 14px 0 4px; overflow: hidden; }
.mglc-panel[hidden] { display: none; }
.mglc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; background: linear-gradient(0deg, rgba(168,119,66,.07), transparent); border-bottom: 1px solid var(--line, #ebe2d4); }
.mglc-head-txt strong { display: block; font-size: 14px; }
.mglc-head-txt span { font-size: 12px; color: var(--muted, #657385); }
.mglc-close { background: transparent; border: 0; font-size: 22px; line-height: 1; color: var(--muted, #657385); cursor: pointer; padding: 0 6px; border-radius: 8px; }
.mglc-close:hover { background: rgba(13,38,63,.06); }

.mglc-list { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.mglc-card { border: 1px solid var(--line, #ebe2d4); border-radius: 11px; padding: 11px 12px; background: var(--paper, #fbf8f3); }
.mglc-card__head { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; }
.mglc-badge { width: 26px; height: 26px; border-radius: 8px; background: rgba(168,119,66,.13); color: var(--gold-dark, #8f6232); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-weight: 800; font-size: 12px; }
.mglc-card__head b { font-size: 13.5px; }
.mglc-card__head small { color: var(--muted, #657385); font-size: 11.5px; font-weight: 500; }
.mglc-card textarea { width: 100%; box-sizing: border-box; min-height: 92px; resize: vertical; font: inherit; font-size: 13px; line-height: 1.5; padding: 9px 10px; border: 1px solid var(--line, #ebe2d4); border-radius: 9px; background: var(--surface, #fff); color: var(--ink, #0d263f); }
.mglc-card__actions { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
.mglc-mini { font: inherit; font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--line, #ebe2d4); background: transparent; color: var(--ink, #0d263f); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.mglc-mini:hover { border-color: var(--gold, #a87742); }
.mglc-mini.primary { background: var(--ink, #0d263f); color: #fff; border-color: transparent; }
.mglc-mini svg { width: 14px; height: 14px; flex: 0 0 auto; }
.mglc-loading { color: var(--muted, #657385); font-size: 12.5px; font-style: italic; padding: 6px 2px; }
.mglc-err { color: #a3352b; font-size: 12.5px; padding: 4px 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Frågetecknet i en delad knapp behåller sin CIRKEL — samma form som överallt
   annars, bara inverterad så den läser mot navyn.

   Klassen upprepas med flit. ?-återställningen längre upp i filen träffar
   knappen via ".right-col > .panel .ph-help" med !important, alltså
   specificitet (0,3,0). Ett enkelt ".mg-splitbtn > .mg-splitbtn__help" är
   (0,2,0) och förlorar oavsett källordning — mätt i webbläsaren. Upprepningen
   ger (0,4,0) och vinner. */
.mg-splitbtn > .mg-splitbtn__help.mg-splitbtn__help.mg-splitbtn__help {
  width: 22px !important;
  height: 22px !important;
  margin: 0 10px 0 2px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .45) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .14) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.mg-splitbtn > .mg-splitbtn__help.mg-splitbtn__help.mg-splitbtn__help:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--mg-navy) !important;
  transform: scale(1.12) !important;
  box-shadow: none !important;
}
/* Story-mallar — fyll story-överlägg + objektbild från valt objekt */
.mgstpl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 4px; }
.mgstpl-label { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #657385); }
.mgstpl-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.mgstpl-btn { font: inherit; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line, #ebe2d4); background: var(--surface, #fff); color: var(--ink, #0d263f); cursor: pointer; }
.mgstpl-btn:hover { border-color: var(--gold, #a87742); background: rgba(168, 119, 66, .07); }

/* ─── Innehållskalender ────────────────────────────────────────────────────
   Egen, självständig uppsättning klasser med mgkal-prefix. Återanvänder
   MEDVETET inte .cw-modal eller .mgpf-modal: de bär andra funktioners
   layoutantaganden, och en delad regel som ändras för den enas skull bryter
   den andra tyst. Prefixet gör också att en framtida CSS-städning ser vad som
   hör ihop. */
.mgkal-overlay { position: fixed; inset: 0; z-index: 4000; background: rgba(13,38,63,.45);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.mgkal-modal { background: var(--surface, #fff); border-radius: 10px; width: 100%; max-width: 640px;
  max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.mgkal-huvud { display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.2rem .8rem; border-bottom: 1px solid var(--line, #ebe2d4); }
.mgkal-huvud h3 { margin: 0; font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.35rem; font-weight: 500; color: var(--ink, #0d263f); letter-spacing: -.01em; }
.mgkal-stang { background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer;
  color: var(--muted, #657385); padding: 0 .2rem; font-family: inherit; }
.mgkal-body { overflow-y: auto; padding: .9rem 1.2rem 1.2rem; }

.mgkal-rubrik { margin: 1.1rem 0 .5rem; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted, #657385); }
.mgkal-rubrik:first-child { margin-top: 0; }
.mgkal-dag { margin: .7rem 0 .3rem; font-size: 12px; font-weight: 700;
  color: var(--ink, #0d263f); text-transform: capitalize; }

.mgkal-rad { display: flex; gap: 12px; padding: .5rem 0; border-top: 1px solid var(--line, #ebe2d4); }
.mgkal-tid { flex: 0 0 auto; min-width: 52px; font-size: 12px; font-weight: 700;
  color: var(--muted, #657385); padding-top: 1px; }
.mgkal-mitt { flex: 1 1 auto; min-width: 0; }
.mgkal-mitt strong { display: block; font-size: 13px; color: var(--ink, #0d263f); }
.mgkal-meta { font-size: 11.5px; color: var(--muted, #657385); margin-top: 2px; }
.mgkal-meta a { color: inherit; }
.mgkal-txt { font-size: 11.5px; color: var(--muted, #657385); margin-top: 3px;
  overflow-wrap: anywhere; }

.mgkal-pill { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; padding: 1px 6px; border-radius: 999px;
  background: rgba(29,91,51,.1); color: #1d5b33; }
/* Kö-poster är PLANERADE, inte bekräftade — egen färg så de inte läses som klara. */
.mgkal-pill.vantar { background: rgba(168,119,66,.14); color: #8a5a26; }

.mgkal-tomt { font-size: 12.5px; color: var(--muted, #657385); margin: .3rem 0; line-height: 1.5; }
.mgkal-obs { font-size: 11px; color: var(--muted, #657385); margin: .7rem 0 0; line-height: 1.5;
  padding-top: .5rem; border-top: 1px dashed var(--line, #ebe2d4); }

@media (max-width: 560px) {
  .mgkal-rad { flex-direction: column; gap: 2px; }
  .mgkal-tid { min-width: 0; }
}