:root { --navy:#12243d; --blue:#315edb; --gold:#c9942e; --ink:#172235; --muted:#6f7c8f; --line:#e4e9f0; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#f8fafc; font-family:Manrope,"Segoe UI",sans-serif; }
button,a { font:inherit; }
.display-navbar { min-height:92px; background:#fff; border-bottom:1px solid var(--line); }
.display-brand { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; }
.display-brand > span { display:grid; width:46px; height:46px; place-items:center; overflow:hidden; color:#fff; background:linear-gradient(135deg,#557cf0,#294fbf); border-radius:13px; font-size:1.25rem; box-shadow:0 8px 22px rgba(49,94,219,.2); }
.display-brand img { width:100%; height:100%; object-fit:contain; }
.display-brand strong,.display-brand small { display:block; }
.display-brand strong { letter-spacing:.12em; line-height:1.1; }
.display-brand small { margin-top:3px; color:#8290a3; font-size:.58rem; }
.display-navbar .nav-link { margin:0 5px; padding:13px 10px !important; color:#536176; border:0; background:transparent; font-size:.73rem; font-weight:650; }
.display-navbar .nav-link:hover,.display-navbar .nav-link.active { color:var(--blue); }
.search-menu { display:flex; align-items:center; gap:6px; }
.btn-manager { margin-left:15px; padding:11px 15px; color:#fff; background:var(--navy); border-radius:9px; font-size:.7rem; font-weight:700; }
.btn-manager:hover { color:#fff; background:var(--blue); }
.display-main { min-height:calc(100vh - 185px); }
.display-intro { padding:68px 0 48px; background:#fff; }
.intro-row { display:flex; align-items:flex-end; justify-content:space-between; gap:50px; }
.display-kicker { color:var(--blue); font-size:.68rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.display-intro h1 { margin:10px 0 0; font-size:clamp(2.5rem,5vw,4.8rem); font-weight:800; letter-spacing:-.06em; line-height:.98; }
.display-intro h1 em { color:var(--blue); font-family:"DM Serif Display",serif; font-weight:400; }
.intro-summary { display:flex; max-width:310px; align-items:center; gap:15px; padding:16px 18px; background:#f3f6fc; border:1px solid #e3e9f3; border-radius:14px; }
.intro-summary strong { color:var(--blue); font-size:2rem; }
.intro-summary span { color:var(--muted); font-size:.68rem; line-height:1.5; }
.display-gallery { padding:5px 0 85px; background:linear-gradient(#fff 0,#f7f9fc 180px); }
.display-grid { display:grid; gap:34px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.display-card { overflow:hidden; padding:0; text-align:left; background:transparent; border:0; border-radius:0; }
.display-card-label { display:flex; margin-bottom:13px; align-items:center; justify-content:space-between; gap:10px; color:#4d5a6c; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.curation-pill { display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:999px; font-size:.56rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.curation-pill.yes { color:#0f7b53; background:#def7ed; border:1px solid #b8ebd8; }
.curation-pill.no { color:#9b6a12; background:#fff3d2; border:1px solid #f1d796; }
.display-photo { position:relative; display:grid; min-height:430px; place-items:center; overflow:hidden; color:#7188bd; background:#dde6f5 center/cover; border-radius:3px; font-size:7rem; }
.display-photo::after { position:absolute; inset:0; content:""; background:linear-gradient(to top,rgba(13,30,52,.42),transparent 48%); opacity:.7; transition:.2s; }
.display-card:hover .display-photo::after { opacity:1; }
.no-display-photo { background:linear-gradient(145deg,#eef3fc,#cedaf0); }
.view-detail { position:absolute; z-index:2; right:18px; bottom:18px; padding:8px 11px; color:#fff; background:rgba(15,36,62,.72); border:1px solid rgba(255,255,255,.2); border-radius:7px; font-size:.62rem; backdrop-filter:blur(7px); opacity:0; transform:translateY(5px); transition:.2s; }
.display-card:hover .view-detail { opacity:1; transform:none; }
.display-card-copy { display:block; padding:18px 2px 4px; }
.display-award { display:block; color:var(--gold); font-size:.72rem; font-weight:800; }
.display-card-copy strong { display:block; margin:4px 0 5px; color:var(--ink); font-size:1.5rem; font-weight:800; letter-spacing:-.025em; }
.display-card-copy small { display:block; color:#59677b; font-size:.75rem; line-height:1.6; }
.display-empty { padding:90px 30px; text-align:center; background:#fff; border:1px solid var(--line); }
.display-empty > span { display:grid; width:75px; height:75px; margin:0 auto 18px; place-items:center; color:var(--blue); background:#edf2ff; border-radius:50%; font-size:1.8rem; }
.display-empty h2 { font-size:1.5rem; }
.display-empty p { color:var(--muted); font-size:.75rem; }
.display-footer { padding:35px 0; color:#8a96a6; background:#fff; border-top:1px solid var(--line); }
.display-footer .container { display:flex; align-items:flex-start; justify-content:space-between; gap:30px; }
.display-footer > div > strong { color:var(--ink); letter-spacing:.14em; }
.display-footer div > div { text-align:right; }
.display-footer span,.display-footer small { display:block; font-size:.67rem; }
.display-footer small { margin-top:5px; }
.detail-modal .modal-content,.search-modal .modal-content { overflow:hidden; border:0; border-radius:20px; box-shadow:0 30px 90px rgba(14,31,55,.25); }
.detail-close { position:absolute; z-index:5; top:18px; right:18px; padding:10px; background-color:#fff; border-radius:50%; opacity:1; }
.detail-grid { display:grid; min-height:550px; grid-template-columns:.82fr 1.18fr; }
.detail-photo { display:grid; place-items:center; color:#6e87c0; background:linear-gradient(145deg,#edf2fc,#ccd9ee) center/cover; font-size:7rem; }
.detail-photo.has-photo i { display:none; }
.detail-copy { display:flex; padding:40px 42px; flex-direction:column; justify-content:center; }
.detail-topline { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.detail-topline > span { color:var(--blue); font-size:.67rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.detail-copy h2 { margin:6px 0 10px; font-size:2rem; font-weight:800; }
.detail-award { display:flex; align-items:center; gap:8px; color:#a77315; }
.detail-copy h3 { margin:18px 0; padding:14px 16px; color:#1a2a43; background:#f7f9fd; border:1px solid #e2e8f2; border-radius:13px; font-size:1rem; line-height:1.45; }
.detail-copy dl { display:grid; margin:0; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.detail-copy dl div { padding:11px 12px; background:#f5f7fb; border:1px solid #e6ebf3; border-radius:10px; }
.detail-copy dt { color:#8a96a6; font-size:.56rem; text-transform:uppercase; }
.detail-copy dd { margin:4px 0 0; font-size:.68rem; font-weight:700; }
.search-modal-head { display:flex; align-items:center; gap:13px; padding:25px 27px; border-bottom:1px solid var(--line); }
.search-modal-head > span { display:grid; width:44px; height:44px; place-items:center; color:#fff; background:var(--blue); border-radius:12px; }
.search-modal-head h2,.search-modal-head p { margin:0; }
.search-modal-head h2 { font-size:1.1rem; font-weight:800; }
.search-modal-head p { margin-top:3px; color:var(--muted); font-size:.65rem; }
.search-modal-head .btn-close { margin-left:auto; }
.search-form { display:flex; gap:10px; padding:22px 27px; background:#f8fafd; }
.search-form > div { display:flex; flex:1; align-items:center; gap:10px; padding:0 14px; background:#fff; border:1px solid #dfe5ee; border-radius:10px; }
.search-form input { width:100%; min-height:45px; border:0; outline:0; font-size:.72rem; }
.search-form button { padding:0 20px; color:#fff; background:var(--blue); border:0; border-radius:10px; font-size:.7rem; font-weight:700; }
.search-results { max-height:410px; padding:20px 27px 27px; overflow:auto; }
.search-initial { padding:45px; color:#8a96a6; text-align:center; }
.search-initial i { font-size:1.7rem; }
.search-initial p { margin:8px 0 0; font-size:.7rem; }
.search-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; padding:12px 14px; background:#f4f7fc; border:1px solid #e1e7f0; border-radius:12px; }
.search-summary strong,.search-summary span { display:block; }
.search-summary strong { font-size:.76rem; }
.search-summary span { color:var(--muted); font-size:.62rem; }
.search-result-card { position:relative; display:grid; gap:14px; margin-bottom:10px; padding:16px 16px 16px 17px; background:#fff; border:1px solid var(--line); border-radius:11px; grid-template-columns:34px .8fr 1.2fr auto; }
.search-number { display:grid; width:28px; height:28px; place-items:center; color:#315edb; background:#edf2ff; border-radius:50%; font-size:.65rem; font-weight:800; }
.search-result-card span,.search-result-card strong,.search-result-card small { display:block; }
.search-result-card span { color:var(--blue); font-size:.57rem; font-weight:800; text-transform:uppercase; }
.search-result-card strong { margin-top:3px; font-size:.74rem; }
.search-result-card small,.search-result-card p { margin:3px 0 0; color:var(--muted); font-size:.62rem; }
.result-badges { display:flex; align-items:flex-end; flex-direction:column; gap:6px; }
.result-status,.result-curation { padding:5px 8px; border-radius:99px; font-size:.58rem; white-space:nowrap; }
.result-status { color:#a36f13; background:#fff3d5; }
.result-status.published { color:#168357; background:#ddf6ec; }
.result-curation.yes { color:#0f7b53; background:#def7ed; }
.result-curation.no { color:#9b6a12; background:#fff3d2; }
.register-back { display:inline-flex; align-items:center; gap:7px; margin-left:auto; color:#536176; font-size:.72rem; font-weight:700; text-decoration:none; }
.register-main { padding:65px 0 90px; background:linear-gradient(180deg,#f1f5fc,#f8fafc 340px); }
.register-heading { max-width:760px; margin-bottom:34px; }
.register-heading > span { color:var(--blue); font-size:.67rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.register-heading h1 { margin:7px 0 9px; font-size:clamp(2.2rem,4vw,3.6rem); font-weight:800; letter-spacing:-.05em; }
.register-heading p { margin:0; color:var(--muted); font-size:.78rem; line-height:1.7; }
.public-achievement-form { display:grid; gap:22px; }
.register-card { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 12px 35px rgba(28,47,75,.055); }
.register-card header { display:flex; align-items:center; gap:14px; padding:20px 23px; background:#fbfcff; border-bottom:1px solid var(--line); }
.register-card header > span { display:grid; width:38px; height:38px; place-items:center; color:#fff; background:var(--blue); border-radius:11px; font-size:.67rem; font-weight:800; }
.register-card header h2,.register-card header p { margin:0; }
.register-card header h2 { font-size:.9rem; font-weight:800; }
.register-card header p { margin-top:3px; color:var(--muted); font-size:.62rem; }
.register-card header > i { margin-left:auto; color:#a4b0c2; font-size:1.35rem; }
.register-grid { display:grid; gap:18px; padding:24px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.register-grid .span-2 { grid-column:span 2; }
.register-grid label { display:block; margin-bottom:7px; color:#46556b; font-size:.66rem; font-weight:750; }
.register-grid input,.register-grid select { width:100%; min-height:47px; padding:0 13px; color:var(--ink); background:#fafbfd; border:1px solid #dce3ed; border-radius:9px; outline:0; font-size:.72rem; }
.register-grid input:focus,.register-grid select:focus { background:#fff; border-color:#6f8ff0; box-shadow:0 0 0 3px rgba(49,94,219,.09); }
.register-grid input.public-file { padding:10px; }
.register-grid small { display:block; margin-top:6px; color:#8b97a8; font-size:.59rem; }
.register-actions { position:sticky; z-index:10; bottom:14px; display:flex; justify-content:flex-end; gap:10px; padding:14px; background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:14px; box-shadow:0 15px 40px rgba(22,42,70,.12); backdrop-filter:blur(12px); }
.register-actions a,.register-actions button { min-height:45px; padding:0 18px; border-radius:9px; font-size:.7rem; font-weight:750; text-decoration:none; }
.register-actions a { display:inline-flex; align-items:center; color:#59677a; background:#eef1f6; }
.register-actions button { color:#fff; background:var(--blue); border:0; }
@media(max-width:991.98px){.display-navbar .navbar-collapse{margin-top:12px;padding:15px;background:#fff;border-top:1px solid var(--line)}.btn-manager{margin:8px 0 0}.intro-row{align-items:flex-start;flex-direction:column}.display-grid{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr}.detail-photo{min-height:380px}.display-footer .container{flex-direction:column}.display-footer div>div{text-align:left}}
@media(max-width:991.98px){.register-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:575.98px){.display-intro{padding:45px 0 35px}.display-intro h1{font-size:2.65rem}.display-photo{min-height:330px}.detail-copy{padding:38px 24px}.detail-copy dl{grid-template-columns:1fr}.detail-topline{align-items:flex-start;flex-direction:column}.search-form{flex-direction:column}.search-form button{min-height:44px}.search-summary{align-items:flex-start;flex-direction:column}.search-result-card{padding-right:16px;grid-template-columns:1fr}.result-badges{align-items:flex-start}.display-footer{padding:28px 0}.register-main{padding:42px 0 70px}.register-grid{grid-template-columns:1fr}.register-grid .span-2{grid-column:auto}.register-card header{padding:17px}.register-grid{padding:18px}.register-back{font-size:0}.register-back i{font-size:1.1rem}}

/* Full-screen rotating achievement display */
.display-page { display:flex; height:100vh; min-height:600px; overflow:hidden; flex-direction:column; }
.display-page .display-navbar { min-height:82px; flex:0 0 82px; }
.display-page .display-main { min-height:0; flex:1; }
.display-page .display-gallery { height:100%; padding:16px 0 13px; background:radial-gradient(circle at 50% -30%,#fff 0,#f4f7fc 68%); }
.display-page .display-gallery > .container { height:100%; }
.display-showcase { display:flex; height:100%; min-height:0; flex-direction:column; }
.showcase-toolbar { display:flex; min-height:32px; align-items:center; gap:13px; margin-bottom:9px; }
.showcase-count { display:flex; align-items:baseline; gap:4px; color:var(--blue); font-weight:800; }
.showcase-count span { font-size:1rem; }
.showcase-count small { color:#9ba6b6; font-size:.58rem; }
.showcase-note { color:#748197; font-size:.61rem; }
.showcase-note i { margin-right:5px; color:#c9942e; }
.showcase-nav { display:flex; gap:6px; margin-left:auto; }
.showcase-nav button { display:grid; width:30px; height:30px; place-items:center; color:#536177; background:#fff; border:1px solid #dfe5ee; border-radius:50%; font-size:.72rem; transition:.2s; }
.showcase-nav button:hover { color:#fff; background:var(--blue); border-color:var(--blue); }
.display-stage { position:relative; min-height:0; flex:1; }
.display-slide { position:absolute; inset:0; display:grid; gap:22px; grid-template-columns:repeat(3,minmax(0,1fr)); opacity:0; visibility:hidden; pointer-events:none; }
.display-slide.is-active { z-index:2; opacity:1; visibility:visible; pointer-events:auto; }
.display-slide:has(.display-card:only-child) { grid-template-columns:minmax(0,1fr); }
.display-slide:has(.display-card:only-child) .display-card { width:min(620px,100%); justify-self:center; }
.display-slide:has(.display-card:nth-child(2):last-child) { width:min(860px,100%); margin-inline:auto; grid-template-columns:repeat(2,minmax(0,1fr)); }
.display-page .display-card { display:grid; height:100%; min-height:0; grid-template-rows:auto minmax(0,1fr) auto; }
.display-page .display-card-label { margin-bottom:7px; font-size:.65rem; }
.display-page .display-photo { min-height:0; border-radius:5px; }
.display-page .display-card-copy { padding:9px 2px 0; }
.display-page .display-award { font-size:.62rem; }
.display-page .display-card-copy strong { margin:2px 0 2px; font-size:1.15rem; }
.display-page .display-card-copy small { overflow:hidden; font-size:.66rem; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.display-page .display-footer { display:flex; min-height:66px; align-items:center; padding:0; flex:0 0 66px; }
.display-page .display-footer .container { align-items:center; }
.rotation-progress { height:2px; margin-top:9px; overflow:hidden; background:#e1e6ee; border-radius:99px; }
.rotation-progress span { display:block; width:0; height:100%; background:linear-gradient(90deg,#315edb,#77a0ff); }
.rotation-progress.is-running span { animation:displayProgress 7s linear forwards; }
.display-page .display-empty { display:flex; height:100%; align-items:center; padding:30px; flex-direction:column; justify-content:center; }

.display-slide.motion-sweep.is-active .display-card:first-child { animation:sweepFromLeft .8s cubic-bezier(.2,.75,.25,1) both; }
.display-slide.motion-sweep.is-active .display-card:last-child { animation:sweepFromRight .8s cubic-bezier(.2,.75,.25,1) both; }
.display-slide.motion-zoom.is-active .display-card { animation:softZoom .9s cubic-bezier(.2,.75,.25,1) both; }
.display-slide.motion-zoom.is-active .display-card:nth-child(2) { animation-delay:.12s; }
.display-slide.motion-zoom.is-active .display-card:nth-child(3) { animation-delay:.24s; }
.display-slide.motion-rise.is-active .display-card { animation:riseReveal .85s cubic-bezier(.2,.75,.25,1) both; }
.display-slide.motion-rise.is-active .display-card:nth-child(2) { animation-delay:.14s; }
.display-slide.motion-rise.is-active .display-card:nth-child(3) { animation-delay:.28s; }
.display-slide.is-active .display-photo::before { position:absolute; z-index:3; inset:0; content:""; pointer-events:none; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%); transform:translateX(-120%); animation:lightSweep 1.25s .3s ease both; }
@keyframes sweepFromLeft { from{opacity:0;transform:translateX(-7%) scale(.98)} to{opacity:1;transform:none} }
@keyframes sweepFromRight { from{opacity:0;transform:translateX(7%) scale(.98)} to{opacity:1;transform:none} }
@keyframes softZoom { from{opacity:0;transform:scale(.9);filter:blur(5px)} to{opacity:1;transform:scale(1);filter:none} }
@keyframes riseReveal { from{opacity:0;transform:translateY(9%)} to{opacity:1;transform:none} }
@keyframes lightSweep { to{transform:translateX(120%)} }
@keyframes displayProgress { to{width:100%} }

@media(max-width:991.98px){
    .display-page { height:auto; min-height:100vh; overflow:auto; }
    .display-page .display-main { min-height:0; flex:0 0 auto; }
    .display-page .display-gallery { height:auto; min-height:0; padding:22px 0 45px; }
    .display-page .display-gallery > .container { height:auto; }
    .display-showcase { height:auto; }
    .showcase-toolbar { align-items:flex-start; flex-wrap:wrap; margin-bottom:16px; }
    .showcase-note { flex:1 1 100%; line-height:1.5; }
    .display-stage { position:static; min-height:0; }
    .display-slide { position:relative; inset:auto; display:none; gap:18px; grid-template-columns:1fr; opacity:1; visibility:visible; pointer-events:auto; }
    .display-slide.is-active { display:grid; }
    .display-slide .display-card:not(:first-child) { display:grid; }
    .display-slide:has(.display-card:only-child),
    .display-slide:has(.display-card:nth-child(2):last-child) { width:100%; margin-inline:0; grid-template-columns:1fr; }
    .display-slide:has(.display-card:only-child) .display-card { width:100%; }
    .display-page .display-card { height:auto; min-height:0; padding:14px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 12px 30px rgba(18,36,61,.08); grid-template-rows:auto auto auto; }
    .display-page .display-card-label { align-items:flex-start; flex-wrap:wrap; margin-bottom:10px; font-size:.62rem; }
    .display-page .display-photo { min-height:300px; border-radius:14px; }
    .display-page .display-card-copy { padding:12px 0 0; }
    .display-page .display-card-copy strong { font-size:1.18rem; white-space:normal; }
    .display-page .display-card-copy small { white-space:normal; }
    .view-detail { opacity:1; transform:none; }
    .detail-copy dl { grid-template-columns:1fr 1fr; }
    .display-page .display-footer { min-height:95px; padding:20px 0; flex-basis:auto; }
}

@media(max-width:575.98px){
    .display-page .display-navbar { min-height:76px; flex-basis:auto; }
    .display-brand small { max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .display-page .display-gallery { padding:16px 0 32px; }
    .display-page .display-photo { min-height:260px; font-size:4.5rem; }
    .display-page .display-card { padding:12px; border-radius:16px; }
    .curation-pill { font-size:.52rem; }
}
