/* ========================================================= LOCAL FONTS ========================================================= */ @font-face { font-family: 'EB Garamond'; src: url('../fonts/EBGaramond-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'EB Garamond'; src: url('../fonts/EBGaramond-Italic-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype'); font-weight: 300 700; font-style: normal; font-display: swap; } /* ========================================================= DARK THEME TOKENS (applied via ) ========================================================= */ html[data-theme="dark"] { --c-bg: #1c1a18; --c-bg-raised: #242220; --c-bg-inset: #2d2b28; --c-border: #3c3834; --c-border-mid: #4e4843; --c-ink: #f0ede8; --c-ink-mid: #cac5be; --c-ink-soft: #8a837b; --c-ink-ghost: #5e5851; --c-accent: #506545; /* logo olive, slightly darker for base */ --c-accent-mid: #5c704a; /* logo colour */ --c-accent-pale: #1c2618; /* dark olive tint for selected/hover bg */ --c-warn: #c05a50; --shadow-card: 0 1px 3px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.2); --shadow-raised: 0 2px 6px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25); } /* Hardcoded light-only overrides */ html[data-theme="dark"] .nav-credits--low { background: #3d1e1c; } html[data-theme="dark"] .btn--warn, html[data-theme="dark"] .btn--warn:hover { background: #7a3028; border-color: #7a3028; } /* Source-type badges (all_history.php) */ html[data-theme="dark"] .sb-builder { background: #1e2d4a; color: #7aa5d4; } html[data-theme="dark"] .sb-mania { background: #2a1c45; color: #b388f8; } html[data-theme="dark"] .sb-remix { background: #1a3320; color: #5c9e74; } html[data-theme="dark"] .sb-art { background: #3a2510; color: #c8854a; } html[data-theme="dark"] .sb-wordgen { background: #0f2f30; color: #4aadad; } html[data-theme="dark"] .sb-analysis { background: #3a1515; color: #c86060; } /* Expiry badges (images.php) */ html[data-theme="dark"] .expiry-ok { background: #1a3320; color: #5c9e74; } html[data-theme="dark"] .expiry-soon { background: #2e2310; color: #c8a050; } html[data-theme="dark"] .expiry-warn { background: #3a1c16; color: #c87060; } /* Retention / warning notices */ html[data-theme="dark"] .retention-notice { background: #1e1608; border-color: #4a3510; color: #b8944a; } /* Art style picker — hover description text */ html[data-theme="dark"] .art-grp-desc { color: #c8c0b6; } /* Image gallery overlay buttons — white bg + light ink text = invisible in dark mode */ html[data-theme="dark"] .overlay-btn { background: rgba(28, 26, 24, 0.82); color: #f0ede8; } html[data-theme="dark"] .overlay-btn:hover { background: rgba(28, 26, 24, 0.96); } /* Danger button hover */ html[data-theme="dark"] .btn-ghost-danger { border-color: #6b3030; } html[data-theme="dark"] .btn-ghost-danger:hover { background: #3a1616; } /* Auth error message (index.php login form) */ html[data-theme="dark"] .auth-msg-error { background: #2e1616; border-color: #6b2c2c; } /* Alert boxes (account.php, etc.) */ html[data-theme="dark"] .alert--ok { background: #1a3320; border-color: #2e6040; color: #6ec98a; } html[data-theme="dark"] .alert--err { background: #2e1616; border-color: #6b2c2c; color: #e07070; } /* Format/model ratio pills — dark mode */ html[data-theme="dark"] .ratio-pill:has(input[name^="fmt-"]) span { border-color: #7a6040; color: #c8a870; } html[data-theme="dark"] .ratio-pill:has(input[name^="fmt-"]:checked) span { border-color: #9a7840; background: #3a2c18; color: #c8a870; } html[data-theme="dark"] .ratio-pill:has(input[name^="model-"]) span, html[data-theme="dark"] .ratio-pill:has(input[name$="Model"]) span { border-color: #3a6878; color: #6aacbc; } html[data-theme="dark"] .ratio-pill:has(input[name^="model-"]:checked) span, html[data-theme="dark"] .ratio-pill:has(input[name$="Model"]:checked) span { border-color: #3a6878; background: #142028; color: #6aacbc; } /* ========================================================= ROOT TOKENS ========================================================= */ :root { /* Palette */ --c-bg: #f4f2ee; /* off-white */ --c-bg-raised: #efecea; /* cards, panels */ --c-bg-inset: #e8e5e0; /* inputs, inset surfaces */ --c-border: #d8d4cd; --c-border-mid: #c4bfb7; --c-ink: #1e1c1a; /* off-black headings */ --c-ink-mid: #3d3a36; /* body text */ --c-ink-soft: #7a746c; /* muted text */ --c-ink-ghost: #a89f94; /* placeholders */ --c-accent: #3d4e2e; /* deep olive */ --c-accent-mid: #4e5f3a; --c-accent-pale: #dde8d4; /* selected state bg */ --c-warn: #8b3a2f; /* destructive */ /* Typography */ --font-serif: 'EB Garamond', Georgia, serif; --font-sans: 'Space Grotesk', system-ui, sans-serif; /* Spacing scale */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; /* Radii */ --r-sm: 3px; --r-md: 6px; --r-lg: 12px; /* Shadows */ --shadow-card: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04); --shadow-raised: 0 2px 6px rgba(0,0,0,.10), 0 8px 24px rgba(0,0,0,.06); /* Layout */ --sidebar-w: 260px; --header-h: 60px; } /* ========================================================= RESET / BASE ========================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Ensure the HTML hidden attribute always wins over display:flex/grid rules */ [hidden] { display: none !important; } html { font-size: 16px; scroll-behavior: smooth; } body { background-color: var(--c-bg); color: var(--c-ink-mid); font-family: var(--font-sans); font-size: 0.9375rem; line-height: 1.65; min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; } /* ========================================================= HEADER ========================================================= */ .site-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); background: var(--c-bg); border-bottom: 1px solid var(--c-border); backdrop-filter: blur(8px); } .header-inner { max-width: 1400px; margin: 0 auto; height: 100%; padding: 0 var(--sp-8); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); } .logo { display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; } .logo-symbol { width: 32px; height: 32px; display: block; flex-shrink: 0; } .logo-text { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 500; color: var(--c-ink); letter-spacing: -0.01em; } .header-nav { display: flex; align-items: center; gap: var(--sp-1); } .nav-link { padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md); font-size: 0.875rem; font-weight: 400; color: var(--c-ink-soft); letter-spacing: 0.01em; transition: background 0.15s, color 0.15s; } .nav-link:hover, .nav-link.active { background: var(--c-bg-inset); color: var(--c-ink); } .nav-username { font-weight: 500; color: var(--c-ink) !important; } .nav-back-btn { border: none; background: none; cursor: pointer; opacity: 0.65; margin-right: var(--sp-2); } .nav-back-btn:hover { opacity: 1; background: var(--c-bg-inset); color: var(--c-ink); } .nav-credits { display: inline-flex; align-items: center; padding: var(--sp-1) var(--sp-3); border-radius: 99px; font-size: 0.78rem; font-weight: 500; background: var(--c-accent-pale); color: var(--c-accent); letter-spacing: 0.02em; margin-left: var(--sp-2); margin-right: var(--sp-1); white-space: nowrap; text-decoration: none; transition: background 0.15s, color 0.15s; } .nav-credits:hover { background: var(--c-accent); color: #fff; } .nav-credits--low { background: #fde8e6; color: var(--c-warn); animation: credits-pulse 2s ease-in-out infinite; } .nav-credits--low:hover { background: var(--c-warn); color: #fff; } @keyframes credits-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } } /* ========================================================= TOOLS DROPDOWN ========================================================= */ .nav-dropdown { position: relative; } .nav-dropdown-toggle { background: none; border: none; cursor: pointer; font-family: inherit; } .nav-dropdown-menu { display: block; visibility: hidden; opacity: 0; pointer-events: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; background: var(--c-bg-raised); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-raised); padding: var(--sp-2) 0; z-index: 200; transition: opacity 0.12s, visibility 0.12s; } /* Bridge pseudo-element fills the gap so mouse movement doesn't lose hover */ .nav-dropdown::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 10px; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 0.12s, visibility 0s; } .nav-dropdown-item { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-4); font-size: 0.875rem; color: var(--c-ink-soft); transition: background 0.12s, color 0.12s; text-decoration: none; white-space: nowrap; gap: var(--sp-3); } a.nav-dropdown-item:hover, .nav-dropdown-item.active { background: var(--c-bg-inset); color: var(--c-ink); } .nav-dropdown-section { display: block; padding: var(--sp-3) var(--sp-4) var(--sp-1); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--c-ink-ghost); pointer-events: none; } .nav-dropdown-section:not(:first-child) { border-top: 1px solid var(--c-border); margin-top: var(--sp-1); } .nav-dropdown-sub { padding-left: var(--sp-8); font-size: 0.82rem; } .nav-dropdown-divider { height: 1px; background: var(--c-border); margin: var(--sp-2) 0; } .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; font-size: 0.68rem; font-weight: 600; line-height: 1; background: var(--c-accent); color: #fff; border-radius: 99px; vertical-align: middle; margin-left: var(--sp-1); } .nav-soon-badge { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 99px; background: var(--c-bg-inset); color: var(--c-ink-soft); flex-shrink: 0; } .nav-soon { opacity: 0.55; pointer-events: none; cursor: default; } /* ========================================================= SIDE BUTTON STACK (bell + suggest tab) ========================================================= */ .side-btn-stack { position: fixed; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; z-index: 400; } /* When suggestion-tab is inside the stack, cancel its own fixed positioning */ .side-btn-stack .suggestion-tab { position: relative; right: auto; top: auto; transform: none; box-shadow: none; width: 2.1rem; /* match side-bell-btn width */ padding-left: 0; padding-right: 0; } /* Fixed side bell button — same width as suggest tab */ .side-bell-btn { position: relative; display: flex; align-items: center; justify-content: center; background: #8b3333; border: none; border-radius: var(--r-md) 0 0 var(--r-md); /* Match suggest-tab visual width */ width: 2.1rem; padding: var(--sp-4) 0; color: #f0ede8; cursor: pointer; line-height: 1; transition: background 0.15s, box-shadow 0.15s; box-shadow: -2px 0 10px rgba(0,0,0,0.18); } .side-bell-btn:hover { background: #a04040; } .side-bell-btn svg { display: block; stroke: #f0ede8; } /* Unread badge on side bell */ .side-bell-badge { position: absolute; top: 3px; right: 3px; min-width: 15px; height: 15px; padding: 0 3px; font-size: 0.62rem; font-weight: 700; line-height: 15px; text-align: center; background: #fff; color: #8b3333; border-radius: 99px; pointer-events: none; box-shadow: 0 0 0 1px #8b3333; } /* ========================================================= NOTIFICATION BELL + SLIDE-OUT PANEL ========================================================= */ .notif-bell-btn { position: relative; font-size: 1rem; line-height: 1; padding: var(--sp-1) var(--sp-2); border: none; background: none; cursor: pointer; } /* Backdrop overlay */ .notif-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.18); z-index: 490; } .notif-backdrop--open { display: block; } /* Slide-out panel */ .notif-panel { position: fixed; top: 0; right: -360px; width: 320px; height: 100vh; background: var(--c-bg); border-left: 1px solid var(--c-border); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.10); z-index: 500; display: flex; flex-direction: column; overflow: hidden; transition: right 0.22s ease; } .notif-panel--open { right: 0; } /* Panel header */ .notif-panel-header { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-4); min-height: var(--header-h); border-bottom: 1px solid var(--c-border); flex-shrink: 0; } .notif-panel-title { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 500; color: var(--c-ink); flex: 1; } /* Shared small-button base */ .notif-btn { background: none; border: none; cursor: pointer; border-radius: var(--r-sm); transition: background 0.1s, color 0.1s; } .notif-dismiss-all { font-size: 0.73rem; color: var(--c-ink-soft); padding: 3px 8px; } .notif-dismiss-all:hover { background: var(--c-bg-inset); color: var(--c-ink); } .notif-close { font-size: 1.15rem; line-height: 1; color: var(--c-ink-soft); padding: 3px 7px; } .notif-close:hover { background: var(--c-bg-inset); color: var(--c-ink); } /* Panel body */ .notif-panel-body { flex: 1; overflow-y: auto; padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); } .notif-panel-body::-webkit-scrollbar { width: 4px; } .notif-panel-body::-webkit-scrollbar-thumb { background: var(--c-border-mid); border-radius: 4px; } .notif-empty { text-align: center; color: var(--c-ink-ghost); font-size: 0.85rem; padding: var(--sp-10) 0; } /* Notification item */ .notif-item { background: var(--c-bg-raised); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); } .notif-item--unread { border-color: var(--c-accent-mid); background: var(--c-accent-pale); } .notif-item-body { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: 0.845rem; color: var(--c-ink-mid); line-height: 1.55; } .notif-item-icon { flex-shrink: 0; } .notif-item-meta { display: flex; align-items: center; justify-content: space-between; } .notif-item-time { font-size: 0.72rem; color: var(--c-ink-ghost); } .notif-dismiss { font-size: 0.72rem; color: var(--c-ink-soft); padding: 2px 6px; } .notif-dismiss:hover { background: var(--c-bg-inset); color: var(--c-warn); } .hero-strip { border-bottom: 1px solid var(--c-border); background: var(--c-bg); max-width: 1400px; margin: 0 auto; padding: var(--sp-10) var(--sp-8) var(--sp-8); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-8); } .hero-inner { display: flex; flex-direction: column; gap: var(--sp-2); } .hero-eyebrow { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent-mid); } .hero-title { font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 400; color: var(--c-ink); line-height: 1.15; letter-spacing: -0.02em; } .hero-title em { font-style: italic; color: var(--c-accent); } .hero-sub { max-width: 520px; color: var(--c-ink-soft); font-size: 0.9rem; line-height: 1.7; } /* ========================================================= BUILDER — Category tabs ========================================================= */ .cat-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); } .cat-tab { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1.5px solid var(--c-border-mid); border-radius: var(--r-md); color: var(--c-ink-mid); text-decoration: none; white-space: nowrap; font-size: 0.78rem; letter-spacing: 0.03em; transition: border-color 0.15s, color 0.15s, background 0.15s; } .cat-tab:hover { border-color: var(--c-accent-mid); color: var(--c-ink); } .cat-tab--active { border-color: var(--c-accent); background: var(--c-accent-pale); color: var(--c-accent); } .cat-tab .cat-icon { font-size: 0.85rem; width: auto; color: inherit; } .cat-tab .cat-name { font-size: 0.78rem; } .cat-tab--active .cat-badge { background: var(--c-accent-mid); color: #fff; } /* ========================================================= BUILDER — Actions bar ========================================================= */ .builder-actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-4) 0; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); margin-bottom: var(--sp-5); } .builder-action-btns { margin-left: auto; display: flex; gap: var(--sp-2); flex-wrap: wrap; } /* ========================================================= MAIN LAYOUT — sidebar + content (legacy) ========================================================= */ .main-layout { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: calc(100vh - var(--header-h) - 1px); align-items: start; } /* ========================================================= SIDEBAR ========================================================= */ .sidebar { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto; border-right: 1px solid var(--c-border); padding: var(--sp-6) 0; display: flex; flex-direction: column; gap: var(--sp-6); scrollbar-width: thin; scrollbar-color: var(--c-border-mid) transparent; } .sidebar::-webkit-scrollbar { width: 4px; } .sidebar::-webkit-scrollbar-thumb { background: var(--c-border-mid); border-radius: 4px; } .sidebar-heading { padding: 0 var(--sp-5); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: var(--c-ink-ghost); } /* Category list */ .cat-list { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--sp-3); } .cat-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3); border-radius: var(--r-md); cursor: pointer; transition: background 0.15s; text-decoration: none; color: var(--c-ink-mid); } .cat-item:hover { background: var(--c-bg-inset); } .cat-item--active { background: var(--c-accent-pale); color: var(--c-accent); } .cat-item--active .cat-icon, .cat-item--active .cat-name { color: var(--c-accent); } .cat-icon { font-size: 1rem; width: 1.25rem; text-align: center; flex-shrink: 0; color: var(--c-ink-ghost); transition: color 0.15s; } .cat-name { flex: 1; font-size: 0.875rem; font-weight: 400; } .cat-badge { font-size: 0.7rem; font-weight: 500; background: var(--c-bg-inset); color: var(--c-ink-soft); padding: 1px 7px; border-radius: 99px; min-width: 22px; text-align: center; transition: background 0.15s, color 0.15s; } .cat-item--active .cat-badge { background: var(--c-accent-mid); color: #fff; } /* Prompt panel */ .prompt-panel { padding: 0 var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; } .prompt-output { border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-4); background: var(--c-bg-inset); min-height: 120px; max-height: 280px; overflow-y: auto; font-size: 0.8125rem; line-height: 1.75; color: var(--c-ink-mid); white-space: pre-wrap; word-break: break-word; scrollbar-width: thin; scrollbar-color: var(--c-border-mid) transparent; } .prompt-placeholder { color: var(--c-ink-ghost); font-style: italic; font-size: 0.8rem; } .panel-actions { display: flex; flex-direction: column; gap: var(--sp-2); } /* ========================================================= BUTTONS ========================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-md); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; border: 1.5px solid transparent; transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s; user-select: none; white-space: nowrap; } .btn--primary { background: var(--c-accent); border-color: var(--c-accent); color: #fff; } .btn--primary:hover:not(:disabled) { background: var(--c-accent-mid); border-color: var(--c-accent-mid); box-shadow: 0 2px 8px rgba(61,90,79,.25); } .btn--primary:disabled { opacity: 0.4; cursor: not-allowed; } .btn--ghost { background: transparent; border-color: var(--c-border-mid); color: var(--c-ink-soft); } .btn--ghost:hover { background: var(--c-bg-inset); border-color: var(--c-border-mid); color: var(--c-ink); } .btn--danger { background: transparent; border-color: #8b3333; color: #a04040; } .btn--danger:hover { background: #8b3333; border-color: #8b3333; color: #f4f2ee; } /* ========================================================= CONTENT AREA ========================================================= */ .content-area { padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-6); } .content-header { display: flex; align-items: center; gap: var(--sp-3); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-border); } /* Selected-in-category chip bar */ .cat-sel-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--c-bg-inset); border: 1px solid var(--c-border); border-radius: var(--r-md); } .cat-sel-bar[hidden] { display: none; } .cat-sel-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.5rem 0.2rem 0.65rem; background: var(--c-accent-pale); border: 1px solid var(--c-accent-mid); border-radius: 999px; font-family: var(--font-sans); font-size: 0.78rem; color: var(--c-accent); } .cat-sel-remove { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; width: 1rem; height: 1rem; border-radius: 50%; font-size: 0.85rem; line-height: 1; color: var(--c-accent-mid); cursor: pointer; transition: background 0.12s, color 0.12s; } .cat-sel-remove:hover { background: var(--c-accent-mid); color: #fff; } .content-icon { font-size: 1.5rem; color: var(--c-accent-mid); line-height: 1; } .content-title { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 400; color: var(--c-ink); letter-spacing: -0.01em; } /* Attribute grid */ .attr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); } .attr-card { border: 1.5px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-bg); overflow: hidden; cursor: pointer; transition: border-color 0.18s, box-shadow 0.18s, background 0.18s, transform 0.18s; user-select: none; } .attr-card:hover { border-color: var(--c-accent-mid); box-shadow: var(--shadow-card); transform: translateY(-2px); } .attr-card.is-selected { border-color: var(--c-accent); background: var(--c-accent-pale); box-shadow: var(--shadow-card); } .attr-card-inner { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); position: relative; } .attr-check { position: absolute; top: var(--sp-3); right: var(--sp-4); font-size: 0.75rem; width: 20px; height: 20px; border-radius: 50%; background: var(--c-accent); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.6); transition: opacity 0.18s, transform 0.18s; } .attr-card.is-selected .attr-check { opacity: 1; transform: scale(1); } .attr-name { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 500; color: var(--c-ink); line-height: 1.2; } .attr-desc { font-size: 0.8125rem; color: var(--c-ink-soft); line-height: 1.55; } .empty-state { padding: var(--sp-12); text-align: center; color: var(--c-ink-ghost); font-style: italic; } /* ========================================================= ATTRIBUTE GROUPS ========================================================= */ #attrGrid { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-5); } /* ── Pill navigation bar ── */ /* ── Builder section tabs ── */ .section-tab-bar { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-border); margin-bottom: var(--sp-2); } .section-tab { appearance: none; padding: var(--sp-1) var(--sp-3); font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; background: none; border: 1.5px solid var(--c-border); border-radius: 999px; color: var(--c-ink-soft); cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--sp-1); line-height: 1.8; } .section-tab:hover { border-color: var(--c-accent-mid); color: var(--c-ink); } .section-tab--active { background: var(--c-accent-pale); border-color: var(--c-accent); color: var(--c-accent); } .section-tab-count { font-size: 0.65rem; font-weight: 600; background: var(--c-accent); color: #fff; border-radius: 10px; padding: 0.05em 0.45em; line-height: 1.7; display: none; } .section-panel { display: none; flex-direction: column; gap: var(--sp-2); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-border); margin-bottom: var(--sp-1); } .section-panel--active { display: flex !important; } .section-panel-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .group-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-border); } /* Sectioned pill bar: stacked labeled rows */ .group-pills.has-sections { flex-direction: column; gap: 0; } .pill-section { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-border); } .pill-section:last-child { border-bottom: none; } .pill-section-label { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-mid); } /* Wrapper used when a section contains named sub-sections */ .pill-section-content { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); } /* Sub-group pill row revealed when toggle is clicked */ .pill-sub-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-1) 0 var(--sp-1) var(--sp-4); border-left: 2px solid var(--c-accent-pale); margin-left: 2px; } /* Dropdown arrow on sub-section toggle pill */ .pill-sub-arrow { font-size: 0.55rem; display: inline-block; transition: transform 0.15s; vertical-align: middle; } .pill-sub-toggle.is-active .pill-sub-arrow { transform: rotate(180deg); } .pill-section-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); } /* ── Individual pills ── */ .group-pill { appearance: none; background: var(--c-bg-raised); border: 1.5px solid var(--c-border); border-radius: 20px; padding: 0.2em var(--sp-3); font-family: var(--font-sans); font-size: 0.8rem; font-weight: 400; color: var(--c-ink-mid); cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; display: inline-flex; align-items: center; gap: var(--sp-2); line-height: 1.8; white-space: nowrap; } .group-pill:hover { border-color: var(--c-accent-mid); color: var(--c-accent); background: var(--c-accent-pale); } .group-pill.is-active { border-color: var(--c-accent); background: var(--c-accent-pale); color: var(--c-accent); font-weight: 500; } .group-count { font-size: 0.65rem; font-weight: 600; background: var(--c-accent); color: #fff; border-radius: 10px; padding: 0.05em 0.45em; line-height: 1.7; display: none; } /* ── Expanded attribute group ── */ .attr-group { display: flex; flex-direction: column; gap: var(--sp-4); } /* ========================================================= FOOTER ========================================================= */ .site-footer { border-top: 1px solid var(--c-border); margin-top: var(--sp-16); } .footer-inner { max-width: 1400px; margin: 0 auto; padding: var(--sp-5) var(--sp-8); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); } .footer-logo { font-family: var(--font-serif); font-size: 0.875rem; color: var(--c-ink-soft); } .footer-note { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-ghost); } .footer-nav-link { text-decoration: none; transition: color 0.15s; } .footer-nav-link:hover { color: var(--c-ink-soft); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 900px) { .main-layout { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--c-border); padding: var(--sp-4); flex-direction: row; flex-wrap: wrap; overflow-x: auto; gap: var(--sp-4); } .sidebar-heading { display: none; } .cat-list { flex-direction: row; flex-wrap: wrap; padding: 0; gap: var(--sp-2); } .prompt-panel { width: 100%; padding: 0; } .hero-strip { flex-direction: column; gap: var(--sp-4); } } @media (max-width: 600px) { .header-inner { padding: 0 var(--sp-4); } .content-area { padding: var(--sp-5) var(--sp-4); } .hero-strip { padding: var(--sp-6) var(--sp-4); } .footer-inner { padding: var(--sp-4); flex-direction: column; text-align: center; } .attr-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); } } /* ========================================================= HAMBURGER MENU ========================================================= */ .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; padding: var(--sp-2); cursor: pointer; border-radius: var(--r-md); order: 3; /* push after nav on desktop (ignored) */ } .hamburger span { display: block; width: 22px; height: 2px; background: var(--c-ink-soft); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; } .hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.is-open span:nth-child(2) { opacity: 0; } .hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 768px) { .hamburger { display: flex; } /* Kill the hover-bridge gap (not needed in mobile menu) */ .nav-dropdown::after { display: none; } /* Header grows to contain open nav — content is pushed down, not covered */ .site-header { height: auto; position: relative; } .header-inner { flex-wrap: wrap; height: auto; min-height: var(--header-h); padding: 0 var(--sp-4); gap: 0; } .logo { height: var(--header-h); } .hamburger { height: var(--header-h); } /* Nav: in-flow, full width, sits below the logo row */ .header-nav { display: none; position: static; width: 100%; flex-basis: 100%; flex-direction: column; background: var(--c-bg); border-top: 1px solid var(--c-border); padding: 0; gap: 0; } .header-nav.nav-open { display: flex; } /* Dropdown container: static, full width */ .nav-dropdown { position: static; width: 100%; } /* Sub-menu: always expanded, full width, no chrome */ .nav-dropdown-menu { display: flex !important; flex-direction: column !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; position: static !important; width: 100% !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; background: transparent !important; padding: 0 0 var(--sp-2) !important; margin: 0 !important; min-width: 0 !important; } /* Toggle → static section label (Tools / Admin) */ .nav-dropdown-toggle { display: block !important; width: 100%; text-align: left !important; padding: var(--sp-3) var(--sp-4) var(--sp-1) !important; font-size: 0.68rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.09em !important; color: var(--c-ink-ghost) !important; pointer-events: none !important; cursor: default !important; border-radius: 0 !important; border-top: 1px solid var(--c-border) !important; background: none !important; } /* Section labels within menus (CHARACTERS, IMAGES, PROMPTS) */ .nav-dropdown-section { text-align: left; padding-left: var(--sp-5) !important; } .nav-dropdown-section:not(:first-child) { padding-top: var(--sp-3) !important; } /* Sub-menu link items — full width, left-aligned, indented */ .nav-dropdown-item { width: 100% !important; text-align: left !important; justify-content: flex-start !important; padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-5) !important; white-space: normal !important; } .nav-dropdown-sub { padding-left: var(--sp-8) !important; } /* Hide the "Back" breadcrumb */ .nav-back-btn { display: none !important; } /* Standalone anchor nav-links (Images, History, username, Sign out) */ a.nav-link { display: block; width: 100%; text-align: left; padding: var(--sp-3) var(--sp-4); border-radius: 0; border-top: 1px solid var(--c-border); } /* Credits → full-width block, no pill */ .nav-credits { display: block !important; width: 100%; text-align: left; border-top: 1px solid var(--c-border); border-radius: 0 !important; margin: 0 !important; padding: var(--sp-3) var(--sp-4) !important; font-size: 0.875rem !important; background: var(--c-bg-inset) !important; color: var(--c-accent) !important; letter-spacing: normal !important; white-space: nowrap; } .nav-credits:hover { background: var(--c-accent) !important; color: #fff !important; } } .generate-panel { padding: 0 var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; } .gen-actions { display: flex; flex-direction: column; gap: var(--sp-2); } /* ========================================================= PROMPT STYLE TOGGLE ========================================================= */ .style-toggle { display: flex; border: 1.5px solid var(--c-border-mid); border-radius: var(--r-md); overflow: hidden; flex-shrink: 0; } .style-btn { flex: 1; padding: var(--sp-2) var(--sp-3); background: transparent; border: none; font-family: var(--font-sans); font-size: 0.8rem; font-weight: 500; color: var(--c-ink-soft); cursor: pointer; transition: background 0.15s, color 0.15s; letter-spacing: 0.02em; } .style-btn + .style-btn { border-left: 1.5px solid var(--c-border-mid); } .style-btn:hover { background: var(--c-bg-inset); color: var(--c-ink); } .style-btn--active { background: var(--c-accent-pale); color: var(--c-accent); } .style-hint { font-size: 0.7rem; color: var(--c-ink-ghost); letter-spacing: 0.03em; padding: 0 var(--sp-1); min-height: 1em; } .style-hint-inline { font-size: 0.8rem; color: var(--c-ink-ghost); } .btn--full { width: 100%; } /* ========================================================= RESULT STRIP ========================================================= */ /* ── Suggestion drawer ── */ .suggestion-title { font-family: var(--font-serif); font-size: 1rem; font-weight: 500; color: var(--c-ink); margin-bottom: var(--sp-1); } .suggestion-desc { font-size: 0.8rem; color: var(--c-ink-soft); margin-bottom: var(--sp-3); } .suggestion-input { width: 100%; box-sizing: border-box; font-family: var(--font-sans); font-size: 0.875rem; color: var(--c-ink); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-3); resize: vertical; transition: border-color 0.15s; line-height: 1.5; } .suggestion-input:focus { outline: none; border-color: var(--c-accent-mid); } .suggestion-footer { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-2); } .suggestion-chars { font-size: 0.75rem; color: var(--c-ink-ghost); } .suggestion-thanks { font-size: 0.875rem; color: var(--c-accent); padding: var(--sp-3) 0; } .suggestion-tab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; background: var(--c-accent); color: #fff; border: none; border-radius: var(--r-md) 0 0 var(--r-md); padding: var(--sp-5) var(--sp-3); font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; z-index: 400; transition: background 0.15s, box-shadow 0.15s; box-shadow: -2px 0 10px rgba(0,0,0,0.12); line-height: 1; } .suggestion-tab:hover { background: var(--c-accent-mid); } /* ── Cookie consent bar ───────────────────────────────────────────────────── */ .cookie-bar { position: fixed; bottom: 1.5rem; right: -400px; width: 320px; background: var(--c-bg-raised); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: -4px 6px 28px rgba(0, 0, 0, 0.22); z-index: 700; padding: var(--sp-5); transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; gap: var(--sp-3); } .cookie-bar.is-open { right: 1.5rem; } .cookie-bar-title { font-family: var(--font-serif); font-size: 0.95rem; font-weight: 600; color: var(--c-ink); margin: 0; } .cookie-bar-text { font-size: 0.8rem; color: var(--c-ink-mid); line-height: 1.55; margin: 0; } .cookie-bar-text a { color: var(--c-accent-mid); text-decoration: none; } .cookie-bar-text a:hover { text-decoration: underline; } .cookie-bar-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); } .suggestion-drawer { position: fixed; right: -380px; top: 0; height: 100vh; width: 360px; background: var(--c-bg-raised); border-left: 1px solid var(--c-border); box-shadow: -6px 0 28px rgba(0,0,0,0.14); z-index: 399; transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; display: flex; flex-direction: column; } .suggestion-drawer.is-open { right: 0; } .suggestion-drawer-inner { padding: var(--sp-8) var(--sp-6) var(--sp-10); display: flex; flex-direction: column; gap: var(--sp-4); } .suggestion-drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); } .suggestion-drawer-close { flex-shrink: 0; background: none; border: none; font-size: 1.1rem; line-height: 1; color: var(--c-ink-ghost); cursor: pointer; padding: 2px 4px; border-radius: var(--r-sm); transition: color 0.12s, background 0.12s; margin-top: 2px; } .suggestion-drawer-close:hover { color: var(--c-ink); background: var(--c-bg-inset); } .result-strip { border-top: 1px solid var(--c-border); background: var(--c-bg-raised); } .result-strip-inner { max-width: 1160px; margin: 0 auto; padding: var(--sp-10) var(--sp-8); } /* Loading */ .result-loading { display: flex; align-items: center; gap: var(--sp-4); color: var(--c-ink-soft); font-size: 0.9rem; padding: var(--sp-6) 0; } .spinner { width: 20px; height: 20px; border: 2px solid var(--c-border-mid); border-top-color: var(--c-accent); border-radius: 50%; animation: spin 0.75s linear infinite; flex-shrink: 0; } @keyframes spin { to { transform: rotate(360deg); } } /* Success */ .result-success { display: flex; flex-direction: column; gap: var(--sp-5); } .result-success .result-actions { margin-top: var(--sp-4); } .result-meta { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; } .result-eyebrow { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: var(--c-accent-mid); } .result-model { font-size: 0.72rem; color: var(--c-ink-ghost); letter-spacing: 0.04em; } .result-prompt { font-family: var(--font-serif); font-size: clamp(1.1rem, 2.5vw, 1.4rem); line-height: 1.6; color: var(--c-ink); background: var(--c-bg); border: 1.5px solid var(--c-border); border-left: 4px solid var(--c-accent); border-radius: var(--r-md); padding: var(--sp-6) var(--sp-8); white-space: pre-wrap; word-break: break-word; } .result-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; } /* Error */ .result-error { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6); background: #fdf3f2; border: 1px solid #e8cbc8; border-radius: var(--r-md); color: var(--c-warn); font-size: 0.875rem; } .error-icon { font-size: 1.1rem; flex-shrink: 0; } /* Image generation area */ #imageSection { display: flex; flex-direction: column; gap: var(--sp-4); border-top: 1px solid var(--c-border); padding-top: var(--sp-6); margin-top: var(--sp-2); } .image-loading { display: flex; align-items: center; gap: var(--sp-4); color: var(--c-ink-soft); font-size: 0.9rem; padding: var(--sp-4) 0; } .image-result { display: flex; flex-direction: column; gap: var(--sp-4); } .generated-img { display: block; max-width: min(100%, 640px); width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--c-border); box-shadow: var(--shadow-raised); } .image-actions { display: flex; gap: var(--sp-3); } .image-error { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); background: #fdf3f2; border: 1px solid #e8cbc8; border-radius: var(--r-md); color: var(--c-warn); font-size: 0.875rem; } .btn--image { border-color: var(--c-accent-mid); color: var(--c-accent); } .btn--image:hover:not(:disabled) { background: var(--c-accent-pale); } .btn--image:disabled { opacity: 0.55; cursor: not-allowed; } /* ── Aspect-ratio picker (builder page) ─────────────────────────────────── */ .img-size-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--c-border); } .img-size-label { font-size: 0.78rem; font-family: var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); white-space: nowrap; } .ratio-pills { display: flex; flex-wrap: wrap; gap: 0.375rem; } .ratio-pill { display: inline-flex; cursor: pointer; } .ratio-pill input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } .ratio-pill span { display: inline-block; padding: 0.25rem 0.6rem; border: 1px solid var(--c-border); border-radius: 999px; font-size: 0.78rem; font-family: var(--font-sans); color: var(--c-muted); background: transparent; transition: border-color 0.15s, background 0.15s, color 0.15s; user-select: none; } .ratio-pill input[type="radio"]:checked + span { border-color: var(--c-accent); background: var(--c-accent-pale); color: var(--c-accent); } .ratio-pill:hover span { border-color: var(--c-accent-mid); color: var(--c-fg); } /* ── Format pills (JPEG / PNG) — warm amber ───────────────────────────── */ .ratio-pill:has(input[name="imgFormat"]) span, .ratio-pill:has(input[name="rcImgFormat"]) span, .ratio-pill:has(input[name="igFormat"]) span { border-color: #c9a87a; color: #7d5c3e; } .ratio-pill:has(input[name="imgFormat"]:checked) span, .ratio-pill:has(input[name="rcImgFormat"]:checked) span, .ratio-pill:has(input[name="igFormat"]:checked) span { border-color: #7d5c3e; background: #ece0d2; color: #7d5c3e; } .ratio-pill:has(input[name="imgFormat"]):hover span, .ratio-pill:has(input[name="rcImgFormat"]):hover span, .ratio-pill:has(input[name="igFormat"]):hover span { border-color: #7d5c3e; color: #5a3e26; } /* ── Model pills — muted teal-slate (any name ending in Model, or model-{id}) */ .ratio-pill:has(input[name$="Model"]) span, .ratio-pill:has(input[name^="model-"]) span { border-color: #7aaab8; color: #3e5e6a; } .ratio-pill:has(input[name$="Model"]:checked) span, .ratio-pill:has(input[name^="model-"]:checked) span { border-color: #3e5e6a; background: #d6e5eb; color: #3e5e6a; } .ratio-pill:has(input[name$="Model"]):hover span, .ratio-pill:has(input[name^="model-"]):hover span { border-color: #3e5e6a; color: #244050; } /* ── Format pills (fmt-{id}) — warm amber ─────────────────────────── */ .ratio-pill:has(input[name^="fmt-"]) span { border-color: #c9a87a; color: #7d5c3e; } .ratio-pill:has(input[name^="fmt-"]:checked) span { border-color: #7d5c3e; background: #ece0d2; color: #7d5c3e; } .ratio-pill:has(input[name^="fmt-"]):hover span { border-color: #7d5c3e; color: #5a3e26; } /* ── Prompt-type pills (ptype-{id}) — sage green ──────────────────── */ .ratio-pill:has(input[name^="ptype-"]) span { border-color: #7aab8a; color: #3a6348; } .ratio-pill:has(input[name^="ptype-"]:checked) span { border-color: #3a6348; background: #d4ead9; color: #3a6348; } .ratio-pill:has(input[name^="ptype-"]):hover span { border-color: #3a6348; color: #1e4230; } /* ── Image-gen card utilities ────────────────────────────────────── */ .btn-generate-img { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid var(--c-accent-mid); border-radius: var(--r-md); padding: var(--sp-1) var(--sp-3); font-family: var(--font-sans); font-size: 0.78rem; color: var(--c-accent); cursor: pointer; transition: background 0.15s; } .btn-generate-img:hover:not(:disabled) { background: var(--c-accent-pale); } .btn-generate-img:disabled { opacity: 0.5; cursor: not-allowed; } .img-gen-error { font-size: 0.75rem; color: var(--c-warn); margin-top: var(--sp-2); display: none; } /* ── Image-gen controls bar (generator pages) ───────────────────────────────── */ .img-gen-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); } .img-gen-bar--boxed { background: var(--c-bg-raised); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); } .ratio-res-hint { flex: 0 0 100%; } .img-gen-groups-row { flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-1); } .img-gen-group { display: flex; flex-direction: column; gap: var(--sp-2); } .img-gen-group-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted); } /* ── Save-character modal extras ────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; } .modal-overlay[hidden] { display: none; } .modal-box { background: var(--c-bg-raised); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 1.75rem 1.75rem 1.5rem; max-width: 420px; width: 100%; box-shadow: 0 8px 32px rgba(0,0,0,0.25); } .modal-title { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; margin: 0 0 0.6rem; color: var(--c-fg); } .modal-body { font-size: 0.875rem; color: var(--c-muted); line-height: 1.6; margin: 0 0 1rem; } .modal-input { width: 100%; box-sizing: border-box; padding: 0.55rem 0.75rem; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg-inset); color: var(--c-fg); font-family: var(--font-sans); font-size: 0.9rem; outline: none; transition: border-color 0.15s; } .modal-input:focus { border-color: var(--c-accent); } .modal-save-error { font-size: 0.78rem; color: var(--c-warn); margin-top: 0.4rem; min-height: 1rem; } .modal-actions { display: flex; gap: 0.75rem; justify-content: flex-end; } .modal-cancel-btn { display: inline-flex; align-items: center; background: none; border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 0.3rem 1rem; font-family: var(--font-sans); font-size: 0.85rem; color: var(--c-muted); cursor: pointer; transition: border-color 0.15s, color 0.15s; } .modal-cancel-btn:hover { border-color: var(--c-fg); color: var(--c-fg); } /* ── Character-loaded banner ─────────────────────────────────────────────── */ .char-load-banner { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); background: var(--c-accent); color: #fff; font-family: var(--font-sans); font-size: 0.875rem; padding: 0.55rem 1.25rem; border-radius: 999px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); z-index: 900; white-space: nowrap; } .char-load-banner[hidden] { display: none; } /* ─── Page header cost note ─────────────────────────────────────────────── */ .page-cost-note { display: inline-flex; align-items: center; margin-top: var(--sp-3); font-size: 0.8125rem; color: var(--c-ink-soft); gap: 5px; } .page-cost-note strong { color: var(--c-ink); } /* ─── Page header history link ──────────────────────────────────────────── */ .page-history-link { display: block; margin-top: var(--sp-3); font-size: 0.8125rem; font-weight: 500; color: var(--c-accent); text-decoration: none; transition: opacity 0.15s; } .page-history-link:hover { opacity: 0.75; } /* ========================================================= OLD PROMPT-PANEL — kept for reference, unused ========================================================= */ .prompt-panel, .prompt-output, .prompt-placeholder, .panel-actions { display: none; } /* ========================================================= SHARED PAGE LAYOUT Centralised so individual pages don't redefine these. ========================================================= */ .page-wrap { max-width: 1160px; margin: 0 auto; padding: var(--sp-10) var(--sp-8) var(--sp-16); } .page-header { margin-bottom: var(--sp-8); } .page-title { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 500; color: var(--c-ink); margin-bottom: var(--sp-1); } .page-subtitle { color: var(--c-ink-soft); font-size: 0.875rem; line-height: 1.6; } /* Shared tool form components (art_prompt, prompt_mania, prompt_remix) */ .tool-card-body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); } .tool-card-footer { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--c-border); display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; } .field-label { display: block; font-size: 0.78rem; font-weight: 500; color: var(--c-ink-soft); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--sp-2); } .field-hint { font-size: 0.78rem; color: var(--c-ink-ghost); margin-top: var(--sp-1); } .field-textarea { width: 100%; box-sizing: border-box; background: var(--c-bg-inset); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-3); font-family: var(--font-sans); font-size: 0.875rem; color: var(--c-ink); outline: none; resize: vertical; transition: border-color 0.15s; line-height: 1.6; } .field-textarea:focus { border-color: var(--c-accent-mid); } /* Variation cards grid � 2-col desktop, 1-col mobile */ .variations-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } @media (max-width: 640px) { .variations-grid { grid-template-columns: 1fr; } } /* Breadcrumb */ .breadcrumb { display: flex; align-items: center; gap: 0.4rem; padding: var(--sp-2) var(--sp-6); font-size: 0.78rem; color: var(--c-ink-ghost); border-bottom: 1px solid var(--c-border); background: var(--c-bg-raised); flex-wrap: wrap; } .breadcrumb a { color: var(--c-ink-soft); text-decoration: none; } .breadcrumb a:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; } .breadcrumb-sep { color: var(--c-border-mid); } .breadcrumb-current { color: var(--c-ink-mid); font-weight: 500; }