/* ===== متغیرها و ریست ===== */
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --accent-color: #e74c3c;
            --light-color: #ecf0f1;
            --dark-color: #2c3e50;
            --success-color: #2ecc71;
            --warning-color: #f39c12;
            --shadow: 0 4px 6px rgba(0,0,0,0.1);
            --card-radius: 20px;
            --transition: all 0.3s ease;
        }
        * { margin:0; padding:0; box-sizing:border-box; font-family: 'Vazirmatn','Segoe UI',Tahoma,sans-serif; }
        body {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            color: #333;
            min-height: 100vh;
            padding: 20px;
            line-height: 1.6;
            transition: background 0.3s;
        }
        .container { max-width: 1400px; margin:0 auto; padding:20px; }
        header {
            text-align:center;
            margin-bottom:40px;
            color:white;
            padding:30px;
            border-radius:var(--card-radius);
            background:rgba(255,255,255,0.1);
            backdrop-filter:blur(10px);
            box-shadow:var(--shadow);
        }
        h1 { font-size:2.8rem; margin-bottom:15px; text-shadow:2px 2px 4px rgba(0,0,0,0.3); }
        .subtitle { font-size:1.3rem; opacity:0.9; max-width:800px; margin:0 auto; }
        .main-content { display:flex; flex-wrap:wrap; gap:30px; margin-bottom:40px; }
        .local-time-container { flex:1; min-width:300px; }
        .local-time-card {
            background:white;
            border-radius:var(--card-radius);
            padding:30px;
            box-shadow:var(--shadow);
            height:100%;
            text-align:center;
            display:flex;
            flex-direction:column;
            justify-content:center;
            transition:var(--transition);
        }
        .local-time-card:hover { transform:translateY(-5px); }
        .local-time-title { font-size:1.8rem; color:var(--primary-color); margin-bottom:20px; display:flex; align-items:center; justify-content:center; gap:10px; }
        .local-time-display { font-size:3.5rem; font-weight:bold; color:var(--secondary-color); margin:20px 0; direction:ltr; }
        .local-date-display { font-size:1.5rem; color:var(--dark-color); margin-bottom:10px; }
        .world-clocks-container { flex:2; min-width:300px; }
        .world-clocks-grid {
            display:grid;
            grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
            gap:25px;
        }
        .clock-card {
            background:white;
            border-radius:var(--card-radius);
            padding:25px;
            box-shadow:var(--shadow);
            transition:var(--transition);
            display:flex;
            flex-direction:column;
            border-left:5px solid var(--secondary-color);
            position:relative;
        }
        .clock-card:hover { transform:translateY(-8px); box-shadow:0 10px 20px rgba(0,0,0,0.15); }
        .clock-card.dst-active { border-left-color: var(--warning-color); }
        .clock-card .dst-badge {
            position:absolute;
            top:10px;
            right:10px;
            background:var(--warning-color);
            color:white;
            padding:3px 10px;
            border-radius:20px;
            font-size:0.7rem;
            font-weight:bold;
            display:none;
        }
        .clock-card.dst-active .dst-badge { display:block; }
        .country-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; padding-bottom:15px; border-bottom:1px solid #eee; }
        .country-name { font-size:1.6rem; color:var(--primary-color); display:flex; align-items:center; gap:10px; }
        /* استایل پرچم */
        .country-flag {
            display: inline-block;
            width: 2.2rem;
            height: 1.6rem;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }
        .country-code { font-size:0.8rem; color:#888; background:#f0f0f0; padding:2px 10px; border-radius:20px; }
        .time-display { font-size:2.5rem; font-weight:bold; color:var(--accent-color); margin:15px 0; direction:ltr; text-align:center; }
        .date-display { font-size:1.2rem; color:#666; text-align:center; margin-bottom:15px; }
        .timezone-info { display:flex; justify-content:space-between; margin-top:auto; padding-top:15px; border-top:1px solid #eee; font-size:0.9rem; color:#777; }
        .controls {
            background:rgba(255,255,255,0.1);
            backdrop-filter:blur(10px);
            border-radius:var(--card-radius);
            padding:25px;
            margin-bottom:30px;
            box-shadow:var(--shadow);
            display:flex;
            flex-wrap:wrap;
            gap:15px;
            justify-content:center;
            align-items:center;
        }
        .controls .btn-group { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
        .btn {
            background:white;
            border:none;
            padding:12px 25px;
            border-radius:50px;
            font-size:1rem;
            cursor:pointer;
            transition:var(--transition);
            box-shadow:0 4px 8px rgba(0,0,0,0.1);
            color:var(--primary-color);
            font-weight:bold;
            display:inline-flex;
            align-items:center;
            gap:10px;
            white-space:nowrap;
        }
        .btn:hover { background:var(--secondary-color); color:white; transform:translateY(-3px); }
        .btn-primary { background:var(--secondary-color); color:white; }
        .btn-primary:hover { background:#2980b9; }
        .btn-danger { background:var(--accent-color); color:white; }
        .btn-danger:hover { background:#c0392b; }
        .btn-success { background:var(--success-color); color:white; }
        .btn-success:hover { background:#27ae60; }
        .btn-warning { background:var(--warning-color); color:white; }
        .btn-warning:hover { background:#e67e22; }
        select {
            padding:12px 25px;
            border-radius:50px;
            border:none;
            background:white;
            font-size:1rem;
            color:var(--primary-color);
            font-weight:bold;
            box-shadow:0 4px 8px rgba(0,0,0,0.1);
            cursor:pointer;
            outline:none;
            min-width:200px;
        }
        select:hover { background:#f0f0f0; }
        footer {
            text-align:center;
            color:white;
            padding:25px;
            border-radius:var(--card-radius);
            background:rgba(255,255,255,0.1);
            backdrop-filter:blur(10px);
            margin-top:40px;
        }
        .footer-text { margin-bottom:10px; font-size:1.1rem; }
        .update-time { font-size:0.9rem; opacity:0.8; }
        /* حالت تیره */
        .dark-mode {
            background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
            color: #ddd;
        }
        .dark-mode .clock-card,
        .dark-mode .local-time-card {
            background: #2c3e50;
            color: #ddd;
        }
        .dark-mode .country-name,
        .dark-mode .local-time-title { color: #ddd; }
        .dark-mode .time-display { color: #3498db; }
        .dark-mode .date-display,
        .dark-mode .timezone-info { color: #aaa; }
        .dark-mode .country-code { background: #1a2632; color: #ccc; }
        /* ریسپانسیو */
        @media (max-width: 768px) {
            .main-content { flex-direction:column; }
            .world-clocks-grid { grid-template-columns:1fr; }
            h1 { font-size:2.2rem; }
            .local-time-display { font-size:2.5rem; }
            .time-display { font-size:2rem; }
            .controls { flex-direction:column; align-items:stretch; }
            .controls .btn-group { justify-content:center; }
            .btn, select { width:100%; justify-content:center; }
        }
        @keyframes pulse { 0%{opacity:1;} 50%{opacity:0.7;} 100%{opacity:1;} }
        .updating { animation:pulse 0.5s ease-in-out; }
        /* پنل انتخاب کشور */
        .country-selector {
            background:rgba(255,255,255,0.1);
            backdrop-filter:blur(10px);
            border-radius:var(--card-radius);
            padding:20px;
            margin-top:20px;
            display:none;
        }
        .country-selector.show { display:block; }
        .country-checkboxes {
            display:grid;
            grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
            gap:10px;
            margin-top:15px;
        }
        .checkbox-item {
            display:flex;
            align-items:center;
            gap:10px;
            padding:8px 12px;
            background:rgba(255,255,255,0.9);
            border-radius:10px;
            transition:var(--transition);
        }
        .dark-mode .checkbox-item { background:rgba(44,62,80,0.9); }
        .checkbox-item:hover { background:#e0e7ff; }
        .dark-mode .checkbox-item:hover { background:#3a506b; }
        /* در چک‌باکس‌ها هم پرچم کوچک */
        .checkbox-item .fi {
            width: 1.8rem;
            height: 1.2rem;
            border-radius: 3px;
        }
        /* پیام موقت */
        .toast {
            position:fixed;
            bottom:20px;
            right:20px;
            background:var(--success-color);
            color:white;
            padding:15px 25px;
            border-radius:10px;
            z-index:1000;
            box-shadow:0 5px 15px rgba(0,0,0,0.2);
            animation:fadeIn 0.3s, fadeOut 0.3s 2.7s;
        }
        @keyframes fadeIn { from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }
        @keyframes fadeOut { from{opacity:1; transform:translateY(0);} to{opacity:0; transform:translateY(20px);} }