/* Portal accents extend Filament without replacing its form/table behavior. */
:root { --pg-ink:#203735; --pg-muted:#627774; --pg-border:#e1eae7; --pg-surface:#fff; --pg-soft:#f4f8f6; --pg-accent:#117a69; }
.fi-body { background:#f4f7f5; }
.fi-topbar { border-bottom:1px solid var(--pg-border); box-shadow:none; }
.fi-sidebar { border-inline-end:1px solid var(--pg-border); }
.fi-sidebar-header .fi-logo, .fi-topbar .fi-logo { color:var(--pg-accent); font-weight:800; letter-spacing:-.04em; }
.fi-sidebar-item-btn { border-radius:12px; transition:background .15s ease; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background:#dcf2eb; box-shadow:inset 3px 0 #148574; }
.fi-header-heading { letter-spacing:-.035em; }
.fi-section, .fi-ta-ctn { border-radius:16px; }
.fi-btn { border-radius:10px; }
.pg-dashboard { color:var(--pg-ink); display:grid; gap:22px; min-width:0; }
.pg-dashboard svg { width:22px; height:22px; flex-shrink:0; }
.pg-dashboard a { text-decoration:none; }
.pg-dashboard a:focus-visible { outline:3px solid #159c88; outline-offset:4px; }
.pg-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:center; background:linear-gradient(115deg,#e2f4ec 0%,#edf5dd 100%); border:1px solid #d2e6d9; border-radius:22px; padding:30px 34px; }
.pg-eyebrow { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:12px; font-weight:600; color:#426857; }
.pg-status-dot { width:7px; height:7px; border-radius:50%; background:#20836e; }
.pg-hero h2 { font-size:clamp(25px,2.5vw,35px); font-weight:750; letter-spacing:-.045em; line-height:1.18; margin:16px 0 10px; max-width:540px; }
.pg-hero p { color:#4d6b5e; font-size:14px; line-height:1.7; max-width:470px; }
.pg-hero-link { display:inline-flex; gap:16px; align-items:center; background:#176b58; color:white; padding:11px 16px; border-radius:10px; font-size:13px; font-weight:600; margin-top:20px; }
.pg-hero-link:hover { background:#125444; }
.pg-hero-note { display:flex; flex-direction:column; align-items:flex-start; min-width:215px; padding:22px 26px; background:rgb(255 255 255 / .55); border:1px solid rgb(255 255 255 / .75); border-radius:18px; transform:rotate(2deg); }
.pg-hero-note > svg { color:#8b6921; width:30px; height:30px; margin-bottom:16px; }
.pg-hero-note > span { font-size:14px; color:#506951; }
.pg-hero-note > strong { font-size:23px; letter-spacing:-.035em; margin:3px 0 18px; }
.pg-hero-tags { display:flex; gap:6px; }
.pg-hero-tags span { padding:5px 9px; border-radius:7px; background:#e6eddb; color:#475f3b; font-size:10px; font-weight:600; }
.pg-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.pg-teal { --tone:#147d6b; --tint:#e6f5ee; }
.pg-violet { --tone:#7453ac; --tint:#f0eafa; }
.pg-blue { --tone:#326d9c; --tint:#e9f2fa; }
.pg-orange { --tone:#a26428; --tint:#fcf0df; }
.pg-stat { display:flex; flex-direction:column; border:1px solid var(--pg-border); border-radius:17px; background:var(--pg-surface); padding:19px 20px; min-width:0; box-shadow:0 3px 10px rgb(30 70 50 / .025); border-top:3px solid var(--tone); transition:transform .15s ease,box-shadow .15s ease; }
a.pg-stat:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgb(30 70 50 / .07); }
.pg-stat-top { display:flex; align-items:center; justify-content:space-between; gap:5px; margin-bottom:13px; }
.pg-icon { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; flex-shrink:0; border-radius:13px; background:var(--tint,#e6f5ee); color:var(--tone,#147d6b); }
.pg-arrow { width:17px !important; height:17px !important; color:var(--pg-muted); }
.pg-stat > strong { font-size:34px; line-height:1.2; letter-spacing:-.045em; font-weight:750; font-variant-numeric:tabular-nums; }
.pg-stat-label { font-size:13px; font-weight:650; margin-top:5px; }
.pg-stat small { color:var(--pg-muted); font-size:11px; margin-top:7px; line-height:1.5; }
.pg-mini-badge { color:var(--tone); background:var(--tint); padding:4px 7px; border-radius:6px; font-size:10px; }
.pg-middle-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:22px; min-width:0; }
.pg-card { background:var(--pg-surface); border:1px solid var(--pg-border); border-radius:18px; padding:24px; min-width:0; }
.pg-section-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.pg-section-heading h3 { font-size:16px; font-weight:700; letter-spacing:-.025em; }
.pg-section-heading p { color:var(--pg-muted); font-size:12px; line-height:1.5; margin-top:5px; }
.pg-period { font-size:10px; color:var(--pg-muted); background:var(--pg-soft); border:1px solid var(--pg-border); padding:5px 9px; border-radius:7px; white-space:nowrap; }
.pg-chart-summary { display:flex; gap:10px; align-items:baseline; margin:20px 0 14px; }
.pg-chart-summary strong { font-size:30px; font-weight:700; letter-spacing:-.04em; }
.pg-chart-summary span { font-size:12px; color:var(--pg-muted); }
.pg-chart { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; }
.pg-chart-day { display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0; }
.pg-chart-count { font-size:10px; color:var(--pg-muted); font-variant-numeric:tabular-nums; }
.pg-chart-track { height:100px; width:100%; max-width:34px; display:flex; align-items:flex-end; border-radius:6px; background:var(--pg-soft); overflow:hidden; }
.pg-chart-bar { width:100%; background:#b5ded2; border-radius:6px 6px 0 0; }
.is-today .pg-chart-bar { background:#258d77; }
.pg-chart-label { font-size:10px; color:var(--pg-muted); }
.is-today .pg-chart-label { color:var(--pg-accent); font-weight:750; }
.pg-chart-caption { margin-top:17px; color:var(--pg-muted); font-size:11px; line-height:1.6; }
.pg-heading-icon { color:#8aa396; }
.pg-game-list { display:grid; gap:11px; margin:22px 0 18px; }
.pg-game { display:flex; align-items:center; gap:12px; padding:13px; border:1px solid var(--pg-border); border-radius:12px; transition:background .15s ease; }
.pg-game:hover { background:var(--tint); }
.pg-game-name { flex:1; min-width:0; }
.pg-game-name strong { display:block; font-size:13px; font-weight:650; overflow-wrap:anywhere; }
.pg-game small { display:block; font-size:10px; color:var(--pg-muted); margin-top:4px; }
.pg-game-count { text-align:right; }
.pg-game-count strong { font-size:17px; font-weight:700; }
.pg-text-link { display:inline-flex; align-items:center; gap:8px; color:var(--pg-accent); font-size:12px; font-weight:650; }
.pg-text-link svg { width:15px; height:15px; }
.pg-text-link:hover, .pg-result-link:hover { text-decoration:underline; text-underline-offset:4px; }
.pg-table-scroll { overflow-x:auto; margin-top:20px; }
.pg-table { width:100%; text-align:left; border-collapse:collapse; white-space:nowrap; }
.pg-table th { font-size:10px; font-weight:600; color:var(--pg-muted); padding:10px 12px; background:var(--pg-soft); }
.pg-table th:first-child { border-radius:7px 0 0 7px; }
.pg-table th:last-child { border-radius:0 7px 7px 0; }
.pg-table td { padding:14px 12px; font-size:12px; border-bottom:1px solid var(--pg-border); }
.pg-table tr:last-child td { border-bottom:0; }
.pg-table tbody tr:hover { background:var(--pg-soft); }
.pg-student-link { display:flex; gap:10px; align-items:center; }
.pg-avatar { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:#e9f1ec; color:#37694f; font-weight:700; }
.pg-student-link strong { display:block; font-weight:600; }
.pg-student-link small { display:block; font-size:10px; color:var(--pg-muted); margin-top:3px; }
.pg-score { font-variant-numeric:tabular-nums; font-weight:700; }
.pg-result-link { display:flex; align-items:center; gap:6px; color:var(--pg-accent); font-size:11px; font-weight:600; }
.pg-result-link svg { width:14px; height:14px; }
.pg-empty-state { display:flex; flex-direction:column; align-items:center; text-align:center; padding:30px 15px 14px; gap:10px; }
.pg-empty-state h4 { font-weight:650; font-size:14px; }
.pg-empty-state p, .pg-empty { font-size:12px; line-height:1.7; color:var(--pg-muted); }
.pg-download-strip { display:flex; align-items:center; gap:15px; border:1px dashed #bed2c5; border-radius:14px; padding:18px 22px; background:#eaf2eb; }
.pg-download-strip strong { display:block; font-size:13px; font-weight:650; }
.pg-download-strip small { display:block; font-size:11px; color:var(--pg-muted); margin-top:4px; line-height:1.6; }
.pg-download-action { display:flex; align-items:center; gap:10px; margin-left:auto; font-size:12px; font-weight:650; color:var(--pg-accent); white-space:nowrap; }
.pg-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.dark { --pg-ink:#e1eee8; --pg-muted:#a4b9b1; --pg-border:#34463f; --pg-surface:#1c2a25; --pg-soft:#26372f; --pg-accent:#83d7bf; }
.dark .fi-body { background:#14201c; }
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background:#233f34; box-shadow:inset 3px 0 #65c7a9; }
.dark .pg-hero { background:linear-gradient(115deg,#203e33,#34412b); border-color:#3e5744; }
.dark .pg-hero p, .dark .pg-eyebrow, .dark .pg-hero-note > span { color:#bed7c5; }
.dark .pg-hero-note { background:#304a37; border-color:#4a6350; }
.dark .pg-hero-note > svg { color:#ecd292; }
.dark .pg-hero-tags span { background:#42573b; color:#d7e5c7; }
.dark .pg-teal { --tone:#82d5b9; --tint:#274b3d; }
.dark .pg-violet { --tone:#c3a5ed; --tint:#3d3154; }
.dark .pg-blue { --tone:#99c5ec; --tint:#263f55; }
.dark .pg-orange { --tone:#ebbf88; --tint:#51422e; }
.dark .pg-avatar, .dark .pg-download-strip { background:#263b2f; color:#c1dfcb; border-color:#476050; }
.dark .pg-chart-bar { background:#406e5e; }
.dark .is-today .pg-chart-bar { background:#65c7a9; }
@media (min-width:1600px) { .pg-hero { padding:36px 40px; } }
@media (max-width:1100px) { .pg-hero-note { display:none; } .pg-hero { grid-template-columns:1fr; } .pg-stats { gap:12px; } .pg-stat { padding:16px; } .pg-middle-grid { gap:16px; } .pg-card { padding:20px; } }
@media (max-width:700px) { .pg-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .pg-middle-grid { grid-template-columns:1fr; } .pg-dashboard { gap:16px; } .pg-hero { padding:24px; } .pg-download-strip { flex-wrap:wrap; padding:17px; } .pg-download-action { margin-left:57px; } .pg-section-heading { flex-wrap:wrap; } .pg-stat > strong { font-size:30px; } }
@media (prefers-reduced-motion:reduce) { .pg-stat, .pg-game, .fi-sidebar-item-btn { transition:none; } a.pg-stat:hover { transform:none; } }


/* Teacher workspace */
.pg-workspace-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.pg-workspace-head h2,.pg-progress h2{font-size:24px;font-weight:750;letter-spacing:-.035em;margin-top:8px}
.pg-select{border:1px solid var(--pg-border);border-radius:9px;background:var(--pg-surface);color:var(--pg-ink);padding:9px 32px 9px 12px;font:inherit;margin-left:8px}
.pg-select:focus-visible,.pg-dashboard button:focus-visible{outline:3px solid var(--pg-accent);outline-offset:3px}
.pg-task-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pg-task-grid h3,.pg-setup h3{font-size:15px;font-weight:700;margin-bottom:12px}
.pg-task-row{display:block;border-bottom:1px solid var(--pg-border);padding:10px 0;font-size:13px}
.pg-task-row:hover{color:var(--pg-accent)}
.pg-task-row small{display:block;font-size:12px;color:var(--pg-muted);margin-top:4px}
.pg-task-grid .pg-text-link{margin-top:15px}
.pg-task-grid .pg-empty{font-size:12px;margin:8px 0}
.pg-setup{border:1px dashed var(--pg-border);border-radius:14px;background:var(--pg-soft);padding:22px}
.pg-setup p{font-size:13px;color:var(--pg-muted);margin:9px 0}
.pg-onboarding{display:flex;gap:30px;flex-wrap:wrap;list-style:decimal;padding-left:20px;font-size:13px}
.pg-onboarding a:hover{text-decoration:underline}
.pg-progress{color:var(--pg-ink)}
.pg-progress label{font-size:13px}
.pg-progress-group{padding-top:22px;margin-top:22px;border-top:1px solid var(--pg-border)}
.pg-progress-group h3{font-size:16px;font-weight:700}
.pg-progress-group small{font-size:11px;font-weight:500}
.pg-condition-values{display:flex;flex-wrap:wrap;gap:5px 12px;font-size:11px;overflow-wrap:anywhere}
.pg-history-chart{display:flex;gap:10px;overflow-x:auto;padding:18px 4px 7px;align-items:flex-end}
.pg-history-point{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 50px;text-decoration:none;color:var(--pg-ink)}
.pg-history-point:focus-visible{outline:3px solid var(--pg-accent)}
.pg-history-point strong{font-size:12px}
.pg-history-point time{font-size:11px;color:var(--pg-muted)}
.pg-history-track{height:90px;width:28px;border-radius:6px;background:var(--pg-soft);display:flex;align-items:flex-end;overflow:hidden}
.pg-history-track>span{display:block;width:100%;background:#69b99e;border-radius:5px 5px 0 0}
.pg-preview{color:var(--pg-ink);font-size:13px;display:grid;gap:10px}
@media(max-width:850px){.pg-task-grid{grid-template-columns:1fr}.pg-onboarding{display:grid;gap:12px}.pg-workspace-head h2{font-size:22px}.pg-progress .pg-section-heading{display:grid}.pg-select{margin:6px 0}}


 .pg-select,.pg-dashboard button{min-height:44px}.pg-task-row{min-height:44px}.pg-workspace-head label{font-size:14px}.pg-task-grid .pg-text-link{font-size:13px;min-height:32px}