/* State attributes must always win over component display rules. */
[hidden] { display: none !important; }

button:disabled { cursor: wait; opacity: .7; }

.current-user {
  display: grid;
  border-top: 1px solid #ffffff18;
  padding-top: 14px;
  margin-top: 12px;
}
.current-user strong { font-size:16px; }
.current-user span { margin-top: 3px; color: #91a19b; font-size:16px; }
.staff-panel { margin-top: 24px; }
.user-row {
  display: grid;
  grid-template-columns: 40px 1fr 110px 90px 80px;
  align-items: center;
  gap: 14px;
  padding: 15px 24px;
  border-bottom: 1px solid #dce5e1;
}
.field-help { color: #6e7d77; font-size: 16px; font-weight: 400; }
.inline-client-fields { margin: 8px 0 20px; padding: 18px; border: 1px solid #cddbd5; background: #f3f7f5; }
.inline-client-fields h3 { margin: 0 0 14px; font-size: 18px; }

/* サイト一覧：情報を列ごとに見分けやすくする */
#sites .site { grid-template-columns: minmax(330px, 1.65fr) minmax(180px, .75fr) minmax(240px, 1fr) auto; gap: 0; padding: 0; }
.site-identity { display:flex; align-items:center; gap:16px; padding:22px 20px; min-width:0; }
.site-identity .site-icon { width:48px; height:48px; flex:0 0 48px; font-family:inherit; font-size:13px; font-weight:800; letter-spacing:-.02em; }
.site-identity .site-icon.client-icon { background:#edf0e6; color:#6f5b20; }
.site-url-line { display:flex; align-items:center; gap:10px; min-width:0; }
.site-url-line > a:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.site-login-link { flex:none; padding:4px 9px; border:1px solid #14634d; border-radius:3px; color:#145a43!important; background:#fff; font-size:14px!important; font-weight:700; }
.site-fact { align-self:stretch; display:flex; flex-direction:column; justify-content:center; gap:7px; padding:18px 20px; border-left:1px solid #dce5e1; position:relative; }
.site-fact span { color:#566861; font-size:14px; }
.site-fact strong { color:#14251f; font-size:18px; }
.site-security { padding-right:62px; }
.site-security .status { position:absolute; right:20px; top:50%; translate:0 -50%; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#fff0d5; color:#a96b14; font-size:14px; }
.site-security .status:before { display:none; }
.site-security .status.offline,.site-security .status.critical { background:#f9ded8; color:#a3352b; }
.site-security .status.online.normal { background:#e2f0e7; color:#23714f; }
.site-security .latency { display:none; }
.site-actions { display:grid; align-content:center; gap:9px; padding:14px 20px; border-left:1px solid #dce5e1; }
.site-action-buttons { display:flex; align-items:center; gap:10px; }
.site-actions button { min-height:42px; padding:9px 13px; font-size:14px; line-height:1.2; white-space:nowrap; }
.chat-last-sent { color:#6e7d77; font-size:13px; white-space:nowrap; }
.chat-last-sent b { color:#354b43; font-size:13px; }
.site-actions .check { border:2px solid #14634d; color:#124f3e; }
.site-actions .share-updates { border:2px solid #6d2732; color:#55202a; }
.site-actions .edit-site { border-color:#aebdb7; }

/* サイト編集はPCで十分な横幅を確保 */
#add-dialog { width:min(900px, calc(100% - 48px)); max-height:calc(100vh - 48px); overflow:auto; }
#add-dialog form { padding:34px 40px; }
#chat-compose-dialog { width:min(720px, calc(100% - 48px)); max-height:calc(100vh - 48px); overflow:auto; }
#chat-compose-dialog form { padding:34px 40px; }
#chat-compose-dialog textarea { width:100%; min-height:260px; resize:vertical; border:1px solid #cbd8d2; padding:14px; background:#fbfcfa; border-radius:4px; outline:none; font:inherit; line-height:1.7; }
#chat-compose-dialog textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px #1d6a4c18; }
#chat-compose-target { margin:8px 0 18px; color:var(--muted); }

@media(max-width:1100px){
  #sites .site { grid-template-columns:1fr 1fr; }
  .site-identity { grid-column:1 / -1; border-bottom:1px solid #dce5e1; }
  .site-actions { justify-content:flex-end; }
}
@media(max-width:700px){
  #sites .site { display:block; }
  .site-fact,.site-actions { border-left:0; border-top:1px solid #dce5e1; }
  .site-actions { flex-wrap:wrap; justify-content:flex-start; }
  #add-dialog { width:calc(100% - 24px); }
  #add-dialog form { padding:24px 20px; }
  #chat-compose-dialog { width:calc(100% - 24px); }
  #chat-compose-dialog form { padding:24px 20px; }
}
@media(max-width:700px){.user-row{grid-template-columns:40px 1fr}.user-row>b,.user-row>.status,.user-row>button{grid-column:2}}
.user-row > div:nth-child(2) { display: grid; gap: 3px; }
.user-row > div span { color: #6e7d77; font-size:16px; }
.avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e5eee8;
  color: #145a43;
  font-weight: 800;
}
.client-row { display: grid; grid-template-columns: 40px 1fr 110px 130px 70px; align-items: center; gap: 14px; padding: 15px 24px; border-bottom: 1px solid #dce5e1; }
.client-row > div:nth-child(2) { display: grid; gap: 3px; }
.client-row > div span, .client-row > span { color: #6e7d77; font-size:16px; }
.client-row > b { color: #145a43; font-size:16px; }
.owner-badge { display: inline-block; margin-left: 7px; padding: 3px 6px; border-radius: 10px; background: #e6eee9; color: #145a43; font-family: inherit; font-size:16px; vertical-align: 2px; }
.client-number-badge { display:inline-block; margin-left:7px; padding:3px 7px; border-radius:10px; background:#f0eadc; color:#7a5a1f; font-family:inherit; font-size:14px; vertical-align:2px; }
.policy-chip { padding: 7px 10px; border-radius: 20px; background: #e6eee9; color: #145a43; font-size:16px; font-weight: 800; }
.backup-card { padding: 20px 24px; border-bottom: 1px solid #dce5e1; }
.backup-top { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 13px; }
.backup-top > div:nth-child(2) { display: grid; gap: 3px; }
.backup-top > div span { color: #6e7d77; font-size:16px; }
.backup-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #f4e5d2; color: #a96b14; font-weight: 900; }
.backup-icon.success { background: #e2eee6; color: #145a43; }
.backup-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 18px; background: #dce5e1; border: 1px solid #dce5e1; }
.backup-facts > div { display: grid; gap: 6px; padding: 13px 15px; background: #fff; }
.backup-facts span { color: #6e7d77; font-size:16px; }
.backup-facts strong, .backup-facts a { color: #14251f; font-size:16px; text-decoration: none; }
.backup-row { display: grid; grid-template-columns: 42px 1fr 180px 80px; align-items: center; gap: 13px; padding: 18px 24px; }
.backup-row > div:nth-child(2) { display: grid; gap: 3px; }
.backup-row > div span { color: #6e7d77; font-size:16px; }
.panel-message { min-height: 24px; margin: 12px 24px; color:#53665f; font-size:16px; }
.latency { display:grid; gap:3px; }
.latency strong { font-size:16px; color:#354b43; }
.latency small { font-size:16px; color:#6e7d77; }
.danger-zone { margin-top:32px; padding:20px; border:2px solid #df9b94; background:#fff6f4; }
.danger-zone h3 { color:#992e26; }
.danger-zone p { line-height:1.6; }
.danger-zone label { color:#71251f; }
.danger-zone .danger-button { width:100%; padding:13px; }
.danger-button:disabled { opacity:.45; cursor:not-allowed; }
.site-chat-zone { margin-top:28px; padding:20px; border:1px solid #b9cdc4; background:#f5faf7; }
.site-chat-zone h3 { color:#145a43; }
.site-chat-zone p { line-height:1.6; }
@media(max-width:700px){.backup-facts{grid-template-columns:1fr 1fr}.client-row{grid-template-columns:40px 1fr}.client-row>b,.client-row>span,.client-row .edit-client{grid-column:2}}
.security-card { padding: 20px 24px; border-bottom: 1px solid #dce5e1; }
.security-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.security-title > div { display: grid; gap: 4px; }
.security-title span { color: #6e7d77; font-size:16px; }
.severity { padding: 5px 9px; border-radius: 20px; font-size:16px; }
.severity.normal { background: #e2eee6; color: #145a43; }
.severity.medium { background: #fff0d7; color: #8b570f; }
.severity.high { background: #fde3dc; color: #a3352b; }
.severity.critical { background: #a3352b; color: #fff; }
.security-facts { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; margin-top: 16px; border: 1px solid #dce5e1; background: #dce5e1; }
.security-facts > div { display: grid; gap: 5px; padding: 12px; background: #fff; }
.security-facts span { color: #6e7d77; font-size:16px; }
.security-facts strong { font-size:16px; }
.security-warning { margin-top: 12px; padding: 11px 13px; background: #fde8e3; color: #8f2f27; font-size:16px; }
.security-row { display: grid; grid-template-columns: 1fr auto 320px; align-items: center; gap: 16px; padding: 18px 24px; }
.security-row > div { display: grid; gap: 4px; }.security-row span,.security-row p{color:#6e7d77;font-size:16px}
@media(max-width:1100px){.security-facts{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){.security-facts{grid-template-columns:repeat(3,1fr)}.security-row{grid-template-columns:1fr auto}.security-row p{grid-column:1/-1}}
.help-content { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.help-content article { padding: 24px; border-right: 1px solid #dce5e1; border-bottom: 1px solid #dce5e1; }
.help-content article:nth-child(even) { border-right: 0; }
.help-content h3 { margin: 0 0 10px; font-family: Georgia,serif; font-size: 19px; }
.help-content p, .help-content li, .help-content dd { color: #566861; font-size:16px; line-height: 1.75; }
.help-content code { padding: 2px 5px; background: #eef2ef; color: #27483c; }
.help-content .help-exclude { padding: 10px 12px; background: #f2f5f2; }
.help-content dl { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px 12px; margin: 14px 0 0; }
.help-content dt, .help-content dd { margin: 0; }
.help-content ol { margin: 0; padding-left: 22px; }
@media(max-width:700px){.help-content{grid-template-columns:1fr}.help-content article{border-right:0}}
select {
  padding: 13px 14px;
  border: 1px solid #cbd8d2;
  border-radius: 4px;
  background: #fbfcfa;
}

nav .nav-button {
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #aebdb7;
  text-align: left;
  font-size:16px;
}
nav .nav-button:hover { background: #ffffff09; color: #fff; }
nav .nav-button.active { border-left-color: #85b89b; background: #ffffff10; color: #fff; }
.audit-row { display: grid; grid-template-columns: 160px 1fr 180px; gap: 16px; padding: 14px 24px; border-bottom: 1px solid #dce5e1; font-size:16px; }
.audit-row time, .audit-row span { color: #6e7d77; }
.nav-flash { animation: nav-flash 1s ease; }
@keyframes nav-flash { 0% { box-shadow: 0 0 0 3px #85b89b88; } 100% { box-shadow: none; } }
.settings-form { padding: 24px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.toggle-row { display: flex; align-items: center; gap: 12px; padding: 16px; margin: 0 0 8px; background: #eef4f0; }
.toggle-row input { width: 20px; height: 20px; }
.settings-note { padding: 14px 16px; background: #f5f3ed; color: #566861; font-size: 16px; line-height: 1.7; }
.success-message { color: #23714f; min-height: 24px; }
.danger-button { border: 1px solid #d9aaa4; background: #fff; color: #a3352b; padding: 9px 13px; border-radius: 4px; }
.panel-actions { display: flex; align-items: center; gap: 10px; }
.history-head { padding: 22px 24px 12px; border-top: 1px solid #dce5e1; }
.history-head h3 { margin: 0; font-size: 20px; }
.history-head p { margin: 5px 0 0; color: #6e7d77; font-size: 16px; }
.history-row { display: grid; grid-template-columns: 180px minmax(220px,1fr) 110px 110px 130px; gap: 16px; align-items: center; padding: 14px 24px; border-top: 1px solid #e5ebe8; font-size: 16px; }
.history-row > div { display: grid; gap: 3px; }
.history-row time, .history-row > span, .history-row > div span { color: #6e7d77; font-size: 16px; }
.site-filter-label { display: grid; gap: 6px; min-width: 310px; margin: 0; color: #566861; font-size: 16px; }
.site-filter-label select { width: 100%; }
@media(max-width:900px){.history-row{grid-template-columns:1fr 1fr}.history-row>div{grid-column:1/-1}.panel-actions{flex-wrap:wrap;justify-content:flex-end}}
@media(max-width:700px){.settings-grid{grid-template-columns:1fr}}

/* Long service name: compact headings without reducing body text below 16px. */
.login-card h1 { font-size: 30px; line-height: 1.3; }
.brand { gap: 10px; }
.brand strong { font-size: 16px; line-height: 1.35; letter-spacing: -.02em; }
.brand { flex: 0 0 auto; }
aside nav { min-height: 0; overflow-y: auto; padding-right: 4px; }
.security-badge { flex: 0 0 auto; }
.dashboard h1 { font-size: 28px; line-height: 1.35; }
@media(max-width:560px){.login-card h1{font-size:26px}.dashboard h1{font-size:25px}}
.checksum-details { margin-top: 14px; border: 1px solid #d7e1dc; background: #fbfcfa; }
.checksum-details summary { cursor: pointer; padding: 14px 16px; color: #145a43; font-size: 16px; font-weight: 800; }
.checksum-details > p, .checksum-details section { margin: 0; padding: 12px 16px; border-top: 1px solid #e3eae6; color: #566861; font-size: 16px; }
.checksum-details h4 { margin: 0 0 8px; font-size: 16px; }
.checksum-details ul { margin: 0; padding-left: 22px; max-height: 240px; overflow: auto; }
.checksum-details li { margin: 6px 0; font-size: 16px; }
.checksum-details code { overflow-wrap: anywhere; font-size: 16px; }