@font-face {
  font-family: "Poppins";
  src: url("assets/poppins-400.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/poppins-600.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/poppins-700.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root { color-scheme: dark; --green: #1fa565; --panel: #17231e; --line: #30423a; --muted: #8fa198; }
* { box-sizing: border-box; }

body {
  background:
    radial-gradient(circle at 85% 10%, rgba(40, 169, 102, .13), transparent 29%),
    radial-gradient(circle at 8% 92%, rgba(196, 151, 51, .08), transparent 30%),
    #0c1411;
  color: #edf5f1;
  font-family: "Poppins", Arial, sans-serif;
  margin: 0;
  min-height: 100vh;
}

button, a { font: inherit; }

.nora-topbar {
  align-items: center;
  background: rgba(11, 21, 17, .94);
  border-bottom: 1px solid #26372f;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr auto 1fr;
  min-height: 76px;
  padding: 13px max(24px, calc((100vw - 1180px) / 2));
  position: sticky;
  top: 0;
  z-index: 5;
}

.nora-brand { align-items: center; color: #fff; display: flex; gap: 11px; text-decoration: none; }
.nora-mark { align-items: center; background: #1d9b5e; border-radius: 11px; box-shadow: 0 8px 22px rgba(31, 165, 101, .2); display: flex; font-size: 17px; font-weight: 700; height: 43px; justify-content: center; width: 43px; }
.nora-brand strong, .nora-brand small { display: block; }
.nora-brand strong { font-size: 13px; letter-spacing: .12em; }
.nora-brand small { color: #75c99d; font-size: 8px; letter-spacing: .12em; margin-top: 2px; text-transform: uppercase; }

.nora-address { align-items: center; background: #111d18; border: 1px solid #2d4037; border-radius: 999px; color: #b9c9c1; display: flex; font-size: 8px; gap: 7px; padding: 8px 11px; }
.nora-address i { background: #45cc84; border-radius: 50%; box-shadow: 0 0 0 4px rgba(69, 204, 132, .1); height: 5px; width: 5px; }
.nora-address b { background: #203b2d; border-radius: 999px; color: #76d5a3; font-size: 6px; letter-spacing: .08em; padding: 4px 6px; }
.back-link { color: #93aaa0; font-size: 8px; justify-self: end; text-decoration: none; }
.back-link:hover { color: #d8e8df; }

.nora-shell { margin: 0 auto; max-width: 1180px; padding: 42px 24px 70px; }
.nora-hero { align-items: center; background: linear-gradient(135deg, #1c2b24, #142019 64%, #1e392b); border: 1px solid #34483e; border-radius: 19px; box-shadow: 8px 10px 0 #195b39, 18px 24px 50px rgba(0,0,0,.25); display: flex; justify-content: space-between; min-height: 177px; padding: 29px 32px; }
.nora-hero p, .nora-inbox header p { color: #58c88c; font-size: 8px; font-weight: 700; letter-spacing: .14em; margin: 0 0 7px; text-transform: uppercase; }
.nora-hero h1 { font-size: clamp(29px, 4vw, 44px); letter-spacing: -.04em; margin: 0 0 10px; }
.nora-hero > div > span { color: #94a89e; display: block; font-size: 10px; max-width: 600px; }

.nora-hero-status { background: rgba(8, 17, 13, .58); border: 1px solid #345540; border-radius: 13px; min-width: 260px; padding: 15px; }
.nora-hero-status small { color: #769083; display: block; font-size: 7px; text-transform: uppercase; }
.nora-hero-status strong { align-items: center; display: flex; font-size: 10px; gap: 7px; margin: 6px 0; }
.nora-hero-status strong i { background: #43d183; border-radius: 50%; height: 7px; width: 7px; }
.nora-hero-status code { color: #63c991; font-size: 7px; }

.nora-summary { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin: 31px 0 18px; }
.nora-summary article { background: #15211c; border: 1px solid #2e4038; border-radius: 13px; padding: 17px 18px; }
.nora-summary span { color: #7e9288; display: block; font-size: 7px; }
.nora-summary strong { color: #e8f2ed; display: block; font-size: 14px; margin-top: 6px; }

.nora-inbox { background: rgba(22, 34, 29, .94); border: 1px solid #30433a; border-radius: 17px; box-shadow: 0 18px 45px rgba(0,0,0,.18); padding: 24px; }
.nora-inbox > header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 17px; }
.nora-inbox h2 { font-size: 20px; margin: 0; }
.nora-inbox header button { background: #1c3027; border: 1px solid #3a5949; border-radius: 8px; color: #a7c7b7; cursor: pointer; font-size: 8px; padding: 9px 11px; }
.nora-inbox header button:hover { background: #244334; color: #d9efe4; }

.nora-route-note { align-items: center; background: #142a20; border: 1px solid #315a44; border-radius: 10px; display: flex; gap: 11px; margin-bottom: 17px; padding: 11px 13px; }
.nora-route-note > span { align-items: center; background: #238a55; border-radius: 50%; display: flex; flex: 0 0 25px; font-size: 9px; height: 25px; justify-content: center; }
.nora-route-note p { color: #8eaa9c; font-size: 8px; line-height: 1.5; margin: 0; }
.nora-route-note strong { color: #d1e6dc; }

.nora-request-list { display: grid; gap: 10px; }
.nora-request-card { background: #111d18; border: 1px solid #2c3f36; border-radius: 12px; display: grid; gap: 16px; grid-template-columns: 1fr minmax(220px, 2fr) auto; padding: 16px; }
.request-person strong, .request-message strong { color: #eef6f2; display: block; font-size: 10px; }
.request-person span, .request-person a, .request-message p { color: #83978d; display: block; font-size: 8px; line-height: 1.55; margin: 4px 0 0; }
.request-person a { color: #69cb97; text-decoration: none; }
.request-message p { margin-top: 6px; }
.request-meta { align-items: flex-end; display: flex; flex-direction: column; gap: 7px; }
.request-meta b { background: #1b4d34; border: 1px solid #337551; border-radius: 999px; color: #83d9a9; font-size: 6px; letter-spacing: .08em; padding: 5px 7px; }
.request-meta time, .request-meta code { color: #71847b; font-size: 7px; }

.nora-empty { border: 1px dashed #3a4f45; border-radius: 12px; color: #82958b; padding: 35px 20px; text-align: center; }
.nora-empty[hidden] { display: none; }
.nora-empty > span { align-items: center; background: #1b3628; border-radius: 10px; color: #67cd96; display: flex; font-size: 18px; height: 42px; justify-content: center; margin: 0 auto 13px; width: 42px; }
.nora-empty h3 { color: #d7e6de; font-size: 14px; margin: 0 0 7px; }
.nora-empty p { font-size: 8px; line-height: 1.6; margin: 0 auto 14px; max-width: 520px; }
.nora-empty a { background: #1e8f58; border-radius: 8px; color: #fff; display: inline-flex; font-size: 8px; font-weight: 600; padding: 9px 11px; text-decoration: none; }

footer { color: #65786e; font-size: 7px; padding: 0 20px 25px; text-align: center; }

@media (max-width: 760px) {
  .nora-topbar { grid-template-columns: 1fr auto; padding: 12px 16px; }
  .nora-address { display: none; }
  .nora-shell { padding: 25px 14px 50px; }
  .nora-hero { align-items: flex-start; flex-direction: column; gap: 20px; padding: 24px 21px; }
  .nora-hero-status { min-width: 0; width: 100%; }
  .nora-summary { grid-template-columns: 1fr; }
  .nora-inbox { padding: 18px 14px; }
  .nora-request-card { grid-template-columns: 1fr; }
  .request-meta { align-items: flex-start; }
}