:root {
  color-scheme: dark;
  --bg: #080d18;
  --sidebar: #090f1b;
  --panel: #111a2b;
  --panel-2: #151f32;
  --field: #0b1423;
  --line: rgba(161, 181, 214, .15);
  --line-strong: rgba(161, 181, 214, .25);
  --text: #f4f7fc;
  --muted: #8e9bb2;
  --muted-2: #65728a;
  --blue: #53a8ff;
  --cyan: #38c4ef;
  --violet: #7c80ff;
  --green: #54d6a2;
  --amber: #f2bb62;
  --red: #ef7380;
  --shadow: 0 18px 55px rgba(0, 0, 0, .22);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-width: 0; min-height: 100vh; font-family: "DM Sans", system-ui, sans-serif; color: var(--text); background: radial-gradient(circle at 75% -25%, rgba(67, 109, 255, .13), transparent 37%), var(--bg); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin-top: 0; }

.boot-screen, .fatal { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 13px; color: var(--muted); }
.boot-screen strong { color: white; font: 800 23px Manrope, sans-serif; }
.fatal h1 { color: white; margin-bottom: 0; }
.app-shell { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 18px 18px; border-right: 1px solid var(--line); background: rgba(7, 12, 22, .93); backdrop-filter: blur(18px); display: flex; flex-direction: column; z-index: 20; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 5px; font: 800 19px Manrope, sans-serif; letter-spacing: -.45px; }
.brand b { color: var(--cyan); }
.logo-mark { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(145deg, var(--violet), #20c9f7); box-shadow: 0 0 28px rgba(47, 181, 248, .24); }
.logo-mark:after { content: ""; margin-left: 2px; border-left: 10px solid white; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.role-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 26px 3px 0; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: #080e19; }
.role-switch button { border: 0; border-radius: 7px; padding: 7px 8px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 700; }
.role-switch button.active { color: white; background: #1a2941; box-shadow: 0 3px 10px rgba(0,0,0,.2); }
.signed-role { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 24px 3px 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: #080e19; }
.signed-role span { color: #dce6f5; font-size: 10px; font-weight: 800; }
.signed-role small { color: var(--cyan); font-size: 8px; }
.nav-label { margin: 30px 12px 9px; color: #536077; font-size: 10px; font-weight: 800; letter-spacing: 1.3px; }
.sidebar nav { display: grid; gap: 4px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 13px; border: 0; border-radius: 10px; color: #8d9bb3; background: transparent; text-align: left; font-size: 13px; font-weight: 650; }
.nav-item > span { width: 18px; text-align: center; color: #70809a; font-size: 15px; }
.nav-item:hover { color: #dbe5f4; background: rgba(94, 126, 179, .08); }
.nav-item.active { color: white; background: linear-gradient(90deg, rgba(73, 120, 255, .2), rgba(73, 120, 255, .04)); box-shadow: inset 2px 0 var(--cyan); }
.nav-item.active > span { color: #8fe0ff; }
.nav-count { margin-left: auto; min-width: 19px; padding: 2px 5px; border-radius: 99px; text-align: center; background: var(--cyan); color: #06131d; font-size: 9px; }
.sidebar-spacer { flex: 1; }
.help-card { display: flex; gap: 11px; margin: 16px 2px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(20, 31, 49, .65); }
.help-card > span { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 8px; color: #78d6ff; background: rgba(57,189,248,.12); font-weight: 800; }
.help-card strong { font-size: 11px; }
.help-card p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.sidebar-user { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 13px 6px 0; border-top: 1px solid var(--line); }
.sidebar-user strong, .sidebar-user span { display: block; }
.sidebar-user strong { font-size: 11px; }
.sidebar-user div > span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.sidebar-user button { border: 0; color: var(--muted); background: transparent; }
.workspace { min-width: 0; }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(8, 13, 24, .69); backdrop-filter: blur(14px); }
.breadcrumbs { color: var(--muted); font-size: 12px; }
.breadcrumbs strong { color: #e9eef7; }
.top-actions { display: flex; align-items: center; gap: 11px; }
.search { height: 36px; display: flex; align-items: center; gap: 8px; width: 245px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: rgba(10,18,31,.8); }
.search input { width: 100%; border: 0; outline: 0; color: white; background: transparent; font-size: 11px; }
.search.wide { width: min(420px, 55%); }
.icon-button { position: relative; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 9px; color: #9eabc0; background: #101927; }
.icon-button i { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--red); color: white; font-size: 8px; font-style: normal; }
.mobile-menu { display: none; }
.mobile-nav-backdrop, .mobile-cart-jump { display: none; }
.avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(135deg, #7f89ff, #3dc6ef); color: white; font-size: 10px; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.avatar.large { width: 50px; height: 50px; font-size: 13px; }
.main-content { width: min(1500px, 100%); padding: 34px 38px 65px; }
.hero { position: relative; min-height: 170px; display: flex; align-items: center; justify-content: space-between; gap: 35px; padding: 31px 34px; border: 1px solid rgba(84, 139, 228, .2); border-radius: 19px; overflow: hidden; background: linear-gradient(125deg, rgba(30, 54, 95, .75), rgba(21, 31, 52, .93) 60%, rgba(18, 57, 79, .58)); box-shadow: var(--shadow); }
.hero:after { content: ""; position: absolute; right: -70px; top: -115px; width: 330px; height: 330px; border-radius: 50%; background: radial-gradient(circle, rgba(44,194,241,.2), transparent 67%); }
.manager-hero { background: linear-gradient(125deg, rgba(47, 43, 99, .78), rgba(21,31,52,.94) 58%, rgba(22,73,80,.55)); }
.hero > * { position: relative; z-index: 1; }
.eyebrow { display: block; color: #63c9f4; font-size: 10px; font-weight: 800; letter-spacing: 1.4px; }
.hero h1, .page-head h1, .order-heading h1 { margin: 8px 0 8px; font: 800 30px/1.15 Manrope, sans-serif; letter-spacing: -.7px; }
.hero p, .page-head p, .order-heading p { margin: 0; color: #9daac0; font-size: 13px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 9px 14px; border: 0; border-radius: 9px; color: white; background: #1c2a40; font-size: 11px; font-weight: 750; white-space: nowrap; }
.button.primary { background: linear-gradient(120deg, #6078ff, #21bfea); box-shadow: 0 8px 24px rgba(43,154,242,.2); }
.button.secondary { border: 1px solid var(--line-strong); background: rgba(20,32,51,.8); }
.button.success { color: #061b13; background: var(--green); }
.button.full { width: 100%; }
.button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 30px; }
.metric-card { min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, rgba(18,28,46,.92), rgba(12,20,34,.92)); }
.metric-card > span, .metric-card small { display: block; color: var(--muted); font-size: 10px; }
.metric-card strong { display: block; margin: 10px 0 5px; font: 800 24px Manrope, sans-serif; }
.metric-card.blue { border-top-color: rgba(83,168,255,.7); }.metric-card.green { border-top-color: rgba(84,214,162,.7); }.metric-card.violet { border-top-color: rgba(124,128,255,.7); }.metric-card.amber { border-top-color: rgba(242,187,98,.7); }
.section-heading, .panel-head, .page-head, .order-heading, .rail-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.section-heading { margin-bottom: 14px; }.section-heading h2 { margin-bottom: 4px; font: 750 18px Manrope, sans-serif; }.section-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.text-button { border: 0; color: #77cffe; background: transparent; font-size: 10px; font-weight: 700; }
.order-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.order-card { position: relative; overflow: hidden; padding: 17px; border: 1px solid var(--line); border-radius: 15px; color: inherit; background: linear-gradient(145deg, rgba(18,28,46,.96), rgba(11,18,31,.96)); text-align: left; }
.order-card:hover { border-color: rgba(72,190,242,.38); transform: translateY(-2px); box-shadow: var(--shadow); }
.order-card-top, .order-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.order-id { color: #6fc9f4; font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.status { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 5px 8px; border: 1px solid rgba(133,151,181,.18); border-radius: 99px; color: #a7b3c7; background: rgba(122,139,166,.08); font-size: 9px; font-weight: 800; white-space: nowrap; }
.status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; }
.status.blue { color: #8bc7ff; background: rgba(58,135,225,.1); }.status.cyan { color: #82dbfa; background: rgba(56,196,239,.1); }.status.green { color: #91e7c1; background: rgba(84,214,162,.1); }.status.amber { color: #f6cb87; background: rgba(242,187,98,.1); }.status.violet { color: #b1b3ff; background: rgba(124,128,255,.1); }
.order-card-body { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 12px; margin: 18px 0; }
.package-thumb { width: 48px; height: 48px; overflow: hidden; border-radius: 10px; background: #0a1220; }.package-thumb img { width: 100%; height: 100%; object-fit: cover; }
.order-card h3 { margin: 0 0 4px; font: 750 13px Manrope, sans-serif; }.order-card p { margin: 0; color: var(--muted); font-size: 9px; }
.order-card-meta { padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }.order-card-meta b, .order-card-meta span:last-child { color: #d8e1ee; }
.action-strip { margin: 13px -17px -17px; padding: 9px 17px; display: flex; justify-content: space-between; color: #8ddcff; background: rgba(56,196,239,.08); font-size: 9px; font-weight: 800; }
.panel { border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(150deg, rgba(18,28,46,.96), rgba(12,20,34,.96)); box-shadow: 0 12px 35px rgba(0,0,0,.12); overflow: hidden; }
.panel:not(.table-panel):not(.conversation):not(.delivery-panel):not(.review-panel) { padding: 20px; }
.panel-head { align-items: flex-start; margin-bottom: 16px; }.panel-head h3, .panel h3 { margin: 0 0 4px; font: 750 14px Manrope, sans-serif; }.panel-head p, .panel > p { margin: 0; color: var(--muted); font-size: 10px; }
.dashboard-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); gap: 15px; margin-top: 26px; }.manager-dashboard { grid-template-columns: minmax(0, 1.8fr) minmax(290px, .7fr); }
.manager-profile { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }.manager-profile span { color: var(--cyan); font-size: 9px; font-weight: 800; }.manager-profile h3 { margin: 5px 0 3px; }.manager-profile p { color: var(--muted); font-size: 9px; }
.activity-list { display: grid; }.activity-item { position: relative; min-height: 54px; display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; padding: 9px 0; }.activity-item:not(:last-child):before { content: ""; position: absolute; left: 6px; top: 27px; bottom: -5px; width: 1px; background: #2b3a51; }.activity-dot { position: relative; width: 12px; height: 12px; margin-top: 2px; border: 3px solid #14243a; border-radius: 50%; background: var(--cyan); z-index: 1; }.activity-dot.payment, .activity-dot.completed, .activity-dot.approval { background: var(--green); }.activity-dot.message { background: var(--violet); }
.activity-item strong, .activity-item small { display: block; }.activity-item strong { font-size: 10px; }.activity-item small { margin-top: 5px; color: var(--muted); font-size: 8px; }.activity-item > b { height: fit-content; padding: 3px 6px; border-radius: 5px; color: #82dbfa; background: rgba(56,196,239,.08); font-size: 7px; text-transform: uppercase; }
.attention-list { display: grid; gap: 3px; }.attention-list button { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 12px 5px; border: 0; border-bottom: 1px solid var(--line); color: inherit; background: transparent; text-align: left; }.attention-list button:last-child { border: 0; }.attention-list strong, .attention-list small { display: block; }.attention-list strong { font-size: 10px; }.attention-list small { margin-top: 4px; color: var(--muted); font-size: 8px; }.priority-dot { width: 7px; height: 7px; border-radius: 50%; background: #7890ac; }.priority-dot.high { background: var(--amber); }.priority-dot.urgent { background: var(--red); box-shadow: 0 0 8px rgba(239,115,128,.6); }
.page-head { align-items: flex-end; margin-bottom: 22px; }.page-head h1 { margin-bottom: 6px; }.head-actions select, .control-label select, .control-label input, .brief-form input, .brief-form textarea, .brief-form select { border: 1px solid var(--line-strong); border-radius: 9px; outline: 0; color: white; background: var(--field); }.head-actions select { min-width: 170px; padding: 9px 12px; font-size: 10px; }
.table-panel { padding: 0; }.table-tools { min-height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 13px 17px; border-bottom: 1px solid var(--line); }.table-tools > span { color: var(--muted); font-size: 9px; }
.data-table { min-width: 760px; }.table-row { display: grid; grid-template-columns: 1.25fr 1.1fr 1fr .9fr .65fr 24px; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 11px 17px; border: 0; border-bottom: 1px solid var(--line); color: inherit; background: transparent; text-align: left; }.table-row:not(.table-header):hover { background: rgba(70,103,157,.07); }.table-row > span > strong, .table-row > span > small { display: block; }.table-row strong { font-size: 10px; }.table-row small { margin-top: 4px; color: var(--muted); font-size: 8px; }.table-header { min-height: 37px; color: #65738a; background: rgba(5,10,18,.22); font-size: 8px; font-weight: 800; letter-spacing: .65px; text-transform: uppercase; }.row-arrow { color: var(--cyan); font-size: 15px; }.priority-text.urgent { color: var(--red); }.priority-text.high { color: var(--amber); }
.billing-table .table-row { grid-template-columns: 1fr 1.35fr .8fr 1fr .65fr .8fr; }
.billing-table .text-button { display: inline-block; font-size: 12px; white-space: nowrap; }
.order-heading { align-items: center; justify-content: flex-start; margin-bottom: 20px; }.back-button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; color: white; background: #111b2b; }.order-kicker { color: var(--cyan); font-size: 9px; font-weight: 800; letter-spacing: 1px; }.order-heading h1 { margin: 5px 0; font-size: 27px; }.order-heading-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.progress-panel { padding: 17px 22px !important; }.progress-steps { display: flex; align-items: center; }.progress-step { display: flex; align-items: center; gap: 7px; color: #5d6a80; font-size: 9px; font-weight: 800; white-space: nowrap; }.progress-step b { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #344159; border-radius: 50%; font-style: normal; }.progress-step em { font-style: normal; }.progress-step.done, .progress-step.active { color: #e9eef6; }.progress-step.done b { border-color: var(--green); color: #061b13; background: var(--green); }.progress-step.active b { border-color: var(--cyan); color: #06151d; background: var(--cyan); box-shadow: 0 0 15px rgba(56,196,239,.28); }.progress-line { height: 1px; flex: 1; min-width: 28px; margin: 0 9px; background: #2a374d; }.progress-line.done { background: var(--green); }
.tabs { display: flex; gap: 3px; margin: 20px 0 14px; border-bottom: 1px solid var(--line); }.tabs button { padding: 11px 14px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 10px; font-weight: 700; }.tabs button.active { border-bottom-color: var(--cyan); color: white; }
.order-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 16px; }.order-primary { display: grid; gap: 15px; min-width: 0; }.order-rail { display: grid; gap: 14px; }.panel.compact { padding: 17px !important; }.panel.compact h3 { font-size: 12px; }.status-hero { min-height: 180px; display: flex; align-items: center; justify-content: space-between; padding: 26px !important; background: linear-gradient(125deg, rgba(27,47,79,.9), rgba(13,22,38,.95)); }.status-hero h2 { margin: 14px 0 8px; font: 750 21px Manrope, sans-serif; }.status-hero p { max-width: 620px; margin-bottom: 19px; color: #9ca9bd; font-size: 11px; line-height: 1.6; }.stage-orbit { display: grid; place-content: center; width: 90px; height: 90px; flex: 0 0 auto; border: 1px solid rgba(56,196,239,.25); border-radius: 50%; text-align: center; background: radial-gradient(circle, rgba(56,196,239,.14), transparent 70%); }.stage-orbit b { font: 800 27px Manrope, sans-serif; }.stage-orbit span { color: var(--muted); font-size: 8px; }
.summary-product { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 11px; margin: 14px 0; padding: 10px; border-radius: 10px; background: #0b1423; }.summary-product img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; }.summary-product strong, .summary-product span { display: block; }.summary-product strong { font-size: 10px; }.summary-product span { margin-top: 4px; color: var(--muted); font-size: 8px; }.summary-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 9px; }.summary-rows > div:last-child { border-bottom: 0; }.summary-rows span { color: var(--muted); }.summary-rows strong { text-align: right; }.paid { color: var(--green); }.person-row { display: flex; align-items: center; gap: 10px; margin: 14px 0; }.person-row strong, .person-row span { display: block; }.person-row strong { font-size: 10px; }.person-row span { margin-top: 3px; color: var(--muted); font-size: 8px; }.contact-line { margin: -4px 0 13px !important; color: var(--muted); font-size: 9px !important; }.priority-pill { padding: 4px 7px; border-radius: 6px; color: #9cabc1; background: rgba(123,145,177,.1); font-size: 8px; font-weight: 800; text-transform: uppercase; }.priority-pill.high { color: var(--amber); }.priority-pill.urgent { color: var(--red); }
.control-label { display: grid; gap: 6px; margin-top: 13px; color: #a9b4c5; font-size: 9px; font-weight: 700; }.control-label select, .control-label input { width: 100%; padding: 9px 10px; font-size: 9px; }.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 14px; }.quick-actions button { min-height: 50px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; color: #b9c6d9; background: #0e1828; font-size: 8px; font-weight: 700; }.quick-actions button:hover { border-color: rgba(56,196,239,.35); color: white; }
.manager-work-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 15px; }.checklist > div:not(.panel-head) { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 9px; }.checklist > div:last-child { border: 0; }.check { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid #35435a; border-radius: 5px; color: #061b13; }.check.done { border-color: var(--green); background: var(--green); }
.executor-hero { background: linear-gradient(125deg, rgba(34,39,82,.96), rgba(8,75,87,.88)); }.executor-status { background: linear-gradient(125deg, rgba(39,43,86,.92), rgba(12,35,54,.95)); }.assignment-fee { min-width: 150px; display: grid; justify-items: end; gap: 4px; padding: 18px; border: 1px solid rgba(84,214,162,.18); border-radius: 13px; background: rgba(7,16,27,.35); }.assignment-fee span, .assignment-fee small { color: var(--muted); font-size: 8px; }.assignment-fee b { color: var(--green); font: 800 26px Manrope, sans-serif; }
.internal-workspace { display: grid; gap: 15px; }.private-channel { padding: 5px 8px; border: 1px solid rgba(124,128,255,.24); border-radius: 99px; color: #b9bbff; background: rgba(124,128,255,.08); font-size: 8px; font-weight: 800; }.submission-review { display: grid; gap: 11px; }.submission-card { display: grid; grid-template-columns: 150px minmax(0,1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #0a1422; }.submission-card.approved { border-color: rgba(84,214,162,.35); }.submission-card.changes_requested { border-color: rgba(255,177,92,.35); }.submission-card > img { width: 150px; height: 135px; object-fit: cover; }.submission-copy { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 14px; }.submission-copy h4 { margin: 5px 0 5px; font-size: 11px; }.submission-copy p { margin: 0 0 7px; color: #a8b4c5; font-size: 9px; line-height: 1.5; }.submission-copy small { color: var(--muted); font-size: 8px; }.review-state { display: inline-flex; padding: 4px 7px; border-radius: 99px; color: #b9c5d6; background: #172238; font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }.review-state.approved { color: #86e8be; background: rgba(84,214,162,.1); }.review-state.changes_requested { color: #ffc17d; background: rgba(255,177,92,.1); }.submission-actions { display: grid; gap: 7px; min-width: 125px; }.review-note { margin-top: 10px; padding: 9px 10px; border-radius: 8px; color: #bdc8d7; background: rgba(124,128,255,.07); font-size: 8px; line-height: 1.5; }.empty-mini { padding: 28px; border: 1px dashed #314157; border-radius: 10px; color: var(--muted); text-align: center; font-size: 10px; }.submission-form { margin-top: 5px; }
.form-panel { padding: 22px !important; }.autosave, .locked, .version-count { padding: 5px 8px; border-radius: 7px; color: #8cdaba; background: rgba(84,214,162,.08); font-size: 8px; font-weight: 800; }.brief-form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.brief-form label { display: grid; gap: 7px; color: #b8c3d3; font-size: 9px; font-weight: 700; }.brief-form label.full, .form-actions.full { grid-column: 1 / -1; }.brief-form input, .brief-form textarea, .brief-form select { width: 100%; padding: 11px 12px; font-size: 10px; }.brief-form textarea { min-height: 85px; resize: vertical; line-height: 1.55; }.upload-box { position: relative; min-height: 100px; display: grid; place-content: center; justify-items: center; gap: 5px; border: 1px dashed #3b526f; border-radius: 11px; color: #c5d0df; background: rgba(8,16,29,.55); }.upload-box input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }.upload-box b { font-size: 10px; }.upload-box small { color: var(--muted); font-size: 8px; }.form-actions { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--line); }.form-actions > span { color: var(--muted); font-size: 8px; }
.brief-read { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.brief-read > div { padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: rgba(9,17,29,.45); }.brief-read .full { grid-column: 1/-1; }.brief-read span, .brief-read strong { display: block; }.brief-read span { margin-bottom: 7px; color: var(--muted); font-size: 8px; font-weight: 700; text-transform: uppercase; }.brief-read strong, .brief-read p { margin: 0; font-size: 10px; line-height: 1.55; }.asset-list { margin-top: 20px; }.asset-list h4 { font-size: 10px; }.asset-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }.asset-row strong, .asset-row small { display: block; }.asset-row strong { font-size: 9px; }.asset-row small { margin-top: 3px; color: var(--muted); font-size: 8px; }.asset-row button { border: 0; color: var(--muted); background: transparent; }.file-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 8px; color: #7bd8ff; background: #11253b; font-size: 7px; font-weight: 800; }.file-icon.large { width: 43px; height: 43px; font-size: 8px; }
.conversation { overflow: hidden; }.conversation-head { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 16px 19px; border-bottom: 1px solid var(--line); }.conversation-head h3 { margin: 0; font-size: 11px; }.conversation-head p { margin: 3px 0 0; color: var(--muted); font-size: 8px; }.online { color: var(--green); font-size: 8px; }.message-stream { max-height: 490px; overflow: auto; display: grid; gap: 13px; padding: 22px 19px; }.bubble-row { display: flex; align-items: flex-start; gap: 9px; }.bubble-row.mine { justify-content: flex-end; }.bubble { max-width: 72%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 4px 12px 12px; background: #111d2f; }.mine .bubble { border-color: rgba(70,160,230,.2); border-radius: 12px 4px 12px 12px; background: #17304a; }.bubble > div { display: flex; gap: 10px; }.bubble strong { font-size: 8px; }.bubble span { color: var(--muted); font-size: 7px; }.bubble p { margin: 6px 0 0; color: #c1ccdc; font-size: 10px; line-height: 1.55; }.message-compose { padding: 14px 17px; border-top: 1px solid var(--line); background: rgba(6,12,21,.35); }.message-compose textarea { width: 100%; min-height: 65px; resize: vertical; padding: 10px; border: 1px solid var(--line); border-radius: 9px; outline: 0; color: white; background: #0a1423; font-size: 10px; }.message-compose > div { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }.message-compose span { color: var(--muted); font-size: 8px; }
.review-panel { padding: 20px; }.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.concept { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #09111d; }.concept.approved { border-color: var(--green); box-shadow: 0 0 0 1px rgba(84,214,162,.2); }.concept-media { position: relative; height: 250px; overflow: hidden; }.concept-media img { width: 100%; height: 100%; object-fit: cover; }.play { position: absolute; inset: 50% auto auto 50%; width: 38px; height: 38px; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: white; background: rgba(5,10,17,.6); backdrop-filter: blur(5px); }.approved-mark { position: absolute; top: 10px; right: 10px; padding: 5px 8px; border-radius: 99px; color: #061b13; background: var(--green); font-size: 8px; font-weight: 800; }.concept-body { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px; }.concept-body h4 { margin: 0 0 4px; font-size: 10px; }.concept-body p { margin: 0 0 5px; color: var(--muted); font-size: 8px; }.concept-body small { color: #6d7b90; font-size: 7px; }.manager-note { margin-top: 13px; padding: 12px; border: 1px solid rgba(124,128,255,.2); border-radius: 9px; color: #b7b9e4; background: rgba(124,128,255,.07); font-size: 9px; line-height: 1.5; }
.concept-media video { width: 100%; height: 100%; object-fit: contain; background: #050b14; }
.delivery-banner { display: flex; align-items: center; gap: 13px; padding: 19px; border-bottom: 1px solid var(--line); background: linear-gradient(110deg, rgba(84,214,162,.12), rgba(47,117,223,.08)); }.delivery-banner > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #061b13; background: var(--green); font-weight: 900; }.delivery-banner h3 { margin: 0 0 4px; }.delivery-banner p { margin: 0; color: var(--muted); font-size: 9px; }.deliverable-list { padding: 0 19px; }.deliverable-row { display: grid; grid-template-columns: 43px 1fr auto; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }.deliverable-row strong, .deliverable-row small { display: block; }.deliverable-row strong { font-size: 9px; }.deliverable-row small { margin-top: 4px; color: var(--muted); font-size: 8px; }.delivery-actions { display: flex; align-items: center; justify-content: space-between; padding: 15px 19px; background: rgba(6,12,21,.35); }.delivery-actions > span { color: var(--muted); font-size: 8px; }
.empty-state { min-height: 310px; display: grid; place-content: center; justify-items: center; text-align: center; }.empty-state > span { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 13px; border-radius: 15px; color: #75d3fa; background: rgba(56,196,239,.08); font-size: 20px; }.empty-state h3 { margin-bottom: 6px; font-size: 14px; }.empty-state p { max-width: 390px; margin-bottom: 18px; line-height: 1.55; }
.inbox-layout { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 14px; align-items: start; }.thread-list { padding: 7px !important; }.thread { display: grid; grid-template-columns: 34px 1fr; gap: 10px; width: 100%; padding: 12px; border: 0; border-radius: 10px; color: inherit; background: transparent; text-align: left; }.thread:hover, .thread.active { background: rgba(57,115,187,.12); }.thread strong { display: flex; justify-content: space-between; font-size: 9px; }.thread strong span, .thread small { color: var(--muted); font-size: 7px; }.thread p { overflow: hidden; margin: 5px 0; color: #a6b2c5; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.library-group { margin-bottom: 14px; }.library-files { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }.library-files a { display: grid; grid-template-columns: 43px 1fr auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(7,14,25,.4); }.library-files strong, .library-files small { display: block; }.library-files strong { font-size: 9px; }.library-files small { margin-top: 4px; color: var(--muted); font-size: 7px; }.library-files b { color: var(--cyan); }
.client-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }.client-card-head { display: flex; align-items: center; gap: 12px; }.client-card-head h3 { margin: 0 0 4px; }.client-card-head p { margin: 0; color: var(--muted); font-size: 8px; }.client-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 18px 0; border: 1px solid var(--line); border-radius: 10px; }.client-stats div { padding: 11px; text-align: center; }.client-stats div:not(:last-child) { border-right: 1px solid var(--line); }.client-stats strong, .client-stats span { display: block; }.client-stats strong { font-size: 13px; }.client-stats span { margin-top: 3px; color: var(--muted); font-size: 7px; }

.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(430px, .9fr) minmax(520px, 1.1fr); background: radial-gradient(circle at 12% 15%, rgba(64,97,234,.2), transparent 34%), #080d18; }
.login-brand { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: 54px 64px; overflow: hidden; border-right: 1px solid var(--line); background: linear-gradient(145deg, rgba(29,39,82,.82), rgba(8,17,31,.94) 64%, rgba(12,62,72,.72)); }
.login-brand:after { content: ""; position: absolute; right: -190px; bottom: 8%; width: 500px; height: 500px; border: 1px solid rgba(86,205,244,.16); border-radius: 50%; box-shadow: 0 0 0 70px rgba(64,105,238,.035), 0 0 0 140px rgba(64,105,238,.025); }
.login-logo { position: relative; z-index: 1; padding: 0; font-size: 21px; }
.login-brand > div:nth-child(2) { position: relative; z-index: 1; max-width: 560px; }
.login-brand h1 { margin: 15px 0 20px; font: 800 52px/1.08 Manrope, sans-serif; letter-spacing: -2.3px; }
.login-brand > div:nth-child(2) p { max-width: 500px; margin: 0; color: #a8b5ca; font-size: 15px; line-height: 1.75; }
.login-proof { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 9px 18px; color: #9babc3; font-size: 10px; }
.login-proof span::first-letter { color: var(--green); }
.login-panel { display: grid; place-items: center; padding: 55px; }
.login-card { width: min(430px, 100%); display: grid; gap: 18px; padding: 34px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(150deg, rgba(20,31,50,.98), rgba(10,18,31,.98)); box-shadow: 0 30px 80px rgba(0,0,0,.32); }
.login-card h2 { margin: 8px 0 6px; font: 800 25px Manrope, sans-serif; letter-spacing: -.7px; }
.login-card > div > p { margin: 0; color: var(--muted); font-size: 11px; }
.login-card label { display: grid; gap: 7px; color: #b9c5d6; font-size: 9px; font-weight: 800; }
.login-card input { width: 100%; height: 45px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 10px; outline: 0; color: white; background: var(--field); font-size: 11px; }
.login-card input:focus, .user-form input:focus, .user-form select:focus { border-color: rgba(56,196,239,.65); box-shadow: 0 0 0 3px rgba(56,196,239,.08); }
.login-card .button { min-height: 45px; }
.auth-link { justify-self: start; padding: 0; border: 0; color: var(--cyan); background: transparent; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.auth-link:hover { text-decoration: underline; }
.auth-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.alert.success { border: 1px solid rgba(84,214,162,.28); color: #a9f0d2; background: rgba(84,214,162,.08); }
.demo-access { padding-top: 16px; border-top: 1px solid var(--line); }
.demo-access strong { display: block; font-size: 9px; }
.demo-access p { margin: 4px 0 10px !important; color: var(--muted); font-size: 8px !important; }
.demo-access code { color: #aeeaff; }
.demo-access > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.demo-access button { padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; color: #aebbd0; background: #0a1423; font-size: 8px; }
.demo-access button:hover { border-color: rgba(56,196,239,.35); color: white; }

.admin-hero { background: linear-gradient(125deg, rgba(25,53,80,.92), rgba(31,34,75,.93) 58%, rgba(20,71,67,.56)); }
.admin-today { margin-top: 5px; }
.admin-order-table { min-width: 760px; margin: 0 -20px -20px; }
.admin-order-row { display: grid; grid-template-columns: 75px 105px 1.35fr 1fr 145px; align-items: center; gap: 16px; min-height: 67px; padding: 11px 20px; border-top: 1px solid var(--line); }
.admin-order-row > span > strong, .admin-order-row > span > small { display: block; }
.admin-order-row strong { font-size: 10px; }
.admin-order-row small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.admin-order-head { min-height: 38px; color: #69778e; background: rgba(5,10,18,.22); font-size: 8px; font-weight: 800; letter-spacing: .65px; text-transform: uppercase; }
.admin-users-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr); gap: 15px; align-items: start; }
.admin-user-stack, .admin-form-stack { display: grid; gap: 15px; align-content: start; }
.user-list { display: grid; margin: 0 -20px -20px; }
.user-row { display: grid; grid-template-columns: 34px minmax(0,1fr) 112px 75px; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); }
.user-details { min-width: 0; }
.user-org-select { display: flex; align-items: center; gap: 7px; margin-top: 8px; color: var(--muted); font-size: 10px; }
.user-org-select select { max-width: 230px; min-width: 0; padding: 5px 7px; border: 1px solid var(--line-strong); border-radius: 6px; color: white; background: var(--field); font-size: 10px; }
.organization-list { display: grid; gap: 0; margin: 0 -20px -20px; }
.organization-list > div { display: grid; grid-template-columns: minmax(0, 1fr) 100px 55px 105px; gap: 10px; align-items: center; padding: 11px 20px; border-top: 1px solid var(--line); }
.organization-list strong { font-size: 11px; }
.organization-list span, .organization-list small { color: var(--muted); font-size: 10px; }
.user-row strong, .user-row small { display: block; }
.user-row strong { font-size: 10px; }
.user-row small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.role-tag { width: fit-content; padding: 5px 8px; border-radius: 99px; color: #bfcaf9; background: rgba(124,128,255,.1); font-size: 8px; font-weight: 800; }
.role-tag.admin { color: #8ee7c0; background: rgba(84,214,162,.1); }
.role-tag.client { color: #86daf8; background: rgba(56,196,239,.1); }
.role-tag.executor { color: #f4c983; background: rgba(242,187,98,.1); }
.account-state { color: var(--green); font-size: 8px; font-weight: 800; }
.user-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.user-form label { display: grid; gap: 6px; color: #b8c3d3; font-size: 9px; font-weight: 700; }
.user-form input, .user-form select { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid var(--line-strong); border-radius: 9px; outline: 0; color: white; background: var(--field); font-size: 10px; }
.user-form .button { grid-column: 1/-1; margin-top: 3px; }
.billing-settings-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr); gap: 16px; align-items: start; }
.billing-details-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.billing-details-form label { display: grid; gap: 6px; color: #b8c3d3; font-size: 12px; font-weight: 700; }
.billing-details-form input { width: 100%; min-width: 0; min-height: 43px; padding: 10px 11px; border: 1px solid var(--line-strong); border-radius: 9px; outline: 0; color: white; background: var(--field); font-size: 13px; }
.billing-details-form input:focus { border-color: var(--cyan); }
.billing-form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px; }
.billing-effective > strong { display: block; margin-bottom: 12px; font-size: 17px; }
.billing-effective > p { color: var(--muted); line-height: 1.7; }
.billing-source-note { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.5; }
.user-details > .auth-link { margin-top: 8px; }
.alert { margin-bottom: 13px; padding: 10px 13px; border-radius: 9px; font-size: 9px; }.alert.error { border: 1px solid rgba(239,115,128,.25); color: #ffc0c6; background: rgba(239,115,128,.08); }.muted { color: var(--muted); }.toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; display: flex; align-items: center; gap: 9px; padding: 12px 15px; border: 1px solid rgba(84,214,162,.3); border-radius: 10px; color: #dff9ee; background: #132b28; box-shadow: var(--shadow); font-size: 10px; animation: toast-in .2s ease; }.toast > span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #061b13; background: var(--green); font-weight: 900; }.toast-error { border-color: rgba(239,115,128,.3); background: #321b24; }.toast-error > span { color: white; background: var(--red); }.busy { position: fixed; inset: 0; z-index: 90; background: rgba(5,9,15,.25); cursor: wait; }.busy span { position: absolute; top: 0; left: 0; height: 2px; width: 35%; background: linear-gradient(90deg, transparent, var(--cyan), transparent); animation: busy 1s linear infinite; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } } @keyframes busy { from { transform: translateX(-100%); } to { transform: translateX(400%); } }

@media (max-width: 1250px) {
  .app-shell { grid-template-columns: 218px minmax(0,1fr); }.sidebar { padding-left: 14px; padding-right: 14px; }.main-content { padding-left: 26px; padding-right: 26px; }.metrics { grid-template-columns: repeat(2,1fr); }.order-grid { grid-template-columns: repeat(2,1fr); }.dashboard-split, .manager-dashboard, .admin-users-layout { grid-template-columns: 1fr; }.order-layout { grid-template-columns: minmax(0,1fr) 270px; }.table-row { grid-template-columns: 1.25fr 1fr 1fr .85fr .6fr 20px; }.search { width: 210px; }.login-brand { padding: 48px; }.login-brand h1 { font-size: 42px; }.login-panel { padding: 38px; }
}

/* Readable desktop type scale for screen recordings and daily operations. */
body { font-size: 14px; }
.nav-item, .hero p, .page-head p, .order-heading p { font-size: 14px; }
.nav-label, .eyebrow, .metric-card > span, .metric-card small, .section-heading p,
.panel-head p, .panel > p, .breadcrumbs, .button, .order-card h3, .activity-item strong,
.table-row strong, .tabs button, .status-hero p, .summary-product strong, .control-label,
.checklist > div:not(.panel-head), .person-row strong, .brief-form input, .brief-form textarea,
.brief-form select, .bubble p, .concept-body h4, .deliverable-row strong, .thread strong,
.login-card > div > p, .login-card input, .user-form input, .user-form select { font-size: 12px; }
.help-card strong, .signed-role span, .order-card p, .order-card-meta, .status,
.activity-item small, .attention-list strong, .attention-list small, .table-tools > span,
.table-header, .table-row small, .order-kicker, .progress-step, .summary-product span,
.summary-rows > div, .person-row span, .contact-line, .quick-actions button, .private-channel,
.submission-copy h4, .submission-copy p, .empty-mini, .brief-read strong, .brief-read p,
.asset-list h4, .asset-row strong, .conversation-head h3, .message-compose textarea,
.concept-body p, .delivery-banner p, .delivery-actions > span, .thread p,
.library-files strong, .client-card-head p, .alert, .toast, .login-card label,
.demo-access strong, .user-form label, .user-row strong, .admin-order-row strong { font-size: 11px !important; }
.help-card p, .sidebar-user strong, .sidebar-user div > span, .signed-role small,
.order-id, .activity-item > b, .priority-pill, .assignment-fee span, .assignment-fee small,
.review-state, .submission-copy small, .review-note, .autosave, .locked, .version-count,
.upload-box small, .asset-row small, .conversation-head p, .online, .bubble strong,
.bubble span, .message-compose span, .concept-body small, .deliverable-row small,
.thread strong span, .thread small, .library-files small, .client-stats span,
.demo-access p, .demo-access button, .user-row small, .role-tag, .account-state,
.admin-order-row small { font-size: 10px !important; }
.panel-head h3, .panel h3 { font-size: 16px; }
.order-card h3 { line-height: 1.35; }
.sidebar-user { min-height: 56px; }
.tabs button { padding: 13px 15px; }
.activity-item { min-height: 62px; }
.summary-rows > div { padding: 12px 0; }
.quick-actions button { min-height: 58px; }

/* Catalog, shop and checkout */
.shop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 315px; align-items: start; gap: 20px; }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; color: var(--muted); font-size: 12px; }
.shop-search { width: min(420px, 100%); }
.shop-search input { font-size: 12px; }
.catalog-filters { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 16px; margin-bottom: 4px; }
.catalog-filter { flex: 0 0 auto; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; color: #acb9cc; background: #101a2a; font-size: 12px; font-weight: 700; }
.catalog-filter b { margin-left: 5px; color: #7c8ba2; }
.catalog-filter.active { border-color: rgba(56,196,239,.6); color: #e9f9ff; background: rgba(56,196,239,.12); }
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.shop-product { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(150deg, #142035, #0d1625); }
.shop-product[hidden] { display: none; }
.shop-image { height: 180px; overflow: hidden; background: #0b1423; }
.shop-image img { width: 100%; height: 100%; object-fit: cover; }
.shop-product-copy { padding: 17px; }
.shop-product h3 { margin: 7px 0 8px; font: 800 17px/1.25 Manrope, sans-serif; }
.shop-product p { min-height: 44px; margin: 0 0 10px; color: #aebbd0; font-size: 12px; line-height: 1.5; }
.shop-product details { padding: 9px 0; border-top: 1px solid var(--line); color: #bcc9d9; font-size: 12px; line-height: 1.55; }
.shop-product summary { color: #78d4fa; cursor: pointer; font-weight: 700; }
.shop-product details > div { max-height: 200px; overflow: auto; padding-top: 10px; }
.shop-product-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.shop-product-foot strong { font: 800 19px Manrope, sans-serif; }
.cart-panel { position: sticky; top: 88px; }
.cart-panel h2 { margin: 8px 0 18px; font: 800 20px Manrope, sans-serif; }
.cart-lines { display: grid; gap: 15px; }
.cart-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cart-line strong, .cart-line small { display: block; }
.cart-line strong { font-size: 12px; line-height: 1.35; }
.cart-line small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.cart-line > b { align-self: center; font-size: 12px; }
.cart-line-controls { display: flex; align-items: center; gap: 9px; }
.cart-line-controls button { width: 24px; height: 24px; border: 1px solid var(--line-strong); border-radius: 6px; color: white; background: #172940; }
.cart-line-controls span { min-width: 13px; text-align: center; font-size: 12px; }
.cart-total { display: flex; align-items: center; justify-content: space-between; margin: 20px 0; font-size: 13px; }
.cart-total strong { font: 800 22px Manrope, sans-serif; }
.cart-terms { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 16px; color: #bbc8d8; font-size: 11px; line-height: 1.45; }
.cart-terms input { margin-top: 2px; accent-color: var(--cyan); }
.cart-terms a { color: #79d5fd; text-decoration: underline; }
.cart-hint { margin: 13px 0 0 !important; color: var(--muted); font-size: 11px !important; line-height: 1.5; }
.checkout-notice { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; border-color: rgba(56,196,239,.28); }
.checkout-notice.paid { border-color: rgba(84,214,162,.38); }
.checkout-notice h3 { margin: 6px 0 !important; }
.checkout-notice p { color: var(--muted); font-size: 12px !important; }
.catalog-admin-grid { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr); align-items: start; gap: 18px; }
.admin-category-list, .admin-product-list { max-height: 420px; overflow: auto; margin: 0 -20px 20px; border-top: 1px solid var(--line); }
.admin-category, .admin-product { width: 100%; display: grid; grid-template-columns: 50px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px 20px; border: 0; border-bottom: 1px solid var(--line); color: white; background: transparent; text-align: left; }
.admin-category:hover, .admin-product:hover, .admin-category.selected, .admin-product.selected { background: rgba(57,129,197,.13); }
.admin-category img, .admin-product img { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; }
.admin-category strong, .admin-category small, .admin-product strong, .admin-product small { display: block; }
.admin-category strong, .admin-product strong { font-size: 12px; }
.admin-category small, .admin-product small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.admin-category b, .admin-product b { color: #9bdffe; font-size: 12px; }
.catalog-editor { display: grid; gap: 11px; padding-top: 16px; border-top: 1px solid var(--line); }
.catalog-editor h3 { margin: 0 0 4px !important; }
.catalog-editor label { display: grid; gap: 6px; color: #b8c5d6; font-size: 11px; font-weight: 700; }
.catalog-editor input, .catalog-editor textarea, .catalog-editor select { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid var(--line-strong); border-radius: 8px; outline: none; color: white; background: var(--field); font-size: 12px; }
.catalog-editor textarea { min-height: 70px; resize: vertical; }
.catalog-editor input[type=file] { padding: 9px; }
.catalog-editor .catalog-checkbox { display: flex; align-items: center; gap: 8px; }
.catalog-checkbox input { width: auto; accent-color: var(--cyan); }
.catalog-form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 1350px) { .shop-layout { grid-template-columns: minmax(0,1fr) 270px; } .shop-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .catalog-admin-grid { grid-template-columns: minmax(300px,.8fr) minmax(0,1.2fr); } }

/* Mobile workspace: navigation is a drawer and content owns the full viewport. */
@media (max-width: 1050px) {
  .app-shell { display: block; min-width: 0; }
  .workspace, .main-content, .panel, .shop-layout > section { min-width: 0; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(310px, calc(100vw - 48px)); height: 100dvh; overflow-y: auto; transform: translateX(-105%); transition: transform .22s ease; z-index: 61; box-shadow: 20px 0 55px rgba(0,0,0,.32); }
  .app-shell.menu-open .sidebar { transform: translateX(0); }
  .mobile-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 60; width: 100%; border: 0; background: rgba(2,7,15,.68); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, visibility .22s ease; }
  .app-shell.menu-open .mobile-nav-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }
  .mobile-menu { display: inline-grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 10px; color: white; background: #142239; font-size: 19px; }
  .topbar { position: sticky; top: 0; z-index: 30; height: 64px; justify-content: flex-start; gap: 14px; padding: 0 24px; }
  .breadcrumbs { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top-actions { margin-left: auto; }
  .top-actions .search, .top-actions .avatar { display: none; }
  .main-content { width: 100%; max-width: none; padding: 26px 24px 90px; }
  .dashboard-split, .manager-dashboard, .admin-users-layout, .order-layout, .manager-work-grid, .inbox-layout, .shop-layout, .catalog-admin-grid, .billing-settings-grid { grid-template-columns: minmax(0, 1fr); }
  .order-rail { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cart-panel { position: static; scroll-margin-top: 80px; }
  .catalog-admin-grid { gap: 16px; }
  .login-page { grid-template-columns: minmax(0,1fr); }
  .login-brand { min-height: 245px; padding: 32px; }
  .login-brand h1 { font-size: 34px; }
  .login-panel { padding: 32px 24px 56px; }
  .login-card { width: min(480px, 100%); }
}

@media (max-width: 720px) {
  html, body { max-width: 100%; }
  .billing-details-form { grid-template-columns: minmax(0, 1fr); }
  .billing-details-form input { font-size: 16px; }
  .billing-form-actions .button { width: 100%; }
  .topbar { height: 60px; padding: 0 16px; }
  .top-actions .icon-button { width: 40px; height: 40px; }
  .main-content { padding: 20px 16px calc(92px + env(safe-area-inset-bottom)); }
  .hero, .status-hero, .checkout-notice { min-height: 0; flex-direction: column; align-items: stretch; gap: 20px; padding: 22px !important; }
  .hero h1, .page-head h1, .order-heading h1 { font-size: clamp(23px, 7vw, 30px); overflow-wrap: anywhere; }
  .hero .button, .status-hero .button, .checkout-notice .button { width: 100%; }
  .metrics { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 14px 0 24px; }
  .metric-card { padding: 14px; }
  .metric-card strong { font-size: 20px; }
  .order-grid, .shop-grid, .review-grid, .brief-form, .brief-read, .library-files, .client-grid, .user-form, .catalog-form-pair { grid-template-columns: minmax(0,1fr); }
  .brief-form label.full, .form-actions.full, .brief-read .full { grid-column: auto; }
  .order-rail { grid-template-columns: minmax(0,1fr); }
  .page-head, .section-heading, .panel-head, .rail-title { flex-wrap: wrap; align-items: flex-start; gap: 10px; }
  .page-head > *, .head-actions { max-width: 100%; }
  .head-actions, .head-actions select { width: 100%; }
  .order-heading { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: start; gap: 12px; }
  .order-heading-actions { grid-column: 1 / -1; width: 100%; margin-left: 0; justify-content: space-between; flex-wrap: wrap; }
  .order-heading-actions .button { flex: 1 1 170px; }
  .progress-panel { overflow-x: auto; padding: 14px !important; scrollbar-width: thin; }
  .progress-steps { width: max-content; min-width: 520px; }
  .tabs { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
  .tabs button { flex: 0 0 auto; white-space: nowrap; }
  .status-hero .stage-orbit { display: none; }
  .assignment-fee { justify-items: start; min-width: 0; }
  .submission-card { grid-template-columns: minmax(0,1fr); }
  .submission-card > img { width: 100%; height: 190px; }
  .submission-copy { grid-template-columns: minmax(0,1fr); }
  .submission-actions { grid-template-columns: repeat(2,minmax(0,1fr)); min-width: 0; }
  .thread-list { max-height: 220px; overflow-y: auto; }
  .thread-list { scrollbar-width: none; }
  .thread-list::-webkit-scrollbar { display: none; }
  .message-stream { max-height: min(55vh, 480px); padding: 16px 12px; }
  .bubble { max-width: calc(100% - 42px); }
  .conversation-head { grid-template-columns: 36px minmax(0,1fr); }
  .private-channel, .online { grid-column: 2; }
  .message-compose > div, .delivery-actions, .form-actions { flex-wrap: wrap; gap: 12px; }
  .message-compose .button, .delivery-actions .button, .form-actions .button { width: 100%; }
  .shop-toolbar { align-items: stretch; }
  .shop-search { width: 100%; }
  .shop-toolbar > span { display: none; }
  .catalog-filters { margin: 0 -16px 6px; padding: 0 16px 14px; }
  .catalog-filters::-webkit-scrollbar, .tabs::-webkit-scrollbar, .progress-panel::-webkit-scrollbar { display: none; }
  .catalog-filters, .tabs, .progress-panel { scrollbar-width: none; }
  .shop-image { height: 200px; }
  .shop-product-foot { align-items: stretch; flex-direction: column; }
  .shop-product-foot .button { width: 100%; }
  .mobile-cart-jump { position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); left: 12px; z-index: 40; display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 54px; padding: 12px 16px; border: 1px solid rgba(115,211,250,.45); border-radius: 13px; color: white; background: linear-gradient(120deg, #3b6ff0, #127ba7); box-shadow: 0 12px 35px rgba(0,0,0,.42); font-size: 14px; font-weight: 800; }
  .mobile-cart-jump span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .cart-line { grid-template-columns: minmax(0,1fr) auto; }
  .cart-line > b { grid-column: 2; grid-row: 1; }
  .cart-line-controls { grid-column: 1 / -1; }
  .cart-line-controls button { width: 38px; height: 38px; }
  .data-table, .admin-order-table { min-width: 0; width: 100%; }
  .table-tools { flex-wrap: wrap; gap: 8px; }
  .table-tools .search.wide { width: 100%; }
  .table-tools > span { margin-left: auto; }
  .table-header, .admin-order-head { display: none; }
  .table-row:not(.table-header) { grid-template-columns: minmax(0,1fr) auto; min-height: 0; gap: 7px 12px; padding: 16px; }
  .table-row:not(.table-header) > span { min-width: 0; overflow-wrap: anywhere; }
  .table-row:not(.table-header) > span:nth-child(1) { grid-column: 1; grid-row: 1; }
  .table-row:not(.table-header) > span:nth-child(2) { grid-column: 1; grid-row: 2; }
  .table-row:not(.table-header) > span:nth-child(3) { grid-column: 2; grid-row: 1; }
  .table-row:not(.table-header) > span:nth-child(4) { grid-column: 1; grid-row: 3; }
  .table-row:not(.table-header) > span:nth-child(5) { grid-column: 2; grid-row: 2 / span 2; align-self: end; text-align: right; }
  .table-row:not(.table-header) > span:nth-child(6) { display: none; }
  .billing-table .table-row:not(.table-header) > span:nth-child(3) { grid-column: 1; grid-row: 3; }
  .billing-table .table-row:not(.table-header) > span:nth-child(4) { grid-column: 1; grid-row: 4; }
  .billing-table .table-row:not(.table-header) > span:nth-child(5) { grid-column: 2; grid-row: 1; }
  .billing-table .table-row:not(.table-header) > span:nth-child(6) { display: block; grid-column: 2; grid-row: 4; }
  .admin-order-table { margin: 0 -20px -20px; width: calc(100% + 40px); }
  .admin-order-row:not(.admin-order-head) { grid-template-columns: minmax(0,1fr) auto; gap: 7px 12px; padding: 16px 20px; }
  .admin-order-row:not(.admin-order-head) > span:nth-child(1) { grid-column: 1; grid-row: 1; }
  .admin-order-row:not(.admin-order-head) > span:nth-child(2) { grid-column: 1; grid-row: 2; }
  .admin-order-row:not(.admin-order-head) > span:nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
  .admin-order-row:not(.admin-order-head) > span:nth-child(4) { grid-column: 1 / -1; grid-row: 4; }
  .admin-order-row:not(.admin-order-head) > span:nth-child(5) { grid-column: 2; grid-row: 1 / span 2; }
  .user-row { grid-template-columns: 34px minmax(0,1fr); gap: 8px 10px; padding: 14px; }
  .user-row .role-tag, .user-row .account-state { grid-column: 2; justify-self: start; }
  .user-details, .user-details small, .client-card-head, .client-card-head > div { min-width: 0; overflow-wrap: anywhere; }
  .user-org-select { flex-wrap: wrap; }
  .organization-list > div { grid-template-columns: minmax(0,1fr) auto; padding: 12px 16px; }
  .organization-list small { grid-column: 1 / -1; }
  .catalog-admin-grid .panel { min-width: 0; }
  .admin-category-list, .admin-product-list { max-height: 320px; }
  .admin-category, .admin-product { grid-template-columns: 44px minmax(0,1fr) auto; gap: 9px; padding: 10px 14px; }
  .admin-category img, .admin-product img { width: 44px; height: 44px; }
  .admin-product b { font-size: 11px; }
  .toast { right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); left: 12px; }
  .login-brand { min-height: 0; padding: 22px 20px; }
  .login-brand > div:nth-child(2), .login-proof { display: none; }
  .login-panel { padding: 20px 16px 42px; }
  .login-card { padding: 24px 20px; }
  .login-card h2 { font-size: 23px; }
  .login-card input, .brief-form input, .brief-form textarea, .brief-form select, .user-form input, .user-form select, .catalog-editor input, .catalog-editor textarea, .catalog-editor select, .search input, .message-compose textarea, .control-label input, .control-label select, .head-actions select { font-size: 16px !important; }
  .table-row strong, .admin-order-row strong, .user-row strong, .admin-category strong, .admin-product strong, .asset-row strong, .deliverable-row strong, .thread strong { font-size: 13px !important; line-height: 1.35; }
  .table-row small, .admin-order-row small, .user-row small, .admin-category small, .admin-product small, .asset-row small, .deliverable-row small, .thread p, .thread small { font-size: 11px !important; line-height: 1.4; }
  .user-org-select, .user-org-select select, .role-tag, .account-state { font-size: 12px !important; }
  .user-org-select select { min-height: 36px; max-width: 100%; }
  .tabs button, .button, .login-card label { font-size: 13px !important; }
  .button, .back-button, .icon-button, .catalog-filter, .tabs button { min-height: 44px; }
}

@media (max-width: 380px) {
  .main-content { padding-right: 12px; padding-left: 12px; }
  .metrics { grid-template-columns: minmax(0,1fr); }
  .order-card-top { align-items: flex-start; flex-wrap: wrap; }
  .order-heading-actions .status { max-width: 100%; }
  .auth-actions { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .mobile-nav-backdrop { transition: none; }
  .mobile-cart-jump { scroll-behavior: auto; }
}