:root{--bg:#070a12;--card:#0d1320;--card2:#111827;--line:#202a3c;--text:#f4f7ff;--muted:#9aa6bb;--accent:#8ea2ff;--accent2:#667eea;--danger:#ff7d8b;--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 50% -10%,#17203b 0,#070a12 38%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}a{color:inherit}.site-header{position:sticky;top:0;z-index:10;background:rgba(7,10,18,.82);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06)}.header-inner{max-width:1080px;margin:auto;padding:15px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{text-decoration:none;font-weight:800;letter-spacing:-.4px;font-size:20px;display:inline-flex;align-items:center;gap:9px}.brand-mark{display:inline-grid;place-items:center;width:29px;height:29px;border:1px solid #53638e;border-radius:9px;font-size:18px}.language-wrap{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}.language-wrap select{width:auto;max-width:150px;background:#0e1523;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:8px 10px}.hero{max-width:900px;margin:0 auto;padding:74px 20px 34px;text-align:center}.pill,.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--accent)}.pill{display:inline-block;border:1px solid #303d63;background:#0e1527;border-radius:999px;padding:7px 11px;margin-bottom:17px}.hero h1{font-size:clamp(38px,8vw,72px);line-height:1.03;letter-spacing:-3px;margin:0 auto 18px;max-width:820px}.hero>p{font-size:18px;color:var(--muted);max-width:650px;margin:auto}.card{background:linear-gradient(180deg,rgba(17,24,39,.9),rgba(10,15,25,.94));border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 20px 70px rgba(0,0,0,.18)}.planner{max-width:900px;margin:20px auto;padding:24px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.section-head h2{margin:3px 0 0;font-size:22px}.counter{font-size:12px;color:var(--muted);border:1px solid var(--line);padding:6px 9px;border-radius:999px}.person{display:grid;grid-template-columns:minmax(160px,1fr) 105px 105px 42px;gap:10px;margin-bottom:10px}.person select,.person input,.settings input,.settings select{width:100%;min-height:46px;background:#0a101b;color:var(--text);border:1px solid #263149;border-radius:12px;padding:10px 12px;font:inherit;outline:none}.person select:focus,.person input:focus,.settings input:focus,.settings select:focus{border-color:#596fae}.remove{border:1px solid var(--line);background:#0a101b;color:#b9c2d4;border-radius:12px;font-size:22px;cursor:pointer}.remove:hover{color:var(--danger);border-color:#61303a}.secondary,.primary{border-radius:13px;padding:12px 16px;font:inherit;font-weight:700;cursor:pointer}.secondary{border:1px solid #2a3753;background:#0c1422;color:#dce3f4}.primary{width:100%;border:0;background:linear-gradient(135deg,var(--accent2),#8a9cff);color:white;min-height:52px;font-size:16px;display:flex;align-items:center;justify-content:center;gap:10px}.secondary:disabled{opacity:.45;cursor:not-allowed}.settings{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.settings label{display:grid;gap:7px;font-size:12px;color:var(--muted);font-weight:700}.privacy-note{text-align:center;color:#738097;font-size:12px;margin:13px 0 0}.results{max-width:900px;margin:18px auto;padding:26px}.result-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.best-title{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--accent)}.best-time{font-size:clamp(25px,5vw,42px);font-weight:800;letter-spacing:-1.5px;margin:6px 0 4px}.result-date{color:var(--muted);font-size:13px}.action-row{display:flex;gap:8px;flex-wrap:wrap}.mini-btn{background:#0b1220;border:1px solid var(--line);color:#dce3f4;border-radius:10px;padding:9px 11px;font-weight:700;cursor:pointer}.local-times{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:20px 0}.time-card{border:1px solid var(--line);background:#0a101b;border-radius:14px;padding:13px}.time-card .city{color:var(--muted);font-size:12px}.time-card .time{font-size:20px;font-weight:800;margin-top:2px}.slots{border-top:1px solid var(--line);margin-top:16px}.slot{padding:14px 0;border-bottom:1px solid var(--line);font-size:14px;color:#d8deeb}.slot strong{color:white}.features{max-width:900px;margin:18px auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.features .card{padding:22px}.feature-icon{font-size:24px;margin-bottom:12px}.features h2{font-size:18px;margin:0 0 6px}.features p,.content-section>p,.faq p{color:var(--muted);margin:0}.content-section,.faq{max-width:900px;margin:18px auto;padding:28px}.content-section h2{font-size:30px;letter-spacing:-1px;margin:7px 0 10px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px}.steps div{background:#0a101b;border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px}.steps b{color:var(--accent);font-size:12px;letter-spacing:1px}.faq details{border-top:1px solid var(--line);padding:17px 0}.faq details:last-child{border-bottom:1px solid var(--line)}summary{cursor:pointer;font-weight:700}.faq p{padding-top:10px}.footer{max-width:900px;margin:48px auto 0;padding:0 20px 40px;display:flex;justify-content:space-between;gap:30px;color:var(--muted);font-size:13px}.footer .brand{color:var(--text)}.footer nav{display:flex;flex-wrap:wrap;gap:15px}.footer nav a{color:var(--muted);text-decoration:none}.footer nav a:hover{color:white}.empty{color:var(--muted)}@media(max-width:700px){.hero{padding-top:48px}.hero h1{letter-spacing:-2px}.planner,.results,.content-section,.faq{margin-left:12px;margin-right:12px;padding:18px}.person{grid-template-columns:1fr 42px}.person .hour-field{grid-column:span 1}.person select{grid-column:1}.person .remove{grid-column:2;grid-row:1}.features{grid-template-columns:1fr;margin:18px 12px}.settings{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.result-top{display:block}.action-row{margin-top:14px}.footer{display:block}.footer nav{margin-top:20px}.language-wrap span{display:none}}
.city-search-wrap{margin:0 0 10px}.city-search-wrap input{width:100%;min-height:46px;background:#0a101b;color:var(--text);border:1px solid #263149;border-radius:12px;padding:10px 12px;font:inherit;outline:none}.city-search-wrap input:focus{border-color:#596fae}.city-search-wrap input::placeholder{color:#65728a}
@media(max-width:700px){.city-search-wrap{margin-bottom:10px}.person select{min-width:0}.person .start,.person .end{width:100%}}
.hour-field{position:relative;min-width:0}.hour-field input{width:100%}.hour-preview{display:block;color:var(--muted);font-size:11px;font-weight:700;margin:4px 2px 0}.hour-field:focus-within .hour-preview{color:var(--accent)}
/* TimeOverlap V5: subtle 3D motion */
body{perspective:1200px;overflow-x:hidden}
body::before,body::after{content:"";position:fixed;pointer-events:none;z-index:-1;border-radius:50%;filter:blur(45px);opacity:.16;animation:orbFloat 10s ease-in-out infinite}
body::before{width:220px;height:220px;top:12%;left:-90px;background:#647cff}
body::after{width:260px;height:260px;right:-120px;bottom:18%;background:#9b5cff;animation-delay:-5s}
.card,.planner,.result,.info-card,.faq,.hero{transform:translateZ(0);transition:transform .35s ease,box-shadow .35s ease}
.card:hover,.planner:hover,.result:hover,.info-card:hover{transform:translateY(-3px) rotateX(.35deg);box-shadow:0 16px 38px rgba(0,0,0,.22)}
button,.btn,.primary{transition:transform .2s ease,filter .2s ease,box-shadow .2s ease}
button:active,.btn:active,.primary:active{transform:scale(.97)}
button:hover,.btn:hover,.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.time-card{animation:cardIn .5s cubic-bezier(.2,.8,.2,1) both}
.time-card:nth-child(2){animation-delay:.05s}.time-card:nth-child(3){animation-delay:.1s}
.time-card:nth-child(4){animation-delay:.15s}.time-card:nth-child(5){animation-delay:.2s}
.person{animation:slideIn .35s ease both}
@keyframes cardIn{from{opacity:0;transform:translateY(12px) rotateX(5deg) scale(.98)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes orbFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(20px,-18px,0) scale(1.08)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition:none!important}
}

/* =========================================================
   TimeOverlap V9: responsive planner rebuild
   ========================================================= */
.site-header{width:100%}
.header-inner{width:100%;max-width:1080px}
main{width:100%}
.planner,.results,.content-section,.faq{width:calc(100% - 24px);max-width:900px}
.planner{overflow:visible}
.person{display:grid;grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:auto auto auto;gap:10px;margin-bottom:22px;position:relative;min-width:0;overflow:visible}
.person>.city{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.city-picker{grid-column:1;grid-row:1;position:relative;min-width:0;width:100%}
.city-trigger{
  width:100%;min-height:58px;background:#0a101b;color:var(--text);
  border:1px solid #263149;border-radius:14px;padding:12px 46px 12px 14px;
  font:inherit;text-align:left;cursor:pointer;position:relative;
  display:flex;align-items:center;overflow:hidden;
}
.city-trigger:hover{border-color:#3b4d70}
.selected-city-main{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px;line-height:1.35}
.selected-city-sep{color:#8e9ab0;padding:0 2px}
.css-chevron{
  position:absolute;right:16px;top:50%;width:10px;height:10px;
  border-right:1.8px solid #b9c2d4;border-bottom:1.8px solid #b9c2d4;
  transform:translateY(-65%) rotate(45deg);transition:transform .2s ease;
}
.city-trigger[aria-expanded="true"] .css-chevron{transform:translateY(-35%) rotate(225deg)}
.remove{
  grid-column:2;grid-row:1;width:44px;min-height:58px;
  border:1px solid var(--line);background:#0a101b;color:#b9c2d4;
  border-radius:14px;font-size:24px;cursor:pointer;
}
.remove:hover{color:var(--danger);border-color:#61303a}
.hours-row{
  grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;
  gap:10px;min-width:0;
}
.hour-field{min-width:0}
.hour-field input{
  width:100%;min-height:58px;background:#0a101b;color:var(--text);
  border:1px solid #263149;border-radius:14px;padding:12px 14px;font:inherit;
  outline:none;
}
.hour-field input:focus{border-color:#596fae}
.hours-label{
  grid-column:1 / -1;grid-row:3;color:var(--muted);
  font-size:13px;line-height:1.3;padding:0 3px;margin-top:-2px;
}
.city-menu{
  display:none;position:absolute;left:0;top:calc(100% + 8px);
  width:calc(100% + 54px);z-index:100;max-height:min(58vh,460px);
  overflow:auto;background:#24272e;border:1px solid #3a3f49;
  border-radius:16px;box-shadow:0 22px 55px rgba(0,0,0,.5);padding:4px;
}
.city-menu.open{display:block}
.city-option{
  width:100%;display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:12px;
  align-items:center;border:0;border-bottom:1px solid #3a3f49;
  background:transparent;color:#f4f7ff;padding:12px 12px;text-align:left;
  cursor:pointer;min-height:68px;border-radius:10px;
}
.city-option:last-child{border-bottom:0}
.city-option:hover{background:#30343d}
.city-option.selected{background:#2b3039}
.city-option.disabled{opacity:.42;cursor:not-allowed}
.city-option-copy{min-width:0}
.city-option .city-main{
  display:block;font-size:16px;line-height:1.3;white-space:normal;
  overflow:visible;text-overflow:clip;overflow-wrap:break-word;
}
.city-option .city-language{
  display:block;margin-top:4px;color:#aeb8c9;font-size:13px;line-height:1.3;
  white-space:normal;overflow-wrap:break-word;
}
.city-radio{
  width:22px;height:22px;border:2px solid #b9c2d4;border-radius:50%;
  display:grid;place-items:center;justify-self:end;font-size:12px;font-weight:800;color:#8ea2ff;
}
.city-option.selected .city-radio{border-color:#8ea2ff}
.city-empty{padding:18px 12px;color:var(--muted);text-align:center}

@media(max-width:700px){
  body{width:100%;min-width:0}
  .header-inner{padding:12px 14px;gap:10px}
  .brand{font-size:19px}
  .language-wrap select{max-width:128px}
  .hero{width:100%;padding:48px 14px 28px}
  .hero h1{font-size:clamp(34px,10vw,52px);letter-spacing:-2px}
  .hero>p{font-size:16px}
  .planner,.results,.content-section,.faq{
    width:calc(100% - 24px);max-width:none;margin-left:12px;margin-right:12px;padding:18px;
  }
  .planner{overflow:visible}
  .section-head{margin-bottom:16px}
  .section-head h2{font-size:22px;line-height:1.15;max-width:75%}
  .person{grid-template-columns:minmax(0,1fr) 44px;gap:10px;margin-bottom:24px}
  .city-trigger{min-height:58px;padding-left:14px;padding-right:42px}
  .selected-city-main{font-size:16px}
  .remove{min-height:58px}
  .hours-row{gap:10px}
  .hour-field input{min-height:58px;font-size:16px;padding:12px 13px}
  .hours-label{font-size:13px}
  .city-menu{
    width:calc(100% + 54px);
    max-height:62vh;
    top:calc(100% + 8px);
    left:0;
    border-radius:16px;
  }
  .city-option{min-height:72px;padding:13px 12px}
  .city-option .city-main{font-size:17px}
  .city-option .city-language{font-size:13px;margin-top:5px}
  .features{width:calc(100% - 24px);margin-left:12px;margin-right:12px}
  .footer{width:calc(100% - 24px);margin-left:12px;margin-right:12px;padding-left:0;padding-right:0}
}

/* Prevent the browser from forcing horizontal overflow on narrow screens. */
html,body{max-width:100%;overflow-x:hidden}


/* =========================================================
   TimeOverlap V10: final mobile city picker + time controls
   ========================================================= */
.person{z-index:1}
.person.picker-open{z-index:1000}
.city-trigger{overflow:visible}
.selected-city-main{
  white-space:normal;overflow-wrap:anywhere;text-overflow:clip;
  line-height:1.25;padding-right:2px;
}
.city-picker{z-index:2}
.city-menu{z-index:2000}
.city-option-copy{min-width:0;overflow:hidden}
.city-option .city-main{white-space:normal;overflow-wrap:anywhere}

/* Use native select behavior with a visual chevron positioned inside the field. */
.hour-field{position:relative;min-width:0}
.hour-field select{
  appearance:none;-webkit-appearance:none;width:100%;min-height:58px;
  background:#0a101b;color:var(--text);border:1px solid #263149;
  border-radius:14px;padding:12px 44px 12px 14px;font:inherit;outline:none;
}
.hour-field select:focus{border-color:#596fae}
.time-chevron{
  position:absolute;right:17px;top:50%;width:9px;height:9px;
  border-right:1.8px solid #c3cad8;border-bottom:1.8px solid #c3cad8;
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
}

/* Match the reference: city/country on one clean line where possible,
   language only appears in the expanded picker list. */
@media(max-width:700px){
  .planner{overflow:visible}
  .person{grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:auto auto auto;gap:10px}
  .city-trigger{min-height:58px;padding:10px 40px 10px 14px}
  .selected-city-main{font-size:15.5px}
  .remove{min-height:58px}
  .hours-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .hour-field select{min-height:58px;font-size:16px;padding-left:14px;padding-right:40px}
  .time-chevron{right:16px}
  .city-menu{width:calc(100% + 54px);max-width:none;}
  .city-option{grid-template-columns:minmax(0,1fr) 30px;gap:10px;padding:12px 12px;min-height:70px}
  .city-option .city-main{font-size:16.5px;line-height:1.25}
  .city-option .city-language{font-size:13.5px;line-height:1.25;margin-top:4px}
}




/* V15: use the browser/Android native time picker.
   This intentionally gives Android Chrome the same clock-style picker
   shown in the reference screenshot, including native AM/PM fade/selection. */
.hour-field{
  position:relative;
  min-width:0;
}
.hour-field input[type="time"]{
  width:100%;
  min-height:58px;
  background:#0a101b;
  color:var(--text);
  color-scheme:dark;
  border:1px solid #263149;
  border-radius:14px;
  padding:12px 14px;
  font:inherit;
  font-size:16px;
  outline:none;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.hour-field input[type="time"]:focus{
  border-color:#596fae;
  box-shadow:0 0 0 2px rgba(142,162,255,.08);
}
.hour-field input[type="time"]::-webkit-calendar-picker-indicator{
  opacity:.9;
  filter:invert(1);
  cursor:pointer;
}
@media(max-width:700px){
  .hour-field input[type="time"]{
    min-height:58px;
    font-size:16px;
    padding:12px 13px;
  }
}


/* V16 result cards */
#results{margin-top:18px}
.result-card{
  border:1px solid #263149;
  background:rgba(10,16,27,.78);
  border-radius:18px;
  padding:18px;
  color:var(--text);
}
.result-card h3{margin:0 0 6px;font-size:19px}
.result-card p{margin:0 0 12px;color:#9ea8bb}
.result-slot{
  padding:13px 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.result-city{margin-top:6px;color:#c6ccda;font-size:14px}
.result-city strong{color:#f3f5fa}


/* V17 city picker interaction fix */
.city-picker{position:relative;z-index:20;pointer-events:auto}
.city-trigger{position:relative;z-index:21;pointer-events:auto;touch-action:manipulation}
.city-picker.picker-open{z-index:9999}
.city-picker.picker-open .city-menu{z-index:10000;pointer-events:auto}
.city-menu.open{display:block;visibility:visible;opacity:1;pointer-events:auto}
.city-option{position:relative;z-index:1;pointer-events:auto;touch-action:manipulation}

/* V18 interaction stability */
.city-picker{position:relative;z-index:30;pointer-events:auto}
.city-picker.picker-open{z-index:10000}
.city-picker .city-trigger{position:relative;z-index:10001;pointer-events:auto;touch-action:manipulation}
.city-picker .city-menu{z-index:10002;pointer-events:auto}
.city-picker .city-menu.open{display:block;visibility:visible;opacity:1;pointer-events:auto}
.city-picker .city-option{pointer-events:auto;touch-action:manipulation}

/* V19: live world clock + timezone information */
.live-section{margin-top:18px;overflow:hidden}
.live-head{align-items:center}
.live-badge{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.12em;color:#b9c5ff;border:1px solid #303b61;background:#10162a;border-radius:999px;padding:7px 10px}
.live-dot{width:7px;height:7px;border-radius:50%;background:#78d99b;box-shadow:0 0 12px rgba(120,217,155,.7);animation:livePulse 1.5s ease-in-out infinite}
.live-subtitle{color:var(--muted);margin:-4px 0 16px;line-height:1.55}
.live-search-wrap{margin-bottom:14px}
.live-search-wrap input{width:100%;min-height:50px;background:#0a101b;color:var(--text);border:1px solid #263149;border-radius:13px;padding:12px 14px;font:inherit;outline:none}
.live-search-wrap input:focus{border-color:#596fae;box-shadow:0 0 0 2px rgba(142,162,255,.08)}
.live-clocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-height:620px;overflow:auto;padding-right:2px}
.live-card{border:1px solid #263149;background:rgba(10,16,27,.72);border-radius:15px;padding:14px;min-width:0;transition:border-color .2s ease,transform .2s ease}
.live-card:hover{border-color:#3b4d70;transform:translateY(-1px)}
.live-card-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.live-city{font-weight:700;font-size:14px;min-width:0;overflow-wrap:anywhere}
.live-country{font-size:11px;color:#8792a7;text-align:right;flex-shrink:0;max-width:45%;overflow-wrap:anywhere}
.live-time{font-size:25px;font-weight:800;letter-spacing:-.7px;margin:12px 0 8px;white-space:nowrap}
.zone-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px}
.zone-meta>span{font-size:11px;color:#c8cfdd;border:1px solid #30394d;background:#101725;border-radius:999px;padding:4px 7px}
.zone-meta .dst-pill.on{border-color:#335d49;color:#9be0b7}
.zone-meta .dst-pill.off{color:#9aa5b8}
.zone-name{font-size:11px;color:#aab3c3;line-height:1.35}
.iana-name{font-size:10px;color:#68748a;margin-top:5px;overflow-wrap:anywhere}
@keyframes livePulse{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}
@media(max-width:800px){.live-clocks{grid-template-columns:repeat(2,minmax(0,1fr));max-height:560px}.live-time{font-size:22px}}
@media(max-width:520px){.live-section{padding:18px}.live-clocks{grid-template-columns:1fr;max-height:620px}.live-card{padding:14px}.live-time{font-size:26px}}