/* 华阳中心小学 · 入学通知书查询
   视觉：校徽绿橙 + 通知书朱红证书风（区别于华阳实验小学蓝绿门户风） */

* {margin:0;padding:0;box-sizing:border-box;}

:root {
    --green:#14703a;
    --green-deep:#0f5a2e;
    --green-leaf:#50a637;
    --orange:#d97a30;
    --orange-deep:#c45f18;
    --seal-red:#c62828;
    --seal-coral:#d4543c;
    --paper:#fff7f2;
    --paper-deep:#ffe8dc;
    --ink:#2a211c;
    --muted:#6d5c52;
    --line:rgba(198,40,40,.28);
    --shadow:0 18px 48px rgba(80,40,20,.12);
    --serif:"Songti SC","STSong","SimSun","Noto Serif SC","Source Han Serif SC",serif;
    --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",sans-serif;
}

html {scroll-behavior:smooth;}
body {
    font-family:var(--sans);
    color:var(--ink);
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:18px 12px 28px;
    position:relative;
    overflow-x:hidden;
    background:
        radial-gradient(ellipse at 15% 10%, rgba(80,166,55,.12), transparent 42%),
        radial-gradient(ellipse at 85% 0%, rgba(217,122,48,.14), transparent 40%),
        linear-gradient(165deg, #fff9f4 0%, #ffeede 42%, #f4f8ef 100%);
}
a {text-decoration:none;color:inherit;}

.page-bg {
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='none' stroke='%2314703a' stroke-width='1' opacity='.06'><circle cx='80' cy='80' r='54'/><path d='M80 38c10 14 18 26 18 42s-8 28-18 42c-10-14-18-26-18-42s8-28 18-42z'/><circle cx='80' cy='52' r='6' fill='%23d97a30' stroke='none' opacity='.35'/></g></svg>");
    background-size:160px 160px;
    animation:paperDrift 40s linear infinite;
}
@keyframes paperDrift {
    from {background-position:0 0;}
    to {background-position:160px 80px;}
}

.container {
    width:100%;
    max-width:1080px;
    position:relative;
    z-index:2;
    background:linear-gradient(180deg, rgba(255,252,248,.97), rgba(255,247,242,.98));
    border:1px solid rgba(198,40,40,.18);
    box-shadow:var(--shadow);
    overflow:hidden;
    animation:riseIn .7s cubic-bezier(.22,1,.36,1) both;
}
.container::before {
    content:"";
    position:absolute;
    inset:8px;
    border:1px solid rgba(20,112,58,.14);
    pointer-events:none;
    z-index:3;
}
@keyframes riseIn {
    from {opacity:0;transform:translateY(22px);}
    to {opacity:1;transform:translateY(0);}
}

/* ===== Hero ===== */
.site-hero {
    position:relative;
    padding:34px 28px 42px;
    text-align:center;
    color:#fff;
    background:
        linear-gradient(135deg, rgba(15,90,46,.94), rgba(20,112,58,.9) 48%, rgba(196,95,24,.88)),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,.14), transparent 40%);
    overflow:hidden;
}
.site-hero::after {
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:18px;
    background:
        linear-gradient(135deg, transparent 33%, #fff7f2 33% 66%, transparent 66%) left bottom / 22px 18px repeat-x,
        linear-gradient(-135deg, transparent 33%, #fff7f2 33% 66%, transparent 66%) left bottom / 22px 18px repeat-x;
}
.hero-ornament {
    position:absolute;
    width:86px;height:86px;
    border:2px solid rgba(255,255,255,.22);
    opacity:.7;
}
.hero-ornament-tl {top:14px;left:14px;border-right:0;border-bottom:0;}
.hero-ornament-tr {top:14px;right:14px;border-left:0;border-bottom:0;}

.hero-seal {position:relative;z-index:2;margin-bottom:14px;}
.school-badge {
    width:118px;height:118px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fff;
    border:4px solid var(--orange);
    box-shadow:0 10px 28px rgba(0,0,0,.22), 0 0 0 6px rgba(255,255,255,.18);
    animation:sealFloat 3.4s ease-in-out infinite;
    overflow:hidden;
}
.school-badge img {width:100%;height:100%;object-fit:cover;display:block;}
@keyframes sealFloat {
    0%,100% {transform:translateY(0);}
    50% {transform:translateY(-8px);}
}

.hero-brand {position:relative;z-index:2;}
.hero-en {
    font-size:12px;
    letter-spacing:2.2px;
    text-transform:uppercase;
    opacity:.85;
    margin-bottom:8px;
    font-weight:500;
}
.site-hero h1 {
    font-family:var(--serif);
    font-size:clamp(28px,4vw,40px);
    font-weight:700;
    letter-spacing:4px;
    text-indent:4px;
    text-shadow:0 2px 10px rgba(0,0,0,.25);
    margin-bottom:8px;
}
.subtitle {
    font-size:17px;
    opacity:.95;
    font-weight:400;
    letter-spacing:1px;
}
.subtitle::after {
    content:"";
    display:block;
    width:72px;height:3px;
    margin:14px auto 0;
    border-radius:2px;
    background:linear-gradient(90deg, transparent, var(--orange), transparent);
}
.hero-ribbon {
    position:absolute;
    right:0;top:38%;
    z-index:2;
    writing-mode:vertical-rl;
    background:linear-gradient(180deg, var(--seal-red), var(--seal-coral));
    color:#fff;
    font-family:var(--serif);
    font-size:14px;
    letter-spacing:6px;
    padding:16px 8px;
    box-shadow:-4px 6px 16px rgba(0,0,0,.18);
    border-radius:8px 0 0 8px;
    animation:ribbonIn .8s .2s both cubic-bezier(.22,1,.36,1);
}
@keyframes ribbonIn {
    from {opacity:0;transform:translateX(20px);}
    to {opacity:1;transform:translateX(0);}
}

/* ===== Content layout ===== */
.content {
    display:grid;
    grid-template-columns:42px 1fr;
    gap:0;
    padding:0;
    position:relative;
    z-index:2;
}
.side-banner {
    background:linear-gradient(180deg, var(--seal-red), #a61f1f);
    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-family:var(--serif);
    font-size:15px;
    font-weight:700;
    letter-spacing:2px;
    padding:18px 0;
    box-shadow:inset -2px 0 0 rgba(255,255,255,.15);
}
.side-banner span {line-height:1.1;}
.content-main {padding:28px 28px 18px;min-width:0;}

/* ===== Tips ===== */
.info-box {
    position:relative;
    margin-bottom:24px;
    padding:26px 22px 18px;
    background:linear-gradient(135deg, #fffaf6, #fff1e8);
    border:1px solid var(--line);
    box-shadow:0 8px 22px rgba(198,40,40,.06);
}
.info-box::before,
.info-box::after {
    content:"";
    position:absolute;
    width:18px;height:18px;
    border:2px solid var(--seal-coral);
}
.info-box::before {top:8px;left:8px;border-right:0;border-bottom:0;}
.info-box::after {right:8px;bottom:8px;border-left:0;border-top:0;}
.info-box-title {
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:-38px 0 14px;
    padding:7px 16px;
    background:linear-gradient(90deg, var(--seal-red), var(--seal-coral));
    color:#fff;
    font-weight:700;
    font-size:15px;
    letter-spacing:1px;
    box-shadow:0 6px 14px rgba(198,40,40,.22);
}
.info-box p {
    margin:10px 0;
    color:var(--ink);
    line-height:1.75;
    font-size:15px;
}
.info-box i {
    color:var(--orange);
    width:22px;
    text-align:center;
    margin-right:4px;
}

/* ===== Form ===== */
.form-container {
    position:relative;
    padding:28px 26px 30px;
    margin-bottom:36px;
    background:#fff;
    border:1px solid rgba(20,112,58,.16);
    box-shadow:0 10px 28px rgba(20,112,58,.08);
}
.form-container::before {
    content:"";
    position:absolute;
    left:0;top:0;bottom:0;
    width:6px;
    background:linear-gradient(180deg, var(--green), var(--orange));
}
.form-title {
    display:flex;
    align-items:center;
    gap:14px;
    font-family:var(--serif);
    font-size:26px;
    color:var(--green-deep);
    margin-bottom:8px;
    letter-spacing:2px;
}
.form-title i {
    width:52px;height:52px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(145deg, #e8f5e1, #d7efc8);
    color:var(--green);
    font-size:22px;
    box-shadow:0 6px 14px rgba(20,112,58,.12);
}
.form-lead {
    color:var(--muted);
    font-size:14px;
    margin:0 0 22px 66px;
}
.input-row {display:flex;gap:20px;margin-bottom:22px;}
.input-group {flex:1;min-width:0;}
label {
    display:block;
    font-size:15px;
    color:var(--ink);
    margin-bottom:10px;
    font-weight:600;
}
.input-with-icon {position:relative;}
.input-icon {
    position:absolute;
    left:16px;top:50%;
    transform:translateY(-50%);
    color:var(--green);
    font-size:16px;
}
input {
    width:100%;
    padding:15px 18px 15px 46px;
    font-size:16px;
    border:none;
    border-bottom:2px solid rgba(20,112,58,.25);
    border-radius:0;
    background:linear-gradient(180deg, #fff, #fbf8f4);
    color:var(--ink);
    transition:border-color .25s, box-shadow .25s, background .25s;
    font-family:var(--sans);
}
input:focus {
    outline:none;
    border-bottom-color:var(--orange);
    background:#fff;
    box-shadow:0 8px 0 -6px rgba(217,122,48,.25);
}
.btn {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    padding:16px 20px;
    border:none;
    cursor:pointer;
    color:#fff;
    font-size:18px;
    font-weight:700;
    letter-spacing:1px;
    background:linear-gradient(120deg, var(--orange-deep), var(--orange) 55%, #e39a4a);
    box-shadow:0 10px 24px rgba(217,122,48,.35);
    position:relative;
    overflow:hidden;
    transition:transform .25s, box-shadow .25s;
}
.btn::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
    transform:translateX(-120%);
    transition:transform .6s;
}
.btn:hover {transform:translateY(-3px);box-shadow:0 14px 28px rgba(217,122,48,.42);}
.btn:hover::before {transform:translateX(120%);}
.btn:active {transform:translateY(0);}
.btn-retry {max-width:320px;margin:0 auto;text-decoration:none;}

/* ===== Result / certificate ===== */
.result-container {display:none;animation:fadeIn .6s ease-out;}
@keyframes fadeIn {
    from {opacity:0;transform:translateY(24px);}
    to {opacity:1;transform:translateY(0);}
}
.notification-card,
.cert-frame {
    position:relative;
    padding:34px 26px 28px;
    margin-bottom:24px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,247,242,.95)),
        repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(198,40,40,.03) 28px);
    border:2px solid rgba(198,40,40,.35);
    box-shadow:0 14px 36px rgba(120,40,20,.1);
    overflow:hidden;
}
.cert-frame::before {
    content:"";
    position:absolute;
    inset:8px;
    border:1px solid rgba(20,112,58,.18);
    pointer-events:none;
}
.cert-corner {
    position:absolute;
    width:28px;height:28px;
    border:3px solid var(--seal-coral);
    z-index:2;
}
.cert-corner-tl {top:12px;left:12px;border-right:0;border-bottom:0;}
.cert-corner-tr {top:12px;right:12px;border-left:0;border-bottom:0;}
.cert-corner-bl {bottom:12px;left:12px;border-right:0;border-top:0;}
.cert-corner-br {bottom:12px;right:12px;border-left:0;border-top:0;}

.result-header {text-align:center;margin-bottom:22px;position:relative;z-index:1;}
.result-badge {
    width:66px;height:66px;
    margin:0 auto 12px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:26px;
    background:radial-gradient(circle at 30% 30%, #ffb074, var(--orange) 55%, var(--orange-deep));
    border:3px solid #fff;
    box-shadow:0 8px 20px rgba(217,122,48,.35), 0 0 0 2px rgba(198,40,40,.2);
    animation:sealFloat 3.4s ease-in-out infinite;
}
.result-header h2 {
    font-family:var(--serif);
    color:var(--seal-red);
    font-size:34px;
    letter-spacing:10px;
    text-indent:10px;
    font-weight:700;
    margin:0;
}
.result-divider {
    display:flex;
    align-items:center;
    justify-content:center;
    margin:12px auto 18px;
    width:min(280px,70%);
}
.result-divider span {
    display:block;
    width:100%;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(198,40,40,.7), transparent);
    position:relative;
}
.result-divider span::before,
.result-divider span::after {
    content:"";
    position:absolute;
    top:50%;
    width:7px;height:7px;
    border-radius:50%;
    background:var(--orange);
    transform:translateY(-50%);
}
.result-divider span::before {left:18%;}
.result-divider span::after {right:18%;}

.congrats-box {
    max-width:520px;
    margin:0 auto;
    padding:18px 20px 20px;
    background:linear-gradient(165deg, #fff, #fff8f2 60%, #f4faf0);
    border:1px solid rgba(217,122,48,.28);
    position:relative;
}
.congrats-box::before,
.congrats-box::after {
    content:"";
    position:absolute;
    left:12px;right:12px;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(198,40,40,.4), transparent);
}
.congrats-box::before {top:8px;}
.congrats-box::after {bottom:8px;}
.congrats-lead {
    margin:0 0 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    color:var(--seal-red);
    font-size:13px;
    font-weight:700;
    letter-spacing:6px;
    text-indent:6px;
    font-family:var(--serif);
}
.congrats-lead::before,
.congrats-lead::after {
    content:"";
    width:34px;height:1px;
    background:linear-gradient(90deg, transparent, var(--seal-coral));
}
.congrats-lead::after {background:linear-gradient(90deg, var(--seal-coral), transparent);}
.congrats-text {margin:0 0 10px;color:var(--muted);font-size:16px;line-height:1.7;}
.congrats-text strong {color:var(--green-deep);}
.congrats-grade {margin:0;}
.congrats-grade strong {
    display:inline-block;
    padding:8px 18px;
    font-size:20px;
    font-weight:800;
    letter-spacing:2px;
    color:#fff;
    background:linear-gradient(120deg, var(--green-deep), var(--green-leaf));
    box-shadow:0 8px 18px rgba(20,112,58,.22);
}

.preview-container {margin-top:8px;text-align:center;position:relative;z-index:1;}
.preview-title {
    font-size:18px;color:#455a64;margin-bottom:14px;
    display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;
}
.preview-title i {color:var(--green);}
.preview-box {
    border:2px dashed rgba(198,40,40,.25);
    padding:20px;background:rgba(255,247,242,.8);min-height:400px;
    display:flex;align-items:center;justify-content:center;
}

.notice-tabs {
    display:flex;
    padding:4px;
    margin:0 auto 12px;
    background:#fff1e8;
    gap:4px;
    width:100%;
    max-width:420px;
    box-sizing:border-box;
    border:1px solid rgba(217,122,48,.18);
}
.notice-tab {
    flex:1 1 0;
    min-width:0;
    border:0;
    background:transparent;
    color:var(--muted);
    padding:10px 12px;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:color .28s, background .28s, box-shadow .28s, transform .2s;
    white-space:nowrap;
    font-family:var(--sans);
}
.notice-tab i {font-size:14px;}
.notice-tab:active {transform:scale(.97);}
.notice-tab.active {
    background:linear-gradient(120deg, var(--green-deep), var(--green));
    color:#fff;
    box-shadow:0 6px 14px rgba(20,112,58,.25);
}
.notice-tip {
    margin:0 0 14px;
    color:var(--muted);
    font-size:13px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}
.gesture-hint {
    position:relative;
    width:28px;height:28px;
    flex:0 0 28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.gesture-hand {
    display:inline-flex;
    color:var(--orange);
    font-size:18px;
    transform-origin:center bottom;
    animation:gestureSwipe 1.6s ease-in-out infinite;
}
.gesture-hold .gesture-hand {animation:gestureHold 1.4s ease-in-out infinite;color:#fff;}
@keyframes gestureSwipe {
    0%,100% {transform:translateX(0) scale(1);}
    25% {transform:translateX(-7px) scale(1.05);}
    40% {transform:translateX(-7px) scale(.92);}
    55% {transform:translateX(7px) scale(1.05);}
    70% {transform:translateX(7px) scale(.92);}
}
@keyframes gestureHold {
    0%,100% {transform:scale(1);opacity:1;}
    35% {transform:scale(.86);opacity:.85;}
    55% {transform:scale(1.08);opacity:1;}
}

.notification {
    width:100%;
    max-width:560px;
    height:auto;
    background:#fff;
    border:1px solid rgba(198,40,40,.2);
    box-shadow:0 12px 30px rgba(80,30,20,.1);
    overflow:hidden;
    position:relative;
    margin:0 auto;
    -webkit-tap-highlight-color:transparent;
}
.notification::before {
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:5px;
    background:linear-gradient(90deg, var(--seal-red), var(--orange), var(--green));
    z-index:3;
}
.notification.is-switching {pointer-events:none;}
.notice-panel {
    position:absolute;left:0;top:0;width:100%;
    opacity:0;visibility:hidden;pointer-events:none;z-index:0;
    transform:translate3d(18px,0,0) scale(.985);
    transition:opacity .42s cubic-bezier(.22,1,.36,1), transform .48s cubic-bezier(.22,1,.36,1), visibility 0s linear .42s;
    will-change:transform,opacity;
}
.notice-panel.active {
    position:relative;opacity:1;visibility:visible;pointer-events:auto;z-index:1;
    transform:translate3d(0,0,0) scale(1);
    transition:opacity .42s cubic-bezier(.22,1,.36,1), transform .48s cubic-bezier(.22,1,.36,1), visibility 0s;
}
.notice-panel.is-prep-left {transform:translate3d(-18px,0,0) scale(.985);opacity:0;visibility:visible;}
.notice-panel.is-prep-right {transform:translate3d(18px,0,0) scale(.985);opacity:0;visibility:visible;}
.notice-panel.is-exit-left {opacity:0;visibility:visible;transform:translate3d(-18px,0,0) scale(.985);z-index:2;position:absolute;left:0;top:0;width:100%;}
.notice-panel.is-exit-right {opacity:0;visibility:visible;transform:translate3d(18px,0,0) scale(.985);z-index:2;position:absolute;left:0;top:0;width:100%;}
.notice-img {display:block;width:100%;height:auto;cursor:zoom-in;vertical-align:top;backface-visibility:hidden;}

.lightbox {
    position:fixed;inset:0;background:rgba(30,16,10,.9);z-index:3000;
    display:flex;align-items:center;justify-content:center;padding:20px;
    opacity:0;pointer-events:none;transition:opacity .28s ease;
}
.lightbox.active {opacity:1;pointer-events:all;}
.lightbox img {
    max-width:min(920px,92vw);max-height:86vh;object-fit:contain;
    box-shadow:0 16px 40px rgba(0,0,0,.35);background:#fff;
    transition:opacity .28s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.lightbox img.is-swap {opacity:0;transform:scale(.98);}
.lightbox-close,.lightbox-nav {
    position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;
    width:44px;height:44px;border-radius:50%;cursor:pointer;
    display:flex;align-items:center;justify-content:center;font-size:18px;
    transition:background .2s, transform .2s;
}
.lightbox-close:hover,.lightbox-nav:hover {background:rgba(255,255,255,.28);}
.lightbox-close {top:18px;right:18px;}
.lightbox-nav.prev {left:16px;}
.lightbox-nav.next {right:16px;}
.lightbox-caption {
    position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
    color:#fff;background:rgba(0,0,0,.45);padding:6px 14px;border-radius:999px;font-size:14px;
}

.notice-save-tip {cursor:default;}
.notice-action {display:none;opacity:0;transform:translateY(6px);transition:opacity .28s ease, transform .28s cubic-bezier(.22,1,.36,1);}
.notice-action.is-visible {opacity:1;transform:translateY(0);}
.action-buttons {
    display:flex;gap:16px;flex-wrap:wrap;justify-content:center;
    margin-top:26px;position:relative;z-index:1;
}
.action-btn {
    flex:1;min-width:200px;padding:15px;border:none;font-size:16px;font-weight:700;
    cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;
    transition:transform .25s, box-shadow .25s;font-family:var(--sans);
}
.download-btn {
    background:linear-gradient(120deg, var(--green), var(--green-leaf));
    color:#fff;box-shadow:0 6px 16px rgba(20,112,58,.28);
}
.pdf-btn {
    background:linear-gradient(120deg, var(--seal-red), var(--seal-coral));
    color:#fff;box-shadow:0 6px 16px rgba(198,40,40,.28);
}
.print-btn {
    background:linear-gradient(120deg, var(--orange-deep), var(--orange));
    color:#fff;box-shadow:0 6px 16px rgba(217,122,48,.28);
}
.action-btn:hover {transform:translateY(-3px);}
.action-btn:active {transform:translateY(1px);}

/* leftover notification text blocks */
.notification-header {padding:30px 40px 10px;text-align:center;}
.notification-header h2 {font-size:36px;color:var(--seal-red);margin-bottom:10px;letter-spacing:3px;font-family:var(--serif);}
.notification-header h3 {font-size:28px;color:var(--green);margin-bottom:20px;}
.notification-body {padding:20px 60px;text-align:center;}
.notification-content {margin:30px 0;font-size:20px;line-height:1.8;color:#333;}
.student-info {margin:30px 0;font-size:24px;font-weight:bold;}
.student-name {color:var(--green-deep);font-size:32px;margin:10px 0;}
.student-class {color:var(--seal-red);font-size:28px;margin:10px 0;}
.notification-footer {position:absolute;bottom:30px;left:0;right:0;padding:0 40px;display:flex;justify-content:space-between;}
.official-seal {
    width:120px;height:120px;border-radius:50%;border:2px solid var(--seal-red);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    color:var(--seal-red);font-weight:bold;font-size:14px;text-align:center;line-height:1.4;background:#fff;opacity:.9;
}
.official-seal::before {content:"★";font-size:32px;margin-bottom:5px;}
.school-info {text-align:right;padding-right:20px;}
.school-name {font-size:20px;font-weight:bold;color:var(--green-deep);margin-bottom:5px;}
.date {font-size:18px;color:#555;}

/* ===== Footer ===== */
.footer {
    text-align:center;
    padding:26px 20px 22px;
    color:#f4ebe4;
    background:
        linear-gradient(180deg, #123d24, #0d2f1b);
    position:relative;
    z-index:2;
    font-size:14px;
    line-height:1.8;
}
.footer-mark {
    width:48px;height:3px;
    margin:0 auto 14px;
    background:linear-gradient(90deg, var(--orange), transparent);
}
.footer-logo {
    color:#fff;
    font-family:var(--serif);
    font-weight:700;
    font-size:18px;
    letter-spacing:2px;
    margin-bottom:8px;
}
.footer a {color:#ffd2a8;}
.footer .tel-link {color:#ffd2a8;border-bottom:1px dashed rgba(255,210,168,.45);}
.footer .tel-link:hover {color:#fff;}

/* ===== Modal ===== */
.modal-overlay {
    position:fixed;inset:0;background:rgba(28,14,8,.72);z-index:2000;
    display:flex;align-items:center;justify-content:center;padding:16px;
    opacity:0;pointer-events:none;transition:opacity .3s ease;backdrop-filter:blur(2px);
}
.modal-overlay.active {opacity:1;pointer-events:all;}
.modal {
    background:#fffaf6;width:100%;max-width:920px;max-height:88vh;overflow:hidden;
    box-shadow:0 22px 50px rgba(80,20,10,.3);position:relative;
    display:flex;flex-direction:column;
    transform:translateY(-20px);transition:transform .4s ease, opacity .4s ease;
    opacity:0;border:none;
}
.modal-overlay.active .modal {transform:translateY(0);opacity:1;}
.modal-header {
    background:linear-gradient(120deg, var(--seal-red), var(--seal-coral) 55%, var(--orange));
    color:#fff;padding:22px 24px 18px;text-align:center;flex:0 0 auto;position:relative;
}
.modal-header::after {
    content:"";position:absolute;left:20px;right:20px;bottom:0;height:1px;background:rgba(255,255,255,.22);
}
.modal-header h2 {
    font-family:var(--serif);font-size:24px;margin:0 0 6px;letter-spacing:3px;font-weight:700;
}
.modal-header p {margin:0;opacity:.92;font-size:14px;}
.modal-content {
    padding:18px 22px 10px;color:#4a3b34;line-height:1.8;flex:1 1 auto;
    overflow-y:auto;overflow-x:hidden;min-height:0;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin;scrollbar-color:#e08a55 #fff1e8;
}
.modal-content::-webkit-scrollbar {width:8px;}
.modal-content::-webkit-scrollbar-track {background:#fff1e8;border-radius:999px;margin:6px 0;}
.modal-content::-webkit-scrollbar-thumb {background:linear-gradient(180deg, var(--orange), var(--seal-coral));border-radius:999px;}
.modal-content h3 {
    color:var(--seal-red);margin:14px 0 10px;font-size:18px;
    display:flex;align-items:center;font-weight:700;font-family:var(--serif);
}
.modal-content h3:first-child {margin-top:4px;}
.modal-content h3 i {
    margin-right:10px;background:linear-gradient(145deg, #ffe4d4, #ffd2b8);
    width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
    color:var(--seal-coral);font-size:14px;flex:0 0 34px;
}
.modal-content ul {padding:0;margin:0 0 8px;list-style:none;}
.modal-content li {
    margin-bottom:8px;position:relative;padding:10px 12px 10px 28px;list-style:none;
    background:#fff;border:1px solid #f0ddd0;font-size:14px;line-height:1.7;color:#4a3b34;
}
.modal-content li:before {
    content:"";position:absolute;left:12px;top:18px;width:6px;height:6px;border-radius:50%;
    background:var(--orange);box-shadow:0 0 0 3px rgba(217,122,48,.15);
}
.modal-footer {
    padding:14px 20px 18px;text-align:center;flex:0 0 auto;
    background:linear-gradient(180deg, #fffaf6, #fff1e8);border-top:1px solid #f0ddd0;
}
.close-btn {
    background:linear-gradient(135deg, #bcaaa4, #a1887f);color:#fff;border:none;
    padding:14px 28px;font-size:16px;cursor:pointer;transition:all .3s;
    box-shadow:0 4px 10px rgba(0,0,0,.08);opacity:.85;pointer-events:none;
    display:flex;align-items:center;justify-content:center;margin:0 auto;min-width:240px;
    font-family:var(--sans);
}
.close-btn i {margin-right:8px;}
.close-btn.enabled {
    opacity:1;pointer-events:auto;
    background:linear-gradient(120deg, var(--green-deep), var(--green-leaf));
    box-shadow:0 8px 18px rgba(20,112,58,.28);
}
.close-btn.enabled:hover {transform:translateY(-2px);}
.close-btn:disabled {cursor:not-allowed;box-shadow:none;}

.tel-link {color:var(--seal-red);font-weight:700;border-bottom:1px dashed rgba(198,40,40,.35);}
.tel-link:hover {color:var(--orange-deep);}
.info-box .tel-link {color:var(--seal-red);}
.no-result-contact .tel-link {font-size:16px;}
.welcome-message .tel-link {color:var(--green-deep);font-size:15px;}

/* ===== Welcome / timer ===== */
.welcome-message {
    background:linear-gradient(135deg, #f3f9ee, #e4f2d8);
    padding:16px;text-align:center;margin-top:16px;
    border-left:5px solid var(--green-leaf);position:relative;overflow:hidden;
}
.welcome-message:before {
    content:"";position:absolute;top:0;left:0;width:100%;height:4px;
    background:linear-gradient(90deg, var(--green), var(--orange), var(--green));
    animation:progressBar 8s linear infinite;
}
.welcome-message p {font-size:14px;color:var(--green-deep);font-weight:700;}
.timer {font-size:22px;font-weight:bold;color:var(--seal-red);display:flex;justify-content:center;align-items:center;}
.timer i {margin-right:10px;animation:pulse 1.5s infinite;}
.important-note {color:var(--seal-red);font-weight:bold;text-align:center;margin-top:15px;font-size:18px;animation:pulseText 2s infinite;}
#countdownText {color:var(--green);font-weight:bolder;}
#showModal {
    background:linear-gradient(135deg, var(--orange-deep), var(--orange));color:#fff;border:none;
    padding:15px 40px;font-size:18px;cursor:pointer;transition:all .3s;
    box-shadow:0 4px 8px rgba(0,0,0,.15);margin:20px auto 0;
    display:flex;align-items:center;justify-content:center;
}
#showModal i {margin-right:10px;}

@keyframes pulse {0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}
@keyframes pulseText {0%,100%{opacity:.8;}50%{opacity:1;text-shadow:0 0 10px rgba(198,40,40,.4);}}
@keyframes progressBar {0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}

/* ===== No result ===== */
.no-result-section {
    display:none;
    background:linear-gradient(165deg, #fff 0%, #fff7f2 100%);
    padding:42px 28px 32px;box-shadow:0 12px 32px rgba(120,40,20,.08);
    margin:8px auto 24px;position:relative;text-align:center;
    border:1px solid rgba(198,40,40,.2);overflow:hidden;
}
.no-result-section::before {
    content:"";position:absolute;inset:8px;border:1px solid rgba(20,112,58,.1);pointer-events:none;
}
.no-result-section::after {
    content:"";position:absolute;top:0;left:0;right:0;height:4px;
    background:linear-gradient(90deg, var(--seal-red), var(--orange), var(--green));
}
.no-result-badge {
    width:66px;height:66px;margin:0 auto 14px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(145deg, #ffe8d8, #ffd4b5);
    border:3px solid #fff;box-shadow:0 8px 20px rgba(217,122,48,.18);
    color:var(--orange-deep);font-size:26px;position:relative;z-index:1;
}
.no-result-label {
    display:inline-block;margin-bottom:10px;padding:4px 14px;
    background:rgba(198,40,40,.08);color:var(--seal-red);
    font-size:12px;font-weight:700;letter-spacing:2px;position:relative;z-index:1;
}
.no-result-title {
    font-family:var(--serif);font-size:28px;color:var(--seal-red);
    margin:0 0 12px;font-weight:700;letter-spacing:2px;position:relative;z-index:1;
}
.no-result-divider {
    display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
    width:min(240px,65%);position:relative;z-index:1;
}
.no-result-divider span {
    display:block;width:100%;height:1px;
    background:linear-gradient(90deg, transparent, rgba(198,40,40,.4), transparent);
}
.no-result-desc {
    font-size:15px;color:var(--muted);margin:0 auto 24px;line-height:1.8;position:relative;z-index:1;
}
.no-result-suggestion {
    background:#fff;border:1px solid #f0ddd0;padding:18px 20px;text-align:left;
    margin:0 auto 8px;position:relative;z-index:1;
}
.no-result-suggestion h4 {
    color:var(--green-deep);margin:0 0 14px;font-size:16px;font-weight:700;
    display:flex;align-items:center;gap:8px;
}
.no-result-suggestion h4 i {color:var(--orange);}
.no-result-suggestion ol {margin:0;padding:0;list-style:none;counter-reset:nr;}
.no-result-suggestion li {
    counter-increment:nr;position:relative;padding:10px 0 10px 36px;
    color:#4a3b34;font-size:14px;line-height:1.7;border-bottom:1px dashed #f0ddd0;
}
.no-result-suggestion li:last-of-type {border-bottom:none;}
.no-result-suggestion li::before {
    content:counter(nr);position:absolute;left:0;top:11px;
    width:24px;height:24px;border-radius:50%;
    background:#fff1e8;color:var(--seal-red);font-size:12px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
}
.no-result-suggestion li strong {color:var(--seal-red);}
.no-result-contact {
    margin-top:14px;padding:12px 14px;background:linear-gradient(120deg, rgba(198,40,40,.06), rgba(20,112,58,.06));
    border:1px solid rgba(198,40,40,.12);color:#4a3b34;font-size:14px;
    display:flex;align-items:center;justify-content:center;gap:8px;
}
.no-result-contact i {color:var(--green);}
.no-result-contact strong {color:var(--seal-red);font-size:16px;}
.no-result-actions {margin-top:26px;position:relative;z-index:1;display:flex;justify-content:center;}

/* ===== Print ===== */
@media print {
    @page {size:A4 portrait;margin:0;}
    body * {visibility:hidden !important;}
    #printOnly,.print-a4-only,#printOnly * {visibility:visible !important;}
    #printOnly {
        position:fixed;left:0;top:0;width:210mm;height:297mm;
        display:flex;align-items:center;justify-content:center;background:#fff;
    }
    #printOnly img {max-width:100%;max-height:100%;object-fit:contain;}
}

/* ===== Responsive ===== */
@media (max-width:768px) {
    body {padding:8px;}
    .container::before {inset:5px;}
    .site-hero {padding:28px 16px 36px;}
    .site-hero h1 {font-size:26px;letter-spacing:2px;text-indent:2px;}
    .hero-en {font-size:10px;letter-spacing:1px;}
    .school-badge {width:96px;height:96px;}
    .hero-ribbon {display:none;}
    .hero-ornament {width:48px;height:48px;}
    .content {grid-template-columns:28px 1fr;}
    .side-banner {font-size:12px;gap:4px;letter-spacing:1px;}
    .content-main {padding:20px 14px 12px;}
    .info-box {padding:28px 14px 14px;}
    .info-box p {font-size:13px;margin:8px 0;}
    .form-container {padding:22px 16px;}
    .form-title {font-size:22px;}
    .form-lead {margin-left:0;font-size:13px;}
    .input-row {flex-direction:column;gap:16px;}
    .input-group label {font-size:14px;}
    .input-with-icon input {font-size:14px;padding:14px 14px 14px 42px;}
    .btn {font-size:16px;padding:14px;}
    .notification-card,.cert-frame {padding:26px 14px 20px;}
    .result-header h2 {font-size:26px;letter-spacing:4px;text-indent:4px;}
    .result-badge {width:56px;height:56px;font-size:22px;}
    .congrats-box {padding:14px 12px 16px;}
    .congrats-lead {font-size:12px;letter-spacing:4px;}
    .congrats-text {font-size:14px;}
    .congrats-grade strong {font-size:16px;padding:7px 14px;}
    .action-buttons {flex-direction:column;width:100%;align-items:stretch;}
    .action-buttons .action-btn {width:100%;max-width:none;flex:none;min-width:0;padding:12px;font-size:14px;}
    .notice-tabs {max-width:none;}
    .notice-tab {font-size:14px;padding:10px;}
    .footer {padding:18px 12px;font-size:12px;}
    .footer-logo {font-size:16px;margin-bottom:6px;}
    .no-result-section {padding:28px 14px 22px;}
    .no-result-title {font-size:22px;}
    .no-result-desc {font-size:14px;}
    .no-result-suggestion {padding:14px;}
    .no-result-suggestion li {font-size:13px;padding-left:32px;}
    .no-result-actions .btn-retry {max-width:none;font-size:16px;}
    .lightbox-nav.prev {left:8px;}
    .lightbox-nav.next {right:8px;}
    .lightbox img {max-width:96vw;max-height:80vh;}
    .notification-footer {flex-direction:column;align-items:center;gap:20px;}
    .school-info {text-align:center;padding-right:0;}
    .notification-body {padding:20px;}
}

@media (max-width:600px) {
    .modal {max-height:92vh;}
    .modal-header {padding:18px 16px 14px;}
    .modal-header h2 {font-size:20px;letter-spacing:2px;}
    .modal-content {padding:14px 12px 8px;}
    .modal-content li {font-size:13px;padding:9px 10px 9px 26px;}
    .timer {font-size:17px;}
    .close-btn {padding:12px 18px;font-size:15px;min-width:0;width:100%;}
    .modal-footer {padding:12px 14px 16px;}
}