:root{color-scheme:dark light}
*{box-sizing:border-box;margin:0}
body{font:15px/1.45 -apple-system,system-ui,sans-serif;background:#111;color:#eee;
     padding-bottom:calc(var(--footer-height,180px) + 8px)}
button{font:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
       transition:transform .08s ease,filter .12s ease,background-color .12s ease,
                  border-color .12s ease,box-shadow .12s ease}
button:not(:disabled):active{transform:scale(.96);filter:brightness(1.16)}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #72a7e8;outline-offset:2px}
.locked>header,.locked>#alert,.locked>#log,.locked>footer,
.locked>#conn,.locked>#tolatest{display:none}
#pairing{display:none;min-height:100vh;align-items:center;justify-content:center;
         padding:calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom))}
.locked #pairing{display:flex}
#pairform{width:min(100%,360px);padding:22px;border:1px solid #444;border-radius:14px;
          background:#1b1b1b;text-align:center}
.pair-brand{display:flex;align-items:center;justify-content:center;gap:8px;
            color:#bbb;font-size:14px;font-weight:600;margin-bottom:14px}
#pairform h2{font-size:20px;margin-bottom:6px}
#pairform p{color:#aaa;margin-bottom:16px}
#paircode{width:100%;text-align:center;font:600 24px/1.2 ui-monospace,monospace;
          letter-spacing:.12em;margin-bottom:10px}
#pairform button{width:100%;padding:10px 16px;border-radius:8px;background:#2a4a72;color:#fff;
                 border:1px solid #58a;font-size:15px}
#pairstatus{font-size:13px;color:#e88;min-height:20px;margin-top:8px}
.privacy-note{display:flex;flex-direction:column;gap:3px;margin-top:12px;padding:11px;
              border-radius:9px;background:#151d19;color:#98a49c;text-align:left;font-size:12px}
.privacy-note strong{color:#b9c9bf}
#paircontrols[hidden]{display:none}
#connectmethods[hidden]{display:none}
.or{display:flex;align-items:center;gap:10px;margin:14px 0;color:#8a8a8a;font-size:12px}
.or[hidden]{display:none}
.or::before,.or::after{content:"";flex:1;height:1px;background:#3a3a3a}
#manualfields{display:flex;flex-direction:column;gap:8px}
#manualfields input{flex:none;text-align:left;font:16px/1.3 ui-monospace,monospace}
#scanbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
         margin-top:10px;padding:10px 16px;border-radius:8px;background:#20304a;
         color:#dce7f5;border:1px solid #3c5a82;font-size:15px;font-weight:600}
#scanbtn[hidden]{display:none}
#scanner{position:fixed;inset:0;z-index:20;background:#000;display:flex;
         flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;
         padding:calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom))}
#scanner[hidden]{display:none}
.scan-stage{position:relative;width:min(80vw,320px);aspect-ratio:1;border-radius:18px;
            overflow:hidden;background:#111}
#scanvideo{width:100%;height:100%;object-fit:cover}
.scan-box{position:absolute;inset:12%;border:3px solid #f4f1eacc;border-radius:14px;
          box-shadow:0 0 0 100vmax #0009;pointer-events:none}
#scanhint{color:#ddd;font-size:15px;max-width:320px}
#scanstatus{color:#ef8e8e;font-size:13px;min-height:18px}
#scancancel{padding:11px 22px;border-radius:10px;background:#222;color:#eee;
            border:1px solid #555;font-size:15px}
header{position:sticky;top:0;background:#111c;backdrop-filter:blur(10px);
       padding:calc(12px + env(safe-area-inset-top)) 14px 12px;border-bottom:1px solid #333;z-index:2}
#conn{display:flex;align-items:center;gap:8px;margin:10px 14px;padding:9px 12px;
      border-radius:10px;background:#3a2a16;border:1px solid #7a5a2c;color:#e8c489;font-size:13px}
#conn[hidden]{display:none}
.conn-dot{width:9px;height:9px;border-radius:50%;background:#e8a54a;flex:none;
          animation:connpulse 1.1s ease-in-out infinite}
@keyframes connpulse{0%,100%{opacity:.35}50%{opacity:1}}
#tolatest{position:fixed;left:50%;transform:translateX(-50%);z-index:3;
          bottom:calc(var(--footer-height,180px) + 12px);padding:8px 16px;border-radius:999px;
          background:#294f78;color:#fff;border:1px solid #6596c7;box-shadow:0 3px 12px #0007;
          font-size:13px;font-weight:600}
#tolatest[hidden]{display:none}
h1{font-size:16px;display:flex;align-items:center;gap:8px}
#dd{position:relative;margin-top:8px}
#ddbtn{width:100%;display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;
       background:#222;color:#eee;border:1px solid #444;font-size:15px;text-align:left}
#dd .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dd .caret{color:#888;flex:none}
#dd .dot{color:#f55}
#ddlist{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;
        background:#1b1b1b;border:1px solid #444;border-radius:8px;overflow-y:auto;max-height:60vh}
#dd.open #ddlist{display:block}
.dditem{display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer}
.dditem:hover,.dditem.sel{background:#2a2a2a}
.plogo{width:16px;height:16px;flex:none}
#alert{display:none;margin:10px 14px;padding:10px 12px;border-radius:10px;
       background:#5c1f1f;border:1px solid #a33}
#alert.q{background:#1f3a5c;border-color:#37a}
#alert .qq{font-weight:600;margin:4px 0 6px}
#readonly{display:none;margin:10px 14px;padding:10px 12px;border-radius:10px;
          background:#3c3218;border:1px solid #79652c;color:#e2cc8c;font-size:13px}
.opt{display:block;width:100%;margin:7px 0 0;padding:10px 12px;border-radius:10px;
     background:#263d59;border:1px solid #4d739e;color:#fff;font-size:14px;text-align:left}
.decision-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.decision{min-height:44px;border-radius:10px;color:#fff;font-weight:650}
.decision.approve{background:#23563c;border:1px solid #3f8a65}
.decision.reject{background:#5b2929;border:1px solid #a14a4a}
#log{padding:8px 14px}
.m{margin:8px 0;padding:9px 12px;border-radius:12px;max-width:92%;
   word-break:break-word;overflow-wrap:anywhere}
.user{background:#2a4a2a;margin-left:auto;white-space:pre-wrap}
.assistant{background:#222}
.assistant pre{background:#161620;padding:8px;border-radius:8px;overflow-x:auto;
               font-size:12.5px;margin:6px 0}
.assistant code{background:#161620;padding:1px 4px;border-radius:4px;
                font-family:ui-monospace,monospace;font-size:13px}
.assistant p{margin:5px 0}
.assistant a{color:#8bf}
.assistant .table-wrap{max-width:100%;margin:8px 0;overflow-x:auto;
                       border:1px solid #444;border-radius:8px}
.assistant table{width:100%;min-width:max-content;border-collapse:collapse;font-size:13px}
.assistant th,.assistant td{padding:6px 9px;border-right:1px solid #444;
                            border-bottom:1px solid #444;vertical-align:top}
.assistant th{background:#2c2c2c;font-weight:600}
.assistant tr:last-child td{border-bottom:0}
.assistant th:last-child,.assistant td:last-child{border-right:0}
.assistant tbody tr:nth-child(even){background:#1b1b1b}
.tool{background:#1a1a2e;color:#9ab;font-size:13px;font-family:ui-monospace,monospace}
footer{position:fixed;bottom:0;left:0;right:0;background:#161616;
       border-top:1px solid #333;padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
.keys{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin-bottom:8px}
.keys button{min-width:0;min-height:52px;padding:5px 2px;border-radius:10px;
             background:linear-gradient(#303030,#252525);color:#eee;border:1px solid #494949;
             box-shadow:0 1px 0 #555 inset,0 2px 5px #0005;display:flex;
             flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:16px}
.keys button small{font-size:9px;color:#999;font-weight:500}
.row{display:flex;gap:6px;align-items:flex-end}
input{flex:1;padding:10px;border-radius:8px;background:#222;color:#eee;
      border:1px solid #444;font-size:16px}
.row textarea{flex:1;min-width:0;min-height:44px;max-height:132px;padding:10px;
              resize:none;overflow-y:auto;border-radius:10px;background:#222;color:#eee;
              border:1px solid #444;font:16px/1.4 -apple-system,system-ui,sans-serif}
.row button{width:48px;min-width:48px;height:44px;padding:10px;border-radius:10px;
            background:linear-gradient(#356596,#294f78);color:#fff;border:1px solid #6596c7;
            box-shadow:0 1px 0 #83add4 inset;font-size:15px;font-weight:650;
            display:flex;align-items:center;justify-content:center;gap:6px}
.row button svg{width:22px;height:22px;fill:currentColor}
.composer-hint{margin-top:4px;color:#777;font-size:10px;text-align:right}
#status{font-size:12px;color:#999;margin-top:3px;min-height:18px;
        transition:color .15s ease}
#status.success{color:#77c99a}
#status.error{color:#ef8e8e}
#status.sending{color:#8ebbe8}
footer button:disabled,footer input:disabled,footer textarea:disabled{opacity:.45;cursor:not-allowed}