:root {
    --tc-primary: #6d3ce7;
    --tc-primary-dark: #4d20bc;
    --tc-ink: #172033;
    --tc-muted: #66728a;
    --tc-green: #10a66a;
    --tc-red: #e54855;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: #f4f1ff; }

.tc-body {
    min-height: 100vh;
    margin: 0;
    color: var(--tc-ink);
    background:
        radial-gradient(circle at 12% 2%, rgba(140, 94, 255, .28), transparent 24rem),
        radial-gradient(circle at 92% 90%, rgba(76, 207, 158, .18), transparent 24rem),
        linear-gradient(160deg, #fdfcff 0%, #f1edff 54%, #f7fbff 100%);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

.tc-shell {
    width: min(100%, 480px);
    min-height: 100vh;
    margin: 0 auto;
    padding: max(18px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
}

.tc-brand { display: flex; align-items: center; gap: 11px; padding: 2px 4px 22px; }
.tc-brand__mark {
    width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center;
    color: #fff; font-size: 19px; background: linear-gradient(145deg, #8455f1, #5523c9);
    box-shadow: 0 12px 26px rgba(86, 35, 201, .26);
}
.tc-brand span:last-child { display: grid; gap: 1px; }
.tc-brand small { color: var(--tc-muted); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.tc-brand strong { font-size: 15px; font-weight: 900; }

.tc-card {
    flex: 1;
    min-height: 610px;
    padding: 30px 24px 25px;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 30px;
    text-align: center;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 24px 70px rgba(49, 32, 99, .14);
    backdrop-filter: blur(18px);
}
.tc-table-badge, .tc-error-icon {
    width: 50px; height: 50px; margin: 0 auto 13px; border-radius: 17px; display: grid; place-items: center;
    color: var(--tc-primary); background: #f0eaff; font-size: 21px;
}
.tc-eyebrow { margin: 0 0 5px; color: var(--tc-primary); font-size: 11px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.tc-card h1 { margin: 0; font-size: clamp(32px, 10vw, 44px); line-height: 1.05; font-weight: 950; letter-spacing: -.045em; }
.tc-lead { max-width: 340px; margin: 12px auto 4px; color: var(--tc-muted); font-size: 15px; line-height: 1.5; }

.tc-visual { position: relative; width: 170px; height: 170px; margin: 14px auto 8px; display: grid; place-items: center; }
.tc-ring { position: absolute; border: 2px solid rgba(109, 60, 231, .14); border-radius: 50%; }
.tc-ring--one { width: 126px; height: 126px; }
.tc-ring--two { width: 166px; height: 166px; }
.tc-bell {
    position: relative; z-index: 2; width: 92px; height: 92px; border-radius: 30px; display: grid; place-items: center;
    color: #fff; font-size: 36px; background: linear-gradient(145deg, #8553f1, #5622cb);
    box-shadow: 0 18px 42px rgba(96, 42, 211, .35);
}
.tc-card.is-waiting .tc-bell i { animation: tc-bell .9s ease-in-out infinite; transform-origin: 50% 15%; }
.tc-card.is-waiting .tc-ring { animation: tc-pulse 1.8s ease-out infinite; }
.tc-card.is-waiting .tc-ring--two { animation-delay: .45s; }
.tc-card.is-accepted .tc-bell { background: linear-gradient(145deg, #24c785, #0b9560); box-shadow: 0 18px 42px rgba(15, 166, 105, .32); }
.tc-card.is-accepted .tc-bell i::before { content: "\f00c"; }

.tc-status { min-height: 53px; margin: 0 auto 18px; display: grid; gap: 4px; }
.tc-status strong { font-size: 17px; font-weight: 900; }
.tc-status span { color: var(--tc-muted); font-size: 12px; line-height: 1.4; }
.tc-call-button {
    width: 100%; min-height: 58px; border: 0; border-radius: 18px; color: #fff;
    background: linear-gradient(100deg, #7948ed, #5422ca); box-shadow: 0 15px 30px rgba(91, 38, 204, .27);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 16px; font-weight: 900; cursor: pointer;
}
.tc-call-button:active { transform: scale(.985); }
.tc-call-button:disabled { opacity: .72; cursor: wait; }
.tc-cancel-button { min-height: 38px; margin-top: 8px; border: 0; color: #c73946; background: transparent; font-size: 12px; font-weight: 850; cursor: pointer; }
.tc-help { margin: 16px auto 0; color: #8791a5; font-size: 11px; line-height: 1.45; }
.tc-help i { margin-right: 4px; }
.tc-hidden { display: none !important; }
.tc-footer { padding: 18px 10px 2px; color: #7d879a; text-align: center; font-size: 10px; }
.tc-card--error { min-height: 430px; display: flex; flex-direction: column; justify-content: center; }
.tc-card--error .tc-error-icon { color: var(--tc-red); background: #fff0f1; }
.tc-card--error h1 { font-size: 30px; }

@keyframes tc-bell { 0%,100% { transform: rotate(0); } 20% { transform: rotate(13deg); } 45% { transform: rotate(-12deg); } 70% { transform: rotate(7deg); } }
@keyframes tc-pulse { 0% { transform: scale(.78); opacity: .9; } 100% { transform: scale(1.15); opacity: 0; } }

@media (max-height: 720px) {
    .tc-brand { padding-bottom: 13px; }
    .tc-card { min-height: 540px; padding-top: 20px; }
    .tc-visual { width: 138px; height: 138px; margin-top: 6px; }
    .tc-ring--one { width: 108px; height: 108px; }
    .tc-ring--two { width: 136px; height: 136px; }
    .tc-bell { width: 82px; height: 82px; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }