:root { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #15232e; background: #f3f5f4; --ink: #15232e; --muted: #6b7880; --line: #dce4e1; --paper: #fff; --teal: #0f7770; --teal-dark: #075c58; --mint: #dff1e9; --amber: #e3a332; --radius: 10px; }
* { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: #f3f5f4; } button, input, textarea, select { font: inherit; } button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 235px 1fr; } .sidebar { position: sticky; top: 0; height: 100vh; padding: 25px 16px 18px; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: #f8faf9; } .brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 35px; } .brand-mark { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; background: var(--teal); color: #fff; font-weight: 800; } .brand strong, .brand small { display: block; } .brand strong { font-size: 15px; letter-spacing: .1px; } .brand small { margin-top: 3px; color: var(--muted); font-size: 11px; }
#nav { display: grid; gap: 4px; } .nav-item { border: 0; border-radius: 7px; padding: 10px 12px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 4px; color: #607079; background: transparent; text-align: left; font-size: 13px; } .nav-item:hover { background: #eaf2ef; color: var(--ink); } .nav-item.active { color: var(--teal-dark); background: var(--mint); font-weight: 650; } .nav-item b { min-width: 21px; padding: 2px 5px; border-radius: 12px; background: #fff; color: var(--teal); font-size: 11px; text-align: center; } .sidebar-foot { margin-top: auto; padding: 10px; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; border-top: 1px solid var(--line); } .pulse, .live-dot { color: var(--teal); } .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px #d6eee6; }
.main { min-width: 0; } .topbar { min-height: 91px; padding: 22px 38px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); background: #f8faf9e8; } .eyebrow, .section-label { margin: 0; color: var(--teal); font-size: 10px; font-weight: 800; letter-spacing: 1.5px; } .topbar h1 { margin: 6px 0 0; font-size: 22px; letter-spacing: -.3px; } .top-actions { display: flex; gap: 8px; } .primary, .ghost, .text-button, .icon-button { border-radius: 6px; border: 1px solid transparent; padding: 9px 13px; font-size: 12px; } .primary { background: var(--teal); color: #fff; } .primary:hover { background: var(--teal-dark); } .ghost { border-color: var(--line); color: #42605d; background: #fff; } .text-button { padding: 0; color: var(--teal); background: transparent; } .icon-button { width: 38px; padding: 0; background: var(--teal); color: #fff; font-size: 20px; }
.content { max-width: 1440px; padding: 28px 38px 60px; } .hero-grid, .dashboard-grid, .split-view, .todo-layout, .idea-layout, .memory-layout, .source-layout { display: grid; gap: 17px; } .hero-grid { grid-template-columns: 1.35fr .65fr; } .dashboard-grid { grid-template-columns: 1fr 1fr; margin-top: 17px; } .hero-card { min-height: 310px; position: relative; overflow: hidden; display: flex; justify-content: space-between; padding: 30px 34px; border-radius: var(--radius); background: #0c5955; color: #fff; } .hero-copy { max-width: 560px; position: relative; z-index: 1; } .hero-card .section-label { color: #a5ddd1; } .hero-card h2 { margin: 14px 0 12px; font-size: 31px; line-height: 1.18; letter-spacing: -.8px; } .hero-card em { color: #a9e4d1; font-style: normal; } .hero-card p { max-width: 540px; color: #d7eee8; line-height: 1.65; font-size: 13px; } .hero-actions { display: flex; gap: 8px; margin-top: 22px; } .hero-card .ghost { border-color: #6eb9ab; color: #e1f3ee; background: transparent; } .hero-orbit { width: 210px; min-width: 180px; position: relative; display: grid; place-items: center; opacity: .94; } .orbit-core { width: 88px; height: 88px; z-index: 1; display: grid; place-items: center; align-content: center; border: 1px solid #9cd9ca; border-radius: 50%; color: #d9f5ec; font-size: 18px; font-weight: 800; text-align: center; } .orbit-core small { font-size: 10px; font-weight: 500; } .orbit-node { position: absolute; padding: 5px 8px; border: 1px solid #71bbaa; border-radius: 20px; color: #d8f2e8; font-size: 10px; background: #0c5955; } .n1 { top: 14px; left: 60px; }.n2 { right: 1px; top: 88px; }.n3 { bottom: 30px; right: 35px; }.n4 { bottom: 13px; left: 35px; }
.panel, .stats-card, .detail-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); } .panel, .stats-card { padding: 21px; } .panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; } .panel-head h2, .view-head h2 { margin: 5px 0 0; font-size: 18px; letter-spacing: -.2px; } .panel-head p, .view-head p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; } .stats-card { display: grid; align-content: start; } .stats-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 20px; } .stat { padding: 10px 8px; border-bottom: 1px solid #edf1ef; } .stat span, .stat small { display: block; color: var(--muted); font-size: 11px; }.stat strong { display: block; margin: 4px 0; font-size: 25px; letter-spacing: -.5px; } .signal-note { margin-top: 18px; padding: 12px; border-radius: 7px; background: #f4f8f6; }.signal-note strong { font-size: 12px; }.signal-note p { margin: 6px 0 0; color: #5f6e6e; font-size: 11px; line-height: 1.55; }
.project-list, .todo-list, .source-list { display: grid; gap: 9px; margin-top: 17px; }.project-card { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }.project-card:hover { border-color: #9acdc0; box-shadow: 0 5px 18px #165a4f0d; }.card-kicker, .card-meta, .todo-row small, .source-row small, .memory-card span, .note-card span, .knowledge > span { color: var(--muted); font-size: 10px; }.project-card h3 { margin: 8px 0 7px; font-size: 14px; }.project-card p { margin: 0; color: #5b686d; font-size: 12px; line-height: 1.5; }.card-meta { display: flex; justify-content: space-between; margin-top: 15px; }.todo-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid #edf1ef; }.todo-row:last-child { border-bottom: 0; }.check { width: 19px; height: 19px; flex: 0 0 auto; border: 1px solid #a8b9b4; border-radius: 5px; background: #fff; color: var(--teal); font-size: 13px; }.check.done { border-color: var(--teal); background: var(--mint); }.todo-row strong, .todo-row small { display: block; }.todo-row strong { font-size: 12px; }.todo-row small { margin-top: 3px; line-height: 1.4; }.strike { color: #87918f; text-decoration: line-through; }.quick-form { display: flex; gap: 7px; margin-top: 13px; }.quick-form input, .stack-form input, .stack-form textarea, .stack-form select, .chat-form textarea, .chat-foot select, .panel select { min-width: 0; border: 1px solid #c8d5d1; border-radius: 6px; padding: 9px 10px; outline: none; background: #fff; color: var(--ink); font-size: 12px; }.quick-form input { flex: 1; }.quick-form input:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px #dff1e988; }.empty { padding: 18px 5px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.view-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 18px; }.view-head h2 { font-size: 24px; }.view-head.compact { display: block; }.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.detail-panel { margin-top: 18px; padding: 22px; }.module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }.module-card { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfb; }.module-index { color: #a2b4ae; font-size: 11px; font-weight: 800; }.module-card h3 { margin: 7px 0 12px; font-size: 14px; }.module-card p { margin: 12px 0 0; color: #5e6b6e; font-size: 12px; line-height: 1.55; }.module-card p strong { display: inline-block; margin-right: 5px; color: var(--teal-dark); }.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }.flow span { padding: 4px 6px; border-radius: 4px; color: #35625c; background: #eaf4ef; font-size: 10px; }.flow b { color: #a5b8b2; font-size: 10px; }
.resume-lanes { display: grid; gap: 12px; max-width: 920px; }.resume-lane { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }.lane-no { color: #9ab4ac; font-size: 18px; font-weight: 800; }.lane-tag { color: var(--teal); font-size: 10px; font-weight: 800; letter-spacing: 1px; }.resume-lane h3 { margin: 6px 0; font-size: 16px; }.resume-lane p { margin: 0; color: #5e6b6e; font-size: 12px; line-height: 1.6; }.proof { margin-top: 12px; padding: 9px 11px; border-left: 3px solid var(--teal); color: #49615c; background: #f1f8f4; font-size: 11px; line-height: 1.5; }.proof b { margin-right: 6px; color: var(--teal-dark); }.talking-panel { max-width: 920px; margin-top: 18px; }.talking-panel h2 { margin: 6px 0 17px; font-size: 18px; }.talking-points { display: grid; gap: 12px; }.talking-points div { display: grid; grid-template-columns: 24px 1fr; gap: 9px; align-items: center; color: #53666a; font-size: 12px; }.talking-points b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--teal); background: var(--mint); font-size: 11px; }
.split-view { grid-template-columns: minmax(0, 1fr) 290px; }.chat-panel { overflow: hidden; border: 1px solid #b6d6cc; border-radius: var(--radius); background: #fff; }.chat-panel .panel-head { padding: 18px 20px; border-bottom: 1px solid var(--line); background: #f3faf7; }.chat-panel .panel-head h2 { font-size: 17px; }.chat-panel select { max-width: 130px; }.chat-messages { min-height: 320px; max-height: 480px; overflow: auto; display: grid; align-content: start; gap: 10px; padding: 18px 20px; background: #fbfdfc; }.chat-bubble { max-width: 82%; padding: 10px 12px; border-radius: 7px; white-space: pre-wrap; line-height: 1.6; font-size: 12px; }.chat-bubble.assistant { justify-self: start; background: #eaf3ef; }.chat-bubble.user { justify-self: end; color: #fff; background: var(--teal); }.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px 15px; border-top: 1px solid var(--line); }.chat-form textarea { resize: vertical; }.chat-form .primary { align-self: end; height: 39px; }.chat-foot { display: flex; justify-content: space-between; align-items: center; padding: 0 15px 12px; color: var(--muted); font-size: 10px; }.chat-foot select { padding: 5px; font-size: 10px; }.prep-rail { display: grid; align-content: start; gap: 14px; }.answer-steps { display: grid; gap: 13px; margin: 18px 0 3px; padding: 0; list-style: none; }.answer-steps li { display: grid; grid-template-columns: 48px 1fr; gap: 9px; align-items: center; font-size: 11px; }.answer-steps b { padding: 5px 6px; border-radius: 5px; color: var(--teal-dark); background: var(--mint); text-align: center; }.answer-steps span { color: var(--muted); }.match-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #edf1ef; color: var(--muted); font-size: 11px; }.match-row b { color: var(--teal); }.question-bank { margin-top: 14px; }.prompt-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }.prompt-chips button { padding: 7px 9px; border: 1px solid #c8dbd4; border-radius: 18px; color: #3d6861; background: #f5faf8; font-size: 11px; }
.todo-layout { grid-template-columns: minmax(0, 1fr) 280px; }.stack-form { display: grid; gap: 10px; }.stack-form textarea { resize: vertical; }.stack-form > div { display: flex; justify-content: space-between; gap: 8px; }.stack-form input { width: 100%; }.stack-form select { max-width: 200px; }.large { max-height: 600px; overflow: auto; margin-top: 20px; }.priority-list { display: grid; gap: 14px; margin-top: 18px; }.priority-list div { display: grid; grid-template-columns: 29px 1fr; gap: 8px; font-size: 12px; line-height: 1.45; }.priority-list b { color: var(--teal); }.muted { color: var(--muted); font-size: 12px; line-height: 1.6; }.idea-layout, .memory-layout { grid-template-columns: 340px minmax(0, 1fr); }.idea-list, .memory-list { display: grid; gap: 11px; align-content: start; }.note-card, .memory-card, .knowledge { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }.note-card h3, .memory-card h3, .knowledge h3 { margin: 7px 0; font-size: 14px; }.note-card p, .memory-card p, .knowledge p { margin: 0; color: #5e6b6e; font-size: 12px; line-height: 1.6; }.memory-card { display: grid; grid-template-columns: 28px 1fr; gap: 10px; }.memory-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: var(--teal); background: var(--mint); font-weight: 800; }.source-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }.source-list { margin-top: 18px; }.source-row { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid #edf1ef; }.source-dot { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--amber); }.source-row strong, .source-row small { display: block; }.source-row strong { font-size: 12px; }.source-row small { margin-top: 3px; line-height: 1.45; }.knowledge { margin-top: 10px; }.knowledge a { display: inline-block; margin-top: 10px; color: var(--teal); font-size: 11px; text-decoration: none; }.toast { position: fixed; right: 25px; bottom: 22px; transform: translateY(15px); opacity: 0; padding: 10px 14px; border-radius: 6px; color: #fff; background: #183f3d; font-size: 12px; transition: .2s; pointer-events: none; }.toast.show { transform: translateY(0); opacity: 1; }
@media (max-width: 980px) { .app-shell { grid-template-columns: 72px 1fr; }.sidebar { padding: 20px 10px; }.brand { justify-content: center; padding: 0 0 28px; }.brand > div, .nav-item span, .sidebar-foot span:not(.pulse) { display: none; }.nav-item { grid-template-columns: 1fr; justify-items: center; padding: 11px 5px; font-size: 17px; }.nav-item b { position: absolute; margin: -25px 0 0 25px; }.content { padding: 24px; }.hero-grid, .dashboard-grid, .split-view, .todo-layout, .idea-layout, .memory-layout, .source-layout { grid-template-columns: 1fr; }.prep-rail { grid-template-columns: 1fr 1fr; }.hero-orbit { display: none; } }
@media (max-width: 620px) { .topbar { padding: 18px; align-items: end; }.topbar h1 { font-size: 18px; }.top-actions .ghost { display: none; }.content { padding: 18px; }.hero-card { padding: 24px; }.hero-card h2 { font-size: 26px; }.project-grid, .module-grid, .prep-rail { grid-template-columns: 1fr; }.view-head { align-items: start; gap: 10px; flex-direction: column; }.chat-form { grid-template-columns: 1fr; }.chat-form .primary { justify-self: end; }.stack-form > div { align-items: stretch; flex-direction: column; }.stack-form select { max-width: none; } }
.review-key { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-top: 16px; padding: 10px 12px; border-left: 3px solid var(--teal); color: var(--muted); background: #f1f8f4; font-size: 11px; line-height: 1.5; }.review-key b { color: var(--teal-dark); font-weight: 600; }.module-detail { margin-top: 11px; padding-top: 10px; border-top: 1px solid #e8efec; }.module-detail span { display: block; color: var(--teal-dark); font-size: 10px; font-weight: 800; letter-spacing: .3px; }.module-detail p { margin: 4px 0 0; color: #5e6b6e; font-size: 11px; line-height: 1.55; }.module-detail.code p { color: #44655f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; overflow-wrap: anywhere; }.module-detail.questions ul { display: grid; gap: 5px; margin: 5px 0 0; padding-left: 17px; color: #5e6b6e; font-size: 11px; line-height: 1.5; }.module-detail.questions li::marker { color: var(--teal); }.module-card > .module-ask { display: inline-block; margin-top: 14px; }
.chat-head { align-items: center; }.chat-brand { display: flex; align-items: center; gap: 10px; }.agent-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--teal); box-shadow: 0 5px 12px #0f777033; font-size: 16px; }.chat-status { display: flex; align-items: center; gap: 5px; margin-top: 5px; color: var(--muted); font-size: 10px; }.chat-status i { width: 6px; height: 6px; border-radius: 50%; background: #25a574; box-shadow: 0 0 0 3px #d9f3e8; }.chat-actions { display: flex; align-items: center; gap: 7px; }.chat-actions select { max-width: 115px; }.chat-reset { width: 31px; height: 31px; padding: 0; color: var(--teal-dark); background: #e6f3ee; font-size: 17px; }.chat-context { display: flex; align-items: center; gap: 8px; padding: 9px 15px; border-bottom: 1px solid var(--line); color: var(--muted); background: #fbfdfc; font-size: 10px; }.chat-context select { min-width: 0; flex: 1; padding: 5px 7px; border: 1px solid #c8d5d1; border-radius: 5px; color: var(--ink); background: #fff; font-size: 10px; }.context-lock { white-space: nowrap; color: #7b928b; }.bubble-meta { margin-bottom: 5px; color: #6e8981; font-size: 10px; font-weight: 700; }.chat-starters { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 15px 11px; background: #fbfdfc; }.chat-starters button { padding: 6px 8px; border: 1px solid #cfe1da; border-radius: 5px; color: #3d6861; background: #f1f8f4; font-size: 10px; }.chat-starters button:hover { border-color: #8ebdaf; background: #e5f3ed; }.thinking-line { display: flex; align-items: center; gap: 7px; }.thinking-spinner { width: 12px; height: 12px; border: 2px solid #b9d8ce; border-top-color: var(--teal); border-radius: 50%; animation: spin .8s linear infinite; }.thinking-detail { margin-top: 6px; color: #6b8980; font-size: 10px; }.error-bubble { color: #8c4e41; background: #fff4f0 !important; }.send-button:disabled { cursor: wait; opacity: .65; }.chat-foot b { padding: 3px 6px; border-radius: 4px; color: #2e7d62; background: #e3f3eb; font-size: 9px; letter-spacing: .5px; }@keyframes spin { to { transform: rotate(360deg); } }
.chat-submit-actions { display: flex; align-items: end; gap: 7px; }.voice-button { height: 39px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border: 1px solid #c8d5d1; border-radius: 6px; color: #3d6861; background: #f4faf7; font-size: 11px; }.voice-button:hover { border-color: #8ebdaf; background: #e6f3ee; }.voice-button.recording { border-color: #d06a5b; color: #a04337; background: #fff1ed; animation: voice-pulse 1.2s ease-in-out infinite; }.voice-button:disabled { cursor: not-allowed; opacity: .55; }.voice-status { min-height: 18px; padding: 0 15px 5px; color: #6b8980; font-size: 10px; }.voice-status:empty { display: none; }@keyframes voice-pulse { 50% { box-shadow: 0 0 0 4px #f4c8bf66; } }
.module-detail.explain { padding: 11px 12px; border-top: 0; border-left: 3px solid #80b9a7; background: #f2f8f5; }.module-detail.explain p { color: #385b55; }
@media (max-width: 620px) { .chat-head { align-items: flex-start; }.chat-actions { width: 100%; justify-content: flex-end; }.chat-context { flex-wrap: wrap; }.chat-context select { flex-basis: 100%; order: 3; }.context-lock { margin-left: auto; } }
/* Keep native option lists for accessibility, but give every closed select one deliberate visual treatment. */
select { appearance: none; -webkit-appearance: none; min-height: 36px; padding: 8px 34px 8px 11px !important; border: 1px solid #c7d8d1 !important; border-radius: 7px !important; color: #24423e !important; background-color: #fff !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23617c74' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 11px center !important; background-size: 12px 8px !important; box-shadow: 0 1px 2px #163f3310; transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease; }
select:hover { border-color: #8fb9aa !important; background-color: #fbfefd !important; }
select:focus, select:focus-visible { border-color: var(--teal) !important; outline: none; box-shadow: 0 0 0 3px #dff1e988, 0 1px 2px #163f3310; }
select:disabled { cursor: not-allowed; opacity: .6; background-color: #eef3f1 !important; }
select option { color: #203b37; background: #fff; }
.chat-actions select { min-width: 116px; min-height: 32px; padding: 6px 30px 6px 10px !important; border-color: #b9d5ca !important; background-color: #fff !important; font-size: 11px; }
.chat-context select { min-height: 32px; padding: 6px 32px 6px 10px !important; }
.chat-foot select { min-height: 28px; padding: 4px 28px 4px 8px !important; }
.stack-form select { min-width: 190px; }
.quick-form select, .panel select { min-width: 150px; }
@media (max-width: 620px) { .stack-form select, .quick-form select, .panel select { width: 100%; min-width: 0; } .chat-actions select { min-width: 0; } }
.tool-bar { display: flex; align-items: center; gap: 6px; padding: 8px 15px; border-top: 1px solid var(--line); background: #f7fbf9; color: var(--muted); font-size: 10px; }.tool-bar button { padding: 5px 8px; border: 1px solid #cfe1da; border-radius: 5px; color: #3d6861; background: #fff; font-size: 10px; }.tool-bar button:hover { border-color: var(--teal); background: var(--mint); }.chat-bubble pre { margin: 6px 0 0; white-space: pre-wrap; font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }