.face-intro { max-width:780px; }
.face-tabs,.face-actions { display:flex; gap:10px; flex-wrap:wrap; margin:18px 0; }
.face-tabs [aria-pressed=true] { border-color:var(--gold-lt); color:var(--gold-lt); }
.face-actions select { background:#171612; color:#f1e4c9; border:1px solid #80643a; padding:10px; border-radius:5px; margin-left:8px; }
.face-editor { display:grid; grid-template-columns:minmax(250px,1fr) minmax(290px,1fr); gap:28px; align-items:start; }
.face-preview { position:sticky; top:20px; padding:22px; text-align:center; border:1px solid #80643a; border-radius:12px; background:#141411; }
.face-watch-heading { margin:0 0 12px; color:var(--gold-lt); }
/* Official 1024 × 1536 artwork, with the long strap cropped outside a 1180px view. */
.face-watch { position:relative; width:min(100%,460px); aspect-ratio:1024/1180; margin:0 auto; overflow:hidden; border-radius:12px; isolation:isolate; }
.face-watch-body { position:absolute; left:0; top:-14.40678%; width:100%; max-width:none; height:auto; pointer-events:none; user-select:none; }
/* Cover the original artwork screen; the editable display remains exactly square. */
.face-watch-screen { position:absolute; left:25.9765625%; top:17.20339%; width:47.8515625%; aspect-ratio:490/496; background:#fff; display:flex; align-items:center; }
.face-watch-screen [data-face-canvas] { display:block; width:100%; max-width:none; height:auto; aspect-ratio:1; padding:0; border:0; border-radius:0; image-rendering:pixelated; touch-action:none; cursor:move; }
.face-watch-screen [data-face-canvas]:focus-visible { outline:2px solid #299ac5; outline-offset:-2px; }
.face-preview small { display:block; margin-top:12px; color:var(--muted); }
.face-snap-toggle { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:16px; font-size:14px; }
.face-align-status { min-height:2.6em; margin:8px 0 0; color:#8cdcff; font-size:14px; }
.face-fields { border:1px solid #80643a; padding:20px; border-radius:10px; }
.face-fields { min-width:0; background:#141411ed; }
.face-layer-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px; }
.face-layer-heading h2 { margin:0; font-size:21px; }
.face-layer-heading>span { font-size:13px; color:#cbb996; white-space:nowrap; }
.face-add-block { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:16px; margin:18px 0; border:1px dashed #c7a15e; border-radius:9px; background:#c7a15e10; color:#f2d294; cursor:pointer; font:inherit; font-weight:600; }
.face-add-block>span { font-size:25px; line-height:1; }
.face-add-block:hover { background:#c7a15e25; border-style:solid; }
.face-layer-list { display:grid; gap:10px; max-height:76vh; overflow:auto; scrollbar-color:#80643a #141411; padding:2px 5px 2px 2px; }
.face-layer { min-width:0; border:1px solid #665134; border-radius:9px; background:#1b1915; overflow:hidden; }
.face-layer.is-selected { border-color:#c7a15e; box-shadow:0 0 0 1px #c7a15e30; }
.face-layer-header { display:flex; align-items:center; gap:3px; padding:7px; }
.face-layer-toggle { display:flex; align-items:center; gap:11px; flex:1; min-width:0; padding:5px; color:#f3e3c8; background:none; border:0; cursor:pointer; text-align:left; font:inherit; }
.face-layer-icon { display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:7px; background:#c7a15e15; color:#e3bd76; font-size:20px; }
.face-layer-icon canvas { width:36px; height:36px; image-rendering:pixelated; background:white; border-radius:3px; }
.face-layer-caption { min-width:0; flex:1; }
.face-layer-title { display:block; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.face-layer-subtitle { display:block; font-size:12px; color:#bfb199; margin-top:3px; }
.face-layer-chevron { font-size:20px; color:#d8bb86; transition:transform .15s; }
.face-layer.is-open .face-layer-chevron { transform:rotate(180deg); }
.face-icon-button { display:grid; place-items:center; flex:none; width:40px; height:40px; border:0; border-radius:7px; background:transparent; color:#bfb199; cursor:pointer; font-size:26px; }
.face-icon-button svg { width:21px; height:21px; }
.face-icon-button:hover:not(:disabled) { color:#ffd1b8; background:#ac533e22; }
.face-icon-button:disabled { opacity:.45; cursor:default; }
.face-layer-body { padding:0 14px 14px; border-top:1px solid #665134; }
.face-layer-settings { padding-top:8px; }
.face-layer-settings .face-actions { margin:12px 0; }
.face-layer-settings .button { font-size:12px; padding:10px 12px; }
.face-precise { margin:10px 0 14px; }
.face-precise summary,.face-background-block summary { cursor:pointer; color:#e0c89c; padding:8px 0; }
.face-background-block { border:1px solid #665134; border-radius:9px; padding:8px 14px; margin-top:14px; }
.face-layer-hint { font-size:12px; }
.face-publish-actions { display:grid; grid-template-columns:1fr; gap:10px; border-top:1px solid #665134; padding-top:18px; margin-top:18px; }
.face-publish-actions .button { width:100%; justify-content:center; }
.face-add-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.face-add-heading h2 { margin-top:0; }
.face-add-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:18px 0; }
.face-add-grid>button { text-align:left; font:inherit; background:#1d1b16; color:#f1e4c9; border:1px solid #80643a; padding:16px; border-radius:9px; cursor:pointer; }
.face-add-grid>button:hover:not(:disabled) { border-color:#e3bd76; background:#2d261b; }
.face-add-grid>button:disabled { opacity:.4; cursor:default; }
.face-add-symbol { display:block; color:#e3bd76; font-size:26px; margin-bottom:10px; }
.face-add-symbol svg { width:28px; height:28px; display:block; }
.face-layer-icon svg { width:23px; height:23px; }
.face-add-grid strong,.face-add-grid small { display:block; }
.face-add-grid small { color:#bfb199; margin-top:6px; line-height:1.4; }
.face-layer-toggle:focus-visible,.face-icon-button:focus-visible,.face-add-block:focus-visible,.face-add-grid>button:focus-visible { outline:2px solid #f2cc85; outline-offset:-2px; }
@media(max-width:760px){.face-layer-list{max-height:none}.face-layer-heading h2{font-size:19px}.face-add-grid{gap:8px}.face-add-grid>button{padding:12px}}
.face-fields label,.face-dialog label { display:block; color:var(--gold-lt); margin:12px 0 6px; }
.face-fields :is(input,select),.face-dialog :is(input,textarea) { max-width:100%; width:100%; background:#171612; color:var(--cream,#f1e4c9); border:1px solid #80643a; border-radius:5px; padding:10px; }
.face-fields fieldset { border:0; padding:0; margin:0; }
.face-position { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.face-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:20px; }
.face-card { padding:18px; border:1px solid #80643a; border-radius:8px; background:#151411; }
.face-card canvas { display:block; width:160px; max-width:100%; height:auto; image-rendering:pixelated; margin:auto; border:6px solid #292927; }
.face-card h3 { margin-top:16px; }
.face-card p { overflow-wrap:anywhere; }
.face-status { min-height:1.5em; color:#efd9aa; }
.face-dialog { max-width:620px; width:calc(100% - 32px); max-height:90vh; overflow:auto; border:1px solid #b28b4d; border-radius:10px; padding:24px; background:#141411; color:#f1e4c9; }
.face-dialog::backdrop { background:#000b; }
.face-crop { width:min(100%,320px); image-rendering:pixelated; display:block; margin:16px auto; }
.face-image-dialog { max-width:920px; }
.face-image-editor { display:grid; grid-template-columns:minmax(240px,1fr) minmax(260px,1fr); gap:24px; }
.face-image-preview { align-self:start; position:sticky; top:0; }
.face-image-preview .face-crop { background:#fff; touch-action:none; cursor:grab; outline:2px solid #b28b4d; aspect-ratio:1; }
.face-image-preview .face-crop:active { cursor:grabbing; }
.face-image-preview .face-crop:focus-visible { outline:3px solid #f2cc85; outline-offset:4px; }
.face-image-controls details { margin:16px 0; border-top:1px solid #80643a; padding-top:12px; }
.face-image-controls summary { cursor:pointer; color:var(--gold-lt); }
.face-image-controls input[type=range] { accent-color:#caa365; padding:8px 0; }
.face-image-footer { position:sticky; bottom:-24px; background:#141411; padding:14px 0; margin-bottom:0; border-top:1px solid #80643a; }
@media(max-width:680px){.face-image-editor{grid-template-columns:1fr}.face-image-preview{position:static}.face-image-dialog{padding:18px}.face-image-preview .face-crop{width:min(100%,260px)}.face-image-footer{bottom:-18px}}
.face-dialog input[type=checkbox] { width:auto; }
.face-license { display:flex!important; align-items:flex-start; gap:12px; }
.face-battery-preview { margin-top:20px; padding-top:16px; border-top:1px solid #80643a; }
.face-battery-preview input { width:100%; accent-color:#caa365; margin-top:12px; }
.face-battery-preview small { font-size:12px; }
.face-battery-styles { display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:8px; margin-top:10px; }
.face-battery-styles button { padding:10px 4px; border:1px solid #80643a; border-radius:6px; background:#171612; color:#f1e4c9; cursor:pointer; }
.face-battery-styles button[aria-pressed=true] { border:2px solid #e9bd74; background:#30271b; }
.face-battery-styles canvas { display:block; width:72px; height:48px; image-rendering:pixelated; margin:0 auto 8px; background:white; }
.face-fields [data-face-battery-styles] { margin-top:18px; }
.face-step-styles canvas { height:72px; }
.face-fields [data-face-step-styles] { margin-top:18px; }
.face-charging-preview,.face-fields .face-charging-option { display:flex; align-items:flex-start; gap:8px; margin-top:14px; text-align:left; }
.face-charging-preview input,.face-fields .face-charging-option input { width:auto; flex:none; margin-top:3px; accent-color:#caa365; }
.face-time-styles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
.face-time-styles button { padding:10px 8px; border:1px solid #80643a; border-radius:6px; background:#171612; color:#f1e4c9; cursor:pointer; }
.face-time-styles button[aria-pressed=true] { border:2px solid #e9bd74; background:#30271b; }
.face-time-styles canvas { display:block; width:100%; max-width:180px; height:auto; image-rendering:pixelated; margin:0 auto 8px; background:white; }
.face-fields [data-face-time-styles] { margin-top:18px; }
@media(max-width:760px){.face-editor{grid-template-columns:1fr}.face-preview{position:static}.face-fields{padding:14px}.face-actions .button{flex:1 1 160px}}

.face-watch-screen[data-tone="1"] { background:#000; }
.face-fields .face-background-choice { margin:20px 0; }
.face-background-choice legend { color:var(--gold-lt); margin-bottom:10px; }
.face-background-buttons { display:flex; gap:10px; }
.face-background-buttons button { display:flex; align-items:center; justify-content:center; gap:9px; flex:1; padding:12px; font:inherit; color:#f1e4c9; background:#171612; border:1px solid #80643a; border-radius:7px; cursor:pointer; }
.face-background-buttons button[aria-pressed="true"] { border-color:#f2cc85; background:#30271b; box-shadow:inset 0 0 0 1px #f2cc85; }
.face-background-buttons button:focus-visible { outline:2px solid #f2cc85; outline-offset:3px; }
.face-background-swatch { width:22px; height:22px; border:1px solid #9b958c; border-radius:50%; }
.face-background-swatch.is-white { background:#fff; }
.face-background-swatch.is-black { background:#000; }