/* Shared layout and interaction corrections; preserve compact navigation. */
@media screen{
html{scroll-padding-top:24px}
body{overflow-x:clip}
:root :is(#content,.page,.page-head,.page-actions,.welcome-copy,.hub-tool,.card,.dash-widget){min-width:0}
:root #content{box-sizing:border-box}
:root .page-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:16px}
:root .page-head>div:first-child{min-width:0;flex:1 1 240px}
:root .page-head h2{overflow-wrap:anywhere;line-height:1.3}
:root .page-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;max-width:100%}
:root .page-actions .btn{white-space:normal;text-align:center;line-height:1.4;min-height:40px}
:root :is(.card,.dash-widget,.hub-card) p{line-height:1.65}
:root :is(input,textarea,select){max-width:100%;box-sizing:border-box}
:root :is(.modal,.notif-panel,.quick-fab-menu){max-width:calc(100vw - 24px)}
:root .modal{max-height:calc(100dvh - 32px);display:flex;flex-direction:column}
:root .modal-body{overflow:auto;overscroll-behavior:contain;min-height:0}
:root :is(.btn,button,a,[role=button],input,select,textarea,summary):focus-visible{outline:2px solid var(--theme-accent)!important;outline-offset:3px}
:root :is(button,.btn,input,select,textarea):disabled{opacity:.55;cursor:not-allowed!important;box-shadow:none!important}
:root :is(.empty-state,.alert){overflow-wrap:anywhere}
:root .gb-sheet-wrap{max-width:100%;overflow:auto;overscroll-behavior-x:contain}
@media(max-width:680px){:root #content{padding:18px 14px 96px}:root .page-actions{width:100%}:root .page-actions .btn{flex:1 1 auto;min-height:44px}:root .modal{max-height:calc(100dvh - 20px)}:root :is(input.form-control,select.form-control,textarea.form-control){font-size:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}:root :is(.btn,.nav-item,.card,.hub-tool){transition:none!important}}
}
/* Initial avatars follow the active palette instead of name-based colors. */
@media screen{
:root :is(.avatar,.mini-avatar,.ps-avatar,.hero-teacher-avatar,.lock-avatar,#tp-hero-avatar){border-color:var(--theme-edge)!important;box-shadow:none!important}
:root :is(.avatar,.mini-avatar,.ps-avatar,.hero-teacher-avatar,.lock-avatar,#tp-hero-avatar):not(:has(img)){background:var(--theme-action)!important;color:var(--theme-on)!important;border:1px solid var(--theme-action-hover)!important;text-shadow:none!important}
:root :is(.avatar,.mini-avatar,.ps-avatar,.hero-teacher-avatar,.lock-avatar,#tp-hero-avatar):has(img){background:transparent!important}
}
/* Subject badge: paired theme fill/text, overriding legacy inline white. */
@media screen{
:root .page-head .chip[title="Subject / Learning Area"]{display:inline-flex;align-items:center;gap:7px;background:var(--theme-action)!important;color:var(--theme-on)!important;border:1px solid var(--theme-action-hover)!important;opacity:1!important;box-shadow:none!important;border-radius:8px;line-height:1.5;max-width:100%;white-space:normal;overflow-wrap:anywhere}
:root .page-head .chip[title="Subject / Learning Area"] svg{color:inherit!important;stroke:currentColor!important;opacity:1!important;flex-shrink:0;width:15px;height:15px}
}

#sp-deped-seal-remove[hidden]{display:none!important}
#sp-deped-seal-inner img{width:100%;height:100%;object-fit:contain;padding:6px}
/* Compact desktop presentation; retain mobile readability and print sizing. */
@media screen and (min-width:900px) and (pointer:fine){html{zoom:.9}}
@media print{html{zoom:1!important}}

/* Theme-related grading fills with distinct intensity and shared readable ink. */
@media screen{
:root .gb-wbar{background:var(--theme-opaque)!important;border:1px solid var(--theme-edge)!important;overflow:hidden}
:root .gb-wbar .gb-wseg{color:var(--theme-ink)!important;border-color:var(--theme-edge)!important;opacity:1!important}
:root .gb-wbar .gb-w-ww{background:var(--theme-soft)!important;background:color-mix(in srgb,var(--theme-accent) 8%,var(--theme-opaque))!important}
:root .gb-wbar .gb-w-pt{background:var(--theme-soft)!important;background:color-mix(in srgb,var(--theme-accent) 14%,var(--theme-opaque))!important}
:root .gb-wbar .gb-w-ex{background:var(--theme-soft)!important;background:color-mix(in srgb,var(--theme-accent) 20%,var(--theme-opaque))!important}
:root .gb-wbar .gb-wseg :is(b,em){color:inherit!important;opacity:1!important}
:root :is(.class-grade-avatar,#cp-avatar){background:var(--theme-action)!important;color:var(--theme-on)!important;border:1px solid var(--theme-action-hover)!important;box-shadow:none!important}
:root :is(#upg-gcash,.upgrade-cta-gcash){background:var(--theme-action)!important;color:var(--theme-on)!important;border:1px solid var(--theme-action-hover)!important;box-shadow:none!important}
:root :is(#upg-gcash,.upgrade-cta-gcash):hover{background:var(--theme-action-hover)!important;color:var(--theme-on)!important}
:root :is(#upg-gcash,.upgrade-cta-gcash) svg{color:inherit!important;stroke:currentColor!important}
}
/* Settings action labels must follow their actual surface, not generic text rules. */
@media screen{
:root .settings-action-btn{background:var(--theme-soft)!important;color:var(--theme-ink)!important;border-color:var(--theme-edge)!important}
:root .settings-action-btn .sab-label{color:var(--theme-ink)!important;opacity:1!important}
:root .settings-action-btn .sab-desc{color:var(--theme-muted)!important;opacity:1!important}
:root .settings-action-btn .sab-icon{background:var(--theme-opaque)!important;color:var(--theme-accent)!important}
:root .settings-action-btn.primary{background:var(--theme-action)!important;color:var(--theme-on)!important;border-color:var(--theme-action)!important}
:root .settings-action-btn.primary :is(.sab-body,.sab-label,.sab-desc){color:var(--theme-on)!important;opacity:1!important}
:root .settings-action-btn.primary:hover{background:var(--theme-action-hover)!important}
:root .settings-action-btn:not(.primary):hover{background:var(--theme-opaque)!important;border-color:var(--theme-accent)!important}
}
/* Certificate selection uses the same palette and responsive layout as the workspace. */
@media screen{
:root .cert-hero{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(320px,.85fr);gap:28px;align-items:center;padding:28px!important;background:var(--theme-action)!important;background-image:none!important;color:var(--theme-on)!important;border:1px solid var(--theme-action-hover)!important;border-radius:16px;box-shadow:none!important;min-width:0}
:root .cert-hero::before,:root .cert-hero::after{display:none!important}
:root .cert-hero :is(.cert-hero-title,.cert-hero-sub){color:var(--theme-on)!important;opacity:1!important}
:root .cert-hero-title{font-size:clamp(24px,2.5vw,32px)!important;font-weight:700;line-height:1.2!important;margin-bottom:10px}
:root .cert-hero-sub{font-size:14px!important;line-height:1.6!important;max-width:540px}
:root .cert-hero-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:var(--theme-opaque)!important;color:var(--theme-ink)!important;border:1px solid var(--theme-edge)!important;border-radius:12px;padding:16px 8px!important;min-width:0}
:root .cert-hero-stat{min-width:0;padding:0 9px;border-right:1px solid var(--theme-edge)}
:root .cert-hero-stat:last-child{border-right:0}
:root .cert-hero-stat .val{font-size:26px!important;line-height:1.2;color:var(--theme-accent)!important;opacity:1!important}
:root .cert-hero-stat .lbl{font-size:10px!important;line-height:1.5!important;letter-spacing:.4px!important;margin-top:6px;color:var(--theme-muted)!important;opacity:1!important;white-space:normal}
:root .cert-template-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;width:100%;max-width:100%}
:root .cert-type-card{--cert-accent:var(--theme-accent)!important;--cert-bg:var(--theme-soft)!important;background:var(--theme-opaque)!important;color:var(--theme-ink)!important;border:1px solid var(--theme-edge)!important;border-top:3px solid var(--theme-accent)!important;text-align:left;min-width:0;padding:22px!important;display:flex;flex-direction:column;align-items:stretch;box-shadow:none!important;white-space:normal}
:root .cert-type-icon{background:var(--theme-soft)!important;color:var(--theme-accent)!important;width:44px!important;height:44px!important;border-radius:10px!important}
:root .cert-type-icon svg{width:28px!important;height:28px!important;stroke-width:1.7;color:inherit!important}
:root .cert-type-title{font-size:16px!important;line-height:1.4!important;color:var(--theme-ink)!important}
:root .cert-type-desc{font-size:13px!important;line-height:1.6!important;color:var(--theme-muted)!important;flex:1}
:root .cert-type-footer{border-color:var(--theme-edge)!important;margin-top:18px}
:root .cert-type-count{color:var(--theme-muted)!important;font-size:12px!important}
:root .cert-type-arrow{color:var(--theme-accent)!important}
:root .cert-type-card:not(:disabled):hover{border-color:var(--theme-accent)!important;background:var(--theme-soft)!important;transform:none!important}
:root .cert-type-card:disabled{opacity:1!important;cursor:not-allowed!important;border-top-color:var(--theme-edge)!important}
:root .cert-type-card:disabled .cert-type-arrow{display:none!important}
@media(max-width:1050px){:root .cert-hero{grid-template-columns:1fr!important;gap:20px}:root .cert-hero-stats{width:100%;max-width:560px}}
@media(max-width:700px){:root .cert-template-grid{grid-template-columns:1fr!important}:root .cert-hero{padding:22px!important}:root .cert-hero-stat{padding-inline:5px}:root .cert-hero-stat .lbl{font-size:9px!important}}
}

@media screen{
:root .dev-card .klasama-support-logo{background:var(--theme-action)!important;border:1px solid var(--theme-action-hover)!important;padding:14px;object-fit:contain!important;filter:none!important;box-shadow:none!important}
}

@media screen{
:root .dev-card .klasama-support-logo-wrap{width:132px;height:132px;flex:0 0 132px;display:grid;place-items:center;padding:22px;box-sizing:border-box;background:var(--theme-action);border:1px solid var(--theme-action-hover);border-radius:50%;overflow:visible}
:root .dev-card .klasama-support-logo-wrap .klasama-support-logo{display:block;width:100%!important;height:100%!important;max-width:100%;object-fit:contain!important;object-position:center;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;filter:none!important}
@media(max-width:600px){:root .dev-card .klasama-support-logo-wrap{margin-inline:auto}}
}