.metaTag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;border:1px solid var(--meta-tag-border);background:var(--meta-tag-bg);color:var(--meta-tag-text);font-size:11px;font-weight:600;letter-spacing:.3px;line-height:1;text-transform:none;white-space:nowrap}
.metaTag--model{background:var(--meta-tag-model-bg);border-color:var(--meta-tag-model-border);color:#dbe8ff}
html[data-theme='light'] .metaTag--model{color:#0f172a}
.metaTag--more{background:var(--meta-tag-more-bg);border-color:transparent;color:var(--muted)}
.evalBadge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-weight:700;font-size:.82rem;letter-spacing:.2px;border:1px solid transparent;color:var(--text);background:var(--overlay-1)}
.evalBadge--tier-elite{background:rgba(16,185,129,0.22);border-color:rgba(16,185,129,0.65);color:var(--text)}
html[data-theme='light'] .evalBadge--tier-elite{color:#064e3b}
.evalBadge--tier-strong{background:rgba(52,211,153,0.22);border-color:rgba(5,150,105,0.55);color:var(--text)}
html[data-theme='light'] .evalBadge--tier-strong{color:#065f46}
.evalBadge--tier-average{background:rgba(245,158,11,0.22);border-color:rgba(180,83,9,0.55);color:#fef3c7}
html[data-theme='light'] .evalBadge--tier-average{color:#b45309}
.evalBadge--tier-low{background:rgba(239,68,68,0.22);border-color:rgba(185,28,28,0.55);color:#fee2e2}
html[data-theme='light'] .evalBadge--tier-low{color:#b91c1c}
.evalBadge__label{font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;opacity:.75}
.evalBadge__score{font-variant-numeric:tabular-nums}
.iconBtn-static{cursor:default !important;opacity:0.9}
@import url('/assets/theme.css');

:root{
	/* Dark-mode friendly base palette (semantic variables) */
	--bg1: #071025; /* deep navy */
	--bg2: #0b1424; /* slightly lighter */
	--surface: #0e1626;
	--card-bg: linear-gradient(180deg, var(--overlay-1), var(--overlay-1));
	--card-border: var(--overlay-2);
	--muted: #9fb0c6; /* soft secondary text */
	--muted-2: #c3d2e6;
	--text: #e6eef9; /* primary text for dark theme */
	--link: #cfe3ff;
	--link-hover: #ffffff;
	--link-underline: rgba(207,227,255,0.75); /* underline accent for links */
	--accent: #10b981; /* action color (emerald) */
	--accent2: #2dd4bf; /* accent gradient */
	--accent-contrast: #052017;
	--title-green: #7c5cff; /* friendly purple for headings */
	--danger: #f87171;
	--success: #88f7a6;
	--card-contrast: var(--overlay-2); /* subtle contrast for input backgrounds */
	--accent-border: rgba(16,185,129,0.55);
	--accent-border-weak: rgba(16,185,129,0.18);
	/* decorative glow tokens (used in page background gradients) */
	--glow-purple: rgba(124,92,255,0.25);
	--glow-teal: rgba(45,212,191,0.18);
	--focus-outline: rgba(45,212,191,0.7);
	/* header/backdrop overlay */
	--header-overlay: rgba(9,12,24,0.35);
	/* accent shadow hover variant */
	--accent-shadow-hover: rgba(16,185,129,0.34);
	/* overlay / shadow tokens to centralize alpha layers */
	--overlay-1: rgba(255,255,255,0.02);
	--overlay-2: rgba(255,255,255,0.06);
	--overlay-3: rgba(255,255,255,0.08);
	--overlay-inset: rgba(255,255,255,0.06);
	--shadow-1: rgba(0,0,0,0.25);
	--shadow-2: rgba(0,0,0,0.45);
	--accent-shadow: rgba(16,185,129,0.25);
	--accent-shadow-weak: rgba(16,185,129,0.18);
	--inset-border-dark: rgba(0,0,0,0.15);
	--inset-border-light: rgba(255,255,255,0.7);
	--light-sideitem-accent-start: rgba(25,195,138,0.20);
	--light-sideitem-accent-end: rgba(14,160,107,0.13);
	--segToggle-light-bg: rgba(16,185,129,0.08);
	--segToggle-light-border: rgba(16,185,129,0.22);
	--account-yellow-bg-start: rgba(45,212,191,0.60);
	--account-yellow-bg-end: rgba(19,195,154,0.38);
	--account-yellow-border: rgba(8,134,97,0.55);
	--account-yellow-hover-shadow: rgba(8,134,97,0.35);
	--chip-model-bg: rgba(10,82,180,0.12);
	--chip-model-border: rgba(10,82,180,0.3);
	--tagopt-bg-light: rgba(0,0,0,0.05);
	--tagopt-border-light: rgba(0,0,0,0.1);
	--tagopt-selected-bg: rgba(10,82,180,0.15);
	--tagopt-selected-border: rgba(10,82,180,0.35);
	--themeToggle-light-border: rgba(0,0,0,0.14);
	/* Flash/Toast semantic colors */
	--flash-success-bg: #0f3b2c;
	--flash-success-border: #1db954;
	--flash-success-text: #bff2d0;
	--flash-error-bg: #3a0d0d;
	--flash-error-border: #ff4d4f;
	--flash-error-text: #ffd6d6;
	--flash-info-bg: #0a223d;
	--flash-info-border: #3ea6ff;
	--flash-info-text: #d3ecff;
	--flash-warn-bg: #3a2a08;
	--flash-warn-border: #ffb020;
	--flash-warn-text: #ffe7b8;
	--prompt-card-bg: var(--card-bg);
	--prompt-card-border: var(--card-border);
	--prompt-card-shadow: inset 0 1px 0 var(--overlay-inset), 0 22px 48px var(--shadow-1);
	--prompt-card-divider: var(--overlay-2);
	--prompt-body-bg: var(--surface);
	--prompt-body-border: var(--overlay-3);
	--prompt-body-text: var(--text);
	--meta-tag-bg: rgba(255,255,255,0.08);
	--meta-tag-border: var(--overlay-3);
	--meta-tag-text: var(--muted-2);
	--meta-tag-model-bg: rgba(56,132,255,0.18);
	--meta-tag-model-border: rgba(56,132,255,0.38);
	--meta-tag-more-bg: rgba(15,23,42,0.35);
}
html,body{min-height:100%}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);color:var(--text);background:radial-gradient(1200px 600px at 70% -10%,var(--glow-purple),transparent),radial-gradient(1000px 500px at -10% 20%,var(--glow-teal),transparent),linear-gradient(180deg,var(--bg1),var(--bg2));min-height:100vh;background-attachment:fixed,fixed,fixed;font-size:var(--base-font-size);line-height:var(--body-line-height)}
.listReset{list-style:none;margin:0;padding:0}
.hero { max-width: var(--content-max-width); margin: 64px auto 0; padding: 24px; display:grid; grid-template-columns: 1.1fr .9fr; gap: 42px; align-items:center; }
@media (max-width: 960px){ .hero { grid-template-columns: 1fr; text-align:center; } .points{margin:0 auto;} }
.title { font-size: clamp(28px, 6vw, 54px); line-height:1.05; margin: 8px 0 14px; letter-spacing: -.02em; }
.subtitle { font-size: clamp(16px, 2.4vw, 18px); color: var(--muted); max-width: 58ch; }
.points { display:flex; flex-direction:column; gap:14px; margin-top:22px; }
.point { display:flex; gap:12px; align-items:flex-start; color:var(--muted-2); }
.emoji { font-size: 1.2rem; }
.ctaRow { margin-top:28px; display:flex; gap:14px; align-items:center; }
@media (max-width: 960px){ .ctaRow{ justify-content:center; } }
.cta { appearance:none; border:none; cursor:pointer; padding:14px 20px; border-radius:12px; font-weight:700; letter-spacing:.2px; color: var(--accent-contrast); background: linear-gradient(180deg, var(--accent2), var(--accent)); box-shadow: 0 18px 40px var(--accent-shadow); text-decoration:none; }
.cta:hover { transform: translateY(-1px); box-shadow: 0 24px 50px var(--accent-shadow-hover); }
.ctaGhost { text-decoration:none; color: var(--text); padding:12px 14px; border-radius:10px; border:1px solid var(--card-border); background: var(--card-bg); }
.card { background: var(--card-bg); border:1px solid var(--card-border); border-radius: 16px; padding: 22px; box-shadow: inset 0 1px 0 var(--overlay-inset), 0 30px 80px var(--shadow-1); }
.card h3 { margin: 0 0 10px; font-size: 1.1rem; color: var(--text); }
.badge { font-size:.75rem; color: var(--accent-contrast); background: linear-gradient(180deg, var(--accent2), #13c3ab); padding:3px 8px; border-radius:999px; font-weight:700; }
.pageWrap{max-width:var(--content-max-width);margin:72px auto 96px;padding:0 clamp(20px,4vw,40px);display:flex;flex-direction:column;gap:36px}
.pageWrap--narrow{max-width:640px}
.pageWrap--wide{max-width:980px}
.sectionStack{display:grid;gap:32px}
.sectionCard{background:var(--card-bg);border:1px solid var(--card-border);border-radius:20px;padding:28px;box-shadow:inset 0 1px 0 var(--overlay-inset),0 30px 80px var(--shadow-1)}
.sectionCard-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}
.sectionCard-title{margin:0;font-size:1.25rem;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.sectionCard-copy{margin:0;font-size:.96rem;color:var(--muted);line-height:1.5}
.sectionCard-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.sectionCard-divider{height:1px;background:var(--overlay-2);margin:20px -4px}
.formStack{display:grid;gap:20px}
.fieldGroup{display:flex;flex-direction:column;gap:8px}
.fieldRow{display:flex;flex-wrap:wrap;gap:16px}
.fieldRow.alignCenter{align-items:center}
.fieldRow>.fieldGroup{flex:1 1 min(260px,100%)}
.fieldLabel{font-size:.92rem;font-weight:600;letter-spacing:.02em;color:var(--muted-2)}
.inputControl,.selectControl,.textAreaControl{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--card-border);background:rgba(255,255,255,0.04);color:var(--text);font-size:1rem;line-height:1.45;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.textAreaControl{min-height:120px;resize:vertical}
.inputControl:focus,.selectControl:focus,.textAreaControl:focus{outline:2px solid var(--focus-outline);outline-offset:2px;border-color:transparent;box-shadow:0 0 0 3px rgba(45,212,191,0.12)}
.selectControl{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) calc(50% - 4px),calc(100% - 12px) calc(50% - 4px);background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field-error{border-color:rgba(239,68,68,0.65)!important;box-shadow:0 0 0 3px rgba(239,68,68,0.2)}
.fieldHint{font-size:.85rem;color:var(--muted);line-height:1.35}
.formActions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.segmentTabs{display:inline-flex;gap:6px;padding:6px;border-radius:14px;background:var(--overlay-1);border:1px solid var(--overlay-2)}
.segmentTabs__btn{appearance:none;background:transparent;border:none;border-radius:12px;padding:10px 18px;font-weight:700;letter-spacing:.02em;color:var(--muted-2);cursor:pointer;transition:transform .16s ease,box-shadow .2s ease,background .2s ease}
.segmentTabs__btn:hover{transform:translateY(-1px)}
.segmentTabs__btn.is-active{background:linear-gradient(180deg,var(--accent2),var(--accent));color:var(--accent-contrast);box-shadow:0 16px 38px var(--accent-shadow)}
.ctaGrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ctaTile{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-radius:14px;background:linear-gradient(180deg,var(--glow-teal),var(--overlay-1));border:1px solid var(--accent-border);color:var(--text);text-decoration:none;font-weight:600;transition:transform .16s ease,box-shadow .2s ease}
.ctaTile:hover{transform:translateY(-2px);box-shadow:0 18px 44px var(--accent-shadow)}
.ctaTile .ctaTile-count{font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.tableCard{border:1px solid var(--card-border);border-radius:18px;background:var(--card-bg);box-shadow:inset 0 1px 0 var(--overlay-inset),0 30px 80px var(--shadow-1);overflow:hidden}
.dataTable{width:100%;border-collapse:collapse}
.dataTable thead th{padding:14px 20px;text-align:left;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,0.02)}
.dataTable tbody td{padding:14px 20px;border-top:1px solid var(--overlay-2);font-size:.95rem;color:var(--text);vertical-align:middle}
.dataTable tbody tr:hover{background:rgba(255,255,255,0.03)}
.dataTable-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.pillLink{appearance:none;background:transparent;border:none;color:var(--link);font-weight:600;text-decoration:underline;cursor:pointer;padding:0}
.surfaceNote{font-size:.9rem;color:var(--muted);margin-top:10px}
.cardGrid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cardGrid-item{background:var(--card-bg);border:1px solid var(--card-border);border-radius:18px;padding:22px;box-shadow:inset 0 1px 0 var(--overlay-inset),0 24px 60px var(--shadow-1)}
.cardGrid-item h3{margin:0 0 10px;font-size:1.12rem}
.cardGrid-item p{margin:0;color:var(--muted);line-height:1.5}
.authShell{display:flex;flex-direction:column;gap:24px}
.authIntro{display:flex;flex-direction:column;gap:12px}
.authForms{display:grid;gap:24px}
.authForms form{display:none}
.authForms form.is-active{display:grid;gap:18px}
.authForms .segmentTabs{align-self:flex-start}
.authForms .formActions{margin-top:6px}
.authForms .rememberRow{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--muted)}
.authHelpRow{display:flex;justify-content:space-between;gap:16px;margin-top:10px;color:var(--muted);font-size:.92rem}
.authHelpRow a{color:var(--link);text-decoration:underline}
.authMessage{padding:14px 18px;border-radius:12px;border:1px solid var(--flash-success-border);background:var(--flash-success-bg);color:var(--flash-success-text);font-weight:600}
.authMessage a{color:inherit;font-weight:700;text-decoration:underline;text-decoration-color:rgba(255,255,255,0.5)}
html[data-theme='light'] .authMessage a{text-decoration-color:rgba(0,0,0,0.4)}
.authMessage.is-hidden{display:none}
.authMessage.error{border-color:var(--flash-error-border);background:var(--flash-error-bg);color:var(--flash-error-text)}
.authMessage.info{border-color:var(--flash-info-border);background:var(--flash-info-bg);color:var(--flash-info-text)}
.authMessage.warning{border-color:var(--flash-warn-border);background:var(--flash-warn-bg);color:var(--flash-warn-text)}
.badgeStack{display:flex;flex-wrap:wrap;gap:8px}
.authAuxForm{display:none;gap:16px;margin-top:16px}
.authAuxForm.is-active{display:grid}
.policyTooltip{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--overlay-2);background:rgba(255,255,255,0.04);color:var(--muted);font-weight:600;cursor:help;position:relative}
.policyTooltip[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:50%;top:120%;transform:translateX(-50%);background:rgba(12,18,30,0.92);color:#f8fafc;padding:10px 12px;border-radius:10px;font-size:.85rem;line-height:1.4;min-width:180px;max-width:260px;box-shadow:0 18px 44px rgba(0,0,0,0.4);pointer-events:none;z-index:20}
.authError{display:none;color:#fca5a5;font-size:.92rem;line-height:1.4}
.authError.is-visible{display:block}
.scroller { max-width: var(--content-max-width); margin: 22px auto 70px; padding: 0 24px; }
.scroller h3 { margin: 0 0 12px; font-size:1.05rem; color:var(--text) }
.promptCardHead{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.metaTitle{font-weight:800;color:var(--text);font-size:1.02rem;margin:0;padding:0;letter-spacing:0}
/* Keep the purple/green accent for lighter themes if explicitly using a light scheme */
html[data-theme='light'] .metaTitle{color:var(--title-green)}
/* promptMeta/metaLeft removed: keep only a compact actions row when needed */
.metaActions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--prompt-card-divider);flex-wrap:wrap}
.metaActions-info{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.metaActions-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}
.metaActions .iconRow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.metaActions .iconBtn{width:30px;height:30px;border-radius:9px}
.metaActions .iconRow form{display:inline-flex;margin:0}
.metaActions .iconRow form .iconBtn{margin:0}

/* Small icon button SVG sizing and visual polish for collapse/expand and copy/clear icons */
.iconBtn svg{width:18px;height:18px;display:block}
.iconBtn .ic-collapse, .iconBtn .ic-expand{width:18px;height:18px}
.iconBtn .ic-collapse text, .iconBtn .ic-expand text{font-weight:700;fill:currentColor}
.iconBtn.ic-copy svg{stroke:var(--accent);color:var(--accent);}
.iconBtn.ic-copy svg polyline{stroke:var(--accent);}
.iconBtn.ic-copy:hover{box-shadow:0 6px 18px var(--accent-shadow);} 
.iconBtn.ic-clear svg{stroke:var(--danger);color:var(--danger);}

/* Make the circled numbers slightly larger for emphasis */
.iconBtn .ic-collapse, .iconBtn .ic-expand{transform:scale(1.2);}

/* Ensure clear buttons (X) are red across per-section and combined controls */
.iconBtn.ic-clear, .iconBtn.ic-clear svg{color:var(--danger);border-color:transparent}
.iconBtn.ic-clear:hover{box-shadow:0 6px 18px rgba(248,113,113,0.12)}
/* More specific override for prompt header icon rows where a general .iconBtn color may be applied */
.promptCard .iconRow .iconBtn.ic-clear{color:var(--danger)}
.promptCard .iconRow .iconBtn.ic-clear svg{stroke:var(--danger); color:var(--danger)}

/* (Removed promptMeta responsive rules) */

/* Click-to-cycle card background (four light watery accents) */
.promptCard{transition:background 520ms cubic-bezier(.2,.9,.2,1), transform 160ms ease;background:var(--prompt-card-bg);border:1px solid var(--prompt-card-border);border-radius:14px;padding:14px;box-shadow:var(--prompt-card-shadow);position:relative}
.promptCard.bgCycle-0,
.promptCard.bgCycle-1,
.promptCard.bgCycle-2,
.promptCard.bgCycle-3{background:var(--prompt-card-bg);box-shadow:var(--prompt-card-shadow)}
.promptBody{transition:background 520ms cubic-bezier(.2,.9,.2,1), transform 160ms ease;margin-top:10px;opacity:1;background:var(--prompt-body-bg);border:1px solid var(--prompt-body-border);border-radius:10px;padding:10px;min-height:68px;max-height:180px;overflow:auto;white-space:pre-wrap;line-height:1.45;color:var(--prompt-body-text);font-size:.95rem}
/* Ensure the visible body reflects the chosen bgCycle by overriding its border when parent has the class */
.promptCard.bgCycle-0 .promptBody{ border-color: rgba(239,68,68,0.7); }
.promptCard.bgCycle-1 .promptBody{ border-color: rgba(56,132,255,0.7); }
.promptCard.bgCycle-2 .promptBody{ border-color: rgba(124,92,255,0.7); }
.promptCard.bgCycle-3 .promptBody{ border-color: rgba(16,185,129,0.7); }
.promptCard.selected{transform:scale(0.997)}

/* Prompts feed: stronger, visible selection animation matching the Tree Map
   Scoped to .metaGrid so it only applies in feed views. Uses a slight scale,
   lift, and subtle accent glow to indicate selection. */
.metaGrid .promptCard.selected, .metaGrid .metaCard.selected{
	transform: translateY(-6px) scale(0.992);
	box-shadow: 0 28px 64px rgba(0,0,0,0.56), 0 10px 36px rgba(16,185,129,0.06);
	border-color: var(--accent-border);
	transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms ease, border-color 220ms ease;
	z-index: 6; /* bring selected card above siblings */
}
.metaGrid .promptCard.selected .promptBody, .metaGrid .metaCard.selected .promptBody{
	transform: translateY(-4px);
}

/* Apply the same visual lift on hover inside feed grids so hovering matches fork-tree feel */
.metaGrid .promptCard:not([data-protected]):hover, .metaGrid .metaCard:not([data-protected]):hover {
	transform: translateY(-6px) scale(0.992);
	box-shadow: 0 28px 64px rgba(0,0,0,0.56), 0 10px 36px rgba(16,185,129,0.06);
	border-color: var(--accent-border);
	transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms ease, border-color 220ms ease;
	z-index: 4;
}
.metaGrid .promptCard:not([data-protected]):hover .promptBody, .metaGrid .metaCard:not([data-protected]):hover .promptBody {
	transform: translateY(-4px);
}

.metaGrid .promptCard.selected:focus-within, .metaGrid .metaCard.selected:focus-within,
.metaGrid .promptCard.selected:focus, .metaGrid .metaCard.selected:focus{
	outline: 3px solid var(--focus-outline);
	outline-offset: 4px;
}
/* Link treatments in prompt bodies */
html[data-theme='light'] .promptBody a{ color:#2b50a2; text-decoration-color: rgba(21,58,138,.5); }
html[data-theme='light'] .promptBody a:hover{ color:#1d3b7d; }
html:not([data-theme='light']) .promptBody a{ color: var(--link); text-decoration-color: var(--link-underline); }
html:not([data-theme='light']) .promptBody a:hover{ color: var(--link-hover); }

/* small collection pill inside card meta */
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;border:1px solid var(--card-border);background:var(--overlay-1);color:var(--muted);font-size:11px;line-height:1}
.pill-mini{font-size:10px;padding:2px 6px}

/* focused card outline for keyboard users */
.promptCard:focus-within, .promptCard:focus{outline:3px solid var(--focus-outline); outline-offset:4px}

/* Move dropdown styles */
.moveMenu{position:absolute; z-index:1000; min-width:220px; background: var(--card-bg); border:1px solid var(--card-border); border-radius:12px; box-shadow: 0 18px 48px var(--shadow-1); padding:6px; backdrop-filter: saturate(1.02) blur(3px);}
.moveMenu ul{list-style:none;margin:0;padding:4px;max-height:240px;overflow:auto}
.moveMenu li{margin:0;padding:0}
.moveMenu button.moveItem{appearance:none;background:transparent;border:none;width:100%;text-align:left;padding:8px 10px;border-radius:8px;color:var(--text);cursor:pointer}
.moveMenu button.moveItem:hover, .moveMenu button.moveItem:focus{background:var(--overlay-2)}
.moveMenu .moveHdr{font-size:.78rem;color:var(--muted);padding:6px 10px}

.promptCard{padding:10px;border-radius:14px}
.trunc{max-width:85%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}

/* Interactive: show pointer and subtle hover animation for clickable cards
   Use data-open to detect cards that should navigate. Do NOT enable for
   protected cards (data-protected) so locked cards keep their non-interactive cursor. */
.promptCard[data-open]:not([data-protected]){
	cursor: pointer;
	/* ensure smooth movement when hovering */
	transition: transform 180ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease, background 220ms ease;
}
.promptCard[data-open]:not([data-protected]):hover{
	transform: translateY(-6px);
	/* subtle deeper shadow on hover to give lift effect */
	box-shadow: 0 20px 48px rgba(0,0,0,0.44), 0 6px 30px var(--accent-shadow-weak);
}
.promptCard[data-open]:not([data-protected]):focus-within,
.promptCard[data-open]:not([data-protected]):focus{
	outline: 3px solid var(--focus-outline);
	outline-offset: 4px;
}
/* Slight inner lift for the scrollable body for a layered effect */
.promptCard[data-open]:not([data-protected]):hover .promptBody{
	transform: translateY(-3px);
}

/* Editor header & meta */
/* editor header styles removed during revert */

/* Fork-tree styles removed */

/* Allow meta titles to wrap to two lines and clamp with an ellipsis */
.metaTitle.trunc{
	display:-webkit-box;
	-webkit-box-orient:vertical;
		-webkit-line-clamp:2;
		line-clamp:2;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:normal; /* allow wrapping */
}

/* Tighter spacing and slightly reduced title size on very small screens */
@media (max-width: 420px) {
	.promptCard[data-seed] .promptCardHead{padding:12px 10px}
	.promptCard[data-seed] .metaTitle{font-size: clamp(1rem, 6vw, 1.6rem)}
	.promptCard{padding:10px}
}



.header:before{content:"";position:fixed;inset:0 0 auto 0;height:72px;background:var(--header-overlay);backdrop-filter:saturate(1.02) blur(3px);border-bottom:1px solid var(--card-border);z-index:-1;pointer-events:none}

/* Header / Brand */
.header{display:flex;align-items:center;justify-content:flex-start;padding:18px 28px;background:var(--header-overlay);border-bottom:1px solid var(--card-border);position:sticky;top:0;z-index:100}
.header{max-width:var(--content-max-width);margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;font-weight:600;letter-spacing:.2px}
.logo{height:36px;width:auto;filter:drop-shadow(0 2px 6px var(--accent-shadow))}
.brandCol{display:flex;flex-direction:column;line-height:1.05}
.badgeTiny{align-self:flex-start;margin-top:2px;font-size:10px;letter-spacing:.3px;padding:2px 6px;border-radius:999px;color:var(--accent-contrast);background:linear-gradient(180deg,var(--accent2),#13c3ab);font-weight:800}
/* Group brand + nav on the left; push account actions to the right */
.header > nav.topNav{margin-left:24px;margin-right:auto}
.headerUtilities{display:flex;align-items:center;gap:18px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.headerSearchGroup{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.headerAccountGroup{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.headerSearch{min-width:220px;padding:8px 10px;border-radius:10px;border:1px solid var(--card-border);background:var(--card-contrast);color:var(--text)}
.headerSearch::placeholder{color:var(--muted)}
.privateToggle{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--muted)}

/* Buttons */
.account,.accountBtn{font-size:.98rem;color:var(--text);font-weight:600;text-decoration:none;padding:10px 16px;border-radius:10px;background:linear-gradient(180deg,var(--glow-teal),var(--accent-border-weak));border:1px solid var(--accent-border);transition:all .18s ease}
.accountBtn.uniform{min-width:130px;text-align:center;display:inline-flex;justify-content:center;align-items:center}
.accountBtn.iconOnly{padding:8px 12px;min-width:auto;width:auto;line-height:1;display:inline-flex;justify-content:center;align-items:center;font-size:1rem}
.account:hover,.accountBtn:hover{transform:translateY(-1px);box-shadow:0 8px 24px var(--accent-shadow-weak)}

/* Sub-navigation active state (Account page): make selected button visually distinct */
.subNav .subNavBtn[aria-pressed="true"]{
	background:linear-gradient(180deg,rgba(45,212,191,.35),rgba(16,185,129,.22));
	border:1px solid rgba(16,185,129,.65);
	box-shadow:inset 0 0 0 1.5px rgba(16,185,129,.45), 0 8px 24px rgba(16,185,129,.22);
	color:var(--text);
}
.subNav .subNavBtn[aria-pressed="true"]:hover{
	transform:none;
	box-shadow:inset 0 0 0 1.5px rgba(16,185,129,.5), 0 10px 28px rgba(16,185,129,.28);
}
html[data-theme='light'] .subNav .subNavBtn[aria-pressed="true"]{
	background:linear-gradient(180deg,rgba(19,195,154,.24),rgba(19,195,154,.16));
	border-color:rgba(8,134,97,.55);
	color:#0b0f1e;
}
.softBtn{background:linear-gradient(180deg,var(--accent-border-weak),var(--overlay-1));border:1px solid var(--accent-border-weak);color:var(--text)}
.logout{color:var(--danger);text-decoration:none;font-size:.92rem}
.logout:hover{text-decoration:underline}

/* Cards / Containers */
.wrap,.containerCard{max-width:var(--content-max-width);margin:40px auto;background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;padding:24px;box-shadow:inset 0 1px 0 var(--overlay-inset),0 30px 80px var(--shadow-1)}

/* Utility: remove border and outer shadow for wrapped containers (use class="wrap noBorder") */
.wrap.noBorder{border:none;box-shadow:none}
.container{max-width:var(--content-max-width);margin:40px auto;background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;padding:24px;box-shadow:inset 0 1px 0 var(--overlay-inset),0 30px 80px var(--shadow-1)}
.container.small, .wrap.small { max-width:520px }
.smallCard{max-width:520px}

/* Forms */
input[type=text],input[type=email],input[type=password]{width:100%;padding:10px;margin-bottom:12px;border-radius:10px;border:1px solid var(--card-border);background:var(--card-contrast);color:var(--text)}

/* Title input in the prompt editor uses a light background for visual emphasis
	 but that can make text unreadable in dark theme if the color remains light.
	 Force a dark foreground and readable placeholder color for the editor title. */
#titleInput, #titleInputSimple {
	color: #052017; /* dark text to contrast the light input background */
}
#titleInput::placeholder, #titleInputSimple::placeholder {
	color: rgba(5,32,23,0.45);
}

/* If the title field is pre-populated (server-rendered value) or marked by JS, make it half-width */
#titleInput:not([value=""]), #titleInput.hasServerTitle {
	flex: 0 0 50% !important;
	max-width: 50% !important;
	width: 50% !important;
}

/* While editing the title, expand it to full width for easier typing */
#titleInput.editingTitle {
	flex: 1 1 100% !important;
	max-width: 100% !important;
	width: 100% !important;
}
button{padding:10px 18px;border-radius:10px;background:linear-gradient(180deg,var(--accent2),var(--accent));color:var(--accent-contrast);border:none;font-weight:800;cursor:pointer}
.error{color:var(--danger);margin-bottom:10px}
.success{color:var(--success);margin-bottom:10px}
/* Content links (account/profile) */
.wrap a:link,.wrap a:visited,.container a:link,.container a:visited{color:var(--link);text-decoration:none}
.wrap a:hover,.container a:hover{color:var(--link-hover);text-decoration:underline;text-decoration-color:var(--link-underline)}
.wrap a:active,.container a:active{color:#a6d3ff}
.wrap a:focus-visible,.container a:focus-visible{outline:2px solid var(--focus-outline);outline-offset:2px;border-radius:6px}
.link{color:var(--link)}

/* Account/Profile info layout */
.info{display:grid;grid-template-columns:140px 1fr;gap:6px 14px;margin:12px 0 10px}
.label{color:var(--muted)}
.value{font-weight:600}

/* Tables (admin) */
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid var(--card-border);padding:8px 10px;text-align:left;color:var(--text)}
th{color:var(--link)}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--overlay-3)}

/* Workspace layout (My Space) */
.workspace{max-width:var(--content-max-width);margin:32px auto;padding:0 24px;display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:start}
@media (max-width: 960px){.workspace{grid-template-columns:1fr}}
.workspace.noSidebar{grid-template-columns:1fr}
.sidebar{position:sticky;top:96px;align-self:start;background:linear-gradient(180deg,var(--overlay-2),var(--overlay-1));border:1px solid var(--overlay-3);border-radius:16px;padding:14px}
.sideTitle{font-weight:800;margin:4px 8px 10px;color:var(--text)}
.sideNav{display:flex;flex-direction:column;gap:6px}
.sideItem{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;color:var(--muted-2);text-decoration:none;border:1px solid transparent}
.sideItem:hover{background:var(--overlay-2)}
.sideItem.active{background:linear-gradient(180deg,var(--accent-border-weak),var(--overlay-1));border-color:var(--accent-border)}
/* Light theme variants for nav items so horizontal bars match scheme */
html[data-theme='light'] .sideItem{color:#0b0f1e}
html[data-theme='light'] .sideItem:hover{background:var(--overlay-1)}
html[data-theme='light'] .sideItem.active{background:linear-gradient(180deg,var(--light-sideitem-accent-start),var(--light-sideitem-accent-end));border-color:var(--account-yellow-border)}

/* Horizontal row variant for side navs (used on profile page) */
.rowNav{flex-direction:row;flex-wrap:wrap;gap:8px}
.rowNav .sideItem{display:inline-flex}

/* Generic panel card for content */
.panel{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;padding:20px;box-shadow:inset 0 1px 0 var(--overlay-inset),0 30px 80px var(--shadow-1)}

/* Global flash (partials/flash.php) aligns to theme via CSS variables */
.flashPanel{margin-bottom:12px;padding:12px;border-left:4px solid var(--flash-info-border);background:var(--flash-info-bg);color:var(--flash-info-text);border-radius:8px}
.flashPanel.success{border-color:var(--flash-success-border);background:var(--flash-success-bg);color:var(--flash-success-text)}
.flashPanel.error{border-color:var(--flash-error-border);background:var(--flash-error-bg);color:var(--flash-error-text)}
.flashPanel.warning{border-color:var(--flash-warn-border);background:var(--flash-warn-bg);color:var(--flash-warn-text)}
.flashPanel.info{border-color:var(--flash-info-border);background:var(--flash-info-bg);color:var(--flash-info-text)}

/* Light theme overrides for flash variables */
html[data-theme='light']{
	--flash-success-bg: #e8f5e9;
	--flash-success-border: #2e7d32;
	--flash-success-text: #1b5e20;
	--flash-error-bg: #ffebee;
	--flash-error-border: #c62828;
	--flash-error-text: #b71c1c;
	--flash-info-bg: #e3f2fd;
	--flash-info-border: #1565c0;
	--flash-info-text: #0d47a1;
	--flash-warn-bg: #fff8e1;
	--flash-warn-border: #ff8f00;
	--flash-warn-text: #e65100;
	--prompt-card-bg: #ffffff;
	--prompt-card-border: rgba(15,23,42,0.08);
	--prompt-card-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 18px 34px rgba(15,23,42,0.08);
	--prompt-card-divider: rgba(15,23,42,0.08);
	--prompt-body-bg: #ffffff;
	--prompt-body-border: rgba(15,23,42,0.12);
	--prompt-body-text: #0b0f1e;
	--meta-tag-bg: rgba(15,23,42,0.06);
	--meta-tag-border: rgba(15,23,42,0.12);
	--meta-tag-text: #0f172a;
	--meta-tag-model-bg: rgba(34,139,230,0.18);
	--meta-tag-model-border: rgba(34,139,230,0.32);
	--meta-tag-more-bg: rgba(15,23,42,0.08);
}

/* Tiny toast UI (used by __ph_toast.show) */
.ph-toast-container{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;display:flex;flex-direction:column;gap:8px;z-index:99999;pointer-events:none}
.ph-toast{pointer-events:auto;background:var(--flash-info-bg);color:var(--flash-info-text);border:1px solid var(--flash-info-border);border-radius:10px;padding:8px 12px;box-shadow:0 8px 24px var(--shadow-2);opacity:1;transition:opacity .24s ease, transform .24s ease;transform:translateY(0)}
.ph-toast.is-success{background:var(--flash-success-bg);color:var(--flash-success-text);border-color:var(--flash-success-border)}
.ph-toast.is-error{background:var(--flash-error-bg);color:var(--flash-error-text);border-color:var(--flash-error-border)}
.ph-toast.is-warning{background:var(--flash-warn-bg);color:var(--flash-warn-text);border-color:var(--flash-warn-border)}
.ph-toast.out{opacity:0;transform:translateY(10px)}

.siteFooter{max-width:1100px;margin:40px auto 80px;padding:18px 14px;font-size:14px;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.siteFooterLinks{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* Top-of-page bar navs for profile */
.topBars{max-width:var(--content-max-width);margin:14px auto 0;padding:0 24px;display:flex;flex-direction:column;gap:8px}
.topBarNav{display:flex;flex-wrap:wrap;gap:8px}
.topBarNav .sideItem{display:inline-flex}

/* Top navigation */
.topNav{display:flex;align-items:center;gap:18px}
.topNav> a,.topNav> .navItem{display:inline-flex;align-items:center}
.topNav a,.navBtn{color:var(--text);text-decoration:none;font-weight:600;letter-spacing:.2px;background:transparent;border:1px solid transparent;padding:8px 10px;border-radius:9px;cursor:pointer;transition:color .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease}
.topNav a:link,.topNav a:visited{color:var(--text);text-decoration:none}
.topNav a:hover,.navBtn:hover{color:#fff;background:var(--overlay-2);border-color:var(--overlay-2)}
.topNav a:focus-visible,.navBtn:focus-visible{outline:2px solid var(--focus-outline);outline-offset:2px}
.topNav a.active, .topNav .navBtn.active{background:linear-gradient(180deg,var(--accent-border-weak),var(--overlay-1));border:1px solid var(--accent-border-weak);color:var(--text);box-shadow:0 8px 24px var(--accent-shadow-weak)}
.topNav .navBtn{appearance:none;-webkit-appearance:none;background:transparent !important;border:1px solid transparent;box-shadow:none;color:var(--text);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.navCaret{font-size:0.85rem;color:inherit;transform:translateY(-1px)}
.navItem{position:relative}
.menuPanel{position:absolute;left:0;top:calc(100% + 8px);display:none;min-width:260px;max-width:520px;background:var(--card-bg);border:1px solid var(--overlay-3);box-shadow:0 24px 70px rgba(0,0,0,0.36);border-radius:14px;padding:16px;z-index:10000;backdrop-filter:saturate(1.08) blur(10px)}
.menuPanel a:link,.menuPanel a:visited{color:#dfe6f5;text-decoration:none}
.navItem.open .menuPanel{display:block}
.navItem .navBtn.active{background:linear-gradient(180deg,var(--accent-border-weak),var(--overlay-1));border:1px solid var(--accent-border-weak);color:#052017}
.menuGrid{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.menuCol{display:flex;flex-direction:column;gap:8px}
.menuItem{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:10px;color:var(--muted-2);text-decoration:none;transition:background .18s ease,color .18s ease, box-shadow .18s ease}
.menuItem:link,.menuItem:visited{color:#dfe6f5;text-decoration:none}
.menuItem *{text-decoration:none}
.menuItem:hover,.menuItem:focus-visible{background:var(--overlay-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--overlay-3)}
.menuItem:focus-visible{outline:none}
.menuIcon{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--overlay-1);border:1px solid var(--overlay-3);flex-shrink:0}
.miTitle{font-weight:800;color:var(--text)}
.miSub{color:var(--muted);font-size:.9rem;margin-top:2px;line-height:1.4}

/* Theme toggle button (thin line, rounded square) */
.themeToggle{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.03);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.12);cursor:pointer}
.themeToggle:hover{background:rgba(255,255,255,0.05)}
html[data-theme='light'] .themeToggle{border:1px solid var(--themeToggle-light-border);background:#fff;box-shadow:inset 0 0 0 1px var(--inset-border-light)}
.themeToggle svg{display:block}
.themeToggle .sun{color:#ffde59}
.themeToggle .moon{color:#1e293b}
html[data-theme='light'] .themeToggle .sun{display:none}
html[data-theme='light'] .themeToggle .moon{display:block}
html:not([data-theme='light']) .themeToggle .sun{display:block}
html:not([data-theme='light']) .themeToggle .moon{display:none}

/* Use emoji icon as primary visible element; hide SVGs to avoid duplicate icons */
.themeToggle svg{display:none !important}
.themeToggle .themeIcon{font-size:18px;display:inline-grid;place-items:center;width:100%;height:100%;line-height:1}
.themeToggle{padding:0}

	.themeToggle[aria-pressed="true"]{
 		box-shadow: 0 12px 40px rgba(16,185,129,0.28);
 		background: var(--accent); /* solid accent for strong contrast */
 		border-color: rgba(16,185,129,0.75);
 		color: var(--accent-contrast); /* ensure icon/text contrast */
 	}
.themeToggle:focus-visible{
	outline: 2px solid var(--focus-outline);
	outline-offset: 3px;
	border-radius: 10px;
}
/* Light-theme variants */
html[data-theme='light'] .themeToggle[aria-pressed="true"]{
	/* Use white background in light theme for a neutral pressed appearance */
	background: #ffffff;
	border-color: rgba(0,0,0,0.12);
	color: #052017;
}
html[data-theme='light'] .themeToggle:focus-visible{
	outline: 2px solid rgba(8,134,97,0.45);
	outline-offset: 3px;
}

/* Prompt editor */
.mono, .entryCard textarea{font-family:var(--font-mono);letter-spacing:.1px}
.entryGrid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
/* Prompt editor 3-column layout for 9 boxes (role..fewshot + meta panels) */
.promptSectionsGrid{display:grid;align-items:start;gap:16px;grid-template-columns:40% 40% 20%;grid-auto-rows:minmax(0,auto)}
/* When using stacked columns (.promptSectionsStack) ensure each occupies its grid column fully */
.promptSectionsGrid > .promptSectionsStack{display:flex;flex-direction:column;gap:16px;align-self:start}
/* Collapsed (combined) card width constraint so meta column remains visible */
.entryCard#combinedCard{transition:max-width .25s ease}
@media (max-width:1200px){.entryCard#combinedCard{max-width:100%!important}}
/* Ensure each column's items start at top and don't stretch */
.promptSectionsGrid > .entryCard{align-self:start}
.promptSectionsGrid .col3 > .metaCard{align-self:start}
@media (max-width: 1200px){.promptSectionsGrid{grid-template-columns:1fr}}
.promptSectionsGrid .col1{grid-column:1}
.promptSectionsGrid .col2{grid-column:2}
.promptSectionsGrid .col3{grid-column:3}
.promptSectionsGrid .wideMeta{grid-column:2 / 4;width:100%}
/* Visibility toggle buttons with sliding track */
.visToggle{display:inline-flex;margin-top:4px;border-radius:12px;overflow:visible;border:1px solid rgba(255,255,255,0.10);position:relative;padding:4px;background:rgba(255,255,255,0.03)}
.visTrack{position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 8px);border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 12px 30px rgba(16,185,129,0.16);transition:transform .22s cubic-bezier(.2,.9,.2,1);pointer-events:none;z-index:1}
.visBtn{transition:color .12s ease,background .12s ease;border-radius:999px;padding:8px 14px;display:inline-block;position:relative;background:transparent;color:var(--text);z-index:2}
.visBtn.off{color:rgba(255,255,255,0.90)!important}
html[data-theme='light'] .visBtn.off{color:#374151!important}
	.visBtn.on{color:var(--accent-contrast)!important;background:var(--accent);box-shadow:0 8px 30px rgba(16,185,129,0.18);padding:8px 14px;border-radius:999px}
	html[data-theme='light'] .visBtn.on{color:#0b0f1e!important}
.visLabel{font-size:.72rem;font-weight:700;letter-spacing:.4px}
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}
/* Accessible sr helper (camelCase variant used in templates) */
.srOnly{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}
/* Password strength meter styles */
.pw-strength{display:flex;align-items:center;gap:10px;margin-top:6px}
.pw-strength__track{flex:1;height:10px;background:var(--overlay-1);border-radius:8px;overflow:hidden}
.pw-strength__fill{height:100%;width:0%;border-radius:8px;transition:width .18s ease,background .18s ease}
.pw-strength__text{min-width:120px;font-size:13px;opacity:.95;color:var(--muted-2);text-align:right}
.pw-strength__advice{margin-top:8px;font-size:13px;color:var(--muted);line-height:1.3}

/* Fill states (percentage + semantic score class) */
.pw-strength__fill.pct-0{width:0%}
.pw-strength__fill.pct-25{width:25%}
.pw-strength__fill.pct-50{width:50%}
.pw-strength__fill.pct-75{width:75%}
.pw-strength__fill.pct-100{width:100%}
.pw-strength__fill.s-0{background:#ef4444}
.pw-strength__fill.s-1{background:#f97316}
.pw-strength__fill.s-2{background:#f59e0b}
.pw-strength__fill.s-3{background:#10b981}
.pw-strength__fill.s-4{background:#059669}

/* Make advice stand out a bit when warnings are present */
.pw-strength__advice:empty{display:none}

/* Light theme overrides (ensure contrast) */
html[data-theme='light'] .pw-strength__text{color:#374151}
html[data-theme='light'] .pw-strength__advice{color:#475569}
html[data-theme='light'] .pw-strength__track{background:var(--overlay-1)}

/* Utility: visually-hidden but available to screen readers (aria-live targets) */
.srOnly[aria-live]{position:static !important;height:auto;width:auto;overflow:visible;clip:auto;white-space:normal;margin:0;padding:0}
.promptSectionsStack{display:flex;flex-direction:column;gap:16px}

/* Footer link visibility tweaks */
footer{color:var(--muted)}
footer a{color:var(--link);text-decoration:none;font-weight:600}
footer a:hover{color:var(--link-hover);text-decoration:underline}
html[data-theme='light'] footer a{color:#2b50a2}

@media (max-width: 900px){.entryGrid{grid-template-columns:1fr}}
.entryCard{position:relative;background:var(--card-bg);border:1px solid var(--card-border);border-radius:14px;padding:14px}
.entryHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.entryTitle{font-weight:800;color:var(--text)}
.entryArea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:12px}
.entryCard textarea{width:100%;min-height:calc(1.5em * 3);resize:vertical;background:transparent;border:0;outline:0;color:#e6ebf5;font-size:.98rem;line-height:1.5}
/* Example/placeholder text (dark theme) */
.entryCard textarea::placeholder,
.metaInput::placeholder,
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=password]::placeholder,
textarea::placeholder{color:var(--muted-2)}
.iconRow{display:flex;gap:6px}
.iconBtn{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;border:none;background:transparent;color:inherit;cursor:pointer;padding:0;line-height:1;box-sizing:content-box}
.iconBtn:hover{background:transparent}
.iconBtn:active{transform:translateY(0)}

/* Ensure prompt header icons align top-right and spacing is tight */
.promptCard .promptCardHead .iconRow{align-items:flex-start;justify-content:flex-end}
.promptCard .iconBtn.danger{background:transparent;color:var(--danger)}
.promptCard .iconBtn.danger:hover{background:transparent}

/* Prompt-card header icons: keep them minimal (no boxed background), use slightly larger hit area */
.promptCard .iconRow .iconBtn {
	background: transparent;
	border: none;
	border-radius: 8px;
	color: var(--text);
	width:28px; height:28px; display:inline-grid; place-items:center;
}
.promptCard [data-cycle-bg]{ color: #3ea6ff; }
.promptCard [data-cycle-bg] svg{ stroke: #3ea6ff; color: #3ea6ff; }
/* Remove palette indicator dots entirely */
.iconBtn .paletteDot{ display:none !important; }
.promptCard .iconRow .iconBtn:hover{ transform: translateY(-1px); }
.promptCard .iconRow .iconBtn svg{ width:18px; height:18px; }

/* ensure SVG strokes use currentColor so icons follow text color rules */
.promptCard .iconRow .iconBtn svg * { stroke: currentColor; }

/* Hide action controls when a card is protected (locked) */
.promptCard[data-protected] [data-cycle-bg],
.promptCard[data-protected] [data-move-prompt],
.promptCard[data-protected] form[action*="/prompt_delete.php"] {
	display: none !important;
}

/* Lock/Unlock icon colors: lock (green), unlock (red); Protected indicator green */
.promptCard .iconRow .iconBtn[data-lock-toggle="lock"] { color: var(--accent); }
.promptCard .iconRow .iconBtn[data-lock-toggle="lock"] svg { color: var(--accent); }
.promptCard .iconRow .iconBtn[data-lock-toggle="unlock"] { color: var(--danger); }
.promptCard .iconRow .iconBtn[data-lock-toggle="unlock"] svg { color: var(--danger); }
.promptCard[data-protected] .iconRow .iconBtn[aria-label="Protected"] { color: var(--accent); }
.promptCard[data-protected] .iconRow .iconBtn[aria-label="Protected"] svg { color: var(--accent); }

/* Ensure the icon row sits above decorative card shadows */
.promptCard .promptCardHead{position:relative; z-index:2}

/* Palette dot inside the palette button */
.iconBtn .paletteDot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-left:6px;border:1px solid rgba(255,255,255,0.18);box-shadow:0 1px 0 rgba(0,0,0,0.18);background:rgba(255,255,255,0.02);position:absolute;top:0;right:0;pointer-events:none;z-index:2}
/* When no color selected, show a subtle rainbow dot */
.iconBtn .paletteDot.empty{
	opacity: 1;
	background-image: conic-gradient(
		from 0deg,
		#ff5a5a 0deg 60deg,
		#ffb54d 60deg 120deg,
		#ffe066 120deg 180deg,
		#2ee6cf 180deg 240deg,
		#55b5ff 240deg 300deg,
		#8b6aff 300deg 360deg
	);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25), 0 1px 0 rgba(0,0,0,0.18);
}
/* Light theme tweak for rainbow contrast */
html[data-theme='light'] .iconBtn .paletteDot.empty{ box-shadow: inset 0 0 0 1px rgba(0,0,0,0.28), 0 1px 0 rgba(0,0,0,0.20); border-color: rgba(0,0,0,0.22); }

/* Simple tooltip (light theme) for elements using data-tooltip */
[data-tooltip]{position:relative}
[data-tooltip]::after{
	content:attr(data-tooltip);
	position:absolute;
	left:50%;
	transform:translateX(-50%) translateY(-8px);
	bottom:100%;
	background:rgba(255,255,255,0.98);
	color:#0b0f1e;
	padding:6px 8px;
	border-radius:8px;
	border:1px solid rgba(0,0,0,0.08);
	box-shadow:0 10px 26px var(--shadow-2);
	font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease;z-index:40
}
[data-tooltip]:hover::after,[data-tooltip]:focus::after{opacity:1;transform:translateX(-50%) translateY(-12px)}
[data-tooltip]::before{
	content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:100%;width:10px;height:10px;background:rgba(255,255,255,0.98);transform-origin:center;clip-path:polygon(50% 0,0 100%,100% 100%);opacity:0;transition:opacity .14s ease,transform .14s ease;border:1px solid rgba(0,0,0,0.06);border-bottom:none;border-right:none
}
[data-tooltip]:hover::before,[data-tooltip]:focus::before{opacity:1}

/* Place card-level tooltip (on the <li>.promptCard) below the card to avoid menu overlap */
.promptCard[data-tooltip]{ position: relative; }
.promptCard[data-tooltip]::after{
	top: 100%;
	bottom: auto;
	transform: translateX(-50%) translateY(8px);
}
.promptCard[data-tooltip]:hover::after,
.promptCard[data-tooltip]:focus::after{
	transform: translateX(-50%) translateY(12px);
}
.promptCard[data-tooltip]::before{
	top: 100%;
	bottom: auto;
	transform: translateX(-50%);
	/* flip the caret arrow downward */
	clip-path: polygon(50% 100%, 0 0, 100% 0);
	background: rgba(255,255,255,0.98);
	border:1px solid rgba(0,0,0,0.06); border-top:none; border-left:none;
}

/* Footer actions: right-aligned row for edit/copy/delete */
.promptCardFooter{display:flex;justify-content:flex-end;padding-top:10px;margin-top:8px;border-top:1px solid var(--overlay-1)}
.promptCardFooter .iconRow{gap:8px;display:flex;align-items:center}
.promptCardFooter .iconBtn{width:36px;height:36px;border-radius:8px}
.promptCardFooter .iconBtn svg{width:18px;height:18px}

/* Ensure icon buttons can host positioned indicators like paletteDot */
.promptCard .iconRow .iconBtn{ position: relative; }

.metaGrid .iconBtn, .metaCard .iconBtn { border: none; background: transparent; box-shadow: none; width:28px; height:28px; }
.metaGrid .iconBtn svg, .metaCard .iconBtn svg, .promptCard .iconBtn svg { opacity: 0.95; display:block; margin:0; width:18px; height:18px; }
.metaGrid .iconBtn:hover, .metaCard .iconBtn:hover, .promptCard .iconBtn:hover { background: transparent; }

/* Ensure any child (SVG or text) is centered and fills the clickable area */
.iconBtn > * { display:block; margin:0; }
.iconBtn > svg, .iconBtn > img { width:18px; height:18px; display:block; }
.iconBtn { font-size:14px }
.iconBtn.copySuccess{background:var(--accent-shadow);border-color:rgba(16,185,129,.55);color:#bbf7d0;animation:popScale .4s ease}
@keyframes popScale{0%{transform:scale(.9);}60%{transform:scale(1.08);}100%{transform:scale(1);}}
.toast{font-size:.85rem;color:var(--accent2);margin-left:8px;opacity:.85}

/* Inline selection checkbox (inserted in Select mode) */
.bulkSelChk.iconBtn{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.15); }
html[data-theme='light'] .bulkSelChk.iconBtn{ border-color: rgba(0,0,0,.14); color:#0b0f1e; }
.bulkSelChk.iconBtn svg{ width:16px; height:16px; }

/* Boost visibility in Select mode: green accent styling */
.bulk-mode .bulkSelChk.iconBtn{
	border-color: rgba(16,185,129,.55);
	background: linear-gradient(180deg, rgba(16,185,129,.20), rgba(16,185,129,.10));
	color: rgba(16,185,129,1);
	box-shadow: 0 6px 16px rgba(16,185,129,.18);
}
.bulk-mode .bulkSelChk.iconBtn:hover{
	box-shadow: 0 10px 26px rgba(16,185,129,.28);
}
/* Selected cards: make the checkbox solid green with contrast icon */
.bulk-mode .metaGrid .promptCard.selected .bulkSelChk.iconBtn,
.bulk-mode .metaGrid .metaCard.selected .bulkSelChk.iconBtn{
	background: linear-gradient(180deg, rgba(16,185,129,.85), rgba(16,185,129,.70));
	border-color: rgba(16,185,129,.95);
	color: var(--accent-contrast, #fff);
}
html[data-theme='light'] .bulk-mode .bulkSelChk.iconBtn{
	border-color: rgba(8,134,97,.45);
	background: linear-gradient(180deg, rgba(19,195,154,.20), rgba(19,195,154,.10));
	color: rgba(8,134,97,1);
}
html[data-theme='light'] .bulk-mode .metaGrid .promptCard.selected .bulkSelChk.iconBtn,
html[data-theme='light'] .bulk-mode .metaGrid .metaCard.selected .bulkSelChk.iconBtn{
	background: linear-gradient(180deg, rgba(19,195,154,.92), rgba(19,195,154,.78));
	border-color: rgba(8,134,97,.8);
	color: #ffffff;
}
/* Reserve breathing room above actions when titles wrap */
.promptCardHead{ padding-right: 4px; }

/* Small inline spinner used on Save */
#saveSpinner svg { color: var(--muted); display:block; }
#saveSpinner circle { transform-origin: 25px 25px; animation: saveSpin 1s linear infinite; stroke-opacity:0.95 }
@keyframes saveSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Segmented toggle (e.g., New prompt GPT/Universal) */
.segToggle{display:inline-flex;align-items:center;gap:0;background:rgba(255,255,255,0.03);padding:2px;border-radius:12px;border:1px solid rgba(255,255,255,0.08);backdrop-filter:saturate(1.05) blur(4px)}
.segToggle button{background:transparent;border:0;padding:6px 14px;font-size:.72rem;font-weight:700;letter-spacing:.3px;color:var(--text);border-radius:8px;cursor:pointer;line-height:1.1;min-width:74px}
	.segToggle button.active{background:var(--accent);color:var(--accent-contrast);box-shadow:0 8px 28px rgba(16,185,129,0.18)}
.segToggle button:not(.active):hover{background:rgba(255,255,255,0.12)}
html[data-theme='light'] .segToggle{background:var(--segToggle-light-bg);border-color:var(--segToggle-light-border)}
html[data-theme='light'] .segToggle button.active{background:linear-gradient(180deg,#19c38a,#0ea06b);color:#fff}

/* Danger variants (Delete) */
.accountBtn.danger{background:linear-gradient(180deg,rgba(239,68,68,.16),rgba(239,68,68,.10));border:1px solid rgba(239,68,68,.35)}
.accountBtn.danger:hover{box-shadow:0 8px 24px rgba(239,68,68,.25)}
.accountBtn.yellowBtn{background:linear-gradient(180deg,rgba(45,212,191,.35),rgba(16,185,129,.22));border:1px solid rgba(16,185,129,.55);color:#053226}
.accountBtn.yellowBtn:hover{box-shadow:0 8px 24px rgba(16,185,129,.35);transform:translateY(-1px)}
html[data-theme='light'] .accountBtn.yellowBtn{background:linear-gradient(180deg,var(--account-yellow-bg-start),var(--account-yellow-bg-end));border:1px solid var(--account-yellow-border);color:#053226}
html[data-theme='light'] .accountBtn.yellowBtn:hover{box-shadow:0 8px 24px var(--account-yellow-hover-shadow)}
.sectionsHeader + .entryCard{margin-top:0}
.iconBtn.danger{background:transparent;border:none;color:var(--danger)}
.iconBtn.danger:hover{background: rgba(248,113,113,0.06)}

/* Meta cards (Model, Tags, Project) */
.metaGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:14px}
@media (max-width: 960px){.metaGrid{grid-template-columns:1fr}}
.metaCard{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px}
.metaTitle{font-weight:800;margin-bottom:10px}
.tagsLabel{font-weight:800;margin:14px 0 6px;font-size:.95rem;color:#e9eef8}
html[data-theme='light'] .tagsLabel{color:#1d2430}
.chipRow{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);font-size:.92rem}
.chip.modelTag{background:rgba(56,132,255,.20);border-color:rgba(56,132,255,.45);color:var(--muted-2)}
html[data-theme='light'] .chip.modelTag{background:var(--chip-model-bg);border-color:var(--chip-model-border);color:#0b2f63}
.chip.modelTag{font-size:.85rem;font-weight:600;padding:8px 12px;border-radius:12px;display:flex;align-items:center;gap:6px;width:100%;box-sizing:border-box;line-height:1;min-height:40px}
.chip.modelTag .x{margin-left:auto;font-size:.8rem}
html[data-theme='light'] .chip.modelTag{font-size:.85rem}
.chip .x{cursor:pointer;opacity:.8}
.tagChip{font-size:.84rem;padding:6px 10px}
html[data-theme='light'] .tagChip{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1)}
.tagOptions{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:6px}
.tagOptions .tagOpt{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#cfe3ff;padding:6px 10px;border-radius:999px;font-size:.85rem;cursor:pointer;line-height:1;display:inline-flex;align-items:center;gap:4px}
.tagOptions .tagOpt.selected{background:rgba(56,132,255,.25);border-color:rgba(56,132,255,.55);color:#dff1ff;box-shadow:0 0 0 1px rgba(56,132,255,.45)}
.tagOptions .tagOpt:hover{background:rgba(255,255,255,.12)}
html[data-theme='light'] .tagOptions .tagOpt{background:var(--tagopt-bg-light);border:1px solid var(--tagopt-border-light);color:#1d2430}
html[data-theme='light'] .tagOptions .tagOpt.selected{background:var(--tagopt-selected-bg);border-color:var(--tagopt-selected-border);color:#0b2f63}

/* Model Tags single-column list */
.modelTagOptionsList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:2px;align-items:stretch}

/* ------------------------------------------------------------------
   Card consistency helper
   Ensure meta and prompt-specific card classes match the base
   `.card` spacing / border / background so feed cards are
   visually consistent and easy to swap with other card types.
   This keeps existing modifier classes but provides a single
   contract for layout and visuals used across the site.
   ------------------------------------------------------------------ */
.metaCard, .promptCard, .metaCard.promptCard {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 16px;
	padding: 10px;
	box-shadow: inset 0 1px 0 var(--overlay-inset), 0 30px 80px var(--shadow-1);
}

/* Prompt cards: match panel background (use panel token when available, else fall back to card bg) */
.promptCard { background: var(--panel-bg, var(--card-bg)); }

/* Desktop: let the prompt body extend to the card bottom by shifting padding to body margin */
@media (min-width: 561px){
	.promptCard { padding-bottom: 0; }
	.promptCard .promptBody { margin-bottom: 14px; }
}

/* Light theme: ensure grid prompt cards also match panel background (override older white rule) */
html[data-theme='light'] .metaGrid > .promptCard { background: var(--panel-bg, var(--card-bg)); }

/* Compact variants used by admin/forms where tighter spacing is desired */
.metaCard.compact { padding: 14px; }
.metaCard.smallList { padding: 12px; margin-bottom: 8px; }
.metaCard.column { display:flex; flex-direction:column; gap:8px; }


@media (max-width:640px){.modelTagOptionsList{grid-template-columns:1fr}}
.modelTagOptionsList .tagOpt{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#cfe3ff;padding:10px 14px;border-radius:14px;font-size:.85rem;cursor:pointer;line-height:1.1;display:flex;align-items:center;gap:6px;font-weight:600;box-sizing:border-box;min-height:46px;width:100%;justify-content:flex-start;text-align:left}
.modelTagOptionsList .tagOpt.selected{background:rgba(56,132,255,.25);border-color:rgba(56,132,255,.55);color:#dff1ff;box-shadow:0 0 0 1px rgba(56,132,255,.45)}
html[data-theme='light'] .modelTagOptionsList .tagOpt{background:var(--tagopt-bg-light);border:1px solid var(--tagopt-border-light);color:#1d2430}
html[data-theme='light'] .modelTagOptionsList .tagOpt.selected{background:rgba(10,82,180,.15);border-color:rgba(10,82,180,.35);color:#0b2f63}
.metaInput,.metaSelect{width:100%;margin-top:10px;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#e6ebf5;font-family:var(--font-sans)}
.metaSelect.invalid, .metaInput.invalid{border-color:rgba(239,68,68,.65)!important;box-shadow:0 0 0 1px rgba(239,68,68,.4);}
html[data-theme='light'] .metaSelect.invalid, html[data-theme='light'] .metaInput.invalid{border-color:rgba(200,30,30,.8)!important;box-shadow:0 0 0 1px rgba(200,30,30,.4);}
.fieldHint{font-size:.7rem;opacity:.65;margin-top:6px;line-height:1.3}
.fieldHint.error{color:#ffb4b4;opacity:1}
html[data-theme='light'] .fieldHint{color:#444}
html[data-theme='light'] .fieldHint.error{color:#b00020}

/* File data: span across and fit 4 fields */
.metaCard.fullSpan{grid-column:1 / -1; padding:18px}
.fileDataGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:6px}
/* Prevent input overflow from breaking equal widths and make boxes a bit more compact */
.fileDataGrid .metaInput{min-width:0;padding:8px 10px;font-size:.95rem}
@media (max-width: 560px){.fileDataGrid{grid-template-columns:1fr}}

/* Equal-height cards in 3-column grids (Prompts list) */
.metaGrid > .metaCard{display:flex;flex-direction:column;height:260px;width:100%;min-width:0}
@media (max-width: 960px){.metaGrid > .metaCard{height:auto}}
.scrollBody{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.3)_transparent}
.scrollBody::-webkit-scrollbar{width:8px}
.scrollBody::-webkit-scrollbar-track{background:transparent}
.scrollBody::-webkit-scrollbar-thumb{background:rgba(0,0,0,.25);border-radius:6px}
html[data-theme='light'] .scrollBody::-webkit-scrollbar-thumb{background:rgba(0,0,0,.35)}
/* Let the monospace preview block expand slightly if room exists */
.metaGrid .mono{flex:0 1 auto;font-size:13.5px}

/* Project filter chips above the prompts list */
.projectFilter{display:flex;flex-wrap:wrap;gap:8px}
.projectFilterBtn{appearance:none;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:var(--text);padding:6px 10px;border-radius:999px;font-weight:700;cursor:pointer}
.projectFilterBtn.active{background:linear-gradient(180deg,#2dd4bf,#10b981);color:#052017;border-color:rgba(16,185,129,.35)}
/* Generic chip styles for tags/models/visibility */
.chipBar{gap:6px}
.chipBtn{appearance:none;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:var(--text);padding:4px 9px;border-radius:999px;font-weight:600;cursor:pointer;font-size:.85rem}
.chipBtn[aria-pressed="true"], .chipBtn.active{background:rgba(45,212,191,.18);border-color:rgba(45,212,191,.35)}
@media (max-width:760px){.projectFilter{gap:6px}}

/* --- Light theme (minimalist) ------------------------------------------------ */
/* --- Light theme (minimalist) ------------------------------------------------ */
html[data-theme='light']{
	/* semantic variables tuned for light theme */
	--bg1: #f6f8fb; /* soft off-white */
	--bg2: #ffffff;
	--surface: #ffffff;
	--card-bg: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
	--card-border: rgba(0,0,0,0.08);
	--muted: #4b5563; /* darker muted text */
	--muted-2: #6b7280;
	--text: #071126; /* primary text for light theme */
	--link: #1d4ed8;
	--link-hover: #0b3aa6;
	--link-underline: rgba(29,78,216,0.6);
	--accent: #16a34a; /* slightly deeper green for light backgrounds */
	--accent2: #34d399;
	--accent-contrast: #052017;
	--title-green: #4f46e5; /* nice indigo for headings on light bg */
	--danger: #c53030;
	--success: #059669;
	/* light-theme overlay / shadow tokens */
	--overlay-1: rgba(0,0,0,0.02);
	--overlay-2: rgba(0,0,0,0.04);
	--overlay-3: rgba(0,0,0,0.06);
	--overlay-inset: rgba(255,255,255,0.7);
	--shadow-1: rgba(0,0,0,0.06);
	--shadow-2: rgba(0,0,0,0.12);
	--accent-shadow: rgba(8,134,97,0.18);
	--accent-shadow-weak: rgba(8,134,97,0.12);
}
html[data-theme='light'] body{color:var(--text);background:linear-gradient(180deg,var(--bg1),var(--bg2))}
html[data-theme='light'] .header{background:rgba(255,255,255,.85);border-bottom:1px solid rgba(0,0,0,.06)}
html[data-theme='light'] .header:before{background:rgba(255,255,255,.75);border-bottom:1px solid rgba(0,0,0,.06)}
html[data-theme='light'] .brand{color:var(--text)}
html[data-theme='light'] .account,html[data-theme='light'] .accountBtn{color:#0b0f1e;background:rgba(19,195,154,.14);border:1px solid rgba(8,134,97,.32)}
html[data-theme='light'] .softBtn{background:linear-gradient(180deg,rgba(19,195,154,.08),rgba(19,195,154,.04));border:1px solid rgba(8,134,97,.24);color:#0b0f1e}
html[data-theme='light'] .wrap,html[data-theme='light'] .container,html[data-theme='light'] .panel,html[data-theme='light'] .sidebar,html[data-theme='light'] .metaCard,html[data-theme='light'] .entryCard{
	background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.01));
	border:1px solid rgba(0,0,0,.08);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 20px 60px rgba(0,0,0,.05)
}
html[data-theme='light'] .entryArea{background:#fff;border:1px solid rgba(0,0,0,.08)}
html[data-theme='light'] .sideTitle{color:#1d2430}
html[data-theme='light'] .sideItem{color:#1d2430}
html[data-theme='light'] .sideItem:hover{background:rgba(0,0,0,.04)}
html[data-theme='light'] .sideItem.active{background:rgba(19,195,154,.14);border-color:rgba(8,134,97,.32)}
html[data-theme='light'] input[type=text],
html[data-theme='light'] input[type=email],
html[data-theme='light'] input[type=password],
html[data-theme='light'] .metaInput,
html[data-theme='light'] .metaSelect{background:#fff;border:1px solid rgba(0,0,0,.14);color:#0b0f1e}
html[data-theme='light'] table th,html[data-theme='light'] table td{color:#1d2430;border-bottom:1px solid rgba(0,0,0,.08)}
html[data-theme='light'] th{color:#374151}
html[data-theme='light'] .pill{background:rgba(0,0,0,.06)}
html[data-theme='light'] .topNav a,html[data-theme='light'] .navBtn{color:#0b0f1e}
html[data-theme='light'] .topNav a:hover,html[data-theme='light'] .navBtn:hover{color:#000}
html[data-theme='light'] .topNav a.active,html[data-theme='light'] .topNav .navBtn.active{color:#052017}
html[data-theme='light'] .menuPanel{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.92));border:1px solid rgba(0,0,0,.08);box-shadow:0 18px 60px rgba(0,0,0,.12)}
html[data-theme='light'] .menuItem{color:#1d2430}
html[data-theme='light'] .menuItem:hover{background:rgba(0,0,0,.04);color:#000}
html[data-theme='light'] .menuIcon{background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.1)}
html[data-theme='light'] .miTitle{color:#0b0f1e}
html[data-theme='light'] .miSub{color:#5c6272}
html[data-theme='light'] .menuFeature{background:#fff;border:1px solid rgba(0,0,0,.08)}
html[data-theme='light'] .chip{background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.1)}
/* Landing page (hero) light theme refinements */
html[data-theme='light'] .title{color:#0b0f1e}
/* Dark theme: make primary titles a greenish accent */
html:not([data-theme='light']) .title,
html:not([data-theme='light']) .entryTitle,
html:not([data-theme='light']) .metaTitle,
html:not([data-theme='light']) .miniCard .title{
	color: var(--title-green);
}

/* Prompt cards: use full white titles in dark mode for stronger contrast (only for prompt cards) */
html:not([data-theme='light']) .metaCard.promptCard .metaTitle,
html:not([data-theme='light']) .promptCard .metaTitle {
	color: var(--text);
}
/* stronger subtitle / excerpt / meta colors for readability */
html[data-theme='light'] .subtitle{color:var(--muted)}
html[data-theme='light'] .point{color:#23303b}
html[data-theme='light'] .listItem{color:#23303b}
html[data-theme='light'] .excerpt{color:#475569;opacity:1}
html[data-theme='light'] .metaInfo{color:#6b7280}
html[data-theme='light'] .card{background:#ffffff;border:1px solid rgba(0,0,0,.10);box-shadow:0 18px 40px rgba(0,0,0,.06)}
html[data-theme='light'] .card h3{color:var(--text)}
html[data-theme='light'] .ctaGhost{color:var(--text);border:1px solid rgba(0,0,0,.14);background:#ffffff}
html[data-theme='light'] .cassette{background:#ffffff;border:1px solid rgba(0,0,0,.08);color:#1d2430}
html[data-theme='light'] .cassette:hover{background:#f3f5f8}
html[data-theme='light'] .ctitle{color:#0b0f1e}
html[data-theme='light'] .crow{color:#5c6272}
html[data-theme='light'] .chip{color:#374151}
html[data-theme='light'] .badge{color:#0b0f1e;background:linear-gradient(180deg,#2dd4bf,#10b981)}
html[data-theme='light'] .link,html[data-theme='light'] .wrap a:link,html[data-theme='light'] .wrap a:visited,html[data-theme='light'] .container a:link,html[data-theme='light'] .container a:visited{color:#2b50a2}
html[data-theme='light'] .wrap a:hover,html[data-theme='light'] .container a:hover{color:#153a8a;text-decoration-color:rgba(21,58,138,.5)}
/* ensure blog feed excerpts and meta are readable */
html[data-theme='light'] .missingMedia{color:#991b1b;font-weight:600}
html[data-theme='light'] .blogFeed .blogCard{background:linear-gradient(180deg,#ffffff,#fbfdff);border:1px solid rgba(0,0,0,.08)}
/* Thumbnail used in blog card when no cover is provided */
.blogThumb{width:160px;height:110px;object-fit:cover;border-radius:8px;margin-right:12px;flex:0 0 160px}
@media (max-width:760px){.blogThumb{width:100%;height:180px;flex:none;margin-right:0;margin-bottom:12px}}
/* Icon buttons (edit/copy/etc.) visible in light theme */
html[data-theme='light'] .iconBtn{background:transparent;border:none;color:inherit}
html[data-theme='light'] .iconBtn:hover{background:transparent}
html[data-theme='light'] .iconBtn.copySuccess{background:rgba(16,185,129,.18);border:none;color:#166534}
html[data-theme='light'] .iconBtn:focus-visible{outline:2px solid rgba(19,195,154,.45);outline-offset:2px}
/* Danger in light theme */
html[data-theme='light'] .accountBtn.danger{background:linear-gradient(180deg,rgba(239,68,68,.10),rgba(239,68,68,.06));border:1px solid rgba(239,68,68,.30);color:#0b0f1e}
html[data-theme='light'] .iconBtn.danger{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.24);color:#7f1d1d}
/* Remove background from delete icon when inside prompt cards (light theme) */
html[data-theme='light'] .promptCard .iconBtn.danger{ background: transparent; border-color: transparent; color: var(--danger); }
html[data-theme='light'] .promptCard .iconBtn.danger:hover{ background: transparent; }
/* Ensure section titles are visible on light background (New Prompt etc.) */
html[data-theme='light'] .entryTitle{color:#0b0f1e}
html[data-theme='light'] .metaTitle{color:#0b0f1e}
/* Ensure text entry boxes use black text in light mode */
html[data-theme='light'] .entryCard textarea{color:#0b0f1e}
html[data-theme='light'] textarea{color:#0b0f1e}
/* Slightly darker placeholder for readability in light mode */
html[data-theme='light'] .entryCard textarea::placeholder,
html[data-theme='light'] .metaInput::placeholder,
html[data-theme='light'] input[type=text]::placeholder,
html[data-theme='light'] input[type=email]::placeholder,
html[data-theme='light'] input[type=password]::placeholder,
html[data-theme='light'] textarea::placeholder{color:#9aa3b2}

/* Main content area: remove outline (clean canvas) */
.workspace > main.panel{border:none}
html[data-theme='light'] .workspace > main.panel{border:none}

/* Light theme: make prompt cards (grid items) white while keeping other meta cards subtle */
html[data-theme='light'] .metaGrid > .metaCard{background:#ffffff;border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 30px rgba(0,0,0,.05)}
/* Keep prompt text preview light grey regardless */
html[data-theme='light'] .metaGrid > .metaCard .mono:not(.promptBody){background:rgba(0,0,0,.04)}

/* Mini feed cards (compact list items) */
.miniCard{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:linear-gradient(180deg,var(--card-contrast),var(--overlay-1));border:1px solid var(--card-border)}
.miniCard .title{font-weight:800; font-size:1.25rem; line-height:1.05}
.miniCard .sub{opacity:.85}
html[data-theme='light'] .miniCard{background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 6px 18px rgba(0,0,0,.04)}

/* Ensure blog card excerpt and meta are readable in both themes */
.blogCard .excerpt{color:rgba(255,255,255,0.85)}
.blogCard .metaInfo{color:rgba(255,255,255,0.72)}
html[data-theme='light'] .blogCard .excerpt{color:#475569}
html[data-theme='light'] .blogCard .metaInfo{color:#6b7280}

/* Projects page utilities */
.sectionHeader{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sectionHeader h2{margin:0}
.projectList{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.projectInfo{display:flex;flex-direction:column;gap:4px;min-width:0}
.projectInfo .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.projectInfo .sub{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
.miniCard .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* Missing media marker used in blog feed */
.missingMedia{color:var(--danger);font-size:0.95rem;margin-top:6px}
html[data-theme='light'] .missingMedia{color:#b91c1c}

/* Blog list tweaks: ensure columns are readable in both light/dark */
.metaGrid .blogCard{background:linear-gradient(180deg,var(--card-contrast),rgba(255,255,255,.02));border:1px solid var(--card-border);border-radius:12px;padding:12px}
html[data-theme='light'] .metaGrid .blogCard{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.95));border:1px solid rgba(0,0,0,.06)}

.blogFeed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:var(--content-max-width);margin:0 auto;padding:8px}
.blogFeed .blogCard{display:flex;flex-direction:column;align-items:stretch;gap:10px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-radius:12px;padding:14px;border:1px solid rgba(0,0,0,0.06);box-shadow:0 8px 24px rgba(2,6,23,0.04)}
.blogCard .cardTitle{width:100%;margin-bottom:6px}
.blogCard .cardBody{display:flex;gap:12px;align-items:flex-start}
.blogCard .cardBody .excerpt{margin:0;flex:1}
@media (max-width:700px){
	.blogFeed .blogCard{flex-direction:column}
	.blogCard .cardBody{flex-direction:column}
	.blogThumb{width:100%;height:180px;flex:none;margin-right:0;margin-bottom:12px}
}
.blogCard .excerpt{color:var(--muted);margin-top:0}
.blogCard .metaInfo{color:var(--muted);font-size:0.95rem;margin-top:6px}

@media (max-width: 1100px){
	.blogFeed{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 700px){
	.blogFeed{grid-template-columns:1fr;}
	.blogFeed .blogCard{flex-direction:column}
	.blogCard img{width:100%;height:auto}
}

/* Category manager layout */
.catManager{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;max-width:1080px}
@media (max-width: 760px){.catManager{grid-template-columns:1fr}}
html[data-theme='light'] .catManager .metaCard{background:#fff;border:1px solid rgba(0,0,0,.08)}
/* Subcategory row + usage badge */
.subRow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.usageBadge{background:rgba(16,185,129,.25);border:1px solid rgba(16,185,129,.45);padding:2px 7px;font-size:11px;border-radius:999px;line-height:1;font-weight:600;letter-spacing:.2px}
.usageBadge.small{padding:1px 6px;font-size:10px}
html[data-theme='light'] .subRow{background:#fff;border:1px solid rgba(0,0,0,.08)}
html[data-theme='light'] .usageBadge{background:rgba(19,195,154,.18);border:1px solid rgba(8,134,97,.38);color:#1d2430}
/* Mini action buttons (inline Edit/Delete) */
.accountBtn.miniAction{padding:4px 10px;font-size:12px;line-height:1;background:linear-gradient(180deg,rgba(45,212,191,.22),rgba(16,185,129,.14));border:1px solid rgba(16,185,129,.45)}
.accountBtn.miniAction:hover{box-shadow:0 4px 14px rgba(16,185,129,.30);transform:translateY(-1px)}
.accountBtn.miniAction.danger{background:linear-gradient(180deg,rgba(190,30,30,.55),rgba(190,30,30,.42));border:1px solid rgba(190,30,30,.65);color:#fff}
.accountBtn.miniAction.danger:hover{box-shadow:0 4px 14px rgba(190,30,30,.55)}
html[data-theme='light'] .accountBtn.miniAction{background:linear-gradient(180deg,rgba(19,195,154,.20),rgba(19,195,154,.10));border:1px solid rgba(8,134,97,.40);color:#0b0f1e}
html[data-theme='light'] .accountBtn.miniAction.danger{background:linear-gradient(180deg,rgba(239,68,68,.75),rgba(239,68,68,.55));border:1px solid rgba(190,30,30,.7);color:#fff}

/* =========================
	 Bulk selection UI styles
	 ========================= */
/* Fixed bottom action bar */
#bulkBar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);width:min(900px, calc(100% - 24px));background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;box-shadow:0 18px 60px var(--shadow-2);padding:10px 12px;z-index:10000;backdrop-filter:saturate(1.05) blur(8px)}
#bulkBar .bulkInner{display:flex;align-items:center;justify-content:space-between;gap:12px}
#bulkBar .bulkLeft{font-weight:700;color:var(--text)}
#bulkBar .bulkRight{display:flex;gap:8px;flex-wrap:wrap}
#bulkBar .bulkRight button{appearance:none;border:1px solid var(--accent-border-weak);background:linear-gradient(180deg,var(--accent-border-weak),var(--overlay-1));color:var(--text);padding:8px 12px;border-radius:10px;font-weight:700;cursor:pointer}
#bulkBar .bulkRight button:hover{box-shadow:0 8px 24px var(--accent-shadow-weak);transform:translateY(-1px)}
#bulkBar .bulkRight button.danger{border-color:rgba(239,68,68,.45);background:linear-gradient(180deg,rgba(239,68,68,.18),rgba(239,68,68,.10));color:#fecaca}
html[data-theme='light'] #bulkBar .bulkRight button{background:linear-gradient(180deg,rgba(19,195,154,.12),rgba(19,195,154,.06));border:1px solid rgba(8,134,97,.28);color:#0b0f1e}
html[data-theme='light'] #bulkBar .bulkRight button.danger{background:linear-gradient(180deg,rgba(239,68,68,.14),rgba(239,68,68,.08));border-color:rgba(190,30,30,.5);color:#7f1d1d}

/* Card selection affordance (checkbox in top-left) */
.bulk-mode .metaGrid .metaCard, .bulk-mode .metaGrid .promptCard{position:relative}
.bulk-mode .metaGrid .metaCard::before, .bulk-mode .metaGrid .promptCard::before{
	content:"";position:absolute;top:10px;left:10px;width:18px;height:18px;border-radius:6px;border:2px solid var(--accent);background:rgba(16,185,129,0.06);box-shadow:inset 0 1px 0 var(--overlay-inset);
	z-index:3
}
.bulk-mode .metaGrid .metaCard.selected::before, .bulk-mode .metaGrid .promptCard.selected::before{
	background:linear-gradient(180deg,var(--accent2),var(--accent));border-color:rgba(16,185,129,0.9)
}
.bulk-mode .metaGrid .metaCard.selected::after, .bulk-mode .metaGrid .promptCard.selected::after{
	content:"";position:absolute;top:12px;left:16px;width:6px;height:10px;border-right:2px solid var(--accent-contrast);border-bottom:2px solid var(--accent-contrast);transform:rotate(45deg);z-index:4
}

/* While in bulk mode, reduce accidental nav affordances slightly */
.bulk-mode .promptCard[data-open]{cursor:default}

/* Debug tints removed for metaLeft/promptMeta; keep actions surface subtle */
.promptCard .metaActions { padding: 2px; border-radius: 6px; background: transparent; }

/* Hide legacy top-left bulk select indicator when Select mode is active
	(we now use an inline checkbox in the .metaActions row). */
.bulk-mode .metaGrid .metaCard::before,
.bulk-mode .metaGrid .promptCard::before,
.bulk-mode .metaGrid .metaCard::after,
.bulk-mode .metaGrid .promptCard::after { display: none !important; content: none !important; }