:root{
  --bg:#f6f7fb;
  --paper:#ffffff;
  --ink:#202331;
  --muted:#747989;
  --line:#dde2ec;
  --soft:#eef4f7;
  --mint:#2f9b83;
  --mint-soft:#e3f5ef;
  --coral:#dc6f5f;
  --coral-soft:#fde9e5;
  --violet:#6d65c6;
  --violet-soft:#eeecff;
  --amber:#c78630;
  --amber-soft:#fff1d9;
  --blue:#2f84c6;
  --blue-soft:#e5f1fb;
  --shadow:0 18px 50px rgba(34,39,57,.1);
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  background:var(--bg);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
}
button,input,select,textarea{font:inherit}
button{color:inherit}
[hidden]{display:none!important}
.auth-screen{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}
.auth-card{
  width:min(460px,100%);
  display:grid;
  gap:18px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  box-shadow:var(--shadow);
  padding:24px;
}
.auth-copy h1{
  margin-bottom:8px;
}
.auth-copy p:last-child{
  margin:0;
  color:var(--muted);
  line-height:1.5;
}
.auth-form{
  display:grid;
  gap:12px;
}
.auth-form label,.compact-field{
  display:grid;
  gap:6px;
}
.auth-form span,.compact-field span{
  font-size:13px;
  font-weight:800;
}
.auth-form input,.compact-field input{
  width:100%;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:0 12px;
  background:#fbfcfe;
}
.auth-message{
  padding:10px 12px;
  border:1px solid #f1b7ad;
  border-radius:8px;
  color:#9f3d31;
  background:var(--coral-soft);
  font-size:13px;
  font-weight:700;
}
.app-shell{
  width:min(1180px,100%);
  margin:0 auto;
  padding:24px;
}
.app-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.eyebrow{
  margin:0 0 5px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}
h1,h2,h3,p{margin-top:0}
h1{
  margin-bottom:0;
  font-size:30px;
  line-height:1.1;
}
.planner-layout{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);
  grid-template-areas:
    "settings settings"
    "composer preview"
    "queue queue"
    "log log"
    "connect connect";
  gap:16px;
}
.composer-panel,.preview-panel,.queue-panel,.log-panel,.connect-panel,.settings-panel{
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  box-shadow:var(--shadow);
}
.settings-panel{grid-area:settings;padding:20px}
.composer-panel{grid-area:composer;padding:20px}
.preview-panel{grid-area:preview;padding:20px;display:grid;place-items:center;background:#e9eef3}
.queue-panel{grid-area:queue;padding:20px}
.log-panel{grid-area:log;padding:20px}
.connect-panel{grid-area:connect;padding:20px}
.account-box{
  display:flex;
  align-items:center;
  gap:10px;
}
.account-box div{
  display:grid;
  gap:2px;
  text-align:right;
}
.account-box strong{
  font-size:13px;
}
.account-box span{
  color:var(--muted);
  font-size:12px;
}
.settings-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.settings-card{
  display:grid;
  gap:12px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px;
  background:#fbfcfe;
}
.settings-card h3{
  margin:0 0 4px;
  font-size:15px;
}
.settings-card p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}
.invite-list,.user-list{
  display:grid;
  gap:8px;
}
.invite-item,.user-item{
  display:grid;
  gap:4px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px;
  background:#fff;
  font-size:12px;
}
.invite-item code{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#1f587c;
}
.invite-item strong,.user-item strong{
  font-size:13px;
}
.section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}
.section-head h2,.section-head h3{
  margin:0 0 5px;
  font-size:18px;
}
.section-head h3{font-size:15px}
.section-head p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}
.compact{margin-bottom:12px}
.status-pill{
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:999px;
  color:var(--blue);
  background:var(--blue-soft);
  font-size:12px;
  font-weight:800;
}
.field{
  display:grid;
  gap:7px;
  margin-bottom:14px;
}
.field label,.media-picker legend{
  color:#343847;
  font-size:13px;
  font-weight:800;
}
.field input,.field select,.field textarea{
  width:100%;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:0 12px;
  color:var(--ink);
  background:#fbfcfe;
  outline:0;
}
.field textarea{
  min-height:150px;
  padding:12px;
  resize:vertical;
  line-height:1.5;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:#91b8d7;
  background:#fff;
}
.format-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fbfcfe;
}
.format-toolbar button{
  min-width:34px;
  min-height:32px;
  padding:0 10px;
  border:1px solid transparent;
  border-radius:7px;
  color:#343847;
  background:#fff;
  cursor:pointer;
  font-size:13px;
  font-weight:900;
}
.format-toolbar button:hover{
  border-color:#91b8d7;
  color:var(--blue);
}
.message-preview a{
  color:#2f80c7;
  text-decoration:none;
  font-weight:800;
}
.spoiler-preview{
  border-radius:5px;
  color:transparent;
  background:#a7afba;
}
.spoiler-preview:hover{
  color:#fff;
}
.channel-picker{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}
.channel-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-height:34px;
}
.channel-chip{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  min-height:32px;
  padding:0 6px 0 10px;
  border:1px solid #c9dcec;
  border-radius:8px;
  color:#1f587c;
  background:#eef7ff;
  font-size:13px;
  font-weight:800;
}
.channel-chip span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.channel-chip button{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  margin-left:4px;
  border:0;
  border-radius:6px;
  color:#1f587c;
  background:transparent;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
.channel-chip button:hover{
  background:#dcedfa;
}
.channel-actions{
  display:flex;
  justify-content:flex-start;
}
.channel-check-list{
  display:grid;
  gap:7px;
}
.channel-check-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fbfcfe;
  font-size:12px;
}
.channel-check-item strong,.channel-check-item span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.channel-check-item span{
  margin-top:3px;
  color:var(--muted);
}
.channel-check-badge{
  padding:5px 8px;
  border-radius:999px;
  font-weight:900;
}
.channel-check-item.is-ok .channel-check-badge{
  color:var(--mint);
  background:var(--mint-soft);
}
.channel-check-item.is-warn .channel-check-badge{
  color:#9a6a00;
  background:#fff5d8;
}
.channel-check-item.is-fail .channel-check-badge{
  color:var(--coral);
  background:var(--coral-soft);
}
.field-note{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:var(--muted);
  font-size:12px;
}
.field-hint{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}
.media-picker{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 14px;
  padding:0;
  border:0;
}
.media-picker legend{
  width:100%;
  margin-bottom:2px;
}
.media-picker label{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fbfcfe;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
}
.media-picker input{accent-color:var(--blue)}
.media-file-note{
  align-items:center;
}
.media-file-note .text-button{
  flex:0 0 auto;
}
.time-builder{
  margin-top:4px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fbfcfe;
}
.slot-count{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:4px;
  max-width:360px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}
.slot-count button{
  width:36px;
  height:30px;
  border:0;
  border-radius:6px;
  background:transparent;
  cursor:pointer;
  font-weight:800;
}
.slot-count button.active{
  color:#fff;
  background:var(--blue);
}
.quick-times{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:12px;
}
.quick-times button{
  min-height:36px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  font-size:13px;
  font-weight:800;
}
.quick-times button:hover{border-color:#91b8d7;color:var(--blue)}
.timezone-select{
  display:grid;
  gap:5px;
  margin-bottom:12px;
}
.timezone-select span{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.timezone-select select{
  width:100%;
  min-height:40px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:0 10px;
  background:#fff;
}
.slots{
  display:grid;
  gap:8px;
}
.slot-row{
  display:grid;
  grid-template-columns:34px minmax(108px,1fr) 92px minmax(108px,1fr) 92px 34px;
  align-items:end;
  gap:8px;
}
.slot-field{
  display:grid;
  gap:4px;
}
.slot-field span{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}
.slot-index{
  display:grid;
  place-items:center;
  height:34px;
  border-radius:8px;
  color:var(--blue);
  background:var(--blue-soft);
  font-size:13px;
  font-weight:900;
}
.slot-row input{
  width:100%;
  min-width:0;
  height:40px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:0 10px;
  background:#fff;
}
.remove-slot{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:0;
  border-radius:8px;
  color:var(--coral);
  background:var(--coral-soft);
  cursor:pointer;
}
.remove-slot svg,.icon-button svg,.primary-button svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.timezone-note{
  margin:10px 0 0;
  color:var(--muted);
  font-size:12px;
}
.composer-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}
.primary-button,.secondary-button,.text-button,.icon-button{
  cursor:pointer;
  font-weight:800;
}
.primary-button,.secondary-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  border-radius:8px;
  padding:0 14px;
}
.primary-button{
  border:0;
  color:#fff;
  background:var(--blue);
}
.primary-button:hover{background:#266da3}
.secondary-button{
  border:1px solid var(--line);
  background:#fff;
}
.primary-button:disabled,.secondary-button:disabled,.text-button:disabled,.icon-button:disabled{
  cursor:not-allowed;
  opacity:.48;
}
.primary-button[hidden],.secondary-button[hidden],.text-button[hidden],.icon-button[hidden],
.replacement-controls[hidden]{
  display:none;
}
.text-button{
  border:0;
  color:var(--blue);
  background:transparent;
  font-size:13px;
}
.danger-text{color:var(--coral)}
.danger-outline{
  color:var(--coral);
  border-color:#f0c7c0;
}
.icon-button{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}
.phone-frame{
  width:min(350px,100%);
  min-height:560px;
  padding:14px;
  border:8px solid #202635;
  border-radius:28px;
  background:#d9e8f2;
  box-shadow:0 20px 55px rgba(25,31,45,.18);
}
.phone-top{
  display:grid;
  grid-template-columns:36px 1fr 46px;
  align-items:center;
  gap:8px;
  min-height:46px;
  color:#fff;
  background:#4b95c3;
  border-radius:16px 16px 6px 6px;
  padding:0 12px;
}
.phone-top span{
  width:26px;
  height:26px;
  border-radius:50%;
  background:#d7edf7;
}
.phone-top strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
}
.phone-top small{
  text-align:right;
  opacity:.8;
  font-size:11px;
}
.message-preview{
  width:88%;
  margin:24px 0 0 auto;
  padding:10px;
  border-radius:12px 12px 3px 12px;
  background:#eaf8df;
}
.message-preview p{
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:14px;
  line-height:1.5;
}
.message-preview footer{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:8px;
  color:#73806e;
  font-size:11px;
}
.media-preview{
  display:grid;
  place-items:center;
  min-height:150px;
  overflow:hidden;
  margin-bottom:10px;
  border-radius:8px;
  color:#fff;
  background:
    linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,0)),
    linear-gradient(145deg,#5c9bc0,#7bc0a9 55%,#f0c66b);
}
.media-preview img,.media-preview video{
  display:block;
  width:100%;
  height:100%;
  max-height:260px;
  object-fit:cover;
}
.media-preview audio{
  display:block;
  width:min(100%,420px);
}
.media-preview span{
  padding:18px;
  text-align:center;
  font-size:13px;
  font-weight:800;
}
.media-preview-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  width:100%;
  min-height:150px;
  padding:6px;
}
.media-preview-grid.count-1{
  grid-template-columns:1fr;
}
.media-preview-grid.count-3,.media-preview-grid.count-5{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.media-preview-tile{
  position:relative;
  min-height:94px;
  margin:0;
  overflow:hidden;
  border-radius:7px;
  background:#202635;
}
.media-preview-tile img,.media-preview-tile video{
  display:block;
  width:100%;
  height:100%;
  min-height:94px;
  object-fit:cover;
}
.media-preview-tile figcaption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:5px 7px;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.72));
  font-size:10px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.publication-preview-box{
  display:grid;
  justify-items:center;
  margin-bottom:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#e9eef3;
}
.publication-preview-box .dialog-section-head{
  width:100%;
}
.dialog-phone-frame{
  width:min(330px,100%);
  min-height:0;
  padding:10px;
  border-width:6px;
  border-radius:22px;
}
.dialog-phone-frame .phone-top{
  min-height:38px;
  border-radius:13px 13px 6px 6px;
  grid-template-columns:28px 1fr 38px;
  padding:0 9px;
}
.dialog-phone-frame .phone-top span{
  width:20px;
  height:20px;
}
.dialog-message-preview{
  width:90%;
  margin-top:16px;
  max-height:420px;
  overflow:auto;
}
.dialog-message-preview .media-preview{
  min-height:120px;
}
.dialog-message-preview .media-preview-grid{
  min-height:120px;
}
.dialog-message-preview .media-preview-tile{
  min-height:78px;
}
.dialog-message-preview .media-preview-tile img,
.dialog-message-preview .media-preview-tile video{
  min-height:78px;
}
.calendar-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  margin:-4px 0 12px;
}
.calendar-toolbar strong{
  min-width:170px;
  font-size:16px;
}
.calendar-toolbar .secondary-button{
  margin-left:auto;
}
.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:#fff;
}
.calendar-grid[hidden],.log-list[hidden]{
  display:none;
}
.calendar-weekday{
  padding:8px 10px;
  border-right:1px solid var(--line);
  color:var(--muted);
  background:#f7f9fc;
  font-size:12px;
  font-weight:900;
  text-align:center;
}
.calendar-weekday:nth-child(7){border-right:0}
.calendar-day{
  min-height:132px;
  padding:8px;
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
  background:#fff;
}
.calendar-day:nth-child(7n){border-right:0}
.calendar-day.is-muted{
  color:#a0a6b4;
  background:#f8fafc;
}
.calendar-day.is-today{background:#fff8fa}
.calendar-day-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:20px;
  margin-bottom:6px;
  font-size:12px;
  font-weight:900;
}
.calendar-count{
  color:var(--blue);
  font-size:11px;
}
.calendar-events{
  display:grid;
  gap:5px;
}
.calendar-event{
  display:grid;
  gap:1px;
  width:100%;
  padding:6px;
  border:1px solid #cfe1f2;
  border-radius:8px;
  color:var(--ink);
  background:#eef7ff;
  text-align:left;
  cursor:pointer;
}
.calendar-event strong,.calendar-event span,.calendar-event small{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.calendar-event strong{
  color:var(--blue);
  font-size:11px;
}
.calendar-event span{
  font-size:11px;
  font-weight:900;
}
.calendar-event small{
  color:var(--muted);
  font-size:11px;
}
.calendar-event.is-failed{
  border-color:#f0c7c0;
  background:var(--coral-soft);
}
.calendar-event.is-published,.calendar-event.is-deleted{
  border-color:#d9dee8;
  background:#f4f6fa;
}
.calendar-more{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}
.queue-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
}
.queue-empty{
  padding:26px;
  border:1px dashed #c9d2df;
  border-radius:8px;
  color:var(--muted);
  text-align:center;
  font-size:14px;
}
.queue-item{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fbfcfe;
}
.queue-date{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:8px;
  color:var(--mint);
  background:var(--mint-soft);
  font-size:12px;
  font-weight:900;
  text-align:center;
}
.queue-main{
  min-width:0;
}
.queue-main strong,.queue-main span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.queue-main strong{font-size:14px}
.queue-main span{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
}
.queue-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:6px;
}
.queue-actions button{
  min-height:32px;
  padding:0 9px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  font-size:12px;
  font-weight:800;
}
.queue-actions button:first-child{color:var(--mint)}
.queue-actions button[data-delete-media-id],.queue-actions button:last-child{color:var(--coral)}
.log-list{
  display:grid;
  gap:10px;
}
.log-item{
  display:grid;
  grid-template-columns:86px minmax(0,1fr) 64px;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fbfcfe;
}
.log-status{
  display:grid;
  place-items:center;
  min-height:32px;
  padding:0 8px;
  border-radius:8px;
  background:#eef4fb;
  color:var(--ink);
  font-size:12px;
  font-weight:900;
  text-align:center;
}
.log-item.is-success .log-status{
  color:var(--mint);
  background:var(--mint-soft);
}
.log-item.is-fail .log-status{
  color:var(--coral);
  background:#fff1ee;
}
.log-item.is-muted .log-status{
  color:#6b7280;
  background:#f2f4f7;
}
.log-item.is-media .log-status{
  color:#2f80c7;
  background:#e9f3ff;
}
.log-main{
  min-width:0;
}
.log-main strong,.log-main span,.log-main small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.log-main strong{
  font-size:14px;
}
.log-main span,.log-main small{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
}
.log-item time{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-align:right;
}
.connect-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.check-result{
  margin:-6px 0 14px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--muted);
  background:#fbfcfe;
  font-size:13px;
  line-height:1.45;
}
.check-result.ok{
  color:var(--mint);
  border-color:#bfe4d7;
  background:var(--mint-soft);
}
.check-result.fail{
  color:var(--coral);
  border-color:#f0c7c0;
  background:var(--coral-soft);
}
.connect-grid article{
  padding:14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fbfcfe;
}
.connect-grid strong,.connect-grid span{
  display:block;
}
.connect-grid strong{
  margin-bottom:6px;
  font-size:14px;
}
.connect-grid span{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}
dialog{
  width:min(760px,calc(100% - 28px));
  border:0;
  border-radius:8px;
  padding:0;
  box-shadow:var(--shadow);
}
dialog::backdrop{background:rgba(26,30,43,.42)}
dialog form{
  max-height:calc(100vh - 42px);
  overflow:auto;
  padding:18px;
}
.dialog-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.dialog-head h2{
  margin:0;
  font-size:18px;
}
#exportText{
  width:100%;
  min-height:260px;
  margin-bottom:12px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px;
  resize:vertical;
  font:13px/1.5 Consolas,"Courier New",monospace;
}
.dialog-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
  padding-bottom:12px;
}
.dialog-grid label,.dialog-field{
  display:grid;
  gap:6px;
  font-size:13px;
  font-weight:800;
}
.dialog-grid input{
  width:100%;
  min-height:42px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}
.dialog-field{
  padding-bottom:12px;
}
.dialog-field textarea{
  min-height:140px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 12px;
  resize:vertical;
}
.inline-save-row{
  display:flex;
  justify-content:flex-end;
  margin-top:4px;
}
.dialog-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.dialog-section-head h3{
  margin:0 0 4px;
  font-size:14px;
}
.dialog-section-head p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}
.publication-media-box,.publication-extra-box{
  margin-bottom:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fbfcfe;
}
.publication-media-preview{
  min-height:82px;
  margin-bottom:10px;
  border-radius:8px;
  background:#eef4f7;
}
.publication-media-preview .media-preview-grid{
  min-height:112px;
}
.media-meta-list{
  display:grid;
  gap:7px;
  padding:8px;
}
.media-meta-item{
  display:grid;
  gap:3px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}
.media-meta-item strong,.media-meta-item span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.media-meta-item strong{
  font-size:13px;
}
.media-meta-item span,.media-empty{
  color:var(--muted);
  font-size:12px;
}
.media-empty{
  padding:18px;
  text-align:center;
  font-weight:800;
}
.replacement-controls{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.media-type-select{
  display:grid;
  gap:4px;
  flex:1 1 150px;
  min-width:150px;
  color:#343847;
  font-size:12px;
  font-weight:800;
}
.media-type-select select{
  width:100%;
  min-height:42px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:0 10px;
  background:#fff;
}
.media-file-select{
  display:grid;
  gap:4px;
  flex:2 1 240px;
  min-width:220px;
  color:#343847;
  font-size:12px;
  font-weight:800;
}
.media-file-select input{
  width:100%;
  min-height:42px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 10px;
  background:#fff;
}
.replacement-controls span{
  flex:1 1 180px;
  min-width:0;
  overflow:hidden;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.publication-extra-slots{
  display:grid;
  gap:8px;
}
.publication-slot-row{
  grid-template-columns:34px minmax(112px,1fr) 92px minmax(112px,1fr) 92px;
}
.dialog-actions{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
}
.toast{
  position:fixed;
  left:50%;
  bottom:20px;
  z-index:20;
  transform:translate(-50%,16px);
  max-width:min(480px,calc(100% - 28px));
  padding:12px 14px;
  border-radius:8px;
  color:#fff;
  background:#202635;
  box-shadow:var(--shadow);
  opacity:0;
  pointer-events:none;
  transition:.18s;
  font-size:14px;
  font-weight:800;
}
.toast.show{
  opacity:1;
  transform:translate(-50%,0);
}
@media(max-width:860px){
  .app-shell{padding:14px}
  .planner-layout{
    grid-template-columns:1fr;
    grid-template-areas:
      "settings"
      "composer"
      "preview"
      "queue"
      "log"
      "connect";
  }
  .settings-grid{grid-template-columns:1fr}
  .preview-panel{padding:14px}
  .connect-grid{grid-template-columns:1fr}
  .calendar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calendar-weekday{display:none}
  .calendar-day{min-height:120px}
  .dialog-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  h1{font-size:24px}
  .section-head{display:grid}
  .queue-toolbar{justify-content:flex-start}
  .slot-count{justify-content:flex-start;max-width:none}
  .quick-times{grid-template-columns:1fr}
  .slot-row{
    grid-template-columns:32px minmax(0,1fr) 92px 32px;
  }
  .slot-row .slot-field:nth-of-type(3){
    grid-column:2;
  }
  .slot-row .slot-field:nth-of-type(4){
    grid-column:3;
  }
  .publication-slot-row{
    grid-template-columns:32px minmax(0,1fr) 92px;
  }
  .publication-slot-row .slot-field:nth-of-type(3){
    grid-column:2;
  }
  .publication-slot-row .slot-field:nth-of-type(4){
    grid-column:3;
  }
  .composer-actions{display:grid}
  .channel-picker{
    grid-template-columns:1fr;
  }
  .queue-item{
    grid-template-columns:38px minmax(0,1fr);
  }
  .queue-actions{
    grid-column:2;
    justify-content:flex-start;
  }
  .log-item{
    grid-template-columns:76px minmax(0,1fr);
  }
  .log-item time{
    grid-column:2;
    text-align:left;
  }
}