@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;700;900&family=Geologica:wght@300;400;500;600&display=swap');

/* ══════════════════════════════════════════
   TOKENS
══════════════════════════════════════════ */
:root {
    /* Telegram theme bridge */
    --tg-bg:           var(--tg-theme-bg-color,            #0a0a0f);
    --tg-secondary-bg: var(--tg-theme-secondary-bg-color,  #12121a);
    --tg-text:         var(--tg-theme-text-color,          #f0f0ff);
    --tg-hint:         var(--tg-theme-hint-color,          #6060a0);
    --tg-accent:       var(--tg-theme-button-color,        #6c5ce7);
    --tg-accent-text:  var(--tg-theme-button-text-color,   #ffffff);
    --tg-link:         var(--tg-theme-link-color,          #a29bfe);

    /* Design tokens */
    --glass-bg:       rgba(255, 255, 255, 0.055);
    --glass-border:   rgba(255, 255, 255, 0.10);
    --glass-blur:     blur(24px) saturate(160%);
    --glow:           rgba(108, 92, 231, 0.35);

    --radius-xl: 22px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;

    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);

    --font-display: 'Unbounded', sans-serif;
    --font-body:    'Geologica', sans-serif;
}

/* ══════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box; margin: 0; padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--tg-bg);
    color: var(--tg-text);
    min-height: 100vh;
    overscroll-behavior: none;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow-x: hidden;
}

/* Ambient background glow */
body::before {
    content: '';
    position: fixed;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(ellipse, rgba(108,92,231,0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ══════════════════════════════════════════
   APP SHELL
══════════════════════════════════════════ */
.app {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 0 110px;
    position: relative;
    z-index: 1;
}

/* ══════════════════════════════════════════
   HEADER & BACK BUTTON
══════════════════════════════════════════ */
.header {
    padding: 20px 20px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.back-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--tg-text);
    font-size: 20px;
    transition: transform 0.2s var(--spring), background 0.2s;
    flex-shrink: 0;
}
.back-btn:active { transform: scale(0.88); }
.back-btn.hidden { visibility: hidden; pointer-events: none; }

/* ══════════════════════════════════════════
   PROGRESS BAR
══════════════════════════════════════════ */
.progress-wrap { padding: 20px 20px 0; }

.progress-label {
    display: flex; justify-content: space-between;
    font-size: 11px;
    color: var(--tg-hint);
    margin-bottom: 10px;
    font-family: var(--font-display);
    letter-spacing: 0.03em;
}

.progress-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 2px;
    overflow: visible;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--tg-accent), #a29bfe);
    border-radius: 2px;
    transition: width 0.55s var(--smooth);
    position: relative;
}
.progress-fill::after {
    content: '';
    position: absolute;
    right: -1px; top: 50%;
    transform: translateY(-50%);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #a29bfe;
    box-shadow: 0 0 10px 3px rgba(162,155,254,0.5);
}

/* ══════════════════════════════════════════
   STEP TITLE
══════════════════════════════════════════ */
.step-title {
    padding: 28px 20px 10px;
}
.step-title h1 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
    line-height: 1.25;
    background: linear-gradient(135deg, var(--tg-text) 60%, var(--tg-link));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.step-title p {
    font-size: 14px;
    color: var(--tg-hint);
    line-height: 1.55;
    font-weight: 300;
}

/* ══════════════════════════════════════════
   GLASS SECTION
══════════════════════════════════════════ */
.section {
    margin: 14px 16px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
    transition: box-shadow 0.3s;
}
.section:hover {
    box-shadow: 0 8px 40px rgba(108,92,231,0.1), inset 0 1px 0 rgba(255,255,255,0.08);
}

.section-label {
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tg-hint);
    padding: 16px 18px 8px;
}

/* ══════════════════════════════════════════
   FIELD ROW
══════════════════════════════════════════ */
.field {
    display: flex;
    align-items: center;
    padding: 0 18px;
    border-top: 1px solid rgba(255,255,255,0.05);
    min-height: 54px;
    position: relative;
    transition: background 0.2s;
}
.field:first-of-type { border-top: none; }
.field:focus-within {
    background: rgba(108,92,231,0.06);
}

.field label {
    font-size: 14px;
    font-weight: 500;
    color: var(--tg-text);
    flex-shrink: 0;
    width: 128px;
}

.field input, .field select {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 14px;
    color: var(--tg-text);
    font-family: var(--font-body);
    text-align: right;
    min-width: 0;
    padding: 14px 0;
    font-weight: 400;
}
.field select option { background: #1a1a2e; }
.field input::placeholder { color: var(--tg-hint); opacity: 0.7; }
.field input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.6) hue-rotate(220deg);
    cursor: pointer;
}

/* Unified XLORA calendar. The native date control remains the submitted value,
   while this layer keeps the visual behavior identical across browsers. */
.xlora-date-picker {
    position: relative;
    flex: 1;
    min-width: 0;
}
.xlora-date-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.xlora-date-trigger {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 8px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--tg-hint);
    font: 500 14px var(--font-body);
    text-align: right;
    cursor: pointer;
}
.xlora-date-trigger.has-value { color: var(--tg-text); }
.xlora-date-trigger:disabled { cursor: not-allowed; opacity: .45; }
.xlora-date-trigger:focus-visible { box-shadow:none!important; }
.xlora-date-trigger:focus-visible .xlora-date-icon { border-color:rgba(229,130,255,.72); box-shadow: 0 0 0 3px rgba(213,65,255,.18); }
.xlora-date-trigger.has-blocked-date { color:#ed8ea1; }
.xlora-date-trigger.has-priority-date { color:#b9782c; }
.xlora-date-trigger.has-limited-date { color:#f5bd78; }
.xlora-date-icon {
    display:grid;
    place-items:center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(218,79,255,.38);
    border-radius: 12px;
    background: linear-gradient(145deg,rgba(215,52,255,.16),rgba(132,45,181,.08));
}
.xlora-date-icon svg { width:20px; height:20px; fill:none; stroke:#ecc5f7; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.xlora-date-notice { display:block; margin:5px 0 7px; padding:9px 11px; border:1px solid rgba(239,164,83,.28); border-radius:13px; background:rgba(132,78,21,.14); color:#efbd82; font-size:9px; line-height:1.45; text-align:left; }
.xlora-date-notice[hidden] { display:none; }
.xlora-date-popover {
    position: fixed;
    z-index: 1100;
    width: min(316px, calc(100vw - 40px));
    padding: 15px;
    border: 1px solid rgba(222,74,255,.4);
    border-radius: 24px;
    background: linear-gradient(160deg,rgba(35,22,42,.985),rgba(15,11,18,.99));
    box-shadow: 0 24px 64px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-7px) scale(.98);
    transform-origin: top center;
    transition: opacity .16s ease,transform .16s ease,visibility .16s;
}
.xlora-date-popover.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.section.has-open-date,.profile-card.has-open-date { position: relative; z-index: 80; overflow: visible !important; }
.xlora-date-heading { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 8px; }
.xlora-date-period { display:grid; grid-template-columns:minmax(0,1fr) 88px; gap:6px; min-width:0; }
.xlora-date-dropdown { position:relative; min-width:0; }
.xlora-date-dropdown.is-open { z-index:155; }
.xlora-date-dropdown-trigger {
    position:relative;
    width:100%;
    height:38px;
    padding:0 27px 0 10px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:13px;
    outline:0;
    background:rgba(255,255,255,.04);
    color:#fff;
    font:650 11px var(--font-body);
    text-align:center;
    cursor:pointer;
}
.xlora-date-dropdown-trigger::after { content:''; position:absolute; top:50%; right:12px; width:7px; height:7px; border-right:1.5px solid #d5a6df; border-bottom:1.5px solid #d5a6df; transform:translateY(-70%) rotate(45deg); transition:transform .16s; }
.xlora-date-dropdown.is-open .xlora-date-dropdown-trigger { border-color:rgba(218,79,255,.65); background:rgba(205,61,242,.12); box-shadow:0 0 0 3px rgba(213,65,255,.1)!important; }
.xlora-date-dropdown.is-open .xlora-date-dropdown-trigger::after { transform:translateY(-25%) rotate(225deg); }
.xlora-date-dropdown-trigger:focus-visible { border-color:rgba(218,79,255,.72); box-shadow:0 0 0 3px rgba(213,65,255,.12)!important; }
.xlora-date-dropdown-menu { position:absolute; z-index:160; top:calc(100% + 7px); right:0; left:0; display:none; max-height:218px; padding:6px; overflow:auto; overscroll-behavior:contain; border:1px solid rgba(218,79,255,.38); border-radius:16px; background:rgba(24,17,29,.985); box-shadow:0 20px 46px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.05); scrollbar-width:thin; scrollbar-color:rgba(215,76,245,.45) transparent; }
.xlora-date-dropdown.is-open .xlora-date-dropdown-menu { display:grid; gap:3px; }
.xlora-date-dropdown-option { width:100%; min-height:35px; padding:8px 9px; border:1px solid transparent; border-radius:11px; outline:0; background:transparent; color:rgba(255,255,255,.72); font:550 11px var(--font-body); text-align:center; cursor:pointer; }
.xlora-date-dropdown-option:hover,.xlora-date-dropdown-option:focus-visible { border-color:rgba(220,96,255,.3); background:rgba(206,64,241,.12); color:#fff; box-shadow:none!important; }
.xlora-date-dropdown-option[aria-selected="true"] { border-color:rgba(220,87,255,.48); background:linear-gradient(135deg,rgba(199,45,236,.34),rgba(121,42,151,.19)); color:#f5d4ff; }
.xlora-date-month .xlora-date-dropdown-trigger { font-size:10px; }
.xlora-date-year .xlora-date-dropdown-trigger,.xlora-date-year .xlora-date-dropdown-option { font-variant-numeric:tabular-nums; }
.xlora-date-nav {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 13px;
    background: rgba(255,255,255,.04);
    color: #f7eaff;
    font: 500 23px/1 var(--font-body);
    cursor: pointer;
}
.xlora-date-nav:hover:not(:disabled) { border-color: rgba(218,79,255,.5); background: rgba(218,79,255,.12); }
.xlora-date-nav:disabled { opacity: .25; cursor: not-allowed; }
.xlora-date-weekdays,.xlora-date-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.xlora-date-weekdays { margin: 15px 0 7px; color: #7c7181; font-size: 9px; font-weight: 700; text-align: center; text-transform: uppercase; }
.xlora-date-days > span { min-height: 35px; }
.xlora-date-day {
    display: flex;
    flex-direction: column;
    place-items: center;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 48px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: #ddd5e0;
    font: 500 11px var(--font-body);
    cursor: pointer;
}
.xlora-date-day strong { font:650 12px/1 var(--font-body); font-variant-numeric:tabular-nums; }
.xlora-date-day-label { margin-top:4px; font:600 7px/1 var(--font-body); letter-spacing:-.01em; white-space:nowrap; }
.xlora-date-day:hover:not(:disabled) { border-color: rgba(219,74,255,.38); background: rgba(213,57,255,.11); }
.xlora-date-day.is-today { border-color: rgba(225,127,255,.32); color: #efbcff; }
.xlora-date-day.is-release-unavailable:not(.is-selected) { border-color:rgba(255,102,126,.16); background:rgba(151,43,62,.19); color:#e98a9c; }
.xlora-date-day.is-transfer-date:not(.is-selected) { border-color:rgba(184,177,190,.17); background:rgba(126,119,132,.14); color:#aaa3ae; }
.xlora-date-day.is-priority:not(.is-selected) { border-color:rgba(240,166,85,.24); background:rgba(151,91,34,.19); color:#efbd82; }
.xlora-date-day.is-promo-limited:not(.is-selected) { border-color:rgba(240,166,85,.18); background:rgba(151,91,34,.17); color:#efbd82; }
.xlora-date-day.is-promo-eligible:not(.is-selected) { border-color:rgba(88,207,148,.13); background:rgba(50,145,98,.15); color:#9dddb8; }
.xlora-date-day:disabled { cursor:not-allowed; opacity:.58; }
.xlora-date-day.is-selected { border-color: #df58ff; background: linear-gradient(135deg,#d72eff,#8a24bd); color: #fff; box-shadow: 0 7px 18px rgba(202,41,239,.28); opacity:1; }
.xlora-date-day.is-selected.is-release-unavailable { border-color:#e56f87; background:linear-gradient(135deg,#a83250,#6f2038); color:#ffe7ec; box-shadow:0 0 0 2px rgba(229,111,135,.2),0 7px 18px rgba(91,21,45,.3); }
.xlora-date-day.is-selected.is-transfer-date { border-color:#aaa2af; background:linear-gradient(135deg,#716a76,#4b4650); color:#fff; box-shadow:0 0 0 2px rgba(170,162,175,.16),0 7px 18px rgba(26,23,29,.3); }
.xlora-date-day.is-selected.is-priority { border-color:#f2b45e; background:#b87628; color:#fff; box-shadow:0 7px 18px rgba(151,91,34,.26); }
.xlora-date-day.is-selected.is-promo-limited { border-color:#f2b45e; box-shadow:0 0 0 2px rgba(240,166,85,.2),0 7px 18px rgba(202,41,239,.24); }
.xlora-date-legend { display:flex; flex-wrap:wrap; gap:7px 12px; margin-top:12px; padding:10px 11px; border:1px solid rgba(255,255,255,.065); border-radius:14px; background:rgba(255,255,255,.025); color:#a89daa; font-size:8px; }
.xlora-date-legend[hidden] { display:none; }
.xlora-date-legend span[hidden] { display:none; }
.xlora-date-legend span { display:inline-flex; align-items:center; gap:5px; }
.xlora-date-legend b { font:inherit; font-weight:500; }
.xlora-date-legend i { width:7px; height:7px; border-radius:50%; }
.xlora-date-legend i.is-unavailable { background:#d7657c; box-shadow:0 0 0 3px rgba(215,101,124,.1); }
.xlora-date-legend i.is-transfer { background:#9f98a5; box-shadow:0 0 0 3px rgba(159,152,165,.1); }
.xlora-date-legend i.is-priority { background:#dfa357; box-shadow:0 0 0 3px rgba(223,163,87,.1); }
.xlora-date-legend i.is-limited { background:#dfa357; box-shadow:0 0 0 3px rgba(223,163,87,.1); }
.xlora-date-legend i.is-eligible { background:#61bf88; box-shadow:0 0 0 3px rgba(97,191,136,.1); }
.xlora-date-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07); }
.xlora-date-footer button { padding: 8px 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.035); color: #cfa8d8; font: 600 10px var(--font-body); cursor: pointer; }
.xlora-date-footer button:hover:not(:disabled) { border-color: rgba(217,75,255,.42); color: #fff; }
.xlora-date-footer button:disabled { opacity: .3; cursor: not-allowed; }
.profile-edit-row .xlora-date-picker { width: 100%; }
.profile-edit-row:not(.is-editing) .xlora-date-picker { display: none; }
.profile-edit-row.is-editing .xlora-date-trigger { min-height: 45px; padding: 5px 7px 5px 14px; border: 1px solid rgba(255,255,255,.11); border-radius: 15px; background: #151219; justify-content: space-between; text-align: left; }
@media(max-width:360px){.xlora-date-popover{padding:12px}.xlora-date-heading{grid-template-columns:35px 1fr 35px;gap:6px}.xlora-date-nav{width:35px;height:35px}.xlora-date-period{grid-template-columns:minmax(0,1fr) 78px;gap:4px}.xlora-date-dropdown-trigger{height:35px;padding-left:6px;padding-right:19px;font-size:10px}.xlora-date-dropdown-trigger::after{right:8px}}

.field input[readonly] { opacity: 0.75; cursor: default; }

.field.error { background: rgba(255, 90, 90, 0.05); }
.field.error input { color: #ff7675; }

.field-error {
    font-size: 11px;
    color: #ff7675;
    padding: 4px 18px 10px;
    display: none;
    font-weight: 400;
}
.field-error.visible { display: block; }
.registration-submit-error { display:none; max-width:448px; margin:14px auto 100px; padding:13px 16px; border:1px solid rgba(255,102,135,.38); border-radius:18px; background:rgba(100,23,46,.3); color:#ffb1c2; font-size:12px; line-height:1.5; box-shadow:0 16px 36px rgba(0,0,0,.2); }
.registration-submit-error.visible { display:block; }
@media(max-width:520px){.registration-submit-error{margin-left:16px;margin-right:16px}}

/* Eye button */
.eye-btn {
    background: none; border: none;
    color: var(--tg-hint);
    cursor: pointer;
    padding: 6px;
    font-size: 17px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.2s, transform 0.15s var(--spring);
}
.eye-btn:active { transform: scale(0.85); }

/* ══════════════════════════════════════════
   SCREENS (multi-step)
══════════════════════════════════════════ */
.screen { display: none; }
.screen.active { display: block; animation: fadeIn 0.32s var(--smooth); }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════
   BOTTOM BAR & MAIN BUTTON
══════════════════════════════════════════ */
.bottom-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    padding: 12px 16px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    background: rgba(10, 10, 15, 0.80);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-top: 1px solid rgba(255,255,255,0.07);
    z-index: 100;
    max-width: 480px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.btn-main {
    width: 100%;
    height: 54px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--tg-accent) 0%, #8b80f9 100%);
    color: var(--tg-accent-text);
    border: none;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: transform 0.18s var(--spring), opacity 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(108,92,231,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
    position: relative;
    overflow: hidden;
}
.btn-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 60%);
}
.btn-main:active {
    transform: scale(0.97);
    box-shadow: 0 2px 10px rgba(108,92,231,0.3);
}
.btn-main:disabled { opacity: 0.38; pointer-events: none; }

/* ══════════════════════════════════════════
   SUCCESS SCREEN
══════════════════════════════════════════ */
.success-screen {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 40px 20px;
    text-align: center;
}
.success-screen.active { display: flex; animation: fadeIn 0.5s var(--smooth); }

.success-icon {
    width: 90px; height: 90px;
    border-radius: 50%;
    background: rgba(0, 210, 140, 0.12);
    border: 1px solid rgba(0, 210, 140, 0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 44px;
    margin: 0 auto 28px;
    box-shadow: 0 0 40px rgba(0, 210, 140, 0.2);
    animation: pop 0.55s var(--spring);
}
@keyframes pop {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.success-screen h2 {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 700;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #fff 60%, #a29bfe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.success-screen p {
    font-size: 15px; color: var(--tg-hint); line-height: 1.65;
}

/* ══════════════════════════════════════════
   STATUS BADGE (documents page)
══════════════════════════════════════════ */
.status-badge {
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.status-wait {
    background: rgba(255, 165, 0, 0.1);
    color: #f9a825;
    border: 1px solid rgba(249,168,37,0.35);
}
.status-ok {
    background: rgba(0, 210, 140, 0.1);
    color: #00d28c;
    border: 1px solid rgba(0,210,140,0.35);
}

/* ══════════════════════════════════════════
   SPINNER
══════════════════════════════════════════ */
.spinner {
    width: 20px; height: 20px;
    border: 2px solid rgba(255,255,255,0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.consent-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ══════════════════════════════════════════
   NOTE / HINT TEXT
══════════════════════════════════════════ */
.note {
    margin: 4px 16px 12px;
    font-size: 12px;
    color: var(--tg-hint);
    line-height: 1.6;
    padding: 0 4px;
}

.consent-wrap {
    margin: 8px 20px 0;
    padding: 16px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--tg-secondary-bg);
    transition: border-color .15s, background .15s;
}
.consent-wrap.active { border-color: var(--tg-accent); background: #1b211c; }
.consent-label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.consent-box { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border: 1px solid #4c554e; border-radius: 6px; background: #101311; transition: background .15s, border-color .15s; }
.consent-box.checked { border-color: var(--tg-accent); background: var(--tg-accent); }
.consent-check-icon { width: 13px; height: 13px; opacity: 0; transition: opacity .15s; }
.consent-box.checked .consent-check-icon { opacity: 1; }
.consent-text { color: var(--tg-hint); font-size: 12px; line-height: 1.55; }
.consent-link { color: var(--tg-link); text-decoration: underline; text-underline-offset: 3px; }
.registration-submit { margin-bottom: 32px; }
.registration-submit-error { margin-bottom: 0; }

/* 2026 product design system */
:root {
    --tg-bg: var(--tg-theme-bg-color, #101311);
    --tg-secondary-bg: var(--tg-theme-secondary-bg-color, #171b18);
    --tg-text: var(--tg-theme-text-color, #f2f4f1);
    --tg-hint: var(--tg-theme-hint-color, #969e98);
    --tg-accent: var(--tg-theme-button-color, #78b88b);
    --tg-accent-text: #0d160f;
    --tg-link: #9ac7a6;
    --glass-bg: #171b18;
    --glass-border: #2a302b;
    --glass-blur: none;
    --glow: transparent;
    --radius-xl: 14px;
    --radius-lg: 10px;
    --radius-md: 8px;
    --radius-sm: 6px;
    --font-display: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --focus-ring: 0 0 0 3px rgba(120,184,139,.22);
}
html { scroll-behavior: auto; }
body { background: var(--tg-bg); line-height: 1.45; }
body::before { display: none; }
.app { max-width: 560px; padding-bottom: 104px; }
.header { padding: 18px 20px 0; }
.back-btn { width: 38px; height: 38px; border-radius: 8px; background: transparent; backdrop-filter: none; border-color: var(--glass-border); font-size: 18px; }
.back-btn:hover { background: #1c211d; }
.step-title { padding: 30px 20px 14px; }
.step-title h1 { margin-bottom: 7px; background: none; color: var(--tg-text); -webkit-text-fill-color: currentColor; font-size: 24px; font-weight: 650; letter-spacing: -.025em; }
.step-title p { max-width: 440px; color: var(--tg-hint); font-size: 13px; font-weight: 400; }
.progress-wrap { padding: 22px 20px 0; }
.progress-label { margin-bottom: 8px; font-family: var(--font-body); font-weight: 500; }
.progress-bar { height: 2px; background: #2a302b; }
.progress-fill { background: var(--tg-accent); transition: width .2s ease; }
.progress-fill::after { display: none; }
.section { margin: 12px 20px 24px; background: var(--tg-secondary-bg); backdrop-filter: none; border-color: var(--glass-border); border-radius: var(--radius-lg); box-shadow: none; }
.section:hover { box-shadow: none; }
.section-label { padding: 14px 20px 6px; font-family: var(--font-body); font-size: 10px; color: var(--tg-hint); }
.field { min-height: 62px; padding: 7px 16px; border-color: #242a25; transition: background .12s, border-color .12s; }
.field:focus-within { background: #1b211c; box-shadow:none; }
.field label { width: 138px; font-size: 13px; font-weight: 520; }
.field input, .field select { font-size: 13px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, button:focus-visible, a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.field.error { background: rgba(218,98,98,.07); }
.btn-main { width: calc(100% - 40px); height: 48px; margin: 18px 20px 0; border-radius: 8px; background: var(--tg-accent); color: var(--tg-accent-text); box-shadow: none; font-family: var(--font-body); font-size: 13px; font-weight: 650; transition: background .12s, transform .1s; }
.btn-main::before { display: none; }
.btn-main:hover { background: #8bc69b; }
.btn-main:active { transform: translateY(1px); box-shadow: none; }
.status-badge { border: 0; border-radius: 4px; font-family: var(--font-body); font-size: 10px; }
.status-wait { background: #312b1b; color: #e5bd65; }
.status-ok { background: #183224; color: #82c99a; }
.success-icon { width: 64px; height: 64px; box-shadow: none; animation: none; }
.success-screen h2 { background: none; color: var(--tg-text); -webkit-text-fill-color: currentColor; font-size: 22px; }
.spinner { animation-duration: 1s; }
.ui-icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.eye-btn { color: var(--tg-hint); font-size: 0; }
.eye-btn .ui-icon { width: 19px; height: 19px; }
.bottom-bar .btn-main { width: 100%; margin: 0; }
@media (max-width: 520px) {
    .step-title { padding-top: 24px; }
    .step-title h1 { font-size: 21px; }
    .section { margin-left: 12px; margin-right: 12px; }
    .btn-main { width: calc(100% - 24px); margin-left: 12px; margin-right: 12px; }
    .field { align-items: flex-start; flex-direction: column; padding: 11px 14px; }
    .field label { width: 100%; margin-bottom: 2px; color: var(--tg-hint); font-size: 11px; }
    .field input, .field select { width: 100%; padding: 7px 0; text-align: left; }
}

/* Shared help popovers used by registration, profile and release forms. */
.info-tooltip { display:inline-grid; place-items:center; flex:0 0 22px; width:22px; height:22px; padding:0; border:1px solid rgba(218,91,255,.56); border-radius:50%; outline:0; background:linear-gradient(145deg,rgba(195,50,231,.17),rgba(100,34,126,.09)); color:#ebbcfa; font:750 12px/1 var(--font-body); cursor:help; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); transition:border-color .16s,background .16s,box-shadow .16s,transform .16s; }
.info-tooltip:hover,.info-tooltip:focus-visible,.info-tooltip.is-open { border-color:rgba(232,133,255,.8); background:rgba(207,65,241,.2); box-shadow:0 0 0 3px rgba(207,65,241,.11)!important; transform:translateY(-1px); }
.info-tooltip-popup { position:absolute; z-index:250; left:50%; bottom:calc(100% + 11px); width:min(330px,82vw); padding:14px 15px; border:1px solid rgba(221,93,255,.42); border-radius:18px; background:linear-gradient(145deg,rgba(37,24,43,.99),rgba(18,14,22,.99)); color:#f6edf8; font:500 11px/1.55 var(--font-body); text-align:left; box-shadow:0 22px 55px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.055); opacity:0; visibility:hidden; transform:translate(-50%,7px) scale(.98); transform-origin:bottom center; transition:opacity .16s,visibility .16s,transform .16s; pointer-events:none; }
.info-tooltip.is-open + .info-tooltip-popup,.info-tooltip:focus-visible + .info-tooltip-popup { opacity:1; visibility:visible; transform:translate(-50%,0) scale(1); }
@media(hover:hover){.info-tooltip:hover + .info-tooltip-popup{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}}
.field-help-heading { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 22px; align-items:center; gap:9px; width:138px; flex:0 0 138px; }
.field-help-heading > label { width:auto!important; min-width:0; margin:0!important; }
.field-help-heading .info-tooltip { justify-self:end; }
.field-help-heading .info-tooltip-popup { left:0; transform:translateY(7px) scale(.98); transform-origin:bottom left; }
.field-help-heading .info-tooltip.is-open + .info-tooltip-popup,.field-help-heading .info-tooltip:focus-visible + .info-tooltip-popup { transform:translateY(0) scale(1); }
@media(hover:hover){.field-help-heading .info-tooltip:hover + .info-tooltip-popup{transform:translateY(0) scale(1)}}
.field-tooltip-section,.profile-edit-card.has-field-tooltip { overflow:visible!important; }
.profile-edit-row .field-help-heading { width:100%; min-width:0; flex-basis:auto; }
.release-date-field:focus-within { background:transparent!important; box-shadow:none!important; }
@media(max-width:520px){.field-help-heading{width:100%;flex-basis:auto}.info-tooltip-popup{width:min(310px,calc(100vw - 48px))}}

/* Cloud Music palette for release helpers and the date picker. */
.artist-shell .info-tooltip {
    border-color:rgba(22,131,148,.5);
    background:rgba(22,131,148,.1);
    color:#087184;
}
.artist-shell .info-tooltip:hover,
.artist-shell .info-tooltip:focus-visible,
.artist-shell .info-tooltip.is-open {
    border-color:rgba(22,131,148,.8);
    background:rgba(22,131,148,.18);
    box-shadow:0 0 0 3px rgba(22,131,148,.11)!important;
}
.artist-shell .info-tooltip-popup {
    border-color:rgba(159,210,214,.42);
    background:linear-gradient(145deg,rgba(16,46,53,.99),rgba(9,31,36,.99));
    color:#f7fbfb;
    box-shadow:0 22px 55px rgba(7,68,82,.32),inset 0 1px 0 rgba(255,255,255,.08);
}
.artist-shell .xlora-date-trigger:focus-visible .xlora-date-icon {
    border-color:rgba(22,131,148,.72);
    box-shadow:0 0 0 3px rgba(22,131,148,.18);
}
.artist-shell .xlora-date-icon { border-color:rgba(22,131,148,.38); background:rgba(22,131,148,.08); }
.artist-shell .xlora-date-icon svg { stroke:#087184; }
.artist-shell .xlora-date-popover {
    border-color:rgba(159,210,214,.4);
    background:linear-gradient(145deg,rgba(16,46,53,.99),rgba(9,31,36,.99));
    box-shadow:0 24px 64px rgba(7,68,82,.34),inset 0 1px 0 rgba(255,255,255,.08);
}
.artist-shell .xlora-date-dropdown-trigger { color:#f7fbfb; }
.artist-shell .xlora-date-dropdown-trigger::after { border-color:#9fd2d6; }
.artist-shell .xlora-date-dropdown.is-open .xlora-date-dropdown-trigger,
.artist-shell .xlora-date-dropdown-trigger:focus-visible {
    border-color:rgba(159,210,214,.65);
    background:rgba(22,131,148,.18);
    box-shadow:0 0 0 3px rgba(22,131,148,.14)!important;
}
.artist-shell .xlora-date-dropdown-menu {
    border-color:rgba(159,210,214,.38);
    background:rgba(9,31,36,.985);
    scrollbar-color:rgba(159,210,214,.45) transparent;
}
.artist-shell .xlora-date-dropdown-option:hover,
.artist-shell .xlora-date-dropdown-option:focus-visible {
    border-color:rgba(159,210,214,.3);
    background:rgba(22,131,148,.18);
}
.artist-shell .xlora-date-dropdown-option[aria-selected="true"],
.artist-shell .xlora-date-day.is-selected {
    border-color:#45aab7;
    background:linear-gradient(135deg,#2495a5,#087184);
    color:#fff;
    box-shadow:0 7px 18px rgba(8,113,132,.28);
}
.artist-shell .xlora-date-nav:hover:not(:disabled),
.artist-shell .xlora-date-day:hover:not(:disabled) {
    border-color:rgba(159,210,214,.42);
    background:rgba(22,131,148,.16);
}
.artist-shell .xlora-date-day.is-today { border-color:rgba(159,210,214,.4); color:#9fd2d6; }
.artist-shell .xlora-date-footer button { color:#9fd2d6; }
.artist-shell .xlora-date-footer button:hover:not(:disabled) { border-color:rgba(159,210,214,.42); color:#fff; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}