*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden;max-width:100%}
body{background:#f7f8fc;font-family:'Inter',sans-serif;color:#111;min-height:100vh}

/* ── NAV ── */
.nav{background:transparent;border-bottom:none}.nav-inner{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:20px 40px}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logo-icon{width:36px;height:36px}
.nav-logo-text{font-size:22px;font-weight:800;color:#111;letter-spacing:-0.03em}
.nav-logo-text span{color:#3B6EF8}
.lang-wrapper{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;background:transparent;border:1.5px solid #ddd;border-radius:40px;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;color:#666;cursor:pointer;letter-spacing:0.04em;transition:all .15s}
.lang-btn:hover,.lang-btn.open{border-color:#3B6EF8;color:#3B6EF8}
.lang-btn .arrow{font-size:8px;transition:transform .2s}
.lang-btn.open .arrow{transform:rotate(180deg)}
.lang-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid #eee;border-radius:12px;overflow:hidden;min-width:90px;box-shadow:0 4px 20px rgba(0,0,0,0.08);z-index:10}
.lang-dropdown.open{display:block}
.lang-option{display:block;padding:10px 16px;font-size:12px;font-weight:500;color:#888;cursor:pointer;transition:background .1s}
.lang-option:hover{background:#f5f7ff;color:#3B6EF8}
.lang-option.active{color:#3B6EF8;font-weight:700}

/* ── HERO ── */
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:32px;padding:60px 40px 40px;max-width:1200px;margin:0 auto}
.hero-tag{font-size:11px;font-weight:700;color:#999;letter-spacing:.15em;text-transform:uppercase;margin-bottom:16px}
.hero h1{font-size:clamp(36px,5.5vw,64px);font-weight:800;line-height:1.05;letter-spacing:-0.04em;color:#111;margin-bottom:20px;white-space:nowrap}@media(max-width:768px){.hero h1{font-size:52px!important;white-space:normal!important}}
.hero h1 .blue{color:#3B6EF8}
.hero-sub{font-size:16px;color:#888;line-height:1.65;max-width:520px;margin-bottom:32px}
.hero-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:#3B6EF8;color:#fff;border:none;border-radius:40px;font-family:'Inter',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:all .15s;text-decoration:none}
.hero-btn:hover{background:#2a5ae0;transform:translateY(-1px)}
.hero-btn svg{width:18px;height:18px}
.hero-image{display:flex;justify-content:flex-end;align-items:center}
@media(max-width:768px){.hero{grid-template-columns:1fr;padding:40px 16px 32px}.hero-image{display:none!important}}
.hero-image img{width:100%;max-width:480px;object-fit:contain}

/* ── GRID ── */
.tools-section{max-width:1200px;margin:0 auto;padding:0 40px 80px}
@media(max-width:768px){.tools-section{padding:0 16px 60px}}
.tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.tools-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.tools-grid{grid-template-columns:repeat(2,1fr);gap:10px}}

.card{border-radius:20px;padding:0;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;border:1px solid #eee;overflow:hidden;position:relative}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(59,110,248,.12)}
.card-img-wrap{height:160px;display:flex;align-items:center;justify-content:center;padding:24px 20px 12px}
.card-img{height:110px;width:auto;max-width:100%;object-fit:contain}
.card-body{padding:12px 20px 20px;display:flex;flex-direction:column;flex:1}
.card-title{font-size:15px;font-weight:700;color:#111;margin-bottom:4px;letter-spacing:-0.01em}
.card-desc{font-size:13px;color:#999;line-height:1.5;flex:1}
.card-arrow{position:absolute;bottom:16px;right:16px;width:34px;height:34px;border-radius:50%;border:2px solid #ccc;display:flex;align-items:center;justify-content:center;color:#999;font-size:15px;font-weight:700;transition:all .15s;background:#fff;line-height:1}
.card:hover .card-arrow{background:#3B6EF8;border-color:#3B6EF8;color:#fff}
.card-body{padding-right:52px}

/* Card bg colors */
.card-1{background:linear-gradient(160deg,#fff0ef 0%,#fff 60%)}
.card-2{background:linear-gradient(160deg,#eef2ff 0%,#fff 60%)}
.card-3{background:linear-gradient(160deg,#edfff4 0%,#fff 60%)}
.card-4{background:linear-gradient(160deg,#fffbeb 0%,#fff 60%)}
.card-5{background:linear-gradient(160deg,#eef2ff 0%,#fff 60%)}
.card-6{background:linear-gradient(160deg,#ffeff5 0%,#fff 60%)}
.card-7{background:linear-gradient(160deg,#edfff4 0%,#fff 60%)}
.card-8{background:linear-gradient(160deg,#f3eeff 0%,#fff 60%)}

/* ── FOOTER ── */
.footer{background:#fff;border-top:1px solid #eee}.footer .nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;max-width:1200px;margin:0 auto;padding:28px 40px;gap:16px}.footer-right{text-align:right;font-size:12px;color:#bbb}
@media(max-width:768px){.nav{padding:0}.footer{padding:0}.nav-inner{padding-left:16px;padding-right:16px}.footer .nav-inner{grid-template-columns:1fr;text-align:center;gap:12px;padding:24px 16px}.footer-right{text-align:center}.footer-left{order:3}.footer-links{order:1;justify-content:center}.footer-right{order:2}}
.footer-logo{font-size:15px;font-weight:800;color:#111;letter-spacing:-0.02em}
.footer-logo span{color:#3B6EF8}
.footer-links{display:flex;gap:24px}
.footer-links a{font-size:13px;color:#999;text-decoration:none;transition:color .15s}
.footer-links a:hover{color:#3B6EF8}
.footer-right{font-size:12px;color:#bbb}

/* ── TOOLS FOOTER ── */
.tools-footer{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#e8eaf0;border:1px solid #e8eaf0;border-radius:16px;overflow:hidden;margin-top:24px}
@media(max-width:768px){.tools-footer{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.tools-footer{grid-template-columns:1fr}}
.tools-footer-item{background:#fff;padding:24px 20px;display:flex;flex-direction:column;gap:8px}
.tools-footer-text{display:flex;flex-direction:column;gap:3px}
.tools-footer-text strong{font-size:13px;font-weight:700;color:#111}
.tools-footer-text span{font-size:12px;color:#aaa;line-height:1.5}

/* ── COOKIE ── */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:1000;padding:0 24px 24px;display:flex;justify-content:center;pointer-events:none}
.cookie-inner{background:#111;color:#f5f2eb;border-radius:16px;padding:18px 24px;display:flex;align-items:center;gap:20px;max-width:760px;width:100%;box-shadow:0 8px 32px rgba(0,0,0,.18);pointer-events:all;animation:slideUp .4s ease}
@keyframes slideUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
.cookie-text{font-size:14px;color:#aaa;line-height:1.55;flex:1}
.cookie-text a{color:#fff;font-weight:500}
.cookie-accept{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;color:#111;background:#f5f2eb;border:none;border-radius:40px;padding:10px 22px;cursor:pointer;white-space:nowrap;flex-shrink:0}
.cookie-accept:hover{opacity:.85}
@media(max-width:600px){.cookie-banner{padding:0 16px 16px}.cookie-inner{flex-direction:column;gap:14px}.cookie-accept{width:100%;text-align:center;padding:12px}}


/* ── TOOL PAGES ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden;max-width:100%}
body{background:#f7f8fc;font-family:'Inter',sans-serif;color:#111;min-height:100vh}

/* NAV */
.nav{background:transparent;border-bottom:none}
.nav-logo{text-decoration:none}
.nav-logo-text{font-size:22px;font-weight:800;color:#111;letter-spacing:-0.03em}
.nav-logo-text span{color:#3B6EF8}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-back{font-size:13px;font-weight:500;color:#888;text-decoration:none;transition:color .15s}
.nav-back:hover{color:#3B6EF8}

/* LANG */
.lang-wrapper{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;background:transparent;border:1.5px solid #ddd;border-radius:40px;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;color:#666;cursor:pointer;letter-spacing:0.04em;transition:all .15s}
.lang-btn:hover,.lang-btn.open{border-color:#3B6EF8;color:#3B6EF8}
.lang-btn .arrow{font-size:8px;transition:transform .2s}
.lang-btn.open .arrow{transform:rotate(180deg)}
.lang-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid #eee;border-radius:12px;overflow:hidden;min-width:90px;box-shadow:0 4px 20px rgba(0,0,0,0.08);z-index:10}
.lang-dropdown.open{display:block}
.lang-option{display:block;padding:10px 16px;font-size:12px;font-weight:500;color:#888;cursor:pointer;transition:background .1s}
.lang-option:hover{background:#f5f7ff;color:#3B6EF8}
.lang-option.active{color:#3B6EF8;font-weight:700}

/* PAGE */
.page{padding:40px 40px 80px;max-width:1200px;margin:0 auto}
@media(max-width:768px){.page{padding:28px 20px 60px}}
.page-title{font-size:clamp(32px,5vw,48px);font-weight:800;letter-spacing:-0.04em;color:#111;line-height:1.05;margin-bottom:8px}
.page-sub{font-size:16px;color:#999;margin-bottom:36px;line-height:1.6}

/* BUTTONS */
.btn-primary{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:#fff;background:#3B6EF8;border:none;border-radius:40px;padding:14px 40px;cursor:pointer;transition:all .15s}
.btn-primary:hover{background:#2a5ae0}
.btn-primary:disabled{opacity:.4;cursor:not-allowed}
.btn-secondary{font-family:'Inter',sans-serif;font-size:12px;font-weight:500;color:#aaa;background:transparent;border:1.5px solid #ddd;border-radius:40px;padding:12px 20px;cursor:pointer;transition:all .15s;white-space:nowrap}
.btn-secondary:hover{border-color:#3B6EF8;color:#3B6EF8}

/* RESULT */
.result-box{background:#EEF2FF;border:1.5px solid #C7D7FD;border-radius:12px;padding:14px 24px;text-align:center;transition:opacity .3s}
.result-box.hidden{opacity:0;pointer-events:none}
.result-label{font-size:10px;font-weight:600;color:#3B6EF8;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.result-value{font-size:18px;font-weight:700;color:#111}

/* HISTORY */
.history-title{font-size:11px;font-weight:600;color:#aaa;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.history-list{display:flex;flex-direction:column;gap:8px}
.history-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#fff;border:1px solid #eee;border-radius:10px}

/* SEO */
.seo-section{margin-top:72px;border-top:1px solid #eee;padding-top:56px;display:flex;flex-direction:column;gap:48px}
.seo-block h2{font-size:20px;font-weight:700;color:#111;letter-spacing:-0.02em;margin-bottom:14px}
.seo-block p{font-size:15px;color:#666;line-height:1.8;margin-bottom:12px}
.use-cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:4px}
.use-case{background:#fff;border:1px solid #eee;border-radius:10px;padding:14px 16px;font-size:14px;color:#555;line-height:1.4}
.use-case strong{display:block;font-size:10px;font-weight:700;color:#aaa;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.how-to-list{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.how-to-item{display:flex;align-items:flex-start;gap:16px;padding:16px 18px;background:#fff;border:1px solid #eee;border-radius:12px}
.how-to-num{font-size:13px;font-weight:700;color:#ccc;flex-shrink:0;min-width:24px}
.how-to-text{font-size:14px;color:#555;line-height:1.55}
.how-to-text strong{color:#111;font-weight:600}









/* FOOTER */
.footer{background:#fff;border-top:1px solid #eee}
.footer-right{text-align:right;font-size:12px;color:#bbb}
.footer-links{display:flex;align-items:center;justify-content:center;gap:24px}
.footer-links a{font-size:13px;color:#999;text-decoration:none;transition:color .15s}
.footer-links a:hover{color:#3B6EF8}
@media(max-width:768px){
  .nav{padding:0}
  .footer{padding:0}
  .nav-inner{padding-left:16px;padding-right:16px}.footer .nav-inner{grid-template-columns:1fr;text-align:center;gap:12px;padding:24px 16px}
  .footer-right{text-align:center}
  .footer-left{order:3}
  .footer-links{order:1;justify-content:center}
  .footer-right{order:2}
}

/* COOKIE */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:1000;padding:0 24px 24px;display:flex;justify-content:center;pointer-events:none}
.cookie-inner{background:#111;color:#f5f2eb;border-radius:16px;padding:18px 24px;display:flex;align-items:center;gap:20px;max-width:760px;width:100%;box-shadow:0 8px 32px rgba(0,0,0,.18);pointer-events:all;animation:slideUp .4s ease}
@keyframes slideUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
.cookie-text{font-size:14px;color:#aaa;line-height:1.55;flex:1}
.cookie-text a{color:#fff;font-weight:500}
.cookie-accept{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;color:#111;background:#f5f2eb;border:none;border-radius:40px;padding:10px 22px;cursor:pointer;white-space:nowrap;flex-shrink:0}
.cookie-accept:hover{opacity:.85}
@media(max-width:600px){.cookie-banner{padding:0 16px 16px}.cookie-inner{flex-direction:column;gap:14px}.cookie-accept{width:100%;text-align:center;padding:12px}}

/* ── TOOL-SPECIFIC LAYOUTS ── */

/* Two-column layout (wheel, number, coin, name, yn, ball) */
.main{display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:start;max-width:100%}
@media(max-width:720px){.main{grid-template-columns:1fr;gap:32px}}
.left{display:flex;flex-direction:column;align-items:flex-start;gap:24px;width:100%}
.right{display:flex;flex-direction:column}

/* Team generator */
.main.two-col{grid-template-columns:1fr 1fr}

/* ── RANDOM NUMBER ── */
.num-display{width:100%;background:#fff;border:2px solid #eee;border-radius:20px;padding:32px;text-align:center;height:220px;display:flex;align-items:center;justify-content:center;transition:border-color .3s}
.num-display.active{border-color:#3B6EF8}
.nv{font-family:'Inter',sans-serif;font-size:clamp(64px,12vw,96px);font-weight:800;color:#111;letter-spacing:-.04em;line-height:1}
.nv.empty{color:#ddd;font-size:48px}
.range-row{display:flex;align-items:center;gap:12px;width:100%}
.rl{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;color:#aaa;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.ri{flex:1;font-family:'Inter',sans-serif;font-size:16px;font-weight:700;padding:12px 16px;background:#fff;border:1.5px solid #eee;border-radius:10px;color:#111;outline:none;text-align:center;transition:border-color .15s}
.ri:focus{border-color:#3B6EF8}
.rs{font-family:'Inter',sans-serif;color:#ddd;font-size:18px}
.presets{display:flex;gap:8px;width:100%}
.preset{flex:1;font-family:'Inter',sans-serif;font-size:11px;font-weight:500;color:#aaa;background:#fff;border:1.5px solid #eee;border-radius:8px;padding:8px 4px;cursor:pointer;transition:all .15s;text-align:center}
.preset:hover{border-color:#3B6EF8;color:#3B6EF8}
.gen-btn{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:#fff;background:#3B6EF8;border:none;border-radius:40px;padding:14px 48px;cursor:pointer;width:100%;transition:all .15s}
.gen-btn:hover{background:#2a5ae0}

/* ── WHEEL ── */
.layout{display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:start;max-width:100%}
@media(max-width:720px){.layout{grid-template-columns:1fr;gap:28px}}
.wheel-wrap{display:flex;flex-direction:column;align-items:center;gap:20px}
.wheel-outer{position:relative}
canvas{border-radius:50%;display:block}
.pointer{position:absolute;top:50%;right:-16px;transform:translateY(-50%);width:0;height:0;border-top:12px solid transparent;border-bottom:12px solid transparent;border-right:24px solid #111}
.spin-btn{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:#fff;background:#3B6EF8;border:none;border-radius:40px;padding:14px 40px;cursor:pointer;transition:all .15s}
.spin-btn:hover{background:#2a5ae0}.spin-btn:disabled{opacity:.4;cursor:not-allowed}
.panel{display:flex;flex-direction:column;gap:20px}
.panel-title{font-size:11px;font-weight:600;color:#aaa;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.options-list{display:flex;flex-direction:column;gap:6px}
.option-row{display:flex;align-items:center;gap:8px}
.option-color{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.option-input{flex:1;font-family:'Inter',sans-serif;font-size:14px;padding:9px 12px;background:#fff;border:1px solid #eee;border-radius:8px;color:#111;outline:none}
.option-input:focus{border-color:#3B6EF8}
.option-remove{width:26px;height:26px;border:none;background:none;color:#ccc;font-size:18px;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center}
.option-remove:hover{color:#111;background:#eee}
.add-btn{font-family:'Inter',sans-serif;font-size:11px;color:#aaa;background:transparent;border:1.5px dashed #ddd;border-radius:8px;padding:10px;cursor:pointer;width:100%;margin-top:8px}
.add-btn:hover{border-color:#3B6EF8;color:#3B6EF8}
.history-section{border-top:1px solid #eee;padding-top:16px}
.hi{font-size:13px;color:#888;display:flex;align-items:center;gap:8px}
.hd{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.hi span{color:#444;font-weight:500}
.rbox{background:#EEF2FF;border:1.5px solid #C7D7FD;border-radius:12px;padding:14px 24px;text-align:center;transition:opacity .3s}
.rbox.hidden{opacity:0;pointer-events:none}

/* ── DICE ── */
.die-types{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.die-type-btn{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;padding:10px 18px;border:1.5px solid #ddd;border-radius:40px;background:transparent;color:#888;cursor:pointer;transition:all .15s}
.die-type-btn:hover{border-color:#3B6EF8;color:#3B6EF8}.die-type-btn.active{background:#3B6EF8;color:#fff;border-color:#3B6EF8}
.count-row{display:flex;align-items:center;gap:12px;margin-bottom:36px}
.count-label{font-size:11px;font-weight:600;color:#aaa;letter-spacing:.1em;text-transform:uppercase}
.count-btns{display:flex;gap:6px}
.count-btn{width:36px;height:36px;border:1.5px solid #ddd;border-radius:8px;background:transparent;font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:#888;cursor:pointer;transition:all .15s}
.count-btn:hover{border-color:#3B6EF8;color:#3B6EF8}.count-btn.active{background:#3B6EF8;color:#fff;border-color:#3B6EF8}
.dice-area{min-height:180px;display:flex;align-items:center;justify-content:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:32px}
.die-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.die{width:80px;height:80px;background:#fff;border:2px solid #eee;border-radius:14px;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-size:26px;font-weight:800;color:#111}
.die.rolling{animation:shake .5s ease-in-out}
@keyframes shake{0%{transform:rotate(0) scale(1)}15%{transform:rotate(-8deg) scale(1.05)}30%{transform:rotate(8deg) scale(1.05)}100%{transform:rotate(0) scale(1)}}
.die-label{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:#888}
.roll-btn{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:#fff;background:#3B6EF8;border:none;border-radius:40px;padding:14px 48px;cursor:pointer;display:block;margin:0 0 32px;transition:all .15s}
.roll-btn:hover{background:#2a5ae0}.roll-btn:disabled{opacity:.4;cursor:not-allowed}
.result-strip{background:#EEF2FF;border:1.5px solid #C7D7FD;border-radius:12px;padding:14px 20px;display:inline-flex;align-items:center;gap:20px;transition:opacity .3s}
.result-strip.hidden{opacity:0;pointer-events:none}
.rs-item{text-align:center}
.rs-sep{width:1px;height:36px;background:#C7D7FD}
.hr{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#fff;border:1px solid #eee;border-radius:10px}
.ht{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:#111;min-width:52px}
.hd2{font-family:'Inter',sans-serif;font-size:13px;color:#999;flex:1}
.hs{font-family:'Inter',sans-serif;font-weight:700;color:#111;font-size:15px}

/* ── COIN ── */
.coin-scene{perspective:900px;width:340px;height:340px}
.coin{width:340px;height:340px;position:relative;transform-style:preserve-3d;cursor:pointer}
.coin:active{transform:scale(.97)}
.cf{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ch{background:transparent}
.ct{background:transparent;transform:rotateY(180deg)}
.coin-result{font-family:'Inter',sans-serif;font-size:24px;font-weight:800;color:#111;min-height:36px;transition:opacity .3s}
.coin-result.hidden{opacity:0}
.flip-btn{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:#fff;background:#3B6EF8;border:none;border-radius:40px;padding:14px 48px;cursor:pointer;width:100%;max-width:300px;transition:all .15s}
.flip-btn:hover{background:#2a5ae0}.flip-btn:disabled{opacity:.4;cursor:not-allowed}
.stats{display:flex;gap:1px;background:#eee;border:1px solid #eee;border-radius:12px;overflow:hidden;width:100%}
.sb{flex:1;background:#fff;padding:14px 16px;text-align:center}

/* ── NAME PICKER ── */
.nt{width:100%;height:200px;font-family:'Inter',sans-serif;font-size:15px;padding:16px;background:#fff;border:1.5px solid #eee;border-radius:12px;color:#111;resize:none;outline:none;line-height:1.7;transition:border-color .15s}
.nt:focus{border-color:#3B6EF8}.nt::placeholder{color:#ccc}
.hint{font-size:12px;color:#aaa;margin-top:2px}
.rb{background:#EEF2FF;border:1.5px solid #C7D7FD;border-radius:12px;padding:16px 20px}
.rb.hidden{display:none}
.rn{font-family:'Inter',sans-serif;font-size:clamp(22px,4vw,30px);font-weight:800;color:#111}
.rc{font-size:12px;color:#3B6EF8;margin-top:6px}
.cr{display:flex;gap:10px}
.pb{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:#fff;background:#3B6EF8;border:none;border-radius:40px;padding:14px 24px;cursor:pointer;flex:1;transition:all .15s}
.pb:hover{background:#2a5ae0}.pb:disabled{opacity:.4;cursor:not-allowed}
.cb{font-family:'Inter',sans-serif;font-size:12px;color:#aaa;background:transparent;border:1.5px solid #ddd;border-radius:40px;padding:12px 20px;cursor:pointer;white-space:nowrap}
.cb:hover{border-color:#3B6EF8;color:#3B6EF8}
.nc{font-size:11px;color:#aaa;margin-bottom:8px}
.np{display:flex;flex-wrap:wrap;gap:6px}
.pill{font-family:'Inter',sans-serif;font-size:13px;background:#fff;border:1px solid #eee;border-radius:40px;padding:5px 12px;color:#555}
.pill.winner{background:#3B6EF8;color:#fff;border-color:#3B6EF8;font-weight:700}

/* ── TEAM GENERATOR ── */
.tcr{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tcl{font-size:11px;font-weight:600;color:#aaa;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.tcbs{display:flex;gap:6px;flex-wrap:wrap}
.tb{width:36px;height:36px;border:1.5px solid #ddd;border-radius:8px;background:transparent;font-family:'Inter',sans-serif;font-size:12px;font-weight:700;color:#aaa;cursor:pointer;transition:all .15s}
.tb:hover{border-color:#3B6EF8;color:#3B6EF8}.tb.active{background:#3B6EF8;color:#fff;border-color:#3B6EF8}
.gb{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:#fff;background:#3B6EF8;border:none;border-radius:40px;padding:14px 24px;cursor:pointer;flex:1;transition:all .15s}
.gb:hover{background:#2a5ae0}
.tp{font-family:'Inter',sans-serif;font-size:13px;color:#ccc;padding:20px 0}
.tc{background:#fff;border:1px solid #eee;border-radius:12px;overflow:hidden;margin-bottom:10px}
.th2{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #eee}
.td{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.tn{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;color:#111}
.tb2{font-size:11px;color:#bbb;margin-left:auto}
.tm{padding:12px 16px;display:flex;flex-wrap:wrap;gap:6px}
.mp{font-family:'Inter',sans-serif;font-size:13px;background:#f7f8fc;border:1px solid #eee;border-radius:40px;padding:4px 12px;color:#555}

/* ── YES OR NO ── */
.qi{width:100%;font-family:'Inter',sans-serif;font-size:18px;padding:18px 20px;background:#fff;border:1.5px solid #eee;border-radius:14px;color:#111;outline:none;text-align:center;transition:border-color .15s}
.qi:focus{border-color:#3B6EF8}.qi::placeholder{color:#ccc}
.aw{width:100%;min-height:160px;display:flex;align-items:center;justify-content:center;border-radius:20px;background:#fff;border:1.5px solid #eee;transition:background .3s,border-color .3s}
.aw.yes{background:#d4edda;border-color:#a8d5b5}.aw.no{background:#fde8e8;border-color:#f5b8b8}
.at{font-size:clamp(52px,10vw,80px);font-weight:800;letter-spacing:-.03em;color:#111;opacity:0;transform:scale(.7);transition:opacity .25s,transform .25s}
.at.visible{opacity:1;transform:scale(1)}
.ap{font-size:14px;color:#ccc;letter-spacing:.06em}
.ab{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:#fff;background:#3B6EF8;border:none;border-radius:40px;padding:16px 56px;cursor:pointer;width:100%;transition:all .15s}
.ab:hover{background:#2a5ae0}.ab:disabled{opacity:.4;cursor:not-allowed}
.sr{display:flex;gap:1px;background:#eee;border:1px solid #eee;border-radius:12px;overflow:hidden;width:100%}
.hq{font-size:13px;color:#666;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ha{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;white-space:nowrap}
.ha.yes{color:#3a8a52}.ha.no{color:#c04040}

/* ── MAGIC 8 BALL ── */
.bw{position:relative;width:340px;height:340px;cursor:pointer;user-select:none;flex-shrink:0}
.bw:active{transform:scale(.97)}
.bsvg{width:100%;height:100%}
.bw.shaking{animation:bs .6s ease-in-out}
@keyframes bs{0%{transform:rotate(0) scale(1)}10%{transform:rotate(-10deg) scale(1.04)}25%{transform:rotate(10deg) scale(1.04)}40%{transform:rotate(-8deg) scale(1.02)}55%{transform:rotate(8deg) scale(1.02)}70%{transform:rotate(-4deg) scale(1.01)}85%{transform:rotate(4deg) scale(1.01)}100%{transform:rotate(0) scale(1)}}
.baw{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:130px;height:130px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#1a1a3e,#0a0a1a);display:flex;align-items:center;justify-content:center;text-align:center;padding:14px}
.bat{font-family:'Inter',sans-serif;font-size:11px;font-weight:700;color:#fff;line-height:1.35;opacity:0;transition:opacity .4s}
.bat.visible{opacity:1}.bat.positive{color:#80d4a0}.bat.neutral{color:#80b8e8}.bat.negative{color:#e88080}
.bh{font-family:'Inter',sans-serif;font-size:13px;color:#aaa;text-align:center;transition:opacity .3s}
.qi2{width:100%;font-family:'Inter',sans-serif;font-size:16px;padding:14px 18px;background:#fff;border:1.5px solid #eee;border-radius:12px;color:#111;outline:none;text-align:center;transition:border-color .15s}
.qi2:focus{border-color:#3B6EF8}.qi2::placeholder{color:#ccc}
.sb2{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:#fff;background:#3B6EF8;border:none;border-radius:40px;padding:14px 40px;cursor:pointer;width:100%;transition:all .15s}
.sb2:hover{background:#2a5ae0}.sb2:disabled{opacity:.4;cursor:not-allowed}

/* ── STATIC PAGES ── */
.content{max-width:640px;display:flex;flex-direction:column;gap:32px}
.updated{font-size:12px;color:#bbb;margin-bottom:40px}
.sec-title{font-size:15px;font-weight:700;color:#111;margin-bottom:8px}
.sec-text{font-size:15px;color:#666;line-height:1.75}.sec-text a{color:#3B6EF8}
.divider{height:1px;background:#eee}
.email-box{display:inline-flex;align-items:center;gap:14px;background:#fff;border:1px solid #eee;border-radius:12px;padding:18px 24px}
.email-link{font-family:'Inter',sans-serif;font-size:16px;font-weight:700;color:#111;text-decoration:none}
.email-link:hover{color:#3B6EF8}
.cpb{font-family:'Inter',sans-serif;font-size:10px;color:#aaa;background:transparent;border:1.5px solid #eee;border-radius:40px;padding:6px 12px;cursor:pointer;transition:all .15s}
.cpb:hover{border-color:#3B6EF8;color:#3B6EF8}.cpb.done{border-color:#22C87A;color:#22C87A}
.topics{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.topic{display:flex;align-items:center;gap:10px;font-size:14px;color:#666}
.topic::before{content:'';width:6px;height:6px;border-radius:50%;background:#ddd;flex-shrink:0}
table{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px}
th{font-size:10px;font-weight:700;color:#aaa;letter-spacing:.1em;text-transform:uppercase;text-align:left;padding:8px 12px;border-bottom:1px solid #eee}
td{color:#666;padding:12px 12px;border-bottom:1px solid #f5f5f5;line-height:1.5;vertical-align:top}
tr:last-child td{border-bottom:none}
td:first-child{font-weight:700;color:#111;white-space:nowrap}
td:last-child{white-space:nowrap;color:#aaa}
.badge{display:inline-block;font-size:10px;font-weight:600;padding:3px 8px;border-radius:40px;letter-spacing:.03em}
.ba{background:#EEF2FF;color:#3B6EF8}.bad{background:#FEE2E2;color:#DC2626}
.wb{background:#fff;border:1px solid #eee;border-radius:12px;padding:18px 20px;margin-top:10px}
.wb p{font-size:14px;color:#666;line-height:1.65}
.wbtn{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-family:'Inter',sans-serif;font-size:11px;color:#DC2626;background:transparent;border:1.5px solid #FCA5A5;border-radius:40px;padding:8px 16px;cursor:pointer;transition:all .15s}
.wbtn:hover{border-color:#DC2626;background:#FEE2E2}.wbtn.done{color:#22C87A;border-color:#86EFAC;background:#DCFCE7}
@media(max-width:600px){td:nth-child(2){display:none}}

/* ── FIXES ── */

/* Footer прижат к низу */
html { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; align-items: stretch; }
.page { flex: 1 0 auto; width: 100%; }
.tools-section { flex: 1; }

/* Random Number — кнопка не на всю ширину */
.gen-btn { width: auto; min-width: 200px; display: block; margin: 0 auto; }

/* Dice history — числа в строку */
.hr { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #fff; border: 1px solid #eee; border-radius: 10px; }
.hd2 { font-family: 'Inter', sans-serif; font-size: 13px; color: #999; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ── TOOL CONTENT WIDTH ── */
/* Все инструменты начинаются от левого края как hero */
/* Двухколоночные layouts ограничены шириной контента */



/* Dice — однострочные контролы центрированы */
.die-types { max-width: 600px; }
.count-row { max-width: 600px; }
.dice-area { max-width: 600px; }
.roll-btn { margin-left: 0; margin-right: auto; }
.result-strip { max-width: 600px; }

/* Number — контент слева */


/* Coin — слева */
.coin-scene, .coin-result, .flip-btn, .stats { align-self: flex-start; }

/* YN — по ширине */


/* Ball — слева */
.bw { align-self: flex-start; }
.qi2, .sb2 { max-width: 400px; }

/* Name picker — слева */





/* ── TOOL 2-COLUMN LAYOUT ── */
.tool-grid{display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:start;margin-top:8px}
@media(max-width:860px){.tool-grid{grid-template-columns:1fr;gap:32px}}
.tool-main{min-width:0}
.tool-side{display:flex;flex-direction:column;gap:24px}
.side-card{background:#fff;border:1px solid #eee;border-radius:16px;padding:20px}
.side-card-title{font-size:11px;font-weight:700;color:#aaa;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}

/* ── SEO SECTION ── */
.seo-section{margin-top:80px;border-top:1px solid #eee;padding-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:48px}
@media(max-width:860px){.seo-section{grid-template-columns:1fr;gap:36px}}
.seo-block h2{font-size:22px;font-weight:800;color:#111;letter-spacing:-0.02em;margin-bottom:16px}
.seo-block p{font-size:15px;color:#666;line-height:1.8;margin-bottom:12px}
.seo-full{grid-column:1/-1}
.howto-steps{display:flex;flex-direction:column;gap:14px}
.howto-step{display:flex;gap:16px;align-items:flex-start}
.howto-num{width:28px;height:28px;border-radius:50%;background:#EEF2FF;color:#3B6EF8;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.howto-text{font-size:15px;color:#555;line-height:1.6;padding-top:3px}
.faq-item{border-bottom:1px solid #eee;padding:18px 0}
.faq-item:first-child{padding-top:0}
.faq-q{font-size:15px;font-weight:600;color:#111;margin-bottom:8px}
.faq-a{font-size:14px;color:#666;line-height:1.7}
.usecase-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:600px){.usecase-grid{grid-template-columns:1fr}}
.usecase{background:#fff;border:1px solid #eee;border-radius:12px;padding:16px 18px}
.usecase-t{font-size:14px;font-weight:600;color:#111;margin-bottom:4px}
.usecase-d{font-size:13px;color:#888;line-height:1.5}


/* ── RANDOM NUMBER MOBILE ── */
@media(max-width:720px){
  .num-display{height:180px}
  .nv{font-size:clamp(56px,18vw,80px)}
  .range-row{flex-wrap:wrap;gap:10px}
  .range-row .rl{flex-shrink:0}
  .ri{min-width:0;flex:1 1 100px}
  .rs{display:none}
  .presets{flex-wrap:wrap}
  .gen-btn{width:100%!important;margin-top:8px}
}


/* ── MAGIC 8 BALL MOBILE ── */
@media(max-width:720px){
  .ball-page 
  .ball-page .left{align-items:center}
}


/* ── NAME/TEAM FIELD WIDTH FIX ── */
.left > div:not(.bw):not(.coin-scene){width:100%}
.left .cr{width:100%}
.nt{width:100%}


/* ── MAGIC 8 BALL DESKTOP ── */
.ball-page .left{align-items:center}
.ball-page .bw{width:340px!important;align-self:center}
.ball-page .qi2{width:320px;max-width:100%;align-self:center}.ball-page .sb2{width:320px!important;align-self:center}
.ball-page .bh{align-self:center;text-align:center}
@media(max-width:720px){
  .ball-page .bw{width:280px!important;margin:0 auto}
  .ball-page .left{align-items:center}
  .ball-page .bh{align-self:center}
}


/* ── UNIFIED TOOL BUTTONS ── */
.spin-btn,.roll-btn,.gen-btn,.flip-btn,.pb,.gb,.ab,.sb2{
  width:320px!important;
  max-width:100%;
  flex:none!important;
  margin-left:0!important;
  margin-right:0!important;
}
/* name/team picker имеют кнопку + clear рядом — оставляем их в ряд */
.cr{gap:10px}
.cr .pb,.cr .gb{width:auto!important;flex:1!important;max-width:320px}
@media(max-width:720px){
  .spin-btn,.roll-btn,.gen-btn,.flip-btn,.ab,.sb2{width:100%!important}
  .cr{flex-direction:column}
  .cr .pb,.cr .gb{width:100%!important;max-width:none}
  .cr .cb{width:100%}
}


/* ── COIN FLIP CENTERED ── */
.coin-page .left{align-items:center}
.coin-page .coin-scene{width:340px!important;align-self:center}.coin-page .coin-result,.coin-page .flip-btn,.coin-page .stats{align-self:center}
.coin-page .coin-result{width:100%;text-align:center}
@media(max-width:720px){
  .coin-page .flip-btn{width:100%!important}
}


/* ── BALL/COIN MOBILE FULL WIDTH ── */
@media(max-width:720px){
  .ball-page .qi2{width:100%!important}
  .ball-page .sb2{width:100%!important}
  .coin-page .flip-btn{width:100%!important}
  .coin-page .stats{width:100%}
}


/* ── COIN MOBILE SIZE ── */
@media(max-width:720px){
  .coin-page .coin-scene{width:280px!important}
  .coin,.coin-scene{width:280px!important;height:280px!important}
  .coin-page .stats{max-width:none}
}


/* ── COIN STATS IN SIDE ── */
.side-stats{margin-bottom:24px}
.side-stats .stats{width:100%}


/* ── COIN SIDE STATS FULL WIDTH ── */
.tool-side .stats{width:100%;margin-bottom:24px}


/* ── DICE STATS IN SIDE ── */
.tool-side .result-strip{width:100%;display:flex;justify-content:space-between;margin-bottom:24px;box-sizing:border-box}
.tool-side .result-strip .rs-item{flex:1}
.tool-side .result-strip.hidden{display:none}


/* ── YES/NO STATS IN SIDE ── */
.tool-side .sr{width:100%;margin-bottom:24px}


/* ── COIN IMAGES ── */
.cf img{width:100%;height:100%;object-fit:contain;display:block}


/* ── COIN RESULT PLACEHOLDER ── */
.coin-result.placeholder{color:#bbb;font-weight:600;font-size:16px}


/* ── WHEEL V2 ── */
.wheel-outer{position:relative;margin-top:32px;border-radius:50%;box-shadow:0 22px 48px rgba(17,24,39,.16),0 4px 12px rgba(17,24,39,.08)}
.wheel-pointer{position:absolute;top:-34px;left:50%;width:36px;height:46px;margin-left:-18px;transform-origin:50% 14px;z-index:2;filter:drop-shadow(0 3px 3px rgba(0,0,0,.25));pointer-events:none}
.wheel-pointer svg{display:block}
.wheel-pointer.tick{animation:wptick .14s ease-out}
@keyframes wptick{0%{transform:rotate(0)}40%{transform:rotate(-16deg)}100%{transform:rotate(0)}}


/* ── MAGIC 8 BALL V2 ── */
.bw{isolation:isolate}
.bw::after{content:'';position:absolute;left:14%;right:14%;bottom:-20px;height:26px;background:radial-gradient(ellipse at center,rgba(17,24,39,.28),transparent 70%);z-index:-1}
.b8-face{position:absolute;top:50%;left:50%;width:44%;height:44%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#e6e8ee);box-shadow:inset 0 -5px 12px rgba(0,0,0,.14),0 2px 8px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;transition:opacity .35s,transform .35s}
.b8-face span{font:800 96px/1 'Inter',sans-serif;color:#111;letter-spacing:-.04em;margin-top:-4px}
.b8-face.gone{opacity:0;transform:translate(-50%,-50%) scale(.55)}
.b8-win{position:absolute;top:50%;left:50%;width:50%;height:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 45% 40%,#17214d,#04060d 72%);box-shadow:inset 0 8px 20px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.08);opacity:0;transition:opacity .3s;overflow:hidden}
.b8-win.on{opacity:1}
.b8-tri{position:absolute;width:80%;left:10%;top:13%;opacity:0;transform:scale(.5) rotate(-12deg);filter:blur(5px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1),filter .6s}
.b8-win.show .b8-tri{opacity:1;transform:none;filter:none}
.b8-win .bat{position:absolute;top:25%;left:21%;width:58%;text-align:center;font:800 14px/1.2 'Inter',sans-serif;text-transform:uppercase;letter-spacing:.02em;color:#fff!important;opacity:0;transition:opacity .5s .3s;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.b8-win .bat.long{font-size:11.5px}
.b8-win.show .bat{opacity:1}
@media(max-width:720px){.b8-face span{font-size:78px}.b8-win .bat{font-size:11px}.b8-win .bat.long{font-size:10px}}

@media(max-width:720px){.ball-page .bw{height:280px!important}.b8-win .bat{font-size:11.5px}}

.b8-win .bat{top:21%;height:32%;display:flex;align-items:center;justify-content:center}

@media(max-width:720px){.b8-win{width:58%;height:58%}.b8-win .bat{left:17%;width:66%}}


/* ── YES OR NO V2 ── */
.aw{position:relative;height:260px;flex-direction:column;background:#fff;border:1.5px solid #eee;transition:background .4s,border-color .4s}
.aw.yes{background:#effaf3;border-color:#c6ebd3}
.aw.no{background:#fff1f2;border-color:#fbd0d6}
.yn-stage{display:flex;gap:36px;align-items:flex-start;justify-content:center;margin-top:-14px}
.yn-b{display:flex;flex-direction:column;align-items:center;gap:12px;transition:transform .16s,opacity .16s,filter .2s}
.yn-b svg{width:136px;height:127px;display:block}
#by svg{filter:drop-shadow(0 12px 14px rgba(21,162,83,.28))}
#bn svg{filter:drop-shadow(0 12px 14px rgba(229,41,63,.26))}
.yn-b.dim{opacity:.35;transform:scale(.92)}
.yn-b.hot{opacity:1;transform:scale(1.05)}
.yn-b.win{opacity:1;animation:ynpop .55s cubic-bezier(.2,.8,.2,1) forwards}
.yn-b.lose{opacity:.2;transform:scale(.82);filter:grayscale(1)}
@keyframes ynpop{0%{transform:scale(.85)}55%{transform:scale(1.22)}100%{transform:scale(1.12)}}
.yn-w{font:800 30px/1 'Inter',sans-serif;letter-spacing:-.02em;height:30px;opacity:0;transition:opacity .25s .1s}
#by .yn-w{color:#15a253}#bn .yn-w{color:#e5293f}
.yn-b.win .yn-w{opacity:1}
.aw .ap{position:absolute;left:0;right:0;bottom:22px;text-align:center}
.aw .ap.hide{display:none}
.ha.yes{color:#15a253}.ha.no{color:#e5293f}
@media(max-width:720px){.aw{height:220px}.yn-stage{gap:22px}.yn-b svg{width:104px;height:97px}.yn-w{font-size:24px;height:24px}}


/* ── RANDOM NUMBER V2 ── */
.num-display{overflow:hidden}
.nv{display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;letter-spacing:0;filter:drop-shadow(0 10px 14px rgba(17,24,39,.10))}
.nv.empty{filter:none}
.reel{display:inline-block;height:1.15em;line-height:1.15em;overflow:hidden}
.strip{display:block;will-change:transform}
.strip span{display:block;height:1.15em;color:var(--c);text-shadow:0 .05em 0 var(--d)}
.nm{color:#111;margin-right:.03em}


/* ── DICE V2 ── */
.dice-area{gap:20px;min-height:170px;max-width:none}
.dz{width:96px;height:96px;position:relative}
.dz.rolling{animation:dtumble .85s cubic-bezier(.3,.7,.4,1)}
@keyframes dtumble{0%{transform:none}22%{transform:translateY(-40px) rotate(150deg) scale(1.06)}48%{transform:translateY(0) rotate(270deg) scale(1.04,.94)}66%{transform:translateY(-14px) rotate(330deg)}84%{transform:translateY(0) rotate(360deg) scale(1.06,.94)}100%{transform:none}}
.d6face{width:100%;height:100%;box-sizing:border-box;border-radius:22%;background:linear-gradient(145deg,#ffffff 0%,#eef0f5 60%,#dfe2ea 100%);box-shadow:inset 0 -6px 10px rgba(0,0,0,.07),inset 0 4px 6px rgba(255,255,255,.95),0 12px 20px rgba(17,24,39,.14),0 2px 4px rgba(17,24,39,.08);display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:15%;transition:box-shadow .3s}
.d6face.q{display:flex;align-items:center;justify-content:center;font:800 38px/1 'Inter',sans-serif;color:#c3c7d1;padding:0}
.pip{width:72%;height:72%;margin:auto;border-radius:50%;background:radial-gradient(circle at 38% 32%,#4a4a4a,#050505 70%);box-shadow:inset 0 2px 3px rgba(255,255,255,.12),0 1px 0 rgba(255,255,255,.6)}
.dpoly{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 10px 12px rgba(17,24,39,.22));transition:filter .3s}
.dz.crit .d6face{box-shadow:inset 0 -6px 10px rgba(0,0,0,.07),inset 0 4px 6px rgba(255,255,255,.95),0 0 0 3px #F7B731,0 0 26px rgba(247,183,49,.65)}
.dz.crit .dpoly{filter:drop-shadow(0 0 4px #F7B731) drop-shadow(0 0 14px rgba(247,183,49,.85))}
.dz.crit{animation:dcrit .45s cubic-bezier(.2,.8,.2,1)}
@keyframes dcrit{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
.die-wrap.crit .die-label{color:#d4920b}
@media(max-width:720px){.dz{width:74px;height:74px}.dice-area{gap:14px;min-height:140px}.d6face.q{font-size:30px}}


/* ── NAME PICKER V2 ── */
.nbadge{position:relative;width:100%;max-width:400px;align-self:center;margin:22px auto 10px;background:#fff;border-radius:22px;box-shadow:0 18px 36px rgba(17,24,39,.14),0 3px 8px rgba(17,24,39,.08);transform:rotate(-2.5deg)}
.nbadge::after{content:'';display:block;height:12px;background:linear-gradient(180deg,#3f6ff5,#2346c9);border-radius:0 0 22px 22px}
.nbadge.pop{animation:nbpop .5s cubic-bezier(.2,.8,.2,1)}
@keyframes nbpop{0%{transform:rotate(-2.5deg) scale(1)}45%{transform:rotate(-1deg) scale(1.07)}100%{transform:rotate(-2.5deg) scale(1)}}
.nb-top{position:relative;background:linear-gradient(180deg,#5b8bff,#2f5ef0);color:#fff;font:800 30px/1 'Inter',sans-serif;letter-spacing:.08em;text-align:center;padding:30px 0 18px;border-radius:22px 22px 0 0}
.nb-clip{position:absolute;top:-16px;left:50%;width:54px;height:30px;margin-left:-27px;background:linear-gradient(180deg,#b9cdff,#86a8ff);border-radius:8px;box-shadow:0 3px 6px rgba(17,24,39,.18)}
.nb-name{font-family:'Caveat','Bradley Hand','Segoe Print','Marker Felt','Comic Sans MS',cursive;font-weight:700;font-size:64px;line-height:1.1;color:#1b2340;text-align:center;padding:14px 22px 2px;white-space:nowrap;overflow:hidden;text-overflow:clip}
.nb-name.q{color:#c8ccd6}
.nb-name.rolling{color:#5b6b9a}
.nb-of{font-size:12px;color:#99a1b3;text-align:center;padding:0 0 14px;min-height:16px;line-height:16px}
.pill{transition:background .1s,color .1s,border-color .1s,transform .1s}
.pill.hot{border-color:#3B6EF8;color:#3B6EF8;background:#EEF2FF;transform:scale(1.08)}
@media(max-width:720px){.nb-top{font-size:24px;padding:26px 0 14px}.nb-name{font-size:52px}}


/* ── TEAM GENERATOR V2 ── */
.tp{border:1.5px dashed #dfe2ea;border-radius:16px;padding:40px 20px;text-align:center;color:#b5bac6}
.right.nudge{animation:tnudge .35s}
@keyframes tnudge{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.tc{border-radius:16px;margin-bottom:12px;box-shadow:0 6px 16px rgba(17,24,39,.05);opacity:0;transform:translateY(10px);animation:tcin .35s ease forwards}
@keyframes tcin{to{opacity:1;transform:none}}
.tc .th2{background:linear-gradient(135deg,var(--c),var(--cd));border-bottom:none;padding:12px 16px}
.tc .tn{color:#fff;font-size:13px}
.tc .tb2{color:rgba(255,255,255,.85);font-weight:600}
.tc .tm{padding:12px 14px;gap:8px}
.tc .mp{display:inline-flex;align-items:center;gap:7px;padding:4px 12px 4px 4px;color:#333;opacity:0;transform:scale(.6);animation:mpin .32s cubic-bezier(.2,.8,.2,1.3) forwards}
@keyframes mpin{to{opacity:1;transform:none}}
.av{width:24px;height:24px;border-radius:50%;background:var(--c);color:#fff;font:700 10px/24px 'Inter',sans-serif;text-align:center;flex-shrink:0;letter-spacing:.02em}
@media(prefers-reduced-motion:reduce){.tc,.tc .mp{animation:none;opacity:1;transform:none}}


/* ── NAME BADGE IN SIDE + COIN BACKFACE ── */
.nbadge{max-width:none;width:100%;align-self:auto;margin:18px 0 32px}
.nb-name{font-size:58px}
.cf img{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.ch{transform:translateZ(1px)}
.ct{transform:rotateY(180deg) translateZ(1px)}


/* ── DICE GROUND SHADOW (no filter, iOS-safe) ── */
.dpoly{filter:none!important}
.die-wrap{position:relative}
.dz{z-index:1}
.die-wrap::before{content:'';position:absolute;left:50%;top:80px;width:80px;height:18px;margin-left:-40px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(17,24,39,.24) 0%,rgba(17,24,39,.09) 45%,rgba(17,24,39,0) 72%);z-index:0;pointer-events:none}
@media(max-width:720px){.die-wrap::before{top:62px;width:62px;height:14px;margin-left:-31px}}


/* ── SEO PASS: lang links, images, more tools ── */
a.lang-option{text-decoration:none}
.hero-image img{height:auto}
img{max-width:100%}
.more-tools{margin-top:48px}
.more-tools h2{font-size:22px;font-weight:800;color:#111;letter-spacing:-.02em;margin-bottom:20px}
.mt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mt-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff;border:1px solid #eee;border-radius:14px;text-decoration:none;color:#111;font-size:14px;font-weight:600;line-height:1.3;transition:transform .15s,box-shadow .15s,border-color .15s}
.mt-card:hover{transform:translateY(-2px);border-color:#d6defc;box-shadow:0 8px 20px rgba(59,110,248,.10)}
.mt-card img{width:44px;height:44px;object-fit:contain;flex-shrink:0}
@media(max-width:900px){.mt-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.mt-card{font-size:13px;gap:8px;padding:10px}.mt-card img{width:36px;height:36px}}
.nf{text-align:center;padding:40px 0 10px}
.nf-code{font-size:clamp(96px,18vw,160px);font-weight:800;letter-spacing:-.06em;line-height:1;background:linear-gradient(135deg,#3B6EF8,#8B5CF6);-webkit-background-clip:text;background-clip:text;color:transparent}
.nf h1{font-size:28px;font-weight:800;letter-spacing:-.02em;margin:18px 0 10px}
.nf p{color:#888;font-size:16px;margin-bottom:26px}
.nf-btn{display:inline-block;padding:14px 32px;border-radius:40px;background:#3B6EF8;color:#fff;font-weight:700;font-size:14px;text-decoration:none}
.nf-langs{margin-top:18px;font-size:14px;color:#aaa}.nf-langs a{color:#3B6EF8;text-decoration:none;margin:0 6px}

/* ── SECRET SANTA ── */
[hidden]{display:none!important}
.card-feature{grid-column:1/-1;flex-direction:row;align-items:center;background:linear-gradient(110deg,#fff0ef 0%,#fff 55%,#eef2ff 100%);border-color:#f6dcd9}
.card-feature .card-img-wrap{height:auto;padding:22px 4px 22px 40px;flex-shrink:0}
.card-feature .card-img{height:150px}
.card-feature .card-body{padding:28px 96px 28px 28px;align-items:flex-start}
.card-feature .card-title{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.card-feature .card-desc{font-size:15px;color:#777;max-width:560px;flex:none}
.card-feature .card-arrow{top:50%;bottom:auto;right:32px;width:46px;height:46px;transform:translateY(-50%);background:#3B6EF8;border-color:#3B6EF8;color:#fff}
.card-badge{display:inline-block;background:#F04A4A;color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:20px;padding:4px 10px;margin-bottom:10px}
.card-cta{margin-top:12px;font-size:14px;font-weight:700;color:#3B6EF8}
@media(max-width:600px){
  .card-feature .card-img-wrap{padding:16px 0 16px 14px}
  .card-feature .card-img{height:92px}
  .card-feature .card-body{padding:16px 16px 16px 12px}
  .card-feature .card-title{font-size:18px}
  .card-feature .card-desc{font-size:13px}
  .card-feature .card-arrow{display:none}
  .card-badge{font-size:10px;padding:3px 8px;margin-bottom:6px}
  .card-cta{margin-top:8px;font-size:13px}
}
.ss-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.ss-panel{background:#fff;border:1px solid #eee;border-radius:18px;padding:22px}
.ss-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.ss-num{width:28px;height:28px;border-radius:50%;background:#EEF2FF;color:#3B6EF8;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ss-title{font-size:17px;font-weight:700;color:#111;letter-spacing:-.01em;margin:0}
.ss-count,.ss-opt{margin-left:auto;font-size:12px;color:#aaa;font-weight:500;white-space:nowrap}
.ss-hint{font-size:13px;color:#999;line-height:1.5;margin:-6px 0 14px}
.ss-people{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ss-row{position:relative}
.ss-in,.ss-sel,.ss-ta{width:100%;font-family:'Inter',sans-serif;font-size:15px;color:#111;background:#fff;border:1.5px solid #eee;border-radius:12px;padding:12px 14px;outline:none;transition:border-color .15s;box-sizing:border-box}
.ss-in:focus,.ss-sel:focus,.ss-ta:focus{border-color:#3B6EF8}
.ss-in::placeholder,.ss-ta::placeholder{color:#c4c7cf}
.ss-row .ss-in{padding-right:40px}
.ss-in[type=date]{min-height:47px;-webkit-appearance:none;appearance:none}
.ss-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:none;background:transparent;color:#bbb;font-size:20px;line-height:1;border-radius:50%;cursor:pointer}
.ss-x:hover{background:#FFF0EF;color:#F04A4A}
.ss-links{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px}
.ss-link{background:none;border:none;padding:0;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#3B6EF8;cursor:pointer}
.ss-link:hover{text-decoration:underline}.ss-link:disabled{color:#ccc;cursor:default;text-decoration:none}
.ss-muted{color:#aaa}
.ss-paste{display:none;margin-top:14px}.ss-paste.open{display:block}
.ss-ta{height:110px;resize:vertical;line-height:1.6}
.ss-paste-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.ss-add{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:#3B6EF8;background:#EEF2FF;border:none;border-radius:40px;padding:12px 18px;cursor:pointer;white-space:nowrap}
.ss-add:hover{background:#dfe6ff}
.ss-excl{display:grid;grid-template-columns:1fr auto 1fr auto;gap:8px;align-items:center}
.ss-sel{-webkit-appearance:none;appearance:none;padding-right:34px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23999' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.ss-arrow{color:#bbb;font-size:16px}
.ss-chips{display:flex;flex-wrap:wrap;gap:8px}.ss-chips:not(:empty){margin-top:14px}
.ss-chip{display:inline-flex;align-items:center;gap:6px;background:#FFF0EF;color:#c23b3b;border-radius:30px;padding:6px 6px 6px 14px;font-size:13px;font-weight:600}
.ss-chip-x{opacity:.6}
.ss-chip button{width:22px;height:22px;border:none;border-radius:50%;background:rgba(194,59,59,.12);color:#c23b3b;font-size:15px;line-height:1;cursor:pointer}
.ss-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ss-full{grid-column:1/-1}
.ss-field label{display:block;font-size:12px;font-weight:600;color:#888;margin-bottom:6px}
.ss-field .ss-ta{height:84px}
.ss-draw{width:100%!important;max-width:none!important;flex:none;font-size:14px;padding:17px 24px;letter-spacing:.02em;box-shadow:0 10px 24px rgba(59,110,248,.25)}
.ss-err{display:none;background:#FFF0EF;border:1px solid #FFD5D2;color:#c23b3b;border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.5}
.ss-empty{border:2px dashed #e6e8ef;border-radius:18px;padding:30px 24px;text-align:center;color:#aaa;font-size:14px;line-height:1.6}
.ss-empty img{width:110px;height:auto;display:block;margin:0 auto 14px}
.ss-res.pop{animation:sspop .5s cubic-bezier(.2,.8,.2,1)}
.ss-res-title{font-size:20px;font-weight:800;color:#111;letter-spacing:-.02em}
.ss-res-sub{font-size:13px;color:#999;line-height:1.5;margin:6px 0 14px}
.ss-list{display:flex;flex-direction:column;gap:8px}
.ss-item{display:flex;align-items:center;gap:8px;padding:9px 9px 9px 16px;background:#fff;border:1px solid #eee;border-radius:12px}
.ss-name{flex:1;min-width:0;font-size:14px;font-weight:700;color:#111;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-pair{display:none;font-size:12px;font-weight:500;color:#999;overflow:hidden;text-overflow:ellipsis}
.show-pairs .ss-pair{display:block}
.ss-btn{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;color:#555;background:#fff;border:1.5px solid #e2e2e2;border-radius:30px;padding:7px 12px;cursor:pointer;white-space:nowrap;text-decoration:none;line-height:1.2}
.ss-btn:hover{border-color:#3B6EF8;color:#3B6EF8}
.ss-btn.ok,.ss-all.ok{border-color:#22B573;color:#22B573}
.ss-all{width:100%;margin-top:12px;font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:#3B6EF8;background:#EEF2FF;border:1.5px solid transparent;border-radius:40px;padding:13px 20px;cursor:pointer}
.ss-all:hover{background:#dfe6ff}
.ss-toggle{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:#888;cursor:pointer;user-select:none}
.ss-toggle input{width:16px;height:16px;accent-color:#3B6EF8;margin:0}
.ss-acts{display:flex;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid #f0f0f0}
@media(max-width:600px){
  .ss-panel{padding:18px 16px}
  .ss-fields{grid-template-columns:1fr}
  .ss-excl{grid-template-columns:1fr auto 1fr}
  .ss-excl .ss-add{grid-column:1/-1}
  .ss-paste-row{flex-direction:column;align-items:stretch}
}
@media(max-width:380px){.ss-people{grid-template-columns:1fr}}
.ssv{max-width:560px;margin:0 auto;text-align:center}
.ssv-event{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#F04A4A;margin-bottom:10px}
.ssv .page-title{word-break:break-word}
.ssv-card{background:linear-gradient(160deg,#fff0ef 0%,#fff 70%);border:1px solid #f6dcd9;border-radius:26px;padding:30px 28px 32px;margin-top:24px;box-shadow:0 18px 40px rgba(17,24,39,.08)}
.ssv-gift{width:200px;height:auto;display:block;margin:0 auto;animation:ssvwob 2.4s ease-in-out infinite;transform-origin:50% 90%}
@keyframes ssvwob{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-5deg)}82%{transform:rotate(5deg)}88%{transform:rotate(-3deg)}94%{transform:rotate(2deg)}}
.opening .ssv-gift{animation:ssvopen .65s ease-in forwards}
@keyframes ssvopen{30%{transform:scale(1.12) rotate(-6deg)}100%{transform:scale(.2) rotate(12deg);opacity:0}}
.ssv-warn{font-size:15px;color:#888;line-height:1.6;margin:14px 0 22px}
.ssv-btn{flex:none;padding:16px 34px;font-size:14px;box-shadow:0 10px 24px rgba(59,110,248,.25)}
.ssv-open{background:linear-gradient(160deg,#eef2ff 0%,#fff 70%);border-color:#dde4fb}
.ssv-open.pop{animation:sspop .55s cubic-bezier(.2,.8,.2,1)}
.ssv-label{font-size:15px;color:#888}
.ssv-name{font-size:clamp(38px,9vw,60px);font-weight:800;letter-spacing:-.035em;color:#3B6EF8;line-height:1.1;margin:8px 0 6px;word-break:break-word}
.ssv-keep{font-size:14px;color:#aaa}
.ssv-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:22px}
.ssv-facts:empty{display:none}
.ssv-fact{background:#fff;border:1px solid #eee;border-radius:14px;padding:12px 14px;text-align:left}
.ssv-fact b{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#aaa;margin-bottom:4px}
.ssv-fact span{font-size:15px;font-weight:700;color:#111;word-break:break-word}
.ssv-note{margin-top:10px;background:#fff;border:1px dashed #d9def0;border-radius:14px;padding:14px 16px;font-size:15px;color:#555;line-height:1.6;text-align:left;white-space:pre-wrap;word-break:break-word}
.ssv-bad-t{font-size:20px;font-weight:800;color:#111}
.ssv-own{display:inline-block;margin-top:26px;font-size:14px;font-weight:600;color:#3B6EF8;text-decoration:none}
.ssv-own:hover{text-decoration:underline}
@media(max-width:600px){.ssv-card{padding:24px 18px 26px}.ssv-gift{width:160px}.ssv-btn{width:100%}}
@keyframes sspop{0%{transform:scale(.92);opacity:.4}60%{transform:scale(1.02);opacity:1}100%{transform:none}}
.ss-paste-btns{display:flex;align-items:center;gap:18px;flex-shrink:0}
@media(max-width:600px){.ss-paste-btns{justify-content:space-between}.ss-paste-btns .ss-add{flex:1}}

/* ── RANDOM NUMBER: count + no repeats ── */
.rn-count{display:flex;align-items:center;gap:12px;width:100%}
.ri-count{flex:0 0 120px}
.nr-toggle{flex:1;display:flex;align-items:center;gap:10px;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#555;background:#fff;border:1.5px solid #eee;border-radius:10px;padding:12px 16px;cursor:pointer;user-select:none;transition:all .15s}
.nr-toggle input{width:17px;height:17px;margin:0;accent-color:#3B6EF8;cursor:pointer}
.nr-toggle.on{border-color:#3B6EF8;background:#EEF2FF;color:#3B6EF8}
.nr-toggle.off{opacity:.45;cursor:default}.nr-toggle.off input{cursor:default}
.rerr{display:none;width:100%;background:#FFF0EF;border:1px solid #FFD5D2;color:#c23b3b;border-radius:10px;padding:10px 14px;font-size:13px;line-height:1.5}
.preset-lotto{color:#3B6EF8;border-color:#d6defc}
.num-display.multi{height:auto;min-height:220px;padding:28px 24px}
.nv.multi{display:block;width:100%;filter:none;font-size:inherit}
.balls{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.ball{min-width:var(--s);height:var(--s);padding:0 .45em;box-sizing:border-box;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 34%),linear-gradient(160deg,var(--c),var(--d));box-shadow:inset 0 -4px 0 rgba(0,0,0,.12),0 8px 16px rgba(17,24,39,.14);text-shadow:0 1px 2px rgba(0,0,0,.18);animation:ballin .45s cubic-bezier(.2,.9,.3,1.25) both}
@keyframes ballin{0%{transform:scale(0) rotate(-40deg);opacity:0}100%{transform:none;opacity:1}}
.hr-multi{font-family:'Inter',sans-serif;font-size:14px;font-weight:700;color:#111;line-height:1.5;word-break:break-word}
@media(max-width:720px){.num-display.multi{min-height:180px;padding:20px 14px}.balls{gap:9px}.ri-count{flex:0 0 90px}.nr-toggle{padding:12px;font-size:13px}}


/* ── NAME PICKER: several winners ── */
.np-opts{display:flex;align-items:center;gap:12px;width:100%}
.pill.used{color:#bbb;background:#f6f6f8;text-decoration:line-through}
.perr-btn{background:none;border:none;padding:0;margin-left:6px;font:inherit;font-weight:700;color:#3B6EF8;cursor:pointer;text-decoration:underline}
.nb-name.multi{white-space:normal;font-size:var(--fs)!important;line-height:1.18;padding:16px 22px 6px;text-align:center}
.nb-list{display:inline-block;text-align:left;margin:0;padding:0;list-style:none;counter-reset:w;max-width:100%}
.nb-list.two{columns:2;column-gap:30px}
.nb-list li{counter-increment:w;break-inside:avoid;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb-list li::before{content:counter(w);display:inline-block;min-width:1.25em;margin-right:.3em;font-family:'Inter',sans-serif;font-size:.42em;font-weight:800;color:#3B6EF8;vertical-align:.35em;text-align:center;background:#EEF2FF;border-radius:20px;padding:.15em .3em}
@media(max-width:720px){.np-opts .ri-count{flex:0 0 90px}}

/* ── HOME GRID: 10 tools ── */
.card-9{background:linear-gradient(160deg,#fff4e5 0%,#fff 60%)}


/* ── RANDOM LETTER ── */
.lt-display{width:100%;background:#fff;border:2px solid #eee;border-radius:20px;height:220px;display:flex;align-items:center;justify-content:center;transition:border-color .3s;overflow:hidden}
.lt-display.active{border-color:#3B6EF8}
.lt-letter{font-family:'Inter',sans-serif;font-weight:800;font-size:150px;line-height:1;color:var(--c,#111);text-shadow:0 .05em 0 var(--d,#555);filter:drop-shadow(0 10px 14px rgba(17,24,39,.10))}
.lt-letter.q{color:#ddd;text-shadow:none;filter:none;font-size:48px}
.lt-letter.pop{animation:ltpop .45s cubic-bezier(.2,.9,.3,1.3)}
@keyframes ltpop{0%{transform:scale(.6)}100%{transform:none}}
.lt-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.lt-trow{display:flex;align-items:center;gap:12px;width:100%}
.lt-seg{flex:1;display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.lt-seg button{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:#888;background:#fff;border:1.5px solid #eee;border-radius:10px;padding:11px 4px;cursor:pointer;transition:all .15s}
.lt-seg button:hover{border-color:#3B6EF8;color:#3B6EF8}
.lt-seg button.on{background:#3B6EF8;border-color:#3B6EF8;color:#fff}
.letter-page .gen-btn{max-width:320px;margin:0}
.lt-timer{background:#fff;border:1.5px solid #eee;border-radius:18px;padding:22px 22px 18px;text-align:center;transition:border-color .2s,background .2s}
.lt-time{font-family:'Inter',sans-serif;font-size:56px;font-weight:800;letter-spacing:-.03em;color:#111;line-height:1;font-variant-numeric:tabular-nums}
.lt-bar{height:8px;background:#f0f1f5;border-radius:8px;overflow:hidden;margin:16px 0 16px}
.lt-bar i{display:block;height:100%;background:linear-gradient(90deg,#3B6EF8,#8B5CF6);border-radius:8px;transform-origin:left;transition:transform .1s linear}
.lt-tbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lt-tbtn{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;border-radius:40px;padding:11px 10px;cursor:pointer;border:1.5px solid #e2e2e2;background:#fff;color:#555}
.lt-tbtn:hover{border-color:#3B6EF8;color:#3B6EF8}
.lt-tbtn.lt-main{background:#EEF2FF;border-color:transparent;color:#3B6EF8}
.lt-timer.warn{border-color:#F04A4A}.lt-timer.warn .lt-time{color:#F04A4A}.lt-timer.warn .lt-bar i{background:#F04A4A}
.lt-timer.done{border-color:#F04A4A;background:#FFF0EF;animation:ltshake .5s}
.lt-timer.done .lt-time{color:#F04A4A;font-size:34px;line-height:56px}
@keyframes ltshake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.lt-head{display:flex;justify-content:space-between;align-items:baseline}
.lt-cnt{text-transform:none;letter-spacing:0;font-weight:500}
.lt-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px}
.lt-chip{height:40px;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-size:15px;font-weight:700;color:#333;background:#fff;border:1px solid #eee;border-radius:10px}
.lt-chip.used{color:#c4c7cf;background:#f6f6f8;text-decoration:line-through}
.lt-chip.off{color:#d6d8de;border-style:dashed;background:transparent}
.lt-chip.cur{background:#3B6EF8;border-color:#3B6EF8;color:#fff}
.lt-new{margin-top:14px}
@media(max-width:720px){
  .lt-display{height:180px}.lt-letter{font-size:120px}
  .lt-opts{grid-template-columns:1fr}
  .lt-trow{flex-direction:column;align-items:stretch;gap:8px}
  .letter-page .gen-btn{max-width:none}
  .lt-time{font-size:48px}
}
.lt-custom{display:flex;align-items:center;gap:10px;width:100%;padding-left:calc(var(--lt-lab,0px))}
.lt-custom .ri{flex:0 0 88px}
@media(min-width:721px){.lt-custom{justify-content:flex-end}}
@media(max-width:720px){.lt-seg button{font-size:12px;padding:11px 2px}.lt-custom .ri{flex:1 1 0}}
/* ── SANTA: share ── */
.ss-item{gap:6px}
.ss-btn{display:inline-flex;align-items:center;gap:5px}
.ss-share{background:#3B6EF8;border-color:#3B6EF8;color:#fff}
.ss-share:hover{background:#2a5ae0;border-color:#2a5ae0;color:#fff}
.ss-ico{padding:6px 8px;color:#888}
.ss-menu{position:absolute;z-index:1000;min-width:180px;background:#fff;border:1px solid #eee;border-radius:14px;box-shadow:0 14px 34px rgba(17,24,39,.16);padding:6px;animation:ssmenu .15s ease-out}
@keyframes ssmenu{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ss-menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:#111;text-decoration:none;font-size:14px;font-weight:600}
.ss-menu a:hover{background:#f4f6fb}
.ss-mi{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
@media(max-width:400px){.ss-item{padding-left:12px}.ss-btn{padding:7px 10px}}

.card-10{background:linear-gradient(160deg,#fff0ef 0%,#fff 60%)}
/* ── LOTO / BINGO CALLER ── */
.lo{grid-template-columns:1fr 360px}
.lo-head{display:flex;justify-content:space-between;align-items:baseline}
.lo-count{font-size:12px;color:#aaa;font-weight:600}
.lo-board{display:grid;gap:6px}
.lo-board.b90{grid-template-columns:repeat(10,1fr)}
.lo-board.b75{grid-template-columns:28px repeat(15,1fr);gap:4px}
.lo-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #eee;border-radius:10px;font-family:'Inter',sans-serif;font-size:16px;font-weight:700;color:#c7cad3;font-variant-numeric:tabular-nums;transition:background .25s,color .25s,border-color .25s}
.b75 .lo-cell{font-size:12px;border-radius:7px}
.lo-cell.on{background:#3B6EF8;border-color:#3B6EF8;color:#fff}
.lo-cell.last{background:#F04A4A;border-color:#F04A4A;color:#fff;animation:locell 1s ease-out}
@keyframes locell{0%{transform:scale(1.35);box-shadow:0 0 0 8px rgba(240,74,74,.25)}100%{transform:none;box-shadow:0 0 0 0 rgba(240,74,74,0)}}
.lo-let{display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-weight:800;font-size:14px;color:#3B6EF8}
.lo-side{gap:18px}
.lo-stage{position:relative;background:#fff;border:2px solid #eee;border-radius:20px;padding:26px 16px 18px;text-align:center}
.lo-fs{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:10px;border:1.5px solid #eee;background:#fff;color:#888;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lo-fs:hover{border-color:#3B6EF8;color:#3B6EF8}
.lo-fs .fs-out{display:none}.lo-full .lo-fs .fs-in{display:none}.lo-full .lo-fs .fs-out{display:inline}
.lo-ball{--c:#c7cad3;--d:#9aa0ad;width:170px;height:170px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.6) 0,rgba(255,255,255,0) 32%),linear-gradient(160deg,var(--c),var(--d));box-shadow:inset 0 -10px 16px rgba(0,0,0,.18),0 16px 26px rgba(17,24,39,.16)}
.lo-ball.idle{--c:#e5e7ee;--d:#c9ccd6}
.lo-face{width:58%;height:58%;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 -4px 6px rgba(0,0,0,.10)}
#loNum{font-family:'Inter',sans-serif;font-weight:800;font-size:46px;letter-spacing:-.03em;color:#1b2340;font-variant-numeric:tabular-nums}
#loNum.long{font-size:30px}
.lo-ball.idle #loNum{color:#c7cad3}
.lo-ball.spin{animation:lospin .62s ease-in-out}
@keyframes lospin{0%{transform:rotate(0)}25%{transform:rotate(-18deg) scale(.94)}50%{transform:rotate(14deg) scale(.96)}75%{transform:rotate(-8deg)}100%{transform:none}}
.lo-ball.pop{animation:lopop .45s cubic-bezier(.2,.9,.3,1.3)}
@keyframes lopop{0%{transform:scale(.7)}100%{transform:none}}
.lo-nick{min-height:22px;margin-top:14px;font-size:16px;font-weight:700;color:#3B6EF8;font-style:italic}
.lo-nick.hint{font-style:normal;font-weight:500;font-size:13px;color:#aaa}
.lo-draw{width:100%!important;max-width:none;margin:0}
.lo-last{display:flex;gap:8px;min-height:40px;align-items:center}
.lo-mini{min-width:40px;height:40px;padding:0 6px;box-sizing:border-box;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-size:13px;font-weight:800;color:#fff;background:linear-gradient(160deg,var(--c),var(--d));box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.lo-last-wrap .history-title{margin-bottom:8px}
.lo-opts{display:flex;flex-direction:column;gap:10px}
.lo-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px}
.lo-sel{font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#555;background:#fff;border:1.5px solid #eee;border-radius:10px;padding:0 34px 0 14px;height:100%;min-height:46px;-webkit-appearance:none;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23999' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.lo-mode{grid-template-columns:1fr 1fr}
.lo-acts{display:flex;justify-content:space-between;padding-top:4px}
.lo-acts .ss-link:disabled{color:#ccc;cursor:default}
@media(max-width:860px){.lo{grid-template-columns:1fr}.lo-side{order:-1}.lo-board.b90{gap:4px}.lo-cell{font-size:13px;border-radius:8px}.b75 .lo-cell{font-size:9px;border-radius:5px}.lo-board.b75{grid-template-columns:18px repeat(15,1fr);gap:2px}.lo-let{font-size:11px}}
/* full screen / presentation */
body.lo-lock{overflow:hidden}
.lo.lo-full{position:fixed;inset:0;z-index:2000;margin:0;background:#f7f8fc;padding:28px 36px;grid-template-columns:minmax(320px,38%) 1fr;gap:40px;align-items:center;overflow:auto}
.lo.lo-full .lo-side{order:-1}
.lo.lo-full .lo-opts{display:none}
.lo.lo-full .lo-stage{padding:40px 20px 28px}
.lo.lo-full .lo-ball{width:min(34vh,340px);height:min(34vh,340px)}
.lo.lo-full #loNum{font-size:min(9vh,92px)}.lo.lo-full #loNum.long{font-size:min(6vh,60px)}
.lo.lo-full .lo-nick{font-size:24px;min-height:32px}
.lo.lo-full .lo-cell{font-size:min(2.6vh,26px)}
.lo.lo-full .lo-board.b90{gap:8px}
.lo.lo-full .lo-head .history-title,.lo.lo-full .lo-count{font-size:15px}
.lo:fullscreen{background:#f7f8fc}
@media(max-width:860px){.lo.lo-full{grid-template-columns:1fr;padding:16px;gap:16px;align-items:start}.lo.lo-full .lo-ball{width:150px;height:150px}.lo.lo-full #loNum{font-size:42px}.lo.lo-full .lo-cell{font-size:12px}}
.lo-row:empty{display:none}

/* ── HOME GRID: 12 tools (feature full width, newest card wide) ── */
.card-11{background:linear-gradient(160deg,#fff0ef 0%,#fff 60%)}
/* ── TIMER ── */
.tmr-grid{grid-template-columns:1fr 360px}
.tm-stage{position:relative;background:#fff;border:2px solid #eee;border-radius:24px;padding:36px 24px 28px;display:flex;flex-direction:column;align-items:center;gap:26px;transition:border-color .3s,background .3s}
.tm-fs{position:absolute;top:12px;right:12px}
.tm-fs .fs-out{display:none}.tm-full .tm-fs .fs-in{display:none}.tm-full .tm-fs .fs-out{display:inline}
.tm-dial{position:relative;width:min(320px,100%);aspect-ratio:1}
.tm-dial svg{width:100%;height:100%;display:block}
.tm-track{fill:none;stroke:#f0f1f5;stroke-width:16}
.tm-ring{fill:none;stroke:#3B6EF8;stroke-width:16;stroke-linecap:round;transition:stroke-dashoffset .2s linear,stroke .3s}
.tm-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.tm-time{font-family:'Inter',sans-serif;font-size:72px;font-weight:800;letter-spacing:-.04em;color:#111;font-variant-numeric:tabular-nums;line-height:1}
.tm-time.long{font-size:54px}
.tm-msg{min-height:22px;margin-top:10px;font-size:17px;font-weight:800;color:#F04A4A}
.tm-btns{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:10px;width:100%;max-width:520px}
.tm-go{width:100%!important;max-width:none;margin:0;min-width:0}
.tm-go.paused{background:#111}
.tm-sec{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:#555;background:#fff;border:1.5px solid #e2e2e2;border-radius:40px;padding:12px 10px;cursor:pointer;white-space:nowrap}
.tm-sec:hover:not(:disabled){border-color:#3B6EF8;color:#3B6EF8}.tm-sec:disabled{opacity:.4;cursor:default}
.tm-stage.warn .tm-ring{stroke:#F04A4A}.tm-stage.warn .tm-time{color:#F04A4A}
.tm-stage.done{border-color:#F04A4A;background:#FFF0EF}
.tm-stage.done .tm-time{color:#F04A4A;animation:tmblink 1s steps(2) 3}
@keyframes tmblink{50%{opacity:.25}}
.tm-side{gap:22px}
.tm-pre{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tm-pre button{font-family:'Inter',sans-serif;font-size:14px;font-weight:700;color:#555;background:#fff;border:1.5px solid #eee;border-radius:12px;padding:13px 6px;cursor:pointer;transition:all .15s}
.tm-pre button:hover{border-color:#3B6EF8;color:#3B6EF8}
.tm-pre button.on{background:#3B6EF8;border-color:#3B6EF8;color:#fff}
.tm-custom{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tm-custom label{display:flex;align-items:center;gap:6px}
.tm-custom .ri{min-width:0;width:100%;padding:12px 6px}
@media(max-width:860px){.tmr-grid{grid-template-columns:1fr}.tm-time{font-size:60px}.tm-time.long{font-size:44px}.tm-stage{padding:30px 16px 22px}}
@media(max-width:420px){.tm-btns{grid-template-columns:1fr 1fr}.tm-go{grid-column:1/-1}}
.tm-stage.tm-full{position:fixed;inset:0;z-index:2000;border:0;border-radius:0;justify-content:center;gap:4vh;padding:24px}
.tm-full .tm-dial{width:min(70vh,86vw)}
.tm-full .tm-time{font-size:min(15vh,17vw)}.tm-full .tm-time.long{font-size:min(11vh,13vw)}
.tm-full .tm-msg{font-size:min(4vh,28px);min-height:min(4vh,28px)}
.tm-full .tm-btns{max-width:620px}
.tm-stage.tm-full:not(.done){background:#fff}
.card-santa{background:linear-gradient(160deg,#fff0ef 0%,#fff 60%)}
.hero{width:100%}