/* DraftNow — пользовательская часть. Мобильный-first, десктоп расширяет. */

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: #f5efe1;
    background: #1c1610;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===== Шапка ===== */
.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.2rem;
}
.logo { font-weight: 700; font-size: 1.25rem; }

/* ===== Кнопки ===== */
.btn, button.btn {
    display: inline-block;
    border: 1px solid #3a2e1f;
    background: #251c12;
    color: #f5efe1;
    padding: 0.5rem 1.2rem;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    font: inherit;
    font-size: 0.92rem;
}
.btn.primary { background: #d99a26; border-color: #d99a26; color: #251c12; font-weight: 600; }
.btn.primary:hover { background: #e8aa35; }
.btn.small, .btn-ghost.small { padding: 0.3rem 0.85rem; font-size: 0.83rem; }
.btn-ghost {
    background: none; border: 1px solid #3a2e1f; color: #cbbf9f;
    border-radius: 999px; padding: 0.5rem 1.1rem; font: inherit; font-size: 0.9rem;
    cursor: pointer;
}
.btn-ghost:hover { background: #251c12; color: #fff; }
.btn-dev {
    display: block;
    margin: 0.9rem auto 0;
    max-width: 260px;
    border: 1px dashed #5a4a33;
    color: #cbbf9f;
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-size: 0.88rem;
    text-decoration: none;
}
.btn-dev:hover { background: #251c12; color: #fff; }
.muted { color: #8d867a; }
.small-text { font-size: 0.83rem; }

/* ===== Лендинг ===== */
.hero {
    flex: 1;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 1.2rem 2.5rem;
    text-align: center;
}
.hero h1 {
    font-size: 1.7rem;
    line-height: 1.25;
    margin: 1.2rem 0 0.8rem;
}
.lead {
    color: #cbbf9f;
    font-size: 1.02rem;
    line-height: 1.5;
    margin: 0 auto 1.8rem;
    max-width: 480px;
}
.login-box {
    background: #251c12;
    border: 1px solid #3a2e1f;
    border-radius: 14px;
    padding: 1.4rem 1rem 1.1rem;
    margin: 0 auto 2.2rem;
    max-width: 340px;
}
.login-box iframe { margin: 0 auto; }
.login-hint {
    color: #8d867a;
    font-size: 0.85rem;
    margin: 0.7rem 0 0;
}
.auth-error {
    background: #3a1d1d;
    border: 1px solid #7a3a3a;
    color: #f0b8b8;
    border-radius: 8px;
    padding: 0.55rem 0.8rem;
    font-size: 0.9rem;
    margin: 0 0 1rem;
}

.features { display: grid; gap: 0.9rem; text-align: left; }
.feature {
    background: #251c12;
    border: 1px solid #3a2e1f;
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
}
.feature-icon { font-size: 1.5rem; margin-bottom: 0.4rem; }
.feature h3 { margin: 0 0 0.3rem; font-size: 1.02rem; }
.feature p { margin: 0; color: #cbbf9f; font-size: 0.92rem; line-height: 1.45; }

.footer {
    text-align: center;
    color: #6f6a60;
    font-size: 0.85rem;
    padding: 1.2rem;
}

/* ===== Приложение: каркас ===== */
.app-body { padding-bottom: 64px; } /* место под таббар */
.app-top {
    position: sticky;
    top: 0;
    background: #1c1610;
    z-index: 10;
    border-bottom: 1px solid #3a2e1f;
    padding-top: env(safe-area-inset-top, 0);
}
.me-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    object-fit: cover; border: 1px solid #3a2e1f;
    display: block;
}
.tabbar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    display: flex;
    background: #251c12;
    border-top: 1px solid #3a2e1f;
    z-index: 20;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.tabbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0.55rem 0 0.45rem;
    color: #8d867a;
    font-size: 1.15rem;
    text-decoration: none;
    position: relative;
}
.tabbar a span { font-size: 0.72rem; }
.tabbar a.active { color: #ffd98a; }
.tabbar .badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 26px);
    background: #d99a26;
    color: #251c12;
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 6px;
}
.page {
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
    padding: 1.1rem 1.2rem 2rem;
}
.page-title { margin: 0.2rem 0 1rem; font-size: 1.3rem; }

/* ===== Карточки и списки ===== */
.card {
    background: #251c12;
    border: 1px solid #3a2e1f;
    border-radius: 14px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}
.card-title { margin: 0 0 0.7rem; font-size: 0.98rem; color: #ffd98a; }

.person-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid #322818;
}
.person-row:last-child { border-bottom: none; }
.person-avatar img, .avatar-empty {
    width: 42px; height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #3a2e1f;
    display: block;
}
.person-avatar-img {
    width: 42px; height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #3a2e1f;
    display: block;
}
.avatar-empty { background: #322818; display: inline-block; }
.avatar-empty.big { width: 96px; height: 96px; }
.person-info { flex: 1; min-width: 0; }
.person-name { font-weight: 600; font-size: 0.95rem; }
.person-nick { color: #8d867a; font-size: 0.82rem; }
.person-row form { margin: 0; }

.search-form { display: flex; gap: 0.6rem; margin-bottom: 0.7rem; }
.search-box { position: relative; flex: 1; }
.search-box input {
    width: 100%;
    background: #1c1610;
    border: 1px solid #3a2e1f;
    color: #f5efe1;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font: inherit;
    font-size: 0.92rem;
}
.search-box input::placeholder { color: #6f6a60; }

/* ===== Пустые состояния ===== */
.empty {
    text-align: center;
    color: #cbbf9f;
    padding: 3rem 1rem;
    line-height: 1.5;
}
.empty-icon { font-size: 2.6rem; margin-bottom: 0.8rem; }
.empty-sub { color: #8d867a; font-size: 0.88rem; }

/* ===== Профиль ===== */
.profile-head { text-align: center; padding: 1.6rem 0 1rem; }
.profile-avatar img {
    width: 96px; height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #3a2e1f;
}
.profile-name { font-size: 1.3rem; font-weight: 700; margin-top: 0.7rem; }
.profile-nick { color: #8d867a; margin-top: 0.15rem; }
.stat-row {
    display: flex; gap: 0.9rem; justify-content: center; margin-top: 1.2rem;
    flex-wrap: wrap;
}
.stat {
    background: #251c12; border: 1px solid #3a2e1f; border-radius: 12px;
    padding: 0.9rem 1.5rem; min-width: 110px; text-align: center;
}
.stat-num { font-size: 1.45rem; font-weight: 700; color: #ffd98a; }
.stat-label { color: #8d867a; font-size: 0.82rem; margin-top: 0.15rem; }
.logout-row { text-align: center; margin-top: 1.8rem; }

/* ===== Шапка приложения ===== */
.logo-link { text-decoration: none; color: inherit; }
.me { display: flex; align-items: center; gap: 0.8rem; }
.btn-checkin {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: #d99a26; color: #251c12; font-size: 1.35rem; font-weight: 700;
    text-decoration: none; line-height: 1;
}
.btn-checkin:hover { background: #e8aa35; }

/* ===== Строка-заголовок страницы ===== */
.page-head-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.8rem; margin: 0.2rem 0 1rem; flex-wrap: wrap;
}
.page-head-row .page-title { margin: 0; }

/* ===== Переключатель «все / друзья» ===== */
.scope-toggle { display: inline-flex; background: #251c12; border: 1px solid #3a2e1f; border-radius: 999px; padding: 0.2rem; gap: 0.2rem; }
.scope-toggle a {
    padding: 0.35rem 1rem; border-radius: 999px; text-decoration: none;
    color: #8d867a; font-size: 0.88rem;
}
.scope-toggle a.active { background: #d99a26; color: #251c12; font-weight: 600; }

/* ===== Тост (внутри страницы) ===== */
.toast-inline {
    background: #2a2318; border: 1px solid #4a3b22; color: #ffd98a;
    border-radius: 10px; padding: 0.7rem 1rem; font-size: 0.92rem; margin-bottom: 1rem;
}
.toast-inline.error { background: #3a1d1d; border-color: #7a3a3a; color: #f0b8b8; }

/* ===== Карточка чекина ===== */
.checkin {
    background: #251c12; border: 1px solid #3a2e1f; border-radius: 14px;
    padding: 0.9rem 1.1rem; margin-bottom: 0.9rem;
}
.checkin-head { display: flex; align-items: center; gap: 0.7rem; }
.checkin-avatar img, .checkin-avatar .avatar-empty {
    width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
    border: 1px solid #3a2e1f; display: block;
}
.checkin-who { flex: 1; min-width: 0; }
.checkin-name { font-weight: 600; font-size: 0.95rem; color: #f5efe1; text-decoration: none; }
.checkin-name:hover { color: #ffd98a; }
.checkin-meta { color: #8d867a; font-size: 0.8rem; margin-top: 0.1rem; }
.checkin-meta a { color: #cbbf9f; }
.checkin-beer { margin-top: 0.6rem; font-size: 1rem; }
.checkin-beer a { color: #ffd98a; text-decoration: none; font-weight: 600; }
.checkin-comment { margin-top: 0.45rem; color: #e8dfc8; font-size: 0.93rem; line-height: 1.45; }
.checkin-foot { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.7rem; }
.checkin-foot form { margin: 0; }

/* ===== Звёзды ===== */
.stars { color: #d99a26; letter-spacing: 0.08em; font-size: 1.02rem; margin-top: 0.4rem; }
.big-stars { font-size: 1.7rem; margin: 0.3rem 0; }

/* ===== Реакция ===== */
.react {
    background: none; border: 1px solid #3a2e1f; border-radius: 999px;
    color: #cbbf9f; padding: 0.28rem 0.8rem; font: inherit; font-size: 0.88rem;
    cursor: pointer;
}
.react:hover { background: #322818; }
.react.reacted { background: #3a2d1b; border-color: #d99a26; color: #ffd98a; }

/* ===== Карточка пива ===== */
.beer-head { display: flex; gap: 1rem; align-items: flex-start; }
.beer-label img {
    width: 84px; height: 84px; object-fit: contain; border-radius: 12px;
    background: #1c1610; border: 1px solid #3a2e1f;
}
.beer-label .avatar-empty { width: 84px; height: 84px; border-radius: 12px; }
.beer-title { flex: 1; min-width: 0; }
.beer-title h2 { margin: 0 0 0.25rem; font-size: 1.25rem; }
.beer-title .muted { font-size: 0.9rem; }

/* ===== Строки аватаров «пили друзья» ===== */
.avatar-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.avatar-row .person-avatar-img, .avatar-row .avatar-empty { width: 36px; height: 36px; }

/* ===== Строка заведения ===== */
.venue-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid #322818; }
.venue-row:last-child { border-bottom: none; }
.venue-info { flex: 1; min-width: 0; }
.venue-name { font-weight: 600; font-size: 0.95rem; }
.venue-name a { color: #f5efe1; text-decoration: none; }
.venue-name a:hover { color: #ffd98a; }
.venue-addr { color: #8d867a; font-size: 0.82rem; }

/* ===== Формы ===== */
.form-card label.field, .form-card .field { display: block; margin-bottom: 1rem; }
.field-label { display: block; font-size: 0.88rem; color: #cbbf9f; margin-bottom: 0.35rem; }
.field-hint { display: block; font-size: 0.78rem; color: #6f6a60; margin-top: 0.3rem; }
.form-card input[type="text"], .form-card input[type="number"],
.form-card input[type="time"], .form-card input[type="date"],
.form-card select, .form-card textarea {
    width: 100%; background: #1c1610; border: 1px solid #3a2e1f;
    color: #f5efe1; border-radius: 10px; padding: 0.55rem 0.8rem;
    font: inherit; font-size: 0.93rem;
}
.form-card textarea { resize: vertical; }
.form-card input::placeholder, .form-card textarea::placeholder { color: #6f6a60; }
.form-card select { appearance: none; }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus {
    outline: none; border-color: #d99a26;
}
.btn.wide { width: 100%; text-align: center; }

.rate input[type="range"] {
    width: 100%; accent-color: #d99a26; margin: 0.4rem 0;
}
.rate-view { display: flex; align-items: baseline; gap: 0.6rem; }
.rate-view .stars { margin-top: 0; }

/* ===== Автодополнение ===== */
.ac { position: relative; }
.ac-list {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    background: #251c12; border: 1px solid #3a2e1f; border-radius: 10px;
    margin-top: 4px; max-height: 240px; overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.ac-item { padding: 0.55rem 0.8rem; font-size: 0.92rem; cursor: pointer; }
.ac-item:hover { background: #322818; }

/* ===== Инлайн-формы (заведение) ===== */
.inline-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.6rem; }
.inline-form input, .inline-form select {
    background: #1c1610; border: 1px solid #3a2e1f; color: #f5efe1;
    border-radius: 10px; padding: 0.45rem 0.7rem; font: inherit; font-size: 0.9rem;
}
.minutes-input { width: 90px; }
.plan-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.plan-form input[type="date"], .plan-form input[type="time"] { flex: 1; min-width: 110px; }

/* ===== Статус «сейчас здесь» ===== */
.now-pill {
    display: inline-block; background: #2a2318; border: 1px solid #4a3b22;
    color: #ffd98a; border-radius: 999px; padding: 0.2rem 0.7rem;
    font-size: 0.8rem; margin-top: 0.35rem;
}
.now-line { color: #d99a26; font-size: 0.82rem; margin-top: 0.15rem; }

/* ===== Ряды кнопок ===== */
.btn-row { display: flex; gap: 0.6rem; margin-top: 1rem; flex-wrap: wrap; }
.btn-row.center { justify-content: center; }

.soon-icon { font-size: 1.3rem; text-decoration: none; }

/* ===== Десктоп ===== */
@media (min-width: 720px) {
    .hero { padding-top: 3rem; }
    .hero h1 { font-size: 2.3rem; }
    .lead { font-size: 1.12rem; }
    .features { grid-template-columns: repeat(3, 1fr); }
    .top { padding: 1.1rem 2.2rem; }
    .hero { padding-left: 2rem; padding-right: 2rem; }

    /* таббар сверху под шапкой, страница без нижнего отступа */
    .app-body { padding-bottom: 0; }
    .tabbar {
        position: static;
        max-width: 680px;
        margin: 0 auto;
        border: 1px solid #3a2e1f;
        border-radius: 999px;
        padding: 0.25rem;
        gap: 0.25rem;
    }
    .tabbar a {
        flex-direction: row;
        gap: 0.45rem;
        border-radius: 999px;
        padding: 0.45rem 1.2rem;
        font-size: 0.95rem;
    }
    .tabbar a span { font-size: 0.9rem; }
    .tabbar a.active { background: #3a2d1b; }
    .tabbar .badge { position: static; margin-left: 0.3rem; }
}