*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:#06000e;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#e8e8e8;}
body{padding:0;}
.page{max-width:none;width:100%;margin:0;min-height:100vh;}
.pwa{border-radius:0;border:none;min-height:100vh;display:flex;flex-direction:column;}
.main-layout{flex:1;}

/* LOGIN */
.login-wrap{position:fixed;inset:0;background:#06000e;display:flex;align-items:center;justify-content:center;z-index:9000;padding:20px;}
.login-wrap.hidden{display:none;}
.login-box{max-width:380px;width:100%;background:#0d0018;border:1px solid rgba(139,92,246,.25);border-radius:14px;padding:28px 24px;}
.login-logo{width:48px;height:48px;border-radius:11px;background:linear-gradient(135deg,#7c3aed,#4f46e5);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#fff;margin:0 auto 16px;}
.login-title{font-size:18px;font-weight:700;color:#fff;text-align:center;margin-bottom:6px;}
.login-sub{font-size:12px;color:rgba(255,255,255,.4);text-align:center;margin-bottom:22px;line-height:1.5;}
.login-input{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:9px;padding:11px 13px;font-size:13px;color:#fff;outline:none;font-family:inherit;margin-bottom:10px;}
.login-input:focus{border-color:rgba(139,92,246,.5);}
.login-btn{width:100%;padding:11px;border-radius:9px;background:rgba(139,92,246,.25);border:1px solid rgba(139,92,246,.5);color:#c4b5fd;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;}
.login-btn:disabled{opacity:.5;cursor:not-allowed;}
.login-msg{font-size:11px;text-align:center;margin-top:10px;min-height:14px;color:rgba(255,255,255,.4);}
.login-msg.ok{color:#34d399;}
.login-msg.err{color:#f87171;}

/* PWA UI */
.pwa{background:#06000e;border-radius:10px;border:1px solid rgba(255,255,255,0.07);}
.hdr{background:#0d0018;padding:10px 20px;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,0.06);border-radius:10px 10px 0 0;}
.logo{width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,#7c3aed,#4f46e5);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;margin-right:8px;flex-shrink:0;}
.brand{font-size:14px;font-weight:700;color:#fff;margin-right:24px;}
.nav{display:flex;gap:2px;flex:1;}
.nav-t{padding:6px 14px;border-radius:7px;font-size:13px;color:rgba(255,255,255,0.45);cursor:pointer;}
.nav-t.active{background:rgba(139,92,246,0.18);color:#c4b5fd;font-weight:500;}
.hdr-right{display:flex;align-items:center;gap:12px;margin-left:auto;}
.date{font-size:12px;color:rgba(255,255,255,0.3);}

.status-bar{background:#0a0014;padding:8px 20px 9px;border-bottom:1px solid rgba(255,255,255,0.04);}
.sb-row1{display:flex;align-items:center;gap:12px;margin-bottom:7px;}
.week-lbl{font-size:12px;color:rgba(255,255,255,0.35);}
.week-track{flex:1;height:3px;background:rgba(255,255,255,0.06);border-radius:2px;}
.week-fill{height:100%;width:0%;background:linear-gradient(to right,#7c3aed,#8b5cf6);border-radius:2px;transition:width .4s;}
.week-num{color:#a78bfa;font-size:13px;font-weight:600;}
.week-pct{color:rgba(255,255,255,0.4);font-size:13px;}

.sb-row2{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.chip{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);border-radius:20px;padding:3px 8px;font-size:11px;color:rgba(255,255,255,0.42);cursor:pointer;display:flex;align-items:center;gap:3px;user-select:none;transition:all 0.15s;white-space:nowrap;position:relative;}
.chip-cnt{opacity:.65;font-size:10px;}
.chip:hover{border-color:rgba(139,92,246,0.3);color:rgba(255,255,255,0.65);}
.chip.active{background:rgba(139,92,246,0.18);border-color:rgba(139,92,246,0.45);color:#c4b5fd;}
.chip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);background:#1a0030;border:1px solid rgba(139,92,246,0.3);border-radius:5px;padding:3px 7px;font-size:10px;color:#c4b5fd;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.15s;}
.chip:hover::after{opacity:1;}
.divider{width:1px;height:16px;background:rgba(255,255,255,0.08);margin:0 3px;flex-shrink:0;}
.fmt-pill{display:flex;align-items:center;gap:4px;border-radius:6px;padding:3px 8px;border:1px solid;font-size:11px;cursor:default;white-space:nowrap;}
.fmt-pill.done{background:rgba(52,211,153,0.07);border-color:rgba(52,211,153,0.2);color:rgba(52,211,153,0.65);}
.fmt-pill.partial{background:rgba(251,191,36,0.08);border-color:rgba(251,191,36,0.25);color:#fbbf24;}
.fmt-pill.empty{background:rgba(248,113,113,0.1);border-color:rgba(248,113,113,0.32);color:#f87171;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.55;}}

.main-layout{display:flex;min-height:320px;}
.left-panel{width:320px;flex-shrink:0;border-right:1px solid rgba(255,255,255,0.05);display:flex;flex-direction:column;min-width:0;}
.topics-area{padding:10px;display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 200px);overflow-y:auto;min-width:0;}
.topics-area::-webkit-scrollbar{width:3px;}
.topics-area::-webkit-scrollbar-thumb{background:rgba(139,92,246,.25);border-radius:2px;}
.card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:10px;overflow:visible;cursor:pointer;transition:all 0.15s;}
.card:hover,.card.sel{border-color:rgba(139,92,246,0.45);background:rgba(139,92,246,0.03);}
.card-head{padding:10px 11px;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"dot title arr" "meta meta meta";gap:6px 8px;align-items:start;}
.sdot{grid-area:dot;width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:6px;}
.ct{grid-area:title;font-size:12px;font-weight:500;color:#e8e8e8;line-height:1.4;min-width:0;word-break:break-word;overflow-wrap:break-word;}
.card-meta{grid-area:meta;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-start;margin-left:15px;}
.bgs{display:flex;gap:4px;flex-shrink:0;flex-wrap:wrap;}
.bh{background:rgba(239,68,68,0.2);border:1px solid rgba(239,68,68,0.38);color:#f87171;font-size:9px;font-weight:600;padding:1px 5px;border-radius:4px;}
.bp{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.45);font-size:9px;padding:1px 5px;border-radius:4px;}
.ba{background:rgba(52,211,153,0.12);border:1px solid rgba(52,211,153,0.3);color:#34d399;font-size:9px;padding:1px 5px;border-radius:4px;}
.br{background:rgba(248,113,113,0.15);border:1px solid rgba(248,113,113,0.3);color:#f87171;font-size:9px;padding:1px 5px;border-radius:4px;}
.bpo{background:rgba(251,191,36,0.12);border:1px solid rgba(251,191,36,0.3);color:#fbbf24;font-size:9px;padding:1px 5px;border-radius:4px;}
.arr{grid-area:arr;color:rgba(255,255,255,0.2);font-size:10px;transition:transform 0.2s;flex-shrink:0;margin-top:6px;}
.card.open .arr{transform:rotate(180deg);}
.card-body{display:none;padding:0 11px 11px;width:100%;box-sizing:border-box;}
.card.open .card-body{display:block;}
.ins-mini{background:rgba(139,92,246,0.07);border:1px solid rgba(139,92,246,0.18);border-radius:6px;padding:7px 9px;font-size:11px;color:#c4b5fd;line-height:1.55;margin-bottom:7px;word-break:break-word;overflow-wrap:break-word;white-space:normal;}
.fmt-tabs{display:flex;gap:4px;flex-wrap:wrap;}
.fmt-icons{display:flex;gap:3px;flex-shrink:0;align-items:center;}
.fmt-ic{width:16px;height:16px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:9px;}
.fmt-ic.carousel{background:rgba(251,191,36,.18);border:1px solid rgba(251,191,36,.35);}
.fmt-ic.infographic{background:rgba(192,132,252,.18);border:1px solid rgba(192,132,252,.35);}
.fmt-ic.video{background:rgba(96,165,250,.18);border:1px solid rgba(96,165,250,.35);}
.fmt-ic.text{background:rgba(52,211,153,.18);border:1px solid rgba(52,211,153,.35);}
.fmt-ic.off{opacity:.18;}
.ft{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);border-radius:5px;padding:3px 8px;font-size:10px;color:rgba(255,255,255,0.4);display:flex;align-items:center;gap:4px;}
.ft.a{background:rgba(139,92,246,0.14);border-color:rgba(139,92,246,0.35);color:#c4b5fd;}
.fd{width:4px;height:4px;border-radius:50%;}

.right-panel{flex:1;padding:18px 24px;display:flex;flex-direction:column;gap:14px;min-width:0;overflow-y:auto;max-height:calc(100vh - 200px);}
.rp-sup{font-size:10px;font-weight:600;color:#7c3aed;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:3px;}
.rp-title{font-size:17px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:9px;}
.rp-desc{font-size:12px;color:rgba(255,255,255,.5);line-height:1.55;margin-bottom:9px;}
.rp-text-box{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:10px 12px;font-size:12px;color:#d4d4e8;line-height:1.6;max-height:140px;overflow-y:auto;white-space:pre-wrap;}
.rp-text-box::-webkit-scrollbar{width:3px;}
.rp-text-box::-webkit-scrollbar-thumb{background:rgba(139,92,246,.25);border-radius:2px;}
.rp-insight{background:rgba(251,146,60,0.08);border:1px solid rgba(251,146,60,0.22);border-radius:8px;padding:9px 12px;font-size:12px;color:#fdba74;line-height:1.55;}

.fmt-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.fc{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:10px 11px;cursor:pointer;transition:all 0.15s;}
.fc:hover{background:rgba(139,92,246,0.07);border-color:rgba(139,92,246,0.35);}
.fc.active-fc{background:rgba(139,92,246,0.1);border-color:rgba(139,92,246,0.5);}
.fc-ico{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;margin-bottom:6px;font-size:16px;}
.fc-name{font-size:13px;font-weight:600;color:#e8e8e8;margin-bottom:4px;}
.fc-status{font-size:11px;margin-bottom:8px;display:flex;align-items:center;gap:4px;}
.nets{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px;}
.ni{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ni svg{width:18px;height:18px;}
.fc-btn{display:inline-flex;align-items:center;gap:4px;border-radius:6px;padding:4px 9px;font-size:11px;font-weight:600;border:1px solid;cursor:pointer;}
.btn-open{background:rgba(251,191,36,0.12);border-color:rgba(251,191,36,0.3);color:#fbbf24;}
.btn-view{background:rgba(52,211,153,0.1);border-color:rgba(52,211,153,0.28);color:#34d399;}
.btn-editor{background:rgba(96,165,250,0.12);border-color:rgba(96,165,250,0.3);color:#60a5fa;}

.bottom-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.section-lbl{font-size:10px;font-weight:600;color:rgba(255,255,255,0.28);letter-spacing:0.5px;text-transform:uppercase;margin-bottom:7px;}
.hist-item{display:flex;align-items:flex-start;gap:7px;margin-bottom:7px;}
.hist-text{font-size:11px;color:#e8e8e8;line-height:1.35;}
.hist-time{font-size:10px;color:rgba(255,255,255,0.3);margin-top:1px;}
.hist-empty{font-size:11px;color:rgba(255,255,255,.25);font-style:italic;}
.stat-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.stat-lbl{font-size:11px;color:rgba(255,255,255,0.35);}
.stat-val{font-size:13px;font-weight:600;color:#e8e8e8;}
.stat-val.ac{color:#a78bfa;}
.stat-note{font-size:10px;color:rgba(255,255,255,0.25);line-height:1.45;display:flex;align-items:center;gap:4px;}

.empty-state{padding:60px 20px;text-align:center;color:rgba(255,255,255,.3);font-size:13px;}
.empty-state .ic{font-size:36px;margin-bottom:10px;opacity:.4;}

.action-bar{border-top:1px solid rgba(255,255,255,0.07);padding:8px 10px;display:flex;gap:8px;background:rgba(4,0,10,0.8);flex-shrink:0;}
.ab-btn{flex:1;padding:7px 8px;border-radius:8px;font-size:11px;font-weight:600;text-align:center;border:1px solid;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;justify-content:center;gap:6px;}
.ab-btn:hover{filter:brightness(1.25);}
.ab-postpone{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.14);color:rgba(255,255,255,0.65);}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.72);display:none;align-items:center;justify-content:center;z-index:999;backdrop-filter:blur(4px);}
.modal-overlay.open{display:flex;}
.modal{background:#0f0020;border:1px solid rgba(139,92,246,0.3);border-radius:16px;padding:20px 22px;width:340px;max-width:92vw;box-shadow:0 20px 60px rgba(0,0,0,0.6);}
.modal-title{font-size:15px;font-weight:700;color:#fff;margin-bottom:4px;}
.modal-sub{font-size:12px;color:rgba(255,255,255,0.35);margin-bottom:14px;}
.modal-topic{background:rgba(139,92,246,0.08);border:1px solid rgba(139,92,246,0.2);border-radius:8px;padding:8px 10px;font-size:12px;color:#c4b5fd;margin-bottom:14px;line-height:1.4;}
.modal-lbl{font-size:11px;color:rgba(255,255,255,0.4);margin-bottom:5px;}
.modal-hint{background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.25);border-radius:7px;padding:7px 10px;font-size:11px;color:#c4b5fd;line-height:1.45;margin-bottom:10px;cursor:pointer;display:none;}
.modal-hint.show{display:block;}
.modal-hint.picked{background:rgba(139,92,246,.2);border-color:rgba(139,92,246,.5);}
.date-opts{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.date-opt{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:7px;padding:5px 10px;font-size:11px;color:rgba(255,255,255,0.5);cursor:pointer;transition:all 0.15s;}
.date-opt:hover,.date-opt.sel{background:rgba(139,92,246,0.18);border-color:rgba(139,92,246,0.45);color:#c4b5fd;}
.modal-input{width:100%;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:8px 10px;font-size:12px;color:#fff;margin-bottom:14px;outline:none;font-family:inherit;}
.modal-input::placeholder{color:rgba(255,255,255,0.25);}
.modal-btns{display:flex;gap:8px;}
.modal-cancel{flex:1;padding:8px;border-radius:8px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.5);font-size:12px;font-weight:600;cursor:pointer;}
.modal-confirm{flex:1;padding:8px;border-radius:8px;background:rgba(139,92,246,0.25);border:1px solid rgba(139,92,246,0.5);color:#c4b5fd;font-size:12px;font-weight:600;cursor:pointer;}

/* ── #170: адаптивность стартовой под разные экраны ── */
.fmt-row{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));}
@media (max-width:1100px){
  .left-panel{width:270px;}
  .right-panel{padding:14px 16px;}
  .nav{gap:2px;}
}
@media (max-width:860px){
  .main-layout{flex-direction:column;}
  .left-panel{width:100%;border-right:none;border-bottom:1px solid rgba(255,255,255,.07);}
  .topics-area{max-height:38vh;}
  .right-panel{max-height:none;}
  .sb-row2{overflow-x:auto;padding-bottom:4px;}
}


/* #188: ч/б бейджи соцсетей на карточках форматов */
.ni-chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:19px;padding:0 6px;margin-right:4px;
  border-radius:5px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.28);
  color:rgba(255,255,255,.92);
  font-size:10px;font-weight:800;letter-spacing:.04em;
  cursor:default;
}
.ni-chip:hover{background:rgba(139,92,246,.25);border-color:rgba(139,92,246,.6)}