:root{
  --bg:#f7f6f3;--surface:#fff;--ink:#242126;--muted:#77737b;--line:#e8e5e8;
  --violet:#6d45a8;--violet-dark:#4f317f;--lilac:#eee8f8;--green:#2f8061;--green-bg:#e8f5ef;
  --red:#a94a54;--red-bg:#f9e9eb;--yellow:#986f22;--yellow-bg:#fff5db;--shadow:0 18px 50px rgba(45,32,59,.08);
}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",sans-serif}
button,input,select,textarea{font:inherit}button{cursor:pointer}
.photo-gate{position:fixed;inset:0;z-index:1000;background:rgba(31,23,38,.62);backdrop-filter:blur(12px);display:grid;place-items:center;padding:24px}
.photo-gate.hidden{display:none}.gate-card{width:min(700px,100%);background:var(--surface);border-radius:28px;padding:42px;box-shadow:var(--shadow)}
.brand-mark{width:58px;height:58px;border-radius:18px;background:var(--violet);color:#fff;display:grid;place-items:center;font-weight:700;font-size:20px;margin-bottom:20px}
.brand-mark.small{width:42px;height:42px;border-radius:13px;font-size:16px;margin:0}
.eyebrow{margin:0 0 7px;color:var(--violet);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.gate-card h1,.section-intro h1{font-family:"Playfair Display",serif;font-size:40px;line-height:1.05;margin:0 0 10px}
.gate-text{color:var(--muted);max-width:560px;line-height:1.6;margin-bottom:28px}
.photo-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}.upload-box{min-height:180px;border:1.5px dashed #cfc8d8;border-radius:18px;padding:22px;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden;background:#fcfbfd}
.upload-box input{position:absolute;inset:0;opacity:0;cursor:pointer}.upload-box strong{display:block}.upload-box small{display:block;color:var(--muted);margin-top:4px}.upload-icon{width:42px;height:42px;border-radius:13px;background:var(--lilac);display:grid;place-items:center;color:var(--violet);font-size:24px}
.upload-preview{position:absolute;right:12px;bottom:12px;width:52px;height:52px;object-fit:cover;border-radius:12px;display:none}.upload-preview.show{display:block}.form-error{grid-column:1/-1;color:var(--red);font-size:13px;margin:0}
.full{grid-column:1/-1;width:100%;justify-content:center}
.app-shell{display:flex;min-height:100vh}.sidebar{width:250px;background:#242027;color:#fff;padding:28px 18px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0}.sidebar-brand{display:flex;align-items:center;gap:12px;padding:0 10px 34px}.sidebar-brand strong{display:block;font-size:15px}.sidebar-brand span{display:block;color:#a9a3ae;font-size:11px;margin-top:3px}
.nav{display:grid;gap:6px}.nav-item{border:0;background:transparent;color:#bcb6c1;text-align:left;padding:13px 12px;border-radius:13px;display:flex;align-items:center;gap:12px;font-weight:600}.nav-item span{width:20px;text-align:center;font-size:19px}.nav-item:hover,.nav-item.active{background:#342c39;color:#fff}.nav-item.active{box-shadow:inset 3px 0 var(--violet)}.nav-item b{margin-left:auto;background:#e8ddf5;color:var(--violet);font-size:10px;border-radius:20px;padding:3px 7px}.sidebar-bottom{margin-top:auto}.school-card{border:1px solid #403946;border-radius:16px;padding:13px;display:flex;gap:10px;align-items:center}.school-card strong{font-size:12px;display:block}.school-card small{font-size:10px;color:#a9a3ae}.status-dot,.online-dot{width:8px;height:8px;background:#6bc49b;border-radius:50%;display:block}.reset-btn{background:none;border:0;color:#8e8792;font-size:11px;margin:15px 12px}
.main{margin-left:250px;width:calc(100% - 250px);padding:30px 44px 18px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.topbar h2{font-family:"Playfair Display",serif;font-size:30px;margin:0}.top-actions{display:flex;align-items:center;gap:18px}.icon-btn{width:42px;height:42px;border:1px solid var(--line);background:var(--surface);border-radius:13px;position:relative;color:#5d5760}.online-dot{position:absolute;right:8px;top:7px;border:2px solid #fff;width:8px;height:8px}.user-chip{display:flex;align-items:center;gap:10px}.avatar{width:40px;height:40px;border-radius:13px;background:var(--lilac);color:var(--violet);display:grid;place-items:center;font-weight:700;font-size:12px}.user-chip strong{font-size:12px;display:block}.user-chip small{font-size:10px;color:var(--muted)}
.section{display:none}.section.active{display:block}.hero{background:linear-gradient(115deg,#ebe5f3,#f7f0f8 55%,#f4e6df);border-radius:28px;min-height:330px;padding:48px 54px;display:flex;justify-content:space-between;overflow:hidden;position:relative}.hero-tag{display:inline-block;background:var(--lilac);color:var(--violet);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:7px 10px;border-radius:20px}.hero h1{font-family:"Playfair Display",serif;font-size:48px;line-height:1.02;margin:18px 0 12px}.hero h1 em{color:var(--violet);font-style:normal}.hero p{max-width:500px;color:#6d6770;line-height:1.6;margin-bottom:24px}.hero-art{width:300px;position:relative;display:grid;place-items:center}.hero-art img{width:235px;position:relative;z-index:2}.art-circle{position:absolute;width:260px;height:260px;background:rgba(255,255,255,.55);border-radius:50%}
.primary-btn,.secondary-btn{border:0;border-radius:12px;padding:13px 18px;font-weight:700;display:inline-flex;align-items:center;gap:16px}.primary-btn{background:var(--violet);color:#fff;box-shadow:0 9px 24px rgba(109,69,168,.2)}.primary-btn:hover{background:var(--violet-dark)}.secondary-btn{background:#fff;border:1px solid var(--line);color:var(--ink)}.text-btn{background:none;border:0;color:var(--violet);font-size:12px;font-weight:700}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}.stat-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px}.stat-card.accent{background:var(--violet);color:#fff;border-color:var(--violet)}.stat-label{font-size:11px;color:var(--muted);display:block}.accent .stat-label,.accent small{color:#dfd4ed}.stat-card strong{font-family:"Playfair Display",serif;font-size:32px;display:block;margin:8px 0 2px}.stat-card small{font-size:10px;color:var(--muted)}
.content-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}.panel,.form-panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}.panel h3{margin:3px 0 0;font-size:17px}.request-row{display:grid;grid-template-columns:80px 1fr auto;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}.date-box{background:#f6f3f7;border-radius:12px;padding:8px;text-align:center}.date-box b{display:block;font-size:18px}.date-box small{font-size:9px;color:var(--muted);text-transform:uppercase}.request-row strong{font-size:13px}.request-row small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.status{display:inline-flex;padding:6px 9px;border-radius:20px;font-size:10px;font-weight:700}.accepted{background:var(--green-bg);color:var(--green)}.rejected{background:var(--red-bg);color:var(--red)}.pending{background:var(--yellow-bg);color:var(--yellow)}.notification-item{display:flex;gap:11px;padding:13px 0;border-top:1px solid var(--line)}.notification-item:first-child{border-top:0}.notification-icon{width:30px;height:30px;border-radius:10px;background:var(--lilac);color:var(--violet);display:grid;place-items:center;flex:none}.notification-item.unread strong:after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--violet);margin-left:6px;vertical-align:middle}.notification-item strong{font-size:11px}.notification-item p{font-size:10px;color:var(--muted);line-height:1.4;margin:3px 0}.notification-item time{font-size:9px;color:#aaa}
.section-intro{margin:10px 0 28px}.section-intro p{color:var(--muted);margin-top:8px}.row-intro{display:flex;justify-content:space-between;align-items:end}.filters{display:flex;gap:8px}.filters select,.form-grid select,.form-grid input{background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 13px;color:var(--ink);outline:none}.table-panel{padding:8px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th{text-align:left;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:14px;border-bottom:1px solid var(--line)}td{padding:16px 14px;border-bottom:1px solid var(--line)}tbody tr:last-child td{border-bottom:0}.detail-btn{border:0;background:var(--lilac);color:var(--violet);border-radius:8px;padding:7px 9px;font-size:10px;font-weight:700}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.form-panel label{font-size:11px;font-weight:700;display:grid;gap:7px}.form-panel textarea{resize:vertical;border:1px solid var(--line);border-radius:12px;padding:13px;outline:none}.form-panel input:focus,.form-panel select:focus,.form-panel textarea:focus{border-color:#bda8d8}.evidence-box{margin-top:18px;padding:16px;background:#faf9fb;border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;gap:14px}.evidence-box strong{display:block;font-size:12px}.evidence-box small{display:block;color:var(--muted);margin-top:3px}.file-btn{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 12px!important;display:inline-block!important;white-space:nowrap}.file-btn input{display:none}.evidence-box>span{font-size:10px;color:var(--muted)}.form-footer{display:flex;align-items:center;justify-content:space-between;margin-top:22px;font-size:10px;color:var(--muted)}.form-footer b{color:var(--yellow)}
.notification-list{display:grid;gap:10px;max-width:820px}.notification-list .notification-item{background:#fff;border:1px solid var(--line);border-radius:17px;padding:18px}.notification-list .notification-item.unread{border-left:3px solid var(--violet)}
.modal{position:fixed;inset:0;background:rgba(26,21,30,.45);backdrop-filter:blur(5px);display:none;place-items:center;padding:20px;z-index:500}.modal.show{display:grid}.modal-card{background:#fff;border-radius:22px;padding:30px;max-width:520px;width:100%;position:relative}.modal-card h2{font-family:"Playfair Display",serif;font-size:30px;margin:12px 0 18px}.modal-close{position:absolute;right:18px;top:16px;border:0;background:#f4f1f5;border-radius:50%;width:32px;height:32px;font-size:20px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.detail-grid div{background:#faf9fb;padding:12px;border-radius:11px}.detail-grid span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase}.detail-grid strong{font-size:12px}footer{text-align:center;color:#aaa;font-size:9px;margin:28px 0 5px}
@media(max-width:1000px){.sidebar{width:210px}.main{margin-left:210px;width:calc(100% - 210px);padding:25px}.content-grid{grid-template-columns:1fr}.hero-art{width:220px}.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.sidebar{position:static;width:100%;min-height:auto;padding:14px}.app-shell{display:block}.main{margin:0;width:100%;padding:20px}.sidebar-brand{padding-bottom:14px}.nav{grid-template-columns:repeat(4,1fr)}.nav-item{justify-content:center;padding:10px;font-size:0}.nav-item span{font-size:18px}.nav-item b{display:none}.sidebar-bottom{display:none}.hero{padding:30px;min-height:0}.hero h1{font-size:37px}.hero-art{display:none}.topbar{align-items:flex-start}.user-chip div:last-child{display:none}.photo-form,.form-grid{grid-template-columns:1fr}.row-intro,.form-footer{align-items:flex-start;flex-direction:column;gap:14px}.gate-card{padding:28px}.upload-box{min-height:130px}}
