:root { color-scheme: light; --f4u-surface: #fff; --f4u-ink: #202632; --f4u-border: #d5dbe3; }
:root.dark { color-scheme: dark; --f4u-surface: #1a1e2a; --f4u-ink: #e2e7ee; --f4u-border: #3b4558; }
.f4u-theme { min-height:44px; padding:10px 14px; border:1px solid var(--f4u-border); border-radius:8px; background:var(--f4u-surface); color:var(--f4u-ink); cursor:pointer; font:inherit; }
#header .f4u-theme { margin-left:auto; margin-right:8px; }
body.f4u-dashboard { background:#f4f5f7; color:var(--f4u-ink); }
.dark body.f4u-dashboard { background:linear-gradient(135deg,#0a0b0f,#1a1e2a); }
.f4u-dashboard .metric-card,.f4u-dashboard .chart-container,.f4u-dashboard .ranking-list,.f4u-dashboard .card,.f4u-dashboard nav,.f4u-dashboard .enrollment-card { background:var(--f4u-surface); border-color:var(--f4u-border); }
.f4u-dashboard .metric-label,.f4u-dashboard .stat-label { color:var(--f4u-ink); }
.f4u-dashboard header { gap:16px; flex-wrap:wrap; }
.f4u-dashboard button,.f4u-dashboard input,.f4u-dashboard select { min-height:44px; }
.f4u-sidebar { position:fixed; inset:0 auto 0 0; width:220px; padding:24px 16px; background:var(--f4u-surface); border-right:1px solid var(--f4u-border); z-index:50; }
.f4u-sidebar strong { display:block; font-size:24px; color:#c96800; margin-bottom:24px; }
.f4u-sidebar a { display:block; padding:14px 12px; margin-bottom:6px; color:var(--f4u-ink); text-decoration:none; border-radius:8px; }
.f4u-sidebar a[aria-current=page] { background:#f5901f; color:#171b22; font-weight:700; }
.f4u-admin > .container { margin-left:220px; }
.f4u-panel[hidden] { display:none !important; }
.f4u-panel h2 { margin-bottom:20px; }
.f4u-toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:20px; }
.f4u-toolbar input,.f4u-toolbar select,.f4u-editor input,.f4u-editor textarea { font:inherit; padding:12px; border:1px solid var(--f4u-border); border-radius:8px; background:var(--f4u-surface); color:var(--f4u-ink); max-width:100%; }
.f4u-action { padding:12px 16px; border:0; border-radius:8px; background:#f5901f; color:#171b22; font:inherit; cursor:pointer; }
.f4u-table-wrap { overflow:auto; max-width:100%; border:1px solid var(--f4u-border); border-radius:12px; }
.f4u-table-wrap table { width:100%; border-collapse:collapse; background:var(--f4u-surface); }
.f4u-table-wrap th,.f4u-table-wrap td { text-align:left; padding:14px; border-bottom:1px solid var(--f4u-border); }
.f4u-status { padding:12px 0; overflow-wrap:anywhere; }
.f4u-editor { display:grid; gap:12px; max-width:760px; }
.f4u-editor label { display:grid; gap:6px; }
.f4u-editor textarea { min-height:220px; }
.f4u-dashboard :focus-visible { outline:3px solid #c96800; outline-offset:3px; }
#f4u-menu { display:none; }
@media(max-width:767px) {
 .f4u-admin > .container { margin-left:0; padding:14px; }
 .f4u-sidebar { position:static; width:auto; padding:14px; border-right:0; border-bottom:1px solid var(--f4u-border); }
 .f4u-sidebar strong { margin:0; }
 .f4u-sidebar nav { margin:12px 0 0; padding:0; }
 .f4u-sidebar nav[hidden] { display:none; }
 #f4u-menu { display:inline-block; margin-top:12px; }
 .f4u-dashboard header h1 { font-size:23px; }
 .f4u-dashboard .dashboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .f4u-dashboard .metric-card { padding:14px; min-width:0; }
 .f4u-dashboard .metric-value { font-size:25px; overflow-wrap:anywhere; }
 .f4u-dashboard .two-column { grid-template-columns:minmax(0,1fr); }
 .f4u-dashboard .chart-container { padding:14px; }
 .f4u-dashboard .ranking-item,.f4u-dashboard .enrollment-card,.f4u-dashboard .certificate-card { flex-wrap:wrap; gap:12px; }
 .f4u-dashboard nav { flex-wrap:wrap; }
 #profile .card > div[style] { grid-template-columns:1fr !important; }
 #header { background:var(--aw-color-bg-page); }
 #header.expanded { height:100dvh; overflow-y:auto; padding-bottom:88px; }
 #header nav { max-height:calc(100dvh - 170px); }
}
@media print { .f4u-sidebar,header,.f4u-toolbar,.f4u-theme { display:none !important; } .f4u-admin > .container { margin:0; } }