:root {
    --bg: #1f232a;
    --panel: #2a2f38;
    --panel-soft: #2f3440;
    --text: #e7e9ee;
    --muted: #9aa0aa;
    --accent: #8ab4f8;
    --border: rgba(255, 255, 255, 0.08);
}

/* Light Mode */
[data-theme="light"] {
    --bg: #f8f9fa;
    --panel: #ffffff;
    --panel-soft: #f1f3f4;
    --text: #1f2937;
    --muted: #6b7280;
    --accent: #3b82f6;
    --border: rgba(0, 0, 0, 0.08);
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

/* ─── Top Bar ───────────────────────────── */

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 28px;
    border-bottom: 1px solid var(--border);
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 18px;
}

.logo-icon {
    font-size: 20px;
    max-width: 20px;
    max-height: 20px;
}

.top-actions {
    display: flex;
    gap: 12px;
}

.btn {
    padding: 8px 14px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.btn.primary {
    background: var(--text);
    color: #111;
}

[data-theme="light"] .btn.primary {
    color: #ffffff;
}


.btn.secondary {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
}

/* ─── Content ───────────────────────────── */

.content {
    padding: 32px 28px;
}

.section-title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
}

/* ─── Notebook Grid ─────────────────────── */

.notebook-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

/* ─── Cards ─────────────────────────────── */

.notebook-card {
    position: relative;
    background: var(--panel);
    border-radius: 14px;
    padding: 16px;
    height: 180px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background 0.2s ease;
}

.notebook-card:hover {
    background: var(--panel-soft);
}

.notebook-thumb {
    height: 90px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6, #9333ea);
    opacity: 0.85;
}

.notebook-info h3 {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 4px;
}

.notebook-info span {
    font-size: 12px;
    color: var(--muted);
}

.menu {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 18px;
    color: var(--muted);
    cursor: pointer;
}

/* ─── Create Card ───────────────────────── */

.notebook-card.create {
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: transparent;
    border: 2px dashed var(--border);
    display: flex;
    flex-direction: column;
    text-align: center;
}


.create-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--panel);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.notebook-card.create p {
    font-size: 14px;
    color: var(--muted);
}
/ *     M o b i l e   R e s p o n s i v e   S t y l e s     * / 
 
 @ m e d i a   ( m a x - w i d t h :   7 6 8 p x )   { 
         / *   T o p   B a r   M o b i l e   A d j u s t m e n t s   * / 
         . t o p - b a r   { 
                 p a d d i n g :   1 2 p x   1 6 p x ; 
                 f l e x - w r a p :   w r a p ; 
                 g a p :   8 p x ; 
         } 
 
         . l o g o - t e x t   { 
                 f o n t - s i z e :   1 4 p x   ! i m p o r t a n t ; 
         } 
 
         . t o p - a c t i o n s   { 
                 g a p :   8 p x ; 
         } 
 
         . b t n   { 
                 p a d d i n g :   6 p x   1 2 p x ; 
                 f o n t - s i z e :   1 3 p x ; 
         } 
 
         # t h e m e - t o g g l e   { 
                 w i d t h :   3 6 p x ; 
                 h e i g h t :   3 6 p x ; 
         } 
 
         # t h e m e - t o g g l e   i   { 
                 f o n t - s i z e :   1 8 p x ; 
         } 
 
         / *   C o n t e n t   M o b i l e   A d j u s t m e n t s   * / 
         . c o n t e n t   { 
                 p a d d i n g :   2 0 p x   1 6 p x ; 
         } 
 
         . s e c t i o n - t i t l e   { 
                 f o n t - s i z e :   1 8 p x ; 
                 m a r g i n - b o t t o m :   1 6 p x ; 
         } 
 
         / *   N o t e b o o k   C o n t a i n e r   M o b i l e   * / 
         . n o t e b o o k - c o n t a i n e r   { 
                 p a d d i n g :   1 6 p x   0 ; 
         } 
 
         . n o t e b o o k - c o n t a i n e r . s l i d e r - v i e w   { 
                 g a p :   1 2 p x ; 
                 p a d d i n g :   1 6 p x   0 ; 
         } 
 
         . n o t e b o o k - c o n t a i n e r . s l i d e r - v i e w   . n o t e b o o k - s l i d e r   { 
                 g a p :   1 2 p x ; 
         } 
 
         . n o t e b o o k - c o n t a i n e r . s l i d e r - v i e w   . n o t e b o o k - c a r d , 
         . n o t e b o o k - c o n t a i n e r . s l i d e r - v i e w   . n o t e b o o k - c a r d . c r e a t e   { 
                 f l e x :   0   0   a u t o ; 
                 w i d t h :   1 6 0 p x ; 
                 h e i g h t :   1 6 0 p x ; 
                 m i n - w i d t h :   1 6 0 p x ; 
         } 
 
         . n o t e b o o k - c o n t a i n e r . g r i d - v i e w   { 
                 g r i d - t e m p l a t e - c o l u m n s :   r e p e a t ( a u t o - f i l l ,   m i n m a x ( 1 6 0 p x ,   1 f r ) ) ; 
                 g a p :   1 2 p x ; 
         } 
 
         / *   C a r d   M o b i l e   A d j u s t m e n t s   * / 
         . n o t e b o o k - c a r d   { 
                 h e i g h t :   1 4 0 p x ; 
                 p a d d i n g :   1 2 p x ; 
                 b o r d e r - r a d i u s :   1 0 p x ; 
         } 
 
         . n o t e b o o k - c a r d . c r e a t e   { 
                 h e i g h t :   1 4 0 p x ; 
         } 
 
         . n o t e b o o k - i n f o   h 3   { 
                 f o n t - s i z e :   1 3 p x ; 
                 m a r g i n - b o t t o m :   2 p x ; 
         } 
 
         . n o t e b o o k - i n f o   s p a n   { 
                 f o n t - s i z e :   1 1 p x ; 
         } 
 
         . d a t e - l a b e l   { 
                 f o n t - s i z e :   1 1 p x ; 
         } 
 
         / *   B u t t o n   M o b i l e   A d j u s t m e n t s   * / 
         . m e n u - b t n , 
         . c a l e n d a r - b t n   { 
                 p a d d i n g :   4 p x   5 p x ; 
                 f o n t - s i z e :   1 2 p x ; 
         } 
 
         . m e n u - b t n   { 
                 t o p :   8 p x ; 
                 r i g h t :   8 p x ; 
         } 
 
         . c a l e n d a r - b t n   { 
                 t o p :   8 p x ; 
                 l e f t :   8 p x ; 
         } 
 
         . c a l e n d a r - b t n   i   { 
                 f o n t - s i z e :   1 4 p x ; 
         } 
 
         / *   S o r t   a n d   V i e w   T o g g l e   M o b i l e   * / 
         . s o r t - c o n t a i n e r   { 
                 p o s i t i o n :   s t a t i c ; 
                 m a r g i n - t o p :   8 p x ; 
                 d i s p l a y :   f l e x ; 
                 g a p :   8 p x ; 
                 j u s t i f y - c o n t e n t :   f l e x - e n d ; 
         } 
 
         . v i e w - t o g g l e - b t n   i   { 
                 f o n t - s i z e :   1 6 p x ; 
         } 
 
         / *   D u e   D a t e s   S e c t i o n   M o b i l e   * / 
         . d u e - d a t e s - s e c t i o n   { 
                 m a r g i n - t o p :   2 4 p x ; 
         } 
 
         . d u e - d a t e s - s l i d e r   { 
                 g a p :   1 2 p x ; 
                 p a d d i n g :   1 2 p x   0 ; 
         } 
 
         . d u e - d a t e - c a r d   { 
                 w i d t h :   1 6 0 p x ; 
                 p a d d i n g :   1 2 p x ; 
         } 
 
         . d u e - d a t e - c a r d   . p r o j e c t - n a m e   { 
                 f o n t - s i z e :   1 3 p x ; 
                 m a r g i n - b o t t o m :   6 p x ; 
         } 
 
         . d u e - d a t e - c a r d   . d u e - d a t e   { 
                 f o n t - s i z e :   1 1 p x ; 
         } 
 
         . d u e - d a t e - c a r d   . d a y s - r e m a i n i n g   { 
                 f o n t - s i z e :   1 0 p x ; 
                 m a r g i n - t o p :   6 p x ; 
                 p a d d i n g :   3 p x   6 p x ; 
         } 
 
         / *   M o d a l   M o b i l e   A d j u s t m e n t s   * / 
         . d a t e - p i c k e r - c o n t e n t   { 
                 m i n - w i d t h :   2 8 0 p x ; 
                 m a x - w i d t h :   9 0 v w ; 
                 m a r g i n :   2 0 p x ; 
         } 
 
         . m o d a l - h e a d e r   { 
                 p a d d i n g :   1 6 p x   2 0 p x ; 
         } 
 
         . m o d a l - h e a d e r   h 3   { 
                 f o n t - s i z e :   1 6 p x ; 
         } 
 
         . m o d a l - b o d y   { 
                 p a d d i n g :   1 6 p x   2 0 p x ; 
         } 
 
         . m o d a l - f o o t e r   { 
                 p a d d i n g :   1 2 p x   2 0 p x   2 0 p x ; 
                 f l e x - d i r e c t i o n :   c o l u m n ; 
                 g a p :   8 p x ; 
         } 
 
         . m o d a l - f o o t e r   . b t n   { 
                 w i d t h :   1 0 0 % ; 
                 p a d d i n g :   1 0 p x ; 
         } 
 
         / *   F o o t e r   M o b i l e   * / 
         . s i t e - f o o t e r   { 
                 p a d d i n g :   1 2 p x   1 6 p x ; 
         } 
 
         . f o o t e r - c o n t e n t   { 
                 f l e x - d i r e c t i o n :   c o l u m n ; 
                 g a p :   8 p x ; 
         } 
 
         . i n s t a g r a m - l i n k   { 
                 f o n t - s i z e :   1 1 p x ; 
                 p a d d i n g :   6 p x   8 p x ; 
         } 
 
         . i n s t a g r a m - l i n k   i   { 
                 f o n t - s i z e :   1 2 p x ; 
         } 
 
         / *   M e n u   M o b i l e   * / 
         . n o t e b o o k - m e n u   { 
                 m i n - w i d t h :   1 2 0 p x ; 
         } 
 
         . m e n u - i t e m   { 
                 p a d d i n g :   8 p x   1 2 p x ; 
                 f o n t - s i z e :   1 4 p x ; 
         } 
 } 
 
 / *   E x t r a   S m a l l   M o b i l e   ( p h o n e s   i n   p o r t r a i t )   * / 
 @ m e d i a   ( m a x - w i d t h :   4 8 0 p x )   { 
         . t o p - b a r   { 
                 p a d d i n g :   1 0 p x   1 2 p x ; 
         } 
 
         . l o g o - t e x t   { 
                 f o n t - s i z e :   1 2 p x   ! i m p o r t a n t ; 
         } 
 
         . c o n t e n t   { 
                 p a d d i n g :   1 6 p x   1 2 p x ; 
         } 
 
         . n o t e b o o k - c o n t a i n e r . s l i d e r - v i e w   . n o t e b o o k - c a r d , 
         . n o t e b o o k - c o n t a i n e r . s l i d e r - v i e w   . n o t e b o o k - c a r d . c r e a t e   { 
                 w i d t h :   1 4 0 p x ; 
                 h e i g h t :   1 4 0 p x ; 
                 m i n - w i d t h :   1 4 0 p x ; 
         } 
 
         . n o t e b o o k - c o n t a i n e r . g r i d - v i e w   { 
                 g r i d - t e m p l a t e - c o l u m n s :   r e p e a t ( a u t o - f i l l ,   m i n m a x ( 1 4 0 p x ,   1 f r ) ) ; 
                 g a p :   1 0 p x ; 
         } 
 
         . n o t e b o o k - c a r d   { 
                 h e i g h t :   1 2 0 p x ; 
                 p a d d i n g :   1 0 p x ; 
         } 
 
         . n o t e b o o k - c a r d . c r e a t e   { 
                 h e i g h t :   1 2 0 p x ; 
         } 
 
         . d u e - d a t e - c a r d   { 
                 w i d t h :   1 4 0 p x ; 
                 p a d d i n g :   1 0 p x ; 
         } 
 }  
 