:root {
  --bg-0:#0a0a0c; --bg-1:#131316; --bg-2:#1a1a1f; --bg-3:#232329; --bg-hover:#2a2a32;
  --border-1:#2a2a32; --border-2:#3a3a44;
  --text-1:#f4f4f6; --text-2:#9c9ca8; --text-3:#6b6b78;
  --accent:#5B5FEF; --accent-hover:#7377ff; --accent-soft:rgba(91,95,239,0.12);
  --success:#34d399; --warning:#fbbf24; --danger:#f87171; --info:#60a5fa;
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #root { height:100%; background:var(--bg-0); color:var(--text-1); font-family:var(--font-sans); font-size:14px; -webkit-font-smoothing:antialiased; }
button { font-family:inherit; font-size:inherit; cursor:pointer; border:none; background:none; color:inherit; }
button:disabled { cursor:not-allowed; }
input, textarea, select {
  font-family:inherit; font-size:inherit;
  background:var(--bg-2); color:var(--text-1);
  border:1px solid var(--border-1); border-radius:var(--radius-sm);
  padding:9px 12px; outline:none; transition:border-color 0.15s; width:100%;
}
input:focus, textarea:focus, select:focus { border-color:var(--accent); }
textarea { resize:vertical; line-height:1.6; min-height:60px; }
a { color:var(--info); text-decoration:none; }
a:hover { text-decoration:underline; }

.btn-primary { background:var(--accent); color:white; padding:9px 18px; border-radius:var(--radius-sm); font-weight:500; transition:background 0.15s; cursor:pointer; }
.btn-primary:hover { background:var(--accent-hover); }
.btn-primary:disabled { background:var(--bg-3); color:var(--text-3); cursor:not-allowed; }
.generate-submit-btn { position:relative; z-index:10; cursor:pointer; }
.generate-submit-btn:disabled { cursor:not-allowed; }
.btn-secondary { background:var(--bg-3); color:var(--text-1); padding:9px 16px; border-radius:var(--radius-sm); border:1px solid var(--border-1); transition:background 0.15s; }
.btn-secondary:hover { background:var(--bg-hover); }
.btn-ghost { color:var(--text-2); padding:6px 12px; border-radius:var(--radius-sm); transition:color 0.15s,background 0.15s; }
.btn-ghost:hover { color:var(--text-1); background:var(--bg-2); }

.card { background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--radius-md); padding:20px; }
.label { display:block; font-size:13px; color:var(--text-1); margin-bottom:10px; font-weight:600; }
.hint { font-size:12px; color:var(--text-3); margin-top:4px; line-height:1.5; }
.tag { display:inline-block; padding:2px 8px; font-size:11px; border-radius:4px; background:var(--bg-3); color:var(--text-2); }
.tag-success { background:rgba(52,211,153,0.15); color:var(--success); }
.tag-warning { background:rgba(251,191,36,0.15); color:var(--warning); }
.tag-danger { background:rgba(248,113,113,0.15); color:var(--danger); }
.tag-info { background:rgba(96,165,250,0.15); color:var(--info); }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-3); }
.empty { text-align:center; color:var(--text-3); padding:60px 20px; font-size:13px; }

.auth-shell { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card { width:380px; background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--radius-lg); padding:36px 32px; box-shadow:0 8px 32px rgba(0,0,0,0.4); }
.auth-brand { display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:30px; }
.auth-brand-mark { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--accent),#74c0fc); display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:18px; }
.auth-title { font-size:18px; font-weight:600; }
.auth-form > * + * { margin-top:14px; }
.auth-switch { text-align:center; margin-top:20px; color:var(--text-2); font-size:13px; }

.app { display:flex; height:100vh; width:100vw; }
.sidebar { width:220px; background:var(--bg-1); border-right:1px solid var(--border-1); display:flex; flex-direction:column; flex-shrink:0; }
.sidebar-brand { padding:24px 20px 18px; display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px; }
.sidebar-brand-mark { width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--accent),#74c0fc); display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:14px; }
.sidebar-nav { flex:1; padding:8px 12px; display:flex; flex-direction:column; gap:2px; }
.nav-section { font-size:11px; text-transform:uppercase; letter-spacing:0.8px; color:var(--text-3); padding:14px 12px 6px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius-sm); color:var(--text-2); font-size:13.5px; transition:background 0.12s,color 0.12s; cursor:pointer; text-align:left; width:100%; }
.nav-item:hover { background:var(--bg-2); color:var(--text-1); }
.nav-item.active { background:var(--accent-soft); color:var(--accent); }
.nav-item-icon { font-size:15px; width:18px; display:inline-flex; justify-content:center; }
.sidebar-foot { padding:14px 16px; border-top:1px solid var(--border-1); }
.balance-pill { background:var(--bg-2); border-radius:var(--radius-md); padding:12px; cursor:pointer; transition:background 0.15s; }
.balance-pill:hover { background:var(--bg-3); }
.balance-pill-label { font-size:11px; color:var(--text-3); margin-bottom:4px; }
.balance-pill-value { font-size:18px; font-weight:600; font-family:var(--font-mono); color:var(--accent); }
.balance-pill-action { font-size:11px; color:var(--text-2); margin-top:2px; }
.user-strip { padding:14px 16px; border-top:1px solid var(--border-1); display:flex; align-items:center; gap:10px; }
.user-avatar { width:32px; height:32px; border-radius:50%; background:var(--bg-3); display:flex; align-items:center; justify-content:center; font-size:13px; }
.main { flex:1; display:flex; flex-direction:column; background:var(--bg-0); overflow:hidden; }
.main-header { height:52px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border-1); flex-shrink:0; }
.main-content { flex:1; overflow-y:auto; padding:28px; }
.page-title { font-size:20px; font-weight:600; margin-bottom:4px; }
.page-subtitle { font-size:13px; color:var(--text-2); margin-bottom:24px; }

.oc-input-card { background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--radius-md); padding:18px; }
.oc-url-row { display:flex; gap:10px; align-items:stretch; }
.oc-url-row input { flex:1; }
.cost-hint { margin-top:10px; font-size:12px; color:var(--text-3); display:flex; gap:14px; }
.cost-hint b { color:var(--text-1); }
.one-click-layout { display:block; }
.one-click-left { display:flex; flex-direction:column; gap:16px; min-width:0; }
.setting-card-title { font-size:15px; font-weight:700; margin-bottom:14px; }
.setting-grid { display:grid; grid-template-columns:1fr; gap:18px; }
.version-label { margin-top:8px; font-size:11px; color:var(--text-3); text-align:center; }
.admin-tabs { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.admin-tab { padding:8px 12px; border-radius:var(--radius-sm); background:var(--bg-2); color:var(--text-2); border:1px solid var(--border-1); }
.admin-tab.active { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.admin-toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px; }
.admin-table-wrap { overflow-x:auto; }
.xhs-account-table-wrap { border:1px solid var(--border-1); border-radius:var(--radius-sm); background:rgba(255,255,255,0.02); }
.xhs-account-table { min-width:820px; }
.xhs-account-table th,
.xhs-account-table td { padding:10px 18px; vertical-align:middle; }
.xhs-account-table .account-select-cell { width:48px; padding-left:14px; padding-right:10px; }
.xhs-account-table .account-name-cell { min-width:260px; }
.xhs-account-table .account-category-cell { min-width:150px; color:var(--text-2); }
.xhs-account-table .account-date-cell { min-width:190px; color:var(--text-3); white-space:nowrap; padding-right:30px; }
.xhs-account-table .account-actions-cell { width:170px; padding-left:24px; }
.account-row-actions { display:flex; justify-content:flex-end; gap:12px; min-width:136px; }
.account-row-actions .btn-secondary,
.account-row-actions .btn-ghost { padding:7px 14px; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.detail-cell { background:var(--bg-2); border:1px solid var(--border-1); border-radius:var(--radius-sm); padding:10px 12px; min-width:0; }
.detail-cell-label { font-size:11px; color:var(--text-3); margin-bottom:4px; }
.detail-cell-value { font-size:13px; color:var(--text-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.compare { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:24px; }
.compare-side { background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--radius-md); padding:18px; min-width:0; }
.compare-side.new { border-color:var(--accent); position:relative; }
.compare-side.new::before { content:'AI 重塑'; position:absolute; top:-10px; left:14px; background:var(--accent); color:white; font-size:11px; padding:2px 8px; border-radius:4px; font-weight:500; }
.compare-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--border-1); }
.compare-label { font-size:13px; font-weight:500; color:var(--text-2); }
.compare-title { font-size:16px; font-weight:600; line-height:1.4; margin-bottom:10px; word-break:break-word; }
.compare-content { font-size:13px; line-height:1.7; color:var(--text-2); white-space:pre-wrap; word-break:break-word; margin-bottom:14px; }
.compare-images { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; }
.compare-image { aspect-ratio:3/4; border-radius:var(--radius-sm); background:var(--bg-2); overflow:hidden; position:relative; }
.compare-image img { width:100%; height:100%; object-fit:cover; display:block; }
.compare-image .img-download { position:absolute; bottom:8px; right:8px; font-size:12px; padding:4px 10px; }
.failed-image-slot { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:14px; text-align:center; color:var(--text-2); border:1px dashed var(--border); background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01)); }
.failed-image-slot strong { font-size:13px; color:var(--text); }
.failed-image-slot span { font-size:12px; line-height:1.45; color:var(--text-3); }

.data-table { width:100%; border-collapse:collapse; margin-top:14px; font-size:13px; }
.data-table th { text-align:left; padding:10px 14px; font-weight:500; font-size:11px; color:var(--text-3); text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--border-1); }
.data-table td { padding:12px 14px; border-bottom:1px solid var(--border-1); color:var(--text-2); }
.data-table tr:hover td { background:var(--bg-1); }
.delta-pos { color:var(--success); font-family:var(--font-mono); }
.delta-neg { color:var(--danger); font-family:var(--font-mono); }

.notes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-top:18px; }
.note-card { position:relative; background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--radius-md); overflow:hidden; cursor:pointer; transition:border-color 0.15s,transform 0.15s; }
.note-card:hover { border-color:var(--border-2); transform:translateY(-2px); }
.note-card-cover { aspect-ratio:3/4; background:var(--bg-2); }
.note-card-cover img { width:100%; height:100%; object-fit:cover; }
.note-card-body { padding:10px 12px; }
.note-card-title { font-size:13px; font-weight:500; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.note-card-date { font-size:11px; color:var(--text-3); margin-top:6px; }
/* 删除按钮:默认隐藏,卡片 hover 才显形;确认态常驻 */
.note-card-del { position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%; background:rgba(0,0,0,0.55); backdrop-filter:blur(4px); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; opacity:0; transition:opacity 0.15s,background 0.15s,width 0.2s; padding:0; }
.note-card:hover .note-card-del { opacity:1; }
.note-card-del:hover { background:rgba(239,68,68,0.9); }
.note-card-del svg { width:14px; height:14px; }
.note-card-del.confirming { opacity:1; width:auto; padding:0 12px; border-radius:14px; background:#ef4444; font-size:12px; font-weight:500; gap:4px; }
.note-card-del.confirming:hover { background:#dc2626; }
.note-card.deleting { opacity:0; transform:scale(0.92); transition:opacity 0.25s,transform 0.25s; pointer-events:none; }
/* 风格选择 chip */
.style-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.style-chip { padding:7px 14px; border-radius:20px; background:var(--bg-2); color:var(--text-2); border:1px solid var(--border-1); font-size:13px; cursor:pointer; transition:all 0.15s; }
.style-chip:hover { background:var(--bg-3); color:var(--text-1); border-color:var(--border-2); }
.style-chip.active { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.style-chip:disabled { cursor:not-allowed; opacity:0.5; }
/* 钱包 tab */
.wallet-tabs { display:flex; align-items:center; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--border-1); }
.wallet-tab { background:transparent; color:var(--text-2); padding:10px 16px; border:none; border-bottom:2px solid transparent; font-size:14px; cursor:pointer; transition:color 0.15s,border-color 0.15s; }
.wallet-tab:hover { color:var(--text-1); }
.wallet-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.wallet-tab-hint { margin-left:auto; font-size:12px; color:var(--text-3); }
/* 成本拆解列表 */
.breakdown-list { display:flex; flex-direction:column; gap:8px; }
.breakdown-item { background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--radius-sm); overflow:hidden; }
.breakdown-row { display:grid; grid-template-columns:170px 1fr 100px 24px; align-items:center; gap:14px; padding:12px 16px; cursor:default; }
.breakdown-row.clickable { cursor:pointer; }
.breakdown-row.clickable:hover { background:var(--bg-hover); }
.breakdown-date { font-size:12px; color:var(--text-3); font-family:var(--font-mono); }
.breakdown-title { font-size:14px; color:var(--text-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.breakdown-cost { font-family:var(--font-mono); font-weight:600; text-align:right; }
.breakdown-expand { font-size:18px; color:var(--text-3); text-align:center; }
.breakdown-detail { padding:10px 16px 14px 184px; border-top:1px solid var(--border-1); background:var(--bg-2); }
.breakdown-line { display:flex; justify-content:space-between; padding:4px 0; font-size:13px; color:var(--text-2); }
.breakdown-fallback { color:var(--text-3); font-size:12px; font-style:italic; padding:8px 16px 12px 184px; }
/* 标签 chips — 显示在笔记详情和生成结果区 */
.tag-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.tag-chip { background:var(--accent-soft); color:var(--accent); font-size:12px; padding:3px 10px; border-radius:12px; font-weight:500; }
/* 重生图片按钮 */
.compare-image { position:relative; }
.img-regen-btn { position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,0.55); backdrop-filter:blur(4px); border:none; color:#fff; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.15s,background 0.15s; padding:0; z-index:2; }
.compare-image:hover .img-regen-btn { opacity:1; }
.img-regen-btn:hover { background:var(--accent); }
.img-regen-btn:disabled { cursor:not-allowed; opacity:1 !important; background:rgba(0,0,0,0.4); }
/* 删除按钮: 左上角红色调, hover 才显示 */
.img-delete-btn { position:absolute; top:8px; left:8px; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,0.55); backdrop-filter:blur(4px); border:none; color:#fff; font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.15s,background 0.15s; padding:0; z-index:2; }
.compare-image:hover .img-delete-btn { opacity:1; }
.img-delete-btn:hover { background:#dc2626; }
.img-delete-btn:disabled { cursor:not-allowed; opacity:1 !important; background:rgba(0,0,0,0.4); }
.img-regen-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.65); backdrop-filter:blur(2px); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; z-index:3; border-radius:inherit; }
/* 版本角标 */
.img-version-badge { position:absolute; top:8px; left:8px; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); color:#fff; border:none; font-size:11px; font-weight:500; padding:4px 8px; border-radius:10px; cursor:pointer; z-index:2; transition:background 0.15s; }
.img-version-badge:hover { background:var(--accent); }
/* 版本弹窗 */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:100; padding:40px; }
.modal-card { background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--radius-md); padding:20px; max-width:900px; width:100%; max-height:80vh; overflow:auto; }
.modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; font-size:15px; font-weight:600; }
.points-modal { width:420px; max-width:100%; background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--radius-lg); padding:24px; box-shadow:0 22px 70px rgba(0,0,0,0.55); }
.points-modal-icon { width:48px; height:48px; border-radius:14px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:16px; border:1px solid rgba(59,91,219,0.35); }
.points-modal-title { font-size:20px; font-weight:700; margin-bottom:8px; color:var(--text-1); }
.points-modal-content { color:var(--text-2); line-height:1.7; margin-bottom:22px; }
.points-modal-actions { display:flex; justify-content:flex-end; gap:10px; }
.confirm-modal { width:440px; max-width:100%; background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--radius-lg); padding:24px; box-shadow:0 22px 70px rgba(0,0,0,0.55); }
.confirm-modal-icon { width:48px; height:48px; border-radius:14px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:16px; border:1px solid rgba(91,95,239,0.35); }
.confirm-modal-title { font-size:20px; font-weight:700; margin-bottom:8px; color:var(--text-1); }
.confirm-modal-content { color:var(--text-2); line-height:1.7; margin-bottom:22px; white-space:pre-wrap; }
.confirm-modal-actions { display:flex; justify-content:flex-end; gap:10px; }
.collected-thumb { width:48px; height:48px; border-radius:4px; overflow:hidden; background:var(--bg-3); border:1px solid var(--border-1); padding:0; cursor:zoom-in; }
.collected-thumb:hover { border-color:var(--accent); }
.collected-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.version-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.version-cell { position:relative; border:2px solid transparent; border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; transition:border-color 0.15s,transform 0.15s; }
.version-cell:hover:not(.current) { transform:translateY(-2px); border-color:var(--border-2); }
.version-cell.current { border-color:var(--accent); cursor:default; }
.version-cell img { width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }
.version-meta { padding:8px 10px; display:flex; justify-content:space-between; align-items:center; font-size:11px; }
.version-current-tag { background:var(--accent); color:#fff; padding:2px 8px; border-radius:8px; font-size:11px; font-weight:500; }
.version-select-hint { color:var(--text-3); }
.version-date { color:var(--text-3); font-family:var(--font-mono); }
.compliance-panel { margin-top:16px; border:1px solid var(--border-1); border-radius:var(--radius-md); background:var(--bg-1); overflow:hidden; }
.compliance-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border-1); }
.compliance-body { padding:14px; }
.compliance-results { display:grid; gap:10px; }
.compliance-summary { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:var(--text-2); }
.compliance-risk-counts { display:flex; gap:6px; flex-wrap:wrap; }
.compliance-hit { border-radius:3px; padding:0 2px; scroll-margin:120px; font-weight:700; transition:outline-color .15s, background .15s; }
.compliance-hit.risk-legal_risk { color:#fecaca; background:rgba(248,113,113,0.2); border-bottom:1px solid rgba(248,113,113,0.78); }
.compliance-hit.risk-platform_risk { color:#fed7aa; background:rgba(251,146,60,0.18); border-bottom:1px solid rgba(251,146,60,0.7); }
.compliance-hit.risk-reference { color:#bbf7d0; background:rgba(34,197,94,0.14); border-bottom:1px solid rgba(74,222,128,0.56); font-weight:600; }
.compliance-hit.active { outline:2px solid rgba(96,165,250,0.85); background:rgba(96,165,250,0.18); }
.compliance-badge { font-size:11px; padding:2px 7px; border-radius:10px; background:rgba(248,113,113,0.16); color:#fca5a5; white-space:nowrap; }
.compliance-badge.risk-legal_risk { background:rgba(248,113,113,0.16); color:#fca5a5; }
.compliance-badge.risk-platform_risk { background:rgba(251,146,60,0.14); color:#fdba74; }
.compliance-badge.risk-reference { background:rgba(34,197,94,0.14); color:#86efac; }
.compliance-note { color:var(--text-3); font-size:12px; line-height:1.6; margin-top:10px; }
.compliance-admin-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:14px; }
.compliance-admin-form { display:grid; gap:10px; }
.admin-row-selected td { background:rgba(91,95,239,0.10); }

.dot-loader::after { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-left:6px; animation:pulse 1.2s infinite; vertical-align:middle; }
@keyframes pulse { 0%,100%{opacity:0.3;transform:scale(0.8);} 50%{opacity:1;transform:scale(1.15);} }

.toast { position:fixed; bottom:24px; right:24px; background:var(--bg-2); border:1px solid var(--border-2); border-radius:var(--radius-md); padding:12px 18px; font-size:13px; box-shadow:0 8px 24px rgba(0,0,0,0.4); z-index:2000; animation:slide-in 0.2s; max-width:360px; }
.toast.success { border-left:3px solid var(--success); }
.toast.error { border-left:3px solid var(--danger); }
.copy-toast { position:fixed; transform:translate(-50%, -100%); background:var(--bg-1); border:1px solid var(--border-2); border-radius:var(--radius-sm); padding:8px 11px; font-size:12px; color:var(--text-1); box-shadow:0 8px 22px rgba(0,0,0,0.36); z-index:2500; pointer-events:none; animation:copy-toast-in 0.14s ease-out; white-space:nowrap; }
.copy-toast.success { border-color:rgba(74,222,128,0.6); }
.copy-toast.error { border-color:rgba(248,113,113,0.7); }
@keyframes slide-in { from{transform:translateY(10px); opacity:0;} to{transform:translateY(0); opacity:1;} }
@keyframes copy-toast-in { from{transform:translate(-50%, calc(-100% + 6px)); opacity:0;} to{transform:translate(-50%, -100%); opacity:1;} }
@media (max-width: 960px) {
  .one-click-layout { display:block; }
  .oc-url-row { flex-direction:column; }
  .compare { grid-template-columns:1fr; }
  .detail-grid { grid-template-columns:1fr; }
  .compliance-body, .compliance-admin-grid { grid-template-columns:1fr; }
}
@media (max-width: 720px) {
  .app { width:100%; }
  .main-content { padding:18px; }
  .style-chip { padding:7px 11px; }
  .modal-overlay { padding:16px; }
}