html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #000;
}
a { color: rgba(0,0,0,0.55); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: #000; }
input:focus, select:focus { outline: 2px solid #244457; outline-offset: -1px; }
[hidden] { display: none !important; }

.om-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #17303f 0%, #244457 60%, #2e5670 100%);
  padding: 56px 16px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.om-bg-stripes {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0) 3px, rgba(255,255,255,0) 9px, rgba(255,255,255,0.03) 12px);
}
.om-bg-glow {
  position: absolute; top: -220px; right: -180px; width: 720px; height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,183,0,0.35) 0%, rgba(251,183,0,0) 70%);
  pointer-events: none;
}
.om-sun {
  position: absolute; top: 60px; right: 120px; width: 160px; height: 160px;
  border-radius: 50%; background: #fbb700;
  box-shadow: 0 0 120px 40px rgba(251,183,0,0.45);
  opacity: 0.9; pointer-events: none;
}
.om-bg-corner {
  position: absolute; bottom: -260px; left: -200px; width: 780px; height: 780px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46,86,112,0.9) 0%, rgba(46,86,112,0) 70%);
  pointer-events: none;
}
.om-bg-grid {
  position: absolute; bottom: 0; left: 0; right: 0; height: 38%;
  pointer-events: none; opacity: 0.16;
  background: linear-gradient(rgba(255,255,255,0.7) 1.5px, transparent 1.5px),
              linear-gradient(90deg, rgba(255,255,255,0.7) 1.5px, transparent 1.5px);
  background-size: 72px 48px;
  transform: perspective(600px) rotateX(58deg);
  transform-origin: bottom;
}
.om-footer {
  position: absolute; left: 0; right: 0; bottom: 22px;
  text-align: center; font-size: 13px; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45); pointer-events: none;
}
.om-center {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(100vh - 112px);
}
.om-card {
  border-radius: 10px; background: #ffffff;
  padding: 48px 56px; width: 100%; max-width: 860px;
  box-sizing: border-box;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
  display: flex; justify-content: center;
}
.om-inner { width: 100%; max-width: 720px; }

.om-logo { height: 56px; display: block; margin-bottom: 28px; }
.om-title { margin: 0; font-size: 42px; font-weight: 500; letter-spacing: -0.025em; color: #244457; }
.om-subtitle { margin: 10px 0 0; font-size: 17px; color: rgba(0,0,0,0.45); }

.om-fields { margin-top: 36px; display: flex; flex-direction: column; gap: 26px; }
.om-field { display: flex; flex-direction: column; gap: 6px; }
.om-field-artiklar { gap: 8px; }
.om-label { font-size: 15px; font-weight: 600; color: rgba(0,0,0,0.6); }

.om-btngrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.om-optbtn {
  height: 54px; border: 1px solid rgba(0,0,0,0.15); border-radius: 8px;
  background-color: #fff; color: #244457;
  font-family: inherit; font-size: 17px; font-weight: 500; cursor: pointer;
}
.om-optbtn.selected { background-color: #244457; color: #ffffff; border-color: #244457; }

.om-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.om-input {
  height: 54px; border: 1px solid rgba(0,0,0,0.15); border-radius: 8px;
  padding: 0 16px; font-size: 17px; font-family: inherit;
  box-sizing: border-box; width: 100%; background: #fff;
}
.om-input:disabled { background: #f4f5f7; color: #244457; opacity: 1; }

.om-rows { display: flex; flex-direction: column; gap: 8px; }
.om-artrow {
  display: grid; grid-template-columns: 1fr 120px 44px; gap: 8px; align-items: start;
}
.om-artrow .om-search-wrap { position: relative; }
.om-artrow input { padding: 0 12px; }
.om-dropdown {
  position: absolute; top: 58px; left: 0; right: 0; z-index: 20;
  background: #fff; border: 1px solid rgba(0,0,0,0.12); border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  max-height: 320px; overflow-y: auto;
  display: flex; flex-direction: column;
}
.om-dropdown-cat {
  padding: 10px 14px 6px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(0,0,0,0.4); background: #eef0f3;
}
.om-dropdown-item {
  text-align: left; padding: 12px 14px; border: none; background: #fff;
  font-family: inherit; font-size: 15px; color: #244457; cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.om-dropdown-item:hover { background: rgba(251,183,0,0.12); }
.om-dropdown-empty { padding: 12px 14px; font-size: 14px; color: rgba(0,0,0,0.4); }

.om-removebtn {
  height: 54px; width: 44px; border: 1px solid rgba(0,0,0,0.15); border-radius: 8px;
  background: #fff; font-size: 20px; color: rgba(0,0,0,0.45); cursor: pointer;
}
.om-removebtn:hover { color: #000; background: rgba(0,0,0,0.02); }

.om-addbtn {
  height: 44px; padding: 0 18px; border: 1px solid rgba(0,0,0,0.15); border-radius: 8px;
  background: #fff; font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
}
.om-addbtn:hover { background: rgba(0,0,0,0.02); }

.om-error { color: #d83a52; font-size: 15px; }

.om-submit {
  margin-top: 8px; height: 56px; width: 100%; border: none; border-radius: 8px;
  background-color: #fbb700; color: #244457;
  font-family: inherit; font-size: 18px; font-weight: 600; cursor: pointer;
}
.om-submit:hover { background-color: #e5a800; }
.om-submit:disabled { opacity: 0.6; cursor: default; }

.om-done { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.om-done-check {
  width: 48px; height: 48px; border-radius: 50%;
  background: #fbb700; color: #244457;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.om-done-title { margin: 0; font-size: 30px; font-weight: 500; letter-spacing: -0.025em; color: #244457; }
.om-done-text { margin: 0; font-size: 14px; color: rgba(0,0,0,0.45); }
.om-resetbtn {
  margin-top: 8px; height: 40px; padding: 0 18px;
  border: 1px solid rgba(0,0,0,0.15); border-radius: 8px; background: #fff;
  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.om-resetbtn:hover { background: rgba(0,0,0,0.02); }

@media (max-width: 640px) {
  .om-page { padding: 16px 10px 48px; }
  .om-card { padding: 28px 20px; border-radius: 8px; }
  .om-title { font-size: 30px; }
  .om-logo { height: 44px; margin-bottom: 20px; }
  .om-artrow { grid-template-columns: 1fr 84px 40px; }
  .om-two-col { grid-template-columns: 1fr; }
  .om-sun { right: 20px; top: 30px; width: 90px; height: 90px; }
}