*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Segoe UI Variable","Segoe UI",Arial,sans-serif;
}

:root{
--bg:#edf2ff;
--bg-soft:#f7f9ff;
--surface:#ffffff;
--surface-soft:#f8fbff;
--text:#132238;
--muted:#60708a;
--line:#dbe5f2;
--primary:#2563eb;
--primary-deep:#1d4ed8;
--accent:#0f172a;
--success:#0f9f6e;
--shadow:0 20px 45px rgba(15,23,42,0.08);
--radius:22px;
}

body{
background:
radial-gradient(circle at top left, rgba(37,99,235,0.12), transparent 28%),
radial-gradient(circle at top right, rgba(15,159,110,0.08), transparent 22%),
linear-gradient(180deg,#eef4ff 0%,#f8faff 100%);
color:var(--text);
font-weight:500;
}

.dashboard{
display:flex;
min-height:100vh;
}

.sidebar{
width:240px;
background:linear-gradient(180deg,#0f172a 0%,#172554 100%);
color:#fff;
padding:28px 22px;
position:sticky;
top:0;
height:100vh;
box-shadow:20px 0 40px rgba(15,23,42,0.16);
}

.brand-block{
display:flex;
justify-content:center;
margin-bottom:32px;
}

.brand-logo{
width:72px;
height:72px;
border-radius:22px;
object-fit:cover;
box-shadow:0 16px 30px rgba(15,23,42,0.28);
background:rgba(255,255,255,0.12);
}

@media (min-width: 768px){
.brand-logo{
width:207px;
height:auto;
max-width:100%;
border-radius:28px;
}
}

.sidebar ul{
list-style:none;
display:grid;
gap:8px;
}

.sidebar li{
padding:13px 14px;
border-radius:14px;
cursor:pointer;
transition:background 0.2s ease,transform 0.2s ease;
font-weight:600;
}

.sidebar li:hover{
background:rgba(255,255,255,0.1);
transform:translateX(2px);
}

.sidebar li.active{
background:rgba(255,255,255,0.16);
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12);
}

.main{
flex:1;
padding:28px;
display:grid;
gap:22px;
}

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
}

.topbar h3{
font-size:1.7rem;
letter-spacing:-0.02em;
font-weight:800;
}

.login-page{
min-height:100vh;
background:
radial-gradient(circle at top, rgba(37,99,235,0.2), transparent 34%),
linear-gradient(180deg,#0f172a 0%,#172554 100%);
}

.login-shell{
min-height:100vh;
display:grid;
place-items:center;
padding:28px;
}

.login-card{
width:min(460px,100%);
padding:36px;
border-radius:28px;
background:rgba(255,255,255,0.96);
box-shadow:0 28px 80px rgba(15,23,42,0.28);
display:grid;
gap:18px;
text-align:center;
}

.login-card h1{
font-size:2rem;
font-weight:900;
letter-spacing:-0.04em;
}

.login-brand-logo{
width:92px;
height:92px;
margin:0 auto 2px;
border-radius:28px;
object-fit:cover;
box-shadow:0 24px 50px rgba(37,99,235,0.2);
}

.login-copy{
color:var(--muted);
line-height:1.6;
max-width:320px;
margin:0 auto;
}

.login-alert{
padding:14px 16px;
border-radius:16px;
background:rgba(220,38,38,0.1);
border:1px solid rgba(220,38,38,0.16);
color:#b91c1c;
font-weight:700;
}

.login-form{
display:grid;
gap:16px;
text-align:left;
}

.login-submit{
width:100%;
justify-content:center;
padding:16px 20px;
font-size:1rem;
font-weight:800;
margin-top:4px;
}

.topbar-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}

.toolbar-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
min-width:150px;
}

.notification-trigger{
position:relative;
}

.notification-count{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:26px;
height:26px;
padding:0 8px;
border-radius:999px;
background:#dc2626;
color:#fff;
font-size:0.78rem;
font-weight:700;
line-height:1;
}

.topbar-panel-shell{
display:grid;
gap:18px;
}

.quick-panel{
padding:22px;
}

.hidden-panel{
display:none !important;
}

.app-alert{
padding:16px 18px;
border-radius:18px;
border:1px solid var(--line);
background:rgba(255,255,255,0.9);
box-shadow:var(--shadow);
}

.app-alert strong{
display:block;
margin-bottom:6px;
font-size:1rem;
}

.app-alert p{
color:#41556f;
line-height:1.6;
}

.app-alert.success{
background:rgba(236,253,245,0.95);
border-color:rgba(15,159,110,0.25);
}

.app-alert.success strong{
color:#0f7c59;
}

.app-alert.error{
background:rgba(254,242,242,0.95);
border-color:#fecaca;
}

.app-alert.error strong{
color:#b42318;
}

.app-alert.warning{
background:rgba(255,251,235,0.95);
border-color:#fde68a;
}

.app-alert.warning strong{
color:#a16207;
}

.card{
background:rgba(255,255,255,0.88);
border:1px solid rgba(219,229,242,0.9);
border-radius:var(--radius);
padding:24px;
box-shadow:var(--shadow);
backdrop-filter:blur(10px);
}

.compact-card{
padding:20px;
}

.scheduler-shell{
padding:28px;
}

.scheduler-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:18px;
margin-bottom:22px;
}

.eyebrow{
display:inline-flex;
align-items:center;
padding:6px 12px;
border-radius:999px;
background:rgba(37,99,235,0.1);
color:var(--primary);
font-size:0.78rem;
font-weight:700;
letter-spacing:0.08em;
text-transform:uppercase;
margin-bottom:10px;
}

.scheduler-copy{
margin-top:8px;
color:var(--muted);
line-height:1.65;
max-width:70ch;
font-size:0.95rem;
}

.form-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
margin-bottom:20px;
}

.campaign-grid{
align-items:end;
padding:18px;
border-radius:20px;
background:linear-gradient(180deg,#f9fbff 0%,#f3f7ff 100%);
border:1px solid var(--line);
}

label{
font-size:0.82rem;
font-weight:700;
display:block;
margin-bottom:8px;
color:#314257;
letter-spacing:0.01em;
}

input,select,textarea{
width:100%;
padding:12px 14px;
border:1px solid var(--line);
border-radius:14px;
font-size:0.95rem;
background:#fff;
color:var(--text);
transition:border-color 0.2s ease,box-shadow 0.2s ease,transform 0.2s ease;
font-weight:600;
}

input:focus,select:focus,textarea:focus{
outline:none;
border-color:rgba(37,99,235,0.42);
box-shadow:0 0 0 4px rgba(37,99,235,0.1);
transform:translateY(-1px);
}

textarea{
min-height:120px;
resize:vertical;
}

.form-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:6px;
}

button{
border:none;
border-radius:14px;
padding:12px 18px;
font-size:0.94rem;
font-weight:800;
cursor:pointer;
transition:transform 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;
}

button:hover{
transform:translateY(-1px);
}

.primary-btn{
background:linear-gradient(135deg,var(--primary),var(--primary-deep));
color:white;
box-shadow:0 12px 24px rgba(37,99,235,0.18);
}

.primary-btn:hover{
background:linear-gradient(135deg,#1f5ae0,#1b46c6);
}

.secondary-btn{
background:linear-gradient(135deg,#0f9f6e,#0b7d56);
color:white;
box-shadow:0 12px 24px rgba(15,159,110,0.16);
}

.ghost-btn{
background:#eef4ff;
color:#1f3b63;
border:1px solid #c8d7ef;
}

.auto-engine-shell{
display:grid;
gap:20px;
margin-top:18px;
padding-top:6px;
}

.auto-hero{
display:flex;
justify-content:space-between;
gap:18px;
align-items:flex-start;
padding:22px;
border-radius:22px;
background:linear-gradient(135deg,#e9f1ff 0%,#f9fcff 55%,#eefbf5 100%);
border:1px solid #d8e5fa;
}

.auto-hero-stats{
display:grid;
grid-template-columns:repeat(2,minmax(180px,1fr));
gap:12px;
min-width:360px;
}

.hero-stat{
padding:16px;
border-radius:18px;
background:rgba(255,255,255,0.78);
border:1px solid rgba(255,255,255,0.9);
}

.hero-stat span{
display:block;
font-size:0.76rem;
text-transform:uppercase;
letter-spacing:0.08em;
color:var(--muted);
margin-bottom:8px;
}

.hero-stat strong{
font-size:1rem;
line-height:1.45;
}

.auto-config-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
padding:18px;
border-radius:20px;
background:#f9fbff;
border:1px solid var(--line);
}

.auto-actions{
margin-top:0;
}

.auto-sections{
display:grid;
gap:18px;
}

.auto-edit-card,
.dashboard-card,
.chart-card,
.interval-card{
padding:22px;
}

.section-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:14px;
margin-bottom:16px;
}

.section-header h4{
font-size:1.08rem;
margin-bottom:6px;
font-weight:800;
}

.section-header p{
color:var(--muted);
line-height:1.6;
}

.edit-grid{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:12px;
}

.edit-field{
padding:14px;
border-radius:18px;
background:var(--surface-soft);
border:1px solid var(--line);
}

.metric-service-grid,
.engagement-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}

.eng-card{
border:1px solid var(--line);
padding:18px;
border-radius:18px;
background:linear-gradient(180deg,#ffffff 0%,#f9fbff 100%);
box-shadow:0 10px 24px rgba(15,23,42,0.04);
}

.eng-card h4{
font-size:1rem;
margin-bottom:10px;
font-weight:800;
}

.eng-card strong{
font-size:1.3rem;
color:var(--primary);
}

.eng-card input,
.eng-card select{
margin-bottom:10px;
}

.compact-engagement-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}

.compact-eng-card{
padding:16px;
gap:10px;
display:grid;
align-content:start;
}

.checkbox-title{
display:flex;
align-items:center;
gap:10px;
margin-bottom:2px;
}

.auto-dashboard-grid{
display:grid;
grid-template-columns:1fr 1.2fr;
gap:18px;
}

.auto-control-grid,
.auto-forecast-grid{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:14px;
margin-top:18px;
}

.control-card,
.forecast-card{
padding:16px;
border-radius:18px;
background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
border:1px solid var(--line);
box-shadow:0 10px 24px rgba(15,23,42,0.04);
}

.control-card label,
.forecast-card span{
display:block;
font-size:0.78rem;
color:var(--muted);
margin-bottom:10px;
text-transform:uppercase;
letter-spacing:0.06em;
font-weight:700;
}

.forecast-card strong{
display:block;
font-size:1.2rem;
font-weight:800;
margin-bottom:6px;
}

.forecast-card small{
color:#4f6481;
line-height:1.5;
display:block;
}

.template-shell{
display:flex;
flex-wrap:wrap;
gap:14px;
margin-top:14px;
align-items:stretch;
}

.template-shell .control-card{
flex:1 1 280px;
}

.template-actions{
justify-content:flex-start;
align-items:flex-end;
}

.auto-advanced-grid{
grid-template-columns:1fr 1fr;
}

.auto-insights-grid{
grid-template-columns:1fr 1fr;
}

.scorecard-grid,
.timeline-preview-grid{
display:grid;
gap:12px;
}

.timeline-summary-bar{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.timeline-summary-chip{
min-width:120px;
padding:12px 14px;
border-radius:16px;
background:var(--surface-soft);
border:1px solid var(--line);
}

.timeline-summary-chip span{
display:block;
font-size:0.72rem;
color:var(--muted);
text-transform:uppercase;
letter-spacing:0.06em;
margin-bottom:6px;
font-weight:700;
}

.timeline-summary-chip strong{
display:block;
font-size:1rem;
font-weight:800;
}

.timeline-table-wrap{
max-height:340px;
overflow:auto;
border:1px solid var(--line);
border-radius:18px;
background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}

.timeline-compact-table{
width:100%;
border-collapse:collapse;
min-width:620px;
}

.timeline-compact-table th,
.timeline-compact-table td{
padding:12px 14px;
text-align:left;
border-bottom:1px solid rgba(132,145,166,0.18);
font-size:0.92rem;
}

.timeline-compact-table thead th{
position:sticky;
top:0;
z-index:1;
background:#f8fbff;
font-size:0.75rem;
text-transform:uppercase;
letter-spacing:0.06em;
color:var(--muted);
font-weight:800;
}

.timeline-gap-row td{
text-align:center;
font-size:0.82rem;
font-weight:700;
color:var(--muted);
background:rgba(148,163,184,0.08);
}

.diagnostics-card{
margin-top:16px;
}

.diagnostic-chip-row{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:4px;
}

.diagnostic-chip{
min-width:120px;
padding:12px 14px;
border-radius:16px;
background:var(--surface-soft);
border:1px solid var(--line);
}

.diagnostic-chip span{
display:block;
font-size:0.72rem;
color:var(--muted);
text-transform:uppercase;
letter-spacing:0.06em;
margin-bottom:6px;
font-weight:700;
}

.diagnostic-chip strong{
display:block;
font-size:1rem;
font-weight:800;
}

.diagnostic-list{
margin:14px 0 0;
padding-left:18px;
color:#4f6481;
display:grid;
gap:8px;
}

.insight-stat-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}

.scorecard-item,
.timeline-item,
.insight-stat{
padding:16px;
border-radius:18px;
background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
border:1px solid var(--line);
}

.scorecard-item span,
.timeline-top span{
display:block;
font-size:0.78rem;
color:var(--muted);
margin-bottom:8px;
text-transform:uppercase;
letter-spacing:0.06em;
}

.scorecard-item strong{
display:block;
font-size:1.2rem;
font-weight:800;
margin-bottom:6px;
}

.insight-stat span{
display:block;
font-size:0.78rem;
color:var(--muted);
margin-bottom:8px;
text-transform:uppercase;
letter-spacing:0.06em;
}

.insight-stat strong{
display:block;
font-size:1.18rem;
font-weight:800;
}

.scorecard-item small,
.timeline-item p{
color:#4f6481;
line-height:1.55;
display:block;
}

.timeline-top{
display:flex;
justify-content:space-between;
gap:12px;
margin-bottom:8px;
align-items:flex-start;
}

.timeline-top strong{
font-size:1rem;
font-weight:800;
}

.interval-table-shell{
overflow:auto;
margin-bottom:14px;
}

.interval-edit-table{
width:100%;
min-width:780px;
border-collapse:collapse;
}

.interval-edit-table th,
.interval-edit-table td{
padding:10px;
border-bottom:1px solid var(--line);
font-size:0.84rem;
text-align:left;
}

.interval-edit-table input{
margin:0;
min-width:90px;
}

.engine-note{
margin-top:14px;
padding:16px 18px;
border-radius:18px;
background:linear-gradient(135deg,rgba(37,99,235,0.08),rgba(15,159,110,0.08));
border:1px solid rgba(37,99,235,0.14);
color:#284464;
font-weight:600;
line-height:1.6;
}

.summary-metric-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}

.summary-metric{
padding:16px;
border-radius:18px;
background:var(--surface-soft);
border:1px solid var(--line);
}

.compact-stat-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}

.mini-stat-card,
.compact-note-card{
padding:16px;
border-radius:18px;
background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
border:1px solid var(--line);
box-shadow:0 10px 20px rgba(15,23,42,0.04);
}

.mini-stat-card span,
.compact-note-card span{
display:block;
font-size:0.78rem;
color:var(--muted);
margin-bottom:8px;
text-transform:uppercase;
letter-spacing:0.06em;
}

.mini-stat-card strong,
.compact-note-card strong{
display:block;
font-size:1.35rem;
margin-bottom:4px;
}

.compact-note-card small{
color:#4f6481;
line-height:1.55;
display:block;
}

.compact-stack{
gap:14px;
}

.soft-field{
padding:14px;
border-radius:18px;
background:#f9fbff;
border:1px solid var(--line);
}

.summary-metric span{
display:block;
font-size:0.8rem;
color:var(--muted);
margin-bottom:8px;
}

.summary-metric strong{
display:block;
font-size:1.18rem;
margin-bottom:4px;
font-weight:800;
}

.summary-metric small{
color:#4f6481;
}

.phase-detail-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}

.phase-card{
padding:16px;
border-radius:18px;
background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
border:1px solid var(--line);
position:relative;
overflow:hidden;
}

.phase-card::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:4px;
border-radius:999px;
}

.phase-card.test::before{background:#60a5fa;}
.phase-card.growth::before{background:#34d399;}
.phase-card.peak::before{background:#f59e0b;}
.phase-card.decay::before{background:#fb7185;}

.phase-card h5{
font-size:1rem;
margin-bottom:8px;
}

.phase-meta,
.phase-stats{
display:grid;
gap:8px;
}

.phase-meta{
grid-template-columns:repeat(3,minmax(0,1fr));
margin-bottom:10px;
}

.phase-stats{
grid-template-columns:repeat(5,minmax(0,1fr));
}

.phase-meta div,
.phase-stats div{
padding:10px;
border-radius:12px;
background:#f5f8ff;
font-size:0.86rem;
}

.phase-meta span,
.phase-stats span{
display:block;
font-size:0.72rem;
color:var(--muted);
margin-bottom:4px;
}

.chart-wrap{
height:360px;
}

.interval-card.hidden-panel{
display:none;
}

.recent-order-list{
display:grid;
gap:16px;
}

.recent-order-item{
padding:18px;
border-radius:18px;
background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
border:1px solid var(--line);
display:grid;
gap:14px;
}

.recent-order-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:16px;
}

.recent-order-select{
display:inline-flex;
align-items:center;
gap:8px;
font-size:0.82rem;
color:#425874;
white-space:nowrap;
}

.recent-order-select input{
width:auto;
margin:0;
transform:none;
box-shadow:none;
}

.recent-bulk-actions{
justify-content:flex-end;
}

.recent-order-head strong{
display:block;
margin-bottom:6px;
font-size:1rem;
}

.recent-order-head p{
color:var(--muted);
line-height:1.5;
word-break:break-all;
}

.recent-order-meta{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.recent-order-meta span{
padding:7px 10px;
border-radius:999px;
background:#f2f6ff;
border:1px solid var(--line);
font-size:0.82rem;
color:#304562;
}

.recent-order-edit{
border-top:1px solid var(--line);
padding-top:14px;
}

.compact-details{
border-top:none;
padding-top:0;
}

.recent-order-edit summary{
cursor:pointer;
font-weight:700;
color:#1f3b63;
list-style:none;
}

.recent-order-edit summary::-webkit-details-marker{
display:none;
}

.recent-order-edit summary::after{
content:"+";
float:right;
font-size:1rem;
}

.recent-order-edit[open] summary::after{
content:"-";
}

.recent-order-edit form{
margin-top:14px;
}

.recent-edit-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.table-primary{
font-weight:700;
line-height:1.45;
margin-bottom:4px;
}

.table-secondary{
font-size:0.83rem;
color:#5b6d86;
line-height:1.55;
word-break:break-word;
}

.table-gap-top{
margin-top:8px;
}

.table-tag,
.mono-chip{
display:inline-flex;
align-items:center;
padding:7px 10px;
border-radius:999px;
border:1px solid var(--line);
background:#f5f8ff;
font-size:0.8rem;
color:#304562;
}

.mono-chip{
font-family:Consolas,monospace;
}

.inline-chip-row{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:8px;
}

.response-snippet{
max-height:96px;
overflow:auto;
padding:12px;
border-radius:14px;
background:#f7fbff;
border:1px solid var(--line);
font-family:Consolas,monospace;
font-size:0.8rem;
line-height:1.55;
color:#304562;
white-space:pre-wrap;
word-break:break-word;
}

.interval-preview-grid{
display:grid;
gap:10px;
max-height:420px;
overflow:auto;
padding-right:4px;
}

.interval-item{
padding:14px 16px;
border-radius:16px;
background:#f8fbff;
border:1px solid var(--line);
}

.interval-item strong{
display:block;
margin-bottom:6px;
}

.interval-meta-row{
display:flex;
gap:8px;
flex-wrap:wrap;
margin:8px 0 10px;
}

.interval-meta-row span{
display:inline-flex;
align-items:center;
padding:6px 10px;
border-radius:999px;
background:#f2f6ff;
border:1px solid var(--line);
font-size:0.78rem;
color:#3c5270;
}

.interval-line{
font-family:Consolas,monospace;
color:#304562;
line-height:1.65;
font-size:0.88rem;
}

#allServicePanel,
#customCommentPanel,
#autoPanel{
display:none;
}

.custom-comment-panel{
margin-top:18px;
}

table{
width:100%;
border-collapse:collapse;
}

th,td{
padding:10px;
border-bottom:1px solid #eee;
font-size:13px;
}

.engagement-tags span{
background:#eef2ff;
padding:4px 8px;
border-radius:4px;
margin-right:6px;
}

.status{
padding:4px 8px;
border-radius:4px;
font-size:12px;
}

.running{
background:#bbf7d0;
}

.icon-btn{
border:none;
background:#e2e8f0;
padding:6px 8px;
border-radius:5px;
cursor:pointer;
margin-right:4px;
}

.icon-btn.danger{
background:#fecaca;
}

.page-hero{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:18px;
padding:24px;
border-radius:22px;
background:linear-gradient(135deg,#edf4ff 0%,#ffffff 55%,#eefbf5 100%);
border:1px solid #d9e7fb;
box-shadow:var(--shadow);
}

.page-hero h1,
.page-hero h3{
font-size:1.65rem;
letter-spacing:-0.03em;
margin-bottom:8px;
font-weight:900;
}

.page-hero p{
color:var(--muted);
line-height:1.55;
max-width:56ch;
font-size:0.96rem;
}

.hero-badge-row{
display:grid;
grid-template-columns:repeat(2,minmax(180px,1fr));
gap:12px;
min-width:360px;
}

.hero-badge{
padding:16px;
border-radius:18px;
background:rgba(255,255,255,0.82);
border:1px solid rgba(255,255,255,0.95);
}

.hero-badge span{
display:block;
font-size:0.78rem;
text-transform:uppercase;
letter-spacing:0.08em;
color:var(--muted);
margin-bottom:8px;
}

.hero-badge strong{
font-size:1rem;
line-height:1.5;
font-weight:800;
}

.stack-grid{
display:grid;
gap:18px;
}

.two-col{
display:grid;
grid-template-columns:1.1fr 0.9fr;
gap:18px;
}

.stats-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:16px;
}

.stat-card{
padding:18px;
border-radius:18px;
background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
border:1px solid var(--line);
box-shadow:0 10px 20px rgba(15,23,42,0.04);
}

.stat-card span{
display:block;
font-size:0.8rem;
color:var(--muted);
margin-bottom:8px;
}

.stat-card strong{
display:block;
font-size:1.5rem;
letter-spacing:-0.03em;
font-weight:900;
}

.table-shell{
overflow:auto;
}

.table-shell table{
min-width:720px;
}

.table-head{
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
margin-bottom:16px;
}

.tracking-toolbar{
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
}

.table-head p{
color:var(--muted);
line-height:1.6;
}

.status-badge{
display:inline-flex;
align-items:center;
padding:6px 10px;
border-radius:999px;
font-size:0.78rem;
font-weight:700;
}

.status-badge.active{
background:rgba(15,159,110,0.12);
color:#0f7c59;
}

.status-badge.disabled{
background:rgba(220,38,38,0.12);
color:#b42318;
}

.inline-form-actions,
.danger-row{
display:flex;
flex-wrap:wrap;
gap:12px;
}

.search-inline{
display:flex;
align-items:center;
gap:12px;
padding:16px 18px;
border-radius:18px;
background:#f9fbff;
border:1px solid var(--line);
}

.search-inline input{
margin-bottom:0;
}

.danger-btn{
background:#dc2626;
color:white;
}

.danger-btn:hover{
background:#b91c1c;
}

.service-pill-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}

.service-pill{
padding:8px 10px;
border-radius:12px;
background:#f5f8ff;
border:1px solid var(--line);
font-size:0.84rem;
color:#304562;
}

.notification-list{
display:grid;
gap:12px;
}

.notification-item{
padding:16px;
border-radius:18px;
border:1px solid var(--line);
background:#f9fbff;
}

.notification-item.error{
background:rgba(254,242,242,0.9);
border-color:#fecaca;
}

.notification-item.warning{
background:rgba(255,251,235,0.95);
border-color:#fde68a;
}

.notification-top{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:16px;
margin-bottom:8px;
}

.notification-top span{
font-size:0.78rem;
color:var(--muted);
white-space:nowrap;
}

.notification-item p{
color:#41556f;
line-height:1.6;
}

.clean-copy{
max-width:48ch;
}

@media(max-width:1200px){
.auto-dashboard-grid,
.auto-control-grid,
.auto-forecast-grid,
.auto-hero{
grid-template-columns:1fr;
display:grid;
}

.auto-hero-stats{
min-width:0;
grid-template-columns:1fr 1fr;
}

.edit-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}

.stats-grid,
.two-col,
.compact-stat-grid,
.hero-badge-row,
.auto-advanced-grid,
.auto-insights-grid{
grid-template-columns:1fr 1fr;
}

.compact-engagement-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media(max-width:900px){
.sidebar{
display:none;
}

.main{
padding:18px;
}

.form-grid,
.engagement-grid,
.metric-service-grid,
.auto-control-grid,
.auto-forecast-grid,
.summary-metric-grid,
.phase-detail-grid,
.stats-grid,
.compact-stat-grid,
.two-col,
.auto-advanced-grid,
.auto-insights-grid,
.hero-badge-row,
.service-pill-grid,
.insight-stat-grid,
.phase-meta,
.phase-stats{
grid-template-columns:1fr;
}

.edit-grid{
grid-template-columns:1fr 1fr;
}

.topbar,
.scheduler-head,
.page-hero,
.table-head,
.recent-order-head,
.tracking-toolbar{
flex-direction:column;
align-items:flex-start;
}

.auto-hero-stats{
grid-template-columns:1fr;
}

.compact-engagement-grid{
grid-template-columns:1fr;
}
}

@media(max-width:640px){
.card,
.scheduler-shell,
.auto-edit-card,
.dashboard-card,
.chart-card,
.interval-card{
padding:18px;
}

.edit-grid{
grid-template-columns:1fr;
}

.form-actions{
flex-direction:column;
}

.topbar-actions,
.inline-form-actions{
width:100%;
flex-direction:column;
}

button{
width:100%;
}
}