@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#182426; --muted:#6d7a78; --paper:#f7f8f4; --panel:#fff; --line:#dde4df; --teal:#0d766d; --teal-dark:#07564f; --coral:#e66e52; --yellow:#f2c94c; --shadow:0 18px 44px rgba(20,45,40,.08); }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--user-font, Manrope, sans-serif); font-size:var(--user-font-size, 100%); zoom:var(--user-zoom, 1); } button,input,select,textarea { font:inherit; } button,label { cursor:pointer; } .app-shell { min-height:100vh; }
.topbar { height:82px; padding:0 4vw; border-bottom:1px solid var(--line); background:rgba(255,255,255,.9); display:flex; justify-content:space-between; align-items:center; } .brand { display:flex; align-items:center; gap:12px; } .brand-mark { width:38px; height:38px; display:grid; place-items:center; background:var(--teal); color:white; font-weight:800; border-radius:8px 8px 8px 2px; } .brand h1 { margin:0; font-size:18px; letter-spacing:-.6px; } .brand h1 span { color:var(--coral); } .eyebrow,.muted-label,.nav-label { margin:0; color:var(--muted); font:500 10px 'DM Mono',monospace; letter-spacing:1.7px; } .accent { color:var(--coral); } .header-actions { display:flex; gap:10px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:0 16px; border:1px solid transparent; border-radius:5px; font-size:12px; font-weight:800; transition:.2s ease; } .button-primary { background:var(--teal); color:#fff; } .button-primary:hover { background:var(--teal-dark); transform:translateY(-1px); } .button-secondary { background:#edf5f1; color:var(--teal-dark); border-color:#d4e6df; } .button-ghost { color:var(--ink); background:transparent; border-color:var(--line); } .button-ghost:hover,.button-secondary:hover { border-color:var(--teal); } input[type=file] { display:none; }
.workspace { display:grid; grid-template-columns:244px minmax(0,1fr); max-width:1500px; margin:0 auto; } .sidebar { min-height:calc(100vh - 82px); padding:28px 18px; border-right:1px solid var(--line); background:#f0f4ef; display:flex; flex-direction:column; } .project-card { padding:14px; background:#fff; border:1px solid var(--line); border-radius:6px; display:flex; align-items:center; gap:10px; } .project-card strong { display:block; margin-top:5px; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; } .status-dot { width:8px; height:8px; flex:none; border-radius:50%; background:var(--coral); box-shadow:0 0 0 4px #fce8e2; } .side-nav { display:grid; gap:4px; margin-top:30px; } .nav-label { margin:12px 10px 6px; } .nav-item { padding:10px; border:0; border-radius:5px; background:transparent; color:var(--muted); text-align:left; font-size:12px; display:flex; gap:10px; align-items:center; } .nav-item span { width:18px; font-size:17px; color:var(--teal); } .nav-item b { margin-left:auto; font:500 10px 'DM Mono'; } .nav-item:hover,.nav-item.active { color:var(--ink); background:#fff; box-shadow:0 4px 12px rgba(20,45,40,.04); } .sidebar-note { margin-top:auto; padding:16px 8px 4px; border-top:1px solid var(--line); } .shield { color:var(--teal); font-size:24px; } .sidebar-note strong { display:block; margin-top:8px; font-size:11px; } .sidebar-note p { margin:6px 0 0; color:var(--muted); font-size:10px; line-height:1.55; }
.main-content { min-width:0; padding:48px clamp(24px,5vw,72px) 80px; } .hero-row { display:flex; justify-content:space-between; align-items:end; gap:30px; } h2 { margin:8px 0 4px; font-size:clamp(25px,3vw,38px); letter-spacing:-1.8px; } .intro { margin:0; color:var(--muted); font-size:13px; } .legal-note { max-width:620px; margin:12px 0 0; color:var(--muted); font-size:11px; line-height:1.55; } .legal-note strong { color:var(--ink); }
.participant-banner { display:grid; grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr); align-items:center; gap:18px; margin:28px 0 20px; padding:18px 20px; border:1px solid var(--line); border-radius:7px; background:linear-gradient(110deg,#eaf6f0,#fff 48%,#fff2ed); } .participant-banner-title { grid-column:1 / -1; } .participant-banner-title strong { display:block; margin-top:5px; font-size:13px; } .participant-person { display:flex; align-items:center; gap:11px; min-width:0; } .participant-avatar { width:38px; height:38px; display:grid; place-items:center; flex:none; border-radius:50%; color:#fff; font-weight:800; } .owner .participant-avatar { background:var(--teal); } .other .participant-avatar { background:var(--coral); } .participant-person small { display:block; color:var(--muted); font:500 9px 'DM Mono'; letter-spacing:.8px; } .participant-person strong { display:block; margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; } .dialogue-line { color:var(--coral); font-size:24px; }
.view-panel { min-height:420px; } .toolbar { display:flex; gap:9px; margin-top:24px; } .search-box { height:42px; flex:1; display:flex; align-items:center; gap:8px; padding:0 12px; border:1px solid var(--line); border-radius:5px; background:#fff; } .search-box span { color:var(--teal); font-size:22px; } .search-box input { width:100%; border:0; outline:0; color:var(--ink); font-size:12px; } select { min-width:190px; padding:0 12px; border:1px solid var(--line); border-radius:5px; background:white; color:var(--muted); font-size:11px; } .icon-button { width:42px; border:1px solid var(--line); border-radius:5px; color:var(--teal); background:#fff; font-size:19px; } .conversation-meta { display:flex; justify-content:space-between; align-items:center; padding:22px 0 14px; border-bottom:1px solid var(--line); } .conversation-meta strong { display:block; font-size:13px; } .conversation-meta span:not(.original-badge) { display:block; margin-top:4px; color:var(--muted); font-size:10px; } .original-badge { display:inline-flex; color:var(--teal); background:#e7f4ef; padding:6px 8px; border-radius:3px; font:500 9px 'DM Mono'; letter-spacing:.8px; }
.empty-state { padding:65px 20px; text-align:center; color:var(--muted); } .empty-state.compact { padding:70px 20px; } .empty-icon { width:50px; height:50px; display:grid; place-items:center; margin:0 auto 16px; color:var(--teal); background:#e6f3ef; border-radius:50%; font-size:28px; } .empty-state h3 { margin:0 0 8px; color:var(--ink); font-size:15px; } .empty-state p { max-width:410px; margin:0 auto 22px; font-size:11px; line-height:1.6; }
.message-list { display:grid; gap:10px; padding-top:16px; } .message-card { position:relative; padding:16px 18px 14px; border:1px solid var(--line); border-radius:5px; background:#fff; box-shadow:0 4px 14px rgba(20,45,40,.025); } .message-card.highlighted { border-color:#edbd45; background:#fffdf4; } .message-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; color:var(--muted); font:500 10px 'DM Mono'; } .message-number { color:var(--coral); } .message-sender { color:var(--teal-dark); font-family:Manrope; font-weight:800; } .message-body { margin:0; white-space:pre-wrap; font-size:13px; line-height:1.65; } .system-message .message-body { color:var(--muted); font-style:italic; } .message-actions { display:flex; gap:6px; margin-top:12px; } .small-action { border:0; padding:4px 7px; border-radius:3px; background:#f1f5f1; color:var(--muted); font-size:10px; } .small-action:hover { color:var(--teal-dark); background:#e2efeb; } .observation { margin-top:12px; padding:10px 12px; border-left:2px solid var(--coral); background:#fff3ef; color:#8f4d3b; font-size:11px; line-height:1.5; } .observation b { display:block; margin-bottom:4px; font:500 9px 'DM Mono'; letter-spacing:1px; }
.message-evidence { display:grid; gap:7px; margin-top:14px; padding:11px 12px; border-left:2px solid var(--teal); background:#edf7f3; } .message-evidence b { color:var(--teal-dark); font:500 9px 'DM Mono'; letter-spacing:.6px; overflow-wrap:anywhere; } .message-evidence audio { width:min(360px,100%); height:30px; } .message-evidence a { color:var(--teal-dark); font-size:10px; font-weight:800; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; padding-bottom:18px; border-bottom:1px solid var(--line); } .section-heading h3 { margin:6px 0 0; font-size:23px; letter-spacing:-1px; } .integrity-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:22px 0; } .metric-card { min-height:105px; padding:18px; border:1px solid var(--line); border-radius:5px; background:#fff; } .metric-card.wide { grid-column:span 2; } .metric-card span { display:block; color:var(--muted); font:500 9px 'DM Mono'; letter-spacing:1px; } .metric-card strong { display:block; margin-top:12px; overflow-wrap:anywhere; font:500 13px 'DM Mono'; } .text-button { margin-top:10px; padding:0; border:0; background:none; color:var(--coral); font-size:11px; font-weight:800; } .raw-preview { border:1px solid var(--line); background:#fff; border-radius:5px; } .raw-preview .section-heading { padding:16px 18px; align-items:center; } .raw-preview .section-heading h3 { font-size:14px; } .raw-preview .section-heading span { color:var(--muted); font:10px 'DM Mono'; } pre { max-height:260px; overflow:auto; margin:0; padding:18px; border-top:1px solid var(--line); white-space:pre-wrap; color:var(--muted); font:11px/1.6 'DM Mono'; }
.attachment-list { padding-top:20px; } .attachment-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; } .evidence-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:18px; padding:14px 16px; border:1px solid var(--line); border-radius:5px; background:#fff; } .evidence-toolbar strong { display:block; font-size:12px; color:var(--teal-dark); } .evidence-toolbar span { display:block; margin-top:4px; color:var(--muted); font-size:10px; } .attachment-row { display:flex; align-items:center; gap:14px; padding:14px; margin-bottom:8px; border:1px solid var(--line); border-radius:5px; background:#fff; } .attachment-icon { width:36px; height:36px; display:grid; place-items:center; background:#e7f4ef; color:var(--teal); border-radius:4px; } .attachment-row strong { display:block; font-size:12px; } .attachment-row small { color:var(--muted); font-size:10px; } .attachment-row audio { max-width:260px; height:30px; } .attachment-row .attachment-meta { flex:1; min-width:0; } .attachment-row .attachment-meta strong { overflow-wrap:anywhere; } .remove-attachment { margin-left:auto; border:0; background:none; color:var(--coral); }
.report-preview { padding-top:20px; } .report-sheet { padding:26px; border:1px solid var(--line); background:#fff; } .report-sheet h1 { margin:6px 0; font-size:23px; } .report-sheet .report-disclaimer { color:var(--muted); font-size:11px; } .report-integrity { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:22px 0; } .report-integrity div { padding:12px; background:var(--paper); font-size:10px; overflow-wrap:anywhere; } .report-integrity b { display:block; margin-bottom:5px; color:var(--muted); font:500 9px 'DM Mono'; } .report-message { padding:13px 0; border-top:1px solid var(--line); } .report-message small { color:var(--muted); font:500 9px 'DM Mono'; } .report-message p { margin:6px 0 0; white-space:pre-wrap; font-size:12px; line-height:1.55; } .report-attachment { padding:9px 0; border-top:1px solid var(--line); font-size:11px; }
.report-participants { display:grid; grid-template-columns:1fr auto 1fr auto; align-items:center; gap:12px; margin-top:20px; padding:14px; border:1px solid var(--line); background:#edf7f3; font-size:11px; } .report-participants strong { color:var(--muted); font:500 8px 'DM Mono'; } .report-participants span { color:var(--teal-dark); font-weight:800; } .report-participants b { color:var(--coral); font-size:20px; }
.modal-backdrop { position:fixed; inset:0; z-index:5; display:grid; place-items:center; padding:20px; background:rgba(17,38,35,.42); } .modal-backdrop[hidden] { display:none; } .modal { position:relative; width:min(500px,100%); padding:30px; background:#fff; box-shadow:var(--shadow); } .modal h3 { margin:8px 0; font-size:24px; } .modal-context { color:var(--muted); font-size:11px; } .modal textarea { width:100%; margin:14px 0 18px; padding:12px; resize:vertical; border:1px solid var(--line); outline:0; font-size:12px; } .modal textarea:focus { border-color:var(--teal); } .modal-close { position:absolute; top:14px; right:16px; border:0; background:none; color:var(--muted); font-size:22px; } .modal-actions { display:flex; justify-content:flex-end; gap:8px; }
.appearance-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:22px 0; }
.setting-card { min-height:105px; padding:18px; border:1px solid var(--line); border-radius:5px; background:#fff; display:flex; flex-direction:column; justify-content:space-between; gap:14px; }
.setting-card > span { color:var(--muted); font:500 9px 'DM Mono'; letter-spacing:1px; }
.setting-card > span b { float:right; color:var(--teal); font-weight:500; }
.setting-card select { width:100%; min-width:0; height:36px; color:var(--ink); }
.setting-card input[type=color] { width:100%; height:36px; padding:3px; border:1px solid var(--line); background:#fff; }
.setting-card input[type=range] { width:100%; accent-color:var(--teal); }
.appearance-preview { display:flex; align-items:center; gap:14px; padding:18px; border:1px dashed var(--line); border-radius:5px; background:var(--paper); }
.preview-avatar { width:38px; height:38px; display:grid; place-items:center; flex:none; border-radius:50%; background:var(--teal); color:#fff; font-weight:800; }
.appearance-preview strong { color:var(--teal-dark); font-size:13px; }
.appearance-preview p { margin:5px 0 0; color:var(--muted); font-size:11px; }
.participant-settings { display:grid; grid-template-columns:1fr 1.4fr; gap:24px; margin-top:18px; padding:20px; border:1px solid var(--line); border-radius:5px; background:#fff; } .participant-settings h3 { margin:6px 0; font-size:17px; } .participant-settings p:not(.eyebrow) { margin:0; color:var(--muted); font-size:11px; line-height:1.5; } .participant-inputs { display:grid; gap:10px; } .participant-inputs label span { display:block; margin-bottom:5px; color:var(--muted); font:500 9px 'DM Mono'; letter-spacing:.8px; } .participant-inputs input { width:100%; height:38px; padding:0 10px; border:1px solid var(--line); border-radius:4px; color:var(--ink); outline:0; font-size:12px; } .participant-inputs input:focus { border-color:var(--teal); }
.backup-panel { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:18px; padding:20px; border:1px solid var(--line); border-radius:5px; background:#fff; }
.backup-panel h3 { margin:6px 0; font-size:17px; }
.backup-panel p:not(.eyebrow) { max-width:460px; margin:0; color:var(--muted); font-size:11px; line-height:1.5; }
.backup-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.message-sender { color:var(--participant-color, var(--teal-dark)); }
.message-card:nth-child(4n + 1) { --participant-color:#0d766d; }
.message-card:nth-child(4n + 2) { --participant-color:#b05b37; }
.message-card:nth-child(4n + 3) { --participant-color:#5967a8; }
.message-card:nth-child(4n + 4) { --participant-color:#8b5c91; }
.print-report { display:none; }
body[data-theme="ocean"] { --line:#d7e2e8; --paper:#f3f8fa; }
body[data-theme="clay"] { --line:#eadbd4; --paper:#fbf6f2; }
body[data-theme="night"] { --ink:#e5f0ed; --muted:#a6b8b4; --paper:#182827; --panel:#213633; --line:#35504b; --shadow:0 18px 44px rgba(0,0,0,.2); }
body[data-theme="night"] .topbar, body[data-theme="night"] .sidebar { background:#14221f; }
body[data-theme="night"] .project-card, body[data-theme="night"] .message-card, body[data-theme="night"] .metric-card, body[data-theme="night"] .raw-preview, body[data-theme="night"] .setting-card, body[data-theme="night"] .backup-panel, body[data-theme="night"] .search-box, body[data-theme="night"] select { background:#213633; }
body[data-theme="night"] .nav-item:hover, body[data-theme="night"] .nav-item.active { background:#29433e; }
body[data-theme="night"] .message-body, body[data-theme="night"] .modal, body[data-theme="night"] .modal textarea { color:var(--ink); }
@media (max-width:760px) { .topbar { height:auto; padding:16px 20px; align-items:flex-start; gap:14px; } .header-actions .button-ghost { display:none; } .header-actions .button-primary { padding:0 10px; font-size:10px; } .workspace { display:block; } .sidebar { min-height:0; padding:14px 20px; border-right:0; border-bottom:1px solid var(--line); } .side-nav { display:flex; overflow:auto; margin-top:14px; } .side-nav .nav-label,.sidebar-note { display:none; } .nav-item { white-space:nowrap; } .main-content { padding:30px 20px 60px; } .hero-row { display:block; } .import-button { margin-top:20px; } .participant-banner { grid-template-columns:1fr; gap:12px; } .participant-banner-title { grid-column:auto; } .dialogue-line { display:none; } .toolbar { flex-wrap:wrap; } .search-box { flex-basis:100%; } select { flex:1; min-width:0; } .integrity-grid,.appearance-grid { grid-template-columns:1fr; } .metric-card.wide { grid-column:span 1; } .backup-panel,.evidence-toolbar,.participant-settings { display:block; } .backup-actions,.attachment-actions { justify-content:flex-start; margin-top:18px; } .evidence-toolbar .button { margin-top:12px; } .attachment-row { flex-wrap:wrap; } .attachment-row audio { max-width:100%; width:100%; } .participant-inputs { margin-top:18px; } }
@media print { body { background:#fff; } .app-shell { display:none; } .print-report { display:block; padding:28px; color:#111; font-family:Arial,sans-serif; } .print-header { padding-bottom:18px; border-bottom:2px solid #111; } .print-header h1 { margin:8px 0; } .print-header p:last-child { font-size:11px; } .print-integrity { margin:18px 0; font-size:11px; } .print-message { padding:12px 0; border-bottom:1px solid #ddd; break-inside:avoid; } .print-message small { color:#555; } .print-message p { white-space:pre-wrap; margin:6px 0; } .print-observation { margin-top:7px; padding:7px; border-left:2px solid #c54d35; font-size:11px; } }