* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root,
[data-color="purple"] {
    --bg-primary: #f5f0ff;
    --bg-primary-rgb: 245, 240, 255;
    --bg-secondary: #e9dcff;
    --bg-card: #ffffff;
    --text-primary: #2d1b4e;
    --text-secondary: #6b4fa3;
    --accent: #9b7fd4;
    --border: #d4c5f0;
    --hover: #f0e7ff;
    --search-input-bg: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"][data-color="purple"] {
    --bg-primary: #1a0d2e;
    --bg-primary-rgb: 26, 13, 46;
    --bg-secondary: #2d1b4e;
    --bg-card: #3d2a5c;
    --text-primary: #f5f0ff;
    --text-secondary: #c5b3e6;
    --accent: #9b7fd4;
    --border: #5a4178;
    --hover: #4a3366;
    --search-input-bg: rgba(61, 42, 92, 0.3);
}

/* Blue — Water / Ice */
[data-color="blue"] {
    --bg-primary: #eef5fc;
    --bg-primary-rgb: 238, 245, 252;
    --bg-secondary: #d4e8f8;
    --bg-card: #ffffff;
    --text-primary: #142d4e;
    --text-secondary: #3b6fa0;
    --accent: #5a9fd4;
    --border: #b3d4ed;
    --hover: #e3f0fa;
    --search-input-bg: rgba(255, 255, 255, 0.3);
}
[data-theme="dark"][data-color="blue"] {
    --bg-primary: #0b1929;
    --bg-primary-rgb: 11, 25, 41;
    --bg-secondary: #142d4e;
    --bg-card: #1e3f66;
    --text-primary: #e3f0fa;
    --text-secondary: #8dbde0;
    --accent: #5a9fd4;
    --border: #2c5a85;
    --hover: #1a3a5c;
    --search-input-bg: rgba(30, 63, 102, 0.3);
}

/* Red — Fire */
[data-color="red"] {
    --bg-primary: #fdf0ee;
    --bg-primary-rgb: 253, 240, 238;
    --bg-secondary: #f8d8d2;
    --bg-card: #ffffff;
    --text-primary: #4e1a14;
    --text-secondary: #a0493b;
    --accent: #d46a5a;
    --border: #edb8b0;
    --hover: #fae5e1;
    --search-input-bg: rgba(255, 255, 255, 0.3);
}
[data-theme="dark"][data-color="red"] {
    --bg-primary: #2a0e0b;
    --bg-primary-rgb: 42, 14, 11;
    --bg-secondary: #4e1a14;
    --bg-card: #6b2b22;
    --text-primary: #fae5e1;
    --text-secondary: #e0a198;
    --accent: #d46a5a;
    --border: #85362a;
    --hover: #5c241c;
    --search-input-bg: rgba(107, 43, 34, 0.3);
}

/* Green — Forest */
[data-color="green"] {
    --bg-primary: #eef7f0;
    --bg-primary-rgb: 238, 247, 240;
    --bg-secondary: #d1ebd6;
    --bg-card: #ffffff;
    --text-primary: #1a3d20;
    --text-secondary: #3e7a4a;
    --accent: #5aad6a;
    --border: #a8d5b0;
    --hover: #e0f2e3;
    --search-input-bg: rgba(255, 255, 255, 0.3);
}
[data-theme="dark"][data-color="green"] {
    --bg-primary: #0b1f0f;
    --bg-primary-rgb: 11, 31, 15;
    --bg-secondary: #1a3d20;
    --bg-card: #264d2e;
    --text-primary: #e0f2e3;
    --text-secondary: #8cc898;
    --accent: #5aad6a;
    --border: #346b3e;
    --hover: #1e4425;
    --search-input-bg: rgba(38, 77, 46, 0.3);
}

/* Black — Obsidian */
[data-color="black"] {
    --bg-primary: #f0eeee;
    --bg-primary-rgb: 240, 238, 238;
    --bg-secondary: #d6d2d2;
    --bg-card: #ffffff;
    --text-primary: #1a1a1a;
    --text-secondary: #5c5c5c;
    --accent: #6e6e6e;
    --border: #bcb8b8;
    --hover: #e3e0e0;
    --search-input-bg: rgba(255, 255, 255, 0.3);
}
[data-theme="dark"][data-color="black"] {
    --bg-primary: #0e0e0e;
    --bg-primary-rgb: 14, 14, 14;
    --bg-secondary: #1c1c1c;
    --bg-card: #2a2a2a;
    --text-primary: #e8e8e8;
    --text-secondary: #a0a0a0;
    --accent: #808080;
    --border: #404040;
    --hover: #333333;
    --search-input-bg: rgba(42, 42, 42, 0.3);
}

/* White — Quartz */
[data-color="white"] {
    --bg-primary: #faf9f6;
    --bg-primary-rgb: 250, 249, 246;
    --bg-secondary: #edeae3;
    --bg-card: #ffffff;
    --text-primary: #3a3630;
    --text-secondary: #8a8278;
    --accent: #b8a88a;
    --border: #d9d3c7;
    --hover: #f3f0ea;
    --search-input-bg: rgba(255, 255, 255, 0.3);
}
[data-theme="dark"][data-color="white"] {
    --bg-primary: #1a1914;
    --bg-primary-rgb: 26, 25, 20;
    --bg-secondary: #2e2c24;
    --bg-card: #3d3a30;
    --text-primary: #f0ece4;
    --text-secondary: #c4bdb0;
    --accent: #b8a88a;
    --border: #56523e;
    --hover: #44412f;
    --search-input-bg: rgba(61, 58, 48, 0.3);
}

/* ═══ Guild Gradient Themes ═══ */

/* Azorius (White + Blue) */
[data-color="azorius"] {
    --bg-primary: #eef3fa;
    --bg-primary-rgb: 238, 243, 250;
    --bg-secondary: #d4dff0;
    --bg-card: #ffffff;
    --text-primary: #1c2e4a;
    --text-secondary: #4a6d96;
    --accent: #7a9ec4;
    --border: #b8cde2;
    --hover: #e4ecf6;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #f0eeea 0%, #eef3fa 50%, #dde8f4 100%);
}
[data-theme="dark"][data-color="azorius"] {
    --bg-primary: #0e1520;
    --bg-primary-rgb: 14, 21, 32;
    --bg-secondary: #1a2840;
    --bg-card: #253654;
    --text-primary: #e4ecf6;
    --text-secondary: #94b3d4;
    --accent: #7a9ec4;
    --border: #344d6e;
    --hover: #1e3250;
    --search-input-bg: rgba(37, 54, 84, 0.3);
    --bg-gradient: linear-gradient(135deg, #16140f 0%, #0e1520 50%, #0c1a2e 100%);
}

/* Dimir (Blue + Black) */
[data-color="dimir"] {
    --bg-primary: #ebeef4;
    --bg-primary-rgb: 235, 238, 244;
    --bg-secondary: #ced4e2;
    --bg-card: #ffffff;
    --text-primary: #1a1e2e;
    --text-secondary: #4e5672;
    --accent: #6670a0;
    --border: #b3b9d0;
    --hover: #dfe3ee;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #eef3fa 0%, #ebeef4 50%, #e4e2e6 100%);
}
[data-theme="dark"][data-color="dimir"] {
    --bg-primary: #0c0e18;
    --bg-primary-rgb: 12, 14, 24;
    --bg-secondary: #181c30;
    --bg-card: #252a42;
    --text-primary: #dfe3ee;
    --text-secondary: #8b92b4;
    --accent: #6670a0;
    --border: #363c58;
    --hover: #1e2238;
    --search-input-bg: rgba(37, 42, 66, 0.3);
    --bg-gradient: linear-gradient(135deg, #0b1929 0%, #0c0e18 50%, #0e0e0e 100%);
}

/* Rakdos (Black + Red) */
[data-color="rakdos"] {
    --bg-primary: #f4eeee;
    --bg-primary-rgb: 244, 238, 238;
    --bg-secondary: #e4d2d0;
    --bg-card: #ffffff;
    --text-primary: #3a1a18;
    --text-secondary: #8a4a42;
    --accent: #b05048;
    --border: #d4b0ac;
    --hover: #f0e2e0;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #eeecec 0%, #f4eeee 50%, #f8e8e4 100%);
}
[data-theme="dark"][data-color="rakdos"] {
    --bg-primary: #1a0c0a;
    --bg-primary-rgb: 26, 12, 10;
    --bg-secondary: #301814;
    --bg-card: #482422;
    --text-primary: #f0e2e0;
    --text-secondary: #c89088;
    --accent: #b05048;
    --border: #5e302a;
    --hover: #3a1e1a;
    --search-input-bg: rgba(72, 36, 34, 0.3);
    --bg-gradient: linear-gradient(135deg, #0e0e0e 0%, #1a0c0a 50%, #2a0e0b 100%);
}

/* Gruul (Red + Green) */
[data-color="gruul"] {
    --bg-primary: #f4f0ec;
    --bg-primary-rgb: 244, 240, 236;
    --bg-secondary: #e4d8ce;
    --bg-card: #ffffff;
    --text-primary: #36261a;
    --text-secondary: #7a5e3e;
    --accent: #a88040;
    --border: #d0c0a8;
    --hover: #f0e8de;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #faeae4 0%, #f4f0ec 50%, #e8f0e6 100%);
}
[data-theme="dark"][data-color="gruul"] {
    --bg-primary: #1a120a;
    --bg-primary-rgb: 26, 18, 10;
    --bg-secondary: #302210;
    --bg-card: #443218;
    --text-primary: #f0e8de;
    --text-secondary: #c8a878;
    --accent: #a88040;
    --border: #584420;
    --hover: #38261a;
    --search-input-bg: rgba(68, 50, 24, 0.3);
    --bg-gradient: linear-gradient(135deg, #220e08 0%, #1a120a 50%, #0e1a10 100%);
}

/* Selesnya (Green + White) */
[data-color="selesnya"] {
    --bg-primary: #f2f6f0;
    --bg-primary-rgb: 242, 246, 240;
    --bg-secondary: #dce8d6;
    --bg-card: #ffffff;
    --text-primary: #2a3626;
    --text-secondary: #5e7a4e;
    --accent: #82a86a;
    --border: #b8d0a8;
    --hover: #e8f0e2;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #eef7f0 0%, #f2f6f0 50%, #f6f4ec 100%);
}
[data-theme="dark"][data-color="selesnya"] {
    --bg-primary: #101a0e;
    --bg-primary-rgb: 16, 26, 14;
    --bg-secondary: #1e3018;
    --bg-card: #2e4424;
    --text-primary: #e8f0e2;
    --text-secondary: #98c088;
    --accent: #82a86a;
    --border: #3e5830;
    --hover: #243820;
    --search-input-bg: rgba(46, 68, 36, 0.3);
    --bg-gradient: linear-gradient(135deg, #0b1f0f 0%, #101a0e 50%, #181810 100%);
}

/* Orzhov (White + Black) */
[data-color="orzhov"] {
    --bg-primary: #f0efed;
    --bg-primary-rgb: 240, 239, 237;
    --bg-secondary: #d8d6d2;
    --bg-card: #ffffff;
    --text-primary: #2a2826;
    --text-secondary: #6e6a64;
    --accent: #9a948c;
    --border: #c4c0ba;
    --hover: #e8e6e2;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #f6f4f0 0%, #f0efed 50%, #e6e4e2 100%);
}
[data-theme="dark"][data-color="orzhov"] {
    --bg-primary: #141312;
    --bg-primary-rgb: 20, 19, 18;
    --bg-secondary: #242220;
    --bg-card: #343230;
    --text-primary: #e8e6e2;
    --text-secondary: #a8a49e;
    --accent: #9a948c;
    --border: #484440;
    --hover: #2c2a28;
    --search-input-bg: rgba(52, 50, 48, 0.3);
    --bg-gradient: linear-gradient(135deg, #1a1914 0%, #141312 50%, #0e0e0e 100%);
}

/* Izzet (Blue + Red) */
[data-color="izzet"] {
    --bg-primary: #f0eef8;
    --bg-primary-rgb: 240, 238, 248;
    --bg-secondary: #dcd4ee;
    --bg-card: #ffffff;
    --text-primary: #2e1a40;
    --text-secondary: #7a4a8a;
    --accent: #9a60b0;
    --border: #c8b0d8;
    --hover: #ece6f4;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #eef3fa 0%, #f0eef8 50%, #f8ece8 100%);
}
[data-theme="dark"][data-color="izzet"] {
    --bg-primary: #160e22;
    --bg-primary-rgb: 22, 14, 34;
    --bg-secondary: #281a3e;
    --bg-card: #3a2856;
    --text-primary: #ece6f4;
    --text-secondary: #b890c8;
    --accent: #9a60b0;
    --border: #4e3668;
    --hover: #302048;
    --search-input-bg: rgba(58, 40, 86, 0.3);
    --bg-gradient: linear-gradient(135deg, #0b1929 0%, #160e22 50%, #2a0e0b 100%);
}

/* Golgari (Black + Green) */
[data-color="golgari"] {
    --bg-primary: #eff0ec;
    --bg-primary-rgb: 239, 240, 236;
    --bg-secondary: #d2d6ca;
    --bg-card: #ffffff;
    --text-primary: #1e2618;
    --text-secondary: #546842;
    --accent: #6e8856;
    --border: #b0bca0;
    --hover: #e4e8de;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #eeecec 0%, #eff0ec 50%, #ecf2ea 100%);
}
[data-theme="dark"][data-color="golgari"] {
    --bg-primary: #0e120a;
    --bg-primary-rgb: 14, 18, 10;
    --bg-secondary: #1c2614;
    --bg-card: #2c3820;
    --text-primary: #e4e8de;
    --text-secondary: #96aa82;
    --accent: #6e8856;
    --border: #3c4c2c;
    --hover: #22301a;
    --search-input-bg: rgba(44, 56, 32, 0.3);
    --bg-gradient: linear-gradient(135deg, #0e0e0e 0%, #0e120a 50%, #0b1f0f 100%);
}

/* Boros (Red + White) */
[data-color="boros"] {
    --bg-primary: #f8f0ec;
    --bg-primary-rgb: 248, 240, 236;
    --bg-secondary: #eedcd0;
    --bg-card: #ffffff;
    --text-primary: #40281e;
    --text-secondary: #946050;
    --accent: #c07860;
    --border: #dcc0b0;
    --hover: #f4e8e0;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #faeae4 0%, #f8f0ec 50%, #f4f0ea 100%);
}
[data-theme="dark"][data-color="boros"] {
    --bg-primary: #201008;
    --bg-primary-rgb: 32, 16, 8;
    --bg-secondary: #381c10;
    --bg-card: #4e2c1c;
    --text-primary: #f4e8e0;
    --text-secondary: #d0a090;
    --accent: #c07860;
    --border: #644030;
    --hover: #402418;
    --search-input-bg: rgba(78, 44, 28, 0.3);
    --bg-gradient: linear-gradient(135deg, #2a0e0b 0%, #201008 50%, #1a1914 100%);
}

/* Simic (Green + Blue) */
[data-color="simic"] {
    --bg-primary: #ecf4f4;
    --bg-primary-rgb: 236, 244, 244;
    --bg-secondary: #c8e0de;
    --bg-card: #ffffff;
    --text-primary: #142e2e;
    --text-secondary: #3a7272;
    --accent: #4e9a96;
    --border: #a0ccc8;
    --hover: #deecea;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #eef7f0 0%, #ecf4f4 50%, #e8f0f6 100%);
}
[data-theme="dark"][data-color="simic"] {
    --bg-primary: #081818;
    --bg-primary-rgb: 8, 24, 24;
    --bg-secondary: #102828;
    --bg-card: #1c3c3a;
    --text-primary: #deecea;
    --text-secondary: #82b8b4;
    --accent: #4e9a96;
    --border: #285250;
    --hover: #14302e;
    --search-input-bg: rgba(28, 60, 58, 0.3);
    --bg-gradient: linear-gradient(135deg, #0b1f0f 0%, #081818 50%, #0b1929 100%);
}

/* ═══ Shard Themes (3-color) ═══ */

/* Esper (White + Blue + Black) */
[data-color="esper"] {
    --bg-primary: #eceef2;
    --bg-primary-rgb: 236, 238, 242;
    --bg-secondary: #d0d4de;
    --bg-card: #ffffff;
    --text-primary: #1a1e2a;
    --text-secondary: #525a72;
    --accent: #7080a0;
    --border: #b4bace;
    --hover: #e0e4ec;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #f0ece8 0%, #eceef4 35%, #e8eaf0 65%, #e6e4e4 100%);
}
[data-theme="dark"][data-color="esper"] {
    --bg-primary: #0e1018;
    --bg-primary-rgb: 14, 16, 24;
    --bg-secondary: #1a1e2c;
    --bg-card: #282c3e;
    --text-primary: #e0e4ec;
    --text-secondary: #8e96b0;
    --accent: #7080a0;
    --border: #383e54;
    --hover: #202436;
    --search-input-bg: rgba(40, 44, 62, 0.3);
    --bg-gradient: linear-gradient(135deg, #161410 0%, #0e1018 35%, #0c0e16 65%, #0e0e0e 100%);
}

/* Grixis (Blue + Black + Red) */
[data-color="grixis"] {
    --bg-primary: #f0ecee;
    --bg-primary-rgb: 240, 236, 238;
    --bg-secondary: #d8d0d4;
    --bg-card: #ffffff;
    --text-primary: #2a1a20;
    --text-secondary: #72424e;
    --accent: #985868;
    --border: #c8b0b8;
    --hover: #ece4e8;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #eaf0f6 0%, #eceaee 35%, #ece8e8 65%, #f4e8e4 100%);
}
[data-theme="dark"][data-color="grixis"] {
    --bg-primary: #180c10;
    --bg-primary-rgb: 24, 12, 16;
    --bg-secondary: #2c181e;
    --bg-card: #402430;
    --text-primary: #ece4e8;
    --text-secondary: #b8889a;
    --accent: #985868;
    --border: #543040;
    --hover: #341c28;
    --search-input-bg: rgba(64, 36, 48, 0.3);
    --bg-gradient: linear-gradient(135deg, #0a1420 0%, #140c12 35%, #120c0c 65%, #220c08 100%);
}

/* Jund (Black + Red + Green) */
[data-color="jund"] {
    --bg-primary: #f0eeea;
    --bg-primary-rgb: 240, 238, 234;
    --bg-secondary: #d8d2c8;
    --bg-card: #ffffff;
    --text-primary: #2a2218;
    --text-secondary: #6a5838;
    --accent: #8a7040;
    --border: #c4b89c;
    --hover: #ece8e0;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #ece8e6 0%, #f0e8e4 35%, #f0ece6 65%, #e8eeea 100%);
}
[data-theme="dark"][data-color="jund"] {
    --bg-primary: #14100a;
    --bg-primary-rgb: 20, 16, 10;
    --bg-secondary: #281e10;
    --bg-card: #3c2e1c;
    --text-primary: #ece8e0;
    --text-secondary: #b8a478;
    --accent: #8a7040;
    --border: #504020;
    --hover: #302214;
    --search-input-bg: rgba(60, 46, 28, 0.3);
    --bg-gradient: linear-gradient(135deg, #0e0e0c 0%, #1c0e08 35%, #160e08 65%, #0c160e 100%);
}

/* Naya (Red + Green + White) */
[data-color="naya"] {
    --bg-primary: #f4f0ec;
    --bg-primary-rgb: 244, 240, 236;
    --bg-secondary: #e4dcd0;
    --bg-card: #ffffff;
    --text-primary: #36281e;
    --text-secondary: #7a6040;
    --accent: #a8843c;
    --border: #d0c0a4;
    --hover: #f0eae0;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #f6eae4 0%, #eef0e8 35%, #eff0ea 65%, #f2f0ea 100%);
}
[data-theme="dark"][data-color="naya"] {
    --bg-primary: #1a1208;
    --bg-primary-rgb: 26, 18, 8;
    --bg-secondary: #302010;
    --bg-card: #443018;
    --text-primary: #f0eae0;
    --text-secondary: #c8a870;
    --accent: #a8843c;
    --border: #584420;
    --hover: #38261a;
    --search-input-bg: rgba(68, 48, 24, 0.3);
    --bg-gradient: linear-gradient(135deg, #200e06 0%, #10180c 35%, #121410 65%, #161410 100%);
}

/* Bant (Green + White + Blue) */
[data-color="bant"] {
    --bg-primary: #eef4f2;
    --bg-primary-rgb: 238, 244, 242;
    --bg-secondary: #d0e2dc;
    --bg-card: #ffffff;
    --text-primary: #1a302a;
    --text-secondary: #3e7266;
    --accent: #5a9a88;
    --border: #a8cec2;
    --hover: #e2eee8;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #eaf2ec 0%, #f0f0ea 35%, #ecf0f4 65%, #e8f0f4 100%);
}
[data-theme="dark"][data-color="bant"] {
    --bg-primary: #0a1612;
    --bg-primary-rgb: 10, 22, 18;
    --bg-secondary: #142a22;
    --bg-card: #1e3e34;
    --text-primary: #e2eee8;
    --text-secondary: #88bea8;
    --accent: #5a9a88;
    --border: #2c5246;
    --hover: #183428;
    --search-input-bg: rgba(30, 62, 52, 0.3);
    --bg-gradient: linear-gradient(135deg, #0c1a0e 0%, #141410 35%, #0e1418 65%, #0a1620 100%);
}

/* ═══ Wedge Themes (3-color) ═══ */

/* Mardu (Red + White + Black) */
[data-color="mardu"] {
    --bg-primary: #f2eeec;
    --bg-primary-rgb: 242, 238, 236;
    --bg-secondary: #dcd4d0;
    --bg-card: #ffffff;
    --text-primary: #302018;
    --text-secondary: #7a5848;
    --accent: #a0705c;
    --border: #ccb4a8;
    --hover: #ece6e2;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #f4e8e4 0%, #f2f0ea 35%, #eeecea 65%, #eae8e8 100%);
}
[data-theme="dark"][data-color="mardu"] {
    --bg-primary: #180e0a;
    --bg-primary-rgb: 24, 14, 10;
    --bg-secondary: #2e1c14;
    --bg-card: #442c22;
    --text-primary: #ece6e2;
    --text-secondary: #c49c88;
    --accent: #a0705c;
    --border: #583e30;
    --hover: #36221a;
    --search-input-bg: rgba(68, 44, 34, 0.3);
    --bg-gradient: linear-gradient(135deg, #200c06 0%, #161410 35%, #121010 65%, #0e0e0e 100%);
}

/* Temur (Green + Blue + Red) */
[data-color="temur"] {
    --bg-primary: #ecf2f0;
    --bg-primary-rgb: 236, 242, 240;
    --bg-secondary: #c8dcd6;
    --bg-card: #ffffff;
    --text-primary: #162a28;
    --text-secondary: #38706a;
    --accent: #4a9490;
    --border: #9ec4be;
    --hover: #deeae6;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #eaf0e8 0%, #e8f0f4 35%, #eef0f2 65%, #f2eae8 100%);
}
[data-theme="dark"][data-color="temur"] {
    --bg-primary: #081614;
    --bg-primary-rgb: 8, 22, 20;
    --bg-secondary: #102826;
    --bg-card: #1a3c38;
    --text-primary: #deeae6;
    --text-secondary: #82b4ae;
    --accent: #4a9490;
    --border: #284e4a;
    --hover: #14322e;
    --search-input-bg: rgba(26, 60, 56, 0.3);
    --bg-gradient: linear-gradient(135deg, #0c180c 0%, #081418 35%, #0c1416 65%, #1a0c0a 100%);
}

/* Abzan (White + Black + Green) */
[data-color="abzan"] {
    --bg-primary: #f0f0ec;
    --bg-primary-rgb: 240, 240, 236;
    --bg-secondary: #d6d8ce;
    --bg-card: #ffffff;
    --text-primary: #22261e;
    --text-secondary: #5a6450;
    --accent: #78866a;
    --border: #b4bca8;
    --hover: #e6e8e0;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #f2f0ea 0%, #eceae8 35%, #eceeea 65%, #eaf0ec 100%);
}
[data-theme="dark"][data-color="abzan"] {
    --bg-primary: #10120c;
    --bg-primary-rgb: 16, 18, 12;
    --bg-secondary: #1e221a;
    --bg-card: #303628;
    --text-primary: #e6e8e0;
    --text-secondary: #98a48c;
    --accent: #78866a;
    --border: #404a36;
    --hover: #262c20;
    --search-input-bg: rgba(48, 54, 40, 0.3);
    --bg-gradient: linear-gradient(135deg, #141210 0%, #0e0e0c 35%, #0e120c 65%, #0c160e 100%);
}

/* Jeskai (Blue + Red + White) */
[data-color="jeskai"] {
    --bg-primary: #f0eff4;
    --bg-primary-rgb: 240, 239, 244;
    --bg-secondary: #d8d4e2;
    --bg-card: #ffffff;
    --text-primary: #261e34;
    --text-secondary: #664e7a;
    --accent: #8868a0;
    --border: #c0b0d0;
    --hover: #e8e4f0;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #eaf0f8 0%, #f0eaf0 35%, #f4ecea 65%, #f2f0ec 100%);
}
[data-theme="dark"][data-color="jeskai"] {
    --bg-primary: #120e1a;
    --bg-primary-rgb: 18, 14, 26;
    --bg-secondary: #221a30;
    --bg-card: #342848;
    --text-primary: #e8e4f0;
    --text-secondary: #aa90c0;
    --accent: #8868a0;
    --border: #463460;
    --hover: #2a1e3c;
    --search-input-bg: rgba(52, 40, 72, 0.3);
    --bg-gradient: linear-gradient(135deg, #0a1420 0%, #140c18 35%, #1c0c0a 65%, #141210 100%);
}

/* Sultai (Black + Green + Blue) */
[data-color="sultai"] {
    --bg-primary: #ecf0f0;
    --bg-primary-rgb: 236, 240, 240;
    --bg-secondary: #cad6d4;
    --bg-card: #ffffff;
    --text-primary: #142224;
    --text-secondary: #3a6264;
    --accent: #4e8284;
    --border: #a0c0be;
    --hover: #dee8e8;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #e8e8e8 0%, #eaf0ec 35%, #eaf0f2 65%, #e8eef4 100%);
}
[data-theme="dark"][data-color="sultai"] {
    --bg-primary: #081214;
    --bg-primary-rgb: 8, 18, 20;
    --bg-secondary: #102224;
    --bg-card: #1a3436;
    --text-primary: #dee8e8;
    --text-secondary: #7eb0ae;
    --accent: #4e8284;
    --border: #284848;
    --hover: #142e2e;
    --search-input-bg: rgba(26, 52, 54, 0.3);
    --bg-gradient: linear-gradient(135deg, #0c0c0c 0%, #0c140e 35%, #081416 65%, #0a1420 100%);
}

/* ═══ Nephilim Themes (4-color) ═══ */

/* Glint-Eye / Non-White (UBRG) */
[data-color="glint-eye"] {
    --bg-primary: #eceeec;
    --bg-primary-rgb: 236, 238, 236;
    --bg-secondary: #cad2cc;
    --bg-card: #ffffff;
    --text-primary: #1a2220;
    --text-secondary: #44605a;
    --accent: #5a807a;
    --border: #a0b8b2;
    --hover: #dee6e2;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #e8f0f6 0%, #e8e8ea 30%, #f0e8e4 60%, #e8f0ea 100%);
}
[data-theme="dark"][data-color="glint-eye"] {
    --bg-primary: #0a100e;
    --bg-primary-rgb: 10, 16, 14;
    --bg-secondary: #142220;
    --bg-card: #1e3430;
    --text-primary: #dee6e2;
    --text-secondary: #80aa9e;
    --accent: #5a807a;
    --border: #284842;
    --hover: #142e28;
    --search-input-bg: rgba(30, 52, 48, 0.3);
    --bg-gradient: linear-gradient(135deg, #081420 0%, #0c0c0e 30%, #1a0c08 60%, #0c160e 100%);
}

/* Dune-Brood / Non-Blue (BRGW) */
[data-color="dune-brood"] {
    --bg-primary: #f0eeea;
    --bg-primary-rgb: 240, 238, 234;
    --bg-secondary: #d8d2c8;
    --bg-card: #ffffff;
    --text-primary: #2a241a;
    --text-secondary: #6e603e;
    --accent: #90804a;
    --border: #c4ba9c;
    --hover: #e8e4dc;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #ece8e6 0%, #f0e8e2 30%, #eaf0e8 60%, #f0eeea 100%);
}
[data-theme="dark"][data-color="dune-brood"] {
    --bg-primary: #14100a;
    --bg-primary-rgb: 20, 16, 10;
    --bg-secondary: #261e10;
    --bg-card: #3a2e1c;
    --text-primary: #e8e4dc;
    --text-secondary: #b0a070;
    --accent: #90804a;
    --border: #4c4020;
    --hover: #2e2214;
    --search-input-bg: rgba(58, 46, 28, 0.3);
    --bg-gradient: linear-gradient(135deg, #0e0e0c 0%, #1a0e06 30%, #0e160c 60%, #14120e 100%);
}

/* Ink-Treader / Non-Black (RGWU) */
[data-color="ink-treader"] {
    --bg-primary: #eff2f0;
    --bg-primary-rgb: 239, 242, 240;
    --bg-secondary: #d2dcd6;
    --bg-card: #ffffff;
    --text-primary: #1c2a24;
    --text-secondary: #446a58;
    --accent: #5c8e76;
    --border: #a4c8b6;
    --hover: #e2ece6;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #f2eae6 0%, #eaf0ea 30%, #f0eeea 60%, #e8f0f6 100%);
}
[data-theme="dark"][data-color="ink-treader"] {
    --bg-primary: #0c140e;
    --bg-primary-rgb: 12, 20, 14;
    --bg-secondary: #182a1e;
    --bg-card: #243e30;
    --text-primary: #e2ece6;
    --text-secondary: #86b89e;
    --accent: #5c8e76;
    --border: #305640;
    --hover: #1c3628;
    --search-input-bg: rgba(36, 62, 48, 0.3);
    --bg-gradient: linear-gradient(135deg, #1a0c06 0%, #0c160c 30%, #14120e 60%, #0a1420 100%);
}

/* Witch-Maw / Non-Red (GWUB) */
[data-color="witch-maw"] {
    --bg-primary: #ecf0f2;
    --bg-primary-rgb: 236, 240, 242;
    --bg-secondary: #ccd8dc;
    --bg-card: #ffffff;
    --text-primary: #182428;
    --text-secondary: #3e6068;
    --accent: #548088;
    --border: #9ebcc4;
    --hover: #dee8ec;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #eaf0ea 0%, #f0eeea 30%, #ecf0f6 60%, #e6eaee 100%);
}
[data-theme="dark"][data-color="witch-maw"] {
    --bg-primary: #081214;
    --bg-primary-rgb: 8, 18, 20;
    --bg-secondary: #142428;
    --bg-card: #1e363c;
    --text-primary: #dee8ec;
    --text-secondary: #82acb4;
    --accent: #548088;
    --border: #284a52;
    --hover: #143038;
    --search-input-bg: rgba(30, 54, 60, 0.3);
    --bg-gradient: linear-gradient(135deg, #0c160c 0%, #12100e 30%, #0c1218 60%, #0c0e14 100%);
}

/* Yore-Tiller / Non-Green (WUBR) */
[data-color="yore-tiller"] {
    --bg-primary: #eeeef2;
    --bg-primary-rgb: 238, 238, 242;
    --bg-secondary: #d2d2de;
    --bg-card: #ffffff;
    --text-primary: #1e1e2c;
    --text-secondary: #54546e;
    --accent: #727294;
    --border: #b0b0c8;
    --hover: #e2e2ec;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #f0eeea 0%, #eaf0f6 30%, #e8e8ee 60%, #f2eae6 100%);
}
[data-theme="dark"][data-color="yore-tiller"] {
    --bg-primary: #0e0e16;
    --bg-primary-rgb: 14, 14, 22;
    --bg-secondary: #1c1c2c;
    --bg-card: #2a2a40;
    --text-primary: #e2e2ec;
    --text-secondary: #9494b2;
    --accent: #727294;
    --border: #3c3c58;
    --hover: #222238;
    --search-input-bg: rgba(42, 42, 64, 0.3);
    --bg-gradient: linear-gradient(135deg, #14120e 0%, #0a1220 30%, #0e0e14 60%, #1c0c0a 100%);
}

/* ═══ Five Color ═══ */

/* WUBRG (All five colors) */
[data-color="wubrg"] {
    --bg-primary: #eff0f0;
    --bg-primary-rgb: 239, 240, 240;
    --bg-secondary: #d4d6d4;
    --bg-card: #ffffff;
    --text-primary: #1e2220;
    --text-secondary: #505a54;
    --accent: #6a7a70;
    --border: #b0bab4;
    --hover: #e2e6e4;
    --search-input-bg: rgba(255, 255, 255, 0.3);
    --bg-gradient: linear-gradient(135deg, #f0eeea 0%, #e8f0f6 25%, #ece8ee 50%, #f0e8e4 75%, #eaf0ea 100%);
}
[data-theme="dark"][data-color="wubrg"] {
    --bg-primary: #0c0e0e;
    --bg-primary-rgb: 12, 14, 14;
    --bg-secondary: #1a1e1c;
    --bg-card: #2a302c;
    --text-primary: #e2e6e4;
    --text-secondary: #8e9e94;
    --accent: #6a7a70;
    --border: #3c4640;
    --hover: #222826;
    --search-input-bg: rgba(42, 48, 44, 0.3);
    --bg-gradient: linear-gradient(135deg, #14120e 0%, #081420 25%, #0e0c12 50%, #1a0c08 75%, #0c160e 100%);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-gradient, var(--bg-primary));
    color: var(--text-primary);
    transition: background 0.3s, color 0.3s;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Scrollbar styling for light mode */
::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--bg-secondary);
}

.header {
    background: var(--bg-secondary);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    border-bottom: 2px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-shrink: 0;
}

.header h1 {
    font-size: 1.5rem;
    color: var(--accent);
    letter-spacing: 2px;
    margin: 0;
    white-space: nowrap;
}

.header-logo {
    height: 50px;
    width: auto;
    border-radius: 8px;
    padding: 5px 10px;
    background: #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.moxfield-import-section {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.moxfield-input-main {
    flex: 1;
    padding: 0.85rem 1.2rem;
    background: var(--bg-primary);
    border: 2px solid var(--border);
    border-radius: 50px;
    color: var(--text-primary);
    font-size: 1rem;
}

.import-btn-main {
    padding: 0.85rem 1.5rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
    font-size: 1rem;
}

.import-btn-main:hover {
    background: #c5b3e6;
    transform: translateY(-2px);
}

.manual-btn {
    padding: 0.85rem 1.2rem;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 2px solid var(--border);
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
    font-size: 1rem;
}

.manual-btn:hover {
    border-color: var(--accent);
    background: var(--hover);
}

.header-controls {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding-right: 1rem;
}

.deck-selector {
    background: var(--bg-card);
    border: 2px solid var(--border);
    color: var(--text-primary);
    padding: 0.7rem 1.8rem 0.7rem 1.2rem;
    border-radius: 50px;
    font-size: 1rem;
    cursor: pointer;
    width: 50ch;
    min-width: 50ch;
    max-width: 50ch;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
}

.container {
    display: flex;
    flex: 1;
    min-height: 0;
}

.container {
    display: flex;
    flex: 1;
    min-height: 0;
}

.panel {
    flex: 1;
    padding: 0 1.5rem 1.5rem 1.5rem;
    overflow-y: auto;
    position: relative;
}

.right-panel {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}

.deck-content-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 5rem 1.5rem 0 1.5rem;
    min-height: 0;
}

.left-panel {
    border-right: 2px solid var(--border);
    max-width: 450px;
    padding: 1.5rem 1.5rem 1.5rem 1.5rem !important;
}

.search-section {
    margin-bottom: 1.5rem;
    padding: 0;
    min-width: 100%;
}

#cardSearch {
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 100% !important;
}

.search-results {
    padding: 0;
    width: 100%;
}

.search-input {
    width: 100%;
    padding: 0.9rem 1.2rem;
    border: 2px solid var(--border);
    border-radius: 50px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

.search-input:focus {
    outline: none;
    border-color: var(--accent);
}

.btn {
    background: var(--accent);
    color: white;
    border: none;
    padding: 0.9rem 1.8rem;
    border-radius: 50px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.2s;
}

.btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 2px solid var(--border);
}

.search-results {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.card-item {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.card-item:hover {
    background: var(--hover);
    border-color: var(--accent);
    transform: translateX(4px);
}

.card-item.highlighted {
    border-color: var(--accent);
    background: var(--hover);
    box-shadow: 0 0 10px var(--accent);
}

.card-name {
    font-weight: 600;
    flex: 1;
}

.card-type {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

.deck-section {
    margin-bottom: 2rem;
}

.deck-section:first-child {
    padding-top: 1rem;
}

.deck-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border);
}

.deck-title {
    font-size: 1.3rem;
    font-weight: 700;
}

.card-count {
    background: var(--accent);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.filter-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.filter-btn {
    background: var(--bg-card);
    border: 2px solid var(--border);
    color: var(--text-primary);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.filter-btn:hover {
    background: var(--hover);
}

.filter-btn.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.deck-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.deck-card {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: all 0.2s;
    aspect-ratio: 5/7;
}

.deck-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.deck-card.highlighted {
    border-color: var(--accent);
    box-shadow: 0 0 20px var(--accent);
    transform: scale(1.05);
}

.deck-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--bg-secondary);
}

.deck-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.7) 100%);
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.deck-card:hover .deck-card-overlay {
    opacity: 1;
}

.deck-card-name {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    pointer-events: none;
}

.deck-card:hover .deck-card-name {
    opacity: 1;
}

.deck-card-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(231, 76, 60, 0.9);
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    opacity: 0;
    z-index: 10;
}

.deck-card:hover .deck-card-remove {
    opacity: 1;
}

.deck-card-remove:hover {
    background: rgba(192, 57, 43, 1);
    transform: scale(1.1);
}

.deck-card-alt-art {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(155, 127, 212, 0.9);
    color: white;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    opacity: 0;
    z-index: 10;
}

.deck-card-alt-art .material-icons {
    font-size: 18px;
    line-height: 1;
}

.deck-card:hover .deck-card-alt-art {
    opacity: 1;
}

.deck-card-alt-art:hover {
    background: rgba(155, 127, 212, 1);
    transform: scale(1.1);
}

.deck-card-edit {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(155, 127, 212, 0.9);
    color: white;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    opacity: 0;
    z-index: 10;
}

.deck-card-edit .material-icons {
    font-size: 18px;
    line-height: 1;
}

.deck-card:hover .deck-card-edit {
    opacity: 1;
}

.deck-card-edit:hover {
    background: rgba(155, 127, 212, 1);
    transform: scale(1.1);
}

.deck-card-edit-menu {
    position: absolute;
    bottom: 44px;
    left: 8px;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 20;
    min-width: 200px;
    display: none;
    overflow: hidden;
}

.deck-card-edit-menu.show {
    display: block;
}

.deck-card-edit-menu-item {
    padding: 0.6rem 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.deck-card-edit-menu-item:last-child {
    border-bottom: none;
}

.deck-card-edit-menu-item:hover {
    background: var(--hover);
}

.deck-card-edit-menu-item .material-icons {
    font-size: 18px;
}

.deck-card-badges {
    position: absolute;
    bottom: 48px;
    left: 8px;
    display: flex;
    gap: 4px;
    pointer-events: none;
}

.deck-card-count {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    pointer-events: none;
    z-index: 5;
}

.commander-badge {
    background: linear-gradient(135deg, #f39c12, #e74c3c);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
}

.token-badge {
    background: linear-gradient(135deg, #3498db, #9b59b6);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
}

.emblem-badge {
    background: linear-gradient(135deg, #e67e22, #d35400);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
    max-width: 1200px;
    width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

.modal-close {
    position: sticky;
    top: 0.25rem;
    right: 0.5rem;
    float: right;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
    z-index: 10;
}

.modal-close:hover {
    background: var(--accent);
    color: white;
    transform: scale(1.1);
}

.modal-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--accent);
}

.alt-art-modal-layout {
    display: flex;
    gap: 1.5rem;
    min-height: 400px;
}

/* Left side — preview panel */
.alt-art-preview-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    width: 375px;
    position: sticky;
    top: 0;
    align-self: flex-start;
}

.alt-art-copy-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alt-art-copy-selector select {
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: 50px;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    text-align: center;
}

.alt-art-nav-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
    flex-shrink: 0;
}

.alt-art-nav-btn:hover {
    background: var(--hover);
    border-color: var(--accent);
}

.alt-art-nav-btn .material-icons {
    font-size: 18px;
}

.alt-art-preview-area {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alt-art-preview-img {
    width: 375px;
    border-radius: 12px;
    border: 3px solid var(--accent);
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.alt-art-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alt-art-toggle-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.alt-art-toggle {
    position: relative;
    width: 40px;
    height: 22px;
    background: var(--border);
    border-radius: 11px;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    padding: 0;
    flex-shrink: 0;
}

.alt-art-toggle.active {
    background: var(--accent);
}

.alt-art-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.alt-art-toggle.active::after {
    transform: translateX(18px);
}

/* Right side — art selection */
.alt-art-selection-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    padding-top: 2.5rem;
}

.alt-art-custom-url {
    display: flex;
    border: 2px solid var(--border);
    border-radius: 50px;
    overflow: hidden;
    background: var(--bg-card);
}

.alt-art-custom-url input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.85rem;
    padding: 0.6rem 1rem;
    outline: none;
    min-width: 0;
}

.alt-art-custom-url input::placeholder {
    color: var(--text-secondary);
}

.alt-art-custom-url button {
    background: var(--accent);
    color: white;
    border: none;
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.alt-art-custom-url button:hover {
    opacity: 0.85;
}

.alt-art-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    overflow-y: auto;
    flex: 1;
}

.alt-art-option {
    cursor: pointer;
    border: 3px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    position: relative;
}

.alt-art-option:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.alt-art-fav-btn {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(var(--bg-primary-rgb), 0.85);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transition: all 0.2s;
    z-index: 2;
}

.alt-art-option:hover .alt-art-fav-btn {
    opacity: 1;
}

.alt-art-fav-btn.favorited {
    opacity: 1;
    color: #f5c518;
}

.alt-art-fav-btn .material-icons {
    font-size: 22px;
}

.alt-art-fav-btn:hover {
    background: rgba(var(--bg-primary-rgb), 1);
    transform: scale(1.1);
}

.alt-art-remove-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(231, 76, 60, 0.9);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transition: all 0.2s;
    z-index: 2;
    font-size: 1rem;
    font-weight: bold;
}

.alt-art-option:hover .alt-art-remove-btn {
    opacity: 1;
}

.alt-art-remove-btn:hover {
    background: rgba(192, 57, 43, 1);
    transform: scale(1.1);
}

.alt-art-option img {
    width: 100%;
    display: block;
    flex-shrink: 0;
}

.alt-art-option .set-info {
    background: var(--bg-secondary);
    padding: 0.4rem;
    text-align: center;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

@media (max-width: 900px) {
    .alt-art-modal-layout {
        flex-direction: column;
        min-height: auto;
    }
    .alt-art-preview-panel {
        width: 100%;
        position: static;
    }
    .alt-art-preview-img {
        width: 250px;
    }
    .alt-art-selection-panel {
        padding-top: 0;
    }
}

.card-back-modal-content {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    position: relative;
}

.card-back-preview-large {
    width: 250px;
    height: 350px;
    object-fit: cover;
    border: 2px solid var(--border);
    border-radius: 12px;
    margin: 0 auto 1.5rem;
    display: block;
    background: var(--bg-secondary);
}

.card-back-input-group {
    margin-bottom: 1rem;
}

.card-back-input-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.card-back-url-input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: monospace;
}

.card-back-url-input:focus {
    outline: none;
    border-color: var(--accent);
}

.card-back-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.card-back-btn {
    flex: 1;
    padding: 0.75rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.2s;
}

.card-back-btn-save {
    background: #27ae60;
    color: white;
}

.card-back-btn-save:hover {
    background: #229954;
}

.card-back-btn-reset {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 2px solid var(--border);
}

.card-back-btn-reset:hover {
    background: var(--hover);
    border-color: var(--accent);
}

.card-preview {
    position: fixed;
    pointer-events: none;
    z-index: 999;
    border: 3px solid var(--accent);
    border-radius: 12px;
    overflow: hidden;
    display: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.1s ease-in;
}

.card-preview.show {
    opacity: 1;
}

.card-preview img {
    width: 375px;
    display: block;
}

.loading {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.commander-badge {
    background: linear-gradient(135deg, #f39c12, #e74c3c);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 0.5rem;
}

.token-badge {
    background: linear-gradient(135deg, #3498db, #9b59b6);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 0.5rem;
}

.new-deck-btn {
    background: #27ae60;
    color: white;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.6rem;
    font-weight: 300;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.new-deck-btn .material-icons {
    font-size: 24px;
}

.new-deck-btn:hover {
    background: #229954;
    transform: scale(1.1);
}

.deck-menu-btn {
    background: transparent;
    color: var(--text-primary);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.deck-menu-btn .material-icons {
    font-size: 24px;
}

.deck-menu-btn:hover {
    background: var(--hover);
}

.deck-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    min-width: 250px;
    display: none;
}

.deck-menu.show {
    display: block;
}

.deck-menu-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.deck-menu-item:last-child {
    border-bottom: none;
}

.deck-menu-item:hover {
    background: var(--hover);
}

.deck-menu-item.danger:hover {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
}

.deck-menu-separator {
    border-bottom: 2px solid var(--border);
    margin: 0;
}

/* Theme Picker Modal */
/* Settings Modal */
.settings-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}

.settings-overlay.active {
    display: flex;
}

.settings-modal {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    width: 600px;
    max-width: 92vw;
    height: 520px;
    max-height: 85vh;
    display: flex;
    overflow: hidden;
}

.settings-sidebar {
    width: 160px;
    flex-shrink: 0;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-tab {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.2rem;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.15s;
    border: none;
    background: none;
    text-align: left;
    width: 100%;
}

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

.settings-tab.active {
    background: var(--hover);
    color: var(--accent);
    font-weight: 600;
}

.settings-tab .material-icons {
    font-size: 20px;
}

.settings-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.settings-header h2 {
    font-size: 1.2rem;
    color: var(--text-primary);
    margin: 0;
}

.settings-close {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
}

.settings-close:hover {
    background: var(--accent);
    color: white;
}

.settings-panel {
    display: none;
    flex-direction: column;
}

.settings-panel.active {
    display: flex;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(var(--bg-primary-rgb), 0.3);
}

.settings-row:last-child {
    border-bottom: none;
}

.settings-row-label {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}

.settings-row-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

.settings-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    padding: 0;
    flex-shrink: 0;
}

.settings-toggle.active {
    background: var(--accent);
}

.settings-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.settings-toggle.active::after {
    transform: translateX(20px);
}

.settings-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 1rem 0 0.25rem;
}

.settings-section-label:first-child {
    margin-top: 0;
}

.settings-themes-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    padding: 0.5rem 0;
}

/* When commander color-identity matching is on, manual theme picks are disabled */
body.themes-locked .settings-themes-grid,
body.themes-locked .settings-section-label {
    opacity: 0.4;
    pointer-events: none;
}

.settings-btn {
    padding: 0.6rem 1.2rem;
    border: 2px solid var(--border);
    border-radius: 50px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
}

.settings-btn:hover {
    border-color: var(--accent);
    background: var(--hover);
}

.settings-btn.danger {
    border-color: #e74c3c;
    color: #e74c3c;
}

.settings-btn.danger:hover {
    background: #e74c3c;
    color: white;
}

.settings-gear-btn {
    background: transparent;
    color: var(--text-primary);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.settings-gear-btn .material-icons {
    font-size: 22px;
}

.settings-gear-btn:hover {
    background: var(--hover);
    transform: scale(1.1);
}

.theme-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 1rem 0 0.5rem;
}

.theme-section-label:first-of-type {
    margin-top: 0;
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

.theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 8px;
    transition: background 0.2s;
}

.theme-option:hover {
    background: var(--hover);
}

.theme-option .swatch {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid var(--border);
    transition: all 0.2s;
    position: relative;
}

.theme-option.active .swatch {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--text-primary);
}

.theme-option.active .swatch::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.theme-option .label {
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.1;
    max-width: 70px;
}

.card-back-preview {
    width: 40px;
    height: 56px;
    border: 1px solid var(--border);
    border-radius: 4px;
    object-fit: cover;
    margin-left: auto;
}

.deck-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
}

.loading-overlay.active {
    display: flex;
}

.loading-content {
    background: var(--bg-card);
    border: 3px solid var(--accent);
    border-radius: 16px;
    padding: 3rem;
    text-align: center;
    max-width: 400px;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 6px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1.5rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.loading-message {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.loading-progress {
    width: 100%;
    max-width: 400px;
    height: 8px;
    background: var(--bg-primary);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 1.5rem;
}

.loading-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #c5b3e6);
    width: 0%;
    transition: width 0.3s ease;
}

.loading-progress-text {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.notification-container {
    position: fixed;
    top: 90px;
    right: 20px;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.notification {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    min-width: 300px;
    max-width: 400px;
    pointer-events: auto;
    animation: slideIn 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 1rem;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.notification.success {
    border-color: #27ae60;
}

.notification.error {
    border-color: #e74c3c;
}

.notification.warning {
    border-color: #f39c12;
}

.notification.info {
    border-color: var(--accent);
}

.notification-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.notification.success .notification-icon {
    color: #27ae60;
}

.notification.error .notification-icon {
    color: #e74c3c;
}

.notification.warning .notification-icon {
    color: #f39c12;
}

.notification.info .notification-icon {
    color: var(--accent);
}

.notification-content {
    flex: 1;
}

.notification-title {
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.notification-message {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.notification-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.notification-close:hover {
    background: var(--hover);
    color: var(--text-primary);
}

/* Import Modal Styles */
.import-section {
    margin-bottom: 1.5rem;
}

.import-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 2rem 0;
    color: var(--text-secondary);
}

.import-divider::before,
.import-divider::after {
    content: '';
    flex: 1;
    border-bottom: 2px solid var(--border);
}

.import-divider span {
    padding: 0 1rem;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.json-dropzone {
    border: 3px dashed var(--border);
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: var(--bg-primary);
}

.json-dropzone:hover {
    border-color: var(--accent);
    background: var(--hover);
}

.json-dropzone.dragover {
    border-color: var(--accent);
    background: var(--hover);
    transform: scale(1.02);
}

.dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.deck-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.deck-controls-sticky {
    position: sticky;
    top: 0;
    background: transparent;
    padding: 0;
    margin: 0 0 -3rem 0;
    border-bottom: none;
    z-index: 50;
    box-shadow: none;
    flex-shrink: 0;
}

[data-theme="dark"] .deck-controls-sticky {
    background: transparent;
    box-shadow: none;
}

/* Fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(20px)) {
    .deck-controls-sticky {
        background: rgba(var(--bg-primary-rgb), 0.95);
    }
    
    [data-theme="dark"] .deck-controls-sticky {
        background: rgba(var(--bg-primary-rgb), 0.95);
    }
}

.deck-controls-sticky .search-input {
    width: calc(100% - 2rem);
    margin: 1rem 1rem -1rem 1rem;
    padding: 0.9rem 1.2rem;
    background: var(--search-input-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid var(--border);
    border-radius: 50px;
    color: var(--text-primary);
    font-size: 1.05rem;
}

.deck-controls-sticky .search-input:focus {
    outline: none;
    border-color: var(--accent);
}

.panel {
    position: relative;
}

.sort-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.sort-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.sort-select, .category-select {
    background: var(--bg-card);
    border: 2px solid var(--border);
    color: var(--text-primary);
    padding: 0.7rem 1.8rem 0.7rem 1rem;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s;
    width: auto;
    min-width: auto;
}

.sort-select:hover, .category-select:hover {
    border-color: var(--accent);
}

.sort-select:focus, .category-select:focus {
    outline: none;
    border-color: var(--accent);
}

/* ═══ Stats Button ═══ */
.stats-btn {
    background: var(--accent);
    color: white;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.6rem;
    font-weight: 300;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.stats-btn .material-icons {
    font-size: 24px;
}

.stats-btn:hover {
    opacity: 0.85;
    transform: scale(1.1);
}

.stats-btn.active {
    box-shadow: 0 0 0 3px var(--bg-primary), 0 0 0 5px var(--accent);
}

/* ═══ Stats Sidebar ═══ */
.stats-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    max-width: 90%;
    background: var(--bg-card);
    border-left: 2px solid var(--border);
    z-index: 60;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.stats-sidebar.open {
    transform: translateX(0);
}

.stats-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    border-bottom: 2px solid var(--border);
    flex-shrink: 0;
}

.stats-sidebar-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
}

.stats-sidebar-close {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s;
}

.stats-sidebar-close .material-icons {
    font-size: 18px;
}

.stats-sidebar-close:hover {
    background: var(--accent);
    color: white;
}

.stats-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.8rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stats-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Stats Sections */
.stats-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.4rem;
}

/* Land Count */
.stats-land-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.8rem;
    background: var(--bg-primary);
    border-radius: 10px;
    border: 2px solid var(--border);
}

.stats-land-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.stats-land-count {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
}

.stats-land-indicator {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-left: 0.4rem;
}

.stats-land-indicator.low {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

.stats-land-indicator.ok {
    background: rgba(39, 174, 96, 0.15);
    color: #27ae60;
}

.stats-land-indicator.high {
    background: rgba(243, 156, 18, 0.15);
    color: #f39c12;
}

/* Mana Curve — Vertical */
.stats-curve-avg {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.stats-curve-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 90px;
    padding-bottom: 20px;
    position: relative;
}

.stats-curve-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
}

.stats-curve-bar-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.stats-curve-vbar {
    width: 80%;
    max-width: 28px;
    background: var(--accent);
    border-radius: 3px 3px 0 0;
    transition: height 0.3s ease;
    min-height: 0;
    position: relative;
}

.stats-curve-vbar-count {
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stats-curve-xlabel {
    position: absolute;
    bottom: -18px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Card Types */
.stats-type-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stats-type-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0;
}

.stats-type-name {
    font-size: 0.8rem;
    color: var(--text-primary);
}

.stats-type-count {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
    min-width: 20px;
    text-align: right;
}

.stats-type-bar-bg {
    flex: 1;
    height: 5px;
    background: var(--bg-primary);
    border-radius: 3px;
    margin: 0 0.6rem;
    overflow: hidden;
}

.stats-type-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Color Distribution */
.stats-color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.stats-color-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.5rem;
    background: var(--bg-primary);
    border-radius: 6px;
}

.stats-color-pip {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(0,0,0,0.15);
}

.stats-color-pip.w { background: #f9faf4; border-color: #d4c5a0; }
.stats-color-pip.u { background: #0e68ab; border-color: #0a4f82; }
.stats-color-pip.b { background: #2b2a2a; border-color: #1a1a1a; }
.stats-color-pip.r { background: #d3202a; border-color: #a8181f; }
.stats-color-pip.g { background: #00733e; border-color: #005a30; }
.stats-color-pip.c { background: #a8a8a8; border-color: #888; }
.stats-color-pip.m { background: linear-gradient(135deg, #f9faf4, #0e68ab, #2b2a2a, #d3202a, #00733e); border-color: #c5a028; }

.stats-color-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stats-color-label {
    font-size: 0.6rem;
    color: var(--text-secondary);
    line-height: 1;
}

.stats-color-count {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

/* Deck Total Summary */
.stats-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.8rem;
    background: var(--bg-primary);
    border-radius: 10px;
    border: 2px solid var(--border);
}

.stats-total-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.stats-total-count {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Validation Issues */
.stats-issues-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.stats-issue-item {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.2);
}

.stats-issue-item.warning {
    background: rgba(243, 156, 18, 0.08);
    border-color: rgba(243, 156, 18, 0.2);
}

.stats-issue-icon {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.stats-issue-item.error .stats-issue-icon {
    color: #e74c3c;
}

.stats-issue-item.warning .stats-issue-icon {
    color: #f39c12;
}

.stats-issue-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stats-issue-message {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.stats-issue-detail {
    font-size: 0.68rem;
    color: var(--text-secondary);
    line-height: 1.2;
}

/* Universal importer additions. Existing visual styling remains intact. */
.universal-import-intro { color: var(--text-secondary); line-height: 1.45; margin: 0 0 0.8rem; }
.universal-import-input { width: 100%; min-height: 170px; resize: vertical; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; padding: 0.8rem; background: var(--bg-secondary); color: var(--text-primary); font: inherit; }
.universal-import-status { margin-top: 0.55rem; font-size: 0.85rem; color: var(--text-secondary); min-height: 1.25rem; }
.universal-import-status strong { color: var(--accent); }
.universal-import-dropzone { border: 1px dashed var(--border); border-radius: 8px; padding: 0.8rem; margin-top: 0.8rem; text-align: center; cursor: pointer; color: var(--text-secondary); }
.universal-import-dropzone.dragover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.universal-import-review { margin-top: 1rem; padding: 0.9rem; border-radius: 8px; background: var(--bg-secondary); border: 1px solid var(--border); }
.universal-import-review h3 { margin: 0 0 0.45rem; font-size: 1rem; }
.universal-import-review p { margin: 0.3rem 0; color: var(--text-secondary); }
.universal-import-problems { max-height: 120px; overflow: auto; margin: 0.5rem 0; padding-left: 1.2rem; color: #e67e22; }
.universal-import-actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 0.8rem; }