/* ══════════════════════════════════════════════════════ style.css — RJ Translations Shared styles extracted from all pages. Import in every page : ══════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,400&family=Lora:ital,wght@0,400;0,500;1,400&family=Source+Serif+4:ital,wght@0,300;0,400;1,300&display=swap'); /* ══════════════════════════════════ VARIABLES ══════════════════════════════════ */ :root { --red: #c0392b; --red-bright: #e74c3c; --red-dim: #7b1a13; --bg: #0c0c0c; --surface: #141414; --surface2: #1c1c1c; --border: #252525; --text: #ececec; --muted: #666; --muted2: #444; --gold: #f5c518; --success: #27ae60; --warning: #f39c12; --info: #3498db; --error: #e74c3c; --topbar-h: 56px; --bot-nav-h: 60px; } /* ══════════════════════════════════ RESET ══════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; padding-bottom: var(--bot-nav-h); } a { color: inherit; text-decoration: none; } img { display: block; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, textarea, select { font-family: inherit; } /* ══════════════════════════════════ TOPBAR ══════════════════════════════════ */ .topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); background: #0a0a0a; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; z-index: 100; } .topbar-menu { display: flex; flex-direction: column; gap: 5px; width: 22px; cursor: pointer; padding: 4px 0; } .topbar-menu span { display: block; height: 2px; background: var(--text); border-radius: 2px; transition: all 0.2s; } .topbar-logo { font-family: 'Cinzel', serif; font-size: 20px; font-weight: 700; color: #fff; letter-spacing: 1px; font-style: italic; } .topbar-btn { color: var(--text); padding: 6px; display: flex; align-items: center; border-radius: 6px; transition: background 0.15s; } .topbar-btn:hover { background: var(--surface2); } .topbar-btn.active { color: var(--red-bright); } .topbar-actions { display: flex; gap: 2px; } /* ══════════════════════════════════ MAIN ══════════════════════════════════ */ .main { margin-top: var(--topbar-h); } /* ══════════════════════════════════ BOTTOM NAV ══════════════════════════════════ */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: var(--bot-nav-h); background: #0a0a0a; border-top: 1px solid var(--border); display: flex; z-index: 100; } .nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; transition: color 0.15s; padding: 8px 0; } .nav-btn.active { color: var(--red-bright); } .nav-btn:hover { color: var(--text); } .nav-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; } /* ══════════════════════════════════ DRAWER ══════════════════════════════════ */ .drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 300; opacity: 0; pointer-events: none; transition: opacity 0.25s; } .drawer-overlay.open { opacity: 1; pointer-events: all; } .drawer { position: fixed; top: 0; left: 0; width: 280px; height: 100vh; background: var(--surface); border-right: 1px solid var(--border); z-index: 301; transform: translateX(-100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; } .drawer.open { transform: none; } .drawer-header { padding: 20px 20px 16px; border-bottom: 1px solid var(--border); background: #0d0d0d; } .drawer-logo { font-family: 'Cinzel', serif; font-size: 20px; font-weight: 700; color: var(--red-bright); font-style: italic; } .drawer-tagline { font-size: 11px; color: var(--muted); margin-top: 3px; } .drawer-user { padding: 14px 20px; border-bottom: 1px solid var(--border); } .drawer-user-inner { display: flex; align-items: center; gap: 12px; } .drawer-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--red-dim); display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; font-weight: 600; overflow: hidden; flex-shrink: 0; } .drawer-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .drawer-username { font-size: 14px; font-weight: 500; } .drawer-email { font-size: 12px; color: var(--muted); } .drawer-login-btn { display: block; width: 100%; background: var(--red); color: #fff; padding: 10px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: background 0.2s; text-align: center; } .drawer-login-btn:hover { background: var(--red-bright); } .drawer-nav { flex: 1; padding: 10px 0; overflow-y: auto; } .drawer-nav-item { display: flex; align-items: center; gap: 14px; padding: 13px 20px; font-size: 14px; color: var(--muted); cursor: pointer; transition: all 0.15s; } .drawer-nav-item:hover { color: var(--text); background: var(--surface2); } .drawer-nav-item.active { color: var(--red-bright); background: rgba(192,57,43,0.08); } .drawer-nav-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .drawer-section-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted2); padding: 14px 20px 4px; } /* ══════════════════════════════════ SECTION HEADER ══════════════════════════════════ */ .section { padding: 20px 0 4px; } .section-header { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; margin-bottom: 14px; } .section-title { font-size: 17px; font-weight: 700; position: relative; padding-bottom: 6px; } .section-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 32px; height: 2px; background: var(--red-bright); border-radius: 2px; } .view-all { font-size: 13px; color: var(--red-bright); display: flex; align-items: center; gap: 3px; font-weight: 500; } /* ══════════════════════════════════ BUTTONS ══════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; border: none; transition: all 0.2s; text-decoration: none; } .btn-primary { background: var(--red); color: #fff; } .btn-primary:hover { background: var(--red-bright); } .btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { border-color: var(--red); } .btn-ghost { background: transparent; color: var(--red-bright); border: 1px solid var(--red-dim); } .btn-ghost:hover { background: rgba(192,57,43,0.1); } .btn-danger { background: transparent; color: var(--error); border: 1px solid rgba(231,76,60,0.3); } .btn-danger:hover { background: rgba(231,76,60,0.1); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 6px; } .btn-lg { padding: 13px 28px; font-size: 15px; } .btn-full { width: 100%; } /* ══════════════════════════════════ FORM ══════════════════════════════════ */ .form-group { display: flex; flex-direction: column; gap: 6px; } .form-label { font-size: 12px; color: var(--muted); font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; } .form-input, .form-select, .form-textarea { background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 10px 14px; border-radius: 8px; font-size: 14px; font-family: 'DM Sans', sans-serif; outline: none; width: 100%; transition: border-color 0.2s; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--red); } .form-input.error { border-color: var(--error); } .form-input.valid { border-color: var(--success); } .form-input::placeholder { color: var(--muted2); } .form-textarea { resize: vertical; min-height: 90px; line-height: 1.6; } .form-select option { background: var(--surface2); } .field-error { font-size: 11px; color: var(--error); display: none; margin-top: 3px; } .field-error.show { display: block; } /* ══════════════════════════════════ SEARCH BAR ══════════════════════════════════ */ .search-bar { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; transition: border-color 0.2s; } .search-bar:focus-within { border-color: var(--red); } .search-bar svg { color: var(--muted); flex-shrink: 0; } .search-input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 14px; font-family: 'DM Sans', sans-serif; } .search-input::placeholder { color: var(--muted); } .search-wrap { padding: 12px 16px; } /* ══════════════════════════════════ NOVEL CARDS — HORIZONTAL SCROLL ══════════════════════════════════ */ .novels-scroll { display: flex; gap: 10px; padding: 4px 16px 12px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .novels-scroll::-webkit-scrollbar { display: none; } .novel-card { flex-shrink: 0; width: 110px; cursor: pointer; } .novel-card-cover { width: 110px; height: 155px; object-fit: cover; border-radius: 8px; background: var(--surface2); transition: transform 0.2s, box-shadow 0.2s; } .novel-card:hover .novel-card-cover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.5); } .novel-card-title { font-size: 13px; font-weight: 600; margin-top: 7px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .novel-card-genre { font-size: 11px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .novel-card-chapter { font-size: 12px; color: var(--red-bright); font-weight: 500; margin-top: 3px; } /* ══════════════════════════════════ NOVEL CARDS — GRID ══════════════════════════════════ */ .novels-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .grid-card { cursor: pointer; } .grid-cover-wrap { position: relative; } .grid-cover { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 8px; background: var(--surface2); transition: transform 0.2s, box-shadow 0.2s; } .grid-card:hover .grid-cover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.6); } .grid-title { font-size: 12px; font-weight: 600; margin-top: 7px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .grid-genre { font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grid-chapter { font-size: 11px; color: var(--red-bright); font-weight: 500; margin-top: 2px; } /* ══════════════════════════════════ NOVEL CARDS — LIST ══════════════════════════════════ */ .novels-list { display: flex; flex-direction: column; } .list-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; } .list-item:last-child { border-bottom: none; } .list-item:hover { background: rgba(255,255,255,0.02); margin: 0 -16px; padding: 12px 16px; } .list-cover { width: 60px; height: 84px; object-fit: cover; border-radius: 6px; background: var(--surface2); flex-shrink: 0; } .list-info { flex: 1; min-width: 0; } .list-title { font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .list-genre { font-size: 12px; color: var(--muted); margin-top: 4px; } .list-chapter { font-size: 12px; color: var(--red-bright); font-weight: 500; margin-top: 4px; } .list-arrow { color: var(--muted2); align-self: center; flex-shrink: 0; } /* ══════════════════════════════════ BADGES ══════════════════════════════════ */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; } .badge-ongoing { background: rgba(39,174,96,0.15); color: #27ae60; border: 1px solid rgba(39,174,96,0.3); } .badge-completed { background: rgba(52,152,219,0.15); color: #3498db; border: 1px solid rgba(52,152,219,0.3); } .badge-hiatus { background: rgba(243,156,18,0.15); color: #f39c12; border: 1px solid rgba(243,156,18,0.3); } .badge-new { background: var(--red); color: #fff; font-size: 9px; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.5px; } .badge-premium { background: rgba(245,197,24,0.12); color: var(--gold); border: 1px solid rgba(245,197,24,0.3); } .badge-locked { background: rgba(102,102,102,0.15); color: var(--muted); border: 1px solid rgba(102,102,102,0.3); } .badge-scheduled { background: rgba(52,152,219,0.12); color: var(--info); border: 1px solid rgba(52,152,219,0.3); } /* ══════════════════════════════════ TAGS ══════════════════════════════════ */ .tag-list { display: flex; flex-wrap: wrap; gap: 5px; } .tag { padding: 3px 9px; border-radius: 20px; background: var(--surface2); border: 1px solid var(--border); font-size: 11px; color: var(--muted); transition: all 0.15s; cursor: pointer; } .tag:hover { border-color: var(--red); color: var(--text); } /* ══════════════════════════════════ CARDS ══════════════════════════════════ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; } /* ══════════════════════════════════ BOTTOM SHEET ══════════════════════════════════ */ .sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.25s; } .sheet-overlay.open { opacity: 1; pointer-events: all; } .sheet { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--border); border-radius: 16px 16px 0 0; z-index: 201; padding: 0 0 40px; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); max-height: 85vh; overflow-y: auto; } .sheet.open { transform: none; } .sheet-handle { width: 36px; height: 4px; background: var(--border); border-radius: 2px; margin: 12px auto 0; } .sheet-header { padding: 16px 20px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .sheet-title { font-size: 15px; font-weight: 700; } /* ══════════════════════════════════ MODAL ══════════════════════════════════ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 400; display: none; align-items: center; justify-content: center; padding: 20px; } .modal-overlay.open { display: flex; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 28px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; position: relative; } .modal-title { font-size: 17px; font-weight: 700; margin-bottom: 20px; color: var(--red-bright); } .modal-close { position: absolute; top: 16px; right: 16px; color: var(--muted); font-size: 20px; line-height: 1; } .modal-close:hover { color: var(--text); } .modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); } /* ══════════════════════════════════ TOAST ══════════════════════════════════ */ .toast-wrap { position: fixed; bottom: 72px; right: 16px; z-index: 999; display: flex; flex-direction: column; gap: 8px; } .toast { padding: 11px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; animation: toastIn 0.25s ease; min-width: 200px; display: flex; align-items: center; gap: 8px; } .toast-success { background: #1a3d2b; border: 1px solid #27ae60; color: #4cd88a; } .toast-error { background: #3d1a1a; border: 1px solid var(--red); color: #f87171; } .toast-info { background: #1a2a3d; border: 1px solid #3498db; color: #60a5fa; } .toast-warning { background: #3d2e0a; border: 1px solid #f39c12; color: #fbbf24; } @keyframes toastIn { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:none; } } /* ══════════════════════════════════ SKELETON / SPINNER ══════════════════════════════════ */ @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} } .skeleton { background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 6px; } .spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.2); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; display: inline-block; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } /* ══════════════════════════════════ EMPTY STATE ══════════════════════════════════ */ .empty-state { text-align: center; padding: 60px 20px; color: var(--muted); } .empty-icon { margin: 0 auto 16px; opacity: 0.25; } .empty-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .empty-desc { font-size: 13px; line-height: 1.6; } /* ══════════════════════════════════ BREADCRUMB ══════════════════════════════════ */ .breadcrumb { display: flex; align-items: center; gap: 6px; padding: 12px 16px 0; font-size: 12px; color: var(--muted); flex-wrap: wrap; } .breadcrumb a { color: var(--muted); transition: color 0.15s; } .breadcrumb a:hover { color: var(--text); } .breadcrumb .current { color: var(--red-bright); } .breadcrumb-sep { color: var(--muted2); } /* ══════════════════════════════════ PROGRESS BAR ══════════════════════════════════ */ .progress-wrap { margin-top: 6px; } .progress-label { display: flex; justify-content: flex-end; font-size: 11px; color: var(--muted); margin-bottom: 4px; } .progress-track { width: 100%; height: 3px; background: var(--surface2); border-radius: 2px; overflow: hidden; } .progress-fill { height: 100%; background: var(--red); border-radius: 2px; transition: width 0.6s ease; } /* ══════════════════════════════════ PAGINATION ══════════════════════════════════ */ .pagination { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 24px 0 8px; } .page-num { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; border: 1px solid transparent; transition: all 0.15s; } .page-num:hover { border-color: var(--border); color: var(--text); } .page-num.active { background: var(--red); color: #fff; border-color: var(--red); } .page-arrow { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; border: 1px solid var(--border); transition: all 0.15s; } .page-arrow:hover { border-color: var(--red); color: var(--red-bright); } .page-arrow.disabled { opacity: 0.3; pointer-events: none; } /* ══════════════════════════════════ CHAPTER ITEMS (novel detail + reader) ══════════════════════════════════ */ .chapter-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; } .chapter-item:last-child { border-bottom: none; } .chapter-item:hover { background: rgba(255,255,255,0.02); margin: 0 -16px; padding: 11px 16px; } .chapter-item.locked { opacity: 0.7; cursor: default; } .chapter-item.locked:hover { background: transparent; margin: 0; padding: 11px 0; } .chapter-thumb { width: 46px; height: 62px; object-fit: cover; border-radius: 5px; background: var(--surface2); flex-shrink: 0; } .chapter-info { flex: 1; min-width: 0; } .chapter-title { font-size: 14px; font-weight: 500; } .chapter-date { font-size: 12px; color: var(--muted); margin-top: 3px; } .chapter-release-date { font-size: 11px; color: var(--info); margin-top: 3px; } .chapter-new { background: var(--red); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 3px; letter-spacing: 0.5px; flex-shrink: 0; } .chapter-bookmark { color: var(--muted2); flex-shrink: 0; padding: 4px; transition: color 0.15s; } .chapter-bookmark:hover { color: var(--red-bright); } .chapter-bookmark.saved { color: var(--red-bright); } /* ══════════════════════════════════ HERO SLIDER (home page) ══════════════════════════════════ */ .hero { position: relative; width: 100%; aspect-ratio: 16/9; max-height: 240px; overflow: hidden; background: #111; } .hero-slides { display: flex; height: 100%; transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); } .hero-slide { min-width: 100%; height: 100%; position: relative; flex-shrink: 0; } .hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .hero-slide-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.1) 100%); } .hero-slide-content { position: absolute; bottom: 20px; left: 18px; right: 50%; } .hero-slide-title { font-size: 20px; font-weight: 700; line-height: 1.25; margin-bottom: 6px; text-shadow: 0 2px 8px rgba(0,0,0,0.8); } .hero-slide-desc { font-size: 12px; color: rgba(255,255,255,0.7); line-height: 1.4; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .btn-read-now { background: var(--red); color: #fff; padding: 8px 18px; border-radius: 4px; font-size: 13px; font-weight: 600; transition: background 0.2s; display: inline-block; } .btn-read-now:hover { background: var(--red-bright); } .hero-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; } .hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.35); cursor: pointer; border: none; transition: all 0.2s; } .hero-dot.active { background: var(--red-bright); width: 20px; border-radius: 4px; } /* ══════════════════════════════════ SEARCH OVERLAY (home page) ══════════════════════════════════ */ .search-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 300; transform: translateY(-100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; } .search-overlay.open { transform: none; } .search-overlay-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); margin-top: var(--topbar-h); } .search-overlay-input { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; color: var(--text); font-size: 15px; font-family: 'DM Sans', sans-serif; outline: none; } .search-overlay-input:focus { border-color: var(--red); } .search-cancel { background: none; color: var(--red-bright); font-size: 14px; font-weight: 500; white-space: nowrap; } .search-results { flex: 1; overflow-y: auto; padding: 12px 16px; } .search-result-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer; } .search-result-cover { width: 42px; height: 58px; object-fit: cover; border-radius: 5px; background: var(--surface2); flex-shrink: 0; } .search-result-title { font-size: 14px; font-weight: 500; } .search-result-meta { font-size: 12px; color: var(--muted); margin-top: 3px; } /* ══════════════════════════════════ RECENT LIST (home page) ══════════════════════════════════ */ .recent-list { display: flex; flex-direction: column; padding: 0 16px; } .recent-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; } .recent-item:last-child { border-bottom: none; } .recent-cover { width: 52px; height: 68px; object-fit: cover; border-radius: 6px; background: var(--surface2); flex-shrink: 0; } .recent-info { flex: 1; min-width: 0; } .recent-novel-title { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .recent-chapter-title { font-size: 13px; color: var(--red-bright); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .recent-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; } .recent-time { font-size: 12px; color: var(--muted); white-space: nowrap; } .recent-arrow { color: var(--muted2); font-size: 14px; } /* ══════════════════════════════════ READER THEMES ══════════════════════════════════ */ body.theme-dark { --bg:#0f0f0f; --surface:#1a1a1a; --surface2:#222; --border:#2a2a2a; --text:#e0e0e0; --muted:#666; --muted2:#333; } body.theme-light { --bg:#f5f0e8; --surface:#ede8de; --surface2:#e0dbd0; --border:#ccc8be; --text:#1a1a1a; --muted:#888; --muted2:#bbb; } body.theme-sepia { --bg:#1a1410; --surface:#221e18; --surface2:#2a2420; --border:#332e28; --text:#d4c4a0; --muted:#6a5a40; --muted2:#3a3028; } /* ══════════════════════════════════ LOGIN PAGE ══════════════════════════════════ */ .auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 32px 28px; } .auth-logo { font-family: 'Cinzel', serif; font-size: 26px; font-weight: 700; color: #fff; font-style: italic; letter-spacing: 1px; } .auth-logo span { color: var(--red-bright); } .auth-tagline { font-size: 13px; color: var(--muted); margin-top: 4px; } .auth-tabs { display: flex; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; margin-bottom: 24px; } .auth-tab { flex: 1; padding: 9px; border-radius: 7px; font-size: 14px; font-weight: 600; text-align: center; cursor: pointer; color: var(--muted); transition: all 0.2s; } .auth-tab.active { background: var(--red); color: #fff; } .input-wrap { position: relative; } .input-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); cursor: pointer; display: flex; align-items: center; } .divider { display: flex; align-items: center; gap: 12px; margin: 4px 0; } .divider-line { flex: 1; height: 1px; background: var(--border); } .divider-text { font-size: 12px; color: var(--muted); white-space: nowrap; } .google-btn { width: 100%; padding: 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.2s; } .google-btn:hover { border-color: var(--red); background: rgba(255,255,255,0.04); } /* ══════════════════════════════════ ALERT BOX ══════════════════════════════════ */ .alert { padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; display: none; align-items: center; gap: 8px; margin-bottom: 8px; } .alert.show { display: flex; } .alert-error { background: rgba(231,76,60,0.1); border: 1px solid rgba(231,76,60,0.3); color: #f87171; } .alert-success { background: rgba(39,174,96,0.1); border: 1px solid rgba(39,174,96,0.3); color: #4ade80; } .alert-info { background: rgba(52,152,219,0.1); border: 1px solid rgba(52,152,219,0.3); color: #60a5fa; } /* ══════════════════════════════════ ANIMATIONS ══════════════════════════════════ */ @keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} } @keyframes fadeIn { from{opacity:0} to{opacity:1} } .anim-fade-up { animation: fadeUp 0.35s ease both; } .anim-fade-in { animation: fadeIn 0.3s ease both; } .anim-d1 { animation-delay: 0.05s; } .anim-d2 { animation-delay: 0.10s; } .anim-d3 { animation-delay: 0.15s; } .anim-d4 { animation-delay: 0.20s; } /* ══════════════════════════════════ UTILITY ══════════════════════════════════ */ .hidden { display: none !important; } .text-red { color: var(--red-bright); } .text-muted { color: var(--muted); } .text-gold { color: var(--gold); } .text-center { text-align: center; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .w-full { width: 100%; } .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }