:root {
  --clay-bg: #eee9df;
  --clay-surface: #fffdf8;
  --clay-blue: #496cff;
  --clay-blue-dark: #304dcc;
  --clay-text: #17213c;
  --clay-muted: #667085;
  --clay-shadow-dark: rgba(88, 78, 65, .23);
  --clay-shadow-light: rgba(255, 255, 255, .92);
  --clay-raised: 11px 11px 24px var(--clay-shadow-dark), -10px -10px 22px var(--clay-shadow-light), inset 1px 1px 1px rgba(255,255,255,.7);
  --clay-small: 5px 5px 12px rgba(89,105,154,.22), -5px -5px 12px rgba(255,255,255,.9), inset 1px 1px 1px #fff;
  --clay-pressed: inset 4px 4px 9px rgba(89,105,154,.22), inset -4px -4px 9px rgba(255,255,255,.88);
}

body {
  background: radial-gradient(circle at 12% 8%, #fffdf7 0, #f1ede4 38%, #e4ded3 100%);
  color: var(--clay-text);
  font-family: "Aptos", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  letter-spacing: -.01em;
}
.siteHeader {
  margin: 12px 16px 0;
  padding: 11px 16px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 24px;
  background: rgba(255,253,248,.94);
  box-shadow: var(--clay-raised);
}
body { grid-template-rows: 92px 1fr; }
main { padding: 12px 16px 16px; }
main > iframe { border: 1px solid rgba(255,255,255,.9); border-radius: 24px; background: var(--clay-surface); box-shadow: var(--clay-raised); }

button, select, input {
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 14px;
  background: linear-gradient(145deg, #fffefa, #e9e4da);
  color: var(--clay-text);
  box-shadow: var(--clay-small);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
button:hover { transform: translateY(-1px); filter: saturate(1.08); }
button:active { transform: translateY(1px); box-shadow: var(--clay-pressed); }
.primary, .robot, .usb, .dangerButton {
  border-color: rgba(255,255,255,.35);
  color: #fff;
  box-shadow: 7px 7px 15px rgba(67,79,125,.28), -5px -5px 12px #fff, inset 2px 2px 4px rgba(255,255,255,.32), inset -3px -3px 7px rgba(0,0,0,.13);
}
.primary { background: linear-gradient(145deg, #6582ff, var(--clay-blue-dark)); }
.robot { background: linear-gradient(145deg, #28b99d, #087761); }
.usb { background: linear-gradient(145deg, #a36bf4, #6d36bc); }
.dangerButton { background: linear-gradient(145deg, #e65f67, #a91f2b); }
.projectIdentity {
  padding: 8px 14px;
  border-radius: 15px;
  background: #f1ece2;
  box-shadow: var(--clay-pressed);
}
.projectIdentity span { color: var(--clay-muted); }

dialog {
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 28px;
  background: linear-gradient(145deg, #fbfcff, #e7edf9);
  box-shadow: 20px 20px 45px rgba(41,52,91,.4), -10px -10px 30px rgba(255,255,255,.8);
}
dialog::backdrop { background: rgba(34,45,79,.54); backdrop-filter: blur(7px); }
.projectRow, .usbGrid section {
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 18px;
  background: linear-gradient(145deg, #fff, #ebf0fb);
  box-shadow: var(--clay-small);
}
.projectRow.defaultProject { background: linear-gradient(145deg, #f5f7ff, #e1e8ff); }
.projectOpen { background: transparent; box-shadow: none; }
.defaultBadge { padding: 5px 9px; box-shadow: var(--clay-small); }
.terminal { border: 3px solid #e9eef9; box-shadow: var(--clay-pressed); }

.authBody { background: radial-gradient(circle at 12% 15%, #273966 0, #111b36 45%, #080e20 100%); }
.authCard {
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 32px;
  background: linear-gradient(145deg, #fff, #e9eefb);
  box-shadow: 22px 22px 55px rgba(7,16,57,.42), -12px -12px 34px rgba(145,164,255,.3), inset 2px 2px 2px #fff;
}
.authTabs { padding: 7px; border-radius: 18px; background: #e8edf9; box-shadow: var(--clay-pressed); }
.authTabs button { box-shadow: none; background: transparent; }
.authTabs button.active { border-radius: 13px; box-shadow: var(--clay-small); }
.authForm input { background: #eef2fb; box-shadow: var(--clay-pressed); border-color: transparent; }
.authForm input:focus { outline: 2px solid #7087ff; outline-offset: 2px; }

.companyBrand {
  padding: 6px 11px 6px 7px;
  border: 1px solid #fff;
  border-radius: 17px;
  background: #fff;
  box-shadow: 5px 5px 12px rgba(91,78,61,.18), -4px -4px 10px #fff;
}
.companyBrand img { width: 43px; height: 43px; }
.companyBrand strong { color: #17213c; font-size: 15px; font-weight: 900; letter-spacing: -.02em; }
.companyBrand small { color: #3e5fd4; font-weight: 900; letter-spacing: .1em; }
.projectIdentity b, dialog h2, .authForm h2 { color: #131d38; font-weight: 900; letter-spacing: -.035em; }
nav button { font-size: 12px; letter-spacing: .005em; }
.authStory h1 { color: #fff; font-weight: 850; letter-spacing: -.055em; text-shadow: 0 4px 22px #0004; }
.authStory p { color: #dce5ff; }
.authBrand {
  width: fit-content;
  padding: 10px 16px 10px 10px;
  border: 1px solid #ffffff55;
  border-radius: 22px;
  background: #fff;
  box-shadow: 12px 12px 28px #0005, inset 1px 1px 1px #fff;
}
.authBrand strong { color: #17213c; }
.authBrand small { color: #3d5fd6; font-weight: 900; }
.authBrand img { filter: none; }

@media (max-width: 850px) {
  body { grid-template-rows: auto 1fr; }
  .siteHeader { margin: 8px; border-radius: 20px; }
  main { padding: 8px; }
}