.stats { grid-template-columns: repeat(4, 1fr); }
.blue { background: #dce8f4; color: #456d93; }
.retention { display: flex !important; grid-template-columns: auto 1fr !important; align-items: center; gap: 10px !important; padding: 13px 0; }
.retention input { width: auto; }
.retention small { display: block; margin-top: 2px; }
@media (max-width: 1100px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .stats { grid-template-columns: 1fr; } }

.editor-field { position: relative; display: grid; gap: 8px; }
.editor-field > label, .hashtag-field { font-size: 14px; font-weight: 650; }
.composer-toolbar { display: flex; align-items: center; gap: 3px; padding: 7px 8px; margin-bottom: -9px; border: 1px solid #343944; border-radius: 12px 12px 0 0; background: #2d313b; color: #f4f5f7; }
.composer-toolbar button { min-width: 34px; height: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; font-size: 16px; }
.composer-toolbar button:hover, .composer-toolbar button:focus-visible { background: #ffffff18; outline: none; }
.composer-toolbar .ai-tool, .composer-toolbar .chatgpt-tool { flex: 0 0 auto; width: auto; padding: 0 11px; color: #bfe8d9; font-size: 12px; font-weight: 800; white-space: nowrap; }
.composer-toolbar .chatgpt-tool { color: #cbdcff; }
.composer-toolbar .ai-tool:disabled { opacity: .4; cursor: not-allowed; }
.platform:has(input:disabled) { opacity: .45; cursor: not-allowed; background: #f3f5f3; }
.history-tools { display: grid; grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(130px, auto)); gap: 10px; margin-bottom: 14px; }
.history-tools label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.history-tools input, .history-tools select { height: 43px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; background: white; color: var(--ink); }
.toolbar-spacer { flex: 1; }
.editor-field textarea { border-radius: 0 0 12px 12px; }
.emoji-picker { position: absolute; z-index: 8; top: 76px; left: 4px; filter: drop-shadow(0 18px 35px rgba(29,54,48,.2)); }
.emoji-picker:not(.hidden) { display: block !important; }
.emoji-picker emoji-picker { width: min(352px, calc(100vw - 48px)); height: 400px; --border-radius: 13px; }
.hashtag-field { margin-top: 20px; }
.hashtag-field > span { color: var(--muted); font-weight: 500; }
.hashtag-field small { text-align: right; color: var(--muted); }
.preview-hashtags { color: #2f6f91; }
.preview-caption code { padding: 2px 5px; border-radius: 5px; background: #e8eeeb; color: #245b50; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.mobile-media-actions, .mobile-submit-bar { display: none; }
.upload-select { padding: 0; border: 0; border-radius: 8px; background: none; }
.upload-item.active { border-color: #4c8779; box-shadow: 0 0 0 2px #dbece6; }
.preview-media { position: relative; display: block; }
.preview-media > span { min-height: 220px; display: grid; place-items: center; }
.preview-track { display: flex; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.preview-track::-webkit-scrollbar { display: none; }
.preview-slide { flex: 0 0 100%; width: 100%; height: 300px; display: grid; place-items: center; scroll-snap-align: start; background: #17201e; }
.preview-slide img, .preview-slide video { width: 100%; height: 100%; object-fit: contain; }
.preview-controls { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 999px; background: #10201dcc; color: white; backdrop-filter: blur(8px); }
.preview-controls button { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #ffffff1f; color: white; font-size: 25px; line-height: 1; }
.preview-controls button:disabled { opacity: .35; cursor: default; }
.preview-controls span { min-width: 38px; text-align: center; font-size: 11px; font-weight: 800; }

dialog.modal-card { width: min(760px, calc(100% - 28px)); max-height: min(760px, calc(100vh - 40px)); padding: 0; border: 0; border-radius: 22px; color: var(--ink); box-shadow: 0 30px 100px #102c2760; overflow: auto; }
dialog.modal-card::backdrop { background: #102c2770; backdrop-filter: blur(4px); }
.modal-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; border-bottom: 1px solid var(--line); background: white; }
.modal-head h2 { margin: 4px 0 0; font: 600 25px Georgia, serif; }
.modal-head > button { width: 35px; height: 35px; border: 0; border-radius: 50%; background: #eef2f0; font-size: 22px; }
.privacy-copy { margin: 20px 26px; padding: 12px 14px; border-radius: 11px; background: #eef7f3; color: #4f6861; font-size: 12px; }
.ai-loading, #ai-error, #ai-results { margin: 18px 26px 26px; }
.ai-loading { padding: 25px; border: 1px dashed #b8cac4; border-radius: 13px; text-align: center; color: var(--green2); }
.ai-summary { color: var(--muted); font-size: 13px; }
.suggestion-card { width: 100%; margin: 9px 0; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: white; text-align: left; line-height: 1.5; }
.suggestion-card:hover { border-color: #579080; background: #f5faf7; }
.ai-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.ai-tags button { padding: 7px 10px; border: 0; border-radius: 999px; background: #eaf3ef; color: #2e6e5d; font-size: 12px; }
.apply-all { margin-top: 15px; }
.guide-modal { width: min(900px, calc(100% - 28px)) !important; }
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 24px; }
.guide-grid section { padding: 20px; border: 1px solid var(--line); border-radius: 16px; }
.guide-grid h3 { margin: 12px 0; }
.guide-grid ol { padding-left: 20px; color: #4f625d; font-size: 13px; line-height: 1.65; }
.guide-grid code { overflow-wrap: anywhere; color: #235f51; }
.guide-grid a { color: var(--green2); font-weight: 750; font-size: 13px; }
@media (max-width: 900px) {
  .content { padding-bottom: 160px; }
  .preview-panel { order: -1; }
  #submit-post { display: none; }
  .mobile-submit-bar:not(.hidden) { position: fixed; z-index: 11; right: 0; bottom: calc(61px + env(safe-area-inset-bottom)); left: 0; display: flex; padding: 9px 14px; border-top: 1px solid var(--line); background: #fffffff2; backdrop-filter: blur(12px); }
  .mobile-submit-bar button { width: 100%; min-height: 48px; margin: 0; }
  #toast { right: 14px; bottom: calc(132px + env(safe-area-inset-bottom)); left: 14px; text-align: center; }
  .mobile-media-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; width: 100%; }
  .mobile-media-actions button { min-height: 48px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: white; color: var(--green); font-weight: 750; }
  .dropzone { padding: 14px; }
  .dropzone > .upload-icon, .dropzone > #dropzone-title, .dropzone > #dropzone-help { display: none; }
  .preview-slide { height: min(62vh, 520px); }
  .preview-controls button { width: 44px; height: 44px; }
  .preview-panel:has(.preview-media.empty) .preview-copy, .preview-panel:has(.preview-media.empty) .preview-caption { display: none; }
  .preview-media.empty > span { min-height: 110px; }
}
@media (max-width: 680px) { .composer-toolbar { gap: 0; overflow-x: auto; }.composer-toolbar button { min-width: 31px; padding: 0 5px; }.composer-toolbar .ai-tool, .composer-toolbar .chatgpt-tool { padding: 0 7px; }.guide-grid { grid-template-columns: 1fr; padding: 16px; }.modal-head { padding: 18px; }.privacy-copy, .ai-loading, #ai-error, #ai-results { margin-left: 18px; margin-right: 18px; }.history-tools { grid-template-columns: 1fr 1fr; }.history-search { grid-column: 1 / -1; }.platform-picks { grid-template-columns: repeat(3, minmax(0, 1fr)); }.platform-picks .platform { display: grid !important; justify-items: center; gap: 4px !important; padding: 10px 4px !important; text-align: center; }.platform-picks .platform b { position: absolute; top: 5px; right: 7px; }.upload-item strong { max-width: 48vw; } }

.platform-picks, .account-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.threads .network-logo { color: #111; }
@media (max-width: 900px) { .account-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .platform-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }