/* ============================================================
   PCZone — Design System & Global Styles
   Clean Modern Minimal · White/Blue · Premium Tech
   ============================================================ */

/* ------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ------------------------------------------------------------ */
:root {
    /* Brand Colors */
    --blue-50:    #eff6ff;
    --blue-100:   #dbeafe;
    --blue-200:   #bfdbfe;
    --blue-300:   #93c5fd;
    --blue-400:   #60a5fa;
    --blue-500:   #3b82f6;
    --blue-600:   #2563eb;
    --blue-700:   #1d4ed8;
    --blue-800:   #1e40af;
    --blue-900:   #1e3a8a;

    /* Light Theme (Default) */
    --bg-primary:       #ffffff;
    --bg-secondary:     #f8fafc;
    --bg-tertiary:      #f1f5f9;
    --bg-card:          #ffffff;
    --bg-hover:         #f1f5f9;
    --bg-code:          #f8fafc;

    --text-primary:     #0f172a;
    --text-secondary:   #475569;
    --text-muted:       #94a3b8;
    --text-inverse:     #ffffff;

    --border-color:     #e2e8f0;
    --border-hover:     #cbd5e1;

    --accent:           #2563eb;
    --accent-hover:     #1d4ed8;
    --accent-light:     #eff6ff;
    --accent-text:      #1d4ed8;

    --success:          #22c55e;
    --warning:          #f59e0b;
    --error:            #ef4444;
    --info:             #3b82f6;

    --shadow-sm:        0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:        0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
    --shadow-lg:        0 10px 40px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.05);
    --shadow-xl:        0 20px 60px rgba(0,0,0,.12);
    --shadow-blue:      0 4px 20px rgba(37,99,235,.25);

    --radius-sm:        6px;
    --radius-md:        10px;
    --radius-lg:        16px;
    --radius-xl:        24px;
    --radius-full:      9999px;

    --font-sans:        'Inter', -apple-system, BlinkMacSystemFont,
                        'Segoe UI', sans-serif;
    --font-mono:        'JetBrains Mono', 'Fira Code', monospace;

    --nav-height:       64px;
    --sidebar-width:    280px;
    --content-max:      1200px;

    --transition:       all 0.2s ease;
    --transition-slow:  all 0.4s ease;
}

/* Dark Theme */
[data-theme="dark"] {
    --bg-primary:       #0f172a;
    --bg-secondary:     #1e293b;
    --bg-tertiary:      #334155;
    --bg-card:          #1e293b;
    --bg-hover:         #334155;
    --bg-code:          #0f172a;

    --text-primary:     #f1f5f9;
    --text-secondary:   #94a3b8;
    --text-muted:       #64748b;
    --text-inverse:     #0f172a;

    --border-color:     #334155;
    --border-hover:     #475569;

    --accent:           #3b82f6;
    --accent-hover:     #60a5fa;
    --accent-light:     rgba(59,130,246,.12);
    --accent-text:      #60a5fa;

    --shadow-sm:        0 1px 3px rgba(0,0,0,.3);
    --shadow-md:        0 4px 16px rgba(0,0,0,.4);
    --shadow-lg:        0 10px 40px rgba(0,0,0,.5);
    --shadow-blue:      0 4px 20px rgba(59,130,246,.3);

    --bg-code:          #0f172a;
}

/* ------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
}

body {
    font-family:      var(--font-sans);
    background-color: var(--bg-secondary);
    color:            var(--text-primary);
    line-height:      1.6;
    transition:       background-color 0.3s ease, color 0.3s ease;
    min-height:       100vh;
}

img {
    max-width: 100%;
    height:    auto;
    display:   block;
}

a {
    color:           var(--accent);
    text-decoration: none;
    transition:      var(--transition);
}
a:hover { color: var(--accent-hover); }

button { cursor: pointer; font-family: var(--font-sans); }

ul, ol { list-style: none; }

/* ------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
    font-weight:    700;
    line-height:    1.25;
    color:          var(--text-primary);
    letter-spacing: -0.025em;
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.4rem,  3vw, 1.875rem); }
h3 { font-size: clamp(1.1rem,  2vw, 1.375rem); }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p  { color: var(--text-secondary); line-height: 1.75; }

.text-primary   { color: var(--text-primary)   !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted     { color: var(--text-muted)     !important; }
.text-accent    { color: var(--accent)         !important; }

/* ------------------------------------------------------------
   4. LAYOUT UTILITIES
   ------------------------------------------------------------ */
.container {
    width:     100%;
    max-width: var(--content-max);
    margin:    0 auto;
    padding:   0 24px;
}

.container--narrow {
    max-width: 760px;
    margin:    0 auto;
    padding:   0 24px;
}

.grid { display: grid; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-gap-sm { gap: 8px; }
.flex-gap-md { gap: 16px; }
.flex-gap-lg { gap: 24px; }

.mt-sm  { margin-top:    8px; }
.mt-md  { margin-top:    16px; }
.mt-lg  { margin-top:    32px; }
.mb-sm  { margin-bottom: 8px; }
.mb-md  { margin-bottom: 16px; }
.mb-lg  { margin-bottom: 32px; }

/* ------------------------------------------------------------
   5. NAVBAR
   ------------------------------------------------------------ */
.navbar {
    position:         sticky;
    top:              0;
    z-index:          1000;
    height:           var(--nav-height);
    background:       var(--bg-primary);
    border-bottom:    1px solid var(--border-color);
    box-shadow:       var(--shadow-sm);
    transition:       var(--transition);
}

.navbar__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          100%;
}

/* Logo */
.navbar__logo {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-weight: 800;
    font-size:   1.375rem;
    color:       var(--text-primary);
    letter-spacing: -0.04em;
}
.navbar__logo:hover { color: var(--accent); }

.logo__icon {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            36px;
    height:           36px;
    background:       linear-gradient(135deg, var(--blue-600), var(--blue-500));
    border-radius:    var(--radius-sm);
    font-size:        1.1rem;
    box-shadow:       var(--shadow-blue);
}

.logo__text { color: var(--text-primary); }
.logo__dot  { color: var(--accent); }

/* Nav Links */
.navbar__nav {
    display:     flex;
    align-items: center;
    gap:         4px;
}

.nav__link {
    display:       flex;
    align-items:   center;
    gap:           6px;
    padding:       8px 14px;
    border-radius: var(--radius-sm);
    font-size:     0.9rem;
    font-weight:   500;
    color:         var(--text-secondary);
    transition:    var(--transition);
    white-space:   nowrap;
}
.nav__link:hover,
.nav__link--active {
    background: var(--accent-light);
    color:      var(--accent);
}

/* IST Clock */
.navbar__clock {
    display:       flex;
    align-items:   center;
    gap:           6px;
    font-size:     0.8rem;
    color:         var(--text-muted);
    background:    var(--bg-secondary);
    border:        1px solid var(--border-color);
    padding:       5px 12px;
    border-radius: var(--radius-full);
    font-variant-numeric: tabular-nums;
    white-space:   nowrap;
}
.clock__date { font-weight: 500; color: var(--text-secondary); }
.clock__time { font-weight: 600; color: var(--accent);         }
.clock__tz   { font-size: 0.7rem; opacity: 0.7;               }

/* Right side controls */
.navbar__controls {
    display:     flex;
    align-items: center;
    gap:         8px;
}

/* Theme Toggle */
.theme-toggle {
    display:       flex;
    align-items:   center;
    justify-content: center;
    width:         38px;
    height:        38px;
    border:        1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background:    var(--bg-secondary);
    color:         var(--text-secondary);
    font-size:     1.1rem;
    transition:    var(--transition);
}
.theme-toggle:hover {
    background:   var(--accent-light);
    border-color: var(--accent);
    color:        var(--accent);
}

/* Avatar dropdown */
.user-menu {
    position: relative;
}

.user-menu__trigger {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       6px 10px;
    border:        1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background:    transparent;
    color:         var(--text-primary);
    font-size:     0.875rem;
    font-weight:   500;
    transition:    var(--transition);
}
.user-menu__trigger:hover {
    background:   var(--bg-secondary);
    border-color: var(--accent);
}

.user-avatar {
    width:         30px;
    height:        30px;
    border-radius: var(--radius-full);
    object-fit:    cover;
    border:        2px solid var(--accent);
}
.user-avatar--placeholder {
    background: linear-gradient(135deg, var(--blue-600), var(--blue-400));
    display:    flex;
    align-items:center;
    justify-content: center;
    color:      #fff;
    font-weight:700;
    font-size:  0.8rem;
}

.user-menu__dropdown {
    position:      absolute;
    top:           calc(100% + 8px);
    right:         0;
    min-width:     200px;
    background:    var(--bg-card);
    border:        1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-lg);
    overflow:      hidden;
    opacity:       0;
    transform:     translateY(-8px);
    pointer-events:none;
    transition:    var(--transition);
    z-index:       100;
}
.user-menu__dropdown.open {
    opacity:        1;
    transform:      translateY(0);
    pointer-events: auto;
}

.dropdown__header {
    padding:      14px 16px;
    border-bottom:1px solid var(--border-color);
    background:   var(--bg-secondary);
}
.dropdown__name  { font-weight: 600; font-size: 0.875rem; }
.dropdown__email { font-size: 0.75rem; color: var(--text-muted); }

.dropdown__item {
    display:      flex;
    align-items:  center;
    gap:          10px;
    padding:      10px 16px;
    font-size:    0.875rem;
    color:        var(--text-secondary);
    transition:   var(--transition);
    width:        100%;
    background:   transparent;
    border:       none;
    text-align:   left;
}
.dropdown__item:hover      { background: var(--bg-hover); color: var(--accent); }
.dropdown__item--danger    { color: var(--error); }
.dropdown__item--danger:hover { background: #fee2e2; }
.dropdown__divider { height:1px; background:var(--border-color); margin:4px 0; }

/* Badge */
.badge {
    display:          inline-flex;
    align-items:      center;
    padding:          2px 8px;
    border-radius:    var(--radius-full);
    font-size:        0.7rem;
    font-weight:      600;
    letter-spacing:   0.03em;
    text-transform:   uppercase;
}
.badge--premium { background:#fef9c3; color:#a16207; }
.badge--admin   { background:#fee2e2; color:#dc2626; }
.badge--free    { background:var(--bg-tertiary); color:var(--text-muted); }

/* Hamburger */
.hamburger {
    display:        none;
    flex-direction: column;
    gap:            5px;
    width:          38px;
    height:         38px;
    border:         1px solid var(--border-color);
    border-radius:  var(--radius-sm);
    background:     transparent;
    padding:        8px;
    align-items:    center;
    justify-content:center;
}
.hamburger span {
    display:    block;
    width:      18px;
    height:     2px;
    background: var(--text-primary);
    transition: var(--transition);
    border-radius: 2px;
}

/* Mobile nav overlay */
.mobile-nav {
    display:    none;
    position:   fixed;
    inset:      0;
    z-index:    999;
    background: rgba(15,23,42,0.6);
    backdrop-filter: blur(4px);
}
.mobile-nav__panel {
    position:   absolute;
    top:        0;
    right:      0;
    width:      min(320px, 85vw);
    height:     100vh;
    background: var(--bg-primary);
    padding:    24px;
    overflow-y: auto;
    transform:  translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: var(--shadow-xl);
}
.mobile-nav.open { display: block; }
.mobile-nav.open .mobile-nav__panel { transform: translateX(0); }

/* ------------------------------------------------------------
   6. HERO SECTION
   ------------------------------------------------------------ */
.hero {
    background: linear-gradient(
        135deg,
        var(--blue-900)  0%,
        var(--blue-700) 50%,
        var(--blue-600) 100%
    );
    padding:   80px 0 100px;
    position:  relative;
    overflow:  hidden;
}

.hero::before {
    content:  '';
    position: absolute;
    inset:    0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero::after {
    content:  '';
    position: absolute;
    bottom:   -2px;
    left:     0;
    right:    0;
    height:   60px;
    background: var(--bg-secondary);
    clip-path: ellipse(55% 100% at 50% 100%);
}

.hero__inner {
    position:   relative;
    z-index:    1;
    text-align: center;
    max-width:  720px;
    margin:     0 auto;
}

.hero__badge {
    display:          inline-flex;
    align-items:      center;
    gap:              6px;
    background:       rgba(255,255,255,0.12);
    border:           1px solid rgba(255,255,255,0.2);
    color:            #bfdbfe;
    padding:          6px 14px;
    border-radius:    var(--radius-full);
    font-size:        0.8rem;
    font-weight:      500;
    margin-bottom:    20px;
    backdrop-filter:  blur(8px);
}

.hero__title {
    font-size:   clamp(2rem, 5vw, 3.25rem);
    color:       #ffffff;
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.15;
}

.hero__title .highlight {
    background:              linear-gradient(90deg, #93c5fd, #bfdbfe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

.hero__sub {
    font-size:     1.1rem;
    color:         #bfdbfe;
    max-width:     540px;
    margin:        0 auto 32px;
}

.hero__actions {
    display:   flex;
    gap:       12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------
   7. BUTTONS
   ------------------------------------------------------------ */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         10px 22px;
    border-radius:   var(--radius-sm);
    font-size:       0.9rem;
    font-weight:     600;
    border:          2px solid transparent;
    cursor:          pointer;
    transition:      var(--transition);
    white-space:     nowrap;
    letter-spacing:  0.01em;
}
.btn:disabled {
    opacity: 0.5;
    cursor:  not-allowed;
}

.btn--primary {
    background:   var(--accent);
    color:        #fff;
    border-color: var(--accent);
}
.btn--primary:hover {
    background:   var(--accent-hover);
    border-color: var(--accent-hover);
    color:        #fff;
    transform:    translateY(-1px);
    box-shadow:   var(--shadow-blue);
}

.btn--secondary {
    background:   transparent;
    color:        var(--accent);
    border-color: var(--accent);
}
.btn--secondary:hover {
    background: var(--accent-light);
    color:      var(--accent);
}

.btn--ghost {
    background:   transparent;
    color:        var(--text-secondary);
    border-color: var(--border-color);
}
.btn--ghost:hover {
    background: var(--bg-hover);
    color:      var(--text-primary);
}

.btn--white {
    background:   #fff;
    color:        var(--blue-700);
    border-color: #fff;
}
.btn--white:hover {
    background: var(--blue-50);
    transform:  translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn--danger {
    background:   var(--error);
    color:        #fff;
    border-color: var(--error);
}
.btn--danger:hover { background: #dc2626; }

.btn--sm  { padding: 6px 14px; font-size: 0.8rem; }
.btn--lg  { padding: 14px 32px; font-size: 1rem;  }
.btn--full{ width: 100%; }

.btn--icon {
    width:     38px;
    height:    38px;
    padding:   0;
    border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------
   8. CARDS
   ------------------------------------------------------------ */
.card {
    background:    var(--bg-card);
    border:        1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow:      hidden;
    transition:    var(--transition);
    box-shadow:    var(--shadow-sm);
}
.card:hover {
    box-shadow:    var(--shadow-md);
    border-color:  var(--border-hover);
    transform:     translateY(-2px);
}

/* Post Card */
.post-card {
    display:        flex;
    flex-direction: column;
}

.post-card__image {
    width:          100%;
    aspect-ratio:   16/9;
    object-fit:     cover;
    transition:     transform 0.4s ease;
}
.post-card:hover .post-card__image { transform: scale(1.03); }
.post-card__image-wrap { overflow: hidden; }

.post-card__body    { padding: 20px; flex: 1; }
.post-card__footer  { padding: 14px 20px; border-top: 1px solid var(--border-color); }

.post-card__meta {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin-bottom: 10px;
    flex-wrap:   wrap;
}

.post-card__category {
    font-size:    0.75rem;
    font-weight:  600;
    color:        var(--accent);
    background:   var(--accent-light);
    padding:      3px 10px;
    border-radius:var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.post-card__premium {
    font-size:    0.7rem;
    font-weight:  700;
    color:        #a16207;
    background:   #fef9c3;
    padding:      3px 10px;
    border-radius:var(--radius-full);
    text-transform:uppercase;
}

.post-card__title {
    font-size:   1.05rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 8px;
    color:       var(--text-primary);
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}
.post-card:hover .post-card__title { color: var(--accent); }

.post-card__excerpt {
    font-size:   0.875rem;
    color:       var(--text-muted);
    line-height: 1.6;
    display:     -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

.post-card__author {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   0.8rem;
    color:       var(--text-muted);
}

.post-card__author img {
    width:         26px;
    height:        26px;
    border-radius: 50%;
    object-fit:    cover;
}

.post-card__stats {
    display:     flex;
    align-items: center;
    gap:         12px;
    font-size:   0.78rem;
    color:       var(--text-muted);
}

/* Featured Post Card */
.post-card--featured {
    grid-column: span 2;
    flex-direction: row;
}
.post-card--featured .post-card__image-wrap {
    width: 48%;
    flex-shrink: 0;
}
.post-card--featured .post-card__image {
    height:       100%;
    aspect-ratio: unset;
}
.post-card--featured .post-card__body { padding: 32px; }
.post-card--featured .post-card__title { font-size: 1.4rem; }

/* ------------------------------------------------------------
   9. SECTION HEADERS
   ------------------------------------------------------------ */
.section-header {
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    margin-bottom: 28px;
    padding-bottom:16px;
    border-bottom: 1px solid var(--border-color);
}

.section-title {
    font-size:   1.25rem;
    font-weight: 700;
    display:     flex;
    align-items: center;
    gap:         10px;
}

.section-title::before {
    content:      '';
    display:      block;
    width:        4px;
    height:       22px;
    background:   linear-gradient(180deg, var(--blue-500), var(--blue-700));
    border-radius:var(--radius-full);
}

/* ------------------------------------------------------------
   10. POST GRID
   ------------------------------------------------------------ */
.posts-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   24px;
}

@media (max-width: 1024px) {
    .posts-grid { grid-template-columns: repeat(2, 1fr); }
    .post-card--featured { grid-column: span 2; flex-direction: column; }
    .post-card--featured .post-card__image-wrap { width: 100%; }
    .post-card--featured .post-card__image { aspect-ratio: 16/9; height: auto; }
}

@media (max-width: 640px) {
    .posts-grid { grid-template-columns: 1fr; }
    .post-card--featured { grid-column: span 1; }
}

/* ------------------------------------------------------------
   11. FORMS
   ------------------------------------------------------------ */
.form-group {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    margin-bottom:  18px;
}

.form-group label {
    font-size:   0.875rem;
    font-weight: 600;
    color:       var(--text-primary);
    display:     flex;
    align-items: center;
    justify-content: space-between;
}

.input-icon-wrap {
    position: relative;
    display:  flex;
    align-items: center;
}

.input-icon {
    position:      absolute;
    left:          12px;
    font-size:     1rem;
    pointer-events:none;
    z-index:       1;
}

.input-icon-wrap input {
    padding-left: 40px;
    width:        100%;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
textarea,
select {
    width:         100%;
    padding:       10px 14px;
    border:        1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    background:    var(--bg-primary);
    color:         var(--text-primary);
    font-family:   var(--font-sans);
    font-size:     0.9rem;
    transition:    var(--transition);
    outline:       none;
    appearance:    none;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--accent);
    box-shadow:   0 0 0 3px rgba(37,99,235,.12);
}

input::placeholder { color: var(--text-muted); }

textarea {
    resize:     vertical;
    min-height: 100px;
    line-height:1.6;
}

.toggle-password {
    position:   absolute;
    right:      12px;
    background: transparent;
    border:     none;
    font-size:  1rem;
    color:      var(--text-muted);
    padding:    4px;
}
.toggle-password:hover { color: var(--text-primary); }

.form-group small {
    font-size: 0.78rem;
    color:     var(--text-muted);
}

.form-group--check { flex-direction: row; align-items: flex-start; gap: 10px; }

.checkbox-label {
    display:   flex;
    gap:       10px;
    font-size: 0.875rem;
    cursor:    pointer;
}
.checkbox-label input[type="checkbox"] {
    width:    16px;
    height:   16px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--accent);
}

/* Password strength bar */
.strength-bar {
    height:        4px;
    background:    var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow:      hidden;
    margin-top:    6px;
}
.strength-fill {
    height:     100%;
    width:      0%;
    border-radius: var(--radius-full);
    transition: width 0.3s ease, background 0.3s ease;
}

/* Honeypot */
.hp-field { position: absolute; left: -9999px; visibility: hidden; }

/* ------------------------------------------------------------
   12. AUTH PAGES
   ------------------------------------------------------------ */
.auth-page {
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         40px 20px;
    background:      linear-gradient(135deg, var(--blue-900), var(--blue-700));
}

.auth-container {
    width:     100%;
    max-width: 420px;
}

.auth-logo {
    text-align:    center;
    margin-bottom: 28px;
}
.auth-logo a {
    display:     inline-flex;
    align-items: center;
    gap:         10px;
    font-size:   1.5rem;
    font-weight: 800;
    color:       #fff;
}

.auth-card {
    background:    var(--bg-primary);
    border-radius: var(--radius-xl);
    padding:       36px;
    box-shadow:    var(--shadow-xl);
}

.auth-title    { font-size: 1.5rem; margin-bottom: 4px; }
.auth-subtitle { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 24px; }

.auth-form { margin-top: 24px; }

.forgot-link {
    font-size:   0.8rem;
    font-weight: 500;
    color:       var(--accent);
}

.auth-switch {
    text-align:  center;
    font-size:   0.875rem;
    color:       var(--text-muted);
    margin-top:  20px;
}

/* ------------------------------------------------------------
   13. ALERTS & FLASH MESSAGES
   ------------------------------------------------------------ */
.alert {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    padding:       12px 16px;
    border-radius: var(--radius-sm);
    font-size:     0.875rem;
    margin-bottom: 16px;
    border:        1px solid transparent;
    line-height:   1.5;
}

.alert--success {
    background:   #f0fdf4;
    border-color: #bbf7d0;
    color:        #166534;
}
.alert--error {
    background:   #fef2f2;
    border-color: #fecaca;
    color:        #991b1b;
}
.alert--warning {
    background:   #fffbeb;
    border-color: #fde68a;
    color:        #92400e;
}
.alert--info {
    background:   #eff6ff;
    border-color: #bfdbfe;
    color:        #1e40af;
}

[data-theme="dark"] .alert--success {
    background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.3); color: #86efac;
}
[data-theme="dark"] .alert--error {
    background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.3); color: #fca5a5;
}
[data-theme="dark"] .alert--warning {
    background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); color: #fcd34d;
}
[data-theme="dark"] .alert--info {
    background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.3); color: #93c5fd;
}

/* ------------------------------------------------------------
   14. TOAST NOTIFICATIONS
   ------------------------------------------------------------ */
.toast-container {
    position:   fixed;
    bottom:     24px;
    right:      24px;
    z-index:    9999;
    display:    flex;
    flex-direction: column;
    gap:        10px;
}

.toast {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       12px 18px;
    border-radius: var(--radius-md);
    background:    var(--bg-card);
    border:        1px solid var(--border-color);
    box-shadow:    var(--shadow-lg);
    font-size:     0.875rem;
    font-weight:   500;
    min-width:     280px;
    max-width:     380px;
    animation:     slideUp 0.3s ease;
    transition:    opacity 0.3s ease;
}

.toast--success { border-left: 4px solid var(--success); }
.toast--error   { border-left: 4px solid var(--error);   }
.toast--warning { border-left: 4px solid var(--warning); }
.toast--info    { border-left: 4px solid var(--info);    }

.toast__close {
    margin-left: auto;
    background:  transparent;
    border:      none;
    color:       var(--text-muted);
    font-size:   1rem;
    padding:     2px;
    line-height: 1;
}

@keyframes slideUp {
    from { opacity:0; transform: translateY(16px); }
    to   { opacity:1; transform: translateY(0);    }
}

/* ------------------------------------------------------------
   15. FOOTER
   ------------------------------------------------------------ */
.footer {
    background:    var(--bg-primary);
    border-top:    1px solid var(--border-color);
    margin-top:    80px;
}

.footer__main {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap:                   48px;
    padding:               60px 0 40px;
}

.footer__brand .footer__desc {
    font-size:   0.875rem;
    color:       var(--text-muted);
    margin:      12px 0 20px;
    line-height: 1.6;
    max-width:   280px;
}

.footer__social {
    display: flex;
    gap:     8px;
}

.social-link {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            36px;
    height:           36px;
    border:           1px solid var(--border-color);
    border-radius:    var(--radius-sm);
    color:            var(--text-muted);
    font-size:        1rem;
    transition:       var(--transition);
}
.social-link:hover {
    background:   var(--accent-light);
    border-color: var(--accent);
    color:        var(--accent);
}

.footer__col h4 {
    font-size:     0.8rem;
    font-weight:   700;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:         var(--text-muted);
    margin-bottom: 16px;
}

.footer__links {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.footer__links a {
    font-size:  0.875rem;
    color:      var(--text-muted);
    transition: var(--transition);
}
.footer__links a:hover { color: var(--accent); padding-left: 4px; }

.footer__bottom {
    border-top:  1px solid var(--border-color);
    padding:     20px 0;
    display:     flex;
    align-items: center;
    justify-content: space-between;
    font-size:   0.8rem;
    color:       var(--text-muted);
    flex-wrap:   wrap;
    gap:         10px;
}

/* Newsletter in footer */
.footer__newsletter {
    display:   flex;
    gap:       8px;
    margin-top:12px;
}
.footer__newsletter input {
    flex:      1;
    font-size: 0.85rem;
    padding:   8px 12px;
}
.footer__newsletter .btn { padding: 8px 16px; font-size: 0.85rem; }

/* ------------------------------------------------------------
   16. SIDEBAR
   ------------------------------------------------------------ */
.page-with-sidebar {
    display:               grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap:                   32px;
    align-items:           start;
}

.sidebar { position: sticky; top: calc(var(--nav-height) + 16px); }

.sidebar-widget {
    background:    var(--bg-card);
    border:        1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding:       22px;
    margin-bottom: 20px;
    box-shadow:    var(--shadow-sm);
}

.sidebar-widget__title {
    font-size:     0.8rem;
    font-weight:   700;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:         var(--text-muted);
    margin-bottom: 16px;
    padding-bottom:12px;
    border-bottom: 1px solid var(--border-color);
}

/* ------------------------------------------------------------
   17. PAGINATION
   ------------------------------------------------------------ */
.pagination {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    margin-top:      48px;
}

.pagination__item {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            38px;
    height:           38px;
    border:           1.5px solid var(--border-color);
    border-radius:    var(--radius-sm);
    font-size:        0.875rem;
    font-weight:      500;
    color:            var(--text-secondary);
    transition:       var(--transition);
}
.pagination__item:hover      { border-color: var(--accent); color: var(--accent); }
.pagination__item--active    {
    background: var(--accent); border-color: var(--accent);
    color: #fff; pointer-events: none;
}
.pagination__item--disabled  { opacity: 0.4; pointer-events: none; }

/* ------------------------------------------------------------
   18. TAGS & CHIPS
   ------------------------------------------------------------ */
.tags-list { display: flex; flex-wrap: wrap; gap: 8px; }

.tag {
    display:       inline-flex;
    align-items:   center;
    padding:       4px 12px;
    border:        1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size:     0.78rem;
    font-weight:   500;
    color:         var(--text-secondary);
    transition:    var(--transition);
}
.tag:hover {
    background:   var(--accent-light);
    border-color: var(--accent);
    color:        var(--accent);
}

/* ------------------------------------------------------------
   19. LOADING / SPINNER
   ------------------------------------------------------------ */
.spinner {
    width:         24px;
    height:        24px;
    border:        3px solid var(--bg-tertiary);
    border-top:    3px solid var(--accent);
    border-radius: 50%;
    animation:     spin 0.8s linear infinite;
}
.spinner--lg { width: 40px; height: 40px; }

@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-tertiary) 25%,
        var(--bg-hover)    50%,
        var(--bg-tertiary) 75%
    );
    background-size: 200% 100%;
    animation:       shimmer 1.5s infinite;
    border-radius:   var(--radius-sm);
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ------------------------------------------------------------
   20. BACK TO TOP
   ------------------------------------------------------------ */
.back-to-top {
    position:         fixed;
    bottom:           80px;
    right:            24px;
    width:            42px;
    height:           42px;
    background:       var(--accent);
    color:            #fff;
    border:           none;
    border-radius:    var(--radius-sm);
    font-size:        1.1rem;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    cursor:           pointer;
    box-shadow:       var(--shadow-blue);
    opacity:          0;
    transform:        translateY(10px);
    transition:       var(--transition);
    pointer-events:   none;
    z-index:          500;
}
.back-to-top.visible {
    opacity:        1;
    transform:      translateY(0);
    pointer-events: auto;
}
.back-to-top:hover { background: var(--accent-hover); transform: translateY(-2px); }

/* ------------------------------------------------------------
   21. PROGRESS BAR (reading progress)
   ------------------------------------------------------------ */
.reading-progress {
    position: fixed;
    top:      0;
    left:     0;
    height:   3px;
    width:    0%;
    background: linear-gradient(90deg, var(--blue-500), var(--blue-400));
    z-index:  1001;
    transition:width 0.1s linear;
}

/* ------------------------------------------------------------
   22. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    .footer__main { grid-template-columns: 1fr 1fr; gap: 32px; }
    .page-with-sidebar { grid-template-columns: 1fr; }
    .sidebar { position: static; }
}

@media (max-width: 768px) {
    .container { padding: 0 16px; }
    .navbar__nav { display: none; }
    .navbar__clock { display: none; }
    .hamburger { display: flex; }
    .hero { padding: 60px 0 80px; }
    .footer__main { grid-template-columns: 1fr; gap: 28px; }
    .auth-card { padding: 24px; }
    :root { --nav-height: 56px; }
}

@media (max-width: 480px) {
    .hero__actions { flex-direction: column; align-items: center; }
    .pagination__item { width: 32px; height: 32px; font-size: 0.8rem; }
}
/* Error Pages */
.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
}

.error-box {
    padding: 3rem 2rem;
}

.error-code {
    font-size: 6rem;
    font-weight: 800;
    color: var(--primary, #2563eb);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.error-title {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--text-primary, #1e293b);
}

.error-msg {
    color: var(--text-secondary, #64748b);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}