/* Only pages with recorded SeaVid controls opt into this measured surface. */
.feature-detail-page:has([data-feature-layout="compact"]) .feature-breadcrumb { height:18px; padding:0 18px; border:0; font-size:14px; line-height:20px; }
.feature-detail-page:has([data-feature-layout="reference"]) .feature-breadcrumb { display:none; }
.feature-detail-page:has([data-feature-layout="compact"]) .feature-workbench { grid-template-columns:380px minmax(0,1fr); padding:0 16px 14px; }
.feature-control-panel[data-feature-layout="compact"] { height:calc(100dvh - var(--topbar) - 40px); min-height:0; padding:24px 14px 24px 22px; overflow:hidden; font-family:ui-sans-serif,system-ui,"Microsoft YaHei",sans-serif; font-size:14px; line-height:20px; }
.feature-controls-scroll { flex:1; min-height:0; overflow:auto; margin-right:-14px; padding-right:24px; overscroll-behavior:contain; scrollbar-color:auto; scrollbar-width:auto; }
.feature-controls-scroll::-webkit-scrollbar { width:6px; height:6px; background:transparent; }
.feature-controls-scroll::-webkit-scrollbar-track { background:transparent; }
.feature-controls-scroll::-webkit-scrollbar-thumb { background:transparent; background-clip:padding-box; border:2px solid transparent; border-radius:9999px; }
.feature-controls-scroll::-webkit-scrollbar-thumb:hover { background-color:#f5f4ef80; }
.feature-controls-scroll::-webkit-scrollbar-thumb:active { background-color:#f5f4efaa; }
.feature-controls-scroll::-webkit-scrollbar-button { display:none; width:0; height:0; }
.feature-generate { flex-shrink:0; border-top:1px solid var(--line-soft); padding-top:16px; }
.feature-generate .generate-button { position:static; height:48px; min-height:48px; margin:0; font-size:16px; font-weight:400; }
.feature-generate .generate-button:disabled,
.feature-generate .generate-button:disabled:hover { background:#323431; color:#8c8e89; box-shadow:none; transform:none; filter:none; cursor:not-allowed; }
.feature-control-panel[data-feature-layout="compact"] .feature-template-selector { display:block; margin:0 0 8px; padding:0; border:0; }
.feature-template-selector:has(.feature-template-card) > span { display:block; margin-bottom:4px; color:#c9c7c1; font-size:14px; line-height:20px; }
.feature-template-card { width:100%; height:88px; padding:12px; gap:12px; border:1px solid var(--line-soft); border-radius:8px; text-align:left; }
.feature-template-thumbnail { flex:0 0 96px; width:96px; height:64px; overflow:hidden; border-radius:6px; background:#11100b; }
.feature-template-thumbnail :is(video,img) { display:block; width:100%; height:100%; object-fit:cover; }
.feature-template-card-copy { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.feature-template-card-copy strong { font-size:16px; font-weight:500; line-height:24px; }
.feature-template-card-copy small { margin:0; font-size:12px; line-height:16px; }
.feature-control-panel[data-feature-layout="compact"] .feature-mode-switch { justify-content:flex-end; height:24px; gap:12px; margin:8px 0 10px; font-size:12px; }
.feature-control-panel[data-feature-layout="compact"] .feature-mode-switch button { width:44px; height:24px; background:#55544f; border:0; }
.feature-control-panel[data-feature-layout="compact"] .feature-mode-switch button.on { background:#f4f3ed; }
.feature-control-panel[data-feature-layout="compact"] .feature-mode-switch button span { width:20px; height:20px; margin-left:2px; background:#f4f3ed; }
.feature-control-panel[data-feature-layout="compact"] .feature-mode-switch button.on span { background:#11100b; transform:translateX(20px); }
.feature-control-panel[data-feature-layout="compact"] .feature-upload-grid { gap:16px; padding:8px 0; margin-bottom:16px; }
.feature-control-panel[data-feature-layout="compact"] .feature-input-field { margin:0; }
.feature-control-panel[data-feature-layout="compact"] .field-label { margin-bottom:8px; font-size:14px; font-weight:400; line-height:20px; }
.feature-control-panel[data-feature-layout="compact"] .feature-upload { height:192px; min-height:192px; border-radius:12px; }
.feature-control-panel[data-feature-layout="compact"] .feature-upload-info { top:10px; right:10px; width:24px; height:24px; }
.feature-control-panel[data-feature-layout="compact"] .upload-overlay { inset:12px auto auto 12px; padding:0; background:none; }
.feature-control-panel[data-feature-layout="compact"] .upload-overlay button { width:32px; height:32px; border-radius:50%; background:#282822dd; }
.feature-control-panel[data-feature-layout="compact"] .feature-spec-options:has([data-key="resolution"]) { display:flex; gap:8px; background:none; }
.feature-control-panel[data-feature-layout="compact"] .feature-spec-options [data-key="resolution"] { flex:0 0 80px; width:80px; height:44px; padding:0; border:1px solid var(--line-soft); border-radius:6px; font-size:14px; background:transparent; }
.feature-control-panel[data-feature-layout="compact"] .feature-spec-options [data-key="resolution"].active { background:#f4f3ed; color:#11100b; }
.feature-detail-page:has([data-feature-layout="compact"]) .feature-preview-panel { height:calc(100dvh - var(--topbar) - 40px); min-height:0; padding:24px; }
.feature-detail-page:has([data-feature-layout="compact"]) .feature-preview { width:100%; max-width:1024px; height:min(520px,100%); aspect-ratio:auto; border-radius:16px; background:#15140f; }
.feature-detail-page:has([data-feature-layout="compact"]) .feature-preview::after { display:none; }
@media(max-width:1023px) {
  .feature-detail-page:has([data-feature-layout="compact"]) .feature-workbench { grid-template-columns:1fr; }
  .feature-detail-page:has([data-feature-layout="compact"]) .feature-preview { width:100%; }
}

/* Template picker: its own top-layer dialog, never an in-flow dropdown. */
.feature-picker-dialog { position:fixed; inset:0; width:min(1180px,calc(100vw - 40px)); height:calc(100dvh - 40px); max-width:none; max-height:none; margin:auto; padding:0; overflow:hidden; border:1px solid #2c2b25; border-radius:24px; background:#15140f; color:#f5f4ef; font-family:ui-sans-serif,system-ui,"Microsoft YaHei",sans-serif; }
.feature-picker-dialog[open] { display:flex; flex-direction:column; }
.feature-picker-dialog::backdrop { background:#000b; }
.feature-picker-dialog > header { display:flex; align-items:flex-start; gap:16px; padding:24px 24px 16px; }
.feature-picker-dialog header > div { flex:1; min-width:0; }
.feature-picker-dialog h2 { margin:0; font-size:20px; line-height:28px; font-weight:600; }
.feature-picker-dialog header p { margin:4px 0 0; font-size:14px; line-height:20px; color:#c8c6bf; }
.feature-picker-count { display:flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; background:#ffffff08; font-size:12px; line-height:18px; white-space:nowrap; }
.feature-picker-count svg { width:16px; height:16px; }
.feature-picker-dialog [data-feature-picker-close] { width:28px; height:28px; padding:4px; background:transparent; color:#bbb9b2; cursor:pointer; }
.feature-picker-dialog [data-feature-picker-close] svg { width:20px; height:20px; }
.feature-picker-toolbar { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 24px 16px; border-bottom:1px solid #2b2a24; }
.feature-picker-tabs { display:flex; padding:4px; border:1px solid #2b2a24; border-radius:8px; }
.feature-picker-tabs button { height:40px; padding:0 12px; border-radius:6px; background:transparent; color:#aaa79e; font-size:14px; cursor:pointer; }
.feature-picker-tabs button[aria-pressed="true"] { background:#f4f3ed; color:#11100b; }
.feature-picker-tabs span { margin-left:5px; }
.feature-picker-search { display:flex; align-items:center; width:320px; height:40px; gap:8px; padding:0 12px; border:1px solid #2b2a24; border-radius:8px; background:#11100b; }
.feature-picker-search svg { width:16px; height:16px; color:#aaa79e; }
.feature-picker-search input { min-width:0; width:100%; border:0; outline:0; background:transparent; color:inherit; font-size:14px; }
.feature-picker-grid { flex:1; min-height:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-content:start; align-items:start; gap:16px; padding:24px; overflow-y:auto; overscroll-behavior:contain; }
.feature-picker-card { display:block; min-width:0; min-height:200px; padding:8px; border:1px solid #2b2a24; border-radius:16px; background:#11100b; color:inherit; text-decoration:none; }
.feature-picker-card[hidden] { display:none; }
.feature-picker-card.selected { border-color:#f4f3ed; box-shadow:inset 0 0 0 1px #f4f3ed; }
.feature-picker-card > div { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:8px; background:#11100b; }
.feature-picker-card img,.feature-picker-card video { display:block; width:100%; height:100%; object-fit:cover; }
.feature-picker-card p { margin:8px 4px 12px; font-size:14px; line-height:24px; }
.feature-picker-selected { position:absolute; left:8px; top:8px; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#f4f3ed; color:#11100b; }
.feature-picker-selected svg { width:18px; height:18px; }
.feature-picker-grid::-webkit-scrollbar { width:6px; background:transparent; }
.feature-picker-grid::-webkit-scrollbar-thumb { background:transparent; border-radius:999px; }
.feature-picker-grid::-webkit-scrollbar-thumb:hover { background:#f5f4ef80; }
.feature-picker-grid::-webkit-scrollbar-thumb:active { background:#f5f4efaa; }
@media(max-width:1023px) { .feature-picker-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:640px) {
  .feature-picker-dialog { width:calc(100vw - 16px); height:calc(100dvh - 16px); border-radius:16px; }
  .feature-picker-toolbar { flex-wrap:wrap; gap:12px; }
  .feature-picker-search { width:100%; }
  .feature-picker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); padding:16px; gap:12px; }
  .feature-picker-count { display:none; }
}
/* Duration uses the observed radio-style control, not a filled segmented tab. */
.feature-control-panel[data-feature-layout="compact"] .feature-spec-options:has([data-key="duration"]) { display:flex; gap:8px; background:none; }
.feature-control-panel[data-feature-layout="compact"] [data-key="duration"] { flex:1; display:flex; align-items:center; justify-content:flex-start; gap:8px; height:44px; min-height:44px; padding:8px 4px 8px 0; border:0; background:transparent; color:#aaa79e; font-size:14px; font-weight:500; text-align:left; }
.feature-control-panel[data-feature-layout="compact"] [data-key="duration"]::before { content:""; flex:0 0 16px; width:16px; height:16px; box-sizing:border-box; border:2px solid #757269; border-radius:50%; }
.feature-control-panel[data-feature-layout="compact"] [data-key="duration"].active { background:transparent; color:#f5f4ef; font-weight:600; }
.feature-control-panel[data-feature-layout="compact"] [data-key="duration"].active::before { border-color:#f5f4ef; background:radial-gradient(circle,#11100b 0 4px,#f5f4ef 4px); }
.feature-control-panel[data-feature-layout="compact"] .feature-upload:has(> .upload-preview) .upload-zone-content { display:none; }
.feature-control-panel[data-feature-route="feature-squish"] .feature-squish-modes { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:8px 0; }
.feature-control-panel[data-feature-route="feature-squish"] .feature-mode-switch { margin:0; gap:12px; white-space:nowrap; font-weight:500; }
.feature-control-panel[data-feature-route="feature-squish"] .feature-mode-switch button { background:#100f09; border:1px solid #f5f4ef16; }
.feature-control-panel[data-feature-route="feature-squish"] .feature-mode-switch button.on { background:#f4f3ed; }
.feature-generation-tabs { display:flex; flex:0 0 166px; width:166px; height:38px; box-sizing:border-box; gap:4px; padding:2px; border:1px solid #f5f4ef1f; border-radius:20px; background:#f5f4ef08; }
.feature-generation-tabs button { flex:1; height:32px; padding:0 12px; border:0; border-radius:16px; background:transparent; color:#c9c8c5; font-size:14px; cursor:pointer; }
.feature-generation-tabs button[aria-selected="true"] { background:#100f09; color:#f5f4ef; }
.feature-control-panel[data-feature-route="feature-squish"] .feature-spec-options:has([data-key="ratio"]) { display:grid; grid-template-columns:repeat(5,60px); gap:8px; padding:0; background:transparent; }
.feature-control-panel[data-feature-route="feature-squish"] [data-key="ratio"] { display:flex; flex-direction:column; align-items:center; justify-content:space-between; width:60px; height:82px; padding:12px; border:1px solid #f5f4ef16; border-radius:6px; background:#100f09; color:#c9c8c5; font-size:12px; }
.feature-control-panel[data-feature-route="feature-squish"] [data-key="ratio"].active { background:#f5f4ef; border-color:#f5f4ef; color:#100f09; }
.feature-control-panel[data-feature-route="feature-squish"] .ratio-symbol { display:block; box-sizing:border-box; border:1px solid currentColor; border-radius:2px; flex-shrink:0; }
@media(max-width:420px) { .feature-control-panel[data-feature-route="feature-squish"] .feature-squish-modes { flex-wrap:wrap; } }

/* Image editors share the observed controls, not a video specification form. */
.feature-control-panel:is([data-feature-route="feature-y2k"],[data-feature-route="feature-background"]) .model-field { margin:16px 0; }
.feature-control-panel:is([data-feature-route="feature-y2k"],[data-feature-route="feature-background"]) .model-field .field-label { display:flex; justify-content:space-between; }
.feature-control-panel:is([data-feature-route="feature-y2k"],[data-feature-route="feature-background"]) .model-field small { font-size:12px; color:#aaa79e; }
.feature-control-panel:is([data-feature-route="feature-y2k"],[data-feature-route="feature-background"]) .model-select { height:48px; border:2px solid var(--line-soft); border-radius:6px; }
.feature-control-panel:is([data-feature-route="feature-y2k"],[data-feature-route="feature-background"]) .feature-core-label { margin:16px 0; font-size:16px; font-weight:500; }
.feature-control-panel:is([data-feature-route="feature-y2k"],[data-feature-route="feature-background"]) .feature-spec-options:has([data-key="ratio"]) { display:grid; grid-template-columns:repeat(5,60px); align-items:start; gap:8px; padding:0; background:transparent; }
.feature-control-panel:is([data-feature-route="feature-y2k"],[data-feature-route="feature-background"]) [data-key="ratio"] { display:flex; flex-direction:column; align-items:center; gap:8px; width:60px; min-height:66px; height:auto; padding:12px; border:1px solid #f5f4ef16; border-radius:8px; background:#100f09; color:#c9c8c5; font-size:12px; }
.feature-control-panel:is([data-feature-route="feature-y2k"],[data-feature-route="feature-background"]) [data-key="ratio"].active { background:#f5f4ef; border-color:#f5f4ef; color:#100f09; }
.feature-control-panel:is([data-feature-route="feature-y2k"],[data-feature-route="feature-background"]) .ratio-symbol { display:block; box-sizing:border-box; flex-shrink:0; border:1px solid currentColor; border-radius:2px; }
.feature-control-panel:is([data-feature-route="feature-y2k"],[data-feature-route="feature-background"]) .upload-preview { object-fit:cover; }
.feature-control-panel[data-feature-route="feature-background"] .model-field { margin-top:0; }
.feature-control-panel[data-feature-route="feature-background"] .feature-editing-field { margin-bottom:16px; }
.feature-control-panel[data-feature-route="feature-background"] .feature-prompt textarea { height:104px; min-height:104px; resize:none; padding:12px; border-radius:6px; font-size:16px; line-height:26px; }
.feature-control-panel[data-feature-route="feature-background"] .feature-upload-info { top:8px; right:8px; }
.feature-detail-page:has([data-feature-route="feature-squish"]) .feature-preview video { object-fit:contain; }
.feature-detail-page:has([data-feature-route="feature-squish"]) .feature-workbench { grid-template-columns:384px minmax(0,1fr); }
.feature-control-panel[data-feature-route="feature-squish"] { height:calc(100dvh - var(--topbar) - 32px); padding:20px; }
.feature-control-panel[data-feature-route="feature-squish"] .feature-controls-scroll { margin-right:-24px; padding:0 24px 32px 0; scrollbar-gutter:stable; }
.feature-control-panel[data-feature-route="feature-squish"] .feature-controls-scroll::-webkit-scrollbar { width:10px; }
.feature-control-panel[data-feature-route="feature-squish"] .feature-template-selector > span { margin-bottom:8px; }
.feature-control-panel[data-feature-route="feature-squish"] .feature-generation-tabs button { font-weight:600; }
/* Shared upload help, enabled only by individually observed page profiles. */
.feature-control-panel[data-feature-upload-help="compact"] .feature-upload-info { top:8px; right:8px; width:24px; height:24px; background:#100f09cc; border-color:#f5f4ef16; color:#c9c8c5; }
.feature-control-panel[data-feature-upload-help="compact"] .feature-upload-info svg { width:14px; height:14px; }
.feature-control-panel[data-feature-upload-help="compact"] .feature-upload-info:hover { background:#f5f4ef14; border-color:#f5f4ef16; color:#f5f4ef; }
.reference-tooltip[data-upload-help="compact"] { width:max-content; max-width:min(220px,calc(100vw - 16px)); padding:6px 12px; border:0; border-radius:6px; background:#f5f4ef; color:#100f09; box-shadow:none; font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans","Helvetica Neue",Arial,Inter,"Segoe UI",Roboto,"Noto Sans CJK SC",sans-serif; font-size:12px; line-height:16px; font-weight:400; }
.reference-tooltip[data-upload-help="compact"] p { margin:0 0 4px; font-size:12px; line-height:16px; font-weight:400; }
@media(max-width:1023px) { .feature-detail-page:has([data-feature-route="feature-squish"]) .feature-workbench { grid-template-columns:1fr; } }

/* Hotel Lobby: measured reference component; no nested upload label/actions. */
.feature-detail-page:has([data-feature-layout="reference"]) .feature-workbench { grid-template-columns:384px minmax(0,1fr); padding:16px 16px 14px; }
.feature-control-panel[data-feature-layout="reference"] { height:calc(100dvh - var(--topbar) - 32px); min-height:0; padding:20px; overflow:hidden; font-family:ui-sans-serif,system-ui,"Microsoft YaHei",sans-serif; font-size:14px; line-height:20px; }
.feature-control-panel[data-feature-layout="reference"] .feature-controls-scroll { margin-right:-24px; padding:0 24px 32px 0; scrollbar-gutter:stable; }
.feature-control-panel[data-feature-layout="reference"] .feature-controls-scroll::-webkit-scrollbar { width:10px; }
.feature-control-panel[data-feature-layout="reference"] .feature-upload-grid { margin:0; }
.feature-control-panel[data-feature-layout="reference"] .feature-controls-scroll > .field { margin:0; padding:8px 0; }
.feature-control-panel[data-feature-layout="reference"] .field-label { margin-bottom:8px; color:#c9c8c5; font-size:14px; font-weight:500; line-height:20px; }
.feature-hotel-input-field { margin:0; padding:8px 0 16px; }
.feature-hotel-materials { position:relative; min-width:0; }
.feature-hotel-reference { display:flex; flex-direction:column; gap:12px; min-width:0; }
.feature-hotel-main { position:relative; flex:none; height:208px; overflow:hidden; border-radius:22px; background:radial-gradient(circle at top,rgba(255,255,255,.06),transparent 55%),linear-gradient(rgba(255,255,255,.04),rgba(255,255,255,.02)); box-shadow:inset 0 0 0 1px #ffffff0d; }
.feature-hotel-main > img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; }
.feature-hotel-main-badges { position:absolute; top:8px; left:8px; display:flex; align-items:center; gap:8px; }
.feature-hotel-main-badges b { padding:2px 8px; border-radius:6px; background:#100f09; color:#f5f4ef; font-size:11px; font-weight:600; line-height:16px; }
.feature-hotel-main-badges > span { display:grid; place-items:center; width:24px; height:24px; border-radius:6px; background:#100f09; color:#c9c8c5; }
.feature-hotel-main-badges svg { width:14px; height:14px; }
.feature-hotel-main-badges i { width:10px; height:10px; border-radius:50%; background:#c9c8c566; }
.feature-hotel-empty { height:100%; padding:16px; }
.feature-hotel-empty button { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; gap:12px; border:1px solid #f5f4ef1f; border-radius:6px; background:#100f09b3; color:#f5f4ef; font-size:14px; font-weight:500; cursor:pointer; }
.feature-hotel-empty button > span { display:grid; place-items:center; width:40px; height:40px; border:1px solid #f5f4ef1f; border-radius:6px; background:#100f09; color:#c9c8c5; }
.feature-hotel-empty svg { width:16px; height:16px; }
.feature-hotel-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; height:32px; }
.feature-hotel-type { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:oklab(.685 -.0912435 -.142252 / .16); color:oklch(.901 .058 230.902); }
.feature-hotel-type svg { width:14px; height:14px; }
.feature-hotel-meta .feature-upload-count { padding:4px 12px; border-radius:999px; background:#ffffff0d; box-shadow:inset 0 0 0 1px #ffffff12; color:#c9c8c5; font-size:12px; line-height:16px; }
.feature-hotel-strip { display:flex; flex:none; gap:8px; overflow-x:auto; padding-right:4px; }
.feature-hotel-thumb { display:flex; flex:0 0 92px; flex-direction:column; width:92px; height:120px; padding:8px; border:1px solid #f5f4ef1f; border-radius:8px; background:#100f09; color:#f5f4ef; text-align:left; cursor:pointer; }
.feature-hotel-thumb.active { border-color:#f5f4ef80; box-shadow:0 0 0 2px #f5f4ef26; }
.feature-hotel-thumb-head { display:flex; align-items:center; justify-content:space-between; flex:none; height:20px; margin-bottom:8px; }
.feature-hotel-thumb-head b { padding:2px 8px; border-radius:6px; background:#f5f4ef14; font-size:10px; font-weight:600; line-height:16px; }
.feature-hotel-thumb-head > span { display:grid; place-items:center; width:20px; height:20px; border-radius:6px; background:#f5f4ef14; color:#c9c8c5; }
.feature-hotel-thumb-head svg { width:12px; height:12px; }
.feature-hotel-thumb-image { position:relative; flex:none; width:74px; height:74px; overflow:hidden; border:1px solid #f5f4ef1f; border-radius:8px; background:#f5f4ef0c; }
.feature-hotel-thumb-image img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.feature-hotel-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; height:36px; }
.feature-hotel-actions > div { display:flex; gap:4px; }
.feature-hotel-actions button { display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:6px; background:transparent; color:#f5f4ef; cursor:pointer; }
.feature-hotel-actions > button { border:1px solid #f5f4ef29; background:#f5f4ef0c; }
.feature-hotel-actions button:disabled { opacity:.5; cursor:default; pointer-events:none; }
.feature-hotel-actions svg { width:16px; height:16px; }
.feature-hotel-actions button[data-action="remove-upload"] { color:oklch(.55 .2 27); }
.feature-hotel-error { position:absolute; left:8px; right:8px; top:170px; margin:0; padding:6px 8px; border-radius:6px; background:#100f09e6; color:#ff6b6b; font-size:12px; line-height:16px; }
.feature-hotel-error[hidden] { display:none; }
.feature-control-panel[data-feature-layout="reference"] .feature-spec-options:has([data-key="ratio"]) { display:grid; grid-template-columns:repeat(5,60px); gap:8px; padding:0; background:transparent; }
.feature-control-panel[data-feature-layout="reference"] [data-key="ratio"] { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:60px; height:82px; padding:12px; border:1px solid #f5f4ef1f; border-radius:6px; background:#100f09; color:#c9c8c5; font-size:12px; }
.feature-control-panel[data-feature-layout="reference"] [data-key="ratio"].active { background:#f5f4ef; border-color:#f5f4ef; color:#100f09; }
.feature-control-panel[data-feature-layout="reference"] .ratio-symbol { display:block; flex:none; box-sizing:border-box; border:2px solid currentColor; border-radius:4px; }
.feature-control-panel[data-feature-layout="reference"] .feature-spec-options:has([data-key="duration"]) { display:flex; gap:12px; padding:0; background:none; }
.feature-control-panel[data-feature-layout="reference"] [data-key="duration"] { display:flex; flex:1; flex-direction:row; align-items:center; justify-content:flex-start; gap:8px; height:44px; min-height:44px; padding:8px 4px 8px 0; border:0; background:transparent; color:#c9c8c5; font-size:14px; font-weight:600; text-align:left; }
.feature-control-panel[data-feature-layout="reference"] [data-key="duration"]::before { content:""; flex:none; width:16px; height:16px; box-sizing:border-box; border:2px solid #f5f4ef; border-radius:50%; background:radial-gradient(circle,#100f09 0 4px,#f5f4ef 4px); }
.feature-control-panel[data-feature-layout="reference"] [data-key="duration"].active { background:transparent; color:#f5f4ef; }
.feature-detail-page:has([data-feature-layout="reference"]) .feature-preview-panel { height:calc(100dvh - var(--topbar) - 32px); min-height:0; padding:24px; }
.feature-detail-page:has([data-feature-layout="reference"]) .feature-preview { width:100%; max-width:1024px; height:min(520px,100%); aspect-ratio:auto; border-radius:16px; background:#15140f; }
.feature-detail-page:has([data-feature-layout="reference"]) .feature-preview::after { display:none; }
.feature-hotel-empty button:hover,.feature-hotel-thumb:hover,.feature-hotel-actions button:not(:disabled):hover { background:#f5f4ef14; }
@media(max-width:1023px) { .feature-detail-page:has([data-feature-layout="reference"]) .feature-workbench { grid-template-columns:1fr; } .feature-detail-page:has([data-feature-layout="reference"]) .feature-preview { width:100%; } }
@media(max-width:639px) { .feature-hotel-main { height:176px; } .feature-control-panel[data-feature-layout="reference"] .feature-spec-options:has([data-key="ratio"]) { grid-template-columns:repeat(3,minmax(0,1fr)); } }