:root{--color-primary: #2563eb;--color-primary-soft: #1d4ed8;--color-primary-soft-bg: rgba(37, 99, 235, .08);--color-accent: #22c55e;--color-accent-soft-bg: rgba(34, 197, 94, .12);--color-bg: #020617;--color-bg-soft: #020617;--color-surface: #020617;--color-surface-elevated: #020617;--color-border-subtle: rgba(148, 163, 184, .35);--color-border-strong: rgba(148, 163, 184, .6);--color-text-main: #f9fafb;--color-text-muted: #9ca3af;--color-text-soft: #bcbcbc;--color-text-inverse: #020617;--color-success: #22c55e;--color-danger: #ef4444;--color-warning: #f59e0b;--color-info: #38bdf8;--shadow-soft: 0 10px 30px rgba(15, 23, 42, .65);--shadow-elevated: 0 18px 45px rgba(15, 23, 42, .85);--radius-sm: 999px;--radius-md: 16px;--radius-lg: 22px;--radius-xl: 32px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 28px;--space-8: 32px;--font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;--font-size-xs: 11px;--font-size-sm: 13px;--font-size-md: 15px;--font-size-lg: 17px;--font-size-xl: 21px;--font-size-2xl: clamp(24px, 5vw, 28px);--line-height-tight: 1.2;--line-height-normal: 1.5;--app-max-width: 480px;--safe-area-top: env(safe-area-inset-top, 12px);--safe-area-bottom: env(safe-area-inset-bottom, 12px);--transition-fast: .15s ease-out;--transition-med: .22s ease-out}@media(prefers-color-scheme:light){:root{--color-bg: #f3f4f6;--color-bg-soft: #e5e7eb;--color-surface: #ffffff;--color-surface-elevated: #ffffff;--color-text-main: #0f172a;--color-text-muted: #6b7280;--color-text-soft: #dadada;--color-border-subtle: rgba(148, 163, 184, .45);--color-border-strong: rgba(15, 23, 42, .15);--shadow-soft: 0 8px 22px rgba(15, 23, 42, .12);--shadow-elevated: 0 18px 45px rgba(15, 23, 42, .2)}}*,*:before,*:after{box-sizing:border-box}html,body{padding:0;margin:0;width:100%;min-height:100%}body{font-family:var(--font-family-base);font-size:var(--font-size-md);line-height:var(--line-height-normal);background-color:var(--color-bg);color:var(--color-text-main);-webkit-font-smoothing:antialiased}#root{min-height:100vh;display:flex;justify-content:center;background:radial-gradient(circle at top,#0f172a 0,#020617 45%,#000)}.app-shell{width:100%;max-width:var(--app-max-width);min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(145deg,#020617 0% 60%,#020617);box-shadow:var(--shadow-soft);border-radius:0}a{color:var(--color-primary);text-decoration:none;font-weight:500}a:hover{color:var(--color-primary-soft)}h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:.01em;color:var(--color-text-main)}h1{font-size:var(--font-size-2xl);line-height:var(--line-height-tight)}h2{font-size:var(--font-size-xl)}.button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:var(--radius-sm);border:1px solid transparent;font-size:var(--font-size-md);font-weight:600;font-family:inherit;cursor:pointer;transition:background-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast),opacity var(--transition-fast);text-align:center;text-decoration:none}.button--full{width:100%}.button--primary{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-soft));color:#fff;box-shadow:var(--shadow-soft)}.button--primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-elevated)}.button--primary:active{transform:translateY(1px);box-shadow:none}.button--secondary{background:#0f172ab3;color:var(--color-text-main);border-color:var(--color-border-subtle)}.button--secondary:hover{border-color:var(--color-primary)}.button--ghost{background:transparent;color:var(--color-text-muted)}.button--pill{border-radius:999px}.button[disabled]{opacity:.6;cursor:default;box-shadow:none}.input,.textarea{width:80%;padding:10px 14px;border-radius:999px;border:1px solid var(--color-border-subtle);background:#0f172ae6;color:var(--color-text-main);font-size:var(--font-size-md);outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background-color var(--transition-fast)}.textarea{border-radius:var(--radius-md);min-height:90px;resize:vertical}.input::placeholder,.textarea::placeholder{color:var(--color-text-soft)}.input:focus,.textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 1px #2563eb66;background:#0f172af2}.form-helper{font-size:var(--font-size-xs);color:var(--color-text-soft)}.form-section{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}.card{background:linear-gradient(145deg,#0f172af2,#0f172ae6);border-radius:var(--radius-md);border:1px solid rgba(148,163,184,.25);box-shadow:var(--shadow-soft);padding:var(--space-4)}.card--tappable{cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast),background-color var(--transition-fast)}.card--tappable:hover{transform:translateY(-1px);box-shadow:var(--shadow-elevated);border-color:#60a5fabf}.card__header{display:flex;align-items:left;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-2)}.card__title{font-size:var(--font-size-md);font-weight:600}.card__subtitle{font-size:var(--font-size-sm);color:var(--color-text-soft);text-align:left}.class-binder_cat-title{align-content:flex-start;align-items:flex-end;text-align:left}.class-card__category{display:inline-flex;align-items:left;gap:4px;padding:3px 10px;border-radius:999px;background:#0f172ae6;border:1px solid rgba(148,163,184,.55);font-size:var(--font-size-xs);color:var(--color-text-muted)}.class-card__status{font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase}.class-card__status--active{color:var(--color-success)}.class-card__status--inactive{color:var(--color-text-soft)}.page{display:flex;flex-direction:column;flex:1;padding:10px}.page-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}.page-content{flex:1;overflow-y:auto;padding-bottom:var(--space-4)}.page-footer{border-top:1px solid rgba(148,163,184,.25);padding-top:var(--space-2);margin-top:var(--space-2)}.splash{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:var(--space-3)}.splash__logo{width:120px;height:120px;border-radius:999px;background:radial-gradient(circle at 30% 20%,#60a5fa 0,#2563eb 35%,#0f172a);display:flex;align-items:center;justify-content:center;color:#f9fafb;font-size:32px;font-weight:700;box-shadow:var(--shadow-elevated);border:1px solid rgba(191,219,254,.2)}.splash__title{font-size:var(--font-size-2xl)}.splash__subtitle{font-size:var(--font-size-sm);color:var(--color-text-muted)}.role-grid{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-4)}.role-card{border-radius:var(--radius-lg);padding:var(--space-4);background:radial-gradient(circle at top left,rgba(56,189,248,.12),transparent 55%),radial-gradient(circle at bottom right,rgba(56,189,248,.09),transparent 55%),#0f172af2;border:1px solid rgba(148,163,184,.4);display:flex;flex-direction:column;gap:var(--space-2);cursor:pointer;transition:border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast),background-color var(--transition-fast)}.role-card:hover{transform:translateY(-2px);border-color:#38bdf8cc;box-shadow:var(--shadow-elevated)}.role-card__label{font-size:var(--font-size-lg);font-weight:600}.role-card__desc{font-size:var(--font-size-sm);color:var(--color-text-muted)}.chat-list{display:flex;flex-direction:column;gap:var(--space-2)}.chat-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-md);background:#0f172ae6;border:1px solid rgba(148,163,184,.35);cursor:pointer;transition:background-color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}.chat-item:hover{background:#0f172a;border-color:#60a5fabf;box-shadow:var(--shadow-soft);transform:translateY(-1px)}.chat-item__avatar{width:40px;height:40px;border-radius:999px;background:linear-gradient(135deg,#38bdf8,#6366f1);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);font-weight:600;color:#f9fafb}.chat-item__main{flex:1}.chat-item__name{font-size:var(--font-size-md);font-weight:500}.chat-item__last{font-size:var(--font-size-sm);color:var(--color-text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-thread{display:flex;flex-direction:column;gap:6px}.chat-row{display:flex;padding:0 10px}.chat-bubble{max-width:70%;padding:8px 12px;border-radius:18px;font-size:var(--font-size-sm);line-height:1.4}.chat-bubble--own{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-soft));color:#f9fafb;border-bottom-right-radius:4px}.chat-bubble--other{background:#0f172ae6;color:var(--color-text-main);border-bottom-left-radius:4px;border:1px solid rgba(148,163,184,.4)}.chat-input-bar{display:flex;gap:var(--space-2);align-items:center;padding-top:var(--space-2)}.bottom-nav{position:sticky;bottom:0;left:0;right:0;background:#0f172af5;border-top:1px solid rgba(148,163,184,.25);padding:var(--space-2) var(--space-1);display:flex;justify-content:space-around;gap:var(--space-2)}.bottom-nav__item{flex:1;text-align:center;font-size:var(--font-size-xs);color:var(--color-text-soft)}.bottom-nav__item--active{color:var(--color-primary)}.center-page{display:flex;position:relative;flex-direction:column;justify-content:center;align-items:center;flex:1;padding:var(--space-4);text-align:center}.avatar-menu{position:absolute;top:55px;right:12px;background:#0f172af2;border:1px solid rgba(148,163,184,.4);border-radius:var(--radius-md);box-shadow:var(--shadow-elevated);width:180px;padding:var(--space-2) 0;z-index:50;animation:fadeIn .12s ease-out}.avatar-menu__item{padding:10px 14px;font-size:var(--font-size-md);color:var(--color-text-main);cursor:pointer;transition:background-color .12s}.avatar-menu__item:hover{background:#ffffff14}@keyframes fadeIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.chat-row{display:flex;margin:6px 0}.chat-row--own{justify-content:flex-end}.chat-row--other{justify-content:flex-start}.chat-bubble{max-width:75%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.4}.chat-bubble--own{background:#4f46e5;color:#fff;border-bottom-right-radius:4px}.chat-bubble--other{background:#e5e5ea;color:#111;border-bottom-left-radius:4px}.width-80{width:80%}.item-align-center{align-items:center;justify-content:center;justify-items:center;margin:0 auto}.map-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.page-overlay{position:relative;z-index:2}.map-canvas{position:absolute;inset:0;width:100%;height:100%}.page.page-overlay{display:flex;flex-direction:column;height:100%;padding:20px}.avatar-button{width:40px;height:40px;border-radius:999px;background:linear-gradient(135deg,#38bff8e6,#818cf8e6);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:#f9fafb;cursor:pointer;-webkit-user-select:none;user-select:none}.fab-chat-button{position:fixed;right:16px;bottom:24px;width:64px;height:64px;border-radius:999px;border:none;background:linear-gradient(135deg,#38bdf8f2,#818cf8f2);color:#f9fafb;font-weight:600;font-size:14px;box-shadow:0 10px 25px #0f172a59;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20}.fab-chat-button:active{transform:translateY(1px) scale(.98)}.margin-top-20{margin-top:20px}.greeting{text-align:left;padding-left:10px}.greeting h1{color:#fff}.greeting p.form-helper{color:#1a1a1aa1;font-size:.9rem;padding:0 5px;background-color:#ffffff90}.color-text-black{color:#1a1a1aa1}.count-pill{min-width:42px;height:28px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;border:1px solid rgba(148,163,184,.45);background:#0f172abf;color:#fff}.sheet-backdrop{position:fixed;inset:0;background:#00000073;opacity:0;pointer-events:none;transition:opacity .18s ease-out;z-index:40}.sheet-backdrop--open{opacity:1;pointer-events:auto}.bottom-sheet{position:fixed;left:50%;transform:translate(-50%) translateY(110%);bottom:0;width:100%;max-width:var(--app-max-width);height:72vh;background:#0f172af5;border-top-left-radius:22px;border-top-right-radius:22px;border:1px solid rgba(148,163,184,.25);transition:transform .22s ease-out;z-index:50;display:flex;flex-direction:column;overflow:hidden}.bottom-sheet--open{transform:translate(-50%) translateY(0)}.bottom-sheet__handle{width:46px;height:5px;border-radius:999px;margin:10px auto 8px;background:#ffffff40}.bottom-sheet__header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(148,163,184,.18)}.sheet-close{border:none;background:#ffffff14;color:#fff;border-radius:12px;padding:8px 10px;cursor:pointer}.bottom-sheet__content{flex:1;overflow-y:auto;padding:14px}.page-overlay{position:absolute;inset:0;pointer-events:none}.overlay-panel{pointer-events:auto;position:absolute;top:12px;left:12px;right:12px;max-width:420px}.map-background{position:relative}.map-canvas{position:relative;z-index:1}.overlay-panel{z-index:2}.gm-style .gm-style-iw-ch{display:flex;align-items:center;padding:12px 16px}.gm-style .gm-style-iw-d{padding:0!important;overflow:hidden!important}.map-iw{cursor:pointer}.map-iw__title{font-weight:800;font-size:14px;color:#111}.map-iw__hint{font-size:12px;color:#666}