:root{--paper:#f4f6f8;--muted:#526372;--accent:#a34429;--line:#dce2e7}
.topbar{height:58px;padding:0 16px}
.brand,.brand-note{letter-spacing:0}
.brand{font-size:20px;gap:10px}
.brand-icon{border-radius:6px;width:32px;height:32px;font-size:18px}
main{max-width:none;margin:0;padding:16px 16px 0}
.intro{flex-direction:row;align-items:center;gap:12px;margin-bottom:16px}
.intro h1{font-size:22px;line-height:1.4;letter-spacing:0;margin:0}
.intro>.button{width:auto;flex-shrink:0}
.workspace{grid-template-columns:340px minmax(0,1fr);gap:24px}
.panel,dialog,.busy-card{border-radius:8px}
.tab-content{padding:18px}
.section-title{margin-bottom:14px}
.button,.button.small,.text-button,.person-link,.icon-button{min-height:44px}
.icon-button{width:44px;display:grid;place-items:center}
.text-button{color:#526372}
.button.primary .ui-icon{filter:brightness(0) invert(1)}
.file-button:focus-within,.dropzone:focus-within{outline:2px solid #176b57;outline-offset:3px}
.file-row{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px 0;margin-top:12px;flex-wrap:wrap}
.notice,.naming-example{background:none;border-radius:0;padding:0}
label:focus-within{outline:none}
label.file-button:has(input:disabled){opacity:.5;cursor:not-allowed}
input:not([type=file]),textarea,select{font-size:14px;min-height:44px}
.helper,.file-row small,.section-title span,.export-note,.preview-warnings,.report,.roster-summary{font-size:12px}
label small{font-size:12px}
dialog{box-shadow:0 15px 40px rgba(0,0,0,.18)}
.preview-heading{margin:0 0 12px;min-height:44px;align-items:center}
.preview-heading h2{margin:0;font-size:18px;overflow-wrap:anywhere}
.preview-badge{color:#526372;border-radius:4px;font-size:12px;flex-shrink:0}
.preview-stage{background:#e8edeb;background-image:none;border:0;border-radius:8px;padding:16px 24px 24px}
.card-caption{color:#52685e;letter-spacing:0;font-size:12px}
.card-caption span:first-child{color:#354f44}
.preview-warnings{color:#8c481b}
.roster{margin-top:24px;border-top:1px solid var(--line);border-radius:0}
.roster-heading{padding:14px 0 8px;flex-direction:row;align-items:center}
.roster-summary{padding:0 0 12px}
.roster-summary>span:first-child{color:#285c46}
.table-scroll{background:#fff}
th{font-size:12px}
.person-sub{font-size:12px}
.status{color:#80603a}
.status.ok{color:#24634b}
.demo-tag{color:#705426;font-size:11px}
footer{color:#526372;font-size:12px}
.notice{color:#705d31}
.dropzone small,.dropzone>span:not(.upload-icon){font-size:12px}
.required{color:#a34429}
dialog::backdrop{backdrop-filter:none}
@media(max-width:1000px) and (min-width:801px){.workspace{grid-template-columns:310px minmax(0,1fr);gap:20px}.preview-stage{padding:16px}}
@media(max-width:800px){
  .topbar{height:54px;padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left))}
  .mobile-nav{top:54px;padding-left:8px;padding-right:8px}
  main{padding:12px max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left))}
  .intro{flex-direction:row;align-items:center;margin-bottom:12px}
  .intro h1{font-size:20px;margin:0}
  .intro>.button{font-size:13px;padding:8px 10px}
  .workspace{display:flex;gap:20px}
  .tab-content{padding:16px}
  input:not([type=file]),textarea,select{font-size:16px}
  .preview-stage{padding:12px;gap:16px}
  .roster-heading{padding:12px 0 8px;flex-wrap:wrap;gap:4px 12px}
  .roster-actions{display:flex;width:auto}
  .roster-summary{padding:0 0 12px}
  #peopleRows tr{padding:8px 12px}
}