/* Shared production shell and the approved public-site concept. */
.site-header { display:block; min-height:0; padding:0; border-bottom:4px solid #246c28; background:linear-gradient(180deg,#54ba22,#43a91f); }
.header-inner { width:min(1340px,calc(100% - 48px)); min-height:78px; margin-inline:auto; display:flex; align-items:center; gap:clamp(16px,2.4vw,30px); }
.header-inner .brand { flex:0 0 auto; min-width:197px; }
.header-inner .brand-mascot { flex:0 0 56px; width:56px; height:56px; }
.header-inner .brand-mascot > img { width:56px; height:56px; }
.header-inner .brand-word { min-height:38px; }
.header-inner .main-nav { flex:1; gap:clamp(12px,1.7vw,25px); }
.header-inner .main-nav a { position:relative; display:inline-flex; min-height:42px; align-items:center; color:#f1f6d9; font-size:12px; font-weight:800; white-space:nowrap; }
.header-inner .main-nav a[hidden] { display:none; }
.header-inner .main-nav a:hover,.header-inner .main-nav a[aria-current="page"] { color:#fff6c4; }
.header-inner .main-nav a[aria-current="page"]::after { position:absolute; right:0; bottom:1px; left:0; height:3px; border-radius:5px; background:#ffc941; content:""; }
.header-inner .header-actions { flex:0 0 auto; }
.header-inner .button { min-height:40px; border-radius:11px; }
.header-inner .nav-toggle { display:none; }
.mobile-nav-action { display:none!important; }
.site-footer { width:min(1260px,calc(100% - 48px)); margin:24px auto 0; padding:20px 0 28px; border-top:1px solid #d9e5c2; }
.site-footer nav { align-items:center; gap:9px 18px; }
.site-footer nav a,.footer-install-link { color:#315c3f; font-size:11px; font-weight:700; }
.footer-install-link { padding:0; border:0; background:transparent; font-family:inherit; cursor:pointer; }
.footer-install-link:hover,.site-footer nav a:hover { color:#287c2b; text-decoration:underline; text-underline-offset:3px; }
.pwa-install-dialog { position:fixed; width:min(430px,calc(100% - 28px)); max-width:none; padding:28px; border:2px solid #c8dd9e; border-radius:22px; color:#123f46; background:#fffdf2; box-shadow:0 24px 80px #173d2660; }
.pwa-install-dialog::backdrop { background:#122d25a8; backdrop-filter:blur(4px); }
.pwa-install-dialog form { position:absolute; top:10px; right:10px; margin:0; }
.pwa-dialog-close { display:grid; width:34px; height:34px; place-items:center; border:1px solid #d69a27; border-radius:50%; color:#664d16; background:#ffc941; font-size:23px; cursor:pointer; }
.pwa-app-icon { display:grid; width:66px; height:66px; place-items:center; margin:0 0 18px; border:1px solid #d6e2bd; border-radius:18px; background:#e9f3d4; }
.pwa-app-icon img { width:60px; height:60px; object-fit:contain; }
.pwa-install-dialog h2 { margin:7px 34px 8px 0; color:#174e37; font-size:25px; line-height:1.1; }
.pwa-install-dialog p { margin:0; color:#627c72; font-size:13px; line-height:1.6; }
.pwa-install-steps { display:grid; gap:9px; margin:17px 0 0; padding-left:19px; color:#4f6d53; font-size:12px; line-height:1.5; }
.pwa-dialog-action { width:100%; margin-top:17px; }
.welcome-hero { position:relative; min-height:255px; display:flex; align-items:center; overflow:hidden; padding:35px 40px; border:4px solid #fffef1; border-radius:24px; background:linear-gradient(100deg,#153e35e8,#174631ad 63%,#13382f57),url('../images/kwaakdam-havenplein-summer-evening.webp') center/cover; box-shadow:0 0 0 3px #38873c,0 11px 24px #315a3030; color:#fffdf0; }
.welcome-copy { position:relative; z-index:1; max-width:670px; }
.welcome-hero .hero-kicker { display:inline-flex; align-items:center; gap:9px; margin-bottom:0; color:#e9f2b6; font-size:11px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.welcome-hero .hero-kicker::before { width:21px; height:3px; border-radius:3px; background:#ffc941; content:""; }
.welcome-hero h1 { margin:9px 0 10px; color:#fffdf0; font-size:clamp(32px,4.2vw,46px); line-height:1.03; letter-spacing:-.045em; }
.welcome-hero p { max-width:560px; margin:0; color:#edf3dc; font-size:14px; line-height:1.6; }
.welcome-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.action-pill { min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 16px; border:1px solid #fff5cb; border-radius:10px; background:#fff1b9; box-shadow:0 3px 0 #cf9d36; color:#634d16; font-size:12px; font-weight:900; }
.action-pill.secondary { border-color:#bdd996; background:#3a922d; box-shadow:0 3px 0 #246c2b; color:white; }
.welcome-mark { position:absolute; right:6%; bottom:-4px; width:230px; height:240px; background:url('../images/skin-club-royal-regent-atlas-v1-yellow.png') 50% 50%/500% 300% no-repeat; filter:drop-shadow(0 10px 6px #1c3a2a49); opacity:.96; }
.auth-choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px; margin-top:22px; }
.auth-choice { display:flex; min-height:178px; flex-direction:column; align-items:flex-start; padding:22px; border:2px solid #cfdfae; border-radius:18px; background:#fffdf2; box-shadow:0 4px 0 #e1e9ca; transition:transform .18s ease,box-shadow .18s ease; }
.auth-choice:hover { transform:translateY(-2px); box-shadow:0 6px 0 #e1e9ca,0 13px 22px #294e2617; }
.auth-choice.register { background:linear-gradient(130deg,#eff6dd,#fffdf2); }
.choice-icon { display:grid; width:42px; height:42px; place-items:center; border:1px solid #d5e4ba; border-radius:13px; background:#edf5d8; font-size:20px; }
.auth-choice h2 { margin:13px 0 5px; color:#174e37; font-size:20px; }
.auth-choice p { margin:0; color:#657c70; font-size:12px; line-height:1.55; }
.choice-link { display:inline-flex; align-items:center; gap:7px; margin-top:auto; padding-top:17px; color:#2d8239; font-size:12px; font-weight:900; }
.auth-choice.register .choice-link { color:#725514; }
.benefit-row { display:grid; grid-template-columns:repeat(3,1fr); margin-top:16px; border:1px solid #dce7bf; border-radius:14px; background:#fffdf4; }
.benefit { display:flex; align-items:center; gap:10px; padding:12px 16px; color:#4c6b55; font-size:11px; font-weight:800; }
.benefit+.benefit { border-left:1px solid #e3ebd1; }
.benefit-icon { display:grid; width:28px; height:28px; flex:0 0 auto; place-items:center; border-radius:9px; background:#edf5d9; color:#358342; font-size:14px; }
.welcome-home { width:min(1260px,calc(100% - 48px)); margin:25px auto 0; }
.auth-page { width:min(1260px,calc(100% - 48px)); margin:0 auto; padding:16px 0 35px; }
.breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:14px 0; color:#6c8272; font-size:12px; font-weight:700; }
.breadcrumbs a { color:#348340; }
.portal-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,.88fr); gap:18px; align-items:stretch; }
.portal-story { position:relative; min-height:450px; display:flex; flex-direction:column; justify-content:end; overflow:hidden; padding:30px; border:4px solid #fffef0; border-radius:21px; background:linear-gradient(0deg,#113a30e8,#183f2f2e 75%),url('../images/kwaakdam-havenplein-summer-evening.webp') center/cover; box-shadow:0 0 0 2px #a9cf84,0 6px 0 #dfe8c8; color:white; }
.portal-story h1 { max-width:500px; margin:9px 0; color:#fff; font-size:clamp(31px,4vw,43px); line-height:1.02; letter-spacing:-.045em; }
.portal-story p { max-width:460px; margin:0; color:#f0f3df; font-size:13px; line-height:1.65; }
.auth-page .portal-card { padding:24px; border:2px solid #d0e0aa; border-radius:20px; background:#fffdf2; box-shadow:0 5px 0 #e0e8c8; }
.auth-page .portal-card h2 { margin:8px 0 5px; color:#174e37; font-size:25px; }
.auth-page .portal-card .portal-lead { margin:0 0 18px; color:#6b8072; font-size:12px; line-height:1.5; }
.offline-page { min-height:100vh; display:grid; place-items:center; padding:24px; }
.offline-page main { width:min(520px,100%); padding:32px; border:2px solid #d0dea8; border-radius:22px; background:#fffdf2; text-align:center; box-shadow:0 6px 0 #dce7c2; }
.offline-mark { display:grid; width:92px; height:92px; place-items:center; margin:0 auto 18px; border-radius:25px; background:#e9f3d4; }
.offline-mark img { width:88px; height:88px; object-fit:contain; }
.offline-page h1 { margin:8px 0; color:#174e37; font-size:clamp(28px,5vw,38px); }
.offline-page p { margin:0 0 20px; color:#627c72; font-size:14px; line-height:1.65; }
.account-shop-links { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.account-shop-links a { display:inline-flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid #cdddac; border-radius:10px; background:#f5f8e6; color:#3d7346; font-size:11px; font-weight:900; }
.account-shop-links a:hover { border-color:#96c374; background:#eff6dc; }
.account-management-intro { max-width:820px; }
.inline-auth-switch { margin:17px 0 0; color:#627c72; font-size:12px; text-align:center; }
.inline-auth-switch a { color:#287c2b; font-weight:900; text-decoration:underline; text-underline-offset:3px; }
@media(max-width:1000px) { .header-inner { width:min(100% - 30px,1340px); gap:15px; }.header-inner .brand { min-width:175px; }.header-inner .main-nav { gap:12px; }.header-inner .main-nav a { font-size:11px; }.header-inner .brand-word small { display:none; } }
@media(max-width:760px) { .welcome-hero { min-height:235px; padding:26px 22px; }.welcome-mark { right:5px; bottom:-3px; width:155px; height:175px; opacity:.72; }.auth-choice-grid,.portal-layout { grid-template-columns:1fr; }.portal-story { min-height:230px; }.benefit-row { grid-template-columns:1fr; }.benefit+.benefit { border-top:1px solid #e3ebd1; border-left:0; } }
@media(max-width:680px) { .header-inner { position:relative; width:calc(100% - 28px); min-height:70px; gap:8px; }.header-inner .brand { min-width:auto; }.header-inner .brand-mascot { flex-basis:48px; width:48px; height:48px; }.header-inner .brand-mascot > img { width:50px; height:50px; }.header-inner .brand-word { min-height:34px; margin-left:-12px; padding:2px 5px 2px 17px; }.header-inner .brand-word strong { font-size:16px; }.header-inner .main-nav { position:absolute; top:calc(100% + 4px); right:0; left:0; display:none; align-items:stretch; flex-direction:column; gap:2px; padding:9px; border:1px solid #cbdca9; border-radius:0 0 15px 15px; background:#fff8df; box-shadow:0 15px 25px #1f4f2221; }.header-inner .main-nav.is-open { display:flex; }.header-inner .main-nav a { min-height:42px; padding:10px 12px; border-radius:9px; color:#315c3f; font-size:12px; }.header-inner .main-nav a[aria-current="page"]::after { right:12px; left:12px; bottom:2px; }.header-inner .mobile-nav-action { display:flex!important; }.header-inner .header-actions { display:none; }.header-inner .nav-toggle { display:grid; width:38px; height:38px; align-content:center; justify-items:center; gap:4px; margin-left:auto; border:1px solid #d5e4ba; border-radius:11px; background:#fff8df; cursor:pointer; }.header-inner .nav-toggle span { width:16px; height:2px; border-radius:2px; background:#216b29; }.welcome-home,.auth-page { width:calc(100% - 28px); }.welcome-mark { display:none; }.site-footer { width:calc(100% - 28px); }.portal-layout { gap:13px; }.portal-story { min-height:220px; padding:23px; }.auth-page .portal-card { padding:20px; }.footer-main { align-items:flex-start; flex-direction:column; gap:8px; }.site-footer nav { gap:10px 14px; } }
@media(max-width:680px) { .header-inner .mobile-nav-action[hidden] { display:none!important; } }