/* ============================================================
   WEB-EBOOKS — main.css
   Times New Roman + Orange-Red Glassmorphic Design System
   Very light warm glass panels, soft orange-red glows
   ============================================================ */

/* ─── CSS Variables ─────────────────────────────────────────── */
:root {
  --flame:        #ff4500;
  --coral:        #ff6b35;
  --ember:        #ff8c42;
  --peach:        #ffb085;
  --blush:        #ffe0d0;
  --blush-light:  #fff0e8;
  --blush-pale:   #fff8f4;
  --ivory:        #fffcfa;
  --ivory-warm:   #fff5ee;
  --ivory-deep:   #ffeadc;
  --parchment:    #ffd8c0;
  --ink:          #2a1200;
  --ink-soft:     #5a2d10;
  --ink-muted:    #9a6040;
  --ink-light:    #c89070;
  --gold:         #d4780a;
  --gold-light:   #f0a030;
  --crimson:      #c0280a;
  --border:       rgba(255,100,50,0.18);
  --border-solid: #f0c0a0;
  --success:      #2d6a2d;
  --error:        #8b1a1a;
  --warning:      #8b6000;
  --info:         #1a3a6a;
  /* Glass tokens */
  --glass-bg:     rgba(255,255,255,0.55);
  --glass-bg-2:   rgba(255,240,230,0.45);
  --glass-bg-3:   rgba(255,220,200,0.35);
  --glass-blur:   blur(18px);
  --glass-blur-sm: blur(10px);
  --glass-border: rgba(255,120,60,0.22);
  --glass-shadow: 0 8px 32px rgba(255,80,20,0.10), 0 2px 8px rgba(255,80,20,0.06);
  --glass-shadow-lg: 0 16px 56px rgba(255,80,20,0.16), 0 4px 16px rgba(255,80,20,0.10);
  --glow-sm:      0 0 20px rgba(255,100,50,0.12);
  --glow-md:      0 0 40px rgba(255,100,50,0.18);
  --radius:       16px;
  --radius-sm:    10px;
  --radius-lg:    24px;
  --radius-xl:    32px;
  --transition:   0.22s ease;
  --font:         'Times New Roman', Times, Georgia, serif;
  --font-body:    'Times New Roman', Times, Georgia, serif;
  --font-ui:      'Times New Roman', Times, Georgia, serif;
}

/* ─── Page Background ────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  font-size:       16px;
  /* Base: very light warm red-orange solid — not white, not gradient */
  background-color: #fff2ec;
}
body {
  font-family:        var(--font-body);
  color:              var(--ink);
  line-height:        1.7;
  min-height:         100vh;
  position:           relative;
  /* Glassy layered background — fixed so it doesn't scroll */
  background-color:   #fff2ec;
  background-image:
    /* Large frosted glass blob top-left */
    radial-gradient(ellipse 75% 55% at 5%  8%,  rgba(255,100,50,0.13) 0%, transparent 65%),
    /* Large frosted glass blob bottom-right */
    radial-gradient(ellipse 65% 55% at 95% 92%, rgba(255,60,10,0.11)  0%, transparent 65%),
    /* Mid blob center */
    radial-gradient(ellipse 55% 45% at 50% 48%, rgba(255,140,60,0.08) 0%, transparent 65%),
    /* Subtle top-right warm accent */
    radial-gradient(ellipse 40% 35% at 88% 5%,  rgba(255,80,30,0.09)  0%, transparent 60%),
    /* Subtle bottom-left warm accent */
    radial-gradient(ellipse 40% 35% at 12% 95%, rgba(255,120,50,0.08) 0%, transparent 60%);
  background-attachment: fixed;
  background-size:    100% 100%;
  /* Frosted glass noise overlay via SVG filter */
  isolation:          isolate;
}
/* Glass noise texture layer */
body::before {
  content:            '';
  position:           fixed;
  inset:              0;
  z-index:            -1;
  pointer-events:     none;
  background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-repeat:  repeat;
  background-size:    300px 300px;
  opacity:            1;
}
/* Glassy sheen stripe — very subtle diagonal highlight */
body::after {
  content:        '';
  position:       fixed;
  inset:          0;
  z-index:        -1;
  pointer-events: none;
  background:     linear-gradient(
    118deg,
    rgba(255,255,255,0.22) 0%,
    rgba(255,220,200,0.10) 30%,
    rgba(255,255,255,0.00) 55%,
    rgba(255,180,140,0.06) 80%,
    rgba(255,255,255,0.14) 100%
  );
}

/* ─── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a { color: var(--crimson); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
ul  { list-style: none; }

/* ─── Typography ─────────────────────────────────────────────── */
h1 { font-family: var(--font); font-size: clamp(2rem,5vw,3.6rem); font-weight: 700; line-height: 1.15; font-style: italic; }
h2 { font-family: var(--font); font-size: clamp(1.4rem,3vw,2.2rem); font-weight: 700; line-height: 1.25; }
h3 { font-family: var(--font); font-size: 1.3rem; font-weight: 700; }
h4 { font-family: var(--font); font-size: 1.05rem; font-weight: 700; }
p  { color: var(--ink-soft); font-family: var(--font-body); }

/* ─── Buttons ────────────────────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-danger, .btn-ghost {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  padding:         10px 24px;
  border-radius:   var(--radius-sm);
  font-size:       0.95rem;
  font-family:     var(--font-ui);
  font-weight:     700;
  cursor:          pointer;
  border:          2px solid transparent;
  transition:      all var(--transition);
  white-space:     nowrap;
  letter-spacing:  0.4px;
}
.btn-primary {
  background:   linear-gradient(135deg, var(--flame), var(--coral));
  color:        #fff;
  border-color: transparent;
  box-shadow:   0 4px 18px rgba(255,69,0,0.30), var(--glow-sm);
}
.btn-primary:hover {
  background:   linear-gradient(135deg, #e03d00, var(--flame));
  transform:    translateY(-2px);
  box-shadow:   0 8px 28px rgba(255,69,0,0.40), var(--glow-md);
}
.btn-secondary {
  background:   var(--glass-bg);
  color:        var(--flame);
  border-color: var(--glass-border);
  backdrop-filter: var(--glass-blur-sm);
}
.btn-secondary:hover { background: rgba(255,100,50,0.12); border-color: var(--coral); }
.btn-danger {
  background:   var(--crimson);
  color:        #fff;
  border-color: var(--crimson);
}
.btn-danger:hover { background: #a02008; }
.btn-ghost {
  background:   var(--glass-bg);
  color:        var(--ink-muted);
  border-color: var(--glass-border);
  backdrop-filter: var(--glass-blur-sm);
}
.btn-ghost:hover { border-color: var(--coral); color: var(--flame); background: rgba(255,100,50,0.08); }
.btn-outline-white {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       10px 24px;
  background:    rgba(255,255,255,0.15);
  color:         #fff;
  border:        2px solid rgba(255,255,255,0.45);
  border-radius: var(--radius-sm);
  font-family:   var(--font-ui);
  font-weight:   700;
  font-size:     0.95rem;
  cursor:        pointer;
  transition:    all var(--transition);
  backdrop-filter: var(--glass-blur-sm);
}
.btn-outline-white:hover { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.75); }
.btn-sm  { padding: 6px 14px; font-size: 0.85rem; }
.btn-lg  { padding: 13px 32px; font-size: 1.05rem; }
.full-width { width: 100%; }
button:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* ─── Spinner ────────────────────────────────────────────────── */
.spinner {
  display:       inline-block;
  width:         15px;
  height:        15px;
  border:        2px solid rgba(255,255,255,0.3);
  border-top:    2px solid #fff;
  border-radius: 50%;
  animation:     spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Forms ──────────────────────────────────────────────────── */
.form-group {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  margin-bottom:  16px;
}
.form-group label {
  font-size:      0.78rem;
  font-weight:    700;
  font-family:    var(--font-ui);
  color:          var(--ink);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.form-group input,
.form-group select,
.form-group textarea {
  padding:         10px 14px;
  border:          1px solid var(--border-solid);
  border-radius:   var(--radius-sm);
  font-size:       0.95rem;
  font-family:     var(--font-body);
  color:           var(--ink);
  background:      rgba(255,255,255,0.75);
  backdrop-filter: var(--glass-blur-sm);
  transition:      border-color var(--transition), box-shadow var(--transition);
  outline:         none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--coral);
  box-shadow:   0 0 0 3px rgba(255,100,50,0.12);
  background:   rgba(255,255,255,0.92);
}
.form-group textarea { resize: vertical; min-height: 100px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ─── Glass Panel Utility ────────────────────────────────────── */
.glass {
  background:      var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border:          1px solid var(--glass-border);
  box-shadow:      var(--glass-shadow);
}
.glass-warm {
  background:      var(--glass-bg-2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border:          1px solid rgba(255,140,60,0.20);
  box-shadow:      var(--glass-shadow);
}

/* ─── Modal Overlay ──────────────────────────────────────────── */
.modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(80,20,0,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index:         1000;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         20px;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity var(--transition);
}
.modal-overlay.active { opacity: 1; pointer-events: all; }
.modal-box {
  background:      rgba(255,255,255,0.82);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius:   var(--radius-lg);
  padding:         40px;
  width:           100%;
  max-width:       480px;
  max-height:      92vh;
  overflow-y:      auto;
  position:        relative;
  box-shadow:      var(--glass-shadow-lg), 0 0 0 1px var(--glass-border);
  animation:       modalIn 0.25s ease;
  border-top:      3px solid var(--coral);
}
@keyframes modalIn {
  from { transform: translateY(20px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.modal-close {
  position:        absolute;
  top:             14px;
  right:           14px;
  background:      rgba(255,100,50,0.10);
  border:          1px solid rgba(255,100,50,0.20);
  width:           30px;
  height:          30px;
  border-radius:   50%;
  cursor:          pointer;
  font-size:       0.85rem;
  color:           var(--ink-muted);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      all var(--transition);
  font-family:     var(--font-ui);
}
.modal-close:hover { background: var(--flame); color: #fff; border-color: var(--flame); }

/* ─── Auth Modal ─────────────────────────────────────────────── */
.auth-modal-box { max-width: 440px; }
.auth-tabs {
  display:         flex;
  background:      rgba(255,100,50,0.08);
  border:          1px solid rgba(255,100,50,0.18);
  border-radius:   var(--radius-sm);
  padding:         4px;
  margin-bottom:   28px;
  gap:             4px;
}
.auth-tab {
  flex:            1;
  padding:         9px;
  border:          none;
  border-radius:   8px;
  background:      transparent;
  font-size:       0.875rem;
  font-family:     var(--font-ui);
  font-weight:     700;
  color:           var(--ink-muted);
  cursor:          pointer;
  transition:      all var(--transition);
  letter-spacing:  0.5px;
}
.auth-tab.active {
  background:   linear-gradient(135deg, var(--flame), var(--coral));
  color:        #fff;
  box-shadow:   0 2px 10px rgba(255,69,0,0.28);
}
.auth-form        { display: none; }
.auth-form.active { display: block; }
.auth-title    { font-family: var(--font); font-size: 1.6rem; font-weight: 700; font-style: italic; margin-bottom: 6px; color: var(--ink); }
.auth-subtitle { font-size: 0.9rem; color: var(--ink-muted); margin-bottom: 20px; }
.form-footer-link { text-align: center; margin-top: 14px; font-size: 0.875rem; }
.form-footer-link span { color: var(--flame); cursor: pointer; font-weight: 700; }
.form-footer-link span:hover { text-decoration: underline; }

/* ─── OTP Input ──────────────────────────────────────────────── */
.otp-input-wrap {
  display:         flex;
  gap:             10px;
  justify-content: center;
  margin:          16px 0;
}
.otp-digit {
  width:           52px;
  height:          58px;
  text-align:      center;
  font-size:       1.5rem;
  font-weight:     700;
  font-family:     var(--font);
  border:          1px solid var(--border-solid);
  border-radius:   var(--radius-sm);
  background:      rgba(255,255,255,0.75);
  outline:         none;
  transition:      border-color var(--transition);
}
.otp-digit:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255,100,50,0.12); }

/* ─── Badge ──────────────────────────────────────────────────── */
.badge {
  display:        inline-flex;
  align-items:    center;
  padding:        2px 8px;
  border-radius:  20px;
  font-size:      0.68rem;
  font-weight:    700;
  font-family:    var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.badge-success  { background: rgba(45,106,45,0.12);  color: #1a5c1a; border: 1px solid rgba(45,106,45,0.25); }
.badge-error    { background: rgba(139,26,26,0.10);  color: #721c24; border: 1px solid rgba(139,26,26,0.22); }
.badge-warning  { background: rgba(139,96,0,0.10);   color: #856404; border: 1px solid rgba(139,96,0,0.22); }
.badge-info     { background: rgba(26,58,106,0.10);  color: #0c5460; border: 1px solid rgba(26,58,106,0.22); }
.badge-orange   { background: rgba(255,100,50,0.12); color: var(--flame); border: 1px solid rgba(255,100,50,0.25); }
.badge-gray     { background: rgba(255,200,160,0.20); color: var(--ink-muted); border: 1px solid rgba(255,160,120,0.25); }

/* ─── Card ───────────────────────────────────────────────────── */
.card {
  background:      var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius:   var(--radius);
  padding:         24px;
  box-shadow:      var(--glass-shadow);
  border:          1px solid var(--glass-border);
}

/* ─── Table ──────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--glass-border); }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-family: var(--font-body); }
thead th {
  background:     linear-gradient(135deg, rgba(255,80,20,0.85), rgba(255,120,60,0.80));
  color:          #fff;
  padding:        11px 14px;
  text-align:     left;
  font-weight:    700;
  font-size:      0.72rem;
  font-family:    var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 1px;
  backdrop-filter: var(--glass-blur-sm);
}
tbody tr { border-bottom: 1px solid rgba(255,120,60,0.10); transition: background var(--transition); }
tbody tr:hover { background: rgba(255,100,50,0.05); }
tbody tr:last-child { border-bottom: none; }
tbody td { padding: 11px 14px; color: var(--ink); vertical-align: middle; }

/* ─── Notification Bell ──────────────────────────────────────── */
.notif-bell { position: relative; cursor: pointer; padding: 7px; border-radius: 50%; transition: background var(--transition); color: var(--ink); }
.notif-bell:hover { background: rgba(255,100,50,0.10); }
.notif-badge {
  position:        absolute;
  top:             2px; right: 2px;
  background:      linear-gradient(135deg, var(--flame), var(--coral));
  color:           #fff;
  font-size:       0.6rem;
  font-weight:     700;
  font-family:     var(--font-ui);
  min-width:       17px;
  height:          17px;
  border-radius:   9px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0 3px;
  border:          2px solid #fff;
  box-shadow:      0 2px 6px rgba(255,69,0,0.35);
}

/* ─── Skeleton ───────────────────────────────────────────────── */
.skeleton {
  background:      linear-gradient(90deg, rgba(255,200,160,0.30) 25%, rgba(255,180,130,0.45) 50%, rgba(255,200,160,0.30) 75%);
  background-size: 200% 100%;
  animation:       shimmer 1.6s infinite;
  border-radius:   var(--radius-sm);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ─── Empty State ────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 60px 20px; color: var(--ink-muted); }
.empty-state .empty-icon { font-size: 3rem; margin-bottom: 14px; opacity: 0.4; }
.empty-state h3 { color: var(--ink); margin-bottom: 8px; font-style: italic; }

/* ─── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,120,60,0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,80,20,0.45); }

/* ─── Divider ────────────────────────────────────────────────── */
.divider { height: 1px; background: rgba(255,120,60,0.18); margin: 20px 0; }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .modal-box { padding: 24px 18px; }
  .form-row  { grid-template-columns: 1fr; }
  .btn-lg    { padding: 11px 22px; }
}