:root{--bg:#EDF6F4;--ink:#12241F;--muted:#5B6F6A;--green:#0B7A5E;--on:#0B7A5E;--blue:#1B8FD6;--brown:#8B5E3C;--line:#D3E3E0;--card:#FFFFFF;--err:#A32B2B;--grad:linear-gradient(135deg,#0A7A62 0%,#0B76A8 100%)}
@media (prefers-color-scheme:dark){:root{--bg:#0B1716;--ink:#E6F2EF;--muted:#93ABA6;--green:#3FBF95;--blue:#4FB3EE;--brown:#C79366;--line:#22403C;--card:#132422;--err:#F08A8A}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:30rem;margin:0 auto;padding:1.25rem 1rem 3rem}
.brand{font-size:1.5rem;font-weight:800;letter-spacing:.04em;color:var(--green);margin:.5rem 0 1rem}
h2{font-size:1.25rem;margin:0 0 1rem}
.bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.bar .brand{margin:0}
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem;margin-bottom:1rem}
.k{margin:0 0 .35rem;color:var(--muted);font-size:.9rem}
.bal{margin:0;font-size:2rem;font-weight:800}
label{display:block;margin-bottom:.9rem;font-size:.95rem;color:var(--muted)}
input{display:block;width:100%;margin-top:.3rem;padding:.7rem .8rem;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px}
input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--brown);outline-offset:2px}
.btn{width:100%;padding:.8rem;font:inherit;font-weight:700;color:#fff;background:var(--on);border:0;border-radius:8px;cursor:pointer}
.ticket{border-left:6px solid var(--brown)}
.ticket input{margin-bottom:.7rem;font-size:.85rem}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:0}
.team div{background:var(--bg);border-radius:8px;padding:.6rem;text-align:center}
.team dt{color:var(--muted);font-size:.85rem}
.team dd{margin:0;font-size:1.5rem;font-weight:800}
.err{background:var(--card);border:1px solid var(--err);color:var(--err);border-radius:8px;padding:.6rem .8rem;margin:0 0 .8rem}
.alt{text-align:center;color:var(--muted)}
a,.link{color:var(--green);font-weight:600}
.link{background:none;border:0;font:inherit;cursor:pointer;text-decoration:underline}
select{display:block;width:100%;margin-top:.3rem;padding:.7rem .8rem;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px}
select:focus-visible{outline:3px solid var(--brown);outline-offset:2px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.check{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink)}
.check input{width:auto;margin:.3rem 0 0}
.nav{display:flex;gap:.4rem;overflow-x:auto;margin-bottom:1rem;padding-bottom:.2rem}
.nav a,.tabs a{white-space:nowrap;padding:.4rem .75rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-weight:600;font-size:.9rem;color:var(--ink);background:var(--card)}
.nav a.on,.tabs a.on{background:var(--on);border-color:var(--on);color:#fff}
.tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.ok{background:var(--card);border:1px solid var(--green);color:var(--green);border-radius:8px;padding:.6rem .8rem;margin:0 0 .8rem}
.muted{color:var(--muted);font-size:.9rem}
.list{list-style:none;margin:0;padding:0}
ol.list{list-style:decimal inside}
.list li{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.list li:last-child{border-bottom:0}
ol.list li{display:list-item}
ol.list li b{float:right}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.75rem;display:flex;flex-direction:column;gap:.35rem}
.item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:var(--bg)}
.item h3{margin:0;font-size:1rem}
.item .muted{margin:0}
.price{font-weight:800;color:var(--green);margin:0}
a.btn{display:block;text-align:center;text-decoration:none}
.sm{padding:.35rem .6rem;font:inherit;font-size:.85rem;font-weight:700;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);cursor:pointer}
.sm.go{background:var(--on);border-color:var(--on);color:#fff}
.sm.no{color:var(--err);border-color:var(--err)}
.inline{display:inline-block;margin:.3rem .3rem 0 0}
.badge{font-size:.75rem;font-weight:700;padding:.1rem .5rem;border-radius:999px;background:var(--brown);color:#fff}
.row{display:flex;gap:.5rem;align-items:center}
.row input{margin:0}
.btn.ghost{background:transparent;color:var(--green);border:2px solid var(--green)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:0 0 .6rem}
.stats div{background:var(--bg);border-radius:8px;padding:.6rem .4rem;text-align:center}
.stats dt{color:var(--muted);font-size:.8rem}
.stats dd{margin:.15rem 0 0;font-size:1rem;font-weight:800;overflow-wrap:anywhere}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 11px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.menu summary::-webkit-details-marker{display:none}
.menu summary span{display:block;height:3px;background:var(--ink);border-radius:2px}
.menu summary:focus-visible{outline:3px solid var(--brown);outline-offset:2px}
.dropdown{position:absolute;right:0;top:calc(100% + .4rem);min-width:12rem;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.4rem;box-shadow:0 8px 24px rgba(0,0,0,.2);z-index:10}
.dropdown a{padding:.7rem .8rem;border-radius:8px;text-decoration:none;color:var(--ink);font-weight:600}
.dropdown a.on{background:var(--on);color:#fff}
.dropdown form{border-top:1px solid var(--line);margin-top:.3rem;padding-top:.3rem}
.dropdown .link{width:100%;text-align:left;padding:.7rem .8rem;text-decoration:none;color:var(--err)}
.sub{margin:1rem 0 .3rem;font-weight:700}
.linkbox{border-left:6px solid var(--brown);padding-left:.75rem;margin-top:1.2rem}
.linkbox input{margin-bottom:.7rem;font-size:.85rem}
.panel{border-radius:16px;box-shadow:0 6px 18px rgba(11,122,94,.07)}
.welcome{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.welcome h2{margin:0;font-size:1.15rem}
.welcome p{margin:0}
.avatar{flex:none;width:52px;height:52px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.3rem}
.hero{position:relative;overflow:hidden;background:var(--grad);color:#fff;border-radius:22px;padding:1.2rem;margin-bottom:1rem;box-shadow:0 12px 28px rgba(11,118,168,.28)}
.hero::after{content:"";position:absolute;right:-70px;top:-70px;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.12)}
.hk{margin:0;font-size:.8rem;font-weight:800;letter-spacing:.14em}
.hbig{margin:.3rem 0 1rem;font-size:2.1rem;font-weight:800;line-height:1.1;overflow-wrap:anywhere}
.hbig small{font-size:1rem;font-weight:700}
.hrow{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.hrow div{background:rgba(255,255,255,.2);border-radius:14px;padding:.7rem .8rem}
.hrow span{display:block;font-size:.72rem;font-weight:800;letter-spacing:.1em}
.hrow b{font-size:1rem;overflow-wrap:anywhere}
.pills{display:flex;gap:.6rem;overflow-x:auto;padding:.2rem .1rem .8rem;margin-bottom:.3rem}
.pillbtn{display:flex;align-items:center;gap:.5rem;white-space:nowrap;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.45rem .95rem .45rem .45rem;text-decoration:none;color:var(--ink);font-weight:700}
.ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--blue)}
.pillbtn:nth-child(3n+2) .ic{background:var(--on)}
.pillbtn:nth-child(3n) .ic{background:var(--brown)}
.mcard{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--card);border:1px solid var(--line);border-left:6px solid var(--green);border-radius:16px;padding:1rem;margin-bottom:1rem}
.mcard.brown{border-left-color:var(--brown)}
.mcard .k{margin:0;font-size:1.05rem;font-weight:700;color:var(--ink)}
.mnote{margin:0;color:var(--muted);font-size:.85rem}
.mcard b{font-size:1.35rem;font-weight:800;text-align:right}
.split{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.8rem}
.split .sub{margin:0;font-size:1.1rem}
.tag{font-size:.8rem;font-weight:800;padding:.25rem .7rem;border-radius:999px;background:rgba(27,143,214,.14);color:var(--blue)}
.copyrow{display:flex;gap:.5rem;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:.4rem}
.copyrow input{margin:0;border:0;background:transparent;font-size:.85rem;min-width:0}
.copyrow button{flex:none;padding:.7rem 1rem;font:inherit;font-weight:800;color:#fff;background:var(--on);border:0;border-radius:10px;cursor:pointer}
.social{display:flex;gap:.6rem;margin-top:.8rem}
.social a{flex:1;text-align:center;padding:.7rem;border-radius:12px;color:#fff;font-weight:800;text-decoration:none}
.social .wa{background:#128C4A}
.social .fb{background:#1877F2}
.bar{justify-content:flex-start;gap:.8rem}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:20}
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(80vw,18rem);display:flex;flex-direction:column;gap:.15rem;padding:1rem .8rem;overflow-y:auto;background:var(--card);box-shadow:8px 0 30px rgba(0,0,0,.25);z-index:30}
.dtitle{margin:.2rem .5rem .8rem;color:var(--muted);font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.drawer a,.drawer .link{display:flex;align-items:center;gap:.75rem;padding:.75rem .7rem;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600}
.drawer a.on{background:var(--on);color:#fff}
.drawer form{margin-top:auto;border-top:1px solid var(--line);padding-top:.5rem}
.drawer .link{width:100%;background:none;border:0;font:inherit;font-weight:600;color:var(--err);cursor:pointer}
.i{flex:none}
.social button{flex:1;padding:.7rem;border:0;border-radius:12px;color:#fff;font:inherit;font-weight:800;cursor:default}
.navycard{background:linear-gradient(135deg,#0F2A44,#123B57);color:#fff;border-radius:18px;padding:1.2rem;margin-bottom:1rem}
.navycard .nk{display:block;font-size:.75rem;font-weight:800;letter-spacing:.14em}
.navycard b{display:block;font-size:1.8rem;margin-top:.3rem}
.amt{display:flex;align-items:stretch;margin-top:.3rem}
.amt span{display:grid;place-items:center;padding:0 .9rem;background:var(--bg);border:1px solid var(--line);border-right:0;border-radius:8px 0 0 8px;font-weight:800;color:var(--ink)}
.amt input{margin:0;border-radius:0 8px 8px 0}
.min{float:right;font-size:.75rem;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:.1rem .6rem}
.sumbox{display:flex;justify-content:space-between;gap:1rem;background:var(--bg);border-radius:12px;padding:.8rem;margin-bottom:1rem}
.kv{margin:0}
.kv dt{color:var(--muted);font-size:.8rem;margin-top:.8rem}
.kv dd{margin:.1rem 0 0;padding-bottom:.6rem;border-bottom:1px solid var(--line);font-weight:700;overflow-wrap:anywhere}
.profile{display:flex;gap:1rem;align-items:center}
.avatar.big{width:72px;height:72px;font-size:1.8rem}
.profile h2{margin:0 0 .2rem}
.profile p{margin:0}
@keyframes slidein{from{transform:translateX(-105%)}to{transform:translateX(0)}}
@keyframes slideout{from{transform:translateX(0)}to{transform:translateX(-105%)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes fadeout{from{opacity:1}to{opacity:0}}
.menu[open] .drawer{animation:slidein .28s ease-out}
.menu[open] .scrim{animation:fadein .28s ease-out}
.menu.closing .drawer{animation:slideout .24s ease-in forwards}
.menu.closing .scrim{animation:fadeout .24s ease-in forwards}
@media (prefers-reduced-motion:reduce){.menu[open] .drawer,.menu[open] .scrim,.menu.closing .drawer,.menu.closing .scrim{animation:none}}
.drawer{background:#0F1B2D;color:#E8F0F6}
.dtitle{color:#8FA3B8}
.drawer a,.drawer .link{color:#E8F0F6}
.drawer a.on{background:#1E3A5F;color:#fff}
.drawer form{border-top-color:#22344C}
.drawer .link{color:#FF9B9B}
.wrap{padding-bottom:5.5rem}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:15;display:flex;justify-content:space-around;background:var(--card);border-top:1px solid var(--line);padding:.3rem .25rem calc(.3rem + env(safe-area-inset-bottom,0px))}
.tabbar a,.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.35rem .2rem;background:none;border:0;font:inherit;font-size:.72rem;font-weight:700;color:var(--muted);text-decoration:none;cursor:pointer}
.tabbar form{flex:1;display:flex}
.tabbar a.on{color:var(--green)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem .4rem;margin-bottom:1.2rem}
.qa{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-decoration:none;color:var(--ink);font-size:.75rem;font-weight:700;text-align:center}
.qa .ic{width:54px;height:54px;border-radius:16px;background:var(--blue)}
.qa:nth-child(4n+2) .ic{background:var(--on)}
.qa:nth-child(4n+3) .ic{background:var(--brown)}
.qa:nth-child(4n) .ic{background:#0E8FA0}
.notice{position:relative;background:rgba(27,143,214,.12);border-left:5px solid var(--blue);border-radius:14px;padding:.8rem 2.6rem .8rem .9rem;margin-bottom:1rem}
.notice p{margin:0}
.notice .nk{font-size:.72rem;font-weight:800;letter-spacing:.12em;color:var(--blue);margin-bottom:.25rem}
.notice button{position:absolute;top:.35rem;right:.5rem;background:none;border:0;font-size:1.5rem;line-height:1;color:var(--muted);cursor:pointer}
.rhero{background:var(--grad);color:#fff;border-radius:22px;padding:1.2rem;margin-bottom:1rem}
.rhero h2{margin:0 0 .3rem}
.rhero p{margin:0}
.prizes{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.prizes span{background:rgba(255,255,255,.2);border-radius:12px;padding:.4rem .7rem;font-weight:800;font-size:.9rem}
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:1rem}
.pod{background:var(--card);border:1px solid var(--line);border-top:5px solid var(--line);border-radius:14px;padding:.7rem .3rem;text-align:center}
.pod.g{border-top-color:#D4A017}
.pod.s{border-top-color:#9AA5B1}
.pod.b{border-top-color:var(--brown)}
.pod b{display:block;overflow-wrap:anywhere;font-size:.9rem}
.pod .n{display:block;font-size:1.6rem;font-weight:800;color:var(--green)}
.track{height:12px;background:var(--bg);border-radius:999px;overflow:hidden;margin:.6rem 0}
.fill{height:100%;background:var(--grad);border-radius:999px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.list li.me{background:rgba(11,122,94,.1);border-radius:8px;padding-left:.4rem;padding-right:.4rem}
.rk{flex:none;width:2.4rem;font-weight:800}
.nm{flex:1;overflow-wrap:anywhere}
.rw{display:inline-flex;align-items:center;gap:.2rem;margin-left:.5rem;color:var(--green);font-size:.8rem;font-weight:700;white-space:nowrap}
.rw .i{width:16px;height:16px}
.pod .md{display:block;font-size:1.6rem;line-height:1.2}
.pod .n{margin:.1rem 0}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.chip{padding:.55rem .9rem;border-radius:999px;color:#fff;font-weight:700;font-size:.9rem}
.chip.b{background:#155E9C}
.chip.g{background:#0B7A5E}
.chip.n{background:#5B6F6A}
.tctl{display:flex;flex-direction:column;gap:.6rem;align-items:center;margin-bottom:.8rem}
.tctl label{margin:0;display:flex;align-items:center;gap:.5rem}
.tctl input,.tctl select{width:auto;margin:0}
.scrollx{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{text-align:left;padding:.7rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-size:.85rem;color:var(--muted)}
.pager{display:flex;align-items:center;justify-content:center;gap:.8rem}
.pager button{min-width:44px;padding:.5rem;font:inherit;font-weight:800;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);cursor:pointer}
.pager button:disabled{opacity:.4;cursor:not-allowed}