:root{
  --bg:#0b1220; --bg2:#0d1324; --card:#0f1528; --glass:rgba(255,255,255,.04);
  --fg:#e9eefb; --muted:#9fb0d0; --acc:#5b8cff; --acc2:#80ffd4; --warn:#ffd166;
  --shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,#09101d 0%,#0b1220 100%);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Noto Sans',sans-serif}
.bg-grad{position:fixed;inset:-20% -20% auto -20%; height:40vh; background:radial-gradient(60% 80% at 50% 30%, rgba(91,140,255,.35), transparent), radial-gradient(50% 70% at 70% 0%, rgba(128,255,212,.25), transparent); filter:blur(40px); pointer-events:none;}
.container{max-width:1100px;margin:0 auto;padding:16px}
header{text-align:center;padding-top:28px}
h1{margin:0;font-size:28px;letter-spacing:.5px}
.subtitle{color:var(--muted);margin-top:8px}
.pill{background:linear-gradient(90deg,var(--acc),var(--acc2));color:#081021;border-radius:999px;padding:2px 8px;margin-left:8px;font-size:12px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.grid > .card:nth-child(1){grid-column:span 12}
.grid > #result{grid-column:span 7}
.grid > #texts{grid-column:span 5}
.grid > #history{grid-column:span 12}
@media (max-width: 980px){
  .grid > #result, .grid > #texts{grid-column:span 12}
}

.card{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px; box-shadow:var(--shadow); backdrop-filter: blur(6px);}
.lbl{display:block;margin-bottom:8px;color:var(--muted)}
textarea,input{width:100%;border:1px solid rgba(255,255,255,.12);background:rgba(8,16,33,.6);color:var(--fg);border-radius:12px;padding:12px 14px;outline:none}
textarea:focus,input:focus{border-color:var(--acc)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.actions{gap:10px}
.btn-primary{background:linear-gradient(90deg,var(--acc),#6da7ff);border:none;color:#07122b;font-weight:800;border-radius:12px;padding:12px 16px;cursor:pointer;box-shadow:0 8px 20px rgba(91,140,255,.35)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--fg);border-radius:12px;padding:10px 14px;cursor:pointer}
.btn-ghost.small{padding:6px 10px;font-size:12px}
.hidden{display:none}
.mt{margin-top:12px}
.mono{font-family:ui-monospace,Menlo,monospace}
.lineRow{display:flex;gap:10px;align-items:center;padding:6px 0;border-top:1px dashed rgba(255,255,255,.08)}
.lineRow:first-child{border-top:none}
.lineBadge{width:64px;color:#c7d7ff}
.meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:640px){.meta{grid-template-columns:1fr}}
.badge{background:rgba(255,255,255,.08);padding:2px 8px;border-radius:999px;margin-left:6px;font-size:12px}
.hint{color:var(--muted);font-size:12px}

.tabs{display:flex;gap:8px;margin-bottom:8px}
.tab{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--fg);border-radius:10px;padding:8px 10px;cursor:pointer}
.tab.active{background:linear-gradient(90deg,var(--acc),#6da7ff);color:#061022;border-color:transparent}
.tabpane{display:none}
.tabpane.active{display:block}

.between{justify-content:space-between}
.histItem{border-top:1px dashed rgba(255,255,255,.08);padding:10px 0}
.histItem:first-child{border-top:none}
.histTitle{font-weight:700}

.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);backdrop-filter: blur(6px);z-index:50}
.modal.hidden{display:none}
.modal-content{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow);width:min(560px,90vw);text-align:center}
.modal-title{font-weight:800;margin-bottom:8px}
.modal-hint{color:var(--muted);font-size:12px;margin-top:8px}
.coins{display:flex;gap:16px;justify-content:center;align-items:center;margin-top:8px}
.coin{width:64px;height:64px;border-radius:50%;position:relative;transform-style:preserve-3d;transition: transform .6s cubic-bezier(.2,.7,.2,1);box-shadow:0 8px 16px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.1);background: radial-gradient(circle at 30% 30%, #f6f6f6, #d4d4d4);}
.coin .face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;font-weight:900;font-size:26px;color:#222;backface-visibility:hidden;}
.coin .front{}
.coin .back{transform:rotateY(180deg);background: radial-gradient(circle at 30% 30%, #333, #111); color:#eee;}
.coin.flip{transform:rotateY(540deg);} /* 1.5 turns */
.progress{height:6px;background:rgba(255,255,255,.08);border-radius:999px;margin-top:12px;overflow:hidden}
.progress .bar{height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .2s ease}