:root {
    --gold: #c9a84c;
    --gold-light: #e8c96d;
    --gold-dim: rgba(201,168,76,0.15);
    --gold-border: rgba(201,168,76,0.35);
    --dark-bg: #0f0f0f;
    --dark-surface: #171717;
    --dark-card: #1e1e1e;
    --dark-card2: #242424;
    --dark-border: rgba(255,255,255,0.07);
    --text-primary: #f0ece4;
    --text-secondary: #8a8580;
    --text-muted: #4a4540;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --transition: 180ms cubic-bezier(0.4,0,0.2,1);
    --font: 'Inter', system-ui, -apple-system, sans-serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }

  #app {
    background: var(--dark-bg);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    min-height: 100vh;
    padding-bottom: 40px;
  }

  .header {
    background: var(--dark-surface);
    border-bottom: 1px solid var(--dark-border);
    padding: 24px 20px 0;
    text-align: center;
  }
  .logo-ring {
    width: 56px; height: 56px; border-radius: 50%;
    border: 1.5px solid var(--gold-border);
    background: var(--gold-dim);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
    font-size: 22px;
  }
  .brand-name {
    font-size: 22px; font-weight: 700; letter-spacing: 0.04em;
    color: var(--gold);
    font-variant: small-caps;
  }
  .brand-sub {
    font-size: 12px; color: var(--text-secondary); letter-spacing: 0.12em;
    text-transform: uppercase; margin-top: 3px;
  }

  .tab-bar {
    display: flex; margin-top: 20px;
  }
  .tab {
    flex: 1; padding: 12px 0; font-size: 13px; font-weight: 500;
    color: var(--text-secondary); cursor: pointer; border: none;
    background: transparent; border-bottom: 2px solid transparent;
    letter-spacing: 0.04em; transition: color var(--transition), border-color var(--transition);
  }
  .tab.active { color: var(--gold); border-bottom-color: var(--gold); }
  .tab:hover:not(.active) { color: var(--text-primary); }

  .section { padding: 28px 16px 0; }
  .section-label {
    font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-muted);
    margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
  }
  .step-badge {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--gold-dim); border: 1px solid var(--gold-border);
    color: var(--gold); font-size: 10px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
  }

  .services-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  }
  .svc-card {
    background: var(--dark-card); border: 1px solid var(--dark-border);
    border-radius: var(--radius-md); padding: 16px 14px; cursor: pointer;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
    position: relative; overflow: hidden;
  }
  .svc-card:hover { border-color: var(--gold-border); transform: translateY(-1px); }
  .svc-card.selected {
    border-color: var(--gold); background: var(--gold-dim);
  }
  .svc-card.selected::after {
    content: '';
    position: absolute; top: 8px; right: 8px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--gold);
  }
  .svc-icon { font-size: 20px; margin-bottom: 8px; display: block; }
  .svc-name { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
  .svc-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .svc-price { font-size: 13px; font-weight: 700; color: var(--gold); }
  .svc-time { font-size: 11px; color: var(--text-secondary); background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 4px; }

  .prof-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
  .prof-card {
    flex-shrink: 0; background: var(--dark-card); border: 1px solid var(--dark-border);
    border-radius: var(--radius-md); padding: 14px 16px;
    cursor: pointer; transition: border-color var(--transition), background var(--transition);
    display: flex; align-items: center; gap: 12px; min-width: 160px;
  }
  .prof-card:hover { border-color: var(--gold-border); }
  .prof-card.selected { border-color: var(--gold); background: var(--gold-dim); }
  .prof-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, #2a2520, #3a3028);
    border: 1.5px solid var(--gold-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: var(--gold);
    flex-shrink: 0;
  }
  .prof-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
  .prof-status { font-size: 11px; color: #4caf7d; display: flex; align-items: center; gap: 4px; }
  .prof-status::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #4caf7d; }

  .form-group { margin-bottom: 14px; }
  .form-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; display: block; letter-spacing: 0.03em; }
  .form-input {
    width: 100%; background: var(--dark-card); border: 1px solid var(--dark-border);
    border-radius: var(--radius-sm); padding: 11px 14px;
    color: var(--text-primary); font-size: 14px; font-family: var(--font);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none; appearance: none; -webkit-appearance: none;
  }
  .form-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim); }
  .form-input::placeholder { color: var(--text-muted); }
  .form-input:read-only { opacity: 0.6; cursor: default; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

  .times-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .time-btn {
    background: var(--dark-card); border: 1px solid var(--dark-border);
    border-radius: var(--radius-sm); padding: 9px 4px;
    color: var(--text-secondary); font-size: 12px; font-weight: 500;
    cursor: pointer; transition: border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition);
    text-align: center; font-family: var(--font);
  }
  .time-btn:hover:not(.occupied):not(.selected) { border-color: var(--gold-border); color: var(--text-primary); transform: translateY(-1px); }
  .time-btn.selected { background: var(--gold); border-color: var(--gold); color: #0f0f0f; font-weight: 700; }
  .time-btn.occupied { opacity: 0.3; cursor: not-allowed; text-decoration: line-through; position: relative; }

  .confirm-btn {
    width: 100%; padding: 15px; border-radius: var(--radius-md);
    background: var(--gold); border: none; color: #0f0f0f;
    font-size: 15px; font-weight: 700; letter-spacing: 0.03em;
    cursor: pointer; font-family: var(--font);
    transition: opacity var(--transition), transform var(--transition);
    margin-top: 8px;
  }
  .confirm-btn:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
  .confirm-btn:active:not(:disabled) { transform: translateY(0); }
  .confirm-btn:disabled { opacity: 0.3; cursor: not-allowed; }
  .confirm-btn.loading { opacity: 0.7; }

  .toast {
    position: absolute; top: 12px; right: 12px; left: 12px;
    background: #1a2e1a; border: 1px solid #2d5a2d;
    border-radius: var(--radius-md); padding: 12px 16px;
    color: #6fcf7a; font-size: 13px; font-weight: 500;
    opacity: 0; transform: translateY(-8px);
    transition: opacity 250ms, transform 250ms;
    z-index: 100; pointer-events: none;
  }
  .toast.show { opacity: 1; transform: translateY(0); }
  .toast.error { background: #2e1a1a; border-color: #5a2d2d; color: #cf6f6f; }

  .divider { height: 1px; background: var(--dark-border); margin: 24px 0 0; }

  .queue-list { padding: 20px 16px; display: flex; flex-direction: column; gap: 10px; }
  .queue-card {
    background: var(--dark-card); border: 1px solid var(--dark-border);
    border-radius: var(--radius-md); padding: 16px;
    display: flex; align-items: flex-start; gap: 14px;
    transition: border-color var(--transition);
  }
  .queue-card:hover { border-color: var(--gold-border); }
  .queue-card.next { border-color: rgba(201,168,76,0.4); background: rgba(201,168,76,0.06); }
  .pos-badge {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    background: var(--dark-card2); border: 1px solid var(--dark-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: var(--text-secondary);
  }
  .queue-card.next .pos-badge { background: var(--gold-dim); border-color: var(--gold-border); color: var(--gold); }
  .queue-info { flex: 1; min-width: 0; }
  .queue-name { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
  .queue-svc { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
  .queue-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .queue-time { font-size: 13px; font-weight: 700; color: var(--gold); }
  .queue-date { font-size: 11px; color: var(--text-muted); background: rgba(255,255,255,0.04); padding: 2px 8px; border-radius: 4px; }
  .queue-prof { font-size: 11px; color: var(--text-muted); }
  .next-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); background: var(--gold-dim); padding: 2px 8px; border-radius: 4px; margin-bottom: 6px; display: inline-block; }

  .day-sep { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding: 8px 0 4px; border-top: 1px solid var(--dark-border); margin-top: 8px; }
  .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); font-size: 14px; }
  .empty-state .ei { font-size: 32px; margin-bottom: 12px; opacity: 0.4; }

  .wpp-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
  .wpp-btn {
    flex: 1; padding: 11px; border-radius: var(--radius-sm);
    background: rgba(37,211,102,0.12); border: 1px solid rgba(37,211,102,0.25);
    color: #25d366; font-size: 13px; font-weight: 600; cursor: pointer;
    font-family: var(--font); transition: opacity var(--transition);
  }
  .wpp-btn:hover { opacity: 0.85; }

  .progress-bar {
    display: flex; gap: 4px; padding: 16px 16px 0;
  }
  .progress-step {
    flex: 1; height: 3px; border-radius: 2px;
    background: var(--dark-border); transition: background 300ms;
  }
  .progress-step.done { background: var(--gold); }
  .progress-step.active { background: rgba(201,168,76,0.5); }

  @keyframes spin { to { transform: rotate(360deg); } }
  .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(0,0,0,0.2); border-top-color: #0f0f0f; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; margin-right: 6px; }