:root{--primary:#0eaaa6;--primary-dark:#087d7a;--pink:#ff8da1;--dark:#17323a;--bg:#f3f7f8;--card:#fff;--border:#dfe9ec;--danger:#d9485f;--ok:#218838;--sidebar:268px;--header:82px;--shadow:0 10px 35px rgba(20,53,62,.08)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:#24343a}.topbar{height:var(--header);background:#fff;border-bottom:1px solid var(--border);position:fixed;inset:0 0 auto 0;z-index:100;overflow:hidden}.topbar-photo,.topbar-overlay{position:absolute;inset:0}.topbar-photo{background-image:var(--header-image);background-size:cover;background-position:center}.topbar-overlay{background:rgba(12,45,53,var(--header-overlay,0))}.topbar-inner{position:relative;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 28px}.plain-header .brand{color:var(--primary)}.plain-header .brand-text b,.plain-header .brand-text small{text-shadow:none}.brand{display:flex;gap:12px;align-items:center;color:#fff;text-decoration:none;min-width:0}.topbar:not([style*="--header-image"]){background:#fff}.brand-logo{width:50px;height:50px;border-radius:15px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 5px 18px #123a4418;font-size:27px;color:var(--primary);flex:none}.brand-logo img{width:100%;height:100%;object-fit:contain;padding:5px}.brand-text b,.brand-text small{display:block;text-shadow:0 1px 5px #0003}.brand-text b{font-size:20px}.brand-text small{font-size:11px;margin-top:3px}.user{display:flex;align-items:center;gap:13px;font-size:14px}.user-chip{background:#ffffffd9;padding:9px 13px;border-radius:99px;color:#23434a}.user a{color:#d9485f;text-decoration:none;font-weight:700}.mobile-menu{display:none;border:0;background:#ffffffdd;border-radius:10px;padding:10px 12px;font-size:20px}.layout{min-height:100vh;padding-top:var(--header)}aside{position:fixed;z-index:90;left:0;top:var(--header);bottom:0;width:var(--sidebar);background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;box-shadow:8px 0 30px rgba(20,53,62,.035)}.sidebar-brand{height:82px;padding:16px 18px;display:flex;align-items:center;gap:11px;border-bottom:1px solid #edf2f3}.sidebar-logo{width:43px;height:43px;border-radius:12px;background:#eaf8f7;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:23px;color:var(--primary)}.sidebar-logo img{width:100%;height:100%;object-fit:contain;padding:4px}.sidebar-brand strong{display:block;color:var(--primary);font-size:17px}.sidebar-brand small{display:block;color:#87979d;font-size:10px;margin-top:2px}.sidebar-scroll{padding:14px 12px;overflow-y:auto;overflow-x:hidden;flex:1}.nav{display:flex;align-items:center;gap:11px;min-height:46px;padding:11px 13px;border-radius:12px;color:#42545a;text-decoration:none;margin:3px 0;font-weight:700;transition:.18s ease}.nav:hover{background:#eff9f8;color:var(--primary);transform:translateX(2px)}.nav.active{background:linear-gradient(135deg,#dff7f5,#edfafa);color:var(--primary-dark);box-shadow:inset 3px 0 var(--primary)}.nav-icon{width:22px;text-align:center;font-size:18px;flex:none}.nav-parent{position:relative}.nav-arrow{margin-left:auto;font-size:15px}.nav-sub{display:none;margin:0 0 5px 25px;border-left:2px solid #d9efed;padding-left:6px}.nav-sub.open{display:block}.subnav{min-height:38px;font-size:13px;font-weight:600;margin:2px 0}.nav-title{font-size:10px;letter-spacing:.12em;color:#9aa6aa;font-weight:900;padding:20px 12px 7px}.sidebar-footer{padding:13px 17px;border-top:1px solid #edf2f3;color:#829298;font-size:11px;background:#fbfdfd}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#28b67a;margin-right:5px}main{margin-left:var(--sidebar);min-width:0}.content{padding:30px;max-width:1600px;margin:auto}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.stat,.card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:var(--shadow)}.stat b{display:block;font-size:30px;color:var(--primary);margin-top:6px}.muted{color:#78878d}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.top h1{margin:0;font-size:30px;color:#17323a}.btn{border:0;border-radius:11px;padding:10px 15px;cursor:pointer;font-weight:700;text-decoration:none;display:inline-block}.primary{background:var(--primary);color:#fff}.soft{background:#edf7f7;color:#177c79}.danger{background:#ffecef;color:#b62e45}.full{width:100%}.table{overflow:auto;border-radius:15px}.table table{width:100%;border-collapse:collapse;background:#fff}.table th,.table td{padding:11px;border-bottom:1px solid var(--border);text-align:left;font-size:13px}.table th{background:#f5f8f9}.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.formgrid .wide{grid-column:1/-1}input,select,textarea{width:100%;padding:11px 12px;border:1px solid #d8e2e5;border-radius:9px;background:#fff}label{display:block;font-size:12px;font-weight:700;margin-bottom:5px}.books{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.book{background:#fff;border:1px solid var(--border);border-radius:15px;padding:12px}.cover{height:220px;border-radius:10px;overflow:hidden;background:#edf2f3;display:flex;align-items:center;justify-content:center;font-size:45px}.cover img{width:100%;height:100%;object-fit:cover}.book h3{font-size:15px;margin:10px 0 5px}.badge{display:inline-block;padding:4px 8px;border-radius:99px;background:#eef7f7;color:#167f7c;font-size:11px}.alert{padding:12px;border-radius:10px;margin-bottom:14px}.alert.danger{background:#fff0f2}.alert.ok{background:#edf9f0;color:var(--ok)}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e9fbfa,#fff2f5)}.login-card{width:min(420px,92vw);background:#fff;padding:35px;border-radius:24px;box-shadow:0 20px 60px #123a4420}.login-brand-logo{width:88px;height:88px;margin:0 auto 12px;border-radius:22px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 10px 28px rgba(14,170,166,.18);border:3px solid #e7f7f6}.login-brand-logo img{width:100%;height:100%;object-fit:contain;padding:7px}.login-brand-logo span{font-size:48px}.login-card h1{text-align:center;margin:5px}.login-card>p{text-align:center;color:#718087;margin-bottom:25px}.login-card label{margin-top:12px}.remember-row{display:flex!important;align-items:center;gap:7px;margin:12px 0 15px!important;font-size:13px!important;font-weight:700!important;color:#5e6e73}.remember-row input{width:17px!important;height:17px;margin:0!important;accent-color:var(--primary)}.modal{position:fixed;inset:0;background:#0008;display:none;align-items:center;justify-content:center;padding:20px;z-index:150}.modal.show{display:flex}.modal-box{background:#fff;border-radius:18px;padding:22px;max-width:760px;width:100%;max-height:90vh;overflow:auto}.actions{display:flex;gap:7px;flex-wrap:wrap}.settings-layout{max-width:1100px}.branding-previews{display:grid;grid-template-columns:260px 1fr;gap:16px;margin-top:18px}.brand-preview{border:1px solid var(--border);border-radius:16px;padding:14px;background:#fbfdfd}.preview-label{font-size:12px;font-weight:800;margin-bottom:9px;color:#607278}.logo-preview-box{height:190px;border-radius:12px;background:#edf7f7;display:flex;align-items:center;justify-content:center;color:#8b9a9f;overflow:hidden}.logo-preview-box img{max-width:100%;max-height:100%;object-fit:contain}.header-preview{height:190px;border-radius:12px;background:#edf1f2 center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:#8b9a9f;overflow:hidden}.check-remove{margin-top:10px;font-weight:600}.check-remove input{width:auto;margin-right:5px}.catalog-note{background:#eefaf9;border-color:#cceeed;color:#1b6764}.modal-book{max-width:1120px}.modal-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;margin-bottom:12px}.catalog-section{border:1px solid var(--border);border-radius:14px;padding:16px;margin-top:14px;background:#fbfdfd}.catalog-section h3{margin:0 0 14px;color:#176d6b;font-size:15px}.field{min-width:0}.wide2{grid-column:span 2}.field small{display:block;margin-top:5px}.cover-upload-grid{display:grid;grid-template-columns:1fr 1fr 150px;gap:14px;align-items:start}.cover-preview{height:180px;border:1px dashed #c9d8dc;border-radius:12px;background:#f4f8f9;display:flex;align-items:center;justify-content:center;overflow:hidden}.cover-preview img{max-width:100%;max-height:100%;object-fit:contain}.modal-actions{justify-content:flex-end;margin-top:16px}.thumb-cover{width:48px;height:68px;object-fit:cover;border-radius:6px;display:block}.cover-empty{display:inline-flex;width:48px;height:68px;align-items:center;justify-content:center;background:#eef4f5;border-radius:6px}.catalog-btn{background:#fff4df;color:#9a6411}.table table{min-width:1450px}.catalog-sheet{margin-bottom:35px}.catalog-sheet-title{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--border);padding:12px 16px;border-radius:12px;margin-bottom:14px}.catalog-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.catalog-card{min-height:255px;border:1.5px solid #222;background:#fff;padding:18px 20px;font-family:Georgia,'Times New Roman',serif;position:relative;box-shadow:0 4px 14px #0000000a}.card-label{font:700 10px/1.2 Arial,sans-serif;letter-spacing:.08em;color:#777;border-bottom:1px solid #ddd;padding-bottom:7px;margin-bottom:14px}.indent{padding-left:22px;line-height:1.55}.main-entry{margin-left:0;margin-bottom:12px;font-size:17px}.call-number{font:bold 22px/1.2 Arial,sans-serif;margin-bottom:14px;border-left:5px solid var(--primary);padding-left:10px}.card-footer{position:absolute;bottom:12px;left:20px;right:20px;border-top:1px solid #ddd;padding-top:7px;font:11px Arial,sans-serif;color:#666}.import-columns{margin-top:14px;font-size:13px;line-height:1.7}
@media(max-width:1100px){:root{--sidebar:235px}.content{padding:22px}.books{grid-template-columns:repeat(3,1fr)}.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){:root{--header:70px}.topbar-inner{padding:0 12px;gap:9px}.mobile-menu{display:block}.brand-logo{width:42px;height:42px}.brand-text b{font-size:16px}.brand-text small{font-size:9px}.user-chip span{display:none}.user{gap:5px;font-size:12px}.sidebar-backdrop{display:block;position:fixed;inset:0;background:#0006;z-index:80;opacity:0;pointer-events:none;transition:.2s}.layout{padding-top:var(--header)}aside{top:var(--header);width:285px;transform:translateX(-100%);transition:.22s ease;box-shadow:20px 0 50px #0003}.sidebar-open aside{transform:translateX(0)}.sidebar-open .sidebar-backdrop{opacity:1;pointer-events:auto}main{margin-left:0}.content{padding:16px}.grid{grid-template-columns:1fr 1fr}.books{grid-template-columns:repeat(2,1fr)}.formgrid{grid-template-columns:1fr}.branding-previews{grid-template-columns:1fr}.top{align-items:flex-start;gap:10px;flex-direction:column}.top h1{font-size:24px}.table table{min-width:1100px}}
@media print{ @page{size:A4 portrait;margin:10mm}body{background:#fff!important;color:#000!important}.topbar,aside,.no-print,.alert,footer{display:none!important}.layout,.content,main{display:block!important;width:100%!important;min-height:0!important;padding:0!important;margin:0!important}.catalog-sheet{page-break-after:always;margin:0!important}.catalog-sheet:last-child{page-break-after:auto}.catalog-sheet-title{display:none!important}.catalog-card-grid{gap:8mm}.catalog-card{min-height:62mm;box-shadow:none;border:1px solid #111;padding:5mm}.catalog-card .card-label{font-size:8pt}.catalog-card .indent{font-size:10pt;line-height:1.45}.catalog-card .main-entry{font-size:12pt}.catalog-card .call-number{font-size:16pt}}
/* V24 HEADER PHOTO FIX */
.topbar{background:#cfd7d9;isolation:isolate}
.topbar-photo{z-index:0;background-repeat:no-repeat;background-size:cover;background-position:center center;opacity:1}
.topbar-overlay{z-index:1;background:rgba(12,45,53,var(--header-overlay,0))}
.topbar-inner{z-index:2}
.has-header-photo .brand-text b,.has-header-photo .brand-text small{color:#fff;text-shadow:0 2px 7px rgba(0,0,0,.65)}
.has-header-photo .brand-logo{box-shadow:0 4px 16px rgba(0,0,0,.2)}
@media(max-width:760px){.topbar-photo{background-position:center center}}

/* ===== V29 - COLORFUL UI + ANIMATION (ALL USERS) ===== */
@keyframes ekFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes ekSoftPulse{0%,100%{box-shadow:0 8px 24px rgba(20,53,62,.08)}50%{box-shadow:0 14px 34px rgba(20,53,62,.14)}}
@keyframes ekFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes ekShine{0%{background-position:-220% 0}100%{background-position:220% 0}}

/* Smooth entrance for every main area */
main.content,.member-wrap{animation:ekFadeUp .42s ease both}

/* Sidebar/menu */
.nav,.subnav{transition:transform .22s ease,background .22s ease,color .22s ease,box-shadow .22s ease}
.nav:hover{transform:translateX(6px) scale(1.015);box-shadow:0 7px 18px rgba(14,170,166,.10)}
.nav.active{animation:ekSoftPulse 2.8s ease-in-out infinite}
.nav-sub .subnav:hover{transform:translateX(5px);background:#fff1f4;color:#d94f69}
.nav-sub .subnav:nth-child(2n):hover{background:#fff8e9;color:#a56b10}
.nav-sub .subnav:nth-child(3n):hover{background:#edf8ff;color:#287aa8}

/* All generic buttons */
.btn{position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(20,53,62,.13);filter:saturate(1.08)}
.btn:active{transform:translateY(0) scale(.98)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.35) 50%,transparent 75%);background-size:220% 100%;transform:translateX(-100%);pointer-events:none}
.btn:hover::after{animation:ekShine .8s ease}

/* Dashboard/admin statistic cards - each a different accent */
.grid .stat{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.grid .stat:hover{transform:translateY(-7px) scale(1.015);box-shadow:0 18px 38px rgba(20,53,62,.14)}
.grid .stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;border-radius:18px 0 0 18px}
.grid .stat:nth-child(1){background:linear-gradient(135deg,#ffffff,#ecfffd)}
.grid .stat:nth-child(1)::before{background:#0eaaa6}
.grid .stat:nth-child(2){background:linear-gradient(135deg,#ffffff,#fff7e8)}
.grid .stat:nth-child(2)::before{background:#f4ad2d}
.grid .stat:nth-child(3){background:linear-gradient(135deg,#ffffff,#f2edff)}
.grid .stat:nth-child(3)::before{background:#8d67d8}
.grid .stat:nth-child(4){background:linear-gradient(135deg,#ffffff,#fff0f4)}
.grid .stat:nth-child(4)::before{background:#ed6f8a}
.grid .stat:nth-child(5){background:linear-gradient(135deg,#ffffff,#edf7ff)}
.grid .stat:nth-child(5)::before{background:#4b91c7}

/* Generic cards */
.card,.member-panel,.profile-card,.book-card,.member-stat{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover,.member-panel:hover{box-shadow:0 16px 34px rgba(20,53,62,.11)}

/* Member statistics - each different color */
.member-stat{position:relative;overflow:hidden}
.member-stat:hover{transform:translateY(-7px) rotate(-.2deg);box-shadow:0 18px 34px rgba(20,53,62,.14)}
.member-stat:nth-child(1){background:linear-gradient(135deg,#eafffc,#fff);border-color:#bdeeea}
.member-stat:nth-child(1) b{color:#0eaaa6}
.member-stat:nth-child(2){background:linear-gradient(135deg,#fff7e7,#fff);border-color:#f4dfad}
.member-stat:nth-child(2) b{color:#e19a18}
.member-stat:nth-child(3){background:linear-gradient(135deg,#f2edff,#fff);border-color:#d9cbfa}
.member-stat:nth-child(3) b{color:#8056c7}
.member-stat::after{content:"";position:absolute;right:-28px;bottom:-35px;width:95px;height:95px;border-radius:50%;background:rgba(255,255,255,.55)}

/* Member navigation tabs: colorful and animated */
.member-nav .btn:nth-child(1){--tab:#0eaaa6}
.member-nav .btn:nth-child(2){--tab:#ef9f24}
.member-nav .btn:nth-child(3){--tab:#7656c7}
.member-nav .btn:nth-child(4){--tab:#3c8ec5}
.member-nav .btn:nth-child(5){--tab:#df6280}
.member-nav .btn.soft{border:1px solid color-mix(in srgb,var(--tab) 20%,#dfe9ec);background:color-mix(in srgb,var(--tab) 8%,white);color:color-mix(in srgb,var(--tab) 78%,#24343a)}
.member-nav .btn.active{background:var(--tab);color:#fff;box-shadow:0 9px 20px color-mix(in srgb,var(--tab) 25%,transparent);animation:ekFloat 2.5s ease-in-out infinite}

/* Digital/physical book cards */
.book-card{animation:ekFadeUp .45s ease both;position:relative}
.book-card:hover{transform:translateY(-8px);box-shadow:0 18px 34px rgba(20,53,62,.15);border-color:#b8dfe0}
.book-card:nth-child(4n+1){--book-accent:#0eaaa6}
.book-card:nth-child(4n+2){--book-accent:#ef9f24}
.book-card:nth-child(4n+3){--book-accent:#7a5ac8}
.book-card:nth-child(4n){--book-accent:#df6280}
.book-card::before{content:"";display:block;height:5px;background:var(--book-accent);position:absolute;left:0;right:0;top:0;z-index:2}
.book-card img,.book-cover-placeholder{transition:transform .35s ease,filter .35s ease}
.book-card:hover img,.book-card:hover .book-cover-placeholder{transform:scale(1.035);filter:saturate(1.08)}

/* Generic book cards used by admin */
.books .book{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.books .book:hover{transform:translateY(-7px);box-shadow:0 18px 34px rgba(20,53,62,.14)}
.books .book:nth-child(4n+1){border-top:5px solid #0eaaa6}
.books .book:nth-child(4n+2){border-top:5px solid #ef9f24}
.books .book:nth-child(4n+3){border-top:5px solid #7a5ac8}
.books .book:nth-child(4n){border-top:5px solid #df6280}

/* Quick action buttons on admin */
.actions .btn{animation:ekFadeUp .35s ease both}
.actions .btn:nth-child(1){animation-delay:.03s}.actions .btn:nth-child(2){animation-delay:.06s}.actions .btn:nth-child(3){animation-delay:.09s}.actions .btn:nth-child(4){animation-delay:.12s}.actions .btn:nth-child(5){animation-delay:.15s}.actions .btn:nth-child(6){animation-delay:.18s}.actions .btn:nth-child(7){animation-delay:.21s}.actions .btn:nth-child(8){animation-delay:.24s}.actions .btn:nth-child(9){animation-delay:.27s}

/* Tables and form controls */
.table table tr,.table-wrap tr{transition:background .18s ease}
.table table tbody tr:hover,.table-wrap tbody tr:hover{background:#f3fbfa}
input:focus,select:focus,textarea:focus{outline:none;border-color:#55c7c3;box-shadow:0 0 0 4px rgba(14,170,166,.10);transition:.2s}

/* Sidebar brand subtle motion */
.sidebar-logo{transition:transform .25s ease,box-shadow .25s ease}
.sidebar-brand:hover .sidebar-logo{transform:rotate(-4deg) scale(1.05);box-shadow:0 8px 20px rgba(14,170,166,.16)}

/* Respect reduced-motion preferences */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
.member-nav .btn.soft{border:1px solid #dfe9ec;background:#f3f8f8;color:#31545a}
@supports (color:color-mix(in srgb, red 10%, white)){.member-nav .btn.soft{border-color:color-mix(in srgb,var(--tab) 20%,#dfe9ec);background:color-mix(in srgb,var(--tab) 8%,white);color:color-mix(in srgb,var(--tab) 78%,#24343a)}}

/* ===== V30 - COLORFUL HEADER, SIDEBAR & PAGE ===== */
:root{
  --primary:#08a7a3;
  --primary-dark:#087f7c;
  --page-a:#eefafa;
  --page-b:#f8f3ff;
  --sidebar:268px;
  --header:82px;
}
body{
  background:linear-gradient(135deg,var(--page-a) 0%,#f5f8ff 48%,var(--page-b) 100%);
}
/* Header: colorful even without a photo; uploaded photo remains visible when present */
.topbar{
  background:linear-gradient(105deg,#075e69 0%,#0a9f9c 48%,#7655b9 100%);
  border-bottom:0;
  box-shadow:0 8px 28px rgba(25,48,70,.18);
}
.topbar-photo{z-index:0;background-size:cover;background-position:center;}
.topbar-overlay{z-index:1;background:linear-gradient(90deg,rgba(5,62,70,.72),rgba(9,150,148,.34),rgba(91,65,151,.48));}
.topbar:not(.has-header-photo) .topbar-photo{background-image:linear-gradient(105deg,#075e69,#0a9f9c 52%,#7655b9);}
.topbar-inner{z-index:2}
.brand{color:#fff!important}
.brand-text b{font-size:21px;letter-spacing:.2px}
.brand-text small{color:#e8ffff!important}
.brand-logo{border:2px solid rgba(255,255,255,.72);box-shadow:0 6px 20px rgba(0,0,0,.2)}
.user-chip{background:rgba(255,255,255,.94);box-shadow:0 5px 15px rgba(0,0,0,.12)}
.user a{color:#fff!important;text-shadow:0 1px 4px rgba(0,0,0,.25)}
.mobile-menu{background:rgba(255,255,255,.94)}

/* Sidebar */
aside{
  background:linear-gradient(180deg,#063f4b 0%,#075f69 42%,#214d77 100%);
  border-right:0;
  box-shadow:10px 0 32px rgba(12,48,70,.18);
}
.sidebar-brand{
  background:rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.sidebar-brand strong{color:#fff;font-size:18px}
.sidebar-brand small{color:#bfe8e8}
.sidebar-logo{background:#fff;border:3px solid rgba(255,255,255,.55);box-shadow:0 5px 16px rgba(0,0,0,.16)}
.sidebar-scroll{padding:16px 12px}
.nav{
  color:#e9ffff;
  margin:5px 0;
  border:1px solid transparent;
  background:rgba(255,255,255,.035);
}
.nav:hover{
  background:rgba(255,255,255,.15);
  color:#fff;
  transform:translateX(5px) scale(1.01);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.nav.active{
  color:#073f49;
  background:linear-gradient(90deg,#fff,#dffcf8);
  box-shadow:0 9px 22px rgba(0,0,0,.14),inset 4px 0 #ffd166;
}
.nav-icon{color:#b9ffff}
.nav.active .nav-icon{color:#087f7c}
.nav-title{color:#9fd7d8;border-top:1px solid rgba(255,255,255,.10);margin-top:12px}
.nav-sub{border-left:2px solid rgba(255,255,255,.25)}
.subnav{color:#d9f8f8}
.nav-sub .subnav:hover{background:rgba(255,255,255,.14);color:#fff}
.nav-sub .subnav.active{background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 3px 0 #ffd166}
.sidebar-footer{background:rgba(0,0,0,.13);border-top:1px solid rgba(255,255,255,.13);color:#c8e8e9}
.status-dot{box-shadow:0 0 0 4px rgba(40,182,122,.12)}

/* Main page surface */
main{background:transparent}
.content{padding:32px;min-height:calc(100vh - var(--header));}
.top h1{color:#123f4b;text-shadow:0 2px 8px rgba(20,53,62,.06)}
.card,.stat,.table table,.modal-box{
  border-color:rgba(79,139,155,.16);
  box-shadow:0 12px 32px rgba(35,72,91,.09);
}
.card{background:rgba(255,255,255,.94)}

/* Colorful stat cards */
.grid .stat:nth-child(1){background:linear-gradient(135deg,#d8fffa,#fff);border-color:#9be9df}
.grid .stat:nth-child(2){background:linear-gradient(135deg,#fff0d5,#fff);border-color:#f2d18e}
.grid .stat:nth-child(3){background:linear-gradient(135deg,#eee6ff,#fff);border-color:#cfbdf1}
.grid .stat:nth-child(4){background:linear-gradient(135deg,#ffe1ea,#fff);border-color:#f1b5c6}
.grid .stat:nth-child(5){background:linear-gradient(135deg,#dff0ff,#fff);border-color:#afd3ee}
.grid .stat b{font-weight:900}

/* Quick/action buttons */
.actions .btn,.btn.soft{background:#edfafa;color:#087f7c}
.actions .btn:nth-child(3n+1){background:#dffaf7;color:#087f7c}
.actions .btn:nth-child(3n+2){background:#fff0d8;color:#a86b09}
.actions .btn:nth-child(3n){background:#eee7ff;color:#6845a5}

/* Tables/forms */
.table th{background:linear-gradient(90deg,#e4faf8,#f1ecff);color:#24505a}
.table tbody tr:nth-child(even){background:rgba(238,250,250,.38)}
.table tbody tr:hover{background:#fff4d9!important}
input,select,textarea{background:rgba(255,255,255,.96);border-color:#cbdfe4}

@media(max-width:760px){
  .topbar{height:70px}
  .content{padding:18px 14px}
  aside{background:linear-gradient(180deg,#063f4b,#075f69 55%,#214d77)}
}

/* V31 FOOTER */
.public-catalog .site-footer{width:100%;margin:0;}.site-footer{width:calc(100% - var(--sidebar));margin:0 0 0 var(--sidebar);background:linear-gradient(135deg,#07545a,#087f83 52%,#27458f);color:#eafafa;position:relative;overflow:hidden;box-sizing:border-box;border-top:1px solid rgba(255,255,255,.16)}
.site-footer:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(255,255,255,.10),transparent 30%),radial-gradient(circle at 80% 100%,rgba(255,255,255,.07),transparent 28%);pointer-events:none}
.site-footer-center{position:relative;width:100%;box-sizing:border-box;text-align:center;padding:8px 18px 6px}
.footer-title{font-size:13px;font-weight:900;color:#fff;line-height:1.15}.footer-school{margin-top:1px;font-weight:800;color:#d9ffff;font-size:9px;line-height:1.15}
.footer-contact-line{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:3px 11px;margin-top:4px;color:#e7fbfb;font-size:8.5px;line-height:1.2;text-align:center}.footer-contact-line span,.footer-contact-line a{display:inline-flex;align-items:center;justify-content:center;color:inherit;text-decoration:none}.footer-contact-line a:hover{text-decoration:underline}
.footer-social-row{position:relative;border-top:1px solid rgba(255,255,255,.14);padding:4px 12px 4px;text-align:center}.social-links{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:5px}.social-links a{display:inline-flex;align-items:center;justify-content:center;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.20);color:#fff;text-decoration:none;font-size:8px;font-weight:800;transition:transform .2s ease,background .2s ease}.social-links a:hover{transform:translateY(-2px);background:rgba(255,255,255,.24)}
.footer-bottom{position:relative;display:flex;justify-content:center;align-items:center;gap:10px;border-top:1px solid rgba(255,255,255,.10);padding:3px 12px;font-size:7px;color:#cceaea;text-align:center}.footer-bottom span:last-child{display:none}.footer-muted{color:#b9dede;font-size:8px}
@media(max-width:900px){.site-footer{width:100%;margin-left:0}.site-footer-center{padding:9px 14px 6px}.footer-contact-line{gap:4px 10px}.footer-social-row{padding:6px 12px 5px}.footer-bottom{padding:5px 12px;flex-direction:column;justify-content:center;text-align:center;gap:2px}}
@media print{.site-footer{display:none!important}}
.login-page{flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:25px 15px 0}.login-page .login-card{flex:none}.login-page .site-footer{width:calc(100% + 30px);margin:30px -15px 0}

/* V44: all public catalog pages use a true full-width footer. */
.public-catalog > .site-footer, body.public-catalog .site-footer{width:100%!important;margin-left:0!important;margin-right:0!important;max-width:none!important;position:relative;box-sizing:border-box;}
.public-catalog > main{width:100%;box-sizing:border-box;}

/* V37: remove duplicate sidebar branding; header is the single e-KLIK identity. */
.sidebar-brand{display:none!important}
.sidebar-scroll{padding-top:14px}
.footer-school{display:none!important}

/* V38 - Anggota moved into Master Data + robust submenu */
.nav-group.open > .nav-parent .nav-arrow{transform:rotate(180deg)}
.nav-group .nav-sub.open{display:block!important;animation:ekFadeUp .18s ease both}
.nav-group .nav-sub{overflow:hidden}
.nav-sub .subnav{padding-left:12px}


/* V39: Native HTML details/summary for Anggota submenu — no JS dependency. */
.nav-details{margin:0;padding:0;}
.nav-details>summary{list-style:none;cursor:pointer;}
.nav-details>summary::-webkit-details-marker{display:none;}
.nav-details[open]>summary .nav-arrow{transform:rotate(180deg);}
.nav-details .nav-sub-native{display:block!important;}
.nav-details:not([open]) .nav-sub-native{display:none!important;}
.nav-details .nav-sub-native{overflow:hidden;margin-bottom:5px;}
.nav-details .subnav{padding-left:12px;}
.nav-details>summary:focus-visible{outline:3px solid rgba(255,209,102,.75);outline-offset:2px;}

/* V40 - Katalog Perpustakaan pada Dashboard Admin & Semua User */
.dashboard-catalog{margin-top:24px;background:linear-gradient(135deg,#ffffff 0%,#f7fbff 48%,#fbf8ff 100%);border:1px solid rgba(30,105,120,.14);border-radius:22px;padding:24px;box-shadow:0 12px 35px rgba(26,71,83,.08);overflow:hidden;position:relative}
.dashboard-catalog:before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-70px;top:-90px;background:rgba(14,170,166,.10);pointer-events:none}
.dashboard-catalog-head{position:relative;display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px}
.dashboard-catalog-kicker{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.12em;color:#0eaaa6;margin-bottom:5px}
.dashboard-catalog-head h2{margin:0;color:#17323a;font-size:25px}
.dashboard-catalog-head p{margin:5px 0 0}
.catalog-collection-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;position:relative}
.collection-panel{border-radius:18px;padding:17px;background:#fff;border:1px solid #e3eaee;box-shadow:0 7px 20px rgba(30,70,80,.06);animation:catalogIn .55s ease both}
.collection-panel:nth-child(2){animation-delay:.08s}
.physical-collection{border-top:4px solid #0eaaa6}.digital-collection{border-top:4px solid #805ad5}
.collection-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.collection-head h3{margin:0;font-size:18px}.collection-head p{margin:4px 0 0;font-size:12px;color:#718087}.collection-head>a{font-size:12px;font-weight:800;color:#0e8f8b;text-decoration:none;white-space:nowrap}
.collection-books{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.collection-book{min-width:0;border:1px solid #e6edef;border-radius:14px;overflow:hidden;background:#fbfdfd;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.collection-book:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(20,70,80,.12);border-color:#b7dfe0}
.collection-cover{height:128px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eaf8f7,#f4efff);text-decoration:none;font-size:42px;overflow:hidden}
.collection-cover img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.collection-book:hover .collection-cover img{transform:scale(1.04)}
.collection-info{padding:10px}.collection-info>a{display:block;text-decoration:none;color:#17323a;line-height:1.3}.collection-info strong{font-size:13px}.collection-info small{display:block;color:#718087;font-size:11px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.collection-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}.collection-tags span{font-size:9px;padding:4px 6px;border-radius:999px;background:#e9f8f7;color:#167b78}.digital-collection .collection-tags span{background:#f0ebff;color:#6947b5}
.collection-empty{grid-column:1/-1;text-align:center;padding:22px;color:#718087;background:#f7fafb;border-radius:12px;font-size:13px}
@keyframes catalogIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:1000px){.catalog-collection-grid{grid-template-columns:1fr}.collection-books{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.dashboard-catalog{padding:18px}.dashboard-catalog-head{align-items:flex-start;flex-direction:column}.collection-books{grid-template-columns:1fr}.collection-cover{height:180px}}
@media(prefers-reduced-motion:reduce){.collection-panel,.collection-book,.collection-cover img{animation:none;transition:none}}

/* V42 - Katalog dashboard: digital di atas, fisik di bawah, kartu cover berjalan */
.dashboard-catalog{padding:22px}
.dashboard-catalog-head{margin-bottom:16px}
.catalog-collection-grid{display:flex;flex-direction:column;gap:18px}
.collection-panel{width:100%;box-sizing:border-box}
.collection-marquee{position:relative;overflow:hidden;width:100%;border-radius:14px}
.collection-track{display:flex;gap:14px;width:max-content;will-change:transform;animation:ekCatalogRun 34s linear infinite}
.collection-marquee:hover .collection-track{animation-play-state:paused}
.collection-book{flex:0 0 205px;width:205px}
.collection-cover{height:190px}
.collection-info{min-height:92px}
.digital-collection{order:1;border-top-color:#805ad5}
.physical-collection{order:2;border-top-color:#0eaaa6}
@keyframes ekCatalogRun{0%{transform:translateX(0)}100%{transform:translateX(calc(-50% - 7px))}}
/* Duplicate the track visually so the running row remains continuous */
.collection-track:after{content:"";display:block;flex:0 0 1px}
@media(max-width:700px){
 .dashboard-catalog{padding:16px}
 .collection-book{flex-basis:170px;width:170px}
 .collection-cover{height:165px}
 .collection-track{gap:10px;animation-duration:28s}
}
@media(prefers-reduced-motion:reduce){.collection-track{animation:none!important;overflow-x:auto;max-width:100%;padding-bottom:5px}.collection-marquee{overflow-x:auto}.collection-book{flex-shrink:0}}

/* V57 - Kreasi Cerpen & Puisi pada Beranda semua user, tepat di bawah Buku Fisik */
.creations-collection{order:3;border-top:4px solid #e66a9a}
.creations-collection .collection-head>a{color:#c3487c}
.creations-track{animation-duration:38s}
.creation-collection-book{background:#fffafb}
.creation-cover{background:linear-gradient(135deg,#fff0f6,#f2edff)}
.creation-cover img{object-fit:contain!important;background:#faf7fb}
.collection-creation-type{display:inline-block!important;width:max-content;margin-bottom:5px;padding:3px 7px;border-radius:999px;background:#f7e7f0;color:#b23f73;font-size:9px!important;font-weight:800}
.creations-collection .collection-tags span:first-child{background:#fff0f6;color:#b23f73}
.creations-collection .collection-tags span:last-child{background:#e8f7ef;color:#237a50}
@media(max-width:700px){.creations-track{animation-duration:30s}}


/* V59 - Login: nuansa hijau + ilustrasi perpustakaan transparan di background (tanpa file gambar eksternal) */
.login-page{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 15% 18%,rgba(14,170,166,.18),transparent 28%),
    radial-gradient(circle at 86% 22%,rgba(40,150,105,.15),transparent 30%),
    linear-gradient(135deg,#e9faf5 0%,#f5fbf8 46%,#e8f6ef 100%);
}
.login-page::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:.105;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center bottom 20px;
  background-size:min(1120px,92vw) auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 520'%3E%3Cg fill='none' stroke='%2308785f' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M120 455h960M155 455V105h890v350M120 105h960'/%3E%3Cpath d='M155 210h890M155 320h890'/%3E%3C/g%3E%3Cg fill='%2308785f' opacity='.95'%3E%3Crect x='190' y='128' width='48' height='78' rx='5'/%3E%3Crect x='252' y='145' width='42' height='61' rx='5'/%3E%3Crect x='309' y='120' width='55' height='86' rx='5'/%3E%3Crect x='382' y='137' width='43' height='69' rx='5'/%3E%3Crect x='445' y='126' width='58' height='80' rx='5'/%3E%3Crect x='520' y='150' width='40' height='56' rx='5'/%3E%3Crect x='577' y='118' width='52' height='88' rx='5'/%3E%3Crect x='646' y='142' width='44' height='64' rx='5'/%3E%3Crect x='705' y='124' width='57' height='82' rx='5'/%3E%3Crect x='778' y='148' width='42' height='58' rx='5'/%3E%3Crect x='836' y='120' width='53' height='86' rx='5'/%3E%3Crect x='906' y='137' width='43' height='69' rx='5'/%3E%3Crect x='965' y='126' width='58' height='80' rx='5'/%3E%3Crect x='190' y='238' width='43' height='74' rx='5'/%3E%3Crect x='247' y='230' width='56' height='82' rx='5'/%3E%3Crect x='317' y='248' width='40' height='64' rx='5'/%3E%3Crect x='371' y='224' width='58' height='88' rx='5'/%3E%3Crect x='444' y='242' width='46' height='70' rx='5'/%3E%3Crect x='505' y='229' width='54' height='83' rx='5'/%3E%3Crect x='574' y='245' width='43' height='67' rx='5'/%3E%3Crect x='633' y='226' width='58' height='86' rx='5'/%3E%3Crect x='706' y='240' width='44' height='72' rx='5'/%3E%3Crect x='765' y='228' width='54' height='84' rx='5'/%3E%3Crect x='835' y='246' width='42' height='66' rx='5'/%3E%3Crect x='893' y='225' width='58' height='87' rx='5'/%3E%3Crect x='965' y='241' width='43' height='71' rx='5'/%3E%3Crect x='192' y='350' width='58' height='80' rx='5'/%3E%3Crect x='266' y='365' width='43' height='65' rx='5'/%3E%3Crect x='325' y='346' width='52' height='84' rx='5'/%3E%3Crect x='394' y='360' width='45' height='70' rx='5'/%3E%3Crect x='455' y='344' width='57' height='86' rx='5'/%3E%3Crect x='528' y='369' width='42' height='61' rx='5'/%3E%3Crect x='586' y='350' width='56' height='80' rx='5'/%3E%3Crect x='657' y='363' width='44' height='67' rx='5'/%3E%3Crect x='716' y='345' width='56' height='85' rx='5'/%3E%3Crect x='787' y='367' width='42' height='63' rx='5'/%3E%3Crect x='845' y='349' width='57' height='81' rx='5'/%3E%3Crect x='917' y='362' width='44' height='68' rx='5'/%3E%3Crect x='976' y='346' width='51' height='84' rx='5'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='.62'%3E%3Ccircle cx='600' cy='75' r='34'/%3E%3Cpath d='M580 76h40M600 56v40' stroke='%2308785f' stroke-width='7'/%3E%3C/g%3E%3C/svg%3E");
}
.login-page::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(7,125,90,.08),transparent 32%,transparent 68%,rgba(14,170,166,.08));
}
.login-card{
  border:1px solid rgba(14,170,166,.18);
  box-shadow:0 24px 70px rgba(7,100,75,.16);
}
.login-card h1{color:#087d5f}
.login-brand-logo{border-color:#d7f2e8;box-shadow:0 10px 28px rgba(7,125,90,.15)}
.login-card .primary{background:linear-gradient(135deg,#0eaaa6,#087d5f)}
@media(max-width:700px){
  .login-page::before{background-size:900px auto;background-position:center bottom 70px;opacity:.075}
}