/* Geekcon AI Studio v2 — artifact views: post package (phone frames), mood board, article, dashboard, A4 report. */

.notes { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: rgba(11, 10, 11, 0.5); border: 1px solid var(--line-soft); }
.notes h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 15px/1.35 var(--font-display); }
.notes h3 .ico svg { width: 17px; height: 17px; }
.notes li { position: relative; padding-left: 14px; font-size: 13.5px; line-height: 1.55; color: var(--dim); overflow-wrap: anywhere; }
.notes li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.notes li small { color: var(--faint); }
.notes.is-human { border-color: rgba(253, 178, 25, 0.35); background: rgba(253, 178, 25, 0.06); }
.notes.is-human h3 { color: var(--amber-300); }
.notes.is-warn { border-color: rgba(255, 194, 77, 0.3); }
.notes.is-warn h3 { color: var(--warn); }
.make-box { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: linear-gradient(160deg, rgba(253, 178, 25, 0.1), rgba(11, 10, 11, 0.5)); border: 1px solid rgba(253, 178, 25, 0.35); }
.make-btn { width: 100%; min-height: 52px; font-size: 16.5px; }
.make-note { font-size: 13px; color: var(--amber-100); line-height: 1.5; }
.make-note[data-tone="ok"] { color: var(--ok); }
.make-note[data-tone="err"] { color: var(--stop); }
.art-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.art-tools h2 { font: 500 20px/1.3 var(--font-display); }
.art-tools .spacer { flex: 1 1 auto; }
.tbl-wrap { overflow-x: auto; }
.mini-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mini-table th { text-align: left; padding: 8px; font: 500 12.5px/1.3 var(--font-display); color: var(--mute); border-bottom: 1px solid var(--line); white-space: nowrap; }
.mini-table td { padding: 9px 8px; border-bottom: 1px solid rgba(255, 241, 210, 0.06); vertical-align: top; overflow-wrap: anywhere; }
.mini-table td small { display: block; color: var(--faint); font-size: 11.5px; }

/* ---------- post package ---------- */
.pv { display: grid; grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 44px); padding: clamp(18px, 2vw, 32px); }
.pv-left { display: grid; justify-items: center; align-content: start; gap: 18px; }
.pv-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.pv-top h2 { font: 500 21px/1.3 var(--font-display); }
.pv-tabs .choice { min-height: 38px; font-size: 14px; }
.pv-stage { display: grid; place-items: center; width: 100%; padding: 18px 0 8px; background: radial-gradient(60% 60% at 50% 40%, rgba(253, 178, 25, 0.12), transparent 70%); }
.phone { position: relative; width: min(340px, 100%); padding: 12px; border-radius: 44px; background: linear-gradient(160deg, #3A3536, #141213); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 0 0 2px #0B0A0B; animation: rise var(--dur-slow) var(--ease-out) both; }
.phone-notch { position: absolute; z-index: 2; top: 20px; left: 50%; width: 92px; height: 22px; border-radius: 12px; background: #0B0A0B; transform: translateX(-50%); }
.phone-screen { position: relative; overflow: hidden; border-radius: 33px; background: #fff; color: #1C1E21; min-height: 560px; padding-top: 44px; font: 400 14px/1.45 var(--font-body); }
.pv-head { display: flex; align-items: center; gap: 10px; padding: 8px 14px; }
.pv-head > span:nth-child(2) { display: grid; }
.pv-head b { font: 600 14px/1.25 var(--font-body); }
.pv-head small { font-size: 11.5px; color: #65676B; }
.pv-ava { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; font: 600 15px/1 var(--font-display); background: linear-gradient(135deg, var(--amber-500), #E08C00); flex: none; }
.pv-more { margin-left: auto; color: #65676B; }
.pv-more svg { width: 20px; height: 20px; }
.pv-img { display: block; width: 100%; object-fit: cover; background: #E4E6EB; }
.pv-img.is-blank { aspect-ratio: 1; }
.pv-body { padding: 4px 14px 10px; }
.pv-cap { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.pv-tags, .pv-cta { color: #1B66C9; }
.pv-react { display: flex; justify-content: space-around; padding: 10px 6px 14px; border-top: 1px solid #E4E6EB; margin: 8px 12px 0; font-size: 13px; color: #65676B; font-weight: 500; }
.pv-ig .pv-ava { width: 32px; height: 32px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #E1306C; }
.pv-actions { display: flex; gap: 14px; padding: 10px 14px 4px; }
.pv-actions span svg { width: 24px; height: 24px; color: #262626; }
.pv-ig .pv-body { font-size: 13.5px; }
.pv-ig .pv-body b { font-weight: 600; }
.pv-ig .pv-cap { display: inline; }
.is-tiktok .phone-screen { background: #000; color: #fff; padding-top: 0; }
.pv-tt { position: relative; }
.pv-tt .pv-img { width: 100%; height: 100%; min-height: 560px; }
.pv-tt-over { position: absolute; left: 0; right: 56px; bottom: 0; padding: 60px 14px 22px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.75)); font-size: 13px; }
.pv-tt-over .pv-cap { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.pv-tt-over .pv-tags, .pv-tt-over .pv-cta { color: #fff; font-weight: 600; }
.pv-tt-side { position: absolute; right: 10px; bottom: 90px; display: grid; gap: 18px; }
.pv-tt-side svg { width: 28px; height: 28px; color: #fff; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); }
.pv-side { display: grid; align-content: start; gap: 14px; min-width: 0; }
.pv-h { font: 500 18px/1.3 var(--font-display); }
.cap-opts { display: grid; gap: 10px; }
.cap-opt { display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: rgba(11, 10, 11, 0.55); text-align: left; cursor: pointer; transition: border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur); }
.cap-opt:hover { border-color: rgba(253, 178, 25, 0.5); }
.cap-opt[aria-checked="true"] { border-color: var(--amber-500); background: rgba(253, 178, 25, 0.08); box-shadow: 0 0 34px -12px rgba(253, 178, 25, 0.7); }
.cap-head { display: flex; align-items: center; gap: 10px; }
.cap-head b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font: 600 13px/1 var(--font-display); border: 1px solid var(--line); color: var(--mute); }
.cap-opt[aria-checked="true"] .cap-head b { background: var(--grad-btn); color: var(--ink-950); border-color: transparent; }
.cap-head span { font: 500 14px/1.3 var(--font-display); color: var(--amber-100); }
.cap-head small { margin-left: auto; color: var(--faint); font-size: 12px; }
.cap-text { font-size: 14.5px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.cap-cta { font-size: 13px; color: var(--amber-300); }
.cap-tags { font-size: 13px; color: var(--cyan-200); overflow-wrap: anywhere; }
.pv-alt, .pv-banned { display: grid; gap: 6px; font-size: 13.5px; color: var(--dim); }
.pv-alt b, .pv-banned b { font: 500 13.5px/1.3 var(--font-display); color: var(--paper); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- mood board ---------- */
.mood { display: grid; gap: 18px; padding: clamp(18px, 2vw, 30px); }
.mood-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.mood-head h2 { font: 500 21px/1.3 var(--font-display); }
.mood-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mood-card { display: grid; gap: 12px; padding: 12px; border-radius: 20px; background: rgba(11, 10, 11, 0.55); border: 1px solid var(--line-soft); animation: rise var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms); }
.mood-card:nth-child(2) { margin-top: 26px; }
.mood-fig { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: rgba(255, 241, 210, 0.05); }
.mood-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mood-fig figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; gap: 10px; padding: 30px 14px 12px; background: linear-gradient(180deg, transparent, rgba(11, 10, 11, 0.9)); font: 500 16px/1.3 var(--font-display); }
.mood-fig figcaption b { font: 500 12px/1 var(--font-mono); color: var(--amber-300); }
.mood-body { display: grid; gap: 10px; padding: 0 4px 4px; }
.mood-mood { font: 500 15px/1.5 var(--font-display); color: var(--amber-100); }
.mood-txt { font-size: 13.5px; line-height: 1.6; color: var(--paper); }
.mood-txt.dim { color: var(--dim); }
.mood-txt b { color: var(--mute); font-weight: 500; }
.palette { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 999px; border: 1px solid var(--line); background: rgba(11, 10, 11, 0.6); color: var(--paper); font-size: 12px; cursor: pointer; }
.swatch i { width: 18px; height: 18px; border-radius: 50%; background: var(--sw, #888); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset; }
.swatch small { color: var(--faint); font-size: 10.5px; }
.mood-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }

/* ---------- article ---------- */
.article-art { display: grid; gap: 16px; padding: clamp(18px, 2vw, 30px); }
.meta-row { display: grid; grid-template-columns: 1.2fr 1.6fr 1fr; gap: 12px; }
.meta-card { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-radius: 14px; background: rgba(11, 10, 11, 0.55); border: 1px solid var(--line-soft); min-width: 0; }
.meta-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 500 13px/1.3 var(--font-display); color: var(--mute); }
.meta-k .num { color: var(--paper); }
.meta-range { margin-left: auto; font-size: 11.5px; color: var(--faint); }
.meta-v { font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.meta-bar { height: 4px; border-radius: 3px; background: rgba(255, 241, 210, 0.08); overflow: hidden; }
.meta-bar i { display: block; height: 100%; transform-origin: left; transform: scaleX(var(--v)); background: var(--ok); }
.meta-card.is-warn .meta-bar i { background: var(--warn); }
.meta-card.is-warn .meta-k .num { color: var(--warn); }
.art-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr); gap: 16px; align-items: start; }
.browser { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-lift); transition: max-width var(--dur) var(--ease-out); justify-self: center; width: 100%; }
.browser.is-mobile { max-width: 400px; }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #E9E4DA; }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #C9C0B2; }
.browser-url { margin-left: 10px; flex: 1; padding: 3px 10px; border-radius: 8px; background: #fff; color: #6B6460; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.art-frame { display: block; width: 100%; height: min(72vh, 820px); border: 0; background: #fff; }
.art-side { display: grid; gap: 12px; }
.faq dt { font: 500 14px/1.45 var(--font-display); color: var(--paper); margin-top: 8px; }
.faq dd { margin: 2px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--dim); }
.size-tabs .choice { min-height: 36px; font-size: 13.5px; }

/* ---------- dashboard ---------- */
.dash-art { display: grid; gap: 18px; padding: clamp(18px, 2vw, 30px); }
.da-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.da-head h2 { font: 500 var(--fs-h2) / 1.3 var(--font-display); }
.da-head p { color: var(--dim); max-width: 70ch; margin-top: 4px; }
.da-q { color: var(--cyan-200) !important; }
.da-stats { display: flex; gap: 10px; margin: 0; }
.da-stats > div { padding: 10px 16px; border-radius: 12px; background: rgba(11, 10, 11, 0.55); border: 1px solid var(--line-soft); }
.da-stats dt { font-size: 12px; color: var(--mute); }
.da-stats dd { margin: 2px 0 0; font: 500 22px/1.1 var(--font-display); }
.da-quality { padding: 14px 16px; border-radius: 14px; background: rgba(255, 194, 77, 0.06); border: 1px solid rgba(255, 194, 77, 0.35); }
.da-quality h3 { display: flex; align-items: center; gap: 8px; font: 500 15.5px/1.3 var(--font-display); color: var(--warn); margin-bottom: 8px; }
.da-quality h3 .ico svg { width: 18px; height: 18px; }
.da-quality ul { display: grid; gap: 8px; }
.da-quality li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; font-size: 13.5px; }
.da-quality li small { grid-column: 2; color: var(--faint); font-size: 12px; }
.q-kind { padding: 1px 8px; border-radius: 6px; font: 500 12px/1.6 var(--font-display); color: var(--ink-950); background: var(--warn); align-self: start; }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.chart-card { margin: 0; display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: rgba(11, 10, 11, 0.6); border: 1px solid var(--line-soft); min-width: 0; }
.chart-card figcaption { display: grid; gap: 2px; }
.chart-card figcaption b { font: 500 16px/1.35 var(--font-display); }
.chart-card figcaption small { font-size: 12.5px; color: var(--mute); }
.chart-src { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 11.5px; color: var(--faint); }
.cbars { display: grid; gap: 8px; }
.cbars li { display: grid; grid-template-columns: minmax(80px, 0.9fr) minmax(0, 2fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.cb-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dim); }
.cb-t { height: 12px; border-radius: 6px; background: rgba(255, 241, 210, 0.06); overflow: hidden; }
.cb-t i { display: block; height: 100%; border-radius: inherit; background: var(--c); transform-origin: left; transform: scaleX(var(--v)); animation: grow var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }
.cb-v { font: 500 13px/1 var(--font-display); min-width: 54px; text-align: right; }
.cline { width: 100%; height: auto; display: block; }
.cline .grid { stroke: rgba(245, 242, 236, 0.1); stroke-dasharray: 3 5; }
.cline .ax, .cline .lb { font: 400 10.5px var(--font-mono); fill: var(--faint); }
.cline .area { fill: rgba(63, 216, 242, 0.12); }
.cline .stroke { fill: none; stroke: var(--cyan-400); stroke-width: 2.4; stroke-linejoin: round; }
.cline .dot { fill: #fff; stroke: var(--cyan-400); stroke-width: 2; }
.da-find h3 { font: 500 16px/1.3 var(--font-display); margin-bottom: 8px; }
.da-find ol { display: grid; gap: 10px; counter-reset: f; }
.da-find li { counter-increment: f; position: relative; padding: 12px 14px 12px 46px; border-radius: 12px; background: rgba(11, 10, 11, 0.5); border: 1px solid var(--line-soft); }
.da-find li::before { content: counter(f); position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 500 12px/1 var(--font-display); color: var(--ink-950); background: var(--cyan-400); }
.f-cite { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; }
.f-cite small { color: var(--faint); font-size: 11.5px; }
.da-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }

/* ---------- report ---------- */
.report-art { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr); gap: 18px; padding: clamp(18px, 2vw, 30px); align-items: start; }
.ra-paper { display: grid; gap: 12px; min-width: 0; }
.a4-wrap { border-radius: 10px; overflow: hidden; background: #DDD7CC; padding: 14px; }
.a4-frame { display: block; width: 100%; aspect-ratio: 210 / 297; max-height: 80vh; border: 0; background: #fff; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6); }
.ra-side { display: grid; gap: 12px; min-width: 0; }
.mini-table.tasks tr.is-flag td { background: rgba(255, 194, 77, 0.07); }
.flag { display: inline-block; padding: 1px 8px; border-radius: 6px; font: 500 12px/1.6 var(--font-display); color: var(--ink-950); background: var(--warn); white-space: nowrap; }
.flag.soft { background: transparent; color: var(--warn); border: 1px solid rgba(255, 194, 77, 0.5); }

@media (max-width: 1279px) {
  .meta-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .meta-row .meta-card:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 1099px) {
  .pv, .art-split, .report-art { grid-template-columns: minmax(0, 1fr); }
  .mood-grid { grid-template-columns: minmax(0, 1fr); }
  .mood-card:nth-child(2) { margin-top: 0; }
}