:root {
  --bg: #f2f7fb;
  --paper: #ffffff;
  --ink: #071d35;
  --muted: #607487;
  --line: #d6e2ec;
  --blue: #2f7bff;
  --violet: #5368ee;
  --cyan: #18cec4;
  --amber: #f2b84b;
  --green: #0f9f72;
  --red: #bd3b55;
  --shadow: 0 18px 48px rgba(7, 29, 53, .11);
}

html,
body {
  background:
    radial-gradient(circle at 82% -10%, rgba(47, 123, 255, .08), transparent 28%),
    radial-gradient(circle at 12% 94%, rgba(24, 206, 196, .06), transparent 24%),
    var(--bg);
}

.sidebar {
  background:
    radial-gradient(circle at 26% 13%, rgba(47, 123, 255, .22), transparent 25%),
    radial-gradient(circle at 98% 86%, rgba(24, 206, 196, .13), transparent 28%),
    linear-gradient(180deg, #06182c 0%, #071d35 58%, #041424 100%);
  border-right: 1px solid rgba(104, 205, 244, .12);
  box-shadow: 12px 0 42px rgba(4, 20, 36, .08);
}

.brand {
  border-bottom-color: rgba(255, 255, 255, .10);
}

.brand img {
  width: 54px;
  height: 54px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .24));
}

.brand b {
  font-size: 13px;
  letter-spacing: .45px;
}

.brand small {
  color: #9fb2c4;
}

.nav button {
  color: #c5d3df;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.nav button:hover {
  transform: translateX(2px);
  background: rgba(47, 123, 255, .11);
}

.nav button.active {
  color: #ffffff;
  background: linear-gradient(90deg, rgba(47, 123, 255, .24), rgba(24, 206, 196, .08));
  box-shadow: inset 3px 0 0 var(--cyan), 0 7px 22px rgba(47, 123, 255, .10);
}

.scope {
  position: relative;
  overflow: hidden;
  border-color: rgba(79, 190, 231, .25);
  background: linear-gradient(145deg, rgba(47, 123, 255, .09), rgba(24, 206, 196, .035));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
}

.scope::before {
  content: '◇';
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-bottom: 7px;
  border-radius: 7px;
  color: #f2b84b;
  border: 1px solid rgba(242, 184, 75, .42);
  background: rgba(242, 184, 75, .08);
}

.scope::after {
  content: 'IDEJE  •  RAZVOJ  •  OBLIKOVANJE  •  OBJAVA';
  display: block;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  color: #5edbd3;
  font-size: 8px;
  line-height: 1.5;
  letter-spacing: 1.2px;
}

.scope p {
  color: #a9b9c7;
}

.top {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: #d7e4ee;
  box-shadow: 0 8px 28px rgba(7, 29, 53, .035);
}

.mini-brand img {
  filter: drop-shadow(0 4px 9px rgba(7, 29, 53, .14));
}

.search input {
  background: #f7fafc;
  border-color: #d7e3ec;
}

.search input:focus {
  border-color: #2f7bff;
  box-shadow: 0 0 0 3px rgba(47, 123, 255, .12);
}

.btn.primary,
.login-btn {
  background: linear-gradient(135deg, #2f7bff, #258fe9 58%, #18bcb5);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(47, 123, 255, .18);
}

.btn.primary:hover,
.login-btn:hover {
  filter: brightness(1.035);
  transform: translateY(-1px);
}

.hero {
  min-height: 340px;
  padding: 34px;
  background:
    radial-gradient(circle at 76% 12%, rgba(53, 167, 255, .26), transparent 27%),
    radial-gradient(circle at 98% 82%, rgba(24, 206, 196, .18), transparent 30%),
    linear-gradient(122deg, #06182c 0%, #0a2a4a 56%, #0c4f72 100%);
  border: 1px solid rgba(91, 190, 225, .16);
  box-shadow: 0 22px 60px rgba(6, 24, 44, .18);
}

.hero::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 88%;
  width: auto;
  background: url('./identity-horizon.svg') center bottom / cover no-repeat;
  opacity: .86;
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  background:
    linear-gradient(90deg, rgba(6, 24, 44, .88) 0%, rgba(6, 24, 44, .72) 31%, rgba(6, 24, 44, .18) 63%, transparent 100%),
    radial-gradient(circle at 13% 18%, rgba(47, 123, 255, .18), transparent 25%);
  pointer-events: none;
}

.hero > div {
  position: relative;
  z-index: 2;
}

.hero h1 {
  max-width: 760px;
  font-size: 35px;
  letter-spacing: -.7px;
  text-wrap: balance;
}

.hero-accent {
  color: #f2b84b;
}

.eyebrow {
  color: #70e0da;
  letter-spacing: 2.35px;
}

.hero p {
  max-width: 700px;
  color: #cfdae5;
}

.btn.glass {
  border-color: rgba(127, 220, 238, .34);
  background: rgba(4, 20, 36, .24);
  backdrop-filter: blur(8px);
}

.identity-card {
  border: 1px solid rgba(209, 228, 239, .92);
  box-shadow: 0 22px 55px rgba(4, 20, 36, .22);
}

.identity-card::after {
  content: 'IDEJE POVEZUJEMO  ·  GRADIMO BOLJI SUTRA';
  display: block;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid #e3edf4;
  color: #277be5;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 1.45px;
  text-align: right;
}

.palette i:nth-child(1) { background: #06182c; }
.palette i:nth-child(2) { background: #2f7bff; }
.palette i:nth-child(3) { background: #35a7ff; }
.palette i:nth-child(4) { background: #18cec4; }
.palette i:nth-child(5) { background: #f2b84b; }

.metrics div {
  position: relative;
  min-height: 86px;
  padding: 16px 15px 16px 72px;
  overflow: hidden;
  border-color: #dbe7ef;
  box-shadow: 0 8px 26px rgba(7, 29, 53, .045);
}

.metrics div::before {
  position: absolute;
  left: 16px;
  top: 17px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 700;
}

.metrics div:nth-child(1)::before { content: '▤'; color: #2f7bff; background: #edf4ff; }
.metrics div:nth-child(2)::before { content: '◇'; color: #0d9f98; background: #e9faf8; }
.metrics div:nth-child(3)::before { content: '⌖'; color: #c78b1d; background: #fff6df; }
.metrics div:nth-child(4)::before { content: '◉'; color: #5368ee; background: #f0efff; }

.card,
.library-card,
.project-card,
.file-row,
.toolbox-shell,
.toolbar,
.studio-tools,
.editor,
.drop {
  border-color: #dbe6ee;
}

.action-card {
  position: relative;
  overflow: hidden;
  padding-top: 20px;
}

.action-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2f7bff, #18cec4, #f2b84b);
  opacity: .72;
}

.action-card:hover,
.library-card:hover,
.project-card:hover {
  box-shadow: 0 15px 36px rgba(7, 29, 53, .085);
}

.chip.active,
.tool.active,
.layer-row.active,
.toolbox-toggle[aria-expanded='true'] {
  background: #edf5ff;
  border-color: #9ec4ff;
  color: #155bc0;
}

.note.idea { border-top-color: #f2b84b; }
.note.visual { border-top-color: #2f7bff; }
.note.technical { border-top-color: #18cec4; }
.note.selected { outline-color: rgba(47, 123, 255, .18); }

.board-shell,
.canvas-shell,
.irp-large-sketch-preview {
  background: #dce8ef;
  border-color: #c9d9e5;
}

.board {
  background-color: #f8fbfd;
  background-image: radial-gradient(#bfd0dc 1px, transparent 1px);
}

.canvas-shell svg {
  background-image:
    linear-gradient(rgba(47, 123, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 206, 196, .035) 1px, transparent 1px);
}

.pen-ui .handle-line,
.node-editor .handle-line { stroke: #18bcb5; }
.pen-ui .anchor,
.node-editor .anchor { stroke: #2f7bff; }
.pen-ui .handle,
.node-editor .handle { stroke: #18bcb5; }
.pen-preview { stroke: #2f7bff; }

.notice {
  border-left-color: #f2b84b;
  background: #fff9e9;
}

.notice.info {
  border-color: #18cec4;
  background: #ecfbfa;
  color: #0b6465;
}

.editor:focus,
.irp-rich-edit:focus {
  border-color: #2f7bff;
  box-shadow: 0 0 0 3px rgba(47, 123, 255, .11);
}

.editor blockquote {
  border-left-color: #18cec4;
  background: #effbf9;
}

.editor .irp-callout {
  border-color: #b9d6fb;
  border-left-color: #2f7bff;
  background: #f3f8ff;
}

.loading-screen {
  background:
    radial-gradient(circle at 50% 38%, rgba(47, 123, 255, .14), transparent 18%),
    radial-gradient(circle at 62% 55%, rgba(24, 206, 196, .09), transparent 24%),
    #eef5f8;
}

.login-screen {
  background:
    radial-gradient(circle at 13% 15%, rgba(47, 123, 255, .15), transparent 28%),
    radial-gradient(circle at 86% 82%, rgba(24, 206, 196, .11), transparent 31%),
    #eef5f8;
}

.login-shell {
  border-color: #d6e3ec;
  box-shadow: 0 30px 85px rgba(7, 29, 53, .17);
}

.login-identity {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(110deg, rgba(6, 24, 44, .95), rgba(7, 38, 65, .88)),
    url('./identity-horizon.svg') center bottom / cover no-repeat;
}

.login-identity::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 22%, rgba(47, 123, 255, .20), transparent 27%);
  pointer-events: none;
}

.login-identity > * {
  position: relative;
  z-index: 1;
}

.logo-row img {
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .28));
}

.identity-badges span {
  border-color: rgba(112, 224, 218, .26);
  background: rgba(24, 206, 196, .05);
}

.public-head {
  border-bottom-color: #d9e6ee;
  box-shadow: 0 7px 24px rgba(7, 29, 53, .04);
}

.public-head::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #2f7bff, #18cec4, #f2b84b);
}

.public-brand img {
  filter: drop-shadow(0 4px 10px rgba(7, 29, 53, .13));
}

.public-post {
  border-color: #dce7ef;
  box-shadow: 0 9px 28px rgba(7, 29, 53, .045);
}

.irp-overline,
.irp-preview-kicker { color: #2f7bff; }
.irp-preview-editorial { border-top-color: #2f7bff; }
.irp-preview-panel {
  background: radial-gradient(circle at 90% 5%, rgba(24, 206, 196, .10), transparent 25%), linear-gradient(145deg, #fff, #f4f9ff);
  border-color: #c6dff5;
}
.irp-preview-gallery {
  background: radial-gradient(circle at 82% 12%, rgba(24, 206, 196, .15), transparent 30%), linear-gradient(145deg, #06182c, #0b3558);
}
.irp-styled-list-card::before { background: linear-gradient(#2f7bff, #18cec4, #f2b84b); }

@media (max-width: 760px) {
  .hero {
    min-height: 0;
    padding: 22px;
  }
  .hero::before {
    opacity: .42;
  }
  .hero h1 {
    font-size: 27px;
  }
  .metrics div {
    padding-left: 62px;
  }
  .metrics div::before {
    left: 12px;
  }
}