:root {
        --primary: #4361ee;
        --primary-light: rgba(67, 97, 238, 0.14);
        --secondary: #3a0ca3;
        --success: #06d6a0;
        --success-light: rgba(6, 214, 160, 0.18);
        --warning: #ef476f;
        --warning-light: rgba(239, 71, 111, 0.14);
        --bg: #f5f7fb;
        --card: #fff;
        --text: #111827;
        --muted: #6b7280;
        --border: #e5e7eb;
        --shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
        --rad: 12px;
        --gap: 12px;
        --pad: 12px;
        --trans: all 0.2s ease;
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --bg: #0b1220;
          --card: #111827;
          --text: #e5e7eb;
          --muted: #94a3b8;
          --border: #243043;
        }
        body {
          color: var(--text);
        }
      }
      * { box-sizing: border-box; margin: 0; padding: 0; }
      body {
        font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
        background: var(--bg);
        color: #1f2937;
      }
      .container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

      /* ====== AUTH (Login) ====== */
      .auth {
        min-height: 100dvh;
        display: grid;
        place-items: center;
        padding: 24px;
        background:
          radial-gradient(1200px 600px at -10% -10%, rgba(67, 97, 238, 0.06), transparent 60%),
          radial-gradient(1200px 600px at 110% 110%, rgba(67, 97, 238, 0.06), transparent 60%),
          var(--bg);
      }
      .auth-card {
        width: min(480px, 100%);
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
        padding: 20px;
      }
      .auth-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
      .badge {
        background: var(--primary-light);
        color: var(--primary);
        border: 1px solid #c7d2fe;
        font-weight: 700;
        font-size: 0.75rem;
        padding: 2px 8px;
        border-radius: 999px;
      }
      .auth .input, .auth .select { width: 100%; margin-top: 6px; }
      .auth label { display:block; font-weight:600; font-size:.9rem; margin-top:10px; }
      .auth .actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }
      .legal { font-size:.8rem; color:var(--muted); margin-top:8px; }

      header { position: sticky; top: 0; background: var(--card); box-shadow: 0 4px 16px rgba(0,0,0,.08); z-index: 5; }
      .header-inner { display:flex; align-items:center; justify-content:space-between; padding:8px 0; }
      .logo { font-weight:800; color:var(--primary); }
      .toolbar { display:flex; gap:8px; flex-wrap:wrap; }
      .btn {
        display:inline-flex; align-items:center; gap:8px;
        background: var(--primary); color:#fff; border:0; border-radius:10px;
        padding:10px 12px; cursor:pointer; font-weight:700; font-size:.9rem;
        transition: var(--trans); text-decoration:none;
      }
      .btn.secondary { background:#fff; color:var(--primary); border:1px solid var(--primary); }
      .btn.ghost { background:transparent; color:var(--primary); border:1px dashed var(--primary); }
      .btn:hover { filter:brightness(.97); transform: translateY(-1px); }
      .btn:active { transform: translateY(0); }
      .tabs { display:flex; gap:6px; }
      .tab { padding:8px 10px; border-radius:999px; border:1px solid var(--border); background:#fff; cursor:pointer; font-weight:600; font-size:.85rem; }
      .tab.active { background: var(--primary-light); color:#1e2a78; border-color:transparent; }
      .grid { display:grid; gap:var(--gap); }
      .grid.cols-2 { grid-template-columns: 1.2fr 0.8fr; }
      @media (max-width: 960px) { .grid.cols-2 { grid-template-columns:1fr; } }
      .card { background:var(--card); border-radius:var(--rad); box-shadow:var(--shadow); overflow:hidden; }
      .card-h { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border); }
      .card-b { padding:12px; }
      .stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin:12px 0; }
      .stat { background:var(--card); padding:12px; border-radius:var(--rad); box-shadow:var(--shadow); }
      .stat h4 { font-size:.8rem; color:var(--muted); }
      .stat .v { font-size:1.35rem; font-weight:800; }
      .projects { display:grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
      .p-card { background:var(--card); border-radius:var(--rad); box-shadow:0 6px 14px rgba(0,0,0,.05); overflow:hidden; }
      .p-h { padding:12px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; gap:8px; }
      .p-title { font-weight:800; }
      .p-client { font-size:.8rem; color:var(--muted); }
      .p-b { padding:10px; }
      .row { display:flex; justify-content:space-between; font-size:.8rem; margin-bottom:4px; }
      .status { padding:2px 8px; border-radius:999px; font-size:.7rem; font-weight:800; width:max-content; }
      .s-pending { background: var(--warning-light); color: var(--warning); }
      .s-in { background: var(--primary-light); color: var(--primary); }
      .s-done { background: var(--success-light); color: var(--success); }
      .prog { height:6px; background:#e9ecef; border-radius:999px; overflow:hidden; margin:6px 0; }
      .fill { height:100%; background:var(--primary); transition: width .3s ease; }
      .pill { padding:2px 6px; border-radius:999px; font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.2px; }
      .low { background:#edf2ff; color:#364fc7; }
      .medium { background:#fff3bf; color:#a16207; }
      .high { background:#ffe3e3; color:#b91c1c; }
      .task { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid #f2f3f5; }
      .task:last-child { border-bottom:0; }
      .t-text { flex:1; font-size:.85rem; }
      .t-dates { font-size:.7rem; color:var(--muted); }
      .overdue { border:1px solid #fecaca; background:#fef2f2; }
      .muted { color:var(--muted); font-size:.8rem; }
      .search { display:flex; gap:8px; }
      .input, .select { padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:#fff; min-width:200px; }
      .fab { position:fixed; right:16px; bottom:16px; }
      .empty { padding:12px; border:1px dashed var(--border); border-radius:10px; text-align:center; color:var(--muted); }

      /* Kanban */
      .kanban { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:start; }
      .col { background:var(--card); border-radius:var(--rad); box-shadow:var(--shadow); padding:10px; min-height:200px; }
      .col-h { font-weight:800; margin-bottom:8px; }
      .k-item { background:#fafbff; border:1px solid #eef0fb; border-radius:10px; padding:10px; margin-bottom:8px; cursor:grab; }

      /* Calendar */
      .calendar { --cell:42; display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
      .cal-head { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px; }
      .cal-cell { background:var(--card); border:1px solid var(--border); border-radius:10px; min-height:90px; padding:6px; display:flex; flex-direction:column; gap:6px; }
      .cal-date { font-size:.75rem; color:var(--muted); }
      .cal-pill { font-size:.7rem; border-radius:6px; border:1px solid var(--border); padding:2px 4px; }

      /* Modal */
      .modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:50; justify-content:center; align-items:center; padding:12px; backdrop-filter: blur(4px); }
      .modal-c { background:var(--card); border-radius:12px; max-width:640px; width:100%; max-height:90vh; overflow:auto; box-shadow:0 16px 40px rgba(0,0,0,.18); padding:14px; }
      .modal-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
      .close { background:none; border:0; font-size:1.5rem; cursor:pointer; color:#94a3b8; }

      /* === Projects: full-width vertical list (no cut-off) === */
      .projects { display:flex; flex-direction:column; gap:16px; width:100%; }
      .p-card { width:100%; }
      .p-h { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
      .p-b { display:block !important; padding:12px !important; }
      .t-list { width:100%; }
      .p-title,.p-client { word-break:break-word; }
      .p-h>div:last-child { display:flex; gap:6px; flex-wrap:wrap; }
      @media (max-width:600px){ .input,.select{min-width:0;} }

      /* === LOCKED HEADER LAYOUT === */
      .projects .p-card .p-h { display:grid !important; grid-template-columns:1fr auto !important; column-gap:16px !important; align-items:start !important; width:100% !important; }
      .projects .p-card .p-left { min-width:0 !important; display:flex !important; flex-direction:column !important; gap:4px !important; }
      .projects .p-card .p-right { justify-self:end !important; display:flex !important; flex-direction:column !important; align-items:flex-end !important; gap:6px !important; min-width:max-content !important; text-align:right !important; }
      .projects .p-card .p-actions { display:flex !important; gap:8px !important; flex-wrap:nowrap !important; }
      .projects .p-card .p-meta-inline { display:flex !important; flex-direction:column !important; align-items:flex-end !important; gap:2px !important; font-size:.85rem !important; color:var(--muted) !important; }
      .projects .p-card .p-meta-inline>div { white-space:nowrap !important; }
      @media (max-width:720px){
        .projects .p-card .p-h{ grid-template-columns:1fr !important; }
        .projects .p-card .p-right{ justify-self:start !important; align-items:flex-start !important; text-align:left !important; min-width:0 !important; }
      }

      /* === Flat / Minimal overrides === */
      :root { --rad: 6px; --shadow: 0 2px 8px rgba(0,0,0,.04); }
      header { box-shadow: 0 1px 0 var(--border); }
      .container { padding:0 14px; }
      .card,.stat,.p-card,.col,.cal-cell,.modal-c { border:1px solid var(--border); box-shadow:none; border-radius:var(--rad); background:var(--card); }
      .card-h{ padding:8px 10px; } .card-b{ padding:10px; }
      .btn{ border-radius:6px; padding:8px 10px; box-shadow:none; transform:none; transition: background .15s ease, opacity .15s ease; }
      .btn:hover{ opacity:.95; } .btn:active{ opacity:1; }
      .btn.secondary{ background:var(--card); color:var(--text); border:1px solid var(--border); }
      .btn.ghost{ background:transparent; border:none; padding:6px 8px; color:var(--primary); }
      .tab{ border-radius:6px; background:var(--card); border:1px solid var(--border); }
      .tab.active{ background:#eef2ff; color:var(--primary); border-color:#c7d2fe; }
      .task{ border-bottom:1px dashed var(--border); }
      .empty{ border-radius:6px; }
      .status,.pill{ border-radius:6px; }
      .low{ background:#f4f7ff; color:#364fc7; }
      .medium{ background:#fff6cc; color:#a16207; }
      .high{ background:#ffe8e8; color:#b91c1c; }
      .prog{ height:4px; background:#eef2f7; border-radius:4px; }
      .fill{ border-radius:inherit; }
      .input,.select{ border-radius:6px; border:1px solid var(--border); box-shadow:none; padding:8px 10px; }
      .p-card{ border:1px solid var(--border); box-shadow:none; }
      .p-h{ padding:10px 12px; } .p-b{ padding:10px !important; }
      .k-item{ background:var(--card); border:1px solid var(--border); border-radius:6px; box-shadow:none; }
      .cal-cell{ border-radius:6px; }
      .cal-pill{ border-radius:4px; border:1px solid var(--border); background:var(--card); }
      .modal-c{ border-radius:8px; box-shadow:0 12px 24px rgba(0,0,0,.1); }
      @media (prefers-color-scheme: dark){
        header{ box-shadow:0 1px 0 var(--border); }
        .low{ background:#121a2e; color:#9bb4ff; }
        .medium{ background:#2a2412; color:#ffd36a; }
        .high{ background:#2b1313; color:#ff9ea0; }
        .prog{ background:#1b2232; }
      }

      /* === Spacing system === */
      :root {
        --space-0: 0;
        --space-1: 4px;
        --space-2: 8px;
        --space-3: 12px;
        --space-4: 16px;
        --space-5: 20px;
        --space-6: 24px;
        --gap: var(--space-3);
        --pad: var(--space-3);
      }
      .container{ padding:0 var(--space-4); }
      main.container{ padding: var(--space-4) 0 var(--space-6); }
      .grid{ gap:var(--gap); }
      .grid.cols-2{ gap:var(--space-4); }
      header{ padding:var(--space-1) 0; }
      .header-inner{ padding:var(--space-2) 0; }
      .logo{ margin-right:var(--space-4); }
      .toolbar{ gap:var(--space-2); }
      .tabs{ gap:var(--space-1); }
      .card,.stat,.p-card,.col,.cal-cell{ border-width:1px; }
      .card-h{ padding:var(--space-3) var(--space-4); }
      .card-b{ padding:var(--space-4); }
      .stats{ gap:var(--space-3); margin:var(--space-3) 0 var(--space-4); }
      .stat{ padding:var(--space-4); }
      .stat h4{ margin-bottom:var(--space-1); }
      .stat .v{ margin-top:var(--space-1); }
      .btn{ padding:8px 12px; }
      .search{ gap:var(--space-2); }
      .input,.select{ padding:8px 10px; }
      .tab{ padding:6px 10px; }
      .projects{ gap:var(--space-4); }
      .p-h{ padding:var(--space-3) var(--space-4); row-gap:var(--space-2); }
      .p-left{ gap:var(--space-1); }
      .p-right{ gap:var(--space-2); }
      .p-actions{ gap:var(--space-2); }
      .p-b{ padding:var(--space-4) !important; }
      .client-badge{ margin-top:var(--space-1); }
      .prog{ margin:var(--space-2) 0 var(--space-1); }
      .t-list{ margin-top:var(--space-3); }
      .task{ padding:var(--space-2) 0; gap:var(--space-2); }
      .task + .task{ margin-top:var(--space-1); }
      .t-text{ margin-right:var(--space-2); }
      .t-dates{ margin-left:auto; }
      .overdue{ padding:var(--space-2); }
      .pill{ padding:2px 6px; }
      .status{ padding:2px 8px; }
      .empty{ padding:var(--space-4); margin-top:var(--space-2); }
      #view-list .card-b > div:first-child{ margin-bottom:var(--space-3)!important; }
      .kanban{ gap:var(--space-4); }
      .col{ padding:var(--space-3); }
      .col-h{ margin-bottom:var(--space-2); }
      .k-item{ padding:var(--space-3); margin-bottom:var(--space-2); }
      .cal-head{ gap:var(--space-2); margin-bottom:var(--space-2); }
      .calendar{ gap:var(--space-2); }
      .cal-cell{ min-height:96px; padding:var(--space-3); gap:var(--space-2); }
      .cal-date{ margin-bottom:var(--space-1); }
      .cal-pill{ padding:2px 6px; }
      .cal-pill + .cal-pill{ margin-top:var(--space-1); }
      .modal{ padding:var(--space-4); }
      .modal-c{ padding:var(--space-4); }
      .modal-h{ margin-bottom:var(--space-3); }
      #pTasks{ margin-top:var(--space-2); }
      .m-del{ margin-left:var(--space-2); }
      #pForm .grid{ gap:var(--space-3)!important; }
      #pForm [style*="margin:8px 0"]{ margin:var(--space-3) 0 !important; }
      #pForm [style*="margin-top:8px"]{ margin-top:var(--space-3) !important; }
      .ia-text{ min-width:200px; }
      .ia-add{ margin-left:var(--space-2); }
      #qForm .grid{ gap:var(--space-3); }
      #qForm [style*="margin-top:8px"]{ margin-top:var(--space-3)!important; }
      #view-calendar .card-h .toolbar{ gap:var(--space-2); }
      @media (max-width:960px){
        main.container{ padding-top:var(--space-3); }
        .card-b{ padding:var(--space-3); }
        .projects{ gap:var(--space-3); }
        .p-actions{ gap:var(--space-1); }
      }
      @media (max-width:600px){
        .container{ padding:0 var(--space-3); }
        .task{ gap:var(--space-1); }
        .t-dates{ margin-left:0; }
      }

      /* Completed / Reverted */
      .task.done{
        background: var(--success-light);
        border: 1px solid transparent;
        border-radius: 6px;
        padding: 8px 10px;
        display: flex; align-items: center; gap: 8px;
      }
      .task.reverted{
        background: var(--warning-light);
        border: 1px solid var(--warning);
        color: var(--warning);
        border-radius: 6px;
        padding: 8px 10px;
        display:flex; align-items:center; gap:8px;
      }
      .task.done .check{ width:18px; height:18px; border-radius:4px; background:var(--success); display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:12px; flex-shrink:0; }
      .task.done .t-text{ color:var(--text); font-weight:600; }

      /* ===== Elegant Top Bar ===== */
      header{
        position: sticky; top:0; z-index:20;
        background: color-mix(in oklab, var(--card) 92%, transparent);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 1px 0 var(--border);
        border-bottom: 0;
      }
      .header-inner{ height:56px; padding:0; gap:12px; }
      .logo{ font-weight:800; letter-spacing:.2px; font-size:1.05rem; color:var(--text); }
      .logo::before{ content:""; display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--primary); margin-right:8px; transform:rotate(10deg); }
      .toolbar{ flex:1; display:flex; align-items:center; gap:12px; flex-wrap:nowrap; }
      .toolbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }

      .user-actions{ display:flex; align-items:center; gap:8px; margin-left:auto; }
      .userchip{
        display:inline-flex; align-items:center; gap:8px;
        padding:6px 10px; border:1px solid var(--border); border-radius:999px;
        background:var(--card); font-weight:600;
      }
      .tabs{ display:inline-flex; gap:0; padding:2px; border:1px solid var(--border); border-radius:10px; background:var(--card); }
      .tab{ border:0; border-radius:8px; padding:8px 12px; font-weight:600; font-size:.85rem; background:transparent; }
      .tab.active{ background:var(--primary-light); color:var(--primary); }
      .search{ gap:8px; margin-left:auto; }
      .search .input{
        min-width:260px; border-radius:999px; padding-left:36px;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%2394a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-3.5-3.5"/></svg>') no-repeat 12px center / 14px;
      }
      header .btn{
        padding:8px 10px; border-radius:8px; background:var(--card); color:var(--text);
        border:1px solid var(--border); box-shadow:none; transform:none;
      }
      header .btn:hover{ background: color-mix(in oklab, var(--card) 92%, var(--primary-light) 8%); }
      header .btn.secondary{ background:var(--card); }
      header .btn + label.btn.secondary{ cursor:pointer; }
      .fab{ border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.12); }
      @media (max-width:960px){
        .header-inner{ height:64px; }
        .search .input{ min-width:170px; }
        .tabs{ display:none; }
      }
      @media (prefers-color-scheme: dark){
        header{ box-shadow:0 1px 0 var(--border); }
        .tabs{ background: color-mix(in oklab, var(--card) 88%, transparent); }
        .search .input{
          background-color: var(--card);
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%238ea3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-3.5-3.5"/></svg>');
        }
      }

      /* User chip role tag */
      .userchip .role{ font-size:.75rem; padding:2px 6px; border-radius:999px; border:1px solid var(--border); color:var(--muted); }

      .project-header{ display:flex; align-items:center; justify-content:space-between; }
      .project-actions{ display:flex; align-items:center; gap:8px; margin-left:auto; }
      .project-actions .btn,.project-actions label.btn{ margin-left:4px; }
      #logoutBtn{ margin-left:auto; }
      #dSum{ margin-left:auto; align-self:center; white-space:nowrap; }
      @media (max-width:600px){ #dSum{ margin-left:0; flex-basis:100%; text-align:right; } }

      .p-team{ color:var(--muted); font-style:italic; }
      .team-picker{ position:relative; }
      .team-picker .tp-toggle{ width:100%; text-align:left; cursor:pointer; }
      .team-picker .tp-panel{
        position:absolute; z-index:100; left:0; right:0; top: calc(100% + 4px);
        background:var(--card); border:1px solid var(--border); border-radius:6px;
        max-height:220px; overflow:auto; padding:6px; box-shadow:0 6px 20px rgba(0,0,0,.12);
      }
      .tp-item{ display:flex; align-items:center; gap:8px; padding:6px; border-radius:6px; }
      .tp-item:hover{ background:var(--primary-light); }
      .tp-search{ width:100%; margin:4px 0 6px; }

      /* ===== Auth 2.0 look (enhanced) ===== */
      .auth-hero { text-align:center; margin-bottom:16px; }
      .auth-hero .brand { display:inline-flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.2px; }
      .logo-dot { width:10px; height:10px; border-radius:3px; background:var(--primary); display:inline-block; transform:rotate(10deg); }
      .auth-hero h1 { font-size:1.4rem; margin-top:6px; }

      /* Glassy card */
      .auth-card {
        border-radius:14px;
        border:1px solid color-mix(in oklab, var(--border) 80%, transparent);
        background: color-mix(in oklab, var(--card) 85%, transparent);
        backdrop-filter: blur(6px);
        box-shadow: 0 24px 60px rgba(17,24,39,.08);
        animation: slideUp .3s ease both;
      }
      @keyframes slideUp { from { transform: translateY(6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

      /* Form inputs with icons */
      .fi { display:block; margin-top: 10px; position: relative; }
      .fi > span:first-child { display:block; font-weight: 600; font-size:.9rem; margin-bottom:6px; }
      .input.with-icon { padding-left: 36px; }
      .fi-ico {
        position:absolute; left:10px; bottom:10px;
        width:18px; height:18px; color: var(--muted); display:grid; place-items:center;
        border:0; background:transparent; padding:0; cursor: default;
      }
      .btn-eye { right:10px; left:auto; cursor:pointer; color:var(--muted); }
      .btn-eye:hover { color: var(--text); }

      .auth-row { display:flex; align-items:center; justify-content:space-between; margin-top: 10px; }
      .chk { display:inline-flex; align-items:center; gap:8px; font-size:.9rem; }
      .ghost-link { font-size:.9rem; color:var(--primary); text-decoration: none; opacity:.9; }
      .ghost-link:hover { opacity: 1; text-decoration: underline; }

      .btn.full { width: 100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top: 12px; }
      .btn-spinner {
        width: 14px; height: 14px; border-radius: 50%;
        border: 2px solid transparent; border-top-color: currentColor; display:none;
        animation: spin .8s linear infinite;
      }
      .loading .btn-spinner { display:inline-block; }
      .loading span:last-child { opacity:.8; }
      @keyframes spin { to { transform: rotate(360deg); } }

      /* Shake on invalid */
      .shake { animation: shake .35s ease; }
      @keyframes shake {
        10%,90%{ transform: translateX(-1px); }
        20%,80%{ transform: translateX(2px); }
        30%,50%,70%{ transform: translateX(-4px); }
        40%,60%{ transform: translateX(4px); }
      }

      @media (prefers-color-scheme: dark) {
        .auth-card { background: color-mix(in oklab, var(--card) 90%, transparent); }
        .ghost-link { color: color-mix(in oklab, var(--primary) 85%, #aab4c0); }
      }