/* ============================ QorkOS ============================ */
.os-viewport.scroll { overflow-x: auto; overflow-y: hidden; }
.qos {
  --qa: #ff5b35; --qt: #ece7df; --qm: #9a948a; --qd: #6b665e; --ql: rgba(255,240,220,.09);
  position: absolute; left: 0; top: 0; width: 1400px; height: 860px; transform-origin: 0 0;
  font: 13px/1.4 var(--sans); color: var(--qt); cursor: default; user-select: none; overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.qos * { box-sizing: border-box; }
.qos button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.qos svg { width: 14px; height: 14px; flex: none; }
.qos input, .qos textarea { cursor: text; user-select: text; }

/* menubar */
.q-menubar { position: absolute; inset: 0 0 auto; height: 30px; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; background: rgba(18,15,12,.55); backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--ql); font-size: 12.5px; }
.q-mb-l, .q-mb-r { display: flex; align-items: center; gap: 2px; height: 100%; }
.q-mb-l button, .q-mb-r button { height: 22px; padding: 0 9px; border-radius: 5px; display: flex; align-items: center; gap: 6px; }
.q-mb-l button:hover, .q-mb-l button.open, .q-mb-r button:hover { background: rgba(255,255,255,.1); }
.q-mb-logo img { width: 17px; height: 17px; display: block; }
.q-mb-app { font-weight: 700; }
.q-mb-r { gap: 6px; color: #d9d2c7; }
.q-mb-agents i { width: 7px; height: 7px; border-radius: 50%; background: var(--qd); }
.q-mb-agents.on i { background: var(--qa); box-shadow: 0 0 0 0 var(--qa); animation: qpulse 1.6s infinite; }
.q-mb-k span { font-size: 11px; color: var(--qm); }
.q-mb-i { display: flex; padding: 0 3px; } .q-mb-i svg { width: 16px; height: 16px; }
.q-mb-clock { padding-left: 4px; font-variant-numeric: tabular-nums; white-space: pre; }
.q-menu { position: absolute; z-index: 60; min-width: 220px; padding: 5px; border-radius: 10px; background: rgba(34,30,26,.9); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 20px 50px -10px rgba(0,0,0,.7); animation: qpop .14s ease-out; }
.q-menu button { width: 100%; display: flex; justify-content: space-between; gap: 20px; padding: 5px 10px; border-radius: 6px; text-align: left; font-size: 12.5px; }
.q-menu button:hover { background: var(--qa); color: #fff; }
.q-menu kbd { font: inherit; color: var(--qm); } .q-menu button:hover kbd { color: rgba(255,255,255,.8); }
.q-menu hr { border: 0; border-top: 1px solid var(--ql); margin: 4px 6px; }

/* desk + windows */
.q-desk { position: absolute; inset: 0; z-index: 1; }
.q-snap { position: absolute; border-radius: 12px; border: 1.5px solid var(--qa); background: color-mix(in srgb, var(--qa) 16%, transparent); opacity: 0; transition: all .22s cubic-bezier(.22,1,.36,1); pointer-events: none; z-index: 9999; }
.q-snap.show { opacity: 1; }
.qw { position: absolute; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: rgba(23,20,17,.88); backdrop-filter: blur(26px) saturate(1.3); border: 1px solid rgba(255,240,220,.1); box-shadow: 0 24px 60px -24px rgba(0,0,0,.7), 0 0 0 .5px rgba(0,0,0,.7); transition: box-shadow .25s, border-color .25s; }
.qw.focused { border-color: rgba(255,240,220,.16); box-shadow: 0 40px 100px -24px rgba(0,0,0,.85), 0 0 0 .5px rgba(0,0,0,.8); }
.qw.max { border-radius: 10px; }
.qw-anim { transition: left .36s cubic-bezier(.22,1,.36,1), top .36s cubic-bezier(.22,1,.36,1), width .36s cubic-bezier(.22,1,.36,1), height .36s cubic-bezier(.22,1,.36,1), box-shadow .25s; }
.qw-bar { flex: none; height: 34px; display: flex; align-items: center; padding: 0 12px; position: relative; border-bottom: 1px solid var(--ql); cursor: grab; background: rgba(255,255,255,.02); }
.qw.dragging, .qw.dragging .qw-bar { cursor: grabbing; }
.qw-lights { display: flex; gap: 8px; position: relative; z-index: 2; }
.qw-lights button { width: 12px; height: 12px; border-radius: 50%; background: #4a4540; position: relative; transition: background .2s; }
.qw.focused .l-close, .qw-lights:hover .l-close { background: #ff5f57; }
.qw.focused .l-min, .qw-lights:hover .l-min { background: #febc2e; }
.qw.focused .l-max, .qw-lights:hover .l-max { background: #28c840; }
.qw-lights button::after { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; line-height: 1; font-weight: 700; color: rgba(0,0,0,.6); opacity: 0; }
.qw-lights:hover button::after { opacity: 1; }
.l-close::after { content: '×'; } .l-min::after { content: '–'; } .l-max::after { content: '+'; }
.qw-title { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12.5px; font-weight: 500; color: var(--qm); pointer-events: none; }
.qw.focused .qw-title { color: #cfc8bd; }
.qw-body { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.qw-resize { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; z-index: 5; }

/* dock */
.q-dock { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 40; }
.q-dock-inner { display: flex; align-items: flex-end; gap: 6px; padding: 7px 10px; height: 66px; border-radius: 20px; background: rgba(32,28,24,.5); backdrop-filter: blur(22px) saturate(1.4); border: 1px solid rgba(255,240,220,.12); box-shadow: 0 20px 50px -15px rgba(0,0,0,.6); }
.q-di { --s: 1; position: relative; width: calc(50px * var(--s)); height: 50px; display: flex; justify-content: center; align-items: flex-end; transition: width .14s ease-out; }
.q-di .ai { transform: translateY(calc((var(--s) - 1) * -16px)) scale(var(--s)); transform-origin: 50% 100%; transition: transform .14s ease-out; }
.q-run { position: absolute; bottom: -5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #efe9e0; opacity: 0; transition: opacity .3s; }
.q-di.run .q-run { opacity: .9; }
.q-tip { position: absolute; bottom: calc(62px + (var(--s) - 1) * 66px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 9px; border-radius: 6px; font-size: 12px; background: rgba(34,30,26,.92); border: 1px solid var(--ql); opacity: 0; pointer-events: none; transition: opacity .15s; }
.q-di:hover .q-tip { opacity: 1; }
.q-di.bounce .ai { animation: qbounce .9s cubic-bezier(.3,0,.3,1); }
.q-dsep { width: 1px; height: 40px; align-self: center; background: rgba(255,240,220,.14); margin: 0 3px; }
.ai { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px -6px rgba(0,0,0,.6); color: #fff; }
.ai svg { width: 26px; height: 26px; }
.ai-ide { background: linear-gradient(180deg, #fff, #ebe6df); } .ai-ide img { width: 78%; height: 78%; }
.ai-term { background: linear-gradient(180deg, #2c2824, #12100e); border: 1px solid rgba(255,255,255,.12); } .ai-term b { font: 700 16px var(--mono); color: #5fd38d; }
.ai-br { background: linear-gradient(180deg, #5b9bff, #1d4fd8); }
.ai-ag { background: linear-gradient(160deg, var(--qa), #ffb36b); }
.ai-set { background: linear-gradient(180deg, #97928b, #4c4844); }
.ai-trash { background: rgba(255,255,255,.14); }

/* toasts */
.q-toasts { position: absolute; top: 40px; right: 12px; z-index: 70; width: 320px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.q-toast { pointer-events: auto; display: flex; gap: 11px; align-items: flex-start; padding: 11px 12px; border-radius: 14px; background: rgba(38,33,29,.88); backdrop-filter: blur(24px) saturate(1.4); border: 1px solid rgba(255,240,220,.12); box-shadow: 0 20px 40px -12px rgba(0,0,0,.6); animation: qtoast .5s cubic-bezier(.22,1,.36,1); cursor: pointer; }
.q-toast.out { animation: qtoastout .3s ease-in forwards; }
.q-toast .ai { width: 34px; height: 34px; border-radius: 9px; } .q-toast .ai svg { width: 18px; height: 18px; } .q-toast .ai-term b { font-size: 11px; }
.q-toast-t { min-width: 0; } .q-toast b { font-size: 12.5px; } .q-toast p { margin: 2px 0 0; font-size: 12px; color: var(--qm); line-height: 1.4; }
.q-toast-t button { margin-top: 7px; font-size: 11.5px; padding: 3px 10px; border-radius: 6px; background: var(--qa); color: #fff; font-weight: 600; }

/* palette */
.q-pal { position: absolute; inset: 0; z-index: 80; display: flex; justify-content: center; padding-top: 120px; background: rgba(0,0,0,.28); }
.q-pal[hidden] { display: none; }
.q-pal-box { width: 580px; align-self: flex-start; border-radius: 14px; overflow: hidden; background: rgba(32,28,24,.94); backdrop-filter: blur(30px); border: 1px solid rgba(255,240,220,.14); box-shadow: 0 40px 100px -20px rgba(0,0,0,.8); animation: qpop .18s cubic-bezier(.22,1,.36,1); }
.q-pal-in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--ql); color: var(--qm); }
.q-pal-in svg { width: 17px; height: 17px; }
.q-pal-in input { flex: 1; background: none; border: 0; outline: 0; color: var(--qt); font: 15px var(--sans); }
.q-pal-list { max-height: 330px; overflow: auto; padding: 6px; }
.q-pi { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.q-pi .ai { width: 24px; height: 24px; border-radius: 6px; } .q-pi .ai svg { width: 14px; height: 14px; } .q-pi .ai-term b { font-size: 8px; }
.q-pi > span:not(.ai) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-pi small { color: var(--qd); font-size: 11px; }
.q-pi.on { background: var(--qa); color: #fff; } .q-pi.on small { color: rgba(255,255,255,.75); }
.q-pal-f { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--ql); font-size: 11px; color: var(--qd); }

/* IDE */
.ide { display: grid; grid-template-columns: 42px 170px minmax(0,1fr) 300px; height: 100%; }
.ide-act { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border-right: 1px solid var(--ql); background: rgba(0,0,0,.18); }
.ide-act button { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; color: var(--qd); position: relative; }
.ide-act button svg { width: 17px; height: 17px; }
.ide-act button:hover { color: var(--qt); } .ide-act button.on { color: var(--qt); background: rgba(255,255,255,.08); }
.ide-act .sp { flex: 1; }
.ide-badge { position: absolute; top: 1px; right: 0; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--qa); color: #fff; font: 700 9px/14px var(--sans); font-style: normal; }
.ide-side { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--ql); background: rgba(0,0,0,.1); }
.ide-side-h { padding: 10px 12px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; color: var(--qd); }
.ide-side-b { flex: 1; overflow: auto; font-size: 12.5px; padding-bottom: 10px; }
.tr-row { display: flex; align-items: center; gap: 6px; height: 23px; padding: 0 8px 0 calc(10px + var(--d) * 12px); cursor: pointer; white-space: nowrap; color: #cfc8bd; }
.tr-row span { overflow: hidden; text-overflow: ellipsis; }
.tr-row:hover { background: rgba(255,255,255,.05); } .tr-row.on { background: rgba(255,255,255,.09); color: #fff; }
.tr-row small { color: var(--qd); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; }
.tr-row em { margin-left: auto; font: 600 10px var(--mono); font-style: normal; }
.tr-dir.dirty > span { color: #e2b55a; } .ch-M span { color: #e2b55a; } .ch-A span { color: #5fd38d; }
.st-M { color: #e2b55a; } .st-A { color: #5fd38d; }
.chev { font-style: normal; width: 10px; color: var(--qd); transition: transform .15s; display: inline-block; }
.tr-dir.open .chev { transform: rotate(90deg); }
.fi { font: 700 9px var(--mono); font-style: normal; width: 16px; text-align: center; flex: none; }
.fi-tsx { color: #5ac8fa; font-size: 12px; } .fi-ts { color: #4c8dff; } .fi-json { color: #e2c35a; } .fi-md { color: #9a948a; } .fi-css { color: #c792ea; font-size: 12px; }
.side-empty { padding: 14px 12px; color: var(--qd); font-size: 12px; line-height: 1.5; }
.git-box { padding: 4px 10px 10px; } .git-msg { padding: 7px 9px; border-radius: 7px; background: rgba(0,0,0,.25); border: 1px solid var(--ql); font-size: 11.5px; color: #cfc8bd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.git-commit { margin-top: 7px; width: 100%; height: 28px; border-radius: 7px; background: var(--qa) !important; color: #fff; font-weight: 600; font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.git-h { padding: 8px 12px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: var(--qd); text-transform: uppercase; }
.git-c { display: flex; gap: 8px; padding: 4px 12px; font-size: 11.5px; color: #cfc8bd; white-space: nowrap; overflow: hidden; } .git-c code { color: #f8c555; font-size: 10.5px; } .git-c span { overflow: hidden; text-overflow: ellipsis; }
.srch-w { padding: 0 10px 8px; } .srch { width: 100%; height: 26px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--ql); background: rgba(0,0,0,.3); color: var(--qt); outline: 0; font: 12px var(--sans); } .srch:focus { border-color: var(--qa); }
.srch-hit { padding: 4px 12px; cursor: pointer; font-size: 11.5px; } .srch-hit:hover { background: rgba(255,255,255,.05); }
.srch-hit small { display: block; color: var(--qd); font-size: 10.5px; } .srch-hit span { font-family: var(--mono); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; color: #cfc8bd; }
.srch-hit mark { background: color-mix(in srgb, var(--qa) 40%, transparent); color: #fff; border-radius: 2px; }
.ide-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ide-tabs { display: flex; height: 34px; flex: none; background: rgba(0,0,0,.2); border-bottom: 1px solid var(--ql); overflow: hidden; }
.ide-tab { display: flex; align-items: center; gap: 6px; padding: 0 10px 0 12px; font-size: 12px; color: var(--qd); border-right: 1px solid var(--ql); cursor: pointer; white-space: nowrap; flex: none; }
.ide-tab:hover { color: var(--qm); }
.ide-tab.on { color: var(--qt); background: rgba(255,255,255,.04); box-shadow: inset 0 1.5px 0 var(--qa); }
.ide-tab .dot { width: 6px; height: 6px; border-radius: 50%; background: #e2b55a; }
.ide-tab .x { width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; font-weight: 400; opacity: 0; font-size: 13px; }
.ide-tab:hover .x, .ide-tab.on .x { opacity: .6; } .ide-tab .x:hover { background: rgba(255,255,255,.1); opacity: 1; }
.ide-crumbs { flex: none; padding: 5px 16px; font-size: 11.5px; color: var(--qd); } .ide-crumbs i { font-style: normal; opacity: .6; margin: 0 2px; }
.ide-code { flex: 1; min-height: 0; overflow: auto; position: relative; padding: 4px 0 60px; font: 12px/19px var(--mono); outline: 0; cursor: text; }
.ln { display: flex; white-space: pre; min-width: max-content; padding-right: 20px; transition: background-color .5s; }
.gut { width: 44px; padding-right: 16px; text-align: right; color: #4a453f; flex: none; user-select: none; }
.ln.cur { background: rgba(255,255,255,.035); } .ln.cur .gut { color: #a39c92; }
.ln.add { background: rgba(95,211,141,.13); box-shadow: inset 2px 0 #5fd38d; } .ln.add .gut { color: #5fd38d; }
.ln.del { background: rgba(255,107,107,.17); box-shadow: inset 2px 0 #ff6b6b; } .ln.del .code { text-decoration: line-through; opacity: .7; }
.ln.acc { background: color-mix(in srgb, var(--qa) 18%, transparent); }
.caret { display: inline-block; width: 2px; height: 15px; margin-right: -2px; vertical-align: -3px; background: var(--qa); opacity: .35; }
.ide-code.focus .caret { opacity: 1; animation: qblink 1.05s steps(1) infinite; }
.gh { color: rgba(239,235,228,.34); cursor: pointer; }
.gh-ln { cursor: pointer; }
.gh-badge { margin-left: 12px; padding: 0 6px; border-radius: 4px; font: 500 10px/16px var(--sans); color: #fff; background: var(--qa); box-shadow: 0 0 18px -2px var(--qa); vertical-align: 1px; animation: qfade .3s; cursor: pointer; }
.tk-k { color: #ff8f6b; } .tk-s { color: #a8d8a0; } .tk-n { color: #f8c555; } .tk-f { color: #82aaff; } .tk-t { color: #e6c07b; } .tk-tag { color: #ff9e80; } .tk-c { color: #6b665e; font-style: italic; } .tk-a { color: #c792ea; }
.ide-status { flex: none; height: 24px; display: flex; align-items: center; gap: 14px; padding: 0 12px; font-size: 11px; color: var(--qd); border-top: 1px solid var(--ql); background: rgba(0,0,0,.22); white-space: nowrap; }
.ide-status > span { display: flex; align-items: center; gap: 5px; } .ide-status svg { width: 12px; height: 12px; }
.ide-status .sp { flex: 1; }
.st-tab { color: var(--qa); font-weight: 600; } .st-tab.pop { animation: qpopx .5s cubic-bezier(.22,1,.36,1); }

/* agent panel */
.ide-agent { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--ql); background: rgba(0,0,0,.14); }
.ag-h { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 14px; height: 38px; border-bottom: 1px solid var(--ql); }
.ag-h b { font-size: 12.5px; }
.ag-model { font: 10.5px var(--mono); padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,.06); color: var(--qm); }
.ag-newchat { margin-left: auto; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--qm); } .ag-newchat:hover { background: rgba(255,255,255,.08); color: var(--qt); }
.ag-msgs { flex: 1; min-height: 0; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 9px; font-size: 12.5px; user-select: text; scroll-behavior: smooth; }
.m-hello { display: flex; gap: 10px; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--ql); }
.m-hello img { width: 30px; height: 30px; flex: none; } .m-hello b { font-size: 12.5px; } .m-hello p { margin: 3px 0 0; color: var(--qm); font-size: 12px; line-height: 1.45; }
.m-user { align-self: flex-end; max-width: 88%; padding: 8px 11px; border-radius: 12px 12px 4px 12px; background: rgba(255,255,255,.09); border: 1px solid var(--ql); animation: qfadeup .35s cubic-bezier(.22,1,.36,1); line-height: 1.45; }
.m-pk { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; font: 10.5px var(--mono); color: var(--qa); }
.m-agent { display: flex; flex-direction: column; gap: 6px; }
.m-think { font-size: 12px; color: var(--qm); display: flex; gap: 5px; animation: qfadeup .3s; }
.m-think .shim { background: linear-gradient(90deg, var(--qd) 0%, #fff 50%, var(--qd) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: qshim 1.3s linear infinite; }
.m-think.done .shim { animation: none; background: none; color: var(--qm); }
.m-think b { font-weight: 400; color: var(--qd); }
.m-tool { display: flex; align-items: center; gap: 7px; padding: 5px 9px; border-radius: 8px; font-size: 11.5px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); animation: qfadeup .3s cubic-bezier(.22,1,.36,1); min-width: 0; }
.m-tool .ti { display: flex; color: var(--qm); font-style: normal; } .m-tool .ti svg { width: 12px; height: 12px; }
.m-tool .v { color: var(--qm); flex: none; }
.m-tool code { font: 11px var(--mono); color: var(--qt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.m-tool em { margin-left: auto; font: 10.5px var(--mono); font-style: normal; color: var(--qd); white-space: nowrap; flex: none; }
.m-tool .spin { display: none; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.15); border-top-color: var(--qa); animation: qspin .7s linear infinite; flex: none; }
.m-tool.run .spin { display: block; margin-left: auto; } .m-tool.run em { display: none; }
.m-tool.run { border-color: color-mix(in srgb, var(--qa) 35%, transparent); }
.m-edit { cursor: pointer; } .m-edit:hover { border-color: var(--qa); }
.pa { color: #5fd38d; } .pd { color: #ff6b6b; }
.m-say { line-height: 1.55; color: #e2dcd2; animation: qfade .3s; }
.m-say b { color: #fff; font-weight: 600; }
.m-say code { font: 11px var(--mono); padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,.08); color: #ffd2c2; }
.m-changes { border-radius: 10px; border: 1px solid var(--ql); overflow: hidden; animation: qfadeup .35s cubic-bezier(.22,1,.36,1); }
.mc-h { padding: 8px 10px; font-size: 12px; font-weight: 600; background: rgba(255,255,255,.04); }
.mc-r { display: flex; align-items: center; gap: 6px; padding: 5px 10px; font: 11px var(--mono); border-top: 1px solid var(--ql); cursor: pointer; } .mc-r:hover { background: rgba(255,255,255,.04); }
.mc-r span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mc-r em { margin-left: auto; font-style: normal; white-space: nowrap; }
.mc-b { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--ql); }
.mc-b button { padding: 4px 11px; border-radius: 6px; font-size: 11.5px; background: rgba(255,255,255,.08); }
.mc-b .mc-keep { background: var(--qa); color: #fff; font-weight: 600; } .mc-b .kept { background: rgba(95,211,141,.18); color: #5fd38d; }
.ag-chips { flex: none; display: flex; flex-wrap: wrap; gap: 5px; padding: 0 10px 8px; }
.ag-chips button { font-size: 11px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--ql); background: rgba(255,255,255,.04); color: #cfc8bd; transition: border-color .2s, color .2s, transform .2s; }
.ag-chips button:hover { border-color: var(--qa); color: #fff; transform: translateY(-1px); }
.ag-box { flex: none; margin: 0 10px 10px; padding: 8px 10px 7px; border-radius: 12px; border: 1px solid rgba(255,240,220,.13); background: rgba(0,0,0,.28); transition: border-color .2s, box-shadow .2s; }
.ag-box:focus-within { border-color: var(--qa); box-shadow: 0 0 0 3px color-mix(in srgb, var(--qa) 18%, transparent); }
.ag-box textarea { width: 100%; resize: none; border: 0; outline: 0; background: none; color: var(--qt); font: 12.5px/1.45 var(--sans); }
.ag-box textarea::placeholder { color: var(--qd); }
.ag-picked { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 6px; padding: 2px 7px; border-radius: 5px; font: 10.5px var(--mono); color: var(--qa); background: color-mix(in srgb, var(--qa) 16%, transparent); cursor: pointer; }
.ag-picked[hidden] { display: none; } .ag-picked svg { width: 11px; height: 11px; }
.ag-box-f { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--qd); }
.ag-box-f .sp { flex: 1; } .ag-mode { color: var(--qa); font-weight: 600; } .ag-m { font-family: var(--mono); }
.ag-send { width: 24px; height: 24px; border-radius: 50%; background: var(--qa) !important; color: #fff; display: grid; place-items: center; transition: transform .2s; } .ag-send:hover { transform: scale(1.1); } .ag-send svg { width: 13px; height: 13px; stroke-width: 2.4; }
.ag-box.busy .ag-send { animation: qpulse 1.4s infinite; box-shadow: 0 0 0 0 var(--qa); }

/* terminal */
.term { height: 100%; overflow: auto; padding: 10px 14px; font: 12px/1.6 var(--mono); color: #ddd6cb; background: rgba(8,7,6,.5); user-select: text; cursor: text; }
.term-out > div { white-space: pre-wrap; word-break: break-word; min-height: 1.6em; }
.term-line { display: flex; gap: 8px; } .term-ps { white-space: nowrap; }
.term-in { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font: inherit; caret-color: var(--qa); padding: 0; }
.t-g { color: #5fd38d; } .t-r { color: #ff6b6b; } .t-y { color: #f8c555; } .t-d { color: #6f6a62; } .t-a { color: var(--qa); } .t-b { color: #82aaff; } .t-cmd { color: #fff; }
.t-inv { background: #82aaff; color: #111; padding: 0 5px; border-radius: 3px; font-weight: 700; }
.t-help { display: grid; grid-template-columns: 190px 1fr; }
.t-code { white-space: pre; }
.nf { display: flex; gap: 18px; align-items: center; padding: 6px 0; } .nf img { width: 92px; height: 92px; flex: none; }
.nf-sw { display: flex; gap: 0; margin-top: 6px; } .nf-sw i { width: 18px; height: 12px; display: block; }

/* browser */
.br { display: flex; flex-direction: column; height: 100%; }
.br-tabs { flex: none; display: flex; align-items: flex-end; gap: 3px; height: 32px; padding: 0 8px; background: rgba(0,0,0,.25); overflow: hidden; }
.br-tab { display: flex; align-items: center; gap: 6px; height: 27px; padding: 0 8px 0 10px; max-width: 170px; min-width: 0; border-radius: 8px 8px 0 0; font-size: 11.5px; color: var(--qd); cursor: pointer; }
.br-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.br-tab.on { background: rgba(255,255,255,.07); color: var(--qt); }
.br-tab .x { opacity: .5; font-weight: 400; padding: 0 3px; border-radius: 4px; } .br-tab .x:hover { opacity: 1; background: rgba(255,255,255,.1); }
.br-new { width: 22px; height: 22px; margin-bottom: 3px; border-radius: 6px; display: grid; place-items: center; color: var(--qm); } .br-new:hover { background: rgba(255,255,255,.08); }
.fav { width: 12px; height: 12px; border-radius: 3px; flex: none; background: #555; }
.fav-acme { background: var(--qa); transform: rotate(45deg) scale(.8); } .fav-q { background: #fff url(../assets/logo.svg) center/90% no-repeat; } .fav-gh { background: #e6edf3; border-radius: 50%; }
.br-bar { flex: none; display: flex; align-items: center; gap: 3px; padding: 5px 8px; border-bottom: 1px solid var(--ql); background: rgba(255,255,255,.035); }
.br-bar > button { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; color: var(--qm); } .br-bar > button:hover { background: rgba(255,255,255,.08); color: var(--qt); }
.br-bar > button.on { background: var(--qa); color: #fff; }
.br-bar > button.spin svg { animation: qspin .6s cubic-bezier(.4,0,.2,1); }
.br-url { flex: 1; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; margin: 0 4px; border-radius: 8px; background: rgba(0,0,0,.3); color: var(--qd); }
.br-url svg { width: 11px; height: 11px; }
.br-url input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--qt); font: 12px var(--sans); }
.br-page { flex: 1; min-height: 0; overflow: auto; background: #fafaf9; position: relative; }
.br-page.flash .br-inner { animation: qpage .5s cubic-bezier(.22,1,.36,1); }
.br-inner { min-height: 100%; }
.br-page.picking [data-pick] { cursor: crosshair; }
.br-page.picking [data-pick]:hover { outline: 2px solid var(--qa) !important; outline-offset: 2px; }
[data-pop] { outline: 2px solid var(--pop); outline-offset: 2px; box-shadow: 0 12px 30px -10px var(--pop); animation: qpopx .6s cubic-bezier(.22,1,.36,1); }
h1[data-pop] { color: var(--pop); }

/* acme mini app */
.acme { min-height: 100%; font: 11px/1.4 var(--sans); color: #1d1b18; background: #fafaf9; transition: background .5s, color .5s; user-select: none; }
.acme.dark { background: #111214; color: #e8e6e3; }
.acme-nav { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid #ececea; }
.acme.dark .acme-nav { border-color: #24252a; }
.acme-logo { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 12px; }
.acme-logo i { width: 11px; height: 11px; border-radius: 3px; background: var(--qa); transform: rotate(45deg); }
.acme-nav span { color: #8a8780; cursor: pointer; } .acme-nav span.on { color: inherit; font-weight: 600; }
.acme-nav .sp { flex: 1; }
.acme-theme { width: 24px; height: 24px; border-radius: 7px; border: 1px solid #e2e0dc !important; font-size: 12px; animation: qpopx .5s; }
.acme.dark .acme-theme { border-color: #33343a !important; }
.acme-av { width: 22px; height: 22px; border-radius: 50%; background: #1d1b18; color: #fff; display: grid; place-items: center; font: 700 10px var(--sans); font-style: normal; }
.acme.dark .acme-av { background: var(--qa); }
.acme-body { padding: 14px 14px 18px; }
.acme h1 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; display: inline-block; border-radius: 4px; }
.acme-sub { margin: 2px 0 10px; color: #8a8780; }
.acme-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.acme-kpi { padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid #ececea; transition: background .5s, border-color .5s; }
.acme.dark .acme-kpi, .acme.dark .acme-chart { background: #1a1b1f; border-color: #2a2b30; }
.acme-kpi span { font-size: 10px; color: #8a8780; } .acme-kpi b { display: block; font-size: 14px; letter-spacing: -.02em; margin: 1px 0; } .acme-kpi b.bad { color: #d6453a; }
.acme-kpi em { font-style: normal; font-size: 10px; color: #1a9a5a; }
.acme-empty { margin: 10px 0; padding: 18px; border-radius: 10px; border: 1.5px dashed #d9d6d0; text-align: center; color: #9b978f; font-weight: 600; }
.acme.dark .acme-empty { border-color: #34353b; }
.acme-empty small { display: block; margin-top: 3px; font-weight: 400; font-size: 10px; }
.acme-chart { margin: 10px 0; padding: 10px 10px 6px; border-radius: 10px; background: #fff; border: 1px solid #ececea; }
.acme-ch-h { display: flex; justify-content: space-between; margin-bottom: 8px; } .acme-ch-h span { color: #8a8780; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 86px; }
.bars i { flex: 1; height: var(--h); border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, var(--qa), color-mix(in srgb, var(--qa) 55%, #ffb36b)); transform-origin: bottom; animation: qgrow .8s var(--d) cubic-bezier(.22,1,.36,1) both; position: relative; cursor: pointer; transition: filter .2s; }
.bars i:hover { filter: brightness(1.15) saturate(1.2); }
.bars i::after { content: attr(data-v); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%) translateY(3px); padding: 2px 5px; border-radius: 4px; background: #1d1b18; color: #fff; font-size: 9px; white-space: nowrap; opacity: 0; transition: .15s; pointer-events: none; }
.bars i:hover::after { opacity: 1; transform: translateX(-50%); }
.months { display: flex; gap: 4px; margin-top: 4px; font-size: 8.5px; color: #a8a49c; } .months span { flex: 1; text-align: center; }
.acme-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 10.5px; border-radius: 6px; }
.acme-table td { padding: 6px 4px; border-top: 1px solid #efeeeb; } .acme.dark .acme-table td { border-color: #24252a; }
.acme-table td:nth-child(2) { font-variant-numeric: tabular-nums; } .acme-table td:last-child { text-align: right; }
.pill { padding: 1px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 600; }
.pill.paid { background: #e3f6ea; color: #1a8a4f; } .pill.open { background: #fff3d9; color: #a86b00; } .pill.overdue { background: #fde5e2; color: #c2362b; }
.acme.dark .pill.paid { background: #14301f; } .acme.dark .pill.open { background: #33270d; } .acme.dark .pill.overdue { background: #3a1714; }
.acme-ship { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.acme-ship span { padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 600; color: var(--qa); background: color-mix(in srgb, var(--qa) 13%, transparent); animation: qpopx .5s; }
.pg-q, .pg-off, .pg-new { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 6px; }
.pg-q { background: #0d0c0a; color: #efebe4; } .pg-q img { width: 70px; } .pg-q h2 { margin: 6px 0 0; font-size: 22px; } .pg-q p { margin: 0; color: #9a948a; font-size: 12px; }
.pg-q button, .pg-off button { margin-top: 10px; padding: 6px 14px; border-radius: 999px; background: var(--qa) !important; color: #fff; font-weight: 600; font-size: 12px; }
.pg-off { color: #333; } .pg-off b { font: 11px var(--mono); color: #999; } .pg-off h3 { margin: 6px 0 0; font-size: 17px; } .pg-off p { margin: 0; color: #888; font-size: 12px; }
.pg-new { background: #f4f3f1; color: #222; } .pg-new img { width: 54px; }
.pg-new-s { display: flex; align-items: center; gap: 8px; width: 80%; max-width: 300px; height: 34px; margin: 10px 0; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid #e5e3df; color: #999; font-size: 12px; }
.pg-tiles { display: flex; gap: 10px; } .pg-tiles button { width: 86px; padding: 10px 6px; border-radius: 10px; background: #fff !important; border: 1px solid #e5e3df !important; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: #333 !important; }
.pg-tiles .fav { width: 22px; height: 22px; border-radius: 6px; }
.pg-pr { min-height: 100%; padding: 14px 16px; background: #0d1117; color: #e6edf3; font-size: 11.5px; }
.pr-crumb { color: #7d8590; font-size: 11px; } .pr-crumb b { color: #e6edf3; }
.pg-pr h2 { margin: 6px 0 8px; font-size: 16px; font-weight: 600; } .pg-pr h2 span { color: #7d8590; font-weight: 300; }
.pr-meta { color: #7d8590; line-height: 1.7; } .pr-meta b { color: #e6edf3; } .pr-meta code { font: 10.5px var(--mono); padding: 1px 5px; border-radius: 5px; background: rgba(56,139,253,.15); color: #79c0ff; }
.pr-badge { display: inline-block; padding: 2px 10px; margin-right: 6px; border-radius: 999px; background: #238636; color: #fff; font-weight: 600; } .pr-badge.merged { background: #8957e5; }
.pr-rec { margin: 12px 0; aspect-ratio: 16/7; border-radius: 8px; background: linear-gradient(135deg, #1f2937, #3b1d14 60%, var(--qa)); display: flex; align-items: flex-end; justify-content: space-between; padding: 10px; position: relative; cursor: pointer; overflow: hidden; }
.pr-rec i { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: rgba(255,255,255,.9); }
.pr-rec i::after { content: ''; position: absolute; left: 16px; top: 12px; border: 8px solid transparent; border-left: 12px solid #111; }
.pr-rec.playing i { display: none; } .pr-rec.playing::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; background: #fff; animation: qrec 6s linear forwards; }
.pr-rec span { font-size: 10.5px; color: rgba(255,255,255,.8); }
.pr-checks { border: 1px solid #30363d; border-radius: 8px; } .pr-checks div { padding: 6px 10px; border-top: 1px solid #30363d; } .pr-checks div:first-child { border-top: 0; } .pr-checks .ok { color: #3fb950; margin-right: 6px; }
.pr-merge { margin-top: 12px; padding: 7px 14px; border-radius: 6px; background: #238636 !important; color: #fff; font-weight: 600; font-size: 12px; } .pr-merge.merged { background: #8957e5 !important; cursor: default; }

/* agents app */
.agp { display: flex; flex-direction: column; height: 100%; }
.agp-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--ql); }
.agp-head b { display: block; font-size: 14px; } .agp-head small { color: var(--qd); font-size: 11.5px; }
.agp-new { flex: 1; display: flex; gap: 6px; margin-left: 10px; }
.agp-new input { flex: 1; min-width: 0; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--ql); background: rgba(0,0,0,.3); color: var(--qt); outline: 0; font: 12px var(--sans); } .agp-new input:focus { border-color: var(--qa); }
.agp-new button { height: 30px; padding: 0 12px; border-radius: 8px; background: var(--qa) !important; color: #fff; font-weight: 600; font-size: 12px; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.agp-list { flex: 1; min-height: 0; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.agc { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ql); background: rgba(255,255,255,.03); animation: qfadeup .4s cubic-bezier(.22,1,.36,1); }
.agc-top { display: flex; align-items: center; gap: 8px; } .agc-top b { flex: 1; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--qa); box-shadow: 0 0 0 0 var(--qa); animation: qpulse 1.5s infinite; flex: none; }
.agc.done .agc-dot { background: #5fd38d; animation: none; }
.agc-t { font: 11px var(--mono); color: var(--qd); }
.agc-meta { margin: 3px 0 8px 16px; font: 10.5px var(--mono); color: var(--qd); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agc-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.07); overflow: hidden; } .agc-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--qa), #ffb36b); transition: width .25s linear; }
.agc.done .agc-bar i { background: #5fd38d; }
.agc-step { margin-top: 6px; font: 11px var(--mono); color: var(--qm); }
.agc-pr { margin-top: 8px; padding: 4px 10px; border-radius: 6px; font-size: 11.5px; background: rgba(255,255,255,.07) !important; border: 1px solid var(--ql) !important; transition: background .2s; } .agc-pr:hover { background: var(--qa) !important; color: #fff; }

/* settings */
.set { display: grid; grid-template-columns: 160px 1fr; height: 100%; }
.set-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border-right: 1px solid var(--ql); background: rgba(0,0,0,.15); }
.set-nav b { padding: 2px 10px 10px; font-size: 13px; }
.set-nav span { padding: 6px 10px; border-radius: 6px; font-size: 12.5px; color: var(--qm); cursor: pointer; } .set-nav span:hover { color: var(--qt); } .set-nav span.on { background: rgba(255,255,255,.08); color: var(--qt); }
.set-main { overflow: auto; padding: 4px 22px 22px; }
.set-main h3 { margin: 18px 0 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--qd); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ql); }
.set-row b { display: block; font-size: 12.5px; font-weight: 500; } .set-row small { color: var(--qd); font-size: 11.5px; }
.sw { display: flex; gap: 8px; } .sw button { width: 20px; height: 20px; border-radius: 50%; background: var(--c) !important; transition: transform .2s, box-shadow .2s; } .sw button:hover { transform: scale(1.15); }
.sw button.on { box-shadow: 0 0 0 2px #1a1714, 0 0 0 4px var(--c); }
.tg { width: 36px; height: 21px; border-radius: 999px; background: rgba(255,255,255,.16) !important; position: relative; flex: none; transition: background .25s; }
.tg::after { content: ''; position: absolute; left: 2px; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .25s cubic-bezier(.22,1,.36,1); }
.tg.on { background: var(--qa) !important; } .tg.on::after { transform: translateX(15px); }
.set-models { display: grid; gap: 6px; }
.mdl { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 9px; border: 1px solid var(--ql); cursor: pointer; transition: border-color .2s, background .2s; }
.mdl:hover { border-color: rgba(255,240,220,.2); }
.mdl i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--qd); flex: none; transition: .2s; }
.mdl b { font-size: 12.5px; font-weight: 500; flex: 1; } .mdl small { color: var(--qd); font-size: 11px; }
.mdl.on { border-color: var(--qa); background: color-mix(in srgb, var(--qa) 9%, transparent); } .mdl.on i { border: 4px solid var(--qa); }
.set-rules { padding: 10px 12px; border-radius: 9px; background: rgba(0,0,0,.25); border: 1px solid var(--ql); font: 11.5px/1.7 var(--mono); color: #cfc8bd; }
.about { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; gap: 2px; }
.about img { width: 92px; height: 92px; filter: drop-shadow(0 10px 20px rgba(0,0,0,.5)); animation: qpopx .7s cubic-bezier(.22,1,.36,1); }
.about h2 { margin: 12px 0 0; font-size: 24px; letter-spacing: -.03em; } .about p { margin: 0; color: var(--qm); font-size: 12px; } .about small { color: var(--qd); font-size: 11.5px; margin-top: 6px; }
.about button { margin-top: 14px; padding: 5px 12px; border-radius: 7px; background: rgba(255,255,255,.08) !important; font-size: 12px; } .about em { margin-top: 12px; font-style: normal; font-size: 10.5px; color: var(--qd); }

@keyframes qblink { 50% { opacity: 0; } }
@keyframes qspin { to { transform: rotate(360deg); } }
@keyframes qshim { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes qfade { from { opacity: 0; } }
@keyframes qfadeup { from { opacity: 0; transform: translateY(6px); } }
@keyframes qpop { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
@keyframes qpopx { 0% { transform: scale(.85); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes qtoast { from { opacity: 0; transform: translateX(40px) scale(.96); } }
@keyframes qtoastout { to { opacity: 0; transform: translateX(40px) scale(.96); } }
@keyframes qgrow { from { transform: scaleY(0); } }
@keyframes qpage { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
@keyframes qrec { to { width: 100%; } }
@keyframes qbounce { 0%, 100% { translate: 0 0; } 25% { translate: 0 -22px; } 50% { translate: 0 0; } 70% { translate: 0 -9px; } }
@keyframes qpulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }