:root { --ink:#1A1D1F; --muted:#5B6168; --line:#D9DCD6; --bg:#F4F5F2; --brand:#E2692B; --blue:#1F4E79; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin:0; font-family: "IBM Plex Sans", system-ui, sans-serif; color:var(--ink); background:var(--bg); }
.shell { display:flex; min-height:100vh; }
.content { flex:1; padding:24px; width:100%; max-width:1320px; margin:0 auto; }
table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); margin-bottom:24px; }
th, td { text-align:left; padding:10px; border-top:1px solid var(--line); font-size:14px; }
th { background:#EEF0EC; font-size:12px; color:var(--muted); }
.card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:24px; }
.narrow { max-width:380px; margin:10vh auto; }
label { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); margin-bottom:12px; }
input { height:42px; border:1px solid #C7CBC4; border-radius:6px; padding:0 10px; font-size:15px; }
button.primary { height:44px; padding:0 18px; border:0; border-radius:6px; background:var(--blue); color:#fff; font-weight:600; cursor:pointer; }
button.link { background:none; border:0; color:var(--blue); padding:0; cursor:pointer; text-decoration:underline; }
.muted { color:var(--muted); }
.error { color:#8A3207; }
.notice { background:#FFF1E6; border:1px solid #F2C6A8; color:#8A3207; padding:10px 12px; border-radius:6px; }

/* --- reports ---------------------------------------------------------------- */
a { color: var(--blue); }
h1 { margin: 0 0 4px; font-size: 26px; }
h2 { font-size: 17px; margin: 0 0 10px; }
h3 { font-size: 15px; margin: 0 0 10px; }
.small { font-size: 12px; }
.crumbs { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.titlebar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions.end { justify-content: flex-end; margin: 16px 0 40px; }
.card { margin-bottom: 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 12px; font-size: 14px; }
.scroll { overflow-x: auto; }
.r { text-align: right; } .c { text-align: center; }
button, .button { height: 40px; padding: 0 14px; border: 1px solid #C7CBC4; border-radius: 6px; background: #fff; color: var(--ink);
  font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
button.primary { border-color: var(--blue); }
button.ok { background: #1E5E3A; border-color: #1E5E3A; color: #fff; font-weight: 600; }
button.dashed { border-style: dashed; }
button.link-danger { border: 0; background: none; color: #8A3207; text-decoration: underline; height: auto; padding: 0; }
textarea, select { border: 1px solid #C7CBC4; border-radius: 6px; padding: 8px 10px; font: inherit; font-size: 14px; background: #fff; }
select { height: 38px; padding: 0 6px; }
table.timelog { min-width: 1100px; margin: 0; }
table.timelog td, table.modtable td { padding: 4px 6px; }
table.timelog input, table.timelog select, table.modtable input { height: 36px; font-size: 13px; width: 100%; }
table.timelog input.t { width: 124px; } table.timelog select { max-width: 260px; }
table.timelog input.num, input.num { width: 90px; text-align: right; }
table.timelog input.desc { min-width: 260px; }
table.timelog input[type=checkbox] { width: 18px; height: 18px; }
table.modtable { margin: 0 0 8px; }
.tag { font-size: 10px; letter-spacing: .06em; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; }
.addmenu { position: relative; }
.addmenu summary { list-style: none; }
.addmenu .menu { position: absolute; right: 0; z-index: 5; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px; width: 300px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12); display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow: auto; }
.addmenu .menu p { margin: 8px 0 0; }
.badge { border-radius: 4px; padding: 3px 8px; font-size: 12px; font-weight: 600; background: #FFF1E6; color: #8A3207; }
.badge-approved { background: #E8F3EC; color: #1E5E3A; }
.badge-submitted { background: #EEF4FA; color: #163A5B; }
.warn { color: #8A3207; }
.msg { padding: 10px 12px; border-radius: 6px; background: #EEF4FA; border: 1px solid #A9C2DA; }
.msg-error { background: #FFF1E6; border-color: #F2C6A8; color: #8A3207; }
.msg-success { background: #E8F3EC; border-color: #A9CFB6; color: #1E5E3A; }
tr.npt td { background: #FFF6EF; }
dl.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; margin: 0 0 10px; }
dl.fields dt { font-size: 12px; color: var(--muted); } dl.fields dd { margin: 0; }
.pre { white-space: pre-wrap; }
.grow { flex: 1 1 240px; }
label textarea { width: 100%; }
@media print {
  .sidebar, .noprint, .msg { display: none !important; }
  body { background: #fff; } .content { padding: 0; } .card { border: 0; padding: 0 0 8px; }
}

/* --- layout v2 ----------------------------------------------------------------- */
.column { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabs a { padding: 10px 14px; text-decoration: none; color: #4A5056; border-bottom: 3px solid transparent; }
.tabs a[aria-current=page] { color: var(--ink); font-weight: 600; border-bottom-color: var(--brand); }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; }
.split3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.kpi span { font-size: 12px; color: var(--muted); } .kpi strong { font-size: 20px; } .kpi .smallstrong { font-size: 14px; font-weight: 500; }
.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; align-items: end; margin-bottom: 16px; }
.filters label { margin: 0; }
.chip { display: inline-block; padding: 2px 10px; margin: 2px 4px 2px 0; border-radius: 12px; background: #EEF4FA; border: 1px solid #A9C2DA; color: #163A5B; font-size: 13px; }
.steps { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: s; }
.steps li { counter-increment: s; flex: 1 1 200px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 14px; }
.steps li::before { content: counter(s); display: inline-flex; width: 22px; height: 22px; border-radius: 11px; background: #EEF0EC; align-items: center; justify-content: center; margin-right: 8px; font-size: 12px; font-weight: 700; }
.steps li.done { border-color: #A9CFB6; background: #F3F9F5; } .steps li.done::before { content: "✓"; background: #1E5E3A; color: #fff; }
.checks { list-style: none; padding: 0; } .checks li::before { content: "✓ "; color: #1E5E3A; font-weight: 700; } .checks li.bad::before { content: "! "; color: #8A3207; }
.ticket-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .ticket-layout { grid-template-columns: 1fr; } }
.side { display: flex; flex-direction: column; gap: 10px; }
.side details summary { list-style: none; } .side details form { margin-top: 8px; }
.wide { width: 100%; justify-content: center; } textarea.wide { width: 100%; box-sizing: border-box; }
.ticket-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.big { font-size: 18px; } .mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }
tr.total td { font-weight: 700; border-top: 2px solid var(--ink); }
.signs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
.signs div { border-top: 1px solid #8A9096; padding-top: 6px; font-size: 13px; color: #4A5056; }
.switch { gap: 8px; } .switch span { width: 36px; height: 20px; border-radius: 10px; background: #B9BEC2; position: relative; display: inline-block; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 7px; background: #fff; }
.switch.on span { background: #1E5E3A; } .switch.on span::after { left: 19px; }
.infobox { background: #EEF4FA; border: 1px solid #A9C2DA; border-radius: 6px; padding: 10px 14px; margin: 12px 0; font-size: 14px; }
.legend { display: inline-block; width: 22px; height: 0; border-top: 2px dashed #2F6FB0; margin: 0 4px 3px 0; vertical-align: middle; }
.legend.actual { border-top: 3px solid #D2591C; margin-left: 12px; }
.row.nomargin { margin: 0; } label.inline { flex-direction: row; align-items: center; margin: 0; }
.primary-link { border-color: var(--blue); color: var(--blue); font-weight: 600; }
button.link-like { border: 0; background: none; text-decoration: underline; color: var(--blue); }
button:disabled { opacity: .5; cursor: not-allowed; }
.modtable select { height: 36px; } .modtable input[type=checkbox] { width: 18px; height: 18px; }

.nowrap { white-space: nowrap; }
.split svg { max-height: 560px; }

/* --- sidebar and header (prototype) -------------------------------------------------- */
.sidebar { width: 64px; flex: 0 0 auto; background: #15181B; color: #E6E8EA; transition: width .15s ease; z-index: 10; }
.sidebar-in { position: sticky; top: 0; height: 100vh; padding: 14px 8px; display: flex; flex-direction: column; gap: 18px; overflow-x: hidden; overflow-y: auto; }
[data-nav=open] .sidebar { width: 248px; }
.sidebar .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sidebar nav .label { line-height: 1.25; padding: 4px 0; }
.who .label small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:not([data-nav=open]) .sidebar .label, html:not([data-nav=open]) .sidebar .count { display: none; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; color: #FFFFFF; text-decoration: none; font-weight: 700; font-size: 16px; }
.brand small, .who small { display: block; font-weight: 400; font-size: 11px; color: #8A9096; }
.logo { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 6px; background: var(--brand); color: #1A1D1F; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a, .navbtn { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 6px; color: #C9CDD1;
  text-decoration: none; font-size: 14px; background: none; border: 0; width: 100%; cursor: pointer; height: auto; }
.sidebar nav a svg, .navbtn svg { flex: 0 0 20px; }
.sidebar nav a:hover, .navbtn:hover { background: #22272B; color: #FFFFFF; }
.sidebar nav a[aria-current=page] { background: #2E3439; color: #FFFFFF; font-weight: 600; box-shadow: inset 3px 0 0 var(--brand); }
.sidebar nav a:focus-visible, .navbtn:focus-visible { outline: 2px solid #7FB3E8; outline-offset: -2px; }
.sidebar .count { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--brand); color: #1A1D1F;
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
html:not([data-nav=open]) .sidebar nav a { position: relative; }
html:not([data-nav=open]) .sidebar nav a:has(.count)::after { content: ""; position: absolute; top: 9px; left: 30px; width: 8px; height: 8px; border-radius: 4px; background: var(--brand); }
.me { margin-top: auto; border-top: 1px solid #2E3439; padding-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.who { display: flex; align-items: center; gap: 10px; padding: 4px 10px; font-size: 13px; color: #E6E8EA; }
.avatar { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 14px; background: #3A4046; color: #FFFFFF; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; }
.version { padding: 2px 12px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; color: #8A9096; }
.navbtn.toggle { color: #7FB3E8; }
.navbtn .chev { flex: 0 0 20px; text-align: center; font-size: 18px; }
.topbar { background: #1A1D1F; color: #FFFFFF; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; padding: 8px 24px; min-height: 56px; }
.topbar .search { display: flex; align-items: center; gap: 6px; flex: 1 1 420px; max-width: 600px; }
.topbar .search select, .topbar .lang select { height: 40px; border: 0; border-radius: 6px; padding: 0 8px; font-size: 13px; background: #3A4046; color: #FFFFFF; }
.topbar .search input { flex: 1 1 auto; min-width: 0; height: 40px; border: 0; border-radius: 6px; padding: 0 12px; font-size: 14px; }
.topbar .search button { height: 40px; border: 0; border-radius: 6px; padding: 0 14px; background: var(--brand); color: #1A1D1F; font-weight: 600; }
.topbar .lang { margin-left: auto; display: flex; align-items: center; gap: 6px; }
@media (max-width: 700px) {
  .content { padding: 16px; }
  .topbar { padding: 8px 16px; }
  .topbar .search select { display: none; }
}

/* --- home (prototype) ------------------------------------------------------------------ */
.home { display: flex; flex-direction: column; gap: 20px; }
.home h1 { font-size: 28px; font-weight: 600; margin: 0; }
.home-top { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.newproj { flex: 999 1 640px; min-width: 0; background: #FFFFFF; border: 1px solid var(--line); border-radius: 8px; padding: 20px;
  display: flex; flex-direction: column; gap: 16px; }
.newproj h2, .group h2 { margin: 0; font-size: 18px; font-weight: 600; }
.step-label { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; }
.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.cat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 14px 16px; min-height: 84px; height: auto;
  border-radius: 8px; border: 1px solid #C7CBC4; background: #FFFFFF; cursor: pointer; }
.cat strong { font-size: 16px; font-weight: 600; } .cat span { font-size: 13px; color: var(--muted); line-height: 1.4; }
.cat[aria-pressed=true] { border: 2px solid var(--blue); background: #EEF4FA; padding: 13px 15px; }
.svcs { display: flex; flex-wrap: wrap; gap: 8px; }
.svc { min-height: 40px; height: auto; padding: 0 14px; border-radius: 20px; border: 1px solid #C7CBC4; background: #FFFFFF; cursor: pointer; font-size: 14px; }
.svc[aria-pressed=true] { border: 2px solid var(--blue); background: #EEF4FA; color: #163A5B; font-weight: 600; padding: 0 13px; }
.newproj .details { display: flex; flex-direction: column; gap: 14px; }
.newproj .fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.newproj .fields label { margin: 0; font-size: 12px; font-weight: 500; }
.newproj .fields input, .newproj .fields select { height: 40px; width: 100%; color: var(--ink); font-size: 14px; }
.newproj .fields .span2 { grid-column: span 2; }
@media (max-width: 480px) { .newproj .fields .span2 { grid-column: auto; } }
.go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.go button { min-height: 48px; padding: 0 20px; border-radius: 6px; background: var(--blue); border: 0; color: #FFFFFF; font-weight: 600; font-size: 15px; }
.go span { font-size: 13px; color: var(--muted); }
.archive-card { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; background: #1A1D1F;
  color: #FFFFFF; border-radius: 8px; padding: 22px; text-decoration: none; }
.archive-card:hover { color: #FFFFFF; background: #22272B; }
.archive-card .head { display: flex; flex-direction: column; gap: 8px; }
.archive-card .title { font-size: 22px; font-weight: 600; }
.archive-card .text { font-size: 14px; color: #C9CDD1; line-height: 1.5; }
.archive-card .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: 12px; color: #C9CDD1; }
.archive-card .stats b { display: block; font-size: 22px; font-weight: 600; color: #FFFFFF; font-family: "IBM Plex Mono", ui-monospace, monospace; }
.archive-card .more { font-size: 14px; font-weight: 600; color: #F2A577; }
.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 20px; align-items: start; }
@media (max-width: 420px) { .groups { grid-template-columns: 1fr; } }
.group { background: #FFFFFF; border: 1px solid var(--line); border-radius: 8px; padding: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.group .head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.group h2 { font-size: 16px; }
.howmany { display: flex; gap: 2px; font-size: 12px; color: var(--muted); align-items: center; }
.howmany a { padding: 2px 6px; border-radius: 4px; text-decoration: none; color: var(--muted); }
.howmany a[aria-current=true] { background: #EEF0EC; color: var(--ink); font-weight: 600; }
.sfilter { display: flex; flex-wrap: wrap; gap: 6px; }
.sfilter a { min-height: 32px; padding: 0 10px; border-radius: 16px; border: 1px solid #C7CBC4; background: #FFFFFF; font-size: 12px; color: var(--ink);
  text-decoration: none; display: inline-flex; align-items: center; }
.sfilter a[aria-current=true] { border-color: var(--blue); background: var(--blue); color: #FFFFFF; font-weight: 600; }
.plist { list-style: none; margin: 0; padding: 0; max-height: 560px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.plist a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px; border: 1px solid #E3E5E0; border-radius: 6px;
  text-decoration: none; color: var(--ink); }
.plist a:hover { border-color: #A9C2DA; background: #F7FAFC; }
.plist .w { font-weight: 600; font-size: 14px; } .plist .w span { font-weight: 400; color: var(--muted); }
.plist .meta { font-size: 12px; color: var(--muted); font-family: "IBM Plex Mono", ui-monospace, monospace; }
.st { border-radius: 4px; padding: 2px 8px; font-size: 12px; font-weight: 600; white-space: nowrap; align-self: start; background: #EEF0EC; color: #4A5056; }
.st-active { background: #EEF4FA; color: #163A5B; } .st-pending { background: #FFF1E6; color: #8A3207; }
.plist .empty { color: var(--muted); font-size: 14px; padding: 8px 0; }
.waitbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #FFF1E6; border: 1px solid #F2C6A8;
  border-radius: 8px; padding: 12px 16px; color: #8A3207; }
.waitbar a { font-weight: 600; color: #8A3207; }

/* --- prototype look for all screens (v3) -------------------------------------------------- */
body { font-size: 15px; }
a:hover { color: #163A5B; }
.content { display: flex; flex-direction: column; gap: 20px; padding: 24px; max-width: 1280px; }
.content > * { margin-top: 0; margin-bottom: 0; }
.content > .msg + .msg { margin-top: -10px; }
h1 { font-size: 28px; font-weight: 600; margin: 0; }
h2 { font-size: 16px; font-weight: 600; margin: 0 0 14px; }
h3 { font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.card { border-radius: 8px; padding: 20px; margin-bottom: 0; }
.card > h2:last-child, .card > p:last-child, .card > :last-child { margin-bottom: 0; }
.muted { color: var(--muted); }
/* sub bar with crumbs and project tabs */
.subbar { background: #FFFFFF; border-bottom: 1px solid var(--line); }
.subbar-in { max-width: 1280px; margin: 0 auto; padding: 14px 24px 0; display: flex; flex-direction: column; gap: 6px; }
.subbar .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 0; }
.subbar .crumbs .here { color: var(--ink); font-weight: 600; text-decoration: none; }
.subbar .tabs { border-bottom: 0; margin: 0; }
.tabs a { font-size: 14px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; }
/* page heading */
.pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pagehead .meta, .meta { font-size: 13px; color: var(--muted); font-family: "IBM Plex Mono", ui-monospace, monospace; }
.pagehead h1 { margin-top: 4px; }
.titlebar { margin-bottom: 0; align-items: flex-end; }
/* section header with CORE / module tag */
.sechead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.sechead h2, .sechead h3 { margin: 0; }
.sechead .note { font-size: 13px; color: var(--muted); }
.sechead .end { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .06em; color: var(--muted); border: 1px solid var(--line);
  border-radius: 4px; padding: 2px 6px; margin-left: 0; }
/* tables */
table { border: 1px solid #E3E5E0; border-radius: 6px; border-collapse: separate; border-spacing: 0; margin-bottom: 0; font-size: 14px; }
th { background: #F4F5F2; font-size: 12px; font-weight: 600; color: var(--muted); border-top: 0; padding: 10px; }
td { border-top: 1px solid #E3E5E0; padding: 10px; vertical-align: top; }
thead + tbody tr:first-child td { border-top: 1px solid #E3E5E0; }
th:first-child { border-top-left-radius: 6px; } th:last-child { border-top-right-radius: 6px; }
td.mono, .mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; }
.scroll > table { min-width: 720px; }
/* buttons and inputs */
button, .button { height: 44px; padding: 0 16px; font-weight: 500; }
button.primary, .button.primary { background: var(--blue); border-color: var(--blue); color: #FFFFFF; font-weight: 600; }
button.primary:hover, .button.primary:hover { background: #163A5B; color: #FFFFFF; }
button.ok, .button.ok { background: #1E5E3A; border-color: #1E5E3A; color: #FFFFFF; font-weight: 600; }
button.okline { border-color: #1E5E3A; color: #1E5E3A; font-weight: 600; background: #FFFFFF; }
button.ai, .button.ai { background: #B4430B; border-color: #B4430B; color: #FFFFFF; font-weight: 600; gap: 8px; }
button.small, .button.small { height: 36px; padding: 0 10px; font-size: 13px; }
button.dashed { border-style: dashed; }
input, select, textarea { font: inherit; color: var(--ink); }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select { height: 40px; font-size: 14px; }
label { font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 0; }
.grid { gap: 12px; }
/* KPIs */
.kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 0; }
.kpi { padding: 16px; gap: 4px; }
.kpi span { font-size: 12px; font-weight: 500; color: var(--muted); }
.kpi strong { font-size: 30px; font-weight: 600; font-family: "IBM Plex Mono", ui-monospace, monospace; line-height: 1.15; }
.kpi strong small { font-size: 14px; color: var(--muted); font-weight: 400; }
.kpi .smallstrong { font-family: inherit; font-size: 15px; }
/* status chips */
.badge { border-radius: 4px; padding: 2px 8px; font-size: 12px; font-weight: 600; white-space: nowrap; display: inline-block; }
.badge-draft { background: #EEF0EC; color: #4A5056; }
.badge-returned { background: #FFF1E6; color: #8A3207; }
.notice { margin: 0; font-size: 14px; padding: 10px 14px; }
.msg { margin: 0; }
/* two columns that wrap */
.cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.cols > .maincol { flex: 999 1 600px; min-width: 0; }
.cols > .narrow-col { flex: 1 1 360px; min-width: 0; }
.cols > .half { flex: 1 1 420px; min-width: 0; }
/* bars: hours by activity */
.bars { display: flex; flex-direction: column; gap: 8px; }
.bars .bar { display: grid; grid-template-columns: 160px minmax(0, 1fr) 52px; align-items: center; gap: 10px; font-size: 13px; }
.bars .bar > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bars .track { height: 14px; background: #EEF0EC; border-radius: 3px; display: block; }
.bars .fill { display: block; height: 14px; border-radius: 3px; background: var(--blue); }
.bars .fill.npt { background: var(--brand); }
.bars .bar > span:last-child { text-align: right; font-family: "IBM Plex Mono", ui-monospace, monospace; }
.keys { display: flex; gap: 16px; margin-top: 14px; font-size: 12px; color: var(--muted); }
.keys i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; background: var(--blue); margin-right: 6px; vertical-align: -1px; }
.keys i.npt { background: var(--brand); }
/* approval steps (report) */
.approval { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding: 16px 20px; }
.approval ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.approval li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.approval li b { width: 26px; height: 26px; border-radius: 13px; border: 1px solid #C7CBC4; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; background: #FFFFFF; color: var(--muted); }
.approval li.done b { background: #1E5E3A; border-color: #1E5E3A; color: #FFFFFF; }
.approval li.now { color: var(--ink); font-weight: 600; }
.approval li.now b { background: var(--blue); border-color: var(--blue); color: #FFFFFF; }
.approval li.arrow { color: #8A9096; }
.approval .text { font-size: 13px; color: #4A5056; line-height: 1.45; flex: 1 1 260px; }
.approval .actions { gap: 8px; }
.reportnav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 13px; font-family: "IBM Plex Mono", ui-monospace, monospace; color: var(--muted); }
.reportnav a { text-decoration: none; font-weight: 600; }
.reportnav .off { color: #B9BEC2; }
/* tags block in time log */
.tagbox { margin-top: 16px; border-top: 1px solid #E3E5E0; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.tagbox .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tagbox .chip { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.tagbox .chip span { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; color: #4A5056; }
.suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: #FFF6EF; border: 1px solid #F2C6A8; border-radius: 6px;
  padding: 8px 12px; font-size: 13px; color: #8A3207; }
.suggest form { display: inline; }
/* textareas side by side */
.twotext { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.twotext textarea { width: 100%; min-height: 150px; }
.files { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.files li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border: 1px solid #E3E5E0; border-radius: 6px; padding: 8px 12px; font-size: 14px; }
.files li .small { margin-left: auto; }
/* final report article */
.finalbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 20px; background: #FFF6EF; border-bottom: 1px solid #F2C6A8; }
.finalbar .flag { background: #B4430B; color: #FFFFFF; border-radius: 4px; padding: 3px 8px; font-size: 12px; font-weight: 600; }
.finalbar.ok { background: #F3F9F5; border-bottom-color: #A9CFB6; } .finalbar.ok .flag { background: #1E5E3A; }
.finalbar .text { font-size: 13px; color: #8A3207; } .finalbar.ok .text { color: #1E5E3A; }
.finalbar .end { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.finalbar button, .finalbar .button { height: 40px; }
.card.flush { padding: 0; overflow: hidden; }
article.final { padding: 28px 32px; max-width: 860px; line-height: 1.6; font-size: 15px; }
article.final textarea { width: 100%; min-height: 420px; line-height: 1.5; }
@media (max-width: 700px) { article.final { padding: 20px 16px; } .bars .bar { grid-template-columns: 110px minmax(0, 1fr) 46px; } }
.stack { display: flex; flex-direction: column; gap: 20px; }
.nomargin { margin: 0 !important; }
.grid .span2 { grid-column: span 2; }
@media (max-width: 480px) { .grid .span2 { grid-column: auto; } }
.iconbtn { width: 40px; height: 40px; padding: 0; justify-content: center; border-color: transparent; background: none; color: #8A3207; }
.iconbtn:hover { border-color: #F2C6A8; background: #FFF6EF; }
.addrow { margin-top: 10px; }
.actions.end { margin: 0; }
.sechead .addmenu.end { margin-left: auto; }
.row { margin-top: 12px; }
.files li.muted { border-style: dashed; }
.printonly { display: none; }
@media print {
  .subbar, .topbar, .approval { display: none !important; }
  .printonly { display: block; }
  .content { gap: 12px; max-width: none; }
  table { min-width: 0 !important; }
}
dl.fields dd { font-size: 14px; }
.approval form.actions input { width: 220px; }
.stack.tight { gap: 6px; align-items: flex-start; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip { margin: 0; }
.half.stack { align-self: stretch; }
.half .scroll > table, .narrow-col .scroll > table { min-width: 0; }
.cols svg { max-height: 560px; display: block; margin: 0 auto; }
.pill { min-height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid #C7CBC4; background: #FFFFFF; font-size: 13px; color: var(--ink);
  text-decoration: none; display: inline-flex; align-items: center; }
.pill:hover { border-color: var(--blue); color: var(--blue); }
.entities { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.entities a { display: flex; flex-direction: column; gap: 2px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px;
  text-decoration: none; color: var(--ink); }
.entities a:hover { border-color: #A9C2DA; }
.entities .kind { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.entities .name { font-weight: 600; } .entities .detail { font-size: 13px; color: var(--muted); }
.filters { margin-bottom: 0; }
.filters .actions { align-self: end; }
h2.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.genbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 16px; }
.formpick label { font-size: 14px; color: var(--ink); font-weight: 400; gap: 4px; }
.formpick select { max-width: 340px; margin-top: 4px; }
details.shorter summary { cursor: pointer; color: var(--blue); }
.checks li { margin-bottom: 6px; font-size: 14px; }
.steps li { font-size: 14px; }
.statebox { display: flex; flex-direction: column; gap: 4px; border-radius: 6px; padding: 10px 12px; background: #FFF1E6; border: 1px solid #F2C6A8; font-size: 13px; color: #8A3207; }
.statebox strong { font-size: 14px; }
.statebox.ok { background: #F3F9F5; border-color: #A9CFB6; color: #1E5E3A; }
.side .eyebrow { margin: 0; }
.side .button, .side button { width: 100%; justify-content: center; }
.side .switch { justify-content: flex-start; }
.ticket-layout { gap: 20px; }
.subbar h1.subtitle { font-size: 24px; margin: 0; }
.clist { display: flex; flex-direction: column; gap: 8px; }
.clist h2 { margin-bottom: 4px; }
.clist > a:not(.button) { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid #E3E5E0; border-radius: 6px; text-decoration: none; color: var(--ink); }
.clist > a:not(.button):hover { border-color: #A9C2DA; }
.clist > a[aria-current=true] { border: 2px solid var(--blue); background: #EEF4FA; padding: 11px; }
.clist .top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.clist .name { font-weight: 600; font-size: 14px; }
.clist .newbtn { justify-content: center; margin-top: 6px; border-style: dashed; }
.tlist { display: flex; flex-direction: column; gap: 4px; }
.tlist h2.eyebrow { margin: 10px 0 4px; } .tlist h2.eyebrow:first-child { margin-top: 0; }
.tlist a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 6px; text-decoration: none; color: var(--ink); font-size: 14px; }
.tlist a:hover { background: #F4F5F2; }
.tlist a[aria-current=true] { background: #EEF4FA; box-shadow: inset 3px 0 0 var(--blue); font-weight: 600; }
h3.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.chip.core { background: #F4F5F2; border-color: #D9DCD6; color: var(--ink); }
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 16px; font-size: 14px; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; padding: 0; accent-color: var(--blue); }
label:has(> input[type=checkbox]) { align-items: flex-start; }
.login { width: 100%; max-width: 400px; margin: 10vh auto 0; display: flex; flex-direction: column; gap: 20px; }
.login-brand { display: flex; align-items: center; gap: 12px; font-size: 20px; }
.login-brand small { display: block; font-size: 12px; color: var(--muted); }
.login .card { gap: 14px; }
.twotext { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.split { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }
.split3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.groups { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
input[type=file] { max-width: 100%; min-width: 0; }
.topbar .search { min-width: 0; }
@media (max-width: 700px) {
  .topbar .search { flex: 1 1 100%; max-width: 100%; }
  .topbar .lang { margin-left: 0; }
  .cols > .half, .cols > .maincol, .cols > .narrow-col { flex-basis: 100%; }
  .reportnav { font-size: 12px; }
}
@media (max-width: 900px) { .ticket-layout { grid-template-columns: minmax(0, 1fr); } }
.ticket .scroll > table { min-width: 640px; }
@media (max-width: 700px) { .ticket-head, .ticket-head .r { flex-direction: column; text-align: left; } }
table.timelog td, table.modtable td { vertical-align: middle; }
.kpis-small { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.kpis-small .kpi { padding: 10px 14px; gap: 2px; }
.kpis-small .kpi strong { font-size: 20px; }
.kpi em { font-style: normal; font-size: 11px; color: var(--muted); }
.kpi strong.warn { color: #8A3207; } .kpi strong.okc { color: #1E5E3A; }
.tdchart svg { max-height: 280px; display: block; }
details.revise { flex-basis: 100%; display: flex; flex-direction: column; gap: 10px; }
details.revise[open] summary { margin-bottom: 10px; }
details.revise summary { list-style: none; width: max-content; }
.demobar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 6px 24px; background: #FFF1E6;
  border-bottom: 1px solid #F2C6A8; color: #8A3207; font-size: 13px; }
.demoswitch label { flex-direction: row; align-items: center; gap: 8px; color: #8A3207; font-size: 13px; }
.demoswitch select { height: 32px; font-size: 13px; }
.demo-start { width: 100%; max-width: 640px; margin: 6vh auto 0; display: flex; flex-direction: column; gap: 20px; }
.rolepick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.role { flex-direction: row; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid #C7CBC4; border-radius: 8px; cursor: pointer; color: var(--ink); font-size: 14px; }
.role:has(input:checked) { border: 2px solid var(--blue); background: #EEF4FA; padding: 11px 13px; }
.role input { margin-top: 2px; }
.role small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 2px; }
.demo-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; font-size: 14px; }
@media (max-width: 700px) { .demobar { padding: 6px 16px; } }