*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #F5F4F0; --surface: #ffffff; --card: #ffffff; --card-soft: #FAFAF8; --text: #1A1814; --muted: #7A746D; --muted-2: #9A948C; --accent: #FB5E2B; --accent-dark: #E04D1E; --accent-soft: rgba(251, 94, 43, .1); --border: #E2DFDA; --border-strong: #D2CEC7; --green: #166534; --green-bg: #F0FDF4; --red: #991B1B; --red-bg: #FEF2F2; --yellow: #A16207; --yellow-bg: #FEFCE8; --purple: #6D28D9; --purple-bg: #F5F3FF; --blue: #1D4ED8; --blue-bg: #EFF6FF; --shadow: 0 2px 16px rgba(26, 24, 20, .08); --radius: 12px; --radius-sm: 8px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } html { min-height: 100%; background: var(--bg); } body { min-height: 100vh; background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; } ::selection { background: rgba(251, 94, 43, .22); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } /* Navigation */ nav { position: sticky; top: 0; z-index: 100; min-height: 56px; padding: .7rem 1.5rem; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(26, 24, 20, .03); backdrop-filter: blur(10px); } nav .logo { margin-right: .8rem; color: var(--text); font-size: 1.05rem; font-weight: 900; letter-spacing: .04em; white-space: nowrap; } /* Логотип с двумя представлениями: default (текст) и magnus (SVG-знак + бренд). */ nav .logo .logo-magnus { display: none; } nav .logo .logo-default { display: inline; } body.theme-magnus .logo .logo-default { display: none; } body.theme-magnus .logo .logo-magnus { display: inline-flex; align-items: baseline; gap: 6px; } nav .tab { min-height: 34px; padding: .45rem .8rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--muted); cursor: pointer; font-size: .88rem; font-weight: 600; line-height: 1.15; user-select: none; transition: color .15s, background .15s, border-color .15s; } nav .tab:hover { color: var(--text); background: var(--card-soft); border-color: var(--border); } nav .tab.active { color: #fff; background: var(--accent); border-color: var(--accent); } nav .badge { margin-left: auto; color: var(--muted); font-size: .82rem; white-space: nowrap; } .subtab-strip { display: flex; gap: 6px; margin: -8px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .subtab-strip .subtab { appearance: none; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--muted); padding: .4rem .75rem; font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; transition: color .15s, background .15s, border-color .15s; } .subtab-strip .subtab:hover { color: var(--text); background: var(--card-soft); border-color: var(--border); } .subtab-strip .subtab.active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); } /* Скрывает admin-only элементы у обычных пользователей. Класс is-admin на ставится JS-инициализатором после ответа /api/me. */ body:not(.is-admin) .admin-only { display: none !important; } body:not(.is-super-admin) .super-admin-only { display: none !important; } .team-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; } .team-toolbar a.btn-outline { text-decoration: none; margin-left: auto; } .project-bar { width: min(100%, 1240px); margin: 12px auto 0; padding: 0 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; } .project-focus, .project-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .project-focus { min-width: 0; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 8px; background: var(--surface); padding: 8px 10px; box-shadow: var(--shadow); } .project-focus span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; } .project-focus select { flex: 1 1 280px; min-width: 220px; min-height: 34px; border-radius: 7px; font-weight: 700; } /* Layout */ main { width: min(100%, 1240px); margin: 0 auto; padding: 1.75rem 1.5rem 3rem; } .workflow-strip { width: min(100%, 1240px); margin: 14px auto 0; padding: 0 1.5rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .workflow-strip button { border: 1px solid var(--border); background: var(--card); border-radius: 10px; padding: 10px 12px; display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 8px; cursor: pointer; color: var(--text); text-align: left; box-shadow: var(--shadow); } .workflow-strip span { grid-row: 1 / span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--card-soft); color: var(--muted); font-weight: 800; font-size: 12px; } .workflow-strip b { font-size: 13px; } .workflow-strip small { color: var(--muted); font-size: 11px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .workflow-strip button.is-ok span { background: var(--green-bg); color: var(--green); } .workflow-strip button.is-warn span { background: var(--red-bg); color: var(--red); } .workflow-strip button.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(251, 94, 43, .12); } .guide-panel { width: min(100%, 1240px); margin: 12px auto 0; padding: 0 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; } .guide-copy { min-width: 0; border: 1px solid rgba(251, 94, 43, .22); border-left: 4px solid var(--accent); border-radius: 8px; background: #fff; padding: 12px 14px; box-shadow: var(--shadow); } .guide-kicker { display: inline-flex; margin-bottom: 3px; color: var(--accent); font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; } .guide-copy b { display: block; color: var(--text); font-size: 15px; line-height: 1.3; } .guide-copy p { margin-top: 4px; max-width: 900px; font-size: 13px; line-height: 1.45; } .guide-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; } .section-lead { color: var(--muted); font-size: 14px; margin: -8px 0 18px; max-width: 780px; line-height: 1.5; } .guide-card { margin: -4px 0 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-soft); } .guide-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .guide-card b { display: block; color: var(--text); font-size: 13px; font-weight: 900; line-height: 1.3; margin-bottom: 4px; } .guide-card p { font-size: 13px; line-height: 1.45; } .action-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); gap: 14px; align-items: center; } .action-panel h3, .action-panel p { margin: 0; } .action-panel p, .helper-text { color: var(--muted); font-size: 13px; line-height: 1.45; } .action-panel .validation-summary { grid-column: 1 / -1; } .action-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .quick-action-grid, .scenario-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } .scenario-grid { margin-top: -4px; } .quick-action { min-height: 92px; padding: 12px; display: grid; align-content: start; gap: 5px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-soft); color: var(--text); text-align: left; white-space: normal; } .quick-action:hover:not(:disabled) { border-color: var(--accent); background: #fff; color: var(--text); box-shadow: 0 0 0 3px rgba(251, 94, 43, .1); } .quick-action b { font-size: 13px; line-height: 1.25; } .quick-action span { color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.35; } .inline-advanced { margin-top: 12px; padding: 12px; box-shadow: none; } .advanced-toolbar, .generate-extra-grid { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; } .generate-extra-grid { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(160px, auto)); } .helper-text { margin-top: 8px; } .inline-label { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } .advanced-panel > summary { cursor: pointer; color: var(--text); font-weight: 800; list-style-position: inside; } .advanced-panel > summary + * { margin-top: 14px; } .section { display: none; } .section.active { display: block; } h2 { margin-bottom: 1rem; color: var(--text); font-size: 1.35rem; font-weight: 800; line-height: 1.2; letter-spacing: 0; } h3 { margin-bottom: .75rem; color: var(--text); font-size: .84rem; font-weight: 800; letter-spacing: .08em; line-height: 1.25; text-transform: uppercase; } p { color: var(--muted); } code { padding: .08em .35em; border-radius: 4px; background: #F0EEEA; color: var(--text); font-family: var(--mono); font-size: .92em; } .card, .gen-card { margin-bottom: 1rem; padding: 1.15rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .row { display: flex; gap: .75rem; align-items: flex-start; flex-wrap: wrap; } .row.center { align-items: center; } /* Form controls */ input[type=text], input[type=url], input[type=email], input[type=number], input[type=password], textarea, select { width: 100%; min-width: 0; padding: .65rem .85rem; border: 1px solid var(--border); border-radius: 7px; background: var(--card-soft); color: var(--text); font: inherit; outline: none; transition: border-color .15s, background .15s, box-shadow .15s; } input[type=text], input[type=url], input[type=email], input[type=number], input[type=password] { flex: 1 1 220px; } input:focus, textarea:focus, select:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(251, 94, 43, .12); } input::placeholder, textarea::placeholder { color: var(--muted-2); } textarea { resize: vertical; min-height: 88px; font-family: var(--mono); font-size: .9rem; } select { cursor: pointer; } input[type=checkbox], input[type=radio] { accent-color: var(--accent); } button { min-height: 36px; padding: .62rem 1.05rem; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: .9rem; font-weight: 700; line-height: 1.1; white-space: nowrap; transition: background .15s, color .15s, border-color .15s, opacity .15s; } button:hover:not(:disabled) { text-decoration: none; } button:disabled { opacity: .45; cursor: not-allowed; } .btn-primary, .btn-success, .btn-purple { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover:not(:disabled), .btn-success:hover:not(:disabled), .btn-purple:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); } .btn-danger { background: var(--red); border-color: var(--red); color: #fff; } .btn-outline { background: transparent; border-color: var(--border-strong); color: var(--text); } .btn-outline:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-sm { min-height: 30px; padding: .42rem .7rem; font-size: .78rem; } /* Status pills */ .pill { display: inline-flex; align-items: center; min-height: 24px; padding: .2rem .65rem; border-radius: 999px; border: 1px solid transparent; font-size: .78rem; font-weight: 700; line-height: 1.1; } .pill-green { background: var(--green-bg); border-color: #86EFAC; color: var(--green); } .pill-blue { background: var(--blue-bg); border-color: #BFDBFE; color: var(--blue); } .pill-yellow { background: var(--yellow-bg); border-color: #FDE68A; color: var(--yellow); } .pill-red { background: var(--red-bg); border-color: #FCA5A5; color: var(--red); } .pill-purple { background: var(--purple-bg); border-color: #DDD6FE; color: var(--purple); } /* Source */ .source-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-top: .85rem; } .kpi { min-height: 78px; padding: .85rem; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-soft); text-align: center; } .kpi .val { color: var(--accent); font-size: 1.75rem; font-weight: 900; line-height: 1; } .kpi .lbl { margin-top: .3rem; color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .drop-zone { margin-top: .8rem; padding: 1.25rem; border: 2px dashed var(--border-strong); border-radius: var(--radius); background: var(--card-soft); color: var(--muted); cursor: pointer; font-size: .9rem; text-align: center; transition: border-color .2s, color .2s, background .2s; } .drop-zone:hover, .drop-zone.drag-over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); } /* Tables */ .table-wrap { max-height: 520px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } table { width: 100%; border-collapse: collapse; } #varTable, #offerAttrTable, #rulesTable { min-width: 760px; font-size: .86rem; } #varTable th, #offerAttrTable th, #rulesTable th { position: sticky; top: 0; z-index: 1; padding: .62rem .7rem; background: #F0EEEA; border-bottom: 1px solid var(--border); color: var(--muted); font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-align: left; text-transform: uppercase; } #varTable td, #offerAttrTable td, #rulesTable td { padding: .52rem .7rem; border-bottom: 1px solid #EEEAE4; color: var(--text); vertical-align: middle; } #varTable tbody tr:nth-child(even) td, #offerAttrTable tbody tr:nth-child(even) td, #rulesTable tbody tr:nth-child(even) td { background: #FDFCF9; } #varTable tr:hover td, #offerAttrTable tr:hover td, #rulesTable tr:hover td { background: rgba(251, 94, 43, .06); } #varTable .type-badge, .rule-badge { display: inline-flex; align-items: center; min-height: 22px; padding: .16rem .48rem; border-radius: 999px; font-size: .72rem; font-weight: 800; line-height: 1; } #varTable .type-badge { background: var(--purple-bg); color: var(--purple); } #varTable .type-badge.elem { background: var(--green-bg); color: var(--green); } #varTable .sample, .file-row .name { font-family: var(--mono); } #varTable .sample { display: block; max-width: 220px; overflow: hidden; color: var(--muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; } .field-setting-list { display: flex; flex-wrap: wrap; gap: 6px; } .field-chip, .field-state { display: inline-flex; align-items: center; min-height: 22px; max-width: 100%; border-radius: 999px; padding: .16rem .5rem; font-size: .72rem; font-weight: 800; line-height: 1.1; } .field-chip { background: var(--card-soft); border: 1px solid var(--border); color: var(--muted); } .field-chip.accent { background: var(--accent-soft); border-color: rgba(251, 94, 43, .28); color: var(--accent-dark); } .field-state.ok { background: var(--green-bg); color: var(--green); } .field-state.muted { background: var(--card-soft); border: 1px solid var(--border); color: var(--muted); } .field-state.danger { background: rgba(209, 59, 59, .1); color: var(--red); } #varTable input.rename, #varTable input.unit, #offerAttrTable input[type=text], #offerAttrTable select { min-height: 30px; padding: .36rem .55rem; border-radius: 6px; font-family: var(--mono); font-size: .78rem; } #varTable input[type=checkbox], #offerAttrTable input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; } #varTable tr.deleted td { opacity: .38; } #varTable tr.disabled td, #offerAttrTable tr.oa-disabled td { opacity: .55; } #varTable tr.disabled td { font-style: italic; } #offerAttrTable .btn-del { min-height: 28px; padding: .25rem .45rem; background: transparent; border: 1px solid transparent; color: var(--red); font-size: 1rem; } #offerAttrTable .btn-del:hover { background: var(--red-bg); border-color: #FCA5A5; } .rule-filter { background: var(--red-bg); color: var(--red); } .rule-transform { background: var(--blue-bg); color: var(--blue); } .rule-template { background: var(--purple-bg); color: var(--purple); } .rule-computed { background: var(--green-bg); color: var(--green); } .var-toolbar, .rules-toolbar, .gen-options, .filter-bar { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; } .var-toolbar, .rules-toolbar { margin-bottom: .9rem; } .var-toolbar .search { flex: 1 1 240px; } .rule-command-box { border: 1px solid var(--border); border-radius: 8px; background: var(--card-soft); padding: 10px; margin-bottom: 12px; } .rule-command-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; } .rule-command-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; } .rule-command-chip { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer; padding: 7px 9px; text-align: left; transition: border-color .15s, background .15s, color .15s; } .rule-command-chip:hover { border-color: var(--accent); background: #FFF7F2; } .rule-command-chip b, .rule-command-chip span { display: block; } .rule-command-chip b { font-size: 12px; line-height: 1.2; } .rule-command-chip span { margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.25; } .rule-block-list { display: flex; flex-direction: column; gap: 10px; max-height: 620px; overflow: auto; } .rule-block { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: stretch; border: 1px solid var(--border); border-left: 4px solid var(--blue); border-radius: 8px; background: var(--surface); padding: 10px; box-shadow: 0 1px 8px rgba(26, 24, 20, .04); } .rule-block.rule-kind-filter { border-left-color: var(--red); } .rule-block.rule-kind-template { border-left-color: var(--purple); } .rule-block.rule-kind-computed { border-left-color: var(--green); } .rule-block.is-disabled { opacity: .52; } .rule-block.is-dragging { opacity: .62; box-shadow: 0 0 0 3px rgba(251, 94, 43, .15); } .rule-block.drop-before::before, .rule-block.drop-after::after { content: ""; position: absolute; left: 8px; right: 8px; height: 3px; border-radius: 999px; background: var(--accent); } .rule-block.drop-before::before { top: -7px; } .rule-block.drop-after::after { bottom: -7px; } .rule-drag { width: 28px; min-height: 100%; border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--card-soft); color: var(--muted); cursor: grab; font-weight: 900; letter-spacing: 0; } .rule-drag:active { cursor: grabbing; } .rule-block-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; } .rule-block-top { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } .rule-block-top strong { min-width: 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.25; } .rule-order { min-width: 24px; height: 24px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 999px; background: var(--card-soft); color: var(--muted); font-size: 11px; font-weight: 900; } .rule-block-flow { display: flex; flex-wrap: wrap; gap: 6px; } .rule-block-flow span { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; max-width: 100%; border: 1px solid var(--border); border-radius: 8px; background: var(--card-soft); padding: 4px 7px; color: var(--muted); font-size: 12px; line-height: 1.25; } .rule-block-flow b { color: var(--text); font-size: 11px; } .rule-block-flow code { max-width: 260px; overflow: hidden; color: var(--accent-dark); font: 11px var(--mono); text-overflow: ellipsis; white-space: nowrap; } .rule-block-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } .rule-toggle { display: inline-flex; gap: 5px; align-items: center; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 700; } /* Generate */ .gen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; } .gen-card { display: flex; flex-direction: column; } .gen-card h3 { margin-bottom: .35rem; color: var(--text); font-size: 1rem; letter-spacing: 0; text-transform: none; } .gen-card p { margin-bottom: .8rem; font-size: .86rem; } .gen-options { margin: .55rem 0 .75rem; } .gen-options label { display: inline-flex; align-items: center; gap: .32rem; color: var(--muted); cursor: pointer; font-size: .82rem; font-weight: 600; } .gen-sep { color: var(--border-strong); user-select: none; } select.cat-select { height: 124px; margin-bottom: .55rem; font-family: var(--mono); font-size: .8rem; } select.cat-select option { padding: .2rem .3rem; } .category-head, .category-actions { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .category-head { margin-bottom: 7px; } .category-head .field-label { margin: 0; } #genCategoryCount { color: var(--muted); font-size: 12px; font-weight: 700; } .category-actions { justify-content: flex-start; margin-bottom: 8px; } .category-search { min-height: 34px; margin-bottom: 8px; padding: .45rem .65rem; font-size: 13px; } .category-picker { height: 250px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-soft); padding: 6px; } .category-check { min-height: 30px; display: flex; gap: 8px; align-items: center; border-radius: 7px; padding: 5px 7px; color: var(--text); cursor: pointer; font-size: 13px; } .category-check:hover { background: rgba(251, 94, 43, .08); } .category-check input { flex: 0 0 auto; } .category-check .cat-id { color: var(--muted); font-family: var(--mono); font-size: 11px; } .log-box { min-height: 74px; max-height: 220px; margin-top: .75rem; padding: .75rem .85rem; overflow-y: auto; border: 1px solid #21262D; border-radius: var(--radius-sm); background: #0E1116; color: #B7BDC7; font: .78rem/1.55 var(--mono); white-space: pre-wrap; word-break: break-word; } /* Output and templates */ .file-list, .tmpl-list { display: flex; flex-direction: column; gap: .55rem; } .file-row, .tmpl-row { display: flex; gap: .75rem; align-items: center; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: 0 1px 8px rgba(26, 24, 20, .04); } .file-row .name, .tmpl-row .tmpl-name { flex: 1 1 auto; min-width: 160px; color: var(--text); } .file-row .name { overflow: hidden; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; } .file-row .meta, .tmpl-row .tmpl-meta, .tmpl-row .tmpl-desc { color: var(--muted); font-size: .8rem; } .file-row .meta, .tmpl-row .tmpl-meta { white-space: nowrap; } .tmpl-row .tmpl-name { font-weight: 800; } .tmpl-row .tmpl-desc { flex: 2 1 220px; } .filter-bar { margin-bottom: 0; } .filter-bar button.active, .output-subtab.active { background: var(--accent); border-color: var(--accent); color: #fff; } /* Settings */ .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .field-group { margin-bottom: .9rem; } label.field-label { display: block; margin-bottom: .35rem; color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } textarea.setting { min-height: 74px; } /* Modal and toast */ .modal-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(26, 24, 20, .58); } .modal-overlay.hidden { display: none; } .modal-box { width: min(92vw, 680px); min-width: min(380px, 92vw); max-height: 86vh; overflow-y: auto; padding: 1.35rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 24px 70px rgba(26, 24, 20, .22); } .modal-box h3 { margin-bottom: 1rem; font-size: 1.05rem; letter-spacing: 0; text-transform: none; } .modal-lead { margin: -4px 0 14px; color: var(--muted); font-size: 13px; line-height: 1.45; } .modal-grid-2, .rule-simple-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .field-help { display: block; color: var(--muted); font-size: 11px; line-height: 1.35; } .field-readonly { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 14px; } .field-readonly div { border: 1px solid var(--border); border-radius: 8px; background: var(--card-soft); padding: 8px 10px; } .field-readonly span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; } .field-readonly b { display: block; overflow-wrap: anywhere; color: var(--text); font-size: 13px; } .modal-check { display: flex; gap: 9px; align-items: flex-start; border: 1px solid var(--border); border-radius: 8px; background: var(--card-soft); padding: 9px 10px; margin-top: 8px; color: var(--text); font-size: 13px; line-height: 1.35; } .modal-check input { margin-top: 2px; } .modal-check.danger { border-color: rgba(209, 59, 59, .26); background: rgba(209, 59, 59, .06); } .glossary-modal { width: min(92vw, 560px); } .glossary-list { display: grid; gap: 8px; } .glossary-list div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-soft); padding: 9px 10px; } .glossary-list b { color: var(--text); font-size: 13px; } .glossary-list span { color: var(--muted); font-size: 13px; line-height: 1.4; } .status-detail { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-soft); padding: 9px 10px; margin-bottom: 8px; } .status-detail b { color: var(--text); font-size: 13px; } .status-detail span { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; } .check-list { display: grid; gap: 7px; margin-top: 12px; } .check-list div { position: relative; border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 9px 10px 9px 30px; color: var(--text); font-size: 13px; line-height: 1.4; } .check-list div::before { content: ""; position: absolute; left: 11px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .log-advice { display: grid; gap: 7px; border: 1px solid rgba(251, 94, 43, .24); border-left: 4px solid var(--accent); border-radius: 8px; background: var(--card-soft); padding: 10px 12px; margin-bottom: 12px; } .log-advice b { color: var(--text); font-size: 13px; } .log-advice span { color: var(--muted); font-size: 12px; line-height: 1.35; } .modal-footer { display: flex; justify-content: flex-end; gap: .55rem; margin-top: 1.2rem; flex-wrap: wrap; } #toast { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 9999; max-width: min(520px, calc(100vw - 32px)); padding: .75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-size: .9rem; line-height: 1.4; opacity: 0; pointer-events: none; transition: opacity .3s; } #toast.show { opacity: 1; } /* Scrollbars */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #D2CEC7; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--muted-2); } /* Responsive */ @media (max-width: 900px) { nav { align-items: flex-start; } nav .badge { margin-left: 0; } .file-row, .tmpl-row { align-items: flex-start; flex-wrap: wrap; } } @media (max-width: 640px) { nav { padding: .65rem 1rem; } nav .logo { width: 100%; margin-right: 0; } nav .tab { flex: 1 1 135px; padding: .45rem .5rem; } .workflow-strip { grid-template-columns: 1fr 1fr; padding: 0 1rem; } .project-bar { grid-template-columns: 1fr; padding: 0 1rem; } .guide-panel { grid-template-columns: 1fr; padding: 0 1rem; } .guide-actions { justify-content: flex-start; } .action-panel, .action-controls, .quick-action-grid, .scenario-grid, .generate-extra-grid, .modal-grid-2, .rule-simple-grid { grid-template-columns: 1fr; } .guide-card-grid, .glossary-list div, .status-detail { grid-template-columns: 1fr; } main { padding: 1.25rem 1rem 2.5rem; } .card, .gen-card { padding: 1rem; } .settings-grid, .gen-grid { grid-template-columns: 1fr; } button { white-space: normal; } .modal-box { min-width: 0; } } /* Feed validation and profile-driven generation */ .validation-card { padding: 14px; } .field-tools-card { padding: 14px; } .field-tools-layout { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 14px; align-items: start; } .field-tools-summary { color: var(--muted); font-size: 13px; line-height: 1.45; } .field-tools-list { display: flex; flex-direction: column; gap: 7px; } .field-tool-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--card-soft); padding: 8px 10px; } .field-tool-row b { display: block; overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .field-tool-row small { color: var(--muted); font-size: 12px; } .formula-builder { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; } .formula-copy { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .formula-copy b { color: var(--text); font-size: 14px; } .formula-copy span { color: var(--muted); font-size: 13px; line-height: 1.45; } .formula-grid { display: grid; grid-template-columns: minmax(170px, .8fr) minmax(220px, 1.4fr) minmax(190px, auto) auto; gap: 10px; align-items: end; } .formula-switch { align-self: center; margin-bottom: 8px; } .formula-tokens { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; } .validation-toolbar, .generate-topbar, .automation-defaults, .generate-actions, .panel-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .panel-head { justify-content: space-between; margin-bottom: 12px; } .panel-head h3 { margin: 0; } .validation-summary { color: var(--muted); font-size: 13px; } .validation-summary.has-errors { color: var(--red); font-weight: 700; } .validation-summary.has-warnings { color: var(--yellow); font-weight: 700; } .validation-summary.is-ok { color: var(--green); font-weight: 700; } #varTable tr.has-var-error { background: color-mix(in srgb, var(--red) 10%, transparent); } #varTable tr.has-var-warning { background: color-mix(in srgb, var(--yellow) 12%, transparent); } .issue-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 999px; font-size: 11px; font-weight: 800; margin-left: 6px; } .issue-badge.err { color: #fff; background: var(--red); } .issue-badge.warn { color: var(--text); background: var(--yellow); } .rules-workspace, .generate-layout, .automation-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; } .generate-layout { grid-template-columns: minmax(0, 1fr) 320px; } .generate-builder { display: grid; grid-template-columns: 220px minmax(0, 1fr) 280px; gap: 14px; margin-top: 14px; } .template-editor { min-height: 250px; resize: vertical; font-family: var(--mono); } .param-panel, .validation-side { min-width: 0; } .quick-fix-panel { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-soft); padding: 10px; margin-bottom: 12px; } .quick-fix-head { display: flex; gap: 8px; align-items: center; justify-content: space-between; } .quick-fix-head b { color: var(--text); font-size: 13px; } .quick-fix-note { color: var(--muted); font-size: 12px; line-height: 1.35; } .quick-fix-actions { display: grid; grid-template-columns: 1fr; gap: 7px; } .quick-fix-actions .btn-sm, .quick-fix-grid .btn-sm, .quick-fix-details .btn-sm { width: 100%; justify-content: center; } .quick-fix-details { border-top: 1px solid var(--border); padding-top: 8px; } .quick-fix-details summary { cursor: pointer; color: var(--text); font-size: 13px; font-weight: 700; margin-bottom: 8px; } .quick-fix-grid { display: grid; grid-template-columns: 1fr; gap: 7px; } .quick-fix-details textarea { min-height: 86px; resize: vertical; font-family: var(--mono); margin-bottom: 8px; } .quick-fix-switch { margin: 2px 0 8px; } .param-list, .issue-list { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow: auto; } .param-chip { border: 1px solid var(--border); background: var(--card-soft); color: var(--text); border-radius: 8px; padding: 7px 9px; text-align: left; cursor: pointer; font-size: 12px; } .param-chip:hover { border-color: var(--accent); color: var(--accent); } .issue-card { border: 1px solid var(--border); border-left: 4px solid var(--muted); background: var(--card-soft); border-radius: 8px; padding: 10px; } .issue-card.error { border-left-color: var(--red); } .issue-card.warning { border-left-color: var(--yellow); } .issue-card.info { border-left-color: var(--accent); } .issue-top { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 6px; } .issue-sev { text-transform: uppercase; font-size: 10px; font-weight: 800; color: var(--muted); } .issue-msg { font-size: 12px; line-height: 1.4; } .issue-meta, .empty-note { color: var(--muted); font-size: 12px; line-height: 1.4; margin-top: 6px; } .switch-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text); font-size: 13px; } .switch-label input { display: none; } .switch-label span { width: 38px; height: 22px; border-radius: 999px; background: var(--border); position: relative; transition: .18s ease; } .switch-label span::after { content: ""; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); transition: .18s ease; } .switch-label input:checked + span { background: var(--accent); } .switch-label input:checked + span::after { transform: translateX(16px); } @media (max-width: 1040px) { .rules-workspace, .generate-layout, .automation-grid, .generate-builder, .field-tools-layout, .formula-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .rule-command-row, .rule-block { grid-template-columns: 1fr; } .rule-drag { width: 100%; min-height: 28px; } .rule-block-actions { flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; } .rule-block-flow code { max-width: min(68vw, 260px); } }