*{box-sizing:border-box}
:root{--bg:#061329;--card:#0b1b36;--line:#314a74;--pink:#f176bf;--violet:#a576f5;--blue:#58a5ff;--text:#f8f9ff;--muted:#aab6cf}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -10%,#122a51,#061329 43%,#04101f);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input{font:inherit}
.app{max-width:820px;margin:auto;padding:calc(env(safe-area-inset-top) + 18px) 16px calc(env(safe-area-inset-bottom) + 30px)}
header{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;margin-bottom:18px}
h1{text-align:center;font-size:clamp(16px,4vw,23px);letter-spacing:.13em;font-weight:500;color:#f5f0fb;white-space:nowrap}
.logo{font-size:35px;color:var(--pink)}
#help{width:40px;height:40px;border-radius:50%;border:2px solid #d7cdfa;background:none;color:#fff;font-size:21px;font-weight:800}
.tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid #53658c;border-radius:24px;overflow:hidden;background:#0b1931}
.tab{border:0;background:none;color:white;padding:10px;min-height:70px;font-size:19px;font-weight:800}
.tab small{display:block;font-size:12px;font-weight:500;margin-top:3px}
.tab.active{background:linear-gradient(90deg,#7259c2,#d167aa)}
.datebox{display:grid;grid-template-columns:1fr 1px 1fr;gap:20px;align-items:center;background:linear-gradient(#0b1c38,#09172e);border:1px solid #233b62;border-radius:20px;padding:18px;margin-top:17px}
.datebox i{height:50px;background:#2c4166}
.datebox label{display:block;color:var(--pink);font-weight:800;margin-bottom:5px}
.datebox input,.datebox output{width:100%;background:none;border:0;color:#fff;color-scheme:dark;font-size:clamp(17px,5vw,27px);font-weight:750}
.sub{text-align:center;color:#8f9cb8;font-size:13px;margin:14px 0 10px}
.wheelbox{text-align:center}
.wheel{width:min(86vw,580px);aspect-ratio:1;margin:8px auto 6px;position:relative;border-radius:50%;border:2px solid #8067cc;background:#081a35;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 0 35px rgba(74,122,229,.12) inset;overscroll-behavior:contain}
.rotor{position:absolute;inset:0;border-radius:50%;will-change:transform;transform:rotate(0deg);transition:transform 70ms linear}
.wheel.dragging .rotor{transition:none}
.ticks{position:absolute;inset:7px;border-radius:50%;background:repeating-conic-gradient(rgba(255,255,255,.35) 0 .7deg,transparent .7deg 4.39deg);mask:radial-gradient(circle,transparent 0 91%,#000 91.5%)}
.progress{position:absolute;inset:17%;border-radius:50%;background:conic-gradient(from -90deg,var(--pink) 0deg,var(--violet) 110deg,var(--blue) 220deg,var(--pink) 360deg);mask:radial-gradient(circle,transparent 0 95%,#000 96%)}
.pointer{position:absolute;z-index:8;left:50%;top:-4px;transform:translateX(-50%);color:var(--pink);font-size:28px}
.hub{position:absolute;inset:27%;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle,#0c2348,#081a35);box-shadow:0 0 0 2px #334f82,0 0 0 10px rgba(109,116,230,.08);z-index:7}
.hub em{font-style:normal;color:var(--pink);font-size:clamp(9px,2.5vw,15px);font-weight:800}
.hub strong{font-size:clamp(28px,8vw,62px);line-height:1;margin:8px 0 4px;white-space:nowrap;letter-spacing:-.035em}
.hub>span,.hub small{font-size:clamp(10px,2.3vw,14px);color:#c2c9dc}
.hub hr{width:60%;border:0;border-top:1px solid #324c74;margin:11px 0}
.hub b{font-size:clamp(13px,3vw,20px);margin:4px 0;white-space:nowrap}
.drag-delta{min-height:24px;margin:0 0 4px;padding:3px 10px;border-radius:999px;color:#fff;background:rgba(241,118,191,.13);border:1px solid rgba(241,118,191,.35);font-weight:800;font-size:clamp(12px,3vw,16px);opacity:0;transform:scale(.92);transition:opacity .12s ease,transform .12s ease}
.wheel.dragging .drag-delta{opacity:1;transform:scale(1)}
.drag-delta.positive{color:#ff93cf}.drag-delta.negative{color:#7dbaff}
.milestone{position:absolute;z-index:6;width:74px;transform:translate(-50%,-50%);font-size:clamp(8px,1.8vw,12px);pointer-events:none}
.milestone b,.milestone span{display:block}.milestone b{color:var(--pink);font-size:clamp(11px,2.4vw,17px)}
.m0{left:50%;top:9%}.m2{left:71%;top:14%}.m11{left:89%;top:32%}.m14{left:90%;top:63%}.m22{left:74%;top:87%}.m22 b{color:var(--violet)}.m32{left:49%;top:92%}.m32 b{color:var(--blue)}.m41{left:11%;top:51%}
.hint{font-size:12px;color:#8795b3;margin:10px 0 10px}
.ghost,.share{border:1px solid #405983;border-radius:13px;background:#0a1a35;color:#dce4f8;padding:10px 15px}
.panel{margin:22px 0}.panel h2{font-size:18px;margin:14px 0 9px}
.convert{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;border:1px solid #38517b;border-radius:17px;padding:13px;background:#091a35}
.convert input{min-width:0;background:none;border:0;color:white;color-scheme:dark;font-weight:700}.convert output{color:var(--blue);font-weight:800;text-align:right}.convert>span{color:#73adff}.terminput{grid-template-columns:55px auto 50px auto 1fr}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.card{border:1px solid #2f466d;border-radius:15px;padding:12px;background:#0a1a35;text-align:left;color:#fff}.card b{display:block;color:#e97fc5}.card span{font-size:12px;color:#aebad3}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.quick button{border:1px solid #354e78;background:#0b1b37;color:white;border-radius:13px;padding:12px 5px;font-weight:750}
.copy{width:100%;border:1px solid #6b628f;background:linear-gradient(90deg,rgba(116,79,176,.28),rgba(87,73,137,.18));border-radius:19px;padding:18px;color:white;text-align:left}.copy strong{display:block;color:#f17cc0;margin-bottom:7px}.copy span{font-size:12px;color:#c7cde0}
.share{width:100%;margin-top:10px}footer{text-align:center;color:#71819f;font-size:11px;margin:25px 0}
dialog{border:1px solid #4e608b;border-radius:20px;background:#0a1a35;color:white;max-width:430px}dialog::backdrop{background:#000a}dialog button{border:0;border-radius:10px;padding:10px 15px;background:#a95fc7;color:white}
@media(max-width:520px){
  .app{padding-left:11px;padding-right:11px}
  header{margin-bottom:14px}
  h1{font-size:clamp(14px,4vw,19px)}
  .tabs .tab{min-height:64px;font-size:17px}
  .datebox{gap:10px;padding:13px;margin-top:13px}
  .sub{margin:12px 0 6px}
  .wheel{width:min(84vw,430px)}
  .hub{inset:25.5%}
  .hub strong{font-size:clamp(25px,7.5vw,42px)}
  .grid{grid-template-columns:1fr 1fr}
  .quick{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:900px){.wheel{width:min(62vh,560px)}}