:root { --bg:#0B0A08; --surface:#15120E; --surface-raised:#1E1912; --brass:#B68A42; --champagne:#E7D8B7; --champagne-soft:#F4E9D1; --copper:#D8763B; --copper-hot:#FFB16A; --text:#F8F0DE; --muted:#B9AA91; --line:rgba(231,216,183,.17); --green:#86BF8B; --red:#E97968; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:radial-gradient(ellipse at 92% -6%,rgba(216,118,59,.15),transparent 33%),radial-gradient(ellipse at 10% 100%,rgba(182,138,66,.1),transparent 35%),var(--bg); color:var(--text); font-family:"Segoe UI Variable","Segoe UI",system-ui,sans-serif; } body:before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.22; background:repeating-linear-gradient(115deg,transparent 0 3px,rgba(231,216,183,.025) 3px 4px); mix-blend-mode:screen; } button,input,textarea { font:inherit; } button { cursor:pointer; border:0; border-radius:9px; background:linear-gradient(135deg,var(--brass),#D1A75B); color:#161008; font-weight:800; letter-spacing:.01em; padding:.72rem 1rem; transition:transform .15s,filter .15s,box-shadow .15s; } button:hover { filter:brightness(1.1); transform:translateY(-1px); box-shadow:0 6px 20px rgba(216,118,59,.16); } button.secondary { background:rgba(231,216,183,.03); color:var(--champagne); border:1px solid rgba(231,216,183,.32); } .shell { max-width:1520px; margin:auto; padding:0 2rem 2.5rem; } .topbar { height:92px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .brand { display:flex; align-items:center; gap:.85rem; } .mark { display:grid; width:44px; aspect-ratio:1; place-items:center; border:1px solid var(--brass); color:var(--champagne-soft); font-weight:900; border-radius:11px; background:linear-gradient(145deg,#2C2113,#100D09); box-shadow:inset 0 0 22px rgba(216,118,59,.12),0 0 25px rgba(216,118,59,.12); } .brand strong,.brand small { display:block; } .brand strong { letter-spacing:.055em; color:var(--champagne-soft); } .brand small,.eyebrow { color:var(--brass); font-size:.67rem; letter-spacing:.16em; font-weight:800; margin:0; } .status { display:flex; align-items:center; gap:.5rem; color:var(--muted); font-size:.85rem; } .status i { width:8px; height:8px; border-radius:50%; background:var(--brass); box-shadow:0 0 13px currentColor; } .status.online i { background:var(--green); } .app { padding-top:2rem; } .hidden { display:none!important; } .hero { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; padding:1.7rem 0 1.9rem; } .hero-actions { display:flex; gap:.65rem; align-items:center; } h1,h2,p { margin-top:0; } h1 { max-width:760px; margin-bottom:.5rem; font-size:clamp(1.7rem,3.6vw,3.15rem); letter-spacing:-.05em; color:var(--champagne-soft); } h2 { margin:0; font-size:1.08rem; letter-spacing:-.02em; color:var(--champagne-soft); } .subtle,.dialog-content p { color:var(--muted); line-height:1.55; margin-bottom:0; } .voice-button { background:linear-gradient(130deg,#A04F23,var(--copper),var(--copper-hot)); color:#1C0D04; box-shadow:0 0 0 1px rgba(255,177,106,.28),0 8px 23px rgba(216,118,59,.21); } .voice-button.listening { background:linear-gradient(130deg,#D8763B,#FFB16A); animation:pulse 1.3s infinite; } @keyframes pulse { 50% { box-shadow:0 0 0 8px rgba(216,118,59,.08),0 0 28px rgba(255,177,106,.35); } } .metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem; margin-bottom:1rem; } .metric,.panel { border:1px solid var(--line); background:linear-gradient(145deg,rgba(31,26,18,.96),rgba(16,13,9,.97)); border-radius:14px; box-shadow:0 18px 38px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.018); } .metric { padding:1.1rem; } .metric strong { display:block; margin-top:.45rem; font-size:1.28rem; color:var(--champagne-soft); } .metric span { color:var(--muted); font-size:.78rem; } .grid { display:grid; grid-template-columns:1.48fr 1fr; gap:1rem; } .lower { margin-top:1rem; grid-template-columns:1fr 1fr; } .panel { padding:1.15rem; min-width:0; } .panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; } .chip { border:1px solid rgba(182,138,66,.55); color:var(--brass); border-radius:999px; font-size:.7rem; padding:.32rem .55rem; white-space:nowrap; } .voice-status { border-left:2px solid var(--copper); padding:.1rem .2rem .1rem .65rem; color:var(--muted); font-size:.75rem; margin:-.25rem 0 .7rem; } .voice-status.listening { color:var(--copper-hot); } .messages { min-height:350px; max-height:490px; overflow:auto; display:flex; flex-direction:column; gap:.75rem; padding:.25rem .1rem .5rem; } .message { max-width:90%; padding:.8rem .9rem; border-radius:12px; background:#17120D; border:1px solid rgba(231,216,183,.15); color:var(--champagne-soft); line-height:1.45; white-space:pre-wrap; } .message.user { align-self:flex-end; background:linear-gradient(145deg,#352313,#28190E); border-color:rgba(216,118,59,.5); } .message small { display:block; color:var(--brass); margin-bottom:.3rem; font-size:.67rem; text-transform:uppercase; letter-spacing:.08em; } .composer { display:flex; gap:.7rem; border-top:1px solid var(--line); padding-top:1rem; } textarea { min-height:54px; max-height:160px; resize:vertical; flex:1; border-radius:9px; border:1px solid var(--line); background:#0F0D0A; color:var(--text); padding:.75rem; outline:none; } textarea:focus,input:focus { border-color:var(--copper); box-shadow:0 0 0 3px rgba(216,118,59,.13); } .composer button { align-self:flex-end; } .side-stack { display:grid; gap:1rem; align-content:start; } .task-list,.approval-list,.logs { display:grid; gap:.65rem; } .task,.approval,.log { border-left:2px solid rgba(182,138,66,.6); padding:.2rem .2rem .2rem .7rem; } .task strong,.approval strong { display:block; font-size:.88rem; color:var(--champagne-soft); } .task p,.approval p,.log p { color:var(--muted); font-size:.78rem; line-height:1.4; margin:.25rem 0 0; } .meta { display:flex; gap:.45rem; color:var(--muted); font-size:.69rem; margin-top:.4rem; } .approval { border-left-color:var(--copper); } .approval-actions { display:flex; gap:.5rem; margin-top:.65rem; } .approval-actions button:last-child { background:transparent; color:var(--champagne); border:1px solid var(--line); } .agents { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; } .agent { background:#17130E; padding:.75rem; border-radius:10px; border:1px solid rgba(231,216,183,.12); } .agent strong { display:block; font-size:.84rem; color:var(--champagne-soft); } .agent span { display:block; margin-top:.35rem; color:var(--muted); font-size:.68rem; } .agent .agent-status { color:var(--green); text-transform:uppercase; letter-spacing:.08em; } .agent.disconnected .agent-status,.agent.guarded .agent-status { color:var(--copper-hot); } .log { border-left-color:var(--brass); } .log time { display:block; color:#8A775B; font-size:.67rem; } .locked { min-height:calc(100vh - 86px); display:grid; place-items:center; } .lock-card { max-width:500px; text-align:center; padding:2rem; } .lock-icon { display:grid; place-items:center; margin:auto auto 1rem; width:54px; aspect-ratio:1; border-radius:17px; border:1px solid var(--brass); color:var(--copper-hot); font-size:2rem; } code { color:var(--copper-hot); } dialog { max-width:440px; width:calc(100% - 2rem); border:1px solid var(--line); border-radius:16px; background:var(--surface-raised); color:var(--text); box-shadow:0 30px 100px #000C; } dialog::backdrop { background:#000A; } .dialog-content { display:grid; gap:1rem; } .icon-button { padding:0; width:32px; height:32px; font-size:1.3rem; background:transparent; color:var(--muted); } label { display:grid; gap:.4rem; color:var(--muted); font-size:.78rem; } input { border:1px solid var(--line); background:#0F0D0A; color:var(--text); padding:.68rem .75rem; border-radius:9px; } .pair-result { border:1px solid rgba(182,138,66,.5); border-radius:11px; background:#241A0F; padding:1rem; } .pair-code { color:var(--copper-hot); font-size:2rem; font-weight:850; letter-spacing:.18em; margin:.35rem 0; } .dialog-note { font-size:.75rem; } @media (max-width:900px) { .metrics { grid-template-columns:repeat(2,1fr); } .grid,.lower { grid-template-columns:1fr; } .agents { grid-template-columns:repeat(2,1fr); } } @media (max-width:580px) { .shell { padding:0 1rem 1.5rem; } .topbar { height:74px; } .hero { align-items:flex-start; flex-direction:column; } .hero-actions { width:100%; } .hero-actions button { flex:1; } .composer { align-items:stretch; flex-direction:column; } .composer button { align-self:stretch; } .metrics { grid-template-columns:1fr 1fr; } }