:root{
    --text:#23283C; --text2:#6B7385; --go:#2AA866;
    --field:rgba(0,0,0,.05); --hair:rgba(0,0,0,.1);
    --accent:#8AB4FF; --on:#fff;
    --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI","Helvetica Neue",Arial,sans-serif;
    --spring:cubic-bezier(.34,1.56,.5,1);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0; height:100%; overflow:hidden; overscroll-behavior:none; background-color:#1B2350}
  body{font-family:var(--font); color:var(--on); min-height:100svh; isolation:isolate; -webkit-font-smoothing:antialiased;
    background-color:#1B2350; background-image:linear-gradient(180deg,#1B2350 0%,#2C3A78 55%,#46599E 100%); background-repeat:no-repeat}

  .sky{position:fixed; inset:0; z-index:0; transition:background 1s ease; pointer-events:none}
  .veil{position:fixed; inset:0; z-index:1; transition:background 1s ease; pointer-events:none}
  #fx{position:fixed; inset:0; z-index:2; overflow:hidden; pointer-events:none}
  #celestial{position:fixed; inset:0; z-index:2; pointer-events:none}
  .scene{position:fixed; left:0; right:0; bottom:0; width:100%; height:63svh; z-index:3; pointer-events:none}

  body[data-weather="clear-day"]  {background-color:#4FA3E8; background-image:linear-gradient(180deg,#4FA3E8 0%,#8FD0F5 52%,#CDEBFB 100%)}
  body[data-weather="clear-night"]{background-color:#141B3E; background-image:linear-gradient(180deg,#141B3E 0%,#243067 55%,#3C4E8E 100%)}
  body[data-weather="cloudy"]     {background-color:#5A6470; background-image:linear-gradient(180deg,#5A6470 0%,#79838F 55%,#9AA6B2 100%)}
  body[data-weather="rain"]       {background-color:#36414F; background-image:linear-gradient(180deg,#36414F 0%,#4A5666 55%,#5E6B79 100%)}
  body[data-weather="snow"]       {background-color:#6E859B; background-image:linear-gradient(180deg,#6E859B 0%,#90A6B8 55%,#BFD0DC 100%)}
  body[data-weather="fog"]        {background-color:#666F78; background-image:linear-gradient(180deg,#666F78 0%,#838B93 55%,#A1A8AE 100%)}
  body[data-weather="thunder"]    {background-color:#15132B; background-image:linear-gradient(180deg,#15132B 0%,#2A2450 55%,#403773 100%)}

  .sun{position:absolute; border-radius:50%; transform:translate(-50%,-50%); animation:bob 7s ease-in-out infinite}
  @keyframes bob{0%,100%{margin-top:0} 50%{margin-top:-7px}}
  .moon{position:absolute; width:70px; height:70px; border-radius:50%; transform:translate(-50%,-50%);
    background:radial-gradient(circle at 36% 34%,#FCFBFF,#D7DCF4 74%); box-shadow:0 0 50px rgba(220,226,255,.55); animation:bob 7s ease-in-out infinite}
  .star{position:absolute; width:6px; height:6px; background:#fff; border-radius:50%; box-shadow:0 0 6px #fff; animation:twinkle 3s ease-in-out infinite;
    clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
  @keyframes twinkle{0%,100%{opacity:.3; transform:scale(.8)} 50%{opacity:1; transform:scale(1.1)}}
  .cloud{position:absolute; width:120px; height:44px; background:#fff; border-radius:44px; opacity:.92; filter:drop-shadow(0 8px 12px rgba(10,20,40,.18)); animation:drift linear infinite}
  .cloud::before{content:""; position:absolute; width:62px; height:62px; background:#fff; border-radius:50%; top:-28px; left:16px}
  .cloud::after{content:""; position:absolute; width:46px; height:46px; background:#fff; border-radius:50%; top:-18px; left:62px}
  @keyframes drift{from{transform:translateX(-30vw)} to{transform:translateX(130vw)}}
  .drop{position:absolute; top:-12%; width:7px; height:11px; background:rgba(255,255,255,.8); border-radius:50% 50% 50% 50%/65% 65% 35% 35%; animation:fall linear infinite}
  @keyframes fall{from{transform:translateY(-16vh)} to{transform:translateY(122vh)}}
  .flake{position:absolute; top:-6%; width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 0 6px rgba(255,255,255,.6); animation:snowfall linear infinite}
  @keyframes snowfall{0%{transform:translate(0,-10vh)} 100%{transform:translate(18px,116vh)}}
  .fogband{position:absolute; left:-20%; width:140%; height:70px; background:rgba(255,255,255,.28); filter:blur(20px); border-radius:40px; animation:drift linear infinite}
  .flash{position:absolute; inset:0; background:#fff; opacity:0; animation:flash 9s linear infinite}
  @keyframes flash{0%,92%,100%{opacity:0} 93%{opacity:.4} 94%{opacity:0} 95%{opacity:.3} 96%{opacity:0}}

  .app{position:relative; z-index:4; height:100svh; width:100%; max-width:560px; margin:0 auto; display:flex; flex-direction:column; overflow:hidden}
  .topbar{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:max(14px,env(safe-area-inset-top)) 20px 0}
  .loc{min-width:0; display:flex; align-items:center; color:var(--on); padding:7px 13px; border-radius:999px;
    font-size:16px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); text-shadow:0 1px 3px rgba(0,8,30,.5)}
  .weather-tools{position:relative; display:flex; align-items:center; gap:7px}
  .moment{font-size:15px; font-weight:800; color:var(--on); white-space:nowrap; padding:7px 14px; border-radius:999px;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); text-shadow:0 1px 3px rgba(0,8,30,.5)}
  .info-button{width:32px; height:32px; flex:none; display:grid; place-items:center; padding:0; border-radius:50%; cursor:pointer;
    font:700 17px/1 Georgia,serif; color:var(--on); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); text-shadow:0 1px 3px rgba(0,8,30,.5)}
  .info-button:active{transform:scale(.94)}
  .info-button[aria-expanded="true"]{background:rgba(255,255,255,.25)}
  .advice{position:absolute; z-index:12; top:calc(100% + 10px); right:0; width:min(340px,calc(100vw - 40px)); margin:0;
    text-align:left; font-size:14px; line-height:1.35; font-weight:650; color:var(--on);
    background:rgba(26,39,74,.78); border:1px solid rgba(255,255,255,.28); border-radius:14px; padding:11px 13px;
    backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2);
    box-shadow:0 12px 30px rgba(10,20,45,.24); text-shadow:0 1px 3px rgba(0,8,30,.5)}
  .advice[hidden]{display:none}

  .top{position:relative; z-index:2; flex:0 0 auto; min-height:58svh; display:flex; flex-direction:column}
  .stage{flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:0 0 clamp(4px,1svh,10px)}
  .dial{position:relative; width:min(56vw,30svh,224px); aspect-ratio:1; display:grid; place-items:center; animation:pop-in .6s var(--spring) both}
  @keyframes pop-in{from{opacity:0; transform:scale(.7)} to{opacity:1; transform:scale(1)}}
  .dial::after{content:""; position:absolute; inset:-11px; border-radius:50%; z-index:2; opacity:0; transition:opacity .35s; pointer-events:none;
    background:conic-gradient(#fff calc(var(--remain,0)*1%), rgba(255,255,255,.3) 0);
    -webkit-mask:radial-gradient(farthest-side,transparent 89%,#000 90%); mask:radial-gradient(farthest-side,transparent 89%,#000 90%); filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
  body.present .dial::after{opacity:1}
  .dial::before{content:""; position:absolute; inset:-10%; border-radius:50%; z-index:1; pointer-events:none;
    background:radial-gradient(circle, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 66%); animation:breathe 4s ease-in-out infinite}
  @keyframes breathe{0%,100%{transform:scale(.94); opacity:.35} 50%{transform:scale(1.07); opacity:.6}}
  body.present .dial::before{background:radial-gradient(circle, rgba(255,200,130,.4) 0%, rgba(255,200,130,0) 66%)}
  .checkin{position:relative; z-index:3; width:100%; height:100%; border-radius:50%; border:none; cursor:pointer; color:#fff; overflow:hidden;
    font-family:var(--font); font-size:clamp(20px,5.8vw,26px); font-weight:800; letter-spacing:.2px; line-height:1.12; padding:0 14%;
    background:
      radial-gradient(110% 86% at 50% 10%, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 46%),
      radial-gradient(125% 120% at 50% 104%, rgba(8,22,38,.32) 0%, rgba(8,22,38,0) 60%),
      rgba(255,255,255,.12);
    backdrop-filter:blur(18px) saturate(1.35); -webkit-backdrop-filter:blur(18px) saturate(1.35);
    text-shadow:0 1px 2px rgba(0,25,45,.55), 0 0 2px rgba(0,0,0,.3);
    box-shadow:
      0 22px 46px -16px rgba(0,35,60,.45),
      inset 0 1.5px 0 rgba(255,255,255,.7),
      inset 0 -18px 30px rgba(0,20,40,.16),
      inset 0 0 0 1px rgba(255,255,255,.3);
    transition:transform .22s var(--spring), box-shadow .3s ease, background .4s ease, filter .35s ease}
  .checkin::before{content:""; position:absolute; top:7%; left:14%; width:72%; height:40%; border-radius:50%; pointer-events:none; mix-blend-mode:screen;
    background:radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.8) 0%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 74%); filter:blur(.5px)}
  .checkin::after{content:""; position:absolute; top:-30%; left:-70%; width:55%; height:160%; pointer-events:none; transform:rotate(20deg); mix-blend-mode:screen;
    background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.32) 50%, rgba(255,255,255,0) 100%); animation:sheen 6.5s ease-in-out infinite}
  @keyframes sheen{0%{left:-70%} 18%{left:140%} 100%{left:140%}}
  body.present .checkin{
    background:
      radial-gradient(110% 86% at 50% 10%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 46%),
      radial-gradient(125% 120% at 50% 104%, rgba(120,55,0,.34) 0%, rgba(120,55,0,0) 60%),
      rgba(255,184,104,.2);
    text-shadow:0 1px 2px rgba(90,40,0,.5), 0 0 2px rgba(0,0,0,.25);
    box-shadow:
      0 22px 46px -16px rgba(150,80,10,.5),
      inset 0 1.5px 0 rgba(255,255,255,.75),
      inset 0 -18px 30px rgba(120,55,0,.2),
      inset 0 0 0 1px rgba(255,255,255,.34)}
  body.present .checkin::after{animation:none; opacity:0}
  .checkin:active{transform:scale(.94) translateY(2px); filter:brightness(.97)}
  .checkin:disabled{cursor:not-allowed; filter:saturate(.9) brightness(1.02); opacity:.85}
  .status{min-height:20px; font-size:14px; font-weight:600; color:var(--on); text-shadow:0 2px 8px rgba(0,8,30,.5)}

  .sheet{position:relative; z-index:2; flex:1; min-height:0; border-radius:34px 34px 0 0; color:var(--text);
    background:linear-gradient(180deg, rgba(255,255,255,.93), rgba(255,255,255,.87)); backdrop-filter:blur(30px) saturate(1.4); -webkit-backdrop-filter:blur(30px) saturate(1.4);
    border-top:1px solid rgba(255,255,255,.6); box-shadow:0 -18px 46px -22px rgba(20,30,60,.45); padding:8px 18px calc(24px + env(safe-area-inset-bottom)); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
  .grab{width:40px; height:5px; border-radius:3px; background:rgba(0,0,0,.14); margin:8px auto 12px}
  .sheet-head{display:flex; align-items:center; justify-content:space-between; margin:2px 4px 14px}
  .sheet-head h2{font-size:22px; font-weight:800; letter-spacing:-.4px; margin:0; color:var(--text)}
  .cnt{font-size:14px; font-weight:700; color:var(--text2); background:rgba(0,0,0,.05); border-radius:999px; padding:5px 13px}

  .identity{margin:0 0 12px}
  @keyframes shake{10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(3px)} 30%,50%,70%{transform:translateX(-5px)} 40%,60%{transform:translateX(5px)}}
  .identity.shake{animation:shake .5s}
  body.present .identity{display:none}
  .pill{display:flex; align-items:center; gap:8px; border-radius:18px; padding:7px 7px 7px 16px; background:var(--field); border:1px solid var(--hair)}
  .pill input{flex:1; font:inherit; font-size:17px; font-weight:600; color:var(--text); background:transparent; border:none; padding:9px 0}
  .pill input::placeholder{color:var(--text2)}
  .pill input:focus{outline:none}
  .pill .dog{flex:1; font-size:17px; font-weight:600; color:var(--text)}
  .chip{font:inherit; font-size:15px; font-weight:700; color:#04241A; background:var(--go); border:none; border-radius:14px; padding:10px 16px; cursor:pointer;
    box-shadow:0 6px 16px -6px color-mix(in srgb,var(--go) 75%, transparent)}
  .chip:active{transform:scale(.95)}

  ul#list{list-style:none; margin:0; padding:0}
  ul#list li{display:flex; align-items:center; gap:13px; padding:11px 4px; min-height:62px; position:relative; animation:rowin .35s var(--spring) both}
  ul#list li + li::before{content:""; position:absolute; left:57px; right:0; top:0; height:1px; background:rgba(0,0,0,.07)}
  @keyframes rowin{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
  .avatar{width:46px; height:46px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:19px; font-weight:700; color:#fff;
    box-shadow:inset 0 3px 0 rgba(255,255,255,.4), 0 4px 10px rgba(0,0,0,.18)}
  .who{flex:1; min-width:0}
  .who .nm{font-size:17px; font-weight:600; color:var(--text)}
  .who .nm .you{color:var(--go); font-weight:700; font-size:14px}
  .who .ago{font-size:13px; color:var(--text2); margin-top:1px}
  li.me .avatar{box-shadow:inset 0 3px 0 rgba(255,255,255,.35), 0 0 0 3px color-mix(in srgb,var(--go) 85%, transparent)}
  .dur{flex:none; font-size:14px; font-weight:700; color:var(--text2); background:rgba(0,0,0,.05); border-radius:999px; padding:6px 12px; white-space:nowrap}
  .rowinput{font:inherit; font-size:17px; font-weight:600; width:100%; color:var(--text); background:rgba(0,0,0,.05); border:1.5px solid var(--go); border-radius:14px; padding:8px 11px}
  .rowinput:focus{outline:none}
  .empty{padding:22px 6px; text-align:center; color:var(--text2); font-size:15px}

  .plan-actions{display:flex; justify-content:center; margin:8px 0 2px}
  .plan-trigger{font:inherit; font-size:14px; font-weight:700; color:#315778; background:rgba(65,125,170,.09);
    border:1px solid rgba(65,125,170,.18); border-radius:14px; padding:10px 14px; cursor:pointer}
  .plan-trigger:active{transform:scale(.97)}
  .plan-form{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0 14px; padding:12px 0;
    border-top:1px solid rgba(0,0,0,.08); border-bottom:1px solid rgba(0,0,0,.08)}
  .plan-form[hidden]{display:none}
  .plan-form select,.plan-form input{min-width:0; width:100%; font:inherit; font-size:16px; font-weight:600; color:var(--text);
    background:rgba(0,0,0,.05); border:1px solid var(--hair); border-radius:12px; padding:10px}
  .plan-form-actions{grid-column:1/-1; display:flex; justify-content:flex-end; gap:8px}
  .plan-cancel{font:inherit; font-size:14px; font-weight:700; color:var(--text2); background:none; border:none; padding:9px 10px; cursor:pointer}
  .planned{margin-top:14px; padding-top:14px; border-top:1px solid rgba(0,0,0,.08)}
  .planned[hidden]{display:none}
  .planned-head{display:flex; align-items:center; justify-content:space-between; margin:0 4px 4px}
  .planned-head h3{margin:0; font-size:17px; color:var(--text)}
  ul#plannedList{list-style:none; margin:0; padding:0}
  ul#plannedList li{display:flex; align-items:center; gap:11px; min-height:56px; padding:9px 4px}
  ul#plannedList li + li{border-top:1px solid rgba(0,0,0,.06)}
  .planned-time{font-size:13px; font-weight:700; color:#315778; margin-top:2px}
  .planned-actions{display:flex; align-items:center; gap:4px}
  .arrived{font:inherit; font-size:13px; font-weight:800; color:#073A26; background:#54C783; border:none; border-radius:12px; padding:9px 10px; cursor:pointer}
  .plan-remove{font:inherit; font-size:13px; font-weight:700; color:var(--text2); background:none; border:none; padding:8px; cursor:pointer}

  .banner{margin:0 0 12px; padding:11px 14px; border-radius:16px; font-size:14px; color:#A3201A; background:rgba(255,80,70,.1); border:1px solid rgba(255,80,70,.28); display:none}
  .banner.show{display:block}
  .notify{display:block; width:100%; margin:14px 0 0; font:inherit; font-size:14px; font-weight:600; color:var(--text2); background:none; border:none; padding:10px; cursor:pointer}
  .notify:active{opacity:.6}

  @media (min-width:1000px){
    .dial{width:min(32vw,40svh,290px)}
    .sheet{border-radius:30px; margin:0 16px 18px; box-shadow:0 24px 60px -24px rgba(0,0,0,.6)}
  }
  @media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}