.content-page { background:#f5f8fc; }.content-topbar { max-width:1296px; margin:auto; padding:0 20px; }.back-link { color:var(--muted); text-decoration:none; font-size:13px; font-weight:800; }.content-shell { max-width:1296px; margin:auto; padding:58px 20px 70px; }.content-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; }.content-heading h1 { margin:0 0 10px; font-size:42px; letter-spacing:0; }.content-heading p:not(.eyebrow) { margin:0; color:var(--muted); }.content-heading .primary-button { min-height:46px; }.content-stats { display:flex; gap:1px; margin:42px 0 24px; overflow:hidden; border:1px solid var(--line); border-radius:15px; background:var(--line); }.content-stats div { flex:1; display:flex; flex-direction:column; gap:5px; padding:20px 24px; background:#fff; }.content-stats strong { font-size:27px; }.content-stats span { color:var(--muted); font-size:12px; }.library-panel { border:1px solid var(--line); border-radius:16px; background:#fff; }.library-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 20px; border-bottom:1px solid var(--line); }.content-tabs { display:flex; gap:4px; }.content-tab,.source-chip { border:0; border-radius:8px; padding:9px 13px; color:var(--muted); background:transparent; font-size:12px; font-weight:800; }.content-tab.is-active,.source-chip.is-active { color:var(--blue); background:#edf3ff; }.search-input { width:220px; padding:10px 13px; border:1px solid var(--line); border-radius:9px; outline:0; font-size:12px; }.search-input:focus { border-color:var(--blue); }.source-row { display:flex; align-items:center; gap:5px; padding:13px 20px; color:var(--muted); font-size:12px; background:#fbfcfe; border-bottom:1px solid var(--line); }.source-row > span { margin-right:10px; }.content-table { width:100%; border-collapse:collapse; text-align:left; }.content-table th { color:#96a2b3; background:#fbfcfe; font-size:11px; font-weight:800; }.content-table th,.content-table td { padding:15px 20px; border-bottom:1px solid #edf1f6; }.content-table td { font-size:13px; }.content-table td:first-child { color:var(--ink); font-weight:800; }.content-table td:nth-child(2) { color:var(--muted); }.type-tag { display:inline-block; padding:4px 8px; color:var(--blue-dark); border-radius:5px; background:#edf3ff; font-size:10px; }.source-label { color:#9aa6b7; font-size:11px; }.delete-button { border:0; color:#c5ccd6; background:transparent; font-size:16px; }.delete-button:hover { color:var(--coral); }.empty-state { padding:58px 20px; text-align:center; }.empty-mark { display:grid; place-items:center; width:44px; height:44px; margin:auto; border-radius:13px; color:var(--blue); background:#edf3ff; font-size:25px; }.empty-state h2 { margin:15px 0 7px; font-size:18px; }.empty-state p { margin:0 0 18px; color:var(--muted); font-size:12px; }.upload-panel { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; gap:35px; margin-top:24px; padding:25px; border:1px dashed #cdd9eb; border-radius:16px; background:#fafdff; }.upload-panel h2 { margin:0 0 8px; font-size:22px; }.upload-panel p:not(.eyebrow) { margin:0; color:var(--muted); font-size:12px; line-height:1.7; }.drop-zone { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:150px; gap:8px; border:1px dashed #9fb9e2; border-radius:13px; color:var(--blue-dark); background:#fff; cursor:pointer; text-align:center; }.drop-zone:hover { background:#f5f8ff; }.drop-zone small { color:#9aa6b7; font-size:11px; }.drop-zone input { display:none; }.upload-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; color:#fff; background:var(--blue); font-size:20px; }.upload-message { grid-column:1/-1; min-height:18px; color:var(--blue); }.outline-button { min-height:40px; }
@media (max-width:700px) { .content-heading { align-items:start; flex-direction:column; }.content-heading h1 { font-size:34px; }.content-heading .primary-button { width:100%; }.content-stats div { padding:15px 12px; }.content-stats strong { font-size:21px; }.library-toolbar { align-items:stretch; flex-direction:column; }.content-tabs { overflow:auto; }.search-input { width:100%; }.content-table-wrap { overflow:auto; }.content-table { min-width:650px; }.upload-panel { grid-template-columns:1fr; }.upload-message { grid-column:auto; } }
.preview-box{max-width:1296px;margin:24px auto 0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff}.preview-heading{display:flex;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);font-size:13px}.preview-heading span{color:var(--muted);font-size:11px}.preview-scroll{max-height:360px;overflow:auto}.preview-scroll .content-table th,.preview-scroll .content-table td{padding:8px 12px}.preview-input{width:100%;min-width:160px;border:1px solid transparent;border-radius:6px;padding:7px 8px;color:var(--ink);background:#f8fafc;font:inherit}.preview-input:focus{border-color:var(--blue);outline:0;background:#fff}.preview-remove{border:0;border-radius:6px;color:#9aa6b7;background:transparent;font-size:18px;line-height:1}.preview-remove:hover{color:var(--red);background:#fff0f1}.preview-actions{display:flex;justify-content:flex-end;gap:9px;padding:13px 16px;border-top:1px solid var(--line)}.preview-actions .primary-button,.preview-actions .outline-button{min-height:38px}
.format-guide{margin-top:24px;padding:24px;border:1px solid var(--line);border-radius:16px;background:#fff}.format-guide h2{margin:0 0 16px;font-size:20px}.format-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.format-grid article{display:flex;flex-direction:column;gap:9px;padding:16px;border:1px solid #e7edf6;border-radius:12px;background:#fbfdff}.format-grid b{font-size:13px;color:var(--ink)}.format-grid code{display:block;min-height:44px;padding:11px;border-radius:9px;color:#162033;background:#eef4ff;font-size:12px;line-height:1.6;white-space:normal;word-break:break-word}
.photo-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:150px;gap:8px;border:1px dashed #efb363;border-radius:13px;color:#87560d;background:#fffaf1;cursor:pointer;text-align:center}.photo-zone:hover{background:#fff4df}.photo-zone .upload-icon{background:#e79625}.photo-zone small{color:#9a7c4f;font-size:11px}.photo-zone input{display:none}@media (max-width:900px){.format-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:560px){.format-grid{grid-template-columns:1fr}.format-guide{padding:18px}}