:root {
  color-scheme: dark; font-family: Inter, "Noto Sans JP", "Yu Gothic UI", system-ui, sans-serif;
  background: #07101d; color: #edf4ff; --surface: #0e1a2a; --line: #263c58;
  --muted: #91a6bf; --blue: #4f8cff; --green: #46d7a0; --amber: #ffc65c;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 12% -20%, #173b68 0, #07101d 34%, #050b14 100%); }
button, input, select { font: inherit; } button { cursor: pointer; } [hidden] { display: none !important; }
main { width: min(1720px, 100%); margin: 0 auto; padding: 28px; }

.login-card { width: min(430px, 94vw); margin: 11vh auto; padding: 34px; border: 1px solid #355276; border-radius: 22px; background: rgba(14,26,42,.96); box-shadow: 0 28px 90px #000a; }
.brand-mark { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 14px; background: linear-gradient(135deg,#5d9cff,#695ee8); font-size: 22px; font-weight: 900; }
.login-card h1 { margin: 0; font-size: 25px; }.login-card>p { margin: 7px 0 26px; color: var(--muted); }.login-card form { display: grid; gap: 16px; }
label { display: grid; gap: 7px; color: #b8c7da; font-size: 13px; font-weight: 650; }
input, select { width: 100%; min-width: 0; border: 1px solid #38516f; border-radius: 9px; outline: none; background: #0a1524; color: #f4f8ff; padding: 10px 12px; }
input:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #4f8cff25; } output { min-height: 20px; color: #ff8e9a; }
.primary-button,.quiet-button { border: 1px solid transparent; border-radius: 9px; padding: 9px 14px; color: white; font-weight: 750; }
.primary-button { background: linear-gradient(135deg,#397be8,#5768df); }.primary-button:hover { filter: brightness(1.12); }
.quiet-button { border-color: #38516f; background: #101d2e; }.quiet-button:hover { background: #1a304c; }

.page-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.page-header h1 { margin: 2px 0 0; font-size: 28px; letter-spacing: -.025em; }.page-header p { margin: 5px 0 0; color: var(--muted); }
.eyebrow { color: #78a7ff; font-size: 10px; font-weight: 900; letter-spacing: .18em; }.header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.connection-state { display: inline-flex; align-items: center; gap: 7px; margin-right: 8px; color: var(--amber); font-size: 12px; font-weight: 750; }
.connection-state i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }.connection-state.online { color: var(--green); }

.cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 12px; }
.card { display: flex; align-items: center; gap: 14px; min-height: 108px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg,#122138,#0d1929); }
.card-icon { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; background: #2a5285; box-shadow: inset 0 0 0 1px #ffffff18; }
.card-icon.key { background: #604ca0; }.card-icon.session { background: #316b76; }.card-icon.device { background: #396747; }.card-icon.invite { background: #76518c; }.card-icon.storage { background: #765c2f; }
.card b,.card strong,.card small { display: block; }.card b { color: #a9bbd1; font-size: 12px; }.card strong { margin: 2px 0; font-size: 25px; }.card small { color: #748ba6; font-size: 11px; }

.invite-manager { margin-top: 12px; border: 1px solid #3d426c; border-radius: 15px; background: linear-gradient(145deg,rgba(24,28,57,.96),rgba(13,24,40,.96)); }
.invite-manager>summary { padding: 14px 16px; color: #e8e8ff; cursor: pointer; font-size: 13px; font-weight: 850; }.invite-manager>p { margin: -4px 16px 12px; color: #9fa8c9; font-size: 11px; }
.invite-form { display: grid; grid-template-columns: minmax(180px,1fr) 160px auto; align-items: end; gap: 10px; padding: 0 12px 12px; }.invite-form button { height: 40px; }
.issued-invite { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; margin: 0 12px 12px; padding: 13px; border: 1px solid #6561a6; border-radius: 11px; background: #1d2148; }.issued-invite div,.issued-invite textarea { grid-column: 1/-1; }.issued-invite strong,.issued-invite small { display: block; }.issued-invite small { margin-top: 4px; color: #9da9c8; font-size: 10px; }.issued-invite textarea { width: 100%; min-height: 84px; resize: vertical; border: 1px solid #4c5686; border-radius: 8px; background: #090f20; color: #e7efff; padding: 10px; font: 10px/1.45 ui-monospace,Consolas,monospace; }
.invite-list { display: grid; gap: 7px; padding: 0 12px 12px; }.invite-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid #303c62; border-radius: 9px; background: #0b1728; }.invite-info { min-width: 0; }.invite-info strong,.invite-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.invite-info strong { font-size: 12px; }.invite-info small,.invite-empty { color: #7f91ad; font-size: 9px; }.invite-status { border-radius: 999px; padding: 4px 8px; background: #36425a; color: #c8d5e7; font-size: 9px; font-weight: 800; }.status-ready .invite-status { background: #225241; color: #78e0ae; }.status-used .invite-status { background: #293e5b; color: #91b8ed; }.status-expired,.status-revoked { opacity: .65; }

.device-manager { margin-top: 12px; border: 1px solid var(--line); border-radius: 15px; background: rgba(14,26,42,.9); }
.device-manager>summary { padding: 14px 16px; color: #dce9f8; cursor: pointer; font-size: 13px; font-weight: 800; }.device-manager>p { margin: -4px 16px 12px; color: var(--muted); font-size: 11px; }
.device-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(310px,1fr)); gap: 8px; padding: 0 12px 12px; }
.device-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid #29415e; border-radius: 10px; background: #0a1625; }.device-row.disabled { opacity: .58; }
.device-state { width: 9px; height: 9px; border-radius: 50%; background: #63768d; }.device-state.online { background: var(--green); box-shadow: 0 0 9px #46d7a0aa; }
.device-info { min-width: 0; }.device-info strong,.device-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.device-info strong { font-size: 12px; }.device-info small,.device-seen,.admin-device { color: #7890ab; font-size: 9px; }.device-row .quiet-button { padding: 6px 9px; font-size: 10px; }

.control-panel { margin: 18px 0 14px; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; background: rgba(14,26,42,.9); }
.category-tabs { display: flex; gap: 3px; padding: 9px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.category-tab { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; border: 1px solid transparent; border-radius: 9px; padding: 8px 10px; background: transparent; color: #9db0c7; font-size: 12px; font-weight: 750; }
.category-tab:hover { background: #192a40; color: white; }.category-tab.active { border-color: #426aa0; background: #1d385d; color: white; }
.category-tab b { min-width: 20px; padding: 1px 5px; border-radius: 999px; background: #ffffff10; color: #91b5f5; font-size: 10px; }
.tab-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #ffffff0b; font-size: 9px; }
.filters { display: grid; grid-template-columns: 180px 180px 180px minmax(220px,1fr) auto; align-items: end; gap: 10px; padding: 13px; }
.filter-submit { height: 40px; }.check-label { display: flex; align-items: center; gap: 7px; grid-column: 1/-1; width: max-content; color: #a9bbd1; font-size: 12px; font-weight: 500; }.check-label input { width: auto; }

.workspace { display: grid; grid-template-columns: minmax(410px,.82fr) minmax(560px,1.5fr); gap: 14px; align-items: start; }
.event-panel,.detail-panel { border: 1px solid var(--line); border-radius: 15px; background: rgba(10,19,31,.94); overflow: hidden; }.event-panel { position: sticky; top: 12px; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; min-height: 68px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: #101e31; }
.panel-heading h2 { margin: 0; font-size: 16px; }.panel-heading p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.event-list { max-height: calc(100vh - 280px); min-height: 420px; overflow-y: auto; }
.event-item { position: relative; display: flex; width: 100%; gap: 12px; border: 0; border-bottom: 1px solid #1f324b; padding: 14px 14px 14px 17px; background: transparent; color: inherit; text-align: left; }
.event-item:hover { background: #14243a; }.event-item.selected { background: #192f4b; box-shadow: inset 3px 0 var(--blue); }
.event-accent { width: 3px; min-height: 60px; border-radius: 99px; background: #72849b; }.event-main { display: block; min-width: 0; flex: 1; }
.event-topline { display: flex; align-items: center; gap: 7px; }.event-topline strong { font-size: 13px; }.event-topline time { margin-left: auto; color: #7f96b1; font-size: 10px; }
.event-summary { display: -webkit-box; overflow: hidden; margin: 8px 0; color: #e7eef8; font-size: 12px; line-height: 1.55; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.event-meta { display: flex; gap: 6px; flex-wrap: wrap; }.event-meta span { max-width: 180px; overflow: hidden; padding: 3px 6px; border-radius: 5px; background: #ffffff08; color: #8fa4bd; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { width: 8px; height: 8px; flex: 0 0 auto; margin-top: 5px; border-radius: 50%; }.status-dot.persisted { background: var(--green); }.status-dot.duplicate { background: var(--amber); }
.category-badge { display: inline-flex; align-items: center; border-radius: 6px; padding: 3px 7px; background: #40516a; color: #eaf1fb; font-size: 10px; font-weight: 850; white-space: nowrap; }
.category-auth,.event-accent.category-auth { background: #8066cc; }.category-room,.event-accent.category-room { background: #347bd3; }.category-privateChat,.event-accent.category-privateChat { background: #147d83; }.category-dm,.event-accent.category-dm { background: #258ba6; }.category-bbs,.event-accent.category-bbs { background: #b27836; }.category-timeline,.event-accent.category-timeline { background: #397f67; }.category-blog,.event-accent.category-blog { background: #a05a78; }.category-profile,.event-accent.category-profile { background: #6376b8; }.category-realtime,.event-accent.category-realtime { background: #687889; }
.empty-list { display: grid; place-items: center; align-content: center; gap: 5px; min-height: 360px; color: var(--muted); }.empty-list span { font-size: 12px; }

.detail-panel { min-height: 560px; }.empty-detail { display: grid; place-items: center; align-content: center; min-height: 560px; padding: 30px; color: var(--muted); text-align: center; }
.empty-detail h2 { margin: 12px 0 2px; color: #cbd8e8; font-size: 18px; }.empty-detail p { margin: 4px; }.empty-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: #15263c; color: #6b92c9; font-size: 22px; }
.detail-header { display: flex; justify-content: space-between; gap: 16px; padding: 20px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg,#142941,#101d30); }
.detail-header h2 { display: inline; margin: 0 0 0 9px; font-size: 21px; }.detail-header p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.status-badge { align-self: flex-start; border-radius: 999px; padding: 5px 9px; font-size: 11px; font-weight: 800; }.status-badge.persisted { background: #1c503f; color: #72e1a7; }.status-badge.duplicate { background: #59451e; color: #ffd174; }
.detail-sections { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 14px; }
.detail-section { min-width: 0; padding: 16px; border: 1px solid #263c58; border-radius: 12px; background: #0e1a2a; }.detail-section.content-section,.detail-section.full-width { grid-column: 1/-1; }
.section-heading h3,.section-title-row h3 { margin: 0; color: #eaf2ff; font-size: 14px; }.section-heading p,.section-title-row p { margin: 4px 0 12px; color: #7f96b1; font-size: 10px; }
.field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0; }.field { min-width: 0; padding: 9px; border-radius: 8px; background: #091421; }.field.wide { grid-column: 1/-1; }
.field dt { margin-bottom: 4px; color: #7f96b1; font-size: 10px; }.field dd { margin: 0; overflow-wrap: anywhere; color: #edf4ff; font-size: 12px; line-height: 1.55; white-space: pre-wrap; }.code-value { font-family: ui-monospace,Consolas,monospace; }
.json-block,.raw-detail pre { max-height: 280px; margin: 0; overflow: auto; border-radius: 8px; background: #07101a; color: #cfe1f7; padding: 12px; font: 11px/1.55 ui-monospace,Consolas,monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.snapshot-section { border-color: #36547a; background: linear-gradient(145deg,#10233a,#0d1b2c); }
.snapshot-stats { display: flex; gap: 9px; margin: 12px 0; }.snapshot-stats span { min-width: 105px; padding: 10px 13px; border: 1px solid #294766; border-radius: 9px; background: #091827; color: #8fa7c2; font-size: 11px; }.snapshot-stats b { display: block; margin-bottom: 2px; color: #fff; font-size: 18px; }
.snapshot-guide { margin: 10px 0; padding: 10px 12px; border-left: 3px solid var(--blue); border-radius: 0 7px 7px 0; background: #142942; color: #bdd0e5; font-size: 12px; line-height: 1.6; }
.snapshot-raw { margin-top: 10px; border: 1px solid #29415e; border-radius: 8px; background: #091522; }.snapshot-raw summary { padding: 10px 12px; color: #91a8c2; cursor: pointer; font-size: 11px; font-weight: 700; }.snapshot-raw div { max-height: 240px; overflow: auto; border-top: 1px solid #29415e; padding: 12px; color: #b8c7d9; font-size: 11px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.related-section { border-color: #2c5576; background: #0b1827; }.related-loading { padding: 22px; border-radius: 9px; background: #091421; color: #8fa5be; text-align: center; font-size: 12px; }.related-loading.error { color: #ff9ca7; }
.related-group+.related-group { margin-top: 18px; padding-top: 16px; border-top: 1px solid #263c58; }.related-group-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }.related-group-title h4 { margin: 0; font-size: 13px; }.related-group-title span { border-radius: 999px; padding: 3px 8px; background: #192c43; color: #91a9c4; font-size: 10px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(225px,1fr)); gap: 9px; }.related-card { display: flex; min-width: 0; min-height: 135px; flex-direction: column; border: 1px solid #2a405a; border-left: 3px solid #6d7f94; border-radius: 10px; padding: 11px; background: #091522; color: #eaf2fc; text-align: left; }.related-card:hover { border-color: #4f78aa; background: #10243a; transform: translateY(-1px); }
.related-card.category-border-privateChat { border-left-color: #147d83; }.related-card.category-border-timeline { border-left-color: #397f67; }.related-card.category-border-blog { border-left-color: #a05a78; }.related-card.category-border-bbs { border-left-color: #b27836; }.related-card.category-border-dm { border-left-color: #258ba6; }.related-card.category-border-room { border-left-color: #347bd3; }
.private-chat-section { border-color: #286b70; background: linear-gradient(145deg,#0d252c,#0d1b29); }.private-chat-section .field.wide dd { font-size: 15px; line-height: 1.75; }
.related-card-top { display: flex; align-items: center; gap: 6px; }.related-card-top b { font-size: 11px; }.related-card-top time { margin-left: auto; color: #748ba6; font-size: 9px; }.related-card-text { display: -webkit-box; overflow: hidden; margin: 10px 0; font-size: 12px; line-height: 1.65; white-space: pre-wrap; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }.related-card-meta { margin-top: auto; overflow: hidden; color: #728aa5; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.credential-section { margin: 0 14px 14px; border-color: #4b467b; background: linear-gradient(145deg,#151a35,#10182b); }
.section-title-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; }.section-actions { display: flex; gap: 7px; flex: 0 0 auto; }
.credential-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.credential-item { min-width: 0; padding: 11px; border: 1px solid #31455f; border-radius: 9px; background: #091421; }
.credential-item.important { border-color: #7563b4; background: #1b1b3b; }.credential-item span,.credential-item strong,.credential-item small { display: block; }
.credential-kind { margin-bottom: 6px; color: #9eacf4; font-size: 11px; font-weight: 800; }.credential-item strong { overflow-wrap: anywhere; color: #fff; font: 13px/1.5 ui-monospace,Consolas,monospace; }.credential-item small { margin-top: 7px; color: #7289a4; font-size: 9px; overflow-wrap: anywhere; }.muted { margin: 3px 0; color: var(--muted); font-size: 12px; }
.raw-detail { margin: 0 14px 14px; border: 1px solid #263c58; border-radius: 10px; background: #0b1624; }.raw-detail summary { padding: 12px 14px; color: #96aac1; cursor: pointer; font-size: 12px; font-weight: 700; }.raw-detail pre { max-height: 420px; margin: 0 12px 12px; }

@media(max-width:1150px) { main { padding: 18px; }.cards { grid-template-columns: repeat(2,minmax(0,1fr)); }.filters { grid-template-columns: repeat(3,minmax(150px,1fr)); }.search-field { grid-column: span 2; }.workspace { grid-template-columns: 1fr; }.event-panel { position: static; }.event-list { max-height: 520px; }.detail-panel { min-height: 400px; } }
@media(max-width:700px) { main { padding: 10px; }.page-header { align-items: flex-start; flex-direction: column; }.header-actions { width: 100%; }.connection-state { width: 100%; }.cards { grid-template-columns: 1fr 1fr; }.card { min-height: 92px; padding: 12px; }.card-icon { display: none; }.invite-form { grid-template-columns: 1fr; }.invite-row { grid-template-columns: minmax(0,1fr) auto; }.invite-row button { grid-column: 1/-1; }.device-list { grid-template-columns: 1fr; }.filters { grid-template-columns: 1fr 1fr; }.search-field { grid-column: 1/-1; }.filter-submit { width: 100%; }.workspace { display: block; }.detail-panel { margin-top: 12px; }.detail-sections,.credential-grid { grid-template-columns: 1fr; }.detail-section { grid-column: 1!important; }.field-grid { grid-template-columns: 1fr; }.field { grid-column: 1!important; }.section-title-row { align-items: flex-start; flex-direction: column; }.event-topline time { display: none; } }