* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
    body { font-family: 'DM Sans', system-ui, sans-serif; }
    .font-display { font-family: 'Syne', sans-serif; letter-spacing: -0.02em; }
    .font-mono { font-family: 'JetBrains Mono', monospace; }

    /* Mildly Dark Aesthetic - deep navy with colorful ambiance */
    .dark body {
      background: #0d1117;
      background-image:
        radial-gradient(ellipse at 20% 0%, rgba(99, 102, 241, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 100%, rgba(16, 185, 129, 0.09) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(236, 72, 153, 0.05) 0%, transparent 60%);
    }
    /* Vibrant Light Mode - soft colorful backdrop */
    html:not(.dark) body {
      background-color: #edf0f8 !important;
      background-image: 
        radial-gradient(circle at 5% 0%, rgba(99, 102, 241, 0.22) 0%, transparent 55%),
        radial-gradient(circle at 95% 100%, rgba(236, 72, 153, 0.16) 0%, transparent 55%),
        radial-gradient(circle at 75% 5%, rgba(16, 185, 129, 0.14) 0%, transparent 50%);
      color: #334155;
    }
    /* Enhance text contrast in light mode against the new colorful background */
    html:not(.dark) .text-gray-300 { color: #94a3b8 !important; }
    html:not(.dark) .text-gray-400 { color: #64748b !important; }
    html:not(.dark) .text-gray-500 { color: #475569 !important; }

    /* Strengthen borders/dividers in light mode — gray-100 is invisible on the colored bg */
    html:not(.dark) .divide-gray-100 > * + * { border-color: rgba(99, 120, 160, 0.2) !important; }
    html:not(.dark) .border-gray-100 { border-color: rgba(99, 120, 160, 0.2) !important; }
    html:not(.dark) .border-t.border-gray-100 { border-color: rgba(99, 120, 160, 0.2) !important; }
    html:not(.dark) .border-b.border-gray-100 { border-color: rgba(99, 120, 160, 0.2) !important; }
    html:not(.dark) hr.border-gray-100 { border-color: rgba(99, 120, 160, 0.2) !important; }
    /* Also make the surface card border crisper */
    html:not(.dark) .surface {
      border-color: rgba(99, 120, 160, 0.25) !important;
    }
    /* border-gray-200 is almost invisible on the new background too */
    html:not(.dark) .border-gray-200 { border-color: rgba(99, 120, 160, 0.35) !important; }

    /* View animation */
    .view { animation: slideUp 0.22s ease-out; }
    @keyframes slideUp {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* Card hover lift */
    .card { transition: transform 0.18s ease, box-shadow 0.18s ease; cursor: pointer; }
    .card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(0,0,0,0.08); }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 4px; }
    .dark ::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.25); }

    /* Tooltip */
    .tip { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
    .has-tip:hover .tip { visibility: visible; opacity: 1; }

    /* Pulsing ring for urgent items */
    @keyframes pulse-ring {
      0%   { transform: scale(0.9); opacity: 0.8; }
      100% { transform: scale(1.8); opacity: 0; }
    }
    .pulse-dot { position: relative; display: inline-flex; }
    .pulse-dot::after {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 999px;
      border: 2px solid currentColor;
      animation: pulse-ring 1.6s ease-out infinite;
    }
    .surface {
      background: rgba(255,255,255,0.72);
      border: 1px solid rgba(255,255,255,0.45);
      backdrop-filter: blur(28px);
      -webkit-backdrop-filter: blur(28px);
    }
    .dark .surface {
      background: rgba(19, 24, 40, 0.82);
      border-color: rgba(99, 102, 241, 0.15);
    }
    .section-body-surface {
      background: rgba(255,255,255,0.92) !important;
    }
    .dark .section-body-surface {
      background: rgba(12, 16, 28, 0.95) !important;
    }

    /* Colorful dark-mode card and border accents */
    .dark .border-gray-100 { border-color: rgba(148, 163, 184, 0.1) !important; }
    .dark .border-gray-200 { border-color: rgba(148, 163, 184, 0.15) !important; }
    .dark .border-gray-700 { border-color: rgba(99, 102, 241, 0.2) !important; }
    .dark .border-gray-800 { border-color: rgba(148, 163, 184, 0.12) !important; }
    .dark .divide-gray-100 > * + * { border-color: rgba(148, 163, 184, 0.08) !important; }
    .dark .divide-gray-800 > * + * { border-color: rgba(148, 163, 184, 0.12) !important; }

    /* Dark text: softer whites and colorful tints */
    .dark .text-gray-100 { color: #e8ecf2 !important; }
    .dark .text-gray-200 { color: #d4d9e3 !important; }
    .dark .text-gray-300 { color: #b9c1d4 !important; }
    .dark .text-gray-400 { color: #8b97b0 !important; }
    .dark .text-gray-500 { color: #6b7894 !important; }

    /* Dark bg: slightly lighter with blue undertones */
    .dark .bg-gray-950 { background-color: #0b0e17 !important; }
    .dark .bg-gray-900 { background-color: #111622 !important; }
    .dark .bg-gray-800 { background-color: #181d2c !important; }
    .dark .bg-gray-700 { background-color: #1f253a !important; }
    .dark .bg-gray-50 { background-color: #0f131d !important; }
    .dark .bg-white { background-color: #111622 !important; }
    .dark .bg-gray-100 { background-color: #141a28 !important; }

    /* Colorful dark chips */
    .dark .chip-green { background: #052e2b; color: #6ee7b7; }
    .dark .chip-indigo { background: #1e1b5a; color: #c7d2fe; }
    .dark .chip-purple { background: #2d0a3a; color: #d8b4fe; }
    .dark .chip-red { background: #3b0a1a; color: #fda4af; }
    .dark .chip-amber { background: #3f2c05; color: #fcd34d; }
    .dark .chip-gray { background: #1e2232; color: #94a3b8; }
    .chip { display:inline-flex; align-items:center; gap:0.35rem; padding:0.32rem 0.55rem; border-radius:999px; font-size:0.7rem; font-weight:700; line-height:1; white-space:nowrap; }
    .chip-green { background:#dcfce7; color:#166534; }
    .chip-indigo { background:#e0e7ff; color:#4338ca; }
    .chip-purple { background:#f3e8ff; color:#7e22ce; }
    .chip-red { background:#ffe4e6; color:#be123c; }
    .chip-amber { background:#fef3c7; color:#b45309; }
    .chip-gray { background:#e5e7eb; color:#4b5563; }
    details[open] > summary .details-chevron { transform: rotate(90deg); }
    .route-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      padding: 0.375rem 0.625rem;
      border-radius: 999px;
      border: 1px solid #c7d2fe;
      background: #eef2ff;
      color: #4338ca;
      font-size: 0.75rem;
      font-weight: 700;
      line-height: 1;
      max-width: 100%;
      min-width: 0;
      cursor: grab;
      transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    }
    .route-pill:active { cursor: grabbing; }
    .route-pill--endpoint {
      border-color: #a7f3d0;
      background: #ecfdf5;
      color: #047857;
    }
    .route-pill--current {
      border-color: #7dd3fc;
      background: #e0f2fe;
      color: #0369a1;
    }
    .route-pill--strict {
      border-color: #fde68a;
      background: #fffbeb;
      color: #b45309;
    }
    .route-pill--locked {
      border-color: #d1d5db !important;
      background: #e5e7eb !important;
      color: #6b7280 !important;
      cursor: default;
      opacity: 0.55;
    }
    .dark .route-pill--locked {
      border-color: #374151 !important;
      background: #1f253a !important;
      color: #6b7280 !important;
      opacity: 0.5;
    }
    .route-pill--dragover {
      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.28);
      transform: translateY(-1px);
    }
    .route-pill-handle {
      flex-shrink: 0;
      font-size: 10px;
      opacity: 0.5;
      user-select: none;
    }
    .route-pill-label {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .route-pill-remove {
      flex-shrink: 0;
      border: 0;
      background: transparent;
      color: inherit;
      opacity: 0.7;
      cursor: pointer;
      line-height: 1;
      padding: 0;
    }
    .route-pill-remove:hover { color: #e11d48; opacity: 1; }
    .dark .route-pill {
      border-color: #4f46e5;
      background: #1e1b47;
      color: #c7d2fe;
    }
    .dark .route-pill--endpoint {
      border-color: #059669;
      background: #042f26;
      color: #6ee7b7;
    }
    .dark .route-pill--current {
      border-color: #0284c7;
      background: #082f44;
      color: #7dd3fc;
    }
    .dark .route-pill--strict {
      border-color: #d97706;
      background: #3f2a09;
      color: #fcd34d;
    }
    .inp {
      width: 100%;
      border: 1px solid rgba(148,163,184,0.22);
      background: rgba(255,255,255,0.78);
      border-radius: 14px;
      padding: 0.7rem 0.85rem;
      outline: none;
    }
    .dark .inp {
      background: rgba(22, 28, 46, 0.92);
      border-color: rgba(99, 102, 241, 0.2);
      color: #e8ecf2;
    }
    .dark .inp:focus { box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.4); border-color: #818cf8; }
    /* Card body collapse */
    .card-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, opacity 0.25s ease; opacity: 0; }
    .card-body.open { max-height: 9999px; opacity: 1; }
    .nav-btn { transition: background-color 0.18s ease, color 0.18s ease; }
    .nav-btn:hover { background: rgba(99,102,241,0.08); }
    .dark .nav-btn:hover { background: rgba(99, 102, 241, 0.12); }

    /* Colorful dark-mode link and accent hover */
    .dark a:hover { color: #a5b4fc; }
    .dark .hover\:bg-gray-100:hover { background-color: rgba(99, 102, 241, 0.08) !important; }
    .dark .hover\:bg-gray-800:hover { background-color: rgba(99, 102, 241, 0.1) !important; }

    /* Card hover with colorful glow */
    .dark .card:hover {
      box-shadow: 0 8px 24px -8px rgba(99, 102, 241, 0.15), 0 0 0 1px rgba(99, 102, 241, 0.15);
    }
    .modal-slide { display: flex; align-items: flex-end; }
    #backdrop { background: rgba(0,0,0,0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
    @media (min-width: 768px) {
      .modal-slide { align-items: center; justify-content: center; }
    }

    /* Dark mode accent touches — colorful borders on important elements */
    .dark .rounded-xl.border {
      border-color: rgba(148, 163, 184, 0.1);
    }
    .dark .rounded-2xl.border {
      border-color: rgba(148, 163, 184, 0.12);
    }
    /* Sidebar accent stripe */
    .dark aside.fixed {
      background: rgba(13, 17, 28, 0.9) !important;
      border-right-color: rgba(99, 102, 241, 0.18) !important;
    }
    /* Button with indigo glow in dark */
    .dark button.bg-gray-900,
    .dark button.dark\:bg-white {
      background: #6366f1 !important;
      color: #fff !important;
    }
    .dark button.bg-gray-900:hover,
    .dark button.dark\:bg-white:hover {
      background: #4f46e5 !important;
    }

    /* ═══════════════════════════════════════
       HOVER-EXPAND SIDEBAR — collapsed by default
       ═══════════════════════════════════════ */
    #sidebar {
      width: 60px !important;
      padding-left: 8px !important;
      padding-right: 8px !important;
    }

    #sidebar .sidebar-label {
      display: none;
    }

    #sidebar .sidebar-brand-text {
      display: none;
      white-space: nowrap;
    }

    #sidebar .sidebar-brand-row {
      justify-content: center;
      padding-left: 0;
      padding-right: 0;
      gap: 0;
    }

    #sidebar .sidebar-brand-icon {
      width: 2rem;
      height: 2rem;
    }

    #sidebar .nav-btn {
      justify-content: center;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }

    #sidebar .sidebar-brand-name {
      display: none;
    }

    #content-wrapper {
      margin-left: 60px !important;
    }

    #sidebar:hover {
      width: 224px !important;
      padding-left: 16px !important;
      padding-right: 16px !important;
    }

    #sidebar:hover .sidebar-label {
      display: inline;
    }

    #sidebar:hover .sidebar-brand-text {
      display: block;
    }

    #sidebar:hover .sidebar-brand-row {
      justify-content: flex-start;
      padding-left: 0.75rem;
      padding-right: 0.75rem;
      gap: 0.75rem;
    }

    #sidebar:hover .sidebar-brand-icon {
      width: 2rem;
      height: 2rem;
    }

    #sidebar:hover .nav-btn {
      justify-content: flex-start;
      padding-left: 0.75rem;
      padding-right: 0.75rem;
    }

    #sidebar:hover ~ #content-wrapper {
      margin-left: 224px !important;
    }

    /* ── Contextual sidebar edit form ─────────────────────── */
    .ctx-form {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding: 1.25rem;
    }
    .ctx-section-label {
      font-size: 0.65rem;
      font-weight: 700;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      white-space: nowrap;
    }
    .ctx-field {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }
    .ctx-field label {
      font-size: 0.65rem;
      font-weight: 700;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .dark .ctx-field label {
      color: #6b7280;
    }
    .ctx-field .inp {
      padding: 0.45rem 0.7rem;
      font-size: 0.8125rem;
    }
    .ctx-field select.inp {
      appearance: auto;
    }
    .ctx-divider {
      height: 1px;
      background: rgba(148, 163, 184, 0.15);
      margin: 0.25rem 0;
    }
    .dark .ctx-divider {
      background: rgba(148, 163, 184, 0.08);
    }
    .ctx-section-header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 0.75rem;
    }
    .ctx-section-header::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(148, 163, 184, 0.12);
    }
    .dark .ctx-section-header::after {
      background: rgba(148, 163, 184, 0.06);
    }
    .ctx-actions {
      display: flex;
      gap: 0.5rem;
      margin-top: 0.5rem;
      padding-top: 1rem;
      border-top: 1px solid rgba(148, 163, 184, 0.12);
    }
    .dark .ctx-actions {
      border-top-color: rgba(148, 163, 184, 0.06);
    }
    .ctx-actions .ctx-btn {
      flex: 1;
      padding: 0.6rem 0;
      font-size: 0.75rem;
      font-weight: 700;
      border-radius: 0.75rem;
      transition: all 0.15s ease;
      cursor: pointer;
      border: none;
    }
    .ctx-actions .ctx-btn-primary {
      background: #1e293b;
      color: #fff;
    }
    .ctx-actions .ctx-btn-primary:hover {
      background: #0f172a;
    }
    .dark .ctx-actions .ctx-btn-primary {
      background: #e2e8f0;
      color: #0f172a;
    }
    .dark .ctx-actions .ctx-btn-primary:hover {
      background: #cbd5e1;
    }
    .ctx-actions .ctx-btn-secondary {
      background: #f1f5f9;
      color: #64748b;
    }
    .ctx-actions .ctx-btn-secondary:hover {
      background: #e2e8f0;
    }
    .dark .ctx-actions .ctx-btn-secondary {
      background: #1e293b;
      color: #94a3b8;
    }
    .dark .ctx-actions .ctx-btn-secondary:hover {
      background: #334155;
    }