*{
  box-sizing:border-box}
 :root{
  --ink:#182a2d;
  --muted:#65797d;
  --green:#12685a;
  --line:#e1e9e7;
  --paper:#f5f7f6}
body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font:15px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif}
a{
  color:var(--green);
  text-decoration:none}
a:hover{
  text-decoration:underline}
button,input,select,textarea{
  font:inherit}
button,a,input,select,textarea{
  outline-offset:4px}
button{
  cursor:pointer}
h1,h2,h3,p{
  margin-top:0}
h1{
  font-size:34px;
  letter-spacing:-1.15px;
  line-height:1.25;
  margin-bottom:14px}
h2{
  font-size:20px;
  letter-spacing:-.4px;
  margin-bottom:12px}
h3{
  font-size:16px}
small{
  display:block;
  color:var(--muted);
  font-size:12px}
strong{
  font-weight:650}
.muted,.hint{
  color:var(--muted)}
.hint{
  font-size:13px;
  margin-top:18px}
.eyebrow{
  font-size:11px;
  letter-spacing:1.8px;
  font-weight:700;
  color:var(--green);
  margin-bottom:12px}
.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:238px;
  background:#102e2b;
  color:#dbe8e4;
  padding:32px 22px;
  display:flex;
  flex-direction:column}
.brand{
  color:#fff;
  font-size:34px;
  font-weight:800;
  letter-spacing:-1px;
  line-height:1.1}
.brand span{
  display:block;
  font-size:10px;
  letter-spacing:3.5px;
  margin-top:10px}
.workspace{
  font-size:9px;
  letter-spacing:1.6px;
  color:#95afa7;
  margin:48px 12px 15px}
nav a{
  color:#b8ccc6;
  display:flex;
  gap:13px;
  align-items:center;
  padding:13px 14px;
  border-radius:8px;
  margin-bottom:5px}
nav a:hover,nav a[aria-current=page]{
  background:#21443d;
  color:white;
  text-decoration:none}
.sidebar-bottom{
  margin-top:auto;
  padding:20px 12px 0;
  border-top:1px solid #315047;
  font-size:13px}
.sidebar-bottom a{
  display:block;
  color:#b5cfc6}
.avatar{
  float:left;
  margin-right:10px;
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#c5dcd1;
  color:#183a2f}
.logout{
  background:none;
  border:0;
  color:#b5cfc6;
  padding:8px 0}
.shell{
  margin-left:238px}
header{
  height:74px;
  background:#fff;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 40px;
  font-size:13px}
.private{
  font-size:11px;
  color:var(--green)}
main{
  max-width:1440px;
  margin:auto;
  padding:40px}
footer{
  padding:20px 40px;
  color:var(--muted);
  font-size:12px}
.page-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px}
.page-heading p{
  margin-bottom:0}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--green);
  color:white;
  border:1px solid var(--green);
  border-radius:8px;
  padding:11px 19px;
  font-weight:600;
  font-size:14px;
  min-height:44px;
  white-space:nowrap}
.button:hover{
  background:#0a5145;
  text-decoration:none}
.button.secondary{
  background:#fff;
  color:var(--green);
  border-color:#c8d9d1}
.button.small{
  padding:5px 12px;
  font-size:12px;
  min-height:34px}
.full{
  width:100%}
.metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-bottom:24px}
.metrics.two{
  grid-template-columns:repeat(2,minmax(0,1fr))}
.metric{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:22px}
.metric>span{
  font-size:13px;
  color:var(--muted)}
.metric>strong{
  font-size:32px;
  display:block;
  margin:10px 0 4px;
  letter-spacing:-1px}
.finance-strip{
  background:#e9f0eb;
  border:1px solid #d8e4dc;
  border-radius:12px;
  display:flex;
  gap:48px;
  padding:22px 28px;
  margin-bottom:28px}
.finance-strip span{
  font-size:12px;
  color:var(--muted);
  display:block}
.finance-strip strong{
  font-size:22px}
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:26px;
  min-width:0}
.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px}
.section-heading p{
  font-size:13px}
.section-heading>a{
  font-size:13px;
  white-space:nowrap}
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px}
.below{
  margin-top:24px}
.above{
  margin-top:20px}
.badge{
  display:inline-block;
  color:#175e46;
  background:#e4f1e9;
  font-size:11px;
  font-weight:650;
  border-radius:6px;
  padding:5px 9px;
  white-space:nowrap}
.badge.neutral,.badge.new,.badge.pending{
  background:#eff2f4;
  color:#5d6a77}
.badge.working,.badge.running{
  background:#e8eff9;
  color:#315d98}
.badge.review,.badge.retry{
  background:#fff2db;
  color:#825919}
.badge.error,.badge.cancelled{
  background:#fbe8e7;
  color:#aa3631}
.danger{
  color:#b63d36!important}
.table-scroll{
  overflow-x:auto}
table{
  border-collapse:collapse;
  width:100%;
  font-size:13px;
  text-align:left}
th{
  color:var(--muted);
  font-size:11px;
  font-weight:600;
  border-bottom:1px solid var(--line);
  padding:13px 12px;
  background:#fafbf9;
  white-space:nowrap}
td{
  padding:17px 12px;
  border-bottom:1px solid #eef1ef;
  vertical-align:middle}
tr:last-child td{
  border-bottom:0}
.case-link{
  font-weight:650;
  color:var(--ink)}
.empty{
  text-align:center;
  padding:45px 24px;
  color:var(--muted)}
.empty h3{
  color:var(--ink);
  margin:14px 0 8px}
.empty p{
  font-size:13px;
  max-width:430px;
  margin:0 auto 22px}
.empty-icon{
  display:inline-grid;
  place-items:center;
  width:55px;
  height:55px;
  border-radius:14px;
  background:#edf3ee;
  color:#5a8770;
  font-size:28px}
.workflow{
  padding:16px 0;
  color:var(--green);
  font-size:14px}
.filters{
  display:flex;
  align-items:end;
  gap:16px;
  margin-bottom:24px}
.search-label{
  flex:1}
.filters label>span{
  font-size:12px;
  display:block;
  margin-bottom:7px}
input:not([type=checkbox]),select,textarea{
  width:100%;
  border:1px solid #cddad4;
  border-radius:7px;
  padding:10px 12px;
  background:#fff;
  color:var(--ink);
  min-height:44px}
input[type=checkbox]{
  width:18px;
  height:18px;
  vertical-align:middle}
label{
  display:block;
  font-size:13px;
  margin-bottom:7px;
  font-weight:550}
form p{
  margin-bottom:18px}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px}
.wide{
  grid-column:1/-1}
.form-actions{
  border-top:1px solid var(--line);
  margin-top:28px;
  padding-top:24px;
  display:flex;
  align-items:center;
  gap:24px}
.form-card{
  max-width:1000px}
.errorlist{
  color:#a92924;
  font-size:13px;
  padding-left:20px}
.helptext{
  font-size:12px;
  color:var(--muted)}
.helptext ul{
  padding-left:18px}
.message{
  padding:14px 18px;
  border-radius:8px;
  background:#e4f1e9;
  border:1px solid #bddbc8;
  margin-bottom:20px}
.message.error{
  background:#fff0ec;
  border-color:#e3bcb1}
.notice{
  background:#f4f5ed;
  border:1px solid #e4e5d6;
  padding:16px;
  border-radius:8px;
  font-size:13px}
code{
  font-size:12px;
  overflow-wrap:anywhere}
dl{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:13px;
  font-size:14px}
dt{
  color:var(--muted)}
dd{
  margin:0;
  overflow-wrap:anywhere}
.preserve{
  white-space:pre-wrap}
.money-list{
  border-top:1px solid var(--line);
  margin-top:24px;
  padding-top:15px}
.money-list>div{
  display:flex;
  justify-content:space-between;
  padding:7px 0}
.document-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  overflow-wrap:anywhere}
.document-row>a{
  white-space:nowrap;
  font-size:13px}
.upload-form{
  margin-top:22px;
  background:#f6f8f6;
  padding:20px;
  border-radius:8px}
.upload-form p{
  max-width:550px}
.event{
  display:flex;
  gap:14px;
  padding:13px 0;
  font-size:13px}
.event-dot{
  height:9px;
  width:9px;
  background:#89b099;
  border-radius:50%;
  margin-top:7px}
.pagination{
  display:flex;
  justify-content:center;
  gap:25px;
  font-size:13px;
  padding-top:24px}
.public{
  margin-left:0}
.public main{
  min-height:calc(100vh - 60px);
  display:grid;
  align-items:center}
.auth-layout{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:90px;
  max-width:1020px;
  margin:30px auto;
  align-items:center}
.auth-intro h1{
  font-size:64px;
  letter-spacing:-3px;
  line-height:1.12}
.auth-intro p{
  color:var(--muted);
  max-width:390px;
  font-size:17px;
  margin:25px 0 35px}
.intro-line{
  padding:15px 0;
  border-top:1px solid var(--line);
  font-size:14px}
.auth-card{
  padding:36px;
  max-width:480px;
  width:100%;
  box-shadow:0 12px 50px #123c2810}
.standalone{
  margin:20px auto}
.auth-card h1{
  font-size:28px}
.auth-card h2{
  font-size:26px}
.skip{
  position:absolute;
  top:-100px;
  left:16px;
  background:#fff;
  padding:10px;
  z-index:99}
.skip:focus{
  top:10px}
@media(min-width:1600px){
  main{
  padding:48px}
}
@media(max-width:1100px){
  .sidebar{
  width:208px;
  padding:26px 14px}
.shell{
  margin-left:208px}
.public{
  margin-left:0}
main{
  padding:28px}
.metrics{
  gap:12px}
.metric{
  padding:18px}
.metric>strong{
  font-size:27px}
.auth-layout{
  gap:45px}
.auth-intro h1{
  font-size:50px}
}
@media(max-width:800px){
  .sidebar{
  position:static;
  width:100%;
  padding:18px 20px}
.brand{
  font-size:24px}
.brand span{
  display:inline;
  font-size:9px;
  margin-left:12px}
.workspace,.sidebar-bottom{
  display:none}
nav{
  display:flex;
  overflow-x:auto;
  gap:5px;
  margin-top:18px}
nav a{
  white-space:nowrap;
  padding:9px 12px;
  font-size:12px;
  margin:0;
  gap:6px}
.shell{
  margin:0}
header{
  height:52px;
  padding:0 20px;
  font-size:11px}
.private{
  display:none}
main{
  padding:24px 18px}
.page-heading{
  align-items:flex-start;
  flex-direction:column;
  gap:16px}
h1{
  font-size:28px}
.metrics{
  grid-template-columns:1fr 1fr}
.two-col{
  grid-template-columns:1fr;
  gap:18px}
.finance-strip{
  gap:20px;
  padding:18px;
  flex-wrap:wrap}
.finance-strip strong{
  font-size:19px}
.card{
  padding:20px}
.auth-layout{
  grid-template-columns:1fr;
  gap:30px}
.auth-intro{
  padding:10px}
.auth-intro h1{
  font-size:42px}
.intro-line{
  display:none}
.auth-intro p{
  margin:15px 0}
.auth-card{
  padding:26px;
  max-width:none}
.form-grid{
  grid-template-columns:1fr}
.filters{
  flex-wrap:wrap}
.search-label{
  min-width:100%}
.section-heading{
  align-items:flex-start}
.metrics.two{
  grid-template-columns:1fr}
.document-row{
  align-items:flex-start}
.public main{
  display:block}
.public .standalone{
  max-width:480px}
footer{
  padding:20px;
  font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  *{
  scroll-behavior:auto!important}
}
.workspace-modules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:24px}
.workspace-modules a{display:flex;flex-direction:column;gap:8px;color:inherit;text-decoration:none;padding:20px}
.workspace-modules a:hover,.order-card:hover{border-color:#287a73}
.workspace-modules strong{font-size:17px}.workspace-modules span{font-size:13px;color:#64748b}
.order-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.order-column{min-width:0;background:#edf2f5;border-radius:14px;padding:16px}.order-column h2{font-size:16px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.order-card{display:flex;flex-direction:column;gap:7px;margin-top:12px;padding:16px;background:white;border:1px solid #dbe3e9;border-radius:10px;text-decoration:none;color:inherit;overflow-wrap:anywhere}
.order-card small,.order-card time{font-size:12px}.order-card span{font-size:13px}
@media(max-width:1000px){.workspace-modules,.order-board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.workspace-modules,.order-board{grid-template-columns:1fr}.filters input:not([type=checkbox]){max-width:100%;min-width:0}}
/* Desktop workbench follows templates/customers/table_block.html: customer,
   timeline/language, document actions and payment details on the same row. */
.workbench-heading h1{font-size:28px}.workbench-actions{display:flex;gap:8px;flex-wrap:wrap}
.workbench-filter{display:flex;gap:12px;align-items:end;flex-wrap:wrap;background:white;border:1px solid #dbe3e9;padding:16px;border-radius:10px;margin-bottom:12px}
.workbench-filter label{flex:1;min-width:170px;font-size:12px}.workbench-filter label:first-child{flex:2}.workbench-filter input,.workbench-filter select{margin-top:6px}.workbench-filter .workbench-mine{display:flex;align-items:center;gap:7px;flex:0 1 150px;min-width:130px}.workbench-mine input{width:auto}
.workbench-toolbar{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end;font-size:13px;margin:12px 0}.workbench-toolbar span{margin-right:auto;color:#64748b}
.workbench-table{border:1px solid #dbe3e9;border-radius:10px;background:white}.workbench-table table{min-width:860px}.workbench-table th{background:#0b3d91;color:white;font-size:12px}.workbench-table td{padding:14px;vertical-align:top;width:25%;border-right:1px solid #e5e7eb}.workbench-table p{margin:8px 0}.workbench-table small{display:block;margin:5px 0;font-size:12px}.workbench-table details{font-size:12px;margin-top:10px}.workbench-table .workbench-overdue{background:#fff7ed}
.workbench-stage{font-size:13px;font-weight:650;color:#0b3d91}.workbench-row-actions{display:flex;flex-direction:column;gap:8px;margin-top:12px}.workbench-money{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;font-size:12px}.workbench-money span{display:flex;justify-content:space-between;gap:14px}
@media(max-width:650px){.workbench-filter label,.workbench-filter label:first-child{flex:1 1 100%;min-width:0}.workbench-table table{min-width:760px}.workbench-actions .button{font-size:12px}}