/* Scene 1 — app styles, extracted from app/shared/app.css (only rules the
   upload panel and the extraction wait screen use) and scoped under .app-frame
   so nothing leaks into the lander. Regenerate from the app instead of editing by hand. */

.app-frame { --navy: #1f2d25; --navy-2: #2f4034; --text: #23312a; --muted: #6f7c70; --ink: #111922; --paper: #fff; --surface: #fff; --white: #f9f7f4; --app-bg: #f5f5f5; --line: rgba(31, 45, 37, 0.12); --line-soft: rgba(31, 45, 37, 0.08); --line-warm: #ede8e0; --app-line: #e8e8e8; --teal: #1a6e7a; --sand: #c4a882; --vivid: #6f8058; --red: #b73a2e; --orange: #b47b26; --navy-rgb: 31, 45, 37; --teal-rgb: 26, 110, 122; --sand-rgb: 196, 168, 130; --vivid-rgb: 111, 128, 88; --red-rgb: 183, 58, 46; --orange-rgb: 180, 123, 38; --shadow: 0 8px 32px rgba(31, 45, 37, 0.08); --glass: rgba(255, 255, 255, 0.74); --radius: 12px; --radius-input: 5px; --radius-control: 6px; --font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; }
.app-frame { --white: var(--surface); --app-bg: var(--surface); --app-line: #e8e8e8; }
.app-frame { background: var(--white); font-family: Outfit, sans-serif; color: var(--text); margin: 0px; }

.app-frame *, .app-frame ::before, .app-frame ::after { box-sizing: border-box; }
.app-frame button, .app-frame input { font: inherit; }
.app-frame h2, .app-frame p { margin: 0px; }
.app-frame h2 { color: var(--navy); font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: 0px; line-height: 1.16; }
.app-frame p { font-size: 14px; line-height: 1.58; }
.app-frame .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border: 1.5px solid var(--navy); border-radius: 999px; padding: 0px 22px; color: var(--navy); background: transparent; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s; }
.app-frame .btn-primary { background: var(--navy); color: var(--white); }
.app-frame .btn-primary:hover { border-color: var(--navy-2); background: var(--navy-2); }
.app-frame .btn-secondary:hover { background: rgba(var(--navy-rgb), 0.06); }
.app-frame .btn:disabled { opacity: 0.48; cursor: default; }
.app-frame .icon-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; padding: 0px; border: 0px; border-radius: var(--radius-control); background: transparent; color: var(--muted); cursor: pointer; transition: background 0.15s, color 0.15s; }
.app-frame .icon-button svg { width: 16px; height: 16px; transition: transform 0.15s; }
.app-frame .icon-button--sm { width: 24px; height: 24px; }
.app-frame .icon-button--sm svg { width: 14px; height: 14px; }
.app-frame .icon-button:hover:not(:disabled) { background: rgba(var(--navy-rgb), 0.06); color: var(--text); }
.app-frame .icon-button--danger:hover:not(:disabled) { background: rgba(var(--red-rgb), 0.08); color: var(--red); }
.app-frame .icon-button:disabled { opacity: 0.3; cursor: default; }
.app-frame .panel { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 22px; }
.app-frame .ds-drop-zone { border: 2px dashed var(--line); padding: 48px 32px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.app-frame .ds-drop-zone:hover, .app-frame .ds-drop-zone.drag-over { border-color: var(--navy); background: var(--white); }
.app-frame .ds-drop-zone-icon { margin-bottom: 12px; }
.app-frame .ds-drop-zone-icon svg { width: 40px; height: 40px; stroke: var(--muted); }
.app-frame .ds-drop-zone-text { color: var(--muted); font-size: 14px; }
.app-frame .ds-drop-zone-text b { color: var(--text); }
.app-frame .ds-drop-zone-sub { margin-top: 6px; color: var(--muted); font-size: 12px; }
.arh-app .panel-title { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; margin-bottom: 5px; }
.arh-app .panel-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.arh-app .panel-title-row .panel-title { margin-bottom: 0px; }
.arh-app .panel-title-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--teal); flex-shrink: 0; }
.arh-app .panel-title-icon svg { width: 22px; height: 22px; display: block; }
.arh-app .panel-desc { font-size: 13.5px; color: var(--muted); margin-bottom: 26px; line-height: 1.55; }
.arh-app .panel-foot { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.arh-app .app-main .panel.active { overflow: visible; border: none; }
.arh-app .hidden { display: none !important; }
.arh-app .du-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.arh-app .du-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--surface); }
.arh-app .du-item-ext { font-size: 10px; font-weight: 800; letter-spacing: 0.6px; color: var(--teal); background: rgba(var(--teal-rgb),0.10); border-radius: 5px; padding: 3px 6px; }
.arh-app .du-item-name { flex: 1 1 0%; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arh-app .du-status { font-size: 12.5px; color: var(--muted); }
.arh-app .drawing-history { display: flex; flex-direction: column; gap: 8px; }
.arh-app .panel-foot-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.arh-app .drawing-upload-section .du-status { margin-top: 8px; }
.arh-app .drawing-upload-section .du-status:empty { display: none; }
.arh-app .dw-screen { max-width: 560px; margin: 0 auto; padding: 30px 8px 44px; text-align: center;
    min-height: calc(100vh - 200px); display: flex; flex-direction: column; align-items: center; justify-content: center; }

.arh-app .dw-cup { position: relative; width: 108px; height: 116px; margin: 0 auto 20px; color: var(--ink); }
.arh-app .dw-mug { position: absolute; z-index: 1; bottom: 0; left: 0; right: 0; }
.arh-app .dw-mug svg { display: block; width: 96px; height: 96px; margin: 0 auto; }
.arh-app .dw-steam { position: absolute; z-index: 1; top: 2px; width: 6px; height: 22px; border-radius: 6px; background: var(--teal); opacity: 0; filter: blur(1px); }
.arh-app .dw-steam--1 { left: 38px; animation: dw-steam 2.6s ease-in-out infinite; }
.arh-app .dw-steam--2 { left: 51px; animation: dw-steam 2.6s ease-in-out 0.5s infinite; }
.arh-app .dw-steam--3 { left: 64px; animation: dw-steam 2.6s ease-in-out 1s infinite; }
@keyframes dw-steam {
  0% { opacity: 0; transform: translateY(6px) scaleY(0.6); }
  30% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-18px) scaleY(1.25); }
}
.arh-app .dw-cup--done { color: var(--teal); }
.arh-app .dw-cup--done .dw-steam { animation: none; opacity: 0; }

.arh-app .dw-title { font-size: 22px; font-weight: 700; color: var(--navy); margin: 0 0 12px;
    line-height: 1.35; letter-spacing: -0.01em; text-wrap: balance; }
.arh-app .dw-description { max-width: 360px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; text-wrap: pretty; }
.arh-app .dw-status { display: flex; align-items: center; justify-content: center; gap: 8px;
    max-width: 460px; margin-top: 24px; min-height: 22px; color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.arh-app .dw-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex: 0 0 auto; animation: dw-pulse 1.8s ease-in-out infinite; }
@keyframes dw-pulse { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }
.arh-app .dw-status-error { color: var(--red); }
.arh-app .dw-done-icon { display: inline-flex; color: var(--teal); }
.arh-app .dw-done-icon svg { width: 16px; height: 16px; }
.arh-app .dw-proceed { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.arh-app .dw-proceed .du-proc-note { flex-basis: 100%; margin-bottom: 4px; }

@media (prefers-reduced-motion: reduce) {
  .arh-app .dw-steam, .arh-app .dw-status-dot { animation: none; opacity: 1; }
}
.arh-app .dgd-root { font-family: var(--font); color: var(--text); }
.arh-app .dgd-root .drawing-upload-section { margin-top: 20px; }
.arh-app .dgd-root .drawing-upload-section[hidden] { display: none; }
.arh-app .dgd-root .drawing-section-label { margin: 0px 0px 10px; color: var(--text); font-size: 13px; font-weight: 700; }
.arh-app .dgd-root .drawing-section-hint { color: var(--muted); font-weight: 400; }
.arh-app .dgd-root .ds-drop-zone { background: rgba(var(--navy-rgb), 0.03); border: 1.5px dashed var(--line); border-radius: 12px; }
.arh-app .dgd-root .ds-drop-zone:hover, .arh-app .dgd-root .ds-drop-zone.drag-over { border-color: var(--teal); background: rgba(var(--navy-rgb), 0.05); }
.arh-app .dgd-root .ds-drop-zone-icon svg { stroke: var(--teal); }