:root{--w:1220px;--bg1:#000;--bg2:#090504;--panel:rgba(15,15,18,.84);--panel2:rgba(4,4,7,.93);--card:rgba(20,19,21,.82);--text:#f7f0e4;--muted:#aaa096;--accent:#d3ad79;--accent2:#9f1019;--strong:#fff0d0;--border:rgba(231,198,148,.31);--glow:rgba(222,180,116,.4);--title1:#fff8e9;--title2:#e8cda0;--title3:#b77e4f;--gp:#ead8b4;--rp:#c88e76;--fhp:#a2484f}
    body.dorm-kosei{--bg1:#050704;--bg2:#17170d;--text:#f1eee4;--muted:#a9ad9e;--accent:#747f3e;--accent2:#d9bf87;--strong:#f0dfb6;--border:rgba(176,187,112,.35);--glow:rgba(156,170,83,.43);--title1:#fff1cb;--title2:#d6c18f;--title3:#849148;--gp:#ecdcb7;--rp:#bdc889;--fhp:#78864a}
    body.dorm-yamiyo{--bg1:#010102;--bg2:#120817;--text:#f1edf4;--muted:#a69daa;--accent:#744087;--accent2:#ad78c7;--strong:#eadcff;--border:rgba(151,103,174,.36);--glow:rgba(128,73,150,.47);--title1:#f5ebff;--title2:#c5a6dd;--title3:#673977;--gp:#dfcfee;--rp:#ad76c8;--fhp:#8a6b99}
    body.dorm-tsukiyomi{--bg1:#02050b;--bg2:#150b18;--text:#eef3fc;--muted:#9faabd;--accent:#618bd8;--accent2:#e092bc;--strong:#f2c6df;--border:rgba(123,161,221,.36);--glow:rgba(99,143,219,.45);--title1:#edf5ff;--title2:#aac8fa;--title3:#e6a0c6;--gp:#a8c9fb;--rp:#f0a5cc;--fhp:#9d9de7}
    *{box-sizing:border-box}html,body{min-width:1280px;min-height:100%;margin:0}html{overflow-x:auto;touch-action:pan-x pan-y pinch-zoom}body{color:var(--text);font-family:"League Spartan",Arial,sans-serif;font-weight:600;background:radial-gradient(circle at 6% 0%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 30%),radial-gradient(circle at 94% 15%,color-mix(in srgb,var(--accent2) 18%,transparent),transparent 28%),linear-gradient(145deg,var(--bg1),#050505 55%,var(--bg2));transition:.55s}.jp{font-family:"Noto Sans JP",sans-serif}.hidden{display:none!important}button,input,a{font:inherit}.shell{position:relative;z-index:2;width:var(--w);margin:0 auto;padding:28px 0 42px}.backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}.faller{position:absolute;top:-220px;opacity:var(--o,.12);width:var(--s,90px);height:var(--s,90px);animation:fall var(--d,18s) linear var(--delay,0s) infinite;filter:drop-shadow(0 5px 14px var(--glow));will-change:transform,opacity}.faller svg{width:100%;height:100%}@keyframes fall{0%{transform:translate3d(0,-180px,0) rotate(0);opacity:0}10%{opacity:var(--o,.12)}50%{transform:translate3d(var(--x1,50px),50vh,0) rotate(var(--r1,300deg))}90%{opacity:var(--o,.12)}100%{transform:translate3d(var(--x2,-70px),calc(100vh + 300px),0) rotate(var(--r2,760deg));opacity:0}}
    .heroBackdrop{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;border-radius:inherit}
    .heroFaller{position:absolute;top:-150px;width:var(--s,76px);height:var(--s,76px);opacity:1;animation:heroFall var(--d,13s) linear var(--delay,0s) infinite;filter:drop-shadow(0 5px 16px var(--glow));will-change:transform,opacity}
    .heroFaller svg{width:100%;height:100%}
    @keyframes heroFall{0%{transform:translate3d(0,-130px,0) rotate(0deg);opacity:1}55%{transform:translate3d(var(--x1,36px),240px,0) rotate(var(--r1,260deg));opacity:1}100%{transform:translate3d(var(--x2,-44px),620px,0) rotate(var(--r2,620deg));opacity:1}}
    .hero{position:relative;isolation:isolate;overflow:hidden;min-height:440px;display:grid;place-items:center;padding:26px;border:1px solid var(--border);border-radius:30px;background:radial-gradient(circle at 50% -15%,rgba(255,255,255,.07),transparent 34%),radial-gradient(circle at 0 100%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 42%),linear-gradient(135deg,rgba(0,0,0,.91),rgba(12,10,10,.88));box-shadow:0 24px 80px rgba(0,0,0,.52),inset 0 0 75px color-mix(in srgb,var(--accent) 12%,transparent)}.heroContent{position:relative;z-index:3;width:720px;text-align:center}.logo{width:130px;height:130px;margin:-8px auto 4px}.logo img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 16px var(--glow))}.heroCore{width:600px;margin:auto}.eyebrow{margin:0 0 18px;color:var(--accent);font-size:17px;font-weight:800;letter-spacing:.15em;text-shadow:0 0 18px var(--glow)}.mainTitle{margin:0 0 24px;color:transparent;font-size:61px;font-weight:900;line-height:.96;letter-spacing:2px;white-space:nowrap;background:linear-gradient(92deg,var(--title1),var(--title2) 52%,var(--title3));-webkit-background-clip:text;background-clip:text}.searchBar{display:grid;grid-template-columns:1fr 158px;gap:10px}.searchBar input{height:54px;padding:0 20px;color:var(--text);text-align:center;font-weight:750;border:1px solid var(--border);border-radius:17px;outline:0;background:rgba(0,0,0,.82);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 14%,transparent)}.searchBar input:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 17%,transparent)}.gradientButton,.searchBar button{border:1px solid rgba(255,255,255,.13);border-radius:17px;color:#140f0c;font-size:12px;font-weight:900;cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--strong) 58%,var(--accent2));box-shadow:0 14px 30px rgba(0,0,0,.38),0 0 24px color-mix(in srgb,var(--accent) 18%,transparent);transition:.2s}.gradientButton:hover,.searchBar button:hover{transform:translateY(-2px);filter:brightness(1.07)}button:disabled{opacity:.5;cursor:wait}.recapButton{min-width:270px;min-height:38px;padding:8px 18px;border:1px solid var(--border);border-radius:999px;color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.08em;background:rgba(0,0,0,.62);cursor:pointer}.recapButtonCorner{position:absolute;top:22px;right:24px;z-index:4;min-width:0;min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:8px 15px;border-color:color-mix(in srgb,var(--accent) 48%,transparent);background:linear-gradient(135deg,rgba(0,0,0,.74),color-mix(in srgb,var(--accent) 8%,rgba(0,0,0,.85)));box-shadow:inset 0 0 18px color-mix(in srgb,var(--accent) 7%,transparent);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease}.recapButtonCorner:hover{transform:translateY(-2px);color:var(--strong);border-color:var(--accent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 26%,transparent),inset 0 0 18px color-mix(in srgb,var(--accent) 12%,transparent)}.recapArrow{width:21px;height:21px;display:grid;place-items:center;border-radius:50%;color:#111;background:linear-gradient(135deg,var(--accent),var(--strong));font-size:11px;line-height:1}.heroNote{margin:15px 0 0;color:var(--muted);font-size:13px;line-height:1.65}.statusLine{min-height:20px;margin-top:7px;color:var(--accent);font-size:12px}
    .resultGrid{margin-top:20px;display:grid;grid-template-columns:700px 500px;gap:20px;align-items:start}.rightColumn{display:grid;gap:20px}.panel{overflow:hidden;border:1px solid var(--border);border-radius:26px;background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 40%),linear-gradient(145deg,var(--panel),var(--panel2));box-shadow:0 20px 64px rgba(0,0,0,.38);backdrop-filter:blur(9px)}.panelInner{padding:28px}.sectionHeader{min-height:55px;display:grid;grid-template-columns:max-content 205px;align-items:center;justify-content:space-between;gap:14px;padding:16px 24px;border-bottom:1px solid var(--border)}.sectionHeader.single{grid-template-columns:1fr}.sectionTitle{margin:0;color:var(--accent);font-size:14px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}.profileHeader{display:grid;grid-template-columns:114px 1fr 96px;gap:22px;align-items:center;padding-bottom:24px;border-bottom:1px solid var(--border)}.avatar{width:114px;height:114px;overflow:hidden;display:grid;place-items:center;border:1px solid var(--border);border-radius:24px;background:#050608;box-shadow:inset 0 0 30px color-mix(in srgb,var(--accent) 15%,transparent)}.avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 17%;transform:scale(1.17)}.identity{min-width:0;overflow:hidden}.studentName{margin:0;color:var(--strong);font-size:28px;font-weight:900;line-height:1;text-transform:uppercase;white-space:nowrap}.metaLine{margin-top:11px;display:flex;align-items:center;gap:10px;white-space:nowrap}.studentKanji{min-width:0;overflow:hidden;color:var(--accent);font-size:17px;text-overflow:ellipsis}.divider{opacity:.45}.badges{display:flex;gap:7px}.badge{display:inline-flex;align-items:center;min-height:28px;padding:5px 10px;border:1px solid var(--border);border-radius:999px;font-size:9px;font-weight:850;text-transform:uppercase;background:rgba(255,255,255,.04)}.badge.active{color:#bff4d5;background:rgba(38,122,76,.28)}.badge.leave{color:#ffd0d3;background:rgba(142,39,49,.34)}.badge.first{color:#302400;background:linear-gradient(135deg,#b88b1e,#f5dc7a)}.badge.second{color:#5c2840;background:linear-gradient(135deg,#e8a9c3,#ffe0ec)}.crest{width:96px;height:116px;display:grid;place-items:center;padding:7px;border:1px solid var(--border);border-radius:22px;background:rgba(5,6,8,.65)}.crest img{width:72px;height:72px;object-fit:contain}.crestName{color:var(--accent);font-size:9px;font-weight:850;text-align:center;text-transform:uppercase}.infoGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:18px}.infoCard{padding:13px 16px;border:1px solid var(--border);border-radius:18px;background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 48%),linear-gradient(135deg,var(--card),rgba(5,5,8,.92));box-shadow:inset 4px 0 0 var(--accent)}.compact{min-height:76px;display:flex;flex-direction:column;justify-content:center}.wide{grid-column:1/-1}.label{margin-bottom:6px;color:var(--accent);font-size:10px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.value{color:var(--strong);font-size:16px;font-weight:700}.finance{min-height:92px}.financeValue{font-size:32px;font-weight:900;color:var(--strong)}.xLink{display:inline-flex;align-items:center;gap:8px;color:var(--strong);text-decoration:none}.xMark{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;color:#111;background:linear-gradient(135deg,var(--strong),var(--accent));font-size:11px}.occupationList,.academicRecords,.pointLogs{display:grid;gap:9px;overflow-y:auto;padding-right:4px}.occupationList{max-height:280px}.occupation{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;padding:11px 13px;border:1px solid var(--border);border-radius:15px;background:rgba(255,255,255,.025)}.occupation.single{grid-template-columns:1fr}.occupationNo{width:35px;height:35px;display:grid;place-items:center;border-radius:12px;color:#111;background:linear-gradient(135deg,var(--accent),var(--strong));font-size:11px;font-weight:900}.workplace{color:var(--accent);font-size:12px;font-weight:850;text-transform:uppercase}.position{margin-top:5px;color:var(--strong);font-size:16px}.empty{padding:16px;color:var(--muted);border:1px dashed var(--border);border-radius:14px;text-align:center;font-size:13px}
    .academicCard{padding:16px}.academicTop{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:13px;border-bottom:1px solid var(--border)}.academicIntro{color:var(--muted);font-size:11px;line-height:1.35}.academicActions{display:flex;align-items:center;gap:8px}.count,.transcriptButton{padding:7px 11px;border:1px solid var(--border);border-radius:999px;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);font-size:8px;font-weight:900;white-space:nowrap}.transcriptButton{cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--strong) 60%,var(--accent2));color:#111}.academicRecords{max-height:900px;margin-top:13px}.semesterCard{overflow:hidden;border:1px solid var(--border);border-radius:17px;background:rgba(5,5,8,.76);box-shadow:inset 3px 0 0 var(--accent)}.semesterCard.missing{border-style:dashed;opacity:.78}.semesterHead{display:flex;justify-content:space-between;align-items:center;padding:13px 14px;border-bottom:1px solid var(--border)}.semesterTitle{color:var(--strong);font-size:16px;font-weight:900;text-transform:uppercase}.nensei{padding:6px 10px;border:1px solid var(--border);border-radius:999px;color:var(--accent);font-size:9px}.miniTitle{margin:12px 14px 8px;color:var(--accent);font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.participation{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:0 14px}.part{min-height:55px;display:grid;align-content:center;gap:4px;padding:8px;border:1px solid var(--border);border-radius:12px;text-align:center}.partName{color:var(--muted);font-size:8px;text-transform:uppercase}.partState{font-size:8px;font-weight:900}.part.yes{background:rgba(42,126,80,.16)}.part.yes .partState{color:#bff4d5}.part.no{background:rgba(133,38,48,.15)}.part.no .partState{color:#f4b5bc}.part.locked .partState{color:#aaa29a}.subjects{display:grid;gap:6px;padding:0 14px}.subjectHeader,.subjectRow{display:grid;grid-template-columns:minmax(0,1fr) 86px 118px;gap:8px;align-items:center}.subjectHeader{padding:0 11px;color:var(--muted);font-size:8px;text-transform:uppercase}.subjectRow{padding:8px 10px;border:1px solid var(--border);border-radius:12px}.subjectName{min-width:0;color:var(--strong);font-size:11px}.mark{min-height:30px;display:grid;place-items:center;padding:0 7px;overflow:hidden;border:1px solid var(--border);border-radius:9px;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);font-size:12px;font-weight:900;white-space:nowrap;text-overflow:ellipsis}.mark.numberMark{font-size:13px}.mark.kanjiMark{font-family:"Noto Sans JP",sans-serif;font-size:12px}.semesterFoot{display:grid;grid-template-columns:1fr 1fr 155px;gap:8px;padding:13px 14px}.outcome{padding:8px 10px;border:1px solid var(--border);border-radius:12px}.outcomeLabel{color:var(--muted);font-size:8px;text-transform:uppercase}.outcomeValue{margin-top:4px;color:var(--strong);font-size:11px;font-weight:900}.promoted{color:#bff4d5!important}.retained{color:#ffb3bb!important}.rank1{color:#f4d66f!important}.rank2{color:#f3b6d1!important}.reportButton{min-height:49px;padding:8px;border:0;border-radius:12px;color:#111;background:linear-gradient(135deg,var(--accent),var(--strong) 58%,var(--accent2));font-size:9px;font-weight:900;cursor:pointer}.missingNote{margin:13px 14px;padding:13px;border:1px dashed var(--border);border-radius:12px;color:var(--muted);font-size:10px;line-height:1.45}
    .mediaStack{padding:16px 24px 24px}.mediaCard{overflow:hidden;border:1px solid var(--border);border-radius:20px}.mediaPreview{min-height:250px;display:grid;place-items:center;background:rgba(0,0,0,.45)}.mediaPreview img{width:100%;max-height:575px;object-fit:contain}.mediaAction{padding:13px;border-top:1px solid var(--border)}.openButton{width:100%;min-height:44px;display:grid;place-items:center;text-decoration:none}.semesterBadge{max-width:205px;padding:7px 10px;border:1px solid var(--border);border-radius:999px;color:var(--accent);font-size:9px;text-align:center}.semesterNote{margin:12px 24px 0;color:var(--muted);font-size:12px}.totals{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:15px 24px}.total{min-height:93px;padding:14px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.025)}.total.gp{box-shadow:inset 4px 0 0 var(--gp)}.total.rp{box-shadow:inset 4px 0 0 var(--rp)}.total.fhp{box-shadow:inset 4px 0 0 var(--fhp)}.totalLabel{font-size:9px;text-transform:uppercase}.gp .totalLabel,.gp .totalValue{color:var(--gp)}.rp .totalLabel,.rp .totalValue{color:var(--rp)}.fhp .totalLabel,.fhp .totalValue{color:var(--fhp)}.totalValue{margin-top:9px;font-size:37px;font-weight:900}.logBar{display:flex;justify-content:space-between;padding:0 24px 11px;border-bottom:1px solid var(--border);color:var(--accent);font-size:11px}.updated{color:var(--muted)}.pointLogs{max-height:405px;padding:14px 24px 24px}.logItem{display:grid;grid-template-columns:128px 1fr;gap:12px;padding:13px 14px;border:1px solid var(--border);border-radius:16px}.logDate{color:var(--muted);font-size:11px}.logDesc{color:var(--strong);font-size:14px}.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}.chip{padding:5px 10px;border:1px solid var(--border);border-radius:999px;font-size:11px}.chip.gp{color:var(--gp)}.chip.rp{color:var(--rp)}.chip.fhp{color:var(--fhp)}
    .footer{margin-top:25px;padding:18px;border-top:1px solid var(--border);color:var(--muted);text-align:center;font-size:12px;text-transform:uppercase}.footerBrand{color:var(--strong);font-weight:900;text-shadow:0 0 12px var(--glow)}
    .modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:30px;background:rgba(0,0,0,.8);backdrop-filter:blur(10px)}.modalCard{width:1120px;max-height:88vh;overflow:hidden;border:1px solid var(--border);border-radius:26px;background:#0b0908}.modalHeader{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--border)}.modalTitle{margin:0;color:#f0d6aa;font-size:20px}.modalSubtitle{margin-top:5px;color:#a99d90;font-size:11px}.modalButtons{display:flex;gap:9px}.modalButtons button{padding:9px 14px;border:1px solid var(--border);border-radius:12px;color:#e7caa3;background:rgba(255,255,255,.045);cursor:pointer}.modalButtons .download{color:#111;background:linear-gradient(135deg,#97151e,#e6c38f 58%,#b77e4f)}.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px 24px}.summaryCard{padding:12px 14px;border:1px solid var(--border);border-radius:16px}.summaryLabel{color:#9d9287;font-size:9px;text-transform:uppercase}.summaryValue{margin-top:5px;color:#f0d6aa;font-size:24px;font-weight:900}.tableWrap{max-height:58vh;overflow:auto;padding:0 24px 24px}.recapTable{width:100%;border-collapse:collapse;color:#e8d7c0;font-size:11px}.recapTable th{position:sticky;top:0;padding:12px 10px;background:#8f0e16;font-size:9px}.recapTable td{padding:11px 10px;border:1px solid rgba(231,198,148,.15)}

    /* NENSEI PROMOTION RECAP PDF */
    .promotionPage{padding:42px 44px 38px;border-top:12px solid #8e1118}
    .promotionHeader{display:grid;grid-template-columns:84px minmax(0,1fr);gap:18px;align-items:center;padding-bottom:16px;border-bottom:3px solid #d9b98a}
    .promotionLogoWrap{width:84px;height:84px;display:grid;place-items:center}
    .promotionLogo{width:78px;height:78px;object-fit:contain}
    .promotionJp{color:#8e1118;font-family:"Noto Sans JP",sans-serif;font-size:15px;font-weight:900;line-height:1.1}
    .promotionTitle{margin-top:4px;color:#251e19;font-size:25px;font-weight:900;line-height:1;letter-spacing:.015em;white-space:nowrap}
    .promotionSub{margin-top:7px;color:#806c59;font-size:9px;font-weight:700;letter-spacing:.035em}
    .promotionGroupBanner{margin-top:16px;padding:11px 14px;border-radius:10px;color:#fff6e8;background:linear-gradient(135deg,#251e19,#8e1118);border-left:7px solid #d6ad72}
    .promotionGroupBanner.promotedGroup{border-left-color:#2f8a5f}
    .promotionGroupBanner.retainedGroup{border-left-color:#b42334}
    .promotionGroupTitle{font-size:15px;font-weight:900;letter-spacing:.06em}
    .promotionGroupMeta{margin-top:4px;color:#ead9c2;font-size:8px;font-weight:700}
    .promotionSummaryLine{margin-top:12px;padding:10px 12px;border:1px solid #c9a877;border-radius:9px;background:#fffaf2;color:#5f4d3e;font-size:9px;font-weight:800}
    .promotionTable{width:100%;margin-top:12px;border-collapse:collapse;table-layout:fixed}
    .promotionTable th,.promotionTable td{border:1px solid #c9a877}
    .promotionTable th{padding:7px 5px;color:#fff1da;background:#251e19;font-size:7.5px;line-height:1.2;text-align:center}
    .promotionTable td{padding:7px 6px;background:#fffaf2;color:#2a211a;font-size:8.4px;line-height:1.28;text-align:center;vertical-align:middle;overflow-wrap:anywhere}
    .promotionTable th:nth-child(1),.promotionTable td:nth-child(1){width:5%}
    .promotionTable th:nth-child(2),.promotionTable td:nth-child(2){width:14%}
    .promotionTable th:nth-child(3),.promotionTable td:nth-child(3){width:20%;text-align:left}
    .promotionTable th:nth-child(4),.promotionTable td:nth-child(4){width:10%}
    .promotionTable th:nth-child(5),.promotionTable td:nth-child(5){width:10%}
    .promotionTable th:nth-child(6),.promotionTable td:nth-child(6){width:11%}
    .promotionTable th:nth-child(7),.promotionTable td:nth-child(7){width:30%;text-align:left}
    .promotionEmpty{margin-top:16px;padding:28px;border:1px dashed #c9a877;border-radius:12px;background:#fffaf2;color:#806c59;text-align:center;font-size:11px;font-weight:800}
    .promotionPageFooter{position:absolute;left:44px;right:44px;bottom:26px;padding-top:10px;border-top:2px solid #d9b98a;color:#6d5948;font-size:8px;text-align:center}

    .pdfRoot{position:fixed;left:-14000px;top:0;width:816px;z-index:-9999}
    .pdfPage{position:relative;width:816px;height:1344px;overflow:hidden;color:#2a211a;background:linear-gradient(180deg,#fbf7ef,#f3eadc);font-family:Georgia,"Times New Roman",serif}
    .pdfPage *{box-sizing:border-box}
    .reportPage{padding:32px 42px 28px;border-top:12px solid #8e1118}
    .reportHeader{display:grid;grid-template-columns:74px minmax(0,1fr) 136px;gap:14px;align-items:center;padding-bottom:14px;border-bottom:3px solid #d9b98a}
    .reportLogo{width:68px;height:68px;object-fit:contain}
    .reportInstitution{color:#8e1118;font-size:12px;font-weight:900;letter-spacing:.18em}.reportJp{color:#8e1118;font-size:15px;font-weight:800}
    .reportTitle{margin-top:4px;font-size:21px;font-weight:900;line-height:1;letter-spacing:.025em;text-transform:uppercase;white-space:nowrap}
    .reportSub{margin-top:6px;color:#806c59;font-size:8.5px;letter-spacing:.035em}
    .termBadge{padding:10px 8px;border-radius:11px;color:#fff6e8;background:linear-gradient(135deg,#251e19,#8e1118);text-align:center}
    .termMain{font-size:15px;font-weight:900;line-height:1.1}
    .termSub{margin-top:5px;font-size:8px;font-weight:700}
    .pdfIdentity{display:grid;grid-template-columns:132px minmax(0,1fr);gap:17px;margin-top:15px;padding:13px;border:1px solid #d9b98a;border-radius:13px;background:rgba(255,255,255,.6)}
    .pdfPhoto{width:132px;height:158px;overflow:hidden;display:grid;place-items:center;border:1px solid #c8a574;border-radius:9px;background:#efe6d8}
    .pdfPhoto img{width:100%;height:100%;object-fit:contain;object-position:center}
    .photoFallback{height:100%;display:grid;place-items:center;color:#7b6a5b;font-size:9px}
    .pdfName{color:#8e1118;font-size:21px;font-weight:900;line-height:1.05;text-transform:uppercase}
    .pdfKanji{margin-top:4px;color:#7a654f;font-size:13px}
    .idGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 16px;margin-top:11px}
    .idItem{padding-bottom:6px;border-bottom:1px solid #dac7ad}
    .idLabel{color:#8e1118;font-size:7.5px;font-weight:900;text-transform:uppercase}
    .idValue{margin-top:3px;font-size:10.5px;font-weight:800}
    .pdfScoreSummary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
    .pdfScoreCard{padding:9px 10px;border:1px solid #cba978;border-radius:10px;background:#fffaf2;text-align:center}
    .pdfScoreLabel{color:#7d6751;font-size:7.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}
    .pdfScoreValue{margin-top:5px;color:#8e1118;font-size:17px;font-weight:900}
    .pdfSection{margin-top:13px;padding:7px 10px;color:#fff2dc;background:#8e1118;border-left:6px solid #d6ad72;font-size:9.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}
    .pdfPartGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:8px}
    .pdfPart{padding:8px 6px;border:1px solid #d8bc94;border-radius:9px;background:#fffaf2;text-align:center}
    .pdfPartName{color:#7e674f;font-size:7.5px}
    .pdfPartState{margin-top:5px;font-size:8.5px;font-weight:900}
    .scoreTable{width:100%;margin-top:8px;border-collapse:collapse;table-layout:fixed}
    .scoreTable th,.scoreTable td{border:1px solid #c9a877}
    .scoreTable th{padding:6px 4px;color:#fff1da;background:#251e19;font-size:7.3px;line-height:1.2}
    .scoreTable td{height:45px;padding:5px;background:#fffaf2;text-align:center;font-size:9.5px}
    .scoreTable th:nth-child(1),.scoreTable td:nth-child(1){width:32%;text-align:left}
    .scoreTable th:nth-child(2),.scoreTable td:nth-child(2){width:11%}
    .scoreTable th:nth-child(3),.scoreTable td:nth-child(3){width:13%}
    .scoreTable th:nth-child(4),.scoreTable td:nth-child(4){width:13%}
    .scoreTable th:nth-child(5),.scoreTable td:nth-child(5){width:13%}
    .scoreTable th:nth-child(6),.scoreTable td:nth-child(6){width:18%}
    .scoreSubject{font-family:Georgia,"Noto Sans JP","Times New Roman",serif;font-size:8.6px!important;font-weight:800!important;line-height:1.25;text-transform:none;overflow-wrap:anywhere}
    .scoreNumber{color:#8e1118!important;font-size:14px!important;font-weight:900!important}
    .scoreKanji{font-family:"Noto Sans JP",sans-serif;font-size:12px!important;font-weight:900!important;white-space:nowrap}
    .pdfOutcome{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
    .pdfOutcomeCard{padding:8px;border:1px solid #cba978;border-radius:9px;background:#fffaf2;text-align:center}
    .pdfOutcomeLabel{color:#7d6751;font-size:7.5px;text-transform:uppercase}
    .pdfOutcomeValue{margin-top:4px;font-size:12.5px;font-weight:900}
    .pdfRemarks{margin-top:8px;padding:9px 11px;border:1px solid #cba978;border-radius:9px;background:#fffaf2}
    .pdfRemarksLabel{color:#8e1118;font-size:7.5px;font-weight:900}
    .pdfRemarksText{margin-top:5px;font-size:8.8px;line-height:1.35}
    .pdfFooter{position:absolute;left:42px;right:42px;bottom:20px;padding-top:8px;border-top:2px solid #d9b98a}
    .pdfDate{text-align:center;color:#5f4d3e;font-size:7.5px}
    .signatures{display:grid;grid-template-columns:1fr 1fr;gap:110px;margin-top:6px;text-align:center}
    .stamp{width:68px;height:68px;margin:3px auto;object-fit:contain}
    .signRole,.signName{font-size:8px;font-weight:800}
    .transcriptLegacyPage{padding:48px 46px 42px;border-top:12px solid #8e1118}
    .transcriptLegacyHeader{display:grid;grid-template-columns:70px 1fr;gap:14px;align-items:center;padding-bottom:14px;border-bottom:3px solid #d9b98a}
    .transcriptLegacyLogo{width:66px;height:66px;object-fit:contain}
    .transcriptLegacyTitle{font-size:23px;font-weight:900}
    .transcriptLegacyStudent{margin-top:15px;padding:12px 14px;border:1px solid #c9a877;border-radius:9px;background:#fffaf2;font-size:10px}
    .transcriptLegacyTable{width:100%;margin-top:15px;border-collapse:collapse;table-layout:fixed}
    .transcriptLegacyTable th,.transcriptLegacyTable td{border:1px solid #c9a877}
    .transcriptLegacyTable th{padding:6px;color:#fff1da;background:#251e19;font-size:8px}
    .transcriptLegacyTable td{height:42px;padding:5px;background:#fffaf2;text-align:center;font-size:8px}
    .transcriptLegacySubjects{text-align:left!important;font-size:7px!important}
    .pdfOverlay{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;background:rgba(0,0,0,.84)}
    .pdfBox{min-width:340px;padding:28px 32px;border:1px solid var(--border);border-radius:22px;color:#efd5aa;background:#120f0d;text-align:center}
    .pdfText{margin-top:8px;color:#a99b8d;font-size:11px}
  
  /* WARNA STATUS KHUSUS PDF — LEBIH TEGAS */

.pdfPage .promoted {
  color: #18794e !important;
  font-weight: 900 !important;
}

.pdfPage .retained {
  color: #b42334 !important;
  font-weight: 900 !important;
}

.pdfPage .rank1 {
  color: #a66c00 !important;
  font-weight: 900 !important;
}

.pdfPage .rank2 {
  color: #963d69 !important;
  font-weight: 900 !important;
}

.pdfPage .pdfPartState,
.pdfPage .pdfOutcomeValue {
  font-weight: 900 !important;
}
/* =====================================================
   SCROLLBAR — OTOMATIS MENGIKUTI WARNA ASRAMA
   ===================================================== */

.academicRecords,
.occupationList,
.pointLogs,
.tableWrap {
  scrollbar-width: thin;
  scrollbar-color:
    var(--accent)
    color-mix(in srgb, var(--panel2) 92%, #000);

  scrollbar-gutter: stable;
}


/* CHROME, EDGE, SAFARI */

.academicRecords::-webkit-scrollbar,
.occupationList::-webkit-scrollbar,
.pointLogs::-webkit-scrollbar,
.tableWrap::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}


/* JALUR SCROLLBAR */

.academicRecords::-webkit-scrollbar-track,
.occupationList::-webkit-scrollbar-track,
.pointLogs::-webkit-scrollbar-track,
.tableWrap::-webkit-scrollbar-track {
  margin-block: 7px;

  border: 1px solid
    color-mix(
      in srgb,
      var(--accent) 24%,
      transparent
    );

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--panel2) 94%,
        #000
      ),
      color-mix(
        in srgb,
        var(--accent) 8%,
        #050505
      )
    );

  box-shadow:
    inset 0 0 8px
    rgba(0, 0, 0, .58);
}


/* BAGIAN YANG DIGESER */

.academicRecords::-webkit-scrollbar-thumb,
.occupationList::-webkit-scrollbar-thumb,
.pointLogs::-webkit-scrollbar-thumb,
.tableWrap::-webkit-scrollbar-thumb {
  min-height: 55px;

  border: 2px solid
    color-mix(
      in srgb,
      var(--panel2) 88%,
      #000
    );

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      var(--strong) 0%,
      var(--accent) 48%,
      var(--accent2) 100%
    );

  box-shadow:
    0 0 10px
    color-mix(
      in srgb,
      var(--accent) 42%,
      transparent
    ),

    inset 0 1px 1px
    rgba(255, 255, 255, .26);

  transition:
    filter .2s ease,
    box-shadow .2s ease;
}


/* SAAT CURSOR DI ATAS SCROLLBAR */

.academicRecords::-webkit-scrollbar-thumb:hover,
.occupationList::-webkit-scrollbar-thumb:hover,
.pointLogs::-webkit-scrollbar-thumb:hover,
.tableWrap::-webkit-scrollbar-thumb:hover {
  filter: brightness(1.2);

  box-shadow:
    0 0 15px
    color-mix(
      in srgb,
      var(--accent) 68%,
      transparent
    ),

    inset 0 1px 1px
    rgba(255, 255, 255, .34);
}


/* SUDUT SCROLLBAR */

.academicRecords::-webkit-scrollbar-corner,
.occupationList::-webkit-scrollbar-corner,
.pointLogs::-webkit-scrollbar-corner,
.tableWrap::-webkit-scrollbar-corner {
  background: transparent;
}

/* =====================================================
   PROGRESSIVE ACADEMIC LOADING
   ===================================================== */
.academicLoading{min-height:230px;display:grid;grid-template-columns:68px minmax(0,1fr);align-items:center;gap:20px;padding:30px;border:1px solid var(--border);border-radius:18px;background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--accent) 14%,transparent),transparent 48%),rgba(0,0,0,.28);box-shadow:inset 0 0 28px color-mix(in srgb,var(--accent) 7%,transparent)}
.academicLoadingOrb{width:58px;height:58px;border:3px solid color-mix(in srgb,var(--accent) 22%,transparent);border-top-color:var(--accent);border-right-color:var(--strong);border-radius:50%;animation:academicLoadingSpin .9s linear infinite;box-shadow:0 0 22px color-mix(in srgb,var(--accent) 34%,transparent)}
.academicLoadingContent{min-width:0}
.academicLoadingTitle{color:var(--strong);font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.academicLoadingText{max-width:440px;margin-top:8px;color:var(--muted);font-size:12px;line-height:1.55}
.academicLoadingBars{display:flex;gap:6px;margin-top:16px}
.academicLoadingBars span{width:27px;height:4px;border-radius:999px;background:var(--accent);animation:academicLoadingPulse 1.2s ease-in-out infinite}
.academicLoadingBars span:nth-child(2){animation-delay:.16s}
.academicLoadingBars span:nth-child(3){animation-delay:.32s}
@keyframes academicLoadingSpin{to{transform:rotate(360deg)}}
@keyframes academicLoadingPulse{0%,100%{opacity:.25;transform:scaleX(.7)}50%{opacity:1;transform:scaleX(1)}}

/* =====================================================
   COPYABLE DOCUMENT REVIEW MODAL
   ===================================================== */
body.document-review-open{overflow:hidden}
.documentReviewModal{position:fixed;inset:0;z-index:14000;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.86);backdrop-filter:blur(13px)}
.documentReviewCard{width:min(1180px,calc(100vw - 40px));height:min(94vh,1040px);overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);border:1px solid var(--border);border-radius:26px;background:linear-gradient(145deg,#111013,#050507);box-shadow:0 30px 110px rgba(0,0,0,.72),0 0 45px color-mix(in srgb,var(--accent) 12%,transparent)}
.documentReviewHeader{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:17px 22px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,rgba(18,16,17,.98),rgba(5,5,7,.98))}
.documentReviewHeading{min-width:0}
.documentReviewEyebrow{color:var(--accent);font-size:9px;font-weight:900;letter-spacing:.18em}
.documentReviewTitle{margin:4px 0 0;color:var(--strong);font-family:"Cinzel",Georgia,serif;font-size:21px;font-weight:800;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.documentReviewSubtitle{margin-top:4px;color:var(--muted);font-size:10px}
.documentReviewActions{display:flex;align-items:center;gap:9px;flex-shrink:0}
.documentReviewActions button{min-height:40px;padding:9px 15px;border:1px solid var(--border);border-radius:12px;font-size:10px;font-weight:900;letter-spacing:.045em;cursor:pointer;transition:transform .2s ease,filter .2s ease,border-color .2s ease}
.documentReviewActions button:hover{transform:translateY(-1px);filter:brightness(1.08)}
.documentReviewActions button:disabled{transform:none;cursor:wait;opacity:.58}
.documentReviewDownload{color:#160e0b;background:linear-gradient(135deg,var(--accent2),var(--strong) 58%,var(--accent))}
.documentReviewClose{color:var(--strong);background:rgba(255,255,255,.045)}
.documentReviewViewport{min-height:0;overflow:auto;padding:28px;background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 34%),#08080a;scrollbar-width:thin;scrollbar-color:var(--accent) #111}
.documentReviewPages{display:grid;justify-content:center;gap:28px;min-width:816px}
.documentReviewPages .pdfPage{position:relative;left:auto;top:auto;z-index:1;box-shadow:0 20px 60px rgba(0,0,0,.58);user-select:text;-webkit-user-select:text}
.documentReviewPages .pdfPage::selection,.documentReviewPages .pdfPage *::selection{color:#111;background:#f1c978}

/* Reliable document images and revised academic identity */
.reportLogoWrap{width:74px;height:74px;display:grid;place-items:center}
.reportLogo{width:68px;height:68px;object-fit:contain}
.documentAssetFallback{width:100%;height:100%;display:grid;place-items:center;padding:5px;color:#8b7460;font-family:"League Spartan",Arial,sans-serif;font-size:7px;font-weight:800;letter-spacing:.05em;text-align:center;border:1px dashed rgba(142,17,24,.35);border-radius:7px;background:rgba(255,250,242,.72)}
.reportTitle{font-family:"Cinzel",Georgia,"Times New Roman",serif;font-size:23px;font-weight:800;line-height:1.02;letter-spacing:.045em}
.pdfIdentity{grid-template-columns:132px minmax(0,1fr);align-items:center;min-height:160px}
.pdfPhoto{width:132px;height:132px;border-radius:8px}
.pdfPhotoImage,.pdfPhoto img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;transform:none}
.pdfIdentityDetails{min-width:0}
.pdfName{font-family:"Cinzel","League Spartan",Georgia,serif;font-size:22px;letter-spacing:.02em}
.pdfKanji{font-size:14px}
.pdfHouse{min-height:58px;display:flex;align-items:center;gap:11px;margin-top:13px;padding:8px 11px;border:1px solid #d1b184;border-radius:10px;background:#fffaf2}
.pdfHouseLogo{width:44px;height:44px;display:grid;place-items:center;flex:0 0 44px}
.pdfHouseLogoImage{width:42px;height:42px;object-fit:contain}
.pdfHouseName{margin-top:3px;color:#2a211a;font-size:13px;font-weight:900;letter-spacing:.04em}
.pdfHouseText{min-width:0}
.pdfShownGrade{margin-left:auto;min-width:125px;padding-left:14px;border-left:1px solid #dac7ad;text-align:right}
.pdfShownGradeLabel{color:#8e1118;font-size:7.5px;font-weight:900;letter-spacing:.06em}
.pdfShownGradeValue{margin-top:4px;color:#2a211a;font-size:12px;font-weight:900;letter-spacing:.035em}


/* Hanko now sits directly after remarks, before the true footer. */
.approvalBlock{position:relative;margin-top:26px;padding:12px 26px 3px;border-top:1px solid #d9b98a}
.signatures{display:grid;grid-template-columns:1fr 1fr;gap:130px;text-align:center}
.signatureBlock{min-width:0}
.stampWrap{width:72px;height:72px;display:grid;place-items:center;margin:2px auto}
.stamp{width:70px;height:70px;margin:0;object-fit:contain;mix-blend-mode:multiply;opacity:.88;filter:saturate(1.1) contrast(1.06)}
.stampWrap .documentAssetFallback{font-size:6px}
.signRole,.signName{font-family:"League Spartan",Arial,sans-serif;font-size:8px;font-weight:800}
.signName{margin-top:1px}
.pdfFooter{position:absolute;left:42px;right:42px;bottom:18px;padding-top:7px;border-top:2px solid #d9b98a}

/* Loading overlay stays above the document review. */
.pdfOverlay{z-index:16000}


/* =====================================================
   REVISION 2026-07-15 — VECTOR PDF + HD PNG
   ===================================================== */
.documentReviewPng{
  color:var(--strong);
  background:linear-gradient(135deg,rgba(255,255,255,.08),color-mix(in srgb,var(--accent) 18%,rgba(0,0,0,.72)));
}


.reportInstitution{
  color:#8e1118;
  font-size:8.2px;
  font-weight:900;
  line-height:1.18;
  letter-spacing:.035em;
  white-space:nowrap;
}

.reportInstitutionJp{
  font-size:10.5px;
  letter-spacing:.14em;
}

.pdfPhotoImage,
.pdfPhoto img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 17%;
  transform:scale(1.17);
  transform-origin:50% 17%;
}

.scoreTable th{
  font-size:6.55px;
  line-height:1.18;
}

/* =====================================================
   GENERAL DROPDOWN + CURRENT NENSEI RECAP
   ===================================================== */
.generalMenu{
  position:absolute;
  top:22px;
  right:24px;
  z-index:8;
}
.generalMenu .recapButtonCorner{
  position:static;
  top:auto;
  right:auto;
}
.generalMenuButton{
  min-width:138px!important;
  justify-content:space-between!important;
}
.generalMenuChevron{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#111;
  background:linear-gradient(135deg,var(--accent),var(--strong));
  font-size:13px;
  line-height:1;
  transition:transform .2s ease;
}
.generalMenu.open .generalMenuChevron{transform:rotate(180deg)}
.generalMenuPanel{
  position:absolute;
  top:46px;
  right:0;
  width:315px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:17px;
  background:linear-gradient(145deg,rgba(7,7,10,.98),rgba(18,13,16,.98));
  box-shadow:0 22px 55px rgba(0,0,0,.62),inset 0 0 24px color-mix(in srgb,var(--accent) 7%,transparent);
  backdrop-filter:blur(14px);
}
.generalMenuPanel button{
  width:100%;
  display:block;
  padding:13px 14px;
  border:1px solid transparent;
  border-radius:12px;
  color:var(--text);
  text-align:left;
  background:transparent;
  cursor:pointer;
  transition:.18s ease;
}
.generalMenuPanel button+button{margin-top:5px}
.generalMenuPanel button:hover,
.generalMenuPanel button:focus-visible{
  outline:none;
  border-color:var(--border);
  background:color-mix(in srgb,var(--accent) 12%,rgba(255,255,255,.025));
  transform:translateX(-2px);
}
.generalMenuItemTitle{
  display:block;
  color:var(--strong);
  font-size:11px;
  font-weight:900;
  letter-spacing:.07em;
}
.generalMenuItemText{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:9px;
  line-height:1.35;
}
.nenseiModalCard{width:1160px}
.nenseiRecapBody{
  max-height:72vh;
  overflow:auto;
  padding:0 24px 24px;
}
.nenseiGroupBlock{
  overflow:hidden;
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:17px;
  background:rgba(255,255,255,.022);
}
.nenseiGroupHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 15px;
  color:#fff3df;
  background:linear-gradient(135deg,#251e19,#8e1118);
  border-left:7px solid #d6ad72;
}
.nenseiGroupTitle{
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
}
.nenseiGroupCount{
  color:#ead9c2;
  font-size:9px;
  font-weight:800;
}
.nenseiRecapTable{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  color:#e8d7c0;
  font-size:10px;
}
.nenseiRecapTable th{
  padding:10px 8px;
  color:#f7e7d1;
  background:#171311;
  font-size:8px;
  letter-spacing:.04em;
  text-align:center;
}
.nenseiRecapTable td{
  padding:10px 8px;
  border:1px solid rgba(231,198,148,.14);
  vertical-align:middle;
  overflow-wrap:anywhere;
}
.nenseiRecapTable th:nth-child(1),.nenseiRecapTable td:nth-child(1){width:5%;text-align:center}
.nenseiRecapTable th:nth-child(2),.nenseiRecapTable td:nth-child(2){width:14%;text-align:center}
.nenseiRecapTable th:nth-child(3),.nenseiRecapTable td:nth-child(3){width:21%}
.nenseiRecapTable th:nth-child(4),.nenseiRecapTable td:nth-child(4){width:16%}
.nenseiRecapTable th:nth-child(5),.nenseiRecapTable td:nth-child(5){width:17%}
.nenseiRecapTable th:nth-child(6),.nenseiRecapTable td:nth-child(6){width:13%;text-align:center}
.nenseiRecapTable th:nth-child(7),.nenseiRecapTable td:nth-child(7){width:14%;text-align:center}
.nenseiKanjiCell{font-family:"Noto Sans JP","Yu Gothic","Hiragino Sans","Meiryo",sans-serif}
.recapStatusBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:72px;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  font-size:8px;
  font-weight:900;
}
.recapStatusBadge.active{color:#bff4d5;background:rgba(38,122,76,.28)}
.recapStatusBadge.leave{color:#ffd0d3;background:rgba(142,39,49,.34)}

/* Nensei recap document preview */
.nenseiRecapPage{padding:42px 44px 38px;border-top:12px solid #8e1118}
.nenseiDocumentHeader{display:grid;grid-template-columns:84px minmax(0,1fr);gap:18px;align-items:center;padding-bottom:16px;border-bottom:3px solid #d9b98a}
.nenseiDocumentLogo{width:78px;height:78px;object-fit:contain}
.nenseiDocumentJp{color:#8e1118;font-family:"Noto Sans JP","Yu Gothic","Hiragino Sans","Meiryo",sans-serif;font-size:15px;font-weight:900}
.nenseiDocumentTitle{margin-top:4px;color:#251e19;font-size:25px;font-weight:900;line-height:1;letter-spacing:.015em}
.nenseiDocumentSub{margin-top:7px;color:#806c59;font-size:9px;font-weight:700}
.nenseiDocumentBanner{margin-top:16px;padding:11px 14px;border-radius:10px;color:#fff6e8;background:linear-gradient(135deg,#251e19,#8e1118);border-left:7px solid #d6ad72}
.nenseiDocumentBannerTitle{font-size:15px;font-weight:900;letter-spacing:.06em}
.nenseiDocumentBannerMeta{margin-top:4px;color:#ead9c2;font-size:8px;font-weight:700}
.nenseiDocumentSummary{margin-top:12px;padding:10px 12px;border:1px solid #c9a877;border-radius:9px;background:#fffaf2;color:#5f4d3e;font-size:9px;font-weight:800}
.nenseiDocumentTable{width:100%;margin-top:12px;border-collapse:collapse;table-layout:fixed}
.nenseiDocumentTable th,.nenseiDocumentTable td{border:1px solid #c9a877}
.nenseiDocumentTable th{padding:7px 5px;color:#fff1da;background:#251e19;font-size:7.2px;line-height:1.2;text-align:center}
.nenseiDocumentTable td{padding:7px 6px;background:#fffaf2;color:#2a211a;font-size:8.1px;line-height:1.25;vertical-align:middle;overflow-wrap:anywhere}
.nenseiDocumentTable th:nth-child(1),.nenseiDocumentTable td:nth-child(1){width:5%;text-align:center}
.nenseiDocumentTable th:nth-child(2),.nenseiDocumentTable td:nth-child(2){width:15%;text-align:center}
.nenseiDocumentTable th:nth-child(3),.nenseiDocumentTable td:nth-child(3){width:22%}
.nenseiDocumentTable th:nth-child(4),.nenseiDocumentTable td:nth-child(4){width:17%}
.nenseiDocumentTable th:nth-child(5),.nenseiDocumentTable td:nth-child(5){width:17%}
.nenseiDocumentTable th:nth-child(6),.nenseiDocumentTable td:nth-child(6){width:12%;text-align:center}
.nenseiDocumentTable th:nth-child(7),.nenseiDocumentTable td:nth-child(7){width:12%;text-align:center}
.nenseiDocumentFooter{position:absolute;left:44px;right:44px;bottom:26px;padding-top:10px;border-top:2px solid #d9b98a;color:#6d5948;font-size:8px;text-align:center}

/* =====================================================
   HOME BUTTON + CURRENT SEMESTER GP RANKING
   Only these additions are new; existing styles remain unchanged.
   ===================================================== */
.homeButtonCorner{
  right:174px;
  min-width:96px;
  z-index:8;
}

.gpRankingSection{
  margin-top:20px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:26px;
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 38%),
    linear-gradient(145deg,var(--panel),var(--panel2));
  box-shadow:0 20px 64px rgba(0,0,0,.38);
  backdrop-filter:blur(9px);
}
.gpRankingHeader{
  min-height:122px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:24px 28px 22px;
  border-bottom:1px solid var(--border);
}
.gpRankingEyebrow{
  color:var(--accent);
  font-size:10px;
  font-weight:900;
  letter-spacing:.15em;
}
.gpRankingTitle{
  margin:6px 0 0;
  color:var(--strong);
  font-size:25px;
  font-weight:900;
  letter-spacing:.04em;
}
.gpRankingDisclaimer{
  max-width:760px;
  margin:9px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}
.gpRankingMeta{
  width:270px;
  flex:0 0 270px;
  text-align:right;
}
.gpRankingSemester{
  display:inline-flex;
  min-height:32px;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,rgba(0,0,0,.55));
  font-size:9px;
  font-weight:900;
  text-align:center;
}
.gpRankingUpdated{
  margin-top:9px;
  color:var(--muted);
  font-size:9px;
  line-height:1.35;
}
.gpRankingContent{padding:16px 24px 24px}
.gpRankingLoading{
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:var(--muted);
  font-size:11px;
}
.gpRankingLoading span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  animation:gpRankingPulse 1.1s ease-in-out infinite;
}
.gpRankingLoading span:nth-child(2){animation-delay:.14s}
.gpRankingLoading span:nth-child(3){animation-delay:.28s}
@keyframes gpRankingPulse{
  0%,100%{opacity:.25;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-5px)}
}
.gpRankingTableWrap{
  max-height:570px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:18px;
  scrollbar-width:thin;
  scrollbar-color:var(--accent) color-mix(in srgb,var(--panel2) 92%,#000);
}
.gpRankingTable{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  color:var(--text);
  font-size:11px;
}
.gpRankingTable th{
  position:sticky;
  top:0;
  z-index:2;
  padding:12px 10px;
  color:var(--strong);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent2) 72%,#090909),#171216);
  font-size:9px;
  font-weight:900;
  letter-spacing:.06em;
  text-align:left;
}
.gpRankingTable td{
  padding:11px 10px;
  border-top:1px solid color-mix(in srgb,var(--border) 58%,transparent);
  background:rgba(255,255,255,.018);
  overflow-wrap:anywhere;
}
.gpRankingTable tbody tr:hover td{background:color-mix(in srgb,var(--accent) 8%,rgba(255,255,255,.025))}
.gpRankingTable th:nth-child(1),.gpRankingTable td:nth-child(1){width:8%;text-align:center}
.gpRankingTable th:nth-child(2),.gpRankingTable td:nth-child(2){width:16%}
.gpRankingTable th:nth-child(3),.gpRankingTable td:nth-child(3){width:22%}
.gpRankingTable th:nth-child(4),.gpRankingTable td:nth-child(4){width:18%}
.gpRankingTable th:nth-child(5),.gpRankingTable td:nth-child(5){width:20%}
.gpRankingTable th:nth-child(6),.gpRankingTable td:nth-child(6){width:16%;text-align:center}
.gpRankingTable a{color:var(--accent);text-decoration:none}
.gpRankingKanji{color:var(--strong)}
.gpRankBadge{
  min-width:35px;
  display:inline-grid;
  place-items:center;
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--accent);
  background:rgba(0,0,0,.42);
  font-size:10px;
  font-weight:900;
}
.gpTotalValue{
  color:var(--gp);
  font-size:14px;
  font-weight:900;
}
.gpTopRank td{
  background:color-mix(in srgb,var(--gp) 8%,rgba(255,255,255,.022));
}
.gpTopRank .gpRankBadge{
  color:#2b2105;
  border-color:#e9d184;
  background:linear-gradient(135deg,#bd8e20,#f7df7e);
  box-shadow:0 0 16px rgba(236,205,104,.18);
}
.gpTopRank .gpTotalValue{color:#f4d66f}



/* ===== V10 REVISIONS ===== */
.largeCardLabel.sectionTitle{
  margin:0 0 6px;
  padding:0;
  border:0;
  min-height:0;
  color:var(--accent);
  font-size:14px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.gpRankingContent{padding:18px 24px 24px}
.gpArena{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.gpRankCard{--gpGlow:rgba(211,173,121,.42);--gpGlow2:rgba(211,173,121,.18);position:relative;overflow:hidden;display:grid;grid-template-columns:126px minmax(0,1fr) 138px;gap:18px;align-items:center;padding:16px 18px;border:1px solid color-mix(in srgb,var(--border) 74%,transparent);border-radius:22px;background:radial-gradient(circle at 16% 50%,var(--gpGlow2),transparent 34%),linear-gradient(145deg,rgba(255,255,255,.04),rgba(5,5,8,.82));box-shadow:0 16px 34px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.02)}
.gpRankCard::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 12%,rgba(255,255,255,.035) 45%,transparent 78%)}
.gpRankCard.dorm-kosei{--gpGlow:rgba(132,145,72,.5);--gpGlow2:rgba(132,145,72,.18)}
.gpRankCard.dorm-tsukiyomi{--gpGlow:rgba(107,150,235,.5);--gpGlow2:rgba(107,150,235,.18)}
.gpRankCard.dorm-yamiyo{--gpGlow:rgba(150,94,182,.54);--gpGlow2:rgba(150,94,182,.18)}
.gpRankCard.isChampion{border-color:rgba(244,214,111,.48);box-shadow:0 20px 42px rgba(0,0,0,.34),0 0 24px rgba(244,214,111,.14)}
.gpRankCard.isChampion .gpRankNo{color:#2f2300;background:linear-gradient(135deg,#bb8c1d,#f7df7e);border-color:#e8cd82}
.gpRankCard.isElite .gpRankNo{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent),0 0 20px var(--gpGlow)}
.gpRankLeft{display:grid;justify-items:center;gap:10px}
.gpRankNo{min-width:70px;min-height:34px;display:grid;place-items:center;padding:7px 12px;border:1px solid var(--border);border-radius:999px;color:var(--accent);background:rgba(0,0,0,.55);font-size:14px;font-weight:900;letter-spacing:.03em}
.gpRankAvatar{position:relative;width:96px;height:114px;display:grid;place-items:center;isolation:isolate}
.gpRankAvatarGlow{position:absolute;inset:12px 8px 4px;border-radius:999px;background:radial-gradient(circle,var(--gpGlow) 0%, color-mix(in srgb,var(--gpGlow) 34%,transparent) 42%, transparent 74%);filter:blur(8px);z-index:0}
.gpRankAvatarImage{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;object-position:50% 16%;background:transparent;filter:drop-shadow(0 12px 20px rgba(0,0,0,.28)) drop-shadow(0 0 12px var(--gpGlow))}
.gpRankAvatar.isFallback span{position:relative;z-index:2;width:92px;height:92px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--border);color:var(--strong);font-size:38px;font-weight:900;background:rgba(0,0,0,.55)}
.gpRankBody{min-width:0}
.gpRankTopline{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.1em}
.gpRankHouse{display:inline-flex;align-items:center;min-height:24px;padding:5px 10px;border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);border-radius:999px;color:var(--accent);background:rgba(0,0,0,.42)}
.gpRankId{color:var(--muted)}
.gpRankName{margin:10px 0 0;color:var(--strong);font-size:22px;font-weight:900;line-height:1;text-transform:uppercase}
.gpRankKanji{margin-top:8px;color:var(--accent);font-size:15px;line-height:1.25}
.gpRankUsername{margin-top:12px;color:var(--muted);font-size:11px}.gpRankUsername a{color:var(--strong);text-decoration:none}
.gpRankScore{display:grid;gap:6px;justify-items:end;align-content:center;text-align:right}
.gpRankScoreLabel{color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.14em}
.gpRankScoreValue{color:var(--gp);font-size:30px;font-weight:900;line-height:1;text-shadow:0 0 16px color-mix(in srgb,var(--gp) 16%,transparent)}
.transcriptPage .pdfSection{margin-top:12px}.transcriptHeader .reportSub{max-width:360px}.transcriptIdentity{margin-top:14px}
.transcriptTable{width:100%;margin-top:8px;border-collapse:collapse;table-layout:fixed}.transcriptTable th,.transcriptTable td{border:1px solid #c9a877}
.transcriptTable th{padding:7px 6px;color:#fff1da;background:#251e19;font-size:7.6px;line-height:1.2;text-align:center}
.transcriptTable td{min-height:34px;padding:8px 8px;background:#fffaf2;color:#2a211a;font-size:9px;line-height:1.35;text-align:center;vertical-align:middle}
.transcriptTable th:nth-child(1),.transcriptTable td:nth-child(1){width:23%}.transcriptTable th:nth-child(2),.transcriptTable td:nth-child(2){width:53%}.transcriptTable th:nth-child(3),.transcriptTable td:nth-child(3){width:24%}
.transcriptLevelCell{font-weight:900}.transcriptSemesterCell{text-align:left}.transcriptMarkCell{color:#8e1118 !important;font-size:12px !important;font-weight:900}
.transcriptSummaryGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.transcriptSummaryCard{min-height:92px;padding:10px 12px;border:1px solid #cba978;border-radius:10px;background:#fffaf2}.transcriptSummaryCard.finalCard{background:linear-gradient(180deg,#fffaf2,#f8efdf);box-shadow:inset 0 0 0 1px rgba(201,168,119,.25)}
.transcriptSummaryLabel{color:#7d6751;font-size:7.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}
.transcriptSummaryValue{margin-top:7px;color:#8e1118;font-size:18px;font-weight:900;line-height:1.1}
.transcriptSummaryNote{margin-top:8px;color:#7a654f;font-size:7.5px;line-height:1.35}
.transcriptRemarks{margin-top:10px}.transcriptSignatures{margin-top:18px}.transcriptSignatures .stampWrap,.transcriptSignatures .stamp{width:74px;height:74px}


/* ===== V11: TRANSCRIPT + GP RANKING PHOTO REVISION ===== */
.gpRankCard{
  grid-template-columns:142px minmax(0,1fr) 138px;
}
.gpRankAvatar{
  position:relative;
  width:122px;
  height:122px;
  display:grid;
  place-items:center;
  isolation:isolate;
}
.gpRankAvatarGlow{
  position:absolute;
  inset:-12px;
  z-index:0;
  border-radius:28px;
  background:radial-gradient(circle,var(--gpGlow) 0%,var(--gpGlow2) 46%,transparent 75%);
  filter:blur(10px);
}
.gpRankHouseWatermark{
  position:absolute;
  inset:9px;
  z-index:1;
  width:104px;
  height:104px;
  object-fit:contain;
  opacity:.17;
  filter:grayscale(.12) drop-shadow(0 0 14px var(--gpGlow));
  pointer-events:none;
}
.gpRankAvatarFrame{
  position:relative;
  z-index:2;
  width:114px;
  height:114px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--gpGlow) 58%,var(--border));
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 35%,var(--gpGlow) 0%,var(--gpGlow2) 42%,rgba(3,3,6,.82) 80%),
    rgba(3,3,6,.9);
  box-shadow:inset 0 0 24px var(--gpGlow2),0 0 18px var(--gpGlow2);
}
.gpRankAvatarImage{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 17%;
  transform:scale(1.17);
  transform-origin:50% 17%;
  background:transparent;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.28));
}
.gpRankAvatarImage.gpBackgroundRemoved{
  mix-blend-mode:normal;
}
.gpRankAvatarImage.gpWhiteBlendFallback{
  mix-blend-mode:multiply;
  filter:brightness(1.3) contrast(1.08) saturate(1.08) drop-shadow(0 10px 14px rgba(0,0,0,.28));
}
.gpRankAvatar.isFallback .gpRankAvatarFrame span{
  position:relative;
  z-index:3;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:var(--strong);
  font-size:38px;
  font-weight:900;
  background:transparent;
}
.gpRankNameButton{
  max-width:100%;
  margin:10px 0 0;
  padding:0;
  border:0;
  color:var(--strong);
  background:transparent;
  font-size:22px;
  font-weight:900;
  line-height:1;
  text-align:left;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .18s ease,text-shadow .18s ease,transform .18s ease;
}
.gpRankNameButton:hover,
.gpRankNameButton:focus-visible{
  color:var(--accent);
  text-shadow:0 0 15px var(--gpGlow);
  transform:translateX(3px);
  outline:none;
}



/* ===== V12: COMPLETE ACADEMIC COVERAGE + NEAT GP CROP + FULL TRANSCRIPT ===== */
.gpRankAvatar{
  width:126px;
  height:126px;
}
.gpRankAvatarFrame{
  width:114px;
  height:114px;
  border-radius:18px;
}
.gpRankAvatarImage{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 17%;
  transform:scale(1.17);
  transform-origin:50% 17%;
}
.gpRankAvatarImage.gpBackgroundRemoved{
  object-fit:fill;
  object-position:center;
  transform:none;
  transform-origin:center;
}
.gpRankHouseWatermark{
  inset:7px;
  width:112px;
  height:112px;
}

.detailedTranscriptPage{
  padding:30px 34px 28px;
}
.detailedTranscriptPage .reportHeader{
  grid-template-columns:68px minmax(0,1fr) 126px;
  gap:12px;
  padding-bottom:11px;
}
.detailedTranscriptPage .reportLogo{
  width:62px;
  height:62px;
}
.detailedTranscriptPage .reportTitle{
  font-size:20px;
}
.transcriptCompactIdentity{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) 74px;
  gap:13px;
  align-items:center;
  margin-top:12px;
  padding:9px 11px;
  border:1px solid #d9b98a;
  border-radius:11px;
  background:rgba(255,255,255,.62);
}
.transcriptCompactPhoto{
  width:72px;
  height:72px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border:1px solid #c8a574;
  border-radius:8px;
  background:#efe6d8;
}
.transcriptCompactPhoto img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 17%;
  transform:scale(1.17);
  transform-origin:50% 17%;
}
.transcriptCompactName{
  color:#8e1118;
  font-size:16px;
  font-weight:900;
  line-height:1.05;
  text-transform:uppercase;
}
.transcriptCompactKanji{
  margin-top:3px;
  color:#7a654f;
  font-size:11px;
}
.transcriptCompactMeta{
  display:flex;
  flex-wrap:wrap;
  gap:5px 14px;
  margin-top:7px;
  color:#6e5b4a;
  font-size:7.4px;
  font-weight:800;
}
.transcriptCompactHouseLogo{
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
}
.transcriptCompactHouseLogo img{
  width:66px;
  height:66px;
  object-fit:contain;
}
.detailedTranscriptPage .pdfSection{
  margin-top:10px;
  padding:6px 9px;
  font-size:8.8px;
}
.transcriptDetailTable{
  width:100%;
  margin-top:7px;
  border-collapse:collapse;
  table-layout:fixed;
}
.transcriptDetailTable th,
.transcriptDetailTable td{
  border:1px solid #c9a877;
}
.transcriptDetailTable th{
  padding:5px 3px;
  color:#fff1da;
  background:#251e19;
  font-size:6.1px;
  line-height:1.15;
  text-align:center;
}
.transcriptDetailTable td{
  height:38px;
  padding:4px 4px;
  background:#fffaf2;
  color:#2a211a;
  font-size:7.2px;
  line-height:1.18;
  text-align:center;
  vertical-align:middle;
  overflow-wrap:anywhere;
}
.transcriptDetailTable th:nth-child(1),
.transcriptDetailTable td:nth-child(1){width:10%}
.transcriptDetailTable th:nth-child(2),
.transcriptDetailTable td:nth-child(2){width:10%}
.transcriptDetailTable th:nth-child(3),
.transcriptDetailTable td:nth-child(3){width:25%;text-align:left}
.transcriptDetailTable th:nth-child(4),
.transcriptDetailTable td:nth-child(4){width:9%}
.transcriptDetailTable th:nth-child(5),
.transcriptDetailTable td:nth-child(5){width:10%}
.transcriptDetailTable th:nth-child(6),
.transcriptDetailTable td:nth-child(6){width:10%}
.transcriptDetailTable th:nth-child(7),
.transcriptDetailTable td:nth-child(7){width:11%}
.transcriptDetailTable th:nth-child(8),
.transcriptDetailTable td:nth-child(8){width:15%}
.transcriptDetailLevel{
  color:#8e1118 !important;
  font-weight:900;
}
.transcriptDetailSemester{
  font-weight:800;
}
.transcriptDetailSubject{
  font-size:6.9px !important;
  font-weight:900;
  text-transform:uppercase;
}
.transcriptDetailNumber{
  color:#8e1118 !important;
  font-size:9.2px !important;
  font-weight:900;
}
.transcriptDetailKanji{
  font-size:8.2px !important;
  font-weight:900;
  white-space:nowrap;
}
.transcriptDetailSummary{
  margin-top:7px;
}
.transcriptDetailSummary .transcriptSummaryCard{
  min-height:76px;
  padding:8px 9px;
}
.transcriptDetailSummary .transcriptSummaryValue{
  margin-top:4px;
  font-size:16px;
}
.transcriptDetailSummary .transcriptSummaryNote{
  margin-top:5px;
  font-size:6.7px;
}
.transcriptDetailSignatures{
  margin-top:8px;
}
.transcriptDetailSignatures .stampWrap,
.transcriptDetailSignatures .stamp{
  width:58px;
  height:58px;
}


/* ===== V13: ORIGINAL GP PHOTO + HOUSE EMBLEM + MERGED TRANSCRIPT CELLS ===== */
.gpRankAvatar{
  width:132px;
  height:132px;
}
.gpRankAvatarGlow{
  inset:-15px;
  border-radius:30px;
  background:
    radial-gradient(circle at 50% 48%,var(--gpGlow) 0%,var(--gpGlow2) 42%,transparent 73%),
    conic-gradient(from 35deg,transparent,var(--gpGlow2),transparent 32%,var(--gpGlow2),transparent 68%);
  filter:blur(9px);
}
.gpRankAvatarFrame{
  width:116px;
  height:116px;
  border:2px solid color-mix(in srgb,var(--gpGlow) 68%,var(--border));
  border-radius:20px;
  background:#f5f3ef;
  box-shadow:
    0 0 0 4px rgba(0,0,0,.32),
    0 0 22px var(--gpGlow2),
    inset 0 0 0 1px rgba(255,255,255,.16);
}
.gpRankAvatarFrame::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  border-radius:18px;
  box-shadow:inset 0 0 18px rgba(0,0,0,.12);
}
.gpRankAvatarImage,
.gpRankAvatarImage.gpBackgroundRemoved,
.gpRankAvatarImage.gpWhiteBlendFallback{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 17%;
  transform:scale(1.17);
  transform-origin:50% 17%;
  background:#fff;
  mix-blend-mode:normal;
  filter:none;
}
.gpRankHouseWatermark{
  inset:5px;
  width:122px;
  height:122px;
  opacity:.12;
  filter:grayscale(.08) drop-shadow(0 0 18px var(--gpGlow));
}
.gpRankHouseBadge{
  position:absolute;
  right:-3px;
  bottom:0;
  z-index:5;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--gpGlow) 70%,var(--border));
  border-radius:14px;
  background:linear-gradient(145deg,rgba(8,8,12,.96),color-mix(in srgb,var(--gpGlow2) 60%,rgba(8,8,12,.94)));
  box-shadow:0 7px 15px rgba(0,0,0,.42),0 0 15px var(--gpGlow2);
}
.gpRankHouseBadge img{
  width:32px;
  height:32px;
  object-fit:contain;
  filter:drop-shadow(0 0 7px var(--gpGlow));
}
.gpRankCard.isChampion .gpRankAvatarFrame{
  border-color:#efd675;
  box-shadow:0 0 0 4px rgba(0,0,0,.32),0 0 28px rgba(239,214,117,.28),inset 0 0 0 1px rgba(255,255,255,.2);
}
.transcriptDetailTable td.transcriptMergedCell{
  vertical-align:middle;
  background:linear-gradient(180deg,#fffaf2,#f5ead9);
  box-shadow:inset -1px 0 0 rgba(142,17,24,.08);
}
.transcriptDetailTable td.transcriptDetailLevel.transcriptMergedCell{
  color:#8e1118 !important;
  font-size:7.6px;
  line-height:1.28;
  letter-spacing:.025em;
}
.transcriptDetailTable td.transcriptDetailSemester.transcriptMergedCell{
  color:#5e4a3a;
  font-size:7.2px;
  line-height:1.3;
}


/* ===== V14: FOUR-TABLE ACADEMIC TRANSCRIPT ===== */
.compactTranscriptPage{
  padding:30px 34px 28px;
}
.compactTranscriptPage .reportHeader{
  grid-template-columns:68px minmax(0,1fr) 126px;
  gap:12px;
  padding-bottom:11px;
}
.compactTranscriptPage .reportLogo{
  width:62px;
  height:62px;
}
.compactTranscriptPage .reportTitle{
  font-size:20px;
}
.compactTranscriptPage .pdfSection{
  margin-top:10px;
  padding:6px 9px;
  font-size:8.8px;
}
.transcriptFourTableGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 12px;
  margin-top:8px;
  align-items:start;
}
.transcriptMiniTable{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.transcriptMiniTable th,
.transcriptMiniTable td{
  border:1px solid #c9a877;
}
.transcriptMiniTable th{
  padding:6px 7px;
  color:#fff1da;
  background:#251e19;
  font-size:7.2px;
  line-height:1.15;
  text-align:center;
  letter-spacing:.035em;
}
.transcriptMiniTable td{
  height:32px;
  padding:5px 7px;
  color:#2a211a;
  background:#fffaf2;
  font-size:7.7px;
  line-height:1.23;
  vertical-align:middle;
}
.transcriptMiniTable th:first-child,
.transcriptMiniTable td:first-child{
  width:79%;
  text-align:left;
}
.transcriptMiniTable th:last-child,
.transcriptMiniTable td:last-child{
  width:21%;
  text-align:center;
}
.transcriptMiniSubject{
  font-family:Georgia,"Noto Sans JP","Times New Roman",serif;
  font-weight:800;
  overflow-wrap:anywhere;
}
.transcriptMiniScore{
  color:#8e1118 !important;
  font-size:10.5px !important;
  font-weight:900;
}
.transcriptMiniEmptyRow td{
  color:transparent;
}
.transcriptBottomGrid{
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:12px;
  margin-top:12px;
  align-items:start;
}
.transcriptResultBlock{
  min-width:0;
}
.transcriptResultHeading{
  padding:7px 10px;
  color:#fff2dc;
  background:#8e1118;
  border-left:6px solid #d6ad72;
  font-size:8.5px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.transcriptResultTable{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.transcriptResultTable th,
.transcriptResultTable td{
  border:1px solid #c9a877;
}
.transcriptResultTable th{
  padding:6px 7px;
  color:#fff1da;
  background:#251e19;
  font-size:7px;
  text-align:center;
}
.transcriptResultTable td{
  height:31px;
  padding:6px 8px;
  color:#2a211a;
  background:#fffaf2;
  font-size:7.8px;
  line-height:1.2;
}
.transcriptResultTable th:first-child,
.transcriptResultTable td:first-child{
  width:72%;
  text-align:left;
}
.transcriptResultTable th:last-child,
.transcriptResultTable td:last-child{
  width:28%;
  text-align:center;
}
.transcriptResultMark{
  color:#8e1118 !important;
  font-size:10.5px !important;
  font-weight:900;
}
.transcriptFormulaNote{
  margin-top:9px;
  padding:8px 10px;
  border:1px solid #c9a877;
  border-radius:8px;
  color:#5f4d3e;
  background:#fffaf2;
  font-size:7.7px;
  line-height:1.35;
}
.transcriptFormulaNote strong{
  color:#8e1118;
}
.compactTranscriptSignatures{
  margin-top:8px;
}
.compactTranscriptSignatures .stampWrap,
.compactTranscriptSignatures .stamp{
  width:56px;
  height:56px;
}



/* ===== V15: TWO-COLUMN SINGLE-PAGE TRANSCRIPT + SHARED REPORT IDENTITY ===== */
.academicDocumentIdentity{
  align-items:center;
}
.academicDocumentIdentity .pdfIdentityDetails{
  min-width:0;
}
.academicIdentityMeta{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
  margin-top:13px;
}
.academicIdentityCard{
  position:relative;
  min-height:64px;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:10px 13px;
  border:1px solid #d1b184;
  border-radius:11px;
  background:
    radial-gradient(circle at 100% 0,rgba(142,17,24,.08),transparent 50%),
    linear-gradient(145deg,#fffdf8,#f6ead8);
  box-shadow:inset 4px 0 0 #8e1118,0 5px 14px rgba(92,61,31,.07);
}
.academicIdentityId{
  justify-content:center;
  flex-direction:column;
  text-align:center;
}
.academicIdentityHouse{
  justify-content:flex-end;
  gap:10px;
  box-shadow:inset -4px 0 0 #8e1118,0 5px 14px rgba(92,61,31,.07);
}
.academicIdentityLabel{
  color:#8e1118;
  font-size:7.4px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.academicIdentityValue{
  margin-top:5px;
  color:#2a211a;
  font-size:12.5px;
  font-weight:900;
  letter-spacing:.035em;
  line-height:1.1;
}
.academicIdentityHouseLogo{
  width:45px;
  height:45px;
  flex:0 0 45px;
  display:grid;
  place-items:center;
}
.academicIdentityHouseLogo .pdfHouseLogoImage{
  width:43px;
  height:43px;
  object-fit:contain;
}
.academicIdentityHouseText{
  min-width:0;
  text-align:right;
}
.academicIdentityHouseName{
  font-size:12px;
  white-space:nowrap;
}

.singlePageTranscript .termMain{
  font-size:12px;
}
.transcriptTwoTableGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:8px;
  align-items:start;
  justify-content:center;
}
.transcriptTwoTableGrid .transcriptMiniTable th,
.transcriptTwoTableGrid .transcriptMiniTable td{
  text-align:center !important;
}
.transcriptTwoTableGrid .transcriptMiniTable th:first-child,
.transcriptTwoTableGrid .transcriptMiniTable td:first-child{
  width:80%;
  text-align:center !important;
}
.transcriptTwoTableGrid .transcriptMiniTable th:last-child,
.transcriptTwoTableGrid .transcriptMiniTable td:last-child{
  width:20%;
  text-align:center !important;
}
.transcriptTwoTableGrid .transcriptMiniTable td{
  height:25px;
  padding:4px 6px;
  font-size:7.25px;
  line-height:1.15;
}
.transcriptTwoTableGrid .transcriptMiniScore{
  font-size:9.8px !important;
}
.transcriptResultTableNoHeader tbody tr:first-child td{
  border-top:1px solid #c9a877;
}
.transcriptDense .transcriptTwoTableGrid{
  gap:10px;
}
.transcriptDense .transcriptTwoTableGrid .transcriptMiniTable th{
  padding:4px 5px;
  font-size:6.5px;
}
.transcriptDense .transcriptTwoTableGrid .transcriptMiniTable td{
  height:20px;
  padding:2px 4px;
  font-size:6.35px;
  line-height:1.05;
}
.transcriptDense .transcriptTwoTableGrid .transcriptMiniScore{
  font-size:8.6px !important;
}
.transcriptVeryDense .transcriptTwoTableGrid .transcriptMiniTable th{
  padding:3px 4px;
  font-size:5.9px;
}
.transcriptVeryDense .transcriptTwoTableGrid .transcriptMiniTable td{
  height:17px;
  padding:1px 3px;
  font-size:5.7px;
  line-height:1;
}
.transcriptVeryDense .transcriptTwoTableGrid .transcriptMiniScore{
  font-size:7.7px !important;
}



/* ===== V16: REFINED SHARED ACADEMIC IDENTITY ===== */
.academicDocumentIdentityV16{
  position:relative;
  min-height:174px;
  display:grid;
  grid-template-columns:126px minmax(0,1fr) 132px;
  gap:18px;
  align-items:stretch;
  overflow:hidden;
  padding:14px;
  border:1px solid #cfac79;
  border-radius:15px;
  background:
    radial-gradient(circle at 0 0,rgba(142,17,24,.10),transparent 34%),
    linear-gradient(135deg,rgba(255,255,255,.94),rgba(248,239,225,.88));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.65),
    0 8px 22px rgba(95,62,31,.08);
}
.academicDocumentIdentityV16::before{
  content:'';
  position:absolute;
  left:14px;
  right:14px;
  top:9px;
  height:2px;
  background:linear-gradient(90deg,transparent,#8e1118 18%,#d5b277 50%,#8e1118 82%,transparent);
  opacity:.78;
}
.academicIdentityPortraitColumn{
  position:relative;
  z-index:2;
  display:grid;
  align-items:center;
}
.academicIdentityPhotoFrame{
  position:relative;
  padding:5px;
  border:1px solid #b9925f;
  border-radius:12px;
  background:linear-gradient(145deg,#2a211a,#6f151b 62%,#c19c68);
  box-shadow:0 7px 16px rgba(71,44,20,.16),inset 0 0 0 1px rgba(255,255,255,.16);
}
.academicIdentityPhoto{
  width:114px;
  height:146px;
  border:1px solid rgba(255,244,224,.72);
  border-radius:8px;
  background:#eee3d4;
}
.academicIdentityPhoto .academicIdentityPhotoImage{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 17%;
  transform:scale(1.17);
  transform-origin:50% 17%;
}
.academicIdentityPortraitCaption{
  display:none;
}
.academicIdentityMain{
  position:relative;
  z-index:2;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:6px 0;
}
.academicIdentityEyebrow{
  color:#8e1118;
  font-size:6.8px;
  font-weight:900;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.academicIdentityNameWrap{
  margin-top:8px;
  padding-bottom:10px;
  border-bottom:1px solid #d9c2a1;
}
.academicIdentityName{
  max-width:100%;
  color:#251e19;
  font-size:21px;
  letter-spacing:.015em;
  line-height:1.02;
  overflow-wrap:anywhere;
}
.academicIdentityKanji{
  margin-top:6px;
  color:#8e1118;
  font-size:13.5px;
  font-weight:700;
}
.academicIdentityIdPlate{
  position:relative;
  overflow:hidden;
  margin-top:12px;
  padding:10px 13px;
  border:1px solid #c7a06b;
  border-radius:10px;
  background:
    linear-gradient(90deg,#251e19 0,#5c171c 58%,#8e1118 100%);
  box-shadow:inset 4px 0 0 #d6ad72,0 5px 12px rgba(79,38,27,.12);
}
.academicIdentityIdPlate::after{
  content:'';
  position:absolute;
  width:88px;
  height:88px;
  right:-32px;
  top:-42px;
  border:1px solid rgba(255,241,218,.15);
  border-radius:50%;
}
.academicIdentityIdPlateLabel{
  color:#d9bd91;
  font-size:6.4px;
  font-weight:900;
  letter-spacing:.13em;
}
.academicIdentityIdPlateValue{
  margin-top:4px;
  color:#fff4e2;
  font-size:13.5px;
  font-weight:900;
  letter-spacing:.075em;
  line-height:1;
}
.academicIdentityHousePanel{
  position:relative;
  z-index:2;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:11px 8px 10px;
  border:1px solid #c6a06d;
  border-radius:13px;
  background:
    radial-gradient(circle at 50% 24%,rgba(142,17,24,.11),transparent 45%),
    linear-gradient(180deg,#fffdf9,#efe0ca);
  box-shadow:inset 0 -5px 0 rgba(142,17,24,.88),0 7px 16px rgba(71,44,20,.10);
}
.academicIdentityHouseWatermark,
.academicIdentityHouseWatermarkImage{
  display:none !important;
}
.academicIdentityHouseCrest{
  position:relative;
  z-index:2;
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  border:1px solid #d1b181;
  border-radius:50%;
  background:rgba(255,255,255,.68);
  box-shadow:0 5px 14px rgba(94,58,24,.13),inset 0 0 0 4px rgba(214,173,114,.13);
}
.academicIdentityHouseCrestImage{
  width:61px;
  height:61px;
  object-fit:contain;
}
.academicIdentityHouseLabel{
  position:relative;
  z-index:2;
  margin-top:8px;
  color:#8e1118;
  font-size:6.3px;
  font-weight:900;
  letter-spacing:.17em;
}
.academicIdentityHouseNameV16{
  position:relative;
  z-index:2;
  margin-top:4px;
  max-width:100%;
  color:#251e19;
  font-size:10.5px;
  font-weight:900;
  letter-spacing:.045em;
  line-height:1.05;
  text-align:center;
  overflow-wrap:anywhere;
}

.academicPageWatermark{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  z-index:4;
  overflow:hidden;
}
.academicPageWatermarkImage{
  width:610px;
  height:610px;
  object-fit:contain;
  opacity:.105;
  filter:grayscale(.92) sepia(.16) contrast(.92);
  mix-blend-mode:multiply;
  transform:none;
  transform-origin:center;
}

/* Keep the footer pinned to the page bottom; watermark layering must not
   convert it into a normal-flow element beside the hanko area. */
.reportPage .pdfFooter,
.transcriptPage .pdfFooter{
  position:absolute;
  left:42px;
  right:42px;
  bottom:18px;
  z-index:6;
  margin:0;
  padding-top:8px;
}
.transcriptSummaryBadge{
  display:flex;
  align-items:center;
  justify-content:center;
}
.transcriptSummaryBadge .termMain{
  font-size:13.5px;
  line-height:1.15;
  letter-spacing:.05em;
}


/* ===== V22: FAST A.R. + FALLING TALISMANS ===== */
.faller.magicalTalisman{
  top:-220px;
  opacity:var(--o,.16);
  animation:fall var(--d,18s) linear var(--delay,0s) infinite;
  filter:drop-shadow(0 0 8px var(--glow)) drop-shadow(0 6px 16px var(--glow));
}
.heroFaller.magicalTalisman{
  top:-150px;
  opacity:.86;
  animation:heroFall var(--d,13s) linear var(--delay,0s) infinite;
  filter:drop-shadow(0 0 8px var(--glow)) drop-shadow(0 5px 14px var(--glow));
}
.faller.magicalTalisman svg,
.heroFaller.magicalTalisman svg{
  overflow:visible;
}
.exactDocumentCaptureHost .pdfPage{
  box-shadow:none!important;
  transform:none!important;
}


/* ===== V33: PREVIEW-LOCKED DOCUMENT EXPORT ===== */
.exactDocumentCaptureHost{
  position:fixed!important;
  left:0!important;
  top:0!important;
  width:816px!important;
  height:1344px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  background:#fbf7ef!important;
}
.exactDocumentCaptureHost .pdfPage{
  position:relative!important;
  left:0!important;
  top:0!important;
  width:816px!important;
  height:1344px!important;
  min-width:816px!important;
  max-width:816px!important;
  min-height:1344px!important;
  max-height:1344px!important;
  margin:0!important;
  transform:none!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
.exactDocumentCaptureHost *,
.exactDocumentCaptureHost *::before,
.exactDocumentCaptureHost *::after{
  animation:none!important;
  transition:none!important;
}


/* =====================================================
   V34 — PREVIEW-MATCHED EXPORT + ACADEMIC SCORE WORDING
   ===================================================== */

/* Transcript body values are left aligned; only column titles stay centered. */
.transcriptTwoTableGrid .transcriptMiniTable th{
  text-align:center !important;
}
.transcriptTwoTableGrid .transcriptMiniTable td,
.transcriptTwoTableGrid .transcriptMiniTable td:first-child,
.transcriptTwoTableGrid .transcriptMiniTable td:last-child{
  text-align:left !important;
}
.transcriptTwoTableGrid .transcriptMiniScore{
  text-align:left !important;
}

/* Match the student-page portrait treatment exactly: cover + 17% top focus + 1.17 zoom. */
.academicIdentityPhoto,
.pdfPhoto{
  overflow:hidden;
}
.academicIdentityPhoto .academicIdentityPhotoImage,
.pdfPhotoImage,
.pdfPhoto img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:50% 17% !important;
  transform:scale(1.17) !important;
  transform-origin:50% 17% !important;
}

/* Capture is now performed from the live preview context; suppress only preview shadow in clone. */
[data-export-capture-id]{
  transform:none;
}

/* =====================================================
   GRADUATED ALUMNI / DEVOTED STUDENT
   ===================================================== */
.badge.graduated{color:#fff0c8;background:linear-gradient(135deg,rgba(142,17,24,.52),rgba(211,173,121,.28));border-color:color-mix(in srgb,var(--accent) 58%,transparent)}
.devotedStudentSemesterCard{box-shadow:inset 3px 0 0 var(--accent),0 0 24px color-mix(in srgb,var(--accent) 8%,transparent)}
.devotedStudentDetails{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:9px;padding:14px}
.devotedStudentField{min-height:70px;padding:11px 12px;border:1px solid var(--border);border-radius:13px;background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--accent) 12%,transparent),transparent 52%),rgba(255,255,255,.025)}
.devotedStudentFieldWide{grid-column:1/-1}
.devotedStudentFieldLabel{color:var(--muted);font-size:8px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.devotedStudentFieldValue{margin-top:7px;color:var(--strong);font-size:12px;line-height:1.45}
.devotedStudentScoreValue{margin-top:5px;color:var(--accent);font-size:25px;font-weight:900}
.devotedStudentFileField{display:flex;flex-direction:column;justify-content:space-between}
.devotedStudentFileButton{min-height:34px;margin-top:8px;border:0;border-radius:10px;color:#111;background:linear-gradient(135deg,var(--accent),var(--strong) 58%,var(--accent2));font-size:8px;font-weight:900;letter-spacing:.06em;cursor:pointer}
.devotedStudentFileButton:hover{filter:brightness(1.08)}
.devotedStudentFileUnavailable{margin-top:10px;color:var(--muted);font-size:9px;font-weight:800}
body.devoted-file-open{overflow:hidden}
.devotedFileModal{position:fixed;inset:0;z-index:16000;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.9);backdrop-filter:blur(12px)}
.devotedFileCard{width:min(1100px,calc(100vw - 48px));height:min(90vh,900px);overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);border:1px solid var(--border);border-radius:24px;background:linear-gradient(145deg,#121013,#050507);box-shadow:0 30px 110px rgba(0,0,0,.75),0 0 42px color-mix(in srgb,var(--accent) 14%,transparent)}
.devotedFileHeader{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 22px;border-bottom:1px solid var(--border)}
.devotedFileEyebrow{color:var(--accent);font-size:8px;font-weight:900;letter-spacing:.16em}
.devotedFileTitle{margin:4px 0 0;color:var(--strong);font-family:"Cinzel",Georgia,serif;font-size:20px}
.devotedFileNotice{margin-top:5px;color:var(--muted);font-size:9px}
.devotedFileClose{min-height:40px;padding:9px 16px;border:1px solid var(--border);border-radius:12px;color:var(--strong);background:rgba(255,255,255,.045);font-size:9px;font-weight:900;cursor:pointer}
.devotedFileViewer{min-height:0;overflow:hidden;display:grid;place-items:center;padding:18px;background:#08080a}
.devotedFileFrame{width:100%;height:100%;border:0;border-radius:14px;background:#fff}
.devotedFileImage{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px}
.devotedFileEmpty{padding:24px;color:var(--muted);text-align:center;font-size:12px}


/* =====================================================
   V37 — GRADUATED REFINEMENT / LIFE AFTER GRADUATION
   ===================================================== */
.lifeAfterGraduation{overflow:visible;max-height:none;padding-right:0}
.lifeAfterGraduationCard{position:relative;overflow:hidden;display:grid;grid-template-columns:72px minmax(0,1fr);gap:15px;align-items:center;min-height:112px;padding:18px;border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);border-radius:17px;background:radial-gradient(circle at 0 0,color-mix(in srgb,var(--accent) 18%,transparent),transparent 44%),radial-gradient(circle at 100% 100%,color-mix(in srgb,var(--accent2) 14%,transparent),transparent 48%),linear-gradient(135deg,rgba(255,255,255,.035),rgba(0,0,0,.24));box-shadow:inset 3px 0 0 var(--accent),inset 0 0 26px color-mix(in srgb,var(--accent) 7%,transparent)}
.lifeAfterGraduationCard::after{content:"";position:absolute;right:-26px;top:-38px;width:150px;height:150px;border:1px solid color-mix(in srgb,var(--accent) 14%,transparent);border-radius:50%;box-shadow:0 0 0 18px color-mix(in srgb,var(--accent) 3%,transparent),0 0 0 42px color-mix(in srgb,var(--accent) 2%,transparent);pointer-events:none}
.lifeAfterGraduationSigil{position:relative;z-index:1;width:62px;height:62px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:18px;color:#111;background:linear-gradient(135deg,var(--accent),var(--strong) 58%,var(--accent2));font-family:"Cinzel",Georgia,serif;font-size:14px;font-weight:900;letter-spacing:.05em;box-shadow:0 9px 24px rgba(0,0,0,.32),0 0 20px color-mix(in srgb,var(--accent) 18%,transparent)}
.lifeAfterGraduationContent{position:relative;z-index:1;min-width:0}
.lifeAfterGraduationEyebrow{color:var(--accent);font-size:8px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.lifeAfterGraduationNarrative{margin-top:7px;color:var(--strong);font-family:"Cinzel",Georgia,serif;font-size:12px;font-weight:650;line-height:1.65}

/* Devoted Student: ceremonial final-record presentation. */
.devotedStudentSemesterCard{position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--accent) 44%,transparent);background:radial-gradient(circle at 90% 0,color-mix(in srgb,var(--accent) 15%,transparent),transparent 38%),linear-gradient(145deg,rgba(14,12,17,.96),rgba(4,4,7,.96));box-shadow:inset 3px 0 0 var(--accent),0 12px 34px rgba(0,0,0,.28),0 0 30px color-mix(in srgb,var(--accent) 10%,transparent)}
.devotedStudentSemesterCard .semesterHead{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 11%,transparent),transparent 70%)}
.devotedStudentDetails{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:14px}
.devotedStudentHero{grid-column:1/-1;position:relative;overflow:hidden;display:grid;grid-template-columns:58px minmax(0,1fr) 128px;gap:13px;align-items:center;min-height:104px;padding:14px;border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);border-radius:16px;background:radial-gradient(circle at 0 0,color-mix(in srgb,var(--accent) 20%,transparent),transparent 45%),linear-gradient(135deg,rgba(255,255,255,.045),rgba(0,0,0,.3))}
.devotedStudentHero::after{content:"VII";position:absolute;right:134px;top:-31px;color:color-mix(in srgb,var(--accent) 7%,transparent);font-family:"Cinzel",Georgia,serif;font-size:112px;font-weight:900;line-height:1;pointer-events:none}
.devotedStudentSeal{position:relative;z-index:1;width:54px;height:54px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 65%,transparent);border-radius:50%;background:radial-gradient(circle,var(--strong),var(--accent) 65%,var(--accent2));box-shadow:0 0 22px color-mix(in srgb,var(--accent) 25%,transparent)}
.devotedStudentSeal span{color:#171014;font-family:"Cinzel",Georgia,serif;font-size:15px;font-weight:900}
.devotedStudentHeroCopy{position:relative;z-index:1;min-width:0}
.devotedStudentHeroEyebrow{color:var(--accent);font-size:7px;font-weight:900;letter-spacing:.18em}
.devotedStudentHeroTitle{margin-top:4px;color:var(--strong);font-family:"Cinzel",Georgia,serif;font-size:18px;font-weight:900;letter-spacing:.035em}
.devotedStudentHeroSub{margin-top:5px;color:var(--muted);font-size:9px;line-height:1.45}
.devotedStudentScorePanel{position:relative;z-index:1;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:10px 12px;border-left:1px solid color-mix(in srgb,var(--accent) 30%,transparent);text-align:center}
.devotedStudentScorePanel .devotedStudentScoreValue{margin-top:3px;font-size:31px;line-height:1}
.devotedStudentScoreCaption{margin-top:5px;color:var(--muted);font-size:6.5px;font-weight:900;letter-spacing:.1em}
.devotedStudentField{position:relative;min-height:82px;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center;padding:12px 13px;border:1px solid var(--border);border-radius:14px;background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--accent) 11%,transparent),transparent 52%),rgba(255,255,255,.025)}
.devotedStudentFieldIcon{width:31px;height:31px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);border-radius:9px;color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);font-family:"Noto Sans JP",sans-serif;font-size:13px;font-weight:900}
.devotedStudentFieldLabel{color:var(--muted);font-size:7.5px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.devotedStudentFieldValue{margin-top:6px;color:var(--strong);font-size:11.5px;line-height:1.5}
.devotedStudentTitleValue{font-family:"Cinzel",Georgia,serif;font-weight:700}
.devotedStudentKoronField{grid-column:1/-1;display:flex;min-height:70px;flex-direction:row;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px}
.devotedStudentKoronField::before{content:"論";width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);border-radius:10px;color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);font-family:"Noto Sans JP",sans-serif;font-size:14px;font-weight:900}
.devotedStudentKoronField .devotedStudentFieldLabel{margin-right:auto}
.devotedStudentFileButton{min-width:150px;min-height:36px;margin-top:0;padding:0 14px;border:0;border-radius:10px;color:#111;background:linear-gradient(135deg,var(--accent),var(--strong) 58%,var(--accent2));font-size:8px;font-weight:900;letter-spacing:.07em;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.26),0 0 16px color-mix(in srgb,var(--accent) 13%,transparent)}
.devotedStudentFileUnavailable{margin-top:0;color:var(--muted);font-size:8px;font-weight:800}

/* =====================================================
   V38 — GRADUATED WIDE LAYOUT / DEVOTED STUDENT TYPOGRAPHY
   ===================================================== */

/* Only GRADUATED profiles use this third, full-width grid row. */
.graduatedWideSections{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr;
  gap:11px;
  min-width:0;
}
.graduatedWideSections.hidden{display:none!important}
.graduatedWideSections>.infoCard{
  width:100%;
  min-width:0;
  grid-column:auto;
}
.graduatedWideSections .lifeAfterGraduationCard{
  grid-template-columns:86px minmax(0,1fr);
  min-height:124px;
  padding:20px 24px;
}
.graduatedWideSections .lifeAfterGraduationSigil{
  width:68px;
  height:68px;
}
.graduatedWideSections .lifeAfterGraduationNarrative{
  max-width:980px;
  font-family:"League Spartan",Arial,sans-serif;
  font-size:14px;
  font-weight:650;
  line-height:1.65;
}
.graduatedWideSections .academicRecords{
  max-height:980px;
}

/* The point-log panel is removed only while a GRADUATED profile is active. */
.resultGrid.graduatedLayout .rightColumn{
  align-self:start;
}
.resultGrid.graduatedLayout #studentPointPanel{
  display:none!important;
}

/* Devoted Student uses one consistent Latin typeface for all copy/content. */
.devotedStudentDetails,
.devotedStudentHeroCopy,
.devotedStudentScorePanel,
.devotedStudentField,
.devotedStudentFieldLabel,
.devotedStudentFieldValue,
.devotedStudentHeroEyebrow,
.devotedStudentHeroTitle,
.devotedStudentHeroSub,
.devotedStudentScoreValue,
.devotedStudentScoreCaption,
.devotedStudentFileButton,
.devotedStudentFileUnavailable{
  font-family:"League Spartan",Arial,sans-serif;
}
.devotedStudentTitleValue{
  font-family:"League Spartan",Arial,sans-serif;
  font-weight:700;
}

/* 専 replaces the previous Roman-numeral VII ceremonial mark. */
.devotedStudentHero::after{
  content:"専";
  font-family:"Noto Sans JP","League Spartan",sans-serif;
}
.devotedStudentSeal span{
  font-family:"Noto Sans JP","League Spartan",sans-serif;
  font-size:22px;
  line-height:1;
}



/* =====================================================
   V39 — DEVOTED SCORE SINGLE-LINE / LIVE PREVIEW EXPORT
   ===================================================== */
/* Give the score block more horizontal room in the GRADUATED academic card. */
.devotedStudentHero{
  grid-template-columns:58px minmax(0,1fr) 190px;
  gap:10px;
}
.devotedStudentScorePanel{
  margin-left:-3px;
  padding-left:9px;
  padding-right:8px;
}
.devotedStudentScorePanel .devotedStudentFieldLabel{
  white-space:nowrap;
  font-size:7.5px;
  letter-spacing:.055em;
}

/* =====================================================
   V40 — EXACT DOCUMENT CAPTURE / KŌRON COVER
   ===================================================== */

.exactLiveCapturePortal{
  position:fixed!important;
  left:0!important;
  top:0!important;
  z-index:11000!important;
  width:816px!important;
  height:1344px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  pointer-events:none!important;
  background:transparent!important;
}
.exactLiveCaptureViewport{
  width:816px!important;
  height:1344px!important;
  min-width:816px!important;
  min-height:1344px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  background:transparent!important;
}
.exactLiveCapturePages{
  display:block!important;
  width:816px!important;
  min-width:816px!important;
  height:1344px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
.exactLiveCapturePages .pdfPage{
  position:relative!important;
  left:0!important;
  top:0!important;
  width:816px!important;
  height:1344px!important;
  min-width:816px!important;
  max-width:816px!important;
  min-height:1344px!important;
  max-height:1344px!important;
  margin:0!important;
  transform:none!important;
  box-shadow:none!important;
}

/* Kōron cover is shown first only when column P has a value. */
.devotedFileViewer.hasKoronCover{
  display:block;
  overflow:auto;
  padding:18px;
  background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--accent) 10%,transparent),transparent 34%),#08080a;
  scrollbar-width:thin;
  scrollbar-color:var(--accent) #111;
}
.devotedKoronPreviewSection{width:min(960px,100%);margin:0 auto}
.devotedKoronPreviewSection+.devotedKoronPreviewSection{margin-top:20px}
.devotedKoronPreviewLabel{margin-bottom:9px;color:var(--accent);font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.devotedKoronCoverCanvas{min-height:360px;display:grid;place-items:center;padding:18px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(0,0,0,.38));box-shadow:inset 0 0 30px color-mix(in srgb,var(--accent) 7%,transparent)}
.devotedKoronCoverImage{display:block;max-width:100%;max-height:720px;object-fit:contain;border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.42)}
.devotedKoronContentCanvas{width:100%;height:720px;overflow:hidden;display:grid;place-items:center;border:1px solid var(--border);border-radius:16px;background:#08080a}
.devotedFileViewer:not(.hasKoronCover) .devotedKoronContentSection{width:100%;height:100%}
.devotedFileViewer:not(.hasKoronCover) .devotedKoronContentCanvas{width:100%;height:100%;border:0}

/* =====================================================
   V41 — NATIVE CHROMIUM EXPORT
   ===================================================== */
.browserNativeCaptureOverlay{position:fixed!important;inset:0!important;z-index:2147483646!important;overflow:hidden!important;pointer-events:none!important;background:#fbf7ef!important}
.browserNativeCaptureViewport{position:absolute!important;inset:0!important;width:100vw!important;height:100vh!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;background:#fbf7ef!important}
.browserNativeCapturePages{position:absolute!important;inset:0!important;display:block!important;width:100vw!important;height:100vh!important;min-width:0!important;margin:0!important;padding:0!important;overflow:hidden!important}
.browserNativeCaptureStage{position:absolute!important;left:0;top:0;width:816px;height:1344px;margin:0!important;padding:0!important;transform-origin:0 0;will-change:left,top,transform}
.browserNativeCaptureStage>.pdfPage{width:816px!important;height:1344px!important;min-width:816px!important;max-width:816px!important;min-height:1344px!important;max-height:1344px!important;margin:0!important;box-shadow:none!important}


/* =====================================================
   V44 — PREVIEW-LOCKED DOM EXPORT HARDENING
   Keeps PDF/PNG capture in the same 816 x 1344 layout as Document Review.
   The live preview is never moved or transformed during export.
   ===================================================== */
.exactDocumentCaptureHost{
  position:fixed!important;
  left:-20000px!important;
  top:0!important;
  z-index:-2147483640!important;
  display:block!important;
  width:816px!important;
  min-width:816px!important;
  max-width:816px!important;
  height:1344px!important;
  min-height:1344px!important;
  max-height:1344px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  background:#fbf7ef!important;
}
.exactDocumentCaptureHost>.pdfPage{
  position:relative!important;
  left:0!important;
  top:0!important;
  width:816px!important;
  min-width:816px!important;
  max-width:816px!important;
  height:1344px!important;
  min-height:1344px!important;
  max-height:1344px!important;
  margin:0!important;
  transform:none!important;
  transform-origin:0 0!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
.exactDocumentCaptureHost,
.exactDocumentCaptureHost *,
.exactDocumentCaptureHost *::before,
.exactDocumentCaptureHost *::after{
  animation:none!important;
  transition:none!important;
  caret-color:transparent!important;
}


/* v45: automatic live-preview export captures the original .pdfPage DOM; no screen/tab permission flow. */


/* V46 export engine: browser-native SVG foreignObject snapshot. No layout CSS changes required. */

/* V47: PDF/PNG are automatic capture downloads; print fallback removed. */
.documentReviewActions{flex-wrap:wrap;justify-content:flex-end}


/* =====================================================
   V48 — CINEMATIC WEBSITE ARTWORK + STRONGER TYPOGRAPHY
   Pure presentation layer. Data, academic logic, and V47 PDF/PNG auto-capture
   remain untouched.
   ===================================================== */

/* Wider desktop canvas gives the larger typography room without adding rows. */
:root{--w:1320px}
html,body{min-width:1380px}

/*
 * Global website artwork. The image is deliberately placed under the existing
 * magical falling ornaments, panels, glows and theme gradients. The vertical
 * gradient makes the artwork strongest near the top and elegantly dissolves
 * into the darker database area below.
 */
body{
  background-image:
    linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.36) 28%,rgba(3,3,5,.76) 64%,var(--bg1) 100%),
    radial-gradient(circle at 6% 0%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 31%),
    radial-gradient(circle at 94% 15%,color-mix(in srgb,var(--accent2) 20%,transparent),transparent 29%),
    url("https://drive.google.com/thumbnail?id=18fTv3YxLCCGOQtjWDNyVTXWb0jHvhlc1&sz=w2400"),
    linear-gradient(145deg,var(--bg1),#050505 55%,var(--bg2));
  background-size:100% 100%,auto,auto,cover,100% 100%;
  background-position:center top,6% 0,94% 15%,center top,center;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  background-attachment:fixed,fixed,fixed,fixed,fixed;
}

/* Keep every existing animated ornament visible above the global artwork. */
.backdrop{z-index:0}
.shell{z-index:2}

/* Header feature artwork: one slot, automatically swapped by the existing
   body theme classes when a KSI / TSY / YMY student database is opened. */
.heroFeatureArt{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  border-radius:inherit;
  opacity:.72;
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.90) 0%,rgba(0,0,0,.40) 26%,rgba(0,0,0,.18) 52%,rgba(0,0,0,.54) 78%,rgba(0,0,0,.88) 100%),
    linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.48)),
    url("https://drive.google.com/thumbnail?id=1IuFDUcGJBLbRMFCWwH9a5gfnkhZM1mti&sz=w2400");
  background-size:cover,cover,cover;
  background-position:center,center,center;
  background-repeat:no-repeat;
  filter:saturate(1.06) contrast(1.05);
  transform:scale(1.015);
}
body.dorm-kosei .heroFeatureArt{
  background-image:
    linear-gradient(90deg,rgba(3,6,3,.91) 0%,rgba(5,8,4,.42) 28%,rgba(5,8,4,.16) 55%,rgba(5,8,4,.50) 80%,rgba(3,5,3,.91) 100%),
    linear-gradient(180deg,rgba(4,7,3,.08),rgba(4,6,3,.52)),
    url("https://drive.google.com/thumbnail?id=1KJiRkV957u2OvAXbXWc1MDGXLKhDhcEv&sz=w2400");
}
body.dorm-tsukiyomi .heroFeatureArt{
  background-image:
    linear-gradient(90deg,rgba(2,4,10,.92) 0%,rgba(4,7,17,.43) 28%,rgba(7,7,20,.16) 55%,rgba(13,5,16,.49) 80%,rgba(4,2,9,.92) 100%),
    linear-gradient(180deg,rgba(3,5,12,.08),rgba(9,4,13,.52)),
    url("https://drive.google.com/thumbnail?id=1AXd7izgJikFHpDOTgLtK3HWfFPhRqrkC&sz=w2400");
}
body.dorm-yamiyo .heroFeatureArt{
  background-image:
    linear-gradient(90deg,rgba(3,1,5,.93) 0%,rgba(8,3,12,.44) 28%,rgba(12,5,18,.16) 55%,rgba(9,3,14,.50) 80%,rgba(2,1,4,.93) 100%),
    linear-gradient(180deg,rgba(8,3,13,.08),rgba(5,2,8,.54)),
    url("https://drive.google.com/thumbnail?id=1wRFGvZGcA05iAMgq5h0gvQcMmudWkk7_&sz=w2400");
}

/* Existing hero layers stay on top, so no logo, ornament, button or content
   is removed. The artwork remains atmospheric rather than obstructive. */
.hero{min-height:470px}
.heroBackdrop{z-index:1}
.heroContent{z-index:3;width:790px}
.heroCore{width:650px}

/* LIFE AFTER GRADUATION — artwork revealed toward the right edge. */
.lifeAfterGraduationCard,
.graduatedWideSections .lifeAfterGraduationCard{
  background-image:
    linear-gradient(90deg,rgba(5,5,8,.97) 0%,rgba(5,5,8,.92) 30%,rgba(5,5,8,.72) 57%,rgba(5,5,8,.28) 82%,rgba(5,5,8,.14) 100%),
    radial-gradient(circle at 0 0,color-mix(in srgb,var(--accent) 21%,transparent),transparent 45%),
    url("https://drive.google.com/thumbnail?id=1hbt9ake1iC7p6C9iOGpX8A16HpfBGHfN&sz=w2200");
  background-size:cover,cover,cover;
  background-position:center,right center,right center;
  background-repeat:no-repeat;
  box-shadow:inset 3px 0 0 var(--accent),inset 0 0 34px color-mix(in srgb,var(--accent) 10%,transparent),0 16px 38px rgba(0,0,0,.28);
}
.lifeAfterGraduationCard::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 6%,transparent),transparent 45%,color-mix(in srgb,var(--accent2) 7%,transparent));
}

/* DEVOTED STUDENT — ceremonial artwork across the whole section while every
   existing field remains readable above translucent surfaces. */
.devotedStudentSemesterCard{
  background-image:
    linear-gradient(108deg,rgba(7,6,9,.98) 0%,rgba(7,6,9,.91) 34%,rgba(7,6,9,.68) 63%,rgba(7,6,9,.34) 100%),
    radial-gradient(circle at 12% 0,color-mix(in srgb,var(--accent) 18%,transparent),transparent 40%),
    url("https://drive.google.com/thumbnail?id=1K-2TytITfiC3OysGOO_1L5yn4iRGiAsT&sz=w2200");
  background-size:cover,cover,cover;
  background-position:center,center,center;
  background-repeat:no-repeat;
  box-shadow:inset 3px 0 0 var(--accent),0 16px 42px rgba(0,0,0,.34),0 0 34px color-mix(in srgb,var(--accent) 12%,transparent);
}
.devotedStudentSemesterCard .semesterHead{
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 16%,rgba(4,4,7,.86)),rgba(4,4,7,.50) 72%,rgba(4,4,7,.22));
  backdrop-filter:blur(3px);
}
.devotedStudentHero{
  background:linear-gradient(110deg,rgba(7,7,10,.78),rgba(7,7,10,.46) 58%,rgba(7,7,10,.26));
  backdrop-filter:blur(2px);
}
.devotedStudentField{
  background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--accent) 13%,transparent),transparent 52%),rgba(8,8,11,.70);
  backdrop-filter:blur(3px);
}

/* =====================================================
   V48 — TYPOGRAPHY SCALE-UP
   Larger but still single-line friendly. The main grid is widened instead of
   forcing cards onto additional rows.
   ===================================================== */
.resultGrid{grid-template-columns:760px 540px;gap:20px}

.eyebrow{font-size:19px}
.mainTitle{font-size:64px;letter-spacing:2.4px}
.heroNote{font-size:14.5px}
.statusLine{font-size:13px}
.searchBar{grid-template-columns:1fr 172px}
.searchBar input{font-size:16px}
.searchBar button{font-size:13px}
.recapButton{font-size:11px}

.sectionTitle,.largeCardLabel.sectionTitle{font-size:15.5px}
.profileHeader{grid-template-columns:124px minmax(0,1fr) 106px;gap:24px}
.avatar{width:124px;height:124px}
.crest{width:106px;height:124px}
.crest img{width:78px;height:78px}
.crestName{font-size:10.5px}
.studentName{font-size:31px}
.studentKanji{font-size:19px}
.badge{font-size:10.5px;min-height:30px;padding:6px 11px}
.label{font-size:11.5px}
.value{font-size:18px}
.financeValue{font-size:35px}
.workplace{font-size:13.5px}
.position{font-size:18px}
.empty{font-size:14px}

.academicIntro{font-size:12.5px}
.count,.transcriptButton{font-size:9.5px;padding:8px 12px}
.semesterTitle{font-size:18px}
.nensei{font-size:10.5px}
.miniTitle{font-size:10px}
.partName{font-size:9px}
.partState{font-size:9px}
.subjectHeader{font-size:9px}
.subjectRow{grid-template-columns:minmax(0,1fr) 96px 128px}
.subjectName{font-size:12.5px}
.mark{font-size:13.5px}
.mark.numberMark{font-size:14.5px}
.mark.kanjiMark{font-size:13.5px}
.outcomeLabel{font-size:9px}
.outcomeValue{font-size:12.5px}
.reportButton{font-size:10px}

.semesterBadge{font-size:10.5px;max-width:220px}
.semesterNote{font-size:13.5px}
.totalLabel{font-size:10.5px}
.totalValue{font-size:39px}
.logBar{font-size:12px}
.logItem{grid-template-columns:140px minmax(0,1fr)}
.logDate{font-size:12px}
.logDesc{font-size:15.5px}
.chip{font-size:12px}
.footer{font-size:13px}

/* Graduated typography */
.graduatedWideSections .lifeAfterGraduationEyebrow{font-size:10px}
.graduatedWideSections .lifeAfterGraduationNarrative{max-width:1120px;font-size:16px;line-height:1.7}
.devotedStudentHeroEyebrow{font-size:8.5px}
.devotedStudentHeroTitle{font-size:21px}
.devotedStudentHeroSub{font-size:11px}
.devotedStudentFieldLabel{font-size:9px}
.devotedStudentFieldValue{font-size:13.5px}
.devotedStudentScorePanel .devotedStudentFieldLabel{font-size:8.5px}
.devotedStudentScorePanel .devotedStudentScoreValue{font-size:34px}
.devotedStudentScoreCaption{font-size:7.5px}
.devotedStudentFileButton{font-size:9.5px;min-width:170px}
.devotedStudentFileUnavailable{font-size:9.5px}

/* GP ranking readability */
.gpRankingEyebrow{font-size:11px}
.gpRankingTitle{font-size:28px}
.gpRankingDisclaimer{font-size:12.5px;max-width:830px}
.gpRankingSemester{font-size:10.5px}
.gpRankingUpdated{font-size:10.5px}
.gpRankingLoading{font-size:12.5px}
.gpRankTopline{font-size:10px}
.gpRankName{font-size:24px}
.gpRankKanji{font-size:16.5px}
.gpRankUsername{font-size:12.5px}
.gpRankScoreLabel{font-size:10px}
.gpRankScoreValue{font-size:33px}

/* Modal / recap readability */
.modalTitle{font-size:22px}
.modalSubtitle{font-size:12.5px}
.modalButtons button{font-size:12px}
.summaryLabel{font-size:10.5px}
.summaryValue{font-size:26px}
.recapTable{font-size:12.5px}
.recapTable th{font-size:10.5px}

/* Preserve compactness on the already dense right column. */
.rightColumn .sectionHeader{grid-template-columns:max-content 220px}


/* V48 readability polish for the existing GENERAL dropdown. */
.generalMenuChevron{font-size:14px}
.generalMenuItemTitle{font-size:12.5px}
.generalMenuItemText{font-size:10.5px;line-height:1.45}


/* =====================================================
   V49 — CROSS-BROWSER TYPOGRAPHY LOCK
   Prevents browser text autosizing / synthetic font changes while preserving
   the V48 layout, artwork, animations, and V47 automatic PDF/PNG capture.
   ===================================================== */
html{
  font-size:16px;
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  font-size:16px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  font-optical-sizing:none;
  font-kerning:normal;
  font-synthesis:none;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
*,*::before,*::after{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  font-synthesis:none;
}
button,input,textarea,select,a{
  font-family:inherit;
  font-optical-sizing:none;
  font-synthesis:none;
}
.jp,
.studentKanji,
.mark.kanjiMark,
.devotedStudentFieldIcon{
  font-family:"Noto Sans JP",Arial,sans-serif;
  font-optical-sizing:none;
  font-synthesis:none;
}
.mainTitle,
.devotedStudentHeroTitle,
.devotedStudentTitleValue,
.documentReviewTitle{
  font-optical-sizing:none;
  font-synthesis:none;
}

/* Keep the dense desktop composition deterministic across Chromium, Firefox,
   Safari and Edge. All dimensions remain explicit pixels and the browser is
   prevented from enlarging text independently of its containers. */
.shell,.hero,.resultGrid,.rightColumn,.panel,.infoGrid,.academicRecords,
.gpRankingSection,.graduatedWideSections,.lifeAfterGraduationCard,
.devotedStudentSemesterCard{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* =====================================================
   V50 — VISUAL REFINEMENT / TRUE FONT SCALE-UP
   2026-07-20
   - Global artwork is now fully revealed toward the BOTTOM.
   - Dorm pages receive a color-only tint; the artwork itself stays sharp.
   - Header artwork is lowered while the interface content is lifted slightly,
     keeping portrait faces away from the central title/search composition.
   - LIFE AFTER GRADUATION (Life Path) and DEVOTED STUDENT are redesigned.
   - Website typography is visibly larger and locked against browser autosizing.
   - No data, academic, graduated, PDF or PNG logic is changed.
   ===================================================== */

:root{
  --w:1380px;
  --pageDormTint:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0));
}

body.front-mode{
  --pageDormTint:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0));
}
body.dorm-kosei{
  --pageDormTint:linear-gradient(180deg,rgba(116,127,62,.025) 0%,rgba(116,127,62,.075) 42%,rgba(116,127,62,.13) 72%,rgba(217,191,135,.15) 100%);
}
body.dorm-tsukiyomi{
  --pageDormTint:linear-gradient(180deg,rgba(97,139,216,.025) 0%,rgba(97,139,216,.07) 42%,rgba(97,139,216,.12) 72%,rgba(224,146,188,.14) 100%);
}
body.dorm-yamiyo{
  --pageDormTint:linear-gradient(180deg,rgba(116,64,135,.025) 0%,rgba(116,64,135,.075) 42%,rgba(116,64,135,.13) 72%,rgba(173,120,199,.14) 100%);
}

/* The previous V49 gradient made the artwork clearest at the top and darkest
   at the bottom. V50 deliberately reverses that relationship: the top remains
   atmospheric/dark, while the complete artwork is increasingly visible below. */
body{
  background-image:
    linear-gradient(180deg,rgba(2,2,4,.96) 0%,rgba(3,3,5,.82) 22%,rgba(3,3,5,.55) 46%,rgba(3,3,5,.24) 70%,rgba(3,3,5,.055) 100%),
    var(--pageDormTint),
    radial-gradient(circle at 6% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 31%),
    radial-gradient(circle at 94% 15%,color-mix(in srgb,var(--accent2) 16%,transparent),transparent 29%),
    url("https://drive.google.com/thumbnail?id=18fTv3YxLCCGOQtjWDNyVTXWb0jHvhlc1&sz=w2400"),
    linear-gradient(145deg,var(--bg1),#050505 55%,var(--bg2));
  background-size:100% 100%,100% 100%,auto,auto,cover,100% 100%;
  background-position:center,center,6% 0,94% 15%,center bottom,center;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  background-attachment:fixed,fixed,fixed,fixed,fixed,fixed;
}

/* =====================================================
   HEADER ARTWORK — FACE-SAFE COMPOSITION
   ===================================================== */
.hero{
  min-height:510px;
}
.heroFeatureArt{
  opacity:.86;
  background-position:center,center,center 24%;
  filter:saturate(1.1) contrast(1.045) brightness(.96);
  transform:scale(1.01);
}
body.dorm-kosei .heroFeatureArt{background-position:center,center,center 23%}
body.dorm-tsukiyomi .heroFeatureArt{background-position:center,center,center 25%}
body.dorm-yamiyo .heroFeatureArt{background-position:center,center,center 23%}

/* A restrained reading veil only around the upper-center interface area.
   The artwork remains visible and sharp; no blur is applied to the image. */
.heroFeatureArt::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 22%,rgba(0,0,0,.56) 0%,rgba(0,0,0,.31) 26%,rgba(0,0,0,.08) 49%,transparent 68%),
    linear-gradient(180deg,rgba(0,0,0,.08),transparent 38%,rgba(0,0,0,.08));
}
.heroContent{
  width:900px;
  transform:translateY(-19px);
}
.heroCore{width:750px}
.logo{margin:-4px auto 1px}

/* Make 魔法所's read as an intentional emblem above the main title. */
.eyebrow{
  width:max-content;
  max-width:100%;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
  padding:7px 19px 8px;
  border:1px solid color-mix(in srgb,var(--accent) 72%,rgba(255,255,255,.20));
  border-radius:999px;
  color:var(--strong);
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 20%,rgba(0,0,0,.72)),rgba(0,0,0,.52)),
    rgba(0,0,0,.42);
  box-shadow:
    0 8px 30px rgba(0,0,0,.34),
    0 0 24px color-mix(in srgb,var(--accent) 34%,transparent),
    inset 0 0 18px color-mix(in srgb,var(--accent) 10%,transparent);
  font-size:25px;
  font-weight:900;
  line-height:1;
  letter-spacing:.18em;
  text-shadow:
    0 2px 3px rgba(0,0,0,.95),
    0 0 9px var(--glow),
    0 0 20px color-mix(in srgb,var(--accent) 45%,transparent);
}
.mainTitle{
  font-size:69px;
  letter-spacing:2.6px;
  text-shadow:0 5px 26px rgba(0,0,0,.48);
}
.searchBar{grid-template-columns:1fr 190px;gap:12px}
.searchBar input{height:58px;font-size:18px}
.searchBar button{font-size:14.5px}
.heroNote{font-size:16px}
.statusLine{font-size:14.5px}
.recapButton{font-size:12.5px}

/* =====================================================
   TRUE WEBSITE FONT SCALE-UP
   The layout is widened at the same time so text can stay horizontal.
   PDF/document typography remains untouched because these selectors are
   limited to the live website UI classes below.
   ===================================================== */
.resultGrid{grid-template-columns:800px 560px;gap:20px}
.panelInner{padding:31px}
.sectionHeader{min-height:62px;padding:17px 26px}
.sectionTitle,.largeCardLabel.sectionTitle{font-size:18px}

.profileHeader{grid-template-columns:132px minmax(0,1fr) 112px;gap:26px;padding-bottom:27px}
.avatar{width:132px;height:132px}
.crest{width:112px;height:132px}
.crest img{width:82px;height:82px}
.crestName{font-size:12px}
.studentName{font-size:36px}
.studentKanji{font-size:22px}
.badge{min-height:32px;padding:6px 12px;font-size:11.5px}
.label{font-size:13px}
.value{font-size:20px}
.financeValue{font-size:40px}
.workplace{font-size:15px}
.position{font-size:20px}
.empty{font-size:15.5px}

.academicIntro{font-size:14px;line-height:1.45}
.count,.transcriptButton{padding:9px 13px;font-size:11px}
.semesterTitle{font-size:20.5px}
.nensei{padding:7px 11px;font-size:12px}
.miniTitle{font-size:11.5px}
.partName,.partState{font-size:10.5px}
.subjectHeader{font-size:10.5px}
.subjectHeader,.subjectRow{grid-template-columns:minmax(0,1fr) 112px 145px;gap:9px}
.subjectName{font-size:14px}
.mark{min-height:34px;font-size:15px}
.mark.numberMark{font-size:16px}
.mark.kanjiMark{font-size:15px}
.outcomeLabel{font-size:10.5px}
.outcomeValue{font-size:14px}
.reportButton{font-size:11.5px}

.semesterBadge{max-width:235px;font-size:12px}
.semesterNote{font-size:15px}
.totalLabel{font-size:12px}
.totalValue{font-size:43px}
.logBar{font-size:13.5px}
.logItem{grid-template-columns:150px minmax(0,1fr)}
.logDate{font-size:13.5px}
.logDesc{font-size:17px}
.chip{font-size:13.5px}
.footer{font-size:14.5px}

/* GP ranking */
.gpRankingEyebrow{font-size:12.5px}
.gpRankingTitle{font-size:31px}
.gpRankingDisclaimer{max-width:900px;font-size:14px}
.gpRankingSemester,.gpRankingUpdated{font-size:12px}
.gpRankingLoading{font-size:14px}
.gpRankTopline{font-size:11.5px}
.gpRankName{font-size:27px}
.gpRankKanji{font-size:18px}
.gpRankUsername{font-size:14px}
.gpRankScoreLabel{font-size:11.5px}
.gpRankScoreValue{font-size:37px}

/* GENERAL + recap/modal */
.generalMenuChevron{font-size:16px}
.generalMenuItemTitle{font-size:14px}
.generalMenuItemText{font-size:12px;line-height:1.45}
.modalTitle{font-size:24px}
.modalSubtitle{font-size:14px}
.modalButtons button{font-size:13px}
.summaryLabel{font-size:12px}
.summaryValue{font-size:29px}
.recapTable{font-size:14px}
.recapTable th{font-size:12px}
.rightColumn .sectionHeader{grid-template-columns:max-content 235px}

/* =====================================================
   GRADUATED — LIFE PATH / LIFE AFTER GRADUATION
   ===================================================== */
.graduatedWideSections #occupationCard{
  padding:22px 24px 24px;
  border-color:color-mix(in srgb,var(--accent) 46%,transparent);
  background:
    radial-gradient(circle at 100% 0,color-mix(in srgb,var(--accent) 14%,transparent),transparent 38%),
    linear-gradient(145deg,rgba(16,15,18,.92),rgba(5,5,8,.95));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--accent) 5%,transparent),
    0 22px 65px rgba(0,0,0,.32);
}
.graduatedWideSections #occupationSectionTitle{
  margin:1px 2px 17px;
  font-size:20px;
  letter-spacing:.12em;
}
.graduatedWideSections .lifeAfterGraduationCard{
  grid-template-columns:94px minmax(0,780px) minmax(240px,1fr);
  gap:22px;
  min-height:182px;
  padding:27px 31px;
  border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);
  border-radius:24px;
  background-image:
    linear-gradient(90deg,rgba(5,5,8,.98) 0%,rgba(5,5,8,.95) 31%,rgba(5,5,8,.78) 51%,rgba(5,5,8,.42) 68%,rgba(5,5,8,.11) 86%,rgba(5,5,8,.025) 100%),
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent 52%,color-mix(in srgb,var(--accent2) 10%,transparent)),
    url("https://drive.google.com/thumbnail?id=1hbt9ake1iC7p6C9iOGpX8A16HpfBGHfN&sz=w2200");
  background-size:cover,cover,cover;
  background-position:center,center,right 36%;
  background-repeat:no-repeat;
  box-shadow:
    inset 5px 0 0 var(--accent),
    inset 0 0 46px color-mix(in srgb,var(--accent) 8%,transparent),
    0 18px 46px rgba(0,0,0,.32);
}
.graduatedWideSections .lifeAfterGraduationCard::before{
  content:"";
  position:absolute;
  left:128px;
  top:26px;
  bottom:26px;
  width:1px;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 52%,transparent),transparent);
  pointer-events:none;
}
.graduatedWideSections .lifeAfterGraduationCard::after{
  content:"LIFE PATH";
  position:absolute;
  right:28px;
  bottom:17px;
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  color:color-mix(in srgb,var(--strong) 17%,transparent);
  background:none;
  box-shadow:none;
  font-family:"Cinzel",Georgia,serif;
  font-size:34px;
  font-weight:900;
  letter-spacing:.12em;
  line-height:1;
  pointer-events:none;
}
.graduatedWideSections .lifeAfterGraduationSigil{
  width:78px;
  height:78px;
  border-radius:50%;
  color:#17110c;
  font-size:17px;
  box-shadow:
    0 11px 28px rgba(0,0,0,.38),
    0 0 28px color-mix(in srgb,var(--accent) 30%,transparent),
    inset 0 0 0 5px rgba(255,255,255,.08);
}
.graduatedWideSections .lifeAfterGraduationContent{
  min-width:0;
  padding:18px 21px;
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(5,5,8,.64),rgba(5,5,8,.34));
  box-shadow:inset 0 0 24px rgba(0,0,0,.18);
}
.graduatedWideSections .lifeAfterGraduationEyebrow{
  font-size:12.5px;
  letter-spacing:.16em;
  text-shadow:0 0 14px color-mix(in srgb,var(--accent) 38%,transparent);
}
.graduatedWideSections .lifeAfterGraduationNarrative{
  max-width:none;
  margin-top:9px;
  font-family:"League Spartan",Arial,sans-serif;
  font-size:18.5px;
  font-weight:650;
  line-height:1.65;
  text-shadow:0 2px 8px rgba(0,0,0,.58);
}

/* =====================================================
   GRADUATED — DEVOTED STUDENT CEREMONIAL REFINEMENT
   ===================================================== */
.devotedStudentSemesterCard{
  border:1px solid color-mix(in srgb,var(--accent) 56%,transparent);
  border-radius:23px;
  background-image:
    linear-gradient(90deg,rgba(6,5,8,.98) 0%,rgba(6,5,8,.94) 28%,rgba(6,5,8,.75) 52%,rgba(6,5,8,.39) 72%,rgba(6,5,8,.10) 90%,rgba(6,5,8,.025) 100%),
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent 52%,color-mix(in srgb,var(--accent2) 10%,transparent)),
    url("https://drive.google.com/thumbnail?id=1K-2TytITfiC3OysGOO_1L5yn4iRGiAsT&sz=w2200");
  background-size:cover,cover,cover;
  background-position:center,center,right center;
  background-repeat:no-repeat;
  box-shadow:
    inset 5px 0 0 var(--accent),
    0 20px 52px rgba(0,0,0,.36),
    0 0 38px color-mix(in srgb,var(--accent) 13%,transparent);
}
.devotedStudentSemesterCard::before{
  content:"";
  position:absolute;
  inset:8px;
  z-index:0;
  border:1px solid color-mix(in srgb,var(--accent) 12%,transparent);
  border-radius:17px;
  pointer-events:none;
}
.devotedStudentSemesterCard>.semesterHead,
.devotedStudentSemesterCard>.devotedStudentDetails{
  position:relative;
  z-index:1;
}
.devotedStudentSemesterCard .semesterHead{
  min-height:66px;
  padding:18px 22px;
  background:linear-gradient(90deg,rgba(5,5,8,.91),rgba(5,5,8,.60) 62%,rgba(5,5,8,.24));
  border-bottom:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  backdrop-filter:none;
}
.devotedStudentSemesterCard .semesterTitle{font-size:22px;letter-spacing:.055em}
.devotedStudentSemesterCard .nensei{font-size:12.5px}
.devotedStudentDetails{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px;
  padding:22px;
}
.devotedStudentHero{
  grid-template-columns:74px minmax(0,1fr) 220px;
  gap:18px;
  min-height:142px;
  padding:20px 22px;
  border:1px solid color-mix(in srgb,var(--accent) 48%,transparent);
  border-radius:21px;
  background:linear-gradient(110deg,rgba(6,6,9,.88),rgba(6,6,9,.63) 58%,rgba(6,6,9,.30));
  box-shadow:inset 0 0 32px color-mix(in srgb,var(--accent) 6%,transparent),0 13px 34px rgba(0,0,0,.24);
  backdrop-filter:none;
}
.devotedStudentHero::after{
  right:226px;
  top:-40px;
  color:color-mix(in srgb,var(--accent) 10%,transparent);
  font-size:144px;
}
.devotedStudentSeal{
  width:68px;
  height:68px;
  box-shadow:0 0 30px color-mix(in srgb,var(--accent) 34%,transparent),inset 0 0 0 5px rgba(255,255,255,.08);
}
.devotedStudentSeal span{font-size:27px}
.devotedStudentHeroEyebrow{font-size:11px;letter-spacing:.19em}
.devotedStudentHeroTitle{margin-top:7px;font-size:27px;letter-spacing:.045em;text-shadow:0 3px 16px rgba(0,0,0,.5)}
.devotedStudentHeroSub{margin-top:7px;font-size:14px;line-height:1.5}
.devotedStudentScorePanel{
  margin-left:0;
  padding:14px 12px 14px 20px;
  border-left:1px solid color-mix(in srgb,var(--accent) 42%,transparent);
}
.devotedStudentScorePanel .devotedStudentFieldLabel{font-size:11px;letter-spacing:.06em}
.devotedStudentScorePanel .devotedStudentScoreValue{margin-top:8px;font-size:43px}
.devotedStudentScoreCaption{margin-top:7px;font-size:9.5px;letter-spacing:.12em}
.devotedStudentField{
  min-height:108px;
  grid-template-columns:43px minmax(0,1fr);
  gap:14px;
  padding:16px 18px;
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  border-radius:17px;
  background:linear-gradient(135deg,rgba(7,7,10,.84),rgba(7,7,10,.62));
  box-shadow:inset 0 0 22px rgba(0,0,0,.14);
  backdrop-filter:none;
}
.devotedStudentFieldIcon{
  width:39px;
  height:39px;
  border-radius:12px;
  font-size:17px;
  box-shadow:0 0 16px color-mix(in srgb,var(--accent) 12%,transparent);
}
.devotedStudentFieldLabel{font-size:11px;letter-spacing:.10em}
.devotedStudentFieldValue{margin-top:7px;font-size:16px;line-height:1.5}
.devotedStudentTitleValue{font-size:16.5px;font-weight:750}
.devotedStudentKoronField{
  min-height:82px;
  padding:15px 18px;
  gap:16px;
}
.devotedStudentKoronField::before{
  width:39px;
  height:39px;
  flex-basis:39px;
  border-radius:12px;
  font-size:17px;
}
.devotedStudentFileButton{
  min-width:190px;
  min-height:42px;
  padding:0 17px;
  font-size:11px;
  border-radius:12px;
}
.devotedStudentFileUnavailable{font-size:11px}

/* =====================================================
   HARD CROSS-BROWSER TEXT LOCK
   ===================================================== */
html,body,*,*::before,*::after{
  -webkit-text-size-adjust:none !important;
  -moz-text-size-adjust:none !important;
  text-size-adjust:none !important;
}
html,body{font-size:16px}
body{
  font-optical-sizing:none;
  font-synthesis:none;
  text-rendering:geometricPrecision;
}


/* =====================================================
   V51 — VISUAL CLARITY / HEADER + ACADEMIC + POINT LOG
   2026-07-20
   - Global background artwork replaced with the new Drive artwork.
   - Dorm color overlay moved to the TOP of the background stack so it is visible.
   - Header UI receives a stronger premium glass hierarchy without hiding artwork.
   - Academic Records are visually separated into clear reading groups.
   - DEVOTED STUDENT score panel gains dedicated contrast and glow.
   - Student Point Log receives a top artwork treatment.
   - No data, academic engine, graduated logic, PDF or PNG logic is changed.
   ===================================================== */

/* =====================================================
   GLOBAL BACKGROUND — NEW ARTWORK + VISIBLE DORM TINT
   ===================================================== */
body.front-mode{
  --pageDormTint:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0));
}
body.dorm-kosei{
  --pageDormTint:linear-gradient(180deg,rgba(116,127,62,.13) 0%,rgba(116,127,62,.17) 42%,rgba(217,191,135,.13) 100%);
}
body.dorm-tsukiyomi{
  --pageDormTint:linear-gradient(180deg,rgba(97,139,216,.13) 0%,rgba(97,139,216,.17) 45%,rgba(224,146,188,.12) 100%);
}
body.dorm-yamiyo{
  --pageDormTint:linear-gradient(180deg,rgba(116,64,135,.14) 0%,rgba(116,64,135,.18) 45%,rgba(173,120,199,.13) 100%);
}
body{
  background-image:
    var(--pageDormTint),
    linear-gradient(180deg,rgba(2,2,4,.94) 0%,rgba(3,3,5,.77) 23%,rgba(3,3,5,.48) 48%,rgba(3,3,5,.20) 72%,rgba(3,3,5,.045) 100%),
    radial-gradient(circle at 6% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 31%),
    radial-gradient(circle at 94% 15%,color-mix(in srgb,var(--accent2) 16%,transparent),transparent 29%),
    url("https://drive.google.com/thumbnail?id=18fTv3YxLCCGOQtjWDNyVTXWb0jHvhlc1&sz=w2400"),
    linear-gradient(145deg,var(--bg1),#050505 55%,var(--bg2));
  background-size:100% 100%,100% 100%,auto,auto,cover,100% 100%;
  background-position:center,center,6% 0,94% 15%,center bottom,center;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  background-attachment:fixed,fixed,fixed,fixed,fixed,fixed;
}

/* =====================================================
   HEADER — STRONGER UI WITHOUT DEFEATING THE ARTWORK
   ===================================================== */
.hero{
  min-height:530px;
  border-color:color-mix(in srgb,var(--accent) 42%,rgba(255,255,255,.08));
  box-shadow:
    0 30px 90px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,255,255,.025),
    inset 0 0 90px color-mix(in srgb,var(--accent) 10%,transparent);
}
.heroFeatureArt{
  opacity:.90;
  filter:saturate(1.12) contrast(1.05) brightness(.98);
}
.heroContent{
  width:930px;
  transform:translateY(-15px);
}
.heroCore{
  position:relative;
  width:790px;
  padding:20px 26px 22px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.10));
  border-radius:27px;
  background:
    linear-gradient(135deg,rgba(5,5,8,.66),rgba(5,5,8,.38) 58%,rgba(5,5,8,.23));
  box-shadow:
    0 24px 62px rgba(0,0,0,.34),
    inset 0 0 32px color-mix(in srgb,var(--accent) 6%,transparent),
    0 0 32px color-mix(in srgb,var(--accent) 9%,transparent);
  backdrop-filter:blur(2px);
}
.heroCore::before{
  content:"";
  position:absolute;
  inset:8px;
  z-index:-1;
  border:1px solid color-mix(in srgb,var(--accent) 10%,transparent);
  border-radius:20px;
  pointer-events:none;
}
.logo{
  width:140px;
  height:140px;
  margin:-7px auto 11px;
  padding:9px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,0,0,.60),rgba(0,0,0,.18) 72%,transparent 73%);
  box-shadow:0 0 34px color-mix(in srgb,var(--accent) 18%,transparent);
}
.logo img{filter:drop-shadow(0 0 20px var(--glow))}
.eyebrow{
  min-height:46px;
  margin-bottom:14px;
  border-color:color-mix(in srgb,var(--accent) 84%,rgba(255,255,255,.22));
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 27%,rgba(0,0,0,.76)),rgba(0,0,0,.62));
  box-shadow:
    0 10px 30px rgba(0,0,0,.38),
    0 0 30px color-mix(in srgb,var(--accent) 42%,transparent),
    inset 0 0 20px color-mix(in srgb,var(--accent) 13%,transparent);
}
.mainTitle{
  margin-bottom:20px;
  font-size:71px;
  filter:drop-shadow(0 4px 13px rgba(0,0,0,.78));
}
.searchBar{
  padding:7px;
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  border-radius:21px;
  background:rgba(0,0,0,.34);
  box-shadow:inset 0 0 20px rgba(0,0,0,.28),0 10px 26px rgba(0,0,0,.22);
}
.searchBar input{
  border-color:color-mix(in srgb,var(--accent) 42%,transparent);
  background:rgba(0,0,0,.79);
}
.searchBar button{
  box-shadow:0 10px 28px rgba(0,0,0,.42),0 0 26px color-mix(in srgb,var(--accent) 22%,transparent);
}
.heroNote{
  margin:16px 8px 0;
  color:color-mix(in srgb,var(--text) 80%,var(--muted));
  text-shadow:0 2px 9px rgba(0,0,0,.86);
}
.recapButtonCorner{
  border-color:color-mix(in srgb,var(--accent) 60%,transparent);
  background:linear-gradient(135deg,rgba(4,4,7,.88),color-mix(in srgb,var(--accent) 12%,rgba(4,4,7,.82)));
  box-shadow:0 10px 26px rgba(0,0,0,.30),inset 0 0 20px color-mix(in srgb,var(--accent) 8%,transparent);
}

/* =====================================================
   ACADEMIC RECORDS — CLEARER READING HIERARCHY
   ===================================================== */
#academicCardPanel{
  padding:20px;
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 38%),
    linear-gradient(145deg,rgba(18,18,22,.92),rgba(5,5,8,.95));
}
#academicCardPanel .academicTop{
  min-height:76px;
  padding:5px 4px 18px;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
}
#academicCardPanel .academicIntro{
  max-width:470px;
  margin-top:5px;
  color:color-mix(in srgb,var(--text) 72%,var(--muted));
}
#academicCardPanel .academicActions{
  gap:10px;
}
.academicRecords{
  gap:18px;
  max-height:1080px;
  margin-top:18px;
  padding:2px 8px 2px 2px;
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard){
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  border-radius:22px;
  background:
    radial-gradient(circle at 100% 0,color-mix(in srgb,var(--accent) 9%,transparent),transparent 36%),
    linear-gradient(145deg,rgba(9,9,13,.96),rgba(4,4,7,.92));
  box-shadow:
    inset 4px 0 0 var(--accent),
    0 14px 34px rgba(0,0,0,.28);
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .semesterHead{
  min-height:66px;
  padding:16px 19px;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,rgba(255,255,255,.025)),rgba(0,0,0,.08));
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .semesterTitle{
  font-size:22px;
  letter-spacing:.045em;
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .nensei{
  min-width:96px;
  text-align:center;
  background:color-mix(in srgb,var(--accent) 12%,rgba(0,0,0,.48));
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .miniTitle{
  width:calc(100% - 34px);
  margin:18px 17px 11px;
  padding:9px 12px;
  border-left:4px solid var(--accent);
  border-radius:9px;
  color:var(--strong);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,rgba(255,255,255,.025)),transparent);
  font-size:12px;
  letter-spacing:.11em;
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .participation{
  gap:10px;
  padding:0 17px 4px;
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .part{
  min-height:68px;
  padding:10px 8px;
  border-color:color-mix(in srgb,var(--accent) 20%,transparent);
  border-radius:14px;
  background:rgba(255,255,255,.022);
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .partName{
  margin-bottom:3px;
  color:color-mix(in srgb,var(--text) 72%,var(--muted));
  font-size:11px;
  font-weight:750;
  letter-spacing:.045em;
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .partState{
  font-size:11px;
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .subjects{
  gap:8px;
  margin:0 17px;
  padding:12px;
  border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
  border-radius:16px;
  background:rgba(0,0,0,.22);
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .subjectHeader{
  min-height:28px;
  padding:0 12px 5px;
  color:color-mix(in srgb,var(--text) 66%,var(--muted));
  font-size:10.5px;
  font-weight:850;
  letter-spacing:.055em;
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .subjectHeader,
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .subjectRow{
  grid-template-columns:minmax(0,1fr) 128px 150px;
  gap:11px;
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .subjectRow{
  min-height:52px;
  padding:9px 11px;
  border-color:color-mix(in srgb,var(--accent) 18%,transparent);
  border-radius:13px;
  background:linear-gradient(90deg,rgba(255,255,255,.027),rgba(255,255,255,.012));
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .subjectRow:nth-child(even){
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 5%,rgba(255,255,255,.02)),rgba(255,255,255,.01));
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .subjectName{
  padding-left:3px;
  font-size:14.5px;
  font-weight:750;
  line-height:1.35;
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .mark{
  min-height:36px;
  border-color:color-mix(in srgb,var(--accent) 24%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,rgba(0,0,0,.32));
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .semesterFoot{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) 170px;
  gap:10px;
  margin-top:16px;
  padding:15px 17px 17px;
  border-top:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
  background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(0,0,0,.20));
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .outcome{
  min-height:60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:10px 12px;
  border-color:color-mix(in srgb,var(--accent) 22%,transparent);
  background:rgba(0,0,0,.20);
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .outcomeLabel{
  margin-bottom:3px;
  font-size:10.5px;
  letter-spacing:.06em;
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .outcomeValue{
  margin-top:3px;
  font-size:14px;
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .reportButton{
  min-height:60px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 9px 22px rgba(0,0,0,.28),0 0 18px color-mix(in srgb,var(--accent) 12%,transparent);
}

/* =====================================================
   DEVOTED STUDENT — SCORE MUST WIN AGAINST BACKGROUND
   ===================================================== */
.devotedStudentScorePanel{
  position:relative;
  overflow:hidden;
  min-height:112px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:16px 18px!important;
  border:1px solid color-mix(in srgb,var(--accent) 72%,rgba(255,255,255,.14));
  border-left:5px solid var(--accent)!important;
  border-radius:17px;
  background:
    radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 52%),
    linear-gradient(145deg,rgba(2,2,4,.96),rgba(8,7,10,.89));
  box-shadow:
    0 12px 30px rgba(0,0,0,.42),
    0 0 27px color-mix(in srgb,var(--accent) 26%,transparent),
    inset 0 0 24px color-mix(in srgb,var(--accent) 9%,transparent);
}
.devotedStudentScorePanel::before{
  content:"SCORE";
  position:absolute;
  right:10px;
  top:8px;
  color:color-mix(in srgb,var(--accent) 11%,transparent);
  font-family:"Cinzel",Georgia,serif;
  font-size:32px;
  font-weight:900;
  letter-spacing:.08em;
  pointer-events:none;
}
.devotedStudentScorePanel .devotedStudentFieldLabel{
  position:relative;
  z-index:1;
  color:var(--accent);
  font-size:11.5px;
  text-shadow:0 2px 6px rgba(0,0,0,.88);
}
.devotedStudentScorePanel .devotedStudentScoreValue{
  position:relative;
  z-index:1;
  margin-top:8px;
  color:var(--strong);
  font-size:50px;
  font-weight:950;
  line-height:.95;
  text-shadow:
    0 3px 7px rgba(0,0,0,.98),
    0 0 17px color-mix(in srgb,var(--accent) 56%,transparent),
    0 0 32px color-mix(in srgb,var(--accent) 26%,transparent);
}
.devotedStudentScoreCaption{
  position:relative;
  z-index:1;
  color:color-mix(in srgb,var(--text) 75%,var(--muted));
  font-size:10px;
}

/* =====================================================
   STUDENT POINT LOG — TOP ARTWORK
   ===================================================== */
#studentPointPanel{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 42%),
    linear-gradient(145deg,var(--panel),var(--panel2));
}
#studentPointPanel::before{
  content:"";
  position:absolute;
  z-index:0;
  left:0;
  right:0;
  top:0;
  height:285px;
  pointer-events:none;
  background-image:url("https://drive.google.com/thumbnail?id=1Zjh2vTq4QhYOOv3LvWkz7T3JeAfrI7-q&sz=w1800");
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  opacity:.48;
  filter:saturate(1.08) contrast(1.04);
}
#studentPointPanel::after{
  content:"";
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  top:0;
  height:310px;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,4,7,.27) 0%,rgba(4,4,7,.43) 52%,rgba(4,4,7,.88) 88%,rgba(4,4,7,.98) 100%),
    linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent 58%);
}
#studentPointPanel>.sectionHeader,
#studentPointPanel>.semesterNote,
#studentPointPanel>.totals,
#studentPointPanel>.logBar,
#studentPointPanel>.pointLogs{
  position:relative;
  z-index:2;
}
#studentPointPanel>.sectionHeader{
  background:linear-gradient(90deg,rgba(4,4,7,.70),rgba(4,4,7,.36));
  backdrop-filter:blur(1px);
}
#studentPointPanel>.semesterNote{
  margin-top:14px;
  padding:9px 14px;
  border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
  border-radius:12px;
  background:rgba(0,0,0,.34);
  text-shadow:0 2px 7px rgba(0,0,0,.88);
}
#studentPointPanel>.totals{
  padding-top:16px;
}
#studentPointPanel .total{
  border-color:color-mix(in srgb,var(--accent) 26%,transparent);
  background:linear-gradient(145deg,rgba(5,5,8,.78),rgba(5,5,8,.58));
  box-shadow:inset 4px 0 0 currentColor,0 10px 24px rgba(0,0,0,.20);
  backdrop-filter:blur(2px);
}
#studentPointPanel>.logBar{
  margin-top:3px;
  padding-top:12px;
  background:linear-gradient(180deg,rgba(4,4,7,.14),rgba(4,4,7,.72));
}

/* Preserve point-type accent rails after the V51 artwork treatment. */
#studentPointPanel .total.gp{box-shadow:inset 4px 0 0 var(--gp),0 10px 24px rgba(0,0,0,.20)}
#studentPointPanel .total.rp{box-shadow:inset 4px 0 0 var(--rp),0 10px 24px rgba(0,0,0,.20)}
#studentPointPanel .total.fhp{box-shadow:inset 4px 0 0 var(--fhp),0 10px 24px rgba(0,0,0,.20)}


/* =====================================================
   V52 — VERTICAL HEADER BALANCE / GLASS RECORDS / GRADUATED ARCHIVE
   2026-07-20
   - Header content is vertically re-centered without changing its structure.
   - Header logo loses the circular backing and gains a stronger free glow.
   - NENSEI badges receive stronger visual priority.
   - Academic Records and Student Point Log use lighter translucent glass.
   - GRADUATED profile sections are visually unified as one ceremonial archive.
   - No data, academic, graduated, PDF or PNG logic is changed.
   ===================================================== */

/* 1) HEADER CONTENT — TRUE VERTICAL CENTERING */
.hero{
  align-items:center;
}
.heroContent{
  transform:translateY(10px);
}

/* 2) HEADER LOGO — NO CIRCULAR BACKPLATE, STRONGER GLOW */
.logo{
  width:148px;
  height:148px;
  margin:-2px auto 8px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}
.logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:
    drop-shadow(0 0 10px color-mix(in srgb,var(--strong) 44%,transparent))
    drop-shadow(0 0 24px var(--glow))
    drop-shadow(0 0 42px color-mix(in srgb,var(--accent) 48%,transparent));
}

/* 3) NENSEI — MORE PROMINENT, STILL COMPACT */
.nensei,
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .nensei,
.devotedStudentSemesterCard .nensei{
  min-width:108px;
  padding:8px 14px;
  border:1px solid color-mix(in srgb,var(--accent) 72%,rgba(255,255,255,.16));
  border-radius:999px;
  color:var(--strong);
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 24%,rgba(2,2,4,.82)),rgba(2,2,4,.72));
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--accent) 8%,transparent),
    0 0 18px color-mix(in srgb,var(--accent) 34%,transparent),
    inset 0 0 16px color-mix(in srgb,var(--accent) 12%,transparent);
  font-weight:900;
  letter-spacing:.08em;
  text-align:center;
  text-shadow:
    0 2px 6px rgba(0,0,0,.94),
    0 0 11px color-mix(in srgb,var(--accent) 48%,transparent);
}

/* 4) ACADEMIC RECORDS — LIGHTER TRANSLUCENT GLASS */
#academicCardPanel{
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 40%),
    linear-gradient(145deg,rgba(18,18,22,.64),rgba(5,5,8,.72));
  box-shadow:
    inset 4px 0 0 var(--accent),
    inset 0 0 0 1px color-mix(in srgb,var(--accent) 6%,transparent),
    0 20px 55px rgba(0,0,0,.30);
  backdrop-filter:blur(8px) saturate(1.08);
}
#academicCardPanel .academicTop{
  background:linear-gradient(90deg,rgba(0,0,0,.16),transparent);
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard){
  background:
    radial-gradient(circle at 100% 0,color-mix(in srgb,var(--accent) 10%,transparent),transparent 38%),
    linear-gradient(145deg,rgba(9,9,13,.71),rgba(4,4,7,.62));
  backdrop-filter:blur(6px) saturate(1.06);
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .semesterHead{
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 13%,rgba(3,3,6,.56)),rgba(3,3,6,.24));
  backdrop-filter:blur(4px);
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .subjects{
  background:rgba(0,0,0,.15);
  backdrop-filter:blur(3px);
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .subjectRow{
  background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.014));
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .outcome{
  background:rgba(0,0,0,.14);
}

/* 4) STUDENT POINT LOG — LIGHTER GLASS, ARTWORK STAYS VISIBLE */
#studentPointPanel{
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 43%),
    linear-gradient(145deg,rgba(15,15,18,.62),rgba(4,4,7,.70));
  backdrop-filter:blur(8px) saturate(1.08);
}
#studentPointPanel::before{
  opacity:.58;
}
#studentPointPanel::after{
  background:
    linear-gradient(180deg,rgba(4,4,7,.17) 0%,rgba(4,4,7,.28) 50%,rgba(4,4,7,.63) 86%,rgba(4,4,7,.79) 100%),
    linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,transparent),transparent 62%);
}
#studentPointPanel>.sectionHeader{
  background:linear-gradient(90deg,rgba(4,4,7,.48),rgba(4,4,7,.20));
  backdrop-filter:blur(4px);
}
#studentPointPanel>.semesterNote{
  background:rgba(0,0,0,.25);
  backdrop-filter:blur(4px);
}
#studentPointPanel .total{
  background:linear-gradient(145deg,rgba(5,5,8,.58),rgba(5,5,8,.39));
  backdrop-filter:blur(5px);
}
#studentPointPanel>.logBar{
  background:linear-gradient(180deg,rgba(4,4,7,.08),rgba(4,4,7,.46));
}
#studentPointPanel .logItem{
  background:linear-gradient(90deg,rgba(5,5,8,.42),rgba(5,5,8,.24));
  backdrop-filter:blur(4px);
}

/* 5) GRADUATED — UNIFIED CEREMONIAL ARCHIVE UI */
.resultGrid.graduatedLayout{
  position:relative;
}
.resultGrid.graduatedLayout::before{
  content:"GRADUATED ARCHIVE";
  position:absolute;
  z-index:0;
  left:26px;
  top:18px;
  color:color-mix(in srgb,var(--accent) 7%,transparent);
  font-family:"Cinzel",Georgia,serif;
  font-size:64px;
  font-weight:900;
  letter-spacing:.14em;
  line-height:1;
  pointer-events:none;
}
.resultGrid.graduatedLayout>#studentProfilePanel,
.resultGrid.graduatedLayout>.rightColumn,
.resultGrid.graduatedLayout>.graduatedWideSections{
  position:relative;
  z-index:1;
}
.resultGrid.graduatedLayout #studentProfilePanel{
  border-color:color-mix(in srgb,var(--accent) 48%,transparent);
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 6%,rgba(11,11,15,.72)),rgba(4,4,7,.70));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--accent) 5%,transparent),
    0 24px 68px rgba(0,0,0,.36),
    0 0 30px color-mix(in srgb,var(--accent) 8%,transparent);
  backdrop-filter:blur(9px) saturate(1.08);
}
.resultGrid.graduatedLayout #studentProfilePanel .profileHeader{
  margin:-4px -4px 0;
  padding:5px 4px 26px;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
}
.resultGrid.graduatedLayout #studentProfilePanel .studentName{
  text-shadow:0 3px 16px rgba(0,0,0,.62),0 0 18px color-mix(in srgb,var(--accent) 16%,transparent);
}
.resultGrid.graduatedLayout #studentProfilePanel .badge{
  border-color:color-mix(in srgb,var(--accent) 42%,transparent);
  box-shadow:0 0 16px color-mix(in srgb,var(--accent) 13%,transparent);
}
.resultGrid.graduatedLayout .rightColumn>aside.panel{
  border-color:color-mix(in srgb,var(--accent) 46%,transparent);
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 42%),
    linear-gradient(145deg,rgba(14,14,18,.68),rgba(4,4,7,.74));
  box-shadow:0 24px 68px rgba(0,0,0,.34);
  backdrop-filter:blur(9px) saturate(1.06);
}
.resultGrid.graduatedLayout .rightColumn>aside.panel .sectionHeader{
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 10%,rgba(0,0,0,.34)),transparent);
}
.resultGrid.graduatedLayout .mediaCard{
  border-color:color-mix(in srgb,var(--accent) 34%,transparent);
  background:rgba(0,0,0,.22);
  box-shadow:inset 0 0 25px rgba(0,0,0,.24);
}
.graduatedWideSections{
  gap:18px;
  margin-top:2px;
}
.graduatedWideSections>#occupationCard,
.graduatedWideSections>#academicCardPanel{
  border-color:color-mix(in srgb,var(--accent) 48%,transparent);
  border-radius:24px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--accent) 5%,transparent),
    0 24px 66px rgba(0,0,0,.34);
}
.graduatedWideSections #occupationCard{
  padding:24px 26px 27px;
  background:
    radial-gradient(circle at 100% 0,color-mix(in srgb,var(--accent) 15%,transparent),transparent 42%),
    linear-gradient(145deg,rgba(15,14,18,.68),rgba(5,5,8,.72));
  backdrop-filter:blur(8px) saturate(1.08);
}
.graduatedWideSections #occupationSectionTitle{
  display:flex;
  align-items:center;
  gap:13px;
  margin:0 2px 18px;
  color:var(--strong);
  text-shadow:0 0 16px color-mix(in srgb,var(--accent) 28%,transparent);
}
.graduatedWideSections #occupationSectionTitle::before{
  content:"✦";
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  flex:0 0 32px;
  border:1px solid color-mix(in srgb,var(--accent) 52%,transparent);
  border-radius:50%;
  color:var(--accent);
  background:color-mix(in srgb,var(--accent) 9%,rgba(0,0,0,.38));
  box-shadow:0 0 18px color-mix(in srgb,var(--accent) 18%,transparent);
  font-size:13px;
}
.graduatedWideSections .lifeAfterGraduationCard{
  grid-template-columns:104px minmax(0,780px) minmax(250px,1fr);
  min-height:196px;
  gap:24px;
  padding:29px 34px;
  border-color:color-mix(in srgb,var(--accent) 62%,transparent);
  background-image:
    linear-gradient(90deg,rgba(4,4,7,.94) 0%,rgba(4,4,7,.86) 31%,rgba(4,4,7,.62) 53%,rgba(4,4,7,.28) 73%,rgba(4,4,7,.07) 100%),
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent 55%,color-mix(in srgb,var(--accent2) 9%,transparent)),
    url("https://drive.google.com/thumbnail?id=1hbt9ake1iC7p6C9iOGpX8A16HpfBGHfN&sz=w2200");
  background-position:center,center,right 36%;
  box-shadow:
    inset 5px 0 0 var(--accent),
    inset 0 0 48px color-mix(in srgb,var(--accent) 7%,transparent),
    0 18px 48px rgba(0,0,0,.30);
}
.graduatedWideSections .lifeAfterGraduationCard::before{
  left:142px;
  top:28px;
  bottom:28px;
}
.graduatedWideSections .lifeAfterGraduationCard::after{
  right:30px;
  bottom:18px;
  color:color-mix(in srgb,var(--strong) 20%,transparent);
  font-size:38px;
  letter-spacing:.15em;
}
.graduatedWideSections .lifeAfterGraduationSigil{
  width:86px;
  height:86px;
  border:1px solid color-mix(in srgb,var(--strong) 52%,transparent);
  box-shadow:
    0 14px 32px rgba(0,0,0,.42),
    0 0 34px color-mix(in srgb,var(--accent) 38%,transparent),
    inset 0 0 0 5px rgba(255,255,255,.09);
}
.graduatedWideSections .lifeAfterGraduationContent{
  padding:20px 23px;
  border-color:color-mix(in srgb,var(--accent) 30%,transparent);
  background:linear-gradient(135deg,rgba(5,5,8,.58),rgba(5,5,8,.27));
  backdrop-filter:blur(5px);
}
.graduatedWideSections .lifeAfterGraduationEyebrow{
  color:var(--accent);
  font-size:13px;
  text-shadow:0 0 16px color-mix(in srgb,var(--accent) 48%,transparent);
}
.graduatedWideSections .lifeAfterGraduationNarrative{
  color:var(--strong);
  font-size:19px;
  line-height:1.68;
  text-shadow:0 2px 10px rgba(0,0,0,.72);
}

/* GRADUATED academic archive heading feels distinct from active-student records. */
.graduatedWideSections>#academicCardPanel{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 42%),
    linear-gradient(145deg,rgba(15,15,20,.59),rgba(4,4,7,.69));
}
.graduatedWideSections>#academicCardPanel::before{
  content:"ACADEMIC LEGACY";
  position:absolute;
  right:24px;
  top:18px;
  color:color-mix(in srgb,var(--accent) 8%,transparent);
  font-family:"Cinzel",Georgia,serif;
  font-size:38px;
  font-weight:900;
  letter-spacing:.12em;
  pointer-events:none;
}
.graduatedWideSections>#academicCardPanel>*{
  position:relative;
  z-index:1;
}

/* DEVOTED STUDENT — cohesive ceremonial panel inside the graduated archive. */
.graduatedWideSections .devotedStudentSemesterCard{
  border-color:color-mix(in srgb,var(--accent) 66%,transparent);
  background-image:
    linear-gradient(90deg,rgba(4,4,7,.92) 0%,rgba(4,4,7,.82) 29%,rgba(4,4,7,.56) 52%,rgba(4,4,7,.24) 74%,rgba(4,4,7,.055) 100%),
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 13%,transparent),transparent 54%,color-mix(in srgb,var(--accent2) 10%,transparent)),
    url("https://drive.google.com/thumbnail?id=1K-2TytITfiC3OysGOO_1L5yn4iRGiAsT&sz=w2200");
  box-shadow:
    inset 5px 0 0 var(--accent),
    0 22px 58px rgba(0,0,0,.36),
    0 0 42px color-mix(in srgb,var(--accent) 15%,transparent);
}
.graduatedWideSections .devotedStudentSemesterCard .semesterHead{
  background:linear-gradient(90deg,rgba(4,4,7,.72),rgba(4,4,7,.31) 68%,rgba(4,4,7,.10));
  backdrop-filter:blur(4px);
}
.graduatedWideSections .devotedStudentHero{
  border-color:color-mix(in srgb,var(--accent) 56%,transparent);
  background:linear-gradient(110deg,rgba(5,5,8,.72),rgba(5,5,8,.45) 60%,rgba(5,5,8,.20));
  backdrop-filter:blur(5px);
}
.graduatedWideSections .devotedStudentField{
  border-color:color-mix(in srgb,var(--accent) 34%,transparent);
  background:linear-gradient(135deg,rgba(6,6,9,.65),rgba(6,6,9,.39));
  backdrop-filter:blur(5px);
}
.graduatedWideSections .devotedStudentScorePanel{
  border-color:color-mix(in srgb,var(--accent) 82%,rgba(255,255,255,.18));
  background:
    radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 54%),
    linear-gradient(145deg,rgba(1,1,3,.92),rgba(6,5,8,.78));
  box-shadow:
    0 14px 34px rgba(0,0,0,.46),
    0 0 33px color-mix(in srgb,var(--accent) 34%,transparent),
    inset 0 0 28px color-mix(in srgb,var(--accent) 12%,transparent);
}
.graduatedWideSections .devotedStudentScorePanel .devotedStudentScoreValue{
  font-size:52px;
  text-shadow:
    0 3px 8px rgba(0,0,0,.98),
    0 0 19px color-mix(in srgb,var(--accent) 68%,transparent),
    0 0 36px color-mix(in srgb,var(--accent) 30%,transparent);
}
/* =====================================================
   V53 — TRUE CENTER / CLEAR GLASS / POINT HEADER CONTRAST / LIFE PATH FLIP
   2026-07-20
   - Header content is placed at the actual vertical midpoint between V51 and V52.
   - Academic Records glass transparency is visibly increased.
   - Student Point Log title and current-period badge win against the artwork.
   - Life After Graduation artwork is horizontally mirrored without flipping content.
   - No data, academic, graduated, PDF or PNG logic is changed.
   ===================================================== */

/* 1) HEADER CONTENT — ACTUAL VERTICAL CENTER */
.hero{
  align-items:center;
  justify-items:center;
}
.heroContent{
  transform:translateY(-2px);
}

/* 2) ACADEMIC RECORDS — VISIBLY TRANSPARENT GLASS */
#academicCardPanel{
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 42%),
    linear-gradient(145deg,rgba(18,18,22,.29),rgba(5,5,8,.36));
  border-color:color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.05));
  box-shadow:
    inset 4px 0 0 color-mix(in srgb,var(--accent) 82%,transparent),
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 18px 50px rgba(0,0,0,.22);
  backdrop-filter:blur(7px) saturate(1.10);
}
#academicCardPanel .academicTop{
  background:linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,.015));
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard){
  background:
    radial-gradient(circle at 100% 0,color-mix(in srgb,var(--accent) 8%,transparent),transparent 40%),
    linear-gradient(145deg,rgba(9,9,13,.39),rgba(4,4,7,.27));
  border-color:color-mix(in srgb,var(--accent) 30%,rgba(255,255,255,.035));
  box-shadow:
    inset 4px 0 0 color-mix(in srgb,var(--accent) 78%,transparent),
    0 12px 30px rgba(0,0,0,.18);
  backdrop-filter:blur(7px) saturate(1.08);
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .semesterHead{
  background:linear-gradient(
    90deg,
    color-mix(in srgb,var(--accent) 10%,rgba(3,3,6,.28)),
    rgba(3,3,6,.10)
  );
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .subjects{
  background:rgba(0,0,0,.075);
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .subjectRow{
  background:linear-gradient(90deg,rgba(255,255,255,.026),rgba(255,255,255,.008));
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .outcome{
  background:rgba(0,0,0,.075);
}
.academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .part{
  background-color:color-mix(in srgb,currentColor 2%,transparent);
}

/* Keep the GRADUATED academic archive equally glass-like. */
.graduatedWideSections>#academicCardPanel{
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 44%),
    linear-gradient(145deg,rgba(15,15,20,.27),rgba(4,4,7,.35));
}

/* 3) STUDENT POINT LOG — TITLE + PERIOD MUST STAY LEGIBLE */
#studentPointPanel>.sectionHeader{
  min-height:70px;
  background:
    linear-gradient(90deg,rgba(2,2,5,.82),rgba(2,2,5,.60) 58%,rgba(2,2,5,.38));
  border-bottom-color:color-mix(in srgb,var(--accent) 46%,transparent);
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb,var(--accent) 16%,transparent),
    0 10px 28px rgba(0,0,0,.16);
  backdrop-filter:blur(5px);
}
#studentPointPanel>.sectionHeader .sectionTitle{
  color:var(--strong);
  font-size:20px;
  font-weight:950;
  letter-spacing:.105em;
  text-shadow:
    0 3px 9px rgba(0,0,0,.98),
    0 0 16px color-mix(in srgb,var(--accent) 58%,transparent),
    0 0 30px color-mix(in srgb,var(--accent) 24%,transparent);
}
#studentPointPanel .semesterBadge{
  max-width:225px;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border:1px solid color-mix(in srgb,var(--accent) 78%,rgba(255,255,255,.16));
  color:var(--strong);
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 24%,rgba(2,2,5,.90)),rgba(2,2,5,.84));
  box-shadow:
    0 0 20px color-mix(in srgb,var(--accent) 34%,transparent),
    inset 0 0 15px color-mix(in srgb,var(--accent) 12%,transparent);
  font-size:11.5px;
  font-weight:950;
  letter-spacing:.065em;
  text-shadow:0 2px 7px rgba(0,0,0,.98),0 0 10px color-mix(in srgb,var(--accent) 46%,transparent);
}

/* 4) LIFE AFTER GRADUATION — HORIZONTAL MIRROR OF ARTWORK ONLY */
.graduatedWideSections .lifeAfterGraduationCard{
  isolation:isolate;
  background-image:
    linear-gradient(90deg,rgba(4,4,7,.94) 0%,rgba(4,4,7,.86) 31%,rgba(4,4,7,.62) 53%,rgba(4,4,7,.28) 73%,rgba(4,4,7,.07) 100%),
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent 55%,color-mix(in srgb,var(--accent2) 9%,transparent));
  background-position:center,center;
}
.graduatedWideSections .lifeAfterGraduationCard::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  width:auto;
  height:auto;
  pointer-events:none;
  background-image:url("https://drive.google.com/thumbnail?id=1hbt9ake1iC7p6C9iOGpX8A16HpfBGHfN&sz=w2200");
  background-size:cover;
  background-position:right 36%;
  background-repeat:no-repeat;
  transform:scaleX(-1);
  transform-origin:center;
  opacity:1;
}
.graduatedWideSections .lifeAfterGraduationSigil::after{
  content:"";
  position:absolute;
  right:-22px;
  top:-31px;
  width:1px;
  height:148px;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb,var(--accent) 52%,transparent),
    transparent
  );
}
.graduatedWideSections .lifeAfterGraduationSigil,
.graduatedWideSections .lifeAfterGraduationContent,
.graduatedWideSections .lifeAfterGraduationCard::after{
  position:relative;
  z-index:1;
}

/* =====================================================
   V54 — RESTORE LIFE PATH GRADIENT / REGULAR ACADEMIC GLASS
   2026-07-20
   - Life After Graduation keeps the exact V52 dark gradient appearance;
     only the artwork layer is horizontally mirrored.
   - Regular (non-GRADUATED) Academic Records receives a balanced glass look:
     visibly translucent, but still dark enough for comfortable reading.
   - No layout, data, academic, graduated, PDF or PNG logic is changed.
   ===================================================== */

/* 1) LIFE AFTER GRADUATION — V52 GRADIENT, ARTWORK FLIPPED ONLY
   The whole composite lives on ::before. The two gradient directions are
   pre-mirrored so after scaleX(-1) they visually return to the exact V52
   directions, while the artwork itself remains horizontally flipped. */
.graduatedWideSections .lifeAfterGraduationCard{
  isolation:isolate;
  background-color:transparent;
  background-image:none;
}
.graduatedWideSections .lifeAfterGraduationCard::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  width:auto;
  height:auto;
  pointer-events:none;
  background-image:
    linear-gradient(270deg,rgba(4,4,7,.94) 0%,rgba(4,4,7,.86) 31%,rgba(4,4,7,.62) 53%,rgba(4,4,7,.28) 73%,rgba(4,4,7,.07) 100%),
    linear-gradient(225deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent 55%,color-mix(in srgb,var(--accent2) 9%,transparent)),
    url("https://drive.google.com/thumbnail?id=1hbt9ake1iC7p6C9iOGpX8A16HpfBGHfN&sz=w2200");
  background-size:cover,cover,cover;
  background-position:center,center,left 36%;
  background-repeat:no-repeat,no-repeat,no-repeat;
  transform:scaleX(-1);
  transform-origin:center;
  opacity:1;
}
.graduatedWideSections .lifeAfterGraduationSigil,
.graduatedWideSections .lifeAfterGraduationContent,
.graduatedWideSections .lifeAfterGraduationCard::after{
  position:relative;
  z-index:1;
}

/* 2) REGULAR STUDENT ACADEMIC RECORDS — BALANCED GLASSY LOOK
   Scoped explicitly outside .graduatedLayout so the alumni archive styling
   remains untouched. */
.resultGrid:not(.graduatedLayout) #academicCardPanel{
  position:relative;
  overflow:hidden;
  border-color:color-mix(in srgb,var(--accent) 42%,rgba(255,255,255,.08));
  background:
    linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.018) 38%,transparent 68%),
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 43%),
    linear-gradient(145deg,rgba(12,12,17,.53),rgba(3,3,7,.61));
  box-shadow:
    inset 4px 0 0 color-mix(in srgb,var(--accent) 88%,transparent),
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 0 34px color-mix(in srgb,var(--accent) 5%,transparent),
    0 18px 48px rgba(0,0,0,.24);
  backdrop-filter:blur(14px) saturate(1.18);
  -webkit-backdrop-filter:blur(14px) saturate(1.18);
}
.resultGrid:not(.graduatedLayout) #academicCardPanel::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(118deg,rgba(255,255,255,.075) 0%,transparent 21%,transparent 71%,color-mix(in srgb,var(--accent) 5%,transparent) 100%);
  opacity:.72;
}
.resultGrid:not(.graduatedLayout) #academicCardPanel>*{
  position:relative;
  z-index:1;
}
.resultGrid:not(.graduatedLayout) #academicCardPanel .academicTop{
  background:linear-gradient(90deg,rgba(2,2,5,.26),rgba(2,2,5,.08) 65%,transparent);
  border-bottom-color:color-mix(in srgb,var(--accent) 32%,transparent);
}
.resultGrid:not(.graduatedLayout) #academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard){
  border-color:color-mix(in srgb,var(--accent) 38%,rgba(255,255,255,.06));
  background:
    linear-gradient(135deg,rgba(255,255,255,.048),transparent 34%),
    radial-gradient(circle at 100% 0,color-mix(in srgb,var(--accent) 9%,transparent),transparent 42%),
    linear-gradient(145deg,rgba(8,8,13,.55),rgba(3,3,7,.46));
  box-shadow:
    inset 4px 0 0 color-mix(in srgb,var(--accent) 82%,transparent),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 12px 28px rgba(0,0,0,.19);
  backdrop-filter:blur(10px) saturate(1.12);
  -webkit-backdrop-filter:blur(10px) saturate(1.12);
}
.resultGrid:not(.graduatedLayout) #academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .semesterHead{
  background:linear-gradient(
    90deg,
    color-mix(in srgb,var(--accent) 11%,rgba(3,3,7,.44)),
    rgba(3,3,7,.20) 72%,
    rgba(3,3,7,.10)
  );
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.resultGrid:not(.graduatedLayout) #academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .subjects{
  background:rgba(0,0,0,.16);
  border-color:color-mix(in srgb,var(--accent) 22%,transparent);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.resultGrid:not(.graduatedLayout) #academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .subjectRow{
  background:linear-gradient(90deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
}
.resultGrid:not(.graduatedLayout) #academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .outcome{
  background:rgba(2,2,5,.24);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.resultGrid:not(.graduatedLayout) #academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .part{
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

/* =====================================================
   V55 — ACADEMIC GLASS / HOUSE THEME CONSISTENCY / CLEAN GRADUATED DETAILS
   2026-07-20
   - Removes decorative right-side archive watermark on GRADUATED Academic Records.
   - Removes the decorative top-right kanji and SCORE watermark from Devoted Student.
   - Regular Academic Records now visually matches the translucent GRADUATED archive.
   - Academic decorative surfaces are locked to the active House theme variables.
   - Refines Academic Records hierarchy without changing DOM structure or data logic.
   ===================================================== */

/* 1) GRADUATED — REMOVE THE THREE DECORATIVE RIGHT-SIDE WATERMARKS ONLY */
.graduatedWideSections>#academicCardPanel::before,
.graduatedWideSections .devotedStudentHero::after,
.graduatedWideSections .devotedStudentScorePanel::before{
  content:none!important;
  display:none!important;
}

/* 2) REGULAR ACADEMIC RECORDS — MATCH THE GRADUATED GLASS TRANSPARENCY.
   The fixed artwork layer recreates the page backdrop inside the nested
   profile panel, so the card reads as actual glass rather than a solid box. */
.resultGrid:not(.graduatedLayout) #academicCardPanel{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-color:color-mix(in srgb,var(--accent) 48%,rgba(255,255,255,.07));
  background-image:
    linear-gradient(145deg,rgba(15,15,20,.28),rgba(4,4,7,.36)),
    var(--pageDormTint),
    linear-gradient(180deg,rgba(2,2,4,.54),rgba(3,3,5,.25) 58%,rgba(3,3,5,.10)),
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 43%),
    url("https://drive.google.com/thumbnail?id=18fTv3YxLCCGOQtjWDNyVTXWb0jHvhlc1&sz=w2400");
  background-size:100% 100%,100% 100%,100% 100%,auto,cover;
  background-position:center,center,center,100% 0,center bottom;
  background-repeat:no-repeat;
  background-attachment:scroll,fixed,fixed,fixed,fixed;
  box-shadow:
    inset 4px 0 0 var(--accent),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 42px color-mix(in srgb,var(--accent) 7%,transparent),
    0 20px 52px rgba(0,0,0,.24),
    0 0 28px color-mix(in srgb,var(--accent) 7%,transparent);
  backdrop-filter:blur(12px) saturate(1.14);
  -webkit-backdrop-filter:blur(12px) saturate(1.14);
}
.resultGrid:not(.graduatedLayout) #academicCardPanel::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(118deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.018) 18%,transparent 35%,transparent 72%,color-mix(in srgb,var(--accent) 7%,transparent) 100%),
    radial-gradient(circle at 18% -10%,rgba(255,255,255,.075),transparent 31%);
  opacity:.82;
}
.resultGrid:not(.graduatedLayout) #academicCardPanel>*{
  position:relative;
  z-index:1;
}

/* Match regular semester cards to the glass density used by the graduated archive. */
.resultGrid:not(.graduatedLayout) #academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard){
  border-color:color-mix(in srgb,var(--accent) 42%,rgba(255,255,255,.05));
  background:
    linear-gradient(135deg,rgba(255,255,255,.045),transparent 34%),
    radial-gradient(circle at 100% 0,color-mix(in srgb,var(--accent) 9%,transparent),transparent 40%),
    linear-gradient(145deg,rgba(9,9,13,.39),rgba(4,4,7,.27));
  box-shadow:
    inset 4px 0 0 var(--accent),
    inset 0 1px 0 rgba(255,255,255,.075),
    0 13px 30px rgba(0,0,0,.19),
    0 0 20px color-mix(in srgb,var(--accent) 5%,transparent);
  backdrop-filter:blur(8px) saturate(1.10);
  -webkit-backdrop-filter:blur(8px) saturate(1.10);
}

/* 3) HOUSE-THEME CONSISTENCY — EVERY DECORATIVE ACADEMIC ACCENT FOLLOWS THE DORM. */
#academicCardPanel .largeCardLabel,
#academicCardPanel .semesterTitle,
#academicCardPanel .miniTitle,
#academicCardPanel .count,
#academicCardPanel .nensei,
#academicCardPanel .mark{
  color:var(--strong);
}
#academicCardPanel .academicIntro,
#academicCardPanel .subjectHeader,
#academicCardPanel .outcomeLabel,
#academicCardPanel .partName{
  color:color-mix(in srgb,var(--text) 72%,var(--muted));
}
#academicCardPanel .academicTop,
#academicCardPanel .semesterHead,
#academicCardPanel .subjects,
#academicCardPanel .subjectRow,
#academicCardPanel .outcome,
#academicCardPanel .part{
  border-color:color-mix(in srgb,var(--accent) 28%,transparent);
}
#academicCardPanel .count,
#academicCardPanel .nensei{
  border-color:color-mix(in srgb,var(--accent) 54%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 17%,rgba(0,0,0,.52)),color-mix(in srgb,var(--accent2) 7%,rgba(0,0,0,.42)));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 16px color-mix(in srgb,var(--accent) 12%,transparent);
}
#academicCardPanel .mark{
  border-color:color-mix(in srgb,var(--accent) 34%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 11%,rgba(0,0,0,.26)),rgba(0,0,0,.17));
  box-shadow:inset 0 0 13px color-mix(in srgb,var(--accent) 4%,transparent);
}
#academicCardPanel .transcriptButton,
#academicCardPanel .reportButton{
  border-color:color-mix(in srgb,var(--strong) 20%,transparent);
  background:linear-gradient(135deg,var(--accent),var(--strong) 58%,var(--accent2));
  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    0 0 20px color-mix(in srgb,var(--accent) 17%,transparent);
}

/* Participation keeps its semantic state text, but its frames and surface now
   remain House-themed instead of introducing an unrelated decorative palette. */
#academicCardPanel .part.yes,
#academicCardPanel .part.no,
#academicCardPanel .part.locked{
  border-color:color-mix(in srgb,var(--accent) 30%,transparent);
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 7%,rgba(255,255,255,.018)),rgba(0,0,0,.12));
}

/* 4) ACADEMIC RECORDS — REFINED VISUAL HIERARCHY */
#academicCardPanel .academicTop{
  position:relative;
  min-height:82px;
  padding:7px 5px 19px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,rgba(2,2,5,.24)),rgba(2,2,5,.07) 68%,transparent);
}
#academicCardPanel .academicTop::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 24%,transparent) 46%,transparent 86%);
  box-shadow:0 0 13px color-mix(in srgb,var(--accent) 24%,transparent);
}
#academicCardPanel .largeCardLabel{
  font-size:16px;
  letter-spacing:.105em;
  text-shadow:0 0 17px color-mix(in srgb,var(--accent) 30%,transparent);
}
#academicCardPanel .academicIntro{
  margin-top:7px;
  font-size:11.5px;
  line-height:1.5;
}
#academicCardPanel .academicRecords{
  gap:20px;
}
#academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard){
  position:relative;
  border-radius:23px;
}
#academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard)::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,.035),transparent 19%,transparent 78%,color-mix(in srgb,var(--accent) 4%,transparent));
}
#academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard)>*{
  position:relative;
  z-index:1;
}
#academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .semesterHead{
  min-height:70px;
  padding:17px 19px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,rgba(3,3,7,.42)),rgba(3,3,7,.18) 72%,rgba(3,3,7,.07));
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--accent) 10%,transparent);
}
#academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .semesterTitle{
  display:flex;
  align-items:center;
  gap:11px;
  font-size:22px;
  letter-spacing:.055em;
  text-shadow:0 2px 12px rgba(0,0,0,.48),0 0 16px color-mix(in srgb,var(--accent) 13%,transparent);
}
#academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .semesterTitle::before{
  content:"✦";
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  flex:0 0 28px;
  border:1px solid color-mix(in srgb,var(--accent) 56%,transparent);
  border-radius:50%;
  color:var(--accent);
  background:color-mix(in srgb,var(--accent) 9%,rgba(0,0,0,.32));
  box-shadow:0 0 15px color-mix(in srgb,var(--accent) 16%,transparent);
  font-size:10px;
}
#academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .miniTitle{
  border-left-color:var(--accent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,rgba(0,0,0,.16)),transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
#academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .subjects{
  background:linear-gradient(145deg,rgba(0,0,0,.20),rgba(0,0,0,.11));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
#academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .subjectRow{
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 5%,rgba(255,255,255,.025)),rgba(255,255,255,.009));
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
#academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .subjectRow:hover{
  border-color:color-mix(in srgb,var(--accent) 46%,transparent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,rgba(255,255,255,.03)),rgba(255,255,255,.012));
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--accent) 66%,transparent);
}
#academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .semesterFoot{
  background:linear-gradient(180deg,rgba(255,255,255,.014),color-mix(in srgb,var(--accent) 3%,rgba(0,0,0,.18)));
}
#academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .outcome{
  background:linear-gradient(145deg,rgba(0,0,0,.21),color-mix(in srgb,var(--accent) 4%,rgba(0,0,0,.13)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}


/* =====================================================
   V56 — FROSTED ACADEMIC GLASS / CLEAN DECORATIVE TEXT / RED NOT PARTICIPATED
   2026-07-20
   - Removes all decorative right-side watermarks from GRADUATED Academic Records.
   - Removes LIFE PATH watermark from Life After Graduation.
   - Rebalances regular Academic Records into medium-opacity frosted glass with House gradients.
   - NOT PARTICIPATED is rendered as semantic red, never pink.
   - No DOM, data, academic loading, PDF or PNG logic is changed.
   ===================================================== */

/* 1) GRADUATED — FORCE-REMOVE DECORATIVE RIGHT-SIDE TEXT / KANJI / SCORE */
.graduatedWideSections>#academicCardPanel::before,
.graduatedWideSections>#academicCardPanel::after,
.graduatedWideSections .devotedStudentHero::before,
.graduatedWideSections .devotedStudentHero::after,
.graduatedWideSections .devotedStudentScorePanel::before,
.graduatedWideSections .devotedStudentScorePanel::after{
  content:none!important;
  display:none!important;
}

/* 2) LIFE AFTER GRADUATION — REMOVE LARGE LIFE PATH WATERMARK ONLY */
.graduatedWideSections .lifeAfterGraduationCard::after{
  content:none!important;
  display:none!important;
}

/* Keep actual Life After Graduation content above its mirrored artwork layer. */
.graduatedWideSections .lifeAfterGraduationSigil,
.graduatedWideSections .lifeAfterGraduationContent{
  position:relative;
  z-index:2;
}

/* 3) REGULAR ACADEMIC RECORDS — MEDIUM-OPAQUE FROSTED GLASS.
   No direct page-artwork recreation here: the surface remains translucent,
   blurred and House-tinted without becoming excessively transparent. */
.resultGrid:not(.graduatedLayout) #academicCardPanel{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-color:color-mix(in srgb,var(--accent) 52%,rgba(255,255,255,.08));
  background:
    linear-gradient(118deg,
      color-mix(in srgb,var(--accent) 19%,rgba(13,13,18,.79)) 0%,
      rgba(10,10,15,.76) 34%,
      color-mix(in srgb,var(--accent2) 10%,rgba(7,7,12,.78)) 68%,
      rgba(5,5,10,.82) 100%),
    radial-gradient(circle at 92% 2%,color-mix(in srgb,var(--accent) 25%,transparent),transparent 42%),
    radial-gradient(circle at 4% 100%,color-mix(in srgb,var(--accent2) 12%,transparent),transparent 38%);
  box-shadow:
    inset 4px 0 0 var(--accent),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 48px color-mix(in srgb,var(--accent) 8%,transparent),
    0 20px 54px rgba(0,0,0,.30),
    0 0 30px color-mix(in srgb,var(--accent) 8%,transparent);
  backdrop-filter:blur(20px) saturate(1.20);
  -webkit-backdrop-filter:blur(20px) saturate(1.20);
}
.resultGrid:not(.graduatedLayout) #academicCardPanel::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(125deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.028) 19%,transparent 38%,transparent 70%,color-mix(in srgb,var(--accent) 8%,transparent) 100%),
    radial-gradient(circle at 20% -12%,rgba(255,255,255,.10),transparent 31%);
  opacity:.80;
}
.resultGrid:not(.graduatedLayout) #academicCardPanel>*{
  position:relative;
  z-index:1;
}
.resultGrid:not(.graduatedLayout) #academicCardPanel .academicTop{
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--accent) 11%,rgba(3,3,7,.54)),
      rgba(3,3,7,.40) 62%,
      color-mix(in srgb,var(--accent2) 5%,rgba(3,3,7,.30)));
  backdrop-filter:blur(10px) saturate(1.10);
  -webkit-backdrop-filter:blur(10px) saturate(1.10);
}

/* Semester cards: frosted, readable and House-tinted rather than see-through. */
.resultGrid:not(.graduatedLayout) #academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard){
  border-color:color-mix(in srgb,var(--accent) 44%,rgba(255,255,255,.045));
  background:
    linear-gradient(128deg,
      color-mix(in srgb,var(--accent) 12%,rgba(8,8,13,.70)),
      rgba(5,5,10,.68) 58%,
      color-mix(in srgb,var(--accent2) 6%,rgba(4,4,9,.72))),
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 42%);
  box-shadow:
    inset 4px 0 0 var(--accent),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 32px rgba(0,0,0,.23),
    0 0 22px color-mix(in srgb,var(--accent) 6%,transparent);
  backdrop-filter:blur(15px) saturate(1.12);
  -webkit-backdrop-filter:blur(15px) saturate(1.12);
}
.resultGrid:not(.graduatedLayout) #academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .semesterHead{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 14%,rgba(3,3,7,.58)),
    rgba(3,3,7,.42) 70%,
    rgba(3,3,7,.26));
}
.resultGrid:not(.graduatedLayout) #academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .subjects{
  background:linear-gradient(145deg,rgba(0,0,0,.34),color-mix(in srgb,var(--accent) 4%,rgba(0,0,0,.24)));
}
.resultGrid:not(.graduatedLayout) #academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .subjectRow{
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 6%,rgba(255,255,255,.035)),rgba(0,0,0,.16));
}
.resultGrid:not(.graduatedLayout) #academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .outcome{
  background:linear-gradient(145deg,rgba(0,0,0,.34),color-mix(in srgb,var(--accent) 5%,rgba(0,0,0,.22)));
}

/* 4) EXTRACURRICULAR / PARTICIPATION — NOT PARTICIPATED MUST BE RED, NOT PINK. */
#academicCardPanel .part.no .partState{
  color:#ff4b4b!important;
  text-shadow:0 0 11px rgba(255,38,45,.34);
}


/* =====================================================
   V57 — PREMIUM STUDENT EXPERIENCE UI
   2026-07-20
   VISUAL-ONLY EXPERIMENT:
   - Premium student identity header without changing DOM order.
   - Modernized basic information and Finance Balance surfaces.
   - Official-media showcase treatment for ID Card / Completion Certificate.
   - Student Point Log becomes a visual timeline while retaining the same data rows.
   - GP Ranking top three become a premium podium; remaining students keep the list grid.
   - Existing Academic Records / GRADUATED / Devoted / Life After / PDF / PNG logic untouched.
   ===================================================== */

/* -----------------------------------------------------
   1) STUDENT PROFILE — PREMIUM IDENTITY HEADER
   ----------------------------------------------------- */
#studentProfilePanel .panelInner{
  padding:22px;
}
#studentProfilePanel .profileHeader{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:178px;
  grid-template-columns:138px minmax(0,1fr) 112px;
  gap:24px;
  align-items:center;
  padding:21px 22px;
  border:1px solid color-mix(in srgb,var(--accent) 44%,rgba(255,255,255,.06));
  border-radius:24px;
  background:
    radial-gradient(circle at 0 0,color-mix(in srgb,var(--accent) 22%,transparent),transparent 38%),
    radial-gradient(circle at 100% 100%,color-mix(in srgb,var(--accent2) 12%,transparent),transparent 38%),
    linear-gradient(118deg,rgba(255,255,255,.045),rgba(5,5,9,.58) 42%,color-mix(in srgb,var(--accent) 7%,rgba(3,3,7,.72)));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 4px 0 0 var(--accent),
    0 18px 38px rgba(0,0,0,.25),
    0 0 24px color-mix(in srgb,var(--accent) 7%,transparent);
  backdrop-filter:blur(13px) saturate(1.13);
  -webkit-backdrop-filter:blur(13px) saturate(1.13);
}
#studentProfilePanel .profileHeader::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(118deg,rgba(255,255,255,.075),transparent 22%,transparent 72%,color-mix(in srgb,var(--accent) 7%,transparent)),
    radial-gradient(circle at 70% 10%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 30%);
}
#studentProfilePanel .profileHeader::after{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  bottom:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 18%,transparent) 52%,transparent);
  box-shadow:0 0 15px color-mix(in srgb,var(--accent) 32%,transparent);
}
#studentProfilePanel .avatar{
  position:relative;
  width:136px;
  height:136px;
  border:1px solid color-mix(in srgb,var(--accent) 58%,rgba(255,255,255,.08));
  border-radius:27px;
  background:
    radial-gradient(circle at 50% 24%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 50%),
    rgba(3,3,6,.88);
  box-shadow:
    0 0 0 5px rgba(0,0,0,.20),
    0 18px 30px rgba(0,0,0,.28),
    0 0 26px color-mix(in srgb,var(--accent) 17%,transparent),
    inset 0 0 28px color-mix(in srgb,var(--accent) 10%,transparent);
}
#studentProfilePanel .avatar::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 -24px 38px rgba(0,0,0,.20);
}
#studentProfilePanel .identity{
  position:relative;
  z-index:2;
  padding:4px 0;
}
#studentProfilePanel .studentName{
  max-width:100%;
  overflow:hidden;
  color:var(--strong);
  font-size:34px;
  line-height:.98;
  letter-spacing:.018em;
  text-overflow:ellipsis;
  text-shadow:
    0 3px 20px rgba(0,0,0,.48),
    0 0 20px color-mix(in srgb,var(--accent) 12%,transparent);
}
#studentProfilePanel .metaLine{
  margin-top:13px;
  gap:12px;
}
#studentProfilePanel .studentKanji{
  color:color-mix(in srgb,var(--strong) 72%,var(--accent));
  font-size:19px;
  font-weight:700;
  letter-spacing:.035em;
  text-shadow:0 0 14px color-mix(in srgb,var(--accent) 17%,transparent);
}
#studentProfilePanel .divider{
  color:var(--accent);
  opacity:.55;
}
#studentProfilePanel .badges{
  gap:8px;
  flex-wrap:wrap;
}
#studentProfilePanel .badge{
  min-height:30px;
  padding:6px 11px;
  border-color:color-mix(in srgb,var(--accent) 38%,rgba(255,255,255,.07));
  background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(0,0,0,.18));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 15px rgba(0,0,0,.14);
  letter-spacing:.075em;
}
#studentProfilePanel .crest{
  position:relative;
  width:110px;
  height:132px;
  padding:9px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 48%,rgba(255,255,255,.06));
  border-radius:25px;
  background:
    radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 57%),
    linear-gradient(155deg,rgba(255,255,255,.045),rgba(2,2,5,.62));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 0 28px color-mix(in srgb,var(--accent) 8%,transparent),
    0 14px 28px rgba(0,0,0,.22);
}
#studentProfilePanel .crest img{
  width:78px;
  height:78px;
  filter:drop-shadow(0 0 13px color-mix(in srgb,var(--accent) 35%,transparent));
}
#studentProfilePanel .crestName{
  margin-top:2px;
  color:var(--strong);
  font-size:9px;
  letter-spacing:.09em;
}

/* -----------------------------------------------------
   2) BASIC INFO — MINI STAT CARDS + EMPHASIZED GRADE
   ----------------------------------------------------- */
#studentProfilePanel .infoGrid{
  gap:12px;
  margin-top:16px;
}
#studentProfilePanel .infoGrid>.infoCard.compact{
  position:relative;
  overflow:hidden;
  min-height:86px;
  padding:15px 17px 14px 19px;
  border-color:color-mix(in srgb,var(--accent) 31%,rgba(255,255,255,.055));
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 48%),
    linear-gradient(135deg,rgba(255,255,255,.035),rgba(3,3,7,.54));
  box-shadow:
    inset 3px 0 0 color-mix(in srgb,var(--accent) 76%,transparent),
    inset 0 1px 0 rgba(255,255,255,.055),
    0 10px 24px rgba(0,0,0,.16);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
#studentProfilePanel .infoGrid>.infoCard.compact:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 53%,transparent);
  box-shadow:
    inset 3px 0 0 var(--accent),
    inset 0 1px 0 rgba(255,255,255,.075),
    0 14px 28px rgba(0,0,0,.20),
    0 0 18px color-mix(in srgb,var(--accent) 6%,transparent);
}
#studentProfilePanel .infoGrid>.infoCard.compact .label{
  margin-bottom:8px;
  color:color-mix(in srgb,var(--accent) 84%,var(--strong));
  font-size:9px;
  letter-spacing:.13em;
}
#studentProfilePanel .infoGrid>.infoCard.compact .value{
  color:var(--strong);
  font-size:17px;
  font-weight:800;
  letter-spacing:.018em;
}
#studentProfilePanel .infoGrid>.infoCard.compact:nth-child(3){
  border-color:color-mix(in srgb,var(--accent) 55%,rgba(255,255,255,.06));
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent2) 11%,transparent),transparent 45%),
    linear-gradient(125deg,color-mix(in srgb,var(--accent) 18%,rgba(7,7,10,.68)),rgba(3,3,7,.60));
  box-shadow:
    inset 4px 0 0 var(--accent),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 26px rgba(0,0,0,.20),
    0 0 20px color-mix(in srgb,var(--accent) 8%,transparent);
}
#studentProfilePanel #currentGrade{
  color:var(--strong);
  font-size:21px;
  font-weight:900;
  letter-spacing:.045em;
  text-shadow:0 0 15px color-mix(in srgb,var(--accent) 20%,transparent);
}

/* -----------------------------------------------------
   3) FINANCE BALANCE — VAULT-LIKE PREMIUM SURFACE
   ----------------------------------------------------- */
#studentProfilePanel .finance{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:112px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:18px 22px 17px;
  border-color:color-mix(in srgb,var(--accent) 49%,rgba(255,255,255,.06));
  background:
    radial-gradient(circle at 86% 50%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 30%),
    radial-gradient(circle at 100% 100%,color-mix(in srgb,var(--accent2) 11%,transparent),transparent 35%),
    linear-gradient(118deg,color-mix(in srgb,var(--accent) 10%,rgba(7,7,10,.76)),rgba(3,3,7,.72));
  box-shadow:
    inset 5px 0 0 var(--accent),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 0 36px color-mix(in srgb,var(--accent) 6%,transparent),
    0 15px 32px rgba(0,0,0,.22);
}
#studentProfilePanel .finance::before{
  content:"";
  position:absolute;
  z-index:-1;
  right:24px;
  top:50%;
  width:78px;
  height:78px;
  transform:translateY(-50%);
  border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
  border-radius:50%;
  box-shadow:
    0 0 0 12px color-mix(in srgb,var(--accent) 4%,transparent),
    0 0 0 25px color-mix(in srgb,var(--accent) 2%,transparent);
  opacity:.75;
}
#studentProfilePanel .finance .label{
  margin-bottom:8px;
  color:color-mix(in srgb,var(--accent) 82%,var(--strong));
  font-size:9px;
  letter-spacing:.16em;
}
#studentProfilePanel .financeValue{
  position:relative;
  z-index:1;
  max-width:82%;
  color:var(--strong);
  font-size:37px;
  line-height:1;
  letter-spacing:.018em;
  text-shadow:
    0 3px 18px rgba(0,0,0,.45),
    0 0 18px color-mix(in srgb,var(--accent) 18%,transparent);
}

/* -----------------------------------------------------
   4) OFFICIAL MEDIA — ID CARD / COMPLETION CERTIFICATE SHOWCASE
   ----------------------------------------------------- */
.rightColumn>aside.panel:has(#studentMediaTitle){
  position:relative;
  border-color:color-mix(in srgb,var(--accent) 39%,rgba(255,255,255,.05));
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 42%),
    linear-gradient(145deg,rgba(15,15,19,.88),rgba(4,4,8,.94));
  box-shadow:
    0 22px 60px rgba(0,0,0,.34),
    0 0 26px color-mix(in srgb,var(--accent) 6%,transparent);
}
.rightColumn>aside.panel:has(#studentMediaTitle) .sectionHeader{
  position:relative;
  min-height:64px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,rgba(0,0,0,.18)),transparent 72%);
}
#studentMediaTitle{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--strong);
  font-size:13px;
  letter-spacing:.105em;
}
#studentMediaTitle::before{
  content:"";
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 13px color-mix(in srgb,var(--accent) 70%,transparent);
}
.rightColumn>aside.panel:has(#studentMediaTitle) .mediaStack{
  padding:19px 22px 23px;
}
.rightColumn>aside.panel:has(#studentMediaTitle) .mediaCard{
  position:relative;
  overflow:hidden;
  border-color:color-mix(in srgb,var(--accent) 44%,rgba(255,255,255,.06));
  border-radius:23px;
  background:rgba(2,2,5,.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.065),
    0 16px 34px rgba(0,0,0,.25);
}
.rightColumn>aside.panel:has(#studentMediaTitle) .mediaPreview{
  position:relative;
  isolation:isolate;
  min-height:285px;
  padding:18px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 42%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 46%),
    linear-gradient(145deg,rgba(255,255,255,.025),rgba(0,0,0,.52));
}
.rightColumn>aside.panel:has(#studentMediaTitle) .mediaPreview::before{
  content:"";
  position:absolute;
  inset:15px;
  z-index:-1;
  border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);
  border-radius:18px;
  background:
    linear-gradient(115deg,rgba(255,255,255,.035),transparent 27%),
    rgba(0,0,0,.14);
  box-shadow:inset 0 0 32px rgba(0,0,0,.22);
}
.rightColumn>aside.panel:has(#studentMediaTitle) .mediaPreview img{
  position:relative;
  z-index:1;
  width:calc(100% - 12px);
  max-height:540px;
  object-fit:contain;
  filter:
    drop-shadow(0 18px 24px rgba(0,0,0,.34))
    drop-shadow(0 0 14px color-mix(in srgb,var(--accent) 13%,transparent));
}
.rightColumn>aside.panel:has(#studentMediaTitle) .mediaAction{
  padding:12px 14px 14px;
  border-top-color:color-mix(in srgb,var(--accent) 28%,transparent);
  background:linear-gradient(180deg,rgba(255,255,255,.018),color-mix(in srgb,var(--accent) 5%,rgba(0,0,0,.20)));
}
.rightColumn>aside.panel:has(#studentMediaTitle) .openButton{
  min-height:46px;
  border-radius:13px;
  box-shadow:0 10px 22px rgba(0,0,0,.20),0 0 16px color-mix(in srgb,var(--accent) 10%,transparent);
}

/* -----------------------------------------------------
   5) STUDENT POINT LOG — VERTICAL TIMELINE
   ----------------------------------------------------- */
#studentPointPanel{
  border-color:color-mix(in srgb,var(--accent) 36%,rgba(255,255,255,.05));
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 40%),
    linear-gradient(145deg,var(--panel),var(--panel2));
}
#studentPointPanel .sectionHeader{
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%,rgba(0,0,0,.13)),transparent 72%);
}
#studentPointPanel .semesterBadge{
  border-color:color-mix(in srgb,var(--accent) 52%,transparent);
  color:var(--strong);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,rgba(0,0,0,.52)),rgba(0,0,0,.32));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 15px color-mix(in srgb,var(--accent) 8%,transparent);
}
#studentPointPanel .totals{
  gap:9px;
}
#studentPointPanel .total{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(255,255,255,.035),rgba(0,0,0,.21));
  box-shadow:
    inset 4px 0 0 currentColor,
    inset 0 1px 0 rgba(255,255,255,.045);
}
#studentPointPanel .logBar{
  padding-top:3px;
  padding-bottom:13px;
  color:var(--strong);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 6%,transparent),transparent);
}
#studentPointPanel .pointLogs{
  position:relative;
  max-height:430px;
  gap:12px;
  padding:19px 22px 24px 46px;
}
#studentPointPanel .pointLogs::before{
  content:"";
  position:absolute;
  left:29px;
  top:25px;
  bottom:27px;
  width:1px;
  pointer-events:none;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 35%,transparent),transparent);
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 25%,transparent);
}
#studentPointPanel .logItem{
  position:relative;
  grid-template-columns:116px minmax(0,1fr);
  gap:14px;
  min-height:79px;
  padding:13px 14px 13px 17px;
  border-color:color-mix(in srgb,var(--accent) 26%,rgba(255,255,255,.045));
  border-radius:16px;
  background:
    linear-gradient(115deg,color-mix(in srgb,var(--accent) 6%,rgba(255,255,255,.023)),rgba(0,0,0,.17));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 8px 20px rgba(0,0,0,.13);
}
#studentPointPanel .logItem::before{
  content:"";
  position:absolute;
  left:-24px;
  top:22px;
  width:11px;
  height:11px;
  border:2px solid color-mix(in srgb,var(--accent) 78%,var(--strong));
  border-radius:50%;
  background:var(--panel2);
  box-shadow:
    0 0 0 4px color-mix(in srgb,var(--accent) 8%,transparent),
    0 0 14px color-mix(in srgb,var(--accent) 45%,transparent);
}
#studentPointPanel .logDate{
  align-self:start;
  padding-top:2px;
  color:color-mix(in srgb,var(--accent) 72%,var(--muted));
  font-size:10px;
  font-weight:800;
  line-height:1.35;
}
#studentPointPanel .logDesc{
  color:var(--strong);
  font-size:14px;
  line-height:1.28;
}
#studentPointPanel .chips{
  margin-top:10px;
}
#studentPointPanel .chip{
  padding:5px 9px;
  background:rgba(0,0,0,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  font-size:10px;
  font-weight:900;
}

/* -----------------------------------------------------
   6) GP RANKING — TOP THREE PREMIUM PODIUM
   Existing cards/data/click behavior remain unchanged.
   ----------------------------------------------------- */
.gpRankingSection{
  border-color:color-mix(in srgb,var(--accent) 39%,rgba(255,255,255,.05));
  background:
    radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 32%),
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent2) 8%,transparent),transparent 35%),
    linear-gradient(145deg,var(--panel),var(--panel2));
}
.gpRankingHeader{
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 6%,rgba(0,0,0,.10)),transparent 68%);
}
.gpRankingContent{
  padding:28px 24px 25px;
}
.gpArena{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:15px;
  align-items:end;
}
.gpArena>.gpRankCard{
  grid-column:span 3;
}
.gpArena>.gpRankCard:nth-child(-n+3){
  min-height:338px;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:start;
  justify-items:center;
  padding:21px 17px 19px;
  text-align:center;
  border-radius:25px;
}
.gpArena>.gpRankCard:nth-child(1){
  grid-column:3 / span 2;
  grid-row:1;
  min-height:366px;
  z-index:3;
  border-color:rgba(244,214,111,.58);
  background:
    radial-gradient(circle at 50% 22%,rgba(244,214,111,.13),transparent 38%),
    radial-gradient(circle at 50% 62%,var(--gpGlow2),transparent 48%),
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(5,5,8,.88));
  box-shadow:
    0 24px 48px rgba(0,0,0,.38),
    0 0 32px rgba(244,214,111,.15),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.gpArena>.gpRankCard:nth-child(2){
  grid-column:1 / span 2;
  grid-row:1;
  min-height:338px;
}
.gpArena>.gpRankCard:nth-child(3){
  grid-column:5 / span 2;
  grid-row:1;
  min-height:338px;
}
.gpArena>.gpRankCard:nth-child(-n+3) .gpRankLeft{
  width:100%;
  justify-items:center;
  gap:10px;
}
.gpArena>.gpRankCard:nth-child(-n+3) .gpRankNo{
  min-width:82px;
  min-height:36px;
  font-size:15px;
}
.gpArena>.gpRankCard:nth-child(-n+3) .gpRankAvatar{
  width:142px;
  height:142px;
}
.gpArena>.gpRankCard:nth-child(-n+3) .gpRankAvatarFrame{
  width:126px;
  height:126px;
  border-radius:22px;
}
.gpArena>.gpRankCard:nth-child(-n+3) .gpRankHouseWatermark{
  inset:4px;
  width:132px;
  height:132px;
}
.gpArena>.gpRankCard:nth-child(-n+3) .gpRankHouseBadge{
  right:-1px;
  bottom:0;
}
.gpArena>.gpRankCard:nth-child(-n+3) .gpRankBody{
  width:100%;
  display:grid;
  justify-items:center;
  align-content:start;
}
.gpArena>.gpRankCard:nth-child(-n+3) .gpRankTopline{
  width:100%;
  justify-content:center;
  flex-wrap:wrap;
}
.gpArena>.gpRankCard:nth-child(-n+3) .gpRankId{
  width:100%;
  text-align:center;
}
.gpArena>.gpRankCard:nth-child(-n+3) .gpRankNameButton{
  margin-top:9px;
  text-align:center;
  font-size:20px;
  line-height:1.02;
}
.gpArena>.gpRankCard:nth-child(-n+3) .gpRankNameButton:hover,
.gpArena>.gpRankCard:nth-child(-n+3) .gpRankNameButton:focus-visible{
  transform:translateY(-1px);
}
.gpArena>.gpRankCard:nth-child(-n+3) .gpRankKanji{
  margin-top:7px;
  font-size:14px;
}
.gpArena>.gpRankCard:nth-child(-n+3) .gpRankUsername{
  margin-top:8px;
}
.gpArena>.gpRankCard:nth-child(-n+3) .gpRankScore{
  width:100%;
  justify-items:center;
  padding-top:12px;
  border-top:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  text-align:center;
}
.gpArena>.gpRankCard:nth-child(-n+3) .gpRankScoreValue{
  font-size:34px;
}
.gpArena>.gpRankCard:nth-child(1) .gpRankScoreValue{
  color:#f4d66f;
  font-size:40px;
  text-shadow:0 0 20px rgba(244,214,111,.25);
}
.gpArena>.gpRankCard:nth-child(n+4){
  min-height:160px;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.gpArena>.gpRankCard:nth-child(n+4):hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 42%,transparent);
  box-shadow:0 19px 38px rgba(0,0,0,.31),0 0 20px var(--gpGlow2);
}

/* =====================================================
   V58 — PROFILE BADGES / ACADEMIC HEADER / PHOTO FRAME
   Visual-only refinement. Existing structure and JS remain unchanged.
   ===================================================== */

/* -----------------------------------------------------
   1) PROFILE RANK BADGES — RESTORE ORIGINAL GOLD / PINK
   Keep V57 sizing, but restore the original rank identity colors.
   ----------------------------------------------------- */
#studentProfilePanel .badge.first{
  color:#302400;
  border-color:rgba(245,220,122,.56);
  background:linear-gradient(135deg,#b88b1e,#f5dc7a);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 6px 16px rgba(184,139,30,.18),
    0 0 14px rgba(245,220,122,.12);
  text-shadow:none;
}
#studentProfilePanel .badge.second{
  color:#5c2840;
  border-color:rgba(255,224,236,.58);
  background:linear-gradient(135deg,#e8a9c3,#ffe0ec);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    0 6px 16px rgba(232,169,195,.16),
    0 0 14px rgba(255,224,236,.10);
  text-shadow:none;
}

/* -----------------------------------------------------
   2) EXTRACURRICULAR / PARTICIPATION BADGES — STRONGER
   Quidditch, Combat, Quest and Shiken remain semantic,
   but the status badge is now much easier to scan.
   ----------------------------------------------------- */
#academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .participation{
  gap:9px;
}
#academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .part{
  min-height:72px;
  justify-items:center;
  align-content:center;
  gap:8px;
  padding:10px 8px;
  border-width:1px;
  border-radius:14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 8px 18px rgba(0,0,0,.13);
}
#academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .partName{
  color:color-mix(in srgb,var(--strong) 82%,var(--muted));
  font-size:9.5px;
  font-weight:900;
  letter-spacing:.075em;
}
#academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .partState{
  min-height:25px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 9px 4px;
  border:1px solid currentColor;
  border-radius:999px;
  font-size:8.5px;
  font-weight:950;
  letter-spacing:.035em;
  line-height:1;
  background:rgba(0,0,0,.25);
}
#academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .part.yes{
  border-color:rgba(103,214,151,.34);
  background:
    radial-gradient(circle at 50% 0%,rgba(92,213,143,.12),transparent 62%),
    linear-gradient(145deg,rgba(30,105,65,.24),rgba(3,12,8,.20));
}
#academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .part.yes .partState{
  color:#bff4d5;
  border-color:rgba(150,242,191,.34);
  background:rgba(34,122,75,.34);
  box-shadow:0 0 12px rgba(83,207,137,.13);
}
#academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .part.no{
  border-color:rgba(255,75,75,.34);
  background:
    radial-gradient(circle at 50% 0%,rgba(255,64,72,.10),transparent 62%),
    linear-gradient(145deg,rgba(120,23,31,.23),rgba(14,3,5,.20));
}
#academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .part.no .partState{
  color:#ff4b4b!important;
  border-color:rgba(255,90,90,.40);
  background:rgba(126,21,29,.34);
  box-shadow:0 0 12px rgba(255,38,45,.14);
  text-shadow:0 0 9px rgba(255,38,45,.28);
}
#academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .part.locked{
  border-color:rgba(175,170,164,.22);
  background:linear-gradient(145deg,rgba(92,88,84,.10),rgba(5,5,7,.18));
}
#academicCardPanel .academicRecords>.semesterCard:not(.devotedStudentSemesterCard) .part.locked .partState{
  color:#c0b9b1;
  border-color:rgba(192,185,177,.24);
  background:rgba(80,76,72,.22);
}

/* -----------------------------------------------------
   3) ACADEMIC RECORDS — REFINED TOP TITLE AREA
   A cleaner frosted header with clearer hierarchy and actions.
   ----------------------------------------------------- */
#academicCardPanel .academicTop{
  position:relative;
  isolation:isolate;
  min-height:94px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  margin:0;
  padding:17px 18px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.055));
  border-radius:17px;
  background:
    radial-gradient(circle at 0 0,color-mix(in srgb,var(--accent) 17%,transparent),transparent 42%),
    radial-gradient(circle at 100% 100%,color-mix(in srgb,var(--accent2) 8%,transparent),transparent 38%),
    linear-gradient(118deg,rgba(255,255,255,.052),rgba(3,3,7,.34) 54%,rgba(0,0,0,.23));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.085),
    inset 4px 0 0 color-mix(in srgb,var(--accent) 88%,transparent),
    0 12px 28px rgba(0,0,0,.17);
  backdrop-filter:blur(12px) saturate(1.10);
  -webkit-backdrop-filter:blur(12px) saturate(1.10);
}
#academicCardPanel .academicTop::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.075),transparent 20%,transparent 74%,color-mix(in srgb,var(--accent) 6%,transparent));
}
#academicCardPanel .academicTop::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 24%,transparent) 42%,transparent 86%);
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 20%,transparent);
}
#academicCardPanel .academicTop>div:first-child{
  min-width:0;
  padding-left:2px;
}
#academicCardPanel .largeCardLabel{
  color:var(--strong);
  font-size:17px;
  font-weight:950;
  letter-spacing:.115em;
  text-shadow:0 2px 14px rgba(0,0,0,.46),0 0 16px color-mix(in srgb,var(--accent) 22%,transparent);
}
#academicCardPanel .academicIntro{
  max-width:360px;
  margin-top:7px;
  color:color-mix(in srgb,var(--muted) 86%,var(--strong));
  font-size:11px;
  line-height:1.45;
}
#academicCardPanel .academicActions{
  display:grid;
  grid-template-columns:auto;
  justify-items:end;
  gap:7px;
  flex-shrink:0;
}
#academicCardPanel .count{
  min-height:27px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-color:color-mix(in srgb,var(--accent) 38%,transparent);
  color:color-mix(in srgb,var(--strong) 76%,var(--accent));
  background:rgba(0,0,0,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
  font-size:8px;
  letter-spacing:.06em;
}
#academicCardPanel .transcriptButton{
  min-height:35px;
  padding:8px 13px;
  border-radius:11px;
  font-size:8px;
  letter-spacing:.035em;
}
#academicCardPanel .academicRecords{
  margin-top:15px;
}

/* -----------------------------------------------------
   4) GRADUATED PROFILE PHOTO — SAME POSITION AS REGULAR
   Remove the older graduated-only header offset and use the exact
   same premium portrait layout/crop as regular students.
   ----------------------------------------------------- */
.resultGrid.graduatedLayout #studentProfilePanel .profileHeader{
  margin:0;
  min-height:178px;
  grid-template-columns:138px minmax(0,1fr) 112px;
  gap:24px;
  align-items:center;
  padding:21px 22px;
  border:1px solid color-mix(in srgb,var(--accent) 44%,rgba(255,255,255,.06));
  border-radius:24px;
}
#studentProfilePanel .avatar img,
.resultGrid.graduatedLayout #studentProfilePanel .avatar img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 17%;
  transform:scale(1.17);
  transform-origin:50% 17%;
}

/* -----------------------------------------------------
   5) ALL STUDENT PROFILE PHOTOS — PREMIUM SLEEK FRAME
   Applies equally to regular and graduated student profile photos.
   ----------------------------------------------------- */
#studentProfilePanel .avatar{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--strong) 26%,var(--accent));
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--accent) 13%,#060608),#020204 72%);
  box-shadow:
    0 0 0 3px rgba(2,2,4,.88),
    0 0 0 4px color-mix(in srgb,var(--accent) 36%,transparent),
    0 18px 34px rgba(0,0,0,.34),
    0 0 24px color-mix(in srgb,var(--accent) 15%,transparent),
    inset 0 1px 0 rgba(255,255,255,.12);
}
#studentProfilePanel .avatar::before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:3;
  pointer-events:none;
  border:1px solid color-mix(in srgb,var(--strong) 22%,var(--accent));
  border-radius:21px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.22),
    0 0 10px color-mix(in srgb,var(--accent) 8%,transparent);
}
#studentProfilePanel .avatar::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(145deg,rgba(255,255,255,.075),transparent 23%,transparent 72%,rgba(0,0,0,.14)),
    linear-gradient(180deg,transparent 66%,rgba(0,0,0,.24));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.045),
    inset 0 -22px 36px rgba(0,0,0,.13);
}


/* =====================================================
   V59 — DORM AURA BACKGROUND / CEREMONIAL OPEN HEADER
   Visual-only refinement.
   - Removes the global website background artwork.
   - Removes header backdrop artwork images.
   - Uses house-aware layered gradients + existing falling ornaments.
   - Rebuilds the header as an open ceremonial stage instead of a boxed card.
   - Existing student/profile/academic/graduated/PDF/PNG logic remains untouched.
   ===================================================== */

/* -----------------------------------------------------
   1) WEBSITE BACKGROUND — COLOR + LIGHT ONLY, NO ARTWORK
   The existing theme variables already change with KŌSEI / TSUKIYOMI / YAMIYO,
   so these ambient layers automatically inherit the selected house palette.
   ----------------------------------------------------- */
body,
body.front-mode,
body.dorm-kosei,
body.dorm-tsukiyomi,
body.dorm-yamiyo{
  background-image:
    radial-gradient(ellipse at 50% -10%,
      color-mix(in srgb,var(--accent) 19%,transparent) 0%,
      color-mix(in srgb,var(--accent) 7%,transparent) 29%,
      transparent 58%),
    radial-gradient(circle at 7% 18%,
      color-mix(in srgb,var(--accent2) 13%,transparent) 0%,
      transparent 32%),
    radial-gradient(circle at 94% 34%,
      color-mix(in srgb,var(--accent) 12%,transparent) 0%,
      transparent 34%),
    radial-gradient(circle at 50% 78%,
      color-mix(in srgb,var(--accent2) 7%,transparent) 0%,
      transparent 42%),
    linear-gradient(155deg,
      color-mix(in srgb,var(--bg1) 94%,var(--accent) 6%) 0%,
      #040406 43%,
      color-mix(in srgb,var(--bg2) 92%,var(--accent2) 8%) 100%);
  background-size:100% 100%,auto,auto,auto,100% 100%;
  background-position:center,7% 18%,94% 34%,50% 78%,center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

/* A very subtle luminous wash keeps the long page from feeling flat. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.72;
  background:
    linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb,var(--accent) 3%,transparent) 18%,
      transparent 44%,
      color-mix(in srgb,var(--accent2) 3%,transparent) 76%,
      transparent 100%),
    radial-gradient(ellipse at 50% 0%,
      rgba(255,255,255,.025),
      transparent 42%);
}

/* Existing falling ornaments stay above the ambient background. */
.backdrop{z-index:1}
.shell{z-index:2}

/* -----------------------------------------------------
   2) HEADER BACKDROP — ABSTRACT HOUSE AURA, NO IMAGE
   The same structure remains; heroFeatureArt is repurposed as light only.
   ----------------------------------------------------- */
.heroFeatureArt,
body.front-mode .heroFeatureArt,
body.dorm-kosei .heroFeatureArt,
body.dorm-tsukiyomi .heroFeatureArt,
body.dorm-yamiyo .heroFeatureArt{
  inset:0;
  opacity:1;
  transform:none;
  filter:none;
  background-image:
    radial-gradient(ellipse at 50% 18%,
      color-mix(in srgb,var(--accent) 18%,transparent) 0%,
      color-mix(in srgb,var(--accent) 7%,transparent) 34%,
      transparent 61%),
    radial-gradient(circle at 16% 70%,
      color-mix(in srgb,var(--accent2) 11%,transparent) 0%,
      transparent 34%),
    radial-gradient(circle at 85% 66%,
      color-mix(in srgb,var(--accent) 9%,transparent) 0%,
      transparent 33%),
    linear-gradient(180deg,
      rgba(255,255,255,.018) 0%,
      transparent 34%,
      rgba(0,0,0,.11) 100%);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.heroFeatureArt::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 48%,
      transparent 0%,
      transparent 46%,
      rgba(0,0,0,.10) 72%,
      rgba(0,0,0,.23) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,.10),
      transparent 22%,
      transparent 78%,
      rgba(0,0,0,.10));
}

/* -----------------------------------------------------
   3) HEADER — OPEN CEREMONIAL STAGE
   Removes both the heavy outer-card feeling and the inner heroCore box.
   Luxury comes from spacing, fine light rails and a single floating search bar.
   ----------------------------------------------------- */
.hero{
  position:relative;
  isolation:isolate;
  min-height:520px;
  overflow:hidden;
  padding:38px 44px 36px;
  border:0;
  border-radius:36px;
  background:
    radial-gradient(ellipse at 50% 20%,
      color-mix(in srgb,var(--accent) 10%,rgba(4,4,7,.48)) 0%,
      rgba(4,4,7,.33) 34%,
      rgba(2,2,5,.20) 66%,
      rgba(2,2,5,.10) 100%);
  box-shadow:
    0 28px 80px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -1px 0 color-mix(in srgb,var(--accent) 10%,transparent);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

/* Two open horizontal rails replace the old rounded rectangular outline. */
.hero::before{
  content:"";
  position:absolute;
  left:34px;
  right:34px;
  top:15px;
  bottom:15px;
  z-index:2;
  pointer-events:none;
  border-top:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 19%,transparent);
  border-radius:28px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb,var(--accent) 42%,transparent) 18%,
      color-mix(in srgb,var(--strong) 32%,transparent) 50%,
      color-mix(in srgb,var(--accent) 42%,transparent) 82%,
      transparent 100%) top center / 72% 1px no-repeat,
    linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb,var(--accent) 19%,transparent) 22%,
      color-mix(in srgb,var(--accent2) 16%,transparent) 50%,
      color-mix(in srgb,var(--accent) 19%,transparent) 78%,
      transparent 100%) bottom center / 58% 1px no-repeat;
  box-shadow:
    0 -10px 28px -24px color-mix(in srgb,var(--accent) 70%,transparent),
    0 10px 28px -25px color-mix(in srgb,var(--accent2) 48%,transparent);
}

/* Small central ceremonial glint at the lower rail. */
.hero::after{
  content:"◆";
  position:absolute;
  left:50%;
  bottom:8px;
  z-index:3;
  transform:translateX(-50%) scaleX(.72);
  pointer-events:none;
  color:color-mix(in srgb,var(--accent) 72%,var(--strong));
  font-size:11px;
  line-height:1;
  text-shadow:
    0 0 8px color-mix(in srgb,var(--accent) 75%,transparent),
    0 0 18px color-mix(in srgb,var(--accent) 38%,transparent);
}

.heroBackdrop{z-index:1}
.heroContent{
  z-index:4;
  width:950px;
  transform:translateY(-3px);
}
.heroCore{
  position:relative;
  width:820px;
  margin:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.heroCore::before{
  content:"";
  position:absolute;
  left:120px;
  right:120px;
  bottom:-22px;
  height:1px;
  z-index:-1;
  pointer-events:none;
  border:0;
  border-radius:0;
  background:linear-gradient(90deg,
    transparent,
    color-mix(in srgb,var(--accent) 24%,transparent) 22%,
    color-mix(in srgb,var(--accent) 48%,transparent) 50%,
    color-mix(in srgb,var(--accent) 24%,transparent) 78%,
    transparent);
  box-shadow:0 0 13px color-mix(in srgb,var(--accent) 20%,transparent);
}

/* Logo floats directly in the aura — no plate, no enclosing shape. */
.logo{
  width:154px;
  height:154px;
  margin:-4px auto 3px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}
.logo img{
  filter:
    drop-shadow(0 0 10px color-mix(in srgb,var(--strong) 42%,transparent))
    drop-shadow(0 0 26px var(--glow))
    drop-shadow(0 0 48px color-mix(in srgb,var(--accent) 38%,transparent));
}

/* The Japanese wordmark is now a quiet crest line instead of another pill/box. */
.eyebrow{
  width:max-content;
  min-height:auto;
  display:block;
  margin:0 auto 13px;
  padding:0;
  border:0;
  border-radius:0;
  color:color-mix(in srgb,var(--strong) 78%,var(--accent));
  background:none;
  box-shadow:none;
  font-size:21px;
  font-weight:900;
  line-height:1;
  letter-spacing:.24em;
  text-shadow:
    0 2px 10px rgba(0,0,0,.72),
    0 0 17px color-mix(in srgb,var(--accent) 40%,transparent);
}
.mainTitle{
  margin:0 0 25px;
  font-size:72px;
  letter-spacing:3px;
  filter:none;
  text-shadow:
    0 4px 20px rgba(0,0,0,.56),
    0 0 28px color-mix(in srgb,var(--accent) 10%,transparent);
}

/* One deliberate floating control becomes the only strong container in the hero. */
.searchBar{
  width:780px;
  margin:0 auto;
  grid-template-columns:minmax(0,1fr) 194px;
  gap:8px;
  padding:7px;
  border:1px solid color-mix(in srgb,var(--accent) 42%,rgba(255,255,255,.08));
  border-radius:22px;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.055),
      color-mix(in srgb,var(--accent) 7%,rgba(3,3,7,.72)) 46%,
      rgba(2,2,5,.78));
  box-shadow:
    0 18px 44px rgba(0,0,0,.34),
    0 0 28px color-mix(in srgb,var(--accent) 8%,transparent),
    inset 0 1px 0 rgba(255,255,255,.095);
  backdrop-filter:blur(16px) saturate(1.12);
  -webkit-backdrop-filter:blur(16px) saturate(1.12);
}
.searchBar input{
  height:58px;
  border:1px solid color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.05));
  border-radius:15px;
  background:rgba(0,0,0,.48);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    inset 0 8px 22px rgba(0,0,0,.18);
}
.searchBar input:focus{
  border-color:color-mix(in srgb,var(--accent) 74%,var(--strong));
  box-shadow:
    0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent),
    inset 0 0 0 1px rgba(255,255,255,.025);
}
.searchBar button{
  border-radius:15px;
  box-shadow:
    0 10px 24px rgba(0,0,0,.30),
    0 0 18px color-mix(in srgb,var(--accent) 15%,transparent),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.heroNote{
  margin-top:17px;
  color:color-mix(in srgb,var(--muted) 86%,var(--strong));
}
.statusLine{margin-top:8px}

/* Corner navigation remains light so it does not recreate the old boxed header. */
.hero .recapButtonCorner{
  border-color:color-mix(in srgb,var(--accent) 30%,transparent);
  background:rgba(3,3,6,.33);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 22px rgba(0,0,0,.16);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.hero .recapButtonCorner:hover{
  border-color:color-mix(in srgb,var(--accent) 64%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,rgba(3,3,6,.48));
}

/* Preserve all current V58 student/photo/academic refinements below the hero. */
/* =====================================================
   V60 — SUBTLE PREMIUM HEADER ARTWORK
   Visual-only refinement.
   - Keeps the V59 gradient-only WEBSITE background.
   - Restores ONLY the header artwork.
   - Artwork is deliberately subdued so logo/title/search remain dominant.
   - Existing falling ornaments, student UI, academics, graduated UI and
     PDF/PNG behavior remain untouched.
   ===================================================== */

/* Header artwork returns as a low-contrast atmospheric layer. */
.heroFeatureArt,
body.front-mode .heroFeatureArt{
  inset:0;
  opacity:.68;
  transform:scale(1.025);
  transform-origin:center 24%;
  filter:saturate(.76) contrast(1.08) brightness(.62);
  background-image:
    linear-gradient(90deg,
      rgba(2,2,5,.78) 0%,
      rgba(2,2,5,.48) 18%,
      rgba(2,2,5,.25) 38%,
      rgba(2,2,5,.18) 50%,
      rgba(2,2,5,.25) 62%,
      rgba(2,2,5,.48) 82%,
      rgba(2,2,5,.78) 100%),
    linear-gradient(180deg,
      rgba(1,1,3,.50) 0%,
      rgba(1,1,3,.18) 34%,
      rgba(1,1,3,.30) 72%,
      rgba(1,1,3,.60) 100%),
    url("https://drive.google.com/thumbnail?id=1IuFDUcGJBLbRMFCWwH9a5gfnkhZM1mti&sz=w2400");
  background-size:cover,cover,cover;
  background-position:center,center,center 24%;
  background-repeat:no-repeat;
}

body.dorm-kosei .heroFeatureArt{
  opacity:.66;
  filter:saturate(.72) contrast(1.08) brightness(.61);
  background-image:
    linear-gradient(90deg,
      rgba(3,5,3,.80) 0%,
      rgba(4,7,3,.50) 18%,
      rgba(5,8,4,.27) 38%,
      rgba(5,8,4,.18) 50%,
      rgba(5,8,4,.27) 62%,
      rgba(4,7,3,.50) 82%,
      rgba(3,5,3,.80) 100%),
    linear-gradient(180deg,
      rgba(3,5,3,.51) 0%,
      rgba(4,6,3,.18) 34%,
      rgba(4,6,3,.30) 72%,
      rgba(3,5,3,.62) 100%),
    url("https://drive.google.com/thumbnail?id=1KJiRkV957u2OvAXbXWc1MDGXLKhDhcEv&sz=w2400");
  background-position:center,center,center 23%;
}

body.dorm-tsukiyomi .heroFeatureArt{
  opacity:.67;
  filter:saturate(.76) contrast(1.08) brightness(.62);
  background-image:
    linear-gradient(90deg,
      rgba(2,4,10,.81) 0%,
      rgba(4,7,17,.50) 18%,
      rgba(7,7,20,.27) 38%,
      rgba(7,7,20,.18) 50%,
      rgba(12,6,18,.27) 62%,
      rgba(13,5,16,.50) 82%,
      rgba(4,2,9,.81) 100%),
    linear-gradient(180deg,
      rgba(3,5,12,.52) 0%,
      rgba(5,6,15,.18) 34%,
      rgba(9,4,13,.30) 72%,
      rgba(5,3,10,.62) 100%),
    url("https://drive.google.com/thumbnail?id=1AXd7izgJikFHpDOTgLtK3HWfFPhRqrkC&sz=w2400");
  background-position:center,center,center 25%;
}

body.dorm-yamiyo .heroFeatureArt{
  opacity:.67;
  filter:saturate(.72) contrast(1.08) brightness(.60);
  background-image:
    linear-gradient(90deg,
      rgba(3,1,5,.82) 0%,
      rgba(8,3,12,.51) 18%,
      rgba(12,5,18,.28) 38%,
      rgba(12,5,18,.18) 50%,
      rgba(10,4,16,.28) 62%,
      rgba(9,3,14,.51) 82%,
      rgba(2,1,4,.82) 100%),
    linear-gradient(180deg,
      rgba(7,3,11,.53) 0%,
      rgba(8,3,13,.18) 34%,
      rgba(5,2,8,.31) 72%,
      rgba(3,1,5,.64) 100%),
    url("https://drive.google.com/thumbnail?id=1wRFGvZGcA05iAMgq5h0gvQcMmudWkk7_&sz=w2400");
  background-position:center,center,center 23%;
}

/* Focus veil: darkens the center directly behind the main interface,
   while leaving the artwork readable around the edges. */
.heroFeatureArt::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 46%,
      rgba(2,2,5,.62) 0%,
      rgba(2,2,5,.46) 24%,
      rgba(2,2,5,.20) 47%,
      rgba(2,2,5,.07) 66%,
      transparent 82%),
    linear-gradient(180deg,
      rgba(0,0,0,.12) 0%,
      transparent 24%,
      transparent 70%,
      rgba(0,0,0,.18) 100%);
}

/* Fine luxury sheen, intentionally very subtle. */
.heroFeatureArt::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.46;
  background:
    linear-gradient(115deg,
      transparent 0%,
      rgba(255,255,255,.026) 18%,
      transparent 34%,
      transparent 68%,
      color-mix(in srgb,var(--accent) 5%,transparent) 84%,
      transparent 100%);
}

/* Preserve the V59 open ceremonial composition, but give the hero a slightly
   more expensive edge treatment now that artwork is back. */
.hero{
  border:1px solid color-mix(in srgb,var(--accent) 19%,rgba(255,255,255,.035));
  background:
    radial-gradient(ellipse at 50% 20%,
      color-mix(in srgb,var(--accent) 7%,rgba(4,4,7,.28)) 0%,
      rgba(4,4,7,.20) 36%,
      rgba(2,2,5,.12) 68%,
      rgba(2,2,5,.08) 100%);
  box-shadow:
    0 30px 88px rgba(0,0,0,.34),
    0 0 34px color-mix(in srgb,var(--accent) 6%,transparent),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 color-mix(in srgb,var(--accent) 12%,transparent);
}

/* Content receives a precise shadow rather than another opaque panel,
   keeping the header artwork visible but secondary. */
.logo img{
  filter:
    drop-shadow(0 2px 5px rgba(0,0,0,.78))
    drop-shadow(0 0 10px color-mix(in srgb,var(--strong) 38%,transparent))
    drop-shadow(0 0 25px var(--glow))
    drop-shadow(0 0 46px color-mix(in srgb,var(--accent) 31%,transparent));
}
.eyebrow{
  text-shadow:
    0 2px 10px rgba(0,0,0,.88),
    0 0 18px color-mix(in srgb,var(--accent) 38%,transparent);
}
.mainTitle{
  text-shadow:
    0 3px 8px rgba(0,0,0,.92),
    0 8px 24px rgba(0,0,0,.52),
    0 0 28px color-mix(in srgb,var(--accent) 10%,transparent);
}

/* Search remains the strongest physical UI element in the composition. */
.searchBar{
  border-color:color-mix(in srgb,var(--accent) 48%,rgba(255,255,255,.095));
  background:
    linear-gradient(135deg,
      rgba(12,12,16,.82),
      color-mix(in srgb,var(--accent) 6%,rgba(4,4,8,.84)) 48%,
      rgba(2,2,5,.88));
  box-shadow:
    0 20px 48px rgba(0,0,0,.44),
    0 0 30px color-mix(in srgb,var(--accent) 9%,transparent),
    inset 0 1px 0 rgba(255,255,255,.11);
  backdrop-filter:blur(18px) saturate(1.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
}

/* Keep the website background itself artwork-free, exactly as requested in V59. */


/* =====================================================
   V61 — CLEAN HERO TITLE + GLASSY GP RANKING
   Visual-only refinement. All existing functionality remains untouched.
   ===================================================== */

/* Remove the dark/black title shadow that collided with the header artwork.
   The title keeps its house-colored gradient and receives only a soft
   luminous accent glow so the lettering stays clean and dominant. */
.mainTitle{
  text-shadow:
    0 0 10px rgba(255,255,255,.055),
    0 0 22px color-mix(in srgb,var(--strong) 13%,transparent),
    0 0 38px color-mix(in srgb,var(--accent) 16%,transparent);
  filter:
    drop-shadow(0 0 9px color-mix(in srgb,var(--accent) 13%,transparent));
  -webkit-text-stroke:.18px color-mix(in srgb,var(--strong) 18%,transparent);
}

/* Student GP Ranking: lighter premium glass surface.
   Transparency is increased just enough for the dorm gradient and falling
   ornaments to breathe through without sacrificing text readability. */
.gpRankingSection{
  border-color:color-mix(in srgb,var(--accent) 28%,rgba(255,255,255,.055));
  background:
    radial-gradient(circle at 100% 0%,
      color-mix(in srgb,var(--accent) 11%,transparent),
      transparent 42%),
    radial-gradient(circle at 0% 100%,
      color-mix(in srgb,var(--accent2) 7%,transparent),
      transparent 46%),
    linear-gradient(145deg,
      rgba(18,18,24,.48),
      rgba(5,5,10,.55));
  box-shadow:
    0 22px 58px rgba(0,0,0,.28),
    0 0 28px color-mix(in srgb,var(--accent) 5%,transparent),
    inset 0 1px 0 rgba(255,255,255,.065),
    inset 0 0 0 1px color-mix(in srgb,var(--accent) 4%,transparent);
  backdrop-filter:blur(18px) saturate(1.14);
  -webkit-backdrop-filter:blur(18px) saturate(1.14);
}

.gpRankingHeader{
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.022),
      color-mix(in srgb,var(--accent) 3%,transparent));
  border-bottom-color:color-mix(in srgb,var(--border) 72%,transparent);
}

.gpRankingContent{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.008),
      rgba(0,0,0,.035));
}


/* =====================================================
   V62 — HEADER CORNER CONTROLS POSITION FIX
   Visual-only refinement.
   Keeps HOME + GENERAL safely inside the inner header frame.
   ===================================================== */

/* Shift the GENERAL control left and slightly downward. */
.generalMenu{
  top:40px;
  right:58px;
}

/* Keep HOME aligned with GENERAL, preserving a clean consistent gap. */
.homeButtonCorner{
  top:40px;
  right:208px;
}

/* Slightly tighten the controls so their visual footprint stays comfortably
   within the inner ceremonial header frame. */
.recapButtonCorner{
  min-height:34px;
  padding:7px 14px;
}

/* GENERAL dropdown follows the new anchor and remains fully inside the header. */
.generalMenuPanel{
  top:44px;
  right:0;
}


/* =====================================================
   V63 — MORE VISIBLE HEADER ARTWORK + V62 CONTROL FIX
   Visual-only refinement.
   Keeps HOME + GENERAL safely inside the inner header frame.
   Makes header artwork clearer without overpowering the header content.
   ===================================================== */

/* GENERAL + HOME placement from V62 remains preserved. */
.generalMenu{
  top:40px;
  right:58px;
}

.homeButtonCorner{
  top:40px;
  right:208px;
}

.recapButtonCorner{
  min-height:34px;
  padding:7px 14px;
}

.generalMenuPanel{
  top:44px;
  right:0;
}

/* Raise artwork visibility while keeping it secondary to the content. */
.heroFeatureArt,
body.front-mode .heroFeatureArt{
  opacity:.82;
  filter:saturate(.86) contrast(1.06) brightness(.78);
}

body.dorm-kosei .heroFeatureArt{
  opacity:.80;
  filter:saturate(.82) contrast(1.06) brightness(.76);
}

body.dorm-tsukiyomi .heroFeatureArt{
  opacity:.82;
  filter:saturate(.86) contrast(1.06) brightness(.78);
}

body.dorm-yamiyo .heroFeatureArt{
  opacity:.81;
  filter:saturate(.82) contrast(1.06) brightness(.75);
}

/* Reduce the center dark veil so faces/scenery remain legible,
   while still protecting title/search readability. */
.heroFeatureArt::after{
  background:
    radial-gradient(ellipse at 50% 46%,
      rgba(2,2,5,.46) 0%,
      rgba(2,2,5,.32) 24%,
      rgba(2,2,5,.15) 47%,
      rgba(2,2,5,.045) 66%,
      transparent 82%),
    linear-gradient(180deg,
      rgba(0,0,0,.08) 0%,
      transparent 24%,
      transparent 72%,
      rgba(0,0,0,.12) 100%);
}

/* Tone down side-darkening so the artwork reads more naturally. */
.heroFeatureArt,
body.front-mode .heroFeatureArt{
  background-image:
    linear-gradient(90deg,
      rgba(2,2,5,.56) 0%,
      rgba(2,2,5,.30) 18%,
      rgba(2,2,5,.13) 38%,
      rgba(2,2,5,.08) 50%,
      rgba(2,2,5,.13) 62%,
      rgba(2,2,5,.30) 82%,
      rgba(2,2,5,.56) 100%),
    linear-gradient(180deg,
      rgba(1,1,3,.30) 0%,
      rgba(1,1,3,.09) 34%,
      rgba(1,1,3,.16) 72%,
      rgba(1,1,3,.36) 100%),
    url("https://drive.google.com/thumbnail?id=1IuFDUcGJBLbRMFCWwH9a5gfnkhZM1mti&sz=w2400");
  background-size:cover,cover,cover;
  background-position:center,center,center 24%;
  background-repeat:no-repeat;
}

body.dorm-kosei .heroFeatureArt{
  background-image:
    linear-gradient(90deg,
      rgba(3,5,3,.58) 0%,
      rgba(4,7,3,.31) 18%,
      rgba(5,8,4,.14) 38%,
      rgba(5,8,4,.08) 50%,
      rgba(5,8,4,.14) 62%,
      rgba(4,7,3,.31) 82%,
      rgba(3,5,3,.58) 100%),
    linear-gradient(180deg,
      rgba(3,5,3,.31) 0%,
      rgba(4,6,3,.09) 34%,
      rgba(4,6,3,.16) 72%,
      rgba(3,5,3,.38) 100%),
    url("https://drive.google.com/thumbnail?id=1KJiRkV957u2OvAXbXWc1MDGXLKhDhcEv&sz=w2400");
  background-position:center,center,center 23%;
}

body.dorm-tsukiyomi .heroFeatureArt{
  background-image:
    linear-gradient(90deg,
      rgba(2,4,10,.58) 0%,
      rgba(4,7,17,.31) 18%,
      rgba(7,7,20,.14) 38%,
      rgba(7,7,20,.08) 50%,
      rgba(12,6,18,.14) 62%,
      rgba(13,5,16,.31) 82%,
      rgba(4,2,9,.58) 100%),
    linear-gradient(180deg,
      rgba(3,5,12,.32) 0%,
      rgba(5,6,15,.09) 34%,
      rgba(9,4,13,.16) 72%,
      rgba(5,3,10,.38) 100%),
    url("https://drive.google.com/thumbnail?id=1AXd7izgJikFHpDOTgLtK3HWfFPhRqrkC&sz=w2400");
  background-position:center,center,center 25%;
}

body.dorm-yamiyo .heroFeatureArt{
  background-image:
    linear-gradient(90deg,
      rgba(3,1,5,.60) 0%,
      rgba(8,3,12,.32) 18%,
      rgba(12,5,18,.15) 38%,
      rgba(12,5,18,.08) 50%,
      rgba(10,4,16,.15) 62%,
      rgba(9,3,14,.32) 82%,
      rgba(2,1,4,.60) 100%),
    linear-gradient(180deg,
      rgba(7,3,11,.33) 0%,
      rgba(8,3,13,.09) 34%,
      rgba(5,2,8,.17) 72%,
      rgba(3,1,5,.40) 100%),
    url("https://drive.google.com/thumbnail?id=1wRFGvZGcA05iAMgq5h0gvQcMmudWkk7_&sz=w2400");
  background-position:center,center,center 23%;
}

/* Preserve clean title treatment from V61. */
.mainTitle{
  text-shadow:
    0 0 10px rgba(255,255,255,.055),
    0 0 22px color-mix(in srgb,var(--strong) 13%,transparent),
    0 0 38px color-mix(in srgb,var(--accent) 16%,transparent);
  filter:drop-shadow(0 0 9px color-mix(in srgb,var(--accent) 13%,transparent));
}


/* =====================================================================
   V66 — CLEAN MOBILE APPLICATION UI
   Desktop styling above is intentionally untouched. All mobile changes
   are isolated below 768px and never resize document/PDF canvases.
   ===================================================================== */
.mobileAppHeader,
.mobileBottomNav,
.mobileSearchIcon,
.mobileHeroStats{display:none}

@media (max-width:768px){
  :root{
    --m-pad:14px;
    --m-nav:72px;
    --m-surface:rgba(16,16,22,.94);
    --m-surface-2:rgba(8,8,12,.96);
    --m-card:rgba(255,255,255,.045);
    --m-line:color-mix(in srgb,var(--accent) 24%,rgba(255,255,255,.10));
    --m-line-soft:color-mix(in srgb,var(--accent) 13%,rgba(255,255,255,.07));
  }

  html,body{
    width:100%;
    max-width:100%;
    min-width:0!important;
    margin:0;
    overflow-x:hidden!important;
  }
  html{
    scroll-behavior:smooth;
    touch-action:pan-y pinch-zoom;
    background:#08080c;
  }
  body{
    min-height:100dvh;
    padding:0 0 calc(var(--m-nav) + env(safe-area-inset-bottom) + 18px);
    color:var(--text);
    font-size:14px;
    line-height:1.45;
    background:
      radial-gradient(circle at 5% 0%,color-mix(in srgb,var(--accent) 17%,transparent),transparent 30%),
      radial-gradient(circle at 100% 8%,color-mix(in srgb,var(--accent2) 13%,transparent),transparent 27%),
      linear-gradient(165deg,var(--bg1),#0a0a0f 52%,var(--bg2));
    background-attachment:fixed;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  button,input,a{-webkit-tap-highlight-color:transparent}
  button,input{font-size:16px}
  .shell{
    width:100%;
    max-width:100%;
    margin:0;
    padding:calc(env(safe-area-inset-top) + 10px) var(--m-pad) 28px;
  }
  .backdrop{opacity:.16}
  .faller:nth-child(n+7),.heroFaller:nth-child(n+4){display:none}

  /* ---------- APP BAR ---------- */
  .mobileAppHeader{
    position:absolute;
    top:14px;
    left:16px;
    z-index:12;
    display:flex;
    align-items:center;
    min-width:0;
    max-width:calc(100% - 122px);
  }
  .mobileAppBrand{display:flex;align-items:center;gap:9px;min-width:0}
  .mobileAppBrandSeal{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    padding:5px;
    border:1px solid var(--m-line);
    border-radius:12px;
    background:rgba(10,10,14,.76);
    box-shadow:0 8px 18px rgba(0,0,0,.32),inset 0 0 14px color-mix(in srgb,var(--accent) 8%,transparent);
    backdrop-filter:blur(14px);
  }
  .mobileAppBrandSeal img{width:100%;height:100%;object-fit:contain}
  .mobileAppBrandCopy{display:grid;gap:1px;min-width:0}
  .mobileAppBrandCopy strong{
    overflow:hidden;
    color:var(--strong);
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .mobileAppBrandCopy small{color:var(--muted);font-size:9px;font-weight:600;white-space:nowrap}
  .mobileAppLive{display:none}

  .generalMenu{position:absolute;top:14px;right:16px;z-index:13}
  .generalMenu .recapButtonCorner{position:static}
  .generalMenuButton{
    min-width:91px!important;
    min-height:38px!important;
    padding:7px 8px 7px 12px!important;
    border:1px solid var(--m-line)!important;
    border-radius:12px!important;
    color:var(--accent)!important;
    background:rgba(10,10,14,.78)!important;
    box-shadow:0 8px 18px rgba(0,0,0,.30)!important;
    backdrop-filter:blur(14px);
    font-size:9px!important;
  }
  .generalMenuChevron{width:21px;height:21px;font-size:11px}
  .homeButtonCorner{
    top:61px!important;
    left:16px!important;
    right:auto!important;
    z-index:12!important;
    min-width:69px!important;
    min-height:31px!important;
    padding:6px 10px!important;
    border-radius:10px!important;
    font-size:8px!important;
    background:rgba(10,10,14,.78)!important;
    backdrop-filter:blur(14px);
  }
  body.front-mode .homeButtonCorner{display:none!important}
  .generalMenuPanel{
    position:fixed!important;
    top:calc(env(safe-area-inset-top) + 61px)!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    padding:9px!important;
    border-radius:19px!important;
    background:linear-gradient(145deg,rgba(22,21,27,.99),rgba(7,7,10,.995))!important;
    box-shadow:0 28px 70px rgba(0,0,0,.72)!important;
    backdrop-filter:blur(22px)!important;
  }
  .generalMenuPanel button{padding:14px!important;border-radius:13px!important}
  .generalMenuPanel button+button{margin-top:6px!important}
  .generalMenuItemTitle{font-size:11px!important}
  .generalMenuItemText{margin-top:4px!important;font-size:10px!important;line-height:1.4!important}

  /* ---------- HERO ---------- */
  .hero{
    min-height:420px!important;
    display:block!important;
    overflow:hidden!important;
    padding:72px 16px 18px!important;
    border:1px solid var(--m-line)!important;
    border-radius:24px!important;
    background:
      linear-gradient(180deg,rgba(5,5,9,.20),rgba(5,5,9,.48) 42%,rgba(5,5,9,.94) 82%),
      radial-gradient(circle at 50% 10%,color-mix(in srgb,var(--accent) 17%,transparent),transparent 48%)!important;
    box-shadow:0 20px 50px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.025)!important;
  }
  .heroFeatureArt,
  body.front-mode .heroFeatureArt{
    opacity:.36!important;
    background-size:cover,cover,auto 88%!important;
    background-position:center,center,center 20%!important;
    filter:saturate(.70) contrast(1.02) brightness(.66)!important;
  }
  .heroFeatureArt::after{
    background:
      linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.22) 45%,rgba(0,0,0,.92) 85%),
      radial-gradient(ellipse at 50% 32%,transparent 0%,rgba(0,0,0,.18) 50%,rgba(0,0,0,.58) 100%)!important;
  }
  .heroContent{
    position:relative!important;
    z-index:4!important;
    width:100%!important;
    min-height:330px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    text-align:center!important;
  }
  .logo{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    width:72px!important;
    height:72px!important;
    margin:0 auto 8px!important;
    padding:8px!important;
    border:1px solid var(--m-line)!important;
    border-radius:20px!important;
    background:rgba(8,8,12,.52)!important;
    box-shadow:0 14px 30px rgba(0,0,0,.34),inset 0 0 20px color-mix(in srgb,var(--accent) 8%,transparent)!important;
    transform:none!important;
    backdrop-filter:blur(12px)!important;
  }
  .logo img{transform:none!important;filter:drop-shadow(0 0 12px var(--glow))!important}
  .heroCore{width:100%!important;margin:0!important;padding:0!important}
  .eyebrow{
    margin:0 0 4px!important;
    color:var(--accent)!important;
    font-size:11px!important;
    letter-spacing:.14em!important;
    text-align:center!important;
  }
  .mainTitle{
    max-width:100%!important;
    margin:0 0 16px!important;
    color:var(--strong)!important;
    font-size:clamp(26px,7.7vw,32px)!important;
    line-height:1.02!important;
    letter-spacing:.015em!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    text-align:center!important;
    background:none!important;
    -webkit-text-fill-color:currentColor!important;
    filter:none!important;
    text-shadow:0 4px 22px rgba(0,0,0,.52),0 0 18px color-mix(in srgb,var(--accent) 14%,transparent)!important;
  }
  .searchBar{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 50px!important;
    gap:7px!important;
    margin:0!important;
    padding:6px!important;
    border:1px solid var(--m-line)!important;
    border-radius:17px!important;
    background:rgba(9,9,13,.76)!important;
    box-shadow:0 14px 30px rgba(0,0,0,.34)!important;
    backdrop-filter:blur(16px)!important;
  }
  .searchBar input{
    min-width:0!important;
    width:100%!important;
    height:48px!important;
    padding:0 14px!important;
    border:0!important;
    border-radius:12px!important;
    color:var(--strong)!important;
    background:rgba(0,0,0,.42)!important;
    box-shadow:none!important;
    font-size:14px!important;
    text-align:left!important;
  }
  .searchBar input::placeholder{color:color-mix(in srgb,var(--muted) 82%,transparent)!important}
  .searchBar input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 46%,transparent)!important}
  .searchBar button{
    width:50px!important;
    height:48px!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    border-radius:13px!important;
    font-size:0!important;
  }
  .desktopSearchText{display:none!important}
  .mobileSearchIcon{display:grid!important;place-items:center!important}
  .mobileSearchIcon svg{width:21px;height:21px;fill:none;stroke:#17110d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .heroNote{
    max-width:320px!important;
    margin:11px auto 0!important;
    color:var(--muted)!important;
    font-size:10px!important;
    line-height:1.45!important;
    text-align:center!important;
  }
  .statusLine{
    min-height:17px!important;
    margin:6px 4px 0!important;
    color:var(--accent)!important;
    font-size:10px!important;
    line-height:1.35!important;
    text-align:center!important;
  }
  .mobileHeroStats{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    margin-top:10px!important;
  }
  .mobileHeroStats span{
    min-width:0!important;
    min-height:45px!important;
    display:grid!important;
    align-content:center!important;
    gap:2px!important;
    padding:7px 4px!important;
    border:1px solid var(--m-line-soft)!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.028)!important;
    text-align:center!important;
  }
  .mobileHeroStats b{color:var(--strong)!important;font-size:9px!important;letter-spacing:.08em!important}
  .mobileHeroStats small{color:var(--muted)!important;font-size:7px!important;line-height:1.15!important}

  /* Compact result header after a search. */
  body:not(.front-mode) .hero{
    min-height:238px!important;
    padding-top:60px!important;
  }
  body:not(.front-mode) .heroContent{min-height:160px!important;justify-content:flex-end!important}
  body:not(.front-mode) .logo,
  body:not(.front-mode) .eyebrow,
  body:not(.front-mode) .heroNote,
  body:not(.front-mode) .mobileHeroStats{display:none!important}
  body:not(.front-mode) .mainTitle{
    margin:0 0 10px!important;
    font-size:20px!important;
    line-height:1!important;
    text-align:left!important;
  }
  body:not(.front-mode) .statusLine{text-align:left!important;margin-left:2px!important}
  body:not(.front-mode) .heroFeatureArt{opacity:.20!important}

  /* ---------- RANKING ---------- */
  .gpRankingSection{
    margin-top:13px!important;
    overflow:hidden!important;
    border:1px solid var(--m-line)!important;
    border-radius:22px!important;
    background:linear-gradient(145deg,var(--m-surface),var(--m-surface-2))!important;
    box-shadow:0 18px 46px rgba(0,0,0,.35)!important;
  }
  .gpRankingHeader{
    min-height:0!important;
    display:block!important;
    padding:18px 16px 14px!important;
  }
  .gpRankingEyebrow{font-size:8px!important;line-height:1.3!important;letter-spacing:.12em!important}
  .gpRankingTitle{margin:5px 0 0!important;font-size:22px!important;line-height:1.04!important;letter-spacing:0!important}
  .gpRankingDisclaimer{margin:7px 0 0!important;font-size:10px!important;line-height:1.45!important}
  .gpRankingMeta{
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    margin-top:11px!important;
    text-align:left!important;
  }
  .gpRankingSemester{max-width:58%!important;min-height:27px!important;padding:6px 8px!important;font-size:7px!important;line-height:1.2!important}
  .gpRankingUpdated{max-width:42%!important;margin:0!important;font-size:8px!important;line-height:1.3!important;text-align:right!important}
  .gpRankingContent{padding:10px!important}
  .gpArena{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .gpRankingLoading{min-height:90px!important;font-size:10px!important}
  .gpRankCard{
    min-height:94px!important;
    display:grid!important;
    grid-template-columns:58px minmax(0,1fr) auto!important;
    gap:10px!important;
    align-items:center!important;
    padding:10px!important;
    border:1px solid var(--m-line-soft)!important;
    border-radius:17px!important;
    background:rgba(255,255,255,.032)!important;
    box-shadow:none!important;
  }
  .gpRankCard::before{display:none!important}
  .gpRankLeft{display:grid!important;justify-items:center!important;gap:4px!important}
  .gpRankNo{min-width:40px!important;min-height:22px!important;padding:4px 6px!important;font-size:9px!important}
  .gpRankAvatar{width:54px!important;height:54px!important}
  .gpRankAvatarGlow{inset:-4px!important;border-radius:16px!important;filter:blur(5px)!important}
  .gpRankAvatarFrame{width:50px!important;height:50px!important;border-width:1px!important;border-radius:14px!important;box-shadow:0 5px 12px rgba(0,0,0,.24)!important}
  .gpRankAvatarFrame::after{border-radius:13px!important}
  .gpRankHouseWatermark{inset:0!important;width:54px!important;height:54px!important;opacity:.08!important}
  .gpRankHouseBadge{right:-2px!important;bottom:-2px!important;width:23px!important;height:23px!important;border-radius:8px!important}
  .gpRankHouseBadge img{width:16px!important;height:16px!important}
  .gpRankBody{min-width:0!important}
  .gpRankTopline{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:6px!important;font-size:7px!important;letter-spacing:.04em!important}
  .gpRankHouse{min-height:19px!important;padding:3px 6px!important;font-size:7px!important}
  .gpRankId{font-size:7px!important;white-space:nowrap!important}
  .gpRankNameButton,.gpRankName{
    max-width:100%!important;
    margin:5px 0 0!important;
    overflow:hidden!important;
    color:var(--strong)!important;
    font-size:14px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    text-overflow:ellipsis!important;
  }
  .gpRankKanji{margin-top:4px!important;overflow:hidden!important;font-size:10px!important;line-height:1.2!important;white-space:nowrap!important;text-overflow:ellipsis!important}
  .gpRankUsername{margin-top:5px!important;overflow:hidden!important;font-size:8px!important;white-space:nowrap!important;text-overflow:ellipsis!important}
  .gpRankScore{min-width:54px!important;display:grid!important;gap:2px!important;justify-items:end!important;text-align:right!important}
  .gpRankScoreLabel{font-size:6px!important;letter-spacing:.08em!important}
  .gpRankScoreValue{font-size:18px!important;line-height:1!important;white-space:nowrap!important}

  /* ---------- RESULT / PROFILE ---------- */
  #resultSection,.resultGrid{width:100%!important;max-width:100%!important}
  .resultGrid,
  .resultGrid.graduatedLayout{
    margin-top:13px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
  }
  .resultGrid.graduatedLayout::before{display:none!important}
  .rightColumn{display:flex!important;flex-direction:column!important;gap:12px!important}
  .panel,
  .resultGrid.graduatedLayout #studentProfilePanel,
  .resultGrid.graduatedLayout .rightColumn>aside.panel{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    border:1px solid var(--m-line)!important;
    border-radius:22px!important;
    background:linear-gradient(145deg,var(--m-surface),var(--m-surface-2))!important;
    box-shadow:0 18px 44px rgba(0,0,0,.34)!important;
    backdrop-filter:blur(16px)!important;
  }
  .panelInner{padding:13px!important}

  .profileHeader,
  .resultGrid.graduatedLayout #studentProfilePanel .profileHeader{
    position:relative!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:78px minmax(0,1fr) 48px!important;
    gap:11px!important;
    align-items:center!important;
    padding:13px!important;
    border:1px solid var(--m-line-soft)!important;
    border-radius:17px!important;
    background:rgba(255,255,255,.03)!important;
    box-shadow:none!important;
  }
  #studentProfilePanel .avatar,
  .resultGrid.graduatedLayout #studentProfilePanel .avatar{
    position:relative!important;
    width:78px!important;
    height:78px!important;
    min-width:78px!important;
    min-height:78px!important;
    margin:0!important;
    border-width:1px!important;
    border-radius:18px!important;
    box-shadow:0 8px 18px rgba(0,0,0,.28),0 0 0 2px rgba(0,0,0,.46)!important;
  }
  #studentProfilePanel .avatar::before,
  #studentProfilePanel .avatar::after{display:none!important}
  #studentProfilePanel .avatar img,
  .resultGrid.graduatedLayout #studentProfilePanel .avatar img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:50% 17%!important;
    transform:scale(1.12)!important;
    transform-origin:50% 17%!important;
  }
  .identity{min-width:0!important;overflow:hidden!important}
  .studentName,
  .resultGrid.graduatedLayout #studentProfilePanel .studentName{
    max-width:100%!important;
    margin:0!important;
    overflow:hidden!important;
    color:var(--strong)!important;
    font-size:clamp(17px,4.8vw,21px)!important;
    line-height:1.08!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    text-overflow:ellipsis!important;
    text-shadow:none!important;
  }
  .metaLine{
    width:100%!important;
    margin-top:7px!important;
    display:grid!important;
    gap:6px!important;
    white-space:normal!important;
  }
  .metaLine .divider{display:none!important}
  .studentKanji{
    max-width:100%!important;
    overflow:hidden!important;
    font-size:12px!important;
    line-height:1.25!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }
  .badges{display:flex!important;flex-wrap:wrap!important;gap:4px!important;padding:0!important}
  .badge{min-height:21px!important;padding:4px 7px!important;font-size:6px!important;line-height:1!important}
  .crest{
    position:relative!important;
    right:auto!important;
    bottom:auto!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    padding:5px!important;
    border-radius:14px!important;
    background:rgba(0,0,0,.28)!important;
  }
  .crest img{width:35px!important;height:35px!important}
  .crestName{display:none!important}

  .infoGrid{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    margin-top:10px!important;
  }
  .infoCard,
  .graduatedWideSections>.infoCard{
    min-width:0!important;
    padding:11px!important;
    border:1px solid var(--m-line-soft)!important;
    border-radius:15px!important;
    background:rgba(255,255,255,.028)!important;
    box-shadow:inset 2px 0 0 var(--accent)!important;
  }
  .compact{min-height:73px!important}
  .wide{grid-column:1/-1!important}
  .label{margin-bottom:5px!important;font-size:7px!important;line-height:1.25!important;letter-spacing:.07em!important}
  .value{
    max-width:100%!important;
    overflow:hidden!important;
    color:var(--strong)!important;
    font-size:12px!important;
    line-height:1.3!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
  }
  .xLink{max-width:100%!important;gap:6px!important;overflow:hidden!important}
  .xMark{width:20px!important;height:20px!important;flex:0 0 20px!important;font-size:8px!important}
  .finance{min-height:77px!important}
  .financeValue{font-size:23px!important;line-height:1.05!important;overflow-wrap:anywhere!important}
  .largeCardLabel.sectionTitle{font-size:11px!important;line-height:1.3!important;white-space:normal!important}
  .occupationList{max-height:none!important;overflow:visible!important;padding-right:0!important}
  .occupation{grid-template-columns:31px 1fr!important;gap:9px!important;padding:10px!important;border-radius:13px!important}
  .occupationNo{width:29px!important;height:29px!important;border-radius:9px!important;font-size:9px!important}
  .workplace{font-size:8px!important;line-height:1.3!important}
  .position{margin-top:3px!important;font-size:11px!important;line-height:1.35!important}

  /* Graduated sections must stay compact, not ceremonial/full-height. */
  .graduatedWideSections{
    width:100%!important;
    display:grid!important;
    gap:12px!important;
    margin:0!important;
  }
  .resultGrid.graduatedLayout .graduatedWideSections>#occupationCard,
  .resultGrid.graduatedLayout .graduatedWideSections>#academicCardPanel{
    border-radius:22px!important;
    box-shadow:0 18px 44px rgba(0,0,0,.34)!important;
  }

  /* ---------- ACADEMIC ---------- */
  .academicCard{padding:12px!important}
  #academicCardPanel .academicTop,
  .academicTop{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    align-items:start!important;
    padding-bottom:11px!important;
  }
  .academicIntro{font-size:9px!important;line-height:1.4!important}
  #academicCardPanel .academicActions,
  .academicActions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    gap:7px!important;
    justify-items:stretch!important;
  }
  .count,.transcriptButton{
    min-height:34px!important;
    display:grid!important;
    place-items:center!important;
    padding:7px 8px!important;
    border-radius:11px!important;
    font-size:7px!important;
    line-height:1.2!important;
    text-align:center!important;
    white-space:normal!important;
  }
  .academicRecords{max-height:none!important;overflow:visible!important;gap:9px!important;padding-right:0!important}
  .academicLoading{min-height:145px!important;grid-template-columns:40px minmax(0,1fr)!important;gap:11px!important;padding:16px!important;border-radius:15px!important}
  .academicLoadingOrb{width:38px!important;height:38px!important}
  .academicLoadingTitle{font-size:11px!important}
  .academicLoadingText{font-size:9px!important;line-height:1.4!important}
  .semesterCard{border-radius:15px!important}
  .semesterHead{padding:11px!important}
  .semesterTitle{font-size:12px!important}
  .nensei{padding:5px 7px!important;font-size:7px!important}
  .miniTitle{margin:10px 10px 7px!important;font-size:7px!important}
  .participation{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;padding:0 10px!important}
  .part{min-height:46px!important;padding:7px!important}
  .partName{font-size:6px!important}
  .partState{font-size:7px!important;line-height:1.15!important}
  .subjects{gap:7px!important;padding:0 10px!important}
  .subjectHeader{display:none!important}
  .subjectRow{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;padding:9px!important;border-radius:11px!important}
  .subjectName{grid-column:1/-1!important;padding-bottom:7px!important;border-bottom:1px solid var(--m-line-soft)!important;font-size:9px!important;line-height:1.3!important}
  .mark{position:relative!important;min-height:39px!important;padding:14px 5px 4px!important;border-radius:9px!important;font-size:9px!important}
  .mark::before{position:absolute!important;top:4px!important;left:0!important;right:0!important;color:var(--muted)!important;font-family:"League Spartan",Arial,sans-serif!important;font-size:5px!important;font-weight:800!important;letter-spacing:.06em!important;text-align:center!important}
  .subjectRow .mark:nth-child(2)::before{content:'NUMBER'}
  .subjectRow .mark:nth-child(3)::before{content:'KANJI'}
  .mark.numberMark{font-size:11px!important}
  .mark.kanjiMark{font-size:9px!important}
  .semesterFoot{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;padding:10px!important}
  .outcome{padding:8px!important}
  .outcomeLabel{font-size:6px!important}
  .outcomeValue{font-size:8px!important;line-height:1.25!important}
  .reportButton{grid-column:1/-1!important;min-height:37px!important;font-size:7px!important}

  /* ---------- MEDIA / POINT LOG ---------- */
  .sectionHeader,.sectionHeader.single{
    min-height:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    padding:14px!important;
  }
  .sectionTitle{font-size:11px!important;line-height:1.3!important;white-space:normal!important}
  .semesterBadge{max-width:100%!important;padding:6px 8px!important;font-size:7px!important;text-align:left!important}
  .semesterNote{margin:9px 14px 0!important;font-size:9px!important;line-height:1.4!important}
  .mediaStack{padding:10px 12px 14px!important}
  .mediaCard{border-radius:15px!important}
  .mediaPreview{min-height:165px!important}
  .mediaPreview img{width:100%!important;max-height:none!important;object-fit:contain!important}
  .mediaAction{padding:9px!important}
  .openButton{min-height:37px!important;border-radius:11px!important;font-size:7px!important}
  .totals{gap:6px!important;padding:11px 12px!important}
  .total{min-height:72px!important;padding:9px 5px!important;border-radius:13px!important;text-align:center!important}
  .totalLabel{font-size:6px!important;line-height:1.2!important}
  .totalValue{margin-top:6px!important;font-size:20px!important}
  .logBar{display:grid!important;gap:3px!important;padding:0 14px 9px!important;font-size:8px!important}
  .pointLogs{max-height:none!important;overflow:visible!important;padding:10px 12px 14px!important}
  .logItem{grid-template-columns:1fr!important;gap:6px!important;padding:10px!important;border-radius:13px!important}
  .logDate{font-size:8px!important}
  .logDesc{font-size:10px!important;line-height:1.4!important}
  .chip{padding:4px 7px!important;font-size:7px!important}
  .footer{margin:16px 4px 0!important;padding:14px 6px!important;font-size:8px!important}

  /* ---------- BOTTOM TAB BAR ---------- */
  .mobileBottomNav{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    z-index:9000!important;
    height:var(--m-nav)!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:center!important;
    gap:0!important;
    padding:7px 5px!important;
    border:1px solid var(--m-line)!important;
    border-radius:21px!important;
    background:rgba(10,10,14,.96)!important;
    box-shadow:0 16px 42px rgba(0,0,0,.58)!important;
    backdrop-filter:blur(22px)!important;
  }
  .mobileNavItem{
    position:relative!important;
    min-width:0!important;
    height:56px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    padding:3px 1px!important;
    border:0!important;
    color:var(--muted)!important;
    background:transparent!important;
    font-size:7px!important;
    font-weight:700!important;
    cursor:pointer!important;
  }
  .mobileNavIcon{
    width:27px!important;
    height:27px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:9px!important;
  }
  .mobileNavIcon svg,.mobileNavPrimaryButton svg{width:17px!important;height:17px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
  .mobileNavItem.is-active{color:var(--strong)!important}
  .mobileNavItem.is-active .mobileNavIcon{color:#17110d!important;background:linear-gradient(135deg,var(--accent),var(--strong))!important;box-shadow:0 6px 14px color-mix(in srgb,var(--accent) 18%,transparent)!important}
  .mobileNavPrimary{justify-content:center!important}
  .mobileNavPrimaryButton{
    position:static!important;
    width:39px!important;
    height:39px!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid color-mix(in srgb,var(--accent) 42%,rgba(255,255,255,.16))!important;
    border-radius:13px!important;
    color:#17110d!important;
    background:linear-gradient(135deg,var(--accent2),var(--strong) 56%,var(--accent))!important;
    box-shadow:0 8px 18px rgba(0,0,0,.38),0 0 18px color-mix(in srgb,var(--accent) 18%,transparent)!important;
    transform:none!important;
  }
  .mobileNavPrimaryButton svg{transform:none!important}
  .mobileNavPrimary>span:last-child{color:var(--strong)!important}

  /* ---------- MOBILE MODALS ---------- */
  .modal{align-items:end!important;padding:8px!important}
  .modalCard,.nenseiModalCard{width:100%!important;max-width:100%!important;max-height:88dvh!important;border-radius:22px 22px 15px 15px!important}
  .modalHeader{display:grid!important;gap:11px!important;padding:16px 14px 12px!important}
  .modalTitle{font-size:16px!important}
  .modalSubtitle{font-size:9px!important;line-height:1.4!important}
  .modalButtons{display:grid!important;grid-template-columns:1fr auto!important;gap:7px!important}
  .modalButtons button{min-height:36px!important;padding:8px 9px!important;font-size:7px!important}
  .summary{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:11px 12px!important}
  .summaryCard{padding:9px!important;border-radius:12px!important}
  .summaryLabel{font-size:6px!important}
  .summaryValue{font-size:18px!important}
  .tableWrap,.nenseiRecapBody{padding:0 12px 14px!important;overflow:auto!important}
  .recapTable,.nenseiRecapTable{min-width:760px!important}
  .documentReviewModal{padding:6px!important}
  .documentReviewCard{width:100%!important;height:96dvh!important;border-radius:19px!important}
  .documentReviewHeader{display:grid!important;gap:9px!important;padding:11px!important}
  .documentReviewTitle{font-size:14px!important;white-space:normal!important}
  .documentReviewSubtitle{font-size:8px!important}
  .documentReviewActions{display:grid!important;grid-template-columns:1fr 1fr auto!important;gap:5px!important}
  .documentReviewActions button{min-height:34px!important;padding:7px!important;font-size:6px!important}
  .documentReviewViewport{padding:9px!important;overflow:auto!important}
  .documentReviewPages{justify-content:start!important;gap:16px!important;min-width:816px!important}
  .devotedFileModal{padding:7px!important}
  .devotedFileCard{width:100%!important;height:94dvh!important;border-radius:20px!important}
  .devotedFileHeader{display:grid!important;gap:10px!important;padding:13px!important}
  .devotedFileTitle{font-size:16px!important}
  .devotedFileClose{justify-self:end!important}
  .pdfBox{min-width:0!important;width:calc(100vw - 30px)!important;padding:21px 15px!important}

  /* Keep generated documents at their exact export dimensions. */
  .pdfRoot,.pdfPage,.pdfPage *{max-width:none!important}
}

@media (max-width:390px){
  :root{--m-pad:10px}
  .mobileAppHeader{left:12px!important;max-width:calc(100% - 109px)!important}
  .mobileAppBrandSeal{width:35px!important;height:35px!important;flex-basis:35px!important}
  .mobileAppBrandCopy strong{font-size:10px!important}
  .mobileAppBrandCopy small{font-size:8px!important}
  .generalMenu{right:12px!important}
  .generalMenuButton{min-width:84px!important}
  .hero{padding-left:13px!important;padding-right:13px!important}
  .profileHeader,
  .resultGrid.graduatedLayout #studentProfilePanel .profileHeader{grid-template-columns:70px minmax(0,1fr) 42px!important;gap:9px!important;padding:11px!important}
  #studentProfilePanel .avatar,
  .resultGrid.graduatedLayout #studentProfilePanel .avatar{width:70px!important;height:70px!important;min-width:70px!important;min-height:70px!important}
  .crest{width:42px!important;height:42px!important;min-width:42px!important}
  .crest img{width:30px!important;height:30px!important}
  .studentName,.resultGrid.graduatedLayout #studentProfilePanel .studentName{font-size:17px!important}
  .gpRankCard{grid-template-columns:54px minmax(0,1fr) auto!important;gap:8px!important;padding:9px!important}
  .gpRankAvatar{width:50px!important;height:50px!important}
  .gpRankAvatarFrame{width:46px!important;height:46px!important}
  .gpRankHouseWatermark{width:50px!important;height:50px!important}
  .gpRankNameButton,.gpRankName{font-size:13px!important}
  .gpRankScoreValue{font-size:17px!important}
  .mobileBottomNav{left:6px!important;right:6px!important}
}

@media (max-width:350px){
  .mobileAppBrandCopy small{display:none!important}
  .infoGrid{grid-template-columns:1fr!important}
  .wide{grid-column:1!important}
  .profileHeader,
  .resultGrid.graduatedLayout #studentProfilePanel .profileHeader{grid-template-columns:66px minmax(0,1fr) 38px!important}
  #studentProfilePanel .avatar,
  .resultGrid.graduatedLayout #studentProfilePanel .avatar{width:66px!important;height:66px!important;min-width:66px!important;min-height:66px!important}
  .crest{width:38px!important;height:38px!important;min-width:38px!important}
  .crest img{width:27px!important;height:27px!important}
  .studentName,.resultGrid.graduatedLayout #studentProfilePanel .studentName{font-size:15px!important}
  .mobileNavItem{font-size:6px!important}
}

@media (prefers-reduced-motion:reduce) and (max-width:768px){
  html{scroll-behavior:auto!important}
  .faller,.heroFaller{animation:none!important}
}

/* =====================================================================
   V67 — HORIZONTAL SWIPE APPLICATION PAGES
   Desktop remains unchanged. Mobile becomes a page-by-page app:
   the body no longer grows endlessly; each page may scroll internally,
   while horizontal swipes move between Home, Ranking, Profile, ID Card,
   Points, Academic Records, and Graduation sections.
   ===================================================================== */
.mobileSwipeViewport,
.mobileSwipeTrack,
.mobileSwipePage,
.mobileSwipeRail,
.mobileSwipeEdge{display:none}

@media (max-width:768px){
  :root{
    --m-swipe-rail:48px;
    --m-page-gap:10px;
  }

  html,
  body{
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }

  body{
    padding:0!important;
  }

  .shell{
    width:100%!important;
    height:100dvh!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:
      calc(env(safe-area-inset-top) + 8px)
      0
      calc(var(--m-nav) + var(--m-swipe-rail) + env(safe-area-inset-bottom) + 18px)!important;
    overflow:hidden!important;
  }

  /* The legacy containers remain as logical state holders only. */
  #resultSection,
  #resultGrid,
  .rightColumn{
    display:none!important;
  }

  .mobileSwipeViewport{
    position:relative!important;
    z-index:2!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
  }

  .mobileSwipeTrack{
    display:flex!important;
    width:100%!important;
    height:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scroll-behavior:smooth!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
    overscroll-behavior-x:contain!important;
    touch-action:pan-x!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .mobileSwipeTrack::-webkit-scrollbar{display:none!important}

  .mobileSwipePage{
    position:relative!important;
    flex:0 0 100%!important;
    width:100%!important;
    min-width:100%!important;
    height:100%!important;
    display:block!important;
    padding:0 10px!important;
    overflow:hidden!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
  }
  .mobileSwipePage[hidden]{display:none!important}

  .mobileSwipePageScroll{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    padding:0 2px 72px!important;
    scrollbar-width:none!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .mobileSwipePageScroll::-webkit-scrollbar{display:none!important}

  .mobileSwipePageTop{
    position:sticky!important;
    top:0!important;
    z-index:20!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    min-height:58px!important;
    margin:0 2px 9px!important;
    padding:10px 12px!important;
    border:1px solid color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.08))!important;
    border-radius:17px!important;
    background:linear-gradient(145deg,rgba(15,15,21,.94),rgba(7,7,11,.94))!important;
    box-shadow:0 12px 30px rgba(0,0,0,.24)!important;
    backdrop-filter:blur(18px)!important;
  }
  .mobileSwipePageHeading{min-width:0!important}
  .mobileSwipePageEyebrow{
    color:var(--accent)!important;
    font-size:7px!important;
    font-weight:900!important;
    letter-spacing:.16em!important;
    text-transform:uppercase!important;
  }
  .mobileSwipePageTitle{
    margin:3px 0 0!important;
    overflow:hidden!important;
    color:var(--strong)!important;
    font-size:17px!important;
    font-weight:900!important;
    line-height:1.05!important;
    letter-spacing:.01em!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }
  .mobileSwipePageHint{
    flex:0 0 auto!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:5px!important;
    padding:6px 8px!important;
    border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)!important;
    border-radius:999px!important;
    color:var(--accent)!important;
    background:rgba(0,0,0,.28)!important;
    font-size:7px!important;
    font-weight:900!important;
    letter-spacing:.08em!important;
    white-space:nowrap!important;
  }
  .mobileSwipePageHint b{font-size:12px!important;line-height:1!important}

  /* HOME / SEARCH PAGE — remove artwork text from the left and keep all
     branding centred. The decorative artwork used on desktop is not reused
     on mobile because the embedded Japanese lettering caused a broken crop. */
  .mobileSwipePage[data-mobile-page="home"] .mobileSwipePageScroll{
    padding-top:0!important;
  }
  .mobileSwipePage[data-mobile-page="home"] .mobileSwipePageTop{
    display:none!important;
  }
  .hero{
    position:relative!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    display:block!important;
    margin:0!important;
    padding:66px 14px 16px!important;
    overflow:hidden!important;
    border:1px solid color-mix(in srgb,var(--accent) 22%,rgba(255,255,255,.08))!important;
    border-radius:23px!important;
    background:
      radial-gradient(circle at 50% 23%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 34%),
      radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent2) 12%,transparent),transparent 34%),
      linear-gradient(165deg,rgba(19,19,26,.97),rgba(6,6,10,.98))!important;
    box-shadow:0 18px 46px rgba(0,0,0,.38),inset 0 0 0 1px rgba(255,255,255,.025)!important;
  }
  .hero::before{
    content:''!important;
    position:absolute!important;
    left:50%!important;
    top:63px!important;
    width:178px!important;
    height:178px!important;
    transform:translateX(-50%)!important;
    background:url("https://drive.google.com/thumbnail?id=1cdbjaAkcEI3KodOgpCNbtEL-K5VQm7pK&sz=w700") center/contain no-repeat!important;
    opacity:.055!important;
    filter:drop-shadow(0 0 24px var(--glow))!important;
    pointer-events:none!important;
  }
  .heroFeatureArt,
  .heroFeatureArt::after,
  body.front-mode .heroFeatureArt,
  body.dorm-kosei .heroFeatureArt,
  body.dorm-tsukiyomi .heroFeatureArt,
  body.dorm-yamiyo .heroFeatureArt{
    display:none!important;
    background:none!important;
  }
  .heroBackdrop{opacity:.24!important}
  .heroContent{
    position:relative!important;
    z-index:4!important;
    width:100%!important;
    min-height:0!important;
    display:block!important;
    text-align:center!important;
  }
  .logo,
  body:not(.front-mode) .logo{
    position:relative!important;
    display:grid!important;
    width:62px!important;
    height:62px!important;
    margin:2px auto 7px!important;
    padding:7px!important;
    border:1px solid color-mix(in srgb,var(--accent) 27%,rgba(255,255,255,.08))!important;
    border-radius:18px!important;
    background:rgba(7,7,11,.58)!important;
    box-shadow:0 12px 26px rgba(0,0,0,.28),inset 0 0 18px color-mix(in srgb,var(--accent) 8%,transparent)!important;
    transform:none!important;
  }
  .logo img{width:100%!important;height:100%!important;object-fit:contain!important}
  .heroCore{width:100%!important;margin:0!important;padding:0!important}
  .eyebrow,
  body:not(.front-mode) .eyebrow{
    position:static!important;
    display:block!important;
    width:100%!important;
    margin:0 0 3px!important;
    color:var(--accent)!important;
    font-size:10px!important;
    line-height:1.2!important;
    letter-spacing:.13em!important;
    text-align:center!important;
    white-space:normal!important;
    transform:none!important;
  }
  .mainTitle,
  body:not(.front-mode) .mainTitle{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 13px!important;
    color:var(--strong)!important;
    font-size:clamp(24px,7.2vw,30px)!important;
    line-height:1.02!important;
    letter-spacing:.005em!important;
    text-align:center!important;
    white-space:normal!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    background:none!important;
    -webkit-text-fill-color:currentColor!important;
    filter:none!important;
    text-shadow:0 5px 20px rgba(0,0,0,.48),0 0 15px color-mix(in srgb,var(--accent) 13%,transparent)!important;
  }
  .searchBar{margin:0!important}
  .heroNote,
  body:not(.front-mode) .heroNote{
    display:block!important;
    max-width:310px!important;
    margin:10px auto 0!important;
    font-size:9px!important;
    line-height:1.45!important;
    text-align:center!important;
  }
  .statusLine,
  body:not(.front-mode) .statusLine{
    min-height:18px!important;
    margin:6px auto 0!important;
    font-size:9px!important;
    line-height:1.35!important;
    text-align:center!important;
  }
  .mobileHeroStats,
  body:not(.front-mode) .mobileHeroStats{display:grid!important}
  .homeButtonCorner{display:none!important}

  .mobileAppHeader{
    left:14px!important;
    top:13px!important;
    max-width:calc(100% - 112px)!important;
  }
  .mobileAppBrandSeal{width:36px!important;height:36px!important;flex-basis:36px!important;border-radius:11px!important}
  .mobileAppBrandCopy strong{font-size:10px!important}
  .mobileAppBrandCopy small{font-size:8px!important}
  .generalMenu{top:13px!important;right:14px!important}
  .generalMenuButton{min-width:88px!important;min-height:36px!important}

  /* Every content section occupies exactly one horizontal page. */
  .mobileSwipePage .gpRankingSection,
  .mobileSwipePage .panel,
  .mobileSwipePage .infoCard,
  .mobileSwipePage .graduatedWideSections{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }

  .gpRankingSection{
    border-radius:20px!important;
    box-shadow:0 16px 38px rgba(0,0,0,.30)!important;
  }
  .gpRankingHeader{padding:15px 14px 12px!important}
  .gpRankingTitle{font-size:20px!important}
  .gpRankingContent{padding:11px!important}
  .gpArena{grid-template-columns:1fr!important;gap:9px!important}
  .gpRankCard{
    grid-template-columns:64px minmax(0,1fr) auto!important;
    gap:10px!important;
    min-height:86px!important;
    padding:10px!important;
    border-radius:16px!important;
  }
  .gpRankLeft{gap:5px!important}
  .gpRankNo{min-width:42px!important;min-height:23px!important;padding:4px 7px!important;font-size:9px!important}
  .gpRankAvatar{width:56px!important;height:56px!important}
  .gpRankAvatarFrame{width:52px!important;height:52px!important;border-radius:14px!important}
  .gpRankAvatarFrame::after{border-radius:12px!important}
  .gpRankAvatarImage,
  .gpRankAvatarImage.gpBackgroundRemoved,
  .gpRankAvatarImage.gpWhiteBlendFallback{transform:scale(1.12)!important}
  .gpRankHouseWatermark{width:56px!important;height:56px!important;inset:0!important}
  .gpRankHouseBadge{right:-1px!important;bottom:-1px!important;width:24px!important;height:24px!important;border-radius:8px!important}
  .gpRankHouseBadge img{width:18px!important;height:18px!important}
  .gpRankTopline{gap:6px!important;font-size:6px!important;letter-spacing:.05em!important}
  .gpRankHouse{min-height:20px!important;padding:4px 7px!important}
  .gpRankNameButton,
  .gpRankName{margin-top:7px!important;font-size:14px!important;line-height:1.08!important;white-space:normal!important;word-break:keep-all!important;overflow-wrap:normal!important}
  .gpRankKanji{margin-top:4px!important;font-size:10px!important}
  .gpRankUsername{margin-top:5px!important;font-size:8px!important}
  .gpRankScore{gap:3px!important}
  .gpRankScoreLabel{font-size:6px!important}
  .gpRankScoreValue{font-size:19px!important}

  /* PROFILE: compact horizontal identity with normal text wrapping only at
     spaces; never split a name character-by-character. */
  #studentProfilePanel{
    overflow:visible!important;
    border-radius:20px!important;
  }
  #studentProfilePanel .panelInner{padding:11px!important}
  .profileHeader,
  .resultGrid.graduatedLayout #studentProfilePanel .profileHeader{
    min-height:0!important;
    display:grid!important;
    grid-template-columns:78px minmax(0,1fr) 52px!important;
    gap:10px!important;
    align-items:center!important;
    padding:11px!important;
    border:1px solid var(--m-line-soft)!important;
    border-radius:17px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(0,0,0,.18))!important;
  }
  #studentProfilePanel .avatar,
  .resultGrid.graduatedLayout #studentProfilePanel .avatar{
    width:78px!important;
    height:78px!important;
    min-width:78px!important;
    min-height:78px!important;
    border-radius:17px!important;
  }
  #studentProfilePanel .identity{min-width:0!important;overflow:visible!important}
  .studentName,
  .resultGrid.graduatedLayout #studentProfilePanel .studentName{
    max-width:100%!important;
    margin:0!important;
    color:var(--strong)!important;
    font-size:19px!important;
    line-height:1.05!important;
    letter-spacing:0!important;
    text-align:left!important;
    white-space:normal!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    hyphens:none!important;
  }
  .metaLine{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:5px 7px!important;
    margin-top:7px!important;
    white-space:normal!important;
  }
  .studentKanji{font-size:11px!important;line-height:1.25!important;white-space:normal!important}
  .divider{display:none!important}
  .badges{flex-wrap:wrap!important;gap:5px!important}
  .badge{min-height:21px!important;padding:4px 7px!important;font-size:6px!important}
  .crest{
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
    min-height:52px!important;
    padding:5px!important;
    border-radius:14px!important;
  }
  .crest img{width:36px!important;height:36px!important}
  .crestName{display:none!important}

  .infoGrid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    margin-top:9px!important;
  }
  .infoCard{
    min-width:0!important;
    min-height:72px!important;
    padding:11px!important;
    border-radius:15px!important;
    box-shadow:inset 3px 0 0 var(--accent)!important;
  }
  .infoCard.wide,
  .finance{grid-column:1/-1!important}
  .label{font-size:7px!important;line-height:1.25!important;white-space:normal!important}
  .value{font-size:13px!important;line-height:1.25!important;white-space:normal!important;word-break:break-word!important}
  .finance{min-height:78px!important}
  .financeValue{font-size:24px!important;line-height:1!important}
  #occupationCard{min-height:0!important}
  .occupationList{max-height:none!important;overflow:visible!important}
  .occupation{padding:9px!important;border-radius:12px!important}
  .position{font-size:12px!important}

  /* Academic page gets the full width and uses only its own vertical scroll. */
  #academicCardPanel{padding:12px!important;border-radius:20px!important}
  .academicTop{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
  .academicActions{display:grid!important;grid-template-columns:auto 1fr!important;gap:7px!important}
  .transcriptButton{min-height:35px!important;white-space:normal!important;line-height:1.2!important}
  .academicRecords{max-height:none!important;overflow:visible!important;margin-top:11px!important;padding-right:0!important}
  .semesterCard{border-radius:15px!important}

  /* ID and points remain compact, but their page itself scrolls vertically. */
  .mediaPreview{min-height:190px!important}
  .pointLogs{max-height:none!important;overflow:visible!important}

  /* ---------- SWIPE ARROWS / PAGE INDICATOR ---------- */
  .mobileSwipeRail{
    position:fixed!important;
    left:50%!important;
    bottom:calc(var(--m-nav) + env(safe-area-inset-bottom) + 13px)!important;
    z-index:8950!important;
    width:min(330px,calc(100vw - 34px))!important;
    height:42px!important;
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr) 38px!important;
    align-items:center!important;
    gap:7px!important;
    padding:3px!important;
    transform:translateX(-50%)!important;
    border:1px solid color-mix(in srgb,var(--accent) 24%,rgba(255,255,255,.10))!important;
    border-radius:999px!important;
    background:rgba(9,9,13,.92)!important;
    box-shadow:0 12px 28px rgba(0,0,0,.48)!important;
    backdrop-filter:blur(18px)!important;
  }
  .mobileSwipeArrow{
    width:36px!important;
    height:36px!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    border:1px solid color-mix(in srgb,var(--accent) 27%,transparent)!important;
    border-radius:50%!important;
    color:var(--strong)!important;
    background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(0,0,0,.24))!important;
    font-size:20px!important;
    line-height:1!important;
    cursor:pointer!important;
  }
  .mobileSwipeArrow:disabled{opacity:.25!important;cursor:default!important}
  .mobileSwipeCenter{min-width:0!important;text-align:center!important}
  .mobileSwipeLabel{
    overflow:hidden!important;
    color:var(--accent)!important;
    font-size:7px!important;
    font-weight:900!important;
    letter-spacing:.10em!important;
    text-transform:uppercase!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }
  .mobileSwipeDots{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    margin-top:3px!important;
  }
  .mobileSwipeDot{
    width:5px!important;
    height:5px!important;
    padding:0!important;
    border:0!important;
    border-radius:999px!important;
    background:color-mix(in srgb,var(--muted) 46%,transparent)!important;
    transition:width .2s ease,background .2s ease!important;
  }
  .mobileSwipeDot.is-active{
    width:18px!important;
    background:linear-gradient(90deg,var(--accent),var(--strong))!important;
  }

  .mobileSwipeEdge{
    position:fixed!important;
    top:50%!important;
    z-index:8940!important;
    width:25px!important;
    height:54px!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    transform:translateY(-50%)!important;
    border:1px solid color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.08))!important;
    color:var(--accent)!important;
    background:rgba(7,7,11,.54)!important;
    box-shadow:0 10px 24px rgba(0,0,0,.28)!important;
    backdrop-filter:blur(12px)!important;
    font-size:22px!important;
    line-height:1!important;
    opacity:.72!important;
    cursor:pointer!important;
  }
  .mobileSwipeEdge:disabled{display:none!important}
  .mobileSwipeEdgePrev{left:0!important;border-radius:0 13px 13px 0!important;border-left:0!important}
  .mobileSwipeEdgeNext{right:0!important;border-radius:13px 0 0 13px!important;border-right:0!important}

  /* Bottom navigation remains, but it switches pages rather than forcing a
     long vertical jump. */
  .mobileBottomNav{z-index:9000!important}

  /* Preserve exact export dimensions. */
  .pdfRoot,.pdfPage,.pdfPage *{max-width:none!important}
}

@media (max-width:390px){
  .mobileSwipePage{padding:0 7px!important}
  .mobileSwipePageScroll{padding-left:1px!important;padding-right:1px!important}
  .hero{padding-left:11px!important;padding-right:11px!important}
  .profileHeader,
  .resultGrid.graduatedLayout #studentProfilePanel .profileHeader{
    grid-template-columns:72px minmax(0,1fr) 46px!important;
    gap:8px!important;
  }
  #studentProfilePanel .avatar,
  .resultGrid.graduatedLayout #studentProfilePanel .avatar{
    width:72px!important;height:72px!important;min-width:72px!important;min-height:72px!important
  }
  .crest{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important}
  .crest img{width:32px!important;height:32px!important}
  .studentName,
  .resultGrid.graduatedLayout #studentProfilePanel .studentName{font-size:17px!important}
  .mobileSwipeRail{width:calc(100vw - 24px)!important}
}

@media (max-width:350px){
  .infoGrid{grid-template-columns:1fr!important}
  .infoCard.wide,.finance{grid-column:1!important}
  .profileHeader,
  .resultGrid.graduatedLayout #studentProfilePanel .profileHeader{
    grid-template-columns:66px minmax(0,1fr) 42px!important;
  }
  #studentProfilePanel .avatar,
  .resultGrid.graduatedLayout #studentProfilePanel .avatar{
    width:66px!important;height:66px!important;min-width:66px!important;min-height:66px!important
  }
  .studentName,
  .resultGrid.graduatedLayout #studentProfilePanel .studentName{font-size:15px!important}
}

@media (prefers-reduced-motion:reduce) and (max-width:768px){
  .mobileSwipeTrack{scroll-behavior:auto!important}
}

/* V67 final stability fixes */
@media (max-width:768px){
  .mobileSwipePage[data-mobile-page="home"] .hero{
    min-height:calc(100dvh - var(--m-nav) - var(--m-swipe-rail) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 42px)!important;
    display:flex!important;
    align-items:center!important;
  }
  .mobileSwipePage[data-mobile-page="home"] .heroContent{
    width:100%!important;
    padding:38px 0 22px!important;
  }
  .mobileSwipePage[data-mobile-page="home"] .footer{display:none!important}

  .mobileSwipePage[data-mobile-page="ranking"] .gpArena{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:9px!important;
  }
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankCard{
    flex:0 0 auto!important;
    width:100%!important;
    max-width:100%!important;
    grid-column:auto!important;
    grid-row:auto!important;
  }
}
@media (max-width:768px){
  .mobileSwipeTrack{scroll-snap-type:none!important}
  .mobileSwipePage{scroll-snap-align:none!important;scroll-snap-stop:normal!important}
}
@media (max-width:768px){
  .mobileSwipeTrack{scroll-behavior:auto!important;overflow-anchor:none!important}
  .mobileSwipePage,.mobileSwipePageScroll{overflow-anchor:none!important}
}


/* =====================================================================
   V68 — STABLE MOBILE SWIPE UI
   Restores the complete header artwork, keeps the Japanese eyebrow centred,
   guarantees readable ranking rows, and preserves one independent vertical
   scroller per horizontal application section. Desktop/export rules remain
   untouched because every override is mobile-only.
   ===================================================================== */
@media (max-width:768px){
  /* Allow vertical content scrolling while the JS gesture handler provides
     deliberate left/right section changes. */
  .mobileSwipeTrack{touch-action:pan-y!important;scroll-snap-type:x mandatory!important;scroll-behavior:smooth!important}
  .mobileSwipePage{scroll-snap-align:start!important;scroll-snap-stop:always!important}
  .mobileSwipePageScroll{touch-action:pan-y!important}

  /* RESTORED HEADER ARTWORK */
  .mobileSwipePage[data-mobile-page="home"] .hero{
    min-height:calc(100dvh - var(--m-nav) - var(--m-swipe-rail) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 34px)!important;
    display:block!important;
    padding:82px 14px 18px!important;
    background:linear-gradient(165deg,rgba(9,9,13,.38),rgba(5,5,9,.72))!important;
  }
  .mobileSwipePage[data-mobile-page="home"] .hero::before{display:none!important}
  .heroFeatureArt,
  body.front-mode .heroFeatureArt,
  body.dorm-kosei .heroFeatureArt,
  body.dorm-tsukiyomi .heroFeatureArt,
  body.dorm-yamiyo .heroFeatureArt{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    opacity:.88!important;
    transform:none!important;
    background-size:cover,cover,cover!important;
    background-repeat:no-repeat!important;
    background-position:center,center,center 22%!important;
    filter:saturate(.92) contrast(1.05) brightness(.72)!important;
  }
  body.front-mode .heroFeatureArt,
  .heroFeatureArt{
    background-image:
      linear-gradient(180deg,rgba(3,3,7,.22) 0%,rgba(3,3,7,.30) 36%,rgba(3,3,7,.78) 100%),
      linear-gradient(90deg,rgba(4,4,8,.34),transparent 28%,transparent 72%,rgba(4,4,8,.34)),
      url("https://drive.google.com/thumbnail?id=1IuFDUcGJBLbRMFCWwH9a5gfnkhZM1mti&sz=w2400")!important;
  }
  body.dorm-kosei .heroFeatureArt{
    background-image:
      linear-gradient(180deg,rgba(3,5,3,.20) 0%,rgba(3,5,3,.28) 36%,rgba(3,5,3,.80) 100%),
      linear-gradient(90deg,rgba(4,7,3,.34),transparent 28%,transparent 72%,rgba(4,7,3,.34)),
      url("https://drive.google.com/thumbnail?id=1KJiRkV957u2OvAXbXWc1MDGXLKhDhcEv&sz=w2400")!important;
  }
  body.dorm-tsukiyomi .heroFeatureArt{
    background-image:
      linear-gradient(180deg,rgba(2,4,10,.20) 0%,rgba(4,5,14,.28) 36%,rgba(6,3,11,.80) 100%),
      linear-gradient(90deg,rgba(4,7,17,.34),transparent 28%,transparent 72%,rgba(13,5,16,.34)),
      url("https://drive.google.com/thumbnail?id=1AXd7izgJikFHpDOTgLtK3HWfFPhRqrkC&sz=w2400")!important;
  }
  body.dorm-yamiyo .heroFeatureArt{
    background-image:
      linear-gradient(180deg,rgba(5,2,8,.18) 0%,rgba(8,3,13,.27) 36%,rgba(4,1,7,.82) 100%),
      linear-gradient(90deg,rgba(8,3,12,.34),transparent 28%,transparent 72%,rgba(9,3,14,.34)),
      url("https://drive.google.com/thumbnail?id=1wRFGvZGcA05iAMgq5h0gvQcMmudWkk7_&sz=w2400")!important;
  }
  .heroFeatureArt::after{
    content:''!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    background:radial-gradient(ellipse at 50% 54%,rgba(3,3,7,.16),rgba(3,3,7,.54) 70%,rgba(3,3,7,.72))!important;
  }
  .heroBackdrop{z-index:1!important;opacity:.28!important}
  .heroContent{
    position:relative!important;
    z-index:4!important;
    width:100%!important;
    padding:14px 0 0!important;
    text-align:center!important;
  }
  .logo,body:not(.front-mode) .logo{margin:0 auto 8px!important}
  .eyebrow,body:not(.front-mode) .eyebrow{
    position:static!important;
    width:100%!important;
    margin:0 auto 5px!important;
    text-align:center!important;
    transform:none!important;
  }
  .mainTitle,body:not(.front-mode) .mainTitle{
    max-width:330px!important;
    margin:0 auto 14px!important;
    text-align:center!important;
  }
  .searchBar{position:relative!important;z-index:5!important}
  .heroNote,.statusLine{position:relative!important;z-index:5!important}
  .mobileHeroStats{position:relative!important;z-index:5!important}

  /* DATA PAGES: prevent inherited hidden/width values from collapsing the
     live-rendered student components after a search. */
  .mobileSwipePage:not([hidden])>.mobileSwipePageScroll>.panel,
  .mobileSwipePage:not([hidden])>.mobileSwipePageScroll>.gpRankingSection,
  .mobileSwipePage:not([hidden])>.mobileSwipePageScroll>.graduatedWideSections{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    width:100%!important;
    max-width:100%!important;
  }

  /* CLEAN GP RANKING LIST */
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankingHeader{
    display:block!important;
    min-height:0!important;
    padding:15px 14px 13px!important;
  }
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankingTitle{font-size:20px!important;line-height:1.08!important}
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankingDisclaimer{font-size:9px!important;line-height:1.4!important}
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankingMeta{
    width:100%!important;
    margin-top:10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:9px!important;
    text-align:left!important;
  }
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankingUpdated{margin:0!important;text-align:right!important;font-size:7px!important}
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankingContent{padding:10px!important}
  .mobileSwipePage[data-mobile-page="ranking"] .gpArena{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankCard{
    position:relative!important;
    width:100%!important;
    min-height:94px!important;
    display:grid!important;
    grid-template-columns:62px minmax(0,1fr) 68px!important;
    gap:10px!important;
    align-items:center!important;
    padding:11px 10px!important;
    border-radius:17px!important;
  }
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankLeft{
    position:relative!important;
    width:62px!important;
    display:grid!important;
    justify-items:center!important;
    gap:4px!important;
  }
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankNo{
    position:absolute!important;
    left:-3px!important;
    top:-7px!important;
    z-index:7!important;
    min-width:30px!important;
    min-height:20px!important;
    padding:3px 6px!important;
    font-size:8px!important;
  }
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankAvatar,
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankAvatarFrame{
    width:56px!important;
    height:56px!important;
    min-width:56px!important;
    min-height:56px!important;
    border-radius:15px!important;
  }
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankAvatarGlow{inset:-7px!important;border-radius:18px!important}
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankHouseWatermark{width:54px!important;height:54px!important;inset:1px!important}
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankHouseBadge{
    right:-3px!important;bottom:-3px!important;width:22px!important;height:22px!important;border-radius:8px!important
  }
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankHouseBadge img{width:16px!important;height:16px!important}
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankBody{min-width:0!important;text-align:left!important}
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankTopline{
    display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:6px!important;
    font-size:6px!important;letter-spacing:.05em!important
  }
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankHouse{min-height:19px!important;padding:3px 6px!important;font-size:6px!important}
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankId{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankNameButton{
    width:100%!important;max-width:100%!important;margin:6px 0 0!important;
    font-size:13px!important;line-height:1.12!important;text-align:left!important;
    white-space:normal!important;word-break:keep-all!important;overflow-wrap:break-word!important
  }
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankKanji{margin-top:4px!important;font-size:10px!important;line-height:1.2!important}
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankUsername{margin-top:4px!important;font-size:7px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankScore{
    min-width:0!important;justify-items:end!important;align-content:center!important;text-align:right!important
  }
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankScoreLabel{font-size:6px!important;letter-spacing:.08em!important}
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankScoreValue{font-size:18px!important;line-height:1!important;white-space:nowrap!important}

  /* Keep controls visible but less intrusive over page content. */
  .mobileSwipeEdge{width:21px!important;height:48px!important;opacity:.56!important}
}

@media (max-width:390px){
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankCard{grid-template-columns:56px minmax(0,1fr) 61px!important;gap:8px!important}
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankLeft{width:56px!important}
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankAvatar,
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankAvatarFrame{width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important}
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankNameButton{font-size:12px!important}
  .mobileSwipePage[data-mobile-page="ranking"] .gpRankScoreValue{font-size:16px!important}
}


/* =====================================================================
   V69 — NATIVE MOBILE DASHBOARD
   Mobile is redesigned independently from desktop dimensions.
   Ranking + student identity are direct-flow sections. Only secondary
   detail modules use a horizontal swipe deck with internal vertical scroll.
   Desktop and document/PDF/PNG layouts above remain untouched.
   ===================================================================== */
.mobileStudentSummary,.mobileDetailDeck{display:none}

@media (max-width:768px){
  :root{--m69-pad:12px;--m69-nav:68px;--m69-radius:22px;--m69-line:color-mix(in srgb,var(--accent) 28%,rgba(255,255,255,.10));--m69-card:linear-gradient(145deg,rgba(19,19,27,.96),rgba(7,7,12,.98))}
  html,body{min-width:0!important;width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  html{scroll-behavior:smooth!important;touch-action:pan-y pinch-zoom!important}
  body{padding-bottom:calc(var(--m69-nav) + env(safe-area-inset-bottom) + 16px)!important;background:radial-gradient(circle at 10% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 27%),linear-gradient(165deg,var(--bg1),#09090f 52%,var(--bg2))!important}
  .shell{width:min(100%,480px)!important;max-width:480px!important;margin:0 auto!important;padding:calc(env(safe-area-inset-top) + 8px) var(--m69-pad) 24px!important}

  /* Header / hero: compact application masthead, artwork retained. */
  .hero{position:relative!important;min-height:338px!important;height:auto!important;display:block!important;overflow:hidden!important;padding:68px 14px 16px!important;border-radius:24px!important;border:1px solid var(--m69-line)!important;background:linear-gradient(180deg,rgba(4,4,8,.14),rgba(4,4,8,.42) 48%,rgba(4,4,8,.93) 100%)!important;box-shadow:0 18px 48px rgba(0,0,0,.40)!important}
  body:not(.front-mode) .hero{min-height:300px!important}
  .heroFeatureArt,body.front-mode .heroFeatureArt,body.dorm-kosei .heroFeatureArt,body.dorm-tsukiyomi .heroFeatureArt,body.dorm-yamiyo .heroFeatureArt{display:block!important;position:absolute!important;inset:0!important;z-index:0!important;opacity:.80!important;transform:none!important;background-size:cover,cover,cover!important;background-repeat:no-repeat!important;background-position:center,center,center 24%!important;filter:saturate(.92) contrast(1.04) brightness(.70)!important}
  .heroFeatureArt::after{content:''!important;display:block!important;position:absolute!important;inset:0!important;background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.22) 40%,rgba(0,0,0,.82) 86%,rgba(0,0,0,.94))!important}
  .heroBackdrop{opacity:.22!important;z-index:1!important}
  .mobileAppHeader{top:12px!important;left:14px!important;max-width:calc(100% - 118px)!important;z-index:8!important}
  .mobileAppBrandSeal{width:36px!important;height:36px!important;flex-basis:36px!important;border-radius:11px!important}
  .mobileAppBrandCopy strong{font-size:10px!important}.mobileAppBrandCopy small{font-size:8px!important}
  .generalMenu{top:12px!important;right:14px!important}.generalMenuButton{min-width:86px!important;min-height:36px!important;border-radius:11px!important}
  .homeButtonCorner{top:54px!important;left:14px!important;min-height:28px!important;border-radius:9px!important}
  .heroContent{position:relative!important;z-index:4!important;width:100%!important;min-height:0!important;display:block!important;padding-top:8px!important;text-align:center!important}
  .logo,.front-mode .logo,body:not(.front-mode) .logo{width:58px!important;height:58px!important;margin:0 auto 4px!important;position:static!important;transform:none!important}
  body:not(.front-mode) .logo{width:46px!important;height:46px!important}
  .heroCore{width:100%!important;margin:0!important}
  .eyebrow,body:not(.front-mode) .eyebrow{position:static!important;width:100%!important;margin:0 auto 4px!important;color:var(--accent)!important;font-size:12px!important;letter-spacing:.12em!important;text-align:center!important;transform:none!important}
  .mainTitle,body:not(.front-mode) .mainTitle{display:flex!important;justify-content:center!important;gap:7px!important;width:100%!important;max-width:none!important;margin:0 auto 14px!important;font-size:30px!important;line-height:1!important;letter-spacing:.7px!important;white-space:normal!important;text-align:center!important}
  body:not(.front-mode) .mainTitle{font-size:26px!important;margin-bottom:11px!important}
  .searchBar{width:100%!important;display:grid!important;grid-template-columns:minmax(0,1fr) 50px!important;gap:8px!important;margin:0!important;padding:0!important}
  .searchBar input{height:48px!important;min-width:0!important;padding:0 14px!important;border-radius:15px!important;text-align:left!important;font-size:14px!important;background:rgba(4,4,8,.86)!important}
  .searchBar button{width:50px!important;height:48px!important;min-width:50px!important;border-radius:15px!important;padding:0!important}
  .desktopSearchText{display:none!important}.mobileSearchIcon{display:grid!important;width:20px!important;height:20px!important;margin:auto!important}.mobileSearchIcon svg{width:20px!important;height:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important}
  .heroNote{margin:11px 5px 0!important;font-size:9px!important;line-height:1.5!important;text-align:center!important}.statusLine{min-height:15px!important;margin-top:5px!important;font-size:9px!important}.mobileHeroStats{display:none!important}

  /* Immediate student identity card — visible without swiping. */
  .mobileStudentSummary{position:relative;isolation:isolate;overflow:hidden;display:block;margin-top:10px;padding:13px;border:1px solid var(--m69-line);border-radius:24px;background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 38%),var(--m69-card);box-shadow:0 16px 38px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.035)}
  .mobileStudentSummary.hidden{display:none!important}
  .mobileStudentSummaryGlow{position:absolute;right:-40px;top:-60px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 18%,transparent),transparent 68%);filter:blur(8px);pointer-events:none;z-index:-1}
  .mobileStudentSummaryTop{display:grid;grid-template-columns:86px minmax(0,1fr) 58px;gap:11px;align-items:center}
  .mobileSummaryPortrait{width:86px;height:104px;overflow:hidden;display:grid;place-items:center;border:1px solid var(--m69-line);border-radius:19px;background:#08080d;box-shadow:0 9px 22px rgba(0,0,0,.32),inset 0 0 22px color-mix(in srgb,var(--accent) 8%,transparent)}
  .mobileSummaryPortrait img{width:100%;height:100%;object-fit:cover;object-position:50% 17%;transform:scale(1.10);transform-origin:50% 17%}
  .mobileSummaryEmpty{padding:8px;color:var(--muted);font-size:8px;text-align:center}
  .mobileSummaryIdentity{min-width:0}.mobileSummaryKicker{color:var(--accent);font-size:7px;font-weight:900;letter-spacing:.12em}.mobileSummaryName{margin:4px 0 0;color:var(--strong);font-size:19px;font-weight:900;line-height:1.03;text-transform:uppercase;white-space:normal;overflow-wrap:break-word}.mobileSummaryKanji{margin-top:5px;color:var(--accent);font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobileSummaryBadges{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.mobileSummaryStatus,.mobileSummaryRank{min-height:23px;display:inline-flex;align-items:center;padding:4px 8px;border:1px solid var(--m69-line);border-radius:999px;font-size:7px;font-weight:900;letter-spacing:.04em;background:rgba(255,255,255,.035)}.mobileSummaryStatus.active{color:#bff4d5;background:rgba(38,122,76,.20)}.mobileSummaryStatus.leave{color:#ffc5cb;background:rgba(142,39,49,.24)}.mobileSummaryStatus.graduated{color:#f3dca9;background:rgba(157,112,48,.22)}.mobileSummaryRank{color:var(--strong)}
  .mobileSummaryHouse{display:grid;justify-items:center;gap:5px;min-width:0}.mobileSummaryHouseLogo{width:52px;height:52px;display:grid;place-items:center;padding:5px;border:1px solid var(--m69-line);border-radius:16px;background:rgba(4,4,8,.58)}.mobileSummaryHouseLogo img{width:100%;height:100%;object-fit:contain}.mobileSummaryHouseLogo span{color:var(--accent);font-size:22px}.mobileSummaryHouseName{max-width:58px;color:var(--accent);font-size:7px;font-weight:900;text-align:center;white-space:normal;line-height:1.1}
  .mobileSummaryFacts{display:grid;grid-template-columns:.9fr 1.2fr .9fr;gap:6px;margin-top:11px}.mobileSummaryFact{min-width:0;padding:8px 7px;border:1px solid var(--m69-line-soft,var(--m69-line));border-radius:13px;background:rgba(255,255,255,.028)}.mobileSummaryFact span{display:block;color:var(--muted);font-size:6px;font-weight:900;letter-spacing:.08em}.mobileSummaryFact strong{display:block;margin-top:3px;overflow:hidden;color:var(--strong);font-size:10px;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}
  .mobileStudentSummary.is-graduated{background:radial-gradient(circle at 100% 0%,rgba(210,169,93,.18),transparent 40%),linear-gradient(145deg,rgba(23,18,17,.97),rgba(7,7,11,.98))}

  /* Ranking is now a direct section; only its own list scrolls vertically. */
  .gpRankingSection{display:block!important;width:100%!important;margin-top:10px!important;border-radius:24px!important;border:1px solid var(--m69-line)!important;background:var(--m69-card)!important;box-shadow:0 16px 38px rgba(0,0,0,.32)!important;overflow:hidden!important}
  .gpRankingHeader{display:block!important;min-height:0!important;padding:14px 13px 11px!important}.gpRankingEyebrow{font-size:7px!important;letter-spacing:.12em!important}.gpRankingTitle{margin-top:4px!important;font-size:18px!important;line-height:1.05!important}.gpRankingDisclaimer{margin-top:6px!important;max-width:none!important;font-size:8px!important;line-height:1.35!important}.gpRankingMeta{width:100%!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin-top:9px!important;text-align:left!important}.gpRankingSemester{min-height:24px!important;padding:4px 8px!important;font-size:7px!important}.gpRankingUpdated{margin:0!important;max-width:54%!important;font-size:6.5px!important;line-height:1.25!important;text-align:right!important}
  .gpRankingContent{max-height:430px!important;overflow-y:auto!important;overflow-x:hidden!important;padding:8px!important;overscroll-behavior:contain!important;scrollbar-width:thin!important;scrollbar-color:var(--accent) rgba(255,255,255,.03)!important}.gpRankingContent::-webkit-scrollbar{width:5px}.gpRankingContent::-webkit-scrollbar-thumb{border-radius:999px;background:var(--accent)}
  .gpArena{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}.gpRankCard{position:relative!important;width:100%!important;min-height:78px!important;display:grid!important;grid-template-columns:58px minmax(0,1fr) 64px!important;gap:9px!important;align-items:center!important;padding:9px!important;border-radius:16px!important;background:radial-gradient(circle at 0 50%,var(--gpGlow2),transparent 38%),rgba(255,255,255,.026)!important;box-shadow:none!important}.gpRankCard.isChampion{border-color:rgba(244,214,111,.48)!important;background:radial-gradient(circle at 0 50%,rgba(244,214,111,.12),transparent 42%),rgba(255,255,255,.028)!important}
  .gpRankLeft{position:relative!important;width:58px!important;display:grid!important;justify-items:center!important;gap:0!important}.gpRankNo{position:absolute!important;left:-2px!important;top:-5px!important;z-index:6!important;min-width:28px!important;min-height:18px!important;padding:2px 5px!important;border-radius:999px!important;font-size:7px!important}.gpRankAvatar,.gpRankAvatarFrame{width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;border-radius:14px!important}.gpRankAvatarGlow{inset:-5px!important}.gpRankHouseWatermark{width:50px!important;height:50px!important;inset:1px!important}.gpRankHouseBadge{right:-2px!important;bottom:-2px!important;width:20px!important;height:20px!important;border-radius:7px!important}.gpRankHouseBadge img{width:14px!important;height:14px!important}.gpRankAvatarImage,.gpRankAvatarImage.gpBackgroundRemoved,.gpRankAvatarImage.gpWhiteBlendFallback{object-position:50% 17%!important;transform:scale(1.12)!important}
  .gpRankBody{min-width:0!important}.gpRankTopline{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:5px!important;font-size:5.8px!important;letter-spacing:.03em!important}.gpRankHouse{min-height:17px!important;padding:2px 5px!important;font-size:5.8px!important}.gpRankId{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.gpRankNameButton{width:100%!important;margin:5px 0 0!important;color:var(--strong)!important;font-size:12px!important;line-height:1.08!important;text-align:left!important;white-space:normal!important;overflow-wrap:break-word!important}.gpRankKanji{margin-top:3px!important;font-size:9px!important;line-height:1.15!important}.gpRankUsername{display:none!important}.gpRankScore{min-width:0!important;justify-items:end!important;text-align:right!important}.gpRankScoreLabel{font-size:5.8px!important;letter-spacing:.06em!important}.gpRankScoreValue{font-size:16px!important;line-height:1!important;white-space:nowrap!important}

  /* Secondary details are the only horizontal swipe area. */
  .mobileDetailDeck{display:block!important;width:100%!important;margin-top:10px!important;scroll-margin-top:10px!important}.mobileDetailDeck.hidden{display:none!important}.mobileDetailDeckHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;border:1px solid var(--m69-line);border-radius:20px 20px 0 0;background:linear-gradient(145deg,rgba(18,18,25,.98),rgba(7,7,12,.98))}.mobileDetailDeckEyebrow{color:var(--accent);font-size:6.5px;font-weight:900;letter-spacing:.12em}.mobileDetailDeckHead h2{margin:3px 0 0;color:var(--strong);font-size:15px;line-height:1.05}.mobileDetailControls{display:flex;align-items:center;gap:6px}.mobileDetailPrev,.mobileDetailNext{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--m69-line);border-radius:10px;color:var(--strong);background:rgba(255,255,255,.04);font-size:18px;cursor:pointer}.mobileDetailPrev:disabled,.mobileDetailNext:disabled{opacity:.28}.mobileDetailDots{display:flex;gap:4px}.mobileDetailDot{width:6px;height:6px;padding:0;border:0;border-radius:999px;background:color-mix(in srgb,var(--muted) 45%,transparent)}.mobileDetailDot.is-active{width:15px;background:var(--accent)}
  .mobileDetailTrack{display:flex!important;width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;scrollbar-width:none!important;overscroll-behavior-x:contain!important;touch-action:pan-x pan-y!important;border:1px solid var(--m69-line);border-top:0;border-radius:0 0 22px 22px;background:rgba(6,6,10,.88)}.mobileDetailTrack::-webkit-scrollbar{display:none}.mobileDetailPage{flex:0 0 100%!important;width:100%!important;min-width:100%!important;scroll-snap-align:start!important;scroll-snap-stop:always!important}.mobileDetailPage[hidden]{display:none!important}.mobileDetailPageScroll{height:min(64dvh,610px)!important;overflow-y:auto!important;overflow-x:hidden!important;padding:10px!important;overscroll-behavior:contain!important;scrollbar-width:thin!important;scrollbar-color:var(--accent) transparent!important}.mobileDetailPageHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:2px 2px 9px}.mobileDetailEyebrow{color:var(--accent);font-size:6px;font-weight:900;letter-spacing:.12em}.mobileDetailTitle{margin:2px 0 0;color:var(--strong);font-size:13px;line-height:1.05}.mobileDetailPageMark{padding:4px 7px;border:1px solid var(--m69-line);border-radius:999px;color:var(--muted);font-size:6px;font-weight:800;white-space:nowrap}

  /* Recycled mobile detail components, independent of desktop sizing. */
  .mobileDetailPage .panel,.mobileDetailPage .infoCard,.mobileDetailPage .mediaCard{width:100%!important;max-width:100%!important;margin:0!important;border-radius:17px!important}.mobileDetailPage .panel{border:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}.mobileDetailPage .panelInner{padding:0!important}.mobileDetailPage[data-mobile-detail="profile"] .profileHeader{display:none!important}.mobileDetailPage .infoGrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;margin:0!important}.mobileDetailPage .infoCard{min-width:0!important;min-height:64px!important;padding:10px!important;border:1px solid var(--m69-line)!important;background:rgba(255,255,255,.028)!important;box-shadow:none!important}.mobileDetailPage .infoCard.wide{grid-column:1/-1!important}.mobileDetailPage .label{font-size:7px!important;margin-bottom:4px!important}.mobileDetailPage .value{font-size:12px!important;overflow-wrap:anywhere!important}.mobileDetailPage .finance{min-height:74px!important}.mobileDetailPage .financeValue{font-size:23px!important}.mobileDetailPage #occupationCard{padding:10px!important}.mobileDetailPage .occupationList{max-height:none!important;overflow:visible!important;padding:0!important}.mobileDetailPage .occupation{grid-template-columns:30px minmax(0,1fr)!important;gap:8px!important;padding:9px!important;border-radius:13px!important}.mobileDetailPage .occupation.single{grid-template-columns:1fr!important}.mobileDetailPage .occupationNo{width:28px!important;height:28px!important;border-radius:9px!important;font-size:8px!important}.mobileDetailPage .workplace{font-size:8px!important}.mobileDetailPage .position{margin-top:3px!important;font-size:12px!important}.mobileDetailPage .largeCardLabel.sectionTitle{font-size:10px!important;white-space:normal!important}
  .mobileDetailPage .sectionHeader{min-height:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:10px 2px!important;border-bottom:1px solid var(--m69-line)!important}.mobileDetailPage .sectionTitle{font-size:10px!important;white-space:normal!important}.mobileDetailPage .mediaStack{padding:8px 0 0!important}.mobileDetailPage .mediaPreview{min-height:180px!important;max-height:330px!important;border-radius:15px!important}.mobileDetailPage .mediaPreview img{width:100%!important;max-height:320px!important;object-fit:contain!important}.mobileDetailPage .mediaAction{padding:8px!important}.mobileDetailPage .openButton{min-height:40px!important;border-radius:12px!important;font-size:9px!important}
  .mobileDetailPage .semesterNote{margin:8px 0 0!important;font-size:8px!important}.mobileDetailPage .totals{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;padding:9px 0!important}.mobileDetailPage .total{min-height:70px!important;padding:8px!important;border-radius:13px!important}.mobileDetailPage .totalLabel{font-size:6px!important}.mobileDetailPage .totalValue{margin-top:5px!important;font-size:20px!important}.mobileDetailPage .logBar{padding:5px 0 8px!important;font-size:8px!important}.mobileDetailPage .pointLogs{max-height:none!important;overflow:visible!important;padding:7px 0 0!important}.mobileDetailPage .logItem{grid-template-columns:82px minmax(0,1fr)!important;gap:7px!important;padding:9px!important;border-radius:13px!important}.mobileDetailPage .logDate{font-size:8px!important}.mobileDetailPage .logDesc{font-size:10px!important}.mobileDetailPage .chip{padding:3px 6px!important;font-size:7px!important}

  /* Academic cards fit the phone, without inheriting desktop columns. */
  .mobileDetailPage[data-mobile-detail="academic"] #academicCardPanel{display:block!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}.mobileDetailPage .academicTop{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;padding:0 0 8px!important}.mobileDetailPage .academicIntro{font-size:8px!important}.mobileDetailPage .academicActions{display:flex!important;flex-wrap:wrap!important;gap:5px!important}.mobileDetailPage .count,.mobileDetailPage .transcriptButton{min-height:28px!important;padding:5px 8px!important;font-size:6.5px!important}.mobileDetailPage .academicRecords{max-height:none!important;overflow:visible!important;margin-top:8px!important;padding:0!important}.mobileDetailPage .semesterCard{border-radius:15px!important}.mobileDetailPage .semesterHead{padding:9px!important}.mobileDetailPage .semesterTitle{font-size:12px!important}.mobileDetailPage .nensei{padding:4px 6px!important;font-size:6.5px!important}.mobileDetailPage .miniTitle{margin:9px 9px 6px!important;font-size:6.5px!important}.mobileDetailPage .participation{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;padding:0 9px!important}.mobileDetailPage .part{min-height:46px!important;padding:6px!important;border-radius:10px!important}.mobileDetailPage .partName,.mobileDetailPage .partState{font-size:6.5px!important}.mobileDetailPage .subjects{gap:5px!important;padding:0 9px!important}.mobileDetailPage .subjectHeader{display:none!important}.mobileDetailPage .subjectRow{display:grid!important;grid-template-columns:minmax(0,1fr) 55px 55px!important;gap:5px!important;padding:7px!important;border-radius:10px!important}.mobileDetailPage .subjectName{font-size:8.5px!important}.mobileDetailPage .mark{min-height:25px!important;padding:0 4px!important;border-radius:7px!important;font-size:8px!important}.mobileDetailPage .semesterFoot{grid-template-columns:1fr 1fr!important;gap:5px!important;padding:9px!important}.mobileDetailPage .outcome{padding:7px!important;border-radius:9px!important}.mobileDetailPage .outcomeLabel{font-size:6px!important}.mobileDetailPage .outcomeValue{font-size:8px!important}.mobileDetailPage .reportButton{grid-column:1/-1!important;min-height:38px!important;border-radius:10px!important;font-size:7px!important}.mobileDetailPage .academicLoading{min-height:180px!important;grid-template-columns:46px 1fr!important;gap:12px!important;padding:18px!important}.mobileDetailPage .academicLoadingOrb{width:42px!important;height:42px!important}.mobileDetailPage .academicLoadingTitle{font-size:11px!important}.mobileDetailPage .academicLoadingText{font-size:8px!important}

  /* GRADUATED: force a stable single-column mobile composition. */
  .mobileDetailPage[data-mobile-detail="graduation"] .graduatedWideSections{display:block!important;width:100%!important;margin:0!important;padding:0!important;grid-column:auto!important}.mobileDetailPage[data-mobile-detail="graduation"] .graduatedWideSections.hidden{display:none!important}.mobileDetailPage[data-mobile-detail="graduation"] .graduatedWideSections>#occupationCard{display:block!important;width:100%!important;min-height:0!important;margin:0!important;padding:10px!important;border:1px solid var(--m69-line)!important;border-radius:17px!important;background:rgba(255,255,255,.028)!important;box-shadow:none!important}.mobileDetailPage .lifeAfterGraduation{display:block!important;max-height:none!important;overflow:visible!important}.mobileDetailPage .lifeAfterGraduationCard{position:relative!important;display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;gap:10px!important;align-items:start!important;min-height:0!important;padding:11px!important;border:1px solid var(--m69-line)!important;border-radius:14px!important;background:linear-gradient(145deg,rgba(24,20,22,.94),rgba(8,8,12,.96))!important;box-shadow:none!important}.mobileDetailPage .lifeAfterGraduationCard::before,.mobileDetailPage .lifeAfterGraduationCard::after{display:none!important;content:none!important}.mobileDetailPage .lifeAfterGraduationSigil{position:static!important;width:44px!important;height:44px!important;display:grid!important;place-items:center!important;margin:0!important;border:1px solid var(--m69-line)!important;border-radius:13px!important;color:var(--accent)!important;background:rgba(0,0,0,.35)!important;font-size:10px!important}.mobileDetailPage .lifeAfterGraduationSigil::after{display:none!important}.mobileDetailPage .lifeAfterGraduationContent{position:static!important;min-width:0!important}.mobileDetailPage .lifeAfterGraduationEyebrow{font-size:7px!important}.mobileDetailPage .lifeAfterGraduationNarrative{max-width:none!important;margin-top:5px!important;font-size:10px!important;line-height:1.5!important;overflow-wrap:anywhere!important}
  .mobileDetailPage .devotedStudentSemesterCard{border-radius:15px!important;background:rgba(255,255,255,.025)!important}.mobileDetailPage .devotedStudentSemesterCard .semesterHead{display:flex!important}.mobileDetailPage .devotedStudentHero{display:grid!important;grid-template-columns:minmax(0,1fr) 88px!important;gap:8px!important;align-items:stretch!important;padding:9px!important}.mobileDetailPage .devotedStudentHeroTitle{font-size:15px!important}.mobileDetailPage .devotedStudentHeroSub{font-size:7px!important;line-height:1.35!important}.mobileDetailPage .devotedStudentScorePanel{min-width:0!important;padding:9px!important;border-radius:12px!important}.mobileDetailPage .devotedStudentScoreValue{font-size:23px!important}.mobileDetailPage .devotedStudentScoreCaption,.mobileDetailPage .devotedStudentFieldLabel{font-size:6px!important}.mobileDetailPage .devotedStudentField{display:grid!important;grid-template-columns:30px minmax(0,1fr)!important;gap:8px!important;padding:9px!important;margin:0 9px 7px!important;border-radius:11px!important}.mobileDetailPage .devotedStudentFieldIcon{width:30px!important;height:30px!important;border-radius:9px!important;font-size:12px!important}.mobileDetailPage .devotedStudentFieldValue{font-size:10px!important;line-height:1.35!important;overflow-wrap:anywhere!important}.mobileDetailPage .devotedStudentFileButton{min-height:36px!important;padding:7px 10px!important;border-radius:10px!important;font-size:7px!important}

  /* The original result grid is only a data state holder on mobile. */
  #resultSection{margin:0!important;padding:0!important}.mobile-detail-app #resultSection>.resultGrid{display:block!important;margin:0!important}.mobile-detail-app #resultSection>.resultGrid>.rightColumn{display:none!important}.mobile-detail-app #resultSection>.resultGrid>.panel{display:none!important}

  .mobileBottomNav{left:8px!important;right:8px!important;bottom:calc(7px + env(safe-area-inset-bottom))!important;height:62px!important;min-height:62px!important;padding:5px 7px!important;border-radius:20px!important;z-index:9000!important;background:rgba(7,7,11,.94)!important;box-shadow:0 12px 34px rgba(0,0,0,.46)!important;backdrop-filter:blur(18px)!important}.mobileNavItem{gap:2px!important;font-size:7px!important}.mobileNavIcon{width:24px!important;height:24px!important}.mobileNavPrimaryButton{width:37px!important;height:37px!important;border-radius:13px!important}.mobileNavItem.is-active .mobileNavIcon{background:color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.04))!important}
  .footer{display:none!important}
}

@media (max-width:390px){
  .mobileStudentSummaryTop{grid-template-columns:78px minmax(0,1fr) 52px!important;gap:9px!important}.mobileSummaryPortrait{width:78px!important;height:96px!important}.mobileSummaryHouseLogo{width:46px!important;height:46px!important}.mobileSummaryName{font-size:17px!important}.mobileSummaryFact strong{font-size:9px!important}.gpRankCard{grid-template-columns:54px minmax(0,1fr) 58px!important;gap:7px!important}.gpRankAvatar,.gpRankAvatarFrame{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}.gpRankNameButton{font-size:11px!important}.gpRankScoreValue{font-size:14px!important}
}

/* V69.1 — hard reset legacy podium geometry inside the mobile ranking list. */
@media (max-width:768px){
  .gpRankingSection .gpArena>.gpRankCard,
  .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3),
  .gpRankingSection .gpArena>.gpRankCard:nth-child(n+4),
  .gpRankingSection .gpArena>.gpRankCard:nth-child(1),
  .gpRankingSection .gpArena>.gpRankCard:nth-child(2),
  .gpRankingSection .gpArena>.gpRankCard:nth-child(3){
    grid-column:auto!important;
    grid-row:auto!important;
    min-height:78px!important;
    height:auto!important;
    display:grid!important;
    grid-template-columns:58px minmax(0,1fr) 64px!important;
    grid-template-rows:none!important;
    gap:9px!important;
    align-items:center!important;
    justify-items:stretch!important;
    padding:9px!important;
    text-align:left!important;
    border-radius:16px!important;
  }
  .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankLeft,
  .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankBody,
  .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankScore{
    width:auto!important;
    justify-items:initial!important;
    text-align:inherit!important;
  }
  .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankLeft{
    width:58px!important;
    display:grid!important;
    justify-items:center!important;
    gap:0!important;
  }
  .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankNo{
    position:absolute!important;
    left:-2px!important;
    top:-5px!important;
    min-width:28px!important;
    min-height:18px!important;
    padding:2px 5px!important;
    font-size:7px!important;
  }
  .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankAvatar,
  .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankAvatarFrame{
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
    min-height:52px!important;
    border-radius:14px!important;
  }
  .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankHouseWatermark{
    width:50px!important;
    height:50px!important;
    inset:1px!important;
  }
  .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankHouseBadge{
    right:-2px!important;
    bottom:-2px!important;
  }
  .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankBody{
    display:block!important;
    min-width:0!important;
  }
  .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankTopline{
    width:auto!important;
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
  }
  .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankId{
    width:auto!important;
    text-align:left!important;
  }
  .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankNameButton{
    margin:5px 0 0!important;
    text-align:left!important;
    font-size:12px!important;
    line-height:1.08!important;
  }
  .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankKanji{
    margin-top:3px!important;
    font-size:9px!important;
  }
  .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankUsername{display:none!important}
  .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankScore{
    display:grid!important;
    justify-items:end!important;
    align-content:center!important;
    padding-top:0!important;
    border-top:0!important;
    text-align:right!important;
  }
  .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankScoreValue,
  .gpRankingSection .gpArena>.gpRankCard:nth-child(1) .gpRankScoreValue{
    font-size:16px!important;
    line-height:1!important;
  }
  .mobileDetailPageScroll{
    height:auto!important;
    min-height:330px!important;
    max-height:min(64dvh,610px)!important;
  }
}
@media (max-width:390px){
  .gpRankingSection .gpArena>.gpRankCard,
  .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3),
  .gpRankingSection .gpArena>.gpRankCard:nth-child(n+4),
  .gpRankingSection .gpArena>.gpRankCard:nth-child(1),
  .gpRankingSection .gpArena>.gpRankCard:nth-child(2),
  .gpRankingSection .gpArena>.gpRankCard:nth-child(3){grid-template-columns:54px minmax(0,1fr) 58px!important;gap:7px!important}
  .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankLeft{width:54px!important}
  .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankAvatar,
  .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankAvatarFrame{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}
  .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankNameButton{font-size:11px!important}
  .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankScoreValue,
  .gpRankingSection .gpArena>.gpRankCard:nth-child(1) .gpRankScoreValue{font-size:14px!important}
}
@media (max-width:768px){
  .mobileDetailTrack{height:390px!important;align-items:stretch!important}
  .mobileDetailPage{height:390px!important}
  .mobileDetailPageScroll{height:390px!important;min-height:0!important;max-height:none!important;overflow-y:auto!important}
}
@media (max-width:390px){
  .mobileDetailTrack,.mobileDetailPage,.mobileDetailPageScroll{height:372px!important}
}

/* =====================================================================
   V70 — TRUE NATIVE MOBILE STUDENT UI
   Final mobile layer. Desktop styles and document export canvases remain
   unchanged. Mobile no longer inherits desktop section geometry.
   ===================================================================== */
.mobileStudentHeader,.mobileStudentDirect,.mobileRecordSwipe,.mobileHomeGlyph{display:none}

@media (max-width:768px){
  :root{
    --m70-pad:12px;
    --m70-radius:22px;
    --m70-card:linear-gradient(145deg,rgba(20,20,28,.96),rgba(7,7,12,.985));
    --m70-card-soft:rgba(255,255,255,.035);
    --m70-line:color-mix(in srgb,var(--accent) 31%,rgba(255,255,255,.10));
    --m70-line-soft:color-mix(in srgb,var(--accent) 17%,rgba(255,255,255,.07));
  }

  html,body{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important}
  html{touch-action:pan-y pinch-zoom!important;scroll-behavior:smooth!important}
  body{padding-bottom:22px!important;background:radial-gradient(circle at 8% 0%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 28%),radial-gradient(circle at 95% 28%,color-mix(in srgb,var(--accent2) 10%,transparent),transparent 28%),linear-gradient(165deg,var(--bg1),#08080d 52%,var(--bg2))!important}
  .shell{width:min(100%,480px)!important;max-width:480px!important;margin:0 auto!important;padding:calc(env(safe-area-inset-top) + 8px) var(--m70-pad) 26px!important}

  /* Falling ornaments stay visible behind the entire mobile application. */
  .backdrop{display:block!important;position:fixed!important;inset:0!important;z-index:0!important;opacity:1!important;overflow:hidden!important;pointer-events:none!important}
  .backdrop .faller{display:block!important;visibility:visible!important;opacity:var(--o,.12)!important;filter:drop-shadow(0 5px 14px var(--glow))!important}
  .heroBackdrop{display:block!important;opacity:.28!important}
  .heroFaller{display:block!important;visibility:visible!important}

  /* Global app header. Home becomes an icon immediately beside General. */
  .mobileAppHeader{display:flex!important;left:14px!important;top:12px!important;z-index:12!important;max-width:calc(100% - 118px)!important}
  body:not(.front-mode) .mobileAppHeader{max-width:calc(100% - 160px)!important}
  .mobileAppBrandSeal{width:36px!important;height:36px!important;flex:0 0 36px!important;border-radius:11px!important}
  .mobileAppBrandCopy strong{font-size:10px!important}.mobileAppBrandCopy small{font-size:8px!important}
  .mobileAppLive{display:none!important}
  .generalMenu{top:12px!important;right:14px!important;z-index:14!important}
  .generalMenuButton{min-width:88px!important;min-height:36px!important;padding:7px 9px!important;border-radius:11px!important}
  .generalMenuPanel{top:43px!important;right:0!important;width:min(310px,calc(100vw - 28px))!important}
  .homeButtonCorner{display:inline-grid!important;place-items:center!important;top:12px!important;right:108px!important;left:auto!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;border-radius:11px!important;z-index:14!important}
  body.front-mode .homeButtonCorner{display:none!important}
  .desktopHomeLabel{display:none!important}.mobileHomeGlyph{display:grid!important;place-items:center!important;width:18px!important;height:18px!important}
  .mobileHomeGlyph svg{width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}

  /* HOME hero remains rich and visual. */
  .hero{position:relative!important;isolation:isolate!important;overflow:hidden!important;margin:0!important;min-height:350px!important;height:auto!important;display:block!important;padding:70px 14px 17px!important;border:1px solid var(--m70-line)!important;border-radius:24px!important;background:linear-gradient(180deg,rgba(3,3,8,.12),rgba(4,4,9,.42) 48%,rgba(4,4,9,.94) 100%)!important;box-shadow:0 18px 48px rgba(0,0,0,.42)!important}
  .heroFeatureArt,body.front-mode .heroFeatureArt,body.dorm-kosei .heroFeatureArt,body.dorm-tsukiyomi .heroFeatureArt,body.dorm-yamiyo .heroFeatureArt{display:block!important;position:absolute!important;inset:0!important;z-index:0!important;opacity:.82!important;transform:none!important;background-size:cover,cover,cover!important;background-repeat:no-repeat!important;filter:saturate(.94) contrast(1.03) brightness(.72)!important}
  .heroFeatureArt::after{content:''!important;display:block!important;position:absolute!important;inset:0!important;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.20) 38%,rgba(0,0,0,.82) 86%,rgba(0,0,0,.95))!important}
  .heroContent{position:relative!important;z-index:5!important;width:100%!important;min-height:0!important;display:block!important;padding-top:5px!important;text-align:center!important}
  .logo,.front-mode .logo,body:not(.front-mode) .logo{position:static!important;width:58px!important;height:58px!important;margin:0 auto 5px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;transform:none!important}
  .logo img{width:100%!important;height:100%!important;object-fit:contain!important}
  .heroCore{width:100%!important;margin:0!important;padding:0!important}
  .eyebrow,body:not(.front-mode) .eyebrow{position:static!important;width:100%!important;margin:0 auto 4px!important;color:var(--accent)!important;font-size:11px!important;line-height:1.2!important;letter-spacing:.13em!important;text-align:center!important;transform:none!important}
  .mainTitle,body:not(.front-mode) .mainTitle{display:flex!important;justify-content:center!important;gap:7px!important;width:100%!important;max-width:none!important;margin:0 auto 14px!important;color:transparent!important;font-size:30px!important;line-height:1!important;letter-spacing:.5px!important;white-space:normal!important;text-align:center!important;background:linear-gradient(92deg,var(--title1),var(--title2) 52%,var(--title3))!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;filter:drop-shadow(0 6px 20px rgba(0,0,0,.46))!important}
  .searchBar{width:100%!important;display:grid!important;grid-template-columns:minmax(0,1fr) 50px!important;gap:8px!important;margin:0!important;padding:0!important}
  .searchBar input{height:48px!important;min-width:0!important;padding:0 14px!important;border-radius:15px!important;text-align:left!important;font-size:14px!important;background:rgba(4,4,8,.86)!important}
  .searchBar button{width:50px!important;height:48px!important;min-width:50px!important;border-radius:15px!important;padding:0!important}.desktopSearchText{display:none!important}.mobileSearchIcon{display:grid!important;width:20px!important;height:20px!important;margin:auto!important}.mobileSearchIcon svg{width:20px!important;height:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important}
  .heroNote{margin:10px 5px 0!important;font-size:9px!important;line-height:1.5!important}.statusLine{min-height:15px!important;margin-top:5px!important;font-size:9px!important}.mobileHeroStats{display:none!important}

  /* On a student record the main hero becomes only the global app bar. */
  body:not(.front-mode) .hero{min-height:62px!important;height:62px!important;padding:0!important;border-radius:20px!important;background:linear-gradient(145deg,rgba(16,16,23,.94),rgba(6,6,10,.98))!important}
  body:not(.front-mode) .hero .heroContent{display:none!important}
  body:not(.front-mode) .hero .heroFeatureArt{opacity:.20!important;filter:saturate(.85) brightness(.45)!important}
  body:not(.front-mode) .hero .heroBackdrop{opacity:.16!important}

  /* Dedicated student-record masthead with its own themed artwork. */
  .mobileStudentHeader{position:relative;isolation:isolate;overflow:hidden;display:block!important;min-height:174px;margin-top:10px;padding:14px;border:1px solid var(--m70-line);border-radius:24px;background:#08080d;box-shadow:0 18px 42px rgba(0,0,0,.38)}
  .mobileStudentHeader.hidden{display:none!important}
  .mobileStudentHeaderArt{position:absolute;inset:0;z-index:-3;background-size:cover!important;background-repeat:no-repeat!important;background-position:center 28%!important;filter:saturate(.95) contrast(1.04) brightness(.73)}
  body.dorm-kosei .mobileStudentHeaderArt{background-image:url("https://drive.google.com/thumbnail?id=1KJiRkV957u2OvAXbXWc1MDGXLKhDhcEv&sz=w1600")}
  body.dorm-tsukiyomi .mobileStudentHeaderArt{background-image:url("https://drive.google.com/thumbnail?id=1AXd7izgJikFHpDOTgLtK3HWfFPhRqrkC&sz=w1600")}
  body.dorm-yamiyo .mobileStudentHeaderArt{background-image:url("https://drive.google.com/thumbnail?id=1wRFGvZGcA05iAMgq5h0gvQcMmudWkk7_&sz=w1600")}
  body:not(.dorm-kosei):not(.dorm-tsukiyomi):not(.dorm-yamiyo) .mobileStudentHeaderArt{background-image:url("https://drive.google.com/thumbnail?id=1IuFDUcGJBLbRMFCWwH9a5gfnkhZM1mti&sz=w1600")}
  .mobileStudentHeaderShade{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(2,2,6,.20),rgba(3,3,7,.46) 48%,rgba(3,3,8,.94) 100%),linear-gradient(90deg,rgba(0,0,0,.42),transparent 60%)}
  .mobileStudentHeaderTopline{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:8px;align-items:center}.mobileStudentHeaderSeal{width:34px;height:34px;display:grid;place-items:center;padding:4px;border:1px solid var(--m70-line);border-radius:11px;background:rgba(4,4,8,.60);backdrop-filter:blur(8px)}.mobileStudentHeaderSeal img{width:100%;height:100%;object-fit:contain}.mobileStudentHeaderBrand{min-width:0;display:grid;gap:1px}.mobileStudentHeaderBrand strong{color:var(--strong);font-size:10px;letter-spacing:.06em}.mobileStudentHeaderBrand small{color:var(--muted);font-size:7px}.mobileStudentHeaderHouse{max-width:105px;padding:5px 8px;border:1px solid var(--m70-line);border-radius:999px;color:var(--accent);background:rgba(5,5,9,.56);font-size:7px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(8px)}
  .mobileStudentHeaderCopy{position:absolute;left:14px;right:14px;bottom:14px}.mobileStudentHeaderEyebrow{color:var(--accent);font-size:7px;font-weight:900;letter-spacing:.13em}.mobileStudentHeaderCopy h2{margin:3px 0 0;color:var(--strong);font-family:"Cinzel","League Spartan",serif;font-size:24px;line-height:1;letter-spacing:.035em;text-shadow:0 6px 18px rgba(0,0,0,.72)}.mobileStudentHeaderId{margin-top:7px;display:inline-flex;padding:5px 8px;border:1px solid var(--m70-line);border-radius:9px;color:var(--strong);background:rgba(3,3,8,.62);font-size:8px;font-weight:900;letter-spacing:.07em;backdrop-filter:blur(7px)}

  /* Primary identity: never swipe, never desktop geometry. */
  .mobileStudentSummary{position:relative;isolation:isolate;overflow:hidden;display:block!important;margin-top:10px!important;padding:13px!important;border:1px solid var(--m70-line)!important;border-radius:24px!important;background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 39%),var(--m70-card)!important;box-shadow:0 16px 38px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.035)!important}
  .mobileStudentSummary.hidden{display:none!important}.mobileStudentSummaryGlow{position:absolute!important;right:-48px!important;top:-58px!important;width:176px!important;height:176px!important;border-radius:50%!important;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 18%,transparent),transparent 68%)!important;filter:blur(8px)!important;pointer-events:none!important;z-index:-1!important}
  .mobileStudentSummaryTop{display:grid!important;grid-template-columns:92px minmax(0,1fr) 58px!important;gap:11px!important;align-items:center!important}.mobileSummaryPortrait{width:92px!important;height:114px!important;overflow:hidden!important;display:grid!important;place-items:center!important;border:1px solid var(--m70-line)!important;border-radius:20px!important;background:#08080d!important;box-shadow:0 10px 24px rgba(0,0,0,.34),inset 0 0 22px color-mix(in srgb,var(--accent) 9%,transparent)!important}.mobileSummaryPortrait img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 17%!important;transform:scale(1.10)!important;transform-origin:50% 17%!important}.mobileSummaryEmpty{padding:8px!important;color:var(--muted)!important;font-size:8px!important;text-align:center!important}
  .mobileSummaryIdentity{min-width:0!important;overflow:visible!important}.mobileSummaryKicker{color:var(--accent)!important;font-size:7px!important;font-weight:900!important;letter-spacing:.12em!important}.mobileSummaryName{margin:4px 0 0!important;color:var(--strong)!important;font-size:20px!important;font-weight:900!important;line-height:1.02!important;text-transform:uppercase!important;white-space:normal!important;word-break:normal!important;overflow-wrap:anywhere!important}.mobileSummaryKanji{margin-top:5px!important;color:var(--accent)!important;font-size:13px!important;line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .mobileSummaryBadges{display:flex!important;flex-wrap:wrap!important;gap:5px!important;margin-top:8px!important}.mobileSummaryStatus,.mobileSummaryRank{min-height:24px!important;display:inline-flex!important;align-items:center!important;padding:4px 8px!important;border:1px solid var(--m70-line)!important;border-radius:999px!important;font-size:7px!important;font-weight:900!important;letter-spacing:.04em!important;background:rgba(255,255,255,.035)!important}.mobileSummaryStatus.active{color:#bff4d5!important;background:rgba(38,122,76,.20)!important}.mobileSummaryStatus.leave{color:#ffc5cb!important;background:rgba(142,39,49,.24)!important}.mobileSummaryStatus.graduated{color:#f3dca9!important;background:rgba(157,112,48,.22)!important}.mobileSummaryRank{color:var(--strong)!important}.mobileSummaryRank.first{color:#302400!important;border-color:rgba(245,220,122,.60)!important;background:linear-gradient(135deg,#b88b1e,#f5dc7a)!important;box-shadow:0 5px 14px rgba(184,139,30,.20)!important}.mobileSummaryRank.second{color:#5c2840!important;border-color:rgba(255,224,236,.62)!important;background:linear-gradient(135deg,#e8a9c3,#ffe0ec)!important;box-shadow:0 5px 14px rgba(232,169,195,.18)!important}
  .mobileSummaryHouse{display:grid!important;justify-items:center!important;gap:5px!important;min-width:0!important}.mobileSummaryHouseLogo{width:54px!important;height:54px!important;display:grid!important;place-items:center!important;padding:5px!important;border:1px solid var(--m70-line)!important;border-radius:16px!important;background:rgba(4,4,8,.58)!important}.mobileSummaryHouseLogo img{width:100%!important;height:100%!important;object-fit:contain!important}.mobileSummaryHouseName{max-width:60px!important;color:var(--accent)!important;font-size:7px!important;font-weight:900!important;text-align:center!important;white-space:normal!important;line-height:1.1!important}
  .mobileSummaryFacts{display:grid!important;grid-template-columns:.88fr 1.24fr .88fr!important;gap:6px!important;margin-top:11px!important}.mobileSummaryFact{min-width:0!important;padding:8px 7px!important;border:1px solid var(--m70-line-soft)!important;border-radius:13px!important;background:rgba(255,255,255,.028)!important}.mobileSummaryFact span{display:block!important;color:var(--muted)!important;font-size:6px!important;font-weight:900!important;letter-spacing:.08em!important}.mobileSummaryFact strong{display:block!important;margin-top:3px!important;overflow:hidden!important;color:var(--strong)!important;font-size:10px!important;line-height:1.15!important;text-overflow:ellipsis!important;white-space:nowrap!important}

  /* Direct-flow essentials, finance, occupation/life path and official media. */
  .mobileStudentDirect{display:grid!important;gap:10px!important;margin-top:10px!important}.mobileStudentDirect.hidden{display:none!important}.mobileDirectSectionHeader{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:2px 3px 0!important}.mobileDirectSectionHeader span{color:var(--accent)!important;font-size:7px!important;font-weight:900!important;letter-spacing:.12em!important}.mobileDirectSectionHeader h3{margin:3px 0 0!important;color:var(--strong)!important;font-size:16px!important;line-height:1!important}.mobileDirectSectionMark{padding:5px 7px!important;border:1px solid var(--m70-line)!important;border-radius:999px!important;background:rgba(255,255,255,.03)!important}
  .mobileDirectEssentials{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.mobileDirectMiniCard,.mobileDirectFinanceCard,.mobileDirectCard{min-width:0!important;border:1px solid var(--m70-line)!important;border-radius:18px!important;background:var(--m70-card)!important;box-shadow:0 12px 28px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.03)!important}.mobileDirectMiniCard{min-height:72px!important;padding:11px!important}.mobileDirectLabel{display:block!important;color:var(--accent)!important;font-size:6.5px!important;font-weight:900!important;letter-spacing:.10em!important}.mobileDirectValue{margin-top:6px!important;min-width:0!important;color:var(--strong)!important;font-size:11px!important;font-weight:800!important;line-height:1.25!important;overflow-wrap:anywhere!important}.mobileDirectXLink{display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important;color:var(--strong)!important;text-decoration:none!important}.mobileDirectXLink span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.mobileDirectXLink b{width:22px!important;height:22px!important;display:grid!important;place-items:center!important;flex:0 0 22px!important;border-radius:50%!important;color:#111!important;background:linear-gradient(135deg,var(--strong),var(--accent))!important;font-size:9px!important}
  .mobileDirectFinanceCard{grid-column:1/-1!important;min-height:82px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding:12px!important;background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 46%),var(--m70-card)!important}.mobileDirectFinanceCard small{display:block!important;margin-top:4px!important;color:var(--muted)!important;font-size:7px!important}.mobileDirectFinanceCard strong{max-width:58%!important;color:var(--strong)!important;font-size:24px!important;font-weight:900!important;line-height:1!important;text-align:right!important;overflow-wrap:anywhere!important}
  .mobileDirectCard{padding:12px!important}.mobileDirectCardHead{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding-bottom:10px!important;border-bottom:1px solid var(--m70-line-soft)!important}.mobileDirectCardHead span:not(.mobileDirectCardIcon){color:var(--accent)!important;font-size:6.5px!important;font-weight:900!important;letter-spacing:.10em!important}.mobileDirectCardHead h3{margin:3px 0 0!important;color:var(--strong)!important;font-size:15px!important;line-height:1!important}.mobileDirectCardIcon{width:32px!important;height:32px!important;display:grid!important;place-items:center!important;flex:0 0 32px!important;border:1px solid var(--m70-line)!important;border-radius:10px!important;color:var(--accent)!important;background:rgba(255,255,255,.035)!important}
  .mobileDirectJourney{display:grid!important;gap:7px!important;margin-top:10px!important}.mobileOccupationItem{display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;gap:9px!important;align-items:center!important;padding:9px!important;border:1px solid var(--m70-line-soft)!important;border-radius:13px!important;background:rgba(255,255,255,.026)!important}.mobileOccupationNo{width:32px!important;height:32px!important;display:grid!important;place-items:center!important;border-radius:10px!important;color:#111!important;background:linear-gradient(135deg,var(--accent),var(--strong))!important;font-size:8px!important;font-weight:900!important}.mobileOccupationItem strong{display:block!important;color:var(--accent)!important;font-size:8px!important;font-weight:900!important;text-transform:uppercase!important}.mobileOccupationItem p{margin:3px 0 0!important;color:var(--strong)!important;font-size:11px!important;line-height:1.25!important}.mobileDirectEmpty{padding:14px!important;border:1px dashed var(--m70-line)!important;border-radius:12px!important;color:var(--muted)!important;text-align:center!important;font-size:9px!important}
  .mobileLifePath{display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;gap:10px!important;align-items:start!important;padding:10px!important;border:1px solid var(--m70-line-soft)!important;border-radius:14px!important;background:radial-gradient(circle at 0 0,color-mix(in srgb,var(--accent) 11%,transparent),transparent 45%),rgba(255,255,255,.024)!important}.mobileLifePathSigil{width:46px!important;height:46px!important;display:grid!important;place-items:center!important;border:1px solid var(--m70-line)!important;border-radius:13px!important;color:var(--accent)!important;background:rgba(0,0,0,.34)!important;font-size:10px!important;font-weight:900!important}.mobileLifePathCopy strong{color:var(--accent)!important;font-size:8px!important;letter-spacing:.08em!important}.mobileLifePathCopy p{margin:5px 0 0!important;color:var(--strong)!important;font-size:10px!important;line-height:1.48!important;overflow-wrap:anywhere!important}
  .mobileDirectMediaPreview{min-height:170px!important;display:grid!important;place-items:center!important;margin-top:10px!important;overflow:hidden!important;border:1px solid var(--m70-line-soft)!important;border-radius:14px!important;background:rgba(0,0,0,.34)!important}.mobileDirectMediaPreview img{display:block!important;width:100%!important;max-height:250px!important;object-fit:contain!important}.mobileDirectMediaAction{margin-top:8px!important}.mobileDirectOpenButton{min-height:40px!important;display:grid!important;place-items:center!important;width:100%!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:12px!important;color:#12100d!important;text-decoration:none!important;background:linear-gradient(135deg,var(--accent),var(--strong) 58%,var(--accent2))!important;font-size:8px!important;font-weight:900!important;letter-spacing:.05em!important}

  /* ONLY Point Log and Academic Records swipe. Controls deliberately obvious. */
  .mobileRecordSwipe{display:block!important;margin-top:12px!important;overflow:hidden!important;border:1px solid var(--m70-line)!important;border-radius:22px!important;background:linear-gradient(145deg,rgba(14,14,21,.98),rgba(5,5,10,.99))!important;box-shadow:0 18px 42px rgba(0,0,0,.36)!important;scroll-margin-top:10px!important}.mobileRecordSwipe.hidden{display:none!important}
  .mobileSwipeCallout{display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px!important;gap:8px!important;align-items:center!important;padding:11px!important;border-bottom:1px solid var(--m70-line-soft)!important;background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 68%),rgba(255,255,255,.025)!important}.mobileSwipeArrow{width:44px!important;height:44px!important;display:grid!important;place-items:center!important;border:1px solid color-mix(in srgb,var(--accent) 58%,rgba(255,255,255,.12))!important;border-radius:14px!important;color:#14100d!important;background:linear-gradient(135deg,var(--accent),var(--strong) 60%,var(--accent2))!important;box-shadow:0 8px 20px rgba(0,0,0,.32),0 0 16px color-mix(in srgb,var(--accent) 22%,transparent)!important;cursor:pointer!important;animation:m70ArrowPulse 1.8s ease-in-out infinite!important}.mobileSwipeArrow span{font-size:29px!important;line-height:1!important;transform:translateY(-1px)!important}.mobileSwipeArrow:disabled{opacity:.28!important;filter:grayscale(.4)!important;animation:none!important;cursor:default!important}.mobileSwipeCalloutCopy{min-width:0!important;text-align:center!important}.mobileSwipeCalloutEyebrow{display:block!important;color:var(--accent)!important;font-size:6.5px!important;font-weight:900!important;letter-spacing:.12em!important}.mobileSwipeCalloutCopy strong{display:block!important;margin-top:3px!important;color:var(--strong)!important;font-size:14px!important;line-height:1!important}.mobileSwipeCalloutCopy small{display:block!important;margin-top:4px!important;color:var(--muted)!important;font-size:7px!important}.mobileSwipeDirection{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;padding:7px 10px!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 8%,rgba(0,0,0,.28))!important;font-size:6.5px!important;font-weight:900!important;letter-spacing:.08em!important}.mobileSwipeDirection b{font-size:14px!important;animation:m70HintSlide 1.2s ease-in-out infinite alternate!important}.mobileRecordSwipe.single-page .mobileSwipeDirection{opacity:.45!important}
  @keyframes m70ArrowPulse{0%,100%{transform:scale(1);box-shadow:0 8px 20px rgba(0,0,0,.32),0 0 12px color-mix(in srgb,var(--accent) 18%,transparent)}50%{transform:scale(1.055);box-shadow:0 9px 24px rgba(0,0,0,.34),0 0 24px color-mix(in srgb,var(--accent) 38%,transparent)}}
  @keyframes m70HintSlide{from{transform:translateX(-2px)}to{transform:translateX(2px)}}
  .mobileRecordSwipeTrack{display:flex!important;width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;scroll-behavior:smooth!important;overscroll-behavior-x:contain!important;touch-action:pan-x pan-y!important;scrollbar-width:none!important}.mobileRecordSwipeTrack::-webkit-scrollbar{display:none!important}.mobileRecordPage{flex:0 0 100%!important;width:100%!important;min-width:100%!important;scroll-snap-align:start!important;scroll-snap-stop:always!important}.mobileRecordPage[hidden]{display:none!important}.mobileRecordPageScroll{height:min(68vh,620px)!important;overflow-y:auto!important;overflow-x:hidden!important;padding:10px!important;overscroll-behavior:contain!important;scrollbar-width:thin!important;scrollbar-color:var(--accent) rgba(255,255,255,.03)!important}.mobileRecordPageLabel{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin-bottom:8px!important;padding:2px 2px 7px!important;border-bottom:1px solid var(--m70-line-soft)!important}.mobileRecordPageLabel span{color:var(--accent)!important;font-size:6px!important;font-weight:900!important;letter-spacing:.10em!important}.mobileRecordPageLabel strong{color:var(--strong)!important;font-size:10px!important}.mobileRecordMount{width:100%!important;min-width:0!important}.mobileSwipeDots{display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;padding:8px!important;border-top:1px solid var(--m70-line-soft)!important}.mobileSwipeDot{width:7px!important;height:7px!important;padding:0!important;border:0!important;border-radius:999px!important;background:color-mix(in srgb,var(--muted) 38%,transparent)!important;cursor:pointer!important;transition:.2s!important}.mobileSwipeDot.is-active{width:22px!important;background:var(--accent)!important;box-shadow:0 0 12px color-mix(in srgb,var(--accent) 35%,transparent)!important}

  /* Point Log reset for the swipe page. */
  .mobileRecordPage #studentPointPanel{display:block!important;width:100%!important;margin:0!important;overflow:hidden!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}.mobileRecordPage #studentPointPanel.hidden{display:none!important}.mobileRecordPage #studentPointPanel::before,.mobileRecordPage #studentPointPanel::after{display:none!important;content:none!important}.mobileRecordPage #studentPointPanel .sectionHeader{min-height:0!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:7px!important;padding:8px 0!important;border:0!important}.mobileRecordPage #studentPointPanel .sectionTitle{font-size:11px!important;white-space:normal!important}.mobileRecordPage #studentPointPanel .semesterBadge{max-width:130px!important;padding:5px 7px!important;font-size:6px!important}.mobileRecordPage #studentPointPanel .semesterNote{margin:0 0 8px!important;font-size:8px!important}.mobileRecordPage #studentPointPanel .totals{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;padding:0 0 9px!important}.mobileRecordPage #studentPointPanel .total{min-height:66px!important;padding:8px!important;border-radius:12px!important}.mobileRecordPage #studentPointPanel .totalLabel{font-size:6px!important}.mobileRecordPage #studentPointPanel .totalValue{margin-top:6px!important;font-size:18px!important}.mobileRecordPage #studentPointPanel .logBar{display:flex!important;gap:8px!important;padding:7px 0!important;font-size:7px!important}.mobileRecordPage #studentPointPanel .pointLogs{max-height:none!important;overflow:visible!important;padding:8px 0 0!important;gap:6px!important}.mobileRecordPage #studentPointPanel .logItem{grid-template-columns:78px minmax(0,1fr)!important;gap:8px!important;padding:9px!important;border-radius:12px!important}.mobileRecordPage #studentPointPanel .logDate{font-size:7px!important}.mobileRecordPage #studentPointPanel .logDesc{font-size:10px!important}.mobileRecordPage #studentPointPanel .chip{padding:3px 6px!important;font-size:7px!important}

  /* Academic Records reset, including GRADUATED / Devoted Student. */
  .mobileRecordPage #academicCardPanel{display:block!important;width:100%!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}.mobileRecordPage #academicCardPanel::before,.mobileRecordPage #academicCardPanel::after{display:none!important;content:none!important}.mobileRecordPage #academicCardPanel .academicTop{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;padding:0 0 8px!important}.mobileRecordPage #academicCardPanel .largeCardLabel{font-size:11px!important;white-space:normal!important}.mobileRecordPage #academicCardPanel .academicIntro{font-size:8px!important}.mobileRecordPage #academicCardPanel .academicActions{display:flex!important;flex-wrap:wrap!important;gap:5px!important}.mobileRecordPage #academicCardPanel .count,.mobileRecordPage #academicCardPanel .transcriptButton{min-height:28px!important;padding:5px 8px!important;font-size:6.5px!important}.mobileRecordPage #academicCardPanel .academicRecords{max-height:none!important;overflow:visible!important;margin-top:8px!important;padding:0!important;gap:7px!important}.mobileRecordPage #academicCardPanel .semesterCard{overflow:hidden!important;border-radius:15px!important;background:rgba(5,5,9,.70)!important}.mobileRecordPage #academicCardPanel .semesterHead{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:7px!important;padding:9px!important}.mobileRecordPage #academicCardPanel .semesterTitle{font-size:11px!important;line-height:1.1!important;white-space:normal!important}.mobileRecordPage #academicCardPanel .nensei{flex:0 0 auto!important;padding:4px 6px!important;font-size:6px!important}.mobileRecordPage #academicCardPanel .miniTitle{margin:8px 9px 5px!important;font-size:6px!important}.mobileRecordPage #academicCardPanel .participation{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;padding:0 9px!important}.mobileRecordPage #academicCardPanel .part{min-height:44px!important;padding:6px!important;border-radius:10px!important}.mobileRecordPage #academicCardPanel .partName,.mobileRecordPage #academicCardPanel .partState{font-size:6px!important}.mobileRecordPage #academicCardPanel .subjects{gap:5px!important;padding:0 9px!important}.mobileRecordPage #academicCardPanel .subjectHeader{display:none!important}.mobileRecordPage #academicCardPanel .subjectRow{display:grid!important;grid-template-columns:minmax(0,1fr) 52px 52px!important;gap:5px!important;padding:7px!important;border-radius:10px!important}.mobileRecordPage #academicCardPanel .subjectName{font-size:8px!important;line-height:1.25!important}.mobileRecordPage #academicCardPanel .mark{min-height:25px!important;padding:0 3px!important;border-radius:7px!important;font-size:8px!important}.mobileRecordPage #academicCardPanel .semesterFoot{display:grid!important;grid-template-columns:1fr 1fr!important;gap:5px!important;padding:9px!important}.mobileRecordPage #academicCardPanel .outcome{padding:7px!important;border-radius:9px!important}.mobileRecordPage #academicCardPanel .outcomeLabel{font-size:6px!important}.mobileRecordPage #academicCardPanel .outcomeValue{font-size:8px!important}.mobileRecordPage #academicCardPanel .reportButton{grid-column:1/-1!important;min-height:36px!important;border-radius:10px!important;font-size:7px!important}
  .mobileRecordPage #academicCardPanel .devotedStudentSemesterCard{background:linear-gradient(145deg,rgba(19,14,22,.92),rgba(6,6,10,.96))!important}.mobileRecordPage #academicCardPanel .devotedStudentDetails{display:block!important;padding-bottom:8px!important}.mobileRecordPage #academicCardPanel .devotedStudentHero{display:grid!important;grid-template-columns:minmax(0,1fr) 82px!important;gap:7px!important;align-items:stretch!important;padding:9px!important;background:rgba(255,255,255,.025)!important}.mobileRecordPage #academicCardPanel .devotedStudentSeal{display:none!important}.mobileRecordPage #academicCardPanel .devotedStudentHeroCopy{min-width:0!important}.mobileRecordPage #academicCardPanel .devotedStudentHeroEyebrow{font-size:6px!important}.mobileRecordPage #academicCardPanel .devotedStudentHeroTitle{font-size:14px!important;line-height:1!important}.mobileRecordPage #academicCardPanel .devotedStudentHeroSub{margin-top:4px!important;font-size:6.5px!important;line-height:1.35!important}.mobileRecordPage #academicCardPanel .devotedStudentScorePanel{min-width:0!important;padding:8px!important;border-radius:11px!important}.mobileRecordPage #academicCardPanel .devotedStudentScoreValue{font-size:22px!important}.mobileRecordPage #academicCardPanel .devotedStudentScoreCaption,.mobileRecordPage #academicCardPanel .devotedStudentFieldLabel{font-size:5.5px!important}.mobileRecordPage #academicCardPanel .devotedStudentField{display:grid!important;grid-template-columns:28px minmax(0,1fr)!important;gap:7px!important;padding:8px!important;margin:0 9px 6px!important;border-radius:10px!important}.mobileRecordPage #academicCardPanel .devotedStudentFieldIcon{width:28px!important;height:28px!important;border-radius:8px!important;font-size:11px!important}.mobileRecordPage #academicCardPanel .devotedStudentFieldValue{font-size:9px!important;line-height:1.35!important;overflow-wrap:anywhere!important}.mobileRecordPage #academicCardPanel .devotedStudentFileButton{min-height:34px!important;padding:6px 9px!important;border-radius:9px!important;font-size:6.5px!important}

  .mobileRecordPage .academicLoading{min-height:180px!important;grid-template-columns:44px minmax(0,1fr)!important;gap:11px!important;padding:16px!important}.mobileRecordPage .academicLoadingOrb{width:40px!important;height:40px!important}.mobileRecordPage .academicLoadingTitle{font-size:10px!important}.mobileRecordPage .academicLoadingText{font-size:7px!important}

  /* Desktop result layout is not used visually on mobile. Nodes needed by the
     swipe deck are physically mounted above, so this source holder can vanish. */
  #resultSection{display:none!important;margin:0!important;padding:0!important}
  #graduatedWideSections{display:none!important}
  .mobileBottomNav{display:none!important}
  .footer{display:none!important}

  /* GP Ranking belongs to HOME only. */
  .gpRankingSection{margin-top:10px!important;border-radius:22px!important;box-shadow:0 16px 38px rgba(0,0,0,.31)!important}.gpRankingSection.hidden{display:none!important}.gpRankingHeader{min-height:0!important;display:grid!important;grid-template-columns:1fr!important;gap:9px!important;padding:14px!important}.gpRankingEyebrow{font-size:7px!important}.gpRankingTitle{font-size:20px!important}.gpRankingDisclaimer{margin-top:6px!important;font-size:8px!important;line-height:1.4!important}.gpRankingMeta{width:auto!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;text-align:left!important}.gpRankingSemester{min-height:26px!important;padding:5px 8px!important;font-size:6px!important}.gpRankingUpdated{margin:0!important;font-size:6px!important;text-align:right!important}.gpRankingContent{padding:10px!important}.gpArena{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;max-height:520px!important;overflow-y:auto!important;padding-right:2px!important;scrollbar-width:thin!important;scrollbar-color:var(--accent) rgba(255,255,255,.03)!important}.gpRankingSection .gpRankCard,.gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3),.gpRankingSection .gpArena>.gpRankCard:nth-child(n+4){position:relative!important;display:grid!important;grid-template-columns:58px minmax(0,1fr) 62px!important;grid-template-rows:none!important;gap:9px!important;align-items:center!important;min-height:80px!important;height:auto!important;padding:9px!important;border-radius:16px!important;text-align:left!important}.gpRankingSection .gpRankLeft{width:58px!important;display:grid!important;justify-items:center!important;gap:0!important}.gpRankingSection .gpRankNo{position:absolute!important;left:5px!important;top:5px!important;z-index:6!important;min-width:26px!important;min-height:18px!important;padding:2px 5px!important;font-size:7px!important}.gpRankingSection .gpRankAvatar,.gpRankingSection .gpRankAvatarFrame{width:54px!important;height:54px!important;min-width:54px!important;min-height:54px!important}.gpRankingSection .gpRankAvatarGlow{inset:-5px!important}.gpRankingSection .gpRankHouseWatermark{width:52px!important;height:52px!important;inset:1px!important}.gpRankingSection .gpRankHouseBadge{width:20px!important;height:20px!important;right:-1px!important;bottom:-1px!important;border-radius:7px!important}.gpRankingSection .gpRankHouseBadge img{width:15px!important;height:15px!important}.gpRankingSection .gpRankBody{min-width:0!important}.gpRankingSection .gpRankTopline{display:flex!important;gap:5px!important;font-size:5.8px!important}.gpRankingSection .gpRankHouse{min-height:18px!important;padding:3px 6px!important;font-size:5.5px!important}.gpRankingSection .gpRankId{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.gpRankingSection .gpRankNameButton{margin-top:5px!important;max-width:100%!important;font-size:11px!important;line-height:1.05!important;text-align:left!important;white-space:normal!important;overflow-wrap:anywhere!important}.gpRankingSection .gpRankKanji{margin-top:4px!important;font-size:8px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.gpRankingSection .gpRankUsername{margin-top:4px!important;font-size:6.5px!important}.gpRankingSection .gpRankScore{width:auto!important;display:grid!important;justify-items:end!important;padding:0!important;border:0!important;text-align:right!important}.gpRankingSection .gpRankScoreLabel{font-size:5.5px!important}.gpRankingSection .gpRankScoreValue{font-size:16px!important}.gpRankingSection .gpArena>.gpRankCard:nth-child(1) .gpRankScoreValue{font-size:18px!important}.gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankNameButton{text-align:left!important;font-size:11px!important}.gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankScore{justify-items:end!important;text-align:right!important;border:0!important;padding:0!important}.gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankScoreValue{font-size:16px!important}
}

@media (max-width:390px){
  .mobileStudentSummaryTop{grid-template-columns:82px minmax(0,1fr) 52px!important;gap:9px!important}.mobileSummaryPortrait{width:82px!important;height:102px!important}.mobileSummaryName{font-size:18px!important}.mobileSummaryHouseLogo{width:48px!important;height:48px!important}.mobileStudentHeaderCopy h2{font-size:22px!important}.mobileDirectFinanceCard strong{font-size:21px!important}.mobileSwipeCallout{grid-template-columns:40px minmax(0,1fr) 40px!important}.mobileSwipeArrow{width:40px!important;height:40px!important}.gpRankingSection .gpRankCard,.gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3),.gpRankingSection .gpArena>.gpRankCard:nth-child(n+4){grid-template-columns:54px minmax(0,1fr) 58px!important;gap:7px!important}.gpRankingSection .gpRankAvatar,.gpRankingSection .gpRankAvatarFrame{width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important}
}

@media (max-width:768px){
  .mobileStudentSummaryGlow{right:0!important;width:138px!important;height:138px!important;top:-38px!important}
}

/* =====================================================================
   V71 — MOBILE VERTICAL SCROLL RESTORATION
   ---------------------------------------------------------------------
   V67 used a full-screen swipe shell and therefore locked html/body/shell
   with overflow:hidden + fixed viewport heights. V70 no longer uses that
   architecture, so those legacy locks must be explicitly neutralized.
   This block is mobile-only and leaves desktop/document export untouched.
   ===================================================================== */
@media (max-width:768px){
  html{
    width:100%!important;
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-x:none!important;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y pinch-zoom!important;
    -webkit-overflow-scrolling:touch!important;
  }

  body:not(.document-review-open){
    width:100%!important;
    height:auto!important;
    min-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-x:none!important;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y pinch-zoom!important;
    -webkit-overflow-scrolling:touch!important;
  }

  .shell{
    width:min(100%,480px)!important;
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow:visible!important;
    overscroll-behavior:auto!important;
  }

  /* Keep modal/document review scroll locking intentional. */
  body.document-review-open{
    overflow:hidden!important;
    height:100dvh!important;
  }

  /* V70 swipe only owns horizontal movement inside its own record deck. */
  .mobileRecordSwipe,
  .mobileRecordSwipeTrack,
  .mobileRecordPage{
    overscroll-behavior-y:auto!important;
  }

  .mobileRecordPageScroll{
    touch-action:pan-y!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
}


/* =====================================================================
   V72 — NATIVE MOBILE RECORD UI
   Mobile-only rebuild. Desktop layout and document/PDF rules are untouched.
   ===================================================================== */
@media (max-width:768px){
  /* Premium student/alumni masthead: context only, no repeated student data. */
  body:not(.front-mode) .mobileStudentHeader:not(.hidden){
    display:block!important;
  }
  .mobileStudentHeader{
    min-height:188px!important;
    padding:15px!important;
    border-radius:26px!important;
    border:1px solid color-mix(in srgb,var(--accent) 32%,rgba(255,255,255,.11))!important;
    background:#07070c!important;
    box-shadow:0 22px 56px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.04)!important;
  }
  .mobileStudentHeaderArt{background-position:center 34%!important;filter:saturate(.92) contrast(1.08) brightness(.62)!important;transform:scale(1.025)!important}
  .mobileStudentHeaderShade{background:linear-gradient(180deg,rgba(2,2,6,.14),rgba(3,3,8,.42) 42%,rgba(3,3,9,.96) 100%),linear-gradient(90deg,rgba(0,0,0,.52),transparent 62%)!important}
  .mobileStudentHeader::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.045),transparent 28%,transparent 70%,color-mix(in srgb,var(--accent) 8%,transparent));mix-blend-mode:screen}
  .mobileStudentHeaderMonogram{position:absolute;right:10px;bottom:-23px;z-index:-1;color:color-mix(in srgb,var(--accent) 12%,transparent);font-size:112px;font-weight:900;line-height:1;filter:blur(.2px);transform:rotate(-7deg);pointer-events:none}
  .mobileStudentHeaderTopline{position:relative;z-index:3;display:grid!important;grid-template-columns:36px minmax(0,1fr) auto!important;gap:9px!important;align-items:center!important}
  .mobileStudentHeaderSeal{width:36px!important;height:36px!important;padding:4px!important;border-radius:12px!important;background:rgba(4,4,10,.52)!important;backdrop-filter:blur(14px)!important}
  .mobileStudentHeaderBrand strong{font-family:"Cinzel","League Spartan",serif!important;font-size:10px!important;letter-spacing:.08em!important}.mobileStudentHeaderBrand small{font-size:7px!important;letter-spacing:.06em!important}
  .mobileStudentHeaderVerified{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border:1px solid color-mix(in srgb,var(--accent) 35%,rgba(255,255,255,.1));border-radius:999px;color:var(--strong);background:rgba(5,5,10,.52);font-size:6px;font-weight:900;letter-spacing:.08em;backdrop-filter:blur(12px)}
  .mobileStudentHeaderVerified i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
  .mobileStudentHeaderCopy{left:15px!important;right:50px!important;bottom:24px!important;z-index:3!important}
  .mobileStudentHeaderEyebrow{font-size:7px!important;letter-spacing:.17em!important;color:var(--accent)!important}
  .mobileStudentHeaderCopy h2{margin:5px 0 0!important;font-family:"Cinzel","League Spartan",serif!important;font-size:25px!important;line-height:.98!important;letter-spacing:.035em!important;color:var(--strong)!important;text-shadow:0 8px 22px rgba(0,0,0,.55)!important}
  .mobileStudentHeaderSubtitle{max-width:285px;margin:8px 0 0;color:color-mix(in srgb,var(--text) 74%,var(--muted));font-size:8px;line-height:1.45;font-weight:600;letter-spacing:.02em}
  .mobileStudentHeaderRule{position:absolute;left:15px;right:15px;bottom:12px;display:grid;grid-template-columns:1fr 5px 1fr;gap:6px;align-items:center;opacity:.75}.mobileStudentHeaderRule span{height:1px;background:linear-gradient(90deg,transparent,var(--accent))}.mobileStudentHeaderRule span:last-child{background:linear-gradient(90deg,var(--accent),transparent)}.mobileStudentHeaderRule b{width:5px;height:5px;border:1px solid var(--accent);transform:rotate(45deg)}
  .mobileStudentHeader.is-graduated{border-color:rgba(220,178,102,.32)!important;box-shadow:0 22px 58px rgba(0,0,0,.48),0 0 28px rgba(205,161,78,.08)!important}
  .mobileStudentHeader.is-graduated .mobileStudentHeaderVerified{color:#f4ddb0;border-color:rgba(226,193,126,.35)}

  /* Summary no longer repeats House in a facts row. ID remains once here only. */
  .mobileSummaryFacts{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .mobileSummaryFact:nth-child(3){display:none!important}

  /* Swipe shell remains obvious but clean. */
  .mobileRecordSwipe{border-radius:25px!important;background:linear-gradient(155deg,rgba(15,15,23,.985),rgba(5,5,10,.995))!important;box-shadow:0 22px 55px rgba(0,0,0,.42)!important}
  .mobileSwipeCallout{grid-template-columns:50px minmax(0,1fr) 50px!important;padding:12px!important;background:radial-gradient(circle at 50% -30%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 72%),rgba(255,255,255,.025)!important}
  .mobileSwipeArrow{width:50px!important;height:50px!important;border-radius:16px!important;box-shadow:0 10px 24px rgba(0,0,0,.35),0 0 22px color-mix(in srgb,var(--accent) 24%,transparent)!important}
  .mobileSwipeArrow span{font-size:34px!important}.mobileSwipeCalloutEyebrow{font-size:7px!important;letter-spacing:.15em!important}.mobileSwipeCalloutCopy strong{font-family:"Cinzel","League Spartan",serif!important;font-size:14px!important}.mobileSwipeCalloutCopy small{font-size:7px!important}.mobileSwipeDirection{padding:8px 10px!important;font-size:7px!important;letter-spacing:.09em!important}.mobileSwipeDirection b{font-size:16px!important}.mobileSwipeDots{padding:10px!important}
  .mobileRecordPageScroll{height:min(72vh,660px)!important;padding:10px 10px 14px!important;background:linear-gradient(180deg,rgba(255,255,255,.01),transparent)!important}
  .mobileRecordPageLabel{margin-bottom:10px!important;padding:3px 3px 9px!important}.mobileRecordPageLabel span{font-size:6.5px!important;letter-spacing:.14em!important}.mobileRecordPageLabel strong{font-family:"Cinzel","League Spartan",serif!important;font-size:11px!important}

  /* Never display/reflow the original desktop Point/Academic panels inside mobile. */
  #mobilePointsMount>#studentPointPanel,
  #mobileAcademicMount>#academicCardPanel{display:none!important}

  /* ------------------ MOBILE POINT LOG ------------------ */
  .m72PointsApp{display:grid;gap:10px;min-width:0}
  .m72RecordIntro{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:11px 12px;border:1px solid var(--m70-line-soft);border-radius:16px;background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 58%),rgba(255,255,255,.025)}
  .m72RecordIntro span{color:var(--accent);font-size:6px;font-weight:900;letter-spacing:.14em}.m72RecordIntro h3{margin:3px 0 0;color:var(--strong);font-size:15px;line-height:1}.m72RecordSemester{max-width:46%;padding:5px 7px;border:1px solid var(--m70-line);border-radius:999px;color:var(--accent);font-size:6px;font-weight:900;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m72PointTotals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .m72PointTotal{min-width:0;display:grid;align-content:center;gap:3px;min-height:84px;padding:10px;border:1px solid var(--m70-line-soft);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(4,4,9,.72));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
  .m72PointTotal span{font-size:7px;font-weight:900;letter-spacing:.12em}.m72PointTotal strong{font-size:22px;line-height:1;font-weight:900}.m72PointTotal small{color:var(--muted);font-size:5.8px;line-height:1.25}.m72PointTotal.gp{box-shadow:inset 3px 0 0 var(--gp)}.m72PointTotal.gp span,.m72PointTotal.gp strong{color:var(--gp)}.m72PointTotal.rp{box-shadow:inset 3px 0 0 var(--rp)}.m72PointTotal.rp span,.m72PointTotal.rp strong{color:var(--rp)}.m72PointTotal.fhp{box-shadow:inset 3px 0 0 var(--fhp)}.m72PointTotal.fhp span,.m72PointTotal.fhp strong{color:var(--fhp)}
  .m72PointActivity{overflow:hidden;border:1px solid var(--m70-line-soft);border-radius:18px;background:rgba(3,3,8,.45)}
  .m72PointActivityHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border-bottom:1px solid var(--m70-line-soft);background:rgba(255,255,255,.018)}.m72PointActivityHead>div{display:grid;gap:2px}.m72PointActivityHead span{color:var(--accent);font-size:6px;font-weight:900;letter-spacing:.13em}.m72PointActivityHead strong{color:var(--strong);font-size:10px}.m72PointActivityHead small{max-width:42%;color:var(--muted);font-size:5.8px;text-align:right}
  .m72PointTimelineItem{display:grid;grid-template-columns:35px minmax(0,1fr);gap:8px;padding:10px 11px;border-bottom:1px solid color-mix(in srgb,var(--m70-line-soft) 76%,transparent)}.m72PointTimelineItem:last-child{border-bottom:0}.m72TimelineRail{position:relative;display:grid;justify-items:center;align-content:start;gap:4px}.m72TimelineRail::after{content:'';position:absolute;top:18px;bottom:-16px;width:1px;background:linear-gradient(var(--accent),transparent);opacity:.35}.m72PointTimelineItem:last-child .m72TimelineRail::after{display:none}.m72TimelineRail i{position:relative;z-index:1;width:9px;height:9px;border:2px solid var(--accent);border-radius:50%;background:#09090e;box-shadow:0 0 10px color-mix(in srgb,var(--accent) 32%,transparent)}.m72TimelineRail b{color:var(--muted);font-size:6px}.m72TimelineBody{min-width:0}.m72TimelineBody time{color:var(--muted);font-size:6px}.m72TimelineBody p{margin:4px 0 7px;color:var(--strong);font-size:9px;line-height:1.35}.m72TimelineChips{display:flex;flex-wrap:wrap;gap:5px}.m72TimelineChips span{padding:4px 6px;border:1px solid var(--m70-line-soft);border-radius:999px;font-size:6.5px;font-weight:900;background:rgba(255,255,255,.025)}.m72TimelineChips .gp{color:var(--gp)}.m72TimelineChips .rp{color:var(--rp)}.m72TimelineChips .fhp{color:var(--fhp)}.m72TimelineChips .neutral{color:var(--muted)}

  /* ------------------ MOBILE ACADEMIC ------------------ */
  .m72AcademicApp{display:grid;gap:10px;min-width:0}.m72AcademicToolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border:1px solid var(--m70-line-soft);border-radius:16px;background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 58%),rgba(255,255,255,.025)}.m72AcademicToolbar span{color:var(--accent);font-size:6px;font-weight:900;letter-spacing:.14em}.m72AcademicToolbar h3{margin:3px 0 0;color:var(--strong);font-size:14px}.m72TranscriptButton{min-height:34px;padding:7px 9px;border:1px solid color-mix(in srgb,var(--accent) 45%,rgba(255,255,255,.12));border-radius:11px;color:#15100c;background:linear-gradient(135deg,var(--accent),var(--strong) 60%,var(--accent2));font-size:6px;font-weight:900;letter-spacing:.04em;cursor:pointer}.m72TranscriptButton:disabled{opacity:.45}
  .m72AcademicTimeline{display:grid;gap:10px}.m72AcademicTerm{overflow:hidden;border:1px solid var(--m70-line-soft);border-radius:18px;background:linear-gradient(145deg,rgba(17,17,25,.96),rgba(5,5,10,.98));box-shadow:0 10px 24px rgba(0,0,0,.22)}
  .m72AcademicTermHead{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px 11px;border-bottom:1px solid var(--m70-line-soft);background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 65%)}.m72AcademicTermIndex{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--m70-line);border-radius:10px;color:var(--accent);background:rgba(0,0,0,.32);font-size:7px;font-weight:900}.m72AcademicTermTitle{min-width:0}.m72AcademicTermTitle span{color:var(--accent);font-size:6px;font-weight:900;letter-spacing:.10em}.m72AcademicTermTitle h4{margin:2px 0 0;color:var(--strong);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m72AcademicStatus{max-width:88px;padding:5px 7px;border:1px solid var(--m70-line-soft);border-radius:999px;color:var(--muted);font-size:5.8px;font-weight:900;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m72AcademicStatus.promoted{color:#bff4d5!important;background:rgba(39,121,77,.16)}.m72AcademicStatus.retained{color:#ffc0c7!important;background:rgba(145,40,53,.18)}
  .m72AcademicMeta{display:grid;grid-template-columns:1.35fr .82fr .82fr;gap:6px;padding:8px 10px}.m72AcademicMeta>div{min-width:0;padding:7px;border:1px solid var(--m70-line-soft);border-radius:11px;background:rgba(255,255,255,.018)}.m72AcademicMeta span{display:block;color:var(--muted);font-size:5.4px;letter-spacing:.06em}.m72AcademicMeta strong{display:block;margin-top:3px;color:var(--strong);font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m72AcademicMeta .rank1{color:#f4d66f!important}.m72AcademicMeta .rank2{color:#f3b6d1!important}
  .m72AcademicParticipation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:0 10px 9px}.m72AcademicParticipation span{display:flex;align-items:center;justify-content:space-between;gap:7px;min-width:0;padding:7px 8px;border:1px solid var(--m70-line-soft);border-radius:11px;background:rgba(255,255,255,.018)}.m72AcademicParticipation b{color:var(--strong);font-size:6.5px}.m72AcademicParticipation small{font-size:5.4px;text-align:right}.m72AcademicParticipation .yes small{color:#bff4d5}.m72AcademicParticipation .no small{color:#f1aeb6}.m72AcademicParticipation .locked small{color:var(--muted)}
  .m72AcademicSubjects{display:grid;gap:6px;padding:0 10px 10px}.m72AcademicSubject{display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:8px;align-items:center;padding:8px 9px;border:1px solid var(--m70-line-soft);border-radius:12px;background:rgba(0,0,0,.19)}.m72AcademicSubject>div:first-child{min-width:0}.m72AcademicSubject>div:first-child span{display:block;color:var(--muted);font-size:5.2px}.m72AcademicSubject>div:first-child strong{display:block;margin-top:3px;color:var(--strong);font-size:8px;line-height:1.25;overflow-wrap:anywhere}.m72AcademicMarks{display:grid;grid-template-columns:1fr 1fr;gap:5px}.m72AcademicMarks>span{display:grid;justify-items:center;gap:2px;padding:5px;border:1px solid var(--m70-line-soft);border-radius:9px;background:color-mix(in srgb,var(--accent) 5%,rgba(255,255,255,.015))}.m72AcademicMarks small{color:var(--muted);font-size:4.8px}.m72AcademicMarks b{color:var(--accent);font-size:9px}
  .m72AcademicDetailButton{width:calc(100% - 20px);min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 10px 10px;padding:7px 10px;border:1px solid color-mix(in srgb,var(--accent) 38%,rgba(255,255,255,.10));border-radius:11px;color:var(--strong);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,rgba(255,255,255,.035)),rgba(255,255,255,.02));font-size:6.5px;font-weight:900;letter-spacing:.05em;cursor:pointer}.m72AcademicDetailButton b{font-size:14px;color:var(--accent)}

  .m72AcademicLoading{min-height:200px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;padding:18px;border:1px solid var(--m70-line-soft);border-radius:18px;background:rgba(255,255,255,.025)}.m72AcademicSpinner{width:40px;height:40px;border:2px solid color-mix(in srgb,var(--accent) 18%,transparent);border-top-color:var(--accent);border-radius:50%;animation:academicLoadingSpin .9s linear infinite}.m72AcademicLoading span{color:var(--accent);font-size:6px;font-weight:900;letter-spacing:.12em}.m72AcademicLoading strong{display:block;margin-top:3px;color:var(--strong);font-size:11px}.m72AcademicLoading p{margin:5px 0 0;color:var(--muted);font-size:7px;line-height:1.4}.m72MobileEmpty{padding:18px;border:1px dashed var(--m70-line);border-radius:15px;color:var(--muted);font-size:8px;line-height:1.45;text-align:center;background:rgba(255,255,255,.018)}

  /* ------------------ MOBILE DEVOTED STUDENT ------------------ */
  .m72DevotedCard{overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 38%,rgba(255,255,255,.12));border-radius:20px;background:radial-gradient(circle at 0 0,color-mix(in srgb,var(--accent) 14%,transparent),transparent 45%),linear-gradient(145deg,rgba(22,17,27,.98),rgba(6,6,11,.99));box-shadow:0 14px 34px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.035)}
  .m72DevotedTop{display:grid;grid-template-columns:42px minmax(0,1fr) 62px;gap:9px;align-items:center;padding:12px;border-bottom:1px solid var(--m70-line-soft)}.m72DevotedSeal{width:42px;height:42px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 48%,rgba(255,255,255,.12));border-radius:13px;color:var(--accent);background:rgba(0,0,0,.26);font-size:22px;font-weight:900;box-shadow:inset 0 0 18px color-mix(in srgb,var(--accent) 8%,transparent)}.m72DevotedTitle{min-width:0}.m72DevotedTitle span{color:var(--accent);font-size:5.5px;font-weight:900;letter-spacing:.11em}.m72DevotedTitle h4{margin:3px 0 0;color:var(--strong);font-family:"Cinzel","League Spartan",serif;font-size:13px;line-height:1}.m72DevotedTitle p{margin:4px 0 0;color:var(--muted);font-size:6px;line-height:1.35}.m72DevotedScore{display:grid;justify-items:center;padding:8px 5px;border:1px solid var(--m70-line);border-radius:12px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 10%,rgba(255,255,255,.025)),rgba(0,0,0,.22))}.m72DevotedScore span{color:var(--muted);font-size:5px}.m72DevotedScore strong{margin-top:3px;color:var(--accent);font-size:20px;line-height:1}
  .m72DevotedField{display:grid;gap:4px;margin:9px 10px 0;padding:9px 10px;border:1px solid var(--m70-line-soft);border-radius:12px;background:rgba(255,255,255,.018)}.m72DevotedField span{color:var(--accent);font-size:5.5px;font-weight:900;letter-spacing:.10em}.m72DevotedField strong{color:var(--strong);font-size:8.5px;line-height:1.35;overflow-wrap:anywhere}.m72DevotedField.title strong{font-size:9px}.m72DevotedAction{padding:9px 10px 11px}.m72DevotedAction button{width:100%;min-height:36px;border:1px solid color-mix(in srgb,var(--accent) 48%,rgba(255,255,255,.1));border-radius:11px;color:#14100d;background:linear-gradient(135deg,var(--accent),var(--strong) 58%,var(--accent2));font-size:6.5px;font-weight:900;letter-spacing:.04em;cursor:pointer}.m72DevotedAction span{display:block;padding:9px;color:var(--muted);font-size:6px;text-align:center}
}

@media (max-width:390px){
  .mobileStudentHeaderCopy{right:42px!important}.mobileStudentHeaderCopy h2{font-size:23px!important}.mobileStudentHeaderSubtitle{max-width:260px}
  .m72PointTotal strong{font-size:20px}.m72AcademicSubject{grid-template-columns:minmax(0,1fr) 108px}.m72DevotedTop{grid-template-columns:40px minmax(0,1fr) 58px}
}


/* =====================================================================
   V73 — PREMIUM NATIVE MOBILE RECORDS
   Everything below is mobile-only. Desktop geometry, panels and PDF/PNG
   document dimensions remain exactly under the original desktop rules.
   ===================================================================== */
@media (max-width:768px){
  /* Background ornaments stay gently visible throughout student data. */
  body:not(.front-mode) .backdrop{opacity:1!important}
  body:not(.front-mode) .backdrop .faller{opacity:calc(var(--o,.10) * 1.45)!important;filter:drop-shadow(0 5px 18px color-mix(in srgb,var(--accent) 28%,transparent))!important}
  body:not(.front-mode) .mobileStudentSummary,
  body:not(.front-mode) .mobileDirectMiniCard,
  body:not(.front-mode) .mobileDirectFinanceCard,
  body:not(.front-mode) .mobileDirectCard,
  body:not(.front-mode) .mobileRecordSwipe{backdrop-filter:blur(15px) saturate(1.08)!important;-webkit-backdrop-filter:blur(15px) saturate(1.08)!important}
  body:not(.front-mode) .mobileStudentSummary{background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 40%),rgba(10,10,16,.80)!important}
  body:not(.front-mode) .mobileDirectMiniCard,
  body:not(.front-mode) .mobileDirectFinanceCard,
  body:not(.front-mode) .mobileDirectCard{background:rgba(9,9,15,.78)!important}

  /* Minimal premium header — no verbose labels, badges or repeated profile data. */
  .mobileStudentHeader{min-height:164px!important;padding:0!important;overflow:hidden!important;border-radius:25px!important;border:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.10))!important;background:#07070b!important;box-shadow:0 22px 54px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.045)!important}
  .mobileStudentHeaderArt{inset:0!important;background-position:center 34%!important;filter:saturate(.88) contrast(1.07) brightness(.58)!important;transform:scale(1.02)!important}
  .mobileStudentHeaderShade{background:linear-gradient(90deg,rgba(3,3,8,.91) 0%,rgba(3,3,8,.66) 42%,rgba(3,3,8,.22) 100%),linear-gradient(180deg,rgba(0,0,0,.06),rgba(2,2,7,.48) 70%,rgba(3,3,8,.88))!important}
  .mobileStudentHeader::after{content:''!important;position:absolute!important;inset:0!important;pointer-events:none!important;background:linear-gradient(110deg,rgba(255,255,255,.035),transparent 24%,transparent 72%,color-mix(in srgb,var(--accent) 9%,transparent))!important}
  .m73StudentHeaderBrand{position:absolute;left:15px;top:14px;z-index:3;display:flex;align-items:center;gap:8px}
  .m73StudentHeaderSeal{width:31px;height:31px;display:grid;place-items:center;padding:4px;border:1px solid color-mix(in srgb,var(--accent) 30%,rgba(255,255,255,.10));border-radius:10px;background:rgba(4,4,9,.46);backdrop-filter:blur(10px)}
  .m73StudentHeaderSeal img{width:100%;height:100%;object-fit:contain}
  .m73StudentHeaderBrand strong{font-family:"Cinzel","League Spartan",serif;color:var(--strong);font-size:9px;letter-spacing:.12em;font-weight:800;text-shadow:0 4px 16px rgba(0,0,0,.7)}
  .m73StudentHeaderTitle{position:absolute;left:15px;bottom:23px;z-index:3;display:grid;gap:4px}
  .m73StudentHeaderTitle span{color:var(--accent);font-size:6.5px;font-weight:900;letter-spacing:.18em}
  .m73StudentHeaderTitle h2{margin:0;color:var(--strong);font-family:"Cinzel","League Spartan",serif;font-size:27px;font-weight:700;line-height:.94;letter-spacing:.035em;text-shadow:0 8px 22px rgba(0,0,0,.64)}
  .m73StudentHeaderLine{position:absolute;left:15px;right:15px;bottom:12px;z-index:3;display:flex;align-items:center;gap:7px}
  .m73StudentHeaderLine i{width:44px;height:1px;background:var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 34%,transparent)}
  .m73StudentHeaderLine b{width:4px;height:4px;border:1px solid var(--accent);transform:rotate(45deg)}
  .mobileStudentHeader.is-graduated{border-color:rgba(224,190,121,.34)!important;box-shadow:0 22px 54px rgba(0,0,0,.48),0 0 28px rgba(210,169,90,.07)!important}
  .mobileStudentHeaderTopline,.mobileStudentHeaderCopy,.mobileStudentHeaderRule,.mobileStudentHeaderMonogram,.mobileStudentHeaderVerified{display:none!important}

  /* Transform-based swipe: no nested vertical scroller, so the body always scrolls upward/downward. */
  .mobileRecordSwipe{background:linear-gradient(155deg,rgba(10,10,16,.82),rgba(5,5,10,.88))!important;border-color:color-mix(in srgb,var(--accent) 25%,rgba(255,255,255,.08))!important;overflow:hidden!important}
  .mobileRecordSwipeTrack{position:relative!important;display:flex!important;width:100%!important;overflow:hidden!important;overflow-x:hidden!important;overflow-y:hidden!important;scroll-snap-type:none!important;scroll-behavior:auto!important;touch-action:pan-y pinch-zoom!important;overscroll-behavior:auto!important;transition:height .26s ease,transform .34s cubic-bezier(.22,.72,.24,1)!important;will-change:height,transform!important}
  .mobileRecordSwipeTrack:not(.is-animating){transition:height .26s ease!important}
  .mobileRecordPage{flex:0 0 100%!important;width:100%!important;min-width:100%!important;height:auto!important;align-self:flex-start!important;scroll-snap-align:none!important}
  .mobileRecordPageScroll{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;overflow-x:visible!important;overflow-y:visible!important;padding:11px 10px 15px!important;overscroll-behavior:auto!important;touch-action:pan-y!important;-webkit-overflow-scrolling:auto!important;scrollbar-width:none!important}
  .mobileRecordPageScroll::-webkit-scrollbar{display:none!important}
  .mobileRecordPageLabel{margin-bottom:11px!important;padding:2px 2px 9px!important;border-bottom:1px solid color-mix(in srgb,var(--accent) 16%,rgba(255,255,255,.06))!important}
  .mobileRecordPageLabel span{font-size:6px!important;letter-spacing:.15em!important}.mobileRecordPageLabel strong{font-family:"Cinzel","League Spartan",serif!important;font-size:11px!important;font-weight:700!important}
  .mobileSwipeCallout{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 5%,rgba(255,255,255,.018)),rgba(255,255,255,.012))!important}
  .mobileSwipeArrow{border-radius:15px!important;border-color:color-mix(in srgb,var(--accent) 42%,rgba(255,255,255,.12))!important;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 14%,rgba(10,10,15,.95)),rgba(5,5,9,.96))!important;color:var(--strong)!important;box-shadow:0 10px 24px rgba(0,0,0,.34),0 0 20px color-mix(in srgb,var(--accent) 18%,transparent)!important}
  .mobileSwipeDirection{background:color-mix(in srgb,var(--accent) 4%,rgba(0,0,0,.10))!important}

  /* V73 POINT LOG — quiet ledger rather than stacked bubbly cards. */
  .m73PointsApp{display:grid;gap:11px;min-width:0}
  .m73PointsHeader{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:4px 3px 9px;border-bottom:1px solid color-mix(in srgb,var(--accent) 22%,rgba(255,255,255,.06))}
  .m73PointsHeader span{color:var(--accent);font-size:6px;font-weight:900;letter-spacing:.16em}.m73PointsHeader h3{max-width:235px;margin:4px 0 0;color:var(--strong);font-family:"Cinzel","League Spartan",serif;font-size:13px;font-weight:700;line-height:1.12}.m73PointsHeader small{color:var(--muted);font-size:5.8px;white-space:nowrap}
  .m73PointLedger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 22%,rgba(255,255,255,.07));border-radius:15px;background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(0,0,0,.18));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
  .m73PointLedger>div{position:relative;min-width:0;padding:12px 10px 11px;text-align:center}.m73PointLedger>div+div{border-left:1px solid color-mix(in srgb,var(--accent) 14%,rgba(255,255,255,.06))}.m73PointLedger span{display:block;font-size:6px;font-weight:900;letter-spacing:.14em}.m73PointLedger strong{display:block;margin-top:5px;font-size:21px;line-height:1;font-weight:900}.m73PointLedger .gp span,.m73PointLedger .gp strong{color:var(--gp)}.m73PointLedger .rp span,.m73PointLedger .rp strong{color:var(--rp)}.m73PointLedger .fhp span,.m73PointLedger .fhp strong{color:var(--fhp)}
  .m73ActivityLedger{overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.07));border-radius:16px;background:rgba(4,4,9,.30)}
  .m73ActivityHead{display:grid;grid-template-columns:72px minmax(0,1fr) 88px;gap:8px;padding:8px 10px;border-bottom:1px solid color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.06));color:var(--muted);font-size:5.5px;font-weight:900;letter-spacing:.10em}.m73ActivityHead b{color:var(--accent);font-size:5.8px}.m73ActivityHead span:last-child{text-align:right}
  .m73ActivityRow{display:grid;grid-template-columns:72px minmax(0,1fr) 88px;gap:8px;align-items:start;padding:10px;border-bottom:1px solid rgba(255,255,255,.055)}.m73ActivityRow:last-child{border-bottom:0}.m73ActivityRow time{color:var(--muted);font-size:6px;line-height:1.3}.m73ActivityRow p{margin:0;color:var(--strong);font-size:8.5px;line-height:1.38}.m73ActivityPoints{display:flex;justify-content:flex-end;align-items:flex-start;gap:4px;flex-wrap:wrap}.m73ActivityPoints span{padding:3px 5px;border:1px solid rgba(255,255,255,.07);border-radius:999px;background:rgba(255,255,255,.02);font-size:6px;font-weight:900;white-space:nowrap}.m73ActivityPoints .gp{color:var(--gp)}.m73ActivityPoints .rp{color:var(--rp)}.m73ActivityPoints .fhp{color:var(--fhp)}.m73ActivityPoints .neutral{color:var(--muted)}

  /* V73 ACADEMIC — compact semester dossier with aligned marks. */
  .m73AcademicApp{display:grid;gap:11px;min-width:0}
  .m73AcademicHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 3px 9px;border-bottom:1px solid color-mix(in srgb,var(--accent) 22%,rgba(255,255,255,.06))}.m73AcademicHeader span{color:var(--accent);font-size:6px;font-weight:900;letter-spacing:.16em}.m73AcademicHeader h3{margin:4px 0 0;color:var(--strong);font-family:"Cinzel","League Spartan",serif;font-size:13px;font-weight:700}.m73TranscriptButton{min-height:31px;padding:6px 9px;border:1px solid color-mix(in srgb,var(--accent) 40%,rgba(255,255,255,.10));border-radius:10px;color:var(--strong);background:color-mix(in srgb,var(--accent) 9%,rgba(255,255,255,.02));font-size:6px;font-weight:900;letter-spacing:.05em;cursor:pointer}.m73TranscriptButton:disabled{opacity:.42}
  .m73AcademicList{display:grid;gap:11px}.m73AcademicTerm{overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 22%,rgba(255,255,255,.07));border-radius:17px;background:linear-gradient(145deg,rgba(12,12,19,.78),rgba(4,4,9,.78));box-shadow:0 12px 28px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.025);backdrop-filter:blur(11px)}
  .m73TermHead{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px;border-bottom:1px solid rgba(255,255,255,.055)}.m73TermNo{width:28px;height:28px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 28%,rgba(255,255,255,.07));border-radius:9px;color:var(--accent);font-size:6px;font-weight:900}.m73TermTitle{display:grid;gap:2px;min-width:0}.m73TermTitle span{color:var(--accent);font-size:5.5px;font-weight:900;letter-spacing:.10em}.m73TermTitle strong{color:var(--strong);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m73TermStatus{max-width:82px;padding:4px 6px;border:1px solid rgba(255,255,255,.07);border-radius:999px;color:var(--muted);font-size:5.4px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m73TermStatus.promoted{color:#bff4d5!important;background:rgba(39,121,77,.14)}.m73TermStatus.retained{color:#ffc0c7!important;background:rgba(145,40,53,.16)}
  .m73ResultStrip{display:grid;grid-template-columns:1.35fr .72fr .72fr;border-bottom:1px solid rgba(255,255,255,.05)}.m73ResultStrip>div{min-width:0;padding:8px 10px}.m73ResultStrip>div+div{border-left:1px solid rgba(255,255,255,.05)}.m73ResultStrip span{display:block;color:var(--muted);font-size:5px;letter-spacing:.08em}.m73ResultStrip strong{display:block;margin-top:3px;color:var(--strong);font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m73ResultStrip .rank1{color:#f4d66f!important}.m73ResultStrip .rank2{color:#f3b6d1!important}
  .m73ParticipationStrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:8px 9px;border-bottom:1px solid rgba(255,255,255,.05)}.m73ParticipationStrip span{min-width:0;display:grid;gap:3px;padding:5px 5px;text-align:center;border-right:1px solid rgba(255,255,255,.05)}.m73ParticipationStrip span:last-child{border-right:0}.m73ParticipationStrip b{color:var(--strong);font-size:5.2px}.m73ParticipationStrip small{font-size:4.5px;line-height:1.15;white-space:normal}.m73ParticipationStrip .yes small{color:#bff4d5}.m73ParticipationStrip .no small{color:#f2aeb7}.m73ParticipationStrip .locked small{color:var(--muted)}
  .m73SubjectTable{display:grid;padding:6px 9px 8px}.m73SubjectHeader,.m73SubjectRow{display:grid;grid-template-columns:minmax(0,1fr) 52px 68px;gap:5px;align-items:center}.m73SubjectHeader{padding:4px 6px;color:var(--muted);font-size:4.9px;font-weight:900;letter-spacing:.06em}.m73SubjectHeader span:nth-child(2),.m73SubjectHeader span:nth-child(3){text-align:center;white-space:nowrap}.m73SubjectRow{min-height:38px;padding:7px 6px;border-top:1px solid rgba(255,255,255,.05)}.m73SubjectRow>strong{min-width:0;color:var(--strong);font-size:7.6px;line-height:1.25;font-weight:800;overflow-wrap:anywhere}.m73SubjectRow>b{height:27px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.06));border-radius:8px;color:var(--accent);background:color-mix(in srgb,var(--accent) 4%,rgba(255,255,255,.012));font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m73SubjectRow>b.kanji{font-size:8px}
  .m73AcademicDetailButton{width:calc(100% - 18px);min-height:33px;display:flex;align-items:center;justify-content:space-between;margin:0 9px 9px;padding:6px 9px;border:1px solid color-mix(in srgb,var(--accent) 28%,rgba(255,255,255,.08));border-radius:10px;color:var(--strong);background:rgba(255,255,255,.018);font-size:5.8px;font-weight:900;letter-spacing:.06em;cursor:pointer}.m73AcademicDetailButton b{color:var(--accent);font-size:12px}
  .m73AcademicLoading{min-height:160px;display:grid;grid-template-columns:34px minmax(0,1fr);gap:11px;align-items:center;padding:15px;border:1px solid color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.06));border-radius:16px;background:rgba(6,6,11,.54)}.m73AcademicLoading>i{width:31px;height:31px;border:2px solid color-mix(in srgb,var(--accent) 17%,transparent);border-top-color:var(--accent);border-radius:50%;animation:academicLoadingSpin .9s linear infinite}.m73AcademicLoading span{color:var(--accent);font-size:5.8px;font-weight:900;letter-spacing:.12em}.m73AcademicLoading strong{display:block;margin-top:3px;color:var(--strong);font-size:10px}.m73AcademicLoading p{margin:4px 0 0;color:var(--muted);font-size:6.5px}.m73MobileEmpty{padding:16px;border:1px dashed color-mix(in srgb,var(--accent) 24%,rgba(255,255,255,.08));border-radius:13px;color:var(--muted);background:rgba(255,255,255,.012);font-size:7.5px;line-height:1.45;text-align:center}

  /* V73 DEVOTED STUDENT — restrained scale and cleaner hierarchy. */
  .m73DevotedCard{overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 30%,rgba(255,255,255,.08));border-radius:17px;background:linear-gradient(145deg,rgba(15,12,18,.78),rgba(5,5,10,.80));box-shadow:0 12px 30px rgba(0,0,0,.25);backdrop-filter:blur(11px)}
  .m73DevotedHead{display:grid;grid-template-columns:36px minmax(0,1fr) 54px;gap:8px;align-items:center;padding:10px;border-bottom:1px solid rgba(255,255,255,.055)}.m73DevotedSeal{width:36px;height:36px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.08));border-radius:11px;color:var(--accent);font-size:18px;font-weight:900}.m73DevotedIdentity{display:grid;gap:2px;min-width:0}.m73DevotedIdentity span{color:var(--accent);font-size:5.4px;font-weight:900;letter-spacing:.11em}.m73DevotedIdentity strong{color:var(--strong);font-family:"Cinzel","League Spartan",serif;font-size:10px;font-weight:700}.m73DevotedScore{display:grid;justify-items:center;gap:2px;padding:6px 4px;border-left:1px solid rgba(255,255,255,.06)}.m73DevotedScore span{color:var(--muted);font-size:4.8px;letter-spacing:.08em}.m73DevotedScore strong{color:var(--accent);font-size:13px;line-height:1;font-weight:900}
  .m73DevotedDetails{display:grid;margin:0;padding:0 10px}.m73DevotedDetails>div{display:grid;grid-template-columns:58px minmax(0,1fr);gap:8px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05)}.m73DevotedDetails dt{color:var(--muted);font-size:5.3px;font-weight:900;letter-spacing:.08em}.m73DevotedDetails dd{margin:0;color:var(--strong);font-size:8px;line-height:1.35;overflow-wrap:anywhere}.m73DevotedAction{padding:9px 10px 10px}.m73DevotedAction button{width:100%;min-height:33px;border:1px solid color-mix(in srgb,var(--accent) 32%,rgba(255,255,255,.08));border-radius:10px;color:var(--strong);background:color-mix(in srgb,var(--accent) 8%,rgba(255,255,255,.015));font-size:5.8px;font-weight:900;letter-spacing:.05em;cursor:pointer}.m73DevotedAction span{display:block;padding:8px;color:var(--muted);font-size:6px;text-align:center}
}

@media (max-width:390px){
  .m73StudentHeaderTitle h2{font-size:25px}.m73ActivityHead,.m73ActivityRow{grid-template-columns:64px minmax(0,1fr) 80px}.m73SubjectHeader,.m73SubjectRow{grid-template-columns:minmax(0,1fr) 48px 64px}.m73ParticipationStrip small{font-size:4.3px}.m73DevotedHead{grid-template-columns:34px minmax(0,1fr) 50px}
}

/* =====================================================================
   V74 — NATIVE MOBILE PREMIUM UI
   Mobile-only visual system. Desktop and document/PDF layouts untouched.
   Text labels mirror the existing desktop interface; only presentation changes.
   ===================================================================== */
@media (max-width:768px){
  /* HOME keeps the same content as desktop; remove mobile-only copy additions. */
  .mobileAppHeader,
  .mobileHeroStats{display:none!important}
  body.front-mode .heroNote{
    width:calc(100% - 8px)!important;
    max-width:360px!important;
    margin:10px auto 0!important;
    font-size:clamp(6.7px,1.8vw,8px)!important;
    line-height:1.2!important;
    letter-spacing:-.01em!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  /* Once a student is open, the desktop/home hero disappears entirely.
     The dedicated mobile header becomes the application header. */
  body:not(.front-mode) .hero{display:none!important}
  body:not(.front-mode) .shell{padding-top:max(10px,env(safe-area-inset-top))!important}

  .mobileStudentHeader{
    position:relative!important;
    isolation:isolate!important;
    overflow:visible!important;
    min-height:154px!important;
    margin:0!important;
    padding:13px!important;
    border:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.10))!important;
    border-radius:24px!important;
    background:rgba(5,5,10,.72)!important;
    box-shadow:
      0 20px 54px rgba(0,0,0,.42),
      0 0 30px color-mix(in srgb,var(--accent) 7%,transparent),
      inset 0 1px 0 rgba(255,255,255,.055)!important;
    backdrop-filter:blur(18px) saturate(1.08)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.08)!important;
  }
  .mobileStudentHeader.hidden{display:none!important}
  .mobileStudentHeaderArt,
  .mobileStudentHeaderShade{border-radius:inherit!important;overflow:hidden!important}
  .mobileStudentHeaderArt{
    inset:0!important;
    opacity:.76!important;
    background-position:center 31%!important;
    filter:saturate(.82) contrast(1.08) brightness(.58)!important;
    transform:scale(1.02)!important;
  }
  .mobileStudentHeaderShade{
    inset:0!important;
    background:
      linear-gradient(180deg,rgba(2,2,7,.36),rgba(3,3,8,.56) 55%,rgba(3,3,8,.86)),
      linear-gradient(90deg,rgba(2,2,6,.60),rgba(2,2,6,.20) 55%,rgba(2,2,6,.46))!important;
  }
  .mobileStudentHeader::after{
    content:''!important;
    position:absolute!important;
    inset:0!important;
    z-index:-1!important;
    border-radius:inherit!important;
    pointer-events:none!important;
    background:
      linear-gradient(115deg,rgba(255,255,255,.055),transparent 27%,transparent 72%,color-mix(in srgb,var(--accent) 8%,transparent)),
      radial-gradient(circle at 18% 0%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 36%)!important;
  }

  .m74HeaderTop{
    position:relative!important;
    z-index:6!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:9px!important;
  }
  .m74HeaderBrand{
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
  }
  .m74HeaderSeal{
    width:38px!important;
    height:38px!important;
    flex:0 0 38px!important;
    display:grid!important;
    place-items:center!important;
    padding:4px!important;
    border:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.10))!important;
    border-radius:12px!important;
    background:rgba(3,3,8,.52)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 20px rgba(0,0,0,.25)!important;
    backdrop-filter:blur(12px)!important;
  }
  .m74HeaderSeal img{width:100%!important;height:100%!important;object-fit:contain!important;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 24%,transparent))!important}
  .m74HeaderTitle{min-width:0!important;display:grid!important;gap:1px!important}
  .m74HeaderTitle>span{
    color:var(--accent)!important;
    font-size:7px!important;
    font-weight:800!important;
    line-height:1!important;
    letter-spacing:.08em!important;
    white-space:nowrap!important;
  }
  .m74HeaderTitle h2{
    margin:0!important;
    color:var(--strong)!important;
    font-family:"Cinzel","League Spartan",serif!important;
    font-size:12px!important;
    font-weight:800!important;
    line-height:1.08!important;
    letter-spacing:.035em!important;
    white-space:nowrap!important;
  }
  .m74HeaderActions{display:flex!important;align-items:center!important;gap:6px!important;flex:0 0 auto!important}
  .m74HeaderHome,
  .m74HeaderGeneralButton{
    height:37px!important;
    border:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.10))!important;
    border-radius:12px!important;
    color:var(--strong)!important;
    background:rgba(4,4,9,.48)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 8px 20px rgba(0,0,0,.22)!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
  }
  .m74HeaderHome{
    width:37px!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    cursor:pointer!important;
  }
  .m74HeaderHome svg{width:16px!important;height:16px!important;fill:none!important;stroke:var(--accent)!important;stroke-width:1.7!important;stroke-linejoin:round!important}
  .m74HeaderGeneral{position:relative!important}
  .m74HeaderGeneralButton{
    min-width:79px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    padding:0 8px 0 10px!important;
    font-size:7px!important;
    font-weight:900!important;
    letter-spacing:.055em!important;
    cursor:pointer!important;
  }
  .m74HeaderChevron{
    width:17px!important;
    height:17px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:50%!important;
    color:#15110c!important;
    background:linear-gradient(135deg,var(--accent),var(--strong))!important;
    font-size:10px!important;
    line-height:1!important;
    transition:transform .2s ease!important;
  }
  .m74HeaderGeneral.open .m74HeaderChevron{transform:rotate(180deg)!important}
  .m74HeaderGeneralPanel{
    position:absolute!important;
    top:43px!important;
    right:0!important;
    z-index:40!important;
    width:min(292px,calc(100vw - 42px))!important;
    padding:7px!important;
    border:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.10))!important;
    border-radius:16px!important;
    background:linear-gradient(145deg,rgba(7,7,12,.985),rgba(15,11,16,.985))!important;
    box-shadow:0 20px 50px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.045)!important;
    backdrop-filter:blur(18px)!important;
  }
  .m74HeaderGeneralPanel button{
    width:100%!important;
    padding:11px 12px!important;
    border:0!important;
    border-radius:11px!important;
    color:var(--text)!important;
    text-align:left!important;
    background:transparent!important;
    cursor:pointer!important;
  }
  .m74HeaderGeneralPanel button+button{margin-top:3px!important;border-top:1px solid rgba(255,255,255,.05)!important}
  .m74HeaderGeneralPanel .generalMenuItemTitle{font-size:8px!important}
  .m74HeaderGeneralPanel .generalMenuItemText{font-size:6.5px!important;line-height:1.3!important}

  .m74HeaderSearch{
    position:relative!important;
    z-index:5!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 88px!important;
    gap:7px!important;
    margin-top:13px!important;
    padding:6px!important;
    border:1px solid color-mix(in srgb,var(--accent) 25%,rgba(255,255,255,.075))!important;
    border-radius:16px!important;
    background:rgba(2,2,7,.48)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 26px rgba(0,0,0,.22)!important;
    backdrop-filter:blur(15px)!important;
  }
  .m74HeaderSearch input{
    width:100%!important;
    min-width:0!important;
    height:40px!important;
    padding:0 12px!important;
    border:1px solid rgba(255,255,255,.055)!important;
    border-radius:11px!important;
    outline:0!important;
    color:var(--strong)!important;
    background:rgba(0,0,0,.34)!important;
    font-size:9px!important;
    font-weight:700!important;
    text-align:left!important;
  }
  .m74HeaderSearch input::placeholder{color:color-mix(in srgb,var(--muted) 82%,transparent)!important}
  .m74HeaderSearch input:focus{border-color:color-mix(in srgb,var(--accent) 72%,var(--strong))!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent)!important}
  .m74HeaderSearch button{
    min-width:0!important;
    height:40px!important;
    padding:0 8px!important;
    border:1px solid rgba(255,255,255,.13)!important;
    border-radius:11px!important;
    color:#14100d!important;
    background:linear-gradient(135deg,var(--accent),var(--strong) 60%,var(--accent2))!important;
    box-shadow:0 8px 20px rgba(0,0,0,.28),0 0 14px color-mix(in srgb,var(--accent) 16%,transparent)!important;
    font-size:7px!important;
    font-weight:900!important;
    letter-spacing:.035em!important;
    cursor:pointer!important;
  }

  /* Keep the profile itself concise: no mobile-only explanatory labels. */
  .mobileSummaryKicker,
  .mobileDirectSectionHeader,
  .mobileDirectFinanceCard small,
  .mobileDirectCardHead>div>span,
  .mobileDirectCardIcon{display:none!important}
  .mobileStudentSummary{margin-top:11px!important;background:linear-gradient(145deg,rgba(14,14,21,.70),rgba(5,5,10,.66))!important;backdrop-filter:blur(15px)!important}
  .mobileStudentDirect{background:transparent!important}
  .mobileDirectMiniCard,
  .mobileDirectFinanceCard,
  .mobileDirectCard{
    background:linear-gradient(145deg,rgba(15,15,23,.60),rgba(5,5,10,.58))!important;
    backdrop-filter:blur(15px)!important;
    -webkit-backdrop-filter:blur(15px)!important;
  }

  /* Falling house ornaments remain visible through mobile glass surfaces. */
  body:not(.front-mode) .backdrop{opacity:1!important;filter:saturate(1.08) brightness(1.08)!important}
  body:not(.front-mode) .mobileStudentSummary,
  body:not(.front-mode) .mobileDirectCard,
  body:not(.front-mode) .mobileRecordSwipe{isolation:isolate!important}

  /* RECORD SWIPE: body owns vertical scrolling; the track only translates. */
  .mobileRecordSwipe{
    margin-top:12px!important;
    overflow:hidden!important;
    border:1px solid color-mix(in srgb,var(--accent) 28%,rgba(255,255,255,.085))!important;
    border-radius:24px!important;
    background:linear-gradient(155deg,rgba(13,13,21,.68),rgba(4,4,9,.64))!important;
    box-shadow:0 22px 56px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.035)!important;
    backdrop-filter:blur(17px) saturate(1.05)!important;
    -webkit-backdrop-filter:blur(17px) saturate(1.05)!important;
  }
  .mobileSwipeCallout{
    display:grid!important;
    grid-template-columns:52px minmax(0,1fr) 52px!important;
    gap:10px!important;
    align-items:center!important;
    padding:11px 12px!important;
    border-bottom:1px solid color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.055))!important;
    background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,rgba(255,255,255,.02)),rgba(255,255,255,.012))!important;
  }
  .mobileSwipeArrow{
    width:52px!important;
    height:52px!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid color-mix(in srgb,var(--accent) 58%,rgba(255,255,255,.12))!important;
    border-radius:16px!important;
    color:#15110c!important;
    background:linear-gradient(135deg,var(--accent),var(--strong) 60%,var(--accent2))!important;
    box-shadow:0 10px 24px rgba(0,0,0,.32),0 0 20px color-mix(in srgb,var(--accent) 22%,transparent)!important;
    cursor:pointer!important;
    animation:m70ArrowPulse 1.8s ease-in-out infinite!important;
  }
  .mobileSwipeArrow span{font-size:35px!important;line-height:1!important;transform:translateY(-1px)!important}
  .mobileSwipeArrow:disabled{opacity:.25!important;animation:none!important;filter:grayscale(.25)!important}
  .mobileSwipeCalloutCopy{text-align:center!important;min-width:0!important}
  .mobileSwipeCalloutCopy strong{
    display:block!important;
    color:var(--strong)!important;
    font-family:"Cinzel","League Spartan",serif!important;
    font-size:13px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
  }
  .mobileSwipeCalloutCopy small{display:block!important;margin-top:4px!important;color:var(--accent)!important;font-size:7px!important;font-weight:900!important}
  .mobileSwipeDirection,.mobileSwipeCalloutEyebrow,.mobileRecordPageLabel{display:none!important}
  .mobileRecordSwipeTrack{
    display:flex!important;
    width:100%!important;
    overflow:visible!important;
    scroll-snap-type:none!important;
    scroll-behavior:auto!important;
    touch-action:pan-y!important;
    will-change:transform!important;
    transition:none!important;
  }
  .mobileRecordSwipeTrack.is-animating{transition:transform .42s cubic-bezier(.22,.72,.24,1)!important}
  .mobileRecordPage{
    flex:0 0 100%!important;
    width:100%!important;
    min-width:100%!important;
    overflow:visible!important;
    scroll-snap-align:none!important;
  }
  .mobileRecordPageScroll{
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    padding:12px!important;
    touch-action:pan-y!important;
    overscroll-behavior:visible!important;
    -webkit-overflow-scrolling:auto!important;
  }
  .mobileSwipeDots{padding:9px 10px 10px!important;border-top:1px solid rgba(255,255,255,.045)!important;background:rgba(255,255,255,.008)!important}
  .mobileSwipeDot{width:6px!important;height:6px!important;background:color-mix(in srgb,var(--muted) 34%,transparent)!important}
  .mobileSwipeDot.is-active{width:24px!important;background:var(--accent)!important;box-shadow:0 0 12px color-mix(in srgb,var(--accent) 34%,transparent)!important}

  /* STUDENT POINT LOG — premium ledger using desktop labels only. */
  .m74PointsApp{display:grid!important;gap:12px!important;min-width:0!important}
  .m74RecordHead{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:7px!important;
    padding:2px 2px 11px!important;
    border-bottom:1px solid color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.055))!important;
  }
  .m74RecordHead>div{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important}
  .m74RecordHead h3{margin:0!important;color:var(--strong)!important;font-family:"Cinzel","League Spartan",serif!important;font-size:14px!important;font-weight:800!important;line-height:1.05!important}
  .m74SemesterBadge{max-width:48%!important;padding:5px 8px!important;border:1px solid color-mix(in srgb,var(--accent) 31%,rgba(255,255,255,.07))!important;border-radius:999px!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 6%,rgba(0,0,0,.22))!important;font-size:6px!important;font-weight:900!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .m74RecordHead p{margin:0!important;color:var(--muted)!important;font-size:7px!important;line-height:1.35!important}
  .m74PointTotals{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    overflow:hidden!important;
    border:1px solid color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.065))!important;
    border-radius:16px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(0,0,0,.18))!important;
  }
  .m74PointTotals>div{min-width:0!important;padding:13px 8px 12px!important;text-align:center!important;position:relative!important}
  .m74PointTotals>div+div{border-left:1px solid rgba(255,255,255,.055)!important}
  .m74PointTotals span{display:block!important;min-height:18px!important;color:var(--muted)!important;font-size:5.7px!important;font-weight:900!important;line-height:1.15!important;text-transform:uppercase!important}
  .m74PointTotals strong{display:block!important;margin-top:6px!important;font-size:18px!important;font-weight:900!important;line-height:1!important;white-space:nowrap!important}
  .m74PointTotals .gp strong{color:var(--gp)!important}.m74PointTotals .rp strong{color:var(--rp)!important}.m74PointTotals .fhp strong{color:var(--fhp)!important}
  .m74PointTotals .gp::after,.m74PointTotals .rp::after,.m74PointTotals .fhp::after{content:''!important;position:absolute!important;left:18%!important;right:18%!important;bottom:0!important;height:2px!important;border-radius:999px!important}
  .m74PointTotals .gp::after{background:var(--gp)!important}.m74PointTotals .rp::after{background:var(--rp)!important}.m74PointTotals .fhp::after{background:var(--fhp)!important}
  .m74PointActivity{overflow:hidden!important;border:1px solid color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.06))!important;border-radius:17px!important;background:rgba(3,3,8,.22)!important}
  .m74PointActivityHead{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:10px 11px!important;border-bottom:1px solid rgba(255,255,255,.05)!important;background:rgba(255,255,255,.012)!important}
  .m74PointActivityHead strong{color:var(--accent)!important;font-size:7px!important;font-weight:900!important;letter-spacing:.07em!important;text-transform:uppercase!important}
  .m74PointActivityHead small{color:var(--muted)!important;font-size:5.7px!important;text-align:right!important}
  .m74PointList{display:grid!important}
  .m74PointRow{display:grid!important;grid-template-columns:78px minmax(0,1fr)!important;gap:10px!important;padding:11px!important;border-bottom:1px solid rgba(255,255,255,.05)!important;position:relative!important}
  .m74PointRow:last-child{border-bottom:0!important}
  .m74PointRow::before{content:''!important;position:absolute!important;left:77px!important;top:11px!important;bottom:11px!important;width:1px!important;background:color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.04))!important}
  .m74PointRow time{padding-right:9px!important;color:var(--muted)!important;font-size:6px!important;line-height:1.35!important}
  .m74PointRowBody{min-width:0!important;padding-left:1px!important}
  .m74PointRowBody p{margin:0!important;color:var(--strong)!important;font-size:8.4px!important;line-height:1.35!important}
  .m74PointChips{display:flex!important;flex-wrap:wrap!important;gap:4px!important;margin-top:7px!important}
  .m74PointChips span{padding:3px 6px!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:999px!important;background:rgba(255,255,255,.018)!important;font-size:6px!important;font-weight:900!important;white-space:nowrap!important}
  .m74PointChips .gp{color:var(--gp)!important}.m74PointChips .rp{color:var(--rp)!important}.m74PointChips .fhp{color:var(--fhp)!important}

  /* ACADEMIC RECORDS — balanced semester sheets, no mobile-only copy. */
  .m74AcademicApp{display:grid!important;gap:12px!important;min-width:0!important}
  .m74AcademicHead{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:9px!important;
    padding:2px 2px 11px!important;
    border-bottom:1px solid color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.055))!important;
  }
  .m74AcademicHead>div:first-child{min-width:0!important}
  .m74AcademicHead h3{margin:0!important;color:var(--strong)!important;font-family:"Cinzel","League Spartan",serif!important;font-size:14px!important;font-weight:800!important}
  .m74AcademicHead p{margin:5px 0 0!important;color:var(--muted)!important;font-size:7px!important;line-height:1.35!important}
  .m74AcademicActions{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important}
  .m74AcademicActions>span{padding:5px 8px!important;border:1px solid color-mix(in srgb,var(--accent) 28%,rgba(255,255,255,.06))!important;border-radius:999px!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 5%,rgba(0,0,0,.18))!important;font-size:6px!important;font-weight:900!important;white-space:nowrap!important}
  .m74AcademicActions button{min-height:31px!important;padding:6px 10px!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:10px!important;color:#14100d!important;background:linear-gradient(135deg,var(--accent),var(--strong) 60%,var(--accent2))!important;font-size:5.8px!important;font-weight:900!important;letter-spacing:.025em!important;white-space:nowrap!important;cursor:pointer!important}
  .m74AcademicList{display:grid!important;gap:12px!important}
  .m74SemesterCard{
    overflow:hidden!important;
    border:1px solid color-mix(in srgb,var(--accent) 22%,rgba(255,255,255,.065))!important;
    border-radius:18px!important;
    background:linear-gradient(150deg,rgba(12,12,19,.52),rgba(4,4,9,.48))!important;
    box-shadow:0 13px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.025)!important;
    backdrop-filter:blur(12px)!important;
  }
  .m74SemesterHead{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:11px 12px!important;border-bottom:1px solid rgba(255,255,255,.05)!important;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 6%,transparent),transparent)!important}
  .m74SemesterTitle{min-width:0!important;color:var(--strong)!important;font-size:12px!important;font-weight:900!important;text-transform:uppercase!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .m74Nensei{flex:0 0 auto!important;padding:5px 8px!important;border:1px solid color-mix(in srgb,var(--accent) 28%,rgba(255,255,255,.06))!important;border-radius:999px!important;color:var(--accent)!important;font-size:6px!important;font-weight:900!important;white-space:nowrap!important}
  .m74MiniTitle{padding:10px 12px 6px!important;color:var(--accent)!important;font-size:6px!important;font-weight:900!important;letter-spacing:.08em!important;text-transform:uppercase!important}
  .m74Participation{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;margin:0 12px 4px!important;border:1px solid rgba(255,255,255,.05)!important;border-radius:12px!important;overflow:hidden!important;background:rgba(0,0,0,.12)!important}
  .m74Participation>div{min-width:0!important;padding:8px 4px!important;text-align:center!important}
  .m74Participation>div+div{border-left:1px solid rgba(255,255,255,.05)!important}
  .m74Participation span{display:block!important;color:var(--strong)!important;font-size:5.2px!important;font-weight:800!important;white-space:nowrap!important}
  .m74Participation strong{display:block!important;margin-top:4px!important;font-size:4.4px!important;font-weight:900!important;line-height:1.15!important;white-space:normal!important}
  .m74Participation .yes strong{color:#bff4d5!important}.m74Participation .no strong{color:#f2aeb7!important}.m74Participation .locked strong{color:var(--muted)!important}
  .m74Subjects{display:grid!important;margin:0 12px 5px!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.05)!important;border-radius:12px!important;background:rgba(0,0,0,.12)!important}
  .m74SubjectHeader,
  .m74SubjectRow{display:grid!important;grid-template-columns:minmax(0,1fr) 64px 76px!important;gap:5px!important;align-items:center!important}
  .m74SubjectHeader{min-height:28px!important;padding:0 8px!important;border-bottom:1px solid rgba(255,255,255,.05)!important;color:var(--muted)!important;font-size:5.1px!important;font-weight:900!important;letter-spacing:.015em!important}
  .m74SubjectHeader span{white-space:nowrap!important}
  .m74SubjectHeader span:nth-child(2),.m74SubjectHeader span:nth-child(3){text-align:center!important}
  .m74SubjectRow{min-height:42px!important;padding:7px 8px!important;border-bottom:1px solid rgba(255,255,255,.045)!important}
  .m74SubjectRow:last-child{border-bottom:0!important}
  .m74SubjectRow>strong{min-width:0!important;color:var(--strong)!important;font-size:7.5px!important;font-weight:800!important;line-height:1.25!important;overflow-wrap:anywhere!important}
  .m74SubjectRow>b{height:28px!important;display:grid!important;place-items:center!important;border-left:1px solid color-mix(in srgb,var(--accent) 16%,rgba(255,255,255,.04))!important;color:var(--accent)!important;font-size:8.5px!important;font-weight:900!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .m74SubjectRow>b.jp{font-size:9px!important}
  .m74SemesterFoot{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 78px!important;gap:7px!important;padding:8px 12px 12px!important}
  .m74SemesterFoot>div{min-width:0!important;padding:7px 8px!important;border:1px solid rgba(255,255,255,.05)!important;border-radius:10px!important;background:rgba(255,255,255,.012)!important}
  .m74SemesterFoot span{display:block!important;color:var(--muted)!important;font-size:5px!important;text-transform:uppercase!important}
  .m74SemesterFoot strong{display:block!important;margin-top:4px!important;color:var(--strong)!important;font-size:7px!important;font-weight:900!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .m74SemesterFoot .promoted{color:#bff4d5!important}.m74SemesterFoot .retained{color:#ffb3bb!important}.m74SemesterFoot .rank1{color:#f4d66f!important}.m74SemesterFoot .rank2{color:#f3b6d1!important}
  .m74SemesterFoot button{min-height:38px!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:10px!important;color:#14100d!important;background:linear-gradient(135deg,var(--accent),var(--strong) 60%,var(--accent2))!important;font-size:5.8px!important;font-weight:900!important;cursor:pointer!important}

  /* DEVOTED STUDENT — same desktop labels, restrained score and proportions. */
  .m74DevotedCard{border-color:color-mix(in srgb,var(--accent) 30%,rgba(255,255,255,.07))!important;background:linear-gradient(150deg,rgba(14,12,18,.54),rgba(4,4,9,.50))!important}
  .m74DevotedDetails{display:grid!important;padding:3px 12px 12px!important}
  .m74DevotedScoreRow,
  .m74DevotedField,
  .m74DevotedFile{display:grid!important;grid-template-columns:118px minmax(0,1fr)!important;gap:10px!important;align-items:center!important;padding:10px 0!important;border-bottom:1px solid rgba(255,255,255,.05)!important}
  .m74DevotedScoreRow span,
  .m74DevotedField span,
  .m74DevotedFile>span{color:var(--muted)!important;font-size:5.8px!important;font-weight:900!important;line-height:1.2!important}
  .m74DevotedScoreRow strong{justify-self:start!important;color:var(--accent)!important;font-size:13px!important;font-weight:900!important;line-height:1!important}
  .m74DevotedField strong{min-width:0!important;color:var(--strong)!important;font-size:8px!important;font-weight:800!important;line-height:1.35!important;overflow-wrap:anywhere!important}
  .m74DevotedFile{border-bottom:0!important;padding-bottom:0!important}
  .m74DevotedFile button{justify-self:stretch!important;min-height:34px!important;border:1px solid color-mix(in srgb,var(--accent) 30%,rgba(255,255,255,.08))!important;border-radius:10px!important;color:var(--strong)!important;background:color-mix(in srgb,var(--accent) 7%,rgba(255,255,255,.012))!important;font-size:6px!important;font-weight:900!important;cursor:pointer!important}
  .m74DevotedFile>strong{color:var(--muted)!important;font-size:6px!important;font-weight:900!important}
  .m74AcademicLoading{min-height:150px!important;display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;gap:11px!important;align-items:center!important;padding:15px!important;border:1px solid rgba(255,255,255,.06)!important;border-radius:16px!important;background:rgba(5,5,10,.34)!important}
  .m74AcademicLoading>i{width:31px!important;height:31px!important;border:2px solid color-mix(in srgb,var(--accent) 17%,transparent)!important;border-top-color:var(--accent)!important;border-radius:50%!important;animation:academicLoadingSpin .9s linear infinite!important}
  .m74AcademicLoading strong{color:var(--strong)!important;font-size:10px!important}.m74AcademicLoading p{margin:4px 0 0!important;color:var(--muted)!important;font-size:6.5px!important}
  .m74MobileEmpty{padding:15px!important;border:1px dashed color-mix(in srgb,var(--accent) 24%,rgba(255,255,255,.07))!important;border-radius:13px!important;color:var(--muted)!important;background:rgba(255,255,255,.01)!important;font-size:7px!important;line-height:1.45!important;text-align:center!important}
}

@media (max-width:390px){
  .m74HeaderTitle h2{font-size:11px!important}
  .m74HeaderActions{gap:5px!important}
  .m74HeaderGeneralButton{min-width:74px!important;padding:0 6px 0 8px!important}
  .m74HeaderSearch{grid-template-columns:minmax(0,1fr) 82px!important}
  .m74SubjectHeader,.m74SubjectRow{grid-template-columns:minmax(0,1fr) 60px 72px!important}
  .m74SubjectHeader{font-size:4.85px!important;padding-left:7px!important;padding-right:7px!important}
  .m74DevotedScoreRow,.m74DevotedField,.m74DevotedFile{grid-template-columns:108px minmax(0,1fr)!important}
}


/* V76 mobile polish */
@media (max-width:768px){
  /* HOME header: lower visual stack to reveal more of the background face and reduce empty lower area. */
  .hero{min-height:334px!important;padding:92px 14px 18px!important}
  .heroFeatureArt,body.front-mode .heroFeatureArt,body.dorm-kosei .heroFeatureArt,body.dorm-tsukiyomi .heroFeatureArt,body.dorm-yamiyo .heroFeatureArt{background-position:center 18%!important;filter:saturate(.95) contrast(1.04) brightness(.74)!important}
  .heroContent{padding-top:14px!important}
  .logo,.front-mode .logo,body:not(.front-mode) .logo{margin:0 auto 7px!important}
  .eyebrow,body:not(.front-mode) .eyebrow{margin:0 auto 5px!important}
  .mainTitle,body:not(.front-mode) .mainTitle{margin:0 auto 12px!important;font-size:29px!important}
  .heroNote{margin:9px 4px 0!important;font-size:7px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

  /* Student header: lighter, more proportional, centered title block and slimmer search control. */
  .mobileStudentHeader{min-height:142px!important;padding:12px!important;border-radius:22px!important;background:rgba(6,6,11,.68)!important;backdrop-filter:blur(16px) saturate(1.05)!important;-webkit-backdrop-filter:blur(16px) saturate(1.05)!important}
  .mobileStudentHeaderArt{background-position:center 24%!important;opacity:.82!important;filter:saturate(.86) contrast(1.06) brightness(.62)!important}
  .mobileStudentHeaderShade{background:linear-gradient(180deg,rgba(2,2,7,.28),rgba(3,3,8,.52) 55%,rgba(3,3,8,.86)),linear-gradient(90deg,rgba(3,3,8,.48),rgba(2,2,6,.14) 58%,rgba(2,2,6,.36))!important}
  .m74HeaderTop{gap:8px!important}
  .m74HeaderBrand{gap:8px!important}
  .m74HeaderSeal{width:34px!important;height:34px!important;flex-basis:34px!important}
  .m74HeaderTitle{display:grid!important;justify-items:center!important;gap:2px!important}
  .m74HeaderTitle>span{font-size:6px!important;letter-spacing:.06em!important;text-align:center!important;opacity:.9!important}
  .m74HeaderTitle h2{font-size:11px!important;letter-spacing:.02em!important;text-align:center!important}
  .m74HeaderHome,.m74HeaderGeneralButton{height:34px!important;border-radius:11px!important}
  .m74HeaderHome{width:34px!important}
  .m74HeaderGeneralButton{min-width:74px!important;padding:0 7px 0 9px!important;font-size:6.4px!important}
  .m74HeaderChevron{width:15px!important;height:15px!important;font-size:9px!important}
  .m74HeaderSearch{grid-template-columns:minmax(0,1fr) 74px!important;gap:6px!important;margin-top:10px!important;padding:5px!important;border-radius:14px!important;background:rgba(9,9,14,.36)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 24px rgba(0,0,0,.18)!important}
  .m74HeaderSearch input{height:35px!important;padding:0 11px!important;border-radius:10px!important;background:rgba(0,0,0,.22)!important;font-size:8px!important}
  .m74HeaderSearch button{height:35px!important;border-radius:10px!important;font-size:6px!important;letter-spacing:.04em!important}
  .m74HeaderNote{position:relative!important;z-index:5!important;margin-top:6px!important;color:rgba(255,255,255,.75)!important;font-size:5.6px!important;line-height:1.1!important;text-align:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-shadow:0 2px 10px rgba(0,0,0,.45)!important}
  .m74HeaderSearch button.is-loading{position:relative!important;color:transparent!important}
  .m74HeaderSearch button.is-loading::after{content:''!important;position:absolute!important;left:50%!important;top:50%!important;width:13px!important;height:13px!important;margin:-6.5px 0 0 -6.5px!important;border:1.8px solid rgba(20,16,13,.28)!important;border-top-color:#17120d!important;border-radius:50%!important;animation:m74SearchSpin .72s linear infinite!important}

  /* Direct data cards: more compact proportions. */
  .mobileDirectEssentials{gap:7px!important}
  .mobileDirectMiniCard{min-height:58px!important;padding:10px 11px!important}
  .mobileDirectLabel{font-size:6px!important;letter-spacing:.09em!important}
  .mobileDirectValue{margin-top:5px!important;font-size:10px!important;line-height:1.22!important}
  .mobileDirectXLink b{width:20px!important;height:20px!important;flex-basis:20px!important;font-size:8px!important}
  .mobileDirectFinanceCard{min-height:70px!important;padding:10px 12px!important;border-radius:16px!important}
  .mobileDirectFinanceCard strong{max-width:52%!important;font-size:18px!important}
  .mobileDirectCard{border-radius:16px!important}
  .mobileDirectCardHead h3{font-size:8.8px!important}

  /* Life after graduation: cleaner single-column composition. */
  .mobileLifePath{grid-template-columns:minmax(0,1fr)!important;gap:9px!important;padding:12px!important;border-radius:16px!important;background:linear-gradient(145deg,rgba(255,255,255,.03),rgba(0,0,0,.14))!important}
  .mobileLifePathSigil{width:auto!important;height:auto!important;justify-self:start!important;padding:6px 10px!important;border-radius:999px!important;font-size:7px!important;line-height:1!important}
  .mobileLifePathCopy strong{font-size:7px!important;letter-spacing:.075em!important}
  .mobileLifePathCopy p{margin:4px 0 0!important;font-size:8.7px!important;line-height:1.52!important}

  /* Student Point Log: more premium detailing without changing wording. */
  .m74RecordHead,.m74AcademicHead{position:relative!important;overflow:hidden!important;border:1px solid color-mix(in srgb,var(--accent) 22%,rgba(255,255,255,.06))!important;border-radius:16px!important;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(0,0,0,.16))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important}
  .m74RecordHead::before,.m74AcademicHead::before{content:''!important;position:absolute!important;inset:0 0 auto 0!important;height:1px!important;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 60%,rgba(255,255,255,.08)),transparent)!important;opacity:.8!important}
  .m74PointTotals{gap:9px!important}
  .m74PointTotals>div{position:relative!important;overflow:hidden!important;border-color:color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.06))!important;background:linear-gradient(155deg,rgba(255,255,255,.03),rgba(0,0,0,.18))!important;box-shadow:0 12px 26px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.04)!important}
  .m74PointTotals>div::after{content:''!important;position:absolute!important;inset:0!important;background:linear-gradient(120deg,rgba(255,255,255,.05),transparent 28%,transparent 72%,color-mix(in srgb,var(--accent) 8%,transparent))!important;pointer-events:none!important}
  .m74PointRow{position:relative!important;border-color:rgba(255,255,255,.045)!important;background:linear-gradient(145deg,rgba(255,255,255,.018),rgba(0,0,0,.06))!important}
  .m74PointRow::before{content:''!important;position:absolute!important;left:10px!important;top:0!important;bottom:0!important;width:1px!important;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 24%,transparent),transparent)!important;opacity:.7!important}
  .m74PointRow time{padding-left:8px!important}
  .m74PointChips span{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important}

  /* Academic: premium but balanced; keep Score in Kanji on one line. */
  .m74AcademicActions button,.m74SemesterFoot button,.m74DevotedFile button{box-shadow:0 8px 22px rgba(0,0,0,.22),0 0 14px color-mix(in srgb,var(--accent) 12%,transparent)!important}
  .m74SemesterCard{position:relative!important;background:linear-gradient(152deg,rgba(14,14,21,.58),rgba(4,4,9,.52))!important;box-shadow:0 15px 34px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.028)!important}
  .m74SemesterCard::before{content:''!important;position:absolute!important;left:0!important;right:0!important;top:0!important;height:2px!important;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 56%,transparent),transparent)!important;opacity:.72!important}
  .m74SubjectHeader,.m74SubjectRow{grid-template-columns:minmax(0,1fr) 58px 72px!important}
  .m74SubjectHeader{font-size:4.7px!important;padding:0 7px!important}
  .m74SubjectRow{min-height:39px!important;padding:7px!important}
  .m74SubjectRow>strong{font-size:7.3px!important;line-height:1.22!important}
  .m74SubjectRow>b{height:26px!important;font-size:8px!important}
  .m74SubjectRow>b.jp{font-size:8.5px!important}
  .m74SemesterFoot{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 74px!important}

  /* Devoted Student: more polished, score restrained. */
  .m74DevotedCard{background:linear-gradient(150deg,rgba(16,12,19,.62),rgba(4,4,9,.54))!important}
  .m74DevotedDetails{gap:0!important}
  .m74DevotedScoreRow,.m74DevotedField,.m74DevotedFile{grid-template-columns:104px minmax(0,1fr)!important;padding:11px 0!important}
  .m74DevotedScoreRow strong{font-size:11px!important;letter-spacing:.04em!important}
  .m74DevotedField strong{font-size:7.6px!important;line-height:1.42!important}

  /* Ornaments remain softly visible through records and direct data. */
  body:not(.front-mode) .mobileDirectCard,
  body:not(.front-mode) .mobileDirectMiniCard,
  body:not(.front-mode) .mobileDirectFinanceCard,
  body:not(.front-mode) .mobileRecordSwipe,
  body:not(.front-mode) .mobileStudentSummary{background-blend-mode:screen,normal!important}
}

@media (max-width:390px){
  .m74HeaderTitle h2{font-size:10.5px!important}
  .m74HeaderSearch{grid-template-columns:minmax(0,1fr) 70px!important}
  .m74HeaderNote{font-size:5.25px!important}
  .m74SubjectHeader,.m74SubjectRow{grid-template-columns:minmax(0,1fr) 56px 68px!important}
  .m74DevotedScoreRow,.m74DevotedField,.m74DevotedFile{grid-template-columns:96px minmax(0,1fr)!important}
}

@keyframes m74SearchSpin{to{transform:rotate(360deg)}}


/* ===== V78 HOTFIX — HOME LOGO + STUDENT HEADER SEARCH BAR ===== */
@media (max-width:768px){
  /* HOME: push the visual stack lower, reveal more of the face artwork, and remove any visible badge feel behind the logo. */
  .hero{
    min-height:344px!important;
    padding:116px 14px 14px!important;
  }
  .heroFeatureArt,
  body.front-mode .heroFeatureArt,
  body.dorm-kosei .heroFeatureArt,
  body.dorm-tsukiyomi .heroFeatureArt,
  body.dorm-yamiyo .heroFeatureArt{
    background-position:center 13%!important;
    filter:saturate(.96) contrast(1.05) brightness(.76)!important;
  }
  .heroContent{
    padding-top:20px!important;
  }
  .heroCore{
    transform:none!important;
  }
  .logo{
    position:relative!important;
    width:128px!important;
    height:128px!important;
    margin:10px auto 7px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:none!important;
    box-shadow:none!important;
    overflow:visible!important;
    isolation:isolate!important;
  }
  .logo::before,
  .logo::after{
    display:none!important;
    content:none!important;
  }
  .logo img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    background:transparent!important;
    mix-blend-mode:screen!important;
    filter:
      drop-shadow(0 0 8px color-mix(in srgb,var(--strong) 34%,transparent))
      drop-shadow(0 0 20px color-mix(in srgb,var(--accent) 32%,transparent))
      drop-shadow(0 0 34px color-mix(in srgb,var(--glow) 76%,transparent))!important;
  }
  .eyebrow,body:not(.front-mode) .eyebrow{
    margin:0 auto 4px!important;
  }
  .mainTitle,body:not(.front-mode) .mainTitle{
    margin:0 auto 10px!important;
  }

  /* STUDENT HEADER: slimmer, glassier, and more proportional search bar. */
  .mobileStudentHeader{
    min-height:132px!important;
    padding:12px 12px 10px!important;
  }
  .m74HeaderTop{
    min-height:34px!important;
    align-items:center!important;
  }
  .m74HeaderBrand{
    min-width:0!important;
    align-items:center!important;
  }
  .m74HeaderTitle{
    min-width:0!important;
    justify-items:start!important;
    align-content:center!important;
    gap:1px!important;
  }
  .m74HeaderTitle>span,
  .m74HeaderTitle h2{
    text-align:left!important;
  }
  .m74HeaderSearch{
    max-width:320px!important;
    grid-template-columns:minmax(0,1fr) 78px!important;
    gap:6px!important;
    margin:8px auto 0!important;
    padding:4px!important;
    border-radius:13px!important;
    border:1px solid color-mix(in srgb,var(--accent) 24%,rgba(255,255,255,.08))!important;
    background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018))!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      0 10px 22px rgba(0,0,0,.18)!important;
    backdrop-filter:blur(18px) saturate(1.06)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.06)!important;
  }
  .m74HeaderSearch input{
    height:32px!important;
    padding:0 10px!important;
    border-radius:9px!important;
    border:1px solid rgba(255,255,255,.06)!important;
    background:rgba(255,255,255,.045)!important;
    font-size:7.2px!important;
    font-weight:700!important;
    letter-spacing:.01em!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
  }
  .m74HeaderSearch button{
    height:32px!important;
    min-width:0!important;
    padding:0 8px!important;
    border-radius:9px!important;
    font-size:5.7px!important;
    font-weight:900!important;
    letter-spacing:.05em!important;
    box-shadow:
      0 7px 18px rgba(0,0,0,.22),
      0 0 12px color-mix(in srgb,var(--accent) 15%,transparent)!important;
  }
  .m74HeaderNote{
    margin-top:5px!important;
    font-size:5px!important;
  }

  /* STUDENT DATA CARDS: tighten vertical rhythm so the values no longer feel tiny inside oversized boxes. */
  .mobileDirectEssentials{
    gap:7px!important;
  }
  .mobileDirectMiniCard{
    min-height:52px!important;
    padding:9px 10px!important;
    border-radius:15px!important;
  }
  .mobileDirectValue{
    margin-top:4px!important;
    font-size:9.5px!important;
    line-height:1.18!important;
  }
  .mobileDirectFinanceCard{
    min-height:60px!important;
    padding:9px 11px!important;
    border-radius:15px!important;
  }
  .mobileDirectFinanceCard strong{
    max-width:48%!important;
    font-size:16px!important;
  }
}

@media (max-width:390px){
  .hero{padding-top:110px!important}
  .logo{width:118px!important;height:118px!important}
  .m74HeaderSearch{max-width:100%!important;grid-template-columns:minmax(0,1fr) 72px!important}
  .m74HeaderSearch input{font-size:7px!important}
  .m74HeaderSearch button{font-size:5.3px!important}
  .mobileDirectMiniCard{min-height:50px!important}
  .mobileDirectFinanceCard{min-height:58px!important}
}


/* =====================================================================
   V82 — SURGICAL MOBILE FIX ONLY
   Scope intentionally limited to:
   1) HOME hero logo/vertical placement
   2) Student-header search bar
   3) Compact direct-data cards
   4) Mobile footer visibility
   Academic Records, Student Point Log, Devoted Student, PDF/PNG and
   desktop layout are intentionally untouched.
   ===================================================================== */
@media (max-width:768px){
  /* HOME: logo has absolutely no plate/shape; only the image and glow. */
  body.front-mode .hero{
    min-height:348px!important;
    padding:128px 14px 14px!important;
  }
  body.front-mode .heroFeatureArt{
    background-position:center 10%!important;
  }
  body.front-mode .heroContent{
    padding-top:18px!important;
  }
  body.front-mode .logo{
    position:relative!important;
    width:122px!important;
    height:122px!important;
    margin:12px auto 6px!important;
    padding:0!important;
    border:0!important;
    outline:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  body.front-mode .logo::before,
  body.front-mode .logo::after{
    content:none!important;
    display:none!important;
  }
  body.front-mode .logo img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    background:transparent!important;
    box-shadow:none!important;
    border:0!important;
    border-radius:0!important;
    mix-blend-mode:screen!important;
    filter:
      drop-shadow(0 0 8px color-mix(in srgb,var(--strong) 26%,transparent))
      drop-shadow(0 0 18px color-mix(in srgb,var(--accent) 36%,transparent))
      drop-shadow(0 0 30px var(--glow))!important;
  }
  body.front-mode .eyebrow{margin:0 auto 4px!important}
  body.front-mode .mainTitle{margin:0 auto 10px!important}

  /* Student header: make the search control truly compact and glassy. */
  .mobileStudentHeader{
    min-height:124px!important;
    padding:10px 11px!important;
  }
  .m74HeaderTop{
    min-height:34px!important;
    align-items:center!important;
  }
  .m74HeaderTitle{
    justify-items:start!important;
    text-align:left!important;
  }
  .m74HeaderTitle>span,
  .m74HeaderTitle h2{
    text-align:left!important;
  }
  .m74HeaderSearch{
    width:min(214px,62vw)!important;
    max-width:214px!important;
    grid-template-columns:minmax(0,1fr) 58px!important;
    gap:4px!important;
    margin:7px auto 0!important;
    padding:3px!important;
    border:1px solid color-mix(in srgb,var(--accent) 22%,rgba(255,255,255,.08))!important;
    border-radius:11px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 18px rgba(0,0,0,.16)!important;
    backdrop-filter:blur(18px) saturate(1.08)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.08)!important;
  }
  .m74HeaderSearch input{
    height:25px!important;
    min-height:25px!important;
    padding:0 8px!important;
    border-radius:8px!important;
    border:1px solid rgba(255,255,255,.055)!important;
    background:rgba(255,255,255,.038)!important;
    font-size:6.6px!important;
    line-height:25px!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
  }
  .m74HeaderSearch button{
    height:25px!important;
    min-height:25px!important;
    padding:0 5px!important;
    border-radius:8px!important;
    font-size:4.9px!important;
    letter-spacing:.035em!important;
    box-shadow:0 6px 14px rgba(0,0,0,.20),0 0 10px color-mix(in srgb,var(--accent) 12%,transparent)!important;
  }

  /* Compact cards only — no record/swipe/academic selectors here. */
  .mobileDirectMiniCard{
    min-height:44px!important;
    padding:8px 9px!important;
    border-radius:14px!important;
  }
  .mobileDirectLabel{
    font-size:5.6px!important;
  }
  .mobileDirectValue{
    margin-top:3px!important;
    font-size:9px!important;
    line-height:1.15!important;
  }
  .mobileDirectFinanceCard{
    min-height:48px!important;
    padding:8px 10px!important;
    border-radius:14px!important;
  }
  .mobileDirectFinanceCard strong{
    max-width:48%!important;
    font-size:15px!important;
  }

  /* Restore footer on mobile, regardless of older experimental rules. */
  .footer{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:relative!important;
    z-index:4!important;
    margin-top:18px!important;
    padding:14px 10px 18px!important;
    border-top:1px solid color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.06))!important;
    color:var(--muted)!important;
    text-align:center!important;
    font-size:7px!important;
    letter-spacing:.08em!important;
  }
  .footerBrand{
    color:var(--strong)!important;
    text-shadow:0 0 10px var(--glow)!important;
  }
}

@media (max-width:390px){
  body.front-mode .hero{padding-top:124px!important}
  body.front-mode .logo{width:116px!important;height:116px!important}
  .m74HeaderSearch{width:min(206px,60vw)!important;max-width:206px!important;grid-template-columns:minmax(0,1fr) 56px!important}
  .m74HeaderSearch input{font-size:6.4px!important}
  .m74HeaderSearch button{font-size:4.7px!important}
}


/* =====================================================================
   V83 — CONNECTED PREMIUM MOBILE POLISH
   Only requested mobile areas are adjusted. Desktop and document/PDF
   rules remain untouched.
   ===================================================================== */
@media (max-width:768px){
  /* 1 — slightly smaller HOME search control. */
  body.front-mode .hero .searchBar{
    width:min(326px,86vw)!important;
    max-width:326px!important;
    grid-template-columns:minmax(0,1fr) 44px!important;
    gap:7px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body.front-mode .hero .searchBar input{
    height:43px!important;
    min-height:43px!important;
    padding:0 13px!important;
    border-radius:14px!important;
    font-size:12.5px!important;
  }
  body.front-mode .hero .searchBar button{
    width:44px!important;
    min-width:44px!important;
    height:43px!important;
    min-height:43px!important;
    border-radius:14px!important;
  }
  body.front-mode .hero .mobileSearchIcon,
  body.front-mode .hero .mobileSearchIcon svg{
    width:18px!important;
    height:18px!important;
  }

  /* 2 — vertically center student-header content and lower the search bar. */
  body:not(.front-mode) .mobileStudentHeader{
    min-height:138px!important;
    display:grid!important;
    grid-template-rows:auto auto!important;
    align-content:center!important;
    row-gap:0!important;
    margin-top:10px!important;
    margin-bottom:0!important;
    padding:14px 12px 13px!important;
    border-radius:24px 24px 0 0!important;
    border-bottom-color:color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.055))!important;
    background:linear-gradient(155deg,rgba(14,14,22,.84),rgba(5,5,10,.82))!important;
    box-shadow:0 20px 48px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.045)!important;
  }
  body:not(.front-mode) .mobileStudentHeader .m74HeaderTop{
    min-height:38px!important;
    align-items:center!important;
  }
  body:not(.front-mode) .mobileStudentHeader .m74HeaderBrand,
  body:not(.front-mode) .mobileStudentHeader .m74HeaderActions{
    align-items:center!important;
  }
  body:not(.front-mode) .mobileStudentHeader .m74HeaderTitle{
    align-content:center!important;
  }
  body:not(.front-mode) .mobileStudentHeader .m74HeaderSearch{
    width:min(224px,64vw)!important;
    max-width:224px!important;
    margin:13px auto 0!important;
    grid-template-columns:minmax(0,1fr) 60px!important;
    gap:4px!important;
    padding:3px!important;
    border-radius:11px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.016))!important;
    border-color:color-mix(in srgb,var(--accent) 21%,rgba(255,255,255,.07))!important;
    backdrop-filter:blur(20px) saturate(1.08)!important;
    -webkit-backdrop-filter:blur(20px) saturate(1.08)!important;
  }
  body:not(.front-mode) .mobileStudentHeader .m74HeaderSearch input,
  body:not(.front-mode) .mobileStudentHeader .m74HeaderSearch button{
    height:27px!important;
    min-height:27px!important;
    border-radius:8px!important;
  }
  body:not(.front-mode) .mobileStudentHeader .m74HeaderSearch input{
    padding:0 8px!important;
    font-size:6.6px!important;
  }
  body:not(.front-mode) .mobileStudentHeader .m74HeaderSearch button{
    padding:0 5px!important;
    font-size:4.9px!important;
  }

  /* 4 + 5 — one-line name and connected hierarchy below the header. */
  body:not(.front-mode) .mobileStudentSummary{
    margin-top:-1px!important;
    margin-bottom:0!important;
    padding:12px!important;
    border-radius:0!important;
    border-top-color:rgba(255,255,255,.045)!important;
    border-bottom-color:rgba(255,255,255,.045)!important;
    background:linear-gradient(155deg,rgba(12,12,19,.80),rgba(5,5,10,.78))!important;
    box-shadow:none!important;
    backdrop-filter:blur(17px) saturate(1.04)!important;
    -webkit-backdrop-filter:blur(17px) saturate(1.04)!important;
  }
  body:not(.front-mode) .mobileStudentSummaryTop{
    grid-template-columns:78px minmax(0,1fr) 48px!important;
    gap:9px!important;
  }
  body:not(.front-mode) .mobileSummaryPortrait{
    width:78px!important;
    height:78px!important;
    min-width:78px!important;
    min-height:78px!important;
    border-radius:16px!important;
  }
  body:not(.front-mode) .mobileSummaryName{
    max-width:100%!important;
    margin-top:3px!important;
    font-size:11.2px!important;
    line-height:1!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body:not(.front-mode) .mobileSummaryKanji{
    margin-top:4px!important;
    font-size:9.2px!important;
  }
  body:not(.front-mode) .mobileSummaryHouseLogo{
    width:42px!important;
    height:42px!important;
  }
  body:not(.front-mode) .mobileSummaryHouseName{
    font-size:5.4px!important;
  }
  body:not(.front-mode) .mobileSummaryFacts{
    gap:5px!important;
    margin-top:9px!important;
  }
  body:not(.front-mode) .mobileSummaryFact{
    min-height:39px!important;
    display:grid!important;
    align-content:center!important;
    padding:6px 6px!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.018)!important;
  }
  body:not(.front-mode) .mobileSummaryFact span{font-size:5.2px!important}
  body:not(.front-mode) .mobileSummaryFact strong{margin-top:2px!important;font-size:8px!important}

  body:not(.front-mode) .mobileStudentDirect{
    margin-top:-1px!important;
    margin-bottom:0!important;
    gap:8px!important;
    padding:11px 12px 12px!important;
    border:1px solid color-mix(in srgb,var(--accent) 27%,rgba(255,255,255,.075))!important;
    border-top-color:rgba(255,255,255,.045)!important;
    border-bottom-color:rgba(255,255,255,.045)!important;
    border-radius:0!important;
    background:linear-gradient(155deg,rgba(11,11,18,.78),rgba(4,4,9,.76))!important;
    box-shadow:none!important;
    backdrop-filter:blur(17px) saturate(1.04)!important;
    -webkit-backdrop-filter:blur(17px) saturate(1.04)!important;
  }
  body:not(.front-mode) .mobileDirectEssentials{gap:6px!important}
  body:not(.front-mode) .mobileDirectMiniCard{
    min-height:40px!important;
    padding:7px 8px!important;
    border-radius:11px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(0,0,0,.10))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  }
  body:not(.front-mode) .mobileDirectLabel{font-size:5.2px!important}
  body:not(.front-mode) .mobileDirectValue{margin-top:2px!important;font-size:8.5px!important}
  body:not(.front-mode) .mobileDirectXLink b{
    width:18px!important;height:18px!important;flex-basis:18px!important;font-size:7px!important
  }
  body:not(.front-mode) .mobileDirectFinanceCard{
    min-height:44px!important;
    padding:7px 9px!important;
    border-radius:11px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(0,0,0,.10))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  }
  body:not(.front-mode) .mobileDirectFinanceCard strong{font-size:14px!important}
  body:not(.front-mode) .mobileDirectCard{
    padding:10px!important;
    border-radius:13px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.023),rgba(0,0,0,.095))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  }
  body:not(.front-mode) .mobileDirectCardHead{margin-bottom:7px!important}
  body:not(.front-mode) .mobileDirectCardHead h3{font-size:8.5px!important}
  body:not(.front-mode) .mobileDirectJourney .occupation,
  body:not(.front-mode) .mobileDirectJourney .mobileLifePath{
    min-height:0!important;
    padding:8px!important;
    border-radius:10px!important;
  }

  body:not(.front-mode) .mobileRecordSwipe{
    margin-top:-1px!important;
    border-radius:0 0 24px 24px!important;
    border-top-color:rgba(255,255,255,.045)!important;
    box-shadow:0 22px 48px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.025)!important;
  }

  /* 3 — give record titles balanced inset and preserve one-line titles. */
  body:not(.front-mode) .mobileRecordPageScroll{
    padding:14px 14px 16px!important;
  }
  body:not(.front-mode) .m74RecordHead,
  body:not(.front-mode) .m74AcademicHead{
    padding:9px 11px 12px!important;
    border-radius:13px!important;
  }
  body:not(.front-mode) .m74RecordHead h3,
  body:not(.front-mode) .m74AcademicHead h3{
    max-width:100%!important;
    font-size:12px!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body:not(.front-mode) .m74RecordHead p,
  body:not(.front-mode) .m74AcademicHead p{
    padding-left:0!important;
    padding-right:0!important;
  }

  /* Premium visual continuity between all student sections. */
  body:not(.front-mode) .mobileStudentHeader,
  body:not(.front-mode) .mobileStudentSummary,
  body:not(.front-mode) .mobileStudentDirect,
  body:not(.front-mode) .mobileRecordSwipe{
    position:relative!important;
    isolation:isolate!important;
  }
  body:not(.front-mode) .mobileStudentSummary::before,
  body:not(.front-mode) .mobileStudentDirect::before,
  body:not(.front-mode) .mobileRecordSwipe::before{
    content:''!important;
    position:absolute!important;
    left:12px!important;
    right:12px!important;
    top:0!important;
    height:1px!important;
    background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 24%,rgba(255,255,255,.04)),transparent)!important;
    pointer-events:none!important;
    opacity:.72!important;
  }
}

@media (max-width:390px){
  body.front-mode .hero .searchBar{width:min(306px,84vw)!important;max-width:306px!important}
  body:not(.front-mode) .mobileStudentHeader .m74HeaderSearch{width:min(216px,62vw)!important;max-width:216px!important}
  body:not(.front-mode) .mobileSummaryName{font-size:10.6px!important}
  body:not(.front-mode) .mobileStudentSummaryTop{grid-template-columns:74px minmax(0,1fr) 44px!important}
  body:not(.front-mode) .mobileSummaryPortrait{width:74px!important;height:74px!important;min-width:74px!important;min-height:74px!important}
  body:not(.front-mode) .mobileRecordPageScroll{padding:13px 12px 15px!important}
  body:not(.front-mode) .m74RecordHead,
  body:not(.front-mode) .m74AcademicHead{padding-left:10px!important;padding-right:10px!important}
}

/* =====================================================================
   V85 — REFINED MOBILE DOSSIER
   A single outer dossier surface with an inset glowing masthead.
   Desktop rules and document/PDF geometry above are untouched.
   ===================================================================== */
.mobileStudentDossier{display:none}

@media (max-width:768px){
  body:not(.front-mode) .mobileStudentDossier{
    position:relative!important;
    isolation:isolate!important;
    display:block!important;
    width:100%!important;
    margin:10px 0 0!important;
    overflow:hidden!important;
    border:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.07))!important;
    border-radius:24px!important;
    background:
      radial-gradient(circle at 88% 0,color-mix(in srgb,var(--accent) 10%,transparent),transparent 31%),
      linear-gradient(180deg,rgba(10,10,17,.88),rgba(5,5,10,.91))!important;
    box-shadow:
      0 24px 58px rgba(0,0,0,.38),
      0 0 34px color-mix(in srgb,var(--accent) 8%,transparent),
      inset 0 1px 0 rgba(255,255,255,.035)!important;
  }
  body:not(.front-mode) .mobileStudentDossier::before{
    content:''!important;
    position:absolute!important;
    inset:5px!important;
    z-index:-1!important;
    border:1px solid color-mix(in srgb,var(--accent) 10%,transparent)!important;
    border-radius:19px!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier::after{
    content:''!important;
    position:absolute!important;
    left:13px!important;
    top:154px!important;
    bottom:18px!important;
    width:1px!important;
    z-index:0!important;
    background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 48%,transparent),color-mix(in srgb,var(--accent) 12%,transparent),transparent)!important;
    box-shadow:0 0 8px color-mix(in srgb,var(--accent) 26%,transparent)!important;
    pointer-events:none!important;
  }

  /* Inset masthead: visually premium but clearly part of the dossier. */
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader{
    position:relative!important;
    z-index:2!important;
    width:auto!important;
    min-height:124px!important;
    margin:8px 8px 0!important;
    padding:12px 12px 10px!important;
    overflow:visible!important;
    border:1px solid color-mix(in srgb,var(--accent) 54%,rgba(255,255,255,.12))!important;
    border-radius:18px!important;
    background-color:rgba(5,5,11,.60)!important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.025),
      0 0 18px color-mix(in srgb,var(--accent) 23%,transparent),
      0 12px 28px rgba(0,0,0,.26),
      inset 0 1px 0 rgba(255,255,255,.07),
      inset 0 0 28px color-mix(in srgb,var(--accent) 7%,transparent)!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader::after{
    content:''!important;
    position:absolute!important;
    inset:4px!important;
    z-index:4!important;
    border:1px solid color-mix(in srgb,var(--accent) 15%,rgba(255,255,255,.035))!important;
    border-radius:14px!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTop,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSearch{
    position:relative!important;
    z-index:5!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTop{
    min-height:34px!important;
    align-items:center!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSearch{
    width:min(214px,62vw)!important;
    max-width:214px!important;
    margin:10px auto 0!important;
  }

  /* One continuous reading surface below the masthead. */
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentSummary,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentDirect,
  body:not(.front-mode) .mobileStudentDossier>.mobileRecordSwipe{
    position:relative!important;
    z-index:1!important;
    width:auto!important;
    margin:0 8px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentSummary{
    padding:13px 10px 9px 13px!important;
    border-bottom:1px solid color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.04))!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentDirect{
    padding:9px 10px 10px 13px!important;
    gap:6px!important;
    border-bottom:1px solid color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.04))!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileRecordSwipe{
    margin-bottom:8px!important;
    padding:0 0 4px 3px!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentSummary::before,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentDirect::before,
  body:not(.front-mode) .mobileStudentDossier>.mobileRecordSwipe::before,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentSummary::after,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentDirect::after{
    display:none!important;
    content:none!important;
  }

  /* Compact identity and premium photo frame. */
  body:not(.front-mode) .mobileStudentDossier .mobileStudentSummaryTop{
    grid-template-columns:70px minmax(0,1fr) 42px!important;
    gap:8px!important;
    align-items:center!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryPortrait{
    position:relative!important;
    width:70px!important;
    height:70px!important;
    min-width:70px!important;
    min-height:70px!important;
    padding:3px!important;
    overflow:hidden!important;
    border:1px solid color-mix(in srgb,var(--accent) 72%,rgba(255,255,255,.16))!important;
    border-radius:15px!important;
    background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 16%,#08080d),rgba(2,2,6,.96))!important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.045),
      0 0 18px color-mix(in srgb,var(--accent) 32%,transparent),
      0 10px 22px rgba(0,0,0,.32),
      inset 0 0 14px color-mix(in srgb,var(--accent) 10%,transparent)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryPortrait::after{
    content:''!important;
    position:absolute!important;
    inset:3px!important;
    z-index:2!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:11px!important;
    pointer-events:none!important;
    box-shadow:inset 0 0 12px rgba(0,0,0,.28)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryPortrait img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:50% 16%!important;
    border-radius:11px!important;
    transform:scale(1.10)!important;
    transform-origin:50% 16%!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryName{
    font-size:10.4px!important;
    line-height:1!important;
    letter-spacing:-.012em!important;
    white-space:nowrap!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryBadges{
    gap:3px!important;
    margin-top:5px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryStatus,
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryRank{
    min-height:17px!important;
    padding:3px 5px!important;
    font-size:4.7px!important;
    line-height:1!important;
    letter-spacing:.035em!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryHouseLogo{width:37px!important;height:37px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryHouseName{font-size:4.8px!important;margin-top:2px!important}

  /* Only Current Grade and Gakusei ID remain beneath the profile. */
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFacts{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;
    margin-top:8px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact{
    min-height:32px!important;
    padding:5px 7px!important;
    border-radius:8px!important;
    border:1px solid color-mix(in srgb,var(--accent) 14%,rgba(255,255,255,.045))!important;
    background:linear-gradient(145deg,rgba(255,255,255,.018),rgba(0,0,0,.055))!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact span{font-size:4.6px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact strong{margin-top:2px!important;font-size:7.4px!important}

  /* Compact direct data. */
  body:not(.front-mode) .mobileStudentDossier .mobileDirectSectionHeader{
    min-height:28px!important;
    padding:1px 1px 5px!important;
    margin:0!important;
    border:0!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileDirectSectionHeader span{font-size:4.6px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileDirectSectionHeader h3{margin-top:2px!important;font-size:7.8px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileDirectSectionMark{padding:3px 6px!important;font-size:4.5px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileDirectEssentials{gap:5px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard{
    min-height:34px!important;
    padding:5px 7px!important;
    border-radius:8px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileDirectFinanceCard{
    min-height:37px!important;
    padding:5px 8px!important;
    border-radius:8px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileDirectFinanceCard small{display:none!important}
  body:not(.front-mode) .mobileStudentDossier .mobileDirectFinanceCard strong{font-size:12.4px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileDirectCard{
    padding:8px!important;
    border-radius:10px!important;
    border-color:color-mix(in srgb,var(--accent) 16%,rgba(255,255,255,.045))!important;
    background:linear-gradient(145deg,rgba(255,255,255,.018),rgba(0,0,0,.065))!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileDirectCardHead{margin-bottom:5px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileDirectCardHead h3{font-size:7.8px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileDirectCardIcon{width:20px!important;height:20px!important;font-size:7px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMediaPreview{min-height:138px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileOccupationItem{padding:6px!important;border-radius:8px!important}

  /* LIFE AFTER GRADUATION uses the exact desktop artwork, not header/House art. */
  body:not(.front-mode) .mobileStudentDossier #mobileDirectJourneyCard.is-graduated,
  body:not(.front-mode) .mobileStudentDossier .mobileStudentDirect.is-graduated #mobileDirectJourneyCard{
    position:relative!important;
    overflow:hidden!important;
  }
  body:not(.front-mode) .mobileStudentDossier #mobileDirectJourneyCard .mobileDirectCardIcon.is-residence{
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:var(--accent)!important;
    filter:drop-shadow(0 0 7px color-mix(in srgb,var(--accent) 42%,transparent))!important;
  }
  body:not(.front-mode) .mobileStudentDossier #mobileDirectJourneyCard .mobileDirectCardIcon.is-residence svg{
    width:15px!important;
    height:15px!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.7!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileLifePath{
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    display:block!important;
    min-height:78px!important;
    padding:10px 11px!important;
    border:1px solid color-mix(in srgb,var(--accent) 25%,rgba(255,255,255,.06))!important;
    border-radius:10px!important;
    background-image:
      linear-gradient(90deg,rgba(4,4,7,.95) 0%,rgba(4,4,7,.87) 42%,rgba(4,4,7,.58) 72%,rgba(4,4,7,.24) 100%),
      linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent 58%),
      url("https://drive.google.com/thumbnail?id=1hbt9ake1iC7p6C9iOGpX8A16HpfBGHfN&sz=w1600")!important;
    background-size:cover,cover,cover!important;
    background-position:center,center,right 36%!important;
    background-repeat:no-repeat!important;
    box-shadow:inset 2px 0 0 var(--accent),inset 0 0 24px rgba(0,0,0,.26)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileLifePath::before,
  body:not(.front-mode) .mobileStudentDossier .mobileLifePath::after,
  body:not(.front-mode) .mobileStudentDossier .mobileLifePathSigil,
  body:not(.front-mode) .mobileStudentDossier .mobileLifePathHomeIcon{
    display:none!important;
    content:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileLifePathCopy{position:relative!important;z-index:1!important}
  body:not(.front-mode) .mobileStudentDossier .mobileLifePathCopy strong{font-size:6.5px!important;letter-spacing:.065em!important}
  body:not(.front-mode) .mobileStudentDossier .mobileLifePathCopy p{margin:6px 0 0!important;font-size:7.8px!important;line-height:1.47!important}

  /* Devoted Student uses the exact desktop ceremonial artwork. */
  body:not(.front-mode) .mobileStudentDossier .m74DevotedCard{
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    border-color:color-mix(in srgb,var(--accent) 36%,rgba(255,255,255,.07))!important;
    background-image:
      linear-gradient(100deg,rgba(6,5,8,.96) 0%,rgba(6,5,8,.88) 47%,rgba(6,5,8,.58) 75%,rgba(6,5,8,.24) 100%),
      linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent 56%),
      url("https://drive.google.com/thumbnail?id=1K-2TytITfiC3OysGOO_1L5yn4iRGiAsT&sz=w1600")!important;
    background-size:cover,cover,cover!important;
    background-position:center,center,right center!important;
    background-repeat:no-repeat!important;
    box-shadow:inset 2px 0 0 var(--accent),0 12px 28px rgba(0,0,0,.22),0 0 18px color-mix(in srgb,var(--accent) 8%,transparent)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74DevotedCard::before{
    content:''!important;
    position:absolute!important;
    inset:5px!important;
    z-index:0!important;
    border:1px solid color-mix(in srgb,var(--accent) 11%,transparent)!important;
    border-radius:10px!important;
    background:none!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74DevotedCard::after{display:none!important;content:none!important}
  body:not(.front-mode) .mobileStudentDossier .m74DevotedCard .m74SemesterHead,
  body:not(.front-mode) .mobileStudentDossier .m74DevotedCard .m74DevotedDetails{position:relative!important;z-index:1!important}
  body:not(.front-mode) .mobileStudentDossier .m74DevotedDetails{padding:2px 9px 9px!important}
  body:not(.front-mode) .mobileStudentDossier .m74DevotedScoreRow,
  body:not(.front-mode) .mobileStudentDossier .m74DevotedField,
  body:not(.front-mode) .mobileStudentDossier .m74DevotedFile{grid-template-columns:92px minmax(0,1fr)!important;padding:7px 0!important}

  /* The connected record deck starts on Student Point Log for active students. */
  body:not(.front-mode) .mobileStudentDossier .mobileSwipeCallout{margin:8px 9px 0!important}
  body:not(.front-mode) .mobileStudentDossier .mobileRecordPageScroll{padding:10px 9px 12px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileSwipeDots{padding-bottom:8px!important}
}

@media (max-width:390px){
  body:not(.front-mode) .mobileStudentDossier .mobileStudentSummaryTop{grid-template-columns:66px minmax(0,1fr) 39px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryPortrait{width:66px!important;height:66px!important;min-width:66px!important;min-height:66px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryName{font-size:9.8px!important}
  body:not(.front-mode) .mobileStudentDossier .m74DevotedScoreRow,
  body:not(.front-mode) .mobileStudentDossier .m74DevotedField,
  body:not(.front-mode) .mobileStudentDossier .m74DevotedFile{grid-template-columns:86px minmax(0,1fr)!important}
}


/* =====================================================================
   V86 — MASCOT / PORTRAIT / ACADEMIC-FIRST / POINT ART / MOBILE RANKING
   Existing desktop layout geometry remains unchanged. The only desktop
   addition is the requested floating House mascot while student data is open.
   ===================================================================== */
.mobileCornerLogo,.dormMascotStage{display:none}

/* House mascot is intentionally available on desktop and mobile student views. */
body:not(.front-mode) .dormMascotStage:not(.hidden){display:block}
.dormMascotStage{
  --mascot-aura:rgba(211,173,121,.45);
  --mascot-aura-soft:rgba(211,173,121,.16);
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:900;
  width:132px;
  height:154px;
  pointer-events:none;
  perspective:900px;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.32));
}
.dormMascotStage.mascot-yamiyo{--mascot-aura:rgba(161,85,203,.68);--mascot-aura-soft:rgba(116,64,135,.24)}
.dormMascotStage.mascot-tsukiyomi{--mascot-aura:rgba(112,171,255,.70);--mascot-aura-soft:rgba(97,139,216,.24)}
.dormMascotStage.mascot-kosei{--mascot-aura:rgba(225,186,83,.68);--mascot-aura-soft:rgba(116,127,62,.26)}
.dormMascotPerspective{position:absolute;inset:0;display:grid;place-items:end center;transform-style:preserve-3d}
.dormMascotBody{
  position:relative;
  z-index:2;
  width:124px;
  height:124px;
  transform-origin:50% 100%;
  transform-style:preserve-3d;
  animation:dormMascotLeap 3.15s cubic-bezier(.42,0,.22,1) infinite;
  filter:drop-shadow(0 0 12px var(--mascot-aura)) drop-shadow(0 0 26px var(--mascot-aura-soft));
}
.dormMascotBody svg{display:block;width:100%;height:100%;overflow:visible}
.dormMascotBody .mascotSvgFigure{transform-origin:70px 112px;animation:dormMascotTurn 6.3s ease-in-out infinite}
.dormMascotStage.is-entering .dormMascotBody{animation:dormMascotEnter .55s cubic-bezier(.15,.86,.28,1.25) both,dormMascotLeap 3.15s .55s cubic-bezier(.42,0,.22,1) infinite}
.dormMascotStage::before{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  bottom:7px;
  height:15px;
  border-radius:50%;
  background:radial-gradient(ellipse,var(--mascot-aura-soft),transparent 70%);
  filter:blur(5px);
  animation:dormMascotShadow 3.15s ease-in-out infinite;
}
.dormMascotSparkTrail{position:absolute;inset:0;z-index:1;overflow:visible}
.dormMascotSparkTrail i{
  --size:calc(3px + (var(--i) % 3) * 1px);
  position:absolute;
  left:calc(18px + (var(--i) * 10px));
  bottom:calc(22px + ((var(--i) % 4) * 8px));
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  background:radial-gradient(circle,#fff 0 18%,color-mix(in srgb,var(--mascot-aura) 86%,#fff) 28% 56%,transparent 68%);
  box-shadow:0 0 8px var(--mascot-aura),0 0 16px var(--mascot-aura-soft);
  opacity:0;
  animation:dormMascotSpark 3.15s calc(var(--i) * .075s) ease-out infinite;
}
.dormMascotSparkTrail i:nth-child(odd){clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);border-radius:0}
@keyframes dormMascotLeap{
  0%,15%,100%{transform:translate3d(0,0,0) rotateX(0) rotateY(-4deg) scale(1)}
  31%{transform:translate3d(-5px,-44px,30px) rotateX(-9deg) rotateY(12deg) scale(1.055)}
  44%{transform:translate3d(4px,-57px,38px) rotateX(4deg) rotateY(-10deg) scale(1.075)}
  61%{transform:translate3d(1px,-18px,12px) rotateX(8deg) rotateY(6deg) scale(1.02)}
  70%{transform:translate3d(0,3px,0) rotateX(-4deg) rotateY(-2deg) scale(.985)}
  78%{transform:translate3d(0,-7px,5px) rotateX(2deg) scale(1.01)}
}
@keyframes dormMascotTurn{0%,100%{transform:rotateY(-4deg) rotateZ(-1deg)}50%{transform:rotateY(8deg) rotateZ(1.5deg)}}
@keyframes dormMascotShadow{0%,15%,100%{transform:scaleX(1);opacity:.72}40%{transform:scaleX(.52);opacity:.25}70%{transform:scaleX(.92);opacity:.62}}
@keyframes dormMascotSpark{
  0%,18%,100%{opacity:0;transform:translate3d(0,0,0) scale(.45) rotate(0)}
  31%{opacity:.92;transform:translate3d(-10px,-24px,18px) scale(1) rotate(90deg)}
  49%{opacity:.68;transform:translate3d(-23px,-52px,25px) scale(.72) rotate(180deg)}
  66%{opacity:0;transform:translate3d(-36px,-65px,10px) scale(.35) rotate(260deg)}
}
@keyframes dormMascotEnter{from{opacity:0;transform:translate3d(35px,20px,-30px) rotateY(-28deg) scale(.72)}to{opacity:1;transform:translate3d(0,0,0) rotateY(-4deg) scale(1)}}

@media (max-width:768px){
  /* HOME logo: a small, free-floating emblem at the upper-left; no shape. */
  body.front-mode .mobileCornerLogo{
    position:absolute!important;
    left:18px!important;
    top:18px!important;
    z-index:13!important;
    display:block!important;
    width:44px!important;
    height:44px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:none!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }
  body.front-mode .mobileCornerLogo::before,
  body.front-mode .mobileCornerLogo::after{display:none!important;content:none!important}
  body.front-mode .mobileCornerLogo img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    background:transparent!important;
    filter:drop-shadow(0 0 7px color-mix(in srgb,var(--strong) 42%,transparent)) drop-shadow(0 0 15px var(--glow))!important;
  }
  body.front-mode .heroContent>.logo{display:block!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}

  /* More refined portrait frame: animated metal rim, inner bevel and House aura. */
  body:not(.front-mode) .mobileStudentDossier .mobileStudentSummaryTop{grid-template-columns:76px minmax(0,1fr) 42px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryPortrait{
    position:relative!important;
    isolation:isolate!important;
    width:76px!important;
    height:76px!important;
    min-width:76px!important;
    min-height:76px!important;
    overflow:visible!important;
    padding:0!important;
    border:0!important;
    border-radius:18px!important;
    background:
      linear-gradient(#08080d,#08080d) padding-box,
      conic-gradient(from 16deg,color-mix(in srgb,var(--strong) 72%,var(--accent)),var(--accent),color-mix(in srgb,var(--accent2) 60%,var(--accent)),var(--strong),var(--accent)) border-box!important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.055),
      0 0 0 4px rgba(2,2,6,.86),
      0 0 0 5px color-mix(in srgb,var(--accent) 31%,transparent),
      0 13px 27px rgba(0,0,0,.40),
      0 0 24px color-mix(in srgb,var(--accent) 40%,transparent),
      0 0 42px color-mix(in srgb,var(--accent) 16%,transparent)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryPortrait::before{
    content:""!important;
    position:absolute!important;
    inset:-4px!important;
    z-index:-1!important;
    border-radius:21px!important;
    background:conic-gradient(from 0deg,transparent 0 18%,color-mix(in srgb,var(--strong) 72%,var(--accent)) 25%,transparent 34% 67%,var(--accent) 76%,transparent 84%)!important;
    filter:blur(.4px) drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 44%,transparent))!important;
    opacity:.72!important;
    animation:mobilePortraitRim 8s linear infinite!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryPortrait::after{
    content:""!important;
    position:absolute!important;
    inset:5px!important;
    z-index:3!important;
    border:1px solid color-mix(in srgb,var(--strong) 32%,rgba(255,255,255,.08))!important;
    border-radius:12px!important;
    background:
      linear-gradient(90deg,var(--accent),var(--accent)) left 3px top 3px/10px 1px no-repeat,
      linear-gradient(180deg,var(--accent),var(--accent)) left 3px top 3px/1px 10px no-repeat,
      linear-gradient(90deg,var(--accent),var(--accent)) right 3px top 3px/10px 1px no-repeat,
      linear-gradient(180deg,var(--accent),var(--accent)) right 3px top 3px/1px 10px no-repeat,
      linear-gradient(90deg,var(--accent),var(--accent)) left 3px bottom 3px/10px 1px no-repeat,
      linear-gradient(180deg,var(--accent),var(--accent)) left 3px bottom 3px/1px 10px no-repeat,
      linear-gradient(90deg,var(--accent),var(--accent)) right 3px bottom 3px/10px 1px no-repeat,
      linear-gradient(180deg,var(--accent),var(--accent)) right 3px bottom 3px/1px 10px no-repeat,
      linear-gradient(145deg,rgba(255,255,255,.10),transparent 28%,transparent 70%,rgba(0,0,0,.24))!important;
    box-shadow:inset 0 0 14px rgba(0,0,0,.30)!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryPortrait img{
    position:absolute!important;
    left:5px!important;
    top:5px!important;
    width:calc(100% - 10px)!important;
    height:calc(100% - 10px)!important;
    object-fit:cover!important;
    object-position:50% 16%!important;
    border-radius:12px!important;
    transform:scale(1.12)!important;
    transform-origin:50% 16%!important;
    clip-path:inset(0 round 12px)!important;
    z-index:1!important;
  }
  @keyframes mobilePortraitRim{to{transform:rotate(360deg)}}

  /* Academic Records is the first mobile record; Point Log follows on swipe. */
  body:not(.front-mode) .mobileStudentDossier .mobileSwipeCalloutCopy strong{font-size:12.5px!important}

  /* Student Point Log uses the exact artwork from the desktop point panel. */
  body:not(.front-mode) .mobileStudentDossier .m74PointsApp{
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    padding:10px!important;
    border:1px solid color-mix(in srgb,var(--accent) 30%,rgba(255,255,255,.07))!important;
    border-radius:16px!important;
    background-image:
      linear-gradient(180deg,rgba(4,4,8,.18) 0%,rgba(4,4,8,.40) 34%,rgba(4,4,8,.82) 72%,rgba(4,4,8,.94) 100%),
      linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,rgba(4,4,8,.52)),rgba(4,4,8,.28) 58%,rgba(4,4,8,.70)),
      url("https://drive.google.com/thumbnail?id=1Zjh2vTq4QhYOOv3LvWkz7T3JeAfrI7-q&sz=w1800")!important;
    background-size:cover,cover,cover!important;
    background-position:center,center,center top!important;
    background-repeat:no-repeat!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 30px rgba(0,0,0,.30),0 14px 31px rgba(0,0,0,.22)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74PointsApp::before{
    content:""!important;
    position:absolute!important;
    inset:5px!important;
    z-index:0!important;
    border:1px solid color-mix(in srgb,var(--accent) 13%,transparent)!important;
    border-radius:11px!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74PointsApp>*{position:relative!important;z-index:1!important}
  body:not(.front-mode) .mobileStudentDossier .m74RecordHead,
  body:not(.front-mode) .mobileStudentDossier .m74PointTotals,
  body:not(.front-mode) .mobileStudentDossier .m74PointActivity{backdrop-filter:blur(9px) saturate(1.04)!important;-webkit-backdrop-filter:blur(9px) saturate(1.04)!important}
  body:not(.front-mode) .mobileStudentDossier .m74RecordHead{padding:8px 8px 10px!important;border:1px solid rgba(255,255,255,.055)!important;border-radius:11px!important;background:rgba(4,4,8,.35)!important}
  body:not(.front-mode) .mobileStudentDossier .m74PointTotals{background:rgba(4,4,8,.54)!important}
  body:not(.front-mode) .mobileStudentDossier .m74PointActivity{background:rgba(4,4,8,.52)!important}

  /* Mascot sizing on mobile. */
  .dormMascotStage{right:7px!important;bottom:14px!important;width:92px!important;height:110px!important;z-index:980!important;opacity:.96!important}
  .dormMascotBody{width:88px!important;height:88px!important}
  .dormMascotStage::before{left:18px!important;right:18px!important;bottom:4px!important}
  .dormMascotSparkTrail i{left:calc(10px + (var(--i) * 7px))!important;bottom:calc(15px + ((var(--i) % 4) * 6px))!important}

  /* HOME GP ranking: cleaner premium leaderboard cards, without changing content. */
  body.front-mode .gpRankingSection{
    position:relative!important;
    isolation:isolate!important;
    border-color:color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.08))!important;
    background:
      radial-gradient(circle at 100% 0,color-mix(in srgb,var(--accent) 14%,transparent),transparent 34%),
      linear-gradient(155deg,rgba(15,15,23,.94),rgba(5,5,10,.97))!important;
    box-shadow:0 20px 46px rgba(0,0,0,.38),0 0 28px color-mix(in srgb,var(--accent) 8%,transparent),inset 0 1px 0 rgba(255,255,255,.04)!important;
  }
  body.front-mode .gpRankingSection::before{
    content:""!important;
    position:absolute!important;
    inset:5px!important;
    border:1px solid color-mix(in srgb,var(--accent) 10%,transparent)!important;
    border-radius:18px!important;
    pointer-events:none!important;
  }
  body.front-mode .gpRankingHeader{
    position:relative!important;
    z-index:1!important;
    padding:15px 15px 12px!important;
    background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 6%,rgba(255,255,255,.012)),transparent)!important;
  }
  body.front-mode .gpRankingTitle{font-family:"Cinzel","League Spartan",serif!important;font-size:17px!important;letter-spacing:.02em!important}
  body.front-mode .gpRankingContent{position:relative!important;z-index:1!important;padding:10px!important}
  body.front-mode .gpArena{gap:8px!important}
  body.front-mode .gpRankCard,
  body.front-mode .gpArena>.gpRankCard:nth-child(-n+3),
  body.front-mode .gpArena>.gpRankCard:nth-child(n+4){
    position:relative!important;
    isolation:isolate!important;
    min-height:78px!important;
    grid-template-columns:56px minmax(0,1fr) 58px!important;
    gap:8px!important;
    padding:9px!important;
    overflow:hidden!important;
    border:1px solid color-mix(in srgb,var(--gpGlow) 42%,rgba(255,255,255,.07))!important;
    border-radius:16px!important;
    background:
      radial-gradient(circle at 0 50%,var(--gpGlow2),transparent 37%),
      linear-gradient(150deg,rgba(255,255,255,.035),rgba(3,3,8,.73))!important;
    box-shadow:0 12px 26px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.035)!important;
  }
  body.front-mode .gpRankCard::after{
    content:""!important;
    position:absolute!important;
    left:8px!important;
    right:8px!important;
    top:0!important;
    height:1px!important;
    background:linear-gradient(90deg,transparent,var(--gpGlow),transparent)!important;
    opacity:.72!important;
  }
  body.front-mode .gpRankCard.isChampion{border-color:rgba(240,210,104,.54)!important;box-shadow:0 14px 30px rgba(0,0,0,.30),0 0 20px rgba(240,210,104,.12),inset 0 1px 0 rgba(255,255,255,.05)!important}
  body.front-mode .gpRankLeft{width:56px!important;gap:3px!important}
  body.front-mode .gpRankNo{min-width:36px!important;min-height:18px!important;padding:3px 6px!important;font-size:7px!important;border-radius:999px!important}
  body.front-mode .gpRankAvatar,body.front-mode .gpRankAvatarFrame{width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important}
  body.front-mode .gpRankAvatarFrame{border-radius:13px!important;box-shadow:0 0 0 2px rgba(3,3,7,.78),0 0 13px var(--gpGlow2),inset 0 1px 0 rgba(255,255,255,.08)!important}
  body.front-mode .gpRankAvatarFrame::after{border-radius:11px!important}
  body.front-mode .gpRankHouseBadge{width:21px!important;height:21px!important;border-radius:7px!important;right:-2px!important;bottom:-1px!important}
  body.front-mode .gpRankHouseBadge img{width:15px!important;height:15px!important}
  body.front-mode .gpRankTopline{font-size:5.5px!important;gap:4px!important}
  body.front-mode .gpRankHouse{min-height:18px!important;padding:3px 6px!important;font-size:5.3px!important}
  body.front-mode .gpRankNameButton{margin-top:5px!important;font-size:11px!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  body.front-mode .gpRankKanji{margin-top:4px!important;font-size:8.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  body.front-mode .gpRankUsername{margin-top:4px!important;font-size:6px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  body.front-mode .gpRankScore{
    min-width:58px!important;
    justify-items:center!important;
    align-content:center!important;
    padding:7px 4px!important;
    border:1px solid color-mix(in srgb,var(--gpGlow) 28%,rgba(255,255,255,.05))!important;
    border-radius:12px!important;
    background:linear-gradient(145deg,color-mix(in srgb,var(--gpGlow2) 62%,rgba(0,0,0,.18)),rgba(0,0,0,.22))!important;
    text-align:center!important;
  }
  body.front-mode .gpRankScoreLabel{font-size:5px!important;letter-spacing:.08em!important}
  body.front-mode .gpRankScoreValue{font-size:15px!important;line-height:1!important}
}

@media (max-width:390px){
  body:not(.front-mode) .mobileStudentDossier .mobileStudentSummaryTop{grid-template-columns:72px minmax(0,1fr) 39px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryPortrait{width:72px!important;height:72px!important;min-width:72px!important;min-height:72px!important}
  body.front-mode .mobileCornerLogo{left:16px!important;top:16px!important;width:40px!important;height:40px!important}
}

@media (prefers-reduced-motion:reduce){
  .dormMascotBody,.dormMascotBody .mascotSvgFigure,.dormMascotStage::before,.dormMascotSparkTrail i,.mobileSummaryPortrait::before{animation:none!important}
}


/* =====================================================================
   V88 — SURGICAL MOBILE CORRECTION
   - Reuses the pre-V87 GP Ranking layout already defined above.
   - Removes the central HOME logo on mobile with a hard responsive rule.
   - Uses a simple House-colour portrait frame.
   - Mascot movement is fixed-position and never participates in layout flow.
   ===================================================================== */

/* Natural mascot tour — desktop and mobile, with a separate particle layer. */
.dormMascotParticleLayer{
  position:fixed;
  inset:0;
  z-index:979;
  overflow:hidden;
  pointer-events:none;
  contain:layout paint style;
}
.mascotTrailSpark{
  --spark-color:#d8bd86;
  --spark-size:5px;
  position:fixed;
  left:0;
  top:0;
  width:var(--spark-size);
  height:var(--spark-size);
  margin:calc(var(--spark-size) / -2) 0 0 calc(var(--spark-size) / -2);
  opacity:0;
  border-radius:50%;
  background:radial-gradient(circle,#fff 0 16%,var(--spark-color) 33%,color-mix(in srgb,var(--spark-color) 38%,transparent) 68%,transparent 72%);
  box-shadow:0 0 5px var(--spark-color),0 0 12px color-mix(in srgb,var(--spark-color) 76%,transparent);
  transform:translate3d(0,0,0) scale(.35) rotate(0deg);
  animation:v88SparkFade var(--spark-life,760ms) cubic-bezier(.18,.7,.22,1) forwards;
  will-change:transform,opacity;
}
.mascotTrailSpark.is-star{
  border-radius:0;
  clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);
}
@keyframes v88SparkFade{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.25) rotate(0deg)}
  14%{opacity:1;transform:translate3d(var(--spark-x1,0),var(--spark-y1,-4px),0) scale(1) rotate(80deg)}
  66%{opacity:.64;transform:translate3d(var(--spark-x2,-7px),var(--spark-y2,8px),0) scale(.72) rotate(210deg)}
  100%{opacity:0;transform:translate3d(var(--spark-x3,-13px),var(--spark-y3,18px),0) scale(.12) rotate(330deg)}
}
body:not(.front-mode) .dormMascotStage:not(.hidden){
  position:fixed!important;
  display:block!important;
  left:0!important;
  top:0!important;
  right:auto!important;
  bottom:auto!important;
  width:108px!important;
  height:126px!important;
  z-index:980!important;
  transform:translate3d(calc(100vw - 138px),calc(100vh - 154px),0);
  transform-origin:50% 100%;
  pointer-events:none!important;
  will-change:transform;
}
body:not(.front-mode) .dormMascotStage .dormMascotBody{
  width:102px!important;
  height:102px!important;
  transform-origin:50% 92%;
  animation:v88MascotIdle 3.4s ease-in-out infinite!important;
}
body:not(.front-mode) .dormMascotStage.is-entering .dormMascotBody{
  animation:dormMascotEnter .55s cubic-bezier(.15,.86,.28,1.25) both,v88MascotIdle 3.4s .55s ease-in-out infinite!important;
}
body:not(.front-mode) .dormMascotStage::before{
  animation:v88MascotIdleShadow 3.4s ease-in-out infinite!important;
}
body:not(.front-mode) .dormMascotStage.is-traveling::before{
  animation:v88MascotHopShadow var(--hop-duration,1320ms) linear both!important;
}
body:not(.front-mode) .dormMascotStage.is-traveling .dormMascotBody{
  animation:v88MascotHopPose var(--hop-duration,1320ms) linear both!important;
}
body:not(.front-mode) .dormMascotStage .dormMascotSparkTrail{display:none!important}
@keyframes v88MascotIdle{
  0%,100%{transform:translate3d(0,0,0) rotateY(-3deg) scale(1)}
  50%{transform:translate3d(0,-3px,4px) rotateY(3deg) scale(1.012)}
}
@keyframes v88MascotIdleShadow{
  0%,100%{transform:scaleX(.92);opacity:.58}
  50%{transform:scaleX(.86);opacity:.48}
}
@keyframes v88MascotHopShadow{
  0%,100%{transform:scaleX(.94);opacity:.62}
  16%{transform:scaleX(.88);opacity:.52}
  50%{transform:scaleX(.48);opacity:.20}
  86%{transform:scaleX(.82);opacity:.48}
}
@keyframes v88MascotHopPose{
  0%{transform:translate3d(0,0,0) rotateZ(0deg) scale(1,1)}
  8%{transform:translate3d(0,3px,0) rotateZ(-1deg) scale(1.035,.94)}
  18%{transform:translate3d(0,-4px,10px) rotateZ(2deg) scale(.97,1.045)}
  48%{transform:translate3d(0,-13px,25px) rotateZ(5deg) scale(1.035,1.035)}
  72%{transform:translate3d(0,-5px,10px) rotateZ(-2deg) scale(1,1.02)}
  88%{transform:translate3d(0,3px,0) rotateZ(1deg) scale(1.045,.93)}
  100%{transform:translate3d(0,0,0) rotateZ(0deg) scale(1,1)}
}

@media (max-width:768px){
  /* Hard-remove the large central HOME emblem and every old logo watermark layer. */
  body.front-mode .hero>.heroContent>.logo,
  body.front-mode .hero>.heroContent>.desktopHeroLogo{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    position:absolute!important;
    left:-9999px!important;
    width:0!important;
    height:0!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:none!important;
    box-shadow:none!important;
    overflow:hidden!important;
    clip-path:inset(100%)!important;
    pointer-events:none!important;
  }
  body.front-mode .hero::before,
  body.front-mode .heroFeatureArt::before{
    display:none!important;
    content:none!important;
    background:none!important;
    background-image:none!important;
    opacity:0!important;
  }
  /* Preserve the established vertical composition after removing the central logo. */
  body.front-mode .heroContent::before{
    content:""!important;
    display:block!important;
    width:1px!important;
    height:94px!important;
    margin:0 auto!important;
    pointer-events:none!important;
  }
  body.front-mode .heroFeatureArt{
    opacity:1!important;
    background-position:center 14%!important;
    filter:saturate(1.04) contrast(1.02) brightness(.91)!important;
  }
  body.front-mode .heroFeatureArt::after{
    background:
      linear-gradient(180deg,rgba(2,2,6,.04) 0%,rgba(2,2,6,.10) 42%,rgba(2,2,6,.52) 78%,rgba(2,2,6,.78) 100%),
      linear-gradient(90deg,rgba(3,3,8,.15),transparent 25%,transparent 75%,rgba(3,3,8,.15))!important;
  }
  body.front-mode .mobileCornerLogo{
    left:17px!important;
    top:17px!important;
    width:54px!important;
    height:54px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body.front-mode .mobileCornerLogo::before,
  body.front-mode .mobileCornerLogo::after{display:none!important;content:none!important}
  body.front-mode .mobileCornerLogo img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    border:0!important;
    background:transparent!important;
    mix-blend-mode:screen!important;
    filter:drop-shadow(0 0 7px rgba(255,255,255,.30)) drop-shadow(0 0 15px var(--glow))!important;
  }
  /* Retain the balanced compact HOME search from the approved mobile direction. */
  body.front-mode .searchBar{
    width:min(286px,82vw)!important;
    max-width:286px!important;
    grid-template-columns:minmax(0,1fr) 40px!important;
    gap:6px!important;
    margin:0 auto!important;
  }
  body.front-mode .searchBar input{
    height:35px!important;
    padding:0 11px!important;
    border-radius:12px!important;
    font-size:8px!important;
  }
  body.front-mode .searchBar button{
    width:40px!important;
    min-width:40px!important;
    height:35px!important;
    min-height:35px!important;
    padding:0!important;
    border-radius:12px!important;
  }

  /* Simple, elegant portrait frame led by the current House colour. */
  body:not(.front-mode) .mobileStudentDossier .mobileStudentSummaryTop{
    grid-template-columns:72px minmax(0,1fr) 42px!important;
    gap:8px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryPortrait{
    position:relative!important;
    isolation:isolate!important;
    width:72px!important;
    height:72px!important;
    min-width:72px!important;
    min-height:72px!important;
    overflow:hidden!important;
    padding:4px!important;
    border:1px solid color-mix(in srgb,var(--accent) 76%,var(--strong))!important;
    border-radius:12px!important;
    background:
      linear-gradient(145deg,color-mix(in srgb,var(--accent) 35%,rgba(255,255,255,.10)),rgba(5,5,9,.94) 48%,color-mix(in srgb,var(--accent) 18%,rgba(5,5,9,.95)))!important;
    box-shadow:
      0 0 0 1px rgba(0,0,0,.72),
      0 8px 18px rgba(0,0,0,.38),
      0 0 17px color-mix(in srgb,var(--accent) 34%,transparent),
      inset 0 1px 0 rgba(255,255,255,.12)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryPortrait::before{
    content:""!important;
    position:absolute!important;
    inset:3px!important;
    z-index:3!important;
    border:1px solid color-mix(in srgb,var(--accent) 42%,rgba(255,255,255,.16))!important;
    border-radius:8px!important;
    background:none!important;
    box-shadow:inset 0 0 9px rgba(0,0,0,.30)!important;
    opacity:1!important;
    animation:none!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryPortrait::after{
    display:none!important;
    content:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryPortrait img{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    z-index:1!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:50% 16%!important;
    border-radius:7px!important;
    transform:scale(1.10)!important;
    transform-origin:50% 16%!important;
    clip-path:inset(0 round 7px)!important;
  }

  /* Mobile mascot follows a clear title rail on the right, never perching on the portrait. */
  body:not(.front-mode) .dormMascotStage:not(.hidden){
    width:82px!important;
    height:96px!important;
    z-index:980!important;
  }
  body:not(.front-mode) .dormMascotStage .dormMascotBody{
    width:78px!important;
    height:78px!important;
  }
  body:not(.front-mode) .dormMascotStage::before{
    left:14px!important;
    right:14px!important;
    bottom:3px!important;
  }
}

@media (max-width:390px){
  body.front-mode .mobileCornerLogo{left:15px!important;top:15px!important;width:50px!important;height:50px!important}
  body.front-mode .searchBar{width:min(274px,80vw)!important;max-width:274px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileStudentSummaryTop{grid-template-columns:70px minmax(0,1fr) 39px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryPortrait{width:70px!important;height:70px!important;min-width:70px!important;min-height:70px!important}
}

@media (prefers-reduced-motion:reduce){
  body:not(.front-mode) .dormMascotStage.is-traveling .dormMascotBody,
  .mascotTrailSpark{animation:none!important}
}

/* =====================================================
   V89 — MOBILE RANK / PLAYFUL MASCOT / PDF FIT / GLASS ACADEMIC
   Desktop layout geometry remains untouched.
   ===================================================== */

/* Playful pose system works on both desktop and mobile without affecting flow. */
body:not(.front-mode) .dormMascotStage.pose-twirl.is-traveling .dormMascotBody{
  animation:v89MascotTwirl var(--hop-duration,1280ms) cubic-bezier(.34,.02,.24,1) both!important;
}
body:not(.front-mode) .dormMascotStage.pose-cheer.is-traveling .dormMascotBody{
  animation:v89MascotCheer var(--hop-duration,1280ms) cubic-bezier(.3,.02,.2,1) both!important;
}
body:not(.front-mode) .dormMascotStage.pose-spin.is-traveling .dormMascotBody{
  animation:v89MascotSpin var(--hop-duration,1280ms) linear both!important;
}
body:not(.front-mode) .dormMascotStage.pose-prance.is-traveling .dormMascotBody{
  animation:v89MascotPrance var(--hop-duration,1280ms) cubic-bezier(.25,.1,.2,1) both!important;
}
body:not(.front-mode) .dormMascotStage.is-posing.pose-cheer .dormMascotBody{animation:v89LandingCheer .9s ease-out both!important}
body:not(.front-mode) .dormMascotStage.is-posing.pose-twirl .dormMascotBody{animation:v89LandingTwirl .9s ease-out both!important}
body:not(.front-mode) .dormMascotStage.is-posing.pose-spin .dormMascotBody{animation:v89LandingSpin .9s ease-out both!important}
body:not(.front-mode) .dormMascotStage.is-posing.pose-prance .dormMascotBody{animation:v89LandingPrance .9s ease-out both!important}
@keyframes v89MascotTwirl{0%{transform:scale(1,.94) rotateZ(-5deg)}25%{transform:scale(.98,1.07) rotateZ(14deg)}55%{transform:scale(1.06) rotateZ(-12deg)}82%{transform:scale(.98,1.04) rotateZ(8deg)}100%{transform:scale(1) rotateZ(0)}}
@keyframes v89MascotCheer{0%{transform:scale(1.04,.92) rotateZ(-3deg)}28%{transform:translateY(-8px) scale(.96,1.08) rotateZ(8deg)}52%{transform:translateY(-14px) scale(1.05) rotateZ(-7deg)}76%{transform:translateY(-5px) scale(.98,1.04) rotateZ(5deg)}100%{transform:none}}
@keyframes v89MascotSpin{0%{transform:scale(1,.94) rotateY(0)}35%{transform:scale(.96,1.08) rotateY(150deg)}70%{transform:scale(1.05) rotateY(300deg)}100%{transform:scale(1) rotateY(360deg)}}
@keyframes v89MascotPrance{0%{transform:scale(1.06,.92) rotateZ(-4deg)}22%{transform:translateY(-7px) rotateZ(10deg) scale(.98,1.07)}48%{transform:translateY(-13px) rotateZ(-8deg) scale(1.04)}72%{transform:translateY(-6px) rotateZ(7deg) scale(.99,1.04)}100%{transform:none}}
@keyframes v89LandingCheer{0%{transform:scale(1.1,.88)}34%{transform:translateY(-7px) rotateZ(-7deg) scale(.96,1.08)}68%{transform:translateY(-2px) rotateZ(6deg)}100%{transform:none}}
@keyframes v89LandingTwirl{0%{transform:rotateZ(12deg) scale(.98)}45%{transform:rotateZ(-9deg) scale(1.04)}100%{transform:none}}
@keyframes v89LandingSpin{0%{transform:rotateY(30deg) scale(.96,1.04)}55%{transform:rotateY(-16deg) scale(1.03)}100%{transform:none}}
@keyframes v89LandingPrance{0%{transform:translateY(2px) rotateZ(-6deg) scale(1.07,.91)}45%{transform:translateY(-5px) rotateZ(7deg) scale(.98,1.06)}100%{transform:none}}
.mascotTrailSpark.is-burst{filter:brightness(1.18);animation-duration:calc(var(--spark-life,760ms) * 1.08)}

@media (max-width:768px){
  /* Rank number receives its own row above the portrait; it can never cover a face. */
  body.front-mode .gpRankingSection .gpRankCard,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3),
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(n+4){
    min-height:90px!important;
  }
  body.front-mode .gpRankingSection .gpRankLeft{
    width:58px!important;
    display:grid!important;
    grid-template-rows:18px 54px!important;
    justify-items:center!important;
    align-content:center!important;
    gap:4px!important;
  }
  body.front-mode .gpRankingSection .gpRankNo{
    position:static!important;
    inset:auto!important;
    z-index:auto!important;
    min-width:34px!important;
    min-height:18px!important;
    margin:0!important;
    padding:2px 6px!important;
    transform:none!important;
    font-size:7px!important;
    line-height:1!important;
  }

  /* Mobile document preview fits the viewport while original 816×1344 pages stay intact for export. */
  .documentReviewModal{padding:6px!important}
  .documentReviewCard{
    width:calc(100vw - 12px)!important;
    height:calc(100dvh - 12px)!important;
    max-height:none!important;
    border-radius:18px!important;
  }
  .documentReviewViewport{
    padding:8px 4px 16px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
  .documentReviewPages{
    min-width:0!important;
    width:100%!important;
    gap:14px!important;
    justify-items:center!important;
  }
  .mobileDocumentPageFrame{
    position:relative!important;
    overflow:hidden!important;
    flex:none!important;
    margin:0 auto!important;
    border-radius:4px!important;
    background:#fbf7ef!important;
    box-shadow:0 14px 34px rgba(0,0,0,.48)!important;
  }
  .mobileDocumentPageFrame>.pdfPage{box-shadow:none!important}

  /* Transparent glossy Academic Records so falling ornaments remain visible but text stays legible. */
  .mobileRecordPage[data-mobile-record="academic"],
  .mobileRecordPage[data-mobile-record="academic"] .mobileRecordPageScroll,
  #mobileAcademicMount,
  #mobileAcademicMount .m72AcademicApp{
    background:transparent!important;
  }
  .mobileRecordPage[data-mobile-record="academic"] .mobileRecordPageScroll{
    position:relative!important;
    isolation:isolate!important;
  }
  .mobileRecordPage[data-mobile-record="academic"] .mobileRecordPageScroll::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:-1!important;
    border-radius:16px!important;
    background:linear-gradient(145deg,rgba(7,8,14,.18),rgba(4,5,10,.06))!important;
    pointer-events:none!important;
  }
  #mobileAcademicMount .m72AcademicToolbar,
  #mobileAcademicMount .m72AcademicTerm{
    border-color:color-mix(in srgb,var(--accent) 28%,rgba(255,255,255,.12))!important;
    background:
      linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 42%,rgba(3,4,10,.36)),
      color-mix(in srgb,var(--accent) 5%,rgba(4,5,11,.42))!important;
    -webkit-backdrop-filter:blur(15px) saturate(1.2)!important;
    backdrop-filter:blur(15px) saturate(1.2)!important;
    box-shadow:
      0 11px 28px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 0 24px color-mix(in srgb,var(--accent) 5%,transparent)!important;
  }
  #mobileAcademicMount .m72AcademicTerm{position:relative!important;isolation:isolate!important}
  #mobileAcademicMount .m72AcademicTerm::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:-1!important;
    border-radius:inherit!important;
    background:linear-gradient(115deg,rgba(255,255,255,.055),transparent 34%,transparent 70%,color-mix(in srgb,var(--accent) 7%,transparent))!important;
    pointer-events:none!important;
  }
  #mobileAcademicMount .m72AcademicTermHead,
  #mobileAcademicMount .m72AcademicMeta>div,
  #mobileAcademicMount .m72AcademicParticipation span,
  #mobileAcademicMount .m72AcademicSubject,
  #mobileAcademicMount .m72AcademicMarks>span{
    background:rgba(4,5,11,.34)!important;
    -webkit-backdrop-filter:blur(9px) saturate(1.12)!important;
    backdrop-filter:blur(9px) saturate(1.12)!important;
  }
  #mobileAcademicMount .m72AcademicTermHead{
    background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,rgba(255,255,255,.045)),rgba(4,5,11,.30))!important;
  }
}

@media (max-width:390px){
  body.front-mode .gpRankingSection .gpRankLeft{width:54px!important;grid-template-rows:18px 50px!important}
  body.front-mode .gpRankingSection .gpRankNo{min-width:32px!important}
}

@media (prefers-reduced-motion:reduce){
  body:not(.front-mode) .dormMascotStage.pose-twirl .dormMascotBody,
  body:not(.front-mode) .dormMascotStage.pose-cheer .dormMascotBody,
  body:not(.front-mode) .dormMascotStage.pose-spin .dormMascotBody,
  body:not(.front-mode) .dormMascotStage.pose-prance .dormMascotBody{animation:none!important}
}


/* V89 rank safety: apply the dedicated rank row to elite cards too. */
@media (max-width:768px){
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankNo,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(n+4) .gpRankNo{
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    inset:auto!important;
    z-index:auto!important;
    min-width:34px!important;
    min-height:18px!important;
    margin:0!important;
    padding:2px 6px!important;
    transform:none!important;
  }
}
@media (max-width:390px){
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankNo,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(n+4) .gpRankNo{min-width:32px!important}
}


/* =====================================================
   V90 — MOBILE DOSSIER / CLEAN GP RANKING / SEMESTER PAGER
   All visual overrides remain inside max-width:768px.
   ===================================================== */
@media (max-width:768px){
  /* Student GP Ranking: one disciplined row system for every rank. */
  body.front-mode .gpRankingSection .gpArena{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  body.front-mode .gpRankingSection .gpArena>.gpRankCard,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3),
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(n+4),
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(1),
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(2),
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(3){
    grid-column:auto!important;
    grid-row:auto!important;
    width:100%!important;
    min-height:76px!important;
    display:grid!important;
    grid-template-columns:78px minmax(0,1fr) 62px!important;
    align-items:center!important;
    gap:9px!important;
    padding:9px 10px!important;
    border-radius:16px!important;
  }
  body.front-mode .gpRankingSection .gpRankLeft,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankLeft{
    width:78px!important;
    display:grid!important;
    grid-template-columns:22px 50px!important;
    grid-template-rows:50px!important;
    align-items:center!important;
    justify-items:center!important;
    gap:6px!important;
  }
  body.front-mode .gpRankingSection .gpRankNo,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankNo,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(n+4) .gpRankNo{
    position:static!important;
    inset:auto!important;
    width:22px!important;
    min-width:22px!important;
    height:22px!important;
    min-height:22px!important;
    margin:0!important;
    padding:0!important;
    border-radius:50%!important;
    font-size:7px!important;
    line-height:22px!important;
    text-align:center!important;
    transform:none!important;
    z-index:2!important;
  }
  body.front-mode .gpRankingSection .gpRankAvatar,
  body.front-mode .gpRankingSection .gpRankAvatarFrame,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankAvatar,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankAvatarFrame{
    width:50px!important;
    height:50px!important;
    min-width:50px!important;
    min-height:50px!important;
  }
  body.front-mode .gpRankingSection .gpRankAvatarFrame{border-radius:12px!important}
  body.front-mode .gpRankingSection .gpRankAvatarFrame::after{border-radius:10px!important}
  body.front-mode .gpRankingSection .gpRankBody,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankBody{
    width:auto!important;
    min-width:0!important;
    display:block!important;
    text-align:left!important;
  }
  body.front-mode .gpRankingSection .gpRankTopline,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankTopline{
    width:100%!important;
    display:flex!important;
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    gap:5px!important;
  }
  body.front-mode .gpRankingSection .gpRankId{width:auto!important;text-align:left!important}
  body.front-mode .gpRankingSection .gpRankNameButton,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankNameButton{
    width:100%!important;
    max-width:100%!important;
    margin-top:5px!important;
    font-size:11px!important;
    line-height:1!important;
    text-align:left!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.front-mode .gpRankingSection .gpRankKanji{margin-top:4px!important;font-size:8px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  body.front-mode .gpRankingSection .gpRankUsername{display:none!important}
  body.front-mode .gpRankingSection .gpRankScore,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankScore{
    width:62px!important;
    min-width:62px!important;
    justify-items:center!important;
    padding:8px 4px!important;
    border-top:0!important;
    text-align:center!important;
  }
  body.front-mode .gpRankingSection .gpRankScoreValue,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankScoreValue,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(1) .gpRankScoreValue{font-size:15px!important}

  /* Desktop-style premium frame applied to the complete mobile student dossier. */
  body:not(.front-mode) .mobileStudentDossier{
    position:relative!important;
    overflow:visible!important;
    margin-top:12px!important;
    padding:0!important;
    border:1px solid var(--border)!important;
    border-radius:26px!important;
    background:
      radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 38%),
      linear-gradient(145deg,rgba(15,15,18,.68),rgba(4,4,7,.72))!important;
    box-shadow:0 20px 64px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.035)!important;
    -webkit-backdrop-filter:blur(12px) saturate(1.08)!important;
    backdrop-filter:blur(12px) saturate(1.08)!important;
  }
  body:not(.front-mode) .mobileStudentDossier::before{
    content:""!important;
    position:absolute!important;
    inset:5px!important;
    z-index:0!important;
    border:1px solid color-mix(in srgb,var(--accent) 12%,rgba(255,255,255,.025))!important;
    border-radius:20px!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentSummary,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentDirect,
  body:not(.front-mode) .mobileStudentDossier>.mobileRecordSwipe{
    position:relative!important;
    z-index:2!important;
    width:auto!important;
    margin:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader{
    overflow:visible!important;
    border:0!important;
    border-radius:25px 25px 0 0!important;
    background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 5%,rgba(6,6,11,.52)),rgba(4,4,8,.28))!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentSummary,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentDirect{
    margin:0 10px!important;
    border-bottom:1px solid color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.035))!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileRecordSwipe{margin:0 10px 10px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectFinanceCard,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectCard,
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact,
  body:not(.front-mode) .mobileStudentDossier .mobileSwipeCallout{
    background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(3,3,8,.26))!important;
    -webkit-backdrop-filter:blur(9px) saturate(1.06)!important;
    backdrop-filter:blur(9px) saturate(1.06)!important;
  }

  /* Slightly larger House crest, still balanced with the name. */
  body:not(.front-mode) .mobileStudentDossier .mobileStudentSummaryTop{grid-template-columns:72px minmax(0,1fr) 56px!important;gap:10px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryHouseLogo{
    width:54px!important;
    height:54px!important;
    padding:5px!important;
    border-radius:16px!important;
    background:rgba(3,3,8,.34)!important;
    box-shadow:0 0 18px color-mix(in srgb,var(--accent) 18%,transparent),inset 0 1px 0 rgba(255,255,255,.05)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryHouseName{max-width:56px!important;font-size:5.5px!important}

  /* Small General menu anchored to the upper-right and always above header/search layers. */
  body:not(.front-mode) .mobileStudentDossier .m74HeaderActions,
  body:not(.front-mode) .mobileStudentDossier .m74HeaderGeneral{position:relative!important;z-index:500!important}
  body:not(.front-mode) .mobileStudentDossier .m74HeaderGeneralButton{min-width:70px!important;height:32px!important;padding:0 7px!important;font-size:6.5px!important}
  body:not(.front-mode) .mobileStudentDossier .m74HeaderGeneralPanel{
    position:fixed!important;
    top:68px!important;
    right:10px!important;
    left:auto!important;
    z-index:20000!important;
    width:184px!important;
    max-width:calc(100vw - 20px)!important;
    padding:5px!important;
    border-radius:13px!important;
    background:linear-gradient(145deg,rgba(8,8,13,.94),rgba(14,10,16,.94))!important;
    box-shadow:0 18px 46px rgba(0,0,0,.58),0 0 20px color-mix(in srgb,var(--accent) 10%,transparent),inset 0 1px 0 rgba(255,255,255,.045)!important;
    -webkit-backdrop-filter:blur(16px) saturate(1.12)!important;
    backdrop-filter:blur(16px) saturate(1.12)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74HeaderGeneralPanel button{padding:8px 9px!important;border-radius:9px!important}
  body:not(.front-mode) .mobileStudentDossier .m74HeaderGeneralPanel .generalMenuItemTitle{font-size:7px!important}
  body:not(.front-mode) .mobileStudentDossier .m74HeaderGeneralPanel .generalMenuItemText{margin-top:3px!important;font-size:5.4px!important;line-height:1.25!important}

  /* New Academic Records semester-by-semester pager. */
  #mobileAcademicMount,
  #mobileAcademicMount .m90AcademicApp{width:100%!important;min-width:0!important;background:transparent!important}
  #mobileAcademicMount .m90AcademicApp{display:grid!important;gap:10px!important}
  #mobileAcademicMount .m90AcademicHead{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:9px!important;
    align-items:end!important;
    padding:11px!important;
    border:1px solid color-mix(in srgb,var(--accent) 27%,rgba(255,255,255,.07))!important;
    border-radius:15px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(3,4,10,.22))!important;
    -webkit-backdrop-filter:blur(14px) saturate(1.14)!important;
    backdrop-filter:blur(14px) saturate(1.14)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 28px rgba(0,0,0,.20)!important;
  }
  #mobileAcademicMount .m90AcademicHeading>span{display:block!important;color:var(--accent)!important;font-size:5.2px!important;font-weight:900!important;letter-spacing:.15em!important}
  #mobileAcademicMount .m90AcademicHeading h3{margin:3px 0 0!important;color:var(--strong)!important;font-family:"Cinzel","League Spartan",serif!important;font-size:14px!important}
  #mobileAcademicMount .m90AcademicHeading p{margin:4px 0 0!important;color:var(--muted)!important;font-size:6px!important;line-height:1.35!important}
  #mobileAcademicMount .m90AcademicActions{display:grid!important;justify-items:end!important;gap:5px!important}
  #mobileAcademicMount .m90AcademicCount{padding:4px 7px!important;border:1px solid color-mix(in srgb,var(--accent) 26%,rgba(255,255,255,.06))!important;border-radius:999px!important;color:var(--accent)!important;background:rgba(0,0,0,.20)!important;font-size:5.4px!important;font-weight:900!important}
  #mobileAcademicMount .m90AcademicActions button{min-height:28px!important;padding:5px 8px!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:9px!important;color:#16110d!important;background:linear-gradient(135deg,var(--accent),var(--strong) 60%,var(--accent2))!important;font-size:5.2px!important;font-weight:900!important}
  #mobileAcademicMount .m90SemesterPager{
    overflow:hidden!important;
    padding:8px!important;
    border:1px solid color-mix(in srgb,var(--accent) 26%,rgba(255,255,255,.07))!important;
    border-radius:16px!important;
    background:linear-gradient(145deg,rgba(8,9,16,.35),rgba(3,4,10,.18))!important;
    -webkit-backdrop-filter:blur(15px) saturate(1.12)!important;
    backdrop-filter:blur(15px) saturate(1.12)!important;
    box-shadow:0 14px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.055)!important;
  }
  #mobileAcademicMount .m90SemesterNav{display:grid!important;grid-template-columns:58px minmax(0,1fr) 58px!important;gap:7px!important;align-items:center!important;margin-bottom:8px!important}
  #mobileAcademicMount .m90SemesterArrow{height:34px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;padding:0 6px!important;border:1px solid color-mix(in srgb,var(--accent) 28%,rgba(255,255,255,.065))!important;border-radius:10px!important;color:var(--accent)!important;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(0,0,0,.18))!important;font-size:5px!important;font-weight:900!important;cursor:pointer!important}
  #mobileAcademicMount .m90SemesterArrow b{font-size:15px!important;line-height:1!important}
  #mobileAcademicMount .m90SemesterArrow:disabled{opacity:.28!important;cursor:default!important}
  #mobileAcademicMount .m90SemesterNavCopy{min-width:0!important;text-align:center!important}
  #mobileAcademicMount .m90SemesterState{display:block!important;color:var(--accent)!important;font-size:4.8px!important;font-weight:900!important;letter-spacing:.13em!important}
  #mobileAcademicMount .m90SemesterCurrent{display:block!important;margin-top:2px!important;color:var(--strong)!important;font-size:11px!important;font-weight:900!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #mobileAcademicMount .m90SemesterCounter{display:block!important;margin-top:2px!important;color:var(--muted)!important;font-size:5.5px!important}
  #mobileAcademicMount .m90SemesterViewport{min-width:0!important;outline:none!important;touch-action:pan-y!important}
  #mobileAcademicMount .m90SemesterLive{min-width:0!important}
  #mobileAcademicMount .m90SemesterCard{
    position:relative!important;
    overflow:hidden!important;
    min-width:0!important;
    border:1px solid color-mix(in srgb,var(--accent) 28%,rgba(255,255,255,.075))!important;
    border-radius:14px!important;
    background:
      linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.012) 38%,rgba(3,4,10,.30)),
      color-mix(in srgb,var(--accent) 4%,rgba(4,5,11,.34))!important;
    -webkit-backdrop-filter:blur(13px) saturate(1.15)!important;
    backdrop-filter:blur(13px) saturate(1.15)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 24px color-mix(in srgb,var(--accent) 5%,transparent)!important;
    animation:m90SemesterArrive .28s cubic-bezier(.2,.75,.24,1) both!important;
  }
  #mobileAcademicMount .m90SemesterCard.from-older{--m90-shift:18px}
  #mobileAcademicMount .m90SemesterCard.from-newer{--m90-shift:-18px}
  #mobileAcademicMount .m90SemesterCard.is-initial{--m90-shift:0px}
  @keyframes m90SemesterArrive{from{opacity:0;transform:translate3d(var(--m90-shift,0),0,0) scale(.992)}to{opacity:1;transform:none}}
  #mobileAcademicMount .m90SemesterHead{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:10px 11px!important;border-bottom:1px solid rgba(255,255,255,.055)!important;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent)!important}
  #mobileAcademicMount .m90SemesterHead span{display:block!important;color:var(--muted)!important;font-size:4.7px!important;font-weight:900!important;letter-spacing:.12em!important}
  #mobileAcademicMount .m90SemesterHead strong{display:block!important;margin-top:2px!important;color:var(--strong)!important;font-size:12px!important;font-weight:900!important}
  #mobileAcademicMount .m90Nensei{padding:5px 8px!important;border:1px solid color-mix(in srgb,var(--accent) 30%,rgba(255,255,255,.06))!important;border-radius:999px!important;color:var(--accent)!important;background:rgba(0,0,0,.18)!important;font-size:5.8px!important;font-weight:900!important;white-space:nowrap!important}
  #mobileAcademicMount .m90MiniTitle{padding:9px 11px 6px!important;color:var(--accent)!important;font-size:5.5px!important;font-weight:900!important;letter-spacing:.1em!important;text-transform:uppercase!important}
  #mobileAcademicMount .m90Participation{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;margin:0 10px 4px!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.055)!important;border-radius:10px!important;background:rgba(3,4,10,.25)!important}
  #mobileAcademicMount .m90Participation>div{min-width:0!important;padding:7px 3px!important;text-align:center!important}
  #mobileAcademicMount .m90Participation>div+div{border-left:1px solid rgba(255,255,255,.05)!important}
  #mobileAcademicMount .m90Participation span{display:block!important;color:var(--strong)!important;font-size:4.8px!important}
  #mobileAcademicMount .m90Participation strong{display:block!important;margin-top:3px!important;font-size:4px!important;line-height:1.15!important}
  #mobileAcademicMount .m90Participation .yes strong{color:#bff4d5!important}
  #mobileAcademicMount .m90Participation .no strong{color:#f2aeb7!important}
  #mobileAcademicMount .m90Participation .locked strong{color:var(--muted)!important}
  #mobileAcademicMount .m90Subjects{display:grid!important;margin:0 10px 5px!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.055)!important;border-radius:10px!important;background:rgba(3,4,10,.25)!important}
  #mobileAcademicMount .m90SubjectHeader,
  #mobileAcademicMount .m90SubjectRow{display:grid!important;grid-template-columns:minmax(0,1fr) 54px 61px!important;gap:4px!important;align-items:center!important}
  #mobileAcademicMount .m90SubjectHeader{min-height:26px!important;padding:0 7px!important;border-bottom:1px solid rgba(255,255,255,.05)!important;color:var(--muted)!important;font-size:4.6px!important;font-weight:900!important}
  #mobileAcademicMount .m90SubjectHeader span:nth-child(n+2){text-align:center!important}
  #mobileAcademicMount .m90SubjectRow{min-height:39px!important;padding:6px 7px!important;border-bottom:1px solid rgba(255,255,255,.045)!important}
  #mobileAcademicMount .m90SubjectRow:last-child{border-bottom:0!important}
  #mobileAcademicMount .m90SubjectRow>strong{min-width:0!important;color:var(--strong)!important;font-size:7px!important;line-height:1.22!important;overflow-wrap:anywhere!important}
  #mobileAcademicMount .m90SubjectRow>b{height:25px!important;display:grid!important;place-items:center!important;border-left:1px solid color-mix(in srgb,var(--accent) 15%,rgba(255,255,255,.04))!important;color:var(--accent)!important;font-size:8px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #mobileAcademicMount .m90SubjectRow>b.jp{font-size:8.4px!important}
  #mobileAcademicMount .m90SemesterFoot{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 72px!important;gap:6px!important;padding:8px 10px 10px!important}
  #mobileAcademicMount .m90SemesterFoot>div{min-width:0!important;padding:6px 7px!important;border:1px solid rgba(255,255,255,.055)!important;border-radius:9px!important;background:rgba(3,4,10,.24)!important}
  #mobileAcademicMount .m90SemesterFoot span{display:block!important;color:var(--muted)!important;font-size:4.6px!important;text-transform:uppercase!important}
  #mobileAcademicMount .m90SemesterFoot strong{display:block!important;margin-top:3px!important;color:var(--strong)!important;font-size:6.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #mobileAcademicMount .m90SemesterFoot .promoted{color:#bff4d5!important}
  #mobileAcademicMount .m90SemesterFoot .retained{color:#ffb3bb!important}
  #mobileAcademicMount .m90SemesterFoot .rank1{color:#f4d66f!important}
  #mobileAcademicMount .m90SemesterFoot .rank2{color:#f3b6d1!important}
  #mobileAcademicMount .m90SemesterFoot button{min-height:35px!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:9px!important;color:#15100d!important;background:linear-gradient(135deg,var(--accent),var(--strong) 60%,var(--accent2))!important;font-size:5.2px!important;font-weight:900!important}
  #mobileAcademicMount .m90SemesterHint{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin-top:7px!important;padding:0 3px!important;color:var(--muted)!important;font-size:4.6px!important}
  #mobileAcademicMount .m90SemesterHint b{color:var(--accent)!important;font-size:4.8px!important;letter-spacing:.05em!important}
  #mobileAcademicMount .m90DevotedDetails{display:grid!important;gap:7px!important;padding:10px!important}
  #mobileAcademicMount .m90DevotedScore,
  #mobileAcademicMount .m90DevotedField,
  #mobileAcademicMount .m90DevotedFile{padding:8px!important;border:1px solid rgba(255,255,255,.055)!important;border-radius:10px!important;background:rgba(3,4,10,.25)!important}
  #mobileAcademicMount .m90DevotedDetails span{display:block!important;color:var(--muted)!important;font-size:5px!important}
  #mobileAcademicMount .m90DevotedDetails strong{display:block!important;margin-top:4px!important;color:var(--strong)!important;font-size:8px!important;line-height:1.3!important}
  #mobileAcademicMount .m90DevotedScore strong{color:var(--accent)!important;font-size:18px!important}
  #mobileAcademicMount .m90DevotedFile button{margin-top:7px!important;min-height:30px!important;padding:5px 9px!important;border:0!important;border-radius:8px!important;color:#15100d!important;background:linear-gradient(135deg,var(--accent),var(--strong) 60%,var(--accent2))!important;font-size:5.5px!important;font-weight:900!important}
}

@media (max-width:390px){
  body.front-mode .gpRankingSection .gpArena>.gpRankCard{grid-template-columns:74px minmax(0,1fr) 58px!important;gap:7px!important}
  body.front-mode .gpRankingSection .gpRankLeft{width:74px!important;grid-template-columns:20px 48px!important;gap:6px!important}
  body.front-mode .gpRankingSection .gpRankNo{width:20px!important;min-width:20px!important;height:20px!important;min-height:20px!important;line-height:20px!important;font-size:6.5px!important}
  body.front-mode .gpRankingSection .gpRankAvatar,
  body.front-mode .gpRankingSection .gpRankAvatarFrame{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileStudentSummaryTop{grid-template-columns:70px minmax(0,1fr) 52px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryHouseLogo{width:50px!important;height:50px!important}
  #mobileAcademicMount .m90SemesterNav{grid-template-columns:54px minmax(0,1fr) 54px!important}
  #mobileAcademicMount .m90SubjectHeader,
  #mobileAcademicMount .m90SubjectRow{grid-template-columns:minmax(0,1fr) 50px 57px!important}
}

/* V90.1 mobile General dropdown stacking correction. */
@media (max-width:768px){
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader{isolation:isolate!important;overflow:visible!important}
  body:not(.front-mode) .mobileStudentDossier .m74HeaderActions,
  body:not(.front-mode) .mobileStudentDossier .m74HeaderGeneral,
  body:not(.front-mode) .mobileStudentDossier .m74HeaderGeneral.open{z-index:30000!important}
  body:not(.front-mode) .mobileStudentDossier .m74HeaderGeneralPanel:not(.hidden){
    display:block!important;
    position:absolute!important;
    top:38px!important;
    right:0!important;
    left:auto!important;
    z-index:31000!important;
    width:184px!important;
    max-width:calc(100vw - 24px)!important;
    background:linear-gradient(145deg,rgba(8,8,13,.985),rgba(14,10,16,.985))!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74HeaderSearch{position:relative!important;z-index:10!important}
}
@media (max-width:768px){
  body:not(.front-mode) .mobileStudentDossier .m74HeaderGeneralPanel:not(.hidden){
    top:80px!important;
    width:176px!important;
  }
}
@media (max-width:768px){
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader{z-index:1000!important}
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentSummary,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentDirect,
  body:not(.front-mode) .mobileStudentDossier>.mobileRecordSwipe{z-index:2!important}
}


/* =====================================================================
   V91 — MOBILE TRANSPARENCY / DESKTOP PHOTO FRAME / PREMIUM EMPTY MOTIFS
   Mobile-only visual patch. Desktop, data logic, academic paging, PDF/PNG,
   GP ranking and the remaining project structure are intentionally untouched.
   ===================================================================== */
@media (max-width:768px){
  /* Let the page artwork and falling ornaments breathe through the dossier. */
  body:not(.front-mode) .mobileStudentDossier{
    background:
      radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 42%),
      linear-gradient(145deg,rgba(12,12,19,.34),rgba(3,3,8,.22))!important;
    box-shadow:0 20px 58px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.04)!important;
    -webkit-backdrop-filter:blur(8px) saturate(1.04)!important;
    backdrop-filter:blur(8px) saturate(1.04)!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader{
    background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 4%,rgba(7,7,13,.29)),rgba(3,3,8,.12))!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentSummary,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentDirect,
  body:not(.front-mode) .mobileStudentDossier>.mobileRecordSwipe,
  body:not(.front-mode) .mobileStudentDossier .mobileRecordPage,
  body:not(.front-mode) .mobileStudentDossier .mobileRecordPageScroll,
  body:not(.front-mode) .mobileStudentDossier .mobileRecordMount{
    background:transparent!important;
  }

  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectFinanceCard,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectCard,
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact,
  body:not(.front-mode) .mobileStudentDossier .mobileSwipeCallout{
    background:
      linear-gradient(145deg,rgba(255,255,255,.035),rgba(3,3,8,.14))!important;
    -webkit-backdrop-filter:blur(7px) saturate(1.04)!important;
    backdrop-filter:blur(7px) saturate(1.04)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 10px 24px rgba(0,0,0,.12)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMediaPreview{
    background:rgba(0,0,0,.16)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74RecordHead,
  body:not(.front-mode) .mobileStudentDossier .m74PointTotals,
  body:not(.front-mode) .mobileStudentDossier .m74PointActivity,
  body:not(.front-mode) .mobileStudentDossier .m74PointRow{
    background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(3,3,8,.13))!important;
    -webkit-backdrop-filter:blur(7px) saturate(1.03)!important;
    backdrop-filter:blur(7px) saturate(1.03)!important;
  }

  /* Return the mobile portrait to the same clean frame language as desktop. */
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryPortrait{
    overflow:hidden!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid var(--border)!important;
    border-radius:18px!important;
    background:#050608!important;
    box-shadow:inset 0 0 30px color-mix(in srgb,var(--accent) 15%,transparent)!important;
    outline:0!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryPortrait::before,
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryPortrait::after{
    display:none!important;
    content:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryPortrait img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:50% 17%!important;
    transform:scale(1.22)!important;
    transform-origin:50% 17%!important;
    filter:none!important;
  }

  /* Subtle ornamental fillers for cards whose values naturally leave open space. */
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard:nth-child(2),
  body:not(.front-mode) .mobileStudentDossier .mobileDirectFinanceCard{
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard:nth-child(2)>*,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectFinanceCard>*{
    position:relative!important;
    z-index:2!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard:nth-child(2)::before{
    content:""!important;
    position:absolute!important;
    width:52px!important;
    height:52px!important;
    right:8px!important;
    top:50%!important;
    z-index:0!important;
    border:1px solid color-mix(in srgb,var(--accent) 24%,transparent)!important;
    border-radius:50%!important;
    transform:translateY(-50%)!important;
    background:
      radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent) 0 2px,transparent 3px),
      linear-gradient(90deg,transparent 49%,color-mix(in srgb,var(--accent) 16%,transparent) 50%,transparent 51%),
      linear-gradient(transparent 49%,color-mix(in srgb,var(--accent) 16%,transparent) 50%,transparent 51%)!important;
    box-shadow:0 0 22px color-mix(in srgb,var(--accent) 10%,transparent),inset 0 0 18px color-mix(in srgb,var(--accent) 6%,transparent)!important;
    opacity:.48!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard:nth-child(2)::after{
    content:""!important;
    position:absolute!important;
    width:26px!important;
    height:26px!important;
    right:21px!important;
    top:50%!important;
    z-index:0!important;
    border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)!important;
    transform:translateY(-50%) rotate(45deg)!important;
    opacity:.46!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileDirectFinanceCard::before{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    z-index:0!important;
    width:88px!important;
    height:88px!important;
    border:1px solid color-mix(in srgb,var(--accent) 19%,transparent)!important;
    border-radius:22px!important;
    transform:translate(-50%,-50%) rotate(45deg)!important;
    box-shadow:0 0 28px color-mix(in srgb,var(--accent) 8%,transparent),inset 0 0 22px color-mix(in srgb,var(--accent) 6%,transparent)!important;
    opacity:.38!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileDirectFinanceCard::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    z-index:0!important;
    width:118px!important;
    height:1px!important;
    transform:translate(-50%,-50%)!important;
    background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 18%,transparent),transparent)!important;
    box-shadow:0 -18px 0 color-mix(in srgb,var(--accent) 7%,transparent),0 18px 0 color-mix(in srgb,var(--accent) 7%,transparent)!important;
    opacity:.58!important;
    pointer-events:none!important;
  }

  /* Academic surfaces remain readable, but no longer hide the falling ornaments. */
  #mobileAcademicMount .m90AcademicHead{
    background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(3,4,10,.13))!important;
    -webkit-backdrop-filter:blur(9px) saturate(1.08)!important;
    backdrop-filter:blur(9px) saturate(1.08)!important;
  }
  #mobileAcademicMount .m90SemesterPager{
    background:linear-gradient(145deg,rgba(8,9,16,.19),rgba(3,4,10,.08))!important;
    -webkit-backdrop-filter:blur(9px) saturate(1.07)!important;
    backdrop-filter:blur(9px) saturate(1.07)!important;
  }
  #mobileAcademicMount .m90SemesterCard:not(.m90DevotedCard){
    background:
      linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.008) 40%,rgba(3,4,10,.17)),
      color-mix(in srgb,var(--accent) 3%,rgba(4,5,11,.14))!important;
    -webkit-backdrop-filter:blur(9px) saturate(1.10)!important;
    backdrop-filter:blur(9px) saturate(1.10)!important;
  }
  #mobileAcademicMount .m90Participation,
  #mobileAcademicMount .m90Subjects,
  #mobileAcademicMount .m90SemesterFoot>div{
    background:rgba(3,4,10,.15)!important;
  }

  /* Restore the exact ceremonial artwork used by Devoted Student on desktop. */
  #mobileAcademicMount .m90DevotedCard{
    position:relative!important;
    isolation:isolate!important;
    background:
      linear-gradient(90deg,rgba(4,4,7,.78) 0%,rgba(4,4,7,.60) 34%,rgba(4,4,7,.32) 58%,rgba(4,4,7,.10) 78%,rgba(4,4,7,.018) 100%),
      linear-gradient(135deg,color-mix(in srgb,var(--accent) 11%,transparent),transparent 54%,color-mix(in srgb,var(--accent2) 8%,transparent)),
      url("https://drive.google.com/thumbnail?id=1K-2TytITfiC3OysGOO_1L5yn4iRGiAsT&sz=w2200") right center/cover no-repeat!important;
    border-color:color-mix(in srgb,var(--accent) 54%,rgba(255,255,255,.08))!important;
    box-shadow:inset 3px 0 0 var(--accent),0 14px 34px rgba(0,0,0,.24),0 0 28px color-mix(in srgb,var(--accent) 11%,transparent)!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  #mobileAcademicMount .m90DevotedCard::before{
    content:""!important;
    position:absolute!important;
    inset:6px!important;
    z-index:0!important;
    border:1px solid color-mix(in srgb,var(--accent) 15%,transparent)!important;
    border-radius:10px!important;
    pointer-events:none!important;
  }
  #mobileAcademicMount .m90DevotedCard>.m90SemesterHead,
  #mobileAcademicMount .m90DevotedCard>.m90DevotedDetails{
    position:relative!important;
    z-index:1!important;
  }
  #mobileAcademicMount .m90DevotedCard .m90SemesterHead{
    background:linear-gradient(90deg,rgba(4,4,7,.64),rgba(4,4,7,.24) 72%,rgba(4,4,7,.06))!important;
  }
  #mobileAcademicMount .m90DevotedScore,
  #mobileAcademicMount .m90DevotedField,
  #mobileAcademicMount .m90DevotedFile{
    background:linear-gradient(135deg,rgba(5,5,9,.44),rgba(5,5,9,.16))!important;
    -webkit-backdrop-filter:blur(5px)!important;
    backdrop-filter:blur(5px)!important;
  }
}

/* =====================================================================
   V92 — MOBILE PORTRAIT FRAME + REFINED FILIGREE DETAILS
   Surgical mobile-only correction. Desktop geometry, data logic, ranking,
   academic paging, Devoted Student artwork and PDF/PNG remain untouched.
   ===================================================================== */
@media (max-width:768px){
  /* Remove the unfinished vertical accent rail beside the student data. */
  body:not(.front-mode) .mobileStudentDossier::after{
    display:none!important;
    content:none!important;
    width:0!important;
    height:0!important;
    background:none!important;
    box-shadow:none!important;
  }

  /* Clean House-led frame: simple silhouette, precise edge, soft depth. */
  body:not(.front-mode) .mobileStudentDossier .mobileStudentSummaryTop{
    grid-template-columns:74px minmax(0,1fr) 44px!important;
    gap:9px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryPortrait{
    position:relative!important;
    isolation:isolate!important;
    width:74px!important;
    height:74px!important;
    min-width:74px!important;
    min-height:74px!important;
    padding:0!important;
    overflow:hidden!important;
    border:1px solid color-mix(in srgb,var(--accent) 62%,rgba(255,255,255,.22))!important;
    border-radius:16px!important;
    outline:1px solid rgba(255,255,255,.035)!important;
    outline-offset:2px!important;
    background:color-mix(in srgb,var(--accent) 5%,rgba(3,4,8,.90))!important;
    box-shadow:
      0 11px 24px rgba(0,0,0,.40),
      0 0 18px color-mix(in srgb,var(--accent) 20%,transparent),
      inset 0 0 0 1px rgba(255,255,255,.055),
      inset 0 -14px 24px rgba(0,0,0,.16)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryPortrait::before,
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryPortrait::after{
    display:none!important;
    content:none!important;
    background:none!important;
    box-shadow:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryPortrait img{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    z-index:1!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:50% 16%!important;
    border:0!important;
    border-radius:15px!important;
    clip-path:none!important;
    transform:scale(1.20)!important;
    transform-origin:50% 16%!important;
    filter:saturate(1.025) contrast(1.015)!important;
  }

  /* Replace the old circles/diamonds with subtle engraved filigree. */
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard:nth-child(2),
  body:not(.front-mode) .mobileStudentDossier .mobileDirectFinanceCard{
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard:nth-child(2)>*,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectFinanceCard>*{
    position:relative!important;
    z-index:2!important;
  }

  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard:nth-child(2)::before{
    content:""!important;
    position:absolute!important;
    right:5px!important;
    top:50%!important;
    z-index:0!important;
    width:88px!important;
    height:48px!important;
    border:0!important;
    border-radius:0!important;
    transform:translateY(-50%)!important;
    background:color-mix(in srgb,var(--accent) 72%,var(--strong))!important;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Cg fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 32C18 9 34 9 47 32s29 23 43 0c10-17 20-18 26-8'/%3E%3Cpath d='M15 32c10-14 20-14 31 0s21 14 32 0c8-10 15-11 24-3'/%3E%3Cpath d='M87 20v24M75 32h24'/%3E%3Cpath d='M87 25l7 7-7 7-7-7z'/%3E%3Ccircle cx='87' cy='32' r='13'/%3E%3C/g%3E%3C/svg%3E")!important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Cg fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 32C18 9 34 9 47 32s29 23 43 0c10-17 20-18 26-8'/%3E%3Cpath d='M15 32c10-14 20-14 31 0s21 14 32 0c8-10 15-11 24-3'/%3E%3Cpath d='M87 20v24M75 32h24'/%3E%3Cpath d='M87 25l7 7-7 7-7-7z'/%3E%3Ccircle cx='87' cy='32' r='13'/%3E%3C/g%3E%3C/svg%3E")!important;
    -webkit-mask-repeat:no-repeat!important;
    mask-repeat:no-repeat!important;
    -webkit-mask-position:center!important;
    mask-position:center!important;
    -webkit-mask-size:contain!important;
    mask-size:contain!important;
    opacity:.17!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard:nth-child(2)::after{
    content:""!important;
    position:absolute!important;
    right:-12px!important;
    top:-22px!important;
    z-index:0!important;
    width:92px!important;
    height:92px!important;
    border:0!important;
    border-radius:50%!important;
    transform:none!important;
    background:radial-gradient(circle,color-mix(in srgb,var(--accent) 10%,transparent),transparent 68%)!important;
    opacity:.72!important;
    pointer-events:none!important;
  }

  body:not(.front-mode) .mobileStudentDossier .mobileDirectFinanceCard::before{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    z-index:0!important;
    width:138px!important;
    height:54px!important;
    border:0!important;
    border-radius:0!important;
    transform:translate(-50%,-50%)!important;
    background:color-mix(in srgb,var(--accent) 66%,var(--strong))!important;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 80'%3E%3Cg fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 40c24-30 49-30 73 0s49 30 74 0 49-30 74 0c13 16 24 16 33 0'/%3E%3Cpath d='M25 40c18-20 35-20 53 0s35 20 52 0 35-20 52 0 35 20 53 0'/%3E%3Cpath d='M130 13l8 18 19 9-19 9-8 18-8-18-19-9 19-9z'/%3E%3Ccircle cx='130' cy='40' r='22'/%3E%3Cpath d='M111 21c12 7 26 7 38 0M111 59c12-7 26-7 38 0'/%3E%3C/g%3E%3C/svg%3E")!important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 80'%3E%3Cg fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 40c24-30 49-30 73 0s49 30 74 0 49-30 74 0c13 16 24 16 33 0'/%3E%3Cpath d='M25 40c18-20 35-20 53 0s35 20 52 0 35-20 52 0 35 20 53 0'/%3E%3Cpath d='M130 13l8 18 19 9-19 9-8 18-8-18-19-9 19-9z'/%3E%3Ccircle cx='130' cy='40' r='22'/%3E%3Cpath d='M111 21c12 7 26 7 38 0M111 59c12-7 26-7 38 0'/%3E%3C/g%3E%3C/svg%3E")!important;
    -webkit-mask-repeat:no-repeat!important;
    mask-repeat:no-repeat!important;
    -webkit-mask-position:center!important;
    mask-position:center!important;
    -webkit-mask-size:contain!important;
    mask-size:contain!important;
    box-shadow:none!important;
    opacity:.13!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileDirectFinanceCard::after{
    content:""!important;
    position:absolute!important;
    left:22%!important;
    right:22%!important;
    top:50%!important;
    z-index:0!important;
    width:auto!important;
    height:28px!important;
    border:0!important;
    border-radius:999px!important;
    transform:translateY(-50%)!important;
    background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 8%,transparent),transparent 70%)!important;
    box-shadow:none!important;
    opacity:.76!important;
    pointer-events:none!important;
  }
}


/* =====================================================================
   V93 — RECOGNISABLE HOUSE MASCOTS / CLIPPED MOBILE MASTHEAD /
         DEVOTED STUDENT TEXT-SAFE ARTWORK
   The header and Devoted changes are mobile-only. Desktop layout and all
   data, ranking, academic, PDF/PNG and non-requested structures are intact.
   ===================================================================== */

/* SVG clarity on both desktop and mobile mascot overlays. */
body:not(.front-mode) .dormMascotBody svg{
  shape-rendering:geometricPrecision;
  text-rendering:geometricPrecision;
}
body:not(.front-mode) .dormMascotStage.mascot-yamiyo .dormMascotBody{
  filter:drop-shadow(0 0 8px rgba(158,78,198,.30));
}
body:not(.front-mode) .dormMascotStage.mascot-kosei .dormMascotBody{
  filter:drop-shadow(0 0 8px rgba(223,188,79,.28));
}

@media (max-width:768px){
  /* Keep dropdown freedom, but clip every artwork pixel to the inset masthead. */
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader{
    overflow:visible!important;
    isolation:isolate!important;
    background:
      linear-gradient(180deg,color-mix(in srgb,var(--accent) 5%,rgba(6,6,12,.76)),rgba(3,3,8,.58))!important;
    border-color:color-mix(in srgb,var(--accent) 58%,rgba(255,255,255,.12))!important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.022),
      0 0 20px color-mix(in srgb,var(--accent) 22%,transparent),
      0 14px 32px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.075),
      inset 0 -18px 34px rgba(0,0,0,.22)!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderArt,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderShade{
    position:absolute!important;
    inset:1px!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    border-radius:16px!important;
    transform:none!important;
    transform-origin:center!important;
    clip-path:inset(0 round 16px)!important;
    -webkit-clip-path:inset(0 round 16px)!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderArt{
    z-index:0!important;
    opacity:.92!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-position:center 30%!important;
    filter:saturate(.88) contrast(1.07) brightness(.60)!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderShade{
    z-index:1!important;
    background:
      linear-gradient(90deg,rgba(3,3,8,.88) 0%,rgba(3,3,8,.62) 40%,rgba(3,3,8,.30) 72%,rgba(3,3,8,.48) 100%),
      linear-gradient(180deg,rgba(2,2,7,.15) 0%,rgba(3,3,8,.40) 54%,rgba(3,3,8,.92) 100%),
      radial-gradient(circle at 72% 28%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 46%)!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),inset 0 -30px 45px rgba(0,0,0,.26)!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader::after{
    inset:4px!important;
    z-index:6!important;
    border-radius:14px!important;
    border-color:color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.045))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTop,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSearch{
    position:relative!important;
    z-index:8!important;
  }

  /* Keep ceremonial art visible on the right, and reserve a calm dark field for text. */
  #mobileAcademicMount .m90DevotedCard{
    background:
      linear-gradient(90deg,rgba(3,3,7,.95) 0%,rgba(3,3,7,.92) 36%,rgba(3,3,7,.78) 55%,rgba(3,3,7,.45) 72%,rgba(3,3,7,.18) 100%),
      linear-gradient(180deg,rgba(3,3,7,.24) 0%,rgba(3,3,7,.30) 58%,rgba(3,3,7,.70) 100%),
      url("https://drive.google.com/thumbnail?id=1K-2TytITfiC3OysGOO_1L5yn4iRGiAsT&sz=w2200") 86% center/auto 132% no-repeat,
      rgba(4,4,8,.92)!important;
    overflow:hidden!important;
  }
  #mobileAcademicMount .m90DevotedCard::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    pointer-events:none!important;
    background:
      radial-gradient(circle at 18% 20%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 32%),
      linear-gradient(105deg,rgba(0,0,0,.16),transparent 62%)!important;
  }
  #mobileAcademicMount .m90DevotedCard>.m90SemesterHead,
  #mobileAcademicMount .m90DevotedCard>.m90DevotedDetails{
    z-index:2!important;
  }
  #mobileAcademicMount .m90DevotedCard .m90SemesterHead{
    background:linear-gradient(90deg,rgba(3,3,8,.90),rgba(3,3,8,.62) 68%,rgba(3,3,8,.24))!important;
    text-shadow:0 1px 8px rgba(0,0,0,.92)!important;
  }
  #mobileAcademicMount .m90DevotedDetails{
    position:relative!important;
    background:linear-gradient(90deg,rgba(2,2,6,.42),rgba(2,2,6,.14) 70%,transparent)!important;
  }
  #mobileAcademicMount .m90DevotedScore{
    background:linear-gradient(145deg,rgba(4,4,9,.88),rgba(8,7,13,.70))!important;
    border-color:color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.08))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 8px 20px rgba(0,0,0,.26),0 0 16px color-mix(in srgb,var(--accent) 8%,transparent)!important;
    -webkit-backdrop-filter:blur(9px) saturate(1.08)!important;
    backdrop-filter:blur(9px) saturate(1.08)!important;
  }
  #mobileAcademicMount .m90DevotedField,
  #mobileAcademicMount .m90DevotedFile{
    background:linear-gradient(145deg,rgba(4,4,9,.78),rgba(5,5,10,.54))!important;
    border-color:rgba(255,255,255,.075)!important;
    -webkit-backdrop-filter:blur(8px) saturate(1.06)!important;
    backdrop-filter:blur(8px) saturate(1.06)!important;
  }
  #mobileAcademicMount .m90DevotedDetails span,
  #mobileAcademicMount .m90DevotedDetails strong{
    text-shadow:0 1px 7px rgba(0,0,0,.96),0 0 12px rgba(0,0,0,.72)!important;
  }
  #mobileAcademicMount .m90DevotedScore strong{
    color:var(--strong)!important;
    text-shadow:0 0 14px color-mix(in srgb,var(--accent) 34%,transparent),0 2px 8px rgba(0,0,0,.98)!important;
  }
}

/* V93.1 — reserve an artwork gallery strip on the right of Devoted Student. */
@media (max-width:768px){
  #mobileAcademicMount .m90DevotedDetails{
    padding:10px clamp(58px,20vw,76px) 10px 10px!important;
    background:linear-gradient(90deg,rgba(2,2,6,.46),rgba(2,2,6,.18) 76%,transparent 100%)!important;
  }
}

/* =====================================================================
   V94 — CLEAN MOBILE STUDENT MASTHEAD / COMPACT HOME HERO /
         MOBILE-FRIENDLY GENERAL PREVIEWS
   All changes below are mobile-only. Desktop geometry and non-requested
   data/academic/ranking/export behavior remain untouched.
   ===================================================================== */
@media (max-width:768px){
  /* ---------------------------------------------------------------
     1. STUDENT DATA HEADER — calmer, balanced and precisely aligned.
     Artwork is limited to a softly masked right-side accent so no raw
     image edge can escape the masthead.
     --------------------------------------------------------------- */
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader{
    min-height:126px!important;
    padding:11px 12px 10px!important;
    overflow:visible!important;
    isolation:isolate!important;
    border:0!important;
    border-radius:25px 25px 0 0!important;
    background:
      radial-gradient(circle at 78% 10%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 38%),
      linear-gradient(145deg,rgba(8,8,14,.92),rgba(4,4,9,.74))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055),inset 0 -1px 0 color-mix(in srgb,var(--accent) 18%,transparent)!important;
    -webkit-backdrop-filter:blur(14px) saturate(1.06)!important;
    backdrop-filter:blur(14px) saturate(1.06)!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderArt{
    display:block!important;
    position:absolute!important;
    inset:1px 1px 1px auto!important;
    z-index:0!important;
    width:48%!important;
    height:auto!important;
    margin:0!important;
    border-radius:0 23px 0 0!important;
    opacity:.42!important;
    background-size:cover!important;
    background-position:68% 30%!important;
    background-repeat:no-repeat!important;
    filter:saturate(.82) contrast(1.03) brightness(.58)!important;
    transform:none!important;
    clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)!important;
    -webkit-clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.32) 20%,#000 52%,#000 100%)!important;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.32) 20%,#000 52%,#000 100%)!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderShade{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    border-radius:25px 25px 0 0!important;
    transform:none!important;
    clip-path:none!important;
    -webkit-clip-path:none!important;
    background:
      linear-gradient(90deg,rgba(4,4,10,.96) 0%,rgba(4,4,10,.88) 47%,rgba(4,4,10,.54) 70%,rgba(4,4,10,.48) 100%),
      linear-gradient(180deg,rgba(255,255,255,.025),transparent 34%,rgba(0,0,0,.22))!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader::after{
    content:""!important;
    position:absolute!important;
    inset:7px 8px 6px!important;
    z-index:2!important;
    border:1px solid color-mix(in srgb,var(--accent) 17%,rgba(255,255,255,.035))!important;
    border-radius:17px 17px 10px 10px!important;
    background:none!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.028)!important;
    pointer-events:none!important;
  }

  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTop{
    position:relative!important;
    z-index:8!important;
    display:grid!important;
    grid-template-columns:88px minmax(0,1fr) 88px!important;
    align-items:center!important;
    gap:0!important;
    width:100%!important;
    min-height:38px!important;
    padding:0 1px!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderBrand{
    display:contents!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal{
    grid-column:1!important;
    justify-self:center!important;
    width:35px!important;
    height:35px!important;
    flex-basis:35px!important;
    padding:4px!important;
    border:1px solid color-mix(in srgb,var(--accent) 22%,rgba(255,255,255,.045))!important;
    border-radius:11px!important;
    background:rgba(2,2,7,.36)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 13px color-mix(in srgb,var(--accent) 9%,transparent)!important;
    -webkit-backdrop-filter:blur(9px)!important;
    backdrop-filter:blur(9px)!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTitle{
    grid-column:2!important;
    min-width:0!important;
    display:grid!important;
    justify-items:center!important;
    align-content:center!important;
    gap:2px!important;
    padding:0 4px!important;
    text-align:center!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTitle>span{
    width:100%!important;
    color:var(--accent)!important;
    font-size:6.2px!important;
    font-weight:800!important;
    letter-spacing:.13em!important;
    line-height:1!important;
    text-align:center!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTitle h2{
    width:100%!important;
    margin:0!important;
    color:var(--strong)!important;
    font-family:"Cinzel","League Spartan",serif!important;
    font-size:11.4px!important;
    font-weight:800!important;
    line-height:1.06!important;
    letter-spacing:.025em!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    text-shadow:0 2px 10px rgba(0,0,0,.38)!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderActions{
    grid-column:3!important;
    position:relative!important;
    z-index:30000!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    width:88px!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderHome{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
    border-radius:10px!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderHome svg{width:13px!important;height:13px!important}
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderGeneralButton{
    width:54px!important;
    min-width:54px!important;
    height:30px!important;
    min-height:30px!important;
    padding:0 5px 0 7px!important;
    border-radius:10px!important;
    font-size:5.8px!important;
    letter-spacing:.035em!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderChevron{
    width:13px!important;
    height:13px!important;
    font-size:8px!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSearch{
    position:relative!important;
    z-index:8!important;
    width:min(246px,72vw)!important;
    max-width:246px!important;
    grid-template-columns:minmax(0,1fr) 68px!important;
    gap:5px!important;
    margin:9px auto 0!important;
    padding:4px!important;
    border:1px solid color-mix(in srgb,var(--accent) 17%,rgba(255,255,255,.035))!important;
    border-radius:13px!important;
    background:rgba(2,2,7,.34)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 9px 20px rgba(0,0,0,.15)!important;
    -webkit-backdrop-filter:blur(11px)!important;
    backdrop-filter:blur(11px)!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSearch input,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSearch button{
    height:32px!important;
    min-height:32px!important;
    border-radius:9px!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSearch input{
    min-width:0!important;
    padding:0 9px!important;
    background:rgba(0,0,0,.22)!important;
    font-size:7.2px!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSearch button{
    padding:0 5px!important;
    font-size:5.2px!important;
    letter-spacing:.025em!important;
  }

  /* ---------------------------------------------------------------
     2. HOME MOBILE HERO — no background artwork, centred crest restored,
     shorter vertical footprint and centred visual weight.
     --------------------------------------------------------------- */
  body.front-mode .heroFeatureArt,
  body.front-mode .heroFeatureArt::before,
  body.front-mode .heroFeatureArt::after{
    display:none!important;
    content:none!important;
    background:none!important;
    background-image:none!important;
    opacity:0!important;
  }
  body.front-mode .mobileCornerLogo,
  body.front-mode .mobileAppHeader{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
  }
  body.front-mode .hero{
    min-height:300px!important;
    height:auto!important;
    padding:20px 14px 17px!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 50% 8%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 30%),
      radial-gradient(circle at 12% 100%,color-mix(in srgb,var(--accent2) 8%,transparent),transparent 38%),
      linear-gradient(155deg,rgba(8,8,13,.97),rgba(2,2,7,.95))!important;
    box-shadow:0 17px 42px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 42px color-mix(in srgb,var(--accent) 5%,transparent)!important;
  }
  body.front-mode .heroContent{
    position:relative!important;
    z-index:5!important;
    width:100%!important;
    min-height:0!important;
    display:block!important;
    padding:12px 0 7px!important;
    text-align:center!important;
  }
  body.front-mode .heroContent::before{display:none!important;content:none!important;height:0!important;margin:0!important}
  body.front-mode .hero>.heroContent>.logo,
  body.front-mode .hero>.heroContent>.desktopHeroLogo{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:relative!important;
    left:auto!important;
    top:auto!important;
    width:72px!important;
    height:72px!important;
    min-width:72px!important;
    min-height:72px!important;
    margin:0 auto 1px!important;
    padding:0!important;
    overflow:visible!important;
    clip-path:none!important;
    pointer-events:none!important;
  }
  body.front-mode .hero>.heroContent>.desktopHeroLogo img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 28%,transparent)) drop-shadow(0 7px 14px rgba(0,0,0,.25))!important;
  }
  body.front-mode .heroCore{width:100%!important;margin:0!important;padding:0!important}
  body.front-mode .eyebrow{
    margin:0 auto 4px!important;
    font-size:10.8px!important;
    line-height:1.05!important;
    letter-spacing:.14em!important;
    text-align:center!important;
  }
  body.front-mode .mainTitle{
    margin:0 auto 11px!important;
    gap:6px!important;
    font-size:27px!important;
    line-height:1!important;
    letter-spacing:.45px!important;
    text-align:center!important;
  }
  body.front-mode .searchBar{
    width:min(274px,80vw)!important;
    max-width:274px!important;
    grid-template-columns:minmax(0,1fr) 38px!important;
    gap:5px!important;
    margin:0 auto!important;
  }
  body.front-mode .searchBar input{height:34px!important;padding:0 10px!important;border-radius:11px!important;font-size:7.7px!important}
  body.front-mode .searchBar button{width:38px!important;min-width:38px!important;height:34px!important;border-radius:11px!important}
  body.front-mode .heroNote{margin:8px 4px 0!important;font-size:6.9px!important;line-height:1.35!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  body.front-mode .statusLine{min-height:12px!important;margin-top:4px!important;font-size:7.2px!important}
  body.front-mode .mobileHeroStats{display:none!important}

  /* ---------------------------------------------------------------
     3. GENERAL PREVIEWS — mobile-native cards instead of desktop tables.
     No horizontal scaling or pinch-zoom is required.
     --------------------------------------------------------------- */
  #nenseiModal.modal,
  #promotionModal.modal{
    padding:6px!important;
    place-items:stretch!important;
    background:rgba(0,0,0,.84)!important;
  }
  #nenseiModal .modalCard,
  #promotionModal .modalCard,
  #nenseiModal .nenseiModalCard{
    width:calc(100vw - 12px)!important;
    max-width:calc(100vw - 12px)!important;
    height:calc(100dvh - 12px)!important;
    max-height:calc(100dvh - 12px)!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    border-radius:18px!important;
    background:linear-gradient(160deg,rgba(14,12,15,.98),rgba(5,5,8,.98))!important;
  }
  #nenseiModal .modalHeader,
  #promotionModal .modalHeader{
    flex:0 0 auto!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:12px!important;
    align-items:start!important;
  }
  #nenseiModal .modalTitle,
  #promotionModal .modalTitle{font-size:15px!important;line-height:1.05!important}
  #nenseiModal .modalSubtitle,
  #promotionModal .modalSubtitle{margin-top:4px!important;font-size:6.4px!important;line-height:1.3!important}
  #nenseiModal .modalButtons,
  #promotionModal .modalButtons{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 72px!important;
    gap:6px!important;
  }
  #nenseiModal .modalButtons button,
  #promotionModal .modalButtons button{
    min-width:0!important;
    min-height:31px!important;
    padding:6px 8px!important;
    border-radius:9px!important;
    font-size:6.2px!important;
    line-height:1.1!important;
  }
  #nenseiContent,
  #promotionContent{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-width:thin!important;
    scrollbar-color:var(--accent) rgba(255,255,255,.04)!important;
  }
  #nenseiModal .summary,
  #promotionModal .summary{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    padding:10px 10px 8px!important;
  }
  #nenseiModal .summaryCard,
  #promotionModal .summaryCard{
    min-width:0!important;
    padding:8px 9px!important;
    border-radius:11px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(3,3,7,.30))!important;
  }
  #nenseiModal .summaryLabel,
  #promotionModal .summaryLabel{font-size:6px!important;line-height:1.15!important}
  #nenseiModal .summaryValue,
  #promotionModal .summaryValue{margin-top:3px!important;font-size:17px!important;line-height:1!important}
  #nenseiModal .nenseiRecapBody,
  #promotionModal .tableWrap{
    max-height:none!important;
    overflow:visible!important;
    padding:0 10px 12px!important;
  }
  #nenseiModal .nenseiGroupBlock{
    margin-top:9px!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.018)!important;
  }
  #nenseiModal .nenseiGroupHeader{
    gap:8px!important;
    padding:8px 9px!important;
    border-left-width:4px!important;
  }
  #nenseiModal .nenseiGroupTitle{font-size:8.3px!important}
  #nenseiModal .nenseiGroupCount{font-size:5.8px!important}

  /* Nensei recap: each student becomes a readable key/value card. */
  #nenseiModal .nenseiRecapTable,
  #nenseiModal .nenseiRecapTable tbody,
  #nenseiModal .nenseiRecapTable tr,
  #nenseiModal .nenseiRecapTable td{
    width:100%!important;
    min-width:0!important;
  }
  #nenseiModal .nenseiRecapTable{display:block!important;table-layout:auto!important;border-collapse:separate!important;font-size:7px!important}
  #nenseiModal .nenseiRecapTable thead{display:none!important}
  #nenseiModal .nenseiRecapTable tbody{display:grid!important;gap:7px!important;padding:8px!important}
  #nenseiModal .nenseiRecapTable tr{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
    padding:8px 9px!important;
    border:1px solid color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.045))!important;
    border-radius:11px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.028),rgba(3,3,7,.24))!important;
  }
  #nenseiModal .nenseiRecapTable td{
    display:grid!important;
    grid-template-columns:78px minmax(0,1fr)!important;
    align-items:center!important;
    gap:7px!important;
    padding:3.5px 0!important;
    border:0!important;
    color:var(--text)!important;
    font-size:7.4px!important;
    line-height:1.25!important;
    text-align:left!important;
    overflow-wrap:anywhere!important;
  }
  #nenseiModal .nenseiRecapTable td::before{
    color:var(--accent)!important;
    font-size:5.5px!important;
    font-weight:900!important;
    letter-spacing:.055em!important;
    text-transform:uppercase!important;
  }
  #nenseiModal .nenseiRecapTable td:nth-child(1)::before{content:"NO."}
  #nenseiModal .nenseiRecapTable td:nth-child(2)::before{content:"GAKUSEI ID"}
  #nenseiModal .nenseiRecapTable td:nth-child(3)::before{content:"LATIN NAME"}
  #nenseiModal .nenseiRecapTable td:nth-child(4)::before{content:"KANJI NAME"}
  #nenseiModal .nenseiRecapTable td:nth-child(5)::before{content:"X USERNAME"}
  #nenseiModal .nenseiRecapTable td:nth-child(6)::before{content:"HOUSE"}
  #nenseiModal .nenseiRecapTable td:nth-child(7)::before{content:"STATUS"}
  #nenseiModal .recapStatusBadge{min-width:58px!important;padding:4px 6px!important;font-size:5.8px!important;justify-self:start!important}

  /* Promotion recap: same mobile-native presentation, eight fields per card. */
  #promotionModal .recapTable,
  #promotionModal .recapTable tbody,
  #promotionModal .recapTable tr,
  #promotionModal .recapTable td{width:100%!important;min-width:0!important}
  #promotionModal .recapTable{display:block!important;table-layout:auto!important;border-collapse:separate!important;font-size:7px!important}
  #promotionModal .recapTable thead{display:none!important}
  #promotionModal .recapTable tbody{display:grid!important;gap:7px!important}
  #promotionModal .recapTable tr{
    display:grid!important;
    grid-template-columns:1fr!important;
    padding:8px 9px!important;
    border:1px solid color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.045))!important;
    border-radius:11px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.028),rgba(3,3,7,.24))!important;
  }
  #promotionModal .recapTable td{
    display:grid!important;
    grid-template-columns:78px minmax(0,1fr)!important;
    align-items:start!important;
    gap:7px!important;
    padding:3.5px 0!important;
    border:0!important;
    color:var(--text)!important;
    font-size:7.4px!important;
    line-height:1.28!important;
    text-align:left!important;
    overflow-wrap:anywhere!important;
  }
  #promotionModal .recapTable td::before{
    color:var(--accent)!important;
    font-size:5.5px!important;
    font-weight:900!important;
    letter-spacing:.055em!important;
    text-transform:uppercase!important;
  }
  #promotionModal .recapTable td:nth-child(1)::before{content:"NO."}
  #promotionModal .recapTable td:nth-child(2)::before{content:"GAKUSEI ID"}
  #promotionModal .recapTable td:nth-child(3)::before{content:"STUDENT"}
  #promotionModal .recapTable td:nth-child(4)::before{content:"HOUSE"}
  #promotionModal .recapTable td:nth-child(5)::before{content:"GRADE"}
  #promotionModal .recapTable td:nth-child(6)::before{content:"STATUS"}
  #promotionModal .recapTable td:nth-child(7)::before{content:"RANKING"}
  #promotionModal .recapTable td:nth-child(8)::before{content:"REMARKS"}
}

@media (max-width:390px){
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTop{grid-template-columns:82px minmax(0,1fr) 82px!important}
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderActions{width:82px!important}
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderGeneralButton{width:50px!important;min-width:50px!important;font-size:5.3px!important}
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSearch{width:min(232px,70vw)!important;grid-template-columns:minmax(0,1fr) 64px!important}
  body.front-mode .hero{min-height:286px!important;padding-top:18px!important}
  body.front-mode .hero>.heroContent>.logo,body.front-mode .hero>.heroContent>.desktopHeroLogo{width:68px!important;height:68px!important;min-width:68px!important;min-height:68px!important}
  body.front-mode .mainTitle{font-size:25px!important}
  #nenseiModal .nenseiRecapTable td,#promotionModal .recapTable td{grid-template-columns:72px minmax(0,1fr)!important}
}


/* =====================================================================
   V95 — MOBILE APP NAV / MERGED HOME + GP ARENA / GAME-LIKE GP LADDER
   Mobile-only. Desktop and all data/academic/export logic remain intact.
   ===================================================================== */
@media (max-width:768px){
  /* -------- STUDENT HEADER: brand only, intentionally calm -------- */
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader{
    min-height:94px!important;
    height:94px!important;
    display:grid!important;
    place-items:center!important;
    padding:10px 14px!important;
    overflow:hidden!important;
    isolation:isolate!important;
    border:1px solid color-mix(in srgb,var(--accent) 27%,rgba(255,255,255,.07))!important;
    border-radius:22px 22px 0 0!important;
    background:
      radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 45%),
      linear-gradient(155deg,rgba(12,12,19,.69),rgba(3,3,8,.49))!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.055),
      inset 0 -1px 0 rgba(255,255,255,.025),
      0 12px 28px rgba(0,0,0,.22)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.08)!important;
    backdrop-filter:blur(18px) saturate(1.08)!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderArt,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderShade{
    display:none!important;
    opacity:0!important;
    background:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader::after{
    content:""!important;
    position:absolute!important;
    inset:5px!important;
    z-index:0!important;
    border:1px solid color-mix(in srgb,var(--accent) 11%,rgba(255,255,255,.035))!important;
    border-radius:17px 17px 0 0!important;
    background:
      linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 5%,transparent),transparent)!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTop.m95BrandOnly{
    position:relative!important;
    z-index:3!important;
    width:100%!important;
    min-height:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    margin:0!important;
    grid-template-columns:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderBrand{
    width:auto!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    text-align:left!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:none!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal::before,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal::after{display:none!important;content:none!important}
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal img{
    width:100%!important;height:100%!important;object-fit:contain!important;
    mix-blend-mode:screen!important;
    filter:contrast(1.35) brightness(1.10) drop-shadow(0 0 9px color-mix(in srgb,var(--accent) 35%,transparent))!important;
    -webkit-mask-image:radial-gradient(ellipse at center,#000 0 58%,rgba(0,0,0,.92) 67%,transparent 88%)!important;
    mask-image:radial-gradient(ellipse at center,#000 0 58%,rgba(0,0,0,.92) 67%,transparent 88%)!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTitle{
    width:auto!important;min-width:0!important;display:grid!important;align-content:center!important;justify-items:start!important;gap:2px!important;text-align:left!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTitle>span{
    margin:0!important;color:var(--accent)!important;font-size:7.2px!important;line-height:1!important;letter-spacing:.18em!important;text-align:left!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTitle h2{
    margin:0!important;color:var(--strong)!important;font-family:"Cinzel","League Spartan",serif!important;font-size:15.5px!important;line-height:1.05!important;letter-spacing:.045em!important;text-align:left!important;white-space:nowrap!important;
    text-shadow:0 0 14px color-mix(in srgb,var(--accent) 14%,transparent)!important;
  }

  /* -------- BOTTOM APP DOCK: search + three explicit destinations -------- */
  .mobileStudentAppDock{display:none!important}
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentAppDock{
    position:fixed!important;
    left:50%!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    z-index:7600!important;
    width:min(374px,calc(100vw - 16px))!important;
    display:grid!important;
    gap:6px!important;
    padding:7px!important;
    transform:translateX(-50%)!important;
    border:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.09))!important;
    border-radius:22px!important;
    background:
      radial-gradient(circle at 50% -30%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 55%),
      linear-gradient(155deg,rgba(14,14,22,.83),rgba(4,4,9,.79))!important;
    box-shadow:0 18px 48px rgba(0,0,0,.54),0 0 24px color-mix(in srgb,var(--accent) 10%,transparent),inset 0 1px 0 rgba(255,255,255,.08)!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.18)!important;
    backdrop-filter:blur(22px) saturate(1.18)!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentAppDock::before{
    content:"";position:absolute;inset:4px;border:1px solid rgba(255,255,255,.035);border-radius:17px;pointer-events:none;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentAppDock .mobileStudentDockSearch{
    position:relative!important;z-index:2!important;
    width:100%!important;max-width:none!important;min-width:0!important;
    display:grid!important;grid-template-columns:minmax(0,1fr) 74px!important;gap:5px!important;
    margin:0!important;padding:4px!important;
    border:1px solid color-mix(in srgb,var(--accent) 22%,rgba(255,255,255,.07))!important;
    border-radius:14px!important;
    background:rgba(0,0,0,.28)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentAppDock .mobileStudentDockSearch input{
    min-width:0!important;height:32px!important;padding:0 11px!important;border:0!important;border-radius:10px!important;outline:0!important;color:var(--strong)!important;background:rgba(255,255,255,.035)!important;font-size:7.3px!important;text-align:left!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentAppDock .mobileStudentDockSearch input:focus{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 42%,transparent),0 0 16px color-mix(in srgb,var(--accent) 12%,transparent)!important}
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentAppDock .mobileStudentDockSearch button{
    height:32px!important;min-width:0!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;padding:0 7px!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:10px!important;color:#110d0a!important;background:linear-gradient(135deg,var(--accent),var(--strong) 60%,var(--accent2))!important;box-shadow:0 7px 16px rgba(0,0,0,.26),0 0 12px color-mix(in srgb,var(--accent) 14%,transparent)!important;font-size:5.6px!important;font-weight:900!important;letter-spacing:.04em!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentAppDock .mobileStudentDockSearch button svg{width:11px!important;height:11px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important}
  .mobileStudentDockNav{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .mobileDockItem{min-width:0;min-height:47px;display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;justify-content:center;gap:5px;padding:5px 7px;border:1px solid rgba(255,255,255,.045);border-radius:12px;color:var(--muted);background:linear-gradient(145deg,rgba(255,255,255,.028),rgba(0,0,0,.15));text-align:left;cursor:pointer}
  .mobileDockItem:active{transform:translateY(1px);background:color-mix(in srgb,var(--accent) 10%,rgba(255,255,255,.025))}
  .mobileDockIcon{width:24px;height:24px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 24%,rgba(255,255,255,.05));border-radius:9px;color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,rgba(0,0,0,.25));box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
  .mobileDockIcon svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mobileDockHome .mobileDockIcon svg{fill:currentColor;stroke:none}
  .mobileDockLabel{min-width:0;color:var(--strong);font-size:5.3px;font-weight:900;line-height:1.05;letter-spacing:.045em}
  body:not(.front-mode) .mobileStudentDossier{padding-bottom:118px!important}

  /* -------- HOME: logo has no visible plate / box -------- */
  body.front-mode .hero>.heroContent>.logo,
  body.front-mode .hero>.heroContent>.desktopHeroLogo{
    background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;isolation:isolate!important;
  }
  body.front-mode .hero>.heroContent>.logo::before,
  body.front-mode .hero>.heroContent>.logo::after,
  body.front-mode .hero>.heroContent>.desktopHeroLogo::before,
  body.front-mode .hero>.heroContent>.desktopHeroLogo::after{display:none!important;content:none!important;background:none!important;box-shadow:none!important}
  body.front-mode .hero>.heroContent>.desktopHeroLogo img{
    background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;
    mix-blend-mode:screen!important;
    filter:contrast(1.42) brightness(1.10) drop-shadow(0 0 9px color-mix(in srgb,var(--accent) 32%,transparent)) drop-shadow(0 7px 14px rgba(0,0,0,.22))!important;
    -webkit-mask-image:radial-gradient(ellipse at center,#000 0 56%,rgba(0,0,0,.92) 66%,rgba(0,0,0,.35) 76%,transparent 90%)!important;
    mask-image:radial-gradient(ellipse at center,#000 0 56%,rgba(0,0,0,.92) 66%,rgba(0,0,0,.35) 76%,transparent 90%)!important;
  }

  /* -------- HOME + GP RANKING become one bordered command centre -------- */
  body.front-mode .hero{
    min-height:282px!important;
    margin:0!important;
    border:1px solid color-mix(in srgb,var(--accent) 43%,rgba(255,255,255,.08))!important;
    border-bottom-color:color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.035))!important;
    border-radius:27px 27px 0 0!important;
    background:
      radial-gradient(circle at 50% 6%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 31%),
      radial-gradient(circle at 4% 100%,color-mix(in srgb,var(--accent2) 8%,transparent),transparent 42%),
      linear-gradient(155deg,rgba(9,9,15,.96),rgba(3,3,8,.92))!important;
    box-shadow:0 18px 44px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.045)!important;
  }
  body.front-mode .hero::after{
    content:""!important;position:absolute!important;left:14px!important;right:14px!important;bottom:-1px!important;height:1px!important;z-index:8!important;background:linear-gradient(90deg,transparent,var(--accent),var(--strong),var(--accent),transparent)!important;opacity:.45!important;pointer-events:none!important;
  }
  body.front-mode .gpRankingSection{
    position:relative!important;
    margin-top:-1px!important;
    border:1px solid color-mix(in srgb,var(--accent) 43%,rgba(255,255,255,.08))!important;
    border-top-color:color-mix(in srgb,var(--accent) 16%,rgba(255,255,255,.035))!important;
    border-radius:0 0 27px 27px!important;
    background:
      radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 34%),
      linear-gradient(160deg,rgba(8,8,14,.93),rgba(3,3,8,.94))!important;
    box-shadow:0 24px 54px rgba(0,0,0,.40),inset 0 -1px 0 rgba(255,255,255,.025)!important;
    overflow:hidden!important;
  }
  body.front-mode .gpRankingSection::before{
    content:"";position:absolute;inset:5px;z-index:0;border:1px solid color-mix(in srgb,var(--accent) 10%,rgba(255,255,255,.025));border-radius:0 0 21px 21px;pointer-events:none;
  }
  body.front-mode .gpRankingHeader,body.front-mode .gpRankingContent{position:relative!important;z-index:1!important}
  body.front-mode .gpRankingHeader{
    min-height:0!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;align-items:end!important;padding:13px 14px 10px!important;border-bottom:0!important;
  }
  body.front-mode .gpRankingEyebrow{font-size:5.8px!important;letter-spacing:.16em!important}
  body.front-mode .gpRankingTitle{margin:4px 0 0!important;font-family:"Cinzel","League Spartan",serif!important;font-size:16px!important;letter-spacing:.045em!important}
  body.front-mode .gpRankingDisclaimer{display:none!important}
  body.front-mode .gpRankingMeta{width:auto!important;min-width:0!important;flex:0 0 auto!important;text-align:right!important}
  body.front-mode .gpRankingSemester{min-height:23px!important;padding:5px 8px!important;border-radius:8px!important;font-size:5.4px!important;letter-spacing:.055em!important}
  body.front-mode .gpRankingUpdated{max-width:116px!important;margin-top:4px!important;font-size:4.6px!important;line-height:1.2!important}
  body.front-mode .gpRankingContent{padding:2px 10px 14px!important}

  /* -------- GAME-LIKE RANKING LADDER -------- */
  body.front-mode .gpRankingSection .gpArena{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;padding:0!important}
  body.front-mode .gpRankingSection .gpArena>.gpRankCard,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3),
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(n+4){
    --tier:#8e8d99;
    position:relative!important;
    min-height:76px!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:70px minmax(0,1fr) 64px!important;
    gap:8px!important;
    align-items:center!important;
    padding:8px 9px 8px 8px!important;
    overflow:hidden!important;
    border:1px solid color-mix(in srgb,var(--gpGlow) 40%,rgba(255,255,255,.07))!important;
    border-radius:15px!important;
    background:
      linear-gradient(90deg,color-mix(in srgb,var(--gpGlow2) 70%,rgba(255,255,255,.018)),transparent 34%),
      radial-gradient(circle at 78% 15%,color-mix(in srgb,var(--gpGlow) 13%,transparent),transparent 32%),
      linear-gradient(145deg,rgba(19,19,29,.65),rgba(5,5,10,.72))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 7px 18px rgba(0,0,0,.24)!important;
  }
  body.front-mode .gpRankingSection .gpArena>.gpRankCard::before{
    content:""!important;position:absolute!important;left:0!important;top:8px!important;bottom:8px!important;width:3px!important;border-radius:0 4px 4px 0!important;background:linear-gradient(180deg,var(--strong),var(--tier),var(--accent2))!important;box-shadow:0 0 11px color-mix(in srgb,var(--gpGlow) 65%,transparent)!important;opacity:.9!important;
  }
  body.front-mode .gpRankingSection .gpArena>.gpRankCard::after{
    content:""!important;position:absolute!important;left:78px!important;right:9px!important;bottom:6px!important;height:2px!important;border-radius:999px!important;background:linear-gradient(90deg,var(--tier) 0 34%,color-mix(in srgb,var(--tier) 26%,rgba(255,255,255,.06)) 34% 100%)!important;box-shadow:0 0 8px color-mix(in srgb,var(--tier) 25%,transparent)!important;opacity:.58!important;
  }
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(1){--tier:#f1d36f!important;border-color:rgba(241,211,111,.48)!important;background:linear-gradient(90deg,rgba(241,211,111,.10),transparent 40%),radial-gradient(circle at 78% 15%,rgba(241,211,111,.10),transparent 34%),linear-gradient(145deg,rgba(23,20,19,.72),rgba(6,6,10,.75))!important;box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 18px rgba(241,211,111,.08)!important}
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(2){--tier:#cbd6e4!important}
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(3){--tier:#d89462!important}
  body.front-mode .gpRankingSection .gpRankLeft,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankLeft{
    width:70px!important;height:60px!important;display:grid!important;grid-template-columns:19px 48px!important;grid-template-rows:60px!important;gap:3px!important;align-items:center!important;justify-items:center!important;
  }
  body.front-mode .gpRankingSection .gpRankNo,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankNo,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(n+4) .gpRankNo{
    width:19px!important;min-width:19px!important;height:38px!important;min-height:38px!important;display:grid!important;place-items:center!important;padding:0!important;border:1px solid color-mix(in srgb,var(--tier) 54%,rgba(255,255,255,.06))!important;border-radius:7px!important;color:var(--tier)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--tier) 12%,rgba(0,0,0,.38)),rgba(0,0,0,.38))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;font-family:"Cinzel","League Spartan",serif!important;font-size:6.5px!important;font-weight:900!important;letter-spacing:0!important;writing-mode:vertical-rl!important;transform:rotate(180deg)!important;
  }
  body.front-mode .gpRankingSection .gpRankAvatar,
  body.front-mode .gpRankingSection .gpRankAvatarFrame,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankAvatar,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankAvatarFrame{
    width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;
  }
  body.front-mode .gpRankingSection .gpRankAvatar{position:relative!important;overflow:visible!important}
  body.front-mode .gpRankingSection .gpRankAvatarGlow{inset:-6px!important;border-radius:14px!important;filter:blur(7px)!important;opacity:.72!important}
  body.front-mode .gpRankingSection .gpRankAvatarFrame{
    overflow:hidden!important;border:1px solid color-mix(in srgb,var(--tier) 62%,var(--border))!important;border-radius:12px!important;background:#08080d!important;box-shadow:0 0 0 2px rgba(0,0,0,.30),0 0 13px color-mix(in srgb,var(--gpGlow) 18%,transparent)!important;
    clip-path:polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%)!important;
  }
  body.front-mode .gpRankingSection .gpRankAvatarFrame::after{border-radius:10px!important;box-shadow:inset 0 0 9px rgba(0,0,0,.16)!important}
  body.front-mode .gpRankingSection .gpRankAvatarImage{width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 17%!important;transform:scale(1.16)!important;transform-origin:50% 17%!important}
  body.front-mode .gpRankingSection .gpRankHouseWatermark{display:none!important}
  body.front-mode .gpRankingSection .gpRankHouseBadge{
    right:-4px!important;bottom:-4px!important;width:18px!important;height:18px!important;border-radius:6px!important;background:rgba(5,5,10,.94)!important;box-shadow:0 3px 7px rgba(0,0,0,.45),0 0 8px var(--gpGlow2)!important;
  }
  body.front-mode .gpRankingSection .gpRankHouseBadge img{width:13px!important;height:13px!important}
  body.front-mode .gpRankingSection .gpRankBody{min-width:0!important;align-self:center!important;padding-bottom:4px!important}
  body.front-mode .gpRankingSection .gpRankTopline{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:5px!important;font-size:4.7px!important;letter-spacing:.06em!important}
  body.front-mode .gpRankingSection .gpRankHouse{min-height:16px!important;padding:3px 5px!important;border-radius:5px!important;font-size:4.6px!important;background:color-mix(in srgb,var(--gpGlow2) 45%,rgba(0,0,0,.30))!important}
  body.front-mode .gpRankingSection .gpRankId{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:4.5px!important}
  body.front-mode .gpRankingSection .gpRankNameButton,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankNameButton{
    max-width:100%!important;margin:5px 0 0!important;padding:0!important;overflow:hidden!important;color:var(--strong)!important;font-family:"Cinzel","League Spartan",serif!important;font-size:10px!important;font-weight:800!important;line-height:1.05!important;letter-spacing:.015em!important;text-align:left!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  }
  body.front-mode .gpRankingSection .gpRankKanji{margin-top:3px!important;overflow:hidden!important;color:color-mix(in srgb,var(--accent) 88%,var(--strong))!important;font-size:6.6px!important;line-height:1!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  body.front-mode .gpRankingSection .gpRankUsername{display:none!important}
  body.front-mode .gpRankingSection .gpRankScore,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankScore{
    width:64px!important;min-width:64px!important;display:grid!important;justify-items:end!important;gap:3px!important;padding-bottom:4px!important;text-align:right!important;
  }
  body.front-mode .gpRankingSection .gpRankScoreLabel{font-size:4.4px!important;letter-spacing:.13em!important;color:var(--muted)!important}
  body.front-mode .gpRankingSection .gpRankScoreLabel::before{content:"POWER ";color:var(--tier)!important}
  body.front-mode .gpRankingSection .gpRankScoreValue,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankScoreValue,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(1) .gpRankScoreValue{
    color:var(--tier)!important;font-family:"Cinzel","League Spartan",serif!important;font-size:14px!important;font-weight:900!important;line-height:1!important;text-shadow:0 0 10px color-mix(in srgb,var(--tier) 24%,transparent)!important;
  }
}

@media (max-width:390px){
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader{height:90px!important;min-height:90px!important}
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal{width:44px!important;height:44px!important;min-width:44px!important}
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTitle h2{font-size:14px!important}
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentAppDock{width:calc(100vw - 12px)!important;bottom:max(6px,env(safe-area-inset-bottom))!important;padding:6px!important}
  .mobileDockLabel{font-size:5px!important}
  body.front-mode .hero{min-height:270px!important}
  body.front-mode .gpRankingSection .gpArena>.gpRankCard{grid-template-columns:68px minmax(0,1fr) 60px!important}
  body.front-mode .gpRankingSection .gpRankScore{width:60px!important;min-width:60px!important}
}

/* V95.1 — the student masthead contains brand only; legacy top controls are suppressed. */
@media (max-width:768px){
  body:not(.front-mode) #homeButton,
  body:not(.front-mode) #generalMenu,
  body:not(.front-mode) .mobileAppHeader,
  body:not(.front-mode) .mobileCornerLogo{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
}


/* =====================================================================
   V96 — FLOATING MOBILE NAV ISLAND / ARTWORK STUDENT MASTHEAD /
         REPAIRED GP RANKING TITLE
   Mobile-only overrides. Desktop geometry and all data logic are intact.
   ===================================================================== */
@media (max-width:768px){
  /* 1) STUDENT MASTHEAD — artwork is retained, but treated as atmosphere. */
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader{
    position:relative!important;
    min-height:106px!important;
    height:106px!important;
    display:grid!important;
    place-items:center!important;
    padding:0 14px!important;
    overflow:hidden!important;
    isolation:isolate!important;
    border:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.08))!important;
    border-radius:24px 24px 0 0!important;
    background:linear-gradient(155deg,rgba(8,8,14,.86),rgba(3,3,8,.72))!important;
    box-shadow:
      0 16px 34px rgba(0,0,0,.28),
      0 0 22px color-mix(in srgb,var(--accent) 10%,transparent),
      inset 0 1px 0 rgba(255,255,255,.075),
      inset 0 -1px 0 color-mix(in srgb,var(--accent) 16%,transparent)!important;
    -webkit-backdrop-filter:blur(14px) saturate(1.06)!important;
    backdrop-filter:blur(14px) saturate(1.06)!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderArt{
    display:block!important;
    position:absolute!important;
    inset:1px!important;
    z-index:0!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    opacity:.68!important;
    border-radius:22px 22px 0 0!important;
    background-size:cover!important;
    background-position:center 27%!important;
    background-repeat:no-repeat!important;
    filter:saturate(.92) contrast(1.06) brightness(.72)!important;
    transform:none!important;
    clip-path:inset(0 round 22px 22px 0 0)!important;
    -webkit-clip-path:inset(0 round 22px 22px 0 0)!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderShade{
    display:block!important;
    position:absolute!important;
    inset:1px!important;
    z-index:1!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    opacity:1!important;
    border-radius:22px 22px 0 0!important;
    transform:none!important;
    clip-path:inset(0 round 22px 22px 0 0)!important;
    -webkit-clip-path:inset(0 round 22px 22px 0 0)!important;
    background:
      radial-gradient(ellipse at 50% 48%,rgba(3,3,8,.76) 0%,rgba(3,3,8,.62) 31%,rgba(3,3,8,.31) 58%,rgba(3,3,8,.14) 80%,rgba(3,3,8,.22) 100%),
      linear-gradient(180deg,rgba(2,2,7,.08),rgba(2,2,7,.42))!important;
    box-shadow:inset 0 -28px 40px rgba(0,0,0,.18)!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader::after{
    content:""!important;
    position:absolute!important;
    inset:6px!important;
    z-index:2!important;
    border:1px solid color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.045))!important;
    border-radius:17px 17px 7px 7px!important;
    background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 4%,transparent),transparent)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTop.m95BrandOnly{
    position:relative!important;
    z-index:5!important;
    width:100%!important;
    min-height:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    margin:0!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderBrand{
    width:auto!important;
    max-width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:11px!important;
    padding:7px 14px 7px 10px!important;
    border:1px solid rgba(255,255,255,.035)!important;
    border-radius:16px!important;
    background:linear-gradient(145deg,rgba(2,2,7,.34),rgba(7,7,13,.18))!important;
    box-shadow:0 7px 20px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.035)!important;
    -webkit-backdrop-filter:blur(6px)!important;
    backdrop-filter:blur(6px)!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal{
    width:50px!important;
    height:50px!important;
    min-width:50px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:none!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal::before,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal::after{display:none!important;content:none!important}
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal img{
    width:100%!important;height:100%!important;object-fit:contain!important;
    mix-blend-mode:screen!important;
    filter:contrast(1.32) brightness(1.08) drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 34%,transparent))!important;
    -webkit-mask-image:radial-gradient(ellipse at center,#000 0 60%,rgba(0,0,0,.94) 69%,transparent 90%)!important;
    mask-image:radial-gradient(ellipse at center,#000 0 60%,rgba(0,0,0,.94) 69%,transparent 90%)!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTitle{
    width:auto!important;min-width:0!important;display:grid!important;align-content:center!important;justify-items:start!important;gap:3px!important;text-align:left!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTitle>span{
    margin:0!important;color:var(--accent)!important;font-size:7.2px!important;line-height:1!important;letter-spacing:.18em!important;text-align:left!important;text-shadow:0 2px 8px rgba(0,0,0,.9)!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTitle h2{
    margin:0!important;color:var(--strong)!important;font-family:"Cinzel","League Spartan",serif!important;font-size:15.6px!important;line-height:1.05!important;letter-spacing:.04em!important;text-align:left!important;white-space:nowrap!important;text-shadow:0 2px 12px rgba(0,0,0,.95),0 0 16px color-mix(in srgb,var(--accent) 12%,transparent)!important;
  }

  /* 2) TRUE FLOATING NAV — no footer slab. Search floats above a compact app island. */
  .mobileStudentAppDock{display:none!important}
  body:not(.front-mode) .mobileStudentAppDock{
    position:fixed!important;
    left:50%!important;
    bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px))!important;
    z-index:7600!important;
    width:min(344px,calc(100vw - 34px))!important;
    display:block!important;
    padding:0!important;
    transform:translateX(-50%)!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentAppDock::before,
  body:not(.front-mode) .mobileStudentAppDock::after{display:none!important;content:none!important}
  body:not(.front-mode) .mobileStudentAppDock .mobileStudentDockSearch{
    position:relative!important;
    z-index:4!important;
    width:min(276px,calc(100% - 34px))!important;
    max-width:none!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 34px!important;
    gap:5px!important;
    margin:0 auto -7px!important;
    padding:5px!important;
    border:1px solid color-mix(in srgb,var(--accent) 40%,rgba(255,255,255,.10))!important;
    border-radius:17px!important;
    background:linear-gradient(145deg,rgba(15,15,23,.88),rgba(4,4,10,.82))!important;
    box-shadow:0 13px 34px rgba(0,0,0,.52),0 0 20px color-mix(in srgb,var(--accent) 12%,transparent),inset 0 1px 0 rgba(255,255,255,.08)!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.22)!important;
    backdrop-filter:blur(22px) saturate(1.22)!important;
    pointer-events:auto!important;
  }
  body:not(.front-mode) .mobileStudentAppDock .mobileStudentDockSearch::after{
    content:""!important;position:absolute!important;left:22%!important;right:22%!important;bottom:-1px!important;height:1px!important;background:linear-gradient(90deg,transparent,var(--accent),transparent)!important;opacity:.5!important;pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentAppDock .mobileStudentDockSearch input{
    min-width:0!important;height:30px!important;padding:0 11px!important;border:0!important;border-radius:11px!important;outline:0!important;color:var(--strong)!important;background:rgba(255,255,255,.035)!important;font-size:7.2px!important;text-align:left!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  }
  body:not(.front-mode) .mobileStudentAppDock .mobileStudentDockSearch input:focus{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 38%,transparent),0 0 13px color-mix(in srgb,var(--accent) 10%,transparent)!important}
  body:not(.front-mode) .mobileStudentAppDock .mobileStudentDockSearch button{
    width:34px!important;height:30px!important;min-width:34px!important;padding:0!important;display:grid!important;place-items:center!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:11px!important;color:#120d09!important;background:linear-gradient(135deg,var(--accent),var(--strong) 60%,var(--accent2))!important;box-shadow:0 6px 14px rgba(0,0,0,.32),0 0 12px color-mix(in srgb,var(--accent) 15%,transparent)!important;
  }
  body:not(.front-mode) .mobileStudentAppDock .mobileStudentDockSearch button span{display:none!important}
  body:not(.front-mode) .mobileStudentAppDock .mobileStudentDockSearch button svg{width:12px!important;height:12px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important}
  body:not(.front-mode) .mobileStudentAppDock .mobileStudentDockNav{
    position:relative!important;
    z-index:3!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
    padding:13px 7px 7px!important;
    border:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.10))!important;
    border-radius:22px!important;
    background:
      radial-gradient(circle at 50% -45%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 58%),
      linear-gradient(155deg,rgba(15,15,24,.86),rgba(4,4,10,.80))!important;
    box-shadow:0 20px 46px rgba(0,0,0,.56),0 0 25px color-mix(in srgb,var(--accent) 11%,transparent),inset 0 1px 0 rgba(255,255,255,.08)!important;
    -webkit-backdrop-filter:blur(24px) saturate(1.24)!important;
    backdrop-filter:blur(24px) saturate(1.24)!important;
    pointer-events:auto!important;
  }
  body:not(.front-mode) .mobileStudentAppDock .mobileStudentDockNav::before{
    content:""!important;position:absolute!important;inset:4px!important;border:1px solid rgba(255,255,255,.035)!important;border-radius:17px!important;pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentAppDock .mobileDockItem{
    position:relative!important;z-index:2!important;min-width:0!important;min-height:49px!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:26px auto!important;align-items:center!important;justify-items:center!important;gap:3px!important;padding:5px 3px!important;border:1px solid transparent!important;border-radius:14px!important;color:var(--muted)!important;background:transparent!important;text-align:center!important;cursor:pointer!important;transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease!important;
  }
  body:not(.front-mode) .mobileStudentAppDock .mobileDockItem:active{transform:scale(.97)!important;background:color-mix(in srgb,var(--accent) 9%,rgba(255,255,255,.025))!important}
  body:not(.front-mode) .mobileStudentAppDock .mobileDockHome{
    color:var(--strong)!important;
    border-color:color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.045))!important;
    background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 10%,rgba(255,255,255,.025)),rgba(0,0,0,.12))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  }
  body:not(.front-mode) .mobileStudentAppDock .mobileDockIcon{
    width:26px!important;height:26px!important;display:grid!important;place-items:center!important;border:1px solid color-mix(in srgb,var(--accent) 28%,rgba(255,255,255,.05))!important;border-radius:10px!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 8%,rgba(0,0,0,.22))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 0 12px color-mix(in srgb,var(--accent) 8%,transparent)!important;
  }
  body:not(.front-mode) .mobileStudentAppDock .mobileDockIcon svg{width:13px!important;height:13px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;stroke-linecap:round!important;stroke-linejoin:round!important}
  body:not(.front-mode) .mobileStudentAppDock .mobileDockHome .mobileDockIcon svg{fill:currentColor!important;stroke:currentColor!important;stroke-width:1.1!important}
  body:not(.front-mode) .mobileStudentAppDock .mobileDockLabel{display:block!important;min-width:0!important;color:inherit!important;font-size:5.4px!important;font-weight:900!important;line-height:1.08!important;letter-spacing:.045em!important;text-align:center!important;white-space:normal!important}
  body:not(.front-mode) .mobileStudentDossier{padding-bottom:132px!important}

  /* 3) GP RANKING HEADING — reset the V95 compressed two-column header. */
  body.front-mode .gpRankingSection .gpRankingHeader{
    min-height:0!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    align-items:start!important;
    padding:15px 14px 10px!important;
    border-bottom:0!important;
    text-align:left!important;
  }
  body.front-mode .gpRankingSection .gpRankingHeader>div:first-child{min-width:0!important;width:100%!important}
  body.front-mode .gpRankingSection .gpRankingEyebrow{
    width:100%!important;margin:0!important;color:var(--accent)!important;font-size:6.4px!important;font-weight:900!important;line-height:1.2!important;letter-spacing:.15em!important;white-space:nowrap!important;
  }
  body.front-mode .gpRankingSection .gpRankingTitle{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:5px 0 0!important;
    padding:0!important;
    overflow:visible!important;
    color:var(--strong)!important;
    font-family:"Cinzel","League Spartan",serif!important;
    font-size:20px!important;
    font-weight:800!important;
    line-height:1.08!important;
    letter-spacing:.025em!important;
    text-align:left!important;
    text-indent:0!important;
    white-space:nowrap!important;
    word-break:normal!important;
    text-overflow:clip!important;
    text-shadow:0 0 14px color-mix(in srgb,var(--accent) 12%,transparent)!important;
  }
  body.front-mode .gpRankingSection .gpRankingDisclaimer{display:none!important}
  body.front-mode .gpRankingSection .gpRankingMeta{
    width:100%!important;min-width:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin:0!important;text-align:left!important;
  }
  body.front-mode .gpRankingSection .gpRankingSemester{
    flex:0 1 auto!important;min-height:24px!important;padding:5px 8px!important;border-radius:8px!important;font-size:5.6px!important;letter-spacing:.055em!important;white-space:nowrap!important;
  }
  body.front-mode .gpRankingSection .gpRankingUpdated{
    max-width:150px!important;margin:0!important;color:var(--muted)!important;font-size:5px!important;line-height:1.22!important;text-align:right!important;white-space:normal!important;
  }
}

@media (max-width:390px){
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader{height:102px!important;min-height:102px!important}
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal{width:47px!important;height:47px!important;min-width:47px!important}
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTitle h2{font-size:14.5px!important}
  body:not(.front-mode) .mobileStudentAppDock{width:min(336px,calc(100vw - 28px))!important;bottom:max(17px,calc(env(safe-area-inset-bottom) + 10px))!important}
  body:not(.front-mode) .mobileStudentAppDock .mobileStudentDockSearch{width:min(268px,calc(100% - 30px))!important}
  body.front-mode .gpRankingSection .gpRankingTitle{font-size:19px!important;letter-spacing:.02em!important}
}

/* =====================================================================
   V97 — MOBILE-ONLY UNIFIED FLOATING COMMAND BAR / EXPLICIT HOUSE ART /
         COMPACT HOME SEARCH
   Requested revision only. Desktop keeps the existing layout; the only
   desktop rule below is an explicit hard-hide for the mobile navigation.
   ===================================================================== */

/* Desktop safety: this control must never render outside mobile UI. */
@media (min-width:769px){
  #mobileStudentAppDock{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    position:absolute!important;
    left:-99999px!important;
    width:0!important;
    height:0!important;
    overflow:hidden!important;
  }
}

@media (max-width:768px){
  /* ---------------------------------------------------------------
     1) SINGLE PREMIUM FLOATING BAR
        Search + Home + Nensei + Promotion live inside one glass rail.
     --------------------------------------------------------------- */
  #mobileStudentAppDock{display:none!important}
  body:not(.front-mode) #mobileStudentAppDock{
    position:fixed!important;
    left:50%!important;
    bottom:max(14px,calc(env(safe-area-inset-bottom) + 10px))!important;
    z-index:7900!important;
    width:min(362px,calc(100vw - 20px))!important;
    min-height:56px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:6px!important;
    padding:5px!important;
    transform:translateX(-50%)!important;
    border:1px solid color-mix(in srgb,var(--accent) 40%,rgba(255,255,255,.12))!important;
    border-radius:20px!important;
    background:
      radial-gradient(circle at 22% -40%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 46%),
      linear-gradient(155deg,rgba(16,16,25,.86),rgba(4,4,10,.80))!important;
    box-shadow:
      0 18px 46px rgba(0,0,0,.58),
      0 0 24px color-mix(in srgb,var(--accent) 12%,transparent),
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -1px 0 rgba(255,255,255,.025)!important;
    -webkit-backdrop-filter:blur(24px) saturate(1.22)!important;
    backdrop-filter:blur(24px) saturate(1.22)!important;
    pointer-events:auto!important;
  }
  body:not(.front-mode) #mobileStudentAppDock::before{
    content:""!important;
    position:absolute!important;
    inset:3px!important;
    z-index:0!important;
    border:1px solid rgba(255,255,255,.035)!important;
    border-radius:16px!important;
    background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 4%,transparent),transparent)!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) #mobileStudentAppDock::after{display:none!important;content:none!important}

  body:not(.front-mode) #mobileStudentAppDock .mobileStudentDockSearch{
    position:relative!important;
    z-index:2!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    height:44px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 32px!important;
    align-items:center!important;
    gap:4px!important;
    margin:0!important;
    padding:4px!important;
    border:1px solid color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.055))!important;
    border-radius:14px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(0,0,0,.14))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  body:not(.front-mode) #mobileStudentAppDock .mobileStudentDockSearch::after{display:none!important;content:none!important}
  body:not(.front-mode) #mobileStudentAppDock .mobileStudentDockSearch input{
    width:100%!important;
    min-width:0!important;
    height:34px!important;
    min-height:34px!important;
    padding:0 9px!important;
    border:0!important;
    border-radius:10px!important;
    outline:0!important;
    color:var(--strong)!important;
    background:rgba(3,3,8,.42)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
    font-size:6.8px!important;
    font-weight:700!important;
    letter-spacing:.01em!important;
    text-align:left!important;
  }
  body:not(.front-mode) #mobileStudentAppDock .mobileStudentDockSearch input:focus{
    box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 42%,transparent),0 0 12px color-mix(in srgb,var(--accent) 12%,transparent)!important;
  }
  body:not(.front-mode) #mobileStudentAppDock .mobileStudentDockSearch button{
    width:32px!important;
    min-width:32px!important;
    height:34px!important;
    min-height:34px!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.11)!important;
    border-radius:10px!important;
    color:#140f0c!important;
    background:linear-gradient(135deg,var(--accent),var(--strong) 58%,var(--accent2))!important;
    box-shadow:0 5px 12px rgba(0,0,0,.32),0 0 11px color-mix(in srgb,var(--accent) 13%,transparent)!important;
  }
  body:not(.front-mode) #mobileStudentAppDock .mobileStudentDockSearch button span{display:none!important}
  body:not(.front-mode) #mobileStudentAppDock .mobileStudentDockSearch button svg{
    width:12px!important;height:12px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;
  }

  body:not(.front-mode) #mobileStudentAppDock .mobileStudentDockNav{
    position:relative!important;
    z-index:2!important;
    width:auto!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:repeat(3,42px)!important;
    align-items:center!important;
    gap:3px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:none!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  body:not(.front-mode) #mobileStudentAppDock .mobileStudentDockNav::before,
  body:not(.front-mode) #mobileStudentAppDock .mobileStudentDockNav::after{display:none!important;content:none!important}
  body:not(.front-mode) #mobileStudentAppDock .mobileDockItem{
    position:relative!important;
    min-width:0!important;
    width:42px!important;
    height:44px!important;
    min-height:44px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:23px auto!important;
    align-items:center!important;
    justify-items:center!important;
    gap:1px!important;
    padding:3px 2px!important;
    border:1px solid transparent!important;
    border-radius:13px!important;
    color:var(--muted)!important;
    background:transparent!important;
    box-shadow:none!important;
    text-align:center!important;
    cursor:pointer!important;
    transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease!important;
  }
  body:not(.front-mode) #mobileStudentAppDock .mobileDockItem:active{
    transform:translateY(1px) scale(.97)!important;
    color:var(--strong)!important;
    border-color:color-mix(in srgb,var(--accent) 25%,rgba(255,255,255,.04))!important;
    background:color-mix(in srgb,var(--accent) 9%,rgba(255,255,255,.018))!important;
  }
  body:not(.front-mode) #mobileStudentAppDock .mobileDockHome{
    color:var(--strong)!important;
    border-color:color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.04))!important;
    background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 8%,rgba(255,255,255,.02)),rgba(0,0,0,.10))!important;
  }
  body:not(.front-mode) #mobileStudentAppDock .mobileDockIcon{
    width:23px!important;
    height:23px!important;
    display:grid!important;
    place-items:center!important;
    border:0!important;
    border-radius:8px!important;
    color:var(--accent)!important;
    background:color-mix(in srgb,var(--accent) 7%,rgba(0,0,0,.14))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  }
  body:not(.front-mode) #mobileStudentAppDock .mobileDockIcon svg{
    width:12px!important;height:12px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.65!important;stroke-linecap:round!important;stroke-linejoin:round!important;
  }
  body:not(.front-mode) #mobileStudentAppDock .mobileDockHome .mobileDockIcon svg{fill:currentColor!important;stroke:currentColor!important;stroke-width:1!important}
  body:not(.front-mode) #mobileStudentAppDock .mobileDockLabel{
    display:block!important;
    min-width:0!important;
    max-width:40px!important;
    color:inherit!important;
    font-size:4.25px!important;
    font-weight:900!important;
    line-height:1.02!important;
    letter-spacing:.025em!important;
    text-align:center!important;
    white-space:normal!important;
  }
  body:not(.front-mode) .mobileStudentDossier{padding-bottom:84px!important}

  /* ---------------------------------------------------------------
     2) STUDENT HEADER — explicitly restore the ORIGINAL House artwork.
        These !important image declarations override the old V95
        background:none rule that was suppressing the art in V96.
     --------------------------------------------------------------- */
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader{
    min-height:108px!important;
    height:108px!important;
    overflow:hidden!important;
    border-color:color-mix(in srgb,var(--accent) 38%,rgba(255,255,255,.09))!important;
    background:linear-gradient(155deg,rgba(8,8,14,.86),rgba(3,3,8,.74))!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderArt{
    display:block!important;
    visibility:visible!important;
    position:absolute!important;
    inset:1px!important;
    z-index:0!important;
    width:auto!important;
    height:auto!important;
    opacity:.80!important;
    border-radius:22px 22px 0 0!important;
    background-color:transparent!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-position:center 30%!important;
    filter:saturate(.96) contrast(1.05) brightness(.78)!important;
    transform:none!important;
    clip-path:inset(0 round 22px 22px 0 0)!important;
    -webkit-clip-path:inset(0 round 22px 22px 0 0)!important;
    pointer-events:none!important;
  }
  body:not(.front-mode).dorm-kosei .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderArt{
    background-image:url("https://drive.google.com/thumbnail?id=1KJiRkV957u2OvAXbXWc1MDGXLKhDhcEv&sz=w1600")!important;
    background-position:center 31%!important;
  }
  body:not(.front-mode).dorm-tsukiyomi .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderArt{
    background-image:url("https://drive.google.com/thumbnail?id=1AXd7izgJikFHpDOTgLtK3HWfFPhRqrkC&sz=w1600")!important;
    background-position:center 29%!important;
  }
  body:not(.front-mode).dorm-yamiyo .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderArt{
    background-image:url("https://drive.google.com/thumbnail?id=1wRFGvZGcA05iAMgq5h0gvQcMmudWkk7_&sz=w1600")!important;
    background-position:center 28%!important;
  }
  body:not(.front-mode):not(.dorm-kosei):not(.dorm-tsukiyomi):not(.dorm-yamiyo) .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderArt{
    background-image:url("https://drive.google.com/thumbnail?id=1IuFDUcGJBLbRMFCWwH9a5gfnkhZM1mti&sz=w1600")!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderShade{
    display:block!important;
    visibility:visible!important;
    position:absolute!important;
    inset:1px!important;
    z-index:1!important;
    opacity:1!important;
    border-radius:22px 22px 0 0!important;
    background:
      radial-gradient(ellipse at 50% 50%,rgba(2,2,7,.76) 0%,rgba(2,2,7,.63) 27%,rgba(2,2,7,.30) 53%,rgba(2,2,7,.12) 76%,rgba(2,2,7,.20) 100%),
      linear-gradient(180deg,rgba(2,2,7,.10),rgba(2,2,7,.40))!important;
    box-shadow:inset 0 -28px 42px rgba(0,0,0,.16)!important;
    transform:none!important;
    clip-path:inset(0 round 22px 22px 0 0)!important;
    -webkit-clip-path:inset(0 round 22px 22px 0 0)!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTop.m95BrandOnly{z-index:5!important}
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderBrand{
    border-color:rgba(255,255,255,.04)!important;
    background:linear-gradient(145deg,rgba(2,2,7,.46),rgba(5,5,11,.24))!important;
    box-shadow:0 7px 19px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.04)!important;
    -webkit-backdrop-filter:blur(5px) saturate(1.08)!important;
    backdrop-filter:blur(5px) saturate(1.08)!important;
  }

  /* ---------------------------------------------------------------
     3) HOME MOBILE SEARCH — deliberately smaller and lighter.
     --------------------------------------------------------------- */
  body.front-mode .hero .searchBar{
    width:min(252px,68vw)!important;
    max-width:252px!important;
    grid-template-columns:minmax(0,1fr) 34px!important;
    gap:5px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body.front-mode .hero .searchBar input{
    height:35px!important;
    min-height:35px!important;
    padding:0 10px!important;
    border-radius:11px!important;
    font-size:10px!important;
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 8%,transparent)!important;
  }
  body.front-mode .hero .searchBar button{
    width:34px!important;
    min-width:34px!important;
    height:35px!important;
    min-height:35px!important;
    padding:0!important;
    border-radius:11px!important;
  }
  body.front-mode .hero .mobileSearchIcon,
  body.front-mode .hero .mobileSearchIcon svg{width:14px!important;height:14px!important}
}

@media (max-width:390px){
  body:not(.front-mode) #mobileStudentAppDock{
    width:min(354px,calc(100vw - 18px))!important;
    min-height:54px!important;
    bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px))!important;
  }
  body:not(.front-mode) #mobileStudentAppDock .mobileStudentDockNav{grid-template-columns:repeat(3,40px)!important;gap:2px!important}
  body:not(.front-mode) #mobileStudentAppDock .mobileDockItem{width:40px!important;height:42px!important;min-height:42px!important}
  body:not(.front-mode) #mobileStudentAppDock .mobileDockLabel{font-size:4.05px!important;max-width:38px!important}
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader{height:104px!important;min-height:104px!important}
  body.front-mode .hero .searchBar{width:min(238px,66vw)!important;max-width:238px!important}
  body.front-mode .hero .searchBar input{font-size:9.4px!important}
}



/* =====================================================================
   V98 — MOBILE UI PRECISION REVISION
   Requested scope only:
   1) House-art student masthead without blocking/glass shapes;
   2) Student Point Log visual rollback + nested scroll for long logs;
   3) narrower floating command bar aligned to inner data columns;
   4) smaller Academic Number/Kanji marks;
   5) Nensei / Promotion mobile previews restored to compact desktop tables
      with horizontal pan and browser pinch zoom.
   Desktop layout/data/export logic remains untouched.
   ===================================================================== */

@media (min-width:769px){
  /* Hard desktop safety: mobile dock never participates in desktop layout. */
  #mobileStudentAppDock{display:none!important;visibility:hidden!important;pointer-events:none!important}
}

@media (max-width:768px){
  /* ---------------------------------------------------------------
     1) STUDENT MASTHEAD — original House artwork, full bleed.
        No plate/shape behind logo/title; readability comes only from
        continuous gradients over the artwork.
     --------------------------------------------------------------- */
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader{
    min-height:106px!important;
    height:106px!important;
    overflow:hidden!important;
    isolation:isolate!important;
    border:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.075))!important;
    border-radius:24px 24px 0 0!important;
    background:#05050a!important;
    box-shadow:0 14px 34px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04)!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader::after{
    display:none!important;
    content:none!important;
    background:none!important;
    border:0!important;
    box-shadow:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderArt{
    display:block!important;
    visibility:visible!important;
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    width:100%!important;
    height:100%!important;
    opacity:.92!important;
    border-radius:inherit!important;
    background-color:transparent!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-position:center 30%!important;
    filter:saturate(.96) contrast(1.04) brightness(.80)!important;
    transform:none!important;
    clip-path:none!important;
    -webkit-clip-path:none!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
    pointer-events:none!important;
  }
  body:not(.front-mode).dorm-kosei .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderArt{
    background-image:url("https://drive.google.com/thumbnail?id=1KJiRkV957u2OvAXbXWc1MDGXLKhDhcEv&sz=w1600")!important;
    background-position:center 31%!important;
  }
  body:not(.front-mode).dorm-tsukiyomi .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderArt{
    background-image:url("https://drive.google.com/thumbnail?id=1AXd7izgJikFHpDOTgLtK3HWfFPhRqrkC&sz=w1600")!important;
    background-position:center 29%!important;
  }
  body:not(.front-mode).dorm-yamiyo .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderArt{
    background-image:url("https://drive.google.com/thumbnail?id=1wRFGvZGcA05iAMgq5h0gvQcMmudWkk7_&sz=w1600")!important;
    background-position:center 28%!important;
  }
  body:not(.front-mode):not(.dorm-kosei):not(.dorm-tsukiyomi):not(.dorm-yamiyo) .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderArt{
    background-image:url("https://drive.google.com/thumbnail?id=1IuFDUcGJBLbRMFCWwH9a5gfnkhZM1mti&sz=w1600")!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderShade{
    display:block!important;
    visibility:visible!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    opacity:1!important;
    border-radius:inherit!important;
    /* Continuous shade only — no centered box / card / plate. */
    background:
      linear-gradient(90deg,rgba(2,2,7,.30) 0%,rgba(2,2,7,.55) 27%,rgba(2,2,7,.67) 50%,rgba(2,2,7,.52) 73%,rgba(2,2,7,.27) 100%),
      linear-gradient(180deg,rgba(2,2,7,.08) 0%,rgba(2,2,7,.18) 52%,rgba(2,2,7,.46) 100%)!important;
    box-shadow:none!important;
    transform:none!important;
    clip-path:none!important;
    -webkit-clip-path:none!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTop.m95BrandOnly{
    position:relative!important;
    z-index:5!important;
    width:100%!important;
    min-height:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 12px!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderBrand{
    width:auto!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:none!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal{
    width:49px!important;height:49px!important;min-width:49px!important;
    padding:0!important;border:0!important;border-radius:0!important;
    background:none!important;box-shadow:none!important;overflow:visible!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal::before,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal::after{display:none!important;content:none!important}
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal img{
    width:100%!important;height:100%!important;object-fit:contain!important;
    background:transparent!important;
    filter:contrast(1.22) brightness(1.10) drop-shadow(0 0 9px color-mix(in srgb,var(--accent) 38%,transparent)) drop-shadow(0 2px 8px rgba(0,0,0,.72))!important;
    mix-blend-mode:normal!important;
    -webkit-mask-image:none!important;mask-image:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTitle{
    width:auto!important;min-width:0!important;display:grid!important;align-content:center!important;justify-items:start!important;gap:2px!important;text-align:left!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTitle>span{
    margin:0!important;color:var(--accent)!important;font-size:7px!important;line-height:1!important;letter-spacing:.17em!important;text-align:left!important;text-shadow:0 1px 7px rgba(0,0,0,.95)!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTitle h2{
    margin:0!important;color:var(--strong)!important;font-family:"Cinzel","League Spartan",serif!important;font-size:15px!important;line-height:1.04!important;letter-spacing:.04em!important;text-align:left!important;white-space:nowrap!important;text-shadow:0 1px 9px rgba(0,0,0,.98),0 0 13px color-mix(in srgb,var(--accent) 15%,transparent)!important;
  }

  /* ---------------------------------------------------------------
     2) STUDENT POINT LOG — undo the later translucency redesign.
        Keep the established artwork treatment and make only the log list
        internally scroll when it grows long.
     --------------------------------------------------------------- */
  body:not(.front-mode) .mobileStudentDossier .m74PointsApp{
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    padding:10px!important;
    border:1px solid color-mix(in srgb,var(--accent) 30%,rgba(255,255,255,.07))!important;
    border-radius:16px!important;
    background-image:
      linear-gradient(180deg,rgba(4,4,8,.28) 0%,rgba(4,4,8,.53) 34%,rgba(4,4,8,.86) 72%,rgba(4,4,8,.96) 100%),
      linear-gradient(90deg,color-mix(in srgb,var(--accent) 10%,rgba(4,4,8,.68)),rgba(4,4,8,.48) 58%,rgba(4,4,8,.78)),
      url("https://drive.google.com/thumbnail?id=1Zjh2vTq4QhYOOv3LvWkz7T3JeAfrI7-q&sz=w1800")!important;
    background-size:cover,cover,cover!important;
    background-position:center,center,center top!important;
    background-repeat:no-repeat!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 30px rgba(0,0,0,.34),0 14px 31px rgba(0,0,0,.22)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74PointsApp::before{
    content:""!important;position:absolute!important;inset:5px!important;z-index:0!important;
    border:1px solid color-mix(in srgb,var(--accent) 13%,transparent)!important;border-radius:11px!important;pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74PointsApp>*{position:relative!important;z-index:1!important}
  body:not(.front-mode) .mobileStudentDossier .m74RecordHead{
    padding:8px 8px 10px!important;
    border:1px solid rgba(255,255,255,.06)!important;
    border-radius:11px!important;
    background:rgba(4,4,8,.76)!important;
    -webkit-backdrop-filter:blur(6px) saturate(1.02)!important;backdrop-filter:blur(6px) saturate(1.02)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74PointTotals{
    background:rgba(4,4,8,.79)!important;
    -webkit-backdrop-filter:blur(6px) saturate(1.02)!important;backdrop-filter:blur(6px) saturate(1.02)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74PointActivity{
    overflow:hidden!important;
    background:rgba(4,4,8,.82)!important;
    -webkit-backdrop-filter:blur(6px) saturate(1.02)!important;backdrop-filter:blur(6px) saturate(1.02)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74PointActivityHead{background:rgba(255,255,255,.025)!important}
  body:not(.front-mode) .mobileStudentDossier .m74PointList{
    display:grid!important;
    max-height:min(318px,43vh)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:thin!important;
    scrollbar-color:color-mix(in srgb,var(--accent) 70%,var(--strong)) rgba(0,0,0,.34)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74PointRow{
    background:rgba(4,4,8,.34)!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74PointRowBody p{
    color:var(--strong)!important;
    text-shadow:0 1px 4px rgba(0,0,0,.95)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74PointList::-webkit-scrollbar{width:5px!important}
  body:not(.front-mode) .mobileStudentDossier .m74PointList::-webkit-scrollbar-track{background:rgba(0,0,0,.24)!important;border-radius:999px!important}
  body:not(.front-mode) .mobileStudentDossier .m74PointList::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--strong),var(--accent))!important;border-radius:999px!important}

  /* ---------------------------------------------------------------
     3) FLOATING NAV — narrower, aligned to the inner data-column edges.
     --------------------------------------------------------------- */
  #mobileStudentAppDock{display:none!important}
  body:not(.front-mode) #mobileStudentAppDock{
    width:min(432px,calc(100vw - 48px))!important;
    min-height:52px!important;
    padding:4px!important;
    gap:5px!important;
    bottom:max(13px,calc(env(safe-area-inset-bottom) + 8px))!important;
    border-radius:17px!important;
  }
  body:not(.front-mode) #mobileStudentAppDock .mobileStudentDockSearch{
    grid-template-columns:minmax(0,1fr) 31px!important;
    gap:3px!important;
    height:42px!important;
    min-height:42px!important;
    padding:3px!important;
    border-radius:12px!important;
  }
  body:not(.front-mode) #mobileStudentAppDock .mobileStudentDockSearch input{
    height:34px!important;min-height:34px!important;padding:0 8px!important;font-size:6.6px!important;border-radius:9px!important;
  }
  body:not(.front-mode) #mobileStudentAppDock .mobileStudentDockSearch button{
    width:31px!important;min-width:31px!important;height:34px!important;min-height:34px!important;border-radius:9px!important;
  }
  body:not(.front-mode) #mobileStudentAppDock .mobileStudentDockNav{grid-template-columns:repeat(3,38px)!important;gap:2px!important}
  body:not(.front-mode) #mobileStudentAppDock .mobileDockItem{width:38px!important;height:40px!important;min-height:40px!important;border-radius:11px!important}
  body:not(.front-mode) #mobileStudentAppDock .mobileDockIcon{width:21px!important;height:21px!important}
  body:not(.front-mode) #mobileStudentAppDock .mobileDockLabel{max-width:36px!important;font-size:3.9px!important;line-height:1!important}
  body:not(.front-mode) .mobileStudentDossier{padding-bottom:78px!important}

  /* ---------------------------------------------------------------
     4) ACADEMIC — smaller Number / Kanji marks so values such as FUKA
        remain fully visible in narrow columns.
     --------------------------------------------------------------- */
  #mobileAcademicMount .m90SubjectRow>b{
    font-size:6.5px!important;
    line-height:1!important;
    letter-spacing:-.015em!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }
  #mobileAcademicMount .m90SubjectRow>b.jp{
    font-size:6.7px!important;
    line-height:1!important;
    letter-spacing:-.025em!important;
  }

  /* ---------------------------------------------------------------
     5) GENERAL PREVIEWS — restore desktop-style TABLES on mobile.
        Tables stay compact, horizontally pannable and pinch-zoom capable.
     --------------------------------------------------------------- */
  #nenseiModal,
  #promotionModal{
    padding:8px!important;
    touch-action:pan-x pan-y pinch-zoom!important;
  }
  #nenseiModal .modalCard,
  #promotionModal .modalCard{
    width:calc(100vw - 16px)!important;
    max-width:none!important;
    max-height:calc(100dvh - 16px)!important;
    overflow:hidden!important;
    border-radius:16px!important;
    touch-action:pan-x pan-y pinch-zoom!important;
  }
  #nenseiModal .modalHeader,
  #promotionModal .modalHeader{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:7px!important;
    padding:10px 11px!important;
  }
  #nenseiModal .modalTitle,
  #promotionModal .modalTitle{font-size:12px!important}
  #nenseiModal .modalSubtitle,
  #promotionModal .modalSubtitle{font-size:6px!important;line-height:1.25!important}
  #nenseiModal .modalButtons,
  #promotionModal .modalButtons{display:flex!important;gap:4px!important}
  #nenseiModal .modalButtons button,
  #promotionModal .modalButtons button{padding:6px 7px!important;border-radius:8px!important;font-size:5.3px!important;white-space:nowrap!important}
  #nenseiModal .summary,
  #promotionModal .summary{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px!important;
    padding:8px 10px!important;
  }
  #nenseiModal .summaryCard,
  #promotionModal .summaryCard{padding:7px!important;border-radius:9px!important}
  #nenseiModal .summaryLabel,
  #promotionModal .summaryLabel{font-size:5px!important}
  #nenseiModal .summaryValue,
  #promotionModal .summaryValue{margin-top:2px!important;font-size:13px!important}

  #nenseiModal .nenseiRecapBody,
  #promotionModal .tableWrap{
    max-height:calc(100dvh - 160px)!important;
    overflow:auto!important;
    padding:0 10px 12px!important;
    touch-action:pan-x pan-y pinch-zoom!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  #nenseiModal .nenseiGroupBlock{
    width:max-content!important;
    min-width:660px!important;
    max-width:none!important;
    margin-top:8px!important;
    overflow:visible!important;
    border-radius:10px!important;
  }
  #nenseiModal .nenseiGroupHeader{
    min-width:660px!important;
    padding:7px 9px!important;
    border-left-width:4px!important;
  }
  #nenseiModal .nenseiGroupTitle{font-size:8px!important}
  #nenseiModal .nenseiGroupCount{font-size:5.5px!important}

  /* Reset V94/V95 card conversion completely. */
  #nenseiModal .nenseiRecapTable,
  #nenseiModal .nenseiRecapTable thead,
  #nenseiModal .nenseiRecapTable tbody,
  #nenseiModal .nenseiRecapTable tr,
  #nenseiModal .nenseiRecapTable th,
  #nenseiModal .nenseiRecapTable td,
  #promotionModal .recapTable,
  #promotionModal .recapTable thead,
  #promotionModal .recapTable tbody,
  #promotionModal .recapTable tr,
  #promotionModal .recapTable th,
  #promotionModal .recapTable td{
    display:revert!important;
  }
  #nenseiModal .nenseiRecapTable td::before,
  #promotionModal .recapTable td::before{display:none!important;content:none!important}

  #nenseiModal .nenseiRecapTable{
    width:660px!important;
    min-width:660px!important;
    table-layout:fixed!important;
    border-collapse:collapse!important;
    color:var(--text)!important;
    font-size:6.2px!important;
  }
  #nenseiModal .nenseiRecapTable thead{display:table-header-group!important}
  #nenseiModal .nenseiRecapTable tbody{display:table-row-group!important}
  #nenseiModal .nenseiRecapTable tr{display:table-row!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important}
  #nenseiModal .nenseiRecapTable th,
  #nenseiModal .nenseiRecapTable td{display:table-cell!important;min-width:0!important;height:auto!important}
  #nenseiModal .nenseiRecapTable th{
    padding:7px 5px!important;background:#171311!important;color:#f7e7d1!important;font-size:5.5px!important;line-height:1.15!important;text-align:center!important;
  }
  #nenseiModal .nenseiRecapTable td{
    padding:7px 5px!important;border:1px solid rgba(231,198,148,.14)!important;color:var(--text)!important;font-size:6.2px!important;line-height:1.22!important;text-align:left!important;vertical-align:middle!important;overflow-wrap:anywhere!important;
  }
  #nenseiModal .nenseiRecapTable th:nth-child(1),#nenseiModal .nenseiRecapTable td:nth-child(1){width:5%!important;text-align:center!important}
  #nenseiModal .nenseiRecapTable th:nth-child(2),#nenseiModal .nenseiRecapTable td:nth-child(2){width:15%!important;text-align:center!important}
  #nenseiModal .nenseiRecapTable th:nth-child(3),#nenseiModal .nenseiRecapTable td:nth-child(3){width:22%!important}
  #nenseiModal .nenseiRecapTable th:nth-child(4),#nenseiModal .nenseiRecapTable td:nth-child(4){width:17%!important}
  #nenseiModal .nenseiRecapTable th:nth-child(5),#nenseiModal .nenseiRecapTable td:nth-child(5){width:17%!important}
  #nenseiModal .nenseiRecapTable th:nth-child(6),#nenseiModal .nenseiRecapTable td:nth-child(6){width:12%!important;text-align:center!important}
  #nenseiModal .nenseiRecapTable th:nth-child(7),#nenseiModal .nenseiRecapTable td:nth-child(7){width:12%!important;text-align:center!important}
  #nenseiModal .recapStatusBadge{min-width:50px!important;padding:4px 5px!important;font-size:5px!important}

  #promotionModal .tableWrap{width:100%!important}
  #promotionModal .recapTable{
    width:720px!important;
    min-width:720px!important;
    table-layout:fixed!important;
    border-collapse:collapse!important;
    color:var(--text)!important;
    font-size:6.2px!important;
  }
  #promotionModal .recapTable thead{display:table-header-group!important}
  #promotionModal .recapTable tbody{display:table-row-group!important}
  #promotionModal .recapTable tr{display:table-row!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important}
  #promotionModal .recapTable th,
  #promotionModal .recapTable td{display:table-cell!important;min-width:0!important;height:auto!important}
  #promotionModal .recapTable th{
    position:sticky!important;top:0!important;z-index:2!important;padding:7px 5px!important;background:#8f0e16!important;color:#f7e7d1!important;font-size:5.5px!important;line-height:1.15!important;text-align:center!important;
  }
  #promotionModal .recapTable td{
    padding:7px 5px!important;border:1px solid rgba(231,198,148,.15)!important;color:var(--text)!important;background:rgba(255,255,255,.018)!important;font-size:6.2px!important;line-height:1.22!important;text-align:left!important;vertical-align:middle!important;overflow-wrap:anywhere!important;
  }
  #promotionModal .recapTable th:nth-child(1),#promotionModal .recapTable td:nth-child(1){width:5%!important;text-align:center!important}
  #promotionModal .recapTable th:nth-child(2),#promotionModal .recapTable td:nth-child(2){width:15%!important;text-align:center!important}
  #promotionModal .recapTable th:nth-child(3),#promotionModal .recapTable td:nth-child(3){width:20%!important}
  #promotionModal .recapTable th:nth-child(4),#promotionModal .recapTable td:nth-child(4){width:12%!important;text-align:center!important}
  #promotionModal .recapTable th:nth-child(5),#promotionModal .recapTable td:nth-child(5){width:11%!important;text-align:center!important}
  #promotionModal .recapTable th:nth-child(6),#promotionModal .recapTable td:nth-child(6){width:12%!important;text-align:center!important}
  #promotionModal .recapTable th:nth-child(7),#promotionModal .recapTable td:nth-child(7){width:11%!important;text-align:center!important}
  #promotionModal .recapTable th:nth-child(8),#promotionModal .recapTable td:nth-child(8){width:14%!important}
}

@media (max-width:390px){
  body:not(.front-mode) #mobileStudentAppDock{width:calc(100vw - 48px)!important}
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader{min-height:102px!important;height:102px!important}
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal{width:46px!important;height:46px!important;min-width:46px!important}
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTitle h2{font-size:14.2px!important}
  #mobileAcademicMount .m90SubjectRow>b{font-size:6.2px!important}
  #mobileAcademicMount .m90SubjectRow>b.jp{font-size:6.4px!important}
}


/* =====================================================================
   V99 — MOBILE POLISH: DEVOTED / GP RANKING / HOME SEARCH
   Requested scope only. All rules below are mobile-only.
   Desktop geometry, data service, Academic paging, Student Point Log,
   General tables, exports and non-requested structures remain untouched.
   ===================================================================== */
@media (max-width:768px){
  /* 1) DEVOTED STUDENT — balanced ceremonial composition. */
  #mobileAcademicMount .m90DevotedCard{
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    border-color:color-mix(in srgb,var(--accent) 50%,rgba(255,255,255,.09))!important;
    background:
      linear-gradient(90deg,rgba(3,3,8,.96) 0%,rgba(3,3,8,.91) 42%,rgba(3,3,8,.68) 66%,rgba(3,3,8,.26) 100%),
      linear-gradient(180deg,rgba(3,3,8,.10),rgba(3,3,8,.42) 76%,rgba(3,3,8,.78)),
      url("https://drive.google.com/thumbnail?id=1K-2TytITfiC3OysGOO_1L5yn4iRGiAsT&sz=w2200") 88% center/auto 142% no-repeat,
      rgba(4,4,9,.94)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.055),
      inset 0 0 0 1px color-mix(in srgb,var(--accent) 9%,transparent),
      0 14px 32px rgba(0,0,0,.26),
      0 0 24px color-mix(in srgb,var(--accent) 9%,transparent)!important;
  }
  #mobileAcademicMount .m90DevotedCard::before{
    content:""!important;
    position:absolute!important;
    inset:6px!important;
    z-index:0!important;
    border:1px solid color-mix(in srgb,var(--accent) 16%,rgba(255,255,255,.025))!important;
    border-radius:10px!important;
    pointer-events:none!important;
  }
  #mobileAcademicMount .m90DevotedCard::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    pointer-events:none!important;
    background:
      radial-gradient(circle at 78% 23%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 28%),
      linear-gradient(116deg,transparent 62%,rgba(255,255,255,.025) 63%,transparent 66%)!important;
  }
  #mobileAcademicMount .m90DevotedCard>.m90SemesterHead,
  #mobileAcademicMount .m90DevotedCard>.m90DevotedDetails{position:relative!important;z-index:2!important}
  #mobileAcademicMount .m90DevotedCard .m90SemesterHead{
    min-height:48px!important;
    padding:9px 11px!important;
    background:linear-gradient(90deg,rgba(3,3,8,.90),rgba(3,3,8,.62) 64%,rgba(3,3,8,.18))!important;
    border-bottom-color:color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.035))!important;
    text-shadow:0 1px 7px rgba(0,0,0,.92)!important;
  }
  #mobileAcademicMount .m90DevotedCard .m90SemesterHead>div:first-child span{
    color:color-mix(in srgb,var(--accent) 76%,var(--muted))!important;
    letter-spacing:.16em!important;
  }
  #mobileAcademicMount .m90DevotedCard .m90SemesterHead>div:first-child strong{
    font-family:"Cinzel","League Spartan",serif!important;
    font-size:11.4px!important;
    letter-spacing:.055em!important;
  }
  #mobileAcademicMount .m90DevotedCard .m90Nensei{
    min-height:23px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 8px!important;
    background:rgba(4,4,9,.62)!important;
    border-color:color-mix(in srgb,var(--accent) 40%,rgba(255,255,255,.07))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  }
  #mobileAcademicMount .m90DevotedDetails{
    display:grid!important;
    grid-template-columns:76px minmax(0,1fr)!important;
    grid-template-rows:minmax(42px,auto) minmax(42px,auto) auto!important;
    gap:7px!important;
    padding:10px 12px 12px!important;
    background:linear-gradient(90deg,rgba(2,2,6,.22),rgba(2,2,6,.07) 72%,transparent)!important;
  }
  #mobileAcademicMount .m90DevotedScore{
    grid-column:1!important;
    grid-row:1 / span 2!important;
    min-height:91px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    padding:8px 6px!important;
    text-align:center!important;
    border:1px solid color-mix(in srgb,var(--accent) 46%,rgba(255,255,255,.08))!important;
    border-radius:13px!important;
    background:
      radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 48%),
      linear-gradient(160deg,rgba(7,7,13,.88),rgba(3,3,8,.68))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 9px 20px rgba(0,0,0,.23),0 0 16px color-mix(in srgb,var(--accent) 8%,transparent)!important;
    -webkit-backdrop-filter:blur(8px) saturate(1.06)!important;
    backdrop-filter:blur(8px) saturate(1.06)!important;
  }
  #mobileAcademicMount .m90DevotedScore span{
    max-width:58px!important;
    color:color-mix(in srgb,var(--accent) 72%,var(--muted))!important;
    font-size:4.55px!important;
    line-height:1.2!important;
    letter-spacing:.06em!important;
    text-transform:uppercase!important;
  }
  #mobileAcademicMount .m90DevotedScore strong{
    margin-top:6px!important;
    color:var(--strong)!important;
    font-size:25px!important;
    line-height:.95!important;
    letter-spacing:-.03em!important;
    text-shadow:0 0 14px color-mix(in srgb,var(--accent) 30%,transparent),0 2px 8px rgba(0,0,0,.96)!important;
  }
  #mobileAcademicMount .m90DevotedField{
    grid-column:2!important;
    min-width:0!important;
    min-height:42px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    padding:7px 9px!important;
    border:1px solid rgba(255,255,255,.065)!important;
    border-radius:10px!important;
    background:linear-gradient(145deg,rgba(5,5,10,.76),rgba(4,4,9,.50))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
    -webkit-backdrop-filter:blur(7px) saturate(1.04)!important;
    backdrop-filter:blur(7px) saturate(1.04)!important;
  }
  #mobileAcademicMount .m90DevotedField:nth-child(2){grid-row:1!important}
  #mobileAcademicMount .m90DevotedField:nth-child(3){grid-row:2!important}
  #mobileAcademicMount .m90DevotedField span{
    color:color-mix(in srgb,var(--accent) 68%,var(--muted))!important;
    font-size:4.65px!important;
    line-height:1.1!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
  }
  #mobileAcademicMount .m90DevotedField strong{
    margin-top:4px!important;
    color:var(--strong)!important;
    font-size:7.25px!important;
    line-height:1.26!important;
    text-shadow:0 1px 6px rgba(0,0,0,.96)!important;
    overflow-wrap:anywhere!important;
  }
  #mobileAcademicMount .m90DevotedFile{
    grid-column:1 / -1!important;
    grid-row:3!important;
    min-height:38px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    padding:6px 7px 6px 9px!important;
    border:1px solid color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.055))!important;
    border-radius:10px!important;
    background:linear-gradient(90deg,rgba(4,4,9,.72),rgba(4,4,9,.38) 72%,rgba(4,4,9,.22))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  }
  #mobileAcademicMount .m90DevotedFile>span{
    color:color-mix(in srgb,var(--accent) 72%,var(--muted))!important;
    font-size:4.8px!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
  }
  #mobileAcademicMount .m90DevotedFile button{
    margin:0!important;
    min-height:27px!important;
    padding:0 9px!important;
    border:1px solid rgba(255,255,255,.11)!important;
    border-radius:8px!important;
    color:#15100d!important;
    background:linear-gradient(135deg,var(--accent),var(--strong) 58%,var(--accent2))!important;
    box-shadow:0 5px 12px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.18)!important;
    font-size:5px!important;
    font-weight:900!important;
    letter-spacing:.045em!important;
  }

  /* 2) GP RANKING — browser-safe compact title + vertically centered rank. */
  body.front-mode .gpRankingSection .gpRankingHeader>div:first-child{min-width:0!important;width:100%!important}
  body.front-mode .gpRankingSection .gpRankingTitle{
    max-width:100%!important;
    margin:4px 0 0!important;
    font-family:"League Spartan","Arial Narrow",Arial,sans-serif!important;
    font-size:clamp(13.2px,3.85vw,15px)!important;
    font-weight:900!important;
    line-height:1.05!important;
    letter-spacing:.055em!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  body.front-mode .gpRankingSection .gpRankNo,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(-n+3) .gpRankNo,
  body.front-mode .gpRankingSection .gpArena>.gpRankCard:nth-child(n+4) .gpRankNo{
    width:20px!important;
    min-width:20px!important;
    height:20px!important;
    min-height:20px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:1px 0 0!important;
    line-height:1!important;
    font-size:6.3px!important;
    font-variant-numeric:tabular-nums!important;
    border-radius:50%!important;
    box-sizing:border-box!important;
  }

  /* 3) NO-PHOTO RANKING — center the House crest, never hang it below. */
  body.front-mode .gpRankingSection .gpRankAvatar.isFallback .gpRankAvatarFrame{
    position:relative!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 50% 40%,var(--gpGlow2),transparent 58%),
      linear-gradient(145deg,rgba(8,8,13,.96),rgba(3,3,8,.90))!important;
  }
  body.front-mode .gpRankingSection .gpRankAvatar.isFallback .gpRankAvatarFrame>span{display:none!important}
  body.front-mode .gpRankingSection .gpRankAvatar.isFallback .gpRankHouseWatermark{
    inset:5px!important;
    width:38px!important;
    height:38px!important;
    opacity:.08!important;
    filter:grayscale(.08) drop-shadow(0 0 10px var(--gpGlow))!important;
  }
  body.front-mode .gpRankingSection .gpRankAvatar.isFallback .gpRankHouseBadge{
    left:50%!important;
    top:50%!important;
    right:auto!important;
    bottom:auto!important;
    width:31px!important;
    height:31px!important;
    display:grid!important;
    place-items:center!important;
    transform:translate(-50%,-50%)!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body.front-mode .gpRankingSection .gpRankAvatar.isFallback .gpRankHouseBadge img{
    width:27px!important;
    height:27px!important;
    object-fit:contain!important;
    filter:drop-shadow(0 0 7px var(--gpGlow))!important;
  }

  /* 4) HOME SEARCH — same footprint as V98, redesigned surface only. */
  body.front-mode .hero .searchBar{
    position:relative!important;
    width:min(252px,68vw)!important;
    max-width:252px!important;
    height:35px!important;
    min-height:35px!important;
    grid-template-columns:minmax(0,1fr) 29px!important;
    gap:3px!important;
    padding:3px!important;
    overflow:hidden!important;
    border:1px solid color-mix(in srgb,var(--accent) 38%,rgba(255,255,255,.10))!important;
    border-radius:13px!important;
    background:
      radial-gradient(circle at 10% 50%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 48%),
      linear-gradient(145deg,rgba(8,8,13,.82),rgba(2,2,7,.70))!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.055),
      inset 0 0 18px color-mix(in srgb,var(--accent) 4%,transparent),
      0 8px 20px rgba(0,0,0,.22)!important;
    -webkit-backdrop-filter:blur(10px) saturate(1.08)!important;
    backdrop-filter:blur(10px) saturate(1.08)!important;
  }
  body.front-mode .hero .searchBar::before{
    content:""!important;
    position:absolute!important;
    left:11px!important;
    top:50%!important;
    width:3px!important;
    height:3px!important;
    border-radius:50%!important;
    transform:translateY(-50%)!important;
    background:var(--accent)!important;
    box-shadow:0 0 8px color-mix(in srgb,var(--accent) 60%,transparent)!important;
    opacity:.75!important;
    pointer-events:none!important;
  }
  body.front-mode .hero .searchBar input{
    height:29px!important;
    min-height:29px!important;
    padding:0 7px 0 14px!important;
    border:0!important;
    border-radius:9px!important;
    outline:0!important;
    color:var(--strong)!important;
    background:transparent!important;
    box-shadow:none!important;
    font-size:9.4px!important;
    font-weight:700!important;
    text-align:left!important;
  }
  body.front-mode .hero .searchBar input::placeholder{color:color-mix(in srgb,var(--muted) 76%,transparent)!important}
  body.front-mode .hero .searchBar input:focus{border:0!important;box-shadow:none!important}
  body.front-mode .hero .searchBar:focus-within{
    border-color:color-mix(in srgb,var(--accent) 68%,rgba(255,255,255,.15))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.065),0 0 0 2px color-mix(in srgb,var(--accent) 10%,transparent),0 8px 20px rgba(0,0,0,.22)!important;
  }
  body.front-mode .hero .searchBar button{
    width:29px!important;
    min-width:29px!important;
    height:29px!important;
    min-height:29px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid rgba(255,255,255,.13)!important;
    border-radius:9px!important;
    color:#15100d!important;
    background:linear-gradient(145deg,var(--strong),var(--accent) 58%,var(--accent2))!important;
    box-shadow:0 4px 10px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.22)!important;
  }
  body.front-mode .hero .searchBar button .mobileSearchIcon,
  body.front-mode .hero .searchBar button .mobileSearchIcon svg{width:12px!important;height:12px!important}
}

@media (max-width:390px){
  body.front-mode .hero .searchBar{width:min(238px,66vw)!important;max-width:238px!important}
}

@media (max-width:360px){
  body.front-mode .gpRankingSection .gpRankingTitle{font-size:13.2px!important;letter-spacing:.04em!important}
}


/* =====================================================================
   V100 — MOBILE CREST FALLBACK / NON-RECTANGULAR HEADER LOGO GLOW /
          PREMIUM ESSENTIAL CARDS / UPPER PROFILE SWIPE
   Scope: mobile only. Desktop layout and desktop data presentation remain
   untouched. Student Point Log / Academic Records swipe is not repurposed.
   ===================================================================== */
@media (max-width:768px){
  body.front-mode .gpRankingSection .gpRankAvatar.isFallback,
  body.front-mode .gpRankingSection .gpRankAvatar.isPhotoUnavailable{
    display:grid!important;
    place-items:center!important;
  }
  body.front-mode .gpRankingSection .gpRankAvatar.isFallback .gpRankAvatarFrame,
  body.front-mode .gpRankingSection .gpRankAvatar.isPhotoUnavailable .gpRankAvatarFrame{
    position:relative!important;
    overflow:hidden!important;
    display:grid!important;
    place-items:center!important;
    background:
      radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--gpGlow) 20%,transparent),transparent 58%),
      linear-gradient(145deg,rgba(8,8,13,.97),rgba(3,3,8,.92))!important;
  }
  body.front-mode .gpRankingSection .gpRankAvatar.isFallback .gpRankHouseWatermark,
  body.front-mode .gpRankingSection .gpRankAvatar.isPhotoUnavailable .gpRankHouseWatermark{
    display:none!important;
  }
  body.front-mode .gpRankingSection .gpRankAvatar.isPhotoUnavailable .gpRankAvatarImage{
    display:none!important;
  }
  body.front-mode .gpRankingSection .gpRankAvatar.isFallback .gpRankAvatarFrame>span,
  body.front-mode .gpRankingSection .gpRankAvatar.isPhotoUnavailable .gpRankAvatarFrame>span{
    display:none!important;
  }
  body.front-mode .gpRankingSection .gpRankAvatar.isFallback .gpRankHouseBadge,
  body.front-mode .gpRankingSection .gpRankAvatar.isPhotoUnavailable .gpRankHouseBadge{
    left:50%!important;
    top:50%!important;
    right:auto!important;
    bottom:auto!important;
    width:32px!important;
    height:32px!important;
    display:grid!important;
    place-items:center!important;
    transform:translate(-50%,-50%)!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body.front-mode .gpRankingSection .gpRankAvatar.isFallback .gpRankHouseBadge img,
  body.front-mode .gpRankingSection .gpRankAvatar.isPhotoUnavailable .gpRankHouseBadge img{
    width:28px!important;
    height:28px!important;
    object-fit:contain!important;
    object-position:center!important;
    filter:drop-shadow(0 0 7px var(--gpGlow))!important;
  }

  body.front-mode .hero>.heroContent>.desktopHeroLogo,
  body.front-mode .mobileCornerLogo,
  body.front-mode .mobileAppBrandSeal,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal{
    position:relative!important;
    isolation:isolate!important;
    border:0!important;
    background:
      radial-gradient(circle at 50% 50%,
        color-mix(in srgb,var(--accent) 14%,transparent) 0%,
        color-mix(in srgb,var(--accent) 8%,transparent) 34%,
        transparent 70%)!important;
    box-shadow:none!important;
    filter:none!important;
  }
  body.front-mode .hero>.heroContent>.desktopHeroLogo::before,
  body.front-mode .hero>.heroContent>.desktopHeroLogo::after,
  body.front-mode .mobileCornerLogo::before,
  body.front-mode .mobileCornerLogo::after,
  body.front-mode .mobileAppBrandSeal::before,
  body.front-mode .mobileAppBrandSeal::after,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal::before,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal::after{
    display:none!important;
    content:none!important;
    background:none!important;
    box-shadow:none!important;
  }
  body.front-mode .hero>.heroContent>.desktopHeroLogo img,
  body.front-mode .mobileCornerLogo img,
  body.front-mode .mobileAppBrandSeal img,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    background:transparent!important;
    box-shadow:none!important;
    mix-blend-mode:normal!important;
    filter:brightness(1.08) contrast(1.18)!important;
    -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 0 58%,rgba(0,0,0,.98) 68%,rgba(0,0,0,.72) 80%,transparent 100%)!important;
    mask-image:radial-gradient(ellipse at 50% 50%,#000 0 58%,rgba(0,0,0,.98) 68%,rgba(0,0,0,.72) 80%,transparent 100%)!important;
    -webkit-mask-size:100% 100%!important;
    mask-size:100% 100%!important;
    -webkit-mask-repeat:no-repeat!important;
    mask-repeat:no-repeat!important;
    -webkit-mask-position:center!important;
    mask-position:center!important;
  }

  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFacts{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard{
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    min-height:66px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    padding:10px 11px!important;
    border:1px solid color-mix(in srgb,var(--accent) 25%,rgba(255,255,255,.075))!important;
    border-radius:15px!important;
    background:
      linear-gradient(145deg,rgba(255,255,255,.050),rgba(255,255,255,.010) 34%,rgba(3,3,9,.18)),
      color-mix(in srgb,var(--accent) 2.5%,rgba(4,4,10,.32))!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.060),
      inset 0 -1px 0 rgba(0,0,0,.22),
      0 9px 22px rgba(0,0,0,.16)!important;
    -webkit-backdrop-filter:blur(9px) saturate(1.04)!important;
    backdrop-filter:blur(9px) saturate(1.04)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact::before,
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact::after,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectEssentials .mobileDirectMiniCard::before,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectEssentials .mobileDirectMiniCard::after,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectEssentials .mobileDirectMiniCard:nth-child(2)::before,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectEssentials .mobileDirectMiniCard:nth-child(2)::after,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectFinanceCard::before,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectFinanceCard::after{
    display:none!important;
    content:none!important;
    width:0!important;
    height:0!important;
    opacity:0!important;
    background:none!important;
    border:0!important;
    box-shadow:none!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact span,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard .mobileDirectLabel{
    display:block!important;
    margin:0!important;
    color:color-mix(in srgb,var(--accent) 76%,var(--muted))!important;
    font-size:6.2px!important;
    font-weight:900!important;
    line-height:1.1!important;
    letter-spacing:.11em!important;
    text-transform:uppercase!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact strong,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard .mobileDirectValue{
    display:block!important;
    min-width:0!important;
    margin-top:7px!important;
    overflow:hidden!important;
    color:var(--strong)!important;
    font-size:10.4px!important;
    font-weight:850!important;
    line-height:1.12!important;
    letter-spacing:.012em!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard .mobileDirectXLink{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:6px!important;
    color:inherit!important;
    text-decoration:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard .mobileDirectXLink span{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard .mobileDirectXLink b{
    flex:0 0 auto!important;
    color:var(--accent)!important;
    font-size:10px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileDirectFinanceCard{
    isolation:isolate!important;
  }

  body:not(.front-mode) .mobileStudentDossier .mobileProfileSwipe{
    width:100%!important;
    min-width:0!important;
    margin-top:8px!important;
    padding:9px!important;
    overflow:hidden!important;
    border:1px solid color-mix(in srgb,var(--accent) 24%,rgba(255,255,255,.065))!important;
    border-radius:18px!important;
    background:
      linear-gradient(145deg,rgba(255,255,255,.030),rgba(3,3,9,.12)),
      color-mix(in srgb,var(--accent) 2%,rgba(3,3,9,.20))!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.045),
      0 12px 28px rgba(0,0,0,.14)!important;
    -webkit-backdrop-filter:blur(8px) saturate(1.03)!important;
    backdrop-filter:blur(8px) saturate(1.03)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfileSwipeHead{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    margin-bottom:7px!important;
    padding:0 2px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfileSwipeHeading{
    min-width:0!important;
    display:grid!important;
    gap:2px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfileSwipeHeading span{
    color:var(--accent)!important;
    font-size:5.7px!important;
    font-weight:900!important;
    line-height:1!important;
    letter-spacing:.14em!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfileSwipeHeading strong{
    min-width:0!important;
    overflow:hidden!important;
    color:var(--muted)!important;
    font-size:6.3px!important;
    font-weight:750!important;
    line-height:1.2!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfileSwipeCounter{
    flex:0 0 auto!important;
    min-width:32px!important;
    padding:4px 6px!important;
    border:1px solid color-mix(in srgb,var(--accent) 25%,rgba(255,255,255,.05))!important;
    border-radius:999px!important;
    color:var(--accent)!important;
    background:rgba(0,0,0,.22)!important;
    font-size:5.8px!important;
    font-weight:900!important;
    text-align:center!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfilePreviewRail{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)!important;
    gap:5px!important;
    align-items:stretch!important;
    margin-bottom:8px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfilePreview{
    min-width:0!important;
    min-height:45px!important;
    display:grid!important;
    grid-template-columns:22px minmax(0,1fr)!important;
    align-items:center!important;
    gap:6px!important;
    padding:6px 7px!important;
    border:1px solid color-mix(in srgb,var(--accent) 16%,rgba(255,255,255,.055))!important;
    border-radius:12px!important;
    color:var(--muted)!important;
    background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(0,0,0,.16))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
    text-align:left!important;
    cursor:pointer!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfilePreview.is-active{
    border-color:color-mix(in srgb,var(--accent) 44%,rgba(255,255,255,.08))!important;
    color:var(--strong)!important;
    background:
      radial-gradient(circle at 0 50%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 58%),
      linear-gradient(145deg,rgba(255,255,255,.040),rgba(0,0,0,.15))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 0 16px color-mix(in srgb,var(--accent) 7%,transparent)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfilePreviewIndex{
    width:22px!important;
    height:22px!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid color-mix(in srgb,var(--accent) 24%,rgba(255,255,255,.05))!important;
    border-radius:8px!important;
    color:var(--accent)!important;
    background:rgba(0,0,0,.24)!important;
    font-size:5.8px!important;
    font-weight:900!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfilePreviewCopy{
    min-width:0!important;
    display:grid!important;
    gap:2px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfilePreviewCopy small{
    color:color-mix(in srgb,var(--accent) 64%,var(--muted))!important;
    font-size:4.6px!important;
    font-weight:900!important;
    line-height:1!important;
    letter-spacing:.08em!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfilePreviewCopy strong{
    min-width:0!important;
    overflow:hidden!important;
    color:inherit!important;
    font-size:6.2px!important;
    font-weight:850!important;
    line-height:1.1!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfileSwipeCue{
    display:grid!important;
    place-items:center!important;
    align-content:center!important;
    gap:0!important;
    color:var(--accent)!important;
    text-align:center!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfileSwipeCue b{
    font-size:11px!important;
    line-height:.8!important;
    font-weight:700!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfileSwipeCue small{
    margin-top:2px!important;
    color:var(--muted)!important;
    font-size:4.2px!important;
    font-weight:900!important;
    letter-spacing:.06em!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfileSwipeViewport{
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    transition:height .28s ease!important;
    touch-action:pan-y pinch-zoom!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfileSwipeTrack{
    width:100%!important;
    display:flex!important;
    align-items:flex-start!important;
    will-change:transform!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfileSwipePage{
    width:100%!important;
    min-width:100%!important;
    flex:0 0 100%!important;
    padding:0!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfileSwipePage>.mobileDirectCard{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    border-radius:14px!important;
    background:
      linear-gradient(145deg,rgba(255,255,255,.035),rgba(3,3,9,.16)),
      color-mix(in srgb,var(--accent) 1.5%,rgba(3,3,9,.28))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 20px rgba(0,0,0,.12)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfileSwipePage .mobileDirectCardHead{
    min-height:41px!important;
    padding:8px 9px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfileSwipePage .mobileDirectCardHead span{
    font-size:4.8px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfileSwipePage .mobileDirectCardHead h3{
    margin-top:2px!important;
    font-size:8.5px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfileSwipePage .mobileDirectCardIcon{
    width:25px!important;
    height:25px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:9px!important;
    font-size:9px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfileSwipePage .mobileDirectJourney{
    max-height:214px!important;
    overflow:auto!important;
    padding-right:2px!important;
    scrollbar-width:thin!important;
    scrollbar-color:var(--accent) transparent!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfileSwipePage .mobileDirectMediaPreview{
    min-height:145px!important;
    max-height:205px!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
    background:rgba(0,0,0,.15)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfileSwipePage .mobileDirectMediaPreview img{
    width:100%!important;
    max-width:100%!important;
    max-height:205px!important;
    object-fit:contain!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfileSwipePage .mobileDirectMediaAction{
    padding:7px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfileSwipeDots{
    min-height:15px!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
    gap:5px!important;
    padding-top:6px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfileSwipeDots button{
    width:13px!important;
    height:3px!important;
    min-width:13px!important;
    min-height:3px!important;
    padding:0!important;
    border:0!important;
    border-radius:999px!important;
    background:color-mix(in srgb,var(--muted) 38%,transparent)!important;
    box-shadow:none!important;
    cursor:pointer!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfileSwipeDots button.is-active{
    width:26px!important;
    background:linear-gradient(90deg,var(--accent),var(--strong))!important;
    box-shadow:0 0 8px color-mix(in srgb,var(--accent) 28%,transparent)!important;
  }
}

@media (max-width:390px){
  body:not(.front-mode) .mobileStudentDossier .mobileProfilePreviewRail{
    grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)!important;
    gap:4px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfilePreview{
    grid-template-columns:20px minmax(0,1fr)!important;
    min-height:43px!important;
    padding:5px 6px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileProfilePreviewIndex{
    width:20px!important;height:20px!important;
  }
}


/* =====================================================================
   V101 — MOBILE-ONLY POLISH
   1) Deterministic centered House crest for GP-ranking no-photo states.
   2) Header logo glow rebuilt as a circular halo, never an image-box glow.
   3) Current Grade / ID / X / DOB rebuilt as clean premium credential cards.
   Desktop rules and all unrelated mobile sections remain untouched.
   ===================================================================== */
.gpRankMobileFallbackCrest{display:none}

@media (max-width:768px){
  /* GP RANKING: the mobile fallback crest now lives INSIDE the photo frame.
     The legacy external House badge is hidden only when there is no usable photo. */
  .gpRankingSection .gpRankAvatar.isFallback .gpRankHouseBadge,
  .gpRankingSection .gpRankAvatar.isPhotoUnavailable .gpRankHouseBadge,
  .gpRankingSection .gpRankAvatar.isFallback .gpRankHouseWatermark,
  .gpRankingSection .gpRankAvatar.isPhotoUnavailable .gpRankHouseWatermark{
    display:none!important;
  }
  .gpRankingSection .gpRankAvatar.isFallback .gpRankAvatarImage,
  .gpRankingSection .gpRankAvatar.isPhotoUnavailable .gpRankAvatarImage,
  .gpRankingSection .gpRankAvatar.isFallback .gpRankAvatarFrame>span:not(.gpRankMobileFallbackCrest),
  .gpRankingSection .gpRankAvatar.isPhotoUnavailable .gpRankAvatarFrame>span:not(.gpRankMobileFallbackCrest){
    display:none!important;
  }
  .gpRankingSection .gpRankAvatar.isFallback .gpRankAvatarFrame,
  .gpRankingSection .gpRankAvatar.isPhotoUnavailable .gpRankAvatarFrame{
    position:relative!important;
    overflow:hidden!important;
    display:grid!important;
    place-items:center!important;
    background:
      radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--gpGlow) 17%,transparent),transparent 58%),
      linear-gradient(155deg,rgba(10,10,15,.96),rgba(3,3,8,.93))!important;
  }
  .gpRankingSection .gpRankAvatar.isFallback .gpRankMobileFallbackCrest,
  .gpRankingSection .gpRankAvatar.isPhotoUnavailable .gpRankMobileFallbackCrest{
    position:absolute!important;
    inset:0!important;
    z-index:8!important;
    width:100%!important;
    height:100%!important;
    display:grid!important;
    place-items:center!important;
    transform:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }
  .gpRankingSection .gpRankAvatar.isFallback .gpRankMobileFallbackCrest img,
  .gpRankingSection .gpRankAvatar.isPhotoUnavailable .gpRankMobileFallbackCrest img{
    width:31px!important;
    height:31px!important;
    max-width:64%!important;
    max-height:64%!important;
    display:block!important;
    margin:0!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:none!important;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.34))!important;
  }

  /* HEADER LOGOS: remove every rectangular glow source. The halo is a
     dedicated circular pseudo-element behind the logo, not a filter on the image box. */
  body.front-mode .hero>.heroContent>.desktopHeroLogo,
  body.front-mode .mobileCornerLogo,
  body.front-mode .mobileAppBrandSeal,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal{
    position:relative!important;
    isolation:isolate!important;
    overflow:visible!important;
    border:0!important;
    background:none!important;
    box-shadow:none!important;
    filter:none!important;
  }
  body.front-mode .hero>.heroContent>.desktopHeroLogo::after,
  body.front-mode .mobileCornerLogo::after,
  body.front-mode .mobileAppBrandSeal::after,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal::after{
    display:none!important;
    content:none!important;
  }
  body.front-mode .hero>.heroContent>.desktopHeroLogo::before,
  body.front-mode .mobileCornerLogo::before,
  body.front-mode .mobileAppBrandSeal::before,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal::before{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    z-index:0!important;
    width:62%!important;
    height:62%!important;
    display:block!important;
    transform:translate(-50%,-50%)!important;
    border:0!important;
    border-radius:50%!important;
    background:radial-gradient(circle,
      color-mix(in srgb,var(--accent) 18%,transparent) 0%,
      color-mix(in srgb,var(--accent) 10%,transparent) 38%,
      transparent 72%)!important;
    box-shadow:none!important;
    filter:blur(8px)!important;
    opacity:.82!important;
    pointer-events:none!important;
  }
  body.front-mode .hero>.heroContent>.desktopHeroLogo img,
  body.front-mode .mobileCornerLogo img,
  body.front-mode .mobileAppBrandSeal img,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal img{
    position:relative!important;
    z-index:1!important;
    width:100%!important;
    height:100%!important;
    display:block!important;
    object-fit:contain!important;
    background:transparent!important;
    box-shadow:none!important;
    filter:none!important;
    mix-blend-mode:normal!important;
    -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 0 72%,rgba(0,0,0,.96) 82%,rgba(0,0,0,.55) 91%,transparent 100%)!important;
    mask-image:radial-gradient(ellipse at 50% 50%,#000 0 72%,rgba(0,0,0,.96) 82%,rgba(0,0,0,.55) 91%,transparent 100%)!important;
    -webkit-mask-size:100% 100%!important;
    mask-size:100% 100%!important;
    -webkit-mask-repeat:no-repeat!important;
    mask-repeat:no-repeat!important;
    -webkit-mask-position:center!important;
    mask-position:center!important;
  }

  /* STUDENT ESSENTIALS: a restrained 2x2 credential-card language.
     No decorative motifs, rails, diamonds, or pseudo ornaments. */
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFacts,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectEssentials{
    gap:8px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard{
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    min-height:60px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    padding:11px 12px!important;
    border:1px solid color-mix(in srgb,var(--accent) 31%,rgba(255,255,255,.095))!important;
    border-radius:13px!important;
    background:
      linear-gradient(180deg,
        color-mix(in srgb,var(--accent) 4%,rgba(255,255,255,.055)) 0%,
        rgba(8,8,14,.42) 48%,
        rgba(3,3,8,.52) 100%)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.075),
      inset 0 0 0 1px rgba(255,255,255,.012),
      0 8px 20px rgba(0,0,0,.14)!important;
    -webkit-backdrop-filter:blur(11px) saturate(1.04)!important;
    backdrop-filter:blur(11px) saturate(1.04)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact::before,
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact::after,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard::before,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard::after{
    display:none!important;
    content:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact span,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard .mobileDirectLabel{
    display:block!important;
    margin:0!important;
    color:color-mix(in srgb,var(--accent) 82%,var(--muted))!important;
    font-size:6.2px!important;
    font-weight:900!important;
    line-height:1.05!important;
    letter-spacing:.13em!important;
    text-transform:uppercase!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact strong,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard .mobileDirectValue{
    width:100%!important;
    min-width:0!important;
    display:block!important;
    margin:7px 0 0!important;
    overflow:hidden!important;
    color:var(--strong)!important;
    font-size:10.8px!important;
    font-weight:850!important;
    line-height:1.08!important;
    letter-spacing:.01em!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-variant-numeric:tabular-nums!important;
  }
  body:not(.front-mode) .mobileStudentDossier #mobileSummaryId{
    font-size:9.7px!important;
    letter-spacing:.025em!important;
  }
  body:not(.front-mode) .mobileStudentDossier #mobileSummaryGrade{
    font-size:11.4px!important;
  }
  body:not(.front-mode) .mobileStudentDossier #mobileDirectDob{
    font-size:10.5px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard .mobileDirectXLink{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:7px!important;
    color:inherit!important;
    text-decoration:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard .mobileDirectXLink span{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard .mobileDirectXLink b{
    width:20px!important;
    height:20px!important;
    flex:0 0 20px!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid color-mix(in srgb,var(--accent) 28%,rgba(255,255,255,.08))!important;
    border-radius:7px!important;
    color:var(--accent)!important;
    background:rgba(0,0,0,.20)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
    font-size:8.5px!important;
    line-height:1!important;
  }
}

@media (max-width:390px){
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard{
    min-height:58px!important;
    padding:10px 11px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact strong,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard .mobileDirectValue{
    font-size:10.2px!important;
  }
  body:not(.front-mode) .mobileStudentDossier #mobileSummaryId{font-size:9.2px!important}
  body:not(.front-mode) .mobileStudentDossier #mobileSummaryGrade{font-size:10.9px!important}
}


/* =====================================================================
   V102 — MOBILE-ONLY REFINEMENT
   1) Ranking no-photo crest is structurally centred inside the avatar frame.
   2) Header logos use an intentional faceted medallion instead of box-like glow.
   3) Profile swipe starts with official media, then activity.
   4) Grade / ID / X / DOB use premium credential tiles.
   5) Record swipe exposes both destinations before the gesture.
   6) GP Ranking heading is browser-safe and balanced.
   7) Home masthead is shorter; Japanese eyebrow is smaller.
   ===================================================================== */
@media (max-width:768px){
  /* 1 — GP ranking no-photo crest: absolute centring within the 48px frame. */
  body.front-mode .gpRankingSection .gpRankAvatar.isFallback,
  body.front-mode .gpRankingSection .gpRankAvatar.isPhotoUnavailable{
    overflow:visible!important;
  }
  body.front-mode .gpRankingSection .gpRankAvatar.isFallback > .gpRankHouseBadge,
  body.front-mode .gpRankingSection .gpRankAvatar.isPhotoUnavailable > .gpRankHouseBadge,
  body.front-mode .gpRankingSection .gpRankAvatar.isFallback > .gpRankHouseWatermark,
  body.front-mode .gpRankingSection .gpRankAvatar.isPhotoUnavailable > .gpRankHouseWatermark{
    display:none!important;
  }
  body.front-mode .gpRankingSection .gpRankAvatar.isFallback .gpRankAvatarFrame,
  body.front-mode .gpRankingSection .gpRankAvatar.isPhotoUnavailable .gpRankAvatarFrame{
    position:relative!important;
    overflow:hidden!important;
    display:block!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    background:linear-gradient(155deg,rgba(11,11,18,.98),rgba(3,3,8,.98))!important;
  }
  body.front-mode .gpRankingSection .gpRankAvatar.isFallback .gpRankMobileFallbackCrest,
  body.front-mode .gpRankingSection .gpRankAvatar.isPhotoUnavailable .gpRankMobileFallbackCrest{
    position:absolute!important;
    inset:0!important;
    z-index:20!important;
    width:48px!important;
    height:48px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
    writing-mode:horizontal-tb!important;
    pointer-events:none!important;
  }
  body.front-mode .gpRankingSection .gpRankAvatar.isFallback .gpRankMobileFallbackCrest img,
  body.front-mode .gpRankingSection .gpRankAvatar.isPhotoUnavailable .gpRankMobileFallbackCrest img{
    position:static!important;
    width:30px!important;
    height:30px!important;
    max-width:30px!important;
    max-height:30px!important;
    display:block!important;
    margin:0!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:none!important;
    filter:drop-shadow(0 0 6px color-mix(in srgb,var(--gpGlow) 42%,transparent))!important;
  }
  body.front-mode .gpRankingSection .gpRankAvatar.isFallback .gpRankFallbackInitial{
    position:absolute!important;
    inset:0!important;
    width:48px!important;
    height:48px!important;
    display:grid!important;
    place-items:center!important;
    margin:0!important;
    padding:0!important;
    color:var(--strong)!important;
    background:transparent!important;
    border:0!important;
    font-size:15px!important;
    line-height:1!important;
    writing-mode:horizontal-tb!important;
    transform:none!important;
  }

  /* 2 — All mobile header seals become a deliberate faceted medallion.
     The shape makes the glow intentional and prevents a square luminous plate. */
  body.front-mode .hero>.heroContent>.desktopHeroLogo,
  body.front-mode .mobileCornerLogo,
  body.front-mode .mobileAppBrandSeal,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal{
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    padding:5px!important;
    border:0!important;
    clip-path:polygon(50% 0,84% 10%,100% 38%,96% 72%,72% 96%,36% 100%,7% 82%,0 48%,14% 16%)!important;
    background:
      radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.055)),transparent 58%),
      linear-gradient(145deg,rgba(18,18,27,.96),color-mix(in srgb,var(--accent) 10%,rgba(3,3,8,.96)))!important;
    box-shadow:none!important;
    filter:drop-shadow(0 5px 8px rgba(0,0,0,.32)) drop-shadow(0 0 7px color-mix(in srgb,var(--accent) 24%,transparent))!important;
  }
  body.front-mode .hero>.heroContent>.desktopHeroLogo::before,
  body.front-mode .mobileCornerLogo::before,
  body.front-mode .mobileAppBrandSeal::before,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal::before{
    content:""!important;
    position:absolute!important;
    inset:2px!important;
    z-index:0!important;
    display:block!important;
    border:1px solid color-mix(in srgb,var(--accent) 42%,rgba(255,255,255,.10))!important;
    clip-path:inherit!important;
    background:linear-gradient(135deg,rgba(255,255,255,.07),transparent 38%,color-mix(in srgb,var(--accent) 8%,transparent))!important;
    opacity:1!important;
    filter:none!important;
    transform:none!important;
    pointer-events:none!important;
  }
  body.front-mode .hero>.heroContent>.desktopHeroLogo::after,
  body.front-mode .mobileCornerLogo::after,
  body.front-mode .mobileAppBrandSeal::after,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal::after{
    content:""!important;
    position:absolute!important;
    left:18%!important;
    right:18%!important;
    top:5px!important;
    height:1px!important;
    display:block!important;
    background:linear-gradient(90deg,transparent,var(--strong),transparent)!important;
    opacity:.42!important;
    pointer-events:none!important;
  }
  body.front-mode .hero>.heroContent>.desktopHeroLogo img,
  body.front-mode .mobileCornerLogo img,
  body.front-mode .mobileAppBrandSeal img,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal img{
    position:relative!important;
    z-index:2!important;
    width:100%!important;
    height:100%!important;
    display:block!important;
    object-fit:contain!important;
    object-position:center!important;
    padding:2px!important;
    clip-path:circle(48% at 50% 50%)!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
    background:transparent!important;
    box-shadow:none!important;
    filter:none!important;
  }

  /* 4 — Credential tiles: premium through material, hierarchy and a small
     functional code tag instead of decorative ornaments. */
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFacts,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectEssentials{
    gap:9px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard{
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    min-height:70px!important;
    padding:13px 13px 11px!important;
    justify-content:flex-end!important;
    border:1px solid transparent!important;
    border-radius:16px!important;
    background:
      linear-gradient(155deg,rgba(13,13,21,.78),rgba(4,4,10,.62)) padding-box,
      linear-gradient(135deg,color-mix(in srgb,var(--strong) 26%,transparent),color-mix(in srgb,var(--accent) 58%,transparent) 44%,rgba(255,255,255,.07) 100%) border-box!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.075),
      inset 0 -18px 34px rgba(0,0,0,.16),
      0 9px 22px rgba(0,0,0,.18)!important;
    -webkit-backdrop-filter:blur(13px) saturate(1.08)!important;
    backdrop-filter:blur(13px) saturate(1.08)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact::before,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard::before{
    content:""!important;
    position:absolute!important;
    left:11px!important;
    right:11px!important;
    top:9px!important;
    height:1px!important;
    display:block!important;
    background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 48%,transparent),rgba(255,255,255,.13),transparent 78%)!important;
    opacity:.68!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact::after,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard::after{
    position:absolute!important;
    right:10px!important;
    top:10px!important;
    z-index:2!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:25px!important;
    height:14px!important;
    padding:0 5px!important;
    border:1px solid color-mix(in srgb,var(--accent) 30%,rgba(255,255,255,.08))!important;
    border-radius:999px!important;
    color:color-mix(in srgb,var(--accent) 80%,var(--strong))!important;
    background:rgba(0,0,0,.24)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
    font-size:4.5px!important;
    font-weight:900!important;
    line-height:1!important;
    letter-spacing:.10em!important;
    text-transform:uppercase!important;
    pointer-events:none!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact:nth-child(1)::after{content:"GRADE"!important}
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact:nth-child(2)::after{content:"ID"!important}
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard:nth-child(1)::after{content:"X"!important}
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard:nth-child(2)::after{content:"DOB"!important}
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact span,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard .mobileDirectLabel{
    position:relative!important;
    z-index:2!important;
    margin:0!important;
    padding-right:34px!important;
    color:color-mix(in srgb,var(--accent) 84%,var(--muted))!important;
    font-size:5.8px!important;
    line-height:1.05!important;
    letter-spacing:.13em!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact strong,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard .mobileDirectValue{
    position:relative!important;
    z-index:2!important;
    margin:9px 0 0!important;
    color:var(--strong)!important;
    font-family:"Cinzel","League Spartan",serif!important;
    font-size:12px!important;
    font-weight:800!important;
    line-height:1.05!important;
    letter-spacing:.018em!important;
    text-shadow:0 0 11px color-mix(in srgb,var(--accent) 12%,transparent)!important;
  }
  body:not(.front-mode) .mobileStudentDossier #mobileSummaryGrade{font-size:12.6px!important}
  body:not(.front-mode) .mobileStudentDossier #mobileSummaryId{font-size:9.6px!important;letter-spacing:.035em!important}
  body:not(.front-mode) .mobileStudentDossier #mobileDirectDob{font-size:10.5px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard .mobileDirectXLink b{
    width:18px!important;height:18px!important;flex:0 0 18px!important;border-radius:50%!important;font-size:7.6px!important;
  }

  /* 5 — Pre-swipe previews for Student Point Log / Academic Records. */
  body:not(.front-mode) .mobileStudentDossier .mobileRecordPreviewRail{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)!important;
    align-items:stretch!important;
    gap:5px!important;
    margin:7px 0 8px!important;
    padding:0!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileRecordPreview{
    min-width:0!important;
    min-height:43px!important;
    display:grid!important;
    grid-template-columns:22px minmax(0,1fr)!important;
    align-items:center!important;
    gap:6px!important;
    padding:6px 7px!important;
    border:1px solid color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.055))!important;
    border-radius:12px!important;
    color:var(--muted)!important;
    text-align:left!important;
    background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(3,3,8,.22))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
    cursor:pointer!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileRecordPreview.is-active{
    border-color:color-mix(in srgb,var(--accent) 52%,rgba(255,255,255,.08))!important;
    color:var(--strong)!important;
    background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 9%,rgba(255,255,255,.035)),rgba(3,3,8,.30))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 0 14px color-mix(in srgb,var(--accent) 7%,transparent)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileRecordPreviewIndex{
    width:22px!important;height:22px!important;display:grid!important;place-items:center!important;
    border:1px solid color-mix(in srgb,var(--accent) 27%,rgba(255,255,255,.05))!important;border-radius:7px!important;
    color:var(--accent)!important;background:rgba(0,0,0,.20)!important;font-size:5px!important;font-weight:900!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileRecordPreviewCopy{min-width:0!important;display:grid!important;gap:2px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileRecordPreviewCopy small{font-size:4.7px!important;font-weight:900!important;letter-spacing:.10em!important;color:var(--accent)!important}
  body:not(.front-mode) .mobileStudentDossier .mobileRecordPreviewCopy strong{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:5.6px!important;line-height:1.08!important;font-weight:750!important;color:inherit!important}
  body:not(.front-mode) .mobileStudentDossier .mobileRecordPreviewCue{display:grid!important;place-items:center!important;align-content:center!important;gap:1px!important;color:var(--accent)!important}
  body:not(.front-mode) .mobileStudentDossier .mobileRecordPreviewCue b{font-size:11px!important;line-height:1!important}
  body:not(.front-mode) .mobileStudentDossier .mobileRecordPreviewCue small{font-size:3.8px!important;font-weight:900!important;letter-spacing:.08em!important}

  /* 6 — Browser-safe mobile GP heading. */
  body.front-mode .gpRankingSection .gpRankingHeader{
    min-height:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    justify-items:center!important;
    gap:6px!important;
    padding:11px 12px 9px!important;
    text-align:center!important;
  }
  body.front-mode .gpRankingSection .gpRankingHeader>div:first-child{width:100%!important;min-width:0!important}
  body.front-mode .gpRankingSection .gpRankingEyebrow{
    margin:0!important;font-size:5px!important;line-height:1!important;letter-spacing:.18em!important;text-align:center!important;white-space:nowrap!important;
  }
  body.front-mode .gpRankingSection .gpRankingTitle{
    width:100%!important;max-width:100%!important;margin:4px auto 0!important;padding:0 4px!important;
    overflow:visible!important;color:var(--strong)!important;font-family:"Cinzel","League Spartan",serif!important;
    font-size:13.4px!important;font-weight:800!important;line-height:1.08!important;letter-spacing:.08em!important;
    text-align:center!important;white-space:nowrap!important;text-overflow:clip!important;
  }
  body.front-mode .gpRankingSection .gpRankingDisclaimer{
    max-width:310px!important;margin:5px auto 0!important;font-size:4.8px!important;line-height:1.32!important;text-align:center!important;
  }
  body.front-mode .gpRankingSection .gpRankingMeta{
    width:auto!important;min-width:0!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;text-align:center!important;
  }
  body.front-mode .gpRankingSection .gpRankingSemester{min-height:19px!important;padding:4px 8px!important;font-size:4.8px!important}
  body.front-mode .gpRankingSection .gpRankingUpdated{margin:0!important;font-size:4.5px!important;line-height:1.15!important}

  /* 7 — Shorter HOME header, smaller Japanese title; search dimensions stay unchanged. */
  body.front-mode .hero{
    min-height:238px!important;
    padding:10px 12px 8px!important;
  }
  body.front-mode .heroContent{padding:6px 0 3px!important}
  body.front-mode .hero>.heroContent>.logo,
  body.front-mode .hero>.heroContent>.desktopHeroLogo{
    width:58px!important;height:58px!important;min-width:58px!important;min-height:58px!important;margin:0 auto 0!important;
  }
  body.front-mode .eyebrow{
    margin:1px auto 3px!important;font-size:8px!important;line-height:1!important;letter-spacing:.13em!important;
  }
  body.front-mode .mainTitle{
    margin:0 auto 8px!important;font-size:24px!important;line-height:1!important;letter-spacing:.35px!important;
  }
  body.front-mode .heroNote{margin-top:6px!important;font-size:6.2px!important}
  body.front-mode .statusLine{min-height:9px!important;margin-top:2px!important}
}

@media (max-width:390px){
  body.front-mode .hero{min-height:232px!important;padding-top:9px!important}
  body.front-mode .hero>.heroContent>.logo,
  body.front-mode .hero>.heroContent>.desktopHeroLogo{width:56px!important;height:56px!important;min-width:56px!important;min-height:56px!important}
  body.front-mode .eyebrow{font-size:7.6px!important}
  body.front-mode .mainTitle{font-size:23px!important}
  body.front-mode .gpRankingSection .gpRankingTitle{font-size:12.8px!important;letter-spacing:.075em!important}
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard{min-height:67px!important;padding:12px 12px 10px!important}
}

/* =====================================================================
   MOBILE REVISION PATCH — v103 (final, wins over all earlier iterations)
   Scope: MOBILE ONLY (<=768px). Nothing here touches desktop selectors,
   so the desktop layout (width >768px) is completely unaffected.
   Fixes requested:
     1) Broken/mismatched logo shape (double clip-path + mask conflict)
     2) Grade / ID / X Username / DOB tiles were oversized -> compacted
     3) Point Log / Academic Records preview boxes were too wide ->
        narrowed to line up with the title box above them
     4) Point Log / Academic Records title box (swipe callout) tidied
     5) Home header area (logo, title, search) spacing tidied
   ===================================================================== */

@media (max-width:768px){

  /* ---------- 1) LOGO — single clean circular frame, no more ----------
     conflicting clip-path polygon + circular mask fighting each other. */
  body.front-mode .hero>.heroContent>.logo,
  body.front-mode .hero>.heroContent>.desktopHeroLogo,
  body.front-mode .mobileCornerLogo,
  body.front-mode .mobileAppBrandSeal,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:relative!important;
    left:auto!important;
    top:auto!important;
    isolation:isolate!important;
    overflow:hidden!important;
    padding:0!important;
    border:1px solid color-mix(in srgb,var(--accent) 46%,rgba(255,255,255,.16))!important;
    border-radius:50%!important;
    clip-path:none!important;
    background:radial-gradient(circle at 50% 36%,color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.06)),rgba(6,6,10,.94) 74%)!important;
    box-shadow:0 8px 16px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.05)!important;
    filter:none!important;
    pointer-events:none!important;
  }
  body.front-mode .hero>.heroContent>.logo,
  body.front-mode .hero>.heroContent>.desktopHeroLogo{
    width:60px!important;height:60px!important;min-width:60px!important;min-height:60px!important;
    margin:0 auto 8px!important;
  }
  body.front-mode .hero>.heroContent>.logo::before,
  body.front-mode .hero>.heroContent>.logo::after,
  body.front-mode .hero>.heroContent>.desktopHeroLogo::before,
  body.front-mode .hero>.heroContent>.desktopHeroLogo::after,
  body.front-mode .mobileCornerLogo::before,
  body.front-mode .mobileCornerLogo::after,
  body.front-mode .mobileAppBrandSeal::before,
  body.front-mode .mobileAppBrandSeal::after,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal::before,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal::after{
    display:none!important;
    content:none!important;
  }
  body.front-mode .hero>.heroContent>.logo img,
  body.front-mode .hero>.heroContent>.desktopHeroLogo img,
  body.front-mode .mobileCornerLogo img,
  body.front-mode .mobileAppBrandSeal img,
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal img{
    position:relative!important;
    z-index:2!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
    padding:0!important;
    margin:0!important;
    border-radius:50%!important;
    clip-path:none!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
    background:transparent!important;
    box-shadow:none!important;
    filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 26%,transparent))!important;
  }
  body.front-mode .mobileCornerLogo,
  body.front-mode .mobileAppBrandSeal{display:none!important} /* the centered logo above already covers this spot on HOME */
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal{
    width:38px!important;height:38px!important;flex:0 0 38px!important;
  }

  /* ---------- 2) Compact GRADE / ID / X USERNAME / DOB tiles ---------- */
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFacts,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectEssentials{
    gap:7px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard{
    min-height:0!important;
    height:auto!important;
    padding:7px 9px 6px!important;
    justify-content:flex-start!important;
    border-radius:12px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact::after,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard::after{
    position:static!important;
    display:none!important; /* the label text already says GRADE/ID/X/DOB — the extra corner tag was redundant clutter */
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact::before,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard::before{
    left:9px!important;right:9px!important;top:7px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact span,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard .mobileDirectLabel{
    padding-right:0!important;
    font-size:5.6px!important;
    letter-spacing:.09em!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact strong,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard .mobileDirectValue{
    margin:4px 0 0!important;
    font-size:10.5px!important;
    line-height:1.15!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body:not(.front-mode) .mobileStudentDossier #mobileSummaryGrade{font-size:10.5px!important}
  body:not(.front-mode) .mobileStudentDossier #mobileSummaryId{font-size:9px!important;letter-spacing:.02em!important}
  body:not(.front-mode) .mobileStudentDossier #mobileDirectDob{font-size:9.5px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard .mobileDirectXLink{gap:5px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard .mobileDirectXLink b{
    width:16px!important;height:16px!important;flex:0 0 16px!important;font-size:6.8px!important;
  }

  /* ---------- 3) Point Log / Academic Records preview boxes ---------- *
     Inset them to match the padding of the title box above (12px each
     side) instead of stretching edge-to-edge, and shrink them down.   */
  body:not(.front-mode) .mobileStudentDossier .mobileRecordPreviewRail{
    width:auto!important;
    grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr)!important;
    gap:6px!important;
    margin:8px 12px 10px!important;
    padding:0!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileRecordPreview{
    min-height:36px!important;
    grid-template-columns:18px minmax(0,1fr)!important;
    gap:5px!important;
    padding:5px 8px!important;
    border-radius:10px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileRecordPreviewIndex{
    width:18px!important;height:18px!important;border-radius:6px!important;font-size:4.6px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileRecordPreviewCopy small{font-size:4.4px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileRecordPreviewCopy strong{font-size:5.2px!important;line-height:1.1!important}
  body:not(.front-mode) .mobileStudentDossier .mobileRecordPreviewCue b{font-size:9px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileRecordPreviewCue small{font-size:3.4px!important}

  /* ---------- 4) Point Log / Academic Records title box (tidied) ---------- */
  body:not(.front-mode) .mobileStudentDossier .mobileSwipeCallout{
    grid-template-columns:38px minmax(0,1fr) 38px!important;
    gap:8px!important;
    padding:10px 12px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSwipeArrow{
    width:38px!important;height:38px!important;border-radius:12px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSwipeArrow span{font-size:24px!important}
  body:not(.front-mode) .mobileStudentDossier .mobileSwipeCalloutCopy{
    display:grid!important;
    justify-items:center!important;
    gap:2px!important;
    min-width:0!important;
    width:100%!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSwipeCalloutCopy strong{
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:12.5px!important;
    letter-spacing:.01em!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileSwipeCalloutCopy small{
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    margin-top:2px!important;
    font-size:6.6px!important;
    letter-spacing:.04em!important;
  }

  /* ---------- 5) Home header — tidied spacing/alignment ---------- */
  body.front-mode .hero{
    padding:16px 14px 10px!important;
  }
  body.front-mode .heroContent{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    padding:0!important;
  }
  body.front-mode .eyebrow{
    margin:0 0 4px!important;
    font-size:8px!important;
    line-height:1!important;
  }
  body.front-mode .mainTitle{
    margin:0 0 10px!important;
    font-size:23px!important;
    line-height:1.02!important;
  }
  body.front-mode .searchBar{
    width:100%!important;
    max-width:340px!important;
    margin:0 auto!important;
  }
  body.front-mode .heroNote{
    max-width:300px!important;
    margin:8px auto 0!important;
    font-size:6.4px!important;
    line-height:1.5!important;
  }
  body.front-mode .statusLine{
    width:100%!important;
    min-height:9px!important;
    margin-top:3px!important;
    text-align:center!important;
  }
}

@media (max-width:390px){
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryFact,
  body:not(.front-mode) .mobileStudentDossier .mobileDirectMiniCard{
    padding:6px 8px 5px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .mobileRecordPreviewRail{
    margin:8px 10px 9px!important;
  }
  body.front-mode .mainTitle{font-size:21px!important}
}

/* =====================================================================
   MOBILE REVISION PATCH — v104 (final, wins over all earlier iterations)
   Scope: MOBILE ONLY (<=768px). No desktop selectors touched below, so
   the desktop layout (>768px) is completely unaffected.
   Fixes requested:
     1) Student-database header logo was squashed/oval (a leftover
        min-width:49px from an older rule fought the new 38px box) ->
        every box dimension is now pinned so it can't stretch.
     2) HOME header logo shrunk down further.
     3) Breathing room restored between the kanji eyebrow and main title.
     4) HOME header section shortened (less vertical padding overall).
     5) Student-database header area given a cleaner, tidier look.
     6) Student Point Log / Academic Records columns re-aligned and
        polished (consistent 12px insets, tidier headers & rows).
   ===================================================================== */

@media (max-width:768px){

  /* ---------- 1) Student-database header logo: fix the squash ---------- *
     Every sizing property is pinned to the same value so no legacy
     min-width/min-height from an earlier pass can distort the circle. */
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal{
    width:40px!important;height:40px!important;
    min-width:40px!important;min-height:40px!important;
    max-width:40px!important;max-height:40px!important;
    flex:0 0 40px!important;
    box-sizing:border-box!important;
    display:block!important;
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    padding:0!important;
    border:1px solid color-mix(in srgb,var(--accent) 46%,rgba(255,255,255,.16))!important;
    border-radius:50%!important;
    clip-path:none!important;
    -webkit-clip-path:none!important;
    background:radial-gradient(circle at 50% 36%,color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.06)),rgba(6,6,10,.94) 74%)!important;
    box-shadow:0 6px 14px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.05)!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderSeal img{
    position:relative!important;
    z-index:2!important;
    display:block!important;
    width:100%!important;height:100%!important;
    max-width:none!important;max-height:none!important;
    object-fit:cover!important;
    object-position:center!important;
    padding:0!important;margin:0!important;
    border-radius:50%!important;
    clip-path:none!important;
    -webkit-mask-image:none!important;mask-image:none!important;
    background:transparent!important;
    box-shadow:none!important;
    filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 24%,transparent))!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderBrand{
    gap:11px!important;
  }

  /* ---------- 2) HOME header logo — smaller ---------- */
  body.front-mode .hero>.heroContent>.logo,
  body.front-mode .hero>.heroContent>.desktopHeroLogo{
    width:44px!important;height:44px!important;
    min-width:44px!important;min-height:44px!important;
    max-width:44px!important;max-height:44px!important;
    margin:0 auto 6px!important;
  }

  /* ---------- 3) Space out the kanji eyebrow from the main title ---------- */
  body.front-mode .eyebrow{
    margin:0 0 10px!important;
  }
  body.front-mode .mainTitle{
    margin-top:0!important;
  }

  /* ---------- 4) Shorten the HOME header section ---------- */
  body.front-mode .hero{
    padding:12px 14px 8px!important;
  }
  body.front-mode .mainTitle{
    margin-bottom:8px!important;
    font-size:21px!important;
  }
  body.front-mode .heroNote{
    margin-top:5px!important;
  }
  body.front-mode .statusLine{
    min-height:7px!important;
    margin-top:2px!important;
  }

  /* ---------- 5) Student-database header — tidied look ---------- */
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader{
    border-radius:20px!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTop.m95BrandOnly{
    padding:0 14px!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTitle{
    gap:3px!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTitle>span{
    letter-spacing:.19em!important;
  }
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTitle h2{
    font-size:14.5px!important;
    letter-spacing:.05em!important;
  }

  /* ---------- 6) Student Point Log / Academic Records — re-aligned ---------- *
     Everything below lines up on the same 12px left/right rhythm used
     by the title box and preview tabs, instead of the old mixed
     9px/10px/11px insets, and gets a slightly tidier card treatment.  */
  body:not(.front-mode) .mobileStudentDossier .mobileRecordPageScroll{
    padding:10px 12px 14px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74PointsApp{
    padding:12px!important;
    border-radius:15px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74RecordHead{
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;
    padding:9px 10px 11px!important;
    border-radius:12px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74RecordHead>div{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    width:100%!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74RecordHead h3{
    margin:0!important;
    color:var(--strong)!important;
    font-family:"Cinzel","League Spartan",serif!important;
    font-size:11.5px!important;
    letter-spacing:.02em!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74RecordHead p{
    margin:0!important;
    color:var(--muted)!important;
    font-size:6.4px!important;
    line-height:1.35!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74PointTotals{
    border-radius:13px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74PointActivity{
    border-radius:13px!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74PointRow:nth-child(even){
    background:rgba(255,255,255,.014)!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74PointRow time{
    color:var(--accent)!important;
    font-size:6.6px!important;
    font-weight:800!important;
    letter-spacing:.03em!important;
  }
  body:not(.front-mode) .mobileStudentDossier .m74PointRowBody p{
    margin:0!important;
    color:var(--text)!important;
    font-size:8px!important;
    line-height:1.3!important;
  }

  /* Academic Records — same 12px rhythm + tidier header/rows */
  body:not(.front-mode) .mobileStudentDossier #mobileAcademicMount .m90AcademicHead{
    padding:9px 10px 11px!important;
    border-radius:12px!important;
  }
  body:not(.front-mode) .mobileStudentDossier #mobileAcademicMount .m90AcademicHeading span{
    color:var(--accent)!important;
    font-size:6px!important;
    font-weight:900!important;
    letter-spacing:.14em!important;
  }
  body:not(.front-mode) .mobileStudentDossier #mobileAcademicMount .m90AcademicHeading h3{
    margin:3px 0 0!important;
    color:var(--strong)!important;
    font-family:"Cinzel","League Spartan",serif!important;
    font-size:11.5px!important;
  }
  body:not(.front-mode) .mobileStudentDossier #mobileAcademicMount .m90AcademicHeading p{
    margin:4px 0 0!important;
    color:var(--muted)!important;
    font-size:6.2px!important;
    line-height:1.35!important;
  }
  body:not(.front-mode) .mobileStudentDossier #mobileAcademicMount .m90SemesterCard{
    border-radius:13px!important;
  }
  body:not(.front-mode) .mobileStudentDossier #mobileAcademicMount .m90Participation,
  body:not(.front-mode) .mobileStudentDossier #mobileAcademicMount .m90Subjects{
    margin-left:0!important;
    margin-right:0!important;
    border-radius:11px!important;
  }
  body:not(.front-mode) .mobileStudentDossier #mobileAcademicMount .m90SubjectRow:nth-child(even){
    background:rgba(255,255,255,.014)!important;
  }
  body:not(.front-mode) .mobileStudentDossier #mobileAcademicMount .m90SemesterFoot{
    padding:9px 11px 11px!important;
  }
}

@media (max-width:390px){
  body.front-mode .mainTitle{font-size:19.5px!important}
  body:not(.front-mode) .mobileStudentDossier>.mobileStudentHeader .m74HeaderTitle h2{font-size:13.5px!important}
}


/* =====================================================================
   V106 — ADMIN ACADEMIC PUBLICATION CONTROL
   IMPORTANT: appended to the ORIGINAL style(152).css only.
   No existing mobile/student selectors are overridden here.
   ===================================================================== */
body:not(.front-mode) .adminGateway,
body:not(.front-mode) .adminHomePanel{display:none!important}

.adminGateway{position:relative;isolation:isolate;overflow:hidden;margin-top:12px;min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 14px 10px 16px;border:1px solid color-mix(in srgb,var(--accent) 36%,transparent);border-radius:18px;background:linear-gradient(135deg,rgba(6,6,9,.88),color-mix(in srgb,var(--accent) 7%,rgba(7,7,10,.92)));box-shadow:0 12px 34px rgba(0,0,0,.28),inset 0 0 24px color-mix(in srgb,var(--accent) 5%,transparent)}
.adminGateway::before{content:'';position:absolute;inset:auto -80px -120px auto;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 13%,transparent),transparent 68%);pointer-events:none}
.adminGatewayCopy{position:relative;z-index:1;display:flex;align-items:center;gap:11px;min-width:0}.adminGatewayIcon{width:32px;height:32px;display:grid;place-items:center;flex:0 0 32px;border:1px solid var(--border);border-radius:11px;color:#111;background:linear-gradient(135deg,var(--accent),var(--strong));font-size:14px;font-weight:900}.adminGatewayCopy strong{display:block;color:var(--strong);font-size:10px;font-weight:900;letter-spacing:.09em}.adminGatewayCopy small{display:block;margin-top:3px;color:var(--muted);font-size:8px;letter-spacing:.025em}.adminAccessButton{position:relative;z-index:1;min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:8px 14px;border:1px solid color-mix(in srgb,var(--accent) 52%,transparent);border-radius:999px;color:#111;background:linear-gradient(135deg,var(--accent),var(--strong) 58%,var(--accent2));box-shadow:0 8px 20px rgba(0,0,0,.3),0 0 18px color-mix(in srgb,var(--accent) 10%,transparent);font-size:9px;font-weight:900;letter-spacing:.075em;cursor:pointer;white-space:nowrap}.adminAccessButton b{font-size:13px;line-height:1}.adminAccessButton:hover{transform:translateY(-1px);filter:brightness(1.06)}.adminGateway.is-authenticated{border-color:rgba(86,186,128,.4);background:linear-gradient(135deg,rgba(8,46,31,.78),rgba(6,8,8,.93))}.adminGateway.is-authenticated .adminGatewayIcon{background:linear-gradient(135deg,#61c98c,#dff7e8)}.adminGateway.is-authenticated .adminAccessButton{background:linear-gradient(135deg,#62c88e,#dff7e8 60%,#8cd6ac)}

.adminHomePanel{position:relative;isolation:isolate;overflow:hidden;margin-top:12px;display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:24px;padding:24px 26px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:26px;background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--accent) 16%,transparent),transparent 38%),linear-gradient(145deg,rgba(14,14,18,.93),rgba(4,4,7,.96));box-shadow:0 20px 64px rgba(0,0,0,.38),inset 0 0 50px color-mix(in srgb,var(--accent) 5%,transparent);backdrop-filter:blur(10px)}
.adminHomeGlow{position:absolute;right:-100px;top:-140px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 16%,transparent),transparent 68%);filter:blur(10px);pointer-events:none}.adminHomeCopy,.adminHomeActions{position:relative;z-index:1}.adminHomeEyebrow{color:var(--accent);font-size:9px;font-weight:900;letter-spacing:.17em}.adminHomeTitleRow{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-top:7px}.adminHomeTitleRow h2{margin:0;color:var(--strong);font-family:"Cinzel",Georgia,serif;font-size:20px;letter-spacing:.035em}.adminHomeTitleRow p{max-width:650px;margin:7px 0 0;color:var(--muted);font-size:10px;line-height:1.45}.adminStorageMode{flex:0 0 auto;padding:7px 10px;border:1px solid var(--border);border-radius:999px;color:var(--accent);background:rgba(0,0,0,.38);font-size:8px;font-weight:900;white-space:nowrap}.adminHomeStatusGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:18px}.adminHomeStatusCard{min-height:70px;display:grid;align-content:center;padding:11px 13px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.025)}.adminHomeStatusCard span{color:var(--muted);font-size:7px;font-weight:900;letter-spacing:.11em}.adminHomeStatusCard strong{margin-top:6px;color:var(--strong);font-size:12px;font-weight:900}.adminHomeActions{display:grid;align-content:center;gap:9px}.adminHomeActions button{min-height:42px;padding:10px 13px;border:1px solid var(--border);border-radius:13px;font-size:9px;font-weight:900;letter-spacing:.055em;cursor:pointer}.adminQuickPublishButton{color:#111;background:linear-gradient(135deg,#62c88e,var(--strong) 60%,var(--accent))}.adminQuickPublishButton.is-unpublish{color:#fff1f2;background:linear-gradient(135deg,#721923,#b83b46 60%,#4b0b12)}.adminManageButton{color:var(--strong);background:color-mix(in srgb,var(--accent) 10%,rgba(255,255,255,.035))}.adminLogoutButton{color:var(--muted);background:rgba(255,255,255,.025)}

body.admin-modal-open{overflow:hidden}.adminModal{position:fixed;inset:0;z-index:15500;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.86);backdrop-filter:blur(13px)}.adminModalCard{width:min(980px,calc(100vw - 48px));max-height:min(92vh,920px);overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);border:1px solid color-mix(in srgb,var(--accent) 48%,transparent);border-radius:26px;background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--accent) 10%,transparent),transparent 36%),linear-gradient(145deg,#111013,#050507);box-shadow:0 30px 110px rgba(0,0,0,.72),0 0 40px color-mix(in srgb,var(--accent) 10%,transparent)}.adminModalHeader{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:18px 22px;border-bottom:1px solid var(--border);background:rgba(4,4,7,.66)}.adminModalEyebrow{color:var(--accent);font-size:8px;font-weight:900;letter-spacing:.18em}.adminModalTitle{margin:4px 0 0;color:var(--strong);font-family:"Cinzel",Georgia,serif;font-size:21px;letter-spacing:.04em}.adminModalSubtitle{margin:4px 0 0;color:var(--muted);font-size:9px}.adminModalClose{min-height:38px;padding:8px 14px;border:1px solid var(--border);border-radius:12px;color:var(--strong);background:rgba(255,255,255,.04);font-size:9px;font-weight:900;cursor:pointer}.adminLoginView{overflow:auto;display:grid;grid-template-columns:110px minmax(0,1fr);gap:18px 22px;align-items:center;padding:34px}.adminLoginSigil{grid-row:1/3;width:96px;height:96px;display:grid;place-items:center;border:1px solid var(--border);border-radius:26px;color:var(--accent);background:radial-gradient(circle,color-mix(in srgb,var(--accent) 15%,transparent),rgba(0,0,0,.48));box-shadow:inset 0 0 28px color-mix(in srgb,var(--accent) 9%,transparent),0 0 24px color-mix(in srgb,var(--accent) 10%,transparent);font-family:"Noto Sans JP",sans-serif;font-size:42px;font-weight:900}.adminLoginCopy span{color:var(--accent);font-size:8px;font-weight:900;letter-spacing:.16em}.adminLoginCopy h3{margin:5px 0 0;color:var(--strong);font-size:24px}.adminLoginCopy p{margin:7px 0 0;color:var(--muted);font-size:10px;line-height:1.5}.adminLoginForm{grid-column:2;display:grid;gap:7px}.adminLoginForm label{color:var(--accent);font-size:8px;font-weight:900;letter-spacing:.11em}.adminPasswordRow{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:8px}.adminPasswordRow input{height:48px;padding:0 15px;border:1px solid var(--border);border-radius:13px;outline:none;color:var(--strong);background:rgba(0,0,0,.55);font-size:11px}.adminPasswordRow input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}.adminPasswordRow button{border:1px solid rgba(255,255,255,.12);border-radius:13px;color:#111;background:linear-gradient(135deg,var(--accent),var(--strong) 60%,var(--accent2));font-size:9px;font-weight:900;cursor:pointer}.adminLoginMessage{min-height:18px;color:#ffb3bb;font-size:9px;font-weight:700}
.adminControlView{min-height:0;overflow:hidden;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}.adminControlIntro{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;padding:18px 22px 14px}.adminControlIntro>div:first-child>span{color:var(--accent);font-size:8px;font-weight:900;letter-spacing:.14em}.adminControlIntro h3{margin:5px 0 0;color:var(--strong);font-size:18px}.adminControlIntro p{max-width:560px;margin:5px 0 0;color:var(--muted);font-size:9px;line-height:1.4}.adminControlToolbar{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.adminControlToolbar button{min-height:32px;padding:7px 9px;border:1px solid var(--border);border-radius:10px;color:var(--accent);background:rgba(255,255,255,.035);font-size:7px;font-weight:900;cursor:pointer}.adminBackendNotice{margin:0 22px 10px;padding:10px 12px;border:1px solid var(--border);border-radius:11px;color:var(--muted);background:rgba(255,255,255,.025);font-size:8px;line-height:1.4}.adminBackendNotice.is-global{color:#bff4d5;border-color:rgba(86,186,128,.36);background:rgba(29,95,59,.16)}.adminBackendNotice.is-warning{color:#f4cf9d;border-color:rgba(218,166,91,.34);background:rgba(106,71,24,.15)}.adminSemesterList{min-height:0;overflow:auto;display:grid;align-content:start;gap:7px;padding:0 22px 18px;scrollbar-width:thin;scrollbar-color:var(--accent) #111}.adminSemesterLoading{padding:24px;border:1px dashed var(--border);border-radius:13px;color:var(--muted);text-align:center;font-size:10px}.adminSemesterLoading.is-error{color:#ffb3bb}.adminSemesterRow{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 12px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.024);cursor:pointer;transition:border-color .16s ease,background .16s ease}.adminSemesterRow:hover{border-color:color-mix(in srgb,var(--accent) 65%,transparent);background:color-mix(in srgb,var(--accent) 7%,rgba(255,255,255,.025))}.adminSemesterRow.is-latest{border-color:color-mix(in srgb,var(--accent) 58%,transparent);background:radial-gradient(circle at 0 50%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 34%),rgba(255,255,255,.025)}.adminSemesterIdentity{min-width:0;display:flex;align-items:center;gap:12px}.adminSemesterIndex{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border:1px solid var(--border);border-radius:11px;color:var(--accent);background:rgba(0,0,0,.4);font-size:9px;font-weight:900}.adminSemesterIdentity strong{display:block;color:var(--strong);font-size:12px}.adminSemesterIdentity small{display:block;margin-top:3px;color:var(--muted);font-size:7px}.adminSemesterSwitchWrap{display:flex;align-items:center;gap:10px}.adminSemesterState{min-width:92px;text-align:right;font-size:7px;font-weight:900;letter-spacing:.07em}.adminSemesterState.published{color:#9fe4bf}.adminSemesterState.unpublished{color:#f1aeb5}.adminSemesterToggle{position:absolute;opacity:0;pointer-events:none}.adminSemesterSwitch{position:relative;width:46px;height:25px;display:block;flex:0 0 46px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(125,37,48,.52);box-shadow:inset 0 0 10px rgba(0,0,0,.4)}.adminSemesterSwitch i{position:absolute;left:3px;top:3px;width:17px;height:17px;border-radius:50%;background:#f6e9e1;box-shadow:0 2px 8px rgba(0,0,0,.45);transition:transform .18s ease}.adminSemesterToggle:checked+.adminSemesterSwitch{background:rgba(48,130,84,.58)}.adminSemesterToggle:checked+.adminSemesterSwitch i{transform:translateX(21px);background:#d9f3e4}.adminSemesterToggle:focus-visible+.adminSemesterSwitch{outline:2px solid var(--accent);outline-offset:2px}.adminControlFooter{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 22px 18px;border-top:1px solid var(--border);background:rgba(0,0,0,.2)}.adminSaveMessage{min-height:16px;color:var(--muted);font-size:8px;line-height:1.35}.adminSaveMessage.is-success{color:#a8e8c4}.adminSaveMessage.is-error{color:#ffb3bb}.adminControlFooterButtons{display:flex;gap:8px;flex:0 0 auto}.adminControlFooterButtons button{min-height:38px;padding:8px 12px;border:1px solid var(--border);border-radius:11px;font-size:8px;font-weight:900;cursor:pointer}.adminCancelButton{color:var(--muted);background:rgba(255,255,255,.025)}.adminSaveButton{color:#111;background:linear-gradient(135deg,var(--accent),var(--strong) 60%,var(--accent2))}
.academicPublicationNotice{display:flex;align-items:center;gap:11px;margin-bottom:10px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:13px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 7%,rgba(255,255,255,.02)),rgba(0,0,0,.25))}.academicPublicationLock{flex:0 0 auto;padding:5px 7px;border:1px solid var(--border);border-radius:999px;color:#f4cf9d;background:rgba(116,70,21,.22);font-size:7px;font-weight:900;letter-spacing:.08em}.academicPublicationNotice strong{display:block;color:var(--strong);font-size:8px;letter-spacing:.07em}.academicPublicationNotice p{margin:3px 0 0;color:var(--muted);font-size:8px;line-height:1.35}.m90PublicationNotice{display:flex;align-items:center;gap:8px;margin:0 0 9px;padding:8px 9px;border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);border-radius:11px;background:rgba(0,0,0,.24)}.m90PublicationNotice>span{flex:0 0 auto;padding:4px 6px;border:1px solid var(--border);border-radius:999px;color:#f4cf9d;font-size:5px;font-weight:900}.m90PublicationNotice strong{display:block;color:var(--strong);font-size:6.4px;letter-spacing:.05em}.m90PublicationNotice p{margin:2px 0 0;color:var(--muted);font-size:5.5px;line-height:1.25}

@media (max-width:768px){
  .adminGateway{margin:8px 8px 0!important;min-height:46px!important;padding:7px 8px 7px 10px!important;border-radius:14px!important;gap:8px!important}.adminGatewayCopy{gap:8px!important}.adminGatewayIcon{width:27px!important;height:27px!important;flex-basis:27px!important;border-radius:9px!important;font-size:12px!important}.adminGatewayCopy strong{font-size:7.2px!important;letter-spacing:.07em!important}.adminGatewayCopy small{font-size:6px!important;margin-top:2px!important}.adminAccessButton{min-height:31px!important;padding:6px 9px!important;gap:6px!important;font-size:6.5px!important;letter-spacing:.055em!important}.adminAccessButton b{font-size:10px!important}
  .adminHomePanel{margin:8px 8px 0!important;grid-template-columns:1fr!important;gap:10px!important;padding:12px!important;border-radius:16px!important}.adminHomeEyebrow{font-size:5.5px!important}.adminHomeTitleRow{display:grid!important;gap:6px!important}.adminHomeTitleRow h2{font-size:12px!important}.adminHomeTitleRow p{margin-top:4px!important;font-size:6.5px!important;line-height:1.4!important}.adminStorageMode{justify-self:start;padding:4px 6px!important;font-size:5.5px!important}.adminHomeStatusGrid{gap:5px!important;margin-top:9px!important}.adminHomeStatusCard{min-height:49px!important;padding:7px!important;border-radius:9px!important}.adminHomeStatusCard span{font-size:4.8px!important}.adminHomeStatusCard strong{font-size:6.8px!important;margin-top:4px!important}.adminHomeActions{grid-template-columns:1fr 1fr!important;gap:6px!important}.adminHomeActions .adminQuickPublishButton{grid-column:1/-1!important}.adminHomeActions button{min-height:31px!important;padding:6px 7px!important;border-radius:9px!important;font-size:5.5px!important}
  .adminModal{padding:9px!important}.adminModalCard{width:calc(100vw - 18px)!important;max-height:94vh!important;border-radius:17px!important}.adminModalHeader{padding:12px!important;gap:8px!important}.adminModalEyebrow{font-size:5px!important}.adminModalTitle{font-size:13px!important}.adminModalSubtitle{font-size:6px!important}.adminModalClose{min-height:29px!important;padding:5px 8px!important;border-radius:8px!important;font-size:5.5px!important}.adminLoginView{grid-template-columns:58px minmax(0,1fr)!important;gap:10px!important;padding:17px 13px!important}.adminLoginSigil{width:55px!important;height:55px!important;border-radius:16px!important;font-size:24px!important}.adminLoginCopy span{font-size:5px!important}.adminLoginCopy h3{font-size:14px!important}.adminLoginCopy p{font-size:6.2px!important}.adminLoginForm{grid-column:1/-1!important}.adminLoginForm label{font-size:5.2px!important}.adminPasswordRow{grid-template-columns:minmax(0,1fr) 78px!important}.adminPasswordRow input{height:37px!important;padding:0 9px!important;border-radius:9px!important;font-size:7px!important}.adminPasswordRow button{border-radius:9px!important;font-size:5.8px!important}.adminLoginMessage{font-size:5.8px!important}.adminControlIntro{display:grid!important;gap:8px!important;padding:11px 12px 8px!important}.adminControlIntro>div:first-child>span{font-size:5px!important}.adminControlIntro h3{font-size:11px!important}.adminControlIntro p{font-size:5.8px!important}.adminControlToolbar{justify-content:flex-start!important}.adminControlToolbar button{min-height:26px!important;padding:5px 6px!important;border-radius:7px!important;font-size:4.8px!important}.adminBackendNotice{margin:0 12px 7px!important;padding:7px 8px!important;border-radius:8px!important;font-size:5.2px!important}.adminSemesterList{gap:5px!important;padding:0 12px 9px!important}.adminSemesterRow{min-height:49px!important;padding:7px 8px!important;border-radius:10px!important}.adminSemesterIdentity{gap:7px!important}.adminSemesterIndex{width:26px!important;height:26px!important;flex-basis:26px!important;border-radius:8px!important;font-size:6px!important}.adminSemesterIdentity strong{font-size:7.5px!important}.adminSemesterIdentity small{font-size:4.7px!important}.adminSemesterSwitchWrap{gap:5px!important}.adminSemesterState{min-width:58px!important;font-size:4.6px!important}.adminSemesterSwitch{width:36px!important;height:20px!important;flex-basis:36px!important}.adminSemesterSwitch i{left:3px!important;top:3px!important;width:12px!important;height:12px!important}.adminSemesterToggle:checked+.adminSemesterSwitch i{transform:translateX(16px)!important}.adminControlFooter{display:grid!important;gap:7px!important;padding:9px 12px 11px!important}.adminSaveMessage{font-size:5.2px!important}.adminControlFooterButtons{justify-content:flex-end!important}.adminControlFooterButtons button{min-height:29px!important;padding:6px 8px!important;border-radius:8px!important;font-size:4.9px!important}
  .academicPublicationNotice{gap:7px!important;margin-bottom:8px!important;padding:7px 8px!important;border-radius:10px!important}.academicPublicationLock{font-size:4.7px!important}.academicPublicationNotice strong{font-size:5.7px!important}.academicPublicationNotice p{font-size:5.2px!important}
}
@media (max-width:390px){.adminGatewayCopy small{display:none!important}.adminHomeStatusGrid{grid-template-columns:1fr!important}.adminHomeStatusCard{min-height:42px!important}.adminSemesterState{display:none!important}}


/* =====================================================================
   V107 — MOBILE HOME REFINEMENT + ADMIN INSIDE GENERAL
   Scope: HOME + mobile only where noted. Existing student database UI,
   desktop layout, swipe navigation, cards and records remain untouched.
   ===================================================================== */

/* Admin access now lives inside the existing GENERAL dropdown. */
.generalAdminMenuItem{
  position:relative;
}
.generalAdminMenuItem::before{
  content:'';
  position:absolute;
  left:14px;
  right:14px;
  top:-3px;
  height:1px;
  background:color-mix(in srgb,var(--accent) 20%,transparent);
}
.generalAdminMenuItem.is-authenticated .generalMenuItemTitle{
  color:#bff4d5;
}
.generalAdminMenuItem.is-authenticated{
  background:rgba(38,122,76,.08);
}

/* The old standalone login gateway is retired. Defensive hide in case an
   older cached HTML copy is briefly paired with this stylesheet. */
#adminGateway{display:none!important}

@media (max-width:768px){
  /* HOME only: create breathing room between crest/logo and Kanji title. */
  body.front-mode .hero>.heroContent>.logo,
  body.front-mode .hero>.heroContent>.desktopHeroLogo{
    margin-bottom:12px!important;
  }

  /* HOME only: remove the decorative glowing dot at the left of search. */
  body.front-mode .hero .searchBar::before{
    display:none!important;
    content:none!important;
  }
  body.front-mode .hero .searchBar input{
    padding-left:8px!important;
  }

  /* HOME only: more space between search field and Japanese note. */
  body.front-mode .heroNote{
    margin-top:11px!important;
  }

  /* The Admin submenu uses the same native GENERAL menu dimensions. */
  body.front-mode .generalAdminMenuItem::before{
    left:12px;
    right:12px;
  }
}

/* =====================================================================
   V108 — MOBILE UI SURGICAL ALIGNMENT
   Scope is deliberately narrow:
   1) HOME mobile GENERAL dropdown stacking/clipping only.
   2) HOME mobile Admin panel spacing from GP Ranking only.
   3) Student mobile House crest horizontal alignment only.
   No desktop geometry, data cards, ranking cards, swipe UI, academic UI,
   or JavaScript behavior is changed by this patch.
   ===================================================================== */
@media (max-width:768px){
  /* HOME: escape the Hero's overflow clipping and sit above the ranking. */
  body.front-mode .generalMenu{
    z-index:40000!important;
  }
  body.front-mode .generalMenuPanel{
    position:fixed!important;
    top:calc(env(safe-area-inset-top) + 55px)!important;
    right:max(14px,calc((100vw - 480px)/2 + 14px))!important;
    left:auto!important;
    z-index:40001!important;
  }

  /* ADMIN MODE: keep a deliberate visual gap before Student GP Ranking. */
  body.front-mode .adminHomePanel:not(.hidden){
    margin:8px 8px 15px!important;
  }

  /* STUDENT DATABASE: nudge only the House crest group left so its visual
     right boundary aligns with the Gakusei ID tile below. */
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryHouse{
    transform:translateX(-4px)!important;
  }
}

@media (max-width:390px){
  body:not(.front-mode) .mobileStudentDossier .mobileSummaryHouse{
    transform:translateX(-3px)!important;
  }
}


/* =====================================================================
   V109 — ACADEMIC DOCUMENT PHOTO CROP MATCH
   Scope: student photo inside Academic Record / Academic Transcript only.
   Match the CURRENT mobile Student Data portrait crop without changing any
   document frame size, identity layout, tables, typography, or page geometry.
   ===================================================================== */
.pdfPage .academicIdentityPhoto,
.pdfPage .pdfPhoto,
.pdfPage .transcriptCompactPhoto{
  overflow:hidden!important;
}
.pdfPage .academicIdentityPhoto .academicIdentityPhotoImage,
.pdfPage .pdfPhotoImage,
.pdfPage .pdfPhoto img,
.pdfPage .transcriptCompactPhoto img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:50% 16%!important;
  transform:scale(1.20)!important;
  transform-origin:50% 16%!important;
}

/* =====================================================================
   V110 — MOBILE STUDENT POINT LOG ARTWORK CONTAINMENT
   Scope: Student Point Log artwork on the student MOBILE dossier only.
   The artwork is moved off the outer card background and clipped inside
   the established 12px content inset, so it follows the inner card radius
   instead of visually spilling into the outer padding/border area.
   No point data, timeline, scrolling, sizing, swipe, Academic Records,
   desktop UI, or JavaScript behavior is changed.
   ===================================================================== */
@media (max-width:768px){
  body:not(.front-mode) .mobileStudentDossier .m74PointsApp{
    /* Preserve the existing dark/glass treatment on the complete container,
       but keep the actual illustration out of the outer padding area. */
    background-image:
      linear-gradient(180deg,rgba(4,4,8,.28) 0%,rgba(4,4,8,.53) 34%,rgba(4,4,8,.86) 72%,rgba(4,4,8,.96) 100%),
      linear-gradient(90deg,color-mix(in srgb,var(--accent) 10%,rgba(4,4,8,.68)),rgba(4,4,8,.48) 58%,rgba(4,4,8,.78))!important;
  }

  body:not(.front-mode) .mobileStudentDossier .m74PointsApp::after{
    content:""!important;
    position:absolute!important;
    inset:12px!important;
    z-index:0!important;
    border-radius:12px!important;
    pointer-events:none!important;
    overflow:hidden!important;
    background-image:
      linear-gradient(180deg,rgba(4,4,8,.13) 0%,rgba(4,4,8,.28) 38%,rgba(4,4,8,.69) 73%,rgba(4,4,8,.90) 100%),
      linear-gradient(90deg,rgba(4,4,8,.45),transparent 48%,rgba(4,4,8,.50)),
      url("https://drive.google.com/thumbnail?id=1Zjh2vTq4QhYOOv3LvWkz7T3JeAfrI7-q&sz=w1800")!important;
    background-size:cover,cover,cover!important;
    background-position:center,center,center top!important;
    background-repeat:no-repeat!important;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb,var(--accent) 9%,transparent),
      inset 0 0 24px rgba(0,0,0,.30)!important;
    opacity:.82!important;
  }

  /* Keep all established content above the newly-contained artwork. */
  body:not(.front-mode) .mobileStudentDossier .m74PointsApp>*{
    position:relative!important;
    z-index:1!important;
  }
}


/* =====================================================================
   V111 — GAKUSEI LOGIN + SOA
   Scope is additive only. Existing card geometry remains unchanged unless
   the authenticated student's Academic Record needs the fourth SOA column.
   ===================================================================== */
body.student-login-open{overflow:hidden}

.generalStudentLoginItem{position:relative}
.generalStudentLoginItem::before{
  content:"";position:absolute;left:14px;right:14px;top:-3px;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 38%,transparent),transparent)
}
.generalStudentLoginItem.is-authenticated .generalMenuItemTitle{color:#bff4d5}
.generalStudentLoginItem.is-authenticated{background:color-mix(in srgb,#2d9b63 9%,transparent)!important}

.studentLoginModal{
  position:fixed;inset:0;z-index:15500;display:grid;place-items:center;padding:24px;
  background:rgba(0,0,0,.84);backdrop-filter:blur(13px)
}
.studentLoginCard{
  position:relative;isolation:isolate;width:min(520px,calc(100vw - 38px));overflow:hidden;
  border:1px solid var(--border);border-radius:25px;
  background:linear-gradient(145deg,rgba(17,16,19,.985),rgba(4,4,7,.99));
  box-shadow:0 30px 95px rgba(0,0,0,.72),0 0 38px color-mix(in srgb,var(--accent) 12%,transparent)
}
.studentLoginGlow{position:absolute;inset:-35% -20% auto;height:270px;z-index:-1;pointer-events:none;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 20%,transparent),transparent 68%)}
.studentLoginHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;padding:23px 24px 18px;border-bottom:1px solid var(--border)}
.studentLoginEyebrow{color:var(--accent);font-size:8px;font-weight:900;letter-spacing:.15em}
.studentLoginHeader h2{margin:6px 0 0;color:var(--strong);font-family:"Cinzel",Georgia,serif;font-size:23px;letter-spacing:.035em}
.studentLoginHeader p{max-width:390px;margin:8px 0 0;color:var(--muted);font-size:10px;line-height:1.5}
.studentLoginClose{flex:0 0 auto;padding:8px 10px;border:1px solid var(--border);border-radius:10px;color:var(--muted);background:rgba(255,255,255,.035);font-size:8px;font-weight:900;cursor:pointer}
.studentLoginForm{display:grid;gap:8px;padding:22px 24px 25px}
.studentLoginForm label{margin-top:3px;color:var(--accent);font-size:8px;font-weight:900;letter-spacing:.11em}
.studentLoginForm input{width:100%;height:46px;padding:0 14px;border:1px solid var(--border);border-radius:12px;outline:0;color:var(--strong);background:rgba(0,0,0,.58);font-size:12px;font-weight:700}
.studentLoginForm input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent)}
.studentLoginSubmitButton{height:45px;margin-top:8px;border:0;border-radius:12px;color:#130e0b;background:linear-gradient(135deg,var(--accent),var(--strong) 56%,var(--accent2));font-size:9px;font-weight:900;letter-spacing:.08em;cursor:pointer}
.studentLoginMessage{min-height:17px;margin-top:2px;color:var(--muted);font-size:9px;line-height:1.4}
.studentLoginMessage.error{color:#ffadb6}.studentLoginMessage.success{color:#bff4d5}
.studentSessionView{display:grid;grid-template-columns:62px minmax(0,1fr);gap:15px;align-items:center;padding:23px 24px 25px}
.studentSessionSeal{width:58px;height:58px;display:grid;place-items:center;border:1px solid color-mix(in srgb,#63ca92 45%,var(--border));border-radius:17px;color:#c8f7dc;background:rgba(40,122,76,.18);font-family:"Noto Sans JP",sans-serif;font-size:25px;box-shadow:inset 0 0 20px rgba(60,165,109,.12)}
.studentSessionCopy{min-width:0}.studentSessionCopy>span{color:#8fd8b1;font-size:7px;font-weight:900;letter-spacing:.11em}.studentSessionCopy>strong{display:block;margin-top:5px;color:var(--strong);font-size:17px;font-weight:900}.studentSessionCopy>small{display:block;margin-top:3px;color:var(--accent);font-size:9px}.studentSessionCopy>p{margin:8px 0 0;color:var(--muted);font-size:9px;line-height:1.42}
.studentLogoutButton{grid-column:1/-1;min-height:40px;border:1px solid rgba(205,83,93,.32);border-radius:11px;color:#ffc7cc;background:rgba(139,35,45,.20);font-size:8px;font-weight:900;cursor:pointer}

/* Desktop Academic Records: fourth column exists only for own authenticated record. */
.subjectHeader.soaEnabled,.subjectRow.soaEnabled{grid-template-columns:minmax(0,1fr) 86px 118px 98px!important}
.subjectHeader.soaEnabled .soaHeader{text-align:center}
.soaActionCell{min-width:0;display:grid;place-items:center}
.soaButton{
  width:100%;min-height:30px;padding:5px 7px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:9px;
  color:#140f0c;background:linear-gradient(135deg,var(--accent),var(--strong) 58%,var(--accent2));
  font-size:7px;font-weight:900;line-height:1.15;letter-spacing:.025em;cursor:pointer;white-space:normal
}
.soaButton:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.06)}
.soaButton.is-loading{opacity:.66;cursor:wait}
.soaButton.is-submitted,.soaButton:disabled:not(.is-loading){color:#bff4d5;border-color:rgba(94,196,139,.31);background:rgba(38,122,76,.20);cursor:default}

@media (max-width:768px){
  .studentLoginModal{padding:14px}
  .studentLoginCard{width:min(430px,calc(100vw - 20px));border-radius:21px}
  .studentLoginHeader{padding:18px 17px 14px;gap:12px}.studentLoginHeader h2{font-size:19px}.studentLoginHeader p{font-size:8.4px}.studentLoginEyebrow{font-size:6.4px}.studentLoginClose{padding:7px 8px;font-size:6.5px}
  .studentLoginForm{padding:17px 17px 19px}.studentLoginForm label{font-size:6.7px}.studentLoginForm input{height:42px;font-size:10px}.studentLoginSubmitButton{height:42px;font-size:7.5px}.studentLoginMessage{font-size:7.5px}
  .studentSessionView{grid-template-columns:52px minmax(0,1fr);padding:18px 17px 19px;gap:12px}.studentSessionSeal{width:50px;height:50px;border-radius:14px;font-size:21px}.studentSessionCopy>strong{font-size:14px}.studentSessionCopy>small,.studentSessionCopy>p{font-size:7.4px}.studentLogoutButton{min-height:37px;font-size:7px}

  /* Native m90 Academic Records: retain subject readability while adding SOA. */
  #mobileAcademicMount .m90SubjectHeader.soaEnabled,
  #mobileAcademicMount .m90SubjectRow.soaEnabled{
    grid-template-columns:minmax(0,1fr) 43px 47px 68px!important;
    gap:3px!important
  }
  #mobileAcademicMount .m90SubjectHeader.soaEnabled .m111SoaHeader{text-align:center!important}
  #mobileAcademicMount .m111SoaActionCell{min-width:0;display:grid;place-items:center;border-left:1px solid color-mix(in srgb,var(--accent) 13%,rgba(255,255,255,.035))}
  #mobileAcademicMount .m111SoaButton{
    width:62px;max-width:100%;min-height:25px;padding:3px 4px;border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);border-radius:7px;
    color:#140f0c;background:linear-gradient(135deg,var(--accent),var(--strong) 58%,var(--accent2));
    font-size:5.6px;font-weight:900;line-height:1.08;letter-spacing:.01em;white-space:normal;cursor:pointer
  }
  #mobileAcademicMount .m111SoaButton.is-loading{opacity:.62;cursor:wait}
  #mobileAcademicMount .m111SoaButton.is-submitted,
  #mobileAcademicMount .m111SoaButton:disabled:not(.is-loading){color:#bff4d5;border-color:rgba(94,196,139,.30);background:rgba(38,122,76,.21)}

  /* Legacy academic source node is normally hidden by the mobile app, but if
     it is surfaced by an existing fallback, keep its authenticated layout safe. */
  body:not(.front-mode) .subjectHeader.soaEnabled,
  body:not(.front-mode) .subjectRow.soaEnabled{grid-template-columns:minmax(0,1fr) 48px 48px 67px!important;gap:4px!important}
  body:not(.front-mode) .soaButton{min-height:26px;padding:3px;font-size:5.5px!important}
}

@media (max-width:390px){
  #mobileAcademicMount .m90SubjectHeader.soaEnabled,
  #mobileAcademicMount .m90SubjectRow.soaEnabled{grid-template-columns:minmax(0,1fr) 40px 44px 64px!important}
  #mobileAcademicMount .m111SoaButton{width:58px;font-size:5.2px}
}

/* =====================================================================
   V112 — SOA PROMOTED RULE + GENERAL LOGOUT + PASSWORD VISIBILITY
   Surgical override only. Existing layout/data styling remains intact.
   ===================================================================== */

/* GENERAL: a single logout action always sits at the very bottom. */
.generalLogoutItem{
  position:relative!important;
  margin-top:8px!important;
  border-top:1px solid color-mix(in srgb,var(--accent) 24%,transparent)!important;
  border-radius:10px!important;
}
.generalLogoutItem .generalMenuItemTitle{color:#ffc0c7!important}
.generalLogoutItem .generalMenuItemText{color:color-mix(in srgb,#ffc0c7 64%,var(--muted))!important}
.generalLogoutItem:hover,
.generalLogoutItem:focus-visible{
  border-color:rgba(207,78,91,.34)!important;
  background:rgba(139,35,45,.16)!important;
}

/* Password eye — shared by Admin and Gakusei login. */
.passwordVisibilityButton{
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:1px solid var(--border)!important;
  color:var(--accent)!important;
  background:rgba(0,0,0,.56)!important;
  cursor:pointer!important;
  box-shadow:none!important;
}
.passwordVisibilityButton svg{
  grid-area:1/1;
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.passwordVisibilityButton .passwordEyeClosed{display:none}
.passwordVisibilityButton.is-visible .passwordEyeOpen{display:none}
.passwordVisibilityButton.is-visible .passwordEyeClosed{display:block}
.passwordVisibilityButton:hover,
.passwordVisibilityButton:focus-visible{
  outline:none;
  color:var(--strong)!important;
  border-color:var(--accent)!important;
  background:color-mix(in srgb,var(--accent) 10%,rgba(0,0,0,.66))!important;
}

/* Admin password row keeps its existing login button while inserting the eye. */
.adminPasswordRow{
  grid-template-columns:minmax(0,1fr) 44px 120px!important;
}
.adminPasswordVisibilityButton{
  width:44px!important;
  height:48px!important;
  border-radius:13px!important;
}

/* Gakusei password input gets the same eye without changing the form order. */
.studentPasswordField{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 44px;
  gap:7px;
}
.studentPasswordField .studentLoginPasswordInput,
.studentPasswordField input{
  min-width:0;
}
.studentPasswordVisibilityButton{
  width:44px!important;
  height:46px!important;
  border-radius:12px!important;
}

/* Academic header labels remain on one line when the SOA column is present. */
.subjectHeader.soaEnabled>span{
  min-width:0!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  letter-spacing:.01em!important;
}
.subjectHeader.soaEnabled>span:nth-child(2),
.subjectHeader.soaEnabled>span:nth-child(3){
  font-size:7px!important;
}
.subjectHeader.soaEnabled .soaHeader{
  font-size:7px!important;
  white-space:nowrap!important;
}
.soaButton{white-space:nowrap!important}

/* Retained semesters intentionally have no SOA column/button. */
.soaRetainedNotice{
  margin:10px 14px 2px;
  padding:9px 11px;
  border:1px solid rgba(205,83,93,.26);
  border-radius:11px;
  color:#ffc0c7;
  background:rgba(139,35,45,.13);
  font-size:8.5px;
  font-weight:750;
  line-height:1.4;
  text-align:center;
}

@media (max-width:768px){
  .adminPasswordRow{
    grid-template-columns:minmax(0,1fr) 34px 78px!important;
    gap:6px!important;
  }
  .adminPasswordVisibilityButton{
    width:34px!important;
    height:37px!important;
    border-radius:9px!important;
  }
  .passwordVisibilityButton svg{width:14px;height:14px}

  .studentPasswordField{
    grid-template-columns:minmax(0,1fr) 39px;
    gap:6px;
  }
  .studentPasswordVisibilityButton{
    width:39px!important;
    height:42px!important;
    border-radius:10px!important;
  }

  #mobileAcademicMount .m90SubjectHeader.soaEnabled>span{
    min-width:0!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    letter-spacing:0!important;
  }
  #mobileAcademicMount .m90SubjectHeader.soaEnabled>span:nth-child(2),
  #mobileAcademicMount .m90SubjectHeader.soaEnabled>span:nth-child(3),
  #mobileAcademicMount .m90SubjectHeader.soaEnabled .m111SoaHeader{
    font-size:5.3px!important;
  }
  #mobileAcademicMount .m111SoaButton{
    white-space:nowrap!important;
  }
  #mobileAcademicMount .m112SoaRetainedNotice{
    margin:8px 8px 2px!important;
    padding:7px 8px!important;
    border:1px solid rgba(205,83,93,.25)!important;
    border-radius:9px!important;
    color:#ffc0c7!important;
    background:rgba(139,35,45,.14)!important;
    font-size:6.3px!important;
    font-weight:760!important;
    line-height:1.4!important;
    text-align:center!important;
  }
}

@media (max-width:390px){
  #mobileAcademicMount .m90SubjectHeader.soaEnabled>span:nth-child(2),
  #mobileAcademicMount .m90SubjectHeader.soaEnabled>span:nth-child(3),
  #mobileAcademicMount .m90SubjectHeader.soaEnabled .m111SoaHeader{
    font-size:5px!important;
  }
}

/* V112: logout is centralized in GENERAL dropdown as requested. */
.adminHomeActions .adminLogoutButton,
.studentSessionView .studentLogoutButton{
  display:none!important;
}


/* =====================================================================
   V113 — GLOBAL SOA ACCESS GATE + CANCEL APPLY
   Surgical additions only. No existing layout/data styling is replaced.
   ===================================================================== */
.adminSOAAccessControl{
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  margin:0 0 14px;padding:16px 17px;border:1px solid var(--border);border-radius:16px;
  background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 46%),rgba(255,255,255,.025)
}
.adminSOAAccessCopy{min-width:0}.adminSOAAccessCopy>span{color:var(--accent);font-size:8px;font-weight:900;letter-spacing:.13em}.adminSOAAccessCopy h3{margin:5px 0 0;color:var(--strong);font-size:15px;font-weight:900}.adminSOAAccessCopy p{max-width:560px;margin:6px 0 0;color:var(--muted);font-size:9px;line-height:1.45}
.adminSOAAccessAction{flex:0 0 218px;display:grid;justify-items:stretch;gap:7px}
.adminSOAAccessState{display:grid;place-items:center;min-height:28px;border:1px solid var(--border);border-radius:999px;color:var(--muted);background:rgba(0,0,0,.38);font-size:8px;font-weight:900;letter-spacing:.1em}
.adminSOAAccessState.is-open{color:#bff4d5;border-color:rgba(94,196,139,.32);background:rgba(38,122,76,.18)}
.adminSOAAccessState.is-closed{color:#ffc0c7;border-color:rgba(207,78,91,.34);background:rgba(139,35,45,.17)}
.adminSOAAccessState.is-error{color:#ffd49e;border-color:rgba(218,157,73,.34);background:rgba(135,83,25,.18)}
.adminSOAAccessButton{min-height:38px;padding:8px 11px;border:1px solid var(--border);border-radius:11px;font-size:8px;font-weight:900;letter-spacing:.035em;cursor:pointer}
.adminSOAAccessButton.is-close{color:#ffc0c7;border-color:rgba(207,78,91,.34);background:rgba(139,35,45,.18)}
.adminSOAAccessButton.is-open{color:#bff4d5;border-color:rgba(94,196,139,.34);background:rgba(38,122,76,.19)}
.adminSOAAccessButton:hover:not(:disabled){filter:brightness(1.12);transform:translateY(-1px)}

/* Closed access is visibly different, but the eligible SOA column stays present. */
.soaButton.is-closed,
#mobileAcademicMount .m111SoaButton.is-closed{
  color:color-mix(in srgb,var(--muted) 88%,#fff)!important;
  border-color:color-mix(in srgb,var(--muted) 25%,transparent)!important;
  background:linear-gradient(135deg,rgba(88,88,96,.19),rgba(20,20,24,.68))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)!important;
  opacity:.72!important;
  cursor:not-allowed!important
}

/* A successful application changes into a real cancellation action. */
.soaButton.is-cancel,
#mobileAcademicMount .m111SoaButton.is-cancel{
  color:#ffc0c7!important;
  border-color:rgba(207,78,91,.34)!important;
  background:rgba(139,35,45,.19)!important;
  cursor:pointer!important;
  opacity:1!important
}
.soaButton.is-cancel:hover,
#mobileAcademicMount .m111SoaButton.is-cancel:hover{filter:brightness(1.12)}

@media (max-width:768px){
  .adminSOAAccessControl{display:grid;grid-template-columns:minmax(0,1fr);gap:11px;margin-bottom:11px;padding:12px}
  .adminSOAAccessCopy>span{font-size:6.5px}.adminSOAAccessCopy h3{font-size:12px}.adminSOAAccessCopy p{font-size:7.2px}
  .adminSOAAccessAction{width:100%;display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:7px}
  .adminSOAAccessState{min-height:30px;font-size:6.5px}.adminSOAAccessButton{min-height:34px;font-size:6.5px}
  #mobileAcademicMount .m111SoaButton.is-cancel{font-size:5.1px!important}
}


/* =====================================================================
   V115 — HISTORICAL SOA RECAP + LIVE PASSED RESULT
   Additive only; existing desktop/mobile layout rules are untouched.
   ===================================================================== */
.adminSOARecapPanel{
  margin:0 0 14px;padding:16px 17px;border:1px solid var(--border);border-radius:16px;
  background:radial-gradient(circle at 0 0,color-mix(in srgb,var(--accent) 10%,transparent),transparent 44%),rgba(255,255,255,.018)
}
.adminSOARecapHead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.adminSOARecapCopy{min-width:0}.adminSOARecapCopy>span{color:var(--accent);font-size:8px;font-weight:900;letter-spacing:.13em}.adminSOARecapCopy h3{margin:5px 0 0;color:var(--strong);font-size:15px;font-weight:900}.adminSOARecapCopy p{max-width:620px;margin:6px 0 0;color:var(--muted);font-size:9px;line-height:1.45}
.adminSOARecapTools{flex:0 0 260px;display:grid;grid-template-columns:1fr auto;gap:6px 7px;align-items:end}.adminSOARecapTools label{grid-column:1/-1;color:var(--muted);font-size:7px;font-weight:900;letter-spacing:.1em}.adminSOARecapTools select{min-width:0;height:36px;padding:0 9px;border:1px solid var(--border);border-radius:10px;color:var(--strong);background:#09090c;font-size:8px;font-weight:850;outline:none}.adminSOARecapTools button{height:36px;padding:0 10px;border:1px solid var(--border);border-radius:10px;color:#111;background:linear-gradient(135deg,var(--accent),var(--strong));font-size:7px;font-weight:900;cursor:pointer;white-space:nowrap}
.adminSOARecapMeta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--border) 70%,transparent);border-radius:10px;background:rgba(0,0,0,.25);color:var(--muted);font-size:8px}.adminSOARecapMeta strong{color:var(--accent);font-size:8px;letter-spacing:.06em}
.adminSOARecapContent{margin-top:10px}.adminSOARecapLoading,.adminSOARecapEmpty{padding:18px;border:1px dashed var(--border);border-radius:11px;color:var(--muted);font-size:9px;text-align:center}.adminSOARecapLoading.is-error{color:#ffc0c7;border-color:rgba(207,78,91,.34)}
.adminSOARecapTableWrap{max-height:310px;overflow:auto;border:1px solid var(--border);border-radius:12px;scrollbar-width:thin;scrollbar-color:var(--accent) rgba(0,0,0,.55)}
.adminSOARecapTable{width:100%;border-collapse:collapse;table-layout:fixed;color:var(--text);font-size:8px}.adminSOARecapTable th{position:sticky;top:0;z-index:2;padding:9px 7px;color:var(--strong);background:#171316;font-size:6.7px;font-weight:900;letter-spacing:.035em;white-space:nowrap}.adminSOARecapTable td{padding:8px 7px;border-top:1px solid color-mix(in srgb,var(--border) 55%,transparent);vertical-align:middle;overflow-wrap:anywhere}.adminSOARecapTable tr.is-passed td{background:rgba(38,122,76,.055)}
.adminSOARecapTable th:nth-child(1){width:13%}.adminSOARecapTable th:nth-child(2){width:11%}.adminSOARecapTable th:nth-child(3){width:9%}.adminSOARecapTable th:nth-child(4){width:9%}.adminSOARecapTable th:nth-child(5){width:7%}.adminSOARecapTable th:nth-child(6){width:8%}.adminSOARecapTable th:nth-child(7){width:22%}.adminSOARecapTable th:nth-child(8){width:21%}
.adminSOAMark,.adminSOACurrentMark{display:inline-grid;place-items:center;min-width:32px;min-height:24px;padding:4px 6px;border:1px solid var(--border);border-radius:8px;color:var(--accent);background:rgba(0,0,0,.38);font-weight:900;white-space:nowrap}.adminSOACurrentMark{color:var(--strong)}
.adminSOAAnnulButton{min-width:70px;min-height:28px;padding:5px 8px;border:1px solid rgba(207,78,91,.34);border-radius:9px;color:#ffc0c7;background:rgba(139,35,45,.18);font-size:7px;font-weight:900;cursor:pointer}.adminSOAAnnulButton:hover:not(:disabled){filter:brightness(1.13)}
.adminSOAPassedText{padding:6px 7px;border:1px solid rgba(94,196,139,.30);border-radius:9px;color:#bff4d5;background:rgba(38,122,76,.14);font-size:6.8px;font-weight:900;line-height:1.35;text-align:center}
.adminSOARecapMessage{min-height:15px;margin-top:7px;color:var(--accent);font-size:8px;line-height:1.35}

.soaPassedStatus{
  min-height:30px;display:grid;place-items:center;padding:5px 6px;border:1px solid rgba(94,196,139,.34);border-radius:9px;
  color:#bff4d5;background:rgba(38,122,76,.16);font-size:6.3px;font-weight:900;line-height:1.2;text-align:center
}

@media (max-width:768px){
  .adminSOARecapPanel{padding:12px;margin-bottom:11px}.adminSOARecapHead{display:grid;gap:10px}.adminSOARecapCopy>span{font-size:6.4px}.adminSOARecapCopy h3{font-size:12px}.adminSOARecapCopy p{font-size:7.2px}.adminSOARecapTools{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto}.adminSOARecapTools label{font-size:5.8px}.adminSOARecapTools select,.adminSOARecapTools button{height:32px;font-size:6.2px}.adminSOARecapMeta{font-size:6.3px}.adminSOARecapMeta strong{font-size:6.3px}.adminSOARecapTableWrap{max-height:330px}.adminSOARecapTable{min-width:760px;font-size:7px}.adminSOARecapTable th{font-size:5.8px}.adminSOAPassedText{font-size:5.8px}
  #mobileAcademicMount .m115SoaPassedStatus{min-height:28px;display:grid;place-items:center;padding:4px 5px;border:1px solid rgba(94,196,139,.34);border-radius:8px;color:#bff4d5;background:rgba(38,122,76,.16);font-size:4.9px;font-weight:900;line-height:1.18;text-align:center}
}
/* V115 adds one recap row between SOA access and backend notice. */
.adminControlView{grid-template-rows:auto auto auto auto minmax(0,1fr) auto!important}


/* =====================================================================
   V116 — MOBILE GENERAL DROPDOWN STACK FIX
   Scope: HOME mobile only. Lift the Hero stacking context only while
   GENERAL is open so its dropdown renders above Student GP Ranking.
   ===================================================================== */
@media (max-width:768px){
  body.front-mode .hero:has(#generalMenu.open){
    z-index:8000!important;
  }
  body.front-mode .hero:has(#generalMenu.open) .generalMenu{
    z-index:8001!important;
  }
  body.front-mode .hero:has(#generalMenu.open) .generalMenuPanel{
    z-index:8002!important;
  }
}


/* =====================================================================
   V117 — MOBILE GENERAL DROPDOWN PORTAL FIX
   Scope: HOME mobile GENERAL dropdown only.
   The panel is temporarily mounted directly under <body> while open,
   escaping Hero overflow/stacking so Student GP Ranking cannot cover it.
   ===================================================================== */
@media (max-width:768px){
  body.front-mode > .generalMenuPanel.mobileGeneralMenuPortal{
    position:fixed!important;
    top:calc(env(safe-area-inset-top) + 55px)!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    max-height:calc(100dvh - env(safe-area-inset-top) - 72px)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    z-index:2147483000!important;
    isolation:isolate!important;
    transform:translateZ(0)!important;
    -webkit-transform:translateZ(0)!important;
    pointer-events:auto!important;
  }
}


/* =====================================================================
   V118 — MOBILE ADMIN SCROLL + COMPACT CONTROL
   Scope: Administrator modal on mobile only.
   Makes the whole Admin control surface vertically scrollable and keeps
   wide SOA recap data horizontally swipeable without touching desktop.
   ===================================================================== */
@media (max-width:768px){
  .adminModal{
    padding:8px!important;
    place-items:stretch!important;
    overflow:hidden!important;
  }
  .adminModalCard{
    width:calc(100vw - 16px)!important;
    height:calc(100dvh - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
    min-height:0!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    border-radius:15px!important;
    overflow:hidden!important;
  }
  .adminModalHeader{
    position:relative!important;
    z-index:4!important;
    padding:10px 11px!important;
    flex:0 0 auto!important;
  }
  .adminControlView{
    display:block!important;
    min-height:0!important;
    height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    touch-action:pan-y!important;
    scrollbar-width:thin!important;
    scrollbar-color:var(--accent) rgba(0,0,0,.55)!important;
    padding-bottom:max(10px,env(safe-area-inset-bottom))!important;
  }
  .adminLoginView{
    min-height:0!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
  }
  .adminControlIntro{
    padding:10px 10px 7px!important;
    gap:7px!important;
  }
  .adminControlToolbar{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
  }
  .adminControlToolbar button{
    width:100%!important;
    min-width:0!important;
    min-height:28px!important;
    padding:5px 4px!important;
    white-space:normal!important;
    line-height:1.15!important;
  }
  .adminSOAAccessControl,
  .adminSOARecapPanel{
    margin-left:10px!important;
    margin-right:10px!important;
    padding:10px!important;
    border-radius:12px!important;
  }
  .adminSOAAccessControl{
    margin-bottom:8px!important;
  }
  .adminSOARecapPanel{
    margin-bottom:8px!important;
  }
  .adminSOARecapHead{
    gap:7px!important;
  }
  .adminSOARecapCopy p{
    margin-top:4px!important;
    line-height:1.32!important;
  }
  .adminSOARecapTools{
    gap:5px!important;
  }
  .adminSOARecapTools select,
  .adminSOARecapTools button{
    height:30px!important;
    min-height:30px!important;
  }
  .adminSOARecapMeta{
    margin-top:8px!important;
    padding:7px 8px!important;
  }
  .adminSOARecapContent{
    margin-top:7px!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  .adminSOARecapTableWrap{
    width:100%!important;
    max-width:100%!important;
    max-height:290px!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    touch-action:pan-x pan-y!important;
    scrollbar-gutter:stable!important;
  }
  .adminSOARecapTable{
    min-width:660px!important;
  }
  .adminBackendNotice{
    margin:0 10px 7px!important;
  }
  .adminSemesterList{
    min-height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    padding:0 10px 8px!important;
  }
  .adminSemesterRow{
    min-height:46px!important;
    padding:6px 7px!important;
  }
  .adminControlFooter{
    position:relative!important;
    display:grid!important;
    gap:6px!important;
    margin-top:2px!important;
    padding:8px 10px 10px!important;
  }
  .adminControlFooterButtons{
    width:100%!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    gap:6px!important;
  }
  .adminControlFooterButtons button{
    width:100%!important;
    min-height:31px!important;
  }
}

@media (max-width:390px){
  .adminSOAAccessControl,
  .adminSOARecapPanel{
    margin-left:8px!important;
    margin-right:8px!important;
  }
  .adminSOARecapTable{
    min-width:620px!important;
  }
}


/* =====================================================================
   V121 — MOBILE ADMIN AUTH VISIBILITY + ORDERED CONTROL LAYOUT
   Scope: Administrator modal on mobile only.
   1) Preserve the login gate: hidden Admin controls stay truly hidden.
   2) Order the authenticated Admin workspace as Publication first, SOA second.
   3) Keep one smooth vertical scroll with horizontally swipeable SOA recap.
   Desktop is intentionally untouched.
   ===================================================================== */
@media (max-width:768px){
  /* V118 used display:block!important on the control view. Without this
     stronger hidden rule it overrode the global .hidden utility on mobile. */
  #adminControlView.hidden{
    display:none!important;
  }
  #adminLoginView.hidden{
    display:none!important;
  }

  .adminModal{
    padding:7px!important;
    place-items:stretch!important;
    overflow:hidden!important;
  }
  .adminModalCard{
    width:calc(100vw - 14px)!important;
    height:calc(100dvh - 14px)!important;
    max-height:calc(100dvh - 14px)!important;
    min-height:0!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    border-radius:17px!important;
    overflow:hidden!important;
  }
  .adminModalHeader{
    position:sticky!important;
    top:0!important;
    z-index:8!important;
    min-height:58px!important;
    padding:10px 11px!important;
    gap:9px!important;
    background:linear-gradient(180deg,rgba(10,9,12,.99),rgba(6,6,9,.96))!important;
    backdrop-filter:blur(16px)!important;
  }
  .adminModalEyebrow{font-size:6.3px!important;letter-spacing:.13em!important}
  .adminModalTitle{font-size:14px!important;line-height:1.08!important}
  .adminModalSubtitle{font-size:6.6px!important;line-height:1.25!important}
  .adminModalClose{
    min-height:32px!important;
    padding:6px 9px!important;
    border-radius:9px!important;
    font-size:6.5px!important;
    flex:0 0 auto!important;
  }

  /* Login stays as the only visible content until authentication succeeds. */
  .adminLoginView:not(.hidden){
    display:grid!important;
    min-height:0!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    padding:18px 14px 22px!important;
  }

  /* One authenticated scroll surface. Flex order changes mobile presentation
     only; desktop keeps the original DOM/layout order. */
  #adminControlView:not(.hidden){
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    padding:10px 0 max(18px,env(safe-area-inset-bottom))!important;
    scrollbar-width:thin!important;
    scrollbar-color:var(--accent) rgba(0,0,0,.5)!important;
  }

  /* 01 — Academic publication */
  #adminControlView .adminControlIntro{
    order:10!important;
    margin:0 10px 8px!important;
    padding:13px!important;
    gap:10px!important;
    border:1px solid color-mix(in srgb,var(--accent) 28%,transparent)!important;
    border-radius:14px!important;
    background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 8%,rgba(255,255,255,.025)),rgba(0,0,0,.22))!important;
    box-shadow:inset 0 0 24px color-mix(in srgb,var(--accent) 5%,transparent)!important;
  }
  #adminControlView .adminControlIntro>div:first-child>span{
    font-size:6.5px!important;
    letter-spacing:.13em!important;
  }
  #adminControlView .adminControlIntro h3{
    margin-top:5px!important;
    font-size:14px!important;
    line-height:1.12!important;
  }
  #adminControlView .adminControlIntro p{
    margin-top:6px!important;
    font-size:7.5px!important;
    line-height:1.42!important;
  }
  #adminControlView .adminControlToolbar{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }
  #adminControlView .adminControlToolbar button{
    width:100%!important;
    min-width:0!important;
    min-height:33px!important;
    padding:6px 5px!important;
    border-radius:9px!important;
    font-size:6.1px!important;
    line-height:1.15!important;
    white-space:normal!important;
  }
  #adminControlView .adminBackendNotice{
    order:20!important;
    margin:0 10px 8px!important;
    padding:8px 9px!important;
    border-radius:10px!important;
    font-size:6.5px!important;
    line-height:1.35!important;
  }
  #adminControlView .adminSemesterList{
    order:30!important;
    display:grid!important;
    gap:6px!important;
    min-height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    padding:0 10px 8px!important;
  }
  #adminControlView .adminSemesterRow{
    min-height:52px!important;
    padding:8px 9px!important;
    border-radius:11px!important;
  }
  #adminControlView .adminSemesterIdentity{gap:8px!important}
  #adminControlView .adminSemesterIndex{
    width:30px!important;
    height:30px!important;
    flex-basis:30px!important;
    border-radius:9px!important;
    font-size:7px!important;
  }
  #adminControlView .adminSemesterIdentity strong{font-size:8.7px!important;line-height:1.1!important}
  #adminControlView .adminSemesterIdentity small{font-size:6.1px!important;line-height:1.2!important}
  #adminControlView .adminSemesterSwitchWrap{gap:7px!important}
  #adminControlView .adminSemesterState{min-width:65px!important;font-size:5.7px!important}
  #adminControlView .adminSemesterSwitch{width:40px!important;height:22px!important;flex-basis:40px!important}
  #adminControlView .adminSemesterSwitch i{left:3px!important;top:3px!important;width:14px!important;height:14px!important}
  #adminControlView .adminSemesterToggle:checked+.adminSemesterSwitch i{transform:translateX(18px)!important}

  /* Save publication settings closes the first visual group before SOA. */
  #adminControlView .adminControlFooter{
    order:40!important;
    position:relative!important;
    display:grid!important;
    gap:7px!important;
    margin:0 10px 14px!important;
    padding:10px!important;
    border:1px solid color-mix(in srgb,var(--border) 72%,transparent)!important;
    border-radius:12px!important;
    background:rgba(0,0,0,.22)!important;
  }
  #adminControlView .adminSaveMessage{font-size:6.2px!important;line-height:1.3!important}
  #adminControlView .adminControlFooterButtons{
    width:100%!important;
    display:grid!important;
    grid-template-columns:84px minmax(0,1fr)!important;
    gap:7px!important;
  }
  #adminControlView .adminControlFooterButtons button{
    width:100%!important;
    min-height:34px!important;
    padding:7px 8px!important;
    border-radius:9px!important;
    font-size:6px!important;
    line-height:1.15!important;
  }

  /* 02 — SOA management */
  #adminControlView .adminSOAAccessControl{
    order:50!important;
    margin:0 10px 8px!important;
    padding:13px!important;
    border-radius:14px!important;
    border-color:color-mix(in srgb,var(--accent) 34%,transparent)!important;
    background:linear-gradient(145deg,color-mix(in srgb,var(--accent2) 7%,rgba(255,255,255,.02)),rgba(0,0,0,.25))!important;
  }
  #adminControlView .adminSOAAccessCopy>span{font-size:6.5px!important}
  #adminControlView .adminSOAAccessCopy h3{font-size:13px!important;line-height:1.12!important}
  #adminControlView .adminSOAAccessCopy p{font-size:7.3px!important;line-height:1.4!important}
  #adminControlView .adminSOAAccessAction{
    width:100%!important;
    display:grid!important;
    grid-template-columns:92px minmax(0,1fr)!important;
    gap:7px!important;
  }
  #adminControlView .adminSOAAccessState{min-height:32px!important;font-size:6.4px!important}
  #adminControlView .adminSOAAccessButton{min-height:34px!important;font-size:6.2px!important}

  #adminControlView .adminSOARecapPanel{
    order:60!important;
    margin:0 10px!important;
    padding:13px!important;
    border-radius:14px!important;
  }
  #adminControlView .adminSOARecapHead{display:grid!important;gap:8px!important}
  #adminControlView .adminSOARecapCopy>span{font-size:6.4px!important}
  #adminControlView .adminSOARecapCopy h3{font-size:13px!important;line-height:1.12!important}
  #adminControlView .adminSOARecapCopy p{margin-top:5px!important;font-size:7.2px!important;line-height:1.4!important}
  #adminControlView .adminSOARecapTools{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:5px 6px!important;
  }
  #adminControlView .adminSOARecapTools label{font-size:5.8px!important}
  #adminControlView .adminSOARecapTools select,
  #adminControlView .adminSOARecapTools button{
    height:32px!important;
    min-height:32px!important;
    font-size:6.2px!important;
    border-radius:9px!important;
  }
  #adminControlView .adminSOARecapMeta{
    margin-top:8px!important;
    padding:7px 8px!important;
    font-size:6.2px!important;
  }
  #adminControlView .adminSOARecapMeta strong{font-size:6.2px!important}
  #adminControlView .adminSOARecapContent{
    margin-top:7px!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  #adminControlView .adminSOARecapTableWrap{
    width:100%!important;
    max-width:100%!important;
    max-height:320px!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    touch-action:pan-x pan-y!important;
    scrollbar-gutter:stable!important;
  }
  #adminControlView .adminSOARecapTable{
    min-width:660px!important;
    font-size:7px!important;
  }
  #adminControlView .adminSOARecapTable th{font-size:5.8px!important}
  #adminControlView .adminSOAPassedText{font-size:5.8px!important}
}

@media (max-width:390px){
  #adminControlView .adminControlIntro,
  #adminControlView .adminBackendNotice,
  #adminControlView .adminSemesterList,
  #adminControlView .adminControlFooter,
  #adminControlView .adminSOAAccessControl,
  #adminControlView .adminSOARecapPanel{
    margin-left:8px!important;
    margin-right:8px!important;
  }
  #adminControlView .adminSOARecapTable{min-width:620px!important}
}


/* =====================================================================
   V122 — ADMIN LOGIN CLEANUP + ORDERED ADMIN WORKSPACE + INNER SEMESTER SCROLL
   Scope: Administrator UI only.
   - Mobile Admin login: clean single-column authentication layout.
   - Mobile + desktop Admin workspace order:
     Publication controls -> semester list -> save -> SOA access -> SOA recap.
   - Semester list uses its own bounded inner scroll so the Admin page stays compact.
   All non-Admin UI and JavaScript behavior are intentionally untouched.
   ===================================================================== */

/* Keep the authentication gate authoritative at every viewport. */
#adminControlView.hidden,
#adminLoginView.hidden{
  display:none!important;
}

/* Consistent visual order for authenticated Admin on desktop and mobile. */
#adminControlView:not(.hidden){
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:contain!important;
}
#adminControlView .adminControlIntro{order:10!important}
#adminControlView .adminBackendNotice{order:20!important}
#adminControlView .adminSemesterList{order:30!important}
#adminControlView .adminControlFooter{order:40!important}
#adminControlView .adminSOAAccessControl{order:50!important}
#adminControlView .adminSOARecapPanel{order:60!important}

/* Semester publication list is now a real inner-scroll panel. */
#adminControlView .adminSemesterList{
  min-height:0!important;
  max-height:310px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-gutter:stable!important;
  margin:0 22px 10px!important;
  padding:8px!important;
  border:1px solid color-mix(in srgb,var(--border) 78%,transparent)!important;
  border-radius:14px!important;
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 42%),
    rgba(0,0,0,.22)!important;
  box-shadow:inset 0 0 22px rgba(0,0,0,.18)!important;
  scrollbar-width:thin!important;
  scrollbar-color:var(--accent) color-mix(in srgb,var(--panel2) 90%,#000)!important;
}
#adminControlView .adminSemesterList::-webkit-scrollbar{
  width:8px;
}
#adminControlView .adminSemesterList::-webkit-scrollbar-track{
  border-radius:999px;
  background:color-mix(in srgb,var(--panel2) 92%,#000);
}
#adminControlView .adminSemesterList::-webkit-scrollbar-thumb{
  border:2px solid color-mix(in srgb,var(--panel2) 88%,#000);
  border-radius:999px;
  background:linear-gradient(180deg,var(--strong),var(--accent),var(--accent2));
}

/* Desktop: publication group first, SOA group second, with balanced margins. */
@media (min-width:769px){
  #adminControlView:not(.hidden){
    padding-bottom:18px!important;
  }
  #adminControlView .adminControlFooter{
    margin:0 22px 16px!important;
    border:1px solid color-mix(in srgb,var(--border) 70%,transparent)!important;
    border-radius:13px!important;
    background:rgba(0,0,0,.20)!important;
  }
  #adminControlView .adminSOAAccessControl,
  #adminControlView .adminSOARecapPanel{
    margin-left:22px!important;
    margin-right:22px!important;
  }
  #adminControlView .adminSOARecapPanel{
    margin-bottom:0!important;
  }
}

/* Mobile Admin login: no squeezed 3-column password row. */
@media (max-width:768px){
  .adminLoginView:not(.hidden){
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:0!important;
    min-height:0!important;
    overflow-y:auto!important;
    padding:16px 12px 20px!important;
  }

  .adminLoginSigil{
    grid-row:auto!important;
    width:62px!important;
    height:62px!important;
    flex:0 0 62px!important;
    margin:5px auto 12px!important;
    border-radius:18px!important;
    font-size:27px!important;
  }

  .adminLoginCopy{
    width:100%!important;
    max-width:340px!important;
    margin:0 auto 15px!important;
    text-align:center!important;
  }
  .adminLoginCopy span{
    font-size:6.8px!important;
    letter-spacing:.15em!important;
  }
  .adminLoginCopy h3{
    margin:6px 0 0!important;
    font-size:18px!important;
    line-height:1.08!important;
  }
  .adminLoginCopy p{
    margin:7px auto 0!important;
    max-width:300px!important;
    font-size:8.2px!important;
    line-height:1.45!important;
  }

  .adminLoginForm{
    grid-column:auto!important;
    width:100%!important;
    max-width:360px!important;
    margin:0 auto!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:7px!important;
  }
  .adminLoginForm label{
    font-size:6.8px!important;
    letter-spacing:.11em!important;
  }

  .adminPasswordRow{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 42px!important;
    gap:7px!important;
    align-items:stretch!important;
  }
  .adminPasswordRow input{
    width:100%!important;
    min-width:0!important;
    height:44px!important;
    padding:0 11px!important;
    border-radius:11px!important;
    font-size:9px!important;
  }
  .adminPasswordVisibilityButton{
    width:42px!important;
    height:44px!important;
    min-width:42px!important;
    min-height:44px!important;
    padding:0!important;
    border-radius:11px!important;
  }
  .adminPasswordVisibilityButton svg{
    width:16px!important;
    height:16px!important;
  }
  #adminLoginButton{
    grid-column:1/-1!important;
    width:100%!important;
    min-height:42px!important;
    margin-top:1px!important;
    border-radius:11px!important;
    font-size:7.5px!important;
    letter-spacing:.07em!important;
  }
  .adminLoginMessage{
    min-height:18px!important;
    font-size:7px!important;
    line-height:1.35!important;
    text-align:center!important;
  }

  /* Mobile semester list stays compact and scrolls inside itself. */
  #adminControlView .adminSemesterList{
    display:grid!important;
    align-content:start!important;
    gap:6px!important;
    max-height:255px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    margin:0 10px 9px!important;
    padding:7px!important;
    border-radius:12px!important;
  }
  #adminControlView .adminSemesterRow{
    flex:0 0 auto!important;
  }
}

@media (max-width:390px){
  .adminLoginView:not(.hidden){
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .adminLoginCopy h3{font-size:17px!important}
  #adminControlView .adminSemesterList{
    max-height:235px!important;
    margin-left:8px!important;
    margin-right:8px!important;
  }
}


/* =====================================================================
   V124 — ADMIN SEMESTER INNER SCROLL: TALL + NON-SHRINKING
   Scope: ONLY the visible height of the existing Admin semester list.
   Fix: use explicit height/min-height/max-height + flex:0 0 auto so the
   list cannot be compressed by the Admin flex layout.
   ===================================================================== */

/* Desktop */
#adminControlView .adminSemesterList{
  height:700px!important;
  min-height:700px!important;
  max-height:700px!important;
  flex:0 0 700px!important;
  overflow-y:auto!important;
}

/* Mobile */
@media (max-width:768px){
  #adminControlView .adminSemesterList{
    height:620px!important;
    min-height:620px!important;
    max-height:620px!important;
    flex:0 0 620px!important;
    overflow-y:auto!important;
  }
}

/* Small mobile */
@media (max-width:390px){
  #adminControlView .adminSemesterList{
    height:560px!important;
    min-height:560px!important;
    max-height:560px!important;
    flex:0 0 560px!important;
  }
}


/* =====================================================================
   V127 — MOBILE KSI HEADER ART RESTORE + AUTH-ONLY FLOATING LOGOUT
   Scope:
   1) KŌSEI/KSI student mobile header artwork only.
   2) One Gakusei logout item inside the existing mobile floating nav.
   ===================================================================== */

@media (max-width:768px){
  /* KSI artwork: preserve the original file, add a direct-image fallback,
     and prevent the darker KSI artwork from disappearing under the shade. */
  body:not(.front-mode).dorm-kosei
  .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderArt{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    background-image:
      url("https://drive.google.com/thumbnail?id=1KJiRkV957u2OvAXbXWc1MDGXLKhDhcEv&sz=w2400"),
      url("https://lh3.googleusercontent.com/d/1KJiRkV957u2OvAXbXWc1MDGXLKhDhcEv=w2400")!important;
    background-size:cover,cover!important;
    background-position:center 31%,center 31%!important;
    background-repeat:no-repeat,no-repeat!important;
    background-color:#14180b!important;
    filter:saturate(1.06) contrast(1.05) brightness(.96)!important;
  }

  body:not(.front-mode).dorm-kosei
  .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderShade{
    opacity:.72!important;
  }

  /* Existing 3-icon nav remains exactly the same before login.
     After Gakusei authentication, one fourth track is opened for LOG OUT. */
  body:not(.front-mode) #mobileStudentAppDock
  .mobileStudentDockNav.has-student-logout{
    grid-template-columns:repeat(4,38px)!important;
  }

  body:not(.front-mode) #mobileStudentAppDock .mobileDockLogout{
    color:#ffc5ca!important;
  }
  body:not(.front-mode) #mobileStudentAppDock .mobileDockLogout .mobileDockIcon{
    color:#ff9ca5!important;
    background:rgba(137,29,40,.16)!important;
  }
}

@media (max-width:390px){
  body:not(.front-mode) #mobileStudentAppDock
  .mobileStudentDockNav.has-student-logout{
    grid-template-columns:repeat(4,38px)!important;
  }
}


/* =====================================================================
   V128 — KSI HEADER UNIFIED + ONE-ROW AUTH DOCK + ADMIN GENERAL ONLY
   Requested scope only:
   1) KSI artwork uses the same mobile header treatment as the other Houses.
   2) Floating navigation is always one row; Gakusei LOG OUT exists only
      while an authenticated Gakusei session is active.
   3) Administrator Home panel is removed from the visible Home flow;
      Administrator remains accessible through GENERAL.
   ===================================================================== */

/* Admin must not occupy a Home section before Student GP Ranking. */
#adminHomePanel{
  display:none!important;
}

@media (max-width:768px){
  /*
   * KSI/KŌSEI — same visual system as TSUKIYOMI/YAMIYO.
   * V127 made KSI brighter/fully opaque and reduced only its shade.
   * Restore the shared V98 House-header values while retaining the
   * alternate image fallback that protects against Drive thumbnail failure.
   */
  body:not(.front-mode).dorm-kosei
  .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderArt{
    display:block!important;
    visibility:visible!important;
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    width:100%!important;
    height:100%!important;
    opacity:.92!important;
    border-radius:inherit!important;
    background-image:
      url("https://drive.google.com/thumbnail?id=1KJiRkV957u2OvAXbXWc1MDGXLKhDhcEv&sz=w2400"),
      url("https://lh3.googleusercontent.com/d/1KJiRkV957u2OvAXbXWc1MDGXLKhDhcEv=w2400")!important;
    background-color:transparent!important;
    background-size:cover,cover!important;
    background-repeat:no-repeat,no-repeat!important;
    background-position:center 31%,center 31%!important;
    filter:saturate(.96) contrast(1.04) brightness(.80)!important;
    transform:none!important;
    clip-path:none!important;
    -webkit-clip-path:none!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
    pointer-events:none!important;
  }

  body:not(.front-mode).dorm-kosei
  .mobileStudentDossier>.mobileStudentHeader .mobileStudentHeaderShade{
    opacity:1!important;
  }

  /*
   * One-row floating navigation.
   * The explicit hidden guard is intentionally more specific than the
   * existing .mobileDockItem { display:grid!important } rule.
   */
  body:not(.front-mode) #mobileStudentAppDock
  #mobileStudentDockLogout.hidden{
    display:none!important;
  }

  body:not(.front-mode) #mobileStudentAppDock .mobileStudentDockNav{
    grid-auto-flow:column!important;
    grid-template-rows:1fr!important;
    grid-auto-rows:1fr!important;
    grid-auto-columns:38px!important;
    align-items:center!important;
    white-space:nowrap!important;
  }

  body:not(.front-mode) #mobileStudentAppDock
  .mobileStudentDockNav.has-student-logout{
    grid-template-columns:repeat(4,38px)!important;
    grid-auto-columns:38px!important;
  }
}

@media (max-width:390px){
  body:not(.front-mode) #mobileStudentAppDock
  #mobileStudentDockLogout.hidden{
    display:none!important;
  }

  body:not(.front-mode) #mobileStudentAppDock .mobileStudentDockNav{
    grid-auto-flow:column!important;
    grid-template-rows:1fr!important;
    grid-auto-columns:38px!important;
  }

  body:not(.front-mode) #mobileStudentAppDock
  .mobileStudentDockNav.has-student-logout{
    grid-template-columns:repeat(4,38px)!important;
  }
}


/* =====================================================================
   V129 — MOBILE GP RANKING NOTE
   Scope: only the existing GP Ranking disclaimer on mobile Home.
   Re-shows the existing disclaimer that older mobile overrides hid and
   presents it as a compact, readable note card.
   ===================================================================== */
@media (max-width:768px){
  body.front-mode .gpRankingSection .gpRankingDisclaimer{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    width:100%!important;
    max-width:100%!important;
    margin:9px 0 0!important;
    padding:9px 10px 9px 12px!important;
    border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)!important;
    border-left:3px solid var(--accent)!important;
    border-radius:11px!important;
    color:color-mix(in srgb,var(--text) 76%,var(--muted))!important;
    background:
      linear-gradient(135deg,
        color-mix(in srgb,var(--accent) 9%,rgba(255,255,255,.025)),
        rgba(0,0,0,.22))!important;
    box-shadow:
      inset 0 0 16px color-mix(in srgb,var(--accent) 5%,transparent),
      0 6px 18px rgba(0,0,0,.14)!important;
    font-size:7.8px!important;
    font-weight:600!important;
    line-height:1.48!important;
    letter-spacing:.01em!important;
    text-align:left!important;
  }

  body.front-mode .gpRankingSection .gpRankingDisclaimer::before{
    content:'RANKING NOTE';
    display:block;
    margin:0 0 4px;
    color:var(--accent);
    font-size:6px;
    font-weight:900;
    line-height:1;
    letter-spacing:.15em;
  }
}

@media (max-width:390px){
  body.front-mode .gpRankingSection .gpRankingDisclaimer{
    padding:8px 9px 8px 11px!important;
    font-size:7.4px!important;
    line-height:1.45!important;
  }
}


/* =====================================================================
   V130 — PUBLISHED-SEMESTER PROMOTION RECAP SELECTOR
   Scope: NENSEI PROMOTION RECAP only.
   Publication source is the existing AcademicPublicationControl state.
   ===================================================================== */

#promotionModal .promotionModalCard{
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
}

#promotionModal .promotionSemesterControl{
  display:grid;
  grid-template-columns:minmax(0,1fr) 285px 245px;
  gap:14px;
  align-items:center;
  padding:15px 24px;
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(circle at 0 50%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 34%),
    linear-gradient(135deg,rgba(255,255,255,.035),rgba(0,0,0,.20));
}

#promotionModal .promotionSemesterCopy{
  min-width:0;
}
#promotionModal .promotionSemesterCopy>span{
  display:block;
  color:var(--accent);
  font-size:8px;
  font-weight:900;
  letter-spacing:.15em;
}
#promotionModal .promotionSemesterCopy>strong{
  display:block;
  margin-top:4px;
  color:var(--strong);
  font-size:15px;
  font-weight:900;
  letter-spacing:.025em;
}
#promotionModal .promotionSemesterCopy>small{
  display:block;
  max-width:460px;
  margin-top:5px;
  color:var(--muted);
  font-size:9px;
  line-height:1.38;
}

#promotionModal .promotionSemesterField{
  min-width:0;
  display:grid;
  gap:6px;
}
#promotionModal .promotionSemesterField>span{
  color:var(--muted);
  font-size:7px;
  font-weight:900;
  letter-spacing:.13em;
}
#promotionModal .promotionSemesterSelectShell{
  position:relative;
  min-width:0;
}
#promotionModal .promotionSemesterSelectShell select{
  width:100%;
  height:42px;
  padding:0 42px 0 13px;
  border:1px solid color-mix(in srgb,var(--accent) 48%,var(--border));
  border-radius:12px;
  outline:0;
  appearance:none;
  -webkit-appearance:none;
  color:var(--strong);
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,rgba(0,0,0,.74)),rgba(5,5,8,.94));
  box-shadow:
    inset 0 0 18px color-mix(in srgb,var(--accent) 6%,transparent),
    0 8px 20px rgba(0,0,0,.18);
  font-size:10px;
  font-weight:900;
  letter-spacing:.045em;
  cursor:pointer;
}
#promotionModal .promotionSemesterSelectShell select:focus{
  border-color:var(--accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent),
    inset 0 0 18px color-mix(in srgb,var(--accent) 9%,transparent);
}
#promotionModal .promotionSemesterSelectShell select:disabled{
  cursor:wait;
  opacity:.6;
}
#promotionModal .promotionSemesterSelectShell option{
  color:#f4eadc;
  background:#111014;
}
#promotionModal .promotionSemesterSelectShell i{
  position:absolute;
  top:50%;
  right:13px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  transform:translateY(-50%);
  border-radius:50%;
  color:#15110c;
  background:linear-gradient(135deg,var(--accent),var(--strong));
  font-style:normal;
  font-size:12px;
  pointer-events:none;
}

#promotionModal .promotionPublicationState{
  min-width:0;
  min-height:48px;
  display:grid;
  grid-template-columns:10px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(0,0,0,.28);
}
#promotionModal .promotionPublicationDot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#736d67;
  box-shadow:0 0 0 4px rgba(115,109,103,.10);
}
#promotionModal .promotionPublicationState small{
  display:block;
  color:var(--muted);
  font-size:6.5px;
  font-weight:900;
  letter-spacing:.11em;
}
#promotionModal .promotionPublicationState strong{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:8px;
  font-weight:900;
  line-height:1.25;
}
#promotionModal .promotionPublicationState.is-published{
  border-color:rgba(73,178,119,.34);
  background:linear-gradient(135deg,rgba(36,113,71,.15),rgba(0,0,0,.28));
}
#promotionModal .promotionPublicationState.is-published .promotionPublicationDot{
  background:#73e0a0;
  box-shadow:0 0 0 4px rgba(115,224,160,.10),0 0 12px rgba(115,224,160,.34);
}
#promotionModal .promotionPublicationState.is-published strong{
  color:#bff4d5;
}

#promotionModal #promotionContent{
  min-height:0;
  overflow:hidden;
}
#promotionModal .promotionRecapLoading{
  min-height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:24px;
  color:var(--muted);
}
#promotionModal .promotionRecapLoading span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  animation:promotionRecapPulse 1.05s ease-in-out infinite;
}
#promotionModal .promotionRecapLoading span:nth-child(2){animation-delay:.13s}
#promotionModal .promotionRecapLoading span:nth-child(3){animation-delay:.26s}
#promotionModal .promotionRecapLoading strong{
  margin-left:5px;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
}
@keyframes promotionRecapPulse{
  0%,100%{opacity:.25;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-4px)}
}

#promotionModal .promotionUnavailable{
  min-height:190px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:7px;
  margin:18px 24px 24px;
  padding:28px;
  border:1px dashed color-mix(in srgb,var(--accent) 42%,var(--border));
  border-radius:17px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 20%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 48%),
    rgba(0,0,0,.24);
}
#promotionModal .promotionUnavailable>span{
  color:var(--accent);
  font-size:8px;
  font-weight:900;
  letter-spacing:.15em;
}
#promotionModal .promotionUnavailable>strong{
  color:var(--strong);
  font-size:16px;
  font-weight:900;
}
#promotionModal .promotionUnavailable>p{
  max-width:520px;
  margin:0;
  color:var(--muted);
  font-size:10px;
  line-height:1.45;
}

#promotionModal #promotionDetailButton:disabled{
  cursor:not-allowed!important;
  opacity:.42!important;
  filter:grayscale(.35)!important;
}

/* Desktop keeps the recap table as the existing table layout. */
@media (min-width:769px){
  #promotionModal .promotionModalCard{
    width:1120px;
    max-height:90vh;
  }
  #promotionModal #promotionContent{
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:var(--accent) color-mix(in srgb,var(--panel2) 92%,#000);
  }
}

/* Mobile: selector becomes a clean vertical control, table behavior is untouched. */
@media (max-width:768px){
  #promotionModal .promotionModalCard{
    display:grid!important;
    grid-template-rows:auto auto minmax(0,1fr)!important;
    width:100%!important;
    max-width:100%!important;
    max-height:92dvh!important;
  }

  #promotionModal .promotionSemesterControl{
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
    padding:10px!important;
  }

  #promotionModal .promotionSemesterCopy{
    padding:1px 2px 3px!important;
  }
  #promotionModal .promotionSemesterCopy>span{
    font-size:5.6px!important;
    letter-spacing:.13em!important;
  }
  #promotionModal .promotionSemesterCopy>strong{
    margin-top:3px!important;
    font-size:10px!important;
  }
  #promotionModal .promotionSemesterCopy>small{
    margin-top:4px!important;
    font-size:6.2px!important;
    line-height:1.35!important;
  }

  #promotionModal .promotionSemesterField{
    gap:4px!important;
  }
  #promotionModal .promotionSemesterField>span{
    font-size:5.3px!important;
  }
  #promotionModal .promotionSemesterSelectShell select{
    height:36px!important;
    padding:0 36px 0 10px!important;
    border-radius:9px!important;
    font-size:7.2px!important;
  }
  #promotionModal .promotionSemesterSelectShell i{
    right:9px!important;
    width:18px!important;
    height:18px!important;
    font-size:9px!important;
  }

  #promotionModal .promotionPublicationState{
    min-height:39px!important;
    grid-template-columns:8px minmax(0,1fr)!important;
    gap:8px!important;
    padding:7px 9px!important;
    border-radius:9px!important;
  }
  #promotionModal .promotionPublicationDot{
    width:7px!important;
    height:7px!important;
  }
  #promotionModal .promotionPublicationState small{
    font-size:4.8px!important;
  }
  #promotionModal .promotionPublicationState strong{
    margin-top:2px!important;
    font-size:5.8px!important;
    line-height:1.2!important;
  }

  #promotionModal #promotionContent{
    min-height:0!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
  }

  #promotionModal .promotionRecapLoading{
    min-height:110px!important;
    padding:15px 10px!important;
    gap:5px!important;
  }
  #promotionModal .promotionRecapLoading span{
    width:5px!important;
    height:5px!important;
  }
  #promotionModal .promotionRecapLoading strong{
    margin-left:3px!important;
    font-size:6px!important;
  }

  #promotionModal .promotionUnavailable{
    min-height:140px!important;
    margin:10px!important;
    padding:18px 13px!important;
    border-radius:11px!important;
  }
  #promotionModal .promotionUnavailable>span{
    font-size:5px!important;
  }
  #promotionModal .promotionUnavailable>strong{
    font-size:10px!important;
    line-height:1.2!important;
  }
  #promotionModal .promotionUnavailable>p{
    font-size:6px!important;
    line-height:1.4!important;
  }
}