@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Quicksand:wght@400;600;700&family=Dancing+Script:wght@700&family=Be+Vietnam+Pro:wght@400;500;600;700;900&display=swap');

:root {
/* Soft Dark Theme (Dịu mắt) */
--main-font: 'Quicksand', sans-serif;
--bg-grad-1: #0f172a; --bg-grad-2: #1e293b; --bg-grad-3: #334155;
--orb-1: rgba(56, 189, 248, 0.2); --orb-2: rgba(244, 114, 182, 0.2); --orb-3: rgba(167, 139, 250, 0.2);

--glass-bg: rgba(30, 41, 59, 0.7);
--glass-border: rgba(255, 255, 255, 0.1);
--glass-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

--text-main: #f8fafc; --text-muted: #94a3b8;
--primary: #38bdf8; --accent: #f472b6; --success: #34d399;

--cell-bg: rgba(15, 23, 42, 0.5); --cell-border: rgba(255, 255, 255, 0.05);
--header-bg: rgba(56, 189, 248, 0.1);
--header-bar-bg: rgba(0, 0, 0, 0.2);
}

/* --- Light Mode Variables --- */
[data-theme="light"] {
/* Sáng sủa, sống động, loại bỏ hoàn toàn màu xám */
--bg-grad-1: #a18cd1; --bg-grad-2: #fbc2eb; --bg-grad-3: #84fab0;
--orb-1: rgba(255, 255, 255, 0.6); --orb-2: rgba(255, 255, 255, 0.5); --orb-3: rgba(255, 255, 255, 0.4);

--glass-bg: rgba(255, 255, 255, 0.45);
--glass-border: rgba(255, 255, 255, 0.8);
--glass-shadow: 0 8px 32px rgba(161, 140, 209, 0.25);

--text-main: #1e1e2f; --text-muted: #4a4a68;
--primary: #4338ca; --accent: #e11d48; --success: #059669;

--cell-bg: rgba(255, 255, 255, 0.9); --cell-border: rgba(67, 56, 202, 0.2);
--header-bg: rgba(67, 56, 202, 0.1);
--header-bar-bg: rgba(255, 255, 255, 0.65);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
font-family: var(--main-font); color: var(--text-main); margin: 0; padding: 0;
height: 100vh; width: 100vw; overflow: hidden;
/* Chặn bôi đen văn bản toàn trang */
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; 
}

/* Ngoại trừ các ô nhập liệu và bảng tính vẫn cho phép chọn và bôi đen */
input, textarea, [contenteditable="true"] {
-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
}

/* Smooth theme transition */
body, .container, .time-block, .exam-card, .todo-item, th, td, .sidebar-notes, input, select, textarea, .doc-card {
transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

/* --- Spectacular Background Animations --- */
.bg-animation {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden;
background: linear-gradient(120deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 50%, var(--bg-grad-3) 100%);
background-size: 200% 200%; animation: gradientMove 15s ease infinite;
            will-change: background-position;
}
@keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

        .orb { position: absolute; border-radius: 50%; animation: floatOrb 12s infinite ease-in-out alternate; will-change: transform; }
        .orb:nth-child(1) { width: 350px; height: 350px; background: radial-gradient(circle, var(--orb-1) 0%, transparent 70%); top: -5%; left: -5%; }
        .orb:nth-child(2) { width: 450px; height: 450px; background: radial-gradient(circle, var(--orb-2) 0%, transparent 70%); bottom: -10%; right: -5%; animation-delay: -4s; }
        .orb:nth-child(3) { width: 250px; height: 250px; background: radial-gradient(circle, var(--orb-3) 0%, transparent 70%); top: 35%; left: 35%; animation-delay: -7s; }
@keyframes floatOrb { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(60px, 60px) scale(1.3); } }

/* --- UI Container --- */
.container {
width: 100vw; height: 100vh; max-width: 100vw;
            background: var(--glass-bg); backdrop-filter: blur(8px);
            transform: translateZ(0); /* Kích hoạt tăng tốc phần cứng */
display: flex; flex-direction: column; overflow: hidden;
}

/* --- Header --- */
header {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 20px; border-bottom: 1px solid var(--glass-border); background: var(--header-bar-bg);
flex-shrink: 0; position: relative; z-index: 50; height: 70px;
}
.header-left { display: flex; align-items: center; gap: 15px; }
.site-brand { display: flex; align-items: center; gap: 10px; color: var(--text-main); text-decoration: none; }
.site-brand img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary); }
.site-brand-text { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.site-brand-text span { color: var(--primary); font-size: 0.75rem; display: block; font-family: 'Quicksand', sans-serif; font-weight: 600; text-transform: uppercase; }

/* --- Sidebar Navigation (Premium Styling) --- */
.sidebar-menu {
  position: fixed; top: 0; left: -320px; width: 300px; height: 100vh;
  background: linear-gradient(135deg, rgba(30,41,59,0.85), rgba(15,23,42,0.95));
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  border-right: 1px solid rgba(255,255,255,0.05); z-index: 100000;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Hiệu ứng nảy mượt mà */
  display: flex; flex-direction: column; padding: 25px 20px;
  box-shadow: 20px 0 50px rgba(0,0,0,0.5);
}
[data-theme="light"] .sidebar-menu { background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248,250,252,0.95)); border-right: 1px solid rgba(0,0,0,0.05); box-shadow: 20px 0 50px rgba(161,140,209,0.2); }
.sidebar-menu.open { left: 0; }

.sidebar-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 20px; margin-bottom: 25px; }
[data-theme="light"] .sidebar-header { border-bottom: 1px solid rgba(0,0,0,0.05); }

.sidebar-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 99999; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; backdrop-filter: blur(5px); }
.sidebar-overlay.show { opacity: 1; pointer-events: auto; }

.nav-tabs-vertical { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; scrollbar-width: none; padding-right: 5px; }
.nav-tabs-vertical::-webkit-scrollbar { display: none; }

/* Giao diện nút Menu dọc */
.nav-tabs-vertical .nav-btn { 
    width: 100%; text-align: left; justify-content: flex-start; 
    padding: 12px 15px; display: flex; align-items: center; gap: 15px; 
    font-size: 1.05rem; border-radius: 12px; border: 1px solid transparent;
    background: transparent; color: var(--text-muted); font-weight: 600;
    transition: all 0.3s ease; box-shadow: none; transform: none; white-space: normal;
}

/* Khung icon bo góc */
.nav-tabs-vertical .nav-btn i { 
    font-size: 1.2rem; width: 38px; height: 38px; display: flex; flex-shrink: 0;
    align-items: center; justify-content: center; 
    background: rgba(255,255,255,0.05); border-radius: 10px; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
[data-theme="light"] .nav-tabs-vertical .nav-btn i { background: rgba(0,0,0,0.05); }

/* Hiệu ứng Hover trượt nhẹ */
.nav-tabs-vertical .nav-btn:hover { 
    background: rgba(255,255,255,0.03); color: var(--text-main); 
    transform: translateX(8px); border-color: transparent; box-shadow: none;
}
[data-theme="light"] .nav-tabs-vertical .nav-btn:hover { background: rgba(0,0,0,0.03); }
.nav-tabs-vertical .nav-btn:hover i { 
    background: var(--primary); color: white; transform: scale(1.1) rotate(8deg); box-shadow: 0 4px 10px rgba(56,189,248,0.4);
}

/* Trạng thái Đang chọn (Active) */
.nav-tabs-vertical .nav-btn.active { 
    background: linear-gradient(90deg, rgba(56,189,248,0.15) 0%, transparent 100%);
    border-left: 4px solid var(--primary); color: var(--primary); border-radius: 4px 12px 12px 4px;
    font-weight: 800; transform: none; box-shadow: none; border-top: 1px solid transparent; border-right: 1px solid transparent; border-bottom: 1px solid transparent;
}
[data-theme="light"] .nav-tabs-vertical .nav-btn.active { background: linear-gradient(90deg, rgba(67,56,202,0.15) 0%, transparent 100%); }
.nav-tabs-vertical .nav-btn.active i { 
    background: var(--primary); color: white; box-shadow: 0 4px 15px rgba(56,189,248,0.5); transform: scale(1.05);
}

/* Hiệu ứng load menu xếp tầng */
.sidebar-menu.open .nav-tabs-vertical .nav-btn {
    animation: slideInRight 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    opacity: 0; transform: translateX(-20px);
}
.sidebar-menu.open .nav-tabs-vertical .nav-btn:nth-child(1) { animation-delay: 0.05s; }
.sidebar-menu.open .nav-tabs-vertical .nav-btn:nth-child(2) { animation-delay: 0.1s; }
.sidebar-menu.open .nav-tabs-vertical .nav-btn:nth-child(3) { animation-delay: 0.15s; }
.sidebar-menu.open .nav-tabs-vertical .nav-btn:nth-child(4) { animation-delay: 0.2s; }
.sidebar-menu.open .nav-tabs-vertical .nav-btn:nth-child(5) { animation-delay: 0.25s; }
.sidebar-menu.open .nav-tabs-vertical .nav-btn:nth-child(6) { animation-delay: 0.3s; }
.sidebar-menu.open .nav-tabs-vertical .nav-btn:nth-child(7) { animation-delay: 0.35s; }
.sidebar-menu.open .nav-tabs-vertical .nav-btn:nth-child(8) { animation-delay: 0.4s; }
@keyframes slideInRight { to { opacity: 1; transform: translateX(0); } }

/* Nút Admin đặc biệt */
#navAdmin.nav-btn {
    margin-top: 20px;
    background: linear-gradient(135deg, rgba(255,8,68,0.1), rgba(255,177,153,0.1)) !important;
    border: 1px solid rgba(255,8,68,0.3) !important; color: #ffb199 !important; border-radius: 12px;
}
#navAdmin.nav-btn i { background: linear-gradient(135deg, #ff0844, #ffb199); color: white; }
#navAdmin.nav-btn:hover { background: linear-gradient(135deg, rgba(255,8,68,0.2), rgba(255,177,153,0.2)) !important; transform: translateX(8px); box-shadow: 0 5px 15px rgba(255,8,68,0.2) !important; border-color: #ff0844 !important; color: #ff0844 !important; }
[data-theme="light"] #navAdmin.nav-btn { color: #e11d48 !important; }

.quote-container { text-align: center; margin: 0 auto 30px; font-style: italic; color: var(--text-muted); max-width: 650px; padding: 15px 25px; background: rgba(0,0,0,0.2); border-radius: 10px; border-left: 4px solid var(--accent); }
[data-theme="light"] .quote-container { background: rgba(255,255,255,0.7); }
.nav-btn {
background: transparent; border: 1px solid var(--glass-border); color: var(--text-main);
padding: 10px 25px; border-radius: 30px; cursor: pointer; font-weight: 700; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); white-space: nowrap; flex-shrink: 0;
}
.nav-btn:hover, .nav-btn.active { background: rgba(0, 242, 254, 0.2); border-color: var(--primary); box-shadow: 0 0 15px rgba(0,242,254,0.3); transform: translateY(-2px); }
[data-theme="light"] .nav-btn:hover, [data-theme="light"] .nav-btn.active { background: var(--primary); color: white; box-shadow: 0 0 15px rgba(67, 56, 202, 0.4); }
.right-controls { display: flex; align-items: center; gap: 15px; }
.icon-btn {
background: rgba(255,255,255,0.1); border: 1px solid var(--glass-border); color: var(--text-main); backdrop-filter: blur(5px);
width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center;
cursor: pointer; transition: 0.3s;
}
[data-theme="light"] .icon-btn { background: rgba(255,255,255,0.6); }
.icon-btn:hover { background: var(--primary); color: white; transform: scale(1.1); }

/* --- Menu Highlight Animation --- */
.menu-pulse-btn {
position: relative; animation: menuPulse 2s infinite; overflow: visible !important;
}
.menu-pulse-btn::after {
content: "NEW"; position: absolute; top: -5px; right: -10px;
background: linear-gradient(135deg, #ff0844, #ffb199); color: white;
font-size: 0.6rem; font-family: 'Orbitron', sans-serif; font-weight: 900;
padding: 2px 6px; border-radius: 8px; box-shadow: 0 2px 5px rgba(255,8,68,0.5);
animation: badgeBounce 2s infinite; pointer-events: none; z-index: 10;
}
@keyframes menuPulse {
0% { box-shadow: 0 0 0 0 rgba(244, 114, 182, 0.7); }
70% { box-shadow: 0 0 0 12px rgba(244, 114, 182, 0); }
100% { box-shadow: 0 0 0 0 rgba(244, 114, 182, 0); }
}
@keyframes badgeBounce {
0%, 100% { transform: scale(1) rotate(0deg); }
25% { transform: scale(1.2) rotate(-5deg); }
75% { transform: scale(1.2) rotate(5deg); }
}

/* --- Sections --- */
.mode-section { display: none; flex: 1; padding: 30px; overflow-y: auto; overflow-x: hidden; animation: fadeUp 0.4s ease; }
.mode-section.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulseGlow { 0% { box-shadow: 0 0 15px rgba(0,242,254,0.2); } 50% { box-shadow: 0 0 25px rgba(0,242,254,0.6); } 100% { box-shadow: 0 0 15px rgba(0,242,254,0.2); } }

/* --- 1. Target Mode --- */
.target-wrapper { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.time-blocks { display: flex; gap: 20px; }
.time-block {
background: var(--cell-bg); padding: 20px 30px; border-radius: 15px; border: 1px solid var(--primary);
text-align: center; box-shadow: 0 10px 30px rgba(0,242,254,0.1); min-width: 130px; position: relative; overflow: hidden;
animation: fadeInUp 0.5s ease backwards; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            will-change: transform, box-shadow;
}
.time-block:hover { transform: translateY(-10px) scale(1.05); box-shadow: 0 15px 30px rgba(0,242,254,0.3); z-index: 10; }
.time-block:nth-child(1) { animation-delay: 0.1s; } .time-block:nth-child(2) { animation-delay: 0.2s; }
.time-block:nth-child(3) { animation-delay: 0.3s; } .time-block:nth-child(4) { animation-delay: 0.4s; }
.time-block .num { font-family: 'Orbitron', sans-serif; font-size: 4rem; font-weight: 700; color: var(--primary); text-shadow: 0 0 15px rgba(0,242,254,0.5); }
.time-block .label { font-size: 1rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; margin-top: 5px; }

/* Exam Info Dashboard */
.exam-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; width: 100%; max-width: 1000px; }
.exam-card {
background: var(--cell-bg); border: 1px solid var(--glass-border); border-radius: 15px; padding: 25px;
box-shadow: 0 5px 15px rgba(0,0,0,0.3); backdrop-filter: blur(10px);
animation: fadeInUp 0.6s ease backwards; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            will-change: transform, box-shadow;
}
.exam-card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0,0,0,0.4); border-color: var(--primary); }
.exam-card:nth-child(1) { animation-delay: 0.2s; } .exam-card:nth-child(2) { animation-delay: 0.3s; } .exam-card:nth-child(3) { animation-delay: 0.4s; }
.exam-card h3 { color: var(--accent); margin-bottom: 15px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; }
.exam-card ul { list-style: none; color: var(--text-main); font-size: 0.95rem; line-height: 1.8; }
.exam-card ul li i { color: var(--primary); width: 25px; }

/* ToDo List */
.todo-card { grid-column: 1 / -1; max-width: 600px; margin: 0 auto; width: 100%; }
.todo-list { list-style: none; padding: 0; max-height: 200px; overflow-y: auto; margin-top: 15px; }
.todo-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(255,255,255,0.05); margin-bottom: 8px; border-radius: 8px; transition: 0.3s; border: 1px solid transparent; animation: fadeInUp 0.4s ease backwards; }
.todo-item:hover { border-color: rgba(255,255,255,0.2); }
.todo-item.completed span { text-decoration: line-through; color: var(--text-muted); }
.todo-item button { background: transparent; border: none; color: var(--accent); cursor: pointer; font-size: 1.1rem; transition: 0.2s; }
.todo-item button:hover { transform: scale(1.2); }
.todo-item input[type="checkbox"] { margin-right: 10px; cursor: pointer; accent-color: var(--primary); transform: scale(1.2); }
.custom-time-input { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }
.custom-time-input input { width: 120px; padding: 10px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--cell-bg); color: var(--text-main); outline: none; text-align: center; font-family: 'Quicksand'; font-weight: bold; }
.custom-time-input input:focus { border-color: var(--primary); box-shadow: 0 0 10px rgba(0,242,254,0.3); }

.todo-progress-container { background: rgba(0,0,0,0.1); border-radius: 10px; height: 8px; margin-top: 15px; overflow: hidden; width: 100%; }
[data-theme="light"] .todo-progress-container { background: rgba(0,0,0,0.08); }
#todoProgress { width: 0%; height: 100%; background: var(--success); transition: width 0.5s ease; border-radius: 10px; }

/* --- 2. Timer Mode --- */
.timer-layout { display: flex; flex-direction: column; align-items: center; }
.presets { display: flex; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; justify-content: center; }
.preset-btn {
background: var(--cell-bg); border: 1px solid var(--glass-border); color: var(--text-main);
padding: 10px 20px; border-radius: 10px; cursor: pointer; font-weight: 700;
}
.preset-btn.selected, .preset-btn:hover { background: var(--primary); color: #000; box-shadow: 0 0 15px var(--primary); border-color: var(--primary); }

/* Circular Progress Timer */
.timer-visual { position: relative; width: 350px; height: 350px; display: flex; justify-content: center; align-items: center; margin-bottom: 30px; animation: pulseGlow 4s infinite; border-radius: 50%; }
.progress-ring { position: absolute; top: 0; left: 0; transform: rotate(-90deg); }
.progress-ring__circle { transition: stroke-dashoffset 1s linear, stroke 0.3s ease; transform-origin: 50% 50%; }
.timer-text-container { text-align: center; z-index: 10; }
.timer-text-container .time { font-family: 'Orbitron', sans-serif; font-size: 5rem; font-weight: 700; line-height: 1; text-shadow: 0 0 20px rgba(0,242,254,0.5); }
.timer-text-container .phase { font-size: 1rem; color: var(--accent); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-top: 5px; }

.timer-controls button {
padding: 15px 30px; margin: 0 10px; border-radius: 30px; border: none; font-weight: 700;
font-size: 1rem; cursor: pointer; font-family: 'Quicksand', sans-serif; color: white; transition: 0.3s;
}
.btn-start { background: linear-gradient(135deg, #11998e, #38ef7d); box-shadow: 0 5px 15px rgba(56, 239, 125, 0.4); }
.btn-pause { background: linear-gradient(135deg, #f12711, #f5af19); box-shadow: 0 5px 15px rgba(245, 175, 25, 0.4); }
.btn-add { background: rgba(255,255,255,0.1); border: 1px solid var(--glass-border) !important; color: white; }
[data-theme="light"] .btn-add { color: var(--text-main); background: rgba(255,255,255,0.5); }
.btn-add:hover { background: rgba(255,255,255,0.2); }

/* --- 3. Schedule Mode --- */
.schedule-layout { display: flex; gap: 20px; align-items: flex-start; }
.main-table { flex: 1; overflow-x: auto; }
.schedule-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; background: var(--cell-bg); padding: 15px; border-radius: 15px; border: 1px solid var(--glass-border); }

/* Color Picker Palette */
.palette { display: flex; gap: 8px; align-items: center; background: var(--cell-bg); padding: 5px 10px; border-radius: 20px; border: 1px solid var(--glass-border); }
.color-dot { width: 25px; height: 25px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: 0.2s; }
.color-dot.active { border-color: white; transform: scale(1.2); box-shadow: 0 0 10px currentColor; }

.action-btn { background: rgba(255,255,255,0.1); border: 1px solid var(--glass-border); padding: 8px 15px; color: var(--text-main); border-radius: 10px; cursor: pointer; font-weight: 700; transition: all 0.3s ease; font-family: var(--main-font); backdrop-filter: blur(5px); }
.action-btn:hover { background: var(--primary); color: white; border-color: var(--primary); box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4); transform: translateY(-2px); }
.btn-export { background: linear-gradient(45deg, #8E2DE2, #4A00E0); border: none; }

table { width: 100%; border-collapse: separate; border-spacing: 6px; }
th, td { padding: 15px; text-align: center; border-radius: 10px; font-weight: 600; border: 1px solid var(--cell-border); outline: none; transition: 0.2s; }
th { background: var(--header-bg); color: var(--primary); font-size: 0.9rem; text-transform: uppercase; }
td { background: var(--cell-bg); cursor: text; }
td:focus { border-color: var(--primary); box-shadow: inset 0 0 10px rgba(0,242,254,0.2); }

/* Sidebar Notes */
.sidebar-notes { width: 280px; background: var(--cell-bg); border: 1px solid var(--glass-border); border-radius: 15px; padding: 20px; display: flex; flex-direction: column; height: 600px; }
.sidebar-notes h3 { color: var(--primary); margin-bottom: 15px; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; }
.note-area { flex: 1; background: transparent; border: none; color: var(--text-main); font-family: var(--main-font); resize: none; outline: none; line-height: 1.6; }

/* --- Kho Tài Liệu (Docs Mode) CSS --- */
.docs-layout { display: flex; flex-direction: column; gap: 20px; }
.docs-controls { display: flex; gap: 15px; background: var(--cell-bg); padding: 20px; border-radius: 15px; border: 1px solid var(--glass-border); flex-wrap: wrap; align-items: center; }
.doc-input { flex: 1; min-width: 200px; padding: 12px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--text-main); outline: none; font-family: var(--main-font); transition: all 0.3s ease; }
.doc-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25); background: var(--cell-bg); }
.docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 10px; }
.doc-card { background: var(--cell-bg); border: 1px solid var(--glass-border); border-radius: 15px; padding: 20px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 160px; }
.doc-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 15px 30px rgba(0,0,0,0.3); border-color: var(--primary); }
[data-theme="light"] .doc-card:hover { box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.doc-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent); transform: skewX(-20deg); transition: 0.5s; }
.doc-card:hover::before { left: 150%; }
.doc-title { font-size: 1.2rem; font-weight: 700; color: var(--primary); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.doc-meta { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 15px; flex: 1; }
.doc-actions { display: flex; gap: 10px; justify-content: flex-end; }
.doc-btn { padding: 8px 15px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 5px; text-decoration: none; color: white; font-family: var(--main-font); }
.btn-view { background: linear-gradient(135deg, #00f2fe, #4facfe); }
.btn-delete { background: linear-gradient(135deg, #ff0844, #ffb199); }
.doc-btn:hover { filter: brightness(1.2); transform: scale(1.05); }

/* Document Viewer Modal */
.doc-viewer-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 10000; flex-direction: column; backdrop-filter: blur(10px); }
.doc-viewer-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; background: rgba(0,0,0,0.5); border-bottom: 1px solid var(--glass-border); }
.doc-viewer-header h3 { color: white; font-family: 'Quicksand'; margin: 0; font-size: 1.2rem; }
.doc-viewer-modal iframe { flex: 1; width: 100%; height: 100%; border: none; background: #e5e5e5; }

/* Toast Notification */
.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { background: var(--glass-bg); backdrop-filter: blur(10px); border-left: 4px solid var(--success); color: var(--text-main); padding: 15px 25px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); transform: translateX(120%); opacity: 0; transition: all 0.3s ease; display: flex; align-items: center; gap: 10px; font-weight: 600; pointer-events: auto; position: relative; overflow: hidden; }
.toast.show { transform: translateX(0); opacity: 1; }
.toast.error { border-left-color: var(--accent); }
.toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; opacity: 0.8; }
.toast.show .toast-progress { animation: toastProgress 2.9s linear forwards; }
@keyframes toastProgress { to { width: 0%; } }

/* Bell Ringing Animation */
@keyframes ringBell {
0%, 100% { transform: rotate(0deg); }
10%, 30%, 50%, 70%, 90% { transform: rotate(12deg); }
20%, 40%, 60%, 80% { transform: rotate(-12deg); }
}
.ring-bell { display: inline-block; transform-origin: top center; animation: ringBell 1.5s ease-in-out infinite; }

/* Audio Wave Animation */
.audio-wave { display: none; align-items: center; gap: 3px; height: 16px; margin-left: 5px; }
.audio-wave.playing { display: flex; }
.audio-wave .bar { width: 3px; background: var(--accent); border-radius: 3px; animation: wave 1s ease-in-out infinite; }
.audio-wave .bar:nth-child(1) { height: 40%; animation-delay: 0s; }
.audio-wave .bar:nth-child(2) { height: 100%; animation-delay: 0.2s; }
.audio-wave .bar:nth-child(3) { height: 70%; animation-delay: 0.4s; }
.audio-wave .bar:nth-child(4) { height: 30%; animation-delay: 0.6s; }
@keyframes wave { 0%, 100% { height: 30%; } 50% { height: 100%; } }

/* Music Panel */
.music-panel { position: absolute; top: 75px; right: 80px; width: 320px; background: var(--glass-bg); backdrop-filter: blur(25px); border: 1px solid var(--glass-border); border-radius: 15px; padding: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: none; flex-direction: column; z-index: 1000; animation: fadeUp 0.3s ease; }
.music-panel.show { display: flex; }
.music-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.music-panel-header h4 { font-family: var(--main-font); font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text-main); }
@media (max-width: 768px) { .music-panel { top: 60px; right: 10px; width: calc(100vw - 20px); } }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--primary), var(--accent)); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--accent), var(--primary)); }

/* --- Sheet Mode Styles --- */
#tabSheet.active { display: flex; flex-direction: column; padding: 10px; overflow: hidden; gap: 8px; }
.sheet-toolbar { 
display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
background: var(--cell-bg); padding: 8px 20px; border-radius: 12px; border: 1px solid var(--glass-border); 
}
.zoom-group { display: flex; align-items: center; background: rgba(0,0,0,0.2); border-radius: 30px; border: 1px solid var(--glass-border); padding: 2px; gap: 2px; }
[data-theme="light"] .zoom-group { background: rgba(0,0,0,0.05); }
.zoom-btn-modern { background: transparent; border: none; color: var(--text-main); font-family: 'Quicksand', sans-serif; font-weight: 700; padding: 6px 15px; border-radius: 25px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 5px; font-size: 0.9rem; outline: none; }
.zoom-btn-modern:hover { background: var(--primary); color: #000; box-shadow: 0 0 15px rgba(0,242,254,0.5); transform: translateY(-1px); }
.zoom-btn-modern:active { transform: scale(0.95); }
.zoom-divider { width: 1px; height: 14px; background: var(--glass-border); margin: 0 2px; }

.premium-buy-btn {
background: linear-gradient(135deg, #FFD700, #FF8C00); color: #652100; font-weight: 800; font-size: 0.95rem; padding: 8px 20px; border-radius: 30px; text-decoration: none; display: flex; align-items: center; gap: 8px; border: none; font-family: 'Quicksand', sans-serif; box-shadow: 0 5px 15px rgba(255, 140, 0, 0.4); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; overflow: hidden; z-index: 1;
}
.premium-buy-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 25px rgba(255, 140, 0, 0.6); color: #4A1500; }
.premium-buy-btn:active { transform: scale(0.95); }
.premium-buy-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(255,255,255,0.8), transparent); transform: skewX(-25deg); animation: premiumShine 3s infinite; z-index: -1; }
@keyframes premiumShine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }

#sheet-wrap { flex: 1; min-height: 0; position: relative; border-radius: 12px; background: var(--cell-bg); overflow: hidden; border: 1px solid var(--glass-border); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
#sheet-iframe { width: 100%; height: 100%; border: 0; transform-origin: top left; will-change: transform, width, height; }

/* --- Mobile Optimization --- */
@media (max-width: 768px) {
.site-brand-text { display: none; }
#userName { display: none; }
.right-controls { gap: 8px; }
.right-controls .icon-btn { width: 35px; height: 35px; font-size: 0.9rem; }
.right-controls .action-btn { padding: 8px 12px; font-size: 0.85rem; }

#tabSheet.active { padding: 0; gap: 0; }

.sheet-toolbar { 
border-radius: 0; border-width: 0 0 1px 0; 
padding: 8px 10px; margin-bottom: 0; 
background: var(--glass-bg); backdrop-filter: blur(20px);
}

#sheet-wrap { border-radius: 0; border: none; box-shadow: none; }

.premium-buy-btn { padding: 8px 12px; font-size: 0.85rem; gap: 5px; }
.zoom-btn-modern { padding: 6px 10px; font-size: 0.85rem; }

/* --- Schedule Mode Mobile --- */
.schedule-layout { flex-direction: column; }
.schedule-toolbar { flex-direction: column; gap: 15px; align-items: center; }
.schedule-toolbar > div { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; gap: 10px; }
.schedule-toolbar .action-btn { flex: 1; min-width: 110px; text-align: center; justify-content: center; }
.sidebar-notes { width: 100%; height: 250px; }
.main-table { width: 100%; }
th, td { padding: 10px 5px; font-size: 0.85rem; min-width: 90px; }
th { font-size: 0.8rem; padding: 8px 5px; }
}