:root{--red:#d20a11;--red-dark:#ad0006;--ink:#20252b;--muted:#69717b;--line:#e8e8ea;--bg:#f5f5f6;--white:#fff}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink)}a{color:inherit}.topbar{background:linear-gradient(90deg,var(--red-dark),var(--red));color:#fff;box-shadow:0 2px 12px #0002}.nav{max-width:1400px;margin:auto;min-height:78px;padding:0 28px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;margin-right:20px}.brand img{height:58px;filter:brightness(0) invert(1)}.navlinks{display:flex;gap:10px;flex:1}.navlinks a,.userlinks a,.logout{padding:12px 14px;border-radius:9px;text-decoration:none;font-weight:700}.navlinks a:hover,.navlinks a.active{background:#ffffff18}.userlinks{display:flex;align-items:center;gap:8px}.logout{background:#fff;color:var(--red);border:0;cursor:pointer}.hero{background:linear-gradient(110deg,#fff 0%,#fff 58%,#f8dede 100%);border-bottom:1px solid #eee}.hero-inner{max-width:1400px;margin:auto;min-height:175px;padding:30px 44px;display:flex;align-items:center;gap:38px}.hero-logo{width:245px;max-height:110px;object-fit:contain}.hero h1{margin:0;color:var(--red);font-size:32px}.hero p{font-size:19px;color:#535c66;margin:8px 0 0}.layout{max-width:1400px;margin:22px auto;padding:0 28px;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px}.panel{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 4px 18px #0000000d}.main-panel{padding:20px}.section-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 18px;color:var(--red);font-size:27px}.event-card{border:1px solid #e5e5e7;border-radius:14px;padding:18px 20px;margin:12px 0;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:#fff}.event-card h2{margin:0 0 10px;color:var(--red);font-size:21px}.event-meta{display:grid;gap:6px;color:#4c545e}.event-meta span{display:block}.event-action{text-align:right;min-width:220px}.count{color:#5c6570;margin-bottom:12px}.btn{display:inline-block;background:var(--red);color:#fff!important;text-decoration:none;border:1px solid var(--red);border-radius:9px;padding:12px 18px;font-weight:800;cursor:pointer}.btn:hover{background:var(--red-dark)}.btn-outline{background:#fff;color:var(--red)!important}.btn-danger{background:#4d5156;border-color:#4d5156}.status{display:inline-block;background:#e9f7ec;color:#187436;border-radius:999px;padding:6px 10px;font-weight:700;margin-bottom:8px}.sidebar{display:grid;gap:16px;align-content:start}.side-card{padding:18px}.side-card h3{color:var(--red);font-size:20px;margin:0 0 12px}.side-menu a{display:block;text-decoration:none;padding:11px 10px;border-radius:8px;border-bottom:1px solid #f1f1f1}.side-menu a:hover{background:#fff0f0;color:var(--red)}.next-card{background:linear-gradient(145deg,var(--red),var(--red-dark));color:#fff;border:0}.next-card h3{color:#fff}.next-card .btn{background:#fff;color:var(--red)!important;border-color:#fff;width:100%;text-align:center}.detail{padding:26px}.detail h1{color:var(--red);margin-top:0}.back{display:inline-block;margin-bottom:15px;color:var(--red);font-weight:700;text-decoration:none}.attendees{list-style:none;padding:0;margin:0}.attendees li{padding:10px 0;border-bottom:1px solid var(--line)}textarea,input{width:100%;max-width:600px;padding:11px;border:1px solid #cfd3d8;border-radius:8px}.login-wrap{max-width:440px;margin:70px auto;padding:28px}.login-wrap img{display:block;max-width:240px;margin:0 auto 24px}.member-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.member{padding:13px;border:1px solid var(--line);border-radius:10px}.muted{color:var(--muted)}@media(max-width:900px){.nav{flex-wrap:wrap;padding:12px 18px}.navlinks{order:3;width:100%;overflow:auto}.hero-inner{padding:24px;min-height:130px}.hero-logo{width:170px}.layout{grid-template-columns:1fr;padding:0 14px}.sidebar{grid-row:2}.event-card{grid-template-columns:1fr}.event-action{text-align:left}.member-grid{grid-template-columns:1fr}.user-name{display:none}}@media(max-width:560px){.hero-inner{display:block}.hero-logo{margin-bottom:15px}.hero h1{font-size:25px}.main-panel{padding:14px}.section-title{font-size:23px}.brand img{height:45px}}
.event-card{grid-template-columns:210px minmax(0,1fr) auto}.event-image-wrap{width:210px;height:132px;border-radius:12px;overflow:hidden;background:#f1f1f1}.event-image{width:100%;height:100%;object-fit:cover;display:block}.event-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#f7dede,#fff);color:var(--red);font-weight:800}.event-placeholder span{font-size:38px}.event-placeholder small{margin-top:5px}.event-content{min-width:0}.detail-image{width:100%;max-height:420px;object-fit:cover;border-radius:13px;margin-bottom:22px}@media(max-width:900px){.event-card{grid-template-columns:160px 1fr}.event-action{grid-column:1/-1}.event-image-wrap{width:160px;height:110px}}@media(max-width:560px){.event-card{grid-template-columns:1fr}.event-image-wrap{width:100%;height:190px}.event-action{grid-column:auto}}
.svg-icon{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em;flex:none}.title-icon{width:1.05em;height:1.05em}.event-meta span{display:flex;align-items:center;gap:7px}.side-card h3{display:flex;align-items:center;gap:7px}.side-menu a{display:flex;align-items:center;gap:9px}.next-card p{display:flex;align-items:center;gap:7px}.profile-form{display:grid;gap:9px;max-width:650px}.profile-form label{font-weight:800;margin-top:7px}.profile-form .btn{margin-top:12px;width:max-content}.notice-success{padding:12px 14px;background:#e9f7ec;color:#187436;border:1px solid #bfe5c8;border-radius:9px;margin:15px 0}.helptext{font-size:.9rem;color:var(--muted);margin-top:-4px}.helptext ul{margin:5px 0 8px;padding-left:20px}.field-error{color:#a40000;font-weight:700;font-size:.92rem}.profile-form input:disabled{background:#f0f1f2;color:#68717a}

/* V3.7 mobile navigation */
.mobile-menu-toggle,.mobile-menu{display:none}
@media(max-width:760px){
 .nav{min-height:72px;padding:10px 16px;flex-wrap:nowrap;justify-content:space-between;gap:12px}
 .brand{margin:0}.brand img{height:48px}
 .navlinks,.userlinks{display:none}
 .mobile-menu-toggle{display:flex;width:48px;height:44px;border:1px solid #ffffff55;border-radius:10px;background:#ffffff16;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer}
 .mobile-menu-toggle span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:.2s}
 .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
 .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
 .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
 .mobile-menu{display:block;background:var(--red-dark);border-top:1px solid #ffffff33;padding:8px 14px 16px;box-shadow:0 10px 18px #0003}
 .mobile-menu[hidden]{display:none}
 .mobile-menu a,.mobile-menu button{display:block;width:100%;padding:13px 12px;color:#fff;text-decoration:none;font:inherit;font-weight:750;text-align:left;border:0;border-bottom:1px solid #ffffff24;background:transparent}
 .mobile-menu form{margin:8px 0 0}.mobile-menu form button{background:#fff;color:var(--red);border-radius:9px;text-align:center;border:0}
}
/* V4.0 */
.event-image,.detail-image{object-position:var(--pos-x,50%) var(--pos-y,50%);transform:scale(var(--zoom,1));transform-origin:center}.detail-image-wrap{overflow:hidden;border-radius:13px;margin-bottom:22px;max-height:420px}.detail-image-wrap .detail-image{margin:0;border-radius:0}.interest-box{margin-top:22px;padding:18px;border:1px solid var(--line);border-radius:12px;background:#fafafa}.interest-box h2{margin:0 0 8px;color:var(--red)}.check-row{display:flex!important;align-items:center;gap:10px;padding:9px 0;margin:0!important}.check-row input{width:auto;max-width:none;transform:scale(1.15)}

/* V4.0.1 media display bugfix: keep the real <img> visible while crop/zoom is applied. */
.event-image-wrap,.detail-image-wrap{position:relative;overflow:hidden}
.event-image-wrap>img.event-image,.detail-image-wrap>img.detail-image{position:absolute;left:50%;top:50%;max-width:none;max-height:none;transform:translate(-50%,-50%);object-fit:cover;display:block}
.detail-image-wrap{height:min(420px,52vw);min-height:260px}
@media(max-width:560px){.detail-image-wrap{height:240px;min-height:0}}