/* Supplied Moss & Bronze kit. RGB borders/icons blend with Screen; skins remain opaque. */
:root{--ink:#f2e7c9;--muted:#cccbb2}
.remote-page{background:radial-gradient(ellipse at 40% 0%,#303a26,#10150e 70%);font-family:Arial,sans-serif}
.remote-shell{padding:54px 40px 44px;border:0;border-radius:22px;background:url('assets/moss/app-background.png') center/cover no-repeat;box-shadow:0 18px 48px #0009;color:#f2e7c9}
.remote-shell:before{display:none}
.remote-shell:after{content:'';position:absolute;inset:0;z-index:5;background:url('assets/moss/app-border.png') center/100% 100% no-repeat;mix-blend-mode:screen;pointer-events:none;border-radius:inherit}
.toolbar{position:relative;z-index:6;color:#eee5c9;font-size:13px}.feedback{color:#d6d7bd}
.metal-widget{border:0;border-radius:14px;background:linear-gradient(color-mix(in srgb,var(--widget-background) 12%,transparent),color-mix(in srgb,var(--widget-background) 12%,transparent)),url('assets/moss/widget-background.webp') center/cover;box-shadow:0 5px 9px #0008;color:#f2e7c9;isolation:isolate}
.metal-widget:before{display:none}
.metal-widget:after{content:'';position:absolute;inset:0;border:0;border-radius:inherit;background:url('assets/moss/widget-border.png') center/100% 100% no-repeat;mix-blend-mode:screen;pointer-events:none;z-index:1}
.metal-widget>*{position:relative;z-index:2}
.control-plate{gap:96px;padding:32px 14px;box-shadow:0 5px 9px #0008}
.remote-shell .command,.remote-shell .v-icon,.remote-shell .icon-button{
 --moss-skin:url('assets/moss/button-square-normal.webp');background:transparent;border:0;isolation:isolate;padding:0;border-radius:12px;box-shadow:none;opacity:1;animation:none;transform:none;transition:filter .15s ease;
}
.remote-shell .command:before,.remote-shell .v-icon:before,.remote-shell .icon-button:before{content:'';display:block;position:absolute;inset:0;border:0;border-radius:12px;background:var(--moss-skin) center/100% 100% no-repeat;clip-path:inset(4.1% round 9%);box-shadow:none;z-index:-1}
.remote-shell .command:after{display:none}
.remote-shell .command:hover,.remote-shell .v-icon:hover,.remote-shell .icon-button:hover{--moss-skin:url('assets/moss/button-square-hover.webp');transform:none;animation:none}
.remote-shell .command:focus-visible,.remote-shell .v-icon:focus-visible,.remote-shell .icon-button:focus-visible{--moss-skin:url('assets/moss/button-square-focus.webp')}
.remote-shell .command:active,.remote-shell .command[data-held=true],.remote-shell .command.pressed,.remote-shell .v-icon:active,.remote-shell .icon-button:active{--moss-skin:url('assets/moss/button-square-pressed.webp');transform:none;animation:none;box-shadow:none}
.remote-shell .command:disabled,.remote-shell .v-icon:disabled,.remote-shell .icon-button:disabled{--moss-skin:url('assets/moss/button-square-disabled.webp');opacity:1;box-shadow:none}
.remote-shell .command.counting{--moss-skin:url('assets/moss/button-square-pressed.webp')}
.remote-shell .command .v-glyph--arrow{inset:10%;width:80%;height:80%}
.remote-shell .command .v-glyph--arrow img,.remote-shell .v-icon img,.remote-shell .icon-button img{filter:none;mix-blend-mode:screen}
.remote-shell .command .v-layer,.remote-shell .v-icon .v-layer,.remote-shell .icon-button .v-layer{mix-blend-mode:screen}
.remote-shell .v-icon .v-layer,.remote-shell .icon-button .v-layer{inset:8%}
.remote-shell .command .countdown-digit img{filter:none}
.settings-action #settings{background:transparent;border:0;box-shadow:none}
.settings-action #settings:before{display:block}
.settings-action #settings:hover,.settings-action #settings[data-state=active]{box-shadow:none}
.settings-dialog{border:0;border-image:none;border-radius:22px;width:min(480px,calc(100vw - 24px));padding:40px 34px;background:url('assets/moss/popup-layer-01-nen-popup.webp') center/cover;color:#f2e7c9;isolation:isolate;font-family:Arial,sans-serif}
.moss-popup-shell:before{content:'';position:absolute;inset:0;min-height:100%;background:url('assets/moss/popup-layer-02-vien-popup.png') center/100% 100% no-repeat;mix-blend-mode:screen;pointer-events:none;z-index:0}
.settings-dialog>.dialog-top,.settings-dialog>.metal-widget{position:relative;z-index:2}
.moss-popup-art{position:absolute;inset:0;pointer-events:none;z-index:1;mix-blend-mode:screen}
.moss-popup-art i{position:absolute;width:85px;height:85px;background:center/contain no-repeat;pointer-events:none}
.moss-popup-art i:nth-child(1){left:6px;top:6px;background-image:url('assets/moss/popup-layer-03-hoa-van-tren-trai.png')}
.moss-popup-art i:nth-child(2){right:6px;top:6px;background-image:url('assets/moss/popup-layer-04-hoa-van-tren-phai.png')}
.moss-popup-art i:nth-child(3){left:6px;bottom:6px;background-image:url('assets/moss/popup-layer-05-hoa-van-duoi-trai.png')}
.moss-popup-art i:nth-child(4){right:6px;bottom:6px;background-image:url('assets/moss/popup-layer-06-hoa-van-duoi-phai.png')}
.dialog-top{padding-bottom:18px;background:none}
.settings-dialog .metal-widget{padding:25px 20px;margin-bottom:20px;color:#f2e7c9}
.settings-dialog .metal-widget p,.settings-dialog .metal-widget label,.settings-dialog .metal-widget h3{color:#e8e2c9;text-shadow:0 1px 2px #000}
.remote-shell .secondary,.remote-shell .cancel-queue,.remote-shell .input-row button,.remote-shell .theme-presets button{--moss-form:url('assets/moss/button-form-normal.webp');background:var(--moss-form) center/100% 137% no-repeat;border:0;border-radius:9px;box-shadow:none;color:#f6e6b5;position:relative;isolation:isolate;min-height:44px;font-weight:700}
.remote-shell .secondary:before,.remote-shell .cancel-queue:before,.remote-shell .input-row button:before,.remote-shell .theme-presets button:before{display:none}
.remote-shell .secondary:hover,.remote-shell .cancel-queue:hover,.remote-shell .input-row button:hover,.remote-shell .theme-presets button:hover{--moss-form:url('assets/moss/button-form-hover.webp')}
.remote-shell .secondary:focus-visible,.remote-shell .cancel-queue:focus-visible,.remote-shell .input-row button:focus-visible,.remote-shell .theme-presets button:focus-visible{--moss-form:url('assets/moss/button-form-focus.webp')}
.remote-shell .secondary:active,.remote-shell .cancel-queue:active,.remote-shell .input-row button:active,.remote-shell .theme-presets button:active{--moss-form:url('assets/moss/button-form-pressed.webp')}
.remote-shell .secondary:disabled,.remote-shell .cancel-queue:disabled,.remote-shell .input-row button:disabled,.remote-shell .theme-presets button:disabled{--moss-form:url('assets/moss/button-form-disabled.webp')}
.remote-shell .v-field{border:0;border-radius:8px;background:url('assets/moss/input-normal.webp') center/100% 194% no-repeat;box-shadow:none}
.remote-shell .v-field:before{display:none}
.remote-shell .v-field:hover{background-image:url('assets/moss/input-hover.webp')}
.remote-shell .v-field:focus-within{background-image:url('assets/moss/input-focus.webp')}
.remote-shell .v-field:has([readonly]){background-image:url('assets/moss/input-readonly.webp')}
.remote-shell .v-field:has(:disabled){background-image:url('assets/moss/input-disabled.webp')}
.remote-shell .v-field:has([aria-invalid=true]){background-image:url('assets/moss/input-invalid.webp')}
.remote-shell .v-field input{color:#fff0cd;font-family:Arial,sans-serif}
.remote-shell .remember-option input,.remote-shell .widget-follow input{appearance:none;width:28px;height:28px;background:url('assets/moss/button-square-normal.webp') center/contain no-repeat;border:0;position:relative;flex:none}
.remote-shell .remember-option input:checked:after,.remote-shell .widget-follow input:checked:after{content:'';position:absolute;inset:0;background:url('assets/moss/icon-check-normal.webp') center/contain no-repeat;mix-blend-mode:screen}
.theme-pickers{flex-wrap:wrap;gap:12px}.theme-pickers label{min-width:105px}.theme-presets{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:520px){.remote-shell{padding:48px 28px 38px}.settings-dialog{padding:35px 24px}.settings-dialog .metal-widget{padding:22px 15px}.toolbar{font-size:12px}}
@media(max-width:350px){.remote-shell{padding:42px 24px 32px}.settings-dialog{padding:30px 19px}.settings-dialog .metal-widget{padding:22px 12px}.toolbar{font-size:11px}}
@media(max-height:600px){.control-plate{gap:72px}}

.settings-action #settings img{filter:none;mix-blend-mode:screen}

.settings-dialog{padding:0!important;background:transparent}
.moss-popup-shell{position:relative;isolation:isolate;padding:40px 34px;background:url('assets/moss/popup-layer-01-nen-popup.webp') center/cover;border-radius:22px}
.dialog-top:after{content:'';position:absolute;left:0;right:0;bottom:0;height:18px;background:url('assets/moss/popup-layer-07-thanh-phan-cach.png') center/100% auto no-repeat;mix-blend-mode:screen;pointer-events:none}
@media(max-width:520px){.moss-popup-shell{padding:35px 24px}}
@media(max-width:350px){.moss-popup-shell{padding:30px 19px}}
.moss-popup-shell>.dialog-top{position:relative;z-index:2}

.dialog-top:after{display:none}
.moss-popup-art:after{content:'';position:absolute;left:34px;right:34px;top:92px;height:18px;background:url('assets/moss/popup-layer-07-thanh-phan-cach.png') center/100% auto no-repeat}
@media(max-width:520px){.moss-popup-art:after{left:24px;right:24px;top:87px}}
@media(max-width:350px){.moss-popup-art:after{left:19px;right:19px;top:82px}}

/* Reference composition: one dark leather plate, centered labels and separate ornaments. */
.remote-shell{width:min(470px,100%);min-height:0;aspect-ratio:800/1360;display:grid;grid-template-rows:auto 1fr 64px;gap:24px;padding:44px 30px 26px;font-family:Georgia,'Times New Roman',serif}
.toolbar{min-height:48px;align-items:flex-start;padding:4px 2px 24px;font:clamp(12px,3.2vw,16px)/1.4 Georgia,serif}
.toolbar:after{content:'';position:absolute;left:2%;right:2%;bottom:0;height:16px;background:url('assets/moss/popup-layer-07-thanh-phan-cach.png') center/100% auto no-repeat;mix-blend-mode:screen;pointer-events:none}
.controls{height:100%;min-height:0}
.control-plate{height:100%;min-height:0;gap:44px;padding:30px 14px;justify-content:space-between;background:url('assets/moss/widget-background.webp') center/100% 100% no-repeat}
.control-plate:before{display:block;content:'';position:absolute;left:22%;right:22%;top:calc(50% - 10px);height:20px;bottom:auto;z-index:1;border:0;background:url('assets/moss/popup-layer-07-thanh-phan-cach.png') center/100% auto no-repeat;mix-blend-mode:screen;pointer-events:none}
.remote-shell .command{width:54%;max-width:190px;aspect-ratio:1}
.remote-shell .command .v-glyph--arrow{left:19%;top:11%;width:62%;height:62%}
.direction-name{position:absolute;left:0;right:0;bottom:19%;font:clamp(18px,4.6vw,25px)/1 Georgia,serif;color:#edcf86;text-shadow:0 2px 2px #000,0 -1px #fff7;pointer-events:none}
.command.counting .direction-name{visibility:hidden}
.settings-action{position:relative;height:64px;align-self:end;padding-right:2px;align-items:center}
.settings-action:before{content:'';position:absolute;left:5%;right:26%;bottom:4px;height:18px;background:url('assets/moss/popup-layer-07-thanh-phan-cach.png') center/100% auto no-repeat;mix-blend-mode:screen;pointer-events:none}
.settings-action #settings{width:58px;height:58px;margin-left:auto}
.settings-action #cancel-queue{height:58px}
.moss-popup-shell{padding:36px 35px 48px;font-family:Georgia,serif}
.moss-popup-shell>.dialog-top{min-height:74px;display:flex;align-items:flex-start;justify-content:center;margin-bottom:24px;padding:2px 44px 22px}
.dialog-top h2{font:clamp(25px,7vw,36px)/1.3 Georgia,serif;color:#e6cc8e;text-align:center;letter-spacing:.04em;text-shadow:0 2px 2px #000}
.dialog-top #close-settings{position:absolute;right:0;top:3px;width:44px;height:44px}
.settings-dialog .metal-widget{background:none;box-shadow:none;border:0;padding:0;margin:0 0 25px;border-radius:0}
.settings-dialog .metal-widget:after,.settings-dialog .metal-widget:before{display:none}
.settings-dialog .metal-widget label,.settings-dialog .metal-widget p,.settings-dialog .metal-widget h3{font-family:Georgia,serif;font-weight:400;color:#ecd7a8}
.settings-dialog .metal-widget h3{font-size:20px}
.settings-dialog .v-field{height:48px;background-image:url('assets/moss/popup-layer-08-nen-o-nhap.webp');background-size:100% 194%}
.settings-dialog .v-field input{font-family:Georgia,serif;font-size:19px;color:#f5ebcf}
.settings-dialog .theme-settings{padding-bottom:22px;border-bottom:1px solid #aa8e514a}
.popup-actions{position:relative;z-index:2;display:flex;gap:14px;margin-top:24px}
.popup-actions button{flex:1;min-height:52px;font:18px Georgia,serif;padding:10px 12px}
.moss-popup-art:after{top:101px;left:35px;right:35px}
.theme-presets{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:350px){.remote-shell{padding:35px 23px 22px;gap:18px}.control-plate{padding:23px 12px;gap:38px}.toolbar{font-size:11px}.moss-popup-shell{padding:32px 25px 42px}.theme-presets{grid-template-columns:repeat(2,minmax(0,1fr))}.popup-actions button{font-size:16px}.moss-popup-art:after{top:97px;left:25px;right:25px}}
@media(max-height:600px) and (min-width:600px){.remote-shell{width:390px}.control-plate{gap:44px}}

.toolbar{z-index:auto}
.control-plate:before{border-image:none}
.theme-presets button{white-space:nowrap;font-size:12px}
.control-plate.metal-widget:before{display:block}

/* Trim the black source-image margins so the visible frame meets the panel edge. */
.toolbar:after{left:10%;right:10%;width:80%}
.remote-shell{overflow:hidden;background-clip:padding-box}
.remote-shell:after{inset:0;background-size:107.01% 104.56%;background-position:center;border-radius:inherit}
.control-plate{overflow:hidden;background-clip:padding-box;border-radius:14px}
.control-plate.metal-widget:after{inset:0;background-size:105.92% 104.46%;background-position:center;border-radius:inherit}

.remote-shell{opacity:1;background-blend-mode:normal}

/* Narrow centered controls and undecorated settings actions. */
.remote-shell>.controls{width:80%;justify-self:center}
.settings-action:before,.settings-action:after{content:none;display:none}

.control-plate{height:80%}

/* Preserve bronze RGB; remove only the dark backing instead of Screen brightening. */
.remote-shell:after{mix-blend-mode:normal;filter:url(#border-black-key);opacity:1}

.remote-shell:after{mask-image:url(assets/moss/frame-no-bottom-right.svg);mask-size:100% 100%;mask-repeat:no-repeat}

.control-plate{container-type:size}
.remote-shell .control-plate .command{width:min(54cqw,calc((100cqh - 44px)/2));max-width:190px}