:root{--gold:#d4af37;--gold2:#f6e27a;--ink:#111827;--muted:#6b7280;--line:#e5e7eb;--blue:#2563eb;--green:#16a34a;--danger:#dc2626;--purple:#7c3aed;--shadow:0 18px 45px rgba(0,0,0,.08)}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top left,rgba(212,175,55,.16),transparent 30%),linear-gradient(135deg,#fafafa,#ececec);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink)}.app{max-width:1760px;margin:auto;padding:20px}
.header{background:white;border:1px solid #eee;border-radius:24px;box-shadow:var(--shadow);padding:16px 18px;display:flex;justify-content:space-between;gap:16px;align-items:center}.brand{display:flex;gap:14px;align-items:center}.brand img{width:145px}.brand h1{margin:0;font-size:20px}.brand p,.sub,.muted{color:var(--muted);font-size:12px}
.actions{display:flex;gap:8px;flex-wrap:wrap}.btn,button{border:0;border-radius:13px;padding:10px 13px;background:#111;color:white;font-size:12px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;gap:7px;align-items:center}.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#111}.btn-light{background:#f3f4f6;color:#111;border:1px solid var(--line)}.btn-danger{background:var(--danger)}.btn-green{background:var(--green)}.btn-blue{background:var(--blue)}.btn-purple{background:var(--purple)}.btn-small{font-size:11px;padding:7px 9px}
.card,.dynamic-box{background:white;border:1px solid #eee;border-radius:22px;padding:16px;box-shadow:var(--shadow);margin-top:14px}.dynamic-box{box-shadow:none;background:#fbfbfb}.card h2{margin:0 0 8px;font-size:17px}.section-title{font-size:12px;font-weight:900;margin-bottom:10px}
.row-2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.row-5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.field{margin-bottom:10px}.field label{display:block;margin-bottom:5px;color:var(--muted);font-size:11px;font-weight:900}input,select,textarea{width:100%;border:1px solid #ddd;border-radius:12px;padding:10px 11px;font-size:13px;background:white;outline:none}textarea{min-height:84px}
.filters{display:grid;grid-template-columns:1.5fr repeat(7,1fr);gap:9px;margin-bottom:12px}.table-wrap{overflow:auto;border:1px solid #eee;border-radius:16px;background:white}table{width:100%;min-width:1180px;border-collapse:collapse}th,td{padding:11px 10px;border-bottom:1px solid #eee;text-align:left;font-size:12px;vertical-align:top}th{background:#f9fafb;color:#4b5563;font-size:10px;text-transform:uppercase}.customer-name{font-weight:900}
.kpis{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin-top:16px}.kpi{background:white;border:1px solid #eee;border-radius:18px;padding:13px}.kpi span{display:block;color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase}.kpi b{font-size:21px}.planner{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.col,.task,.item-card{background:white;border:1px solid #eee;border-radius:16px;padding:12px}.task{margin-bottom:9px;border-left:4px solid var(--gold)}.badge{display:inline-flex;padding:5px 8px;border-radius:999px;background:#fef3c7;color:#92400e;font-size:10.5px;font-weight:900}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:200;padding:18px}.modal.open{display:flex}.modal-box{width:min(1180px,96vw);max-height:92vh;overflow:auto;background:white;border-radius:24px;padding:18px;box-shadow:0 30px 80px rgba(0,0,0,.32)}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}.close-btn{width:36px;height:36px;padding:0;border-radius:12px;background:#f3f4f6;color:#111;border:1px solid #e5e7eb}
.login-card{max-width:430px;margin:80px auto;background:white;border-radius:24px;box-shadow:var(--shadow);padding:28px;border:1px solid #eee}.login-card img{width:170px;display:block;margin:auto auto 18px}.login-card h1{text-align:center}.notice{border:1px solid rgba(212,175,55,.35);background:#fff9e6;border-radius:16px;padding:12px;font-size:12px;color:#6b5200;margin:12px 0}.attach-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.attach{border:1px solid #eee;border-radius:14px;padding:9px}.attach img{width:100%;height:90px;object-fit:cover;border-radius:10px}.filebox{height:90px;display:flex;align-items:center;justify-content:center;background:#f3f4f6;border-radius:10px}
.drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.42);display:none;z-index:100}.drawer-bg.open{display:block}.drawer{position:fixed;right:-920px;top:0;height:100vh;width:min(900px,96vw);background:#fff;box-shadow:-20px 0 60px rgba(0,0,0,.25);z-index:120;transition:.28s ease;display:flex;flex-direction:column}.drawer.open{right:0}.drawer-head{padding:18px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;gap:12px}.drawer-body{padding:16px;overflow:auto}.drawer-section{border:1px solid #eee;background:#fbfbfb;border-radius:18px;padding:13px;margin-bottom:12px}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.info{background:white;border:1px solid #eee;border-radius:13px;padding:10px}.info span{display:block;color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase;margin-bottom:4px}.drawer-actions{padding:14px 18px;border-top:1px solid #eee;background:#fff;display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:1300px){.kpis{grid-template-columns:repeat(4,1fr)}.planner{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:1fr 1fr}}@media(max-width:760px){.row-2,.row-3,.row-4,.row-5,.kpis,.planner,.attach-grid,.info-grid,.filters{grid-template-columns:1fr}.header{flex-direction:column}.drawer{width:100vw;right:-100vw}}

.errbox{border:1px solid #fecaca;background:#fef2f2;color:#991b1b;border-radius:14px;padding:10px;margin:10px 0;font-size:12px}
.okbox{border:1px solid #bbf7d0;background:#f0fdf4;color:#166534;border-radius:14px;padding:10px;margin:10px 0;font-size:12px}
.warnbox{border:1px solid #fde68a;background:#fffbeb;color:#92400e;border-radius:14px;padding:10px;margin:10px 0;font-size:12px}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}


/* v9.1 readability + modal/action polish */
body{
  font-family: Aptos, "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
input,select,textarea,button,.btn,table,td,th{
  font-family: Aptos, "Segoe UI", Inter, Arial, sans-serif;
}
.close-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1 !important;
  font-size:22px !important;
  font-weight:900 !important;
  padding:0 !important;
  flex:0 0 36px !important;
}
.modal-head{
  align-items:center !important;
}
.modal-footer{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.last-update-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 11px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  color:#374151;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.last-update-pill.update-error{
  background:#fef2f2;
  color:#991b1b;
  border-color:#fecaca;
}
.audit-scroll{
  max-height:360px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:16px;
}
.audit-scroll table{
  min-width:980px;
}
.report-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:12px 0;
}
.report-tab{
  background:#f3f4f6;
  color:#111;
  border:1px solid var(--line);
}
.report-tab.active{
  background:#111;
  color:white;
}
.report-card{
  cursor:pointer;
  transition:.18s ease;
}
.report-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 35px rgba(0,0,0,.10);
}
.chart-row{
  display:grid;
  grid-template-columns:180px 1fr 90px;
  gap:10px;
  align-items:center;
  margin:9px 0;
}
.chart-label{
  font-weight:800;
  font-size:12px;
}
.chart-track{
  background:#f3f4f6;
  border-radius:999px;
  overflow:hidden;
  height:13px;
}
.chart-bar{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#111827,#d4af37);
}
.chart-value{
  text-align:right;
  font-weight:900;
  font-size:12px;
}
.finance-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.finance-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:18px;
  padding:14px;
}
.finance-card span{
  display:block;
  font-size:10px;
  color:var(--muted);
  text-transform:uppercase;
  font-weight:900;
}
.finance-card b{
  font-size:22px;
}
.clean-info-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.clean-info{
  border:1px solid #eee;
  background:#fff;
  border-radius:14px;
  padding:10px;
}
.clean-info span{
  display:block;
  font-size:10px;
  color:#6b7280;
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:4px;
}
.clean-info b{
  font-size:13px;
  word-break:break-word;
}
@media(max-width:900px){
  .finance-grid,.clean-info-grid{grid-template-columns:1fr}
  .chart-row{grid-template-columns:1fr}
  .chart-value{text-align:left}
}


/* v9.5 finance and design-library upgrades */
.finance-row{cursor:pointer}
.finance-row:hover{background:#fff7df}
.fin-detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}
.fin-detail-card{border:1px solid #eee;border-radius:16px;background:#fff;padding:13px}
.fin-detail-card span{display:block;font-size:10px;text-transform:uppercase;color:var(--muted);font-weight:900}
.fin-detail-card b{font-size:20px}
.report-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.library-toolbar{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:10px;margin-bottom:12px}
.library-card{background:#fff;border:1px solid #eee;border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:9px}
.library-preview{height:190px;border-radius:16px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #eee}
.library-preview img{width:100%;height:100%;object-fit:cover}
.library-meta{font-size:12px;color:#4b5563;line-height:1.45}
.library-tags{display:flex;gap:6px;flex-wrap:wrap}
.library-tag{font-size:10px;font-weight:900;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:999px;padding:5px 8px}
@media(max-width:1000px){.fin-detail-grid,.report-grid{grid-template-columns:1fr}.library-toolbar{grid-template-columns:1fr}.attach-grid{grid-template-columns:1fr}}