:root{
  --bg:#f4f7fb;--panel:#fff;--text:#152238;--muted:#718096;--line:#e5eaf1;
  --brand:#164e3c;--brand2:#0f7a5a;--gold:#d6ad60;--danger:#c63d45;--shadow:0 12px 35px rgba(25,48,73,.08);
}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);font-size:14px}
a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.app{min-height:100vh;display:flex}.sidebar{width:280px;background:linear-gradient(180deg,#103f32 0%,#0b2f28 100%);color:#eaf6f2;position:fixed;inset:0 auto 0 0;overflow:auto;padding:22px 16px;z-index:20}.brand{display:flex;gap:12px;align-items:center;padding:8px 10px 22px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:15px}.brand-mark{width:43px;height:43px;border-radius:14px;background:linear-gradient(135deg,var(--gold),#f0d79a);color:#153d32;display:grid;place-items:center;font-weight:900;font-size:20px;box-shadow:0 10px 25px rgba(0,0,0,.18)}.brand strong{display:block;font-size:16px}.brand span{display:block;font-size:11px;color:#b8d5cb;margin-top:3px}.nav-section{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#80ad9e;padding:12px 12px 7px}.nav-link,.nav-parent{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;color:#d9eee7;margin:2px 0;transition:.2s}.nav-link:hover,.nav-parent:hover,.nav-link.active,.nav-parent.active{background:rgba(255,255,255,.11);color:#fff}.nav-link{width:100%}.nav-text{flex:1}.nav-icon{width:22px;text-align:center;font-weight:800;color:#d9c58d}.nav-group{margin:2px 0}.nav-parent{width:100%;border:0;background:transparent;justify-content:space-between;cursor:pointer;text-align:left}.nav-parent-left{display:flex;align-items:center;gap:11px;min-width:0;flex:1}.nav-caret{font-size:12px;color:#b7d7cb;transition:transform .2s ease}.nav-group.open .nav-caret{transform:rotate(180deg)}.nav-sub{margin-left:19px;border-left:1px solid rgba(255,255,255,.12);padding-left:8px;max-height:0;overflow:hidden;opacity:0;transition:max-height .25s ease,opacity .2s ease,padding-top .2s ease,padding-bottom .2s ease;padding-top:0;padding-bottom:0}.nav-group.open .nav-sub{max-height:700px;opacity:1;padding-top:4px;padding-bottom:6px}.nav-sub .nav-link{font-size:12px;padding:8px 10px;color:#bcd7ce}.main{margin-left:280px;width:calc(100% - 280px);min-height:100vh}.topbar{height:72px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:10}.top-title h1{font-size:19px;margin:0}.top-title p{font-size:12px;color:var(--muted);margin:3px 0 0}.admin-chip{display:flex;align-items:center;gap:10px}.avatar{width:36px;height:36px;border-radius:50%;background:#e6f2ee;color:var(--brand);display:grid;place-items:center;font-weight:800}.content{padding:28px}.hero{background:linear-gradient(135deg,#164e3c,#0e7456);color:#fff;border-radius:20px;padding:28px;position:relative;overflow:hidden;box-shadow:var(--shadow);margin-bottom:22px}.hero:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;border:45px solid rgba(255,255,255,.06);right:-60px;top:-70px}.hero h2{margin:0 0 7px;font-size:25px}.hero p{margin:0;color:#cce7dd;max-width:700px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.stat{padding:18px;display:flex;gap:14px;align-items:center}.stat-icon{width:46px;height:46px;border-radius:13px;background:#eef8f5;color:var(--brand2);display:grid;place-items:center;font-size:19px;font-weight:900}.stat-value{font-size:23px;font-weight:800}.stat-label{color:var(--muted);font-size:12px;margin-top:2px}.section{margin-top:20px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}.section-head h3{margin:0;font-size:16px}.btn{border:0;border-radius:10px;padding:10px 14px;cursor:pointer;font-weight:700;display:inline-flex;align-items:center;gap:7px}.btn-primary{background:var(--brand2);color:#fff}.btn-primary:hover{background:#0c694d}.btn-secondary{background:#edf2f7;color:#334155}.btn-danger{background:#fff0f1;color:var(--danger)}.btn-sm{padding:7px 10px;font-size:12px}.table-wrap{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:auto;box-shadow:var(--shadow)}table{border-collapse:collapse;width:100%;min-width:760px}th,td{padding:13px 14px;text-align:left;border-bottom:1px solid #edf0f4;vertical-align:middle}th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#738197;background:#fafbfd}tr:last-child td{border-bottom:0}.badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:700}.badge-green{background:#e7f7f0;color:#08734e}.badge-gray{background:#eef2f6;color:#5c6878}.badge-gold{background:#fff6e2;color:#95680e}.file-pill{display:inline-flex;align-items:center;gap:6px;background:#f4f6f9;border-radius:8px;padding:6px 8px;font-size:11px;color:#536174}.actions{display:flex;gap:6px;white-space:nowrap}.filters{padding:14px;background:#fff;border:1px solid var(--line);border-radius:14px;display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;margin-bottom:14px}.input,.select,.textarea{width:100%;border:1px solid #dce3eb;border-radius:10px;padding:10px 11px;background:#fff;color:var(--text);outline:none}.input:focus,.select:focus,.textarea:focus{border-color:#70b6a2;box-shadow:0 0 0 3px rgba(15,122,90,.08)}.textarea{min-height:100px;resize:vertical}.form-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:22px;box-shadow:var(--shadow);max-width:960px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-group label{display:block;font-size:12px;font-weight:700;margin-bottom:7px}.form-group small{display:block;color:var(--muted);margin-top:5px}.full{grid-column:1/-1}.flash{padding:12px 15px;border-radius:11px;margin-bottom:15px;border:1px solid}.flash-success{background:#e9f8f2;color:#096c4d;border-color:#c6eadc}.flash-error{background:#fff0f1;color:#a82f37;border-color:#f3ccd0}.empty{text-align:center;padding:36px;color:var(--muted)}.empty strong{display:block;color:#3d4b60;margin-bottom:4px}.login-page{min-height:100vh;display:grid;grid-template-columns:1.2fr .8fr}.login-visual{background:linear-gradient(135deg,#0c3329,#146d52);padding:55px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.login-visual:after{content:"";position:absolute;width:550px;height:550px;border:90px solid rgba(255,255,255,.035);border-radius:50%;right:-230px;bottom:-230px}.login-visual h1{font-size:40px;max-width:560px;margin:0}.login-visual p{color:#c4dfd6;max-width:520px;line-height:1.7}.login-box{display:grid;place-items:center;padding:30px;background:#f8fafc}.login-card{width:100%;max-width:410px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:0 20px 60px rgba(29,45,62,.12)}.login-card h2{margin:0 0 5px;font-size:24px}.login-card>p{margin:0 0 22px;color:var(--muted)}.login-card .form-group{margin-bottom:15px}.login-logo{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;display:grid;place-items:center;font-weight:900;font-size:22px;margin-bottom:18px}.menu-toggle{display:none;border:0;background:transparent;font-size:20px}.footer{padding:10px 28px 26px;color:#8793a5;font-size:11px}.muted{color:var(--muted)}.text-right{text-align:right}.mt-0{margin-top:0}.mb-0{margin-bottom:0}
@media(max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:1fr 1fr}.filters .wide{grid-column:1/-1}}
@media(max-width:820px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:translateX(0)}.main{margin-left:0;width:100%}.menu-toggle{display:block}.topbar{padding:0 16px}.content{padding:18px}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.login-page{grid-template-columns:1fr}.login-visual{display:none}.grid{grid-template-columns:1fr}.filters{grid-template-columns:1fr}}

/* Pagination */
.pagination-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 2px 0;flex-wrap:wrap}.pagination-info{font-size:12px;color:var(--muted)}.pagination{display:flex;align-items:center;gap:6px}.page-btn,.page-ellipsis{min-width:34px;height:34px;padding:0 9px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--line);background:#fff;color:#526075;font-size:12px;font-weight:700}.page-btn:hover{border-color:#9fc9bb;color:var(--brand2);background:#f5fbf8}.page-btn.active{background:var(--brand2);border-color:var(--brand2);color:#fff}.page-btn.disabled{pointer-events:none;opacity:.4}.page-ellipsis{border:0;background:transparent;padding:0;min-width:22px}

/* Import Data Guru */
.toolbar{display:flex;gap:8px;flex-wrap:wrap}.import-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:18px;align-items:start}.import-step{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}.import-step>span{width:30px;height:30px;border-radius:9px;background:#e7f7f0;color:var(--brand2);font-weight:900;display:grid;place-items:center;flex:0 0 30px}.import-step strong{display:block;font-size:14px;margin-top:2px}.import-step p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.55}.import-divider{height:1px;background:var(--line);margin:22px 0}.import-note{padding:20px}.import-note h3{margin:0 0 14px}.import-columns{display:grid;gap:9px}.import-columns>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #edf0f4}.import-columns>div:last-child{border-bottom:0}.import-columns strong{font-size:12px}.import-columns span{font-size:11px;color:var(--muted);text-align:right}.flash-warning{background:#fff8e8;color:#8a6400;border-color:#f1dfaf}

.swal2-popup{border-radius:18px!important}.swal2-title{font-size:20px!important}.swal2-confirm,.swal2-cancel{border-radius:10px!important;font-weight:700!important}

@media(max-width:820px){.pagination-bar{align-items:flex-start}.pagination{max-width:100%;overflow:auto;padding-bottom:3px}.import-grid{grid-template-columns:1fr}.toolbar{width:100%}.toolbar .btn{flex:1;justify-content:center}}

/* Profil Madrasah & identitas sidebar */
.brand-logo{overflow:hidden;flex:0 0 auto}.brand-logo img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}.sidebar-logout-form{margin:0;padding:0}.sidebar-logout-form .nav-link{border:0;background:transparent;text-align:left;cursor:pointer;font:inherit}.nav-logout{color:#ffd6d9!important}.nav-logout .nav-icon{color:#ff9ca3}.nav-logout:hover{background:rgba(198,61,69,.2)!important;color:#fff!important}.profile-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}.profile-head{align-items:flex-start}.profile-head p{margin-top:5px}.profile-preview-card{padding:24px;text-align:center;position:sticky;top:94px}.profile-logo-preview{width:120px;height:120px;margin:0 auto 16px;border-radius:24px;background:linear-gradient(135deg,#eef8f5,#fff6e2);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;color:var(--brand);font-size:34px;font-weight:900;box-shadow:0 12px 30px rgba(25,48,73,.08)}.profile-logo-preview img{width:100%;height:100%;object-fit:contain;background:#fff}.profile-preview-card h3{margin:0 0 8px;font-size:18px}.profile-preview-card p{margin:4px 0;color:var(--muted);font-size:12px}.profile-preview-line{height:1px;background:var(--line);margin:18px 0}.check-row{display:flex!important;align-items:center;gap:8px;margin-top:10px!important;font-weight:500!important;color:var(--muted)}.check-row input{accent-color:var(--brand2)}
@media(max-width:960px){.profile-layout{grid-template-columns:1fr}.profile-preview-card{position:static;order:-1}.profile-logo-preview{width:96px;height:96px}}

/* =========================================================
   Premium Animated Login v5
   ========================================================= */
.login-body{background:#eef4f1;overflow-x:hidden}.login-premium{grid-template-columns:minmax(0,1.08fr) minmax(440px,.72fr);min-height:100vh;background:#eef4f1}.login-premium .login-visual{min-height:100vh;padding:0;background:linear-gradient(135deg,#07382d 0%,#0b5843 46%,#118261 100%);isolation:isolate}.login-premium .login-visual:after{display:none}.login-grid{position:absolute;inset:0;z-index:-5;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 92%);animation:gridDrift 24s linear infinite}.login-noise{position:absolute;inset:0;z-index:-4;opacity:.12;background-image:radial-gradient(rgba(255,255,255,.7) .6px,transparent .7px);background-size:7px 7px;mix-blend-mode:soft-light}.login-orb{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none;will-change:transform}.orb-one{width:430px;height:430px;right:-95px;top:-95px;background:radial-gradient(circle at 30% 30%,rgba(241,212,139,.34),rgba(241,212,139,.05) 58%,transparent 72%);animation:orbFloatOne 11s ease-in-out infinite}.orb-two{width:340px;height:340px;left:-145px;bottom:4%;background:radial-gradient(circle at 65% 40%,rgba(79,222,174,.22),rgba(43,154,118,.04) 62%,transparent 72%);animation:orbFloatTwo 13s ease-in-out infinite}.orb-three{width:220px;height:220px;right:14%;bottom:22%;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 0 70px rgba(255,255,255,.03);animation:orbSpin 18s linear infinite}.login-visual-inner{position:relative;z-index:2;min-height:100vh;padding:44px clamp(38px,5vw,76px) 34px;display:flex;flex-direction:column}.login-brand-row{display:flex;align-items:center;gap:13px}.login-brand-logo{width:48px;height:48px;border-radius:16px}.login-brand-copy{display:flex;flex-direction:column;line-height:1.15}.login-brand-copy strong{font-size:16px;letter-spacing:.01em}.login-brand-copy span{font-size:10px;color:rgba(230,248,241,.65);margin-top:5px;letter-spacing:.08em;text-transform:uppercase}.login-secure-badge{margin-left:auto;display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(4,39,31,.18);backdrop-filter:blur(12px);font-size:10px;font-weight:700;color:#d8efe7;letter-spacing:.03em}.secure-dot{width:7px;height:7px;border-radius:50%;background:#7af1bc;box-shadow:0 0 0 0 rgba(122,241,188,.5);animation:securePulse 2s infinite}.login-hero-copy{margin-top:clamp(58px,9vh,110px);max-width:710px}.login-kicker{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.18em;color:#f3dca0;margin-bottom:18px}.login-kicker:before{content:"";width:32px;height:1px;background:#e9c875}.login-premium .login-hero-copy h1{font-size:clamp(38px,4.2vw,66px);line-height:1.04;letter-spacing:-.045em;max-width:720px;margin:0;font-weight:800}.login-premium .login-hero-copy h1 span{display:block;color:#f1d58d}.login-premium .login-hero-copy p{margin:22px 0 0;max-width:630px;color:rgba(223,243,236,.74);font-size:14px;line-height:1.85}.login-feature-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}.login-feature-row span{display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);font-size:11px;color:#d8eee6}.login-feature-row i{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:rgba(122,241,188,.14);color:#98f5cb;font-size:10px;font-style:normal}.login-showcase{position:relative;max-width:660px;margin-top:auto;padding-top:58px;padding-right:50px;will-change:transform}.showcase-panel{position:relative;min-height:176px;border-radius:22px;padding:20px 22px;background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.065));border:1px solid rgba(255,255,255,.14);box-shadow:0 25px 70px rgba(0,25,19,.26);backdrop-filter:blur(18px);overflow:hidden}.showcase-panel:before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.13),transparent 35%);pointer-events:none}.showcase-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.showcase-top>div{display:flex;flex-direction:column}.showcase-label{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:rgba(229,244,238,.58);margin-bottom:5px}.showcase-top strong{font-size:14px;color:#fff;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.showcase-live{display:flex;align-items:center;gap:7px;color:#c9ede0;font-size:9px;padding:6px 9px;border:1px solid rgba(255,255,255,.1);border-radius:999px}.showcase-live i{width:6px;height:6px;border-radius:50%;background:#78eab6;box-shadow:0 0 12px rgba(120,234,182,.7)}.showcase-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:25px}.showcase-stat{display:flex;align-items:center;gap:10px;padding:11px;border-radius:13px;background:rgba(2,37,29,.2);border:1px solid rgba(255,255,255,.07)}.stat-symbol{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;background:rgba(241,213,141,.14);color:#f1d58d;font-size:11px;font-weight:900}.showcase-stat b{display:block;font-size:10px;color:#f7fffc}.showcase-stat small{display:block;margin-top:3px;font-size:8px;color:rgba(220,241,233,.5)}.floating-file{position:absolute;right:0;width:198px;display:flex;align-items:center;gap:9px;padding:10px 11px;border-radius:14px;background:rgba(252,255,254,.94);color:#153d32;box-shadow:0 14px 35px rgba(0,23,17,.24);z-index:4;animation:fileFloat 5.5s ease-in-out infinite}.floating-file .file-icon{width:35px;height:35px;border-radius:9px;background:#ffe9e8;color:#b34b4a;display:grid;place-items:center;font-size:8px;font-weight:900;letter-spacing:.03em}.floating-file .file-icon-sheet{background:#e3f6eb;color:#19704d}.floating-file .file-icon-doc{background:#e7efff;color:#3c62a9}.floating-file b{display:block;font-size:9px}.floating-file small{display:block;font-size:8px;color:#7c8f88;margin-top:2px}.file-check{margin-left:auto;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:#e0f7eb;color:#167453;font-size:10px;font-weight:900}.file-one{top:26px}.file-two{top:91px;right:-23px;animation-delay:-1.6s}.file-three{top:154px;right:14px;animation-delay:-3.2s}.login-visual-footer{display:flex;align-items:center;gap:11px;margin-top:28px;color:rgba(223,243,236,.46);font-size:9px;letter-spacing:.08em;text-transform:uppercase}.footer-separator{width:3px;height:3px;border-radius:50%;background:rgba(223,243,236,.35)}.login-reveal{opacity:0;transform:translateY(18px);animation:loginReveal .7s cubic-bezier(.2,.8,.2,1) forwards}.reveal-1{animation-delay:.08s}.reveal-2{animation-delay:.18s}.reveal-3{animation-delay:.3s}.reveal-4{animation-delay:.42s}

.login-premium .login-box{position:relative;min-height:100vh;padding:38px clamp(28px,4.5vw,72px);background:radial-gradient(circle at 85% 5%,rgba(15,122,90,.08),transparent 27%),linear-gradient(180deg,#fbfdfc 0%,#f3f7f5 100%);overflow:hidden}.login-premium .login-box:before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;border:1px solid rgba(15,122,90,.07);right:-180px;top:-185px;box-shadow:0 0 0 55px rgba(15,122,90,.018),0 0 0 110px rgba(15,122,90,.012)}.login-form-wrap{position:relative;z-index:2;width:100%;max-width:460px}.premium-login-card{position:relative;width:100%;max-width:none;padding:35px 35px 30px;border:1px solid rgba(220,229,225,.92);border-radius:27px;background:rgba(255,255,255,.88);backdrop-filter:blur(22px);box-shadow:0 25px 70px rgba(26,55,44,.11);overflow:hidden;animation:cardEnter .75s cubic-bezier(.2,.8,.2,1) both}.premium-login-card:before{content:"";position:absolute;height:3px;left:32px;right:32px;top:0;background:linear-gradient(90deg,transparent,#d7b967,#0f7a5a,transparent);opacity:.8}.premium-login-card:after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-95px;top:-95px;background:radial-gradient(circle,rgba(15,122,90,.09),transparent 70%);pointer-events:none}.login-form-head{text-align:left;margin-bottom:26px}.login-logo-premium{width:68px;height:68px;border-radius:21px;margin:0 0 20px;box-shadow:0 12px 30px rgba(15,122,90,.18);outline:6px solid rgba(15,122,90,.055)}.portal-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border-radius:999px;background:#edf8f4;color:#11694f;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}.portal-badge span{width:6px;height:6px;border-radius:50%;background:#1ba978;box-shadow:0 0 0 3px rgba(27,169,120,.12)}.premium-login-card h2{font-size:27px;letter-spacing:-.03em;margin:0 0 7px;color:#132b24}.premium-login-card .login-form-head p{margin:0;color:#71847d;font-size:12px;line-height:1.6}.premium-login-card .login-form-head p strong{color:#3e5e53;font-weight:700}.premium-field{margin-bottom:17px!important}.premium-field label{font-size:11px;color:#30483f;margin-bottom:8px}.field-label-row{display:flex;align-items:center;justify-content:space-between}.field-label-row span{font-size:9px;color:#9aa9a4}.input-shell{position:relative}.premium-field .input{height:50px;padding:0 45px 0 44px;border:1px solid #dbe5e1;border-radius:13px;background:#fbfdfc;color:#19362c;transition:border-color .2s,box-shadow .2s,background .2s,transform .2s}.premium-field .input::placeholder{color:#a4b1ac}.premium-field .input:hover{background:#fff;border-color:#c8d8d2}.premium-field .input:focus{background:#fff;border-color:#4da98b;box-shadow:0 0 0 4px rgba(15,122,90,.08);transform:translateY(-1px)}.input-leading{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#78928a;z-index:2;pointer-events:none}.input-leading svg,.password-toggle svg,.premium-login-button svg,.security-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.password-toggle{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:9px;background:transparent;color:#81968e;display:grid;place-items:center;cursor:pointer;transition:.2s}.password-toggle:hover{background:#eef6f3;color:#146d52}.password-toggle svg{width:17px;height:17px}.password-toggle .eye-closed{display:none}.password-toggle.is-visible .eye-open{display:none}.password-toggle.is-visible .eye-closed{display:block}.premium-login-button{position:relative;width:100%;height:50px;margin-top:5px;justify-content:center;border-radius:13px;background:linear-gradient(105deg,#0d674d,#118461);box-shadow:0 12px 28px rgba(15,122,90,.22);overflow:hidden;transition:transform .2s,box-shadow .2s}.premium-login-button:before{content:"";position:absolute;top:-30%;bottom:-30%;width:60px;left:-90px;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);animation:buttonShine 4.3s ease-in-out infinite}.premium-login-button:hover{background:linear-gradient(105deg,#0b5c45,#0f7859);transform:translateY(-2px);box-shadow:0 16px 34px rgba(15,122,90,.28)}.premium-login-button:active{transform:translateY(0)}.premium-login-button span{position:relative;z-index:2}.premium-login-button svg{position:relative;z-index:2;width:17px;height:17px;margin-left:4px;transition:transform .2s}.premium-login-button:hover svg{transform:translateX(3px)}.login-security-note{display:flex;align-items:center;gap:11px;margin-top:21px;padding-top:18px;border-top:1px solid #edf1ef}.security-icon{width:33px;height:33px;border-radius:10px;background:#edf8f4;color:#197456;display:grid;place-items:center;flex:0 0 33px}.security-icon svg{width:17px;height:17px}.login-security-note strong{display:block;font-size:10px;color:#4b665c}.login-security-note small{display:block;margin-top:3px;font-size:9px;color:#98a7a2}.login-copyright{text-align:center;margin-top:18px;color:#9aa7a2;font-size:9px;letter-spacing:.03em}.mobile-login-brand{display:none}

@keyframes loginReveal{to{opacity:1;transform:translateY(0)}}
@keyframes cardEnter{0%{opacity:0;transform:translateY(24px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes gridDrift{0%{background-position:0 0,0 0}100%{background-position:48px 48px,48px 48px}}
@keyframes orbFloatOne{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-24px,20px,0) scale(1.06)}}
@keyframes orbFloatTwo{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(28px,-18px,0) scale(1.08)}}
@keyframes orbSpin{to{transform:rotate(360deg)}}
@keyframes securePulse{0%{box-shadow:0 0 0 0 rgba(122,241,188,.45)}70%{box-shadow:0 0 0 7px rgba(122,241,188,0)}100%{box-shadow:0 0 0 0 rgba(122,241,188,0)}}
@keyframes fileFloat{0%,100%{transform:translateY(0) rotate(.4deg)}50%{transform:translateY(-7px) rotate(-.4deg)}}
@keyframes buttonShine{0%,58%{left:-90px}78%,100%{left:115%}}

@media(max-width:1180px){.login-premium{grid-template-columns:minmax(0,1fr) 440px}.login-visual-inner{padding-left:42px;padding-right:42px}.login-premium .login-hero-copy h1{font-size:46px}.login-showcase{padding-right:20px}.floating-file{display:none}.showcase-stats{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:900px){.login-premium{grid-template-columns:1fr}.login-premium .login-visual{display:none}.login-premium .login-box{padding:28px 20px;min-height:100vh}.login-form-wrap{max-width:460px}.mobile-login-brand{display:flex;align-items:center;gap:11px;margin-bottom:20px;padding:0 5px}.mobile-login-brand .brand-mark{width:44px;height:44px;border-radius:14px}.mobile-login-brand>div:last-child{display:flex;flex-direction:column}.mobile-login-brand strong{font-size:14px;color:#173a2e}.mobile-login-brand span{font-size:10px;color:#81948d;margin-top:3px;max-width:270px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:520px){.login-premium .login-box{padding:20px 14px}.premium-login-card{padding:28px 21px 24px;border-radius:22px}.login-logo-premium{width:60px;height:60px;border-radius:18px}.premium-login-card h2{font-size:24px}.premium-field .input{height:48px}.premium-login-button{height:49px}.login-copyright{padding:0 10px}.mobile-login-brand span{max-width:220px}}
@media(prefers-reduced-motion:reduce){.login-grid,.login-orb,.secure-dot,.floating-file,.premium-login-button:before,.login-reveal,.premium-login-card{animation:none!important}.login-reveal,.premium-login-card{opacity:1;transform:none}.login-showcase,[data-parallax]{transform:none!important}}


/* CRUD detail/action enhancements */
.btn-view{background:#e9f7f3;color:#0b6d52}.btn-view:hover{background:#d9f0e8;color:#085941}.detail-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:22px;box-shadow:var(--shadow);margin-bottom:18px}.detail-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}.detail-head h3{margin:0 0 5px}.detail-actions{display:flex;gap:7px;flex-wrap:wrap}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid #edf0f4;border-radius:14px;overflow:hidden}.detail-item{padding:14px 16px;border-bottom:1px solid #edf0f4;background:#fff}.detail-item:nth-child(odd){border-right:1px solid #edf0f4}.detail-item.detail-full{grid-column:1/-1;border-right:0}.detail-label{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#8a96a7;margin-bottom:6px}.detail-value{font-size:13px;color:#26364b;line-height:1.6;overflow-wrap:anywhere}.detail-value strong{font-size:15px}.detail-section-title{font-size:14px;margin:22px 0 10px}.related-table table{min-width:680px}.inline-delete{display:inline}.file-detail{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px;border:1px dashed #d8e2e9;border-radius:12px;background:#fbfcfd}.file-detail-main{min-width:0}.file-detail-name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-detail-meta{font-size:11px;color:var(--muted);margin-top:4px}.back-link{margin-bottom:14px;display:inline-flex}.actions form{margin:0}
@media(max-width:700px){.detail-head{flex-direction:column}.detail-grid{grid-template-columns:1fr}.detail-item:nth-child(odd){border-right:0}.detail-item.detail-full{grid-column:auto}.file-detail{align-items:flex-start;flex-direction:column}}

/* Browser file preview */
.preview-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}.preview-toolbar-actions{display:flex;gap:7px;flex-wrap:wrap}.preview-card{background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow);overflow:hidden}.preview-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);background:#fbfcfd}.preview-file-icon{min-width:48px;height:38px;padding:0 9px;border-radius:10px;background:#e9f7f3;color:#0b6d52;display:grid;place-items:center;font-size:11px;font-weight:900;letter-spacing:.04em}.preview-file-info{min-width:0}.preview-file-info h3{margin:0 0 4px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-file-info .muted{font-size:11px}.preview-frame-wrap{height:calc(100vh - 235px);min-height:560px;background:#eef2f5}.preview-frame{width:100%;height:100%;border:0;display:block;background:#fff}.preview-image-wrap{min-height:560px;padding:24px;display:flex;align-items:flex-start;justify-content:center;background:linear-gradient(45deg,#f5f7f9 25%,transparent 25%),linear-gradient(-45deg,#f5f7f9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f5f7f9 75%),linear-gradient(-45deg,transparent 75%,#f5f7f9 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0}.preview-image{max-width:100%;height:auto;max-height:calc(100vh - 255px);object-fit:contain;border-radius:6px;box-shadow:0 8px 30px rgba(22,34,56,.12);background:#fff}.preview-unavailable{text-align:center;padding:70px 24px;max-width:700px;margin:auto}.preview-unavailable-icon{width:58px;height:58px;border-radius:16px;background:#eef2f7;display:grid;place-items:center;margin:0 auto 14px;font-size:26px;color:#617086}.preview-unavailable h3{margin:0 0 8px}.preview-unavailable p{margin:0;color:var(--muted);line-height:1.7}.preview-text-wrap{background:#fff}
@media(max-width:700px){.preview-toolbar{align-items:stretch}.preview-toolbar>div,.preview-toolbar-actions{width:100%}.preview-toolbar-actions .btn{flex:1;justify-content:center}.preview-frame-wrap{height:70vh;min-height:420px}.preview-image-wrap{min-height:420px;padding:12px}.preview-image{max-height:68vh}}

/* Google Drive integration */
.drive-status-card{display:flex;align-items:center;gap:15px;background:#fff;border:1px solid var(--line);border-radius:17px;padding:18px 20px;box-shadow:var(--shadow);margin-bottom:18px}.drive-status-card.is-connected{border-color:#cce8de;background:linear-gradient(135deg,#fff,#f4fbf8)}.drive-status-icon{width:48px;height:48px;border-radius:14px;background:#eef2f7;color:#637083;display:grid;place-items:center;font-size:20px;font-weight:900;flex:0 0 48px}.drive-status-card.is-connected .drive-status-icon{background:#e6f6f0;color:#0f7959}.drive-status-main{flex:1}.drive-status-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:#8b97a7}.drive-status-main h3{margin:3px 0 4px;font-size:17px}.drive-status-main p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}.drive-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:18px;align-items:start}.drive-config-card{max-width:none}.drive-side-card{margin:0}.drive-step{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid #edf0f4}.drive-step>span{width:28px;height:28px;border-radius:9px;background:#e9f7f3;color:#0b6d52;display:grid;place-items:center;font-weight:900;flex:0 0 28px}.drive-step strong{display:block;font-size:12px}.drive-step p{font-size:11px;color:var(--muted);line-height:1.5;margin:3px 0 0}.drive-code{margin-top:6px;padding:8px 9px;border:1px solid #e1e7ed;border-radius:8px;background:#f7f9fb;color:#3b4a5f;font-size:10px;overflow-wrap:anywhere;user-select:all}.drive-connect-btn{display:flex;justify-content:center;width:100%;margin-top:16px}.drive-connected-info{margin-top:14px;border:1px solid #e4ece8;border-radius:11px;overflow:hidden}.drive-connected-info>div{display:flex;justify-content:space-between;gap:12px;padding:9px 10px;border-bottom:1px solid #edf1ef;font-size:11px}.drive-connected-info>div:last-child{border-bottom:0}.drive-connected-info span{color:var(--muted)}.drive-connected-info strong{text-align:right;overflow-wrap:anywhere}.drive-migration-card{margin-top:18px}.drive-migration-card p{line-height:1.65}.drive-all-cloud{padding:13px;border-radius:10px;background:#eaf8f2;color:#0c6c50;font-weight:700;font-size:12px}.storage-cloud{color:#08734e;font-weight:800}.storage-local{color:#8b6b1a;font-weight:800}
@media(max-width:900px){.drive-grid{grid-template-columns:1fr}.drive-status-card{align-items:flex-start;flex-wrap:wrap}.drive-status-main{min-width:220px}}


/* v10 - fast upload + background Google Drive sync */
.upload-local-status{display:inline-flex;align-items:center;margin-left:10px;font-size:11px;color:var(--muted);font-weight:700}
.drive-sync-row{margin-top:5px;font-size:9px;font-weight:800;letter-spacing:.01em}
.drive-sync-pending,.drive-sync-syncing{color:#8b6b1a}.drive-sync-error{color:#b42318}.drive-sync-synced{color:#08734e}
.drive-sync-toast{position:fixed;right:18px;bottom:18px;z-index:1200;display:flex;align-items:center;gap:9px;max-width:360px;padding:11px 14px;border:1px solid #d8e7e1;border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 16px 38px rgba(26,55,44,.15);color:#38564b;font-size:11px;font-weight:700;backdrop-filter:blur(12px)}
.drive-sync-spinner{width:14px;height:14px;border:2px solid #cfe6dd;border-top-color:#0f7a5a;border-radius:50%;animation:driveSpin .8s linear infinite;flex:0 0 14px}
.drive-sync-toast.is-done{border-color:#cde8de;color:#08734e}.drive-sync-toast.is-done .drive-sync-spinner{border:0;background:#0f7a5a;animation:none;position:relative}.drive-sync-toast.is-done .drive-sync-spinner:after{content:'✓';position:absolute;inset:-2px;color:white;font-size:10px;display:grid;place-items:center}
.drive-sync-toast.is-error{border-color:#f0d1cf;color:#a52a23}.drive-sync-toast.is-error .drive-sync-spinner{border-color:#f0d1cf;border-top-color:#b42318}
@keyframes driveSpin{to{transform:rotate(360deg)}}
@media(max-width:700px){.drive-sync-toast{left:12px;right:12px;bottom:12px;max-width:none}}