/* ===== Сторінки застосунку: вхід, проєкти, профіль, налаштування, інструменти ===== */
.page { max-width: var(--wide); margin: 0 auto; padding: 2.25rem var(--pad-x) 5rem; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.625rem; }
.page-head h1 { font-size: 1.875rem; letter-spacing: -0.0312rem; }
.page-head .sub { color: var(--muted); margin-top: 0.25rem; }
.row-gap { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: center; }
.empty-page { display: grid; place-items: center; gap: 1rem; padding: 7.5rem 1.25rem; text-align: center; }

/* ---------- вхід ---------- */
.auth-page { min-height: calc(100vh - var(--header-h)); display: grid; place-items: center; padding: 1.875rem 1rem; background: radial-gradient(60% 50% at 80% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent), radial-gradient(50% 50% at 10% 90%, rgba(255, 61, 113, .12), transparent); }
.auth-card { width: min(27.5rem, 100%); padding: 2.125rem; border-radius: 1.625rem; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; gap: 0.875rem; text-align: center; }
.auth-logo { width: 3.625rem; height: 3.625rem; margin: 0 auto; } .auth-logo svg { width: 100%; height: 100%; }
.auth-card .sub { color: var(--muted); margin: 0; font-size: 0.875rem; }
.btn.google { background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 600; gap: 0.75rem; padding: 0.75rem; }
.warn-note { color: var(--warn); font-size: 0.8125rem; margin: 0; }
.login-dev { display: grid; gap: 0.75rem; text-align: left; margin-top: 0.375rem; }
.divider { display: flex; align-items: center; gap: 0.625rem; color: var(--faint); font-size: 0.75rem; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* ---------- проєкти ---------- */
.projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1.125rem; }
.project-card { display: grid; gap: 0.875rem; padding: 1.125rem; border-radius: 1.25rem; background: var(--card); border: 1px solid var(--line); transition: border-color .15s, transform .15s; }
.project-card:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); transform: translateY(-0.125rem); }
.project-top { display: flex; gap: 0.875rem; align-items: center; }
.vnp-badge { width: 3.25rem; height: 3.25rem; flex: none; border-radius: 0.875rem; overflow: hidden; }
.project-name { font-size: 1.0625rem; font-weight: 700; word-break: break-word; }
.project-meta { display: grid; gap: 0.125rem; color: var(--muted); font-size: 0.8125rem; }
.project-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.project-actions .btn { flex: 1 1 auto; } .project-actions .btn.danger { flex: 0 0 auto; }
.new-card { display: grid; place-items: center; min-height: 10rem; border: 0.125rem dashed var(--line); background: transparent; color: var(--muted); font-size: 1rem; font-weight: 600; }
.new-card:hover { border-color: var(--accent); color: var(--accent-ink); }
.skeleton { height: 9.375rem; border-radius: 1.25rem; background: linear-gradient(90deg, var(--card) 25%, var(--card-2) 50%, var(--card) 75%); background-size: 200% 100%; animation: sk 1.2s linear infinite; }
@keyframes sk { to { background-position: -200% 0; } }

/* ---------- профіль ---------- */
.profile-grid { display: grid; grid-template-columns: minmax(22rem, 28rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.profile-grid > .profile-card { position: sticky; top: calc(var(--header-h) + 1rem); }
.profile-grid > .stack { grid-template-columns: repeat(auto-fit, minmax(min(100%, 38rem), 1fr)); grid-auto-flow: row dense; align-items: start; }
.profile-grid > .stack > .span-all { grid-column: 1 / -1; }
.profile-card { display: grid; gap: 1rem; justify-items: center; text-align: center; }
.profile-avatar { position: relative; width: 7.5rem; height: 7.5rem; }
.profile-avatar .avatar { width: 7.5rem; height: 7.5rem; font-size: 2.75rem; }
.profile-avatar button { position: absolute; right: -0.125rem; bottom: -0.125rem; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 0.1875rem solid var(--card); background: var(--accent); color: var(--on-accent); font-size: 1rem; }
.name-row { display: flex; gap: 0.5rem; width: 100%; }
.balance { width: 100%; padding: 1.125rem; border-radius: 1.125rem; background: linear-gradient(135deg, color-mix(in srgb, #ffb454 18%, var(--card-2)), color-mix(in srgb, #ff5c8a 14%, var(--card-2))); border: 1px solid var(--line); display: grid; gap: 0.25rem; }
.balance .big { font-size: 2.375rem; font-weight: 800; letter-spacing: -1px; }
.premium-box { width: 100%; padding: 0.875rem; border-radius: 1rem; border: 1px solid #e8b04a; background: color-mix(in srgb, #ffd166 12%, var(--card-2)); text-align: left; }
.pack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.625rem; width: 100%; }
.pack-btn { display: grid; gap: 0.125rem; padding: 0.75rem 0.375rem; border-radius: 0.875rem; border: 1px solid var(--line); background: var(--card-2); font-weight: 700; transition: border-color .15s, transform .1s; }
.pack-btn:hover { border-color: var(--accent); transform: translateY(-0.125rem); }
.pack-btn small { font-weight: 500; }
.promo-row { display: flex; gap: 0.5rem; width: 100%; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; }
.section-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.875rem; }
.section-title h3 { font-size: 1.125rem; }

.heat-wrap { overflow-x: auto; padding-bottom: 0.375rem; }
.heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 0.8125rem); grid-auto-columns: 0.8125rem; gap: 0.25rem; width: max-content; }
.heat i { border-radius: 0.1875rem; background: color-mix(in srgb, var(--text) 8%, transparent); }
.heat i[data-l="1"] { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.heat i[data-l="2"] { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.heat i[data-l="3"] { background: color-mix(in srgb, var(--accent) 80%, transparent); }
.heat i[data-l="4"] { background: var(--accent); }
.heat-legend { display: flex; gap: 0.375rem; align-items: center; color: var(--muted); font-size: 0.75rem; margin-top: 0.625rem; }
.heat-legend i { width: 0.8125rem; height: 0.8125rem; border-radius: 0.1875rem; display: inline-block; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1.125rem; }
.stat-row > div { padding: 0.75rem 0.875rem; border-radius: 0.875rem; background: var(--card-2); border: 1px solid var(--line); }
.stat-row b { display: block; font-size: 1.5rem; letter-spacing: -0.0312rem; }
.list { display: grid; gap: 0.25rem; }
.list > div { display: flex; gap: 0.75rem; justify-content: space-between; padding: 0.5rem 0.625rem; border-radius: 0.625rem; font-size: 0.875rem; }
.list > div:nth-child(odd) { background: color-mix(in srgb, var(--text) 4%, transparent); }
.list .when { color: var(--muted); white-space: nowrap; font-size: 0.7812rem; }
.delta-plus { color: var(--ok); font-weight: 700; } .delta-minus { color: var(--danger); font-weight: 700; }

/* ---------- налаштування ---------- */
.settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 44rem), 1fr)); gap: 1.125rem; align-items: start; }
.setting { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; padding: 0.375rem 0; }
.setting + .setting { border-top: 1px solid var(--line); padding-top: 1.125rem; margin-top: 0.5rem; }
.setting h4 { font-size: 0.9375rem; } .setting p { margin: 0.125rem 0 0; color: var(--muted); font-size: 0.8438rem; }
.swatch-row { display: flex; gap: 0.625rem; align-items: center; flex-wrap: wrap; }
.swatch { width: 1.875rem; height: 1.875rem; border-radius: 50%; border: 0.1875rem solid transparent; outline: 0.125rem solid transparent; transition: transform .1s; }
.swatch:hover { transform: scale(1.12); } .swatch.on { outline-color: var(--text); }
input[type=color].round { width: 2.125rem; height: 2.125rem; padding: 0; border: 0.125rem solid var(--line); border-radius: 50%; background: none; overflow: hidden; cursor: pointer; }
input[type=color].round::-webkit-color-swatch-wrapper { padding: 0; } input[type=color].round::-webkit-color-swatch { border: 0; border-radius: 50%; }

@media (max-width: 900px) { .profile-grid { grid-template-columns: 1fr; } .profile-grid > .profile-card { position: static; } }