.guard-security-portal { width: 100%; color: var(--ss-text-primary); }
.guard-security-shell { display: grid; gap: 1rem; min-width: 0; }
.guard-security-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--ss-border-default); border-radius: 1.2rem; background: var(--ss-gradient-module); color: var(--ss-text-on-brand); box-shadow: var(--ss-shadow-lg); }
.guard-security-hero h1, .guard-security-hero p { margin: 0; }
.guard-security-hero h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
.guard-security-hero > div > p:last-child { margin-top: .45rem; color: var(--ss-text-on-brand-soft); }
.guard-security-hero > span { padding: .5rem .75rem; border: 1px solid var(--ss-border-inverse); border-radius: 999px; font-size: .75rem; font-weight: 900; white-space: nowrap; }
.guard-security-eyebrow { margin: 0 0 .3rem; color: var(--ss-text-accent); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.guard-security-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.guard-security-metric { display: flex; gap: .7rem; min-width: 0; padding: .9rem; border: 1px solid var(--ss-border-default); border-radius: .9rem; background: var(--ss-bg-primary); box-shadow: var(--ss-shadow-sm); }
.guard-security-metric > span, .guard-security-shortcuts button > span { display: grid; width: 2.7rem; height: 2.7rem; flex: 0 0 2.7rem; place-items: center; border-radius: .8rem; background: var(--ss-info-bg); color: var(--ss-info-text); }
.guard-security-metric div { display: grid; gap: .1rem; min-width: 0; }
.guard-security-metric small, .guard-security-metric p { color: var(--ss-text-secondary); }
.guard-security-metric strong { font-size: 1.3rem; }
.guard-security-metric p { margin: 0; font-size: .78rem; }
.guard-security-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.guard-security-shortcuts button { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .2rem .7rem; min-height: 4.8rem; padding: .85rem; border: 1px solid var(--ss-border-default); border-radius: .9rem; background: var(--ss-bg-primary); color: var(--ss-text-primary); text-align: left; box-shadow: var(--ss-shadow-sm); cursor: pointer; }
.guard-security-shortcuts button > span { grid-row: 1 / 3; }
.guard-security-shortcuts small { color: var(--ss-text-secondary); }
.guard-security-inline-action { display: flex; align-items: center; gap: .65rem; min-height: 2.9rem; width: fit-content; padding: .65rem .85rem; border: 1px solid var(--ss-border-default); border-radius: .8rem; background: var(--ss-bg-primary); color: var(--ss-text-primary); text-align: left; }
.guard-security-inline-action span { display: grid; }
.guard-security-inline-action small { color: var(--ss-text-secondary); }
.guard-security-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.guard-security-panel, .guard-security-feature { min-width: 0; padding: 1rem; border: 1px solid var(--ss-border-default); border-radius: 1rem; background: var(--ss-bg-primary); box-shadow: var(--ss-shadow-sm); }
.guard-security-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; margin-bottom: .8rem; }
.guard-security-panel h2, .guard-security-panel p { margin: 0; }
.guard-security-panel > header > span { padding: .35rem .55rem; border-radius: 999px; background: var(--ss-warning-bg); color: var(--ss-warning-text); font-size: .68rem; font-weight: 900; white-space: nowrap; }
.guard-security-student-list, .guard-security-event-list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.guard-security-student-list li, .guard-security-event-list li { display: flex; align-items: center; justify-content: space-between; gap: .7rem; min-width: 0; padding: .7rem; border-radius: .75rem; background: var(--ss-bg-secondary); }
.guard-security-student-list span { display: grid; min-width: 0; }
.guard-security-student-list small { color: var(--ss-text-secondary); }
.guard-security-student-list b { color: var(--ss-text-accent); font-size: .7rem; text-align: right; }
.guard-security-event-list li { justify-content: flex-start; }
.guard-security-event-list b { color: var(--ss-text-accent); }
.guard-security-honesty, .guard-security-denied { display: flex; align-items: flex-start; gap: .8rem; padding: 1rem; border: 1px solid var(--ss-warning-border); border-radius: 1rem; background: var(--ss-warning-bg); color: var(--ss-warning-text); }
.guard-security-honesty p, .guard-security-denied p, .guard-security-denied h1 { margin: .2rem 0 0; }
.guard-security-denied { border-color: var(--ss-error-border); background: var(--ss-error-bg); color: var(--ss-error-text); }
.guard-security-feature[hidden] { display: none; }
.guard-security-feature h2 { margin: 0; }
.guard-security-feature strong { color: var(--ss-text-accent); }
.guard-security-workspace-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--ss-border-default); border-radius: 1rem; background: var(--ss-bg-primary); box-shadow: var(--ss-shadow-sm); }
.guard-security-workspace-header h1, .guard-security-workspace-header p { margin: 0; }
.guard-security-workspace-header > button { min-height: 2.75rem; padding: .6rem .8rem; border: 1px solid var(--ss-border-default); border-radius: .75rem; background: var(--ss-bg-secondary); color: var(--ss-text-primary); }
.guard-security-workspace-header > span { padding: .4rem .6rem; border-radius: 999px; background: var(--ss-warning-bg); color: var(--ss-warning-text); font-size: .7rem; font-weight: 900; }
.guard-attendance-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .65rem; }
.guard-attendance-metrics article { display: grid; gap: .2rem; padding: .8rem; border: 1px solid var(--ss-border-default); border-radius: .8rem; background: var(--ss-bg-primary); }
.guard-attendance-metrics article > span { color: var(--ss-text-accent); }
.guard-attendance-metrics small { color: var(--ss-text-secondary); }
.guard-attendance-metrics strong { font-size: 1.25rem; }
.guard-attendance-list { display: grid; gap: .75rem; }
.guard-attendance-row { padding: .9rem; border: 1px solid var(--ss-border-subtle); border-radius: .85rem; background: var(--ss-bg-secondary); }
.guard-attendance-row header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.guard-attendance-row h3, .guard-attendance-row p { margin: 0; }
.guard-attendance-row header > span { padding: .35rem .55rem; border-radius: 999px; background: var(--ss-info-bg); color: var(--ss-info-text); font-size: .7rem; font-weight: 900; }
.guard-attendance-row dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin: .75rem 0; }
.guard-attendance-row dt { color: var(--ss-text-secondary); font-size: .72rem; }
.guard-attendance-row dd { margin: .15rem 0 0; font-weight: 800; }
.guard-attendance-row > p { color: var(--ss-text-secondary); }
.guard-scanner-host { min-width: 0; }
.guard-scanner-host .security-scan-panel { margin: 0; }
.security-demo-boundary { margin: .8rem 0 0; color: var(--ss-text-secondary); font-size: .78rem; }
.guard-dismissal-list { display: grid; gap: .7rem; }
.guard-dismissal-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem; border: 1px solid var(--ss-border-subtle); border-radius: .85rem; background: var(--ss-bg-secondary); }
.guard-dismissal-row h3, .guard-dismissal-row p { margin: 0; }
.guard-dismissal-row > div { display: grid; gap: .25rem; min-width: 0; }
.guard-dismissal-row > div > span { width: fit-content; padding: .3rem .5rem; border-radius: 999px; background: var(--ss-info-bg); color: var(--ss-info-text); font-size: .7rem; font-weight: 900; }
.guard-dismissal-row > button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .65rem .8rem; border: 0; border-radius: .7rem; background: var(--ss-bg-brand); color: var(--ss-text-on-brand); font-weight: 800; }
.guard-dismissal-draft { display: flex; align-items: center; gap: .65rem; margin-top: .8rem; padding: .8rem; border: 1px solid var(--ss-error-border); border-radius: .8rem; background: var(--ss-error-bg); color: var(--ss-error-text); }
.guard-dismissal-draft p { margin: .15rem 0 0; }
.guard-dismissal-timeline { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.guard-dismissal-timeline li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; padding: .7rem; border-radius: .75rem; background: var(--ss-bg-secondary); }
.guard-dismissal-timeline time { color: var(--ss-text-accent); font-weight: 900; }
.guard-dismissal-timeline span { display: grid; }
.guard-dismissal-timeline small { color: var(--ss-text-secondary); }
.guard-dismissal-notification { display: grid; gap: .25rem; padding: 1rem; border: 1px solid var(--ss-info-border); border-radius: 1rem; background: var(--ss-info-bg); color: var(--ss-info-text); }
.guard-dismissal-notification span { font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.guard-dismissal-notification p { margin: 0; }
.guard-incident-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.guard-incident-form label { display: grid; gap: .3rem; color: var(--ss-text-secondary); font-size: .78rem; font-weight: 800; }
.guard-incident-form label:nth-of-type(4), .guard-incident-form label:nth-of-type(5), .guard-incident-form > button, .guard-incident-form > small { grid-column: 1 / -1; }
.guard-incident-form select, .guard-incident-form textarea { width: 100%; min-height: 44px; padding: .65rem; border: 1px solid var(--ss-border-default); border-radius: .65rem; background: var(--ss-bg-secondary); color: var(--ss-text-primary); font: inherit; }
.guard-incident-form textarea { min-height: 5.5rem; resize: vertical; }
.guard-incident-form > button, .guard-lockdown-authorized button { min-height: 44px; padding: .7rem .85rem; border: 0; border-radius: .7rem; background: var(--ss-bg-brand); color: var(--ss-text-on-brand); font-weight: 900; }
.guard-incident-form > small { color: var(--ss-text-secondary); }
.guard-incident-list { display: grid; gap: .7rem; }
.guard-incident-card { padding: .8rem; border: 1px solid var(--ss-border-subtle); border-radius: .8rem; background: var(--ss-bg-secondary); }
.guard-incident-card header { display: flex; justify-content: space-between; gap: .7rem; }
.guard-incident-card h3, .guard-incident-card p { margin: 0; }
.guard-incident-card header > span { color: var(--ss-warning-text); font-size: .7rem; font-weight: 900; }
.guard-incident-card > p { margin-top: .55rem; }
.guard-incident-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin: .7rem 0; }
.guard-incident-card dt { color: var(--ss-text-secondary); font-size: .7rem; }
.guard-incident-card dd { margin: .15rem 0 0; font-weight: 800; }
.guard-incident-card > small { color: var(--ss-text-secondary); }
.guard-security-unavailable, .guard-lockdown-authorized, .guard-global-report { display: grid; gap: .45rem; padding: .9rem; border: 1px solid var(--ss-border-default); border-radius: .8rem; background: var(--ss-bg-secondary); }
.guard-security-unavailable p, .guard-lockdown-authorized p, .guard-global-report p { margin: 0; }
.guard-lockdown-authorized > span, .guard-global-report > span { color: var(--ss-warning-text); font-size: .7rem; font-weight: 900; }
.guard-lockdown-authorized > strong { font-size: 1.15rem; }
.guard-global-report { margin-top: .8rem; border-color: var(--ss-info-border); background: var(--ss-info-bg); color: var(--ss-info-text); }
.guard-security-history { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.guard-security-history li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .7rem; border-radius: .7rem; background: var(--ss-bg-secondary); }
.guard-security-history li > span { color: var(--ss-text-accent); font-size: .7rem; font-weight: 900; }
.guard-security-history li > div { display: grid; }
.guard-security-history small, .guard-security-history time { color: var(--ss-text-secondary); }
@media (max-width: 960px) { .guard-security-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .guard-attendance-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .guard-security-hero { align-items: flex-start; flex-direction: column; } .guard-security-shortcuts, .guard-security-columns { grid-template-columns: 1fr; } .guard-security-workspace-header { grid-template-columns: 1fr; align-items: start; } .guard-security-workspace-header > span { width: fit-content; } .guard-attendance-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .guard-security-metrics, .guard-attendance-metrics, .guard-incident-form { grid-template-columns: 1fr; } .guard-incident-form label, .guard-incident-form > button, .guard-incident-form > small { grid-column: 1; } .guard-security-panel > header, .guard-dismissal-row { align-items: flex-start; flex-direction: column; } .guard-dismissal-row > button { width: 100%; } .guard-attendance-row dl, .guard-incident-card dl { grid-template-columns: 1fr; } .guard-security-history li { grid-template-columns: 1fr; } }