:root{--safe:#087746;--soft:#f7f9ff}
body.auth-loading .app{visibility:hidden}
body.auth-required .app{display:none}
.authShell{min-height:100vh;display:none;place-items:center;padding:20px;background:radial-gradient(circle at 15% 8%,#e8e8ff 0,transparent 34%),radial-gradient(circle at 85% 12%,#fff0c9 0,transparent 28%),#f4f7fc}
body.auth-loading .authShell,body.auth-required .authShell{display:grid}
.authPanel{width:min(940px,100%);display:grid;grid-template-columns:.85fr 1.15fr;background:#fff;border:1px solid #dce4f2;border-radius:30px;box-shadow:0 30px 90px rgba(20,32,51,.16);overflow:hidden}
.authBrand{padding:34px;background:linear-gradient(145deg,#101936,#304ba8 54%,#7542f2);color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.authBrand img{width:min(280px,100%);background:#fff;border-radius:22px;padding:12px}
.authBrand h1{font-size:34px;letter-spacing:-.04em;margin:0 0 8px}.authBrand p{color:#dce5ff;line-height:1.55}
.authForm{padding:34px}.authForm h2{font-size:28px;margin:0 0 6px}.authTabs{display:flex;gap:8px;margin:18px 0}
.authTabs button{border:1px solid #dce4f2;background:#fff;border-radius:999px;padding:9px 14px;font-weight:900;cursor:pointer}.authTabs button.active{background:#17213b;color:#fff;border-color:#17213b}
.authMessage{min-height:44px;border-radius:14px;padding:11px 12px;background:#f4f6fb;color:#33415b;margin:10px 0}.authMessage.error{background:#fff0f0;color:#842525}.authMessage.ok{background:#eaf9f1;color:#09653f}
.authActions{display:flex;gap:9px;flex-wrap:wrap}.authActions button{width:auto}
.topAccountButton{white-space:nowrap}.connectionCard{border:1px solid #dce4f2;border-left:4px solid #3855ff;border-radius:18px;padding:14px;background:linear-gradient(135deg,#fff,#f6f8ff);margin:12px 0}.connectionCard .status{font-size:12px;font-weight:1000;border-radius:999px;padding:5px 9px;background:#fff2dd;color:#965400}.connectionCard .status.connected{background:#eaf9f1;color:#09653f}
.nav button[data-view="api"],.nav button[data-view="socialSetup"],.nav button[data-view="roadmap"],.nav button[data-view="ledger"]{display:none!important}
.profileLogoPreview{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px;border:1px solid #dce4f2;border-radius:14px;background:#fff}.profileLogoPreview img{width:76px;height:76px;object-fit:contain;border-radius:10px;background:#f6f8ff}
.accountStatusGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}.accountStat{border:1px solid #e1e7f1;border-radius:16px;padding:12px;background:#fff}.accountStat strong{display:block;font-size:18px}
.planMatrix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.planOption{border:1px solid #dce4f2;border-radius:17px;padding:13px;background:#fff}.planOption.current{border-color:#4f6cff;background:#eef2ff}.planOption strong{font-size:18px}.planOption span{display:block;color:#607089;font-size:12px;margin-top:4px}
.publishResult{margin-top:12px;min-height:0}.publishResult:not(:empty){border-left:4px solid #3855ff;background:#f3f5ff;border-radius:14px;padding:11px}.publishResult.error{border-left-color:#c83c3c;background:#fff0f0}.publishResult.ok{border-left-color:#0f9f62;background:#ecfaf4}
.publishedLinks{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.publishedLinks a,.publishedLinks span,.postResultLink{display:inline-flex;border-radius:999px;background:#fff;padding:7px 10px;font-size:12px;font-weight:900;color:#203ba7;text-decoration:none;border:1px solid #dbe3ff}
.publishDestinationGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.publishDestination{position:relative;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:10px;min-height:74px;padding:12px;border:2px solid #dce4f2;border-radius:18px;background:#fff;cursor:pointer;transition:.18s ease}
.publishDestination:hover{border-color:#8798d7}.publishDestination.selected{border-color:#3855ff;background:#f0f3ff;box-shadow:0 8px 20px rgba(56,85,255,.12)}
.publishDestination.unavailable{opacity:.55;cursor:not-allowed;background:#f3f5f9}.publishDestination input{width:22px;height:22px;margin:0;accent-color:#3855ff}
.publishDestinationIcon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#2767e8;color:#fff;font-size:25px;font-weight:1000}.publishDestinationIcon.instagram{background:linear-gradient(135deg,#7049ef,#e53d83,#f4a02a)}.publishDestinationIcon.tiktok{background:#111;color:#fff;text-shadow:-2px 0 #25f4ee,2px 0 #fe2c55}
.publishDestination strong,.publishDestination small{display:block}.publishDestination small{margin-top:3px;color:#607089;font-size:12px;line-height:1.3}
.publishPhotoPreview{display:grid;grid-template-columns:minmax(100px,180px) 1fr;gap:12px;align-items:center;margin-top:10px;padding:10px;border:1px solid #dce4f2;border-radius:17px;background:#f8faff}
.publishPhotoPreview img{width:100%;height:125px;object-fit:cover;border-radius:12px;background:#e8edf6}.publishPhotoPreview strong,.publishPhotoPreview span{display:block}.publishPhotoPreview .btn{margin-top:8px}
.publishConfirmDialog{width:min(680px,calc(100% - 24px));max-height:calc(100vh - 24px);padding:0;border:0;border-radius:26px;background:#fff;box-shadow:0 30px 100px rgba(5,12,30,.35);color:#17213b}
.publishConfirmDialog::backdrop{background:rgba(7,13,28,.7);backdrop-filter:blur(4px)}
.publishConfirmPanel{padding:22px;overflow:auto}.publishConfirmHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.publishConfirmHead h3{font-size:25px;margin:8px 0 0}
.publishDialogClose{width:44px;height:44px;border:1px solid #dce4f2;border-radius:999px;background:#fff;font-size:27px;line-height:1;cursor:pointer}
.publishConfirmDestinations{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.publishConfirmDestinations span{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;background:#eef2ff;color:#203ba7;font-size:13px;font-weight:900}.publishConfirmDestinations b{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#3855ff;color:#fff}
.publishConfirmPreview{display:grid;grid-template-columns:minmax(0,210px) 1fr;gap:14px;padding:13px;border:1px solid #dce4f2;border-radius:18px;background:#f8faff}.publishConfirmPreview img{width:100%;max-height:230px;object-fit:cover;border-radius:13px}.publishConfirmPreview p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;margin:7px 0 0}
.publishConsent{display:flex;gap:11px;align-items:flex-start;margin:14px 0;padding:13px;border:2px solid #ffcb73;border-radius:16px;background:#fff8e8;font-weight:900;cursor:pointer}.publishConsent input{width:23px;height:23px;margin:0;flex:0 0 auto;accent-color:#087746}
.publishConfirmActions{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.safeTile{border:1px solid #dce4f2;border-radius:17px;padding:13px;background:#fff;display:grid;gap:5px}.safeTile span{font-size:13px;color:#607089}
.scheduledItem{border:1px solid #dce4f2;border-radius:15px;padding:11px;margin:8px 0;background:#fff}.scheduledItem strong{display:block}.scheduledItem .row{justify-content:space-between}
.usageBar{height:10px;border-radius:999px;background:#e8edf6;overflow:hidden;margin:8px 0}.usageBar span{display:block;height:100%;background:linear-gradient(90deg,#3855ff,#7c3dff)}
.mobilePreviewToggle{display:none}
.mediaMobileActions,.videoMobileActions{display:none}
.mediaControlGroups{display:none;gap:7px;position:sticky;top:148px;z-index:24;background:#fff;padding:7px 0;margin:0 0 10px}
.mediaControlGroups button{flex:1;border:1px solid #dce4f2;background:#fff;border-radius:999px;padding:9px;font-weight:900;color:#33415b}
.mediaControlGroups button.active{background:#17213b;color:#fff;border-color:#17213b}
.mediaVisibilityPanel{border:1px solid #dbe3f2;border-radius:16px;background:#f8faff;padding:12px;margin:0 0 14px}
.mediaVisibilityPanel>strong{display:block;color:#17233a}
.mediaVisibilityGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}
.mediaSwitch{display:flex;align-items:center;gap:8px;margin:0;padding:10px;border:1px solid #dbe3f2;border-radius:12px;background:#fff;color:#263650;cursor:pointer}
.mediaSwitch input{width:auto;min-height:0;accent-color:#4d48ff}
.cloudState{font-size:12px;color:#607089}
.btn[disabled]{opacity:.55;cursor:not-allowed}
@media(max-width:980px){
  .side{position:sticky!important;top:0!important;z-index:45!important;height:auto!important;padding:8px 10px!important;overflow:visible!important}
  .brandPremium{display:flex!important;align-items:center!important;gap:8px!important;padding:6px 8px!important;margin:0 0 7px!important}.brandLogoFull{width:142px!important;max-height:48px!important;padding:4px!important;border-radius:12px!important}.brandPremium .brandTag{display:none}
  .nav{display:flex!important;overflow-x:auto!important;grid-template-columns:none!important;gap:7px!important;padding-bottom:3px!important;scroll-snap-type:x proximity}
  .nav button{flex:0 0 auto!important;min-height:39px!important;padding:8px 11px!important;white-space:nowrap!important;font-size:12px!important;scroll-snap-align:start}
  .planPill{display:none}.main{padding:10px!important}.top{position:sticky;top:92px;z-index:35;margin-bottom:10px;padding:9px 10px!important;flex-direction:row!important;align-items:center!important;background:rgba(255,255,255,.94)!important}.top h2{font-size:19px}.crumb{display:none}
  .authPanel{grid-template-columns:1fr}.authBrand{padding:22px}.authBrand p{margin-bottom:0}.authForm{padding:22px}
  .accountStatusGrid,.planMatrix{grid-template-columns:1fr}.editor{display:block!important}.stickyPreview{position:sticky!important;top:154px!important;z-index:25;margin-bottom:10px}.stickyPreview .card{padding:10px!important}.stickyPreview .card>h3,.stickyPreview .card>p,.stickyPreview .miniNote{display:none}.designCard{min-height:0!important;height:min(54vw,320px)!important;border-radius:18px!important}.stickyPreview .row{display:none}
  .mediaEditPanel{padding:13px!important}.mobilePreviewToggle{display:flex;position:fixed;right:12px;bottom:78px;z-index:55;border:0;border-radius:999px;background:#17213b;color:#fff;padding:11px 14px;font-weight:900;box-shadow:0 12px 30px #0003}
  .mediaControlGroups{display:flex}
  .mediaEditPanel[data-mobile-group="photo"] .mediaGroupText,.mediaEditPanel[data-mobile-group="photo"] .mediaGroupPosition{display:none!important}
  .mediaEditPanel[data-mobile-group="text"] .mediaGroupPhoto,.mediaEditPanel[data-mobile-group="text"] .mediaGroupPosition{display:none!important}
  .mediaEditPanel[data-mobile-group="position"] .mediaGroupPhoto,.mediaEditPanel[data-mobile-group="position"] .mediaGroupText{display:none!important}
  .media-controls-hidden .mediaEditPanel{display:none}.media-controls-hidden .stickyPreview{top:96px!important}
  textarea{min-height:105px}.heroPremium{padding:18px!important}.hero h3{font-size:27px!important}
}
@media(max-width:620px){
  .authBrand{display:none}.authForm{padding:20px}.authPanel{border-radius:22px}.top .row{gap:5px}.top .btn{padding:8px 9px;font-size:11px}.top #sessionType{display:none}
  .platformTabs,.contentTabs{display:flex!important;overflow-x:auto;flex-wrap:nowrap!important}.tab{flex:0 0 auto}.grid2,.grid3,.grid4{grid-template-columns:1fr!important}
  .publishDestinationGrid{grid-template-columns:1fr}.publishDestination{min-height:78px}
  .publishPhotoPreview{grid-template-columns:112px 1fr}.publishPhotoPreview img{height:105px}
  .publishConfirmDialog{width:100%;max-width:none;max-height:92vh;margin:auto 0 0;border-radius:26px 26px 0 0}.publishConfirmPanel{padding:18px 14px calc(18px + env(safe-area-inset-bottom))}
  .publishConfirmPreview{grid-template-columns:1fr}.publishConfirmPreview img{max-height:38vh}.publishConfirmActions{display:grid;grid-template-columns:1fr}.publishConfirmActions .btn{width:100%;min-height:50px}
}

/* Mobile-first repair: one compact header, one bottom menu and a usable editor. */
.mobileBottomNav,.mobileMoreSheet{display:none}
@media(max-width:980px){
  body .side{
    position:static!important;
    top:auto!important;
    z-index:auto!important;
    height:auto!important;
    min-height:0!important;
    padding:7px 10px!important;
    overflow:visible!important;
  }
  body .side .brandPremium{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:52px!important;
    margin:0!important;
    padding:4px 8px!important;
    border-radius:14px!important;
  }
  body .side .brandLogoFull{
    width:148px!important;
    max-width:48vw!important;
    max-height:46px!important;
    margin:0!important;
    padding:3px!important;
    border-radius:10px!important;
  }
  body .side .brandTag,body .side .nav,body .side .planPill{display:none!important}
  body .main{
    padding:10px 10px calc(90px + env(safe-area-inset-bottom))!important;
    scroll-margin-top:0!important;
  }
  body .top{
    position:static!important;
    top:auto!important;
    z-index:auto!important;
    min-height:50px!important;
    margin:0 0 10px!important;
    padding:8px 10px!important;
    border-radius:16px!important;
    flex-direction:row!important;
    align-items:center!important;
    background:rgba(255,255,255,.94)!important;
  }
  body .top h2{font-size:19px!important;line-height:1.1!important}
  body .top .row{margin-left:auto!important;flex-wrap:nowrap!important}
  body .top .btn{min-height:42px!important}
  body .crumb,body .top #sessionType{display:none!important}
  body .card{padding:15px!important;border-radius:18px!important}
  body .btn,body button,body input,body select{min-height:44px}
  body input[type="checkbox"],body input[type="radio"],body input[type="color"],body input[type="range"]{min-height:0}
  body textarea{min-height:112px}
  body .editor{display:block!important}
  body .stickyPreview{position:static!important;top:auto!important;z-index:auto!important}
  body #media .stickyPreview{
    position:sticky!important;
    top:6px!important;
    z-index:22!important;
    margin-bottom:10px!important;
  }
  body #media .stickyPreview .card{
    padding:8px!important;
    border-radius:18px!important;
    box-shadow:0 12px 30px rgba(20,32,51,.16)!important;
  }
  body #media .stickyPreview .card>h3,
  body #media .stickyPreview .card>p,
  body #media .stickyPreview .miniNote,
  body #media .stickyPreview .row{display:none!important}
  body #media .designCard{
    min-height:0!important;
    height:min(58vw,250px)!important;
    border-radius:14px!important;
  }
  body .mediaEditPanel{padding:13px!important}
  body .mediaControlGroups{
    display:flex!important;
    position:static!important;
    top:auto!important;
    z-index:auto!important;
    gap:7px!important;
    padding:4px 0 9px!important;
    margin:0 0 8px!important;
  }
  body .mediaControlGroups button{min-height:44px!important}
  body .mobilePreviewToggle{
    display:flex!important;
    right:12px!important;
    bottom:calc(146px + env(safe-area-inset-bottom))!important;
    z-index:92!important;
    min-height:44px!important;
    padding:10px 13px!important;
  }
  body.media-controls-hidden #media .stickyPreview{top:6px!important}
  body.media-controls-hidden #media .mediaEditPanel{display:none!important}
  body #media .mediaMobileActions{
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(78px + env(safe-area-inset-bottom));
    z-index:89;
    display:grid!important;
    grid-template-columns:1fr 1.2fr;
    gap:8px;
    padding:8px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:18px;
    background:rgba(13,20,39,.96);
    box-shadow:0 16px 40px rgba(0,0,0,.34);
    backdrop-filter:blur(16px);
  }
  body #video .videoMobileActions{
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(78px + env(safe-area-inset-bottom));
    z-index:89;
    display:grid!important;
    grid-template-columns:1fr 1.2fr;
    gap:8px;
    padding:8px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:18px;
    background:rgba(13,20,39,.96);
    box-shadow:0 16px 40px rgba(0,0,0,.34);
    backdrop-filter:blur(16px);
  }
  body #video .videoMobileActions .btn{
    width:100%;
    min-height:48px!important;
    margin:0!important;
    padding:9px 8px!important;
    font-size:13px!important;
  }
  body #video{padding-bottom:150px!important}
  body #media .mediaMobileActions .btn{
    width:100%;
    min-height:48px!important;
    margin:0!important;
    padding:9px 8px!important;
    font-size:13px!important;
  }
  body.media-controls-hidden #media .mediaMobileActions{display:none!important}
  .mobileBottomNav{
    position:fixed;
    left:8px;
    right:8px;
    bottom:calc(7px + env(safe-area-inset-bottom));
    z-index:90;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:4px;
    padding:6px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:20px;
    background:rgba(13,20,39,.96);
    box-shadow:0 18px 45px rgba(0,0,0,.34);
    backdrop-filter:blur(16px);
  }
  .mobileBottomNav button{
    min-width:0;
    min-height:55px;
    border:0;
    border-radius:14px;
    background:transparent;
    color:#dce6f8;
    padding:6px 2px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:2px;
    font-size:10px;
    line-height:1.05;
    font-weight:900;
    cursor:pointer;
  }
  .mobileBottomNav button span:first-child{font-size:20px;line-height:1}
  .mobileBottomNav button.active{background:linear-gradient(135deg,#3855ff,#7c3dff);color:#fff}
  .mobileMoreSheet{
    position:fixed;
    inset:0;
    z-index:110;
    display:none;
    align-items:flex-end;
    padding:12px;
    background:rgba(7,13,28,.62);
  }
  .mobileMoreSheet.open{display:flex}
  .mobileMorePanel{
    width:100%;
    max-height:82vh;
    overflow:auto;
    padding:16px 14px calc(18px + env(safe-area-inset-bottom));
    border-radius:24px 24px 18px 18px;
    background:#fff;
    box-shadow:0 -22px 60px rgba(0,0,0,.28);
  }
  .mobileMoreHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
  .mobileMoreHead h3{margin:0;font-size:20px}
  .mobileMoreClose{border:1px solid #dce4f2;border-radius:999px;background:#fff;padding:7px 13px;font-weight:900}
  .mobileMoreGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mobileMoreGrid button{
    min-height:52px;
    border:1px solid #dce4f2;
    border-radius:15px;
    background:#f8faff;
    color:#24334d;
    padding:10px;
    text-align:left;
    font-weight:900;
  }
  .mobileMoreGrid button.active{border-color:#536eff;background:#eef2ff;color:#203ba7}
  body.mobile-menu-open{overflow:hidden}
  body.auth-loading .mobileBottomNav,
  body.auth-loading .mobileMoreSheet,
  body.auth-required .mobileBottomNav,
  body.auth-required .mobileMoreSheet{display:none!important}
}
@media(max-width:430px){
  body .main{padding-left:8px!important;padding-right:8px!important}
  body .side{padding:5px 8px!important}
  body .side .brandPremium{min-height:48px!important}
  body .side .brandLogoFull{width:136px!important;max-height:42px!important}
  body .top{min-height:48px!important}
  body .top h2{font-size:17px!important}
  body .top .btn{padding:7px 8px!important;font-size:11px!important}
  body #media .designCard{height:min(60vw,230px)!important}
  body #media .mediaMobileActions{left:8px;right:8px}
}