:root{
    --radius: 10px;
  }

  /* ============ THEMES ============ */
  body.theme-midnight{
    --bg:#12151c; --panel:#1a1f2a; --panel-2:#212838; --edge:#2c3444;
    --accent:#e8944a; --accent-soft:rgba(232,148,74,.16); --accent-2:#6fa3c4;
    --text:#eae7e1; --muted:#8b93a3; --danger:#d1665a;
  }
  body.theme-daylight{
    --bg:#f4f1ea; --panel:#ffffff; --panel-2:#f0ece3; --edge:#ddd6c8;
    --accent:#c2622f; --accent-soft:rgba(194,98,47,.12); --accent-2:#3f6f92;
    --text:#26221c; --muted:#7a7364; --danger:#b8493c;
  }
  body.theme-forest{
    --bg:#0f1712; --panel:#152018; --panel-2:#1b2a20; --edge:#28392e;
    --accent:#8bbf72; --accent-soft:rgba(139,191,114,.15); --accent-2:#6fa88f;
    --text:#e6ede4; --muted:#8ba090; --danger:#d1836a;
  }
  body.theme-sunset{
    --bg:#1c1420; --panel:#241a2b; --panel-2:#2c2035; --edge:#3b2c45;
    --accent:#e2798e; --accent-soft:rgba(226,121,142,.15); --accent-2:#c9a0e0;
    --text:#f1e6ef; --muted:#a893ab; --danger:#e0574f;
  }

  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    background:
      radial-gradient(1200px 500px at 10% -10%, var(--accent-soft), transparent 60%),
      var(--bg);
    color:var(--text);
    font-family:'Inter',system-ui,sans-serif;
    transition:background .3s ease, color .3s ease;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{ background:var(--accent); color:#1a1a1a; }
  button{ font-family:inherit; cursor:pointer; }
  input, textarea{ font-family:inherit; }
  a{ color:var(--accent-2); }

  /* ============ TOP BAR ============ */
  .topbar{
    position:sticky; top:0; z-index:20;
    display:flex; align-items:center; gap:18px;
    padding:14px 24px;
    background:color-mix(in srgb, var(--panel) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--edge);
    flex-wrap:wrap;
  }
  .brand{ display:flex; align-items:center; gap:12px; margin-right:auto; }
  .brand-mark{
    width:38px; height:38px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    background:var(--accent-soft); border:1px solid var(--edge);
    font-size:18px;
  }
  .brand-text h1{ margin:0; font-size:16px; font-weight:700; letter-spacing:.2px; }
  .brand-text p{ margin:1px 0 0; font-size:11.5px; color:var(--muted); font-family:'JetBrains Mono',monospace; letter-spacing:.3px; }

  .search-wrap{ flex:1 1 220px; max-width:320px; }
  .search-wrap input{
    width:100%; padding:9px 12px 9px 32px;
    border-radius:8px; border:1px solid var(--edge);
    background:var(--panel-2); color:var(--text);
    font-size:13px; outline:none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b93a3' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:10px center;
  }
  .search-wrap input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

  .controls{ display:flex; align-items:center; gap:10px; }

  /* Mode switch */
  .mode-switch{
    display:flex; align-items:center; gap:8px;
    border:1px solid var(--edge); background:var(--panel-2);
    border-radius:999px; padding:5px 10px 5px 5px;
    color:var(--text); font-size:12px; font-weight:600;
  }
  .mode-switch-track{
    width:34px; height:18px; border-radius:999px;
    background:var(--edge); position:relative; flex-shrink:0;
    transition:background .25s ease;
  }
  .mode-switch-thumb{
    position:absolute; top:2px; left:2px; width:14px; height:14px;
    border-radius:50%; background:var(--accent);
    transition:transform .25s ease;
  }
  html.mode-normal .mode-switch-track{ background:var(--accent-soft); }
  html.mode-normal .mode-switch-thumb{ transform:translateX(16px); }
  .mode-switch-labels{ display:flex; gap:6px; color:var(--muted); }
  .mode-switch-labels span{ transition:color .2s ease; }
  html:not(.mode-normal) .mode-switch-labels span:first-child,
  html.mode-normal .mode-switch-labels span:last-child{ color:var(--text); }

  /* Theme selector (gear) */
  .theme-wrap{ position:relative; }
  .theme-toggle{
    width:34px; height:34px; border-radius:8px;
    border:1px solid var(--edge); background:var(--panel-2);
    color:var(--text); font-size:16px;
    display:flex; align-items:center; justify-content:center;
    transition:transform .3s ease, border-color .2s ease;
  }
  .theme-toggle:hover{ border-color:var(--accent); transform:rotate(35deg); }
  .theme-menu{
    display:none; position:absolute; right:0; top:42px;
    background:var(--panel); border:1px solid var(--edge);
    border-radius:10px; padding:10px; gap:8px;
    box-shadow:0 12px 28px rgba(0,0,0,.35);
  }
  .theme-menu.show{ display:flex; }
  .theme-dot{
    width:24px; height:24px; border-radius:50%;
    border:2px solid var(--edge); background:var(--dot);
  }
  .theme-dot:hover{ border-color:var(--text); }

  .reset-btn{
    display:flex; align-items:center; gap:6px;
    padding:8px 12px; border-radius:8px;
    border:1px solid var(--edge); background:var(--panel-2);
    color:var(--danger); font-size:12.5px; font-weight:600;
  }
  .reset-btn:hover{ border-color:var(--danger); background:color-mix(in srgb, var(--danger) 12%, var(--panel-2)); }

  /* ============ LAYOUT ============ */
  .layout{
    max-width:1180px; margin:0 auto; padding:26px 24px 60px;
    display:flex; flex-direction:column; gap:26px;
  }

  .form-panel{
    background:var(--panel);
    border:1px solid var(--edge);
    border-radius:16px;
    padding:22px;
  }
  .form-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
  }
  .field{ display:flex; flex-direction:column; gap:6px; }
  .field.wide{ grid-column:1 / -1; }
  .field label{
    font-size:11.5px; font-weight:600; letter-spacing:.4px;
    text-transform:uppercase; color:var(--muted);
  }
  .field input, .field textarea{
    background:var(--panel-2); border:1px solid var(--edge);
    border-radius:8px; padding:10px 12px; color:var(--text);
    font-size:13.5px; outline:none; resize:none; min-height:42px;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .field textarea{ min-height:90px; line-height:1.5; font-family:'JetBrains Mono',monospace; font-size:13px; }
  .field input:focus, .field textarea:focus{
    border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
  }

  html.mode-normal .crm-only{ display:none; }
  html.mode-normal .form-grid{ grid-template-columns:1fr; }

  .form-actions{
    display:flex; justify-content:flex-end; gap:10px; margin-top:16px;
  }
  .btn{
    padding:10px 18px; border-radius:8px; font-size:13px; font-weight:600;
    border:1px solid var(--edge); background:var(--panel-2); color:var(--text);
    transition:transform .12s ease, border-color .2s ease, background .2s ease;
  }
  .btn:active{ transform:scale(.97); }
  .btn.ghost:hover{ border-color:var(--muted); }
  .btn.primary{ background:var(--accent); border-color:var(--accent); color:#1a1408; }
  .btn.primary:hover{ filter:brightness(1.07); }

  /* ============ NOTES SECTION ============ */
  .notes-section{ display:flex; flex-direction:column; gap:14px; }
  .notes-header{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  }
  .notes-header h2{ margin:0; font-size:15px; font-weight:700; }
  .notes-toolbar{ display:flex; gap:8px; }
  .notes-toolbar button, .import-label{
    padding:7px 12px; border-radius:8px; font-size:12px; font-weight:600;
    border:1px solid var(--edge); background:var(--panel-2); color:var(--text);
    display:inline-flex; align-items:center; gap:6px;
  }
  .notes-toolbar button:hover, .import-label:hover{ border-color:var(--accent-2); }

  .notes-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));
    gap:18px;
  }

  /* ---- Ticket-stub note card (signature element) ---- */
  .note{ position:relative; }
  .note-card{
    position:relative;
    background:var(--panel);
    border:1px solid var(--edge);
    border-radius:var(--radius);
    padding:16px 16px 14px;
    cursor:pointer;
    transition:border-color .2s ease, transform .15s ease;
    overflow:visible;
  }
  .note-card:hover{ border-color:var(--accent-2); transform:translateY(-2px); }

  /* perforation notches at the fold between meta and issue */
  .note-card::before, .note-card::after{
    content:"";
    position:absolute; top:56px;
    width:16px; height:16px; border-radius:50%;
    background:var(--bg); border:1px solid var(--edge);
  }
  .note-card::before{ left:-9px; }
  .note-card::after{ right:-9px; }

  .note-meta{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
  .note-time{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--muted); }
  .note-name{ font-size:13.5px; font-weight:700; }

  .note-issue{
    margin-top:14px; padding-top:12px;
    border-top:2px dashed var(--edge);
    font-size:12.5px; color:var(--text);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }

  .note-buttons{
    display:flex; flex-wrap:wrap; gap:6px; margin-top:14px;
  }
  .note-buttons button{
    border:1px solid var(--edge); background:var(--panel-2); color:var(--text);
    border-radius:6px; padding:5px 8px; font-size:11px; font-weight:600;
  }
  .note-buttons button:hover{ border-color:var(--accent); }
  .pin-btn, .fav-btn{ padding:5px 8px; }

  /* ============ MODAL ============ */
  .modal{
    display:none; position:fixed; inset:0; z-index:50;
    background:rgba(0,0,0,.55); align-items:center; justify-content:center; padding:20px;
  }
  .modal.show{ display:flex; }
  .modal-card{
    position:relative; max-width:560px; width:100%; max-height:80vh; overflow:auto;
    background:var(--panel); border:1px solid var(--edge); border-radius:14px; padding:26px;
  }
  .modal-card .close{
    position:absolute; top:12px; right:14px; background:none; border:none;
    color:var(--muted); font-size:22px; line-height:1;
  }
  .modal-card .close:hover{ color:var(--text); }
  #modalBody{
    white-space:pre-wrap; font-family:'JetBrains Mono',monospace; font-size:12.5px;
    line-height:1.6; margin:8px 0 0; color:var(--text);
  }

  /* ============ TOAST ============ */
  .toast{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--accent); color:#1a1408; font-weight:700; font-size:13px;
    padding:10px 18px; border-radius:999px; opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease; z-index:60;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* ============ EMPTY STATE ============ */
  .notes-grid:empty::after{
    content:"No notes yet — save your first one above.";
    grid-column:1/-1; text-align:center; padding:40px 0;
    color:var(--muted); font-size:13px; border:1px dashed var(--edge); border-radius:12px;
  }

  @media (max-width: 720px){
    .form-grid{ grid-template-columns:1fr; }
    .topbar{ padding:12px 16px; }
    .search-wrap{ order:3; max-width:none; flex-basis:100%; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; animation:none !important; }
  }