:root {
  font-family: Inter, Segoe UI, Arial, sans-serif;
  color: #17212b;
  background: #f2f5f7;
  line-height: 1.45;
}
* { box-sizing: border-box; }
body { margin: 0; }
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: 1rem 2rem; background: #102b3f; color: white;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.brand { font-size: 1.35rem; font-weight: 760; }
.subtitle { opacity: .76; }
.session { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.portal-link { color: #dff4ff; font-weight: 700; }
main { max-width: 1500px; margin: 0 auto; padding: 1.4rem; }
.panel {
  background: white; border: 1px solid #d6e0e6; border-radius: 12px;
  padding: 1.2rem; box-shadow: 0 5px 18px rgba(16,43,63,.06);
}
.narrow { max-width: 480px; margin: 3rem auto; }
.notice {
  padding: .9rem 1rem; margin-bottom: 1rem; border-radius: 9px;
  background: #fff7df; border: 1px solid #e6c870; color: #5f480d;
}
.tabs { display: flex; gap: .55rem; flex-wrap: wrap; margin-bottom: .8rem; }
.tab { background: #dce7ed; color: #173247; }
.tab.active { background: #146f9f; color: white; }
.tab-panel { margin-bottom: 1rem; }
.panel-heading { display: flex; justify-content: space-between; gap: 1rem; }
.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
h1,h2,h3 { margin-top: 0; }
p { color: #566a77; }
label { display: block; font-weight: 650; margin-bottom: .85rem; }
input,select,textarea {
  display: block; width: 100%; margin-top: .35rem; padding: .7rem;
  border: 1px solid #b9c7d0; border-radius: 7px; font: inherit; background: white;
}
textarea,pre { font-family: Consolas, ui-monospace, monospace; }
input:focus,select:focus,textarea:focus {
  outline: 3px solid rgba(25,116,171,.16); border-color: #1974ab;
}
button {
  border: 0; border-radius: 7px; padding: .7rem 1rem;
  background: #156b9b; color: white; font-weight: 700; cursor: pointer;
}
button.secondary { background: #e4edf2; color: #173247; }
button.approve { background: #247a43; }
button.danger { background: #a93636; }
button:hover { filter: brightness(.95); }
.hidden { display: none !important; }
.hint { color: #627785; font-size: .9rem; }
.message { min-height: 1.4rem; margin-top: .7rem; white-space: pre-wrap; }
.message.error { color: #a12626; }
.message.success { color: #247a43; }
.work-item-list { display: grid; gap: .65rem; margin-top: .8rem; max-height: 700px; overflow: auto; }
.work-card {
  border: 1px solid #dbe4ea; border-left: 5px solid #6e8898;
  border-radius: 8px; padding: .85rem; cursor: pointer; background: #fbfcfd;
}
.work-card:hover { border-color: #82a6ba; }
.work-card strong { display:block; }
.meta { color:#637785; font-size:.86rem; margin-top:.3rem; }
.lifecycle-1 { border-left-color:#738592; }
.lifecycle-2 { border-left-color:#146fa4; }
.lifecycle-3 { border-left-color:#d58a17; }
.lifecycle-4 { border-left-color:#b23b3b; }
.lifecycle-5 { border-left-color:#875fbd; }
.lifecycle-6 { border-left-color:#26804a; }
.lifecycle-9 { border-left-color:#666; }
#details-panel { margin-top: 1rem; }
pre {
  white-space: pre-wrap; overflow-wrap:anywhere; max-height:520px; overflow:auto;
  background:#f5f7f9; border:1px solid #dce5eb; border-radius:8px; padding:.85rem;
}
.governance { display:grid; gap:.5rem; background:#f7f9fa; border-radius:8px; padding:.85rem; }
.governance-row { display:grid; grid-template-columns:145px 1fr; gap:.75rem; }
.actions { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1rem; }
@media (max-width: 900px) {
  .grid.two,.filters { grid-template-columns:1fr; }
  .topbar { padding:1rem; }
  main { padding:1rem; }
}