:root {
  --workflow-dark: #141722;
  --workflow-dark-soft: #202435;
  --workflow-violet: #7368f5;
  --workflow-mint: #74d8c5;
  --workflow-danger: #ef6d83;
}

.content,
.content * { min-width: 0; }
.content h1,
.content h2,
.content h3,
.content p { overflow-wrap: anywhere; }
.content button,
.content a { -webkit-tap-highlight-color: transparent; }
.topbar { isolation: isolate; }
.bell-button.has-news::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -23px 0 0 23px;
  border: 2px solid white;
  border-radius: 50%;
  background: #6f63ef;
}
.notice-popover { width: min(340px, calc(100vw - 30px)); }
.notice-list { display: grid; gap: 8px; margin-top: 12px; }
.notice-item {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 3px;
  background: #f8f8fe;
}
.notice-item b { font-size: 11px; }
.notice-item span { color: var(--muted); font-size: 9px; line-height: 1.4; }

.workflow-empty {
  position: relative;
  min-height: 330px;
  padding: clamp(22px, 4vw, 44px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 25px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(220px, .85fr) minmax(280px, 1.1fr);
  align-items: center;
  gap: 34px;
  color: white;
  background: linear-gradient(135deg, #151824, #22263a);
}
.workflow-empty img {
  width: min(100%, 310px);
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 38px;
  object-fit: cover;
  box-shadow: 0 28px 70px rgba(2,4,12,.38);
}
.workflow-empty h3 { margin: 0 0 12px; font-size: clamp(25px, 3vw, 38px); letter-spacing: -.045em; }
.workflow-empty p { max-width: 560px; margin: 0 0 22px; color: #b5b9ca; line-height: 1.55; }

.real-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin: 25px 0; }
.real-metric {
  position: relative;
  min-height: 158px;
  padding: 20px;
  border: 1px solid white;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.78);
  box-shadow: 0 14px 38px rgba(61,67,104,.07);
}
.real-metric span { position: relative; z-index: 2; color: #72788b; font-size: 11px; }
.real-metric strong { position: relative; z-index: 2; display: block; margin: 24px 0 8px; font-size: 31px; letter-spacing: -.05em; }
.real-metric small { position: relative; z-index: 2; display: block; max-width: 62%; color: #58a56c; font-size: 9px; line-height: 1.4; }
.real-metric img { position: absolute; right: -5px; bottom: -12px; width: 118px; aspect-ratio: 1; border-radius: 28px; object-fit: cover; }

.workflow-hero {
  position: relative;
  min-height: 300px;
  margin: 26px 0;
  padding: clamp(27px, 4vw, 48px);
  border-radius: 28px;
  overflow: hidden;
  color: white;
  background: var(--workflow-dark);
}
.workflow-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.workflow-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,14,23,.96) 0 38%, rgba(12,14,23,.32) 73%, rgba(12,14,23,.08)); }
.workflow-hero > div { position: relative; z-index: 2; width: min(570px, 56%); }
.workflow-hero .page-kicker { color: #a69fff; }
.workflow-hero h2 { margin: 15px 0 12px; font-size: clamp(35px, 4vw, 58px); line-height: .95; letter-spacing: -.055em; }
.workflow-hero p { margin: 0 0 22px; color: #b8bccd; line-height: 1.55; }

.order-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.order-card {
  position: relative;
  min-height: 230px;
  padding: 22px;
  border: 1px solid #fff;
  border-radius: 23px;
  overflow: hidden;
  color: white;
  background: #171a26;
  box-shadow: 0 16px 40px rgba(42,47,78,.12);
}
.order-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.order-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(12,14,23,.98), rgba(12,14,23,.42)); }
.order-card > div { position: relative; z-index: 2; max-width: 73%; }
.order-card .status-pill { display: inline-flex; margin-bottom: 35px; }
.order-card h3 { margin: 0 0 9px; font-size: 22px; line-height: 1.1; }
.order-card p { margin: 0 0 17px; color: #c2c5d2; font-size: 11px; line-height: 1.5; }
.order-card-footer { display: flex; align-items: center; gap: 12px; }
.order-card-footer b { font-size: 17px; }
.order-card-footer a { padding: 10px 13px; border-radius: 10px; color: #151722; background: white; text-decoration: none; font-size: 10px; font-weight: 800; }
.status-pill { padding: 7px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #dedcff; background: rgba(32,34,52,.74); backdrop-filter: blur(10px); font-size: 9px; font-weight: 750; }
.status-pill.light { border-color: #dedcf5; color: #5d54dc; background: #efedff; }

.niche-gallery { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 10px; }
.niche-card { position: relative; aspect-ratio: 1.12; border-radius: 18px; overflow: hidden; background: #171a26; }
.niche-card img { width: 100%; height: 100%; object-fit: cover; }
.niche-card span { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; color: white; background: rgba(13,15,25,.7); backdrop-filter: blur(12px); font-size: 10px; font-weight: 750; }

.order-wizard { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .65fr); gap: 16px; align-items: start; }
.wizard-main,
.wizard-summary,
.workflow-panel {
  padding: clamp(20px, 3vw, 31px);
  border: 1px solid #fff;
  border-radius: 25px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 15px 42px rgba(60,66,104,.08);
}
.wizard-summary { position: sticky; top: 105px; overflow: hidden; }
.wizard-summary > img { width: 100%; aspect-ratio: 1.55; margin-bottom: 20px; border-radius: 20px; object-fit: cover; }
.wizard-summary h3 { margin: 0 0 8px; font-size: 21px; }
.wizard-summary p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.wizard-total { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 15px; }
.wizard-total span { color: var(--muted); font-size: 10px; }
.wizard-total strong { font-size: 25px; }
.wizard-progress { height: 7px; margin: 15px 0 27px; border-radius: 99px; overflow: hidden; background: #e3e4ee; }
.wizard-progress i { display: block; width: 25%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#9c92ff,#6559eb); transition: .3s ease; }
.wizard-step h2 { margin: 0 0 8px; font-size: clamp(28px, 3vw, 39px); letter-spacing: -.045em; }
.wizard-step > p { margin: 0 0 24px; color: var(--muted); line-height: 1.5; }
.wizard-step[hidden] { display: none; }
.wizard-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.wizard-fields .wide { grid-column: 1 / -1; }
.wizard-fields label,
.workflow-field { display: grid; gap: 7px; color: #6f7587; font-size: 10px; }
.wizard-fields input:not([type="checkbox"]):not([type="radio"]),
.wizard-fields select,
.wizard-fields textarea,
.workflow-field input,
.workflow-field textarea,
.workflow-field select {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid #dfe1ea;
  border-radius: 14px;
  outline: none;
  color: #161821;
  background: rgba(255,255,255,.92);
}
.wizard-fields textarea,
.workflow-field textarea { min-height: 120px; padding-block: 13px; resize: vertical; line-height: 1.5; }
.wizard-fields input:not([type="checkbox"]):not([type="radio"]):focus,
.wizard-fields select:focus,
.wizard-fields textarea:focus,
.workflow-field input:focus,
.workflow-field textarea:focus { border-color: #8c83f7; box-shadow: 0 0 0 4px rgba(113,104,240,.09); }
.wizard-fields label > span:has(input[type="checkbox"]) {
  min-height: 54px;
  padding: 0 14px;
  border: 1px solid #dfe1ea;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #555c70;
  background: rgba(255,255,255,.76);
  font-size: 11px;
  cursor: pointer;
}
.wizard-fields input[type="checkbox"] {
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 6px;
  accent-color: #7165ef;
  cursor: pointer;
}
.cover-choices { display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); gap: 9px; margin-bottom: 24px; }
.cover-choice { position: relative; aspect-ratio: 1.02; border: 2px solid transparent; border-radius: 17px; overflow: hidden; cursor: pointer; background: #171a26; }
.cover-choice input { position: absolute; opacity: 0; }
.cover-choice img { width: 100%; height: 100%; object-fit: cover; opacity: .83; }
.cover-choice span { position: absolute; left: 7px; right: 7px; bottom: 7px; padding: 8px 5px; border-radius: 9px; color: white; background: rgba(15,17,27,.74); backdrop-filter: blur(9px); text-align: center; font-size: 9px; font-weight: 800; }
.cover-choice:has(input:checked) { border-color: #8075f5; box-shadow: 0 0 0 4px rgba(115,105,241,.13); }
.wizard-actions { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; }
.wizard-actions button { min-height: 50px; padding: 0 20px; border-radius: 14px; font-weight: 800; cursor: pointer; }
.wizard-back { border: 1px solid var(--line); color: #1a1c26; background: white; }
.wizard-next { margin-left: auto; border: 0; color: white; background: linear-gradient(135deg,#8f84ff,#6257eb); box-shadow: 0 13px 28px rgba(96,83,229,.22); }

.order-head {
  position: relative;
  min-height: 310px;
  padding: clamp(25px,4vw,48px);
  border-radius: 28px;
  overflow: hidden;
  color: white;
  background: #151823;
}
.order-head > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .56; }
.order-head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg,rgba(11,13,21,.98) 5%,rgba(11,13,21,.72) 58%,rgba(11,13,21,.14)); }
.order-head-copy { position: relative; z-index: 2; width: min(650px, 70%); }
.order-head h1 { margin: 15px 0 10px; font-size: clamp(38px,5vw,68px); line-height: .92; letter-spacing: -.055em; }
.order-head p { margin: 0 0 24px; color: #b8bbca; line-height: 1.5; }
.status-progress { max-width: 560px; }
.status-progress > div { height: 8px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.16); }
.status-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#9b91ff,#70d8c4); transition: width .35s ease; }
.status-progress small { display: block; margin-top: 8px; color: #d9d7ff; }
.order-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr); gap: 16px; margin-top: 16px; align-items: start; }
.workflow-panel { margin: 0 0 16px; }
.workflow-panel h2 { margin: 0 0 17px; font-size: 22px; }
.workflow-panel p { color: var(--muted); line-height: 1.55; }
.order-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.order-facts div { padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: rgba(247,248,253,.72); }
.order-facts span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 9px; }
.order-facts b { font-size: 12px; line-height: 1.4; }
.action-stack { display: grid; gap: 9px; }
.action-stack button,
.action-stack a { min-height: 48px; padding: 0 15px; border: 0; border-radius: 13px; display: flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 800; font-size: 11px; cursor: pointer; }
.action-primary { color: white; background: linear-gradient(135deg,#8d83ff,#6257e9); box-shadow: 0 12px 28px rgba(93,80,225,.22); }
.action-dark { color: white; background: #171a25; }
.action-soft { border: 1px solid var(--line)!important; color: #191b25; background: white; }
.action-danger { color: #b84459; background: #ffedf1; }
.secure-card { position: relative; min-height: 235px; padding: 24px; border-radius: 22px; overflow: hidden; color: white; background: #151824; }
.secure-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.secure-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg,rgba(13,15,24,.96),rgba(13,15,24,.27)); }
.secure-card div { position: relative; z-index: 2; width: 62%; }
.secure-card span { color: #aaa5ff; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.secure-card strong { display: block; margin: 14px 0 8px; font-size: 31px; }
.secure-card p { margin: 0; color: #c2c5d3; font-size: 10px; }

.process-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.process-card { position: relative; min-height: 145px; border-radius: 16px; overflow: hidden; background: #171a27; }
.process-card img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.process-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(13,15,24,.9),transparent 70%); }
.process-card span { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; color: white; font-size: 9px; font-weight: 750; }
.process-card.done { outline: 2px solid #77d7c4; outline-offset: -2px; }
.process-card.active { outline: 2px solid #8479f7; outline-offset: -2px; }

.upload-machine { border: 1px dashed #9e97ea; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg,#f1f0ff,#fff); }
.upload-state { min-height: 250px; padding: 23px; display: grid; grid-template-columns: 190px 1fr; gap: 22px; align-items: center; }
.upload-state img { width: 190px; aspect-ratio: 1; border-radius: 30px; object-fit: cover; box-shadow: 0 18px 45px rgba(33,37,62,.2); }
.upload-state h3 { margin: 0 0 9px; font-size: 24px; }
.upload-state p { margin: 0 0 16px; }
.upload-state input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-state label { min-height: 44px; padding: 0 15px; border-radius: 12px; display: inline-flex; align-items: center; color: white; background: #6c61ec; font-size: 10px; font-weight: 800; cursor: pointer; }
.upload-bar { height: 7px; margin: 14px 0; border-radius: 99px; overflow: hidden; background: #dedfeb; }
.upload-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#8e84ff,#6ed8c4); transition: width .2s; }
.file-list { display: grid; gap: 8px; margin-top: 14px; }
.file-row { padding: 12px; border: 1px solid var(--line); border-radius: 13px; display: flex; justify-content: space-between; gap: 12px; background: white; }
.file-row b { font-size: 11px; }
.file-row span { color: var(--muted); font-size: 9px; }

.history-list { display: grid; gap: 0; }
.history-event { position: relative; min-height: 54px; padding: 7px 0 15px 27px; border-left: 1px solid #dfe0ea; }
.history-event::before { content: ""; position: absolute; left: -5px; top: 10px; width: 9px; height: 9px; border: 2px solid white; border-radius: 50%; background: #776cf1; box-shadow: 0 0 0 1px #8c84eb; }
.history-event:last-child { border-left-color: transparent; }
.history-event b { display: block; font-size: 11px; }
.history-event span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.revision-box { padding: 15px; border-left: 3px solid #756aed; border-radius: 0 13px 13px 0; background: #f0efff; }
.revision-box b { font-size: 11px; }
.revision-box p { margin: 6px 0 0; color: #5f6577; font-size: 11px; }

.finance-cards,
.trust-grid,
.system-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.visual-tile { position: relative; min-height: 230px; padding: 16px; border-radius: 20px; overflow: hidden; color: white; background: #171a26; }
.visual-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.visual-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(13,15,24,.94),rgba(13,15,24,.04) 70%); }
.visual-tile div { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; }
.visual-tile b { display: block; font-size: 14px; }
.visual-tile span { display: block; margin-top: 5px; color: #c1c4d1; font-size: 9px; line-height: 1.4; }

.system-grid { grid-template-columns: repeat(3, 1fr); }
.support-fab { position: fixed; z-index: 35; right: 24px; bottom: 24px; width: 54px; height: 54px; border: 1px solid rgba(255,255,255,.3); border-radius: 18px; overflow: hidden; background: #171a25; box-shadow: 0 18px 45px rgba(20,23,38,.28); cursor: pointer; }
.support-fab img { width: 100%; height: 100%; object-fit: cover; }
.workflow-dialog { width: min(510px, calc(100vw - 24px)); padding: 0; border: 1px solid rgba(255,255,255,.45); border-radius: 25px; overflow: hidden; background: #f6f7fc; box-shadow: 0 30px 100px rgba(9,11,20,.42); }
.workflow-dialog::backdrop { background: rgba(15,17,26,.58); backdrop-filter: blur(8px); }
.dialog-visual { position: relative; height: 190px; overflow: hidden; background: #161925; }
.dialog-visual img { width: 100%; height: 100%; object-fit: cover; }
.dialog-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,#161925,transparent 75%); }
.dialog-close { position: absolute; z-index: 3; top: 13px; right: 13px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.24); border-radius: 12px; color: white; background: rgba(17,19,29,.68); font-size: 21px; cursor: pointer; }
.dialog-content { padding: 24px; }
.dialog-content h2 { margin: 0 0 8px; font-size: 27px; }
.dialog-content p { margin: 0 0 18px; color: var(--muted); line-height: 1.5; }

@media (max-width: 1180px) {
  .niche-gallery,
  .cover-choices { grid-template-columns: repeat(3, 1fr); }
  .process-grid { grid-template-columns: repeat(3, 1fr); }
  .finance-cards,
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .real-metrics { grid-template-columns: repeat(2, 1fr); }
  .order-wizard,
  .order-layout { grid-template-columns: 1fr; }
  .wizard-summary { position: static; }
  .workflow-hero > div { width: 75%; }
  .order-head-copy { width: 85%; }
}
@media (max-width: 720px) {
  .workflow-empty { grid-template-columns: 1fr; min-height: 0; }
  .workflow-empty img { width: 170px; }
  .workflow-hero { min-height: 390px; }
  .workflow-hero > div { width: 86%; }
  .workflow-hero > img { opacity: .68; object-position: 65% center; }
  .order-grid { grid-template-columns: 1fr; }
  .order-card > div { max-width: 82%; }
  .niche-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .niche-card { min-width: 190px; scroll-snap-align: start; }
  .cover-choices { grid-template-columns: repeat(2, 1fr); }
  .wizard-fields { grid-template-columns: 1fr; }
  .wizard-fields .wide { grid-column: auto; }
  .wizard-actions { position: static; padding: 18px 0 0; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; }
  .order-head { min-height: 390px; }
  .order-head-copy { width: 100%; }
  .process-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .process-card { min-width: 145px; scroll-snap-align: start; }
  .upload-state { grid-template-columns: 1fr; }
  .upload-state img { width: 145px; }
  .order-facts { grid-template-columns: 1fr; }
  .finance-cards,
  .trust-grid,
  .system-grid { grid-template-columns: 1fr 1fr; }
  .visual-tile { min-height: 190px; }
  .support-fab { right: 12px; bottom: 12px; width: 48px; height: 48px; border-radius: 15px; }
}
@media (max-width: 440px) {
  .real-metrics { grid-template-columns: 1fr; }
  .real-metric { min-height: 138px; }
  .finance-cards,
  .trust-grid,
  .system-grid { grid-template-columns: 1fr; }
  .visual-tile { min-height: 220px; }
}