body.detail-open { overflow: hidden; }
.detail-drawer { position: fixed; inset: 0; z-index: 1000; pointer-events: none; visibility: hidden; }
.detail-drawer.is-open { pointer-events: auto; visibility: visible; }
.detail-backdrop { position: absolute; inset: 0; background: rgba(2,8,18,.68); backdrop-filter: blur(8px); opacity: 0; transition: opacity .22s ease; }
.detail-drawer.is-open .detail-backdrop { opacity: 1; }
.detail-sheet { position: absolute; top: 0; right: 0; width: min(760px, 92vw); height: 100%; overflow-y: auto; background: linear-gradient(180deg,#0d1729 0%,#09111f 100%); border-left: 1px solid rgba(255,255,255,.09); box-shadow: -30px 0 80px rgba(0,0,0,.35); transform: translateX(104%); transition: transform .24s ease; padding: 28px 30px 96px; }
.detail-drawer.is-open .detail-sheet { transform: translateX(0); }
.detail-head { position: relative; padding-right: 44px; }
.detail-close { position: absolute; top: -4px; right: 0; width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #eef4ff; font-size: 24px; cursor: pointer; }
.detail-kicker { color: #8dd7ff; font-size: 11px; font-weight: 800; letter-spacing: .15em; margin-bottom: 9px; }
.detail-head h2 { font-size: clamp(24px,4vw,36px); line-height: 1.2; margin: 0 0 14px; letter-spacing: -.025em; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.detail-chip { border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 6px 9px; color: #a9b7cc; font-size: 11px; background: rgba(255,255,255,.025); }
.detail-body { display: grid; gap: 14px; margin-top: 26px; }
.detail-summary, .detail-focus, .detail-section { border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: rgba(255,255,255,.025); padding: 19px; }
.detail-summary { background: linear-gradient(145deg,rgba(141,215,255,.09),rgba(181,167,255,.04)); }
.detail-summary span, .detail-focus span { display: block; color: #8dd7ff; font-size: 10px; font-weight: 800; letter-spacing: .14em; margin-bottom: 9px; }
.detail-summary p { margin: 0; color: #e7effd; font-size: 15px; line-height: 1.8; }
.detail-focus { border-color: rgba(141,215,255,.2); }
.detail-focus strong { display: block; font-size: 16px; line-height: 1.65; }
.detail-section h3 { font-size: 15px; margin: 0 0 12px; }
.detail-section p { margin: 0; color: #9aaac1; line-height: 1.75; font-size: 13px; }
.detail-section ul { margin: 0; padding-left: 20px; display: grid; gap: 9px; }
.detail-section li { color: #c8d4e6; font-size: 13px; line-height: 1.65; }
.detail-source-note { opacity: .8; }
.detail-related { display: grid; gap: 8px; }
.detail-related button { border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); color: #eef4ff; border-radius: 13px; padding: 12px 13px; text-align: left; cursor: pointer; }
.detail-related button:hover { border-color: rgba(141,215,255,.25); background: rgba(141,215,255,.05); }
.detail-related b { display: block; font-size: 13px; line-height: 1.45; }
.detail-related small { display: block; margin-top: 4px; color: #8fa0ba; font-size: 11px; }
.detail-actions { position: fixed; right: 0; bottom: 0; width: min(760px,92vw); padding: 14px 22px max(14px, env(safe-area-inset-bottom)); background: rgba(8,16,31,.94); backdrop-filter: blur(18px); border-top: 1px solid rgba(255,255,255,.09); display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; transform: translateX(104%); transition: transform .24s ease; }
.detail-drawer.is-open .detail-actions { transform: translateX(0); }
.detail-actions a, .detail-actions button { min-height: 46px; border-radius: 13px; display: grid; place-items: center; text-decoration: none; font-size: 13px; font-weight: 700; cursor: pointer; }
.detail-secondary { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); color: #eef4ff; }
.detail-primary { background: linear-gradient(135deg,#8dd7ff,#b5a7ff); color: #07101d; border: 0; }
.asset-card, #assetsTable tr, .timeline-item, .project-card { cursor: pointer; }
#assetsTable tr:hover td { background: rgba(141,215,255,.025); }

.view-note, .view-intro { color: #8fa0ba; font-size: 12px; }
.view-intro { margin: -3px 0 18px; line-height: 1.7; }
.sheet-groups { display: grid; gap: 14px; }
.sheet-group { border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: rgba(17,28,49,.75); overflow: hidden; }
.sheet-group h3 { margin: 0; padding: 15px 17px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 14px; }
.sheet-group h3 span { color: #8fa0ba; font-size: 11px; margin-left: 5px; }
.sheet-group ul { margin: 0; padding: 0; list-style: none; }
.sheet-group li { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 13px 17px; border-top: 1px solid rgba(255,255,255,.06); }
.sheet-group li:first-child { border-top: 0; }
.sheet-main { min-width: 0; }
.sheet-main b { display: block; font-size: 13px; line-height: 1.5; }
.sheet-main small { display: block; margin-top: 4px; color: #8fa0ba; font-size: 10px; }
.sheet-actions { display: flex; gap: 7px; flex: 0 0 auto; }
.sheet-actions a, .sheet-actions button, .feedback-new { border: 1px solid rgba(141,215,255,.18); border-radius: 10px; background: rgba(141,215,255,.06); color: #8dd7ff; padding: 8px 10px; text-decoration: none; font-size: 11px; cursor: pointer; }
.feedback-status { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 11px; margin-bottom: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; color: #9aaac1; font-size: 11px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #8fa0ba; }
.status-dot.ok { background: #77e1a6; }
.status-dot.warn { background: #ffd77e; }
.feedback-list { display: grid; gap: 10px; }
.feedback-item { border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: rgba(17,28,49,.75); padding: 15px; }
.feedback-item-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.feedback-kind, .feedback-state { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.feedback-kind { color: #8dd7ff; background: rgba(141,215,255,.08); }
.feedback-state { color: #9aaac1; border: 1px solid rgba(255,255,255,.08); }
.feedback-state.applied { color: #77e1a6; }
.feedback-state.local_pending { color: #ffd77e; }
.feedback-item h3 { margin: 10px 0 7px; font-size: 13px; }
.feedback-item p { margin: 0; color: #c6d1e2; font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
.feedback-item small { display: block; color: #6f809a; margin-top: 9px; font-size: 10px; }
.global-feedback-button { position: fixed; right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 800; min-height: 44px; padding: 0 15px; border: 1px solid rgba(141,215,255,.26); border-radius: 999px; background: rgba(11,21,38,.92); backdrop-filter: blur(14px); color: #eef4ff; box-shadow: 0 12px 34px rgba(0,0,0,.28); cursor: pointer; }
body.feedback-open { overflow: hidden; }
.feedback-composer { position: fixed; inset: 0; z-index: 1200; pointer-events: none; visibility: hidden; }
.feedback-composer.is-open { pointer-events: auto; visibility: visible; }
.feedback-backdrop { position: absolute; inset: 0; background: rgba(2,8,18,.72); backdrop-filter: blur(8px); opacity: 0; transition: opacity .18s ease; }
.feedback-composer.is-open .feedback-backdrop { opacity: 1; }
.feedback-sheet { position: absolute; left: 50%; top: 50%; width: min(560px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow-y: auto; transform: translate(-50%, -47%) scale(.98); opacity: 0; transition: .18s ease; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: #0c1628; padding: 21px; box-shadow: 0 30px 90px rgba(0,0,0,.45); }
.feedback-composer.is-open .feedback-sheet { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.feedback-sheet header { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.feedback-sheet header p { margin: 0 0 4px; color: #8dd7ff; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.feedback-sheet header h2 { font-size: 23px; }
.feedback-sheet header button { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: rgba(255,255,255,.04); color: #eef4ff; font-size: 22px; cursor: pointer; }
.feedback-target { margin: 15px 0; padding: 11px 12px; border-radius: 12px; background: rgba(141,215,255,.06); color: #cfeaff; font-size: 12px; line-height: 1.5; }
.feedback-sheet label { display: grid; gap: 7px; margin-top: 13px; color: #a9b7cc; font-size: 11px; }
.feedback-sheet select, .feedback-sheet textarea { width: 100%; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.035); color: #eef4ff; padding: 11px 12px; outline: 0; font: inherit; }
.feedback-sheet textarea { resize: vertical; min-height: 132px; line-height: 1.6; }
.feedback-result { min-height: 20px; margin-top: 10px; color: #77e1a6; font-size: 11px; }
.feedback-submit { width: 100%; min-height: 47px; margin-top: 6px; border: 0; border-radius: 13px; background: linear-gradient(135deg,#8dd7ff,#b5a7ff); color: #07101d; font-weight: 800; cursor: pointer; }
.feedback-submit:disabled { opacity: .55; cursor: wait; }

@media (max-width: 720px) {
  .detail-sheet { width: 100vw; padding: 20px 17px 94px; border-left: 0; }
  .detail-actions { width: 100vw; padding-left: 14px; padding-right: 14px; }
  .detail-head { padding-right: 42px; }
  .detail-head h2 { font-size: 24px; }
  .detail-summary, .detail-focus, .detail-section { border-radius: 16px; padding: 16px; }
  .detail-summary p { font-size: 14px; }

  #assetsView .table-wrap { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  #assetsView table, #assetsView tbody, #assetsView tr, #assetsView td { display: block; width: 100%; }
  #assetsView thead { display: none; }
  #assetsView tbody { display: grid; gap: 10px; }
  #assetsView tr { padding: 15px 15px 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: rgba(17,28,49,.82); box-shadow: 0 14px 35px rgba(0,0,0,.15); }
  #assetsView td { border: 0; padding: 4px 0; font-size: 11px; color: #8fa0ba; }
  #assetsView td:first-child { width: 100%; color: #eef4ff; font-size: 14px; padding-bottom: 9px; }
  #assetsView td:nth-child(2)::before { content: "領域  "; color: #65758d; }
  #assetsView td:nth-child(3)::before { content: "種類  "; color: #65758d; }
  #assetsView td:nth-child(6)::before { content: "更新  "; color: #65758d; }
  #assetsView td:nth-child(4), #assetsView td:nth-child(5) { display: inline-block; width: auto; margin-right: 5px; }
  #assetsView td:last-child { padding-top: 10px; }
  #assetsView .row-link { display: inline-flex; min-height: 34px; align-items: center; padding: 0 11px; border: 1px solid rgba(141,215,255,.18); border-radius: 10px; background: rgba(141,215,255,.06); }
  .sheet-group li { align-items: flex-start; flex-direction: column; }
  .sheet-actions { width: 100%; }
  .sheet-actions a, .sheet-actions button { flex: 1; text-align: center; }
  .global-feedback-button { right: 13px; bottom: max(13px, env(safe-area-inset-bottom)); }
  .feedback-sheet { width: calc(100vw - 18px); border-radius: 18px; padding: 17px; }
}