:root{--ink:#20243a;--muted:#858a9d;--line:#ececf2;--surface:#fff;--canvas:#f8f8fc;--violet:#7164d9;--violet-dark:#584bc3;--navy:#28283e;--shadow:0 12px 34px rgba(38,39,73,.06)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--canvas);color:var(--ink);font-family:"DM Sans",sans-serif;font-size:14px}button,a{font:inherit}button{border:0;cursor:pointer}a{text-decoration:none;color:inherit}
.app-shell{display:flex;min-height:100vh}.sidebar{width:254px;flex:0 0 254px;background:var(--surface);border-right:1px solid var(--line);padding:27px 15px 20px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:10}
.brand{display:flex;align-items:center;gap:11px;padding:0 10px;margin-bottom:31px}.brand-mark{width:34px;height:34px;background:var(--violet);color:#fff;border-radius:10px;font:800 19px "Plus Jakarta Sans";display:grid;place-items:center;letter-spacing:-3px;padding-right:3px}.brand-mark span{color:#e4e1ff}.brand strong{font:800 16px "Plus Jakarta Sans";letter-spacing:-.5px;display:block}.brand small{font-size:10px;color:#9a9bac;display:block;margin-top:1px}.sidebar-close{display:none}
.profile-mini{display:flex;align-items:center;gap:10px;background:#f8f7fd;border:1px solid #efedf9;border-radius:12px;padding:12px 10px;margin:0 1px 28px}.profile-mini strong{font-size:12px;display:block}.profile-mini span{font-size:10px;color:var(--muted);display:block;margin-top:3px}.more-button{background:none;color:#a3a4b4;letter-spacing:2px;padding:5px;margin-left:auto}.avatar{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#e3e0fb;color:#6759c7;font-size:10px;font-weight:700}.avatar-large{width:34px;height:34px}.main-nav{display:flex;flex-direction:column}.nav-label{font-size:10px;text-transform:uppercase;letter-spacing:1.1px;color:#acaebe;font-weight:700;margin:0 10px 10px}.nav-label-spaced{margin-top:27px}.nav-link{display:flex;align-items:center;height:43px;color:#8d8ea2;border-radius:9px;padding:0 11px;gap:12px;font-size:12px;font-weight:600;margin:2px 0}.nav-link:hover{color:var(--violet);background:#faf9ff}.nav-link.active{color:var(--violet);background:#f1effd}.nav-icon{width:17px;text-align:center;font-size:18px;font-weight:400}.nav-link b{margin-left:auto;color:#a9a9b8;font-size:10px}.nav-link .alert-badge{background:#fff0e5;color:#ec945b;border-radius:10px;padding:3px 6px}
.storage-card{margin: auto 8px 18px;padding:15px 14px;background:#faf9ff;border-radius:12px}.storage-heading{display:flex;justify-content:space-between;font-size:11px;font-weight:600}.storage-heading strong{color:var(--violet)}.progress{height:5px;background:#e7e4fb;border-radius:6px;margin:11px 0 9px;overflow:hidden}.progress span{display:block;height:100%;background:var(--violet);border-radius:inherit}.storage-card p{font-size:10px;color:var(--muted);margin:0}.storage-link{padding:0;margin-top:12px;background:none;color:var(--violet);font-size:10px;font-weight:700}.storage-link span,.text-button span,.activity-link span{margin-left:5px;font-size:16px}.sidebar-footer{font-size:10px;color:#999bac;padding:0 10px}.status-dot{display:inline-block;width:6px;height:6px;background:#55c49a;border-radius:50%;margin-right:7px}
.main-content{margin-left:254px;flex:1;min-width:0}.topbar{height:72px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.85);display:flex;align-items:center;padding:0 43px;justify-content:space-between}.breadcrumbs{font-size:12px;color:#abadba}.breadcrumbs i{font-style:normal;margin:0 10px;color:#d0d0d8}.breadcrumbs strong{color:#505268}.topbar-actions{display:flex;align-items:center;gap:18px}.icon-button{background:none;color:#8f91a3;font-size:18px;position:relative}.notification-dot{position:absolute;width:5px;height:5px;background:#e9996d;border:1px solid white;border-radius:50%;top:0;right:0}.topbar-divider{height:24px;width:1px;background:var(--line)}.topbar-user{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:600}.topbar-user b{color:#aaa;font-size:14px}.menu-toggle{display:none}
.page-wrap{max-width:1360px;padding:42px 43px 60px;margin:0 auto}.welcome-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:33px}.eyebrow{margin:0 0 9px;color:#999bad;font-size:11px}.welcome-row h1{font:800 25px "Plus Jakarta Sans";margin:0;letter-spacing:-1px}.welcome-row h1 span{font-size:21px;color:#f0b05f}.subheading{margin:9px 0 0;color:#9698a9;font-size:12px}.button{border-radius:8px;padding:11px 17px;font-size:12px;font-weight:700;transition:.2s}.button-primary{background:var(--violet);color:#fff;box-shadow:0 8px 17px rgba(113,100,217,.2)}.button-primary:hover{background:var(--violet-dark);transform:translateY(-1px)}.button-primary span{font-size:17px;vertical-align:-1px;margin-right:5px}.button-soft{background:#f1effd;color:var(--violet);padding:9px 13px}.button-soft:hover{background:#e8e5fc}
.password-modal-backdrop{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(32,27,61,.52)}
.password-modal{width:min(100%,480px);padding:28px;border-radius:18px;background:#fff;box-shadow:0 18px 60px rgba(22,18,48,.25)}
.password-modal h2{margin:0 0 8px;color:#292342;font-size:22px}
.password-modal p{color:#716d84;line-height:1.5}
.password-modal label{display:block;margin:18px 0 7px;color:#514d67;font-size:13px;font-weight:700}
.copy-password-row{display:flex;gap:8px}.copy-password-row input{min-width:0;flex:1;padding:11px 12px;border:1px solid #ddd9ec;border-radius:8px;color:#292342;font:600 14px monospace}
.copy-status{min-height:20px;margin:8px 0 14px!important;color:#368b68!important;font-size:13px}
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;margin-bottom:42px}.stat-card{background:var(--surface);border:1px solid #f0eff5;border-radius:11px;padding:19px 17px;display:flex;align-items:flex-start;gap:13px;box-shadow:var(--shadow)}.stat-icon{width:37px;height:37px;flex:none;border-radius:9px;display:grid;place-items:center;font-size:20px}.stat-icon.violet{background:#eeecff;color:#7164d9}.stat-icon.blue{background:#e9f4ff;color:#549bde}.stat-icon.orange{background:#fff2e8;color:#eb995e}.stat-icon.green{background:#e7f8f1;color:#4cb88e}.stat-copy span{display:block;color:#989aaa;font-size:10px;margin-bottom:6px}.stat-copy strong{display:block;font:800 20px "Plus Jakarta Sans";letter-spacing:-.5px}.stat-copy .unit{font-size:12px;margin:0 0 0 2px;display:inline;color:var(--ink)}.stat-copy small{display:block;color:#a5a6b4;font-size:9px;margin-top:7px;white-space:nowrap}.stat-copy em{font-style:normal;font-weight:700;margin-right:3px}.up{color:#54b990}.neutral{color:#e69b60}
.content-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,.9fr);gap:40px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.section-heading h2{font:800 15px "Plus Jakarta Sans";margin:0 0 6px;letter-spacing:-.4px}.section-heading p{font-size:11px;color:#9c9eae;margin:0}.text-button{background:none;color:var(--violet);font-size:11px;font-weight:700}.subject-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.subject-card{background:#fff;border:1px solid #f0eff5;border-radius:11px;padding:18px;box-shadow:var(--shadow);transition:.2s}.subject-card:hover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(38,39,73,.1)}.subject-top{display:flex;justify-content:space-between;align-items:start}.subject-logo{width:37px;height:37px;border-radius:10px;display:grid;place-items:center;font-size:20px;font-weight:700}.subject-logo.ict{background:#e9e8ff;color:#675acf}.subject-logo.maths{background:#e8f5ff;color:#5399d4}.subject-logo.english{background:#fff0e4;color:#e89a62;font-size:16px}.subject-logo.science{background:#e5f8f0;color:#4cb88e}.subject-menu{color:#b4b5c1;letter-spacing:2px;font-size:12px}.subject-card h3{font-size:12px;margin:18px 0 5px}.subject-card p{font-size:10px;color:#a0a1b0;margin:0}.subject-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #f0eff4;margin-top:17px;padding-top:13px}.subject-users{font-size:9px;color:#aaa}.circle-arrow,.row-arrow{width:22px;height:22px;border-radius:50%;background:#f1effd;color:var(--violet);display:grid;place-items:center;font-size:14px}.portfolio-heading{margin-top:39px}.portfolio-list{background:#fff;border:1px solid #f0eff5;border-radius:11px;box-shadow:var(--shadow);overflow:hidden}.portfolio-row{display:flex;align-items:center;gap:13px;padding:15px 17px;border-bottom:1px solid #f1f0f5}.portfolio-row:last-child{border-bottom:0}.folder-icon{color:#9a8de6;font-size:19px}.portfolio-name{flex:1;min-width:0}.portfolio-name strong{font-size:11px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.portfolio-name span{display:block;color:#a5a6b4;font-size:9px;margin-top:5px}.status-pill{font-size:9px;font-weight:700;padding:5px 9px;border-radius:20px}.status-pill.draft{color:#d48850;background:#fff3e9}.status-pill.submitted{color:#46a67f;background:#eaf8f2}.row-arrow{border:0;background:none;color:#aaa;font-size:17px}
.empty-state{grid-column:1/-1;background:#fff;border:1px dashed #dcd9f4;border-radius:11px;padding:28px;text-align:center;color:#898ba0}.empty-state strong,.empty-state span{display:block}.empty-state strong{font-size:12px;color:var(--ink)}.empty-state span{font-size:10px;margin-top:7px}.subject-card:hover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(38,39,73,.1)}.subject-top{display:flex;justify-content:space-between;align-items:start}.subject-logo{width:37px;height:37px;border-radius:10px;display:grid;place-items:center;font-size:20px;font-weight:700}.subject-logo.ict{background:#e9e8ff;color:#675acf}.subject-logo.maths{background:#e8f5ff;color:#5399d4}.subject-logo.english{background:#fff0e4;color:#e89a62;font-size:16px}.subject-logo.science{background:#e5f8f0;color:#4cb88e}.subject-menu{color:#b4b5c1;letter-spacing:2px;font-size:12px}.subject-card h3{font-size:12px;margin:18px 0 5px}.subject-card p{font-size:10px;color:#a0a1b0;margin:0}.subject-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #f0eff4;margin-top:17px;padding-top:13px}.subject-users{font-size:9px;color:#aaa}.circle-arrow,.row-arrow{width:22px;height:22px;border-radius:50%;background:#f1effd;color:var(--violet);display:grid;place-items:center;font-size:14px}.portfolio-heading{margin-top:39px}.portfolio-list{background:#fff;border:1px solid #f0eff5;border-radius:11px;box-shadow:var(--shadow);overflow:hidden}.portfolio-row{display:flex;align-items:center;gap:13px;padding:15px 17px;border-bottom:1px solid #f1f0f5}.portfolio-row:last-child{border-bottom:0}.folder-icon{color:#9a8de6;font-size:19px}.portfolio-name{flex:1;min-width:0}.portfolio-name strong{font-size:11px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.portfolio-name span{display:block;color:#a5a6b4;font-size:9px;margin-top:5px}.status-pill{font-size:9px;font-weight:700;padding:5px 9px;border-radius:20px}.status-pill.draft{color:#d48850;background:#fff3e9}.status-pill.submitted{color:#46a67f;background:#eaf8f2}.row-arrow{border:0;background:none;color:#aaa;font-size:17px}
.secondary-column .section-heading{margin-bottom:16px}.activity-card{background:#fff;border:1px solid #f0eff5;border-radius:11px;box-shadow:var(--shadow);padding:5px 17px}.activity-item{display:flex;gap:11px;padding:16px 0;border-bottom:1px solid #f1f0f5}.activity-icon{width:28px;height:28px;flex:none;border-radius:8px;display:grid;place-items:center;font-size:15px;font-weight:700}.activity-icon.upload{background:#eeeaff;color:#7568db}.activity-icon.review{background:#e6f8ef;color:#51b589}.activity-icon.shared{background:#eaf4ff;color:#539add}.activity-item strong{font-size:10px;display:block}.activity-item span{display:block;color:#a1a2b0;font-size:9px;margin-top:4px}.activity-item small{display:block;color:#b6b6c2;font-size:9px;margin-top:6px}.activity-link{display:block;background:none;color:var(--violet);font-weight:700;font-size:10px;padding:15px 0 13px}.tip-card{display:flex;gap:11px;background:#f3f1ff;border-radius:11px;margin-top:20px;padding:17px 14px;position:relative}.tip-spark{width:29px;height:29px;background:#ded9ff;border-radius:8px;color:#7569d8;display:grid;place-items:center;flex:none}.tip-card strong{font-size:11px}.tip-card p{color:#8986a8;font-size:9px;line-height:1.5;margin:6px 0}.tip-card button:not(.tip-close){background:none;padding:0;color:var(--violet);font-size:9px;font-weight:700}.tip-close{position:absolute;right:9px;top:7px;background:none;color:#aaa6c5;font-size:15px}
.toast{position:fixed;right:24px;bottom:22px;background:var(--navy);color:#fff;padding:13px 18px;border-radius:9px;font-size:12px;opacity:0;transform:translateY(10px);transition:.25s;pointer-events:none;z-index:20}.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1050px){.sidebar{width:224px;flex-basis:224px}.main-content{margin-left:224px}.topbar{padding:0 28px}.page-wrap{padding-left:28px;padding-right:28px}.content-grid{gap:25px}.stats-grid{grid-template-columns:repeat(3,1fr);gap:10px}.stat-card{padding:15px 12px;gap:8px}}
.page-overview{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:24px}.page-overview .stat-card{margin:0}
@media(max-width:1050px){.page-overview{grid-template-columns:repeat(2,1fr);gap:10px}}
@media(max-width:500px){.page-overview{grid-template-columns:1fr}}
@media(max-width:800px){.sidebar{transform:translateX(-100%);transition:transform .25s;width:254px}.sidebar.open{transform:translateX(0);box-shadow:10px 0 35px rgba(22,23,48,.15)}.sidebar-close{display:block;margin-left:auto;font-size:24px}.sidebar-backdrop{position:fixed;inset:0;background:rgba(30,30,51,.35);z-index:9;opacity:0;pointer-events:none;transition:.25s}.sidebar-backdrop.show{opacity:1;pointer-events:auto}.main-content{margin-left:0}.topbar{padding:0 20px;height:64px}.menu-toggle{display:block;margin-right:14px}.breadcrumbs{margin-right:auto}.topbar-user span,.topbar-user b,.topbar-divider{display:none}.page-wrap{padding:31px 20px 45px}.stats-grid{grid-template-columns:repeat(2,1fr);margin-bottom:32px}.content-grid{grid-template-columns:1fr}.secondary-column{margin-top:18px}}
@media(max-width:500px){.welcome-row{align-items:flex-start;flex-direction:column;gap:20px}.welcome-row h1{font-size:21px}.welcome-row .button{width:100%}.stats-grid{gap:9px}.stat-card{padding:13px 10px;display:block}.stat-icon{margin-bottom:10px}.stat-copy strong{font-size:18px}.stat-copy small{font-size:8px}.subject-grid{grid-template-columns:1fr}.portfolio-row{padding:14px 12px}.status-pill{display:none}.topbar-actions{gap:12px}.topbar{padding:0 16px}.page-wrap{padding-left:16px;padding-right:16px}}