/* ==========================================================================
   E5TSAR PLATFORM — Blue Design System v4.0
   اللون الأساسي: أزرق احترافي متناسق (Dark + Light + Mobile)
   ========================================================================== */

/* ──────────── متغيرات النظام (الوضع الداكن — الافتراضي) ──────────── */
:root {
    /* الخلفيات */
    --bg-color:      #070d1a;
    --bg-subtle:     #0d1526;
    --card-bg:       rgba(13, 21, 38, 0.9);
    --card-border:   rgba(59, 130, 246, 0.18);
    --border-color:  rgba(59, 130, 246, 0.18); /* alias */

    /* النصوص */
    --text-color:    #e2eeff;
    --text-muted:    #7ea4c8;
    --text-dim:      #4a6fa0;

    /* الألوان الأساسية — أزرق */
    --primary:       #3b82f6;
    --primary-dark:  #2563eb;
    --primary-light: #60a5fa;
    --primary-glow:  rgba(59, 130, 246, 0.30);
    --primary-subtle:rgba(59, 130, 246, 0.10);

    /* ثانوي — سماوي */
    --secondary:     #0ea5e9;
    --secondary-dark:#0284c7;

    /* دلالية */
    --success:       #22c55e;
    --success-dark:  #16a34a;
    --danger:        #ef4444;
    --danger-dark:   #dc2626;
    --warning:       #f59e0b;
    --warning-dark:  #d97706;
    --info:          #38bdf8;

    /* حدود زوايا */
    --radius-xl:  24px;
    --radius-lg:  18px;
    --radius:     12px;
    --radius-sm:   8px;
    --radius-xs:   5px;

    /* ظلال */
    --shadow:      0 8px 32px rgba(0,0,0,0.55);
    --shadow-sm:   0 3px 10px  rgba(0,0,0,0.35);
    --shadow-glow: 0 0 28px var(--primary-glow);
    --shadow-card: 0 4px 20px rgba(0,8,30,0.5);

    /* Gradient */
    --grad-primary: linear-gradient(135deg, #2563eb, #0ea5e9);
    --grad-dark:    linear-gradient(135deg, #1e3a5f, #0d2040);
}

/* ──────────── الوضع الفاتح ──────────── */
html.light-mode,
html.light-mode body,
body.light-mode {
    --bg-color:      #f0f4fb;
    --bg-subtle:     #e8eef8;
    --card-bg:       #ffffff;
    --card-border:   #c7d9f5;
    --border-color:  #c7d9f5;
    --text-color:    #0a1628;
    --text-muted:    #4a6fa0;
    --text-dim:      #7ea4c8;
    --primary-subtle:rgba(37, 99, 235, 0.08);
    --shadow:        0 4px 20px rgba(0,0,0,0.08);
    --shadow-sm:     0 2px 8px  rgba(0,0,0,0.05);
    --shadow-card:   0 2px 16px rgba(59,130,246,0.10);
}

html.light-mode body,
body.light-mode {
    background-color: #f0f4fb;
    background-image:
        radial-gradient(at 5% 10%,  rgba(37,99,235,0.08) 0px, transparent 55%),
        radial-gradient(at 95% 90%, rgba(14,165,233,0.07) 0px, transparent 55%);
}

html.light-mode .site-header,
body.light-mode .site-header {
    background: rgba(240,244,251,0.92) !important;
    border-bottom-color: #c7d9f5 !important;
}

html.light-mode .card,
body.light-mode .card,
html.light-mode .shortener-card,
body.light-mode .shortener-card,
html.light-mode .feature-card,
body.light-mode .feature-card,
html.light-mode .stat-card,
body.light-mode .stat-card,
html.light-mode .analytics-card,
body.light-mode .analytics-card,
html.light-mode .recent-item,
body.light-mode .recent-item,
html.light-mode .destination-info,
body.light-mode .destination-info {
    background:    #ffffff;
    border-color:  #c7d9f5;
    box-shadow:    0 2px 16px rgba(59,130,246,0.08);
}

html.light-mode .input-group input,
body.light-mode .input-group input,
html.light-mode .form-group input,
body.light-mode .form-group input,
html.light-mode .option-field input,
body.light-mode .option-field input,
html.light-mode .option-field select,
body.light-mode .option-field select,
html.light-mode .form-group select,
body.light-mode .form-group select,
html.light-mode .form-group textarea,
body.light-mode .form-group textarea {
    background:   #f5f8ff;
    color:        #0a1628;
    border-color: #a8c0e8;
}

html.light-mode .btn-outline,
body.light-mode .btn-outline {
    color:        #2563eb;
    border-color: #93bbf5;
    background:   transparent;
}

html.light-mode .btn-outline:hover,
body.light-mode .btn-outline:hover {
    background:    rgba(37,99,235,0.08);
    border-color:  var(--primary);
}

html.light-mode .nav-links a,
body.light-mode .nav-links a { color: #2d5296; }

html.light-mode .demo-ad,
body.light-mode .demo-ad {
    background:   #f0f6ff;
    border-color: #bdd5f7;
    color:        #4a6fa0;
}

html.light-mode .advanced-options-box,
body.light-mode .advanced-options-box {
    background:   #f5f8ff;
    border-color: #c7d9f5;
}

html.light-mode .result-url-wrapper input,
body.light-mode .result-url-wrapper input {
    background:   #f0f6ff;
    border-color: #bdd5f7;
    color:        var(--primary-dark);
}

html.light-mode .user-table th,
body.light-mode .user-table th {
    background: #f0f6ff;
    color:      #2d5296;
}

html.light-mode .progress-bar-bg,
body.light-mode .progress-bar-bg {
    background: #dbeafe;
}

/* ──────────── Reset ──────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Cairo', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-color);
    background-image:
        radial-gradient(at 5%  5%,  rgba(37,99,235,0.18) 0px, transparent 55%),
        radial-gradient(at 95% 95%, rgba(14,165,233,0.14) 0px, transparent 55%),
        radial-gradient(at 50% 0%,  rgba(59,130,246,0.08) 0px, transparent 40%);
    background-attachment: fixed;
    color:       var(--text-color);
    line-height: 1.65;
    min-height:  100vh;
    direction:   rtl;
    transition: background-color 0.3s, color 0.3s;
}

a { text-decoration: none; color: inherit; }

img { max-width: 100%; display: block; }

/* ──────────── Layout ──────────── */
.container {
    width:     100%;
    max-width: 1140px;
    margin:    0 auto;
    padding:   0 22px;
}

/* ──────────── Header ──────────── */
.site-header {
    background:        rgba(7, 13, 26, 0.88);
    backdrop-filter:   blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom:     1px solid var(--card-border);
    position:  sticky;
    top:       0;
    z-index:   200;
    padding:   13px 0;
}

.site-header .container {
    display:     flex;
    align-items: center;
    justify-content: space-between;
    gap:         10px;
}

.logo {
    display:     flex;
    align-items: center;
    gap:         9px;
    font-weight: 800;
    font-size:   1.35rem;
    color:       var(--text-color);
    flex-shrink: 0;
    text-decoration: none;
}

.logo-icon {
    font-size:        1.5rem;
    filter: drop-shadow(0 0 8px rgba(59,130,246,0.6));
}

.nav-links {
    display:     flex;
    align-items: center;
    gap:         18px;
    flex-wrap:   wrap;
}

.nav-links a {
    color:           var(--text-muted);
    font-weight:     600;
    font-size:       0.9rem;
    transition:      color 0.2s;
    text-decoration: none;
}

.nav-links a:hover { color: var(--primary-light); }

/* ──────────── Hero ──────────── */
.hero-section { padding: 72px 0 50px; text-align: center; }

.hero-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           7px;
    background:    rgba(59,130,246,0.12);
    border:        1px solid rgba(59,130,246,0.35);
    color:         var(--primary-light);
    padding:       6px 18px;
    border-radius: 30px;
    font-size:     0.84rem;
    font-weight:   700;
    margin-bottom: 22px;
    letter-spacing: 0.02em;
}

.hero-title {
    font-size:    2.9rem;
    font-weight:  900;
    line-height:  1.22;
    margin-bottom: 18px;
    color:        var(--text-color);
}

.hero-title span {
    background:            var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:       text;
}

.hero-subtitle {
    color:      var(--text-muted);
    font-size:  1.05rem;
    max-width:  640px;
    margin:     0 auto 42px;
    line-height: 1.75;
}

/* ──────────── Stats Counter ──────────── */
.stats-counter {
    display:        flex;
    align-items:    center;
    justify-content:center;
    gap:            36px;
    margin:         0 auto 48px;
    padding:        18px 32px;
    background:     rgba(37,99,235,0.08);
    border:         1px solid rgba(59,130,246,0.22);
    border-radius:  var(--radius-lg);
    max-width:      560px;
    flex-wrap:      wrap;
}

.counter-item { text-align: center; }

.counter-num {
    font-size:   2rem;
    font-weight: 800;
    color:       var(--primary-light);
    display:     block;
    line-height: 1.1;
}

.counter-label {
    font-size:   0.78rem;
    color:       var(--text-muted);
    font-weight: 600;
    margin-top:  3px;
    display:     block;
}

.counter-divider {
    width:      1px;
    height:     38px;
    background: rgba(59,130,246,0.25);
    flex-shrink: 0;
}

/* ──────────── Cards ──────────── */
.card {
    background:      var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border:          1px solid var(--card-border);
    border-radius:   var(--radius-lg);
    box-shadow:      var(--shadow-card);
}

.shortener-card {
    max-width: 740px;
    margin:    0 auto;
    padding:   32px 30px;
}

/* ──────────── Input Group ──────────── */
.input-group {
    position:    relative;
    display:     flex;
    align-items: center;
}

.input-icon {
    position:       absolute;
    right:          16px;
    font-size:      1.2rem;
    pointer-events: none;
    z-index:        1;
}

.input-group input {
    width:        100%;
    padding:      17px 52px 17px 17px;
    border-radius: var(--radius);
    border:        1.5px solid var(--card-border);
    background:    rgba(13,21,38,0.7);
    color:         var(--text-color);
    font-size:     1rem;
    font-family:   inherit;
    outline:       none;
    transition:    border-color 0.2s, box-shadow 0.2s;
}

.input-group input::placeholder { color: var(--text-dim); }

.input-group input:focus {
    border-color: var(--primary);
    box-shadow:   0 0 0 4px var(--primary-glow);
}

/* ──────────── Advanced Options ──────────── */
.advanced-options-toggle {
    background:    none;
    border:        none;
    color:         var(--primary-light);
    font-weight:   700;
    font-size:     0.88rem;
    cursor:        pointer;
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    margin-top:    13px;
    padding:       5px 0;
    font-family:   inherit;
    transition:    opacity 0.2s;
}

.advanced-options-toggle:hover { opacity: 0.75; }

.advanced-options-box {
    margin-top:    15px;
    padding:       20px;
    background:    rgba(7,13,30,0.75);
    border-radius: var(--radius);
    border:        1px solid rgba(59,130,246,0.2);
    display:       grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap:           14px;
    animation:     fadeIn 0.25s ease;
}

.option-field label {
    display:     block;
    font-size:   0.8rem;
    font-weight: 700;
    margin-bottom: 6px;
    color:       var(--text-muted);
}

.option-field input,
.option-field select {
    width:         100%;
    padding:       10px 12px;
    border:        1px solid rgba(59,130,246,0.2);
    border-radius: var(--radius-xs);
    font-family:   inherit;
    font-size:     0.88rem;
    background:    rgba(13,21,38,0.7);
    color:         var(--text-color);
    outline:       none;
    transition:    border-color 0.2s;
}

.option-field input:focus,
.option-field select:focus { border-color: var(--primary); }

.option-field select option {
    background: #0d1526;
    color:      var(--text-color);
}

.option-gate-box {
    grid-column:   1 / -1;
    padding:       13px 16px;
    border-radius: 10px;
    border:        1px dashed;
}

.option-gate-box.lead {
    background:   rgba(34,197,94,0.07);
    border-color: rgba(34,197,94,0.4);
}

.option-gate-box.danger {
    background:   rgba(239,68,68,0.07);
    border-color: rgba(239,68,68,0.38);
}

.option-gate-label {
    cursor:      pointer;
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    font-size:   0.88rem;
    font-weight: 700;
    color:       var(--text-color);
}

.option-gate-label input[type="checkbox"] {
    width:       18px;
    height:      18px;
    margin-top:  2px;
    cursor:      pointer;
    flex-shrink: 0;
    accent-color: var(--primary);
}

/* ──────────── Buttons ──────────── */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             7px;
    padding:         12px 24px;
    border-radius:   var(--radius);
    font-weight:     700;
    font-size:       0.95rem;
    cursor:          pointer;
    text-decoration: none;
    border:          none;
    transition:      all 0.22s ease;
    font-family:     inherit;
    white-space:     nowrap;
    letter-spacing:  0.01em;
}

/* Primary Blue */
.btn-primary {
    background: var(--grad-primary);
    color:      white;
    box-shadow: 0 4px 16px rgba(37,99,235,0.40);
}

.btn-primary:hover {
    transform:  translateY(-2px);
    box-shadow: 0 6px 24px rgba(37,99,235,0.55);
    filter:     brightness(1.08);
}

.btn-primary:active { transform: translateY(0); }

/* Secondary */
.btn-secondary {
    background: rgba(59,130,246,0.12);
    color:      var(--primary-light);
    border:     1px solid rgba(59,130,246,0.25);
}

.btn-secondary:hover {
    background: rgba(59,130,246,0.20);
    border-color: var(--primary);
}

/* Outline */
.btn-outline {
    background:   transparent;
    border:       1px solid var(--card-border);
    color:        var(--text-color);
}

.btn-outline:hover {
    background:    rgba(59,130,246,0.08);
    border-color:  var(--primary);
    color:         var(--primary-light);
}

/* Success */
.btn-success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color:      white;
    box-shadow: 0 4px 14px rgba(34,197,94,0.30);
}

.btn-success:hover {
    transform:  translateY(-2px);
    box-shadow: 0 6px 20px rgba(34,197,94,0.45);
}

/* Danger */
.btn-danger {
    background:  transparent;
    border:      1px solid rgba(239,68,68,0.40);
    color:       #ef4444;
}

.btn-danger:hover { background: rgba(239,68,68,0.10); }

/* Sizes */
.btn-sm  { padding: 8px 16px;  font-size: 0.84rem; border-radius: var(--radius-sm); }
.btn-lg  { padding: 16px 34px; font-size: 1.05rem; }

/* Disabled */
.btn.disabled,
.btn[disabled] {
    opacity:        0.42 !important;
    cursor:         not-allowed !important;
    pointer-events: none !important;
    filter:         grayscale(0.5) !important;
}

/* ──────────── Result Box ──────────── */
.result-box {
    margin-top:  26px;
    padding-top: 22px;
    border-top:  1px dashed rgba(59,130,246,0.25);
    animation:   fadeIn 0.35s ease;
}

.success-badge {
    color:       var(--success);
    font-weight: 700;
    font-size:   0.95rem;
}

.result-url-wrapper {
    display:       flex;
    gap:           10px;
    margin:        14px 0;
}

.result-url-wrapper input {
    flex:          1;
    padding:       12px 16px;
    border-radius: var(--radius-sm);
    border:        1px solid rgba(59,130,246,0.25);
    background:    rgba(13,21,38,0.7);
    color:         var(--primary-light);
    font-weight:   700;
    font-size:     1rem;
    direction:     ltr;
    text-align:    left;
    outline:       none;
    font-family:   monospace;
}

.result-actions {
    display:         flex;
    gap:             8px;
    justify-content: center;
    flex-wrap:       wrap;
    margin-top:      12px;
}

/* ──────────── QR Box ──────────── */
.qr-box {
    margin:        16px auto;
    padding:       18px;
    background:    white;
    border-radius: var(--radius);
    display:       inline-block;
    text-align:    center;
    box-shadow:    0 4px 16px rgba(37,99,235,0.15);
}

.qr-box small {
    display:    block;
    margin-top: 10px;
    font-weight: 600;
    color:      #334155;
    font-size:  0.82rem;
}

/* ──────────── Recent Links ──────────── */
.recent-section { padding: 36px 0 55px; }

.recent-card { padding: 20px; }

.recent-list {
    display:        flex;
    flex-direction: column;
    gap:            9px;
}

.recent-item {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    padding:         12px 16px;
    background:      rgba(37,99,235,0.05);
    border:          1px solid rgba(59,130,246,0.15);
    border-radius:   var(--radius-sm);
    transition:      border-color 0.2s, background 0.2s;
}

.recent-item:hover {
    border-color: var(--primary);
    background:   rgba(37,99,235,0.09);
}

.recent-item-url {
    color:           var(--primary-light);
    font-weight:     700;
    font-size:       0.92rem;
    font-family:     monospace;
    text-decoration: none;
}

.recent-item-url:hover { text-decoration: underline; }

.recent-item-orig {
    color:          var(--text-muted);
    font-size:      0.78rem;
    max-width:      340px;
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
    direction:      ltr;
    text-align:     left;
    margin-top:     3px;
}

/* ──────────── Features Section ──────────── */
.features-section { padding: 60px 0; }

.section-title {
    text-align:    center;
    font-size:     1.95rem;
    font-weight:   800;
    margin-bottom: 10px;
    color:         var(--text-color);
}

.section-subtitle {
    text-align:    center;
    color:         var(--text-muted);
    margin-bottom: 40px;
    font-size:     0.97rem;
}

.features-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap:                   20px;
}

.feature-card {
    background:    var(--card-bg);
    border:        1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding:       28px 24px;
    text-align:    center;
    transition:    transform 0.28s ease, border-color 0.28s, box-shadow 0.28s;
    position:      relative;
    overflow:      hidden;
}

.feature-card::before {
    content:       '';
    position:      absolute;
    inset:         0;
    background:    radial-gradient(circle at 50% 0%, rgba(59,130,246,0.07) 0%, transparent 65%);
    pointer-events:none;
}

.feature-card:hover {
    transform:    translateY(-7px);
    border-color: var(--primary);
    box-shadow:   0 12px 35px rgba(37,99,235,0.22);
}

.feature-icon {
    font-size:     2.6rem;
    margin-bottom: 14px;
    display:       block;
}

.feature-card h3 {
    font-size:     1.05rem;
    margin-bottom: 10px;
    font-weight:   800;
    color:         var(--text-color);
}

.feature-card p {
    color:       var(--text-muted);
    font-size:   0.88rem;
    line-height: 1.65;
}

/* ──────────── How Section ──────────── */
.how-section {
    padding:    50px 0 60px;
    background: rgba(37,99,235,0.04);
    border-top: 1px solid rgba(59,130,246,0.12);
    border-bottom: 1px solid rgba(59,130,246,0.12);
}

.steps-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:                   20px;
    margin-top:            36px;
}

.step-card { text-align: center; padding: 26px 20px; }

.step-num {
    width:        44px;
    height:       44px;
    border-radius:50%;
    background:   var(--grad-primary);
    color:        white;
    font-weight:  800;
    font-size:    1.1rem;
    display:      flex;
    align-items:  center;
    justify-content: center;
    margin:       0 auto 16px;
    box-shadow:   0 4px 14px rgba(37,99,235,0.4);
}

.step-card h4 { font-weight: 800; margin-bottom: 8px; font-size: 1rem; }
.step-card p  { color: var(--text-muted); font-size: 0.87rem; }

/* ──────────── Ad Banners ──────────── */
.ad-container { margin: 20px 0; text-align: center; overflow: hidden; }

.ad-label {
    font-size:      0.7rem;
    color:          var(--text-dim);
    margin-bottom:  4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.demo-ad {
    background:    rgba(37,99,235,0.05);
    border:        1px dashed rgba(59,130,246,0.2);
    border-radius: var(--radius-sm);
    padding:       14px;
    color:         var(--text-dim);
    font-size:     0.85rem;
}

.demo-ad-box { padding: 28px 15px; }

/* ──────────── Redirect Page ──────────── */
.redirect-page { padding: 38px 0 60px; max-width: 660px; }

.error-card { padding: 50px 25px; text-align: center; margin: 30px auto; }

.redirect-card { padding: 30px 26px; text-align: center; }

.destination-info {
    display:       flex;
    align-items:   center;
    gap:           15px;
    background:    rgba(37,99,235,0.07);
    border:        1px solid rgba(59,130,246,0.22);
    border-radius: var(--radius);
    padding:       16px 20px;
    margin-bottom: 25px;
    text-align:    right;
}

.dest-icon   { font-size: 2rem; flex-shrink: 0; }
.dest-label  { font-size: 0.8rem; color: var(--text-muted); display: block; }
.dest-domain { font-size: 1.15rem; font-weight: 800; color: var(--primary-light); margin-top: 3px; }

/* Timer */
.timer-box { margin: 22px 0; }

.timer-circle {
    width:           84px;
    height:          84px;
    border-radius:   50%;
    background:      var(--grad-primary);
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 auto 14px;
    font-size:       2rem;
    font-weight:     800;
    color:           white;
    box-shadow:      0 0 30px rgba(37,99,235,0.45);
    transition:      all 0.35s;
}

.timer-text { color: var(--text-muted); font-size: 0.93rem; }

.timer-box.completed .timer-circle {
    background: linear-gradient(135deg,#22c55e,#16a34a);
    box-shadow: 0 0 28px rgba(34,197,94,0.42);
}

.ready-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    background:    rgba(34,197,94,0.12);
    color:         var(--success);
    border:        1px solid rgba(34,197,94,0.35);
    padding:       10px 24px;
    border-radius: 30px;
    font-weight:   800;
    font-size:     1rem;
    animation:     fadeIn 0.4s ease;
}

.action-box { margin: 20px 0; }
.action-box .btn-success { width: 100%; max-width: 360px; font-size: 1.08rem; padding: 16px 30px; }

.security-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    font-size:     0.82rem;
    color:         var(--success);
    background:    rgba(34,197,94,0.08);
    padding:       6px 12px;
    border-radius: 20px;
    border:        1px solid rgba(34,197,94,0.22);
}

.adblock-banner {
    background:    rgba(239,68,68,0.10);
    border:        1px solid rgba(239,68,68,0.38);
    color:         #fca5a5;
    padding:       15px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    text-align:    center;
    font-weight:   700;
}

/* ──────────── Auth Pages ──────────── */
.auth-container { padding: 50px 0 60px; }

.auth-box {
    max-width: 440px;
    margin:    0 auto;
    padding:   35px 30px;
}

.form-group { margin-bottom: 18px; }

.form-group label {
    display:       block;
    font-weight:   700;
    font-size:     0.85rem;
    margin-bottom: 7px;
    color:         var(--text-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
    width:         100%;
    padding:       12px 14px;
    border:        1.5px solid rgba(59,130,246,0.25);
    border-radius: var(--radius-sm);
    font-size:     0.93rem;
    font-family:   inherit;
    background:    rgba(13,21,38,0.65);
    color:         var(--text-color);
    outline:       none;
    transition:    border-color 0.2s, box-shadow 0.2s;
}

.form-group input::placeholder { color: var(--text-dim); }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary);
    box-shadow:   0 0 0 3px var(--primary-glow);
}

/* ──────────── Alert Messages ──────────── */
.alert {
    padding:       12px 16px;
    border-radius: var(--radius-sm);
    font-weight:   700;
    font-size:     0.88rem;
    margin-bottom: 18px;
    display:       flex;
    align-items:   flex-start;
    gap:           8px;
    line-height:   1.5;
}

.alert-error   { background:rgba(239,68,68,0.10);  color:#f87171; border:1px solid rgba(239,68,68,0.30); }
.alert-success { background:rgba(34,197,94,0.10);  color:#4ade80; border:1px solid rgba(34,197,94,0.30); }
.alert-info    { background:rgba(59,130,246,0.10); color:var(--primary-light); border:1px solid rgba(59,130,246,0.28); }
.alert-warning { background:rgba(245,158,11,0.10); color:#fbbf24; border:1px solid rgba(245,158,11,0.30); }

/* ──────────── Dashboard Tables ──────────── */
.stats-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
    gap:                   17px;
    margin-bottom:         26px;
}

.stat-card {
    background:    var(--card-bg);
    padding:       22px 18px;
    border-radius: var(--radius);
    border:        1px solid var(--card-border);
    text-align:    center;
    box-shadow:    var(--shadow-sm);
    transition:    transform 0.2s, border-color 0.2s;
}

.stat-card:hover { transform: translateY(-4px); border-color: var(--primary); }

.stat-number {
    font-size:   2.2rem;
    font-weight: 800;
    color:       var(--primary-light);
    display:     block;
    margin:      6px 0;
    line-height: 1;
}

/* Table */
.table-responsive {
    overflow-x:    auto;
    border-radius: var(--radius-sm);
    margin-top:    14px;
}

.user-table {
    width:            100%;
    border-collapse:  collapse;
    text-align:       right;
    background:       var(--card-bg);
    border-radius:    var(--radius);
    overflow:         hidden;
    border:           1px solid var(--card-border);
    min-width:        680px;
}

.user-table th,
.user-table td {
    padding:       12px 15px;
    border-bottom: 1px solid var(--card-border);
    font-size:     0.88rem;
}

.user-table th {
    background:     rgba(37,99,235,0.08);
    font-weight:    800;
    font-size:      0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          var(--text-muted);
}

.user-table tr:last-child td { border-bottom: none; }
.user-table tr:hover td { background: rgba(37,99,235,0.04); }

/* Badges */
.badge-code {
    background:      rgba(59,130,246,0.14);
    color:           var(--primary-light);
    padding:         4px 10px;
    border-radius:   6px;
    font-weight:     700;
    font-family:     monospace;
    font-size:       0.87rem;
    text-decoration: none;
    display:         inline-block;
    transition:      background 0.2s;
}

.badge-code:hover { background: rgba(59,130,246,0.25); }

.badge-lead { background:rgba(34,197,94,0.13);  color:#4ade80; padding:2px 8px; border-radius:10px; font-size:0.73rem; font-weight:700; }
.badge-pay  { background:rgba(245,158,11,0.13); color:#fbbf24; padding:2px 8px; border-radius:10px; font-size:0.73rem; font-weight:700; }
.badge-otp  { background:rgba(239,68,68,0.13);  color:#f87171; padding:2px 8px; border-radius:10px; font-size:0.73rem; font-weight:700; }

.url-truncate {
    max-width:     220px;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    direction:     ltr;
    text-align:    left;
    color:         var(--text-muted);
    font-size:     0.85rem;
}

.actions-cell { display:flex; gap:5px; align-items:center; flex-wrap:nowrap; }

/* ──────────── Stats Page ──────────── */
.stats-box         { text-align:center; padding:28px 20px; }

.clicks-count-box {
    background:    var(--grad-primary);
    color:         white;
    border-radius: var(--radius);
    padding:       26px;
    margin:        20px 0;
    box-shadow:    0 8px 24px rgba(37,99,235,0.35);
}

.clicks-num {
    font-size:   3.5rem;
    font-weight: 800;
    line-height: 1;
    margin:      10px 0;
}

.analytics-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:                   18px;
    margin:                24px 0;
    text-align:            right;
}

.analytics-card {
    background:    var(--card-bg);
    padding:       20px;
    border-radius: var(--radius-sm);
    border:        1px solid var(--card-border);
}

.analytics-card h4 {
    font-size:     0.97rem;
    font-weight:   800;
    margin-bottom: 14px;
    color:         var(--primary-light);
    display:       flex;
    align-items:   center;
    gap:           8px;
}

.stat-bar-wrapper  { margin-bottom: 12px; }

.stat-bar-info {
    display:         flex;
    justify-content: space-between;
    font-size:       0.82rem;
    font-weight:     700;
    margin-bottom:   5px;
}

.progress-bar-bg {
    background:    rgba(59,130,246,0.15);
    height:        8px;
    border-radius: 4px;
    overflow:      hidden;
}

.progress-bar-fill {
    background:    var(--grad-primary);
    height:        100%;
    border-radius: 4px;
    transition:    width 0.7s ease;
}

/* Social share */
.share-buttons { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:20px; }
.btn-social    { flex:1; min-width:110px; font-size:0.87rem; padding:10px 14px; }
.btn-wa { background:#25D366 !important; color:white !important; }
.btn-tg { background:#0088cc !important; color:white !important; }
.btn-fb { background:#1877F2 !important; color:white !important; }
.btn-tw { background:#000000 !important; color:white !important; }

/* ──────────── Leads Table ──────────── */
.leads-table {
    width:           100%;
    border-collapse: collapse;
    text-align:      right;
    background:      var(--card-bg);
    border-radius:   var(--radius);
    overflow:        hidden;
    border:          1px solid var(--card-border);
}

.leads-table th,
.leads-table td {
    padding:       13px 16px;
    border-bottom: 1px solid var(--card-border);
    font-size:     0.9rem;
}

.leads-table th {
    background:    rgba(37,99,235,0.08);
    font-weight:   700;
    color:         var(--text-muted);
    font-size:     0.8rem;
    text-transform: uppercase;
}

/* ──────────── Footer ──────────── */
.site-footer {
    border-top:  1px solid rgba(59,130,246,0.15);
    padding:     24px 0;
    text-align:  center;
    color:       var(--text-dim);
    font-size:   0.87rem;
    margin-top:  40px;
}

.site-footer a { color:var(--text-muted); transition:color 0.2s; }
.site-footer a:hover { color:var(--primary-light); }

/* ──────────── Utilities ──────────── */
.hidden { display:none !important; }

.empty-msg {
    text-align:  center;
    color:       var(--text-dim);
    padding:     35px;
    font-size:   0.93rem;
}

.spinner {
    width:         20px;
    height:        20px;
    border:        3px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation:     spin 0.75s linear infinite;
    flex-shrink:   0;
}

@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes fadeIn  { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes countUp { from { opacity:0; transform:scale(0.85); }    to { opacity:1; transform:scale(1);    } }

/* ──────────── Responsive Mobile ──────────── */
@media (max-width: 768px) {
    .hero-title    { font-size: 1.85rem; }
    .hero-subtitle { font-size: 0.92rem; }
    .hero-section  { padding: 48px 0 32px; }

    .shortener-card { padding: 20px 16px; }

    .advanced-options-box { grid-template-columns: 1fr; }

    .stats-counter { gap: 18px; padding: 14px 20px; }
    .counter-divider { display: none; }
    .counter-num { font-size: 1.6rem; }

    .nav-links a { display: none; }
    .nav-links .btn { display: inline-flex; }

    .result-url-wrapper { flex-direction: column; }
    .result-url-wrapper .btn { width: 100%; }

    .features-grid { grid-template-columns: 1fr; gap: 13px; }
    .analytics-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    .timer-circle { width: 68px; height: 68px; font-size: 1.6rem; }
    .action-box .btn-success { max-width: 100%; }

    .share-buttons .btn-social { min-width: 90px; }
}

@media (max-width: 480px) {
    .container   { padding: 0 14px; }
    .hero-title  { font-size: 1.5rem; }
    .btn-lg      { padding: 14px 22px; font-size: 0.95rem; }
    .stats-grid  { grid-template-columns: 1fr 1fr; gap: 12px; }
    .stat-number { font-size: 1.8rem; }
    .section-title { font-size: 1.5rem; }
}