:root {
  --bg:#f5f3f0;--surface:#ffffff;--surface-2:#f9f8f6;
  --border:rgba(0,0,0,0.08);--border-strong:rgba(0,0,0,0.15);
  --text:#1a1916;--text-2:#5c5a55;--text-3:#9b9890;
  --accent-claude:#d97706;--accent-codex:#2563eb;
  --accent-claude-soft:#fef3c7;--accent-codex-soft:#dbeafe;
  --ok:#16a34a;--danger:#dc2626;
  --mono:"IBM Plex Mono",monospace;--sans:"Syne",system-ui,sans-serif;
  --radius:10px;--radius-lg:16px;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
  --mode-color:var(--accent-claude);--mode-soft:var(--accent-claude-soft);
}
html[data-theme="dark"]{
  --bg:#0f0f0e;--surface:#1a1917;--surface-2:#222220;
  --border:rgba(255,255,255,0.07);--border-strong:rgba(255,255,255,0.14);
  --text:#f0ede8;--text-2:#a8a49c;--text-3:#6b6860;
  --accent-claude:#f59e0b;--accent-codex:#60a5fa;
  --accent-claude-soft:rgba(245,158,11,0.12);--accent-codex-soft:rgba(96,165,250,0.12);
}
html[data-mode="codex"]{--mode-color:var(--accent-codex);--mode-soft:var(--accent-codex-soft);}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;transition:background .2s,color .2s;}
button,input,textarea,select{font:inherit;}
.app{display:grid;grid-template-rows:auto 1fr;height:100dvh;overflow:hidden;}
.topbar{display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm);z-index:100;flex-shrink:0;}
.topbar-logo{font-weight:800;font-size:1rem;letter-spacing:-0.03em;color:var(--text);flex-shrink:0;}
.topbar-logo span{color:var(--mode-color);transition:color .2s;}
.topbar-logo sup{font-size:0.5rem;font-weight:600;color:var(--text-3);vertical-align:super;margin-left:1px;}
.topbar-search{flex:1;position:relative;}
.topbar-search input{width:100%;padding:8px 14px 8px 36px;background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--radius);color:var(--text);font-size:14px;transition:border-color .15s,box-shadow .15s;}
.topbar-search input:focus{outline:none;border-color:var(--mode-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--mode-color) 15%,transparent);}
.topbar-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:15px;pointer-events:none;}
.topbar-actions{display:flex;gap:8px;flex-shrink:0;}
.mode-toggle{display:flex;align-items:center;background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--radius);overflow:hidden;flex-shrink:0;}
.mode-btn{padding:7px 14px;border:none;background:transparent;cursor:pointer;font-size:13px;font-weight:600;color:var(--text-2);transition:all .15s;white-space:nowrap;}
html[data-mode="claude"] .mode-btn[data-mode="claude"]{background:var(--accent-claude);color:white;}
html[data-mode="codex"] .mode-btn[data-mode="codex"]{background:var(--accent-codex);color:white;}
.icon-btn{border:1px solid var(--border-strong);background:var(--surface);border-radius:var(--radius);padding:7px 12px;cursor:pointer;color:var(--text-2);font-size:13px;font-weight:600;transition:all .15s;white-space:nowrap;}
.icon-btn:hover{border-color:var(--mode-color);color:var(--mode-color);}
.body{display:grid;grid-template-columns:300px 1fr;overflow:hidden;}
.sidebar{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;}
.sidebar-filters{padding:12px 14px;border-bottom:1px solid var(--border);flex-shrink:0;}
.filter-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.chip{padding:4px 10px;border:1px solid var(--border-strong);border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;color:var(--text-2);background:var(--surface-2);transition:all .15s;white-space:nowrap;}
.chip:hover{border-color:var(--mode-color);color:var(--mode-color);}
.chip.active{background:var(--mode-color);border-color:var(--mode-color);color:white;}
.filter-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);}
.prompt-list{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:4px;}
.prompt-list::-webkit-scrollbar{width:4px;}
.prompt-list::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px;}
.prompt-card{border-radius:var(--radius);padding:10px 12px;cursor:pointer;transition:all .15s;border:1px solid transparent;}
.prompt-card:hover{background:var(--surface-2);border-color:var(--border);}
.prompt-card.active{background:var(--mode-soft);border-color:var(--mode-color);}
.prompt-card-title{font-size:13px;font-weight:600;color:var(--text);line-height:1.3;}
.prompt-card-desc{font-size:11px;color:var(--text-3);margin-top:3px;line-height:1.4;}
.prompt-card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
.tag{font-size:10px;padding:2px 6px;border-radius:4px;background:var(--bg);color:var(--text-3);font-weight:600;}
.tag.mode-claude{background:var(--accent-claude-soft);color:var(--accent-claude);}
.tag.mode-codex{background:var(--accent-codex-soft);color:var(--accent-codex);}
.tag.mode-both{background:var(--bg);color:var(--text-2);border:1px solid var(--border-strong);}
.empty-state{padding:24px 16px;text-align:center;color:var(--text-3);font-size:13px;}
.workspace{display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;}
.workspace-header{padding:16px 20px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;}
.workspace-title{font-size:1.1rem;font-weight:800;letter-spacing:-0.02em;color:var(--text);}
.workspace-desc{font-size:13px;color:var(--text-2);margin-top:4px;}
.workspace-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;border:1px solid var(--border-strong);color:var(--text-2);background:var(--surface-2);}
.badge.primary{background:var(--mode-soft);border-color:var(--mode-color);color:var(--mode-color);}
.badge.fav{background:#fef9c3;border-color:#ca8a04;color:#92400e;}
html[data-theme="dark"] .badge.fav{background:rgba(202,138,4,.15);color:#fbbf24;border-color:rgba(202,138,4,.3);}
.badge.custom-badge{background:#f0fdf4;border-color:#16a34a;color:#15803d;}
html[data-theme="dark"] .badge.custom-badge{background:rgba(22,163,74,.12);color:#4ade80;border-color:rgba(22,163,74,.3);}
.workspace-body{display:grid;grid-template-columns:1fr 360px;overflow:hidden;}
.editor-pane{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border);}
.pane-toolbar{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surface-2);flex-shrink:0;flex-wrap:wrap;}
.pane-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);flex:1;}
.btn{padding:6px 12px;border-radius:var(--radius);border:1px solid var(--border-strong);cursor:pointer;font-size:12px;font-weight:600;transition:all .15s;background:var(--surface);color:var(--text-2);}
.btn:hover{border-color:var(--mode-color);color:var(--mode-color);}
.btn.primary{background:var(--mode-color);border-color:var(--mode-color);color:white;}
.btn.primary:hover{opacity:.9;}
.btn.danger{color:var(--danger);border-color:var(--danger);}
.btn.danger:hover{background:#fef2f2;}
html[data-theme="dark"] .btn.danger:hover{background:rgba(220,38,38,.1);}
.btn.ok{color:var(--ok);border-color:var(--ok);}
.btn.ok:hover{background:#f0fdf4;}
html[data-theme="dark"] .btn.ok:hover{background:rgba(22,163,74,.1);}
.hidden{display:none!important;}
.editor-area{flex:1;overflow-y:auto;padding:16px;}
textarea#editor{width:100%;height:100%;min-height:320px;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-lg);padding:16px;color:var(--text);font-family:var(--mono);font-size:13px;line-height:1.65;resize:none;outline:none;transition:border-color .15s;}
textarea#editor:focus{border-color:var(--mode-color);}
.right-panel{display:flex;flex-direction:column;overflow:hidden;background:var(--surface-2);}
.panel-section{border-bottom:1px solid var(--border);}
.panel-section-head{display:flex;align-items:center;gap:8px;padding:10px 14px;cursor:pointer;user-select:none;}
.panel-section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);flex:1;}
.panel-section-toggle{font-size:12px;color:var(--text-3);}
.panel-body{padding:12px 14px;}
.panel-body.collapsed{display:none;}
.var-grid{display:grid;gap:10px;}
.var-row{display:grid;gap:4px;}
.var-label{font-size:11px;font-weight:600;color:var(--text-3);}
.var-input,.var-select{width:100%;padding:7px 10px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);color:var(--text);font-size:13px;transition:border-color .15s;}
.var-input:focus,.var-select:focus{outline:none;border-color:var(--mode-color);}
.var-note{font-size:11px;color:var(--text-3);margin-top:3px;font-family:var(--mono);}
.mode-hint{margin:0 14px 12px;padding:10px 12px;border-radius:var(--radius);font-size:12px;line-height:1.5;color:var(--text-2);}
.mode-hint.claude{background:var(--accent-claude-soft);border-left:3px solid var(--accent-claude);}
.mode-hint.codex{background:var(--accent-codex-soft);border-left:3px solid var(--accent-codex);}
.mode-hint strong{display:block;margin-bottom:3px;color:var(--text);}
textarea#notesArea{width:100%;min-height:120px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);padding:10px;color:var(--text);font-family:var(--mono);font-size:12px;line-height:1.6;resize:vertical;outline:none;transition:border-color .15s;}
textarea#notesArea:focus{border-color:var(--mode-color);}
.notes-actions{display:flex;gap:6px;margin-top:8px;}
.panel-scroll{flex:1;overflow-y:auto;}
.panel-scroll::-webkit-scrollbar{width:3px;}
.panel-scroll::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px;}
.tip-card{margin-bottom:8px;padding:10px 12px;background:var(--surface);border-radius:var(--radius);border-left:3px solid var(--mode-color);}
.tip-title{font-size:12px;font-weight:600;margin-bottom:3px;color:var(--text);}
.tip-body{font-size:11px;color:var(--text-2);line-height:1.5;}
.workspace-footer{padding:10px 20px;border-top:1px solid var(--border);background:var(--surface);display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.footer-stats{font-size:12px;color:var(--text-3);font-family:var(--mono);flex:1;}
.footer-actions{display:flex;gap:6px;}
.sidebar-footer{padding:10px 14px;border-top:1px solid var(--border);flex-shrink:0;}
.sidebar-stats{display:flex;gap:12px;}
.stat-item{text-align:center;}
.stat-num{font-size:1.1rem;font-weight:800;color:var(--text);display:block;}
.stat-lbl{font-size:10px;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--text);color:var(--surface);padding:10px 20px;border-radius:var(--radius);font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:all .2s;z-index:9999;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
@media(max-width:1100px){.workspace-body{grid-template-columns:1fr;}.right-panel{display:none;}}
@media(max-width:780px){.body{grid-template-columns:1fr;}.sidebar{display:none;}.topbar-logo{display:none;}}
@media print{.topbar,.sidebar,.pane-toolbar,.workspace-footer,.right-panel{display:none!important;}body{background:white;color:black;}textarea#editor{border:none;font-size:12pt;}}