/*
 * Application surface theme
 * Loaded on browse, account, claim, owner, and add-server views so the
 * data-heavy pages can share the same warm translucent panel language as
 * TitanwebPage2 without mixing into the marketing theme layer.
 */

:root {
    --app-line: rgba(214, 197, 148, 0.18);
    --app-line-strong: rgba(214, 195, 143, 0.34);
    --app-panel-shell-bg: linear-gradient(180deg, rgba(20, 29, 22, 0.82), rgba(14, 20, 16, 0.72));
    --app-panel-card-bg: linear-gradient(180deg, rgba(28, 37, 29, 0.6), rgba(22, 31, 24, 0.46));
    --app-panel-card-hover-bg: linear-gradient(180deg, rgba(33, 43, 34, 0.78), rgba(19, 28, 21, 0.62));
    --app-panel-fill: rgba(18, 28, 21, 0.68);
    --app-text-strong: #fff7e6;
    --app-text: #f6f3e8;
    --app-text-muted: #d8d2c0;
    --app-text-muted-strong: #ece4d0;
    --app-accent: #d6c38f;
    --app-accent-soft: #f1deb2;
    --app-shadow: 0 24px 58px rgba(0, 0, 0, 0.22);
    --app-shadow-soft: 0 18px 42px rgba(0, 0, 0, 0.18);
    --app-shadow-hover: 0 30px 70px rgba(0, 0, 0, 0.28);
}

/* Shared shells */

.hero-panel,
.hero-panel-tight,
.section-block,
.side-card,
.detail-card,
.filter-panel,
.account-card,
.account-provider-card,
.claim-live-card,
.browser-search-panel,
.browser-table-panel,
.server-drawer-panel,
.drawer-block,
.owner-logo-preview-shell {
    border: 1px solid var(--app-line);
    background:
        radial-gradient(circle at top, rgba(255, 240, 199, 0.06), transparent 28%),
        var(--app-panel-shell-bg);
    box-shadow: var(--app-shadow);
}

.browser-search-panel,
.browser-table-panel,
.server-drawer-panel {
    overflow: hidden;
}

.hero-panel,
.section-block,
.side-card,
.detail-card,
.account-card,
.account-provider-card,
.claim-live-card,
.browser-search-panel,
.browser-table-panel {
    backdrop-filter: blur(10px);
}

/* Shared cards */

.stat-card,
.mini-item,
.rank-row,
.history-row,
.account-detail-row,
.account-identity-row,
.drawer-stat-card,
.drawer-meta-item,
.drawer-rule-item,
.drawer-tag,
.drawer-history-row,
.drawer-players-summary-item,
.drawer-owner-link-card,
.drawer-owner-fact,
.promoted-strip-item,
.browser-table-row,
.time-intel-card,
.owner-logo-file-name,
.img-uploader__name {
    border: 1px solid var(--app-line);
    background:
        radial-gradient(circle at top, rgba(255, 240, 199, 0.05), transparent 30%),
        var(--app-panel-card-bg);
    box-shadow: var(--app-shadow-soft);
}

.browser-table-row,
.mini-item,
.rank-row,
.drawer-owner-link-card,
.promoted-strip-item {
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.browser-table-row:hover,
.mini-item:hover,
.rank-row:hover,
.drawer-owner-link-card:hover,
.promoted-strip-item:hover {
    border-color: var(--app-line-strong);
    background:
        radial-gradient(circle at top, rgba(255, 240, 199, 0.07), transparent 30%),
        var(--app-panel-card-hover-bg);
    box-shadow: var(--app-shadow-hover);
}

.browser-table-row:hover,
.mini-item:hover,
.rank-row:hover,
.drawer-owner-link-card:hover {
    transform: translateY(-2px);
}

/* Browse list */

.browser-shell {
    gap: 22px;
}

.browser-table {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.browser-table-head {
    padding: 2px 8px 10px;
    border-bottom: 0;
    color: var(--app-accent);
}

.browser-table-row {
    margin: 0;
    padding: 18px 20px;
    border-bottom: 0;
    border-radius: 20px;
}

.browser-table-row:last-child {
    border-bottom: 0;
}

.server-drawer-shell {
    padding: 0 16px 22px;
    border-bottom: 0;
}

.server-drawer-panel {
    border-color: var(--app-line);
    border-radius: 20px;
    background:
        radial-gradient(circle at top, rgba(255, 240, 199, 0.05), transparent 30%),
        var(--app-panel-shell-bg);
    box-shadow: var(--app-shadow);
}

.server-glyph {
    border-color: var(--app-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

.server-glyph span {
    border-color: rgba(255, 255, 255, 0.18);
}

.browser-results-counter,
.promoted-strip-item span,
.server-row-subtitle,
.browser-col span,
.drawer-owner-link-copy span,
.drawer-owner-description,
.drawer-owner-fact span,
.drawer-stat-card span,
.drawer-stat-card small,
.drawer-meta-item span,
.drawer-rule-item span,
.drawer-history-row span,
.drawer-players-summary-item span,
.time-intel-value + small,
.account-provider-card p,
.account-card p,
.account-detail-row span,
.account-identity-row span,
.list-hint,
.muted {
    color: var(--app-text-muted);
}

.server-row-title a,
.browser-col strong,
.server-card h3,
.featured-card h3,
.account-provider-card h3,
.account-card h3,
.account-detail-row strong,
.account-identity-row strong,
.detail-item strong,
.metric-block strong,
.rule-item strong,
.mini-item strong,
.rank-row strong,
.history-row strong,
.drawer-stat-card strong,
.drawer-meta-item strong,
.drawer-rule-item strong,
.drawer-history-row strong,
.drawer-players-summary-item strong,
.drawer-owner-link-copy strong,
.drawer-owner-fact strong,
.server-drawer-topline h3,
.drawer-block h4,
.drawer-owner-tagline,
.time-intel-value {
    color: var(--app-text-strong);
}

.eyebrow,
.stat-card span,
.promoted-strip-label,
.browser-table-head,
.time-intel-label,
.drawer-owner-chip,
.server-owner-chip {
    color: var(--app-accent);
}

.server-row-title a:hover,
.mini-item:hover strong,
.rank-row:hover strong,
.promoted-strip-item:hover strong,
.featured-card h3 a:hover,
.server-card h3 a:hover {
    color: var(--app-accent-soft);
}

.promoted-strip {
    padding-top: 16px;
    border-top: 1px solid var(--app-line);
}

.promoted-strip-item {
    border-radius: 16px;
}

.server-owner-chip,
.drawer-owner-chip {
    border-color: var(--app-line);
    background: rgba(214, 195, 143, 0.08);
    color: var(--app-accent-soft);
}

.server-owner-chip.is-verified {
    border-color: rgba(159, 212, 159, 0.28);
    background: rgba(159, 212, 159, 0.12);
}

/* Dashboard and detail helpers */

.stat-card,
.account-detail-row,
.account-identity-row,
.drawer-stat-card,
.drawer-meta-item,
.drawer-rule-item,
.drawer-tag,
.drawer-history-row,
.drawer-players-summary-item,
.drawer-owner-fact,
.time-intel-card {
    border-radius: 16px;
}

.drawer-owner-link-card {
    border-radius: 16px;
}

.account-provider-card,
.account-card,
.claim-live-card {
    background:
        radial-gradient(circle at top, rgba(255, 240, 199, 0.06), transparent 26%),
        var(--app-panel-card-bg);
}

.detail-item,
.metric-block,
.rule-item {
    color: var(--app-text-muted-strong);
}

.drawer-owner-description,
.section-heading p,
.player-history-summary-item small,
.promotion-summary-copy p {
    color: var(--app-text-muted);
}

.time-intel-card {
    border-color: var(--app-line);
    background:
        radial-gradient(circle at top, rgba(255, 240, 199, 0.05), transparent 30%),
        var(--app-panel-card-bg);
    box-shadow: none;
}

.owner-logo-preview-shell,
.img-uploader__preview,
.img-uploader__empty {
    border-color: var(--app-line);
    background: rgba(255, 255, 255, 0.03);
}

.img-uploader__empty,
.owner-logo-preview-empty {
    color: var(--app-text-muted);
}

/* Search controls */

.browser-view-switch,
.browser-option-field,
.browser-option-search input,
.browser-active-chip {
    border-color: var(--app-line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--app-text-muted-strong);
}

.browser-option-field::after {
    border-right-color: rgba(255, 247, 230, 0.64);
    border-bottom-color: rgba(255, 247, 230, 0.64);
}

.browser-search-submit {
    border-color: var(--app-line);
    background: rgba(214, 195, 143, 0.08);
}

.browser-search-submit:hover,
.browser-option-field:hover,
.browser-active-chip:hover {
    border-color: var(--app-line-strong);
}

.browser-toggle,
.browser-chip,
.browser-view-pill,
.browser-icon-button,
.browser-mini-button,
.browser-join-button,
.server-drawer-toggle {
    border-color: var(--app-line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--app-text-muted-strong);
}

.browser-toggle.is-active,
.browser-view-pill.is-active,
.browser-chip.is-active {
    color: var(--app-text-strong);
    border-color: var(--app-line-strong);
    background: rgba(214, 195, 143, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.browser-toggle:hover,
.browser-chip:hover,
.browser-view-pill:hover,
.browser-icon-button:hover,
.browser-mini-button:hover,
.browser-join-button:hover,
.server-drawer-toggle:hover {
    border-color: var(--app-line-strong);
    background: rgba(255, 255, 255, 0.06);
}

.server-drawer-toggle::before,
.browser-sort-link::after {
    border-right-color: var(--app-accent-soft);
    border-bottom-color: var(--app-accent-soft);
}

/* Drawer */

.drawer-block {
    border-radius: 18px;
}

.drawer-open-link {
    border-color: var(--app-line-strong);
    background: rgba(214, 195, 143, 0.14);
    color: #17140d;
    box-shadow: 0 10px 24px rgba(214, 195, 143, 0.18);
}

.drawer-open-link:hover {
    background: rgba(241, 222, 178, 0.24);
    box-shadow: 0 12px 28px rgba(214, 195, 143, 0.24);
}

.drawer-claim-promo {
    border-color: var(--app-line);
    background:
        radial-gradient(circle at top, rgba(255, 240, 199, 0.06), transparent 32%),
        var(--app-panel-card-bg);
}

.drawer-claim-promo-copy strong {
    color: var(--app-text-strong);
}

.drawer-claim-promo-copy p {
    color: var(--app-text-muted);
}

@media (max-width: 720px) {
    .browser-table {
        gap: 10px;
        padding: 12px;
    }

    .browser-table-row,
    .server-drawer-shell {
        padding-left: 14px;
        padding-right: 14px;
    }
}