:root{
  --text:#2C2C2B; --muted:#7D7A75; --canvas:#FFFFFF; --soft:#F9F8F7;
  --surface:#F0EFED; --border:#E6E5E3; --accent:#2783DE; --accent-soft:#E5F2FC;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--text); background:var(--soft); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.app{max-width:520px; margin:0 auto; padding:20px 16px 48px}
header{text-align:center; margin-bottom:8px}
header h1{font-size:22px; margin:0 0 4px}
header p{margin:0; color:var(--muted); font-size:14px}
.topbar{display:flex; justify-content:flex-end; margin-bottom:4px}
.topbar a{font-size:13px; color:var(--accent); text-decoration:none; padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:var(--canvas)}
.topbar a:hover{background:var(--accent-soft)}

.wheel-wrap{position:relative; width:100%; max-width:420px; margin:8px auto 0; aspect-ratio:1/1}
svg#wheel{display:block; width:100%; height:100%; touch-action:none; cursor:grab}
svg#wheel:active{cursor:grabbing}
#wheelGroup{transform-box:view-box; transform-origin:200px 200px}
#wheelGroup path{stroke:#fff; stroke-width:1; transition:opacity .2s}
#wheelGroup path.seg{opacity:.62}
#wheelGroup path.seg.active{opacity:1; stroke:#2C2C2B; stroke-width:1.6}
#wheelGroup text{fill:#3a3a38; pointer-events:none; font-weight:600; user-select:none}
#wheelGroup text.lblCore{fill:#fff; font-weight:700}

.hub-emoji{font-size:30px}
.pointer{fill:var(--text)}

.controls{max-width:420px; margin:14px auto 0; display:flex; align-items:center; gap:10px}
.controls label{font-size:12px; color:var(--muted); white-space:nowrap}
input[type=range]{flex:1; accent-color:var(--accent); height:28px}

.detail{max-width:420px; margin:16px auto 0; background:var(--canvas); border:1px solid var(--border);
  border-radius:12px; padding:16px}
.detail .cat{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); font-weight:600}
.detail .dot{width:12px; height:12px; border-radius:50%; display:inline-block}
.detail .spesifik{font-size:24px; font-weight:700; margin:6px 0 6px}
.detail .desc{font-size:15px; color:#4a4844}

form{max-width:420px; margin:14px auto 0}
form label.flabel{display:block; font-size:13px; font-weight:600; margin-bottom:6px}
form label.flabel span{color:var(--muted); font-weight:400}
textarea{width:100%; min-height:96px; resize:vertical; padding:12px; font:inherit;
  border:1px solid var(--border); border-radius:10px; background:var(--canvas)}
textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.actions{display:flex; align-items:center; gap:12px; margin-top:12px}
button.save{background:var(--accent); color:#fff; border:none; border-radius:10px;
  padding:12px 22px; font-size:15px; font-weight:600; cursor:pointer; min-height:44px}
button.save:hover{background:#1f6fc0}
button.save:disabled{opacity:.6; cursor:default}
.hint{font-size:13px; color:var(--muted)}

.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:#46A171; color:#fff; padding:12px 20px; border-radius:10px; font-size:14px; font-weight:600;
  opacity:0; pointer-events:none; transition:.3s; box-shadow:0 4px 12px rgba(0,0,0,.15)}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.err{background:#E56458}

/* history page */
.tbl{width:100%; border-collapse:collapse; background:var(--canvas); border:1px solid var(--border); border-radius:12px; overflow:hidden}
.tbl th,.tbl td{padding:10px 12px; text-align:left; font-size:14px; border-bottom:1px solid var(--border); vertical-align:top}
.tbl th{background:var(--surface); font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted)}
.tbl tr:last-child td{border-bottom:none}
.badge{display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:13px}
.badge .dot{width:10px;height:10px;border-radius:50%}
.del{color:#E56458; text-decoration:none; font-size:13px}
.empty{text-align:center; color:var(--muted); padding:40px 0}
@media (max-width:600px){ .hide-sm{display:none} }