:root {
    --bg:#EEEEF7; --surface:#FFFFFF; --border:#DDDDF0;
    --text-1:#0A0A1E; --text-2:#6060A0; --text-3:#9090C0;
    --accent:#5040E8; --accent-soft:rgba(80,64,232,.10);
    --err:#EF4444; --ok:#10B981; --warn:#F59E0B;
}
@media (prefers-color-scheme:dark) {
    :root {
        --bg:#07070F; --surface:#111122; --border:#1C1C38;
        --text-1:#DCDCF4; --text-2:#7A7AA8; --text-3:#48487A;
        --accent:#7B6FFF; --accent-soft:rgba(123,111,255,.12);
    }
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family:system-ui,-apple-system,'Segoe UI',sans-serif; background:var(--bg); color:var(--text-1); min-height:100vh; }
input, textarea, select, button { font:inherit; color:inherit; }
input, textarea, select {
    width:100%; padding:10px 12px; background:var(--bg); border:1.5px solid var(--border);
    border-radius:10px; outline:none; transition:border-color .15s;
}
input:focus, textarea:focus, select:focus { border-color:var(--accent); }
textarea { resize:vertical; min-height:120px; }

.btn { border:none; border-radius:10px; padding:9px 16px; cursor:pointer; font-weight:600; font-size:.875rem; transition:opacity .15s, transform .15s; background:var(--accent-soft); color:var(--accent); }
.btn:hover { opacity:.85; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-danger { background:rgba(239,68,68,.1); color:var(--err); }
.btn-generate { background:linear-gradient(135deg,#6B48FF,#C044CC); color:#fff; }
.btn-icon { padding:7px 10px; }

.card { background:var(--surface); border:1px solid var(--border); border-radius:16px; }
.logo { font-size:1.375rem; font-weight:800; letter-spacing:-.02em; }
.logo span { color:var(--accent); }
.subtitle { font-size:.875rem; color:var(--text-2); }

.login-body { display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card { width:100%; max-width:360px; padding:32px; display:flex; flex-direction:column; gap:14px; }
.alert { padding:10px 14px; border-radius:8px; font-size:.875rem; background:rgba(239,68,68,.1); color:var(--err); }
.back { text-align:center; font-size:.8125rem; color:var(--text-3); text-decoration:none; }

.wrap { max-width:900px; margin:0 auto; padding:24px 16px 80px; }
header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
header nav { display:flex; gap:8px; flex-wrap:wrap; }

.quick-add { display:flex; gap:8px; padding:12px; margin-bottom:16px; }
.quick-add input { flex:1; }

.toolbar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.toolbar input { flex:1; min-width:180px; }
.toolbar select { width:auto; }
.toolbar #fltApp { max-width:200px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.filters { display:flex; gap:6px; }
.chip { border:1px solid var(--border); background:var(--surface); border-radius:999px; padding:6px 12px; font-size:.8125rem; cursor:pointer; color:var(--text-2); }
.chip.active { background:var(--accent); border-color:var(--accent); color:#fff; }

.list { display:flex; flex-direction:column; gap:10px; }
.idea { padding:14px 16px; display:flex; gap:14px; align-items:flex-start; }
.idea.is-delivered { opacity:.55; }
.idea-icon { font-size:1.75rem; line-height:1; }
.idea-body { flex:1; min-width:0; }
.idea-title { font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.idea-desc { font-size:.875rem; color:var(--text-2); margin-top:4px; white-space:pre-wrap; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.idea-meta { font-size:.75rem; color:var(--text-3); margin-top:6px; }
.idea-actions { display:flex; gap:6px; flex-shrink:0; }
.badge { font-size:.6875rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.p-high { background:rgba(239,68,68,.12); color:var(--err); }
.p-medium { background:rgba(245,158,11,.12); color:var(--warn); }
.p-low { background:var(--accent-soft); color:var(--accent); }
.s-generating { background:rgba(107,72,255,.12); color:#6B48FF; }
.s-testing { background:rgba(245,158,11,.12); color:var(--warn); }
.s-delivered { background:rgba(16,185,129,.12); color:var(--ok); }
.empty { text-align:center; color:var(--text-3); padding:48px 0; }

.modal { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:16px; z-index:10; }
.modal[hidden] { display:none; }
.modal-card { width:100%; max-width:560px; max-height:90vh; overflow:auto; padding:24px; display:flex; flex-direction:column; gap:12px; }
.modal-card h2 { font-size:1.125rem; }
.row { display:flex; gap:8px; }
.row .icon-input { width:64px; text-align:center; }
label { font-size:.8125rem; color:var(--text-2); display:flex; flex-direction:column; gap:4px; }
label[hidden] { display:none; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--text-1); color:var(--bg); padding:10px 18px; border-radius:10px; font-size:.875rem; z-index:20; }

@media (max-width:600px) {
    .idea { flex-wrap:wrap; }
    .idea-actions { width:100%; justify-content:flex-end; }
}
.logo { display:flex; align-items:center; gap:10px; }
.logo-img { width:36px; height:36px; border-radius:10px; }
.login-card .logo { justify-content:center; }

.modal-confirm { z-index:15; backdrop-filter:blur(3px); }
.modal:not([hidden]) .modal-card { animation:pop .16s ease-out; }
@keyframes pop { from { opacity:0; transform:scale(.96) translateY(6px); } }
.confirm-card { max-width:400px; text-align:center; align-items:center; }
.confirm-icon { width:56px; height:56px; border-radius:50%; background:rgba(239,68,68,.12); display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
.confirm-idea { display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:10px; background:var(--bg); border:1px solid var(--border); max-width:100%; }
.confirm-idea strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.confirm-text { font-size:.875rem; color:var(--text-2); }
.confirm-actions { width:100%; justify-content:stretch; }
.confirm-actions .btn { flex:1; }
.btn-danger-solid { background:var(--err); color:#fff; }

.btn-mic.rec { background:var(--err); color:#fff; animation:mic-pulse 1.2s ease-in-out infinite; }
@keyframes mic-pulse { 50% { box-shadow:0 0 0 6px rgba(239,68,68,.25); } }
.dictate-field { position:relative; margin-top:-8px; }
.dictate-field textarea { padding-right:52px; }
.dictate-field .btn-mic { position:absolute; right:8px; bottom:10px; }
.dictate-field .btn-rephrase { position:absolute; right:8px; bottom:52px; background:linear-gradient(135deg,#6B48FF,#C044CC); color:#fff; }
.btn-rephrase.busy { animation:rephrase-spin 1s linear infinite; cursor:wait; }
@keyframes rephrase-spin { to { transform:rotate(360deg); } }

.mode-toggle { display:flex; gap:6px; padding:4px; border-radius:12px; background:var(--bg); border:1px solid var(--border); }
.mode-btn { flex:1; border:none; border-radius:9px; padding:8px 10px; cursor:pointer; font-weight:600; font-size:.875rem; background:transparent; color:var(--text-2); transition:background .15s, color .15s; }
.mode-btn.active { background:var(--accent); color:#fff; }
.badge.m-evolution { background:rgba(107,72,255,.12); color:#6B48FF; }

a.btn { text-decoration:none; display:inline-flex; align-items:center; }
a.btn[hidden] { display:none; }
.link-field { display:flex; gap:6px; }
.link-field input { flex:1; }

.history { border:1px solid var(--border); border-radius:10px; background:var(--bg); }
.history summary { cursor:pointer; padding:8px 12px; font-size:.8125rem; color:var(--text-2); font-weight:600; }
.history-list { display:flex; flex-direction:column; gap:8px; padding:0 10px 10px; max-height:320px; overflow:auto; }
.version { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:8px 10px; }
.version-head { display:flex; align-items:center; gap:8px; font-size:.75rem; color:var(--text-3); }
.version-text { font-size:.8125rem; color:var(--text-2); margin-top:6px; white-space:pre-wrap; cursor:pointer; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.version-text.open { display:block; }
.v-rephrased { background:rgba(107,72,255,.12); color:#6B48FF; }
.v-draft { background:var(--border); color:var(--text-2); }

.idea-check { width:18px; height:18px; margin-top:6px; flex-shrink:0; accent-color:var(--accent); cursor:pointer; }
.idea.is-selected { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.c-small { background:rgba(16,185,129,.12); color:var(--ok); }
.c-medium { background:rgba(245,158,11,.12); color:var(--warn); }
.c-large { background:rgba(239,68,68,.12); color:var(--err); }
.c-pending, .q-waiting { background:var(--border); color:var(--text-2); }
.q-running { background:rgba(107,72,255,.12); color:#6B48FF; animation:mic-pulse 1.6s ease-in-out infinite; }
.badge.cost { background:var(--accent-soft); color:var(--accent); }
.batch-bar { position:fixed; left:50%; bottom:16px; transform:translateX(-50%); width:calc(100% - 32px); max-width:868px; padding:10px 12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; box-shadow:0 8px 24px rgba(0,0,0,.18); z-index:5; }
.batch-bar[hidden] { display:none; }
.batch-bar #batchCount { font-size:.875rem; font-weight:600; }
#btnEstimate.busy { animation:rephrase-spin 1s linear infinite; cursor:wait; }

.filters[hidden], .toolbar select[hidden], .list[hidden], .board[hidden] { display:none; }
.wrap.is-board { max-width:1400px; }
.board { display:flex; gap:12px; overflow-x:auto; align-items:flex-start; padding-bottom:12px; }
.board-col { flex:0 0 280px; background:var(--accent-soft); border:1.5px dashed transparent; border-radius:16px; padding:10px; display:flex; flex-direction:column; gap:8px; transition:border-color .15s, background .15s; }
.board-col.drop-over { border-color:var(--accent); background:rgba(80,64,232,.18); }
.board-col-head { display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:8px; font-weight:700; font-size:.875rem; padding:2px 4px; margin:0; }
.board-col-head span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board-count { font-size:.75rem; color:var(--text-2); background:var(--surface); border-radius:999px; padding:1px 8px; }
.board-cards { display:flex; flex-direction:column; gap:8px; min-height:48px; }
.idea.board-card { padding:10px 12px; flex-direction:column; gap:6px; cursor:grab; }
.board-card.dragging { opacity:.4; }
.board-card-head { display:flex; align-items:flex-start; gap:8px; }
.board-card-head .idea-check { margin-top:2px; }
.board-card-icon { font-size:1.125rem; line-height:1.2; }
.board-card-title { font-weight:700; font-size:.875rem; flex:1; min-width:0; }
.board-card-badges { display:flex; gap:4px; flex-wrap:wrap; }
.board-card-actions { display:flex; gap:6px; justify-content:flex-end; }
.board-card-actions .btn-icon { padding:4px 8px; }
.board .empty { flex:1; }
.g-group { background:rgba(192,68,204,.12); color:#C044CC; }

.dup-banner { display:block; width:100%; margin-bottom:16px; padding:10px 14px; text-align:left; cursor:pointer; font-weight:600; font-size:.875rem; color:var(--warn); border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.08); }
.dup-banner[hidden] { display:none; }
.dup-card { max-width:760px; }
.dup-list { display:flex; flex-direction:column; gap:12px; }
.dup-pair { border:1px solid var(--border); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:8px; background:var(--bg); }
.dup-score { font-size:.75rem; font-weight:700; color:var(--warn); }
.dup-ideas { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.dup-idea { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:8px 10px; min-width:0; }
.dup-idea-title { font-weight:700; font-size:.875rem; }
.dup-actions { display:flex; gap:6px; flex-wrap:wrap; }
.dup-actions .btn { font-size:.8125rem; padding:6px 10px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dup-actions .btn:disabled { opacity:.5; cursor:wait; }
@media (max-width:600px) { .dup-ideas { grid-template-columns:1fr; } }

.drag-handle { cursor:grab; touch-action:none; user-select:none; color:var(--text-3); font-size:1.125rem; line-height:1; padding:4px 2px; margin:2px -6px 0 -4px; }
.drag-handle:hover { color:var(--accent); }
.idea.dragging { opacity:.5; border-color:var(--accent); border-style:dashed; }
.sug-card { max-width:600px; }
.sug-step { display:flex; flex-direction:column; gap:12px; }
.sug-step[hidden] { display:none; }
.sug-loading { align-items:center; text-align:center; padding:24px 0; }
.sug-spinner { font-size:2rem; animation:rephrase-spin 1.4s linear infinite; }
.sug-progress { font-size:.8125rem; font-weight:600; color:var(--accent); }
.fab-mic { display:none; position:fixed; right:18px; bottom:18px; width:60px; height:60px; border-radius:50%; font-size:1.5rem; background:var(--accent); color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.25); z-index:6; }
.voice-live { position:fixed; left:16px; right:92px; bottom:22px; padding:12px 14px; border-radius:12px; background:var(--surface); border:1px solid var(--border); box-shadow:0 8px 24px rgba(0,0,0,.18); font-size:.9375rem; z-index:6; }
.voice-live[hidden] { display:none; }
@media (pointer:coarse), (max-width:600px) {
    .fab-mic:not([hidden]) { display:flex; align-items:center; justify-content:center; }
    .batch-bar:not([hidden]) ~ .fab-mic { display:none; }
    .toolbar select { flex:1; }
}
