:root{--color-white: rgba(255, 255, 255, 1);--color-black: rgba(0, 0, 0, 1);--color-cream-50: rgba(252, 252, 249, 1);--color-cream-100: rgba(255, 255, 253, 1);--color-gray-200: rgba(245, 245, 245, 1);--color-gray-300: rgba(167, 169, 169, 1);--color-gray-400: rgba(119, 124, 124, 1);--color-slate-500: rgba(98, 108, 113, 1);--color-brown-600: rgba(94, 82, 64, 1);--color-charcoal-700: rgba(31, 33, 33, 1);--color-charcoal-800: rgba(38, 40, 40, 1);--color-slate-900: rgba(19, 52, 59, 1);--color-teal-300: rgba(50, 184, 198, 1);--color-teal-400: rgba(45, 166, 178, 1);--color-teal-500: rgba(33, 128, 141, 1);--color-teal-600: rgba(29, 116, 128, 1);--color-teal-700: rgba(26, 104, 115, 1);--color-teal-800: rgba(41, 150, 161, 1);--color-red-400: rgba(255, 84, 89, 1);--color-red-500: rgba(192, 21, 47, 1);--color-orange-400: rgba(230, 129, 97, 1);--color-orange-500: rgba(168, 75, 47, 1);--color-brown-600-rgb: 94, 82, 64;--color-teal-500-rgb: 33, 128, 141;--color-slate-900-rgb: 19, 52, 59;--color-slate-500-rgb: 98, 108, 113;--color-red-500-rgb: 192, 21, 47;--color-red-400-rgb: 255, 84, 89;--color-orange-500-rgb: 168, 75, 47;--color-orange-400-rgb: 230, 129, 97;--color-bg-1: rgba(59, 130, 246, .08);--color-bg-2: rgba(245, 158, 11, .08);--color-bg-3: rgba(34, 197, 94, .08);--color-bg-4: rgba(239, 68, 68, .08);--color-bg-5: rgba(147, 51, 234, .08);--color-bg-6: rgba(249, 115, 22, .08);--color-bg-7: rgba(236, 72, 153, .08);--color-bg-8: rgba(6, 182, 212, .08);--color-background: var(--color-cream-50);--color-surface: var(--color-cream-100);--color-text: var(--color-slate-900);--color-text-secondary: var(--color-slate-500);--color-primary: var(--color-teal-500);--color-primary-hover: var(--color-teal-600);--color-primary-active: var(--color-teal-700);--color-secondary: rgba(var(--color-brown-600-rgb), .12);--color-secondary-hover: rgba(var(--color-brown-600-rgb), .2);--color-secondary-active: rgba(var(--color-brown-600-rgb), .25);--color-border: rgba(var(--color-brown-600-rgb), .2);--color-btn-primary-text: var(--color-cream-50);--color-card-border: rgba(var(--color-brown-600-rgb), .12);--color-card-border-inner: rgba(var(--color-brown-600-rgb), .12);--color-error: var(--color-red-500);--color-success: var(--color-teal-500);--color-warning: var(--color-orange-500);--color-info: var(--color-slate-500);--color-focus-ring: rgba(var(--color-teal-500-rgb), .4);--color-select-caret: rgba(var(--color-slate-900-rgb), .8);--font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-size-xs: 11px;--font-size-sm: 12px;--font-size-base: 14px;--font-size-md: 14px;--font-size-lg: 16px;--font-size-xl: 18px;--font-size-2xl: 20px;--font-size-3xl: 24px;--font-size-4xl: 30px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 550;--font-weight-bold: 600;--line-height-tight: 1.2;--line-height-normal: 1.5;--space-4: 4px;--space-6: 6px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--radius-sm: 6px;--radius-base: 8px;--radius-md: 10px;--radius-lg: 12px;--radius-full: 9999px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .02);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .04), 0 2px 4px -1px rgba(0, 0, 0, .02);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .04), 0 4px 6px -2px rgba(0, 0, 0, .02);--duration-fast: .15s;--duration-normal: .25s;--ease-standard: cubic-bezier(.16, 1, .3, 1);--color-available: #e8f4f8;--color-claimed-paid: #d1f4dd;--color-claimed-unpaid: #fff4e6;--color-paid-badge: #34a853;--color-unpaid-badge: #ea4335}@media (prefers-color-scheme: dark){:root{--color-gray-400-rgb: 119, 124, 124;--color-teal-300-rgb: 50, 184, 198;--color-gray-300-rgb: 167, 169, 169;--color-gray-200-rgb: 245, 245, 245;--color-bg-1: rgba(29, 78, 216, .15);--color-bg-2: rgba(180, 83, 9, .15);--color-bg-3: rgba(21, 128, 61, .15);--color-bg-4: rgba(185, 28, 28, .15);--color-bg-5: rgba(107, 33, 168, .15);--color-bg-6: rgba(194, 65, 12, .15);--color-bg-7: rgba(190, 24, 93, .15);--color-bg-8: rgba(8, 145, 178, .15);--color-background: var(--color-charcoal-700);--color-surface: var(--color-charcoal-800);--color-text: var(--color-gray-200);--color-text-secondary: rgba(var(--color-gray-300-rgb), .7);--color-primary: var(--color-teal-300);--color-primary-hover: var(--color-teal-400);--color-primary-active: var(--color-teal-800);--color-secondary: rgba(var(--color-gray-400-rgb), .15);--color-secondary-hover: rgba(var(--color-gray-400-rgb), .25);--color-secondary-active: rgba(var(--color-gray-400-rgb), .3);--color-border: rgba(var(--color-gray-400-rgb), .3);--color-error: var(--color-red-400);--color-success: var(--color-teal-300);--color-warning: var(--color-orange-400);--color-info: var(--color-gray-300);--color-focus-ring: rgba(var(--color-teal-300-rgb), .4);--color-btn-primary-text: var(--color-slate-900);--color-card-border: rgba(var(--color-gray-400-rgb), .2);--color-card-border-inner: rgba(var(--color-gray-400-rgb), .15);--color-select-caret: rgba(var(--color-gray-200-rgb), .8);--color-available: rgba(var(--color-teal-500-rgb), .1);--color-claimed-paid: rgba(var(--color-teal-300-rgb), .2);--color-claimed-unpaid: rgba(var(--color-orange-400-rgb), .2);--color-paid-badge: var(--color-teal-300);--color-unpaid-badge: var(--color-red-400)}}@font-face{font-family:FKGroteskNeue;src:url(https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2) format("woff2")}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family-base);background-color:var(--color-background);color:var(--color-text);line-height:var(--line-height-normal);font-size:var(--font-size-base);-webkit-font-smoothing:antialiased}#app{min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:var(--space-24)}.header{text-align:center;margin-bottom:var(--space-32)}.header h1{font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);color:var(--color-text);margin-bottom:var(--space-8)}.header p{color:var(--color-text-secondary);font-size:var(--font-size-lg)}.view{display:none}.view.active{display:block}.login-container{max-width:400px;margin:100px auto;background:var(--color-surface);padding:var(--space-32);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--color-card-border)}.login-container h2{text-align:center;margin-bottom:var(--space-24);color:var(--color-text)}.form-group{margin-bottom:var(--space-16)}.form-group label{display:block;margin-bottom:var(--space-8);font-weight:var(--font-weight-medium);color:var(--color-text)}.form-control{width:100%;padding:var(--space-12);border:1px solid var(--color-border);border-radius:var(--radius-base);font-size:var(--font-size-base);background:var(--color-surface);color:var(--color-text);transition:border-color var(--duration-fast) var(--ease-standard)}.form-control:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-focus-ring)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-12) var(--space-24);border:none;border-radius:var(--radius-base);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--duration-normal) var(--ease-standard);text-decoration:none}.btn-primary{background:var(--color-primary);color:var(--color-btn-primary-text);width:100%}.btn-primary:hover{background:var(--color-primary-hover)}.btn-secondary{background:var(--color-secondary);color:var(--color-text)}.btn-secondary:hover{background:var(--color-secondary-hover)}.google-btn{width:100%;background:#fff;color:#3c4043;border:1px solid #dadce0;box-shadow:0 1px 3px #3c40434d;font-weight:var(--font-weight-medium);gap:var(--space-8)}.google-btn:hover{background:#f8f9fa}.google-icon{display:inline-flex;align-items:center;justify-content:center}.google-icon svg{width:18px;height:18px}.btn-sm{padding:var(--space-6) var(--space-12);font-size:var(--font-size-sm)}.error-message{color:var(--color-error);font-size:var(--font-size-sm);margin-top:var(--space-8);text-align:center}.success-message{color:var(--color-success);font-size:var(--font-size-sm);margin-top:var(--space-8);text-align:center}.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-24);gap:var(--space-16)}.admin-controls{display:flex;gap:var(--space-12);flex-wrap:wrap;justify-content:flex-end}.stats-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-16);margin-bottom:var(--space-32)}.stat-card{background:var(--color-surface);padding:var(--space-20);border-radius:var(--radius-lg);border:1px solid var(--color-card-border);box-shadow:var(--shadow-sm)}.stat-card h3{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-8);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.5px}.stat-card p{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:var(--color-text)}.grid-wrapper{background:var(--color-surface);padding:var(--space-24);border-radius:var(--radius-lg);border:1px solid var(--color-card-border);box-shadow:var(--shadow-md);overflow-x:auto}.grid-container{display:inline-grid;grid-template-columns:50px repeat(10,minmax(80px,1fr));grid-template-rows:50px repeat(10,minmax(80px,1fr));gap:2px;min-width:900px}.grid-label{display:flex;align-items:center;justify-content:center;font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);color:var(--color-text);background:var(--color-bg-1);border-radius:var(--radius-sm)}.grid-number{display:flex;align-items:center;justify-content:center;font-weight:var(--font-weight-bold);font-size:var(--font-size-lg);color:var(--color-primary);background:var(--color-bg-2);border-radius:var(--radius-sm)}.grid-box{background:var(--color-available);border:2px solid var(--color-border);border-radius:var(--radius-base);padding:var(--space-8);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all var(--duration-normal) var(--ease-standard);position:relative;min-height:80px;text-align:center}.grid-box:hover:not(.claimed){transform:scale(1.05);box-shadow:var(--shadow-lg);border-color:var(--color-primary)}.grid-box.claimed{cursor:default}.grid-box.claimed.paid{background:var(--color-claimed-paid);border-color:var(--color-success)}.grid-box.claimed.unpaid{background:var(--color-claimed-unpaid);border-color:var(--color-warning)}.box-number{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-bottom:var(--space-4)}.box-participant{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text);text-align:center;margin-bottom:var(--space-4)}.box-email{font-size:var(--font-size-xs);color:var(--color-text-secondary);text-align:center;margin-bottom:var(--space-4);word-break:break-all}.badge{display:inline-block;padding:2px 8px;border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);margin-top:var(--space-4)}.badge-paid{background:var(--color-paid-badge);color:#fff}.badge-unpaid{background:var(--color-unpaid-badge);color:#fff}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;z-index:1000;align-items:center;justify-content:center;padding:var(--space-16)}.modal.active{display:flex}.modal-content{background:var(--color-surface);padding:var(--space-32);border-radius:var(--radius-lg);max-width:500px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);border:1px solid var(--color-card-border)}.modal-header{margin-bottom:var(--space-24)}.modal-header h2{font-size:var(--font-size-2xl);color:var(--color-text)}.modal-footer{display:flex;gap:var(--space-12);margin-top:var(--space-24)}.demo-notice{background:rgba(var(--color-slate-500-rgb),.1);padding:var(--space-16);border-radius:var(--radius-base);border:1px solid rgba(var(--color-slate-500-rgb),.2);margin-bottom:var(--space-20);color:var(--color-text)}.price-display{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);text-align:center;margin-bottom:var(--space-24);color:var(--color-primary)}.instructions{background:var(--color-surface);padding:var(--space-24);border-radius:var(--radius-lg);border:1px solid var(--color-card-border);box-shadow:var(--shadow-sm);margin-bottom:var(--space-24)}.instructions h3{margin-bottom:var(--space-12)}.instructions ul{margin-left:var(--space-20);color:var(--color-text-secondary)}.instructions li{margin-bottom:var(--space-8)}.card-row{display:flex;gap:var(--space-12)}.card-row>div{flex:1}.stripe-element{border:1px solid var(--color-border);border-radius:var(--radius-base);padding:var(--space-12);background:var(--color-surface);transition:border-color var(--duration-fast) var(--ease-standard)}.stripe-element:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-focus-ring)}.stripe-element input{border:none;width:100%;background:transparent;color:var(--color-text);font-size:var(--font-size-base)}.stripe-element input:focus{outline:none}.stripe-element input::placeholder{color:var(--color-text-secondary)}.select-control{width:100%;padding:var(--space-12);border:1px solid var(--color-border);border-radius:var(--radius-base);font-size:var(--font-size-base);background:var(--color-surface);color:var(--color-text);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--color-select-caret) 50%),linear-gradient(135deg,var(--color-select-caret) 50%,transparent 50%);background-position:calc(100% - 20px) calc(1em + 2px),calc(100% - 15px) calc(1em + 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}.select-control:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-focus-ring)}.checkbox-group{display:flex;align-items:center;gap:var(--space-8)}.checkbox-group input[type=checkbox]{width:18px;height:18px;cursor:pointer}.box-actions{display:flex;gap:var(--space-8);margin-top:var(--space-8);flex-wrap:wrap;justify-content:center}.auth-banner{background:var(--color-surface);border:1px solid var(--color-card-border);border-radius:var(--radius-lg);padding:var(--space-16) var(--space-24);box-shadow:var(--shadow-sm);margin:var(--space-24) auto;max-width:1100px;display:flex;justify-content:space-between;align-items:center;gap:var(--space-16)}.auth-actions{display:flex;gap:var(--space-8);flex-wrap:wrap;justify-content:flex-end}.role-pill{display:inline-block;margin-left:var(--space-8);padding:2px 10px;border-radius:var(--radius-full);background:var(--color-secondary);font-size:var(--font-size-sm);color:var(--color-text)}@media (max-width: 768px){.container{padding:var(--space-16)}.grid-container{min-width:auto}.admin-header{flex-direction:column;align-items:flex-start}.card-row{flex-direction:column}.auth-banner{flex-direction:column;align-items:flex-start}.auth-actions{width:100%;justify-content:flex-start}}
