/* NOVA v2: standalone app-inspired interface, desktop dashboard + mobile app shell. */
html[data-theme="dark"],html[data-theme="light"]{--background:#08121a;--surface:#101e29;--surface-soft:#162936;--surface-hover:#203c49;--text:#f2fafb;--text-soft:#9db4c1;--border:#294553;--primary:#65e4d1;--primary-soft:rgba(101,228,209,.15);--green:#74dfb1;--green-soft:rgba(116,223,177,.13);--red:#ff8a99;--red-soft:rgba(255,138,153,.12);--yellow:#f4cf8a;--radius:20px;--shadow:0 18px 45px rgba(0,0,0,.23);color-scheme:dark}
body{background:radial-gradient(ellipse at 70% -15%,rgba(22,115,127,.21),transparent 48%),#08121a}
.app-header{background:rgba(8,20,29,.93);border-bottom:1px solid #24434b;backdrop-filter:blur(18px)}
.app-header .header-inner{width:min(calc(100% - 44px),1500px);min-height:76px}
.brand-title-row h1{font-size:clamp(1.1rem,1.6vw,1.45rem);letter-spacing:-.035em}
.brand-mark{filter:drop-shadow(0 0 12px rgba(101,228,209,.35))}
.version{background:rgba(101,228,209,.1);border:1px solid rgba(101,228,209,.2)}
.app-header .theme-toggle{display:none}
/* Real aligned dashboard tracks, with equal-height cards in each row. */
main.container{width:min(calc(100% - 44px),1500px);max-width:none;display:grid;grid-template-columns:minmax(320px,410px) minmax(0,1fr);grid-template-areas:"intro intro" "selector summary" "settings route";grid-template-rows:auto auto minmax(440px,auto);gap:20px 24px;align-items:stretch;margin:24px auto 56px}
main.container>.seo-intro{grid-area:intro;max-width:none;margin:0;padding:0 3px;color:var(--text-soft);font-size:.9rem}
main.container>.event-selector-panel{grid-area:selector}
main.container>.event-summary{grid-area:summary}
main.container>.settings-panel{grid-area:settings}
main.container>.route-section{grid-area:route}
main.container>.event-selector-panel,main.container>.event-summary,main.container>.settings-panel,main.container>.route-section{min-width:0;width:100%;height:100%;margin:0;border:1px solid rgba(116,176,188,.22);border-radius:24px;background:linear-gradient(155deg,#152d3a,#0e202c);box-shadow:0 16px 42px rgba(0,0,0,.19);overflow:visible}
main.container>.event-summary{background:radial-gradient(ellipse at 100% 0%,rgba(101,228,209,.16),transparent 58%),linear-gradient(130deg,#1b3c49,#10232e);border-color:rgba(101,228,209,.34)}
main.container>.settings-panel{position:relative;top:auto;align-self:stretch}
main.container>.route-section{min-height:440px}
main.container .section-title,main.container .settings-toggle,main.container .route-toolbar h2{letter-spacing:-.025em}
main.container .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
main.container input,main.container select,main.container textarea{min-height:49px;border-radius:13px;background:#0b222f;border:1px solid #355767;color:#f2fbfc}
main.container input:focus,main.container select:focus,main.container textarea:focus{border-color:#65e4d1;box-shadow:0 0 0 3px rgba(101,228,209,.16)}
main.container button{border-radius:13px}
main.container .primary-button{background:linear-gradient(120deg,#65e4d1,#a4ebd6);color:#07232a;border-color:transparent;font-weight:800}
.app-footer .container{max-width:1500px}
.nova-mobile-nav{display:none}
@media(min-width:1150px){main.container{grid-template-columns:minmax(370px,440px) minmax(0,1fr)}}
@media(max-width:1000px){main.container{grid-template-columns:minmax(285px,36%) minmax(0,1fr);gap:14px}}
@media(max-width:760px){
 body{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
 .app-header{position:sticky;top:0}
 .app-header .header-inner{width:calc(100% - 26px);min-height:64px}
 .brand-title-row h1{font-size:1.02rem}
 .brand-subtitle{font-size:.68rem}
 main.container{width:calc(100% - 22px);display:flex;flex-direction:column;gap:14px;margin:14px auto 24px}
 main.container>.seo-intro{display:none}
 main.container>.event-summary{order:0}
 main.container>.event-selector-panel{order:1}
 main.container>.settings-panel{order:2}
 main.container>.route-section{order:3;min-height:0}
 main.container>.event-selector-panel,main.container>.event-summary,main.container>.settings-panel,main.container>.route-section{height:auto;border-radius:20px;box-shadow:0 10px 32px rgba(0,0,0,.16)}
 main.container .form-grid{grid-template-columns:minmax(0,1fr)}
 main.container input,main.container select{min-height:50px;font-size:16px}
 .nova-mobile-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;bottom:0;left:0;right:0;z-index:100;padding:9px 8px calc(9px + env(safe-area-inset-bottom,0px));background:rgba(11,27,37,.97);border-top:1px solid rgba(101,228,209,.26);backdrop-filter:blur(18px)}
 .nova-mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:7px 2px;border-radius:13px;color:#b8d2d9;text-decoration:none;font-size:11px;font-weight:700}
 .nova-mobile-nav a:first-child{color:#65e4d1;background:rgba(101,228,209,.1)}
 .nova-mobile-nav a span{font-size:20px;line-height:1.1}
 main.container>.event-summary,main.container>.event-selector-panel,main.container>.settings-panel,main.container>.route-section{scroll-margin-top:80px}
}
@media(max-width:390px){.brand-subtitle{display:none}.nova-mobile-nav a{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Step 53.2: NOVA indigo / violet app refresh. */
html[data-theme="dark"],html[data-theme="light"]{--background:#0b1021;--surface:#151b30;--surface-soft:#202740;--surface-hover:#303657;--text:#f7f6ff;--text-soft:#b0b8d0;--border:#39415f;--primary:#a19bff;--primary-soft:rgba(161,155,255,.17);--green:#80d5c0;--yellow:#f4ca8a;color-scheme:dark}
body{background:radial-gradient(ellipse at 80% -10%,rgba(107,90,209,.25),transparent 52%),#0b1021}
.app-header{background:rgba(13,17,35,.95);border-bottom-color:#39415f}
.brand-mark{filter:drop-shadow(0 0 12px rgba(161,155,255,.32))}
.version{background:rgba(161,155,255,.14);border-color:rgba(161,155,255,.28)}
main.container>.event-selector-panel,main.container>.event-summary,main.container>.settings-panel,main.container>.route-section{background:linear-gradient(155deg,#222943,#131b31);border-color:rgba(151,155,209,.24);box-shadow:0 18px 50px rgba(2,4,17,.27)}
main.container>.event-summary{background:radial-gradient(ellipse at 100% 0%,rgba(161,155,255,.19),transparent 60%),linear-gradient(135deg,#282d51,#171d36);border-color:rgba(161,155,255,.38)}
main.container input,main.container select,main.container textarea{background:#151d35;color:#f7f6ff;border:1px solid #444c70;border-radius:16px;min-height:54px;padding:12px 15px;box-shadow:inset 0 1px 2px rgba(0,0,0,.12);transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
main.container input:hover,main.container select:hover,main.container textarea:hover{border-color:#7777b6}
main.container input:focus,main.container select:focus,main.container textarea:focus{background:#1d2543;border-color:#aaa6ff;box-shadow:0 0 0 4px rgba(161,155,255,.18);outline:0}
main.container label{font-weight:600}
main.container .primary-button{background:linear-gradient(120deg,#a3a1ff,#d2baff);color:#18132e;border-radius:16px;box-shadow:0 8px 24px rgba(123,106,234,.2)}
main.container button:focus-visible,.nova-mobile-nav a:focus-visible{outline:2px solid #c5baff;outline-offset:3px}
@media(max-width:760px){.nova-mobile-nav{background:rgba(16,19,39,.98);border-top-color:rgba(161,155,255,.28);box-shadow:0 -12px 30px rgba(3,4,16,.25)}.nova-mobile-nav a{color:#c5c5dd;border-radius:16px;min-height:54px}.nova-mobile-nav a.is-active{color:#c9c1ff;background:rgba(161,155,255,.16)}main.container input,main.container select,main.container textarea{min-height:54px;font-size:16px}}
@media(prefers-reduced-motion:reduce){main.container input,main.container select,main.container textarea{transition:none}}

/* Step 53.4: iOS Safari-safe form fields, without forcing native picker line-height. */
main.container .form-grid input,
main.container .form-grid select{
 box-sizing:border-box;width:100%;height:50px;min-height:50px;max-height:50px;
 margin:0;padding:0 14px;line-height:normal;vertical-align:middle;
 border-radius:14px;
}
main.container .form-grid input[type="date"],
main.container .form-grid input[type="time"]{
 -webkit-appearance:none;appearance:none;display:block;
 height:50px;min-height:50px;max-height:50px;
 padding:0 14px;line-height:normal;text-align:left;
}
/* Safari renders a separate inner date/time value; constrain it too. */
main.container .form-grid input[type="date"]::-webkit-date-and-time-value,
main.container .form-grid input[type="time"]::-webkit-date-and-time-value{
 min-height:0;height:auto;line-height:normal;text-align:left;
}
main.container .form-grid input[type="date"]::-webkit-datetime-edit,
main.container .form-grid input[type="time"]::-webkit-datetime-edit{
 padding:0;line-height:normal;
}
main.container .form-grid label{min-width:0;overflow:visible}
/* Current-session status: one deliberate inset surface instead of a dark block. */
main.container .event-summary .next-session-summary{
 background:rgba(161,155,255,.065);
 border:1px solid rgba(161,155,255,.18);
 border-radius:16px;
 box-shadow:none;
 padding:14px 16px;
}
@media(max-width:760px){
 body{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
 .nova-mobile-nav{padding:5px 8px calc(5px + env(safe-area-inset-bottom,0px))}
 .nova-mobile-nav a{min-height:44px;padding:4px 2px;gap:2px;font-size:10px;border-radius:11px}
 .nova-mobile-nav a span[aria-hidden="true"]{font-size:17px;line-height:1}
 .nova-mobile-nav a span[data-i18n]{font-size:10px;line-height:1.2}
 main.container .form-grid input,main.container .form-grid select{font-size:16px}
}

/* Step 53.5: native iOS picker value vertically centered in its 50px field. */
main.container .form-grid input[type="date"]::-webkit-date-and-time-value,
main.container .form-grid input[type="time"]::-webkit-date-and-time-value{
 display:flex;align-items:center;height:100%;min-height:100%;width:100%;
}
main.container .form-grid input[type="date"]::-webkit-datetime-edit,
main.container .form-grid input[type="time"]::-webkit-datetime-edit{
 display:inline-flex;align-items:center;height:100%;line-height:normal;
}
@media(max-width:760px){
 .nova-mobile-nav a:first-child:not(.is-active){color:#c5c5dd;background:transparent}
 .nova-mobile-nav a.is-active{color:#c9c1ff;background:rgba(161,155,255,.16)}
}

/* Step 53.6: compact Popular Places card in the NOVA left column. */
@media(min-width:761px){
 main.container{grid-template-areas:"intro intro" "selector summary" "settings route" "hotspot route";grid-template-rows:auto auto auto auto}
 main.container>.hotspot-planner-hint{grid-area:hotspot;align-self:start}
 main.container>.route-section{grid-area:route;grid-row:3 / span 2}
}
main.container>.nova-hotspot-card{
 display:flex;align-items:flex-start;gap:12px;min-width:0;width:100%;
 margin:0;padding:17px;border:1px solid rgba(161,155,255,.3);
 border-radius:20px;background:linear-gradient(145deg,#252b49,#1b213b);
 color:#b0b8d0;box-shadow:0 12px 30px rgba(2,4,17,.15);
}
.nova-hotspot-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:12px;background:rgba(161,155,255,.15);font-size:20px}
.nova-hotspot-copy{flex:1;min-width:0}
.nova-hotspot-copy strong{display:block;color:#f7f6ff;font-size:.94rem;line-height:1.35}
.nova-hotspot-copy p{margin:5px 0 13px;font-size:.79rem;line-height:1.45}
.nova-hotspot-action{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;padding:11px 12px;border-radius:12px;background:#a19bff;color:#18132e!important;text-decoration:none;font-weight:800;font-size:.8rem;line-height:1.3;text-align:center}
.nova-hotspot-action:hover{background:#c0b9ff}
.nova-hotspot-action:focus-visible{outline:2px solid #dedaff;outline-offset:3px}
@media(max-width:760px){main.container>.nova-hotspot-card{order:3;border-radius:18px;padding:15px}main.container>.route-section{order:4}}

/* Step 53.7: independent left stack prevents route height stretching settings. */
main.container>.nova-left-stack{min-width:0;display:flex;flex-direction:column;gap:18px;align-self:start}
main.container>.nova-left-stack>.event-selector-panel,
main.container>.nova-left-stack>.settings-panel{
 min-width:0;width:100%;height:auto;margin:0;border:1px solid rgba(151,155,209,.24);
 border-radius:24px;background:linear-gradient(155deg,#222943,#131b31);
 box-shadow:0 18px 50px rgba(2,4,17,.27);overflow:visible;
}
main.container>.nova-left-stack>.settings-panel{position:static;top:auto;align-self:auto}
main.container>.nova-left-stack>.nova-hotspot-card{
 display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:12px;row-gap:0;
 align-items:start;min-width:0;width:100%;margin:0;padding:17px;
 border:1px solid rgba(161,155,255,.3);border-radius:20px;
 background:linear-gradient(145deg,#252b49,#1b213b);color:#b0b8d0;
 box-shadow:0 12px 30px rgba(2,4,17,.15);
}
main.container>.nova-left-stack>.nova-hotspot-card .nova-hotspot-icon{grid-column:1;grid-row:1}
main.container>.nova-left-stack>.nova-hotspot-card .nova-hotspot-copy{display:contents}
main.container>.nova-left-stack>.nova-hotspot-card .hotspot-hint-de,
main.container>.nova-left-stack>.nova-hotspot-card .hotspot-hint-en{grid-column:2;grid-row:1;min-width:0}
main.container>.nova-left-stack>.nova-hotspot-card .nova-hotspot-action{
 position:relative;width:calc(100% + 50px);margin-left:-50px;margin-top:15px;
 box-sizing:border-box;min-height:44px;
}
@media(min-width:761px){
 main.container{grid-template-areas:"intro intro" "left summary" "left route";grid-template-rows:auto auto auto;align-items:start}
 main.container>.nova-left-stack{grid-area:left;grid-row:2 / span 2}
 main.container>.route-section{grid-area:route;grid-row:3;min-height:440px}
 main.container>.event-summary{grid-area:summary}
}
@media(max-width:760px){
 main.container>.nova-left-stack{order:1;gap:14px;width:100%}
 main.container>.nova-left-stack>.event-selector-panel,
 main.container>.nova-left-stack>.settings-panel{border-radius:20px}
 main.container>.nova-left-stack>.nova-hotspot-card{border-radius:18px;padding:15px}
 main.container>.route-section{order:2}
}

/* Step 53.8: unified NOVA design for public secondary pages. */
body.info-page.nova-info{background:radial-gradient(ellipse at 80% -10%,rgba(107,90,209,.25),transparent 52%),#0b1021;color:#f7f6ff}
body.nova-info .info-topbar{position:sticky;top:0;z-index:80;background:rgba(13,17,35,.94);border-bottom:1px solid rgba(161,155,255,.25);backdrop-filter:blur(18px);box-shadow:0 8px 32px rgba(2,4,17,.17)}
body.nova-info .info-topbar-inner{min-height:76px}
body.nova-info .info-brand{color:#f7f6ff;letter-spacing:-.025em;font-weight:800}
body.nova-info .info-back,body.nova-info .info-lang{border-radius:13px;border-color:rgba(161,155,255,.25);background:rgba(161,155,255,.08);color:#e5e2ff}
body.nova-info .info-lang.active{background:rgba(161,155,255,.24);border-color:#a19bff;color:#fff}
body.nova-info .info-theme-button{display:none}
body.nova-info .info-shell{max-width:1200px}
body.nova-info .info-main,body.nova-info .changelog-main{padding-top:28px}
body.nova-info .info-hero,body.nova-info .changelog-hero{background:radial-gradient(ellipse at 100% 0%,rgba(161,155,255,.2),transparent 58%),linear-gradient(135deg,#282d51,#171d36);border:1px solid rgba(161,155,255,.32);border-radius:26px;box-shadow:0 20px 52px rgba(2,4,17,.25)}
body.nova-info .info-eyebrow,body.nova-info .changelog-kicker{color:#b9b2ff}
body.nova-info .info-hero h1,body.nova-info .changelog-hero h1{color:#f7f6ff;letter-spacing:-.04em}
body.nova-info .info-lead,body.nova-info .changelog-hero p{color:#b8c0d7}
body.nova-info .info-card,body.nova-info .contact-form-card,body.nova-info .faq-section,body.nova-info .faq-item,body.nova-info .changelog-card,body.nova-info .info-example,body.nova-info .info-highlight,body.nova-info .info-cta{background:linear-gradient(155deg,#222943,#131b31);border:1px solid rgba(151,155,209,.24);border-radius:22px;box-shadow:0 12px 35px rgba(2,4,17,.17)}
body.nova-info .info-card-number,body.nova-info .contact-icon,body.nova-info .changelog-card-icon{background:rgba(161,155,255,.15);color:#c9c1ff;border-radius:13px}
body.nova-info .info-primary-link,body.nova-info .contact-submit{background:linear-gradient(120deg,#a3a1ff,#d2baff);color:#18132e;border:0;border-radius:15px;font-weight:800;box-shadow:0 8px 24px rgba(123,106,234,.2)}
body.nova-info .contact-form input,body.nova-info .contact-form select,body.nova-info .contact-form textarea,body.nova-info .hotspot-map-tools input{background:#151d35;color:#f7f6ff;border:1px solid #444c70;border-radius:15px;min-height:50px;padding:12px 14px;box-sizing:border-box;font-size:16px;transition:border-color .18s ease,box-shadow .18s ease}
body.nova-info .contact-form input:focus,body.nova-info .contact-form select:focus,body.nova-info .contact-form textarea:focus,body.nova-info .hotspot-map-tools input:focus{border-color:#aaa6ff;box-shadow:0 0 0 4px rgba(161,155,255,.18);outline:0}
body.nova-info .faq-question{border-radius:16px;color:#f7f6ff}
body.nova-info .faq-question:focus-visible,body.nova-info a:focus-visible,body.nova-info button:focus-visible{outline:2px solid #c5baff;outline-offset:3px}
body.nova-info .changelog-pill-current{background:rgba(161,155,255,.16);border-color:rgba(161,155,255,.42);color:#d5ccff}
body.nova-info .info-footer{border-top-color:rgba(161,155,255,.18);color:#aeb7ce}
@media(max-width:760px){
 body.nova-info .info-topbar-inner{min-height:64px}
 body.nova-info .info-shell{width:calc(100% - 24px)}
 body.nova-info .info-main,body.nova-info .changelog-main{padding-top:14px}
 body.nova-info .info-hero,body.nova-info .changelog-hero{border-radius:20px}
 body.nova-info .info-card,body.nova-info .contact-form-card,body.nova-info .faq-section,body.nova-info .faq-item,body.nova-info .changelog-card{border-radius:18px}
}
@media(prefers-reduced-motion:reduce){body.nova-info .contact-form input,body.nova-info .contact-form select,body.nova-info .contact-form textarea{transition:none}}

/* Step 53.9: proper inset spacing for the four secondary-page hero cards. */
body.nova-info .info-hero{
 box-sizing:border-box;width:100%;max-width:none;
 padding:clamp(24px,4vw,48px);overflow:hidden;
}
body.nova-info .info-hero .info-eyebrow{
 margin:0 auto 18px;padding:8px 14px;max-width:100%;box-sizing:border-box;
 background:#151b34;border:1px solid rgba(161,155,255,.35);color:#c9c1ff;
}
body.nova-info .info-hero h1{
 max-width:100%;margin:0 auto;
 font-size:clamp(1.85rem,4.5vw,3.35rem);line-height:1.13;
 overflow-wrap:break-word;hyphens:auto;
}
body.nova-info .info-hero .info-lead{
 max-width:720px;margin:20px auto 0;line-height:1.65;
 overflow-wrap:break-word;
}
@media(max-width:760px){
 body.nova-info .info-hero{padding:26px 20px 28px;border-radius:20px}
 body.nova-info .info-hero .info-eyebrow{margin-bottom:18px}
 body.nova-info .info-hero h1{font-size:clamp(1.75rem,7vw,2.45rem);line-height:1.16;letter-spacing:-.035em}
 body.nova-info .info-hero .info-lead{margin-top:16px;font-size:1rem;line-height:1.6}
}

/* Keep section headings visible below the NOVA sticky header in the browser. */
@media(max-width:760px){
 html{scroll-padding-top:94px}
 #eventSummary,#novaEventSelection,#novaSettings,#novaRoute{scroll-margin-top:94px}
}

/* Step 56: balanced three-tab mobile navigation. */
@media(max-width:760px){
 .nova-mobile-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
 .nova-mobile-nav a{min-width:0}
}