* {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

        }



        :root {

            --primary: #38bdf8;

            --primary-rgb: 56, 189, 248;

            --primary-dark: #0ea5e9;

            --accent: #f59e0b;

            --accent-rgb: 245, 158, 11;

            --bg-start: #0f172a;

            --bg-end: #1e293b;

            --card-bg: rgba(30, 41, 59, 0.95);

            --panel-bg: rgba(15, 23, 42, 0.5);

            --text: #e2e8f0;

            --text-muted: #94a3b8;

            --muted-rgb: 148, 163, 184;

            --shadow: rgba(56, 189, 248, 0.35);

            --border: rgba(56, 189, 248, 0.2);

            --inner-bg: #1e293b;

        }



        body {

            background: linear-gradient(135deg, var(--bg-start), var(--bg-end));

            color: var(--text);

            padding: 20px;

            min-height: 100vh;

            overflow-x: hidden;

        }



        [data-theme="blue"] {

            --primary: #38bdf8;

            --primary-rgb: 56, 189, 248;

            --accent: #f59e0b;

            --bg-start: #0f172a;

            --bg-end: #1e293b;

            --shadow: rgba(56, 189, 248, 0.4);

            --inner-bg: #1e293b;

            --panel-bg: rgba(15, 23, 42, 0.5);

        }



        [data-theme="yellow"] {

            --primary: #f59e0b;

            --primary-rgb: 245, 158, 11;

            --accent: #b45309;

            --bg-start: #3f2a1e;

            --bg-end: #5c4033;

            --text: #f5e8c7;

            --text-muted: #d4b48c;

            --shadow: rgba(245, 158, 11, 0.5);

            --border: rgba(245, 158, 11, 0.3);

            --inner-bg: #3f2a1e;

            --panel-bg: rgba(63, 42, 30, 0.5);

        }



        [data-theme="minimal"] {

            --primary: #64748b;

            --primary-rgb: 100, 116, 139;

            --accent: #e2e8f0;

            --bg-start: #0a0f1c;

            --bg-end: #111827;

            --shadow: rgba(100, 116, 139, 0.45);

            --border: rgba(100, 116, 139, 0.25);

            --inner-bg: #111827;

            --panel-bg: rgba(10, 15, 28, 0.5);

        }



        [data-theme="neon"] {

            --primary: #22d3ee;

            --primary-rgb: 34, 211, 238;

            --accent: #f472b6;

            --bg-start: #1a0033;

            --bg-end: #2a0066;

            --shadow: rgba(34, 211, 238, 0.6);

            --inner-bg: #1a0033;

            --panel-bg: rgba(26, 0, 51, 0.5);

        }



        [data-theme="darkred"] {

            --primary: #f87171;

            --primary-rgb: 248, 113, 113;

            --accent: #fb923c;

            --bg-start: #220000;

            --bg-end: #3f1e1e;

            --shadow: rgba(248, 113, 113, 0.5);

            --inner-bg: #3f1e1e;

            --panel-bg: rgba(34, 0, 0, 0.5);

        }



        .container {

            max-width: 1280px;

            width: 100%;

            margin: 0 auto;

        }



        header {

            text-align: center;

            margin-bottom: 20px;

            position: relative;

        }



        .header-meta {

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 14px;

            flex-wrap: wrap;

            margin-top: 8px;

        }



        h1 {

            font-size: 3.5rem;

            margin-bottom: 8px;

            background: linear-gradient(90deg, var(--primary), var(--primary-dark));

            -webkit-background-clip: text;

            background-clip: text;

            color: transparent;

            text-shadow: 0 0 20px var(--shadow);

        }



        .subtitle {

            font-size: 1.2rem;

            color: var(--text-muted);

            line-height: 1.6;

        }



        .tab-nav {

            display: flex;

            justify-content: center;

            gap: 20px;

            margin-bottom: 30px;

            border-bottom: 2px solid rgba(var(--primary-rgb), 0.15);

            flex-wrap: wrap;

        }



        .tab-btn {

            padding: 14px 32px;

            font-size: 1.15rem;

            font-weight: 600;

            background: transparent;

            color: var(--text);

            border: none;

            border-radius: 12px 12px 0 0;

            cursor: pointer;

            transition: all 0.3s ease;

            display: flex;

            align-items: center;

            gap: 10px;

        }



        .tab-btn:hover {

            background: rgba(var(--primary-rgb), 0.15);

            color: var(--primary);

        }



        .tab-btn.active {

            background: rgba(var(--primary-rgb), 0.25);

            color: var(--primary);

            box-shadow: 0 4px 15px var(--shadow);

        }



        .tab-btn i {

            font-size: 1.3rem;

        }



        .tab-content {

            display: none;

            animation: fadeIn 0.4s ease forwards;

        }



        .tab-content.active {

            display: block;

        }



        @keyframes fadeIn {

            from {

                opacity: 0;

                transform: translateY(10px);

            }



            to {

                opacity: 1;

                transform: translateY(0);

            }

        }



        .timer-page {

            display: flex;

            flex-wrap: wrap;

            gap: 32px;

            max-width: 1280px;

            margin: 0 auto;

            justify-content: center;

            align-items: flex-start;

        }



        @media (max-width: 900px) {

            .timer-page {

                flex-direction: column;

                align-items: center;

                gap: 20px;

            }



            .timer-center {

                order: 1;

                width: 100%;

            }



            .timer-container {

                max-width: 320px;

                margin: 0 auto;

            }



            .current-seconds {

                font-size: 3.5rem;

            }

        }