/* Scene 2 — app styles, extracted from app/shared/app.css (only rules the opis
   status card and rows 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 textarea { font: inherit; }
.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-sm { min-height: 34px; padding: 0px 16px; font-size: 12px; }
.app-frame .btn:disabled { opacity: 0.48; cursor: default; }
.app-frame .btn-text { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 6px; border: 0px; border-radius: var(--radius-control); padding: 4px 8px; background: transparent; color: var(--teal); font-size: 12px; font-weight: 700; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.app-frame .btn-text svg { width: 14px; height: 14px; flex-shrink: 0; }
.app-frame .btn-text:hover:not(:disabled) { background: rgba(var(--teal-rgb), 0.08); }
.app-frame .btn-text--muted { color: var(--muted); }
.app-frame .btn-text--muted:hover:not(:disabled) { background: rgba(var(--navy-rgb), 0.06); color: var(--text); }
.app-frame .btn-text:disabled { opacity: 0.48; cursor: default; }
.app-frame textarea { border: 1px solid var(--line); border-radius: var(--radius-input); background: var(--surface); color: var(--text); padding: 11px 12px; font-size: 14px; outline: none; }
.app-frame textarea:focus { border-color: rgba(var(--vivid-rgb), 0.55); box-shadow: 0 0 0 3px rgba(var(--vivid-rgb), 0.13); }
.app-frame textarea:disabled { border-color: rgba(var(--navy-rgb), 0.08); background: rgba(var(--navy-rgb), 0.045); color: rgba(35, 49, 42, 0.56); cursor: not-allowed; }
.app-frame textarea { resize: vertical; }
.app-frame .spinner { width: 36px; height: 36px; margin: 0px auto 20px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 2px; }
.app-frame .spinner-block { background: var(--navy); animation: 1.2s ease-in-out 0s infinite normal none running block-pulse; }
.app-frame .spinner-block:nth-child(1) { animation-delay: 0s; }
.app-frame .spinner-block:nth-child(2) { animation-delay: 0.1s; }
.app-frame .spinner-block:nth-child(3) { animation-delay: 0.2s; }
.app-frame .spinner-block:nth-child(4) { animation-delay: 0.1s; }
.app-frame .spinner-block:nth-child(5) { animation-delay: 0.2s; }
.app-frame .spinner-block:nth-child(6) { animation-delay: 0.3s; }
.app-frame .spinner-block:nth-child(7) { animation-delay: 0.2s; }
.app-frame .spinner-block:nth-child(8) { animation-delay: 0.3s; }
.app-frame .spinner-block:nth-child(9) { animation-delay: 0.4s; }
.arh-app .hidden { display: none !important; }
.arh-app textarea { font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.65; color: var(--text); width: 100%; box-sizing: border-box; padding: 12px 14px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; outline: none; transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s; }
.arh-app textarea:hover { border-color: rgba(var(--navy-rgb),0.26); }
.arh-app textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(var(--teal-rgb),0.14); background: var(--surface); }
.arh-app textarea::placeholder { color: var(--muted); opacity: 0.65; }
.arh-app .dgd-root .opis-status { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 12px; color: var(--muted); }
.arh-app .dgd-root .opis-status :is(.opis-status-spinner, .opis-status-detail, .opis-status-pct, .opis-progress-bar, .opis-status-note) { display: none; }
.arh-app .dgd-root .opis-status.is-running { display: block; padding: 20px 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.arh-app .dgd-root .opis-status.is-running .opis-status-head { display: flex; align-items: center; gap: 16px; }
.arh-app .dgd-root .opis-status.is-running .opis-status-spinner { display: grid; width: 28px; height: 28px; margin: 0px; flex-shrink: 0; }
.arh-app .dgd-root .opis-status-body { min-width: 0px; flex: 1 1 0%; }
.arh-app .dgd-root .opis-status.is-running .opis-status-title { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.4; }
.arh-app .dgd-root .opis-status.is-running .opis-status-detail { display: block; font-size: 12.5px; margin-top: 2px; }
.arh-app .dgd-root .opis-status.is-running .opis-status-pct { display: block; font-size: 24px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.arh-app .dgd-root .opis-status.is-running .opis-progress-bar { display: block; height: 6px; margin: 16px 0px 14px; border-radius: 3px; background: var(--line); overflow: hidden; }
.arh-app .dgd-root .opis-progress-fill { position: relative; height: 100%; border-radius: 3px; overflow: hidden; background: var(--navy); transition: width 0.6s; }
.arh-app .dgd-root .opis-progress-fill::after { content: ""; position: absolute; inset: 0px; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); animation: 1.6s linear 0s infinite normal none running opis-sheen; }
.arh-app .dgd-root .opis-status.is-running .opis-status-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.arh-app .dgd-root .opis-status.is-running .opis-status-note { display: block; font-size: 12px; line-height: 1.5; }
.arh-app .dgd-root .opis-list { width: 100%; max-width: 100%; font-size: 13px; line-height: 1.65; font-family: var(--font); }
.arh-app .dgd-root .opis-row { display: grid; grid-template-columns: 72px minmax(0px, 1fr); gap: 12px; padding: 18px 0px; align-items: start; }
.arh-app .dgd-root .opis-cell-num { white-space: nowrap; color: var(--text); display: flex; flex-direction: column; gap: 0px; }
.arh-app .dgd-root .opis-cell-num-label { font-weight: 700; font-size: 13px; line-height: 1.3; }
.arh-app .dgd-root .opis-cell-num-akt { font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; line-height: 1.4; }
.arh-app .dgd-root .opis-cell-opis { color: var(--text); min-width: 0px; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.arh-app .dgd-root .opis-cell-opis-topic { font-size: 12px; color: var(--muted); margin-bottom: 6px; overflow-wrap: anywhere; }
.arh-app .dgd-root .opis-row-status { font-size: 11px; color: var(--muted); font-style: italic; display: flex; align-items: center; gap: 8px; }
.arh-app .dgd-root .opis-row-tools { display: flex; gap: 8px; margin-top: 8px; font-size: 11px; }
.arh-app .dgd-root .opis-comment-box { margin-top: 8px; padding: 10px; background: transparent; border: 1px solid var(--line); display: none; }
.arh-app .dgd-root .opis-comment-box textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; font-family: var(--font); font-size: 12px; line-height: 1.5; border: 1px solid var(--line); background: var(--surface); resize: vertical; min-height: 60px; outline: none; border-radius: var(--radius); }
.arh-app .dgd-root .opis-comment-box textarea:focus { border-color: var(--navy); }
.arh-app .dgd-root .opis-comment-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.arh-app .dgd-root .opis-block { margin: 12px 0px; }
.arh-app .dgd-root .opis-block-draft { font-size: 13px; line-height: 1.6; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.arh-app .dgd-root .opis-block-dolocilo { background: var(--white); border-left: 3px solid var(--line); padding: 10px 14px; font-size: 12px; line-height: 1.55; color: var(--text); white-space: pre-wrap; border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 8px; }
.arh-app .dgd-root .opis-block-utemeljitev { padding: 0px; font-size: 13px; line-height: 1.6; color: var(--text); cursor: text; border: 1px solid transparent; border-radius: var(--radius); transition: border-color 0.15s, background 0.15s; white-space: pre-wrap; overflow-wrap: anywhere; }
.arh-app .dgd-root .opis-block-utemeljitev:hover { border-color: var(--line); background: transparent; padding: 0px 6px; margin: 0px -6px; }
.arh-app .dgd-root .opis-block-utemeljitev-edit { width: 100%; box-sizing: border-box; padding: 8px 10px; font-family: var(--font); font-size: 13px; line-height: 1.6; border: 1px solid var(--navy); background: var(--white); resize: none; color: var(--text); outline: none; overflow: hidden; border-radius: var(--radius); margin: 0px -10px; }
.arh-app .dgd-root .opis-block-saved { font-size: 10px; color: var(--navy); margin-top: 4px; opacity: 0; transition: opacity 0.2s; }
.arh-app .dgd-root .opis-block-claim { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--muted); margin-top: 4px; }
.arh-app .dgd-root .opis-spinner-inline { display: inline-block; width: 12px; height: 12px; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-top-color: var(--navy); border-radius: 50%; animation: 0.8s linear 0s infinite normal none running opis-spin; }
.arh-app .dgd-root .opis-meta-actions { display: flex; gap: 10px; }

@keyframes block-pulse { 
  0%, 100% { opacity: 0.15; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1); }
}
@keyframes opis-sheen { 
  100% { transform: translateX(100%); }
}
@keyframes opis-spin { 
  100% { transform: rotate(360deg); }
}
@keyframes spin { 
  100% { transform: rotate(360deg); }
}