:root {
  --ink: #252726;
  --muted: #756f67;
  --line: #d8cfc2;
  --canvas: #f3eee5;
  --surface: #fffaf3;
  --blue: #2b404d;
  --blue-soft: #e6ebe9;
  --signal: #793641;
  --signal-soft: #f1e5e3;
}

html { background: var(--canvas); }

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 8% -10%, rgba(255,255,255,.86), transparent 34rem),
    linear-gradient(180deg, #f6f1e9 0%, var(--canvas) 58%, #eee7dd 100%);
}

.brand-mark {
  border-color: #904b54;
  background: linear-gradient(145deg, #8c414a, #632932);
  box-shadow: inset 0 0 0 4px #7e3540, inset 0 0 0 5px #aa6770, 0 9px 24px rgba(73,31,37,.18);
}

.hero-grid {
  position: relative;
  border-color: rgba(255,255,255,.07);
  background: #191d1f;
  box-shadow: 0 24px 62px rgba(31,31,29,.19);
}

.hero {
  position: relative;
  overflow: hidden;
  color: #f8f5ee;
  background:
    radial-gradient(circle at 84% 10%, rgba(91,126,145,.34), transparent 34%),
    radial-gradient(circle at 76% 112%, rgba(70,87,96,.44), transparent 38%),
    linear-gradient(145deg, #2b3032 0%, #1c2022 56%, #121517 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .25;
  mix-blend-mode: soft-light;
  background-image: repeating-radial-gradient(circle at 17% 23%, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) .55px, transparent .85px, transparent 4px);
  background-size: 6px 6px;
}

.hero::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -118px;
  top: -120px;
  border: 1px solid rgba(184,204,211,.28);
  border-radius: 50%;
  box-shadow: 0 0 0 32px rgba(170,193,202,.035), 0 0 78px rgba(91,129,147,.2);
  pointer-events: none;
}

.hero > * { position: relative; z-index: 1; }
.eyebrow, .hero-copy { color: #c2c7c4; }
.eyebrow span { background: #9aaeb4; }
.hero-link { color: #eef2ef; border-color: rgba(219,228,228,.44); }

.hero-art {
  background:
    radial-gradient(circle at 28% 18%, rgba(103,130,141,.25), transparent 42%),
    linear-gradient(145deg, #303536, #1b1f20 70%, #141718);
}

.hero-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .12;
  pointer-events: none;
  background-image: repeating-linear-gradient(118deg, rgba(255,255,255,.09) 0, rgba(255,255,255,.09) 1px, transparent 1px, transparent 7px);
}

.hero-art::after { background: linear-gradient(0deg, rgba(12,15,16,.72), transparent); }
.art-mat { background: #eee9df; box-shadow: 12px 18px 34px rgba(0,0,0,.34), 0 2px 4px rgba(0,0,0,.22); }
.hero-art-label { color: #c3c9c5; }

.icon-btn, .close-btn, .back-btn {
  border-color: rgba(194,183,169,.72);
  background: rgba(255,251,244,.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 22px rgba(55,48,40,.05);
}

.mail-card, .asset-card, .upload-option {
  border-color: rgba(198,187,172,.68);
  background: rgba(255,251,244,.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 12px 32px rgba(49,43,36,.045);
}

.upload-option { position: relative; width: 100%; cursor: pointer; }
.native-choice { user-select: none; -webkit-user-select: none; }
.native-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.pdf-document { min-height: 0; background: transparent; border: 0; }
.document-page { width: 100%; height: auto; display: block; background: #f8f7f2; }
.pdf-open-card {
  min-height: 360px;
  padding: 40px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  color: var(--ink);
  background: #f8f6f0;
  border: 1px solid var(--line);
}
.pdf-open-card strong { font-family: var(--serif); font-size: 24px; font-weight: 400; }
.pdf-open-card span { max-width: 360px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.pdf-open-card a { padding: 12px 17px; border-radius: 12px; color: #fff; background: #273a45; }

.mail-icon, .mail-content i { background: #eee8de; }

.search {
  border: 1px solid rgba(198,187,172,.62);
  background: rgba(255,251,244,.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

.search:focus-within {
  box-shadow: 0 0 0 2px rgba(43,64,77,.2), inset 0 1px 0 rgba(255,255,255,.8);
}

.shortcut {
  position: relative;
  overflow: hidden;
  border-color: rgba(196,184,168,.68);
  background: linear-gradient(145deg, rgba(255,252,246,.94), rgba(225,224,216,.7));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 11px 28px rgba(47,42,36,.05);
}

.shortcut::before {
  content: "";
  position: absolute;
  width: 116px;
  height: 116px;
  right: -44px;
  top: -50px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(83,111,124,.24), rgba(83,111,124,0) 70%);
  pointer-events: none;
}

.shortcut > * { position: relative; z-index: 1; }
.shortcut:nth-child(2) { border-color: rgba(184,184,179,.7); background: linear-gradient(145deg, rgba(251,249,245,.95), rgba(213,218,217,.74)); }
.shortcut:nth-child(2)::before { background: radial-gradient(circle, rgba(52,66,72,.22), rgba(52,66,72,0) 70%); }
.shortcut:nth-child(3) { border-color: rgba(201,188,170,.72); background: linear-gradient(145deg, rgba(255,251,243,.95), rgba(224,215,202,.74)); }
.shortcut:nth-child(3)::before { background: radial-gradient(circle, rgba(113,94,72,.18), rgba(113,94,72,0) 70%); }
.shortcut:nth-child(4) { border-color: rgba(186,195,183,.7); background: linear-gradient(145deg, rgba(251,250,244,.95), rgba(213,221,211,.76)); }
.shortcut:nth-child(4)::before { background: radial-gradient(circle, rgba(72,102,84,.2), rgba(72,102,84,0) 70%); }
.shortcut:hover { border-color: #b9afa2; box-shadow: 0 16px 36px rgba(47,42,36,.09); }

.shortcut-icon,
.shortcut:nth-child(2) .shortcut-icon,
.shortcut:nth-child(3) .shortcut-icon,
.shortcut:nth-child(4) .shortcut-icon {
  width: 36px;
  height: 36px;
  color: #f7f6f1;
  border-radius: 12px;
  background: linear-gradient(145deg, #354a57, #202d34);
  box-shadow: 0 8px 19px rgba(35,47,54,.19), inset 0 1px 0 rgba(255,255,255,.12);
}

.shortcut:nth-child(2) .shortcut-icon { background: linear-gradient(145deg, #4c5558, #262d2f); }
.shortcut:nth-child(3) .shortcut-icon { background: linear-gradient(145deg, #655f56, #36322d); }
.shortcut:nth-child(4) .shortcut-icon { background: linear-gradient(145deg, #53665b, #29352f); }
.shortcut-icon svg { width: 20px; height: 20px; }
.shortcut::after { color: #727a76; }

.asset-badge.new { background: var(--signal); }
.tag.blue { color: #344d58; background: #e8ece9; }

.category-tab.active,
.primary-btn,
.upload-fab {
  border-color: rgba(255,255,255,.08);
  color: #fff;
  background: linear-gradient(145deg, #334a58 0%, #22323b 52%, #171e22 100%);
  box-shadow: 0 14px 30px rgba(28,39,45,.22), inset 0 1px 0 rgba(255,255,255,.1);
}

.primary-btn:hover, .upload-fab:hover { background: linear-gradient(145deg, #3d5665, #273a45 52%, #1b2429); }

.bottom-nav {
  border-color: rgba(196,185,170,.76);
  background: rgba(255,250,243,.88);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 10px 34px rgba(45,39,33,.14);
}

.nav-item.active { color: #283d48; background: #e9e3d9; }
.sheet { background: linear-gradient(180deg, #fbf7f0, #f3ede4); }
.close-btn { background: #eae3d9; }
.upload-field select, .list-tools select { border-color: var(--line); background: var(--surface); }
.info-cell { border-radius: 10px; background: #ece5db; }
.certificate-sheet { background: #e8e4dc; }
.certificate-frame { background: #d5d0c6; }
.document-download { color: #2f4b59; }
.toast { border-color: rgba(198,187,172,.72); background: rgba(255,250,243,.96); }

@media (max-width: 760px) {
  .hero::after { width: 190px; height: 190px; right: -98px; top: -92px; }
  .shortcut-icon,
  .shortcut:nth-child(2) .shortcut-icon,
  .shortcut:nth-child(3) .shortcut-icon,
  .shortcut:nth-child(4) .shortcut-icon { width: 31px; height: 31px; }
  .shortcut-icon svg { width: 18px; height: 18px; }
}