:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#1c211f;background:#f6f5f0;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit}.brand{text-decoration:none;font-size:22px;font-weight:800;letter-spacing:-.05em}.brand span{color:#a2643e}.muted{color:#69716c}.eyebrow,.side-label{font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#96684d}.login-wrap{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}.login-wrap>.brand{margin-bottom:32px}.login-card{width:min(100%,440px);background:white;padding:40px;border:1px solid #e5e3db;border-radius:18px;box-shadow:0 20px 60px #1b2d1b12}.login-card h1{font-family:Georgia,serif;font-size:38px;margin:8px 0 10px}.login-card p{line-height:1.55}.login-card form{display:grid;gap:18px;margin-top:30px}label{display:grid;gap:8px;font-size:13px;font-weight:700}input,select,textarea{width:100%;padding:11px 12px;border:1px solid #cfd4cd;border-radius:9px;background:#fff;color:#1c211f}input:focus,select:focus,textarea:focus{outline:2px solid #a2643e;outline-offset:1px}.primary{background:#183d32;color:white;border:0;border-radius:9px;padding:12px 18px;font-weight:700}.primary:hover{background:#245445}.primary:disabled{opacity:.55;cursor:default}.message{min-height:1.5em;color:#9b3838}.message.success{color:#27684b}.foot-note{font-size:12px;color:#747a75;margin-top:22px}.app-shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100dvh}.sidebar{background:#142f29;color:#f9f7ef;padding:28px 18px;display:flex;flex-direction:column;gap:28px}.sidebar .brand{color:#fff;padding:0 12px}.sidebar .side-label{padding:0 12px;color:#c9b5a5}.sidebar nav{display:grid;gap:4px}.sidebar nav a{padding:12px;border-radius:9px;text-decoration:none;font-size:14px;font-weight:600}.sidebar nav a:hover,.sidebar nav a[aria-current="page"]{background:#ffffff1b}.sidebar>.text-button{margin-top:auto;text-align:left}.text-button{border:0;background:none;color:inherit;padding:10px 12px;font-size:13px}.main-column{min-width:0}.topbar{min-height:76px;background:#fff;border-bottom:1px solid #e7e7e0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px clamp(20px,4vw,48px)}.topbar div{display:grid;gap:3px}.topbar small{font-size:11px;color:#808b83}.topbar strong{font-size:18px}.topbar select{width:auto;max-width:220px}.topbar .text-button{display:none}.content{padding:32px clamp(20px,4vw,48px) 70px;max-width:1500px}.content h1{font-family:Georgia,serif;font-size:clamp(30px,4vw,42px);margin:0 0 8px}.content h2{font-size:19px;margin:0 0 16px}.section-intro{color:#647069;margin:0 0 28px}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:28px 0}.stat,.panel,.integration-card{background:#fff;border:1px solid #e5e7e1;border-radius:14px;padding:22px}.stat span{display:block;color:#647069;font-size:13px}.stat strong{font-size:34px;display:block;margin-top:8px}.panel{margin-top:18px}.activity-list{display:grid;gap:0}.activity{padding:14px 0;border-bottom:1px solid #e9ece8;display:flex;justify-content:space-between;gap:15px}.activity:last-child{border:0}.activity strong{display:block}.activity small{color:#707a73}.table-wrap{overflow:auto;background:#fff;border:1px solid #e5e7e1;border-radius:14px}table{width:100%;border-collapse:collapse;min-width:810px}th,td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid #edf0ec;font-size:13px}th{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#748079;background:#fafbf9}tr:last-child td{border:0}td .sub{display:block;color:#758078;font-size:12px;margin-top:4px}td .note{max-width:260px;white-space:pre-wrap}.badge{display:inline-block;border-radius:99px;padding:5px 9px;background:#edf1ec;font-size:11px;font-weight:700;white-space:nowrap}.badge.pending,.badge.new{background:#fff0d8;color:#875a0a}.badge.confirmed,.badge.completed,.badge.paid,.badge.connected{background:#dcefe5;color:#266448}.badge.declined,.badge.cancelled{background:#f7e3e1;color:#984940}.actions{display:flex;flex-wrap:wrap;gap:7px}.action-button{background:#fff;border:1px solid #cfd6d0;border-radius:7px;padding:7px 9px;font-size:12px;font-weight:700}.action-button:hover{border-color:#183d32}.action-button:disabled{opacity:.45;cursor:default}.status-select{min-width:130px;padding:7px;font-size:12px}.empty{padding:34px;color:#647069}.integration-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.integration-card h2{margin:5px 0}.integration-card p{color:#65716a;font-size:13px;line-height:1.5}.integration-card .badge{margin-top:10px}.settings-form{display:grid;gap:17px;max-width:560px}.settings-note{font-size:13px;color:#647069}.placeholder-list{display:grid;gap:10px;color:#6c7770;font-size:13px}.error-panel{background:#fff5f4;border:1px solid #e3b4b0;border-radius:10px;padding:16px;color:#8b3333}.detail-row{cursor:pointer}.detail-row:hover{background:#fafbf9}.details{max-width:500px;white-space:pre-wrap;line-height:1.5}@media(max-width:850px){.app-shell{display:block}.sidebar{padding:16px;gap:12px}.sidebar .brand{padding:0}.sidebar .side-label,.sidebar>.text-button{display:none}.sidebar nav{display:flex;overflow:auto;gap:4px}.sidebar nav a{white-space:nowrap;padding:9px 10px;font-size:12px}.topbar{min-height:66px}.topbar .text-button{display:block}.stats{grid-template-columns:1fr}.content{padding-top:25px}}@media(max-width:500px){.login-card{padding:28px 22px}.topbar strong{font-size:15px}.topbar select{max-width:120px;font-size:11px}.stat{padding:18px}}

/* WebsiteGenuss public-site visual language for the customer portal. */
:root {
  color: #171714;
  background: #f7f4ee;
  --portal-bg: #f7f4ee;
  --portal-paper: #fffdf8;
  --portal-ink: #171714;
  --portal-muted: #6b6a63;
  --portal-line: rgba(23, 23, 20, .11);
  --portal-orange: #ff6a2a;
  --portal-orange-soft: #fff0e9;
  --portal-shadow: 0 24px 80px rgba(35, 27, 18, .12);
}
body { background: var(--portal-bg); color: var(--portal-ink); min-width: 320px; }
.brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; max-width: 100%; color: var(--portal-ink); font-size: inherit; letter-spacing: 0; }
.brand-mark { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; background: var(--portal-orange); }
.brand-mark img { display: block; width: 30px; height: 30px; filter: brightness(0) invert(1); }
.brand-copy { display: grid; gap: 3px; line-height: 1; }
.brand-copy strong { font-size: 21px; font-weight: 800; letter-spacing: -.025em; white-space: nowrap; }
.brand-copy small { color: var(--portal-muted); font-size: 10px; font-weight: 650; letter-spacing: .015em; }
.muted, .section-intro, .settings-note, .placeholder-list { color: var(--portal-muted); }
.eyebrow, .side-label { color: var(--portal-orange); font-size: 12px; font-weight: 850; letter-spacing: .16em; }
.login-wrap { position: relative; isolation: isolate; overflow: hidden; padding: 36px 20px; }
.login-wrap::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(circle at 78% 16%, rgba(255, 106, 42, .14), transparent 35%), radial-gradient(circle at 12% 72%, rgba(255, 106, 42, .11), transparent 30%); }
.login-wrap > .brand { margin-bottom: 28px; }
.login-card { width: min(100%, 480px); padding: clamp(30px, 5vw, 48px); background: var(--portal-paper); border: 1px solid var(--portal-line); border-radius: 28px; box-shadow: var(--portal-shadow); }
.login-card .eyebrow { margin: 0 0 18px; }
.login-card h1 { margin: 0 0 20px; font-family: inherit; font-size: clamp(38px, 6vw, 56px); line-height: .98; letter-spacing: -.055em; }
.login-card .muted { margin: 0; }
.login-card form { margin-top: 32px; }
label { font-size: 13px; font-weight: 750; }
input, select, textarea { min-height: 46px; padding: 11px 14px; border: 1px solid var(--portal-line); border-radius: 13px; background: #fff; color: var(--portal-ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--portal-orange); outline-offset: 2px; }
.primary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: 999px; background: var(--portal-ink); font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.primary:hover { background: var(--portal-orange); box-shadow: 0 12px 26px rgba(255, 106, 42, .22); transform: translateY(-2px); }
.primary:disabled { transform: none; box-shadow: none; }
.foot-note { margin-top: 25px; color: var(--portal-muted); font-size: 13px; text-align: center; }
.foot-note a { text-underline-offset: 3px; }
.foot-note a:hover { color: var(--portal-orange); }
.app-shell { grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { gap: 27px; padding: 28px 16px; background: var(--portal-paper); color: var(--portal-ink); border-right: 1px solid var(--portal-line); }
.sidebar .brand { margin: 0 10px; padding: 0; color: var(--portal-ink); }
.sidebar .side-label { padding: 0 15px; color: var(--portal-orange); }
.sidebar nav { gap: 5px; }
.sidebar nav a { padding: 12px 15px; border-radius: 14px; font-weight: 700; transition: background .2s ease, color .2s ease; }
.sidebar nav a:hover { background: var(--portal-orange-soft); }
.sidebar nav a[aria-current="page"] { background: var(--portal-orange); color: #fff; }
.text-button { color: var(--portal-muted); font-weight: 700; }
.text-button:hover { color: var(--portal-orange); }
.topbar { min-height: 86px; padding: 16px clamp(20px, 4vw, 56px); background: rgba(255, 253, 248, .82); border-bottom: 1px solid var(--portal-line); }
.topbar small { color: var(--portal-orange); font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.topbar strong { letter-spacing: -.025em; }
.content { padding: 42px clamp(20px, 4vw, 56px) 80px; }
.content h1 { margin-bottom: 8px; font-family: inherit; font-size: clamp(38px, 5vw, 56px); line-height: 1; letter-spacing: -.055em; }
.content h2 { font-size: 21px; letter-spacing: -.035em; }
.section-intro { line-height: 1.55; }
.stat, .panel, .integration-card { padding: 25px; background: var(--portal-paper); border-color: var(--portal-line); border-radius: 24px; }
.stat { min-height: 140px; }
.stat span { color: var(--portal-muted); font-weight: 650; }
.stat strong { color: var(--portal-orange); font-size: 42px; line-height: 1; letter-spacing: -.055em; }
.activity { border-bottom-color: var(--portal-line); }
.activity small { color: var(--portal-muted); }
.table-wrap { background: var(--portal-paper); border-color: var(--portal-line); border-radius: 24px; }
th { background: #f8f3ec; color: var(--portal-muted); }
th, td { border-bottom-color: var(--portal-line); }
td .sub, .empty, .integration-card p { color: var(--portal-muted); }
.badge { background: #efede7; }
.badge.pending, .badge.new { background: #fff0d8; color: #875a0a; }
.badge.confirmed, .badge.completed, .badge.paid, .badge.connected { background: #dcefe5; color: #266448; }
.badge.declined, .badge.cancelled { background: #f7e3e1; color: #984940; }
.action-button { background: var(--portal-paper); border-color: var(--portal-line); border-radius: 999px; }
.action-button:hover { border-color: var(--portal-orange); color: var(--portal-orange); }
.error-panel { border-radius: 14px; }
.detail-row:hover { background: var(--portal-orange-soft); }
@media (max-width: 850px) {
  .sidebar { gap: 12px; padding: 15px 16px; border-right: 0; border-bottom: 1px solid var(--portal-line); }
  .sidebar .brand { margin: 0; }
  .sidebar nav { gap: 5px; padding-bottom: 2px; }
  .sidebar nav a { padding: 9px 12px; }
  .topbar { min-height: 66px; }
  .stat { min-height: auto; }
  .content { padding-top: 28px; }
}
@media (max-width: 500px) {
  .brand-mark { width: 40px; height: 40px; flex-basis: 40px; }
  .brand-mark img { width: 27px; height: 27px; }
  .brand-copy strong { font-size: 19px; }
  .brand-copy small { font-size: 9px; }
  .login-card { padding: 30px 23px; }
  .stat, .panel, .integration-card { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { .primary, .sidebar nav a { transition: none; } }
.brand-copy { color: var(--portal-ink); }
@media (orientation: landscape) and (max-height: 500px) and (min-width: 650px) {
  .login-wrap { justify-content: flex-start; padding: 12px 20px; }
  .login-wrap > .brand { margin-bottom: 10px; }
  .login-card { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); column-gap: 26px; width: min(100%, 780px); padding: 20px 28px; }
  .login-card .eyebrow { grid-column: 1; margin-bottom: 9px; }
  .login-card h1 { grid-column: 1; margin-bottom: 11px; font-size: clamp(30px, 4vw, 38px); }
  .login-card > .muted { grid-column: 1; }
  .login-card form { grid-column: 2; grid-row: 1 / span 3; gap: 8px; margin: 0; }
  .login-card .message { grid-column: 2; margin: 0; }
  .foot-note { margin-top: 9px; }
}