/* МУРАВЕЙ — базовые стили. Перенесены дословно из макета docs/design/murav.html (блок <style>).
   Палитру, шрифты и готовые классы (.hex-btn, .btn-next, .pill-*, .chip, .hex-face, .rating-hex,
   .master-row, .consent) НЕ менять — ТЗ §2, §8.4. Новые экраны дописывают стили в css/screens/*.css. */

/* Inter (SIL OFL 1.1, fonts/OFL.txt) — со своего сервера, переменный woff2, веса 400–900 */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext, only for the currency signs (₽ is U+20BD): without it the ruble falls back to a system font */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+20A0-20AB, U+20AD-20C4;
}
  :root {
    --bg: #081426;
    --yellow: #FFD640;
    --yellow-dark: #F0BB10;
    --green: #4ADE80;
    --text: #F5F7FA;
    --text-muted: rgba(245, 247, 250, 0.55);
    --ink: #0A1628;
    --hex-empty: rgba(26, 50, 82, 0.7);
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
  body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text);
    background-color: var(--bg);
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231A3252' fill-opacity='0.55'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: 56px 98px;
    background-attachment: fixed;
    user-select: none; -webkit-user-select: none;
  }
  body::before {
    content: ''; position: fixed; inset: 0;
    pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.5) 100%);
  }
  #app { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; }
  .home-view, .auth-view, .service-view, .search-view, .dashboard-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }

  .logo {
    font-weight: 900; font-size: 18px; letter-spacing: 0.16em;
    color: var(--yellow);
    text-shadow: 0 0 30px rgba(255, 214, 64, 0.4);
  }
  .btn-login {
    background: var(--yellow); color: var(--ink);
    border: none; border-radius: 12px;
    padding: 10px 18px;
    font-family: inherit; font-weight: 800; font-size: 12px; letter-spacing: 0.14em;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(255, 214, 64, 0.35), inset 0 1px 0 rgba(255,255,255,0.4);
    transition: transform 0.15s;
  }
  .btn-login:hover { transform: translateY(-1px); }
  .btn-login:active { transform: scale(0.96); }

  /* ===== Home ===== */
  .app-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    padding-top: calc(16px + env(safe-area-inset-top));
    flex-shrink: 0;
  }
  .home-main {
    flex: 1;
    display: flex; flex-direction: column;
    min-height: 0;
    padding: 0 16px 24px;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .home-main::-webkit-scrollbar { display: none; }
  .tagline {
    text-align: center;
    font-weight: 900; font-size: 28px;
    color: var(--yellow);
    margin: 0;
    letter-spacing: -0.03em; line-height: 1.05;
    text-shadow: 0 0 40px rgba(255, 214, 64, 0.35);
    flex-shrink: 0;
  }
  .intro { text-align: center; margin-top: 14px; flex-shrink: 0; }
  .intro-title {
    font-weight: 800; font-size: 20px; color: var(--text);
    margin: 0; line-height: 1.15; letter-spacing: -0.01em;
  }
  .intro-sub {
    font-size: 12px; color: var(--text-muted);
    margin: 6px auto 0; max-width: 340px; line-height: 1.35;
  }

  /* City pill */
  .city-row {
    display: flex; justify-content: flex-end;
    max-width: 420px; margin: 12px auto 0;
    padding: 0 2px;
    flex-shrink: 0;
  }
  .city-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 214, 64, 0.08);
    border: 1px solid rgba(255, 214, 64, 0.3);
    color: var(--yellow);
    border-radius: 999px;
    padding: 6px 11px 6px 9px;
    font-family: inherit; font-weight: 700; font-size: 12px;
    letter-spacing: 0.01em;
    cursor: pointer; transition: all 0.2s;
  }
  .city-pill:hover {
    background: rgba(255, 214, 64, 0.16);
    border-color: rgba(255, 214, 64, 0.55);
  }
  .city-pill:active { transform: scale(0.96); }
  .city-pill svg { width: 13px !important; height: 13px !important; }
  .city-pill .chev { opacity: 0.75; margin-left: 1px; }

  /* Search */
  .search-wrap {
    position: relative; margin: 8px auto 0;
    max-width: 420px; width: 100%; flex-shrink: 0;
  }
  .search-icon {
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%);
    width: 16px !important; height: 16px !important;
    color: var(--yellow);
    pointer-events: none; z-index: 3;
  }
  .search-input {
    width: 100%;
    background: rgba(12, 28, 51, 0.85);
    border: 1px solid rgba(255, 214, 64, 0.25);
    border-radius: 14px;
    padding: 12px 14px 12px 40px;
    font-family: inherit; font-size: 15px;
    color: var(--text); outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    position: relative; z-index: 1;
  }
  .search-input::placeholder { color: rgba(245, 247, 250, 0.4); }
  .search-input:focus {
    border-color: var(--yellow);
    background: rgba(12, 28, 51, 0.95);
    box-shadow: 0 0 0 3px rgba(255, 214, 64, 0.15), 0 0 24px -4px rgba(255, 214, 64, 0.35);
  }
  .ants-layer {
    position: absolute; inset: 1px;
    border-radius: 13px; overflow: hidden;
    pointer-events: none; z-index: 2;
    opacity: 0.95; transition: opacity 0.3s;
  }
  .search-wrap.has-text .ants-layer,
  .search-wrap:focus-within .ants-layer { opacity: 0; }
  .ant-walker {
    position: absolute; left: -30px;
    top: var(--top, 50%);
    animation: antWalk linear infinite;
    will-change: left;
  }
  .ant {
    display: inline-block;
    animation: antBob 0.35s linear infinite;
    transform-origin: center center;
    filter: drop-shadow(0 0 3px rgba(255, 214, 64, 0.6));
  }
  .ant svg { display: block; width: 20px; height: 10px; }
  @keyframes antWalk {
    from { left: -30px; }
    to   { left: 105%; }
  }
  @keyframes antBob {
    0%, 100% { transform: translateY(-50%) rotate(-4deg); }
    50%      { transform: translateY(-50%) rotate(4deg); }
  }

  /* Hex grid */
  .hex-viewport {
    position: relative;
    height: 380px;
    flex-shrink: 0;
    overflow: hidden;
    touch-action: none; cursor: grab;
    margin-top: 4px;
    -webkit-mask-image: linear-gradient(180deg, #000 92%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 92%, transparent 100%);
  }
  .hex-viewport:active { cursor: grabbing; }
  .hex-grid {
    position: absolute; top: 0; left: 0;
    width: 0; height: 0;
    will-change: transform;
    pointer-events: none;
  }
  .hex-item {
    position: absolute;
    width: 120px; height: 138.56px;
    padding: 0; border: none; background: transparent;
    cursor: pointer;
    transform-origin: center center;
    will-change: transform, opacity;
    pointer-events: auto;
    touch-action: manipulation;
  }
  .hex-face {
    width: 100%; height: 100%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(165deg, #FFDE5A 0%, #FFD640 35%, #F0BB10 100%);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px; position: relative;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.5)) drop-shadow(0 0 18px rgba(255,214,64,0.25));
    transition: filter 0.2s;
  }
  .hex-face::before {
    content: ''; position: absolute; inset: 0;
    clip-path: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, transparent 42%);
    pointer-events: none;
  }
  .hex-face svg {
    width: 30px !important; height: 30px !important;
    color: var(--ink); position: relative; z-index: 1;
  }
  .hex-label {
    font-size: 10px; font-weight: 800; color: var(--ink);
    text-align: center; line-height: 1.1;
    max-width: 92px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; position: relative; z-index: 1;
    padding: 0 4px;
  }
  .hex-item:active .hex-face {
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)) drop-shadow(0 0 26px rgba(255,214,64,0.6));
  }

  /* ===== STATS ===== */
  .stats-section { flex-shrink: 0; padding: 8px 0; margin-top: 4px; }
  .stats-heading {
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.22em;
    color: var(--text-muted); text-transform: uppercase;
    text-align: center; margin: 0 0 14px;
  }
  .stats-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px; max-width: 640px; margin: 0 auto;
  }
  @media (max-width: 380px) { .stats-grid { grid-template-columns: 1fr; } }

  .stat-card {
    position: relative;
    padding: 18px 16px 16px;
    border-radius: 20px;
    background: linear-gradient(165deg, rgba(30, 55, 95, 0.85) 0%, rgba(12, 28, 51, 0.95) 100%);
    border: 1px solid rgba(255, 214, 64, 0.15);
    overflow: hidden;
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, border-color 0.3s, box-shadow 0.3s;
    isolation: isolate;
    cursor: pointer;
  }
  .stat-card.in-view { opacity: 1; transform: translateY(0); }
  .stat-card:nth-child(1) { transition-delay: 0s, 0s, 0s, 0s; }
  .stat-card:nth-child(2) { transition-delay: 0.08s, 0.08s, 0s, 0s; }
  .stat-card.in-view:hover {
    border-color: rgba(255, 214, 64, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6), 0 0 30px -8px rgba(255, 214, 64, 0.3);
  }
  .stat-card:active { transform: translateY(-1px) scale(0.995); }
  .stat-card::before {
    content: ''; position: absolute; top: -60px; right: -60px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(255, 214, 64, 0.18), transparent 65%);
    pointer-events: none; z-index: 0;
  }
  .stat-card::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 214, 64, 0.55), transparent);
    opacity: 0.6; z-index: 1;
  }
  .stat-decor {
    position: absolute; top: -24px; right: -24px;
    width: 130px; height: 150px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(165deg, rgba(255, 214, 64, 0.14), rgba(255, 214, 64, 0.01));
    pointer-events: none; z-index: 0;
  }
  .stat-icon {
    display: inline-flex; width: 40px; height: 46px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(165deg, #FFDE5A 0%, #F0BB10 100%);
    align-items: center; justify-content: center;
    margin-bottom: 12px;
    filter: drop-shadow(0 4px 10px rgba(255, 214, 64, 0.35));
    position: relative; z-index: 1;
  }
  .stat-icon svg { width: 20px !important; height: 20px !important; color: var(--ink); stroke-width: 2.5; }
  .stat-value {
    font-size: 34px; font-weight: 900; line-height: 1;
    letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
    background: linear-gradient(90deg, #FFFFFF 0%, #FFD640 50%, #FFFFFF 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 4px; position: relative; z-index: 1;
    animation: shimmerText 5s ease-in-out infinite;
  }
  @media (max-width: 380px) { .stat-value { font-size: 28px; } }
  @keyframes shimmerText {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }
  .stat-label {
    font-size: 11px; color: var(--text-muted); font-weight: 500;
    margin-bottom: 12px; line-height: 1.3;
    position: relative; z-index: 1;
  }
  .stat-pill-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; position: relative; z-index: 1;
  }
  .stat-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 999px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
  }
  .stat-pill-green {
    background: rgba(74, 222, 128, 0.12); color: var(--green);
    border: 1px solid rgba(74, 222, 128, 0.32);
  }
  .stat-pill-yellow {
    background: rgba(255, 214, 64, 0.12); color: var(--yellow);
    border: 1px solid rgba(255, 214, 64, 0.32);
  }
  .stat-arrow {
    width: 14px !important; height: 14px !important;
    color: var(--yellow); opacity: 0.5;
    transition: all 0.2s;
    flex-shrink: 0;
  }
  .stat-card:hover .stat-arrow {
    opacity: 1; transform: translate(2px, -2px);
  }
  .pulse-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; position: relative; flex-shrink: 0;
  }
  .pulse-dot::after {
    content: ''; position: absolute; inset: 0;
    border-radius: inherit; background: currentColor;
    animation: pulseRing 1.6s ease-out infinite;
  }
  @keyframes pulseRing {
    0%   { transform: scale(1);   opacity: 0.65; }
    100% { transform: scale(2.4); opacity: 0; }
  }

  /* ===== City Sheet ===== */
  .city-sheet-backdrop {
    position: fixed; inset: 0;
    background: rgba(4, 10, 20, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 200;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
  }
  .city-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
  .city-sheet {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, #0F2140 0%, #081426 100%);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-top: 1px solid rgba(255, 214, 64, 0.25);
    padding: 12px 20px calc(24px + env(safe-area-inset-bottom));
    z-index: 210;
    max-height: 80vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(.2,.9,.3,1);
    box-shadow: 0 -20px 60px rgba(0,0,0,0.6);
    scrollbar-width: none;
  }
  .city-sheet::-webkit-scrollbar { display: none; }
  .city-sheet.open { transform: translateY(0); }
  .city-sheet-handle {
    width: 40px; height: 4px;
    background: rgba(255, 214, 64, 0.3);
    border-radius: 999px;
    margin: 0 auto 16px;
  }
  .city-sheet-title {
    font-size: 18px; font-weight: 800;
    color: #fff; margin: 0 0 4px;
    letter-spacing: -0.01em;
  }
  .city-sheet-sub {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--yellow);
    margin: 0 0 20px;
  }
  .city-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .city-option {
    background: rgba(12, 28, 51, 0.7);
    border: 1.5px solid rgba(255, 214, 64, 0.15);
    color: var(--text);
    border-radius: 12px;
    padding: 14px;
    font-family: inherit; font-weight: 700; font-size: 13px;
    cursor: pointer; text-align: left;
    transition: all 0.2s;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
  }
  .city-option:hover {
    border-color: rgba(255, 214, 64, 0.4);
    background: rgba(12, 28, 51, 0.9);
  }
  .city-option.active {
    background: var(--yellow); color: var(--ink);
    border-color: var(--yellow);
    box-shadow: 0 4px 16px rgba(255, 214, 64, 0.35);
  }
  .city-option .check {
    width: 16px !important; height: 16px !important;
    opacity: 0; flex-shrink: 0;
    transition: opacity 0.2s;
  }
  .city-option.active .check { opacity: 1; }
  .city-option .popular {
    font-size: 9px; font-weight: 800;
    letter-spacing: 0.08em;
    padding: 3px 6px; border-radius: 4px;
    background: rgba(255, 214, 64, 0.15); color: var(--yellow);
    border: 1px solid rgba(255, 214, 64, 0.3);
    flex-shrink: 0;
  }
  .city-option.active .popular {
    background: rgba(10, 22, 40, 0.15); color: var(--ink);
    border-color: rgba(10, 22, 40, 0.2);
  }

  /* ===== Auth ===== */
  .auth-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    padding-top: calc(16px + env(safe-area-inset-top));
    flex-shrink: 0;
  }
  .auth-title { font-weight: 800; font-size: 15px; letter-spacing: 0.22em; color: #fff; margin: 0; }
  .auth-spacer { width: 40px; height: 40px; }
  .icon-btn-back {
    width: 40px; height: 40px; border-radius: 10px;
    background: transparent; border: 1px solid rgba(255, 214, 64, 0.25);
    color: var(--yellow); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
  }
  .icon-btn-back:hover { background: rgba(255, 214, 64, 0.1); }
  .icon-btn-back svg { width: 18px !important; height: 18px !important; }
  .auth-main {
    flex: 1; display: flex; flex-direction: column;
    padding: 16px 20px 32px;
    max-width: 440px; width: 100%; margin: 0 auto;
    overflow-y: auto; gap: 18px;
    -webkit-overflow-scrolling: touch;
  }
  .role-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .role-btn {
    background: transparent;
    border: 1.5px solid rgba(255, 214, 64, 0.3);
    color: var(--yellow);
    padding: 12px 8px; border-radius: 12px;
    font-family: inherit; font-weight: 800; font-size: 11px; letter-spacing: 0.1em;
    cursor: pointer; transition: all 0.2s;
  }
  .role-btn.active {
    background: var(--yellow); color: var(--ink);
    border-color: var(--yellow);
    box-shadow: 0 4px 16px rgba(255, 214, 64, 0.35);
  }
  .role-btn:active { transform: scale(0.97); }
  .auth-field { display: flex; flex-direction: column; gap: 6px; }
  .auth-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
    color: var(--text-muted); text-transform: uppercase;
    padding-left: 4px;
  }
  .email-input {
    width: 100%;
    background: rgba(12, 28, 51, 0.85);
    border: 1px solid rgba(255, 214, 64, 0.25);
    border-radius: 12px;
    padding: 13px 14px;
    font-family: inherit; font-size: 15px;
    color: var(--text); outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .email-input::placeholder { color: rgba(245, 247, 250, 0.35); }
  .email-input:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 214, 64, 0.12); }
  .consents { display: flex; flex-direction: column; gap: 8px; }
  .consent {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    background: rgba(12, 28, 51, 0.7);
    border: 1.5px solid rgba(255, 214, 64, 0.18);
    border-radius: 12px; cursor: pointer;
    transition: all 0.2s;
  }
  .consent:hover { border-color: rgba(255, 214, 64, 0.4); }
  .consent.checked {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(74, 222, 128, 0.6);
  }
  .consent-mark {
    flex-shrink: 0; width: 20px; height: 20px;
    border-radius: 6px;
    border: 1.5px solid rgba(255, 214, 64, 0.5);
    background: transparent; position: relative;
    transition: all 0.2s; margin-top: 1px;
  }
  .consent.checked .consent-mark { background: var(--green); border-color: var(--green); }
  .consent.checked .consent-mark::after {
    content: ''; position: absolute;
    left: 6px; top: 2px;
    width: 5px; height: 10px;
    border: solid var(--ink);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .consent-text { flex: 1; font-size: 13px; line-height: 1.4; color: var(--text); }
  .consent.checked .consent-text { color: #E8FFF2; }
  .consent-link {
    color: var(--yellow);
    text-decoration: underline;
    text-decoration-color: rgba(255, 214, 64, 0.5);
    text-underline-offset: 2px;
  }
  .consent.checked .consent-link {
    color: #B9F5CE;
    text-decoration-color: rgba(185, 245, 206, 0.5);
  }
  .consent-link:hover { text-decoration-color: currentColor; }
  .btn-next {
    background: var(--yellow); color: var(--ink);
    border: none; border-radius: 14px;
    padding: 15px;
    font-family: inherit; font-weight: 800; font-size: 14px; letter-spacing: 0.14em;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(255, 214, 64, 0.35), inset 0 1px 0 rgba(255,255,255,0.4);
    transition: all 0.15s; margin-top: 4px;
  }
  .btn-next:hover { transform: translateY(-1px); }
  .btn-next:active { transform: scale(0.98); }

  /* ===== Service / Search / Dashboard headers ===== */
  .service-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    padding-top: calc(14px + env(safe-area-inset-top));
    flex-shrink: 0;
    background: rgba(8, 20, 38, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 214, 64, 0.08);
    z-index: 10;
    gap: 8px;
  }
  .hex-btn {
    display: flex; align-items: center; gap: 6px;
    background: var(--yellow); color: var(--ink);
    border: none; border-radius: 12px;
    padding: 9px 12px;
    font-family: inherit; font-weight: 800; font-size: 11px; letter-spacing: 0.08em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(255, 214, 64, 0.3), inset 0 1px 0 rgba(255,255,255,0.3);
    transition: all 0.15s;
    min-width: 40px; justify-content: center;
  }
  .hex-btn svg { width: 16px !important; height: 16px !important; color: var(--ink); }
  .hex-btn:active { transform: scale(0.95); }
  .back-btn span { text-transform: uppercase; }
  .page-title {
    font-size: 13px; font-weight: 800;
    letter-spacing: 0.18em; color: var(--yellow);
  }

  .masters-main {
    flex: 1; overflow-y: auto; min-height: 0;
    padding: 16px 16px 32px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .masters-main::-webkit-scrollbar { display: none; }
  .service-title {
    font-size: 13px; letter-spacing: 0.18em; font-weight: 800;
    color: var(--yellow);
    margin: 4px 0 16px 4px;
    text-transform: uppercase;
  }
  .masters-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .master-row {
    display: flex; gap: 12px; align-items: center;
    padding: 12px;
    background: rgba(12, 28, 51, 0.7);
    border: 1px solid rgba(255, 214, 64, 0.12);
    border-radius: 14px; cursor: pointer;
    transition: all 0.2s;
  }
  .master-row:hover {
    border-color: rgba(255, 214, 64, 0.3);
    background: rgba(12, 28, 51, 0.9);
  }
  .master-avatar {
    width: 56px; height: 64px; flex-shrink: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(165deg, #FFDE5A 0%, #FFD640 35%, #F0BB10 100%);
    display: flex; align-items: center; justify-content: center;
    position: relative;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
  }
  .master-avatar::before {
    content: ''; position: absolute; inset: 0;
    clip-path: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, transparent 42%);
  }
  .master-avatar span {
    font-weight: 900; font-size: 17px; color: var(--ink);
    position: relative; z-index: 1;
  }
  .info-col { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .master-name-inline {
    font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.2;
  }
  .rating-row { display: flex; gap: 3px; align-items: center; }
  .rating-num {
    font-size: 12px; font-weight: 800;
    color: var(--text); margin-left: 4px;
    font-variant-numeric: tabular-nums;
  }
  .meta-row {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; font-size: 11px;
    color: var(--text-muted); margin-top: 2px;
  }
  .meta-item { display: inline-flex; align-items: center; gap: 3px; }
  .meta-item svg { width: 11px !important; height: 11px !important; }
  .rating-hex {
    display: inline-block;
    background: var(--hex-empty);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    position: relative;
  }
  .rating-hex-fill {
    position: absolute; inset: 0;
    background: var(--yellow);
    clip-path: inherit;
  }

  /* ===== Search ===== */
  .search-filters {
    display: flex; gap: 6px;
    overflow-x: auto;
    padding: 0 0 8px;
    margin-bottom: 12px;
    scrollbar-width: none;
  }
  .search-filters::-webkit-scrollbar { display: none; }
  .chip {
    flex-shrink: 0;
    padding: 8px 14px; border-radius: 999px;
    background: rgba(12, 28, 51, 0.7);
    border: 1.5px solid rgba(255, 214, 64, 0.18);
    color: var(--text);
    font-family: inherit; font-size: 12px; font-weight: 700;
    cursor: pointer; transition: all 0.2s;
    white-space: nowrap;
  }
  .chip:hover { border-color: rgba(255, 214, 64, 0.4); }
  .chip.active {
    background: var(--yellow); color: var(--ink);
    border-color: var(--yellow);
    box-shadow: 0 4px 14px rgba(255, 214, 64, 0.3);
  }
  .search-results-count {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--text-muted); margin: 4px 0 12px 4px;
  }

  /* ===== Dashboard ===== */
  .dash-tabs {
    display: flex; gap: 6px;
    margin-bottom: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .dash-tabs::-webkit-scrollbar { display: none; }
  .dash-tab {
    flex-shrink: 0;
    padding: 8px 14px; border-radius: 10px;
    background: transparent;
    border: 1.5px solid rgba(255, 214, 64, 0.15);
    color: var(--text-muted);
    font-family: inherit; font-size: 12px; font-weight: 700;
    cursor: pointer; transition: all 0.2s;
  }
  .dash-tab:hover { color: var(--text); border-color: rgba(255, 214, 64, 0.3); }
  .dash-tab.active {
    background: rgba(255, 214, 64, 0.12);
    color: var(--yellow);
    border-color: rgba(255, 214, 64, 0.5);
  }
  .dash-count {
    font-size: 11px; font-weight: 700;
    color: var(--text-muted); margin-left: 4px;
  }
  .order-card {
    padding: 14px;
    background: rgba(12, 28, 51, 0.7);
    border: 1px solid rgba(255, 214, 64, 0.12);
    border-radius: 14px;
    margin-bottom: 8px;
    transition: all 0.2s;
  }
  .order-card:hover {
    border-color: rgba(255, 214, 64, 0.28);
    background: rgba(12, 28, 51, 0.85);
  }
  .order-head {
    display: flex; justify-content: space-between;
    align-items: flex-start; gap: 10px;
    margin-bottom: 10px;
  }
  .order-service {
    font-size: 14px; font-weight: 700; color: var(--text);
    display: flex; align-items: center; gap: 6px;
  }
  .order-service svg { width: 14px !important; height: 14px !important; color: var(--yellow); }
  .order-master {
    font-size: 12px; color: var(--text-muted); margin-top: 3px;
  }
  .order-desc {
    font-size: 12px; color: var(--text);
    line-height: 1.4; margin-bottom: 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .order-meta {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap; font-size: 11px;
    color: var(--text-muted);
  }
  .order-meta-item { display: inline-flex; align-items: center; gap: 3px; }
  .order-meta-item svg { width: 11px !important; height: 11px !important; }
  .order-pill {
    padding: 4px 10px; border-radius: 999px;
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.05em; text-transform: uppercase;
    flex-shrink: 0;
  }
  .pill-completed {
    background: rgba(74, 222, 128, 0.12); color: var(--green);
    border: 1px solid rgba(74, 222, 128, 0.35);
  }
  .pill-inprogress {
    background: rgba(255, 214, 64, 0.12); color: var(--yellow);
    border: 1px solid rgba(255, 214, 64, 0.35);
  }
  .pill-pending {
    background: rgba(96, 165, 250, 0.12); color: #93C5FD;
    border: 1px solid rgba(96, 165, 250, 0.35);
  }
  .pill-cancelled {
    background: rgba(148, 163, 184, 0.15); color: #94A3B8;
    border: 1px solid rgba(148, 163, 184, 0.3);
  }
  .empty-state {
    text-align: center; padding: 40px 20px;
    color: var(--text-muted);
  }
  .empty-icon {
    width: 48px; height: 55px; margin: 0 auto 12px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: rgba(26, 50, 82, 0.7);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 214, 64, 0.15);
  }
  .empty-icon svg { width: 22px !important; height: 22px !important; color: var(--yellow); opacity: 0.6; }
  .empty-title { color: var(--text); font-size: 14px; font-weight: 700; margin-bottom: 4px; }
  .empty-sub { font-size: 12px; }

  /* Toast */
  .toast {
    position: fixed; bottom: 32px; left: 50%;
    transform: translate(-50%, 20px);
    background: rgba(10, 22, 40, 0.95);
    color: var(--yellow);
    padding: 12px 22px; border-radius: 999px;
    font-size: 13px; font-weight: 600;
    border: 1px solid rgba(255, 214, 64, 0.35);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 30px rgba(255,214,64,0.15);
    z-index: 1000; opacity: 0; pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    white-space: nowrap; font-family: inherit;
  }
  .toast.show { opacity: 1; transform: translate(-50%, 0); }

  @media (max-width: 360px) {
    .tagline { font-size: 24px; }
    .intro-title { font-size: 18px; }
  }