:root {
      --navy:          #0a1628;
      --navy-mid:      #122040;
      --navy-card:     #0f1e3a;
      --navy-deep:     #071020;
      --accent:        #2a5caa;
      --accent-bright: #4a8cff;
      --white:         #ffffff;
      --offwhite:      #e8edf8;
      --gray:          #8a9bbf;
      --border:        rgba(74,140,255,0.15);
      --green:         #4affb4;
      --red:           #ff5c72;
      --gold:          #ffd95c;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--navy);
      color: var(--white);
      min-height: 100vh;
    }

    /* ── NAV ── */
    nav {
      position: fixed; top:0; left:0; right:0; z-index:100;
      display:flex; align-items:center; justify-content:space-between;
      padding:0 5%; height:68px;
      background:rgba(10,22,40,0.92);
      backdrop-filter:blur(14px);
      border-bottom:1px solid var(--border);
    }
    .logo { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:700; color:var(--white); text-decoration:none; }
    .logo span { color:var(--accent-bright); }
    .nav-links { display:flex; gap:10px; list-style:none; }
    .nav-links a { text-decoration:none; font-size:0.82rem; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; padding:8px 20px; border-radius:40px; transition:all 0.3s; }
    .nav-links a.home-btn { color:var(--white); border:1px solid rgba(255,255,255,0.22); }
    .nav-links a.home-btn:hover { border-color:var(--accent-bright); color:var(--accent-bright); }
    .nav-links a.login-btn { background:var(--accent); color:var(--white); border:1px solid var(--accent); }
    .nav-links a.login-btn:hover { background:var(--accent-bright); box-shadow:0 0 16px rgba(74,140,255,0.5); }

    /* ── MAIN ── */
    .main { max-width:1400px; margin:0 auto; padding:90px 3.5% 60px; }

    /* ── PAGE HEADER ── */
    .page-header {
      display:flex; align-items:flex-end; justify-content:space-between;
      margin-bottom:32px; padding-bottom:20px;
      border-bottom:1px solid var(--border);
      flex-wrap:wrap; gap:14px;
    }
    .page-header h1 { font-family:'Cormorant Garamond',serif; font-size:2.2rem; font-weight:700; }
    .page-header h1 span { color:var(--accent-bright); }
    .page-header p { color:var(--gray); font-size:0.88rem; margin-top:4px; }

    /* ── LAYOUT ── */
    .layout { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
    @media(max-width:1000px){ .layout { grid-template-columns:1fr; } }

    /* ── CARD ── */
    .card {
      background:var(--navy-card);
      border:1px solid var(--border);
      border-radius:14px; overflow:hidden;
    }
    .card-header {
      display:flex; align-items:center; justify-content:space-between;
      padding:18px 24px 14px;
      border-bottom:1px solid var(--border);
    }
    .card-header h2 { font-family:'Cormorant Garamond',serif; font-size:1.25rem; font-weight:700; }
    .card-header h2 span { color:var(--accent-bright); }
    .card-tag { font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gray); background:rgba(74,140,255,0.08); border:1px solid var(--border); padding:4px 10px; border-radius:20px; }
    .card-body { padding:24px; }

    /* ── PRICE PER KG BAR ── */
    .price-bar {
      display:flex; align-items:center; gap:14px;
      background:rgba(74,140,255,0.07);
      border:1px solid rgba(74,140,255,0.22);
      border-radius:10px; padding:14px 18px; margin-bottom:24px;
      flex-wrap:wrap;
    }
    .price-bar-label { font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gray); white-space:nowrap; }
    .price-input-wrap { display:flex; align-items:center; gap:0; flex:1; min-width:140px; }
    .price-input-wrap .currency {
      background:rgba(74,140,255,0.15); border:1px solid var(--border);
      border-right:none; border-radius:8px 0 0 8px;
      padding:10px 14px; color:var(--accent-bright); font-weight:600; font-size:1rem;
    }
    .price-input-wrap input {
      flex:1; background:rgba(10,22,40,0.6); border:1px solid var(--border); border-radius:0 8px 8px 0;
      padding:10px 14px; color:var(--white); font-family:'DM Sans',sans-serif; font-size:1rem; font-weight:500;
      outline:none; transition:border-color 0.3s; min-width:80px;
    }
    .price-input-wrap input:focus { border-color:var(--accent-bright); }
    .price-preview { font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:700; color:var(--gold); white-space:nowrap; }

    /* ── FORM ── */
    .form-section-title {
      font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase;
      color:var(--accent-bright); margin-bottom:14px; margin-top:20px;
    }
    .form-section-title:first-of-type { margin-top:0; }

    .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .form-grid.cols-3 { grid-template-columns:1fr 1fr 1fr; }
    .form-grid.cols-1 { grid-template-columns:1fr; }
    @media(max-width:600px){ .form-grid,.form-grid.cols-3 { grid-template-columns:1fr; } }

    .form-group { display:flex; flex-direction:column; gap:6px; }
    .form-group.span-2 { grid-column:span 2; }
    @media(max-width:600px){ .form-group.span-2 { grid-column:span 1; } }

    .form-group label { font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gray); }
    .form-group input, .form-group select, .form-group textarea {
      background:rgba(10,22,40,0.6); border:1px solid var(--border); border-radius:8px;
      padding:10px 14px; color:var(--white);
      font-family:'DM Sans',sans-serif; font-size:0.9rem; outline:none;
      transition:border-color 0.3s, box-shadow 0.3s; color-scheme:dark;
      appearance:none; resize:none;
    }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
      border-color:var(--accent-bright); box-shadow:0 0 0 3px rgba(74,140,255,0.1);
    }
    .form-group input::placeholder, .form-group textarea::placeholder { color:rgba(138,155,191,0.45); }
    .form-group select {
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%238a9bbf' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
      background-repeat:no-repeat; background-position:right 12px center;
      padding-right:32px;
    }

    /* Items table inside form */
    .items-table-wrap { border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:4px; }
    .items-table { width:100%; border-collapse:collapse; }
    .items-table th {
      background:rgba(74,140,255,0.06);
      font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
      color:var(--gray); font-weight:500; padding:10px 12px; text-align:left;
      border-bottom:1px solid var(--border);
    }
    .items-table td { padding:8px 10px; border-bottom:1px solid rgba(74,140,255,0.06); vertical-align:middle; }
    .items-table tr:last-child td { border-bottom:none; }
    .items-table input, .items-table select {
      background:transparent; border:1px solid transparent; border-radius:6px;
      padding:6px 10px; color:var(--white); font-family:'DM Sans',sans-serif; font-size:0.85rem;
      outline:none; transition:border-color 0.3s; width:100%; color-scheme:dark;
    }
    .items-table input:focus, .items-table select:focus { border-color:var(--accent-bright); background:rgba(74,140,255,0.06); }
    .items-table .calc-total { color:var(--gold); font-weight:600; font-size:0.88rem; padding-left:12px; }
    .items-table .del-row { width:30px; height:30px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--gray); cursor:pointer; font-size:0.9rem; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
    .items-table .del-row:hover { border-color:var(--red); color:var(--red); background:rgba(255,92,114,0.1); }

    .btn-add-row { display:flex; align-items:center; gap:6px; background:transparent; border:1px dashed rgba(74,140,255,0.3); border-radius:8px; padding:9px 16px; color:var(--accent-bright); font-family:'DM Sans',sans-serif; font-size:0.82rem; cursor:pointer; width:100%; justify-content:center; margin-top:8px; transition:all 0.3s; }
    .btn-add-row:hover { border-color:var(--accent-bright); background:rgba(74,140,255,0.07); }

    /* Divider */
    .divider { border:none; border-top:1px solid var(--border); margin:22px 0; }

    /* Action buttons */
    .form-actions { display:flex; gap:10px; margin-top:24px; flex-wrap:wrap; }
    .btn-primary { flex:1; min-width:120px; padding:12px 20px; background:var(--accent); border:none; border-radius:8px; color:var(--white); font-family:'DM Sans',sans-serif; font-size:0.88rem; font-weight:500; cursor:pointer; transition:all 0.3s; letter-spacing:0.04em; }
    .btn-primary:hover { background:var(--accent-bright); box-shadow:0 0 20px rgba(74,140,255,0.4); }
    .btn-secondary { padding:12px 20px; background:transparent; border:1px solid var(--border); border-radius:8px; color:var(--gray); font-family:'DM Sans',sans-serif; font-size:0.88rem; cursor:pointer; transition:all 0.3s; }
    .btn-secondary:hover { border-color:var(--white); color:var(--white); }
    .btn-danger { padding:12px 20px; background:rgba(255,92,114,0.1); border:1px solid rgba(255,92,114,0.3); border-radius:8px; color:var(--red); font-family:'DM Sans',sans-serif; font-size:0.88rem; cursor:pointer; transition:all 0.3s; }
    .btn-danger:hover { background:rgba(255,92,114,0.2); }

    /* ── BILL PREVIEW ── */
    .bill-preview-wrap {
      position:sticky; top:90px;
    }

    .bill-sheet {
      background:#ffffff; color:#1a2d55;
      border-radius:10px; overflow:hidden;
      font-family:'DM Sans',sans-serif;
      box-shadow:0 20px 60px rgba(0,0,0,0.4);
    }

    .bill-top {
      background:linear-gradient(135deg,#0a1628 0%,#1c3060 100%);
      padding:28px 32px 24px;
      color:#fff;
    }
    .bill-logo { font-family:'Cormorant Garamond',serif; font-size:1.7rem; font-weight:700; }
    .bill-logo span { color:#4a8cff; }
    .bill-tagline { font-size:0.75rem; color:rgba(255,255,255,0.55); letter-spacing:0.1em; margin-top:2px; }
    .bill-title-row { display:flex; justify-content:space-between; align-items:flex-end; margin-top:16px; flex-wrap:wrap; gap:8px; }
    .bill-title { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:700; letter-spacing:0.04em; }
    .bill-meta { text-align:right; font-size:0.78rem; color:rgba(255,255,255,0.65); line-height:1.7; }
    .bill-meta strong { color:#fff; }

    .bill-body { padding:24px 32px; }

    .bill-parties { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:22px; }
    .bill-party-label { font-size:0.65rem; letter-spacing:0.14em; text-transform:uppercase; color:#8a9bbf; margin-bottom:6px; }
    .bill-party-name { font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-weight:700; color:#0a1628; }
    .bill-party-info { font-size:0.8rem; color:#5a6a85; line-height:1.6; margin-top:4px; }

    .bill-items-table { width:100%; border-collapse:collapse; margin-bottom:18px; }
    .bill-items-table thead tr { background:#f0f4ff; }
    .bill-items-table th { font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:#5a6a85; font-weight:600; padding:9px 12px; text-align:left; border-bottom:2px solid #d0dcf5; }
    .bill-items-table th:last-child { text-align:right; }
    .bill-items-table td { padding:9px 12px; font-size:0.86rem; color:#2a3a5c; border-bottom:1px solid #e8edf8; vertical-align:middle; }
    .bill-items-table td:last-child { text-align:right; font-weight:600; color:#0a1628; }
    .bill-items-table tr:last-child td { border-bottom:none; }
    .bill-items-table .item-name { font-weight:500; color:#1a2d55; }
    .bill-items-table .item-sub { font-size:0.75rem; color:#8a9bbf; }

    .bill-totals { margin-left:auto; max-width:260px; }
    .bill-totals-row { display:flex; justify-content:space-between; gap:20px; padding:6px 0; font-size:0.86rem; color:#4a5a7a; border-bottom:1px solid #e8edf8; }
    .bill-totals-row:last-child { border-bottom:none; }
    .bill-total-final { display:flex; justify-content:space-between; align-items:center; gap:20px; background:#0a1628; color:#fff; padding:12px 16px; border-radius:8px; margin-top:8px; }
    .bill-total-label { font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; opacity:0.7; }
    .bill-total-amount { font-family:'Cormorant Garamond',serif; font-size:1.5rem; font-weight:700; color:#4a8cff; }

    .bill-footer { background:#f7f9ff; padding:16px 32px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; border-top:1px solid #e0e8f8; }
    .bill-footer-note { font-size:0.75rem; color:#8a9bbf; }
    .bill-footer-status { font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; padding:5px 14px; border-radius:20px; background:#e8fff5; color:#0d9a5e; border:1px solid #b0f0d5; font-weight:600; }

    /* Bill actions */
    .bill-actions { display:flex; gap:10px; margin-top:14px; }
    .btn-print { flex:1; padding:11px; background:rgba(74,140,255,0.12); border:1px solid var(--border); border-radius:8px; color:var(--offwhite); font-family:'DM Sans',sans-serif; font-size:0.85rem; cursor:pointer; transition:all 0.3s; display:flex; align-items:center; justify-content:center; gap:6px; }
    .btn-print:hover { border-color:var(--accent-bright); background:rgba(74,140,255,0.2); }
    .btn-save-bill { flex:1; padding:11px; background:var(--accent); border:none; border-radius:8px; color:#fff; font-family:'DM Sans',sans-serif; font-size:0.85rem; font-weight:500; cursor:pointer; transition:all 0.3s; display:flex; align-items:center; justify-content:center; gap:6px; }
    .btn-save-bill:hover { background:var(--accent-bright); box-shadow:0 0 16px rgba(74,140,255,0.4); }

    /* ── SAVED BILLS ── */
    .saved-section { margin-top:32px; }
    .saved-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
    .saved-header h2 { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:700; }
    .saved-header h2 span { color:var(--accent-bright); }
    .bills-count { font-size:0.78rem; color:var(--accent-bright); background:rgba(74,140,255,0.1); border:1px solid rgba(74,140,255,0.2); padding:4px 12px; border-radius:20px; }

    .bills-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }

    .bill-card {
      background:var(--navy-card); border:1px solid var(--border); border-radius:10px; overflow:hidden;
      transition:transform 0.3s,box-shadow 0.3s,border-color 0.3s;
      cursor:pointer; animation:fadeUp 0.5s ease both;
    }
    .bill-card:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(74,140,255,0.15); border-color:rgba(74,140,255,0.4); }

    @keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

    .bill-card-top { background:linear-gradient(135deg,rgba(28,48,96,0.8),rgba(18,32,64,0.8)); padding:14px 16px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:flex-start; }
    .bc-number { font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent-bright); }
    .bc-client { font-family:'Cormorant Garamond',serif; font-size:1.05rem; font-weight:700; margin-top:3px; }
    .bc-date { font-size:0.75rem; color:var(--gray); }
    .bc-status { font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; padding:4px 10px; border-radius:20px; }
    .bc-status.paid { background:rgba(74,255,180,0.12); color:var(--green); border:1px solid rgba(74,255,180,0.25); }
    .bc-status.pending { background:rgba(255,217,92,0.12); color:var(--gold); border:1px solid rgba(255,217,92,0.25); }
    .bc-status.overdue { background:rgba(255,92,114,0.12); color:var(--red); border:1px solid rgba(255,92,114,0.25); }

    .bill-card-body { padding:14px 16px; }
    .bc-items-preview { font-size:0.8rem; color:var(--gray); margin-bottom:10px; }
    .bc-totals-row { display:flex; justify-content:space-between; align-items:center; }
    .bc-items-count { font-size:0.75rem; color:var(--gray); }
    .bc-amount { font-family:'Cormorant Garamond',serif; font-size:1.3rem; font-weight:700; color:var(--gold); }

    .bill-card-footer { padding:10px 16px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; }
    .bc-btn { padding:6px 14px; border-radius:6px; font-family:'DM Sans',sans-serif; font-size:0.75rem; cursor:pointer; transition:all 0.2s; border:1px solid var(--border); background:transparent; color:var(--gray); }
    .bc-btn:hover { border-color:var(--accent-bright); color:var(--accent-bright); background:rgba(74,140,255,0.07); }
    .bc-btn.del:hover { border-color:var(--red); color:var(--red); background:rgba(255,92,114,0.08); }

    /* Empty state */
    .empty { text-align:center; padding:50px 20px; color:var(--gray); }
    .empty .e-icon { font-size:2.5rem; margin-bottom:10px; }
    .empty p { font-size:0.9rem; }

    /* Toast */
    .toast {
      position:fixed; bottom:28px; right:28px; z-index:500;
      background:rgba(18,32,64,0.97); border:1px solid rgba(74,255,180,0.35);
      border-radius:10px; padding:14px 20px;
      display:flex; align-items:center; gap:10px;
      font-size:0.87rem; color:var(--green);
      transform:translateY(80px); opacity:0;
      transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);
      pointer-events:none;
    }
    .toast.show { transform:translateY(0); opacity:1; }

    @media print {
      body { background:#fff; }
      nav, .layout > *:first-child, .saved-section, .bill-actions, .toast { display:none !important; }
      .main { padding:0; max-width:100%; }
      .bill-sheet { box-shadow:none; border-radius:0; }
      .bill-preview-wrap { position:static; }
      .layout { display:block; }
    }