/* ==========================================
   LOGO COLOR LAYOUT — ISOLATED TEST THEME
   This file only affects color-layout.html.
========================================== */

.color-layout-page {
    --bg: #07071b;
    --sidebar: #0b0b22;
    --panel: #12132c;
    --panel-light: #1a1c3a;
    --primary: #8a63ff;
    --primary-hover: #70a4ff;
    --success: #69c4ff;
    --warning: #ff9b72;
    --danger: #ff708e;
    --text: #f7f2ff;
    --text-light: #b9b2d2;
    --border: #2e2c55;
    --logo-coral: #ff9872;
    --logo-rose: #f36f8a;
    --logo-magenta: #c35eb3;
    --logo-violet: #8964ff;
    --logo-blue: #6ea7ff;
    --logo-gradient: linear-gradient(
        120deg,
        var(--logo-coral) 0%,
        var(--logo-rose) 24%,
        var(--logo-magenta) 48%,
        var(--logo-violet) 73%,
        var(--logo-blue) 100%
    );
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 112, 142, .09), transparent 29%),
        radial-gradient(circle at 88% 8%, rgba(110, 167, 255, .11), transparent 32%),
        var(--bg);
}

.color-layout-page .app,
.color-layout-page .main-content,
.color-layout-page .content-scroll {
    background: transparent;
}

.color-layout-page .sidebar {
    background:
        linear-gradient(180deg, rgba(12, 12, 38, .99), rgba(7, 7, 27, .99));
    border-right-color: rgba(137, 100, 255, .25);
}

.color-layout-page .sidebar::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--logo-gradient);
    opacity: .9;
}

.color-layout-page .collector-avatar,
.color-layout-page .sidebar-nav a.active,
.color-layout-page .collector-progress .progress-fill {
    background: var(--logo-gradient);
}

.color-layout-page .collector-avatar {
    box-shadow:
        0 0 0 4px rgba(137, 100, 255, .1),
        0 10px 28px rgba(112, 90, 255, .26);
}

.color-layout-page .sidebar-nav a:hover {
    background: rgba(137, 100, 255, .12);
}

.color-layout-page .sidebar-nav a.active {
    box-shadow: 0 9px 24px rgba(137, 100, 255, .28);
}

.color-layout-page .topbar.atlas-header {
    position: relative;
    background:
        linear-gradient(105deg, rgba(18, 19, 44, .98), rgba(11, 11, 34, .98));
    border-bottom-color: rgba(110, 167, 255, .22);
}

.color-layout-page .topbar.atlas-header::after {
    content: "";
    position: absolute;
    right: 24px;
    bottom: -1px;
    left: 24px;
    height: 1px;
    background: var(--logo-gradient);
    opacity: .65;
}

.color-layout-page .atlas-header-title > span,
.color-layout-page .panel-eyebrow {
    color: var(--logo-violet);
    background: var(--logo-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.color-layout-page .atlas-header input,
.color-layout-page .atlas-header select,
.color-layout-page .atlas-header-settings {
    background: rgba(24, 25, 55, .9);
    border-color: rgba(111, 105, 172, .32);
}

.color-layout-page .atlas-header input:focus,
.color-layout-page .atlas-header select:focus {
    border-color: var(--logo-blue);
    box-shadow: 0 0 0 3px rgba(110, 167, 255, .13);
}

.color-layout-page .dashboard-card {
    background:
        linear-gradient(145deg, rgba(20, 20, 49, .98), rgba(13, 13, 35, .98));
    border-color: rgba(103, 96, 159, .32);
    box-shadow: 0 18px 44px rgba(0, 0, 20, .2);
}

.color-layout-page .dashboard-card:hover {
    border-color: var(--logo-violet);
    box-shadow:
        0 18px 46px rgba(0, 0, 20, .35),
        0 0 28px rgba(137, 100, 255, .12);
}

.color-layout-page .overview::before {
    background:
        radial-gradient(circle, rgba(137, 100, 255, .28), rgba(110, 167, 255, .08) 58%, transparent 72%);
}

.color-layout-page .completion-ring {
    background:
        conic-gradient(
            var(--logo-coral) 0deg,
            var(--logo-magenta) 95deg,
            var(--logo-violet) 180deg,
            var(--logo-blue) 244.8deg,
            var(--panel-light) 244.8deg 360deg
        );
    box-shadow:
        0 0 28px rgba(137, 100, 255, .24),
        0 0 44px rgba(110, 167, 255, .08);
}

.color-layout-page .overview-stat-icon,
.color-layout-page .icon-button:hover {
    color: var(--logo-blue);
    background: rgba(137, 100, 255, .13);
}

.color-layout-page .overview-action:hover,
.color-layout-page .collections-view-all:hover {
    color: var(--logo-blue);
    border-color: var(--logo-violet);
    background: rgba(137, 100, 255, .12);
}

.color-layout-page .pokemon-card {
    --collection-accent: var(--logo-coral);
    --collection-glow: rgba(255, 152, 114, .22);
}

.color-layout-page .one-piece-card {
    --collection-accent: var(--logo-rose);
    --collection-glow: rgba(243, 111, 138, .22);
}

.color-layout-page .lorcana-card {
    --collection-accent: var(--logo-violet);
    --collection-glow: rgba(137, 100, 255, .22);
}

.color-layout-page .sports-card {
    --collection-accent: var(--logo-blue);
    --collection-glow: rgba(110, 167, 255, .22);
}

.color-layout-page .next-goal-card {
    border-color: rgba(255, 152, 114, .28);
    background:
        linear-gradient(100deg, rgba(255, 112, 142, .1), rgba(137, 100, 255, .08), rgba(18, 19, 44, .56));
}

.color-layout-page .next-goal-icon,
.color-layout-page .next-goal-progress > span {
    color: var(--logo-coral);
}

.color-layout-page .next-goal-fill,
.color-layout-page .treasure-view-button,
.color-layout-page .wishlist-view-all,
.color-layout-page .activity-timeline-button {
    background: var(--logo-gradient);
    border-color: transparent;
    color: #fff;
}

.color-layout-page .treasure-card::before {
    background: rgba(195, 94, 179, .16);
}

.color-layout-page .treasure-glow {
    background:
        radial-gradient(
            circle,
            rgba(255, 152, 114, .25),
            rgba(195, 94, 179, .14) 42%,
            rgba(110, 167, 255, .08) 60%,
            transparent 74%
        );
}

.color-layout-page .treasure-badge,
.color-layout-page .treasure-refresh:hover {
    color: var(--logo-coral);
    border-color: rgba(255, 152, 114, .42);
    background: rgba(255, 152, 114, .09);
}

.color-layout-page .market-chart-line,
.color-layout-page .goal-progress-fill,
.color-layout-page .wishlist-progress-fill {
    background: var(--logo-gradient);
}

.color-layout-page ::selection {
    background: rgba(137, 100, 255, .45);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .color-layout-page *,
    .color-layout-page *::before,
    .color-layout-page *::after {
        scroll-behavior: auto !important;
    }
}

/* ==========================================
   FLAT REDESIGN — REDUCED SHADOWS AND GLOW
========================================== */

.color-layout-page {
    background: var(--bg);
}

.color-layout-page .sidebar,
.color-layout-page .topbar.atlas-header,
.color-layout-page .dashboard-card,
.color-layout-page .collection-card {
    background: var(--panel);
}

.color-layout-page .sidebar {
    background: var(--sidebar);
}

.color-layout-page .topbar.atlas-header {
    border-bottom-color: var(--border);
}

.color-layout-page .dashboard-card {
    border-color: var(--border);
}

.color-layout-page .collector-avatar,
.color-layout-page .sidebar-nav a.active,
.color-layout-page .dashboard-card,
.color-layout-page .dashboard-card:hover,
.color-layout-page .collection-card,
.color-layout-page .collection-card:hover,
.color-layout-page .overview-stat,
.color-layout-page .overview-stat:hover,
.color-layout-page .completion-ring,
.color-layout-page .treasure-image,
.color-layout-page .treasure-image-wrap:hover .treasure-image,
.color-layout-page .treasure-value,
.color-layout-page .treasure-details > div,
.color-layout-page .icon-button,
.color-layout-page button {
    box-shadow: none;
}

.color-layout-page .dashboard-card:hover,
.color-layout-page .collection-card:hover,
.color-layout-page .overview-stat:hover {
    transform: translateY(-1px);
}

.color-layout-page .dashboard-card:hover {
    border-color: rgba(137, 100, 255, .62);
}

.color-layout-page .collection-card:hover {
    border-color: var(--collection-accent);
}

.color-layout-page .overview::before,
.color-layout-page .treasure-card::before,
.color-layout-page .treasure-glow,
.color-layout-page .collection-card::before {
    display: none;
}

.color-layout-page .overview-stat,
.color-layout-page .treasure-value,
.color-layout-page .treasure-details > div,
.color-layout-page .next-goal-card {
    background: var(--panel-light);
    border-color: var(--border);
}

.color-layout-page .atlas-header input,
.color-layout-page .atlas-header select,
.color-layout-page .atlas-header-settings {
    background: #181936;
}

.color-layout-page .treasure-image {
    border: 1px solid rgba(185, 178, 210, .22);
}

.color-layout-page .completion-ring {
    border: 1px solid rgba(137, 100, 255, .22);
}