.scope-page { display: grid; gap: 1rem; }
.scope-hero { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.35rem; border: 1px solid #334155; border-radius: .85rem; background: radial-gradient(circle at 10% 0%, rgba(59,130,246,.17), transparent 38%), #111827; }
.scope-kicker { color: #93c5fd; font: 700 .68rem/1.2 monospace; letter-spacing: .12em; }
.scope-hero h2 { margin-top: .35rem; color: #f8fafc; font-size: 1.55rem; font-weight: 800; }
.scope-hero p { max-width: 48rem; margin-top: .45rem; color: #94a3b8; font-size: .84rem; line-height: 1.55; }
.scope-security { display: grid; gap: .3rem; min-width: 16rem; padding: .8rem; border: 1px solid rgba(59,130,246,.35); border-radius: .6rem; background: rgba(30,64,175,.12); }
.scope-security strong { color: #bfdbfe; font-size: .77rem; }
.scope-security span { color: #64748b; font-size: .66rem; }
.scope-grid { display: grid; grid-template-columns: minmax(18rem, .75fr) minmax(28rem, 1.35fr); gap: 1rem; align-items: start; }
.scope-section-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .9rem; }
.scope-section-head > div { display: flex; align-items: baseline; gap: .55rem; }
.scope-section-head h3, .scope-maintenance h3 { color: #f1f5f9; font-size: 1.02rem; font-weight: 700; }
.scope-section-head span { color: #64748b; font-size: .68rem; }
.scope-form { display: grid; gap: .48rem; }
.scope-form label { margin-top: .25rem; color: #cbd5e1; font-size: .74rem; font-weight: 650; }
.scope-form label span { color: #64748b; font-weight: 400; }
.scope-form textarea.input-field { min-height: 4.5rem; }
.scope-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.scope-help, .scope-rule { color: #64748b; font-size: .67rem; line-height: 1.5; }
.scope-toggle { display: flex; align-items: center; gap: .5rem; padding: .55rem .65rem; border: 1px solid #334155; border-radius: .5rem; background: #0f172a; }
.scope-toggle input { accent-color: #3b82f6; }
.scope-status { min-height: 1.15rem; color: #94a3b8; font-size: .71rem; }
.scope-status.is-error, .scope-assets.is-error { color: #fca5a5; }
.scope-status.is-success { color: #86efac; }
.scope-assets { display: grid; gap: .5rem; }
.scope-asset { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; padding: .7rem; border: 1px solid #334155; border-radius: .55rem; background: #0f172a; }
.scope-asset.is-disabled { opacity: .58; }
.scope-asset-meta { display: flex; gap: .35rem; margin-bottom: .35rem; }
.scope-kind, .scope-state-on, .scope-state-off { padding: .13rem .36rem; border-radius: .3rem; font: 700 .59rem/1.35 monospace; text-transform: uppercase; }
.scope-kind-domain { color: #a7f3d0; background: rgba(6,95,70,.28); }
.scope-kind-url { color: #bfdbfe; background: rgba(30,64,175,.28); }
.scope-kind-ip { color: #fde68a; background: rgba(146,64,14,.25); }
.scope-state-on { color: #86efac; border: 1px solid #166534; }
.scope-state-off { color: #cbd5e1; border: 1px solid #475569; }
.scope-asset code { display: block; color: #e2e8f0; font-size: .75rem; overflow-wrap: anywhere; }
.scope-asset strong { display: block; margin-top: .3rem; color: #94a3b8; font-size: .7rem; }
.scope-asset p { margin-top: .22rem; color: #64748b; font-size: .65rem; line-height: 1.4; }
.scope-asset-actions { display: flex; align-items: start; gap: .35rem; }
.scope-delete-btn, .scope-danger-btn { border: 1px solid #991b1b; border-radius: .4rem; color: #fecaca; background: rgba(127,29,29,.2); cursor: pointer; font-weight: 650; }
.scope-delete-btn { padding: .34rem .5rem; font-size: .68rem; }
.scope-delete-btn:hover, .scope-danger-btn:hover { background: rgba(153,27,27,.38); }
.scope-rule { margin-top: .75rem; padding-top: .65rem; border-top: 1px solid #334155; }
.scope-empty, .scope-loading { padding: .8rem; color: #64748b; font-size: .74rem; text-align: center; }
.scope-maintenance { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; border-color: rgba(153,27,27,.65); background: linear-gradient(100deg, rgba(127,29,29,.12), #1e293b 45%); }
.scope-maintenance-kicker { color: #fca5a5; font: 700 .63rem/1.2 monospace; letter-spacing: .1em; }
.scope-maintenance p { margin: .3rem 0 .55rem; color: #94a3b8; font-size: .72rem; }
.scope-maintenance code { padding: .32rem .48rem; border-radius: .3rem; color: #fecaca; background: #0f172a; font-size: .7rem; }
.scope-danger-btn { padding: .65rem .85rem; }
.scope-danger-btn:disabled { opacity: .5; cursor: wait; }
.scope-maintenance .scope-status { grid-column: 1 / -1; }
.scope-audit { display: grid; gap: .35rem; max-height: 20rem; overflow: auto; }
.scope-audit > div { display: grid; grid-template-columns: minmax(9rem,.5fr) minmax(12rem,1fr) auto; gap: .7rem; padding: .5rem .6rem; border-bottom: 1px solid #334155; align-items: center; }
.scope-audit strong { color: #cbd5e1; font-size: .68rem; }
.scope-audit code { color: #93c5fd; font-size: .65rem; overflow-wrap: anywhere; }
.scope-audit span { color: #64748b; font-size: .62rem; }

@media (max-width: 900px) {
    .scope-grid { grid-template-columns: 1fr; }
    .scope-hero { display: grid; }
    .scope-security { min-width: 0; }
}
@media (max-width: 640px) {
    .scope-asset, .scope-maintenance, .scope-audit > div { grid-template-columns: 1fr; }
    .scope-asset-actions { justify-content: flex-end; }
    .scope-maintenance .scope-status { grid-column: 1; }
}