:root{
    --paper:#F7F3E7;
    --paper-2:#F1ECDC;
    --kraft:#DCD3B8;
    --ink:#22261F;
    --ink-soft:#5B5A4E;
    --line:#C9BFA0;
    --teal:#1C6B54;
    --teal-deep:#124F3D;
    --mustard:#C0932E;
    --stamp-red:#A23B2C;
    --shadow: 0 10px 30px rgba(34,38,31,0.14);
  }
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    background:
      radial-gradient(circle at 1px 1px, rgba(34,38,31,0.06) 1px, transparent 1px) 0 0/16px 16px,
      var(--bg);
    color:var(--text);
    font-family: var(--font);
    display:flex;
    justify-content:center;
    padding:28px 12px 60px;
    min-height:100%;
  }
  .app{
    width:100%;
    max-width:440px;
  }
  .brand{
    text-align:center;
    margin-bottom:18px;
    position:relative;
  }
  .settings-gear-btn{
    position:absolute; top:0; left:0;
    width:34px; height:34px;
    border-radius:50%;
    background:var(--surface-sunk);
    border:1px solid var(--border);
    color:var(--text-soft);
    font-size:var(--t-base);
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.15s;
  }
  .settings-gear-btn:hover{ background:var(--surface); color:var(--turquoise-ink); }

  #confirmOverlay:empty{ display:none; }
  .confirm-backdrop{
    position:fixed; inset:0;
    background:rgba(34,38,31,0.45);
    display:flex; align-items:center; justify-content:center;
    padding:20px; z-index:1000;
    animation: stepFadeIn 0.2s ease both;
  }
  .confirm-card{
    background:var(--surface); border-radius:16px; border:1px solid var(--border);
    box-shadow:var(--shadow-1); padding:22px 20px; max-width:340px; width:100%;
    text-align:center;
  }
  .confirm-card .confirm-msg{ font-size:var(--t-sm); color:var(--text); line-height:1.6; margin-bottom:18px; }
  .confirm-card .btn-row{ gap:8px; }
  .brand .logo{
    font-family: var(--font);
    font-weight:900;
    font-size:var(--num-md);
    letter-spacing:0.5px;
    color:var(--text);
    display:inline-flex;
    align-items:center;
    gap:8px;
    direction:ltr;
  }
  .brand .logo span span{ color:var(--danger); }
  .brand .logo svg{ flex:none; }
  .brand .tag{
    font-size:var(--t-xs);
    color:var(--text-soft);
    margin-top:2px;
    letter-spacing:0.3px;
  }

  .tabbar{
    display:flex;
    background:var(--surface-sunk);
    border:1px solid var(--border);
    border-radius:12px;
    padding:3px;
    gap:2px;
    margin-top:18px;
  }
  .tabbar .tab{
    flex:1;
    text-align:center;
    padding:9px 4px;
    font-weight:700;
    font-size:var(--t-xs);
    cursor:pointer;
    border-radius:9px;
  }
  .tabbar .tab.active{
    background:var(--text);
    color:var(--surface);
  }

  /* receipt card with torn top + perforated edges */
  .receipt{
    position:relative;
    background:var(--surface);
    box-shadow:var(--shadow-1);
    padding:26px 22px 22px;
    margin-top:26px;
  }
  .receipt::before, .receipt::after{
    content:"";
    position:absolute;
    left:0; right:0; height:14px;
    background-image: radial-gradient(circle at 10px 7px, var(--bg) 6px, transparent 6.5px);
    background-size: 20px 14px;
    background-repeat: repeat-x;
  }
  .receipt::before{ top:-7px; }
  .receipt::after{ bottom:-7px; }
  .receipt-top-tear{
    position:absolute; top:-13px; left:0; right:0; height:14px;
    background: var(--surface);
    clip-path: polygon(0% 100%, 4% 30%, 8% 100%, 12% 20%, 16% 100%, 20% 35%, 24% 100%, 28% 15%, 32% 100%, 36% 40%, 40% 100%, 44% 20%, 48% 100%, 52% 30%, 56% 100%, 60% 10%, 64% 100%, 68% 35%, 72% 100%, 76% 20%, 80% 100%, 84% 30%, 88% 100%, 92% 15%, 96% 100%, 100% 30%, 100% 100%);
  }

  .section-title{
    font-family: var(--font);
    font-weight:700;
    font-size:var(--t-lg);
    margin:0 0 4px;
  }
  .section-sub{
    font-size:13.5px;
    color:var(--text-soft);
    margin:0 0 18px;
    line-height:1.5;
  }
  .dashed{
    border:none;
    border-top:2px dashed var(--border);
    margin:18px 0;
  }

  label.field-label{
    display:block;
    font-size:var(--t-xs);
    font-weight:700;
    color:var(--text-soft);
    margin-bottom:6px;
    letter-spacing:0.2px;
  }
  input[type=text], input[type=number], input[type=tel], textarea{
    width:100%;
    font-family: var(--font);
    font-size:var(--t-base);
    padding:11px 12px;
    border:1px solid var(--border);
    border-radius:var(--r-sm);
    background:var(--surface-sunk);
    color:var(--text);
    outline:none;
    margin-bottom:12px;
  }
  textarea{ resize:vertical; }
  input[type=number], input.numeric-input{
    direction:ltr;
    text-align:right;
    font-family: var(--font);
  }
  .field-label{ font-size:var(--t-xs); font-weight:700; color:var(--text-soft); margin:0 0 5px; }
  input:focus{ border-color:var(--turquoise-ink); box-shadow:0 0 0 3px rgba(28,107,84,0.15); }
  @keyframes stepFadeIn{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:none; }
  }
  .step-anim{ animation: stepFadeIn 0.32s cubic-bezier(0.22,0.61,0.36,1) backwards; }

  .step-dots{ display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:18px; }
  .step-dots .dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--border); transition: background 0.25s, transform 0.25s;
  }
  .step-dots .dot.active{ background:var(--turquoise-ink); transform:scale(1.35); }
  .step-dots .dot.done{ background:var(--turquoise-ink); opacity:0.55; }
  .step-dots .dot-line{ width:18px; height:2px; background:var(--border); transition: background 0.25s; }
  .step-dots .dot-line.done{ background:var(--turquoise-ink); opacity:0.55; }

  .step-icon{
    width:52px; height:52px; border-radius:50%;
    background:var(--surface-sunk); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:var(--t-xl); margin:0 auto 14px;
  }

  .crop-stage{
    position:relative;
    width:100%;
    background:#111;
    overflow:hidden;
    border:2px solid var(--text);
    line-height:0;
  }
  .crop-stage canvas{ display:block; width:100%; height:auto; }
  .crop-box{
    position:absolute;
    border:2px dashed var(--mustard, #d9a441);
    box-shadow:0 0 0 2000px rgba(0,0,0,0.5);
    touch-action:none;
    cursor:move;
  }
  .crop-handle{
    position:absolute;
    width:22px; height:22px;
    background:var(--mustard, #d9a441);
    border:2px solid var(--text);
    border-radius:50%;
    touch-action:none;
  }
  .crop-handle.nw{ top:-11px; left:-11px; cursor:nwse-resize; }
  .crop-handle.ne{ top:-11px; right:-11px; cursor:nesw-resize; }
  .crop-handle.sw{ bottom:-11px; left:-11px; cursor:nesw-resize; }
  .crop-handle.se{ bottom:-11px; right:-11px; cursor:nwse-resize; }

  .friend-row{
    display:flex;
    gap:8px;
    align-items:center;
    margin-bottom:10px;
  }
  .friend-row input{ margin-bottom:0; flex:1; }
  .icon-btn{
    border:1px solid var(--border);
    border-radius:var(--r-sm);
    background:var(--surface);
    width:42px; height:42px;
    font-size:var(--t-lg);
    cursor:pointer;
    flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .icon-btn:hover{ background:var(--text); color:var(--surface); }

  .btn{
    display:block;
    width:100%;
    padding:13px 16px;
    font-family: var(--font);
    font-weight:700;
    font-size:var(--t-sm);
    border:1px solid var(--text);
    border-radius:var(--r-sm);
    background:var(--text);
    color:var(--surface);
    cursor:pointer;
    text-align:center;
    letter-spacing:0.2px;
  }
  .btn:hover{ background:var(--turquoise-ink); border-color:var(--turquoise-ink); }
  .btn:active{ transform:translateY(1px); }
  .btn.secondary{
    background:var(--surface);
    color:var(--text);
  }
  .btn.secondary:hover{ background:var(--surface-sunk); color:var(--text); }
  .btn.teal{ background:var(--turquoise-ink); border-color:var(--turquoise-ink); }
  .btn.teal:hover{ background:var(--turquoise-ink); }
  .btn:disabled{ opacity:0.4; cursor:not-allowed; }
  .btn-row{ display:flex; gap:10px; }
  .btn-row .btn{ flex:1; }

  .add-friend-btn{
    background:none; border:2px dashed var(--border); color:var(--text-soft);
    width:100%; padding:10px; font-weight:700; font-size:var(--t-sm); cursor:pointer;
    margin-bottom:16px;
  }
  .add-friend-btn:hover{ border-color:var(--turquoise-ink); color:var(--turquoise-ink); }

  .saved-chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
  .saved-chip{
    padding:7px 12px; border:1px solid var(--border); border-radius:20px; background:var(--surface-sunk);
    font-size:var(--t-xs); font-weight:700; cursor:pointer; color:var(--text-soft);
  }
  .saved-chip:hover{ border-color:var(--turquoise-ink); color:var(--turquoise-ink); }

  /* Feedback screen */
  /* 🔴 6.09 - הכוכבים כאן היו מעוצבים כתו טקסט (font-size + text-stroke)
     בזמן שה-HTML כבר מזמן מזריק לתוכם את ICON.star, שהוא SVG.
     המשמעות: -webkit-text-stroke לא חל על כלום, ולכן הכוכב קיבל את
     currentColor - כלומר --surface-sunk, שהוא כמעט צבע הרקע.
     נמדד בדפדפן: 1.07:1 במצב בהיר ו-1.03:1 בכהה. התקן דורש 3:1
     לרכיב ממשק, כלומר הכוכבים היו בפועל בלתי נראים.
     ⚠️ תיקון הניגודיות שנעשה קודם לכן ב---text-soft היה נכון בכוונתו
     ולא נכנס לתוקף מעולם, כי הוא נכתב על מאפיין שאין לו השפעה על SVG.
     עכשיו הצבע יושב על ה-SVG עצמו: --text-soft במנוחה (נמדד 4.93:1
     בבהיר, 7.47:1 בכהה) ו---orange-cta במילוי (3.95:1 / 4.76:1).
     אותו אייקון ואותה שפה חזותית כמו הכוכבים בבאנר (.fb-star). */
  .feedback-stars{ display:flex; justify-content:center; gap:6px; margin:18px 0 22px; }
  .feedback-star{
    width:44px; height:44px; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
    border:none; background:none; cursor:pointer;
    color:var(--text-soft);
    transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .feedback-star .ic{ width:32px; height:32px; fill:currentColor; stroke:none; }
  .feedback-star:hover, .feedback-star:active{ color:var(--yellow-ink); transform:scale(1.12); }
  .feedback-star.filled{ color:var(--orange-cta); }
  .feedback-star:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:50%; }

  /* Scan screen */
  .upload-zone{
    border:1px dashed var(--border);
    border-radius:14px;
    padding:34px 16px;
    text-align:center;
    cursor:pointer;
    margin-bottom:16px;
    position:relative;
  }
  .upload-zone:hover{ border-color:var(--turquoise-ink); }
  .upload-zone .icon{ font-size:var(--num-md); margin-bottom:8px; }
  .upload-zone .txt{ font-weight:700; font-size:var(--t-sm); }
  .upload-zone .sub{ font-size:var(--t-xs); color:var(--text-soft); margin-top:4px; }
  .upload-zone.disabled{ opacity:0.4; pointer-events:none; }
  #fileInput, #cameraInput{ display:none; }

  .pending-images-strip{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
  .pending-thumb{ position:relative; width:72px; height:72px; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--border); }
  .pending-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .pending-thumb-remove{
    position:absolute; top:2px; inset-inline-end:2px;
    width:20px; height:20px; border-radius:50%; padding:0; line-height:1;
    border:1.5px solid var(--danger); background:var(--surface); color:var(--danger);
    font-size:var(--t-xs); font-weight:700; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .pending-thumb-remove:hover{ background:var(--danger); color:#fff; }

  .scan-progress{
    height:8px; background:var(--surface-sunk); border:1px solid var(--border); border-radius:20px; margin-bottom:18px; overflow:hidden;
  }
  /* ⚠️ scaleX ולא width. אנימציה על width מאלצת את הדפדפן לחשב פריסה
     בכל פריים — וזה קורה בדיוק כשהטלפון עסוק בסריקה ובהעלאת התמונה,
     הרגע הכי עמוס באפליקציה. scaleX רץ על ה-GPU ולא נוגע בפריסה.
     המקור בצד ימין כי הממשק בעברית. תואם ל-.c-prog-fill. */
  .scan-progress-bar{
    height:100%; width:100%; background:var(--turquoise-ink);
    transform-origin:right; transform:scaleX(0);
    transition:transform 0.25s linear;
  }
  .scanned-line{
    display:flex; justify-content:space-between; font-family: var(--font);
    font-size:13.5px; padding:5px 0; border-bottom:1px dotted var(--border);
    opacity:0; transform:translateY(4px);
    animation: printIn 0.35s ease forwards;
  }
  @keyframes printIn{ to{ opacity:1; transform:translateY(0);} }

  /* item cards */
  .item-card{
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface-sunk);
    padding:12px 14px;
    margin-bottom:12px;
    position:relative;
    cursor:pointer;
    transition:background 0.15s;
  }
  .item-card:hover{ background:var(--surface); }
  .item-card:active{ transform:scale(0.97); }
  .item-card.mine{ box-shadow: inset 0 0 0 2px var(--turquoise-ink); }
  }
  .item-top{
    display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  }
  .item-name{ font-weight:700; font-size:var(--t-sm); }
  .item-qty{ font-size:var(--t-xs); color:var(--text-soft); font-weight:600; }
  .item-discount-note{ font-size:var(--t-xs); color:var(--text-soft); margin-top:2px; }
  .item-price{ font-family: var(--font); font-weight:700; font-size:var(--t-sm); }
  .item-claims{
    display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; min-height:26px;
  }
  .stamp{
    display:inline-flex; align-items:center; justify-content:center;
    border:2px solid var(--turquoise-ink);
    color:var(--turquoise-ink);
    border-radius:50%;
    width:30px; height:30px;
    font-size:var(--t-xs); font-weight:800;
    transform:rotate(-8deg);
    background:rgba(28,107,84,0.06);
    animation: stampHit 0.22s ease-out;
    position:relative;
  }
  @keyframes stampHit{
    0%{ transform:scale(1.7) rotate(-8deg); opacity:0; }
    70%{ transform:scale(0.92) rotate(-8deg); opacity:1; }
    100%{ transform:scale(1) rotate(-8deg); }
  }
  .item-empty-hint{
    font-size:var(--t-xs); color:var(--text-soft); align-self:center;
  }
  .split-note{
    font-size:var(--t-xs); color:var(--turquoise-ink); font-weight:700; margin-top:6px;
  }

  .who-bar{
    display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:16px;
  }
  .who-chip{
    flex-shrink:0;
    padding:8px 14px;
    border:1px solid var(--border);
    border-radius:20px;
    background:var(--surface);
    font-weight:700; font-size:13.5px;
    cursor:pointer;
    white-space:nowrap;
  }
  .who-chip.active{ background:var(--text); color:var(--surface); }
  .who-label{ font-size:var(--t-xs); color:var(--text-soft); font-weight:700; margin-bottom:6px; }

  .totals-strip{
    display:flex; justify-content:space-between; font-family: var(--font);
    font-size:var(--t-sm); padding-top:4px;
  }
  .totals-strip.big{ font-size:var(--t-base); font-weight:700; }

  /* tip screen */
  .tip-options{
    display:flex; gap:8px; margin-bottom:14px;
  }
  .tip-opt{
    flex:1; text-align:center; padding:14px 6px;
    border:1px solid var(--border); border-radius:var(--r-sm); font-weight:800; font-size:var(--t-base);
    cursor:pointer; background:var(--surface-sunk);
    font-family: var(--font);
  }
  .tip-opt.active{ background:var(--yellow-ink); border-color:var(--yellow-ink); color:var(--text); }

  .person-row{
    display:flex; justify-content:space-between; padding:9px 0;
    border-bottom:1px dotted var(--border); font-size:var(--t-sm);
  }
  .person-row .amt{ font-family: var(--font); font-weight:700; }

  /* summary */
  .summary-card{
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface-sunk);
    padding:14px;
    margin-bottom:14px;
  }
  .summary-name{ font-weight:800; font-size:var(--t-base); margin-bottom:2px; }
  .summary-items{ font-size:var(--t-xs); color:var(--text-soft); margin:6px 0 10px; line-height:1.6; }
  .summary-amount{
    font-family: var(--font); font-weight:800; font-size:var(--num-sm); color:var(--turquoise-ink);
    margin-bottom:10px;
  }
  .wa-btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:11px; background:var(--turquoise-ink); color:#fff;
    border:1px solid var(--turquoise-ink); border-radius:var(--r-sm); font-weight:700; font-size:var(--t-sm); cursor:pointer;
    text-decoration:none;
  }
  .wa-btn:hover{ background:var(--turquoise-ink); border-color:var(--turquoise-ink); }

  .pay-btn-row{ display:flex; gap:8px; margin-bottom:10px; }
  .pay-btn-row .wa-btn{
    flex:1 1 0; min-width:0; width:auto;
    flex-direction:column; gap:7px; padding:13px 4px 11px;
    font-size:var(--t-xs); font-weight:700; letter-spacing:0.1px;
  }
  .pay-btn-row .wa-btn img{ width:26px; height:26px; border-radius:7px; display:block; object-fit:cover; }
  .bit-btn{ background:var(--yellow-ink); border-color:var(--yellow-ink); }
  .bit-btn:hover{ background:#a67c22; border-color:#a67c22; }
  .paybox-btn{ background:#4A3F5E; border-color:#4A3F5E; }
  .paybox-btn:hover{ background:#3A3049; border-color:#3A3049; }

  .grand-total-box{
    background:var(--text); color:var(--surface);
    border-radius:14px;
    padding:16px; text-align:center; margin-bottom:18px;
  }
  .grand-total-box .lbl{ font-size:var(--t-xs); letter-spacing:0.4px; opacity:0.8; margin-bottom:4px; }
  .grand-total-box .val{ font-family: var(--font); font-size:var(--t-2xl); font-weight:700; }

  .step-hint{ font-size:var(--t-xs); color:var(--text-soft); text-align:center; margin-top:14px; }

  /* history tab */
  .history-card{
    border:1px solid var(--border); border-radius:12px; background:var(--surface-sunk); padding:12px 14px; margin-bottom:12px;
  }
  .history-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; }
  .history-date{ font-size:var(--t-xs); color:var(--text-soft); font-weight:700; }
  .history-total{ font-family: var(--font); font-weight:800; font-size:var(--t-base); color:var(--turquoise-ink); margin-inline-end:auto; }
  .history-people{ font-size:var(--t-xs); color:var(--text-soft); line-height:1.6; }
  .history-paid-badge{ font-size:var(--t-xs); font-weight:700; color:var(--turquoise-ink); margin-bottom:8px; }
  .history-people-list{ border-top:1px dashed var(--border); padding-top:8px; }
  .history-person-row{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    font-size:var(--t-xs); padding:4px 0;
  }
  .history-person-label{ display:flex; align-items:center; gap:8px; cursor:pointer; }
  .history-person-amt{ font-family: var(--font); color:var(--text-soft); }
  .empty-state{ text-align:center; padding:30px 10px; color:var(--text-soft); font-size:var(--t-sm); }

  /* help tab */
  .help-step{ display:flex; gap:12px; margin-bottom:16px; align-items:flex-start; }
  .help-num{
    flex-shrink:0; width:30px; height:30px; border:2px solid var(--turquoise-ink); color:var(--turquoise-ink);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-family: var(--font); font-weight:700; font-size:var(--t-sm);
  }
  .help-txt{ font-size:var(--t-sm); line-height:1.6; }
  /* 🔴 רק ההדגשה הראשונה היא כותרת. הכלל חל קודם על **כל** <b> בשלב,
     ולכן הדגשה באמצע משפט ("בלי להתקין שום דבר") הפכה לשורה בפני עצמה —
     והפסיק שאחריה נשאר לבדו בתחילת השורה הבאה. זה "הפסיק שברח"
     שנתנאל דיווח עליו 4.09. */
  .help-txt > b:first-child{ display:block; margin-bottom:2px; font-family: var(--font); font-size:var(--t-sm); }

  .warn-badge{
    background:rgba(162,59,44,0.1); border:1px solid var(--danger); border-radius:var(--r-sm); color:var(--danger);
    font-weight:700; font-size:var(--t-xs); padding:8px 12px; margin-bottom:14px;
  }
  .ok-badge{
    background:rgba(28,107,84,0.08); border:1px solid var(--turquoise-ink); border-radius:var(--r-sm); color:var(--turquoise-ink);
    font-weight:700; font-size:var(--t-xs); padding:8px 12px; margin-bottom:14px;
  }
  .live-pulse{
    display:inline-block;
    width:7px; height:7px; border-radius:50%;
    background:var(--turquoise-ink);
    margin-inline-end:6px;
    vertical-align:middle;
    animation: livePulse 1.4s ease-in-out infinite;
  }
  @keyframes livePulse{
    0%,100%{ opacity:0.25; transform:scale(0.85); }
    50%{ opacity:1; transform:scale(1); }
  }

  .resume-banner{
    border:1px solid var(--yellow-ink); border-radius:12px; background:rgba(192,147,46,0.1);
    padding:12px 14px; margin-bottom:16px;
  }
  .resume-banner .rb-title{ font-weight:800; font-size:var(--t-sm); margin-bottom:4px; }
  .resume-banner .rb-sub{ font-size:var(--t-xs); color:var(--text-soft); margin-bottom:10px; }


  .landing-logo{ text-align:center; padding:6px 10px 6px; }
  .landing-logo svg{ display:block; margin:0 auto; }
  .landing-title{ font-family: var(--font); font-weight:900; font-size:34px; letter-spacing:0.5px; margin-top:4px; }
  .landing-tagline{ color:var(--text-soft); font-size:var(--t-sm); margin-top:6px; }

  .room-box{
    border:1px solid var(--turquoise-ink); border-radius:14px; background:rgba(58,110,102,0.07);
    padding:14px; margin-bottom:16px;
  }
  .room-box .rb-title{ font-weight:800; font-size:var(--t-sm); margin-bottom:4px; }
  .room-box .rb-sub{ font-size:var(--t-xs); color:var(--text-soft); margin-bottom:10px; }
  .room-code-display{
    font-family: var(--font); font-weight:700; font-size:var(--t-2xl);
    letter-spacing:4px; text-align:center; padding:10px; direction:ltr;
    background:var(--surface); border:1px dashed var(--text); border-radius:var(--r-sm); margin-bottom:8px;
  }
  .room-status-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-inline-end:6px; }
  .room-status-dot.connected{ background:#3a8f5b; }
  .room-status-dot.connecting{ background:var(--yellow-ink); }
  .room-status-dot.offline{ background:var(--yellow-ink); }
  .room-status-dot.error{ background:var(--danger); }
  .room-error-text{ font-size:var(--t-xs); color:var(--danger); margin:6px 0; }

  .my-total-sticky{
    position:sticky; top:0; z-index:5;
    background:var(--text); color:var(--surface);
    padding:9px 12px; text-align:center; font-size:13.5px;
    margin:0 -4px 14px; border:2px solid var(--text);
  }
  .my-total-sticky strong{ font-family: var(--font); font-size:var(--t-sm); }

  /* quick edit + manual add */
  .item-edit-icon{
    border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface);
    width:28px; height:28px; font-size:var(--t-xs); cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .item-edit-icon:hover{ background:var(--text); color:var(--surface); }
  .item-card.editing{ box-shadow: inset 0 0 0 2px var(--yellow-ink); }
  .item-card input[type=text], .item-card input[type=number]{ margin-bottom:8px; }
  .item-stepper{
    display:flex; align-items:center; justify-content:center; gap:14px; margin-top:10px;
  }
  .stepper-btn{
    width:34px; height:34px; border:1px solid var(--border); background:var(--surface);
    font-weight:800; font-size:var(--t-base); cursor:pointer; border-radius:50%;
  }
  .stepper-btn:hover{ background:var(--text); color:var(--surface); }
  .stepper-btn:disabled{ opacity:0.3; cursor:not-allowed; }
  .stepper-btn:disabled:hover{ background:var(--surface); color:var(--text); }
  .stepper-count{ font-family: var(--font); font-weight:700; font-size:13.5px; min-width:70px; text-align:center; }

  .item-remove-btn{
    border:2px solid var(--danger); background:var(--surface); color:var(--danger);
    font-size:var(--t-xs); font-weight:700; padding:3px 9px; border-radius:14px; cursor:pointer;
    align-self:center; margin-inline-start:auto;
  }
  .item-remove-btn:hover{ background:var(--danger); color:#fff; }
  .split-toggle-btn{
    display:block; margin:10px 0 0; padding:5px 10px; font-size:var(--t-xs); font-weight:700;
    border:1.5px dashed var(--border); background:transparent; color:var(--text-soft); cursor:pointer;
    width:auto; border-radius:12px;
  }
  .split-toggle-btn:hover{ border-color:var(--text); color:var(--text); }
  .person-dot{
    display:inline-block; width:9px; height:9px; border-radius:50%;
    margin-inline-end:6px; vertical-align:middle;
  }

  .manual-add-box{
    border:1px dashed var(--border); border-radius:12px; padding:14px; margin-bottom:16px;
  }
  .manual-add-row{ display:flex; gap:8px; }
  .manual-add-row input{ margin-bottom:0; }
  .manual-add-row input[name=manualName]{ flex:2; }
  .manual-add-row input[name=manualPrice]{ flex:1; }

  .draft-list{ margin-bottom:6px; }
  .draft-row{
    display:flex; justify-content:space-between; align-items:center;
    border-bottom:1px dotted var(--border); padding:8px 0; font-size:var(--t-sm);
  }
  .draft-row .dr-name{ font-weight:700; }
  .draft-row .dr-meta{ font-family: var(--font); font-size:var(--t-xs); color:var(--text-soft); }
  .draft-row .dr-actions{ display:flex; gap:20px; }

  .ocr-status{ font-size:var(--t-xs); color:var(--text-soft); text-align:center; margin:6px 0 14px; }
  .ocr-error{
    border:1px solid var(--danger); border-radius:var(--r-sm); background:rgba(162,59,44,0.08); color:var(--danger);
    padding:10px 12px; font-size:var(--t-xs); font-weight:700; margin-bottom:14px;
  }

  .paid-row{ display:flex; align-items:center; gap:10px; margin-top:10px; }
  .paid-row input[type=checkbox]{ width:20px; height:20px; accent-color:var(--turquoise-ink); cursor:pointer; }
  .paid-row label{ font-size:13.5px; font-weight:700; cursor:pointer; }
  .paid-row.self-pay-note{ font-size:var(--t-xs); color:var(--teal-deep,var(--turquoise-ink)); font-weight:700; }
  .summary-card.paid{ box-shadow: inset 0 0 0 2px var(--turquoise-ink); }
  .summary-card.paid .summary-amount{ text-decoration:line-through; opacity:0.6; }

  .self-pay-toggle{
    display:flex; align-items:center; gap:8px;
    font-size:var(--t-xs); color:var(--text-soft); cursor:pointer;
    margin-bottom:8px;
  }
  .self-pay-toggle input[type=checkbox]{ width:16px; height:16px; accent-color:var(--turquoise-ink); cursor:pointer; flex:none; }

  ::-webkit-scrollbar{ height:6px; }
  ::-webkit-scrollbar-thumb{ background:var(--border); }