:root{--surface: #f8f9ff;--surface-container-lowest: #ffffff;--surface-container-low: #eff4ff;--surface-container: #e6eeff;--surface-container-highest: #d9e3f6;--surface-bright: #f8f9ff;--on-surface: #121c2a;--on-surface-variant: #3c4a42;--outline: #6c7a71;--outline-variant: #bbcabf;--primary: #006c49;--primary-container: #10b981;--on-primary-container: #00422b;--secondary: #006b5f;--secondary-container: #6df5e1;--tertiary: #a43a3a;--tertiary-container: #fc7c78;--error: #ba1a1a;--error-container: #ffdad6;--inverse-surface: #27313f;--inverse-on-surface: #eaf1ff;--primary-fixed: #4edea3;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--on-surface);background:var(--surface)}*{box-sizing:border-box}body{min-width:320px;min-height:100dvh;margin:0;background:var(--surface);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{border:0;cursor:pointer}button:disabled{cursor:wait;opacity:.62}input{min-width:0;color:var(--on-surface)}input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #10b98133;outline:none}.material-symbols-outlined{display:inline-block;font-family:Material Symbols Outlined;font-size:24px;font-style:normal;font-weight:400;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:"liga";font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;-webkit-user-select:none;user-select:none}.top-bar{position:fixed;inset:0 0 auto;z-index:40;height:64px;border-bottom:1px solid var(--outline-variant);background:var(--surface)}.top-inner{display:flex;width:min(100%,1000px);height:100%;align-items:center;justify-content:space-between;gap:16px;margin:0 auto;padding:0 16px}.top-left,.top-actions,.title-stack,.toolbar-button,.primary-button,.secondary-button,.add-button,.utility-hint,.bottom-nav button,.save-button,.delete-button{display:flex;align-items:center}.top-left,.top-actions,.title-stack{gap:8px;min-width:0}.brand-title,.room-crumb{font-size:20px;font-weight:700;line-height:28px}.brand-title{color:var(--primary)}.room-crumb{overflow:hidden;color:var(--on-surface);text-overflow:ellipsis;white-space:nowrap}.crumb{color:var(--on-surface-variant);font-size:12px;font-weight:600}.icon-button{display:grid;width:40px;height:40px;place-items:center;border-radius:8px;background:transparent;transition:background .16s ease,opacity .16s ease}.icon-button:hover,.toolbar-button:hover{background:var(--surface-container)}.primary-icon{color:var(--primary)}.muted-icon{color:var(--on-surface-variant)}.toolbar-button{height:40px;gap:4px;border-radius:12px;padding:0 16px;background:var(--surface-container);color:var(--primary);font-size:12px;font-weight:600}.danger-toolbar{border:1px solid rgb(186 26 26 / 28%);background:transparent;color:var(--error)}.danger-toolbar:hover{background:#ffdad659}.home-canvas{display:flex;min-height:100dvh;align-items:center;justify-content:center;flex-direction:column;padding:96px 16px}.identity{width:min(100%,800px);margin-bottom:48px;text-align:center}.app-mark{display:inline-flex;width:64px;height:64px;align-items:center;justify-content:center;border-radius:16px;margin-bottom:24px;background:var(--primary-container);color:var(--on-primary-container)}.app-mark .material-symbols-outlined{font-size:32px}.identity h1{margin:0 0 8px;font-size:32px;font-weight:700;line-height:40px}.identity p,.utility-hint,.friend-link{margin:0;color:var(--on-surface-variant);font-size:16px;line-height:24px}.action-card{width:min(100%,448px);border:1px solid var(--outline-variant);border-radius:12px;padding:24px;background:var(--surface-container-lowest)}.room-form{display:grid;gap:24px}.room-form label,.field label,.add-panel h2,.list-meta h2,.table-head span{color:var(--on-surface-variant);font-size:12px;font-weight:600;line-height:16px;letter-spacing:.05em;text-transform:uppercase}.input-wrap{position:relative}.input-wrap input,.field input,.row-field input{width:100%;border:1px solid var(--outline);border-radius:8px;background:#fff;font-size:16px;line-height:24px;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.input-wrap input{height:56px;padding:0 48px 0 16px}.input-wrap .material-symbols-outlined{position:absolute;top:50%;right:16px;color:var(--primary);opacity:0;transform:translateY(-50%);transition:opacity .16s ease}.input-wrap:focus-within .material-symbols-outlined{opacity:1}.home-actions{display:grid;gap:16px;padding-top:4px}.primary-button,.secondary-button{width:100%;height:56px;justify-content:center;gap:8px;border-radius:12px;font-size:20px;font-weight:600;line-height:28px;transition:transform .12s ease,opacity .12s ease,background .12s ease}.primary-button{background:var(--primary-container);color:var(--on-primary-container)}.secondary-button{border:1px solid var(--primary);background:transparent;color:var(--primary)}.primary-button:active,.secondary-button:active,.add-button:active{transform:scale(.98)}.secondary-button:hover{background:var(--surface-container-low)}.divider{display:none;align-items:center;gap:16px;padding:8px 0}.divider span{height:1px;flex:1;background:var(--outline-variant)}.divider b{color:var(--outline);font-size:12px;font-weight:600;line-height:16px}.utility-hints{display:grid;gap:10px;margin-top:32px;justify-items:center}.utility-hint,.friend-link{display:flex;align-items:center;gap:8px;opacity:.7}.friend-link{border:1px solid var(--outline-variant);border-radius:8px;padding:8px 12px;background:var(--surface-container-lowest);color:var(--primary);text-decoration:none;opacity:1;transition:background .16s ease,border-color .16s ease}.friend-link:hover{border-color:var(--primary);background:var(--surface-container-low)}.utility-hint .material-symbols-outlined,.friend-link .material-symbols-outlined{font-size:18px}.room-canvas{width:min(100%,1000px);margin:0 auto;padding:96px 16px}.add-panel{margin-bottom:24px;border:1px solid var(--outline-variant);border-radius:12px;padding:16px;background:var(--surface-container-lowest)}.add-panel h2{display:none;margin:0 0 16px}.add-form{display:grid;grid-template-columns:1fr 1.5fr auto;align-items:end;gap:16px}.field{display:grid;gap:4px}.field input{height:44px;border-color:var(--outline-variant);padding:0 16px;background:var(--surface-bright)}.mono-input,.key-field input{color:var(--primary);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-weight:600}.add-button{height:44px;justify-content:center;gap:4px;border-radius:8px;padding:0 24px;background:var(--primary-container);color:var(--on-primary-container);font-size:12px;font-weight:600}.list-section{display:grid;gap:8px}.list-meta{display:none;align-items:center;justify-content:space-between;padding:0 4px}.list-meta h2{margin:0}.list-meta span{color:var(--outline);font-size:12px;line-height:16px}.kv-list{--kv-grid-template: minmax(180px, 1fr) minmax(260px, 1.5fr) 210px;overflow:hidden;border:1px solid var(--outline-variant);border-radius:12px;background:var(--surface-container-lowest)}.table-head{display:grid;grid-template-columns:var(--kv-grid-template);gap:16px;border-bottom:1px solid var(--outline-variant);padding:16px 24px;background:var(--surface-container-low)}.table-head span:first-child,.table-head span:nth-child(2){padding-left:12px}.table-head span:last-child{text-align:right}.rows{max-height:calc(100dvh - 400px);overflow-y:auto}.kv-row{display:grid;grid-template-columns:var(--kv-grid-template);align-items:center;gap:16px;border-bottom:1px solid var(--outline-variant);padding:16px 24px;transition:background .16s ease}.kv-row:last-child{border-bottom:0}.kv-row:hover,.kv-row:focus-within{background:#eff4ff8c}.row-field input{height:42px;border:1px solid var(--outline-variant);border-radius:8px;padding:0 12px;background:var(--surface-bright)}.row-field label{display:none}.copy-button,.save-button,.delete-button{color:var(--outline);background:transparent;transition:color .16s ease,background .16s ease}.copy-button{display:grid;width:36px;height:36px;place-items:center;border-radius:8px}.copy-button:hover{color:var(--primary)}.row-actions{display:flex;width:100%;align-items:center;justify-content:flex-end;gap:6px;opacity:1;white-space:nowrap}.save-button,.delete-button{height:40px;gap:4px;border-radius:8px;padding:0 12px;font-size:12px;font-weight:600}.save-button{color:var(--secondary)}.save-button:hover{background:#6df5e133}.delete-button{color:var(--tertiary)}.delete-button:hover{background:#fc7c7833}.empty-state{display:flex;min-height:260px;flex-direction:column;align-items:center;justify-content:center;border:1px dashed var(--outline-variant);border-radius:12px;background:var(--surface-container-low);padding:32px;text-align:center}.empty-state div{display:grid;width:64px;height:64px;place-items:center;border-radius:9999px;margin-bottom:16px;background:var(--surface-container)}.empty-state .material-symbols-outlined{color:var(--outline-variant);font-size:32px}.empty-state p{margin:0;color:var(--on-surface-variant);font-weight:600}.empty-state span{margin-top:4px;color:var(--outline);font-size:14px;line-height:20px}.bottom-nav{position:fixed;right:0;bottom:0;left:0;z-index:40;display:none;height:64px;align-items:center;justify-content:space-around;border-top:1px solid var(--outline-variant);background:var(--surface);padding:0 16px}.bottom-nav button{min-width:72px;flex-direction:column;justify-content:center;border-radius:12px;padding:4px 16px;background:transparent;color:var(--on-surface-variant);font-size:12px;font-weight:600;line-height:16px}.bottom-nav .nav-active{background:var(--primary-container);color:var(--on-primary-container);transform:scale(.95)}.status{position:fixed;left:50%;bottom:80px;z-index:45;min-height:20px;margin:0;color:var(--on-surface-variant);font-size:14px;line-height:20px;transform:translate(-50%)}.status.error{color:var(--error)}.status.success{color:var(--primary)}.toast{position:fixed;left:50%;bottom:32px;z-index:50;display:flex;align-items:center;gap:8px;border-radius:9999px;padding:8px 24px;background:var(--inverse-surface);color:var(--inverse-on-surface);font-size:12px;font-weight:600;opacity:0;pointer-events:none;transform:translate(-50%,20px);transition:opacity .18s ease,transform .18s ease}.toast .material-symbols-outlined{color:var(--primary-fixed);font-size:20px}.toast-visible{opacity:1;transform:translate(-50%)}.dialog-backdrop{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:#121c2a52;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.confirm-dialog{display:grid;width:min(100%,420px);gap:18px;border:1px solid var(--outline-variant);border-radius:12px;padding:24px;background:var(--surface-container-lowest);box-shadow:0 24px 80px #121c2a2e}.dialog-mark{display:grid;width:48px;height:48px;place-items:center;border-radius:12px;background:var(--error-container);color:var(--error)}.dialog-copy h2,.dialog-copy p{margin:0}.dialog-copy h2{color:var(--on-surface);font-size:20px;font-weight:700;line-height:28px}.dialog-copy p{margin-top:8px;color:var(--on-surface-variant);font-size:14px;line-height:20px}.dialog-actions{display:flex;justify-content:flex-end;gap:12px}.dialog-cancel,.dialog-confirm{display:flex;height:44px;align-items:center;justify-content:center;gap:6px;border-radius:8px;padding:0 16px;font-size:14px;font-weight:700}.dialog-cancel{border:1px solid var(--outline-variant);background:var(--surface-container-lowest);color:var(--on-surface-variant)}.dialog-confirm{border:1px solid rgb(186 26 26 / 28%);background:var(--error-container);color:var(--error)}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.spin{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:767px){.top-inner{max-width:800px}.toolbar-button{width:40px;padding:0;border-radius:9999px;background:transparent;color:var(--on-surface-variant)}.danger-toolbar{border:0;color:var(--error)}.toolbar-button span:last-child{display:none}.title-stack{gap:0}.brand-title,.crumb{display:none}.room-crumb,.brand-title:first-child{display:block;font-size:20px}.room-crumb{margin-left:8px}.top-bar:not(:has(.room-crumb)) .brand-title{display:block}.home-canvas{justify-content:center;padding:96px 16px 112px}.identity{margin-bottom:48px}.identity h1{font-size:24px;line-height:32px}.action-card{padding:24px}.divider{display:flex}.room-canvas{padding:80px 16px 88px}.add-panel h2,.list-meta{display:flex}.add-form{grid-template-columns:1fr;gap:8px}.add-button{width:100%;height:48px;margin-top:8px;font-size:16px}.table-head{display:none}.rows{max-height:none}.kv-row{grid-template-columns:1fr;gap:8px;padding:16px}.row-field{display:block}.row-field input{height:42px;padding:0 16px}.row-actions{justify-content:flex-end;gap:8px;border-top:0;padding-top:0}.save-button,.delete-button{flex:0 0 auto}.bottom-nav{display:flex}.status{right:16px;bottom:72px;left:16px;text-align:center;transform:none}.toast{bottom:80px}.dialog-actions{flex-direction:column-reverse}.dialog-cancel,.dialog-confirm{width:100%}}