/* ==========================================
   দূরবীন — Reader-Friendly Library Stylesheet
   Inspired by classic bookshelves & warm reading rooms
   ========================================== */

/* ==========================================
   Custom Bangla Fonts
   ========================================== */

/* Nill Jannati Font - for headings */
@font-face {
  font-family: 'Nill Jannati';
  src: url('../fonts/NillJannati.woff2') format('woff2'),
       url('../fonts/NillJannati.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* SolaimanLipi Font - for body text */
@font-face {
  font-family: 'SolaimanLipi';
  src: url('../fonts/SolaimanLipi.woff2') format('woff2'),
       url('../fonts/SolaimanLipi.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* === Light Mode (Default) === */
  --shelf-dark: #2c1810;
  --shelf: #3d2317;
  --shelf-mid: #5c3a28;
  --primary: #4a2c17;
  --primary-l: #8b5e3c;
  --accent: #c2703e;
  --accent-l: #e8915a;
  --gold: #d4a843;
  --gold-l: #f0d878;
  --gold-d: #b8860b;
  --parchment: #faf6f0;
  --parchment-d: #f0e8da;
  --cream: #fffdf7;
  /* Status Colors */
  --ok: #5a9a6b;
  --ok-l: #e8f5e9;
  --err: #c0392b;
  --err-l: #fdecea;
  --warn: #d4a843;
  --warn-l: #fdf6e3;
  --info: #5b8fa8;
  --info-l: #e8f4f8;
  /* Neutrals */
  --bg: #faf6f0;
  --bg2: #f3ece2;
  --card: #fffdf8;
  --text: #2c1810;
  --text2: #6b5344;
  --text3: #9a8578;
  --border: #e8ddd0;
  --shadow: 0 2px 8px rgba(44,24,16,.06), 0 4px 16px rgba(44,24,16,.04);
  --shadow-lg: 0 8px 32px rgba(44,24,16,.1), 0 2px 8px rgba(44,24,16,.06);
  --glow: 0 0 30px rgba(212,168,67,.15);
  --r: 14px;
  --r-sm: 8px;
  --r-lg: 20px;
  --font: 'Noto Sans Bengali', 'SolaimanLipi', sans-serif;
  --font2: 'Inter', sans-serif;
  --ease: cubic-bezier(.4,0,.2,1);
  --white: #FFFFFF;
  --gray-light: #f5f5f5;
  --gray-border: #e5e5e5;
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --accent-gold: #d4a574;
}


*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden}
body{font-family:var(--font);color:var(--text-primary);background:var(--bg);line-height:1.75;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;max-width:100vw;width:100%}
/* Small text readability */
p{font-size:1rem;line-height:1.75;color:var(--text-secondary)}
small{font-size:0.9rem;color:var(--text-secondary)}
table{max-width:100%}
a{color:var(--accent);text-decoration:none;transition:.2s var(--ease)}
a:hover{color:var(--gold)}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.muted{color:var(--text2);font-style:italic;font-size:.9rem}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 26px;border:2px solid transparent;border-radius:var(--r-sm);font-family:var(--font);font-size:.95rem;font-weight:600;cursor:pointer;transition:.25s var(--ease);white-space:nowrap;text-decoration:none;position:relative;overflow:hidden}
.btn:active{transform:scale(.97)}
.btn-gold{background: linear-gradient(135deg, #FDD835 0%, #F9A825 100%);color:var(--shelf-dark);border-color:transparent;border:none;border-radius:12px;box-shadow:0 4px 12px rgba(253,216,53,0.3),inset 0 1px 0 rgba(255,255,255,0.3)}
.btn-gold:hover{box-shadow:var(--glow),0 4px 20px rgba(212,168,67,.25);transform:translateY(-2px);color:var(--shelf-dark)}
.btn-dark{background:var(--primary);color:#fff}
.btn-dark:hover{background:var(--primary-l);color:#fff;transform:translateY(-2px)}
.btn-outline{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn-outline:hover{background:var(--accent);color:#fff}
.btn-glass{background:rgba(255,255,255,.15);color:#fff;border:1.5px solid rgba(255,255,255,.25);backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(255,255,255,.25);color:#fff}
.btn-lg{padding:14px 34px;font-size:1.05rem;border-radius:var(--r)}
.btn-block{width:100%}
.btn-back{background:none;border:none;color:var(--accent);font-family:var(--font);font-size:1rem;font-weight:600;cursor:pointer;padding:12px 0;display:inline-flex;align-items:center;gap:6px}
.btn-back:hover{color:var(--gold)}
.btn-row{display:flex;gap:12px;margin-top:20px}.btn-row .btn{flex:1}

/* ---- Ripple ---- */
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}

/* ---- Navbar ---- */
.navbar{position:fixed;top:0;left:0;right:0;z-index:900;background:rgba(250,246,240,.94);backdrop-filter:blur(24px) saturate(1.6);border-bottom:1px solid var(--border);transition:.3s var(--ease)}
.navbar.scrolled{box-shadow:0 4px 24px rgba(44,24,16,.08)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:72px}
.nav-logo{display:flex;align-items:center;gap:12px;color:var(--primary)}
.logo-img{height:40px;width:auto;border-radius:6px;object-fit:contain}
.hero-logo{width:80px;height:80px;border-radius:16px;object-fit:contain;margin:0 auto 16px;filter:brightness(0) invert(1)}
.logo-icon{width:42px;height:42px;background:linear-gradient(135deg,var(--accent),var(--accent-l));border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center}
.logo-icon.hidden{display:none}
.logo-icon i{color:#fff;font-size:1.1rem}
.logo-name{font-weight:700;font-size:1.1rem;display:block;line-height:1.2;color:var(--shelf-dark)}
.logo-tagline{font-size:.7rem;color:var(--text2);display:block}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none}
.nav-link{padding:9px 18px;border-radius:var(--r-sm);font-weight:500;color:var(--text);transition:.2s var(--ease);font-size:.92rem;position:relative}
.nav-link::after{content:'';position:absolute;bottom:4px;left:18px;right:18px;height:2px;background:linear-gradient(90deg,var(--accent),var(--gold));border-radius:2px;transform:scaleX(0);transition:transform .25s var(--ease)}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.nav-link:hover,.nav-link.active{color:var(--accent);background:rgba(194,112,62,.06)}
.nav-cta{background:linear-gradient(135deg,var(--accent),var(--accent-l));color:#fff!important;border-radius:var(--r-sm);padding:9px 22px}
.nav-cta::after{display:none}
.nav-cta:hover{opacity:.9;color:#fff!important}
.nav-cta-outline{background:transparent;border:1.5px solid var(--err);color:var(--err)!important}
.nav-cta-outline::after{display:none}
.nav-cta-outline:hover{background:var(--err);color:#fff!important}
.nav-toggle{display:none;background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--text);width:40px;height:40px;border-radius:var(--r-sm);transition:.2s var(--ease);align-items:center;justify-content:center}
.nav-toggle:hover{background:rgba(194,112,62,.08);color:var(--accent)}

/* Mobile Overlay */
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(44,24,16,.5);z-index:899;backdrop-filter:blur(4px);opacity:0;transition:opacity .3s var(--ease)}
.nav-overlay.active{display:block;opacity:1}

/* Hide mobile menu elements on desktop */
.nav-links-brand,.nav-links-close{display:none}

@media(max-width:768px){
  .nav-inner{padding:0 16px;height:64px}
  .nav-toggle{display:flex}
  .logo-img{height:34px}
  .logo-name{font-size:1rem}
  .logo-tagline{display:none}

  /* Mobile Slide-in Menu - Compact Design */
  .nav-links{position:fixed;top:64px;right:16px;width:260px;max-width:calc(100vw - 32px);background:var(--cream);flex-direction:column;padding:8px 0;gap:0;transform:translateX(120%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 32px rgba(44,24,16,.15);z-index:901;border-radius:12px;border:1px solid var(--border);list-style:none;max-height:calc(100vh - 80px)}
  .nav-links.open{transform:translateX(0)}
  
  /* Menu items - compact */
  .nav-links li{display:block;width:100%;list-style:none}
  .nav-link{display:flex !important;align-items:center;gap:10px;width:100%;text-align:left;padding:12px 20px;border-radius:0;font-size:.92rem;border-bottom:1px solid var(--border);color:var(--text);font-weight:500;transition:.2s}
  .nav-link::after{display:none}
  .nav-link:hover,.nav-link.active{background:rgba(194,112,62,.08);color:var(--accent)}
  .nav-link i{width:20px;text-align:center;color:var(--accent);font-size:.9rem}
  
  /* Login/Logout buttons */
  .nav-cta{margin:8px 12px !important;width:calc(100% - 24px) !important;text-align:center;justify-content:center;border-radius:var(--r-sm) !important;padding:10px 16px !important;border-bottom:none !important;font-size:.9rem}
  .nav-cta-outline{margin-top:4px !important}
  
  /* Hide scroll if not needed */
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links{-ms-overflow-style:none;scrollbar-width:none}
  
  /* Logged in state - show all items */
  .nav-links li[style*="display:none"]{display:none !important}
}

/* Body scroll lock when menu open */
body.menu-open{overflow:hidden}
body.menu-open .nav-overlay{display:block;opacity:1}

/* ---- Pages ---- */
.page{display:none;padding-top:72px;min-height:calc(100vh - 72px);animation:fadeUp .4s var(--ease)}
.page.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.pg-top{padding-top:40px}

/* ---- Section ---- */
.section{padding:70px 0}
.section-alt{background:var(--bg2)}
.sec-header{text-align:center;margin-bottom:48px}
.sec-title{font-size:1.9rem;color:var(--primary);font-weight:700;position:relative;display:inline-block;padding-bottom:12px}
.sec-title i{color:var(--gold);margin-right:8px}
.sec-title::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80px;height:3px;background:linear-gradient(90deg,var(--accent),var(--gold));border-radius:3px}
.sec-sub{color:var(--text2);margin-top:16px;font-size:1rem}

/* ---- Hero ---- */
.hero{position:relative;background:linear-gradient(160deg,var(--shelf-dark) 0%,var(--shelf) 30%,var(--shelf-mid) 60%,var(--primary) 85%,var(--shelf-dark) 100%);color:#fff;padding:80px 24px 100px;text-align:center;overflow:hidden;min-height:auto;display:flex;align-items:center;justify-content:center}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);z-index:3}
/* Wave divider — clean separation, no muddy gradient */
.hero::after{content:'';position:absolute;bottom:-1px;left:-5%;right:-5%;height:70px;background:var(--bg);border-radius:50% 50% 0 0 / 100% 100% 0 0;z-index:2}
/* Subtle book pattern overlay */
.hero-orbs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.12;animation:orbFloat 14s ease-in-out infinite}
.orb-1{width:600px;height:600px;background:var(--gold);top:-250px;right:-150px}
.orb-2{width:400px;height:400px;background:var(--accent);bottom:-120px;left:-100px;animation-delay:3s}
.orb-3{width:300px;height:300px;background:var(--gold-l);top:35%;left:3%;animation-delay:6s}
.orb-4{width:250px;height:250px;background:#a0522d;bottom:15%;right:10%;animation-delay:9s}
/* Floating book decorative elements */
.hero-decor-left,.hero-decor-right{position:absolute;z-index:1;opacity:.05;font-size:14rem;pointer-events:none}
.hero-decor-left{left:2%;top:18%;transform:rotate(-12deg)}
.hero-decor-right{right:2%;bottom:20%;transform:rotate(8deg)}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-30px) scale(1.05)}66%{transform:translate(-20px,20px) scale(.95)}}
.hero-content{position:relative;z-index:2;max-width:740px;margin:0 auto;padding-top:10px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 22px;border-radius:24px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);font-size:.82rem;font-weight:500;margin-bottom:22px;backdrop-filter:blur(10px);animation:badgePulse 3s ease-in-out infinite}
.hero-badge i{color:var(--gold);font-size:.8rem}
@keyframes badgePulse{0%,100%{border-color:rgba(255,255,255,.1)}50%{border-color:rgba(212,168,67,.3)}}
.hero-h1{font-family: 'Hind Siliguri', 'Noto Sans Bengali', sans-serif; background: linear-gradient(135deg, var(--gold), var(--gold-l)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 700; line-height: 1.6; padding-top: 15px; margin-bottom: 12px; letter-spacing: 0.01em; filter: drop-shadow(2px 2px 10px rgba(0,0,0,0.3)); display: block; overflow: visible}
.hero-p{font-family: 'SolaimanLipi', 'UN Bangla', 'Noto Sans Bengali', sans-serif; font-size: clamp(0.9rem, 2vw, 1.05rem); color: #ffffff; opacity: 1; margin-bottom: 30px; line-height: 1.7; max-width: 620px; margin-left: auto; margin-right: auto; font-weight: 400}
.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.hero-btns .btn{padding:12px 28px;font-size:0.95rem;border-radius:var(--r);box-shadow:0 4px 16px rgba(0,0,0,.15)}
.hero-btns .btn:hover{box-shadow:0 6px 24px rgba(0,0,0,.25);transform:translateY(-2px)}
.hero-btns .btn i{font-size:.9rem}
/* Stats counter with card look */
.hero-stats{display:inline-flex;align-items:center;justify-content:center;gap:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:0;backdrop-filter:blur(10px);overflow:hidden}
.hs{text-align:center;min-width:100px;padding:18px 24px;position:relative}
.hs:not(:last-child)::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:rgba(255,255,255,.1)}
.hs-num{display:block;font-size:1.8rem;font-weight:700;color:var(--gold);font-family:var(--font2)}
.hs-lbl{font-size:.82rem;opacity:.6;margin-top:2px}
.hs-divider{display:none}

/* ---- Scroll Animations ---- */
.scroll-anim{opacity:0;transform:translateY(30px);transition:all .6s cubic-bezier(.4,0,.2,1)}
.scroll-anim.visible{opacity:1;transform:translateY(0)}
.scroll-anim:nth-child(2){transition-delay:.1s}
.scroll-anim:nth-child(3){transition-delay:.15s}
.scroll-anim:nth-child(4){transition-delay:.2s}
.scroll-anim:nth-child(5){transition-delay:.25s}

/* ---- Steps ---- */
.steps-row{display:flex;align-items:stretch;justify-content:center;gap:12px;flex-wrap:wrap}
.step-card{background:var(--card);border-radius:var(--r);padding:32px 24px;text-align:center;box-shadow:var(--shadow);flex:1;min-width:200px;max-width:250px;transition:.3s var(--ease);position:relative;border:1px solid var(--border);cursor:pointer;user-select:none;display:flex;flex-direction:column}
.step-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--gold)}
.step-card:active{transform:scale(0.96) translateY(-4px)}
.step-card:hover .step-ic{transform:scale(1.1) rotate(5deg)}
.step-num{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:30px;height:30px;background: linear-gradient(135deg, #FDD835 0%, #F9A825 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;color:var(--shelf-dark);font-family:var(--font)}
.step-ic{width:56px;height:56px;background:linear-gradient(135deg,var(--accent),var(--accent-l));border-radius:14px;display:flex;align-items:center;justify-content:center;margin:12px auto 16px;transition:transform .3s var(--ease);flex-shrink:0}
.step-ic i{color:#fff;font-size:1.3rem}
.step-card h3{font-size:1.1rem;color:var(--primary);margin-bottom:8px;font-weight:600;font-family:var(--font)}
.step-card p{font-size:.92rem;color:var(--text2);line-height:1.6;font-family:var(--font);flex:1}
.step-arrow{color:var(--text3);font-size:1.2rem;margin-top:60px}
.step-text{flex:1;min-width:0}

/* Mobile: Vertical Timeline */
@media(max-width:768px){
  .steps-row{flex-direction:column;align-items:stretch;gap:0;max-width:480px;margin:0 auto}
  .step-card{display:flex;align-items:center;gap:16px;padding:20px;min-width:0;max-width:100%;text-align:left;border-left:4px solid var(--accent);position:relative;margin-left:20px;border-radius:12px;margin-bottom:12px}
  .step-card:active{transform:scale(0.98)}
  .step-card::before{content:'';position:absolute;left:-28px;top:50%;transform:translateY(-50%);width:12px;height:12px;background:var(--accent);border-radius:50%;border:3px solid var(--bg);box-shadow:0 0 0 2px var(--accent)}
  .step-card::after{content:'';position:absolute;left:-23px;top:calc(50% + 12px);bottom:-12px;width:2px;background:var(--border)}
  .step-card:last-child::after{display:none}
  .step-num{position:static;transform:none;width:28px;height:28px;font-size:.85rem;flex-shrink:0;margin:0}
  .step-ic{width:48px;height:48px;margin:0;border-radius:12px;flex-shrink:0}
  .step-ic i{font-size:1.1rem}
  .step-text h3{font-size:1.05rem;margin-bottom:4px}
  .step-text p{font-size:.88rem;line-height:1.5}
  .step-arrow{display:none}
}

/* ---- Benefits ---- */
.benefit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px}
.benefit-card{background:var(--card);border-radius:var(--r);padding:28px 20px;text-align:center;box-shadow:var(--shadow);border:1px solid var(--border);transition:.3s var(--ease)}
.benefit-card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.benefit-card:hover .b-icon{transform:rotateY(180deg)}
.b-icon{width:48px;height:48px;background: linear-gradient(135deg, #FDD835 0%, #F9A825 100%);border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;transition:transform .5s ease}
.b-icon i{font-size:1.2rem;color:var(--shelf-dark)}
.benefit-card h3{font-size:1.1rem;color:var(--primary);margin-bottom:8px;font-weight:600;font-family:var(--font)}
.benefit-card p{font-size:0.95rem;color:var(--text2);line-height:1.7;font-family:var(--font)}

/* ---- Pricing ---- */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;max-width:700px;margin:0 auto}
.price-card{background:var(--card);border-radius:var(--r-lg);padding:0;text-align:center;box-shadow:var(--shadow);position:relative;transition:.3s var(--ease);border:2px solid var(--border);overflow:visible;min-height:420px;display:flex;flex-direction:column}
.price-card-inner{padding:42px 28px 28px;flex:1;display:flex;flex-direction:column}
/* Top gradient accent line */
.price-card::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--accent),var(--gold),var(--accent));border-radius:var(--r-lg) var(--r-lg) 0 0;opacity:0;transition:.3s}
.price-card:hover::before{opacity:1}
.price-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
/* Popular card */
.price-pop{border-color:var(--gold);transform:scale(1.03);box-shadow:var(--glow),0 4px 24px rgba(212,168,67,.1)}
.price-pop::before{opacity:1}
.price-pop:hover{transform:scale(1.03) translateY(-8px)}
.price-pop .price-card-inner{padding-top:56px}
/* Ribbon badge - properly positioned */
.price-ribbon{position:absolute;top:-1px;left:50%;transform:translateX(-50%);padding:6px 28px;border-radius:0 0 14px 14px;font-size:.85rem;font-weight:600;color:#fff;background:var(--accent);white-space:nowrap;z-index:3;letter-spacing:.5px;font-family:var(--font)}
.price-pop .price-ribbon{background: linear-gradient(135deg, #FDD835 0%, #F9A825 100%);color:var(--shelf-dark)}
/* Pop badge - single badge only on popular card */
.pop-badge{position:absolute;top:12px;right:12px;background:var(--gold);color:var(--shelf-dark);padding:3px 12px;border-radius:10px;font-size:.8rem;font-weight:600;white-space:nowrap;z-index:3;font-family:var(--font)}
.price-card h3{font-size:1.4rem;color:var(--primary);margin:0 0 6px;font-weight:700;font-family:var(--font)}
.price-age{color:var(--text2);font-size:1rem;margin-bottom:0;font-weight:500;font-family:var(--font)}
/* Price value - highlighted background box */
.price-val{margin:20px -28px;padding:22px 28px;background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-family:var(--font)}
.price-cur{font-size:1.1rem;color:var(--gold-d);vertical-align:super;margin-right:2px;font-weight:700}
.price-num{font-size:2.8rem;font-weight:800;color:var(--primary);line-height:1}
.price-per{font-size:.95rem;color:var(--text2);margin-left:2px;font-weight:500}
/* Feature list */
.price-feat{list-style:none;text-align:left;margin:20px 0;flex:1;padding:0}
.price-feat li{padding:10px 0;font-size:0.95rem;display:flex;align-items:center;gap:10px;line-height:1.6;color:var(--text2);font-family:var(--font)}
.price-feat li+li{border-top:1px solid var(--border)}
.price-feat li i{color:var(--gold);font-size:.6rem;width:18px;height:18px;background:linear-gradient(135deg,rgba(212,168,67,.15),rgba(240,216,120,.15));border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* Button */
.price-card .btn{margin-top:auto;padding:12px 24px;border-radius:var(--r);font-size:.92rem}
.price-card .btn i{font-size:.8rem}

/* Payment box */
.pay-box{max-width:520px;margin:32px auto 0;background:var(--card);border-radius:var(--r);padding:24px;box-shadow:var(--shadow);border-left:4px solid var(--gold);display:flex;gap:16px;align-items:flex-start;transition:.3s var(--ease)}
.pay-box:hover{box-shadow:var(--shadow-lg);transform:translateX(4px)}
.pay-icon{width:44px;height:44px;background:var(--gold-l);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pay-icon i{font-size:1.2rem;color:var(--gold-d)}
.pay-box h3{color:var(--primary);font-size:1.1rem;margin-bottom:6px;font-weight:600;font-family:var(--font)}
.pay-phone{font-family:var(--font);font-size:1.4rem;color:var(--accent);user-select:all;font-weight:700}
.pay-note{font-size:.92rem;color:var(--text2);margin-top:6px;font-family:var(--font)}

/* ---- Rules ---- */
.rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;align-items:stretch}
.rule-card{background:var(--card);border-radius:var(--r);padding:32px 24px;box-shadow:var(--shadow);border:1px solid var(--border);transition:.3s var(--ease);display:flex;flex-direction:column;align-items:center;text-align:center;height:100%}
.rule-card:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:var(--shadow-lg)}
.r-icon{width:56px;height:56px;background:var(--info-l);border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:transform .3s var(--ease);flex-shrink:0}
.rule-card:hover .r-icon{transform:scale(1.1) rotate(5deg)}
.r-icon i{font-size:1.4rem;color:var(--info)}
.rule-card h3{font-size:1.15rem;color:var(--primary);margin-bottom:12px;font-weight:700;font-family:var(--font)}
.rule-card p{font-size:0.95rem;color:var(--text2);line-height:1.7;font-family:var(--font);flex:1}

/* ---- Filter Bar ---- */
.filter-bar{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px;padding:18px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);border:1px solid var(--border)}
.search-box{flex:1;min-width:240px;position:relative}
.search-box i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text3)}
.search-box input{width:100%;padding:11px 14px 11px 40px;border:2px solid var(--border);border-radius:var(--r-sm);font-family:var(--font);font-size:.92rem;background:var(--parchment);transition:.2s var(--ease);color:var(--text)}
.search-box input:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(194,112,62,.1)}
.filter-opts{display:flex;gap:8px;flex-wrap:wrap}
.filter-opts select{padding:11px 14px;border:2px solid var(--border);border-radius:var(--r-sm);font-family:var(--font);font-size:.92rem;background:var(--parchment);cursor:pointer;transition:.2s var(--ease);color:var(--text)}
.filter-opts select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(194,112,62,.1)}

/* ---- Book Grid ---- */
/* ---- Book Grid (Rokomari Style) ---- */
.book-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Mobile: 2 columns */
  gap: 12px;
  padding: 10px 0;
}

@media (min-width: 640px) {
  .book-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

@media (min-width: 1024px) {
  .book-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

@media (min-width: 1200px) {
  .book-grid { grid-template-columns: repeat(5, 1fr); }
}

.book-card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: 1px solid var(--border);
  transition: all 0.2s var(--ease);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.book-card:active {
  transform: scale(0.98);
}

@media (min-width: 1024px) {
  .book-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-color: var(--gold);
  }
}

/* Cover Wrapper */
.book-cover-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: linear-gradient(135deg, var(--shelf), var(--shelf-dark));
}

.book-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  opacity: 0; /* For fade-in effect */
}

.book-cover-img.loaded {
  opacity: 1;
}

.book-card:hover .book-cover-img {
  transform: scale(1.05);
}

/* Stock Badge (Mobile Optimized) */
.stock-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  z-index: 5;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  backdrop-filter: blur(4px);
}

@media (min-width: 768px) {
  .stock-badge { font-size: 11px; padding: 4px 10px; }
}

.in-stock { background: #10b981; color: #fff; }
.out-stock { background: #ef4444; color: #fff; }

.book-status-text.in-stock { color: #10b981; background: none; }
.book-status-text.out-stock { color: #ef4444; background: none; }

/* Card Info */
.book-info {
  padding: 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
}

@media (min-width: 768px) {
  .book-info { padding: 15px; gap: 6px; }
}

.book-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em; /* Fixed height for consistency */
}

@media (min-width: 768px) {
  .book-title { font-size: 15px; }
}

.book-author {
  font-size: 11px;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
}

@media (min-width: 768px) {
  .book-author { font-size: 13px; }
}

/* Meta Info (Hidden on Mobile) */
.book-meta-grid {
  display: none; /* Hidden on mobile */
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

@media (min-width: 768px) {
  .book-meta-grid { display: grid; }
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text3);
}

.meta-full { grid-column: span 2; }

/* Status Text */
.book-status-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--ok);
  margin-top: auto;
}

.book-status-text.occupied { color: var(--err); }

@media (min-width: 768px) {
  .book-status-text { font-size: 12px; }
}

/* Action Button (Rokomari Style) */
.book-action-btn {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  border: none;
  background: linear-gradient(135deg, var(--gold), var(--gold-d));
  color: var(--shelf-dark);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
}

@media (min-width: 768px) {
  .book-action-btn { padding: 10px; font-size: 14px; min-height: 42px; }
}

.book-action-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 12px rgba(212, 168, 67, 0.3);
}

.book-action-btn:active { transform: scale(0.96); }

.book-action-btn:disabled {
  background: #e0e0e0;
  color: #9e9e9e;
  cursor: not-allowed;
  box-shadow: none;
}

/* Mobile Filter Bar Sticky & Compact */
@media (max-width: 768px) {
  .filter-bar {
    position: sticky;
    top: 72px; /* Navbar height */
    z-index: 100;
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-radius: 0 0 12px 12px;
  }
  
  .search-box {
    min-width: 0;
    width: 100%;
  }
  
  .search-box input {
    padding: 8px 12px 8px 34px;
    font-size: 14px;
  }
  
  .filter-opts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  
  .filter-opts select {
    padding: 8px;
    font-size: 13px;
    width: 100%;
  }
}

.meta-item i {
  width: 14px;
  color: var(--accent-gold);
  opacity: 0.8;
}

.meta-full {
  grid-column: span 2;
}

/* Button */
.book-action-btn {
  width: 100%;
  margin-top: auto;
  padding: 11px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  background: linear-gradient(135deg, var(--gold), var(--gold-d));
  color: var(--shelf-dark);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.book-action-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 12px rgba(212, 168, 67, 0.3);
}

.book-action-btn:disabled {
  background: #e0e0e0;
  color: #9e9e9e;
  cursor: not-allowed;
  box-shadow: none;
}

/* Skeleton Loading */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-card {
  height: 380px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #eee;
  padding: 16px;
}

.skeleton-img { height: 200px; border-radius: 12px; margin-bottom: 12px; }
.skeleton-title { height: 20px; width: 80%; border-radius: 4px; margin-bottom: 10px; }
.skeleton-text { height: 14px; width: 60%; border-radius: 4px; margin-bottom: 20px; }
.skeleton-btn { height: 40px; border-radius: 10px; }


/* ---- Book Detail ---- */
.bk-detail{display:grid;grid-template-columns:280px 1fr;gap:40px;padding:20px 0}
.bk-cover-lg{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:2/3;width:100%;max-width:320px;margin:0 auto;background:linear-gradient(135deg,var(--shelf),var(--accent));display:flex;align-items:center;justify-content:center}
.bk-cover-lg img{width:100%;height:100%;object-fit:cover}
.bk-cover-ph-lg{color:#fff;text-align:center;padding:20px}
.bk-cover-ph-lg i{font-size:4rem;opacity:.4;display:block;margin-bottom:10px}
.bk-info-lg h2{font-size:1.7rem;color:var(--primary);margin-bottom:8px}
.bk-author-lg{font-size:1.05rem;color:var(--text2);margin-bottom:20px}
.bk-metas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.bk-mi{display:flex;align-items:center;gap:8px;padding:9px 16px;background:var(--bg2);border-radius:var(--r-sm);font-size:.88rem;transition:.2s var(--ease)}
.bk-mi:hover{background:var(--info-l)}
.bk-mi i{color:var(--gold)}
.st-ind{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:var(--r-sm);font-weight:600}
.st-ok{background:var(--ok-l);color:var(--ok)}
.st-no{background:var(--err-l);color:var(--err)}
.borrow-calc{background:var(--bg2);border-radius:var(--r);padding:20px;margin:20px 0;border:1px solid var(--border)}
.borrow-calc h4{color:var(--primary);margin-bottom:10px}
.borrow-calc p{color:var(--text2);font-size:.88rem;margin-bottom:4px}
@media(max-width:768px){.bk-detail{grid-template-columns:1fr}.bk-cover-lg{aspect-ratio:2/3;max-width:280px}}

/* ---- Auth ---- */
.auth-wrap{display:flex;justify-content:center;min-height:calc(100vh - 180px);align-items:center;padding:40px 0}
.auth-card{background:var(--card);border-radius:var(--r-lg);padding:40px;width:100%;max-width:440px;box-shadow:var(--shadow-lg);border:1px solid var(--border);position:relative;overflow:hidden}
.auth-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent),var(--gold),var(--accent))}
.auth-head{text-align:center;margin-bottom:28px}
.auth-icon{width:56px;height:56px;background:linear-gradient(135deg,var(--accent),var(--accent-l));border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.auth-icon i{font-size:1.4rem;color:#fff}
.auth-head h2{color:var(--primary);margin-bottom:4px}
.auth-head p{color:var(--text2);font-size:.9rem}
.auth-form .fg{margin-bottom:16px}
.auth-form label{display:block;font-weight:600;font-size:.85rem;margin-bottom:5px;color:var(--text)}
.auth-form label i{color:var(--gold);margin-right:5px}
.auth-form input,.auth-form select,.auth-form textarea{width:100%;padding:11px 14px;border:2px solid var(--border);border-radius:var(--r-sm);font-family:var(--font);font-size:.92rem;background:var(--parchment);transition:.2s var(--ease);color:var(--text)}
.auth-form input:focus,.auth-form select:focus,.auth-form textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(194,112,62,.1)}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:44px}
.pw-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text3);cursor:pointer}
.auth-foot{text-align:center;margin-top:18px;font-size:.88rem;color:var(--text2)}
.auth-foot a{font-weight:600}

/* ---- Form Helpers ---- */
.fg{margin-bottom:16px}
.fg label{display:block;font-weight:600;font-size:.85rem;margin-bottom:5px}
.fg label i{color:var(--gold);margin-right:5px}
.fg input,.fg select,.fg textarea{width:100%;padding:11px 14px;border:2px solid var(--border);border-radius:var(--r-sm);font-family:var(--font);font-size:.92rem;background:var(--parchment);transition:.2s var(--ease);color:var(--text)}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(194,112,62,.1)}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-hint{background:var(--info-l);color:var(--info);padding:12px 16px;border-radius:var(--r-sm);font-size:.85rem;margin-bottom:18px}
.form-hint i{margin-right:5px}
.radio-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rcard{cursor:pointer}
.rcard input{display:none}
.rcard-in{padding:14px;border:2px solid var(--border);border-radius:var(--r-sm);text-align:center;transition:.2s var(--ease)}
.rcard input:checked+.rcard-in{border-color:var(--accent);background:rgba(194,112,62,.04)}
.rcard-t{display:block;font-weight:600;color:var(--primary);font-size:.9rem}
.rcard-d{font-size:.78rem;color:var(--text2)}
.file-up{border:2px dashed var(--border);border-radius:var(--r);padding:28px;text-align:center;cursor:pointer;transition:.2s var(--ease)}
.file-up:hover{border-color:var(--accent);background:rgba(194,112,62,.02)}
.file-up-in i{font-size:2.2rem;color:var(--text3);margin-bottom:8px;display:block}
.file-up-in p{color:var(--text);font-weight:500;font-size:.9rem}
.file-up-in span{font-size:.78rem;color:var(--text3)}
.file-up-prev{position:relative;display:inline-block}
.file-up-prev img{max-height:180px;border-radius:var(--r-sm)}
.prev-rm{position:absolute;top:-8px;right:-8px;background:var(--err);color:#fff;border:none;width:26px;height:26px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.75rem}

/* Form Steps */
.fsteps{display:flex;justify-content:center;margin-bottom:36px}
.fstep{display:flex;flex-direction:column;align-items:center;position:relative;flex:1}
.fstep:not(:last-child)::after{content:'';position:absolute;top:16px;left:50%;width:100%;height:2px;background:var(--border);z-index:0}
.fstep.active:not(:last-child)::after{background:var(--accent)}
.fstep-c{width:34px;height:34px;border-radius:50%;background:var(--border);color:var(--text2);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.82rem;position:relative;z-index:1;transition:.2s var(--ease)}
.fstep.active .fstep-c{background:var(--accent);color:#fff}
.fstep.done .fstep-c{background:var(--ok);color:#fff}
.fstep-l{font-size:.72rem;margin-top:6px;color:var(--text3)}
.fstep.active .fstep-l{color:var(--accent);font-weight:600}
.fpanel{display:none;max-width:520px;margin:0 auto}
.fpanel.active{display:block;animation:fadeUp .3s var(--ease)}
.fpanel h3{color:var(--primary);margin-bottom:18px;font-size:1.15rem}

/* Payment instruction */
.pay-instruct{background:var(--bg2);border-radius:var(--r);padding:24px;margin-bottom:22px;border:1px solid var(--border)}
.pay-qr{text-align:center;margin-bottom:14px}
.pay-qr i{font-size:2rem;color:var(--gold);margin-bottom:4px}
.pay-big{font-family:var(--font2);font-size:1.8rem;font-weight:700;color:var(--accent);user-select:all}
.pay-steps p{padding:4px 0;font-size:.88rem}
.pay-amt{margin-top:14px;padding:14px;background:var(--card);border-radius:var(--r-sm);text-align:center}
.amt-val{font-size:2rem;font-weight:700;color:var(--gold-d);display:block;margin-top:4px;font-family:var(--font2)}
.mem-wrap{max-width:580px;margin:0 auto}
.mem-notice{text-align:center;padding:60px 20px}
.mem-notice i{font-size:3rem;color:var(--text3);display:block;margin-bottom:14px}
.mem-notice h3{color:var(--primary);margin-bottom:8px}
.mem-notice p{color:var(--text2);margin-bottom:18px}

/* ---- Dashboard ---- */
.dash{display:grid;grid-template-columns:250px 1fr;gap:28px;padding:24px 0;min-height:calc(100vh - 180px)}
.dash-side{background:var(--card);border-radius:var(--r);padding:24px 14px;box-shadow:var(--shadow);border:1px solid var(--border);height:fit-content;position:sticky;top:96px}
.dash-user{text-align:center;padding-bottom:18px;border-bottom:1px solid var(--border);margin-bottom:12px}
.dash-avatar{width:56px;height:56px;background:linear-gradient(135deg,var(--accent),var(--accent-l));border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.dash-avatar i{font-size:1.4rem;color:#fff}
.dash-user h3{font-size:.95rem;color:var(--primary)}
.dash-badge{display:inline-block;padding:3px 12px;border-radius:12px;font-size:.72rem;font-weight:600;margin-top:4px;background:var(--bg2);color:var(--text2)}
.dash-badge.b-ok{background:var(--ok-l);color:var(--ok)}
.dash-badge.b-wait{background:var(--warn-l);color:var(--warn)}
.dash-badge.b-exp{background:var(--err-l);color:var(--err)}
.dash-nav{list-style:none}
.dlink{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--r-sm);color:var(--text);font-weight:500;cursor:pointer;transition:.2s var(--ease);font-size:.88rem;text-decoration:none;position:relative}
.dlink::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:0;background:var(--gold);border-radius:3px;transition:.2s var(--ease)}
.dlink:hover,.dlink.active{background:rgba(194,112,62,.06);color:var(--accent)}
.dlink:hover::before,.dlink.active::before{height:60%}
.dlink i{width:18px;text-align:center}
.dash-main{min-width:0}
.dtitle{font-size:1.3rem;color:var(--primary);margin-bottom:22px;padding-bottom:10px;border-bottom:2px solid var(--border)}
.dtitle i{color:var(--gold);margin-right:8px}
.dtab{display:none}.dtab.active{display:block;animation:fadeUp .3s var(--ease)}

/* Stats Row */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:28px}
.scard{background:var(--card);border-radius:var(--r);padding:18px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow);border:1px solid var(--border);transition:.3s var(--ease)}
.scard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.sc-ic{width:42px;height:42px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center}
.sc-ic i{font-size:1.1rem;color:#fff}
.sc-blue .sc-ic{background:linear-gradient(135deg,var(--info),#7fb5c9)}
.sc-green .sc-ic{background:linear-gradient(135deg,var(--ok),#7bc08c)}
.sc-amber .sc-ic{background: linear-gradient(135deg, #FDD835 0%, #F9A825 100%)}
.sc-purple .sc-ic{background:linear-gradient(135deg,#8b6aae,#a98bc5)}
.sc-val{font-size:1.4rem;font-weight:700;font-family:var(--font2)}
.sc-lbl{font-size:.78rem;color:var(--text2)}

/* Dash Sections */
.dash-sec h3{color:var(--primary);margin-bottom:14px;font-size:1.05rem}
.dash-sec h3 i{color:var(--gold);margin-right:8px}
.act-item{display:flex;align-items:center;gap:12px;padding:11px;background:var(--card);border-radius:var(--r-sm);margin-bottom:8px;box-shadow:0 1px 2px rgba(44,24,16,.04);border:1px solid var(--border);transition:.2s var(--ease)}
.act-item:hover{border-color:var(--gold);transform:translateX(4px)}
.act-ic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.act-ic i{font-size:.8rem;color:#fff}
.act-ic.ic-borrow{background:var(--info)}.act-ic.ic-return{background:var(--ok)}.act-ic.ic-req{background:var(--gold)}
.act-text{flex:1;font-size:.88rem}
.act-date{font-size:.75rem;color:var(--text3)}

/* Dash Book/Request Items */
.db-item{display:flex;align-items:center;gap:14px;padding:14px;background:var(--card);border-radius:var(--r);margin-bottom:10px;box-shadow:var(--shadow);border:1px solid var(--border);transition:.2s var(--ease)}
.db-item:hover{border-color:var(--gold)}
.db-thumb{width:44px;height:58px;border-radius:6px;background:linear-gradient(135deg,var(--shelf),var(--accent));display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.db-thumb img{width:100%;height:100%;object-fit:cover}
.db-thumb i{color:#fff;font-size:1rem}
.db-info{flex:1;min-width:0}
.db-info h4{font-size:.9rem;color:var(--primary);margin-bottom:2px}
.db-info p{font-size:.78rem;color:var(--text2)}
.rq-status{padding:4px 12px;border-radius:12px;font-size:.72rem;font-weight:600;white-space:nowrap}
.s-pending{background:var(--warn-l);color:var(--gold-d)}
.s-approved,.s-borrowed{background:var(--ok-l);color:var(--ok)}
.s-returned{background:#e5e7eb;color:#4b5563}
.s-rejected{background:var(--err-l);color:var(--err)}

/* Membership Card */
.mem-card{background:var(--card);border-radius:var(--r);padding:28px;box-shadow:var(--shadow);border:1px solid var(--border)}
.mem-card-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px}
.mem-card-hdr h3{color:var(--primary)}
.mem-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mem-item{padding:12px;background:var(--bg2);border-radius:var(--r-sm)}
.mem-item .ml{font-size:.78rem;color:var(--text2);display:block;margin-bottom:2px}
.mem-item .mv{font-weight:600;font-size:.9rem}
.no-mem{text-align:center;padding:40px 20px}
.no-mem i{font-size:3rem;color:var(--text3);display:block;margin-bottom:14px}
.no-mem h3{color:var(--primary);margin-bottom:8px}
.no-mem p{color:var(--text2);margin-bottom:18px}
@media(max-width:768px){
  .dash{grid-template-columns:1fr}
  .dash-side{position:static}
  .mem-grid,.fg-row{grid-template-columns:1fr}
}

/* ---- Toast ---- */
.toast-wrap{position:fixed;top:82px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px}
.toast{padding:14px 20px;border-radius:var(--r-sm);color:#fff;font-size:.88rem;font-weight:500;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;min-width:260px;animation:slideR .3s var(--ease),fadeO .3s ease 3.7s;cursor:pointer}
.toast:hover{opacity:.9}
.toast-ok{background:var(--ok)}.toast-err{background:var(--err)}.toast-warn{background:var(--gold);color:var(--shelf-dark)}.toast-info{background:var(--info)}
@keyframes slideR{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes fadeO{from{opacity:1}to{opacity:0}}

/* ---- Loading ---- */
.loader-overlay{position:fixed;inset:0;background:rgba(250,246,240,.9);z-index:10000;display:none;align-items:center;justify-content:center}
.loader-overlay.on{display:flex}
.loader-box{text-align:center}.loader-box p{margin-top:10px;color:var(--text2)}
.loader-spin{width:38px;height:38px;border:3.5px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
.empty-loader{text-align:center;padding:60px 20px;color:var(--text2)}

/* ---- Empty State ---- */
.empty-state{text-align:center;padding:60px 20px}
.empty-state i{font-size:3rem;color:var(--text3);display:block;margin-bottom:14px}
.empty-state h3{color:var(--primary);margin-bottom:6px}
.empty-state p{color:var(--text2)}

/* ---- Modal ---- */
.modal-bg{position:fixed;inset:0;background:rgba(44,24,16,.4);z-index:5000;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.modal-bg.on{display:flex}
.modal-card{background:var(--card);border-radius:var(--r-lg);padding:28px;max-width:520px;width:100%;position:relative;animation:fadeUp .3s var(--ease);max-height:90vh;overflow-y:auto;border:1px solid var(--border)}
.modal-x{position:absolute;top:14px;right:14px;background:none;border:none;font-size:1.1rem;color:var(--text3);cursor:pointer;transition:.2s}
.modal-x:hover{color:var(--err)}

/* ---- Footer ---- */
.footer {
  background: #2a1810; /* Dark brown */
  color: #e5d5c0; /* Cream */
  padding: 60px 0 30px;
  margin-top: 60px;
}

.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.foot-col h3 {
  color: #d4a574; /* Golden */
  font-size: 1.2rem;
  margin-bottom: 20px;
  font-weight: 700;
}

.foot-col img {
  filter: brightness(0) invert(1); /* White logo */
  height: 40px;
  width: auto;
  margin-bottom: 15px;
}

.foot-col p {
  color: #e5d5c0;
  font-size: 0.95rem;
  line-height: 1.6;
}

.foot-col ul {
  list-style: none; /* Remove bullet points */
  padding: 0;
}

.foot-col ul li {
  margin-bottom: 12px;
}

.foot-col ul li a {
  color: #e5d5c0;
  text-decoration: none;
  transition: 0.3s;
  font-size: 0.95rem;
}

.foot-col ul li a:hover {
  color: #d4a574;
  padding-left: 5px;
}

.foot-col i {
  color: #d4a574;
  margin-right: 8px;
  width: 20px;
  text-align: center;
}

.foot-bottom {
  border-top: 1px solid rgba(212, 165, 116, 0.2);
  padding-top: 30px;
  text-align: center;
}

.foot-bottom p {
  color: rgba(229, 213, 192, 0.7);
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .foot-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }
  
  .foot-col ul li a:hover {
    padding-left: 0;
  }
}


/* Membership Dashboard Stats & Grid */
.mem-info-details .mem-card {
  border-top: 4px solid var(--gold);
}
.mem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 1rem;
}
.mem-item {
  background: var(--parchment);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.mem-item .ml {
  display: block;
  font-size: 0.75rem;
  color: var(--text3);
  margin-bottom: 4px;
}
.mem-item .mv {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--shelf-dark);
}

/* Auto-fill Styling */
.auto-filled {
  background-color: #f0f9ff !important;
  border-color: #10b981 !important;
}

.auto-fill-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  background: #10b981;
  color: white;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}

.welcome-banner {
  background: linear-gradient(135deg, #d4a574, #c9942f);
  color: white;
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 12px rgba(212, 165, 116, 0.2);
  animation: fadeUp 0.5s ease;
}

.welcome-banner .welcome-icon {
  font-size: 28px;
  background: rgba(255, 255, 255, 0.2);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.welcome-banner .welcome-text h4 {
  margin: 0;
  font-size: 1.05rem;
}

.welcome-banner .welcome-text p {
  margin: 4px 0 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.9);
}

.section-info {
  background: #f8fafc;
  border-left: 4px solid #3b82f6;
  padding: 12px 16px;
  margin-bottom: 20px;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #475569;
}

/* Barcode Styling (Main Site) */
.bc-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0;
}
.bc-tag {
  font-size: 10px;
  background: var(--bg2);
  color: var(--text2);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-family: var(--font2);
  font-weight: 600;
}
.bc-more {
  font-size: 10px;
  color: var(--text3);
  font-style: italic;
  align-self: center;
}

/* Copies List in Detail View */
.copies-section {
  margin: 20px 0;
  padding: 15px;
  background: var(--bg2);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.copies-section h4 {
  font-size: 0.95rem;
  color: var(--primary);
  margin-bottom: 10px;
}
.copies-list-new {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.copy-row {
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: var(--white);
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 0.85rem;
}
.copy-row.borrowed {
  opacity: 0.7;
  border-left: 3px solid var(--err);
}
.copy-row.available {
  border-left: 3px solid var(--ok);
}
.c-bc {
  font-family: var(--font2);
  font-weight: 700;
  color: var(--text);
}
.c-st {
  font-size: 0.75rem;
  margin-top: 2px;
}


/* ==========================================
   Durbeen Membership Card v8.0
   Original Durbeen Color Theme
   ========================================== */

.mem-card-full {
  margin: 30px auto;
  max-width: 100%;
  padding: 10px;
}

.mc-outer {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin-bottom: 24px;
}

/* ---------- Base Card ---------- */
.mc-card,
.mc-card-back {
  width: 380px;
  height: 240px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  color: #fff;
  font-family: var(--font2);
  
  /* Durbeen Navy Theme */
  background: 
    linear-gradient(135deg, 
      #0a1628 0%, 
      #1a2942 40%, 
      #0f1f38 70%, 
      #0a1628 100%);
  
  box-shadow: 
    0 20px 45px rgba(10, 22, 40, 0.5),
    0 0 0 1px rgba(212, 175, 55, 0.15) inset,
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
  
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mc-card:hover,
.mc-card-back:hover {
  transform: translateY(-6px);
  box-shadow: 
    0 30px 55px rgba(10, 22, 40, 0.6),
    0 0 0 1px rgba(212, 175, 55, 0.4) inset;
}

/* Shine effect */
.mc-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 175, 55, 0.08) 50%,
    transparent
  );
  transition: left 0.7s ease;
  pointer-events: none;
  z-index: 1;
}

.mc-card:hover .mc-shine,
.mc-card-back:hover .mc-shine {
  left: 100%;
}

/* Golden top strip */
.mc-card::before,
.mc-card-back::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    transparent 0%,
    #d4af37 20%,
    #f4d47c 50%,
    #d4af37 80%,
    transparent 100%);
  z-index: 4;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

/* Golden glow decoration */
.mc-card::after,
.mc-card-back::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 320px;
  height: 320px;
  background: radial-gradient(
    circle,
    rgba(212, 175, 55, 0.1) 0%,
    rgba(212, 175, 55, 0.03) 40%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

/* ==========================================
   FRONT CARD
   ========================================== */

.mc-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 14px 18px;
  gap: 10px;
}

/* Header */
.mc-front-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  position: relative;
  z-index: 2;
}

.mc-logo {
  height: 34px;
  width: auto;
  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(212, 175, 55, 0.5));
}

.mc-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.mc-brand-name {
  font-size: 13px;
  font-weight: 700;
  color: #d4af37;
  font-family: var(--font);
  letter-spacing: 0.5px;
}

.mc-brand-sub {
  font-size: 7.5px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 2px;
  font-weight: 600;
}

/* Body */
.mc-front-body {
  display: flex;
  gap: 14px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.mc-photo {
  width: 72px;
  height: 88px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid #d4af37;
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.5),
    0 0 0 3px rgba(212, 175, 55, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mc-photo-ph {
  color: rgba(255, 255, 255, 0.3);
  font-size: 28px;
}

.mc-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.mc-name {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  font-family: var(--font);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.mc-id-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: linear-gradient(135deg, 
    rgba(212, 175, 55, 0.15), 
    rgba(212, 175, 55, 0.05));
  border-left: 3px solid #d4af37;
  border-radius: 4px;
  width: fit-content;
  max-width: 100%;
}

.mc-id-tag {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.mc-id-val {
  font-size: 12px;
  font-weight: 700;
  color: #f4d47c;
  letter-spacing: 1px;
  font-family: 'Courier New', monospace;
  white-space: nowrap;
}

.mc-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.85);
}

.mc-phone i {
  color: #d4af37;
  font-size: 9px;
}

/* Footer */
.mc-front-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  position: relative;
  z-index: 2;
}

.mc-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.mc-meta-label {
  font-size: 7px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1px;
  font-weight: 600;
}

.mc-meta-value {
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mc-cat-junior { color: #60a5fa; }
.mc-cat-senior { color: #f472b6; }
.mc-meta-expire { color: #fb7185; }

/* ==========================================
   BACK CARD
   ========================================== */

.mc-card-back {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: 14px 18px;
  gap: 8px;
}

.mc-back-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  position: relative;
  z-index: 2;
}

.mc-back-header i {
  color: #d4af37;
  font-size: 13px;
  background: rgba(212, 175, 55, 0.15);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mc-back-header h4 {
  font-size: 13px;
  color: #d4af37;
  font-weight: 700;
  margin: 0;
  font-family: var(--font);
  letter-spacing: 0.3px;
}

/* Rules */
.mc-rules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 2;
  justify-content: center;
}

.mc-rules li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
  padding: 1px 0;
}

.mc-check {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4af37, #b8941f);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(212, 175, 55, 0.3);
}

.mc-check i {
  color: #0a1628;
  font-size: 6px;
  font-weight: 900;
}

/* ==========================================
   BARCODE — Fixed & Prominent
   ========================================== */

.mc-barcode-wrap {
  background: #ffffff;
  padding: 5px 10px;
  border-radius: 6px;
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(212, 175, 55, 0.5);
  position: relative;
  z-index: 2;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.member-barcode {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  display: block;
}

/* Hide old barcode elements */
.mc-card .mc-barcode,
.mc-bar-text,
.mc-bar-lines {
  display: none !important;
}

/* Footer */
.mc-back-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.4), 
    rgba(0, 0, 0, 0.2));
  border-radius: 8px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  position: relative;
  z-index: 2;
}

.mc-back-footer span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.mc-back-footer span i {
  color: #d4af37;
  font-size: 10px;
  flex-shrink: 0;
}

/* ==========================================
   Actions & Note
   ========================================== */

.mc-actions {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  justify-content: center;
  flex-wrap: wrap;
}

.mc-note {
  text-align: center;
  margin-top: 18px;
  font-size: 12px;
  color: var(--text3, #94a3b8);
  opacity: 0.8;
}

/* ==========================================
   Responsive
   ========================================== */

@media (max-width: 420px) {
  .mc-card,
  .mc-card-back {
    width: 100%;
    max-width: 380px;
    height: auto;
    aspect-ratio: 1.586 / 1;
    min-height: 220px;
    padding: 12px 14px;
  }
  
  .mc-name { font-size: 15px; }
  .mc-photo { width: 64px; height: 80px; }
  .mc-barcode-wrap { height: 44px; }
}