:root{--bg: #f6f7f8;--panel: #ffffff;--ink: #0f2530;--ink-2: #3b5360;--ink-3: #6b8391;--line: #e3e8ec;--line-2: #eef1f4;--accent: #0c8a8a;--accent-ink: #ffffff;--accent-soft: #e6f3f2;--warn: #c45a2a;--warn-soft: #fbe9dc;--danger: #b33a3a;--danger-soft: #f8e2e2;--ok: #2f7a4f;--ok-soft: #e3f1e9;--radius: 10px;--radius-sm: 6px;--shadow-sm: 0 1px 2px rgba(15,37,48,.04), 0 0 0 1px var(--line);--shadow-md: 0 4px 16px rgba(15,37,48,.08), 0 0 0 1px var(--line);--font-sans: "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, "Menlo", monospace}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font-sans);color:var(--ink);background:var(--bg);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;transition:opacity .2s}button:active{opacity:.7}input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}.app{min-height:100vh;display:flex;flex-direction:column}.topbar{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.topbar-inner{max-width:1400px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:16px;width:100%}.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em;text-decoration:none;color:inherit}.brand-mark{width:32px;height:32px;border-radius:8px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:16px;font-weight:800}.brand-name{font-size:16px}.brand-sub{color:var(--ink-3);font-size:12px;margin-left:4px}.top-tabs{display:flex;gap:2px;margin-left:8px}.top-tab{padding:8px 14px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink-2);display:flex;align-items:center;gap:6px;cursor:pointer}.top-tab.active{background:var(--accent-soft);color:var(--accent)}.top-tab .count{font-size:11px;background:var(--panel);padding:1px 7px;border-radius:10px;border:1px solid var(--line);font-variant-numeric:tabular-nums}.top-tab.active .count{background:#fff;border-color:transparent}.top-spacer{flex:1}.top-user{display:flex;align-items:center;gap:10px;padding:4px 8px 4px 4px;border-radius:999px;border:1px solid var(--line)}.top-user-avatar{width:28px;height:28px;border-radius:50%;background:#d7e0e4;color:var(--ink-2);display:grid;place-items:center;font-size:12px;font-weight:600}.top-user-name{font-size:13px;color:var(--ink-2)}.toolbar{max-width:1400px;margin:0 auto;padding:16px 20px 8px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;width:100%}.search-container{flex:1 1 260px;position:relative;min-width:220px}.search-container input{width:100%;padding:11px 14px 11px 40px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);outline:none;transition:border-color .2s,box-shadow .2s}.search-container input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.search-container svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-3)}.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);color:var(--ink-2);font-weight:500;font-size:14px;transition:background .12s,border-color .12s;white-space:nowrap}.btn:hover{background:var(--line-2)}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.btn.primary:hover{filter:brightness(.95)}.btn.danger{color:var(--danger);border-color:var(--danger-soft);background:#fff}.btn.danger:hover{background:var(--danger-soft)}.btn.outline{border-color:var(--line);background:transparent}.main-content{max-width:1400px;margin:0 auto;padding:16px 20px 80px;width:100%}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}.error-banner{grid-column:1 / -1;background:var(--danger-soft);color:var(--danger);padding:12px 16px;border-radius:var(--radius);border:1px solid var(--danger);display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;margin-bottom:8px}.u-card{background:var(--panel);border-radius:var(--radius);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s;position:relative}.u-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.u-card-head{padding:16px;display:flex;gap:12px;align-items:flex-start}.u-avatar{width:56px;height:56px;border-radius:12px;background:var(--accent-soft);color:var(--accent);flex-shrink:0;display:grid;place-items:center;font-size:20px;font-weight:700}.u-info{flex:1;min-width:0}.u-name{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:4px}.u-meta{font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:6px}.care-badge{font-size:11px;padding:2px 8px;border-radius:4px;background:var(--accent-soft);color:var(--accent);font-weight:600}.u-vitals{padding:12px 16px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:#fbfcfc;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}.v-cell{text-align:center}.v-label{font-size:10px;color:var(--ink-3);margin-bottom:2px}.v-val{font-size:14px;font-weight:700;color:var(--ink)}.v-unit{font-size:9px;color:var(--ink-3);margin-left:1px}.u-memo{padding:12px 16px;font-size:13px;color:var(--ink-2);min-height:60px}.u-memo-head{font-size:10px;color:var(--ink-3);margin-bottom:4px;display:flex;justify-content:space-between}.u-memo-body{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5}.attention-badge{background:var(--danger-soft);color:var(--danger);padding:4px 12px;border-radius:6px;font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:4px;margin:0 16px 12px}.face-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s}.face-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.face-thumb{height:160px;background:var(--accent-soft);display:grid;place-items:center;position:relative}.face-thumb .initial{font-size:64px;font-weight:700;color:var(--accent);opacity:.5}.q-badge{position:absolute;top:12px;right:12px;background:#0f2530cc;color:#fff;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600}.face-body{padding:16px}.face-user{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:4px}.face-samples{font-size:12px;color:var(--ink-3);margin-bottom:12px}.face-date{font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:4px}.face-actions{padding:12px 16px;border-top:1px solid var(--line-2);display:flex;justify-content:flex-end}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:640px){.card-grid{grid-template-columns:1fr}.top-tabs{position:fixed;bottom:0;left:0;right:0;background:var(--panel);border-top:1px solid var(--line);margin-left:0;gap:0;z-index:100;padding:6px 12px 24px;display:flex;justify-content:space-around}.top-tab{flex-direction:column;gap:4px;padding:8px;font-size:11px;flex:1;border-radius:0;position:relative}.top-tab .count{position:absolute;top:4px;right:calc(50% - 22px);font-size:9px;padding:0 4px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center}.top-tab.active{background:transparent}.top-tab.active svg{color:var(--accent)}.topbar-inner{padding:12px 16px;justify-content:space-between}.brand-sub,.top-spacer{display:none}.toolbar{padding:12px 16px 4px;gap:8px}.search-container{flex:1 1 100%;min-width:0;order:1}.btn{flex:1;order:2;padding:10px;justify-content:center}.main-content{padding:8px 16px 100px}}.demo-tab{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:16px;width:100%}.demo-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:16px}.demo-card-header{display:flex;align-items:center;gap:10px}.demo-card-header h2{flex:1;margin:0;font-size:16px;font-weight:600}.demo-form{display:flex;flex-direction:column;gap:12px}.demo-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted, #6b7280)}.demo-form select,.demo-form input,.demo-form textarea{padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:var(--bg, #fff);color:inherit;font-family:inherit;resize:vertical}.demo-form select:focus,.demo-form input:focus,.demo-form textarea:focus{outline:2px solid var(--accent, #3b82f6);outline-offset:-1px}.feedback{padding:8px 12px;border-radius:6px;font-size:13px}.feedback.success{background:#d1fae5;color:#065f46}.feedback.error{background:#fee2e2;color:#991b1b}.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;border:2px dashed var(--line);border-radius:8px;color:var(--muted, #6b7280);text-align:center;gap:8px}.placeholder small{font-size:12px;opacity:.7}.history-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:360px;overflow-y:auto}.history-list li{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--bg, #fff)}.history-list li.unread{border-left:3px solid var(--accent, #3b82f6)}.history-list li.read{opacity:.65}.hist-title{font-weight:600;font-size:14px}.hist-desc{font-size:13px;color:var(--muted, #6b7280);margin-top:4px;white-space:pre-wrap}.hist-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted, #6b7280);margin-top:6px}.empty-inline{padding:16px;text-align:center;color:var(--muted, #6b7280);font-size:13px}.btn.ghost{background:transparent;border:1px solid var(--line);padding:6px 8px}@media(max-width:640px){.demo-tab{grid-template-columns:1fr;gap:12px}.demo-card{padding:14px}}.u-card-actions{display:flex;gap:6px}.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:transparent;cursor:pointer;color:var(--ink, #374151);transition:background .15s,color .15s,border-color .15s}.btn-icon:hover{background:var(--bg, #f3f4f6)}.btn-icon.danger{color:#b91c1c;border-color:#fecaca}.btn-icon.danger:hover{background:#fee2e2;border-color:#f87171}