:root {
    --primary: #0180c7;
    --primary-foreground: #ffffff;
    --primary-gradient: linear-gradient(135deg, #02a8eb 0%, #0180c7 48%, #015f96 100%);
    --radius: 0.5rem;
}

.bg-primary { background-color: var(--primary); }
.text-primary { color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }
.border-primary { border-color: var(--primary); }

.bg-primary-gradient {
    background: var(--primary-gradient);
    color: var(--primary-foreground);
}

.section-banner {
    padding: 0.5rem 1.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    border-radius: 0.5rem;
    text-align: center;
    color: white;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    background: var(--primary-gradient);
}

@media (max-width: 767px) {
    .section-banner--compact-mobile {
        margin-bottom: 0.75rem;
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
        font-size: 1.125rem;
    }
}

.card-surface {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.15s;
}

@media (min-width: 640px) {
    .btn { font-size: 0.875rem; }
}

.btn-sm { height: 2rem; padding: 0 0.75rem; font-size: 0.75rem; }
.btn-lg { height: 2.5rem; padding: 0 1rem; font-size: 0.875rem; }

.btn-primary {
    background-color: var(--primary);
    color: white;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.btn-primary:hover { background-color: #016ba8; }
.btn-primary:active { transform: scale(0.98); }

.btn-outline {
    border: 1px solid #e2e8f0;
    background: white;
    color: #334155;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.btn-outline:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.25rem;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    border-radius: 0.375rem;
    border: 1px solid #e2e8f0;
    background: white;
    color: #0f172a;
    font-size: 0.75rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    outline: none;
    transition: all 0.15s;
}

.form-input,
.form-select {
    height: 2.25rem;
    padding: 0 0.75rem;
}

.form-textarea {
    padding: 0.5rem 0.75rem;
    resize: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgb(1 128 199 / 0.2);
}

.renew-form-compact .form-input {
    height: 2rem;
    padding: 0 0.625rem;
    font-size: 0.75rem;
}

.renew-form-compact .btn {
    height: 2rem;
    padding: 0 0.75rem;
    font-size: 0.75rem;
}

.home-banner-viewport {
    aspect-ratio: 3 / 1;
    width: 100%;
    overflow: hidden;
    background: #000;
}

.home-banner-viewport img,
.home-banner-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.public-notice-marquee {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.public-notice-marquee__track {
    display: inline-flex;
    width: max-content;
    animation: public-notice-scroll 22s linear infinite;
}

.public-notice-marquee__text {
    display: inline-block;
    padding-right: 3rem;
    white-space: nowrap;
}

@keyframes public-notice-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.public-footer-surface {
    position: relative;
    overflow: hidden;
    color: white;
    background-color: #0180c7;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        radial-gradient(ellipse 130% 90% at -5% 110%, rgba(255, 255, 255, 0.16) 0%, transparent 58%),
        radial-gradient(ellipse 100% 75% at 105% -10%, rgba(255, 255, 255, 0.12) 0%, transparent 52%),
        var(--primary-gradient);
    background-size: 28px 28px, 28px 28px, auto, auto, auto;
}

.public-footer-surface::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.45;
    background-image:
        radial-gradient(circle at 18% 62%, rgba(255, 255, 255, 0.22) 0 2px, transparent 2.5px),
        radial-gradient(circle at 34% 78%, rgba(255, 255, 255, 0.16) 0 3px, transparent 3.5px),
        radial-gradient(circle at 52% 58%, rgba(255, 255, 255, 0.14) 0 2px, transparent 2.5px),
        radial-gradient(circle at 71% 68%, rgba(255, 255, 255, 0.18) 0 3px, transparent 3.5px),
        radial-gradient(circle at 88% 52%, rgba(255, 255, 255, 0.12) 0 2px, transparent 2.5px);
}

.public-footer-surface > * {
    position: relative;
    z-index: 1;
}

.public-footer-notice {
    position: relative;
    overflow: hidden;
    color: white;
    background-color: #014a75;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(180deg, #016299 0%, #014a75 55%, #013d61 100%);
    background-size: 24px 24px, 24px 24px, auto;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.public-footer-notice > * {
    position: relative;
    z-index: 1;
}

.animate-ticker {
    display: inline-flex;
    animation: ticker 40s linear infinite;
}

.animate-ticker:hover {
    animation-play-state: paused;
}

@keyframes ticker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

[x-cloak] { display: none !important; }