/* ==========================================================================
   TimrX Admin — Clean Minimal Design
   ========================================================================== */

   * { margin: 0; padding: 0; box-sizing: border-box; }

   body {
     background: #0a0a0a;
     color: #e5e5e5;
     font-family: Inter, system-ui, sans-serif;
     font-size: 14px;
     line-height: 1.5;
     min-height: 100vh;
   }
   
   /* Header */
   .header {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     z-index: 100;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 20px 32px;
   }
   .logo {
     font-size: 22px;
     font-weight: 600;
     color: #fff;
     text-decoration: none;
   }
   .logo span { color: #666; }
   .nav {
     display: flex;
     gap: 8px;
   }
   .nav a, .nav button {
     padding: 8px 16px;
     font-size: 13px;
     font-weight: 500;
     color: #999;
     text-decoration: none;
     border: 1px solid rgba(255,255,255,0.1);
     border-radius: 6px;
     background: transparent;
     cursor: pointer;
     transition: all 0.15s;
     font-family: inherit;
   }
   .nav a:hover, .nav button:hover {
     color: #fff;
     border-color: rgba(255,255,255,0.2);
   }
   .nav .logout {
     color: #f87171;
     border-color: rgba(248,113,113,0.2);
   }
   .nav .logout:hover {
     border-color: rgba(248,113,113,0.4);
   }
   
   /* Hero Section (legacy — replaced by ops-summary-bar) */
   @keyframes fadeIn { to { opacity: 1; } }
   @keyframes slideIn {
     from { opacity: 0; transform: translateX(-16px); }
     to { opacity: 1; transform: translateX(0); }
   }
   @keyframes wordUp { to { opacity: 1; transform: translateY(0); } }
   @keyframes fadeUp {
     from { opacity: 0; transform: translateY(16px); }
     to { opacity: 1; transform: translateY(0); }
   }
   
   /* Main Layout */
   .main {
     display: flex;
     gap: 32px;
     padding: 0 32px 48px;
     max-width: 1400px;
     margin: 0 auto;
   }
   .content { flex: 1; min-width: 0; }
   .sidebar { display: none; }
   
   /* Panel trigger button — floating bottom-right */
   .panel-trigger {
     position: fixed;
     bottom: 28px;
     right: 28px;
     z-index: 900;
     width: 52px;
     height: 52px;
     border-radius: 14px;
     border: 1px solid rgba(255,255,255,0.10);
     background: rgba(17,17,17,0.95);
     -webkit-backdrop-filter: blur(12px);
     backdrop-filter: blur(12px);
     color: #aaa;
     font-size: 22px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s;
     box-shadow: 0 4px 24px rgba(0,0,0,0.5);
   }
   .panel-trigger:hover {
     background: rgba(30,30,30,0.98);
     color: #fff;
     border-color: rgba(255,255,255,0.18);
     transform: translateY(-2px);
     box-shadow: 0 6px 28px rgba(0,0,0,0.6);
   }
   .panel-trigger .trigger-dot {
     position: absolute;
     top: 10px;
     right: 10px;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: #22c55e;
     box-shadow: 0 0 6px rgba(34,197,94,0.6);
   }
   
   /* Panel modal */
   .panel-modal {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0,0,0,0.75);
     z-index: 1000;
     align-items: center;
     justify-content: center;
     padding: 20px;
   }
   .panel-modal.show { display: flex; }
   .panel-modal-box {
     background: #111;
     border: 1px solid rgba(255,255,255,0.1);
     border-radius: 14px;
     width: 100%;
     max-width: 800px;
     max-height: 90vh;
     display: flex;
     flex-direction: column;
     overflow: hidden;
   }
   .panel-modal-box .panel {
     background: transparent;
     border: none;
     border-radius: 0;
     padding: 24px;
     width: 100%;
     display: flex;
     flex-direction: column;
     min-height: 0;
     flex: 1;
     overflow: hidden;
   }
   .panel-modal-box .panel-header {
     flex-shrink: 0;
   }
   .panel-modal-box .tabs {
     flex-shrink: 0;
     flex-wrap: wrap;
   }
   .panel-modal-box .tab-content.active {
     display: block;
     overflow-y: auto;
     flex: 1;
     min-height: 0;
     max-height: calc(90vh - 160px);
     padding-right: 4px;
   }
   /* Panel close button */
   .panel-modal-close {
     position: absolute;
     top: 16px;
     right: 16px;
     background: none;
     border: none;
     color: #666;
     font-size: 20px;
     cursor: pointer;
     padding: 4px 8px;
     border-radius: 6px;
     transition: all 0.15s;
     z-index: 1;
   }
   .panel-modal-close:hover { color: #fff; background: rgba(255,255,255,0.08); }
   
   /* Wider billing/analytics stats in modal */
   .panel-modal-box .billing-stat.large { min-width: 0; flex: 1 1 0; }
   .panel-modal-box .analytics-grid { grid-template-columns: 1fr 1fr; }
   .panel-modal-box .billing-dashboard { overflow: visible; }
   
   /* Toolbar */
   .toolbar {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 14px 16px;
     background: rgba(255,255,255,0.02);
     border: 1px solid rgba(255,255,255,0.06);
     border-radius: 10px;
     margin-bottom: 20px;
   }
   .toolbar input {
     flex: 1;
     padding: 10px 12px;
     background: rgba(0,0,0,0.3);
     border: 1px solid rgba(255,255,255,0.08);
     border-radius: 6px;
     color: #e5e5e5;
     font-size: 14px;
     font-family: inherit;
   }
   .toolbar input:focus {
     outline: none;
     border-color: rgba(255,255,255,0.15);
   }
   .toolbar input::placeholder { color: #555; }
   .toolbar select {
     padding: 10px 12px;
     background: rgba(0,0,0,0.3);
     border: 1px solid rgba(255,255,255,0.08);
     border-radius: 6px;
     color: #999;
     font-size: 13px;
     font-family: inherit;
     cursor: pointer;
     outline: none;
   }
   .toolbar select:focus {
     border-color: rgba(255,255,255,0.15);
   }
   
   /* Buttons */
   .btn {
     padding: 10px 14px;
     background: transparent;
     border: 1px solid rgba(255,255,255,0.1);
     border-radius: 6px;
     color: #999;
     font-size: 13px;
     font-weight: 500;
     font-family: inherit;
     cursor: pointer;
     transition: all 0.15s;
   }
   .btn:hover {
     color: #fff;
     border-color: rgba(255,255,255,0.2);
   }
   .btn.primary {
     background: rgba(255,255,255,0.08);
     color: #fff;
   }
   .btn-delete {
     color: #f87171;
     border-color: rgba(248,113,113,0.2);
   }
   .btn-delete:hover {
     border-color: rgba(248,113,113,0.4);
   }
   
   /* Post Cards */
   .posts { display: flex; flex-direction: column; gap: 10px; }
   .post {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 16px;
     background: rgba(255,255,255,0.02);
     border: 1px solid rgba(255,255,255,0.06);
     border-radius: 10px;
     transition: border-color 0.15s;
   }
   .post:hover { border-color: rgba(255,255,255,0.1); }
   .post-info { flex: 1; min-width: 0; }
   .post-title {
     font-weight: 500;
     color: #fff;
     margin-bottom: 4px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .post-meta {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 12px;
     color: #666;
   }
   .post-status {
     padding: 2px 8px;
     font-size: 10px;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.03em;
     border-radius: 4px;
     background: rgba(255,255,255,0.05);
     color: #888;
   }
   .post-affiliate-badge {
     padding: 2px 8px;
     font-size: 10px;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.03em;
     border-radius: 4px;
     background: rgba(255,170,0,0.15);
     color: #fa0;
   }
   .post-actions {
     display: flex;
     gap: 6px;
   }
   .post-actions .btn {
     padding: 6px 10px;
     font-size: 12px;
   }
   
   /* AI Panel */
   .panel {
     background: rgba(255,255,255,0.02);
     border: 1px solid rgba(255,255,255,0.06);
     border-radius: 10px;
     padding: 20px;
     width: 100%;
   }
   .panel-header {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 20px;
   }
   .panel-header h3 {
     font-size: 15px;
     font-weight: 600;
     color: #fff;
   }
   .status {
     font-size: 10px;
     padding: 3px 8px;
     border-radius: 4px;
     font-weight: 500;
   }
   .status.online {
     background: rgba(34,197,94,0.1);
     color: #4ade80;
   }
   .status.offline {
     background: rgba(248,113,113,0.1);
     color: #f87171;
   }
   
   /* Tabs */
   .tabs {
     display: flex;
     gap: 4px;
     padding: 4px;
     background: rgba(0,0,0,0.2);
     border-radius: 8px;
     margin-bottom: 20px;
   }
   .tab {
     flex: 1;
     padding: 8px 12px;
     background: transparent;
     border: none;
     border-radius: 6px;
     color: #666;
     font-size: 13px;
     font-weight: 500;
     font-family: inherit;
     cursor: pointer;
     transition: all 0.15s;
   }
   .tab:hover { color: #999; }
   .tab.active {
     background: rgba(255,255,255,0.08);
     color: #fff;
   }
   .tab-content { display: none; }
   .tab-content.active { display: block; }
   
   /* Forms */
   .form-group { margin-bottom: 16px; }
   .form-label {
     display: block;
     font-size: 11px;
     font-weight: 600;
     color: #666;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     margin-bottom: 6px;
   }
   .form-input,
   .form-textarea,
   .form-select {
     width: 100%;
     padding: 10px 12px;
     background: rgba(0,0,0,0.3);
     border: 1px solid rgba(255,255,255,0.08);
     border-radius: 6px;
     color: #e5e5e5;
     font-size: 14px;
     font-family: inherit;
     transition: border-color 0.15s;
   }
   .form-input:focus,
   .form-textarea:focus,
   .form-select:focus {
     outline: none;
     border-color: rgba(255,255,255,0.2);
   }
   .form-input::placeholder,
   .form-textarea::placeholder { color: #555; }
   
   /* Affiliate section */
   .affiliate-section {
     padding-top: 16px;
     border-top: 1px solid rgba(255,255,255,0.06);
     margin-top: 16px;
   }
   .form-label .optional {
     font-weight: 400;
     color: #555;
     font-size: 10px;
   }
   .form-textarea { resize: vertical; min-height: 90px; }
   .form-select { cursor: pointer; }
   
   /* Checkbox toggle */
   .checkbox-label {
     display: flex;
     align-items: center;
     gap: 8px;
     cursor: pointer;
   }
   .form-checkbox {
     width: 16px;
     height: 16px;
     accent-color: #4ade80;
     cursor: pointer;
   }
   .form-hint {
     display: block;
     font-size: 11px;
     color: #555;
     margin-top: 4px;
   }
   
   /* Upload Dropzone */
   .upload-dropzone {
     border: 1.5px dashed rgba(255,255,255,0.12);
     border-radius: 8px;
     padding: 24px 16px;
     text-align: center;
     cursor: pointer;
     transition: border-color 0.2s, background 0.2s;
     background: rgba(0,0,0,0.15);
   }
   .upload-dropzone:hover,
   .upload-dropzone.drag-over {
     border-color: rgba(74,222,128,0.4);
     background: rgba(74,222,128,0.04);
   }
   .upload-dropzone-inner {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 2px;
     color: #777;
     font-size: 12px;
   }
   .upload-dropzone-hint {
     font-size: 10px;
     color: #555;
     margin-top: 4px;
   }
   .upload-file-list {
     display: flex;
     flex-direction: column;
     gap: 6px;
     margin-top: 10px;
   }
   .upload-file-item {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 8px 10px;
     background: rgba(0,0,0,0.25);
     border: 1px solid rgba(255,255,255,0.06);
     border-radius: 6px;
     font-size: 12px;
   }
   .upload-file-item.is-cover {
     border-color: rgba(74,222,128,0.25);
   }
   .upload-file-thumb {
     width: 40px;
     height: 40px;
     border-radius: 4px;
     object-fit: cover;
     flex-shrink: 0;
   }
   .upload-file-info {
     flex: 1;
     min-width: 0;
     display: flex;
     flex-direction: column;
     gap: 4px;
   }
   .upload-file-name {
     font-size: 11px;
     color: #aaa;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .upload-file-badge {
     font-size: 9px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.06em;
     color: #4ade80;
   }
   .upload-file-desc {
     width: 100%;
     padding: 5px 8px;
     background: rgba(0,0,0,0.3);
     border: 1px solid rgba(255,255,255,0.06);
     border-radius: 4px;
     color: #ccc;
     font-size: 11px;
     font-family: inherit;
   }
   .upload-file-desc::placeholder { color: #444; }
   .upload-file-remove {
     width: 22px;
     height: 22px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: none;
     border: 1px solid rgba(255,255,255,0.08);
     border-radius: 4px;
     color: #666;
     cursor: pointer;
     font-size: 13px;
     flex-shrink: 0;
     transition: color 0.15s, border-color 0.15s;
   }
   .upload-file-remove:hover {
     color: #f87171;
     border-color: rgba(248,113,113,0.3);
   }
   
   /* Action Button */
   .action-btn {
     width: 100%;
     padding: 12px 16px;
     background: rgba(255,255,255,0.06);
     border: 1px solid rgba(255,255,255,0.1);
     border-radius: 8px;
     color: #fff;
     font-size: 13px;
     font-weight: 600;
     font-family: inherit;
     cursor: pointer;
     transition: all 0.15s;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
   }
   .action-btn:hover {
     background: rgba(255,255,255,0.1);
   }
   .action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
   .spinner {
     width: 14px;
     height: 14px;
     border: 2px solid rgba(255,255,255,0.2);
     border-top-color: #fff;
     border-radius: 50%;
     animation: spin 0.6s linear infinite;
   }
   @keyframes spin { to { transform: rotate(360deg); } }
   
   /* Preview */
   .preview {
     margin-top: 16px;
     padding: 16px;
     background: rgba(0,0,0,0.2);
     border-radius: 8px;
   }
   .preview-label {
     font-size: 10px;
     font-weight: 600;
     color: #666;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     margin-bottom: 12px;
   }
   .preview-title {
     font-size: 16px;
     font-weight: 600;
     color: #fff;
     margin-bottom: 6px;
   }
   .preview-text {
     font-size: 13px;
     color: #888;
     line-height: 1.5;
     margin-bottom: 12px;
   }
   .preview-tags {
     display: flex;
     gap: 6px;
     flex-wrap: wrap;
   }
   .preview-tag {
     padding: 4px 8px;
     font-size: 11px;
     background: rgba(255,255,255,0.05);
     border-radius: 4px;
     color: #888;
   }
   .preview-actions {
     display: flex;
     gap: 8px;
     margin-top: 14px;
   }
   .preview-actions .btn { flex: 1; }
   
   /* Assist Grid */
   .assist-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 6px;
     margin-bottom: 16px;
   }
   .assist-btn {
     padding: 10px;
     background: rgba(0,0,0,0.2);
     border: 1px solid rgba(255,255,255,0.06);
     border-radius: 6px;
     color: #999;
     font-size: 12px;
     font-weight: 500;
     font-family: inherit;
     text-align: left;
     cursor: pointer;
     transition: all 0.15s;
   }
   .assist-btn:hover {
     color: #fff;
     border-color: rgba(255,255,255,0.12);
   }
   .assist-btn .icon { margin-right: 6px; opacity: 0.6; }
   
   /* Result */
   .result {
     margin-top: 16px;
     padding: 12px;
     background: rgba(0,0,0,0.2);
     border-radius: 6px;
     max-height: 240px;
     overflow-y: auto;
   }
   .result pre {
     margin: 0;
     font-size: 13px;
     color: #ccc;
     white-space: pre-wrap;
     line-height: 1.6;
   }
   
   /* Cover Preview */
   .cover-preview {
     margin-top: 16px;
     border-radius: 8px;
     overflow: hidden;
     border: 1px solid rgba(255,255,255,0.06);
   }
   .cover-preview img {
     width: 100%;
     display: block;
   }
   .cover-actions {
     padding: 12px;
     display: flex;
     gap: 8px;
   }
   .cover-actions .btn { flex: 1; }
   
   /* Modals */
   .modal {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0,0,0,0.8);
     z-index: 1000;
     align-items: center;
     justify-content: center;
     padding: 20px;
   }
   .modal.show { display: flex; }
   .modal-box {
     background: #111;
     border: 1px solid rgba(255,255,255,0.1);
     border-radius: 12px;
     padding: 24px;
     width: 100%;
     max-width: 480px;
     max-height: 90vh;
     overflow-y: auto;
   }
   .modal-box.wide { max-width: 700px; }
   
   .modal-box h3 {
     font-size: 18px;
     font-weight: 600;
     color: #fff;
     margin-bottom: 20px;
   }
   .modal-box label {
     display: block;
     margin-bottom: 14px;
   }
   .modal-box label span {
     display: block;
     font-size: 12px;
     color: #666;
     margin-bottom: 6px;
   }
   .modal-box input,
   .modal-box textarea,
   .modal-box select {
     width: 100%;
     padding: 10px 12px;
     background: rgba(0,0,0,0.3);
     border: 1px solid rgba(255,255,255,0.08);
     border-radius: 6px;
     color: #e5e5e5;
     font-size: 14px;
     font-family: inherit;
   }
   .modal-box input:focus,
   .modal-box textarea:focus,
   .modal-box select:focus {
     outline: none;
     border-color: rgba(255,255,255,0.2);
   }
   .modal-box textarea {
     min-height: 120px;
     resize: vertical;
   }
   .modal-actions {
     display: flex;
     gap: 8px;
     margin-top: 20px;
     flex-wrap: wrap;
   }
   .modal-actions .btn { flex: 1; min-width: 80px; }
   .muted { color: #666; font-size: 13px; }
   
   /* Utilities */
   .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
   .ml-auto { margin-left: auto; }
   
   /* Modal Header with Close Button */
   .modal-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 20px;
   }
   .modal-header h3 {
     margin: 0;
   }
   .modal-close {
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(255,255,255,0.05);
     border: 1px solid rgba(255,255,255,0.1);
     border-radius: 8px;
     color: #888;
     font-size: 20px;
     cursor: pointer;
     transition: all 0.15s;
   }
   .modal-close:hover {
     background: rgba(255,255,255,0.1);
     color: #fff;
     border-color: rgba(255,255,255,0.2);
   }
   
   .cover-attribution {
     padding: 10px 14px;
     font-size: 12px;
     color: #888;
     background: rgba(0,0,0,0.3);
     margin: 0;
     text-align: center;
   }
   .cover-attribution.hidden {
     display: none;
   }
   .cover-attribution a {
     color: #aaa;
     text-decoration: underline;
   }
   .cover-attribution a:hover {
     color: #fff;
   }
   
   .modal-actions.hidden,
   .hidden {
     display: none;
   }
   @keyframes spin {
     to { transform: rotate(360deg); }
   }
   
   /* Blog Preview Modal Content */
   .blog-modal-content {
     padding: 20px;
     background: rgba(0,0,0,0.2);
     border: 1px solid rgba(255,255,255,0.06);
     border-radius: 10px;
     margin-bottom: 16px;
   }
   .blog-preview-title {
     font-size: 20px;
     font-weight: 600;
     color: #fff;
     margin-bottom: 10px;
     line-height: 1.3;
   }
   .blog-preview-excerpt {
     font-size: 14px;
     color: #999;
     line-height: 1.6;
     margin-bottom: 16px;
   }
   .blog-preview-meta {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin-bottom: 16px;
   }
   .blog-preview-tag {
     padding: 5px 10px;
     font-size: 11px;
     font-weight: 500;
     background: rgba(255,255,255,0.05);
     border: 1px solid rgba(255,255,255,0.08);
     border-radius: 5px;
     color: #888;
   }
   .blog-preview-tag.type {
     background: rgba(59,130,246,0.1);
     border-color: rgba(59,130,246,0.2);
     color: #60a5fa;
   }
   .blog-preview-tag.tags {
     background: rgba(168,85,247,0.1);
     border-color: rgba(168,85,247,0.2);
     color: #c084fc;
   }
   .blog-preview-cover-prompt {
     padding-top: 16px;
     border-top: 1px solid rgba(255,255,255,0.06);
     font-size: 12px;
     color: #666;
     line-height: 1.5;
   }
   .blog-preview-cover-prompt .label {
     font-weight: 600;
     color: #888;
     margin-right: 6px;
   }
   
   /* Draft Status Banner */
   .blog-draft-status {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 10px 14px;
     background: rgba(74, 222, 128, 0.1);
     border: 1px solid rgba(74, 222, 128, 0.2);
     border-radius: 8px;
     margin-bottom: 16px;
     font-size: 13px;
     color: #4ade80;
   }
   .blog-draft-status .status-icon {
     font-size: 14px;
     font-weight: bold;
   }
   .blog-draft-status .draft-slug {
     margin-left: auto;
     font-family: ui-monospace, monospace;
     font-size: 11px;
     color: #888;
     background: rgba(0,0,0,0.3);
     padding: 2px 8px;
     border-radius: 4px;
   }
   .blog-draft-status.saving {
     background: rgba(251, 191, 36, 0.1);
     border-color: rgba(251, 191, 36, 0.2);
     color: #fbbf24;
   }
   .blog-draft-status.error {
     background: rgba(239, 68, 68, 0.1);
     border-color: rgba(239, 68, 68, 0.2);
     color: #ef4444;
   }
   
   /* Cover Section in Blog Modal */
   .blog-cover-section {
     margin-top: 16px;
     padding-top: 16px;
     border-top: 1px solid rgba(255,255,255,0.06);
   }
   .cover-section-header {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 8px;
   }
   .cover-section-header .label {
     font-size: 12px;
     font-weight: 600;
     color: #888;
   }
   .cover-prompt-row {
     font-size: 12px;
     color: #666;
     margin-bottom: 8px;
     display: flex;
     align-items: baseline;
     gap: 6px;
   }
   .cover-prompt-label {
     color: #555;
     flex-shrink: 0;
   }
   .cover-prompt-text {
     font-style: italic;
     color: #777;
   }
   .cover-custom-search {
     margin-bottom: 12px;
   }
   
   /* Modal Cover Preview */
   .modal-cover-preview {
     border-radius: 8px;
     overflow: hidden;
     border: 1px solid rgba(255,255,255,0.1);
   }
   .modal-cover-preview.hidden {
     display: none;
   }
   .modal-cover-preview img {
     width: 100%;
     max-height: 200px;
     object-fit: cover;
     display: block;
   }
   .modal-cover-preview .cover-attribution {
     padding: 8px 12px;
     font-size: 11px;
     color: #888;
     background: rgba(0,0,0,0.3);
     text-align: center;
   }
   
   /* ===== BlogModal cover picker (single column) ===== */
   .modal-picker-grid {
     display: flex;
     flex-direction: column;
     gap: 12px;
     margin-top: 14px;
   }
   
   /* Card */
   .modal-picker-item {
     position: relative;
     border-radius: 12px;
     overflow: hidden;
     cursor: pointer;
     border: 1px solid rgba(255,255,255,0.10);
     background: rgba(255,255,255,0.03);
     transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
   }
   
   /* Image fits naturally within card */
   .modal-picker-item img {
     width: 100%;
     aspect-ratio: 16 / 9;
     object-fit: cover;
     display: block;
     transform: scale(1);
     transition: transform .18s ease;
   }
   
   .modal-picker-item:hover {
     transform: translateY(-2px);
     border-color: rgba(255,255,255,0.22);
     box-shadow: 0 14px 38px rgba(0,0,0,0.38);
   }
   .modal-picker-item:hover img { transform: scale(1.03); }
   
   /* Selected state */
   .modal-picker-item.selected {
     border-color: rgba(74,222,128,0.75);
     box-shadow: 0 0 0 2px rgba(74,222,128,0.22), 0 16px 40px rgba(0,0,0,0.45);
   }
   
   /* Credit overlay: always readable */
   .modal-picker-item .picker-credit {
     position: absolute;
     inset: auto 0 0 0;
     padding: 14px 12px 12px;
     background: linear-gradient(transparent, rgba(0,0,0,0.85));
     font-size: 12px;
     line-height: 1.25;
     color: rgba(255,255,255,0.88);
     text-align: left;
   }
   
   /* Loading overlay when selecting */
   .modal-picker-item .selecting-spinner {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(0,0,0,0.62);
     -webkit-backdrop-filter: blur(3px);
     backdrop-filter: blur(3px);
   }
   .modal-picker-item .selecting-spinner::after {
     content: '';
     width: 28px;
     height: 28px;
     border: 2px solid rgba(255,255,255,0.25);
     border-top-color: #4ade80;
     border-radius: 50%;
     animation: spin .8s linear infinite;
   }
   
   /* Keyboard accessibility */
   .modal-picker-item:focus-visible {
     outline: 2px solid rgba(96,165,250,.9);
     outline-offset: 4px;
   }
   
   /* Cover status badges */
   .cover-status {
     font-size: 12px;
     color: #888;
     padding: 2px 8px;
     border-radius: 4px;
     background: rgba(255,255,255,0.05);
   }
   .cover-status.ready {
     color: #4ade80;
     background: rgba(74, 222, 128, 0.1);
   }
   
   /* Modal with backdrop blur */
   #blogModal.show {
     -webkit-backdrop-filter: blur(8px);
     backdrop-filter: blur(8px);
   }
   
   /* Responsive */
   @media (max-width: 900px) {
     .main { flex-direction: column; padding: 0 20px 32px; }
     .panel-modal-box { max-width: 95vw; }
     .panel-trigger { bottom: 16px; right: 16px; width: 46px; height: 46px; }
     .header { padding: 16px 20px; }
     .page-title { padding: 32px 20px 24px; }
     .toolbar { flex-wrap: wrap; }
     .post { flex-direction: column; align-items: flex-start; }
     .post-actions { width: 100%; margin-top: 10px; }
   }
   
   @media (max-width: 600px) {
     .nav a, .nav button { padding: 6px 12px; font-size: 12px; }
     .page-title h1 { font-size: 26px; }
     .modal-actions { flex-direction: column; }
     .modal-actions .btn { width: 100%; }
   }
   
   /* Subscribers Tab */
   .subs-tab-info {
     text-align: center;
     padding: 20px 0;
   }
   
   .subs-tab-info p {
     margin-bottom: 16px;
   }
   
   .subs-modal-content {
     padding: 20px 0;
   }
   
   .subs-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 20px;
     padding-bottom: 16px;
     border-bottom: 1px solid rgba(255,255,255,0.06);
   }
   
   .subs-stats {
     display: flex;
     gap: 32px;
   }
   
   .subs-stat {
     display: flex;
     flex-direction: column;
     align-items: center;
     background: rgba(255,255,255,0.03);
     border: 1px solid rgba(255,255,255,0.08);
     border-radius: 8px;
     padding: 10px 20px;
   }
   
   .subs-stat-number {
     font-size: 32px;
     font-weight: 600;
     color: #fff;
     line-height: 1;
   }
   
   .subs-stat-label {
     font-size: 11px;
     color: #666;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-top: 6px;
   }
   
   .subs-controls {
     display: flex;
     gap: 10px;
     align-items: center;
   }
   
   .subs-controls .form-select {
     width: 140px;
   }
   
   .subs-list {
     display: flex;
     flex-direction: column;
     gap: 8px;
     max-height: 400px;
     overflow-y: auto;
   }
   
   .sub-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 12px 14px;
     background: rgba(255,255,255,0.02);
     border: 1px solid rgba(255,255,255,0.06);
     border-radius: 8px;
     transition: all 0.15s;
   }
   
   .sub-item:hover {
     background: rgba(255,255,255,0.04);
     border-color: rgba(255,255,255,0.1);
   }
   
   .sub-item.unsubscribed {
     opacity: 0.5;
   }
   
   .sub-email {
     font-size: 13px;
     color: #e5e5e5;
     font-weight: 500;
     word-break: break-all;
   }
   
   .sub-meta {
     display: flex;
     align-items: center;
     gap: 10px;
     flex-shrink: 0;
     margin-left: 12px;
   }
   
   .sub-status {
     font-size: 10px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     padding: 3px 8px;
     border-radius: 4px;
     background: rgba(34, 197, 94, 0.15);
     color: #22c55e;
   }
   
   .sub-item.unsubscribed .sub-status {
     background: rgba(239, 68, 68, 0.15);
     color: #ef4444;
   }
   
   .sub-date {
     font-size: 11px;
     color: #555;
   }
   
   /* Email Status Panel */
   .email-status-panel {
     display: none;
     padding: 16px;
     margin-bottom: 16px;
     background: rgba(0, 0, 0, 0.3);
     border: 1px solid rgba(255, 255, 255, 0.06);
     border-radius: 10px;
   }
   
   .email-status-panel.visible {
     display: block;
   }
   
   .status-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 10px;
     margin-bottom: 12px;
   }
   
   .status-item {
     font-size: 12px;
     padding: 8px 12px;
     background: rgba(255, 255, 255, 0.03);
     border-radius: 6px;
     display: flex;
     align-items: center;
     gap: 8px;
   }
   
   .status-ok {
     color: #22c55e;
     font-weight: bold;
   }
   
   .status-err {
     color: #ef4444;
     font-weight: bold;
   }
   
   .status-hints {
     padding: 12px;
     background: rgba(239, 68, 68, 0.1);
     border: 1px solid rgba(239, 68, 68, 0.2);
     border-radius: 8px;
     font-size: 12px;
     color: #f87171;
   }
   
   .status-hints ul {
     margin: 8px 0 0 16px;
     padding: 0;
   }
   
   .status-hints li {
     margin: 4px 0;
   }
   
   .status-ok-msg {
     padding: 12px;
     background: rgba(34, 197, 94, 0.1);
     border: 1px solid rgba(34, 197, 94, 0.2);
     border-radius: 8px;
     font-size: 12px;
     color: #22c55e;
     text-align: center;
   }
   
   /* ---------- Usage Dashboard ---------- */
   .usage-dashboard {
     padding: 16px 0;
   }
   .usage-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
   }
   .usage-header h3 {
     font-size: 16px;
     font-weight: 600;
     color: #fff;
     margin: 0;
   }
   .usage-section {
     margin-bottom: 24px;
   }
   .usage-section h4 {
     font-size: 13px;
     font-weight: 500;
     color: #888;
     margin: 0 0 12px 0;
     text-transform: uppercase;
     letter-spacing: 0.5px;
   }
   .usage-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 12px;
   }
   .usage-card {
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 8px;
     padding: 14px;
   }
   .usage-label {
     display: block;
     font-size: 11px;
     color: #888;
     margin-bottom: 6px;
     text-transform: uppercase;
     letter-spacing: 0.3px;
   }
   .usage-value {
     font-size: 22px;
     font-weight: 600;
     color: #fff;
   }
   .usage-limit {
     font-size: 13px;
     color: #666;
     margin-left: 4px;
   }
   .usage-bar {
     height: 4px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 2px;
     margin-top: 10px;
     overflow: hidden;
   }
   .usage-fill {
     height: 100%;
     background: linear-gradient(90deg, #3b82f6, #8b5cf6);
     border-radius: 2px;
     transition: width 0.3s ease;
   }
   .usage-fill[style*="width: 8"], .usage-fill[style*="width: 9"], .usage-fill[style*="width: 100"] {
     background: linear-gradient(90deg, #f59e0b, #ef4444);
   }
   
   /* Week Summary */
   .usage-week-summary {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 12px;
   }
   .week-stat {
     background: rgba(255, 255, 255, 0.02);
     border: 1px solid rgba(255, 255, 255, 0.05);
     border-radius: 6px;
     padding: 12px;
     text-align: center;
   }
   .stat-label {
     display: block;
     font-size: 10px;
     color: #666;
     margin-bottom: 6px;
     text-transform: uppercase;
   }
   .stat-value {
     font-size: 18px;
     font-weight: 600;
     color: #e5e5e5;
   }
   
   /* Endpoints Table */
   .endpoints-table {
     width: 100%;
     border-collapse: collapse;
     font-size: 13px;
   }
   .endpoints-table th {
     text-align: left;
     padding: 8px 10px;
     color: #888;
     font-weight: 500;
     font-size: 11px;
     text-transform: uppercase;
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   }
   .endpoints-table td {
     padding: 10px;
     color: #ccc;
     border-bottom: 1px solid rgba(255, 255, 255, 0.04);
   }
   .endpoints-table tr:last-child td {
     border-bottom: none;
   }
   .endpoints-table td:first-child {
     font-family: 'SF Mono', 'Fira Code', monospace;
     font-size: 12px;
     color: #8b5cf6;
   }
   .endpoints-table td:nth-child(2),
   .endpoints-table td:nth-child(3) {
     text-align: right;
   }
   
   /* ═══════════════════════════════════════════════════════════════════════════ */
   /* NOTIFICATION CAMPAIGN CONSOLE                                             */
   /* ═══════════════════════════════════════════════════════════════════════════ */
   
   .notif-admin { padding: 4px 0; }
   
   /* Overview stat cards */
   .notif-overview-cards {
     display: flex;
     gap: 8px;
     margin-bottom: 16px;
     flex-wrap: wrap;
   }
   .notif-stat-card {
     flex: 1;
     min-width: 80px;
     background: rgba(255,255,255,0.04);
     border: 1px solid rgba(255,255,255,0.06);
     border-radius: 8px;
     padding: 10px 12px;
     text-align: center;
   }
   .notif-stat-value {
     font-size: 20px;
     font-weight: 700;
     color: #fff;
     line-height: 1.2;
   }
   .notif-stat-label {
     font-size: 10px;
     color: #9ca3af;
     text-transform: uppercase;
     letter-spacing: 0.04em;
     margin-top: 2px;
   }
   
   /* Sub-tabs */
   .notif-subtabs {
     display: flex;
     gap: 4px;
     padding: 4px;
     background: rgba(255,255,255,0.03);
     border-radius: 6px;
     margin-bottom: 16px;
   }
   .notif-subtab {
     padding: 7px 14px;
     background: transparent;
     border: none;
     color: #666;
     cursor: pointer;
     font-size: 12px;
     font-weight: 600;
     border-radius: 4px;
     transition: all 0.15s;
   }
   .notif-subtab:hover { color: #999; }
   .notif-subtab.active {
     background: rgba(255,255,255,0.08);
     color: #fff;
   }
   
   /* Panels */
   .nc-panel { display: none; }
   .nc-panel.active { display: block; }
   
   /* Filter chips */
   .nc-filter-chip {
     padding: 4px 12px;
     font-size: 11px;
     font-weight: 500;
     background: rgba(255,255,255,0.04);
     border: 1px solid rgba(255,255,255,0.08);
     border-radius: 20px;
     color: #888;
     cursor: pointer;
     transition: all 0.15s;
   }
   .nc-filter-chip:hover { border-color: rgba(255,255,255,0.15); color: #ccc; }
   .nc-filter-chip.active {
     background: rgba(255,255,255,0.1);
     border-color: rgba(255,255,255,0.2);
     color: #fff;
   }
   
   /* Campaign table */
   .nc-table {
     width: 100%;
     border-collapse: collapse;
     font-size: 12px;
   }
   .nc-table th {
     text-align: left;
     padding: 8px 10px;
     font-size: 10px;
     font-weight: 600;
     color: #666;
     text-transform: uppercase;
     letter-spacing: 0.04em;
     border-bottom: 1px solid rgba(255,255,255,0.08);
   }
   .nc-table td {
     padding: 8px 10px;
     border-bottom: 1px solid rgba(255,255,255,0.04);
     vertical-align: middle;
   }
   .nc-table tr:hover td { background: rgba(255,255,255,0.02); }
   .nc-actions-cell { white-space: nowrap; }
   .nc-actions-cell .btn,
   .nc-actions-cell .action-btn {
     padding: 3px 6px;
     font-size: 11px;
     margin-right: 2px;
   }
   
   /* Status badges */
   .nc-status-badge {
     display: inline-block;
     padding: 2px 8px;
     border-radius: 4px;
     font-size: 10px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.03em;
   }
   .nc-badge-draft { background: rgba(156,163,175,0.15); color: #9ca3af; }
   .nc-badge-scheduled { background: rgba(59,130,246,0.15); color: #60a5fa; }
   .nc-badge-publishing { background: rgba(251,191,36,0.15); color: #fbbf24; }
   .nc-badge-published { background: rgba(34,197,94,0.15); color: #4ade80; }
   .nc-badge-expired { background: rgba(239,68,68,0.1); color: #f87171; }
   .nc-badge-archived { background: rgba(107,114,128,0.15); color: #6b7280; }
   
   /* Composer layout */
   .nc-composer-grid {
     display: grid;
     grid-template-columns: 1fr 340px;
     gap: 20px;
   }
   @media (max-width: 900px) {
     .nc-composer-grid { grid-template-columns: 1fr; }
   }
   
   .nc-composer-form { overflow-y: auto; max-height: 75vh; }
   
   .nc-form-section {
     margin-bottom: 16px;
     padding: 12px;
     background: rgba(255,255,255,0.02);
     border: 1px solid rgba(255,255,255,0.05);
     border-radius: 8px;
   }
   .nc-form-section h4 {
     font-size: 11px;
     font-weight: 600;
     color: #888;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     margin: 0 0 10px 0;
   }
   
   .nc-form-row {
     margin-bottom: 8px;
   }
   .nc-form-row label {
     display: block;
     font-size: 11px;
     color: #9ca3af;
     margin-bottom: 3px;
   }
   
   .nc-form-row-inline {
     display: flex;
     gap: 10px;
     margin-bottom: 8px;
   }
   .nc-form-row-inline > div {
     flex: 1;
   }
   .nc-form-row-inline label {
     display: block;
     font-size: 11px;
     color: #9ca3af;
     margin-bottom: 3px;
   }
   
   .nc-audience-preview {
     display: flex;
     gap: 12px;
     align-items: center;
     margin-top: 8px;
   }
   
   /* Composer preview */
   .nc-composer-preview {
     position: sticky;
     top: 0;
   }
   .nc-composer-preview h4 {
     font-size: 11px;
     font-weight: 600;
     color: #888;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     margin: 0 0 8px 0;
   }
   .nc-preview-modes {
     display: flex;
     gap: 4px;
     margin-bottom: 10px;
   }
   .nc-preview-mode {
     padding: 4px 10px;
     font-size: 10px;
     background: rgba(255,255,255,0.04);
     border: 1px solid rgba(255,255,255,0.06);
     border-radius: 4px;
     color: #888;
     cursor: pointer;
     transition: all 0.15s;
   }
   .nc-preview-mode.active {
     background: rgba(255,255,255,0.1);
     color: #fff;
   }
   
   .nc-preview-frame {
     background: rgba(14,14,14,0.94);
     border: 1px solid rgba(255,255,255,0.08);
     border-radius: 12px;
     padding: 12px;
     min-height: 100px;
     transition: all 0.2s;
   }
   .nc-preview-frame.nc-preview-mobile {
     max-width: 320px;
     margin: 0 auto;
   }
   
   /* Preview card items */
   .nc-preview-item {
     display: flex;
     gap: 10px;
     padding: 10px;
   }
   .nc-preview-icon {
     width: 32px;
     height: 32px;
     border-radius: 8px;
     background: rgba(255,255,255,0.06);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #9ca3af;
     font-size: 13px;
     flex-shrink: 0;
   }
   .nc-preview-content { flex: 1; min-width: 0; }
   .nc-preview-title-row {
     display: flex;
     align-items: center;
     gap: 6px;
     flex-wrap: wrap;
   }
   .nc-preview-title {
     font-size: 13px;
     font-weight: 600;
     color: #f5f5f5;
   }
   .nc-preview-badge {
     display: inline-block;
     padding: 1px 6px;
     border-radius: 3px;
     font-size: 9px;
     font-weight: 700;
     text-transform: uppercase;
     background: rgba(251,191,36,0.2);
     color: #fbbf24;
     border: 1px solid rgba(251,191,36,0.3);
   }
   .nc-preview-body {
     font-size: 12px;
     color: #9ca3af;
     margin-top: 3px;
     line-height: 1.4;
   }
   .nc-preview-media { margin-top: 8px; }
   .nc-preview-cta { margin-top: 8px; }
   .nc-preview-cta-btn {
     padding: 5px 14px;
     font-size: 11px;
     font-weight: 600;
     background: rgba(59,130,246,0.15);
     border: 1px solid rgba(59,130,246,0.3);
     border-radius: 6px;
     color: #60a5fa;
     cursor: pointer;
   }
   .nc-preview-time {
     font-size: 10px;
     color: #6b7280;
     margin-top: 4px;
   }
   .nc-preview-empty {
     text-align: center;
     color: #6b7280;
     font-size: 12px;
     padding: 30px;
   }
   
   /* Composer actions */
   .nc-composer-actions {
     display: flex;
     gap: 8px;
     margin-top: 14px;
     padding-top: 14px;
     border-top: 1px solid rgba(255,255,255,0.06);
   }
   
   /* Direct actions grid */
   .nc-direct-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
   }
   @media (max-width: 800px) {
     .nc-direct-grid { grid-template-columns: 1fr; }
   }
   .nc-direct-section {
     padding: 14px;
     background: rgba(255,255,255,0.02);
     border: 1px solid rgba(255,255,255,0.05);
     border-radius: 8px;
   }
   .nc-direct-section h4 {
     font-size: 12px;
     font-weight: 600;
     color: #ccc;
     margin: 0 0 10px 0;
   }
   
   /* Detail view fields */
   .nc-detail-field {
     font-size: 12px;
     color: #ccc;
     padding: 4px 0;
   }
   .nc-detail-field strong {
     color: #888;
     font-size: 11px;
   }
   
   /* ── User Lookup Widget ──────────────────────────────────────────────────── */
   
   .nc-user-lookup {
     margin-bottom: 16px;
     padding: 14px;
     background: rgba(255,255,255,0.02);
     border: 1px solid rgba(255,255,255,0.05);
     border-radius: 8px;
   }
   .nc-user-lookup-header {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
     margin-bottom: 8px;
   }
   .nc-user-lookup-header h4 {
     font-size: 12px;
     font-weight: 600;
     color: #ccc;
     margin: 0;
   }
   
   /* Search results list */
   .nc-search-results {
     display: flex;
     flex-direction: column;
     gap: 2px;
   }
   .nc-search-result {
     padding: 8px 10px;
     border-radius: 6px;
     cursor: pointer;
     transition: background 0.12s;
     border: 1px solid transparent;
   }
   .nc-search-result:hover {
     background: rgba(255,255,255,0.05);
     border-color: rgba(255,255,255,0.08);
   }
   .nc-sr-main {
     display: flex;
     align-items: center;
     gap: 6px;
   }
   .nc-sr-email {
     font-size: 12px;
     font-weight: 600;
     color: #e5e7eb;
   }
   .nc-sr-verified {
     font-size: 9px;
     padding: 1px 5px;
     border-radius: 3px;
     background: rgba(34,197,94,0.15);
     color: #4ade80;
     font-weight: 600;
     text-transform: uppercase;
   }
   .nc-sr-meta {
     display: flex;
     gap: 12px;
     font-size: 10px;
     color: #6b7280;
     margin-top: 2px;
   }
   .nc-sr-meta strong { color: #9ca3af; }
   .nc-sr-id {
     font-family: monospace;
     opacity: 0.6;
   }
   
   /* Selected user card */
   .nc-selected-user {
     margin-top: 10px;
     padding: 12px;
     background: rgba(59,130,246,0.06);
     border: 1px solid rgba(59,130,246,0.15);
     border-radius: 8px;
   }
   .nc-su-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 8px;
   }
   .nc-su-email {
     font-size: 13px;
     font-weight: 600;
     color: #e5e7eb;
   }
   .nc-su-id {
     font-size: 10px;
     color: #6b7280;
     margin-top: 6px;
   }
   .nc-su-id code {
     font-size: 10px;
     background: rgba(0,0,0,0.3);
     padding: 1px 4px;
     border-radius: 3px;
     color: #9ca3af;
   }
   .nc-su-stats {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
   }
   .nc-su-stat {
     text-align: center;
     min-width: 60px;
   }
   .nc-su-stat strong {
     display: block;
     font-size: 15px;
     color: #fff;
   }
   .nc-su-stat span {
     font-size: 9px;
     color: #6b7280;
     text-transform: uppercase;
     letter-spacing: 0.04em;
   }
   .nc-su-purchases {
     margin-top: 8px;
     padding-top: 8px;
     border-top: 1px solid rgba(255,255,255,0.06);
     font-size: 11px;
     color: #9ca3af;
   }
   .nc-su-purchases strong { color: #ccc; }
   .nc-su-purchase-row {
     display: flex;
     gap: 12px;
     padding: 3px 0;
     align-items: center;
   }
   .nc-su-purchase-row .nc-status-badge {
     font-size: 8px;
     padding: 1px 5px;
   }
   
   /* Reduced Motion */
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {
       animation-duration: 0.01ms !important;
       transition-duration: 0.01ms !important;
     }
   }