/* Mặt da đổi theme, viền đồng là lớp độc lập. */
:root{--button-tone:#244a36;--popup-tone:#20392b;--field-tone:#172d21;--field-hover:#294633;--field-disabled:#19271e;--leather:url("/vintage/assets/leather-neutral-tile.png?v=5481681e0e88");--relief:url("/vintage/assets/brass-relief-tile.png?v=5481681e0e88");--danger:#f4a28c}
body[data-theme=wine]{--button-tone:#663033;--popup-tone:#47272a;--field-tone:#321c21;--field-hover:#64363b;--field-disabled:#291c20}
body[data-theme=ocean]{--button-tone:#2d506b;--popup-tone:#243c50;--field-tone:#182d40;--field-hover:#31536a;--field-disabled:#1b2630}
body[data-theme=amber]{--button-tone:#775027;--popup-tone:#503820;--field-tone:#382719;--field-hover:#674828;--field-disabled:#2b231b}
.plaque{background:none;line-height:0}
.direction-button::before{inset:9%;background-color:var(--button-tone);background-image:linear-gradient(145deg,#ffffff12,#00000038),var(--leather);background-size:auto,420px 420px;background-blend-mode:normal,luminosity;border-radius:12%;filter:none;z-index:0;box-shadow:inset 0 0 18px #0008}
.direction-button::after{content:'';position:absolute;inset:0;background:url("/vintage/assets/button-frame-only.png?v=5481681e0e88") center/100% 100% no-repeat;pointer-events:none;z-index:1;filter:brightness(1.08) saturate(1.12)}
.button-face{position:relative;z-index:2}
.direction-button.is-active::before{box-shadow:inset 0 4px 13px #000b}
.vintage-dialog{isolation:isolate;background-color:var(--popup-tone);background-image:linear-gradient(#0002,#0005),var(--leather);background-size:auto,280px 280px;background-blend-mode:normal,luminosity;border:2px solid #dabc71;box-shadow:0 25px 100px #000c,inset 0 0 0 1px #fff0ba80,inset 0 0 0 6px #87612e,inset 0 0 0 7px #1d150d;padding:26px 24px}
.vintage-dialog::before{content:'';position:absolute;inset:2px;border:3px solid #bd9650;border-radius:10px;pointer-events:none;z-index:-1}
@supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
 .vintage-dialog::before{inset:0;border:0;padding:6px;border-radius:11px;background:var(--relief) 0 0/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}
}
.primary-button{background-color:#c59e58;background-image:linear-gradient(#f3d99dcc,#b58b46e8),var(--relief);background-size:auto,100px 100px;border-color:#ffe5a3;color:#261d0e;box-shadow:inset 0 1px 0 #fff3c4,inset 0 -2px 0 #735022,0 3px 5px #0006}
.secondary-button{background-color:var(--button-tone);background-image:linear-gradient(#0001,#0004),var(--leather);background-blend-mode:normal,luminosity;background-size:auto,420px 420px;border-color:#b89b5e;box-shadow:inset 0 1px 0 #efd59a30,0 2px 4px #0004;color:#e8d6ac}
.primary-button:active,.secondary-button:active{box-shadow:inset 0 2px 5px #0008;transform:translateY(1px)}
.secondary-button:disabled{opacity:.45;filter:grayscale(.65);cursor:not-allowed}
.round-icon,.icon-button{background-color:var(--button-tone);background-image:linear-gradient(#0001,#0006),var(--leather);background-size:auto,140px 140px;background-blend-mode:normal,luminosity;border:1px solid #dfbd6b;box-shadow:inset 0 0 0 1px #382715,inset 0 0 0 2px #b38b4380,inset 0 1px 2px #fff0b14d,0 3px 5px #0007}
.round-icon{color:#f0cb75}
.footer-button[aria-pressed=true] .round-icon{background-color:var(--button-tone);box-shadow:inset 0 2px 6px #000b,0 0 0 1px #efd18a;color:#ffecad}
input:not([type=checkbox]),select{appearance:none;background-color:var(--field-tone);background-image:linear-gradient(#0002,#0004),var(--leather);background-size:auto,220px 220px;background-blend-mode:normal,luminosity;border:1px solid #b99b60;border-radius:6px;min-height:46px;color:#f0e5ca;box-shadow:inset 0 2px 5px #0008,0 1px 0 #e7c88725;transition:border-color .14s,box-shadow .14s,background-color .14s,opacity .14s;outline:none}
input:not([type=checkbox]):hover:not(:disabled):not([readonly]),select:hover:not(:disabled),.is-hover:not(:disabled){border-color:#efd18d;background-color:var(--field-hover)}
input:not([type=checkbox]):active:not(:disabled),select:active:not(:disabled){box-shadow:inset 0 3px 6px #000a,0 0 0 1px #d0ae69}
input:not([type=checkbox]):focus,select:focus,.field-preview-focus{border-color:#ffe3a3;box-shadow:inset 0 2px 4px #0008,0 0 0 3px #e8bf6138,0 0 14px #d1a94f20}
input:not([type=checkbox]):disabled,select:disabled{background-color:var(--field-disabled);color:#a49b87;border-color:#786b4c;opacity:.52;box-shadow:inset 0 1px 4px #0006;cursor:not-allowed}
input:not([type=checkbox])[readonly]:not(:disabled){color:#c8bea4;border-style:dashed;cursor:default;background-color:var(--field-tone)}
input[aria-invalid=true],select[aria-invalid=true],input.is-invalid,select.is-invalid{border-color:var(--danger);box-shadow:inset 0 2px 4px #0008,0 0 0 2px #e8997e25}
input[aria-invalid=true]:focus,select[aria-invalid=true]:focus{box-shadow:inset 0 2px 4px #0008,0 0 0 3px #f4a28c3b}
input.is-valid,select.is-valid{border-color:#b5c689;box-shadow:inset 0 2px 4px #0008,0 0 0 1px #9dbf6040}
input::placeholder{color:#b4aa92;opacity:.78}
select{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23e9ca82%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M480-345%20240-585l56-56%20184%20184%20184-184%2056%2056-240%20240Z%22%2F%3E%3C%2Fsvg%3E"),linear-gradient(#0002,#0004),var(--leather);background-size:13px 9px,auto,220px 220px;background-position:right 14px center,0 0,0 0;background-repeat:no-repeat,repeat,repeat;background-blend-mode:normal,normal,luminosity}
select option,select optgroup{background:var(--field-tone);color:#f0e5ca}
select option:checked{background:#8b6b36;color:#fff0bc}
select option:disabled{color:#887f6b}
input[type=file]{padding:8px;font-size:.8125rem}
input[type=file]::file-selector-button{background:linear-gradient(#d9bd7e,#98733b);border:1px solid #e5c88a;color:#271f12;box-shadow:inset 0 1px #fff0b8;margin-right:10px;padding:7px 10px;border-radius:4px;cursor:pointer}
input[type=file]:hover::file-selector-button{filter:brightness(1.1)}
input[type=file]:disabled::file-selector-button{cursor:not-allowed;filter:grayscale(.6)}
.form-error{color:var(--danger)}
@media(prefers-reduced-motion:reduce){input,select{transition:none}}

/* V5: viền nền lùi tối; nền bảng và các trạng thái icon theo theme. */
:root{--title-tone:#203d2c;--icon-hover-tone:#3c624a;--icon-active-tone:#173321;--icon-halo:#7dbd7c38;--app-edge-width:4px}
body[data-theme=wine]{--title-tone:#572832;--icon-hover-tone:#824854;--icon-active-tone:#391b26;--icon-halo:#c87f8a3d}
body[data-theme=ocean]{--title-tone:#29465e;--icon-hover-tone:#466f8c;--icon-active-tone:#1a3045;--icon-halo:#72b2dc3d}
body[data-theme=amber]{--title-tone:#684722;--icon-hover-tone:#946735;--icon-active-tone:#432c16;--icon-halo:#e2aa643d}
.frame-rails{border-width:1px;border-color:#665330;box-shadow:0 0 0 1px #342d1c,inset 0 0 0 1px #8d744238,inset 0 0 12px #0005}
.frame-rails::before{padding:var(--app-edge-width);filter:brightness(.58) saturate(.8);opacity:.82}
.frame-rails::after{inset:var(--app-edge-width);border-color:#a283414f;border-radius:19px;box-shadow:0 0 0 1px #30271788,inset 0 0 0 1px #0e170b80}
.plaque{background:none}
.plaque::before{content:'';position:absolute;left:13%;right:13%;top:33%;bottom:38%;border-radius:999px;background-color:var(--title-tone);background-image:linear-gradient(#ffffff0a,#0005),var(--leather);background-size:auto,180px 180px;background-blend-mode:normal,luminosity;box-shadow:inset 0 2px 6px #0009;z-index:0;pointer-events:none}
.title-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;pointer-events:none}
.plaque>.title-lettering{position:absolute;left:50%;top:47.5%;width:auto;height:clamp(18px,5vw,20px);max-width:70%;transform:translate(-50%,-50%);object-fit:contain;z-index:2;filter:drop-shadow(0 1px .5px #0008);pointer-events:none}
.round-icon,.icon-button,.glass-button{--icon-face:var(--button-tone);position:relative;isolation:isolate;overflow:visible;background:none;border:0;border-radius:50%;box-shadow:none;color:#efd18a;transition:transform .15s,color .15s}
.round-icon{width:46px;height:46px}
.glass-button{--icon-face:var(--field-tone);width:38px;height:38px}
.round-icon::before,.icon-button::before,.glass-button::before{content:'';position:absolute;inset:0;border-radius:50%;background-color:var(--icon-face);background-image:linear-gradient(140deg,#ffffff14,#0005),var(--leather);background-size:auto,115px 115px;background-blend-mode:normal,luminosity;box-shadow:inset 0 2px 4px #0009;transition:background-color .16s,box-shadow .16s;z-index:0;pointer-events:none}
.round-icon::after,.icon-button::after,.glass-button::after{content:'';position:absolute;inset:-8px;background:url("/vintage/assets/icon-vine-frame.png?v=5481681e0e88") center/contain no-repeat;z-index:1;pointer-events:none;filter:drop-shadow(0 2px 1px #0007);transition:filter .16s}
.glass-button::after{inset:-6px;opacity:.94}
.round-icon>.icon,.icon-button>.icon,.glass-button>.icon{position:relative;z-index:2;filter:drop-shadow(0 1px 1px #000)}
.footer-button:hover:not(:disabled) .round-icon,.icon-button:hover:not(:disabled),.glass-button:hover:not(:disabled),.icon-preview-hover{--icon-face:var(--icon-hover-tone);background:none;border-color:transparent;color:#fff0bc}
.footer-button:hover:not(:disabled) .round-icon::before,.icon-button:hover:not(:disabled)::before,.glass-button:hover:not(:disabled)::before,.icon-preview-hover::before{box-shadow:inset 0 1px 3px #0007,0 0 0 1px var(--icon-halo),0 0 10px var(--icon-halo)}
.footer-button:focus-visible .round-icon,.icon-button:focus-visible,.glass-button:focus-visible{--icon-face:var(--icon-hover-tone)}
.footer-button[aria-pressed=true] .round-icon,.footer-button:active:not(:disabled) .round-icon,.icon-button:active:not(:disabled),.glass-button:active:not(:disabled),.icon-preview-active{--icon-face:var(--icon-active-tone);background:none;box-shadow:none;color:#ffeab2}
.footer-button[aria-pressed=true] .round-icon::before,.footer-button:active:not(:disabled) .round-icon::before,.icon-button:active:not(:disabled)::before,.glass-button:active:not(:disabled)::before,.icon-preview-active::before{box-shadow:inset 0 3px 7px #000c,0 0 0 1px var(--icon-halo)}
.footer-button[aria-pressed=true]:hover:not(:disabled) .round-icon{--icon-face:var(--icon-hover-tone)}
.footer-button:disabled .round-icon,.icon-button:disabled,.glass-button:disabled{opacity:.42;filter:grayscale(.7);cursor:not-allowed}
@media(prefers-reduced-motion:reduce){.round-icon,.icon-button,.glass-button,.round-icon::before,.icon-button::before,.glass-button::before,.round-icon::after,.icon-button::after,.glass-button::after{transition:none}}