*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg:    #292a2b;
      --bg2:   #2F2D26;
      --bg3:   #1f1f1e;
      --card:  #323230;
      --line:  rgba(255,255,255,0.08);
      --gold:  #C8B568;
      --gold2: #6b5f38;
      --text:  #ddd9cf;
      --dim:   #7a7670;
      --serif: 'Lora', Georgia, serif;
      --mono:  'Geist Mono', 'Courier New', monospace;
      --green: #4a7c59;
      --red:   #7c4a4a;
      --blue:  #3c5a7c;
    }
    html { scroll-behavior: smooth; }
    body {
      background: var(--bg); color: var(--text);
      font-family: var(--mono); font-size: 13px; line-height: 1.75;
      overflow-x: hidden; min-height: 100vh;
    }
    body::after {
      content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
      opacity: 0.03;
    }

    nav {
      position: sticky; top: 0; z-index: 100;
      background: rgba(41,42,43,0.92); backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--line);
    }
    .nav-inner {
      max-width: 1080px; margin: 0 auto; padding: 0 2.5rem;
      display: flex; align-items: center; justify-content: space-between; height: 52px;
    }
    .nav-logo { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--text); text-decoration: none; }
    .nav-logo span { color: var(--gold); }
    .nav-links { display: flex; gap: 0.4rem; align-items: center; }
    .nav-pill {
      font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
      padding: 0.3rem 0.9rem; border: 1px solid var(--line);
      color: var(--dim); text-decoration: none;
      transition: border-color 0.2s, color 0.2s;
    }
    .nav-pill:hover, .nav-pill.active { border-color: var(--gold2); color: var(--gold); }
    .nav-pill.danger:hover { border-color: var(--red); color: #c47a7a; }
    #navClientName { font-size: 11px; color: var(--dim); letter-spacing: 0.06em; }

    #loginScreen {
      min-height: calc(100vh - 52px);
      display: flex; align-items: center; justify-content: center;
      padding: 3rem 1.5rem;
      position: relative; z-index: 1;
    }
    .login-box { width: 100%; max-width: 440px; }
    .login-eyebrow {
      font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--dim); margin-bottom: 1.5rem;
      display: flex; align-items: center; gap: 0.7rem;
    }
    .login-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--gold2); display: block; }
    .login-title {
      font-family: var(--serif); font-size: clamp(2.4rem, 6vw, 4rem);
      font-weight: 400; line-height: 0.95; color: var(--text); margin-bottom: 0.6rem;
    }
    .login-title em { font-style: italic; color: var(--gold); }
    .login-sub { color: var(--dim); margin-bottom: 2.5rem; font-size: 12px; }
    .code-input-wrap { position: relative; margin-bottom: 1rem; }
    .code-input {
      width: 100%; background: var(--bg3); border: 1px solid var(--line);
      color: var(--text); font-family: var(--mono); font-size: 1.4rem;
      letter-spacing: 0.25em; padding: 1rem 1.2rem;
      text-align: center; text-transform: uppercase;
      transition: border-color 0.2s;
      outline: none;
    }
    .code-input:focus { border-color: var(--gold2); }
    .code-input::placeholder { color: var(--dim); font-size: 1rem; letter-spacing: 0.1em; }
    .code-input.error { border-color: var(--red); animation: shake 0.35s ease; }
    @keyframes shake {
      0%,100% { transform: translateX(0); }
      20%,60% { transform: translateX(-6px); }
      40%,80% { transform: translateX(6px); }
    }
    .btn-enter {
      width: 100%; background: none; border: 1px solid var(--gold2);
      color: var(--gold); font-family: var(--mono); font-size: 11px;
      letter-spacing: 0.16em; text-transform: uppercase;
      padding: 0.85rem; cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }
    .btn-enter:hover { background: var(--gold2); color: var(--text); }
    .btn-enter:disabled { opacity: 0.5; cursor: not-allowed; }
    .login-error { font-size: 11px; color: #c47a7a; text-align: center; margin-top: 0.8rem; min-height: 1.2em; }
    .login-hint { font-size: 10px; color: var(--dim); text-align: center; margin-top: 1.5rem; letter-spacing: 0.06em; }
    .login-hint span { color: var(--gold); }

    #dashboard { display: none; position: relative; z-index: 1; }

    /* Client header strip */
    .client-hero {
      border-bottom: 1px solid var(--line);
      padding: 3.5rem 0 2.5rem;
    }
    .page { max-width: 1080px; margin: 0 auto; padding: 0 2.5rem; }
    .client-hero-inner {
      display: flex; align-items: flex-end; justify-content: space-between;
      gap: 2rem; flex-wrap: wrap;
    }
    .client-eyebrow {
      font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--dim); margin-bottom: 1rem;
      display: flex; align-items: center; gap: 0.7rem;
    }
    .client-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--gold2); display: block; }
    .client-name-display {
      font-family: var(--serif); font-size: clamp(2rem, 5vw, 4rem);
      font-weight: 400; line-height: 0.95; color: var(--text);
    }
    .client-name-display em { font-style: italic; color: var(--gold); }
    .client-company { font-size: 12px; color: var(--dim); margin-top: 0.5rem; }
    .client-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; }
    .cstat { text-align: right; }
    .cstat-num { font-family: var(--serif); font-size: 1.6rem; font-style: italic; color: var(--text); }
    .cstat-label { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }

    .tab-bar {
      border-bottom: 1px solid var(--line);
      position: sticky; top: 52px; z-index: 90;
      background: rgba(41,42,43,0.95); backdrop-filter: blur(10px);
    }
    .tab-inner {
      max-width: 1080px; margin: 0 auto; padding: 0 2.5rem;
      display: flex; gap: 0;
    }
    .tab-btn {
      font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
      padding: 1rem 1.4rem; background: none; border: none; border-bottom: 2px solid transparent;
      color: var(--dim); cursor: pointer; transition: color 0.2s, border-color 0.2s;
      white-space: nowrap;
    }
    .tab-btn:hover { color: var(--text); }
    .tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }

    .tab-content { display: none; padding: 3rem 0; }
    .tab-content.active { display: block; }

    .sec-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; }
    .sec-tag { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
    .sec-title { font-family: var(--serif); font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 400; color: var(--text); margin-top: 0.3rem; }

    .project-card {
      border: 1px solid var(--line); padding: 1.5rem; margin-bottom: 3px;
      background: var(--bg); transition: border-color 0.2s, background 0.2s;
    }
    .project-card:hover { border-color: var(--gold2); background: #2e2c25; }
    .project-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
    .project-title { font-size: 15px; color: var(--text); letter-spacing: 0.02em; }
    .project-desc { font-size: 11px; color: var(--dim); line-height: 1.6; margin-bottom: 1.2rem; }
    .project-meta { display: flex; gap: 2rem; flex-wrap: wrap; margin-bottom: 1rem; }
    .pmeta-item { }
    .pmeta-label { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
    .pmeta-value { font-size: 11px; color: var(--text); margin-top: 0.1rem; }
    .progress-bar-wrap { background: var(--bg3); height: 3px; width: 100%; margin-top: 1rem; }
    .progress-bar-fill { height: 3px; background: var(--gold); transition: width 0.8s cubic-bezier(.25,.46,.45,.94); }
    .progress-label { font-size: 10px; color: var(--dim); margin-top: 0.4rem; }

    .status-pill {
      font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
      padding: 0.2rem 0.6rem; border: 1px solid;
      white-space: nowrap;
    }
    .status-pill.in_progress  { border-color: var(--gold2); color: var(--gold); }
    .status-pill.completed    { border-color: var(--green); color: #6fbf7a; }
    .status-pill.on_hold      { border-color: #5a5040; color: #9a8060; }
    .status-pill.cancelled    { border-color: var(--red); color: #c47a7a; }
    .status-pill.pending      { border-color: var(--blue); color: #7aa0c4; }
    .status-pill.paid         { border-color: var(--green); color: #6fbf7a; }
    .status-pill.overdue      { border-color: var(--red); color: #c47a7a; }

    .invoice-card {
      display: grid; grid-template-columns: auto 1fr auto auto;
      gap: 1.5rem; align-items: center;
      border: 1px solid var(--line); padding: 1.2rem 1.4rem; margin-bottom: 3px;
      background: var(--bg); transition: border-color 0.2s, background 0.2s, padding-left 0.2s;
    }
    .invoice-card:hover { border-color: var(--gold2); background: #2e2c25; padding-left: 1.8rem; }
    .invoice-nr { font-size: 10px; letter-spacing: 0.1em; color: var(--dim); white-space: nowrap; }
    .invoice-title { font-size: 13px; color: var(--text); }
    .invoice-due { font-size: 10px; color: var(--dim); margin-top: 0.2rem; }
    .invoice-amount { font-family: var(--serif); font-size: 1.2rem; font-style: italic; color: var(--text); text-align: right; white-space: nowrap; }
    .invoice-currency { font-size: 10px; color: var(--dim); font-style: normal; font-family: var(--mono); }
    .invoice-totals {
      display: flex; gap: 3px; margin-top: 1.5rem; flex-wrap: wrap;
    }
    .total-box {
      flex: 1; min-width: 160px; padding: 1.2rem; border: 1px solid var(--line);
      background: var(--bg2);
    }
    .total-label { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 0.4rem; }
    .total-amount { font-family: var(--serif); font-size: 1.6rem; font-style: italic; color: var(--text); }
    .total-amount.green { color: #6fbf7a; }
    .total-amount.gold  { color: var(--gold); }
    .total-amount.red   { color: #c47a7a; }

    .files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 3px; }
    .file-card {
      border: 1px solid var(--line); padding: 1.2rem; background: var(--bg);
      display: flex; flex-direction: column; gap: 0.5rem;
      transition: border-color 0.2s, background 0.2s;
    }
    .file-card:hover { border-color: var(--gold2); background: #2e2c25; }
    .file-icon { font-size: 1.5rem; opacity: 0.5; }
    .file-name { font-size: 12px; color: var(--text); word-break: break-word; line-height: 1.4; }
    .file-label { font-size: 10px; color: var(--gold); }
    .file-meta { font-size: 10px; color: var(--dim); }
    .file-dl {
      margin-top: auto; padding-top: 0.8rem;
      font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--dim); background: none; border: 1px solid var(--line);
      font-family: var(--mono); cursor: pointer; padding: 0.4rem 0.8rem;
      transition: border-color 0.2s, color 0.2s; text-decoration: none; display: inline-block;
      text-align: center;
    }
    .file-dl:hover { border-color: var(--gold2); color: var(--gold); }

    .update-item {
      display: grid; grid-template-columns: 32px 1fr;
      gap: 1.2rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line);
      align-items: start;
    }
    .update-dot {
      width: 8px; height: 8px; border-radius: 50%; margin-top: 0.45rem;
      flex-shrink: 0; border: 1px solid;
    }
    .update-dot.info      { background: var(--blue);  border-color: #7aa0c4; }
    .update-dot.milestone { background: var(--gold2); border-color: var(--gold); }
    .update-dot.warning   { background: #7c5e3c;      border-color: #c4945a; }
    .update-dot.success   { background: var(--green); border-color: #6fbf7a; }
    .update-title { font-size: 13px; color: var(--text); margin-bottom: 0.2rem; }
    .update-body { font-size: 11px; color: var(--dim); line-height: 1.6; }
    .update-date { font-size: 10px; color: var(--dim); margin-top: 0.3rem; letter-spacing: 0.06em; }

    .empty-state {
      padding: 3rem; border: 1px solid var(--line); text-align: center;
      color: var(--dim);
    }
    .empty-state em { font-family: var(--serif); font-style: italic; color: var(--gold); }

    .spinner {
      width: 20px; height: 20px; border: 2px solid var(--line);
      border-top-color: var(--gold); border-radius: 50%;
      animation: spin 0.8s linear infinite; margin: 3rem auto;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    #tab-chat { padding-bottom: 0; }
    .chat-wrap {
      display: flex; flex-direction: column;
      height: calc(100vh - 52px - 48px - 3rem);
      min-height: 480px;
      border: 1px solid var(--line);
    }
    .chat-messages {
      flex: 1; overflow-y: auto; padding: 1.5rem;
      display: flex; flex-direction: column; gap: 0.75rem;
      scroll-behavior: smooth;
    }
    .chat-messages::-webkit-scrollbar { width: 4px; }
    .chat-messages::-webkit-scrollbar-track { background: transparent; }
    .chat-messages::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
    .chat-empty {
      flex: 1; display: flex; align-items: center; justify-content: center;
      flex-direction: column; gap: 0.5rem; color: var(--dim); text-align: center;
    }
    .chat-empty-icon { font-size: 2rem; opacity: 0.2; }
    .chat-empty-text { font-size: 11px; }

    .msg-row { display: flex; gap: 0.6rem; align-items: flex-end; max-width: 72%; }
    .msg-row.mine { margin-left: auto; flex-direction: row-reverse; }
    .msg-avatar {
      width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
      background: var(--card); border: 1px solid var(--line);
      display: flex; align-items: center; justify-content: center;
      font-size: 10px; color: var(--dim);
    }
    .msg-row.mine .msg-avatar { background: var(--gold2); color: var(--text); }
    .msg-bubble {
      background: var(--card); border: 1px solid var(--line);
      padding: 0.6rem 0.9rem; max-width: 100%;
    }
    .msg-row.mine .msg-bubble {
      background: var(--bg2); border-color: var(--gold2);
    }
    .msg-text { font-size: 12px; color: var(--text); line-height: 1.6; word-break: break-word; white-space: pre-wrap; }
    .msg-image {
      max-width: 260px; max-height: 200px; display: block;
      cursor: pointer; border: 1px solid var(--line);
      transition: opacity 0.2s;
    }
    .msg-image:hover { opacity: 0.85; }
    .msg-file {
      display: flex; align-items: center; gap: 0.6rem;
      font-size: 11px; color: var(--gold); text-decoration: none;
      border: 1px solid var(--gold2); padding: 0.4rem 0.7rem; margin-top: 0.3rem;
    }
    .msg-file:hover { background: var(--gold2); color: var(--text); }
    .msg-time { font-size: 9px; color: var(--dim); margin-top: 0.3rem; letter-spacing: 0.06em; white-space: nowrap; }
    .msg-row.mine .msg-time { text-align: right; }

    .msg-row.typing .msg-bubble { padding: 0.7rem 0.9rem; }
    .typing-dots { display: flex; gap: 4px; align-items: center; }
    .typing-dots span {
      width: 5px; height: 5px; border-radius: 50%; background: var(--dim);
      animation: tdot 1.2s ease-in-out infinite;
    }
    .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
    .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes tdot { 0%,60%,100%{opacity:0.3;transform:scale(1)} 30%{opacity:1;transform:scale(1.3)} }

    .chat-composer {
      border-top: 1px solid var(--line); background: var(--bg2); padding: 0.75rem 1rem;
    }
    .chat-preview {
      margin-bottom: 0.5rem; display: none;
    }
    .chat-preview.has-file { display: flex; align-items: center; gap: 0.6rem; }
    .chat-preview-img { max-height: 60px; max-width: 80px; object-fit: cover; border: 1px solid var(--line); }
    .chat-preview-name { font-size: 11px; color: var(--dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .chat-preview-remove { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 1rem; font-family: var(--mono); transition: color 0.2s; }
    .chat-preview-remove:hover { color: #c47a7a; }
    .composer-row { display: flex; gap: 0.5rem; align-items: flex-end; }

    .action-menu-wrap { position: relative; flex-shrink: 0; }
    .composer-plus {
      background: none; border: 1px solid var(--gold2); color: var(--gold);
      font-size: 1.1rem; font-family: var(--mono); line-height: 1;
      width: 36px; height: 36px; cursor: pointer; flex-shrink: 0;
      transition: background 0.2s, color 0.2s;
      display: flex; align-items: center; justify-content: center;
    }
    .composer-plus:hover { background: var(--gold2); color: var(--text); }
    .action-menu {
      position: absolute; bottom: calc(100% + 8px); left: 0;
      background: var(--bg3); border: 1px solid var(--line);
      min-width: 180px; z-index: 200;
      display: none; flex-direction: column;
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    }
    .action-menu.open { display: flex; }
    .action-item {
      display: flex; align-items: center; gap: 0.75rem;
      padding: 0.75rem 1rem; background: none; border: none; border-bottom: 1px solid var(--line);
      color: var(--dim); font-family: var(--mono); font-size: 12px;
      cursor: pointer; text-align: left; width: 100%;
      transition: background 0.15s, color 0.15s;
    }
    .action-item:last-child { border-bottom: none; }
    .action-item:hover { background: rgba(200,181,104,0.08); color: var(--text); }
    .action-icon { font-size: 0.85rem; flex-shrink: 0; width: 16px; text-align: center; color: var(--gold2); }
    .action-item:hover .action-icon { color: var(--gold); }

    .client-modal-backdrop {
      position: fixed; inset: 0; z-index: 300;
      background: rgba(12,12,11,0.85); backdrop-filter: blur(4px);
      display: none; align-items: center; justify-content: center; padding: 1.5rem;
    }
    .client-modal-backdrop.open { display: flex; }
    .client-modal {
      background: var(--bg2); border: 1px solid var(--line);
      width: 100%; max-width: 460px;
    }
    .client-modal-head {
      padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--line);
      display: flex; justify-content: space-between; align-items: center;
    }
    .client-modal-title {
      font-family: var(--serif); font-size: 1.1rem; color: var(--text);
    }
    .client-modal-close {
      background: none; border: none; color: var(--dim); font-size: 1.1rem;
      cursor: pointer; font-family: var(--mono); transition: color 0.2s;
    }
    .client-modal-close:hover { color: var(--gold); }
    .client-modal-body { padding: 1.4rem; }
    .client-modal-footer {
      padding: 0.9rem 1.4rem; border-top: 1px solid var(--line);
      display: flex; gap: 0.5rem; justify-content: flex-end;
    }
    .c-form-group { margin-bottom: 1rem; }
    .c-form-label { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 0.4rem; display: block; }
    .c-form-input, .c-form-select, .c-form-textarea {
      width: 100%; background: var(--bg3); border: 1px solid var(--line);
      color: var(--text); font-family: var(--mono); font-size: 12px;
      padding: 0.6rem 0.8rem; outline: none; transition: border-color 0.2s;
    }
    .c-form-input:focus, .c-form-select:focus, .c-form-textarea:focus { border-color: var(--gold2); }
    .c-form-textarea { resize: vertical; min-height: 80px; }
    .c-form-select option { background: var(--bg3); }
    .c-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
    .btn-cancel {
      background: none; border: 1px solid var(--line); color: var(--dim);
      font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
      padding: 0.5rem 1rem; cursor: pointer; transition: border-color 0.2s, color 0.2s;
    }
    .btn-cancel:hover { border-color: var(--gold2); color: var(--text); }
    .btn-submit {
      background: none; border: 1px solid var(--gold2); color: var(--gold);
      font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
      padding: 0.5rem 1rem; cursor: pointer; transition: background 0.2s, color 0.2s;
    }
    .btn-submit:hover { background: var(--gold2); color: var(--text); }
    .composer-input {
      flex: 1; background: var(--bg3); border: 1px solid var(--line);
      color: var(--text); font-family: var(--mono); font-size: 12px;
      padding: 0.55rem 0.8rem; resize: none; min-height: 36px; max-height: 120px;
      outline: none; line-height: 1.5; transition: border-color 0.2s;
    }
    .composer-input:focus { border-color: var(--gold2); }
    .composer-send {
      background: none; border: 1px solid var(--gold2); color: var(--gold);
      font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
      text-transform: uppercase; padding: 0 1rem; height: 36px; cursor: pointer; flex-shrink: 0;
      transition: background 0.2s, color 0.2s;
    }
    .composer-send:hover { background: var(--gold2); color: var(--text); }
    .composer-send:disabled { opacity: 0.4; cursor: not-allowed; }

    .msg-card {
      border: 1px solid var(--line); padding: 0.9rem 1rem; min-width: 220px;
    }
    .msg-card-header {
      display: flex; align-items: center; gap: 0.6rem;
      margin-bottom: 0.7rem; padding-bottom: 0.6rem;
      border-bottom: 1px solid var(--line);
    }
    .msg-card-icon {
      width: 28px; height: 28px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.75rem; flex-shrink: 0;
    }
    .msg-card-icon.offer   { background: rgba(107,95,56,0.3); color: var(--gold); border: 1px solid var(--gold2); }
    .msg-card-icon.request { background: rgba(60,90,124,0.3); color: #7aa0c4; border: 1px solid #3c5a7c; }
    .msg-card-type {
      font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
    }
    .msg-card-type.offer   { color: var(--gold); }
    .msg-card-type.request { color: #7aa0c4; }
    .msg-card-row {
      display: flex; justify-content: space-between; gap: 1rem;
      font-size: 11px; margin-bottom: 0.3rem;
    }
    .msg-card-label { color: var(--dim); }
    .msg-card-value { color: var(--text); text-align: right; font-weight: 500; }
    .msg-card-desc {
      font-size: 11px; color: var(--dim); margin-top: 0.6rem;
      padding-top: 0.6rem; border-top: 1px solid var(--line); line-height: 1.5;
    }
    .msg-card-actions {
      display: flex; gap: 0.4rem; margin-top: 0.8rem; flex-wrap: wrap;
    }
    .msg-card-btn {
      font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
      padding: 0.3rem 0.7rem; border: 1px solid; background: none; cursor: pointer;
      display: flex; align-items: center; gap: 0.35rem; transition: background 0.15s, color 0.15s;
    }
    .msg-card-btn.accept  { border-color: var(--green); color: #6fbf7a; }
    .msg-card-btn.accept:hover  { background: var(--green); color: var(--text); }
    .msg-card-btn.decline { border-color: var(--red); color: #c47a7a; }
    .msg-card-btn.decline:hover { background: var(--red); color: var(--text); }
    .msg-card-btn.convert { border-color: var(--gold2); color: var(--gold); }
    .msg-card-btn.convert:hover { background: var(--gold2); color: var(--text); }
    .msg-card-btn:disabled { opacity: 0.4; cursor: default; }
    .msg-card-status {
      margin-top: 0.6rem; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
      padding: 0.25rem 0.6rem; display: inline-block; border: 1px solid;
    }
    .msg-card-status.accepted { border-color: var(--green); color: #6fbf7a; }
    .msg-card-status.declined { border-color: var(--red); color: #c47a7a; }

    .tab-badge {
      display: inline-flex; align-items: center; justify-content: center;
      width: 16px; height: 16px; border-radius: 50%;
      background: var(--gold); color: var(--bg); font-size: 9px; font-weight: 700;
      margin-left: 0.35rem; vertical-align: middle; display: none;
    }
    .tab-badge.show { display: inline-flex; }

    #imgLb {
      position: fixed; inset: 0; z-index: 500;
      background: rgba(10,10,9,0.96); display: none;
      align-items: center; justify-content: center; cursor: zoom-out;
    }
    #imgLb.open { display: flex; }
    #imgLb img { max-width: 92vw; max-height: 90vh; object-fit: contain; }
    #imgLbClose { position: fixed; top: 1.2rem; right: 1.5rem; background: none; border: none; color: var(--dim); font-size: 1.6rem; cursor: pointer; font-family: var(--mono); }

    @media (max-width: 780px) {
      .page { padding: 0 1.4rem; }
      .nav-inner { padding: 0 1.4rem; }
      .tab-inner { padding: 0 1.4rem; overflow-x: auto; }
      .invoice-card { grid-template-columns: 1fr auto; }
      .invoice-nr { display: none; }
      .client-stats { gap: 1rem; }
      .cstat { text-align: left; }
      .msg-row { max-width: 88%; }
    }