:root {
  --it-navy:#071b24;
  --it-navy2:#0b2932;
  --it-teal:#18a88e;
  --it-aqua:#48d6bd;
  --it-orange:#e06d42;
  --it-paper:#f7faf7;
  --it-card:#ffffff;
  --it-ink:#102b35;
  --it-muted:#607572;
  --it-line:#d7e4df;
  --it-soft:#edf3ef;
  --it-danger:#b64a46;
}

* { box-sizing:border-box; }

body {
  margin:0;
  background:var(--it-paper);
  color:var(--it-ink);
  font-family:Inter,system-ui,sans-serif;
}

a { color:inherit; }
button,input,select,textarea { font:inherit; }

.it-topbar {
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:18px;
  padding:12px 4vw;
  background:rgba(7,27,36,.97);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.it-brand {
  display:flex;
  align-items:center;
  gap:11px;
  color:white;
  text-decoration:none;
  font-weight:900;
}

.it-brand img {
  width:48px;
  height:48px;
  border-radius:14px;
  object-fit:cover;
}

.it-topbar nav {
  display:flex;
  gap:18px;
  margin-left:auto;
}

.it-topbar nav a {
  color:#dce9e4;
  text-decoration:none;
  font-weight:800;
}

.it-topbar nav a.active { color:var(--it-aqua); }

.it-top-button,
.it-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 16px;
  border:0;
  border-radius:14px;
  background:var(--it-orange);
  color:#fff;
  text-decoration:none;
  font-weight:900;
}

.it-button.secondary,
.it-top-button.secondary {
  border:1px solid var(--it-line);
  background:white;
  color:var(--it-ink);
}

.it-button.danger {
  background:#fff1f0;
  color:var(--it-danger);
  border:1px solid #f0c8c5;
}

.it-hero {
  padding:clamp(54px,8vw,110px) 5vw;
  background:
    radial-gradient(circle at 78% 20%,rgba(64,214,183,.26),transparent 28%),
    linear-gradient(145deg,var(--it-navy),#0c4149);
  color:white;
}

.it-hero-inner {
  max-width:1280px;
  margin:auto;
}

.it-eyebrow {
  color:var(--it-aqua);
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.it-hero h1 {
  max-width:900px;
  margin:10px 0;
  font-family:Oswald,sans-serif;
  font-size:clamp(58px,9vw,112px);
  line-height:.9;
  text-transform:uppercase;
}

.it-hero p {
  max-width:760px;
  color:#c8d9d3;
  font-size:20px;
  line-height:1.6;
}

.it-shell {
  max-width:1320px;
  margin:auto;
  padding:clamp(30px,5vw,70px) clamp(16px,4vw,48px);
}

.it-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
}

.it-head h2 {
  margin:6px 0 0;
  font-size:clamp(34px,5vw,58px);
}

.it-filters {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:12px;
  margin-bottom:26px;
}

.it-filters input,
.it-filters select,
.it-field input,
.it-field select,
.it-field textarea {
  width:100%;
  min-height:52px;
  padding:13px 15px;
  border:1px solid var(--it-line);
  border-radius:14px;
  background:white;
  color:var(--it-ink);
}

.it-field textarea {
  min-height:110px;
  resize:vertical;
}

.it-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.it-package {
  overflow:hidden;
  border:1px solid var(--it-line);
  border-radius:24px;
  background:white;
  box-shadow:0 18px 46px rgba(15,50,55,.08);
}

.it-package-art {
  position:relative;
  min-height:260px;
  display:flex;
  align-items:flex-end;
  padding:22px;
  background:
    radial-gradient(circle at 78% 18%,rgba(224,109,66,.42),transparent 23%),
    linear-gradient(145deg,#0d5e68,var(--it-navy));
  background-size:cover;
  background-position:center;
  color:white;
  text-decoration:none;
}

.it-package-art small {
  color:var(--it-aqua);
  font-weight:900;
  letter-spacing:.12em;
}

.it-package-art h3 {
  margin:8px 0 0;
  font-family:Oswald,sans-serif;
  font-size:38px;
  line-height:.98;
  text-transform:uppercase;
}

.it-package-body { padding:20px; }

.it-package-body p {
  color:var(--it-muted);
  line-height:1.55;
}

.it-meta {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:15px 0;
}

.it-meta span {
  padding:6px 9px;
  border-radius:999px;
  background:var(--it-soft);
  font-size:11px;
  font-weight:800;
}

.it-product-hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  overflow:hidden;
  border:1px solid var(--it-line);
  border-radius:28px;
  background:white;
  box-shadow:0 22px 60px rgba(15,50,55,.08);
}

.it-product-art {
  min-height:520px;
  background:
    radial-gradient(circle at 78% 18%,rgba(224,109,66,.43),transparent 24%),
    linear-gradient(145deg,#0d5e68,var(--it-navy));
  background-size:cover;
  background-position:center;
}

.it-product-copy {
  display:grid;
  align-content:center;
  padding:clamp(28px,5vw,58px);
}

.it-product-copy h1 {
  margin:8px 0;
  font-family:Oswald,sans-serif;
  font-size:clamp(46px,6vw,78px);
  line-height:.92;
  text-transform:uppercase;
}

.it-product-copy p {
  color:var(--it-muted);
  font-size:18px;
  line-height:1.6;
}

.it-section {
  margin-top:38px;
  padding:clamp(22px,4vw,38px);
  border:1px solid var(--it-line);
  border-radius:24px;
  background:white;
}

.it-section h2 {
  margin:6px 0 20px;
  font-size:34px;
}

.it-section-content {
  color:var(--it-muted);
  line-height:1.7;
  white-space:pre-wrap;
}

.it-resource-list {
  display:grid;
  gap:12px;
}

.it-resource {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  padding:16px;
  border:1px solid var(--it-line);
  border-radius:16px;
  background:#fbfdfb;
}

.it-resource-icon {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:14px;
  background:#eaf5f1;
  color:var(--it-teal);
  font-weight:900;
}

.it-admin-layout {
  display:grid;
  grid-template-columns:minmax(260px,.7fr) minmax(0,1.6fr);
  gap:22px;
  align-items:start;
}

.it-panel {
  padding:22px;
  border:1px solid var(--it-line);
  border-radius:24px;
  background:white;
  box-shadow:0 16px 40px rgba(15,50,55,.06);
}

.it-sidebar {
  position:sticky;
  top:92px;
  max-height:calc(100vh - 116px);
  overflow:auto;
}

.it-admin-list {
  display:grid;
  gap:10px;
}

.it-admin-item {
  padding:14px;
  border:1px solid var(--it-line);
  border-radius:15px;
  background:#fbfdfb;
}

.it-admin-item.selected {
  border-color:var(--it-teal);
  box-shadow:0 0 0 3px rgba(24,168,142,.1);
}

.it-admin-item h3 { margin:5px 0; }

.it-admin-actions {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:10px;
}

.it-admin-actions button,
.it-admin-actions a {
  min-height:36px;
  padding:0 10px;
  border:1px solid var(--it-line);
  border-radius:10px;
  background:white;
  color:var(--it-ink);
  text-decoration:none;
  font-size:12px;
  font-weight:900;
}

.it-form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.it-field {
  display:grid;
  gap:7px;
}

.it-field.full { grid-column:1 / -1; }
.it-field label { font-weight:800; }

.it-subbuilder {
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid var(--it-line);
}

.it-row-card {
  margin-top:12px;
  padding:14px;
  border:1px solid var(--it-line);
  border-radius:16px;
  background:#fbfdfb;
}

.it-row-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.it-row-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.it-savebar {
  position:sticky;
  bottom:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:24px;
  padding:14px 16px;
  border:1px solid var(--it-line);
  border-radius:18px;
  background:rgba(255,255,255,.96);
  box-shadow:0 -8px 28px rgba(15,50,55,.08);
}

.it-empty {
  padding:30px;
  border:1px dashed #b9cbc6;
  border-radius:18px;
  background:var(--it-soft);
  color:var(--it-muted);
  text-align:center;
}

@media(max-width:950px) {
  .it-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .it-product-hero { grid-template-columns:1fr; }
  .it-product-art { min-height:360px; }
  .it-admin-layout { grid-template-columns:1fr; }
  .it-sidebar { position:static; max-height:none; }
}

@media(max-width:650px) {
  .it-topbar nav { display:none; }
  .it-brand span { display:none; }
  .it-shell { padding:24px 14px; }
  .it-grid,
  .it-filters,
  .it-form-grid,
  .it-row-grid { grid-template-columns:1fr; }
  .it-field.full { grid-column:auto; }
  .it-product-art { min-height:280px; }
  .it-resource { grid-template-columns:auto 1fr; }
  .it-resource .it-button { grid-column:1 / -1; width:100%; }
}