/* Approved 2026-10-12 warm-white design. Presentation only: no entitlement gates. */ /* Product, delivery and security layouts retain their original controls and APIs. */ #modalRoot .warm-purchase-steps { display: flex; flex-wrap: wrap; list-style: none; gap: 8px 18px; margin: 0 0 20px; padding: 0; color: var(--muted); font-size: 13px; } #modalRoot .warm-purchase-steps li { padding: 6px 0; } #modalRoot .warm-confirmed-quote { margin-top: 8px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #faf8f3; } #modalRoot .warm-confirmed-quote h3 { margin: 0 0 16px; font-size: 17px; } #modalRoot .warm-confirmed-quote dl { margin: 0; display: grid; gap: 12px; } #modalRoot .warm-confirmed-quote dl > div { display: grid; grid-template-columns: 106px minmax(0,1fr); gap: 12px; } #modalRoot .warm-confirmed-quote dt { color: var(--muted); } #modalRoot .warm-confirmed-quote dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; } #modalRoot .warm-confirmed-quote p { margin: 16px 0 0; line-height: 1.8; color: var(--muted); } #modalRoot .warm-confirmed-quote[hidden],#modalRoot .warm-purchase-feedback[hidden],#modalRoot #renewalForm button[hidden] { display: none; } #modalRoot .modal-card:has(#serviceRefundForm) { width: min(580px,100%); } #modalRoot .modal-card:has(#serviceActivateForm) { width: min(660px,100%); } #modalRoot .warm-service-order-summary { margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #faf8f3; display: grid; gap: 10px; } #modalRoot .warm-service-order-summary > div { display: grid; grid-template-columns: 106px minmax(0,1fr); gap: 12px; } #modalRoot .warm-service-order-summary dt { color: var(--muted); } #modalRoot .warm-service-order-summary dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; font-weight: 600; } #modalRoot #serviceRefundForm,#modalRoot #serviceActivateForm { gap: 18px; } #modalRoot #serviceRefundForm .notice,#modalRoot #serviceActivateForm .notice { margin: 0; line-height: 1.8; } #modalRoot .warm-service-feedback { color: #714610; background: #fff6e6; } #modalRoot .warm-service-feedback[hidden],#modalRoot #serviceRefundForm [hidden],#modalRoot #serviceActivateForm [hidden] { display: none; } #modalRoot #serviceActivateForm textarea { min-height: 132px; resize: vertical; } #modalRoot #serviceRefundForm .modal-actions,#modalRoot #serviceActivateForm .modal-actions { flex-wrap: wrap; } #modalRoot .modal-card.device-config-modal { width: min(1180px,100%); padding: 0; } #modalRoot .device-config-workbench { --dc-dark: #a85b13; --dc-line: #e8e3db; --dc-soft: #faf8f3; } #modalRoot .device-config-tool-map { gap: 0; } #modalRoot .device-config-tool-map button { flex: 1; padding: 8px 14px 14px; } #modalRoot .device-config-main { grid-template-columns: minmax(0,1fr) 275px; } #modalRoot .device-config-console { display: block; position: static; height: auto; min-height: 0; border-left: 1px solid #e8e3db; background: #faf8f3; padding: 20px; } #modalRoot .device-config-history { display: grid; gap: 12px; background: #faf9f6; } #modalRoot .device-config-history .device-config-terminal { margin-top: 12px; box-shadow: none; } #modalRoot .device-config-toolbar { grid-template-columns: auto minmax(180px,1fr) minmax(170px,.8fr) auto auto; } #modalRoot [data-device-draft-status] { margin: 0 0 16px; } #modalRoot .modal-card:has(#serviceGrantForm) { width: min(800px,100%); } #modalRoot .modal-card:has(#serviceQuotaForm) { width: min(580px,100%); } #modalRoot .modal-card:has(#miniappPhoneForm) { width: min(760px,100%); } #modalRoot .modal-card:has(#servicePackageForm) { width: min(920px,100%); } #modalRoot #servicePackageForm { display: grid; grid-template-columns: minmax(0,1fr) 245px; align-items: start; gap: 24px; } #modalRoot .warm-package-main,#modalRoot .warm-package-rules { min-width: 0; } #modalRoot .warm-package-rules { position: static; height: auto; display: block; padding: 18px; border: 1px solid #e8e3db; border-radius: 12px; background: #faf8f3; color: var(--ink); } #modalRoot .warm-package-rules h3 { font-size: 16px; margin: 0 0 12px; } #modalRoot .warm-package-rules .notice { margin: 0; border: 0; background: transparent; padding: 0; line-height: 1.85; } #modalRoot #servicePackageForm .warm-form-section { grid-template-columns: 1fr; gap: 12px; padding-bottom: 16px; } #modalRoot #servicePackageForm .modal-actions { grid-column: 1/-1; } #modalRoot #miniappPhoneForm { grid-template-columns: 1fr; } #modalRoot .warm-quota-before { display: grid; align-content: start; gap: 8px; color: var(--muted); } #modalRoot .warm-quota-before strong { display: flex; align-items: center; min-height: 42px; padding: 8px 12px; border: 1px solid #e8e3db; border-radius: 9px; background: #faf9f6; color: var(--ink); font-weight: 600; } #modalRoot #servicePackageForm .warm-form-section { row-gap: 8px; padding-block: 12px; } #modalRoot #servicePackageForm .warm-form-section label { row-gap: 3px; } #modalRoot #servicePackageForm .modal-actions,#modalRoot #serviceGrantForm .modal-actions { position: sticky; bottom: -28px; z-index: 2; background: #fffefd; padding-block: 14px; } @media(min-width:681px){ #modalRoot #servicePackageForm .warm-form-section label,#modalRoot #miniappPhoneForm > label { display: grid; grid-template-columns: 130px minmax(0,1fr); column-gap: 14px; align-items: start; } #modalRoot #servicePackageForm .warm-form-section label > input,#modalRoot #servicePackageForm .warm-form-section label > select,#modalRoot #servicePackageForm .warm-form-section label > textarea, #modalRoot #miniappPhoneForm > label > input,#modalRoot #miniappPhoneForm > label > select,#modalRoot #miniappPhoneForm > label > textarea { grid-column: 2; grid-row: 1; } #modalRoot #servicePackageForm .warm-form-section label > small { grid-column: 2; } } @media(max-width:680px){#modalRoot #servicePackageForm { grid-template-columns: 1fr; }} @media(max-width:1080px){ #modalRoot .device-config-main { grid-template-columns: 1fr; } #modalRoot .device-config-console { border-left: 0; border-top: 1px solid #e8e3db; } #modalRoot .device-config-toolbar { grid-template-columns: 1fr 1fr; } } @media(max-width:680px){ #modalRoot .device-config-toolbar { grid-template-columns: 1fr; } #modalRoot .device-config-tool-map button { flex: none; } #modalRoot .device-config-hero-state { min-width: 0; } } .product-filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 22px 0; } .product-filters button { padding: 9px 17px; min-height: 40px; border-radius: 9px; background: transparent; border: 1px solid transparent; color: #646a70; } .product-filters button[aria-pressed=true] { background: #f8eddd; border-color: #eddcc4; color: #96500b; font-weight: 650; } .product-section-title { display: flex; gap: 16px; align-items: baseline; margin: 20px 0 14px; } .product-section-title h2 { margin: 0; font-size: 20px; } .product-section-title span { color: #646a70; font-size: 13px; } #content .plans { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; } #content .plans .plan { min-width: 0; display: flex; flex-direction: column; padding: 24px; background: white; border: 1px solid #e8e3db; border-radius: 14px; box-shadow: none; } #content .plans .plan h2 { font-size: 23px; line-height: 1.4; } #content .plans .plan .price { font-size: 32px; letter-spacing: -.025em; } #content .plans .plan ul { flex: 1; } #content .plans .plan ul li { padding: 8px 0; line-height: 1.7; } .plan-contract-details { border-top: 1px solid #e8e3db; padding-top: 12px; font-size: 13px; } .plan-contract-details summary { color: #76511f; cursor: pointer; min-height: 32px; } .standalone-product + .compact-stats { margin-top: 20px; } #content .plans .plan-pro { border-color: #d6b88b; background: #fffcf6; } #content .plans .plan-included { padding: 12px 14px; border-radius: 9px; background: #f8eddd; color: #76511f; font-size: 13px; line-height: 1.65; } #content .plans .plan-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e8e3db; } .standalone-product { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-top: 20px; } .standalone-product h2 { font-size: 22px; margin: 8px 0; } .standalone-product p { line-height: 1.7; max-width: 72ch; } .standalone-product .product-entry { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 16px; border: 1px solid #ded4c5; border-radius: 9px; color: #805316; text-decoration: none; flex-shrink: 0; } .security-workspace { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 22px; align-items: start; } .security-workspace-main,.security-workspace-aside { min-width: 0; } #appView .security-workspace-aside,#appView .cd-workspace-aside { display: block; position: static; height: auto; min-height: 0; padding: 0; background: transparent; color: var(--ink); border: 0; overflow: visible; } #appView .security-workspace .panel { margin: 0 0 22px; padding: 22px; } #appView .security-workspace .panel h2 { font-size: 18px; } .security-workspace .security-columns { grid-template-columns: 1fr; gap: 18px; } .security-workspace .security-actions { border-left: 0; padding: 0; } .security-workspace #phoneSecurityForm { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; } .security-workspace #phoneSecurityForm button { grid-column: 1/-1; justify-self: end; } .security-workspace .security-rules { display: grid; grid-template-columns: 1fr; gap: 0; } .security-workspace .security-rules > div { padding: 14px 0; border: 0; border-bottom: 1px solid #e8e3db; background: none; border-radius: 0; } .security-workspace .security-rules > div:last-child { border-bottom: 0; } .security-workspace .security-rules small { display: block; line-height: 1.7; margin-top: 6px; color: #646a70; } .security-operation-buttons { display: grid; gap: 10px; margin-bottom: 16px; } .security-account-operations > p { font-size: 13px; line-height: 1.8; } .cd-workspace { display: grid; grid-template-columns: minmax(0,1fr) 270px; gap: 22px; align-items: start; } .cd-workspace-main,.cd-workspace-aside { min-width: 0; } #appView .cd-workspace .cd-section { margin-top: 0; padding: 22px; } .cd-workspace .cd-section-head { align-items: flex-start; flex-wrap: wrap; gap: 12px; } .cd-workspace .cd-section-head p { margin-top: 8px; line-height: 1.7; } .cd-workspace #cdTechnical { margin-top: 20px; } .cd-workspace .cd-actions + .cd-muted { margin-top: 18px; } .cd-workspace-aside .cd-links { display: grid; gap: 0; } .cd-workspace-aside .cd-links a { padding: 12px 0; border-bottom: 1px solid #e8e3db; text-decoration: none; } .cd-workspace-aside .cd-links a:last-child { border-bottom: 0; } .cd-delivery-facts { margin: 14px 0; } .cd-delivery-facts > div { display: grid; grid-template-columns: 68px minmax(0,1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid #e8e3db; } .cd-delivery-facts dt { color: #646a70; } .cd-delivery-facts dd { margin: 0; overflow-wrap: anywhere; } #modalRoot .modal-card:has(#merchantForm) { width: min(800px,100%); } #modalRoot .modal-card:has(#releaseUploadForm) { width: min(760px,100%); } #appView .warm-form-section,#modalRoot .warm-form-section { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 22px; row-gap: 16px; min-width: 0; margin: 4px 0; padding: 18px 0 22px; border: 0; border-bottom: 1px solid #e8e3db; border-radius: 0; } #appView .warm-form-section legend,#modalRoot .warm-form-section legend { width: 100%; padding: 0; margin-bottom: 0; font-size: 16px; font-weight: 700; color: #283039; } #appView .warm-form-section label,#modalRoot .warm-form-section label { min-width: 0; margin: 0; } #appView .warm-form-section .wide,#modalRoot .warm-form-section .full { grid-column: 1/-1; } #modalRoot #releaseUploadForm .warm-form-section:first-of-type,#modalRoot #releaseUploadForm .warm-form-section:last-of-type { grid-template-columns: 1fr; } #modalRoot #releaseUploadForm .rc-file-drop { margin: 0; } #modalRoot .modal-card:has(#merchantForm) .modal-actions,#modalRoot .modal-card:has(#releaseUploadForm) .modal-actions { position: sticky; bottom: -26px; background: #fff; z-index: 2; padding: 16px 0; border-top: 1px solid #e8e3db; } #appView .hfa-platform-layout > aside { position: static; display: block; height: auto; min-height: 0; background: #faf9f6; color: var(--ink); border: 1px solid #e8e3db; border-radius: 12px; padding: 18px; } #appView .rc-topbar { background: transparent; box-shadow: none; padding: 0 0 22px; } #appView .rc-topbar h2 { font-size: 30px; color: var(--ink); } #appView .rc-topbar p { color: var(--muted); } #appView .rc-tabs { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px; } #appView .rc-tabs button { color: #60666a; border-radius: 8px; min-height: 38px; } #appView .rc-tabs button.active { background: #a85b13; color: #fff; box-shadow: none; } #appView .rc-tabs button::after { display: none; } #appView .rc-command { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 22px; background: transparent; border: 0; padding: 0; box-shadow: none; } #appView .rc-health { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 24px; background: #fff; color: var(--ink); } #appView .rc-health > strong { font-family: inherit; font-size: 32px; line-height: 1.4; } #appView .rc-health small { font-size: 13px; line-height: 1.8; } #appView .rc-health .bad-text { color: #a62d35; } #appView .rc-health .warn-text { color: #8a5a1f; } #appView .rc-health .neutral-text { color: #646a70; } #appView .rc-command > .rc-panel { margin: 0; min-width: 0; } #appView .rc-workflow-panel { margin: 22px 0; padding: 22px; } #appView .rc-workflow-panel h3 { margin: 0 0 20px; font-size: 19px; } #appView .rc-workflow-panel .rc-pipeline { width: 100%; } #appView .rc-workflow-panel .rc-pipeline-step { min-width: 0; } #appView .rc-current.panel { margin: 22px 0; padding: 20px 24px; border-left: 1px solid var(--line); background: #fff; text-align: left; } #appView .rc-recent-versions { display: block; } #appView .rc-kpis > article { background: #fff; border-color: var(--line); box-shadow: none; } #modalRoot .modal-card:has(#renewalForm) { width: min(1000px,100%); } #modalRoot .warm-order-form { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 22px; align-items: start; } .warm-order-main { min-width: 0; } #modalRoot .warm-purchase-reviewing .warm-form-section { display: none; } #modalRoot .warm-purchase-back[hidden] { display: none; } #modalRoot .renewal-action-summary { overflow-wrap: anywhere; background: #faf8f3; color: var(--ink); border-color: #e8e3db; } #modalRoot .renewal-action-feedback[hidden] { display: none; } #modalRoot .renewal-action-read[hidden] { display: none; } #modalRoot .warm-order-summary { position: static; height: auto; padding: 20px; min-width: 0; background: #faf8f3; border: 1px solid #e8e3db; border-radius: 12px; color: var(--ink); } .warm-order-summary h3 { margin: 0 0 16px; font-size: 18px; } .warm-order-summary dl { margin: 0 0 14px; } .warm-order-summary dl > div { padding: 12px 0; border-bottom: 1px solid #e8e3db; } .warm-order-summary dt { font-size: 12px; color: #646a70; margin-bottom: 6px; } .warm-order-summary dd { margin: 0; overflow-wrap: anywhere; line-height: 1.65; font-weight: 600; } .warm-order-summary [data-order-amount] { font-size: 25px; color: #96500b; } .warm-order-summary p,.warm-order-summary .notice { font-size: 12px; line-height: 1.8; } #modalRoot .modal-card:has(#miniappProfileForm) { width: min(880px,100%); } #modalRoot .modal-card:has(#releaseStorageForm) { width: min(740px,100%); } #modalRoot .modal-card:has(#miniappProfileForm) .modal-actions,#modalRoot .modal-card:has(#releaseStorageForm) .modal-actions,#modalRoot .warm-order-form > .modal-actions { position: sticky; bottom: -26px; background: #fff; z-index: 2; padding: 16px 0; } /* Keep all twelve LG fields; desktop parameters are compact, not a long mobile form. */ @media(min-width:901px) { #appView #deviceProfileForm .warm-form-section { padding: 10px 0 14px; row-gap: 12px; } #appView #deviceProfileForm .warm-form-section label { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 12px; align-items: center; font-size: 13px; } #appView #deviceProfileForm .warm-form-section input { min-height: 38px; padding: 8px 10px; } #appView #deviceProfileForm .warm-form-section label.full { grid-column: 1/-1; } #appView #deviceProfileForm .warm-form-section textarea { min-height: 78px; } } @media(max-width:1100px) { .security-workspace,.cd-workspace { grid-template-columns: minmax(0,1fr) 240px; gap: 16px; } .security-workspace .security-form,.cd-workspace .cd-grid { grid-template-columns: 1fr; } } @media(max-width:900px) { .security-workspace,.cd-workspace { grid-template-columns: 1fr; } .security-workspace-aside { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; } .standalone-product { align-items: flex-start; flex-wrap: wrap; } #modalRoot .warm-order-form { grid-template-columns: 1fr; } #appView .rc-command { grid-template-columns: 1fr; } } @media(max-width:650px) { #content .plans,.security-workspace-aside,.security-workspace #phoneSecurityForm { grid-template-columns: 1fr; } .product-section-title { align-items: flex-start; flex-direction: column; gap: 5px; } #content .plans .plan { padding: 20px; } .cd-workspace .cd-checklist li { grid-template-columns: 54px minmax(0,1fr); } .cd-workspace .cd-checklist small { grid-column: 2; text-align: left; } #appView .warm-form-section,#modalRoot .warm-form-section { grid-template-columns: 1fr; } } :root { --ink: #20282f; --muted: #646a70; --line: #e8e3db; --paper: #fbfaf7; --card: #fff; --gold: #ad641d; --dark: #a85b13; --warm-focus: #975010; --warm-soft: #f8eddd; --warm-radius: 14px; } body { background: var(--paper); font-family: var(--orange-misans-font, "MiSans", "Microsoft YaHei", sans-serif); } button, input, select, textarea { font-family: inherit; } button { touch-action: manipulation; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--warm-focus); outline-offset: 3px; } #appView { grid-template-columns: 184px minmax(0, 1fr); } #appView > aside { position: sticky; top: 0; height: 100dvh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 18px 10px 12px; background: #f5f3ed; color: var(--ink); border-right: 1px solid var(--line); box-shadow: none; } #appView > aside .brand { flex-shrink: 0; gap: 10px; padding: 0 6px 20px; } #appView > aside .brand strong { color: #20272c; font-size: 16px; letter-spacing: 0; } #appView > aside .brand small { color: #6b6e6c; font-size: 11px; } #appView > aside .brand-mark { background: transparent; box-shadow: none; border-radius: 12px; } #appView > aside nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; align-content: start; gap: 0; } #appView > aside .nav-group { padding: 17px 10px 7px; color: #727974; font-size: 11px; font-weight: 500; letter-spacing: .04em; } #appView > aside .nav-group:first-child { padding-top: 0; } #appView > aside nav button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 8px 10px; margin: 1px 0; border: 1px solid transparent; border-radius: 9px; color: #34404a; background: transparent; font-size: 13px; line-height: 1.5; font-weight: 500; text-align: left; transition: background-color 120ms ease, color 120ms ease; } #appView > aside nav button i { width: 18px; color: #80786e; font-size: 14px; text-align: center; flex-shrink: 0; } #appView > aside nav button.active { color: #96500b; background: #f8e8d2; border-color: #f2dfc4; font-weight: 700; box-shadow: none; } #appView > aside nav button.active i { color: #ae5d0c; } #appView > aside nav button:active { background: #ecdac1; } #appView > aside .account { flex-shrink: 0; border-top-color: #e4dfd5; padding: 12px 5px 0; margin-top: 14px; } #appView > aside .account > span, #appView > aside .account > span i { color: #62696d; } #appView > aside .account button { color: #66543b; min-height: 32px; } #appView > main { min-width: 0; padding: 28px 28px 48px; } #appView > main > header { align-items: center; gap: 20px; margin-bottom: 24px; } #appView > main > header h1 { font-size: 30px; font-weight: 750; letter-spacing: -.025em; line-height: 1.25; margin: 5px 0 7px; } #appView > main > header p { color: var(--muted); line-height: 1.65; font-size: 14px; } #appView .eyebrow, #modalRoot .eyebrow { color: #96601f; letter-spacing: .07em; font-size: 11px; } #appView .panel, #appView .hfa-panel, #appView .monitor-panel, #appView .cd-section { background: #fff; border-color: var(--line); border-radius: var(--warm-radius); box-shadow: 0 3px 12px rgba(58, 45, 28, .025); } #appView .panel-head h2, #appView .monitor-section-head h2 { color: var(--ink); font-size: 19px; font-weight: 700; } #appView .panel-head p, #appView .monitor-section-head p { color: var(--muted); font-size: 13px; line-height: 1.65; } #appView .primary, #modalRoot .primary, #appView .button-link { background: #a85b13; color: #fff; border: 1px solid #a85b13; border-radius: 10px; box-shadow: 0 3px 8px rgba(126, 67, 13, .1); min-height: 40px; transition: background-color 120ms ease, border-color 120ms ease; } #appView .primary:active, #modalRoot .primary:active { background: #8d480c; border-color: #8d480c; } #appView button:disabled, #modalRoot button:disabled { cursor: not-allowed; box-shadow: none; opacity: .55; } #appView .primary:disabled, #modalRoot .primary:disabled { background: #d5d5d1; border-color: #d5d5d1; color: #525b61; opacity: 1; } #appView .ghost, #modalRoot .ghost, #appView .toolbar button { border-color: #e4ddd2; border-radius: 10px; background: #fff; color: #66543b; min-height: 38px; } #appView .link, #modalRoot .link { color: #985812; } #appView .danger, #modalRoot .danger { color: #b02932 !important; } #appView .page-tabs, #appView .monitor-tabs { gap: 5px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-bottom: 20px; } #appView .page-tabs button, #appView .monitor-tabs button { min-height: 38px; padding: 9px 16px; border: 0; border-radius: 8px; background: transparent; color: #60666a; font-size: 13px; font-weight: 600; } #appView .page-tabs button::after { display: none; } #appView .page-tabs button.active, #appView .monitor-tabs button.active { background: #a85b13; color: #fff; box-shadow: none; } #appView .monitor-tabs { height: auto; min-height: 52px; } #appView .monitor-tabs button::after { display: none; } #appView .monitor-health-state.unknown { background: #f0efeb; color: #666963; } #appView .monitor-flow-node.unknown span, #appView .monitor-metric.unknown > strong { color: #69716f; } #appView .monitor-overview-card:has(.monitor-health-state.unknown) .monitor-clear-state { color: #69716f; } #appView .monitor-overview-card:has(.monitor-health-state.unknown) .monitor-flow-check { color: #858981; } #appView th { background: #faf9f6; color: #60666b; font-size: 12px; letter-spacing: 0; } #appView td { color: #343e45; font-size: 13px; line-height: 1.7; } #appView th, #appView td { border-bottom-color: #ece8e0; padding: 13px 12px; } #appView .table-wrap { border-radius: 10px; overscroll-behavior-x: contain; } #appView tbody tr:last-child td { border-bottom: 0; } #appView .form-grid input, #appView .form-grid select, #appView .form-grid textarea, #modalRoot .form-grid input, #modalRoot .form-grid select, #modalRoot .form-grid textarea, #appView .toolbar input, #appView .toolbar select, #appView .cd-form input, #appView .cd-form select, #appView .cd-form textarea { color: var(--ink); border-color: #dddcd5; border-radius: 9px; background: #fff; min-height: 42px; } #appView input::placeholder, #modalRoot input::placeholder, #appView textarea::placeholder, #modalRoot textarea::placeholder { color: #7c8286; } #appView input[readonly], #modalRoot input[readonly], #appView input:disabled, #modalRoot input:disabled { background: #f4f4f0; color: #626a70; } #appView select:disabled, #modalRoot select:disabled, #appView textarea:disabled, #modalRoot textarea:disabled { background: #f4f4f0; color: #626a70; opacity: 1; } #appView input[type=checkbox], #appView input[type=radio], #modalRoot input[type=checkbox], #modalRoot input[type=radio] { accent-color: #a85b13; min-height: 0; width: auto; } #appView .form-grid label, #modalRoot .form-grid label { color: #354049; font-weight: 600; } #appView .form-grid .switch-line, #modalRoot .form-grid .switch-line { display: flex; align-items: flex-start; gap: 10px; } #appView .form-grid .switch-line input[type=checkbox], #modalRoot .form-grid .switch-line input[type=checkbox] { flex: 0 0 16px; width: 16px; height: 16px; margin: 3px 0 0; padding: 0; } #modalRoot .announcement-form-section { border-left: 0; border-bottom: 1px solid #e8e3db; background: #faf9f6; border-radius: 8px 8px 0 0; } #modalRoot .announcement-form .modal-actions { position: sticky; bottom: -28px; z-index: 3; background: #fffefd; padding: 16px 0; margin-bottom: -28px; } #appView .announcement-rules { background: #f7f2e9; color: #58442a; border: 1px solid #e8dfd1; } #appView .announcement-rules span { color: #6b6255; } #appView .notice, #modalRoot .notice { background: #fff8ed; border: 1px solid #efd9b8; border-radius: 10px; color: #765526; line-height: 1.75; } #appView .danger-note, #modalRoot .danger-note { background: #fff4f2; border-color: #f0cbc6; color: #953b36; } #appView .dashboard-hero, #appView .miniapp-scope-banner, #appView .light-solution-hero, #appView .announcement-hero { background: #fff; border-color: var(--line); box-shadow: none; } #appView .kpi-card, #appView .health-card, #appView .plan { background: #fff; border-color: var(--line); box-shadow: none; border-radius: 13px; } #appView .primary-kpi { background: #f9efdf; color: #61431f; } #appView .primary-kpi strong { color: #583b19; } #appView .primary-kpi > span, #appView .primary-kpi small { color: #705330; } #appView .hfa-store-rail { height: auto; padding: 0; display: block; background: var(--hfa-paper); color: var(--hfa-ink); } #appView #miniappTemplateUpload input { width: 100%; min-width: 0; border: 1px solid #dddcd5; border-radius: 9px; padding: 10px 12px; background: #fff; color: var(--ink); font: inherit; } #appView #miniappTemplateUpload input[type=file] { padding: 6px 8px; } #appView #miniappTemplateUpload input[type=file]::file-selector-button { margin-right: 8px; border: 1px solid #dddcd5; border-radius: 6px; padding: 5px 8px; background: #faf8f3; color: #705330; font: inherit; } #appView .compact-stats { display: flex; flex-wrap: wrap; gap: 0; padding: 12px 0; background: #fff; border: 1px solid var(--line); border-radius: 13px; } #appView .compact-stats .stat { flex: 1 1 130px; min-width: 0; padding: 7px 18px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; } #appView .compact-stats .stat:last-child { border-right: 0; } #appView .compact-stats .stat strong { font-size: 22px; overflow-wrap: anywhere; } #appView .compact-stats .stat small { line-height: 1.6; } #appView .service-catalog-table { padding: 0; overflow: hidden; } #appView .service-catalog-name { display: flex; gap: 12px; align-items: center; min-width: 220px; } #appView .service-catalog-name > i { flex-shrink: 0; color: #a85b13; background: #fbedd9; border-radius: 10px; padding: 14px; font-size: 19px; } #appView .service-catalog-name strong, #appView .service-catalog-name small { display: block; } #appView .service-catalog-name small { color: #646a70; max-width: 360px; margin-top: 4px; } #appView .service-catalog-actions { display: flex; flex-wrap: wrap; gap: 4px; min-width: 210px; } #appView .service-catalog-detail > td { padding: 0 18px 18px; } #appView .service-catalog-detail .service-product { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,1fr); gap: 8px 28px; border: 1px solid #eee3d3; border-radius: 10px; padding: 20px; background: #fffdf9; } #appView .service-catalog-detail .service-product .version-line, #appView .service-catalog-detail .service-product h2, #appView .service-catalog-detail .service-product > p, #appView .service-catalog-detail .service-product .price { grid-column: 1; margin: 0; } #appView .service-catalog-detail .service-product .service-package-preview { grid-column: 2; grid-row: 1 / 6; margin: 0; } #appView .service-catalog-detail .service-product .metric-list { grid-column: 1; } #modalRoot .modal { background: rgba(35, 32, 28, .36); padding: 24px; } #modalRoot .modal-card { background: rgba(255, 255, 253, .98); border: 1px solid #eee8df; border-radius: 18px; box-shadow: 0 24px 64px rgba(33, 26, 18, .18); padding: 28px; max-height: calc(100dvh - 48px); overscroll-behavior: contain; scrollbar-gutter: stable; } #modalRoot .modal-card h2 { color: var(--ink); font-size: 23px; font-weight: 700; line-height: 1.35; } /* A directory edit is a compact task, not a full-width device workbench. */ #modalRoot .modal-card:has(#serviceProductForm) { width: min(700px, 100%); } #modalRoot .modal-close, #modalRoot .modal-x { background: #f4f2ed; color: #62645f; width: 36px; height: 36px; } #modalRoot .modal-actions { padding-top: 18px; border-top: 1px solid var(--line); gap: 10px; } .warm-field-error { display: block; margin-top: 5px; color: #a42b32; font-size: 12px; font-weight: 500; line-height: 1.6; } #appView .warm-error-summary, #modalRoot .warm-error-summary { grid-column: 1 / -1; background: #fff6f3; border: 1px solid #e8bcb5; border-radius: 10px; padding: 14px 16px; color: #8c2c2e; margin-bottom: 14px; } .warm-error-summary ul { margin: 8px 0 0; padding-left: 18px; } #appView .warm-error-link, #modalRoot .warm-error-link { padding: 3px 0; min-height: 0; border: 0; background: transparent; color: #8c2c2e; text-align: left; font-size: 13px; line-height: 1.6; text-decoration: underline; text-underline-offset: 3px; } #appView [aria-invalid=true], #modalRoot [aria-invalid=true] { border-color: #b52e37; } #toast { background: #2f332f; color: #fff; box-shadow: 0 8px 28px #211b1824; border-radius: 12px; max-width: min(520px, calc(100vw - 32px)); } /* Higher specificity than the late-loaded embedded league CSS. Keep all 14 routes. */ #appView > aside #leagueNavigationParent > span { flex: 1; min-width: 0; text-align: left; white-space: nowrap; font-size: 13px; } #appView.league-secondary-open { grid-template-columns: 181px 184px minmax(0,1fr); } #appView > #leagueSecondaryNavigation { box-sizing: border-box; position: sticky; top: 0; display: flex; flex-direction: column; min-width: 0; height: 100dvh; padding: 22px 12px 16px; overflow: hidden; border-right: 1px solid var(--line); background: #faf8f3; } #appView > #leagueSecondaryNavigation[hidden], #appView #leagueSidebarSubmenu[hidden] { display: none; } #leagueSecondaryNavigation .league-secondary-heading { flex: none; padding: 0 10px 20px; } #leagueSecondaryNavigation .league-secondary-heading h2 { margin: 0 0 5px; color: #273039; font-size: 16px; font-weight: 700; line-height: 1.5; } #leagueSecondaryNavigation .league-secondary-heading p { margin: 0; color: #6b706e; font-size: 12px; line-height: 1.5; } #leagueSecondaryNavigation #leagueSidebarSubmenu { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } #leagueSecondaryNavigation #leagueSidebarSubmenu .hq-sidebar-nav { box-sizing: border-box; display: flex; flex-direction: column; min-width: 0; width: 100%; gap: 4px; margin: 0; padding: 2px; border: 0; } #leagueSecondaryNavigation #leagueSidebarSubmenu .hq-sidebar-nav a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border: 1px solid transparent; border-radius: 8px; color: #555c60; font-size: 13px; font-weight: 500; line-height: 1.6; text-decoration: none; overflow-wrap: anywhere; } #leagueSecondaryNavigation #leagueSidebarSubmenu .hq-sidebar-nav a[aria-current=page] { color: #8b4c10; background: #f5e6cf; border-color: #e8cda6; font-weight: 650; } #leagueSecondaryNavigation #leagueSidebarSubmenu .hq-sidebar-nav a:focus-visible { outline: 2px solid #a85b13; outline-offset: -2px; } #leagueSecondaryNavigation #leagueSidebarSubmenu .hq-sidebar-nav a[aria-disabled=true] { cursor: wait; } @media (hover:hover) { #leagueSecondaryNavigation #leagueSidebarSubmenu .hq-sidebar-nav a:not([aria-current=page]):hover { background: #eee9df; color: #273039; } } @media (min-width: 641px) and (max-width: 980px) { #appView.league-secondary-open { grid-template-columns: 164px 160px minmax(0,1fr); } #appView > #leagueSecondaryNavigation { padding-inline: 8px; } } @media (max-width: 640px) { #appView.league-secondary-open { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; } #appView.league-secondary-open > aside, #appView.league-secondary-open > #leagueSecondaryNavigation { position: relative; top: auto; height: 43dvh; max-height: 43dvh; min-height: 240px; } #appView.league-secondary-open > aside nav { grid-template-columns: minmax(0,1fr); max-height: none; } #appView.league-secondary-open > #leagueSecondaryNavigation { padding: 18px 8px 12px; } #appView.league-secondary-open > main { grid-column: 1 / -1; } #leagueSecondaryNavigation .league-secondary-heading { padding-bottom: 12px; } } #appView #content .league-console { --hq-ink: #273039; --hq-muted: #626a70; --hq-line: #e8e3db; --hq-gold: #a85b13; background: transparent; border: 0; padding: 0; } #appView #content .league-console .hq-console-nav { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); overflow: visible; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; } #appView #content .league-console .hq-console-nav a { padding: 10px 6px; color: #4c565f; border-radius: 8px; font-size: 14px; text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; } #appView #content .league-console .hq-console-nav a[aria-current=page] { background: #f7e9d5; color: #96500b; } #appView #content .league-console .hq-panel, #appView #content .league-console .hq-stat { background: #fff; border-color: var(--line); border-radius: 13px; box-shadow: none; } #appView #content .league-console .hq-button.primary { background: #a85b13; border-color: #a85b13; color: #fff; } #appView #content .league-console .hq-table th { background: #faf9f6; } #appView #content .league-console .hq-modal { border-color: var(--line); background: #fffefd; border-radius: 18px; box-shadow: 0 24px 64px #211a122e; } #appView #content .league-console .hq-modal-overlay { background: rgba(35, 32, 28, .36); } /* Finance keeps the six existing views and original account/refund actions. */ #appView #content .league-console[data-league-page="finance"] .hq-content > .hq-panel:first-child > .hq-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 24px; padding: 18px 22px; border-bottom: 1px solid var(--line); background: #fdfbf7; } #appView #content .league-console[data-league-page="finance"] .hq-content > .hq-panel:first-child > .hq-console-row-actions { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 4px; margin: 16px 22px; padding: 5px; border: 1px solid var(--line); border-radius: 11px; background: #faf8f3; } #appView #content .league-console[data-league-page="finance"] .hq-content > .hq-panel:first-child > .hq-console-row-actions .hq-button { border: 0; white-space: normal; min-height: 44px; padding: 9px 6px; box-shadow: none; } #appView #content .league-console .hq-modal:has(#league-finance-confirm) { width: min(760px,calc(100vw - 24px)); } #appView #content .league-console #league-finance-confirm { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; } #appView #content .league-console #league-finance-confirm > p, #appView #content .league-console #league-finance-confirm > label:has(textarea), #appView #content .league-console #league-finance-confirm > label:has([type=password]), #appView #content .league-console #league-finance-confirm > label:has([type=checkbox]), #appView #content .league-console #league-finance-confirm > .hq-form-error { grid-column: 1 / -1; } #appView #content .league-console #league-finance-confirm > .hq-finance-feedback { grid-column: 1 / -1; margin: 0; padding: 14px 16px; border: 1px solid #eed8b5; background: #fff7eb; border-radius: 10px; line-height: 1.7; } #appView #content .league-console #league-finance-confirm > .hq-finance-feedback[role=alert] { border-color: #e8bcb5; background: #fff6f3; color: #8c2c2e; } #appView #content .league-console #league-finance-confirm > p { background: #fff7eb; border: 1px solid #eed8b5; padding: 16px; border-radius: 10px; line-height: 1.8; margin: 0; } #appView #content .league-console .hq-modal::backdrop { background: rgba(35,32,28,.36); } #modalRoot .modal-card:has(#releaseSensitiveForm),#modalRoot .modal-card:has(#platformMediaApproveForm) { width: min(560px,100%); } #modalRoot .modal-card:has(#rolloutForm) { width: min(940px,100%); } #modalRoot #rolloutForm { gap: 12px; } #modalRoot #rolloutForm .warm-form-section { padding: 10px 0; gap: 10px 18px; margin: 0; } #modalRoot .modal-card:has(#qualificationReviewForm) { width: min(1140px,100%); } #modalRoot .warm-qualification-workspace { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.9fr); gap: 20px; align-items: start; margin-top: 18px; } #modalRoot .warm-qualification-workspace > * { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; } #modalRoot .warm-qualification-workspace .qualification-detail { display: block; } #modalRoot .warm-qualification-workspace h3 { margin: 0; font-size: 18px; } #modalRoot .warm-qualification-workspace .qualification-review { grid-template-columns: minmax(0,1fr); } #modalRoot .warm-qualification-workspace .metric-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; margin: 0 0 20px; } #modalRoot .warm-qualification-workspace .metric-list > div { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 0; padding: 12px; border-bottom: 1px solid var(--line); } #modalRoot .warm-qualification-workspace .metric-list dd { margin: 6px 0 0; overflow-wrap: anywhere; } #modalRoot .warm-qualification-workspace .qualification-files { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; } #modalRoot .warm-qualification-workspace .qualification-files a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; } #modalRoot #releaseSensitiveForm > [data-sensitive-feedback] { margin: 0; } #modalRoot #rolloutForm .update-targets { max-height: 280px; overflow-y: auto; overscroll-behavior: contain; } @media (hover: hover) { #appView > aside nav button:not(.active):hover { background: #ebe8df; color: #26323c; } #appView .primary:not(:disabled):hover, #modalRoot .primary:not(:disabled):hover { background: #954c0e; border-color: #954c0e; } #appView tbody tr:hover td { background: #fdfbf7; } } @media (max-width: 900px) { #appView #content .league-console .hq-console-nav { grid-template-columns: repeat(4,minmax(0,1fr)); } #modalRoot .warm-qualification-workspace { grid-template-columns: minmax(0,1fr); } #appView { grid-template-columns: 164px minmax(0, 1fr); } #appView > main { padding: 22px 18px 40px; } #appView > main > header h1 { font-size: 26px; } #appView > aside nav button { padding-inline: 8px; font-size: 12px; } } @media (max-width: 640px) { #appView #content .league-console .hq-console-nav { grid-template-columns: repeat(2,minmax(0,1fr)); } #appView #content .league-console[data-league-page="finance"] .hq-content > .hq-panel:first-child > .hq-details { grid-template-columns: minmax(0,1fr); padding: 14px; } #appView #content .league-console[data-league-page="finance"] .hq-content > .hq-panel:first-child > .hq-console-row-actions { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 14px; } #appView #content .league-console #league-finance-confirm { grid-template-columns: minmax(0,1fr); } #modalRoot .warm-qualification-workspace > * { padding: 14px; } #modalRoot .warm-qualification-workspace .metric-list { grid-template-columns: minmax(0,1fr); } #appView .service-catalog-detail .service-product { display: block; } #appView .compact-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); } #appView .compact-stats .stat { padding: 12px; border-bottom: 1px solid var(--line); } #appView .compact-stats .stat:nth-child(even) { border-right: 0; } #appView { display: block; } #appView > aside { position: relative; height: auto; max-height: 48dvh; border-right: 0; border-bottom: 1px solid var(--line); padding: 14px; } #appView > aside nav { max-height: 29dvh; } #appView > aside nav button { min-height: 44px; font-size: 14px; } #appView > aside .brand { padding-bottom: 12px; } #appView > main { padding: 20px 14px 40px; } #appView > main > header { flex-wrap: wrap; } #modalRoot .modal { padding: 12px; } #modalRoot .modal-card { padding: 22px 18px; max-height: calc(100dvh - 24px); } #modalRoot .form-grid { grid-template-columns: minmax(0, 1fr); } #appView button,#modalRoot button { min-height: 44px; } #modalRoot .modal-close,#modalRoot .modal-x { width: 44px; height: 44px; } #appView input:not([type=checkbox]):not([type=radio]),#appView select,#appView textarea, #modalRoot input:not([type=checkbox]):not([type=radio]),#modalRoot select,#modalRoot textarea { min-height: 44px; font-size: 16px; } #modalRoot .announcement-form .modal-actions { bottom: -22px; margin-bottom: -22px; flex-wrap: wrap; } #appView .warm-error-link, #modalRoot .warm-error-link { min-height: 44px; } #appView .page-tabs { overflow-x: auto; flex-wrap: nowrap; } #appView .page-tabs button { white-space: nowrap; min-height: 44px; } } @media (prefers-reduced-motion: reduce) { #appView *, #modalRoot *, #toast { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { #modalRoot .modal-card { background: #fff; backdrop-filter: none; } } @media (prefers-contrast: more) { #appView > aside nav button.active { border-color: #985812; } #appView input, #appView select, #modalRoot input, #modalRoot select { border-color: #78766f; } } /* Scope-specific writes: immediate status, no animated waiting or repeating CTA. */ .warm-write-feedback[hidden]{display:none!important} .warm-write-feedback p{margin:0 0 10px;line-height:1.6} .warm-write-feedback button{min-height:44px;white-space:normal} #modalRoot #platformLegalForm label:has(>input[type=checkbox]) { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; min-height: 44px; } #modalRoot #platformLegalForm label > input[type=checkbox] { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; padding: 0; } #modalRoot #platformLegalForm .modal-actions { position: sticky; bottom: -28px; z-index: 3; padding-block: 16px; background: #fffefd; } #modalRoot #platformLegalForm textarea[name=content] { height: clamp(180px,28dvh,300px); min-height: 180px; max-height: 50dvh; resize: vertical; } #modalRoot .warm-renewal-boundary { display: block; margin: 20px 0; padding-top: 16px; border-top: 1px solid var(--line); } #modalRoot .warm-renewal-boundary h3 { margin: 0 0 10px; } #modalRoot .warm-renewal-boundary p { margin: 8px 0; line-height: 1.7; } /* A two-column review card needs room for both preview and original review actions. */ #appView .platform-review-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,560px),1fr)); } #appView .review-card-top > div { min-width: 0; } #appView .review-actions { flex-wrap: wrap; } /* R11: match the selected catalog composition; keep original version operations in native disclosures. */ #appView.page-plans .product-filters { width: min(440px,100%); margin: 0 auto; padding: 5px; gap: 0; flex-wrap: nowrap; border: 1px solid #ebe7e0; border-radius: 32px; background: #fff; box-shadow: 0 3px 10px rgba(90,65,28,.08); } #appView.page-plans .product-filters button { flex: 1; min-width: 0; min-height: 44px; border-radius: 26px; padding: 9px 12px; color: #101626; font-size: 14px; font-weight: 600; } #appView.page-plans .product-filters button[aria-pressed=true] { color: #fff; background: #ad641d; border-color: #ad641d; } #appView.page-plans .product-section-title { display: block; margin: 0 0 8px; } #appView.page-plans .product-section-title h2 { font-size: 26px; line-height: 1.4; color: #101626; } #appView.page-plans .product-section-title span { display: block; margin-top: 2px; font-size: 15px; } #appView.page-plans #content .plans { gap: 14px; } #appView.page-plans #content .plans .plan { min-height: 440px; padding: 24px; border-radius: 14px; background: #fff; border-color: #e8e9ed; box-shadow: 0 6px 20px rgba(58,45,28,.04); } #appView.page-plans .plan { position: relative; } #appView.page-plans .plan .version-line { position: absolute; align-self: flex-end; } #appView.page-plans .plan .version-line .eyebrow { display: none; } #appView.page-plans #content .plan h2 { margin: 0 72px 8px 0; font-size: 24px; color: #101626; } #appView.page-plans #content .plan .price { font-size: 32px; color: #101626; margin-bottom: 8px; } #appView.page-plans #content .plan > p:not(.plan-included) { color: #64738c; margin: 0; padding-bottom: 16px; border-bottom: 1px solid #e8e9ed; line-height: 1.7; font-size: 16px; } #appView.page-plans #content .plan > ul { padding: 8px 0; margin: 0; min-height: 130px; color: #64738c; list-style: none; font-size: 16px; } #appView.page-plans #content .plan > ul li { display: flex; gap: 16px; align-items: center; padding: 8px 0; } #appView.page-plans #content .plan > ul li i { color: #ad641d; flex-shrink: 0; } #appView.page-plans .plan-included { margin: 0 0 14px; font-size: 13px; background: #fcf3e6; } #appView.page-plans .plan-card-controls { display: grid; grid-template-columns: 1fr 1fr; margin-top: auto; padding-top: 12px; border-top: 1px solid #e8e9ed; } #appView.page-plans .plan-card-controls button { min-height: 44px; font-size: 16px; } #appView.page-plans .plan-card-controls button+button { border-left: 1px solid #e8e9ed; } #appView.page-plans .plan-version-details,#appView.page-plans .plan-contract-details { border: 0; padding: 0; font-size: 13px; } #appView.page-plans .plan-version-details > summary,#appView.page-plans .plan-contract-details > summary { padding: 8px 0; min-height: 32px; cursor: pointer; } #appView.page-plans .plan-version-details:not([open]) > summary,#appView.page-plans .plan-contract-details:not([open]) > summary { display: none; } #appView.page-plans .plan-version-details .plan-actions { margin-top: 10px; } #appView.page-plans .plan-version-details .plan-impact { margin: 8px 0; } #appView.page-plans .standalone-product { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 16px 28px; margin: 0 0 20px; padding: 22px 24px; } #appView.page-plans .plans + .product-section-title { margin-top: 24px; } #appView.page-plans .standalone-product h2 { margin: 0 0 8px; font-size: 23px; color: #101626; } #appView.page-plans .standalone-product p { margin: 0; color: #64738c; font-size: 16px; } #appView.page-plans .standalone-quote { display: flex; align-items: center; gap: 14px; } #appView.page-plans .standalone-quote strong { font-size: 26px; color: #101626; white-space: nowrap; } #appView.page-plans .standalone-scope { grid-column: 1/-1; padding-top: 12px; border-top: 1px solid #e8e9ed; } #appView.page-plans .plan-catalog-policy { margin: 20px 0; font-size: 13px; } #appView.page-plans .plan-history { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; } #appView.page-plans .plan-history .panel-head { margin-bottom: 8px; } #appView.page-plans .plan-history .panel-head h2 { margin: 0; font-size: 26px; color: #101626; } #appView.page-plans .plan-history .panel-head p { margin: 0; font-size: 15px; color: #64738c; } #appView.page-plans .plan-history-body { padding: 16px; background: #fff; border: 1px solid #e8e9ed; border-radius: 14px; box-shadow: 0 6px 20px rgba(58,45,28,.04); } #appView.page-plans .plan-history .empty { padding: 20px 12px; font-size: 14px; } #appView.page-plans .plan-history .plan-catalog-policy { margin: 14px 0 0; } #appView.page-plans .plan-stats-details { margin-top: 18px; color: var(--muted); font-size: 13px; } #appView.page-plans .plan-stats-details summary { min-height: 32px; cursor: pointer; } /* Reference sidebar density: every original menu remains reachable, with no nested navigation. */ #appView > aside .brand { padding-bottom: 14px; } #appView > aside nav .nav-group { margin: 16px 10px 4px; padding: 0; font-size: 13px; line-height: 20px; } #appView > aside nav .nav-group:first-child { margin-top: 0; margin-bottom: 6px; } #appView > aside nav button { margin-block: 0; } @media(min-width:981px){ #appView { grid-template-columns: 181px minmax(0,1fr); } #appView > aside { padding-top: 14px; } } #appView.page-plans > main > header { margin-bottom: 17px; } @media(max-width:1080px){ #appView.page-plans #content .plans { grid-template-columns: 1fr; } #appView.page-plans #content .plans .plan { min-height: 400px; } #appView.page-plans .standalone-product { grid-template-columns: 1fr; gap: 16px; } #appView.page-plans .standalone-scope { grid-column: 1; } #appView.page-plans .product-section-title { margin-top: 18px; } } /* R14: selected service-billing reference, with live data and original controls retained. */ #appView.page-services > main > header { margin-bottom: 10px; } #appView.page-services #pageTitle { font-size: 32px; color: #101626; } #appView.page-services #pageSubtitle { font-size: 16px; color: #64738c; } #appView.page-services .page-tabs { width: min(710px,100%); padding: 3px; margin-bottom: 12px; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); } #appView.page-services .page-tabs button { min-width: 0; min-height: 44px; padding: 8px 12px; font-size: 16px; font-weight: 600; } #appView.page-services .compact-stats { padding-block: 8px; margin-bottom: 24px; } #appView.page-services .compact-stats .stat { position: relative; display: flex; flex-direction: column; min-height: 68px; padding: 2px 10px 2px 60px; gap: 2px; flex-basis: 150px; } #appView.page-services .compact-stats .stat > span { display: block; color: #64738c; font-size: 14px; line-height: 20px; } #appView.page-services .compact-stats .stat strong { margin: 0; font-size: 18px; line-height: 24px; } #appView.page-services .compact-stats .stat small { display: block; margin-left: -42px; font-size: 12px; line-height: 16px; } #appView.page-services .service-stat-icon { position: absolute; left: 18px; top: 12px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #fff0df; color: #ad641d; font-size: 16px; } #appView.page-services .compact-stats .stat:first-child .service-stat-icon { background: #e1f4e7; color: #2d9160; } #appView.page-services #content > .panel-head { margin-block: 0 14px; align-items: center; } #appView.page-services #content > .panel-head h2 { margin: 0; font-size: 26px; color: #101626; } #appView.page-services #content > .panel-head p { margin: 2px 0 0; font-size: 16px; color: #64738c; } #appView.page-services .service-catalog-table table { min-width: 1000px; } #appView.page-services .service-catalog-table th { color: #64738c; font-size: 14px; padding-block: 15px; white-space: nowrap; } #appView.page-services .service-catalog-table td { font-size: 15px; } #appView.page-services .service-catalog-name strong { font-size: 16px; color: #101626; } #appView.page-services .service-catalog-actions { min-width: 270px; gap: 8px; } #appView.page-services .service-catalog-actions button { min-height: 44px; font-size: 14px; } #appView.page-services .service-catalog-detail > td { padding: 0 8px 14px; } #appView.page-services .service-catalog-detail .service-product { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 28px; min-height: 264px; padding: 18px; } #appView.page-services .service-product-detail h2,#appView.page-services .service-product-packages h3 { margin: 0 0 8px; font-size: 20px; line-height: 28px; color: #101626; } #appView.page-services .service-product-detail > p { margin: 0 0 16px; font-size: 14px; line-height: 22px; color: #64738c; } #appView.page-services .service-product-detail .metric-list { display: block; margin: 0; } #appView.page-services .service-product-detail .metric-list > div { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 0 6px; min-height: 32px; padding: 6px 0; border: 0; font-size: 14px; line-height: 20px; } #appView.page-services .service-product-detail .metric-list dt,#appView.page-services .service-product-detail .metric-list dd { margin: 0; text-align: left; } #appView.page-services .service-product-detail .service-directory-price { font-size: 15px; color: #ad641d; } #appView.page-services .service-product-metadata { margin-top: 12px; font-size: 13px; color: #64738c; } #appView.page-services .service-product-metadata summary { min-height: 32px; cursor: pointer; } #appView.page-services .service-product-metadata .version-line { margin: 8px 0; } #appView.page-services .service-product-packages { border-left: 1px solid #e8dfd1; padding-left: 26px; min-width: 0; } #appView.page-services .service-catalog-detail .service-package-preview { display: grid; grid-template-columns: repeat(auto-fit,minmax(96px,1fr)); align-content: start; align-items: start; gap: 8px; margin: 18px 0 20px; } #appView.page-services .service-catalog-detail .service-package-preview > div { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; min-height: 84px; padding: 12px; background: #fff; } #appView.page-services .service-product-packages > button { min-height: 44px; margin-right: 14px; padding: 8px 16px; border: 1px solid #e8b78a; border-radius: 8px; font-size: 14px; } #appView.page-services .service-product-packages > p { display: inline; font-size: 13px; line-height: 22px; } @media(max-width:1100px){ #appView.page-services .compact-stats .stat { flex-basis: 240px; } #appView.page-services .service-catalog-actions { min-width: 210px; } } @media(max-width:760px){ #appView.page-services .page-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); } #appView.page-services .compact-stats .stat { flex-basis: 180px; } } @media(max-width:640px){ #appView.page-services .service-catalog-detail .service-product { display: block; } #appView.page-services .service-product-packages { border-left: 0; border-top: 1px solid #e8dfd1; padding: 18px 0 0; margin-top: 14px; } } /* R16: real order confirmation in the existing main workspace, not a modal screenshot. */ #appView.page-purchase-confirm #pageTitle { font-size: 32px; color: #101626; } #appView.page-purchase-confirm #pageSubtitle { font-size: 16px; color: #64738c; } #appView.page-purchase-confirm > main > header { margin-bottom: 12px; } #appView .warm-purchase-page-card { position: relative; padding: 0; min-width: 0; } #appView .warm-purchase-page-card > .warm-checkout-cancel { position: absolute; right: 0; top: -72px; min-height: 44px; margin: 0; padding: 8px 12px; border: 0; color: #64738c; background: transparent; } #appView .warm-purchase-steps { display: flex; justify-content: center; gap: 24px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 16px; color: #64738c; } #appView .warm-purchase-steps li { min-height: 34px; display: flex; gap: 12px; align-items: center; } #appView .warm-purchase-steps i { font-size: 32px; color: #b38a58; } #appView .warm-purchase-steps li:nth-child(2) i { color: #ad641d; } #appView .warm-purchase-steps li:nth-child(3) i { color: #b6b4af; } #appView .warm-purchase-steps li:nth-child(2) { color: #ad641d; font-weight: 700; } #appView .warm-purchase-workspace #renewalForm { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 12px; align-items: start; } #appView .warm-purchase-workspace .warm-order-main { padding: 22px; border: 1px solid #e8e9ed; border-radius: 12px; background: #fff; } #appView .warm-purchase-workspace .warm-order-summary { position: static; min-width: 0; height: auto; padding: 22px; border: 1px solid #e8e9ed; border-radius: 12px; background: #fff; } #appView .warm-purchase-workspace .warm-purchase-reviewing .warm-order-main { display: contents; } #appView .warm-purchase-workspace .warm-purchase-reviewing .warm-form-section, #appView .warm-purchase-workspace .warm-purchase-reviewing .warm-order-main > label, #appView .warm-purchase-workspace .warm-purchase-reviewing .warm-order-main > .notice:not(.warm-purchase-feedback), #appView .warm-purchase-workspace .warm-purchase-reviewing .warm-order-summary { display: none; } #appView .warm-purchase-workspace .warm-confirmed-quote { grid-column: 1/-1; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 12px; align-items: start; padding: 0; background: transparent; border: 0; } #appView .warm-purchase-workspace .warm-confirmed-quote[hidden],#appView .warm-purchase-workspace [hidden] { display: none !important; } #appView .warm-checkout-info,#appView .warm-checkout-fees { padding: 22px; min-width: 0; border: 1px solid #e8e9ed; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px rgba(58,45,28,.025); } #appView .warm-checkout-fees { display: block; position: sticky; top: 20px; height: auto; min-height: 0; color: var(--ink); } #appView .warm-confirmed-quote h3 { margin: 0 0 16px; color: #101626; font-size: 22px; line-height: 30px; } #appView .warm-checkout-info > dl { display: grid; gap: 10px; margin: 0 0 20px; } #appView .warm-checkout-info > dl > div { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 12px; align-items: start; } #appView .warm-checkout-info dt { padding-top: 9px; font-size: 15px; color: #64738c; } #appView .warm-checkout-info dd { margin: 0; padding: 8px 12px; min-height: 40px; border: 1px solid #e5e7ed; border-radius: 6px; background: #fafafa; font-size: 15px; line-height: 23px; overflow-wrap: anywhere; } #appView .warm-checkout-info dd small { display: block; color: #64738c; font-size: 13px; line-height: 22px; } #appView .warm-checkout-info > section { padding-top: 18px; margin-top: 18px; border-top: 1px solid #e5e7ed; } #appView .warm-confirmed-quote h4 { margin: 0 0 8px; color: #101626; font-size: 18px; line-height: 26px; } #appView .warm-checkout-info p { margin: 6px 0 0; color: #64738c; font-size: 14px; line-height: 23px; } #appView .warm-checkout-included { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e5e7ed; } #appView .warm-checkout-included strong { font-size: 16px; } #appView .warm-checkout-info .notice { margin: 14px 0 0; font-size: 14px; } #appView .warm-checkout-note { white-space: pre-wrap; overflow-wrap: anywhere; } #appView .warm-checkout-fees > dl { margin: 0; } #appView .warm-checkout-fees > dl > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid #e5e7ed; font-size: 15px; line-height: 24px; } #appView .warm-checkout-fees dt { color: #101626; } #appView .warm-checkout-fees dd { margin: 0; font-weight: 600; text-align: right; } #appView .warm-checkout-fees .warm-included-price { color: #179a62; } #appView .warm-checkout-total { display: grid; gap: 6px; padding: 22px 0; } #appView .warm-checkout-total > span { font-size: 18px; font-weight: 700; } #appView .warm-checkout-total strong { font-size: 34px; line-height: 44px; color: #101626; } #appView .warm-checkout-total small,#appView .warm-checkout-boundary { color: #64738c; font-size: 13px; line-height: 22px; } #appView .warm-checkout-fees .notice { margin: 0 0 16px; padding: 14px; font-size: 14px; line-height: 23px; } #appView .warm-checkout-fees .notice p { margin: 6px 0 0; color: #64738c; } #appView .warm-checkout-fees .modal-actions { display: flex; flex-direction: column; gap: 10px; position: static; margin: 0; padding: 0; border: 0; background: transparent; } #appView .warm-checkout-fees .modal-actions button { width: 100%; min-height: 48px; margin: 0; font-size: 16px; } #appView .warm-checkout-fees .modal-actions [type=submit] { order: -1; } #appView .warm-checkout-fees .warm-checkout-abandon { display: none; } #appView .warm-checkout-fees > .warm-checkout-boundary { margin: 20px 0 0; } #appView .cd-write-feedback { margin: 14px 0 0; padding: 12px 14px; border: 1px solid #e6d7c1; border-radius: 8px; background: #fff9ef; color: #77582e; line-height: 1.7; } #appView .cd-write-feedback[hidden] { display: none; } #appView:has(.cd) #pageTitle { font-size: 32px; color: #101626; } #appView:has(.cd) #pageSubtitle { font-size: 16px; color: #64738c; } #appView .cd { position: relative; } #appView .cd > .cd-back { position: absolute; right: 0; top: -72px; min-height: 44px; padding: 8px 12px; border: 0; background: transparent; color: #64738c; } #appView .cd .cd-safety { padding: 0; margin: 8px 0 16px; background: transparent; border: 0; color: #64738c; font-size: 13px; } #appView .cd button { min-height: 44px; } #appView .cd-character-count { position: absolute; right: 12px; bottom: 12px; color: #64738c; font-size: 12px; line-height: 16px; pointer-events: none; } #appView .cd-detail-body[data-cd-view=config] .cd-workspace { grid-template-columns: minmax(0,1fr); } #appView .cd-detail-body[data-cd-view=config] .cd-workspace-aside { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; } #appView .cd-detail-body[data-cd-view=config] .cd-workspace-main > .cd-section { padding: 20px; border-color: #e8e9ed; background: #fff; } #appView .cd-detail-body[data-cd-view=config] #cdTechnical { margin-top: 16px; gap: 12px; } #appView .cd-detail-body[data-cd-view=config] #cdTechnical .cd-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 24px; } #appView .cd-detail-body[data-cd-view=config] #cdTechnical textarea { min-height: 84px; height: 84px; } #appView .cd-detail-body[data-cd-view=config] #cdTechnical label { position: relative; color: #101626; font-size: 15px; } #appView .cd-detail-body[data-cd-view=config] #cdTechnical input,#appView .cd-detail-body[data-cd-view=config] #cdTechnical textarea { border-color: #e1e4eb; min-height: 44px; padding-right: 78px; font-size: 15px; line-height: 22px; } #appView .cd-draft-summary { margin-top: 18px; padding: 14px; border: 1px solid #eee1cf; border-radius: 8px; background: #fffaf2; } #appView .cd-draft-summary .cd-section-head { margin-bottom: 0; align-items: center; } #appView .cd-draft-summary h3 { margin: 0; font-size: 18px; } #appView .cd-draft-summary .cd-section-head p { margin: 4px 0 0; } #appView .cd-draft-toolbar { flex-wrap: wrap; gap: 8px; } /* R19: existing delivery forms, original submission fields and constraints retained. */ #appView .cd:has(#cdCreate) > .cd-heading,#appView .cd:has(#cdProfile) > .cd-heading { display: none; } .cd .cd-operation-notice { margin: 0 0 20px; padding: 16px 20px; border: 1px solid #efddc5; border-radius: 8px; background: #fff8ef; color: #79552e; font-size: 14px; line-height: 24px; } .cd-operation-notice a { float: right; margin-left: 16px; } #appView #cdCreate { display: grid; grid-template-columns: minmax(0,2.06fr) minmax(0,1fr); gap: 16px; align-items: start; } #appView #cdCreate .cd-section { margin: 0; padding: 22px; border-color: #e8e9ed; background: #fff; } #appView #cdCreate .cd-create-main { display: grid; gap: 18px; } #appView #cdCreate h3,#appView #cdProfile h3 { color: #101626; font-size: 22px; line-height: 30px; } #appView #cdCreate label,#appView #cdProfile label { color: #101626; font-size: 15px; } #appView #cdCreate select,#appView #cdProfile input { min-height: 44px; border-color: #e1e4eb; font-size: 15px; line-height: 22px; } #appView #cdCreate fieldset { border: 0; padding: 0; } #appView #cdCreate legend { margin-bottom: 8px; color: #101626; font-size: 17px; font-weight: 650; } #appView #cdCreate .cd-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 18px; margin-top: 10px; } #appView #cdCreate .cd-options label,#appView #cdCreate .cd-check { min-height: 44px; } #appView #cdCreate #cdReuse { padding: 12px 16px; background: #fff8ef; border: 1px solid #eee1cf; border-radius: 8px; } #appView #cdCreate .cd-create-scope-note { margin: 0; padding: 12px; color: #64738c; background: #f7f8fa; border-radius: 6px; font-size: 13px; } #appView #cdCreate .cd-create-aside { display: grid; position: static; gap: 16px; height: auto; min-height: 0; padding: 0; color: var(--ink); background: transparent; border: 0; } #appView #cdCreate .cd-create-aside .cd-actions { display: grid; grid-template-columns: minmax(0,1fr); justify-content: stretch; gap: 12px; margin-top: 18px; } #appView #cdCreate .cd-create-aside .cd-actions a { text-align: center; font-size: 13px; } #appView #cdCreate .cd-create-aside .primary { min-height: 46px; width: 100%; } #appView #cdCreatePreview { margin: 14px 0 20px; display: grid; gap: 14px; } #appView #cdCreatePreview > div { display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 12px; } #appView #cdCreatePreview dt { color: #64738c; } #appView #cdCreatePreview dd { margin: 0; overflow-wrap: anywhere; } #appView #cdCreateServices { margin: 12px 0 18px; padding-left: 20px; display: grid; gap: 12px; } #appView #cdCreate > .cd-write-feedback { grid-column: 1/-1; } #appView #cdProfile { padding: 26px; background: #fff; border-color: #e8e9ed; gap: 24px; } #appView #cdProfile .cd-profile-section + .cd-profile-section { padding-top: 24px; border-top: 1px solid #e8e9ed; } #appView #cdProfile .cd-grid { grid-template-columns: minmax(0,1fr); gap: 18px; margin-top: 20px; max-width: 642px; } #appView #cdProfile .cd-grid label { display: grid; grid-template-columns: 194px minmax(0,1fr); gap: 7px 18px; align-items: center; } #appView #cdProfile .cd-field-help { grid-column: 2; color: #64738c; font-size: 13px; line-height: 20px; } #appView #cdProfile .cd-profile-impact { padding: 18px; background: #f7f8fa; border-radius: 8px; color: #64738c; } #appView #cdProfile .cd-profile-impact h3 { font-size: 17px; line-height: 24px; } #appView #cdProfile .cd-profile-impact ul { margin: 10px 0 0; padding-left: 20px; line-height: 24px; } #appView #cdProfile .cd-section-head > span { padding: 8px 12px; color: #64738c; background: #f5f6f8; border-radius: 6px; font-size: 14px; } #appView #cdProfile > .cd-actions button { min-width: 144px; font-size: 16px; font-weight: 600; } #modalRoot:has(.cd-supplement-dialog) .modal-card { width: 744px; max-width: calc(100vw - 32px); } #modalRoot .cd-supplement-dialog h2 { margin: 0 0 16px; color: #101626; font-size: 24px; } #modalRoot .cd-supplement-dialog h3 { margin: 20px 0 10px; color: #101626; font-size: 16px; } #modalRoot .cd-supplement-dialog .cd-section { margin: 20px 0 0; padding: 0; border: 0; background: transparent; } #modalRoot .cd-supplement-dialog .cd-supplement-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 24px; margin: 14px 0 20px; } #modalRoot .cd-supplement-facts > div { display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 10px; } #modalRoot .cd-supplement-facts dt { color: #64738c; } #modalRoot .cd-supplement-facts dd { margin: 0; overflow-wrap: anywhere; } #modalRoot .cd-supplement-dialog textarea { min-height: 96px; } #modalRoot .cd-supplement-dialog button { min-height: 44px; } @media(max-width:1000px){ #appView #cdCreate { grid-template-columns: minmax(0,1fr); } #appView #cdCreate .cd-create-aside { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media(max-width:640px){ #appView #cdCreate .cd-create-aside,#appView #cdProfile .cd-grid label,#modalRoot .cd-supplement-dialog .cd-supplement-facts { grid-template-columns: minmax(0,1fr); } #appView #cdProfile .cd-field-help { grid-column: 1; } #appView #cdCreate .cd-section,#appView #cdProfile { padding: 18px; } #appView #cdCreate select,#appView #cdProfile input,#modalRoot .cd-supplement-dialog textarea { font-size: 16px; } .cd-operation-notice a { float: none; display: block; margin: 8px 0 0; } } #appView .cd-checklist-table-wrap { overflow-x: auto; margin-top: 18px; } #appView .cd-checklist-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; } #appView .cd-checklist-table caption { margin-bottom: 10px; text-align: left; font-size: 19px; font-weight: 700; color: #101626; } #appView .cd-checklist-table th { padding: 10px 12px; color: #64738c; background: #f7f7f8; font-weight: 600; white-space: nowrap; } #appView .cd-checklist-table td { padding: 12px; border-bottom: 1px solid #e8e9ed; } #appView .cd-checklist-table .cd-done { color: #168557; } #appView .cd-checklist-table .cd-pending { color: #95602a; } @media(max-width:1100px){ #appView .warm-purchase-workspace #renewalForm,#appView .warm-purchase-workspace .warm-confirmed-quote { grid-template-columns: minmax(0,1fr); } #appView .warm-checkout-fees { position: static; } } @media(max-width:640px){ #appView .cd > .cd-back { position: static; margin-bottom: 12px; } #appView .cd-detail-body[data-cd-view=config] #cdTechnical .cd-grid,#appView .cd-detail-body[data-cd-view=config] .cd-workspace-aside { grid-template-columns: minmax(0,1fr); } #appView .cd-detail-body[data-cd-view=config] #cdTechnical input,#appView .cd-detail-body[data-cd-view=config] #cdTechnical textarea { font-size: 16px; } #appView .warm-purchase-page-card > .warm-checkout-cancel { position: static; margin-bottom: 8px; } #appView .warm-purchase-steps { gap: 10px; flex-wrap: wrap; font-size: 13px; } #appView .warm-checkout-info,#appView .warm-checkout-fees { padding: 16px; } #appView .warm-checkout-info > dl > div { grid-template-columns: minmax(0,1fr); gap: 4px; } #appView .warm-checkout-info dt { padding-top: 0; } #appView .warm-checkout-fees > dl > div { grid-template-columns: minmax(0,1fr); gap: 4px; } #appView .warm-checkout-fees dd { text-align: left; } } /* R28 / designs 74-76: scoped visual refinements; original handlers/fields stay intact. */ #modalRoot .modal-card:has(.warm-purchase-discard) { width: min(580px,100%); } #modalRoot .warm-purchase-discard > p { font-size: 15px; line-height: 1.8; } #modalRoot .warm-purchase-discard .modal-actions { flex-wrap: wrap; } #modalRoot .modal-card:has(#releaseUploadForm) { width: min(700px,100%); scroll-padding-block: 24px 100px; } #modalRoot #releaseUploadForm .warm-form-section:last-of-type { grid-template-columns: repeat(2,minmax(0,1fr)); } #modalRoot #releaseUploadForm > label:has(textarea[name=releaseNotes]) { display: block; margin: 12px 0; font-size: 16px; font-weight: 600; } #modalRoot #releaseUploadForm > label:has(textarea[name=releaseNotes]) > em { display: inline; margin-left: 4px; font-size: 12px; } #modalRoot #releaseUploadForm textarea[name=releaseNotes] { display: block; width: 100%; margin-top: 8px; scroll-margin-block: 24px 100px; } #modalRoot #releaseUploadForm > label:has(textarea[name=releaseNotes]) > small { display: block; margin-top: 8px; font-size: 12px; font-weight: 400; } #modalRoot .modal-card:has(#releaseSensitiveForm) { width: min(644px,100%); padding: 24px; border-radius: 14px; scroll-padding-block: 24px 100px; } #modalRoot .modal-card:has(#releaseSensitiveForm) h2 { margin: 6px 0 20px; font-size: 24px; } #modalRoot #releaseSensitiveForm { gap: 16px; } #modalRoot #releaseSensitiveForm > label { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; } #modalRoot #releaseSensitiveForm > label > small { font-size: 12px; line-height: 1.6; font-weight: 400; color: var(--muted); } #modalRoot #releaseSensitiveForm .notice { margin: 0; padding: 14px 16px; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; } #modalRoot #releaseSensitiveForm > .danger-note { border-color: #eed8b5; background: #fff7eb; color: #714610; } #modalRoot #releaseSensitiveForm > [data-release-target-summary] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 16px; background: #faf9f6; border-color: var(--line); } #modalRoot #releaseSensitiveForm > [data-release-target-summary] > div:last-child { grid-column: 1 / -1; } #modalRoot #releaseSensitiveForm > [data-batch-target-summary] { background: #faf9f6; border-color: var(--line); } #modalRoot #releaseSensitiveForm :is(input,textarea) { scroll-margin-block: 24px 100px; } #modalRoot #releaseSensitiveForm > [data-sensitive-feedback] { background: #faf9f6; color: var(--muted); font-size: 13px; } #modalRoot #releaseSensitiveForm > [data-sensitive-feedback][role=alert] { background: #fff6f3; border-color: #e8bcb5; color: #8c2c2e; } #modalRoot #releaseSensitiveForm > .modal-actions { position: sticky; bottom: -24px; z-index: 2; margin: 0 0 -24px; padding: 16px 0 24px; background: #fffefd; flex-wrap: wrap; } @media(min-width:681px) { #modalRoot #releaseSensitiveForm:has(input[name=confirmation]) > label:has(input[name=confirmation]), #modalRoot #releaseSensitiveForm:has(input[name=confirmation]) > label:has(input[name=currentPassword]) { grid-column: auto; } } @media(max-width:680px) { #modalRoot #releaseUploadForm .warm-form-section:last-of-type { grid-template-columns: minmax(0,1fr); } #modalRoot .modal-card:has(#releaseSensitiveForm) { padding: 22px 18px; } #modalRoot #releaseSensitiveForm { grid-template-columns: minmax(0,1fr); } #modalRoot #releaseSensitiveForm > label.full { grid-column: 1 / -1; } #modalRoot #releaseSensitiveForm > [data-release-target-summary] { grid-template-columns: minmax(0,1fr); } #modalRoot #releaseSensitiveForm > .modal-actions { bottom: -22px; margin-bottom: -22px; padding-bottom: 22px; } } /* R28 / design 62: keep the original package controls and trial/price semantics. */ #modalRoot .modal-card:has(#servicePackageForm) { width: min(720px,100%); padding: 24px; scroll-padding-block: 24px 100px; } #modalRoot .modal-card:has(#servicePackageForm) h2 { font-size: 22px; margin: 6px 0 18px; } #modalRoot #servicePackageForm { grid-template-columns: minmax(0,1fr) 220px; gap: 18px; } #modalRoot #servicePackageForm .warm-form-section { margin: 0; padding-block: 10px; row-gap: 12px; } #modalRoot #servicePackageForm .warm-form-section label { font-size: 14px; line-height: 1.6; } #modalRoot #servicePackageForm .warm-form-section small { font-size: 12px; line-height: 1.6; } #modalRoot #servicePackageForm input,#modalRoot #servicePackageForm select,#modalRoot #servicePackageForm textarea { font-size: 14px; scroll-margin-block: 24px 100px; } #modalRoot #servicePackageForm input[readonly] { background: #f5f4f0; color: var(--muted); cursor: default; } #modalRoot #servicePackageForm .warm-package-rules { padding: 16px; font-size: 14px; } #modalRoot #servicePackageForm .warm-package-rules h3 { font-size: 15px; } #modalRoot #servicePackageForm .modal-actions { bottom: -24px; padding-block: 16px; flex-wrap: wrap; } @media(min-width:681px){ #modalRoot #servicePackageForm .warm-form-section label { grid-template-columns: 112px minmax(0,1fr); column-gap: 14px; } } @media(max-width:680px){ #modalRoot .modal-card:has(#servicePackageForm) { padding: 22px 18px; } #modalRoot #servicePackageForm { grid-template-columns: minmax(0,1fr); gap: 16px; } #modalRoot #servicePackageForm .modal-actions { bottom: -22px; } } /* R28 / designs 96-97: preserve original-order evidence and asynchronous safety. */ #modalRoot .modal-card:has(#serviceActivateForm) { width: min(640px,100%); } #modalRoot .modal-card:has(#serviceRefundForm),#modalRoot .modal-card:has(#serviceActivateForm) { padding: 24px; scroll-padding-block: 24px 100px; } #modalRoot .modal-card:has(#serviceRefundForm) h2,#modalRoot .modal-card:has(#serviceActivateForm) h2 { margin: 6px 0 18px; font-size: 22px; line-height: 1.45; } #modalRoot #serviceRefundForm,#modalRoot #serviceActivateForm { gap: 16px; } #modalRoot #serviceRefundForm > h3,#modalRoot #serviceActivateForm > h3 { margin: 0; font-size: 16px; } #modalRoot #serviceRefundForm > label,#modalRoot #serviceActivateForm > label { margin: 0; font-size: 16px; line-height: 1.6; } #modalRoot #serviceRefundForm .warm-service-order-summary,#modalRoot #serviceActivateForm .warm-service-order-summary { font-size: 14px; line-height: 1.6; } #modalRoot #serviceRefundForm > .danger-note,#modalRoot #serviceActivateForm > .danger-note { background: #fff7eb; border-color: #eed8b5; color: #714610; font-size: 14px; line-height: 1.7; } #modalRoot #serviceRefundForm input,#modalRoot #serviceActivateForm input,#modalRoot #serviceActivateForm textarea { scroll-margin-block: 24px 100px; } #modalRoot #serviceRefundForm .modal-actions,#modalRoot #serviceActivateForm .modal-actions { position: sticky; bottom: -24px; z-index: 2; background: #fffefd; margin-top: 4px; padding-block: 16px; flex-wrap: wrap; } @media(max-width:680px){ #modalRoot .modal-card:has(#serviceRefundForm),#modalRoot .modal-card:has(#serviceActivateForm) { padding: 22px 18px; } #modalRoot #serviceRefundForm .warm-service-order-summary > div,#modalRoot #serviceActivateForm .warm-service-order-summary > div { grid-template-columns: minmax(0,1fr); gap: 4px; } #modalRoot #serviceRefundForm .modal-actions,#modalRoot #serviceActivateForm .modal-actions { bottom: -22px; } } /* R34 / designs 80-81: bounded legal tasks, original fields and irreversible gates. */ #modalRoot .modal-card:has(#platformLegalForm) { width: min(620px,100%); } #modalRoot .modal-card:has(#platformRiskForm) { width: min(650px,100%); } #modalRoot .modal-card:has(#platformLegalForm),#modalRoot .modal-card:has(#platformRiskForm) { padding: 24px; scroll-padding-block: 24px 110px; } #modalRoot .modal-card:has(#platformLegalForm) h2,#modalRoot .modal-card:has(#platformRiskForm) h2 { font-size: 22px; line-height: 1.45; margin: 6px 0 20px; } #modalRoot #platformLegalForm,#modalRoot #platformRiskForm { gap: 18px; } #modalRoot #platformLegalForm label,#modalRoot #platformRiskForm label { font-size: 14px; line-height: 1.6; } #modalRoot #platformLegalForm > h3 { margin: 0; font-size: 15px; } #modalRoot #platformLegalForm > .danger-note { color: #714610; background: #fff7eb; border-color: #eed8b5; font-size: 14px; line-height: 1.7; } #modalRoot .modal-card:has(#platformRiskForm) .metric-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 20px; margin: 0 0 20px; font-size: 14px; } #modalRoot .modal-card:has(#platformRiskForm) .metric-list > div { display: block; min-width: 0; padding: 0; border: 0; } #modalRoot .modal-card:has(#platformRiskForm) .metric-list dd { margin: 4px 0 0; text-align: left; overflow-wrap: anywhere; } #modalRoot .modal-card:has(#platformRiskForm) .audit-detail { font: inherit; font-size: 14px; line-height: 1.7; white-space: pre-wrap; margin: 0 0 20px; } #modalRoot #platformRiskForm > label { grid-column: 1 / -1; } #modalRoot #platformLegalForm input,#modalRoot #platformLegalForm textarea,#modalRoot #platformRiskForm select,#modalRoot #platformRiskForm textarea { scroll-margin-block: 24px 110px; font-size: 14px; } #modalRoot #platformLegalForm > .modal-actions,#modalRoot #platformRiskForm > .modal-actions { position: sticky; bottom: -24px; z-index: 2; background: #fffefd; padding-block: 16px; flex-wrap: wrap; } #modalRoot .warm-risk-confirm h3 { margin: 0 0 8px; font-size: 16px; } #modalRoot .warm-risk-confirm p { margin: 0; line-height: 1.7; } #modalRoot .warm-risk-confirm .modal-actions { margin-top: 14px; flex-wrap: wrap; } @media(max-width:680px){ #modalRoot .modal-card:has(#platformLegalForm),#modalRoot .modal-card:has(#platformRiskForm) { padding: 22px 18px; } #modalRoot .modal-card:has(#platformRiskForm) .metric-list { grid-template-columns: minmax(0,1fr); } #modalRoot #platformLegalForm input,#modalRoot #platformLegalForm textarea,#modalRoot #platformRiskForm select,#modalRoot #platformRiskForm textarea { font-size: 16px; } #modalRoot #platformLegalForm > .modal-actions,#modalRoot #platformRiskForm > .modal-actions { bottom: -22px; } } /* R38 / design 92: retain the original form DOM while asking about unsaved input. */ #modalRoot .modal-card[hidden] { display: none; } #modalRoot .warm-discard-dialog { width: min(480px,100%); padding: 32px; text-align: center; } #modalRoot .warm-discard-symbol { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 18px; border-radius: 50%; color: #fff; background: #aa681f; font-size: 22px; } #modalRoot .warm-discard-dialog h2 { margin: 0 0 14px; font-size: 22px; line-height: 1.4; } #modalRoot .warm-discard-dialog p { margin: 0; color: #565a56; font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; } #modalRoot .warm-discard-dialog .warm-discard-boundary { margin-top: 12px; font-size: 14px; } #modalRoot .warm-discard-dialog .modal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } #modalRoot .warm-discard-dialog .modal-actions button { flex: 1 1 160px; min-height: 44px; } @media (max-width: 600px) { #modalRoot .warm-discard-dialog { padding: 26px 20px; } #modalRoot .warm-discard-dialog p { font-size: 16px; } #modalRoot .warm-discard-dialog .warm-discard-boundary { font-size: 14px; } } /* R40 / service-order variants of 92 and 96-97: no new commercial fields. */ #modalRoot .modal-card:has(#serviceQuoteForm) { width: min(640px,100%); } #modalRoot .modal-card:has(#serviceCancelForm) { width: min(520px,100%); } #modalRoot .modal-card:has(#serviceQuoteForm),#modalRoot .modal-card:has(#serviceCancelForm) { padding: 24px; scroll-padding-block: 24px 110px; } #modalRoot .modal-card:has(#serviceQuoteForm) h2,#modalRoot .modal-card:has(#serviceCancelForm) h2 { font-size: 22px; margin: 6px 0 20px; line-height: 1.45; } #modalRoot #serviceQuoteForm,#modalRoot #serviceCancelForm { gap: 18px; } #modalRoot #serviceQuoteForm label,#modalRoot #serviceCancelForm label { margin: 0; font-size: 14px; line-height: 1.6; } #modalRoot #serviceQuoteForm > h3 { margin: 0; font-size: 15px; } #modalRoot #serviceQuoteForm > p.notice { margin: 0; } #modalRoot #serviceQuoteForm .notice { line-height: 1.7; } #modalRoot #serviceQuoteForm > .modal-actions,#modalRoot #serviceCancelForm > .modal-actions { position: sticky; bottom: -24px; z-index: 2; background: #fffefd; margin: 0; padding-block: 16px; flex-wrap: wrap; } @media(max-width:680px){ #modalRoot .modal-card:has(#serviceQuoteForm),#modalRoot .modal-card:has(#serviceCancelForm) { padding: 22px 18px; } #modalRoot #serviceQuoteForm input,#modalRoot #serviceQuoteForm textarea,#modalRoot #serviceCancelForm input { font-size: 16px; } #modalRoot #serviceQuoteForm > .modal-actions,#modalRoot #serviceCancelForm > .modal-actions { bottom: -22px; } } /* R42 / selected release-record and shared error states: retain original details. */ #modalRoot .modal-card:has(.rc-failure-guide) { width: min(680px,100%); padding: 24px; scroll-padding-block: 24px 100px; } #modalRoot .modal-card:has(.rc-failure-guide) .rc-modal-heading { align-items: flex-start; gap: 14px; margin-bottom: 20px; } #modalRoot .modal-card:has(.rc-failure-guide) h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.4; } #modalRoot .modal-card:has(.rc-failure-guide) .rc-modal-heading p { margin: 0; font-size: 14px; line-height: 1.65; } #modalRoot .rc-failure-guide { background: #fff9f5; border-color: #e5c9b9; } #modalRoot .rc-failure-runs li { gap: 16px; } #modalRoot .rc-failure-runs li > * { min-width: 0; overflow-wrap: anywhere; } #modalRoot .modal-card:has(.rc-failure-guide) > .modal-actions { position: sticky; bottom: -24px; z-index: 2; background: #fffefd; padding-block: 16px; flex-wrap: wrap; } @media(max-width:680px){ #modalRoot .modal-card:has(.rc-failure-guide) { padding: 22px 18px; } #modalRoot .rc-failure-runs li { display: block; } #modalRoot .rc-failure-runs small { text-align: left; } } /* R50 / selected forms 36, 37, 98: keep original controls and provider rules. */ #modalRoot #miniappProfileForm,#modalRoot #miniappPhoneForm { gap: 18px; } #modalRoot #miniappProfileForm label,#modalRoot #miniappPhoneForm label { margin: 0; line-height: 1.65; font-size: 14px; } #modalRoot #miniappProfileForm .notice,#modalRoot #miniappPhoneForm .notice { margin: 0; line-height: 1.75; overflow-wrap: anywhere; } #modalRoot #miniappPhoneForm > .modal-actions { position: sticky; bottom: -26px; z-index: 2; background: #fffefd; padding-block: 16px; flex-wrap: wrap; } #modalRoot .modal-card:has(.miniapp-action-summary) { width: min(620px,100%); } #modalRoot .miniapp-action-summary { background: #faf8f3; border: 1px solid #e9e3d9; border-radius: 14px; padding: 18px; line-height: 1.75; overflow-wrap: anywhere; } #modalRoot .miniapp-action-summary p { margin: 0 0 10px; } #modalRoot .miniapp-action-summary p:last-child { margin-bottom: 0; color: #5b5b54; } #appView #miniappTemplateUpload { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; width: 100%; align-items: start; } #appView #miniappTemplateUpload label { display: grid; gap: 8px; min-width: 0; margin: 0; line-height: 1.65; } #appView #miniappTemplateUpload input[type=file] { min-height: 88px; padding: 22px 16px; background: #fcfaf6; border-style: dashed; border-color: #d7c9b5; } #appView #miniappTemplateUpload > button[type=submit] { justify-self: end; min-height: 44px; } #appView #miniappTemplateUpload .warm-write-feedback { margin: 0; overflow-wrap: anywhere; } .miniapp-readonly { color: #675c4b; background: #faf7f1; border: 1px solid #e5dccc; line-height: 1.7; } .miniapp-template-missing { margin: 0; color: #825021; background: #fff8ec; border: 1px solid #ead6b9; line-height: 1.75; } @media(min-width:681px){ #modalRoot #miniappProfileForm .warm-form-section { grid-template-columns: minmax(0,1fr); } #modalRoot #miniappProfileForm .warm-form-section > label,#appView #miniappTemplateUpload > label { display: grid; grid-template-columns: 130px minmax(0,1fr); column-gap: 14px; align-items: start; } #modalRoot #miniappProfileForm .warm-form-section > label > input,#modalRoot #miniappProfileForm .warm-form-section > label > select,#modalRoot #miniappProfileForm .warm-form-section > label > textarea,#appView #miniappTemplateUpload > label > input { grid-column: 2; grid-row: 1; } #modalRoot #miniappProfileForm .warm-form-section > label > small { grid-column: 2; } #appView #miniappTemplateUpload input[type=file] { min-height: 148px; padding-block: 48px; } } @media(max-width:680px){ #modalRoot #miniappProfileForm input,#modalRoot #miniappProfileForm select,#modalRoot #miniappProfileForm textarea,#modalRoot #miniappPhoneForm input,#modalRoot #miniappPhoneForm select,#modalRoot #miniappPhoneForm textarea { font-size: 16px; } #modalRoot #miniappPhoneForm > .modal-actions { bottom: -22px; } #appView #miniappTemplateUpload input { font-size: 16px; } #appView #miniappTemplateUpload > button[type=submit] { justify-self: stretch; } } /* R54 / selected announcement 86,109: original controls, plain text and counts. */ #modalRoot .modal-card:has(#announcementForm) { width: min(1120px,100%); padding: 24px; } #modalRoot #announcementForm { gap: 18px; align-items: start; } #modalRoot #announcementForm label,#modalRoot #revokeAnnouncementForm label { margin: 0; line-height: 1.65; font-size: 14px; } #modalRoot #announcementForm .announcement-form-section { padding-top: 16px; } #modalRoot #announcementForm .modal-actions,#modalRoot #revokeAnnouncementForm .modal-actions { position: sticky; bottom: -24px; z-index: 2; background: #fffefd; margin: 0; padding-block: 16px; flex-wrap: wrap; } #modalRoot .announcement-review-summary { display: block; position: static; min-width: 0; height: auto; padding: 18px; border: 1px solid #e9e3d9; border-radius: 12px; background: #faf8f3; } #modalRoot .announcement-review-summary h3 { margin: 0 0 18px; font-size: 16px; } #modalRoot .announcement-review-summary dl { margin: 0; display: grid; gap: 18px; } #modalRoot .announcement-review-summary dt { color: #625a4e; font-size: 13px; } #modalRoot .announcement-review-summary dd { margin: 4px 0 0; color: var(--ink); font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; } #modalRoot .announcement-review-summary p { border-top: 1px solid #e6dfd3; margin: 18px 0 0; padding-top: 16px; font-size: 13px; color: #625a4e; line-height: 1.75; } #modalRoot .announcement-original-record { margin: 18px 0; line-height: 1.75; overflow-wrap: anywhere; } #modalRoot .modal-card:has(#revokeAnnouncementForm) { width: min(660px,100%); padding: 24px; } #modalRoot #revokeAnnouncementForm { gap: 18px; } #modalRoot #revokeAnnouncementForm textarea { min-height: 132px; } @media(min-width:1001px){ #modalRoot #announcementForm { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 260px; column-gap: 22px; } #modalRoot #announcementForm { row-gap: 10px; } #modalRoot #announcementForm > label,#modalRoot #announcementTargets > label { display: grid; grid-template-columns: 100px minmax(0,1fr); column-gap: 12px; align-items: start; } #modalRoot #announcementForm > label > input,#modalRoot #announcementForm > label > select,#modalRoot #announcementForm > label > textarea,#modalRoot #announcementTargets > label > select { grid-column: 2; grid-row: 1; } #modalRoot #announcementTargets > label > small { grid-column: 2; } #modalRoot #announcementForm > label.switch-line { display: flex; padding: 8px 12px; } #modalRoot #announcementForm .announcement-form-section { padding: 10px 12px; margin-top: 6px; } #modalRoot #announcementForm textarea[name=content] { min-height: 104px; height: 104px; } #modalRoot #announcementForm select[multiple] { min-height: 96px; height: 96px; } #modalRoot #announcementForm .announcement-surface-checks label { padding: 8px 10px; min-height: 54px; } #modalRoot #announcementForm > .full { grid-column: 1/3; } #modalRoot #announcementForm > .modal-actions { grid-column: 1/-1; } #modalRoot .announcement-review-summary { grid-column: 3; grid-row: 1/19; position: sticky; top: 0; } } @media(max-width:1000px){#modalRoot #announcementForm .announcement-review-summary { grid-column: 1/-1; }} @media(max-width:680px){ #modalRoot .modal-card:has(#announcementForm),#modalRoot .modal-card:has(#revokeAnnouncementForm) { padding: 22px 18px; } #modalRoot #announcementForm input,#modalRoot #announcementForm textarea,#modalRoot #announcementForm select,#modalRoot #revokeAnnouncementForm textarea { font-size: 16px; } #modalRoot #announcementForm .modal-actions,#modalRoot #revokeAnnouncementForm .modal-actions { bottom: -22px; } } /* R57 · designs 87/88: original incident actions and measured source fields. */ #modalRoot .modal-card:has(#monitorIncidentForm) { width: min(680px,100%); padding: 24px; } #modalRoot .monitor-incident-review { padding-bottom: 18px; margin: 18px 0 20px; border-bottom: 1px solid var(--line); } #modalRoot .monitor-incident-review h3 { margin: 0 0 12px; font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; } #modalRoot .monitor-incident-review dl { display: grid; gap: 10px; margin: 18px 0; } #modalRoot .monitor-incident-review dl > div { display: grid; grid-template-columns: 108px minmax(0,1fr); gap: 16px; } #modalRoot .monitor-incident-review dt,#modalRoot #monitorIncidentHint { color: #625a4e; } #modalRoot .monitor-incident-review dd { margin: 0; overflow-wrap: anywhere; font-weight: 500; } #modalRoot .monitor-incident-review p { margin: 12px 0 0; overflow-wrap: anywhere; line-height: 1.75; } #modalRoot #monitorIncidentForm { gap: 18px; } #modalRoot #monitorIncidentForm > label { margin: 0; } #modalRoot #monitorIncidentForm .warm-error-summary { margin-bottom: 0; } #modalRoot #monitorIncidentForm .modal-actions { margin-top: 8px; } #modalRoot #monitorIncidentForm textarea { min-height: 112px; } #modalRoot #monitorIncidentHint { display: block; font-size: 13px; line-height: 1.7; } #modalRoot .monitor-incident-boundary { margin: 0; color: #714610; background: #fff6e6; line-height: 1.8; } .monitor-source-status-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14px; } .monitor-source-status-table th,.monitor-source-status-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .monitor-source-status-table th { color: #625a4e; font-weight: 600; background: #faf8f3; } .monitor-source-status-table td:last-child { line-height: 1.75; overflow-wrap: anywhere; } .monitor-shell .monitor-severity { white-space: nowrap; } .monitor-source-scroll-hint { display: none; } #content .monitor-detail-table { display: block; min-width: 0; border-collapse: separate; } #content .monitor-detail-table tbody { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 12px; } #content .monitor-detail-table tr { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; } #content .monitor-detail-table th,#content .monitor-detail-table td { display: block; padding: 0; width: auto; background: transparent; border: 0; text-align: left; } #content .monitor-detail-table th { font-size: 13px; font-weight: 500; color: #625a4e; } #content .monitor-detail-table td { color: var(--ink); font-size: 16px; line-height: 1.6; font-weight: 600; overflow-wrap: anywhere; } .monitor-restore-boundary { padding: 20px 24px; } .monitor-restore-boundary h2 { margin: 0 0 12px; font-size: 18px; } .monitor-restore-boundary p { margin: 0; color: #714610; background: #fff6e6; padding: 14px 16px; border-radius: 12px; line-height: 1.8; } @media(max-width:680px){ #modalRoot .modal-card:has(#monitorIncidentForm) { padding: 22px 18px; } #modalRoot #monitorIncidentForm select,#modalRoot #monitorIncidentForm textarea { font-size: 16px; } #modalRoot .monitor-incident-review dl > div { grid-template-columns: 88px minmax(0,1fr); gap: 10px; } #modalRoot #monitorIncidentForm .modal-actions { bottom: -22px; } .monitor-restore-boundary { padding: 18px; } .monitor-source-scroll-hint { display: block; font-size: 13px; line-height: 1.7; margin: 12px 0 0; color: #625a4e; } #content .monitor-detail-table tbody { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } #content .monitor-detail-table tr { padding: 12px; } } /* R61 · design89: read-only audit detail, no invented filters or mutation entry. */ .audit-center .toolbar input { flex: 1; min-width: 0; } .audit-read-status[hidden] { display: none !important; } .audit-read-boundary { color: #625a4e; font-size: 13px; line-height: 1.8; margin: 16px 0; } .audit-center td small { display: block; margin-top: 6px; overflow-wrap: anywhere; } #modalRoot .audit-detail-overlay { display: flex; align-items: flex-start; justify-content: flex-end; padding: 16px; } #modalRoot .audit-detail-overlay .modal-card { width: min(500px,100%); max-height: calc(100vh - 32px); padding: 24px; } #modalRoot .audit-record-detail h2 { margin: 0 0 26px; } #modalRoot .audit-record-detail h3 { margin: 26px 0 14px; font-size: 17px; } #modalRoot .audit-record-detail dl { margin: 0; } #modalRoot .audit-record-detail dl > div { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); } #modalRoot .audit-record-detail dt { color: #625a4e; } #modalRoot .audit-record-detail dd { margin: 0; overflow-wrap: anywhere; line-height: 1.7; } #modalRoot .audit-record-detail pre { margin: 0; padding: 16px; background: #faf8f3; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.75; max-height: 360px; overflow: auto; } #modalRoot .audit-json-boundary { margin: 16px 0 0; line-height: 1.8; color: #625a4e; } @media(max-width:680px){ .audit-center .toolbar { flex-wrap: wrap; } .audit-center .toolbar input { font-size: 16px; flex-basis: 100%; } #modalRoot .audit-detail-overlay { padding: 12px; } #modalRoot .audit-detail-overlay .modal-card { max-height: calc(100dvh - 24px); padding: 22px 18px; } #modalRoot .audit-record-detail dl > div { grid-template-columns: 92px minmax(0,1fr); gap: 12px; } } /* Existing supplier parameters, disclosed only for completion of historical cases. */ #modalRoot .qualification-sms-profile { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 14px; } #modalRoot .qualification-sms-profile[hidden] { display: none; } #modalRoot .qualification-sms-profile legend { padding-inline: 6px; font-weight: 650; } #modalRoot .qualification-sms-profile p { margin: 0; } /* Payment-contract scope and compact three-section editor from design 77. */ #modalRoot .modal-card.warm-payment-contract { width: min(776px,100%); } #modalRoot .payment-contract-scope { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 22px; margin: 18px 0 14px; padding: 14px 16px; border-radius: 10px; background: #f8f5ef; } #modalRoot .payment-contract-scope > div { display: grid; grid-template-columns: 64px minmax(0,1fr); align-items: baseline; gap: 10px; min-width: 0; } #modalRoot .payment-contract-scope dt { color: #625a4e; font-size: 13px; } #modalRoot .payment-contract-scope dd { margin: 0; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; } #modalRoot #paymentContractForm { gap: 12px 22px; } #modalRoot #paymentContractForm .warm-form-section { padding-block: 12px 16px; row-gap: 12px; margin: 0; } #modalRoot #paymentContractForm .checks { gap: 12px 18px; } #modalRoot #paymentContractForm .notice { font-size: 13px; line-height: 1.75; } #modalRoot #paymentContractForm .modal-actions { position: sticky; bottom: -28px; z-index: 2; padding-block: 14px; background: #fffefd; border-top: 1px solid var(--line); } @media(min-width:900px){ #modalRoot #paymentContractForm .warm-form-section:first-of-type > label { display: grid; grid-template-columns: 108px minmax(0,1fr); align-items: center; gap: 8px; font-size: 13px; } #modalRoot #paymentContractForm .warm-form-section:first-of-type > label > input,#modalRoot #paymentContractForm .warm-form-section:first-of-type > label > select { min-width: 0; } } @media(max-width:680px){ #modalRoot .payment-contract-scope { grid-template-columns: minmax(0,1fr); padding: 12px; gap: 8px; } #modalRoot #paymentContractForm input:not([type=checkbox]),#modalRoot #paymentContractForm select,#modalRoot #paymentContractForm textarea { font-size: 16px; } #modalRoot #paymentContractForm .modal-actions { bottom: -24px; flex-wrap: wrap; } } /* Design 83: a task-focused editor beside the existing operational boundaries. */ .location-config-workspace { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(280px,1fr); gap: 20px; align-items: start; } .location-config-workspace > .panel { min-width: 0; margin: 0; } #appView .location-config-notes { display: block; position: static; width: auto; min-width: 0; height: auto; padding: 0; background: none; color: var(--ink); overflow: visible; } .location-config-notes .panel { margin: 0; } .location-config-notes h2 { font-size: 18px; margin: 0 0 18px; } .location-config-notes p { line-height: 1.85; color: #625a4e; } #appView .location-config-workspace #locationServiceForm .warm-form-section { grid-template-columns: minmax(0,1fr); } .platform-config-feedback p { margin: 0 0 10px; overflow-wrap: anywhere; } #appView #platformWechatForm .modal-actions,#appView #locationServiceForm .modal-actions { flex-wrap: wrap; } @media(min-width:1100px){ #appView .location-config-workspace #locationServiceForm .warm-form-section > label:not(.switch-line) { display: grid; grid-template-columns: 148px minmax(0,1fr); align-items: start; gap: 10px; } #appView .location-config-workspace #locationServiceForm .warm-form-section > label > input { grid-column: 2; grid-row: 1; } #appView .location-config-workspace #locationServiceForm .warm-form-section > label > small { grid-column: 2; } } @media(max-width:1000px){.location-config-workspace { grid-template-columns: minmax(0,1fr); }} @media(max-width:680px){ #appView #locationServiceForm input:not([type=checkbox]),#appView #platformWechatForm input:not([type=checkbox]),#appView #platformWechatForm textarea { font-size: 16px; } #appView #locationServiceForm .modal-actions,#appView #platformWechatForm .modal-actions { align-items: stretch; gap: 10px; } #appView #locationServiceForm .modal-actions .save-status,#appView #platformWechatForm .modal-actions .save-status { flex-basis: 100%; } } /* R88: preserve the four existing Huifu configuration sections and real SDK/key status. */ #appView .hfa-platform-layout > aside { align-self: start; } #appView #hfaPlatformForm .warm-form-section { grid-template-columns: minmax(0,1fr); } #appView #hfaPlatformForm .warm-form-section label { display: grid; grid-template-columns: 150px minmax(0,1fr); align-items: start; gap: 8px 16px; } #appView #hfaPlatformForm .warm-form-section label > input, #appView #hfaPlatformForm .warm-form-section label > textarea { grid-column: 2; min-width: 0; font-weight: 400; } #appView #hfaPlatformForm .warm-form-section label > small { grid-column: 2; overflow-wrap: anywhere; } #appView #hfaPlatformForm .hfa-platform-feedback { margin-top: 18px; overflow-wrap: anywhere; } #appView #hfaPlatformForm .hfa-platform-feedback p { margin: 0 0 12px; } #appView #hfaPlatformForm .hfa-platform-feedback[hidden] { display: none; } #appView #hfaPlatformForm .hfa-platform-save-boundary { margin: 18px 0 0; line-height: 1.7; } @media(max-width:760px) { #appView #hfaPlatformForm .warm-form-section label { grid-template-columns: minmax(0,1fr); } #appView #hfaPlatformForm .warm-form-section label > input, #appView #hfaPlatformForm .warm-form-section label > textarea, #appView #hfaPlatformForm .warm-form-section label > small { grid-column: 1; } #appView #hfaPlatformForm input,#appView #hfaPlatformForm textarea { font-size: 16px; } } /* R93: existing per-store split controls; no new payment capabilities. */ #appView #hfaSplitForm .hfa-split-boundary { margin: 0 0 20px; line-height: 1.7; color: var(--muted); overflow-wrap: anywhere; } #appView #hfaSplitForm .hfa-form-grid { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); align-items: start; } #appView #hfaSplitForm input:not([type=checkbox]),#appView #hfaSplitForm select { min-width: 0; font-weight: 400; } #appView #hfaSplitForm .hfa-form-actions { align-items: center; flex-wrap: wrap; } #appView #hfaSplitForm .hfa-form-actions > span { flex: 1; min-width: 180px; padding: 12px 0; line-height: 1.6; } #appView #hfaSplitForm .hfa-split-feedback { margin-top: 18px; overflow-wrap: anywhere; } #appView #hfaSplitForm .hfa-split-feedback p { margin: 0 0 12px; } #appView #hfaSplitForm .hfa-split-feedback[hidden] { display: none; } @media(max-width:760px) { #appView #hfaSplitForm .hfa-form-grid { grid-template-columns: minmax(0,1fr); } #appView #hfaSplitForm input:not([type=checkbox]),#appView #hfaSplitForm select { font-size: 16px; } } /* R107 / design 77: scoped contract editor; all original controls are retained. */ #modalRoot .payment-contract-overlay { background: rgba(43,53,66,.22); backdrop-filter: none; } #modalRoot .modal-card.warm-payment-contract { padding: 20px 22px 18px; border-radius: 9px; color: #14213c; background: #fffefd; box-shadow: 0 12px 32px #17223824; } #modalRoot .warm-payment-contract h2 { margin: 0 0 12px; font-size: 20px; line-height: 1.4; } #modalRoot .warm-payment-contract .modal-close { top: 12px; right: 12px; width: 32px; height: 32px; background: transparent; color: #52627f; } #modalRoot .warm-payment-contract .payment-contract-scope { margin: 0 0 12px; padding: 8px 12px; gap: 4px 20px; border-radius: 5px; background: #f4f6f8; } #modalRoot .payment-contract-scope > div { grid-template-columns: auto minmax(0,1fr); gap: 8px; } #modalRoot .payment-contract-scope dt,#modalRoot .payment-contract-scope dd { font-size: 13px; line-height: 1.7; color: #405476; } #modalRoot .payment-contract-scope dt { color: #182742; font-weight: 600; } #modalRoot .payment-contract-live h3 { margin: 0 0 6px; font-size: 14px; } #modalRoot .payment-contract-live-values { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0 0 14px; padding: 10px 12px; border-radius: 5px; background: #f4f6f8; } #modalRoot .payment-contract-live-values > div { display: flex; align-items: baseline; min-width: 0; gap: 8px; padding-inline: 10px; border-right: 1px solid #dce2eb; } #modalRoot .payment-contract-live-values > div:first-child { padding-left: 0; } #modalRoot .payment-contract-live-values > div:last-child { border: 0; padding-right: 0; } #modalRoot .payment-contract-live-values dt { flex-shrink: 0; font-size: 12px; color: #304669; } #modalRoot .payment-contract-live-values dd { margin: 0; font-size: 12px; color: #496285; overflow-wrap: anywhere; } #modalRoot #paymentContractForm[data-contract-layout] { gap: 10px 20px; } #modalRoot #paymentContractForm[data-contract-layout] .warm-form-section { margin: 0; padding: 0 0 3px; border: 0; row-gap: 10px; } #modalRoot #paymentContractForm[data-contract-layout] legend { margin: 0 0 8px; padding: 0; font-size: 15px; line-height: 1.5; font-weight: 650; color: #14213c; } #modalRoot #paymentContractForm[data-contract-layout] input:not([type=checkbox]),#modalRoot #paymentContractForm[data-contract-layout] select { height: 35px; min-height: 35px; padding: 6px 10px; border-radius: 5px; border: 1px solid #d5ddeb; font-size: 13px; color: #253c65; box-shadow: inset 0 1px 2px #182b4d03; } #modalRoot #paymentContractForm[data-contract-layout] input:focus-visible,#modalRoot #paymentContractForm[data-contract-layout] select:focus-visible,#modalRoot #paymentContractForm[data-contract-layout] textarea:focus-visible { outline: 2px solid #b86e2a; outline-offset: 2px; box-shadow: none; } #modalRoot #paymentContractForm[data-contract-layout] [aria-invalid=true] { border-color: #b7492f; } #modalRoot #paymentContractForm[data-contract-layout] .checks { gap: 8px 22px; grid-auto-flow: column; grid-template-rows: repeat(2,auto); } #modalRoot #paymentContractForm[data-contract-layout] .checks label { padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 13px; line-height: 1.8; } #modalRoot #paymentContractForm[data-contract-layout] input[type=checkbox] { width: 17px; height: 17px; margin: 0; accent-color: #bd5816; } #modalRoot #paymentContractForm .payment-contract-fees { column-gap: 12px; } #modalRoot #paymentContractForm .payment-contract-fee { display: grid; grid-template-columns: minmax(0,1fr) 148px; gap: 7px 10px; min-width: 0; padding: 10px 12px; border: 1px solid #e2e7ef; border-radius: 5px; } #modalRoot #paymentContractForm .payment-contract-fee-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; } #modalRoot #paymentContractForm .payment-contract-fee-rate { display: grid; grid-template-columns: auto minmax(0,1fr) 24px; align-items: center; gap: 5px; font-size: 12px; color: #5b7092; } #modalRoot #paymentContractForm .payment-contract-fee-rate input { width: 100%; padding-inline: 8px; } #modalRoot #paymentContractForm .payment-contract-fee > small { grid-column: 1 / -1; color: #6b7e9b; font-size: 12px; padding-left: 25px; } #modalRoot #paymentContractForm .payment-contract-notes { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 10px; align-items: start; font-size: 13px; margin: 0; } #modalRoot #paymentContractForm .payment-contract-notes textarea { min-height: 80px; padding: 10px; border-radius: 5px; border: 1px solid #d5ddeb; font-size: 13px; color: #253c65; } #modalRoot #paymentContractForm .payment-contract-length { margin: -4px 0 0 62px; color: #71809a; font-size: 11px; } #modalRoot #paymentContractForm .payment-contract-boundary { grid-column: 1; width: calc(100% + 112px); padding: 8px 12px; border: 1px solid #f3dcc6; border-radius: 5px; background: #fff7ed; font-size: 11px; line-height: 1.6; color: #6d5b47; } #modalRoot #paymentContractForm .payment-contract-boundary p { margin: 3px 0 0; } #modalRoot #paymentContractForm .payment-contract-actions { grid-column: 2; align-self: end; position: static; padding: 0; border: 0; margin: 0 0 0 125px; gap: 10px; background: transparent; } #modalRoot #paymentContractForm .payment-contract-actions button { min-height: 39px; padding: 9px 15px; border-radius: 5px; font-size: 13px; font-weight: 500; } #modalRoot #paymentContractForm .payment-contract-actions .primary { background: linear-gradient(#d77a2c,#b94d09); color: #fff; box-shadow: inset 0 1px #ffffff40,0 2px 4px #9e531318; } #modalRoot #paymentContractForm .warm-write-feedback { grid-column: 1 / -1; } @media(min-width:1100px){ #modalRoot #paymentContractForm[data-contract-layout] .payment-contract-fields > label { grid-template-columns: 86px minmax(0,1fr); } #modalRoot #paymentContractForm[data-contract-layout] .payment-contract-fields > label:last-child { grid-template-columns: 140px minmax(0,1fr); font-size: 12px; } #modalRoot .payment-contract-overlay { padding-left: 206px; padding-right: 24px; align-items: flex-end; padding-bottom: max(24px,6vh); } #modalRoot .modal-card.warm-payment-contract { max-height: calc(100dvh - 100px); } } @media(max-width:899px){ #modalRoot #paymentContractForm .payment-contract-boundary { width: 100%; grid-column: 1 / -1; } #modalRoot #paymentContractForm .payment-contract-actions { grid-column: 1 / -1; margin: 0; } #modalRoot #paymentContractForm .payment-contract-fee { grid-template-columns: minmax(0,1fr); } #modalRoot #paymentContractForm .payment-contract-fee-rate { grid-template-columns: auto minmax(0,1fr) 24px; } } @media(max-width:680px){ #modalRoot .payment-contract-overlay { padding: 12px; } #modalRoot .modal-card.warm-payment-contract { padding: 20px 16px; max-height: calc(100dvh - 24px); } #modalRoot .payment-contract-live-values { grid-template-columns: minmax(0,1fr); gap: 6px; } #modalRoot .payment-contract-live-values > div { border: 0; padding: 0; } #modalRoot #paymentContractForm[data-contract-layout] .checks { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: minmax(0,1fr); gap: 10px; } #modalRoot #paymentContractForm .payment-contract-boundary,#modalRoot #paymentContractForm .payment-contract-actions { grid-column: 1 / -1; } #modalRoot #paymentContractForm .payment-contract-actions { position: sticky; bottom: -20px; padding-block: 12px; background: #fffefd; } #modalRoot #paymentContractForm[data-contract-layout] input:not([type=checkbox]),#modalRoot #paymentContractForm[data-contract-layout] select,#modalRoot #paymentContractForm[data-contract-layout] textarea { font-size: 16px; height: auto; min-height: 40px; } } /* R108: service billing designs 58–63; existing inputs and actions retain identity. */ #appView > aside nav button { font-size: 14px; font-weight: 600; color: #28344b; } #appView > aside nav button > span { font: inherit; } #appView > aside nav button.active { color: #b65313; background: #fcebd8; } #appView > aside nav .nav-group { color: #697a92; } #appView .svc-design table.svc-fixed-table { width: 100%; table-layout: fixed; } #appView .svc-design table.svc-fixed-table th,#appView .svc-design table.svc-fixed-table td { width: auto; min-width: 0; overflow-wrap: anywhere; } #appView .svc-design table.svc-fixed-table .pill { white-space: normal; } #appView .svc-design table.svc-fixed-table td { vertical-align: middle; } #appView .svc-design table.svc-fixed-table td small { line-height: 1.6; } #appView .svc-design .svc-filterbar > #refreshStoreServices { min-width: 80px; margin-bottom: 0; } #appView .svc-design .panel > .notice:not(.danger-note) { margin: 0 16px 20px; color: #48688f; border-color: #d9e7f8; background: #f5f9ff; } #appView .svc-design .svc-fixed-table th { font-size: 13px; } #appView .svc-design .svc-fixed-table td { font-size: 14px; } #appView .svc-design .svc-fixed-table .link { font-size: 13px; } #appView .svc-design .svc-filter-empty[hidden] { display: none; } #appView .svc-design .svc-order-notes { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin-top: 18px; } #appView .svc-design .svc-order-notes .panel { padding: 20px; } #appView .svc-design .svc-order-notes h3 { font-size: 17px; margin: 0 0 14px; } #appView .svc-design .svc-order-notes p { font-size: 13px; line-height: 1.9; color: #5b7295; } #appView .svc-design .svc-filter-error { padding: 0 16px; color: #a73525; font-size: 13px; } #appView .svc-design[data-svc-tab=delivery] .svc-filterbar { flex-wrap: wrap; gap: 12px; } #appView .svc-design .svc-filter-date { flex: 1 1 170px; } #appView .svc-design .svc-summary { display: grid; padding: 8px; } #appView .svc-design .svc-summary .stat { min-height: 0; padding: 12px; } #appView .svc-design .svc-summary .stat > small { margin: 0; } #appView .svc-design .svc-quota-info { color: #48688f; border-color: #d9e7f8; background: #f5f9ff; } #appView .svc-design .primary,#appView .svc-design .page-tabs .active { background: linear-gradient(115deg,#f0a151,#ae5e1a 70%,#804315); color: #fff; } #appView:has(.svc-design) main { background: #fffefd; } #appView:has(.svc-design) main > header h1 { color: #14203e; font-size: 30px; } #appView:has(.svc-design) main > header p { color: #536889; font-size: 16px; } #appView .svc-design { position: relative; color: #172540; } #appView .svc-design .svc-manage-versions { position: absolute; right: 0; top: -92px; min-height: 46px; padding-inline: 28px; border-radius: 10px; } #appView .svc-design .page-tabs { width: min(710px,100%); margin-bottom: 18px; gap: 0; padding: 3px; border: 1px solid #e3e7ee; border-radius: 7px; background: #fff; } #appView .svc-design .page-tabs button { flex: 1; min-height: 44px; border-radius: 6px; font-size: 14px; font-weight: 600; } #appView .svc-design .svc-summary { grid-template-columns: repeat(6,minmax(0,1fr)); margin: 14px 0 22px; border-color: #e2e7ee; border-radius: 7px; } #appView .svc-design .svc-summary .stat { padding: 18px 12px; gap: 4px; } #appView .svc-design .svc-summary .stat strong { font-size: 18px; color: #18243e; } #appView .svc-design .svc-summary .stat > span { font-size: 12px; } #appView .svc-design .svc-summary .stat > small { font-size: 11px; } #appView .svc-design .svc-summary .stat { display: grid; grid-template-columns: 30px minmax(0,1fr); column-gap: 10px; text-align: left; } #appView .svc-design .svc-summary .stat > .service-stat-icon { position: static; grid-column: 1; grid-row: 1 / 4; width: 30px; height: 30px; align-self: start; font-size: 14px; margin: 0; } #appView .svc-design .svc-summary .stat > span,#appView .svc-design .svc-summary .stat > strong,#appView .svc-design .svc-summary .stat > small { grid-column: 2; padding: 0; } #appView .svc-design .svc-summary-details { margin-top: 20px; color: #687589; font-size: 13px; } #appView .svc-design .svc-summary-details > summary { cursor: pointer; } #appView .svc-design .svc-summary-details .svc-summary { margin-bottom: 0; } #appView .svc-design[data-svc-tab=packages] > .svc-summary-details { position: relative; top: 0; order: 3; } #appView .svc-design .panel { padding: 0; border-radius: 7px; border-color: #e2e7ee; overflow: hidden; } #appView .svc-design .panel > .panel-head { padding: 20px 18px 16px; margin: 0; } #appView .svc-design h2 { font-size: 24px; color: #14203e; line-height: 1.4; } #appView .svc-design .panel-head p { color: #617391; font-size: 14px; line-height: 1.6; } #appView .svc-design table { font-size: 13px; } #appView .svc-design th { color: #53698c; font-size: 12px; padding: 15px 12px; background: #fbfcfe; border-bottom: 1px solid #e4e8ee; } #appView .svc-design td { padding: 16px 12px; color: #23334e; border-bottom: 1px solid #e5e9f0; line-height: 1.65; } #appView .svc-design td small { display: block; color: #70829f; font-size: 12px; white-space: normal; } #appView .svc-design .table-wrap { width: 100%; } #appView .svc-design .link { color: #27588f; font-weight: 550; font-size: 12px; white-space: nowrap; } #appView .svc-design .link.danger { color: #b34e28; } #appView .svc-design .pill { border-radius: 4px; font-size: 12px; } #appView .svc-design .svc-service-scope { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; padding: 16px 20px; border: 1px solid #e2e7ee; border-radius: 7px; } #appView .svc-design .svc-service-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 7px; background: #fbe6ca; color: #b15c13; font-size: 28px; flex-shrink: 0; } #appView .svc-design .svc-service-identity { flex: 1; min-width: 100px; } #appView .svc-design .svc-service-identity h3 { font-size: 17px; margin: 0 0 3px; } #appView .svc-design .svc-service-identity p { font-size: 12px; color: #70829e; margin: 0; } #appView .svc-design .svc-service-meta { display: grid; gap: 4px; min-width: 100px; padding-left: 22px; border-left: 1px solid #e1e7ef; font-size: 13px; } #appView .svc-design .svc-service-meta > small { color: #70829e; } #appView .svc-design .svc-section-head { margin: 0 0 16px; align-items: center; } #appView .svc-design .svc-section-head h2 { margin: 0 0 4px; } #appView .svc-design .svc-section-head p { margin: 0; } #appView .svc-design .svc-package-list td { height: 78px; } #appView .svc-design .svc-package-boundary { margin: 16px; padding: 14px 20px; border-color: #f3dcc3; background: #fffbf5; font-size: 13px; color: #5c7395; } #appView .svc-design .svc-package-boundary > strong { color: #a85713; } #appView .svc-design .svc-package-boundary ul { padding-left: 18px; margin: 8px 0 0; line-height: 1.9; } #appView .svc-design .svc-support-rules { border-top: 1px solid #e5e9ef; padding: 18px 24px; } #appView .svc-design .svc-support-rules > summary { cursor: pointer; font-size: 15px; font-weight: 600; } #appView .svc-design .svc-support-rules p { color: #62718b; font-size: 13px; } .svc-service-options { display: grid; gap: 10px; } #appView .svc-design .svc-filterbar { display: flex; align-items: end; gap: 16px; padding: 14px 16px 20px; border-bottom: 1px solid #e5e9f0; } #appView .svc-design .svc-filter { display: grid; gap: 7px; min-width: 0; flex: 1; font-size: 12px; color: #5c7192; } #appView .svc-design .svc-filter-search { flex: 1.7; } #appView .svc-design .svc-filter input,#appView .svc-design .svc-filter select { width: 100%; min-width: 0; min-height: 40px; padding: 9px 12px; border-radius: 5px; border: 1px solid #dde4ef; font-size: 13px; color: #263c61; } #appView .svc-design .svc-row-actions { min-width: 130px; } #appView .svc-design table.svc-fixed-table .svc-row-actions { min-width: 0; } #appView .svc-design .svc-row-actions button { margin-right: 10px; } #appView .svc-design .svc-table-footer { display: flex; justify-content: space-between; gap: 16px; padding: 16px; color: #667e9d; font-size: 12px; } #appView .svc-design .svc-commerce-note { margin-top: 18px; padding: 18px 20px; font-size: 13px; color: #5c7192; } #appView .svc-design > .notice { margin-bottom: 20px; font-size: 13px; } #appView .svc-design > .notice button { float: right; } #appView .svc-design .svc-subscriptions > .danger-note { margin: 16px; } #appView .svc-design .svc-package-list > .svc-package-boundary { margin: 16px; border-color: #f3dcc3; background: #fffbf5; color: #5c7395; } #appView .svc-design .service-grant-ledger table { min-width: 0; } #appView .svc-design .service-grant-ledger th,#appView .svc-design .service-grant-ledger td { min-width: 0; } #appView .svc-design[data-svc-tab=quota] > .svc-section-head { margin-top: 28px; } #appView .svc-design[data-svc-tab=quota] > .svc-section-head h2 { font-size: 24px; } #appView .svc-design[data-svc-tab=quota] > .svc-section-head p { color: #53698c; } @media(min-width:1100px){ #appView:has(.svc-design) { grid-template-columns: 208px minmax(0,1fr); } #appView:has(.svc-design) > main { padding-inline: 28px; } #appView:has(.svc-design) > aside nav button { font-size: 16px; min-height: 40px; } } .svc-detail-list { margin: 10px 0 0; } .svc-detail-list > div { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid #ece7dd; } .svc-detail-list dt { color: #6c7789; } .svc-detail-list dd { margin: 0; overflow-wrap: anywhere; } #modalRoot .svc-form-overlay { background: rgba(35,42,53,.35); backdrop-filter: none; } #modalRoot .modal-card.svc-package-dialog { width: min(720px,100%); padding: 24px; border-radius: 9px; } #modalRoot .modal-card.svc-package-dialog h2 { font-size: 20px; margin: 0 0 20px; color: #172540; } #modalRoot .svc-package-dialog #servicePackageForm { grid-template-columns: minmax(0,1fr) 220px; gap: 24px 16px; } #modalRoot .svc-package-main { display: grid; gap: 11px; min-width: 0; } #modalRoot .svc-package-main > label { display: grid; grid-template-columns: 105px minmax(0,1fr); align-items: start; column-gap: 14px; row-gap: 4px; margin: 0; font-size: 13px; color: #324969; } #modalRoot .svc-package-main > label > input,#modalRoot .svc-package-main > label > select { grid-column: 2; grid-row: 1; min-height: 35px; height: 35px; padding: 6px 10px; border: 1px solid #dce3ee; border-radius: 5px; } #modalRoot .svc-package-main > label > small { grid-column: 2; margin: 0; font-size: 11px; line-height: 1.5; color: #7487a4; } #modalRoot .svc-package-dialog .svc-package-rules { position: static; display: block; width: auto; height: auto; min-width: 0; align-self: stretch; padding: 16px; border: 1px solid #e2e7ef; border-radius: 6px; background: #fffefd; color: #576d8e; font-size: 13px; } #modalRoot .svc-package-rules h3 { font-size: 15px; color: #233855; margin: 0 0 16px; } #modalRoot .svc-package-rules p { line-height: 1.9; } #modalRoot .svc-package-dialog .svc-package-description { display: grid; grid-template-columns: 112px minmax(0,1fr); align-items: start; column-gap: 14px; font-size: 13px; margin: 0; } #modalRoot .svc-package-description textarea { min-height: 96px; border-radius: 5px; border: 1px solid #dce3ee; } #modalRoot .svc-package-description > small { grid-column: 2; justify-self: end; color: #7184a4; font-size: 11px; } #modalRoot .svc-package-dialog #servicePackageForm .svc-package-boundary { margin: 0; padding: 14px 16px; color: #5c7191; font-size: 12px; line-height: 1.8; background: #fff8ef; } #modalRoot .svc-package-dialog #servicePackageForm .svc-form-actions { position: static; padding: 0; margin: 0; border: 0; gap: 12px; } #modalRoot .svc-package-dialog .svc-form-actions button { min-height: 40px; border-radius: 5px; padding-inline: 24px; } #modalRoot .svc-package-main .svc-character-count { justify-self: end; } #modalRoot .svc-package-main > label:has([name=name]),#modalRoot .svc-package-description { position: relative; } #modalRoot .svc-package-main > label:has([name=name]) .svc-character-count { position: absolute; right: 9px; top: 8px; } #modalRoot .svc-package-main [name=name] { padding-right: 55px; } #modalRoot .svc-package-description .svc-character-count { position: absolute; right: 10px; bottom: 8px; } #modalRoot .svc-package-description textarea { padding-bottom: 25px; } #modalRoot .svc-package-dialog .warm-error-summary { grid-column: 1 / -1; } #modalRoot .modal-card.svc-quota-dialog:has(#serviceQuotaForm) { width: min(526px,100%); padding: 24px; border-radius: 9px; } #modalRoot .svc-quota-dialog h2 { font-size: 20px; margin: 0 0 16px; color: #172540; } #modalRoot .svc-quota-dialog #serviceQuotaForm { gap: 16px 24px; } #modalRoot .svc-quota-scope { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 16px; padding: 12px 16px; border-radius: 6px; background: #fff8ee; color: #253b5e; font-size: 13px; } #modalRoot .svc-quota-scope > strong,#modalRoot .svc-quota-scope > span { grid-column: 1; } #modalRoot .svc-quota-scope > small { grid-column: 2; grid-row: 1 / 3; align-self: center; } #modalRoot .svc-quota-scope small { color: #6c7e98; } #modalRoot .svc-quota-before { display: grid; gap: 8px; font-size: 13px; color: #566b8b; } #modalRoot .svc-quota-before strong { padding: 9px 12px; min-height: 40px; border: 1px solid #dbe2ee; border-radius: 5px; color: #203656; font-weight: 500; } #modalRoot .svc-quota-dialog #serviceQuotaForm > label { margin: 0; color: #425b7e; font-size: 13px; } #modalRoot .svc-quota-dialog input,#modalRoot .svc-quota-dialog textarea { border-color: #dbe2ee; border-radius: 5px; } #modalRoot .svc-quota-dialog #serviceQuotaForm > label.full:not(:has(textarea)) { display: grid; grid-template-columns: 84px minmax(0,1fr); align-items: start; gap: 8px 14px; } #modalRoot .svc-quota-dialog #serviceQuotaForm > label.full > small { grid-column: 2; color: #7588a4; font-size: 12px; } #modalRoot .svc-quota-dialog #serviceQuotaForm > label.full:has([name=used]) { grid-template-columns: 70px 120px minmax(0,1fr); } #modalRoot .svc-quota-dialog #serviceQuotaForm > label.full:has([name=used]) > small { grid-column: 3; grid-row: 1; font-size: 11px; } #modalRoot .svc-quota-after > small { display: none; } #modalRoot .svc-quota-dialog #serviceQuotaForm > label:has(textarea) { grid-template-columns: 1fr; } #modalRoot .svc-quota-dialog #serviceQuotaForm > label.full:has(textarea) > small { grid-column: 1; } #modalRoot .svc-quota-dialog .warm-error-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px; margin: 0; font-size: 12px; } #modalRoot .svc-quota-dialog .warm-error-summary ul { margin: 0; padding: 0; list-style: none; } #modalRoot .svc-quota-dialog textarea { min-height: 92px; } #modalRoot .svc-usage-unavailable { padding: 8px 12px; background: #f5f6f8; border-radius: 5px; color: #6b7c96; } #modalRoot .svc-quota-dialog .svc-quota-boundary { margin: 0; border: 0; background: #f5f7fa; color: #617997; font-size: 12px; } #modalRoot .svc-quota-dialog .svc-form-actions { margin: 0; padding: 0; } #modalRoot .svc-form-overlay .primary { background: linear-gradient(115deg,#f0a151,#ae5e1a 70%,#804315); color: #fff; } @media(min-width:1100px){#modalRoot .svc-form-overlay:has(.svc-package-dialog) { padding-left: 250px; padding-right: 24px; align-items: flex-end; padding-bottom: 88px; }} @media(max-width:1100px){#appView .svc-design .svc-service-scope { flex-wrap: wrap; }#appView .svc-design .svc-service-identity { flex-basis: 40%; }#appView .svc-design .svc-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }#appView .svc-design .svc-filterbar { flex-wrap: wrap; }#appView .svc-design .svc-filter { flex: 1 1 160px; }#appView .svc-design table { min-width: 850px; }} @media(max-width:680px){ #appView .svc-design .svc-order-notes { grid-template-columns: 1fr; } #appView .svc-design .svc-manage-versions { position: static; margin: 0 0 16px; } #appView .svc-design .page-tabs { display: flex; overflow-x: auto; width: 100%; } #appView .svc-design .page-tabs button { min-width: 100px; } #appView .svc-design .svc-service-scope { gap: 12px; padding: 16px; } #appView .svc-design .svc-service-meta { padding-left: 0; border: 0; } #appView .svc-design .svc-section-head { flex-wrap: wrap; } #appView .svc-design .svc-summary { grid-template-columns: repeat(2,minmax(0,1fr)); } #appView .svc-design .svc-filter input,#appView .svc-design .svc-filter select { font-size: 16px; min-height: 44px; } #appView .svc-design .svc-table-footer { flex-wrap: wrap; } #modalRoot .modal-card.svc-package-dialog,#modalRoot .modal-card.svc-quota-dialog { padding: 20px 16px; } #modalRoot .svc-package-dialog #servicePackageForm { grid-template-columns: 1fr; } #modalRoot .svc-package-main > label,#modalRoot .svc-package-dialog .svc-package-description { grid-template-columns: 1fr; } #modalRoot .svc-package-main > label > input,#modalRoot .svc-package-main > label > select,#modalRoot .svc-package-main > label > small,#modalRoot .svc-package-description > small { grid-column: 1; grid-row: auto; } #modalRoot .svc-package-main > label > input,#modalRoot .svc-package-main > label > select,#modalRoot .svc-quota-dialog input,#modalRoot .svc-quota-dialog textarea { font-size: 16px; min-height: 44px; height: auto; } #modalRoot .svc-package-dialog #servicePackageForm .svc-form-actions,#modalRoot .svc-quota-dialog .svc-form-actions { position: sticky; bottom: -20px; padding-block: 12px; background: #fffefd; z-index: 2; } #modalRoot .svc-detail-list > div { grid-template-columns: 85px minmax(0,1fr); } } /* R110: compare the actual controls and notices, not only panel outlines. */ @media(min-width:1100px){ #appView:has(.svc-design) { grid-template-columns: 181px minmax(0,1fr); } #appView:has(.svc-design) > main { padding-inline: 28px; } } #appView:has(.svc-design) > main > header .eyebrow { color: #ec4c00; font-size: 13px; letter-spacing: 0; } #appView:has(.svc-design) > main > header h1 { color: #090e36; font-size: 32px; font-weight: 750; } #appView.page-services:has(.svc-design) #pageSubtitle { color: #3c5e98; font-size: 17px; font-weight: 500; line-height: 1.5; } #appView .svc-design .page-tabs { border-color: #e1e6ef; border-radius: 8px; box-shadow: 0 6px 16px #28334d05; } #appView .svc-design .page-tabs button { color: #0d173c; font-size: 16px; font-weight: 650; border-radius: 7px; position: relative; } #appView .svc-design .page-tabs button:not(:last-child)::before { content: ''; position: absolute; top: 8px; bottom: 8px; right: 0; width: 1px; background: #e6ebf4; } #appView .svc-design .page-tabs button.active::before { display: none; } #appView .svc-design .primary,#appView .svc-design .page-tabs button.active { background: linear-gradient(115deg,#ffa544 0%,#bd711f 58%,#8c450b 100%); border: 1px solid #dd9b57; box-shadow: inset 0 1px 1px #ffffff70,0 10px 24px #8d632019; color: #fff; } #appView .svc-design .primary { border-radius: 10px; min-height: 46px; font-size: 16px; font-weight: 650; padding: 10px 24px; } #appView .svc-design button > i { margin-right: 10px; } #appView .svc-design button > i:last-child:not(:first-child) { margin-left: 10px; margin-right: 0; } #appView .svc-design .svc-switch-service { min-height: 46px; padding: 10px 24px; border-radius: 7px; border: 1px solid #ffc9a7; color: #c74c00; font-size: 16px; font-weight: 600; background: #fff; } #appView .svc-design .svc-service-scope { gap: 16px; margin-bottom: 20px; min-height: 92px; padding: 15px 23px; background: #fff; } #appView .svc-design .svc-service-identity { flex: 0 1 210px; } #appView .svc-design .svc-service-identity h3 { font-size: 18px; color: #0b123d; font-weight: 650; } #appView .svc-design .svc-service-identity p { font-size: 14px; color: #486aa1; } #appView .svc-design .svc-service-meta { padding-left: 26px; color: #111c45; font-size: 15px; flex: 0 0 138px; } #appView .svc-design .svc-service-scope > .link { font-size: 14px; } #appView .svc-design .svc-switch-service { margin-left: auto; } #appView .svc-design .svc-service-meta > small { font-size: 14px; color: #5f79a8; } #appView .svc-design .svc-service-meta .pill { background: transparent; padding: 0; color: inherit; font-size: 15px; } #appView .svc-design .svc-section-head h2 { color: #0c123c; font-size: 26px; margin: 0 0 4px; } #appView .svc-design .svc-section-head { align-items: flex-start; margin-bottom: 12px; } #appView .svc-design .svc-section-head p { color: #3e609b; font-size: 16px; } #appView .svc-design .svc-fixed-table th { font-size: 14px; color: #3f5d97; font-weight: 550; background: #fff; padding-block: 16px; border-right: 1px solid #edf0f7; } #appView .svc-design .svc-fixed-table td { font-size: 15px; color: #16264d; line-height: 1.6; } #appView .svc-design .svc-fixed-table td small { color: #637fb2; font-size: 13px; } #appView .svc-design .svc-fixed-table .link { font-size: 14px; color: #0064e8; font-weight: 600; } #appView .svc-design .svc-package-list td { height: 78px; padding-block: 12px; } #appView .svc-design .svc-package-list td:first-child strong { font-size: 16px; } #appView .svc-design .svc-package-list .pill { border-radius: 4px; font-size: 13px; } #appView .svc-design .svc-package-list td:nth-child(6) .pill { background: transparent; color: #304267; } #appView .svc-design .svc-package-list td:nth-child(6) .pill::before { content: ''; display: inline-block; width: 11px; height: 11px; background: #8594b4; border-radius: 50%; margin-right: 10px; } #appView .svc-design .svc-package-list td:nth-child(6) .pill.good::before { background: #08bd55; } #appView .svc-design .svc-notice-with-icon { position: relative; padding-left: 55px; } #appView .svc-design .svc-notice-with-icon > i:first-child { position: absolute; left: 16px; top: 15px; font-size: 24px; color: #bd5905; } #appView .svc-design .panel.svc-package-list > .notice.svc-package-boundary { margin: 16px; padding: 14px 20px 14px 55px; background: #fffaf5; border-color: #ffe2c6; color: #4d6ca1; line-height: 1.9; font-size: 14px; border-radius: 7px; } #appView .svc-design .svc-package-boundary > strong { color: #bc5100; font-size: 16px; } #appView .svc-design .svc-package-boundary ul { margin-top: 6px; } #appView .svc-design .svc-support-rules { padding: 12px 24px; } #appView .svc-design .svc-support-rules > summary { display: flex; align-items: center; gap: 16px; min-height: 62px; list-style: none; color: #101b41; } #appView .svc-design .svc-support-rules > summary::-webkit-details-marker { display: none; } #appView .svc-design .svc-support-rules > summary > i { margin-left: auto; color: #465575; } #appView .svc-design .svc-support-rules[open] > summary > i { transform: rotate(180deg); } #appView .svc-design .svc-support-rules strong,#appView .svc-design .svc-support-rules small { display: block; } #appView .svc-design .svc-support-rules small { margin-top: 3px; color: #5575a7; font-size: 14px; font-weight: 400; } #appView .svc-design .svc-support-icon { display: grid; place-items: center; width: 58px; height: 58px; flex: none; border-radius: 8px; background: #edf2f6; color: #58657c; font-size: 30px; } #appView .svc-design[data-svc-tab=orders] > .svc-filterbar { padding: 0; border: 0; margin: 24px 0 20px; gap: 28px; } #appView .svc-design[data-svc-tab=orders] > .svc-filterbar .svc-filter { font-size: 14px; color: #46659b; } #appView .svc-design[data-svc-tab=orders] .svc-filter-search > span { visibility: hidden; } #appView .svc-design .svc-filterbar > #refreshStoreServices { min-height: 45px; color: #101c4f; border: 1px solid #cdd9ee; border-radius: 6px; background: #fff; padding: 9px 22px; font-size: 15px; font-weight: 600; } #appView .svc-design > .svc-information-note,#appView .svc-design > .svc-quota-info { color: #315ea4; background: #f1f8ff; border-color: #d0e3ff; font-size: 14px; } #appView .svc-design > .svc-information-note > i:first-child,#appView .svc-design > .svc-quota-info > i:first-child { color: #2861bd; } #appView .svc-design .svc-order-notes p { font-size: 14px; } #appView .svc-design .svc-payment-channel-note { padding-block: 15px; min-height: 80px; color: #45679d; background: #fffaf3; border-color: #ffe0c2; } #appView .svc-design .svc-payment-channel-note > strong { color: #d14e00; font-size: 16px; } #appView .svc-design .svc-payment-channel-note > p { margin: 3px 0 0; font-size: 14px; } #appView .svc-design .svc-payment-channel-note { padding-right: 160px; } #appView .svc-design .svc-payment-channel-note > .link { position: absolute; right: 26px; top: 24px; float: none; color: #005ee4; font-size: 15px; padding: 0; } #appView .svc-design .svc-orders-panel [data-refund-service] { padding: 6px 12px; border: 1px solid #d9e2f0; border-radius: 5px; background: #fff; color: #253c6c; } #appView .svc-design .svc-orders-panel [data-cancel-service] { color: #0064e8; } #appView .svc-design .svc-orders-panel td { padding-block: 12px; } #appView .svc-design .svc-client-name { font-weight: 600; } #appView .svc-design .svc-store-name,#appView .svc-design .svc-store-name > strong { font-weight: 400; color: #5474a9; } #appView .svc-design .svc-client-name > br,#appView .svc-design .svc-store-name > br { display: none; } #appView .svc-design .svc-client-name > small,#appView .svc-design .svc-store-name > small { font-weight: 400; } #appView .svc-design .svc-pager { display: flex; align-items: center; gap: 10px; margin-left: auto; } #appView .svc-design .svc-pager button { min-height: 36px; min-width: 34px; padding: 6px; border: 1px solid #d9e2f0; color: #5274aa; background: #fff; border-radius: 5px; } #appView .svc-design .svc-pager button > i { margin: 0; } #appView .svc-design .svc-pager button:disabled { opacity: .45; } #appView .svc-design .svc-page-number { min-height: 36px; min-width: 34px; display: grid; place-items: center; color: #fff; border-radius: 5px; background: linear-gradient(115deg,#ffa544,#a9570e); } #appView .svc-design .svc-pager select { color: #4b689a; border: 1px solid #d9e2f0; border-radius: 5px; padding: 7px 10px; background: #fff; } #appView .svc-design .svc-table-footer { align-items: center; font-size: 14px; color: #607db0; } #appView .svc-design .svc-service-cell-icon { float: left; display: grid; place-items: center; width: 43px; height: 43px; margin: 3px 12px 8px 0; border-radius: 7px; background: #e5f1ff; color: #0670ec; font-size: 25px; } #appView .svc-design .svc-storage-icon { background: #fff0dc; color: #c85a00; } #appView .svc-design .svc-delivery-explain { display: block; margin-top: 8px; } #appView .svc-design .svc-row-actions .link { padding-inline: 0; } #appView .svc-design .svc-row-actions .svc-delivery-explain { margin-right: 0; } #appView .svc-design td[data-svc-provider-status=UNKNOWN] .pill { color: #5c72a0; background: #eef2f8; } #appView .svc-design[data-svc-tab=delivery] .svc-summary { margin-bottom: 26px; padding: 5px; position: relative; } #appView .svc-design[data-svc-tab=delivery] .svc-summary .stat { grid-template-rows: 22px 26px; padding: 12px; } #appView .svc-design[data-svc-tab=delivery] .svc-summary .service-stat-icon { grid-row: 1/3; } #appView .svc-design .svc-stats-legend { position: absolute; right: 9px; top: 8px; color: #5c7298; font-size: 12px; z-index: 3; } #appView .svc-design .svc-stats-legend summary { cursor: pointer; list-style: none; color: #5e78a2; font-size: 14px; } #appView .svc-design .svc-stats-legend summary::-webkit-details-marker { display: none; } #appView .svc-design .svc-stats-legend[open] { width: min(440px,calc(100vw - 46px)); background: #fff; padding: 14px; border: 1px solid #dde4ef; border-radius: 8px; box-shadow: 0 12px 26px #263b5b1a; } #appView .svc-design .svc-stats-legend > div { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; } #appView .svc-design .svc-stats-legend small { font-size: 12px; } #appView .svc-design .svc-delivery-boundary { margin-top: 26px; padding-block: 17px; color: #c64900; border-color: #ffddbb; background: #fffaf4; font-size: 15px; } #modalRoot .svc-form-overlay .modal-close { background: none; box-shadow: none; color: #667aa1; border-radius: 4px; } #modalRoot .svc-package-main > label,#modalRoot .svc-package-dialog .svc-package-description { color: #3c5786; } #modalRoot .svc-package-rules h3 > i { color: #bf6008; margin-right: 10px; } #modalRoot .svc-quota-scope { grid-template-columns: 44px minmax(0,1fr) minmax(0,.75fr); } #modalRoot .svc-quota-scope > strong,#modalRoot .svc-quota-scope > span { grid-column: 2; } #modalRoot .svc-quota-scope > small { grid-column: 3; } #modalRoot .svc-quota-scope > .svc-quota-service-icon { grid-column: 1; grid-row: 1/3; display: grid; place-items: center; background: #ffe9ce; color: #bd5b07; border-radius: 7px; font-size: 26px; } #modalRoot .svc-quota-dialog .svc-quota-arrow { position: relative; } #modalRoot .svc-quota-arrow::after { content: '→'; position: absolute; right: -20px; top: 34px; color: #2d4780; font-size: 20px; } #modalRoot .svc-quota-dialog .svc-field-unit { display: flex; align-items: stretch; min-width: 0; border: 1px solid #dbe2ee; border-radius: 5px; } #modalRoot .svc-field-unit > input { min-width: 0; border: 0; flex: 1; } #modalRoot .svc-field-unit > span { display: grid; place-items: center; padding: 0 9px; border-left: 1px solid #dbe2ee; color: #627ba9; font-size: 13px; } #modalRoot .svc-quota-dialog textarea[aria-invalid=true] { border-color: #f07855; box-shadow: 0 0 0 1px #f0785522; } #modalRoot .svc-quota-dialog .warm-field-error { color: #de3f36; } @media(max-width:680px){ #appView .svc-design .svc-pager { width: 100%; margin: 8px 0 0; } #appView .svc-design[data-svc-tab=orders] > .svc-filterbar { gap: 14px; } #appView .svc-design .primary { font-size: 15px; } #appView .svc-design .svc-service-meta { padding-left: 0; } #appView .svc-design .svc-service-identity { flex: 1 1 170px; } #appView .svc-design .svc-payment-channel-note { padding-right: 16px; } #appView .svc-design .svc-payment-channel-note > .link { position: static; display: block; margin-top: 8px; } #modalRoot .svc-quota-scope { grid-template-columns: 40px minmax(0,1fr); } #modalRoot .svc-quota-scope > small { grid-column: 2; grid-row: 3; } } /* R112: complete sidebar and order controls; never hide an original action. */ #appView > aside { background: #f8f6f2; border-right-color: #e6e2db; } #appView > aside .brand { gap: 10px; } #appView > aside .brand-mark { width: 42px; height: 42px; border-radius: 9px; background: #f7f1e6; } #appView > aside .brand strong { color: #151e36; font-size: 17px; line-height: 23px; } #appView > aside .brand small { color: #4f6b98; font-size: 13px; line-height: 19px; } #appView > aside nav .nav-group { margin: 22px 10px 6px; color: #526c95; font-size: 13px; font-weight: 500; line-height: 20px; letter-spacing: 0; } #appView > aside nav .nav-group:first-child { margin: 0 10px 6px; } #appView > aside nav button { min-height: 38px; padding: 6px 10px; gap: 12px; border-radius: 7px; color: #19263f; } #appView > aside nav button > i { width: 20px; font-size: 18px; color: #7b7065; } #appView > aside nav button::before { display: none; } #appView > aside nav button:hover { background: #f0ebe3; } #appView > aside nav button.active { color: #c65005; border-color: transparent; background: #faecd9; } #appView > aside nav button.active > i { color: #ca5707; } #appView > aside .account { border-top-color: #e0dcd5; padding-top: 12px; } #appView > aside .account > span,#appView > aside .account button { font-size: 13px; color: #28344e; } #appView > aside .account > span i { color: #79746f; font-size: 16px; } #appView > aside .account button { flex: none; white-space: nowrap; min-width: 30px; padding: 6px 0; } @media(min-width:981px){#appView > aside nav button,#appView:has(.svc-design) > aside nav button { min-height: 38px; font-size: 16px; font-weight: 600; }} #appView .svc-design[data-svc-tab=orders] > .svc-filterbar { margin-top: 20px; } #appView .svc-design[data-svc-tab=orders] .svc-filter { gap: 5px; line-height: 20px; } #appView .svc-design[data-svc-tab=orders] .svc-filter-search { flex: 2.15; align-self: center; } #appView .svc-design[data-svc-tab=orders] .svc-filter-search > span { display: none; } #appView .svc-design[data-svc-tab=orders] .svc-search-icon { position: relative; } #appView .svc-design[data-svc-tab=orders] .svc-search-icon > input { min-height: 44px; padding-right: 38px; } #appView .svc-design[data-svc-tab=orders] .svc-search-icon > i { position: absolute; right: 14px; top: 14px; font-size: 16px; color: #5671a5; pointer-events: none; } #appView .svc-design[data-svc-tab=orders] .svc-search-icon:has(input:not(:placeholder-shown)) > i { display: none; } #appView .svc-design .svc-payment-channel-note { min-height: 80px; padding-block: 13px; } #appView .svc-design .svc-payment-channel-note > strong { display: block; line-height: 24px; } #appView .svc-design .svc-payment-channel-note > p { font-size: 14px; line-height: 22px; margin-top: 4px; } #appView .svc-design .svc-information-note { padding-block: 13px; line-height: 24px; } #appView .svc-design .svc-orders-panel { margin-top: 0; } #appView .svc-design .svc-orders-panel th { height: 52px; padding: 12px 8px; font-size: 13px; line-height: 20px; } #appView .svc-design .svc-orders-panel td { padding: 12px 8px; font-size: 14px; line-height: 1.6; } #appView .svc-design .svc-orders-panel td > small { font-size: 12px; } #appView .svc-design .svc-orders-panel .svc-order-detail { display: block; width: 100%; text-align: left; padding: 0; color: #183b7b; white-space: normal; } #appView .svc-design .svc-orders-panel .svc-order-detail > strong { font-size: 13px; font-weight: 550; line-height: 1.55; } #appView .svc-design .svc-orders-panel .svc-client-name,#appView .svc-design .svc-orders-panel .svc-store-name { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #appView .svc-design .svc-orders-panel .svc-payment-reference { overflow-wrap: anywhere; font-size: 12px; } #appView .svc-design .svc-orders-panel td:last-child > .muted { color: #8a6746; font-size: 12px; line-height: 1.6; } #appView .svc-design .svc-order-notes { grid-template-columns: 1.25fr 1fr; gap: 18px; } #appView .svc-design .svc-order-notes .panel { padding: 20px 24px; } #appView .svc-design .svc-order-notes h3 { color: #0b1741; font-size: 19px; line-height: 1.4; margin-bottom: 12px; } #appView .svc-design .svc-order-notes ol { margin: 0; padding-left: 23px; color: #3e60a2; font-size: 14px; line-height: 1.65; } #appView .svc-design .svc-order-notes li { padding-left: 5px; margin: 0 0 10px; } #appView .svc-design .svc-order-notes li:last-child { margin-bottom: 0; } #appView .svc-design .svc-order-notes li::marker { color: #5574ac; font-size: 12px; } #appView .svc-design .svc-order-notes li strong { color: #244a8c; font-weight: 600; } #appView .svc-design .svc-order-notes .ghost { margin-top: 8px; min-height: 40px; height: 40px; border-radius: 6px; border-color: #cdd9ee; color: #496aa4; } #modalRoot .svc-order-detail-dialog .svc-detail-list { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 24px; } #modalRoot .svc-order-detail-dialog .svc-detail-list > div { grid-template-columns: 108px minmax(0,1fr); gap: 10px; align-items: start; padding: 12px 0; } #modalRoot .svc-order-detail-dialog .svc-detail-list > div:last-child { grid-column: 1/-1; } #modalRoot .svc-order-detail-dialog .svc-detail-list dt,#modalRoot .svc-order-detail-dialog .svc-detail-list dd { font-size: 14px; line-height: 1.6; } @media(max-width:760px){#modalRoot .svc-order-detail-dialog .svc-detail-list { grid-template-columns: minmax(0,1fr); }#modalRoot .svc-order-detail-dialog .svc-detail-list > div { grid-template-columns: 90px minmax(0,1fr); }} @media(max-width:680px){#appView .svc-design .svc-order-notes { grid-template-columns: minmax(0,1fr); }#appView .svc-design .svc-order-notes .panel { padding: 18px; }#appView > aside .brand strong { font-size: 16px; }} /* R114: source 94 product editor; no native field or disabled constraint replaced. */ #modalRoot .modal.svc-product-overlay { align-items: flex-end; padding: 24px 24px 130px; background: rgba(35,42,53,.04); backdrop-filter: none; } #modalRoot .modal-card.svc-product-dialog:has(#serviceProductForm) { width: min(680px,100%); padding: 24px 26px; margin-left: 180px; border-radius: 7px; background: #fffefd; scrollbar-gutter: auto; max-height: calc(100dvh - 154px); scroll-padding-block: 24px 100px; } #modalRoot .svc-product-dialog h2 { font-size: 22px; line-height: 30px; color: #111b48; margin: 0; padding-right: 24px; } #modalRoot .svc-product-dialog .svc-product-subtitle { margin: 5px 0 20px; color: #4365a1; font-size: 14px; line-height: 22px; } #modalRoot .svc-product-dialog .modal-close { border: 0; border-radius: 4px; background: none; box-shadow: none; font-size: 25px; font-weight: 400; color: #53668f; } #modalRoot .svc-product-dialog #serviceProductForm { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; } #modalRoot .svc-product-dialog .svc-product-identity,#modalRoot .svc-product-dialog .svc-product-commercial { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px 20px; } #modalRoot .svc-product-dialog #serviceProductForm label { display: grid; gap: 6px; margin: 0; color: #4365a1; font-size: 14px; font-weight: 600; line-height: 20px; } #modalRoot .svc-product-dialog #serviceProductForm input,#modalRoot .svc-product-dialog #serviceProductForm select { width: 100%; height: 40px; min-height: 40px; padding: 9px 12px; border: 1px solid #d7dfed; border-radius: 5px; color: #233c78; font-size: 16px; font-weight: 400; line-height: 20px; } #modalRoot .svc-product-dialog #serviceProductForm textarea { width: 100%; height: 84px; min-height: 84px; padding: 10px 12px; border: 1px solid #d7dfed; border-radius: 5px; color: #233c78; font-size: 14px; font-weight: 400; line-height: 22px; } #modalRoot .svc-product-dialog #serviceProductForm input:disabled,#modalRoot .svc-product-dialog #serviceProductForm select:disabled { background: #eef1f5; color: #566da1; opacity: 1; appearance: none; } #modalRoot .svc-product-dialog #serviceProductForm .svc-product-readonly { display: flex; align-items: start; gap: 12px; margin: 0; padding: 12px 16px; border: 1px solid #f2d6b7; border-radius: 5px; background: #fff7ef; color: #c85809; font-size: 14px; line-height: 22px; } #modalRoot .svc-product-dialog .svc-product-readonly > i { flex: none; font-size: 24px; margin-top: 1px; } #modalRoot .svc-product-dialog .svc-product-guidance { color: #64799e; font-size: 12px; line-height: 20px; } #modalRoot .svc-product-dialog .svc-product-guidance > summary { display: flex; gap: 8px; align-items: center; cursor: pointer; list-style: none; } #modalRoot .svc-product-dialog .svc-product-guidance > summary::-webkit-details-marker { display: none; } #modalRoot .svc-product-dialog .svc-product-guidance small { display: block; margin-top: 5px; } #modalRoot .svc-product-dialog .svc-product-sale-control { position: relative; display: block; min-width: 0; } #modalRoot .svc-product-dialog #serviceProductForm .svc-product-sale-control select { padding-left: 31px; } #modalRoot .svc-product-dialog .svc-product-sale-control > i { position: absolute; left: 13px; top: 14px; font-size: 10px; color: #9b6f32; pointer-events: none; } #modalRoot .svc-product-dialog .svc-product-sale-control[data-sale-status=ACTIVE] > i { color: #18a056; } #modalRoot .svc-product-dialog .svc-product-sale-control[data-sale-status=SUSPENDED] > i { color: #8795ab; } #modalRoot .svc-product-dialog #serviceProductForm .modal-actions.svc-product-actions { position: sticky; bottom: -24px; z-index: 2; padding: 10px 0 0; margin: 7px 0 0; border-top: 0; background: #fffefd; gap: 16px; } #modalRoot .svc-product-dialog .svc-product-actions > button { height: 44px; min-height: 44px; min-width: 124px; padding: 10px 20px; border-radius: 5px; font-size: 14px; line-height: 22px; } #modalRoot .svc-product-dialog .svc-product-actions > button[data-close] { background: #fff; border: 1px solid #d7dfed; color: #142657; box-shadow: none; } #modalRoot .svc-product-dialog .svc-product-actions > button[type=submit]:not(:disabled) { color: #fff; border: 1px solid #ed992f; background: linear-gradient(115deg,#ff9b36,#f07508 64%,#d96b08); box-shadow: inset 0 1px 1px #ffffff80,0 3px 8px #c875171c; } #modalRoot .svc-product-dialog .svc-product-actions > button[type=submit]:disabled { background: #e4e9f2; color: #72819b; border-color: #d9e1ee; box-shadow: none; } /* Native radio presentation is a view over the original grant selects. */ #modalRoot .svc-grant-dialog #serviceGrantForm .svc-grant-choice-row { min-height: 30px; align-items: center; } #modalRoot .svc-grant-dialog #serviceGrantForm .svc-grant-choice-caption { margin: 0; display: block; font-size: 14px; font-weight: 500; line-height: 22px; color: #35578c; } #modalRoot .svc-grant-dialog .svc-grant-options { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; min-height: 30px; } #modalRoot .svc-grant-dialog #serviceGrantForm .svc-grant-options > label { display: flex; gap: 10px; align-items: center; margin: 0; color: #35578c; font-size: 14px; font-weight: 500; line-height: 22px; cursor: pointer; } #modalRoot .svc-grant-dialog #serviceGrantForm .svc-grant-options input[type=radio] { appearance: auto; accent-color: #ed6d0c; width: 18px; height: 18px; min-height: 18px; padding: 0; margin: 0; box-shadow: none; flex: none; } #modalRoot .svc-grant-dialog #serviceGrantForm select[hidden],#modalRoot .svc-grant-dialog .svc-grant-options[hidden] { display: none; } #modalRoot .svc-grant-dialog #serviceGrantForm .svc-grant-native-fallback { display: block; } #modalRoot .svc-grant-dialog #serviceGrantForm .svc-grant-native-fallback > label { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 10px; } @media(max-width:760px){ #modalRoot .modal.svc-product-overlay { align-items: center; padding: 16px; } #modalRoot .modal-card.svc-product-dialog:has(#serviceProductForm) { margin-left: 0; padding: 20px; max-height: calc(100dvh - 32px); } #modalRoot .svc-product-dialog .svc-product-identity,#modalRoot .svc-product-dialog .svc-product-commercial { grid-template-columns: minmax(0,1fr); gap: 14px; } #modalRoot .svc-product-dialog #serviceProductForm input,#modalRoot .svc-product-dialog #serviceProductForm select { min-height: 44px; height: 44px; } #modalRoot .svc-product-dialog #serviceProductForm .modal-actions.svc-product-actions { bottom: -20px; } #modalRoot .svc-grant-dialog .svc-grant-options { gap: 8px 16px; } #modalRoot .svc-grant-dialog #serviceGrantForm .svc-grant-options > label { min-height: 44px; font-size: 13px; } } /* R113: selected service delivery form 97; original guard owns every write. */ #modalRoot .modal.svc-grant-overlay { align-items: flex-end; padding: 24px 24px 48px; } #modalRoot .modal-card.svc-grant-dialog:has(#serviceGrantForm) { width: min(876px,100%); padding: 22px 26px; margin-left: 27px; border-radius: 7px; background: #fffefd; scrollbar-gutter: auto; max-height: calc(100dvh - 72px); scroll-padding-block: 22px 110px; } #modalRoot .svc-grant-dialog h2 { font-size: 19px; line-height: 26px; color: #111b48; margin: 0 -26px 19px; padding: 0 26px 8px; border-bottom: 1px solid #dfe5ef; } #modalRoot .svc-grant-dialog .modal-close { border: 0; border-radius: 4px; background: none; box-shadow: none; font-size: 23px; font-weight: 400; color: #53668f; } #modalRoot .svc-grant-dialog #serviceGrantForm { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px 16px; } #modalRoot .svc-grant-dialog .svc-grant-fields { display: grid; gap: 11.5px; margin-bottom: 7px; } #modalRoot .svc-grant-dialog #serviceGrantForm .svc-grant-row { display: grid; grid-template-columns: 84px minmax(0,1fr); align-items: center; gap: 10px; margin: 0; color: #35578c; font-size: 14px; font-weight: 500; line-height: 22px; } #modalRoot .svc-grant-dialog #serviceGrantForm select,#modalRoot .svc-grant-dialog #serviceGrantForm input { display: block; width: 100%; height: 36px; min-height: 36px; padding: 7px 12px; border: 1px solid #dce3ee; border-radius: 5px; font-size: 14px; line-height: 20px; font-weight: 400; color: #315180; } #modalRoot .svc-grant-dialog #serviceGrantForm textarea { display: block; width: 100%; height: 64px; min-height: 64px; padding: 8px 12px 24px; border: 1px solid #dce3ee; border-radius: 5px; font-size: 14px; font-weight: 400; line-height: 20px; } #modalRoot .svc-grant-dialog .svc-grant-inline { position: relative; min-width: 0; } #modalRoot .svc-grant-dialog #serviceGrantForm .svc-grant-inline input { padding-right: 42px; } #modalRoot .svc-grant-dialog .svc-grant-unit { position: absolute; right: 12px; top: 8px; font-size: 13px; line-height: 20px; color: #315180; pointer-events: none; } #modalRoot .svc-grant-dialog .svc-grant-reason-input { display: grid; min-width: 0; } #modalRoot .svc-grant-dialog #serviceGrantForm .svc-grant-row.svc-grant-reason { align-items: start; } #modalRoot .svc-grant-dialog #serviceGrantForm .svc-grant-reason textarea { grid-area: 1/1; } #modalRoot .svc-grant-dialog .svc-grant-reason .svc-character-count { grid-area: 1/1; justify-self: end; align-self: end; margin: 0 12px 6px 0; font-size: 12px; line-height: 20px; color: #8394b5; pointer-events: none; } #modalRoot .svc-grant-dialog .svc-grant-reason .warm-field-error { grid-column: 1; grid-row: 2; line-height: 20px; } #modalRoot .svc-grant-dialog .svc-grant-preview { border-top: 1px solid #dfe5ef; padding-top: 12px; } #modalRoot .svc-grant-dialog .svc-grant-preview h3 { margin: 0 0 8px; font-size: 16px; line-height: 24px; color: #111b48; } #modalRoot .svc-grant-dialog .svc-grant-preview-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } #modalRoot .svc-grant-dialog .svc-grant-preview-heading:has(details[open]) { display: block; } #modalRoot .svc-grant-dialog #serviceGrantScope { margin: 0; padding: 12px 14px; border: 1px solid #e2e7f0; border-radius: 5px; background: #f6f8fb; color: #395d97; font-size: 13px; line-height: 20px; } #modalRoot .svc-grant-dialog .svc-grant-impact { padding: 10px 14px; border: 1px solid #e2e7f0; border-radius: 5px; background: #f6f8fb; color: #395d97; } #modalRoot .svc-grant-dialog .svc-grant-impact-facts { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr) minmax(0,1fr); gap: 8px 20px; margin: 0 0 4px; } #modalRoot .svc-grant-dialog .svc-grant-impact-facts > div { display: flex; gap: 12px; min-width: 0; font-size: 13px; line-height: 22px; } #modalRoot .svc-grant-dialog .svc-grant-impact-facts dt { flex: none; color: #395d97; font-weight: 600; } #modalRoot .svc-grant-dialog .svc-grant-impact-facts dd { min-width: 0; margin: 0; overflow-wrap: anywhere; } #modalRoot .svc-grant-dialog .svc-grant-impact #serviceGrantScope { border: 0; border-radius: 0; background: transparent; padding: 0; font-size: 13px; line-height: 20px; } #modalRoot .svc-grant-dialog .svc-grant-preview > p { margin: 4px 0 0; font-size: 12px; line-height: 18px; color: #64799e; } #modalRoot .svc-grant-dialog .svc-grant-guidance { font-size: 12px; line-height: 20px; color: #64799e; } #modalRoot .svc-grant-dialog .svc-grant-guidance > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; } #modalRoot .svc-grant-dialog .svc-grant-guidance > summary::-webkit-details-marker { display: none; } #modalRoot .svc-grant-dialog .svc-grant-guidance > summary > i { font-size: 10px; } #modalRoot .svc-grant-dialog .svc-grant-guidance small { display: block; margin-top: 6px; } #modalRoot .svc-grant-dialog #serviceGrantForm .svc-grant-rules { grid-column: 1; position: relative; margin: 0; padding: 0 0 0 29px; border: 0; border-radius: 0; background: none; font-size: 12px; line-height: 20px; color: #48679e; } #modalRoot .svc-grant-dialog .svc-grant-rules > i { position: absolute; top: 2px; left: 0; color: #e46e06; font-size: 20px; } #modalRoot .svc-grant-dialog #serviceGrantForm .modal-actions.svc-grant-actions { grid-column: 2; align-self: end; position: sticky; bottom: -22px; z-index: 2; margin: 0; padding: 6px 0 0; border-top: 0; background: #fffefd; gap: 12px; } #modalRoot .svc-grant-dialog .svc-grant-actions > button { height: 40px; min-height: 40px; padding: 8px 18px; border-radius: 5px; font-size: 14px; line-height: 22px; } #modalRoot .svc-grant-dialog .svc-grant-actions > button[data-close] { min-width: 98px; color: #142657; background: #fff; border: 1px solid #d7dfed; box-shadow: none; } #modalRoot .svc-grant-dialog .svc-grant-actions > button[type=submit] { min-width: 148px; } #modalRoot .svc-grant-dialog #serviceGrantForm > .warm-write-feedback { grid-column: 1/-1; } @media(max-width:760px){ #modalRoot .modal.svc-grant-overlay { padding: 16px; align-items: center; } #modalRoot .modal-card.svc-grant-dialog:has(#serviceGrantForm) { padding: 20px; margin-left: 0; max-height: calc(100dvh - 32px); } #modalRoot .svc-grant-dialog #serviceGrantForm { grid-template-columns: minmax(0,1fr); } #modalRoot .svc-grant-dialog #serviceGrantForm .svc-grant-row { grid-template-columns: 76px minmax(0,1fr); gap: 8px; font-size: 13px; line-height: 22px; } #modalRoot .svc-grant-dialog .svc-grant-preview-heading { display: block; } #modalRoot .svc-grant-dialog h2 { margin-inline: -20px; padding-inline: 20px; } #modalRoot .svc-grant-dialog .svc-grant-impact-facts { grid-template-columns: minmax(0,1fr); gap: 4px; } #modalRoot .svc-grant-dialog .svc-grant-impact-facts > div { justify-content: space-between; } #modalRoot .svc-grant-dialog #serviceGrantForm select,#modalRoot .svc-grant-dialog #serviceGrantForm input { height: 44px; min-height: 44px; font-size: 13px; } #modalRoot .svc-grant-dialog .svc-grant-unit { top: 12px; } #modalRoot .svc-grant-dialog #serviceGrantForm .modal-actions.svc-grant-actions { grid-column: 1; bottom: -20px; } #modalRoot .svc-grant-dialog .svc-grant-actions > button { height: 44px; min-height: 44px; } } #modalRoot .modal.svc-activation-overlay { align-items: flex-end; padding: 24px 24px 110px; } #modalRoot .modal-card.svc-activation-dialog:has(#serviceActivateForm) { width: min(640px,100%); padding: 28px; background: #fffefd; border-radius: 7px; scrollbar-gutter: auto; max-height: calc(100dvh - 134px); scroll-padding-block: 28px 90px; } #modalRoot .svc-activation-dialog:has(#serviceActivateForm) h2 { margin: 0 0 18px; font-size: 22px; line-height: 30px; color: #0d1845; } #modalRoot .svc-activation-dialog .modal-close { border: 0; background: none; box-shadow: none; border-radius: 4px; color: #53668f; font-size: 26px; font-weight: 400; } #modalRoot .svc-activation-dialog #serviceActivateForm { display: grid; grid-template-columns: minmax(0,1fr); gap: 22px; } #modalRoot .svc-activation-dialog .svc-activation-service { display: grid; grid-template-columns: 60px minmax(0,1fr); gap: 20px; align-items: start; margin-bottom: -8px; } #modalRoot .svc-activation-dialog .svc-activation-service-icon { display: grid; place-items: center; width: 60px; height: 60px; background: #fff0e0; color: #d66c08; border-radius: 7px; font-size: 31px; } #modalRoot .svc-activation-dialog .svc-activation-service h3 { margin: 2px 0 3px; font-size: 19px; line-height: 26px; color: #101946; } #modalRoot .svc-activation-dialog .svc-activation-service p { margin: 0; color: #4365a1; font-size: 14px; line-height: 22px; } #modalRoot .svc-activation-dialog .svc-activation-description-row { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; } #modalRoot .svc-activation-dialog .svc-activation-description-row:has(details[open]) { display: block; } #modalRoot .svc-activation-dialog .svc-activation-context { flex: none; font-size: 12px; line-height: 18px; color: #647ca9; } #modalRoot .svc-activation-dialog .svc-activation-context[open] { margin-top: 8px; } #modalRoot .svc-activation-dialog .svc-activation-context > summary { display: flex; align-items: start; gap: 8px; cursor: pointer; list-style: none; } #modalRoot .svc-activation-dialog .svc-activation-context > summary::-webkit-details-marker { display: none; } #modalRoot .svc-activation-dialog .svc-activation-context > summary > i { margin-top: 4px; font-size: 10px; } #modalRoot .svc-activation-dialog #serviceActivateForm .warm-service-order-summary { margin-top: 10px; padding: 12px; font-size: 13px; line-height: 20px; background: #faf9f6; border-radius: 5px; } #modalRoot .svc-activation-dialog #serviceActivateForm .warm-service-order-summary > div { grid-template-columns: 84px minmax(0,1fr); gap: 10px; } #modalRoot .svc-activation-dialog #serviceActivateForm > .svc-activation-warning { position: relative; margin: 0 0 10px; padding: 11px 14px 11px 52px; background: #fff7ef; border: 1px solid #f0cfae; border-radius: 5px; color: #cf4503; font-size: 14px; font-weight: 600; line-height: 22px; } #modalRoot .svc-activation-dialog .svc-activation-warning > i { position: absolute; left: 14px; top: 13px; color: #ce6106; font-size: 25px; } #modalRoot .svc-activation-dialog .svc-activation-warning ul { margin: 0; padding-left: 16px; } #modalRoot .svc-activation-dialog .svc-activation-warning li { margin: 0; padding: 0; } #modalRoot .svc-activation-dialog #serviceActivateForm > label { display: grid; gap: 10px; margin: 0; color: #263b6a; font-size: 14px; font-weight: 600; line-height: 22px; } #modalRoot .svc-activation-dialog #serviceActivateForm input { min-height: 44px; height: 44px; padding: 10px 12px; color: #284276; border: 1px solid #d7dfed; border-radius: 5px; font-size: 14px; line-height: 22px; } #modalRoot .svc-activation-dialog #serviceActivateForm textarea { min-height: 124px; height: 124px; padding: 10px 12px; color: #284276; border: 1px solid #d7dfed; border-radius: 5px; font-size: 14px; line-height: 22px; scroll-margin-block: 28px 100px; } #modalRoot .svc-activation-dialog .svc-activation-message-label { display: flex; align-items: center; gap: 7px; } #modalRoot .svc-activation-dialog .svc-activation-message-label > i { color: #ce3426; font-size: 8px; } #modalRoot .svc-activation-dialog #serviceActivateForm .modal-actions.svc-activation-actions { position: sticky; bottom: -28px; z-index: 2; margin: 0; padding: 8px 0 4px; border-top: 0; background: #fffefd; gap: 20px; } #modalRoot .svc-activation-dialog .svc-activation-actions > button { min-height: 44px; height: 44px; padding: 10px 20px; font-size: 14px; font-weight: 600; line-height: 22px; border-radius: 5px; } #modalRoot .svc-activation-dialog .svc-activation-actions > button[data-close] { min-width: 100px; color: #142657; background: #fff; border: 1px solid #d7dfed; box-shadow: none; } #modalRoot .svc-activation-dialog .svc-activation-actions > button[type=submit] { min-width: 160px; } #modalRoot .svc-activation-dialog .svc-activation-actions > button:disabled { background: #c1c5cf; color: #fff; border-color: #c1c5cf; } /* Bring refund labels and cancellation closer to the selected source, no state override. */ #modalRoot .svc-refund-dialog:has(#serviceRefundForm) h2 { color: #0d1845; } #modalRoot .svc-refund-dialog .svc-refund-actions > button[data-close] { color: #142657; font-weight: 600; border-color: #d7dfed; background: #fff; } #modalRoot .svc-refund-dialog #serviceRefundForm .warm-service-order-summary dt { color: #263b6a; font-weight: 500; } #modalRoot .svc-refund-dialog #serviceRefundForm .svc-refund-reason-label { color: #263b6a; font-weight: 500; } @media(max-width:760px){ #modalRoot .modal.svc-activation-overlay { align-items: center; padding: 16px; } #modalRoot .modal-card.svc-activation-dialog:has(#serviceActivateForm) { padding: 20px; max-height: calc(100dvh - 32px); } #modalRoot .svc-activation-dialog #serviceActivateForm { gap: 18px; } #modalRoot .svc-activation-dialog .svc-activation-service { grid-template-columns: 48px minmax(0,1fr); gap: 12px; } #modalRoot .svc-activation-dialog .svc-activation-service-icon { width: 48px; height: 48px; font-size: 27px; } #modalRoot .svc-activation-dialog .svc-activation-description-row { display: block; } #modalRoot .svc-activation-dialog .svc-activation-context { margin-top: 6px; } #modalRoot .svc-activation-dialog #serviceActivateForm .modal-actions.svc-activation-actions { bottom: -20px; gap: 12px; flex-wrap: wrap; } #modalRoot .svc-activation-dialog .svc-activation-actions > button { padding-inline: 12px; } #modalRoot .svc-activation-dialog #serviceActivateForm .warm-service-order-summary > div { grid-template-columns: minmax(0,1fr); gap: 3px; } } /* R112: selected service refund form 96. Original controls and guards own state. */ #modalRoot .modal.svc-refund-overlay { align-items: flex-end; padding: 24px 24px 46px; } #modalRoot .modal-card.svc-refund-dialog:has(#serviceRefundForm) { width: min(550px,100%); margin-left: 54px; padding: 24px; border-radius: 7px; background: #fffefd; max-height: calc(100dvh - 70px); scroll-padding-block: 24px 90px; scrollbar-gutter: auto; } #modalRoot .svc-refund-dialog:has(#serviceRefundForm) h2 { font-size: 20px; line-height: 28px; margin: 0; padding-right: 24px; color: #111e39; } #modalRoot .svc-refund-dialog .modal-close { border: 0; background: none; box-shadow: none; border-radius: 4px; color: #697a9d; font-size: 24px; font-weight: 400; } #modalRoot .svc-refund-dialog .svc-refund-context { margin: 0; color: #647ca9; font-size: 12px; line-height: 18px; } #modalRoot .svc-refund-dialog .svc-refund-context > summary { display: flex; align-items: start; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; } #modalRoot .svc-refund-dialog .svc-refund-context > summary::-webkit-details-marker { display: none; } #modalRoot .svc-refund-dialog .svc-refund-context > summary > i { flex: none; margin-top: 3px; font-size: 10px; } #modalRoot .svc-refund-dialog .svc-refund-context[open] > summary { margin-bottom: 8px; } #modalRoot .svc-refund-dialog #serviceRefundForm { display: grid; gap: 10px; } #modalRoot .svc-refund-dialog .svc-refund-scope { margin: 0; font-size: 12px; line-height: 18px; color: #4a6699; } #modalRoot .svc-refund-dialog .svc-refund-scope > div { display: flex; gap: 12px; align-items: baseline; } #modalRoot .svc-refund-dialog .svc-refund-scope dt { flex: none; } #modalRoot .svc-refund-dialog .svc-refund-scope dd { margin: 0; overflow-wrap: anywhere; } #modalRoot .svc-refund-dialog #serviceRefundForm > .svc-refund-warning { position: relative; padding: 10px 12px 10px 45px; margin: 0 0 4px; background: #fff5e7; border: 1px solid #efd0af; border-radius: 5px; color: #c4520a; font-size: 12px; line-height: 18px; } #modalRoot .svc-refund-dialog .svc-refund-warning > i { position: absolute; left: 11px; top: 11px; color: #d36b09; font-size: 22px; } #modalRoot .svc-refund-dialog #serviceRefundForm .warm-service-order-summary { margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; display: grid; gap: 9px; font-size: 13px; line-height: 20px; } #modalRoot .svc-refund-dialog #serviceRefundForm .warm-service-order-summary > div { display: grid; grid-template-columns: 108px minmax(0,1fr); gap: 10px; padding: 0; border: 0; align-items: center; } #modalRoot .svc-refund-dialog #serviceRefundForm .warm-service-order-summary dt { font-size: 13px; color: #39598e; font-weight: 400; } #modalRoot .svc-refund-dialog #serviceRefundForm .warm-service-order-summary dd { margin: 0; min-height: 29px; padding: 4px 10px; border: 1px solid #dce3ed; background: #f8f9fb; border-radius: 4px; font-size: 13px; font-weight: 400; line-height: 20px; color: #56729e; overflow-wrap: anywhere; } #modalRoot .svc-refund-dialog #serviceRefundForm > .svc-refund-reason { display: grid; position: relative; grid-template-columns: 108px minmax(0,1fr); gap: 0 10px; margin: 0; font-size: 13px; line-height: 20px; } #modalRoot .svc-refund-dialog .svc-refund-reason-label { padding-top: 7px; color: #39598e; } #modalRoot .svc-refund-dialog .svc-refund-reason-label small { display: block; font-size: 11px; font-weight: 400; color: #6c7fa1; } #modalRoot .svc-refund-dialog .svc-refund-reason-input { display: grid; min-width: 0; } #modalRoot .svc-refund-dialog #serviceRefundForm textarea { grid-area: 1/1; display: block; width: 100%; height: 72px; min-height: 72px; padding: 9px 10px 24px; font-size: 13px; line-height: 20px; resize: vertical; scroll-margin-block: 24px 90px; } #modalRoot .svc-refund-dialog .svc-refund-reason .svc-character-count { grid-area: 1/1; align-self: end; justify-self: end; margin: 0 11px 8px 0; pointer-events: none; font-size: 11px; color: #6c7fa1; } #modalRoot .svc-refund-dialog .svc-refund-reason .warm-field-error { grid-column: 1; grid-row: 2; } #modalRoot .svc-refund-dialog #serviceRefundForm .modal-actions.svc-refund-actions { position: sticky; bottom: -24px; z-index: 2; margin: 0; padding: 8px 0 0; border-top: 0; gap: 12px; background: #fffefd; } #modalRoot .svc-refund-dialog .svc-refund-actions > button { height: 38px; min-height: 38px; min-width: 98px; padding: 8px 16px; border-radius: 5px; font-size: 13px; line-height: 20px; } #modalRoot .svc-refund-dialog .svc-refund-actions > button[type=submit] { min-width: 125px; color: #fff !important; border: 1px solid #975f20 !important; background: #986326 !important; } #modalRoot .svc-refund-dialog .svc-refund-actions > button[type=submit]:disabled { color: #72819b !important; border-color: #d9e1ee !important; background: #e4e9f2 !important; } @media(max-width:760px){ #modalRoot .modal.svc-refund-overlay { padding: 16px; align-items: center; } #modalRoot .modal-card.svc-refund-dialog:has(#serviceRefundForm) { margin-left: 0; padding: 20px; max-height: calc(100dvh - 32px); } #modalRoot .svc-refund-dialog #serviceRefundForm .warm-service-order-summary > div,#modalRoot .svc-refund-dialog #serviceRefundForm > .svc-refund-reason { grid-template-columns: 90px minmax(0,1fr); gap: 6px 10px; } #modalRoot .svc-refund-dialog #serviceRefundForm .modal-actions.svc-refund-actions { bottom: -20px; } #modalRoot .svc-refund-dialog .svc-refund-actions > button { min-height: 44px; height: 44px; } } /* R111: native-size form internals from selected designs 62/63. */ #appView .svc-design .svc-row-facts { margin-top: 5px; font-size: 12px; font-weight: 400; color: #5c78a8; } #appView .svc-design .svc-row-facts > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; line-height: 20px; } #appView .svc-design .svc-row-facts > summary::-webkit-details-marker { display: none; } #appView .svc-design .svc-row-facts > summary > i { font-size: 10px; } #appView .svc-design .svc-row-facts[open] > summary > i { transform: rotate(180deg); } #appView .svc-design .svc-row-facts > div { padding-top: 5px; line-height: 1.6; } #appView .svc-design .svc-subscriptions td:first-child,#appView .svc-design .svc-subscriptions td:nth-child(2) { overflow-wrap: break-word; } #appView .svc-design .svc-delivery-service { overflow: hidden; } #appView .svc-design .svc-delivery-service .svc-service-cell-icon { margin-right: 10px; } #appView .svc-design .svc-section-head > #refreshStoreServices { min-width: 114px; min-height: 46px; background: #fff; color: #d45100; border: 1px solid #ffbb92; border-radius: 7px; box-shadow: none; font-size: 15px; font-weight: 550; } #appView .svc-design[data-svc-tab=delivery] .svc-filter { font-size: 14px; color: #4768a0; } #appView .svc-design[data-svc-tab=delivery] .svc-filter input,#appView .svc-design[data-svc-tab=delivery] .svc-filter select { font-size: 14px; } #appView .svc-design[data-svc-tab=quota] .svc-filterbar { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr 1fr 1fr auto; gap: 12px; padding: 14px 16px; align-items: center; } #appView .svc-design[data-svc-tab=quota] .svc-filter { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px; border: 1px solid #e0e7f3; border-radius: 6px; color: #46679f; font-size: 13px; } #appView .svc-design[data-svc-tab=quota] .svc-filter > span { flex: none; } #appView .svc-design[data-svc-tab=quota] .svc-filter > select { flex: 1; width: 0; min-height: 40px; padding: 6px 0; border: 0; font-size: 13px; color: #526fa2; box-shadow: none; } #appView .svc-design[data-svc-tab=quota] .svc-filter:focus-within { outline: 2px solid #5875a5; outline-offset: 2px; } #appView .svc-design[data-svc-tab=quota] .svc-filterbar > .ghost { height: 44px; min-height: 44px; padding: 8px 18px; background: #fff; border: 1px solid #dce4f0; border-radius: 6px; color: #2e487f; font-size: 14px; } @media(max-width:1100px){#appView .svc-design[data-svc-tab=quota] .svc-filterbar { grid-template-columns: repeat(3,minmax(0,1fr)); }} @media(max-width:680px){#appView .svc-design[data-svc-tab=quota] .svc-filterbar { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }#appView .svc-design[data-svc-tab=quota] .svc-filter > select { font-size: 16px; }} #modalRoot .svc-form-overlay .modal-card { scrollbar-gutter: auto; color: #233b70; } #modalRoot .svc-form-overlay .modal-close { font-size: 24px; font-weight: 400; } #modalRoot .svc-form-overlay .svc-form-actions .ghost { background: #fff; border: 1px solid #dce4f2; color: #0e2057; box-shadow: none; } #modalRoot .svc-form-overlay .svc-form-actions button { height: 40px; min-height: 40px; padding: 8px 26px; border-radius: 6px; font-size: 14px; font-weight: 600; } #modalRoot .svc-form-overlay .svc-form-actions .primary { border: 1px solid #e9b57e; background: linear-gradient(115deg,#ffae58,#bd6b20 70%,#9e4e08); box-shadow: inset 0 1px 1px #ffffff70; } #modalRoot .modal-card.svc-package-dialog:has(#servicePackageForm) { padding: 23px; background: #fff; } #modalRoot .modal-card.svc-package-dialog:has(#servicePackageForm) > h2 { font-size: 20px; line-height: 27px; margin: 0 0 22px; color: #081447; } #modalRoot .svc-package-dialog #servicePackageForm { grid-template-columns: minmax(0,1fr) 234px; gap: 16px 14px; } #modalRoot .svc-package-main { gap: 12px; } #modalRoot .svc-package-main > label { grid-template-columns: 114px minmax(0,1fr); gap: 6px 14px; font-size: 14px; line-height: 22px; font-weight: 550; } #modalRoot .svc-package-main > label > input,#modalRoot .svc-package-main > label > select,#modalRoot .svc-package-inline > input { height: 35px; min-height: 35px; font-size: 16px; font-weight: 400; padding: 5px 12px; color: #233b70; background: #fff; border: 1px solid #dde4f1; border-radius: 5px; } #modalRoot #servicePackageForm[data-warm-package=true] input,#modalRoot #servicePackageForm[data-warm-package=true] select { font-size: 16px; font-weight: 400; } #modalRoot #servicePackageForm[data-warm-package=true] textarea { font-size: 15px; font-weight: 400; } #modalRoot .svc-package-main > label > input:disabled,#modalRoot .svc-package-main > label > input:read-only { color: #8598b9; background: #f0f1f4; } #modalRoot .svc-package-main > label > small { font-size: 12px; font-weight: 400; line-height: 18px; color: #7086b3; } #modalRoot .svc-package-main > label:has([name=cost]) { min-height: 48px; } #modalRoot .svc-package-inline { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 35px; } #modalRoot .svc-package-inline > input { width: 91px; flex: 0 0 91px; } #modalRoot .svc-package-inline > small { color: #7188b4; font-size: 12px; font-weight: 400; line-height: 18px; } #modalRoot .svc-package-main > label:has([name=name]) .svc-character-count { font-size: 12px; top: 8px; } #modalRoot .svc-package-main > label > .svc-trial-price-help[hidden] { display: none; } #modalRoot .svc-package-main > label:has([name=saleStatus]) { min-height: 60px; } #modalRoot .svc-package-dialog .svc-package-rules { padding: 18px 16px; border-color: #dfe6f2; border-radius: 6px; background: #fff; font-size: 14px; color: #3f5b94; } #modalRoot .svc-package-rule-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; } #modalRoot .svc-package-rule-disclosure > summary::-webkit-details-marker { display: none; } #modalRoot .svc-package-rule-disclosure > summary h3 { display: flex; align-items: center; margin: 0; font-size: 16px; line-height: 24px; color: #0c1c53; } #modalRoot .svc-package-rule-disclosure > summary > i { color: #3a5186; font-size: 14px; } #modalRoot .svc-package-rule-disclosure:not([open]) > summary > i { transform: rotate(180deg); } #modalRoot .svc-package-rule-body { margin-top: 22px; } #modalRoot .svc-package-rule-body > small { display: block; font-size: 14px; line-height: 1.75; margin: 0 0 18px; } #modalRoot .svc-package-rule-body p { font-size: 14px; line-height: 1.75; } #modalRoot .svc-package-rule-body ul { padding-left: 24px; line-height: 1.75; } #modalRoot .svc-package-rule-body .svc-rule-warning { padding: 10px; border: 1px solid #ffe0bb; background: #fff7e9; color: #c85000; border-radius: 6px; font-size: 12px; } #modalRoot .svc-package-dialog .svc-package-description { grid-template-columns: 114px minmax(0,1fr); column-gap: 14px; font-size: 14px; line-height: 22px; font-weight: 550; } #modalRoot .svc-package-description textarea { height: 102px; min-height: 102px; padding: 12px 14px 25px; font-size: 15px; line-height: 1.5; font-weight: 400; color: #263e74; resize: vertical; } #modalRoot .svc-package-dialog #servicePackageForm .svc-form-important { padding: 9px 18px; background: #fff8f1; border-color: #ffdfbf; border-radius: 7px; font-size: 13px; line-height: 1.7; } #modalRoot .svc-form-important > strong { display: block; color: #c44700; font-size: 15px; font-weight: 600; } #modalRoot .svc-form-important > strong > i { font-size: 22px; margin-right: 12px; vertical-align: middle; } #modalRoot .svc-form-important ol { padding-left: 48px; margin: 6px 0 0; color: #506da4; } #modalRoot .svc-package-dialog #servicePackageForm .svc-form-actions { gap: 14px; } #modalRoot .svc-package-dialog .svc-form-actions .ghost { min-width: 96px; } #modalRoot .modal-card.svc-quota-dialog:has(#serviceQuotaForm) { padding: 22px; background: #fff; } #modalRoot .svc-quota-dialog h2 { font-size: 20px; line-height: 27px; color: #07164b; margin: 0; } #modalRoot .svc-quota-subtitle { margin: 4px 0 20px; font-size: 16px; line-height: 24px; color: #3e609e; } #modalRoot .svc-quota-dialog #serviceQuotaForm { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 22px 70px; } #modalRoot .svc-quota-scope { grid-template-columns: 56px minmax(0,1.25fr) minmax(0,1fr); gap: 2px 12px; padding: 8px; align-items: center; font-size: 14px; } #modalRoot .svc-quota-scope > .svc-quota-service-icon { min-height: 56px; font-size: 29px; } #modalRoot .svc-quota-scope > strong,#modalRoot .svc-quota-scope > span { color: #203d76; font-size: 14px; line-height: 22px; } #modalRoot .svc-quota-service-copy { grid-column: 3; grid-row: 1/3; align-self: center; min-width: 0; } #modalRoot .svc-quota-service-copy > strong { display: block; font-size: 13px; color: #213c72; } #modalRoot .svc-quota-service-copy > small { display: block; margin-top: 3px; color: #6481b0; font-size: 12px; } #modalRoot .svc-quota-before,#modalRoot .svc-quota-dialog #serviceQuotaForm > label { color: #35538d; font-size: 14px; font-weight: 550; line-height: 22px; gap: 6px; } #modalRoot .svc-quota-before strong.svc-quota-value { display: flex; padding: 0; min-height: 36px; align-items: stretch; color: #2b4480; font-size: 16px; font-weight: 400; } #modalRoot .svc-quota-value > span:first-child { flex: 1; padding: 6px 12px; } #modalRoot .svc-quota-value .svc-value-unit { display: grid; place-items: center; padding: 0 12px; border-left: 1px solid #dde4ef; font-size: 14px; } #modalRoot .svc-quota-arrow::after { content: none; } #modalRoot .svc-quota-before > i { position: absolute; top: 39px; right: -44px; font-size: 17px; color: #253b76; } #modalRoot .svc-quota-dialog .svc-field-unit > input { height: 35px; min-height: 35px; padding: 5px 12px; color: #243e78; font-size: 16px; font-weight: 400; } #modalRoot .svc-quota-dialog #serviceQuotaForm > label.full:not(:has(textarea)) { grid-template-columns: 84px minmax(0,1fr); align-items: center; gap: 8px 14px; } #modalRoot .svc-quota-dialog #serviceQuotaForm > label.full:has([name=used]) { grid-template-columns: 70px 142px minmax(0,1fr); gap: 8px 12px; } #modalRoot .svc-quota-dialog #serviceQuotaForm > label.full:has([name=used]) > small { font-size: 12px; line-height: 1.55; color: #6783b1; font-weight: 400; } #modalRoot .svc-quota-dialog label small > i { margin-right: 5px; color: #496da8; } #modalRoot .svc-quota-dialog [name=used],#modalRoot .svc-usage-unavailable { font-size: 14px; font-weight: 400; min-height: 36px; padding: 7px 12px; } #modalRoot .svc-quota-dialog [name=expiresAt] { height: 38px; min-height: 38px; padding: 6px 12px; font-size: 16px; color: #2c437f; font-weight: 400; } #modalRoot .svc-quota-dialog #serviceQuotaForm > label:has(textarea) { display: block; position: relative; } #modalRoot .svc-quota-dialog textarea { display: block; width: 100%; min-height: 92px; margin-top: 6px; padding: 10px 14px; color: #304c83; font-size: 16px; font-weight: 400; line-height: 1.5; } #modalRoot .svc-required { color: #ed4037; } #modalRoot .svc-quota-dialog .svc-quota-boundary { padding: 12px 16px; border-radius: 6px; background: #f3f7fd; font-size: 13px; line-height: 1.55; color: #6580af; } #modalRoot .svc-quota-dialog .svc-form-actions { border: 0; gap: 14px; } #modalRoot .svc-quota-dialog .svc-form-actions .ghost { min-width: 128px; } @media(min-width:681px){ #modalRoot .svc-quota-scope { order: 1; } #modalRoot .svc-quota-before,#modalRoot .svc-quota-after { order: 2; } #modalRoot #serviceQuotaForm label:has([name=used]) { order: 3; } #modalRoot #serviceQuotaForm label:has([name=expiresAt]) { order: 4; } #modalRoot #serviceQuotaForm label:has([name=note]) { order: 5; } #modalRoot #serviceQuotaForm .warm-error-summary { order: 6; margin-top: -12px; margin-bottom: -12px; } #modalRoot #serviceQuotaForm .svc-quota-boundary { order: 7; } #modalRoot #serviceQuotaForm .warm-write-feedback { order: 8; } #modalRoot #serviceQuotaForm .svc-form-actions { order: 9; } } @media(max-width:680px){ #modalRoot #servicePackageForm[data-warm-package=true] textarea { font-size: 16px; } #modalRoot .svc-form-overlay .svc-form-actions button { height: 44px; min-height: 44px; } #modalRoot .svc-form-overlay .modal-card > h2 { padding-right: 32px; } #modalRoot .svc-package-dialog #servicePackageForm { grid-template-columns: minmax(0,1fr); } #modalRoot .svc-package-main > label,#modalRoot .svc-package-dialog .svc-package-description { grid-template-columns: minmax(0,1fr); } #modalRoot .svc-package-inline { grid-column: 1; grid-row: auto; flex-wrap: wrap; } #modalRoot .svc-package-main > label > input,#modalRoot .svc-package-main > label > select,#modalRoot .svc-package-inline > input { min-height: 44px; height: 44px; font-size: 16px; } #modalRoot .svc-package-main > label:has([name=name]) .svc-character-count { top: 36px; } #modalRoot .svc-quota-dialog #serviceQuotaForm { gap: 18px 24px; } #modalRoot .svc-quota-scope { grid-template-columns: 44px minmax(0,1fr); gap: 4px 12px; } #modalRoot .svc-quota-scope > .svc-quota-service-icon { min-height: 44px; } #modalRoot .svc-quota-service-copy { grid-column: 2; grid-row: 3; } #modalRoot .svc-quota-before > i { right: -20px; } #modalRoot .svc-quota-dialog #serviceQuotaForm > label.full:has([name=used]) { grid-template-columns: 70px minmax(0,1fr); } #modalRoot .svc-quota-dialog #serviceQuotaForm > label.full:has([name=used]) > small { grid-column: 2; grid-row: 2; } #modalRoot .svc-quota-dialog .svc-field-unit > input,#modalRoot .svc-quota-dialog [name=expiresAt] { height: 44px; min-height: 44px; font-size: 16px; } #modalRoot .svc-quota-dialog .svc-form-actions { flex-wrap: wrap; } } /* R116: selected 98/99 form surfaces; original controls, handlers and safety gates retained. */ #appView .miniapp-services-page { gap: 24px; } #appView .miniapp-service-summary { gap: 0; min-height: 82px; margin-top: -6px; border: 1px solid #e1e6ee; border-radius: 8px; background: #fff; } #appView .miniapp-service-summary article { min-width: 0; min-height: 80px; padding: 10px 22px; border: 0; border-radius: 0; background: transparent; box-shadow: none; gap: 12px; } #appView .miniapp-service-summary article + article { border-left: 1px solid #e1e6ee; } #appView .miniapp-service-summary article > i { width: 34px; height: 34px; border-radius: 50%; font-size: 17px; } #appView .miniapp-service-summary span { font-size: 12px; line-height: 16px; } #appView .miniapp-service-summary strong { font-size: 18px; line-height: 24px; } #appView .miniapp-service-summary small { font-size: 11px; line-height: 14px; } #appView .miniapp-template-panel { order: 1; margin: 0; padding: 0; gap: 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } #appView .miniapp-template-panel .panel-head { margin: 0; } #appView .miniapp-template-panel .eyebrow { display: none; } #appView .miniapp-template-panel h2 { margin: 0; font-size: 26px; line-height: 36px; } #appView .miniapp-template-panel .panel-head p { margin: 4px 0 0; font-size: 15px; line-height: 24px; } #appView .miniapp-scope-banner { order: 2; } #appView .miniapp-customer-section { order: 3; } #appView #miniappTemplateUpload { display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding: 24px 24px 48px; border: 1px solid #e1e6ee; border-radius: 8px; background: #fff; } #appView #miniappTemplateUpload > h3 { margin: 0 0 -6px; font-size: 20px; line-height: 24px; } #appView #miniappTemplateUpload > .miniapp-template-field { display: grid; grid-template-columns: 124px minmax(0,1fr); align-items: start; gap: 24px; margin: 0; color: #101626; font-size: 16px; font-weight: 550; line-height: 24px; } #appView .miniapp-template-field > span:first-child { padding-top: 10px; } #appView .miniapp-template-field b { margin-left: 6px; color: #db3a23; } #appView .miniapp-template-field > span > small { color: #64738c; font-size: 13px; } #appView .miniapp-template-input { position: relative; display: block; min-width: 0; } #appView #miniappTemplateUpload .miniapp-template-input > input,#appView #miniappTemplateUpload textarea { display: block; width: 100%; min-height: 46px; padding: 10px 78px 10px 14px; border: 1px solid #dce3ed; border-radius: 5px; background: #fff; font: inherit; font-size: 16px; line-height: 24px; } #appView #miniappTemplateUpload textarea { min-height: 132px; height: 132px; padding-right: 14px; padding-bottom: 30px; resize: vertical; } #appView [data-template-count] { position: absolute; right: 14px; bottom: 10px; font-size: 12px; line-height: 18px; pointer-events: none; } #appView #miniappTemplateUpload .miniapp-template-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 148px; gap: 8px; padding: 20px; border: 1px dashed #c8d2e2; border-radius: 7px; background: #fff; text-align: center; } #appView .miniapp-template-drop > i { font-size: 34px; color: #14223a; } #appView .miniapp-template-drop > strong { max-width: 100%; overflow-wrap: anywhere; color: #101626; font-size: 16px; font-weight: 650; } #appView #miniappTemplateUpload .template-file input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; } #appView .miniapp-template-drop:focus-within { outline: 2px solid #ba741b; outline-offset: 3px; } #appView #miniappTemplateUpload > .miniapp-template-missing { order: 4; display: flex; align-items: center; gap: 18px; min-height: 90px; margin: 8px 0 -4px; padding: 16px 20px; border-color: #f1d6af; border-radius: 6px; background: #fff7ec; font-size: 15px; line-height: 24px; } #appView #miniappTemplateUpload > .miniapp-template-missing::before { content: '\f06a'; font-family: 'Font Awesome 7 Free'; font-weight: 900; font-size: 26px; } #appView #miniappTemplateUpload > button[type=submit] { order: 5; align-self: center; min-width: 276px; min-height: 58px; height: 58px; margin: 0; padding: 12px 24px; border-radius: 6px; font-size: 18px; line-height: 26px; } #appView #miniappTemplateUpload > .warm-write-feedback { order: 6; margin: 0; } #appView #miniappTemplateUpload > .warm-error-summary { order: -1; } #appView .cd-draft-title { display: flex; align-items: center; gap: 18px; min-width: 0; } #appView .cd-draft-title > i { display: grid; place-items: center; flex: 0 0 54px; height: 54px; border-radius: 7px; background: #fff0dd; color: #d98d38; font-size: 28px; } #appView .cd-draft-toolbar button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 8px 14px; font-size: 14px; } #appView .cd-draft-toolbar [data-action=generate] { border: 1px solid #cf7522; background: #fff; color: #b25b14; box-shadow: none; } #appView .cd-draft-warning { margin: 14px 0 0; padding: 8px 12px; border: 1px solid #f0d8b8; border-radius: 5px; background: #fff5e8; color: #a35318; font-size: 14px; line-height: 22px; } #appView .cd-draft-warning[hidden] { display: none; } #appView .cd-detail-body[data-cd-view=config] .cd-workspace-main > .cd-section { padding: 20px; } #appView .cd-detail-body[data-cd-view=config] #cdTechnical .cd-actions { margin-top: 0; } #appView .cd-checklist-table th,#appView .cd-checklist-table td { padding: 7px 14px; border: 1px solid #e5e9f0; line-height: 22px; } @media (max-width: 820px) { #appView .miniapp-service-summary { grid-template-columns: repeat(2,minmax(0,1fr)); } #appView .miniapp-service-summary article { padding: 14px; } #appView .miniapp-service-summary article:nth-child(3) { border-left: 0; } #appView .miniapp-service-summary article:nth-child(n+3) { border-top: 1px solid #e1e6ee; } #appView .cd-draft-summary .cd-section-head { align-items: stretch; flex-direction: column; gap: 14px; } } @media (max-width: 600px) { #appView #miniappTemplateUpload { padding: 20px 16px 24px; gap: 20px; } #appView #miniappTemplateUpload > .miniapp-template-field { grid-template-columns: minmax(0,1fr); gap: 8px; } #appView .miniapp-template-field > span:first-child { padding-top: 0; } #appView #miniappTemplateUpload > button[type=submit] { min-width: 0; width: 100%; min-height: 48px; height: auto; } #appView .miniapp-service-summary article { gap: 8px; padding: 12px; } #appView .miniapp-service-summary article > i { width: 28px; height: 28px; font-size: 14px; } #appView .miniapp-service-summary span { font-size: 12px; } #appView .cd-draft-toolbar { display: grid; grid-template-columns: 1fr; width: 100%; } #appView .cd-draft-toolbar button { width: 100%; } } /* R117: selected 99 case/contract card and original four work-item tabs. */ body:has(#content>.cd) #appView:has(.cd-detail-workspace) > main > header .eyebrow { display: block; } #appView:has(.cd-detail-workspace) > main > header { margin-bottom: 16px; } #appView .cd-case-summary { margin: 0 0 14px; padding: 16px; border: 1px solid #e3e7ef; border-radius: 8px; background: #fff; } #appView .cd-case-identity { display: grid; grid-template-columns: minmax(0,2.3fr) minmax(240px,1fr); align-items: start; gap: 24px; margin-bottom: 14px; } #appView .cd-case-identity h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 6px; color: #101b30; font-size: 19px; line-height: 28px; } #appView .cd-case-identity .cd-status { padding: 2px 8px; line-height: 18px; } #appView .cd-case-identity p { margin: 4px 0; color: #61718f; font-size: 14px; line-height: 22px; overflow-wrap: anywhere; } #appView .cd-case-identity p > span { margin-left: 16px; } #appView .cd-case-contact { padding-left: 22px; border-left: 1px solid #e3e7ef; } #appView .cd-case-identity dl,#appView .cd-case-workitem dl { display: grid; gap: 4px; margin: 0; } #appView .cd-case-identity dl > div,#appView .cd-case-workitem dl > div,#appView .cd-contract-facts > div { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 10px; line-height: 20px; } #appView .cd-case-summary dt { color: #61718f; font-size: 13px; } #appView .cd-case-summary dd { margin: 0; color: #17243d; font-size: 14px; overflow-wrap: anywhere; } #appView .cd-case-contact > button { min-height: 44px; padding: 4px 0; border: 0; background: transparent; color: #a85b13; font-size: 13px; } #appView .cd-case-contract { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.12fr); gap: 22px; padding: 13px; border: 1px solid #e7ebf2; border-radius: 6px; background: #fcfcfe; } #appView .cd-case-workitem h3 { margin: 0 0 8px; color: #101b30; font-size: 16px; line-height: 24px; } #appView #cdContractSummary { align-self: center; min-width: 0; padding-left: 22px; border-left: 1px solid #dfe5ef; } #appView .cd-contract-facts { display: grid; gap: 4px; margin: 0; } #appView .cd-contract-facts > div { grid-template-columns: 90px minmax(0,1fr); } #appView .cd-contract-boundary,#appView .cd-contract-unavailable { margin: 6px 0 0; color: #826132; font-size: 12px; line-height: 18px; } #appView .cd-contract-unavailable { margin-top: 0; } #appView .cd-case-boundary p { margin: 10px 0 0; color: #6b7789; font-size: 12px; line-height: 20px; } #appView .cd-case-missing { margin: 10px 0 0; color: #a35d25; font-size: 13px; line-height: 22px; } #appView .cd-detail-workspace { border: 1px solid #e3e7ef; border-radius: 8px; background: #fff; } #appView .cd-detail-workspace .cd-tabs { display: flex; gap: 22px; margin: 0; padding: 0 20px; overflow-x: auto; border-bottom: 1px solid #e7ebf2; } #appView .cd-detail-workspace .cd-tabs button { flex: none; min-height: 48px; padding: 10px 4px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: #64738d; font-size: 15px; font-weight: 550; } #appView .cd-detail-workspace .cd-tabs button[aria-current=page] { border-bottom-color: #a85b13; color: #a85b13; background: transparent; } #appView .cd-detail-workspace .cd-detail-body { padding: 20px; } #appView .cd-detail-workspace .cd-detail-body[data-cd-view=config] .cd-workspace-main > .cd-section { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } #appView .cd-detail-workspace #cdTechnical input,#appView .cd-detail-workspace #cdTechnical textarea { border-color: #dce3ee; border-radius: 5px; } #appView .cd-detail-workspace .cd-section-head { margin-bottom: 0; } #appView .cd-detail-workspace .cd-section-head > [data-action=profile] { min-height: 32px; height: 32px; padding: 4px 0; border: 0; background: transparent; color: #a85b13; } @media (max-width:820px) { #appView .cd-case-identity,#appView .cd-case-contract { grid-template-columns: minmax(0,1fr); gap: 12px; } #appView .cd-case-contact,#appView #cdContractSummary { padding-left: 0; border-left: 0; } #appView #cdContractSummary { padding-top: 12px; border-top: 1px solid #dfe5ef; } #appView .cd-case-identity p > span { display: block; margin-left: 0; } #appView .cd-detail-workspace .cd-detail-body { padding: 16px; } #appView .cd-detail-workspace .cd-tabs { gap: 16px; padding: 0 16px; } #appView .cd-detail-workspace .cd-section-head > [data-action=profile] { min-height: 44px; height: 44px; } } /* R118 · selected 35/39: original fields, guarded actions and real attachment routes only. */ body:has(#content .cd-profile-page) #appView>main>header .eyebrow { display: block; } body:has(#content .cd-profile-page) #appView>main>header { margin-bottom: 20px; } body:has(#content .cd-profile-page) #appView>main>header h1 { font-size: 36px; line-height: 44px; color: #0b1436; } body:has(#content .cd-profile-page) #appView>main>header p { color: #566b92; } #appView .cd-profile-page > .cd-heading { display: none; } #appView .cd-profile-page > .cd-back { position: absolute; top: -93px; right: 0; min-height: 44px; padding: 8px 20px; border: 1px solid #d6a47b; border-radius: 5px; color: #94460b; background: #fff; font-size: 16px; font-weight: 650; } #appView .cd-profile-page > .cd-back::before { content: none; } #appView .cd-profile-page > .cd-back i { margin-right: 12px; } #appView .cd-profile-help-icon { margin-left: 8px; color: #93908a; } #appView .cd-profile-notice { display: flex; align-items: flex-start; gap: 18px; min-height: 80px; padding: 16px 18px; margin: 0 0 20px; color: #94460b; border: 1px solid #f5d7b8; background: #fff7ed; border-radius: 6px; font-size: 16px; line-height: 24px; } #appView .cd-profile-notice > i { flex: 0 0 26px; font-size: 26px; margin-top: 1px; } #appView .cd-profile-notice p { margin: 2px 0 0; color: #556b92; font-size: 14px; line-height: 22px; } #appView #cdProfile { padding: 26px; gap: 20px; color: #233b70; border-radius: 8px; } #appView #cdProfile h3 { color: #0b1436; } #appView #cdProfile .cd-profile-section p { margin: 2px 0 0; color: #566b92; font-size: 14px; line-height: 22px; } #appView #cdProfile .cd-section-head { align-items: flex-start; } #appView #cdProfile .cd-section-head > span { white-space: nowrap; background: #f3f5f8; } #appView #cdProfile .cd-section-head b { margin-left: 18px; color: #a6530b; font-size: 16px; } #appView #cdProfile .cd-grid { gap: 16px; margin-top: 18px; max-width: 646px; } #appView #cdProfile .cd-grid label { color: #233b70; font-size: 16px; gap: 4px 18px; } #appView #cdProfile input { min-height: 41px; height: 41px; border-radius: 5px; border-color: #ccd3df; padding: 8px 13px; color: #162449; font-size: 16px; box-shadow: none; } #appView #cdProfile .cd-field-help { color: #566b92; font-size: 13px; line-height: 20px; } #appView #cdProfile .cd-profile-provider .cd-grid { gap: 16px; } #appView #cdProfile .cd-profile-provider label { position: relative; } #appView #cdProfile .cd-profile-provider input { padding-right: 200px; } #appView #cdProfile .cd-profile-provider .cd-field-help { position: absolute; inset: 0 12px auto auto; height: 41px; display: flex; align-items: center; width: 184px; font-size: 12px; pointer-events: none; } #appView #cdProfile .cd-profile-provider label:last-child .cd-field-help { position: static; width: auto; height: auto; } #appView #cdProfile .cd-profile-provider label:last-child input { padding-right: 13px; } #appView #cdProfile .cd-profile-impact { display: flex; gap: 14px; padding: 18px 16px; border-radius: 6px; background: #f3f5f8; color: #53688f; } #appView #cdProfile .cd-profile-impact > i { margin-top: 1px; font-size: 24px; } #appView #cdProfile .cd-profile-impact h3 { color: #233b70; font-size: 16px; line-height: 24px; } #appView #cdProfile .cd-profile-impact ul { margin: 8px 0 0; font-size: 14px; line-height: 24px; } #appView #cdProfile > .cd-actions { gap: 20px; margin-top: -8px; } #appView #cdProfile > .cd-actions button { min-height: 45px; border-radius: 5px; color: #0b1436; background: #fff; border-color: #c4c5c7; } #appView #cdProfile > .cd-actions .primary { min-width: 160px; color: #fff; border-color: #d1843c; background: linear-gradient(110deg,#f5a341,#924606); } .cd-required { color: #d12d36; } #modalRoot:has(.cd-supplement-dialog) > .modal { align-items: flex-end; padding: 24px 24px 46px; background: rgb(0 0 0 / .34); } #modalRoot:has(.cd-supplement-dialog) .modal-card:not(.warm-discard-dialog) { width: 744px; margin-left: 160px; padding: 22px 25px 0; border-radius: 7px; background: #fff; scrollbar-gutter: auto; max-height: min(840px,calc(100dvh - 70px)); scroll-padding-block: 20px 90px; } #modalRoot:has(.cd-supplement-dialog) .modal-close { border: 0; background: none; border-radius: 4px; box-shadow: none; font-size: 23px; color: #53668f; } #modalRoot .cd-supplement-dialog { color: #233b70; font-size: 14px; } #modalRoot .cd-supplement-dialog h2 { font-size: 23px; line-height: 32px; margin-bottom: 12px; color: #0b1436; } #modalRoot .cd-supplement-dialog h3 { font-size: 16px; line-height: 24px; margin: 20px 0 8px; color: #0b1436; } #modalRoot .cd-supplement-dialog .cd-operation-notice { display: flex; gap: 12px; align-items: flex-start; padding: 10px 13px; min-height: 42px; margin: 0; border: 1px solid #f5d7b8; border-radius: 5px; color: #94460b; background: #fff4e7; font-size: 13px; line-height: 20px; } #modalRoot .cd-supplement-dialog .cd-operation-notice i { flex: 0 0 20px; font-size: 20px; } #modalRoot .cd-supplement-dialog .cd-supplement-facts { margin: 0 0 20px; gap: 4px 24px; } #modalRoot .cd-supplement-facts > div { grid-template-columns: 108px minmax(0,1fr); gap: 10px; line-height: 22px; } #modalRoot .cd-supplement-facts dt { color: #566b92; } #modalRoot .cd-supplement-materials { border-top: 1px solid #e5e8ef; padding-top: 14px; } #modalRoot .cd-supplement-materials h3 { margin: 0 0 8px; } #modalRoot .cd-supplement-documents > div { display: grid; grid-template-columns: 108px 62px minmax(0,1fr) 84px; gap: 10px; align-items: center; min-height: 30px; } #modalRoot .cd-supplement-documents strong { font-size: 13px; font-weight: 500; color: #53688f; } #modalRoot .cd-document-state { width: max-content; padding: 1px 11px; border-radius: 16px; font-size: 12px; line-height: 22px; } #modalRoot .cd-document-state.submitted { color: #117b66; background: #ddf3ea; } #modalRoot .cd-document-state.missing { color: #aa3e29; background: #ffede7; } #modalRoot .cd-document-state.unconfirmed { color: #8b570a; background: #fff1cf; } #modalRoot .cd-document-state.optional { color: #53647b; background: #eef1f5; } #modalRoot .cd-document-description { overflow-wrap: anywhere; font-size: 13px; color: #566b92; } #modalRoot .cd-supplement-documents a { text-align: right; color: #a35715; font-size: 13px; text-decoration: none; } #modalRoot .cd-document-unavailable { text-align: right; color: #566b92; font-size: 12px; } #modalRoot .cd-supplement-dialog .cd-muted { color: #566b92; font-size: 13px; line-height: 20px; } #modalRoot .cd-supplement-dialog #cdSupplement { gap: 18px; margin-top: 20px; } #modalRoot .cd-supplement-review { display: block; position: relative; font-weight: 650; color: #0b1436; } #modalRoot .cd-supplement-review textarea { display: block; margin-top: 8px; height: 90px; min-height: 90px; padding: 10px 13px 25px; color: #233b70; font-size: 14px; line-height: 22px; border: 1px solid #ccd3df; border-radius: 5px; box-shadow: none; font-weight: 400; } #modalRoot .cd-supplement-review output { position: absolute; bottom: 8px; right: 14px; font-size: 12px; line-height: 18px; color: #566b92; font-weight: 400; } #modalRoot .cd-supplement-note h3 { margin: 0 0 6px; } #modalRoot .cd-supplement-note p { color: #566b92; font-size: 13px; line-height: 22px; } #modalRoot .cd-supplement-note .cd-operation-notice { margin: 8px 0; } #modalRoot .cd-supplement-dialog .modal-actions { position: sticky; bottom: 0; z-index: 2; margin: 0 -25px; padding: 14px 25px; border-top: 1px solid #e5e8ef; gap: 12px; background: #fff; } #modalRoot .cd-supplement-dialog .cd-supplement-submit-boundary { flex: 1 1 240px; max-width: 290px; margin: 0 auto 0 0; color: #94460b; font-size: 12px; line-height: 18px; } #modalRoot .cd-supplement-dialog .modal-actions button { border-radius: 6px; font-size: 16px; font-weight: 650; min-width: 146px; } #modalRoot .cd-supplement-dialog .modal-actions .ghost { color: #a0520b; border: 1px solid #efc49e; background: #fff; } #modalRoot .cd-supplement-dialog .modal-actions .primary { color: #fff; border-color: #d1843c; background: linear-gradient(110deg,#f5a341,#924606); } @media(max-width:900px) { #modalRoot:has(.cd-supplement-dialog) .modal-card:not(.warm-discard-dialog) { margin-left: 0; } #appView .cd-profile-notice { font-size: 14px; } } @media(max-width:640px) { #appView .cd-profile-page > .cd-back { position: static; width: 100%; margin-bottom: 16px; } #appView #cdProfile .cd-grid label { grid-template-columns: minmax(0,1fr); } #appView #cdProfile .cd-profile-provider input { padding-right: 13px; } #appView #cdProfile .cd-profile-provider .cd-field-help { position: static; width: auto; height: auto; display: block; grid-column: 1; } #appView #cdProfile input { min-height: 44px; } #appView #cdProfile .cd-section-head { flex-wrap: wrap; } #modalRoot:has(.cd-supplement-dialog) > .modal { padding: 16px; align-items: center; } #modalRoot:has(.cd-supplement-dialog) .modal-card:not(.warm-discard-dialog) { padding: 20px 18px 0; max-height: calc(100dvh - 32px); } #modalRoot .cd-supplement-dialog .cd-supplement-facts { grid-template-columns: minmax(0,1fr); } #modalRoot .cd-supplement-documents > div { grid-template-columns: minmax(0,1fr) 62px; padding: 6px 0; } #modalRoot .cd-supplement-documents a,#modalRoot .cd-document-unavailable { min-height: 44px; display: flex; justify-content: flex-end; align-items: center; } #modalRoot .cd-supplement-dialog .modal-actions { margin: 0 -18px; padding: 14px 18px; flex-wrap: wrap; } #modalRoot .cd-supplement-dialog .modal-actions button { flex: 1 1 150px; } #modalRoot .cd-supplement-dialog .cd-supplement-submit-boundary { flex-basis: 100%; max-width: none; } #modalRoot .cd-supplement-review textarea { font-size: 16px; } } /* R119 · selected 34, preserve native status controls, original payloads and saved-link semantics. */ #appView .cd-channel-page > .cd-tabs { width: max-content; max-width: 100%; margin: 0 0 12px; border: 1px solid #e2e6ee; border-radius: 6px; background: #fff; overflow-x: auto; } #appView .cd-channel-page > .cd-tabs button { padding: 10px 23px; min-height: 45px; font-size: 15px; } #appView .cd-channel-case { display: grid; grid-template-columns: 1fr 1fr 0.95fr; gap: 22px; min-height: 82px; padding: 16px 22px; margin-bottom: 16px; border: 1px solid #e4e7ed; border-radius: 8px; background: #fff; } #appView .cd-channel-case > div + div { border-left: 1px solid #dce2ed; padding-left: 24px; } #appView .cd-channel-case h2 { font-size: 20px; line-height: 27px; color: #0b1436; } #appView .cd-channel-case p { color: #566b92; font-size: 13px; line-height: 21px; overflow-wrap: anywhere; } #appView .cd-channel-case > div:last-child { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-content: center; } #appView .cd-channel-case > div:last-child > span { font-size: 12px; color: #566b92; } #appView .cd-channel-case > div:last-child > strong { grid-column: 1; font-size: 14px; color: #142446; } #appView .cd-channel-case > div:last-child > button { grid-column: 2; grid-row: 1/3; border: 0; background: none; box-shadow: none; color: #a0520c; font-size: 12px; padding: 4px; } #appView .cd-channel-page .cd-detail-body { padding: 16px; } #appView .cd-channel-workspace { color: #233b70; } #appView .cd-channel-workspace > h2 { color: #0b1436; font-size: 22px; line-height: 30px; margin: 0 0 16px; } #appView .cd-channel-sections { display: flex; gap: 8px; border-bottom: 1px solid #e4e8ef; margin: 0 0 14px; overflow-x: auto; } #appView .cd-channel-sections button { display: inline-flex; align-items: center; justify-content: center; width: auto; flex: 0 0 auto; min-height: 36px; padding: 6px 20px; border: 0; border-bottom: 2px solid transparent; border-radius: 4px 4px 0 0; box-shadow: none; background: #f8f9fb; color: #536b92; font-size: 14px; white-space: nowrap; } #appView .cd-channel-sections button[aria-current=page] { background: #fff5e9; color: #a24f09; border-bottom-color: #b86b1d; } #appView .cd-channel-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 24px; } #appView .cd-channel-switch { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: min(430px,100%); margin-bottom: 14px; } #appView .cd-channel-switch button { display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 45px; padding: 8px 14px; border: 1px solid #d8dfeb; border-radius: 0; background: #fff; font-size: 16px; color: #233b70; } #appView .cd-channel-switch button:first-child { border-radius: 5px 0 0 5px; } #appView .cd-channel-switch button:last-child { border-radius: 0 5px 5px 0; } #appView .cd-channel-switch button[aria-selected=true] { border-color: #c57e36; background: #fff8ef; color: #a04d08; z-index: 1; } #appView .cd-channel-switch i { font-size: 21px; color: #148d58; } #appView .cd-channel-switch img { width: 22px; height: 22px; flex: 0 0 22px; } #appView .cd-channel-switch .fa-alipay { color: #087deb; } #appView .cd-channel-manual { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 36px; color: #566b92; font-size: 14px; line-height: 22px; } #appView .cd-channel-manual i { color: #c58b46; font-size: 21px; margin-top: 1px; } #appView .cd-channel { gap: 16px; } #appView .cd-channel-field { display: grid; grid-template-columns: 126px minmax(0,1fr); gap: 5px 12px; align-items: start; position: relative; color: #233b70; font-size: 14px; line-height: 22px; } #appView .cd-channel-field > span { padding-top: 8px; } #appView .cd-channel-field input,#appView .cd-channel-field select,#appView .cd-channel-field textarea { min-height: 38px; padding: 7px 12px; border: 1px solid #d3dce8; border-radius: 5px; box-shadow: none; color: #233b70; background: #fff; font-size: 14px; line-height: 22px; } #appView .cd-channel-field .cd-channel-help { grid-column: 2; color: #566b92; font-size: 12px; line-height: 18px; } #appView .cd-channel-status { grid-template-columns: 126px 108px minmax(0,1fr); align-items: center; } #appView .cd-channel-status > span { padding: 0; } #appView .cd-channel-status select { min-height: 34px; padding: 5px 6px; background-color: #f2f5f9; font-weight: 600; font-size: 13px; } #appView .cd-channel-status .cd-channel-help { grid-column: 3; } #appView .cd-channel-copyable input { padding-right: 42px; } #appView .cd-channel-copyable button { position: absolute; top: 0; right: 0; min-height: 38px; width: 38px; padding: 7px; border: 0; background: transparent; box-shadow: none; color: #607194; } #appView .cd-channel-copyable button:disabled { opacity: .38; } #appView .cd-channel-note textarea { height: 82px; min-height: 82px; padding-bottom: 24px; resize: vertical; } #appView .cd-channel-note output { position: absolute; top: 57px; right: 12px; font-size: 12px; line-height: 18px; color: #566b92; } #appView .cd-channel-field .warm-field-error { grid-column: 2/-1; color: #ad302b; font-size: 12px; margin: 0; } #appView .cd-channel > .cd-actions { gap: 16px; margin: 10px 0 0; justify-content: flex-end; } #appView .cd-channel > .cd-actions .primary { min-height: 44px; min-width: 190px; font-size: 15px; font-weight: 650; border: 1px solid #d1843b; border-radius: 6px; background: linear-gradient(110deg,#f5a341,#924606); color: #fff; } #appView .cd-channel-official { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 16px; border: 1px solid #c67b31; border-radius: 6px; background: #fff; color: #a04d08; font-size: 14px; font-weight: 600; text-decoration: none; } #appView .cd-channel-aside { display: grid; position: static; height: auto; min-height: 0; padding: 0; border: 0; gap: 12px; align-content: start; background: transparent; color: #233b70; } #appView .cd-channel-aside [data-channel-preview] { display: grid; gap: 12px; } #appView .cd-channel-side-card { padding: 12px 14px; border: 1px solid #e9edf2; border-radius: 8px; background: #fff; } #appView .cd-channel-side-card h3 { font-size: 17px; line-height: 24px; color: #0b1436; margin: 0 0 9px; } #appView .cd-channel-side-card p { color: #566b92; font-size: 13px; line-height: 20px; margin: 8px 0 0; } #appView .cd-channel-side-card dl { display: grid; gap: 5px; margin: 6px 0; font-size: 13px; line-height: 20px; } #appView .cd-channel-side-card dl > div { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 8px; } #appView .cd-channel-side-card dt { color: #566b92; } #appView .cd-channel-side-card dd { margin: 0; overflow-wrap: anywhere; } #appView .cd-channel-side-card summary { color: #0b1436; font-size: 14px; font-weight: 600; cursor: pointer; } #appView .cd-channel-side-card .cd-contract-boundary { font-size: 12px; } #appView .cd-channel-qr-empty { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 178px; gap: 4px; background: #f5f6f8; border: 1px solid #edf0f4; border-radius: 6px; text-align: center; color: #687a9b; font-size: 13px; } #appView .cd-channel-qr-empty i { font-size: 49px; margin-bottom: 9px; color: #bdc6d3; } #appView .cd-channel-side-card [data-auth] { width: 100%; margin-top: 10px; min-height: 40px; font-size: 13px; } #appView .cd-channel-side-card .cd-channel-boundary { display: flex; gap: 10px; padding: 10px; border: 1px solid #f1d6b6; background: #fff6e9; color: #98520e; border-radius: 5px; } #appView .cd-channel-boundary i { font-size: 23px; } #modalRoot:has(.cd-channel-auth-dialog) .modal-card { width: min(560px,100%); background: #fff; border-radius: 8px; } #modalRoot .cd-channel-auth-dialog h2 { color: #0b1436; font-size: 22px; line-height: 30px; margin: 0 0 14px; } #modalRoot .cd-channel-auth-dialog .cd-channel-boundary { color: #98520e; font-size: 14px; line-height: 22px; margin: 0 0 16px; } #modalRoot [data-channel-qr] { width: 232px; min-height: 232px; margin: 16px auto; text-align: center; } #modalRoot [data-channel-qr] svg { width: 232px; max-width: 100%; height: auto; display: block; } #modalRoot .cd-channel-auth-dialog a { display: block; text-align: center; overflow-wrap: anywhere; } @media(max-width:1100px) { #appView .cd-channel-layout { grid-template-columns: minmax(0,1fr) 290px; gap: 16px; } #appView .cd-channel-status { grid-template-columns: 110px minmax(0,1fr); } #appView .cd-channel-status .cd-channel-help { grid-column: 2; } #appView .cd-channel-field { grid-template-columns: 110px minmax(0,1fr); } #appView .cd-channel-case { grid-template-columns: 1fr 1fr; } #appView .cd-channel-case > div:last-child { grid-column: 1/-1; padding: 10px 0 0; border-left: 0; border-top: 1px solid #dce2ed; } } @media(max-width:850px) { #appView .cd-channel-layout { grid-template-columns: minmax(0,1fr); } #appView .cd-channel-aside { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media(max-width:640px) { #appView .cd-channel-case { grid-template-columns: minmax(0,1fr); padding: 16px; } #appView .cd-channel-case > div + div { padding: 10px 0 0; border-left: 0; border-top: 1px solid #dce2ed; } #appView .cd-channel-page > .cd-tabs { width: 100%; } #appView .cd-channel-page > .cd-tabs button { padding: 10px 12px; flex: 0 0 auto; } #appView .cd-channel-field,#appView .cd-channel-status { grid-template-columns: minmax(0,1fr); } #appView .cd-channel-field .cd-channel-help,#appView .cd-channel-status .cd-channel-help,#appView .cd-channel-field .warm-field-error { grid-column: 1; } #appView .cd-channel-field > span { padding: 0; } #appView .cd-channel-field input,#appView .cd-channel-field select,#appView .cd-channel-field textarea { min-height: 44px; font-size: 16px; } #appView .cd-channel-copyable button { top: 27px; min-height: 44px; width: 44px; } #appView .cd-channel-note output { top: 84px; } #appView .cd-channel-aside { grid-template-columns: minmax(0,1fr); } #appView .cd-channel > .cd-actions { justify-content: stretch; } #appView .cd-channel > .cd-actions > * { width: 100%; min-height: 44px; } }