:root {
  font-family:
    Inter,
    Segoe UI,
    Arial,
    sans-serif;
  color: #243349;
  background: #f4f6fa;
  line-height: 1.5;
  --brand: #673cb5;
  --brand-secondary: #251744;
  --line: #e3e7ef;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  padding: 9px 15px;
  color: inherit;
}
button:hover {
  background: #eee9f7;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
button.primary {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}
button.danger {
  color: #ac263d;
}
a {
  color: var(--brand);
}
.shell {
  display: grid;
  grid-template-columns: 235px 1fr;
  min-height: 100vh;
}
.sidebar {
  background: var(--brand-secondary);
  color: #ece6f8;
  padding: 26px 16px;
  display: flex;
  flex-direction: column;
}
.brand {
  padding: 0 10px 25px;
  font-weight: 800;
  font-size: 23px;
  letter-spacing: -1px;
}
.brand small {
  display: block;
  font-size: 11px;
  letter-spacing: 2px;
  color: #d2b7fa;
  text-transform: uppercase;
}
.sidebar nav {
  display: grid;
  gap: 5px;
}
.sidebar nav button {
  text-align: left;
  background: transparent;
  color: #d9cfea;
  border: 0;
}
.sidebar nav button.active {
  background: #4c3276;
  color: white;
}
.sidebar footer {
  margin-top: auto;
  font-size: 12px;
  padding: 25px 10px 0;
  color: #c2b4da;
}
.workspace {
  min-width: 0;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px 32px;
  background: white;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}
.topbar small {
  display: block;
  color: #6c788b;
}
.content {
  padding: 30px 32px;
  max-width: 1600px;
  margin: auto;
}
h1 {
  font-size: 27px;
  margin: 0 0 4px;
  letter-spacing: -0.7px;
}
h2 {
  font-size: 19px;
}
p.muted,
.muted {
  color: #6c788b;
}
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.page-head p {
  margin: 4px 0;
}
.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 23px;
  margin-bottom: 20px;
  box-shadow: 0 3px 12px #24334903;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}
.metric {
  font-size: 28px;
  font-weight: 750;
  margin-top: 8px;
  color: #452c73;
}
.table-wrap {
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}
th {
  text-align: left;
  color: #647088;
  font-weight: 600;
  background: #f9fafc;
}
td,
th {
  padding: 13px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.badge {
  display: inline-block;
  border-radius: 30px;
  padding: 3px 10px;
  background: #eee8f9;
  color: #54358b;
  font-size: 12px;
}
.toolbar {
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.toolbar input {
  max-width: 350px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #4c596e;
}
input,
select,
textarea {
  border: 1px solid #cfd6e2;
  border-radius: 8px;
  padding: 10px 11px;
  width: 100%;
  background: white;
  color: #243349;
}
textarea {
  min-height: 85px;
  resize: vertical;
}
.wide {
  grid-column: 1/-1;
}
.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.error {
  background: #fff0f1;
  color: #9e2032;
  padding: 12px;
  border-radius: 8px;
  margin: 12px 0;
}
.info {
  background: #f0edf8;
  border-left: 3px solid #8b63cc;
  padding: 13px;
  font-size: 14px;
}
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(125deg, #251744, #493074);
}
.login .card {
  width: min(460px, 100%);
  padding: 38px;
}
.login h1 {
  color: #452c73;
}
.login form {
  display: grid;
  gap: 18px;
  margin-top: 25px;
}
dialog {
  border: 0;
  border-radius: 16px;
  width: min(850px, 95vw);
  max-height: 92vh;
  padding: 25px;
  color: #243349;
  box-shadow: 0 20px 90px #10102055;
}
dialog::backdrop {
  background: #17132b88;
}
.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.dialog-head h2 {
  margin: 0;
}
.dialog-head button {
  font-size: 24px;
  border: 0;
  padding: 0 10px;
}
#notice {
  position: fixed;
  bottom: 22px;
  right: 22px;
  background: #243349;
  color: white;
  padding: 14px 22px;
  border-radius: 10px;
  max-width: 90vw;
  display: none;
  z-index: 5;
}
.item-row {
  display: grid;
  grid-template-columns: 2fr 75px 75px 110px 40px;
  gap: 8px;
  align-items: end;
  margin-bottom: 10px;
}
pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font:
    14px/1.6 Segoe UI,
    Arial;
}
.empty {
  text-align: center;
  padding: 35px;
  color: #6c788b;
}
.search-label {
  min-width: 220px;
}
.hint {
  font-size: 12px;
  color: #6c788b;
}
.calendar-toolbar {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.calendar-toolbar h2 {
  margin: 0;
  text-transform: capitalize;
}
.calendar-toolbar .actions {
  margin: 0;
}
.calendar-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.calendar-weekday {
  background: #f1edf8;
  padding: 10px;
  font-weight: 600;
  text-align: center;
  font-size: 13px;
}
.calendar-day {
  min-height: 125px;
  padding: 7px;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.calendar-day.outside {
  background: #fafbfd;
}
.calendar-day.today {
  background: #f6f1ff;
}
.calendar-number {
  border: 0;
  padding: 2px 7px;
  background: transparent;
  font-weight: 700;
}
.calendar-day.today .calendar-number {
  background: var(--brand);
  color: white;
}
.calendar-event {
  display: block;
  width: 100%;
  text-align: left;
  white-space: normal;
  font-size: 11px;
  padding: 6px;
  margin-top: 6px;
  border: 0;
  border-left: 3px solid #7653b0;
  border-radius: 4px;
  background: #eee8f9;
  overflow-wrap: anywhere;
}
.calendar-event.return {
  background: #e8f4f1;
  border-color: #3c9279;
}
.calendar-event span,
.calendar-event small {
  display: block;
}
.calendar-agenda-day {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.calendar-agenda-day h3 {
  font-size: 15px;
  text-transform: capitalize;
}
.calendar-agenda-day .calendar-event {
  font-size: 14px;
  max-width: 650px;
}
@media print {
  body:has(dialog[open]) #app {
    display: none;
  }
  dialog[open] {
    display: block;
    position: static;
    margin: 0;
    max-height: none;
    overflow: visible;
  }
  dialog::backdrop {
    background: white;
  }
}
.check {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
}
.check input {
  width: auto;
}
.calendar-event.task {
  background: #fff4d9;
  border-color: #c99420;
}
fieldset {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 14px;
}
legend {
  font-size: 13px;
  font-weight: 600;
  padding: 0 5px;
}
.sidebar,
.content,
.card,
.toolbar,
.form-grid > *,
.topbar > *,
.calendar-toolbar > * {
  min-width: 0;
}
.content {
  width: 100%;
}
.sidebar nav {
  max-width: 100%;
}
.topbar > div:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
#calendar-grid,
.table-wrap {
  max-width: 100%;
  width: 100%;
  min-width: 0;
}
@media (max-width: 850px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .sidebar {
    width: 100%;
    max-width: 100%;
  }
  .topbar {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .topbar > div:last-child {
    justify-content: flex-start;
  }
  .content {
    margin: 0;
    max-width: 100%;
    padding: 16px;
  }
  .card {
    padding: 16px;
    max-width: 100%;
  }
  .toolbar label {
    max-width: 100%;
  }
  .calendar-toolbar {
    width: 100%;
  }
  .calendar-toolbar .actions {
    flex-wrap: wrap;
  }
  .calendar-toolbar button {
    padding: 8px 10px;
  }
  .page-head {
    flex-wrap: wrap;
  }
  input,
  select,
  textarea {
    min-width: 0;
    max-width: 100%;
  }
  .search-label {
    min-width: 0;
    width: 100%;
  }
  .cards {
    grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  }
  dialog {
    padding: 18px;
  }
}
@media (max-width: 850px) {
  .shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    padding: 15px;
  }
  .brand {
    padding-bottom: 12px;
  }
  .sidebar nav {
    display: flex;
    overflow: auto;
  }
  .sidebar nav button {
    white-space: nowrap;
  }
  .sidebar footer {
    display: none;
  }
  .topbar,
  .content {
    padding: 18px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .wide {
    grid-column: auto;
  }
  .item-row {
    grid-template-columns: 1fr 65px 65px;
  }
  .item-row label:first-child {
    grid-column: 1/-1;
  }
  .page-head {
    align-items: start;
  }
  h1 {
    font-size: 23px;
  }
  .calendar-month {
    min-width: 670px;
  }
  #calendar-grid {
    overflow: auto;
  }
}
@media print {
  .sidebar,
  .topbar,
  .actions,
  .dialog-head button,
  #notice {
    display: none;
  }
  dialog {
    position: static;
    max-height: none;
    width: 100%;
    box-shadow: none;
  }
  .shell {
    display: block;
  }
  .content {
    padding: 0;
  }
}
fieldset {border:1px solid var(--line);border-radius:10px;padding:16px;min-width:0}
legend {font-weight:600;padding:0 8px}
.repeat-list {display:grid;gap:12px;min-width:0}
.repeat-row {padding:12px;border:1px solid var(--line);border-radius:8px;min-width:0}
.repeat-row .remove-row {align-self:end}
.photo-grid {display:flex;gap:12px;flex-wrap:wrap}
.photo-grid img {display:block;max-width:140px;max-height:140px;object-fit:contain}
.company-logo {max-width:180px;max-height:120px;object-fit:contain}
summary {cursor:pointer;font-weight:600}
pre {white-space:pre-wrap;overflow-wrap:anywhere}
.form-grid input[type=file] {max-width:100%}
@media(max-width:600px){fieldset{padding:10px}.page-head{flex-wrap:wrap}.toolbar{flex-wrap:wrap}.repeat-row{padding:8px}}
.showcase-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:18px}
.showcase-grid article {margin:0}
.showcase-grid img {width:100%;height:200px;object-fit:contain;border-radius:8px}
/* Guided commercial workflow and configurable company identity. */
.brand {display:flex;align-items:center;gap:12px;overflow-wrap:anywhere}
.brand-image {width:72px;height:66px;object-fit:contain;background:white;border-radius:10px;padding:4px}
.sidebar .brand-image {width:48px;height:48px}
.nav-search {font-size:12px;margin-bottom:16px}
.nav-search input {width:100%;padding:9px;background:#fff;color:#243349}
.nav-group {border-bottom:1px solid #ffffff26;padding:6px 0}
.nav-group summary {cursor:pointer;padding:10px 5px;font-weight:700;color:#fff;display:list-item}
.nav-group summary span {display:inline-block;width:22px;text-align:center}
.sidebar nav .nav-group button {padding-left:18px;margin-top:3px;width:100%;text-align:left}
[hidden] {display:none!important}
.client-details {padding:15px;border:1px solid var(--line);border-radius:10px}
.client-details summary {font-weight:700;cursor:pointer;color:var(--brand);padding:6px 0 14px}
.wizard-steps {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;padding:0;margin:0 0 22px;gap:8px}
.wizard-steps li {background:#f0edf5;color:#586174;padding:12px 8px;border-radius:9px;display:flex;align-items:center;gap:8px;font-size:13px}
.wizard-steps li span {border:1px solid currentColor;border-radius:50%;min-width:25px;height:25px;display:inline-grid;place-items:center}
.wizard-steps li.current {background:var(--brand);color:white;font-weight:700}
.wizard-steps li.done {background:#e0f2ea;color:#126144}
#wizard-host {min-width:0}
.wizard-catalog {display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;max-height:420px;overflow:auto;padding:3px}
.wizard-catalog .card {padding:12px;margin:0;display:flex;flex-direction:column;gap:6px}
.product-photo {height:120px;background:#f3f4f7;display:grid;place-items:center;text-align:center;font-size:12px;color:#68768a;border-radius:8px}
.product-photo img {max-width:100%;height:120px;object-fit:contain;border-radius:8px}
.wizard-selected {display:grid;grid-template-columns:minmax(130px,1fr) 90px minmax(120px,1fr) auto auto;gap:10px;align-items:center;border-bottom:1px solid var(--line);padding:12px 0}
.wizard-summary-item {display:flex;align-items:center;gap:12px;padding:8px 0}
.wizard-summary-item img {width:60px;height:55px;object-fit:contain;background:white;border-radius:5px}
.quick-client-dialog {max-width:650px;width:calc(100vw - 32px)}
.quick-client-dialog form {padding:20px}
.settings-groups {display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:20px}
.settings-groups button {text-align:left;display:flex;align-items:center;gap:8px}
.settings-groups span {background:var(--brand);color:white;border-radius:50%;width:27px;height:27px;display:grid;place-items:center;flex-shrink:0}
.company-welcome {border-left:5px solid var(--brand);margin-bottom:20px}
.company-welcome .brand {padding:0;font-size:22px}
.tutorial-card {max-width:800px;border-top:5px solid var(--brand)}
.tutorial-card progress {display:block;width:100%;margin:15px 0;accent-color:var(--brand)}
.logo-preview {display:block;margin:10px 0}
@media(max-width:700px){.wizard-steps {grid-template-columns:repeat(2,minmax(0,1fr))}.wizard-steps li {font-size:12px;padding:8px}.wizard-selected {grid-template-columns:1fr 1fr}.wizard-selected strong {grid-column:1/-1}.wizard-selected button {width:100%}.quick-client-dialog form {padding:10px}.company-welcome .brand {font-size:18px}.wizard-catalog {grid-template-columns:repeat(2,minmax(0,1fr))}.wizard-catalog .card {min-width:0}.wizard-catalog button {padding:6px;font-size:12px}}