@font-face{font-family:'Koryaka';src:url('/static/fonts/koryaka.ttf') format('truetype');font-display:swap}
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@500;700&display=swap');

:root{--k:'Koryaka','Comfortaa',sans-serif;--v:Verdana,Geneva,sans-serif;--b:'Oswald','Arial Narrow',sans-serif}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
.font-koryaka{font-family:var(--k);font-weight:700}
.font-verdana{font-family:var(--v)}

body{
    font-family:var(--v);color:#333;
    background:url('/static/bckg.png') no-repeat top center/cover fixed, linear-gradient(180deg,#dce8f0,#eef5fa);
    height:100dvh;overflow:hidden;
    user-select:none;-webkit-user-select:none;
    display:flex;justify-content:center;
}

.app{width:100%;max-width:480px;height:100%;position:relative;display:flex;flex-direction:column;overflow:hidden}

/* HEADER */
.header{padding:12px 16px 6px;flex-shrink:0;position:relative;text-align:center}
.header-top{display:flex;align-items:center;justify-content:center;position:relative}
.admin-gear{position:absolute;right:0;top:0;background:rgba(27,163,212,.12);border:none;border-radius:10px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#1ba3d4;cursor:pointer;padding:0}
.admin-gear svg{width:18px;height:18px}
.sub-balances{display:flex;justify-content:center;gap:10px;margin-top:6px}
.sub-balance{background:#e8f4fd;padding:5px 14px;border-radius:12px;display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;transition:opacity .15s}
.sub-balance:active{opacity:.7}
.sub-lbl{color:#8cb8d4;font-weight:600;font-family:var(--v)}
.sub-val{color:#1ba3d4;font-family:var(--k);font-weight:800;font-size:14px}
.sub-icon{width:18px;height:18px;border-radius:4px}
.header-label{font-family:var(--v);font-size:13px;color:#8cb8d4;letter-spacing:3px;text-transform:uppercase}
.balance-row{display:inline-flex;align-items:center;justify-content:center;gap:0}
.balance-num{font-family:var(--k);font-size:50px;color:#1a1a1a;font-weight:700;line-height:1;transition:transform .15s ease-out}
.balance-num.bump{transform:scale(1.1)}
.balance-num.unbump{transform:scale(1);transition:transform .3s ease-out}
.balance-logo{height:40px;filter:brightness(0);margin-left:4px;margin-top:4px}

/* LEVEL */
.level-bar{display:flex;align-items:center;gap:8px;margin:6px 18px 14px;padding:8px 14px;background:rgba(255,255,255,.6);backdrop-filter:blur(12px);border-radius:16px}
.level-text{font-family:var(--k);font-size:15px;color:#1ba3d4;white-space:nowrap;font-weight:700}
.level-track{flex:1;height:10px;background:#d4e8f2;border-radius:5px;overflow:hidden}
.level-fill{height:100%;background:linear-gradient(90deg,#7dd4f5,#1ba3d4);border-radius:5px;transition:width .6s cubic-bezier(.22,1,.36,1)}

/* NAV GRID */
.nav-grid{display:flex;gap:12px;padding:0 18px;margin-bottom:10px}
.nav-item{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:transform .1s}
.nav-item:active{transform:scale(.9)}
.nav-icon{width:100%;aspect-ratio:1.5/1;object-fit:cover;border-radius:18px;box-shadow:0 4px 12px rgba(0,0,0,.08);transition:transform .15s ease-out}
.nav-icon-emoji{display:flex;align-items:center;justify-content:center;font-size:34px;background:linear-gradient(135deg,#ff8a3d,#ff5a3d);color:#fff}
.nav-label{font-family:var(--v);font-size:12px;color:#555;font-weight:700}

/* SPEED */
.speed-bar{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 18px 0;padding:12px 20px;background:#fff;border-radius:20px;box-shadow:0 2px 10px rgba(0,0,0,.04);position:relative;z-index:10;flex-shrink:0}
.speed-bolt{width:18px;height:18px;flex-shrink:0}
.speed-text{font-family:var(--k);font-size:15px;color:#1ba3d4;font-weight:700;display:flex;align-items:center;gap:2px}
.speed-coin{height:20px;margin:0 4px 0 1px;vertical-align:-3px}

.tg-channel-bar{display:flex;align-items:center;gap:8px;margin:6px 18px 0;padding:7px 14px;background:linear-gradient(90deg,#38b6ff22,#38b6ff08);border:1px solid #38b6ff33;border-radius:12px;text-decoration:none;color:#1ba3d4;font-size:12px;font-weight:700;position:relative;z-index:10;flex-shrink:0;white-space:nowrap;overflow:hidden}
.tg-channel-icon{width:16px;height:16px;flex-shrink:0}
.tg-channel-bar span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tg-arrow{font-size:16px;color:#38b6ff99;font-weight:600;flex-shrink:0}

/* MINING AREA */
.mining-area{
    position:absolute;bottom:-28%;left:50%;transform:translateX(-50%) perspective(600px) rotateX(0deg) rotateY(0deg) scale(1);
    width:min(105vw,460px);height:min(105vw,460px);
    z-index:5;cursor:pointer;
    transition:transform .2s cubic-bezier(.22,1,.36,1);
    transform-style:preserve-3d;
}

.mining-circle{position:absolute;inset:0;border-radius:50%;background:linear-gradient(180deg,#00e0ff 0%,#00a4ff 40%,#0088ff 100%);box-shadow:0 -10px 30px rgba(0,164,255,.3)}

.mining-ring{position:absolute;inset:-16px;width:calc(100% + 32px);height:calc(100% + 32px);filter:drop-shadow(0 0 6px rgba(0,200,255,.4))}
.ring-bg{fill:none;stroke:rgba(0,180,220,.15);stroke-width:2;stroke-linecap:round}
.ring-bar{fill:none;stroke:rgba(0,210,240,.6);stroke-width:2.5;stroke-linecap:round}

.mining-content{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;flex-direction:column;align-items:center;padding-top:14%}

.online-badge{font-family:var(--k);font-size:14px;color:#fff;background:rgba(255,255,255,.2);padding:4px 16px;border-radius:12px;display:flex;align-items:center;gap:5px;margin-top:-4px;margin-bottom:22px;font-weight:700;text-shadow:0 1px 4px rgba(0,50,100,.3)}
.mine-hint{font-family:var(--k);font-size:13px;color:rgba(255,255,255,.85);font-weight:700;margin-bottom:-3px;text-shadow:0 1px 3px rgba(0,50,100,.25)}
.mine-timeout-hint{font-size:10px;opacity:.6}
.mine-timer{font-family:var(--k);font-size:clamp(32px,9vw,44px);color:#fff;font-weight:800;margin-bottom:6px;text-shadow:0 2px 6px rgba(0,50,100,.3)}
.mine-logo{width:clamp(160px,42vw,240px);opacity:.5}

/* FLY COIN */
.fly-ether{position:fixed;color:#a855f7;font-size:18px;font-weight:800;pointer-events:none;z-index:99;font-family:var(--k);text-shadow:0 2px 6px rgba(168,85,247,.35);animation:etherFly .9s cubic-bezier(.2,0,.4,1) forwards;display:flex;align-items:center;gap:3px}
.fly-ether-icon{width:18px;height:18px;border-radius:4px;vertical-align:middle}
.fly-coin-icon{width:22px;height:22px;vertical-align:middle}
@keyframes etherFly{0%{opacity:1;transform:translate(0,0) scale(.8)}20%{opacity:1;transform:translate(calc(var(--dx)*.3),calc(var(--dy)*.3)) scale(1.1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.7)}}
.fly-coin{position:fixed;color:#fff;font-size:32px;font-weight:800;pointer-events:none;z-index:100;font-family:var(--k);text-shadow:0 2px 8px rgba(0,100,200,.4);opacity:0}
.fly-coin.fly{animation:flyUp 1.2s cubic-bezier(.2,0,.3,1) forwards}
@keyframes flyUp{0%{transform:translateY(0) scale(1);opacity:1}30%{transform:translateY(-60px) scale(1.4);opacity:1}100%{transform:translateY(-200px) scale(0.8);opacity:0}}

.big-buck{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%) scale(.3);pointer-events:none;z-index:500;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0}
.big-buck img{width:180px;height:180px;filter:drop-shadow(0 10px 40px rgba(70,200,120,.5))}
.big-buck .big-buck-amt{font-family:var(--k);font-size:58px;font-weight:900;color:#2cb653;text-shadow:0 4px 20px rgba(44,182,83,.4)}
.big-buck.show{animation:bigBuckShow 2.2s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes bigBuckShow{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-20deg)}
  15%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(5deg)}
  25%{transform:translate(-50%,-50%) scale(1) rotate(0deg)}
  70%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0deg)}
  100%{opacity:0;transform:translate(calc(100vw - 80px), -40vh) scale(.15) rotate(15deg)}
}

/* OVERLAY PAGES */
.page-overlay{position:absolute;inset:0;z-index:50;background:#f0f6fa;display:none;flex-direction:column;max-width:480px;margin:0 auto;width:100%;opacity:0;transform:translateY(30px)}
.page-overlay.active{display:flex}
.page-overlay.slide-in{opacity:1;transform:translateY(0);transition:opacity .25s ease-out,transform .25s ease-out}
.page-overlay.slide-out{opacity:0;transform:translateY(30px);transition:opacity .2s ease-in,transform .2s ease-in}
.page-head{display:flex;align-items:center;gap:10px;padding:16px;flex-shrink:0;background:#fff;border-bottom:1px solid #e0e8ef}
.back-btn{background:#e8f4fd;border:none;cursor:pointer;color:#1ba3d4;min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:12px;transition:background .15s}
.back-btn:active{background:#d0ebf7}
.back-btn svg{width:20px;height:20px}
.page-ttl{font-family:var(--k);font-size:22px;color:#1a1a1a;font-weight:700}
.page-body{flex:1;overflow-y:auto;padding:12px 16px 16px}
.page-body::-webkit-scrollbar{display:none}
.empty{text-align:center;color:#999;padding:40px 20px;font-size:14px;font-family:var(--v)}

/* CARDS */
.card{background:#fff;border-radius:16px;padding:16px;box-shadow:0 2px 10px rgba(0,0,0,.05);margin-bottom:10px}
.card-lbl{font-family:var(--v);font-size:11px;color:#8cb8d4;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}

/* LIST */
.list{display:flex;flex-direction:column;gap:6px}
.user-ava{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;display:block}
.ava-wrap{position:relative;display:inline-block;flex-shrink:0;margin-right:8px}
.ava-wrap.online::after{content:'';position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#28c850;border:2px solid #fff;box-shadow:0 0 6px rgba(40,200,80,.5)}
.ava-wrap.online .user-ava{box-shadow:0 0 0 2px #28c850}
.list-item{display:flex;align-items:center;padding:14px 16px;background:#fff;border-radius:14px;font-size:14px;cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,.04)}
.list-item:active{background:#f5f8fa}
.list-item .rank{width:30px;color:#1ba3d4;font-size:13px;font-weight:700;font-family:var(--k)}
.list-item .name{flex:1;color:#2d3748;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none;font-family:var(--v);font-weight:600}
.list-item .amount{color:#1ba3d4;font-family:var(--k);font-weight:700;margin-left:8px;font-size:15px}
.list-item .ref-date{font-size:11px;color:#999;font-family:var(--v);margin-left:auto;padding-left:8px;white-space:nowrap}

/* FORMS */
.form-group{margin-bottom:12px}
.input-label{display:block;font-family:var(--v);font-size:12px;color:#1ba3d4;font-weight:700;margin-bottom:5px}
.input{width:100%;padding:14px 16px;background:#fff;border:1.5px solid #dce6ef;border-radius:14px;color:#2d3748;font-size:15px;font-family:var(--v);outline:none;box-shadow:0 1px 4px rgba(0,0,0,.03);caret-color:#333}
.input:focus{border-color:#1ba3d4;box-shadow:0 0 0 3px rgba(27,163,212,.1)}
.btn{width:100%;padding:14px;background:linear-gradient(135deg,#2ae0ea,#0fb4e0);color:#fff;border:none;border-radius:14px;font-size:15px;font-weight:700;font-family:var(--v);cursor:pointer;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;text-decoration:none;box-shadow:0 3px 10px rgba(11,180,224,.2)}
.btn:active{opacity:.85;transform:scale(.98)}
.btn-sec{background:#e8eef3;color:#555;margin-top:8px;box-shadow:none}
.btn-sm{padding:10px 14px;font-size:13px;width:auto;min-height:40px;flex-shrink:0}
.btn-danger{background:linear-gradient(135deg,#ff6b8b,#ef5350)}
.note{font-size:12px;color:#8cb8d4;margin-bottom:14px;font-family:var(--v)}

/* REF */
.ref-note{background:#e8f4fd;color:#1ba3d4;font-size:13px;font-family:var(--v);padding:12px 16px;border-radius:14px;margin-bottom:14px;line-height:1.5;font-weight:600}
.ref-link{font-size:13px;word-break:break-all;color:#1ba3d4;margin-bottom:14px;line-height:1.5;font-family:var(--v)}
.ref-stats{display:flex;gap:10px;margin-bottom:14px}
.ref-stat{flex:1;text-align:center}
.ref-stat-val{display:block;font-family:var(--k);font-size:30px;color:#1a1a1a;font-weight:700}
.ref-stat-lbl{font-size:11px;color:#999;margin-top:3px;font-family:var(--v);font-weight:600}
.sub-title{cursor:pointer;margin-top:10px;color:#1ba3d4;font-size:13px;font-weight:700;font-family:var(--v)}

/* STATS */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.stat{text-align:center;cursor:pointer;transition:transform .1s}
.stat:active{transform:scale(.95)}
.stat-val{font-family:var(--k);font-size:24px;color:#1a1a1a;font-weight:700}
.stat-lbl{font-size:11px;color:#8cb8d4;margin-top:3px;font-family:var(--v);font-weight:700}

/* ADMIN */
.adm-t{font-family:var(--k);font-size:15px;font-weight:700;color:#1ba3d4;margin-bottom:10px}
.adm-row{display:flex;gap:6px;align-items:flex-end}
.adm-row .input{flex:1;padding:10px 12px;font-size:13px}

/* MODAL */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.3);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;padding:24px}
.modal-box{max-width:320px;width:100%;text-align:center}
.modal-ttl{font-family:var(--k);font-size:22px;margin-bottom:8px;font-weight:700}
.modal-box p{font-size:13px;color:#666;margin-bottom:16px}
.dev-badge{text-align:center;font-size:11px;color:#b0c0cc;margin-top:20px;padding:10px;display:flex;align-items:center;justify-content:center;gap:6px}
.dev-badge a{color:#b0c0cc;transition:color .15s}
.dev-badge a:hover{color:#1ba3d4}
#searchResults{margin-top:10px}
.hidden{display:none!important}
.top-tabs{display:flex;gap:0;margin-bottom:12px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.top-tab{flex:1;padding:10px;border:none;background:none;font-family:var(--k);font-size:14px;font-weight:700;color:#999;cursor:pointer;transition:all .15s}
.top-tab.active{background:#1ba3d4;color:#fff}

/* TOAST */
.toast{position:fixed;top:12px;right:12px;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);color:#222;padding:10px 16px;border-radius:14px;font-size:13px;font-weight:600;font-family:var(--v);z-index:200;display:flex;align-items:center;gap:8px;max-width:260px;box-shadow:0 4px 16px rgba(0,0,0,.06);animation:toastSlide 2.8s ease forwards}
.toast::before{content:'';width:6px;height:6px;border-radius:50%;background:#00d2ff;flex-shrink:0}
.toast.success::before{background:#26d895}
.toast.error::before{background:#ff6b8b}
@keyframes toastSlide{0%{opacity:0;transform:translateX(16px)}8%{opacity:1;transform:translateX(0)}80%{opacity:1}100%{opacity:0;transform:translateX(8px)}}