/* Shared styles */
:root{
  --pink:#e43a82;
  --pink-dark:#c22f6e;
  --gold:#f0ab00;
  --blue:#2c6fbe;
  --teal:#36b398;
  --bg1:#e7a3bb;
  --bg2:#7b699f;
  --panel:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;color:#141414}
html{scroll-behavior:smooth}

/* Backgrounds */
.bg-app{
  background: radial-gradient(1200px 600px at 55% -200px, rgba(255,255,255,.18), transparent),
              linear-gradient(135deg, #f0a3b8 0%, #b774a7 40%, #6f6aa6 100%);
}
.bg-about{
  background: linear-gradient(180deg, #e3b6c1 0%, #b689ad 45%, #7b84ae 100%);
}

/* Layout */
.sidebar{
  position:fixed; inset:0 auto 0 0; width:300px; background:#2e1f25; color:#fff; padding:24px 20px; border-right:8px solid #251920;
}
.brand{font-size:28px; font-weight:800; letter-spacing:.5px; margin:8px 4px 24px}
.btn{border:0; background:#fff; color:#222; padding:10px 16px; border-radius:10px; cursor:pointer}
.btn.pill{border-radius:999px; font-weight:700}
.btn.full{width:100%; background:#fff; color:#111}
.side-nav{display:flex; flex-direction:column; gap:18px; margin-top:26px}
.side-nav a{color:#fff; text-decoration:none; font-weight:700; opacity:.9}
.side-nav a:hover{opacity:1}

.topbar{position:fixed; left:300px; right:0; top:0; height:60px; display:flex; align-items:center; gap:24px; padding:0 24px; color:#fff}
.topbar nav a{color:#fff; font-weight:800; text-decoration:none; margin-right:18px; opacity:.95}
.topbar nav a.active{opacity:1}
.topbar .spacer{flex:1}

.content{position:relative; margin-left:300px; padding:80px 24px 40px; display:flex; gap:24px}
.wheel-section{flex:1; min-width:520px}
.right-panel{width:360px; background:rgba(255,255,255,.8); border-radius:8px; padding:12px; box-shadow:0 6px 20px rgba(0,0,0,.15)}

/* Fake panel */
.panel-head{display:flex; gap:16px; font-weight:700; color:#333}
.panel-body{border:1px solid #d8d8d8; border-radius:6px; background:#fff; margin-top:10px; height:420px; padding:8px; overflow:auto}
.fake-list>div{padding:4px 2px; color:#444; font-size:14px}
.dock{margin-top:14px; background:#56d09f22; padding:10px; border-radius:8px; display:flex; justify-content:space-around}
.dock .icon{width:36px;height:36px;border-radius:999px;border:0;background:#e5f7ef; font-size:18px}

/* Wheel */
.wheel-wrapper{position:relative; width:min(72vmin,640px); aspect-ratio:1; margin:10px auto 0}
.pointer{position:absolute; left:50%; top:-14px; transform:translateX(-50%); width:68px; height:68px; background:#fff; clip-path:polygon(0 0,100% 0,100% 40%,50% 100%,0 40%); box-shadow:0 6px 18px rgba(0,0,0,.15); z-index:3}
.rim.outer{position:absolute; inset:0; padding:24px; border-radius:50%; background:var(--pink)}
.rim.inner{position:absolute; inset:24px; padding:14px; border-radius:50%; background:#fff}
.wheel{position:absolute; inset:38px; border-radius:50%;
  background:
    conic-gradient(
      #f04295 0 45deg,
      var(--teal) 45deg 90deg,
      var(--blue) 90deg 135deg,
      var(--gold) 135deg 180deg,
      #f04295 180deg 225deg,
      var(--teal) 225deg 270deg,
      var(--blue) 270deg 315deg,
      var(--gold) 315deg 360deg
    );
  box-shadow: inset 0 0 0 10px #ffffffaa;
}
.hub{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:56px; height:56px; background:#fff; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:900; color:#333; z-index:2; box-shadow:0 2px 6px rgba(0,0,0,.2); cursor:pointer}
.hub:disabled{opacity:.6; cursor:not-allowed}
.labels{position:absolute; inset:0; border-radius:50%; pointer-events:none}
.label{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; font-size:22px; font-weight:900; color:#111; transform-origin:center; white-space:nowrap;}

/* Actions & input */
.actions{display:flex; justify-content:space-between; align-items:center; gap:16px; max-width:720px; margin:18px auto}
.btn.link{background:transparent; color:#1a1a1a; font-weight:900; font-size:22px}
.single-input{flex:1; min-width:160px; max-width:320px; height:40px; border-radius:10px; border:2px solid #00d2c6; padding:0 10px; font-size:14px; background:#ffffffcc}

.result{max-width:620px; margin:10px auto 0; text-align:center; font-weight:900; font-size:20px; color:#111}
.result-actions{max-width:620px; margin:8px auto 0; text-align:center}

/* About page */
.left-actions{display:flex; gap:6px; flex-wrap:wrap}
.right-actions{display:flex; gap:8px; align-items:center}
.mode span{font-weight:800; color:#111; margin-right:8px}
.mode select{border-radius:10px; padding:8px 10px; border:1px solid #d0d0d0}
.btn.small{padding:6px 10px; font-size:12px; font-weight:700}
.list .row{display:flex; align-items:center; justify-content:space-between; gap:6px; padding:6px 4px; border-bottom:1px dashed #eee}
.list .row .text{font-size:14px; color:#333; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.list .row button{border:0; background:transparent; cursor:pointer; font-size:14px}
.list.entries .row button{color:#c22f6e}
.list.history .row .badge{font-size:10px; padding:2px 6px; border-radius:999px; background:#eef2ff; color:#334}
.divider{margin:10px 0; border:none; border-top:1px solid #eee}
.history-head{display:flex; align-items:center; justify-content:space-between; padding:4px 2px; font-weight:800; color:#333}

/* Tabs */
.tabs{display:flex; gap:10px}
.tabs .tab{background:transparent; border:0; font-weight:800; color:#555; cursor:pointer; padding:6px 8px; border-bottom:3px solid transparent}
.tabs .tab.active{color:#111; border-bottom-color:#111}
.pane{display:none}
.pane.active{display:block}
.about-top{padding:18px 20px; color:#fff; font-weight:800}
.brand-link{color:#fff; text-decoration:none}
.about-wrap{max-width:760px; margin:20px auto 60px; background:rgba(255,255,255,.12); padding:24px; color:#111}
.about-wrap h1{font-size:36px; margin:0 0 8px}
.about-wrap h2{margin-top:28px}
.tick-list li::marker{content:"✔  "}
.emoji-list{line-height:1.6}

.about-footer{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; color:#111; max-width:900px; margin:0 auto 24px; padding:16px}
.about-footer a{color:#111; text-decoration:none}
.about-footer .copy{grid-column:1/-1; text-align:center; font-size:12px; opacity:.8; margin-top:8px}

/* Responsive */
@media (max-width: 1100px){
  .right-panel{display:none}
}
@media (max-width: 800px){
  .sidebar{position:static; width:auto}
  .topbar{left:0}
  .content{margin-left:0; flex-direction:column; align-items:stretch}
  .wheel-section{min-width:0}
}