@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');

@layer base {
  :root {
    color-scheme: light;

    --app-canvas: #ebecf0;
    --app-canvas-accent: #f6f7fb;
    --app-surface-1: #ebecf0;
    --app-surface-2: #f3f4f7;
    --app-surface-3: #e2e5ec;

    --app-text-primary: #4b5367;
    --app-text-secondary: #61677c;
    --app-text-muted: #8f96aa;

    --app-border-soft: rgba(255, 255, 255, 0.9);
    --app-border-strong: rgba(186, 190, 204, 0.42);

    --app-accent: #6c7893;
    --app-accent-strong: #555f79;
    --app-success: #5d987a;
    --app-danger: #ae1100;
    --app-warning: #b78635;

    --app-shadow-outer:
      -5px -5px 18px rgba(255, 255, 255, 0.95),
      5px 5px 18px rgba(186, 190, 204, 0.9);
    --app-shadow-outer-strong:
      -9px -9px 24px rgba(255, 255, 255, 0.98),
      9px 9px 24px rgba(186, 190, 204, 0.95);
    --app-shadow-outer-compact:
      -3px -3px 10px rgba(255, 255, 255, 0.92),
      3px 3px 10px rgba(186, 190, 204, 0.75);
    --app-shadow-hover:
      -2px -2px 5px rgba(255, 255, 255, 0.96),
      2px 2px 5px rgba(186, 190, 204, 0.88);
    --app-shadow-hover-compact:
      -2px -2px 6px rgba(255, 255, 255, 0.94),
      2px 2px 6px rgba(186, 190, 204, 0.78);
    --app-shadow-inset:
      inset 2px 2px 5px rgba(186, 190, 204, 0.95),
      inset -5px -5px 10px rgba(255, 255, 255, 0.98);
    --app-shadow-pressed:
      inset 4px 4px 9px rgba(186, 190, 204, 0.96),
      inset -4px -4px 9px rgba(255, 255, 255, 0.92);
    --app-shadow-pressed-compact:
      inset 3px 3px 7px rgba(186, 190, 204, 0.9),
      inset -3px -3px 7px rgba(255, 255, 255, 0.95);
    --app-ring: rgba(97, 103, 124, 0.28);
    --app-focus-ring: 0 0 0 3px rgba(108, 120, 147, 0.22);
    --app-backdrop: rgba(235, 236, 240, 0.78);
    --shell-max-width: 80rem;
    --batch-panel-width: 17rem;
    --batch-panel-margin: 0px;
  }

  .dark {
    color-scheme: dark;

    --app-canvas: #0f0f10;
    --app-canvas-accent: #171718;
    --app-surface-1: #181819;
    --app-surface-2: #202022;
    --app-surface-3: #0b0b0c;

    --app-text-primary: #e8e8e8;
    --app-text-secondary: #b9b9bb;
    --app-text-muted: #8b8b8f;

    --app-border-soft: rgba(255, 255, 255, 0.04);
    --app-border-strong: rgba(106, 106, 111, 0.22);

    --app-accent: #5f7868;
    --app-accent-strong: #769181;
    --app-success: #769181;
    --app-danger: #c58b90;
    --app-warning: #b59a67;

    --app-shadow-outer:
      -10px -10px 24px rgba(29, 29, 31, 0.74),
      14px 14px 26px rgba(4, 4, 5, 0.7);
    --app-shadow-outer-strong:
      -14px -14px 30px rgba(33, 33, 35, 0.78),
      18px 18px 34px rgba(2, 2, 3, 0.76);
    --app-shadow-outer-compact:
      -4px -4px 10px rgba(33, 33, 35, 0.7),
      6px 6px 12px rgba(2, 2, 3, 0.68);
    --app-shadow-hover:
      -3px -3px 7px rgba(30, 30, 32, 0.68),
      3px 3px 7px rgba(5, 5, 6, 0.58);
    --app-shadow-hover-compact:
      -2px -2px 6px rgba(32, 32, 34, 0.72),
      3px 3px 6px rgba(4, 4, 5, 0.62);
    --app-shadow-inset:
      inset 3px 3px 9px rgba(4, 4, 5, 0.76),
      inset -3px -3px 9px rgba(39, 39, 42, 0.42);
    --app-shadow-pressed:
      inset 6px 6px 12px rgba(3, 3, 4, 0.84),
      inset -4px -4px 10px rgba(44, 44, 47, 0.24);
    --app-shadow-pressed-compact:
      inset 4px 4px 9px rgba(4, 4, 5, 0.82),
      inset -3px -3px 8px rgba(40, 40, 44, 0.4);
    --app-ring: rgba(95, 120, 104, 0.34);
    --app-focus-ring: 0 0 0 3px rgba(95, 120, 104, 0.28);
    --app-backdrop: rgba(15, 15, 16, 0.78);
    --shell-max-width: 80rem;
    --batch-panel-width: 17rem;
    --batch-panel-margin: 0px;
  }

  html {
    background: var(--app-canvas);
    height: 100%;
  }

  body {
    font-family: 'Montserrat', sans-serif;
    background:
      radial-gradient(circle at top left, var(--app-canvas-accent) 0%, transparent 34%),
      linear-gradient(145deg, var(--app-canvas) 0%, color-mix(in srgb, var(--app-canvas) 82%, black 18%) 100%);
    color: var(--app-text-primary);
    letter-spacing: -0.01em;
    margin: 0;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  ::selection {
    background: color-mix(in srgb, var(--app-accent) 24%, transparent);
    color: var(--app-text-primary);
  }

  *:focus-visible {
    outline: none;
  }
}

@layer components {
  .surface-1 {
    background: linear-gradient(145deg, var(--app-surface-2), var(--app-surface-1));
    border: 1px solid var(--app-border-soft);
    box-shadow: var(--app-shadow-outer);
  }

  .surface-2 {
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-surface-2) 88%, white 12%), var(--app-surface-1));
    border: 1px solid var(--app-border-soft);
    box-shadow: var(--app-shadow-outer-strong);
  }

  .surface-inset {
    background: linear-gradient(145deg, var(--app-surface-3), var(--app-surface-1));
    border: 1px solid var(--app-border-strong);
    box-shadow: var(--app-shadow-inset);
  }

  .surface-container {
    @apply rounded-[1.75rem] px-6 py-6 sm:px-8 sm:py-8 transition-all duration-200 flex flex-col flex-1 overflow-visible;
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-surface-2) 90%, transparent), var(--app-surface-1));
    border: 1px solid var(--app-border-soft);
    box-shadow: var(--app-shadow-outer-strong);
  }

  .surface-container--sidebar {
    border-radius: 2rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-surface-2) 92%, transparent), color-mix(in srgb, var(--app-surface-1) 86%, transparent));
    border-color: color-mix(in srgb, var(--app-border-soft) 82%, var(--app-border-strong));
    box-shadow: var(--app-shadow-outer);
  }

  .main-content {
    @apply w-full flex flex-col;
    flex: 1 1 auto;
    min-height: 0;
  }

  .panel-neo {
    @apply surface-2 rounded-[1.75rem] p-6 transition-all duration-200;
  }

  .note-detail-shell {
    @apply rounded-[1.75rem] p-6 transition-all duration-200;
    background:
      radial-gradient(circle at top right, color-mix(in srgb, var(--app-accent) 8%, transparent) 0%, transparent 36%),
      linear-gradient(152deg, color-mix(in srgb, var(--app-surface-2) 97%, var(--app-accent) 3%), color-mix(in srgb, var(--app-surface-1) 99%, black 1%));
    border: 1px solid color-mix(in srgb, var(--app-border-soft) 78%, var(--app-border-strong));
    box-shadow: var(--app-shadow-outer);
  }

  .note-detail-shell--inline {
    @apply px-4 py-3;
  }

  .note-detail-title {
    @apply text-base font-semibold tracking-tight;
    color: var(--app-text-primary);
  }

  .note-detail-edit-button {
    @apply inline-flex items-center justify-center rounded-[0.95rem] border transition-all duration-200;
    width: 2.5rem;
    height: 2.5rem;
    transition-timing-function: ease-in-out;
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-surface-2) 92%, transparent), color-mix(in srgb, var(--app-surface-1) 98%, transparent));
    border-color: color-mix(in srgb, var(--app-border-soft) 76%, var(--app-border-strong));
    box-shadow: var(--app-shadow-outer-compact);
    color: var(--app-text-primary);
  }

  .note-detail-edit-button:hover {
    box-shadow: var(--app-shadow-hover-compact);
  }

  .note-detail-edit-button:active {
    box-shadow: var(--app-shadow-pressed-compact);
  }

  .note-detail-edit-button:focus-visible {
    box-shadow: var(--app-shadow-hover-compact), var(--app-focus-ring);
  }

  .note-content-surface {
    background:
      radial-gradient(circle at top left, color-mix(in srgb, var(--app-accent) 6%, transparent) 0%, transparent 40%),
      linear-gradient(145deg, color-mix(in srgb, var(--app-surface-3) 98%, var(--app-accent) 2%), var(--app-surface-1));
    border: 1px solid var(--app-border-strong);
    box-shadow: var(--app-shadow-inset);
  }

  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-[999px] px-5 py-3 font-semibold transition-all duration-200 cursor-pointer border;
    transition-timing-function: ease-in-out;
    background: linear-gradient(145deg, var(--app-surface-2), var(--app-surface-1));
    border-color: var(--app-border-soft);
    box-shadow: var(--app-shadow-outer);
    color: var(--app-text-primary);
  }

  .btn:hover {
    box-shadow: var(--app-shadow-hover);
  }

  .btn:active {
    box-shadow: var(--app-shadow-pressed);
  }

  .btn:focus-visible {
    box-shadow: var(--app-shadow-hover), var(--app-focus-ring);
  }

  .btn-primary {
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-accent) 84%, white 16%), var(--app-accent-strong));
    border-color: color-mix(in srgb, var(--app-accent-strong) 48%, white 52%);
    box-shadow:
      0 14px 28px color-mix(in srgb, var(--app-accent) 28%, transparent),
      inset 1px 1px 0 rgba(255, 255, 255, 0.24);
    color: white;
  }

  .btn-secondary {
    @apply btn;
    color: var(--app-text-secondary);
  }

  .btn-danger {
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-danger) 76%, white 24%), var(--app-danger));
    border-color: color-mix(in srgb, var(--app-danger) 55%, white 45%);
    box-shadow:
      0 14px 28px color-mix(in srgb, var(--app-danger) 26%, transparent),
      inset 1px 1px 0 rgba(255, 255, 255, 0.16);
    color: white;
  }

  .btn-success {
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-success) 78%, white 22%), var(--app-success));
    border-color: color-mix(in srgb, var(--app-success) 52%, white 48%);
    box-shadow:
      0 14px 28px color-mix(in srgb, var(--app-success) 24%, transparent),
      inset 1px 1px 0 rgba(255, 255, 255, 0.18);
    color: white;
  }

  .card {
    @apply panel-neo;
  }

  .card-hover {
    @apply card;
  }

  .card-hover:hover {
    box-shadow: var(--app-shadow-hover);
  }

  .card-hover:active {
    box-shadow: var(--app-shadow-pressed);
  }

  .input {
    @apply w-full rounded-[999px] px-4 py-4 transition-all duration-200;
    background: linear-gradient(145deg, var(--app-surface-3), color-mix(in srgb, var(--app-surface-1) 86%, transparent));
    border: 1px solid var(--app-border-strong);
    box-shadow: var(--app-shadow-inset);
    color: var(--app-text-primary);
  }

  .input-sm {
    @apply input py-2;
  }

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

  .input:focus {
    border-color: color-mix(in srgb, var(--app-accent) 40%, white 60%);
    box-shadow:
      inset 1px 1px 2px rgba(186, 190, 204, 0.95),
      inset -1px -1px 2px rgba(255, 255, 255, 0.98),
      0 0 0 0.24rem var(--app-ring);
  }

  .input:focus-visible {
    box-shadow: var(--app-shadow-inset), var(--app-focus-ring);
  }

  .text-primary {
    color: var(--app-text-primary);
  }

  .text-secondary {
    color: var(--app-text-secondary);
  }

  .text-muted {
    color: var(--app-text-muted);
  }

  .link {
    @apply font-medium transition-colors;
    color: var(--app-accent);
  }

  .link:hover {
    color: var(--app-accent-strong);
  }

  .navbar {
    @apply bg-transparent shadow-none border-b-0 transition-colors;
  }

  .app-shell-panel {
    @apply rounded-[2rem] border px-4 py-3 backdrop-blur-xl transition-all duration-200;
    background: color-mix(in srgb, var(--app-surface-2) 88%, transparent);
    border-color: color-mix(in srgb, var(--app-border-soft) 82%, var(--app-border-strong));
    box-shadow: var(--app-shadow-outer-strong);
  }

  .sidebar-shell {
    @apply rounded-[1.75rem] p-3;
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-surface-2) 92%, transparent), var(--app-surface-1));
    border: 1px solid var(--app-border-soft);
    box-shadow: var(--app-shadow-outer);
  }

  #batch-panel-slot:empty {
    display: none;
  }


  .nav-link-neo {
    @apply inline-flex items-center rounded-2xl px-3 py-2 text-sm font-medium transition-all duration-200;
    transition-timing-function: ease-in-out;
    color: var(--app-text-secondary);
  }

  .nav-link-neo:hover {
    background: color-mix(in srgb, var(--app-surface-2) 88%, transparent);
    box-shadow: var(--app-shadow-hover);
    color: var(--app-text-primary);
  }

  .nav-link-neo:focus-visible {
    background: color-mix(in srgb, var(--app-surface-2) 88%, transparent);
    box-shadow: var(--app-shadow-hover), var(--app-focus-ring);
    color: var(--app-text-primary);
  }

  .icon-button-neo {
    @apply inline-flex h-12 w-12 items-center justify-center rounded-[1rem] border transition-all duration-200;
    transition-timing-function: ease-in-out;
    background: linear-gradient(145deg, var(--app-surface-2), var(--app-surface-1));
    border-color: var(--app-border-soft);
    box-shadow: var(--app-shadow-outer);
    color: var(--app-text-secondary);
  }

  .icon-button-neo:hover {
    box-shadow: var(--app-shadow-hover);
    color: var(--app-text-primary);
  }

  .icon-button-neo:active {
    box-shadow: var(--app-shadow-pressed);
  }

  .icon-button-neo:focus-visible {
    box-shadow: var(--app-shadow-hover), var(--app-focus-ring);
    color: var(--app-text-primary);
  }

  .icon-button-neo--compact {
    box-shadow: var(--app-shadow-outer-compact);
  }

  .icon-button-neo--compact:hover {
    box-shadow: var(--app-shadow-hover-compact);
    color: var(--app-text-primary);
  }

  .icon-button-neo--compact:active {
    box-shadow: var(--app-shadow-pressed-compact);
  }

  .icon-button-neo--compact:focus-visible {
    box-shadow: var(--app-shadow-hover-compact), var(--app-focus-ring);
  }

  .icon-button-neo--small {
    @apply h-9 w-12 rounded-[0.95rem];
  }

  .sidebar-nav-controls {
    @apply flex w-full items-center justify-center gap-3 pt-3;
  }

  .sidebar-top-group {
    @apply flex w-full flex-col items-center gap-3;
  }

  .sidebar-top-group .sidebar-nav-controls {
    padding-top: 0;
  }

  .nav-toggle-neo {
    @apply relative inline-flex items-center gap-1 overflow-hidden rounded-full p-1 flex-none;
    height: 2.5rem;
    background: linear-gradient(145deg, var(--app-surface-3), var(--app-surface-1));
    border: 1px solid var(--app-border-strong);
    box-shadow: var(--app-shadow-inset);
  }

  .nav-toggle-neo-indicator {
    @apply absolute inset-y-1 left-1 rounded-full pointer-events-none;
    width: calc(50% - 0.25rem);
    background: linear-gradient(145deg, var(--app-surface-2), var(--app-surface-1));
    border: 1px solid var(--app-border-soft);
    box-shadow: var(--app-shadow-outer);
    transition: transform 200ms ease-out;
  }

  .nav-toggle-neo-indicator--right {
    transform: translateX(100%);
  }

  .nav-toggle-neo-link {
    @apply relative z-10 flex-1 rounded-full px-3 py-1.5 text-center font-semibold uppercase transition-colors duration-200;
    min-width: 0;
    color: var(--app-text-secondary);
    white-space: nowrap;
  }

  .nav-toggle-neo-link.is-active {
    color: var(--app-text-primary);
  }

  .nav-toggle-neo-link.is-inactive {
    color: var(--app-text-secondary);
  }

  .nav-toggle-neo-link:hover,
  .nav-toggle-neo-link:focus-visible {
    color: var(--app-text-primary);
  }

  .sidebar-nav-toggle {
    width: 8.75rem;
    min-width: 8.75rem;
  }

  .sidebar-nav-toggle--offset {
    margin-top: 0.35rem;
  }

  .sidebar-nav-toggle-link {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    line-height: 1rem;
  }

  .sidebar-action-button {
    @apply inline-flex w-full items-center justify-center rounded-[1rem] border px-4 py-2.5 text-sm font-medium transition-all duration-200;
    transition-timing-function: ease-in-out;
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-surface-2) 92%, transparent), color-mix(in srgb, var(--app-surface-1) 98%, transparent));
    border-color: color-mix(in srgb, var(--app-border-soft) 74%, var(--app-border-strong));
    box-shadow: var(--app-shadow-outer-compact);
    color: var(--app-text-secondary);
  }

  .sidebar-action-button:hover {
    box-shadow: var(--app-shadow-hover-compact);
    color: var(--app-text-primary);
  }

  .sidebar-action-button:active {
    box-shadow: var(--app-shadow-pressed-compact);
  }

  .sidebar-action-button:focus-visible {
    box-shadow: var(--app-shadow-hover-compact), var(--app-focus-ring);
    color: var(--app-text-primary);
  }

  .sidebar-action-button--accent {
    color: var(--app-accent);
    border-color: color-mix(in srgb, var(--app-accent) 14%, var(--app-border-soft));
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-surface-2) 90%, transparent), color-mix(in srgb, var(--app-surface-1) 96%, var(--app-accent) 4%));
  }

  .sidebar-action-button--accent:hover {
    color: var(--app-accent-strong);
  }

  .sidebar-language-toggle {
    @apply flex-none;
    width: 8.75rem;
    min-width: 8.75rem;
  }

  .segmented-neo {
    @apply toggle-neo relative inline-flex items-center gap-1 overflow-hidden;
  }

  .segmented-neo--compact {
    @apply h-10;
  }

  .segmented-neo-indicator {
    @apply absolute inset-y-1 left-1 rounded-full transition-transform duration-200 ease-out pointer-events-none;
    width: calc(50% - 0.25rem);
    background: linear-gradient(145deg, var(--app-surface-2), var(--app-surface-1));
    border: 1px solid var(--app-border-soft);
    box-shadow: var(--app-shadow-outer);
  }

  .segmented-neo-button {
    @apply relative z-10 flex-1 rounded-full px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] transition-colors duration-200;
    color: var(--app-text-secondary);
  }

  .segmented-neo-button:focus-visible {
    box-shadow: var(--app-focus-ring);
    color: var(--app-text-primary);
  }

  .segmented-neo--compact .segmented-neo-button {
    @apply px-4 py-1.5 text-[0.72rem];
    letter-spacing: 0.14em;
  }

  .main-shell {
    @apply flex-1 flex flex-col w-full px-4 sm:px-5 lg:px-6;
    min-height: 0;
    height: 100%;
  }

  .app-layout {
    @apply relative z-10 flex flex-col gap-6 px-4 py-4 sm:px-5 sm:py-6 lg:flex-row lg:items-stretch lg:gap-5;
    height: 100%;
    min-height: 0;
  }

  .app-sidebar {
    @apply w-full lg:w-56;
    position: relative;
    display: flex;
    flex-direction: column;
  }

  @screen lg {
    .app-sidebar {
      position: sticky;
      top: 0;
      height: 100%;
    }
  }

  .sidebar-content {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: visible;
  }

  .sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0.75rem 0.5rem;
    box-sizing: border-box;
  }

  .sidebar-scroll::-webkit-scrollbar {
    display: none;
  }

  .app-content-area {
    @apply flex-1 w-full flex flex-col;
    min-height: 0;
    height: 100%;
  }

  .app-content-area > main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .content-shell {
    @apply rounded-[2.25rem] px-4 py-6 sm:px-6 sm:py-8 w-full;
    background: color-mix(in srgb, var(--app-surface-1) 44%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .content-shell-centered {
    @apply rounded-[2.25rem] px-4 py-6 sm:px-6 sm:py-8 w-full flex-1 flex flex-col;
    background: color-mix(in srgb, var(--app-surface-1) 44%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .hero-shell {
    @apply rounded-[2rem] px-5 py-5 sm:px-6;
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-surface-2) 92%, transparent), color-mix(in srgb, var(--app-surface-1) 86%, transparent));
    border: 1px solid var(--app-border-soft);
    box-shadow: var(--app-shadow-outer);
  }

  .hero-grid {
    @apply grid gap-5;
  }

  @screen lg {
    .hero-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
    }
  }

  .hero-grid-left {
    @apply flex flex-col gap-4;
  }

  .hero-grid-right {
    @apply flex items-center justify-end;
  }

  .hero-grid-right--top {
    @apply items-start;
  }

  .hero-grid-right--bottom {
    @apply items-start;
  }

  .hero-grid-full {
    grid-column: 1 / -1;
    @apply flex flex-col gap-5;
  }

  .notes-hero-shell {
    --notes-hero-control-height: 2.5rem;
    @apply flex items-center;
  }

  .notes-hero-bar {
    @apply flex w-full flex-wrap items-center gap-3;
  }

  .notes-hero-bar > * {
    align-self: center;
  }

  @screen xl {
    .notes-hero-bar {
      flex-wrap: nowrap;
    }
  }

  .notes-status-toggle {
    width: 12.5rem;
    min-width: 12.5rem;
    height: var(--notes-hero-control-height);
  }

  .notes-status-toggle .nav-toggle-neo-link {
    @apply flex items-center justify-center;
    height: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    line-height: 1;
  }

  .sidebar-notes-status-toggle {
    width: 100%;
    min-width: 0;
  }

  .sidebar-notes-status-toggle .nav-toggle-neo-link {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
  }

  .notes-hero-button {
    @apply inline-flex items-center justify-center gap-2 whitespace-nowrap border px-4 transition-all duration-200;
    height: var(--notes-hero-control-height);
    border-radius: 1rem;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition-timing-function: ease-in-out;
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-surface-2) 92%, transparent), color-mix(in srgb, var(--app-surface-1) 98%, transparent));
    border-color: color-mix(in srgb, var(--app-border-soft) 76%, var(--app-border-strong));
    box-shadow: var(--app-shadow-outer-compact);
    color: var(--app-text-secondary);
  }

  .notes-hero-button:hover {
    box-shadow: var(--app-shadow-hover-compact);
    color: var(--app-text-primary);
  }

  .notes-hero-button:active {
    box-shadow: var(--app-shadow-pressed-compact);
  }

  .notes-hero-button:focus-visible {
    box-shadow: var(--app-shadow-hover-compact), var(--app-focus-ring);
    color: var(--app-text-primary);
  }

  .notes-hero-dictate {
    @apply whitespace-nowrap;
  }

  .notes-hero-search {
    @apply relative min-w-0 flex items-center;
    flex: 0 1 13rem;
    width: min(13rem, 100%);
    height: var(--notes-hero-control-height);
  }

  .notes-hero-search .input {
    width: 100%;
    height: 100%;
  }

  .notes-hero-search-input {
    padding-left: 2.1rem;
    transition: color 200ms ease-in-out;
  }

  .notes-hero-search-shortcut {
    @apply pointer-events-none absolute inset-y-0 left-4 hidden items-center text-[0.72rem] font-semibold uppercase opacity-0 transition-all duration-200 ease-in-out md:flex;
    color: var(--app-text-muted);
    letter-spacing: 0.18em;
    transform: translateY(0.2rem);
  }

  .notes-hero-search:hover .notes-hero-search-input:not(:focus),
  .notes-hero-search:focus-within .notes-hero-search-shortcut {
    color: var(--app-text-primary);
  }

  .notes-hero-search:hover .notes-hero-search-shortcut {
    opacity: 1;
    transform: translateY(0);
  }

  .notes-hero-search:hover .notes-hero-search-input:not(:focus)::placeholder {
    color: transparent;
  }

  .notes-hero-primary {
    @apply whitespace-nowrap;
    margin-left: auto;
  }

  .notes-hero-primary > span {
    @apply inline-flex items-center;
    height: 100%;
  }

  .notes-hero-shortcut {
    color: var(--app-text-muted);
    letter-spacing: 0.18em !important;
  }

  .notes-hero-meta {
    @apply flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between;
  }

  .quick-tags-row--inline {
    @apply flex-none items-center gap-2;
  }

  .notes-hero-selected-tags {
    @apply flex flex-wrap gap-2;
  }

  .hashtag-tag {
    @apply inline-flex items-center whitespace-nowrap text-[0.68rem] font-medium tracking-[0.04em];
    color: var(--app-text-muted);
    line-height: 1rem;
  }

  .hashtag-tag--small {
    @apply text-[0.6rem];
  }

  .hashtag-tag--regular {
    @apply text-[0.72rem];
  }

  .tag-suggestion-label {
    @apply text-[0.62rem] font-medium uppercase tracking-[0.12em];
    color: var(--app-text-muted);
  }

  .notes-hero-controls {
    @apply hidden items-center gap-2 text-sm;
  }

  @media (max-width: 767px) {
    html {
      height: auto;
      min-height: 100%;
    }

    body {
      height: auto;
      min-height: 100dvh;
      overflow-x: hidden;
      overflow-y: auto;
    }

    .app-layout {
      gap: 1rem;
      padding: 0.75rem;
      height: auto;
      min-height: 100dvh;
      align-items: stretch;
    }

    .surface-container {
      padding: 1rem;
    }

    .surface-container--sidebar {
      border-radius: 1.5rem;
    }

    .sidebar-content {
      gap: 0.75rem;
      min-height: auto;
    }

    .sidebar-scroll {
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: stretch;
      justify-content: flex-start;
      gap: 0.75rem;
      padding: 0;
      overflow: visible;
      min-height: auto;
    }

    .sidebar-top-group {
      width: 100%;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
    }

    .sidebar-nav-controls {
      width: 100%;
      justify-content: flex-start;
      gap: 0.5rem;
    }

    .sidebar-nav-toggle,
    .sidebar-language-toggle {
      width: 100%;
      min-width: 0;
    }

    .sidebar-nav-toggle--offset {
      margin-top: 0;
    }

    .sidebar-actions {
      display: flex;
      width: auto;
      align-items: center;
      justify-content: flex-end;
      gap: 0.5rem;
      padding-top: 0;
    }

    .sidebar-action-button--desktop-only {
      display: none;
    }

    .icon-button-neo--small {
      width: 2.5rem;
    }

    .sidebar-action-button {
      padding: 0.55rem 0.9rem;
      font-size: 0.75rem;
    }

    .hero-shell {
      border-radius: 1.5rem;
      padding: 1rem;
    }

    .notes-hero-shell {
      --notes-hero-control-height: 2.25rem;
    }

    .notes-hero-bar {
      gap: 0.65rem;
    }

    .notes-hero-button {
      padding-left: 0.8rem;
      padding-right: 0.8rem;
      border-radius: 0.9rem;
      font-size: 0.75rem;
    }

    .notes-hero-search {
      flex-basis: 100%;
      order: 10;
    }

    .notes-hero-primary {
      margin-left: 0;
      flex: 1 1 auto;
      min-width: 0;
    }

    .notes-hero-primary > span {
      width: 100%;
      justify-content: center;
    }

    .notes-mobile-status-toggle {
      width: 100%;
      height: auto;
      padding: 0.3rem;
      border-radius: 1.25rem;
    }

    .notes-mobile-status-grid {
      display: grid;
      width: 100%;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.25rem;
    }

    .notes-mobile-status-link {
      display: inline-flex;
      min-height: 2rem;
      align-items: center;
      justify-content: center;
      padding: 0.45rem 0.3rem;
      font-size: 0.58rem;
      letter-spacing: 0.08em;
      white-space: normal;
      line-height: 1.1;
      border-radius: 999px;
      border: 1px solid transparent;
    }

    .notes-mobile-status-link.is-active {
      background: linear-gradient(145deg, var(--app-surface-2), var(--app-surface-1));
      border-color: var(--app-border-soft);
      box-shadow: var(--app-shadow-outer-compact);
      color: var(--app-text-primary);
    }

    .notes-mobile-status-link.is-inactive {
      color: var(--app-text-secondary);
    }

    .notes-hero-meta {
      display: none;
    }

    .note-row {
      padding: 0.7rem 0.85rem;
      border-radius: 1.4rem;
    }

    .note-row-layout {
      gap: 0.75rem;
    }

    .note-row-actions {
      gap: 0.35rem;
    }

    .note-row-actions .btn-secondary {
      min-width: 0;
      padding: 0.45rem 0.65rem;
      border-radius: 0.85rem;
      font-size: 0.68rem;
    }

    .note-excerpt {
      font-size: 0.92rem;
      line-height: 1.45;
    }

    .main-shell,
    .app-content-area,
    .app-content-area > main,
    .main-content {
      height: auto;
      min-height: 0;
      overflow: visible;
    }

    .app-sidebar {
      height: auto;
    }
  }

  .tag-manager-controls {
    @apply grid w-full gap-4;
    grid-template-columns: 1fr;
  }

  @screen lg {
    .tag-manager-controls {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      @apply items-center gap-5;
    }
  }

  .tag-manager-search,
  .tag-manager-new {
    @apply flex-1;
  }

  .tag-manager-new {
    @apply flex flex-col gap-3 sm:flex-row;
  }

  .tag-manager-new input {
    @apply flex-1;
  }

  .tag-manager-list {
    @apply flex flex-col gap-3;
  }

  .tag-manager-empty {
    @apply rounded-[1.5rem] border border-dashed px-4 py-6 text-center;
    border-color: color-mix(in srgb, var(--app-border-soft) 80%, transparent);
  }

  .tag-manage-row {
    @apply flex flex-col gap-3 rounded-[1.5rem] border px-4 py-4 transition-all duration-200;
    border-color: color-mix(in srgb, var(--app-border-soft) 80%, var(--app-border-strong));
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-surface-2) 90%, transparent), var(--app-surface-1));
    box-shadow: var(--app-shadow-outer);
  }

  .tag-manage-view,
  .tag-manage-edit {
    @apply flex flex-wrap items-center justify-between gap-3;
  }

  .tag-manage-summary {
    @apply flex flex-wrap items-center gap-3;
  }

  .tag-manage-name {
    @apply hashtag-tag hashtag-tag--regular;
  }

  .tag-manage-actions {
    @apply flex flex-wrap items-center gap-2;
  }

  .batch-panel {
    @apply hidden w-full flex-col gap-3;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    font-size: 0.8rem;
  }

  .batch-panel .batch-panel-header p {
    font-size: 0.78rem;
  }

  .batch-panel .batch-mode-switch-btn {
    @apply px-3 py-1 text-[0.7rem];
  }

  .batch-panel .input {
    @apply text-[0.78rem] py-2 px-3;
  }

  .batch-panel .btn-primary-cta,
  .batch-panel .btn-secondary {
    @apply text-[0.78rem] px-3 py-2 min-w-0;
    box-shadow: var(--app-shadow-outer-compact);
  }

  .batch-panel .btn-primary-cta:hover,
  .batch-panel .btn-secondary:hover {
    box-shadow: var(--app-shadow-hover-compact);
  }

  .batch-panel .btn-primary-cta:active,
  .batch-panel .btn-secondary:active {
    box-shadow: var(--app-shadow-pressed-compact);
  }

  .batch-panel .btn-primary-cta:focus-visible,
  .batch-panel .btn-secondary:focus-visible {
    box-shadow: var(--app-shadow-hover-compact), var(--app-focus-ring);
  }

  .batch-panel .batch-panel-header {
    @apply mb-2;
  }

  .batch-panel-header {
    @apply flex items-center justify-between;
  }

  .batch-panel-actions {
    @apply flex flex-wrap items-center gap-3;
  }

  .batch-mode-switch {
    @apply mb-4 inline-flex items-center gap-1 rounded-full p-1;
    background: linear-gradient(145deg, var(--app-surface-3), var(--app-surface-1));
    border: 1px solid var(--app-border-strong);
    box-shadow: var(--app-shadow-inset);
  }

  .batch-mode-switch-btn {
    @apply rounded-full px-4 py-1 text-xs font-semibold text-secondary transition;
  }

  .batch-mode-switch-btn.is-active {
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-accent) 78%, white 22%), var(--app-accent-strong));
    color: white;
    box-shadow:
      inset 1px 1px 2px rgba(255, 255, 255, 0.24),
      inset -1px -1px 1px rgba(0, 0, 0, 0.08);
  }

  .batch-select-control {
    @apply pointer-events-auto absolute left-4 top-4 hidden;
  }

  .batch-select-control input {
    @apply relative h-5 w-5 cursor-pointer rounded-full border bg-transparent text-transparent;
    border-color: color-mix(in srgb, var(--app-border-soft) 90%, transparent);
    appearance: none;
  }

  .batch-select-control input:checked {
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-accent) 82%, white 18%), var(--app-accent-strong));
    border-color: color-mix(in srgb, var(--app-accent-strong) 60%, white 40%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-accent) 30%, transparent);
  }

  .batch-select-control input:checked::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0.9rem;
    height: 0.9rem;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 10l3 3 7-7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  .batch-select-control input:focus-visible {
    box-shadow: 0 0 0 3px var(--app-ring);
  }

  .batch-mode .note-row .batch-select-control {
    @apply flex;
  }

  .batch-note-selectable {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--app-border-soft) 70%, var(--app-border-strong));
  }

  .batch-note-selected {
    border-color: color-mix(in srgb, var(--app-accent) 70%, white 30%) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 35%, transparent);
  }


  .note-form-row {
    @apply flex flex-col gap-3;
  }

  @screen lg {
    .note-form-row {
      flex-direction: row;
      gap: 1.25rem;
    }
  }

  .note-title-field {
    @apply w-full;
    flex: 1 1 50%;
  }

  .note-form-actions {
    @apply flex items-center gap-3;
    flex: 1 1 50%;
    justify-content: flex-end;
  }

  .note-dictate-button {
    @apply flex justify-end;
  }

  .note-inline-icon-button {
    @apply inline-flex items-center justify-center p-0 text-sm;
    width: 2.2rem;
    height: 2.2rem;
  }

  .note-form {
    @apply space-y-5;
  }

  .note-form--inline {
    @apply space-y-2;
  }

  .note-form--inline .note-form-row {
    gap: 0.5rem;
  }

  .note-form--inline .note-form-actions {
    gap: 0.375rem;
    flex: 0 0 auto;
  }

  .note-form--inline .input {
    @apply px-3 py-3;
    padding-left: 0.875rem;
  }

  .note-form--inline .note-tags-stack {
    @apply gap-1;
  }

  .note-form--inline .note-tags-input-wrapper {
    @apply px-3 py-3;
  }

  .note-form--inline .note-tags-selection {
    min-height: 0;
    gap: 0.375rem;
  }

  .note-form--inline .note-tags-selection:empty {
    display: none;
  }

  .note-form--inline .note-tags-input {
    @apply text-sm;
    padding-left: 0.125rem;
  }

  .note-form--inline .note-tags-suggestions {
    top: calc(100% + 0.25rem);
  }

  .note-form--inline .note-inline-icon-button,
  .note-form--inline .btn-primary-cta,
  .note-form--inline .btn-danger-cta {
    min-width: 0;
    border-radius: 1rem;
    box-shadow: var(--app-shadow-outer-compact);
  }

  .note-form--inline .note-inline-icon-button:hover,
  .note-form--inline .btn-primary-cta:hover,
  .note-form--inline .btn-danger-cta:hover {
    box-shadow: var(--app-shadow-hover-compact);
  }

  .note-form--inline .note-inline-icon-button:active,
  .note-form--inline .btn-primary-cta:active,
  .note-form--inline .btn-danger-cta:active {
    box-shadow: var(--app-shadow-pressed-compact);
  }

  .note-form--inline .btn-primary-cta,
  .note-form--inline .btn-danger-cta {
    @apply px-3 py-2 text-sm;
  }

  .note-form--inline .note-title-field {
    flex: 1 1 auto;
  }


  .note-form--inline .trix-content,
  .note-form--inline trix-editor {
    min-height: 11rem;
  }

  .note-form--inline lexxy-editor {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .note-form--inline lexxy-editor {
    --lexxy-editor-padding: 0.5ch;
  }

  .note-form--inline :where(lexxy-toolbar) {
    padding: 4px;
  }

  .note-form--inline div.lexxy-editor__content {
    padding: 0.75rem;
  }

  .note-form--inline > .flex.items-center.justify-end.gap-3 {
    @apply flex-wrap gap-2;
  }

  .note-form--inline > .flex.items-center.justify-end.gap-3 > * {
    flex: 1 1 auto;
  }

  .note-tags-stack {
    @apply flex flex-col gap-3;
  }

  .note-tags-selection {
    @apply flex flex-wrap items-center gap-2;
    min-height: 1.5rem;
  }

  .note-selected-tag {
    @apply inline-flex items-center gap-1;
    color: var(--app-text-muted);
  }

  .note-selected-tag__label {
    @apply hashtag-tag;
  }

  .note-selected-tag__remove {
    @apply inline-flex h-4 w-4 items-center justify-center rounded-full text-current opacity-70 transition-opacity;
  }

  .note-selected-tag__remove:hover {
    opacity: 1;
  }

.note-tags-input-wrapper {
    @apply relative rounded-[999px] px-4 py-3 transition-all duration-200;
    background: linear-gradient(145deg, var(--app-surface-3), color-mix(in srgb, var(--app-surface-1) 86%, transparent));
    border: 1px solid var(--app-border-strong);
    box-shadow: var(--app-shadow-inset);
  }

  .note-tags-input-wrapper:focus-within {
    border-color: color-mix(in srgb, var(--app-border-strong) 80%, white 20%);
    box-shadow:
      inset 1px 1px 2px rgba(186, 190, 204, 0.95),
      inset -1px -1px 2px rgba(255, 255, 255, 0.98);
  }

  .note-tags-input {
    @apply w-full bg-transparent text-sm;
    border: none;
    padding: 0;
    color: var(--app-text-primary);
  }

  .note-tags-input::placeholder {
    color: var(--app-text-muted);
  }

  .note-tags-input:focus,
  .note-tags-input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  .quick-tags-row {
    @apply flex flex-wrap items-center gap-2;
  }

  .quick-tags-row--filters {
    @apply min-h-8;
  }

  .quick-tags-label {
    @apply text-[0.68rem] font-semibold uppercase tracking-[0.18em];
    color: var(--app-text-muted);
  }

  .quick-tags-list {
    @apply flex flex-wrap items-center gap-2;
  }

  .quick-tag-chip {
    @apply inline-flex items-center justify-center rounded-full px-3 py-1.5 text-xs font-medium transition-all duration-200;
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-surface-2) 92%, transparent), color-mix(in srgb, var(--app-surface-1) 98%, transparent));
    border: 1px solid color-mix(in srgb, var(--app-border-soft) 78%, var(--app-border-strong));
    box-shadow: var(--app-shadow-outer-compact);
    color: var(--app-text-secondary);
  }

  .quick-tag-chip:hover,
  .quick-tag-chip:focus-visible {
    color: var(--app-text-primary);
    box-shadow: var(--app-shadow-hover-compact);
  }

  .quick-tag-chip.is-active {
    color: var(--app-text-primary);
    border-color: color-mix(in srgb, var(--app-border-strong) 82%, white 18%);
    background: linear-gradient(145deg, var(--app-surface-3), var(--app-surface-2));
  }

  #notes {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .notes-columns {
    @apply grid gap-4 lg:gap-6 lg:grid-cols-2;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    align-items: stretch;
    align-content: stretch;
    grid-auto-rows: 1fr;
  }

  .note-column {
    @apply flex flex-col gap-3 rounded-[1.25rem] border px-3 py-4 sm:px-4 sm:py-5;
    border-color: color-mix(in srgb, var(--app-border-soft) 80%, var(--app-border-strong));
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-surface-2) 94%, transparent), var(--app-surface-1));
    box-shadow: var(--app-shadow-outer);
    min-height: 0;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
  }

  .note-column-header {
    @apply flex items-center justify-between text-xs font-semibold uppercase tracking-[0.24em] text-muted;
    flex: 0 0 auto;
  }

  .note-column-count {
    @apply text-[0.75rem] text-secondary;
  }

  .note-column-body {
    @apply flex flex-col;
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
  }

  .note-column-scroll {
    @apply flex flex-col gap-3;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem 1rem;
    margin: -0.75rem -0.75rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .note-column-scroll .note-row {
    width: 100%;
    margin-inline: 0;
  }

  .note-column-scroll::-webkit-scrollbar {
    display: none;
  }

  .note-column-empty {
    @apply text-xs text-muted italic text-center py-6;
  }

  .note-tags-suggestions {
    left: 0;
    right: 0;
    top: calc(100% + 0.4rem);
    margin-top: 0;
  }

  .meta-label {
    @apply text-[0.7rem] font-semibold uppercase tracking-[0.26em];
    color: var(--app-text-muted);
  }

  .suggestion-panel {
    @apply absolute z-20 mt-2 max-h-56 w-full overflow-y-auto rounded-[1.5rem] p-2;
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-surface-2) 94%, white 6%), var(--app-surface-1));
    border: 1px solid var(--app-border-soft);
    box-shadow: var(--app-shadow-outer-strong);
  }

  .suggestion-item-neo {
    @apply flex w-full items-center gap-3 rounded-[1.1rem] px-4 py-3 text-left transition-all duration-200;
    transition-timing-function: ease-in-out;
    color: var(--app-text-secondary);
  }

  .suggestion-item-neo:hover {
    background: color-mix(in srgb, var(--app-surface-2) 78%, transparent);
    box-shadow: var(--app-shadow-hover);
    color: var(--app-text-primary);
  }

  .suggestion-item-neo.is-active {
    background: color-mix(in srgb, var(--app-surface-2) 82%, transparent);
    box-shadow: var(--app-shadow-hover);
    color: var(--app-text-primary);
  }

  .suggestion-item-neo:focus-visible {
    background: color-mix(in srgb, var(--app-surface-2) 78%, transparent);
    box-shadow: var(--app-shadow-hover), var(--app-focus-ring);
    color: var(--app-text-primary);
  }

  .filter-chip-bar {
    @apply flex flex-wrap items-center gap-2 rounded-[1.5rem] px-4 py-3;
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-surface-2) 90%, transparent), var(--app-surface-1));
    border: 1px solid var(--app-border-soft);
    box-shadow: var(--app-shadow-outer);
  }

  .note-row {
    @apply relative no-underline block w-full cursor-pointer rounded-[1.9rem] px-4 py-2.5 sm:px-5 sm:py-3 transition-all duration-200;
    transition-timing-function: ease-in-out;
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-surface-2) 92%, transparent), var(--app-surface-1));
    border: 1px solid var(--app-border-soft);
    box-shadow: var(--app-shadow-outer-compact);
  }

  .note-row:hover {
    box-shadow: var(--app-shadow-hover-compact);
  }

  .note-row:active {
    box-shadow: var(--app-shadow-pressed);
  }

  .note-row:focus-visible {
    box-shadow: var(--app-shadow-hover-compact), var(--app-focus-ring);
  }

  .note-row-meta {
    @apply flex min-w-0 items-center gap-2;
  }

  .note-row-layout {
    @apply flex min-w-0 items-center justify-between gap-3;
  }

  .note-title {
    @apply shrink-0 text-[0.58rem] font-medium uppercase tracking-[0.16em];
    color: var(--app-text-muted);
    max-width: 7rem;
  }

  .note-inline-tags {
    @apply flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden;
  }

  .note-inline-tag {
    @apply hashtag-tag hashtag-tag--small shrink-0;
  }

  .note-row-actions {
    @apply flex flex-none items-center self-center gap-2;
  }

  .note-excerpt {
    @apply min-w-0 flex-1 text-sm leading-6 sm:text-base;
    color: var(--app-text-primary);
  }

  .btn-primary-cta {
    @apply inline-flex items-center justify-center rounded-[1.15rem] border px-4 py-3 font-semibold transition-all duration-200;
    transition-timing-function: ease-in-out;
    min-width: 11.5rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-surface-2) 96%, white 4%), var(--app-surface-1));
    border-color: var(--app-border-soft);
    box-shadow: var(--app-shadow-outer);
    color: var(--app-text-primary);
  }

  .btn-primary-cta:hover {
    box-shadow: var(--app-shadow-hover);
    color: var(--app-accent-strong);
  }

  .btn-primary-cta:active {
    box-shadow: var(--app-shadow-pressed);
  }

  .btn-nav-accent {
    @apply inline-flex items-center justify-center rounded-[1rem] border px-4 py-2.5 font-semibold transition-all duration-200;
    transition-timing-function: ease-in-out;
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-surface-2) 96%, white 4%), var(--app-surface-1));
    border-color: var(--app-border-soft);
    box-shadow: var(--app-shadow-outer);
    color: var(--app-text-primary);
  }

  .btn-nav-accent:hover {
    color: var(--app-accent-strong);
    box-shadow: var(--app-shadow-hover);
  }

  .btn-nav-accent:active {
    box-shadow: var(--app-shadow-pressed);
  }

  .btn-danger-cta {
    @apply inline-flex items-center justify-center rounded-[1.15rem] border px-4 py-3 font-semibold transition-all duration-200;
    transition-timing-function: ease-in-out;
    min-width: 11.5rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-danger) 18%, var(--app-surface-2)), var(--app-surface-1));
    border-color: color-mix(in srgb, var(--app-danger) 26%, var(--app-border-soft));
    box-shadow: var(--app-shadow-outer);
    color: var(--app-danger);
  }

  .btn-danger-cta:hover {
    box-shadow: var(--app-shadow-hover);
    color: color-mix(in srgb, var(--app-danger) 88%, white 12%);
  }

  .btn-danger-cta:active {
    box-shadow: var(--app-shadow-pressed);
  }

  .btn-danger-cta:focus-visible {
    box-shadow: var(--app-shadow-hover), var(--app-focus-ring);
  }

  .sidebar-rail {
    @apply w-full md:w-44 md:max-h-full md:overflow-auto md:pr-2;
  }

  .sidebar-rail-shell {
    @apply rounded-[1.75rem] p-3;
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-surface-2) 94%, transparent), var(--app-surface-1));
    border: 1px solid var(--app-border-soft);
    box-shadow: var(--app-shadow-outer);
  }

  .subtle-divider {
    border-color: color-mix(in srgb, var(--app-border-strong) 76%, transparent);
  }

  .auth-shell {
    @apply mx-auto w-full max-w-md;
  }

  .auth-panel {
    @apply panel-neo px-6 py-8 sm:px-8;
  }

  .auth-title {
    @apply text-center text-3xl font-semibold tracking-tight;
    color: var(--app-text-primary);
  }

  .auth-subtitle {
    @apply mt-2 text-center text-sm leading-6;
    color: var(--app-text-secondary);
  }

  .marketing-shell {
    @apply mx-auto flex min-h-[calc(100vh-10rem)] max-w-5xl flex-col justify-center gap-10;
  }

  .marketing-hero {
    @apply grid gap-6 lg:grid-cols-[minmax(0,1.2fr)_minmax(18rem,0.8fr)] lg:items-center;
  }

  .marketing-panel {
    @apply panel-neo rounded-[2.4rem] p-8 sm:p-10;
  }

  .marketing-stat {
    @apply rounded-[1.5rem] px-5 py-4;
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-surface-2) 92%, transparent), var(--app-surface-1));
    border: 1px solid var(--app-border-soft);
    box-shadow: var(--app-shadow-outer);
  }

  .modal-backdrop {
    @apply fixed inset-0 backdrop-blur-sm z-50 transition-colors;
    background: color-mix(in srgb, var(--app-backdrop) 72%, transparent);
  }

  .tag {
    @apply inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold;
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-surface-2) 88%, white 12%), var(--app-surface-1));
    border: 1px solid color-mix(in srgb, var(--app-accent) 18%, var(--app-border-soft));
    box-shadow: var(--app-shadow-outer);
    color: var(--app-accent);
  }

  .alert-success {
    @apply rounded-[1rem] px-5 py-3.5;
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-success) 14%, var(--app-surface-2)), var(--app-surface-1));
    border: 1px solid color-mix(in srgb, var(--app-success) 32%, var(--app-border-soft));
    box-shadow: var(--app-shadow-outer-compact);
    color: var(--app-success);
    overflow-wrap: anywhere;
  }

  .alert-error {
    @apply rounded-[1rem] px-5 py-3.5;
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-danger) 14%, var(--app-surface-2)), var(--app-surface-1));
    border: 1px solid color-mix(in srgb, var(--app-danger) 32%, var(--app-border-soft));
    box-shadow: var(--app-shadow-outer-compact);
    color: var(--app-danger);
    overflow-wrap: anywhere;
  }

  .alert-warning {
    @apply rounded-[1rem] px-5 py-3.5;
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-warning) 14%, var(--app-surface-2)), var(--app-surface-1));
    border: 1px solid color-mix(in srgb, var(--app-warning) 32%, var(--app-border-soft));
    box-shadow: var(--app-shadow-outer-compact);
    color: var(--app-warning);
    overflow-wrap: anywhere;
  }

  .bg-dark-gradient {
    background:
      radial-gradient(circle at top left, color-mix(in srgb, var(--app-canvas-accent) 84%, white 16%) 0%, transparent 34%),
      linear-gradient(145deg, var(--app-canvas) 0%, color-mix(in srgb, var(--app-canvas) 84%, black 16%) 100%) !important;
  }

  .btn-neo {
    @apply btn;
  }

  .btn-neo-primary {
    @apply btn btn-primary;
  }

  .btn-neo-danger {
    @apply btn btn-danger;
  }

  .input-neo {
    @apply input;
  }

  .chip-neo {
    @apply tag;
  }

  .toggle-neo {
    @apply rounded-full p-1;
    background: linear-gradient(145deg, var(--app-surface-3), var(--app-surface-1));
    border: 1px solid var(--app-border-strong);
    box-shadow: var(--app-shadow-inset);
  }
}