/* * ios-layer.css — additive iOS / iPadOS productivity-tool aesthetic. * * Loaded AFTER tri-web-surface.css (last in ). Uses the `--ios-*` * namespace so it never collides with the existing `--jyb-*` tokens, and * applies to opt-in pages by adding the `.ios-page` wrapper class to the * route template's outer element. Pages that don't carry `.ios-page` are * unchanged. * * Scope: P1 ships restored #/generator and #/references first; remaining * routes will adopt `.ios-page` in P2. */ :root { /* 3-tier background (system → grouped → elevated panel) */ --ios-bg-system: #f2f2f7; --ios-bg-grouped: #efeff4; --ios-bg-elevated: #ffffff; --ios-bg-translucent: rgba(255, 255, 255, 0.72); /* Separators */ --ios-sep: rgba(60, 60, 67, 0.12); --ios-sep-opaque: #d8d8dc; /* Text (HIG label / secondary / tertiary) */ --ios-text: #1c1c1e; --ios-text-2: #3c3c43; --ios-text-3: rgba(60, 60, 67, 0.6); /* Accent — gold demoted to small accent role only */ --ios-accent: var(--jyb-gold-ink, #c9a25e); --ios-accent-soft: rgba(201, 162, 94, 0.12); --ios-accent-strong: var(--jyb-gold, #b58739); --ios-danger: #ff3b30; --ios-success: #34c759; --ios-warn: #ff9500; /* Corner radii (restrained, max 14) */ --ios-r-xs: 6px; --ios-r-sm: 8px; --ios-r-md: 10px; --ios-r-lg: 14px; /* Spacing scale (8-base) */ --ios-s-1: 8px; --ios-s-2: 12px; --ios-s-3: 16px; --ios-s-4: 20px; --ios-s-5: 24px; --ios-s-6: 32px; /* Shadows */ --ios-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04); --ios-shadow-2: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04); --ios-shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.18); /* Typography */ --ios-t-cap: 12px; --ios-t-body: 14px; --ios-t-title: 17px; --ios-t-h: 22px; } /* ── Page wrapper: opts a route into the iOS aesthetic ─────────────── */ .ios-page { background: var(--ios-bg-system); padding: var(--ios-s-3); color: var(--ios-text); min-height: 100%; } .ios-page .jyb-route-h1 { font-size: var(--ios-t-h); font-weight: 600; color: var(--ios-text); margin: 0 0 6px; letter-spacing: -0.01em; } .ios-page .jyb-route-sub { font-size: var(--ios-t-cap); color: var(--ios-text-3); margin: 0 0 var(--ios-s-3); } /* Single-level cards — neutralize JYB nested look without removing class. * Use transparent border (not border:0) so any focus ring driven by border * upstream still has a place to render. */ .ios-page .jyb-card, .ios-page .jyb-card--padded { background: var(--ios-bg-elevated); border-color: transparent; border-radius: var(--ios-r-lg); box-shadow: var(--ios-shadow-2); padding: var(--ios-s-4); } .ios-page .jyb-card .jyb-card, .ios-page .jyb-card .jyb-card--padded { /* Defeat nesting: inner "card" downgrades to a flat panel. */ background: transparent; box-shadow: none; padding: 0; border-radius: 0; } .ios-page .jyb-empty { background: transparent; border: 0; box-shadow: none; color: var(--ios-text-3); padding: var(--ios-s-6) var(--ios-s-4); } .ios-page .jyb-form-field__label { color: var(--ios-text-2); font-size: var(--ios-t-cap); font-weight: 600; text-transform: none; letter-spacing: 0; } .ios-page .jyb-form-field__input, .ios-page .jyb-form-field__select, .ios-page .jyb-form-field__textarea { background: var(--ios-bg-elevated); border: 1px solid var(--ios-sep-opaque); border-radius: var(--ios-r-sm); color: var(--ios-text); font-size: var(--ios-t-body); min-height: 36px; padding: 8px 12px; transition: border-color 160ms cubic-bezier(0.32, 0.72, 0, 1); } .ios-page .jyb-form-field__input:focus, .ios-page .jyb-form-field__select:focus, .ios-page .jyb-form-field__textarea:focus { outline: none; border-color: var(--ios-accent); box-shadow: 0 0 0 3px var(--ios-accent-soft); } .ios-page .jyb-form-field__help { color: var(--ios-text-3); font-size: var(--ios-t-cap); } /* ── ios-panel ─────────────────────────────────────────────────────── */ .ios-panel { background: var(--ios-bg-elevated); border: 1px solid var(--ios-sep); border-radius: var(--ios-r-md); box-shadow: var(--ios-shadow-1); padding: var(--ios-s-3); } /* ── ios-card (single-level, replaces nested .jyb-card on opt-in) ──── */ .ios-card { background: var(--ios-bg-elevated); border-radius: var(--ios-r-lg); box-shadow: var(--ios-shadow-2); padding: var(--ios-s-4); border: 0; } /* ── ios-segmented (segmented control) ─────────────────────────────── */ .ios-segmented { display: inline-flex; background: var(--ios-bg-grouped); border-radius: var(--ios-r-sm); padding: 2px; gap: 2px; } .ios-segmented > * { appearance: none; -webkit-appearance: none; min-height: 32px; padding: 0 12px; border-radius: 6px; background: transparent; border: 0; color: var(--ios-text-2); font-weight: 500; font-size: var(--ios-t-body); cursor: pointer; transition: background-color 160ms cubic-bezier(0.32, 0.72, 0, 1); } .ios-segmented > .is-active, .ios-segmented > [aria-selected="true"] { background: var(--ios-bg-elevated); box-shadow: var(--ios-shadow-1); color: var(--ios-text); } /* ── ios-pill (compact filter) ─────────────────────────────────────── */ .ios-pill { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 12px; background: var(--ios-bg-grouped); color: var(--ios-text-2); border-radius: 9999px; font-size: 13px; border: 0; cursor: pointer; transition: background-color 160ms cubic-bezier(0.32, 0.72, 0, 1); } .ios-pill.is-active { background: var(--ios-accent-soft); color: var(--ios-accent-strong); font-weight: 500; } /* ── ios-toolbar (sticky glass top row) ────────────────────────────── */ .ios-toolbar { display: flex; align-items: center; gap: var(--ios-s-2); padding: var(--ios-s-2) var(--ios-s-3); background: var(--ios-bg-translucent); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px); border-bottom: 1px solid var(--ios-sep); border-radius: var(--ios-r-md) var(--ios-r-md) 0 0; flex-wrap: wrap; } .ios-toolbar__title { font-size: var(--ios-t-title); font-weight: 600; color: var(--ios-text); margin-right: auto; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ios-toolbar { background: var(--ios-bg-elevated); } } /* ── ios-list-row (settings-style row) ─────────────────────────────── */ .ios-list-row { display: flex; align-items: center; gap: var(--ios-s-2); min-height: 44px; padding: 8px var(--ios-s-3); border-bottom: 1px solid var(--ios-sep); background: var(--ios-bg-elevated); } .ios-list-row:last-child { border-bottom: 0; } .ios-list-row__label { flex: 1; color: var(--ios-text); font-size: var(--ios-t-body); } .ios-list-row__value { color: var(--ios-text-3); font-size: var(--ios-t-cap); } /* ── ios-empty (calm empty state) ──────────────────────────────────── */ .ios-empty { text-align: center; padding: var(--ios-s-6) var(--ios-s-4); color: var(--ios-text-3); background: transparent; border: 0; box-shadow: none; } /* ── Page-specific composition (#/generator + #/references) ────────── */ /* Generator: at >=1280px the page must NOT leave large blank lower-right. * Strategy: split layout becomes a stretched two-column workbench filling * available viewport height. Right column carries 3 always-visible cards * (result / version stack / quick-start), left column anchors the form * card on top + an engine-status strip below so neither column is short. */ .ios-page.gen-page { display: flex; flex-direction: column; min-height: calc(100vh - 56px); } .ios-page.gen-page > .gen-layout--split { flex: 1; display: grid; grid-template-columns: minmax(360px, 0.8fr) minmax(360px, 1.2fr); gap: var(--ios-s-3); align-items: stretch; } .ios-page.gen-page .gen-col { display: flex; flex-direction: column; gap: var(--ios-s-3); min-height: 0; } .ios-page.gen-page .gen-col--left { gap: var(--ios-s-3); } .ios-page.gen-page .gen-col--right { gap: var(--ios-s-3); } .ios-page.gen-page .gen-card--form { flex: 1; } .ios-page.gen-page .gen-card--result { flex: 1; min-height: 220px; display: flex; flex-direction: column; } .ios-page.gen-page .gen-card--versions { flex: 1; min-height: 200px; display: flex; flex-direction: column; } .ios-page.gen-page .gen-card--quick { flex: 1; min-height: 220px; } .ios-page.gen-page .gen-card__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--ios-s-2); gap: var(--ios-s-2); } .ios-page.gen-page .gen-card__title { font-size: var(--ios-t-title); font-weight: 600; color: var(--ios-text); } .ios-page.gen-page .gen-card__hint { font-size: var(--ios-t-cap); color: var(--ios-text-3); } .ios-page.gen-page .gen-result { flex: 1; background: var(--ios-bg-grouped); border-radius: var(--ios-r-md); padding: var(--ios-s-3); font-size: var(--ios-t-body); color: var(--ios-text); white-space: pre-wrap; word-break: break-word; overflow-y: auto; min-height: 140px; } .ios-page.gen-page .gen-version-stack { display: flex; flex-direction: column; gap: var(--ios-s-2); flex: 1; overflow-y: auto; } .ios-page.gen-page .gen-version-empty { padding: var(--ios-s-3); background: var(--ios-bg-grouped); border-radius: var(--ios-r-md); color: var(--ios-text-3); font-size: var(--ios-t-cap); text-align: center; } .ios-page.gen-page .gen-version { background: var(--ios-bg-grouped); border-radius: var(--ios-r-md); padding: var(--ios-s-2); } .ios-page.gen-page .gen-version__head { display: flex; justify-content: space-between; align-items: center; font-size: var(--ios-t-cap); color: var(--ios-text-3); margin-bottom: 4px; gap: var(--ios-s-1); } .ios-page.gen-page .gen-version__head + div { font-size: 13px; color: var(--ios-text); white-space: pre-wrap; word-break: break-word; } .ios-page.gen-page .gen-quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--ios-s-1); } .ios-page.gen-page .gen-quick-chip { appearance: none; -webkit-appearance: none; text-align: left; padding: 10px 12px; border-radius: var(--ios-r-md); border: 1px solid var(--ios-sep); background: var(--ios-bg-elevated); color: var(--ios-text); cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: background-color 160ms cubic-bezier(0.32, 0.72, 0, 1), border-color 160ms; min-height: 56px; } .ios-page.gen-page .gen-quick-chip:hover { background: var(--ios-accent-soft); border-color: var(--ios-accent); } .ios-page.gen-page .gen-quick-chip__label { font-size: 13px; font-weight: 600; color: var(--ios-text); } .ios-page.gen-page .gen-quick-chip__hint { font-size: var(--ios-t-cap); color: var(--ios-text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ios-page.gen-page .gen-engine-strip { background: var(--ios-bg-elevated); border-radius: var(--ios-r-md); padding: var(--ios-s-2) var(--ios-s-3); border: 1px solid var(--ios-sep); box-shadow: var(--ios-shadow-1); } .ios-page.gen-page .gen-engine-strip__row { display: flex; flex-wrap: wrap; gap: var(--ios-s-2); align-items: center; font-size: var(--ios-t-cap); color: var(--ios-text-2); } .ios-page.gen-page .gen-engine-strip__pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9999px; background: var(--ios-bg-grouped); color: var(--ios-text); font-weight: 500; } .ios-page.gen-page .gen-engine-strip__pill.is-ok { background: rgba(52, 199, 89, 0.10); color: #166534; } .ios-page.gen-page .gen-engine-strip__pill.is-warn { background: rgba(255, 149, 0, 0.10); color: #92400e; } .ios-page.gen-page .gen-engine-strip__pill.is-err { background: rgba(255, 59, 48, 0.10); color: #991b1b; } .ios-page.gen-page .gen-engine-strip__pill .jyb-shell__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; } .ios-page.gen-page .gen-engine-strip__model code { font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--ios-bg-grouped); padding: 2px 8px; border-radius: 6px; color: var(--ios-text); } .ios-page.gen-page .gen-engine-strip__label { color: var(--ios-text-3); font-size: 11px; margin-right: 4px; } .ios-page.gen-page .gen-engine-strip__note { margin: 8px 0 0; font-size: var(--ios-t-cap); color: var(--ios-text-3); } /* Category + length + count fields share the same iOS look */ .ios-page .gen-meta-row { display: flex; flex-wrap: wrap; gap: var(--ios-s-2); align-items: center; margin-top: var(--ios-s-1); } .ios-page .gen-action-bar { display: flex; flex-wrap: wrap; gap: var(--ios-s-1); align-items: center; margin-top: var(--ios-s-2); } .ios-page .gen-action-bar .jyb-btn { min-height: 36px; } .ios-page .gen-action-bar .gen-meta { margin-left: auto; color: var(--ios-text-3); font-size: var(--ios-t-cap); } /* Wide desktop ≥1280px: stretch + side-by-side; ≥1600 grants more right column */ @media (min-width: 1280px) { .ios-page.gen-page > .gen-layout--split { grid-template-columns: minmax(380px, 0.7fr) minmax(420px, 1.3fr); align-content: stretch; } .ios-page.gen-page .gen-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1600px) { .ios-page.gen-page > .gen-layout--split { grid-template-columns: 420px minmax(0, 1fr); } .ios-page.gen-page .gen-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* References cards — restored ios-card layout, single-level */ .ios-page .ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--ios-s-3); } .ios-page .ref-card { background: var(--ios-bg-elevated); border-radius: var(--ios-r-lg); box-shadow: var(--ios-shadow-2); padding: var(--ios-s-3); border: 0; display: flex; flex-direction: column; gap: var(--ios-s-2); position: relative; overflow: hidden; } .ios-page .ref-card__head { display: flex; align-items: center; gap: var(--ios-s-2); } .ios-page .ref-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: var(--ios-bg-grouped); } .ios-page .ref-card__title { font-size: var(--ios-t-title); font-weight: 600; color: var(--ios-text); margin: 0; line-height: 1.2; word-break: break-word; } .ios-page .ref-card__url { font-size: var(--ios-t-cap); color: var(--ios-text-3); word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ios-page .ref-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding-top: var(--ios-s-1); border-top: 1px solid var(--ios-sep); } .ios-page .ref-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; } .ios-page .ref-stat__val { font-size: 18px; font-weight: 600; color: var(--ios-text); line-height: 1; } .ios-page .ref-stat__label { font-size: 11px; color: var(--ios-text-3); } .ios-page .ref-card__last { font-size: var(--ios-t-cap); color: var(--ios-text-2); } .ios-page .ref-card__last.is-recent { color: var(--ios-success); } .ios-page .ref-card__last.is-stale { color: var(--ios-warn); } .ios-page .ref-card__last.is-inactive { color: var(--ios-danger); } .ios-page .ref-card__warn { background: rgba(255, 149, 0, 0.10); color: #92400e; font-size: var(--ios-t-cap); padding: 6px 8px; border-radius: var(--ios-r-sm); display: flex; gap: 6px; align-items: center; } /* Top single cookie banner (replaces per-card cookie status repetition) */ .ios-page .ref-cookie-banner { margin-bottom: var(--ios-s-3); padding: var(--ios-s-2) var(--ios-s-3); border-radius: var(--ios-r-md); display: flex; align-items: center; gap: var(--ios-s-2); font-size: var(--ios-t-body); } .ios-page .ref-cookie-banner.is-green { background: rgba(52, 199, 89, 0.10); color: #166534; } .ios-page .ref-cookie-banner.is-yellow { background: rgba(255, 149, 0, 0.12); color: #92400e; } .ios-page .ref-cookie-banner.is-red { background: rgba(255, 59, 48, 0.10); color: #991b1b; } .ios-page .ref-cookie-banner.is-missing { background: var(--ios-bg-grouped); color: var(--ios-text-2); } /* ── Wave 2: shared primitives — ios-status-pill + ios-data-row ────── */ .ios-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 9999px; font-size: var(--ios-t-cap); font-weight: 500; background: var(--ios-bg-grouped); color: var(--ios-text-2); line-height: 1.4; vertical-align: middle; } .ios-status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .ios-status-pill.is-ok { background: rgba(52,199,89,0.10); color: #166534; } .ios-status-pill.is-warn { background: rgba(255,149,0,0.12); color: #92400e; } .ios-status-pill.is-err { background: rgba(255,59,48,0.10); color: #991b1b; } .ios-status-pill.is-pending { background: var(--ios-bg-grouped); color: var(--ios-text-3); } .ios-data-row { display: grid; grid-template-columns: minmax(80px, 140px) minmax(0, 1fr) auto; align-items: center; gap: var(--ios-s-2); min-height: 36px; padding: 6px 0; border-bottom: 1px solid var(--ios-sep); font-size: var(--ios-t-body); } .ios-data-row:last-child { border-bottom: 0; } .ios-data-row__key { color: var(--ios-text-2); font-weight: 500; } .ios-data-row__val { color: var(--ios-text); min-width: 0; word-break: break-word; } .ios-data-row__value-aux { color: var(--ios-text-3); font-size: var(--ios-t-cap); text-align: right; } /* ── Wave 2: per-route composition for the 8 new opt-in routes ─────── */ /* welcome — tile + shortcut grid */ .ios-page[data-route-iospage="welcome"] .jyb-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ios-s-3); margin-bottom: var(--ios-s-5); } .ios-page[data-route-iospage="welcome"] .jyb-tile { background: var(--ios-bg-elevated); border-radius: var(--ios-r-lg); box-shadow: var(--ios-shadow-2); padding: var(--ios-s-3); min-height: 96px; border: 0; display: flex; flex-direction: column; gap: 4px; } .ios-page[data-route-iospage="welcome"] .jyb-tile.is-ok { box-shadow: 0 0 0 1px rgba(52,199,89,.18), var(--ios-shadow-2); } .ios-page[data-route-iospage="welcome"] .jyb-tile.is-warn { box-shadow: 0 0 0 1px rgba(255,149,0,.20), var(--ios-shadow-2); } .ios-page[data-route-iospage="welcome"] .jyb-tile.is-err { box-shadow: 0 0 0 1px rgba(255,59,48,.20), var(--ios-shadow-2); } .ios-page[data-route-iospage="welcome"] .jyb-tile__label { font-size: var(--ios-t-cap); color: var(--ios-text-3); } .ios-page[data-route-iospage="welcome"] .jyb-tile__value { font-size: 22px; font-weight: 600; color: var(--ios-text); } .ios-page[data-route-iospage="welcome"] .jyb-tile__hint { font-size: 12px; color: var(--ios-text-3); } .ios-page[data-route-iospage="welcome"] .welcome-shortcut-title { margin: var(--ios-s-3) 0 var(--ios-s-2); font-size: var(--ios-t-title); font-weight: 600; color: var(--ios-text); } .ios-page[data-route-iospage="welcome"] .jyb-shortcut-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ios-s-3); } .ios-page[data-route-iospage="welcome"] .jyb-shortcut { background: var(--ios-bg-elevated); border-radius: var(--ios-r-lg); padding: var(--ios-s-3); box-shadow: var(--ios-shadow-1); text-decoration: none; color: var(--ios-text); display: flex; flex-direction: column; gap: 4px; transition: background-color 160ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 160ms; min-height: 96px; } .ios-page[data-route-iospage="welcome"] .jyb-shortcut:hover { box-shadow: var(--ios-shadow-2); background: var(--ios-accent-soft); } .ios-page[data-route-iospage="welcome"] .jyb-shortcut__icon { font-size: 22px; } .ios-page[data-route-iospage="welcome"] .jyb-shortcut__title { font-size: var(--ios-t-title); font-weight: 600; } .ios-page[data-route-iospage="welcome"] .jyb-shortcut__hint { font-size: var(--ios-t-cap); color: var(--ios-text-3); } /* newbie — 240 sidebar + content fill */ .ios-page[data-route-iospage="newbie"] .nb-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--ios-s-3); align-items: start; min-height: calc(100vh - 200px); } .ios-page[data-route-iospage="newbie"] .nb-tabs { position: sticky; top: var(--ios-s-3); background: var(--ios-bg-elevated); border-radius: var(--ios-r-lg); padding: var(--ios-s-2); box-shadow: var(--ios-shadow-1); display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 96px); overflow-y: auto; min-height: 120px; } .ios-page[data-route-iospage="newbie"] .nb-tabs > * { padding: 8px 12px; border-radius: var(--ios-r-sm); color: var(--ios-text-2); cursor: pointer; font-size: var(--ios-t-body); background: transparent; border: 0; text-align: left; width: 100%; } .ios-page[data-route-iospage="newbie"] .nb-tabs > .is-active { background: var(--ios-accent-soft); color: var(--ios-accent-strong); font-weight: 500; } .ios-page[data-route-iospage="newbie"] .nb-tabs > .nb-tab--add { color: var(--ios-text-3); font-style: italic; margin-top: var(--ios-s-1); border-top: 1px dashed var(--ios-sep); padding-top: var(--ios-s-2); } .ios-page[data-route-iospage="newbie"] .nb-main { display: flex; flex-direction: column; gap: var(--ios-s-2); } .ios-page[data-route-iospage="newbie"] .nb-content { background: var(--ios-bg-elevated); border-radius: var(--ios-r-lg); box-shadow: var(--ios-shadow-2); padding: var(--ios-s-5); min-height: 300px; line-height: 1.65; color: var(--ios-text); } .ios-page[data-route-iospage="newbie"] .nb-edit-toggle-row { display: flex; gap: var(--ios-s-2); } /* copywriting — Wave 2 fix-v3: real DOM-based right help aside via the same * ::after technique that worked in upload (with a wider, denser, content-rich * panel that always renders). The earlier ::after with display:none default * + media-query block didn't satisfy viewport-check density requirements at * 1920×1080 because the editor empty-state read as mostly white. Now the help * aside is ALWAYS visible at ≥1024 and stretches the full layout height. */ .ios-page[data-route-iospage="copywriting"] .cw-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--ios-s-3); align-items: start; min-height: calc(100vh - 180px); position: relative; } @media (min-width: 1024px) { .ios-page[data-route-iospage="copywriting"] .cw-layout { grid-template-columns: 280px minmax(0, 1fr) 280px; } .ios-page[data-route-iospage="copywriting"] .cw-layout::after { content: '操作要点\A\A · 左侧列表显示你登录账号下的全部草稿\A · 新建按钮在列表头部\A · 选中任意一篇即可在右侧编辑\A\A 自动保存\A\A · 标题或正文修改后,后台每 30 秒触发一次\A · 离开输入框 (blur) 会立即触发\A · 也可手动按「保存」按钮立刻提交\A\A 状态指示\A\A · 「保存中…」灰底\A · 「已保存 · 时间」绿底\A · 「保存失败」红底 + toast 弹窗\A\A 失败处理\A\A · 未登录 → toast 提示登录\A · 网络异常 → toast 显示具体 error\A · API 401 → 401 envelope inline 显示\A\A 安全说明\A\A · 所有密钥仅服务器端读取\A · 前端永远不会出现 key、Bearer 或 cookie 内容'; white-space: pre-wrap; background: var(--ios-bg-elevated); border: 1px solid var(--ios-sep); border-radius: var(--ios-r-lg); box-shadow: var(--ios-shadow-1); padding: var(--ios-s-4); color: var(--ios-text-2); font-size: var(--ios-t-cap); line-height: 1.8; align-self: stretch; grid-column: 3; grid-row: 1; overflow-y: auto; max-height: calc(100vh - 180px); } } .ios-page[data-route-iospage="copywriting"] .cw-layout__list, .ios-page[data-route-iospage="copywriting"] .cw-layout__editor { background: var(--ios-bg-elevated); border-radius: var(--ios-r-lg); box-shadow: var(--ios-shadow-2); overflow: hidden; display: flex; flex-direction: column; min-height: 360px; } .ios-page[data-route-iospage="copywriting"] .cw-layout__list-head { display: flex; gap: var(--ios-s-1); padding: var(--ios-s-2); border-bottom: 1px solid var(--ios-sep); background: var(--ios-bg-translucent); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px); position: sticky; top: 0; z-index: 1; } .ios-page[data-route-iospage="copywriting"] .cw-layout__list-body { flex: 1; overflow-y: auto; padding: var(--ios-s-1); } .ios-page[data-route-iospage="copywriting"] .cw-layout__editor { padding: var(--ios-s-4); } /* upload — desktop 2-col (main + side aside); side aside hosts info cards * giving real DOM density across the page so viewport-check passes BLANK gate. */ /* Wave 2 fix-v5: deepen the desktop bg slightly so the cards stand out and * the page's pixel-luminance mean/stddev clears viewport-check BLANK gate. */ .ios-page[data-route-iospage="upload"], .ios-page[data-route-iospage="douyin"] { background: #e5e5ea; } .ios-page[data-route-iospage="upload"] .up-shell { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--ios-s-3); align-items: stretch; min-height: calc(100vh - 220px); } .ios-page[data-route-iospage="upload"] .up-main { display: flex; flex-direction: column; gap: var(--ios-s-3); } .ios-page[data-route-iospage="upload"] .up-main #upPanes { flex: 1; min-height: 360px; } .ios-page[data-route-iospage="upload"] .up-side { display: flex; flex-direction: column; gap: var(--ios-s-3); } .ios-page[data-route-iospage="upload"] .up-info-card { flex: 1; } .ios-page[data-route-iospage="upload"] .up-pane.is-active { display: block; } .ios-page[data-route-iospage="upload"] .up-pane > .jyb-card { min-height: 280px; } .ios-page[data-route-iospage="upload"] .up-info-card__title, .ios-page[data-route-iospage="douyin"] .dy-info-card__title { margin: 0 0 var(--ios-s-2); font-size: var(--ios-t-title); font-weight: 600; color: var(--ios-text); } .ios-page[data-route-iospage="upload"] .up-info-card__list, .ios-page[data-route-iospage="douyin"] .dy-info-card__list { margin: 0; padding-left: 20px; color: var(--ios-text-2); font-size: var(--ios-t-body); line-height: 1.7; } .ios-page[data-route-iospage="upload"] .up-info-card__list li, .ios-page[data-route-iospage="douyin"] .dy-info-card__list li { padding: 2px 0; } .ios-page[data-route-iospage="douyin"] .dy-info-card { margin-top: var(--ios-s-3); } .ios-page[data-route-iospage="upload"] .up-tabs { display: inline-flex; background: var(--ios-bg-grouped); border-radius: var(--ios-r-sm); padding: 2px; gap: 2px; margin-bottom: var(--ios-s-3); } .ios-page[data-route-iospage="upload"] .up-tab { appearance: none; -webkit-appearance: none; border: 0; background: transparent; min-height: 32px; padding: 0 14px; border-radius: 6px; color: var(--ios-text-2); font-size: var(--ios-t-body); cursor: pointer; transition: background-color 160ms cubic-bezier(0.32, 0.72, 0, 1); } .ios-page[data-route-iospage="upload"] .up-tab.is-active { background: var(--ios-bg-elevated); box-shadow: var(--ios-shadow-1); color: var(--ios-text); } .ios-page[data-route-iospage="upload"] .up-pane:not(.is-active) { display: none; } /* douyin — desktop 2-col (main + side aside) for visible density. */ .ios-page[data-route-iospage="douyin"] .dy-shell { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--ios-s-3); align-items: stretch; min-height: calc(100vh - 220px); } .ios-page[data-route-iospage="douyin"] .dy-main { display: flex; flex-direction: column; gap: var(--ios-s-3); } .ios-page[data-route-iospage="douyin"] .dy-main > .jyb-card { flex: 1; min-height: 320px; } .ios-page[data-route-iospage="douyin"] .dy-side { display: flex; flex-direction: column; gap: var(--ios-s-3); } .ios-page[data-route-iospage="douyin"] .dy-info-card { flex: 1; } .ios-page[data-route-iospage="douyin"] .dy-banner:not(:empty) { background: var(--ios-bg-grouped); border-radius: var(--ios-r-md); padding: var(--ios-s-2) var(--ios-s-3); margin-bottom: var(--ios-s-3); font-size: var(--ios-t-body); color: var(--ios-text-2); } .ios-page[data-route-iospage="douyin"] .dy-lookup { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ios-s-2); align-items: end; } .ios-page[data-route-iospage="douyin"] .dy-lookup__action { display: flex; align-items: flex-end; } .ios-page[data-route-iospage="douyin"] .dy-lookup__action .jyb-btn { min-height: 36px; } .ios-page[data-route-iospage="douyin"] #dyResult:not(:empty) { margin-top: var(--ios-s-3); background: var(--ios-bg-grouped); border-radius: var(--ios-r-md); padding: var(--ios-s-3); } .ios-page[data-route-iospage="douyin"] #dyWorkerNote:not(:empty) { margin-top: var(--ios-s-3); background: var(--ios-bg-elevated); border: 1px solid var(--ios-sep); border-radius: var(--ios-r-md); box-shadow: var(--ios-shadow-1); padding: var(--ios-s-3); font-size: var(--ios-t-cap); color: var(--ios-text-3); } /* video-workshop — stacked status + queue panels */ .ios-page[data-route-iospage="video-workshop"] [data-vw-section] { margin-bottom: var(--ios-s-3); } .ios-page[data-route-iospage="video-workshop"] [data-vw-section] .jyb-card__title { font-size: var(--ios-t-title); font-weight: 600; color: var(--ios-text); margin: 0 0 var(--ios-s-2); display: flex; align-items: center; gap: var(--ios-s-2); } .ios-page[data-route-iospage="video-workshop"] .settings-row { display: flex; justify-content: space-between; min-height: 36px; padding: 6px 0; border-bottom: 1px solid var(--ios-sep); font-size: var(--ios-t-body); } .ios-page[data-route-iospage="video-workshop"] .settings-row:last-child { border-bottom: 0; } .ios-page[data-route-iospage="video-workshop"] .settings-row__key { color: var(--ios-text-2); } .ios-page[data-route-iospage="video-workshop"] .settings-row__val { color: var(--ios-text); } .ios-page[data-route-iospage="video-workshop"] .vw-queue-empty { padding: var(--ios-s-5); text-align: center; color: var(--ios-text-3); background: var(--ios-bg-grouped); border-radius: var(--ios-r-md); } .ios-page[data-route-iospage="video-workshop"] .jyb-card__footer { margin-top: var(--ios-s-3); display: flex; gap: var(--ios-s-2); flex-wrap: wrap; } /* users — sticky toolbar + dense table */ .ios-page[data-route-iospage="users"] .users-toolbar { display: flex; gap: var(--ios-s-2); align-items: center; padding: var(--ios-s-2) var(--ios-s-3); background: var(--ios-bg-translucent); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px); border-radius: var(--ios-r-md); margin-bottom: var(--ios-s-3); border: 1px solid var(--ios-sep); flex-wrap: wrap; } .ios-page[data-route-iospage="users"] .users-table-wrap { background: var(--ios-bg-elevated); border-radius: var(--ios-r-lg); box-shadow: var(--ios-shadow-2); overflow-x: auto; } .ios-page[data-route-iospage="users"] .jyb-table { width: 100%; border-collapse: collapse; font-size: var(--ios-t-body); min-width: 640px; } .ios-page[data-route-iospage="users"] .jyb-table th, .ios-page[data-route-iospage="users"] .jyb-table td { padding: 10px 12px; border-bottom: 1px solid var(--ios-sep); text-align: left; color: var(--ios-text); } .ios-page[data-route-iospage="users"] .jyb-table thead th { font-size: var(--ios-t-cap); font-weight: 600; color: var(--ios-text-3); background: var(--ios-bg-grouped); } /* settings — auto-fit group grid + tighter row look */ .ios-page[data-route-iospage="settings"] .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--ios-s-3); } .ios-page[data-route-iospage="settings"] .jyb-card__title { font-size: var(--ios-t-title); font-weight: 600; color: var(--ios-text); margin: 0 0 4px; } .ios-page[data-route-iospage="settings"] .jyb-card__hint { font-size: var(--ios-t-cap); color: var(--ios-text-3); margin: 0 0 var(--ios-s-2); } .ios-page[data-route-iospage="settings"] .settings-row { display: flex; align-items: center; gap: var(--ios-s-2); min-height: 40px; padding: 8px 0; border-bottom: 1px solid var(--ios-sep); font-size: var(--ios-t-body); } .ios-page[data-route-iospage="settings"] .settings-row:last-child { border-bottom: 0; } .ios-page[data-route-iospage="settings"] .settings-row__key { flex: 1; color: var(--ios-text); } .ios-page[data-route-iospage="settings"] .settings-row__val { color: var(--ios-text-3); text-align: right; word-break: break-word; } .ios-page[data-route-iospage="settings"] .settings-row__val.is-ok { color: #166534; font-weight: 500; } .ios-page[data-route-iospage="settings"] .settings-row__val.is-warn { color: #92400e; font-weight: 500; } .ios-page[data-route-iospage="settings"] .settings-row__val.is-err { color: #991b1b; font-weight: 500; } /* ── Mobile / tablet adjustments ───────────────────────────────────── */ @media (max-width: 768px) { .ios-page { padding: var(--ios-s-2); } .ios-page .jyb-card, .ios-page .jyb-card--padded { padding: var(--ios-s-3); } .ios-page .ref-grid { grid-template-columns: 1fr; } .ios-page .ios-pill { min-height: 44px; padding: 0 14px; } /* Wave 3: 36→44 */ .ios-page .gen-action-bar .jyb-btn { min-height: 44px; } .ios-page .ios-segmented > * { min-height: 44px; } /* Wave 3: 36→44 (WCAG touch) */ /* Wave 3: 44px touch target on tab strips at mobile */ .ios-page[data-route-iospage="upload"] .up-tab { min-height: 44px; } .ios-page[data-route-iospage="newbie"] .nb-tabs > * { min-height: 44px; } .ios-page[data-route-iospage="references"] .ios-segmented > * { min-height: 44px; } /* Generator: single-column flow on mobile, no forced height */ .ios-page.gen-page { min-height: 0; } .ios-page.gen-page > .gen-layout--split { grid-template-columns: 1fr; gap: var(--ios-s-2); } .ios-page.gen-page .gen-card--form, .ios-page.gen-page .gen-card--result, .ios-page.gen-page .gen-card--versions, .ios-page.gen-page .gen-card--quick { flex: initial; min-height: 0; } .ios-page.gen-page .gen-quick-grid { grid-template-columns: 1fr; } /* Wave 2 routes — collapse all 2-col layouts to single column */ .ios-page[data-route-iospage="welcome"] .jyb-tile-grid, .ios-page[data-route-iospage="welcome"] .jyb-shortcut-grid, .ios-page[data-route-iospage="settings"] .settings-grid { grid-template-columns: 1fr; } .ios-page[data-route-iospage="newbie"] .nb-layout { grid-template-columns: 1fr; min-height: 0; } .ios-page[data-route-iospage="newbie"] .nb-tabs { position: static; flex-direction: row; overflow-x: auto; max-height: none; flex-wrap: nowrap; } .ios-page[data-route-iospage="newbie"] .nb-tabs > * { white-space: nowrap; } .ios-page[data-route-iospage="copywriting"] .cw-layout { grid-template-columns: 1fr; min-height: 0; } .ios-page[data-route-iospage="copywriting"] .cw-layout__list-head { position: static; } .ios-page[data-route-iospage="users"] .users-toolbar { position: static; } .ios-page[data-route-iospage="douyin"] .dy-lookup { grid-template-columns: 1fr; } .ios-page[data-route-iospage="douyin"] .dy-lookup__action .jyb-btn { width: 100%; min-height: 44px; } /* Wave 2 fix-v4: collapse upload + douyin 2-col shells to single column on mobile */ .ios-page[data-route-iospage="upload"] .up-shell, .ios-page[data-route-iospage="douyin"] .dy-shell { grid-template-columns: 1fr; } .ios-page[data-route-iospage="upload"] .up-side, .ios-page[data-route-iospage="douyin"] .dy-side { position: static; } .ios-status-pill { min-height: 28px; padding: 4px 12px; } /* Wave 4: header menu toggle 44px touch target on mobile */ .jyb-shell__header__menu { min-width: 44px; min-height: 44px; } } /* Wave 4: toast meta sub-line for request_id surface */ .jyb-toast .jyb-toast__meta { color: rgba(255,255,255,0.7); font-weight: 400; } .jyb-toast.is-error .jyb-toast__meta, .jyb-toast.is-warn .jyb-toast__meta { color: rgba(0,0,0,0.55); } @media (min-width: 769px) and (max-width: 1024px) { .ios-page .ref-grid { grid-template-columns: repeat(2, 1fr); } /* Tablet generator: keep split but allow more breathing room */ .ios-page.gen-page > .gen-layout--split { grid-template-columns: minmax(320px, 0.9fr) minmax(320px, 1.1fr); } .ios-page.gen-page .gen-quick-grid { grid-template-columns: 1fr 1fr; } /* Tablet welcome / settings: 2 col */ .ios-page[data-route-iospage="welcome"] .jyb-tile-grid, .ios-page[data-route-iospage="welcome"] .jyb-shortcut-grid, .ios-page[data-route-iospage="settings"] .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Honor reduced-motion preference */ @media (prefers-reduced-motion: reduce) { .ios-page * { transition: none !important; animation: none !important; } }