@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fraunces:wght@700;800;900&display=swap');
:root{--navy:#071a2f;--navy2:#0b1f3a;--ink:#0f172a;--muted:#64748b;--soft:#f6f8fb;--card:#fff;--line:#e2e8f0;--green:#059669;--green2:#0f766e;--gold:#facc15;--blue:#2563eb;--purple:#7c3aed;--orange:#d97706;--red:#dc2626;--shadow:0 18px 55px rgba(15,23,42,.07);--radius:22px}*{box-sizing:border-box}body{margin:0;background:var(--soft);color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Arial,sans-serif;font-size:14px}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.muted{color:var(--muted)}
.app-shell{display:grid;grid-template-columns:286px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:radial-gradient(circle at 20% 0,rgba(0,148,116,.16),transparent 30%),linear-gradient(180deg,#07162b,#061427);padding:24px 18px;color:#fff;overflow:auto}.brand{display:flex;gap:14px;align-items:center;margin-bottom:30px}.brand-mark{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}.brand-mark img{width:46px;height:46px;object-fit:contain}.brand h1{font-size:22px;line-height:1.05;margin:0;font-weight:800;letter-spacing:-.5px}.brand p{margin:6px 0 0;color:rgba(255,255,255,.72);font-size:13px}.side-nav{display:grid;gap:6px}.side-nav a{display:flex;align-items:center;gap:13px;padding:14px 14px;border-radius:16px;color:rgba(255,255,255,.86);font-weight:600;position:relative}.side-nav a svg{width:21px;height:21px}.side-nav a:hover,.side-nav a.active{background:rgba(255,255,255,.1);color:#fff}.side-nav a.active:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;background:var(--gold);border-radius:0 999px 999px 0}.dark-mode-toggle{position:sticky;bottom:18px;margin-top:28px;width:100%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);border-radius:16px;padding:13px 14px;color:#fff;display:flex;align-items:center;gap:12px;font-weight:600}.dark-mode-toggle svg:last-child{margin-left:auto}.main{padding:30px 34px 44px;max-width:1540px;width:100%;margin:0 auto}.page-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px}.eyebrow{margin:0 0 7px;color:#2857a5;text-transform:uppercase;letter-spacing:.18em;font-weight:800;font-size:12px}.page-header h2{font-size:34px;letter-spacing:-1px;line-height:1.05;margin:0;font-weight:800}.page-header p{margin:9px 0 0;color:#61708a;font-size:16px}.header-tools{display:flex;gap:12px;align-items:center}.icon-btn{border:1px solid var(--line);background:#fff;color:var(--ink);height:48px;min-width:48px;border-radius:18px;display:inline-grid;place-items:center;position:relative;box-shadow:0 8px 24px rgba(15,23,42,.04)}.icon-btn span{position:absolute;right:6px;top:4px;background:var(--green);color:#fff;border-radius:999px;font-size:10px;line-height:1;padding:3px 5px}.icon-btn.mini{height:38px;min-width:38px}.profile-pill{display:flex;align-items:center;gap:12px;padding:9px 14px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.04)}.profile-pill .avatar{width:38px;height:38px;border-radius:50%;background:#07162b;color:#fff;display:grid;place-items:center}.profile-pill strong,.profile-pill small{display:block}.profile-pill small{color:var(--muted);font-size:12px}.alert{border-radius:18px;padding:14px 16px;margin:0 0 18px;font-weight:800}.alert.success{background:#eafaf2;color:#05603a;border:1px solid #b7ebcc}.alert.danger{background:#fff0f0;color:#b42318;border:1px solid #ffd1d1}.btn{border:0;border-radius:14px;padding:12px 17px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}.btn.primary{background:#07162b;color:#fff;box-shadow:0 12px 25px rgba(7,22,43,.18)}.btn.ghost{background:#fff;color:#07162b;border:1px solid var(--line)}.btn.danger-soft{background:#fff1f1;color:#b42318;border:1px solid #ffd5d5}.btn.block{width:100%}.hero-card{background:#fff;border:1px solid var(--line);border-radius:30px;box-shadow:var(--shadow);padding:36px 42px;display:grid;grid-template-columns:1.35fr .75fr;gap:34px;align-items:center;margin-bottom:18px}.hero-content h1{font-family:Fraunces,Georgia,serif;font-size:clamp(42px,4vw,66px);line-height:.98;letter-spacing:-1.8px;margin:0 0 18px}.hero-content p{color:#687792;font-size:17px;line-height:1.6;max-width:760px;margin:0 0 22px}.hero-actions{display:flex;gap:12px}.hero-kpi{min-height:220px;border-radius:28px;background:linear-gradient(135deg,#05233b,#0fa268);display:grid;place-items:center;text-align:center;color:#fff;position:relative;padding:26px}.hero-kpi svg{position:absolute;right:24px;top:24px;opacity:.7}.hero-kpi strong{font-family:Fraunces,Georgia,serif;font-size:92px;line-height:.9}.hero-kpi span{font-size:20px;line-height:1.35;font-weight:800}.kpi-grid{display:grid;gap:14px;margin-bottom:16px}.kpi-grid.six{grid-template-columns:repeat(6,minmax(0,1fr))}.kpi-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.kpi-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.stat-card,.content-card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 12px 40px rgba(15,23,42,.05)}.stat-card{padding:18px 20px;display:flex;align-items:center;gap:16px;min-height:92px}.stat-card>svg{width:38px;height:38px;color:var(--green);padding:9px;background:#e9faf4;border-radius:50%;box-sizing:content-box}.stat-card span{display:block;color:#53627a;font-weight:600;font-size:13px}.stat-card strong{display:block;font-size:25px;letter-spacing:-.6px;margin:3px 0}.stat-card small{display:block;color:#667085}.progress-stat{justify-content:flex-start}.ring,.big-ring{--p:0;width:76px;height:76px;border-radius:50%;background:conic-gradient(var(--green) calc(var(--p)*1%),#e9eef5 0);display:grid;place-items:center;position:relative}.ring:after,.big-ring:after{content:"";position:absolute;inset:9px;border-radius:50%;background:#fff}.ring span,.big-ring span,.big-ring small{position:relative;z-index:1;font-weight:800}.big-ring{width:170px;height:170px}.big-ring span{font-size:36px}.big-ring small{font-size:12px;color:var(--muted);margin-top:46px;position:absolute}.dashboard-grid{display:grid;grid-template-columns:1.25fr .72fr .82fr .9fr;gap:14px;margin-bottom:16px}.content-card{padding:18px}.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.card-head h3,.content-card h3{margin:0;font-size:17px;letter-spacing:-.2px}.card-head p{margin:4px 0 0;color:var(--muted)}.card-head a,.card-link{color:#2458b3;font-weight:800}.chart-card canvas{width:100%!important;max-height:260px}.activity-card{display:grid;gap:11px}.activity-item{display:flex;gap:12px;align-items:flex-start}.activity-item svg{width:34px;height:34px;padding:8px;border-radius:12px;background:#f0f7ff;color:#2563eb}.activity-item strong,.activity-item span{display:block}.activity-item span{font-size:12px;color:var(--muted);margin-top:3px}.agenda-strip{display:flex;align-items:center;gap:22px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:16px 18px}.agenda-title{display:flex;align-items:center;gap:12px;min-width:210px}.agenda-title svg{width:42px;height:42px;padding:10px;border-radius:14px;background:#f0f7ff}.agenda-item{display:flex;align-items:center;gap:10px;border-left:1px solid var(--line);padding-left:22px}.agenda-item>span{width:8px;height:8px;border-radius:50%;background:var(--green)}.agenda-item strong,.agenda-item small{display:block}.agenda-item small{color:var(--muted)}.control-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 38px rgba(15,23,42,.05);padding:16px;margin-bottom:16px}.control-bar form{display:flex;gap:12px;align-items:center;flex:1}.control-bar input,.control-bar select,.form-grid input,.form-grid select,.form-grid textarea,select{height:46px;border:1px solid var(--line);border-radius:13px;background:#fff;padding:0 14px;color:#334155;outline:none;font-weight:500}.control-bar input:focus,.form-grid input:focus,.form-grid textarea:focus{box-shadow:0 0 0 4px rgba(17,146,103,.1);border-color:#88d8bc}.search-input{position:relative;flex:1;min-width:260px}.search-input input{width:100%;padding-left:42px}.search-input svg{position:absolute;left:14px;top:12px;width:20px;color:#64748b}.clean-table{width:100%;border-collapse:collapse}.clean-table th{font-size:12px;color:#526176;font-weight:800;text-align:left;background:#f8fafd}.clean-table th,.clean-table td{padding:16px 16px;border-bottom:1px solid var(--line);vertical-align:middle}.clean-table tr:last-child td{border-bottom:0}.clean-table td small{display:block;color:var(--muted);margin-top:5px}.table-card{padding:0;overflow:hidden}.table-card h3{padding:20px 20px 0}.table-title{display:flex;align-items:center;gap:12px}.table-title strong{display:block}.row-icon{width:38px;height:38px;border-radius:12px;background:#e9faf4;color:var(--green);display:grid;place-items:center;flex:0 0 auto}.row-icon.purple{background:#f3e8ff;color:#7c3aed}.row-actions{display:flex;align-items:center;gap:8px}.row-actions.compact form{display:inline}.icon-square{width:38px;height:38px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:12px;background:#fff;color:#0f172a}.icon-square svg{width:17px;height:17px}.badge,.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700}.soft-green,.pill.done{background:#e9faf4;color:#057a55;border:1px solid #c8f3df}.soft-blue{background:#eff6ff;color:#2563eb;border:1px solid #dbeafe}.soft-purple{background:#f3e8ff;color:#6d28d9;border:1px solid #e9d5ff}.soft-orange,.pill.process{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa}.pill.danger{background:#fff1f2;color:#be123c;border:1px solid #fecdd3}.pill{background:#f1f5f9;color:#475569}.table-foot{padding:14px 18px;color:var(--muted)}.schedule-layout,.data-layout,.calendar-layout,.supervision-layout,.library-layout{display:grid;grid-template-columns:1fr 330px;gap:16px;align-items:start}.week-calendar{position:relative;padding:0;overflow:hidden}.week-grid{display:grid;grid-template-columns:82px repeat(5,1fr)}.week-grid>div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:70px;padding:12px}.time-head,.day-head{text-align:center;font-weight:800;background:#fbfcff}.day-head small{display:block;color:#667085;margin-top:4px}.time-cell{color:#526176;font-weight:700}.slot-cell{position:relative}.schedule-chip{border-radius:12px;padding:10px;display:grid;gap:5px;font-size:12px}.schedule-chip strong{font-size:13px}.schedule-chip.offline{background:#eafaf2;border:1px solid #c8f3df}.schedule-chip.hybrid{background:#fff7ed;border:1px solid #fed7aa}.schedule-chip.online{background:#eff6ff;border:1px solid #bfdbfe}.schedule-chip a{background:#fff;border-radius:9px;padding:7px;text-align:center;color:#2458b3;font-weight:800}.over-grid{position:absolute;inset:130px 40px auto;z-index:3}.side-stack{display:grid;gap:16px}.toggle-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:12px;margin-top:10px}.toggle-row span{flex:1}.toggle-row small{display:block;color:var(--muted)}.toggle-row b{width:38px;height:22px;border-radius:999px;background:var(--green);position:relative}.toggle-row b:after{content:"";position:absolute;right:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff}.task-layout{display:grid;grid-template-columns:1fr 285px;gap:16px}.kanban-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.kanban-col{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 12px 38px rgba(15,23,42,.05)}.kanban-col h3{display:flex;justify-content:space-between;font-size:17px;margin:0 0 12px}.kanban-col h3 span{background:#eef2f7;padding:4px 8px;border-radius:999px;font-size:12px}.task-card{border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:10px;background:#fff}.task-top{display:flex;justify-content:space-between}.task-card h4{margin:12px 0 6px}.task-card p,.task-card small{color:var(--muted)}.task-card small{display:flex;align-items:center;gap:6px}.task-meta{display:flex;justify-content:space-between;margin-top:12px}.priority{font-size:12px}.priority.tinggi:before{content:"";display:inline-block;width:7px;height:7px;background:#ef4444;border-radius:50%;margin-right:5px}.priority.sedang:before{content:"";display:inline-block;width:7px;height:7px;background:#f59e0b;border-radius:50%;margin-right:5px}.deadline-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.deadline-item:last-child{border-bottom:0}.deadline-item>b{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:#f3e8ff;color:#6d28d9}.deadline-item b small{display:block}.deadline-item strong,.deadline-item span{display:block}.deadline-item span{color:var(--muted);font-size:12px}.link-list{display:grid;gap:10px}.link-list a{display:flex;align-items:center;gap:12px;border:1px solid var(--line);padding:12px;border-radius:14px}.link-list a span{margin-left:auto;color:#2458b3;font-weight:800}.info-strip{display:flex;align-items:center;gap:10px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:14px;padding:14px 16px;margin-top:14px;color:#2458b3;font-weight:700}.info-strip button{margin-left:auto;border:0;background:transparent;color:#1e3a8a;font-size:20px}.library-layout{grid-template-columns:1fr 310px}.list-toolbar{display:flex;justify-content:space-between;align-items:center;margin:10px 0 14px;color:var(--muted)}.list-toolbar>div{display:flex;gap:8px}.library-grid{display:grid;gap:16px}.library-grid.four-col{grid-template-columns:repeat(4,minmax(0,1fr))}.reading-card-v2{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 12px 38px rgba(15,23,42,.05)}.book-cover{height:174px;background:linear-gradient(135deg,#10223d,#0f8b62);color:#fff;position:relative;display:grid;align-items:end;padding:16px;overflow:hidden}.book-cover:before{content:"";position:absolute;inset:18px 28px auto auto;width:58px;height:110px;background:rgba(255,255,255,.14);border-radius:0 0 8px 8px}.book-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.book-cover div{position:relative;z-index:1;text-shadow:0 8px 20px rgba(0,0,0,.28)}.book-cover strong{font-family:Fraunces,Georgia,serif;font-size:18px;line-height:1.1}.book-cover span{display:block;font-size:12px;margin-top:6px;opacity:.75}.reading-info{padding:14px}.reading-info h4{margin:0 0 5px}.reading-info p{color:var(--muted);margin:0 0 10px;font-size:12px}.status-badge-line{float:right}.reading-actions{display:flex;gap:8px;margin-top:18px}.mini-btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px;font-size:12px;font-weight:700}.mini-btn.primary{background:#07162b;color:#fff}.mini-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mini-stat{border:1px solid var(--line);border-radius:16px;padding:15px;display:grid;gap:8px}.mini-stat svg{color:var(--green)}.mini-stat span{color:var(--muted);font-size:12px}.mini-stat strong{font-size:24px}.bar-row{display:grid;grid-template-columns:1fr 110px 30px;gap:10px;align-items:center;margin:13px 0}.bar-row span{font-size:12px}.bar-row b{height:7px;background:#e5eaf2;border-radius:999px;overflow:hidden}.bar-row i{display:block;height:100%;background:var(--green);border-radius:999px}.bar-row em{font-style:normal;font-size:12px;color:var(--muted)}.pipeline{display:flex;justify-content:space-between;gap:10px;position:relative}.pipeline:before{content:"";position:absolute;top:22px;left:45px;right:45px;height:4px;background:linear-gradient(90deg,#60a5fa,#f59e0b,#10b981,#2563eb);border-radius:999px}.pipeline div{position:relative;z-index:1;text-align:center;display:grid;gap:5px;min-width:64px}.pipeline svg{margin:auto;background:#fff;border:2px solid #dbeafe;border-radius:50%;padding:10px;width:48px;height:48px;color:#2563eb}.pipeline strong{font-size:13px}.pipeline span{font-size:22px;font-weight:800}.pipeline.wide div{min-width:110px}.publication-grid,.dissertation-overview{display:grid;grid-template-columns:1.45fr .85fr;gap:16px;margin-bottom:16px}.progress-summary{display:flex;align-items:center;gap:24px}.milestones{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:start;margin-top:20px}.milestones div{text-align:center;position:relative}.milestones div:before{content:"";position:absolute;top:20px;left:-50%;right:50%;height:3px;background:#cbd5e1}.milestones div:first-child:before{display:none}.milestones b{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;background:#e5eaf2;color:#64748b}.milestones .done b{background:var(--green);color:#fff}.milestones .active b{background:#07162b;color:#fff}.milestones strong,.milestones span{display:block}.milestones span{color:var(--muted);font-size:12px}.chapter-list{display:grid;gap:12px}.chapter-row{background:#fff;border:1px solid var(--line);box-shadow:0 10px 35px rgba(15,23,42,.05);border-radius:18px;padding:16px;display:grid;grid-template-columns:24px 42px 1fr 260px 120px 95px auto;align-items:center;gap:14px}.chapter-row>b{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#f1f5f9}.chapter-title strong,.chapter-title small{display:block}.chapter-title small{color:var(--muted);margin-top:5px}.progress-cell{display:grid;gap:8px}.line-progress{height:7px;border-radius:999px;background:#e5eaf2;overflow:hidden}.line-progress i{display:block;height:100%;background:var(--green)}.progress-cell em{font-size:12px;color:var(--muted);font-style:normal}.top-actions-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.top-actions-line>div:last-child{display:flex;gap:10px}.supervision-layout{grid-template-columns:1fr 300px}.supervision-list{display:grid;gap:12px}.supervision-item{display:grid;grid-template-columns:130px 180px 1fr 100px 34px;gap:14px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:14px}.supervision-item.selected{border-color:#93c5fd;box-shadow:0 0 0 4px #eff6ff}.supervision-item strong,.supervision-item small{display:block}.supervision-item small{color:var(--muted);margin-top:5px}.mini-calendar .tiny-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}.tiny-cal span{font-size:11px;color:var(--muted)}.tiny-cal b,.tiny-cal em{height:30px;display:grid;place-items:center;border-radius:9px}.tiny-cal .today{background:#07162b;color:#fff}.advisor{display:grid;gap:8px}.advisor span{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#0f172a,#0f8b62)}.calendar-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-toolbar form{display:flex;gap:12px}.calendar-layout{grid-template-columns:1fr 390px}.month-card{padding:14px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--line);border-radius:16px;overflow:hidden}.calendar-grid>div{padding:12px;text-align:center;font-weight:800;color:#526176;background:#fbfcff;border-bottom:1px solid var(--line)}.calendar-grid section{min-height:106px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px}.calendar-grid section:nth-child(7n+1){border-right:0}.calendar-grid b{display:block;margin-bottom:8px}.cal-event{display:block;border-radius:8px;padding:6px 7px;font-size:11px;margin-top:5px}.cal-event.kelas{background:#e9faf4;color:#057a55}.cal-event.deadline{background:#fff7ed;color:#c2410c}.cal-event.bimbingan{background:#eff6ff;color:#2563eb}.cal-event.publikasi{background:#ecfeff;color:#0e7490}.legend{display:flex;gap:18px;padding:14px 8px 0}.legend span:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}.legend .kelas:before{background:var(--green)}.legend .deadline:before{background:var(--orange)}.legend .bimbingan:before{background:var(--blue)}.legend .publikasi:before{background:#0e7490}.agenda-list-item{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.agenda-list-item:last-child{border-bottom:0}.agenda-list-item svg{padding:8px;border-radius:12px;background:#eff6ff;color:#2563eb;box-sizing:content-box}.agenda-list-item strong,.agenda-list-item span{display:block}.agenda-list-item span,.agenda-list-item small{color:var(--muted)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid label{font-weight:700;color:#344054;display:grid;gap:8px}.form-grid label.full{grid-column:1/-1}.form-grid textarea{height:130px;padding:14px;resize:vertical}.form-actions{display:flex;justify-content:flex-end;gap:10px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.detail-field{background:#fbfcff;border:1px solid var(--line);border-radius:14px;padding:14px}.detail-field small{display:block;color:var(--muted);font-weight:800;margin-bottom:6px}.reader-panel iframe{width:100%;height:72vh;border:0;border-radius:14px;background:#f1f5f9}.empty{padding:24px;border:1px dashed var(--line);border-radius:16px;background:#fbfcff;color:var(--muted);text-align:center}.empty.small{padding:16px;font-size:13px}.storage-bar{height:12px;background:#e5eaf2;border-radius:999px;overflow:hidden}.storage-bar span{display:block;height:100%;background:#07162b}.clean-login{height:100dvh;min-height:680px;display:grid;grid-template-columns:.78fr 1fr;background:#f8fafc;overflow:hidden}.login-left-panel{background:radial-gradient(circle at 20% 0,rgba(37,99,235,.14),transparent 28%),linear-gradient(180deg,#071a2f,#061427 70%,#05111f);padding:clamp(34px,5.4vh,62px) 54px;color:#fff;position:relative;overflow:hidden}.login-left-panel:after{content:"";position:absolute;right:-30px;bottom:80px;width:310px;height:420px;background:url('../img/ui-rectorate-lineart-transparent.png') center/contain no-repeat;opacity:.18}.login-brand-row{display:flex;align-items:center;gap:20px;position:relative;z-index:2}.login-brand-row img{width:88px;height:88px;border-radius:22px;border:1px solid rgba(255,255,255,.18);padding:10px;background:rgba(255,255,255,.06)}.login-brand-row span{color:#32d399;font-weight:800;letter-spacing:.14em}.login-brand-row h1{font-family:Fraunces,Georgia,serif;font-size:38px;line-height:1;margin:8px 0 6px}.login-brand-row p{margin:0;color:rgba(255,255,255,.74);font-size:17px}.login-green-line{width:42px;height:3px;background:#22c98b;border-radius:999px;margin:clamp(24px,4vh,42px) 0 22px}.login-left-panel h2{font-size:24px;line-height:1.55;font-weight:500;color:rgba(255,255,255,.86);max-width:520px}.login-feature-list{display:grid;gap:13px;margin-top:26px;max-width:520px}.login-feature-list div{display:grid;grid-template-columns:52px 1fr;column-gap:16px;align-items:center;padding:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.07);border-radius:18px}.login-feature-list svg{grid-row:1/3;width:52px;height:52px;padding:13px;border-radius:16px;background:rgba(17,146,103,.18);color:#24d397}.login-feature-list strong{font-size:16px}.login-feature-list small{color:rgba(255,255,255,.72);margin-top:5px}.login-left-panel blockquote{position:relative;z-index:2;margin:clamp(24px,4vh,44px) 0 0;color:rgba(255,255,255,.82);font-size:18px;line-height:1.6;font-style:italic;max-width:530px}.login-left-panel blockquote:before{content:"“";font-size:60px;color:#24d397;display:block;line-height:.6}.login-right-panel{position:relative;display:grid;place-items:center;padding:clamp(22px,4vh,44px);overflow:hidden}.login-line-art{position:absolute;inset:0;background:url('../img/login-bg-lines.svg') center/cover no-repeat;opacity:.72}.login-form-card{position:relative;z-index:2;width:min(520px,100%);background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 28px 90px rgba(15,23,42,.10);padding:clamp(28px,4vh,40px) 46px}.login-form-card h2{font-family:Fraunces,Georgia,serif;font-size:42px;margin:0 0 8px}.login-form-card p{color:var(--muted);margin:0 0 28px}.login-form-card label{display:grid;gap:9px;margin-bottom:18px;font-weight:700}.input-icon{position:relative}.input-icon svg{position:absolute;left:16px;top:14px;color:#7b879b}.input-icon input{width:100%;height:54px;border:1px solid var(--line);border-radius:14px;padding:0 16px 0 48px}.login-meta-row{display:flex;justify-content:space-between;align-items:center;margin:6px 0 24px}.login-meta-row a{color:#2563eb;font-weight:700}.check-row{display:flex!important;align-items:center;gap:8px;margin:0!important;color:#475467}.btn-login{height:56px;width:100%;border:0;border-radius:14px;background:linear-gradient(135deg,#0a473d,#0da56f);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;gap:10px;font-size:16px}.login-divider{display:flex;align-items:center;gap:16px;color:#98a2b3;margin:22px 0}.login-divider:before,.login-divider:after{content:"";height:1px;background:var(--line);flex:1}.sso-btn{height:52px;width:100%;border:1px solid var(--line);background:#fff;border-radius:14px;color:#1d4d9d;font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px}.login-footer{position:absolute;bottom:clamp(16px,3vh,28px);text-align:center;color:#7b879b;line-height:1.8;z-index:2}.login-footer svg{width:15px;vertical-align:middle}.login-card.only{margin:60px auto;background:#fff;padding:30px;border-radius:20px;max-width:620px}
.dark body,body.dark{background:#061427;color:#e5e7eb}.dark .main,.dark body .main{background:#061427}.dark .content-card,.dark .stat-card,.dark .hero-card,.dark .control-bar,.dark .agenda-strip{background:#0b1d33;border-color:#1f3654;color:#e5e7eb}.dark input,.dark select,.dark textarea{background:#07162b;border-color:#1f3654;color:#e5e7eb}.dark .clean-table th{background:#0f2742;color:#cbd5e1}.dark .clean-table td{border-color:#1f3654}.dark .page-header p,.dark .muted{color:#9aa9bd}@media(max-width:1200px){.app-shell{grid-template-columns:250px 1fr}.kpi-grid.six{grid-template-columns:repeat(3,1fr)}.dashboard-grid,.library-layout,.schedule-layout,.data-layout,.calendar-layout,.supervision-layout,.publication-grid,.dissertation-overview,.task-layout{grid-template-columns:1fr}.library-grid.four-col{grid-template-columns:repeat(3,1fr)}.kanban-board{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.app-shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.main{padding:20px}.page-header{flex-direction:column}.hero-card{grid-template-columns:1fr;padding:24px}.hero-content h1{font-size:42px}.kpi-grid.four,.kpi-grid.three,.kpi-grid.six,.library-grid.four-col{grid-template-columns:1fr}.control-bar,.control-bar form{flex-direction:column;align-items:stretch}.clean-login{grid-template-columns:1fr}.login-left-panel{display:none}.login-right-panel{padding:20px}.form-grid,.detail-grid{grid-template-columns:1fr}.chapter-row,.supervision-item{grid-template-columns:1fr}.kanban-board{grid-template-columns:1fr}.calendar-grid section{min-height:86px}.week-grid{overflow:auto;min-width:820px}.week-calendar{overflow:auto}}


/* v2.3 typography, dropdown, notification, email settings */
body{letter-spacing:-.01em} .page-header h2{font-weight:800}.page-header p{font-weight:400}.side-nav a{font-weight:600}.side-nav a.active{font-weight:700}.clean-table td,.reading-info p,.detail-field div{font-weight:500;color:#334155}.clean-table strong,.reading-info h4{font-weight:700;color:#0f172a}input::placeholder,textarea::placeholder{color:#94a3b8;font-weight:400}.btn{font-weight:700}.hero-kpi{background:linear-gradient(135deg,#071a2f,#2563eb)}.btn-login{background:linear-gradient(135deg,#0b1f3a,#2563eb)}.stat-card>svg{color:var(--blue);background:#eff6ff}.pill.done{background:#ecfdf5;color:#047857}.pill.process{background:#eff6ff;color:#1d4ed8}.pill.danger{background:#fef2f2;color:#b91c1c}.alert.success{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.dropdown-wrap{position:relative;display:inline-flex}.dropdown-panel{position:absolute;top:calc(100% + 10px);right:0;min-width:245px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 70px rgba(15,23,42,.16);padding:10px;z-index:80;opacity:0;pointer-events:none;transform:translateY(8px);transition:.16s ease}.dropdown-wrap.open .dropdown-panel{opacity:1;pointer-events:auto;transform:translateY(0)}.dropdown-title{display:flex;align-items:center;justify-content:space-between;padding:10px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:4px}.dropdown-title strong{font-size:14px}.dropdown-title small{font-size:12px;color:#64748b}.dropdown-empty{padding:16px 12px;color:#64748b;font-size:13px}.profile-menu{min-width:220px}.profile-menu a,.notification-item{display:flex;gap:11px;align-items:center;padding:11px 10px;border-radius:12px;color:#0f172a;font-weight:600}.profile-menu a:hover,.notification-item:hover{background:#f8fafc}.profile-menu a svg,.notification-item svg{width:18px;height:18px;color:#2563eb}.profile-menu a.danger{color:#b91c1c}.profile-menu a.danger svg{color:#dc2626}.notification-panel{width:360px}.notification-item{align-items:flex-start}.notification-item div{display:grid;gap:3px}.notification-item small{color:#64748b;font-weight:500;line-height:1.45}
.settings-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:16px}.settings-card{padding:22px}.settings-status-list{display:grid;gap:12px}.settings-status-list div{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;padding:13px;border:1px solid var(--line);border-radius:14px;background:#fbfdff}.settings-status-list svg{width:38px;height:38px;padding:9px;border-radius:13px;background:#eff6ff;color:#2563eb}.settings-status-list span{color:#64748b;font-size:12px;font-weight:600}.settings-status-list strong{font-weight:700}.test-mail-form{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);margin-top:18px;padding-top:18px}.test-mail-form small{color:#64748b}.profile-settings-card{padding:24px;max-width:980px}.form-section-title{display:flex;gap:10px;align-items:center;margin-top:6px;padding-top:8px;color:#0f172a;font-weight:700}.form-section-title svg{width:20px;color:#2563eb}.form-section-title small{color:#64748b;font-weight:500;margin-left:auto}
body.dark .dropdown-panel,body.dark .profile-menu a:hover,body.dark .notification-item:hover{background:#0b1d33;border-color:#1f3654;color:#e5e7eb}body.dark .dropdown-title{border-color:#1f3654}body.dark .settings-status-list div{background:#07162b;border-color:#1f3654}body.dark .clean-table strong,body.dark .reading-info h4{color:#e5e7eb}body.dark .clean-table td,body.dark .reading-info p,body.dark .detail-field div{color:#cbd5e1}
@media(max-width:900px){.settings-layout{grid-template-columns:1fr}.notification-panel{width:min(340px,90vw)}}
@media(max-height:760px) and (min-width:761px){.login-brand-row img{width:68px;height:68px}.login-brand-row h1{font-size:32px}.login-left-panel h2{font-size:20px;line-height:1.45}.login-feature-list div{padding:12px}.login-feature-list svg{width:44px;height:44px}.login-left-panel blockquote{font-size:15px}.login-form-card h2{font-size:36px}.login-form-card label{margin-bottom:14px}.input-icon input{height:50px}.btn-login{height:52px}.sso-btn{height:48px}}

/* === v2.3.1 Top Summary Layout Fix: Readings + Research Data === */
.page-top-insights{
  display:grid;
  grid-template-columns:1.05fr .95fr .9fr;
  gap:16px;
  align-items:stretch;
  margin:0 0 16px;
}
.page-top-insights .content-card{
  min-height:152px;
}
.insight-card .card-head{
  margin-bottom:12px;
}
.mini-stat-grid.compact-four{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.page-top-insights .mini-stat{
  min-height:82px;
  padding:12px;
}
.page-top-insights .mini-stat strong{
  font-size:22px;
}
.top-theme-list{
  display:grid;
  gap:9px;
}
.compact-activity-list{
  display:grid;
  gap:9px;
}
.activity-item.compact svg{
  width:28px;
  height:28px;
  padding:7px;
  border-radius:10px;
}
.activity-item.compact strong{
  font-size:13px;
}
.activity-item.compact span{
  font-size:11px;
}
.full-library-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.data-main-full{
  display:block;
}
.pipeline.horizontal{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
}
.pipeline.horizontal div{
  min-width:0;
}
.storage-card-wide .storage-bar{
  margin-top:16px;
}
.storage-card-wide p{
  color:var(--muted);
  font-size:13px;
  margin:12px 0 0;
}
@media(max-width:1350px){
  .page-top-insights{
    grid-template-columns:1fr;
  }
  .full-library-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:900px){
  .mini-stat-grid.compact-four,
  .pipeline.horizontal{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .full-library-grid{
    grid-template-columns:1fr;
  }
}
/* === v2.4 Reading Library Doctoral UI === */
:root{
  --reading-navy:#071a2f;
  --reading-blue:#2563eb;
  --reading-gold:#f5c542;
  --reading-slate:#64748b;
  --reading-border:#e5eaf1;
  --reading-bg:#f6f8fb;
  --reading-card:#ffffff;
}
.reading-focus-card{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) auto;
  gap:18px;
  align-items:center;
  padding:20px 22px;
  margin:0 0 14px;
  border:1px solid var(--reading-border);
  border-radius:24px;
  background:linear-gradient(135deg,#ffffff 0%,#f8fbff 100%);
  box-shadow:0 18px 42px rgba(15,23,42,.06);
}
.reading-focus-kicker{
  display:inline-flex;align-items:center;gap:8px;
  color:#2563eb;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:8px;
}
.reading-focus-card h2{
  margin:0;color:#0f172a;font-size:24px;line-height:1.16;font-weight:800;letter-spacing:-.02em;
}
.reading-focus-card p{margin:7px 0 0;color:#64748b;font-size:14px;line-height:1.6;max-width:780px}
.reading-focus-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.reading-focus-actions .btn{white-space:nowrap}
.reading-top-compact{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:14px;
  margin:0 0 14px;
}
.reading-stat-strip{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  padding:12px;
  border:1px solid var(--reading-border);
  background:#fff;
  border-radius:22px;
}
.reading-stat-pill{
  min-height:70px;
  border:1px solid var(--reading-border);
  border-radius:16px;
  padding:11px 12px;
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.reading-stat-pill i,.reading-stat-pill svg{width:18px;height:18px;color:#2563eb;margin-bottom:6px}
.reading-stat-pill span{font-size:11px;color:#64748b;line-height:1.2}
.reading-stat-pill strong{font-size:22px;color:#0f172a;font-weight:800;letter-spacing:-.03em}
.reading-theme-strip{
  padding:14px 16px;
  border:1px solid var(--reading-border);
  background:#fff;
  border-radius:22px;
  min-height:96px;
}
.reading-theme-strip .strip-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;
}
.reading-theme-strip h3{font-size:14px;margin:0;color:#0f172a;font-weight:800}
.reading-theme-strip a{font-size:12px;color:#2563eb;text-decoration:none;font-weight:700}
.reading-theme-chips{display:flex;flex-wrap:wrap;gap:8px}
.reading-theme-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 10px;border-radius:999px;
  background:#f8fafc;border:1px solid #e2e8f0;
  color:#334155;text-decoration:none;font-size:12px;font-weight:700;
}
.reading-theme-chip b{font-size:11px;color:#2563eb;background:#eff6ff;padding:2px 6px;border-radius:999px}
.reading-filter-card{margin-top:0!important;margin-bottom:12px!important}
.reading-toolbar-clean{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 12px;color:#64748b;font-size:13px}
.reading-toolbar-clean .right{display:flex;align-items:center;gap:8px}
.doctoral-library-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}
.doctoral-reading-card{
  background:#fff;border:1px solid var(--reading-border);border-radius:22px;overflow:hidden;
  box-shadow:0 16px 38px rgba(15,23,42,.055);
  display:flex;flex-direction:column;min-width:0;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.doctoral-reading-card:hover{transform:translateY(-2px);box-shadow:0 22px 48px rgba(15,23,42,.09);border-color:#d7dee8}
.reading-cover-portrait{
  position:relative;aspect-ratio:3/4;background:linear-gradient(135deg,#0b1f3a,#12664f);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.reading-cover-portrait img{width:100%;height:100%;object-fit:cover;display:block;background:#eef2f7}
.reading-cover-portrait:after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(7,26,47,.48) 100%);pointer-events:none;
}
.reading-cover-placeholder{position:absolute;inset:0;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;z-index:1;background:linear-gradient(135deg,#08243d,#0f766e)}
.reading-cover-placeholder .mark{position:absolute;right:20px;top:20px;width:56px;height:76px;border-radius:8px;background:rgba(255,255,255,.16)}
.reading-cover-placeholder strong{font-size:19px;line-height:1.08;font-weight:800;text-shadow:0 2px 14px rgba(0,0,0,.25)}
.reading-cover-placeholder small{margin-top:8px;font-size:12px;opacity:.82;line-height:1.4}
.reading-card-body{padding:14px 15px 15px;display:flex;flex-direction:column;gap:10px;flex:1;min-height:190px}
.reading-card-title{font-size:14px;line-height:1.28;color:#0f172a;font-weight:800;margin:0;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reading-card-author{font-size:12px;color:#64748b;line-height:1.35;min-height:32px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reading-meta-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:auto}
.reading-badge{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:800;line-height:1;border:1px solid transparent}
.reading-badge.type{background:#f5f3ff;color:#6d28d9;border-color:#ede9fe}
.reading-badge.pdf{background:#eff6ff;color:#2563eb;border-color:#dbeafe}
.reading-badge.no-pdf{background:#f8fafc;color:#64748b;border-color:#e2e8f0}
.reading-status{display:inline-flex;align-items:center;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:800;line-height:1}
.reading-status.status-done{background:#ecfdf5;color:#047857}
.reading-status.status-reading{background:#eff6ff;color:#1d4ed8}
.reading-status.status-plan{background:#fffbeb;color:#b45309}
.reading-status.status-start{background:#f1f5f9;color:#475569}
.reading-card-actions{display:flex;align-items:center;gap:7px;margin-top:2px;flex-wrap:wrap}
.reading-card-actions .btn,.reading-card-actions a{height:34px;padding:0 10px;border-radius:10px;font-size:12px;font-weight:800;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #dfe7f1;background:#fff;color:#0f172a}
.reading-card-actions .btn.primary,.reading-card-actions a.primary{background:#071a2f;color:#fff;border-color:#071a2f}
.reading-card-actions .btn.disabled,.reading-card-actions a.disabled{opacity:.55;cursor:not-allowed;background:#f8fafc;color:#94a3b8}
.reading-preview-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(7,26,47,.52);z-index:9999;backdrop-filter:blur(8px)}
.reading-preview-modal.active{display:flex}
.reading-preview-card{width:min(980px,96vw);max-height:90vh;overflow:hidden;background:#fff;border-radius:28px;box-shadow:0 30px 90px rgba(0,0,0,.24);display:grid;grid-template-columns:330px minmax(0,1fr)}
.reading-preview-cover{background:#f1f5f9;min-height:470px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.reading-preview-cover img{width:100%;height:100%;object-fit:cover}
.reading-preview-info{padding:26px;overflow:auto}
.reading-preview-info .close{float:right;width:38px;height:38px;border:0;border-radius:50%;background:#fee2e2;color:#b91c1c;font-weight:900;font-size:20px;cursor:pointer}
.reading-preview-info h2{margin:10px 0 8px;color:#0f172a;font-size:26px;line-height:1.15;letter-spacing:-.02em}
.reading-preview-info p{color:#64748b;line-height:1.6;font-size:14px}
.reading-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}
.reading-preview-grid div{border:1px solid #e2e8f0;border-radius:14px;padding:12px;background:#f8fafc}
.reading-preview-grid span{display:block;font-size:11px;color:#64748b;margin-bottom:4px;font-weight:700}
.reading-preview-grid strong{display:block;font-size:13px;color:#0f172a}
@media(max-width:1450px){.doctoral-library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.reading-top-compact{grid-template-columns:1fr}.reading-stat-strip{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:980px){.doctorial-library-grid,.doctoral-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reading-stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.reading-focus-card{grid-template-columns:1fr}.reading-focus-actions{justify-content:flex-start}.reading-preview-card{grid-template-columns:1fr}.reading-preview-cover{min-height:300px}}
@media(max-width:640px){.doctoral-library-grid{grid-template-columns:1fr}.reading-stat-strip{grid-template-columns:1fr}.reading-card-actions .btn,.reading-card-actions a{flex:1}}

/* === v2.5 Mobile Global UI Fix: hamburger, responsive login, tables, cards === */
.mobile-menu-btn,
.mobile-sidebar-backdrop{display:none}
html,body{max-width:100%;overflow-x:hidden}
img,canvas,svg,video{max-width:100%}

@media(max-width:980px){
  html{scroll-padding-top:76px}
  body{background:#f6f8fb;overflow-x:hidden}
  body.mobile-menu-open{overflow:hidden;touch-action:none}
  .app-shell{display:block!important;min-height:100dvh;width:100%;overflow-x:hidden}

  .mobile-menu-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    position:fixed;left:14px;top:calc(12px + env(safe-area-inset-top));z-index:130;
    height:48px;padding:0 15px;border:1px solid rgba(226,232,240,.92);border-radius:16px;
    background:rgba(255,255,255,.94);color:#071a2f;box-shadow:0 14px 36px rgba(15,23,42,.16);
    font-weight:850;letter-spacing:-.02em;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)
  }
  .mobile-menu-btn svg{width:22px;height:22px;flex:0 0 auto}
  .mobile-menu-btn span{font-size:14px}

  .sidebar{
    position:fixed!important;z-index:120;left:0;top:0;bottom:0;
    width:min(86vw,326px);height:100dvh!important;max-height:100dvh;
    transform:translateX(-110%);transition:transform .22s ease;
    padding:calc(20px + env(safe-area-inset-top)) 16px 20px!important;
    border-radius:0 24px 24px 0;box-shadow:26px 0 80px rgba(7,26,47,.32);
    overflow-y:auto;-webkit-overflow-scrolling:touch
  }
  body.mobile-menu-open .sidebar{transform:translateX(0)}
  .mobile-sidebar-backdrop{
    display:block;position:fixed;inset:0;z-index:110;background:rgba(7,26,47,.46);
    opacity:0;pointer-events:none;transition:opacity .22s ease;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)
  }
  body.mobile-menu-open .mobile-sidebar-backdrop{opacity:1;pointer-events:auto}

  .brand{margin-bottom:18px;padding-right:10px}.brand-mark{width:50px;height:50px;border-radius:16px}.brand-mark img{width:40px;height:40px}.brand h1{font-size:20px}.brand p{font-size:12px}.side-nav{gap:5px}.side-nav a{padding:13px 13px;border-radius:14px}.side-nav a svg{width:20px;height:20px}.dark-mode-toggle{position:relative;bottom:auto;margin-top:18px}

  .main{width:100%!important;max-width:100%!important;margin:0!important;padding:76px 14px 28px!important;overflow-x:hidden}
  .page-header{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center!important;gap:10px!important;
    margin:0 0 14px!important;padding:12px 12px 12px!important;border:1px solid #e2e8f0;border-radius:22px;background:rgba(255,255,255,.95);box-shadow:0 12px 34px rgba(15,23,42,.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)
  }
  .page-header .eyebrow{font-size:10px;margin-bottom:4px;letter-spacing:.12em;color:#2563eb}.page-header h2{font-size:22px!important;line-height:1.12!important;letter-spacing:-.04em}.page-header p{font-size:12px!important;line-height:1.35!important;margin-top:4px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.header-tools{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0}.icon-btn{height:42px;min-width:42px;border-radius:15px}.profile-pill{height:42px;padding:5px 8px;border-radius:15px;gap:6px}.profile-pill .avatar{width:30px;height:30px}.profile-pill span:not(.avatar){display:none}.profile-pill>svg{width:16px}.dropdown-panel{position:fixed!important;top:72px!important;right:12px!important;left:12px!important;width:auto!important;min-width:0!important;max-height:72vh;overflow:auto;border-radius:18px}.notification-panel{width:auto!important}

  .hero-card,.dashboard-grid,.library-layout,.schedule-layout,.data-layout,.calendar-layout,.supervision-layout,.publication-grid,.dissertation-overview,.task-layout,.settings-layout,.data-main-full,.page-top-insights,.reading-top-compact,.reading-focus-card{grid-template-columns:1fr!important}.hero-card{padding:22px!important;border-radius:24px}.hero-content h1{font-size:34px!important;line-height:1.02!important}.hero-content p{font-size:14px!important}.hero-actions,.reading-focus-actions{display:grid!important;grid-template-columns:1fr!important;width:100%}.hero-actions .btn,.reading-focus-actions .btn{width:100%}.hero-kpi{min-height:150px}.hero-kpi strong{font-size:64px}.hero-kpi span{font-size:15px}

  .kpi-grid,.kpi-grid.six,.kpi-grid.four,.kpi-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.stat-card{min-height:82px;padding:13px!important;border-radius:18px;gap:10px}.stat-card>svg{width:27px;height:27px;padding:7px}.stat-card strong{font-size:20px}.stat-card span,.stat-card small{font-size:11px}.content-card{border-radius:18px!important;padding:14px!important}.chart-card canvas{max-height:230px!important}

  .control-bar{display:grid!important;gap:10px!important;padding:12px!important;border-radius:18px!important}.control-bar form{display:grid!important;grid-template-columns:1fr!important;width:100%;gap:10px!important}.search-input{min-width:0!important;width:100%}.control-bar input,.control-bar select,.form-grid input,.form-grid select,.form-grid textarea,select{width:100%;height:44px}.btn{width:100%;min-height:42px;white-space:normal;text-align:center}.list-toolbar,.reading-toolbar-clean{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}.reading-toolbar-clean .right{display:grid!important;grid-template-columns:1fr 44px!important;width:100%}

  .table-card{overflow:auto!important;padding:0!important}.clean-table{min-width:760px}.clean-table th,.clean-table td{padding:12px 10px}.table-foot{padding:12px!important}.week-calendar,.week-grid,.kanban-board,.calendar-grid{overflow-x:auto!important}.week-grid{min-width:760px}.kanban-board{grid-template-columns:1fr!important}.agenda-strip{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}.agenda-title{min-width:0}.agenda-item{border-left:0;padding-left:0}

  .reading-focus-card{padding:16px!important;border-radius:20px!important}.reading-focus-card h2{font-size:20px!important}.reading-focus-card p{font-size:13px!important}.reading-top-compact{gap:10px!important}.reading-stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:10px!important}.reading-stat-pill{min-height:64px;padding:10px}.reading-stat-pill strong{font-size:20px}.reading-theme-strip{min-height:0;padding:12px}.reading-theme-chips{display:flex;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}.reading-theme-chip{flex:0 0 auto}.doctoral-library-grid,.library-grid.four-col,.full-library-grid{grid-template-columns:1fr!important;gap:12px!important}.doctoral-reading-card{display:grid!important;grid-template-columns:92px minmax(0,1fr)!important;border-radius:18px!important;min-height:142px}.reading-cover-portrait{aspect-ratio:auto!important;height:100%!important;min-height:142px}.reading-cover-portrait:after{background:linear-gradient(90deg,rgba(7,26,47,.22),rgba(7,26,47,0))}.reading-card-body{padding:11px 11px 12px!important;min-height:0!important;gap:7px!important}.reading-card-title{font-size:13px!important;-webkit-line-clamp:2}.reading-card-author{font-size:11px!important;min-height:0!important;-webkit-line-clamp:1}.reading-meta-row{gap:5px}.reading-badge,.reading-status{font-size:10px;padding:5px 7px}.reading-card-actions{gap:6px}.reading-card-actions .btn,.reading-card-actions a{height:31px!important;min-height:31px!important;padding:0 8px!important;font-size:11px!important;flex:0 0 auto}.reading-card-actions .primary{flex:1 1 auto}.reading-preview-modal{padding:12px!important}.reading-preview-card{width:100%!important;max-height:88vh!important;border-radius:20px!important;grid-template-columns:1fr!important}.reading-preview-cover{min-height:210px!important;max-height:260px}.reading-preview-info{padding:18px!important}.reading-preview-info h2{font-size:20px!important}.reading-preview-grid{grid-template-columns:1fr!important;gap:8px!important}
}

@media(max-width:520px){
  .main{padding-left:10px!important;padding-right:10px!important}.page-header{border-radius:18px}.page-header h2{font-size:20px!important}.page-header p{display:none}.mobile-menu-btn{left:10px;height:44px;padding:0 12px}.kpi-grid,.kpi-grid.six,.kpi-grid.four,.kpi-grid.three,.reading-stat-strip{grid-template-columns:1fr!important}.stat-card{min-height:74px}.doctoral-reading-card{grid-template-columns:82px minmax(0,1fr)!important}.reading-cover-portrait{min-height:136px}.reading-card-actions{display:grid!important;grid-template-columns:1fr 1fr}.reading-card-actions a:last-child,.reading-card-actions button:first-child{grid-column:auto}.login-form-card{padding:22px!important;border-radius:22px}.login-form-card h2{font-size:32px}.login-footer{font-size:11px}
}

@media(max-width:980px){
  .clean-login{display:block!important;height:auto!important;min-height:100dvh!important;overflow:auto!important;background:#f6f8fb!important}.login-left-panel{display:block!important;min-height:auto!important;padding:18px 18px 14px!important;border-radius:0 0 28px 28px}.login-left-panel:after{right:-80px;bottom:-40px;width:240px;height:260px;opacity:.12}.login-brand-row{gap:12px}.login-brand-row img{width:58px!important;height:58px!important;border-radius:16px}.login-brand-row span{font-size:10px}.login-brand-row h1{font-size:24px!important;margin:4px 0 2px}.login-brand-row p{font-size:12px}.login-green-line,.login-feature-list,.login-left-panel blockquote{display:none!important}.login-left-panel h2{font-size:13px!important;line-height:1.45!important;margin:12px 0 0;max-width:100%}.login-right-panel{display:block!important;padding:18px 14px 28px!important;min-height:auto!important}.login-line-art{opacity:.24}.login-form-card{width:100%!important;max-width:520px;margin:0 auto;padding:26px!important}.login-form-card p{margin-bottom:18px}.login-meta-row{gap:12px;align-items:flex-start}.login-footer{position:relative!important;bottom:auto!important;margin:16px auto 0;max-width:420px}
}

body.dark .mobile-menu-btn{background:rgba(11,29,51,.94);border-color:#1f3654;color:#e5e7eb}body.dark .page-header{background:rgba(11,29,51,.94);border-color:#1f3654}body.dark .mobile-sidebar-backdrop{background:rgba(0,0,0,.58)}body.dark .login-form-card,body.dark .reading-stat-strip,body.dark .reading-theme-strip{background:#0b1d33;border-color:#1f3654;color:#e5e7eb}

/* =========================================================
   v2.5.1 MOBILE HARDENING GLOBAL
   Fix overflow kanan-kiri semua halaman S3 Command Center
   ========================================================= */

html,
body{
  max-width:100%;
  overflow-x:hidden !important;
}

*{
  box-sizing:border-box;
}

img,
svg,
canvas,
video,
iframe{
  max-width:100%;
}

@media(max-width: 820px){

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
    -webkit-text-size-adjust:100%;
  }

  body{
    background:#f4f7fb;
  }

  .app-shell{
    width:100%;
    max-width:100vw;
    overflow-x:hidden !important;
    display:block;
  }

  .main,
  main.main{
    width:100%;
    max-width:100vw;
    min-width:0 !important;
    margin:0 !important;
    padding:calc(env(safe-area-inset-top, 0px) + 86px) 14px 36px !important;
    overflow-x:hidden !important;
  }

  .content,
  .page,
  .page-body,
  .page-content,
  .main-content,
  .container,
  .container-fluid{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
  }

  .mobile-menu-btn{
    position:fixed !important;
    top:calc(env(safe-area-inset-top, 0px) + 14px) !important;
    left:14px !important;
    z-index:10020 !important;
    height:48px !important;
    min-width:118px !important;
    padding:0 16px !important;
    border-radius:22px !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid #dbe3ee !important;
    box-shadow:0 14px 34px rgba(15,23,42,.14) !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    color:#071a2f !important;
    font-weight:800 !important;
    font-size:15px !important;
    backdrop-filter:blur(10px);
  }

  .mobile-menu-btn svg{
    width:24px !important;
    height:24px !important;
    flex:0 0 auto;
  }

  .sidebar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:min(84vw, 320px) !important;
    max-width:320px !important;
    height:100dvh !important;
    z-index:10030 !important;
    transform:translateX(-105%) !important;
    transition:transform .22s ease !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-top:calc(env(safe-area-inset-top, 0px) + 18px) !important;
  }

  body.mobile-nav-open .sidebar,
  .app-shell.mobile-nav-open .sidebar{
    transform:translateX(0) !important;
  }

  .mobile-sidebar-backdrop{
    position:fixed !important;
    inset:0 !important;
    background:rgba(2,8,23,.46) !important;
    z-index:10025 !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:opacity .2s ease !important;
  }

  body.mobile-nav-open .mobile-sidebar-backdrop,
  .app-shell.mobile-nav-open .mobile-sidebar-backdrop{
    opacity:1 !important;
    pointer-events:auto !important;
  }

  .topbar,
  .page-header,
  .hero-head,
  .section-head,
  .module-header{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:12px !important;
    align-items:center !important;
    overflow:hidden !important;
  }

  .topbar{
    padding:14px 14px !important;
    border-radius:22px !important;
  }

  .topbar h1,
  .page-header h1,
  .hero-head h1,
  .module-header h1,
  h1{
    font-size:28px !important;
    line-height:1.12 !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
  }

  h2{
    font-size:24px !important;
    line-height:1.16 !important;
  }

  h3{
    font-size:19px !important;
    line-height:1.22 !important;
  }

  .topbar-actions,
  .header-actions,
  .page-actions{
    margin-left:0 !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
  }

  .topbar-actions > *,
  .header-actions > *,
  .page-actions > *{
    max-width:100% !important;
  }

  .content-card,
  .card,
  .stat-card,
  .panel,
  .table-card,
  .calendar-card,
  .chart-card{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
    border-radius:22px !important;
  }

  .dashboard-grid,
  .stats-grid,
  .module-grid,
  .cards-grid,
  .library-grid,
  .four-col,
  .full-library-grid,
  .page-top-insights,
  .data-insights,
  .reading-insights,
  .data-main-full,
  .split-grid,
  .two-col,
  .three-col{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    gap:14px !important;
    overflow:hidden !important;
  }

  .mini-stat-grid,
  .mini-stat-grid.compact-four{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:10px !important;
    width:100% !important;
    min-width:0 !important;
  }

  .mini-stat,
  .reading-stat,
  .summary-item{
    min-width:0 !important;
    width:100% !important;
    padding:14px !important;
  }

  .mini-stat strong,
  .reading-stat strong{
    font-size:26px !important;
  }

  .theme-chip-row,
  .top-theme-chips,
  .top-theme-list,
  .chip-row{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:10px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding-bottom:4px !important;
    -webkit-overflow-scrolling:touch;
  }

  .theme-chip-row::-webkit-scrollbar,
  .top-theme-chips::-webkit-scrollbar,
  .chip-row::-webkit-scrollbar{
    display:none;
  }

  .theme-chip,
  .chip,
  .filter-chip{
    flex:0 0 auto !important;
    max-width:82vw !important;
    white-space:nowrap !important;
  }

  .filter-bar,
  form.filter-bar,
  .filters,
  .toolbar,
  .list-toolbar,
  .search-filter,
  .search-row{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    overflow:hidden !important;
  }

  .filter-bar input,
  .filter-bar select,
  .filter-bar button,
  .filters input,
  .filters select,
  .filters button,
  .search-filter input,
  .search-filter select,
  input,
  select,
  textarea,
  button,
  .btn{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .btn,
  button,
  .button,
  .primary-btn,
  .action-btn{
    white-space:normal !important;
    line-height:1.2 !important;
  }

  .list-toolbar{
    align-items:stretch !important;
  }

  .list-toolbar > div{
    width:100% !important;
    max-width:100% !important;
    display:grid !important;
    grid-template-columns:1fr auto !important;
    gap:10px !important;
  }

  .reading-card,
  .book-card,
  .library-card{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  .reading-cover,
  .book-cover,
  .library-cover{
    width:100% !important;
    max-width:100% !important;
    aspect-ratio:3/4 !important;
    overflow:hidden !important;
  }

  .reading-card h3,
  .book-card h3,
  .library-card h3{
    font-size:17px !important;
    line-height:1.25 !important;
    overflow-wrap:anywhere !important;
  }

  .card-actions,
  .reading-actions,
  .action-row{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    width:100% !important;
  }

  .card-actions .btn,
  .reading-actions .btn,
  .action-row .btn{
    padding:11px 10px !important;
    font-size:13px !important;
  }

  .chart-card,
  .chart-wrap,
  .chart-container,
  .donut-wrap,
  .canvas-wrap{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  canvas{
    max-width:100% !important;
  }

  .chart-card canvas,
  .chart-wrap canvas,
  .donut-wrap canvas{
    width:100% !important;
    max-width:100% !important;
    max-height:260px !important;
  }

  .donut-chart,
  .progress-ring,
  .ring-chart{
    width:min(72vw, 260px) !important;
    height:min(72vw, 260px) !important;
    max-width:260px !important;
    max-height:260px !important;
    margin:0 auto !important;
  }

  table{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    table-layout:fixed !important;
  }

  th,
  td{
    max-width:46vw !important;
    white-space:normal !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    overflow-wrap:anywhere !important;
    font-size:14px !important;
    padding:12px 10px !important;
  }

  .table-responsive,
  .table-wrap,
  .responsive-table{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  .clean-table{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .clean-table th:nth-child(n+4),
  .clean-table td:nth-child(n+4){
    display:none !important;
  }

  .publication-table th:nth-child(n+4),
  .publication-table td:nth-child(n+4){
    display:none !important;
  }

  .calendar-grid,
  .month-grid,
  .academic-calendar,
  .schedule-grid,
  .weekly-grid{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  .calendar-grid{
    display:grid !important;
    grid-template-columns:repeat(7, minmax(0,1fr)) !important;
  }

  .calendar-day,
  .day-cell{
    min-width:0 !important;
    width:auto !important;
    padding:8px 5px !important;
    min-height:76px !important;
    overflow:hidden !important;
  }

  .calendar-day strong,
  .day-cell strong{
    font-size:14px !important;
  }

  .calendar-event,
  .event-pill{
    max-width:100% !important;
    font-size:10px !important;
    line-height:1.15 !important;
    padding:5px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .calendar-toolbar,
  .calendar-filter,
  .calendar-actions{
    width:100% !important;
    max-width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    overflow:hidden !important;
  }

  .calendar-toolbar button,
  .calendar-toolbar select,
  .calendar-filter button,
  .calendar-filter select{
    width:100% !important;
    max-width:100% !important;
  }

  .timeline,
  .stepper,
  .progress-steps,
  .publication-steps{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px !important;
  }

  .timeline::-webkit-scrollbar,
  .stepper::-webkit-scrollbar,
  .progress-steps::-webkit-scrollbar,
  .publication-steps::-webkit-scrollbar{
    display:none;
  }

  .modal,
  .modal-card,
  .dialog,
  .drawer{
    width:calc(100vw - 24px) !important;
    max-width:calc(100vw - 24px) !important;
    max-height:calc(100dvh - 24px) !important;
    overflow:auto !important;
  }

  .login-page,
  .login-shell,
  .login-card,
  .auth-card{
    width:100% !important;
    max-width:100vw !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  .login-shell{
    display:grid !important;
    grid-template-columns:1fr !important;
    padding:18px !important;
    min-height:100dvh !important;
  }

  .login-art,
  .login-illustration,
  .auth-visual{
    display:none !important;
  }
}

@media(max-width: 480px){
  main.main{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .content-card,
  .card,
  .panel,
  .table-card,
  .calendar-card,
  .chart-card{
    border-radius:20px !important;
    padding:16px !important;
  }

  .mini-stat-grid,
  .mini-stat-grid.compact-four{
    grid-template-columns:1fr !important;
  }

  .topbar h1,
  .page-header h1,
  .hero-head h1,
  .module-header h1,
  h1{
    font-size:24px !important;
  }

  .mobile-menu-btn{
    height:46px !important;
    min-width:108px !important;
    font-size:14px !important;
  }

  th,
  td{
    font-size:13px !important;
    padding:10px 8px !important;
  }

  .calendar-day,
  .day-cell{
    min-height:64px !important;
    padding:6px 4px !important;
  }

  .calendar-event,
  .event-pill{
    font-size:9px !important;
  }
}

/* =========================================================
   v2.5.2 FINAL FIX
   - restore desktop
   - proper mobile offcanvas
   - mobile stat cards 2 columns
   - prevent global horizontal break
   ========================================================= */

/* ---------- reset kecil ---------- */
html, body {
  max-width: 100%;
}

img, svg, canvas {
  max-width: 100%;
}

/* =========================================================
   DESKTOP / LAPTOP
   ========================================================= */
@media (min-width: 992px) {
  html, body {
    overflow-x: hidden !important;
  }

  .mobile-menu-btn,
  .mobile-sidebar-backdrop {
    display: none !important;
  }

  body.mobile-nav-open {
    overflow: auto !important;
  }

  .app-shell {
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  .sidebar {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    height: 100vh !important;
    z-index: 30 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important;
  }

  main.main,
  .main,
  .page,
  .page-content,
  .content,
  .main-content {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 28px 28px 40px !important;
    overflow: visible !important;
  }

  .dashboard-grid,
  .stats-grid,
  .reading-insights,
  .data-insights,
  .page-top-insights,
  .cards-grid,
  .mini-stat-grid,
  .overview-grid {
    width: 100% !important;
    min-width: 0 !important;
  }

  .filter-bar,
  .filters,
  .toolbar,
  .search-filter,
  .search-row {
    width: 100% !important;
    max-width: 100% !important;
  }

  .table-wrap,
  .table-responsive,
  .calendar-wrap,
  .calendar-scroll {
    overflow-x: auto !important;
  }
}

/* =========================================================
   MOBILE / TABLET
   ========================================================= */
@media (max-width: 991px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  body.mobile-nav-open {
    overflow: hidden !important;
  }

  .app-shell {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .mobile-menu-btn {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
    left: 14px !important;
    z-index: 10040 !important;
    height: 52px !important;
    min-width: 140px !important;
    padding: 0 18px !important;
    border-radius: 24px !important;
    border: 1px solid #dbe3ee !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 16px 34px rgba(15,23,42,.12) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    color: #0b1730 !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    backdrop-filter: blur(8px) !important;
    cursor: pointer !important;
  }

  .mobile-menu-btn svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
    flex: 0 0 auto !important;
  }

  .mobile-sidebar-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(2,8,23,.45) !important;
    z-index: 10020 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .2s ease !important;
  }

  body.mobile-nav-open .mobile-sidebar-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: min(84vw, 320px) !important;
    max-width: 320px !important;
    height: 100dvh !important;
    transform: translateX(-105%) !important;
    transition: transform .22s ease !important;
    z-index: 10030 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 18px) !important;
    display: block !important;
  }

  body.mobile-nav-open .sidebar {
    transform: translateX(0) !important;
  }

  main.main,
  .main,
  .page,
  .page-content,
  .content,
  .main-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: calc(env(safe-area-inset-top, 0px) + 84px) 14px 34px !important;
    overflow-x: hidden !important;
  }

  .topbar,
  .page-header,
  .hero-head,
  .module-header,
  .section-head {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .topbar-actions,
  .header-actions,
  .page-actions {
    width: 100% !important;
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  h1,
  .page-header h1,
  .topbar h1 {
    font-size: 24px !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
    width: 100% !important;
  }

  .page-subtitle,
  .topbar p,
  .module-header p {
    text-align: center !important;
    width: 100% !important;
  }

  .dashboard-grid,
  .stats-grid,
  .reading-insights,
  .data-insights,
  .page-top-insights,
  .cards-grid,
  .overview-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* CARD ANGKA jadi 2 kolom di mobile */
  .mini-stat-grid,
  .mini-stat-grid.compact-four,
  .overview-stats,
  .summary-mini-grid,
  .dashboard-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .mini-stat,
  .summary-item,
  .reading-stat,
  .stat-card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .filter-bar,
  .filters,
  .toolbar,
  .search-filter,
  .search-row,
  form.filter-bar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .filter-bar input,
  .filter-bar select,
  .filter-bar button,
  .filters input,
  .filters select,
  .filters button,
  .search-filter input,
  .search-filter select,
  .search-filter button {
    width: 100% !important;
    max-width: 100% !important;
  }

  .btn,
  button,
  .button,
  .primary-btn,
  .action-btn {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .hero-actions,
  .cta-row,
  .card-actions,
  .reading-actions,
  .action-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .library-grid,
  .reading-grid,
  .book-grid,
  .list-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .theme-chip-row,
  .top-theme-chips,
  .top-theme-list,
  .chip-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 2px !important;
  }

  .theme-chip-row::-webkit-scrollbar,
  .top-theme-chips::-webkit-scrollbar,
  .chip-row::-webkit-scrollbar {
    display: none !important;
  }

  .theme-chip,
  .chip,
  .filter-chip {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* tabel dan kalender jangan bikin body geser */
  .table-wrap,
  .table-responsive,
  .calendar-wrap,
  .calendar-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  table.clean-table,
  table.publication-table,
  table {
    min-width: 640px !important;
    width: 100% !important;
  }

  .calendar-grid,
  .month-grid,
  .weekly-grid {
    min-width: 680px !important;
  }

  .chart-card,
  .chart-wrap,
  .chart-container,
  .donut-wrap {
    overflow: hidden !important;
    width: 100% !important;
  }

  .chart-card canvas,
  .chart-wrap canvas,
  .donut-wrap canvas {
    max-width: 100% !important;
    max-height: 260px !important;
  }

  .donut-chart,
  .progress-ring,
  .ring-chart {
    width: min(72vw, 250px) !important;
    height: min(72vw, 250px) !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 575px) {
  .mini-stat-grid,
  .mini-stat-grid.compact-four,
  .overview-stats,
  .summary-mini-grid,
  .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .mobile-menu-btn {
    min-width: 130px !important;
    height: 50px !important;
    font-size: 15px !important;
  }

  main.main,
  .main,
  .page,
  .page-content,
  .content,
  .main-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}


/* =========================================================
   v2.6.1 REAL MOBILE + DESKTOP FIX
   ========================================================= */

/* DESKTOP RESTORE */
@media (min-width: 992px) {
  .mobile-app-header,
  .mobile-menu-btn,
  .mobile-sidebar-backdrop {
    display: none !important;
  }

  html, body {
    overflow-x: hidden !important;
  }

  .app-shell {
    display: grid !important;
    grid-template-columns: 300px minmax(0, 1fr) !important;
    min-height: 100vh !important;
    width: 100% !important;
  }

  .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 300px !important;
    max-width: 300px !important;
    min-width: 300px !important;
    height: 100vh !important;
    transform: none !important;
    z-index: 50 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  main.main,
  .main {
    margin-left: 300px !important;
    width: calc(100vw - 300px) !important;
    max-width: calc(100vw - 300px) !important;
    padding: 28px 32px 48px !important;
    overflow-x: hidden !important;
  }

  .topbar,
  .page-header,
  .module-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background: rgba(246,248,251,.92) !important;
    backdrop-filter: blur(12px) !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .filter-bar,
  .page-top-insights,
  .reading-insights,
  .data-insights,
  .dashboard-grid,
  .stats-grid,
  .library-grid,
  .full-library-grid {
    max-width: 100% !important;
  }

  .sidebar .mode-toggle,
  .sidebar [data-theme-toggle],
  .sidebar .theme-toggle {
    display: none !important;
  }
}

/* MOBILE BASE */
@media (max-width: 991px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: #f5f7fb !important;
  }

  body.mobile-nav-open {
    overflow: hidden !important;
  }

  .app-shell {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  main.main,
  .main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: calc(env(safe-area-inset-top, 0px) + 82px) 12px 36px !important;
    overflow-x: hidden !important;
  }

  /* HEADER MOBILE SATU SAJA */
  .mobile-app-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10050 !important;
    height: calc(env(safe-area-inset-top, 0px) + 68px) !important;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px !important;
    background: rgba(246,248,251,.94) !important;
    backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(203,213,225,.8) !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) auto auto auto !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .mobile-app-header button,
  .mobile-app-header a {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 17px !important;
    border: 1px solid #dbe3ee !important;
    background: #fff !important;
    color: #071a2f !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.08) !important;
  }

  .mobile-app-header svg {
    width: 22px !important;
    height: 22px !important;
  }

  .mobile-title {
    font-size: 17px !important;
    font-weight: 900 !important;
    color: #071a2f !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    padding: 0 4px !important;
  }

  .mobile-theme-toggle {
    font-size: 0 !important;
  }

  .mobile-menu-btn {
    position: static !important;
    min-width: 46px !important;
  }

  .topbar,
  .page-header,
  .module-header {
    margin-top: 0 !important;
  }

  .topbar-actions,
  .header-actions,
  .page-actions {
    display: none !important;
  }

  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: min(86vw, 330px) !important;
    max-width: 330px !important;
    height: 100dvh !important;
    z-index: 10070 !important;
    transform: translateX(-105%) !important;
    transition: transform .22s ease !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
  }

  body.mobile-nav-open .sidebar {
    transform: translateX(0) !important;
  }

  .mobile-sidebar-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10060 !important;
    background: rgba(2,8,23,.45) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .18s ease !important;
  }

  body.mobile-nav-open .mobile-sidebar-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .sidebar .mode-toggle,
  .sidebar [data-theme-toggle],
  .sidebar .theme-toggle {
    display: none !important;
  }

  /* CARD ANGKA / HERO STAT: SELALU 2 KOLOM DI MOBILE */
  .mini-stat-grid,
  .mini-stat-grid.compact-four,
  .overview-stats,
  .dashboard-stats,
  .summary-mini-grid,
  .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .mini-stat,
  .stat-card,
  .summary-item,
  .reading-stat {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 112px !important;
    padding: 13px !important;
    border-radius: 18px !important;
  }

  .mini-stat strong,
  .stat-card strong,
  .summary-item strong,
  .reading-stat strong {
    font-size: 26px !important;
    line-height: 1.05 !important;
  }

  .mini-stat span,
  .stat-card span,
  .summary-item span {
    font-size: 12px !important;
  }

  /* TOP TEMA 2 BARIS, TIDAK GESER */
  .theme-chip-row,
  .top-theme-chips,
  .chip-row,
  .top-theme-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-height: 92px !important;
    overflow: hidden !important;
  }

  .theme-chip,
  .chip,
  .filter-chip {
    flex: 0 1 auto !important;
    max-width: calc(50% - 6px) !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 13px !important;
    padding: 9px 11px !important;
  }

  /* FILTER MOBILE RINGKAS */
  .filter-bar,
  form.filter-bar,
  .filters,
  .search-filter,
  .search-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
  }

  .filter-bar input[type="text"],
  .filter-bar input[type="search"],
  .filters input[type="text"],
  .search-filter input {
    grid-column: 1 / 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .filter-bar button,
  .filters button,
  .search-filter button {
    width: auto !important;
    min-width: 46px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .filter-bar select,
  .filters select,
  .search-filter select {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    display: none !important;
  }

  .filter-bar.mobile-filter-open select,
  .filters.mobile-filter-open select,
  .search-filter.mobile-filter-open select {
    display: block !important;
  }

  .filter-bar .btn-primary,
  .filter-bar a.btn,
  .filter-bar a[href*="create"],
  .filter-bar button[type="button"] {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  /* GRID KONTEN */
  .dashboard-grid,
  .page-top-insights,
  .reading-insights,
  .data-insights,
  .cards-grid,
  .library-grid,
  .full-library-grid,
  .data-main-full,
  .split-grid,
  .two-col,
  .three-col {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .content-card,
  .card,
  .panel,
  .table-card,
  .chart-card,
  .calendar-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border-radius: 22px !important;
  }

  /* PUBLIKASI / DATASET / LOG: TABEL AMAN */
  .table-wrap,
  .table-responsive,
  .responsive-table,
  .table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  table {
    min-width: 680px !important;
    width: 100% !important;
  }

  th,
  td {
    font-size: 13px !important;
    padding: 10px 9px !important;
  }

  .action-menu,
  .table-actions,
  td:last-child {
    white-space: nowrap !important;
  }

  .action-menu .btn,
  .table-actions .btn,
  td:last-child .btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    font-size: 0 !important;
    border-radius: 12px !important;
  }

  .action-menu .btn svg,
  .table-actions .btn svg,
  td:last-child .btn svg {
    width: 17px !important;
    height: 17px !important;
  }

  /* KALENDER MOBILE */
  .calendar-grid,
  .month-grid {
    min-width: 720px !important;
  }

  .calendar-wrap,
  .calendar-scroll,
  .calendar-card {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .calendar-day:nth-child(7n),
  .calendar-day:nth-child(7n+1),
  .day-cell:nth-child(7n),
  .day-cell:nth-child(7n+1) {
    background: #f8fafc !important;
  }

  .calendar-day.is-holiday,
  .day-cell.is-holiday {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
  }

  /* DISSERTATION STEPPER */
  .stepper,
  .progress-steps,
  .dissertation-steps,
  .publication-steps {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .stepper > *,
  .progress-steps > *,
  .dissertation-steps > *,
  .publication-steps > * {
    flex: 0 0 116px !important;
  }

  .stepper::before,
  .progress-steps::before,
  .dissertation-steps::before {
    height: 3px !important;
    opacity: .45 !important;
  }
}

@media (max-width: 420px) {
  .mini-stat-grid,
  .mini-stat-grid.compact-four,
  .overview-stats,
  .dashboard-stats,
  .summary-mini-grid,
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .mini-stat,
  .stat-card,
  .summary-item,
  .reading-stat {
    min-height: 104px !important;
    padding: 11px !important;
  }

  .theme-chip,
  .chip,
  .filter-chip {
    max-width: calc(50% - 5px) !important;
    font-size: 12px !important;
  }
}