:root { --bg: #17191c; --panel: #22252a; --panel-2: #2c3036; --paper: #f3efe7; --line: #3a3f46; --text: #f4f1ea; --muted: #aeb4bd; --accent: #d78642; --danger: #d55a5a; --ok: #65b687; --content: min(1240px, calc(100vw - 32px)); } * { box-sizing: border-box; } body { margin: 0; background: radial-gradient(circle at 20% 0%, rgba(215, 134, 66, .18), transparent 28%), var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } a { color: inherit; } .shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; } .topbar { border-bottom: 1px solid var(--line); background: rgba(20, 22, 25, .9); } .topbar-inner { width: var(--content); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0; } .brand strong { display: block; letter-spacing: -.03em; font-size: 20px; } .brand-version { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .brand span { color: var(--muted); font-size: 13px; } .nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .nav a { display: inline-flex; align-items: center; } button, .button { border: 1px solid var(--line); border-radius: 999px; color: var(--text); background: var(--panel); padding: 9px 13px; text-decoration: none; cursor: pointer; } button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: #1b120a; font-weight: 800; } /* StatusTransitionMenu: the status badge is the trigger. Clicking it opens a clean dropdown (header + one row per target status), lifted to and positioned with fixed coords by JS — a pure overlay that never clips or reflows the table. Valid transitions are clickable; invalid ones greyed out. */ .status-trigger { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; } .status-trigger::after { content: "▾"; opacity: .5; font-size: 11px; transition: transform 120ms ease; } .status-trigger[aria-expanded="true"]::after { transform: rotate(180deg); } .status-trigger:hover .badge { box-shadow: inset 0 0 0 1px var(--accent); } .status-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px; } .status-dropdown { position: fixed; z-index: 200; min-width: 240px; max-width: 340px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--chrome, #202326); box-shadow: 0 24px 70px rgba(0,0,0,.55); } .status-dropdown[hidden] { display: none; } .status-dropdown-head { padding: 8px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .status-dropdown-form { margin: 0; } .status-dropdown-item { display: block; width: 100%; text-align: left; border: 0; border-radius: 8px; background: transparent; color: var(--ink, #f0efeb); padding: 9px 12px; font: inherit; cursor: pointer; white-space: nowrap; } .status-dropdown-item:hover:not(:disabled), .status-dropdown-item:focus-visible:not(:disabled) { background: var(--accent); color: #1b120a; outline: none; } .status-dropdown-item:disabled { color: var(--muted); opacity: .4; cursor: not-allowed; } /* Confirmation modal for a status change */ .status-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; } .status-modal[hidden] { display: none; } .status-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); } .status-modal-card { position: relative; z-index: 1; width: min(460px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 16px; background: var(--panel); padding: 22px; box-shadow: 0 30px 90px rgba(0,0,0,.55); } .status-modal-card h3 { margin: 0 0 10px; } .status-modal-card p { color: var(--muted); line-height: 1.55; margin: 0 0 18px; } .status-modal-actions { display: flex; justify-content: flex-end; gap: 10px; } /* Top navbar: flat text links (no dropdowns) — sub-navigation lives on each area page */ .nav > a { border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: transparent; padding: 8px 12px; text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; line-height: 1; } .nav > a:hover { background: var(--panel-2); color: var(--text); } .nav > a.active { background: var(--accent); border-color: var(--accent); color: #1b120a; font-weight: 800; } .nav .inline { margin-left: auto; } .nav .inline button { padding: 8px 13px; font-size: 13px; } .workspace { width: var(--content); margin: 0 auto; padding: 24px 0 46px; } .area-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); gap: 18px; align-items: start; } .area-hero-copy p { margin: 0; max-width: 62ch; } .area-hero-actions { justify-content: flex-end; } .area-kpis .stat strong { font-size: 24px; } .area-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .area-card h2 { margin-bottom: 8px; } .process-link-list { display: grid; gap: 8px; } .process-link-list a { display: block; padding: 11px 13px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); text-decoration: none; } .process-link-list a:hover { border-color: rgba(215, 134, 66, .45); background: rgba(215, 134, 66, .08); } .area-inline-grid { margin-top: 0; } .hero { display: grid; grid-template-columns: 1.5fr .8fr; gap: 18px; margin-bottom: 18px; } .panel { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)), var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 18px; box-shadow: 0 22px 70px rgba(0,0,0,.18); } .panel h1, .panel h2, .panel h3 { margin: 0 0 10px; letter-spacing: -.04em; } .panel p { color: var(--muted); line-height: 1.55; } .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat { padding: 15px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); } .stat span { color: var(--muted); font-size: 13px; } .stat strong { display: block; margin-top: 7px; font-size: 28px; letter-spacing: -.05em; } .pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .pricing-grid div { border: 1px solid var(--line); border-radius: 14px; background: #191b1f; padding: 12px; } .pricing-grid span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; } .pricing-grid strong { font-size: 19px; letter-spacing: -.03em; } .detail-grid strong, .detail-grid small, .breakable, .key-value-table code { overflow-wrap: anywhere; word-break: break-word; } .detail-grid small { display: block; margin-top: 6px; color: var(--muted); } .key-value-table th { width: 220px; } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; } .table-wrap { overflow: auto; } .badge { display: inline-flex; border-radius: 999px; padding: 5px 9px; background: var(--panel-2); color: var(--muted); font-size: 12px; text-decoration: none; } .badge.ok { color: #daf4e4; background: rgba(101, 182, 135, .22); } .badge.warn { color: #ffe1bd; background: rgba(215, 134, 66, .22); } .badge.danger { color: #ffd1d1; background: rgba(213, 90, 90, .22); } .compact-list { margin: 0; padding-left: 18px; color: var(--muted); } .compact-list li + li { margin-top: 6px; } .two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); } .three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); } .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } form.inline { display: inline; } input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 11px; background: #15171a; color: var(--text); } label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .creator-consent-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; } .creator-consent-line label { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; overflow-wrap: anywhere; } .creator-consent-line input { width: auto; } .creator-consent-link { flex: 0 0 auto; color: var(--accent); font-size: 12px; text-decoration: none; white-space: nowrap; } .creator-consent-link:hover { text-decoration: underline; } .check-inline { display: inline-flex; align-items: center; gap: 7px; margin: 0 12px 8px 0; color: var(--muted); } .check-inline input { width: auto; } .check-group { display: flex; gap: 4px; flex-wrap: wrap; } .offer-config-form { display: grid; gap: 14px; } .offer-config-checks { border: 1px solid var(--line); border-radius: 14px; background: #191b1f; padding: 12px; } .center-modal { display: none; position: fixed; inset: 0; z-index: 50; padding: 28px 16px; overflow: auto; } .center-modal:target { display: grid; place-items: start center; } .center-modal-backdrop { position: fixed; inset: 0; background: rgba(10, 11, 13, .74); text-decoration: none; } .center-modal-dialog { position: relative; width: min(1040px, 100%); max-height: calc(100vh - 56px); overflow: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); padding: 18px; box-shadow: 0 32px 90px rgba(0,0,0,.48); } .flash { padding: 12px 14px; border: 1px solid rgba(101,182,135,.4); border-radius: 14px; background: rgba(101,182,135,.12); margin-bottom: 16px; } .center-alerts { display: grid; gap: 10px; margin-bottom: 18px; padding: 14px; border: 1px solid rgba(213, 90, 90, .45); border-radius: 18px; background: linear-gradient(180deg, rgba(213,90,90,.12), rgba(215,134,66,.08)), rgba(20,22,25,.92); box-shadow: 0 18px 50px rgba(0,0,0,.18); } .center-alerts[hidden], .center-alert[hidden], .center-alert-log[hidden] { display: none; } .center-alerts-header { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 10px; } .center-alerts-header strong { display: block; letter-spacing: -.03em; } .center-alerts-header span, .center-alerts-header small { color: var(--muted); font-size: 13px; } .center-alert { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: rgba(23,25,28,.88); } .center-alert.error { border-color: rgba(213,90,90,.65); } .center-alert.warning { border-color: rgba(215,134,66,.65); } .center-alert p { margin: 5px 0 0; color: var(--muted); line-height: 1.45; } .center-alert-actions { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; } .center-alert-log { grid-column: 1 / -1; margin: 0; max-height: 260px; overflow: auto; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: #101215; color: #f2e4d4; white-space: pre-wrap; } .docs-shell { display: grid; gap: 18px; } .docs-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .docs-header p { max-width: 72ch; margin: 0; } .docs-menu { display: flex; gap: 8px; flex-wrap: wrap; } /* Documentation search */ .docs-search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .docs-search input[type="search"] { flex: 1 1 320px; min-width: 220px; padding: 10px 14px; border: 1px solid var(--control-line, #454a52); border-radius: 999px; background: var(--control-bg, #1f2226); color: var(--ink, #f0efeb); font-size: 14px; } .docs-search input[type="search"]:focus { outline: none; border-color: var(--accent, #d7a44a); } .docs-search-results { border: 1px solid var(--line); border-radius: 18px; background: #191b1f; padding: 14px 16px; display: grid; gap: 10px; } .docs-search-summary { color: var(--muted); font-size: 13.5px; } .docs-search-summary strong { color: var(--accent-strong, #f0bd5a); } .docs-search-group { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .docs-search-group > summary { cursor: pointer; list-style: none; padding: 10px 14px; user-select: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(255,255,255,.03); font-weight: 600; } .docs-search-group > summary::-webkit-details-marker { display: none; } .docs-search-count { min-width: 26px; text-align: center; padding: 1px 8px; border-radius: 999px; background: rgba(215,164,74,.16); color: var(--accent-strong, #f0bd5a); font-size: 12px; font-weight: 700; } .docs-search-group ul { margin: 0; padding: 6px; list-style: none; display: grid; gap: 4px; } .docs-search-group li a { display: grid; gap: 3px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink, #f0efeb); } .docs-search-group li a:hover { background: rgba(255,255,255,.05); } .docs-hit-heading { font-size: 12px; color: var(--accent, #d7a44a); font-weight: 600; } .docs-hit-snippet { font-size: 13px; color: var(--muted); line-height: 1.5; } .docs-search mark, .docs-hit-snippet mark { background: rgba(215,164,74,.32); color: inherit; padding: 0 1px; border-radius: 2px; } /* In-page occurrence highlight + floating navigator */ mark.doc-hit { background: rgba(215,164,74,.30); color: inherit; padding: 0 1px; border-radius: 2px; } mark.doc-hit.current { background: var(--accent, #d7a44a); color: #201913; box-shadow: 0 0 0 2px rgba(215,164,74,.45); } .docs-hit-nav { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: #22252a; box-shadow: 0 18px 54px rgba(0,0,0,.4); } .docs-hit-nav .docs-hit-term { color: var(--muted); font-size: 13px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .docs-hit-nav .docs-hit-counter { color: var(--ink, #f0efeb); font-size: 13px; font-variant-numeric: tabular-nums; min-width: 46px; text-align: center; } .docs-hit-nav button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--control-line, #454a52); background: var(--control-bg, #1f2226); color: var(--ink, #f0efeb); cursor: pointer; font-size: 13px; } .docs-hit-nav button:hover { border-color: var(--accent, #d7a44a); } .docs-card { border: 1px solid var(--line); border-radius: 18px; background: #191b1f; padding: 18px; } .docs-card-header { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--line); } .docs-card-header span { color: var(--muted); font-size: 13px; } .docs-markdown { color: var(--paper); line-height: 1.65; } .docs-markdown > :first-child { margin-top: 0; } .docs-markdown h2, .docs-markdown h3, .docs-markdown h4 { letter-spacing: -.03em; margin: 22px 0 10px; } .docs-markdown p, .docs-markdown ul, .docs-markdown pre { margin: 0 0 14px; } .docs-markdown ul { padding-left: 22px; color: var(--muted); } .docs-markdown ol { padding-left: 22px; color: var(--muted); margin: 0 0 14px; } .docs-markdown li + li { margin-top: 6px; } .docs-markdown code { padding: 1px 6px; border-radius: 8px; background: rgba(255,255,255,.06); color: #f5d7b6; } .docs-markdown pre { overflow: auto; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: #101215; color: #f2e4d4; } .docs-markdown .docs-screenshot { display: block; width: min(100%, 980px); height: auto; margin: 10px 0 20px; border: 1px solid var(--line); border-radius: 14px; background: #f5f6f8; box-shadow: 0 12px 30px rgba(0,0,0,.18); } .docs-table-wrap { margin: 0 0 16px; } .docs-table { width: 100%; min-width: 720px; border-collapse: collapse; background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .docs-table th, .docs-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(255,255,255,.08); } .docs-table th { color: var(--paper); background: rgba(255,255,255,.04); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; } .docs-table td { color: var(--muted); } .docs-table tbody tr:last-child td { border-bottom: 0; } .docs-mermaid-wrap { overflow: auto; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); } .docs-markdown .mermaid { display: block; max-width: 100%; margin: 0 auto; background: transparent; color: var(--paper); } .section-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; } .section-tabs[data-tabs] { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 0; } .section-tabs[data-tabs] .tab-panel { min-width: 0; width: 100%; } .section-tabs-pages { position: sticky; top: 12px; z-index: 4; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: rgba(23,25,28,.94); backdrop-filter: blur(8px); } .cooperation-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .cooperation-header p { margin: 0; max-width: 72ch; } .cooperation-process-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 16px; } .cooperation-process-card { min-width: 0; } .cooperation-process-card.active { border-color: rgba(215, 134, 66, .62); box-shadow: 0 14px 44px rgba(215, 134, 66, .12); } .cooperation-process-card h2 { font-size: 17px; margin-bottom: 8px; } .cooperation-process-card .actions { margin-top: 12px; } .cooperation-process-card p { margin: 0 0 10px; } .cooperation-process-step { display: inline-flex; margin-bottom: 12px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .cooperation-stats .stat strong { font-size: 24px; } .cooperation-overview-panel .pricing-grid { margin-bottom: 14px; } .cooperation-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .cooperation-overview-grid .cooperation-card h3 { font-size: 18px; } .cooperation-overview-grid-tight { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card-topic { display: inline-block; margin-bottom: 10px; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; } .section-heading p { margin: 0; max-width: 76ch; } .cooperation-stack { display: grid; gap: 12px; } .cooperation-item { border: 1px solid var(--line); border-radius: 18px; background: #191b1f; overflow: hidden; } .cooperation-item summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; cursor: pointer; padding: 16px 18px; } .cooperation-item summary::-webkit-details-marker { display: none; } .cooperation-summary-main strong { display: block; letter-spacing: -.03em; } .cooperation-summary-main small { color: var(--muted); } .cooperation-summary-meta { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .cooperation-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 18px 18px; } .cooperation-card { border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.02); padding: 14px; } .cooperation-card h3 { font-size: 17px; } .cooperation-card-wide { grid-column: span 2; } .cooperation-card-full { grid-column: 1 / -1; } .cooperation-card p { margin: 0; } .cooperation-card p + p { margin-top: 10px; } .cooperation-form-block { padding: 0 18px 18px; } .cooperation-empty { border: 1px dashed var(--line); border-radius: 16px; padding: 18px; color: var(--muted); background: rgba(255,255,255,.02); } .inline-log { margin: 10px 0 0; max-height: 220px; overflow: auto; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: #101215; color: #f2e4d4; white-space: pre-wrap; } .cooperation-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .cooperation-mini-card { border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); padding: 12px; min-width: 0; } .cooperation-mini-card p { margin: 8px 0 0; } .cooperation-mini-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .cooperation-mini-head strong { line-height: 1.25; } .cooperation-meta-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .cooperation-inline-search { display: grid; gap: 10px; } @media (max-width: 860px) { .hero, .grid, .two, .form-grid, .pricing-grid, .area-hero, .area-grid { grid-template-columns: 1fr; } .topbar-inner { align-items: flex-start; flex-direction: column; } .center-alert, .center-alerts-header { grid-template-columns: 1fr; flex-direction: column; } .docs-header, .docs-card-header { flex-direction: column; align-items: flex-start; } .section-heading, .cooperation-item summary, .cooperation-detail-grid { grid-template-columns: 1fr; } .section-heading { display: grid; } .cooperation-header, .cooperation-process-grid, .cooperation-overview-grid, .cooperation-overview-grid-tight, .cooperation-mini-grid { grid-template-columns: 1fr; display: grid; } .area-hero-actions { justify-content: flex-start; } .cooperation-summary-meta { justify-content: flex-start; } .cooperation-card-wide { grid-column: span 1; } .cooperation-card-full { grid-column: span 1; } } /* Visible keyboard focus so the operator never loses their place */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Login (minimal layout) — centered card */ .login-shell { width: min(520px, calc(100vw - 32px)); min-height: 100vh; margin: 0 auto; display: grid; place-items: center; padding: 24px 0; } .login-card { width: min(420px, 100%); display: grid; gap: 14px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)), var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 26px; box-shadow: 0 22px 70px rgba(0,0,0,.28); } .login-card h1 { margin: 0; font-size: 22px; letter-spacing: -.03em; } .login-card p { margin: 0; color: var(--muted); line-height: 1.5; } .login-card button { margin-top: 4px; } .eyebrow { margin: 0; color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; } .login-version { font-size: 11px; color: #aeb4bd; } .login-version-alert { color: #ffd7d7; } .login-card .hint { font-size: 12px; border-top: 1px solid var(--line); padding-top: 12px; } .creator-shell { width: min(960px, calc(100vw - 32px)); margin: 0 auto; padding: 24px 0 46px; display: grid; gap: 16px; } .creator-shell.login-shell { min-height: 100vh; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: center; align-content: center; align-items: start; } .creator-card { width: 100%; max-width: 520px; } .creator-code-preview { display: grid; gap: 4px; padding: 12px; border-radius: 14px; border: 1px solid rgba(215,134,66,.45); background: rgba(215,134,66,.12); } .creator-code-preview code { font-size: 24px; letter-spacing: .12em; } .creator-code-preview small { color: var(--muted); } .creator-header { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; } .creator-logout { align-content: start; } /* Pager for paginated lists */ .pager { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; } .pager span { color: var(--muted); font-size: 13px; } @media (max-width: 860px) { .creator-shell.login-shell, .creator-header { grid-template-columns: 1fr; } } /* Single prominent "resume sale" action shown when a book is paused on author consent. */ .resume-sale-btn { display: inline-block; background: #2e7d32; color: #fff; border: 0; border-radius: 8px; padding: 10px 14px; font-weight: 700; font-size: 13px; line-height: 1.3; cursor: pointer; box-shadow: 0 2px 8px rgba(46, 125, 50, 0.35); } .resume-sale-btn:hover { background: #276b2b; } /* Section tabs — swap the main content of a detail view in place instead of a long one-pager, so each screen carries one coherent topic. Progressive enhancement: without JS every panel renders (nothing is hidden); the tabs JS adds .tabs-ready and hides the inactive panels. Deep-link #anchors activate the matching tab. */ .section-tabs-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .section-tabs-nav button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 6px; min-height: 32px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; color: var(--muted); font-weight: 600; line-height: 1.15; } .section-tabs-nav button:hover { color: var(--text); } .section-tabs-nav button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #1b120a; } .section-tabs-nav button[aria-selected="true"]:hover { color: #1b120a; } .section-tabs-nav .tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--panel-2); color: var(--muted); font-size: 11px; font-weight: 700; } .section-tabs-nav .tab-count.warn { background: rgba(215, 134, 66, .3); color: #ffe1bd; } .section-tabs-nav button[aria-selected="true"] .tab-count { background: rgba(27, 18, 10, .18); color: #1b120a; } .section-tabs.tabs-ready .tab-panel[hidden] { display: none; } .section-tabs .tab-panel > .panel:first-child, .section-tabs .tab-panel > section:first-child { margin-top: 0; } /* List views: keep the table the hero, push the summary into a slim left rail with small numbers instead of a row of oversized stat tiles that eat vertical space above the fold. */ .list-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 14px; align-items: start; } .list-layout > .panel { margin-top: 0; } .stat-rail { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; } .stat-rail .rail-title { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; } .stat-rail .rail-title + .rail-title { margin-top: 14px; } .stat-rail .rail-item { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .stat-rail .rail-item:last-child { border-bottom: 0; } .stat-rail .rail-item span { color: var(--muted); } .stat-rail .rail-item b { font-weight: 700; font-variant-numeric: tabular-nums; } @media (max-width: 860px) { .list-layout { grid-template-columns: 1fr; } } /* Screen header: title block on the left, actions on the right. Used by every configuration screen (drukarnie, oferty, paczki, słowniki) — before this the markup existed but had no styles, so the action buttons dropped under the heading in one grey undifferentiated pile. */ .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .panel-head > div { min-width: 0; } .panel-head h1, .panel-head h2, .panel-head h3 { margin: 0; } .panel-head .eyebrow + h1, .panel-head .eyebrow + h2 { margin-top: 3px; } .panel-head small.muted { display: block; margin-top: 6px; max-width: 68ch; line-height: 1.45; } .row-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } td.row-actions { justify-content: flex-end; flex-wrap: nowrap; white-space: nowrap; } /* Secondary navigation row for the print dictionaries: present but visually subordinate to the one primary action, instead of seven equal-weight buttons competing in the header. */ .toolbar-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 4px; padding-top: 12px; border-top: 1px solid var(--line); } .toolbar-links .toolbar-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 4px; } .chip { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; } .chip:hover { color: var(--text); border-color: rgba(215, 134, 66, .55); background: rgba(215, 134, 66, .1); } /* Register tables: readable rows with a hover target, muted second lines, and a coloured left edge for rows that need the operator's attention or are switched off. */ .data-table td { vertical-align: middle; } .data-table td small { display: inline-block; color: var(--muted); font-size: 12px; line-height: 1.4; } .data-table tbody tr { transition: background 120ms ease; } .data-table tbody tr:hover { background: rgba(255, 255, 255, .035); } .data-table tbody tr.needs-attention { background: rgba(213, 90, 90, .09); box-shadow: inset 3px 0 0 var(--danger); } .data-table tbody tr.needs-attention:hover { background: rgba(213, 90, 90, .14); } .data-table tbody tr.is-inactive { box-shadow: inset 3px 0 0 rgba(174, 180, 189, .45); } .data-table tbody tr.is-inactive td:not(.row-actions) { opacity: .55; } .data-table .num { font-variant-numeric: tabular-nums; } /* On a narrow screen scroll the register sideways instead of squeezing every column into two-word columns — .table-wrap already scrolls, the table just has to refuse to shrink below readable. */ @media (max-width: 1080px) { .table-wrap .data-table { min-width: 820px; } } /* Small status label used inside tables and detail grids (lighter than .badge). */ .pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 9px; background: var(--panel-2); color: var(--muted); font-size: 12px; font-weight: 700; } .pill.ok { color: #daf4e4; background: rgba(101, 182, 135, .22); } .pill.warn { color: #ffe1bd; background: rgba(215, 134, 66, .22); } .pill.danger { color: #ffd1d1; background: rgba(213, 90, 90, .22); } .pill.muted { color: var(--muted); background: var(--panel-2); } /* Inline explanation box (why a printer is off, what a mock profile means). */ .notice { margin: 12px 0 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); color: var(--muted); line-height: 1.5; font-size: 13px; } .notice strong { color: var(--text); } .notice.warn { border-color: rgba(215, 134, 66, .5); background: rgba(215, 134, 66, .12); color: #ffe1bd; } .notice.danger { border-color: rgba(213, 90, 90, .5); background: rgba(213, 90, 90, .12); color: #ffd1d1; } /* Button colours carry the meaning of the action: green switches something on, red switches it off, ghost is a secondary navigation action next to them. */ button.small, .button.small { padding: 6px 11px; font-size: 12px; } button.ghost, .button.ghost { background: transparent; color: var(--muted); } button.ghost:hover, .button.ghost:hover { color: var(--text); border-color: var(--muted); } button.ok, .button.ok { background: rgba(101, 182, 135, .18); border-color: rgba(101, 182, 135, .55); color: #cdeedb; font-weight: 700; } button.ok:hover, .button.ok:hover { background: rgba(101, 182, 135, .3); } button.danger, .button.danger { background: rgba(213, 90, 90, .16); border-color: rgba(213, 90, 90, .5); color: #ffd1d1; font-weight: 700; } button.danger:hover, .button.danger:hover { background: rgba(213, 90, 90, .28); } button[data-busy], .button[data-busy] { opacity: .6; cursor: progress; } button[data-toggle-failed] { border-color: var(--danger); color: #ffd1d1; } /* Confirmation that an inline toggle really saved: the re-rendered state pulses once. */ @keyframes nomad-state-flash { from { box-shadow: 0 0 0 0 rgba(215, 134, 66, .55); } to { box-shadow: 0 0 0 9px rgba(215, 134, 66, 0); } } .state-flash { animation: nomad-state-flash 620ms ease-out; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }