:root{--tx:#1e1b4b;--mu:#6b7280;--ln:#e5e7eb;--ac:#6366f1;--ok:#10b981;--no:#ef4444}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}body{overflow-x:hidden;-webkit-tap-highlight-color:transparent;margin:0;font:15px/1.6 Inter,system-ui,sans-serif;color:var(--tx);min-height:100vh;background:linear-gradient(180deg,#eef2ff,#fdf2f8 55%,#fff7ed) fixed}
.w{max-width:980px;margin:auto;padding:0 20px}a{color:inherit;text-decoration:none}.mu{color:var(--mu)}
.hero{position:relative;overflow:hidden;color:#fff;padding:60px 0 100px;border-radius:0 0 44px 44px;background:linear-gradient(120deg,#6366f1,#8b5cf6,#ec4899,#f59e0b);background-size:300% 300%;animation:grad 14s ease infinite}
.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.17);animation:float 9s ease-in-out infinite}
.hero:before{width:280px;height:280px;right:-70px;top:-90px}.hero:after{width:190px;height:190px;left:6%;bottom:-80px;animation-delay:-4s}
.hero .w{position:relative;z-index:1;animation:up .8s both}
.badge{display:inline-block;padding:6px 14px;background:rgba(255,255,255,.22);border-radius:99px;font-size:13px;font-weight:600;backdrop-filter:blur(6px)}
h1{font-size:clamp(28px,5.5vw,46px);line-height:1.15;margin:14px 0 8px;letter-spacing:-.02em;font-weight:800}h2{font-size:20px;margin:0 0 4px}
.hero p{opacity:.93;max-width:520px;margin:0 0 24px}
.cta{display:inline-flex;gap:8px;align-items:center;padding:14px 28px;border-radius:99px;background:#fff;color:#6d28d9;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.2);transition:.25s;animation:pulse 2.6s infinite}
.cta:hover{transform:translateY(-3px) scale(1.05)}.cta.b{margin-top:18px;background:linear-gradient(120deg,#6366f1,#ec4899);color:#fff}
.panel{position:relative;z-index:2;margin:-56px auto 30px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-radius:26px;padding:24px;box-shadow:0 20px 50px rgba(99,102,241,.15);animation:up .8s .15s both}
.tabs,.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}
.tabs a{padding:9px 18px;border-radius:99px;background:color-mix(in srgb,var(--c,var(--ac)) 12%,#fff);color:var(--c,var(--ac));font-weight:600;font-size:14px;white-space:nowrap;transition:.2s}
.tabs a:hover{transform:translateY(-2px)}.tabs a.on{background:var(--c,var(--ac));color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--c,var(--ac)) 40%,transparent)}
.nav{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(99,102,241,.18);font-size:20px;line-height:1;transition:.2s}.nav:hover{background:var(--ac);color:#fff}
.bar{background:#f3f1ff;border-radius:20px;padding:5px;gap:4px;flex-wrap:nowrap;margin:12px 0 14px}.bar input[type=date]{flex:1;min-width:0;min-height:42px;border:0;background:transparent;text-align:center;font-weight:700;color:var(--tx);box-shadow:none}.bar input[type=date]:focus{box-shadow:none}
.today{font-size:12px;color:var(--ac);font-weight:700;padding:6px 13px;border-radius:99px;background:#eef2ff;white-space:nowrap}
.sum{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 2px 8px}.sum b{display:block;font-size:16px;line-height:1.3}.sum span{font-size:13px;color:var(--mu)}
.meter{height:6px;border-radius:9px;background:#eef2ff;margin:0 2px 16px;overflow:hidden}.meter i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 50%,#fff));animation:grow 1s ease}@keyframes grow{from{width:0}}
.slot{display:grid;grid-template-columns:150px 1fr auto;gap:14px;align-items:center;padding:14px 18px;margin-bottom:10px;border-radius:16px;background:#fcfffd;border:1px dashed #cfe9dc;border-left:5px solid #6ee7b7;opacity:0;animation:up .5s ease forwards;animation-delay:calc(var(--i)*70ms);transition:.2s}
.slot:hover{transform:translateX(5px);box-shadow:0 8px 22px rgba(0,0,0,.07)}
.slot b{display:block}.slot span{font-size:13px;color:var(--mu)}
.slot.used{border-style:solid;border-color:var(--c);border-left-width:5px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 15%,#fff),#fff 70%)}
.chip{font-style:normal;font-size:12px;font-weight:700;padding:4px 12px;border-radius:99px;background:#d1fae5;color:#047857}.used .chip{background:var(--c);color:#fff}
.free .info{color:var(--mu)}
.card{background:#fff;border:1px solid var(--ln);border-radius:18px;overflow:hidden}
form.f{display:grid;grid-template-columns:1fr 1fr;gap:16px}.full{grid-column:1/-1}
label{font-size:13px;color:var(--mu);display:block;margin-bottom:4px;font-weight:500}
input,select,textarea{width:100%;padding:11px 13px;border:2px solid var(--ln);border-radius:12px;font:inherit;background:#fff;transition:.2s}
input:focus,select:focus{outline:0;border-color:var(--ac);box-shadow:0 0 0 4px rgba(99,102,241,.15)}
button,.btn{padding:12px 22px;border:0;border-radius:12px;background:linear-gradient(120deg,#6366f1,#8b5cf6);color:#fff;font:inherit;font-weight:700;cursor:pointer;display:inline-block;transition:.2s}
button:hover,.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(99,102,241,.35)}
.btn.r,button.r{background:linear-gradient(120deg,#ef4444,#f97316)}
.jamgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.jamgrid label{margin:0;cursor:pointer;color:inherit}.jamgrid input{display:none}
.jamgrid span{display:block;padding:12px;border:2px solid var(--ln);border-radius:14px;background:#fff;transition:.2s;color:var(--tx);font-size:14px}
.jamgrid span:hover{transform:translateY(-2px);border-color:var(--ac)}.jamgrid small{display:block;color:var(--mu)}
.jamgrid input:checked+span{border-color:transparent;background:linear-gradient(135deg,#6366f1,#ec4899);color:#fff}.jamgrid input:checked+span small{color:#fce7f3}
.jamgrid .off span{opacity:.6;background:#f3f4f6;cursor:not-allowed;transform:none}.jamgrid i{display:block;font-size:11px;color:var(--no);font-style:normal}
.msg{padding:13px 18px;border-radius:14px;margin:14px 0;background:#d1fae5;color:#065f46;animation:up .4s both}.msg.e{background:#fee2e2;color:#991b1b}
.toast{position:fixed;top:18px;left:50%;z-index:9;padding:13px 24px;border-radius:99px;background:#10b981;color:#fff;font-weight:600;box-shadow:0 10px 30px rgba(16,185,129,.4);animation:toast 4.5s forwards}
footer{padding:30px 0 40px;text-align:center;color:var(--mu);font-size:13px}
table{width:100%;border-collapse:collapse}td,th{padding:10px;border-bottom:1px solid var(--ln);text-align:left;font-size:14px;vertical-align:middle}
.inl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.inl input{width:auto;flex:1;min-width:90px}
.adm{padding:18px;overflow-x:auto;background:rgba(255,255,255,.9);border-radius:20px}.adm .tabs a{--c:#6366f1}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes grad{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(24px)}}
@keyframes pulse{0%,100%{box-shadow:0 10px 30px rgba(0,0,0,.2)}50%{box-shadow:0 10px 40px rgba(255,255,255,.55)}}
@keyframes toast{0%{transform:translate(-50%,-90px)}8%,88%{transform:translate(-50%,0)}100%{transform:translate(-50%,-90px)}}
.fab{display:none;position:fixed;left:16px;right:16px;bottom:max(14px,env(safe-area-inset-bottom));z-index:20;justify-content:center;padding:15px;border-radius:99px;background:linear-gradient(120deg,#6366f1,#ec4899);color:#fff;font-weight:700;box-shadow:0 12px 30px rgba(99,102,241,.45);animation:up .6s .4s both}
@media(max-width:640px){
body{padding-bottom:88px;font-size:14.5px}.w{padding:0 14px}
input,select,textarea{font-size:16px;min-height:46px}input[type=checkbox]{min-height:0}
.hero{padding:28px 0 80px;border-radius:0 0 28px 28px}h1{font-size:25px;margin:12px 0 6px}.hero p{font-size:13.5px;margin:0}.hero .cta{display:none}.badge{font-size:12px;padding:5px 12px}
.panel{margin:-50px 0 18px;padding:16px 16px 18px;border-radius:22px}h2{font-size:17px}
.tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:8px -16px 4px;padding:4px 16px 8px}.tabs::-webkit-scrollbar{display:none}.tabs a{flex:none;padding:8px 15px;font-size:13px}
.w>.tabs{margin:12px -14px 6px;padding:4px 14px 8px}
.slot{grid-template-columns:1fr auto;padding:11px 14px;gap:4px 10px;border-radius:14px;margin-bottom:8px}.slot:hover{transform:none}
.slot b{font-size:15px}.slot .info{grid-column:1/-1;order:3;padding-top:6px;border-top:1px dashed color-mix(in srgb,var(--c) 35%,#fff);word-break:break-word}.slot.free .info{display:none}.chip{font-size:11px;padding:3px 10px}
.cta.b{display:none}.fab{display:flex}
form.f{grid-template-columns:1fr;gap:14px}.jamgrid{grid-template-columns:repeat(2,1fr)}.jamgrid span{padding:13px 12px}
form.f button{width:100%;padding:15px}
.toast{width:calc(100% - 28px);text-align:center;border-radius:16px}
.adm{padding:14px;border-radius:18px}.adm .inl>*{flex:1 1 100%}.adm .inl input[type=time],.adm .inl input[type=number]{flex:1 1 40%}.adm .inl label{flex:1 1 auto}
.adm table,.adm tbody,.adm tr,.adm td{display:block}.adm tr{border:1px solid var(--ln);border-radius:14px;padding:10px 12px;margin-bottom:10px;background:#fff}.adm td{border:0;padding:2px 0}
.adm button{width:100%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.slot{opacity:1}}