*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html { touch-action: manipulation; font-size: 16px; }

body {
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--font);
    font-optical-sizing: auto;
    font-size: 16px;
    font-weight: 400;
    color: var(--text-primary);
    background: var(--page-bg);
    line-height: 1.5;
}
strong, b { font-weight: 600; }
button, input, textarea, select { font-family: inherit; }
input::placeholder, textarea::placeholder {
    font-family: inherit;
    font-weight: 400;
    color: var(--text-tertiary);
    opacity: 0.55;
}

.atmosphere {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    contain: paint;
    transform: translateZ(0);
}
.atmosphere span {
    position: absolute;
    display: block;
    border-radius: 50%;
    opacity: 0.72;
    background: radial-gradient(circle, var(--glow-c) 0%, transparent 58%);
}
html[data-theme="dark"] .atmosphere span { opacity: 0.62; }
.atmosphere span:nth-child(1) {
    width: 380px;
    height: 380px;
    left: -6%;
    top: -10%;
    animation: wander-a 36s ease-in-out infinite;
}
.atmosphere span:nth-child(2) {
    width: 300px;
    height: 300px;
    right: -8%;
    top: 8%;
    background: radial-gradient(circle, var(--glow-b) 0%, transparent 74%);
    animation: wander-b 42s ease-in-out infinite;
}
.atmosphere span:nth-child(3) {
    width: 260px;
    height: 260px;
    left: 18%;
    bottom: -12%;
    background: radial-gradient(circle, var(--glow-a) 0%, transparent 74%);
    animation: wander-c 32s ease-in-out infinite;
}
.atmosphere span:nth-child(4) {
    width: 180px;
    height: 180px;
    right: 16%;
    bottom: 6%;
    animation: wander-d 28s ease-in-out infinite;
}
@keyframes wander-a {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(22vw, 28vh, 0) scale(1.12); }
}
@keyframes wander-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-26vw, 18vh, 0) scale(0.92); }
}
@keyframes wander-c {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(16vw, -24vh, 0) scale(1.16); }
}
@keyframes wander-d {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-18vw, -16vh, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .atmosphere span { animation: none; }
}
@media (hover: none) and (pointer: coarse) {
    .atmosphere span { animation: none; }
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button, .tab { -webkit-tap-highlight-color: transparent; user-select: none; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.hidden, [hidden] { display: none !important; }

.boot, .auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
}
.boot {
    position: fixed;
    inset: 0;
    z-index: 80;
    overflow: hidden;
    background: transparent;
    pointer-events: none;
}
.modal-root.is-warming {
    opacity: 0 !important;
    pointer-events: none !important;
}
.boot-warm {
    position: absolute;
    left: 0;
    top: 0;
    width: min(100% - 32px, 420px);
    height: 220px;
    opacity: 0.02;
    overflow: hidden;
    pointer-events: none;
}

.brand-hero { display: block; width: min(100%, 200px); height: auto; }
.boot .brand-hero { width: min(56vw, 180px); }
.auth-card .brand-hero { width: min(100%, 180px); }

.auth-card, .glass, .stat-card, .product-row, .sheet, .profile-card, .profile-block,
.panel, .entry, .note, .home-hero, .fact, .mine-stat, .recipe-card, .forest-job,
.lane, .yield-tile, .set-row, .picker-pill, .shortcut {
    background: var(--glass-bg);
    border: 1px solid var(--glass-line);
    box-shadow: none;
    backdrop-filter: blur(20px) saturate(165%);
    -webkit-backdrop-filter: blur(20px) saturate(165%);
}
.modal {
    background: var(--glass-bg);
    border: 1px solid var(--glass-line);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(20px) saturate(165%);
    -webkit-backdrop-filter: blur(20px) saturate(165%);
}

.auth-card {
    width: min(100%, 440px);
    border-radius: 28px;
    padding: 22px 18px 18px;
}

.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 18px; }
.brand p { margin: 0; color: var(--text-secondary); font-size: 13px; }

.segments, .theme-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: 16px;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    box-shadow: none;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    margin-bottom: 16px;
}
.theme-switch { grid-template-columns: repeat(3, 1fr); }
.segments button, .theme-switch button, .lang-switch button {
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 650;
}
.segments button.is-active, .theme-switch button.is-active, .lang-switch button.is-active {
    background: color-mix(in srgb, var(--accent-soft) 88%, var(--glass-bg-strong));
    color: var(--accent-text);
    border-color: var(--border-color);
    box-shadow: none;
}

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field span, .stat-label, .meta, .caption { color: var(--text-secondary); font-size: 14px; }
.field input, .field select, .field textarea, .search input, .stepper input {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid var(--glass-line);
    background: var(--glass-bg-strong);
    box-shadow: none;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    padding: 0 14px;
    font-size: 16px;
}
.field textarea {
    min-height: 96px;
    padding: 12px 14px;
    resize: vertical;
    line-height: 1.5;
}
.field-error { color: var(--danger); font-size: 13px; margin: 0; }
.row-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0 14px; }
.secret { position: relative; display: block; }
.secret input { width: 100%; padding-right: 42px; }
.password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}
.password-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.password-toggle:hover { color: var(--text-primary); }
.oauth-row { display: grid; gap: 8px; margin-bottom: 4px; }
.btn-oauth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}
.btn-oauth:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--text-primary) 12%, transparent); }
.btn-apple { background: color-mix(in srgb, #000 28%, transparent); }
.oauth-mark { width: 18px; height: 18px; flex: none; }
.oauth-divider { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--text-secondary); font-size: 13px; }
.oauth-divider::before, .oauth-divider::after { content: ""; flex: 1; border-bottom: 1px solid var(--border-color); }
.online-card { margin: 0 0 14px; padding: 12px; border: 1px solid var(--border-color); border-radius: 16px; background: var(--glass-bg); }
.online-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.online-title { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; }
.online-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    width: min(240px, 62%);
    min-height: 36px;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
}
.online-tools:focus-within {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border-color));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.online-tools .online-search {
    flex: 1;
    width: 100%;
    min-width: 0;
    min-height: 30px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    color: var(--text-primary);
    font-size: 13px;
    appearance: none;
    -webkit-appearance: none;
}
.online-tools .online-search::placeholder { color: var(--text-tertiary); opacity: 0.55; }
.online-tools .online-search:focus,
.online-tools .online-search:focus-visible { outline: none; }
.online-tools .online-search::-webkit-search-decoration,
.online-tools .online-search::-webkit-search-cancel-button,
.online-tools .online-search::-webkit-search-results-button { -webkit-appearance: none; appearance: none; }
.id-toggle {
    flex: none;
    min-height: 30px;
    padding: 0 8px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.id-toggle.is-active { color: var(--text-primary); background: color-mix(in srgb, var(--positive) 18%, transparent); }
.player-id { margin-right: 4px; color: var(--text-secondary); font-weight: 650; }
.count-chip { min-width: 1.4em; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--positive) 18%, transparent); color: var(--positive); font-size: 12px; text-align: center; }
.online-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 6px color-mix(in srgb, var(--positive) 70%, transparent); display: inline-block; }
.players-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.player-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
    color: inherit;
    cursor: pointer;
    transition: transform .2s, background .2s, border-color .2s;
}
.player-card:hover {
    transform: translateY(-4px);
    background: color-mix(in srgb, var(--text-primary) 9%, transparent);
}
html[data-theme="light"] .player-card:hover {
    background: color-mix(in srgb, var(--accent) 18%, var(--glass-bg-strong));
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border-color));
}
.player-name { font-size: 12px; color: var(--positive); text-align: center; word-break: break-word; }
.player-name.is-away { color: var(--text-secondary); }
.player-status { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11px; color: var(--text-secondary); text-align: center; }
.online-empty { margin: 8px 0; text-align: center; color: var(--text-secondary); font-size: 13px; }
.friend-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 10px; }
.friend-list { display: grid; gap: 8px; }
.friend-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border-color); }
.friend-row.is-blocked .avatar { filter: grayscale(.6); opacity: .7; }
.friend-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.friend-main strong { display: flex; align-items: center; gap: 6px; }
.friend-main small { display: block; color: var(--text-secondary); font-size: 12px; }
.friend-actions, .profile-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.fa-btn { border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); border-radius: 999px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.fa-btn.is-ok { background: color-mix(in srgb, var(--positive) 18%, transparent); border-color: transparent; }
.fa-btn.is-no { color: #e06a6a; }
.photo-modal { background: transparent; border: 0; box-shadow: none; text-align: center; }
.photo-full { width: min(100%, 420px); max-height: 70vh; object-fit: contain; border-radius: 18px; }
.photo-name { margin: 8px 0 0; }
.photo-close { margin-left: auto; }
@media (max-width: 720px) {
    .players-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.remember { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; color: var(--text-secondary); }
.remember input { width: 16px; height: 16px; margin: 0; accent-color: var(--positive); }
.presence { display: block; margin-top: 2px; color: var(--positive); font-size: 12px; }
.presence.is-away { color: var(--text-secondary); }
.section-label { margin: 18px 0 8px; font-size: 13px; font-weight: 650; }
.linkish, .text-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid var(--border-color);
    background: var(--glass-bg);
    color: var(--accent-text);
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: 999px;
    box-shadow: none;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.back-btn { padding-left: 10px; }
.back-btn .icon { width: 18px; height: 18px; }

.btn {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 16%, var(--glass-bg));
    color: var(--accent-text);
    font-size: 16px;
    font-weight: 600;
    position: relative;
    box-shadow: none;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.btn.secondary {
    background: var(--glass-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
    box-shadow: none;
}
.btn.gold {
    background: color-mix(in srgb, var(--accent-2) 24%, var(--glass-bg));
    color: var(--on-accent-2);
    border-color: var(--border-color);
    box-shadow: none;
}
.btn.danger {
    background: color-mix(in srgb, var(--danger) 14%, var(--glass-bg));
    color: var(--danger);
    border-color: var(--border-color);
    box-shadow: none;
}
.btn:disabled { opacity: 0.55; }
.btn:active { transform: scale(0.985); }
.btn.is-busy { color: transparent; pointer-events: none; }
.btn.is-busy::after {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--accent-text) 35%, transparent);
    border-top-color: var(--accent-text);
    position: absolute;
    inset: 0;
    margin: auto;
    animation: spin 0.7s linear infinite;
}
.btn.secondary.is-busy::after { border-top-color: var(--text-primary); border-color: var(--border-color); }

.shell { height: 100dvh; min-height: 0; display: flex; flex-direction: column; }
.workspace { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    flex-shrink: 0;
    padding: calc(10px + env(safe-area-inset-top)) var(--space) 12px;
    background: var(--glass-bg);
    border-bottom: 1px solid var(--glass-line);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.topbar-row, .balance-row, .identity, .top-actions { display: flex; align-items: center; }
.topbar-row { gap: 8px; }
.brand-lockup {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
    border: 0;
    background: none;
    padding: 0;
    color: inherit;
    text-align: left;
}
.brand-logo {
    display: block;
    height: 36px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}
.identity { gap: 10px; min-width: 0; }
.avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: 13px;
    font-weight: 700;
    flex: none;
}
button.avatar { border: 0; padding: 0; }
.avatar.has-photo { overflow: hidden; padding: 0; background: var(--bg-secondary); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.sm { width: 44px; height: 44px; border-radius: 14px; font-size: 14px; }
.avatar.lg { width: 64px; height: 64px; border-radius: 20px; font-size: 18px; }
.bio { margin: 6px 0 0; color: var(--text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
.photo-row { display: flex; gap: 14px; align-items: center; }
.photo-row > div { min-width: 0; }
.photo-actions { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 8px; }
.panel { margin-bottom: 12px; }
.identity-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
.level-row { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.badge {
    font-size: 12px;
    letter-spacing: 0.02em;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-weight: 700;
}
.xp { flex: 1; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--text-primary) 10%, transparent); min-width: 64px; max-width: 120px; overflow: hidden; }
.xp > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--chart)); border-radius: inherit; }
.icon-btn, .pill {
    border: 1px solid var(--border-color);
    background: var(--glass-bg);
    border-radius: 999px;
    min-height: 40px;
    box-shadow: none;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.topbar .icon-btn {
    width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--glass-bg-strong) 70%, transparent);
    color: var(--text-primary);
    box-shadow: none;
}
.icon-btn { width: 40px; display: grid; place-items: center; position: relative; }
.icon-btn.is-active, .pill.is-active { background: var(--accent-soft); color: var(--accent-text); border-color: var(--border-color); }
.icon-btn .dot {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    border-radius: 99px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    line-height: 18px;
    display: grid;
    place-items: center;
    padding: 0 4px;
    white-space: nowrap;
}
.balance-row { gap: 8px; margin-top: 10px; }
.cash-pill {
    margin-left: auto;
    flex: none;
    min-height: 36px;
    padding: 0 12px;
    background: var(--glass-bg-strong);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    font-size: 13px;
    font-weight: 700;
}
.pill {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 700;
}
.topbar .cash-pill { flex: none; justify-content: center; }
.pill em { font-style: normal; color: var(--text-tertiary); font-weight: 550; font-size: 12px; }
.pill.premium { background: var(--accent-soft); color: var(--text-primary); }

.view {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px var(--space) calc(var(--nav-h) + 24px);
    -webkit-overflow-scrolling: touch;
}
.section-head, .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 8px 0 12px; }
.section-head h2, .screen-title { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: 0; }
.page-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.page-head .text-btn { flex: none; }
.greeting { margin: 2px 0 14px; color: var(--text-secondary); font-size: 13px; }
.home-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 16px;
    padding: 12px;
    border-radius: 22px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-line);
    box-shadow: none;
}
.home-id { flex: 1; min-width: 0; }
.home-id strong { display: block; font-size: 16px; letter-spacing: -0.02em; }
.home-id .caption { margin: 2px 0 0; }
.home-hero .xp { max-width: none; }
.home-hero .icon-btn { border-radius: 50%; background: var(--glass-bg); }
.shortcuts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 16px;
}
.shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 76px;
    padding: 10px 4px;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    background: var(--glass-bg);
    color: var(--accent-text);
    box-shadow: none;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.shortcut .icon { width: 22px; height: 22px; }
.shortcut span {
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
}
.home { display: flex; flex-direction: column; gap: 14px; }
.city-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    gap: 6px;
}
.topbar-mobile { display: none; }
.city-player, .city-brand, .home-section, .quest-card, .home-action, .story-card, .res-chip, .pin, .pulse-row, .lane, .yield-tile {
    border: 0;
    color: inherit;
    text-align: left;
}
.city-player {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    max-width: calc(50% - 46px);
    min-width: 0;
    padding: 0;
    background: none;
}
.city-player .avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; font-size: 12px; box-shadow: none; }
.city-id { min-width: 0; }
.city-id strong, .quest-copy strong, .pulse-copy strong, .story-card strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.city-id strong { font-size: 12px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.city-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 1px; }
.city-meta em { font-style: normal; font-size: 10px; line-height: 1.1; color: var(--text-secondary); font-weight: 500; white-space: nowrap; }
.city-meta .xp { width: 48px; min-width: 48px; max-width: 48px; height: 3px; flex: none; background: color-mix(in srgb, var(--positive) 24%, var(--bg-secondary)); }
.city-meta .xp > span { background: var(--positive); }
.city-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    transform: translate(-50%, -50%);
    background: none;
    padding: 0;
}
.city-brand img { display: block; height: 36px; width: auto; max-width: 112px; object-fit: contain; object-position: center; }
.city-tools { position: relative; z-index: 1; display: flex; justify-content: flex-end; gap: 3px; }
.city-tools .icon-btn {
    width: 36px;
    height: 36px;
    min-height: 36px;
    border-radius: 11px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--glass-bg-strong) 72%, transparent);
    color: var(--text-primary);
    box-shadow: none;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.city-tools .icon { width: 18px; height: 18px; }
.res-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    justify-content: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.res-strip::-webkit-scrollbar { display: none; }
.res-chip {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    flex: none;
    width: max-content;
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid rgb(255 255 255 / 10%);
    background: rgb(255 255 255 / 8%);
    box-shadow: none;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    text-align: left;
}
html[data-theme="dark"] .res-chip { box-shadow: none; }
.res-ico {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    display: grid;
    place-items: center;
    flex: none;
    background: color-mix(in srgb, var(--accent) 16%, var(--bg-secondary));
    color: var(--accent-text);
}
.res-ico .icon { width: 11px; height: 11px; }
.res-ico.res-wood,
.res-ico.res-good,
.res-ico.res-sikke { width: 15px; height: 15px; background: none; border-radius: 0; }
.res-ico.res-sikke img { width: 15px; height: 15px; object-fit: contain; display: block; }
.sikke-line,
.sikke-amt { display: inline-flex; align-items: center; gap: 0.28em; white-space: nowrap; vertical-align: middle; }
.sikke-line img,
.sikke-amt img { width: 1em; height: 1em; object-fit: contain; flex: none; }
.res-ico.res-wood img,
.res-ico.res-good img { width: 15px; height: 15px; object-fit: contain; display: block; }
.res-strip { -webkit-overflow-scrolling: touch; touch-action: pan-x; }
.resbar:not([hidden]) {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 6px 0 0;
    padding: 0;
    background: none;
    border: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
}
.resbar[hidden] { display: none !important; }
.resbar::-webkit-scrollbar { display: none; }
.resbar > .res-chip {
    flex: 0 0 auto;
    width: max-content;
    max-width: none;
    gap: 3px;
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid rgb(255 255 255 / 10%);
    background: rgb(255 255 255 / 8%);
    box-shadow: none;
}
.resbar > .res-chip .res-copy {
    min-width: max-content;
    max-width: none;
    overflow: visible;
}
.resbar > .res-chip .res-copy strong {
    overflow: visible;
    text-overflow: clip;
    letter-spacing: 0;
}

.forest-scene {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: 0 0 12px;
    border-radius: 18px;
    overflow: hidden;
}
.forest-banner {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}
.forest-overlay,
.chop-spot {
    border: 1px solid color-mix(in srgb, #fff 28%, transparent);
    background: color-mix(in srgb, var(--glass-bg-strong) 46%, transparent);
    color: var(--text-primary);
    box-shadow: 0 8px 18px rgba(12, 16, 10, 0.22);
    backdrop-filter: blur(16px) saturate(165%);
    -webkit-backdrop-filter: blur(16px) saturate(165%);
}
.forest-overlay {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 16px);
}
.forest-overlay-tl,
html[data-theme="dark"] .forest-overlay-tl,
.forest-overlay-tr,
html[data-theme="dark"] .forest-overlay-tr {
    top: 8px;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.forest-overlay-tl,
html[data-theme="dark"] .forest-overlay-tl { left: 8px; }
.forest-overlay-tr,
html[data-theme="dark"] .forest-overlay-tr { right: 8px; left: auto; }
/* forest-badge mobile sizing moved to overlay-badge-responsive */
.forest-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    margin: 0;
    padding: 0 12px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, #fff 28%, transparent);
    background: color-mix(in srgb, var(--glass-bg-strong) 46%, transparent);
    color: var(--text-primary);
    box-shadow: 0 8px 18px rgba(12, 16, 10, 0.22);
    backdrop-filter: blur(16px) saturate(165%);
    -webkit-backdrop-filter: blur(16px) saturate(165%);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.forest-back { width: 32px; height: 32px; min-width: 32px; padding: 0; flex: none; }
button.forest-back .icon,
.forest-back .icon { width: 20px; height: 20px; }
.chop-spot {
    position: absolute;
    z-index: 2;
    width: 58px;
    height: 58px;
    padding: 0;
    border-radius: 16px;
    display: grid;
    place-items: center;
}
.chop-spot img { width: 44px; height: 44px; object-fit: contain; pointer-events: none; }
.chop-spot .icon { width: 30px; height: 30px; }
.yard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.yard-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    cursor: grab;
}
.yard-strip::-webkit-scrollbar { display: none; }
.yard-strip.is-dragging { cursor: grabbing; user-select: none; }
.yard-strip img { pointer-events: none; user-select: none; -webkit-user-drag: none; }
.yard-strip .yard-card {
    flex: 0 0 clamp(104px, calc((100% - 16px) / 2.75), 152px);
    width: clamp(104px, calc((100% - 16px) / 2.75), 152px);
    aspect-ratio: 16 / 10;
    border-radius: clamp(12px, 3.2vw, 16px);
}
.yard-strip .yard-card:only-child {
    flex-basis: min(240px, 100%);
    width: min(240px, 100%);
}
.yard-strip .yard-card:first-child:nth-last-child(2),
.yard-strip .yard-card:first-child:nth-last-child(2) ~ .yard-card {
    flex-basis: min(240px, calc((100% - 8px) / 2));
    width: min(240px, calc((100% - 8px) / 2));
}
.yard-strip .yard-card span {
    left: 6px;
    bottom: 6px;
    max-width: calc(100% - 12px);
    padding: 2px 7px;
    font-size: clamp(10px, 2.8vw, 12px);
}
.yard-card {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #1c2b18;
}
.yard-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yard-card.yard-wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.yard-card.crop-coop img, .forest-banner.crop-coop { object-position: center; }
.yard-card.crop-barn img, .forest-banner.crop-barn { object-position: center; }
.yard-card.crop-garden img, .forest-banner.crop-garden { object-position: center; }
.city-scene.farm-map { aspect-ratio: 16 / 9; }
.yard-card span small { display: block; margin-top: 1px; font-size: 11px; font-weight: 650; }
.yard-card span {
    position: absolute;
    left: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #fff 28%, transparent);
    background: color-mix(in srgb, var(--glass-bg-strong) 46%, transparent);
    color: var(--text-primary);
    box-shadow: 0 8px 18px rgba(12, 16, 10, 0.22);
    backdrop-filter: blur(16px) saturate(165%);
    -webkit-backdrop-filter: blur(16px) saturate(165%);
    font-size: 13px;
    font-weight: 700;
}
html[data-theme="dark"] .yard-card span {
    border-color: color-mix(in srgb, #d5e7fb 16%, transparent);
    background: color-mix(in srgb, var(--glass-bg) 42%, transparent);
    box-shadow: 0 8px 18px rgba(4, 8, 16, 0.32);
}
.chop-spot.is-swing { transform: scale(0.9) rotate(-10deg); }
.forest-overlay-br {
    right: 8px;
    bottom: 8px;
    padding: 6px 12px 6px 8px;
    border-radius: 16px;
}
.forest-overlay-mid {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    gap: 1px;
    padding: 8px 14px;
    border-radius: 16px;
    text-align: center;
    pointer-events: none;
}
.forest-overlay-mid strong {
    font-size: 14px;
    font-weight: 750;
    line-height: 1.2;
}
.forest-overlay-mid small {
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.forest-overlay-br img { width: 28px; height: 20px; object-fit: contain; flex: none; }
.forest-overlay-br span { min-width: 0; }
.forest-overlay-br strong, .forest-overlay-br small { display: block; line-height: 1.15; }
.forest-overlay-br strong { font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; }
.forest-overlay-br small { font-size: 11px; font-weight: 650; color: var(--text-secondary); }
html[data-theme="dark"] .forest-overlay,
html[data-theme="dark"] .forest-badge,
html[data-theme="dark"] .chop-spot {
    border-color: color-mix(in srgb, #d5e7fb 16%, transparent);
    background: color-mix(in srgb, var(--glass-bg) 42%, transparent);
    box-shadow: 0 8px 18px rgba(4, 8, 16, 0.32);
}
html[data-theme="dark"] .forest-overlay-tl,
html[data-theme="dark"] .forest-overlay-tr {
    border: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
button.forest-badge { cursor: pointer; font-family: inherit; gap: 4px; }
button.forest-badge .icon { width: 14px; height: 14px; flex: none; }
button.forest-badge:disabled { opacity: 0.45; }
.smith-center {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(260px, calc(100% - 32px));
    pointer-events: none;
}
.smith-make {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #fff 28%, transparent);
    background: color-mix(in srgb, var(--glass-bg-strong) 46%, transparent);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 750;
    letter-spacing: -0.02em;
    box-shadow: 0 8px 18px rgba(12, 16, 10, 0.22);
    backdrop-filter: blur(16px) saturate(165%);
    -webkit-backdrop-filter: blur(16px) saturate(165%);
    cursor: pointer;
}
.smith-make .icon { width: 18px; height: 18px; }
.smith-make:active { transform: scale(0.98); }
.smith-status {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: min(240px, calc(100vw - 48px));
    padding: 8px 12px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, #fff 28%, transparent);
    background: color-mix(in srgb, var(--glass-bg-strong) 62%, transparent);
    color: var(--text-primary);
    box-shadow: 0 8px 18px rgba(12, 16, 10, 0.22);
    backdrop-filter: blur(16px) saturate(165%);
    -webkit-backdrop-filter: blur(16px) saturate(165%);
    text-align: center;
    pointer-events: none;
}
.smith-center.is-busy .smith-status {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
}
.smith-status strong { font-size: 13px; font-weight: 750; line-height: 1.2; }
.smith-status small { font-size: 12px; font-weight: 650; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.smith-forge {
    min-width: min(240px, calc(100% - 24px));
    gap: 8px;
    pointer-events: none;
}
.smith-progress { display: flex; align-items: center; gap: 8px; width: 100%; }
.smith-progress-track {
    flex: 1;
    height: 6px;
    border-radius: 99px;
    background: color-mix(in srgb, #fff 24%, transparent);
    overflow: hidden;
}
.smith-progress-bar {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: color-mix(in srgb, var(--accent-text) 82%, #fff);
}
.smith-progress small { flex: none; font-variant-numeric: tabular-nums; }
.smith-stocks {
    position: absolute;
    z-index: 4;
    left: 8px;
    bottom: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: calc(100% - 16px);
    pointer-events: auto;
}
.smith-stock-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}
.smith-stock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 8px 0 4px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, #fff 28%, transparent);
    background: color-mix(in srgb, var(--glass-bg-strong) 46%, transparent);
    color: var(--text-primary);
    box-shadow: 0 8px 18px rgba(12, 16, 10, 0.22);
    backdrop-filter: blur(16px) saturate(165%);
    -webkit-backdrop-filter: blur(16px) saturate(165%);
}
.smith-stock img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.smith-stock strong { font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .smith-make,
html[data-theme="dark"] .smith-stock,
html[data-theme="dark"] .smith-status,
html[data-theme="dark"] .smith-pop {
    border-color: color-mix(in srgb, #d5e7fb 16%, transparent);
    background: color-mix(in srgb, var(--glass-bg) 58%, transparent);
    box-shadow: 0 8px 18px rgba(4, 8, 16, 0.32);
}
.smith-pop {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    width: min(240px, calc(100vw - 32px));
    max-height: 168px;
    overflow: auto;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, #fff 42%, transparent);
    background: color-mix(in srgb, var(--glass-bg-strong) 58%, transparent);
    box-shadow: 0 14px 28px rgba(12, 16, 10, 0.28);
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
}
.smith-pop-title {
    margin: 0 0 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}
.smith-pop ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.smith-pop li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.smith-pop img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.smith-pop span { flex: 1; min-width: 0; }
.smith-pop strong { flex: none; font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; }
.smith-stock-btn[aria-expanded="true"] .smith-stock {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.forest-offers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.forest-offers .btn { height: auto; min-height: 64px; padding: 10px 8px; border-radius: 16px; display: flex; flex-direction: column; gap: 2px; white-space: normal; }
.forest-offers small { font-size: 11px; font-weight: 650; color: var(--text-secondary); }
.mine-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mine-stat { padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border-color); background: var(--bg-elevated); }
.mine-stat strong { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.mine-stat small { color: var(--text-secondary); font-size: 12px; font-weight: 650; }
.panel > .btn { margin-top: 10px; }
.ore-row { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border-color); }
.ore-row img, .recipe-head img { width: 48px; height: 48px; object-fit: contain; flex: none; }
.ore-row .caption, .recipe-card .caption { margin: 2px 0 0; }
.recipe-list { display: flex; flex-direction: column; gap: 10px; }
.recipe-card { padding: 12px; border-radius: 16px; border: 1px solid var(--border-color); background: var(--bg-elevated); }
.recipe-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.qty-picks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.qty-picks .btn.is-on { border-color: var(--accent); color: var(--accent-text); }
.forest-job { margin: 0 0 8px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border-color); background: var(--bg-elevated); }
.forest-job strong { display: block; }
.forest-job .caption { margin: 2px 0 0; }
.res-copy { min-width: 0; max-width: 100%; }
.res-copy strong, .res-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-copy strong { font-size: 12px; font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.res-copy small { font-size: 9px; font-weight: 650; line-height: 1.1; color: var(--positive); }
.res-copy small, .story-card small, .pulse-copy small { display: block; color: var(--text-secondary); }
.res-copy small { color: var(--positive); }
.res-copy strong.pos, .pulse-side .pos { color: var(--positive); }
.res-copy strong.neg, .pulse-side .neg { color: var(--negative); }
.city-scene {
    position: relative;
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 22px;
    overflow: hidden;
    background: #8eb4d4;
}
html[data-theme="dark"] .city-scene { background: #0c1830; }
.city-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.city-night { display: none; }
html[data-theme="dark"] .city-day { display: none; }
html[data-theme="dark"] .city-night { display: block; }
.pin {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 42%;
    padding: 3px 8px 3px 3px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #fff 20%, transparent);
    background: color-mix(in srgb, var(--glass-bg-strong) 24%, transparent);
    color: var(--text-primary);
    box-shadow: 0 8px 18px rgba(20, 16, 10, 0.16);
    backdrop-filter: blur(16px) saturate(165%);
    -webkit-backdrop-filter: blur(16px) saturate(165%);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
}
.pin > span:not(.pin-ico) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin .chev {
    display: block;
    width: 5px;
    height: 5px;
    flex: none;
    border-width: 1.5px;
    opacity: 0.75;
}
.pin-ico {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent-text);
}
.pin-ico .icon { width: 15px; height: 15px; }
html[data-theme="dark"] .pin {
    border-color: color-mix(in srgb, #d5e7fb 14%, transparent);
    background: color-mix(in srgb, var(--glass-bg) 26%, transparent);
    color: var(--text-primary);
    box-shadow: 0 8px 18px rgba(4, 8, 16, 0.28);
}
html[data-theme="dark"] .pin-ico {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent-text);
}
html[data-theme="light"] .pin-ico {
    background: rgba(255, 250, 244, 0.42);
    color: var(--accent-text);
}
html[data-theme="light"] .pin,
html[data-theme="light"] .yard-card span,
html[data-theme="light"] .forest-badge,
html[data-theme="light"] .forest-overlay,
html[data-theme="light"] .smith-make,
html[data-theme="light"] .smith-stock,
html[data-theme="light"] .smith-status {
    color: #2c241c;
    border-color: rgba(255, 255, 255, 0.58);
    background: rgba(255, 250, 244, 0.42);
    border-width: 1px;
    box-shadow: 0 8px 18px rgba(48, 34, 18, 0.12);
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
}

html[data-theme="light"] .forest-overlay-tl,
html[data-theme="light"] .forest-overlay-tr {
    border: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html[data-theme="light"] .forest-overlay-mid small,
html[data-theme="light"] .forest-overlay-br small,
html[data-theme="light"] .smith-status small {
    color: rgba(44, 36, 28, 0.68);
}
.admin-entry { margin: 0 0 12px; }
.admin-list { display: flex; flex-direction: column; gap: 8px; }
.admin-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
    border-radius: 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
}
.admin-meta { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.admin-meta strong, .admin-meta .caption { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-actions .btn, .admin-row > .btn { width: auto; }
.admin-credit { display: flex; gap: 8px; flex: 1; min-width: 160px; }
.admin-credit input {
    flex: 1;
    min-width: 0;
    min-height: 36px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--glass-bg-strong);
    padding: 0 12px;
}
.pin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pin-grid .span-2, .pin-grid .btn.span-2 { grid-column: 1 / -1; }
.pin-move {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: end;
}
.pin-move .btn { width: 100%; }
.pin-move .pin-span { grid-column: 1 / -1; }
@media (min-width: 640px) {
    .pin-move { grid-template-columns: 1fr 1fr auto auto; }
    .pin-move .pin-span { grid-column: span 2; }
    .pin-move .btn { width: auto; }
}
.quest-card {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: -28px;
    position: relative;
    z-index: 3;
    padding: 12px;
    border-radius: 18px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    box-shadow: none;
}
.quest-ico, .story-art {
    display: grid;
    place-items: center;
    flex: none;
}
.quest-ico {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 16%, var(--bg-secondary));
    color: var(--accent-text);
}
.quest-copy { flex: 1; min-width: 0; }
.quest-copy .xp { max-width: none; margin-top: 6px; }
.quest-count {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    font-size: 13px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}
.chev {
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}
.yard-card.crop-online img { object-position: 28% 42%; }
.yard-card.crop-friends img { object-position: 50% 32%; }
.home-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 2px 0 4px;
}
.home-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 58px;
    padding: 6px 2px 5px;
    border: 1px solid var(--glass-line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 28%, color-mix(in srgb, var(--glass-bg-strong) 76%, transparent));
    color: var(--accent-text);
    box-shadow: none;
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
}
html[data-theme="light"] .home-action,
html[data-theme="dark"] .home-action {
    border-color: var(--glass-line);
    color: var(--text-primary);
    box-shadow: none;
}
.home-action:active {
    transform: translateY(1px);
    background: color-mix(in srgb, var(--accent) 34%, color-mix(in srgb, var(--glass-bg-strong) 80%, transparent));
}
html[data-theme="light"] .home-action small { color: var(--text-secondary); }
.home-action .round {
    display: grid;
    place-items: center;
    color: inherit;
}
.home-action .icon { width: 18px; height: 18px; }
.home-action small {
    width: 100%;
    max-height: 2.3em;
    overflow: hidden;
    text-align: center;
    font-size: 9px;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--accent-text);
}
.home-section {
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    color: var(--text-primary);
}
.home .section-head h2 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.home .section-head h2 .icon { width: 18px; height: 18px; }
.home-block { display: flex; flex-direction: column; gap: 8px; }
.home-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 2px;
}
.home-tools.home-tools-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-tools.home-tools-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.home-menu-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 10px 0 6px;
}
.home-menu-head:first-child { margin-top: 4px; }
.home-menu-head h2 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
}
.home-menu-head h2 .icon {
    width: 18px;
    height: 18px;
    color: var(--accent-text);
    flex: none;
}
.home-block .home-tools { margin-top: 0; }
.home-tool, .home-settings, .home-help, .home-logout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 70px;
    padding: 10px 4px 8px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    color: var(--text-primary);
    box-shadow: none;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}
.home-tool span, .home-settings span, .home-help span, .home-logout span {
    max-width: 100%;
}
.home-tool .icon, .home-settings .icon, .home-help .icon, .home-logout .icon { width: 28px; height: 28px; color: var(--accent-text); }
.home-logout { color: #c45c5c; }
html[data-theme="dark"] .home-logout { color: #fc8181; }
.home-logout .icon { color: currentColor; }
.home-tool:active, .home-settings:active, .home-help:active, .home-logout:active { transform: translateY(1px); }
.lane {
    width: 100%;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 8px;
    border-radius: 16px;
    background: var(--bg-elevated);
    box-shadow: none;
    color: inherit;
    text-align: left;
}
html[data-theme="dark"] .lane { box-shadow: none; }
.lane .story-art { width: 64px; height: 48px; border-radius: 12px; }
.lane-copy { min-width: 0; }
.lane-copy strong, .lane-copy small { display: block; }
.lane-copy strong { font-size: 13px; font-weight: 700; line-height: 1.2; }
.lane-copy small { color: var(--text-secondary); font-size: 11px; line-height: 1.2; }
.lane-aside { font-size: 12px; font-weight: 750; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.yield-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(132px, 1fr);
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.yield-row::-webkit-scrollbar { display: none; }
.yield-tile {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    border-radius: 16px;
    background: var(--bg-elevated);
    box-shadow: none;
    color: inherit;
    text-align: left;
}
html[data-theme="dark"] .yield-tile { box-shadow: none; }
.yield-ico {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: none;
    background: color-mix(in srgb, var(--accent) 18%, var(--bg-secondary));
    color: var(--accent-text);
}
.yield-ico .icon { width: 16px; height: 16px; }
.yield-copy { min-width: 0; }
.yield-copy small, .yield-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yield-copy small { font-size: 10px; font-weight: 600; line-height: 1.15; color: var(--text-secondary); }
.yield-copy strong { font-size: 13px; font-weight: 750; line-height: 1.15; font-variant-numeric: tabular-nums; }
.yield-copy strong.pos { color: var(--positive); }
.yield-copy strong.neg { color: var(--negative); }
.story-copy {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    padding: 8px 8px 7px;
    text-align: left;
    pointer-events: none;
}
.story-copy strong { color: #fffaf3; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.story-copy small {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    color: #f4ead8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.story-copy small span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse-row {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-radius: 18px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    box-shadow: none;
}
.pulse-side { text-align: right; font-variant-numeric: tabular-nums; }
.pulse-side strong { display: block; font-size: 13px; }
.story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.story-card {
    position: relative;
    display: block;
    min-width: 0;
    height: 124px;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    background: #1a140c;
    box-shadow: none;
}
.story-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.story-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(16, 12, 8, 0.62) 0%, rgba(16, 12, 8, 0.05) 34%, rgba(16, 12, 8, 0.02) 58%, rgba(16, 12, 8, 0.7) 100%);
    pointer-events: none;
}
html[data-theme="dark"] .story-card { box-shadow: none; }
.story-art { position: relative; display: block; height: 108px; border-radius: inherit; color: #1c140c; }
.story-art .icon { position: absolute; left: 10px; bottom: 10px; width: 28px; height: 28px; }
.story-art.gold { background: linear-gradient(160deg, #f0d48a, #a8743a); }
.story-art.sea { background: linear-gradient(160deg, #9ec0dc, #2d4e6d); color: #f6f1e8; }
.story-art.leaf { background: linear-gradient(160deg, #e4d2b4, #7a624c); }
.story-card strong { font-size: 13px; font-weight: 700; line-height: 1.2; }
.story-card small { font-size: 11px; line-height: 1.2; }
@media (max-width: 959px) {
    .topbar {
        padding: calc(4px + env(safe-area-inset-top)) 12px 4px;
        background: color-mix(in srgb, var(--bg-elevated) 70%, var(--bg-primary));
    }
    .topbar-desktop { display: none; }
    .topbar-mobile { display: flex; }
    .city-scene { height: auto; aspect-ratio: 3 / 2; margin-inline: calc(var(--space) * -1); border-radius: 0 0 22px 22px; }
    .pin { gap: 4px; max-width: 38%; padding: 2px 6px 2px 2px; font-size: 10px; box-shadow: 0 4px 10px rgba(20, 16, 10, 0.1); }
    .pin-ico { width: 20px; height: 20px; }
    .pin-ico .icon { width: 12px; height: 12px; }
    .pin .chev { width: 4px; height: 4px; }
}
@media (max-width: 359px) {
    .home-action small { font-size: 8px; letter-spacing: -0.02em; }
    .city-brand img { height: 32px; max-width: 80px; }
    .city-tools { gap: 2px; }
    .city-tools .icon-btn { width: 32px; height: 32px; min-height: 32px; }
    .city-player { max-width: calc(50% - 42px); }
}
@media (min-width: 390px) {
    .home-action { min-height: 64px; gap: 4px; border-radius: 12px; }
    .home-action .icon { width: 20px; height: 20px; }
    .home-action small { font-size: 9px; }
}
@media (min-width: 960px) {
    .home-actions { gap: 10px; }
    .home-action { min-height: 86px; border-radius: 14px; padding: 12px 6px 10px; }
    .home-action .icon { width: 26px; height: 26px; }
    .home-action small { font-size: 12px; }
}
@media (min-width: 960px) {
    .city-brand, .city-tools { display: none; }
    .city-head { min-height: 0; }
    .city-player { max-width: 220px; flex-direction: row; align-items: center; gap: 8px; }
    .topbar-user { margin-left: auto; max-width: 240px; }
    .city-player .avatar { width: 36px; height: 36px; font-size: 14px; }
    .city-id strong { font-size: 14px; }
    .city-meta em { font-size: 12px; }
    .city-meta .xp { width: 64px; min-width: 64px; max-width: 64px; height: 4px; }
    .city-scene { height: auto; aspect-ratio: 3 / 2; margin-top: 0; }
    .quest-card { margin-top: 0; }
    .home { width: 100%; min-width: 0; align-items: stretch; }
    .home > .res-strip {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        align-self: stretch;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .home > .res-strip > .res-chip {
        width: max-content;
        max-width: none;
    }
    .res-copy strong { font-size: 13px; }
    .res-copy small { font-size: 11px; }
    .res-ico { width: 16px; height: 16px; }
    .res-ico .icon { width: 14px; height: 14px; }
    .res-ico.res-wood,
    .res-ico.res-good,
    .res-ico.res-sikke,
    .res-ico.res-wood img,
    .res-ico.res-good img,
    .res-ico.res-sikke img { width: 16px; height: 16px; }
}
.rank {
    width: 28px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--accent-text);
    text-align: center;
}
.product-row.player-row { grid-template-columns: auto minmax(0, 1fr); }
.bank-balances .stat-card.is-source {
    background: color-mix(in srgb, var(--accent) 14%, var(--glass-bg));
}
.note.is-unread {
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
}
.leaders-card {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--glass-bg);
}
.leaders-tabs { display: flex; border-bottom: 1px solid var(--border-color); }
.leaders-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 46px;
    padding: 11px 8px;
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 13px;
    font-weight: 650;
    position: relative;
    box-shadow: none;
}
.leaders-tab.is-active { color: #e8a04a; font-weight: 750; }
html[data-theme="light"] .leaders-tab.is-active { color: #c07a1a; }
.leaders-tab.is-active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, #f6ad55, #ed8936);
}
.leaders-ico { display: inline-flex; }
.leaders-ico.is-xp { color: #f6ad55; }
.leaders-ico.is-balance { color: var(--positive); }
.leaders-tabs .icon { width: 14px; height: 14px; }
.leaders-empty { padding: 8px 12px 16px; }
.podium-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 8px;
    padding: 22px 8px 10px;
}
.podium-card {
    position: relative;
    flex: 1;
    max-width: 132px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 6px 12px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
    color: inherit;
    text-align: center;
    box-shadow: none;
    transition: transform .2s, background .2s, border-color .2s;
}
.podium-card:hover {
    transform: translateY(-4px);
    background: color-mix(in srgb, var(--text-primary) 9%, transparent);
}
html[data-theme="light"] .podium-card:hover {
    background: color-mix(in srgb, var(--accent) 18%, var(--glass-bg-strong));
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border-color));
}
.podium-card.rank-1 {
    transform: scale(1.06);
    border-color: color-mix(in srgb, #f6ad55 42%, var(--border-color));
    background: color-mix(in srgb, #f6ad55 12%, transparent);
}
.podium-card.rank-1:hover {
    transform: scale(1.06) translateY(-4px);
    background: color-mix(in srgb, #f6ad55 18%, transparent);
}
.podium-card.rank-2 { border-color: color-mix(in srgb, #a0aec0 50%, var(--border-color)); }
.podium-card.rank-3 { border-color: color-mix(in srgb, #ed8936 40%, var(--border-color)); }
.podium-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
}
.podium-card.rank-1 .podium-badge { background: linear-gradient(135deg, #f6ad55, #ed8936); }
.podium-card.rank-2 .podium-badge { background: linear-gradient(135deg, #a0aec0, #718096); }
.podium-card.rank-3 .podium-badge { background: linear-gradient(135deg, #ed8936, #c05621); }
.podium-card .avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 16px;
    border: 2px solid var(--border-color);
}
.podium-name {
    max-width: 100%;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.podium-name > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.podium-stat { font-size: 11px; color: var(--text-tertiary); line-height: 1.3; }
.podium-stat.is-xp { color: #e8a04a; font-weight: 700; }
html[data-theme="light"] .podium-stat.is-xp { color: #c05621; }
.podium-stat.is-balance { color: var(--positive); font-weight: 700; }
.leaders-list { padding: 0 6px 8px; }
.board-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    text-align: left;
    box-shadow: none;
    transition: background .15s;
}
.board-row:last-child { border-bottom: 0; }
.board-row:hover { background: color-mix(in srgb, var(--text-primary) 6%, transparent); }
html[data-theme="light"] .board-row:hover { background: color-mix(in srgb, var(--accent) 18%, var(--glass-bg-strong)); }
.rank-number {
    min-width: 28px;
    text-align: center;
    font-size: 12px;
    font-weight: 750;
    color: var(--text-tertiary);
}
.board-row .avatar.sm { width: 36px; height: 36px; border-radius: 10px; }
.board-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.place-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    font-weight: 700;
}
.place-name > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.board-stats { font-size: 12px; color: var(--text-tertiary); }
.board-stats .sikke-amt { font-size: 12px; }
.you {
    flex: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-text);
}
.podium-card.is-self, .board-row.is-self { background: color-mix(in srgb, var(--accent) 14%, transparent); }

.stat-scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(148px, 46%);
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    margin-bottom: 16px;
}
.stat-scroller::-webkit-scrollbar { display: none; }
.bank-balances { grid-auto-columns: minmax(132px, 42%); touch-action: pan-x; -webkit-overflow-scrolling: touch; }
.bank-ledger { margin-top: 22px; }
@media (min-width: 720px) {
    .bank-balances { grid-auto-columns: 168px; }
}
.stat-card, .product-row { box-shadow: none; }
.stat-card {
    scroll-snap-align: start;
    text-align: left;
    border-radius: var(--radius);
    padding: 14px;
    min-height: 104px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.stat-value { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat-value.pos { color: var(--positive); }
.stat-value.neg { color: var(--negative); }

.list { display: flex; flex-direction: column; gap: 8px; }
.product-row, .entry, .note, .panel {
    border-radius: var(--radius-sm);
    padding: 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-line);
}
.product-row, .entry, .note { width: 100%; text-align: left; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.product-ico, .cat-ico {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--cat, var(--accent)) 16%, var(--glass-bg-strong));
    color: var(--cat, var(--accent-text));
}
.product-row strong, .entry strong, .note strong { display: block; font-size: 16px; font-weight: 600; }
.product-row small { display: block; }
.gap-top { margin-top: 12px; }
.btn.compact { width: auto; min-height: 36px; padding: 0 12px; font-size: 13px; }
.toolbar .btn.compact { flex: none; }
.dm-page { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: 100%; }
.dm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.dm-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 18px; }
.dm-title > .fas { color: var(--accent); flex: none; }
.dm-count {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border-color));
    color: var(--accent-text);
    flex: none;
}
.dm-new, .dm-tool, .dm-pager {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--glass-bg);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
    flex: none;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.dm-new {
    background: color-mix(in srgb, var(--accent) 18%, var(--glass-bg));
    border-color: color-mix(in srgb, var(--accent) 36%, var(--border-color));
    color: var(--accent-text);
}
.dm-new > .fas {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--accent) 28%, transparent);
    color: var(--accent-text);
    font-size: 10px;
}
.dm-search { position: relative; display: block; width: 100%; }
.dm-search > .fas {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 13px;
    pointer-events: none;
}
.dm-search input {
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
    padding: 9px 13px 9px 36px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, .05);
}
html[data-theme="light"] .dm-search input { background: var(--glass-bg-strong); }
.dm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; width: 100%; }
.dm-tool.is-ok {
    background: color-mix(in srgb, var(--positive) 16%, var(--glass-bg));
    border-color: color-mix(in srgb, var(--positive) 34%, var(--border-color));
    color: var(--positive);
}
.dm-tool.is-danger {
    background: color-mix(in srgb, var(--danger) 14%, var(--glass-bg));
    border-color: color-mix(in srgb, var(--danger) 34%, var(--border-color));
    color: var(--danger);
}
.dm-tool:disabled { opacity: .4; }
.dm-picked { margin-left: auto; color: var(--text-secondary); font-size: 13px; }
.dm-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.dm-card {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--glass-bg) 78%, transparent);
    color: inherit;
    text-align: left;
}
html[data-theme="light"] .dm-card {
    background: var(--glass-bg);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.dm-card.is-on {
    background: color-mix(in srgb, var(--accent) 14%, var(--glass-bg));
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border-color));
}
.dm-card .avatar { width: 46px; height: 46px; border-radius: 12px; flex: none; }
.dm-check {
    width: 0;
    height: 18px;
    border-radius: 5px;
    border: 0 solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .04);
    flex: none;
    overflow: hidden;
    opacity: 0;
}
.dm-page.is-select .dm-check { width: 18px; border-width: 2px; opacity: 1; }
.dm-card.is-on .dm-check { background: var(--accent); border-color: var(--accent); }
.dm-card.is-on .dm-check::after {
    content: "";
    display: block;
    width: 5px;
    height: 9px;
    margin: 1px auto 0;
    border-right: 2px solid var(--accent-contrast);
    border-bottom: 2px solid var(--accent-contrast);
    transform: rotate(45deg);
}
.dm-ban {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex: none;
    background: color-mix(in srgb, var(--danger) 14%, var(--glass-bg));
    border: 1px solid color-mix(in srgb, var(--danger) 34%, var(--border-color));
    color: var(--danger);
}
.dm-body { flex: 1; min-width: 0; }
.dm-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.dm-meta { display: flex; align-items: center; gap: 7px; flex: none; }
.dm-name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dm-name.is-ban { color: var(--danger); font-style: italic; }
.dm-time { color: var(--text-tertiary); font-size: 12px; white-space: nowrap; }
.dm-unread {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.dm-preview { display: block; color: var(--text-secondary); font-size: 13px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-preview.is-unread { color: var(--text-primary); font-weight: 650; }
.dm-pages { display: flex; justify-content: center; gap: 6px; width: 100%; }
.dm-pager { min-width: 36px; }
.dm-pager.is-on {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border-color));
    color: var(--accent-text);
}
.dm-list .empty { padding: 40px 16px; text-align: center; }
.product-row small, .entry small, .note small { color: var(--text-secondary); font-size: 14px; }
.price-col { text-align: right; font-variant-numeric: tabular-nums; }
.delta { font-size: 13px; font-weight: 700; }
.delta.pos { color: var(--positive); }
.delta.neg { color: var(--negative); }
.delta.flat { color: var(--text-tertiary); }

.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 8px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
    border: 1px solid var(--border-color);
    background: var(--glass-bg);
    color: var(--text-secondary);
    border-radius: 999px;
    min-height: 32px;
    padding: 0 12px;
    font-size: 13px;
    white-space: nowrap;
    box-shadow: none;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.chip.is-active {
    background: color-mix(in srgb, var(--accent-soft) 88%, var(--glass-bg));
    color: var(--accent-text);
    border-color: var(--border-color);
}

.search { margin-bottom: 10px; }
.search.friend-search { display: block; margin: 0; }
.search.friend-search input {
    display: block;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.icon { width: 22px; height: 22px; display: block; }
.topbar .icon { width: 22px; height: 22px; }
.tab .icon { width: 22px; height: 22px; }
.tab.is-center .icon { width: 24px; height: 24px; }

.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: var(--nav-bg);
    border-top: 1px solid var(--glass-line);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(22px) saturate(165%);
    -webkit-backdrop-filter: blur(22px) saturate(165%);
}
.tab-main { display: contents; }
.tab-glide { display: none; }
.tab-extra, .tab-foot { display: none; }
.tab {
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 12px;
}
.tab.is-active { color: var(--accent-text); }
@media (max-width: 959px) {
    .tab { color: var(--nav-ink); font-weight: 650; }
    .tab.is-active { color: var(--nav-active); font-weight: 700; }
    .tab-fab {
        width: 44px;
        height: 36px;
        display: grid;
        place-items: center;
    }
    .tab .icon, .tab.is-center .icon { width: 22px; height: 22px; }
    .tab.is-active .tab-fab {
        background: var(--nav-active);
        color: var(--nav-active-text);
        border-radius: 14px;
    }
}
.tab.is-center {
    position: relative;
    z-index: 2;
}
.tab.is-center .tab-fab {
    width: 54px;
    height: 54px;
    margin-top: -26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.tab.is-center .tab-fab .icon {
    width: 24px;
    height: 24px;
}
.tab.is-center .tab-fab-media {
    background: transparent;
}
.tab-quick-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}
.tab.is-center > span:last-child {
    font-size: 10px;
    font-weight: 750;
    margin-top: 1px;
}
.tab.is-center.is-active { color: var(--accent-text); }
@media (max-width: 959px) {
    .tabbar { overflow: visible; }
    .tab.is-center .tab-fab {
        width: 56px;
        height: 56px;
        margin-top: -22px;
        border-radius: 50%;
        border: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .tab.is-center.is-active { color: var(--nav-ink); }
    .tab.is-center.is-active .tab-fab {
        background: transparent;
        box-shadow: none;
    }
    html[data-theme="dark"] .tab.is-center .tab-fab {
        border: 0;
        box-shadow: none;
    }
}
@media (max-width: 959px) {
    .tabbar {
        left: max(14px, env(safe-area-inset-left));
        right: max(14px, env(safe-area-inset-right));
        bottom: calc(12px + env(safe-area-inset-bottom));
        display: block;
        width: auto;
        padding: 6px;
        border-radius: 28px;
        border: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
        background: color-mix(in srgb, var(--glass-bg-strong) 74%, transparent);
        box-shadow: 0 14px 32px rgba(62, 44, 18, 0.14);
        backdrop-filter: blur(22px) saturate(165%);
        -webkit-backdrop-filter: blur(22px) saturate(165%);
    }
    html[data-theme="dark"] .tabbar {
        background: color-mix(in srgb, var(--glass-bg) 78%, transparent);
        box-shadow: 0 16px 34px rgba(4, 8, 16, 0.42);
    }
    html[data-theme="dark"] .tab-glide {
        background: color-mix(in srgb, var(--accent) 28%, var(--glass-bg-strong));
        border-color: color-mix(in srgb, var(--accent) 42%, transparent);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    }
    .tabbar { display: flex; align-items: stretch; }
    .tab-main {
        position: relative;
        display: grid;
        flex: 5 1 0;
        min-width: 0;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .tab-extra {
        display: flex;
        flex: 1 1 0;
        min-width: 0;
        align-items: stretch;
    }
    .tab-extra:not(:has(.tab-admin)) { display: none; }
    .tab-extra .tab { display: none; }
    .tab-extra .tab-admin {
        display: flex;
        flex: 1;
        min-width: 0;
        width: 100%;
    }
    .tab-admin span:last-child { font-size: 10px; letter-spacing: -0.02em; }
    .tab-glide {
        display: block;
        position: absolute;
        z-index: 0;
        top: 2px;
        bottom: 2px;
        left: 0;
        width: calc(100% / 5);
        border-radius: 20px;
        border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
        background: color-mix(in srgb, var(--accent) 34%, var(--glass-bg-strong));
        box-shadow: 0 8px 16px rgba(62, 44, 18, 0.08);
        backdrop-filter: blur(16px) saturate(160%);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
        transition: transform 0.38s cubic-bezier(0.22, 0.8, 0.2, 1);
        pointer-events: none;
    }
    .tab-glide[hidden] { display: none; }
    .tab {
        position: relative;
        z-index: 1;
        color: var(--text-secondary);
        min-height: 54px;
        font-size: 11px;
        font-weight: 650;
        background: transparent;
    }
    .tab.is-active,
    .tab.is-center.is-active { color: var(--accent-text); font-weight: 700; }
    .tab .tab-fab,
    .tab.is-active .tab-fab {
        width: auto;
        height: auto;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: inherit;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .tab.is-center .tab-fab,
    .tab.is-center.is-active .tab-fab {
        width: 56px;
        height: 56px;
        margin-top: -22px;
        padding: 0;
        overflow: hidden;
        border-radius: 50%;
        border: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .tab .icon { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .tab-glide { transition: none; }
}

.sheet-root, .modal-root { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.sheet-root.open, .modal-root.open { pointer-events: auto; }
.overlay { position: absolute; inset: 0; background: var(--overlay); opacity: 0; transition: opacity 0.25s ease; }
.sheet-root.open .overlay, .modal-root.open .overlay { opacity: 1; }
.modal-root .overlay { background: transparent; }
.modal-root .overlay.is-dim { background: var(--overlay); }
.sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    width: min(100%, 560px);
    border-radius: 24px 24px 0 0;
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
    transform: translateY(105%);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    max-height: min(88dvh, 760px);
    overflow: auto;
}
.sheet-root.open .sheet { transform: none; }
.sheet-handle { width: 42px; height: 4px; border-radius: 99px; background: var(--border-color); margin: 4px auto 12px; }
.modal {
    position: absolute;
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
    top: 50%;
    width: min(100% - 32px, 420px);
    margin: 0 auto;
    border-radius: 24px;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
    color: var(--text-primary);
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--glass-bg) 82%, transparent);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    max-height: min(78dvh, 640px);
    overflow: auto;
    transform: translateY(-50%);
    opacity: 1;
    z-index: 1;
}
.modal .btn,
.sheet .btn {
    background: color-mix(in srgb, var(--accent) 22%, var(--glass-bg-strong));
}
html[data-theme="dark"] .modal {
    border-color: var(--glass-line);
    background: color-mix(in srgb, var(--glass-bg) 74%, transparent);
    box-shadow: var(--glass-shadow);
}
html[data-theme="dark"] .modal-line {
    border-color: color-mix(in srgb, #e8f2ff 28%, transparent);
    background: color-mix(in srgb, #e8f2ff 16%, transparent);
}
.modal h2 { margin: 0 0 8px; font-size: 16px; letter-spacing: -0.03em; }
.modal .caption { margin: 0; line-height: 1.45; }
.modal-lines { display: grid; gap: 8px; margin-top: 14px; }
.modal-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, #fff 48%, transparent);
    background: color-mix(in srgb, #fff 32%, transparent);
}
.modal-line span { color: var(--text-secondary); font-size: 13px; font-weight: 650; }
.modal-line strong { font-size: 14px; text-align: right; }
@keyframes modal-in {
    0% { transform: translate3d(0, calc(-50% - 50px), 0) scale(0.9); opacity: 0; }
    100% { transform: translate3d(0, -50%, 0) scale(1); opacity: 1; }
}
.modal-root.open .modal {
    opacity: 1;
    transform: translateY(-50%);
    animation: modal-in 0.3s ease;
}
.modal,
.smith-modal-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.modal::-webkit-scrollbar,
.smith-modal-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
@keyframes smith-modal-in {
    0% { transform: translate3d(-50%, calc(-50% - 50px), 0) scale(0.9); opacity: 0; }
    100% { transform: translate3d(-50%, -50%, 0) scale(1); opacity: 1; }
}
@keyframes smith-modal-in-sheet {
    0% { transform: translate3d(0, -50px, 0) scale(0.9); opacity: 0; }
    100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}
.modal.smith-modal {
    left: 50%;
    right: auto;
    width: min(560px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: min(92dvh, 860px);
    transform: translate(-50%, -50%);
    transform-origin: center center;
}
.modal-root.open .modal.smith-modal {
    transform: translate(-50%, -50%);
    animation: smith-modal-in 0.3s ease;
}
.smith-modal-handle { display: none; }
.smith-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 12px 6px;
    flex: none;
    min-height: 0;
}
.smith-modal-head h2 { margin: 0; font-size: 15px; letter-spacing: -0.03em; line-height: 1.15; }
.smith-modal-head .caption { margin-top: 2px; }
.smith-modal-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
    color: var(--text-primary);
    display: grid;
    place-items: center;
    flex: none;
}
.smith-modal-close .icon { width: 18px; height: 18px; }
.smith-modal-note {
    margin: 8px 14px 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.4;
    flex: none;
}
.smith-modal-scroll {
    overflow: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    -webkit-overflow-scrolling: touch;
}
.forge-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
}
html[data-theme="dark"] .forge-card {
    border-color: color-mix(in srgb, #e8f2ff 22%, transparent);
    background: color-mix(in srgb, #e8f2ff 10%, transparent);
}
.forge-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}
.forge-out {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    flex: none;
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-secondary));
}
.forge-out img { width: 36px; height: 36px; object-fit: contain; display: block; }
.forge-owned {
    position: absolute;
    right: -6px;
    bottom: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 750;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.forge-copy { min-width: 0; }
.forge-copy strong {
    display: block;
    font-size: 15px;
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.forge-copy small {
    display: block;
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.2;
}
.forge-time {
    flex: none;
    padding: 6px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent-text);
    font-size: 12px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.forge-mats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.forge-mat {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-primary) 55%, transparent);
}
.forge-mat img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.forge-mat em {
    display: block;
    font-style: normal;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.forge-mat em.is-short { color: var(--negative); }
.forge-mat small {
    display: block;
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.forge-mat-copy { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.forge-top { display: flex; gap: 10px; align-items: center; }
.forge-top img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.forge-top strong { display: block; font-size: 14px; }
.forge-need { margin: 8px 0 0; font-size: 13px; font-weight: 650; }
.forge-card .caption { margin: 4px 0 0; }
.smith-modal .qty-picks,
.forge-card .qty-picks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
    gap: 6px;
    margin: 0;
}
.forge-card .btn {
    margin-top: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}
.forge-card .qty-picks .btn {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 0 4px;
    font-variant-numeric: tabular-nums;
}
.forge-card .btn.secondary {
    background: color-mix(in srgb, var(--bg-primary) 40%, transparent);
    border-color: var(--border-color);
}
html[data-theme="dark"] .forge-card .btn.secondary {
    background: color-mix(in srgb, #e8f2ff 12%, transparent);
    border-color: color-mix(in srgb, #e8f2ff 22%, transparent);
    color: var(--text-primary);
}
.forge-card .qty-picks .btn.is-on {
    background: color-mix(in srgb, var(--accent) 28%, transparent);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    color: var(--accent-text);
}
.forge-card > .btn {
    background: color-mix(in srgb, var(--accent) 22%, var(--glass-bg-strong));
    border-color: color-mix(in srgb, var(--accent) 42%, transparent);
    min-height: 44px;
}
@media (max-width: 959px) {
    .modal-root.open .modal.smith-modal {
        left: max(14px, env(safe-area-inset-left));
        right: max(14px, env(safe-area-inset-right));
        width: auto;
        top: max(36px, calc(env(safe-area-inset-top) + 20px));
        bottom: auto;
        transform: none;
        max-height: calc(100dvh - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        border-radius: 22px;
        transform-origin: center top;
        animation: smith-modal-in-sheet 0.3s ease;
    }
    .smith-modal-handle {
        display: block;
        width: 32px;
        height: 3px;
        border-radius: 99px;
        background: var(--border-color);
        margin: 10px auto 0;
        flex: none;
    }
    .modal.smith-modal .smith-modal-head {
        padding: 12px 12px 4px;
    }
    .smith-modal-scroll {
        padding: 8px 8px 10px;
        gap: 8px;
    }
    .forge-card {
        padding: 8px;
        gap: 6px;
        border-radius: 14px;
        min-width: 0;
    }
    .forge-head {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 6px;
        align-items: center;
    }
    .forge-out { width: 40px; height: 40px; border-radius: 12px; }
    .forge-out img { width: 26px; height: 26px; }
    .forge-owned { min-width: 16px; height: 16px; padding: 0 4px; font-size: 9px; right: -4px; bottom: -4px; }
    .forge-copy strong {
        font-size: 13px;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .forge-copy small { font-size: 11px; }
    .forge-time {
        min-width: 0;
        max-width: 100%;
        padding: 4px 6px;
        font-size: 11px;
        white-space: nowrap;
    }
    .forge-mats { gap: 6px; }
    .forge-mat {
        padding: 5px 6px;
        gap: 6px;
        border-radius: 12px;
    }
    .forge-mat img { width: 20px; height: 20px; }
    .forge-mat em { font-size: 12px; }
    .forge-mat small { font-size: 10px; }
    .forge-mat em,
    .forge-mat small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .forge-card .qty-picks {
        grid-template-columns: repeat(auto-fit, minmax(28px, 1fr));
        gap: 4px;
    }
    .forge-card .qty-picks .btn {
        width: 100%;
        min-width: 0;
        min-height: 30px;
        padding: 0 2px;
        font-size: 12px;
        line-height: 1;
    }
    .forge-card > .btn {
        min-height: 36px;
        font-size: 14px;
        padding: 0 8px;
    }
}
.forge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-content: start;
}
.forge-grid .forge-card {
    min-width: 0;
}
.forge-grid .forge-mats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}
.forge-grid .forge-mat {
    width: 100%;
    min-width: 0;
}
.forge-grid .forge-mat img {
    width: 22px;
    height: 22px;
}
.forge-grid .forge-mat em { font-size: 13px; }
.forge-grid .forge-mat small { font-size: 10px; }
@media (max-width: 959px) {
    .forge-grid { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .modal-root.open .modal, .puzzle-dialog { animation: none; }
}
@media (max-width: 380px) {
    .forge-head { gap: 4px; }
    .forge-out { width: 34px; height: 34px; border-radius: 10px; }
    .forge-out img { width: 22px; height: 22px; }
    .forge-copy strong { font-size: 12px; }
    .forge-copy small { font-size: 10px; }
    .forge-time { padding: 3px 5px; font-size: 10px; }
    .forge-mat { padding: 4px; gap: 4px; }
    .forge-mat img { width: 18px; height: 18px; }
    .forge-mat em { font-size: 11px; }
    .forge-card .qty-picks .btn { min-height: 28px; font-size: 11px; }
    .forge-card > .btn { min-height: 34px; font-size: 13px; }
}
.modal-actions, .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.modal-actions .btn { min-width: 0; white-space: normal; margin-top: 0; }
@media (max-width: 959px) {
    .trade-dock {
        position: fixed;
        left: max(12px, env(safe-area-inset-left));
        right: max(12px, env(safe-area-inset-right));
        bottom: calc(96px + env(safe-area-inset-bottom));
        z-index: 25;
        margin: 0;
    }
}

.quote-box { display: grid; gap: 8px; margin: 12px 0; }
.quote-line { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.quote-line strong { font-weight: 700; }
.warn { color: var(--warning); font-size: 13px; margin-top: 12px; }

.stepper { display: grid; grid-template-columns: 48px 1fr 48px auto; gap: 8px; align-items: center; }
.stepper button {
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--glass-bg);
    box-shadow: none;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.stepper input { text-align: center; font-variant-numeric: tabular-nums; }

.toast-root {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    left: 16px;
    right: 16px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
body:has(#shell:not([hidden])) .toast-root {
    top: calc(98px + env(safe-area-inset-top));
}
.toast {
    margin: 0 auto;
    width: min(100%, 420px);
    border-radius: 16px;
    padding: 12px 16px;
    color: var(--text-primary);
    border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent);
    background: color-mix(in srgb, var(--accent) 16%, color-mix(in srgb, var(--bg-elevated) 78%, transparent));
    box-shadow: 0 8px 18px rgba(12, 16, 10, 0.22);
    backdrop-filter: blur(16px) saturate(165%);
    -webkit-backdrop-filter: blur(16px) saturate(165%);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.02em;
    animation: rise 0.25s ease;
}
.toast.danger {
    border-color: color-mix(in srgb, var(--accent-2) 52%, transparent);
}
html[data-theme="dark"] .toast {
    border-color: color-mix(in srgb, var(--accent) 48%, transparent);
    background: color-mix(in srgb, var(--accent) 20%, color-mix(in srgb, var(--bg-elevated) 82%, transparent));
    box-shadow: 0 8px 18px rgba(4, 8, 16, 0.32);
}
html[data-theme="dark"] .toast.danger {
    border-color: color-mix(in srgb, var(--accent-2) 55%, transparent);
}
.toast.out { opacity: 0; transition: opacity 0.2s ease; }

.chart { width: 100%; height: 120px; display: block; color: var(--chart); }
.chart.down { color: var(--negative); }
.detail-hero { display: flex; justify-content: space-between; gap: 12px; align-items: flex-end; margin-bottom: 8px; }
.detail-hero .stat-value { font-size: 26px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.fact { padding: 12px; border-radius: 16px; background: var(--bg-elevated); border: 1px solid var(--border-color); }
.fact b { display: block; margin-top: 4px; font-variant-numeric: tabular-nums; }

.empty, .error-state {
    text-align: center;
    padding: 28px 18px;
    border-radius: 28px;
    border: 1px solid var(--glass-line);
    background: var(--glass-bg-strong);
    box-shadow: none;
    backdrop-filter: blur(22px) saturate(165%);
    -webkit-backdrop-filter: blur(22px) saturate(165%);
}
.error-state { width: min(100%, 420px); }
.empty h2, .error-state h2 { margin: 8px 0; font-size: 18px; }
.empty p, .error-state p { color: var(--text-secondary); margin: 0 0 16px; }
.empty-mark {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    color: var(--accent-text);
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.empty-mark .icon { width: 28px; height: 28px; }
.empty-mark i { font-size: 26px; line-height: 1; }
.empty .btn { width: auto; min-width: 180px; margin-top: 4px; }

.skeleton-card, .skeleton-line {
    border-radius: 16px;
    background: linear-gradient(90deg, var(--bg-elevated), color-mix(in srgb, var(--text-primary) 8%, var(--bg-elevated)), var(--bg-elevated));
    background-size: 200% 100%;
    animation: shimmer 1.2s ease infinite;
    min-height: 72px;
    margin-bottom: 8px;
}
.skeleton-line { min-height: 14px; width: 40%; }

.profile-hero { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.profile-hero .avatar { width: 56px; height: 56px; border-radius: 18px; font-size: 18px; }
.profile { display: flex; flex-direction: column; gap: 12px; }
.profile-card {
    border-radius: 22px;
    padding: 16px;
}
.profile-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.profile-copy { min-width: 0; }
.profile-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-name h2 { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -0.03em; line-height: 1.15; overflow-wrap: anywhere; }

/* avatar level pill (ticarisk home style) */
.avatar-wrap {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    padding-bottom: 8px;
    line-height: 0;
}
.avatar-wrap .avatar { display: inline-grid; }
.avatar-level {
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--bg-primary) 92%, #121628);
    color: color-mix(in srgb, var(--accent-text) 88%, #fff);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.01em;
    pointer-events: none;
    box-shadow: 0 2px 8px color-mix(in srgb, #000 35%, transparent);
    z-index: 1;
}
html[data-theme="light"] .avatar-level {
    background: #fff;
    border-color: color-mix(in srgb, var(--accent) 28%, transparent);
    color: var(--accent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 12%, transparent);
}
.profile-card .avatar-wrap { align-self: flex-start; }

.profile-card .avatar.lg {
    width: 72px;
    height: 72px;
    border-radius: 24px;
    font-size: 22px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 42%, transparent);
}
.profile-card button.avatar { cursor: pointer; }
.profile-card button.avatar:hover {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 72%, transparent);
}
.photo-fallback {
    width: min(70vw, 280px);
    height: min(70vw, 280px);
    margin: 0 auto;
    border-radius: 36px;
    display: grid;
    place-items: center;
    font-size: 72px;
    font-weight: 750;
    background: var(--accent-soft);
    color: var(--accent-text);
}
.profile-card .bio { margin: 12px 0 0; font-size: 13px; line-height: 1.45; }
.profile-xp { margin-top: 14px; }
.profile-xp .xp { max-width: none; height: 8px; }
.profile-since { margin: 12px 0 0; color: var(--text-secondary); font-size: 12px; }
.profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.profile-stats.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.profile-stats .stat-card { min-height: 0; padding: 12px 10px; border-radius: 16px; }
.profile-stats .stat-label { font-size: 11px; }
.profile-stats .stat-value { font-size: 15px; margin-top: 6px; overflow-wrap: anywhere; }
.profile-links { gap: 8px; }
.profile-block { border-radius: 22px; padding: 14px 14px 12px; }
.profile-block-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 750;
}
.profile-block-title i { color: var(--accent-text); font-size: 14px; }
.profile-block-title .translate-btn { margin-left: auto; }
.profile-about-text {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.profile-about-text.is-empty,
.profile-empty { margin: 0; color: var(--text-tertiary); font-size: 13px; }
.friend-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 8px;
}
.friend-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.friend-face {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: 14px;
    font-weight: 750;
}
.friend-face img { width: 100%; height: 100%; object-fit: cover; }
.friend-name {
    max-width: 100%;
    font-size: 11px;
    font-weight: 650;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.friend-more { width: 100%; margin-top: 10px; }
@media (max-width: 520px) {
    .friend-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.profile-links .product-row { border-radius: 16px; min-height: 64px; }
.profile-links .chev { color: var(--text-secondary); }
.market { display: flex; flex-direction: column; gap: 12px; }
.market .toolbar, .market .search, .market .chips { margin: 0; }
.market .chips { padding-bottom: 0; }
.market .product-row { border-radius: 16px; min-height: 68px; }
.market .price-col strong { font-size: 14px; }
.modal .quote-box { margin: 12px 0 0; }
.modal .quote-box .modal-lines { margin-top: 0; }
.modal .stepper { margin-top: 12px; }
.modal .warn { margin-top: 8px; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.choice-label { display: block; margin-bottom: 8px; color: var(--text-primary); font-size: 13px; font-weight: 700; }
.pref-card { display: flex; flex-direction: column; }
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 2px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}
.toggle-row:first-child { padding-top: 2px; }
.toggle-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.toggle-copy { min-width: 0; }
.toggle-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.toggle-sub { display: block; margin-top: 2px; color: var(--text-secondary); font-size: 12px; }
.toggle-ico { width: 16px; text-align: center; }
.toggle-row .is-dark { color: #8faeff; }
.toggle-row .is-on { color: var(--positive); }
.toggle-row .is-light,
.toggle-row .is-off { display: none; color: var(--text-tertiary); }
.toggle-row:has(input:not(:checked)) .is-dark,
.toggle-row:has(input:not(:checked)) .is-on { display: none; }
.toggle-row:has(input:not(:checked)) .is-light,
.toggle-row:has(input:not(:checked)) .is-off { display: inline-block; }
.apple-switch { position: relative; display: inline-block; width: 50px; height: 28px; flex: none; }
.apple-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.apple-slider {
    position: absolute;
    inset: 0;
    border-radius: 99px;
    background: color-mix(in srgb, var(--text-primary) 12%, transparent);
    border: 1px solid var(--border-color);
    transition: background .2s;
}
.apple-slider::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .28);
    transition: transform .2s;
}
.apple-switch input:checked + .apple-slider { background: var(--accent); border-color: transparent; }
.apple-switch input:checked + .apple-slider::before { transform: translateX(22px); }
.apple-switch input:focus-visible + .apple-slider { outline: 2px solid var(--accent); outline-offset: 2px; }
.apple-switch input:disabled + .apple-slider { opacity: .6; }
.picker-row { display: flex; gap: 8px; margin-top: 14px; }
.picker-pill {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--glass-bg);
    color: inherit;
}
.picker-pill > span:last-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-flag, .pick-flag { display: inline-flex; flex: none; line-height: 0; }
.flag-pair { display: inline-flex; flex: none; align-items: center; line-height: 0; }
.flag-img { display: inline-flex; flex: none; }
.flag-img .flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; display: block; }
.flag-emoji { display: none; font-size: 16px; line-height: 1; }
.flag-pair.is-emoji .flag-img { display: none; }
.flag-pair.is-emoji .flag-emoji { display: inline; }
.picker-pill .fa-chevron-down { margin-left: auto; font-size: 11px; color: var(--text-tertiary); }
.set-row {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 10px 12px 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-elevated) 55%, transparent);
    color: inherit;
    text-align: left;
}
.set-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}
.set-row.username::before { background: #4a6cf7; }
.set-row.password::before { background: #68d391; }
.set-row.email::before { background: #f6ad55; }
.set-row.google::before { background: #4285f4; }
.set-row.apple::before { background: #c7c7cc; }
.set-row.devices::before { background: #7aa2d6; }
.set-row.danger::before { background: #fc8181; }
.set-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.set-row.username .set-ico { background: rgba(74, 108, 247, .16); color: #8faeff; }
.set-row.password .set-ico { background: rgba(104, 211, 145, .16); color: #68d391; }
.set-row.email .set-ico { background: rgba(246, 173, 85, .16); color: #f6ad55; }
.set-row.google .set-ico { background: rgba(66, 133, 244, .16); color: #4285f4; }
.set-row.apple .set-ico { background: rgba(255, 255, 255, .08); color: #e8eaf0; }
.set-row.devices .set-ico { background: rgba(122, 162, 214, .16); color: #8eb4e8; }
.set-row.danger .set-ico { background: rgba(252, 129, 129, .16); color: #fc8181; }
html[data-theme="light"] .set-row.username .set-ico { color: #3a56c9; }
html[data-theme="light"] .set-row.apple .set-ico { background: rgba(0, 0, 0, .06); color: #1a1f36; }
html[data-theme="light"] .set-row.devices .set-ico { color: #3d6294; }
.tone-user { color: #8faeff; margin-right: 8px; }
.tone-mail { color: #f6ad55; margin-right: 8px; }
.tone-key { color: #68d391; margin-right: 8px; }
html[data-theme="light"] .tone-user { color: #3a56c9; }
.gem-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 4px 0 12px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(0, 191, 255, .28);
    background: rgba(0, 191, 255, .08);
}
.gem-note > i { color: #00bfff; margin-top: 2px; }
.gem-note strong, .gem-note small { display: block; }
.gem-note small { color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
.gem-note.mail { border-color: rgba(246, 173, 85, .28); background: rgba(246, 173, 85, .1); }
.gem-note.mail > i { color: #f6ad55; }
.verify-or { margin: 2px 0; text-align: center; color: var(--text-tertiary); font-size: 12px; }
.verify-stack { display: flex; flex-direction: column; gap: 8px; }
.verify-btn {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: transparent;
    color: inherit;
    text-align: left;
}
.verify-btn::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.verify-btn.google { background: rgba(66, 133, 244, .08); border-color: rgba(66, 133, 244, .28); }
.verify-btn.google::before { background: #4285f4; }
.verify-btn.google .set-ico { background: rgba(66, 133, 244, .16); color: #4285f4; }
.verify-btn.apple { background: rgba(255, 255, 255, .05); }
.verify-btn.apple::before { background: #c7c7cc; }
.verify-btn > span:nth-child(2) { flex: 1; }
.verify-btn > .fa-chevron-right { color: var(--text-tertiary); font-size: 12px; }
.verify-ok {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(104, 211, 145, .12);
    color: #3c9a62;
    border: 1px solid rgba(104, 211, 145, .28);
}
html[data-theme="dark"] .verify-ok { color: #68d391; }
html[data-theme="light"] .verify-btn.apple { background: rgba(0, 0, 0, .04); }
html[data-theme="light"] .verify-btn.apple .set-ico { background: rgba(0, 0, 0, .06); color: #1a1f36; }
.set-copy { flex: 1; min-width: 0; }
.set-copy strong, .set-copy small { display: block; }
.set-copy small { color: var(--text-secondary); font-size: 12px; }
.set-row > .fa-chevron-right { color: var(--text-tertiary); font-size: 12px; }
.pick-list { display: flex; flex-direction: column; gap: 2px; width: 100%; max-height: min(52vh, 420px); overflow: auto; margin-top: 8px; }
.pick-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    text-align: left;
}
.pick-item.is-active { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.pick-item[hidden] { display: none; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.choice-grid:not(.cols-3) .choice {
    flex-direction: row;
    justify-content: flex-start;
    min-height: 64px;
    padding: 10px 14px;
    gap: 12px;
}
.choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 92px;
    padding: 12px 8px;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    background: var(--glass-bg);
    color: var(--text-secondary);
    box-shadow: none;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.choice strong { color: var(--text-primary); font-size: 13px; font-weight: 700; }
.choice.is-active {
    border-color: var(--border-color);
    background: color-mix(in srgb, var(--accent-soft) 82%, var(--glass-bg));
    box-shadow: none;
}
.choice.is-active strong { color: var(--accent-text); }
.choice-badge {
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    padding: 0;
}
.flag { width: 36px; height: 24px; display: block; object-fit: cover; border-radius: 4px; }
.theme-ico {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-secondary) 70%, var(--glass-bg));
    border: 1px solid var(--border-color);
}
.theme-ico svg { width: 20px; height: 20px; }
.choice.is-active .theme-ico {
    color: var(--accent-text);
    background: color-mix(in srgb, var(--accent) 16%, var(--glass-bg));
    border-color: var(--border-color);
}
.swatch {
    width: 100%;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
.swatch svg { width: 22px; height: 22px; }
.swatch.light { background: linear-gradient(180deg, #f7f3ee, #e3dbd2); color: #6a4c1c; }
.swatch.dark { background: linear-gradient(180deg, #1a2740, #10192b); color: #d5e7fb; border-color: #243656; }
.swatch.system { background: linear-gradient(135deg, #f3eee8 50%, #10192b 50%); color: #b8893d; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 12px; }
.kv > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kv b { font-variant-numeric: tabular-nums; }
.help-card { padding: 16px 18px; border-radius: var(--radius); margin: 0 0 12px; }
.help-card h3 { margin: 0 0 6px; font-size: 15px; }
.help-card p { margin: 0; color: var(--text-secondary); }
[data-category="food"] { --cat: #c47b4a; }
[data-category="agriculture"] { --cat: #6ea84a; }
[data-category="metal"] { --cat: #7f97ab; }
[data-category="energy"] { --cat: #d3923a; }
[data-category="electronics"] { --cat: #3d9ec4; }
[data-category="textile"] { --cat: #c46b8a; }
[data-category="industry"] { --cat: #8d8474; }
[data-category="automotive"] { --cat: #6d7ea8; }
[data-category="luxury"] { --cat: #c6a15a; }

@media (min-width: 720px) {
    .stat-scroller { grid-auto-columns: minmax(160px, 1fr); grid-template-columns: repeat(4, 1fr); grid-auto-flow: unset; overflow: visible; }
    .view { padding-left: 24px; padding-right: 24px; }
}

.top-actions { gap: 3px; }
.view:has(.chat-screen) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.world-dock { display: none; }
body:has(#shell[hidden]) .world-dock { display: none; }
.dock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px 12px;
    flex: none;
    border-bottom: 1px solid var(--border-color);
}
.dock-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; letter-spacing: -0.02em; }
.dock-body .msg { max-width: 100%; min-width: 0; }
.dock-body .msg:has(.msg-translate) { max-width: calc(100% - 26px); }
.dock-body .msg .avatar.sm { width: 28px; height: 28px; border-radius: 10px; font-size: 11px; }
.dock-body .bubble-name > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 12px 12px; }
.dock-body .chat-screen { flex: 1; min-height: 0; }
.dock-body .chat-log { padding: 12px 2px 10px; gap: 10px; }
.dock-body .composer {
    align-items: center;
    gap: 6px;
    margin-top: 0;
    padding: 4px 4px 4px 14px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-primary) 42%, var(--glass-bg-strong));
}
.dock-body .composer textarea {
    min-height: 40px;
    height: 40px;
    padding: 9px 2px;
    line-height: 20px;
    overflow: hidden;
    border-color: transparent;
    border-radius: 12px;
    background: transparent;
}
.dock-body .composer .btn.send {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 12px;
}
.dock-jump {
    position: absolute;
    z-index: 2;
    right: 18px;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--glass-bg-strong);
    color: var(--accent-text);
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    box-shadow: none;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.dock-jump.is-on { opacity: 1; pointer-events: auto; transform: none; }
body.is-dock-collapsed .dock-jump,
body[data-screen="chat"] .dock-jump { display: none; }
.chat-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-screen > .section-head,
.chat-screen > .composer { flex: none; }
.chat-screen > .section-head { justify-content: flex-start; gap: 10px; }
.chat-log {
    flex: 1;
    min-height: 0;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 8px;
}
.chat-log::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.bubble {
    position: relative;
    min-width: 0;
    padding: 10px 14px;
    border-radius: 18px 18px 18px 6px;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    box-shadow: none;
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    font-size: 14px;
}
.bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-blocked-notice { color: #e07a7a; font-size: 13px; font-style: italic; margin: 0 0 4px; }
.msg-blocked-original { color: #e7a3a3; font-size: 12px; margin: 0; }
.bubble.is-blocked { border-color: color-mix(in srgb, #e07a7a 45%, var(--border-color)); }
.bubble small { display: block; margin-top: 4px; color: var(--text-tertiary); font-size: 12px; }
.msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    align-self: flex-start;
    width: fit-content;
    max-width: min(88%, 520px);
}
.msg-side { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.msg-time { display: inline-flex; align-items: center; font-size: 12px; line-height: 1; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.bubble[data-channel="direct"] { padding: 8px 12px 22px; min-width: 90px; }
.bubble[data-channel="direct"] .msg-time {
    position: absolute;
    right: 8px;
    bottom: 5px;
    left: 8px;
    justify-content: flex-end;
    gap: 3px;
    font-size: 10px;
    color: rgba(255, 255, 255, .65);
    pointer-events: none;
}
html[data-theme="light"] .bubble[data-channel="direct"] .msg-time { color: rgba(26, 31, 54, .45); }
.tick-icon { margin-left: 3px; font-size: 11px; }
.tick-sent, .tick-delivered { color: rgba(255, 255, 255, .45); }
.tick-seen { color: #7dd8ff; }
html[data-theme="light"] .tick-sent,
html[data-theme="light"] .tick-delivered { color: rgba(26, 31, 54, .35); }
html[data-theme="light"] .tick-seen { color: #2b7fd4; }
.dm-identity { min-width: 0; display: flex; align-items: center; gap: 10px; }
.chat-screen .dm-back {
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
}
.chat-screen .dm-back .icon { width: 16px; height: 16px; }
.avatar.sm.dm-avatar { width: 36px; height: 36px; border-radius: 50%; font-size: 13px; cursor: pointer; }
.dm-peer { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-presence { margin: 0; font-size: 11px; line-height: 1.2; color: var(--text-tertiary); }
.dm-presence.is-online { color: #34c759; }
.msg.mine { align-self: flex-end; margin-left: auto; }
.bubble.mine {
    border-radius: 18px 18px 6px 18px;
    background: color-mix(in srgb, var(--accent) 18%, var(--glass-bg));
    border-color: var(--border-color);
    color: var(--text-primary);
}
.bubble.mine small { color: var(--accent-text); }
.bubble-name {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    cursor: default;
    border: 0;
    background: none;
    padding: 0;
    margin-bottom: 2px;
    color: var(--accent-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.01em;
    min-height: 0;
}
.bubble.mine .bubble-name { color: var(--accent-text); }
.msg-flag .flag { width: 14px; height: 10px; border-radius: 2px; }
.bubble-wrap { position: relative; min-width: 0; max-width: 100%; }
.bubble-quote {
    margin: 0 0 6px;
    padding: 5px 8px;
    border-left: 3px solid #7dd8ff;
    border-radius: 6px;
    background: rgba(255, 255, 255, .07);
}
.bubble-quote strong, .bubble-quote span { display: block; }
.bubble-quote strong { margin-bottom: 2px; color: #7dd8ff; font-size: 11px; font-weight: 700; }
.bubble-quote span {
    max-width: 240px;
    overflow: hidden;
    color: rgba(255, 255, 255, .5);
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
html[data-theme="light"] .bubble-quote { border-left-color: #4a6cf7; background: rgba(74, 108, 247, .07); }
html[data-theme="light"] .bubble-quote strong { color: #2b7fd4; }
html[data-theme="light"] .bubble-quote span { color: rgba(26, 31, 54, .58); }
.msg-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-delete {
    margin-left: auto;
    flex: none;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    background: none;
    color: #dc3545;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}
.msg-translate {
    position: absolute;
    right: -25px;
    bottom: 2px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.msg-translate img { display: block; width: 17px; height: 17px; }
.msg-translate.is-loading { opacity: .4; pointer-events: none; }
.msg-translated {
    margin-top: 5px;
    padding: 5px 8px;
    border-left: 2px solid rgba(77, 182, 245, .45);
    border-radius: 6px;
    background: rgba(77, 182, 245, .08);
    color: rgba(200, 230, 255, .88);
    font-size: 13px;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.msg-translated[hidden] { display: none; }
html[data-theme="light"] .msg-translated {
    border-left-color: rgba(74, 108, 247, .35);
    background: rgba(74, 108, 247, .06);
    color: rgba(26, 31, 54, .75);
}
.msg:has(.msg-like) { margin-bottom: 10px; }
.msg-like {
    position: absolute;
    right: 8px;
    bottom: -12px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 6px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(30, 30, 60, .8);
    color: rgba(255, 255, 255, .82);
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
}
.msg-like i { font-size: 12px; line-height: 1; }
.msg-like.is-on { border-color: rgba(255, 77, 106, .6); }
.msg-like.is-on i { color: #ff4d6a; }
html[data-theme="light"] .msg-like {
    border-color: var(--glass-line);
    background: var(--glass-bg-strong);
    color: var(--text-secondary);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}
.msg-penalty {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--warning);
}
.reply-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    padding: 7px 12px 7px 10px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, #fff 28%, transparent);
    background: color-mix(in srgb, var(--glass-bg) 62%, transparent);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.reply-bar[hidden] { display: none; }
.reply-accent {
    flex: none;
    align-self: stretch;
    width: 3px;
    min-height: 28px;
    border-radius: 2px;
    background: #4db6f5;
}
.reply-info { flex: 1; min-width: 0; }
.reply-bar strong, .reply-bar p { margin: 0; }
.reply-bar strong { display: block; color: #4db6f5; font-size: 11px; font-weight: 700; line-height: 1.3; }
.reply-bar p {
    overflow: hidden;
    color: rgba(255, 255, 255, .6);
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}
html[data-theme="light"] .reply-bar p { color: rgba(26, 31, 54, .58); }
.reply-cancel {
    display: grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: .5px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .75);
    font-size: 13px;
}
html[data-theme="light"] .reply-cancel {
    border-color: rgba(0, 0, 0, .08);
    background: rgba(0, 0, 0, .04);
    color: #1a1f36;
}
#msg-menu {
    position: fixed;
    z-index: 45;
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    max-width: min(calc(100vw - 16px), 480px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 6px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, #fff 28%, transparent);
    background: color-mix(in srgb, var(--glass-bg) 58%, transparent);
    box-shadow: 0 12px 28px rgba(4, 8, 16, 0.32);
    backdrop-filter: blur(22px) saturate(165%);
    -webkit-backdrop-filter: blur(22px) saturate(165%);
}
#msg-menu[hidden] { display: none; }
.msg-menu-btn {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 64px;
    white-space: nowrap;
    padding: 8px 8px 6px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 700;
}
.msg-menu-btn i { font-size: 16px; line-height: 1; }
.msg-menu-btn.is-danger { color: var(--danger); }
.msg-menu-btn.is-on,
.msg-menu-btn.is-on i { color: #ff4d6a; }
.msg-menu-btn[data-act="quote"] i { color: #4db6f5; }
.mod-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mod-head .screen-title { margin: 0; }
.mod-back, .mod-text, .mod-more, .mod-act, .mod-danger, .mod-tab, .mod-pager {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
    color: inherit;
    font-size: 13px;
    font-weight: 650;
}
.mod-back { margin-bottom: 0; }
.mod-text { border: 0; background: transparent; color: var(--accent-text); padding: 0; min-height: 0; }
.mod-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0 16px; }
.mod-shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-height: 104px;
    padding: 14px 8px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--glass-bg) 78%, transparent);
    color: inherit;
    text-align: center;
    font-size: 13px;
}
.mod-shortcut .s-icon, .mod-block h3 .s-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 16px;
}
.mod-shortcut.is-orange .s-icon, .mod-block.is-orange h3 .s-icon { background: rgba(246, 173, 85, .14); color: #f6ad55; }
.mod-shortcut.is-pink .s-icon { background: rgba(237, 100, 166, .14); color: #f687b3; }
.mod-shortcut.is-blue .s-icon, .mod-block.is-blue h3 .s-icon { background: rgba(74, 108, 247, .16); color: #8faeff; }
.mod-shortcut.is-red .s-icon, .mod-block.is-red h3 .s-icon { background: rgba(252, 129, 129, .14); color: #fc8181; }
.mod-shortcut.is-purple .s-icon, .mod-block.is-purple h3 .s-icon { background: rgba(167, 139, 250, .16); color: #c4b5fd; }
.mod-shortcut.is-green .s-icon, .mod-block.is-green h3 .s-icon { background: rgba(104, 211, 145, .14); color: #68d391; }
.mod-block {
    margin-bottom: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--glass-bg) 78%, transparent);
}
.mod-block h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 15px; }
.mod-block h3 small { display: block; font-size: 12px; font-weight: 500; color: var(--text-tertiary); }
.mod-split { display: grid; grid-template-columns: 1.2fr .8fr; gap: 8px; }
.mod-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.mod-stats div {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    text-align: center;
}
.mod-stats strong { display: block; font-size: 22px; }
.mod-stats span, .mod-foot { color: var(--text-secondary); font-size: 12px; }
.mod-tabs, .mod-pages { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.mod-tab.is-on { background: rgba(74, 108, 247, .18); border-color: rgba(74, 108, 247, .4); color: #8faeff; }
.mod-pages { justify-content: center; }
.mod-suggest { display: flex; flex-direction: column; gap: 4px; margin: -6px 0 12px; }
.mod-suggest button {
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: inherit;
    text-align: left;
}
.mod-danger { background: rgba(252, 129, 129, .1); border-color: rgba(252, 129, 129, .28); color: #fc8181; }
.mod-warn {
    display: flex;
    gap: 10px;
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(252, 129, 129, .28);
    background: rgba(252, 129, 129, .08);
    color: inherit;
}
.mod-warn i { color: #fc8181; }
@media (max-width: 720px) {
    .mod-shortcuts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .mod-shortcut { min-height: 88px; padding: 10px 4px; font-size: 11px; gap: 6px; }
    .mod-shortcut .s-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
}
.modal.report-sheet {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(100% - 24px, 440px);
    padding: 18px 16px 16px;
    overflow: hidden;
}
.report-grab { display: none; }
.report-head { display: flex; align-items: flex-start; gap: 12px; }
.report-head > i {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    flex: none;
    color: #ffb84d;
    background: color-mix(in srgb, #ffb84d 16%, transparent);
    border: 1px solid color-mix(in srgb, #ffb84d 28%, transparent);
}
.report-head h2 { margin: 0; }
.report-options { display: grid; gap: 8px; }
.report-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, #fff 32%, transparent);
    background: color-mix(in srgb, #fff 14%, transparent);
    color: var(--text-primary);
    text-align: left;
    font-size: 15px;
    font-weight: 650;
}
.report-option i { width: 22px; text-align: center; color: var(--accent-text); font-size: 16px; }
.report-option .report-check { width: auto; margin-left: auto; opacity: 0; }
html[data-theme="dark"] .report-option {
    border-color: color-mix(in srgb, #e8f2ff 18%, transparent);
    background: color-mix(in srgb, #e8f2ff 8%, transparent);
}
.report-option.is-on,
html[data-theme="dark"] .report-option.is-on {
    border-color: rgba(109, 122, 196, .72);
    background: rgba(28, 36, 78, .78);
    color: #d7defa;
    box-shadow: none;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
}
html[data-theme="light"] .report-option.is-on {
    border-color: #4a55ab;
    background: rgba(74, 85, 171, .16);
    color: #1a1f36;
}
.report-option.is-on i,
html[data-theme="dark"] .report-option.is-on i { color: var(--accent-text); }
.report-option.is-on .report-check { opacity: 1; }
.modal.report-sheet .modal-actions { margin-top: 0; }
@media (max-width: 720px) {
    .modal.report-sheet {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        border-radius: 28px 28px 0 0;
        max-height: min(86dvh, 720px);
        padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
        transform: translateY(16px);
    }
    .modal-root.open .modal.report-sheet {
        transform: translateY(0);
        opacity: 1;
        animation: smith-modal-in-sheet 0.3s ease;
    }
    .report-grab {
        display: block;
        width: 42px;
        height: 4px;
        margin: 2px auto 4px;
        border-radius: 99px;
        background: color-mix(in srgb, var(--text-primary) 28%, transparent);
    }
}
.mod-list { display: flex; flex-direction: column; gap: 8px; }
.mod-row {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--glass-bg) 55%, transparent);
}
.mod-row p { margin: 6px 0; }
.mod-row-top, .mod-who { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mod-who { justify-content: flex-start; min-width: 0; }
.mod-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod-who .is-hot { color: #fc8181; }
.mod-status {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255, 255, 255, .06);
    color: var(--text-secondary);
}
.mod-status.is-active { background: rgba(104, 211, 145, .14); color: #68d391; }
.mod-reason { color: #f6ad55; font-weight: 700; }
.mod-quote {
    margin: 8px 0;
    padding: 8px 10px;
    border-radius: 0 10px 10px 0;
    border-left: 3px solid rgba(252, 129, 129, .45);
    background: color-mix(in srgb, #000 18%, transparent);
    overflow-wrap: anywhere;
}
.mod-rules { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.mod-rules li { display: flex; gap: 10px; align-items: flex-start; }
.mod-rules b {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex: none;
    background: rgba(74, 108, 247, .14);
    color: #8faeff;
    font-size: 12px;
}
.composer { display: flex; align-items: flex-end; gap: 8px; padding-top: 8px; }
.composer textarea {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    max-height: 120px;
    resize: none;
    border-radius: 18px;
    border: 1px solid var(--glass-line);
    background: var(--glass-bg-strong);
    box-shadow: none;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    color: inherit;
    font: inherit;
    font-size: 16px;
    line-height: 1.4;
    padding: 12px 16px;
}
.composer textarea:focus,
.composer textarea:focus-visible {
    outline: none;
    border-color: var(--border-color);
}
.composer textarea.is-wait::placeholder { color: var(--accent-text); opacity: 1; }
.composer textarea.is-wait { color: var(--accent-text); }
.dock-body .composer textarea:focus,
.dock-body .composer textarea:focus-visible {
    border-color: transparent;
}
.composer .btn.send {
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0;
    display: grid;
    place-items: center;
    flex: none;
}
.composer .btn.send.is-count {
    color: var(--accent-text);
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.person { display: flex; align-items: center; gap: 8px; }
.person-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    min-height: 64px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
}
.person-main small, .person-main strong { display: block; }
.person-main small { color: var(--text-secondary); }
.person .avatar { width: 40px; height: 40px; border-radius: 14px; flex: none; }
.person-actions { display: flex; flex-direction: column; gap: 6px; }
.actions { display: flex; gap: 8px; }
.actions .btn { flex: 1; }
.to-top {
    position: fixed;
    z-index: 28;
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(168px + env(safe-area-inset-bottom));
    width: 48px;
    height: 48px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--glass-bg-strong);
    color: var(--accent-text);
    box-shadow: none;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.to-top.is-on { opacity: 1; pointer-events: auto; transform: none; }
body:has(#view .composer) .to-top { bottom: calc(240px + env(safe-area-inset-bottom)); }
@media (max-width: 959px) {
    .view { scrollbar-width: none; -ms-overflow-style: none; }
    .to-top { bottom: calc(96px + env(safe-area-inset-bottom)); }
    body[data-screen="chat"] .tabbar,
    body[data-screen="thread"] .tabbar { display: none; }
    body[data-screen="chat"] .view,
    body[data-screen="thread"] .view { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
    body[data-screen="chat"]:has(#view .composer) #to-top,
    body[data-screen="thread"]:has(#view .composer) #to-top {
        bottom: calc(68px + env(safe-area-inset-bottom));
        right: max(16px, env(safe-area-inset-right));
    }
    .view:has(.chat-screen) { padding-left: 10px; padding-right: 10px; }
    .chat-screen > .section-head { width: 100%; min-width: 0; margin-top: 0; }
    .chat-screen .dm-identity { flex: 1; min-width: 0; }
    .chat-screen .back-btn { order: -1; flex: none; width: 36px; min-width: 36px; height: 36px; padding: 0; border-radius: 50%; }
    .chat-screen .back-btn span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }
    .dm-peer .screen-title,
    .dm-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .dm-head { flex-wrap: wrap; min-width: 0; row-gap: 8px; }
    .dm-new, .dm-tool { max-width: 100%; padding: 7px 10px; }
    .dm-card { min-width: 0; padding: 10px 12px; }
    .dm-card .avatar { width: 40px; height: 40px; }
    .msg { max-width: 100%; min-width: 0; gap: 6px; }
    .msg:has(.msg-translate) { max-width: calc(100% - 26px); }
    .chat-screen .msg .avatar.sm { width: 32px; height: 32px; border-radius: 12px; font-size: 12px; }
    .avatar.sm.dm-avatar { width: 34px; height: 34px; }
    .bubble-wrap, .bubble, .bubble-quote, .bubble-name { min-width: 0; max-width: 100%; }
    .bubble-quote span { max-width: 100%; }
    .bubble-name > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .composer { gap: 6px; padding-top: 6px; }
    .composer textarea { min-height: 42px; padding: 10px 12px; }
    .composer .btn.send { width: 42px; min-width: 42px; height: 42px; }
    .tab { min-width: 0; padding-inline: 2px; }
    .tab > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #msg-menu { flex-wrap: nowrap; }
    .msg-menu-btn { flex: 0 0 auto; min-width: 58px; max-width: none; padding: 7px 8px; }
}
@media (max-width: 380px) {
    .dm-new, .dm-tool { font-size: 12px; padding: 6px 8px; }
    .tab { font-size: 10px; }
    .chat-screen .msg .avatar.sm { width: 28px; height: 28px; }
}

@media (min-width: 960px) {
    html {
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--accent) 62%, var(--bg-secondary)) var(--bg-primary);
    }
    html::-webkit-scrollbar { width: 12px; height: 12px; }
    html::-webkit-scrollbar-track { background: var(--bg-primary); }
    html::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--accent) 58%, var(--bg-secondary));
        border: 3px solid var(--bg-primary);
        border-radius: 99px;
    }
    body {
        padding: 20px 0;
        --dock-gap: 16px;
        --dock-w: min(320px, max(240px, calc((100vw - 720px) / 2)));
        --shell-w: min(960px, calc(100vw - (var(--dock-w) + 20px + var(--dock-gap)) * 2));
        --pair-pad: max(20px, calc((100vw - var(--shell-w) - var(--dock-gap) - var(--dock-w)) / 2));
    }
    body:not([data-screen="chat"]) .shell,
    body.is-dock-collapsed:not([data-screen="chat"]) .shell {
        width: var(--shell-w);
        margin-left: auto;
        margin-right: auto;
    }
    /* desktop-nav-dual */
    .shell {
        position: relative;
        width: min(960px, calc(100% - 40px));
        height: calc(100dvh - 40px);
        max-height: calc(100dvh - 40px);
        margin: 0 auto;
        min-height: 0;
        display: grid;
        grid-template-columns: 108px minmax(0, 1fr) 108px;
        grid-template-rows: minmax(0, 1fr);
        border: 1px solid var(--border-color);
        border-radius: 28px;
        overflow: hidden;
        background: color-mix(in srgb, var(--glass-bg) 45%, transparent);
        box-shadow: var(--glass-shadow);
        backdrop-filter: blur(28px) saturate(170%);
        -webkit-backdrop-filter: blur(28px) saturate(170%);
    }
    .workspace { height: 100%; min-height: 0; overflow: hidden; }
    .world-dock {
        display: flex;
        position: fixed;
        top: 20px;
        right: 20px;
        bottom: 20px;
        width: min(320px, max(260px, calc(100vw - min(850px, 100vw - 380px) - 60px)));
        z-index: 15;
        flex-direction: column;
        min-height: 0;
        border: 1px solid var(--border-color);
        border-radius: 28px;
        overflow: hidden;
        background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
    }
    body:not(.is-dock-collapsed):not([data-screen="chat"]) .world-dock {
        width: var(--dock-w);
        right: 20px;
    }
    body[data-screen="chat"] .world-dock { display: none; }
    body.is-dock-collapsed .world-dock {
        top: auto;
        right: 20px;
        left: auto;
        bottom: 20px;
        width: 180px;
        height: 52px;
    }
    body.is-dock-collapsed .dock-body { display: none; }
    body.is-dock-collapsed .dock-head { height: 52px; padding: 0 12px 0 16px; border-bottom: 0; }
    .tabbar {
        position: static;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 6px;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        border-top: 0;
        border-right: 1px solid var(--border-color);
        border-left: 0;
        padding: 18px 10px;
    }
    .tabbar-right {
        border-right: 0;
        border-left: 1px solid var(--border-color);
    }
    .tab-main, .tab-extra, .tab-foot {
        display: flex;
        flex-direction: column;
        gap: 6px;
        flex: none;
    }
    .tab-extra {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        scrollbar-width: none;
    }
    .tab-extra::-webkit-scrollbar { width: 0; height: 0; }
    .tab-chat { display: none; }
    .tab-foot { flex: none; margin-top: auto; }
    .tab { border-radius: 16px; min-height: 64px; }
    @media (max-height: 800px) {
        .tabbar { gap: 4px; padding: 12px 10px; }
        .tab-main, .tab-extra, .tab-foot { gap: 4px; }
        .tab { min-height: 52px; border-radius: 14px; }
    }
    html[data-theme="light"] .tab,
    html[data-theme="dark"] .tab { color: var(--nav-ink); font-weight: 650; }
    html[data-theme="light"] .tab.is-active,
    html[data-theme="dark"] .tab.is-active { color: var(--nav-active-text); font-weight: 700; background: var(--nav-active); }
    html[data-theme="light"] .tabbar {
        backdrop-filter: blur(24px) saturate(170%);
        -webkit-backdrop-filter: blur(24px) saturate(170%);
        background: color-mix(in srgb, var(--glass-bg-strong) 84%, transparent);
        border-right-color: var(--border-color);
    }
    html[data-theme="light"] .tabbar-right {
        border-right-color: transparent;
        border-left-color: var(--border-color);
    }
    html[data-theme="light"] .tab { color: var(--text-secondary); }
    html[data-theme="light"] .tab.is-active {
        color: var(--accent-text);
        background: color-mix(in srgb, var(--accent) 28%, var(--glass-bg-strong));
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent);
    }
    html[data-theme="dark"] .tab.is-active {
        color: #d5e7fb;
        background: color-mix(in srgb, #8eb4e8 34%, #0b1220);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, #8eb4e8 55%, transparent);
    }
    .tab.is-center .tab-fab { width: auto; height: auto; margin: 0; background: none; color: inherit; box-shadow: none; border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .tab.is-center.is-active .tab-fab { color: inherit; }
    .view {
        overflow: auto;
        scrollbar-gutter: stable;
        padding-top: 16px;
        padding-bottom: 28px;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--accent) 62%, var(--bg-secondary)) transparent;
    }
    .view::-webkit-scrollbar { width: 10px; height: 10px; }
    .view::-webkit-scrollbar-track { background: transparent; }
    .view::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--accent) 58%, var(--bg-secondary));
        border: 2px solid transparent;
        border-radius: 99px;
        background-clip: padding-box;
    }
    .trade-dock { position: static; left: auto; right: auto; bottom: auto; margin-top: 12px; }
    .to-top { bottom: 28px; right: max(28px, calc((100vw - min(850px, 100vw - 40px)) / 2 + 28px)); }
    body:has(#view .composer) .to-top { bottom: 84px; }
    .view:has(.chat-screen) { overflow: hidden; }
    body[data-screen="chat"] .shell,
    body[data-screen="thread"] .shell {
        height: calc(100dvh - 40px);
        max-height: calc(100dvh - 40px);
        grid-template-rows: minmax(0, 1fr);
    }
    body[data-screen="chat"] .workspace,
    body[data-screen="thread"] .workspace {
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }
    body[data-screen="chat"] .view,
    body[data-screen="thread"] .view {
        overflow: hidden;
        min-height: 0;
    }
    body:has(#shell:not([hidden])) .toast-root { top: 128px; }
    .brand-logo { height: 42px; }
    .topbar .icon-btn { width: 44px; height: 44px; min-height: 44px; }
}

@media (max-width: 959px) {
    html, html[data-theme="light"], html[data-theme="dark"] { --space: 12px; }
    .btn { min-height: 38px; }
    .btn.compact { min-height: 32px; padding: 0 10px; }
    .text-btn, .linkish { min-height: 34px; padding: 0 12px; }
    .icon-btn { width: 36px; min-height: 36px; }
    .field input, .field select, .search input, .stepper input { min-height: 40px; }
    .search.friend-search input {
        min-height: 34px;
        padding: 0 10px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        font-size: 14px;
    }
    .friend-tabs { gap: 4px; margin-bottom: 8px; }
    .friend-tabs .chip { min-height: 26px; height: 26px; padding: 0 8px; font-size: 11px; }
    .friend-actions { gap: 4px; }
    .fa-btn { min-height: 24px; padding: 2px 7px; font-size: 11px; }
    .field textarea { min-height: 72px; padding: 10px 12px; }
    .segments button, .theme-switch button, .lang-switch button { min-height: 36px; }
    .product-ico, .cat-ico { width: 36px; height: 36px; border-radius: 12px; }
    .product-ico .icon, .cat-ico .icon { width: 18px; height: 18px; }
    .product-row, .entry, .note, .panel { padding: 10px; }
    .stat-card { min-height: 88px; padding: 12px; }
    .chip { min-height: 32px; padding: 0 10px; }
    .shortcut { min-height: 64px; }
    .shortcut .icon { width: 20px; height: 20px; }
    .avatar { width: 36px; height: 36px; }
    .avatar.sm { width: 36px; height: 36px; }
    .avatar.lg { width: 48px; height: 48px; border-radius: 16px; font-size: 16px; }
    .photo-row { gap: 10px; }
    .choice { min-height: 68px; padding: 8px 6px; gap: 4px; border-radius: 14px; }
    .choice-grid:not(.cols-3) .choice { min-height: 46px; padding: 8px 10px; gap: 8px; }
    .theme-ico { width: 30px; height: 30px; border-radius: 10px; }
    .theme-ico svg { width: 16px; height: 16px; }
    .flag { width: 26px; height: 18px; }
    .person .avatar { width: 36px; height: 36px; }
    .podium-card { padding: 14px 4px 10px; max-width: none; }
    .podium-card .avatar { width: 44px; height: 44px; font-size: 14px; }
    .story-card strong { font-size: 12px; }
    .story-card small { font-size: 10px; }
    .yield-tile { padding: 8px; }
    .yield-ico { width: 28px; height: 28px; }
    .yield-copy strong { font-size: 12px; }
    .res-copy strong { font-size: 11px; }
    .help-card { padding: 14px; }
    .page-head { margin-bottom: 10px; }
    .auth-card { padding: 18px 14px 14px; }
    .home { gap: 12px; }
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

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

.inbox-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}
.inbox-tabs {
    display: flex;
    gap: 2px;
    min-width: 0;
    overflow-x: auto;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}
.inbox-tabs::-webkit-scrollbar { display: none; }
.inbox-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 12px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
}
.inbox-tab i { font-size: 15px; flex: none; }
.inbox-tab.is-active { color: var(--text-primary); background: transparent; }
.inbox-tab.is-active::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--accent);
}
.inbox-badge {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #d4534a;
    color: #fff;
    font-size: 10px;
    font-weight: 750;
    line-height: 16px;
    text-align: center;
}
.inbox-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; padding-bottom: 8px; }
.inbox-tools:empty { display: none; }
.inbox-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--glass-bg);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.inbox-pill i { font-size: 14px; flex: none; }
.inbox-pill.primary {
    background: color-mix(in srgb, var(--accent) 18%, var(--glass-bg));
    color: var(--accent-text);
}
.inbox-pill.danger { color: var(--danger); }
.inbox-icon {
    position: relative;
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--glass-bg);
    color: var(--text-secondary);
    display: grid;
    place-items: center;
    flex: none;
}
.inbox-icon i { font-size: 14px; }
.inbox-icon.danger { color: var(--danger); }
.inbox-list { display: flex; flex-direction: column; gap: 8px; }
.inbox-more { display: flex; justify-content: center; margin-top: 12px; }
.inbox-card {
    border: 1px solid var(--border-color);
    border-left: 3px solid color-mix(in srgb, var(--accent) 70%, var(--border-color));
    border-radius: 16px;
    background: var(--glass-bg);
    padding: 13px 14px;
}
.inbox-note {
    position: relative;
    padding: 13px 48px 13px 14px;
}
.inbox-note.is-unread { background: color-mix(in srgb, var(--accent) 10%, var(--glass-bg)); }
.inbox-note strong { display: block; font-size: 14px; }
.inbox-note p { margin: 4px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.inbox-note time { display: block; margin-top: 6px; color: var(--text-tertiary); font-size: 12px; }
.inbox-note > .inbox-icon { position: absolute; top: 12px; right: 10px; }
.announce {
    padding: 0;
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.announce:hover { transform: translateY(-2px); }
.announce.type-announcement { border-left-color: var(--accent); }
.announce.type-news { border-left-color: #c07a1a; }
.announce.type-update { border-left-color: #3d7ec9; }
.announce header, .ticket-card header, .ticket-bubble header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.announce header { padding: 13px 16px; border-bottom: 1px solid var(--border-color); }
.announce header > div, .ticket-card header > div, .ticket-bubble .person > span:not(.avatar) {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.announce h3 { margin: 0; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.announce-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
}
.announce-meta i { margin-right: 4px; }
.announce-body, .ticket-card p, .ticket-bubble p { white-space: pre-wrap; line-height: 1.65; overflow-wrap: anywhere; }
.announce-body { margin: 0; padding: 14px 16px; color: var(--text-secondary); font-size: 14px; }
.ticket-card p, .ticket-bubble p { margin: 10px 0 0; }
.announce footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 11px 16px;
    border-top: 1px solid var(--border-color);
}
.announce .type-pill {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent-text);
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border-color));
    backdrop-filter: blur(10px);
}
.announce .type-pill.is-news {
    background: color-mix(in srgb, #c07a1a 16%, transparent);
    color: color-mix(in srgb, #c07a1a 72%, var(--text-primary));
    border-color: color-mix(in srgb, #c07a1a 36%, var(--border-color));
}
.announce .type-pill.is-update {
    background: color-mix(in srgb, #3d7ec9 16%, transparent);
    color: color-mix(in srgb, #3d7ec9 55%, var(--text-primary));
    border-color: color-mix(in srgb, #3d7ec9 36%, var(--border-color));
}
.announce .mini, .ticket-bubble .mini {
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}
.announce .mini.warn, .ticket-bubble .mini.warn { color: #e0a23a; }
.announce .mini.danger, .ticket-bubble .mini.danger { color: #d4534a; }
.announce .mini:hover, .ticket-bubble .mini:hover { background: color-mix(in srgb, var(--text-primary) 12%, transparent); }
.star-row { display: flex; gap: 0; }
.star {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
}
.star i { font-size: 16px; }
.star.is-on, .announce .star:hover { color: #e0a23a; }
.ticket-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 0 0 12px;
    color: var(--text-secondary);
    font-size: 13px;
}
.ticket-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ticket-card .type-pill, .ticket-row .type-pill { flex: none; }
.type-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent-text);
    font-size: 11px;
    font-weight: 700;
}
.announce-side { display: flex; align-items: flex-start; gap: 8px; flex: none; }
.announce-tools { display: flex; flex-direction: row; align-items: center; gap: 6px; flex: none; }
.ticket-bubble header .announce-tools { flex-direction: column; align-items: flex-end; }
.translate-btn {
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    display: grid;
    place-items: center;
    flex: none;
}
.translate-btn img { width: 16px; height: 16px; display: block; opacity: 0.72; }
.ticket-text .translate-btn { width: 28px; height: 28px; min-height: 28px; border-radius: 8px; }
.ticket-text .translate-btn img { width: 14px; height: 14px; opacity: 0.62; }
.translate-btn:hover img { opacity: 0.9; }
.translate-btn.is-on {
    background: color-mix(in srgb, #3c9a62 14%, transparent);
    border-color: color-mix(in srgb, #3c9a62 36%, var(--border-color));
}
.translate-btn.is-loading { opacity: 0.4; pointer-events: none; }
.text-tools {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.text-tools .copy-btn { position: static; }
button.ticket-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    color: inherit;
}
.ticket-row .ticket-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ticket-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ticket-line strong { min-width: 0; }
.ticket-row .ticket-copy small { display: block; color: var(--text-secondary); font-size: 12px; }
.ticket-row .ticket-copy small i { margin-right: 4px; }
.ticket-row .fa-image { margin-left: 6px; color: #3d7ec9; }
.ticket-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
    background: var(--text-tertiary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--text-primary) 10%, transparent);
}
.ticket-dot.is-red { background: #d4534a; }
.ticket-dot.is-blue { background: #3d7ec9; }
.ticket-dot.is-green { background: #3c9a62; }
.ticket-card header .avatar, .ticket-bubble .avatar { flex: none; }
.ticket-card header strong, .ticket-bubble header strong { display: block; }
.ticket-card header small, .ticket-bubble header small { display: block; color: var(--text-secondary); }
.ticket-bubble .person {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    flex: 1;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
}
.ticket-bubble.is-staff { background: color-mix(in srgb, var(--accent) 10%, var(--glass-bg)); }
.ticket-card > .inbox-icon, .ticket-bubble > .inbox-icon { margin-top: 8px; }
.ticket-actions { justify-content: flex-start; padding: 12px 0 0; }
.ticket-compose {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--glass-bg);
}
.ticket-compose textarea {
    display: block;
    margin: 0;
    width: 100%;
}
.ticket-toolbar { display: flex; align-items: center; gap: 8px; }
.ticket-toolbar .inbox-pill.primary { margin-left: auto; }
.ticket-compose textarea, .modal .stack textarea, .modal .stack input, .modal .stack select {
    width: 100%;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--glass-bg-strong);
    padding: 12px 14px;
    font-size: 16px;
}
.ticket-compose textarea, .modal .stack textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.modal .stack { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.modal .stack .modal-actions { width: 100%; }
.ticket-view {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--glass-bg);
    padding: 14px;
}
.ticket-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.ticket-head-copy { flex: 1; min-width: 0; }
.ticket-head-copy strong { display: block; font-size: 16px; line-height: 1.3; }
.ticket-head-copy small { display: block; margin-top: 4px; color: var(--text-secondary); }
.ticket-more { position: relative; flex: none; }
.ticket-kebab {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-primary);
    display: grid;
    place-items: center;
}
.ticket-pop {
    position: absolute;
    top: 38px;
    right: 0;
    z-index: 4;
    min-width: 188px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: color-mix(in srgb, var(--glass-bg-strong) 72%, transparent);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.ticket-pop[hidden] { display: none; }
.ticket-pop button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
}
.ticket-pop button.is-danger { color: var(--danger); }
.ticket-pop button:hover { background: color-mix(in srgb, var(--text-primary) 8%, transparent); }
.ticket-bubble {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
    padding: 12px;
}
.ticket-bubble.is-staff { background: color-mix(in srgb, var(--accent) 10%, var(--glass-bg)); }
.ticket-text { position: relative; padding-bottom: 26px; }
.ticket-text p { margin: 8px 0 0; }
.copy-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--glass-bg);
    color: var(--text-tertiary);
    display: grid;
    place-items: center;
}
.copy-btn i { font-size: 12px; }
.mini {
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex: none;
}
.mini i { font-size: 14px; }
.mini.warn { background: #e0a23a; color: #1c1408; }
.mini.danger { background: #d4534a; color: #fff; }
.announce .mini.warn, .announce .mini.danger,
.ticket-bubble .mini.warn, .ticket-bubble .mini.danger {
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}
.announce .mini.warn, .ticket-bubble .mini.warn { color: #e0a23a; }
.announce .mini.danger, .ticket-bubble .mini.danger { color: #d4534a; }
.vote-link, .vote-quiet { font-size: 12px; color: var(--text-secondary); }
.vote-link {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--accent-text);
    text-decoration: underline;
    font-weight: 700;
}
.vote-summary { display: flex; align-items: center; gap: 12px; margin: 8px 0 14px; }
.vote-summary > strong { font-size: 32px; line-height: 1; color: #e0a23a; }
.vote-summary > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.vote-stars { display: inline-flex; }
.vote-stars .star { width: 16px; height: 16px; }
.vote-stars .star i { font-size: 13px; }
.vote-bar { display: block; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--text-primary) 12%, transparent); overflow: hidden; }
.vote-bar > span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #e0a23a, #c07a1a); }
.vote-list { display: flex; flex-direction: column; gap: 8px; }
.vote-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    text-align: left;
    color: inherit;
}
.vote-row > span:nth-child(2) { flex: 1; min-width: 0; }
.vote-row strong, .vote-row small { display: block; }
.vote-row small { color: var(--text-secondary); font-size: 12px; }
.modal .stack label:not(.inbox-pill) { display: flex; flex-direction: column; gap: 6px; width: 100%; color: var(--text-secondary); font-size: 13px; }
.ticket-compose input[type="file"], .modal input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.ticket-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.ticket-thumbs:empty { display: none; }
.ticket-thumb {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    flex: none;
}
.ticket-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ticket-thumb-x {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 11px;
}
.ticket-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ticket-shot {
    position: relative;
    width: 96px;
    height: 96px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    background: transparent;
    flex: none;
}
.ticket-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ticket-shot > span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    opacity: 0;
}
.ticket-shot:hover > span, .ticket-shot:focus-visible > span { opacity: 1; }
.modal:has(img.lightbox) { width: min(100% - 32px, 720px); padding: 10px; }
.modal img.lightbox { display: block; width: 100%; max-height: min(70vh, 640px); object-fit: contain; border-radius: 12px; }
.ticket-bubble .person > .avatar { width: 44px; height: 44px; flex: 0 0 44px; }
.canned-row { width: 100%; text-align: left; color: inherit; margin-bottom: 8px; }
.canned-row strong, .canned-row small { display: block; }
.canned-row small { color: var(--text-secondary); font-size: 12px; margin-top: 4px; }
@media (max-width: 640px) {
    .inbox-head { flex-wrap: nowrap; align-items: center; gap: 6px; }
    .inbox-tabs { flex: 1; min-width: 0; }
    .inbox-tab { min-height: 40px; padding: 6px 8px 8px; font-size: 12.5px; gap: 4px; }
    .inbox-tab i { font-size: 13px; }
    .inbox-tab.is-active::after { left: 6px; right: 6px; }
    .inbox-badge { min-width: 14px; height: 14px; font-size: 9px; line-height: 14px; }
    .inbox-tools { width: auto; flex: none; padding-bottom: 4px; gap: 6px; }
    .inbox-tools .inbox-pill span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .inbox-tools .inbox-pill { position: relative; width: 36px; min-width: 36px; padding: 0; }
}

.live-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.live-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #8b93a7; flex: none; }
.live-dot.is-ok { background: #34c759; }
.live-dot.is-down { background: #ff5a5f; }
.live-card h3 { margin: 0; font-size: 15px; }
.live-meta { margin: 2px 0 0; font-size: 12px; opacity: .72; word-break: break-all; }
.live-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.live-chip { font-size: 12px; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.08); }
.live-actions .btn { display: inline-flex; align-items: center; gap: 6px; }


html[data-theme="light"] .btn.gold { color: #5c2a16; }

html[data-theme="light"] input::placeholder,

html[data-theme="light"] textarea::placeholder {

    color: var(--text-secondary);

    opacity: 0.8;

}

html[data-theme="light"] .auth-card,

html[data-theme="light"] .glass,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .panel,
html[data-theme="light"] .sheet,
html[data-theme="light"] .modal {
    box-shadow: none;
}



html[data-theme="light"] .field input,

html[data-theme="light"] .field select,

html[data-theme="light"] .field textarea,

html[data-theme="light"] .search input,

html[data-theme="light"] .stepper input,

html[data-theme="light"] .composer textarea,

html[data-theme="light"] .ticket-compose textarea,

html[data-theme="light"] .modal .stack textarea,

html[data-theme="light"] .modal .stack input,

html[data-theme="light"] .modal .stack select {

    background: var(--glass-bg-strong);

    border-color: var(--border-color);

    color: var(--text-primary);

}

html[data-theme="light"] .field input:focus,

html[data-theme="light"] .field select:focus,

html[data-theme="light"] .field textarea:focus,

html[data-theme="light"] .search input:focus,

html[data-theme="light"] .composer textarea:focus,

html[data-theme="light"] .ticket-compose textarea:focus,

html[data-theme="light"] .modal .stack textarea:focus,

html[data-theme="light"] .modal .stack input:focus,

html[data-theme="light"] .modal .stack select:focus {

    border-color: var(--accent);

    outline: none;

}

html[data-theme="light"] .dock-body .composer {

    background: var(--glass-bg-strong);

    border-color: var(--border-color);

}

html[data-theme="light"] .dock-body .composer textarea,

html[data-theme="light"] .dock-body .composer textarea:focus,

html[data-theme="light"] .dock-body .composer textarea:focus-visible {

    background: transparent;

    border-color: transparent;

}


.bank-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
}
.bank-hero,
.bank-metric {
    border: 1px solid var(--border-color);
    background: var(--glass-bg);
}
.bank-hero {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 14px 14px;
    border-radius: 16px;
}
.bank-kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.bank-hero-value {
    font-size: 28px;
    font-weight: 750;
    letter-spacing: -0.03em;
    line-height: 1.15;
}
.bank-hero .caption { margin: 0; }
.bank-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.bank-metric {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.bank-metric span {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 650;
}
.bank-metric strong {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.bank-hero.is-source,
.bank-metric.is-source {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
}
.bank-form { display: flex; flex-direction: column; gap: 10px; }
.bank-form .field,
.bank-form .caption { margin: 0; }
.bank-ledger .entry {
    font: inherit;
    color: inherit;
    cursor: pointer;
    position: relative;
    padding-right: 28px;
}
.bank-ledger .entry::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--text-secondary);
    border-bottom: 2px solid var(--text-secondary);
    transform: translateY(-70%) rotate(-45deg);
}
.bank-ledger .entry:active { transform: translateY(1px); }
.modal .tx-hero {
    margin: 2px 0 0;
    font-size: 28px;
    font-weight: 750;
    letter-spacing: -0.03em;
    line-height: 1.15;
}
.modal .tx-hero.pos { color: var(--positive); }
.modal .tx-hero.neg { color: var(--negative); }
.modal .tx-hero.flat { color: var(--text-tertiary); }
.modal > .btn { margin-top: 14px; }
.modal-actions .btn { margin-top: 0; }

.bank-ledger .product-ico { display: none; }
.bank-ledger .entry { grid-template-columns: minmax(0, 1fr) auto; }
.pkg-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}
.pkg-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 12px 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    text-align: center;
}
.pkg-card .fas { color: var(--accent-text); font-size: 18px; }
.pkg-card strong { font-size: 16px; font-weight: 750; }
.pkg-price { font-size: 12px; font-weight: 700; }
.pkg-card .btn { width: 100%; margin-top: 4px; }
.legal-links { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.legal-links button {
    text-align: left;
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font: inherit;
    font-weight: 650;
    padding: 8px 12px;
}
.legal-doc { display: flex; flex-direction: column; gap: 8px; }
.legal-doc h2 { margin: 10px 0 0; font-size: 16px; }
.legal-doc h3 { margin: 6px 0 0; font-size: 14px; }
.legal-doc p, .legal-doc li { margin: 0; font-size: 14px; line-height: 1.5; }
.legal-doc ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.legal-note {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--glass-bg);
    display: grid;
    gap: 8px;
}
.legal-scroll { overflow-x: auto; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.legal-table th, .legal-table td {
    border: 1px solid var(--border-color);
    padding: 8px;
    text-align: left;
    vertical-align: top;
}
.legal-doc .btn { margin-top: 8px; }
.order-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.filter-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-top: 8px; }
.filter-chip {
    flex: none;
    min-height: 32px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
}
.filter-chip.is-active {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 16%, var(--bg-elevated));
}
.daily-chip {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 10px 0;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    font-size: 13px;
}
.order-grid { display: grid; gap: 10px; }
@media (min-width: 760px) {
    .order-grid { grid-template-columns: 1fr 1fr; }
}
.order-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
}
.order-card.is-canceled { opacity: 0.72; }
.order-card header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.order-card header strong { font-size: 16px; }
.order-bonus { color: var(--positive); font-size: 12px; margin-left: 4px; }
.order-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.order-line span { color: var(--text-secondary); }
.order-user {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--glass-bg);
    color: inherit;
    font: inherit;
}
.order-user small { display: block; color: var(--text-secondary); }
.stat-sheet { display: grid; gap: 10px; margin-top: 12px; }
.stat-row { display: grid; grid-template-columns: minmax(88px, 1.2fr) minmax(60px, 1fr) auto auto; gap: 8px; align-items: center; font-size: 13px; }
.stat-bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 16%, var(--bg-elevated)); overflow: hidden; }
.stat-bar i { display: block; height: 100%; background: var(--accent-text); }
.stat-split { display: flex; flex-wrap: wrap; gap: 8px; color: var(--text-secondary); font-size: 12px; }
.home-market { margin-top: 14px; }
.yakut-card {
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    overflow: hidden;
}
.yakut-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
}
.yakut-head h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}
.yakut-head h3 .fas, .yakut-pkg > .fas, .yakut-amount { color: #c7364a; }
html[data-theme="dark"] .yakut-head h3 .fas,
html[data-theme="dark"] .yakut-pkg > .fas,
html[data-theme="dark"] .yakut-amount { color: #ff8fa3; }
.yakut-history, .yakut-docs button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--glass-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 650;
}
.yakut-body { padding: 10px; }
.yakut-balance { margin: 0 0 8px; font-size: 13px; color: var(--text-secondary); }
.yakut-balance strong { color: var(--text-primary); }
.yakut-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}
.yakut-pkg {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
    padding: 10px 6px 8px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    border-top: 2px solid #c7364a;
    background: var(--glass-bg);
}
.yakut-pkg > .fas { font-size: 22px; }
.yakut-amount { font-size: 16px; font-weight: 800; line-height: 1.1; }
.yakut-unit { font-size: 11px; color: var(--text-secondary); }
.yakut-feature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 10px;
    color: var(--text-secondary);
}
.yakut-feature .fas { color: #2f9e62; font-size: 10px; }
.yakut-buy {
    width: 100%;
    margin-top: 8px;
    min-height: 32px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, #c7364a 45%, var(--border-color));
    background: color-mix(in srgb, #c7364a 14%, var(--bg-elevated));
    color: #9d2436;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
}
html[data-theme="dark"] .yakut-buy { color: #ffd0d8; }
.yakut-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.yakut-card .caption { margin: 8px 0 0; }
.home-tool .home-yakut {
    width: 33px;
    object-fit: contain;
    display: block;
}
.home-tool .home-friends {
    width: 45px;
    object-fit: cover;
    display: block;
}

.home-tool .home-online {

    width: 45px;

    object-fit: cover;

    display: block;

}
.home-tool .home-leaders {
    height: 39px;
    width: auto;
    object-fit: contain;
    display: block;
}



.home-settings .home-settings-img {
    width: 35px;
    object-fit: cover;
    display: block;
}
.res-ico.res-yakut { width: 16px; height: 16px; background: none; border-radius: 0; }
.res-ico.res-yakut img { width: 16px; height: 16px; object-fit: contain; display: block; }
.yakut-ico { width: 28px; height: 28px; object-fit: contain; display: block; }
.yakut-head h3 .yakut-ico { width: 22px; height: 22px; }
.order-page { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.order-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.order-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
}
.order-stat span { color: var(--text-secondary); font-size: 12px; font-weight: 650; }
.order-stat strong { font-size: 20px; font-weight: 750; letter-spacing: -0.03em; }
.purchase-list { display: flex; flex-direction: column; gap: 12px; }
.purchase {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
}
.purchase-ico {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #c7364a;
    background: color-mix(in srgb, #c7364a 14%, var(--bg-elevated));
}
.purchase-ico .icon { width: 22px; height: 22px; }
.purchase-ico.is-vip { color: #b8860b; background: color-mix(in srgb, #e0b43a 22%, var(--bg-elevated)); }
.purchase-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.purchase-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.purchase-top strong { font-size: 15px; font-weight: 700; }
.purchase-top b { font-size: 14px; font-weight: 750; white-space: nowrap; }
.purchase-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.purchase-meta span {
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 12px;
}
.vip-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 8px;
    font-size: 15px;
}
.vip-label .fas, .vip-pkg > .fas { color: #b8860b; }
html[data-theme="dark"] .vip-label .fas,
html[data-theme="dark"] .vip-pkg > .fas { color: #ffc107; }
.vip-pkg { border-top-color: #e0b43a; }
.vip-pkg .yakut-amount { color: #8a6a12; }
html[data-theme="dark"] .vip-pkg .yakut-amount { color: #ffd56a; }
.vip-pkg .yakut-feature .fas { color: #b8860b; }
.vip-pkg .yakut-buy {
    border-color: color-mix(in srgb, #e0b43a 55%, var(--border-color));
    background: color-mix(in srgb, #e0b43a 16%, var(--bg-elevated));
    color: #8a6a12;
}
html[data-theme="dark"] .vip-pkg .yakut-buy { color: #ffe7a3; }
.yakut-grid { gap: 10px; }
/* adm-orders */
       /* ── TOP BAR ── */
       .adm-orders .top-bar-card{
           display: flex;
           align-items: center;
           gap: 10px;
           background: transparent;
           border-bottom: 1px solid rgba(255,255,255,0.07);
           padding: 0 0 14px 0;
           flex-wrap: wrap;
       }
       html[data-theme="light"] .adm-orders .top-bar-card{
           border-bottom-color: rgba(0,0,0,0.08);
       }
       .adm-orders .top-bar-left{ flex-shrink: 0; }
       .adm-orders .top-bar-title{
           font-size: 1rem;
           font-weight: 600;
           margin: 0;
           opacity: .9;
           white-space: nowrap;
       }
       .adm-orders .top-bar-title i{ margin-right: 6px; opacity: .6; font-size: .85em; }
       .adm-orders .top-bar-center{ flex: 1; min-width: 160px; }
       .adm-orders .top-bar-right{ flex-shrink: 0; display: flex; align-items: center; gap: 8px; }

       /* ── SEARCH ── */
       .adm-orders .search-form{ width: 100%; }
       .adm-orders .search-input-wrap{
           display: flex;
           align-items: center;
           background: rgba(255,255,255,0.06);
           border: 1px solid rgba(255,255,255,0.12);
           border-radius: 7px;
           padding: 5px 8px;
           gap: 6px;
           transition: border-color .2s, background .2s;
       }
       html[data-theme="light"] .adm-orders .search-input-wrap{
           background: #f4f6fb;
           border-color: #d0d9ec;
       }
       .adm-orders .search-input-wrap:focus-within{
           border-color: rgba(255,255,255,0.28);
           background: rgba(255,255,255,0.1);
       }
       html[data-theme="light"] .adm-orders .search-input-wrap:focus-within{
           border-color: #4c71b1;
           background: #fff;
       }
       .adm-orders .search-icon{ color: rgba(255,255,255,0.3); font-size: .78rem; flex-shrink: 0; }
       html[data-theme="light"] .adm-orders .search-icon{ color: #8fa4cc; }
       .adm-orders .search-input{
           flex: 1;
           background: transparent;
           border: none;
           outline: none;
           color: rgba(255,255,255,0.9);
           font-size: .8rem;
           min-width: 0;
       }
       html[data-theme="light"] .adm-orders .search-input{ color: #1a2540; }
       .adm-orders .search-input::placeholder{ color: rgba(255,255,255,0.3); }
       html[data-theme="light"] .adm-orders .search-input::placeholder{ color: #9aaccb; }
       .adm-orders .search-clear{
           color: rgba(255,255,255,0.3);
           text-decoration: none;
           font-size: .72rem;
           line-height: 1;
           flex-shrink: 0;
           transition: color .15s;
       }
       html[data-theme="light"] .adm-orders .search-clear{ color: #9aaccb; }
       .adm-orders .search-clear:hover{ color: rgba(255,255,255,0.7); }
       html[data-theme="light"] .adm-orders .search-clear:hover{ color: #4c71b1; }
       .adm-orders .search-btn{
           background: rgba(255,255,255,0.1);
           color: rgba(255,255,255,0.75);
           border: 1px solid rgba(255,255,255,0.15);
           border-radius: 5px;
           padding: 3px 10px;
           font-size: .75rem;
           font-weight: 600;
           cursor: pointer;
           white-space: nowrap;
           flex-shrink: 0;
           transition: background .2s, color .2s;
       }
       html[data-theme="light"] .adm-orders .search-btn{
           background: #e8eef8;
           color: #2f4f8a;
           border-color: #c0ceea;
       }
       .adm-orders .search-btn:hover{
           background: rgba(255,255,255,0.18);
           color: #fff;
       }
       html[data-theme="light"] .adm-orders .search-btn:hover{
           background: #d0dcf0;
           color: #1a3060;
       }

       /* ── STATS BUTTON ── */
       .adm-orders .stats-btn{
           background: rgba(255,255,255,0.08);
           color: rgba(255,255,255,0.7);
           border: 1px solid rgba(255,255,255,0.12);
           border-radius: 7px;
           padding: 5px 12px;
           font-size: .78rem;
           font-weight: 600;
           cursor: pointer;
           display: flex;
           align-items: center;
           gap: 6px;
           transition: background .2s, color .2s, border-color .2s;
           white-space: nowrap;
       }
       html[data-theme="light"] .adm-orders .stats-btn{
           background: #e8eef8;
           color: #2f4f8a;
           border-color: #c0ceea;
       }
       .adm-orders .stats-btn:hover{
           background: rgba(255,255,255,0.15);
           color: #fff;
           border-color: rgba(255,255,255,0.25);
       }
       html[data-theme="light"] .adm-orders .stats-btn:hover{
           background: #d0dcf0;
           color: #1a3060;
       }
       .adm-orders .admin-back-btn{
           text-decoration: none;
           display: inline-flex;
       }
       .adm-orders .admin-back-btn:hover{
           text-decoration: none;
       }

       /* Mobil uyum */
       @media (max-width: 600px) {
           .adm-orders .top-bar-card{ gap: 8px; padding-bottom: 10px; }
           .adm-orders .top-bar-title{ font-size: .88rem; }
           .adm-orders .top-bar-center{ min-width: 0; order: 3; flex-basis: 100%; }
           .adm-orders .top-bar-right{ margin-left: auto; }
           .adm-orders .stats-btn{ padding: 4px 10px; font-size: .73rem; }
           .adm-orders .search-btn{ padding: 3px 8px; font-size: .72rem; }
       }

       /* ── USER SUMMARY CARD ── */
       .adm-orders .user-summary-card{
           display: flex;
           align-items: center;
           justify-content: space-between;
           gap: 16px;
           background: rgba(255,255,255,0.05);
           border: 1px solid rgba(255,255,255,0.1);
           border-radius: 10px;
           padding: 12px 16px;
           flex-wrap: wrap;
       }
       html[data-theme="light"] .adm-orders .user-summary-card{
           background: #f0f4fb;
           border-color: #d0daf0;
       }
       .adm-orders .user-summary-left{
           display: flex;
           align-items: center;
           gap: 12px;
       }
       .adm-orders .user-summary-avatar{
           width: 38px;
           height: 38px;
           border-radius: 50%;
           background: rgba(255,255,255,0.1);
           border: 1px solid rgba(255,255,255,0.15);
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: .95rem;
           color: rgba(255,255,255,0.6);
           flex-shrink: 0;
       }
       html[data-theme="light"] .adm-orders .user-summary-avatar{
           background: #dce6f7;
           border-color: #bdd0ee;
           color: #4c71b1;
       }
       .adm-orders .user-summary-name{
           font-size: .88rem;
           font-weight: 600;
           color: rgba(255,255,255,0.9);
       }
       html[data-theme="light"] .adm-orders .user-summary-name{ color: #1a2540; }
       .adm-orders .user-summary-username{
           font-size: .75rem;
           color: rgba(255,255,255,0.4);
           margin-top: 1px;
       }
       html[data-theme="light"] .adm-orders .user-summary-username{ color: #7a94c1; }
       .adm-orders .user-summary-stats{
           display: flex;
           align-items: center;
           gap: 20px;
       }
       .adm-orders .user-summary-stat{
           display: flex;
           flex-direction: column;
           align-items: flex-end;
           gap: 2px;
       }
       .adm-orders .uss-label{
           font-size: .7rem;
           color: rgba(255,255,255,0.4);
           text-transform: uppercase;
           letter-spacing: .03em;
       }
       html[data-theme="light"] .adm-orders .uss-label{ color: #7a94c1; }
       .adm-orders .uss-label i{ margin-right: 4px; }
       .adm-orders .uss-value{
           font-size: .95rem;
           font-weight: 700;
           color: rgba(255,255,255,0.85);
       }
       html[data-theme="light"] .adm-orders .uss-value{ color: #1a2540; }
       .adm-orders .uss-revenue{ color: #6ee7b7 !important; }
       html[data-theme="light"] .adm-orders .uss-revenue{ color: #1a7a4a !important; }
       .adm-orders .user-summary-divider{
           width: 1px;
           height: 32px;
           background: rgba(255,255,255,0.1);
       }
       html[data-theme="light"] .adm-orders .user-summary-divider{ background: #c8d5ec; }
       @media (max-width: 500px) {
           .adm-orders .user-summary-card{ flex-direction: column; align-items: flex-start; gap: 10px; }
           .adm-orders .user-summary-stats{ width: 100%; justify-content: space-around; }
           .adm-orders .user-summary-stat{ align-items: center; }
       }
       .adm-orders .stats-modal-content{
           background: #0f172a;
           border: 1px solid rgba(255,255,255,0.08);
           border-radius: 12px;
           overflow: hidden;
       }
       .adm-orders .stats-modal-header{
           background: linear-gradient(135deg, #1e3a5f, #0f172a);
           border-bottom: 1px solid rgba(255,255,255,0.08);
           padding: 14px 18px;
       }
       .adm-orders .stats-modal-header .modal-title{ color: #e2e8f0; font-weight: 700; font-size: .95rem; }
       .adm-orders .stats-chart-wrap{
           padding: 16px 16px 8px;
           height: 260px;
           position: relative;
       }
       @media (max-width: 576px) {
           .adm-orders .stats-chart-wrap{ height: 190px; padding: 10px 10px 4px; }
           .adm-orders .modal{ padding: 0 !important; }
           .adm-orders .modal-dialog{ margin: 0.3rem; max-width: calc(100vw - 0.6rem) !important; }
           .adm-orders .stats-modal-header{ padding: 10px 14px; }
           .adm-orders .stats-modal-header .modal-title{ font-size: .82rem; }
           .adm-orders .modern-stats-table{ font-size: .68rem; }
           .adm-orders .modern-stats-table thead th{ padding: 7px 8px; font-size: .62rem; letter-spacing: 0; }
           .adm-orders .stats-row td{ padding: 6px 8px; }
           .adm-orders .grand-total-row th{ padding: 7px 8px; font-size: .62rem; }
           .adm-orders .order-pill{ padding: 1px 7px; font-size: .7rem; }
           .adm-orders .total-val{ font-size: .82rem; }
           .adm-orders .grand-total-val{ font-size: .92rem; }
       }

       /* ── MODERN STATS TABLE ── */
       .adm-orders .modern-stats-table-wrap{
           border-radius: 12px;
           overflow-x: auto;
           overflow-y: hidden;
           -webkit-overflow-scrolling: touch;
           border: 1px solid rgba(255,255,255,0.07);
           margin-top: 12px;
       }
       .adm-orders .modern-stats-table{
           width: 100%;
           border-collapse: collapse;
           font-size: .88rem;
       }
       .adm-orders .modern-stats-table thead tr{
           background: linear-gradient(135deg, #1e3a5f, #162032);
       }
       .adm-orders .modern-stats-table thead th{
           color: #94a3b8;
           font-weight: 600;
           padding: 13px 16px;
           text-align: left;
           font-size: .8rem;
           letter-spacing: .04em;
           text-transform: uppercase;
           border-bottom: 1px solid rgba(255,255,255,0.07);
       }
       .adm-orders .stats-row{
           background: #111827;
           border-bottom: 1px solid rgba(255,255,255,0.04);
           transition: background .15s;
       }
       .adm-orders .stats-row:nth-child(even){ background: #0f1729; }
       .adm-orders .stats-row:hover{ background: #1e293b; }
       .adm-orders .stats-row td{ padding: 11px 16px; color: #cbd5e1; }
       .adm-orders .month-label{ font-weight: 600; color: #e2e8f0; }
       .adm-orders .order-pill{
           display: inline-block;
           background: rgba(99,102,241,.18);
           color: #a5b4fc;
           border-radius: 20px;
           padding: 2px 10px;
           font-weight: 700;
           font-size: .82rem;
       }
       .adm-orders .platform-val{ font-weight: 500; }
       .adm-orders .web-val{ color: #60a5fa; }
       .adm-orders .ios-val{ color: #c4b5fd; }
       .adm-orders .and-val{ color: #6ee7b7; }
       .adm-orders .total-val{
           font-weight: 700;
           color: #34d399;
           font-size: .95rem;
       }
       .adm-orders .grand-total-row{
           background: linear-gradient(135deg, #14532d22, #14532d44);
           border-top: 2px solid rgba(52,211,153,.25);
       }
       .adm-orders .grand-total-row th{ padding: 13px 16px; color: #a7f3d0; font-weight: 700; text-transform: uppercase; font-size: .82rem; }
       .adm-orders .grand-total-val{
           font-size: 1.1rem;
           font-weight: 800;
           color: #34d399;
           text-shadow: 0 0 12px rgba(52,211,153,.35);
       }

       /* ── İstatistik modalı — açık tema ── */
       html[data-theme="light"] .adm-orders .stats-modal-content{
           background: #ffffff;
           border-color: #d0daf0;
           box-shadow: 0 8px 32px rgba(34, 52, 87, 0.12);
       }
       html[data-theme="light"] .adm-orders .stats-modal-header{
           background: linear-gradient(135deg, rgb(34, 52, 87), #2a4470);
           border-bottom-color: rgba(255, 255, 255, 0.12);
       }
       html[data-theme="light"] .adm-orders .stats-modal-header .modal-title{
           color: #ffffff;
       }
       html[data-theme="light"] .adm-orders .stats-chart-wrap{
           background: #f8fafc;
       }
       html[data-theme="light"] .adm-orders .modern-stats-table-wrap{
           border-color: #d0daf0;
       }
       html[data-theme="light"] .adm-orders .modern-stats-table thead tr{
           background: linear-gradient(135deg, rgb(34, 52, 87), #2a4470);
       }
       html[data-theme="light"] .adm-orders .modern-stats-table thead th{
           color: rgba(255, 255, 255, 0.88);
           border-bottom-color: rgba(255, 255, 255, 0.12);
       }
       html[data-theme="light"] .adm-orders .stats-row{
           background: #ffffff;
           border-bottom-color: #e8eef8;
       }
       html[data-theme="light"] .adm-orders .stats-row:nth-child(even){
           background: #f4f7fc;
       }
       html[data-theme="light"] .adm-orders .stats-row:hover{
           background: #e8eef8;
       }
       html[data-theme="light"] .adm-orders .stats-row td{
           color: #334155;
       }
       .adm-orders .day-date-sub{
           display: block;
           font-size: .72rem;
           font-weight: 500;
           color: rgba(255,255,255,0.45);
           margin-top: 2px;
       }
       html[data-theme="light"] .adm-orders .month-label{
           color: #1a2540;
       }
       html[data-theme="light"] .adm-orders .day-date-sub{
           color: #64748b;
       }
       html[data-theme="light"] .adm-orders .order-pill{
           background: rgba(34, 52, 87, 0.1);
           color: #223457;
       }
       html[data-theme="light"] .adm-orders .web-val{ color: #1d4ed8; }
       html[data-theme="light"] .adm-orders .ios-val{ color: #6d28d9; }
       html[data-theme="light"] .adm-orders .and-val{ color: #059669; }
       html[data-theme="light"] .adm-orders .total-val{
           color: #047857;
       }
       html[data-theme="light"] .adm-orders .grand-total-row{
           background: linear-gradient(135deg, #ecfdf5, #d1fae5);
           border-top-color: #6ee7b7;
       }
       html[data-theme="light"] .adm-orders .grand-total-row th{
           color: #065f46;
       }
       html[data-theme="light"] .adm-orders .grand-total-val{
           color: #047857;
           text-shadow: none;
       }
       
       /* Dropdown menü için stil ekleniyor */
       .adm-orders .dropdown-item{
           font-size: 0.85rem;
           padding: 0.5rem 1rem;
       }
       
       .adm-orders .dropdown-menu{
           min-width: 150px;
           box-shadow: 0 3px 10px rgba(0,0,0,0.1);
       }
       
       /* İptal edilmiş kartlar için stil */
       .adm-orders .order-card.canceled{
           opacity: 0.75;
       }
       
       /* Durum filtresi için */
       .adm-orders .status-filter{
           margin-bottom: 20px;
       }
       
       .adm-orders .status-filter .btn{
           margin-right: 5px;
           margin-bottom: 5px;
           font-size: 0.85rem;
           padding: 5px 10px;
       }
       
       .adm-orders .status-filter .btn.active{
           font-weight: bold;
           box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
       }
       
       .adm-orders .card-header{
           background: transparent;
           border-bottom: 1px solid rgba(255,255,255,0.08);
           color: inherit;
       }
       html[data-theme="light"] .adm-orders .card-header{
           border-bottom-color: rgba(15,23,42,0.08);
       }
       .adm-orders .card-header h5{
           margin: 0;
           font-size: .95rem;
           font-weight: 650;
           color: inherit;
       }
       
      .adm-orders .status-indicator{
        position: relative;
        display: inline-block;
        padding: 6px 5px;
        border-radius: 5px;
        font-size: 10px;
        margin-right: -10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.2px;
        color: white;
      }
       
       .adm-orders .status-indicator:before{
           content: '';
           display: inline-block;
           width: 8px;
           height: 8px;
           border-radius: 50%;
           margin-right: 8px;
           background-color: white;
           animation: pulse 2s infinite;
       }
       
       @keyframes pulse {
           0% {
               opacity: 0.5;
               transform: scale(0.8);
           }
           50% {
               opacity: 1;
               transform: scale(1.2);
           }
           100% {
               opacity: 0.5;
               transform: scale(0.8);
           }
       }
       
       .adm-orders .status-indicator.pending{
           background-color: #ffc107;
       }
       
      .adm-orders .status-indicator.completed{
        background-color: #283449;
      }
       
       html[data-theme="light"] .adm-orders .status-indicator.completed{
        background-color: #657bad;
      }
      
      .adm-orders .status-indicator.invoiced{
        background-color: #28a745; /* Yeşil renk */
      }
      
      html[data-theme="light"] .adm-orders .status-indicator.invoiced{
        background-color: #39c45f; /* Daha açık yeşil */
      }
      
      .adm-orders .status-indicator.failed{
        background-color: #9d5057;
      }
       
       .adm-orders .status-indicator.canceled{
           background-color: #dc3545; /* Kırmızı renk */
           opacity: 0.85;
       }
       
       .adm-orders .info-item{
           display: flex;
           align-items: center;
           margin-right: 15px;
           margin-bottom: 4px;
       }
       
       .adm-orders .info-label{
           color: #6c757d;
           font-size: 0.9rem;
           margin-right: 5px;
       }
       
       .adm-orders .info-value{
        color: white;
        font-weight: 500;
        font-size: 0.75rem;
      }
       
       html[data-theme="light"] .adm-orders .info-value{
        color: black;
      }
       
       .adm-orders .card-content{
           padding: 8px;
       }
       
       .adm-orders .pagination-custom .page-item.active .page-link{
           background-color: #6c757d;
           border-color: #6c757d;
       }
       
       .adm-orders .pagination-custom .page-link{
           color: #6c757d;
       }
       
       .adm-orders .custom-badge{
        display: inline-block;
        padding: 3px 8px;
        border-radius: 8px;
        font-size: 0.7rem;
        font-weight: 600;
        color: white;
        background: linear-gradient(135deg, #4287e7, #2f65dd);
        margin-left: 4px;
        margin-right: 4px;
       }

       .adm-orders .small-badge{
           font-size: 0.65rem;
           padding: 2px 6px;
           vertical-align: middle;
       }
       
       .adm-orders .package-info{
        display: inline-flex;
        align-items: center;
        font-size: 0.9rem;
        color: #ffffff;
        background-color: rgba(0, 0, 0, 0.03);
        padding: 2px 8px;
        border-radius: 20px;
        font-weight: 500;
       }
    
       html[data-theme="light"] .adm-orders .package-info{
        color: #000000;
       }
       
       .adm-orders .shop-btn{
        background: linear-gradient(135deg, #4c71b1, #204775);
        color: white;
        border: none;
        font-size: 13px;
        border-radius: 4px;
        padding: 5px 9px;
        font-weight: 600;
       }

       html[data-theme="light"] .adm-orders .shop-btn{
          background: linear-gradient(135deg, #c5daff, #cfd9eb);
       }
       
       .adm-orders .shop-btn i{
           margin-right: 8px;
       }
       
       .adm-orders .user-info-section{
  
           border-top: 1px dashed rgba(0,0,0,0.1);
       }
       
       .adm-orders .order-id{
           font-family: monospace;
           font-weight: bold;
           color: #283449;
           background-color: #f8f9fa;
           padding: 2px 6px;
           border-radius: 4px;
           font-size: 0.8rem;
       }

       .adm-orders .order-flag{
           display: inline-flex;
           align-items: center;
           margin-left: 4px;
           vertical-align: middle;
           font-size: .95rem;
           line-height: 1;
       }
       .adm-orders .order-flag img{
           width: 15px;
           height: 11px;
           border-radius: 2px;
           vertical-align: middle;
       }

       /* ── Profil link (kullanıcı bilgileri) ── */
       .adm-orders .order-user-profile-link{
           display: flex;
           align-items: center;
           gap: 10px;
           text-decoration: none;
           padding: 8px;
           border-radius: 10px;
           background: rgba(255,255,255,0.04);
           border: 1px solid rgba(255,255,255,0.07);
           transition: background .18s;
           margin-top: 8px;
       }
       .adm-orders .order-user-profile-link:hover{
           background: rgba(255,255,255,0.09);
       }
       html[data-theme="light"] .adm-orders .order-user-profile-link{
           background: #f4f6fb;
           border-color: #dce6f7;
       }
       html[data-theme="light"] .adm-orders .order-user-profile-link:hover{ background: #e8eef8; }
       .adm-orders .order-user-avatar{
           width: 44px;
           height: 44px;
           border-radius: 10px;
           object-fit: cover;
           border: 1px solid rgba(255,255,255,0.1);
           flex-shrink: 0;
       }
       html[data-theme="light"] .adm-orders .order-user-avatar{ border-color: #d0daf0; }
       .adm-orders .order-user-info{ flex: 1; min-width: 0; }
       .adm-orders .order-user-name{
           font-size: .82rem;
           font-weight: 600;
           color: rgba(255,255,255,0.9);
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
       }
       html[data-theme="light"] .adm-orders .order-user-name{ color: #1a2540; }
       .adm-orders .order-user-meta{
           display: flex;
           align-items: center;
           gap: 6px;
           margin-top: 2px;
           flex-wrap: wrap;
       }
       .adm-orders .order-user-username{
           font-size: .72rem;
           color: #ffffff;
       }
       html[data-theme="light"] .adm-orders .order-user-username{ color: #7a94c1; }
 .adm-orders .order-user-id{
    font-size: .68rem;
    font-family: monospace;
    background: rgb(255 255 255 / 7%);
    color: rgb(255 255 255 / 76%);
    padding: 1px 5px;
    border-radius: 4px;
}
       html[data-theme="light"] .adm-orders .order-user-id{ background: #e0e8f5; color: #5a78b0; }
       .adm-orders .order-user-contact{
           display: flex;
           flex-direction: column;
           gap: 1px;
           margin-top: 3px;
       }
    .adm-orders .order-user-contact span{
    font-size: .68rem;
    color: rgb(255 255 255 / 90%);
}
       html[data-theme="light"] .adm-orders .order-user-contact span{ color: #8fa4cc; }
       .adm-orders .order-user-contact i{ margin-right: 3px; width: 10px; }

       /* ── Filtre + Günlük kazanç bar ── */
       .adm-orders .filter-daily-bar{
           display: flex;
           align-items: center;
           justify-content: space-between;
           gap: 12px;
           flex-wrap: wrap;
       }
       .adm-orders .filter-label{
           font-size: .82rem;
           margin-right: 6px;
           opacity: .75;
       }
       .adm-orders .daily-revenue-chip{
           display: flex;
           align-items: center;
           gap: 8px;
           background: rgba(52,211,153,0.08);
           border: 1px solid rgba(52,211,153,0.18);
           border-radius: 10px;
           padding: 6px 14px;
           flex-shrink: 0;
       }
       html[data-theme="light"] .adm-orders .daily-revenue-chip{
           background: #edfaf4;
           border-color: #a7f3d0;
       }
       .adm-orders .daily-rev-label{
           font-size: .72rem;
           color: rgba(52,211,153,0.7);
           font-weight: 600;
           text-transform: uppercase;
           letter-spacing: .04em;
       }
       html[data-theme="light"] .adm-orders .daily-rev-label{ color: #059669; }
       .adm-orders .daily-rev-label i{ margin-right: 4px; }
       .adm-orders .daily-rev-orders{
           font-size: .72rem;
           color: rgba(255,255,255,0.4);
           border-left: 1px solid rgba(52,211,153,0.2);
           padding-left: 8px;
       }
       html[data-theme="light"] .adm-orders .daily-rev-orders{ color: #6b7280; border-color: #a7f3d0; }
       .adm-orders .daily-rev-amount{
           font-size: .95rem;
           font-weight: 800;
           color: #34d399;
           line-height: 1.35;
       }
       html[data-theme="light"] .adm-orders .daily-rev-amount{ color: #059669; }
       .adm-orders .daily-rev-amounts{
           display: flex;
           flex-direction: column;
           align-items: flex-end;
           gap: 2px;
       }
       .adm-orders .daily-rev-amounts .currency-sub-line{
           display: block;
           font-size: .82rem;
           font-weight: 700;
           color: #34d399;
           opacity: 1;
           line-height: 1.3;
           white-space: nowrap;
       }
       html[data-theme="light"] .adm-orders .daily-rev-amounts .currency-sub-line{
           color: #059669;
       }
       @media (max-width: 576px) {
           .adm-orders .filter-daily-bar{ flex-direction: column; align-items: flex-start; }
           .adm-orders .daily-revenue-chip{ width: 100%; justify-content: center; }
       }
       
       .adm-orders .user-info-title{
           font-size: 0.8rem;
           font-weight: 600;
           color: #6c757d;
           margin-bottom: 5px;
       }
       
       /* Platform göstergesi */
       .adm-orders .platform-badge{
           display: inline-block;
           padding: 2px 6px;
           border-radius: 12px;
           font-size: 0.7rem;
           font-weight: 600;
           margin-left: 5px;
       }
       
       .adm-orders .platform-web{
           background-color: #0066cc;
           color: white;
       }
       
       .adm-orders .platform-ios{
           background-color: #000;
           color: white;
       }
       
       .adm-orders .platform-android{
           background-color: #4caf509c;
           color: white;
       }
       
       /* Transaction ID için stil */
       .adm-orders .transaction-id{
           font-family: monospace;
           font-size: 0.7rem;
           color: #6c757d;
           background: rgba(0,0,0,0.05);
           padding: 1px 4px;
           border-radius: 3px;
       }
       
       /* VIP duration göstergesi */
       .adm-orders .vip-duration{
           color: #ffd700;
           font-weight: bold;
       }
       
       /* Aylık grafik stilleri */
       .adm-orders .monthly-chart-container{
           position: relative;
           height: 400px;
           margin-bottom: 30px;
       }
       
       .adm-orders .monthly-stats-table{
           font-size: 0.9rem;
       }
       
       .adm-orders .monthly-stats-table th{
           background-color: #f8f9fa;
           font-weight: 600;
           padding: 12px;
       }
       
       .adm-orders .monthly-stats-table td{
           padding: 10px 12px;
       }
       
       .adm-orders .revenue-highlight{
           font-weight: bold;
           color: #28a745;
           font-size: 1.1rem;
       }

       .adm-orders .currency-sub-line{
           display: block;
           font-size: 0.82em;
           opacity: 0.88;
           margin-top: 3px;
           line-height: 1.35;
           white-space: nowrap;
       }

       .adm-orders .revenue-breakdown-cell{
           line-height: 1.4;
       }

       .adm-orders .platform-currency-block + .platform-currency-block{
           margin-top: 10px;
           padding-top: 10px;
           border-top: 1px solid rgba(255,255,255,0.08);
       }

       html[data-theme="light"] .adm-orders .platform-currency-block + .platform-currency-block{
           border-top-color: rgba(0,0,0,0.08);
       }

       .adm-orders .platform-currency-label{
           font-size: 0.78rem;
           opacity: 0.75;
           margin-bottom: 2px;
       }
       
       .adm-orders .chart-card{
           box-shadow: 0 4px 6px rgba(0,0,0,0.1);
           border-radius: 10px;
           overflow: hidden;
       }
	   .adm-orders .monthly-stats-table th{
    background-color: #30305b;
    font-weight: 600;
    padding: 10px;
}
	   .adm-orders .table-striped>tbody>tr:nth-of-type(odd)>*{
    --bs-table-color-type: #ffffff;
    --bs-table-bg-type: var(--bs-table-striped-bg);
}

.adm-orders .table>:not(caption)>*>*{
    padding: .5rem .5rem;
    color: var(--bs-table-color-state, var(--bs-table-color-type, #ffffff));
    background-color: var(--bs-table-bg);
    border-bottom-width: var(--bs-border-width);
    box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}

.adm-orders { display: flex; flex-direction: column; gap: 14px; }
.adm-orders .top-bar-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.adm-orders .filter-daily-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.adm-orders .status-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.adm-orders .ao-btn {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 8px; border: 1px solid rgba(255,255,255,.18);
    background: transparent; color: inherit; padding: 5px 10px; font-size: .85rem; cursor: pointer;
}
.adm-orders .ao-btn.is-active { font-weight: 700; box-shadow: 0 0 0 2px rgba(0,123,255,.35); }
.adm-orders .ao-btn-info { border-color: #3b82f6; color: #7db2ff; }
.adm-orders .ao-btn-dark { border-color: rgba(255,255,255,.45); }
.adm-orders .ao-btn-ok { border-color: #34d399; color: #6ee7b7; }
html[data-theme="light"] .adm-orders .ao-btn { border-color: #c5d0e4; color: #334155; }
html[data-theme="light"] .adm-orders .ao-btn-info { color: #1d4ed8; border-color: #93c5fd; }
html[data-theme="light"] .adm-orders .ao-btn-ok { color: #047857; border-color: #6ee7b7; }
.adm-orders .ao-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.adm-orders .order-card {
    background: #1a2333; color: #fff; border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08); overflow: hidden;
}
html[data-theme="light"] .adm-orders .order-card {
    background: #fff; color: #1a2540; border-color: #e2e8f4;
    box-shadow: 0 10px 28px rgba(20, 40, 80, .06);
}
.adm-orders .card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; }
.adm-orders .ao-drop { position: relative; }
.adm-orders .ao-menu {
    display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 8;
    min-width: 168px; padding: 6px; border-radius: 10px;
    background: #121826; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 12px 30px rgba(0,0,0,.28);
}
.adm-orders .ao-drop.is-open .ao-menu { display: block; }
html[data-theme="light"] .adm-orders .ao-menu { background: #fff; border-color: #e2e8f4; }
.adm-orders .ao-menu button {
    display: block; width: 100%; text-align: left; border: 0; background: transparent;
    color: inherit; padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.adm-orders .ao-menu button:hover { background: rgba(255,255,255,.06); }
html[data-theme="light"] .adm-orders .ao-menu button:hover { background: #f1f5f9; }
.adm-orders .ao-menu button.is-danger { color: #f87171; }
.adm-orders .ao-pages { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.adm-orders .ao-pages button {
    min-width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14);
    background: transparent; color: inherit; cursor: pointer;
}
.adm-orders .ao-pages button.is-active { background: #64748b; color: #fff; border-color: #64748b; }
.adm-orders .ao-platform-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.adm-orders .ao-platform-card {
    text-align: center; padding: 16px 12px; border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
}
html[data-theme="light"] .adm-orders .ao-platform-card { background: #fff; border-color: #e2e8f4; }
.adm-orders .ao-chart { display: flex; align-items: flex-end; gap: 8px; height: 180px; padding: 12px; }
.adm-orders .ao-bar { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.adm-orders .ao-bar > span { width: 72%; display: flex; flex-direction: column-reverse; overflow: hidden; border-radius: 5px 5px 0 0; }
.adm-orders .ao-bar i { display: block; }
.adm-orders .ao-bar i.web { background: rgba(0,102,204,.85); }
.adm-orders .ao-bar i.ios { background: rgba(120,80,220,.85); }
.adm-orders .ao-bar i.and { background: rgba(52,211,153,.85); }
.adm-orders .ao-bar small { font-size: 10px; text-align: center; line-height: 1.15; max-width: 100%; }
.adm-orders .ao-fallback {
    display: inline-flex; align-items: center; justify-content: center;
    background: #334155; color: #fff; font-weight: 700;
}
.adm-orders .order-user-profile-link { width: 100%; color: inherit; cursor: pointer; text-align: left; }
.adm-orders .ao-empty {
    padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(59,130,246,.35);
    background: rgba(59,130,246,.08);
}
@media (max-width: 800px) {
    .adm-orders .ao-cards, .adm-orders .ao-platform-grid { grid-template-columns: 1fr; }
}


.legal-doc { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }

.legal-hero, .legal-section {

    display: flex;

    flex-direction: column;

    gap: 10px;

    padding: 16px;

    border-radius: 18px;

    border: 1px solid var(--border-color);

    background: var(--bg-elevated);

}

.legal-kicker {

    margin: 0;

    font-size: 12px;

    font-weight: 750;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    color: var(--text-secondary);

}

.legal-date {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    width: fit-content;

    margin: 0;

    padding: 6px 10px;

    border-radius: 999px;

    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-color));

    background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));

    color: var(--accent-text);

    font-size: 12px;

    font-weight: 700;

}

.legal-doc h2 { margin: 0; font-size: 15px; font-weight: 750; letter-spacing: -0.01em; color: var(--text-primary); }

.legal-doc h3 { margin: 4px 0 0; font-size: 14px; font-weight: 700; color: var(--text-primary); }

.legal-copy { display: flex; flex-direction: column; gap: 10px; }

.legal-doc p, .legal-doc li { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text-secondary); }

.legal-note strong { color: var(--text-primary); }

.legal-doc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.legal-doc li { position: relative; padding-left: 16px; }

.legal-doc li::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0.55em;

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--accent-text);

}

.legal-note {

    padding: 12px 14px;

    border-radius: 14px;

    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-color));

    background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated));

    display: grid;

    gap: 8px;

}

.legal-scroll {

    overflow-x: auto;

    border-radius: 14px;

    border: 1px solid var(--border-color);

}

.legal-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.legal-table th, .legal-table td {

    border: 0;

    border-bottom: 1px solid var(--border-color);

    padding: 10px 12px;

    text-align: left;

    vertical-align: top;

}

.legal-table th {

    background: var(--glass-bg);

    color: var(--text-secondary);

    font-size: 12px;

    font-weight: 700;

}

.legal-table tr:last-child td { border-bottom: 0; }

.legal-doc .btn { margin-top: 2px; }

.modal-root .modal.ao-stats-modal {
    width: min(100% - 24px, 860px);
    max-height: min(86dvh, 820px);
    overflow: auto;
}
.modal.ao-stats-modal .modern-stats-table { width: 100%; border-collapse: collapse; }
.modal.ao-stats-modal .modern-stats-table th,
.modal.ao-stats-modal .modern-stats-table td { padding: 8px 6px; text-align: left; }
.modal.ao-stats-modal .text-end { text-align: right; }
.modal.ao-stats-modal .text-center { text-align: center; }
.home-help .home-help-img {
    width: 35px;
    object-fit: contain;
    display: block;
}
/* topbar-icon-tune */
html[data-theme="light"] .topbar .icon-btn,
html[data-theme="light"] .city-tools .icon-btn {
    border-color: color-mix(in srgb, #3d352e 8%, transparent);
    background: color-mix(in srgb, #efece6 62%, rgba(255, 255, 255, 0.55));
    color: #4f463e;
}
html[data-theme="light"] .topbar .icon-btn.is-active,
html[data-theme="light"] .city-tools .icon-btn.is-active {
    background: color-mix(in srgb, #8d6e3a 12%, #f7f4ef);
    border-color: color-mix(in srgb, #8d6e3a 22%, transparent);
    color: #5c4630;
}
html[data-theme="dark"] .topbar .icon-btn,
html[data-theme="dark"] .city-tools .icon-btn {
    border-color: color-mix(in srgb, #d5e7fb 14%, transparent);
    background: color-mix(in srgb, var(--glass-bg-strong) 58%, rgba(22, 36, 62, 0.42));
    color: var(--accent-text);
    box-shadow: none;
}
html[data-theme="dark"] .topbar .icon-btn.is-active,
html[data-theme="dark"] .city-tools .icon-btn.is-active {
    background: color-mix(in srgb, var(--accent) 26%, var(--glass-bg-strong));
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    color: #ffffff;
}
@media (max-width: 359px) {
    .city-tools .icon-btn { width: 32px; height: 32px; min-height: 32px; border-radius: 10px; }
}
/* end-topbar-icon-tune */
/* light-res-chip-tune */
html[data-theme="light"] .res-chip,
html[data-theme="light"] .resbar > .res-chip {
    border-color: color-mix(in srgb, #3d352e 12%, transparent);
    background: color-mix(in srgb, #efece6 72%, rgba(255, 255, 255, 0.28));
    color: #2a241f;
    box-shadow: none;
}
html[data-theme="light"] .res-chip .res-copy strong,
html[data-theme="light"] .resbar > .res-chip .res-copy strong {
    color: #2a241f;
}
html[data-theme="light"] .res-chip .res-copy small,
html[data-theme="light"] .resbar > .res-chip .res-copy small {
    color: #5a4c40;
}
html[data-theme="light"] .resbar {
    border-bottom-color: color-mix(in srgb, #3d352e 8%, transparent);
}
/* end-light-res-chip-tune */
/* overlay-badge-responsive */
.forest-badge {
    height: clamp(26px, 7vw, 32px);
    padding: 0 clamp(8px, 2.6vw, 12px);
    border-radius: 999px;
    font-size: clamp(11px, 3.3vw, 14px);
}
.forest-back {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    flex: none;
}
button.forest-back .icon,
.forest-back .icon {
    width: 20px;
    height: 20px;
}
button.forest-badge {
    gap: clamp(3px, 1.2vw, 4px);
}
button.forest-badge:not(.forest-back) .icon {
    width: clamp(12px, 3.3vw, 14px);
    height: clamp(12px, 3.3vw, 14px);
}
button.forest-back .icon {
    width: 20px;
    height: 20px;
}
.forest-overlay {
    gap: clamp(5px, 1.8vw, 8px);
    max-width: calc(100% - clamp(12px, 4vw, 16px));
}
.forest-overlay-tl,
html[data-theme="dark"] .forest-overlay-tl,
.forest-overlay-tr,
html[data-theme="dark"] .forest-overlay-tr,
html[data-theme="light"] .forest-overlay-tl,
html[data-theme="light"] .forest-overlay-tr {
    top: clamp(5px, 1.8vw, 8px);
    gap: clamp(4px, 1.5vw, 8px);
}
.forest-overlay-tl,
html[data-theme="dark"] .forest-overlay-tl,
html[data-theme="light"] .forest-overlay-tl {
    left: clamp(5px, 1.8vw, 8px);
}
.forest-overlay-tr,
html[data-theme="dark"] .forest-overlay-tr,
html[data-theme="light"] .forest-overlay-tr {
    right: clamp(5px, 1.8vw, 8px);
}
.forest-overlay-mid {
    padding: clamp(5px, 1.8vw, 8px) clamp(9px, 3vw, 14px);
    border-radius: clamp(12px, 3.4vw, 16px);
    gap: 1px;
}
.forest-overlay-mid strong {
    font-size: clamp(11px, 3.3vw, 14px);
}
.forest-overlay-mid small {
    font-size: clamp(10px, 2.9vw, 12px);
}
.forest-overlay-br {
    right: clamp(5px, 1.8vw, 8px);
    bottom: clamp(5px, 1.8vw, 8px);
    padding: clamp(4px, 1.5vw, 6px) clamp(8px, 2.6vw, 12px) clamp(4px, 1.5vw, 6px) clamp(5px, 1.8vw, 8px);
    border-radius: clamp(12px, 3.4vw, 16px);
}
.forest-overlay-br img {
    width: clamp(22px, 6.4vw, 28px);
    height: clamp(16px, 4.8vw, 20px);
}
.forest-overlay-br strong {
    font-size: clamp(11px, 3.3vw, 14px);
}
.forest-overlay-br small {
    font-size: clamp(9px, 2.7vw, 11px);
}
.chop-spot {
    width: clamp(44px, 13.5vw, 58px);
    height: clamp(44px, 13.5vw, 58px);
    border-radius: clamp(12px, 3.4vw, 16px);
}
.chop-spot img {
    width: clamp(32px, 10.5vw, 44px);
    height: clamp(32px, 10.5vw, 44px);
}
.chop-spot .icon {
    width: clamp(22px, 7.5vw, 30px);
    height: clamp(22px, 7.5vw, 30px);
}
.smith-center {
    gap: clamp(5px, 1.8vw, 8px);
    width: min(260px, calc(100% - clamp(18px, 5vw, 32px)));
}
.smith-make {
    min-height: clamp(34px, 10vw, 44px);
    padding: 0 clamp(12px, 3.8vw, 18px);
    gap: clamp(4px, 1.4vw, 6px);
    font-size: clamp(12px, 3.5vw, 15px);
}
.smith-make .icon {
    width: clamp(14px, 4vw, 18px);
    height: clamp(14px, 4vw, 18px);
}
.smith-status {
    bottom: calc(100% + clamp(5px, 1.6vw, 8px));
    width: min(240px, calc(100vw - clamp(32px, 10vw, 48px)));
    padding: clamp(5px, 1.6vw, 8px) clamp(8px, 2.6vw, 12px);
    border-radius: clamp(12px, 3.4vw, 16px);
    gap: clamp(4px, 1.4vw, 6px);
}
.smith-status strong {
    font-size: clamp(11px, 3.2vw, 13px);
}
.smith-status small {
    font-size: clamp(10px, 2.9vw, 12px);
}
.smith-stocks {
    left: clamp(5px, 1.8vw, 8px);
    bottom: clamp(5px, 1.8vw, 8px);
    max-width: calc(100% - clamp(10px, 3.6vw, 16px));
}
.smith-stock-btn {
    gap: clamp(4px, 1.4vw, 6px);
}
.smith-stock {
    height: clamp(24px, 6.6vw, 28px);
    padding: 0 clamp(6px, 2vw, 8px) 0 clamp(3px, 1vw, 4px);
    border-radius: 999px;
    gap: clamp(3px, 1vw, 4px);
}
.smith-stock img {
    width: clamp(16px, 4.8vw, 20px);
    height: clamp(16px, 4.8vw, 20px);
}
.smith-stock strong {
    font-size: clamp(10px, 2.9vw, 12px);
}
.yard-card span {
    left: clamp(5px, 1.8vw, 8px);
    bottom: clamp(5px, 1.8vw, 8px);
    max-width: calc(100% - clamp(10px, 3.6vw, 16px));
    padding: clamp(2px, 0.9vw, 4px) clamp(7px, 2.4vw, 10px);
    font-size: clamp(10px, 3.1vw, 13px);
}
.yard-card span small {
    font-size: clamp(9px, 2.6vw, 11px);
}
.yard-strip .yard-card span {
    left: clamp(4px, 1.5vw, 6px);
    bottom: clamp(4px, 1.5vw, 6px);
    max-width: calc(100% - clamp(8px, 3vw, 12px));
    padding: clamp(2px, 0.7vw, 3px) clamp(6px, 2vw, 7px);
    font-size: clamp(9px, 2.7vw, 12px);
}
.pin {
    max-width: min(46%, 150px);
    gap: clamp(3px, 1.2vw, 6px);
    padding: clamp(2px, 0.7vw, 3px) clamp(5px, 1.8vw, 8px) clamp(2px, 0.7vw, 3px) clamp(2px, 0.7vw, 3px);
    font-size: clamp(9px, 2.7vw, 11px);
}
.pin-ico {
    width: clamp(22px, 6.4vw, 28px);
    height: clamp(22px, 6.4vw, 28px);
}
.pin-ico .icon {
    width: clamp(12px, 3.5vw, 15px);
    height: clamp(12px, 3.5vw, 15px);
}
@media (max-width: 360px) {
    .forest-overlay-tr {
        max-width: calc(52% - 4px);
    }
    .forest-overlay-tr .forest-badge {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .smith-stock-btn {
        max-width: calc(100vw - 28px);
    }
}


/* smith/forest overlay: stronger mobile scale (clamps alone were too subtle) */
@media (max-width: 520px) {
    .forest-badge {
        height: 28px;
        padding: 0 9px;
        font-size: 12px;
        border-radius: 14px;
    }
    .forest-back {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }
    button.forest-back .icon,
    .forest-back .icon {
        width: 20px;
        height: 20px;
    }
    button.forest-badge:not(.forest-back) .icon {
        width: 12px;
        height: 12px;
    }
    .forest-overlay-tl,
    html[data-theme="dark"] .forest-overlay-tl,
    html[data-theme="light"] .forest-overlay-tl,
    .forest-overlay-tr,
    html[data-theme="dark"] .forest-overlay-tr,
    html[data-theme="light"] .forest-overlay-tr {
        top: 6px;
        gap: 5px;
    }
    .forest-overlay-tl,
    html[data-theme="dark"] .forest-overlay-tl,
    html[data-theme="light"] .forest-overlay-tl { left: 6px; }
    .forest-overlay-tr,
    html[data-theme="dark"] .forest-overlay-tr,
    html[data-theme="light"] .forest-overlay-tr { right: 6px; }
    .forest-overlay-mid {
        padding: 6px 10px;
        border-radius: 13px;
    }
    .forest-overlay-mid strong { font-size: 12px; }
    .forest-overlay-mid small { font-size: 10px; }
    .forest-overlay-br {
        right: 6px;
        bottom: 6px;
        padding: 4px 8px 4px 6px;
        border-radius: 13px;
    }
    .forest-overlay-br strong { font-size: 12px; }
    .forest-overlay-br small { font-size: 9px; }
    .forest-overlay-br img { width: 22px; height: 16px; }
    .chop-spot {
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }
    .chop-spot img { width: 34px; height: 34px; }
    .smith-center {
        gap: 6px;
        width: min(220px, calc(100% - 20px));
    }
    .smith-make {
        min-height: 34px;
        padding: 0 12px;
        gap: 5px;
        font-size: 12.5px;
    }
    .smith-make .icon {
        width: 14px;
        height: 14px;
    }
    .smith-status {
        bottom: calc(100% + 6px);
        width: min(210px, calc(100vw - 36px));
        padding: 5px 8px;
        border-radius: 13px;
        gap: 4px;
    }
    .smith-status strong { font-size: 11px; }
    .smith-status small { font-size: 10px; }
    .smith-stocks {
        left: 6px;
        bottom: 6px;
    }
    .smith-stock {
        height: 24px;
        padding: 0 6px 0 3px;
        gap: 3px;
    }
    .smith-stock img { width: 16px; height: 16px; }
    .smith-stock strong { font-size: 10px; }
    .yard-card span {
        left: 6px;
        bottom: 6px;
        padding: 2px 7px;
        font-size: 11px;
    }
    .yard-card span small { font-size: 9px; }
    .pin {
        gap: 4px;
        padding: 2px 6px 2px 2px;
        font-size: 10px;
    }
    .pin-ico {
        width: 24px;
        height: 24px;
    }
    .pin-ico .icon { width: 13px; height: 13px; }
}
@media (max-width: 360px) {
    .forest-badge {
        height: 26px;
        padding: 0 8px;
        font-size: 11px;
    }
    .forest-back {
        width: 26px;
        height: 26px;
        min-width: 26px;
    }
    button.forest-back .icon,
    .forest-back .icon {
        width: 18px;
        height: 18px;
    }
    .smith-make {
        min-height: 32px;
        padding: 0 10px;
        font-size: 12px;
    }
    .smith-make .icon {
        width: 13px;
        height: 13px;
    }
    .smith-status strong { font-size: 10.5px; }
    .smith-stock {
        height: 22px;
    }
    .smith-stock strong { font-size: 9.5px; }
}

/* end-overlay-badge-responsive */

/* page-cards-no-shadow */
.auth-card, .glass, .stat-card, .product-row, .sheet, .profile-card, .profile-block,
.panel, .entry, .note, .home-hero, .fact, .mine-stat, .recipe-card, .forest-job,
.lane, .yield-tile, .set-row, .picker-pill, .shortcut,
.quest-card, .home-action, .pulse-row, .story-card, .dm-card, .podium-card, .board-row,
.empty, .error-state,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .glass,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .product-row,
html[data-theme="light"] .sheet,
html[data-theme="light"] .profile-card,
html[data-theme="light"] .profile-block,
html[data-theme="light"] .panel,
html[data-theme="light"] .entry,
html[data-theme="light"] .note,
html[data-theme="light"] .home-hero,
html[data-theme="light"] .fact,
html[data-theme="light"] .mine-stat,
html[data-theme="light"] .recipe-card,
html[data-theme="light"] .forest-job,
html[data-theme="light"] .lane,
html[data-theme="light"] .yield-tile,
html[data-theme="light"] .set-row,
html[data-theme="light"] .picker-pill,
html[data-theme="light"] .shortcut,
html[data-theme="light"] .quest-card,
html[data-theme="light"] .home-action,
html[data-theme="light"] .pulse-row,
html[data-theme="light"] .story-card,
html[data-theme="light"] .dm-card,
html[data-theme="light"] .podium-card,
html[data-theme="light"] .board-row,
html[data-theme="light"] .empty,
html[data-theme="light"] .error-state,
html[data-theme="light"] .modal {
    box-shadow: none;
}
/* end-page-cards-no-shadow */


/* light-overlay-border-tune */
html[data-theme="light"] .pin,
html[data-theme="light"] .yard-card span,
html[data-theme="light"] .forest-badge,
html[data-theme="light"] .forest-overlay,
html[data-theme="light"] .chop-spot,
html[data-theme="light"] .smith-make,
html[data-theme="light"] .smith-stock,
html[data-theme="light"] .smith-status {
    border-color: color-mix(in srgb, #ffffff 28%, #00000000);
}
/* end-light-overlay-border-tune */

/* modal-scroll-lock */
html.is-modal-open,
body.is-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}
body.is-modal-open #view {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
    scrollbar-gutter: stable;
}
@media (min-width: 960px) {
    body.is-modal-open #view {
        /* Avoid width reflow: keep scrollport + gutter; page scroll is already locked on html/body. */
        overflow: auto !important;
        touch-action: pan-y;
    }
}
.modal-root.open,
.sheet-root.open {
    overscroll-behavior: none;
    touch-action: none;
}
.modal-root.open .modal,
.modal-root.open .smith-modal-scroll,
.sheet-root.open .sheet {
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}
/* end-modal-scroll-lock */

/* asset-rev: 1791972075 */

.smith-collect {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(34px, 10vw, 44px);
    padding: 0 clamp(14px, 4vw, 18px);
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #e0b43a 70%, #fff);
    background: color-mix(in srgb, #e0b43a 34%, var(--glass-bg-strong));
    color: var(--text-primary);
    font-size: clamp(12px, 3.5vw, 15px);
    font-weight: 750;
    letter-spacing: -0.02em;
    box-shadow: 0 8px 18px rgba(12, 16, 10, 0.22);
    cursor: pointer;
}
.smith-collect:active { transform: scale(0.98); }
.smith-collect:disabled { opacity: 0.6; cursor: default; }
.smith-status.is-ready strong { color: #8a6a12; }
html[data-theme="dark"] .smith-status.is-ready strong { color: #ffd56a; }
.smith-ready {
    margin: 0;
    max-width: 100%;
    text-align: center;
    font-size: 13px;
    font-weight: 750;
    color: #fff8e8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.guide-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
}
.guide-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.guide-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
.guide-head h3 .fas { color: var(--accent-text); }
.guide-count {
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent-text);
    font-size: 11px;
    font-weight: 750;
}
.guide-search {
    width: min(180px, 100%);
    min-height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--glass-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
}
.guide-nav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.guide-nav-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--glass-bg);
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
}
.guide-nav-btn.is-on { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border-color)); background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated)); }
.guide-section { display: none; }
.guide-section.is-on { display: block; }
.guide-shell.is-search .guide-section { display: block; }
.guide-shell.is-search .guide-section + .guide-section { margin-top: 8px; }
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.guide-card, .guide-tip { display: none; }
.guide-section.is-on .guide-card,
.guide-section.is-on .guide-tip,
.guide-shell.is-search .guide-card,
.guide-shell.is-search .guide-tip { display: flex; }
.guide-card.is-hidden, .guide-tip.is-hidden { display: none !important; }
.guide-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    border-top: 2px solid var(--guide-accent, var(--accent));
    background: var(--glass-bg);
    color: var(--text-primary);
    text-align: left;
    font: inherit;
}
.guide-card strong { font-size: 14px; }
.guide-card small, .guide-tip small { color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.guide-card-ico, .guide-tip-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--guide-accent, var(--accent-text));
    background: color-mix(in srgb, var(--guide-accent, var(--accent)) 16%, transparent);
}
.guide-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.guide-tags em {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-style: normal;
    font-size: 11px;
}
.guide-tips { display: flex; flex-direction: column; gap: 8px; }
.guide-tip {
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--glass-bg);
}
.guide-tip strong { display: block; font-size: 13px; }
.guide-empty { margin: 8px 0 0; text-align: center; color: var(--text-secondary); }
.guide-read { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 14px; }
.guide-read p { margin: 0; color: var(--text-secondary); line-height: 1.55; }
@media (max-width: 640px) { .guide-grid { grid-template-columns: 1fr; } }
.guide-modal-head { display: flex; align-items: center; gap: 10px; }
.guide-modal-head h2 { margin: 0; font-size: 18px; }
.guide-modal-head small { display: block; margin-top: 2px; color: var(--text-secondary); font-size: 13px; }
.guide-read { display: flex; flex-direction: column; gap: 14px; margin: 12px 0 16px; }
.guide-block { display: flex; flex-direction: column; gap: 8px; }
.guide-block h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
.guide-block p { margin: 0; color: var(--text-secondary); line-height: 1.6; }
.guide-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.guide-steps li { display: flex; align-items: flex-start; gap: 8px; color: var(--text-secondary); line-height: 1.5; }
.guide-steps b {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--accent) 16%, var(--bg-elevated));
    color: var(--accent-text);
    font-size: 12px;
}
.guide-table { width: 100%; border-collapse: collapse; }
.guide-table th, .guide-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border-color); font-size: 13px; }
.guide-table th { color: var(--text-primary); font-weight: 700; width: 42%; }
.guide-table td { color: var(--text-secondary); }
.guide-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; line-height: 1.5; font-size: 13px; }
.guide-note.is-good { background: color-mix(in srgb, #68d391 14%, var(--bg-elevated)); color: #1f7a45; }
.guide-note.is-info { background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated)); color: var(--accent-text); }
.guide-note.is-warn { background: color-mix(in srgb, #f6ad55 16%, var(--bg-elevated)); color: #9a5b10; }
html[data-theme="dark"] .guide-note.is-good { color: #9ae6b4; }
html[data-theme="dark"] .guide-note.is-warn { color: #fbd38d; }
.guide-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.guide-modal-actions .btn { width: auto; min-width: 108px; }

.admin-section { margin-top: 16px; }
.admin-section h3 {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}
.admin-menu {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.admin-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 84px;
    padding: 10px 6px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--glass-bg);
    color: var(--text-primary);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.admin-tile i { font-size: 20px; color: var(--accent-text); }
.admin-tile span {
    max-width: 100%;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
}
@media (max-width: 520px) {
    .admin-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .admin-tile { min-height: 76px; padding: 8px 4px; gap: 5px; }
    .admin-tile i { font-size: 17px; }
    .admin-tile span { font-size: 10px; }
}
.note-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.purchase-ico { color: var(--accent-text); background: var(--accent-soft); }
.purchase-ico.is-vip { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 28%, var(--bg-elevated)); }
.purchase-top b { color: var(--accent-text); }
.adm-orders .search-input-wrap,
html[data-theme="light"] .adm-orders .search-input-wrap {
    background: var(--bg-elevated);
    border-color: var(--border-color);
}
.adm-orders .search-input-wrap:focus-within,
html[data-theme="light"] .adm-orders .search-input-wrap:focus-within {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border-color));
    background: var(--glass-bg-strong);
}
.adm-orders .search-icon,
.adm-orders .search-clear,
html[data-theme="light"] .adm-orders .search-icon,
html[data-theme="light"] .adm-orders .search-clear { color: var(--text-tertiary); }
.adm-orders .search-input,
html[data-theme="light"] .adm-orders .search-input { color: var(--text-primary); }
.adm-orders .search-input::placeholder,
html[data-theme="light"] .adm-orders .search-input::placeholder { color: var(--text-tertiary); }
.adm-orders .search-btn,
.adm-orders .stats-btn,
html[data-theme="light"] .adm-orders .search-btn,
html[data-theme="light"] .adm-orders .stats-btn {
    background: var(--accent-soft);
    color: var(--accent-text);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border-color));
}
.adm-orders .search-btn:hover,
.adm-orders .stats-btn:hover,
html[data-theme="light"] .adm-orders .search-btn:hover,
html[data-theme="light"] .adm-orders .stats-btn:hover {
    background: color-mix(in srgb, var(--accent) 28%, var(--bg-elevated));
    color: var(--accent-text);
}
.adm-orders .user-summary-card,
html[data-theme="light"] .adm-orders .user-summary-card,
.adm-orders .order-card,
html[data-theme="light"] .adm-orders .order-card,
.adm-orders .ao-platform-card,
html[data-theme="light"] .adm-orders .ao-platform-card,
.adm-orders .ao-menu,
html[data-theme="light"] .adm-orders .ao-menu,
.adm-orders .stats-modal-content,
html[data-theme="light"] .adm-orders .stats-modal-content {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-color);
    box-shadow: none;
}
.adm-orders .user-summary-avatar,
html[data-theme="light"] .adm-orders .user-summary-avatar,
.adm-orders .ao-fallback {
    background: var(--accent-soft);
    color: var(--accent-text);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border-color));
}
.adm-orders .user-summary-name,
.adm-orders .uss-value,
.adm-orders .order-user-name,
.adm-orders .info-value,
.adm-orders .month-label,
html[data-theme="light"] .adm-orders .user-summary-name,
html[data-theme="light"] .adm-orders .uss-value,
html[data-theme="light"] .adm-orders .order-user-name,
html[data-theme="light"] .adm-orders .info-value,
html[data-theme="light"] .adm-orders .month-label { color: var(--text-primary); }
.adm-orders .user-summary-username,
.adm-orders .uss-label,
.adm-orders .info-label,
.adm-orders .order-user-username,
.adm-orders .order-user-contact span,
.adm-orders .transaction-id,
.adm-orders .day-date-sub,
html[data-theme="light"] .adm-orders .user-summary-username,
html[data-theme="light"] .adm-orders .uss-label,
html[data-theme="light"] .adm-orders .order-user-username,
html[data-theme="light"] .adm-orders .order-user-contact span,
html[data-theme="light"] .adm-orders .day-date-sub { color: var(--text-secondary); }
.adm-orders .uss-revenue,
html[data-theme="light"] .adm-orders .uss-revenue,
.adm-orders .daily-rev-amount,
.adm-orders .daily-rev-amounts .currency-sub-line,
html[data-theme="light"] .adm-orders .daily-rev-amount,
html[data-theme="light"] .adm-orders .daily-rev-amounts .currency-sub-line,
.adm-orders .total-val,
html[data-theme="light"] .adm-orders .total-val { color: var(--success) !important; }
.adm-orders .user-summary-divider,
html[data-theme="light"] .adm-orders .user-summary-divider { background: var(--border-color); }
.adm-orders .order-user-profile-link,
html[data-theme="light"] .adm-orders .order-user-profile-link {
    background: var(--glass-bg);
    border-color: var(--border-color);
}
.adm-orders .order-user-profile-link:hover,
html[data-theme="light"] .adm-orders .order-user-profile-link:hover { background: var(--accent-soft); }
.adm-orders .order-user-avatar,
html[data-theme="light"] .adm-orders .order-user-avatar { border-color: var(--border-color); }
.adm-orders .order-user-id,
html[data-theme="light"] .adm-orders .order-user-id,
.adm-orders .order-id,
.adm-orders .transaction-id {
    background: var(--accent-soft);
    color: var(--accent-text);
}
.adm-orders .package-info,
html[data-theme="light"] .adm-orders .package-info { color: var(--text-primary); background: var(--glass-bg); }
.adm-orders .custom-badge { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent-2); }
.adm-orders .ao-btn,
html[data-theme="light"] .adm-orders .ao-btn,
html[data-theme="light"] .adm-orders .ao-btn-info,
html[data-theme="light"] .adm-orders .ao-btn-ok,
.adm-orders .ao-btn-info,
.adm-orders .ao-btn-ok,
.adm-orders .ao-btn-dark {
    border-color: var(--border-color);
    color: var(--text-primary);
    background: transparent;
}
.adm-orders .ao-btn.is-active {
    background: var(--accent-soft);
    color: var(--accent-text);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border-color));
    box-shadow: none;
}
.adm-orders .ao-pages button.is-active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.adm-orders .ao-menu button:hover,
html[data-theme="light"] .adm-orders .ao-menu button:hover { background: var(--accent-soft); }
.adm-orders .ao-menu button.is-danger { color: var(--danger); }
.adm-orders .status-indicator.pending { background: var(--warning); color: var(--accent-contrast); }
.adm-orders .status-indicator.completed,
html[data-theme="light"] .adm-orders .status-indicator.completed,
.adm-orders .status-indicator.invoiced,
html[data-theme="light"] .adm-orders .status-indicator.invoiced { background: var(--success); color: #fffdf9; }
.adm-orders .status-indicator.failed,
.adm-orders .status-indicator.canceled { background: var(--danger); color: #fffdf9; }
.adm-orders .daily-revenue-chip,
html[data-theme="light"] .adm-orders .daily-revenue-chip {
    background: color-mix(in srgb, var(--success) 12%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--success) 35%, var(--border-color));
}
.adm-orders .daily-rev-label,
html[data-theme="light"] .adm-orders .daily-rev-label,
.adm-orders .daily-rev-orders,
html[data-theme="light"] .adm-orders .daily-rev-orders { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, var(--border-color)); }
.adm-orders .platform-web { background: var(--accent); color: var(--accent-contrast); }
.adm-orders .platform-ios { background: var(--accent-2); color: var(--on-accent-2); }
.adm-orders .platform-android { background: var(--success); color: #fffdf9; }
.adm-orders .ao-empty {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border-color));
    background: var(--accent-soft);
    color: var(--text-primary);
}
.adm-orders .card-header,
html[data-theme="light"] .adm-orders .card-header { border-bottom-color: var(--border-color); }
.adm-orders .stats-modal-header,
html[data-theme="light"] .adm-orders .stats-modal-header,
.adm-orders .modern-stats-table thead tr,
html[data-theme="light"] .adm-orders .modern-stats-table thead tr { background: var(--bg-secondary); }
.adm-orders .stats-modal-header .modal-title,
.adm-orders .modern-stats-table thead th,
html[data-theme="light"] .adm-orders .stats-modal-header .modal-title,
html[data-theme="light"] .adm-orders .modern-stats-table thead th { color: var(--text-primary); }
.adm-orders .stats-row,
html[data-theme="light"] .adm-orders .stats-row { background: var(--bg-elevated); }
.adm-orders .stats-row:nth-child(even),
html[data-theme="light"] .adm-orders .stats-row:nth-child(even) { background: var(--glass-bg); }
.adm-orders .stats-row:hover,
html[data-theme="light"] .adm-orders .stats-row:hover { background: var(--accent-soft); }
.adm-orders .stats-row td,
html[data-theme="light"] .adm-orders .stats-row td { color: var(--text-primary); }
.adm-orders .order-pill,
html[data-theme="light"] .adm-orders .order-pill { background: var(--accent-soft); color: var(--accent-text); }
.adm-orders .web-val,
html[data-theme="light"] .adm-orders .web-val { color: var(--accent-text); }
.adm-orders .ios-val,
html[data-theme="light"] .adm-orders .ios-val { color: var(--accent-2); }
.adm-orders .and-val,
html[data-theme="light"] .adm-orders .and-val { color: var(--success); }
.adm-orders .modern-stats-table-wrap,
html[data-theme="light"] .adm-orders .modern-stats-table-wrap { border-color: var(--border-color); }
.adm-orders .top-bar-card,
html[data-theme="light"] .adm-orders .top-bar-card { border-bottom-color: var(--border-color); }
.chat-older {
    position: sticky;
    top: 6px;
    z-index: 3;
    align-self: center;
    margin: 2px auto 4px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--glass-bg-strong);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.3;
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}

/* nav-active-match */
@media (max-width: 959px) {
    html[data-theme="light"] .tab-glide {
        background: color-mix(in srgb, #8d6e3a 12%, #f7f4ef);
        border-color: color-mix(in srgb, #8d6e3a 22%, transparent);
        box-shadow: none;
    }
    html[data-theme="light"] .tab.is-active,
    html[data-theme="light"] .tab.is-center.is-active { color: #5c4630; }
    html[data-theme="dark"] .tab-glide {
        background: color-mix(in srgb, var(--accent) 26%, var(--glass-bg-strong));
        border-color: color-mix(in srgb, var(--accent) 40%, transparent);
        box-shadow: none;
    }
    html[data-theme="dark"] .tab.is-active,
    html[data-theme="dark"] .tab.is-center.is-active { color: #ffffff; }
}
@media (min-width: 960px) {
    html[data-theme="light"] .tab.is-active,
    html[data-theme="light"] .tab.is-center.is-active {
        color: #5c4630;
        background: color-mix(in srgb, #8d6e3a 12%, #f7f4ef);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, #8d6e3a 22%, transparent);
    }
    html[data-theme="dark"] .tab.is-active,
    html[data-theme="dark"] .tab.is-center.is-active {
        color: #ffffff;
        background: color-mix(in srgb, var(--accent) 26%, var(--glass-bg-strong));
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
    }
}
.admin-vip-lead { margin: -4px 0 14px; }
.admin-vip-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.admin-vip-chip {
    text-align: center; padding: 12px 10px; border-radius: 10px;
    background: var(--glass-bg); border: 1px solid var(--glass-line);
}
.admin-vip-chip.is-hot {
    background: color-mix(in srgb, var(--accent) 12%, var(--glass-bg));
    border-color: color-mix(in srgb, var(--accent) 28%, var(--glass-line));
}
.admin-vip-chip i { display: block; margin-bottom: 4px; color: var(--accent-text); font-size: .85rem; }
.admin-vip-chip strong { display: block; font-size: 1.15rem; line-height: 1.1; }
.admin-vip-chip small {
    display: block; margin-top: 3px; font-size: .62rem; font-weight: 700;
    letter-spacing: .03em; text-transform: uppercase; color: var(--text-tertiary);
}
.admin-vip-panel { margin-bottom: 16px; }
.admin-vip-head {
    display: flex; align-items: center; gap: 8px;
    margin: -2px 0 14px; padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color); font-weight: 600;
}
.admin-vip-head i { color: var(--accent-text); }
.admin-vip-head .count { margin-left: auto; font-size: .75rem; font-weight: 600; color: var(--text-tertiary); }
.admin-vip-form { display: grid; grid-template-columns: 1fr; gap: 12px; }
.admin-vip-form .field span {
    text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; font-weight: 700; color: var(--text-tertiary);
}
.admin-vip-form .span-all { grid-column: 1 / -1; }
.admin-vip-save {
    width: auto; display: inline-flex; align-items: center; gap: 7px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
    color: var(--accent-text);
}
.vip-table-wrap { overflow-x: auto; margin: 0 -4px; }
.vip-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.vip-table th {
    font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-tertiary); text-align: left; padding: 0 10px 10px;
    border-bottom: 1px solid var(--border-color); white-space: nowrap;
}
.vip-table td {
    padding: 12px 10px; font-size: .82rem; vertical-align: middle;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
}
.vip-table tr:last-child td { border-bottom: none; }
.vip-user { font-weight: 700; }
.vip-date { font-size: .78rem; color: var(--text-tertiary); white-space: nowrap; }
.vip-admin { font-size: .78rem; color: var(--accent-text); }
.days-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 7px; font-size: .74rem; font-weight: 700; white-space: nowrap;
}
.days-chip.is-ok {
    background: color-mix(in srgb, var(--positive) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--positive) 28%, transparent);
    color: var(--positive);
}
.days-chip.is-warn {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    color: var(--accent-text);
}
.days-chip.is-danger {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 24%, transparent);
    color: var(--danger);
}
.btn-reset {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 7px; font-size: .72rem; font-weight: 700;
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent);
    color: var(--danger); cursor: pointer; white-space: nowrap;
}
.admin-vip-empty { text-align: center; padding: 28px 12px; color: var(--text-tertiary); }
.admin-vip-empty i { display: block; font-size: 1.6rem; margin-bottom: 10px; color: var(--accent-text); opacity: .55; }
@media (min-width: 720px) {
    .admin-vip-form { grid-template-columns: 1fr 1fr 1fr; }
}

.admin-hit { width: 100%; text-align: left; color: inherit; cursor: pointer; }
.admin-hit.is-on { border-color: color-mix(in srgb, var(--accent) 65%, var(--border-color)); }
.player-sheet { margin-top: 12px; }
.player-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.player-block h3 { margin: 12px 0 6px; font-size: 14px; }
.player-block h3:first-child { margin-top: 0; }
.player-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.player-stat {
    padding: 10px 12px; border-radius: 14px;
    border: 1px solid var(--border-color); background: var(--bg-elevated);
}
.player-stat span { display: block; font-size: 12px; color: var(--text-secondary); }
.player-stat strong { font-size: 16px; }
@media (max-width: 800px) {
    .player-grid { grid-template-columns: 1fr; }
}

.job-lead { margin: -4px 0 12px; }
.job-energy {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-line);
}
.job-energy i { color: var(--accent-text); }
.job-energy strong { font-size: 1.2rem; }
.job-energy small { margin-left: auto; color: var(--text-tertiary); font-size: 12px; }
.job-bulk { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.job-bulk .btn { min-height: 40px; }
.job-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.job-card {
    overflow: hidden;
    border-radius: 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-line);
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.job-card.is-ready { border-color: color-mix(in srgb, var(--positive) 45%, var(--glass-line)); }
.job-card.is-run { border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-line)); }
.job-photo { position: relative; aspect-ratio: 16 / 10; background: #1b140c; }
.job-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.job-vip {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, #1b140c 62%, transparent);
    color: #f3d48a;
    font-size: 11px;
    font-weight: 700;
}
.job-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.job-body h3 { margin: 0; font-size: 14px; line-height: 1.25; }
.job-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.job-facts li { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 11px; color: var(--text-secondary); }
.job-facts i { width: 12px; text-align: center; color: var(--accent-text); }
.job-go { width: 100%; min-height: 34px; font-size: 12px; }
@media (max-width: 360px) {
    .job-grid { grid-template-columns: 1fr; }
}

/* jobs-layout-v2 */
.job-body { flex: 1; }
.job-body h3 { text-align: center; }
.job-bulk { display: flex; flex-wrap: wrap; gap: 8px; }
.job-bulk .btn {
    width: auto;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
}
.job-bulk .job-bulk-start {
    background: color-mix(in srgb, var(--positive) 14%, transparent);
    border-color: color-mix(in srgb, var(--positive) 42%, transparent);
    color: var(--positive);
}
.job-bulk .job-bulk-collect {
    background: color-mix(in srgb, var(--accent-2) 16%, transparent);
    border-color: color-mix(in srgb, var(--accent-2) 42%, transparent);
    color: var(--accent-2);
}
.job-card .job-go {
    width: 100%;
    margin-top: auto;
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    background: transparent;
}
.job-card .job-go.is-start {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border-color: color-mix(in srgb, var(--accent) 42%, transparent);
    color: var(--accent-text);
}
.job-card .job-go.is-start:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent) 32%, transparent);
}
.job-card .job-go.is-collect {
    background: color-mix(in srgb, var(--positive) 16%, transparent);
    border-color: color-mix(in srgb, var(--positive) 42%, transparent);
    color: var(--positive);
}
.job-card .job-go.is-collect:hover:not(:disabled) {
    background: color-mix(in srgb, var(--positive) 32%, transparent);
}
.job-card .job-go.is-wait,
.job-card .job-go.is-locked {
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
    border-color: var(--glass-line);
    color: var(--text-tertiary);
    cursor: not-allowed;
}
@media (min-width: 960px) {
    .job-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
.puzzle-layer {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 16px;
    background: transparent;
}
@keyframes puzzle-in {
    0% { transform: translate3d(0, -50px, 0) scale(0.9); opacity: 0; }
    100% { transform: none; opacity: 1; }
}
.puzzle-dialog {
    width: min(100%, 440px);
    border-radius: 20px;
    padding: 16px;
    color: var(--text-primary);
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--glass-bg) 88%, transparent);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(22px) saturate(165%);
    -webkit-backdrop-filter: blur(22px) saturate(165%);
    animation: puzzle-in 0.3s ease;
}
.puzzle-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.puzzle-head h2 { margin: 0; font-size: 18px; }
.puzzle-refresh, .puzzle-cancel {
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    color: var(--text-primary);
    cursor: pointer;
}
.puzzle-refresh { width: 36px; height: 36px; border-radius: 10px; }
.puzzle-lead { margin: 8px 0 10px; }
.puzzle-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 400 / 250;
    border-radius: 12px;
    overflow: hidden;
    background: #1b140c;
    touch-action: none;
}
.puzzle-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.puzzle-piece { position: absolute; left: 0; object-fit: fill; pointer-events: none; }
.puzzle-track {
    position: relative;
    height: 46px;
    margin-top: 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    border: 1px solid var(--glass-line);
    touch-action: none;
}
.puzzle-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: inherit;
    background: color-mix(in srgb, var(--accent) 28%, transparent);
}
.puzzle-knob {
    position: absolute;
    top: 3px;
    left: 0;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--glass-bg);
    color: var(--accent-text);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--glass-line));
    cursor: grab;
    touch-action: none;
}
.puzzle-status { min-height: 1.2em; margin: 8px 0; font-size: 13px; color: var(--text-secondary); }
.puzzle-cancel { width: 100%; min-height: 40px; border-radius: 12px; font-weight: 700; }
body.is-puzzle-open #view { overflow: hidden; }
/* jobs-layout-v3 */
.jobs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.jobs-head .page-head { margin: 0; min-width: 0; flex: 1; }
.jobs-head .job-bulk { margin: 0 0 0 auto; flex: none; justify-content: flex-end; }
.res-ico.res-energy { background: none; }
.res-ico.res-energy i { font-size: 13px; color: var(--accent-text); }
.puzzle-tools { display: flex; align-items: center; gap: 6px; }
.puzzle-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    color: var(--text-primary);
    cursor: pointer;
}
/* vitality-layout-v1 */
.home-vital {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    margin-top: 6px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.home-vital img {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 8px;
}
.home-vital:active { transform: translateY(1px); }
.vital-bars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 12px 0 4px;
}
.vital-meter-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    color: var(--text-primary);
    font-size: 0.92rem;
}
.vital-track {
    height: 12px;
    overflow: hidden;
    border-radius: 99px;
    background: color-mix(in srgb, var(--text-primary) 14%, transparent);
}
.vital-fill {
    height: 100%;
    border-radius: inherit;
}
.vital-fill.is-energy { background: var(--accent); }
.vital-fill.is-health { background: #c4493a; }
.vital-section {
    margin: 16px 0 8px;
    color: var(--text-primary);
    font-size: 1rem;
}
.vital-note { margin: 4px 0 0; }
.job-go img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    vertical-align: -3px;
}
.vital-fill { width: 0; }
/* vitality-layout-v2 */

/* vitality-layout-v3 */
.res-ico.res-energy img, .res-ico.res-health img {
    width: 17px;
    object-fit: contain;
    display: block;
}
.res-ico.res-energy, .res-ico.res-health {
    width: 19px;
    background: none;
    border-radius: 0;
}
.home-vital img { object-fit: contain; }
.vital-meter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 86%, white), var(--bg-elevated));
    box-shadow: 0 8px 18px rgb(0 0 0 / 8%);
}
.vital-mark {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex: none;
    filter: drop-shadow(0 3px 4px rgb(0 0 0 / 18%));
}
.vital-main { min-width: 0; flex: 1; }
.vital-meter-top { margin-bottom: 7px; font-weight: 700; }
.vital-meter-top strong { font-variant-numeric: tabular-nums; }
.vital-track {
    position: relative;
    height: 12px;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 22%);
}
.vital-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}
.vital-fill::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 46%;
    background: linear-gradient(180deg, rgb(255 255 255 / 62%), transparent);
}
.vital-fill.is-energy {
    background: linear-gradient(90deg, #e2a21a, #ffe58a);
    box-shadow: 0 0 10px rgb(242 184 40 / 45%);
}
.vital-fill.is-health {
    background: linear-gradient(90deg, #d43248, #ff8d9a);
    box-shadow: 0 0 10px rgb(212 50 72 / 40%);
}
.vital .job-facts img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}
/* vitality-layout-v4 */
.vital-bars { align-items: stretch; }
.vital-meter { min-width: 0; height: 100%; box-sizing: border-box; }
.vital-meter-top span,
.vital-meter-top strong { white-space: nowrap; }
@media (max-width: 760px) {
    .vital-bars { gap: 8px; margin-top: 0; }
    .vital-meter {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 8px;
    }
    .vital-mark { width: 26px; height: 26px; }
    .vital-main { width: 100%; }
    .vital-meter-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        margin-bottom: 6px;
        font-size: 13px;
    }
    .vital-meter .caption { margin: 6px 0 0; line-height: 1.2; }
}
/* vitality-layout-v5 */
.home-tool .home-health {
    width: 39px;
    object-fit: contain;
    display: block;
}
.vital-meter .caption {
    display: block;
    margin: 3px 0 0;
    padding: 0;
    font-size: 11px;
    line-height: 1.1;
    text-align: left;
}
@media (max-width: 760px) {
    .vital-meter {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding: 8px;
    }
    .vital-mark { width: 26px; height: 26px; }
    .vital-meter-top {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 4px;
        margin-bottom: 3px;
        font-size: 12px;
    }
    .vital-meter .caption {
        margin: 2px 0 0;
        font-size: 10px;
        line-height: 1.05;
    }
}
@media (max-width: 959px) {
    .tab-main {
        flex: 5 1 0;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .tab-glide { width: calc(100% / 5); }
}
/* tax-office */
.tax-office {
    overflow: hidden;
    border-radius: 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-line);
}
.tax-office > img {
    display: block;
    width: 100%;
    height: 148px;
    object-fit: cover;
    object-position: center 42%;
}
.tax-office-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.tax-office-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tax-office-head h2 { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.tax-office-head i { color: var(--accent-text); }
.tax-vip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, #f3d48a 18%, transparent);
    color: #f3d48a;
    font-size: 11px;
    font-weight: 700;
}
html[data-theme="light"] .tax-vip { color: #6a4c1c; background: color-mix(in srgb, #8d6e3a 14%, #f7f4ef); }
.tax-friday { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.tax-friday span { color: var(--text-tertiary); }
.tax-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 650;
}
.tax-banner.is-ok { background: color-mix(in srgb, var(--positive) 14%, transparent); color: var(--positive); }
.tax-banner.is-warn { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.tax-banner.is-bad { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.tax-banner.is-neutral { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text-secondary); }
.tax-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tax-stats div {
    padding: 10px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--text) 5%, transparent);
    border: 1px solid var(--glass-line);
}
.tax-stats span { display: block; margin-bottom: 4px; font-size: 11px; color: var(--text-tertiary); }
/* tax-pay-theme */
.tax-pay,
.btn.tax-pay {
    width: 100%;
    min-height: 42px;
    margin-top: 2px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 750;
    letter-spacing: 0.01em;
    border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--glass-line));
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--accent) 40%, var(--glass-bg)),
        color-mix(in srgb, var(--accent) 18%, var(--glass-bg-strong, var(--glass-bg)))
    );
    color: var(--accent-text);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
    transition: background 0.16s ease, border-color 0.16s ease, filter 0.16s ease, transform 0.16s ease;
}
.tax-pay i {
    font-size: 13px;
    opacity: 0.92;
}
.tax-pay:hover:not(:disabled) {
    filter: brightness(1.05);
    border-color: color-mix(in srgb, var(--accent) 62%, var(--glass-line));
}
.tax-pay:active:not(:disabled) {
    transform: translateY(1px);
}
.tax-pay:disabled,
.btn.tax-pay:disabled {
    filter: none;
    opacity: 1;
    cursor: not-allowed;
    background: color-mix(in srgb, var(--text-primary) 5%, var(--glass-bg));
    border: 1px solid var(--glass-line);
    color: var(--text-tertiary);
    box-shadow: none;
}
html[data-theme="dark"] .tax-pay:not(:disabled) {
    color: #eaf2ff;
    border-color: color-mix(in srgb, #8eb4e8 48%, var(--glass-line));
    background: linear-gradient(
        180deg,
        color-mix(in srgb, #8eb4e8 34%, var(--glass-bg)),
        color-mix(in srgb, #8eb4e8 14%, var(--glass-bg-strong, var(--glass-bg)))
    );
}

.tax-hint { margin: 0; }
.job-name { display: flex; align-items: center; justify-content: center; gap: 4px; }
.job-name h3 { margin: 0; }
.job-info {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    flex: 0 0 auto;
}
.job-info:hover { color: var(--accent-text); }
.job-pop {
    position: absolute;
    z-index: 6;
    width: min(280px, calc(100vw - 16px));
    padding: 12px 14px;
    border-radius: 16px;
    color: var(--text-primary);
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--glass-bg-strong) 78%, transparent);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
}
.job-pop-label {
    margin: 10px 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.job-pop-label:first-child { margin-top: 0; }
.job-pop ul { list-style: none; margin: 0; padding: 0; }
.job-pop li { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 6px; font-size: 13px; }
.job-pop li i { width: 14px; margin-top: 2px; text-align: center; color: var(--accent-text); }
.job-pop-note { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: var(--text-secondary); }

/* job-pop-solid */

.home-tool .home-tax {
    width: 41px;
    object-fit: contain;
    object-position: center;
    display: block;
}

.tax-stats .sikke-amt { font-size: 15px; }
.tax-stats .sikke-amt img { width: 22px; height: 22px; }
.tax-board {
    margin-top: 14px;
    border-radius: 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-line);
    overflow: hidden;
}
.tax-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--glass-line);
}
.tax-board-head h2 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
}
.tax-board-head h2 i { color: var(--positive); }
.tax-board-body { padding: 8px 16px 16px; }
.tax-tabs {
    display: flex;
    gap: 4px;
    overflow: hidden;
    overscroll-behavior: none;
    border-bottom: 1px solid var(--glass-line);
    margin: 0 -4px 14px;
}
.tax-tabs::-webkit-scrollbar { display: none; width: 0; height: 0; }
.tax-tab {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
}
.tax-tab.is-active { color: var(--text); }
.tax-tab.is-active::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, var(--positive), color-mix(in srgb, var(--positive) 55%, #d6e36a));
}
.tax-scope {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent-text);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.tax-scope i { font-size: 11px; }
.tax-scope.is-global {
    border-color: color-mix(in srgb, var(--positive) 42%, transparent);
    background: color-mix(in srgb, var(--positive) 14%, transparent);
    color: var(--positive);
}
.tax-month-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
.tax-month-bar > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-tertiary);
    font-size: 13px;
    font-weight: 650;
    text-transform: capitalize;
}
.tax-month-bar select {
    max-width: 168px;
    min-height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--text) 5%, transparent);
    color: var(--text);
    font-size: 13px;
}
.tax-my-rank {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    font-size: 13px;
}
.tax-my-rank .lbl { display: inline-flex; align-items: center; gap: 6px; color: var(--text-tertiary); }
.tax-my-rank .val { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--accent-text); }
.tax-my-rank .sub { font-weight: 650; color: var(--text-secondary); }
.tax-table-wrap { overflow-x: auto; }
.tax-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tax-table th:first-child, .tax-table td:first-child { width: 42px; }
.tax-table th:last-child, .tax-table td:last-child { width: 30%; }
.tax-table th {
    padding: 0 8px 10px;
    border-bottom: 1px solid var(--glass-line);
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
}
.tax-table th:last-child, .tax-amount, .tax-history td.num { text-align: right; }
.tax-payer { cursor: pointer; }
.tax-payer td {
    padding: 9px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--glass-line) 70%, transparent);
    vertical-align: middle;
}
.tax-payer:hover td { background: color-mix(in srgb, var(--text) 4%, transparent); }
.tax-payer.is-self td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.tax-user { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tax-user .avatar { width: 32px; height: 32px; border: 2px solid color-mix(in srgb, var(--text) 12%, transparent); }
.tax-payer-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-weight: 700;
}
.tax-payer-name { overflow: hidden; }
.tax-user .flag { width: 14px; height: 10px; }
.tax-medal { font-size: 17px; }
.tax-rank-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--text) 7%, transparent);
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 750;
}
.tax-amount { font-weight: 750; color: var(--positive); white-space: nowrap; }
.tax-amount .sikke-amt { color: var(--positive); }
.tax-empty {
    padding: 28px 8px;
    color: var(--text-tertiary);
    text-align: center;
    font-size: 13.5px;
}
.tax-empty i { display: block; margin-bottom: 8px; font-size: 22px; opacity: .45; }
.tax-more {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    min-height: 38px;
    border-radius: 10px;
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--text) 4%, transparent);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 650;
}
.tax-history th:first-child, .tax-history td:first-child { width: 34%; }
.tax-history th, .tax-history td.num { text-align: right; }
.tax-history th:first-child, .tax-history td:first-child { text-align: left; }
.tax-history td {
    padding: 9px 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--glass-line) 70%, transparent);
    vertical-align: middle;
    font-size: 13px;
}
.tax-history-time { color: var(--text-tertiary); font-size: 12px; }
.tax-delay {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
    font-size: 11px;
    font-weight: 700;
}
.tax-history .warn .sikke-amt { color: var(--warning); }
.tax-history .bad { color: var(--danger); font-weight: 700; }
.tax-history .bad .sikke-amt { color: var(--danger); }
.tax-history .total .sikke-amt { font-weight: 800; }
.tax-history .muted { color: var(--text-tertiary); }
.tax-foot { margin: 10px 0 0; color: var(--text-tertiary); font-size: 12px; }
@media (max-width: 640px) {
    .tax-board-head, .tax-board-body { padding-left: 12px; padding-right: 12px; }
    .tax-tab { font-size: 12.5px; padding: 8px 8px; }
    .tax-table th { font-size: 10px; }
}

/* depot-layout-v1 */
.home-tool .home-depot, .home-tool .home-merchant {
    width: 46px;
    height: 46px;
    object-fit: contain;
    object-position: center;
    display: block;
}
.depot-hero { position: relative; border-radius: 18px; overflow: hidden; }
.depot-hero img { width: 100%; height: 210px; object-fit: cover; object-position: center; display: block; }
.depot-hero-copy {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 14px;
    background: linear-gradient(transparent, rgba(6, 10, 22, .9));
}
.depot-hero-copy h2, .depot-hero-copy p { margin: 0; }
.depot-hero-copy p { opacity: .85; }
.depot-panel { margin-top: 12px; }
.depot-pips { display: flex; gap: 4px; margin: 0 0 10px; }
.depot-pips i { flex: 1; height: 6px; border-radius: 99px; background: rgba(255,255,255,.14); }
.depot-pips i.is-on { background: #e2b15a; }
.depot-bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.depot-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c9842a, #f0d48a); }
.depot-used { margin: 8px 0 0; font-weight: 700; }
.depot-used.is-full { color: #f0a0a0; }
.depot-upgrade { margin-top: 12px; }
.depot-upgrade p { margin: 0 0 8px; }
.depot-costs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.depot-cost {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px; border-radius: 12px; background: rgba(255,255,255,.05);
}
.depot-cost img { width: 22px; height: 22px; object-fit: contain; }
.depot-cost small { opacity: .7; }
.depot-cost.is-short strong, .depot-cost.is-short .sikke-amt { color: #f0a0a0; }
.depot-section { margin-top: 16px; }
.depot-section h3 { margin: 0 0 8px; }
.depot-card .job-photo { height: 92px; }
.depot-card .job-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.depot-max { margin: 12px 0 0; }
/* ortak is */
.btn-jobs-ortak {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(167, 139, 250, 0.35);
    background: rgba(139, 92, 246, 0.14);
    color: #c4b5fd;
    white-space: nowrap;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.btn-jobs-ortak img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.btn-jobs-ortak:hover {
    background: rgba(139, 92, 246, 0.24);
    border-color: rgba(196, 181, 253, 0.55);
    color: #ede9fe;
    transform: translateY(-1px);
}
html[data-theme="light"] .btn-jobs-ortak {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.28);
    color: #6d28d9;
}
html[data-theme="light"] .btn-jobs-ortak:hover {
    background: rgba(124, 58, 237, 0.16);
    color: #5b21b6;
}
.jobs-head { flex-wrap: wrap; }
.jobs-head .btn-jobs-ortak { flex: none; }
.coop-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin: 0 0 12px;
    padding-bottom: 2px;
}
.coop-tabs button {
    flex: none;
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--glass-line);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.coop-tabs button.is-on {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border-color: color-mix(in srgb, var(--accent) 42%, transparent);
    color: var(--accent-text);
}
.coop-seats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.coop-seats span { font-size: 13px; color: var(--text-secondary); font-weight: 700; }
.coop-seats div { display: flex; gap: 6px; }
.coop-size {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--glass-line);
    background: transparent;
    color: var(--text-secondary);
    font-weight: 700;
    cursor: pointer;
}
.coop-size.is-on {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border-color: color-mix(in srgb, var(--accent) 42%, transparent);
    color: var(--accent-text);
}
.coop-count {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, #1b140c 62%, transparent);
    color: #f3d48a;
    font-size: 11px;
    font-weight: 700;
}
.coop-people { display: flex; flex-wrap: wrap; gap: 4px; }
.coop-people span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    color: var(--text-secondary);
    font-size: 10px;
}
.coop-leaders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.coop-leaders li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    grid-template-areas: "rank name pay" "rank meta pay";
    gap: 0 8px;
    align-items: center;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--glass-line);
    background: var(--glass-bg);
}
.coop-leaders span { grid-area: rank; font-weight: 700; color: var(--accent-text); }
.coop-leaders strong { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.coop-leaders em { grid-area: pay; font-style: normal; }
.coop-leaders small { grid-area: meta; color: var(--text-tertiary); }

/* depot inventory */
.depot-board { margin-top: 14px; }
.depot-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.depot-filter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--glass-line);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
}
.depot-filter .icon { width: 14px; height: 14px; }
.depot-filter.is-on {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent-text);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.depot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px;
}
.depot-item {
    --inv-accent: #8faeff;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--glass-bg-strong) 72%, transparent);
    color: var(--text-primary);
    text-align: center;
    box-shadow: none;
}
.depot-item.is-hidden { display: none; }
.depot-item-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    max-height: 96px;
    padding: 22px 8px 8px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--inv-accent) 24%, transparent), color-mix(in srgb, var(--bg-primary) 40%, transparent));
}
.depot-item-image { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.depot-item-image img { width: 52px; height: 52px; max-width: 78%; max-height: 78%; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .22)); }
.depot-item-image .icon { width: 36px; height: 36px; color: var(--inv-accent); }
.depot-qty {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 1;
    max-width: calc(100% - 12px);
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .52);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #6ee7b7;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.depot-qty strong { font-size: 10px; font-weight: 750; }
.depot-qty small { font-size: 8px; font-weight: 650; letter-spacing: .02em; }
html[data-theme="light"] .depot-qty { background: rgba(255, 255, 255, .92); color: #059669; border-color: rgba(5, 150, 105, .2); }
.depot-item-body { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 8px 10px; min-width: 0; }
.depot-item-name {
    font-size: 12px;
    font-weight: 650;
    line-height: 1.3;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.depot-cat {
    max-width: 100%;
    padding: 2px 5px;
    border-radius: 999px;
    font-size: 7px;
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: color-mix(in srgb, var(--inv-accent) 20%, transparent);
    color: color-mix(in srgb, var(--inv-accent) 70%, var(--text-primary) 30%);
    border: 1px solid color-mix(in srgb, var(--inv-accent) 32%, transparent);
}

.depot-wait { margin: 8px 0 0; font-weight: 650; color: var(--accent-text); }

/* home-tool-label-align */
.home-block .home-tool,
.home-block .home-settings,
.home-block .home-help,
.home-block .home-staff,
.home-block .home-logout {
    display: grid;
    grid-template-rows: 50px auto;
    align-items: center;
    justify-items: center;
    align-content: center;
    row-gap: 6px;
}
.home-block .home-tool > img,
.home-block .home-settings > img,
.home-block .home-help > img,
.home-block .home-staff > .icon,
.home-block .home-logout > .icon {
    max-height: 50px;
    align-self: center;
}
.home-block .home-tool > span,
.home-block .home-settings > span,
.home-block .home-help > span,
.home-block .home-staff > span,
.home-block .home-logout > span {
    align-self: start;
}

/* depot upgrade modal */
.depot-hero-copy, .depot-hero-copy h2, .depot-hero-copy p { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .55); }
html[data-theme="light"] .depot-pips i { background: rgba(120, 84, 30, .18); }
html[data-theme="light"] .depot-pips i.is-on { background: #c9842a; }
html[data-theme="light"] .depot-bar { background: rgba(120, 84, 30, .16); box-shadow: inset 0 0 0 1px rgba(120, 84, 30, .14); }
html[data-theme="light"] .depot-bar span { background: linear-gradient(90deg, #b26a16, #e0a43c); }
.depot-upgrade .btn { width: 100%; }
.depot-hero::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 90px; pointer-events: none;
    background: linear-gradient(rgba(6, 10, 22, .75), transparent);
}
.depot-hero .depot-hero-copy {
    top: 0; bottom: auto; right: auto; max-width: 45%; padding: 12px 14px; background: none; z-index: 1;
}
.depot-hero-stats {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px;
    background: linear-gradient(transparent, rgba(6, 10, 22, .9));
}
.depot-hero-stats .depot-pips { margin-bottom: 8px; }
.depot-hero-stats .depot-pips i:not(.is-on) { background: rgba(255, 255, 255, .22); }
.depot-hero-stats .depot-bar { background: rgba(255, 255, 255, .18); box-shadow: none; }
.depot-hero-stats .depot-used { margin-top: 6px; font-size: 13px; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .55); }
.depot-hero-stats .depot-used.is-full { color: #f0a0a0; }
.depot-over { margin: 10px 2px 0; }
.depot-hero .depot-upgrade,
.depot-hero .depot-max {
    position: absolute; right: 12px; top: 12px; z-index: 1;
    max-width: 55%; margin: 0; text-align: right;
    color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
.depot-hero .depot-upgrade p { margin: 0 0 4px; font-size: 12px; }
.depot-hero .depot-upgrade p:last-child { margin: 0; }
.depot-hero .depot-upgrade .depot-wait { color: #f0d48a; }
.depot-hero .depot-upgrade .btn { width: auto; min-height: 0; padding: 8px 16px; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.depot-needs { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.depot-need {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 12px; border: 1px solid var(--glass-line); background: rgba(255, 255, 255, .05);
}
html[data-theme="light"] .depot-need { background: rgba(255, 255, 255, .62); }
.depot-need-ico { display: flex; align-items: center; justify-content: center; }
.depot-need-ico img { width: 28px; height: 28px; object-fit: contain; }
.depot-need-ico .icon { width: 22px; height: 22px; color: #e2b15a; }
.depot-need-name { display: flex; flex-direction: column; min-width: 0; font-weight: 650; }
.depot-need-name small { opacity: .7; font-weight: 500; }
.depot-need-qty { font-weight: 750; }
.depot-need.is-short { border-color: rgba(224, 90, 90, .5); }
.depot-need.is-short .depot-need-qty, .depot-need.is-short .sikke-amt { color: #e05a5a; }
.depot-need-time { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 2px; font-weight: 650; }
.depot-need-time strong { margin-left: auto; }
.depot-need-time .icon { width: 18px; height: 18px; }
.depot-need-note { margin: 10px 0 0; color: #e05a5a; font-weight: 650; }
.depot-need-note.is-ok { color: #16a34a; }


/* tax-office-hero */
.tax-office-hero { position: relative; }
.tax-office-hero > img {
    display: block;
    width: 100%;
    height: 148px;
    object-fit: cover;
    object-position: center 42%;
}
.tax-office-hero .tax-office-head {
    position: absolute;
    inset: 0 0 auto 0;
    padding: 10px 12px 26px;
    background: linear-gradient(180deg, rgba(12, 8, 4, 0.78) 0%, rgba(12, 8, 4, 0.42) 60%, rgba(12, 8, 4, 0) 100%);
}
.tax-office-hero .tax-office-head h2 { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.tax-office-hero .tax-office-head i { color: #f3d48a; }
.tax-office-hero .tax-vip,
html[data-theme="light"] .tax-office-hero .tax-vip {
    color: #f3d48a;
    background: rgba(12, 8, 4, 0.55);
    border: 1px solid rgba(243, 212, 138, 0.45);
}
.tax-office-body > .caption:first-child { margin: 0; }

/* modal close animation */
@keyframes modal-out {
    0% { transform: translate3d(0, -50%, 0) scale(1); opacity: 1; }
    100% { transform: translate3d(0, calc(-50% - 50px), 0) scale(0.9); opacity: 0; }
}
@keyframes smith-modal-out {
    0% { transform: translate3d(-50%, -50%, 0) scale(1); opacity: 1; }
    100% { transform: translate3d(-50%, calc(-50% - 50px), 0) scale(0.9); opacity: 0; }
}
@keyframes smith-modal-out-sheet {
    0% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
    100% { transform: translate3d(0, -50px, 0) scale(0.9); opacity: 0; }
}
.modal-root.is-closing { pointer-events: none; }
.modal-root.is-closing .overlay { opacity: 0; }
.modal-root.open.is-closing .modal { animation: modal-out 0.25s ease forwards; }
.modal-root.open.is-closing .modal.smith-modal { animation: smith-modal-out 0.25s ease forwards; }
@media (max-width: 959px) {
    .modal-root.open.is-closing .modal.smith-modal { animation: smith-modal-out-sheet 0.25s ease forwards; }
}
@media (max-width: 720px) {
    .modal-root.open.is-closing .modal.report-sheet { animation: smith-modal-out-sheet 0.25s ease forwards; }
}
@media (prefers-reduced-motion: reduce) {
    .modal-root.open.is-closing .modal { animation: none; opacity: 0; }
}

.tax-office-hero .tax-friday {
    position: absolute;
    right: 10px;
    bottom: 10px;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    padding: 5px 10px;
    border-radius: 10px;
    background: rgba(12, 8, 4, 0.62);
    border: 1px solid rgba(243, 212, 138, 0.35);
    font-size: 11px;
    line-height: 1.25;
}
.tax-office-hero .tax-friday span { color: rgba(255, 255, 255, 0.78); }
.tax-office-hero .tax-friday strong { color: #f3d48a; font-size: 13px; }

/* tax stat coin align */
.tax-stats div .sikke-amt { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: inherit; font-size: 15px; line-height: 1; }
.tax-stats div .sikke-amt img { width: 22px; height: 22px; }


/* friends-modern */
.fr-search {
    position: relative;
    display: block;
    margin: 0 0 10px;
}
.fr-search > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 14px;
    pointer-events: none;
}
.fr-search input {
    width: 100%;
    min-height: 44px;
    padding: 0 14px 0 40px;
    border: 1px solid var(--glass-line);
    border-radius: 14px;
    background: var(--glass-bg);
    color: var(--text-primary);
    font-size: 15px;
    transition: border-color .2s, box-shadow .2s;
}
.fr-search input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.fr-results:not(:empty) { margin: 0 0 12px; }
.fr-noresult { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--text-primary) 5%, transparent); color: var(--text-secondary); font-size: 13px; }

.fr-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 12px;
    padding: 4px;
    overflow-x: auto;
    border: 1px solid var(--glass-line);
    border-radius: 14px;
    background: var(--glass-bg);
    scrollbar-width: none;
}
.fr-tabs::-webkit-scrollbar { display: none; }
.fr-tab {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.fr-tab:hover { color: var(--text-primary); }
.fr-tab.is-active {
    background: color-mix(in srgb, var(--accent) 22%, var(--glass-bg));
    color: var(--accent-text);
    box-shadow: 0 2px 8px color-mix(in srgb, #000 12%, transparent);
}
.fr-tab b {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 10%, transparent);
    color: inherit;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}
.fr-tab b.is-alert { background: var(--danger); color: #fff; }

.fr-list { display: grid; gap: 8px; }
.fr-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--glass-line);
    border-radius: 16px;
    background: var(--glass-bg);
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.fr-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--glass-line));
    box-shadow: 0 6px 18px color-mix(in srgb, #000 10%, transparent);
}
.fr-card.is-online { border-left: 3px solid var(--positive); }
.fr-card.is-blocked .avatar { filter: grayscale(.8); opacity: .65; }
.fr-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.fr-avatar { position: relative; flex: none; }
.fr-avatar .avatar {
    width: 46px;
    height: 46px;
    border: 2px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
    font-size: 16px;
}
.fr-card.is-online .fr-avatar .avatar { border-color: color-mix(in srgb, var(--positive) 70%, transparent); }
.fr-dot {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    border: 2px solid var(--glass-bg-strong, #1b1510);
    border-radius: 50%;
    background: var(--positive);
    box-shadow: 0 0 6px color-mix(in srgb, var(--positive) 70%, transparent);
}
.fr-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fr-info strong {
    overflow: hidden;
    font-size: 15px;
    font-weight: 750;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.fr-info small {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 12px;
}
.fr-level {
    flex: none;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent-text);
    font-size: 11px;
    font-weight: 750;
}
.fr-status { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fr-card.is-online .fr-status { color: var(--positive); }

.fr-actions { display: flex; flex: none; align-items: center; gap: 6px; }
.fr-btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--glass-line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: background .2s, color .2s, transform .15s;
}
.fr-btn:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 10%, transparent); }
.fr-btn:active, .fr-pill:active { transform: scale(.94); }
.fr-btn.is-no:hover { border-color: color-mix(in srgb, var(--danger) 50%, transparent); background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.fr-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--glass-line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .15s;
}
.fr-pill.is-ok { border-color: transparent; background: var(--positive); color: #fff; }
.fr-pill.is-ok:hover { background: color-mix(in srgb, var(--positive) 85%, #000 15%); }

.fr-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 16px;
    border: 1px dashed var(--glass-line);
    border-radius: 18px;
    background: var(--glass-bg);
    text-align: center;
}
.fr-empty > span {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent-text);
    font-size: 22px;
}
.fr-empty strong { font-size: 15px; }
.fr-empty p { margin: 0; max-width: 280px; color: var(--text-secondary); font-size: 13px; }

@media (max-width: 420px) {
    .fr-card { padding: 9px 10px; gap: 8px; }
    .fr-avatar .avatar { width: 42px; height: 42px; }
    .fr-btn { width: 32px; height: 32px; border-radius: 10px; font-size: 13px; }
    .fr-pill { min-height: 32px; padding: 0 10px; font-size: 12px; }
    .fr-tabs { gap: 2px; padding: 3px; }
    .fr-tab { flex: 1 1 auto; gap: 4px; padding: 0 6px; font-size: 12px; }
    .fr-tab b { min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
}
.fr-list > *, .fr-card, .fr-main, .fr-info { min-width: 0; }
.fr-card { max-width: 100%; }
.fr-info { flex: 1; }
.fr-info small { flex-wrap: wrap; row-gap: 2px; }
.fr-status { white-space: normal; }
.fr-info strong { display: flex; align-items: center; gap: 6px; }
.fr-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* depot mobile */
@media (max-width: 600px) {
    .depot-hero img { height: 180px; }
    .depot-hero::before { height: 70px; }
    .depot-hero .depot-hero-copy { padding: 10px 12px; }
    .depot-hero .depot-hero-copy h2 { font-size: 16px; line-height: 1.2; }
    .depot-hero .depot-hero-copy p { font-size: 11px; }
    .depot-hero .depot-upgrade, .depot-hero .depot-max { top: 10px; right: 10px; font-size: 11px; }
    .depot-hero .depot-upgrade p { font-size: 10px; margin-bottom: 2px; }
    .depot-hero .depot-upgrade .btn { padding: 5px 12px; font-size: 12px; border-radius: 10px; }
    .depot-hero-stats { padding: 24px 12px 10px; }
    .depot-hero-stats .depot-pips { gap: 3px; margin-bottom: 6px; }
    .depot-hero-stats .depot-pips i { height: 4px; }
    .depot-hero-stats .depot-bar { height: 8px; }
    .depot-hero-stats .depot-used { font-size: 12px; }

    .depot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .depot-item { border-radius: 10px; }
    .depot-item-media { max-height: none; padding: 16px 4px 4px; }
    .depot-item-image img { width: 36px; height: 36px; max-width: 80%; max-height: 80%; }
    .depot-item-image .icon { width: 24px; height: 24px; }
    .depot-qty { top: 3px; right: 3px; max-width: calc(100% - 6px); gap: 2px; padding: 1px 4px; }
    .depot-qty strong { font-size: 8px; }
    .depot-qty small { font-size: 6.5px; }
    .depot-item-body { gap: 3px; padding: 4px 3px 6px; }
    .depot-item-name { font-size: 9.5px; line-height: 1.2; }
    .depot-cat { font-size: 6px; padding: 1px 4px; }
}

/* profile-ticarisk */
.pf-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    color: var(--text-secondary);
    font-size: 12px;
}
.pf-presence { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.online-dot.is-off { background: var(--text-tertiary); box-shadow: none; }
.pf-online-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid var(--glass-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.pf-online-btn:hover { color: var(--text-primary); }
.pf-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.pf-badges { display: flex; gap: 6px; }
.pf-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 0 9px;
    border: 1px solid var(--glass-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
    color: var(--text-tertiary);
    font-size: 12px;
}
.pf-badge img { display: block; width: 18px; height: 13px; border-radius: 2px; object-fit: cover; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.pf-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: auto; }
.pf-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .15s;
}
.pf-btn:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.pf-btn:active { transform: scale(.95); }
.pf-btn.is-no { border-color: color-mix(in srgb, var(--danger) 55%, transparent); background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.pf-btn.is-no:hover { background: color-mix(in srgb, var(--danger) 20%, transparent); }
.pf-btn.is-ok { border-color: color-mix(in srgb, var(--positive) 55%, transparent); background: color-mix(in srgb, var(--positive) 12%, transparent); color: var(--positive); }
.pf-note { margin: 0 0 0 auto; }
.pf-foot {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--glass-line);
    border-radius: 16px;
    background: var(--glass-bg);
    color: var(--text-secondary);
    font-size: 13px;
}
.pf-foot > div {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}
.pf-foot i { color: var(--accent-text); flex: none; }
.pf-foot strong { color: var(--text-primary); font-weight: 700; }

/* oauth-brand */
.oauth-row { gap: 10px; }
.btn-oauth {
    position: relative;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 999px;
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: .1px;
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.btn-oauth .oauth-mark { width: 20px; height: 20px; }
.btn-oauth:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-oauth:active { transform: translateY(0); }
.btn-google {
    background: #ffffff;
    border: 1px solid #747775;
    color: #1f1f1f;
}
.btn-google:hover {
    background: #f8f9fa;
    border-color: #747775;
    box-shadow: 0 1px 2px rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
}
.btn-apple {
    background: #000000;
    border: 1px solid #000000;
    color: #ffffff;
}
.btn-apple .oauth-mark { width: 19px; height: 19px; margin-top: -2px; }
.btn-apple:hover {
    background: #1d1d1f;
    border-color: #1d1d1f;
    box-shadow: 0 2px 8px rgb(0 0 0 / 28%);
}
html[data-theme="dark"] .btn-google {
    background: #131314;
    border-color: #8e918f;
    color: #e3e3e3;
}
html[data-theme="dark"] .btn-google:hover {
    background: #1f1f20;
    border-color: #8e918f;
    box-shadow: 0 1px 3px rgb(0 0 0 / 45%);
}
html[data-theme="dark"] .btn-apple {
    background: #ffffff;
    border-color: #ffffff;
    color: #000000;
}
html[data-theme="dark"] .btn-apple:hover {
    background: #f2f2f2;
    border-color: #f2f2f2;
    box-shadow: 0 2px 8px rgb(0 0 0 / 40%);
}

/* bank v2 */
.bank { display: grid; gap: 14px; }
.bank-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bank-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px;
    color: #fbf3e2;
    border: 1px solid rgba(240, 212, 138, .28);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(240, 212, 138, .32), transparent 55%),
        linear-gradient(135deg, #4a3415 0%, #2a1d0c 55%, #160f06 100%);
    box-shadow: 0 14px 28px -18px rgba(60, 40, 10, .55);
}
.bank-card::before,
.bank-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}
.bank-card::before { width: 220px; height: 220px; right: -70px; bottom: -110px; border: 28px solid rgba(240, 212, 138, .08); }
.bank-card::after { width: 120px; height: 120px; right: 40px; top: -60px; background: rgba(240, 212, 138, .08); }
html[data-theme="dark"] .bank-card {
    border-color: rgba(142, 180, 232, .28);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(142, 180, 232, .30), transparent 55%),
        linear-gradient(135deg, #22355a 0%, #142038 55%, #0a1222 100%);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .8);
}
html[data-theme="dark"] .bank-card::before { border-color: rgba(142, 180, 232, .08); }
html[data-theme="dark"] .bank-card::after { background: rgba(142, 180, 232, .08); }
.bank-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.bank-card-chip {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 28px; height: 28px; border-radius: 9px;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18);
    font-size: 12px;
}
.bank-card-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .78;
    line-height: 1.2;
}
.bank-card-label { display: none; }
.bank-card-value {
    font-size: clamp(20px, 5.5vw, 26px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
}
.bank-card-value .sikke-amt { color: inherit; gap: 6px; }
.bank-card-value .sikke-amt img { width: .85em; height: .85em; }
.bank-card-sub { display: none; }
.bank-card-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 0;
}
.bank-card-half {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.bank-card-half span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 650;
    opacity: .78;
    white-space: nowrap;
}
.bank-card-half span i { margin-right: 0; font-size: 11px; }
.bank-card-half strong {
    font-size: 13px;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bank-card-half .sikke-amt { color: inherit; }
.bank-card-half.is-source { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .32); }

.bank-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bank-stat {
    display: flex; flex-direction: column; gap: 4px; min-width: 0;
    padding: 12px; border-radius: 16px;
    border: 1px solid var(--glass-line); background: var(--glass-bg);
    backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.bank-stat-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 10px; margin-bottom: 2px;
    background: var(--gold-soft); color: var(--accent-text); font-size: 13px;
}
.bank-stat-label { font-size: 12px; font-weight: 650; color: var(--text-secondary); }
.bank-stat-value { font-size: 14px; font-weight: 750; letter-spacing: -.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bank-stat-value.pos .sikke-amt { color: var(--positive); }
.bank-stat-value.neg .sikke-amt { color: var(--negative); }

.bank-transfer {
    display: flex; flex-direction: column; gap: 12px; min-width: 0;
    padding: 16px; border-radius: 22px;
    border: 1px solid var(--glass-line); background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.bank-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; }
.bank-title i { color: var(--accent-text); }
.bank-seg { margin: 0; }
.bank-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.bank-seg button i { font-size: 12px; }
.bank-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.bank-flow-side {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
    padding: 10px 12px; border-radius: 14px;
    border: 1px solid var(--border-color); background: var(--glass-bg-strong);
}
.bank-flow-side[data-flow="from"] { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-color)); }
.bank-flow-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.bank-flow-side strong { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bank-flow-side strong i { color: var(--accent-text); margin-right: 2px; }
.bank-flow-side small { font-size: 12px; color: var(--text-secondary); overflow: hidden; }
.bank-flow-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: 13px;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}
.bank-amount { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.bank-amount-label { font-size: 13px; font-weight: 650; color: var(--text-secondary); }
.bank-amount-box {
    display: flex; align-items: center; gap: 10px;
    min-height: 58px; padding: 0 14px; border-radius: 16px;
    border: 1px solid var(--glass-line); background: var(--glass-bg-strong);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.bank-amount-box:focus-within {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--glass-line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.bank-amount-box.is-over { border-color: var(--negative); box-shadow: 0 0 0 3px color-mix(in srgb, var(--negative) 16%, transparent); }
.bank-amount-box.is-over input { color: var(--negative); }
.bank-amount-box img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.bank-amount-box input {
    flex: 1; min-width: 0; height: 56px; padding: 0;
    border: 0; outline: 0; background: transparent; box-shadow: none;
    color: var(--text-primary); font: inherit; font-size: 24px; font-weight: 750; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.bank-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bank-quick button {
    min-height: 36px; border-radius: 12px;
    border: 1px solid var(--border-color); background: var(--glass-bg-strong);
    color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 700;
    transition: background .15s ease, color .15s ease, transform .1s ease;
}
.bank-quick button:hover { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, var(--glass-bg-strong)); }
.bank-quick button:active { transform: scale(.97); }
.bank-send { width: 100%; min-height: 50px; font-size: 15px; }
.bank-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-tertiary); }
.bank-note i { margin-top: 2px; }

.bank + .bank-ledger { margin-top: 20px; }
.bank-ledger .list { gap: 6px; }
.bank-ledger h3.caption { margin: 10px 2px 2px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); }
.bank-ledger .entry {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border-radius: 16px;
    border: 1px solid var(--glass-line);
    background: var(--glass-bg);
}
.bank-ledger .product-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 12px;
    background: var(--gold-soft); color: var(--accent-text);
}
.bank-ledger .product-ico::before { content: "\f0ec"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 13px; }
.bank-ledger .entry:has(.delta.pos) .product-ico { background: color-mix(in srgb, var(--positive) 14%, transparent); color: var(--positive); }
.bank-ledger .entry:has(.delta.pos) .product-ico::before { content: "\f063"; }
.bank-ledger .entry:has(.delta.neg) .product-ico { background: color-mix(in srgb, var(--negative) 14%, transparent); color: var(--negative); }
.bank-ledger .entry:has(.delta.neg) .product-ico::before { content: "\f062"; }
.bank-ledger .entry strong { font-weight: 700; }
.bank-ledger .entry small { color: var(--text-tertiary); }

.bank { grid-template-columns: 1fr; align-items: start; }
@media (max-width: 380px) {
    .bank-card { padding: 10px 12px; }
    .bank-stats { grid-template-columns: 1fr 1fr; }
    .bank-stats .bank-stat:last-child { grid-column: 1 / -1; }
    .bank-flow { grid-template-columns: 1fr; }
    .bank-flow-arrow { justify-self: center; transform: rotate(90deg); }
}

/* bank v2 ledger compact */
.bank-ledger .entry { padding-top: 10px; padding-bottom: 10px; min-height: 0; }
.bank-ledger .entry > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bank-ledger .entry > span:nth-child(2) strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bank-ledger .entry > span:nth-child(2) small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bank-ledger .price-col { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.bank-ledger .price-col strong { font-size: 15px; }
.bank-ledger .price-col small { font-size: 11px; white-space: nowrap; }

/* tx detail modal */
.modal.tx-modal {
    display: flex; flex-direction: column; gap: 14px;
    background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
    backdrop-filter: blur(28px) saturate(170%); -webkit-backdrop-filter: blur(28px) saturate(170%);
}
.modal-root:has(.tx-modal) .overlay.is-dim { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.tx-head { display: flex; align-items: center; gap: 12px; }
.tx-badge {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 46px; height: 46px; border-radius: 15px; font-size: 18px;
    background: var(--gold-soft); color: var(--accent-text);
}
.tx-badge.is-pos { background: color-mix(in srgb, var(--positive) 16%, transparent); color: var(--positive); }
.tx-badge.is-neg { background: color-mix(in srgb, var(--negative) 16%, transparent); color: var(--negative); }
.tx-head-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tx-head-copy small { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); }
.tx-head-copy strong { font-size: 17px; font-weight: 750; letter-spacing: -.02em; }
.tx-amount {
    margin: 0; padding: 16px; border-radius: 18px; text-align: center;
    font-size: clamp(28px, 8vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
    border: 1px solid var(--glass-line); background: var(--glass-bg-strong);
}
.tx-amount .sikke-amt { gap: 10px; }
.tx-amount .sikke-amt img { width: .85em; height: .85em; }
.tx-amount.pos { color: var(--positive); background: color-mix(in srgb, var(--positive) 8%, var(--glass-bg-strong)); }
.tx-amount.neg { color: var(--negative); background: color-mix(in srgb, var(--negative) 8%, var(--glass-bg-strong)); }
.tx-amount.flat { color: var(--text-primary); }
.tx-accounts { display: grid; gap: 8px; }
.tx-account {
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px; border-radius: 16px;
    border: 1px solid var(--glass-line); background: var(--glass-bg);
}
.tx-account-name { font-size: 13px; font-weight: 700; }
.tx-account-name i { color: var(--accent-text); margin-right: 4px; }
.tx-account-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.tx-account-flow > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; font-weight: 650; }
.tx-account-flow > span:last-child { align-items: flex-end; }
.tx-account-flow small { font-size: 11px; font-weight: 650; color: var(--text-tertiary); }
.tx-account-flow strong { font-size: 15px; font-weight: 800; }
.tx-account-flow > i { color: var(--text-tertiary); font-size: 12px; }
.tx-facts { display: grid; border-radius: 16px; border: 1px solid var(--glass-line); overflow: hidden; }
.tx-fact { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; }
.tx-fact + .tx-fact { border-top: 1px solid var(--glass-line); }
.tx-fact span { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.tx-fact strong { font-size: 14px; font-weight: 700; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.modal.tx-modal .tx-close { margin-top: 0; width: 100%; }
.bank-ledger .entry.is-transfer .product-ico::before { content: "\f362"; }

/* bank-card-compact-v1 */
/* bank card light */
html:not([data-theme="dark"]) .bank-card {
    color: #5c4630;
    border-color: rgba(141, 110, 58, .24);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .7), transparent 55%),
        linear-gradient(135deg, #f4efe6 0%, #eae4d9 55%, #ddd3c2 100%);
    box-shadow: 0 18px 40px -24px rgba(92, 70, 48, .45);
}
html:not([data-theme="dark"]) .bank-card::before { border-color: rgba(141, 110, 58, .07); }
html:not([data-theme="dark"]) .bank-card::after { background: rgba(255, 255, 255, .35); }
html:not([data-theme="dark"]) .bank-card-chip { background: rgba(255, 255, 255, .6); border-color: rgba(141, 110, 58, .22); color: #5c4630; }
html:not([data-theme="dark"]) .bank-card-half { background: rgba(255, 255, 255, .45); border-color: rgba(141, 110, 58, .16); }
html:not([data-theme="dark"]) .bank-card-half.is-source { background: rgba(255, 255, 255, .78); border-color: rgba(141, 110, 58, .34); }
html:not([data-theme="dark"]) .bank-card-kicker,
html:not([data-theme="dark"]) .bank-card-label,
html:not([data-theme="dark"]) .bank-card-sub,
html:not([data-theme="dark"]) .bank-card-half span { opacity: .8; }

/* mine worker */
.mine-offers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mine-offers .btn { min-height: 58px; padding: 8px 6px; }
.forest-job.mine-haul .mine-haul-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.forest-job.mine-haul .mine-haul-item {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 4px;
    border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-primary);
    font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap;
}
.forest-job.mine-haul .mine-haul-item img { width: 22px; height: 22px; max-width: 22px; object-fit: contain; flex: 0 0 22px; }
.forest-job.mine-haul .btn { width: 100%; }

/* profile-pop-v1 */
button.pf-badge { font: inherit; cursor: pointer; transition: background .15s, border-color .15s, transform .12s; }
button.pf-badge:hover, button.pf-badge[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--text-primary);
}
button.pf-badge:active { transform: scale(.96); }
.pf-pop {
    position: fixed;
    z-index: 10800;
    width: max-content;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    padding: 11px 14px 12px;
    border: 1px solid var(--glass-line);
    border-radius: 12px;
    background: var(--glass-bg-strong, var(--glass-bg));
    box-shadow: 0 10px 36px rgba(0, 0, 0, .42);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.35;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px) scale(.98);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.pf-pop.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.pf-pop.is-country { width: 280px; }
.pf-pop-head { display: flex; align-items: baseline; gap: 6px; }
.pf-pop-head span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    white-space: nowrap;
}
.pf-pop-head strong { font-size: 15px; font-weight: 700; word-break: break-word; }
.pf-pop-caret {
    position: absolute;
    top: -6px;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-left: 1px solid var(--glass-line);
    border-top: 1px solid var(--glass-line);
    background: inherit;
    transform: rotate(45deg);
}
.pf-pop.is-above .pf-pop-caret {
    top: auto;
    bottom: -6px;
    border: 0;
    border-right: 1px solid var(--glass-line);
    border-bottom: 1px solid var(--glass-line);
}
.pf-pop-map {
    margin-top: 10px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 8px;
    background: #0d1117;
    overflow: hidden;
    line-height: 0;
}
.pf-pop-map:empty { min-height: 128px; }
.pf-pop-map svg { display: block; width: 100%; height: auto; }
.pf-map-path { fill: #2b3552; stroke: #3b4770; stroke-width: .3; }
.pf-map-path.is-on { fill: #4361ee; stroke: #6382ff; stroke-width: .5; filter: drop-shadow(0 0 4px rgba(99, 130, 255, .55)); }
@media (max-width: 600px) {
    .pf-btn { justify-content: center; min-width: 36px; padding: 0 10px; gap: 0; }
    .pf-btn span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .pf-foot { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
}

/* auth-lang */
.auth-card .brand { align-items: center; text-align: center; }
.auth-top {
    position: relative;
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-top > span:first-child { display: none; }
.auth-top .brand-hero { width: 170px; max-width: 46%; }
.lang-pill {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    border: 1.5px solid var(--glass-line);
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    color: var(--text-primary);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease;
}
.lang-pill:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.lang-pill i { font-size: 10px; color: var(--text-secondary); }
.lang-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; display: block; flex: none; }
.lang-title { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; font-size: 17px; }
.lang-title i { color: var(--accent); }
.lang-list { display: grid; gap: 6px; }
.lang-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
    color: var(--text-primary);
    font-size: 15px;
    text-align: left;
}
.lang-item strong { flex: 1; font-weight: 600; }
.lang-item i { color: var(--accent); }
.lang-item.is-active {
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
@media (max-width: 480px) {
    .auth-top .brand-hero { width: 150px; }
    .lang-pill { padding: 4px 8px; }
    .lang-pill span { display: none; }
}


/* auth-theme */

.theme-toggle {

    position: absolute;

    top: 50%;

    left: 0;

    transform: translateY(-50%);

    width: 34px;

    height: 34px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 999px;

    border: 1.5px solid var(--glass-line);

    background: color-mix(in srgb, var(--text-primary) 6%, transparent);

    color: var(--text-primary);

    font-size: 14px;

    transition: background-color .18s ease, border-color .18s ease, color .18s ease;

}

.theme-toggle:hover {

    border-color: color-mix(in srgb, var(--accent) 45%, transparent);

    background: color-mix(in srgb, var(--accent) 14%, transparent);

    color: var(--accent-text);

}

html[data-theme="dark"] .theme-toggle i { color: #f3c969; }

.sheet-root:has(.lang-list) .overlay {

    background: transparent;

    backdrop-filter: none;

    -webkit-backdrop-filter: none;

}

.sheet-root:has(.lang-list) .sheet { box-shadow: none; }



/* auth-country */

.country-field { display: grid; gap: 6px; }

.country-field > span { font-size: 13px; font-weight: 600; color: var(--text-secondary); }

.country-pill {

    width: 100%;

    flex: none;

    min-height: 44px;

    padding: 0 14px;

    border-radius: 14px;

    text-align: left;

    cursor: pointer;

}

.country-pill .picker-flag i { color: var(--text-tertiary); }



/* auth-float */

.float-field .secret { position: relative; display: block; }

.auth-card .float-field input {

    min-height: 54px;

    padding: 20px 14px 6px;

}

.auth-card .float-field input[type="password"],

.auth-card .float-field .secret:has(.password-toggle) input { padding-right: 46px; }

.float-field .float-label {

    position: absolute;

    left: 15px;

    top: 50%;

    transform: translateY(-50%);

    max-width: calc(100% - 60px);

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: var(--text-tertiary);

    font-size: 15px;

    line-height: 1.2;

    pointer-events: none;

    transition: top .18s ease, transform .18s ease, font-size .18s ease, color .18s ease;

}

.float-field input:focus + .float-label,

.float-field input:not(:placeholder-shown) + .float-label,

.float-field input:-webkit-autofill + .float-label,

.float-field .float-label.is-up {

    top: 8px;

    transform: none;

    font-size: 11.5px;

    font-weight: 600;

    color: var(--text-secondary);

}

.float-field input:focus + .float-label { color: var(--accent); }

.auth-card .country-field { display: flex; gap: 6px; }

.auth-card .country-pill {

    min-height: 54px;

    padding: 20px 14px 6px;

    border-radius: 14px;

    align-items: center;

}

.auth-card .country-pill .fa-chevron-down { align-self: center; margin-top: -14px; }



/* auth-polish */

.auth-options {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin: 0 0 14px;

}

.auth-options .remember { margin: 0; min-width: 0; }

.forgot-link {

    flex: none;

    padding: 4px 2px;

    border: 0;

    background: none;

    color: var(--accent);

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

}

.forgot-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.forgot-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.auth-card .btn[type="submit"] { min-height: 46px; border-radius: 999px; font-size: 15px; }



html[data-theme="dark"] .btn-google,

html[data-theme="dark"] .btn-apple {

    background: rgb(255 255 255 / 6%);

    border: 1px solid rgb(255 255 255 / 14%);

    color: #f2f4f8;

    box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);

    backdrop-filter: blur(14px) saturate(150%);

    -webkit-backdrop-filter: blur(14px) saturate(150%);

}

html[data-theme="dark"] .btn-apple { background: rgb(0 0 0 / 38%); }

html[data-theme="dark"] .btn-google:hover,

html[data-theme="dark"] .btn-apple:hover {

    background: rgb(255 255 255 / 11%);

    border-color: rgb(255 255 255 / 24%);

    box-shadow: 0 6px 18px rgb(0 0 0 / 28%), inset 0 1px 0 rgb(255 255 255 / 8%);

}

html[data-theme="dark"] .btn-apple .oauth-mark { fill: #ffffff; color: #ffffff; }



@media (max-width: 480px) {

    .auth-card { padding: 16px 12px 12px; border-radius: 22px; }

    .auth-card .brand { margin-bottom: 12px; gap: 6px; }

    .auth-card .segments button { min-height: 34px; font-size: 13px; }

    .oauth-row { gap: 8px; }

    .btn-oauth { min-height: 40px; padding: 8px 12px; font-size: 13.5px; gap: 8px; }

    .btn-oauth .oauth-mark { width: 18px; height: 18px; }

    .btn-apple .oauth-mark { width: 17px; height: 17px; }

    .oauth-divider { margin: 10px 0; font-size: 12px; }

    .auth-card .field { margin-bottom: 10px; }

    .auth-card .float-field input,

    .auth-card .country-pill { min-height: 48px; padding-top: 18px; padding-bottom: 4px; font-size: 15px; }

    .float-field .float-label { font-size: 14px; }

    .float-field input:focus + .float-label,

    .float-field input:not(:placeholder-shown) + .float-label,

    .float-field input:-webkit-autofill + .float-label,

    .float-field .float-label.is-up { top: 6px; font-size: 11px; }

    .auth-options { margin-bottom: 12px; }

    .auth-options .remember, .forgot-link { font-size: 12.5px; }

    .auth-card .btn[type="submit"] { min-height: 42px; font-size: 14px; }

}



/* auth-oauth-light */

html[data-theme="light"] .btn-google,

html[data-theme="light"] .btn-apple {

    background: rgb(255 255 255 / 88%);

    border: 1px solid rgb(15 23 42 / 12%);

    color: #1f2430;

    box-shadow: 0 1px 2px rgb(15 23 42 / 6%), inset 0 1px 0 rgb(255 255 255 / 90%);

    backdrop-filter: blur(14px) saturate(150%);

    -webkit-backdrop-filter: blur(14px) saturate(150%);

}

html[data-theme="light"] .btn-google:hover,

html[data-theme="light"] .btn-apple:hover {

    background: #ffffff;

    border-color: rgb(15 23 42 / 20%);

    box-shadow: 0 6px 16px rgb(15 23 42 / 10%), inset 0 1px 0 #ffffff;

}

html[data-theme="light"] .btn-apple .oauth-mark { color: #000000; }



/* auth-reset */

.reset-head { display: grid; gap: 4px; margin: 0 0 14px; text-align: center; }

.reset-head strong { font-size: 17px; color: var(--text-primary); }

.reset-head p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }

.reset-note {

    display: grid;

    justify-items: center;

    gap: 8px;

    margin: 0 0 14px;

    padding: 18px 16px;

    border: 1px solid var(--glass-line);

    border-radius: 18px;

    background: color-mix(in srgb, var(--positive) 8%, transparent);

    text-align: center;

}

.reset-note-icon {

    display: inline-grid;

    place-items: center;

    width: 46px;

    height: 46px;

    border-radius: 50%;

    background: color-mix(in srgb, var(--positive) 18%, transparent);

    color: var(--positive);

    font-size: 20px;

}

.reset-note strong { font-size: 16px; color: var(--text-primary); }

.reset-note p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-secondary); overflow-wrap: anywhere; }


/* coop-modern */
.cp-hero {
    position: relative;
    margin: 0 0 12px;
    overflow: hidden;
    border: 1px solid var(--glass-line);
    border-radius: 18px;
    background: #1b140c;
}
.cp-hero > img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    object-position: center 55%;
}
.cp-hero-body {
    position: absolute;
    inset: auto 0 0 0;
    padding: 34px 14px 12px;
    background: linear-gradient(180deg, rgba(12, 8, 4, 0) 0%, rgba(12, 8, 4, .72) 45%, rgba(12, 8, 4, .9) 100%);
    color: #fff;
}
.cp-hero-body h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-size: 20px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.cp-hero-body h2 i { color: #f3d48a; }
.cp-hero-body p { margin: 0; color: rgba(255, 255, 255, .82); font-size: 12px; line-height: 1.4; }
.cp-cool {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid rgba(243, 212, 138, .4);
    border-radius: 999px;
    background: rgba(12, 8, 4, .65);
    color: #f3d48a;
    font-size: 12px;
    font-weight: 700;
}

.coop-tabs {
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--glass-line);
    border-radius: 14px;
    background: var(--glass-bg);
    scrollbar-width: none;
}
.coop-tabs::-webkit-scrollbar { display: none; }
.coop-tabs button {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
}
.coop-tabs button.is-on {
    background: color-mix(in srgb, var(--accent) 22%, var(--glass-bg));
    color: var(--accent-text);
    box-shadow: 0 2px 8px color-mix(in srgb, #000 12%, transparent);
}
.coop-tabs button i { font-size: 12px; }
.coop-tabs button b {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

.coop-seats {
    padding: 10px 12px;
    border: 1px solid var(--glass-line);
    border-radius: 14px;
    background: var(--glass-bg);
}
.coop-seats span { display: inline-flex; align-items: center; gap: 6px; }
.coop-seats span i { color: var(--accent-text); }
.coop-size { width: 38px; height: 34px; }
.coop-size.is-on { box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 25%, transparent); }

.coop-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    backdrop-filter: blur(4px);
}
.cp-live {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--positive) 85%, #000);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
.cp-live i { font-size: 6px; animation: cp-pulse 1.4s ease-in-out infinite; }
@keyframes cp-pulse { 50% { opacity: .3; } }

.cp-bar {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 10%, transparent);
}
.cp-bar > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, #000 10%), var(--accent));
    transition: width .4s ease;
}
.cp-bar.is-run > span { background: linear-gradient(90deg, color-mix(in srgb, var(--positive) 70%, #000 10%), var(--positive)); }

.cp-people { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cp-seats { display: flex; gap: 4px; }
.cp-seat {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px dashed color-mix(in srgb, var(--text-primary) 25%, transparent);
    border-radius: 50%;
    color: var(--text-tertiary);
    font-size: 10px;
    font-weight: 800;
}
.cp-seat.is-taken {
    border: 0;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 85%, #fff 15%), color-mix(in srgb, var(--accent) 70%, #000 30%));
    color: #1c140c;
}
.cp-people small {
    overflow: hidden;
    color: var(--text-tertiary);
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px;
    border: 1px dashed var(--glass-line);
    border-radius: 18px;
    background: var(--glass-bg);
    text-align: center;
}
.cp-empty > span {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent-text);
    font-size: 22px;
}
.cp-empty p { margin: 0; color: var(--text-secondary); font-size: 14px; font-weight: 650; }

.coop-leaders li { grid-template-columns: 34px minmax(0, 1fr) auto; padding: 10px 12px; border-radius: 16px; }
.coop-leaders span { font-size: 16px; text-align: center; }
.coop-leaders li.is-top { border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-line)); background: color-mix(in srgb, var(--accent) 8%, var(--glass-bg)); }
.coop-leaders li.is-top span { font-size: 20px; }

@media (max-width: 420px) {
    .coop-tabs button { flex: 1 1 auto; gap: 4px; padding: 0 6px; font-size: 12px; }
    .coop-tabs button i { display: none; }
}


/* register-code-v1 */

.auth-card .email-code-field input { padding-right: 132px; }

.auth-card .code-send {

    position: absolute;

    right: 7px;

    top: 50%;

    transform: translateY(-50%);

    min-width: 108px;

    height: 38px;

    padding: 0 12px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    border: 0;

    border-radius: 10px;

    background: var(--accent);

    color: var(--accent-contrast, #fff);

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;

    cursor: pointer;

    transition: opacity .15s ease, transform .15s ease;

}

.auth-card .code-send:hover:not(:disabled) { opacity: .9; }

.auth-card .code-send:disabled { cursor: default; }

.auth-card .code-send.is-wait {

    background: var(--surface-2, rgba(127, 127, 127, .14));

    color: var(--text-secondary);

    font-variant-numeric: tabular-nums;

}

.auth-card .code-send.is-wait span { font-weight: 800; color: var(--text-primary); margin-right: 1px; }

.auth-card .code-send.is-busy { opacity: .6; }

.auth-card .code-field input {

    padding-right: 46px;

    letter-spacing: 6px;

    font-weight: 700;

    font-variant-numeric: tabular-nums;

}

.auth-card .code-mark {

    position: absolute;

    right: 12px;

    top: 50%;

    transform: translateY(-50%);

    width: 26px;

    height: 26px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    font-size: 13px;

    pointer-events: none;

}

.auth-card .code-mark:empty { display: none; }

.auth-card .code-mark.is-ok { background: rgba(46, 160, 67, .15); color: var(--success, #2ea043); }

.auth-card .code-mark.is-bad { background: rgba(218, 54, 51, .14); color: var(--danger, #da3633); }

.auth-card .code-note {

    display: flex;

    align-items: flex-start;

    gap: 7px;

    margin: 2px 2px 0;

    font-size: 12.5px;

    line-height: 1.45;

    color: var(--text-secondary);

    overflow-wrap: anywhere;

}

.auth-card .code-note i { margin-top: 2px; color: var(--accent); }

@media (max-width: 600px) {

    .auth-card .email-code-field input { padding-right: 112px; }

    .auth-card .code-send { min-width: 92px; height: 36px; padding: 0 9px; font-size: 12px; }

}

/* smith-queue below banner */
.smith-queue-head {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin: 0 0 2px;
}
.smith-queue .smith-rush {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 6px 0 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #fff 28%, transparent);
    background: color-mix(in srgb, var(--glass-bg-strong) 55%, transparent);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: -0.02em;
    box-shadow: 0 8px 18px rgba(12, 16, 10, 0.18), inset 0 1px 0 rgba(255, 255, 255, .22);
    backdrop-filter: blur(16px) saturate(165%);
    -webkit-backdrop-filter: blur(16px) saturate(165%);
    cursor: pointer;
    white-space: nowrap;
}
.smith-queue .smith-rush i { font-size: 11px; color: #e8a33a; }
.smith-queue .smith-rush-cost {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px 2px 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, #fff 18%, transparent);
}
.smith-queue .smith-rush-cost img { width: 14px; height: 14px; object-fit: contain; }
.smith-queue .smith-rush-cost b { font-size: 12px; font-weight: 750; }
.smith-queue .smith-rush:disabled { opacity: .6; cursor: default; }

.smith-queue {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
}
.smith-queue .smith-collect {
    align-self: stretch;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 42px;
    padding: 0 14px;
    margin-top: 2px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, #e0b43a 55%, var(--border-color));
    background: color-mix(in srgb, #e0b43a 22%, var(--glass-bg-strong));
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 750;
    letter-spacing: -0.02em;
    box-shadow: none;
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    cursor: pointer;
}
html[data-theme="dark"] .smith-queue .smith-collect {
    border-color: color-mix(in srgb, #ffd56a 36%, transparent);
    background: color-mix(in srgb, #e0b43a 18%, rgba(20, 24, 36, .55));
    color: #fff4d6;
}
html[data-theme="light"] .smith-queue .smith-collect {
    border-color: color-mix(in srgb, #c99620 40%, var(--border-color));
    background: color-mix(in srgb, #e0b43a 16%, var(--bg-elevated));
}
.smith-queue .smith-collect:active { transform: scale(0.98); }
.smith-queue .smith-collect:disabled { opacity: .6; cursor: default; }

@media (max-width: 959px) {
    .smith-queue {
        gap: 8px;
        padding: 10px;
        margin-top: 10px;
    }
    .smith-queue-head { margin-bottom: 0; }
    .smith-queue .smith-rush {
        min-height: 32px;
        padding: 0 5px 0 10px;
        gap: 5px;
        font-size: 11px;
    }
    .smith-queue .smith-rush-label { display: inline; }
    .smith-queue .smith-rush i { font-size: 10px; }
    .smith-queue .smith-rush-cost { padding: 1px 6px 1px 3px; }
    .smith-queue .smith-rush-cost img { width: 13px; height: 13px; }
    .smith-queue .smith-rush-cost b { font-size: 11px; }
    .smith-queue .smith-collect {
        min-height: 38px;
        font-size: 13px;
        border-radius: 12px;
    }
}
.smith-job {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
}
html[data-theme="dark"] .smith-job {
    border-color: color-mix(in srgb, #e8f2ff 22%, transparent);
    background: color-mix(in srgb, #e8f2ff 10%, transparent);
}
.smith-job-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex: none;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-secondary));
    padding: 6px;
}
.smith-job-copy {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.smith-job-copy strong {
    font-size: 13px;
    font-weight: 750;
    line-height: 1.25;
}
.smith-job-copy small {
    font-size: 12px;
    font-weight: 650;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.smith-job .smith-progress { width: 100%; }
.smith-job.is-ready {
    border-color: color-mix(in srgb, var(--positive) 40%, var(--border-color));
}
.smith-center .smith-status { display: none; }

/* forge-chooser */
.smith-modal-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.smith-modal-title h2 { margin: 0; }
.smith-modal-back {
    width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-color); background: var(--glass-bg);
    color: var(--text-primary); cursor: pointer; padding: 0;
}
.smith-modal-back svg { width: 15px; height: 15px; }
.smith-modal-back:hover { background: var(--glass-bg-strong); }
.forge-choose-hint { margin: 2px 2px 12px; color: var(--text-secondary); font-size: 13px; }
.forge-picks { display: grid; gap: 10px; }
.forge-pick {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    padding: 12px 14px; border-radius: 16px; cursor: pointer;
    border: 1px solid var(--border-color); background: var(--glass-bg);
    color: var(--text-primary); transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.forge-pick:hover { border-color: var(--accent); background: var(--glass-bg-strong); transform: translateY(-1px); }
.forge-pick:active { transform: scale(.99); }
.forge-pick-img {
    width: 54px; height: 54px; flex: 0 0 54px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-elevated); border: 1px solid var(--glass-line);
}
.forge-pick-img img { width: 40px; height: 40px; object-fit: contain; }
.forge-pick-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.forge-pick-copy strong { font-size: 15px; }
.forge-pick-copy small { color: var(--text-secondary); font-size: 12px; line-height: 1.35; }
.forge-pick-count {
    font-size: 11px; font-weight: 600; white-space: nowrap; padding: 4px 8px; border-radius: 999px;
    background: var(--glass-bg-strong); color: var(--text-secondary);
}
.forge-pick-chev { color: var(--text-tertiary); font-size: 13px; }
.forge-yield {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    vertical-align: middle;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.3;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent-text);
}
html[data-theme="dark"] .forge-yield {
    border-color: color-mix(in srgb, #e8f2ff 22%, transparent);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
}

/* home-hunt */
.home-hunt {
    position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
    min-height: 104px; padding: 16px 18px; margin: 0 0 18px; overflow: hidden; text-align: left;
    border-radius: 20px; border: 1px solid var(--glass-line); cursor: pointer; color: #fff;
    background: #1d2a1d; box-shadow: 0 10px 26px rgba(0,0,0,.18);
    transition: transform .18s ease, box-shadow .18s ease;
}
.home-hunt:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.24); }
.home-hunt-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }
.home-hunt-shade { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(36,22,8,.86) 0%, rgba(58,34,12,.58) 48%, rgba(20,28,14,.25) 100%); }
.home-hunt-copy { position: relative; display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.home-hunt-copy strong { font-size: 18px; letter-spacing: .2px; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.home-hunt-copy small { font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.85); max-width: 280px; }
.home-hunt-gear { position: relative; display: flex; align-items: center; }
.home-hunt-gear img {
    width: 46px; height: 46px; margin-left: -10px; padding: 6px; border-radius: 14px;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.home-hunt-gear img:nth-child(2) { transform: translateY(-6px); }
.home-hunt-chev { position: relative; color: rgba(255,255,255,.8); }
@media (max-width: 480px) {
    .home-hunt { min-height: 92px; padding: 14px; }
    .home-hunt-gear img { width: 36px; height: 36px; padding: 5px; }
    .home-hunt-copy strong { font-size: 16px; }
}

/* hunt */
.hunt-scene .forest-banner { filter: saturate(1.05) brightness(.95); }
.hunt-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(60,30,6,.18), rgba(30,16,4,.5)); pointer-events: none; }
.hunt-vital { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 13px; }
.hunt-vital img { width: 18px; height: 18px; object-fit: contain; }
.forest-overlay-tr { display: flex; gap: 6px; align-items: center; }
.forest-overlay-tr .forest-badge {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
}

.hunt-center { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hunt-prompt {
    margin: 0; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; text-align: center;
    color: #fff; background: rgba(20,12,4,.45); border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); max-width: 92%;
}
.hunt-collect { display: inline-flex; align-items: center; gap: 8px; animation: hunt-pulse 1.6s ease-in-out infinite; }
@keyframes hunt-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,190,90,.55); } 50% { box-shadow: 0 0 0 10px rgba(255,190,90,0); } }
.hunt-panel { margin-top: 14px; }
.hunt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.hunt-head h3 { margin: 0; font-size: 16px; }
.hunt-link {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
    font-size: 12px; font-weight: 600; color: var(--text-primary);
    background: var(--glass-bg); border: 1px solid var(--border-color);
}
.hunt-link svg { width: 14px; height: 14px; }
.hunt-link i { font-size: 10px; }
.hunt-note { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); }
.hunt-note img { width: 15px; height: 15px; }
.hunt-weapons { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.hunt-weapon {
    display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px;
    background: var(--glass-bg); border: 1px solid var(--border-color);
}
.hunt-weapon.is-locked .hunt-weapon-img img { filter: grayscale(.85); opacity: .6; }
.hunt-weapon-top { display: flex; align-items: center; gap: 12px; }
.hunt-weapon-img {
    position: relative; width: 60px; height: 60px; flex: 0 0 60px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-elevated); border: 1px solid var(--glass-line);
}
.hunt-weapon-img img { width: 46px; height: 46px; object-fit: contain; }
.hunt-weapon-img em {
    position: absolute; right: -6px; bottom: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 700;
    background: var(--accent); color: var(--accent-text); border: 2px solid var(--bg-elevated);
}
.hunt-weapon.is-locked .hunt-weapon-img em { background: var(--text-tertiary); }
.hunt-weapon-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hunt-weapon-copy strong { font-size: 15px; }
.hunt-weapon-copy small { font-size: 12px; line-height: 1.35; color: var(--text-secondary); }
.hunt-costs { display: flex; flex-wrap: wrap; gap: 6px; }
.hunt-cost {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px;
    font-size: 12px; font-weight: 600; background: var(--glass-bg-strong); border: 1px solid var(--glass-line);
}
.hunt-cost img { width: 15px; height: 15px; object-fit: contain; }
.hunt-cost i { font-size: 11px; color: var(--text-secondary); }
.hunt-cost small { color: var(--text-tertiary); font-weight: 500; }
.hunt-cost.is-short { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.hunt-cost.is-free { color: var(--positive); }
.hunt-game { display: flex; flex-wrap: wrap; gap: 6px; }
.hunt-animal {
    display: inline-flex; flex-direction: column; align-items: center; min-width: 42px; padding: 5px 6px 4px; border-radius: 12px;
    background: var(--bg-elevated); border: 1px solid var(--glass-line);
}
.hunt-animal-emoji { font-size: 20px; line-height: 1.1; }
.hunt-animal small { font-size: 10px; font-weight: 600; color: var(--text-secondary); }
.hunt-animal.is-danger { border-color: color-mix(in srgb, var(--danger) 55%, transparent); background: color-mix(in srgb, var(--danger) 9%, var(--bg-elevated)); }
.hunt-animal.is-miss { opacity: .75; }
.hunt-break { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-tertiary); }
.hunt-go { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.hunt-go svg { width: 16px; height: 16px; }
.hunt-reason { margin: -4px 0 0; font-size: 11.5px; text-align: center; color: var(--danger); }
.hunt-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 10px; text-align: center; color: var(--text-secondary); }
.hunt-empty span { font-size: 30px; }
.hunt-empty p { margin: 0; font-size: 13px; }
.hunt-catches { display: grid; gap: 8px; }
.hunt-catch {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px;
    background: var(--glass-bg); border: 1px solid var(--border-color);
}
.hunt-catch-emoji {
    width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px; font-size: 26px;
    display: flex; align-items: center; justify-content: center; background: var(--bg-elevated);
}
.hunt-catch-copy { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.hunt-catch-copy strong { font-size: 14px; }
.hunt-catch-copy em { font-style: normal; color: var(--accent); }
.hunt-yields { display: flex; flex-wrap: wrap; gap: 8px; }
.hunt-yield { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--text-secondary); }
.hunt-yield img { width: 16px; height: 16px; }
.hunt-catch-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.hunt-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hunt-product {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 16px;
    background: var(--glass-bg); border: 1px solid var(--border-color); text-align: center;
}
.hunt-product img { width: 42px; height: 42px; object-fit: contain; }
.hunt-product strong { font-size: 17px; }
.hunt-product small { font-size: 11.5px; color: var(--text-secondary); }
.hunt-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hunt-log li {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px;
    background: var(--glass-bg); border: 1px solid var(--glass-line); font-size: 13px;
}
.hunt-log-emoji { font-size: 20px; width: 26px; text-align: center; }
.hunt-log-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hunt-log time { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }
.hunt-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.hunt-tag { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.hunt-tag img { width: 12px; height: 12px; }
.hunt-tag.is-good { color: var(--positive); background: color-mix(in srgb, var(--positive) 14%, transparent); }
.hunt-tag.is-bad { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.hunt-result { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 6px 4px 2px; }
.hunt-result-emoji {
    width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 54px; background: var(--glass-bg-strong); border: 1px solid var(--glass-line);
}
.hunt-result-emoji span { animation: hunt-pop .5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes hunt-pop { from { transform: scale(.3) rotate(-15deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.hunt-result.is-caught .hunt-result-emoji { background: color-mix(in srgb, var(--positive) 16%, var(--bg-elevated)); border-color: color-mix(in srgb, var(--positive) 45%, transparent); }
.hunt-result.is-escaped .hunt-result-emoji { background: color-mix(in srgb, #e0a040 16%, var(--bg-elevated)); }
.hunt-result h2 { margin: 6px 0 0; font-size: 20px; }
.hunt-result p { margin: 0; color: var(--text-secondary); font-size: 13.5px; max-width: 320px; }
.hunt-result-lines { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; width: 100%; }
.hunt-result-lines li {
    display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; border-radius: 12px;
    font-size: 13px; font-weight: 600; background: var(--glass-bg); border: 1px solid var(--glass-line);
}
.hunt-result-lines img { width: 16px; height: 16px; }
.hunt-result-lines .is-good { color: var(--positive); }
.hunt-result-lines .is-bad { color: var(--danger); }
.hunt-result-actions { display: flex; gap: 8px; width: 100%; margin-top: 8px; }
.hunt-result-actions .btn { flex: 1; }
@media (max-width: 480px) {
    .hunt-weapons { grid-template-columns: 1fr; }
    .hunt-catch { flex-wrap: wrap; }
    .hunt-catch-actions { width: 100%; }
    .hunt-catch-actions .btn { flex: 1; }
    .hunt-vital { font-size: 12px; }
}


/* register-code-v2 */

.auth-card .email-code-field input { padding-right: 140px; }

.auth-card .code-send {

    right: 8px;

    min-width: 118px;

    height: 38px;

    padding: 0 14px;

    gap: 7px;

    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border-color));

    border-radius: 999px;

    background: color-mix(in srgb, var(--accent) 18%, var(--glass-bg));

    color: var(--accent-text);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .1px;

    box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);

    backdrop-filter: blur(14px) saturate(160%);

    -webkit-backdrop-filter: blur(14px) saturate(160%);

    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;

}

.auth-card .code-send i { font-size: 12px; color: var(--accent); }

.auth-card .code-send:hover:not(:disabled) {

    opacity: 1;

    background: color-mix(in srgb, var(--accent) 28%, var(--glass-bg));

    border-color: color-mix(in srgb, var(--accent) 70%, var(--border-color));

}

.auth-card .code-send:active:not(:disabled) { transform: translateY(-50%) scale(.97); }

.auth-card .code-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.auth-card .code-send.is-wait {

    border-color: var(--border-color);

    background: color-mix(in srgb, var(--text-primary) 6%, var(--glass-bg));

    color: var(--text-secondary);

    box-shadow: none;

    gap: 5px;

}

.auth-card .code-send.is-wait i { color: var(--text-tertiary); }

.auth-card .code-send.is-wait b { font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; min-width: 2.2ch; text-align: right; }

.auth-card .code-send.is-wait small { font-size: 11.5px; font-weight: 600; color: var(--text-tertiary); }

.auth-card .code-send.is-busy { opacity: 1; }

.auth-card .code-send.is-busy i { font-size: 15px; }

@media (max-width: 600px) {

    .auth-card .email-code-field input { padding-right: 120px; }

    .auth-card .code-send { min-width: 100px; height: 36px; padding: 0 11px; font-size: 12px; gap: 6px; }

}

/* hunt-products-more */
.hunt-products { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.hunt-product img { width: 38px; height: 38px; }
@media (max-width: 480px) {
    .hunt-products { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .hunt-product { padding: 10px 6px; }
}

/* hunt-pop */
button.hunt-animal { font: inherit; color: inherit; cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
button.hunt-animal:hover { transform: translateY(-1px); }
button.hunt-animal.is-open { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.hunt-pop {
    position: fixed; z-index: 1300; display: flex; align-items: center; gap: 10px;
    max-width: 240px; padding: 10px 14px 10px 10px; border-radius: 16px; pointer-events: auto;
    color: #2a1d10; background: rgba(255, 255, 255, .58);
    border: 1px solid rgba(255, 255, 255, .75);
    box-shadow: 0 12px 32px rgba(40, 24, 8, .18), inset 0 1px 0 rgba(255, 255, 255, .8);
    backdrop-filter: blur(18px) saturate(1.7); -webkit-backdrop-filter: blur(18px) saturate(1.7);
    animation: hunt-pop-in .16s ease-out both; transform-origin: var(--arrow, 50%) 100%;
}
.hunt-pop.is-below { transform-origin: var(--arrow, 50%) 0; }
.hunt-pop::after {
    content: ''; position: absolute; left: var(--arrow, 50%); bottom: -6px; width: 12px; height: 12px;
    transform: translateX(-50%) rotate(45deg); background: inherit;
    border-right: 1px solid rgba(255, 255, 255, .75); border-bottom: 1px solid rgba(255, 255, 255, .75);
    backdrop-filter: inherit; -webkit-backdrop-filter: inherit;
}
.hunt-pop.is-below::after { bottom: auto; top: -6px; border: 0; border-left: 1px solid rgba(255, 255, 255, .75); border-top: 1px solid rgba(255, 255, 255, .75); }
.hunt-pop-emoji {
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; font-size: 22px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .7);
}
.hunt-pop-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hunt-pop-copy strong { font-size: 14px; line-height: 1.2; }
.hunt-pop-copy small { font-size: 11.5px; opacity: .75; }
.hunt-pop-danger { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 11px; font-weight: 700; color: #c0392b; }
html[data-theme="dark"] .hunt-pop {
    color: #f5ede2; background: rgba(28, 22, 16, .52);
    border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
}
html[data-theme="dark"] .hunt-pop::after { border-color: rgba(255, 255, 255, .14); }
html[data-theme="dark"] .hunt-pop-emoji { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .hunt-pop-danger { color: #ff8a7a; }
@keyframes hunt-pop-in { from { opacity: 0; transform: translateY(4px) scale(.94); } to { opacity: 1; transform: none; } }

/* hunt-art */
.hunt-art { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18)); }
.hunt-animal-emoji { display: flex; align-items: center; justify-content: center; }
.hunt-animal .hunt-animal-emoji { width: 34px; height: 30px; }
.hunt-animal { min-width: 50px; }
.hunt-catch-emoji { padding: 4px; }
.hunt-catch-emoji .hunt-art { width: 40px; height: 40px; }
.hunt-log-emoji { display: flex; align-items: center; justify-content: center; height: 28px; }
.hunt-log-emoji .hunt-art { width: 30px; height: 28px; }
.hunt-pop-emoji { padding: 3px; }
.hunt-pop-emoji .hunt-art { width: 34px; height: 34px; }
.hunt-result-emoji { overflow: hidden; }
.hunt-result-emoji span { display: flex; align-items: center; justify-content: center; }
.hunt-result-emoji .hunt-art { width: 76px; height: 76px; }
.hunt-weapon-img img, .forge-pick-img img, .home-hunt-gear img { object-fit: contain; }

/* hunt-art-2 */
.hunt-weapon-img { background: radial-gradient(circle at 50% 45%, rgba(255, 214, 160, .35), rgba(255, 214, 160, 0) 70%), var(--bg-elevated); }
.hunt-weapon-img img { width: 56px; height: 56px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
html[data-theme="dark"] .hunt-weapon-img { background: radial-gradient(circle at 50% 45%, rgba(255, 214, 160, .28), rgba(255, 214, 160, .04) 72%), var(--bg-elevated); }
.hunt-game { gap: 5px; }
.hunt-animal { min-width: 44px; padding: 4px 4px 3px; }
.hunt-animal .hunt-animal-emoji { width: 32px; height: 28px; }


/* notifications-modern-v1 */

.inbox-head { align-items: center; border-bottom: 0; margin-bottom: 16px; }

.inbox-tabs {

    gap: 4px;

    padding: 4px;

    border: 1px solid var(--border-color);

    border-radius: 999px;

    background: var(--glass-bg);

    backdrop-filter: blur(14px) saturate(150%);

    -webkit-backdrop-filter: blur(14px) saturate(150%);

}

.inbox-tab {

    min-height: 36px;

    padding: 0 14px;

    border-radius: 999px;

    color: var(--text-secondary);

    transition: background .18s ease, color .18s ease;

}

.inbox-tab:hover { color: var(--text-primary); }

.inbox-tab.is-active {

    background: color-mix(in srgb, var(--accent) 20%, var(--glass-bg));

    color: var(--accent-text);

    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);

}

.inbox-tab.is-active::after { display: none; }

.inbox-tools { padding-bottom: 0; }

.inbox-tools .inbox-pill { min-height: 38px; }



.nt-list { gap: 8px; }

.nt-group {

    display: flex;

    align-items: center;

    gap: 8px;

    margin: 10px 4px 2px;

    font-size: 12px;

    font-weight: 750;

    letter-spacing: .6px;

    text-transform: uppercase;

    color: var(--text-tertiary);

}

.nt-group:first-child { margin-top: 0; }

.nt-group small {

    min-width: 20px;

    height: 18px;

    padding: 0 6px;

    border-radius: 999px;

    background: color-mix(in srgb, var(--text-primary) 8%, transparent);

    font-size: 11px;

    line-height: 18px;

    text-align: center;

    letter-spacing: 0;

}

.nt-group::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }



.inbox-note.nt-blue { --nt: #4f8cff; }

.inbox-note.nt-gold { --nt: #d9a441; }

.inbox-note.nt-teal { --nt: #26b5a2; }

.inbox-note.nt-red { --nt: #e5534b; }

.inbox-note.nt-violet { --nt: #9b6dff; }

.inbox-note.nt-green { --nt: #3fb950; }

.inbox-note.nt-orange { --nt: #f0883e; }

.inbox-note.nt-accent { --nt: var(--accent); }

.inbox-card.inbox-note {

    position: relative;

    display: grid;

    grid-template-columns: 42px minmax(0, 1fr) auto;

    align-items: start;

    gap: 12px;

    padding: 13px 10px 13px 13px;

    border: 1px solid var(--border-color);

    border-radius: 18px;

    background: var(--glass-bg);

    cursor: default;

    transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;

}

.inbox-card.inbox-note.is-unread {

    cursor: pointer;

    border-color: color-mix(in srgb, var(--nt) 35%, var(--border-color));

    background: color-mix(in srgb, var(--nt) 7%, var(--glass-bg));

}

@media (hover: hover) {

    .inbox-card.inbox-note:hover {

        transform: translateY(-1px);

        border-color: color-mix(in srgb, var(--nt) 45%, var(--border-color));

        box-shadow: 0 8px 22px rgb(0 0 0 / 12%);

    }

}

.nt-icon {

    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    background: color-mix(in srgb, var(--nt) 16%, transparent);

    border: 1px solid color-mix(in srgb, var(--nt) 30%, transparent);

    color: var(--nt);

    font-size: 17px;

}

.nt-copy { min-width: 0; padding-top: 1px; }

.nt-top { display: flex; align-items: baseline; gap: 10px; }

.inbox-note .nt-top strong {

    flex: 1;

    min-width: 0;

    font-size: 14.5px;

    font-weight: 750;

    line-height: 1.3;

    color: var(--text-primary);

}

.inbox-note .nt-top time {

    flex: none;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin: 0;

    font-size: 11.5px;

    font-weight: 600;

    color: var(--text-tertiary);

    white-space: nowrap;

}

.inbox-note.is-unread .nt-top time { color: var(--text-secondary); }

.inbox-note.is-unread .nt-top time::before {

    content: "";

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--nt);

    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nt) 22%, transparent);

}

.inbox-note .nt-copy p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere; }

.inbox-note .note-actions { margin-top: 10px; }

.nt-del {

    width: 28px;

    height: 28px;

    min-height: 28px;

    margin: -3px 0 0;

    padding: 0;

    display: grid;

    place-items: center;

    border: 0;

    border-radius: 50%;

    background: transparent;

    color: var(--text-tertiary);

    font-size: 14px;

    cursor: pointer;

    transition: background .15s ease, color .15s ease, opacity .15s ease;

}

.nt-del:hover, .nt-del:focus-visible { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }

@media (hover: hover) {

    .inbox-note .nt-del { opacity: .55; }

    .inbox-note:hover .nt-del, .inbox-note .nt-del:focus-visible { opacity: 1; }

}

@media (max-width: 600px) {

    .inbox-tabs { padding: 3px; gap: 2px; }

    .inbox-tab { min-height: 34px; padding: 0 10px; font-size: 12.5px; gap: 5px; }

    .inbox-card.inbox-note { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; padding: 12px 8px 12px 11px; border-radius: 16px; }

    .nt-icon { width: 38px; height: 38px; border-radius: 12px; font-size: 15px; }

    .inbox-note .nt-top strong { font-size: 14px; }

}


/* inbox-modern */
.dm-page { gap: 10px; }
.dm-bar { display: flex; align-items: center; gap: 8px; width: 100%; }
.dm-bar .dm-search { flex: 1; min-width: 0; }
.dm-bar .dm-new {
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 14px;
    font-size: 16px;
}
.dm-bar .dm-new > .fas { width: auto; height: auto; background: none; color: inherit; }
.dm-filter { display: flex; align-items: center; gap: 8px; width: 100%; }
.dm-filter .dm-tabs { flex: 1; min-width: 0; margin: 0; }
.dm-filter .dm-tools { flex: none; width: auto; flex-wrap: nowrap; gap: 6px; }
.dm-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--glass-line);
    border-radius: 14px;
    background: var(--glass-bg);
    color: var(--text-secondary);
    font-size: 15px;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.dm-icon:hover { color: var(--text-primary); }
.dm-icon.is-ok { color: var(--positive); }
.dm-page.is-select .dm-filter { flex-direction: column; align-items: stretch; }
.dm-page.is-select .dm-tabs { display: none; }
.dm-page.is-select .dm-filter .dm-tools { flex-wrap: wrap; width: 100%; }

.dm-list { gap: 6px; }
.dm-card {
    position: relative;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 16px;
    transition: transform .15s, background .2s, border-color .2s;
}
.dm-card:active { transform: scale(.99); }
.dm-card.is-unread {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-line));
    background: color-mix(in srgb, var(--accent) 9%, var(--glass-bg));
}
.dm-card.is-unread::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
}
.dm-face { position: relative; flex: none; display: block; }
.dm-card .dm-face .avatar { width: 48px; height: 48px; border-radius: 50%; }
.dm-face .dm-ban { border-radius: 50%; }
.dm-dot {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--bg-primary, #fff);
    border-radius: 50%;
    background: #34c759;
}
.dm-top { margin-bottom: 3px; }
.dm-name { font-size: 15px; }
.dm-card.is-unread .dm-time { color: var(--accent-text); font-weight: 700; }
.dm-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.dm-bottom .dm-preview { flex: 1; min-width: 0; }
.dm-preview em { font-style: normal; color: var(--text-tertiary); }
.dm-preview .tick-icon { margin-right: 4px; font-size: 11px; }
.dm-bottom .dm-unread { flex: none; }

.dm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 36px 16px;
    border: 1px dashed var(--glass-line);
    border-radius: 18px;
    background: var(--glass-bg);
    text-align: center;
}
.dm-empty > span {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent-text);
    font-size: 24px;
}
.dm-empty p { margin: 0; color: var(--text-primary); font-size: 15px; font-weight: 700; }
.dm-empty small { color: var(--text-secondary); font-size: 13px; }
.dm-start {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    padding: 9px 16px;
    border: 0;
    border-radius: 12px;
    background: var(--accent);
    color: #1c140c;
    font-weight: 700;
    cursor: pointer;
}
.dm-bar .dm-new > .fas { font-size: 16px; }
.dm-page:not(.is-select) .dm-check { display: none; }

/* thread-modern */
.chat-screen.is-dm > .section-head {
    margin: 0 0 8px;
    padding: 8px 10px;
    border: 1px solid var(--glass-line);
    border-radius: 18px;
    background: var(--glass-bg);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.chat-screen.is-dm .dm-back { border-radius: 12px; }
.chat-screen.is-dm .dm-identity { position: relative; }
.chat-screen.is-dm .avatar.sm.dm-avatar { width: 40px; height: 40px; }
.chat-screen.is-dm .dm-identity.is-online::after {
    content: "";
    position: absolute;
    top: 29px;
    left: 29px;
    width: 11px;
    height: 11px;
    border: 2px solid var(--bg-primary, #fff);
    border-radius: 50%;
    background: #34c759;
}
.chat-screen.is-dm .dm-peer .screen-title { font-size: 16px; font-weight: 700; }

.chat-screen.is-dm .chat-log { gap: 3px; padding: 4px 2px 10px; }
.chat-screen.is-dm .chat-log:empty::before {
    content: attr(data-empty);
    margin: auto;
    padding: 12px 18px;
    border: 1px dashed var(--glass-line);
    border-radius: 16px;
    background: var(--glass-bg);
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
}
.chat-day {
    display: flex;
    justify-content: center;
    margin: 10px 0 6px;
    position: sticky;
    top: 0;
    z-index: 2;
}
.chat-day span {
    padding: 4px 12px;
    border: 1px solid var(--glass-line);
    border-radius: 999px;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
}
.chat-screen.is-dm .msg.mine .msg-side { display: none; }
.chat-screen.is-dm .msg:not(.mine):has(+ .msg:not(.mine)) .msg-side .avatar { visibility: hidden; }
.chat-screen.is-dm .msg.mine + .msg:not(.mine),
.chat-screen.is-dm .msg:not(.mine) + .msg.mine { margin-top: 8px; }
.chat-screen.is-dm .msg-side .avatar { width: 30px; height: 30px; border-radius: 50%; font-size: 11px; }
.chat-screen.is-dm .msg { max-width: min(82%, 520px); }
.chat-screen.is-dm .bubble { border-radius: 18px 18px 18px 6px; box-shadow: 0 1px 2px color-mix(in srgb, #000 8%, transparent); }
.chat-screen.is-dm .msg:not(.mine):has(+ .msg:not(.mine)) .bubble { border-bottom-left-radius: 18px; }
.chat-screen.is-dm .bubble.mine {
    border-radius: 18px 18px 6px 18px;
    border-color: color-mix(in srgb, var(--accent) 40%, var(--glass-line));
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 30%, var(--glass-bg)), color-mix(in srgb, var(--accent) 20%, var(--glass-bg)));
}
.chat-screen.is-dm .msg.mine:has(+ .msg.mine) .bubble { border-bottom-right-radius: 18px; }
.chat-screen.is-dm .msg-translate { opacity: .55; transition: opacity .2s; }
.chat-screen.is-dm .msg-translate:hover { opacity: 1; }

.chat-screen.is-dm > .composer {
    align-items: center;
    margin-top: 4px;
    padding: 6px;
    border: 1px solid var(--glass-line);
    border-radius: 26px;
    background: var(--glass-bg);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.chat-screen.is-dm > .composer textarea {
    min-height: 42px;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.chat-screen.is-dm > .composer .btn.send {
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 50%;
}
.chat-screen.is-dm > .reply-bar { margin-top: 4px; border-radius: 16px; }

/* thread-overlay */
.chat-screen.is-dm { position: relative; }
.chat-screen.is-dm > .section-head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    margin: 0;
}
.chat-screen.is-dm > .composer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    margin: 0;
}
.chat-screen.is-dm > .reply-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--dm-form, 60px) + 6px);
    z-index: 5;
    margin: 0;
}
.chat-screen.is-dm .chat-log {
    padding-top: calc(var(--dm-top, 64px) + 6px);
    padding-bottom: calc(var(--dm-bottom, 60px) + 10px);
    scroll-padding-top: var(--dm-top, 64px);
}
.chat-screen.is-dm .chat-day { top: calc(var(--dm-top, 64px) + 4px); }
.chat-screen.is-dm > .section-head,
.chat-screen.is-dm > .composer {
    background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
    box-shadow: 0 4px 18px color-mix(in srgb, #000 10%, transparent);
}
.chat-screen.is-dm > .section-head,
.chat-screen.is-dm > .composer {
    background: color-mix(in srgb, var(--glass-bg) 45%, transparent);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.chat-screen.is-dm .chat-day { top: 0; }

/* thread-fullbleed */
#view:has(> .chat-screen.is-dm), main.view:has(> .chat-screen.is-dm) { overflow: visible; }
.chat-screen.is-dm {
    z-index: 0;
    isolation: isolate;
    margin-top: calc(-1 * var(--dm-lift, 0px));
    margin-bottom: calc(-1 * var(--dm-drop, 0px));
}
.chat-screen.is-dm > .section-head { top: var(--dm-lift, 0px); }
.chat-screen.is-dm > .composer { bottom: var(--dm-drop, 0px); }
.chat-screen.is-dm > .reply-bar { bottom: calc(var(--dm-drop, 0px) + var(--dm-form, 60px) + 6px); }
.chat-screen.is-dm .chat-log {
    padding-top: calc(var(--dm-lift, 0px) + var(--dm-top, 64px) + 8px);
    padding-bottom: calc(var(--dm-drop, 0px) + var(--dm-bottom, 60px) + 12px);
}
.chat-screen.is-dm > .section-head,
.chat-screen.is-dm > .composer {
    border-color: color-mix(in srgb, #fff 38%, transparent);
    background: color-mix(in srgb, var(--glass-bg) 38%, transparent);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent), 0 8px 24px color-mix(in srgb, #000 12%, transparent);
}
html[data-theme="dark"] .chat-screen.is-dm > .section-head,
html[data-theme="dark"] .chat-screen.is-dm > .composer {
    border-color: color-mix(in srgb, #fff 14%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent), 0 8px 24px color-mix(in srgb, #000 30%, transparent);
}
body:has(.chat-screen.is-dm) .topbar {
    background: color-mix(in srgb, var(--glass-bg) 55%, transparent);
}
body:has(.chat-screen.is-dm) .to-top,
body:has(#view .chat-screen.is-dm) .to-top,
body[data-screen="thread"]:has(#view .chat-screen.is-dm) #to-top {
    left: auto;
    right: var(--dm-jump-right, 16px);
    bottom: var(--dm-jump-bottom, 96px);
}

/* home-hunt-gear-2 */
.home-hunt-gear { gap: 0; margin-right: 4px; }
.home-hunt-gear img,
.home-hunt-gear img:nth-child(2) {
    width: auto; height: 70px; margin-left: -12px; padding: 0; border: 0; border-radius: 0;
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)) brightness(1.12) saturate(1.1);
    transition: transform .25s ease;
}
.home-hunt-gear img:nth-child(1) { transform: rotate(-14deg); }
.home-hunt-gear img:nth-child(2) { transform: rotate(6deg) translateY(-4px); }
.home-hunt-gear img:nth-child(3) { transform: rotate(24deg); }
.home-hunt:hover .home-hunt-gear img:nth-child(1) { transform: rotate(-18deg) translateY(-2px); }
.home-hunt:hover .home-hunt-gear img:nth-child(2) { transform: rotate(4deg) translateY(-8px); }
.home-hunt:hover .home-hunt-gear img:nth-child(3) { transform: rotate(28deg) translateY(-2px); }
@media (max-width: 480px) {
    .home-hunt-gear img,
    .home-hunt-gear img:nth-child(2) { height: 54px; margin-left: -10px; padding: 0; }
}

/* hunt-weapon-clean */
.hunt-weapon-img,
html[data-theme="dark"] .hunt-weapon-img { background: none; border: 0; border-radius: 0; }
.hunt-weapon-img img { width: 60px; height: 60px; }
.hunt-weapon-img em,
.hunt-weapon.is-locked .hunt-weapon-img em {
    right: -6px; bottom: -2px; min-width: 0; height: 20px; padding: 0 7px; gap: 1px;
    font-size: 11px; font-weight: 700; letter-spacing: .2px; line-height: 1;
    color: var(--text-primary); background: var(--glass-bg-strong);
    border: 1px solid var(--glass-line); border-radius: 999px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}
.hunt-weapon-img em::before { content: '×'; opacity: .6; font-weight: 600; }
.hunt-weapon:not(.is-locked) .hunt-weapon-img em { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--glass-line)); }
.hunt-weapon.is-locked .hunt-weapon-img em { color: var(--text-tertiary); }
body:has(.chat-screen.is-dm) #shell,
body:has(.chat-screen.is-dm) .shell {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* hunt-weapon-locked */
.hunt-weapon.is-locked .hunt-weapon-img img { filter: grayscale(.45) drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); opacity: .82; }
.chat-screen.is-dm > .section-head,
.chat-screen.is-dm > .composer {
    border-width: 1px;
    border-style: solid;
    box-shadow: 0 8px 24px color-mix(in srgb, #000 12%, transparent);
}
html[data-theme="dark"] .chat-screen.is-dm > .section-head,
html[data-theme="dark"] .chat-screen.is-dm > .composer {
    box-shadow: 0 8px 24px color-mix(in srgb, #000 30%, transparent);
}
html[data-theme="dark"] .chat-screen.is-dm .bubble:not(.mine) {
    border-color: color-mix(in srgb, #fff 16%, transparent);
    background: color-mix(in srgb, #fff 14%, var(--glass-bg));
}

/* hunt-pop-arrow */
.hunt-pop::after { display: none; }
.hunt-pop, .hunt-pop.is-below { animation: hunt-pop-fade .16s ease-out both; }
.hunt-pop-arrow {
    position: fixed; z-index: 1300; width: 16px; height: 8px; pointer-events: none;
    background: rgba(255, 255, 255, .58);
    backdrop-filter: blur(18px) saturate(1.7); -webkit-backdrop-filter: blur(18px) saturate(1.7);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    animation: hunt-pop-fade .16s ease-out both;
}
.hunt-pop-arrow.is-below { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
html[data-theme="dark"] .hunt-pop-arrow { background: rgba(28, 22, 16, .52); }
@keyframes hunt-pop-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* hunt-pop-shape */
.hunt-pop,
html[data-theme="dark"] .hunt-pop {
    background: transparent; border: 0; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible;
}
.hunt-pop, .hunt-pop.is-below { animation: hunt-pop-rise .18s cubic-bezier(.2, .9, .3, 1.2) both; }
.hunt-pop.is-below { transform-origin: 50% 0; }
.hunt-pop-shadow, .hunt-pop-glass, .hunt-pop-edge { position: absolute; left: 0; pointer-events: none; }
.hunt-pop-shadow { overflow: visible; transform: translateY(8px); filter: blur(12px); }
.hunt-pop-shadow path { fill: rgba(40, 24, 8, .14); }
.hunt-pop-glass {
    display: block; background: rgba(255, 255, 255, .58);
    backdrop-filter: blur(18px) saturate(1.7); -webkit-backdrop-filter: blur(18px) saturate(1.7);
}
.hunt-pop-edge { overflow: visible; }
.hunt-pop-edge path { fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 1; }
.hunt-pop-emoji, .hunt-pop-copy { position: relative; z-index: 1; }
html[data-theme="dark"] .hunt-pop-shadow path { fill: rgba(0, 0, 0, .45); }
html[data-theme="dark"] .hunt-pop-glass { background: rgba(28, 22, 16, .52); }
html[data-theme="dark"] .hunt-pop-edge path { stroke: rgba(255, 255, 255, .16); }
.hunt-pop-arrow { display: none; }
@keyframes hunt-pop-rise { from { transform: translateY(5px) scale(.96); } to { transform: none; } }

/* smith-rush */
.smith-rush {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 999px; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, rgba(196, 40, 72, .82), rgba(140, 22, 58, .82));
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: 0 8px 22px rgba(120, 10, 40, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: transform .15s ease, box-shadow .15s ease;
}
.smith-rush:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(120, 10, 40, .45), inset 0 1px 0 rgba(255, 255, 255, .3); }
.smith-rush:active { transform: scale(.98); }
.smith-rush:disabled { opacity: .6; cursor: default; }
.smith-rush i { font-size: 12px; color: #ffd27a; }
.smith-rush-cost {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 5px; border-radius: 999px;
    background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .22);
}
.smith-rush-cost img { width: 16px; height: 16px; object-fit: contain; }

/* smith-rush-glass */
.smith-actions {
    display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1.8vw, 8px);
    flex-wrap: nowrap; pointer-events: none; max-width: calc(100vw - 32px);
}
.smith-center:has(.smith-actions .smith-rush) { width: auto; }
.smith-actions > * { pointer-events: auto; }
.smith-center .smith-rush {
    pointer-events: auto; position: relative; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: clamp(4px, 1.4vw, 6px);
    min-height: clamp(34px, 10vw, 44px); padding: 0 clamp(5px, 1.4vw, 6px) 0 clamp(12px, 3.8vw, 16px);
    border-radius: 999px; white-space: nowrap; cursor: pointer;
    font: inherit; font-size: clamp(12px, 3.5vw, 15px); font-weight: 750; letter-spacing: -0.02em;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--glass-bg-strong) 46%, transparent);
    border: 1px solid color-mix(in srgb, #fff 28%, transparent);
    box-shadow: 0 8px 18px rgba(12, 16, 10, 0.22), inset 0 1px 0 rgba(255, 255, 255, .22);
    backdrop-filter: blur(16px) saturate(165%); -webkit-backdrop-filter: blur(16px) saturate(165%);
    transition: transform .15s ease, box-shadow .15s ease;
}
.smith-center .smith-rush:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(12, 16, 10, 0.28), inset 0 1px 0 rgba(255, 255, 255, .28); }
.smith-center .smith-rush:active { transform: scale(.98); }
.smith-center .smith-rush:disabled { opacity: .6; cursor: default; transform: none; }
.smith-center .smith-rush i { font-size: .85em; color: #e8a33a; }
.smith-center .smith-rush-cost {
    display: inline-flex; align-items: center; gap: 4px;
    min-height: clamp(24px, 7vw, 32px); padding: 0 clamp(8px, 2.4vw, 10px) 0 clamp(5px, 1.4vw, 6px);
    border-radius: 999px; font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, #d22a52 16%, transparent);
    border: 1px solid color-mix(in srgb, #ff6b8b 34%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
.smith-center .smith-rush-cost img { width: clamp(14px, 4vw, 18px); height: clamp(14px, 4vw, 18px); object-fit: contain; }
html[data-theme="dark"] .smith-center .smith-rush {
    border-color: color-mix(in srgb, #d5e7fb 16%, transparent);
    background: color-mix(in srgb, var(--glass-bg) 58%, transparent);
    box-shadow: 0 8px 18px rgba(4, 8, 16, 0.32), inset 0 1px 0 rgba(255, 255, 255, .08);
}
html[data-theme="light"] .smith-center .smith-rush {
    color: #2c241c;
    border-color: color-mix(in srgb, #ffffff 28%, #00000000);
    background: rgba(255, 250, 244, 0.42);
    box-shadow: 0 8px 18px rgba(48, 34, 18, 0.12), inset 0 1px 0 rgba(255, 255, 255, .5);
    backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
}
@media (max-width: 380px) {
    .smith-center .smith-rush-label { display: none; }
    .smith-center .smith-rush { padding-left: 10px; }
}
/* end-smith-rush-glass */
/* ledger-filter */
.ledger-filter {
    display: inline-flex; gap: 4px; margin: 2px 0 10px; padding: 4px; border-radius: 999px; max-width: 100%; overflow-x: auto;
    background: color-mix(in srgb, var(--glass-bg-strong, var(--bg-elevated)) 55%, transparent);
    border: 1px solid color-mix(in srgb, #fff 22%, var(--border-color));
    box-shadow: 0 6px 16px rgba(12, 16, 10, .10), inset 0 1px 0 rgba(255, 255, 255, .25);
    backdrop-filter: blur(16px) saturate(165%); -webkit-backdrop-filter: blur(16px) saturate(165%);
}
.ledger-chip {
    flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px;
    border: 1px solid transparent; border-radius: 999px; background: transparent; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 700; color: var(--text-secondary);
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.ledger-chip img { width: 16px; height: 16px; object-fit: contain; }
.ledger-chip:hover { color: var(--text-primary); }
.ledger-chip.is-active {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
    border-color: color-mix(in srgb, #fff 30%, var(--border-color));
    box-shadow: 0 3px 10px rgba(12, 16, 10, .14), inset 0 1px 0 rgba(255, 255, 255, .35);
}
html[data-theme="dark"] .ledger-filter { border-color: color-mix(in srgb, #d5e7fb 14%, transparent); background: color-mix(in srgb, var(--glass-bg, #1b2230) 58%, transparent); }
html[data-theme="dark"] .ledger-chip.is-active { background: color-mix(in srgb, #fff 12%, transparent); border-color: color-mix(in srgb, #d5e7fb 18%, transparent); box-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
.bank-ledger .is-loading { opacity: .45; transition: opacity .15s ease; }
.sikke-amt.is-yakut img { object-fit: contain; }
/* end-ledger-filter */
/* mine-rush */
.mine-job {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.mine-job-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mine-clock {
    color: var(--accent-text);
    font-size: 22px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    line-height: 1.1;
}
.mine-rush { flex: none; }
@media (max-width: 380px) {
    .mine-clock { font-size: 19px; }
    .mine-rush { padding-left: 10px; gap: 6px; }
}

/* depot-discard */
.depot-discard {
    position: absolute; top: 6px; left: 6px; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 999px; cursor: pointer;
    color: #fff; font-size: 11px;
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: background .15s ease, transform .15s ease;
}
.depot-discard:hover, .depot-discard:focus-visible { background: rgba(200, 38, 64, .85); outline: none; transform: scale(1.06); }
.depot-discard:active { transform: scale(.94); }
html[data-theme="light"] .depot-discard { background: rgba(255, 255, 255, .9); color: #b42318; border-color: rgba(180, 35, 24, .22); }
html[data-theme="light"] .depot-discard:hover, html[data-theme="light"] .depot-discard:focus-visible { background: #d92d20; color: #fff; }
.depot-discard-head { display: flex; align-items: center; gap: 10px; text-align: left; }
.depot-discard-img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.depot-discard-field { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; text-align: left; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.depot-discard-row { display: flex; gap: 8px; }
.depot-discard-row .input { flex: 1; min-width: 0; }
.depot-discard-row .btn { flex: none; width: auto; padding: 0 14px; }
@media (max-width: 420px) {
    .depot-discard { top: 3px; left: 3px; width: 18px; height: 18px; font-size: 9px; }
}
/* end-depot-discard */.depot-discard-row .input, .depot-discard-row .btn { height: 40px; min-height: 40px; padding-top: 0; padding-bottom: 0; }

/* depot-discard-input */
.depot-discard-row { align-items: stretch; }
.depot-discard-input {
    flex: 1; min-width: 0; height: 46px; padding: 0 16px; margin: 0;
    border-radius: 14px; border: 1px solid var(--glass-line, var(--border-color));
    background: color-mix(in srgb, var(--glass-bg-strong, var(--bg-elevated)) 60%, transparent);
    color: var(--text-primary); font: inherit; font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    outline: none; appearance: textfield; -moz-appearance: textfield;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.depot-discard-input::-webkit-outer-spin-button,
.depot-discard-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.depot-discard-input:focus {
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.depot-discard-max {
    flex: none; height: 46px; padding: 0 18px; border-radius: 14px; cursor: pointer;
    border: 1px solid var(--glass-line, var(--border-color));
    background: color-mix(in srgb, var(--glass-bg-strong, var(--bg-elevated)) 60%, transparent);
    color: var(--text-primary); font: inherit; font-size: 14px; font-weight: 750;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: background .15s ease, border-color .15s ease;
}
.depot-discard-max:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.depot-discard-max:active { transform: scale(.97); }
html[data-theme="light"] .depot-discard-input,
html[data-theme="light"] .depot-discard-max { background: rgba(255, 255, 255, .6); border-color: rgba(60, 40, 20, .14); color: #2c241c; }
/* end-depot-discard-input */
/* hunt-process */
.hunt-proc { margin-bottom: 12px; }
.hunt-proc .hunt-catch-emoji { flex: none; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; }
.hunt-proc .hunt-catch-emoji .hunt-art { width: 48px; height: 48px; object-fit: contain; }
.hunt-yield-time i { font-size: 10px; opacity: .8; }
.forest-ready .mine-haul-item { font-weight: 750; }
/* end-hunt-process */
/* haul-chip-theme */
.forest-job.mine-haul .mine-haul-item {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 14%, var(--bg-secondary));
    color: var(--text-primary);
}
html[data-theme="dark"] .forest-job.mine-haul .mine-haul-item {
    border-color: color-mix(in srgb, var(--accent) 42%, transparent);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
}

/* mine-pick */
.mine-pick-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.mine-pick {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 10px; border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-secondary));
}
.mine-pick-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mine-pick-name img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.mine-pick-name strong, .mine-pick-name small { display: block; line-height: 1.2; }
.mine-pick-name strong { font-size: 13px; font-weight: 750; }
.mine-pick-name small { font-size: 11px; color: var(--text-secondary); }
.mine-pick .depot-discard-row { flex: 0 0 auto; width: auto; }
.mine-pick .depot-discard-input { width: 76px; min-width: 0; }
.mine-pick-total { margin: 10px 0 0; font-size: 12px; font-weight: 700; color: var(--text-secondary); text-align: right; }
.mine-pick-total.is-over { color: var(--danger, #d9534f); }
@media (max-width: 420px) {
    .mine-pick { flex-wrap: wrap; }
    .mine-pick .depot-discard-row { width: 100%; }
    .mine-pick .depot-discard-input { flex: 1; width: auto; }
}

/* mine-pick-glass */
.mine-pick {
    border: 1px solid color-mix(in srgb, #fff 48%, transparent);
    background: color-mix(in srgb, #fff 32%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
}
html[data-theme="dark"] .mine-pick {
    border-color: color-mix(in srgb, #e8f2ff 28%, transparent);
    background: color-mix(in srgb, #e8f2ff 16%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.modal .depot-discard-input,
.modal .depot-discard-max {
    border-color: color-mix(in srgb, #fff 55%, transparent);
    background: color-mix(in srgb, #fff 38%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
html[data-theme="dark"] .modal .depot-discard-input,
html[data-theme="dark"] .modal .depot-discard-max {
    border-color: color-mix(in srgb, #e8f2ff 30%, transparent);
    background: color-mix(in srgb, #e8f2ff 12%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
html[data-theme="dark"] .modal .depot-discard-max:hover,
.modal .depot-discard-max:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.modal .depot-discard-input:focus {
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, .1);
}

/* market + quick-fab */
@media (max-width: 959px) {
    .tab-main { flex: 5 1 0; grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .tab-glide { width: calc(100% / 5); }
}
.bank-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bank-stats .bank-stat:last-child { grid-column: auto; }
.profile-stats.cols-1 { grid-template-columns: 1fr; }

/* profile-gender */
.profile-extras { display: flex; flex-direction: column; gap: 0; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--glass-line, var(--border-color)); }
.profile-extras .field span { display: inline-flex; align-items: center; gap: 6px; }
.profile-extras .field span i { color: var(--accent-text); font-size: 13px; }
.profile-extras .btn { margin-top: 4px; }
.gender-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex: none;
    vertical-align: middle;
}
.profile-name .gender-icon { margin-left: 2px; }
@media (max-width: 480px) {
    .gender-icon { width: 16px; height: 16px; }
}

/* chat-gender */
.bubble-name .bubble-who {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    max-width: 100%;
}
.bubble-name .gender-icon {
    width: 14px;
    height: 14px;
    margin: 0;
    flex: none;
    object-fit: cover;
    transform: scale(1.2);
    transform-origin: center;
}
.bubble-name .msg-flag + .gender-icon { margin-left: 0; }
.bubble-name .gender-icon + .msg-delete,
.bubble-name .bubble-who + .msg-delete {
    margin-left: auto;
}

/* profile-inventory-tabs */
.pf-tabs {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 3px;
    overflow-x: auto;
    border: 1px solid var(--glass-line);
    border-radius: 14px;
    background: var(--glass-bg);
    scrollbar-width: none;
}
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tab {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.pf-tab:hover { color: var(--text-primary); }
.pf-tab.is-on {
    background: color-mix(in srgb, var(--accent) 22%, var(--glass-bg));
    color: var(--accent-text);
    box-shadow: 0 2px 8px color-mix(in srgb, #000 12%, transparent);
}
.pf-tab i { font-size: 12px; }
.pf-pane {
    display: none;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.pf-pane.is-on {
    display: flex;
}
.pf-inv.profile-block {
    margin: 0;
    padding: 10px;
}
.pf-inv .depot-filters { margin: 0 0 10px; }
.pf-inv .depot-item { cursor: default; }
.pf-inv .depot-item:active { transform: none; }
.pf-inv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px;
    border: 1px dashed var(--glass-line);
    border-radius: 16px;
    background: var(--glass-bg);
    text-align: center;
    color: var(--text-secondary);
}
.pf-inv-empty i {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent-text);
    font-size: 22px;
}
.pf-inv-empty p { margin: 0; font-size: 14px; font-weight: 650; }
@media (max-width: 420px) {
    .pf-tab { gap: 4px; padding: 0 8px; font-size: 12px; }
}


/* stall-tezgah */
.stall-screen {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 8px;
}
.stall-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
    border: 1px solid var(--glass-line, var(--border-color));
    background:
        radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),
        color-mix(in srgb, var(--glass-bg-strong) 72%, transparent);
    box-shadow: var(--glass-shadow, none);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.stall-back {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
    color: var(--text-primary);
    cursor: pointer;
}
.stall-back:active { transform: scale(0.96); }
.stall-hero-copy { min-width: 0; flex: 1; }
.stall-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 780;
    letter-spacing: -0.03em;
    line-height: 1.2;
}
.stall-hero-badge i { color: var(--accent-text); font-size: 15px; }
.stall-hero-sub {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 12.5px;
    line-height: 1.35;
}
.stall-fee-chip {
    flex: none;
    max-width: 42%;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent-text);
    font-size: 11px;
    font-weight: 750;
    text-align: center;
    line-height: 1.2;
}
.stall-seg {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
}
.stall-seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 40px;
    padding: 0 6px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 11px;
    font-weight: 720;
    cursor: pointer;
}
.stall-seg-btn.is-on {
    background: color-mix(in srgb, var(--glass-bg-strong) 88%, transparent);
    color: var(--text-primary);
    box-shadow: 0 6px 16px rgba(8, 12, 20, 0.16);
}
.stall-seg-btn i { font-size: 11px; opacity: 0.9; }
.stall-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.stall-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.stall-chip.is-on {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent-text);
}
.stall-chip i { font-size: 11px; }
.stall-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.stall-list > .stall-empty {
    grid-column: 1 / -1;
}
.stall-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: var(--radius-sm, 16px);
    border: 1px solid var(--glass-line);
    background: var(--glass-bg);
    box-shadow: none;
    backdrop-filter: blur(20px) saturate(165%);
    -webkit-backdrop-filter: blur(20px) saturate(165%);
    overflow: hidden;
}
.stall-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.stall-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    color: var(--text-secondary);
}
.stall-badge.is-onsale {
    color: #68d391;
    background: rgba(104, 211, 145, 0.15);
    border-color: rgba(104, 211, 145, 0.25);
}
.stall-badge.is-locked {
    color: #f0c27a;
    background: color-mix(in srgb, #f6ad55 16%, transparent);
    border-color: color-mix(in srgb, #f6ad55 28%, transparent);
}
html[data-theme="light"] .stall-badge.is-onsale {
    color: #276749;
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.25);
}
html[data-theme="light"] .stall-badge.is-locked { color: #9a5b12; }
.stall-card-main { display: flex; gap: 12px; align-items: center; }
.stall-thumb {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    flex: none;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--glass-bg-strong) 70%, transparent);
    color: var(--text-secondary);
}
.stall-thumb img { width: 34px; height: 34px; object-fit: contain; }
.stall-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.stall-title-row {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px 8px;
    min-width: 0;
}
.stall-title-row strong {
    font-size: 15px;
    font-weight: 780;
    letter-spacing: -0.02em;
    line-height: 1.25;
    min-width: 0;
}
.stall-qty-line {
    flex: none;
    font-size: 13px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--text-tertiary, var(--text-secondary));
    line-height: 1.25;
}
.stall-unit-line {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--text-tertiary, var(--text-secondary));
    line-height: 1.2;
}
.stall-unit-line .sikke-amt img { width: 0.85em; height: 0.85em; }
.stall-qty {
    display: inline-flex;
    width: fit-content;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-primary) 7%, transparent);
}
.stall-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.stall-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 11px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--glass-line) 90%, transparent);
    background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    min-width: 0;
}
.stall-metric > span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary, var(--text-secondary));
}
.stall-metric > strong {
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.stall-metric-sikke .sikke-amt { gap: 0.3em; }
.stall-metric-sikke .sikke-amt img { width: 0.95em; height: 0.95em; }
.stall-metric-want {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.stall-metric-want img,
.stall-metric-want i {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex: none;
    font-size: 14px;
    color: var(--accent-text);
}
.stall-metric-want em {
    font-style: normal;
    font-weight: 800;
}
.stall-total-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--glass-bg-strong) 72%, transparent);
}
.stall-card.is-cash .stall-total-bar {
    border-color: color-mix(in srgb, #e0b43a 26%, var(--border-color));
    background: color-mix(in srgb, #e0b43a 12%, transparent);
}
.stall-card.is-barter .stall-total-bar {
    border-color: color-mix(in srgb, var(--accent) 26%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.stall-total-bar > span {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
}
.stall-total-bar > strong {
    font-size: 14px;
    font-weight: 800;
}
.stall-total-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 0;
}
.stall-total-stack > small {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1.15;
}
.stall-total-stack > small .sikke-amt img { width: 0.9em; height: 0.9em; }
.stall-total-stack > strong {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.15;
}
.stall-total-bar .sikke-amt img { width: 1.05em; height: 1.05em; }
.stall-want-face {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 750;
}
.stall-want-face img,
.stall-want-face > i {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex: none;
    font-size: 15px;
    color: var(--accent-text);
}
.stall-want-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-style: normal;
}
.stall-seller {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 999px;
    cursor: pointer;
    max-width: 46%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stall-seller:hover {
    color: var(--accent-text);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.stall-seller i { font-size: 10px; opacity: 0.85; }
.stall-deal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--glass-bg-strong) 55%, transparent);
}
.stall-deal-label {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 650;
}
.stall-deal-value { font-size: 14px; }
.stall-want { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.stall-want img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex: none;
}
.stall-want strong {
    font-size: 13px;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stall-actions { display: grid; gap: 8px; }
.stall-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 750 !important;
}
.stall-btn i { font-size: 13px; }
.stall-btn.is-buy {
    background: color-mix(in srgb, #e0b43a 20%, var(--glass-bg)) !important;
    border-color: color-mix(in srgb, #e0b43a 38%, var(--border-color)) !important;
    color: var(--text-primary) !important;
}
.stall-btn.is-trade {
    background: color-mix(in srgb, var(--accent) 18%, var(--glass-bg)) !important;
    border-color: color-mix(in srgb, var(--accent) 36%, var(--border-color)) !important;
    color: var(--text-primary) !important;
}
.stall-empty {
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 28px 16px;
    border-radius: 18px;
    border: 1px dashed color-mix(in srgb, var(--border-color) 80%, transparent);
    background: color-mix(in srgb, var(--text-primary) 3%, transparent);
    text-align: center;
    color: var(--text-secondary);
}
.stall-empty i { font-size: 22px; opacity: 0.7; }
.stall-empty p { margin: 0; font-size: 13px; font-weight: 650; }
.stall-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.stall-head-copy h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 780;
    letter-spacing: -0.02em;
}
.stall-head-copy .caption { margin-top: 4px; }
.stall-limit {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 750;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}
.stall-limit i { font-size: 11px; color: var(--accent-text); }
.stall-compose {
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
html[data-theme="dark"] .stall-compose {
    border-color: color-mix(in srgb, #e8f2ff 18%, transparent);
    background: color-mix(in srgb, #e8f2ff 8%, transparent);
}
.stall-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.stall-form-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 750;
}
.stall-form-title i { color: var(--accent-text); }
.stall-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 4px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
}
.stall-mode {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 720;
    color: var(--text-secondary);
    cursor: pointer;
}
.stall-mode input { position: absolute; opacity: 0; pointer-events: none; }
.stall-mode.is-on {
    background: color-mix(in srgb, var(--glass-bg-strong) 90%, transparent);
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(8, 12, 20, 0.14);
}
.stall-fields {
    display: grid;
    gap: 10px;
}
.stall-fields .field { margin: 0; }
.stall-submit { margin-top: 2px; min-height: 44px; border-radius: 14px !important; }
.stall-section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 10px;
    color: var(--text-tertiary, var(--text-secondary));
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.stall-section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color);
}
.stall-pane.is-embedded { margin-top: 0; }
@media (min-width: 720px) {
    .stall-list { grid-template-columns: 1fr 1fr; gap: 12px; }
    .stall-fields { grid-template-columns: 1.4fr 0.8fr; }
    .stall-fields [data-cash-only],
    .stall-fields [data-barter-only] { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
    .stall-list { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 719px) {
    .stall-list { gap: 8px; }
    .stall-card {
        gap: 8px;
        padding: 10px;
        border-radius: 14px;
    }
    .stall-card-top { gap: 4px; }
    .stall-badge {
        padding: 3px 7px;
        font-size: 10px;
        gap: 3px;
    }
    .stall-seller {
        max-width: 42%;
        font-size: 11px;
    }
    .stall-card-main {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    .stall-thumb {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
    .stall-thumb img { width: 24px; height: 24px; }
    .stall-copy { gap: 3px; min-width: 0; }
    .stall-title-row strong { font-size: 13px; }
    .stall-qty-line { font-size: 12px; }
    .stall-unit-line { font-size: 10px; }
    .stall-qty { font-size: 11px; padding: 2px 6px; }
    .stall-deal {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 8px;
        border-radius: 12px;
    }
    .stall-deal-label { font-size: 10px; }
    .stall-deal-value { font-size: 12px; }
    .stall-want strong { font-size: 11px; }
    .stall-want img { width: 18px; height: 18px; }
    .stall-btn {
        min-height: 36px;
        border-radius: 11px !important;
        font-size: 12px !important;
        gap: 5px;
        padding: 0 8px;
    }
    .stall-btn i { font-size: 11px; }
}
@media (max-width: 480px) {
    .stall-hero { padding: 12px; gap: 10px; }
    .stall-fee-chip { display: none; }
}






/* stall mine sub + sales */
.stall-subseg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    margin: 0 0 12px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}
.stall-subseg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 38px; padding: 0 10px; border: 0; border-radius: 11px;
    background: transparent; color: var(--text-secondary);
    font-size: 13px; font-weight: 720; cursor: pointer;
}
.stall-subseg-btn i { font-size: 12px; }
.stall-subseg-btn.is-on {
    background: color-mix(in srgb, var(--glass-bg-strong) 90%, transparent);
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(8, 12, 20, 0.12);
}

.stall-sales-pane { display: flex; flex-direction: column; gap: 12px; }
.stall-sales-caption {
    margin: 0;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
    color: var(--text-tertiary, var(--text-secondary));
}
.stall-sales-list { display: flex; flex-direction: column; gap: 10px; }
.stall-sale-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-sm, 16px);
    border: 1px solid var(--glass-line);
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(165%);
    -webkit-backdrop-filter: blur(20px) saturate(165%);
    overflow: hidden;
}
.stall-sale-card.is-mine {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--glass-line));
}
.stall-sale-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    color: var(--text-tertiary, var(--text-secondary));
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
    flex: none;
}
.stall-sale-time i { font-size: 10px; opacity: 0.85; }
.stall-sale-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.stall-sale-thumb {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    flex: none;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--glass-bg-strong) 70%, transparent);
    color: var(--text-secondary);
}
.stall-sale-thumb img { width: 32px; height: 32px; object-fit: contain; }
.stall-sale-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.stall-sale-title {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px 8px;
    min-width: 0;
    width: 100%;
}
.stall-sale-title > strong {
    font-size: 15px;
    font-weight: 780;
    letter-spacing: -0.02em;
    line-height: 1.25;
    min-width: 0;
}
.stall-sale-title .stall-qty-line {
    font-size: 13px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--text-tertiary, var(--text-secondary));
    line-height: 1.25;
}
.stall-sale-parties {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}
.stall-sale-party {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--glass-bg-strong) 55%, transparent);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.stall-sale-party:last-of-type { align-items: flex-end; text-align: right; }
.stall-sale-party > span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-tertiary, var(--text-secondary));
}
.stall-sale-party > strong {
    font-size: 12px;
    font-weight: 750;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stall-sale-party:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.stall-sale-arrow {
    font-size: 11px;
    color: var(--text-tertiary, var(--text-secondary));
    opacity: 0.8;
}
.stall-sale-card .stall-total-bar { margin-top: 0; }
@media (max-width: 380px) {
    .stall-sale-title > strong { font-size: 13px; }
    .stall-sale-title .stall-qty-line { font-size: 12px; }
    .stall-sale-thumb { width: 44px; height: 44px; border-radius: 12px; }
    .stall-sale-thumb img { width: 26px; height: 26px; }
    .stall-sale-party { padding: 7px 8px; }
}
@media (max-width: 380px) {
    .stall-seg-btn { font-size: 10px; letter-spacing: -0.02em; }
    .stall-seg-btn i { display: none; }
}
/* stall-filter + tahsis */
.stall-seg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stall-market-tools { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.stall-market-search { width: 100%; }
.stall-active-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.stall-active-chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 30px; padding: 0 10px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--text-primary); font-size: 12px; font-weight: 700; cursor: pointer;
}
.stall-active-chip.is-static { cursor: default; }
.stall-active-chip .fa-xmark { font-size: 10px; opacity: 0.75; }
.stall-filter-pane { display: flex; flex-direction: column; gap: 14px; padding-bottom: 20px; }
.stall-filter-block { display: flex; flex-direction: column; gap: 8px; }
.stall-filter-label {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--text-tertiary, var(--text-secondary));
    font-size: 11px; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase;
}
.stall-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stall-filter-btn {
    display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px;
    min-height: 42px; padding: 0 12px; border-radius: 12px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
    color: var(--text-secondary); font-size: 13px; font-weight: 700; cursor: pointer;
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}
.stall-filter-btn i { width: 1.1em; text-align: center; color: var(--accent-text); }
.stall-filter-btn.is-on {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 16%, var(--glass-bg));
}
.stall-filter-products { gap: 5px; }
.stall-filter-divider {
    height: 1px; margin: 2px 0 4px;
    background: color-mix(in srgb, var(--border-color) 85%, transparent);
}
.stall-quick-scroll {
    display: flex;
    overflow-x: auto;
    gap: 6px;
    padding: 2px 0 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}
.stall-quick-scroll::-webkit-scrollbar { display: none; }
.stall-quick-scroll {
    cursor: grab;
    user-select: none;
}
.stall-quick-scroll.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}
.stall-quick-scroll.is-dragging .stall-quick-btn {
    pointer-events: none;
}
.stall-quick-btn {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 64px;
    padding: 7px 9px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--glass-line) 88%, transparent);
    background: color-mix(in srgb, var(--glass-bg) 55%, transparent);
    color: inherit;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, background .15s ease;
}
.stall-quick-btn img { width: 28px; height: 28px; object-fit: contain; }
.stall-quick-btn .fa-cube { font-size: 16px; color: var(--accent-text); }
.stall-quick-name {
    display: block;
    max-width: 60px;
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stall-quick-btn.is-on {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background: color-mix(in srgb, var(--accent) 18%, var(--glass-bg));
}
.stall-quick-btn.is-farm:hover { border-color: color-mix(in srgb, #68d391 45%, transparent); }
.stall-quick-btn.is-forest:hover { border-color: color-mix(in srgb, #d4a574 45%, transparent); }
.stall-quick-btn.is-mine:hover { border-color: color-mix(in srgb, #94a3b8 50%, transparent); }
.stall-quick-btn.is-smith:hover { border-color: color-mix(in srgb, #f6ad55 45%, transparent); }
.stall-quick-btn.is-weapons:hover { border-color: color-mix(in srgb, #c08457 45%, transparent); }
.stall-quick-btn.is-hunt:hover { border-color: color-mix(in srgb, #e57373 45%, transparent); }
.stall-filter-label.is-resource { color: color-mix(in srgb, #f6ad55 75%, var(--text-secondary)); }
.stall-quick-btn.is-resource:hover { border-color: color-mix(in srgb, #f6ad55 45%, transparent); }
.stall-filter-label.is-farm { color: color-mix(in srgb, #68d391 75%, var(--text-secondary)); }
.stall-filter-label.is-forest { color: color-mix(in srgb, #d4a574 75%, var(--text-secondary)); }
.stall-filter-label.is-mine { color: color-mix(in srgb, #94a3b8 80%, var(--text-secondary)); }
.stall-filter-label.is-smith { color: color-mix(in srgb, #f6ad55 75%, var(--text-secondary)); }
.stall-filter-label.is-weapons { color: color-mix(in srgb, #c08457 75%, var(--text-secondary)); }
.stall-filter-label.is-hunt { color: color-mix(in srgb, #e57373 75%, var(--text-secondary)); }
html[data-theme="light"] .stall-filter-label.is-resource { color: #c05621; }
html[data-theme="light"] .stall-filter-label.is-farm { color: #276749; }
html[data-theme="light"] .stall-filter-label.is-forest { color: #8a5a2b; }
html[data-theme="light"] .stall-filter-label.is-mine { color: #4a5568; }
html[data-theme="light"] .stall-filter-label.is-smith { color: #c05621; }
html[data-theme="light"] .stall-filter-label.is-weapons { color: #9c4221; }
html[data-theme="light"] .stall-filter-label.is-hunt { color: #c53030; }
.stall-filter-apply { width: 100%; min-height: 46px; border-radius: 14px !important; margin-top: 4px; }
.stall-target-line {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.2;
    color: var(--text-tertiary, var(--text-secondary));
}
.stall-target-line i {
    font-size: 10px;
    color: #f6ad55;
    opacity: 0.95;
}
.stall-btn.is-locked { opacity: 0.85; cursor: pointer; }
.stall-target-field { display: flex; flex-direction: column; gap: 8px; }
.stall-target-field > span { display: inline-flex; align-items: center; gap: 7px; }
.stall-target-field > span i { color: #f6ad55; }
.stall-target-field input[type="search"] {
    width: 100%; min-height: 42px; padding: 0 12px; border-radius: 12px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
    color: var(--text-primary);
}
.stall-target-hint {
    display: inline-flex; align-items: flex-start; gap: 7px;
    color: var(--text-secondary); font-size: 12px; line-height: 1.4;
}
.stall-target-hint i { margin-top: 2px; color: #f6ad55; }
.stall-target-selected {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px; border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    font-size: 13px; font-weight: 700;
}
.stall-target-face {
    display: inline-flex; align-items: center; gap: 8px; min-width: 0;
}
.stall-target-face .avatar {
    width: 28px; height: 28px; font-size: 11px; flex: none;
}
.stall-target-face strong {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stall-target-selected button {
    width: 28px; height: 28px; border: 0; border-radius: 8px;
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    color: inherit; cursor: pointer;
}
.stall-target-results {
    display: flex; flex-direction: column; gap: 4px;
    max-height: min(28vh, 180px); overflow: auto; padding: 4px;
    border-radius: 12px; border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-primary) 55%, transparent);
}
.stall-target-option .avatar {
    width: 28px; height: 28px; font-size: 11px;
}
.stall-target-option {
    display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px;
    width: 100%; padding: 8px; border: 0; border-radius: 10px;
    background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit;
}
.stall-target-option:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.stall-target-option img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.stall-target-option small { color: var(--text-secondary); font-size: 11px; font-weight: 700; }

/* stall-sell-slide-picker */
.modal.stall-sell-modal {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    max-height: min(92dvh, 860px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--glass-line) 85%, transparent);
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--glass-bg) 78%, transparent), color-mix(in srgb, var(--glass-bg-strong) 62%, transparent));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent),
        var(--glass-shadow);
    backdrop-filter: blur(24px) saturate(175%);
    -webkit-backdrop-filter: blur(24px) saturate(175%);
}
.modal-root.open .modal.stall-sell-modal {
    transform: translateY(-50%);
    animation: stall-sell-in 0.3s ease;
}
.modal-root.open.is-closing .modal.stall-sell-modal {
    animation: stall-sell-out 0.25s ease forwards;
}
@keyframes stall-sell-in {
    0% { transform: translate3d(0, calc(-50% - 40px), 0) scale(0.94); opacity: 0; }
    100% { transform: translate3d(0, -50%, 0) scale(1); opacity: 1; }
}
@keyframes stall-sell-out {
    0% { transform: translate3d(0, -50%, 0) scale(1); opacity: 1; }
    100% { transform: translate3d(0, calc(-50% - 40px), 0) scale(0.94); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .modal-root.open .modal.stall-sell-modal,
    .modal-root.open.is-closing .modal.stall-sell-modal {
        animation: none;
    }
}
.modal.stall-sell-modal > .stall-sell-flow {
    margin: 0;
    padding: 18px 0 calc(16px + env(safe-area-inset-bottom));
}
.stall-sell-flow {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.stall-sell-track {
    display: block;
    width: 100%;
    position: relative;
}
.stall-sell-pane {
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
}
.stall-sell-pane[data-pane="main"] {
    transition: opacity .22s ease, transform .22s ease;
}
.stall-sell-pane[data-pane="main"] h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 750;
    letter-spacing: -0.03em;
}
.stall-sell-pane[data-pane="main"] h2 i {
    color: #68d391;
    font-size: 15px;
    flex: none;
    margin: 0;
    width: 1.15em;
    text-align: center;
}
.stall-sell-pane[data-pane="want"] {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    border: 0;
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--glass-bg) 72%, transparent), color-mix(in srgb, var(--glass-bg-strong) 55%, transparent)),
        color-mix(in srgb, var(--bg-primary) 42%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 10px, 0) scale(0.985);
    transition: opacity .26s ease, transform .26s cubic-bezier(.22,.9,.3,1), visibility .26s;
    z-index: 3;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
html[data-theme="dark"] .stall-sell-pane[data-pane="want"] {
    background:
        linear-gradient(160deg, rgba(22, 34, 58, 0.58), rgba(12, 20, 36, 0.72)),
        color-mix(in srgb, var(--glass-bg-strong) 40%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 40px rgba(0, 0, 0, 0.28);
}
html[data-theme="light"] .stall-sell-pane[data-pane="want"] {
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.62), rgba(248, 244, 238, 0.7)),
        color-mix(in srgb, var(--glass-bg-strong) 45%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 12px 36px rgba(40, 28, 16, 0.1);
}
.stall-sell-flow.is-want .stall-sell-pane[data-pane="want"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
}
.stall-sell-flow.is-want .stall-sell-pane[data-pane="main"] {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, -8px, 0) scale(0.99);
}
.stall-sell-flow.is-want {
    min-height: min(70vh, 540px);
}
.stall-want-slide-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.stall-want-slide-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 750;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.stall-want-slide-head h3 i { color: var(--accent-text); font-size: 13px; }
.stall-want-back {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--glass-line) 90%, transparent);
    background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
    color: var(--text-primary);
    display: grid;
    place-items: center;
    cursor: pointer;
    flex: none;
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}
.stall-want-back:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.stall-want-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: auto;
    flex: 1;
    min-height: 180px;
    max-height: min(52vh, 420px);
    padding-bottom: 4px;
    align-content: start;
}
.stall-want-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px 10px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--glass-line) 88%, transparent);
    background: color-mix(in srgb, var(--glass-bg) 55%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
    backdrop-filter: blur(14px) saturate(155%);
    -webkit-backdrop-filter: blur(14px) saturate(155%);
    color: inherit;
    cursor: pointer;
    text-align: center;
    min-width: 0;
}
.stall-want-tile:hover,
.stall-want-tile:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 14%, var(--glass-bg));
}
.stall-want-tile.is-on {
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    background: color-mix(in srgb, var(--accent) 20%, var(--glass-bg));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent),
        0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
.stall-want-tile-ico {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--glass-bg-strong) 50%, transparent);
}
.stall-want-tile-ico img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}
.stall-want-tile-ico .fa-paw,
.stall-want-tile-ico .fa-cube {
    font-size: 18px;
    color: var(--accent-text);
}
.stall-want-tile strong {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.stall-want-tile > .fa-check {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 11px;
    opacity: 0;
    color: var(--accent-text);
}
.stall-want-tile.is-on > .fa-check { opacity: 1; }

/* stall-want-pick-modal */
.stall-want-pick { width: 100%; }
.stall-want-btn .fa-chevron-right {
    margin-left: auto;
    flex: none;
    font-size: 11px;
    color: var(--text-tertiary, var(--text-secondary));
}
.stall-want-empty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 650;
}
.stall-want-layer {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.stall-want-layer.is-open {
    opacity: 1;
    pointer-events: auto;
}
.stall-want-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, #060a12 48%, transparent);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}
html[data-theme="light"] .stall-want-backdrop {
    background: color-mix(in srgb, #101828 28%, transparent);
}
.stall-want-modal {
    position: relative;
    z-index: 1;
    width: min(100%, 400px);
    max-height: min(72vh, 520px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid var(--glass-line);
    background: var(--glass-bg);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(22px) saturate(165%);
    -webkit-backdrop-filter: blur(22px) saturate(165%);
    color: var(--text-primary);
    transform: scale(0.96);
    transition: transform .18s ease;
}
.stall-want-layer.is-open .stall-want-modal { transform: scale(1); }
html[data-theme="dark"] .stall-want-modal {
    border-color: color-mix(in srgb, #e8f2ff 22%, transparent);
    background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
    box-shadow:
        0 20px 48px rgba(4, 8, 16, 0.45),
        inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}
html[data-theme="light"] .stall-want-modal {
    border-color: color-mix(in srgb, #1a2336 12%, transparent);
    background: color-mix(in srgb, #ffffff 78%, transparent);
    box-shadow:
        0 18px 40px rgba(20, 28, 40, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.stall-want-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.stall-want-head h3 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 780;
}
.stall-want-head h3 i { color: #7dd8ff; font-size: 13px; }
.stall-want-x {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    color: inherit;
    cursor: pointer;
}
.stall-want-search { flex: none; }
.stall-want-list {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px;
    -webkit-overflow-scrolling: touch;
}
.stall-want-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.stall-want-option:hover,
.stall-want-option:focus-visible {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    outline: none;
}
.stall-want-option.is-on {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.stall-want-option > .fa-check {
    margin-left: auto;
    opacity: 0;
    color: var(--accent-text);
    font-size: 12px;
}
.stall-want-option.is-on > .fa-check { opacity: 1; }
.stall-want-option-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: none;
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-secondary));
}
.stall-want-option-ico img { width: 24px; height: 24px; object-fit: contain; }
.stall-want-option-meta { min-width: 0; }
.stall-want-option-meta strong {
    display: block;
    font-size: 13px;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* stall-sell-inventory */
.stall-inv-tools { margin: 0 0 10px; }
.stall-inv-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--glass-bg-strong) 70%, transparent);
}
.stall-inv-search i { color: var(--text-tertiary, var(--text-secondary)); font-size: 12px; }
.stall-inv-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    outline: none;
}
.stall-inv-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0 0 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.stall-inv-filters::-webkit-scrollbar { display: none; }
.stall-inv-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    margin: 0;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
}
.stall-inv-chip i { font-size: 11px; opacity: 0.85; }
.stall-inv-chip.is-on {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent-text);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.stall-inv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.stall-inv-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--glass-line) 95%, transparent);
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--glass-bg-strong) 70%, transparent), color-mix(in srgb, var(--glass-bg) 45%, transparent));
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    min-width: 0;
}
.stall-inv-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.stall-inv-media {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, #fff 12%, transparent);
    background:
        radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
        color-mix(in srgb, var(--bg-secondary) 75%, transparent);
    color: var(--text-secondary);
}
.stall-inv-media img { width: 30px; height: 30px; object-fit: contain; }
.stall-inv-qty {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding: 6px 9px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--text-primary) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--glass-line) 80%, transparent);
}
.stall-inv-qty small {
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary, var(--text-secondary));
}
.stall-inv-qty strong {
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.stall-inv-name {
    font-size: 13px;
    font-weight: 780;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stall-inv-sell {
    min-height: 36px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    gap: 6px !important;
}
.stall-inv-sell i { font-size: 11px; }

.stall-sell-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
}
.stall-sell-thumb {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    flex: none;
    background: color-mix(in srgb, var(--accent) 14%, var(--bg-secondary));
}
.stall-sell-thumb img { width: 32px; height: 32px; object-fit: contain; }
.stall-sell-meta { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.stall-sell-meta strong { font-size: 15px; font-weight: 780; }
.stall-sell-meta span { font-size: 12px; color: var(--text-secondary); font-weight: 650; }
.stall-sell-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.stall-sell-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, #e0b43a 28%, var(--glass-line));
    background:
        linear-gradient(135deg, color-mix(in srgb, #e0b43a 14%, transparent), color-mix(in srgb, var(--glass-bg) 55%, transparent));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.stall-sell-total > span {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}
.stall-sell-total strong {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.stall-sell-total .sikke-amt { gap: 0.35em; }
.stall-sell-total .sikke-amt img { width: 1.15em; height: 1.15em; }
.stall-sell-total.is-ready {
    border-color: color-mix(in srgb, #e0b43a 48%, var(--glass-line));
}
.stall-sell-total.is-ready strong { color: #f0d48a; }
html[data-theme="light"] .stall-sell-total.is-ready strong { color: #9a6b10; }
.stall-sell-form .modal-actions { margin-top: 4px; }
.stall-sell-pane[data-pane="main"] { padding-bottom: 2px; }
.stall-sell-form .field { margin: 0; }
.stall-qty-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.stall-qty-row input {
    flex: 1;
    min-width: 0;
    text-align: center;
}
.stall-qty-btn {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--glass-bg-strong) 80%, transparent);
    color: inherit;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.stall-qty-btn.is-all { width: auto; padding: 0 10px; font-size: 12px; }
.stall-sell-form .stall-pick-menu { z-index: 60; }

/* stall-item-picker */
.stall-pick {
    position: relative;
    width: 100%;
}
.stall-pick-btn {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--glass-bg-strong) 70%, transparent);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.stall-pick.is-open .stall-pick-btn {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border-color));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.stall-pick-btn > .fa-chevron-down {
    margin-left: auto;
    flex: none;
    font-size: 11px;
    color: var(--text-tertiary, var(--text-secondary));
    transition: transform .15s ease;
}
.stall-pick.is-open .stall-pick-btn > .fa-chevron-down { transform: rotate(180deg); }
.stall-pick-current {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.stall-pick-empty {
    color: var(--text-secondary);
    font-size: 13px;
}
.stall-pick-ico {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: none;
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-secondary));
    color: var(--text-secondary);
}
.stall-pick-ico img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}
.stall-pick-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.stall-pick-meta strong {
    font-size: 13px;
    font-weight: 750;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stall-pick-meta small {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}
.stall-pick-menu {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    max-height: min(280px, 46vh);
    overflow: auto;
    padding: 6px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, #fff 18%, var(--border-color));
    background: color-mix(in srgb, var(--glass-bg-strong) 72%, transparent);
    box-shadow: 0 16px 36px rgba(6, 10, 18, 0.38);
    backdrop-filter: blur(22px) saturate(175%);
    -webkit-backdrop-filter: blur(22px) saturate(175%);
    -webkit-overflow-scrolling: touch;
}
html[data-theme="dark"] .stall-pick-menu {
    border-color: color-mix(in srgb, #e8f2ff 22%, transparent);
    background: color-mix(in srgb, rgba(18, 24, 38, 0.82) 70%, transparent);
}
html[data-theme="light"] .stall-pick-menu {
    background: color-mix(in srgb, #ffffff 78%, transparent);
    box-shadow: 0 16px 32px rgba(20, 28, 40, 0.16);
}
.stall-pick-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.stall-pick-option:hover,
.stall-pick-option:focus-visible {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    outline: none;
}
.stall-pick-option.is-on {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.stall-pick-none {
    margin: 0;
    padding: 12px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 12px;
}

/* caravan-trade */
.cv-page {
    padding: 0 0 calc(92px + env(safe-area-inset-bottom, 0px));
    max-width: 720px;
    margin: 0 auto;
}

.cv-top {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin: 0 0 12px;
    border: 1px solid color-mix(in srgb, #b0894a 28%, var(--border-color));
    background: #2a2118;
    min-height: 148px;
}
.cv-top-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(.92) contrast(1.02);
}
.cv-top-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(18, 14, 10, .18) 0%, rgba(18, 14, 10, .55) 55%, rgba(18, 14, 10, .78) 100%),
        radial-gradient(120% 80% at 0% 0%, rgba(196, 165, 116, .22), transparent 55%);
    pointer-events: none;
}
.cv-top-copy {
    position: relative;
    z-index: 1;
    padding: 12px 12px 10px;
    display: grid;
    gap: 10px;
}
.cv-top-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.cv-top-row .back-btn {
    color: #f4e7c8;
    background: color-mix(in srgb, #1a140f 45%, transparent);
    border: 1px solid color-mix(in srgb, #f4e7c8 22%, transparent);
    border-radius: 12px;
    padding: 8px 10px;
    backdrop-filter: blur(8px);
}
.cv-top-text { min-width: 0; flex: 1; }
.cv-top-text h1 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.15;
    color: #f7efe0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.cv-top-text p {
    margin: 4px 0 0;
    font-size: .84rem;
    color: color-mix(in srgb, #f7efe0 78%, transparent);
}

.cv-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px;
    margin: 0 -2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.cv-tabs::-webkit-scrollbar { display: none; }
.cv-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #f4e7c8 18%, transparent);
    background: color-mix(in srgb, #1a140f 42%, transparent);
    color: color-mix(in srgb, #f7efe0 82%, transparent);
    font-size: .76rem;
    backdrop-filter: blur(8px);
}
.cv-tab.is-on {
    color: #1f1710;
    background: linear-gradient(180deg, #e5c992, #c4a574);
    border-color: color-mix(in srgb, #f4e7c8 40%, #b0894a);
    font-weight: 650;
}
.cv-tab i { font-size: .82rem; opacity: .95; }

.cv-body { display: grid; gap: 12px; }

.cv-status {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    background:
        linear-gradient(145deg, color-mix(in srgb, #b0894a 12%, var(--bg-elevated)), var(--bg-elevated));
    box-shadow: 0 8px 24px color-mix(in srgb, #000 8%, transparent);
}
.cv-status-ava {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, #b0894a 35%, var(--border-color));
    background: color-mix(in srgb, #c4a574 18%, var(--bg-secondary));
}
.cv-status-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-status-main { min-width: 0; }
.cv-status-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.cv-name { margin: 0; font-size: 1.05rem; }
.cv-badge {
    flex: none;
    font-size: .7rem;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #b0894a 40%, var(--border-color));
    background: color-mix(in srgb, #b0894a 14%, var(--bg-secondary));
    color: var(--text-primary);
}
.cv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cv-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-primary) 40%, transparent);
    font-size: .72rem;
    color: var(--text-secondary);
}
.cv-chip strong { color: var(--text-primary); font-weight: 650; }
.cv-chip i { color: #b0894a; font-size: .7rem; }
.cv-chip.is-travel { border-color: color-mix(in srgb, #d4a574 45%, var(--border-color)); color: #d4a574; }
.cv-chip.is-dock { border-color: color-mix(in srgb, #7eb8a0 45%, var(--border-color)); color: #7eb8a0; }

.cv-tripbar {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
}
.cv-tripbar-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: .8rem;
    margin-bottom: 6px;
}
.cv-progress {
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-secondary) 70%, #000);
    overflow: hidden;
}
.cv-progress i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #8a6a3d, #e0c48a);
}

.cv-panel {
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
}
.cv-lead { margin: 0 0 12px; color: var(--text-secondary); font-size: .9rem; line-height: 1.4; }

.cv-quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.cv-quick button {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    color: var(--text-primary);
    font-size: .86rem;
    transition: transform .12s ease, border-color .12s ease;
}
.cv-quick button:active { transform: scale(.98); }
.cv-quick i {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, #b0894a 16%, var(--bg-elevated));
    color: #b0894a;
}

.cv-empty { text-align: center; padding: 4px 2px 2px; }
.cv-empty-card {
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    margin-bottom: 12px;
}
.cv-empty-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}
.cv-empty-copy { padding: 14px 14px 4px; }
.cv-empty-copy h2 { margin: 0 0 6px; font-size: 1.15rem; }
.cv-empty-copy p { margin: 0 0 4px; color: var(--text-secondary); font-size: .9rem; line-height: 1.4; }
.cv-reqs {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: grid;
    gap: 8px;
    text-align: left;
}
.cv-req {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.cv-req img { width: 34px; height: 34px; object-fit: contain; }
.cv-req.is-ok { border-color: color-mix(in srgb, var(--positive) 42%, var(--border-color)); }
.cv-req.is-short { border-color: color-mix(in srgb, #c45c5c 42%, var(--border-color)); }
.cv-actions {
    display: grid;
    gap: 8px;
}

.cv-camel-card {
    display: grid;
    gap: 14px;
}
@media (min-width: 560px) {
    .cv-camel-card { grid-template-columns: 150px 1fr; align-items: start; }
}
.cv-camel-photo {
    width: 100%;
    max-width: 180px;
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, #b0894a 30%, var(--border-color));
    background: color-mix(in srgb, #c4a574 12%, var(--bg-secondary));
    aspect-ratio: 1;
}
.cv-camel-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-camel-card h3 { margin: 0 0 6px; }
.cv-camel-card p { margin: 0 0 10px; color: var(--text-secondary); font-size: .88rem; line-height: 1.4; }
.cv-camel-card ul {
    margin: 0 0 12px;
    padding: 0 0 0 16px;
    color: var(--text-secondary);
    font-size: .86rem;
}
.cv-buy-row { display: grid; gap: 8px; }

.cv-capline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: .9rem;
}
.cv-capmeter {
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
    overflow: hidden;
    margin: -2px 0 12px;
}
.cv-capmeter i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #8a6a3d, #d4b07a);
}
.cv-h { margin: 14px 0 8px; font-size: .95rem; }
.cv-list { display: grid; gap: 8px; }
.cv-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.cv-item img { width: 44px; height: 44px; object-fit: contain; }
.cv-item-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.cv-qty {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.cv-qty input {
    width: 56px;
    text-align: center;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    color: var(--text-primary);
    padding: 6px;
}
.cv-qty button[data-qty] {
    min-width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.cv-map-wrap { display: grid; gap: 10px; }
/* map.jpg = 1600×1000 (16:10). Never override height with min-height — it breaks pin %. */
.cv-map,
.cv-map.is-wide {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    min-height: 0;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, #b0894a 28%, var(--border-color));
    background: #cbb892;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
.cv-map-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
    opacity: .98;
}
/* Anchor = mark center at (x,y). Label hangs below and does not shift the point. */
.cv-city {
    position: absolute;
    width: 0;
    height: 0;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    z-index: 2;
    color: #2b2118;
    font-size: .62rem;
    font-weight: 700;
    overflow: visible;
    cursor: pointer;
}
.cv-city-mark {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, #f4e7c8 90%, #fff);
    border: 2px solid #8a6a3d;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
}
.cv-city-mark i {
    font-size: .72rem;
    line-height: 1;
}
.cv-city-name {
    position: absolute;
    left: 0;
    top: 16px;
    transform: translateX(-50%);
    padding: 2px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, #f7efe0 92%, transparent);
    border: 1px solid color-mix(in srgb, #8a6a3d 35%, transparent);
    line-height: 1.2;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}
.cv-city.is-here .cv-city-mark {
    background: linear-gradient(180deg, #e5c992, #c4a574);
    color: #1f1710;
}
.cv-city.is-locked .cv-city-mark {
    background: #6b6358;
    color: #ddd;
    border-color: #4a453e;
}
.cv-city.is-far { opacity: .58; }
.cv-city.is-sel .cv-city-mark {
    box-shadow: 0 0 0 3px color-mix(in srgb, #b0894a 55%, transparent), 0 3px 10px rgba(0, 0, 0, .22);
}
.cv-city-detail {
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.cv-city-detail-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.cv-city-detail h3 { margin: 0; }
.cv-region {
    flex: none;
    font-size: .7rem;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #b0894a 35%, var(--border-color));
    background: color-mix(in srgb, #b0894a 12%, var(--bg-elevated));
    color: var(--text-secondary);
}
.cv-city-detail p { margin: 0 0 6px; font-size: .86rem; }
.cv-city-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.cv-ups { display: grid; gap: 10px; }
.cv-up {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.cv-up header {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.cv-up h3 { margin: 0; font-size: .95rem; }
.cv-up p {
    margin: 0 0 8px;
    font-size: .84rem;
    color: var(--text-secondary);
}
.cv-up-cost {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: grid;
    gap: 6px;
}
.cv-up-cost li {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 8px;
    align-items: center;
    font-size: .82rem;
}
.cv-up-cost img { width: 22px; height: 22px; object-fit: contain; }

.cv-hist-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.cv-hist {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    font-size: .84rem;
}
.cv-hist span {
    display: block;
    color: var(--text-secondary);
    font-size: .76rem;
}
.cv-hist-right { text-align: right; }
.cv-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}
.cv-pager button {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.cv-muted { color: var(--text-secondary); font-size: .86rem; }
.cv-warn { color: #c45c5c; font-size: .86rem; margin: 8px 0; }
.cv-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
    font-size: .88rem;
}
.cv-meta li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.cv-trade-modal { max-height: min(78vh, 640px); overflow: auto; }
.cv-trade-modal .modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.cv-trade-modal .modal-head h2 { margin: 0; font-size: 1.05rem; }
.cv-trade-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 10px;
}
.cv-trade-tabs button {
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
}
.cv-trade-tabs button.is-on {
    color: var(--text-primary);
    border-color: color-mix(in srgb, #b0894a 45%, var(--border-color));
    background: color-mix(in srgb, #b0894a 16%, var(--bg-elevated));
}

html[data-theme="light"] .cv-top {
    border-color: color-mix(in srgb, #b0894a 25%, #d9c9a8);
}
html[data-theme="light"] .cv-status {
    background: linear-gradient(145deg, #f4ebda, #faf6ee);
}
html[data-theme="light"] .cv-map { background: #e8d7b0; }
html[data-theme="light"] .cv-city { color: #3a2f22; }

.home-tools-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 420px) {
    .home-tools-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.home-caravan {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 10px;
}

/* quick-menu-fab-force */
@media (max-width: 959px) {
    .tabbar {
        overflow: visible !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        padding: 28px 6px 6px !important;
        padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
        isolation: isolate;
    }
    .tabbar::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 22px;
        z-index: 0;
        border-radius: inherit;
        background: color-mix(in srgb, var(--glass-bg-strong) 74%, transparent);
        box-shadow: 0 14px 32px rgba(62, 44, 18, 0.14);
        backdrop-filter: blur(22px) saturate(165%);
        -webkit-backdrop-filter: blur(22px) saturate(165%);
        pointer-events: none;
        border: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
    }
    html[data-theme="dark"] .tabbar::before {
        background: color-mix(in srgb, var(--glass-bg) 78%, transparent);
        box-shadow: 0 16px 34px rgba(4, 8, 16, 0.42);
    }
    .tabbar > * { position: relative; z-index: 1; }
    .tab-main {
        flex: 5 1 0 !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        align-items: end !important;
        overflow: visible !important;
        min-height: 54px !important;
    }
    .tab-glide {
        width: calc(100% / 5) !important;
        top: auto !important;
        bottom: 4px !important;
        height: 46px !important;
        z-index: 0 !important;
        border-radius: 16px !important;
    }
    .tab-main > .tab {
        min-height: 54px !important;
        justify-content: flex-end !important;
        gap: 2px !important;
        padding: 0 0 4px !important;
        overflow: visible !important;
    }
    /* normal tabs: keep icon pill from looking like a circle */
    .tab-main > .tab:not(.is-center) .tab-fab,
    .tab-main > .tab:not(.is-center).is-active .tab-fab {
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        color: inherit !important;
    }
    .tab.is-center {
        position: relative !important;
        z-index: 5 !important;
        overflow: visible !important;
        justify-content: flex-end !important;
        min-height: 54px !important;
    }
    .tab.is-center .tab-fab,
    .tab.is-center.is-active .tab-fab {
        position: absolute !important;
        left: 50% !important;
        bottom: 30px !important;
        top: auto !important;
        transform: translateX(-50%) !important;
        width: 54px !important;
        height: 54px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 50% !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        display: grid !important;
        place-items: center !important;
    }
    .tab.is-center .tab-fab .icon,
    .tab.is-center .icon {
        width: 24px !important;
        height: 24px !important;
    }
    .tab.is-center > span:last-child {
        position: relative;
        z-index: 1;
        font-size: 10px !important;
        font-weight: 750 !important;
        line-height: 1.1 !important;
        margin-top: 0 !important;
        max-width: none !important;
        overflow: visible !important;
    }
    html[data-theme="dark"] .tab.is-center .tab-fab,
    html[data-theme="dark"] .tab.is-center.is-active .tab-fab {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}

/* home-staff-v1 */
.home-staff {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 72px;
    padding: 10px 8px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--accent) 12%, var(--glass-bg-strong));
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
}
.home-staff .icon { width: 28px; height: 28px; color: var(--accent-text); }
.home-staff span {
    font-size: 11px;
    font-weight: 750;
    text-align: center;
    line-height: 1.2;
}
.home-staff:active { transform: translateY(1px); }

/* chat-ban-v1 */
.chat-ban-screen {
    min-height: min(70vh, 560px);
    display: grid;
    place-items: center;
    padding: 28px 16px 40px;
}
.chat-ban-card {
    width: min(100%, 440px);
    padding: 34px 28px 30px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: color-mix(in srgb, var(--glass-bg) 90%, transparent);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    text-align: center;
    box-shadow: 0 12px 36px rgb(0 0 0 / 16%);
}
.chat-ban-card .chat-ban-ico {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: color-mix(in srgb, var(--danger, #e5534b) 16%, transparent);
    color: var(--danger, #e5534b);
    font-size: 28px;
}
.chat-ban-card h2 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 800;
}
.chat-ban-card p {
    margin: 0 0 6px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}
.chat-ban-card .chat-ban-count {
    margin-top: 16px;
    font-size: 18px;
    font-weight: 800;
    color: var(--danger, #e5534b);
    font-variant-numeric: tabular-nums;
}
.chat-ban-card .chat-ban-count small {
    display: block;
    margin-bottom: 4px;
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 650;
}
body.is-chat-banned #world-dock { display: none !important; }
.gazete-ban {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 8px 0 14px;
    padding: 22px 16px;
    border: 1px solid color-mix(in srgb, var(--danger, #e5534b) 28%, var(--border-color));
    border-radius: 16px;
    background: color-mix(in srgb, var(--danger, #e5534b) 8%, var(--glass-bg));
    text-align: center;
}
.gazete-ban i.fa-ban { font-size: 26px; color: var(--danger, #e5534b); margin-bottom: 4px; }
.gazete-ban strong { font-size: 15px; }
.gazete-ban p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.gazete-ban .chat-ban-count {
    margin-top: 8px;
    font-size: 15px;
    font-weight: 800;
    color: var(--danger, #e5534b);
    font-variant-numeric: tabular-nums;
}
.gazete-ban .chat-ban-count small {
    display: block;
    margin-bottom: 2px;
    color: var(--text-tertiary);
    font-size: 11.5px;
    font-weight: 650;
}

/* admin-hit-avatar */
.admin-hit {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.admin-hit .avatar.sm { width: 44px; height: 44px; border-radius: 14px; flex: none; }
.admin-hit-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-hit-body .caption { margin: 0; }
.admin-hit.is-on {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));
}

/* desktop-quick-img-size */
@media (min-width: 960px) {
    .tab.is-center .tab-fab.tab-fab-media {
        width: 32px;
        height: 32px;
        overflow: visible;
    }
    .tab-quick-img {
        width: 32px;
        height: 32px;
        object-fit: contain;
        object-position: center;
        border-radius: 0;
    }
}

.tab-png-img,
.tab-yakut-img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
    object-position: center;
}
@media (max-width: 959px) {
    .tab-png-img,
    .tab-yakut-img { width: 22px; height: 22px; }
}

/* admin-tools-v1 */
.admin-tool-panel { margin-bottom: 14px; }
.admin-tool-stats { margin-bottom: 14px; }
@media (min-width: 720px) {
    .admin-tool-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.admin-tool-search { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; margin-bottom: 12px; }
.admin-tool-search .field { margin: 0; }
.admin-sort { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.admin-sort-btn {
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 650;
}
.admin-sort-btn.is-on {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border-color));
    color: var(--accent-text);
}
.admin-table-wrap { overflow-x: auto; margin: 0 -4px; }
.admin-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.admin-table th {
    padding: 8px 10px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.admin-table td {
    padding: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    font-size: 13px;
    vertical-align: middle;
}
.admin-table tr[data-go-player] { cursor: pointer; }
.admin-table tr[data-go-player]:hover td {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.admin-person {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    padding: 0;
    cursor: pointer;
}
.admin-person.naked { width: auto; }
.admin-person span { display: grid; gap: 1px; min-width: 0; }
.admin-person strong { font-size: 13px; line-height: 1.2; }
.admin-person small { color: var(--text-tertiary); font-size: 11px; }
.admin-multi-card {
    margin-bottom: 10px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}
.admin-multi-card.is-warn {
    border-color: color-mix(in srgb, #f6ad55 40%, var(--border-color));
    background: color-mix(in srgb, #f6ad55 8%, transparent);
}
.admin-multi-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 10px;
}
.admin-multi-top strong { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.admin-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
}
.admin-badge.is-warn {
    background: color-mix(in srgb, #f6ad55 20%, transparent);
    color: #f6ad55;
}
.admin-chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: min(100%, 180px);
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--glass-bg);
    color: inherit;
    text-align: left;
}
.admin-chip.is-away { opacity: .72; }
.admin-chip span { display: grid; gap: 1px; min-width: 0; }
.admin-chip strong { font-size: 12.5px; }
.admin-chip small { color: var(--text-tertiary); font-size: 10.5px; }
.admin-msg-card {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}
.admin-msg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.admin-msg-body {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-primary);
    word-break: break-word;
}
@media (max-width: 560px) {
    .admin-tool-search { grid-template-columns: 1fr; }
}

/* bank-stats-ergo */
.bank-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.bank-stats .bank-stat:last-child { grid-column: auto; }
.bank-stat {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--glass-line);
    background: var(--glass-bg);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.bank-stat-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin: 0;
    border-radius: 11px;
    background: var(--gold-soft);
    color: var(--accent-text);
    font-size: 13px;
}
.bank-stat-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.bank-stat-label {
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .01em;
    color: var(--text-secondary);
    line-height: 1.2;
}
.bank-stat-value {
    font-size: 15px;
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.15;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bank-stat-value .sikke-amt { gap: 5px; }
.bank-stat-value .sikke-amt img { width: .9em; height: .9em; }
.bank-stat-value.pos .sikke-amt { color: var(--positive); }
.bank-stat-value.neg .sikke-amt { color: var(--negative); }
@media (max-width: 380px) {
    .bank-stats { gap: 6px; }
    .bank-stat { padding: 8px 10px; gap: 8px; }
    .bank-stat-ico { flex-basis: 30px; width: 30px; height: 30px; border-radius: 10px; font-size: 12px; }
    .bank-stat-value { font-size: 14px; }
}

/* bank-amount-mobile */
@media (max-width: 959px) {
    .bank-amount { gap: 4px; }
    .bank-amount-label { font-size: 12px; }
    .bank-amount-box {
        min-height: 44px;
        padding: 0 12px;
        gap: 8px;
        border-radius: 12px;
    }
    .bank-amount-box img { width: 20px; height: 20px; }
    .bank-amount-box input {
        height: 42px;
        font-size: 18px;
    }
}

/* tabbar-fit-v3 */
@media (max-width: 959px) {
    .tabbar {
        padding: 28px 8px 6px !important;
        padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
    }
    .tabbar::before {
        top: 22px !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 28px !important;
    }
    .tab-main {
        min-height: 54px !important;
        align-items: stretch !important;
    }
    .tab-glide {
        width: calc(100% / 5) !important;
        top: 4px !important;
        bottom: 4px !important;
        height: auto !important;
        border-radius: 16px !important;
    }
    .tab-main > .tab {
        min-height: 54px !important;
        justify-content: center !important;
        gap: 3px !important;
        padding: 4px 2px !important;
    }
    .tab.is-center {
        min-height: 54px !important;
        justify-content: flex-end !important;
        padding: 0 2px 4px !important;
    }
    .tab.is-center .tab-fab,
    .tab.is-center.is-active .tab-fab {
        bottom: 30px !important;
    }
    html[data-theme="dark"] .tab-glide {
        background: linear-gradient(180deg, rgba(142, 180, 232, .22), rgba(142, 180, 232, .10));
        border-color: rgba(142, 180, 232, .34);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .08),
            0 6px 14px rgba(0, 0, 0, .28);
    }
    html[data-theme="dark"] .tab.is-active,
    html[data-theme="dark"] .tab.is-center.is-active {
        color: #eaf2ff;
    }
    html[data-theme="dark"] .tab.is-active .icon {
        color: #d7e7fb;
    }
}

/* tab-png-sikke */
.tab-png-sikke { width: 28px; height: 28px; }
@media (max-width: 959px) {
    .tab-main > .tab:not(.is-center) .tab-fab:has(.tab-png-sikke),
    .tab-main > .tab:not(.is-center).is-active .tab-fab:has(.tab-png-sikke) {
        width: 32px !important;
        height: 32px !important;
    }
    .tab-main > .tab:not(.is-center) .tab-png-sikke {
        width: 32px !important;
        height: 32px !important;
        max-width: none !important;
        max-height: none !important;
    }
}

/* tab-png-yakut */
.tab-png-yakut { width: 28px; height: 28px; }
@media (max-width: 959px) {
    .tab-main > .tab:not(.is-center) .tab-fab:has(.tab-png-yakut),
    .tab-main > .tab:not(.is-center).is-active .tab-fab:has(.tab-png-yakut) {
        width: 30px !important;
        height: 30px !important;
    }
    .tab-main > .tab:not(.is-center) .tab-png-yakut {
        width: 30px !important;
        height: 30px !important;
        max-width: none !important;
        max-height: none !important;
    }
}

/* tab-png-isler */
.tab-png-isler { width: 28px; height: 28px; }
@media (max-width: 959px) {
    .tab-main > .tab:not(.is-center) .tab-fab:has(.tab-png-isler),
    .tab-main > .tab:not(.is-center).is-active .tab-fab:has(.tab-png-isler) {
        width: 30px !important;
        height: 30px !important;
    }
    .tab-main > .tab:not(.is-center) .tab-png-isler {
        width: 30px !important;
        height: 30px !important;
        max-width: none !important;
        max-height: none !important;
    }
}

/* tab-icon-only-v1 */
.tab-png-anasayfa { width: 28px; height: 28px; }
@media (max-width: 959px) {
    .tab-main > .tab.tab-icon-only {
        gap: 0 !important;
        padding: 0 !important;
        justify-content: center !important;
    }
    .tab-main > .tab.tab-icon-only.is-center {
        justify-content: flex-end !important;
        padding-bottom: 4px !important;
    }
    .tab-main > .tab:not(.is-center) .tab-fab:has(.tab-png-anasayfa),
    .tab-main > .tab:not(.is-center).is-active .tab-fab:has(.tab-png-anasayfa) {
        width: 32px !important;
        height: 32px !important;
    }
    .tab-main > .tab:not(.is-center) .tab-png-anasayfa {
        width: 32px !important;
        height: 32px !important;
        max-width: none !important;
        max-height: none !important;
    }
}
@media (min-width: 960px) {
    /* desktop dock still needs labels — restore text via aria isn't enough; keep icon-only only on mobile */
    .tab.tab-icon-only::after {
        content: attr(aria-label);
        font-size: 12px;
        font-weight: 650;
        line-height: 1.15;
        text-align: center;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* tab-side-img-fix */
.tab-side-img {
    display: block;
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
    object-fit: contain;
    object-position: center;
}
.tab-fab.tab-fab-media:has(.tab-side-img) {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.home-tool img,
.home-settings img,
.home-help img,
.home-hunt-ico,
.home-caravan,
.home-merchant,
.home-tax,
.home-health,
.home-friends,
.home-leaders,
.home-settings-img,
.home-help-img,
.home-online,
.home-gazete {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}
.pin-ico img,
.farm-pin-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}

/* home-tools-4-always */
.home-tools,
.home-tools.home-tools-4,
.home-tools.home-tools-5 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 720px) {
    .home-tools,
    .home-tools.home-tools-4,
    .home-tools.home-tools-5 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* home-hover */
.home-tool,
.home-settings,
.home-help,
.home-logout,
.home-stats-btn,
.home-staff,
.home-action,
.home-hunt,
.home-gz-all,
.pin,
.tab,
.topbar .icon-btn,
.topbar .brand-lockup,
.topbar .city-brand,
.topbar .topbar-user,
.topbar .city-player,
.resbar .res-chip,
.res-strip .res-chip,
.coop-tabs button,
.coop-size,
.segments button,
.pf-tab,
.fr-tab,
.mo-tab,
.mod-tab,
.tax-tab,
.inbox-tab,
.leaders-tab,
.gazete-seg-btn,
.stall-seg-btn,
.stall-subseg-btn,
.pf-btn,
.pf-online-btn,
.friend-card,
.friend-more {
  transition:
    transform 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    color 0.16s ease,
    filter 0.16s ease;
}
.coop-tabs button i,
.pf-tab i,
.fr-tab i,
.mo-tab i,
.mod-tab i,
.tax-tab i,
.inbox-tab i,
.leaders-tab i,
.gazete-seg-btn i,
.stall-seg-btn i,
.stall-subseg-btn i,
.segments button i,
.pf-btn i,
.pf-online-btn i {
  transition: transform 0.18s ease, color 0.16s ease, filter 0.16s ease;
}
.tab .tab-fab,
.tab .tab-side-img,
.tab .icon,
.tab-fab-media img,
.topbar .icon-btn .icon,
.topbar .brand-logo,
.res-chip img,
.res-chip .icon,
.friend-face,
.friend-face img,
.home-tool img,
.home-settings img,
.home-help img,
.home-stats-btn i,
.home-staff .icon,
.home-action .icon,
.home-action img,
.pin-ico,
.pin-ico img,
.home-hunt-bg,
.home-hunt-chev {
  transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .home-tool:hover,
  .home-settings:hover,
  .home-help:hover,
  .home-stats-btn:hover,
  .home-staff:hover,
  .home-gz-all:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border-color));
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
      color-mix(in srgb, var(--accent) 10%, var(--bg-elevated, var(--glass-bg)));
    box-shadow:
      0 8px 18px color-mix(in srgb, #000 14%, transparent),
      inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
  }

  .home-tool:hover img,
  .home-settings:hover img,
  .home-help:hover img {
    transform: translateY(-1px) scale(1.06);
    filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--accent) 28%, transparent));
  }

  .home-stats-btn:hover i,
  .home-staff:hover .icon {
    transform: scale(1.08);
    color: var(--accent-text);
  }

  .home-logout:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, #c45c5c 45%, var(--border-color));
    background:
      linear-gradient(180deg, color-mix(in srgb, #c45c5c 14%, transparent), transparent 70%),
      color-mix(in srgb, #c45c5c 8%, var(--bg-elevated, var(--glass-bg)));
    box-shadow: 0 8px 18px color-mix(in srgb, #c45c5c 16%, transparent);
    color: #d96565;
  }
  html[data-theme="dark"] .home-logout:hover {
    color: #ff8f8f;
    border-color: color-mix(in srgb, #fc8181 40%, var(--border-color));
  }

  .home-action:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 48%, var(--glass-line));
    background: color-mix(in srgb, var(--accent) 36%, color-mix(in srgb, var(--glass-bg-strong) 78%, transparent));
    box-shadow:
      0 10px 22px color-mix(in srgb, var(--accent) 16%, transparent),
      inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
  }
  .home-action:hover .icon,
  .home-action:hover img {
    transform: scale(1.08);
  }

  .home-hunt:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px color-mix(in srgb, #000 28%, transparent);
  }
  .home-hunt:hover .home-hunt-bg {
    transform: scale(1.08);
  }
  .home-hunt:hover .home-hunt-chev {
    transform: translateX(3px);
    opacity: 1;
  }

  .pin:hover {
    transform: translate(-50%, calc(-50% - 3px)) scale(1.04);
    border-color: color-mix(in srgb, var(--accent) 45%, #fff);
    background: color-mix(in srgb, var(--glass-bg-strong) 42%, transparent);
    box-shadow: 0 10px 22px color-mix(in srgb, #000 22%, transparent);
  }
  .pin:hover .pin-ico {
    transform: scale(1.06);
    background: color-mix(in srgb, var(--accent) 32%, transparent);
  }
  .pin:hover .pin-ico img,
  .pin:hover .farm-pin-img {
    transform: scale(1.06);
  }
  .pin:hover .chev {
    opacity: 1;
    transform: translateX(1px);
  }

  .topbar .icon-btn:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border-color, transparent));
    background: color-mix(in srgb, var(--accent) 16%, var(--glass-bg-strong, var(--glass-bg)));
    box-shadow: 0 6px 14px color-mix(in srgb, #000 16%, transparent);
    color: var(--accent-text, var(--text-primary));
  }
  .topbar .icon-btn:hover .icon {
    transform: scale(1.08);
  }
  .topbar .icon-btn.is-active:hover {
    background: color-mix(in srgb, var(--accent) 28%, var(--glass-bg-strong, var(--glass-bg)));
    filter: brightness(1.05);
  }

  .topbar .brand-lockup:hover,
  .topbar .city-brand:hover {
    transform: translateY(-1px);
    filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--accent) 24%, transparent));
  }
  .topbar .brand-lockup:hover .brand-logo,
  .topbar .city-brand:hover .brand-logo {
    transform: scale(1.04);
  }
  @media (max-width: 959px) {
    .topbar .brand-lockup:hover {
      transform: none;
      filter: none;
    }
    .topbar .city-brand:hover {
      transform: translate(-50%, -50%);
      filter: none;
    }
    .topbar .brand-lockup:hover .brand-logo,
    .topbar .city-brand:hover .brand-logo {
      transform: none;
    }
  }

  .topbar .topbar-user:hover,
  .topbar .city-player:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--glass-line, transparent));
    background: color-mix(in srgb, var(--accent) 10%, var(--glass-bg, transparent));
  }

  .resbar .res-chip:hover,
  .res-strip .res-chip:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 36%, var(--border-color, transparent));
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated, var(--glass-bg)));
    box-shadow: 0 4px 12px color-mix(in srgb, #000 12%, transparent);
  }
  .resbar .res-chip:hover img,
  .res-strip .res-chip:hover img,
  .resbar .res-chip:hover .icon,
  .res-strip .res-chip:hover .icon {
    transform: scale(1.08);
  }

  /* Alt mobil navbar (fare ile) */
  @media (max-width: 959px) {
    .tabbar .tab:hover:not(.is-active):not(.is-center) {
      color: var(--text-primary);
    }
    .tabbar .tab:hover:not(.is-center) .tab-fab {
      transform: scale(1.08);
    }
    .tabbar .tab.is-center:hover .tab-fab {
      transform: scale(1.08);
      filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--accent) 28%, transparent));
    }
  }

  /* Masaüstü sol/sağ navbar */
  @media (min-width: 960px) {
    .tabbar .tab:hover:not(.is-active) {
      transform: translateY(-1px);
      color: var(--text-primary);
      background: color-mix(in srgb, var(--accent) 14%, transparent);
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent),
        0 6px 14px color-mix(in srgb, #000 12%, transparent);
    }

    .tabbar .tab.is-active:hover {
      transform: translateY(-1px);
      filter: brightness(1.06);
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 48%, transparent),
        0 8px 16px color-mix(in srgb, var(--accent) 18%, transparent);
    }

    html[data-theme="dark"] .tabbar .tab:hover:not(.is-active) {
      color: #e7f0ff;
      background: color-mix(in srgb, #8eb4e8 16%, transparent);
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #8eb4e8 30%, transparent),
        0 6px 14px color-mix(in srgb, #000 22%, transparent);
    }

    html[data-theme="dark"] .tabbar .tab.is-active:hover {
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #8eb4e8 60%, transparent),
        0 8px 18px color-mix(in srgb, #000 28%, transparent);
    }

    .tabbar .tab:hover .tab-fab,
    .tabbar .tab:hover .tab-side-img,
    .tabbar .tab:hover .icon {
      transform: scale(1.08);
    }

    .tabbar .tab:hover .tab-side-img {
      filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--accent) 30%, transparent));
    }

    .tabbar .tab[data-action="logout"]:hover {
      color: #d96565;
      background: color-mix(in srgb, #c45c5c 12%, transparent);
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #c45c5c 36%, transparent),
        0 6px 14px color-mix(in srgb, #c45c5c 14%, transparent);
    }
    html[data-theme="dark"] .tabbar .tab[data-action="logout"]:hover {
      color: #ff8f8f;
    }
  }

  /* Oyun içi segment / alt menü sekmeleri */
  .coop-tabs button:hover:not(.is-on),
  .pf-tab:hover:not(.is-on),
  .fr-tab:hover:not(.is-active):not(.is-on),
  .mo-tab:hover:not(.is-on),
  .mod-tab:hover:not(.is-on),
  .gazete-seg-btn:hover:not(.is-on),
  .stall-seg-btn:hover:not(.is-on),
  .stall-subseg-btn:hover:not(.is-on),
  .segments button:hover:not(.is-active),
  .coop-size:hover:not(.is-on) {
    transform: translateY(-1px);
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, #000 12%, transparent);
  }

  .coop-tabs button.is-on:hover,
  .pf-tab.is-on:hover,
  .fr-tab.is-active:hover,
  .fr-tab.is-on:hover,
  .mo-tab.is-on:hover,
  .mod-tab.is-on:hover,
  .gazete-seg-btn.is-on:hover,
  .stall-seg-btn.is-on:hover,
  .stall-subseg-btn.is-on:hover,
  .segments button.is-active:hover,
  .coop-size.is-on:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 18%, transparent);
  }

  .tax-tab:hover:not(.is-active),
  .inbox-tab:hover:not(.is-active),
  .leaders-tab:hover:not(.is-active) {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }
  .tax-tab.is-active:hover,
  .inbox-tab.is-active:hover,
  .leaders-tab.is-active:hover {
    filter: brightness(1.05);
  }

  .coop-tabs button:hover i,
  .pf-tab:hover i,
  .fr-tab:hover i,
  .mo-tab:hover i,
  .mod-tab:hover i,
  .tax-tab:hover i,
  .inbox-tab:hover i,
  .leaders-tab:hover i,
  .gazete-seg-btn:hover i,
  .stall-seg-btn:hover i,
  .stall-subseg-btn:hover i,
  .segments button:hover i {
    transform: scale(1.08);
  }

  /* Profil: arkadaş kartları + aksiyon butonları */
  .friend-card:hover {
    transform: translateY(-2px);
    color: var(--accent-text, var(--text-primary));
  }
  .friend-card:hover .friend-face {
    transform: scale(1.06);
    box-shadow:
      0 8px 16px color-mix(in srgb, #000 18%, transparent),
      0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
    filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--accent) 22%, transparent));
  }
  .friend-card:hover .friend-name {
    color: var(--text-primary);
  }

  .pf-btn:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--accent) 26%, transparent);
    border-color: color-mix(in srgb, var(--accent) 58%, transparent);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 16%, transparent);
  }
  .pf-btn:hover i {
    transform: scale(1.08);
  }

  .pf-online-btn:hover {
    transform: translateY(-1px);
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent) 36%, var(--glass-line));
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, #000 12%, transparent);
  }
  .pf-online-btn:hover i {
    transform: scale(1.08);
  }

  .friend-more:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 36%, var(--border-color, transparent));
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, #000 12%, transparent);
  }
}

/* home-gazete-strip */
.home-gz-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
}
.home-gz-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.home-gz-mark {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}
.home-gz-all {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-text, var(--text-primary));
    font-size: 12px;
    font-weight: 720;
    cursor: pointer;
}
.home-gz-all:hover {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.home-gz-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 4px;
    margin: 0 -2px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}
.home-gz-strip.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}
.home-gz-strip::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.home-gz-card {
    flex: 0 0 min(78vw, 260px);
    width: min(78vw, 260px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 168px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid var(--glass-line);
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%),
        var(--glass-bg-strong, var(--glass-bg));
    color: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 10px 22px color-mix(in srgb, #000 14%, transparent);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.home-gz-card:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--glass-line));
    transform: translateY(-1px);
}
.home-gz-top {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.home-gz-avatar {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    overflow: hidden;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent-text, var(--text-primary));
    font-size: 13px;
    font-weight: 750;
}
.home-gz-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-gz-who {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.home-gz-who strong {
    font-size: 13px;
    font-weight: 740;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-gz-who small {
    color: var(--text-secondary);
    font-size: 11px;
}
.home-gz-media {
    display: block;
    width: 100%;
    height: 96px;
    border-radius: 12px;
    overflow: hidden;
    background: color-mix(in srgb, #000 18%, transparent);
}
.home-gz-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-gz-text {
    margin: 0;
    flex: 1 1 auto;
    font-size: 13px;
    line-height: 1.35;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-gz-text.is-muted { color: var(--text-secondary); }
.home-gz-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 650;
}
.home-gz-like {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 8px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.home-gz-like i { font-size: 13px; }
.home-gz-like b { font-weight: 700; }
.home-gz-like.is-on,
.home-gz-like.is-on i {
    color: #e35d6a;
}
.home-gz-like:hover {
    background: color-mix(in srgb, #e35d6a 14%, transparent);
    color: #e35d6a;
}
.home-gz-comments {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.home-gz-comments i { font-size: 12px; }
.home-gz-empty {
    flex: 1 1 auto;
    min-width: 100%;
    padding: 22px 14px;
    border-radius: 16px;
    border: 1px dashed var(--glass-line);
    color: var(--text-secondary);
    text-align: center;
    font-size: 13px;
    font-weight: 650;
}
@media (hover: hover) and (pointer: fine) {
    .home-gz-card {
        transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    }
}

/* profile-username-copy */
.profile-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.profile-uid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--glass-line));
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent-text, var(--text-primary));
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.profile-username {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
    border-radius: 8px;
}
.profile-username h2 {
    margin: 0;
}
.profile-username:hover h2 {
    color: var(--accent-text, var(--text-primary));
}
.profile-username:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 3px;
}

/* error-state-center */
.error-state-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: min(58vh, 460px);
    padding: 28px 16px;
    box-sizing: border-box;
}
.error-state {
    width: min(100%, 420px);
    margin: 0 auto;
    text-align: center;
}
.error-mark {
    color: #e8a04a;
    background: color-mix(in srgb, #e8a04a 16%, var(--glass-bg));
    border-color: color-mix(in srgb, #e8a04a 35%, var(--border-color));
}
.error-mark i {
    font-size: 26px;
    line-height: 1;
}

/* caravan-modern-v1 */
.cv-page {
    padding: 0 0 calc(92px + env(safe-area-inset-bottom, 0px));
    max-width: 720px;
    margin: 0 auto;
}

.cv-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 4px;
    margin: 0;
    border: 1px solid var(--glass-line);
    border-radius: 14px;
    background: var(--glass-bg);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.cv-tabs::-webkit-scrollbar { display: none; width: 0; height: 0; }
.cv-tab {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 720;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.cv-tab i { font-size: 12px; }
.cv-tab.is-on {
    background: color-mix(in srgb, var(--accent) 22%, var(--glass-bg));
    color: var(--accent-text, var(--text-primary));
    box-shadow: 0 2px 8px color-mix(in srgb, #000 12%, transparent);
}
@media (hover: hover) and (pointer: fine) {
    .cv-tab:hover:not(.is-on) {
        color: var(--text-primary);
        background: color-mix(in srgb, var(--accent) 12%, transparent);
    }
    .cv-tab.is-on:hover {
        filter: brightness(1.05);
    }
}

.cv-body { display: grid; gap: 12px; }

.cv-card,
.cv-panel,
.cv-status {
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--glass-line);
    background: var(--glass-bg);
    box-shadow: 0 10px 22px color-mix(in srgb, #000 10%, transparent);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.cv-status {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 48%),
        var(--glass-bg);
}
.cv-status-ava {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--glass-line));
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.cv-status-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-name { margin: 0; font-size: 1.05rem; font-weight: 750; }
.cv-badge {
    flex: none;
    font-size: 11px;
    font-weight: 720;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--glass-line));
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent-text, var(--text-primary));
}
.cv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
    font-size: 11px;
    color: var(--text-secondary);
}
.cv-chip strong { color: var(--text-primary); font-weight: 700; }
.cv-chip i { color: var(--accent-text, var(--accent)); font-size: 11px; }
.cv-chip.is-travel { border-color: color-mix(in srgb, #d4a574 45%, var(--glass-line)); color: #d4a574; }
.cv-chip.is-dock { border-color: color-mix(in srgb, var(--positive) 45%, var(--glass-line)); color: var(--positive); }

.cv-panel { padding: 14px; }
.cv-lead { margin: 0 0 12px; color: var(--text-secondary); font-size: 13px; line-height: 1.4; }

.cv-card-photo {
    position: relative;
    aspect-ratio: 16 / 10;
    background: color-mix(in srgb, #000 22%, transparent);
}
.cv-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cv-card-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.cv-card-body h2,
.cv-card-body h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.25;
}
.cv-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.cv-hero-card .cv-card-body { padding: 14px; }
.cv-hero-card .cv-card-body h2 { font-size: 18px; }

.cv-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
}
.cv-facts li {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 12px;
    color: var(--text-secondary);
}
.cv-facts i {
    width: 14px;
    text-align: center;
    color: var(--accent-text, var(--accent));
}

.cv-quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.cv-quick-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--glass-line);
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%),
        color-mix(in srgb, var(--glass-bg-strong, var(--glass-bg)) 88%, transparent);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.cv-quick-card strong {
    flex: 1;
    font-size: 13px;
    font-weight: 720;
}
.cv-quick-card > .fa-chevron-right {
    font-size: 11px;
    color: var(--text-secondary);
}
.cv-quick-ico {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent-text, var(--accent));
}
@media (hover: hover) and (pointer: fine) {
    .cv-quick-card:hover {
        transform: translateY(-1px);
        border-color: color-mix(in srgb, var(--accent) 40%, var(--glass-line));
        box-shadow: 0 8px 16px color-mix(in srgb, #000 12%, transparent);
    }
}

.cv-go {
    width: 100%;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    background: transparent;
    transition: transform 0.14s ease, background 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}
.cv-go i { font-size: 12px; }
.cv-go.is-start {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border-color: color-mix(in srgb, var(--accent) 42%, transparent);
    color: var(--accent-text);
    box-shadow: none;
}
.cv-go.is-secondary {
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
    border-color: var(--glass-line);
    color: var(--text-primary);
}
.cv-go:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
    .cv-go.is-start:hover:not(:disabled) {
        background: color-mix(in srgb, var(--accent) 32%, transparent);
        transform: translateY(-1px);
    }
    .cv-go.is-secondary:hover:not(:disabled) {
        background: color-mix(in srgb, var(--text-primary) 9%, transparent);
        transform: translateY(-1px);
    }
}

.cv-actions {
    display: grid;
    gap: 8px;
}

.cv-reqs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.cv-req {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}
.cv-req img { width: 34px; height: 34px; object-fit: contain; }
.cv-req.is-ok { border-color: color-mix(in srgb, var(--positive) 42%, var(--glass-line)); }
.cv-req.is-short { border-color: color-mix(in srgb, #c45c5c 42%, var(--glass-line)); }

.cv-camel-card {
    display: grid;
    gap: 0;
}
@media (min-width: 560px) {
    .cv-camel-card {
        grid-template-columns: 160px 1fr;
        align-items: stretch;
    }
    .cv-camel-card .cv-card-photo {
        aspect-ratio: auto;
        min-height: 100%;
    }
}
.cv-camel-photo {
    aspect-ratio: 1;
    max-width: none;
    margin: 0;
    border-radius: 0;
    border: 0;
}

.cv-ups {
    display: grid;
    gap: 10px;
}
.cv-up .cv-up-cost {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}
.cv-up .cv-up-cost li {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
    font-size: 12px;
}
.cv-up .cv-up-cost img { width: 28px; height: 28px; object-fit: contain; }

.cv-item {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}
.cv-item img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}
.cv-city-actions {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}
.cv-qty .cv-go {
    width: auto;
    min-width: 96px;
    padding: 0 10px;
}

.cv-progress,
.cv-capmeter {
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    overflow: hidden;
}
.cv-progress i,
.cv-capmeter i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, #8a6a3d), color-mix(in srgb, var(--accent) 40%, #e0c48a));
}

/* home-icons-fix */
.home-stats-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 72px;
    padding: 10px 8px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--accent) 12%, var(--glass-bg-strong));
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
}
.home-stats-btn i {
    font-size: 20px;
    line-height: 1;
    color: var(--accent-text);
}
.home-stats-btn span {
    font-size: 11px;
    font-weight: 750;
    text-align: center;
    line-height: 1.2;
}
.home-stats-btn:active { transform: translateY(1px); }

/* Force consistent home tool images (override older 45px/cover rules) */
.home-tool img,
.home-tool .home-friends,
.home-tool .home-online,
.home-tool .home-leaders,
.home-tool .home-hunt-ico,
.home-tool .home-caravan,
.home-tool .home-merchant,
.home-tool .home-tax,
.home-tool .home-health,
.home-settings .home-settings-img,
.home-help .home-help-img,
.home-friends,
.home-online,
.home-leaders {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto;
}

/* Map pin icons centered in circle */
.pin-ico {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: none;
}
.pin-ico .icon,
.pin-ico img,
.pin-ico .farm-pin-img,
.farm-pin-img {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
}
.pin:hover .pin-ico {
    transform: none;
}
.pin:hover .pin-ico img,
.pin:hover .farm-pin-img {
    transform: scale(1.05);
}

/* gazete-social-restore */
/* gazete social feed */
.gazete-screen { display: flex; flex-direction: column; gap: 12px; padding-bottom: 10px; }
.gazete-seg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
}
.gazete-seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 720;
    cursor: pointer;
}
.gazete-seg-btn.is-on {
    background: color-mix(in srgb, var(--glass-bg-strong) 88%, transparent);
    color: var(--text-primary);
    box-shadow: 0 6px 16px rgba(8, 12, 20, 0.16);
}
.gazete-seg-btn i { font-size: 12px; }
.gazete-compose {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid var(--glass-line, var(--border-color));
    background: var(--glass-bg);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.gazete-compose textarea {
    width: 100%;
    min-height: 64px;
    resize: vertical;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--glass-bg-strong) 55%, transparent);
    color: var(--text-primary);
    font: inherit;
}
.gazete-compose-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.gazete-pick {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 42px;
    padding: 0 12px 0 8px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--glass-bg-strong) 70%, transparent);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
    user-select: none;
}
.gazete-pick:hover {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border-color));
}
.gazete-pick.is-ready {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 12%, var(--glass-bg));
}
.gazete-pick-ico {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent-text);
}
.gazete-pick-ico i { font-size: 13px; color: inherit; }
.gazete-pick [data-pick-label] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gazete-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 42px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border-color));
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 22%, var(--glass-bg));
    color: var(--accent-text);
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: none;
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    transition: transform .12s ease, background .15s ease;
}
.gazete-share i { font-size: 13px; }
.gazete-share:hover {
    background: color-mix(in srgb, var(--accent) 32%, var(--glass-bg));
}
.gazete-share:active { transform: scale(0.985); }
.gazete-share:disabled { opacity: 0.55; cursor: default; }
.gazete-preview {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}
.gazete-preview img { display: block; width: 100%; max-height: 240px; object-fit: cover; }
.gazete-preview button {
    position: absolute; top: 8px; right: 8px;
    width: 30px; height: 30px; border-radius: 50%;
    border: 0; background: rgba(0,0,0,.55); color: #fff; cursor: pointer;
}
.gazete-feed { display: flex; flex-direction: column; gap: 12px; }
.gazete-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid var(--glass-line, var(--border-color));
    background: var(--glass-bg);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.gazete-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.gazete-author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}
.gazete-author span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gazete-author strong {
    font-size: 13px; font-weight: 780;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gazete-author small {
    font-size: 11px; font-weight: 650;
    color: var(--text-tertiary, var(--text-secondary));
}
.gazete-body {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}
.gazete-media {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
    cursor: zoom-in;
}
.gazete-media img { display: block; width: 100%; max-height: 420px; object-fit: cover; }
.gazete-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.gazete-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 720;
    cursor: pointer;
}
.gazete-action.is-on { color: #fc8181; border-color: color-mix(in srgb, #fc8181 35%, var(--border-color)); }
.gazete-like-group {
    display: inline-flex;
    align-items: stretch;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--glass-bg-strong) 55%, transparent);
    overflow: hidden;
}
.gazete-like-group.is-on {
    color: #fc8181;
    border-color: color-mix(in srgb, #fc8181 35%, var(--border-color));
}
.gazete-like-group .gazete-action {
    border: 0;
    border-radius: 0;
    background: transparent;
    min-height: 34px;
}
.gazete-like-group .gazete-like-btn { padding: 0 10px 0 12px; }
.gazete-like-group .gazete-likers-btn {
    padding: 0 12px 0 4px;
    font-variant-numeric: tabular-nums;
    min-width: 28px;
}
.gazete-like-group .gazete-like-btn + .gazete-likers-btn {
    border-left: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
}
.gazete-likers-sheet { display: flex; flex-direction: column; gap: 12px; }
.gazete-likers-sheet h3 { margin: 0; font-size: 16px; font-weight: 780; }
.gazete-likers-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 55vh;
    overflow: auto;
}
.gazete-liker {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: color-mix(in srgb, var(--glass-bg-strong) 60%, transparent);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}
.gazete-liker span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gazete-liker strong {
    font-size: 14px;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gazete-liker small { color: var(--text-secondary); font-size: 12px; }
.gazete-liker > i { color: var(--text-secondary); font-size: 12px; }

.gazete-icon-btn {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--border-color);
    background: transparent; color: var(--text-secondary); cursor: pointer;
}
.gazete-empty, .gazete-comments-empty {
    display: grid; place-items: center; gap: 8px;
    padding: 28px 16px; text-align: center;
    color: var(--text-secondary);
    border-radius: 16px;
    border: 1px dashed color-mix(in srgb, var(--border-color) 80%, transparent);
}
.gazete-empty i { font-size: 22px; opacity: .7; }
.gazete-empty p, .gazete-comments-empty { margin: 0; font-size: 13px; font-weight: 650; }
.gazete-more-wrap { display: flex; justify-content: center; }
.gazete-more { min-width: 160px; }
.gazete-comments-sheet { display: flex; flex-direction: column; gap: 12px; }
.gazete-comments-sheet h3 { margin: 0; font-size: 16px; font-weight: 780; }
.gazete-comments-list { display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow: auto; }
.gazete-comment {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--glass-bg-strong) 50%, transparent);
}
.gazete-comment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.gazete-comment-head .gazete-author { flex: 1 1 auto; }
.gazete-comment-head .gazete-icon-btn { flex: none; }
.gazete-comment > p {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
}
.gazete-comment-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}
.gazete-comment-form input {
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 0 12px;
    background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
    color: var(--text-primary);
    font: inherit;
}
.gazete-lightbox img {
    display: block;
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 12px;
}
@media (max-width: 380px) {
    .gazete-seg-btn { font-size: 11px; gap: 4px; }
    .gazete-seg-btn i { display: none; }
}

/* quick-menu-restore */
.quick-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 12px;
}
.quick-menu-head h2 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
}
.quick-menu-close {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: color-mix(in srgb, var(--glass-bg-strong) 70%, transparent);
    color: var(--text-secondary);
    cursor: pointer;
}
.quick-menu-close:hover { color: var(--text-primary); }
.quick-menu-close i { font-size: 15px; }
.quick-menu-sub { display: none; }
.quick-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.quick-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 84px;
    padding: 10px 6px;
    border-radius: 16px;
    border: 1px solid var(--glass-line, var(--border-color));
    background: color-mix(in srgb, var(--glass-bg-strong) 70%, transparent);
    color: var(--text-primary);
    font: inherit;
    font-size: 11px;
    font-weight: 750;
    text-align: center;
    line-height: 1.2;
    cursor: pointer;
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}

.quick-menu-ico.is-img {
    background: transparent;
    border: 0;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    border-radius: 0;
    overflow: hidden;
    flex: none;
}
.quick-menu-ico.is-img img {
    display: block;
    width: 36px !important;
    height: 36px !important;
    max-width: 36px;
    max-height: 36px;
    object-fit: contain;
    object-position: center;
}
.quick-menu-item:hover,
.quick-menu-item:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    outline: none;
}
.quick-menu-ico {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent-text);
    font-size: 15px;
}
.modal h2 .fa-bolt { color: var(--accent-text); margin-right: 6px; }
@media (max-width: 380px) {
    .quick-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* pin-center-fix */
.pin-ico {
    position: relative !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    place-content: center !important;
    overflow: hidden !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
}
.pin-ico > *,
.pin-ico .icon,
.pin-ico img,
.pin-ico .farm-pin-img,
.pin .farm-pin-img,
.pin-ico svg {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    transform: translate(1px, 1px) !important;
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: contain !important;
    object-position: 55% 55% !important;
    display: block !important;
    flex: none !important;
    justify-self: center !important;
    align-self: center !important;
}
.pin:hover .pin-ico { transform: none !important; }
.pin:hover .pin-ico > *,
.pin:hover .pin-ico .icon,
.pin:hover .pin-ico img,
.pin:hover .pin-ico .farm-pin-img,
.pin:hover .farm-pin-img,
.pin:hover .pin-ico svg {
    transform: translate(1px, 1px) scale(1.08) !important;
}
@media (max-width: 520px) {
    .pin-ico {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
    }
    .pin-ico > *,
    .pin-ico .icon,
    .pin-ico img,
    .pin-ico .farm-pin-img,
    .pin .farm-pin-img,
    .pin-ico svg {
        width: 16px !important;
        height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
    }
}

/* home-gazete-fix */
.home-gz-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-top: 10px !important;
}
.home-gz-head h2 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}
.home-gz-mark {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    object-fit: contain !important;
    flex: none !important;
}
.home-gz-strip {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 2px 2px 6px !important;
    scrollbar-width: none !important;
}
.home-gz-card {
    flex: 0 0 min(78vw, 260px) !important;
    width: min(78vw, 260px) !important;
    max-width: min(78vw, 260px) !important;
    box-sizing: border-box !important;
}
.home-gz-avatar img,
.home-gz-media img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
}

/* ui-sections-restore */

/* quick-menu-head-fix */
.quick-menu-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
    width: 100% !important;
}
.quick-menu-head h2 {
    margin: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.quick-menu-close {
    margin-left: auto !important;
    flex: none !important;
}

/* merchant-orders */
.mo-page {
  --merchant-accent: color-mix(in srgb, #b08d57 70%, var(--accent));
  --merchant-ok: color-mix(in srgb, var(--positive, #3d9a6a) 85%, #1a3d2a);
  --merchant-muted: color-mix(in srgb, var(--text-secondary) 88%, transparent);
  display: grid;
  gap: 14px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  max-width: 920px;
  margin: 0 auto;
}
.mo-hero {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  min-height: 168px;
  isolation: isolate;
}
.mo-hero-img {
  display: block;
  width: 100%;
  height: 188px;
  object-fit: cover;
  object-position: center 38%;
}
.mo-hero-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background:
    linear-gradient(180deg,
      rgba(8, 12, 20, 0.72) 0%,
      rgba(8, 12, 20, 0.28) 42%,
      rgba(8, 12, 20, 0.55) 72%,
      rgba(8, 12, 20, 0.86) 100%);
  z-index: 1;
}
.mo-hero-top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
}
.mo-hero-text {
  min-width: 0;
  flex: 1;
}
.mo-hero-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #f0d48a;
  background: color-mix(in srgb, #1b140c 58%, transparent);
  border: 1px solid color-mix(in srgb, #f0d48a 28%, transparent);
  flex: 0 0 auto;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mo-hero h1 {
  margin: 0 0 4px;
  font-size: 1.2rem;
  line-height: 1.2;
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.mo-hero p {
  margin: 0;
  font-size: 12px;
  color: color-mix(in srgb, #f8fafc 88%, transparent);
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
html[data-theme="light"] .mo-hero-copy {
  background:
    linear-gradient(180deg,
      rgba(20, 16, 12, 0.68) 0%,
      rgba(20, 16, 12, 0.24) 42%,
      rgba(20, 16, 12, 0.5) 72%,
      rgba(20, 16, 12, 0.8) 100%);
}
.mo-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.mo-stat {
  padding: 10px 8px;
  border-radius: 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  text-align: center;
  min-width: 0;
}
.mo-stat-label {
  display: block;
  font-size: 11px;
  color: var(--merchant-muted);
  margin-bottom: 4px;
}
.mo-stat strong {
  font-size: 14px;
  font-weight: 700;
}
.mo-earn { color: var(--merchant-ok); }
.mo-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  border-radius: 14px;
  background: color-mix(in srgb, rgba(18, 22, 32, 0.4) 72%, transparent);
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent),
    0 10px 24px rgba(0, 0, 0, 0.24);
}
.mo-tab {
  min-height: 38px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: color-mix(in srgb, #f8fafc 82%, transparent);
  font-weight: 700;
  font-size: 13px;
}
.mo-tab.is-on {
  background: color-mix(in srgb, rgba(240, 212, 138, 0.28) 70%, rgba(255, 255, 255, 0.12));
  color: #fff8e8;
  border: 1px solid color-mix(in srgb, #f0d48a 42%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent),
    0 4px 12px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html[data-theme="light"] .mo-tabs {
  background: color-mix(in srgb, rgba(255, 248, 236, 0.42) 70%, rgba(40, 28, 16, 0.12));
  border-color: color-mix(in srgb, #fff 45%, transparent);
}
html[data-theme="light"] .mo-tab {
  color: color-mix(in srgb, #1b140c 78%, transparent);
}
html[data-theme="light"] .mo-tab.is-on {
  background: color-mix(in srgb, rgba(240, 212, 138, 0.55) 65%, rgba(255, 255, 255, 0.35));
  color: #1b140c;
}
.mo-grid {
  display: grid;
  gap: 12px;
}
.mo-card {
  position: relative;
  padding: 14px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--glass-bg) 92%, #fff), var(--glass-bg));
  border: 1px solid color-mix(in srgb, var(--glass-line) 80%, var(--merchant-accent));
  box-shadow:
    0 10px 28px color-mix(in srgb, #000 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
  overflow: hidden;
}
.mo-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--merchant-accent) 70%, transparent), transparent);
  opacity: 0.7;
}
.mo-card.is-ready {
  border-color: color-mix(in srgb, var(--merchant-ok) 45%, var(--glass-line));
  box-shadow:
    0 12px 30px color-mix(in srgb, var(--merchant-ok) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}
.mo-card.is-ready::before {
  background: linear-gradient(90deg, transparent, var(--merchant-ok), transparent);
}
.mo-card.is-partial {
  border-color: color-mix(in srgb, var(--merchant-accent) 40%, var(--glass-line));
}
.mo-card.is-partial::before {
  background: linear-gradient(90deg, transparent, var(--merchant-accent), transparent);
}
.mo-card.is-locked,
.mo-card.is-empty {
  opacity: 0.92;
}
.mo-card-mark {
  width: 42px;
  height: 42px;
  margin-bottom: 10px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--merchant-accent);
  background: color-mix(in srgb, var(--merchant-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--merchant-accent) 22%, transparent);
}
.mo-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.mo-npc-wrap {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
}
.mo-npc-ava {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: visible;
  color: #f0d48a;
  background:
    radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--merchant-accent) 34%, transparent), transparent 58%),
    color-mix(in srgb, var(--merchant-accent) 14%, var(--glass-bg, #1a2230));
  border: 1px solid color-mix(in srgb, var(--merchant-accent) 28%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 6%, transparent);
}
.mo-npc-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  border-radius: inherit;
}
html[data-theme="dark"] .mo-npc-ava {
  background:
    radial-gradient(circle at 40% 22%, color-mix(in srgb, var(--merchant-accent) 16%, transparent), transparent 52%),
    linear-gradient(165deg, #1a2436 0%, #0f1520 72%, #0c111a 100%);
  border-color: color-mix(in srgb, #3a4558 70%, var(--merchant-accent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent),
    inset 0 0 14px color-mix(in srgb, #000 35%, transparent),
    0 3px 8px color-mix(in srgb, #000 30%, transparent);
}
html[data-theme="dark"] .mo-npc-ava img {
  /* açık stüdyo hale kalırsa yumuşat */
  filter: contrast(1.04) saturate(0.96) brightness(0.96);
}
html[data-theme="light"] .mo-npc-ava {
  background:
    radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--merchant-accent) 22%, transparent), transparent 60%),
    color-mix(in srgb, var(--merchant-accent) 10%, #f3efe6);
  border-color: color-mix(in srgb, var(--merchant-accent) 26%, #d9d0c2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 55%, transparent);
}
html[data-theme="light"] .mo-npc-ava img {
  filter: none;
}
.mo-npc-ava.is-done {
  border-color: color-mix(in srgb, var(--merchant-ok) 45%, var(--glass-line));
}
.mo-npc-ava.is-done img {
  filter: saturate(0.92);
}
.mo-npc-check {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 8px;
  color: #fff;
  background: var(--merchant-ok);
  border: 1px solid color-mix(in srgb, #fff 25%, var(--merchant-ok));
  box-shadow: 0 2px 6px color-mix(in srgb, #000 35%, transparent);
}
.mo-npc {
  margin: 0 0 6px;
  font-size: 1.05rem;
  display: block;
}
.mo-diff {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: color-mix(in srgb, var(--merchant-accent) 18%, transparent);
  color: var(--text-primary);
}
.mo-diff.is-easy { background: color-mix(in srgb, #5a9e6f 22%, transparent); }
.mo-diff.is-medium { background: color-mix(in srgb, #b08d57 24%, transparent); }
.mo-diff.is-hard { background: color-mix(in srgb, #a35b4a 22%, transparent); }
.mo-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  border: 1px solid var(--glass-line);
}
.mo-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.mo-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--glass-line) 85%, transparent);
}
.mo-item.is-ok {
  background: color-mix(in srgb, var(--merchant-ok) 8%, transparent);
  border-color: color-mix(in srgb, var(--merchant-ok) 22%, transparent);
}
.mo-item-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 10px;
  background: color-mix(in srgb, var(--merchant-accent) 10%, transparent);
  padding: 4px;
}
.mo-item-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.mo-item-name { font-weight: 650; }
.mo-item-qty {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
}
.mo-item-unit {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-secondary);
}
.mo-bar {
  display: block;
  width: 100%;
  margin-top: 6px;
  height: 6px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text-primary) 10%, transparent);
  accent-color: color-mix(in srgb, var(--merchant-accent) 75%, #6b5533);
  -webkit-appearance: none;
  appearance: none;
}
.mo-bar::-webkit-progress-bar {
  background: color-mix(in srgb, var(--text-primary) 10%, transparent);
  border-radius: 999px;
}
.mo-bar::-webkit-progress-value {
  background: color-mix(in srgb, var(--merchant-accent) 75%, #6b5533);
  border-radius: 999px;
}
.mo-bar::-moz-progress-bar {
  background: color-mix(in srgb, var(--merchant-accent) 75%, #6b5533);
  border-radius: 999px;
}
.mo-bar.is-ok,
.mo-item.is-ok .mo-bar {
  accent-color: var(--merchant-ok);
}
.mo-bar.is-ok::-webkit-progress-value,
.mo-item.is-ok .mo-bar::-webkit-progress-value {
  background: var(--merchant-ok);
}
.mo-bar.is-ok::-moz-progress-bar,
.mo-item.is-ok .mo-bar::-moz-progress-bar {
  background: var(--merchant-ok);
}
.mo-market-link {
  margin-top: 6px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent-text, var(--accent));
  font-size: 12px;
  font-weight: 650;
  text-align: left;
}
.mo-reward {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0 0;
  padding: 11px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--merchant-ok) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--merchant-ok) 24%, transparent);
}
.mo-reward + .mo-reward { margin-top: 8px; }
.mo-reward.is-partial {
  background: color-mix(in srgb, var(--merchant-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--merchant-accent) 28%, transparent);
}
.mo-reward-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.mo-bonus-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--merchant-ok) 85%, var(--text-primary));
}
.mo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.mo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 10px;
  border: 1px solid var(--glass-line);
  background: color-mix(in srgb, var(--text-primary) 5%, transparent);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.mo-btn i {
  font-size: 11px;
  opacity: 0.9;
}
.mo-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--text-primary) 9%, transparent);
}
.mo-btn:active:not(:disabled) {
  transform: scale(0.98);
}
.mo-btn:disabled {
  opacity: 0.42;
  cursor: default;
}
.mo-btn-main {
  flex: 1 1 120px;
  border-color: color-mix(in srgb, var(--merchant-accent) 42%, var(--glass-line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--merchant-accent) 28%, transparent), color-mix(in srgb, var(--merchant-accent) 14%, transparent));
  color: #f6e7c4;
}
.mo-btn-main:hover:not(:disabled) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--merchant-accent) 36%, transparent), color-mix(in srgb, var(--merchant-accent) 18%, transparent));
}
.mo-card.is-ready .mo-btn-main {
  border-color: color-mix(in srgb, var(--merchant-ok) 45%, var(--glass-line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--merchant-ok) 30%, transparent), color-mix(in srgb, var(--merchant-ok) 14%, transparent));
  color: color-mix(in srgb, var(--merchant-ok) 35%, #fff);
}
/* mo-btn-main-light-contrast */
html[data-theme="light"] .mo-btn-main {
  color: #5c4324;
  border-color: color-mix(in srgb, var(--merchant-accent) 55%, var(--glass-line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--merchant-accent) 34%, #fff), color-mix(in srgb, var(--merchant-accent) 18%, #f7f1e6));
}
html[data-theme="light"] .mo-btn-main:hover:not(:disabled) {
  color: #3f2d16;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--merchant-accent) 44%, #fff), color-mix(in srgb, var(--merchant-accent) 24%, #f7f1e6));
}
html[data-theme="light"] .mo-btn-main:disabled {
  color: #6a5640;
  opacity: 0.72;
}
html[data-theme="light"] .mo-card.is-ready .mo-btn-main {
  color: #1f5a3a;
  border-color: color-mix(in srgb, var(--merchant-ok) 50%, var(--glass-line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--merchant-ok) 28%, #fff), color-mix(in srgb, var(--merchant-ok) 14%, #eef6f0));
}
html[data-theme="light"] .mo-card.is-ready .mo-btn-main:hover:not(:disabled) {
  color: #16452c;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--merchant-ok) 36%, #fff), color-mix(in srgb, var(--merchant-ok) 18%, #eef6f0));
}
.mo-btn-ghost {
  flex: 0 1 auto;
  color: var(--text-secondary);
}
.mo-btn-soft {
  flex: 1 1 100%;
  min-height: 30px;
  justify-content: center;
  gap: 7px;
  border-color: color-mix(in srgb, var(--merchant-accent) 30%, var(--glass-line));
  background: color-mix(in srgb, var(--merchant-accent) 12%, transparent);
  color: color-mix(in srgb, var(--merchant-accent) 55%, var(--text-primary));
}
.mo-btn-soft:hover:not(:disabled) {
  background: color-mix(in srgb, var(--merchant-accent) 18%, transparent);
}
.mo-partial-amt {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  color: var(--text-primary);
  opacity: 0.95;
}
.mo-partial-amt .sikke-amt img {
  width: 12px;
  height: 12px;
}
.mo-hint,
.mo-empty,
.mo-locked-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}
.mo-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.mo-empty-panel {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  padding: 28px 18px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--merchant-accent) 18%, transparent), transparent 55%),
    var(--glass-bg);
  border: 1px solid var(--glass-line);
  box-shadow: 0 10px 26px color-mix(in srgb, #000 10%, transparent);
}
.mo-empty-ico {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  font-size: 22px;
  color: #f0d48a;
  background: color-mix(in srgb, var(--merchant-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--merchant-accent) 28%, transparent);
}
.mo-empty-panel h3 {
  margin: 0;
  font-size: 1.05rem;
}
.mo-empty-panel p {
  margin: 0;
  max-width: 28ch;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.mo-empty-cta {
  margin-top: 6px;
  min-height: 40px;
}
.mo-hist-list {
  display: grid;
  gap: 10px;
}
.mo-hist-card {
  padding: 13px;
  border-radius: 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  box-shadow: 0 8px 20px color-mix(in srgb, #000 8%, transparent);
}
.mo-hist-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.mo-hist-pay {
  font-weight: 800;
  white-space: nowrap;
}
.mo-hist-goods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mo-hist-good {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--text-primary) 5%, transparent);
  border: 1px solid var(--glass-line);
}
.mo-hist-good b {
  color: var(--text-primary);
  font-weight: 700;
}
.mo-hist-good img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.mo-hist-foot {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-secondary);
}
.mo-hist-foot i { margin-right: 4px; }
/* .mo-pager moved to mo-pager-modern */
.mo-success {
  text-align: center;
  display: grid;
  gap: 8px;
}
.mo-success-reward {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--merchant-ok);
}
.mo-error {
  text-align: center;
  padding: 20px 12px;
  display: grid;
  gap: 12px;
}
@media (min-width: 481px) {
  .mo-btn-main { flex: 1 1 160px; }
}
@media (min-width: 768px) {
  .mo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mo-hero h1 { font-size: 1.4rem; }
}
@media (max-width: 380px) {
  .mo-stats { gap: 6px; }
  .mo-stat { padding: 8px 4px; }
  .mo-stat strong { font-size: 12px; }
  .mo-stat-label { font-size: 10px; }
}
html[data-theme="light"] .mo-page {
  --merchant-accent: #9a7340;
}
html[data-theme="dark"] .mo-card {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

/* farm-yard-v2 */
.farm-map-collect {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    border: 0;
}
.farm-map-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--positive) 85%, #052e16);
    color: #ecfdf5;
    font-size: 11px;
    font-weight: 800;
}

.farm-top {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
    padding: 12px 12px 10px;
    margin: 0 0 10px;
    border-radius: 16px;
    border: 1px solid var(--glass-line);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--farm-accent, #34d399) 18%, transparent), transparent 58%),
        var(--glass-bg);
}
.farm-top-field { --farm-accent: #86efac; }
.farm-top-garden { --farm-accent: #fbbf24; }
.farm-top-coop { --farm-accent: #fda4af; }
.farm-top-barn { --farm-accent: #93c5fd; }
.farm-back {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.farm-back svg { width: 18px; height: 18px; }
.farm-top-text h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
}
.farm-top-text p {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-secondary);
}

.farm-place { display: grid; gap: 10px; }
.farm-block {
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--glass-line);
    background: var(--glass-bg);
    display: grid;
    gap: 10px;
}
.farm-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.farm-block-head h3 {
    margin: 0;
    font-size: 14px;
}
.farm-inline-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.farm-inline-actions .btn,
.farm-inline-btn {
    width: auto;
    min-height: 34px;
    padding: 6px 10px;
}

.farm-chip-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}
.farm-chip {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 8px;
    align-items: center;
    text-align: left;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--text-primary) 3%, transparent);
    color: inherit;
    cursor: pointer;
}
.farm-chip.is-static { cursor: default; }
.farm-chip.is-locked { opacity: 0.55; }
.farm-chip img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
.farm-chip span { min-width: 0; display: grid; gap: 2px; }
.farm-chip strong { font-size: 12px; }
.farm-chip small {
    font-size: 10px;
    color: var(--text-secondary);
    line-height: 1.25;
}
.farm-chip.is-active {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--glass-line));
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.farm-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}
.farm-tile {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--text-primary) 2.5%, transparent);
}
.farm-tile.is-ready {
    border-color: color-mix(in srgb, var(--positive) 45%, var(--glass-line));
    background: color-mix(in srgb, var(--positive) 10%, transparent);
}
.farm-tile.is-run {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--glass-line));
}
.farm-tile-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--farm-accent, #34d399) 16%, transparent);
    overflow: hidden;
}
.farm-tile-ico img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
.farm-tile-ico i { color: var(--accent-text); }
.farm-tile-main { min-width: 0; display: grid; gap: 2px; }
.farm-tile-main strong {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.farm-tile-meta {
    font-size: 11px;
    color: var(--text-secondary);
}
.farm-tile-btn {
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.farm-tile-btn.is-start {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border-color: color-mix(in srgb, var(--accent) 42%, transparent);
    color: var(--accent-text);
}
.farm-tile-btn.is-collect {
    background: color-mix(in srgb, var(--positive) 16%, transparent);
    border-color: color-mix(in srgb, var(--positive) 42%, transparent);
    color: var(--positive);
}
.farm-tile-btn.is-wait {
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
    border-color: var(--glass-line);
    color: var(--text-tertiary);
    cursor: not-allowed;
}

.farm-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}
.farm-metrics div {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}
.farm-metrics i { width: 14px; text-align: center; color: var(--accent-text); }

.farm-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--glass-line);
}
.farm-status.is-ready {
    border-color: color-mix(in srgb, var(--positive) 45%, var(--glass-line));
    background: color-mix(in srgb, var(--positive) 10%, transparent);
}
.farm-status.is-run {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--glass-line));
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.farm-status strong { display: block; font-size: 13px; }
.farm-status small { color: var(--text-secondary); font-size: 12px; }
.farm-status .btn { width: auto; min-height: 34px; }

.farm-offer-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}
.farm-offer {
    display: grid;
    gap: 4px;
    text-align: left;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--text-primary) 3%, transparent);
    color: inherit;
    cursor: pointer;
}
.farm-offer:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.farm-offer strong { font-size: 13px; }
.farm-offer small {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.3;
}
.farm-note {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
}
.farm-pick h2 { margin: 0 0 10px; font-size: 16px; }
.farm-pick-list { display: grid; gap: 8px; margin-bottom: 10px; }

@media (max-width: 420px) {
    .farm-tile {
        grid-template-columns: 40px 1fr;
        grid-template-areas:
            "ico main"
            "btn btn";
    }
    .farm-tile-ico { grid-area: ico; }
    .farm-tile-main { grid-area: main; }
    .farm-tile-btn { grid-area: btn; width: 100%; }
}

/* farm-media-v2 */
.farm-place-field { --farm-accent: #86efac; }
.farm-place-garden { --farm-accent: #fbbf24; }
.farm-place-coop { --farm-accent: #fda4af; }
.farm-place-barn { --farm-accent: #93c5fd; }
.farm-place-well,
.farm-top-well { --farm-accent: #38bdf8; }

.farm-shop-card.is-info,
.farm-plot-card[data-farm-info-id],
.farm-well-card.is-info { cursor: pointer; }

.farm-modal-animal {
    grid-template-columns: 72px 1fr;
}
.farm-modal-animal .farm-req-block,
.farm-modal-animal .btn {
    grid-column: 1 / -1;
}
.farm-req-block {
    display: grid;
    gap: 6px;
    margin-top: 2px;
}
.farm-req-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--accent-text, var(--text-secondary));
}
.farm-req-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 6px;
}
.farm-req-chip {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 6px;
    align-items: center;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--glass-line));
    background: color-mix(in srgb, var(--accent) 10%, var(--glass-bg));
}
.farm-req-chip img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}
.farm-req-chip strong {
    display: block;
    font-size: 13px;
    line-height: 1.15;
}
.farm-req-chip strong .sikke-amt {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.farm-req-chip strong .sikke-amt img {
    width: 14px;
    height: 14px;
}
.farm-req-chip small {
    display: block;
    font-size: 10px;
    color: var(--text-secondary);
    line-height: 1.2;
}
.farm-req-warn {
    color: color-mix(in srgb, var(--danger, #f87171) 85%, #fff) !important;
    font-weight: 700;
}

.farm-well-card {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--glass-line);
    background:
        linear-gradient(135deg, color-mix(in srgb, #38bdf8 14%, transparent), transparent 58%),
        var(--glass-bg);
}
.farm-well-thumb {
    position: relative;
    width: 92px;
    height: 92px;
    border-radius: 14px;
    overflow: hidden;
    background: #0f172a;
}
.farm-well-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.farm-well-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}
.farm-well-copy strong {
    font-size: 15px;
    line-height: 1.2;
}
.farm-well-copy small {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.35;
}
.farm-info-hint {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, #0b1210 62%, transparent);
    border: 1px solid color-mix(in srgb, #fff 18%, transparent);
    color: #f8fafc;
    font-size: 11px;
    z-index: 2;
}
.farm-info-modal .farm-info-hero {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--glass-line);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--farm-accent, var(--accent)) 14%, transparent), transparent 55%),
        color-mix(in srgb, var(--text-primary) 3%, transparent);
}
.farm-info-photo {
    width: 88px;
    height: 88px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--farm-accent, var(--accent)) 16%, transparent), transparent 65%),
        var(--glass-bg);
}
.farm-info-photo img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    display: block;
}
.farm-info-photo.is-scene img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.farm-info-blurb {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-secondary);
}
.farm-info-blurb-inline {
    display: block;
    margin: 2px 0 4px;
    color: var(--text-secondary);
}
.farm-info-facts li span {
    display: inline;
}
.farm-info-facts li em {
    font-style: normal;
    font-weight: 700;
    color: var(--text-primary);
    margin-right: 4px;
}
.farm-info-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.farm-info-actions .btn { flex: 1 1 auto; min-width: 110px; }

.farm-scene-photo {
    aspect-ratio: 16 / 10;
    background: #1b140c;
    overflow: hidden;
}
.farm-scene-photo img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    padding: 0 !important;
    background: transparent !important;
}

.farm-shop-photo,
.farm-shop-card .job-photo.farm-shop-photo,
.farm-plot-card .job-photo.farm-shop-photo {
    background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--farm-accent, var(--accent)) 16%, transparent), transparent 68%),
        linear-gradient(180deg, color-mix(in srgb, var(--farm-accent, var(--accent)) 10%, var(--glass-bg)), var(--glass-bg-strong, var(--glass-bg)));
}

.farm-shop-card .job-photo.farm-shop-photo,
.farm-plot-card .job-photo.farm-shop-photo {
    aspect-ratio: auto;
    height: 72px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.farm-shop-photo img,
.farm-shop-card .farm-shop-photo img,
.farm-plot-card .farm-shop-photo img {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    object-fit: contain !important;
    padding: 0 !important;
    background: transparent !important;
    margin: 0 auto;
    display: block;
}

.farm-modal-photo {
    width: 64px;
    height: 64px;
    background:
        radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--farm-accent, var(--accent)) 16%, transparent), transparent 65%),
        color-mix(in srgb, var(--glass-bg-strong, var(--glass-bg)) 88%, transparent);
}
.farm-modal-photo img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
}

.farm-upgrade-modal { gap: 14px; }
.farm-upgrade-hero {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--glass-line);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%),
        color-mix(in srgb, var(--text-primary) 3%, transparent);
}
.farm-upgrade-hero-photo {
    width: 88px;
    height: 72px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--glass-bg);
}
.farm-upgrade-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.farm-upgrade-hero-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}
.farm-upgrade-hero-copy strong {
    font-size: 15px;
    line-height: 1.2;
}
.farm-upgrade-levels {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-text, #f8fafc);
    background: color-mix(in srgb, var(--accent) 55%, #1b140c);
}
.farm-upgrade-hero-copy small {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.35;
}
.farm-cost-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.farm-cost-chip {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 10px 8px;
    border-radius: 14px;
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
    text-align: center;
}
.farm-cost-chip img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
}
.farm-cost-chip strong {
    display: block;
    font-size: 13px;
    line-height: 1.2;
}
.farm-cost-chip small {
    display: block;
    font-size: 10px;
    color: var(--text-secondary);
    line-height: 1.2;
}
@media (max-width: 380px) {
    .farm-cost-grid { grid-template-columns: 1fr; }
    .farm-cost-chip {
        grid-template-columns: 36px 1fr;
        justify-items: start;
        align-items: center;
        text-align: left;
    }
    .farm-upgrade-hero {
        grid-template-columns: 72px 1fr;
    }
    .farm-upgrade-hero-photo {
        width: 72px;
        height: 60px;
    }
}

/* farm-extras-fix */
/* superseded by farm-stats-restore */

/* tab-dock-fix */
@media (max-width: 959px) {
    .tabbar {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        width: auto !important;
        z-index: 40 !important;
    }
    .tabbar.tabbar-right,
    #tabbar-right {
        display: none !important;
    }
    .tabbar .tab-main {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        justify-content: space-around !important;
        width: 100% !important;
        flex: 1 1 auto !important;
        gap: 2px !important;
    }
    .tabbar .tab-extra,
    .tabbar .tab-foot { display: none !important; }
    .tabbar .tab {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 2px !important;
    }
    .tabbar .tab img:not(.tab-quick-img),
    .tabbar .tab-ico img {
        width: 22px !important;
        height: 22px !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
    }
    .tabbar .tab-fab {
        display: grid !important;
        place-items: center !important;
        overflow: hidden !important;
    }
    .tabbar .tab-fab img,
    .tabbar .tab-quick-img {
        width: 28px !important;
        height: 28px !important;
        object-fit: contain !important;
        display: block !important;
    }
}

/* farm-stats-restore */

/* home-stats-page */
.home-stats-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 72px;
    padding: 10px 8px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--accent) 12%, var(--glass-bg-strong));
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
}
.home-stats-btn i {
    font-size: 20px;
    color: var(--accent-text);
}
.home-stats-btn span {
    font-size: 11px;
    font-weight: 750;
    text-align: center;
    line-height: 1.2;
}
.hs-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 0 18px;
}
.hs-page-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 2px 2px;
}
.hs-page-title {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hs-page-title strong {
    font-size: 16px;
    font-weight: 780;
    letter-spacing: -0.02em;
}
.hs-page-title small {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 650;
}
.hs-page-body .hs {
    margin: 0;
}

.hs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: color-mix(in srgb, var(--glass-bg) 88%, transparent);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.hs-skel {
    height: 140px;
    border-radius: 16px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-primary) 8%, transparent), transparent);
    background-size: 200% 100%;
    animation: hs-shine 1.2s linear infinite;
}
@keyframes hs-shine { to { background-position: -200% 0; } }
.hs-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.hs-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 70%, #7c5cfc), color-mix(in srgb, var(--accent) 40%, #4f8dff));
    color: #fff;
    font-size: 16px;
    flex: none;
}
.hs-head strong { display: block; font-size: 15px; font-weight: 800; line-height: 1.2; }
.hs-head small { display: block; margin-top: 2px; color: var(--text-tertiary); font-size: 12px; }
.hs-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #9b6dff 35%, var(--border-color));
    background: color-mix(in srgb, #9b6dff 12%, transparent);
    color: #b79cff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
}
.hs-top, .hs-grid {
    display: grid;
    gap: 8px;
}
.hs-top {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}
.hs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
    .hs-top, .hs-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }
}
.hs-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: color-mix(in srgb, var(--text-primary) 3%, var(--glass-bg));
    text-align: center;
    min-width: 0;
}
.hs-card .hs-ico {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 14px;
}
.hs-card .hs-ico img { width: 18px; height: 18px; object-fit: contain; }
.hs-card strong {
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    word-break: break-word;
}
.hs-card span { font-size: 11px; color: var(--text-tertiary); font-weight: 600; line-height: 1.3; }
.hs-card.is-yakut .hs-ico { background: rgba(103, 232, 249, .14); color: #67e8f9; }
.hs-card.is-yakut strong { color: #67e8f9; }
.hs-card.is-green .hs-ico { background: rgba(52, 211, 153, .14); color: #34d399; }
.hs-card.is-blue .hs-ico { background: rgba(79, 141, 255, .14); color: #4f8dff; }
.hs-card.is-violet .hs-ico { background: rgba(155, 109, 255, .14); color: #9b6dff; }
.hs-card.is-gold .hs-ico { background: rgba(217, 164, 65, .16); color: #d9a441; }
.hs-card.is-cyan .hs-ico { background: rgba(103, 232, 249, .14); color: #67e8f9; }

.hs-panel {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    background: color-mix(in srgb, var(--text-primary) 2%, var(--glass-bg));
}
.hs-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}
.hs-panel-head .hs-ico {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    font-size: 13px;
    flex: none;
}
.hs-panel-head .hs-ico.is-blue { background: rgba(79, 141, 255, .14); color: #4f8dff; }
.hs-panel-head .hs-ico.is-violet { background: rgba(155, 109, 255, .14); color: #9b6dff; }
.hs-panel-head .hs-ico.is-yakut { background: rgba(103, 232, 249, .14); color: #67e8f9; }
.hs-panel-head .hs-ico.is-gold { background: rgba(217, 164, 65, .16); color: #d9a441; }
.hs-panel-head .hs-ico.is-cyan { background: rgba(103, 232, 249, .14); color: #67e8f9; }
.hs-panel-head strong { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 750; }
.hs-panel-head small {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.hs-countries { display: flex; flex-direction: column; }
.hs-country {
    display: grid;
    grid-template-columns: 28px minmax(0, 1.1fr) minmax(0, 1.4fr) auto 12px;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.hs-country:last-child { border-bottom: 0; }
.hs-country:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.hs-flag { display: grid; place-items: center; }
.hs-flag .flag { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; }
.hs-cname { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-bar {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    overflow: hidden;
}
.hs-bar i {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #4f8dff, #7c5cfc);
}
.hs-country b { font-size: 12.5px; font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.hs-country > .fa-chevron-right { font-size: 10px; color: var(--text-tertiary); }

.hs-list { display: flex; flex-direction: column; }
.hs-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.hs-row:last-child { border-bottom: 0; }
.hs-row:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.hs-row .avatar { width: 40px; height: 40px; border-radius: 12px; flex: none; }
.hs-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hs-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hs-name .flag-pair { flex: none; }
.hs-name .flag { width: 16px; height: 12px; border-radius: 2px; }
.hs-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--text-tertiary);
    font-size: 11.5px;
}
.hs-lv { color: #d9a441; font-weight: 750; font-variant-numeric: tabular-nums; }
.hs-lv i { font-size: 9px; margin-right: 3px; }
.hs-when, .hs-ago { display: inline-flex; align-items: center; gap: 4px; }
.hs-ago { color: #34d399; font-weight: 700; }
.hs-rank {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 800;
    flex: none;
}
.hs-rank.is-1 { background: rgba(245, 200, 66, .16); color: #f5c842; border-color: rgba(245, 200, 66, .3); }
.hs-rank.is-2 { background: rgba(200, 210, 230, .12); color: #c8d2e6; border-color: rgba(200, 210, 230, .28); }
.hs-rank.is-3 { background: rgba(180, 120, 60, .16); color: #cd7f32; border-color: rgba(180, 120, 60, .3); }
.hs-amt {
    flex: none;
    font-size: 12.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.hs-amt.is-yakut {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #67e8f9;
}
.hs-amt.is-yakut img { width: 14px; height: 14px; }
.hs-more {
    padding: 10px 14px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}
.hs-more button {
    min-height: 34px;
    padding: 0 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-color));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-text);
    font-size: 12.5px;
    font-weight: 750;
    cursor: pointer;
}
.hs-more button:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.hs-more button:disabled { opacity: .55; cursor: default; }
.hs-empty { margin: 0; padding: 18px 14px; text-align: center; color: var(--text-tertiary); font-size: 13px; }
.hs-sheet-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.hs-sheet-head h2 { margin: 0; font-size: 17px; }
.hs-sheet-head .caption { margin: 2px 0 0; }
.hs-sheet-list {
    max-height: min(52vh, 420px);
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: color-mix(in srgb, var(--text-primary) 2%, var(--glass-bg));
}
@media (max-width: 600px) {
    .hs { padding: 12px; border-radius: 18px; gap: 10px; }
    .hs-mark { width: 38px; height: 38px; border-radius: 12px; }
    .hs-card { padding: 10px 6px 9px; border-radius: 12px; }
    .hs-card strong { font-size: 13.5px; }
    .hs-top .hs-card { padding: 8px 4px 7px; gap: 4px; }
    .hs-top .hs-card .hs-ico { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }
    .hs-top .hs-card .hs-ico img { width: 15px; height: 15px; }
    .hs-top .hs-card strong { font-size: 12px; }
    .hs-top .hs-card span { font-size: 9px; }
    .hs-country { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1.1fr) auto 10px; gap: 8px; padding: 9px 12px; }
    .hs-row { padding: 9px 12px; gap: 8px; }
}


.home-tool .home-gazete {
    width: 42px;
    height: 42px;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* farm-yard-v3 */
.farm-map-collect {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    border: 0;
}
.farm-map-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--positive) 85%, #052e16);
    color: #ecfdf5;
    font-size: 11px;
    font-weight: 800;
}

.farm-top {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
    padding: 12px 12px 10px;
    margin: 0 0 10px;
    border-radius: 16px;
    border: 1px solid var(--glass-line);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--farm-accent, #34d399) 18%, transparent), transparent 58%),
        var(--glass-bg);
}
.farm-top-field { --farm-accent: #86efac; }
.farm-top-garden { --farm-accent: #fbbf24; }
.farm-top-coop { --farm-accent: #fda4af; }
.farm-top-barn { --farm-accent: #93c5fd; }
.farm-back {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.farm-back svg { width: 18px; height: 18px; }
.farm-top-text h2 { margin: 0; font-size: 18px; line-height: 1.2; }
.farm-top-text p {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-secondary);
}

.farm-place { display: grid; gap: 10px; }
.farm-block {
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--glass-line);
    background: var(--glass-bg);
    display: grid;
    gap: 10px;
}
.farm-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.farm-block-head h3 { margin: 0; font-size: 14px; }
.farm-inline-btn {
    width: auto;
    min-height: 34px;
    padding: 6px 10px;
}

.farm-shop-grid,
.farm-plot-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.farm-shop-card.is-active {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--glass-line));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}
.farm-shop-card.is-locked { opacity: 0.72; }
.farm-shop-photo {
    background:
        radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--farm-accent, #34d399) 22%, transparent), transparent 62%),
        #14110d;
}
.farm-shop-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 14px 18px;
    display: block;
}
.farm-plot-card .job-photo { background: #1b140c; }
.farm-card-good {
    position: absolute;
    left: 8px;
    bottom: 8px;
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
    padding: 4px !important;
    border-radius: 10px;
    background: color-mix(in srgb, #0b1210 72%, transparent);
    border: 1px solid color-mix(in srgb, #fff 18%, transparent);
}
.farm-card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, #1b140c 62%, transparent);
    color: #f8fafc;
    font-size: 11px;
    font-weight: 700;
    max-width: calc(100% - 16px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.farm-card-badge.is-ready {
    background: color-mix(in srgb, var(--positive) 78%, #052e16);
    color: #ecfdf5;
}
.farm-card-badge.is-run {
    background: color-mix(in srgb, var(--accent) 72%, #1b140c);
}
.farm-card-badge.is-pick {
    background: color-mix(in srgb, var(--accent) 78%, #1b140c);
}
.farm-card-badge.is-locked {
    background: color-mix(in srgb, #111 70%, transparent);
}

.farm-shop-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
}
.farm-shop-actions .job-go { margin-top: 0; }
.farm-shop-actions .job-go[data-buy-five] {
    min-width: 48px;
    padding-inline: 8px;
}

.farm-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}
.farm-metrics div {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}
.farm-metrics i { width: 14px; text-align: center; color: var(--accent-text); }
.farm-note {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
}
.farm-pick h2 { margin: 0 0 10px; font-size: 16px; }
.farm-pick-list { display: grid; gap: 8px; margin-bottom: 10px; }

@media (max-width: 380px) {
    .farm-shop-grid,
    .farm-plot-grid { grid-template-columns: 1fr; }
}
@media (min-width: 960px) {
    .farm-shop-grid,
    .farm-plot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
/* farm-img-fix */
.farm-water-ico,
.job-facts .farm-water-ico,
.farm-metrics .farm-water-ico,
.farm-metrics img.farm-water-ico {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
}
.job-facts > li > img:not(.farm-card-good) {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    object-fit: contain !important;
}
.job-photo.farm-shop-photo,
.farm-shop-card .job-photo.farm-shop-photo {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    height: 72px;
    aspect-ratio: auto;
}
.farm-shop-card .farm-shop-photo > img,
.farm-shop-card .job-photo.farm-shop-photo > img {
    width: 48px;
    height: 48px;
    max-width: 70%;
    max-height: 70%;
    margin: 0 auto;
    padding: 0;
    object-fit: contain !important;
    object-position: center center !important;
    display: block;
    background: transparent !important;
}
.farm-shop-rail > .farm-shop-card .farm-shop-photo,
.farm-shop-rail > .farm-shop-card .job-photo.farm-shop-photo {
    height: 76px !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
}
.farm-shop-rail > .farm-shop-card .farm-shop-photo > img,
.farm-shop-rail > .farm-shop-card .job-photo.farm-shop-photo > img {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    padding: 0 !important;
}
@media (min-width: 960px) {
    .farm-shop-rail > .farm-shop-card .farm-shop-photo,
    .farm-shop-rail > .farm-shop-card .job-photo.farm-shop-photo {
        height: 88px !important;
    }
    .farm-shop-rail > .farm-shop-card .farm-shop-photo > img,
    .farm-shop-rail > .farm-shop-card .job-photo.farm-shop-photo > img {
        width: 56px !important;
        height: 56px !important;
        max-width: 56px !important;
        max-height: 56px !important;
    }
}
.farm-scene-photo,
.farm-shop-card .job-photo.farm-scene-photo {
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
}
.farm-scene-photo > img,
.farm-shop-card .farm-scene-photo > img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    padding: 0 !important;
}
.farm-plot-card .job-photo {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
}
.farm-plot-card .job-photo > img:not(.farm-card-good) {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}
.farm-card-badge {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 2 !important;
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}
.farm-card-good {
    position: absolute !important;
    left: 8px !important;
    bottom: 8px !important;
    z-index: 2 !important;
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
    padding: 4px !important;
    border-radius: 10px;
    background: color-mix(in srgb, #0b1210 72%, transparent);
    border: 1px solid color-mix(in srgb, #fff 18%, transparent);
}
.farm-info-hint {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 2 !important;
}
.farm-info-photo img {
    width: 72px !important;
    height: 72px !important;
    object-fit: contain !important;
}
.farm-info-photo.is-scene img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.farm-modal-photo {
    width: 72px !important;
    height: 72px !important;
    display: grid !important;
    place-items: center !important;
}
.farm-modal-photo img {
    width: 56px !important;
    height: 56px !important;
    max-width: 90% !important;
    max-height: 90% !important;
    object-fit: contain !important;
}

/* farm-shop-rail */
.farm-shop-rail {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 8px;
    margin: 0 -2px;
}
.farm-shop-rail > .job-card,
.farm-shop-rail > .farm-shop-card {
    flex: 0 0 min(46%, 148px);
    width: min(46%, 148px);
    max-width: 148px;
    scroll-snap-align: start;
}
.farm-shop-rail > .farm-shop-card .job-body {
    padding: 8px 8px 10px;
    gap: 6px;
}
.farm-shop-rail > .farm-shop-card .job-name h3 {
    font-size: 12px;
    line-height: 1.2;
}
.farm-shop-rail > .farm-shop-card .job-facts {
    gap: 3px;
    font-size: 11px;
}
.farm-shop-rail > .farm-shop-card .job-facts li {
    gap: 5px;
}
.farm-shop-rail > .farm-shop-card .job-go,
.farm-shop-rail > .farm-shop-card .farm-shop-actions .job-go {
    min-height: 32px;
    font-size: 11px;
    padding: 6px 8px;
}
.farm-shop-rail > .farm-shop-card .farm-card-badge {
    top: 6px;
    right: 6px;
    font-size: 10px;
    padding: 2px 6px;
}
.farm-shop-rail::-webkit-scrollbar { height: 5px; }
.farm-shop-rail::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-primary) 22%, transparent);
    border-radius: 999px;
}
@media (max-width: 380px) {
    .farm-shop-rail > .job-card,
    .farm-shop-rail > .farm-shop-card {
        flex-basis: min(42%, 132px);
        width: min(42%, 132px);
        max-width: 132px;
    }
}
@media (min-width: 960px) {
    .farm-shop-rail { gap: 12px; }
    .farm-shop-rail > .job-card,
    .farm-shop-rail > .farm-shop-card {
        flex-basis: 200px;
        width: 200px;
        max-width: 200px;
    }
    .farm-shop-rail > .farm-shop-card .job-body { padding: 12px; }
    .farm-shop-rail > .farm-shop-card .job-name h3 { font-size: 15px; }
    .farm-shop-rail > .farm-shop-card .job-facts { font-size: 13px; }
    .farm-shop-rail > .farm-shop-card .job-go,
    .farm-shop-rail > .farm-shop-card .farm-shop-actions .job-go {
        min-height: 40px;
        font-size: 13px;
    }
}

/* farm-modal-v1 */
.farm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.farm-actions .btn {
    width: auto;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.farm-shop-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
}
.farm-shop-actions .job-go { margin-top: 0; }
.farm-shop-actions .job-go[data-buy-five] {
    min-width: 48px;
    padding-inline: 8px;
}
.farm-modal {
    display: grid;
    gap: 12px;
}
.farm-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.farm-modal-head h2 {
    margin: 0;
    font-size: 16px;
    line-height: 1.25;
}
.farm-modal-close {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--glass-line);
    background: transparent;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}
.farm-modal-facts { margin: 0; }
.farm-modal-list {
    display: grid;
    gap: 10px;
    max-height: min(58vh, 420px);
    overflow: auto;
}
.farm-modal-item {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 8px 10px;
    align-items: center;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}
.farm-modal-item .btn {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 36px;
    margin: 0;
}
.farm-modal-item.is-locked { opacity: 0.7; }
.farm-modal-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.farm-modal-copy strong { font-size: 14px; }
.farm-modal-copy small {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.3;
}

/* farm-rush-ui */
.job-card .job-go.farm-rush-btn.is-rush {
    background: color-mix(in srgb, #c45a78 16%, var(--glass-bg));
    border-color: color-mix(in srgb, #d47892 42%, var(--glass-line));
    color: var(--text-primary);
    gap: 8px;
}
.job-card .job-go.farm-rush-btn.is-rush:hover:not(:disabled) {
    background: color-mix(in srgb, #c45a78 28%, var(--glass-bg));
}
.farm-rush-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}
.farm-rush-btn .farm-rush-copy {
    font-weight: 700;
    font-size: 12px;
}
.farm-rush-btn .farm-rush-cost {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--glass-bg-strong, #1b140c) 55%, transparent);
    border: 1px solid color-mix(in srgb, #fff 16%, transparent);
    line-height: 1;
}
.farm-rush-btn .farm-rush-cost img {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    object-fit: contain !important;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}
.farm-rush-btn .farm-rush-cost b {
    font-size: 12px;
    font-weight: 750;
}
.farm-info-actions .farm-rush-btn.is-modal,
.modal-actions .farm-rush-btn.is-modal {
    flex: 1 1 auto;
    width: auto !important;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, #d47892 45%, transparent);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, #c45a78 38%, var(--glass-bg)),
        color-mix(in srgb, #9a3d5a 44%, var(--glass-bg-strong, var(--glass-bg)))
    );
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.farm-info-actions .farm-rush-btn.is-modal:hover:not(:disabled),
.modal-actions .farm-rush-btn.is-modal:hover:not(:disabled) {
    filter: brightness(1.06);
}
.farm-info-actions .farm-rush-btn.is-modal .farm-rush-cost,
.modal-actions .farm-rush-btn.is-modal .farm-rush-cost {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.22);
}
html[data-theme="light"] .job-card .job-go.farm-rush-btn.is-rush {
    background: color-mix(in srgb, #b94d6c 10%, #fff);
    border-color: color-mix(in srgb, #b94d6c 28%, var(--glass-line));
    color: #7a2d45;
}

/* farm-cta-theme */
.farm-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}
.farm-actions .btn,
.farm-btn-cta,
.farm-btn-buy {
    width: auto !important;
    min-height: 38px !important;
    padding: 8px 14px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    font-weight: 700 !important;
}
.farm-btn-cta,
.farm-actions .btn.farm-btn-cta,
.farm-upgrade-modal .btn.farm-btn-cta,
.farm-info-modal .btn.farm-btn-cta {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--accent) 42%, var(--glass-bg)),
        color-mix(in srgb, var(--accent) 22%, var(--glass-bg-strong, var(--glass-bg)))
    ) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--glass-line)) !important;
    color: var(--accent-text) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
}
.farm-btn-buy,
.farm-actions .btn.farm-btn-buy,
.farm-info-modal .btn.farm-btn-buy,
.farm-modal .btn.farm-btn-buy {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--positive, #34d399) 34%, var(--glass-bg)),
        color-mix(in srgb, var(--positive, #34d399) 18%, var(--glass-bg-strong, var(--glass-bg)))
    ) !important;
    border: 1px solid color-mix(in srgb, var(--positive, #34d399) 48%, var(--glass-line)) !important;
    color: color-mix(in srgb, var(--positive, #34d399) 70%, #fff) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
}
.farm-shop-card .job-go.is-start,
.farm-shop-actions .job-go.is-start {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--accent) 28%, var(--glass-bg)),
        color-mix(in srgb, var(--accent) 14%, var(--glass-bg))
    ) !important;
    border-color: color-mix(in srgb, var(--accent) 48%, var(--glass-line)) !important;
    color: var(--accent-text) !important;
    font-weight: 700;
}
.farm-shop-card .job-go.is-collect,
.farm-shop-actions .job-go.is-collect {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--positive) 26%, var(--glass-bg)),
        color-mix(in srgb, var(--positive) 12%, var(--glass-bg))
    ) !important;
    border-color: color-mix(in srgb, var(--positive) 46%, var(--glass-line)) !important;
    color: var(--positive) !important;
    font-weight: 700;
}
.farm-inline-btn {
    border-radius: 12px !important;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--glass-line)) !important;
    background: color-mix(in srgb, var(--accent) 14%, var(--glass-bg)) !important;
    color: var(--accent-text) !important;
    font-weight: 700;
}

/* farm-modal-polish */
.modal .farm-modal,
.modal-root .farm-modal {
    width: min(420px, 100%);
    margin: 0 auto;
}
.farm-modal {
    display: grid !important;
    gap: 12px !important;
}
.farm-modal-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}
.farm-modal-head h2 {
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
}
.farm-info-hero,
.farm-upgrade-hero {
    display: grid !important;
    grid-template-columns: 84px 1fr !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 12px !important;
    border-radius: 14px !important;
    border: 1px solid var(--glass-line) !important;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--farm-accent, var(--accent)) 10%, transparent), transparent 58%),
        color-mix(in srgb, var(--text-primary) 3%, var(--glass-bg)) !important;
}
.farm-info-photo {
    width: 84px !important;
    height: 84px !important;
    border-radius: 14px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--farm-accent, var(--accent)) 14%, transparent), transparent 68%),
        var(--glass-bg-strong, var(--glass-bg)) !important;
}
.farm-info-photo img {
    width: 68px !important;
    height: 68px !important;
    object-fit: contain !important;
}
.farm-info-photo.is-scene img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.farm-info-blurb {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: var(--text-secondary) !important;
}
.farm-info-modal .farm-info-facts.job-facts,
.farm-modal .farm-modal-facts.job-facts {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.farm-info-modal .farm-info-facts > li,
.farm-modal .farm-modal-facts > li {
    display: grid !important;
    grid-template-columns: 18px 1fr !important;
    gap: 8px !important;
    align-items: start !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    border: 1px solid color-mix(in srgb, var(--glass-line) 80%, transparent);
    background: color-mix(in srgb, var(--text-primary) 3%, transparent);
    font-size: 13px !important;
}
.farm-info-modal .farm-info-facts > li i,
.farm-modal .farm-modal-facts > li i {
    width: 18px;
    text-align: center;
    color: var(--accent-text);
    margin-top: 2px;
}
.farm-info-modal .farm-info-facts li span,
.farm-modal .farm-modal-facts li span {
    display: block !important;
    min-width: 0;
    line-height: 1.35;
}
.farm-info-modal .farm-info-facts li em,
.farm-modal .farm-modal-facts li em {
    font-style: normal !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin-right: 6px !important;
}
.farm-info-modal .farm-info-facts .sikke-amt img,
.farm-modal .farm-modal-facts .sikke-amt img {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
}
.farm-info-actions,
.farm-upgrade-modal .modal-actions,
.farm-modal > .modal-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
.farm-info-actions .btn,
.farm-upgrade-modal .modal-actions .btn,
.farm-modal > .modal-actions .btn {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 100px !important;
    min-height: 38px !important;
    margin: 0 !important;
    border-radius: 12px !important;
}

/* barn buy / animal modals */
.farm-modal-list {
    display: grid !important;
    gap: 10px !important;
    max-height: min(58vh, 440px) !important;
    overflow: auto !important;
}
.farm-modal-item {
    display: grid !important;
    grid-template-columns: 72px 1fr !important;
    gap: 8px 12px !important;
    align-items: center !important;
    padding: 12px !important;
    border-radius: 14px !important;
    border: 1px solid var(--glass-line) !important;
    background: color-mix(in srgb, var(--text-primary) 3%, var(--glass-bg)) !important;
}
.farm-modal-item.farm-modal-animal {
    grid-template-columns: 72px 1fr !important;
}
.farm-modal-item .farm-req-block,
.farm-modal-item .btn {
    grid-column: 1 / -1 !important;
}
.farm-modal-photo {
    width: 72px !important;
    height: 72px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: grid !important;
    place-items: center !important;
    background:
        radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--farm-accent, var(--accent)) 16%, transparent), transparent 65%),
        var(--glass-bg-strong, var(--glass-bg)) !important;
}
.farm-modal-photo img {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain !important;
}
.farm-modal-copy {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
}
.farm-modal-copy strong { font-size: 14px !important; }
.farm-modal-copy small {
    font-size: 11px !important;
    color: var(--text-secondary) !important;
    line-height: 1.35 !important;
}
.farm-req-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)) !important;
    gap: 6px !important;
}
.farm-animal-photo {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    aspect-ratio: auto !important;
    height: 76px !important;
    background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--farm-accent, #93c5fd) 16%, transparent), transparent 68%),
        var(--glass-bg) !important;
}
.farm-animal-photo > img:not(.farm-card-good) {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    object-fit: contain !important;
    padding: 0 !important;
}
.farm-plot-card .farm-animal-photo > img:not(.farm-card-good) {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    object-fit: contain !important;
}

/* farm-modal-buy-fix */
.farm-modal-item .btn:not(.secondary),
.farm-modal-item .btn.farm-btn-buy {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--positive, #34d399) 34%, var(--glass-bg)),
        color-mix(in srgb, var(--positive, #34d399) 18%, var(--glass-bg-strong, var(--glass-bg)))
    ) !important;
    border: 1px solid color-mix(in srgb, var(--positive, #34d399) 48%, var(--glass-line)) !important;
    color: color-mix(in srgb, var(--positive, #34d399) 75%, #fff) !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    min-height: 38px !important;
}
/* disabled style moved to farm-modal-polish2 */

.farm-req-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    grid-template-columns: none !important;
}
.farm-req-chip {
    flex: 1 1 108px;
    min-width: 108px;
}
.farm-modal-item .farm-req-block + .farm-req-block {
    margin-top: 2px;
}

/* farm-modal-polish2 */
.farm-modal-item {
    gap: 10px 12px !important;
    padding: 14px !important;
}
.farm-modal-copy {
    gap: 4px !important;
}
.farm-modal-copy .farm-info-blurb-inline {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}
.farm-modal-item .btn {
    border-radius: 12px !important;
    min-height: 40px !important;
    font-weight: 700 !important;
    width: 100% !important;
}
.farm-modal-item .btn.farm-btn-buy:not(:disabled) {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--positive, #34d399) 38%, var(--glass-bg)),
        color-mix(in srgb, var(--positive, #34d399) 20%, var(--glass-bg-strong, var(--glass-bg)))
    ) !important;
    border: 1px solid color-mix(in srgb, var(--positive, #34d399) 52%, var(--glass-line)) !important;
    color: #ecfdf5 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.farm-modal-item .btn.secondary,
.farm-modal-item .btn:disabled {
    background: color-mix(in srgb, var(--accent) 12%, var(--glass-bg)) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--glass-line)) !important;
    color: var(--text-secondary) !important;
    opacity: 1 !important;
}
.farm-req-label { margin-bottom: 2px; }
.farm-req-block { margin-top: 2px; }
.farm-info-modal .farm-info-facts > li { padding: 9px 11px !important; }

/* farm-shop-photo-compact */
.farm-shop-card .job-photo.farm-shop-photo,
.job-photo.farm-shop-photo {
    height: 72px !important;
}
.farm-shop-card .farm-shop-photo > img,
.farm-shop-card .job-photo.farm-shop-photo > img {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
}
.farm-shop-rail > .farm-shop-card .farm-shop-photo,
.farm-shop-rail > .farm-shop-card .job-photo.farm-shop-photo {
    height: 76px !important;
}
.farm-shop-rail > .farm-shop-card .farm-shop-photo > img,
.farm-shop-rail > .farm-shop-card .job-photo.farm-shop-photo > img {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
}
@media (min-width: 960px) {
    .farm-shop-card .job-photo.farm-shop-photo,
    .job-photo.farm-shop-photo {
        height: 80px !important;
    }
    .farm-shop-card .farm-shop-photo > img,
    .farm-shop-card .job-photo.farm-shop-photo > img {
        width: 52px !important;
        height: 52px !important;
        max-width: 52px !important;
        max-height: 52px !important;
    }
    .farm-shop-rail > .farm-shop-card .farm-shop-photo,
    .farm-shop-rail > .farm-shop-card .job-photo.farm-shop-photo {
        height: 88px !important;
    }
    .farm-shop-rail > .farm-shop-card .farm-shop-photo > img,
    .farm-shop-rail > .farm-shop-card .job-photo.farm-shop-photo > img {
        width: 56px !important;
        height: 56px !important;
        max-width: 56px !important;
        max-height: 56px !important;
    }
}

/* farm-barn-compact */
.farm-plot-card .farm-animal-photo,
.farm-animal-photo {
    height: 92px !important;
    aspect-ratio: auto !important;
}
.farm-plot-card .farm-animal-photo > img:not(.farm-card-good),
.farm-animal-photo > img:not(.farm-card-good) {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    object-fit: contain !important;
}

.farm-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
}
.farm-actions .btn,
.farm-actions .btn.farm-btn-cta,
.farm-actions .btn.farm-btn-buy,
.farm-btn-cta,
.farm-btn-buy {
    width: auto !important;
    flex: 0 1 auto !important;
    min-height: 32px !important;
    height: auto !important;
    padding: 6px 12px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    gap: 6px !important;
}
.farm-actions .btn i,
.farm-btn-cta i,
.farm-btn-buy i {
    font-size: 11px !important;
}
.farm-actions .btn.farm-btn-buy,
.farm-btn-buy {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--positive, #34d399) 28%, var(--glass-bg)),
        color-mix(in srgb, var(--positive, #34d399) 14%, var(--glass-bg-strong, var(--glass-bg)))
    ) !important;
    border: 1px solid color-mix(in srgb, var(--positive, #34d399) 42%, var(--glass-line)) !important;
    color: color-mix(in srgb, var(--positive, #34d399) 72%, #fff) !important;
    box-shadow: none !important;
}
.farm-actions .btn.farm-btn-cta,
.farm-btn-cta {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--accent) 30%, var(--glass-bg)),
        color-mix(in srgb, var(--accent) 14%, var(--glass-bg-strong, var(--glass-bg)))
    ) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--glass-line)) !important;
    color: var(--accent-text) !important;
    box-shadow: none !important;
}

@media (max-width: 959px) {
    .farm-actions {
        gap: 6px !important;
    }
    .farm-actions .btn,
    .farm-actions .btn.farm-btn-cta,
    .farm-actions .btn.farm-btn-buy {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 34px !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    .farm-plot-card .farm-animal-photo,
    .farm-animal-photo {
        height: 86px !important;
    }
    .farm-plot-card .farm-animal-photo > img:not(.farm-card-good),
    .farm-animal-photo > img:not(.farm-card-good) {
        width: 58px !important;
        height: 58px !important;
        max-width: 58px !important;
        max-height: 58px !important;
    }
}

@media (min-width: 960px) {
    .farm-plot-card .farm-animal-photo,
    .farm-animal-photo {
        height: 104px !important;
    }
    .farm-plot-card .farm-animal-photo > img:not(.farm-card-good),
    .farm-animal-photo > img:not(.farm-card-good) {
        width: 72px !important;
        height: 72px !important;
        max-width: 72px !important;
        max-height: 72px !important;
    }
    .farm-actions .btn,
    .farm-actions .btn.farm-btn-cta,
    .farm-actions .btn.farm-btn-buy {
        min-height: 34px !important;
        padding: 7px 14px !important;
        font-size: 13px !important;
    }
}


/* tabbar-side-inset */
@media (max-width: 959px) {
    #tabbar,
    .tabbar:not(.tabbar-right):not(#tabbar-right) {
        left: max(12px, env(safe-area-inset-left, 0px)) !important;
        right: max(12px, env(safe-area-inset-right, 0px)) !important;
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    #tabbar::before,
    .tabbar:not(.tabbar-right):not(#tabbar-right)::before {
        left: 0 !important;
        right: 0 !important;
    }
    .tabbar .tab-main {
        width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .tabbar .tab-extra,
    .tabbar .tab-foot,
    .tabbar.tabbar-right,
    #tabbar-right {
        display: none !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* topbar-mobile-hover-fix */
@media (max-width: 959px) {
    /* brand-lockup has no base transform — kill hover lift only */
    .topbar .brand-lockup:hover {
        transform: none !important;
        filter: none !important;
    }
    /* city-brand is centered with translate(-50%,-50%) — keep it on hover */
    .topbar .city-brand:hover {
        transform: translate(-50%, -50%) !important;
        filter: none !important;
    }
    .topbar .brand-lockup:hover .brand-logo,
    .topbar .city-brand:hover .brand-logo {
        transform: none !important;
    }
    .topbar .topbar-user:hover,
    .topbar .city-player:hover {
        transform: none !important;
    }
    .topbar .icon-btn:hover,
    .topbar .icon-btn.is-active:hover {
        transform: none !important;
        filter: none !important;
    }
    .topbar .icon-btn:hover .icon {
        transform: none !important;
    }
    .resbar .res-chip:hover,
    .res-strip .res-chip:hover {
        transform: none !important;
    }
    .resbar .res-chip:hover img,
    .res-strip .res-chip:hover img,
    .resbar .res-chip:hover .icon,
    .res-strip .res-chip:hover .icon {
        transform: none !important;
    }
}

/* mo-pager-modern */
.mo-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 14px 0 4px;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--glass-line) 88%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
        color-mix(in srgb, var(--glass-bg) 72%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}
.mo-pager-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--glass-line));
    background: color-mix(in srgb, var(--glass-bg-strong, var(--glass-bg)) 78%, transparent);
    color: var(--text-primary);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.mo-pager-btn i {
    font-size: 13px;
    line-height: 1;
}
.mo-pager-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent) 18%, var(--glass-bg));
    border-color: color-mix(in srgb, var(--accent) 48%, var(--glass-line));
    color: var(--accent-text);
}
.mo-pager-btn:active:not(:disabled) {
    transform: translateY(1px);
}
.mo-pager-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    border-color: var(--glass-line);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
    color: var(--text-tertiary);
}
.mo-pager-meta {
    min-width: 92px;
    padding: 6px 14px;
    border-radius: 999px;
    display: grid;
    justify-items: center;
    gap: 1px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--glass-line));
    background: color-mix(in srgb, var(--accent) 12%, var(--glass-bg-strong, var(--glass-bg)));
}
.mo-pager-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    line-height: 1.1;
}
.mo-pager-nums {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1.15;
    color: var(--text-primary);
}
.mo-pager-nums b {
    font-size: 16px;
    font-weight: 800;
    color: var(--accent-text);
}
.mo-pager-nums i {
    font-style: normal;
    font-weight: 600;
    color: var(--text-tertiary);
    font-size: 13px;
}
.mo-pager-nums span {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}
@media (max-width: 380px) {
    .mo-pager {
        gap: 8px;
        padding: 6px;
    }
    .mo-pager-btn {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }
    .mo-pager-meta {
        min-width: 78px;
        padding: 5px 10px;
    }
    .mo-pager-nums b { font-size: 15px; }
}

/* desktop-side-scroll — sağ (ve gerekirse sol) dik menü taşınca kaydırılabilir */
@media (min-width: 960px) {
    .tabbar,
    .tabbar-right {
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* Sağ menü: ana buton listesi kayar, alt foot sabit kalır */
    .tabbar-right .tab-main,
    .tabbar-right .tab-side-main {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--accent) 50%, transparent) transparent;
        padding-right: 2px;
    }
    .tabbar-right .tab-main::-webkit-scrollbar,
    .tabbar-right .tab-side-main::-webkit-scrollbar {
        width: 4px;
    }
    .tabbar-right .tab-main::-webkit-scrollbar-thumb,
    .tabbar-right .tab-side-main::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--accent) 48%, transparent);
        border-radius: 99px;
    }

    .tabbar-right .tab-foot,
    .tabbar-right .tab-side-foot {
        flex: 0 0 auto !important;
        margin-top: 8px !important;
    }

    /* Sol menü: orta (extra) zaten kayıyordu; kısa ekranda da kalsın */
    .tabbar:not(.tabbar-right) .tab-extra {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--accent) 50%, transparent) transparent;
    }
    .tabbar:not(.tabbar-right) .tab-extra::-webkit-scrollbar {
        width: 4px;
    }
    .tabbar:not(.tabbar-right) .tab-extra::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--accent) 48%, transparent);
        border-radius: 99px;
    }

    /* Sağda daha sıkı satırlar — daha fazla buton sığsın */
    .tabbar-right .tab {
        min-height: 52px !important;
        gap: 2px !important;
    }
    .tabbar-right .tab > span:last-child {
        font-size: 10px !important;
        line-height: 1.1 !important;
    }
}

@media (min-width: 960px) and (max-height: 860px) {
    .tabbar-right .tab {
        min-height: 46px !important;
    }
    .tabbar-right {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        gap: 4px !important;
    }
}

/* orders-history-v2 */
.oh-card {
    margin-top: 0;
    border-radius: 18px;
    border: 1px solid var(--glass-line, var(--border-color));
    background: color-mix(in srgb, var(--glass-bg-strong, var(--bg-elevated)) 88%, transparent);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    overflow: hidden;
}
.oh-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid var(--glass-line, var(--border-color));
}
.oh-head h3 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 750;
}
.oh-head h3 i { color: var(--accent-text); }
.oh-shop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent-text);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.oh-shop:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.oh-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--glass-line, var(--border-color));
    padding: 0 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.oh-tabs::-webkit-scrollbar { display: none; }
.oh-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    min-height: 42px;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
}
.oh-tab.is-on { color: var(--text-primary); font-weight: 750; }
.oh-tab.is-on::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, white));
}
.oh-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.oh-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 36px 16px;
    text-align: center;
    color: var(--text-tertiary);
}
.oh-empty i { font-size: 28px; opacity: .45; }
.oh-empty strong { color: var(--text-primary); font-size: 15px; }
.oh-empty p { margin: 0; font-size: 13px; max-width: 280px; }

.oh-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid var(--glass-line, var(--border-color));
    background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
}
.oh-item-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.oh-ico {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 12px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border-color));
    background: var(--accent-soft, color-mix(in srgb, var(--accent) 14%, var(--bg-elevated)));
    color: var(--accent-text);
}
.oh-ico img { width: 24px; height: 24px; object-fit: contain; display: block; }
.oh-ico.is-vip {
    color: #8a6a12;
    border-color: color-mix(in srgb, #e0b43a 40%, var(--border-color));
    background: color-mix(in srgb, #e0b43a 18%, var(--bg-elevated));
}
html[data-theme="dark"] .oh-ico.is-vip {
    color: #ffd56a;
    border-color: color-mix(in srgb, #e0b43a 38%, transparent);
}
.oh-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.oh-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.oh-title strong { font-size: 13.5px; font-weight: 750; }
.oh-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.oh-date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-tertiary);
}
.oh-date i { font-size: 10px; opacity: .7; }
.oh-tx {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    color: var(--text-tertiary);
    background: color-mix(in srgb, var(--bg-primary) 55%, transparent);
    border-radius: 5px;
    padding: 1px 5px;
}
.oh-item-side {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}
.oh-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    min-width: 72px;
}
.oh-price span { font-size: 10px; color: var(--text-tertiary); font-weight: 650; }
.oh-price b { font-size: 13.5px; font-weight: 800; color: var(--accent-text); }

.oh-bonus, .oh-vip, .oh-status, .oh-plat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 750;
    line-height: 1.2;
    border: 1px solid transparent;
}
.oh-bonus {
    color: var(--accent-text);
    background: var(--accent-soft, color-mix(in srgb, var(--accent) 16%, transparent));
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border-color));
}
.oh-vip {
    color: #8a6a12;
    background: color-mix(in srgb, #e0b43a 22%, var(--bg-elevated));
    border-color: color-mix(in srgb, #e0b43a 42%, var(--border-color));
}
html[data-theme="dark"] .oh-vip {
    color: #ffd56a;
    background: color-mix(in srgb, #e0b43a 18%, var(--bg-elevated));
    border-color: color-mix(in srgb, #e0b43a 38%, transparent);
}
.oh-status.is-completed, .oh-status.is-invoiced {
    color: var(--positive);
    background: color-mix(in srgb, var(--positive) 14%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--positive) 32%, var(--border-color));
}
.oh-status.is-pending {
    color: var(--accent-text);
    background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border-color));
}
.oh-status.is-failed {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 12%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border-color));
}
.oh-status.is-canceled {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-secondary) 10%, var(--bg-elevated));
    border-color: var(--border-color);
}
.oh-plat {
    color: var(--text-secondary);
    background: var(--glass-bg, color-mix(in srgb, var(--bg-elevated) 80%, transparent));
    border-color: var(--border-color);
}
.oh-plat.is-web {
    color: var(--accent-text);
    background: var(--accent-soft, color-mix(in srgb, var(--accent) 14%, var(--bg-elevated)));
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border-color));
}
.oh-plat.is-ios {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--text-primary) 8%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--text-primary) 18%, var(--border-color));
}
.oh-plat.is-android {
    color: var(--positive);
    background: color-mix(in srgb, var(--positive) 12%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--positive) 30%, var(--border-color));
}

.oh-detail {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    padding: 5px 10px;
    border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-text);
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.oh-detail:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }

.oh-pager {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.oh-page {
    min-width: 34px;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 9px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
    color: var(--text-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.oh-page.is-on {
    background: color-mix(in srgb, var(--accent) 28%, transparent);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--accent-text);
}

.oh-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 4px;
}
.oh-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--glass-line, var(--border-color));
    background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
    text-align: center;
    min-width: 0;
}
.oh-stat strong {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}
.oh-stat span { font-size: 11px; color: var(--text-tertiary); font-weight: 650; }
.oh-stat .is-accent { color: var(--accent-text); }
.oh-stat .is-ok { color: var(--positive); }
.oh-stat .is-warn { color: var(--accent-text); }
.oh-platform-list { display: flex; flex-direction: column; gap: 8px; }
.oh-platform {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--glass-line, var(--border-color));
    background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
}
.oh-platform-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.oh-platform-left strong { font-size: 13px; font-weight: 750; }

.oh-modal { display: flex; flex-direction: column; gap: 12px; }
.oh-modal-summary {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--glass-line, var(--border-color));
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated));
}
.oh-modal-summary > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.oh-modal-summary strong { font-size: 15px; font-weight: 800; }
.oh-modal-price { font-size: 16px; font-weight: 800; color: var(--accent-text); }
.oh-modal-rows {
    border-radius: 14px;
    border: 1px solid var(--glass-line, var(--border-color));
    overflow: hidden;
}
.oh-modal-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    font-size: 13px;
}
.oh-modal-row + .oh-modal-row { border-top: 1px solid var(--glass-line, var(--border-color)); }
.oh-modal-row span { color: var(--text-secondary); font-weight: 650; }
.oh-modal-row strong { text-align: right; font-weight: 750; overflow-wrap: anywhere; }

@media (max-width: 520px) {
    .oh-item {
        flex-direction: column;
        align-items: stretch;
    }
    .oh-item-side {
        justify-content: space-between;
        padding-top: 2px;
    }
    .oh-stats { grid-template-columns: 1fr; }
}


.home-staff-bottom {
    margin-top: 14px;
}

/* yakut-buy-hover */
.yakut-buy {
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.yakut-pkg {
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
@media (hover: hover) {
    .yakut-buy:hover {
        background: color-mix(in srgb, #c7364a 28%, var(--bg-elevated));
        border-color: color-mix(in srgb, #c7364a 70%, var(--border-color));
        color: #7a1a28;
        transform: translateY(-1px);
        box-shadow: 0 6px 14px color-mix(in srgb, #c7364a 22%, transparent);
    }
    html[data-theme="dark"] .yakut-buy:hover {
        background: color-mix(in srgb, #c7364a 34%, var(--bg-elevated));
        border-color: color-mix(in srgb, #ff8fa3 55%, var(--border-color));
        color: #ffe0e6;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
    }
    .vip-pkg .yakut-buy:hover {
        background: color-mix(in srgb, #e0b43a 30%, var(--bg-elevated));
        border-color: color-mix(in srgb, #e0b43a 75%, var(--border-color));
        color: #6e5410;
        box-shadow: 0 6px 14px color-mix(in srgb, #e0b43a 24%, transparent);
    }
    html[data-theme="dark"] .vip-pkg .yakut-buy:hover {
        background: color-mix(in srgb, #e0b43a 28%, var(--bg-elevated));
        border-color: color-mix(in srgb, #ffc107 55%, var(--border-color));
        color: #fff0c2;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
    }
    .yakut-pkg:hover {
        border-color: color-mix(in srgb, #c7364a 42%, var(--border-color));
        background: color-mix(in srgb, #c7364a 6%, var(--glass-bg));
        transform: translateY(-2px);
        box-shadow: 0 10px 20px color-mix(in srgb, #c7364a 12%, transparent);
    }
    .vip-pkg:hover {
        border-color: color-mix(in srgb, #e0b43a 48%, var(--border-color));
        background: color-mix(in srgb, #e0b43a 8%, var(--glass-bg));
        box-shadow: 0 10px 20px color-mix(in srgb, #e0b43a 14%, transparent);
    }
}
.yakut-buy:active {
    transform: translateY(0);
    box-shadow: none;
}

/* cv-tabs-bottom-center */
.cv-top {
    min-height: 176px;
}
.cv-top-copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    min-height: 176px;
    padding: 12px 12px 10px;
    box-sizing: border-box;
}
.cv-tabs {
    margin-top: auto;
    align-self: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
}
@media (max-width: 520px) {
    .cv-tabs {
        align-self: stretch;
        width: 100%;
        justify-content: flex-start;
    }
}

/* cv-world-map-v1 */
.cv-status-lean .cv-chips-lean {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cv-next-cta {
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
    min-height: 48px;
    margin-bottom: 12px;
    font-size: 14px;
}
.cv-next-cta .fa-chevron-right { margin-left: auto; opacity: .7; }
.cv-map-world {
    display: grid;
    gap: 10px;
    padding: 10px !important;
}
.cv-map-toolbar { margin: 0; }
.cv-map-hint {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.cv-gl-shell {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, #8a6a3a 35%, var(--border-color));
    background: #d8c49a;
    min-height: 320px;
    height: min(52vh, 440px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #f4e7c8 25%, transparent);
}
.cv-gl-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.cv-gl-map .maplibregl-canvas {
    filter: sepia(0.48) saturate(0.72) contrast(1.06) brightness(1.02);
}
html[data-theme="dark"] .cv-gl-map .maplibregl-canvas {
    filter: sepia(0.35) saturate(0.65) contrast(1.08) brightness(0.92);
}
.cv-gl-vignette {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(42, 30, 16, 0.28) 100%),
        linear-gradient(180deg, rgba(90, 60, 30, 0.12), transparent 28%, transparent 72%, rgba(42, 30, 16, 0.22));
    mix-blend-mode: multiply;
}
html[data-theme="dark"] .cv-gl-vignette {
    background:
        radial-gradient(120% 90% at 50% 40%, transparent 35%, rgba(0, 0, 0, 0.45) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 30%);
    mix-blend-mode: normal;
}
.cv-gl-shell .maplibregl-ctrl-group {
    background: color-mix(in srgb, #3a2a18 88%, #000) !important;
    border: 1px solid color-mix(in srgb, #e5c992 35%, transparent) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
}
.cv-gl-shell .maplibregl-ctrl-group button {
    background: transparent !important;
    color: #f4e7c8 !important;
    border-color: color-mix(in srgb, #e5c992 22%, transparent) !important;
}
.cv-gl-pin {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.28));
}
.cv-gl-pin-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, #fff 18%, transparent);
    border: 1px solid color-mix(in srgb, #e5c992 55%, transparent);
    color: #2a1c10;
    backdrop-filter: blur(12px) saturate(1.25);
    -webkit-backdrop-filter: blur(12px) saturate(1.25);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent),
        0 4px 14px color-mix(in srgb, #000 22%, transparent);
}
.cv-gl-pin-dot i {
    font-size: 12px;
    color: #5c4324;
    text-shadow: 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
}
.cv-gl-pin-label {
    margin-top: 0;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, #2a1c10 42%, transparent);
    color: #f8efd8;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid color-mix(in srgb, #e5c992 38%, transparent);
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
}
.cv-gl-pin.is-here .cv-gl-pin-dot {
    background: color-mix(in srgb, #4caf70 28%, transparent);
    border-color: color-mix(in srgb, #7dba7a 60%, transparent);
    color: #f4fff2;
}
.cv-gl-pin.is-here .cv-gl-pin-dot i { color: #1f4a28; }
.cv-gl-pin.is-locked .cv-gl-pin-dot {
    background: color-mix(in srgb, #9a9a9a 28%, transparent);
    border-color: color-mix(in srgb, #ccc 40%, transparent);
}
.cv-gl-pin.is-locked .cv-gl-pin-dot i { color: #333; }
.cv-gl-pin.is-far { opacity: 0.72; }
.cv-gl-pin.is-sel .cv-gl-pin-dot {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent),
        0 0 0 3px color-mix(in srgb, #c4a574 45%, transparent),
        0 6px 16px color-mix(in srgb, #000 28%, transparent);
}
.cv-gl-pin.is-sel .cv-gl-pin-label {
    background: color-mix(in srgb, #5c4324 55%, transparent);
    color: #fff6e4;
    border-color: color-mix(in srgb, #e5c992 55%, transparent);
}
.cv-map-detail .cv-city-detail {
    margin: 0;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, #b0894a 8%, var(--glass-bg));
}
.cv-city-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 8px 0;
    font-size: 12px;
    color: var(--text-secondary);
}
.cv-city-stats strong { color: var(--text-primary); }
.cv-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
}
.cv-pill.is-here {
    color: #1f5a3a;
    border-color: color-mix(in srgb, #3d9a6a 40%, var(--border-color));
    background: color-mix(in srgb, #3d9a6a 14%, transparent);
}
.cv-pill.is-far, .cv-pill.is-lock {
    color: var(--text-secondary);
}
@media (min-width: 720px) {
    .cv-map-world {
        grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.8fr);
        grid-template-areas:
            "hint hint"
            "map detail";
        align-items: start;
    }
    .cv-map-toolbar { grid-area: hint; }
    .cv-gl-shell { grid-area: map; height: min(58vh, 520px); min-height: 380px; }
    .cv-map-detail { grid-area: detail; position: sticky; top: 8px; }
}

/* cv-map-polish-v3 glass + job buttons */
.cv-gl-pin {
    width: 76px;
    align-items: center;
}
.cv-gl-pin-label {
    width: 72px;
    text-align: center;
    box-sizing: border-box;
}
/* Map actions inherit .cv-go.is-start (jobs style) */
.cv-map-detail .cv-go.is-start,
.cv-map-world .cv-go.is-start {
    /* keep job-like accent glass */
}
.cv-map-detail .cv-city-detail {
    border-color: color-mix(in srgb, var(--accent) 22%, var(--glass-line));
}
.cv-up-cost li img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* cv-glass-pins-v14 */




/* cv18: photos inset, cover fill, flat theme bg (no L→R darken) */
.cv-status.cv-card,
.cv-status-lean.cv-card,
section.cv-status {
    padding: 14px !important;
    gap: 14px !important;
    background: var(--bg-elevated) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, #000 6%, transparent) !important;
}
.cv-status {
    grid-template-columns: 84px 1fr !important;
    align-items: center !important;
}
.cv-status-ava {
    width: 84px !important;
    height: 84px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border-color)) !important;
    background: color-mix(in srgb, var(--accent) 6%, var(--bg-secondary)) !important;
    flex: none !important;
    box-shadow: none !important;
}
.cv-status-ava::before,
.cv-status-ava::after,
.cv-camel-photo::before,
.cv-camel-photo::after,
.cv-camel-card .cv-card-photo::before,
.cv-camel-card .cv-card-photo::after {
    content: none !important;
    display: none !important;
}
.cv-status-ava img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 62% 48% !important;
    background: transparent !important;
    padding: 0 !important;
    display: block !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}
.cv-camel-card.cv-card,
article.cv-camel-card {
    padding: 14px !important;
    gap: 14px !important;
}
.cv-camel-card {
    grid-template-columns: none !important;
}
@media (min-width: 560px) {
    .cv-camel-card {
        grid-template-columns: 104px 1fr !important;
        align-items: start !important;
        gap: 14px !important;
    }
    .cv-camel-card .cv-card-photo,
    .cv-camel-card .cv-camel-photo {
        aspect-ratio: 1 !important;
        min-height: 0 !important;
        max-width: 104px !important;
        width: 104px !important;
        height: 104px !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        margin: 0 !important;
    }
}
.cv-camel-photo,
.cv-camel-card .cv-card-photo {
    background: color-mix(in srgb, var(--accent) 6%, var(--bg-secondary)) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border-color)) !important;
    max-width: 120px;
    width: min(120px, 38vw);
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto 10px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: none !important;
}
.cv-camel-photo img,
.cv-camel-card .cv-card-photo img {
    object-fit: contain !important;
    object-position: center 55% !important;
    width: 100%;
    height: 100%;
    padding: 8px 6px 4px;
    box-sizing: border-box;
    background: transparent !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}

/* hide-tabbar-chat */
@media (max-width: 959px) {
    body[data-screen="chat"] #tabbar,
    body[data-screen="chat"] .tabbar:not(.tabbar-right),
    body[data-screen="thread"] #tabbar,
    body[data-screen="thread"] .tabbar:not(.tabbar-right),
    body[data-screen="inbox"] #tabbar,
    body[data-screen="inbox"] .tabbar:not(.tabbar-right) {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    body[data-screen="chat"] .view,
    body[data-screen="thread"] .view,
    body[data-screen="inbox"] .view {
        padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }
    body[data-screen="chat"]:has(#view .composer) #to-top,
    body[data-screen="thread"]:has(#view .composer) #to-top {
        bottom: calc(68px + env(safe-area-inset-bottom)) !important;
    }
}


/* cv16: header banner framing */
.cv-top-img {
    object-fit: cover;
    object-position: 62% 42%;
    filter: saturate(1.05) contrast(1.04) brightness(0.96);
}
.cv-top {
    min-height: 168px;
}


/* cv17: camel pay row + compact cargo */
.cv-buy-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.cv-pay {
    gap: 6px !important;
    min-height: 40px !important;
}
.cv-pay img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}
.cv-cargo-panel {
    padding: 10px !important;
    display: grid;
    gap: 10px;
}
.cv-caphead { display: grid; gap: 6px; }
.cv-caphead .cv-capline {
    margin: 0;
    font-size: 12px;
}
.cv-warn-inline {
    margin: 0;
    font-size: 12px;
}
.cv-cargo-split {
    display: grid;
    gap: 10px;
}
@media (min-width: 640px) {
    .cv-cargo-split {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        align-items: start;
    }
}
.cv-cargo-col {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}
.cv-col-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 2px;
}
.cv-col-head i {
    font-size: 11px;
    color: var(--accent-text, var(--accent));
}
.cv-col-head h3 {
    margin: 0;
    font-size: 12px;
    font-weight: 750;
}
.cv-cargo-col .cv-list {
    gap: 6px;
}
.cv-item-compact {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 8px !important;
    margin: 0;
    border-radius: 10px;
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--glass-bg) 88%, transparent);
}
.cv-item-compact img {
    width: 36px !important;
    height: 36px !important;
}
.cv-item-compact .cv-item-body {
    display: grid;
    gap: 6px;
    min-width: 0;
}
.cv-item-compact .cv-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 12px;
}
.cv-item-compact .cv-item-top strong {
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cv-item-qty {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    font-weight: 700;
}
.cv-qty {
    display: flex !important;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}
.cv-qty-step {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    padding: 2px;
    border-radius: 8px;
    border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}
.cv-qty-step input {
    width: 36px !important;
    min-width: 0;
    height: 28px;
    border: 0 !important;
    background: transparent !important;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    padding: 0;
}
.cv-qty-step button[data-qty] {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
    flex: none;
}
.cv-qty-step .cv-qty-max {
    width: auto !important;
    padding: 0 6px;
    font-size: 10px;
    font-weight: 750;
    color: var(--accent-text, var(--accent));
}
.cv-qty-act {
    width: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    flex: none;
}
.cv-qty-act span { display: none; }
.cv-empty-mini {
    margin: 4px 0;
    font-size: 12px;
}
.cv-market-link {
    margin-top: 2px;
}


/* caravan-sea-pins-v1 */
.cv-gl-pin.is-sea .cv-gl-pin-dot,
.cv-gl-pin.is-port .cv-gl-pin-dot {
    background: linear-gradient(180deg, #cfefff, #4f9ec8);
    border-color: #1e6a96;
    color: #0d3550;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent),
        0 0 0 3px color-mix(in srgb, #3a9fd4 28%, transparent);
}
.cv-gl-pin.is-sea .cv-gl-pin-label,
.cv-gl-pin.is-port .cv-gl-pin-label {
    background: color-mix(in srgb, #0c2f45 72%, transparent);
    border-color: color-mix(in srgb, #7ec8ef 42%, transparent);
    color: #e8f6ff;
}
.cv-gl-pin.is-sea.is-sel .cv-gl-pin-dot,
.cv-gl-pin.is-port.is-sel .cv-gl-pin-dot {
    box-shadow: 0 0 0 4px color-mix(in srgb, #3a9fd4 55%, transparent);
}
.cv-gl-pin.is-sea.is-here .cv-gl-pin-dot,
.cv-gl-pin.is-port.is-here .cv-gl-pin-dot {
    background: linear-gradient(180deg, #f0d59a, #c4a574);
    border-color: #9a743f;
    color: #2a1c10;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent),
        0 0 0 4px color-mix(in srgb, #c9a45c 34%, transparent);
}
.cv-gl-pin.is-sea.is-here .cv-gl-pin-label,
.cv-gl-pin.is-port.is-here .cv-gl-pin-label {
    background: color-mix(in srgb, #1a140f 68%, transparent);
    border-color: color-mix(in srgb, #f4e7c8 28%, transparent);
    color: #f4e7c8;
}
.cv-gl-pin.is-sea.is-locked .cv-gl-pin-dot,
.cv-gl-pin.is-port.is-locked .cv-gl-pin-dot {
    background: linear-gradient(180deg, #5a6e7a, #3d4c56);
    border-color: #2f3d47;
    color: #c5d4de;
    box-shadow: none;
}

/* fix-home-icons-oct23 */
/* home-icons-fix */
.home-stats-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 72px;
    padding: 10px 8px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--accent) 12%, var(--glass-bg-strong));
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
}
.home-stats-btn i {
    font-size: 20px;
    line-height: 1;
    color: var(--accent-text);
}
.home-stats-btn span {
    font-size: 11px;
    font-weight: 750;
    text-align: center;
    line-height: 1.2;
}
.home-stats-btn:active { transform: translateY(1px); }

/* Force consistent home tool images (override older 45px/cover rules) */
.home-tool img,
.home-tool .home-friends,
.home-tool .home-online,
.home-tool .home-leaders,
.home-tool .home-hunt-ico,
.home-tool .home-caravan,
.home-tool .home-merchant,
.home-tool .home-tax,
.home-tool .home-health,
.home-tool .home-gazete,
.home-settings .home-settings-img,
.home-help .home-help-img,
.home-friends,
.home-online,
.home-leaders {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto;
}

/* Map pin icons centered in circle */
.pin-ico {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 50%;
    display: grid !important;
    place-items: center !important;
    place-content: center !important;
    overflow: hidden;
    flex: none;
    transform: none !important;
}
.pin-ico > *,
.pin-ico .icon,
.pin-ico img,
.pin-ico .farm-pin-img,
.pin .farm-pin-img,
.pin-ico svg,
.farm-pin-img {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    transform: none !important;
}
.pin:hover .pin-ico {
    transform: none !important;
}
.pin:hover .pin-ico > *,
.pin:hover .pin-ico img,
.pin:hover .farm-pin-img,
.pin:hover .pin-ico svg {
    transform: scale(1.06) !important;
}


/* Sayfa: harita sekmesinde genişle */
.cv-page.is-map {
    max-width: none !important;
    width: 100%;
}
.cv-page.is-map .cv-body {
    display: block;
}

/* Tam ekran harita kabuğu — eski grid/detail layout'u iptal */
.cv-map-wrap.cv-map-full {
    display: block !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
}
.cv-map-wrap.cv-map-full .cv-gl-shell {
    grid-area: auto !important;
    position: relative !important;
    width: 100% !important;
    height: calc(100dvh - 168px) !important;
    min-height: 360px !important;
    max-height: none !important;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, #b0894a 28%, var(--border-color));
    background: #cbb892;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent),
        0 10px 28px rgba(40, 28, 12, .18);
}
@media (min-width: 900px) {
    .cv-map-wrap.cv-map-full .cv-gl-shell {
        height: calc(100dvh - 156px) !important;
        min-height: min(72vh, 720px) !important;
        border-radius: 18px;
    }
}
@media (min-width: 1200px) {
    .cv-map-wrap.cv-map-full .cv-gl-shell {
        height: calc(100dvh - 148px) !important;
        min-height: 640px !important;
    }
}

.cv-gl-map {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
.cv-gl-map .maplibregl-canvas {
    filter: sepia(.28) saturate(.85) contrast(1.05) brightness(.96);
}
html[data-theme="dark"] .cv-gl-map .maplibregl-canvas {
    filter: sepia(.22) saturate(.75) contrast(1.08) brightness(.78);
}

.cv-gl-vignette {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 2 !important;
    mix-blend-mode: normal !important;
    background:
        radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(40, 28, 12, .22) 100%),
        linear-gradient(180deg, rgba(40, 28, 12, .12), transparent 28%, transparent 72%, rgba(40, 28, 12, .16)) !important;
}
html[data-theme="dark"] .cv-gl-vignette {
    background:
        radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(40, 28, 12, .22) 100%),
        linear-gradient(180deg, rgba(40, 28, 12, .12), transparent 28%, transparent 72%, rgba(40, 28, 12, .16)) !important;
    mix-blend-mode: normal !important;
}

/* Zoom araçları — eski grid-area:hint kuralını ez */
.cv-map-wrap.cv-map-full .cv-map-toolbar,
.cv-gl-shell .cv-map-toolbar {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 0 !important;
    grid-area: auto !important;
}
.cv-map-tool {
    appearance: none;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    border: 1px solid color-mix(in srgb, #f4e7c8 35%, transparent) !important;
    background: color-mix(in srgb, #1a140f 55%, transparent) !important;
    color: #f4e7c8 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
    cursor: pointer;
    display: grid !important;
    place-items: center !important;
}
.cv-map-tool:hover {
    background: color-mix(in srgb, #1a140f 72%, transparent) !important;
    color: #fff !important;
}

/* İpucu — eski flex satır stilini ez */
.cv-map-wrap.cv-map-full .cv-map-hint,
.cv-gl-shell .cv-map-hint {
    position: absolute !important;
    left: 10px !important;
    bottom: 10px !important;
    top: auto !important;
    right: auto !important;
    z-index: 4 !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    max-width: min(70%, 260px) !important;
    border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, #f4e7c8 28%, transparent) !important;
    background: color-mix(in srgb, #1a140f 52%, transparent) !important;
    color: color-mix(in srgb, #f4e7c8 88%, #fff) !important;
    font-size: .68rem !important;
    line-height: 1.25 !important;
    display: block !important;
    align-items: unset !important;
    gap: 0 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none !important;
    grid-area: auto !important;
}

.cv-gl-shell .maplibregl-ctrl-bottom-right {
    right: 10px;
    bottom: 10px;
}
.cv-gl-shell .maplibregl-ctrl-group {
    background: color-mix(in srgb, #1a140f 72%, transparent) !important;
    border: 1px solid color-mix(in srgb, #f4e7c8 28%, transparent) !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: none !important;
}
.cv-gl-shell .maplibregl-ctrl-group button {
    background: transparent !important;
    color: #f4e7c8 !important;
    width: 32px !important;
    height: 32px !important;
}

/* Pinler */
.cv-gl-pin {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    width: auto !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    cursor: pointer;
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .32));
    transition: transform .18s ease;
}
.cv-gl-pin:hover { transform: translateY(-2px); }
.cv-gl-pin-dot {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(180deg, #f8f0de, #e6d3ad) !important;
    border: 2px solid #8a6a3d !important;
    color: #2a1c10 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent),
        0 0 0 3px color-mix(in srgb, #c9a45c 18%, transparent) !important;
}
.cv-gl-pin-dot i {
    font-size: .76rem !important;
    line-height: 1 !important;
    color: inherit !important;
    text-shadow: none !important;
}
.cv-gl-pin-label {
    width: auto !important;
    max-width: 92px !important;
    margin: 0 !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, #1a140f 68%, transparent) !important;
    border: 1px solid color-mix(in srgb, #f4e7c8 28%, transparent) !important;
    color: #f4e7c8 !important;
    font-size: .64rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    box-sizing: border-box !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.cv-gl-pin.is-here .cv-gl-pin-dot {
    background: linear-gradient(180deg, #f0d59a, #c4a574) !important;
    border-color: #9a743f !important;
    color: #2a1c10 !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent),
        0 0 0 4px color-mix(in srgb, #c9a45c 34%, transparent) !important;
}
.cv-gl-pin.is-here .cv-gl-pin-dot i { color: inherit !important; }
.cv-gl-pin.is-locked .cv-gl-pin-dot {
    background: linear-gradient(180deg, #7a7368, #565048) !important;
    color: #ddd !important;
    border-color: #4a453e !important;
    box-shadow: none !important;
}
.cv-gl-pin.is-locked .cv-gl-pin-dot i { color: inherit !important; }
.cv-gl-pin.is-far { opacity: .7; }
.cv-gl-pin.is-sel .cv-gl-pin-dot {
    box-shadow: 0 0 0 4px color-mix(in srgb, #b0894a 60%, transparent) !important;
}
.cv-gl-pin.is-sel .cv-gl-pin-label {
    border-color: color-mix(in srgb, #b0894a 55%, transparent) !important;
    background: color-mix(in srgb, #1a140f 68%, transparent) !important;
    color: #f4e7c8 !important;
}
.cv-gl-pin.is-sea .cv-gl-pin-dot,
.cv-gl-pin.is-port .cv-gl-pin-dot {
    background: linear-gradient(180deg, #cfefff, #4f9ec8) !important;
    border-color: #1e6a96 !important;
    color: #0d3550 !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent),
        0 0 0 3px color-mix(in srgb, #3a9fd4 28%, transparent) !important;
}
.cv-gl-pin.is-sea .cv-gl-pin-label,
.cv-gl-pin.is-port .cv-gl-pin-label {
    background: color-mix(in srgb, #0c2f45 72%, transparent) !important;
    border-color: color-mix(in srgb, #7ec8ef 42%, transparent) !important;
    color: #e8f6ff !important;
}
.cv-gl-pin.is-sea.is-sel .cv-gl-pin-dot,
.cv-gl-pin.is-port.is-sel .cv-gl-pin-dot {
    box-shadow: 0 0 0 4px color-mix(in srgb, #3a9fd4 55%, transparent) !important;
}
.cv-gl-pin.is-sea.is-here .cv-gl-pin-dot,
.cv-gl-pin.is-port.is-here .cv-gl-pin-dot {
    background: linear-gradient(180deg, #f0d59a, #c4a574) !important;
    border-color: #9a743f !important;
    color: #2a1c10 !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent),
        0 0 0 4px color-mix(in srgb, #c9a45c 34%, transparent) !important;
}
.cv-gl-pin.is-sea.is-here .cv-gl-pin-label,
.cv-gl-pin.is-port.is-here .cv-gl-pin-label {
    background: color-mix(in srgb, #1a140f 68%, transparent) !important;
    border-color: color-mix(in srgb, #f4e7c8 28%, transparent) !important;
    color: #f4e7c8 !important;
}
.cv-gl-pin.is-sea.is-locked .cv-gl-pin-dot,
.cv-gl-pin.is-port.is-locked .cv-gl-pin-dot {
    background: linear-gradient(180deg, #5a6e7a, #3d4c56) !important;
    border-color: #2f3d47 !important;
    color: #c5d4de !important;
    box-shadow: none !important;
}

html[data-theme="light"] .cv-gl-shell { background: #e8d7b0; }
html[data-theme="light"] .cv-map-tool {
    background: color-mix(in srgb, #fff 72%, transparent) !important;
    color: #3a2f22 !important;
    border-color: color-mix(in srgb, #8a6a3d 28%, transparent) !important;
}
html[data-theme="light"] .cv-map-hint {
    background: color-mix(in srgb, #fff 78%, transparent) !important;
    color: #3a2f22 !important;
    border-color: color-mix(in srgb, #8a6a3d 24%, transparent) !important;
}

/* Araçlar paneli */
.cv-fleet-panel .cv-h { margin: 14px 0 8px; }
.cv-vehicle-grid {
    display: grid;
    gap: 12px;
}
@media (min-width: 720px) {
    .cv-vehicle-grid { grid-template-columns: 1fr 1fr; }
}
.cv-vehicle-card {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, #b0894a 28%, var(--border-color));
    background: color-mix(in srgb, var(--bg-elevated) 92%, #b0894a);
}
.cv-vehicle-card.is-sea {
    border-color: color-mix(in srgb, #2f7fb8 40%, var(--border-color));
    background: color-mix(in srgb, var(--bg-elevated) 90%, #2f7fb8);
}
.cv-vehicle-ico {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, #1a140f 12%, transparent);
    color: #8a6a3d;
    font-size: 1.35rem;
}
.cv-vehicle-card.is-sea .cv-vehicle-ico { color: #2f7fb8; }
.cv-vehicle-body header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.cv-vehicle-body h3 { margin: 0; font-size: 1rem; }
.cv-vehicle-body p { margin: 0 0 8px; font-size: .86rem; opacity: .88; }
.cv-vehicle-body ul {
    margin: 0 0 10px;
    padding-left: 1.1rem;
    font-size: .84rem;
}
.cv-yakut-badge {
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, #7c3aed 22%, transparent);
    border: 1px solid color-mix(in srgb, #a78bfa 40%, transparent);
    color: #c4b5fd;
    white-space: nowrap;
}
.cv-buy-row { display: grid; gap: 8px; }
.cv-fleet-panel .cv-buy-row .btn { width: 100%; }
.cv-fleet-panel .cv-muted {
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: .86rem;
}



/* caravan-chips-mobile-v1 */
@media (max-width: 720px) {
    .cv-page .cv-status,
    section.cv-status {
        grid-template-columns: 48px minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 10px !important;
    }
    .cv-page .cv-status-ava,
    .cv-status-ava {
        width: 48px !important;
        height: 48px !important;
        border-radius: 12px !important;
    }
    .cv-page .cv-status-top,
    .cv-status-top {
        margin-bottom: 6px !important;
        gap: 6px !important;
    }
    .cv-page .cv-name,
    .cv-name {
        font-size: .95rem !important;
    }
    .cv-page .cv-badge,
    .cv-badge {
        font-size: .62rem !important;
        padding: 3px 6px !important;
    }
    .cv-page .cv-chips,
    .cv-chips,
    .cv-status-lean .cv-chips-lean {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 4px !important;
        min-width: 0 !important;
    }
    .cv-page .cv-chip,
    button.cv-chip,
    .cv-chip {
        appearance: none !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 3px 6px !important;
        min-height: 0 !important;
        max-width: 100% !important;
        border-radius: 999px !important;
        font: 650 .62rem/1.1 inherit !important;
        font-size: .62rem !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }
    .cv-page .cv-chip i,
    button.cv-chip i,
    .cv-chip i {
        font-size: .58rem !important;
        line-height: 1 !important;
        flex: none !important;
    }
    .cv-page .cv-chip strong,
    button.cv-chip strong,
    .cv-chip strong {
        font-size: .62rem !important;
        font-weight: 650 !important;
        line-height: 1.1 !important;
    }
    .cv-page .cv-chip .sikke-inline img,
    .cv-page .cv-chip .cv-earn img,
    .cv-chip .sikke-inline img,
    .cv-chip .cv-earn img {
        width: .7em !important;
        height: .7em !important;
    }
    .cv-page .cv-tripbar-top,
    .cv-tripbar-top {
        font-size: .72rem !important;
    }
}
@media (max-width: 380px) {
    .cv-page .cv-chip,
    button.cv-chip,
    .cv-chip {
        padding: 2px 5px !important;
        font-size: .58rem !important;
        gap: 2px !important;
    }
    .cv-page .cv-chip i,
    .cv-chip i {
        font-size: .55rem !important;
    }
}

/* caravan-ava-clear-v1 */
.cv-page .cv-status-ava,
section.cv-status .cv-status-ava,
.cv-status-ava {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}
.cv-page .cv-status-ava::before,
.cv-page .cv-status-ava::after,
.cv-status-ava::before,
.cv-status-ava::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}
.cv-page .cv-status-ava img,
.cv-status-ava img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}


/* Yükle/boşalt varken tek kabukta iç içe */
.cv-badge-card:has(.cv-qty) {
    border: 1px solid color-mix(in srgb, #b0894a 26%, var(--border-color));
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-elevated) 90%, #b0894a);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    overflow: hidden;
    min-width: min(100%, 168px);
}
.cv-badge-card:has(.cv-qty) .cv-badge {
    width: 100%;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 6px 8px 6px 6px;
}
.cv-badge-card:has(.cv-qty) .cv-qty {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    padding: 6px 8px 8px;
    border-top: 1px solid color-mix(in srgb, #b0894a 18%, var(--border-color));
    background: color-mix(in srgb, #1a140f 10%, transparent);
}
.cv-badge-card .cv-qty input {
    width: 42px;
    padding: 4px;
    font-size: .78rem;
    text-align: center;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.cv-badge-card .cv-qty button[data-qty] {
    min-width: 28px;
    height: 28px;
    font-size: .78rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.cv-badge-card .cv-qty .btn {
    min-height: 28px;
    padding: 4px 8px;
    font-size: .72rem;
}

@supports not selector(:has(*)) {
    .cv-badge-card {
        border: 1px solid color-mix(in srgb, #b0894a 22%, var(--border-color));
        border-radius: 16px;
        background: color-mix(in srgb, var(--bg-elevated) 90%, #b0894a);
        padding: 0;
        overflow: hidden;
    }
    .cv-badge-card .cv-badge {
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        width: 100%;
        box-sizing: border-box;
    }
    .cv-badge-card .cv-qty {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        border-top: 1px solid color-mix(in srgb, #b0894a 18%, var(--border-color));
        padding: 6px 8px 8px;
    }
}

/* caravan-trip-card-v1 */
.cv-trip-card {
    display: grid;
    gap: 14px;
    padding: 16px !important;
    border-radius: 20px !important;
    border: 1px solid color-mix(in srgb, #b0894a 26%, var(--border-color)) !important;
    background:
        linear-gradient(165deg,
            color-mix(in srgb, #b0894a 12%, var(--bg-elevated)),
            var(--bg-elevated) 42%) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}
.cv-trip-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.cv-trip-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 750;
    color: #2a1c10;
    background: linear-gradient(180deg, #e8d0a0, #c4a574);
    border: 1px solid color-mix(in srgb, #f4e7c8 35%, #b0894a);
}
.cv-trip-live i { font-size: .7rem; }
.cv-trip-eta {
    font-size: 1.05rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.cv-trip-route {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, #b0894a 18%, var(--border-color));
    background: color-mix(in srgb, #1a140f 12%, var(--bg-secondary));
}
.cv-trip-city {
    font-size: .92rem;
    font-weight: 750;
    line-height: 1.2;
    min-width: 0;
}
.cv-trip-city.is-to { text-align: right; }
.cv-trip-path {
    width: 54px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, #b0894a 28%, var(--border-color));
    position: relative;
    display: grid;
    place-items: center;
}
.cv-trip-path i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(180deg, #e8d0a0, #c4a574);
    box-shadow: 0 0 0 3px color-mix(in srgb, #c4a574 28%, transparent);
}
.cv-trip-progress {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}
.cv-trip-progress .cv-progress {
    margin: 0;
    height: 10px;
}
.cv-trip-progress > span {
    font-size: .78rem;
    font-weight: 750;
    color: var(--text-secondary);
    min-width: 2.4rem;
    text-align: right;
}
.cv-trip-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.cv-trip-stat {
    display: grid;
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 2px;
    align-items: center;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, #b0894a 16%, var(--border-color));
    background: color-mix(in srgb, var(--bg-secondary) 92%, #b0894a);
}
.cv-trip-stat i {
    grid-row: 1 / span 2;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: .75rem;
    color: #c4a574;
    background: color-mix(in srgb, #b0894a 16%, transparent);
}
.cv-trip-stat span {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.cv-trip-stat strong {
    font-size: .92rem;
    font-weight: 750;
    line-height: 1.15;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.cv-trip-stat .sikke-inline img {
    width: .9em;
    height: .9em;
}

.cv-trip-idle {
    text-align: center;
    padding: 22px 16px !important;
    display: grid;
    gap: 12px;
    justify-items: center;
}
.cv-trip-idle-ico {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    color: #c4a574;
    background: color-mix(in srgb, #b0894a 14%, var(--bg-secondary));
    border: 1px solid color-mix(in srgb, #b0894a 22%, var(--border-color));
}
.cv-trip-idle p {
    margin: 0;
    max-width: 28rem;
    color: var(--text-secondary);
    font-size: .9rem;
    line-height: 1.4;
}
.cv-trip-idle-actions {
    display: grid;
    gap: 8px;
    width: min(100%, 280px);
}
.cv-trip-idle-actions .btn { width: 100%; }

@media (max-width: 420px) {
    .cv-trip-stats { gap: 6px; }
    .cv-trip-stat { padding: 8px; }
    .cv-trip-stat strong { font-size: .84rem; }
    .cv-trip-city { font-size: .84rem; }
}


/* caravan-top-mobile-v2 */
@media (max-width: 720px) {
    .cv-page .cv-top,
    header.cv-top,
    .cv-top {
        min-height: 0 !important;
        border-radius: 16px !important;
        margin-bottom: 10px !important;
    }
    .cv-page .cv-top-copy,
    .cv-top-copy {
        min-height: 0 !important;
        height: auto !important;
        gap: 10px !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    .cv-page .cv-top-row,
    .cv-top-row {
        gap: 8px !important;
        align-items: flex-start !important;
    }
    .cv-page .cv-top-row .back-btn,
    .cv-top-row .back-btn {
        padding: 6px 8px !important;
        border-radius: 10px !important;
        flex: 0 0 auto !important;
    }
    .cv-page .cv-top-text,
    .cv-top-text {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }
    .cv-page .cv-top-text h1,
    .cv-top-text h1 {
        font-size: 1.08rem !important;
        line-height: 1.15 !important;
    }
    .cv-page .cv-top-text p,
    .cv-top-text p {
        margin-top: 2px !important;
        font-size: .72rem !important;
        line-height: 1.25 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .cv-page .cv-tabs,
    .cv-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        gap: 6px !important;
        align-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 2px 0 0 !important;
        padding: 4px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        justify-content: flex-start !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
        overscroll-behavior-x: contain;
    }
    .cv-page .cv-tabs::-webkit-scrollbar,
    .cv-tabs::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    .cv-page .cv-tab,
    button.cv-tab,
    .cv-tab {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
        min-height: 36px !important;
        height: auto !important;
        display: inline-flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 7px 11px !important;
        border-radius: 999px !important;
        font-size: .72rem !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        line-height: 1.1 !important;
        box-sizing: border-box !important;
    }
    .cv-page .cv-tab span,
    .cv-tab span {
        max-width: none;
        overflow: visible;
        text-overflow: clip;
    }
    .cv-page .cv-tab i,
    button.cv-tab i,
    .cv-tab i {
        font-size: .78rem !important;
        line-height: 1 !important;
        margin: 0 !important;
    }
}
@media (min-width: 721px) {
    .cv-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        align-self: stretch;
        overflow: visible;
    }
    .cv-tab {
        flex: 0 1 auto;
        flex-direction: row;
    }
}

/* caravan-cargo-badges-v3 */
.cv-list-badges {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}
.cv-badge-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    flex: 0 1 auto;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
}
.cv-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: 40px;
    padding: 4px 5px 4px 4px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #b0894a 28%, var(--border-color));
    background:
        linear-gradient(180deg,
            color-mix(in srgb, #b0894a 12%, var(--bg-elevated)),
            color-mix(in srgb, var(--bg-elevated) 92%, #1a140f));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
        0 4px 12px rgba(0, 0, 0, .12);
}
.cv-badge img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 50%;
    flex: 0 0 auto;
    padding: 3px;
    box-sizing: border-box;
    background: color-mix(in srgb, #1a140f 28%, transparent);
    border: 1px solid color-mix(in srgb, #f4e7c8 14%, transparent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
}
.cv-badge strong {
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 6.8rem;
}
.cv-badge-qty {
    margin-left: auto;
    min-width: 1.65rem;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 750;
    text-align: center;
    color: #2a1c10;
    background: linear-gradient(180deg, #e8d0a0, #c4a574);
    border: 1px solid color-mix(in srgb, #f4e7c8 40%, #b0894a);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent);
}

/* Yükle/boşalt varken tek kabukta iç içe */
.cv-badge-card:has(.cv-qty) {
    border: 1px solid color-mix(in srgb, #b0894a 26%, var(--border-color));
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-elevated) 90%, #b0894a);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    overflow: hidden;
    min-width: min(100%, 168px);
}
.cv-badge-card:has(.cv-qty) .cv-badge {
    width: 100%;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 6px 8px 6px 6px;
}
.cv-badge-card:has(.cv-qty) .cv-qty {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    padding: 6px 8px 8px;
    border-top: 1px solid color-mix(in srgb, #b0894a 18%, var(--border-color));
    background: color-mix(in srgb, #1a140f 10%, transparent);
}
.cv-badge-card .cv-qty input {
    width: 42px;
    padding: 4px;
    font-size: .78rem;
    text-align: center;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.cv-badge-card .cv-qty button[data-qty] {
    min-width: 28px;
    height: 28px;
    font-size: .78rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.cv-badge-card .cv-qty .btn {
    min-height: 28px;
    padding: 4px 8px;
    font-size: .72rem;
}

@supports not selector(:has(*)) {
    .cv-badge-card {
        border: 1px solid color-mix(in srgb, #b0894a 22%, var(--border-color));
        border-radius: 16px;
        background: color-mix(in srgb, var(--bg-elevated) 90%, #b0894a);
        padding: 0;
        overflow: hidden;
    }
    .cv-badge-card .cv-badge {
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        width: 100%;
        box-sizing: border-box;
    }
    .cv-badge-card .cv-qty {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        border-top: 1px solid color-mix(in srgb, #b0894a 18%, var(--border-color));
        padding: 6px 8px 8px;
    }
}

@media (max-width: 720px) {
    .cv-list-badges {
        gap: 5px !important;
    }
    .cv-badge {
        gap: 5px !important;
        min-height: 28px !important;
        padding: 2px 4px 2px 2px !important;
    }
    .cv-badge img {
        width: 22px !important;
        height: 22px !important;
        padding: 2px !important;
    }
    .cv-badge strong {
        font-size: .66rem !important;
        max-width: 4.8rem !important;
    }
    .cv-badge-qty {
        min-width: 1.25rem !important;
        padding: 1px 5px !important;
        font-size: .62rem !important;
    }
    .cv-badge-card:has(.cv-qty) {
        min-width: min(100%, 132px) !important;
        border-radius: 14px !important;
    }
    .cv-badge-card:has(.cv-qty) .cv-badge {
        padding: 4px 6px 4px 4px !important;
    }
    .cv-badge-card:has(.cv-qty) .cv-qty {
        gap: 3px !important;
        padding: 4px 6px 6px !important;
    }
    .cv-badge-card .cv-qty input {
        width: 34px !important;
        padding: 3px !important;
        font-size: .68rem !important;
    }
    .cv-badge-card .cv-qty button[data-qty] {
        min-width: 24px !important;
        height: 24px !important;
        font-size: .68rem !important;
    }
    .cv-badge-card .cv-qty .btn {
        min-height: 24px !important;
        padding: 3px 6px !important;
        font-size: .64rem !important;
    }
}
@media (max-width: 380px) {
    .cv-badge {
        gap: 4px !important;
        min-height: 26px !important;
    }
    .cv-badge img {
        width: 20px !important;
        height: 20px !important;
    }
    .cv-badge strong {
        font-size: .6rem !important;
        max-width: 4.2rem !important;
    }
    .cv-badge-qty {
        padding: 1px 4px !important;
        font-size: .58rem !important;
    }
}

/* caravan-upgrade-ui-v3 */
.cv-ups {
    display: grid !important;
    gap: 12px !important;
}
.cv-up {
    padding: 14px !important;
    border-radius: 18px !important;
    border: 1px solid color-mix(in srgb, #b0894a 24%, var(--border-color)) !important;
    background:
        linear-gradient(165deg,
            color-mix(in srgb, #b0894a 10%, var(--bg-elevated)),
            var(--bg-elevated) 48%) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}
.cv-up header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.cv-up h3 {
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 750;
}
.cv-up-lvl {
    flex: none;
    font-size: .68rem;
    font-weight: 750;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #b0894a 30%, var(--border-color));
    background: color-mix(in srgb, #b0894a 12%, var(--bg-secondary));
}
.cv-up > p {
    margin: 0 0 10px !important;
    font-size: .84rem !important;
    color: var(--text-secondary);
    line-height: 1.35;
}
.cv-up-effects {
    display: grid;
    gap: 8px;
    margin: 0 0 12px;
}
.cv-up-effect {
    padding: 10px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, #b0894a 18%, var(--border-color));
    background: color-mix(in srgb, #1a140f 10%, var(--bg-secondary));
}
.cv-up-effect-label {
    display: block;
    margin-bottom: 6px;
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.cv-up-effect-vals {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.cv-up-effect-vals span {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    min-width: 3.2rem;
}
.cv-up-effect-vals small {
    font-size: .6rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
}
.cv-up-effect-vals strong {
    font-size: .95rem;
    font-weight: 750;
}
.cv-up-effect-vals > i {
    font-size: .7rem;
    color: #c4a574;
    opacity: .85;
}
.cv-up-cost {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px !important;
    padding: 0 !important;
    list-style: none;
}
.cv-up-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 8px 5px 5px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #b0894a 24%, var(--border-color));
    background: color-mix(in srgb, var(--bg-secondary) 90%, #b0894a);
}
.cv-up-badge.is-cash {
    border-color: color-mix(in srgb, #e5c992 40%, var(--border-color));
}
.cv-up-badge img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 50%;
    background: color-mix(in srgb, #1a140f 18%, transparent);
    flex: none;
}
.cv-up-badge strong {
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}
.cv-up-badge em {
    font-style: normal;
    margin-left: 2px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    color: #2a1c10;
    background: linear-gradient(180deg, #e8d0a0, #c4a574);
}
.cv-up .btn {
    width: 100%;
    min-height: 42px;
    border-radius: 14px;
    font-weight: 750;
}
@media (max-width: 720px) {
    .cv-up {
        padding: 12px !important;
    }
    .cv-up-cost {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
        margin: 0 0 10px !important;
    }
    .cv-up-badge {
        width: 100%;
        box-sizing: border-box;
        min-width: 0;
        gap: 4px !important;
        padding: 3px 5px 3px 3px !important;
    }
    .cv-up-badge img {
        width: 18px !important;
        height: 18px !important;
    }
    .cv-up-badge strong {
        font-size: .62rem !important;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .cv-up-badge em {
        margin-left: auto;
        padding: 1px 5px !important;
        font-size: .62rem !important;
        flex: none;
    }
    .cv-up-effect {
        padding: 8px !important;
    }
    .cv-up-effect-vals {
        gap: 6px !important;
    }
    .cv-up-effect-vals strong {
        font-size: .84rem !important;
    }
    .cv-up .btn {
        min-height: 38px;
        font-size: .86rem;
    }
}
@media (max-width: 380px) {
    .cv-up-cost {
        gap: 4px !important;
    }
    .cv-up-badge {
        gap: 3px !important;
        padding: 2px 4px 2px 2px !important;
    }
    .cv-up-badge strong {
        font-size: .58rem !important;
    }
    .cv-up-badge em {
        font-size: .58rem !important;
        padding: 1px 4px !important;
    }
}


/* forest-offers-3col-v1 */
.forest-offers {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}
.forest-offers .btn {
    min-height: 58px !important;
    padding: 8px 6px !important;
}
.forest-offers small {
    font-size: 10px !important;
    line-height: 1.25;
}
@media (max-width: 380px) {
    .forest-offers {
        gap: 6px !important;
    }
    .forest-offers .btn {
        min-height: 54px !important;
        padding: 7px 4px !important;
        font-size: .82rem;
    }
    .forest-offers small {
        font-size: 9px !important;
    }
}


/* Sayfa: harita sekmesinde genişle */
.cv-page.is-map {
    max-width: none !important;
    width: 100%;
}
.cv-page.is-map .cv-body {
    display: block;
}

/* Tam ekran harita kabuğu — eski grid/detail layout'u iptal */
.cv-map-wrap.cv-map-full {
    display: block !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
}
.cv-map-wrap.cv-map-full .cv-gl-shell {
    grid-area: auto !important;
    position: relative !important;
    width: 100% !important;
    height: calc(100dvh - 168px) !important;
    min-height: 360px !important;
    max-height: none !important;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, #b0894a 28%, var(--border-color));
    background: #cbb892;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent),
        0 10px 28px rgba(40, 28, 12, .18);
}
@media (min-width: 900px) {
    .cv-map-wrap.cv-map-full .cv-gl-shell {
        height: calc(100dvh - 156px) !important;
        min-height: min(72vh, 720px) !important;
        border-radius: 18px;
    }
}
@media (min-width: 1200px) {
    .cv-map-wrap.cv-map-full .cv-gl-shell {
        height: calc(100dvh - 148px) !important;
        min-height: 640px !important;
    }
}

.cv-gl-map {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
.cv-gl-map .maplibregl-canvas {
    filter: sepia(.28) saturate(.85) contrast(1.05) brightness(.96);
}
html[data-theme="dark"] .cv-gl-map .maplibregl-canvas {
    filter: sepia(.22) saturate(.75) contrast(1.08) brightness(.78);
}

.cv-gl-vignette {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 2 !important;
    mix-blend-mode: normal !important;
    background:
        radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(40, 28, 12, .22) 100%),
        linear-gradient(180deg, rgba(40, 28, 12, .12), transparent 28%, transparent 72%, rgba(40, 28, 12, .16)) !important;
}
html[data-theme="dark"] .cv-gl-vignette {
    background:
        radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(40, 28, 12, .22) 100%),
        linear-gradient(180deg, rgba(40, 28, 12, .12), transparent 28%, transparent 72%, rgba(40, 28, 12, .16)) !important;
    mix-blend-mode: normal !important;
}

/* Zoom araçları — eski grid-area:hint kuralını ez */
.cv-map-wrap.cv-map-full .cv-map-toolbar,
.cv-gl-shell .cv-map-toolbar {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 0 !important;
    grid-area: auto !important;
}
.cv-map-tool {
    appearance: none;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    border: 1px solid color-mix(in srgb, #f4e7c8 35%, transparent) !important;
    background: color-mix(in srgb, #1a140f 55%, transparent) !important;
    color: #f4e7c8 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
    cursor: pointer;
    display: grid !important;
    place-items: center !important;
}
.cv-map-tool:hover {
    background: color-mix(in srgb, #1a140f 72%, transparent) !important;
    color: #fff !important;
}

/* İpucu — eski flex satır stilini ez */
.cv-map-wrap.cv-map-full .cv-map-hint,
.cv-gl-shell .cv-map-hint {
    position: absolute !important;
    left: 10px !important;
    bottom: 10px !important;
    top: auto !important;
    right: auto !important;
    z-index: 4 !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    max-width: min(70%, 260px) !important;
    border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, #f4e7c8 28%, transparent) !important;
    background: color-mix(in srgb, #1a140f 52%, transparent) !important;
    color: color-mix(in srgb, #f4e7c8 88%, #fff) !important;
    font-size: .68rem !important;
    line-height: 1.25 !important;
    display: block !important;
    align-items: unset !important;
    gap: 0 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none !important;
    grid-area: auto !important;
}

.cv-gl-shell .maplibregl-ctrl-bottom-right {
    right: 10px;
    bottom: 10px;
}
.cv-gl-shell .maplibregl-ctrl-group {
    background: color-mix(in srgb, #1a140f 72%, transparent) !important;
    border: 1px solid color-mix(in srgb, #f4e7c8 28%, transparent) !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: none !important;
}
.cv-gl-shell .maplibregl-ctrl-group button {
    background: transparent !important;
    color: #f4e7c8 !important;
    width: 32px !important;
    height: 32px !important;
}

/* Pinler */
.cv-gl-pin {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    width: auto !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    cursor: pointer;
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .32));
    transition: transform .18s ease;
}
.cv-gl-pin:hover { transform: translateY(-2px); }
.cv-gl-pin-dot {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(180deg, #f8f0de, #e6d3ad) !important;
    border: 2px solid #8a6a3d !important;
    color: #2a1c10 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent),
        0 0 0 3px color-mix(in srgb, #c9a45c 18%, transparent) !important;
}
.cv-gl-pin-dot i {
    font-size: .76rem !important;
    line-height: 1 !important;
    color: inherit !important;
    text-shadow: none !important;
}
.cv-gl-pin-label {
    width: auto !important;
    max-width: 92px !important;
    margin: 0 !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, #1a140f 68%, transparent) !important;
    border: 1px solid color-mix(in srgb, #f4e7c8 28%, transparent) !important;
    color: #f4e7c8 !important;
    font-size: .64rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    box-sizing: border-box !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.cv-gl-pin.is-here .cv-gl-pin-dot {
    background: linear-gradient(180deg, #f0d59a, #c4a574) !important;
    border-color: #9a743f !important;
    color: #2a1c10 !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent),
        0 0 0 4px color-mix(in srgb, #c9a45c 34%, transparent) !important;
}
.cv-gl-pin.is-here .cv-gl-pin-dot i { color: inherit !important; }
.cv-gl-pin.is-locked .cv-gl-pin-dot {
    background: linear-gradient(180deg, #7a7368, #565048) !important;
    color: #ddd !important;
    border-color: #4a453e !important;
    box-shadow: none !important;
}
.cv-gl-pin.is-locked .cv-gl-pin-dot i { color: inherit !important; }
.cv-gl-pin.is-far { opacity: .7; }
.cv-gl-pin.is-sel .cv-gl-pin-dot {
    box-shadow: 0 0 0 4px color-mix(in srgb, #b0894a 60%, transparent) !important;
}
.cv-gl-pin.is-sel .cv-gl-pin-label {
    border-color: color-mix(in srgb, #b0894a 55%, transparent) !important;
    background: color-mix(in srgb, #1a140f 68%, transparent) !important;
    color: #f4e7c8 !important;
}
.cv-gl-pin.is-sea .cv-gl-pin-dot,
.cv-gl-pin.is-port .cv-gl-pin-dot {
    background: linear-gradient(180deg, #cfefff, #4f9ec8) !important;
    border-color: #1e6a96 !important;
    color: #0d3550 !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent),
        0 0 0 3px color-mix(in srgb, #3a9fd4 28%, transparent) !important;
}
.cv-gl-pin.is-sea .cv-gl-pin-label,
.cv-gl-pin.is-port .cv-gl-pin-label {
    background: color-mix(in srgb, #0c2f45 72%, transparent) !important;
    border-color: color-mix(in srgb, #7ec8ef 42%, transparent) !important;
    color: #e8f6ff !important;
}
.cv-gl-pin.is-sea.is-sel .cv-gl-pin-dot,
.cv-gl-pin.is-port.is-sel .cv-gl-pin-dot {
    box-shadow: 0 0 0 4px color-mix(in srgb, #3a9fd4 55%, transparent) !important;
}
.cv-gl-pin.is-sea.is-here .cv-gl-pin-dot,
.cv-gl-pin.is-port.is-here .cv-gl-pin-dot {
    background: linear-gradient(180deg, #f0d59a, #c4a574) !important;
    border-color: #9a743f !important;
    color: #2a1c10 !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent),
        0 0 0 4px color-mix(in srgb, #c9a45c 34%, transparent) !important;
}
.cv-gl-pin.is-sea.is-here .cv-gl-pin-label,
.cv-gl-pin.is-port.is-here .cv-gl-pin-label {
    background: color-mix(in srgb, #1a140f 68%, transparent) !important;
    border-color: color-mix(in srgb, #f4e7c8 28%, transparent) !important;
    color: #f4e7c8 !important;
}
.cv-gl-pin.is-sea.is-locked .cv-gl-pin-dot,
.cv-gl-pin.is-port.is-locked .cv-gl-pin-dot {
    background: linear-gradient(180deg, #5a6e7a, #3d4c56) !important;
    border-color: #2f3d47 !important;
    color: #c5d4de !important;
    box-shadow: none !important;
}

html[data-theme="light"] .cv-gl-shell { background: #e8d7b0; }
html[data-theme="light"] .cv-map-tool {
    background: color-mix(in srgb, #fff 72%, transparent) !important;
    color: #3a2f22 !important;
    border-color: color-mix(in srgb, #8a6a3d 28%, transparent) !important;
}
html[data-theme="light"] .cv-map-hint {
    background: color-mix(in srgb, #fff 78%, transparent) !important;
    color: #3a2f22 !important;
    border-color: color-mix(in srgb, #8a6a3d 24%, transparent) !important;
}

/* Araçlar paneli */
.cv-fleet-panel .cv-h { margin: 14px 0 8px; }
.cv-vehicle-grid {
    display: grid;
    gap: 12px;
}
@media (min-width: 720px) {
    .cv-vehicle-grid { grid-template-columns: 1fr 1fr; }
}
.cv-vehicle-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 12px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, #b0894a 28%, var(--border-color));
    background:
        linear-gradient(165deg,
            color-mix(in srgb, #b0894a 10%, var(--bg-elevated)),
            var(--bg-elevated) 52%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
}
.cv-vehicle-card.is-sea {
    border-color: color-mix(in srgb, #2f7fb8 40%, var(--border-color));
    background:
        linear-gradient(165deg,
            color-mix(in srgb, #2f7fb8 12%, var(--bg-elevated)),
            var(--bg-elevated) 52%);
}
.cv-vehicle-ico {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, #1a140f 14%, var(--bg-secondary));
    border: 1px solid color-mix(in srgb, #b0894a 18%, transparent);
    color: #c4a574;
    font-size: 1.35rem;
}
.cv-vehicle-card.is-sea .cv-vehicle-ico {
    color: #5eb0e0;
    border-color: color-mix(in srgb, #2f7fb8 28%, transparent);
}
.cv-vehicle-body header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.cv-vehicle-body h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 750;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cv-owned-pill {
    flex: none;
    font-size: .68rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #b0894a 28%, var(--border-color));
    background: color-mix(in srgb, #b0894a 12%, var(--bg-secondary));
    color: var(--text-primary);
}
.cv-vehicle-body p {
    margin: 0 0 8px;
    font-size: .84rem;
    line-height: 1.35;
    color: var(--text-secondary);
}
.cv-vehicle-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
}
.cv-vchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    border: 1px solid color-mix(in srgb, #b0894a 20%, var(--border-color));
    background: color-mix(in srgb, #1a140f 10%, var(--bg-secondary));
    color: var(--text-secondary);
}
.cv-vchip i { font-size: .68rem; opacity: .9; }
.cv-yakut-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 8px 3px 5px;
    border-radius: 999px;
    background: color-mix(in srgb, #7c3aed 18%, transparent);
    border: 1px solid color-mix(in srgb, #a78bfa 36%, transparent);
    color: #c4b5fd;
    white-space: nowrap;
}
.cv-yakut-badge img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}
.cv-buy-row {
    display: grid;
    gap: 8px;
}
.cv-buy-row.is-split {
    grid-template-columns: 1fr 1fr;
}
.cv-buy-pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.cv-buy-pay img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex: none;
}
.cv-buy-pay strong {
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
.cv-buy-pay.is-cash {
    color: #2a1c10;
    background: linear-gradient(180deg, #e8d0a0, #c4a574);
    border-color: color-mix(in srgb, #f4e7c8 28%, #b0894a);
    box-shadow: 0 4px 12px rgba(40, 28, 12, .14);
}
.cv-buy-pay.is-yakut {
    color: #f3e8ff;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, #7c3aed 34%, var(--bg-elevated)),
            color-mix(in srgb, #5b21b6 28%, var(--bg-secondary)));
    border-color: color-mix(in srgb, #a78bfa 42%, transparent);
    box-shadow: 0 4px 12px rgba(40, 20, 60, .16);
}
.cv-buy-pay:disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
}
.cv-buy-pay:not(:disabled):active {
    transform: translateY(1px);
}
.cv-fleet-panel .cv-muted {
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: .86rem;
}
@media (max-width: 420px) {
    .cv-vehicle-card {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 10px;
        padding: 12px 10px;
        border-radius: 16px;
    }
    .cv-vehicle-ico {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        font-size: 1.2rem;
    }
    .cv-buy-pay {
        min-height: 42px;
        gap: 6px;
        padding: 7px 8px;
        border-radius: 12px;
    }
    .cv-buy-pay img {
        width: 20px;
        height: 20px;
    }
    .cv-buy-pay strong {
        font-size: .88rem;
    }
}

/* quick-menu-pages-v3 */
.modal.quick-menu-modal {
    width: min(100% - 24px, 420px);
    max-height: min(86dvh, 720px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 16px 14px 14px;
    touch-action: pan-y;
}
.modal-root.open .modal.quick-menu-modal {
    touch-action: pan-y !important;
}
.quick-menu-viewport {
    overflow: hidden;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    touch-action: pan-y;
}
.quick-menu-track {
    display: flex;
    width: 100%;
    will-change: transform;
}
.quick-menu-page {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    padding: 0 2px;
}
.modal.quick-menu-modal .quick-menu-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px;
}
.modal.quick-menu-modal .quick-menu-item {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}
.quick-menu-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    min-height: 16px;
    flex: none;
}
.quick-menu-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-secondary) 45%, transparent);
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
}
.quick-menu-dot.is-active {
    width: 18px;
    background: var(--accent-text, var(--accent));
}
@media (max-width: 380px) {
    .modal.quick-menu-modal .quick-menu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* caravan-map-fleet-fix-v4 */
/* Sayfa: harita sekmesinde genişle */
.cv-page.is-map {
    max-width: none !important;
    width: 100%;
}
.cv-page.is-map .cv-body {
    display: block;
}

/* Tam ekran harita kabuğu — eski grid/detail layout'u iptal */
.cv-map-wrap.cv-map-full {
    display: block !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
}
.cv-map-wrap.cv-map-full .cv-gl-shell {
    grid-area: auto !important;
    position: relative !important;
    width: 100% !important;
    height: calc(100dvh - 168px) !important;
    min-height: 360px !important;
    max-height: none !important;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, #b0894a 28%, var(--border-color));
    background: #cbb892;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent),
        0 10px 28px rgba(40, 28, 12, .18);
}
@media (min-width: 900px) {
    .cv-map-wrap.cv-map-full .cv-gl-shell {
        height: calc(100dvh - 156px) !important;
        min-height: min(72vh, 720px) !important;
        border-radius: 18px;
    }
}
@media (min-width: 1200px) {
    .cv-map-wrap.cv-map-full .cv-gl-shell {
        height: calc(100dvh - 148px) !important;
        min-height: 640px !important;
    }
}

.cv-gl-map {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
.cv-gl-map .maplibregl-canvas {
    filter: sepia(.28) saturate(.85) contrast(1.05) brightness(.96);
}
html[data-theme="dark"] .cv-gl-map .maplibregl-canvas {
    filter: sepia(.22) saturate(.75) contrast(1.08) brightness(.78);
}

.cv-gl-vignette {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 2 !important;
    mix-blend-mode: normal !important;
    background:
        radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(40, 28, 12, .22) 100%),
        linear-gradient(180deg, rgba(40, 28, 12, .12), transparent 28%, transparent 72%, rgba(40, 28, 12, .16)) !important;
}
html[data-theme="dark"] .cv-gl-vignette {
    background:
        radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(40, 28, 12, .22) 100%),
        linear-gradient(180deg, rgba(40, 28, 12, .12), transparent 28%, transparent 72%, rgba(40, 28, 12, .16)) !important;
    mix-blend-mode: normal !important;
}

/* Zoom araçları — eski grid-area:hint kuralını ez */
.cv-map-wrap.cv-map-full .cv-map-toolbar,
.cv-gl-shell .cv-map-toolbar {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 0 !important;
    grid-area: auto !important;
}
.cv-map-tool {
    appearance: none;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    border: 1px solid color-mix(in srgb, #f4e7c8 35%, transparent) !important;
    background: color-mix(in srgb, #1a140f 55%, transparent) !important;
    color: #f4e7c8 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
    cursor: pointer;
    display: grid !important;
    place-items: center !important;
}
.cv-map-tool:hover {
    background: color-mix(in srgb, #1a140f 72%, transparent) !important;
    color: #fff !important;
}

/* İpucu — eski flex satır stilini ez */
.cv-map-wrap.cv-map-full .cv-map-hint,
.cv-gl-shell .cv-map-hint {
    position: absolute !important;
    left: 10px !important;
    bottom: 10px !important;
    top: auto !important;
    right: auto !important;
    z-index: 4 !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    max-width: min(70%, 260px) !important;
    border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, #f4e7c8 28%, transparent) !important;
    background: color-mix(in srgb, #1a140f 52%, transparent) !important;
    color: color-mix(in srgb, #f4e7c8 88%, #fff) !important;
    font-size: .68rem !important;
    line-height: 1.25 !important;
    display: block !important;
    align-items: unset !important;
    gap: 0 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none !important;
    grid-area: auto !important;
}

.cv-gl-shell .maplibregl-ctrl-bottom-right {
    right: 10px;
    bottom: 10px;
}
.cv-gl-shell .maplibregl-ctrl-group {
    background: color-mix(in srgb, #1a140f 72%, transparent) !important;
    border: 1px solid color-mix(in srgb, #f4e7c8 28%, transparent) !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: none !important;
}
.cv-gl-shell .maplibregl-ctrl-group button {
    background: transparent !important;
    color: #f4e7c8 !important;
    width: 32px !important;
    height: 32px !important;
}

/* Pinler */
.cv-gl-pin {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    width: auto !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    cursor: pointer;
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .32));
    transition: transform .18s ease;
}
.cv-gl-pin:hover { transform: translateY(-2px); }
.cv-gl-pin-dot {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(180deg, #f8f0de, #e6d3ad) !important;
    border: 2px solid #8a6a3d !important;
    color: #2a1c10 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent),
        0 0 0 3px color-mix(in srgb, #c9a45c 18%, transparent) !important;
}
.cv-gl-pin-dot i {
    font-size: .76rem !important;
    line-height: 1 !important;
    color: inherit !important;
    text-shadow: none !important;
}
.cv-gl-pin-label {
    width: auto !important;
    max-width: 92px !important;
    margin: 0 !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, #1a140f 68%, transparent) !important;
    border: 1px solid color-mix(in srgb, #f4e7c8 28%, transparent) !important;
    color: #f4e7c8 !important;
    font-size: .64rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    box-sizing: border-box !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.cv-gl-pin.is-here .cv-gl-pin-dot {
    background: linear-gradient(180deg, #f0d59a, #c4a574) !important;
    border-color: #9a743f !important;
    color: #2a1c10 !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent),
        0 0 0 4px color-mix(in srgb, #c9a45c 34%, transparent) !important;
}
.cv-gl-pin.is-here .cv-gl-pin-dot i { color: inherit !important; }
.cv-gl-pin.is-locked .cv-gl-pin-dot {
    background: linear-gradient(180deg, #7a7368, #565048) !important;
    color: #ddd !important;
    border-color: #4a453e !important;
    box-shadow: none !important;
}
.cv-gl-pin.is-locked .cv-gl-pin-dot i { color: inherit !important; }
.cv-gl-pin.is-far { opacity: .7; }
.cv-gl-pin.is-sel .cv-gl-pin-dot {
    box-shadow: 0 0 0 4px color-mix(in srgb, #b0894a 60%, transparent) !important;
}
.cv-gl-pin.is-sel .cv-gl-pin-label {
    border-color: color-mix(in srgb, #b0894a 55%, transparent) !important;
    background: color-mix(in srgb, #1a140f 68%, transparent) !important;
    color: #f4e7c8 !important;
}
.cv-gl-pin.is-sea .cv-gl-pin-dot,
.cv-gl-pin.is-port .cv-gl-pin-dot {
    background: linear-gradient(180deg, #cfefff, #4f9ec8) !important;
    border-color: #1e6a96 !important;
    color: #0d3550 !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent),
        0 0 0 3px color-mix(in srgb, #3a9fd4 28%, transparent) !important;
}
.cv-gl-pin.is-sea .cv-gl-pin-label,
.cv-gl-pin.is-port .cv-gl-pin-label {
    background: color-mix(in srgb, #0c2f45 72%, transparent) !important;
    border-color: color-mix(in srgb, #7ec8ef 42%, transparent) !important;
    color: #e8f6ff !important;
}
.cv-gl-pin.is-sea.is-sel .cv-gl-pin-dot,
.cv-gl-pin.is-port.is-sel .cv-gl-pin-dot {
    box-shadow: 0 0 0 4px color-mix(in srgb, #3a9fd4 55%, transparent) !important;
}
.cv-gl-pin.is-sea.is-here .cv-gl-pin-dot,
.cv-gl-pin.is-port.is-here .cv-gl-pin-dot {
    background: linear-gradient(180deg, #f0d59a, #c4a574) !important;
    border-color: #9a743f !important;
    color: #2a1c10 !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent),
        0 0 0 4px color-mix(in srgb, #c9a45c 34%, transparent) !important;
}
.cv-gl-pin.is-sea.is-here .cv-gl-pin-label,
.cv-gl-pin.is-port.is-here .cv-gl-pin-label {
    background: color-mix(in srgb, #1a140f 68%, transparent) !important;
    border-color: color-mix(in srgb, #f4e7c8 28%, transparent) !important;
    color: #f4e7c8 !important;
}
.cv-gl-pin.is-sea.is-locked .cv-gl-pin-dot,
.cv-gl-pin.is-port.is-locked .cv-gl-pin-dot {
    background: linear-gradient(180deg, #5a6e7a, #3d4c56) !important;
    border-color: #2f3d47 !important;
    color: #c5d4de !important;
    box-shadow: none !important;
}

html[data-theme="light"] .cv-gl-shell { background: #e8d7b0; }
html[data-theme="light"] .cv-map-tool {
    background: color-mix(in srgb, #fff 72%, transparent) !important;
    color: #3a2f22 !important;
    border-color: color-mix(in srgb, #8a6a3d 28%, transparent) !important;
}
html[data-theme="light"] .cv-map-hint {
    background: color-mix(in srgb, #fff 78%, transparent) !important;
    color: #3a2f22 !important;
    border-color: color-mix(in srgb, #8a6a3d 24%, transparent) !important;
}

/* Araçlar paneli */
.cv-fleet-panel .cv-h { margin: 14px 0 8px; }
.cv-vehicle-grid {
    display: grid;
    gap: 12px;
}
@media (min-width: 720px) {
    .cv-vehicle-grid { grid-template-columns: 1fr 1fr; }
}
.cv-vehicle-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 12px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, #b0894a 28%, var(--border-color));
    background:
        linear-gradient(165deg,
            color-mix(in srgb, #b0894a 10%, var(--bg-elevated)),
            var(--bg-elevated) 52%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
}
.cv-vehicle-card.is-sea {
    border-color: color-mix(in srgb, #2f7fb8 40%, var(--border-color));
    background:
        linear-gradient(165deg,
            color-mix(in srgb, #2f7fb8 12%, var(--bg-elevated)),
            var(--bg-elevated) 52%);
}
.cv-vehicle-ico {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, #1a140f 14%, var(--bg-secondary));
    border: 1px solid color-mix(in srgb, #b0894a 18%, transparent);
    color: #c4a574;
    font-size: 1.35rem;
}
.cv-vehicle-card.is-sea .cv-vehicle-ico {
    color: #5eb0e0;
    border-color: color-mix(in srgb, #2f7fb8 28%, transparent);
}
.cv-vehicle-body header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.cv-vehicle-body h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 750;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cv-owned-pill {
    flex: none;
    font-size: clamp(.58rem, 2.6vw, .68rem);
    font-weight: 800;
    padding: clamp(2px, .8vw, 3px) clamp(5px, 1.8vw, 8px);
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #b0894a 28%, var(--border-color));
    background: color-mix(in srgb, #b0894a 12%, var(--bg-secondary));
    color: var(--text-primary);
}
.cv-vehicle-body p {
    margin: 0 0 8px;
    font-size: .84rem;
    line-height: 1.35;
    color: var(--text-secondary);
}
.cv-vehicle-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
}
.cv-vchip {
    display: inline-flex;
    align-items: center;
    gap: clamp(3px, 1.2vw, 6px);
    padding: clamp(2px, .9vw, 4px) clamp(6px, 2vw, 9px);
    border-radius: 999px;
    font-size: clamp(.6rem, 2.8vw, .72rem);
    font-weight: 700;
    border: 1px solid color-mix(in srgb, #b0894a 20%, var(--border-color));
    background: color-mix(in srgb, #1a140f 10%, var(--bg-secondary));
    color: var(--text-secondary);
    max-width: 100%;
    min-width: 0;
}
.cv-vchip i { font-size: .68rem; opacity: .9; flex: none; }
.cv-yakut-badge {
    display: inline-flex;
    align-items: center;
    gap: clamp(3px, 1vw, 5px);
    font-size: clamp(.58rem, 2.6vw, .68rem);
    font-weight: 700;
    padding: clamp(2px, .8vw, 3px) clamp(6px, 1.8vw, 8px) clamp(2px, .8vw, 3px) clamp(4px, 1.2vw, 5px);
    border-radius: 999px;
    background: color-mix(in srgb, #7c3aed 18%, transparent);
    border: 1px solid color-mix(in srgb, #a78bfa 36%, transparent);
    color: #c4b5fd;
    white-space: nowrap;
    max-width: 100%;
}
.cv-yakut-badge img {
    width: clamp(11px, 3.4vw, 14px);
    height: clamp(11px, 3.4vw, 14px);
    object-fit: contain;
}
.cv-buy-row {
    display: grid;
    gap: clamp(5px, 1.6vw, 8px);
}
.cv-buy-row.is-split {
    grid-template-columns: 1fr 1fr;
}
.cv-buy-pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 1.4vw, 8px);
    width: 100%;
    min-width: 0;
    min-height: clamp(34px, 9.5vw, 44px);
    padding: clamp(5px, 1.6vw, 8px) clamp(6px, 2vw, 10px);
    border-radius: clamp(10px, 2.8vw, 14px);
    border: 1px solid transparent;
    cursor: pointer;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.cv-buy-pay img {
    width: clamp(16px, 4.8vw, 22px);
    height: clamp(16px, 4.8vw, 22px);
    object-fit: contain;
    flex: none;
}
.cv-buy-pay strong {
    font-size: clamp(.74rem, 3.2vw, .95rem);
    font-weight: 800;
    letter-spacing: -.01em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cv-buy-pay.is-cash {
    color: #2a1c10;
    background: linear-gradient(180deg, #e8d0a0, #c4a574);
    border-color: color-mix(in srgb, #f4e7c8 28%, #b0894a);
    box-shadow: 0 4px 12px rgba(40, 28, 12, .14);
}
.cv-buy-pay.is-yakut {
    color: #f3e8ff;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, #7c3aed 34%, var(--bg-elevated)),
            color-mix(in srgb, #5b21b6 28%, var(--bg-secondary)));
    border-color: color-mix(in srgb, #a78bfa 42%, transparent);
    box-shadow: 0 4px 12px rgba(40, 20, 60, .16);
}
.cv-buy-pay:disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
}
.cv-buy-pay:not(:disabled):active {
    transform: translateY(1px);
}
.cv-fleet-panel .cv-muted {
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: .86rem;
}
@media (max-width: 420px) {
    .cv-vehicle-card {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 8px;
        padding: 10px 8px;
        border-radius: 14px;
    }
    .cv-vehicle-ico {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        font-size: 1.1rem;
    }
    .cv-vehicle-body h3 {
        font-size: .9rem;
    }
    .cv-vehicle-body p {
        font-size: .78rem;
        margin-bottom: 6px;
    }
    .cv-vehicle-meta {
        gap: 4px;
        margin-bottom: 8px;
    }
    .cv-buy-row {
        gap: 5px;
    }
    .cv-buy-pay {
        min-height: 36px;
        gap: 4px;
        padding: 5px 6px;
        border-radius: 11px;
    }
    .cv-buy-pay img {
        width: 16px;
        height: 16px;
    }
    .cv-buy-pay strong {
        font-size: .78rem;
    }
}
@media (max-width: 360px) {
    .cv-buy-row.is-split {
        grid-template-columns: 1fr;
    }
    .cv-buy-pay {
        min-height: 34px;
    }
    .cv-buy-pay strong {
        font-size: .76rem;
    }
}


/* caravan-modal-modern-v4 */
.modal-root:has(.cv-city-modal-shell) .overlay,
.modal-root:has(.cv-trade-modal-shell) .overlay {
    background: color-mix(in srgb, #0a121c 42%, transparent) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.modal.cv-city-modal-shell,
.modal.cv-trade-modal-shell {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    width: min(400px, calc(100vw - 32px)) !important;
    max-width: min(400px, calc(100vw - 32px)) !important;
    margin: 0 !important;
    padding: 18px 14px 14px;
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, #fff 16%, var(--glass-line, var(--border-color)));
    background:
        linear-gradient(165deg,
            color-mix(in srgb, #b0894a 12%, transparent),
            transparent 42%),
        color-mix(in srgb, var(--glass-bg, var(--bg-elevated)) 72%, transparent) !important;
    box-shadow:
        0 18px 48px rgba(8, 12, 20, .34),
        inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent) !important;
    backdrop-filter: blur(22px) saturate(155%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(155%) !important;
    overflow: visible;
    transform: translate(-50%, -50%) !important;
}
.modal-root.open .modal.cv-city-modal-shell,
.modal-root.open .modal.cv-trade-modal-shell {
    transform: translate(-50%, -50%) !important;
    animation: cv-modal-in .3s ease !important;
}
.modal-root.open.is-closing .modal.cv-city-modal-shell,
.modal-root.open.is-closing .modal.cv-trade-modal-shell {
    animation: cv-modal-out .25s ease forwards !important;
}
@keyframes cv-modal-in {
    0% { transform: translate(-50%, calc(-50% - 28px)) scale(.94); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes cv-modal-out {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, calc(-50% - 16px)) scale(.96); opacity: 0; }
}
.modal.cv-trade-modal-shell {
    padding: 16px 12px 12px;
}

.cv-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, #fff 14%, var(--glass-line, var(--border-color)));
    background: color-mix(in srgb, var(--glass-bg-strong, var(--bg-secondary)) 58%, transparent);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    color: var(--text-primary);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}
.cv-modal-close:hover {
    background: color-mix(in srgb, #b0894a 18%, var(--glass-bg, var(--bg-elevated)));
}
.cv-modal-close i { font-size: .95rem; line-height: 1; }

.cv-city-modal,
.cv-trade-modal {
    position: relative;
    padding-right: 4px;
}
.cv-city-modal-head,
.cv-trade-modal-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-right: 44px;
    margin: 0 0 14px;
}
.cv-city-modal-head h2,
.cv-trade-modal-head h2 {
    margin: 0;
    font-size: 1.22rem;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -.01em;
}
.cv-trade-modal-head p {
    margin: 0;
    font-size: .86rem;
    color: var(--text-secondary);
}
.cv-here-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    color: #2a1c10;
    border: 1px solid color-mix(in srgb, #fff 22%, #b0894a);
    background: color-mix(in srgb, #e5c992 72%, transparent);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
}

.cv-city-modal .cv-city-detail {
    display: block !important;
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
}

.cv-city-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
}
.cv-chiplet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 650;
    border: 1px solid color-mix(in srgb, #fff 12%, var(--glass-line, var(--border-color)));
    background: color-mix(in srgb, var(--glass-bg-strong, var(--bg-secondary)) 48%, transparent);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    color: var(--text-secondary);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}
.cv-chiplet i { font-size: .7rem; opacity: .9; }
.cv-chiplet.is-port,
.cv-chiplet.is-sea {
    border-color: color-mix(in srgb, #2f7fb8 40%, transparent);
    background: color-mix(in srgb, #2f7fb8 16%, transparent);
    color: #7ec8ef;
}

.cv-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 12px;
}
.cv-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 8px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, #fff 12%, var(--glass-line, var(--border-color)));
    background: color-mix(in srgb, var(--glass-bg-strong, var(--bg-secondary)) 46%, transparent);
    backdrop-filter: blur(12px) saturate(145%);
    -webkit-backdrop-filter: blur(12px) saturate(145%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
    text-align: center;
}
.cv-stat span {
    font-size: .64rem;
    font-weight: 650;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.cv-stat strong {
    font-size: .95rem;
    font-weight: 750;
    line-height: 1.15;
}

.cv-demand-box {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, #fff 12%, var(--glass-line, var(--border-color)));
    background: color-mix(in srgb, var(--glass-bg-strong, var(--bg-secondary)) 44%, transparent);
    backdrop-filter: blur(12px) saturate(145%);
    -webkit-backdrop-filter: blur(12px) saturate(145%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}
.cv-demand-label {
    display: block;
    margin-bottom: 4px;
    font-size: .68rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.cv-demand-box p {
    margin: 0;
    font-size: .86rem;
    line-height: 1.35;
}

.cv-city-modal .cv-city-actions {
    display: grid;
    gap: 8px;
    margin-top: 4px;
}
.cv-city-modal .cv-city-cta {
    width: 100%;
    min-height: 44px;
    border-radius: 14px;
    font-weight: 700;
    border: 1px solid color-mix(in srgb, #fff 14%, var(--glass-line, var(--border-color))) !important;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, #e8d0a0 55%, transparent),
            color-mix(in srgb, #c4a574 48%, transparent)) !important;
    color: #2a1c10 !important;
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    box-shadow:
        0 6px 16px rgba(20, 14, 8, .18),
        inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent);
}
.cv-city-modal .cv-warn {
    margin: 0 0 8px;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: .82rem;
    border: 1px solid color-mix(in srgb, #fff 10%, transparent);
    background: color-mix(in srgb, var(--glass-bg-strong, var(--bg-secondary)) 42%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.cv-trade-modal {
    max-height: min(82vh, 680px);
    overflow: auto;
    padding-top: 2px;
    -webkit-overflow-scrolling: touch;
}
.cv-trade-modal .cv-trade-tabs {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 0 0 12px;
    padding: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, #1a140f 18%, var(--bg-elevated));
    border: 1px solid color-mix(in srgb, #b0894a 22%, var(--border-color));
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}
.cv-trade-modal .cv-trade-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 750;
    font-size: .86rem;
    line-height: 1.1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.cv-trade-modal .cv-trade-tabs button i {
    font-size: .78rem;
    opacity: .85;
}
.cv-trade-modal .cv-trade-tabs .cv-ttab-short {
    display: none;
}
.cv-trade-modal .cv-trade-tabs button.is-on {
    color: #2a1c10;
    background: linear-gradient(180deg, #e8d0a0, #c4a574);
    box-shadow: 0 3px 10px rgba(40, 28, 12, .18);
}
.cv-trade-modal .cv-trade-tabs button.is-on i {
    opacity: 1;
}
.cv-trade-modal .cv-trade-tabs button:not(.is-on):active {
    background: color-mix(in srgb, #b0894a 12%, transparent);
}

.cv-trade-list {
    display: grid;
    gap: 10px;
}
.cv-trade-empty {
    margin: 8px 0 0;
    padding: 16px 12px;
    text-align: center;
    border-radius: 14px;
    border: 1px dashed color-mix(in srgb, #b0894a 28%, var(--border-color));
    background: color-mix(in srgb, #b0894a 6%, var(--bg-secondary));
    color: var(--text-secondary);
    font-size: .88rem;
}
.cv-trade-row {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, #b0894a 22%, var(--border-color));
    background:
        linear-gradient(160deg,
            color-mix(in srgb, #b0894a 8%, var(--bg-elevated)),
            color-mix(in srgb, var(--bg-secondary) 94%, #b0894a));
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}
.cv-trade-row-main {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}
.cv-trade-row-main img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 12px;
    padding: 4px;
    background: color-mix(in srgb, #1a140f 16%, var(--bg-secondary));
    border: 1px solid color-mix(in srgb, #b0894a 16%, transparent);
}
.cv-trade-row-info {
    min-width: 0;
    display: grid;
    gap: 5px;
}
.cv-trade-row-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.cv-trade-row-top strong {
    font-size: .98rem;
    font-weight: 750;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cv-trade-price {
    flex: none;
    font-style: normal;
    font-size: .92rem;
    font-weight: 800;
    color: #2a1c10;
    padding: 3px 9px;
    border-radius: 999px;
    background: linear-gradient(180deg, #e8d0a0, #c4a574);
    border: 1px solid color-mix(in srgb, #f4e7c8 30%, #b0894a);
    line-height: 1.2;
}
.cv-trade-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cv-trade-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 650;
    color: var(--text-secondary);
    background: color-mix(in srgb, #1a140f 10%, var(--bg-secondary));
    border: 1px solid color-mix(in srgb, #b0894a 14%, var(--border-color));
}
.cv-trade-meta b {
    font-weight: 800;
    color: var(--text-primary);
}
.cv-trade-qty {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 40px auto;
    gap: 6px;
    align-items: center;
}
.cv-trade-qty input {
    width: 100% !important;
    min-height: 40px;
    padding: 8px 6px !important;
    border-radius: 12px !important;
    border: 1px solid color-mix(in srgb, #b0894a 24%, var(--border-color)) !important;
    background: color-mix(in srgb, var(--bg-elevated) 92%, #b0894a) !important;
    color: var(--text-primary) !important;
    font-weight: 750;
    font-size: .95rem;
}
.cv-trade-qty button[data-qty] {
    min-width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    border: 1px solid color-mix(in srgb, #b0894a 24%, var(--border-color)) !important;
    background: color-mix(in srgb, #b0894a 10%, var(--bg-elevated)) !important;
    color: var(--text-primary) !important;
    font-weight: 750;
    font-size: 1rem;
    cursor: pointer;
}
.cv-trade-qty button[data-qty="max"] {
    min-width: 52px !important;
    padding: 0 10px;
    font-size: .78rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.cv-trade-act {
    width: 100%;
    min-height: 42px;
    border-radius: 13px !important;
    font-weight: 750 !important;
    font-size: .9rem !important;
    border: 0 !important;
    color: #2a1c10 !important;
    background: linear-gradient(180deg, #e8d0a0, #c4a574) !important;
    box-shadow: 0 4px 12px rgba(40, 28, 12, .16);
}
.cv-trade-act:active {
    transform: translateY(1px);
}

@media (max-width: 420px) {
    .cv-stat-grid { gap: 6px; }
    .cv-stat { padding: 8px 6px; }
    .cv-stat strong { font-size: .88rem; }
    .modal.cv-trade-modal-shell {
        width: calc(100vw - 16px);
        max-width: none;
        padding: 14px 10px 10px;
        border-radius: 18px;
    }
    .cv-trade-modal .cv-trade-tabs {
        gap: 4px;
        margin-bottom: 10px;
        padding: 3px;
        border-radius: 14px;
    }
    .cv-trade-modal .cv-trade-tabs button {
        min-height: 42px;
        padding: 7px 8px;
        border-radius: 12px;
        font-size: .84rem;
        gap: 6px;
    }
    .cv-trade-modal .cv-trade-tabs .cv-ttab-full {
        display: none;
    }
    .cv-trade-modal .cv-trade-tabs .cv-ttab-short {
        display: inline;
    }
    .cv-trade-modal-head {
        margin-bottom: 10px;
        padding-right: 40px;
    }
    .cv-trade-modal-head h2 {
        font-size: 1.1rem;
    }
    .cv-trade-row {
        padding: 10px;
        gap: 8px;
        border-radius: 14px;
    }
    .cv-trade-row-main {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 8px;
    }
    .cv-trade-row-main img {
        width: 42px;
        height: 42px;
        border-radius: 10px;
    }
    .cv-trade-row-top strong {
        font-size: .9rem;
    }
    .cv-trade-price {
        font-size: .82rem;
        padding: 2px 7px;
    }
    .cv-trade-qty {
        grid-template-columns: 38px minmax(0, 1fr) 38px auto;
        gap: 5px;
    }
    .cv-trade-qty input,
    .cv-trade-qty button[data-qty] {
        min-height: 38px !important;
        height: 38px !important;
    }
    .cv-trade-qty button[data-qty] {
        min-width: 38px !important;
    }
    .cv-trade-act {
        min-height: 40px;
        font-size: .86rem !important;
    }
}

/* tab-center-inline-v3 — orta menü: sadece görsel, dikey tam orta */
@media (max-width: 959px) {
    .tabbar .tab-main {
        align-items: center !important;
    }

    .tabbar .tab-main > .tab:not(.is-center) {
        align-self: stretch !important;
        justify-content: flex-end !important;
        padding: 0 0 4px !important;
    }

    .tabbar .tab.is-center,
    .tab-main > .tab.is-center,
    .tab-main > .tab.tab-icon-only.is-center {
        position: relative !important;
        z-index: 5 !important;
        overflow: visible !important;
        align-self: center !important;
        justify-self: center !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 0 !important;
        height: 46px !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
    }

    .tabbar .tab.is-center .tab-fab,
    .tabbar .tab.is-center.is-active .tab-fab,
    .tab-main > .tab.is-center .tab-fab,
    .tab-main > .tab.is-center.is-active .tab-fab,
    .tabbar .tab.is-center .tab-fab.tab-fab-media,
    html[data-theme="dark"] .tabbar .tab.is-center .tab-fab,
    html[data-theme="dark"] .tabbar .tab.is-center.is-active .tab-fab {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        display: grid !important;
        place-items: center !important;
        overflow: visible !important;
    }

    .tabbar .tab.is-center .tab-quick-img,
    .tabbar .tab-quick-img {
        width: 40px !important;
        height: 40px !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center !important;
        border-radius: 0 !important;
        display: block !important;
    }

    .tabbar .tab.is-center > span:not(.tab-fab) {
        display: none !important;
    }
}

@media (hover: hover) and (pointer: fine) and (max-width: 959px) {
    .tabbar .tab.is-center:hover .tab-fab {
        transform: scale(1.08) !important;
        filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--accent) 28%, transparent));
    }
}


/* home-staff-tools-v1 */
.home-staff-tools {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 12px 0 4px !important;
}
.home-tools.home-tools-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* home-gz-text-fix-v1 */
.home-gz-card .home-gz-text,
.home-gz-text {
    flex: 0 0 auto !important;
    min-height: calc(1.4em * 3) !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    padding-bottom: 2px !important;
    box-decoration-break: clone;
}

/* home-tools-5-row-v2 */
.home-tools.home-tools-5 {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
}
.home-tools.home-tools-5 .home-tool,
.home-tools.home-tools-5 .home-settings,
.home-tools.home-tools-5 .home-help,
.home-tools.home-tools-5 .home-stats-btn {
    min-width: 0;
    min-height: 88px !important;
    padding: 10px 2px 8px !important;
    gap: 6px !important;
}
.home-tools.home-tools-5 .home-tool span,
.home-tools.home-tools-5 .home-settings span,
.home-tools.home-tools-5 .home-help span,
.home-tools.home-tools-5 .home-stats-btn span {
    font-size: 10px !important;
    line-height: 1.15;
}
.home-tools.home-tools-5 img,
.home-tools.home-tools-5 .home-caravan,
.home-tools.home-tools-5 .home-merchant,
.home-tools.home-tools-5 .home-tax,
.home-tools.home-tools-5 .home-hunt-ico,
.home-tools.home-tools-5 .home-health {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto !important;
}
@media (max-width: 360px) {
    .home-tools.home-tools-5 {
        gap: 4px !important;
    }
    .home-tools.home-tools-5 .home-tool span {
        font-size: 9px !important;
    }
    .home-tools.home-tools-5 img,
    .home-tools.home-tools-5 .home-caravan,
    .home-tools.home-tools-5 .home-merchant,
    .home-tools.home-tools-5 .home-tax,
    .home-tools.home-tools-5 .home-hunt-ico,
    .home-tools.home-tools-5 .home-health {
        width: 34px !important;
        height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
    }
}