/* REMOTE — Nền raster, hoa văn PNG riêng; viền CSS thay kích thước độc lập. */
:root{color-scheme:dark;--base:#193b2d;--surface:#182d24;--gold:#e2ba57;--gold-light:#fff0b3;--rust-opacity:.48;--muted:#c0baa5;--text:#eee8d6;--focus:#f4db94;--texture:url("/vintage/assets/patina-tile.png?v=5481681e0e88");font-family:Arial,Helvetica,sans-serif;font-size:16px}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:#090f0d;display:grid;place-items:center;padding:24px;color:var(--text);background-image:radial-gradient(ellipse at 50% 38%,#25332b 0,transparent 70%)}
button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button,select,input{outline-offset:4px}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--focus)}button:disabled{cursor:not-allowed}button{color:inherit}svg{display:block}.icon{width:24px;height:24px;fill:currentColor;stroke:none;flex:none}.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}
.remote-shell{width:min(100%,460px);min-height:min(820px,calc(100svh - 48px));position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;padding:38px 28px 27px;border:1px solid #67573a;border-radius:22px;background-color:var(--base);background-image:linear-gradient(90deg,#0005,transparent 20%,transparent 80%,#0005),var(--texture);background-size:auto,420px;background-blend-mode:multiply,luminosity;box-shadow:0 24px 100px #000b,inset 0 0 70px #0009,inset 0 0 3px 3px #9b835745}
.remote-shell::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:url("/vintage/assets/rust-overlay.png?v=5481681e0e88") 17px 29px/430px 430px repeat;opacity:var(--rust-opacity)}
.remote-shell::after{content:'';z-index:-1;position:absolute;inset:0;pointer-events:none;background:linear-gradient(#05150a1a,#05150a5c)}
.frame-rails{position:absolute;inset:12px;pointer-events:none;border:2px solid #dbb957;border-radius:24px;background:none;box-shadow:0 0 0 1px #47371a,0 0 0 3px #b4944833,inset 0 0 0 1px #fff1ae8c,inset 0 0 0 3px #372e19,inset 0 0 0 4px #b39b5566,inset 0 0 18px #0008;z-index:0}
.corner{position:absolute;width:160px;height:160px;object-fit:contain;pointer-events:none;z-index:2;filter:drop-shadow(0 2px 2px #0007)}.tl{top:0;left:0}.tr{top:0;right:0;transform:scaleX(-1)}.bl{bottom:0;left:0;transform:scaleY(-1)}.br{bottom:0;right:0;transform:scale(-1)}
.app-header{text-align:center;padding:5px 34px 10px;position:relative;z-index:3}.eyebrow{font-size:.75rem;letter-spacing:.18em;color:var(--gold);margin:0 0 8px;font-weight:600}h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:.14em;margin:0 0 12px;padding-left:.14em;font-size:2.6rem;line-height:1.12;color:var(--gold-light);text-shadow:0 2px 0 #000,0 0 18px #cda87026}
.connection{display:flex;justify-content:center;align-items:center;gap:8px;font-size:.8125rem;color:#d1cfbb}.status-dot{width:7px;height:7px;border-radius:50%;background:#98ba8d;box-shadow:0 0 9px #a4d88c75}.status-dot.demo{background:#c3a668;box-shadow:0 0 8px #b3975845}.status-dot.offline{background:#df9282;box-shadow:none}
.camera-section{position:relative;margin-top:0;z-index:3}.plaque{width:min(100%,288px);aspect-ratio:3;display:flex;align-items:center;justify-content:center;background:none;position:relative;z-index:3;margin:-6px auto -19px;padding:0;isolation:isolate}.title-lettering{display:block;width:auto;height:21px;max-width:72%;object-fit:contain;transform:translateY(-2px)}
.camera-frame{padding:10px;border:2px solid #e4c777;border-radius:14px;background-color:#ae813b;background-image:linear-gradient(135deg,#fff0ad38,#28160435 45%,#ffe4a426),url("/vintage/assets/brass-relief-tile.png?v=5481681e0e88");background-size:auto,88px 88px;box-shadow:0 7px 17px #0009,inset 0 1px 0 1px #fff3bd,inset 0 -1px 0 1px #4b3118,0 0 0 1px #3b2b17}.camera-media{box-shadow:0 0 0 1px #21180d,0 0 0 2px #f2d39080;position:relative;aspect-ratio:16/10;overflow:hidden;background:#080e0b;border:1px solid #0c130b;border-radius:3px;isolation:isolate}.camera-media>img,.camera-media>video{width:100%;height:100%;object-fit:cover;display:block}.camera-media>video{object-fit:contain}.camera-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#0005,transparent 38%,transparent 60%,#000a)}.camera-top{position:absolute;top:13px;left:11px;right:11px;display:flex;align-items:center;justify-content:space-between;font-size:.75rem;color:#fff8}.camera-badge{color:#efe6d1;background:#101810aa;border:1px solid #e3cf9944;padding:5px 7px;border-radius:3px;font-size:.6875rem;letter-spacing:.1em}.camera-badge.live{color:#c2f3cd;background:#0b301dcc}.camera-name{font-family:monospace;font-size:.75rem;letter-spacing:.08em;color:#f1f1e1;text-shadow:0 1px 3px #000}.camera-toolbar{position:absolute;bottom:7px;left:9px;right:9px;display:flex;align-items:center;gap:3px}.camera-toolbar>span{font-size:.75rem;line-height:1.4;color:#fffce9;flex:1;text-shadow:0 1px 4px #000}.glass-button{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:5px;background:#07140a59;color:#eee8d2;flex:none}.glass-button .icon{width:19px;height:19px}.glass-button:hover{background:#c8ad7633}.glass-button:active{transform:translateY(1px)}.camera-message{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:12px;padding:40px 15px;background:#08100de8;font-size:.875rem;z-index:1}.camera-message+.camera-toolbar{z-index:2}.camera-message span{line-height:1.4;max-width:280px}.small-button{background:#b2996329;border:1px solid #b2996370;border-radius:4px;padding:7px 10px;font-size:.8125rem}
.control-section{margin-top:auto;padding-top:21px;position:relative;z-index:3}.control-section>.plaque{margin:-15px auto -16px}
.direction-controls{display:grid;grid-template-columns:1fr 1fr;gap:14px}.direction-button{padding:0;border:0;background:transparent;position:relative;aspect-ratio:1;isolation:isolate;transition:transform .14s,filter .14s;filter:drop-shadow(0 6px 5px #0008);border-radius:14px;user-select:none}.direction-button::before{content:'';position:absolute;inset:0;background:transparent;z-index:-1;transition:filter .15s;pointer-events:none;filter:brightness(1.15) saturate(1.23)}.button-face{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15%;gap:2px;text-shadow:0 2px 2px #000;transition:transform .15s}.direction-icon{width:43px;height:43px;color:#e7c064;fill:currentColor;stroke:none;filter:drop-shadow(0 2px 1px #000b);margin-bottom:4px}.direction-label{font-family:Georgia,'Times New Roman',serif;font-size:1.42rem;line-height:1.1;letter-spacing:.055em;color:#ffe7a0}.direction-hint{font-size:.75rem;letter-spacing:.04em;margin-top:5px;color:#c8c1a5}.direction-button:hover:not(:disabled){filter:drop-shadow(0 7px 6px #000a) brightness(1.12)}.direction-button:active:not(:disabled),.direction-button.is-active{transform:translateY(2px);filter:drop-shadow(0 2px 2px #000a) brightness(.91)}.direction-button.is-active .button-face{transform:translateY(1px)}.direction-button:disabled:not(.is-active){filter:grayscale(.45) brightness(.64);opacity:.75}.direction-button:focus-visible{outline-offset:1px;outline:2px solid #ffe0a0}.command-status{min-height:20px;margin:18px 0 12px;text-align:center;font-size:.875rem;line-height:1.5;color:#c9c5ac}.command-status.busy{color:var(--gold-light)}
.app-tools{position:relative;z-index:3;display:flex;justify-content:center;gap:30px;padding:0 0 13px;border-bottom:1px solid #a28f5650;margin:0 20px 8px}.footer-button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:7px;padding:0 4px;color:#d2c6a5;min-width:55px;font-size:.875rem}.round-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#b49a6130,#0c1b1480);border:1px solid #dabb6a99;box-shadow:inset 0 0 0 2px #14241e,inset 0 0 0 3px #b49a612d,0 3px 4px #0006;color:#edca77}.round-icon .icon{width:21px;height:21px}.footer-button:hover .round-icon{border-color:#d9c18f;background-color:#99884e29}.footer-button:active .round-icon{transform:translateY(1px)}.footer-button[aria-pressed=true] .round-icon{color:#f2d696;border-color:#d1ab69;background:#5b482c8c}.demo-note{position:relative;z-index:3;font-size:.75rem;text-align:center;color:#b7ae90;margin:22px 0 0;line-height:1.5}
.vintage-dialog{width:min(430px,calc(100% - 28px));max-height:calc(100svh - 36px);padding:25px 24px;border:1px solid #ac925d;border-radius:14px;color:var(--text);background-color:var(--surface);background-image:linear-gradient(#132218cc,#132218e8),var(--texture);background-size:auto,420px;box-shadow:0 25px 100px #000c,inset 0 0 0 4px #09120c,inset 0 0 0 5px #937f4f66;overscroll-behavior:contain}.vintage-dialog::backdrop{background:#030905b8;backdrop-filter:blur(5px)}.vintage-dialog[open]{animation:dialog-in .2s ease-out}.dialog-heading{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid #b59b6350}.dialog-heading .eyebrow{font-size:.75rem;margin-bottom:6px}.dialog-heading h2{font:1.65rem Georgia,'Times New Roman',serif;color:var(--gold-light);margin:0}.icon-button{width:42px;height:42px;display:grid;place-items:center;background:#baa16b14;border:1px solid #aa946440;border-radius:50%;color:#d5c390}.icon-button:hover{background:#baa16b30}fieldset{margin:0 0 22px;padding:0;border:0;min-width:0}legend{font-size:.875rem;font-weight:bold;letter-spacing:.02em;color:#ddca9d;margin-bottom:14px}label{font-size:.875rem;color:#d3cebb;display:block;margin:0 0 8px}input:not([type=checkbox]),select{width:100%;min-width:0;border:1px solid #85734c;border-radius:5px;background:#08160fcc;color:#eee6d0;min-height:46px;padding:11px 12px;box-shadow:inset 0 2px 5px #0008}input::placeholder{color:#a9aa99}input[type=file]{font-size:.8125rem;padding:9px}input[type=file]::file-selector-button{background:#705f3c;color:#f4e8c9;border:0;padding:7px;border-radius:3px;margin-right:10px}#urlField,#fileField{margin-top:16px}.field-help{font-size:.75rem;line-height:1.65;color:#b6b49e;margin:10px 0 0}.theme-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.theme-choice{padding:10px 3px;background:#06140b4d;border:1px solid #9382574d;border-radius:6px;display:flex;flex-direction:column;gap:8px;align-items:center;font-size:.75rem;color:#c6c2ad}.theme-choice span{width:30px;height:30px;border-radius:50%;background:var(--swatch);border:1px solid #b49a6170;box-shadow:inset 0 2px 5px #0008}.theme-choice.selected{border-color:#dcc28b;background:#aa8f5130;color:#f5e8c7}.switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.switch-row small{display:block;font-size:.75rem;color:#afaf99;margin-top:6px}.switch-row input{appearance:none;width:45px;height:26px;flex:none;position:relative;border-radius:30px;border:1px solid #8b7b55;background:#080f0b;cursor:pointer}.switch-row input::before{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#acaa95;transition:transform .15s}.switch-row input:checked{background:#77633b}.switch-row input:checked::before{transform:translateX(18px);background:#f0dbad}.dialog-actions{display:flex;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid #a8915750}.primary-button,.secondary-button{min-height:46px;border-radius:5px;padding:10px 18px;flex:1;font-weight:600;font-size:.875rem}.primary-button{background:linear-gradient(#cbb47b,#967b47);border:1px solid #dbc18a;color:#1d2116;text-shadow:0 1px #eadab34d;box-shadow:inset 0 1px #f6e7c566,0 3px 5px #0004}.secondary-button{background:#0b190f7a;border:1px solid #9d88574d;color:#d7c8a4}.primary-button:hover:not(:disabled),.secondary-button:hover:not(:disabled){filter:brightness(1.12)}.primary-button:active,.secondary-button:active{transform:translateY(1px)}.primary-button:disabled{filter:grayscale(.5);opacity:.5}.form-error{color:#ffb5a3;font-size:.8125rem;line-height:1.5}.history-list{list-style:none;margin:18px 0;padding:0;max-height:350px;overflow:auto}.history-list li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid #ad995b30;font-size:.875rem}.history-list li strong{color:#e0c999;display:block;margin-bottom:5px}.history-list li small{color:#bab9a3;font-size:.75rem}.history-list time{font-size:.75rem;color:#afad99;white-space:nowrap}.empty-state{text-align:center;padding:35px 0;color:#bcb79e}.empty-state>.icon{margin:0 auto;width:38px;height:38px;color:#b59d68}.empty-state p{margin:16px 0 8px}.empty-state span{font-size:.8125rem}.toast{position:fixed;bottom:max(25px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:calc(100% - 35px);width:max-content;padding:13px 19px;background:#102118f2;border:1px solid #c3a969;border-radius:7px;box-shadow:0 5px 30px #0009;color:#ecdfbd;font-size:.875rem;text-align:center;z-index:20;pointer-events:none}
body[data-theme=wine]{--base:#502c2c;--surface:#32201f}body[data-theme=ocean]{--base:#233f51;--surface:#1b2b35}body[data-theme=amber]{--base:#61472e;--surface:#36291c}
.camera-frame:fullscreen{padding:0;border:0;border-radius:0;background:#000;display:grid;place-items:center}.camera-frame:fullscreen .camera-media{width:100%;height:100%;aspect-ratio:auto;border:0}.camera-frame:fullscreen .camera-media>img,.camera-frame:fullscreen .camera-media>video{object-fit:contain}.camera-frame:fullscreen .camera-toolbar{bottom:20px;left:20px;right:20px}.camera-expanded{position:fixed!important;inset:0!important;z-index:100!important;padding:0;border:0;border-radius:0;display:grid;align-items:center;background:#000}.camera-expanded .camera-media{width:100%;height:100%;aspect-ratio:auto}.camera-expanded .camera-media>img,.camera-expanded .camera-media>video{object-fit:contain}
@keyframes dialog-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:800px){body{padding:38px}.remote-shell{min-height:min(840px,calc(100svh - 76px))}}
@media(max-width:520px){body{padding:0;display:block;background:#14251c}.remote-shell{width:100%;max-width:none;min-height:100svh;border-radius:0;padding:calc(33px + env(safe-area-inset-top)) 26px calc(23px + env(safe-area-inset-bottom));border:0}.frame-rails{inset:11px;border-radius:22px}.app-header{padding-bottom:10px}.corner{width:148px;height:148px}.camera-section{margin-top:0}.control-section{padding-top:21px}.demo-note{margin-top:20px}}
@media(max-width:360px){.remote-shell{padding-left:20px;padding-right:20px}.app-header{padding-left:20px;padding-right:20px}h1{font-size:2.2rem}.direction-controls{gap:8px}.direction-icon{width:34px;height:34px}.direction-label{font-size:1.2rem}.direction-hint{font-size:.6875rem}.app-tools{gap:18px;margin:0 10px}.plaque{width:min(100%,274px)}.vintage-dialog{padding:22px 18px}.camera-toolbar>span{max-width:145px}}
@media(max-height:760px) and (max-width:520px){.remote-shell{padding-top:calc(24px + env(safe-area-inset-top));padding-bottom:calc(17px + env(safe-area-inset-bottom))}.app-header{padding-bottom:8px}.eyebrow{margin-bottom:5px}h1{font-size:2.25rem;margin-bottom:8px}.control-section{padding-top:20px}.command-status{margin:10px 0}.app-tools{padding-bottom:10px}.demo-note{margin-top:14px}.camera-media{aspect-ratio:16/9}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Chữ đồng vàng: lớp màu phản sáng, khắc cạnh và bóng nổi. */
.app-header .brass-title{font-size:2.75rem;font-weight:700;letter-spacing:.095em;padding-left:.095em;margin:0 0 13px;color:#e2b951;text-shadow:0 2px 1px #19180a}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 .app-header .brass-title{background:repeating-linear-gradient(174deg,#ffffff12 0 1px,transparent 1px 3px),linear-gradient(180deg,#fff7ce 0%,#e7c36b 20%,#bd8c2d 43%,#fff0b2 48%,#edcd75 55%,#bc8830 76%,#f9dc8d 100%);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none;-webkit-text-stroke:.35px #e7bd64;filter:drop-shadow(0 1px 0 #634916) drop-shadow(0 2px 0 #1a1609) drop-shadow(0 3px 2px #0008)}
}
@media(max-width:360px){.remote-shell>.corner{width:132px;height:132px}.app-header .brass-title{font-size:2.35rem}}
@media(max-height:760px) and (max-width:520px){.app-header .brass-title{font-size:2.4rem;margin-bottom:10px}}

/* Viền đồng nổi: một vành khép kín, texture chỉ nằm trong dải viền. */
.frame-rails{inset:9px;border-radius:25px;border-color:#e8cb7c;box-shadow:0 0 0 1px #503b1b,inset 0 0 0 1px #fff0b5,0 0 0 3px #a77e3433,inset 0 0 20px #0006}
.frame-rails::after{content:'';position:absolute;inset:10px;border:1px solid #edce82;border-radius:13px;box-shadow:0 0 0 1px #57401f,inset 0 0 0 1px #0009;pointer-events:none}
@supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
 .frame-rails::before{content:'';position:absolute;inset:0;padding:10px;border-radius:23px;background-image:linear-gradient(125deg,#fff0ad35,#3f2d1233 52%,#ffe4a425),url("/vintage/assets/brass-relief-tile.png?v=5481681e0e88");background-size:auto,88px 88px;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none}
}
@media(max-width:520px){.remote-shell>.frame-rails{inset:8px}}
@media(max-width:360px){.title-lettering{height:20px}}

/* Material Symbols SVGs use outline paths filled with the inherited color. */
.inline-icon{display:inline-block;vertical-align:middle;width:20px;height:20px;margin-left:6px}