diff --git a/static/css/style.css b/static/css/style.css
index d982d7b..363d2a7 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,5 +1,6 @@
-/* Ohm Streaming - Premium Dark Theme */
+/* Ohm Streaming - Material Design Dark Theme */
 :root {
+    /* ========== EXISTING VARIABLES (kept for compatibility) ========== */
     --bg-dark: #0b0b14;
     --bg-card: #161625;
     --primary: #00d9ff;
@@ -14,8 +15,79 @@
     --card-radius: 12px;
     --input-radius: 8px;
     --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* ========== MATERIAL DESIGN VARIABLES ========== */
+    /* Material Colors */
+    --md-primary: #6C63FF;
+    --md-primary-variant: #5a52d5;
+    --md-secondary: #00BCD4;
+    --md-secondary-variant: #0097a7;
+    --md-surface: #1E1E2E;
+    --md-surface-variant: #2A2A3C;
+    --md-background: #12121c;
+    --md-error: #ff5252;
+    --md-success: #4caf50;
+    --md-warning: #ffc107;
+    --md-on-primary: #ffffff;
+    --md-on-surface: #e0e0e0;
+    --md-on-background: #ffffff;
+    --md-outline: rgba(255, 255, 255, 0.12);
+
+    /* Material Elevation (Box Shadows) */
+    --md-elevation-0: none;
+    --md-elevation-1: 0 2px 8px rgba(0, 0, 0, 0.3);
+    --md-elevation-2: 0 4px 16px rgba(0, 0, 0, 0.4);
+    --md-elevation-3: 0 6px 24px rgba(0, 0, 0, 0.5);
+    --md-elevation-4: 0 8px 32px rgba(0, 0, 0, 0.6);
+    --md-elevation-hover: 0 12px 40px rgba(0, 0, 0, 0.7);
+
+    /* Material Radius */
+    --md-radius: 16px;
+    --md-radius-sm: 8px;
+    --md-radius-lg: 24px;
+    --md-radius-pill: 50px;
+
+    /* Material Transitions */
+    --md-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    --md-transition-standard: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    --md-transition-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Material Letter Spacing */
+    --md-letter-spacing: 0.5px;
+    --md-letter-spacing-lg: 1px;
+
+    /* ========== LIGHT THEME VARIABLES (commented, ready for toggle) ========== */
+    /*
+    [data-theme="light"] {
+        --md-primary: #6C63FF;
+        --md-primary-variant: #5a52d5;
+        --md-secondary: #00BCD4;
+        --md-secondary-variant: #0097a7;
+        --md-surface: #ffffff;
+        --md-surface-variant: #f5f5f5;
+        --md-background: #fafafa;
+        --md-error: #d32f2f;
+        --md-success: #388e3c;
+        --md-warning: #ffa000;
+        --md-on-primary: #ffffff;
+        --md-on-surface: #1c1b1f;
+        --md-on-background: #1c1b1f;
+        --md-outline: rgba(0, 0, 0, 0.12);
+        --md-elevation-1: 0 2px 8px rgba(0, 0, 0, 0.15);
+        --md-elevation-2: 0 4px 16px rgba(0, 0, 0, 0.2);
+        --md-elevation-3: 0 6px 24px rgba(0, 0, 0, 0.25);
+        --md-elevation-4: 0 8px 32px rgba(0, 0, 0, 0.3);
+        --md-elevation-hover: 0 12px 40px rgba(0, 0, 0, 0.35);
+        --bg-dark: #f5f5f5;
+        --bg-card: #ffffff;
+        --primary: #6C63FF;
+        --text-main: #1c1b1f;
+        --text-dim: #605d62;
+    }
+    */
 }
 
+/* ========== BASE RESET ========== */
 * {
     margin: 0;
     padding: 0;
@@ -30,6 +102,34 @@ body {
     overflow-x: hidden;
 }
 
+/* ========== CUSTOM SCROLLBAR (Material Design) ========== */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--md-primary);
+    border-radius: 10px;
+    transition: var(--md-transition-standard);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--md-primary-variant);
+}
+
+/* Firefox scrollbar */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--md-primary) rgba(255, 255, 255, 0.03);
+}
+
+/* ========== CONTAINER ========== */
 .container {
     max-width: 1400px;
     margin: 0 auto;
@@ -37,10 +137,12 @@ body {
 }
 
 @media (max-width: 768px) {
-    .container { padding: 0 20px; }
+    .container {
+        padding: 0 20px;
+    }
 }
 
-/* Typography */
+/* ========== TYPOGRAPHY ========== */
 h1 {
     font-size: 2.5rem;
     font-weight: 800;
@@ -71,22 +173,44 @@ h1 {
     padding-left: 15px;
 }
 
-/* Global Button System */
+/* ========== MATERIAL DESIGN BUTTONS ========== */
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 10px 20px;
-    border-radius: var(--input-radius);
+    border-radius: var(--md-radius-sm);
     font-size: 0.9rem;
     font-weight: 600;
+    letter-spacing: var(--md-letter-spacing);
     cursor: pointer;
-    transition: var(--transition);
+    transition: var(--md-transition-standard);
     border: 1px solid transparent;
     text-decoration: none;
     color: #fff;
     white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+}
+
+/* Ripple effect (CSS-only) */
+.btn::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.3);
+    transform: translate(-50%, -50%);
+    transition: width 0.6s, height 0.6s;
+}
+
+.btn:active::before {
+    width: 300px;
+    height: 300px;
 }
 
 .btn:disabled {
@@ -94,17 +218,59 @@ h1 {
     cursor: not-allowed;
 }
 
+.btn:disabled::before {
+    display: none;
+}
+
+/* Material Button Variants */
+.btn-contained {
+    background: var(--md-primary);
+    color: var(--md-on-primary);
+    box-shadow: var(--md-elevation-1);
+}
+
+.btn-contained:hover:not(:disabled) {
+    background: var(--md-primary-variant);
+    box-shadow: var(--md-elevation-2);
+    transform: translateY(-2px);
+}
+
+.btn-outlined {
+    background: transparent;
+    border: 1px solid var(--md-outline);
+    color: var(--md-on-surface);
+}
+
+.btn-outlined:hover:not(:disabled) {
+    background: rgba(108, 99, 255, 0.08);
+    border-color: var(--md-primary);
+    color: var(--md-primary);
+}
+
+.btn-text {
+    background: transparent;
+    color: var(--md-primary);
+    padding: 10px 15px;
+}
+
+.btn-text:hover:not(:disabled) {
+    background: rgba(108, 99, 255, 0.08);
+}
+
+/* Primary Button (legacy compatibility) */
 .btn-primary {
     background: var(--primary);
     color: #000;
+    box-shadow: var(--md-elevation-1);
 }
 
 .btn-primary:hover:not(:disabled) {
     background: var(--primary-hover);
-    box-shadow: 0 0 15px var(--primary-glow);
-    transform: translateY(-1px);
+    box-shadow: 0 0 15px var(--primary-glow), var(--md-elevation-2);
+    transform: translateY(-2px);
 }
 
+/* Secondary Button */
 .btn-secondary {
     background: rgba(255, 255, 255, 0.05);
     border-color: rgba(255, 255, 255, 0.1);
@@ -114,13 +280,22 @@ h1 {
 .btn-secondary:hover:not(:disabled) {
     background: rgba(255, 255, 255, 0.1);
     border-color: rgba(255, 255, 255, 0.2);
+    box-shadow: var(--md-elevation-1);
 }
 
+/* Accent Button */
 .btn-accent {
     background: var(--accent);
     color: #000;
+    box-shadow: var(--md-elevation-1);
 }
 
+.btn-accent:hover:not(:disabled) {
+    box-shadow: var(--md-elevation-2);
+    transform: translateY(-2px);
+}
+
+/* Danger Button */
 .btn-danger {
     background: rgba(255, 77, 77, 0.15);
     border-color: rgba(255, 77, 77, 0.3);
@@ -130,8 +305,10 @@ h1 {
 .btn-danger:hover:not(:disabled) {
     background: var(--danger);
     color: #fff;
+    box-shadow: var(--md-elevation-2);
 }
 
+/* Button Sizes */
 .btn-small, .btn-sm {
     padding: 6px 12px;
     font-size: 0.8rem;
@@ -166,11 +343,45 @@ h1 {
     font-size: 0.75rem;
     font-weight: 700;
     text-transform: uppercase;
+    letter-spacing: var(--md-letter-spacing-lg);
 }
-.btn-watch { background: var(--primary); color: #000; }
-.btn-download { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; }
 
-/* Horizontal Scroll Row (Homepage) */
+.btn-watch {
+    background: var(--primary);
+    color: #000;
+    box-shadow: var(--md-elevation-1);
+}
+
+.btn-watch:hover {
+    box-shadow: var(--md-elevation-2);
+}
+
+.btn-download {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: #fff;
+}
+
+.btn-download:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+/* ========== MATERIAL DESIGN CARDS ========== */
+.card, .hc, .download-item {
+    background: var(--md-surface);
+    border-radius: var(--md-radius);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    box-shadow: var(--md-elevation-1);
+    transition: var(--md-transition-standard);
+}
+
+.card:hover, .hc:hover, .download-item:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--md-elevation-2);
+    border-color: rgba(255, 255, 255, 0.1);
+}
+
+/* ========== HORIZONTAL SCROLL ROW ========== */
 .home-row, .streaming-row, .recommendations-carousel, .releases-carousel {
     display: flex;
     gap: 16px;
@@ -179,59 +390,85 @@ h1 {
     scroll-behavior: smooth;
     -webkit-overflow-scrolling: touch;
 }
-.home-row::-webkit-scrollbar, .streaming-row::-webkit-scrollbar, .recommendations-carousel::-webkit-scrollbar, .releases-carousel::-webkit-scrollbar {
+
+.home-row::-webkit-scrollbar,
+.streaming-row::-webkit-scrollbar,
+.recommendations-carousel::-webkit-scrollbar,
+.releases-carousel::-webkit-scrollbar {
     height: 4px;
 }
-.home-row::-webkit-scrollbar-thumb, .streaming-row::-webkit-scrollbar-thumb, .recommendations-carousel::-webkit-scrollbar-thumb, .releases-carousel::-webkit-scrollbar-thumb {
+
+.home-row::-webkit-scrollbar-thumb,
+.streaming-row::-webkit-scrollbar-thumb,
+.recommendations-carousel::-webkit-scrollbar-thumb,
+.releases-carousel::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.1);
     border-radius: 10px;
 }
-.home-row::-webkit-scrollbar-thumb:hover, .streaming-row::-webkit-scrollbar-thumb:hover, .recommendations-carousel::-webkit-scrollbar-thumb:hover, .releases-carousel::-webkit-scrollbar-thumb:hover {
+
+.home-row::-webkit-scrollbar-thumb:hover,
+.streaming-row::-webkit-scrollbar-thumb:hover,
+.recommendations-carousel::-webkit-scrollbar-thumb:hover,
+.releases-carousel::-webkit-scrollbar-thumb:hover {
     background: var(--primary);
 }
 
-/* Home Card */
+/* ========== HOME CARD (Material Card) ========== */
 .hc {
     flex: 0 0 180px;
     display: block;
-    background: var(--bg-card);
-    border-radius: var(--card-radius);
+    background: var(--md-surface);
+    border-radius: var(--md-radius);
     overflow: hidden;
-    transition: var(--transition);
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    transition: var(--md-transition-standard);
+    border: 1px solid rgba(255, 255, 255, 0.06);
     text-decoration: none;
     color: inherit;
+    box-shadow: var(--md-elevation-1);
 }
+
 .hc:hover {
-    transform: scale(1.08);
+    transform: translateY(-2px) scale(1.02);
     z-index: 10;
     border-color: var(--primary);
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
+    box-shadow: var(--md-elevation-hover);
 }
+
 .hc-poster {
     position: relative;
     padding-top: 150%;
     background: #000;
 }
+
 .hc-poster img {
     position: absolute;
-    top: 0; left: 0; width: 100%; height: 100%;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
     object-fit: cover;
 }
+
 .hc-rating {
     position: absolute;
-    top: 8px; right: 8px;
+    top: 8px;
+    right: 8px;
     background: rgba(0, 0, 0, 0.85);
     color: #ffcc00;
-    padding: 2px 7px;
-    border-radius: 4px;
+    padding: 4px 8px;
+    border-radius: var(--md-radius-sm);
     font-size: 0.7rem;
     font-weight: 800;
+    letter-spacing: var(--md-letter-spacing);
+    backdrop-filter: blur(4px);
 }
+
 .hc-play {
     position: absolute;
-    bottom: 8px; right: 8px;
-    width: 32px; height: 32px;
+    bottom: 8px;
+    right: 8px;
+    width: 36px;
+    height: 36px;
     border-radius: 50%;
     background: var(--primary);
     color: var(--bg-dark);
@@ -240,23 +477,31 @@ h1 {
     justify-content: center;
     font-size: 0.75rem;
     opacity: 0;
-    transition: var(--transition);
+    transition: var(--md-transition-standard);
+    box-shadow: var(--md-elevation-2);
 }
-.hc:hover .hc-play { opacity: 1; }
+
+.hc:hover .hc-play {
+    opacity: 1;
+    transform: scale(1.1);
+}
+
 .hc-info {
-    padding: 10px;
+    padding: 12px;
 }
+
 .hc-src {
-    font-size: 0.6rem;
+    font-size: 0.65rem;
     font-weight: 700;
     text-transform: uppercase;
     color: var(--primary);
-    letter-spacing: 0.5px;
+    letter-spacing: var(--md-letter-spacing-lg);
     display: block;
-    margin-bottom: 2px;
+    margin-bottom: 4px;
 }
+
 .hc-title {
-    font-size: 0.82rem;
+    font-size: 0.85rem;
     font-weight: 600;
     display: block;
     white-space: nowrap;
@@ -265,35 +510,36 @@ h1 {
     color: var(--text-main);
 }
 
-/* Responsive Grid for Search */
+/* ========== RESPONSIVE GRID FOR SEARCH ========== */
 .anime-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
     gap: 20px;
 }
 
-/* Tabs UI */
+/* ========== MATERIAL TABS ========== */
 .tabs {
     display: flex;
     gap: 20px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-bottom: 1px solid var(--md-outline);
     margin-bottom: 30px;
     overflow-x: auto;
 }
 
 .tab {
-    padding: 15px 10px;
+    padding: 12px 24px;
     background: none;
     border: none;
     color: var(--text-dim);
     font-weight: 600;
     cursor: pointer;
     position: relative;
-    transition: var(--transition);
+    transition: var(--md-transition-standard);
     display: flex;
     align-items: center;
     gap: 8px;
     white-space: nowrap;
+    letter-spacing: var(--md-letter-spacing);
 }
 
 .tab svg {
@@ -313,20 +559,22 @@ h1 {
     content: '';
     position: absolute;
     bottom: -1px;
-    left: 0; width: 100%;
+    left: 0;
+    width: 100%;
     height: 3px;
     background: var(--primary);
     box-shadow: 0 0 10px var(--primary-glow);
+    border-radius: 3px 3px 0 0;
 }
 
-/* Modern Forms & Input Groups */
+/* ========== MATERIAL INPUTS ========== */
 .input-group {
     display: flex;
     background: rgba(255, 255, 255, 0.03);
-    border-radius: var(--card-radius);
+    border-radius: var(--md-radius);
     padding: 6px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    transition: var(--transition);
+    border: 1px solid var(--md-outline);
+    transition: var(--md-transition-standard);
 }
 
 .input-group:focus-within {
@@ -338,38 +586,90 @@ h1 {
 .input-group input {
     background: none;
     border: none;
-    padding: 10px 15px;
+    padding: 12px 16px;
     color: #fff;
     flex-grow: 1;
     font-size: 1rem;
 }
 
-.input-group input:focus { outline: none; }
+.input-group input:focus {
+    outline: none;
+}
+
+.input-group input::placeholder {
+    color: var(--text-dim);
+    opacity: 0.7;
+}
 
 .btn-search {
     padding: 0 25px;
+    border-radius: var(--md-radius-sm);
 }
 
-/* Auth Section UI */
+/* Material Underline Input Style */
+.form-group {
+    margin-bottom: 24px;
+    position: relative;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 8px;
+    color: var(--text-dim);
+    font-size: 0.85rem;
+    font-weight: 500;
+    letter-spacing: var(--md-letter-spacing);
+    transition: var(--md-transition-standard);
+}
+
+.form-group input {
+    width: 100%;
+    padding: 16px 0;
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid var(--md-outline);
+    color: #fff;
+    font-size: 1rem;
+    transition: var(--md-transition-standard);
+}
+
+.form-group input:focus {
+    outline: none;
+    border-bottom-color: var(--primary);
+}
+
+.form-group input:focus + label,
+.form-group input:not(:placeholder-shown) + label {
+    transform: translateY(-24px);
+    font-size: 0.75rem;
+    color: var(--primary);
+}
+
+.form-group input::placeholder {
+    color: transparent;
+}
+
+/* ========== AUTH SECTION ========== */
 .auth-panel {
     margin-bottom: 25px;
-    padding: 15px 20px;
+    padding: 16px 20px;
     background: linear-gradient(90deg, rgba(0, 217, 255, 0.1), transparent);
     border: 1px solid rgba(0, 217, 255, 0.15);
-    border-radius: var(--card-radius);
+    border-radius: var(--md-radius);
     display: flex;
     justify-content: space-between;
     align-items: center;
+    box-shadow: var(--md-elevation-1);
 }
 
 .auth-container {
     max-width: 450px;
     margin: 80px auto;
     padding: 40px;
-    background: var(--bg-card);
-    border-radius: 20px;
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
+    background: var(--md-surface);
+    border-radius: var(--md-radius-lg);
+    border: 1px solid var(--md-outline);
+    box-shadow: var(--md-elevation-3);
 }
 
 .auth-title {
@@ -380,22 +680,32 @@ h1 {
 .auth-tabs {
     display: flex;
     margin-bottom: 30px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-bottom: 1px solid var(--md-outline);
 }
 
 .auth-tab {
     flex: 1;
-    padding: 15px;
+    padding: 16px;
     text-align: center;
     cursor: pointer;
     color: var(--text-dim);
-    transition: var(--transition);
+    transition: var(--md-transition-standard);
     font-weight: 600;
+    position: relative;
 }
 
 .auth-tab.active {
     color: var(--primary);
-    border-bottom: 2px solid var(--primary);
+}
+
+.auth-tab.active::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background: var(--primary);
 }
 
 .auth-form {
@@ -406,39 +716,9 @@ h1 {
     display: block;
 }
 
-.form-group {
-    margin-bottom: 20px;
-}
-
-.form-group label {
-    display: block;
-    margin-bottom: 8px;
-    color: var(--text-dim);
-    font-size: 0.9rem;
-    font-weight: 500;
-}
-
-.form-group input {
-    width: 100%;
-    padding: 12px 15px;
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: var(--input-radius);
-    color: #fff;
-    font-size: 1rem;
-    transition: var(--transition);
-}
-
-.form-group input:focus {
-    outline: none;
-    border-color: var(--primary);
-    background: rgba(255, 255, 255, 0.05);
-    box-shadow: 0 0 10px rgba(0, 217, 255, 0.2);
-}
-
 .auth-error, .auth-success {
-    padding: 12px 15px;
-    border-radius: var(--input-radius);
+    padding: 12px 16px;
+    border-radius: var(--md-radius-sm);
     margin-bottom: 20px;
     font-size: 0.9rem;
     display: none;
@@ -456,14 +736,16 @@ h1 {
     color: var(--accent);
 }
 
-.show { display: block !important; }
+.show {
+    display: block !important;
+}
 
-/* Progress Bars */
+/* ========== MATERIAL PROGRESS BARS ========== */
 .progress-container {
-    height: 8px;
-    background: rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-    margin: 10px 0;
+    height: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+    margin: 12px 0;
     overflow: hidden;
 }
 
@@ -471,27 +753,29 @@ h1 {
     height: 100%;
     background: linear-gradient(90deg, var(--primary), var(--accent));
     transition: width 0.3s ease;
+    border-radius: 3px;
 }
 
-/* Icon Buttons */
+/* ========== ICON BUTTONS ========== */
 .btn-icon {
-    width: 36px;
-    height: 36px;
+    width: 40px;
+    height: 40px;
     padding: 0;
-    border-radius: 8px;
+    border-radius: var(--md-radius-sm);
     background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--md-outline);
     color: var(--text-main);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    transition: var(--transition);
+    transition: var(--md-transition-standard);
 }
 
 .btn-icon:hover {
     background: rgba(255, 255, 255, 0.1);
     border-color: rgba(255, 255, 255, 0.2);
+    box-shadow: var(--md-elevation-1);
 }
 
 .btn-icon.danger {
@@ -512,7 +796,7 @@ h1 {
     border-color: rgba(0, 255, 136, 0.3);
 }
 
-/* Download Items */
+/* ========== DOWNLOAD ITEMS ========== */
 .downloads-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
@@ -520,16 +804,20 @@ h1 {
 }
 
 .download-item {
-    background: var(--bg-card);
-    border-radius: var(--card-radius);
+    background: var(--md-surface);
+    border-radius: var(--md-radius);
     padding: 20px;
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    transition: var(--transition);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    transition: var(--md-transition-standard);
+    box-shadow: var(--md-elevation-1);
+    border-left: 4px solid var(--text-dim);
+    margin-bottom: 10px;
 }
 
 .download-item:hover {
     border-color: var(--primary);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+    transform: translateY(-2px);
+    box-shadow: var(--md-elevation-2);
 }
 
 .download-info {
@@ -563,105 +851,15 @@ h1 {
     justify-content: flex-end;
 }
 
-/* Badge System Enhancements */
-.badge-completed { color: var(--accent); background: rgba(0, 255, 136, 0.1); }
-.badge-failed { color: var(--danger); background: rgba(255, 77, 77, 0.1); }
-.badge-downloading { color: var(--primary); background: rgba(0, 217, 255, 0.1); }
-.badge-paused { color: #ffcc00; background: rgba(255, 204, 0, 0.1); }
-
-/* Loading Spinners & Empty States */
-.loading-placeholder, .loading-spinner-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 60px 20px;
-    color: var(--text-dim);
-    gap: 15px;
+.download-actions .btn-icon.warning {
+    color: #f0a500;
 }
 
-.spinner {
-    width: 30px;
-    height: 30px;
-    border: 3px solid rgba(0, 217, 255, 0.1);
-    border-top-color: var(--primary);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    to { transform: rotate(360deg); }
-}
-
-.empty-state, .no-results {
-    text-align: center;
-    padding: 80px 20px;
-    color: var(--text-dim);
-}
-
-.empty-state i, .no-results i {
-    font-size: 3.5rem;
-    margin-bottom: 20px;
-    display: block;
-    opacity: 0.15;
-}
-
-.htmx-indicator { display: none; }
-.htmx-indicator.htmx-request { display: flex; align-items: center; gap: 8px; }
-
-/* Section Containers */
-.section-container {
-    margin-bottom: 50px;
-}
-
-@media (max-width: 768px) {
-    .anime-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
-    .hc { flex: 0 0 140px; }
-    .tabs { gap: 10px; }
-    .auth-panel { flex-direction: column; gap: 15px; text-align: center; }
-}
-
-/* Alerts & Toasts */
-.toast-container {
-    position: fixed;
-    bottom: 30px;
-    right: 30px;
-    z-index: 9999;
-}
-
-.toast {
-    padding: 15px 25px;
-    background: var(--bg-card);
-    border-left: 4px solid var(--primary);
-    border-radius: 8px;
-    margin-top: 10px;
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
-    display: flex;
-    align-items: center;
-    gap: 15px;
-    animation: slideIn 0.3s ease-out;
-}
-
-@keyframes slideIn {
-    from { transform: translateX(100%); opacity: 0; }
-    to { transform: translateX(0); opacity: 1; }
-}
-
-/* ==================== Download Items ==================== */
-.download-item {
-    padding: 15px 18px;
-    background: var(--bg-card);
-    border-radius: var(--card-radius);
-    border-left: 4px solid var(--text-dim);
-    margin-bottom: 10px;
-    transition: var(--transition);
-}
-
-.download-item:hover {
-    border-color: var(--primary);
-    transform: translateX(3px);
+.download-actions .btn-icon.warning:hover {
+    background: rgba(240, 165, 0, 0.2);
 }
 
+/* Download Status Colors */
 .download-item.status-downloading {
     border-left-color: var(--primary);
     animation: pulse-border 2s ease-in-out infinite;
@@ -685,8 +883,12 @@ h1 {
 }
 
 @keyframes pulse-border {
-    0%, 100% { border-left-color: var(--primary); }
-    50% { border-left-color: rgba(0, 217, 255, 0.3); }
+    0%, 100% {
+        border-left-color: var(--primary);
+    }
+    50% {
+        border-left-color: rgba(0, 217, 255, 0.3);
+    }
 }
 
 /* Progress bar shimmer */
@@ -697,14 +899,295 @@ h1 {
 }
 
 @keyframes shimmer {
-    0% { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
+    0% {
+        background-position: 200% 0;
+    }
+    100% {
+        background-position: -200% 0;
+    }
 }
 
-/* Download action buttons */
-.download-actions .btn-icon.warning {
-    color: #f0a500;
+/* ========== BADGE SYSTEM ========== */
+.badge-completed {
+    color: var(--accent);
+    background: rgba(0, 255, 136, 0.1);
+    padding: 4px 8px;
+    border-radius: var(--md-radius-sm);
 }
-.download-actions .btn-icon.warning:hover {
-    background: rgba(240, 165, 0, 0.2);
+
+.badge-failed {
+    color: var(--danger);
+    background: rgba(255, 77, 77, 0.1);
+    padding: 4px 8px;
+    border-radius: var(--md-radius-sm);
+}
+
+.badge-downloading {
+    color: var(--primary);
+    background: rgba(0, 217, 255, 0.1);
+    padding: 4px 8px;
+    border-radius: var(--md-radius-sm);
+}
+
+.badge-paused {
+    color: #ffcc00;
+    background: rgba(255, 204, 0, 0.1);
+    padding: 4px 8px;
+    border-radius: var(--md-radius-sm);
+}
+
+/* ========== MATERIAL LOADING STATES ========== */
+.loading-placeholder, .loading-spinner-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    color: var(--text-dim);
+    gap: 15px;
+}
+
+/* Material Circular Spinner */
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid rgba(108, 99, 255, 0.2);
+    border-top-color: var(--md-primary);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Material Skeleton Loading */
+.skeleton {
+    background: linear-gradient(
+        90deg,
+        var(--md-surface) 0%,
+        var(--md-surface-variant) 50%,
+        var(--md-surface) 100%
+    );
+    background-size: 200% 100%;
+    animation: skeleton-loading 1.5s ease-in-out infinite;
+    border-radius: var(--md-radius-sm);
+}
+
+@keyframes skeleton-loading {
+    0% {
+        background-position: 200% 0;
+    }
+    100% {
+        background-position: -200% 0;
+    }
+}
+
+.skeleton-text {
+    height: 16px;
+    margin-bottom: 8px;
+}
+
+.skeleton-title {
+    height: 24px;
+    width: 70%;
+    margin-bottom: 12px;
+}
+
+.skeleton-card {
+    height: 200px;
+    border-radius: var(--md-radius);
+}
+
+.empty-state, .no-results {
+    text-align: center;
+    padding: 80px 20px;
+    color: var(--text-dim);
+}
+
+.empty-state i, .no-results i {
+    font-size: 3.5rem;
+    margin-bottom: 20px;
+    display: block;
+    opacity: 0.15;
+}
+
+.htmx-indicator {
+    display: none;
+}
+
+.htmx-indicator.htmx-request {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+/* ========== SECTION CONTAINERS ========== */
+.section-container {
+    margin-bottom: 50px;
+}
+
+/* ========== MATERIAL TOAST/SNACKBAR ========== */
+.toast-container {
+    position: fixed;
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+}
+
+.toast {
+    padding: 16px 24px;
+    background: var(--md-surface);
+    border-left: 4px solid var(--primary);
+    border-radius: var(--md-radius);
+    box-shadow: var(--md-elevation-3);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    animation: slide-up 0.3s ease-out;
+    min-width: 300px;
+    max-width: 500px;
+}
+
+.toast.success {
+    border-left-color: var(--md-success);
+}
+
+.toast.error {
+    border-left-color: var(--md-error);
+}
+
+.toast.warning {
+    border-left-color: var(--md-warning);
+}
+
+.toast.info {
+    border-left-color: var(--md-primary);
+}
+
+@keyframes slide-up {
+    from {
+        transform: translateY(100px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/* ========== RESPONSIVE BREAKPOINTS ========== */
+@media (max-width: 1200px) {
+    .anime-grid {
+        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    }
+}
+
+@media (max-width: 768px) {
+    .anime-grid {
+        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+        gap: 12px;
+    }
+
+    .hc {
+        flex: 0 0 140px;
+    }
+
+    .tabs {
+        gap: 10px;
+    }
+
+    .tab {
+        padding: 10px 16px;
+    }
+
+    .auth-panel {
+        flex-direction: column;
+        gap: 15px;
+        text-align: center;
+    }
+
+    .auth-container {
+        margin: 40px 20px;
+        padding: 24px;
+    }
+
+    .downloads-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .toast-container {
+        left: 20px;
+        right: 20px;
+        transform: none;
+    }
+
+    .toast {
+        min-width: auto;
+        width: 100%;
+    }
+}
+
+@media (max-width: 480px) {
+    .container {
+        padding: 0 16px;
+    }
+
+    h1 {
+        font-size: 2rem;
+    }
+
+    .btn {
+        padding: 8px 16px;
+        font-size: 0.85rem;
+    }
+
+    .hc {
+        flex: 0 0 120px;
+    }
+
+    .hc-info {
+        padding: 8px;
+    }
+
+    .section-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+}
+
+@media (min-width: 1400px) {
+    .anime-grid {
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    .downloads-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+/* Tablet */
+@media (min-width: 769px) and (max-width: 1024px) {
+    .anime-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
 }