/* ============================================================
   iOS 26 LIGHT THEME — WebTQ Trường Tiểu học Tân Quy
   ============================================================ */
:root {
    --ios-blue:    #007aff;
    --ios-red:     #d70015;
    --ios-orange:  #ff6a00;
    --ios-navy:    #0f2f7a;
    --surface:     rgba(255, 255, 255, 0.72);
    --surface-2:   rgba(255, 255, 255, 0.55);
    --border:      rgba(180, 210, 255, 0.50);
    --border-2:    rgba(200, 225, 255, 0.70);
}

* { box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(150deg, #ddeeff 0%, #eaf3ff 40%, #f0f7ff 70%, #e8f2ff 100%);
    min-height: 100vh;
    color: #0d1a3a;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

/* ─── EMBOSSED METALLIC HEADING (3D raised on light bg) ─── */
.heading-embossed {
    background: linear-gradient(
        180deg,
        #6baaf5 0%,
        #3a7ee8 12%,
        #1a56d0 30%,
        #0d3dbb 50%,
        #082ba0 65%,
        #1a56d0 80%,
        #6baaf5 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter:
        drop-shadow(0 2px 0 rgba(255, 255, 255, 0.95))
        drop-shadow(0 -1px 0 rgba(5, 30, 120, 0.6))
        drop-shadow(2px 0 0 rgba(180, 210, 255, 0.5))
        drop-shadow(-1px 0 0 rgba(5, 20, 100, 0.3))
        drop-shadow(0 5px 8px rgba(10, 40, 130, 0.35))
        drop-shadow(0 14px 22px rgba(20, 60, 160, 0.18));
    letter-spacing: 0.05em;
}

/* ─── GLASS PILL BUTTON (light mode — like image 2) ─── */
.btn-glass-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px 11px 14px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.88) 0%,
        rgba(230, 243, 255, 0.80) 60%,
        rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1.5px solid rgba(140, 195, 255, 0.55);
    border-radius: 100px;
    text-decoration: none;
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(160, 200, 255, 0.20),
        0 4px 20px rgba(30, 90, 220, 0.13),
        0 1px 4px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    width: fit-content;
    max-width: 100%;
}

.btn-glass-pill:hover {
    background: linear-gradient(135deg,
        rgba(240, 250, 255, 0.95) 0%,
        rgba(215, 235, 255, 0.90) 60%,
        rgba(240, 250, 255, 0.92) 100%);
    border-color: rgba(100, 165, 255, 0.75);
    transform: translateY(-2px) scale(1.01);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(140, 190, 255, 0.25),
        0 10px 30px rgba(30, 90, 220, 0.22),
        0 2px 8px rgba(0, 0, 0, 0.10);
}

.btn-glass-pill:active { transform: translateY(0) scale(0.99); }

.btn-glass-pill .btn-icon {
    font-size: 1.15em;
    flex-shrink: 0;
    line-height: 1;
}

.btn-glass-pill .btn-text { flex: 1; min-width: 0; }

.btn-glass-pill .btn-label {
    display: block;
    font-weight: 700;
    font-size: 0.82rem;
    color: #0d2060;
    letter-spacing: 0.03em;
    line-height: 1.25;
}

.btn-glass-pill .btn-url {
    display: block;
    font-size: 0.82rem;
    color: #1260c0;
    font-weight: 500;
    margin-top: 3px;
    line-height: 1.3;
}

.btn-glass-pill .btn-arrow {
    color: rgba(30, 100, 220, 0.65);
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    font-weight: 300;
}

.btn-glass-pill:hover .btn-arrow { transform: translateX(3px); }

/* ─── GLASS CARD ─── */
.ios-card {
    background: linear-gradient(150deg,
        rgba(255, 255, 255, 0.75) 0%,
        rgba(240, 250, 255, 0.60) 100%);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1.5px solid rgba(190, 220, 255, 0.65);
    border-radius: 22px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.90),
        0 20px 50px rgba(30, 80, 200, 0.10),
        0 4px 16px rgba(30, 80, 180, 0.07);
}

/* ─── SCREENSHOT FRAME ─── */
.screenshot-frame {
    background: rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(20px);
    border: 1.5px solid rgba(180, 215, 255, 0.65);
    border-radius: 14px;
    padding: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 8px 24px rgba(30, 80, 200, 0.12);
}

/* ─── DIVIDER ─── */
.ios-divider {
    width: 70%;
    height: 1.5px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 140, 0, 0.40),
        rgba(255, 100, 0, 0.70),
        rgba(255, 140, 0, 0.40),
        transparent);
    box-shadow: 0 0 8px rgba(255, 120, 0, 0.22);
}

/* ─── UTILITY COLORS ─── */
.c-ios-red     { color: #d70015; }
.c-ios-blue    { color: #0060df; }
.c-ios-orange  { color: #e85d00; }
.c-blue-light  { color: #2e7ad6; font-style: italic; }
.c-navy-90     { color: rgba(10, 25, 80, 0.88); }
.c-navy-65     { color: rgba(10, 25, 80, 0.60); }
.c-navy-45     { color: rgba(10, 25, 80, 0.42); }
.c-blue-link   { color: #005fe8; }

/* Header */
.ios-header {
    background: linear-gradient(135deg,
        rgba(190, 225, 255, 0.80) 0%,
        rgba(210, 238, 255, 0.72) 60%,
        rgba(195, 228, 255, 0.78) 100%);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-bottom: 1.5px solid rgba(140, 200, 255, 0.50);
    box-shadow: 0 1px 0 rgba(255,255,255,0.90) inset,
                0 4px 20px rgba(30,80,180,0.09);
}

/* Theme switcher badge */
.theme-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #0060df;
    background: rgba(0, 122, 255, 0.10);
    border: 1px solid rgba(0, 122, 255, 0.25);
    border-radius: 100px;
    padding: 4px 12px;
    text-decoration: none;
    transition: all 0.2s ease;
    letter-spacing: 0.02em;
}
.theme-badge:hover {
    background: rgba(0, 122, 255, 0.18);
    border-color: rgba(0, 122, 255, 0.45);
}

/* ─── HEADER SHIMMER TITLE ─── */
.header-shimmer {
    background: linear-gradient(
        90deg,
        rgba(15, 55, 165, 0.68) 0%,
        rgba(29, 78, 216, 0.88) 18%,
        rgba(96, 160, 255, 0.98) 32%,
        rgba(29, 78, 216, 0.88) 48%,
        rgba(15, 55, 165, 0.68) 65%,
        rgba(59, 130, 246, 0.80) 82%,
        rgba(15, 55, 165, 0.68) 100%
    );
    background-size: 260% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation:
        shimmer-sweep 5s ease-in-out infinite,
        glow-breathe 3.5s ease-in-out infinite;
    letter-spacing: 0.03em;
}

@keyframes shimmer-sweep {
    0%   { background-position: 0% center; }
    60%  { background-position: 260% center; }
    100% { background-position: 0% center; }
}

@keyframes glow-breathe {
    0%, 100% {
        filter:
            drop-shadow(0 0 3px rgba(59, 130, 246, 0.15))
            drop-shadow(0 1px 1px rgba(0, 0, 0, 0.08));
    }
    50% {
        filter:
            drop-shadow(0 0 12px rgba(59, 130, 246, 0.40))
            drop-shadow(0 0 4px rgba(147, 197, 253, 0.35))
            drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
    }
}