*{box-sizing:border-box}.nc-page{max-width:1500px;margin:auto;padding:28px}.nc-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}.nc-eyebrow{font-size:12px;font-weight:900;letter-spacing:.13em;color:var(--wms-brand)}.nc-hero h1{font-size:clamp(32px,4vw,52px);margin:6px 0;color:var(--wms-heading)}.nc-hero p,.nc-section-head p,.panel p{color:var(--wms-muted);margin:0;line-height:1.55}.nc-actions{display:flex;gap:10px;flex-wrap:wrap}.btn{border:1px solid var(--wms-line);border-radius:12px;padding:11px 16px;font-weight:800;cursor:pointer;background:var(--wms-surface-2);color:var(--wms-text)}.btn.primary{background:var(--wms-brand);border-color:var(--wms-brand);color:#fff}.btn.secondary:hover,.btn.primary:hover{transform:translateY(-1px)}.btn:disabled{opacity:.55;cursor:not-allowed}.nc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.nc-stats article,.panel,.template-card,.nc-tab{background:var(--wms-surface);border:1px solid var(--wms-line);box-shadow:var(--wms-shadow);border-radius:18px}.nc-stats article{padding:18px}.nc-stats span{display:block;color:var(--wms-muted);font-size:13px}.nc-stats strong{display:block;margin-top:4px;font-size:30px;color:var(--wms-heading)}.nc-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}.nc-tabs button,.nc-tabs a{border:1px solid var(--wms-line);background:var(--wms-surface);color:var(--wms-text);padding:10px 14px;border-radius:11px;text-decoration:none;font-weight:800;cursor:pointer}.nc-tabs .active{background:var(--wms-brand);color:#fff;border-color:var(--wms-brand)}.nc-tab{display:none;padding:20px}.nc-tab.active{display:block}.nc-section-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:16px}.nc-section-head h2,.panel h2{margin:0 0 6px;color:var(--wms-heading)}.nc-legend{color:var(--wms-muted);font-size:13px}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 4px 0 10px}.dot.on{background:#22c55e}.dot.off{background:#94a3b8}.template-list{display:grid;gap:14px}.template-card{overflow:hidden}.template-head{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:16px 18px;background:var(--wms-surface-2);border-bottom:1px solid var(--wms-line)}.template-head h3{margin:0;color:var(--wms-heading)}.template-head small{display:block;color:var(--wms-muted);margin-top:3px}.switch{position:relative;width:48px;height:27px}.switch input{opacity:0;position:absolute}.switch span{position:absolute;inset:0;border-radius:999px;background:#94a3b8;transition:.2s}.switch span:after{content:"";position:absolute;width:21px;height:21px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.2s}.switch input:checked+span{background:#22c55e}.switch input:checked+span:after{transform:translateX(21px)}.channel-badge,.status-badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:900;text-transform:uppercase}.channel-badge.email{background:#dbeafe;color:#1d4ed8}.channel-badge.sms{background:#ede9fe;color:#6d28d9}.template-body{padding:18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.template-body label,.panel label{display:grid;gap:6px;color:var(--wms-muted);font-size:13px;font-weight:700}.template-body .wide{grid-column:span 2}.template-body .full{grid-column:1/-1}.field{width:100%;border:1px solid var(--wms-line);background:var(--wms-input,var(--wms-surface-2));color:var(--wms-text);border-radius:11px;padding:11px 12px;font:inherit}.field.compact{width:auto;min-width:150px}.template-body textarea{min-height:110px;resize:vertical}.template-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:9px}.empty{padding:30px;text-align:center;color:var(--wms-muted)}.table-wrap{overflow:auto;border:1px solid var(--wms-line);border-radius:14px}table{width:100%;border-collapse:collapse;min-width:980px}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--wms-line);vertical-align:top}th{color:var(--wms-muted);font-size:12px;background:var(--wms-surface-2)}td{color:var(--wms-text)}.status-badge.sent{background:#dcfce7;color:#166534}.status-badge.failed{background:#fee2e2;color:#991b1b}.status-badge.pending,.status-badge.processing{background:#fef3c7;color:#92400e}.status-badge.skipped{background:#e2e8f0;color:#475569}.error-text{max-width:300px;color:#ef4444;font-size:12px;white-space:normal}.test-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.panel{padding:20px}.panel label{margin:16px 0}.variables{grid-column:1/-1}.variables #variableList{display:flex;gap:8px;flex-wrap:wrap}.var-chip{border:1px solid var(--wms-line);background:var(--wms-surface-2);color:var(--wms-brand-hover);padding:7px 10px;border-radius:9px;font-family:ui-monospace,Consolas,monospace;cursor:pointer}.notice{padding:12px;border-radius:11px;margin:16px 0}.notice.warning{background:#fef3c7;color:#92400e}.nc-message{min-height:24px;color:#22c55e;font-weight:800;margin:14px 4px 0}.nc-message.error{color:#ef4444}
@media(max-width:1000px){.template-body{grid-template-columns:1fr 1fr}.nc-stats{grid-template-columns:1fr 1fr}.test-grid{grid-template-columns:1fr}.variables{grid-column:auto}}
@media(max-width:650px){.nc-page{padding:16px}.nc-hero,.nc-section-head{flex-direction:column;align-items:stretch}.nc-actions{display:grid;grid-template-columns:1fr 1fr}.nc-stats{grid-template-columns:1fr 1fr}.template-head{grid-template-columns:auto 1fr}.template-head .channel-badge{grid-column:2}.template-body{grid-template-columns:1fr}.template-body .wide,.template-body .full{grid-column:auto}.nc-tab{padding:14px}.nc-tabs{display:grid;grid-template-columns:1fr 1fr}.nc-tabs>*{text-align:center}}
.test-toolbar{display:flex;gap:10px;flex-wrap:wrap}.test-studio{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:18px;align-items:start}.sample-panel{position:sticky;top:18px}.test-actions-stack{display:grid;gap:10px;margin-top:16px}.notice.info{background:color-mix(in srgb,var(--wms-brand) 12%,var(--wms-surface));color:var(--wms-text);border:1px solid color-mix(in srgb,var(--wms-brand) 28%,var(--wms-line))}.preview-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.preview-card{background:var(--wms-surface);border:1px solid var(--wms-line);border-radius:16px;box-shadow:var(--wms-shadow);padding:17px;display:grid;gap:16px}.preview-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}.preview-card h3{margin:10px 0 5px;color:var(--wms-heading);font-size:18px}.preview-card p{margin:0;color:var(--wms-muted);line-height:1.45}.preview-card-actions{display:flex;gap:8px;justify-content:flex-end}.status-dot{font-size:11px;font-weight:900;padding:5px 8px;border-radius:999px;white-space:nowrap}.status-dot.enabled{background:#dcfce7;color:#166534}.status-dot.disabled{background:#e2e8f0;color:#475569}.sms-info{margin-top:16px}.preview-modal[hidden]{display:none}.preview-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:18px}.preview-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.72);backdrop-filter:blur(5px)}.preview-dialog{position:relative;width:min(920px,100%);height:min(820px,94vh);background:var(--wms-surface);border:1px solid var(--wms-line);border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.4);display:grid;grid-template-rows:auto auto 1fr auto;overflow:hidden}.preview-dialog header,.preview-dialog footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--wms-line)}.preview-dialog footer{border-bottom:0;border-top:1px solid var(--wms-line);justify-content:flex-end}.preview-dialog h2{margin:3px 0 0;color:var(--wms-heading)}.preview-close{width:42px;height:42px;border-radius:12px;border:1px solid var(--wms-line);background:var(--wms-surface-2);color:var(--wms-text);font-size:28px;cursor:pointer}.preview-meta{display:grid;gap:5px;padding:13px 20px;background:var(--wms-surface-2);border-bottom:1px solid var(--wms-line)}.preview-meta strong{color:var(--wms-heading)}.preview-meta span{color:var(--wms-muted);font-size:13px}.preview-dialog iframe{width:100%;height:100%;border:0;background:#f1f5f9}.modal-open{overflow:hidden}
@media(max-width:1050px){.test-studio{grid-template-columns:1fr}.sample-panel{position:static}.preview-list{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.preview-list{grid-template-columns:1fr}.preview-card-actions,.test-toolbar{display:grid;grid-template-columns:1fr 1fr}.preview-dialog{height:96vh}.preview-dialog footer{display:grid;grid-template-columns:1fr 1fr}.preview-card-top{flex-direction:column}.status-dot{align-self:flex-start}}