:root{color-scheme:dark;--bg:#0b1220;--panel:#111c2e;--text:#edf3fb;--muted:#9aabc1;--line:#26364d;--accent:#48b7a5}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:var(--accent);text-decoration:none}.topbar{min-height:68px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#0e1929}
.brand{color:white;font-weight:800;letter-spacing:.12em}.brand span{color:var(--accent)}nav{display:flex;align-items:center;gap:22px}nav a,.nav-button{color:var(--muted);font:inherit}
.nav-button{border:0;background:none;cursor:pointer}.inline-form{display:inline}.container{width:min(1080px,90vw);margin:42px auto 70px}
.hero{margin-bottom:28px}.eyebrow{color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.18em}h1{margin:5px 0 8px;font-size:clamp(30px,5vw,44px);line-height:1.15}
h2{margin:0;font-size:19px}.muted,small{color:var(--muted)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0}
.stat,.panel,.auth-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px}.stat span,.stat small{display:block;color:var(--muted)}
.stat strong{display:block;font-size:32px;margin:5px 0}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.empty-state{text-align:center;padding:35px 15px;color:var(--muted)}.empty-state strong{color:var(--text)}
table{width:100%;border-collapse:collapse}th,td{padding:12px 10px;text-align:left;border-bottom:1px solid var(--line)}th{color:var(--muted);font-size:12px;text-transform:uppercase}
.auth-card{width:min(430px,100%);margin:8vh auto;padding:32px}label{display:block;margin:18px 0;color:var(--muted)}
.field{display:block;width:100%;margin-top:7px;padding:12px;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:9px}
.button{padding:12px 18px;border:0;border-radius:9px;font-weight:700;cursor:pointer}.primary{background:var(--accent);color:#071817}.full{width:100%}
.flash{padding:12px 15px;border-radius:9px;margin-bottom:14px;background:#17243a}.flash.success{border:1px solid var(--accent)}.flash.danger,.error{color:#ff9292}
footer{padding:25px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:12px}
@media(max-width:700px){.topbar{padding:14px 5vw;align-items:flex-start;gap:12px;flex-direction:column}nav{flex-wrap:wrap;gap:14px}.stats{grid-template-columns:1fr}.table-wrap{overflow-x:auto}}
/* AI Content Studio */
.create-panel{margin-bottom:20px}.create-panel form{max-width:760px}.hint{font-size:12px;color:var(--muted);margin:10px 0 0}.button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.secondary{background:#22334b;color:var(--text);border:1px solid #344862}.danger-button{background:#492632;color:#ffdce2;border:1px solid #77404d}.status{display:inline-block;padding:4px 9px;border:1px solid var(--line);border-radius:99px;color:var(--muted);font-size:11px;text-transform:capitalize}.status.approved{color:#6dd8a2;border-color:#28694a}.status.rejected{color:#ff9aa5;border-color:#77404d}.status.published{color:#80c7ff;border-color:#315c7c}.detail-panel{max-width:900px}.variant-card{padding:18px;margin:18px 0;border:1px solid var(--line);border-radius:13px;background:#0e1929}.variant-heading{display:flex;align-items:center;justify-content:space-between}.variant-heading h3{margin:0}.textarea{resize:vertical;min-height:150px}.generated-image{display:block;width:min(100%,420px);height:auto;border-radius:12px;margin:15px 0;border:1px solid var(--line)}.action-form{margin-top:16px}.approval-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}.approved-note{margin-top:20px;padding:14px;border:1px solid #28694a;border-radius:10px;color:#9de2b8}.back-link{display:inline-block;margin:18px 0}.detail-panel label{margin:12px 0}

/* Publishing foundation */
.target-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.target-card{padding:16px;border:1px solid var(--line);border-radius:12px;background:#0e1929}.target-card p{margin:8px 0}.target-card small{color:var(--muted)}select.field{cursor:pointer}.status.cancelled{color:#ffb6a8;border-color:#74463d}@media(max-width:700px){.target-grid{grid-template-columns:1fr}}


/* Autonomous Marketing Engine */
.grid-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.check-row { display:flex; align-items:center; gap:.65rem; margin:1rem 0; }
.check-row input { width:auto; }
.notification-list { display:grid; gap:.8rem; }
.notification { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:1rem; border:1px solid var(--border,#26364b); border-radius:12px; }
.notification.unread { border-color:#36b8a6; background:rgba(54,184,166,.07); }
.notification p { margin:.45rem 0; }
.notification small { opacity:.72; }
.notification form { margin-top:.5rem; }
@media (max-width:700px) { .grid-two { grid-template-columns:1fr; } .notification { flex-direction:column; } }
/* Performance center and device image replacement */
.stats-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.platform-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.platform-summary>div{padding:18px;border:1px solid var(--line);border-radius:12px;background:#0e1929}
.platform-summary span,.platform-summary small{display:block;color:var(--muted)}
.platform-summary strong{display:block;font-size:28px;margin:4px 0}
.image-tools{margin-top:22px;padding:20px;border:1px solid var(--line);border-radius:13px;background:#0e1929}
.image-tools h3{margin:0 0 6px}
.upload-form{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-top:16px}
.upload-label{flex:1;min-width:240px;margin:0}
.upload-form small{width:100%;margin-top:-6px}
.image-placeholder{padding:30px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);text-align:center}
.status.failed,.status.needs_review{color:#ff9aa5;border-color:#77404d}
.status.scheduled{color:#f2d28a;border-color:#76633b}
@media(max-width:850px){.stats-four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.stats-four,.platform-summary{grid-template-columns:1fr}.upload-form{align-items:stretch;flex-direction:column}.upload-form .button{width:100%}}



/* Global notification bell and dropdown */

.main-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

.notification-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.notification-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--muted);
    cursor: pointer;
    border-radius: 10px;
    list-style: none;
}

.notification-trigger::-webkit-details-marker {
    display: none;
}

.notification-trigger:hover {
    color: var(--accent);
    background: rgba(72,183,165,.10);
}

.notification-count {
    position: absolute;
    top: -3px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: #e34d62;
    color: white;
    font-size: 10px;
    font-weight: 800;
    border: 2px solid #0e1929;
}

.notification-popover {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(390px, 90vw);
    background: #111c2e;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 16px 45px rgba(0,0,0,.4);
    z-index: 1000;
    overflow: hidden;
}

.notification-dropdown:not([open]) .notification-popover {
    display: none;
}

.notification-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--line);
}

.notification-popover-header strong,
.notification-popover-header small {
    display: block;
}

.notification-text-button {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
}

.notification-popover-list {
    max-height: 390px;
    overflow-y: auto;
}

.notification-dropdown-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.notification-dropdown-item.unread {
    background: rgba(72,183,165,.07);
    border-left: 3px solid var(--accent);
}

.notification-dropdown-content {
    min-width: 0;
}

.notification-dropdown-content strong {
    display: block;
    font-size: 13px;
}

.notification-dropdown-content p {
    margin: 5px 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.notification-dropdown-content small {
    font-size: 10px;
}

.notification-open-link {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
}

.notification-empty {
    padding: 28px 15px;
    text-align: center;
    color: var(--muted);
}

.notification-history-link {
    display: block;
    padding: 14px;
    text-align: center;
    border-top: 1px solid var(--line);
    font-size: 13px;
    font-weight: 700;
}

.notification-history-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

@media(max-width:700px) {
    .main-nav {
        flex-wrap: wrap;
        gap: 14px;
    }

    .notification-popover {
        position: fixed;
        top: 125px;
        right: 5vw;
        width: 90vw;
    }

    .notification-history-actions {
        align-items: flex-start;
    }
}


/* Live marketing agent monitor */
.agent-monitor{display:grid;grid-template-columns:190px minmax(0,1fr);gap:24px;align-items:center;margin-bottom:22px;overflow:hidden}
.agent-visual{display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px}
.agent-orbit{width:124px;height:124px;border-radius:50%;display:grid;place-items:center;border:2px dashed #39536a;position:relative}
.agent-core{width:82px;height:82px;border-radius:28px;display:grid;place-items:center;background:linear-gradient(145deg,#1b344b,#153c42);border:1px solid #397a78;box-shadow:0 0 24px rgba(72,183,165,.18)}
.agent-face{font-size:40px;color:#8ce0d0;transform:translateY(-7px)}
.agent-state{display:flex;align-items:center;gap:8px;font-size:13px}
.agent-state-dot{width:9px;height:9px;border-radius:50%;background:#e1b65e}
.agent-working .agent-state-dot{background:#55d6a5;box-shadow:0 0 0 5px rgba(85,214,165,.12)}
.agent-working .agent-orbit{animation:agent-orbit 8s linear infinite;border-color:#3c9c89}
.agent-working .agent-core{animation:agent-pulse 1.8s ease-in-out infinite}
.agent-sleeping .agent-core{filter:saturate(.35);opacity:.72}
.agent-sleeping .agent-face{transform:translateY(-5px) rotate(180deg);opacity:.7}
.agent-information{min-width:0}
.agent-activity{font-size:16px;font-weight:650;margin:6px 0 8px}
.agent-schedule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.agent-schedule-grid>div{padding:14px;border:1px solid var(--line);border-radius:12px;background:#0e1929}
.agent-schedule-grid small,.agent-schedule-grid strong{display:block}
.agent-schedule-grid small{color:var(--muted);font-size:11px}
.agent-schedule-grid strong{font-size:17px;margin:5px 0}
.agent-footnote{font-size:11px;color:var(--muted);margin:12px 0 0}
@keyframes agent-orbit{to{transform:rotate(360deg)}}
@keyframes agent-pulse{50%{box-shadow:0 0 32px rgba(72,183,165,.35);transform:scale(1.04)}}
@media(max-width:700px){.agent-monitor{grid-template-columns:1fr}.agent-schedule-grid{grid-template-columns:1fr}.agent-visual{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){.agent-working .agent-orbit,.agent-working .agent-core{animation:none}}