:root{
    --bg:#0D0D0D;
    --surface:#181818;
    --surface2:#1F1F1F;
    --border:#2A2A2A;
    --gold:#C9A15A;
    --gold-soft:#E8CD9A;
    --red:#B23A3A;
    --blue:#2E4C6D;
    --text:#F5F1E8;
    --text-dim:#8A8A8A;
  }
  *{ -webkit-tap-highlight-color: transparent; }
  html, body{ height:100%; }
  body{
    background:#050505; font-family:'Inter',sans-serif; color:var(--text);
    margin:0; min-height:100dvh; display:flex; align-items:center; justify-content:center;
    padding:16px; box-sizing:border-box;
  }
  .font-display{ font-family:'Fraunces', serif; }
  .phone{
    width:min(390px, 94vw);
    height:min(844px, 90dvh);
    background:var(--bg);
    border-radius:44px; box-shadow:0 0 0 10px #000, 0 30px 60px rgba(0,0,0,.6);
    overflow:hidden; position:relative; border:1px solid #1a1a1a;
    flex-shrink:0;
  }
  @media (max-width:480px){
    .phone{ border-radius:0; box-shadow:none; border:none; width:100vw; height:100dvh; }
    body{ padding:0; }
  }
  .screen{ position:absolute; inset:0; display:none; flex-direction:column; }
  .screen.active{ display:flex; }
  .notch{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:120px; height:26px; background:#000; border-radius:0 0 16px 16px; z-index:50;
  }
  .scroll{ overflow-y:auto; scrollbar-width:none; }
  .scroll::-webkit-scrollbar{ display:none; }

  /* Barber pole signature stripe */
  .pole-stripe{
    height:5px; width:100%;
    background: repeating-linear-gradient(-45deg,
      var(--red) 0 10px, var(--gold) 10px 14px, var(--blue) 14px 24px, var(--gold) 24px 28px);
    background-size: 200% 100%;
    animation: poleShift 6s linear infinite;
  }
  @keyframes poleShift{ from{background-position:0 0;} to{background-position:-56px 0;} }

  .tab-btn{ color:var(--text-dim); transition:color .2s; }
  .tab-btn.active{ color:var(--gold); }
  .tab-dot{ width:4px;height:4px;border-radius:50%; background:var(--gold); opacity:0; transition:opacity .2s; }
  .tab-btn.active .tab-dot{ opacity:1; }

  .chip{
    border:1px solid var(--border); background:var(--surface2); color:var(--text);
    transition:all .15s;
  }
  .chip.selected{ background:var(--gold); color:#141108; border-color:var(--gold); font-weight:700; }
  .chip.disabled{ opacity:.3; text-decoration:line-through; pointer-events:none; }

  .step-dot{ width:26px;height:26px;border-radius:50%; display:flex;align-items:center;justify-content:center;
    font-size:12px; font-weight:700; border:1px solid var(--border); color:var(--text-dim); background:var(--surface2);}
  .step-dot.done{ background:var(--gold); color:#141108; border-color:var(--gold); }
  .step-dot.current{ border-color:var(--gold); color:var(--gold); }
  .step-line{ flex:1; height:1px; background:var(--border); }
  .step-line.done{ background:var(--gold); }

  .card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; }
  .btn-gold{ background:var(--gold); color:#141108; font-weight:700; border-radius:12px; }
  .btn-gold:active{ transform:scale(.98); }
  .btn-ghost{ border:1px solid var(--border); color:var(--text); border-radius:12px; }

  .ring{ transform:rotate(-90deg); }
  .toast{
    position:absolute; left:16px; right:16px; bottom:100px; background:var(--gold); color:#141108;
    padding:12px 16px; border-radius:12px; font-weight:700; font-size:14px; text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.4); opacity:0; transform:translateY(10px); pointer-events:none;
    transition:all .3s; z-index:80;
  }
  .toast.show{ opacity:1; transform:translateY(0); }
  ::selection{ background:var(--gold); color:#141108; }