@font-face {
  font-family:Poppins;
  src:url('fonts/Poppins-Regular.ttf') format('truetype');
  font-weight:400;
  font-display:swap;
}

@font-face {
  font-family:Poppins;
  src:url('fonts/Poppins-Medium.ttf') format('truetype');
  font-weight:500;
  font-display:swap;
}

@font-face {
  font-family:Poppins;
  src:url('fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight:600;
  font-display:swap;
}

:root {
  --ink:#1d1d1b;
  --muted:#64686a;
  --sand:#dfb889;
  --brown:#8b6041;
  --canvas:#f7f6f3;
  --paper:#fff;
  --line:#e8e5df;
  --soft:#f3eee6;
  --success:#326346;
  --danger:#a23030;
  --radius:20px;
  --shadow:0 5px 22px #49332008;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  font-family:Poppins,system-ui,sans-serif;
  color:var(--ink);
  background:var(--canvas);
  font-size:14px;
  line-height:1.6;
}

a {
  color:inherit;
  text-decoration:none;
}

button,input {
  font:inherit;
}

button,a,input {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

h1,h2,h3,p {
  margin:0;
}

h1 {
  font-size:34px;
  font-weight:500;
  line-height:1.25;
  letter-spacing:-1.2px;
}

h2 {
  font-size:19px;
  font-weight:500;
  letter-spacing:-.4px;
}

h3 {
  font-size:16px;
  font-weight:500;
}

.icon {
  width:22px;
  height:22px;
  flex:none;
  vertical-align:middle;
}

.muted {
  color:var(--muted);
}

.eyebrow {
  color:var(--brown);
  font-size:10px;
  font-weight:600;
  letter-spacing:1.8px;
  margin-bottom:12px;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-height:48px;
  padding:12px 20px;
  border:1px solid var(--ink);
  border-radius:9px;
  background:var(--ink);
  color:#fff;
  font-weight:500;
  font-size:13px;
  transition:background .15s;
}

.button:hover {
  background:#373731;
}

.button.secondary {
  background:#fff;
  color:var(--ink);
  border-color:#d8d4cb;
}

.button.secondary:hover {
  background:var(--soft);
}

.button.full {
  width:100%;
  justify-content:space-between;
}

.text-link {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:500;
  font-size:12px;
  color:var(--brown);
}

.text-link:hover {
  text-decoration:underline;
}

a:focus-visible,button:focus-visible,input:focus-visible {
  outline:3px solid var(--brown);
  outline-offset:4px;
}

.skip-link {
  position:fixed;
  top:-100px;
  left:12px;
  background:#fff;
  padding:12px;
  z-index:50;
}

.skip-link:focus {
  top:12px;
}

.badge {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:29px;
  border-radius:7px;
  font-size:11px;
  padding:5px 10px;
  white-space:nowrap;
}

.badge.neutral {
  background:#eeece6;
  color:#53534c;
}

.badge.outline {
  border:1px solid #dbd5cb;
  background:#fff;
  color:var(--muted);
}

.card {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:248px;
  background:var(--ink);
  color:#fff;
  padding:32px 20px 0;
  display:flex;
  flex-direction:column;
  z-index:10;
}

.brand {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:0 12px 28px;
}

/* The approved source has large white margins. The viewport preserves the
   full artwork and its proportions without altering the original image. */
.brand-logo {
  display:block;
  position:relative;
  width:144px;
  aspect-ratio:440 / 500;
  overflow:hidden;
  flex:none;
  border-radius:8px;
  background:#fff;
}

.brand-logo img {
  position:absolute;
  width:382.7273%;
  max-width:none;
  height:auto;
  left:-141.3636%;
  top:-66.8%;
}

.brand-caption {
  font-size:9px;
  letter-spacing:2.3px;
  font-weight:400;
  color:#c3bcae;
}

.mobile-brand {
  display:none;
}

.main-nav {
  display:grid;
  gap:8px;
}

.nav-link {
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 17px;
  border-radius:9px;
  min-height:50px;
  color:#c9c9c4;
  font-size:13px;
}

.nav-link:hover {
  background:#2b2b27;
  color:#fff;
}

.nav-link.active {
  background:#3a342b;
  color:#efd2ad;
}

.nav-link.active::after {
  content:'';
  width:5px;
  height:5px;
  background:var(--sand);
  border-radius:50%;
  margin-left:auto;
}

.sidebar-bottom {
  margin-top:auto;
}

.workspace-note {
  display:flex;
  gap:12px;
  align-items:center;
  padding:24px 12px;
  color:#d0ccc3;
  font-size:11px;
}

.workspace-note .icon {
  color:var(--sand);
  width:19px;
}

.workspace-note small {
  font-size:10px;
  color:#a6a69e;
}

.profile {
  display:flex;
  align-items:center;
  gap:10px;
  border-top:1px solid #383834;
  padding:22px 0;
  font-size:12px;
}

.avatar {
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--soft);
  color:var(--brown);
  font-size:15px;
  font-weight:500;
  flex:none;
}

.profile .avatar {
  background:#473d2e;
  color:var(--sand);
}

.profile small {
  display:block;
  color:#b8b7ae;
  font-size:10px;
}

.profile>.icon {
  margin-left:auto;
  width:17px;
  color:#b8b7ae;
}

.workspace {
  margin-left:248px;
}

.topbar {
  height:82px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 48px;
  background:#ffffffb3;
}

.breadcrumb {
  font-size:11px;
  color:var(--muted);
}

.breadcrumb span {
  margin:0 14px;
  color:#c7c2b7;
}

.breadcrumb strong {
  font-weight:500;
  color:var(--ink);
}

.top-account {
  display:flex;
  gap:9px;
  align-items:center;
  min-height:44px;
  font-size:11px;
}

.top-account .icon {
  width:17px;
}

.main-content {
  padding:44px 48px 24px;
  max-width:1440px;
  margin:auto;
}

.page-heading {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  margin-bottom:42px;
}

.page-heading .muted {
  font-size:13px;
  margin-top:12px;
}

.section-heading {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  margin-bottom:20px;
}

.section-heading p {
  font-size:12px;
  color:var(--muted);
  margin-top:5px;
}

.empty-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:52px 28px;
  text-align:center;
  box-shadow:var(--shadow);
}

.empty-icon {
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--soft);
  color:var(--brown);
  border-radius:18px;
  margin:0 auto 24px;
}

.empty-icon .icon {
  width:29px;
  height:29px;
}

.empty-card .eyebrow {
  font-size:9px;
  margin-bottom:10px;
}

.empty-card h3 {
  font-size:23px;
  letter-spacing:-.6px;
}

.empty-card p:not(.eyebrow) {
  color:var(--muted);
  font-size:12px;
  line-height:1.9;
  margin:12px 0 25px;
}

.home-bottom {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:20px;
  margin-top:24px;
}

.next-step {
  padding:24px;
  display:flex;
  align-items:flex-start;
  gap:18px;
  background:#f0ede5;
  box-shadow:none;
}

.step-number {
  font-size:12px;
  color:var(--brown);
  border:1px solid #d6c6b0;
  padding:5px 10px;
  border-radius:7px;
}

.next-step .eyebrow {
  font-size:8px;
  letter-spacing:1.2px;
  margin-bottom:4px;
}

.next-step h2 {
  font-size:15px;
}

.next-step p:not(.eyebrow) {
  color:#666458;
  font-size:11px;
  margin-top:7px;
  line-height:1.9;
}

.account-shortcut {
  display:flex;
  align-items:center;
  gap:14px;
  padding:24px;
}

.account-shortcut:hover,.settings-row:hover {
  border-color:#b8a085;
}

.account-shortcut h2 {
  font-size:15px;
}

.account-shortcut p {
  font-size:11px;
  color:var(--muted);
  margin-top:3px;
}

.account-shortcut>.icon {
  margin-left:auto;
  width:18px;
}

.section-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:13px;
  background:var(--soft);
  color:var(--brown);
  margin-bottom:24px;
}

.section-icon.small {
  width:40px;
  height:40px;
  border-radius:11px;
  margin:0;
  flex:none;
}

.section-icon.small .icon {
  width:20px;
}

.page-footer {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:52px;
  padding-top:19px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:9px;
}

.login-shell {
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:38px 20px;
}

.login-brand {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  margin-bottom:24px;
}

.login-brand .brand-logo {
  width:120px;
}

.login-brand .brand-caption {
  color:var(--muted);
}

.login-card {
  width:100%;
  max-width:460px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:38px 40px;
  box-shadow:0 12px 50px #30251607;
}

.login-card h1 {
  font-size:30px;
}

.login-card .intro {
  font-size:12px;
  margin-top:12px;
  margin-bottom:28px;
}

.login-card .section-icon {
  margin-bottom:25px;
}

.form-stack {
  display:grid;
  gap:21px;
}

.field {
  display:flex;
  flex-direction:column;
  gap:8px;
}

label {
  font-size:12px;
  font-weight:500;
}

input {
  min-height:48px;
  border:1px solid #d9d6cf;
  border-radius:8px;
  background:#fff;
  padding:11px 13px;
  color:var(--ink);
  width:100%;
  min-width:0;
  font-size:16px;
}

input::placeholder {
  color:#777974;
  font-size:12px;
}

input:hover {
  border-color:#b2a591;
}

.field small {
  font-size:10px;
  color:var(--muted);
}

.password-field {
  position:relative;
}

.password-field input {
  padding-right:85px;
}

.password-toggle {
  position:absolute;
  right:2px;
  top:2px;
  bottom:2px;
  padding:0 12px;
  border:0;
  border-radius:6px;
  background:transparent;
  font-size:10px;
  color:var(--muted);
}

.password-toggle:hover {
  background:var(--soft);
}

.login-help {
  border-top:1px solid var(--line);
  margin-top:26px;
  padding-top:22px;
  font-size:11px;
}

.login-help strong {
  font-weight:500;
}

.login-help p {
  font-size:10px;
  color:var(--muted);
  margin-top:5px;
  line-height:1.9;
}

.login-footer {
  display:flex;
  gap:8px;
  align-items:center;
  color:var(--muted);
  font-size:9px;
  margin-top:24px;
}

.login-footer .icon {
  width:13px;
  height:13px;
}

.alert {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:15px 18px;
  border-radius:9px;
  font-size:12px;
  margin-bottom:24px;
  border:1px solid;
}

.alert.success {
  background:#f1f7f0;
  border-color:#cbddc8;
  color:#28533a;
}

.alert.error {
  background:#fff3f1;
  border-color:#efc9c3;
  color:#8c2c25;
}

.alert .icon {
  width:18px;
  height:18px;
}

.account-grid {
  display:grid;
  grid-template-columns:minmax(230px,.8fr) minmax(300px,1.4fr);
  gap:24px;
  align-items:start;
}

.profile-card {
  padding:32px;
  text-align:center;
}

.avatar.large {
  width:64px;
  height:64px;
  font-size:25px;
  margin:0 auto 20px;
}

.profile-email {
  font-size:12px;
  color:var(--muted);
  margin:7px 0 16px;
  overflow-wrap:anywhere;
}

.profile-description {
  display:flex;
  text-align:left;
  gap:10px;
  border-top:1px solid var(--line);
  padding-top:23px;
  margin-top:28px;
  color:var(--muted);
  font-size:11px;
}

.profile-description .icon {
  width:18px;
  color:var(--brown);
}

.password-card {
  padding:32px;
}

.password-card>.muted {
  font-size:12px;
  margin:8px 0 28px;
}

.password-card .button {
  justify-self:start;
}

.settings-list {
  max-width:780px;
  display:grid;
  gap:16px;
}

.settings-list>form {
  margin-top:14px;
}

.settings-row {
  display:flex;
  align-items:center;
  gap:18px;
  padding:24px;
}

.settings-row h2 {
  font-size:16px;
}

.settings-row p {
  color:var(--muted);
  font-size:11px;
  margin-top:4px;
}

.settings-row>.icon {
  margin-left:auto;
}

.members-card {
  padding:28px;
}

.member {
  display:flex;
  align-items:center;
  gap:16px;
  padding:22px 0;
  border-bottom:1px solid var(--line);
}

.member h3 {
  font-size:13px;
}

.member p {
  font-size:11px;
  color:var(--muted);
  overflow-wrap:anywhere;
}

.member>.badge {
  margin-left:auto;
}

.member-status {
  font-size:11px;
  color:var(--success);
}

.fine-print {
  font-size:11px;
  margin-top:24px;
}

.error-page {
  padding:32px 0;
}

.error-page>p:not(.eyebrow) {
  margin:20px 0;
  max-width:600px;
}

.error-page h1 {
  font-size:28px;
}

@media(min-width:1500px) {
  .main-content {
    padding-top:58px;
  }
  .empty-card {
    padding-top:64px;
    padding-bottom:64px;
  }
}

@media(max-width:1150px) {
  .sidebar {
    width:220px;
    padding-left:16px;
    padding-right:16px;
  }
  .workspace {
    margin-left:220px;
  }
  .main-content {
    padding:34px 28px 24px;
  }
  .topbar {
    padding:0 28px;
  }
  .home-bottom {
    grid-template-columns:1fr;
  }
  .account-grid {
    grid-template-columns:1fr;
  }
  .profile-card {
    text-align:left;
  }
  .avatar.large {
    margin-left:0;
  }
  .profile-description {
    max-width:500px;
  }
}

@media(max-width:700px) {
  body {
    font-size:14px;
  }
  .sidebar {
    inset:auto 0 0;
    width:100%;
    height:auto;
    padding:0 12px calc(6px + env(safe-area-inset-bottom));
    background:#fff;
    color:var(--ink);
    border-top:1px solid var(--line);
  }
  .sidebar .brand,.sidebar-bottom {
    display:none;
  }
  .main-nav {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:5px;
  }
  .nav-link {
    flex-direction:column;
    gap:4px;
    justify-content:center;
    min-height:66px;
    padding:10px 8px 7px;
    font-size:10px;
    color:#656760;
    border-radius:0;
  }
  .nav-link.active {
    background:transparent;
    color:var(--brown);
    box-shadow:inset 0 3px var(--brown);
  }
  .nav-link:hover {
    background:var(--soft);
    color:var(--brown);
  }
  .nav-link.active::after {
    display:none;
  }
  .nav-link .icon {
    width:22px;
    height:22px;
  }
  .workspace {
    margin-left:0;
  }
  .topbar {
    height:66px;
    padding:0 22px;
  }
  .breadcrumb {
    font-size:10px;
  }
  .breadcrumb span {
    margin:0 9px;
  }
  .top-account span {
    display:none;
  }
  .top-account {
    width:44px;
    justify-content:flex-end;
  }
  .main-content {
    padding:30px 20px calc(105px + env(safe-area-inset-bottom));
  }
  .page-heading {
    margin-bottom:30px;
    gap:12px;
    align-items:flex-start;
  }
  .page-heading>.badge {
    margin-top:8px;
    font-size:9px;
    padding:4px 8px;
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.5px;
    margin-bottom:10px;
  }
  h1 {
    font-size:28px;
    letter-spacing:-.8px;
  }
  .page-heading .muted {
    font-size:11px;
    max-width:230px;
  }
  .section-heading {
    gap:10px;
    margin-bottom:17px;
    align-items:flex-start;
  }
  .section-heading h2 {
    font-size:17px;
  }
  .section-heading p {
    font-size:10px;
    max-width:195px;
  }
  .text-link {
    font-size:10px;
    gap:6px;
    white-space:nowrap;
    min-height:34px;
  }
  .text-link .icon {
    width:16px;
  }
  .empty-card {
    padding:36px 20px;
  }
  .empty-card h3 {
    font-size:20px;
  }
  .empty-card p:not(.eyebrow) {
    font-size:11px;
    line-height:1.9;
  }
  .desktop-only {
    display:none;
  }
  .home-bottom {
    gap:16px;
    margin-top:18px;
  }
  .next-step {
    padding:20px;
    gap:14px;
  }
  .account-shortcut {
    padding:22px 20px;
  }
  .page-footer {
    margin-top:34px;
    flex-wrap:wrap;
    font-size:8px;
    gap:8px;
  }
  .account-grid {
    gap:18px;
  }
  .profile-card,.password-card {
    padding:24px;
  }
  .password-card .button {
    width:100%;
    font-size:11px;
    padding-left:12px;
    padding-right:12px;
    gap:8px;
  }
  .settings-row {
    padding:20px;
    gap:12px;
  }
  .settings-row h2 {
    font-size:14px;
  }
  .settings-row p {
    font-size:10px;
  }
  .settings-row>.icon {
    width:18px;
  }
  .members-card {
    padding:22px;
  }
  .member {
    flex-wrap:wrap;
    gap:12px;
  }
  .member>div {
    flex:1;
    min-width:150px;
  }
  .member>.badge {
    margin-left:50px;
  }
  .member-status {
    margin-left:auto;
  }
  .login-shell {
    padding:26px 20px;
    justify-content:center;
  }
  .login-brand {
    gap:12px;
    margin-bottom:24px;
  }
  .login-brand .brand-logo {
    width:104px;
  }
  .mobile-brand {
    display:block;
    margin-right:12px;
  }
  .mobile-brand .brand-logo {
    width:48px;
    border-radius:3px;
  }
  .topbar {
    height:82px;
  }
  .topbar .breadcrumb {
    flex:1;
  }
  .login-card {
    padding:28px 25px;
  }
  .login-card h1 {
    font-size:28px;
  }
  .login-footer {
    font-size:8px;
  }
  .error-page h1 {
    font-size:24px;
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

/* Shared layout adapted from the supplied mobile reference screens. */
h1,h2 {
  font-weight:600;
}

.top-account .account-label {
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.account-label strong {
  font-size:13px;
  font-weight:600;
  overflow-wrap:anywhere;
}

.account-label small {
  font-size:11px;
  color:var(--muted);
}

.top-account .avatar {
  background:#b7987c;
  color:var(--paper);
}

.project-panel {
  padding:28px;
}

.panel-heading {
  display:flex;
  gap:16px;
  align-items:center;
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
}

.panel-heading .section-icon {
  margin:0;
  width:52px;
  height:52px;
  border-radius:50%;
  flex:none;
}

.panel-heading h2 {
  font-size:23px;
}

.panel-heading p {
  color:var(--muted);
  font-size:14px;
}

.panel-heading .badge {
  margin-left:auto;
  border-radius:100px;
}

.panel-empty {
  padding:42px 20px;
  margin:24px 0;
  border-radius:14px;
  background:var(--canvas);
  text-align:center;
}

.panel-empty h3 {
  font-size:17px;
  font-weight:500;
}

.panel-empty p {
  margin-top:10px;
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
}

.panel-footer {
  display:flex;
  justify-content:flex-end;
}

.home-account {
  margin-top:22px;
}

@media(max-width:700px) {
  .topbar {
    height:auto;
    min-height:92px;
    padding:12px 20px;
    background:var(--paper);
    border-bottom:0;
    gap:16px;
  }
  .topbar .breadcrumb {
    display:none;
  }
  .mobile-brand {
    margin-right:0;
  }
  .mobile-brand .brand-logo {
    width:56px;
  }
  .top-account {
    width:auto;
    gap:10px;
    min-width:0;
  }
  .top-account .avatar {
    display:flex;
    width:34px;
    height:34px;
  }
  .account-label strong {
    font-size:12px;
  }
  .account-label small {
    font-size:10px;
  }
  .main-content {
    padding-top:24px;
  }
  .page-heading {
    margin-bottom:24px;
  }
  .page-heading .muted {
    max-width:none;
  }
  .project-panel {
    padding:20px 16px;
  }
  .panel-heading {
    gap:12px;
    flex-wrap:wrap;
    padding-bottom:18px;
  }
  .panel-heading .section-icon {
    width:42px;
    height:42px;
  }
  .panel-heading h2 {
    font-size:20px;
  }
  .panel-heading p {
    font-size:12px;
  }
  .panel-heading .badge {
    font-size:10px;
  }
  .panel-empty {
    margin:18px 0 12px;
    padding:28px 16px;
  }
  .panel-empty h3 {
    font-size:16px;
  }
  .panel-empty p {
    font-size:13px;
  }
  .sidebar {
    border-radius:22px 22px 0 0;
    box-shadow:0 -5px 24px #49332006;
    padding-top:4px;
  }
  .nav-link {
    position:relative;
    padding-bottom:15px;
    min-height:72px;
  }
  .nav-link.active {
    box-shadow:none;
    font-weight:600;
  }
  .nav-link.active::after {
    display:block;
    position:absolute;
    bottom:4px;
    left:50%;
    transform:translateX(-50%);
    width:28px;
    height:4px;
    margin:0;
    border-radius:4px;
    background:var(--brown);
  }
}

/* Readability and touch targets remain consistent on narrow screens. */
.section-heading p,.empty-card p:not(.eyebrow),.account-shortcut p,.next-step p:not(.eyebrow),.settings-row p,.profile-description,.password-card>.muted {
  font-size:13px;
}

.login-card .intro,.login-help,.login-help p {
  font-size:12px;
}

label {
  font-size:13px;
}

@media(max-width:700px) {
  .page-heading .muted,.empty-card p:not(.eyebrow),.next-step p:not(.eyebrow),.account-shortcut p,.settings-row p {
    font-size:13px;
  }
  .section-heading {
    flex-wrap:wrap;
    gap:4px;
  }
  .section-heading p {
    max-width:none;
    font-size:12px;
  }
  .text-link {
    min-height:44px;
    font-size:12px;
  }
  .section-heading .text-link {
    margin-left:auto;
  }
  .nav-link {
    font-size:11px;
  }
  .field small {
    font-size:12px;
  }
  .login-footer {
    font-size:10px;
    text-align:center;
  }
}