* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Outfit', sans-serif; background: #f5f5f5; color: #1a1a1a; font-size: 18px; overflow-x: hidden; }
h1, h2, h3 { font-family: 'Fraunces', serif; }

@keyframes fadeUp   { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeDown { from { opacity:0; transform:translateY(-18px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes scaleIn  { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:scale(1); } }
@keyframes popIn    { from { opacity:0; transform:scale(.7); } to { opacity:1; transform:scale(1); } }
@keyframes dotPop   { 0%{transform:scale(1)} 40%{transform:scale(1.5)} 70%{transform:scale(.85)} 100%{transform:scale(1)} }
@keyframes bigNum   { from { opacity:0; transform:scale(.55) translateY(12px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes toastIn  { 0%{transform:translateX(-50%) translateY(70px) scale(.88);opacity:0} 60%{transform:translateX(-50%) translateY(-8px) scale(1.04);opacity:1} 100%{transform:translateX(-50%) translateY(0) scale(1);opacity:1} }
@keyframes toastOut { from{transform:translateX(-50%) translateY(0) scale(1);opacity:1} to{transform:translateX(-50%) translateY(60px) scale(.88);opacity:0} }
@keyframes checkPop { 0%{transform:scale(0) rotate(-25deg);opacity:0} 60%{transform:scale(1.35) rotate(6deg);opacity:1} 100%{transform:scale(1) rotate(0);opacity:1} }
@keyframes pulse    { 0%,100%{box-shadow:0 0 0 0 rgba(26,158,94,.4)} 50%{box-shadow:0 0 0 10px rgba(26,158,94,0)} }
@keyframes tableRow { from{opacity:0;transform:translateX(14px)} to{opacity:1;transform:translateX(0)} }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes cardSlide { from{opacity:0;transform:translateY(18px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes barIn    { from{opacity:0;transform:translateY(-100%)} to{opacity:1;transform:translateY(0)} }

.page { display:none; min-height:100vh; flex-direction:column; }
.page.on { display:flex; }

.page-enter { animation: fadeIn .28s ease both; }
.page-enter .bar { animation: barIn .35s cubic-bezier(.4,0,.2,1) both; }
.page-enter .inner > * { opacity:0; animation: cardSlide .45s cubic-bezier(.4,0,.2,1) both; }
.page-enter .inner > *:nth-child(1) { animation-delay:.04s; }
.page-enter .inner > *:nth-child(2) { animation-delay:.10s; }
.page-enter .inner > *:nth-child(3) { animation-delay:.17s; }
.page-enter .inner > *:nth-child(4) { animation-delay:.24s; }
.page-enter .inner > *:nth-child(5) { animation-delay:.31s; }

#p-login { align-items:center; justify-content:center; padding:20px; animation: fadeIn .4s ease both; }
.login-box { background:#fff; border-radius:20px; padding:44px 36px; width:100%; max-width:380px; box-shadow:0 4px 20px rgba(0,0,0,.08); animation: scaleIn .52s cubic-bezier(.34,1.56,.64,1) both; }
.login-box h1 { font-size:2.4rem; text-align:center; margin-bottom:8px; animation: fadeDown .5s .18s both; }
.login-box > p { animation: fadeUp .4s .28s both; opacity:0; animation-fill-mode:both; }

.btn-bankid { animation: fadeUp .45s .32s both; }
.btn-freja  { animation: fadeUp .45s .42s both; }
.btn-other  { animation: fadeUp .45s .52s both; }

label { display:block; font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.8px; color:#888; margin:16px 0 7px; }
select, input { width:100%; padding:15px 16px; background:#f5f5f5; border:2px solid #e0e0e0; border-radius:12px; font-family:'Outfit',sans-serif; font-size:1rem; color:#1a1a1a; transition:border-color .2s, box-shadow .2s; }
select:focus, input:focus { outline:none; border-color:#1a1a1a; box-shadow:0 0 0 3px rgba(26,26,26,.08); }
select option { background:#fff; }

.login-hint { text-align:center; color:#bbb; font-size:.78rem; margin-top:5px; margin-bottom:4px; }

.btn { width:100%; margin-top:14px; padding:17px; background:#1a1a1a; color:#fff; border:none; border-radius:12px; font-family:'Fraunces',serif; font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; transition:transform .18s cubic-bezier(.34,1.56,.64,1), background .18s, box-shadow .2s; }
.btn:hover  { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.2); }
.btn:active { transform:scale(.95); box-shadow:none; }

.btn-bankid { width:100%; margin-top:0; padding:17px; background:#1a9e5e; color:#fff; border:none; border-radius:12px; font-family:'Fraunces',serif; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; transition:transform .18s cubic-bezier(.34,1.56,.64,1), background .18s, box-shadow .2s; animation: fadeUp .45s .32s both, pulse 2.2s 1.5s 3; }
.btn-bankid:hover  { background:#168a51; transform:translateY(-2px); box-shadow:0 6px 20px rgba(26,158,94,.4); }
.btn-bankid:active { transform:scale(.95); }

.btn-freja { width:100%; margin-top:10px; padding:17px; background:#1a4fa8; color:#fff; border:none; border-radius:12px; font-family:'Fraunces',serif; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; transition:transform .18s cubic-bezier(.34,1.56,.64,1), background .18s, box-shadow .2s; animation: fadeUp .45s .42s both; }
.btn-freja:hover  { background:#153d85; transform:translateY(-2px); box-shadow:0 6px 20px rgba(26,79,168,.4); }
.btn-freja:active { transform:scale(.95); }

.btn-other { width:100%; margin-top:10px; padding:15px; background:#fff; color:#555; border:2px solid #e0e0e0; border-radius:12px; font-family:'Outfit',sans-serif; font-size:1rem; cursor:pointer; transition:transform .18s, background .18s, border-color .18s; animation: fadeUp .45s .52s both; }
.btn-other:hover  { background:#f5f5f5; border-color:#bbb; transform:translateY(-1px); }
.btn-other:active { transform:scale(.97); }

.btn-back { display:block; width:100%; margin-top:10px; padding:12px; background:none; border:none; font-family:'Outfit',sans-serif; font-size:.9rem; color:#aaa; cursor:pointer; text-align:center; transition:color .18s; }
.btn-back:hover { color:#555; }

.err { color:#d94f4f; text-align:center; margin-top:10px; display:none; animation: fadeUp .3s both; }

#admin-confirm { animation: scaleIn .38s cubic-bezier(.34,1.56,.64,1) both; }

.bar { background:#fff; border-bottom:2px solid #ececec; padding:18px 24px; display:flex; align-items:center; justify-content:space-between; }
.bar h2 { font-size:1.4rem; }
.bar-btn { background:#f0f0f0; border:none; border-radius:10px; padding:10px 18px; font-family:'Outfit',sans-serif; font-size:.95rem; cursor:pointer; color:#555; transition:background .18s, transform .15s; }
.bar-btn:hover  { background:#e4e4e4; }
.bar-btn:active { transform:scale(.94); }

.logo-link { cursor:pointer; user-select:none; transition:opacity .18s, transform .2s cubic-bezier(.34,1.56,.64,1); }
.logo-link:hover  { opacity:.75; transform:scale(1.05); }
.logo-link:active { transform:scale(.96); }

.main { flex:1; overflow-y:auto; padding:28px 20px; }
.inner { max-width:640px; margin:0 auto; }
.inner h2 { font-size:2rem; margin-bottom:6px; }
.inner > p { color:#888; margin-bottom:24px; }

.card { background:#fff; border-radius:16px; padding:24px; margin-bottom:14px; box-shadow:0 2px 12px rgba(0,0,0,.06); transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s; }
.card:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,.11); }
.card h3 { font-size:.78rem; text-transform:uppercase; letter-spacing:1px; color:#aaa; margin-bottom:12px; }
.card-blue   { background:#44eeff; }
.card-green  { background:#a28832 }
.card-yellow { background:#fff5cc; }

.big-num { font-family:'Fraunces',serif; font-size:5rem; font-weight:900; line-height:1; animation: bigNum .6s .15s cubic-bezier(.34,1.56,.64,1) both; }

.dots { display:flex; gap:8px; margin-top:14px; }
.dot { width:22px; height:22px; border-radius:50%; background:#e0e0e0; transition:background .35s, transform .25s; }
.dot.on { background:#1a1a1a; }
.dot.pop { animation: dotPop .42s cubic-bezier(.34,1.56,.64,1); }

.booking-detail { font-family:'Fraunces',serif; font-size:1.5rem; line-height:1.4; margin-bottom:16px; animation: fadeUp .4s .08s both; }

.cancel-btn { background:#fff; border:2px solid #d94f4f; color:#d94f4f; border-radius:10px; padding:10px 20px; font-family:'Outfit',sans-serif; font-size:1rem; font-weight:600; cursor:pointer; transition:background .18s, transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .18s; animation: fadeUp .38s .18s both; }
.cancel-btn:hover  { background:#fff0f0; transform:translateY(-1px); box-shadow:0 4px 14px rgba(217,79,79,.22); }
.cancel-btn:active { transform:scale(.95); }

.muted-txt { color:#aaa; }

.boka-btn { background:#1a1a1a; color:#fff; border:none; border-radius:12px; padding:14px 28px; font-family:'Fraunces',serif; font-size:1.1rem; cursor:pointer; width:100%; transition:transform .18s cubic-bezier(.34,1.56,.64,1), background .18s, box-shadow .2s; animation: fadeUp .4s .12s both; }
.boka-btn:hover  { background:#333; transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.22); }
.boka-btn:active { transform:scale(.95); }

.week-row { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.arrow { background:#fff; border:2px solid #e0e0e0; border-radius:10px; padding:12px 20px; font-size:1.1rem; cursor:pointer; transition:transform .18s cubic-bezier(.34,1.56,.64,1), background .18s, border-color .18s; }
.arrow:hover  { background:#f5f5f5; border-color:#bbb; transform:scale(1.1); }
.arrow:active { transform:scale(.9); }
.week-lbl { flex:1; text-align:center; font-family:'Fraunces',serif; font-size:1.1rem; transition:opacity .18s, transform .18s; }
.week-lbl.out { opacity:0; transform:translateY(6px); }

.tbl-wrap { border-radius:14px; overflow:hidden; border:2px solid #ececec; }
table { width:100%; border-collapse:collapse; background:#fff; }
th { background:#f5f5f5; color:#888; padding:11px 4px; font-size:.74rem; font-weight:600; text-align:center; text-transform:uppercase; }
td { border:1.5px solid #ececec; height:68px; padding:0; }
.tlbl { background:#fafafa; color:#aaa; font-size:.74rem; font-weight:600; text-align:center; padding:6px 3px; vertical-align:middle; line-height:1.5; width:68px; }

tbody tr { animation: tableRow .32s both; }
tbody tr:nth-child(1) { animation-delay:.04s; }
tbody tr:nth-child(2) { animation-delay:.11s; }
tbody tr:nth-child(3) { animation-delay:.18s; }

.slot { width:100%; height:68px; border:none; background:none; cursor:pointer; font-family:'Outfit',sans-serif; font-size:.8rem; font-weight:600; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; transition:transform .18s cubic-bezier(.34,1.56,.64,1), background .2s; position:relative; overflow:hidden; }
.slot::before { content:''; position:absolute; inset:0; background:currentColor; opacity:0; transition:opacity .2s; pointer-events:none; }
.slot:not([disabled]):hover { transform:scale(1.09); z-index:2; }
.slot:not([disabled]):hover::before { opacity:.07; }
.slot:not([disabled]):active { transform:scale(.93); }
.slot.free  { color:#2da868; }
.slot.taken { color:#ccc; cursor:default; }
.slot.mine  { background:#d4f5e2; color:#1a6640; }
.slot.booking-flash { animation: checkPop .5s cubic-bezier(.34,1.56,.64,1) both; }
.slot small  { font-size:.68rem; font-weight:400; }

.loading-overlay { position:fixed; inset:0; background:rgba(245,245,245,.82); display:flex; align-items:center; justify-content:center; z-index:9999; opacity:0; pointer-events:none; transition:opacity .22s; }
.loading-overlay.show { opacity:1; pointer-events:all; }
.spinner { width:36px; height:36px; border:3px solid #e0e0e0; border-top-color:#1a1a1a; border-radius:50%; animation:spin .65s linear infinite; }

.stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
.stat { border-radius:14px; padding:20px; text-align:center; transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s; animation: scaleIn .4s both; }
.stat:nth-child(1) { animation-delay:.04s; }
.stat:nth-child(2) { animation-delay:.12s; }
.stat:nth-child(3) { animation-delay:.20s; }
.stat:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 8px 24px rgba(0,0,0,.1); }
.stat .n { font-family:'Fraunces',serif; font-size:2.6rem; font-weight:900; animation: bigNum .5s .3s both; }
.stat small { font-size:.78rem; color:#555; text-transform:uppercase; }
.section-title { font-family:'Fraunces',serif; font-size:1.2rem; margin:20px 0 10px; }
.a-table { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.06); margin-bottom:16px; }
.a-table th { font-size:.74rem; }
.a-table td { padding:12px 14px; border-bottom:1.5px solid #f0f0f0; font-size:.9rem; transition:background .18s; }
.a-table tr:hover td { background:#fafafa; }
.a-table tr:last-child td { border-bottom:none; }
.del { background:#fde8e8; color:#d94f4f; border:none; border-radius:8px; padding:6px 12px; cursor:pointer; font-family:'Outfit',sans-serif; font-size:.82rem; font-weight:600; transition:background .18s, transform .15s; }
.del:hover  { background:#f5c5c5; }
.del:active { transform:scale(.92); }
.empty { text-align:center; color:#ccc; padding:20px; }

.toast { position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(80px); background:#1a1a1a; color:#fff; padding:14px 26px; border-radius:12px; font-size:1rem; font-weight:600; z-index:999; white-space:nowrap; opacity:0; }
.toast.show { animation: toastIn .52s cubic-bezier(.34,1.56,.64,1) forwards; }
.toast.hide { animation: toastOut .32s ease forwards; }
.toast.err { background:#d94f4f; }

@media(max-width:480px) {
  .stat-row { grid-template-columns:repeat(2,1fr); }
  .tlbl { width:50px; font-size:.68rem; }
  .slot { height:56px; font-size:.72rem; }
  .big-num { font-size:3.8rem; }
}