@import 'tailwindcss';

@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';

@theme {
    --font-sans: 'Plus Jakarta Sans', sans-serif;
    --color-brand: #2455f5;
    --color-court: #ffd23f;
    --color-ink: #171717;
    --color-cream: #faf7f0;
    --color-navy: #172a63;
    --color-canvas: #f5f5f3;
    --color-surface: #fffdfa;
    --color-line: #e2e4eb;
    --color-muted: #6f7280;
}

@layer base {
    * { box-sizing: border-box; }
    html { min-width: 320px; scroll-behavior: smooth; }
    body { margin: 0; background: linear-gradient(135deg, #faf7f0 0%, #f6f6f4 48%, #f0f3fb 100%) fixed; color: #171717; font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; }
    body.nav-open { overflow: hidden; }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font: inherit; }
    button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
    input, select, textarea { width: 100%; min-width: 0; border: 1px solid #dfe1e8; border-radius: 12px; padding: .82rem .9rem; background: #fffdfa; color: #171717; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
    input:hover, select:hover, textarea:hover { border-color: #bdc5dc; background: white; }
    input:focus, select:focus, textarea:focus { border-color: #2455f5; outline: 0; box-shadow: 0 0 0 4px rgb(36 85 245 / 12%); }
    label { display: grid; gap: .48rem; min-width: 0; color: #393733; font-size: .8rem; font-weight: 700; }
    h1 { margin: 0 0 .4rem; font-size: clamp(1.7rem, 3.5vw, 2.25rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.12; }
    h2 { margin: 0 0 1rem; font-size: 1.08rem; letter-spacing: -.02em; }
    p { margin: .25rem 0; color: #6f7280; line-height: 1.6; }
    ::selection { background: #ffd23f; color: #171717; }
}

@layer components {
    .shell { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh; }
    aside { position: sticky; top: 0; z-index: 30; display: flex; height: 100vh; min-height: 0; flex-direction: column; overflow: hidden auto; background: linear-gradient(180deg, #1d3b8d 0%, #172a63 50%, #111b3f 100%); color: white; padding: 1.3rem; }
    aside::after { position: absolute; right: -5rem; bottom: 4rem; width: 11rem; height: 11rem; border: 2.2rem solid rgb(255 255 255 / 4%); border-radius: 50%; content: ''; pointer-events: none; }
    .sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
    .brand { display: block; min-width: 0; flex: 1; overflow: hidden; }
    .brand img { display: block; width: min(205px, 100%); height: 82px; object-fit: contain; object-position: left center; filter: drop-shadow(0 8px 20px rgb(0 0 0 / 18%)); }
    .sidebar-intro { display: flex; align-items: center; gap: .55rem; margin: .25rem .65rem .8rem; color: #b9c5e8; font-size: .65rem; line-height: 1.45; }
    .sidebar-pulse { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #ffd23f; box-shadow: 0 0 0 4px rgb(255 210 63 / 12%); }
    .sidebar-close { display: none; width: 40px; height: 40px; flex: 0 0 auto; border: 0; border-radius: 10px; background: rgb(255 255 255 / 8%); color: white; cursor: pointer; font-size: 1.6rem; line-height: 1; }
    nav { position: relative; z-index: 1; flex: 1; margin-top: .35rem; }
    nav p { margin: 1.35rem .9rem .55rem; color: #8997bd; font-size: .6rem; font-weight: 800; letter-spacing: .16em; }
    nav a { display: flex; align-items: center; gap: .75rem; margin: .18rem 0; border: 1px solid transparent; border-radius: 12px; padding: .76rem .8rem; color: #d8def0; font-size: .86rem; font-weight: 600; transition: color .18s ease, background .18s ease, transform .18s ease; }
    nav a span { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 9px; background: rgb(255 255 255 / 6%); font-size: 1rem; }
    nav a:hover { background: rgb(255 255 255 / 7%); color: white; transform: translateX(3px); }
    nav a.active { border-color: rgb(255 255 255 / 10%); background: rgb(255 255 255 / 12%); color: white; box-shadow: 0 10px 25px rgb(5 14 45 / 16%); }
    nav a.active span { background: #ffd23f; color: #171717; }
    .logout { position: relative; z-index: 1; display: flex; width: 100%; align-items: center; gap: .65rem; border: 1px solid rgb(255 255 255 / 8%); border-radius: 12px; background: rgb(255 255 255 / 4%); color: #b9c5e8; cursor: pointer; padding: .8rem; transition: color .18s ease, background .18s ease; }
    .logout:hover { background: rgb(255 255 255 / 8%); color: white; }
    .sidebar-backdrop { display: none; }
    main { min-width: 0; }
    header { position: sticky; top: 0; z-index: 15; display: flex; height: 76px; align-items: center; justify-content: flex-end; border-bottom: 1px solid rgb(218 221 231 / 78%); background: rgb(247 247 245 / 82%); padding: 0 2.25rem; backdrop-filter: blur(18px); }
    header small, .transaction-row small, .detail-line small { display: block; margin-top: .2rem; color: #777; font-size: .68rem; }
    .menu, .mobile-brand { display: none; }
    .user-summary { display: flex; min-width: 0; align-items: center; gap: .65rem; }
    .user-summary > span:last-child { min-width: 0; }
    .user-summary b { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .user-avatar { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; overflow: hidden; border: 1px solid #dce2f5; border-radius: 13px; background: #edf1ff; box-shadow: 0 7px 18px rgb(23 42 99 / 8%); }
    .user-avatar img { width: 27px; height: 27px; object-fit: contain; }
    .content { width: 100%; max-width: 1440px; margin: auto; padding: 2.5rem clamp(1.25rem, 3vw, 3rem); }
    .page-head { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; margin-bottom: 2rem; }
    .page-head > div:first-child { min-width: 0; }
    .actions { display: flex; align-items: center; gap: .65rem; }
    .report-download { justify-content: flex-end; margin-bottom: 1rem; }
    .btn { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: .35rem; border: 1px solid transparent; border-radius: 13px; padding: .76rem 1.05rem; font-size: .82rem; font-weight: 800; line-height: 1.2; cursor: pointer; text-align: center; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
    .btn:hover { transform: translateY(-2px); }
    .primary { background: #2455f5; color: white; box-shadow: 0 10px 22px rgb(36 85 245 / 20%); }
    .primary:hover { background: #1745e5; box-shadow: 0 14px 28px rgb(36 85 245 / 28%); }
    .dark { background: #172a63; color: white; box-shadow: 0 10px 22px rgb(23 42 99 / 14%); }
    .soft { border-color: #e0e4ee; background: #eef1f7; color: #172a63; }
    .danger-bg { background: #dc2626; color: white; }
    .full { width: 100%; }
    .card { min-width: 0; margin-bottom: 1.35rem; border: 1px solid #e1e3ea; border-radius: 18px; background: rgb(255 253 250 / 92%); padding: 1.45rem; box-shadow: 0 10px 30px rgb(23 42 99 / 5%); backdrop-filter: blur(8px); }
    .balance-card { position: relative; display: flex; min-height: 205px; align-items: end; justify-content: space-between; overflow: hidden; margin-bottom: 2rem; border: 1px solid rgb(255 255 255 / 10%); border-radius: 22px; background: radial-gradient(circle at 82% 25%, rgb(255 210 63 / 15%), transparent 14rem), linear-gradient(125deg, #1d3b8d, #172a63); color: white; padding: 2.2rem; box-shadow: 0 20px 45px rgb(23 42 99 / 18%); }
    .balance-card::before { position: absolute; top: -7rem; right: 9%; width: 18rem; height: 18rem; border: 3.5rem solid rgb(255 255 255 / 8%); border-radius: 50%; content: ''; }
    .balance-card > * { position: relative; z-index: 1; }
    .balance-card strong { display: block; margin: .55rem 0; font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -.055em; overflow-wrap: anywhere; }
    .balance-card p { max-width: 75%; color: #dfe6ff; }
    .balance-mark { display: grid; width: 76px; height: 76px; flex: 0 0 76px; place-items: center; border: 1px solid rgb(255 255 255 / 14%); border-radius: 20px; background: rgb(255 255 255 / 9%); backdrop-filter: blur(8px); }
    .balance-mark img { width: 48px; height: 48px; object-fit: contain; }
    .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0 1.8rem; }
    .stats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .stats article { position: relative; min-width: 0; overflow: hidden; border: 1px solid #e1e3ea; border-left: 4px solid; border-radius: 16px; background: rgb(255 253 250 / 92%); padding: 1.35rem; box-shadow: 0 8px 24px rgb(23 42 99 / 4%); }
    .stats article strong { display: block; margin-top: .6rem; font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: -.035em; overflow-wrap: anywhere; }
    .stats article > span { position: absolute; top: .8rem; right: 1rem; color: #d8d3ca; font-size: 1.4rem; font-weight: 800; }
    .green { border-color: #16a34a !important; }
    .red { border-color: #dc2626 !important; }
    .blue { border-color: #2455f5 !important; }
    .yellow { border-color: #ffd23f !important; }
    .card-head, .transaction-row, .category-row, .detail-line, .grand-total, .detail-head { display: flex; align-items: center; justify-content: space-between; }
    .card-head { gap: 1rem; }
    .transaction-row { gap: .85rem; border-bottom: 1px solid #eee9e0; border-radius: 12px; padding: .9rem .45rem; transition: background .18s ease, transform .18s ease; }
    .transaction-row:hover { background: #faf8f3; transform: translateX(3px); }
    .transaction-row > span:nth-child(2), .transaction-row > span:first-child:not(.dot) { min-width: 0; flex: 1; }
    .transaction-row b, .transaction-row strong { overflow-wrap: anywhere; }
    .dot { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 13px; font-weight: 800; }
    .dot.income { background: #dcfce7; color: #16803c; }
    .dot.expense { background: #fee2e2; color: #dc2626; }
    .income { color: #16803c; }
    .expense { color: #dc2626; }
    .grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1.25rem; }
    .category-row { gap: .5rem; border-top: 1px solid #eee9e0; padding: .7rem 0; }
    .category-row form:first-child { display: grid; min-width: 0; flex: 1; grid-template-columns: minmax(0, 1fr) 130px auto; gap: .5rem; }
    .link { border: 0; background: none; color: #2349b8; cursor: pointer; font-weight: 700; }
    .danger { color: #dc2626; }
    .filters form { display: flex; align-items: end; gap: .8rem; }
    .filters label { min-width: 130px; flex: 1; }
    .table-card { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .filters { background: rgb(244 246 251 / 88%); }
    table { width: 100%; min-width: 680px; border-collapse: collapse; }
    th, td { border-bottom: 1px solid #eee9e0; padding: 1rem .7rem; font-size: .88rem; text-align: left; }
    th { background: #f3f5fa; color: #676b78; font-size: .68rem; letter-spacing: .04em; }
    th:first-child { border-radius: 10px 0 0 10px; }
    th:last-child { border-radius: 0 10px 10px 0; }
    tbody tr { transition: background .18s ease; }
    tbody tr:hover { background: rgb(237 241 255 / 45%); }
    .money { font-weight: 700; white-space: nowrap; }
    .badge { display: inline-block; border-radius: 20px; padding: .35rem .55rem; font-size: .7rem; font-weight: 700; }
    .badge.income { background: #dcfce7; }
    .badge.expense { background: #fee2e2; }
    .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .wide { grid-column: 1 / -1; }
    .detail-head { gap: 1rem; margin: 2rem 0 1rem; }
    .detail-head h2 { margin: 0; }
    .detail-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(120px, 1fr) minmax(0, 2fr) 44px; gap: .7rem; align-items: end; margin: .6rem 0; border-radius: 12px; background: #faf9f6; padding: 1rem; }
    .remove { height: 44px; border: 0; border-radius: 9px; background: #fee2e2; color: #dc2626; font-size: 1.3rem; }
    .form-total, .grand-total { margin-top: 1.3rem; border-top: 2px solid #171717; padding-top: 1.2rem; text-align: right; }
    .form-total strong, .grand-total strong { display: block; font-size: 1.6rem; overflow-wrap: anywhere; }
    .detail-card { max-width: 750px; }
    .detail-card > h2 { margin: 1rem 0 1.5rem; overflow-wrap: anywhere; }
    .detail-line { gap: 1rem; border-bottom: 1px solid #eee9e0; padding: .8rem 0; }
    .detail-line > * { min-width: 0; overflow-wrap: anywhere; }
    .detail-line strong { flex: 0 0 auto; }
    .grand-total { gap: 1rem; text-align: left; }
    .flash, .alert { margin-bottom: 1.2rem; border: 1px solid transparent; border-radius: 14px; padding: 1rem 1.1rem; font-size: .86rem; font-weight: 700; }
    .flash { background: #dcfce7; color: #166534; }
    .alert { background: #fee2e2; color: #991b1b; }
    .empty { padding: 2rem; color: #888; text-align: center; }
    .login-page { position: relative; display: grid; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; place-items: center; background: radial-gradient(circle at 12% 16%, rgb(255 210 63 / 18%) 0 5rem, transparent 5.1rem), linear-gradient(135deg, #faf7f0 0%, #f4f5f8 52%, #e9edfa 100%); padding: 1.5rem; }
    .login-page::before, .login-page::after { position: fixed; border: 3.5rem solid rgb(36 85 245 / 6%); border-radius: 50%; content: ''; pointer-events: none; }
    .login-page::before { top: -10rem; right: -7rem; width: 27rem; height: 27rem; }
    .login-page::after { bottom: -9rem; left: -5rem; width: 21rem; height: 21rem; }
    .login-card { position: relative; z-index: 1; width: min(450px, 100%); overflow: hidden; border: 1px solid #dfe3ef; border-radius: 24px; background: rgb(255 253 250 / 96%); padding: 2.2rem; text-align: center; box-shadow: 0 28px 70px rgb(23 42 99 / 16%); backdrop-filter: blur(18px); }
    .login-card::before { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #2455f5 0 82%, #ffd23f 82% 100%); content: ''; }
    .auth-shuttle { position: absolute; top: 1.1rem; right: 1.25rem; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #dce2f5; border-radius: 12px; background: #edf1ff; }
    .auth-shuttle img { width: 27px; height: 27px; object-fit: contain; }
    .login-logo { display: block; width: min(270px, 80%); height: 120px; margin: -.8rem auto .1rem; object-fit: contain; }
    .login-card form { display: grid; gap: 1rem; margin: 1.5rem 0; text-align: left; }
    .check { display: flex; align-items: center; }
    .check input { width: auto; }
    .login-card > small { display: block; margin-top: 1.2rem; color: #777; font-size: .62rem; font-weight: 800; letter-spacing: .11em; }
    .pagination { margin-top: 1rem; }
    .eyebrow { display: block; margin-bottom: .5rem; color: #2455f5; font-size: .63rem; font-weight: 800; letter-spacing: .15em; }
    .optional { color: #92908a; font-size: .68rem; font-weight: 500; }
    .back-link, .auth-back { display: inline-block; margin-bottom: .8rem; color: #66625c; font-size: .78rem; font-weight: 700; }
    .auth-back { display: block; text-align: left; }
    .auth-divider { display: flex; align-items: center; gap: .8rem; margin: 1rem 0; color: #99958d; font-size: .72rem; }
    .auth-divider::before, .auth-divider::after { height: 1px; flex: 1; background: #ddd9d0; content: ''; }
    .register-card { width: min(640px, 100%); }
    .register-card .login-logo { height: 110px; margin-bottom: 0; }
    .register-card form { margin-top: 1.25rem; }
    .club-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1.35rem; }
    .club-strip a { position: relative; min-width: 0; overflow: hidden; border: 1px solid #e1e3ea; border-radius: 16px; background: rgb(255 253 250 / 92%); padding: 1.15rem 1.2rem; box-shadow: 0 8px 24px rgb(23 42 99 / 4%); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
    .club-strip a:hover { border-color: rgb(36 85 245 / 25%); transform: translateY(-2px); box-shadow: 0 12px 28px rgb(23 42 99 / 7%); }
    .club-strip a::after { position: absolute; right: -1rem; bottom: -1.4rem; width: 5rem; height: 5rem; border: 1.2rem solid #2455f5; border-radius: 50%; content: ''; opacity: .08; transition: transform .22s ease; }
    .club-strip a:hover::after { transform: scale(1.12) rotate(8deg); }
    .club-strip small, .club-strip strong, .club-strip span { position: relative; z-index: 1; display: block; }
    .club-strip small { color: #777; font-size: .65rem; font-weight: 800; letter-spacing: .08em; }
    .club-strip strong { margin: .3rem 0; font-size: 1.85rem; letter-spacing: -.05em; }
    .club-strip span { color: #2455f5; font-size: .72rem; font-weight: 800; }
    .club-strip span b { display: inline; transition: margin .18s ease; }
    .club-strip a:hover span b { margin-left: .2rem; }
    .dashboard-head { padding-top: .25rem; }
    .activity-card { padding-bottom: .7rem; }
    .member-welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; }
    .member-number { display: inline-flex; border: 1px solid #dad5cb; border-radius: 999px; background: white; padding: .55rem .8rem; color: #5e5a53; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
    .quota-hero { position: relative; display: grid; grid-template-columns: 1fr 1.15fr; gap: 2rem; overflow: hidden; margin-bottom: 2rem; border: 1px solid rgb(255 255 255 / 10%); border-radius: 22px; background: linear-gradient(125deg, #1d3b8d, #172a63); color: white; padding: 2rem; box-shadow: 0 20px 45px rgb(23 42 99 / 15%); }
    .quota-hero::before { position: absolute; top: -5rem; left: 35%; width: 15rem; height: 15rem; border: 2.7rem solid rgb(255 255 255 / 7%); border-radius: 50%; content: ''; }
    .quota-hero > * { position: relative; z-index: 1; }
    .quota-hero small { display: block; color: #b7b7b7; font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
    .quota-hero > div:first-child strong { display: inline-block; margin-top: .3rem; font-size: clamp(4rem, 9vw, 7rem); line-height: .9; }
    .quota-hero > div:first-child span { margin-left: .5rem; color: #ffd23f; font-weight: 700; }
    .quota-meta { display: grid; align-content: center; gap: .7rem; border-left: 1px solid rgb(255 255 255 / 18%); padding-left: 2rem; }
    .quota-meta span { color: #c8c8c8; font-size: .82rem; }
    .quota-meta b { color: white; font-size: 1.05rem; }
    .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
    .section-heading h2, .member-welcome h1, .card-head h2 { margin-bottom: 0; }
    .membership-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.8rem; }
    .membership-ticket { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; overflow: hidden; border: 1px solid #e1e3ea; border-radius: 18px; background: #fffdfa; box-shadow: 0 8px 25px rgb(23 42 99 / 4%); transition: transform .18s ease, box-shadow .18s ease; }
    .membership-ticket:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgb(23 42 99 / 7%); }
    .membership-ticket::before, .membership-ticket::after { position: absolute; right: 75px; width: 18px; height: 18px; border: 1px solid #ddd8cf; border-radius: 50%; background: #faf7f0; content: ''; transform: translateX(50%); }
    .membership-ticket::before { top: -10px; }
    .membership-ticket::after { bottom: -10px; }
    .ticket-main { min-width: 0; padding: 1.15rem; }
    .ticket-main > strong { display: block; margin-top: .8rem; overflow-wrap: anywhere; }
    .ticket-main p { font-size: .78rem; }
    .ticket-balance { display: grid; width: 76px; place-content: center; border-left: 1px dashed #d6d0c6; background: #f5f1e8; text-align: center; }
    .ticket-balance strong { font-size: 2rem; }
    .ticket-balance small { color: #777; font-size: .65rem; }
    .membership-ticket footer { grid-column: 1 / -1; border-top: 1px solid #eee9df; padding: .55rem 1.15rem; color: #777; font-size: .68rem; }
    .status-pill { display: inline-flex; width: fit-content; align-items: center; border-radius: 999px; padding: .32rem .55rem; font-size: .65rem; font-weight: 800; white-space: nowrap; }
    .status-pill.active { background: #dcfce7; color: #167039; }
    .status-pill.muted { background: #efede7; color: #6d6a65; }
    .status-pill.warning { background: #fff1cc; color: #8a5b00; }
    .status-pill.danger { background: #fee2e2; color: #b91c1c; }
    .member-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    .schedule-row, .ledger-row, .package-row, .session-row { display: flex; min-width: 0; align-items: center; gap: .8rem; border-top: 1px solid #eee9e0; padding: .9rem .3rem; }
    .schedule-row time, .session-row time { display: grid; width: 48px; height: 52px; flex: 0 0 48px; place-content: center; border-radius: 10px; background: #172a63; color: #ffd23f; font-size: .62rem; text-align: center; text-transform: uppercase; }
    .schedule-row time b, .session-row time b { color: white; font-size: 1.15rem; line-height: 1; }
    .schedule-row > span, .ledger-row > span:nth-child(2), .package-row > div:first-child, .session-row > span:nth-child(2) { min-width: 0; flex: 1; }
    .schedule-row small, .ledger-row small, .package-row small, .identity-cell small, .session-row small, td > small { display: block; margin-top: .2rem; color: #777; font-size: .68rem; }
    .row-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .55rem; }
    .row-actions form, .page-head .actions form { margin: 0; }
    .ledger-sign { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 50%; font-weight: 800; }
    .ledger-sign.plus { background: #dcfce7; color: #16803c; }
    .ledger-sign.minus { background: #fee2e2; color: #c52222; }
    .empty-state { grid-column: 1 / -1; border: 1px dashed #ccd2e2; border-radius: 16px; background: rgb(247 248 252 / 72%); padding: 2.5rem 1.5rem; text-align: center; }
    .empty-state > span { display: block; margin-bottom: .5rem; font-size: 2rem; }
    .empty-state h2 { margin-bottom: .35rem; }
    .empty-state.compact { padding: 1.5rem; }
    .identity-cell { display: flex; min-width: 230px; align-items: center; gap: .75rem; }
    .identity-cell > span, .attendance-person > span { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 12px; background: #172a63; color: #ffd23f; font-size: .72rem; font-weight: 800; }
    .credit-count, .credit-total { color: #2455f5; font-size: 1.3rem; }
    .admin-split { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.4fr); gap: 1.25rem; align-items: start; }
    .package-form-card { position: sticky; top: 92px; }
    .compact-form { display: grid; gap: .9rem; margin-top: 1.2rem; }
    .package-row { justify-content: space-between; }
    .package-row > div:last-child { flex: 0 0 auto; text-align: right; }
    .session-row { transition: color .15s ease, transform .15s ease; }
    .session-row:hover { color: #2455f5; transform: translateX(3px); }
    .session-row > span:nth-child(3) { min-width: 62px; text-align: center; }
    .session-head { align-items: end; }
    .session-price { border-left: 4px solid #ffd23f; padding-left: 1rem; text-align: right; }
    .session-price small { display: block; color: #777; font-size: .65rem; font-weight: 800; letter-spacing: .08em; }
    .session-price strong { font-size: 1.3rem; }
    .attendance-guide { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; color: #66625c; font-size: .72rem; }
    .attendance-guide span { display: flex; align-items: center; gap: .35rem; }
    .guide-dot { width: 9px; height: 9px; border-radius: 50%; }
    .guide-dot.present { background: #16a34a; }
    .guide-dot.absent { background: #aaa69e; }
    .guide-dot.charged { background: #e7a514; }
    .attendance-list { display: grid; gap: .75rem; }
    .attendance-card { display: grid; grid-template-columns: minmax(210px, .6fr) minmax(0, 1.4fr); align-items: center; gap: 1rem; border: 1px solid #e1e3ea; border-radius: 17px; background: rgb(255 253 250 / 92%); padding: 1rem; box-shadow: 0 8px 24px rgb(23 42 99 / 4%); transition: border-color .18s ease, box-shadow .18s ease; }
    .attendance-card:hover { border-color: rgb(36 85 245 / 22%); box-shadow: 0 12px 28px rgb(23 42 99 / 7%); }
    .attendance-person { display: flex; min-width: 0; align-items: center; gap: .75rem; }
    .attendance-person small { display: block; color: #777; font-size: .68rem; }
    .attendance-card form { display: grid; grid-template-columns: minmax(130px, 1fr) auto; gap: .65rem; }
    .attendance-actions { display: flex; gap: .35rem; }
    .attendance-actions button { min-height: 42px; border: 1px solid #ddd8cf; border-radius: 9px; background: #faf9f6; padding: .55rem .7rem; cursor: pointer; font-size: .7rem; font-weight: 700; }
    .attendance-actions button:hover, .attendance-actions button.selected { border-color: #2455f5; background: #2455f5; color: white; }
    .inventory-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.25rem; }
    .inventory-summary article { position: relative; min-width: 0; overflow: hidden; border: 1px solid #e1e3ea; border-radius: 18px; background: rgb(255 253 250 / 92%); padding: 1.1rem; box-shadow: 0 8px 24px rgb(23 42 99 / 4%); }
    .inventory-item-summary { display: flex; min-width: 0; align-items: center; gap: .8rem; }
    .inventory-item-summary > span { font-size: 1.8rem; }
    .inventory-item-summary > div { min-width: 0; flex: 1; }
    .inventory-item-summary small, .inventory-item-summary strong { display: block; }
    .inventory-item-summary small { color: #777; font-size: .65rem; }
    .inventory-item-summary p { font-size: .72rem; }
    .inventory-item-summary > b { position: absolute; top: .55rem; right: .55rem; border-radius: 999px; background: #dcfce7; padding: .25rem .45rem; color: #167039; font-size: .58rem; }
    .inventory-summary article.low-stock { border-color: #efc66e; background: #fffaf0; }
    .inventory-summary article.low-stock .inventory-item-summary > b { background: #fff1cc; color: #8a5b00; }
    .inventory-summary article.inactive-item { background: #f2f3f6; opacity: .72; }
    .inventory-editor { margin-top: .8rem; border-top: 1px solid #e8eaf0; padding-top: .7rem; }
    .inventory-editor summary { cursor: pointer; color: #2455f5; font-size: .7rem; font-weight: 800; list-style: none; }
    .inventory-editor summary::-webkit-details-marker { display: none; }
    .inventory-editor .compact-form { margin-top: .8rem; }
    .inventory-delete { margin-top: .75rem; text-align: right; }
    .inventory-forms { grid-template-columns: 1fr 1fr; margin-bottom: 1.25rem; }
    .inventory-forms .package-form-card { position: static; }
    .top-up-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 1.25rem; align-items: start; }
    .payment-card { background: linear-gradient(145deg, #1d3b8d, #172a63); color: white; }
    .payment-card .eyebrow { color: #ffd23f; }
    .payment-amount { display: block; margin: .25rem 0 1.4rem; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -.05em; }
    .payment-credit { display: inline-flex; margin: -1rem 0 1.4rem; border-radius: 999px; background: rgb(255 210 63 / 14%); padding: .4rem .65rem; color: #ffe781; font-size: .7rem; font-weight: 800; }
    .bank-list { display: grid; gap: .75rem; }
    .bank-card { display: flex; align-items: center; gap: .9rem; border: 1px solid rgb(255 255 255 / 13%); border-radius: 14px; background: rgb(255 255 255 / 8%); padding: 1rem; }
    .bank-card > span { display: grid; width: 48px; height: 40px; flex: 0 0 48px; place-items: center; border-radius: 9px; background: white; color: #172a63; font-size: .72rem; font-weight: 800; }
    .bank-card div { min-width: 0; }
    .bank-card strong, .bank-card small { display: block; }
    .bank-card strong { font-size: 1.05rem; letter-spacing: .04em; overflow-wrap: anywhere; }
    .bank-card small { margin-top: .2rem; color: #cbd4ef; font-size: .68rem; }
    .payment-note { margin-top: 1rem; border-radius: 10px; background: rgb(255 210 63 / 12%); padding: .75rem; color: #f9e9a8; font-size: .72rem; line-height: 1.5; }
    .top-up-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; margin: 1rem 0 1.25rem; }
    .top-up-steps span { display: grid; justify-items: center; gap: .35rem; border-radius: 10px; background: #f5f7fc; padding: .65rem .3rem; color: #606779; font-size: .62rem; font-weight: 700; text-align: center; }
    .top-up-steps b { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #2455f5; color: #fff; font-size: .65rem; }
    .top-up-target { display: grid; gap: .2rem; border: 1px solid #d9e0fa; border-radius: 12px; background: #f4f7ff; padding: .8rem .9rem; }
    .top-up-target strong { color: #172a63; font-size: .8rem; }
    .top-up-target span { color: #697187; font-size: .68rem; line-height: 1.5; }
    .field-help { color: #848795; font-size: .66rem; font-weight: 500; }
    .review-table { min-width: 1120px; }
    .top-up-setting-card { display: grid; grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr); align-items: end; gap: 1.5rem; }
    .top-up-setting-card p { font-size: .8rem; }
    .setting-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; align-items: end; gap: .75rem; }
    .member-edit-card { display: grid; grid-template-columns: minmax(160px, .4fr) minmax(0, 1.6fr); align-items: end; gap: 1.25rem; }
    .member-edit-card .setting-form { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
    .membership-editor { border-top: 1px solid #eee9e0; }
    .membership-editor summary { border-top: 0; cursor: pointer; list-style: none; }
    .membership-editor summary::-webkit-details-marker { display: none; }
    .membership-edit-form { border-top: 1px dashed #dfe1e8; border-radius: 12px; background: #f8f9fc; padding: 1rem; }
    .membership-delete { display: flex; justify-content: flex-end; padding: .75rem 1rem; }
    .session-head-actions { display: grid; justify-items: end; gap: .75rem; }
    .registration-admin-card { overflow-x: auto; }
    .registration-table { min-width: 1050px; }
    .registration-create-panel { margin-bottom: 1rem; border: 1px solid #dfe3ef; border-radius: 14px; background: #f8f9fc; padding: .9rem; }
    .registration-create-panel > summary, .registration-editor > summary { cursor: pointer; color: #2455f5; font-size: .75rem; font-weight: 800; list-style: none; }
    .registration-create-panel > summary::-webkit-details-marker, .registration-editor > summary::-webkit-details-marker { display: none; }
    .registration-create-panel > small { display: block; margin-top: .65rem; color: #777; font-size: .65rem; }
    .capacity-full-note { margin-bottom: 1rem; border: 1px solid #efd18c; border-radius: 12px; background: #fff8e7; padding: .8rem 1rem; color: #805d12; font-size: .72rem; font-weight: 700; }
    .registration-create-form { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)) auto; align-items: end; gap: .65rem; margin-top: .9rem; }
    .registration-editor { min-width: 720px; }
    .session-registration-form { display: grid; grid-template-columns: repeat(4, minmax(145px, 1fr)); align-items: end; gap: .55rem; margin-top: .7rem; }
    .session-registration-form label { font-size: .65rem; }
    .session-registration-form input, .session-registration-form select { padding: .62rem .7rem; }
    .session-registration-form .btn { min-height: 40px; padding: .55rem .75rem; }
    .session-registration-form .registration-notes { grid-column: span 3; }
    .registration-delete { margin-top: .65rem; text-align: right; }
    .public-nav { position: sticky; top: 0; z-index: 20; display: flex; height: 78px; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid rgb(218 221 231 / 78%); background: rgb(250 247 240 / 88%); padding: 0 max(1rem, calc((100vw - 1180px) / 2)); backdrop-filter: blur(18px); }
    .public-brand img { display: block; width: 190px; height: 64px; object-fit: contain; object-position: left center; }
    .public-actions { display: flex; align-items: center; gap: .65rem; }
    .public-actions > span { max-width: 180px; overflow: hidden; font-size: .78rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
    .public-content { width: min(1180px, 100%); margin: 0 auto; padding: 2.5rem 1rem 4rem; }
    .public-hero { position: relative; overflow: hidden; margin-bottom: 1.5rem; border-radius: 24px; background: linear-gradient(125deg, #1d3b8d, #172a63); color: white; padding: clamp(2rem, 6vw, 4rem); box-shadow: 0 20px 45px rgb(23 42 99 / 15%); }
    .public-hero::after { position: absolute; top: -5rem; right: -3rem; width: 16rem; height: 16rem; border: 3rem solid rgb(255 210 63 / 12%); border-radius: 50%; content: ''; }
    .public-hero > * { position: relative; z-index: 1; }
    .public-hero .eyebrow { color: #ffd23f; }
    .public-hero h1 { max-width: 680px; font-size: clamp(2.1rem, 6vw, 4rem); }
    .public-hero p { color: #d7def2; }
    .public-session-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
    .public-session-card { display: grid; grid-template-columns: 68px minmax(0, 1fr); overflow: hidden; border: 1px solid #e1e3ea; border-radius: 20px; background: rgb(255 253 250 / 94%); box-shadow: 0 10px 30px rgb(23 42 99 / 6%); }
    .public-session-date { display: grid; align-content: start; justify-items: center; gap: .1rem; background: #172a63; color: #ffd23f; padding: 1.25rem .5rem; text-transform: uppercase; }
    .public-session-date strong { color: white; font-size: 1.7rem; line-height: 1; }
    .public-session-date span { font-size: .67rem; font-weight: 800; }
    .public-session-main { min-width: 0; padding: 1.2rem; }
    .public-session-main > small { color: #777; font-size: .65rem; font-weight: 700; }
    .public-session-main h2 { margin: .55rem 0 .2rem; overflow-wrap: anywhere; }
    .public-session-main p { min-height: 2.5rem; font-size: .76rem; }
    .public-session-meta { display: flex; justify-content: space-between; gap: .5rem; margin: 1rem 0; color: #2455f5; font-size: .7rem; font-weight: 800; }
    .public-session-detail { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin: 1rem 0 1.5rem; border-radius: 22px; background: linear-gradient(125deg, #1d3b8d, #172a63); color: white; padding: clamp(1.5rem, 4vw, 2.5rem); }
    .public-session-detail .eyebrow { color: #ffd23f; }
    .public-session-detail p { color: #d7def2; }
    .public-session-capacity { display: grid; justify-items: end; gap: .3rem; }
    .public-session-capacity strong { color: #ffd23f; font-size: 1.45rem; white-space: nowrap; }
    .public-session-capacity span { color: #d7def2; font-size: .7rem; font-weight: 800; }
    .public-registration-grid { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: 1.25rem; align-items: start; }
    .registration-form-card { position: sticky; top: 96px; }
    .registration-confirmation { display: grid; gap: .25rem; margin-top: 1rem; border-radius: 14px; background: #eef2ff; padding: 1rem; }
    .registration-confirmation span { color: #2455f5; font-size: .72rem; font-weight: 800; }
    .payment-options { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin: 0; border: 0; padding: 0; }
    .payment-options legend { margin-bottom: .48rem; color: #393733; font-size: .8rem; font-weight: 700; }
    .payment-options label { display: flex; align-items: center; gap: .65rem; border: 1px solid #dfe1e8; border-radius: 12px; background: #fffdfa; padding: .8rem; cursor: pointer; }
    .payment-options input { width: auto; }
    .payment-options b, .payment-options small { display: block; }
    .payment-options small { margin-top: .15rem; color: #777; font-size: .62rem; }
    .compact-bank-info { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .8rem; margin-top: 1rem; border-top: 1px solid #eee9e0; padding-top: 1rem; color: #5e6270; font-size: .68rem; }
    .compact-bank-info span { display: flex; justify-content: space-between; gap: .4rem; }
    .compact-bank-info small { grid-column: 1 / -1; color: #777; }
    .participant-list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
    .participant-list li { display: flex; align-items: center; gap: .7rem; border-top: 1px solid #eee9e0; padding: .75rem .2rem; }
    .participant-list li > span { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 9px; background: #172a63; color: #ffd23f; font-size: .65rem; font-weight: 800; }
    .participant-list li > strong { font-size: .82rem; }
    .proof-button { min-height: 38px; padding: .55rem .75rem; white-space: nowrap; }
    .review-form { display: grid; min-width: 310px; gap: .5rem; }
    .review-form input { padding: .62rem .7rem; }
    .review-actions { display: flex; gap: .45rem; }
    .review-actions .btn { min-height: 38px; flex: 1; padding: .55rem .75rem; }
}

@media (max-width: 1100px) {
    .stats.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attendance-card { grid-template-columns: 1fr; }
    .inventory-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .public-session-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
    .shell { display: block; }
    aside { position: fixed; left: 0; width: min(290px, 86vw); transform: translateX(-105%); transition: transform .22s ease; box-shadow: 16px 0 40px rgb(0 0 0 / 25%); }
    aside.open { transform: translateX(0); }
    .sidebar-close { display: grid; place-items: center; }
    .sidebar-backdrop { position: fixed; inset: 0; z-index: 25; display: block; visibility: hidden; border: 0; background: rgb(10 14 28 / 55%); opacity: 0; transition: opacity .22s ease, visibility .22s; }
    body.nav-open .sidebar-backdrop { visibility: visible; opacity: 1; }
    header { height: 64px; justify-content: flex-start; gap: .75rem; padding: 0 1rem; }
    .menu { display: block; width: 42px; height: 42px; flex: 0 0 42px; border: 0; border-radius: 10px; background: #efede7; font-size: 1.35rem; }
    .mobile-brand { display: flex; min-width: 0; align-items: center; gap: .45rem; }
    .mobile-brand img { width: 30px; height: 30px; object-fit: contain; }
    .mobile-brand strong { font-size: .95rem; }
    .user-summary { margin-left: auto; }
    .user-avatar { display: none; }
    .user-summary b { max-width: 155px; font-size: .82rem; text-align: right; }
    .user-summary small { text-align: right; }
    .content { padding: 1.25rem 1rem; }
    .page-head { align-items: flex-start; flex-wrap: wrap; margin-bottom: 1.3rem; }
    .stats, .grid-2 { grid-template-columns: 1fr; }
    .club-strip, .membership-grid, .member-columns, .admin-split, .inventory-forms, .top-up-grid, .top-up-setting-card, .member-edit-card { grid-template-columns: 1fr; }
    .setting-form { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
    .member-edit-card .setting-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .package-form-card { position: static; }
    .quota-hero { grid-template-columns: 1fr; }
    .quota-meta { border-top: 1px solid rgb(255 255 255 / 18%); border-left: 0; padding-top: 1.25rem; padding-left: 0; }
    .attendance-card form { grid-template-columns: 1fr; }
    .detail-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .detail-row label:nth-child(3) { grid-column: 1 / -1; }
    .table-card { padding: .5rem; }
    .public-registration-grid { grid-template-columns: 1fr; }
    .registration-form-card { position: static; }
    .registration-create-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .registration-create-form .btn { width: 100%; }
}

@media (max-width: 640px) {
    .content { padding-inline: .85rem; }
    .card, .balance-card { border-radius: 14px; padding: 1rem; }
    .page-head, .page-head .actions, .page-head > .btn { width: 100%; }
    .page-head .actions .btn, .page-head > .btn { flex: 1; }
    .report-download, .report-download .btn { width: 100%; }
    .stats, .stats.four { grid-template-columns: 1fr; }
    .stats article { padding: 1rem; }
    .balance-card::after { right: .75rem; font-size: 5rem; }
    .balance-card p { max-width: 80%; }
    .filters form { display: grid; grid-template-columns: 1fr; }
    .filters label, .filters .btn { width: 100%; }
    .form-grid { grid-template-columns: 1fr; }
    .wide { grid-column: auto; }
    .category-row { align-items: stretch; flex-direction: column; }
    .card-head { align-items: stretch; flex-direction: column; }
    .category-row form:first-child { grid-template-columns: 1fr; }
    .category-row form:first-child .link, .category-row form:last-child .link { width: 100%; min-height: 40px; border-radius: 9px; background: #eef2ff; }
    .category-row form:last-child .link { background: #fee2e2; }
    .transaction-row { align-items: flex-start; flex-wrap: wrap; }
    .transaction-row > strong { width: calc(100% - 46px); margin-left: 46px; text-align: left; }
    .detail-head { align-items: stretch; flex-direction: column; }
    .detail-row { grid-template-columns: 1fr; }
    .detail-row label:nth-child(3) { grid-column: auto; }
    .remove { width: 100%; }
    .transaction-form > .actions { display: grid; grid-template-columns: 1fr; }
    .detail-line { align-items: flex-start; flex-direction: column; }
    .detail-line strong { width: 100%; }
    .grand-total { align-items: flex-start; flex-direction: column; }
    .login-page { align-items: center; padding: 1rem; }
    .login-card { border-radius: 21px; padding: 1.35rem; }
    .login-logo { width: min(230px, 75%); height: 105px; margin-top: -.4rem; }
    .auth-shuttle { top: .85rem; right: .85rem; width: 36px; height: 36px; font-size: 1rem; }
    .member-welcome { align-items: flex-start; flex-direction: column; }
    .quota-hero { border-radius: 16px; padding: 1.25rem; }
    .membership-ticket { grid-template-columns: minmax(0, 1fr) 68px; }
    .membership-ticket::before, .membership-ticket::after { right: 67px; }
    .top-up-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attendance-actions { display: grid; grid-template-columns: 1fr; }
    .inventory-summary { grid-template-columns: 1fr; }
    .session-head { align-items: flex-start; }
    .session-price { text-align: left; }
    .session-head-actions { width: 100%; justify-items: stretch; }
    .session-head-actions .actions { display: grid; grid-template-columns: 1fr 1fr; }
    .session-head-actions .actions .btn { width: 100%; }
    .row-actions { width: 100%; justify-content: flex-end; }
    .setting-form { grid-template-columns: 1fr; }
    .member-edit-card .setting-form { grid-template-columns: 1fr; }
    .public-nav { height: 68px; }
    .public-brand img { width: 145px; height: 54px; }
    .public-actions > span { display: none; }
    .public-actions .btn { min-height: 40px; padding: .6rem .75rem; font-size: .7rem; }
    .public-content { padding-top: 1.25rem; }
    .public-session-grid { grid-template-columns: 1fr; }
    .public-session-detail { align-items: flex-start; flex-direction: column; }
    .public-session-capacity { justify-items: start; }
    .payment-options, .compact-bank-info { grid-template-columns: 1fr; }
    .compact-bank-info small { grid-column: auto; }
    .registration-create-form { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
    .mobile-brand strong { display: none; }
    .user-summary b { max-width: 125px; }
    .page-head .actions { display: grid; grid-template-columns: 1fr; }
    .balance-card p { max-width: 100%; padding-right: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}