/* ============================================================
   SHADCN/UI DESIGN SYSTEM - Based on Theme.md
   Clean, minimal, border-focused design
   Tailwind CSS loaded via CDN in base.html
   ============================================================ */

:root {
  --background: #cccccc;
  --foreground: #1f1f1f;
  --card: #b0b0b0;
  --card-foreground: #1f1f1f;
  --popover: #b0b0b0;
  --popover-foreground: #1f1f1f;
  --primary: #b71c1c;
  --primary-foreground: #ffffff;
  --secondary: #556b2f;
  --secondary-foreground: #ffffff;
  --muted: #b8b8b8;
  --muted-foreground: #4a4a4a;
  --accent: #4682b4;
  --accent-foreground: #ffffff;
  --destructive: #ff6f00;
  --destructive-foreground: #000000;
  --border: #505050;
  --input: #505050;
  --ring: #b71c1c;
  --chart-1: #b71c1c;
  --chart-2: #556b2f;
  --chart-3: #4682b4;
  --chart-4: #ff6f00;
  --chart-5: #8d6e63;
  --sidebar: #b0b0b0;
  --sidebar-foreground: #1f1f1f;
  --sidebar-primary: #b71c1c;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #4682b4;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #505050;
  --sidebar-ring: #b71c1c;
  --font-sans: "Oxanium", sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Source Code Pro", monospace;
  --radius: 0px;
  --shadow-2xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.20);
  --shadow-xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.20);
  --shadow-sm: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
  --shadow: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
  --shadow-md: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 2px 4px -1px hsl(0 0% 0% / 0.40);
  --shadow-lg: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 4px 6px -1px hsl(0 0% 0% / 0.40);
  --shadow-xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 8px 10px -1px hsl(0 0% 0% / 0.40);
  --shadow-2xl: 0px 2px 4px 0px hsl(0 0% 0% / 1.00);
  --tracking-normal: 0em;
  --spacing: 0.25rem;
}

html.dark, .dark {
  --background: #1a1a1a;
  --foreground: #e0e0e0;
  --card: #2a2a2a;
  --card-foreground: #e0e0e0;
  --popover: #2a2a2a;
  --popover-foreground: #e0e0e0;
  --primary: #e53935;
  --primary-foreground: #ffffff;
  --secondary: #689f38;
  --secondary-foreground: #000000;
  --muted: #252525;
  --muted-foreground: #a0a0a0;
  --accent: #64b5f6;
  --accent-foreground: #000000;
  --destructive: #ffa000;
  --destructive-foreground: #000000;
  --border: #4a4a4a;
  --input: #4a4a4a;
  --ring: #e53935;
  --chart-1: #e53935;
  --chart-2: #689f38;
  --chart-3: #64b5f6;
  --chart-4: #ffa000;
  --chart-5: #a1887f;
  --sidebar: #141414;
  --sidebar-foreground: #e0e0e0;
  --sidebar-primary: #e53935;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #64b5f6;
  --sidebar-accent-foreground: #000000;
  --sidebar-border: #4a4a4a;
  --sidebar-ring: #e53935;
  --font-sans: "Oxanium", sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Source Code Pro", monospace;
  --radius: 0px;
  --shadow-2xs: 0px 2px 5px 0px hsl(0 0% 0% / 0.30);
  --shadow-xs: 0px 2px 5px 0px hsl(0 0% 0% / 0.30);
  --shadow-sm: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 1px 2px -1px hsl(0 0% 0% / 0.60);
  --shadow: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 1px 2px -1px hsl(0 0% 0% / 0.60);
  --shadow-md: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 2px 4px -1px hsl(0 0% 0% / 0.60);
  --shadow-lg: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 4px 6px -1px hsl(0 0% 0% / 0.60);
  --shadow-xl: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 8px 10px -1px hsl(0 0% 0% / 0.60);
  --shadow-2xl: 0px 2px 5px 0px hsl(0 0% 0% / 1.50);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);

  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
  --tracking-normal: var(--tracking-normal);
  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    letter-spacing: var(--tracking-normal);
  }
}

/* ============================================================
   SHADCN BUTTON VARIANTS
   Clean, minimal with 1px borders
   ============================================================ */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--primary);
    color: var(--primary-foreground);
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: var(--radius);
    padding: 0.625rem 1.25rem;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}
.btn-primary:hover {
    opacity: 0.9;
}
.btn-primary:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--secondary);
    color: var(--secondary-foreground);
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: var(--radius);
    padding: 0.625rem 1.25rem;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}
.btn-secondary:hover {
    opacity: 0.9;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--foreground);
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: var(--radius);
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--border);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn-outline:hover {
    background: var(--accent);
    color: var(--accent-foreground);
    border-color: var(--accent);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--foreground);
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: var(--radius);
    padding: 0.625rem 1.25rem;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}
.btn-ghost:hover {
    background: var(--muted);
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--destructive);
    color: var(--destructive-foreground);
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: var(--radius);
    padding: 0.625rem 1.25rem;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}
.btn-danger:hover {
    opacity: 0.9;
}

.btn-ghost-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--muted-foreground);
    border-radius: var(--radius);
    padding: 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-ghost-icon:hover {
    background: var(--muted);
    color: var(--destructive);
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: transparent;
    color: var(--muted-foreground);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-icon:hover {
    background: var(--muted);
    color: var(--foreground);
    border-color: var(--foreground);
}

/* Button sizes */
.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}
.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

/* ============================================================
   SHADCN INPUT
   Clean with subtle focus ring
   ============================================================ */
.input-dark {
    display: flex;
    width: 100%;
    background: var(--background);
    border: 1px solid var(--input);
    color: var(--foreground);
    border-radius: var(--radius);
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.5;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input-dark::placeholder {
    color: var(--muted-foreground);
}
.input-dark:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 25%, transparent);
}
.input-dark:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================
   SHADCN CARD
   Minimal with 1px border, no heavy shadows
   ============================================================ */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.card-hover {
    transition: border-color 0.15s ease;
}
.card-hover:hover {
    border-color: var(--primary);
}

.card-padded {
    padding: 1.5rem;
}

.card-header {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1.5rem 1.5rem 0;
}

.card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1.4;
}

.card-description {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.card-content {
    padding: 1.5rem;
}

.card-footer {
    display: flex;
    align-items: center;
    padding: 0 1.5rem 1.5rem;
    gap: 0.75rem;
}

/* ============================================================
   SHADCN BADGE
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius);
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    transition: background-color 0.15s ease;
}
.badge-default {
    background: var(--primary);
    color: var(--primary-foreground);
}
.badge-secondary {
    background: var(--secondary);
    color: var(--secondary-foreground);
}
.badge-outline {
    background: transparent;
    color: var(--foreground);
    border: 1px solid var(--border);
}
.badge-muted {
    background: var(--muted);
    color: var(--muted-foreground);
}

/* ============================================================
   SHADCN SEPARATOR
   ============================================================ */
.separator {
    height: 1px;
    width: 100%;
    background: var(--border);
}
.separator-vertical {
    width: 1px;
    height: 100%;
    background: var(--border);
}

/* ============================================================
   PROSE - Markdown content
   Clean, readable typography
   ============================================================ */
.prose-dark h1,
.prose-dark h2,
.prose-dark h3,
.prose-dark h4 {
    color: var(--foreground);
    font-weight: 600;
    margin: 1.5em 0 0.75em;
    line-height: 1.4;
}
.prose-dark h1 { font-size: 1.5rem; }
.prose-dark h2 {
    font-size: 1.25rem;
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--border);
}
.prose-dark h3 { font-size: 1.125rem; }
.prose-dark p {
    color: var(--muted-foreground);
    margin: 1em 0;
    line-height: 1.75;
}
.prose-dark ul,
.prose-dark ol {
    color: var(--muted-foreground);
    padding-left: 1.5em;
    margin: 1em 0;
}
.prose-dark li { 
    margin: 0.5em 0; 
    line-height: 1.75; 
}
.prose-dark strong { 
    color: var(--foreground); 
    font-weight: 600; 
}
.prose-dark em { 
    color: var(--accent); 
}
.prose-dark a { 
    color: var(--accent); 
    text-decoration: underline;
    text-underline-offset: 2px;
}
.prose-dark a:hover {
    color: var(--primary);
}
.prose-dark code {
    background: var(--muted);
    color: var(--foreground);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius);
    font-size: 0.875em;
    font-family: var(--font-mono);
}
.prose-dark pre {
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.875rem;
}
.prose-dark blockquote {
    border-left: 2px solid var(--primary);
    padding-left: 1rem;
    color: var(--muted-foreground);
    font-style: italic;
    margin: 1.5em 0;
}
.prose-dark hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2em 0;
}

/* ============================================================
   NAVBAR - Minimal, clean
   ============================================================ */
.nav-glass {
    background: var(--background);
    border-bottom: 1px solid var(--border);
}

/* Logo - solid color */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    letter-spacing: -0.025em;
}
.logo:hover {
    opacity: 0.9;
}

/* ============================================================
   THEME TOGGLE - shadcn style
   ============================================================ */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius);
    background: transparent;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    position: relative;
}
.theme-toggle-btn:hover {
    background: var(--muted);
    border-color: var(--foreground);
}
.theme-toggle-btn i {
    position: absolute;
    font-size: 0.875rem;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.theme-icon-light {
    color: var(--primary);
    opacity: 1;
    transform: rotate(0deg);
}
.theme-icon-dark {
    color: var(--accent);
    opacity: 0;
    transform: rotate(90deg);
}
.dark .theme-icon-light {
    opacity: 0;
    transform: rotate(-90deg);
}
.dark .theme-icon-dark {
    opacity: 1;
    transform: rotate(0deg);
}

/* ============================================================
   FOOTER - Clean, minimal
   ============================================================ */
.footer-border {
    border-color: var(--border);
    color: var(--muted-foreground);
    background: var(--background);
}
.footer-link {
    color: var(--primary);
    text-decoration: none;
}
.footer-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ============================================================
   SPINNER / LOADING
   ============================================================ */
.spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--muted);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin: 1.5rem auto;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   Toast notifications
   ============================================================ */
#toast-container {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 340px;
    width: calc(100vw - 2.5rem);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius);
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-lg);
    animation: toast-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    position: relative;
    overflow: hidden;
    pointer-events: auto;
}
.toast.removing {
    animation: toast-out 0.25s ease forwards;
}

.toast-icon { font-size: 1.05rem; flex-shrink: 0; margin-top: 1px; line-height: 1.4; }

.toast-body { flex: 1; min-width: 0; }
.toast-title { font-weight: 700; font-size: 0.82rem; line-height: 1.3; }
.toast-message { font-size: 0.78rem; margin-top: 3px; opacity: 0.85; line-height: 1.45; }
.toast-message a { text-decoration: underline; }

.toast-close {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.45;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: opacity 0.15s;
    margin-top: 1px;
}
.toast-close:hover { opacity: 1; }

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0;
    animation: toast-progress linear forwards;
}

/* Toast Variants - shadcn style with subtle background */
.toast-success {
    background: var(--card);
    border: 1px solid var(--secondary);
    color: var(--foreground);
}
.toast-success .toast-icon { color: var(--secondary); }
.toast-success .toast-progress { background: var(--secondary); }

.toast-error {
    background: var(--card);
    border: 1px solid var(--destructive);
    color: var(--foreground);
}
.toast-error .toast-icon { color: var(--destructive); }
.toast-error .toast-progress { background: var(--destructive); }

.toast-warning {
    background: var(--card);
    border: 1px solid var(--destructive);
    color: var(--foreground);
}
.toast-warning .toast-icon { color: var(--destructive); }
.toast-warning .toast-progress { background: var(--destructive); }

.toast-info {
    background: var(--card);
    border: 1px solid var(--accent);
    color: var(--foreground);
}
.toast-info .toast-icon { color: var(--accent); }
.toast-info .toast-progress { background: var(--accent); }

@keyframes toast-in {
    from { opacity: 0; transform: translateX(110%); }
    to   { opacity: 1; transform: translateX(0);    }
}
@keyframes toast-out {
    from { opacity: 1; transform: translateX(0);    }
    to   { opacity: 0; transform: translateX(110%); }
}
@keyframes toast-progress {
    from { width: 100%; }
    to   { width: 0%;   }
}

/* ============================================================
   SHADCN DIALOG / MODAL
   Clean, minimal overlay with 1px border
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: hsl(0 0% 0% / 0.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: modal-fade-in 0.15s ease forwards;
}
@keyframes modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    max-width: 28rem;
    width: 100%;
    animation: modal-slide-in 0.15s ease forwards;
}
@keyframes modal-slide-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

.modal-icon {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--destructive);
}
.modal-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}
.modal-message {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}
.modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* ============================================================
   UTILITIES - Shadcn semantic classes
   ============================================================ */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    background: color-mix(in srgb, var(--primary), transparent 30%);
    color: var(--primary-foreground);
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.error-alert {
    padding: 0.75rem 1rem;
    background: var(--card);
    border: 1px solid var(--destructive);
    color: var(--foreground);
    font-size: 0.875rem;
    border-radius: var(--radius);
}
.error-alert i {
    color: var(--destructive);
}

.auth-link {
    color: var(--primary);
    text-decoration: none;
}
.auth-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.youtube-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.youtube-link:hover {
    background: var(--muted);
    border-color: var(--primary);
}

.btn-accent {
    border-color: var(--accent);
    color: var(--accent);
}
.btn-accent:hover {
    background: var(--accent);
    color: var(--accent-foreground);
    border-color: var(--accent);
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   Responsive - Mobile first
   ============================================================ */

/* Navbar */
.nav-username {
    display: none;
}
.nav-actions {
    gap: 0.5rem;
}

@media (min-width: 480px) {
    .nav-username {
        display: inline;
    }
    .nav-actions {
        gap: 0.75rem;
    }
}

/* Generator card input row */
.generator-input-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.generator-input-row .btn-primary {
    width: 100%;
}

@media (min-width: 480px) {
    .generator-input-row {
        flex-direction: row;
    }
    .generator-input-row .btn-primary {
        width: auto;
    }
}

/* Result section header */
.result-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}
.result-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (min-width: 480px) {
    .result-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* Blog details action bar */
.details-action-bar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.details-action-bar-right {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (min-width: 540px) {
    .details-action-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* Blog list header */
.blogs-list-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}
.blogs-list-header .btn-primary {
    align-self: flex-start;
}

@media (min-width: 480px) {
    .blogs-list-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* Hero text */
@media (max-width: 479px) {
    .prose-dark h1 { font-size: 1.4rem; }
    .prose-dark h2 { font-size: 1.2rem; }
}