repositories
loading repo index
repositories
loading repo index
repository
loading code, commits, and activity
The Living OS cockpit
stars
latest
clone command
git clone gitlawb://did:key:z6Mku78K...XywC/living-os-cockp...git clone gitlawb://did:key:z6Mku78K.../living-os-cockp...59751530feat: surface worker supervisor health in live work5h ago| #1 | @import 'tailwindcss'; |
| #2 | |
| #3 | :root { |
| #4 | /* Brand palette */ |
| #5 | --bg-1: #0a0908; |
| #6 | --bg-2: #14110f; |
| #7 | --bg-3: #1c1814; |
| #8 | --bg-card: #161210; |
| #9 | --border: #2a2420; |
| #10 | --gold-1: #f4d488; |
| #11 | --gold-2: #d9b15f; |
| #12 | --gold-3: #b8923f; |
| #13 | --gold-glow: rgba(217, 177, 95, 0.15); |
| #14 | --text-1: #f5efe0; |
| #15 | --text-2: #c9bda5; |
| #16 | --text-3: #837a6a; |
| #17 | --text-4: #4f4940; |
| #18 | --green: #6ec07a; |
| #19 | --red: #d97565; |
| #20 | --amber: #e3a653; |
| #21 | --blue: #7da5d8; |
| #22 | --cursor-sovereign: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 2 17.2 10.8 26 14 17.2 17.2 14 26 10.8 17.2 2 14 10.8 10.8Z' fill='%23d9b15f' stroke='%230a0908' stroke-width='1.4'/%3E%3Ccircle cx='14' cy='14' r='3.2' fill='%230a0908'/%3E%3C/svg%3E") 14 14, pointer; |
| #23 | --cursor-seal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='11' fill='none' stroke='%23f4d488' stroke-width='2'/%3E%3Ccircle cx='15' cy='15' r='5' fill='%23d9b15f' stroke='%230a0908' stroke-width='1.2'/%3E%3Cpath d='M15 2v6M15 22v6M2 15h6M22 15h6' stroke='%23f4d488' stroke-width='1.7'/%3E%3C/svg%3E") 15 15, pointer; |
| #24 | --cursor-document: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M7 3h10l4 4v18H7Z' fill='%23efe5cf' stroke='%23b8923f' stroke-width='1.6'/%3E%3Cpath d='M17 3v5h5M10 13h8M10 17h8M10 21h5' stroke='%23513a13' stroke-width='1.4'/%3E%3C/svg%3E") 9 5, pointer; |
| #25 | } |
| #26 | |
| #27 | html { |
| #28 | background: var(--bg-1); |
| #29 | } |
| #30 | |
| #31 | body { |
| #32 | cursor: default; |
| #33 | } |
| #34 | |
| #35 | main, |
| #36 | .trust-wizard-page, |
| #37 | .affidavit-page, |
| #38 | .documents-emboss-page { |
| #39 | animation: ritual-page-in 460ms cubic-bezier(0.22, 1, 0.36, 1) both; |
| #40 | } |
| #41 | |
| #42 | .card { |
| #43 | animation: cockpit-card-rise 360ms cubic-bezier(0.22, 1, 0.36, 1) both; |
| #44 | } |
| #45 | |
| #46 | ::view-transition-old(root), |
| #47 | ::view-transition-new(root) { |
| #48 | animation-duration: 420ms; |
| #49 | animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); |
| #50 | } |
| #51 | |
| #52 | @keyframes ritual-page-in { |
| #53 | from { opacity: 0; transform: translateY(8px); filter: saturate(0.78); } |
| #54 | to { opacity: 1; transform: translateY(0); filter: saturate(1); } |
| #55 | } |
| #56 | |
| #57 | @keyframes cockpit-card-rise { |
| #58 | from { opacity: 0; transform: translateY(6px); } |
| #59 | to { opacity: 1; transform: translateY(0); } |
| #60 | } |
| #61 | |
| #62 | .font-serif { font-family: var(--font-serif), Georgia, serif; } |
| #63 | .font-sans { font-family: var(--font-sans), -apple-system, sans-serif; } |
| #64 | |
| #65 | .gold { color: var(--gold-1); } |
| #66 | .gold-2 { color: var(--gold-2); } |
| #67 | |
| #68 | .card { |
| #69 | background: linear-gradient(160deg, var(--bg-card) 0%, var(--bg-2) 100%); |
| #70 | border: 1px solid var(--border); |
| #71 | border-radius: 10px; |
| #72 | box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.02); |
| #73 | } |
| #74 | |
| #75 | .card-header { |
| #76 | font-family: var(--font-serif), Georgia, serif; |
| #77 | font-weight: 600; |
| #78 | letter-spacing: 0.02em; |
| #79 | color: var(--gold-1); |
| #80 | } |
| #81 | |
| #82 | .divider-gold { |
| #83 | height: 1px; |
| #84 | background: linear-gradient(90deg, transparent, var(--gold-3) 50%, transparent); |
| #85 | opacity: 0.4; |
| #86 | } |
| #87 | |
| #88 | .btn-gold { |
| #89 | background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold-3) 100%); |
| #90 | color: var(--bg-1); |
| #91 | font-weight: 600; |
| #92 | border: 1px solid var(--gold-3); |
| #93 | transition: all 0.15s; |
| #94 | } |
| #95 | .btn-gold:hover { background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 100%); } |
| #96 | .btn-gold:disabled { opacity: 0.5; cursor: not-allowed; } |
| #97 | |
| #98 | .btn-ghost { |
| #99 | background: var(--bg-3); |
| #100 | color: var(--text-2); |
| #101 | border: 1px solid var(--border); |
| #102 | } |
| #103 | .btn-ghost:hover { background: var(--bg-2); color: var(--text-1); } |
| #104 | |
| #105 | .status-up { color: var(--green); background: rgba(110, 192, 122, 0.1); } |
| #106 | .status-down { color: var(--red); background: rgba(217, 117, 101, 0.1); } |
| #107 | .status-pending { color: var(--amber); background: rgba(227, 166, 83, 0.1); } |
| #108 | |
| #109 | @keyframes pulse-gold { |
| #110 | 0%, 100% { box-shadow: 0 0 0 0 var(--gold-glow); } |
| #111 | 50% { box-shadow: 0 0 12px 2px var(--gold-glow); } |
| #112 | } |
| #113 | .live-pulse { animation: pulse-gold 2.5s ease-in-out infinite; } |
| #114 | |
| #115 | .aethon-presence { |
| #116 | display: inline-flex; |
| #117 | align-items: center; |
| #118 | gap: 10px; |
| #119 | min-height: 44px; |
| #120 | padding: 7px 11px; |
| #121 | border: 1px solid color-mix(in srgb, var(--presence-color, var(--gold-2)) 34%, var(--border)); |
| #122 | border-radius: 8px; |
| #123 | background: |
| #124 | linear-gradient(180deg, color-mix(in srgb, var(--presence-color, var(--gold-2)) 9%, transparent), rgba(0,0,0,0.22)), |
| #125 | var(--bg-2); |
| #126 | color: var(--text-2); |
| #127 | transition: border-color 220ms ease, background 220ms ease, color 220ms ease; |
| #128 | } |
| #129 | |
| #130 | .aethon-presence[data-state='idle'] { --presence-color: var(--text-3); } |
| #131 | .aethon-presence[data-state='thinking'] { --presence-color: var(--gold-2); } |
| #132 | .aethon-presence[data-state='responding'] { --presence-color: var(--green); } |
| #133 | .aethon-presence[data-state='acting'] { --presence-color: var(--blue); } |
| #134 | .aethon-presence[data-state='offline'] { --presence-color: var(--red); } |
| #135 | |
| #136 | .presence-orb { |
| #137 | position: relative; |
| #138 | display: grid; |
| #139 | place-items: center; |
| #140 | width: 36px; |
| #141 | height: 36px; |
| #142 | border-radius: 50%; |
| #143 | color: var(--presence-color, var(--gold-2)); |
| #144 | background: rgba(0,0,0,0.28); |
| #145 | border: 1px solid color-mix(in srgb, var(--presence-color, var(--gold-2)) 42%, transparent); |
| #146 | overflow: hidden; |
| #147 | } |
| #148 | |
| #149 | .presence-orb::after { |
| #150 | content: ''; |
| #151 | position: absolute; |
| #152 | inset: -4px; |
| #153 | border-radius: inherit; |
| #154 | border: 1px solid color-mix(in srgb, var(--presence-color, var(--gold-2)) 28%, transparent); |
| #155 | opacity: 0; |
| #156 | } |
| #157 | |
| #158 | .aethon-presence[data-state='thinking'] .presence-orb::after, |
| #159 | .aethon-presence[data-state='responding'] .presence-orb::after, |
| #160 | .aethon-presence[data-state='acting'] .presence-orb::after { |
| #161 | animation: presence-breathe 1.8s ease-in-out infinite; |
| #162 | } |
| #163 | |
| #164 | .presence-avatar { |
| #165 | object-fit: cover; |
| #166 | opacity: 0.94; |
| #167 | filter: saturate(1.04) contrast(1.04); |
| #168 | } |
| #169 | |
| #170 | .presence-fallback-icon { |
| #171 | position: relative; |
| #172 | z-index: 1; |
| #173 | opacity: 0; |
| #174 | } |
| #175 | |
| #176 | .presence-copy { |
| #177 | display: grid; |
| #178 | gap: 1px; |
| #179 | line-height: 1.1; |
| #180 | } |
| #181 | |
| #182 | .presence-copy strong { |
| #183 | color: var(--text-1); |
| #184 | font-size: 12px; |
| #185 | } |
| #186 | |
| #187 | .presence-copy em { |
| #188 | color: var(--presence-color, var(--text-3)); |
| #189 | font-size: 11px; |
| #190 | font-style: normal; |
| #191 | letter-spacing: 0.08em; |
| #192 | text-transform: uppercase; |
| #193 | } |
| #194 | |
| #195 | /* OS V4 Council Cockpit: 2D character-select chamber, Meshy-ready asset slots. */ |
| #196 | .council-cockpit-shell { |
| #197 | --state-color: #69aaf8; |
| #198 | --state-soft: rgba(105, 170, 248, 0.18); |
| #199 | min-height: 100vh; |
| #200 | padding: 16px 18px 24px; |
| #201 | color: var(--text-1); |
| #202 | background: |
| #203 | radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--state-color) 21%, transparent), transparent 31rem), |
| #204 | radial-gradient(circle at 12% 8%, rgba(125, 165, 216, 0.15), transparent 23rem), |
| #205 | radial-gradient(circle at 88% 18%, rgba(217, 177, 95, 0.12), transparent 22rem), |
| #206 | linear-gradient(145deg, #030507 0%, #090a0d 48%, #040507 100%); |
| #207 | overflow-x: hidden; |
| #208 | } |
| #209 | |
| #210 | .council-cockpit-shell::before { |
| #211 | content: ""; |
| #212 | position: fixed; |
| #213 | inset: 0; |
| #214 | pointer-events: none; |
| #215 | background: |
| #216 | linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), |
| #217 | linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px); |
| #218 | background-size: 120px 120px; |
| #219 | mask-image: radial-gradient(circle at 50% 42%, black, transparent 78%); |
| #220 | } |
| #221 | |
| #222 | .osv4-topbar, |
| #223 | .osv4-main-grid { |
| #224 | width: min(1880px, 100%); |
| #225 | margin-inline: auto; |
| #226 | } |
| #227 | |
| #228 | .osv4-topbar { |
| #229 | display: grid; |
| #230 | grid-template-columns: minmax(230px, 310px) minmax(420px, 1fr) minmax(360px, 560px); |
| #231 | gap: 18px; |
| #232 | align-items: center; |
| #233 | margin-bottom: 16px; |
| #234 | } |
| #235 | |
| #236 | .osv4-brand, |
| #237 | .osv4-focus-card, |
| #238 | .osv4-operator-strip, |
| #239 | .osv4-panel, |
| #240 | .osv4-chamber-card, |
| #241 | .selected-chamber-panel { |
| #242 | border: 1px solid rgba(217, 177, 95, 0.2); |
| #243 | background: |
| #244 | linear-gradient(180deg, color-mix(in srgb, var(--state-color) 7%, transparent), transparent 45%), |
| #245 | rgba(4, 7, 10, 0.72); |
| #246 | border-radius: 22px; |
| #247 | box-shadow: 0 24px 80px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.045); |
| #248 | backdrop-filter: blur(18px); |
| #249 | } |
| #250 | |
| #251 | .osv4-brand { |
| #252 | display: flex; |
| #253 | align-items: center; |
| #254 | gap: 14px; |
| #255 | padding: 18px 20px; |
| #256 | } |
| #257 | |
| #258 | .osv4-brand img { |
| #259 | width: 56px; |
| #260 | height: 56px; |
| #261 | object-fit: contain; |
| #262 | filter: drop-shadow(0 0 18px rgba(80, 158, 255, 0.42)); |
| #263 | } |
| #264 | |
| #265 | .osv4-brand span, |
| #266 | .osv4-focus-card > span, |
| #267 | .osv4-operator-strip span, |
| #268 | .panel-title-row span, |
| #269 | .selected-chamber-heading span, |
| #270 | .chamber-panel-grid article > span { |
| #271 | color: var(--gold-2); |
| #272 | font-size: 11px; |
| #273 | font-weight: 800; |
| #274 | letter-spacing: 0.16em; |
| #275 | text-transform: uppercase; |
| #276 | } |
| #277 | |
| #278 | .osv4-brand strong { |
| #279 | display: block; |
| #280 | font-family: var(--font-serif), Georgia, serif; |
| #281 | font-size: clamp(2rem, 3vw, 3.25rem); |
| #282 | letter-spacing: 0.08em; |
| #283 | line-height: 0.95; |
| #284 | } |
| #285 | |
| #286 | .osv4-brand em { |
| #287 | display: block; |
| #288 | margin-top: 5px; |
| #289 | color: var(--gold-2); |
| #290 | font-size: 12px; |
| #291 | font-style: normal; |
| #292 | letter-spacing: 0.22em; |
| #293 | text-transform: uppercase; |
| #294 | } |
| #295 | |
| #296 | .osv4-focus-card { |
| #297 | padding: 18px 28px; |
| #298 | } |
| #299 | |
| #300 | .mission-inline-editor input { |
| #301 | width: 100%; |
| #302 | margin-top: 6px; |
| #303 | border: 0; |
| #304 | background: transparent; |
| #305 | color: var(--text-1); |
| #306 | font-family: var(--font-serif), Georgia, serif; |
| #307 | font-size: clamp(1.7rem, 2.6vw, 3rem); |
| #308 | line-height: 1.05; |
| #309 | outline: none; |
| #310 | } |
| #311 | |
| #312 | .mission-inline-editor input:disabled { |
| #313 | opacity: 1; |
| #314 | } |
| #315 | |
| #316 | .focus-stats-row { |
| #317 | display: grid; |
| #318 | grid-template-columns: repeat(3, auto) auto minmax(130px, 1fr); |
| #319 | gap: 10px; |
| #320 | align-items: center; |
| #321 | margin-top: 12px; |
| #322 | } |
| #323 | |
| #324 | .focus-stats-row button, |
| #325 | .focus-stats-row em { |
| #326 | border: 1px solid rgba(255, 255, 255, 0.09); |
| #327 | border-radius: 999px; |
| #328 | background: rgba(0, 0, 0, 0.28); |
| #329 | color: var(--text-2); |
| #330 | font-size: 12px; |
| #331 | font-style: normal; |
| #332 | padding: 6px 10px; |
| #333 | } |
| #334 | |
| #335 | .focus-stats-row button { |
| #336 | display: inline-flex; |
| #337 | align-items: center; |
| #338 | gap: 6px; |
| #339 | cursor: pointer; |
| #340 | text-align: left; |
| #341 | transition: border-color 180ms ease, background 180ms ease, color 180ms ease; |
| #342 | } |
| #343 | |
| #344 | .focus-stats-row button:hover, |
| #345 | .focus-stats-row button:focus-visible { |
| #346 | border-color: color-mix(in srgb, var(--state-color) 44%, rgba(255,255,255,0.12)); |
| #347 | background: color-mix(in srgb, var(--state-color) 14%, rgba(0,0,0,0.32)); |
| #348 | color: var(--text-1); |
| #349 | outline: none; |
| #350 | } |
| #351 | |
| #352 | .focus-stats-row button strong { |
| #353 | color: var(--text-1); |
| #354 | font-size: 12px; |
| #355 | } |
| #356 | |
| #357 | .focus-stats-row button span { |
| #358 | color: var(--text-3); |
| #359 | font-size: 11px; |
| #360 | } |
| #361 | |
| #362 | .focus-stats-row em { |
| #363 | border: 0; |
| #364 | background: transparent; |
| #365 | color: var(--gold-2); |
| #366 | white-space: nowrap; |
| #367 | } |
| #368 | |
| #369 | .focus-progress-track { |
| #370 | height: 6px; |
| #371 | overflow: hidden; |
| #372 | border-radius: 999px; |
| #373 | background: rgba(255, 255, 255, 0.06); |
| #374 | } |
| #375 | |
| #376 | .focus-progress-track i { |
| #377 | display: block; |
| #378 | height: 100%; |
| #379 | border-radius: inherit; |
| #380 | background: linear-gradient(90deg, #4a68ff, #81d9ff); |
| #381 | box-shadow: 0 0 22px rgba(105, 170, 248, 0.74); |
| #382 | } |
| #383 | |
| #384 | .osv4-operator-strip { |
| #385 | position: relative; |
| #386 | display: grid; |
| #387 | grid-template-columns: repeat(4, auto) minmax(84px, auto) auto; |
| #388 | gap: 18px; |
| #389 | align-items: center; |
| #390 | justify-content: end; |
| #391 | padding: 15px 18px; |
| #392 | } |
| #393 | |
| #394 | .osv4-operator-strip strong { |
| #395 | display: inline-flex; |
| #396 | align-items: center; |
| #397 | gap: 6px; |
| #398 | color: var(--text-1); |
| #399 | font-size: 13px; |
| #400 | text-transform: uppercase; |
| #401 | } |
| #402 | |
| #403 | .online-dot { |
| #404 | display: inline-block; |
| #405 | width: 7px; |
| #406 | height: 7px; |
| #407 | border-radius: 50%; |
| #408 | background: #53f27e; |
| #409 | box-shadow: 0 0 12px #53f27e; |
| #410 | } |
| #411 | |
| #412 | .spend-dropdown { |
| #413 | position: relative; |
| #414 | } |
| #415 | |
| #416 | .spend-dropdown summary { |
| #417 | cursor: pointer; |
| #418 | list-style: none; |
| #419 | border: 1px solid rgba(217, 177, 95, 0.28); |
| #420 | border-radius: 999px; |
| #421 | color: var(--gold-2); |
| #422 | font-size: 11px; |
| #423 | font-weight: 900; |
| #424 | letter-spacing: 0.14em; |
| #425 | padding: 9px 13px; |
| #426 | text-transform: uppercase; |
| #427 | } |
| #428 | |
| #429 | .spend-dropdown summary::-webkit-details-marker { |
| #430 | display: none; |
| #431 | } |
| #432 | |
| #433 | .spend-popover { |
| #434 | position: absolute; |
| #435 | top: calc(100% + 12px); |
| #436 | right: 0; |
| #437 | z-index: 50; |
| #438 | width: min(430px, 90vw); |
| #439 | display: grid; |
| #440 | gap: 10px; |
| #441 | border: 1px solid rgba(217, 177, 95, 0.25); |
| #442 | border-radius: 20px; |
| #443 | background: rgba(4, 7, 10, 0.96); |
| #444 | box-shadow: 0 26px 80px rgba(0, 0, 0, 0.72); |
| #445 | padding: 16px; |
| #446 | } |
| #447 | |
| #448 | .spend-popover > strong { |
| #449 | color: var(--text-1); |
| #450 | font-family: var(--font-serif), Georgia, serif; |
| #451 | font-size: 1.45rem; |
| #452 | } |
| #453 | |
| #454 | .spend-popover > em { |
| #455 | color: var(--text-3); |
| #456 | font-size: 12px; |
| #457 | font-style: normal; |
| #458 | line-height: 1.5; |
| #459 | } |
| #460 | |
| #461 | .osv4-main-grid { |
| #462 | display: grid; |
| #463 | grid-template-columns: minmax(300px, 360px) minmax(760px, 1fr) minmax(360px, 460px); |
| #464 | gap: 16px; |
| #465 | align-items: start; |
| #466 | } |
| #467 | |
| #468 | .osv4-left-rail, |
| #469 | .osv4-right-rail, |
| #470 | .osv4-center-stage { |
| #471 | display: grid; |
| #472 | gap: 14px; |
| #473 | } |
| #474 | |
| #475 | .osv4-panel { |
| #476 | padding: 16px; |
| #477 | } |
| #478 | |
| #479 | .panel-title-row { |
| #480 | display: flex; |
| #481 | align-items: center; |
| #482 | justify-content: space-between; |
| #483 | gap: 10px; |
| #484 | margin-bottom: 13px; |
| #485 | } |
| #486 | |
| #487 | .panel-title-row b { |
| #488 | color: var(--text-2); |
| #489 | font-size: 12px; |
| #490 | text-transform: uppercase; |
| #491 | } |
| #492 | |
| #493 | .narrative-list { |
| #494 | display: grid; |
| #495 | gap: 8px; |
| #496 | max-height: 360px; |
| #497 | overflow: auto; |
| #498 | } |
| #499 | |
| #500 | .narrative-row { |
| #501 | display: grid; |
| #502 | grid-template-columns: 28px minmax(0, 1fr) auto; |
| #503 | gap: 9px; |
| #504 | align-items: center; |
| #505 | border-radius: 16px; |
| #506 | padding: 8px; |
| #507 | background: rgba(255, 255, 255, 0.025); |
| #508 | } |
| #509 | |
| #510 | .narrative-row.live { |
| #511 | background: color-mix(in srgb, var(--seat-color, var(--state-color)) 10%, rgba(255,255,255,0.025)); |
| #512 | } |
| #513 | |
| #514 | .narrative-row.warn { |
| #515 | background: rgba(207, 43, 52, 0.09); |
| #516 | } |
| #517 | |
| #518 | .narrative-row i { |
| #519 | width: 24px; |
| #520 | height: 24px; |
| #521 | border: 1px solid color-mix(in srgb, var(--seat-color, var(--state-color)) 72%, rgba(255,255,255,0.08)); |
| #522 | border-radius: 50%; |
| #523 | background: color-mix(in srgb, var(--seat-color, var(--state-color)) 25%, transparent); |
| #524 | box-shadow: 0 0 16px color-mix(in srgb, var(--seat-color, var(--state-color)) 38%, transparent); |
| #525 | } |
| #526 | |
| #527 | .narrative-row.live i { |
| #528 | background: #53f27e; |
| #529 | box-shadow: 0 0 14px #53f27e; |
| #530 | } |
| #531 | |
| #532 | .narrative-row.warn i { |
| #533 | background: #cf2b34; |
| #534 | box-shadow: 0 0 14px rgba(207, 43, 52, 0.72); |
| #535 | } |
| #536 | |
| #537 | .narrative-row div { |
| #538 | min-width: 0; |
| #539 | } |
| #540 | |
| #541 | .narrative-row strong, |
| #542 | .narrative-row span { |
| #543 | display: block; |
| #544 | } |
| #545 | |
| #546 | .narrative-row strong { |
| #547 | color: color-mix(in srgb, var(--seat-color, var(--state-color)) 68%, var(--text-1)); |
| #548 | font-size: 12px; |
| #549 | } |
| #550 | |
| #551 | .narrative-row span, |
| #552 | .narrative-row em { |
| #553 | color: var(--text-3); |
| #554 | font-size: 11px; |
| #555 | font-style: normal; |
| #556 | } |
| #557 | |
| #558 | .narrative-row span { |
| #559 | overflow-wrap: anywhere; |
| #560 | } |
| #561 | |
| #562 | .narrative-row em { |
| #563 | white-space: nowrap; |
| #564 | } |
| #565 | |
| #566 | .ops-log-row { |
| #567 | border: 1px solid rgba(217, 177, 95, 0.12); |
| #568 | border-radius: 15px; |
| #569 | background: rgba(255, 255, 255, 0.028); |
| #570 | overflow: hidden; |
| #571 | } |
| #572 | |
| #573 | .ops-log-row[open] { |
| #574 | border-color: color-mix(in srgb, var(--seat-color, var(--state-color)) 38%, rgba(217, 177, 95, 0.14)); |
| #575 | background: color-mix(in srgb, var(--seat-color, var(--state-color)) 8%, rgba(255, 255, 255, 0.028)); |
| #576 | } |
| #577 | |
| #578 | .ops-log-row.live { |
| #579 | background: color-mix(in srgb, var(--seat-color, var(--state-color)) 10%, rgba(255,255,255,0.025)); |
| #580 | } |
| #581 | |
| #582 | .ops-log-row.warn { |
| #583 | background: rgba(207, 43, 52, 0.09); |
| #584 | border-color: rgba(207, 43, 52, 0.25); |
| #585 | } |
| #586 | |
| #587 | .ops-log-row summary { |
| #588 | display: grid; |
| #589 | grid-template-columns: 28px minmax(0, 1fr) auto; |
| #590 | align-items: center; |
| #591 | gap: 9px; |
| #592 | min-height: 45px; |
| #593 | padding: 8px 10px; |
| #594 | cursor: pointer; |
| #595 | list-style: none; |
| #596 | } |
| #597 | |
| #598 | .ops-log-row summary::-webkit-details-marker { |
| #599 | display: none; |
| #600 | } |
| #601 | |
| #602 | .ops-log-row summary i { |
| #603 | width: 24px; |
| #604 | height: 24px; |
| #605 | border: 1px solid color-mix(in srgb, var(--seat-color, var(--state-color)) 72%, rgba(255,255,255,0.08)); |
| #606 | border-radius: 999px; |
| #607 | display: block; |
| #608 | box-shadow: 0 0 14px color-mix(in srgb, var(--seat-color, var(--state-color)) 26%, transparent); |
| #609 | } |
| #610 | |
| #611 | .ops-log-row.live summary i { |
| #612 | background: #53f27e; |
| #613 | box-shadow: 0 0 14px #53f27e; |
| #614 | } |
| #615 | |
| #616 | .ops-log-row.warn summary i { |
| #617 | background: #cf2b34; |
| #618 | box-shadow: 0 0 14px rgba(207, 43, 52, 0.72); |
| #619 | } |
| #620 | |
| #621 | .ops-log-row summary div { |
| #622 | min-width: 0; |
| #623 | } |
| #624 | |
| #625 | .ops-log-row strong, |
| #626 | .ops-log-row span { |
| #627 | display: block; |
| #628 | } |
| #629 | |
| #630 | .ops-log-row strong { |
| #631 | color: color-mix(in srgb, var(--seat-color, var(--state-color)) 68%, var(--text-1)); |
| #632 | font-size: 12px; |
| #633 | } |
| #634 | |
| #635 | .ops-log-row strong small { |
| #636 | color: var(--gold-2); |
| #637 | font-size: 10px; |
| #638 | margin-left: 4px; |
| #639 | } |
| #640 | |
| #641 | .ops-log-row span, |
| #642 | .ops-log-row em { |
| #643 | color: var(--text-3); |
| #644 | font-size: 11px; |
| #645 | font-style: normal; |
| #646 | } |
| #647 | |
| #648 | .ops-log-row span { |
| #649 | overflow-wrap: anywhere; |
| #650 | } |
| #651 | |
| #652 | .ops-log-row em { |
| #653 | white-space: nowrap; |
| #654 | } |
| #655 | |
| #656 | .ops-log-row pre, |
| #657 | .system-log-row pre { |
| #658 | max-height: 230px; |
| #659 | overflow: auto; |
| #660 | margin: 0; |
| #661 | padding: 10px 12px 12px 47px; |
| #662 | border-top: 1px solid rgba(217, 177, 95, 0.1); |
| #663 | color: #b9d6ff; |
| #664 | background: rgba(0, 0, 0, 0.24); |
| #665 | font-size: 10px; |
| #666 | line-height: 1.55; |
| #667 | white-space: pre-wrap; |
| #668 | overflow-wrap: anywhere; |
| #669 | user-select: text; |
| #670 | } |
| #671 | |
| #672 | .approval-panel :is(.approval-card, article) { |
| #673 | max-width: 100%; |
| #674 | } |
| #675 | |
| #676 | .approval-card-face { |
| #677 | display: grid; |
| #678 | gap: 12px; |
| #679 | } |
| #680 | |
| #681 | .approval-card-title { |
| #682 | display: block; |
| #683 | line-height: 1.35; |
| #684 | } |
| #685 | |
| #686 | .approval-card-actions { |
| #687 | display: grid !important; |
| #688 | grid-template-columns: repeat(3, minmax(0, 1fr)); |
| #689 | width: 100%; |
| #690 | } |
| #691 | |
| #692 | .approval-card-actions button { |
| #693 | justify-content: center; |
| #694 | min-width: 0; |
| #695 | white-space: nowrap; |
| #696 | } |
| #697 | |
| #698 | .site-status-panel ul { |
| #699 | display: grid; |
| #700 | gap: 10px; |
| #701 | margin: 0; |
| #702 | padding: 0; |
| #703 | list-style: none; |
| #704 | } |
| #705 | |
| #706 | .site-status-panel li { |
| #707 | display: grid; |
| #708 | grid-template-columns: 8px minmax(0, 1fr) auto; |
| #709 | align-items: center; |
| #710 | gap: 9px; |
| #711 | color: var(--text-2); |
| #712 | font-size: 12px; |
| #713 | } |
| #714 | |
| #715 | .site-status-panel li span { |
| #716 | width: 8px; |
| #717 | height: 8px; |
| #718 | border-radius: 50%; |
| #719 | background: #53f27e; |
| #720 | box-shadow: 0 0 12px #53f27e; |
| #721 | } |
| #722 | |
| #723 | .site-status-panel li.down span { |
| #724 | background: #cf2b34; |
| #725 | box-shadow: 0 0 12px rgba(207, 43, 52, 0.72); |
| #726 | } |
| #727 | |
| #728 | .site-status-panel li strong { |
| #729 | min-width: 0; |
| #730 | overflow: hidden; |
| #731 | color: var(--text-1); |
| #732 | font-size: 12px; |
| #733 | font-weight: 700; |
| #734 | text-overflow: ellipsis; |
| #735 | white-space: nowrap; |
| #736 | } |
| #737 | |
| #738 | .site-status-panel li em { |
| #739 | color: var(--text-3); |
| #740 | font-size: 10px; |
| #741 | font-style: normal; |
| #742 | text-transform: uppercase; |
| #743 | white-space: nowrap; |
| #744 | } |
| #745 | |
| #746 | .site-status-panel li.down em { |
| #747 | color: #ff9a9a; |
| #748 | } |
| #749 | |
| #750 | .status-down-summary { |
| #751 | margin-top: 10px; |
| #752 | color: #ffb3b3; |
| #753 | font-size: 11px; |
| #754 | line-height: 1.45; |
| #755 | } |
| #756 | |
| #757 | .full-logs-button { |
| #758 | display: block; |
| #759 | margin-top: 16px; |
| #760 | border: 1px solid rgba(217, 177, 95, 0.22); |
| #761 | border-radius: 12px; |
| #762 | color: var(--gold-2); |
| #763 | font-size: 11px; |
| #764 | letter-spacing: 0.18em; |
| #765 | padding: 10px; |
| #766 | text-align: center; |
| #767 | text-transform: uppercase; |
| #768 | } |
| #769 | |
| #770 | .osv4-chamber-card { |
| #771 | position: relative; |
| #772 | overflow: hidden; |
| #773 | min-height: 720px; |
| #774 | padding: 18px; |
| #775 | background: |
| #776 | radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--state-color) 26%, transparent), transparent 19rem), |
| #777 | radial-gradient(ellipse at 50% 78%, rgba(217, 177, 95, 0.16), transparent 31rem), |
| #778 | rgba(3, 8, 13, 0.72); |
| #779 | } |
| #780 | |
| #781 | .chamber-orbit { |
| #782 | position: relative; |
| #783 | min-height: 650px; |
| #784 | isolation: isolate; |
| #785 | } |
| #786 | |
| #787 | .council-glb-stage { |
| #788 | position: absolute; |
| #789 | inset: -24px -10px 0; |
| #790 | z-index: 6; |
| #791 | pointer-events: none; |
| #792 | filter: |
| #793 | drop-shadow(0 0 28px color-mix(in srgb, var(--state-color) 32%, transparent)) |
| #794 | saturate(1.08); |
| #795 | } |
| #796 | |
| #797 | .council-glb-stage canvas { |
| #798 | display: block; |
| #799 | width: 100%; |
| #800 | height: 100%; |
| #801 | } |
| #802 | |
| #803 | .chamber-starfield, |
| #804 | .chamber-floor-glyph { |
| #805 | position: absolute; |
| #806 | pointer-events: none; |
| #807 | inset: 0; |
| #808 | } |
| #809 | |
| #810 | .chamber-starfield { |
| #811 | opacity: 0.44; |
| #812 | background: |
| #813 | radial-gradient(circle at 18% 30%, rgba(255,255,255,0.5) 0 1px, transparent 1.6px), |
| #814 | radial-gradient(circle at 64% 22%, rgba(255,255,255,0.35) 0 1px, transparent 1.4px), |
| #815 | radial-gradient(circle at 78% 68%, rgba(125,165,216,0.5) 0 1px, transparent 1.5px); |
| #816 | background-size: 170px 190px, 230px 210px, 150px 170px; |
| #817 | } |
| #818 | |
| #819 | .chamber-floor-glyph { |
| #820 | left: 50%; |
| #821 | top: 52%; |
| #822 | width: min(92%, 980px); |
| #823 | height: min(58%, 430px); |
| #824 | transform: translate(-50%, -12%) perspective(740px) rotateX(62deg); |
| #825 | border: 1px solid rgba(217, 177, 95, 0.32); |
| #826 | border-radius: 50%; |
| #827 | background: |
| #828 | repeating-radial-gradient(ellipse, transparent 0 34px, rgba(217,177,95,0.16) 35px 36px), |
| #829 | conic-gradient(from 0deg, transparent 0 11deg, rgba(217,177,95,0.2) 12deg 13deg, transparent 14deg 38deg); |
| #830 | box-shadow: |
| #831 | 0 0 70px color-mix(in srgb, var(--state-color) 27%, transparent), |
| #832 | inset 0 0 70px rgba(217, 177, 95, 0.09); |
| #833 | animation: chamber-glyph-pulse 5.5s ease-in-out infinite; |
| #834 | } |
| #835 | |
| #836 | .council-character { |
| #837 | position: absolute; |
| #838 | left: var(--x); |
| #839 | top: var(--y); |
| #840 | z-index: var(--z); |
| #841 | width: clamp(92px, 10vw, 164px); |
| #842 | border: 0; |
| #843 | background: transparent; |
| #844 | color: var(--text-1); |
| #845 | cursor: pointer; |
| #846 | transform: translate(-50%, -50%) scale(var(--scale)); |
| #847 | transform-origin: 50% 76%; |
| #848 | transition: filter 220ms ease, opacity 220ms ease, transform 240ms ease; |
| #849 | animation: chamber-float 5.8s ease-in-out infinite; |
| #850 | animation-delay: calc(var(--z) * -0.25s); |
| #851 | } |
| #852 | |
| #853 | .council-character.glb-hotspot { |
| #854 | z-index: calc(var(--z) + 24); |
| #855 | width: clamp(142px, 14vw, 230px); |
| #856 | height: clamp(210px, 22vw, 350px); |
| #857 | border-radius: 48%; |
| #858 | outline: 0; |
| #859 | } |
| #860 | |
| #861 | .council-character.glb-hotspot::before { |
| #862 | content: ''; |
| #863 | position: absolute; |
| #864 | inset: 9% 15% 17%; |
| #865 | border: 1px solid transparent; |
| #866 | border-radius: 50%; |
| #867 | transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; |
| #868 | } |
| #869 | |
| #870 | .council-character.glb-hotspot:hover::before, |
| #871 | .council-character.glb-hotspot:focus-visible::before, |
| #872 | .council-character.glb-hotspot.active::before { |
| #873 | border-color: color-mix(in srgb, var(--seat-color) 48%, transparent); |
| #874 | background: radial-gradient(circle, color-mix(in srgb, var(--seat-color) 10%, transparent), transparent 68%); |
| #875 | box-shadow: 0 0 34px color-mix(in srgb, var(--seat-color) 34%, transparent); |
| #876 | } |
| #877 | |
| #878 | .council-character img { |
| #879 | display: block; |
| #880 | width: 100%; |
| #881 | height: auto; |
| #882 | filter: |
| #883 | drop-shadow(0 0 14px color-mix(in srgb, var(--seat-color) 62%, transparent)) |
| #884 | drop-shadow(0 24px 30px rgba(0, 0, 0, 0.56)); |
| #885 | } |
| #886 | |
| #887 | .council-character:not(.active) { |
| #888 | opacity: 0.5; |
| #889 | filter: saturate(0.48) brightness(0.78); |
| #890 | } |
| #891 | |
| #892 | .council-character:hover, |
| #893 | .council-character:focus-visible, |
| #894 | .council-character.active { |
| #895 | opacity: 1; |
| #896 | filter: saturate(1.18) brightness(1.08); |
| #897 | transform: translate(-50%, -52%) scale(calc(var(--scale) * 1.06)); |
| #898 | z-index: 20; |
| #899 | } |
| #900 | |
| #901 | .council-character.seat-embodied { |
| #902 | width: clamp(124px, 13vw, 214px); |
| #903 | height: clamp(230px, 26vw, 410px); |
| #904 | } |
| #905 | |
| #906 | .council-character.seat-embodied.active { |
| #907 | transform: translate(-50%, -49%) scale(calc(var(--scale) * 1.03)); |
| #908 | } |
| #909 | |
| #910 | .character-aura { |
| #911 | position: absolute; |
| #912 | left: 50%; |
| #913 | bottom: 8%; |
| #914 | z-index: -1; |
| #915 | width: 86%; |
| #916 | aspect-ratio: 1; |
| #917 | transform: translateX(-50%) rotateX(68deg); |
| #918 | border-radius: 50%; |
| #919 | background: radial-gradient(circle, color-mix(in srgb, var(--seat-color) 32%, transparent), transparent 67%); |
| #920 | box-shadow: 0 0 42px color-mix(in srgb, var(--seat-color) 36%, transparent); |
| #921 | } |
| #922 | |
| #923 | .character-label { |
| #924 | position: absolute; |
| #925 | left: 50%; |
| #926 | bottom: -18px; |
| #927 | width: 150%; |
| #928 | display: grid; |
| #929 | justify-items: center; |
| #930 | gap: 1px; |
| #931 | margin-top: -6px; |
| #932 | text-align: center; |
| #933 | transform: translateX(-50%); |
| #934 | text-shadow: 0 2px 10px rgba(0,0,0,0.9); |
| #935 | } |
| #936 | |
| #937 | .character-label i, |
| #938 | .character-label em { |
| #939 | color: color-mix(in srgb, var(--seat-color) 68%, var(--gold-2)); |
| #940 | font-size: 9px; |
| #941 | font-style: normal; |
| #942 | font-weight: 800; |
| #943 | letter-spacing: 0.12em; |
| #944 | text-transform: uppercase; |
| #945 | } |
| #946 | |
| #947 | .character-label strong { |
| #948 | color: var(--text-1); |
| #949 | font-family: var(--font-serif), Georgia, serif; |
| #950 | font-size: clamp(0.92rem, 1.28vw, 1.42rem); |
| #951 | letter-spacing: 0.05em; |
| #952 | text-transform: uppercase; |
| #953 | } |
| #954 | |
| #955 | .character-label em { |
| #956 | font-size: 8px; |
| #957 | letter-spacing: 0.16em; |
| #958 | } |
| #959 | |
| #960 | .chamber-side-arrow { |
| #961 | position: absolute; |
| #962 | top: 50%; |
| #963 | z-index: 42; |
| #964 | display: grid; |
| #965 | place-items: center; |
| #966 | width: clamp(44px, 4.2vw, 62px); |
| #967 | height: clamp(86px, 9vw, 132px); |
| #968 | transform: translateY(-50%); |
| #969 | border: 1px solid rgba(217, 177, 95, 0.24); |
| #970 | border-radius: 999px; |
| #971 | background: |
| #972 | radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--state-color) 18%, transparent), transparent 52%), |
| #973 | rgba(2, 4, 7, 0.72); |
| #974 | color: var(--gold-1); |
| #975 | box-shadow: 0 18px 50px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.08); |
| #976 | cursor: pointer; |
| #977 | transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease; |
| #978 | } |
| #979 | |
| #980 | .chamber-side-arrow-left { |
| #981 | left: clamp(10px, 1.6vw, 24px); |
| #982 | } |
| #983 | |
| #984 | .chamber-side-arrow-right { |
| #985 | right: clamp(10px, 1.6vw, 24px); |
| #986 | } |
| #987 | |
| #988 | .chamber-side-arrow:hover, |
| #989 | .chamber-side-arrow:focus-visible { |
| #990 | border-color: rgba(217, 177, 95, 0.48); |
| #991 | background: |
| #992 | radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--state-color) 28%, transparent), transparent 58%), |
| #993 | rgba(9, 12, 17, 0.88); |
| #994 | box-shadow: 0 0 34px color-mix(in srgb, var(--state-color) 24%, transparent), 0 18px 50px rgba(0,0,0,0.38); |
| #995 | transform: translateY(-50%) scale(1.04); |
| #996 | } |
| #997 | |
| #998 | .selected-chamber-panel { |
| #999 | padding: 18px; |
| #1000 | } |
| #1001 | |
| #1002 | .selected-chamber-heading { |
| #1003 | display: flex; |
| #1004 | align-items: center; |
| #1005 | justify-content: space-between; |
| #1006 | gap: 14px; |
| #1007 | margin-bottom: 14px; |
| #1008 | } |
| #1009 | |
| #1010 | .chamber-heading-actions { |
| #1011 | display: flex; |
| #1012 | flex-wrap: wrap; |
| #1013 | justify-content: flex-end; |
| #1014 | gap: 8px; |
| #1015 | } |
| #1016 | |
| #1017 | .selected-chamber-heading strong { |
| #1018 | display: block; |
| #1019 | margin-top: 4px; |
| #1020 | color: var(--text-2); |
| #1021 | font-size: 13px; |
| #1022 | letter-spacing: 0.12em; |
| #1023 | text-transform: uppercase; |
| #1024 | } |
| #1025 | |
| #1026 | .voice-mode-button { |
| #1027 | display: inline-flex; |
| #1028 | align-items: center; |
| #1029 | gap: 8px; |
| #1030 | color: var(--gold-2); |
| #1031 | } |
| #1032 | |
| #1033 | .v4-system-logs { |
| #1034 | display: grid; |
| #1035 | gap: 8px; |
| #1036 | max-height: 260px; |
| #1037 | margin-top: 12px; |
| #1038 | overflow: auto; |
| #1039 | } |
| #1040 | |
| #1041 | .v4-system-logs article { |
| #1042 | display: grid; |
| #1043 | grid-template-columns: minmax(110px, 0.34fr) minmax(0, 1fr); |
| #1044 | gap: 10px; |
| #1045 | align-items: start; |
| #1046 | border: 1px solid rgba(125,165,216,0.12); |
| #1047 | border-radius: 12px; |
| #1048 | background: rgba(125,165,216,0.045); |
| #1049 | padding: 8px 10px; |
| #1050 | } |
| #1051 | |
| #1052 | .v4-system-logs span { |
| #1053 | color: var(--gold-2); |
| #1054 | font-size: 9px; |
| #1055 | font-weight: 800; |
| #1056 | letter-spacing: 0.12em; |
| #1057 | text-transform: uppercase; |
| #1058 | } |
| #1059 | |
| #1060 | .v4-system-logs strong { |
| #1061 | color: var(--text-2); |
| #1062 | overflow-wrap: anywhere; |
| #1063 | white-space: normal; |
| #1064 | font-size: 12px; |
| #1065 | line-height: 1.4; |
| #1066 | } |
| #1067 | |
| #1068 | .system-log-row { |
| #1069 | border: 1px solid rgba(125,165,216,0.12); |
| #1070 | border-radius: 12px; |
| #1071 | background: rgba(125,165,216,0.045); |
| #1072 | overflow: hidden; |
| #1073 | } |
| #1074 | |
| #1075 | .system-log-row summary { |
| #1076 | display: grid; |
| #1077 | grid-template-columns: minmax(110px, 0.34fr) minmax(0, 1fr); |
| #1078 | gap: 10px; |
| #1079 | align-items: start; |
| #1080 | padding: 8px 10px; |
| #1081 | cursor: pointer; |
| #1082 | list-style: none; |
| #1083 | } |
| #1084 | |
| #1085 | .system-log-row summary::-webkit-details-marker { |
| #1086 | display: none; |
| #1087 | } |
| #1088 | |
| #1089 | .system-log-row span { |
| #1090 | color: var(--gold-2); |
| #1091 | font-size: 9px; |
| #1092 | font-weight: 800; |
| #1093 | letter-spacing: 0.12em; |
| #1094 | text-transform: uppercase; |
| #1095 | } |
| #1096 | |
| #1097 | .system-log-row strong { |
| #1098 | color: var(--text-2); |
| #1099 | overflow-wrap: anywhere; |
| #1100 | white-space: normal; |
| #1101 | font-size: 12px; |
| #1102 | line-height: 1.4; |
| #1103 | } |
| #1104 | |
| #1105 | .chamber-panel-grid { |
| #1106 | display: grid; |
| #1107 | grid-template-columns: repeat(2, minmax(0, 1fr)); |
| #1108 | gap: 16px; |
| #1109 | } |
| #1110 | |
| #1111 | .chamber-panel-grid article { |
| #1112 | min-height: 230px; |
| #1113 | border: 1px solid rgba(255,255,255,0.07); |
| #1114 | border-radius: 18px; |
| #1115 | background: rgba(0, 0, 0, 0.22); |
| #1116 | padding: 14px; |
| #1117 | } |
| #1118 | |
| #1119 | .chamber-panel-grid ul { |
| #1120 | display: grid; |
| #1121 | gap: 8px; |
| #1122 | margin: 12px 0 0; |
| #1123 | padding-left: 17px; |
| #1124 | color: var(--text-2); |
| #1125 | font-size: 13px; |
| #1126 | } |
| #1127 | |
| #1128 | .chamber-panel-grid p { |
| #1129 | margin-top: 12px; |
| #1130 | color: var(--text-2); |
| #1131 | font-size: 13px; |
| #1132 | line-height: 1.6; |
| #1133 | } |
| #1134 | |
| #1135 | .memory-vault-chamber { |
| #1136 | display: grid; |
| #1137 | grid-template-columns: minmax(0, 1fr); |
| #1138 | gap: 16px; |
| #1139 | } |
| #1140 | |
| #1141 | .memory-vault-main, |
| #1142 | .memory-vault-side { |
| #1143 | border: 1px solid rgba(255,255,255,0.07); |
| #1144 | border-radius: 20px; |
| #1145 | background: rgba(0, 0, 0, 0.24); |
| #1146 | padding: 16px; |
| #1147 | } |
| #1148 | |
| #1149 | .memory-vault-heading { |
| #1150 | display: grid; |
| #1151 | gap: 4px; |
| #1152 | margin-bottom: 12px; |
| #1153 | } |
| #1154 | |
| #1155 | .memory-vault-heading span, |
| #1156 | .memory-vault-side > span { |
| #1157 | color: var(--gold-2); |
| #1158 | font-size: 11px; |
| #1159 | font-weight: 800; |
| #1160 | letter-spacing: 0.16em; |
| #1161 | text-transform: uppercase; |
| #1162 | } |
| #1163 | |
| #1164 | .memory-vault-heading strong { |
| #1165 | color: var(--text-1); |
| #1166 | font-family: var(--font-serif), Georgia, serif; |
| #1167 | font-size: clamp(1.35rem, 2vw, 2.1rem); |
| #1168 | } |
| #1169 | |
| #1170 | .memory-vault-heading em { |
| #1171 | color: var(--text-3); |
| #1172 | font-size: 12px; |
| #1173 | font-style: normal; |
| #1174 | } |
| #1175 | |
| #1176 | .memory-vault-main input, |
| #1177 | .memory-vault-side input { |
| #1178 | width: 100%; |
| #1179 | margin-bottom: 12px; |
| #1180 | border: 1px solid color-mix(in srgb, var(--state-color) 18%, rgba(255,255,255,0.08)); |
| #1181 | border-radius: 14px; |
| #1182 | background: rgba(0,0,0,0.28); |
| #1183 | color: var(--text-1); |
| #1184 | outline: none; |
| #1185 | padding: 11px 12px; |
| #1186 | } |
| #1187 | |
| #1188 | .memory-vault-main .vault-graph-3d-shell { |
| #1189 | margin: 0; |
| #1190 | border-radius: 18px; |
| #1191 | } |
| #1192 | |
| #1193 | .memory-vault-main .vault-graph-3d-frame, |
| #1194 | .memory-vault-main .vault-graph-loading { |
| #1195 | height: clamp(520px, 52vh, 720px); |
| #1196 | } |
| #1197 | |
| #1198 | .memory-vault-side .history-list { |
| #1199 | max-height: 260px; |
| #1200 | overflow: auto; |
| #1201 | } |
| #1202 | |
| #1203 | .quick-action-grid { |
| #1204 | display: grid; |
| #1205 | gap: 8px; |
| #1206 | margin-top: 12px; |
| #1207 | } |
| #1208 | |
| #1209 | .quick-action-grid button, |
| #1210 | .input-mode-tabs button { |
| #1211 | border: 1px solid rgba(255,255,255,0.08); |
| #1212 | border-radius: 12px; |
| #1213 | background: rgba(0,0,0,0.22); |
| #1214 | color: var(--text-2); |
| #1215 | font-size: 12px; |
| #1216 | padding: 9px 10px; |
| #1217 | text-align: left; |
| #1218 | } |
| #1219 | |
| #1220 | .quick-action-grid button:hover, |
| #1221 | .input-mode-tabs button.active { |
| #1222 | border-color: var(--state-color); |
| #1223 | color: var(--text-1); |
| #1224 | background: color-mix(in srgb, var(--state-color) 14%, rgba(0,0,0,0.25)); |
| #1225 | } |
| #1226 | |
| #1227 | .conversation-portal { |
| #1228 | min-height: 620px; |
| #1229 | } |
| #1230 | |
| #1231 | .conversation-thread { |
| #1232 | display: grid; |
| #1233 | gap: 10px; |
| #1234 | max-height: 450px; |
| #1235 | overflow: auto; |
| #1236 | padding-right: 4px; |
| #1237 | } |
| #1238 | |
| #1239 | .conversation-council-message { |
| #1240 | border: 1px solid rgba(255,255,255,0.08); |
| #1241 | border-radius: 16px; |
| #1242 | background: rgba(255,255,255,0.03); |
| #1243 | padding: 12px; |
| #1244 | } |
| #1245 | |
| #1246 | .conversation-council-message header { |
| #1247 | display: flex; |
| #1248 | justify-content: space-between; |
| #1249 | gap: 12px; |
| #1250 | color: var(--text-3); |
| #1251 | font-size: 11px; |
| #1252 | } |
| #1253 | |
| #1254 | .conversation-council-message p { |
| #1255 | margin-top: 8px; |
| #1256 | color: var(--text-2); |
| #1257 | font-size: 12px; |
| #1258 | line-height: 1.62; |
| #1259 | } |
| #1260 | |
| #1261 | .input-mode-tabs { |
| #1262 | display: grid; |
| #1263 | grid-template-columns: repeat(4, minmax(0, 1fr)); |
| #1264 | gap: 6px; |
| #1265 | margin: 14px 0 10px; |
| #1266 | } |
| #1267 | |
| #1268 | .compact-memory { |
| #1269 | grid-template-columns: 1fr; |
| #1270 | } |
| #1271 | |
| #1272 | .compact-memory .vault-graph-3d-frame { |
| #1273 | min-height: 220px; |
| #1274 | } |
| #1275 | |
| #1276 | @keyframes chamber-float { |
| #1277 | 0%, 100% { margin-top: 0; } |
| #1278 | 50% { margin-top: -10px; } |
| #1279 | } |
| #1280 | |
| #1281 | @keyframes chamber-glyph-pulse { |
| #1282 | 0%, 100% { opacity: 0.64; transform: translate(-50%, -12%) perspective(740px) rotateX(62deg) scale(0.985); } |
| #1283 | 50% { opacity: 0.95; transform: translate(-50%, -12%) perspective(740px) rotateX(62deg) scale(1.015); } |
| #1284 | } |
| #1285 | |
| #1286 | @media (max-width: 1420px) { |
| #1287 | .osv4-topbar, |
| #1288 | .osv4-main-grid, |
| #1289 | .memory-vault-chamber { |
| #1290 | grid-template-columns: 1fr; |
| #1291 | } |
| #1292 | |
| #1293 | .osv4-operator-strip { |
| #1294 | justify-content: stretch; |
| #1295 | grid-template-columns: repeat(3, minmax(0, 1fr)); |
| #1296 | } |
| #1297 | |
| #1298 | .osv4-chamber-card { |
| #1299 | min-height: 620px; |
| #1300 | } |
| #1301 | } |
| #1302 | |
| #1303 | @media (max-width: 820px) { |
| #1304 | .council-cockpit-shell { |
| #1305 | padding: 10px; |
| #1306 | } |
| #1307 | |
| #1308 | .focus-stats-row, |
| #1309 | .chamber-panel-grid, |
| #1310 | .osv4-operator-strip { |
| #1311 | grid-template-columns: 1fr; |
| #1312 | } |
| #1313 | |
| #1314 | .osv4-chamber-card { |
| #1315 | min-height: 560px; |
| #1316 | } |
| #1317 | |
| #1318 | .council-character { |
| #1319 | width: clamp(70px, 18vw, 112px); |
| #1320 | } |
| #1321 | } |
| #1322 | |
| #1323 | @keyframes presence-breathe { |
| #1324 | 0%, 100% { opacity: 0; transform: scale(0.88); } |
| #1325 | 50% { opacity: 1; transform: scale(1.08); } |
| #1326 | } |
| #1327 | |
| #1328 | /* OS V3 Stage 3: state rooms replace the old body-region navigation. */ |
| #1329 | .state-os-shell { |
| #1330 | --state-color: var(--blue); |
| #1331 | --state-soft: rgba(125, 165, 216, 0.18); |
| #1332 | min-height: 100vh; |
| #1333 | color: var(--text-1); |
| #1334 | background: |
| #1335 | radial-gradient(circle at 50% 10%, color-mix(in srgb, var(--state-color) 18%, transparent), transparent 32rem), |
| #1336 | radial-gradient(circle at 10% 20%, rgba(217, 177, 95, 0.12), transparent 28rem), |
| #1337 | linear-gradient(140deg, #050607 0%, #0b0a09 42%, #050607 100%); |
| #1338 | } |
| #1339 | |
| #1340 | .state-os-header, |
| #1341 | .state-room-hero, |
| #1342 | .state-room-layout, |
| #1343 | .state-bottom-grid { |
| #1344 | width: min(1840px, 100%); |
| #1345 | margin-inline: auto; |
| #1346 | } |
| #1347 | |
| #1348 | .state-os-header { |
| #1349 | display: flex; |
| #1350 | align-items: center; |
| #1351 | justify-content: space-between; |
| #1352 | gap: 18px; |
| #1353 | margin-bottom: 20px; |
| #1354 | } |
| #1355 | |
| #1356 | .state-os-title { |
| #1357 | font-family: var(--font-serif), Georgia, serif; |
| #1358 | font-size: clamp(2.6rem, 6vw, 6.5rem); |
| #1359 | line-height: 0.9; |
| #1360 | letter-spacing: -0.05em; |
| #1361 | color: var(--text-1); |
| #1362 | text-shadow: 0 0 34px color-mix(in srgb, var(--state-color) 38%, transparent); |
| #1363 | } |
| #1364 | |
| #1365 | .state-os-header p, |
| #1366 | .state-os-footer { |
| #1367 | color: var(--text-3); |
| #1368 | font-size: 12px; |
| #1369 | } |
| #1370 | |
| #1371 | .state-os-actions { |
| #1372 | display: flex; |
| #1373 | align-items: center; |
| #1374 | gap: 10px; |
| #1375 | } |
| #1376 | |
| #1377 | .state-room-hero { |
| #1378 | display: grid; |
| #1379 | grid-template-columns: minmax(0, 1fr) minmax(250px, 360px); |
| #1380 | gap: 18px; |
| #1381 | align-items: stretch; |
| #1382 | margin-bottom: 18px; |
| #1383 | } |
| #1384 | |
| #1385 | .state-room-copy, |
| #1386 | .capacity-mini, |
| #1387 | .character-selector-card, |
| #1388 | .state-primary-room, |
| #1389 | .state-side-column > section, |
| #1390 | .state-bottom-grid > section, |
| #1391 | .state-room-panel { |
| #1392 | border: 1px solid color-mix(in srgb, var(--state-color) 22%, rgba(255,255,255,0.06)); |
| #1393 | background: |
| #1394 | linear-gradient(180deg, color-mix(in srgb, var(--state-color) 9%, transparent), transparent 48%), |
| #1395 | rgba(7, 8, 10, 0.72); |
| #1396 | border-radius: 28px; |
| #1397 | box-shadow: 0 24px 80px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.04); |
| #1398 | backdrop-filter: blur(18px); |
| #1399 | } |
| #1400 | |
| #1401 | .state-room-copy { |
| #1402 | padding: clamp(24px, 4vw, 46px); |
| #1403 | } |
| #1404 | |
| #1405 | .state-room-copy span, |
| #1406 | .room-heading span, |
| #1407 | .capacity-mini span, |
| #1408 | .character-selector-controls span { |
| #1409 | color: var(--state-color); |
| #1410 | font-size: 11px; |
| #1411 | font-weight: 700; |
| #1412 | letter-spacing: 0.16em; |
| #1413 | text-transform: uppercase; |
| #1414 | } |
| #1415 | |
| #1416 | .state-room-copy h2 { |
| #1417 | max-width: 980px; |
| #1418 | margin-top: 10px; |
| #1419 | font-family: var(--font-serif), Georgia, serif; |
| #1420 | font-size: clamp(2rem, 3.8vw, 4.25rem); |
| #1421 | line-height: 1.02; |
| #1422 | letter-spacing: -0.035em; |
| #1423 | } |
| #1424 | |
| #1425 | .state-room-copy p { |
| #1426 | margin-top: 14px; |
| #1427 | max-width: 760px; |
| #1428 | color: var(--text-2); |
| #1429 | line-height: 1.8; |
| #1430 | } |
| #1431 | |
| #1432 | .state-support-stats { |
| #1433 | display: flex; |
| #1434 | flex-wrap: wrap; |
| #1435 | gap: 10px; |
| #1436 | margin-top: 24px; |
| #1437 | } |
| #1438 | |
| #1439 | .state-support-stats b, |
| #1440 | .tool-feed-meta, |
| #1441 | .manifestation-status { |
| #1442 | border: 1px solid color-mix(in srgb, var(--state-color) 20%, rgba(255,255,255,0.07)); |
| #1443 | border-radius: 999px; |
| #1444 | background: color-mix(in srgb, var(--state-color) 9%, rgba(0,0,0,0.42)); |
| #1445 | color: var(--text-2); |
| #1446 | font-size: 11px; |
| #1447 | padding: 7px 10px; |
| #1448 | } |
| #1449 | |
| #1450 | .capacity-mini { |
| #1451 | display: grid; |
| #1452 | align-content: center; |
| #1453 | gap: 8px; |
| #1454 | padding: 24px; |
| #1455 | } |
| #1456 | |
| #1457 | .capacity-mini strong { |
| #1458 | font-family: var(--font-serif), Georgia, serif; |
| #1459 | font-size: 2rem; |
| #1460 | } |
| #1461 | |
| #1462 | .capacity-mini em, |
| #1463 | .character-selector-controls em, |
| #1464 | .room-heading em, |
| #1465 | .state-os-footer { |
| #1466 | color: var(--text-3); |
| #1467 | font-style: normal; |
| #1468 | } |
| #1469 | |
| #1470 | .state-room-layout { |
| #1471 | display: grid; |
| #1472 | grid-template-columns: minmax(280px, 420px) minmax(0, 1fr) minmax(280px, 380px); |
| #1473 | gap: 18px; |
| #1474 | align-items: start; |
| #1475 | } |
| #1476 | |
| #1477 | .character-selector-card { |
| #1478 | position: sticky; |
| #1479 | top: 18px; |
| #1480 | overflow: hidden; |
| #1481 | padding: 16px; |
| #1482 | } |
| #1483 | |
| #1484 | .character-stage { |
| #1485 | position: relative; |
| #1486 | min-height: 520px; |
| #1487 | border-radius: 24px; |
| #1488 | overflow: hidden; |
| #1489 | background: |
| #1490 | radial-gradient(circle at 50% 72%, color-mix(in srgb, var(--state-color) 22%, transparent), transparent 17rem), |
| #1491 | linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.24)); |
| #1492 | } |
| #1493 | |
| #1494 | .state-manifestation { |
| #1495 | position: absolute; |
| #1496 | inset: 0; |
| #1497 | } |
| #1498 | |
| #1499 | .state-manifestation canvas { |
| #1500 | width: 100%; |
| #1501 | height: 100%; |
| #1502 | display: block; |
| #1503 | filter: drop-shadow(0 0 26px color-mix(in srgb, var(--state-color) 28%, transparent)); |
| #1504 | } |
| #1505 | |
| #1506 | .manifestation-floor { |
| #1507 | position: absolute; |
| #1508 | left: 50%; |
| #1509 | bottom: 8%; |
| #1510 | width: 62%; |
| #1511 | aspect-ratio: 1; |
| #1512 | transform: translateX(-50%) rotateX(66deg); |
| #1513 | border: 1px solid color-mix(in srgb, var(--state-color) 44%, transparent); |
| #1514 | border-radius: 50%; |
| #1515 | box-shadow: 0 0 36px color-mix(in srgb, var(--state-color) 28%, transparent), inset 0 0 30px color-mix(in srgb, var(--state-color) 16%, transparent); |
| #1516 | animation: council-floor-pulse 4s ease-in-out infinite; |
| #1517 | } |
| #1518 | |
| #1519 | .manifestation-status { |
| #1520 | position: absolute; |
| #1521 | right: 14px; |
| #1522 | bottom: 14px; |
| #1523 | } |
| #1524 | |
| #1525 | .character-selector-controls { |
| #1526 | display: grid; |
| #1527 | grid-template-columns: 44px minmax(0, 1fr) 44px; |
| #1528 | align-items: center; |
| #1529 | gap: 10px; |
| #1530 | margin-top: 14px; |
| #1531 | } |
| #1532 | |
| #1533 | .character-selector-controls > div { |
| #1534 | display: grid; |
| #1535 | gap: 2px; |
| #1536 | text-align: center; |
| #1537 | } |
| #1538 | |
| #1539 | .character-selector-controls strong { |
| #1540 | font-family: var(--font-serif), Georgia, serif; |
| #1541 | font-size: 1.6rem; |
| #1542 | } |
| #1543 | |
| #1544 | .seat-arrow { |
| #1545 | display: grid; |
| #1546 | place-items: center; |
| #1547 | width: 44px; |
| #1548 | height: 44px; |
| #1549 | border: 1px solid color-mix(in srgb, var(--state-color) 26%, rgba(255,255,255,0.08)); |
| #1550 | border-radius: 999px; |
| #1551 | color: var(--text-1); |
| #1552 | background: color-mix(in srgb, var(--state-color) 8%, rgba(0,0,0,0.34)); |
| #1553 | } |
| #1554 | |
| #1555 | .character-rail { |
| #1556 | display: grid; |
| #1557 | grid-template-columns: repeat(2, minmax(0, 1fr)); |
| #1558 | gap: 8px; |
| #1559 | margin-top: 16px; |
| #1560 | } |
| #1561 | |
| #1562 | .character-rail button { |
| #1563 | border: 1px solid color-mix(in srgb, var(--state-color) 18%, rgba(255,255,255,0.06)); |
| #1564 | border-radius: 16px; |
| #1565 | padding: 11px; |
| #1566 | text-align: left; |
| #1567 | color: var(--text-2); |
| #1568 | background: rgba(255,255,255,0.025); |
| #1569 | transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; |
| #1570 | } |
| #1571 | |
| #1572 | .character-rail button:hover, |
| #1573 | .character-rail button.active { |
| #1574 | transform: translateY(-1px); |
| #1575 | border-color: var(--state-color); |
| #1576 | background: color-mix(in srgb, var(--state-color) 15%, rgba(0,0,0,0.42)); |
| #1577 | } |
| #1578 | |
| #1579 | .character-rail span, |
| #1580 | .character-rail em { |
| #1581 | display: block; |
| #1582 | } |
| #1583 | |
| #1584 | .character-rail span { |
| #1585 | color: var(--text-1); |
| #1586 | font-size: 12px; |
| #1587 | font-weight: 700; |
| #1588 | } |
| #1589 | |
| #1590 | .character-rail em { |
| #1591 | margin-top: 2px; |
| #1592 | color: var(--text-3); |
| #1593 | font-size: 10px; |
| #1594 | font-style: normal; |
| #1595 | letter-spacing: 0.08em; |
| #1596 | text-transform: uppercase; |
| #1597 | } |
| #1598 | |
| #1599 | .state-primary-room, |
| #1600 | .state-side-column { |
| #1601 | display: grid; |
| #1602 | gap: 18px; |
| #1603 | } |
| #1604 | |
| #1605 | .state-room-panel, |
| #1606 | .state-side-column > section, |
| #1607 | .state-bottom-grid > section { |
| #1608 | padding: 18px; |
| #1609 | } |
| #1610 | |
| #1611 | .room-heading { |
| #1612 | display: grid; |
| #1613 | gap: 4px; |
| #1614 | margin-bottom: 16px; |
| #1615 | } |
| #1616 | |
| #1617 | .room-heading strong { |
| #1618 | font-family: var(--font-serif), Georgia, serif; |
| #1619 | font-size: clamp(1.35rem, 2.2vw, 2.35rem); |
| #1620 | line-height: 1.05; |
| #1621 | } |
| #1622 | |
| #1623 | .room-heading.compact strong { |
| #1624 | font-size: 1.08rem; |
| #1625 | } |
| #1626 | |
| #1627 | .conversation-controls, |
| #1628 | .state-input-row, |
| #1629 | .task-composer, |
| #1630 | .scrape-surface-card { |
| #1631 | display: grid; |
| #1632 | gap: 10px; |
| #1633 | } |
| #1634 | |
| #1635 | .glasses-log-panel { |
| #1636 | min-height: 240px; |
| #1637 | } |
| #1638 | |
| #1639 | .live-work-panel { |
| #1640 | min-height: 320px; |
| #1641 | } |
| #1642 | |
| #1643 | .live-work-summary { |
| #1644 | display: grid; |
| #1645 | grid-template-columns: repeat(3, minmax(0, 1fr)); |
| #1646 | gap: 8px; |
| #1647 | } |
| #1648 | |
| #1649 | .live-work-summary article { |
| #1650 | border: 1px solid color-mix(in srgb, var(--state-color) 24%, rgba(255,255,255,0.08)); |
| #1651 | border-radius: 16px; |
| #1652 | background: color-mix(in srgb, var(--state-color) 8%, rgba(0,0,0,0.26)); |
| #1653 | padding: 10px; |
| #1654 | } |
| #1655 | |
| #1656 | .live-work-summary span, |
| #1657 | .live-work-current span, |
| #1658 | .live-work-sources span { |
| #1659 | display: block; |
| #1660 | color: var(--text-3); |
| #1661 | font-size: 10px; |
| #1662 | font-weight: 800; |
| #1663 | letter-spacing: 0.12em; |
| #1664 | text-transform: uppercase; |
| #1665 | } |
| #1666 | |
| #1667 | .live-work-summary strong { |
| #1668 | display: block; |
| #1669 | margin-top: 2px; |
| #1670 | color: var(--text-1); |
| #1671 | font-family: var(--font-serif), Georgia, serif; |
| #1672 | font-size: 1.45rem; |
| #1673 | line-height: 1; |
| #1674 | } |
| #1675 | |
| #1676 | .live-work-current { |
| #1677 | display: grid; |
| #1678 | gap: 5px; |
| #1679 | margin-top: 10px; |
| #1680 | border: 1px solid rgba(255,255,255,0.08); |
| #1681 | border-radius: 16px; |
| #1682 | background: rgba(0,0,0,0.22); |
| #1683 | padding: 11px; |
| #1684 | } |
| #1685 | |
| #1686 | .live-work-current strong { |
| #1687 | color: var(--text-1); |
| #1688 | font-size: 12px; |
| #1689 | line-height: 1.45; |
| #1690 | } |
| #1691 | |
| #1692 | .live-work-current em { |
| #1693 | color: var(--text-4); |
| #1694 | font-size: 11px; |
| #1695 | font-style: normal; |
| #1696 | } |
| #1697 | |
| #1698 | .live-work-list { |
| #1699 | display: grid; |
| #1700 | gap: 8px; |
| #1701 | max-height: 360px; |
| #1702 | overflow: auto; |
| #1703 | padding-right: 2px; |
| #1704 | margin-top: 10px; |
| #1705 | } |
| #1706 | |
| #1707 | .live-work-sources { |
| #1708 | display: grid; |
| #1709 | gap: 6px; |
| #1710 | margin-top: 10px; |
| #1711 | } |
| #1712 | |
| #1713 | .live-work-sources code { |
| #1714 | display: block; |
| #1715 | overflow: hidden; |
| #1716 | text-overflow: ellipsis; |
| #1717 | white-space: nowrap; |
| #1718 | border: 1px solid rgba(255,255,255,0.08); |
| #1719 | border-radius: 999px; |
| #1720 | background: rgba(0,0,0,0.24); |
| #1721 | color: var(--text-3); |
| #1722 | font-size: 10px; |
| #1723 | padding: 6px 9px; |
| #1724 | } |
| #1725 | |
| #1726 | .glasses-log-list { |
| #1727 | display: grid; |
| #1728 | gap: 8px; |
| #1729 | max-height: 320px; |
| #1730 | overflow: auto; |
| #1731 | padding-right: 2px; |
| #1732 | } |
| #1733 | |
| #1734 | .conversation-controls { |
| #1735 | grid-template-columns: minmax(0, 1fr) auto auto; |
| #1736 | align-items: center; |
| #1737 | } |
| #1738 | |
| #1739 | .mastermind-thread-button, |
| #1740 | .mastermind-chip { |
| #1741 | border: 1px solid color-mix(in srgb, var(--state-color) 24%, rgba(255,255,255,0.08)); |
| #1742 | border-radius: 999px; |
| #1743 | background: color-mix(in srgb, var(--state-color) 10%, rgba(0,0,0,0.28)); |
| #1744 | color: var(--text-1); |
| #1745 | font-size: 11px; |
| #1746 | font-weight: 800; |
| #1747 | letter-spacing: 0.08em; |
| #1748 | padding: 8px 11px; |
| #1749 | text-transform: uppercase; |
| #1750 | } |
| #1751 | |
| #1752 | .mastermind-chip { |
| #1753 | margin-top: 10px; |
| #1754 | padding: 6px 10px; |
| #1755 | } |
| #1756 | |
| #1757 | .mastermind-thread-button:disabled, |
| #1758 | .mastermind-chip:disabled { |
| #1759 | cursor: not-allowed; |
| #1760 | opacity: 0.42; |
| #1761 | } |
| #1762 | |
| #1763 | .state-chat-window, |
| #1764 | .latest-response, |
| #1765 | .history-list, |
| #1766 | .capacity-ledger-list, |
| #1767 | .seat-direct-turns, |
| #1768 | .council-readable-transcript { |
| #1769 | max-height: 520px; |
| #1770 | overflow-y: auto; |
| #1771 | padding-right: 4px; |
| #1772 | } |
| #1773 | |
| #1774 | .state-chat-window { |
| #1775 | display: grid; |
| #1776 | gap: 10px; |
| #1777 | min-height: 220px; |
| #1778 | margin: 14px 0; |
| #1779 | } |
| #1780 | |
| #1781 | .state-chat-turn, |
| #1782 | .seat-direct-turn, |
| #1783 | .council-message, |
| #1784 | .capacity-ledger-row { |
| #1785 | border: 1px solid rgba(255,255,255,0.07); |
| #1786 | border-radius: 18px; |
| #1787 | background: rgba(0,0,0,0.24); |
| #1788 | padding: 12px; |
| #1789 | } |
| #1790 | |
| #1791 | .state-chat-turn.user { |
| #1792 | background: color-mix(in srgb, var(--state-color) 10%, rgba(0,0,0,0.26)); |
| #1793 | } |
| #1794 | |
| #1795 | .state-chat-turn header, |
| #1796 | .council-message header, |
| #1797 | .capacity-ledger-row, |
| #1798 | .seat-direct-turn span { |
| #1799 | display: flex; |
| #1800 | justify-content: space-between; |
| #1801 | gap: 12px; |
| #1802 | color: var(--text-3); |
| #1803 | font-size: 11px; |
| #1804 | } |
| #1805 | |
| #1806 | .state-chat-turn p, |
| #1807 | .state-chat-turn div, |
| #1808 | .latest-response, |
| #1809 | .council-message p, |
| #1810 | .seat-direct-turn p { |
| #1811 | color: var(--text-2); |
| #1812 | line-height: 1.65; |
| #1813 | } |
| #1814 | |
| #1815 | .state-input-row { |
| #1816 | grid-template-columns: minmax(0, 1fr) auto; |
| #1817 | } |
| #1818 | |
| #1819 | .state-input-row textarea, |
| #1820 | .task-composer textarea, |
| #1821 | .scrape-surface-card textarea, |
| #1822 | .council-command-panel textarea, |
| #1823 | .memory-grid input, |
| #1824 | .model-select { |
| #1825 | width: 100%; |
| #1826 | border: 1px solid color-mix(in srgb, var(--state-color) 18%, rgba(255,255,255,0.08)); |
| #1827 | border-radius: 16px; |
| #1828 | background: rgba(0,0,0,0.28); |
| #1829 | color: var(--text-1); |
| #1830 | outline: none; |
| #1831 | } |
| #1832 | |
| #1833 | .state-input-row textarea, |
| #1834 | .task-composer textarea, |
| #1835 | .scrape-surface-card textarea, |
| #1836 | .council-command-panel textarea { |
| #1837 | min-height: 92px; |
| #1838 | padding: 12px; |
| #1839 | resize: vertical; |
| #1840 | } |
| #1841 | |
| #1842 | .model-select, |
| #1843 | .memory-grid input { |
| #1844 | padding: 10px 12px; |
| #1845 | } |
| #1846 | |
| #1847 | .freestyle-button { |
| #1848 | display: inline-flex; |
| #1849 | align-items: center; |
| #1850 | justify-content: center; |
| #1851 | gap: 8px; |
| #1852 | border-radius: 16px; |
| #1853 | padding: 10px 12px; |
| #1854 | white-space: nowrap; |
| #1855 | } |
| #1856 | |
| #1857 | .execute-grid, |
| #1858 | .memory-grid, |
| #1859 | .state-bottom-grid { |
| #1860 | display: grid; |
| #1861 | grid-template-columns: repeat(2, minmax(0, 1fr)); |
| #1862 | gap: 14px; |
| #1863 | } |
| #1864 | |
| #1865 | .state-bottom-grid { |
| #1866 | grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(280px, 0.8fr); |
| #1867 | margin-top: 18px; |
| #1868 | } |
| #1869 | |
| #1870 | .execute-grid h3, |
| #1871 | .mini-label { |
| #1872 | margin-bottom: 10px; |
| #1873 | color: var(--state-color); |
| #1874 | font-size: 11px; |
| #1875 | font-weight: 800; |
| #1876 | letter-spacing: 0.12em; |
| #1877 | text-transform: uppercase; |
| #1878 | } |
| #1879 | |
| #1880 | .mini-label { |
| #1881 | display: inline-flex; |
| #1882 | align-items: center; |
| #1883 | gap: 7px; |
| #1884 | } |
| #1885 | |
| #1886 | .history-list { |
| #1887 | display: grid; |
| #1888 | gap: 8px; |
| #1889 | margin-top: 10px; |
| #1890 | } |
| #1891 | |
| #1892 | .history-list button { |
| #1893 | border: 1px solid rgba(255,255,255,0.06); |
| #1894 | border-radius: 14px; |
| #1895 | background: rgba(0,0,0,0.18); |
| #1896 | padding: 10px; |
| #1897 | text-align: left; |
| #1898 | } |
| #1899 | |
| #1900 | .history-list strong, |
| #1901 | .history-list span { |
| #1902 | display: block; |
| #1903 | } |
| #1904 | |
| #1905 | .history-list strong { |
| #1906 | color: var(--text-2); |
| #1907 | font-size: 12px; |
| #1908 | } |
| #1909 | |
| #1910 | .history-list span { |
| #1911 | color: var(--text-4); |
| #1912 | font-size: 10px; |
| #1913 | margin-top: 3px; |
| #1914 | } |
| #1915 | |
| #1916 | .activity-stream-card, |
| #1917 | .task-input-card, |
| #1918 | .scrape-surface-card { |
| #1919 | min-height: 180px; |
| #1920 | } |
| #1921 | |
| #1922 | .tool-feed-meta { |
| #1923 | display: flex; |
| #1924 | justify-content: space-between; |
| #1925 | margin-bottom: 12px; |
| #1926 | } |
| #1927 | |
| #1928 | .council-state-grid { |
| #1929 | display: grid; |
| #1930 | grid-template-columns: 170px minmax(0, 1fr) 300px; |
| #1931 | gap: 14px; |
| #1932 | } |
| #1933 | |
| #1934 | .council-seat-rail { |
| #1935 | display: grid; |
| #1936 | gap: 8px; |
| #1937 | align-content: start; |
| #1938 | } |
| #1939 | |
| #1940 | .council-seat-rail button { |
| #1941 | border: 1px solid rgba(255,255,255,0.07); |
| #1942 | border-radius: 14px; |
| #1943 | padding: 10px; |
| #1944 | text-align: left; |
| #1945 | background: rgba(0,0,0,0.22); |
| #1946 | color: var(--text-2); |
| #1947 | } |
| #1948 | |
| #1949 | .council-seat-rail button.active { |
| #1950 | border-color: var(--state-color); |
| #1951 | background: color-mix(in srgb, var(--state-color) 15%, rgba(0,0,0,0.34)); |
| #1952 | } |
| #1953 | |
| #1954 | .council-seat-rail span, |
| #1955 | .council-seat-rail em { |
| #1956 | display: block; |
| #1957 | } |
| #1958 | |
| #1959 | .council-seat-rail span { |
| #1960 | color: var(--text-1); |
| #1961 | font-weight: 700; |
| #1962 | } |
| #1963 | |
| #1964 | .council-seat-rail em { |
| #1965 | margin-top: 2px; |
| #1966 | color: var(--text-3); |
| #1967 | font-size: 10px; |
| #1968 | font-style: normal; |
| #1969 | } |
| #1970 | |
| #1971 | .council-readable-transcript { |
| #1972 | display: grid; |
| #1973 | gap: 10px; |
| #1974 | } |
| #1975 | |
| #1976 | .council-message footer { |
| #1977 | display: flex; |
| #1978 | flex-wrap: wrap; |
| #1979 | gap: 6px; |
| #1980 | margin-top: 10px; |
| #1981 | } |
| #1982 | |
| #1983 | .council-message footer span { |
| #1984 | border-radius: 999px; |
| #1985 | background: rgba(255,255,255,0.06); |
| #1986 | color: var(--text-3); |
| #1987 | font-size: 10px; |
| #1988 | padding: 4px 7px; |
| #1989 | } |
| #1990 | |
| #1991 | .council-command-panel, |
| #1992 | .seat-direct-box { |
| #1993 | display: grid; |
| #1994 | gap: 10px; |
| #1995 | } |
| #1996 | |
| #1997 | .seat-direct-box { |
| #1998 | margin-top: 10px; |
| #1999 | border-top: 1px solid rgba(255,255,255,0.08); |
| #2000 | padding-top: 12px; |
| #2001 | } |
| #2002 | |
| #2003 | .seat-direct-box span, |
| #2004 | .seat-direct-box em { |
| #2005 | color: var(--text-3); |
| #2006 | font-size: 11px; |
| #2007 | font-style: normal; |
| #2008 | } |
| #2009 | |
| #2010 | .task-composer p, |
| #2011 | .scrape-surface-card p, |
| #2012 | .council-command-panel p { |
| #2013 | color: var(--text-2); |
| #2014 | font-size: 12px; |
| #2015 | line-height: 1.55; |
| #2016 | } |
| #2017 | |
| #2018 | .demo-mask, |
| #2019 | .empty-state { |
| #2020 | border: 1px dashed color-mix(in srgb, var(--state-color) 22%, rgba(255,255,255,0.08)); |
| #2021 | border-radius: 18px; |
| #2022 | background: rgba(0,0,0,0.22); |
| #2023 | color: var(--text-3); |
| #2024 | padding: 14px; |
| #2025 | line-height: 1.6; |
| #2026 | } |
| #2027 | |
| #2028 | .state-os-footer { |
| #2029 | margin: 24px auto 0; |
| #2030 | width: min(1840px, 100%); |
| #2031 | text-align: center; |
| #2032 | } |
| #2033 | |
| #2034 | .approval-brief-grid { |
| #2035 | display: grid; |
| #2036 | grid-template-columns: repeat(3, minmax(0, 1fr)); |
| #2037 | gap: 8px; |
| #2038 | margin-top: 10px; |
| #2039 | } |
| #2040 | |
| #2041 | .approval-brief-grid div { |
| #2042 | display: grid; |
| #2043 | gap: 2px; |
| #2044 | border-left: 1px solid color-mix(in srgb, var(--gold-2) 36%, transparent); |
| #2045 | padding-left: 9px; |
| #2046 | min-width: 0; |
| #2047 | } |
| #2048 | |
| #2049 | .approval-brief-grid span { |
| #2050 | color: var(--text-3); |
| #2051 | font-size: 10px; |
| #2052 | font-weight: 800; |
| #2053 | letter-spacing: 0.12em; |
| #2054 | text-transform: uppercase; |
| #2055 | } |
| #2056 | |
| #2057 | .approval-brief-grid strong { |
| #2058 | color: var(--text-2); |
| #2059 | font-size: 12px; |
| #2060 | font-weight: 500; |
| #2061 | line-height: 1.5; |
| #2062 | overflow-wrap: anywhere; |
| #2063 | } |
| #2064 | |
| #2065 | .approval-brief-grid.compact { |
| #2066 | grid-template-columns: 1fr; |
| #2067 | gap: 7px; |
| #2068 | } |
| #2069 | |
| #2070 | .approval-brief-grid.compact div { |
| #2071 | border-left-color: color-mix(in srgb, var(--gold-2) 28%, transparent); |
| #2072 | } |
| #2073 | |
| #2074 | .approval-brief-grid.compact strong { |
| #2075 | display: -webkit-box; |
| #2076 | -webkit-line-clamp: 3; |
| #2077 | -webkit-box-orient: vertical; |
| #2078 | overflow: hidden; |
| #2079 | } |
| #2080 | |
| #2081 | @keyframes council-floor-pulse { |
| #2082 | 0%, 100% { opacity: 0.38; transform: translateX(-50%) rotateX(66deg) scale(0.98); } |
| #2083 | 50% { opacity: 0.72; transform: translateX(-50%) rotateX(66deg) scale(1.03); } |
| #2084 | } |
| #2085 | |
| #2086 | @media (max-width: 1280px) { |
| #2087 | .state-room-layout, |
| #2088 | .state-bottom-grid, |
| #2089 | .council-state-grid { |
| #2090 | grid-template-columns: 1fr; |
| #2091 | } |
| #2092 | |
| #2093 | .character-selector-card { |
| #2094 | position: relative; |
| #2095 | top: auto; |
| #2096 | } |
| #2097 | |
| #2098 | .character-stage { |
| #2099 | min-height: 440px; |
| #2100 | } |
| #2101 | } |
| #2102 | |
| #2103 | @media (max-width: 760px) { |
| #2104 | .state-os-header, |
| #2105 | .state-room-hero, |
| #2106 | .conversation-controls, |
| #2107 | .state-input-row, |
| #2108 | .execute-grid, |
| #2109 | .memory-grid { |
| #2110 | grid-template-columns: 1fr; |
| #2111 | } |
| #2112 | |
| #2113 | .state-os-header { |
| #2114 | align-items: flex-start; |
| #2115 | } |
| #2116 | |
| #2117 | .character-rail { |
| #2118 | grid-template-columns: 1fr; |
| #2119 | } |
| #2120 | } |
| #2121 | |
| #2122 | @keyframes avatar-breath { |
| #2123 | 0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 22px 34px rgba(0,0,0,0.55)) saturate(1.03) contrast(1.04); } |
| #2124 | 50% { transform: translateY(-4px) scale(1.006); filter: drop-shadow(0 26px 40px rgba(0,0,0,0.6)) saturate(1.07) contrast(1.04); } |
| #2125 | } |
| #2126 | |
| #2127 | @keyframes avatar-aura-breathe { |
| #2128 | 0%, 100% { opacity: 0.34; transform: scale(0.98); } |
| #2129 | 50% { opacity: 0.58; transform: scale(1.02); } |
| #2130 | } |
| #2131 | |
| #2132 | @keyframes downward-current { |
| #2133 | 0% { transform: translateY(-16%); opacity: 0; } |
| #2134 | 12% { opacity: 0.72; } |
| #2135 | 76% { opacity: 0.66; } |
| #2136 | 100% { transform: translateY(440%); opacity: 0; } |
| #2137 | } |
| #2138 | |
| #2139 | @keyframes work-particle-down { |
| #2140 | 0% { transform: translateY(0) scale(0.65); opacity: 0; } |
| #2141 | 12% { opacity: 0.42; } |
| #2142 | 52% { opacity: 0.78; } |
| #2143 | 100% { transform: translateY(520px) scale(1); opacity: 0; } |
| #2144 | } |
| #2145 | |
| #2146 | @keyframes brain-thinking-pulse { |
| #2147 | 0%, 100% { box-shadow: 0 0 16px rgba(125,165,216,0.13), inset 0 0 0 rgba(125,165,216,0); border-color: rgba(125,165,216,0.22); } |
| #2148 | 50% { box-shadow: 0 0 30px rgba(125,165,216,0.32), inset 0 0 24px rgba(125,165,216,0.07); border-color: rgba(125,165,216,0.46); } |
| #2149 | } |
| #2150 | |
| #2151 | @keyframes hands-working-pulse { |
| #2152 | 0%, 100% { box-shadow: 0 12px 38px rgba(0,0,0,0.26), 0 0 0 rgba(217,177,95,0); border-color: color-mix(in srgb, var(--gold-3) 24%, var(--border)); } |
| #2153 | 50% { box-shadow: 0 12px 38px rgba(0,0,0,0.26), 0 0 26px rgba(217,177,95,0.18); border-color: color-mix(in srgb, var(--gold-2) 46%, var(--border)); } |
| #2154 | } |
| #2155 | |
| #2156 | @keyframes mouth-speaking-pulse { |
| #2157 | 0%, 100% { box-shadow: 0 12px 38px rgba(0,0,0,0.26), 0 0 0 rgba(217,177,95,0); border-color: color-mix(in srgb, var(--gold-3) 24%, var(--border)); } |
| #2158 | 50% { box-shadow: 0 12px 38px rgba(0,0,0,0.26), 0 0 32px rgba(217,177,95,0.22); border-color: color-mix(in srgb, var(--gold-1) 44%, var(--border)); } |
| #2159 | } |
| #2160 | |
| #2161 | @keyframes feet-ground-glow { |
| #2162 | 0%, 100% { opacity: 0.2; transform: scaleX(0.92); } |
| #2163 | 50% { opacity: 0.42; transform: scaleX(1.04); } |
| #2164 | } |
| #2165 | |
| #2166 | @keyframes hologram-floor-pulse { |
| #2167 | 0%, 100% { opacity: 0.42; transform: scaleX(0.96) scaleY(0.92); } |
| #2168 | 50% { opacity: 0.76; transform: scaleX(1.04) scaleY(1); } |
| #2169 | } |
| #2170 | |
| #2171 | @keyframes region-click-confirm { |
| #2172 | 0%, 100% { |
| #2173 | filter: brightness(1); |
| #2174 | box-shadow: none; |
| #2175 | } |
| #2176 | 35% { |
| #2177 | filter: brightness(1.15); |
| #2178 | box-shadow: 0 0 48px rgba(217, 177, 95, 0.24), 0 0 84px rgba(125, 165, 216, 0.14); |
| #2179 | } |
| #2180 | } |
| #2181 | |
| #2182 | .header-identity-skeleton, |
| #2183 | .pipeline-skeleton-row span, |
| #2184 | .pipeline-skeleton-row i, |
| #2185 | .response-skeleton-line, |
| #2186 | .attachment-skeleton span, |
| #2187 | .attachment-skeleton i { |
| #2188 | display: block; |
| #2189 | overflow: hidden; |
| #2190 | border-radius: 999px; |
| #2191 | background: linear-gradient(90deg, var(--bg-2), var(--bg-3), var(--bg-2)); |
| #2192 | background-size: 180% 100%; |
| #2193 | animation: profile-skeleton 1.8s ease-in-out infinite; |
| #2194 | } |
| #2195 | |
| #2196 | .header-identity-skeleton { |
| #2197 | width: min(280px, 72vw); |
| #2198 | height: 15px; |
| #2199 | } |
| #2200 | |
| #2201 | .skeleton-stack { |
| #2202 | display: grid; |
| #2203 | gap: 8px; |
| #2204 | } |
| #2205 | |
| #2206 | .pipeline-skeleton-row { |
| #2207 | display: flex; |
| #2208 | align-items: center; |
| #2209 | justify-content: space-between; |
| #2210 | gap: 12px; |
| #2211 | animation: stagger-fade-in 340ms ease both; |
| #2212 | animation-delay: calc(var(--stagger-index, 0) * 42ms); |
| #2213 | } |
| #2214 | |
| #2215 | .pipeline-skeleton-row span { |
| #2216 | width: 64%; |
| #2217 | height: 12px; |
| #2218 | } |
| #2219 | |
| #2220 | .pipeline-skeleton-row i { |
| #2221 | width: 42px; |
| #2222 | height: 16px; |
| #2223 | } |
| #2224 | |
| #2225 | .response-skeleton { |
| #2226 | display: grid; |
| #2227 | gap: 10px; |
| #2228 | } |
| #2229 | |
| #2230 | .response-skeleton-line { |
| #2231 | height: 12px; |
| #2232 | width: 74%; |
| #2233 | } |
| #2234 | |
| #2235 | .response-skeleton-line.long { |
| #2236 | width: 92%; |
| #2237 | } |
| #2238 | |
| #2239 | .living-shell { |
| #2240 | position: relative; |
| #2241 | max-width: 1840px; |
| #2242 | margin: 0 auto; |
| #2243 | background: |
| #2244 | radial-gradient(circle at 50% 18%, rgba(125, 165, 216, 0.13), transparent 34%), |
| #2245 | radial-gradient(circle at 50% 46%, rgba(217, 177, 95, 0.11), transparent 42%), |
| #2246 | linear-gradient(180deg, rgba(10, 9, 8, 0.92), var(--bg-1)); |
| #2247 | } |
| #2248 | |
| #2249 | .living-shell::before { |
| #2250 | content: ''; |
| #2251 | position: fixed; |
| #2252 | inset: 0; |
| #2253 | pointer-events: none; |
| #2254 | opacity: 0.18; |
| #2255 | background-image: |
| #2256 | linear-gradient(30deg, rgba(217, 177, 95, 0.08) 1px, transparent 1px), |
| #2257 | linear-gradient(150deg, rgba(125, 165, 216, 0.05) 1px, transparent 1px); |
| #2258 | background-size: 88px 88px; |
| #2259 | mask-image: radial-gradient(circle at 50% 40%, black, transparent 72%); |
| #2260 | } |
| #2261 | |
| #2262 | .living-header { |
| #2263 | position: relative; |
| #2264 | z-index: 2; |
| #2265 | display: flex; |
| #2266 | align-items: flex-start; |
| #2267 | justify-content: space-between; |
| #2268 | gap: 32px; |
| #2269 | margin-bottom: 32px; |
| #2270 | } |
| #2271 | |
| #2272 | .living-kicker { |
| #2273 | color: var(--gold-2); |
| #2274 | font-size: 10px; |
| #2275 | text-transform: uppercase; |
| #2276 | letter-spacing: 0.28em; |
| #2277 | opacity: 0.72; |
| #2278 | } |
| #2279 | |
| #2280 | .living-title { |
| #2281 | margin-top: 8px; |
| #2282 | max-width: 780px; |
| #2283 | color: var(--text-1); |
| #2284 | font-family: var(--font-serif), Georgia, serif; |
| #2285 | font-size: clamp(42px, 6vw, 82px); |
| #2286 | line-height: 0.88; |
| #2287 | letter-spacing: -0.045em; |
| #2288 | text-wrap: balance; |
| #2289 | } |
| #2290 | |
| #2291 | .living-subtitle { |
| #2292 | margin-top: 16px; |
| #2293 | color: color-mix(in srgb, var(--text-3) 82%, transparent); |
| #2294 | font-size: 12px; |
| #2295 | letter-spacing: 0.08em; |
| #2296 | text-transform: uppercase; |
| #2297 | } |
| #2298 | |
| #2299 | .living-header-actions { |
| #2300 | display: flex; |
| #2301 | flex-wrap: wrap; |
| #2302 | align-items: center; |
| #2303 | justify-content: flex-end; |
| #2304 | gap: 10px; |
| #2305 | } |
| #2306 | |
| #2307 | .mode-toggle { |
| #2308 | display: inline-flex; |
| #2309 | gap: 4px; |
| #2310 | padding: 4px; |
| #2311 | border: 1px solid rgba(217, 177, 95, 0.12); |
| #2312 | border-radius: 999px; |
| #2313 | background: rgba(0, 0, 0, 0.14); |
| #2314 | box-shadow: 0 14px 40px rgba(0,0,0,0.18); |
| #2315 | } |
| #2316 | |
| #2317 | .mode-toggle button, |
| #2318 | .deep-room-tabs button { |
| #2319 | border-radius: 999px; |
| #2320 | padding: 7px 12px; |
| #2321 | color: var(--text-3); |
| #2322 | font-size: 11px; |
| #2323 | text-transform: uppercase; |
| #2324 | letter-spacing: 0.08em; |
| #2325 | } |
| #2326 | |
| #2327 | .mode-toggle button.active, |
| #2328 | .deep-room-tabs button.active { |
| #2329 | background: linear-gradient(180deg, var(--gold-2), var(--gold-3)); |
| #2330 | color: var(--bg-1); |
| #2331 | } |
| #2332 | |
| #2333 | .command-link { |
| #2334 | display: inline-flex; |
| #2335 | align-items: center; |
| #2336 | min-height: 34px; |
| #2337 | border: 1px solid rgba(125, 165, 216, 0.16); |
| #2338 | border-radius: 999px; |
| #2339 | padding: 7px 13px; |
| #2340 | color: var(--text-2); |
| #2341 | font-size: 11px; |
| #2342 | letter-spacing: 0.08em; |
| #2343 | text-transform: uppercase; |
| #2344 | background: rgba(125, 165, 216, 0.07); |
| #2345 | } |
| #2346 | |
| #2347 | .body-stage { |
| #2348 | position: relative; |
| #2349 | z-index: 1; |
| #2350 | display: grid; |
| #2351 | grid-template-columns: minmax(260px, 0.86fr) minmax(360px, 1.34fr) minmax(260px, 0.86fr); |
| #2352 | grid-template-rows: auto auto auto auto auto; |
| #2353 | gap: clamp(22px, 2.2vw, 34px); |
| #2354 | min-height: clamp(860px, 88vh, 1080px); |
| #2355 | padding: clamp(28px, 3vw, 48px); |
| #2356 | border: 0; |
| #2357 | border-radius: 38px; |
| #2358 | background: |
| #2359 | radial-gradient(circle at 50% 26%, rgba(217, 177, 95, 0.12), transparent 24%), |
| #2360 | radial-gradient(circle at 52% 60%, rgba(125, 165, 216, 0.08), transparent 36%), |
| #2361 | linear-gradient(160deg, rgba(22, 18, 15, 0.72), rgba(7, 7, 8, 0.97)); |
| #2362 | box-shadow: 0 42px 120px rgba(0,0,0,0.52), inset 0 1px 0 rgba(255,255,255,0.025); |
| #2363 | overflow: hidden; |
| #2364 | } |
| #2365 | |
| #2366 | .memory-field { |
| #2367 | position: absolute; |
| #2368 | inset: 34px; |
| #2369 | border: 0; |
| #2370 | border-radius: 34px; |
| #2371 | cursor: var(--cursor-sovereign); |
| #2372 | overflow: hidden; |
| #2373 | } |
| #2374 | |
| #2375 | .memory-constellation { |
| #2376 | position: absolute; |
| #2377 | inset: -20%; |
| #2378 | opacity: 0.4; |
| #2379 | background: |
| #2380 | radial-gradient(circle at 20% 30%, var(--blue) 0 1px, transparent 2px), |
| #2381 | radial-gradient(circle at 70% 20%, var(--gold-2) 0 1px, transparent 2px), |
| #2382 | radial-gradient(circle at 84% 72%, var(--blue) 0 1px, transparent 2px), |
| #2383 | radial-gradient(circle at 32% 78%, var(--gold-2) 0 1px, transparent 2px); |
| #2384 | background-size: 140px 140px; |
| #2385 | filter: blur(0.2px); |
| #2386 | } |
| #2387 | |
| #2388 | .memory-copy { |
| #2389 | position: absolute; |
| #2390 | right: 28px; |
| #2391 | bottom: 28px; |
| #2392 | max-width: 260px; |
| #2393 | border: 0; |
| #2394 | border-radius: 22px; |
| #2395 | padding: 14px 16px; |
| #2396 | background: rgba(10, 9, 8, 0.5); |
| #2397 | backdrop-filter: blur(18px); |
| #2398 | box-shadow: 0 22px 60px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.035); |
| #2399 | } |
| #2400 | |
| #2401 | .memory-copy span, |
| #2402 | .body-station span, |
| #2403 | .station-heading span, |
| #2404 | .capacity-orbit span { |
| #2405 | display: block; |
| #2406 | color: var(--gold-2); |
| #2407 | font-size: 11px; |
| #2408 | text-transform: uppercase; |
| #2409 | letter-spacing: 0.18em; |
| #2410 | font-weight: 600; |
| #2411 | } |
| #2412 | |
| #2413 | .memory-copy strong, |
| #2414 | .body-station strong, |
| #2415 | .station-heading strong, |
| #2416 | .capacity-orbit strong { |
| #2417 | display: block; |
| #2418 | margin-top: 7px; |
| #2419 | color: var(--text-1); |
| #2420 | font-family: var(--font-serif), Georgia, serif; |
| #2421 | font-size: 19px; |
| #2422 | line-height: 1.1; |
| #2423 | letter-spacing: -0.018em; |
| #2424 | } |
| #2425 | |
| #2426 | .memory-copy em, |
| #2427 | .body-station em, |
| #2428 | .capacity-orbit i { |
| #2429 | display: block; |
| #2430 | margin-top: 8px; |
| #2431 | color: var(--text-3); |
| #2432 | font-size: 11px; |
| #2433 | font-style: normal; |
| #2434 | line-height: 1.35; |
| #2435 | } |
| #2436 | |
| #2437 | .capacity-orbit { |
| #2438 | position: relative; |
| #2439 | z-index: 2; |
| #2440 | grid-column: 2; |
| #2441 | grid-row: 1; |
| #2442 | justify-self: center; |
| #2443 | width: min(500px, 100%); |
| #2444 | border: 0; |
| #2445 | border-radius: 24px; |
| #2446 | padding: 16px 22px; |
| #2447 | text-align: center; |
| #2448 | background: linear-gradient(180deg, rgba(17, 14, 12, 0.52), rgba(0,0,0,0.22)); |
| #2449 | box-shadow: 0 28px 70px rgba(0,0,0,0.24), 0 0 42px rgba(217,177,95,0.06); |
| #2450 | cursor: var(--cursor-sovereign); |
| #2451 | transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease; |
| #2452 | } |
| #2453 | |
| #2454 | .capacity-headline { |
| #2455 | text-align: center; |
| #2456 | } |
| #2457 | |
| #2458 | .capacity-ledger { |
| #2459 | margin-top: 14px; |
| #2460 | border-top: 1px solid rgba(217, 177, 95, 0.1); |
| #2461 | padding-top: 12px; |
| #2462 | text-align: left; |
| #2463 | } |
| #2464 | |
| #2465 | .capacity-ledger summary { |
| #2466 | display: flex; |
| #2467 | align-items: center; |
| #2468 | justify-content: space-between; |
| #2469 | gap: 10px; |
| #2470 | cursor: var(--cursor-sovereign); |
| #2471 | list-style: none; |
| #2472 | color: var(--text-2); |
| #2473 | font-size: 10px; |
| #2474 | text-transform: uppercase; |
| #2475 | letter-spacing: 0.12em; |
| #2476 | } |
| #2477 | |
| #2478 | .capacity-ledger summary::-webkit-details-marker { |
| #2479 | display: none; |
| #2480 | } |
| #2481 | |
| #2482 | .capacity-ledger summary span, |
| #2483 | .capacity-ledger summary b, |
| #2484 | .capacity-ledger-row span, |
| #2485 | .capacity-ledger-row strong, |
| #2486 | .capacity-ledger-row b, |
| #2487 | .capacity-ledger-empty { |
| #2488 | display: initial; |
| #2489 | margin: 0; |
| #2490 | font-family: inherit; |
| #2491 | letter-spacing: normal; |
| #2492 | text-transform: none; |
| #2493 | } |
| #2494 | |
| #2495 | .capacity-ledger summary b { |
| #2496 | color: var(--gold-1); |
| #2497 | font-weight: 700; |
| #2498 | } |
| #2499 | |
| #2500 | .local-jobs-ledger { |
| #2501 | border-top-color: rgba(88, 166, 255, 0.16); |
| #2502 | } |
| #2503 | |
| #2504 | .local-job-row b { |
| #2505 | color: #86d7ff; |
| #2506 | } |
| #2507 | |
| #2508 | .capacity-ledger-list { |
| #2509 | margin-top: 8px; |
| #2510 | max-height: 190px; |
| #2511 | overflow-y: auto; |
| #2512 | overscroll-behavior: contain; |
| #2513 | padding-right: 4px; |
| #2514 | scrollbar-gutter: stable; |
| #2515 | } |
| #2516 | |
| #2517 | .capacity-ledger-row { |
| #2518 | display: grid; |
| #2519 | grid-template-columns: minmax(0, 1fr) auto; |
| #2520 | gap: 10px; |
| #2521 | border-bottom: 1px solid rgba(255, 255, 255, 0.05); |
| #2522 | padding: 7px 0; |
| #2523 | } |
| #2524 | |
| #2525 | .capacity-ledger-row div, |
| #2526 | .capacity-ledger-row aside { |
| #2527 | display: grid; |
| #2528 | gap: 2px; |
| #2529 | min-width: 0; |
| #2530 | } |
| #2531 | |
| #2532 | .capacity-ledger-row strong { |
| #2533 | overflow: hidden; |
| #2534 | color: var(--text-1); |
| #2535 | font-size: 11px; |
| #2536 | font-weight: 700; |
| #2537 | text-overflow: ellipsis; |
| #2538 | white-space: nowrap; |
| #2539 | } |
| #2540 | |
| #2541 | .capacity-ledger-row span { |
| #2542 | overflow: hidden; |
| #2543 | color: var(--text-3); |
| #2544 | font-size: 10px; |
| #2545 | text-overflow: ellipsis; |
| #2546 | white-space: nowrap; |
| #2547 | } |
| #2548 | |
| #2549 | .capacity-ledger-row aside { |
| #2550 | justify-items: end; |
| #2551 | text-align: right; |
| #2552 | } |
| #2553 | |
| #2554 | .capacity-ledger-row b { |
| #2555 | color: var(--gold-1); |
| #2556 | font-family: var(--font-mono), monospace; |
| #2557 | font-size: 10px; |
| #2558 | font-weight: 700; |
| #2559 | } |
| #2560 | |
| #2561 | .capacity-ledger-empty { |
| #2562 | padding: 10px 0 2px; |
| #2563 | color: var(--text-3); |
| #2564 | font-size: 11px; |
| #2565 | } |
| #2566 | |
| #2567 | .body-avatar-wrap { |
| #2568 | position: relative; |
| #2569 | z-index: 7; |
| #2570 | grid-column: 2; |
| #2571 | grid-row: 2 / span 3; |
| #2572 | align-self: center; |
| #2573 | justify-self: center; |
| #2574 | width: min(620px, 100%); |
| #2575 | min-height: clamp(700px, 76vh, 900px); |
| #2576 | margin-bottom: 118px; |
| #2577 | isolation: isolate; |
| #2578 | display: grid; |
| #2579 | place-items: center; |
| #2580 | pointer-events: none; |
| #2581 | } |
| #2582 | |
| #2583 | .body-avatar { |
| #2584 | object-fit: contain; |
| #2585 | object-position: center center; |
| #2586 | padding: clamp(8px, 1.4vw, 18px); |
| #2587 | filter: drop-shadow(0 22px 34px rgba(0,0,0,0.55)) saturate(1.03) contrast(1.04); |
| #2588 | animation: avatar-breath 7.5s ease-in-out infinite; |
| #2589 | transform-origin: center center; |
| #2590 | z-index: 3; |
| #2591 | } |
| #2592 | |
| #2593 | .body-avatar-fallback { |
| #2594 | opacity: 0.16; |
| #2595 | mix-blend-mode: screen; |
| #2596 | } |
| #2597 | |
| #2598 | .council-manifestation { |
| #2599 | position: absolute; |
| #2600 | inset: -1% 2% 4%; |
| #2601 | z-index: 4; |
| #2602 | pointer-events: none; |
| #2603 | animation: avatar-breath 7.5s ease-in-out infinite; |
| #2604 | } |
| #2605 | |
| #2606 | .council-manifestation canvas { |
| #2607 | width: 100%; |
| #2608 | height: 100%; |
| #2609 | filter: |
| #2610 | drop-shadow(0 0 18px rgba(125,165,216,0.22)) |
| #2611 | drop-shadow(0 0 38px rgba(217,177,95,0.08)); |
| #2612 | opacity: 0.98; |
| #2613 | } |
| #2614 | |
| #2615 | .council-manifestation::before, |
| #2616 | .council-manifestation::after { |
| #2617 | content: ""; |
| #2618 | position: absolute; |
| #2619 | inset: 6% 22% 8%; |
| #2620 | z-index: -1; |
| #2621 | border-radius: 50%; |
| #2622 | background: |
| #2623 | radial-gradient(circle at 50% 18%, rgba(125,165,216,0.22), transparent 34%), |
| #2624 | radial-gradient(circle at 50% 55%, rgba(217,177,95,0.1), transparent 54%); |
| #2625 | filter: blur(20px); |
| #2626 | opacity: 0.62; |
| #2627 | } |
| #2628 | |
| #2629 | .council-manifestation::after { |
| #2630 | inset: 8% 16% 3%; |
| #2631 | background: linear-gradient(180deg, transparent, rgba(125,165,216,0.16), rgba(217,177,95,0.08), transparent); |
| #2632 | opacity: 0.34; |
| #2633 | mix-blend-mode: screen; |
| #2634 | } |
| #2635 | |
| #2636 | .council-seat-dock { |
| #2637 | position: absolute; |
| #2638 | left: 50%; |
| #2639 | bottom: -108px; |
| #2640 | z-index: 12; |
| #2641 | display: grid; |
| #2642 | grid-template-columns: auto minmax(160px, 1fr) auto; |
| #2643 | gap: 10px; |
| #2644 | width: min(520px, 94%); |
| #2645 | padding: 11px; |
| #2646 | transform: translateX(-50%); |
| #2647 | border: 1px solid rgba(217,177,95,0.18); |
| #2648 | border-radius: 24px; |
| #2649 | background: linear-gradient(160deg, rgba(6,8,12,0.72), rgba(18,14,10,0.72)); |
| #2650 | backdrop-filter: blur(18px); |
| #2651 | box-shadow: 0 22px 70px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.04); |
| #2652 | pointer-events: none; |
| #2653 | } |
| #2654 | |
| #2655 | .seat-arrow { |
| #2656 | width: 38px; |
| #2657 | min-height: 48px; |
| #2658 | border-radius: 16px; |
| #2659 | border: 1px solid rgba(217,177,95,0.18); |
| #2660 | color: var(--gold-1); |
| #2661 | background: rgba(217,177,95,0.08); |
| #2662 | font-size: 28px; |
| #2663 | line-height: 1; |
| #2664 | } |
| #2665 | |
| #2666 | .seat-arrow:hover, |
| #2667 | .seat-chip:hover, |
| #2668 | .seat-chip.active { |
| #2669 | border-color: rgba(217,177,95,0.38); |
| #2670 | background: linear-gradient(150deg, rgba(217,177,95,0.14), rgba(125,165,216,0.08)); |
| #2671 | box-shadow: 0 0 24px rgba(217,177,95,0.12); |
| #2672 | } |
| #2673 | |
| #2674 | .seat-dock-current { |
| #2675 | display: grid; |
| #2676 | gap: 3px; |
| #2677 | min-width: 0; |
| #2678 | text-align: center; |
| #2679 | } |
| #2680 | |
| #2681 | .seat-dock-current span, |
| #2682 | .seat-direct-head span { |
| #2683 | color: var(--text-4); |
| #2684 | font-size: 9px; |
| #2685 | text-transform: uppercase; |
| #2686 | letter-spacing: 0.16em; |
| #2687 | } |
| #2688 | |
| #2689 | .seat-dock-current strong, |
| #2690 | .seat-direct-head strong { |
| #2691 | color: var(--gold-1); |
| #2692 | font-family: var(--font-serif), Georgia, serif; |
| #2693 | font-size: 18px; |
| #2694 | } |
| #2695 | |
| #2696 | .seat-dock-current em, |
| #2697 | .seat-direct-head em { |
| #2698 | color: var(--text-3); |
| #2699 | overflow: hidden; |
| #2700 | text-overflow: ellipsis; |
| #2701 | white-space: nowrap; |
| #2702 | font-size: 10px; |
| #2703 | font-style: normal; |
| #2704 | letter-spacing: 0.08em; |
| #2705 | text-transform: uppercase; |
| #2706 | } |
| #2707 | |
| #2708 | .seat-rail { |
| #2709 | grid-column: 1 / -1; |
| #2710 | display: flex; |
| #2711 | flex-wrap: wrap; |
| #2712 | justify-content: center; |
| #2713 | gap: 6px; |
| #2714 | } |
| #2715 | |
| #2716 | .seat-chip { |
| #2717 | border: 1px solid rgba(125,165,216,0.16); |
| #2718 | border-radius: 999px; |
| #2719 | padding: 5px 9px; |
| #2720 | color: var(--text-2); |
| #2721 | background: rgba(125,165,216,0.055); |
| #2722 | font-size: 10px; |
| #2723 | letter-spacing: 0.06em; |
| #2724 | text-transform: uppercase; |
| #2725 | transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; |
| #2726 | } |
| #2727 | |
| #2728 | .seat-arrow, |
| #2729 | .seat-chip { |
| #2730 | pointer-events: auto; |
| #2731 | } |
| #2732 | |
| #2733 | .seat-chip.active { |
| #2734 | color: var(--gold-1); |
| #2735 | } |
| #2736 | |
| #2737 | .council-manifestation.error canvas { |
| #2738 | opacity: 0; |
| #2739 | } |
| #2740 | |
| #2741 | .manifestation-caption { |
| #2742 | position: absolute; |
| #2743 | right: 10%; |
| #2744 | bottom: 9%; |
| #2745 | display: grid; |
| #2746 | gap: 2px; |
| #2747 | max-width: 170px; |
| #2748 | border-radius: 16px; |
| #2749 | padding: 10px 12px; |
| #2750 | background: linear-gradient(150deg, rgba(5,7,11,0.58), rgba(18,14,9,0.42)); |
| #2751 | box-shadow: inset 0 0 0 1px rgba(217,177,95,0.1), 0 18px 42px rgba(0,0,0,0.24); |
| #2752 | text-align: right; |
| #2753 | opacity: 0.86; |
| #2754 | backdrop-filter: blur(14px); |
| #2755 | } |
| #2756 | |
| #2757 | .manifestation-caption span { |
| #2758 | color: var(--text-4); |
| #2759 | font-size: 9px; |
| #2760 | font-weight: 700; |
| #2761 | letter-spacing: 0.14em; |
| #2762 | text-transform: uppercase; |
| #2763 | } |
| #2764 | |
| #2765 | .manifestation-caption strong { |
| #2766 | color: var(--gold-2); |
| #2767 | font-family: var(--font-serif), Georgia, serif; |
| #2768 | font-size: 17px; |
| #2769 | line-height: 1.05; |
| #2770 | } |
| #2771 | |
| #2772 | .manifestation-caption em { |
| #2773 | color: var(--text-3); |
| #2774 | font-size: 10px; |
| #2775 | font-style: normal; |
| #2776 | } |
| #2777 | |
| #2778 | .hologram-floor { |
| #2779 | position: absolute; |
| #2780 | left: 15%; |
| #2781 | right: 15%; |
| #2782 | bottom: 1.5%; |
| #2783 | height: 13%; |
| #2784 | z-index: 1; |
| #2785 | border: 1px solid rgba(217,177,95,0.22); |
| #2786 | border-radius: 50%; |
| #2787 | background: |
| #2788 | radial-gradient(ellipse at center, rgba(217,177,95,0.16), rgba(125,165,216,0.06) 44%, transparent 72%), |
| #2789 | repeating-radial-gradient(ellipse at center, rgba(217,177,95,0.12) 0 1px, transparent 2px 18px); |
| #2790 | box-shadow: 0 0 42px rgba(217,177,95,0.14), inset 0 0 26px rgba(125,165,216,0.08); |
| #2791 | filter: blur(0.2px); |
| #2792 | animation: hologram-floor-pulse 6s ease-in-out infinite; |
| #2793 | } |
| #2794 | |
| #2795 | .avatar-state-aura, |
| #2796 | .avatar-brain-signal, |
| #2797 | .avatar-mouth-signal, |
| #2798 | .avatar-hand-signal, |
| #2799 | .avatar-feet-signal, |
| #2800 | .flow-particle { |
| #2801 | position: absolute; |
| #2802 | pointer-events: none; |
| #2803 | } |
| #2804 | |
| #2805 | .avatar-state-aura { |
| #2806 | inset: 6% 13% 5%; |
| #2807 | z-index: 1; |
| #2808 | border-radius: 48% 52% 46% 54%; |
| #2809 | background: |
| #2810 | radial-gradient(circle at 50% 24%, rgba(217,177,95,0.14), transparent 36%), |
| #2811 | radial-gradient(circle at 50% 54%, rgba(125,165,216,0.12), transparent 50%); |
| #2812 | filter: blur(18px); |
| #2813 | opacity: 0.48; |
| #2814 | animation: avatar-aura-breathe 8s ease-in-out infinite; |
| #2815 | } |
| #2816 | |
| #2817 | .avatar-brain-signal { |
| #2818 | left: 44%; |
| #2819 | top: 9%; |
| #2820 | width: 12%; |
| #2821 | height: 10%; |
| #2822 | z-index: 4; |
| #2823 | border-radius: 999px; |
| #2824 | border: 1px solid rgba(125,165,216,0.3); |
| #2825 | box-shadow: 0 0 22px rgba(125,165,216,0.18); |
| #2826 | opacity: 0; |
| #2827 | } |
| #2828 | |
| #2829 | .avatar-mouth-signal { |
| #2830 | left: 44.8%; |
| #2831 | top: 21.5%; |
| #2832 | width: 10%; |
| #2833 | height: 2px; |
| #2834 | z-index: 4; |
| #2835 | border-radius: 999px; |
| #2836 | background: linear-gradient(90deg, transparent, rgba(217,177,95,0.82), transparent); |
| #2837 | box-shadow: 0 0 18px rgba(217,177,95,0.28); |
| #2838 | opacity: 0; |
| #2839 | } |
| #2840 | |
| #2841 | .avatar-hand-signal { |
| #2842 | top: 45%; |
| #2843 | width: 15%; |
| #2844 | height: 15%; |
| #2845 | z-index: 4; |
| #2846 | border-radius: 50%; |
| #2847 | background: radial-gradient(circle, rgba(217,177,95,0.24), rgba(125,165,216,0.08) 48%, transparent 68%); |
| #2848 | filter: blur(4px); |
| #2849 | opacity: 0; |
| #2850 | } |
| #2851 | |
| #2852 | .avatar-hand-signal.left { left: 18%; } |
| #2853 | .avatar-hand-signal.right { right: 18%; } |
| #2854 | |
| #2855 | .avatar-feet-signal { |
| #2856 | left: 38%; |
| #2857 | bottom: 5%; |
| #2858 | width: 24%; |
| #2859 | height: 9%; |
| #2860 | z-index: 2; |
| #2861 | border-radius: 50%; |
| #2862 | background: radial-gradient(ellipse, rgba(217,177,95,0.18), transparent 66%); |
| #2863 | opacity: 0.36; |
| #2864 | animation: feet-ground-glow 6s ease-in-out infinite; |
| #2865 | } |
| #2866 | |
| #2867 | .flow-line { |
| #2868 | position: absolute; |
| #2869 | left: 50%; |
| #2870 | top: 7%; |
| #2871 | bottom: 6%; |
| #2872 | width: 1px; |
| #2873 | background: linear-gradient(180deg, transparent, var(--gold-2), var(--blue), var(--gold-3), transparent); |
| #2874 | box-shadow: 0 0 18px rgba(217,177,95,0.35); |
| #2875 | opacity: 0.42; |
| #2876 | } |
| #2877 | |
| #2878 | .flow-line::after { |
| #2879 | content: ""; |
| #2880 | position: absolute; |
| #2881 | left: -2px; |
| #2882 | top: 0; |
| #2883 | width: 5px; |
| #2884 | height: 82px; |
| #2885 | border-radius: 999px; |
| #2886 | background: linear-gradient(180deg, transparent, rgba(217,177,95,0.9), rgba(125,165,216,0.45), transparent); |
| #2887 | filter: blur(0.5px); |
| #2888 | animation: downward-current 5.8s linear infinite; |
| #2889 | } |
| #2890 | |
| #2891 | .flow-particle { |
| #2892 | left: calc(50% - 3px); |
| #2893 | top: 12%; |
| #2894 | z-index: 5; |
| #2895 | width: 6px; |
| #2896 | height: 6px; |
| #2897 | border-radius: 999px; |
| #2898 | background: rgba(217,177,95,0.86); |
| #2899 | box-shadow: 0 0 12px rgba(217,177,95,0.45); |
| #2900 | opacity: 0.25; |
| #2901 | animation: work-particle-down 6.8s linear infinite; |
| #2902 | } |
| #2903 | |
| #2904 | .flow-particle.two { |
| #2905 | animation-delay: 2s; |
| #2906 | background: rgba(125,165,216,0.72); |
| #2907 | } |
| #2908 | |
| #2909 | .flow-particle.three { |
| #2910 | animation-delay: 4s; |
| #2911 | transform: translateX(7px); |
| #2912 | } |
| #2913 | |
| #2914 | .region-click-confirmed { |
| #2915 | animation: region-click-confirm 900ms ease; |
| #2916 | outline: 1px solid rgba(217,177,95,0.44); |
| #2917 | outline-offset: 4px; |
| #2918 | } |
| #2919 | |
| #2920 | .body-stage[data-motion-state="thinking"] .brain-station, |
| #2921 | .body-stage[data-motion-state="thinking"] .avatar-brain-signal { |
| #2922 | animation: brain-thinking-pulse 1.9s ease-in-out infinite; |
| #2923 | opacity: 1; |
| #2924 | } |
| #2925 | |
| #2926 | .body-stage[data-motion-state="working"] .left-hand, |
| #2927 | .body-stage[data-motion-state="working"] .right-hand, |
| #2928 | .body-stage[data-motion-state="working"] .avatar-hand-signal { |
| #2929 | animation: hands-working-pulse 2.6s ease-in-out infinite; |
| #2930 | opacity: 1; |
| #2931 | } |
| #2932 | |
| #2933 | .body-stage[data-motion-state="speaking"] .mouth-station, |
| #2934 | .body-stage[data-motion-state="speaking"] .right-hand, |
| #2935 | .body-stage[data-motion-state="speaking"] .avatar-mouth-signal { |
| #2936 | animation: mouth-speaking-pulse 2.2s ease-in-out infinite; |
| #2937 | opacity: 1; |
| #2938 | } |
| #2939 | |
| #2940 | .body-stage[data-motion-state="speaking"] .flow-line::after, |
| #2941 | .body-stage[data-motion-state="working"] .flow-line::after, |
| #2942 | .body-stage[data-motion-state="thinking"] .flow-line::after { |
| #2943 | animation-duration: 3.6s; |
| #2944 | } |
| #2945 | |
| #2946 | .body-station, |
| #2947 | .body-panel { |
| #2948 | position: relative; |
| #2949 | z-index: 3; |
| #2950 | border: 1px solid rgba(217, 177, 95, 0.1); |
| #2951 | border-radius: 24px; |
| #2952 | background: linear-gradient(180deg, rgba(14, 12, 11, 0.62), rgba(4, 4, 5, 0.38)); |
| #2953 | backdrop-filter: blur(18px); |
| #2954 | box-shadow: 0 26px 72px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.035); |
| #2955 | transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; |
| #2956 | } |
| #2957 | |
| #2958 | .body-stage .body-station:not(.region-active), |
| #2959 | .body-stage .body-panel:not(.region-active), |
| #2960 | .body-stage .capacity-orbit:not(.region-active), |
| #2961 | .body-stage .memory-field:not(.region-active) { |
| #2962 | opacity: 0.78; |
| #2963 | } |
| #2964 | |
| #2965 | .body-stage .region-active { |
| #2966 | opacity: 1; |
| #2967 | transform: translateY(-2px); |
| #2968 | border-color: rgba(217,177,95,0.28); |
| #2969 | box-shadow: 0 30px 86px rgba(0,0,0,0.36), 0 0 42px rgba(217,177,95,0.1), inset 0 1px 0 rgba(255,255,255,0.04); |
| #2970 | } |
| #2971 | |
| #2972 | .body-station { |
| #2973 | padding: 18px 20px; |
| #2974 | text-align: left; |
| #2975 | cursor: var(--cursor-sovereign); |
| #2976 | } |
| #2977 | |
| #2978 | .brain-station { grid-column: 2; grid-row: 2; align-self: start; justify-self: center; width: min(330px, 100%); } |
| #2979 | .heart-station { grid-column: 1; grid-row: 2; align-self: center; padding: 24px 26px; border-color: rgba(217,177,95,0.16); } |
| #2980 | .mouth-station { grid-column: 3; grid-row: 2 / span 2; align-self: start; height: min(660px, 66vh); overflow: auto; } |
| #2981 | .core-status-panel { grid-column: 2; grid-row: 3; align-self: center; justify-self: center; width: min(360px, 92%); max-height: 300px; overflow: auto; } |
| #2982 | .task-input-panel { grid-column: 2; grid-row: 4; align-self: end; justify-self: center; width: min(430px, 96%); z-index: 5; } |
| #2983 | .scrape-surface-panel { grid-column: 2; grid-row: 5; align-self: start; justify-self: center; width: min(500px, 96%); max-height: 340px; overflow: auto; z-index: 5; } |
| #2984 | .left-hand { grid-column: 1; grid-row: 3; align-self: start; height: min(380px, 40vh); overflow: auto; } |
| #2985 | .right-hand { grid-column: 3; grid-row: 4; align-self: start; height: min(580px, 58vh); overflow: auto; } |
| #2986 | .feet-panel { grid-column: 1; grid-row: 4; align-self: end; height: 280px; overflow: auto; } |
| #2987 | |
| #2988 | .body-panel { |
| #2989 | padding: 18px 20px; |
| #2990 | } |
| #2991 | |
| #2992 | .core-status-panel { |
| #2993 | z-index: 5; |
| #2994 | background: linear-gradient(180deg, rgba(6, 6, 8, 0.42), rgba(3, 3, 5, 0.28)); |
| #2995 | } |
| #2996 | |
| #2997 | .now-status-copy { |
| #2998 | display: grid; |
| #2999 | gap: 8px; |
| #3000 | color: var(--text-2); |
| #3001 | font-size: 12px; |
| #3002 | line-height: 1.45; |
| #3003 | } |
| #3004 | |
| #3005 | .live-tool-feed { |
| #3006 | display: grid; |
| #3007 | gap: 10px; |
| #3008 | color: var(--text-2); |
| #3009 | font-size: 12px; |
| #3010 | line-height: 1.45; |
| #3011 | } |
| #3012 | |
| #3013 | .tool-feed-status { |
| #3014 | display: grid; |
| #3015 | gap: 4px; |
| #3016 | } |
| #3017 | |
| #3018 | .tool-feed-status span, |
| #3019 | .tool-feed-meta span { |
| #3020 | color: var(--gold-2); |
| #3021 | font-size: 10px; |
| #3022 | font-weight: 700; |
| #3023 | letter-spacing: 0.12em; |
| #3024 | text-transform: uppercase; |
| #3025 | } |
| #3026 | |
| #3027 | .tool-feed-status strong { |
| #3028 | color: var(--text-1); |
| #3029 | font-family: var(--font-serif), Georgia, serif; |
| #3030 | font-size: 17px; |
| #3031 | line-height: 1.15; |
| #3032 | } |
| #3033 | |
| #3034 | .tool-feed-meta { |
| #3035 | display: flex; |
| #3036 | flex-wrap: wrap; |
| #3037 | gap: 8px; |
| #3038 | align-items: center; |
| #3039 | color: var(--text-3); |
| #3040 | font-size: 10px; |
| #3041 | } |
| #3042 | |
| #3043 | .tool-feed-meta b { |
| #3044 | color: var(--blue); |
| #3045 | } |
| #3046 | |
| #3047 | .task-goal-input { |
| #3048 | min-height: 92px; |
| #3049 | width: 100%; |
| #3050 | margin-bottom: 10px; |
| #3051 | border: 1px solid rgba(217,177,95,0.12); |
| #3052 | border-radius: 16px; |
| #3053 | padding: 12px; |
| #3054 | resize: vertical; |
| #3055 | background: rgba(0,0,0,0.18); |
| #3056 | color: var(--text-1); |
| #3057 | font-size: 12px; |
| #3058 | line-height: 1.45; |
| #3059 | outline: none; |
| #3060 | box-shadow: inset 0 1px 0 rgba(255,255,255,0.025); |
| #3061 | } |
| #3062 | |
| #3063 | .task-submit-button { |
| #3064 | width: 100%; |
| #3065 | border-radius: 999px; |
| #3066 | padding: 9px 14px; |
| #3067 | font-size: 12px; |
| #3068 | font-weight: 700; |
| #3069 | } |
| #3070 | |
| #3071 | .task-status-line { |
| #3072 | margin-top: 9px; |
| #3073 | color: var(--text-2); |
| #3074 | font-size: 11px; |
| #3075 | line-height: 1.45; |
| #3076 | } |
| #3077 | |
| #3078 | .scrape-surface-panel { |
| #3079 | display: grid; |
| #3080 | gap: 10px; |
| #3081 | } |
| #3082 | |
| #3083 | .scrape-url-input, |
| #3084 | .scrape-focus-input { |
| #3085 | width: 100%; |
| #3086 | border: 1px solid rgba(217,177,95,0.14); |
| #3087 | border-radius: 16px; |
| #3088 | padding: 12px; |
| #3089 | color: var(--text-1); |
| #3090 | background: rgba(0,0,0,0.24); |
| #3091 | outline: none; |
| #3092 | } |
| #3093 | |
| #3094 | .scrape-url-input { |
| #3095 | min-height: 110px; |
| #3096 | resize: vertical; |
| #3097 | font-size: 13px; |
| #3098 | line-height: 1.5; |
| #3099 | } |
| #3100 | |
| #3101 | .scrape-focus-input { |
| #3102 | min-height: 38px; |
| #3103 | font-size: 12px; |
| #3104 | } |
| #3105 | |
| #3106 | .scrape-submit-button { |
| #3107 | width: 100%; |
| #3108 | border-radius: 999px; |
| #3109 | padding: 9px 14px; |
| #3110 | font-size: 12px; |
| #3111 | font-weight: 700; |
| #3112 | } |
| #3113 | |
| #3114 | .scrape-status-line { |
| #3115 | margin: 0; |
| #3116 | color: var(--text-3); |
| #3117 | font-size: 12px; |
| #3118 | line-height: 1.5; |
| #3119 | } |
| #3120 | |
| #3121 | .approval-meaning-line { |
| #3122 | margin-top: 7px; |
| #3123 | color: var(--text-2); |
| #3124 | font-size: 12px; |
| #3125 | line-height: 1.45; |
| #3126 | } |
| #3127 | |
| #3128 | .scroll-contained-panel { |
| #3129 | overscroll-behavior: contain; |
| #3130 | scrollbar-gutter: stable; |
| #3131 | } |
| #3132 | |
| #3133 | .scroll-contained-panel > * { |
| #3134 | min-height: 0; |
| #3135 | } |
| #3136 | |
| #3137 | .command-scroll-panel { |
| #3138 | max-height: 620px; |
| #3139 | overflow-y: auto; |
| #3140 | overscroll-behavior: contain; |
| #3141 | padding-right: 4px; |
| #3142 | scrollbar-gutter: stable; |
| #3143 | } |
| #3144 | |
| #3145 | .command-scroll-panel.compact { |
| #3146 | max-height: 360px; |
| #3147 | } |
| #3148 | |
| #3149 | .station-heading { |
| #3150 | margin-bottom: 18px; |
| #3151 | } |
| #3152 | |
| #3153 | .heart-station strong { |
| #3154 | margin-top: 10px; |
| #3155 | font-size: clamp(28px, 3vw, 44px); |
| #3156 | line-height: 0.98; |
| #3157 | letter-spacing: -0.04em; |
| #3158 | } |
| #3159 | |
| #3160 | .heart-station em { |
| #3161 | margin-top: 16px; |
| #3162 | color: color-mix(in srgb, var(--gold-2) 64%, var(--text-3)); |
| #3163 | font-size: 12px; |
| #3164 | letter-spacing: 0.06em; |
| #3165 | text-transform: uppercase; |
| #3166 | } |
| #3167 | |
| #3168 | .demo-mask { |
| #3169 | border: 1px solid rgba(125, 165, 216, 0.12); |
| #3170 | border-radius: 18px; |
| #3171 | padding: 16px; |
| #3172 | color: var(--text-2); |
| #3173 | font-size: 13px; |
| #3174 | line-height: 1.55; |
| #3175 | background: rgba(125, 165, 216, 0.045); |
| #3176 | box-shadow: inset 0 1px 0 rgba(255,255,255,0.025); |
| #3177 | } |
| #3178 | |
| #3179 | .chat-controls-compact { |
| #3180 | display: flex; |
| #3181 | flex-wrap: wrap; |
| #3182 | align-items: center; |
| #3183 | gap: 8px; |
| #3184 | margin-bottom: 10px; |
| #3185 | } |
| #3186 | |
| #3187 | .talk-model-picker { |
| #3188 | display: inline-flex; |
| #3189 | align-items: center; |
| #3190 | gap: 8px; |
| #3191 | border: 1px solid rgba(217,177,95,0.12); |
| #3192 | border-radius: 999px; |
| #3193 | padding: 4px 4px 4px 11px; |
| #3194 | color: var(--gold-2); |
| #3195 | font-size: 10px; |
| #3196 | font-weight: 700; |
| #3197 | letter-spacing: 0.12em; |
| #3198 | text-transform: uppercase; |
| #3199 | background: rgba(217,177,95,0.055); |
| #3200 | } |
| #3201 | |
| #3202 | .talk-model-picker .model-select { |
| #3203 | min-width: 210px; |
| #3204 | border-radius: 999px; |
| #3205 | } |
| #3206 | |
| #3207 | .model-select-primary { |
| #3208 | border-color: rgba(217,177,95,0.2); |
| #3209 | } |
| #3210 | |
| #3211 | .model-select, |
| #3212 | .mouth-input, |
| #3213 | .mission-editor { |
| #3214 | border: 1px solid rgba(217,177,95,0.12); |
| #3215 | border-radius: 16px; |
| #3216 | background: rgba(0,0,0,0.18); |
| #3217 | color: var(--text-1); |
| #3218 | outline: none; |
| #3219 | box-shadow: inset 0 1px 0 rgba(255,255,255,0.025); |
| #3220 | } |
| #3221 | |
| #3222 | .model-select { |
| #3223 | min-width: 180px; |
| #3224 | padding: 7px 10px; |
| #3225 | font-size: 12px; |
| #3226 | } |
| #3227 | |
| #3228 | .mouth-input { |
| #3229 | width: 100%; |
| #3230 | min-height: 110px; |
| #3231 | margin-bottom: 14px; |
| #3232 | padding: 14px; |
| #3233 | resize: vertical; |
| #3234 | font-size: 13px; |
| #3235 | } |
| #3236 | |
| #3237 | .chat-thread-live { |
| #3238 | margin-top: 18px; |
| #3239 | max-height: 520px; |
| #3240 | overflow-y: auto; |
| #3241 | border: 0; |
| #3242 | border-radius: 18px; |
| #3243 | padding: 14px; |
| #3244 | background: rgba(0,0,0,0.12); |
| #3245 | box-shadow: inset 0 1px 0 rgba(255,255,255,0.025); |
| #3246 | } |
| #3247 | |
| #3248 | .mini-action { |
| #3249 | display: inline-flex; |
| #3250 | align-items: center; |
| #3251 | gap: 4px; |
| #3252 | border: 1px solid rgba(217,177,95,0.12); |
| #3253 | border-radius: 999px; |
| #3254 | padding: 6px 10px; |
| #3255 | color: var(--text-2); |
| #3256 | } |
| #3257 | |
| #3258 | .gold-mini { |
| #3259 | border-color: var(--gold-3); |
| #3260 | color: var(--gold-2); |
| #3261 | } |
| #3262 | |
| #3263 | .deep-room-shell { |
| #3264 | position: relative; |
| #3265 | z-index: 2; |
| #3266 | margin-top: 32px; |
| #3267 | } |
| #3268 | |
| #3269 | .deep-room-tabs { |
| #3270 | display: flex; |
| #3271 | flex-wrap: wrap; |
| #3272 | gap: 10px; |
| #3273 | margin-bottom: 16px; |
| #3274 | } |
| #3275 | |
| #3276 | .deep-room { |
| #3277 | display: grid; |
| #3278 | gap: 24px; |
| #3279 | border: 1px solid rgba(217,177,95,0.1); |
| #3280 | border-radius: 28px; |
| #3281 | padding: 26px; |
| #3282 | background: linear-gradient(160deg, rgba(20,17,15,0.66), rgba(5,5,6,0.68)); |
| #3283 | box-shadow: 0 30px 90px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.025); |
| #3284 | } |
| #3285 | |
| #3286 | .council-grid { |
| #3287 | display: grid; |
| #3288 | grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); |
| #3289 | gap: 10px; |
| #3290 | } |
| #3291 | |
| #3292 | .mind-room-live { |
| #3293 | gap: 22px; |
| #3294 | } |
| #3295 | |
| #3296 | .mind-room-header, |
| #3297 | .council-transcript-head { |
| #3298 | display: flex; |
| #3299 | align-items: flex-start; |
| #3300 | justify-content: space-between; |
| #3301 | gap: 18px; |
| #3302 | } |
| #3303 | |
| #3304 | .council-status-pill { |
| #3305 | display: grid; |
| #3306 | gap: 4px; |
| #3307 | min-width: 132px; |
| #3308 | border-radius: 18px; |
| #3309 | padding: 11px 13px; |
| #3310 | background: rgba(125,165,216,0.07); |
| #3311 | box-shadow: inset 0 0 0 1px rgba(125,165,216,0.13), 0 18px 42px rgba(0,0,0,0.18); |
| #3312 | } |
| #3313 | |
| #3314 | .council-status-pill span, |
| #3315 | .council-transcript-head span { |
| #3316 | color: var(--text-3); |
| #3317 | font-size: 10px; |
| #3318 | text-transform: uppercase; |
| #3319 | letter-spacing: 0.12em; |
| #3320 | } |
| #3321 | |
| #3322 | .council-status-pill strong, |
| #3323 | .council-transcript-head strong { |
| #3324 | color: var(--gold-2); |
| #3325 | font-family: var(--font-serif), Georgia, serif; |
| #3326 | } |
| #3327 | |
| #3328 | .council-status-pill em { |
| #3329 | color: var(--text-4); |
| #3330 | font-size: 10px; |
| #3331 | font-style: normal; |
| #3332 | letter-spacing: 0.08em; |
| #3333 | text-transform: uppercase; |
| #3334 | } |
| #3335 | |
| #3336 | .council-room-layout { |
| #3337 | display: grid; |
| #3338 | grid-template-columns: minmax(220px, 0.75fr) minmax(320px, 1.3fr) minmax(260px, 0.9fr); |
| #3339 | gap: 18px; |
| #3340 | align-items: start; |
| #3341 | } |
| #3342 | |
| #3343 | .council-map, |
| #3344 | .council-controls { |
| #3345 | display: grid; |
| #3346 | gap: 10px; |
| #3347 | } |
| #3348 | |
| #3349 | .council-node { |
| #3350 | width: 100%; |
| #3351 | text-align: left; |
| #3352 | animation: stagger-fade-in 360ms ease both; |
| #3353 | animation-delay: calc(var(--stagger-index, 0) * 58ms); |
| #3354 | border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--border)); |
| #3355 | border-radius: 16px; |
| #3356 | padding: 13px; |
| #3357 | background: rgba(125,165,216,0.06); |
| #3358 | cursor: var(--cursor-sovereign); |
| #3359 | transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease; |
| #3360 | } |
| #3361 | |
| #3362 | .council-node:hover, |
| #3363 | .council-node.active { |
| #3364 | border-color: rgba(217,177,95,0.38); |
| #3365 | background: linear-gradient(150deg, rgba(217,177,95,0.12), rgba(125,165,216,0.08)); |
| #3366 | box-shadow: 0 18px 44px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,0.035); |
| #3367 | transform: translateY(-1px); |
| #3368 | } |
| #3369 | |
| #3370 | .council-node-all { |
| #3371 | border-color: rgba(217,177,95,0.28); |
| #3372 | background: rgba(217,177,95,0.08); |
| #3373 | } |
| #3374 | |
| #3375 | .reaper-node { |
| #3376 | border-style: dashed; |
| #3377 | } |
| #3378 | |
| #3379 | .council-node span { |
| #3380 | display: block; |
| #3381 | color: var(--text-1); |
| #3382 | font-family: var(--font-serif), Georgia, serif; |
| #3383 | font-size: 16px; |
| #3384 | } |
| #3385 | |
| #3386 | .council-node em { |
| #3387 | display: block; |
| #3388 | margin-top: 4px; |
| #3389 | color: var(--text-3); |
| #3390 | font-size: 11px; |
| #3391 | font-style: normal; |
| #3392 | text-transform: uppercase; |
| #3393 | letter-spacing: 0.08em; |
| #3394 | } |
| #3395 | |
| #3396 | .council-node i { |
| #3397 | display: inline-flex; |
| #3398 | margin-top: 8px; |
| #3399 | border-radius: 999px; |
| #3400 | padding: 3px 8px; |
| #3401 | background: rgba(125,165,216,0.08); |
| #3402 | color: var(--blue); |
| #3403 | font-size: 10px; |
| #3404 | font-style: normal; |
| #3405 | font-weight: 700; |
| #3406 | letter-spacing: 0.1em; |
| #3407 | text-transform: uppercase; |
| #3408 | } |
| #3409 | |
| #3410 | .council-escalation-link, |
| #3411 | .council-status { |
| #3412 | color: var(--text-3); |
| #3413 | font-size: 11px; |
| #3414 | line-height: 1.6; |
| #3415 | } |
| #3416 | |
| #3417 | .council-transcript { |
| #3418 | border-radius: 22px; |
| #3419 | padding: 16px; |
| #3420 | background: linear-gradient(160deg, rgba(8,10,14,0.72), rgba(18,15,12,0.64)); |
| #3421 | box-shadow: inset 0 0 0 1px rgba(217,177,95,0.08), 0 20px 60px rgba(0,0,0,0.24); |
| #3422 | } |
| #3423 | |
| #3424 | .council-transcript-head { |
| #3425 | margin-bottom: 12px; |
| #3426 | } |
| #3427 | |
| #3428 | .council-transcript-head em { |
| #3429 | color: var(--text-4); |
| #3430 | font-size: 11px; |
| #3431 | font-style: normal; |
| #3432 | } |
| #3433 | |
| #3434 | .council-message-list { |
| #3435 | display: grid; |
| #3436 | gap: 10px; |
| #3437 | max-height: 560px; |
| #3438 | overflow-y: auto; |
| #3439 | padding-right: 4px; |
| #3440 | } |
| #3441 | |
| #3442 | .council-message { |
| #3443 | animation: stagger-fade-in 360ms ease both; |
| #3444 | animation-delay: calc(var(--stagger-index, 0) * 34ms); |
| #3445 | border-radius: 18px; |
| #3446 | padding: 13px; |
| #3447 | background: rgba(255,255,255,0.035); |
| #3448 | box-shadow: inset 0 0 0 1px rgba(125,165,216,0.09); |
| #3449 | } |
| #3450 | |
| #3451 | .council-message.gated { |
| #3452 | box-shadow: inset 0 0 0 1px rgba(217,177,95,0.2), 0 0 28px rgba(217,177,95,0.05); |
| #3453 | } |
| #3454 | |
| #3455 | .council-message header, |
| #3456 | .council-message footer { |
| #3457 | display: flex; |
| #3458 | align-items: center; |
| #3459 | justify-content: space-between; |
| #3460 | gap: 10px; |
| #3461 | } |
| #3462 | |
| #3463 | .council-message header strong { |
| #3464 | display: block; |
| #3465 | color: var(--text-1); |
| #3466 | font-family: var(--font-serif), Georgia, serif; |
| #3467 | font-size: 15px; |
| #3468 | } |
| #3469 | |
| #3470 | .council-message header span, |
| #3471 | .council-message time { |
| #3472 | color: var(--text-4); |
| #3473 | font-size: 10px; |
| #3474 | text-transform: uppercase; |
| #3475 | letter-spacing: 0.08em; |
| #3476 | } |
| #3477 | |
| #3478 | .council-message p { |
| #3479 | margin: 10px 0; |
| #3480 | color: var(--text-2); |
| #3481 | font-size: 13px; |
| #3482 | line-height: 1.65; |
| #3483 | } |
| #3484 | |
| #3485 | .council-message footer { |
| #3486 | justify-content: flex-start; |
| #3487 | flex-wrap: wrap; |
| #3488 | } |
| #3489 | |
| #3490 | .council-message footer span { |
| #3491 | border-radius: 999px; |
| #3492 | padding: 3px 8px; |
| #3493 | color: var(--text-3); |
| #3494 | background: rgba(125,165,216,0.08); |
| #3495 | font-size: 10px; |
| #3496 | } |
| #3497 | |
| #3498 | .council-controls { |
| #3499 | border-radius: 22px; |
| #3500 | padding: 15px; |
| #3501 | background: rgba(217,177,95,0.045); |
| #3502 | box-shadow: inset 0 0 0 1px rgba(217,177,95,0.08); |
| #3503 | } |
| #3504 | |
| #3505 | .seat-direct-panel { |
| #3506 | display: grid; |
| #3507 | gap: 10px; |
| #3508 | border-radius: 18px; |
| #3509 | padding: 12px; |
| #3510 | background: rgba(125,165,216,0.055); |
| #3511 | box-shadow: inset 0 0 0 1px rgba(125,165,216,0.1); |
| #3512 | } |
| #3513 | |
| #3514 | .seat-direct-head { |
| #3515 | display: grid; |
| #3516 | gap: 4px; |
| #3517 | } |
| #3518 | |
| #3519 | .seat-direct-panel textarea { |
| #3520 | min-height: 92px; |
| #3521 | resize: vertical; |
| #3522 | border-radius: 16px; |
| #3523 | border: 1px solid rgba(125,165,216,0.16); |
| #3524 | padding: 12px; |
| #3525 | color: var(--text-1); |
| #3526 | background: rgba(0,0,0,0.24); |
| #3527 | outline: none; |
| #3528 | } |
| #3529 | |
| #3530 | .seat-direct-turns { |
| #3531 | display: grid; |
| #3532 | gap: 8px; |
| #3533 | max-height: 260px; |
| #3534 | overflow-y: auto; |
| #3535 | } |
| #3536 | |
| #3537 | .seat-direct-turn { |
| #3538 | border-radius: 14px; |
| #3539 | padding: 10px; |
| #3540 | background: rgba(255,255,255,0.035); |
| #3541 | box-shadow: inset 0 0 0 1px rgba(217,177,95,0.08); |
| #3542 | } |
| #3543 | |
| #3544 | .seat-direct-turn.user { |
| #3545 | background: rgba(217,177,95,0.055); |
| #3546 | } |
| #3547 | |
| #3548 | .seat-direct-turn span { |
| #3549 | display: block; |
| #3550 | color: var(--gold-2); |
| #3551 | font-size: 10px; |
| #3552 | text-transform: uppercase; |
| #3553 | letter-spacing: 0.1em; |
| #3554 | } |
| #3555 | |
| #3556 | .seat-direct-turn p { |
| #3557 | margin: 6px 0; |
| #3558 | color: var(--text-2); |
| #3559 | font-size: 12px; |
| #3560 | line-height: 1.55; |
| #3561 | } |
| #3562 | |
| #3563 | .seat-direct-turn em { |
| #3564 | color: var(--text-4); |
| #3565 | font-size: 10px; |
| #3566 | font-style: normal; |
| #3567 | } |
| #3568 | |
| #3569 | .council-controls label { |
| #3570 | display: grid; |
| #3571 | gap: 8px; |
| #3572 | color: var(--gold-2); |
| #3573 | font-size: 11px; |
| #3574 | text-transform: uppercase; |
| #3575 | letter-spacing: 0.08em; |
| #3576 | } |
| #3577 | |
| #3578 | .council-controls textarea { |
| #3579 | min-height: 96px; |
| #3580 | resize: vertical; |
| #3581 | border-radius: 16px; |
| #3582 | border: 1px solid rgba(217,177,95,0.14); |
| #3583 | padding: 12px; |
| #3584 | color: var(--text-1); |
| #3585 | background: rgba(0,0,0,0.24); |
| #3586 | outline: none; |
| #3587 | text-transform: none; |
| #3588 | letter-spacing: normal; |
| #3589 | } |
| #3590 | |
| #3591 | .mission-editor { |
| #3592 | min-height: 150px; |
| #3593 | padding: 14px; |
| #3594 | font-size: 18px; |
| #3595 | line-height: 1.4; |
| #3596 | } |
| #3597 | |
| #3598 | @media (max-width: 1180px) { |
| #3599 | .body-stage { |
| #3600 | grid-template-columns: 1fr; |
| #3601 | grid-template-rows: auto; |
| #3602 | } |
| #3603 | .capacity-orbit, |
| #3604 | .brain-station, |
| #3605 | .heart-station, |
| #3606 | .body-avatar-wrap, |
| #3607 | .mouth-station, |
| #3608 | .core-status-panel, |
| #3609 | .scrape-surface-panel, |
| #3610 | .left-hand, |
| #3611 | .right-hand, |
| #3612 | .feet-panel { |
| #3613 | grid-column: 1; |
| #3614 | grid-row: auto; |
| #3615 | width: 100%; |
| #3616 | } |
| #3617 | .body-avatar-wrap { |
| #3618 | min-height: 520px; |
| #3619 | } |
| #3620 | .memory-field { |
| #3621 | inset: 12px; |
| #3622 | } |
| #3623 | } |
| #3624 | |
| #3625 | .vault-graph-3d-shell { |
| #3626 | margin-bottom: 12px; |
| #3627 | border: 1px solid var(--border); |
| #3628 | border-radius: 8px; |
| #3629 | background: radial-gradient(circle at center, rgba(217, 177, 95, 0.08), rgba(0,0,0,0.24) 58%, rgba(0,0,0,0.36)); |
| #3630 | overflow: hidden; |
| #3631 | } |
| #3632 | |
| #3633 | .vault-graph-toolbar { |
| #3634 | display: flex; |
| #3635 | justify-content: flex-end; |
| #3636 | gap: 8px; |
| #3637 | padding: 7px 8px 0; |
| #3638 | } |
| #3639 | |
| #3640 | .vault-graph-toolbar button { |
| #3641 | display: inline-flex; |
| #3642 | align-items: center; |
| #3643 | gap: 5px; |
| #3644 | min-height: 28px; |
| #3645 | border: 1px solid var(--border); |
| #3646 | border-radius: 6px; |
| #3647 | padding: 0 8px; |
| #3648 | background: rgba(0,0,0,0.22); |
| #3649 | color: var(--text-2); |
| #3650 | font-size: 11px; |
| #3651 | transition: border-color 160ms ease, color 160ms ease, background 160ms ease; |
| #3652 | } |
| #3653 | |
| #3654 | .vault-graph-toolbar button:hover { |
| #3655 | border-color: var(--gold-3); |
| #3656 | color: var(--gold-1); |
| #3657 | background: rgba(217,177,95,0.08); |
| #3658 | } |
| #3659 | |
| #3660 | .vault-graph-3d-frame { |
| #3661 | height: 320px; |
| #3662 | min-width: 0; |
| #3663 | cursor: grab; |
| #3664 | } |
| #3665 | |
| #3666 | .vault-graph-3d-frame:active { |
| #3667 | cursor: grabbing; |
| #3668 | } |
| #3669 | |
| #3670 | .vault-graph-loading { |
| #3671 | height: 320px; |
| #3672 | background: linear-gradient(90deg, rgba(20,17,15,0.7), rgba(28,24,20,0.95), rgba(20,17,15,0.7)); |
| #3673 | background-size: 180% 100%; |
| #3674 | animation: profile-skeleton 1.6s ease-in-out infinite; |
| #3675 | } |
| #3676 | |
| #3677 | .vault-graph-legend { |
| #3678 | display: flex; |
| #3679 | flex-wrap: wrap; |
| #3680 | gap: 8px; |
| #3681 | padding: 8px 10px; |
| #3682 | border-top: 1px solid var(--border); |
| #3683 | color: var(--text-3); |
| #3684 | font-size: 11px; |
| #3685 | } |
| #3686 | |
| #3687 | .vault-graph-legend span { |
| #3688 | display: inline-flex; |
| #3689 | align-items: center; |
| #3690 | gap: 5px; |
| #3691 | } |
| #3692 | |
| #3693 | .vault-graph-legend i { |
| #3694 | width: 10px; |
| #3695 | height: 2px; |
| #3696 | border-radius: 999px; |
| #3697 | } |
| #3698 | |
| #3699 | .vault-note-view { |
| #3700 | display: grid; |
| #3701 | gap: 7px; |
| #3702 | padding: 10px; |
| #3703 | border-top: 1px solid var(--border); |
| #3704 | color: var(--text-3); |
| #3705 | font-size: 11px; |
| #3706 | } |
| #3707 | |
| #3708 | .vault-note-view div { |
| #3709 | display: grid; |
| #3710 | gap: 3px; |
| #3711 | } |
| #3712 | |
| #3713 | .vault-note-view strong { |
| #3714 | color: var(--gold-2); |
| #3715 | font-size: 12px; |
| #3716 | } |
| #3717 | |
| #3718 | .vault-note-view span, |
| #3719 | .vault-note-view p { |
| #3720 | overflow-wrap: anywhere; |
| #3721 | } |
| #3722 | |
| #3723 | .vault-note-view button { |
| #3724 | justify-self: start; |
| #3725 | border: 1px solid var(--gold-3); |
| #3726 | border-radius: 6px; |
| #3727 | padding: 5px 8px; |
| #3728 | color: var(--gold-2); |
| #3729 | background: rgba(0,0,0,0.18); |
| #3730 | } |
| #3731 | |
| #3732 | .response-skeleton-line.short { |
| #3733 | width: 46%; |
| #3734 | } |
| #3735 | |
| #3736 | .attachment-skeleton { |
| #3737 | display: grid; |
| #3738 | gap: 7px; |
| #3739 | } |
| #3740 | |
| #3741 | .attachment-skeleton span { |
| #3742 | width: 70%; |
| #3743 | height: 9px; |
| #3744 | } |
| #3745 | |
| #3746 | .attachment-skeleton i { |
| #3747 | width: 42%; |
| #3748 | height: 9px; |
| #3749 | } |
| #3750 | |
| #3751 | .stagger-row { |
| #3752 | animation: stagger-fade-in 320ms ease both; |
| #3753 | animation-delay: calc(var(--stagger-index, 0) * 42ms); |
| #3754 | } |
| #3755 | |
| #3756 | .optimistic-row { |
| #3757 | border-color: color-mix(in srgb, var(--gold-2) 22%, transparent) !important; |
| #3758 | background: color-mix(in srgb, var(--gold-2) 5%, transparent); |
| #3759 | } |
| #3760 | |
| #3761 | .message-content { |
| #3762 | max-width: 100%; |
| #3763 | overflow-wrap: anywhere; |
| #3764 | color: var(--text-1); |
| #3765 | line-height: 1.72; |
| #3766 | } |
| #3767 | |
| #3768 | .message-content-user { |
| #3769 | color: var(--text-2); |
| #3770 | } |
| #3771 | |
| #3772 | .message-content-assistant h1, |
| #3773 | .message-content-assistant h2, |
| #3774 | .message-content-assistant h3, |
| #3775 | .message-content-assistant h4 { |
| #3776 | margin: 1.1rem 0 0.55rem; |
| #3777 | color: var(--gold-1); |
| #3778 | font-family: var(--font-serif), Georgia, serif; |
| #3779 | font-weight: 700; |
| #3780 | line-height: 1.2; |
| #3781 | } |
| #3782 | |
| #3783 | .message-content-assistant h1 { |
| #3784 | padding-bottom: 0.45rem; |
| #3785 | border-bottom: 1px solid color-mix(in srgb, var(--gold-3) 34%, transparent); |
| #3786 | font-size: clamp(1.55rem, 3vw, 2.05rem); |
| #3787 | } |
| #3788 | |
| #3789 | .message-content-assistant h2 { font-size: 1.45rem; } |
| #3790 | .message-content-assistant h3 { font-size: 1.18rem; } |
| #3791 | .message-content-assistant h4 { font-size: 1.05rem; color: var(--gold-2); } |
| #3792 | |
| #3793 | .message-content-assistant p { |
| #3794 | margin: 0.72rem 0; |
| #3795 | color: var(--text-1); |
| #3796 | } |
| #3797 | |
| #3798 | .message-content-assistant strong { |
| #3799 | color: var(--gold-2); |
| #3800 | font-weight: 700; |
| #3801 | } |
| #3802 | |
| #3803 | .message-content-assistant em { |
| #3804 | color: var(--text-2); |
| #3805 | } |
| #3806 | |
| #3807 | .message-content-assistant a { |
| #3808 | color: var(--gold-1); |
| #3809 | text-decoration: underline; |
| #3810 | text-underline-offset: 3px; |
| #3811 | } |
| #3812 | |
| #3813 | .message-content-assistant ul, |
| #3814 | .message-content-assistant ol { |
| #3815 | margin: 0.8rem 0; |
| #3816 | padding-left: 1.35rem; |
| #3817 | } |
| #3818 | |
| #3819 | .message-content-assistant li { |
| #3820 | margin: 0.38rem 0; |
| #3821 | color: var(--text-1); |
| #3822 | } |
| #3823 | |
| #3824 | .message-content-assistant li::marker { |
| #3825 | color: var(--gold-2); |
| #3826 | font-weight: 700; |
| #3827 | } |
| #3828 | |
| #3829 | .message-content-assistant blockquote { |
| #3830 | margin: 1rem 0; |
| #3831 | padding: 0.7rem 1rem; |
| #3832 | border-left: 4px solid var(--gold-3); |
| #3833 | border-radius: 0 8px 8px 0; |
| #3834 | background: color-mix(in srgb, var(--gold-3) 10%, transparent); |
| #3835 | color: var(--text-2); |
| #3836 | } |
| #3837 | |
| #3838 | .message-content-assistant :not(pre) > code { |
| #3839 | padding: 0.12rem 0.35rem; |
| #3840 | border: 1px solid color-mix(in srgb, var(--gold-3) 18%, transparent); |
| #3841 | border-radius: 5px; |
| #3842 | background: rgba(0,0,0,0.34); |
| #3843 | color: var(--gold-1); |
| #3844 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; |
| #3845 | font-size: 0.9em; |
| #3846 | } |
| #3847 | |
| #3848 | .markdown-code-shell { |
| #3849 | margin: 1rem 0; |
| #3850 | overflow: hidden; |
| #3851 | border: 1px solid color-mix(in srgb, var(--gold-3) 22%, var(--border)); |
| #3852 | border-radius: 9px; |
| #3853 | background: rgba(0,0,0,0.48); |
| #3854 | } |
| #3855 | |
| #3856 | .markdown-code-toolbar { |
| #3857 | display: flex; |
| #3858 | align-items: center; |
| #3859 | justify-content: space-between; |
| #3860 | gap: 10px; |
| #3861 | padding: 0.45rem 0.65rem; |
| #3862 | border-bottom: 1px solid var(--border); |
| #3863 | color: var(--text-3); |
| #3864 | font-size: 11px; |
| #3865 | } |
| #3866 | |
| #3867 | .markdown-code-toolbar button { |
| #3868 | display: inline-flex; |
| #3869 | align-items: center; |
| #3870 | gap: 5px; |
| #3871 | color: var(--gold-2); |
| #3872 | } |
| #3873 | |
| #3874 | .markdown-code-shell pre { |
| #3875 | max-width: 100%; |
| #3876 | overflow-x: auto; |
| #3877 | padding: 0.9rem; |
| #3878 | white-space: pre-wrap; |
| #3879 | word-break: break-word; |
| #3880 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; |
| #3881 | font-size: 12px; |
| #3882 | line-height: 1.55; |
| #3883 | } |
| #3884 | |
| #3885 | .markdown-table-wrap { |
| #3886 | margin: 1rem 0; |
| #3887 | max-width: 100%; |
| #3888 | overflow-x: auto; |
| #3889 | border: 1px solid color-mix(in srgb, var(--gold-3) 22%, var(--border)); |
| #3890 | border-radius: 8px; |
| #3891 | } |
| #3892 | |
| #3893 | .markdown-table-wrap table { |
| #3894 | width: 100%; |
| #3895 | border-collapse: collapse; |
| #3896 | min-width: 520px; |
| #3897 | } |
| #3898 | |
| #3899 | .markdown-table-wrap th, |
| #3900 | .markdown-table-wrap td { |
| #3901 | padding: 0.65rem; |
| #3902 | border: 1px solid color-mix(in srgb, var(--gold-3) 16%, var(--border)); |
| #3903 | text-align: left; |
| #3904 | } |
| #3905 | |
| #3906 | .markdown-table-wrap th { |
| #3907 | color: var(--gold-1); |
| #3908 | background: color-mix(in srgb, var(--gold-3) 10%, transparent); |
| #3909 | } |
| #3910 | |
| #3911 | .content-intake-panel { |
| #3912 | display: grid; |
| #3913 | gap: 14px; |
| #3914 | } |
| #3915 | |
| #3916 | .content-intake-head { |
| #3917 | display: flex; |
| #3918 | align-items: flex-start; |
| #3919 | justify-content: space-between; |
| #3920 | gap: 14px; |
| #3921 | } |
| #3922 | |
| #3923 | .content-intake-head p { |
| #3924 | margin-top: 4px; |
| #3925 | color: var(--text-3); |
| #3926 | font-size: 13px; |
| #3927 | } |
| #3928 | |
| #3929 | .content-intake-head > span { |
| #3930 | border: 1px solid var(--gold-3); |
| #3931 | border-radius: 999px; |
| #3932 | padding: 4px 9px; |
| #3933 | color: var(--gold-2); |
| #3934 | font-size: 11px; |
| #3935 | } |
| #3936 | |
| #3937 | .content-drop-zone { |
| #3938 | display: grid; |
| #3939 | place-items: center; |
| #3940 | gap: 8px; |
| #3941 | min-height: 150px; |
| #3942 | border: 1px dashed color-mix(in srgb, var(--gold-3) 50%, var(--border)); |
| #3943 | border-radius: 12px; |
| #3944 | background: |
| #3945 | radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--gold-2) 12%, transparent), transparent 45%), |
| #3946 | rgba(0,0,0,0.2); |
| #3947 | color: var(--text-2); |
| #3948 | text-align: center; |
| #3949 | } |
| #3950 | |
| #3951 | .content-drop-zone strong { |
| #3952 | color: var(--gold-1); |
| #3953 | } |
| #3954 | |
| #3955 | .content-drop-zone p { |
| #3956 | color: var(--text-3); |
| #3957 | font-size: 12px; |
| #3958 | } |
| #3959 | |
| #3960 | .content-file-list { |
| #3961 | display: flex; |
| #3962 | flex-wrap: wrap; |
| #3963 | gap: 7px; |
| #3964 | } |
| #3965 | |
| #3966 | .content-file-list span { |
| #3967 | max-width: 100%; |
| #3968 | border: 1px solid var(--border); |
| #3969 | border-radius: 999px; |
| #3970 | padding: 4px 9px; |
| #3971 | color: var(--text-2); |
| #3972 | background: rgba(0,0,0,0.2); |
| #3973 | font-size: 12px; |
| #3974 | } |
| #3975 | |
| #3976 | .content-intake-grid { |
| #3977 | display: grid; |
| #3978 | grid-template-columns: minmax(160px, 0.3fr) 1fr; |
| #3979 | gap: 12px; |
| #3980 | } |
| #3981 | |
| #3982 | .content-intake-label { |
| #3983 | display: grid; |
| #3984 | gap: 6px; |
| #3985 | color: var(--text-3); |
| #3986 | font-size: 12px; |
| #3987 | } |
| #3988 | |
| #3989 | .content-intake-label span { |
| #3990 | display: inline-flex; |
| #3991 | align-items: center; |
| #3992 | gap: 6px; |
| #3993 | } |
| #3994 | |
| #3995 | .content-intake-label input, |
| #3996 | .content-intake-label select, |
| #3997 | .content-intake-label textarea { |
| #3998 | width: 100%; |
| #3999 | border: 1px solid var(--border); |
| #4000 | border-radius: 8px; |
| #4001 | background: var(--bg-1); |
| #4002 | color: var(--text-1); |
| #4003 | padding: 9px 10px; |
| #4004 | outline: none; |
| #4005 | } |
| #4006 | |
| #4007 | .content-intake-label textarea { |
| #4008 | min-height: 80px; |
| #4009 | resize: vertical; |
| #4010 | } |
| #4011 | |
| #4012 | .content-intake-label input:focus, |
| #4013 | .content-intake-label select:focus, |
| #4014 | .content-intake-label textarea:focus { |
| #4015 | border-color: var(--gold-3); |
| #4016 | } |
| #4017 | |
| #4018 | .tool-card, |
| #4019 | .content-progress, |
| #4020 | .content-result, |
| #4021 | .content-error { |
| #4022 | border: 1px solid var(--border); |
| #4023 | border-radius: 10px; |
| #4024 | padding: 12px; |
| #4025 | background: rgba(0,0,0,0.24); |
| #4026 | } |
| #4027 | |
| #4028 | .tool-card h3 { |
| #4029 | color: var(--gold-1); |
| #4030 | font-family: var(--font-serif), Georgia, serif; |
| #4031 | font-weight: 700; |
| #4032 | } |
| #4033 | |
| #4034 | .tool-card p { |
| #4035 | margin: 5px 0 9px; |
| #4036 | color: var(--text-2); |
| #4037 | font-size: 13px; |
| #4038 | } |
| #4039 | |
| #4040 | .tool-card pre { |
| #4041 | margin-bottom: 10px; |
| #4042 | max-height: 260px; |
| #4043 | overflow: auto; |
| #4044 | border: 1px solid var(--border); |
| #4045 | border-radius: 8px; |
| #4046 | padding: 10px; |
| #4047 | background: rgba(0,0,0,0.36); |
| #4048 | color: var(--text-2); |
| #4049 | font-size: 12px; |
| #4050 | white-space: pre-wrap; |
| #4051 | } |
| #4052 | |
| #4053 | .content-progress, |
| #4054 | .content-result, |
| #4055 | .content-error { |
| #4056 | display: flex; |
| #4057 | align-items: flex-start; |
| #4058 | gap: 10px; |
| #4059 | } |
| #4060 | |
| #4061 | .content-progress strong { |
| #4062 | color: var(--gold-1); |
| #4063 | } |
| #4064 | |
| #4065 | .content-progress p { |
| #4066 | color: var(--text-3); |
| #4067 | font-size: 13px; |
| #4068 | } |
| #4069 | |
| #4070 | .content-error { |
| #4071 | color: var(--red); |
| #4072 | border-color: color-mix(in srgb, var(--red) 38%, var(--border)); |
| #4073 | } |
| #4074 | |
| #4075 | .spinner { |
| #4076 | width: 18px; |
| #4077 | height: 18px; |
| #4078 | border: 2px solid color-mix(in srgb, var(--gold-2) 22%, transparent); |
| #4079 | border-top-color: var(--gold-1); |
| #4080 | border-radius: 999px; |
| #4081 | animation: spin 800ms linear infinite; |
| #4082 | } |
| #4083 | |
| #4084 | @keyframes spin { |
| #4085 | to { transform: rotate(360deg); } |
| #4086 | } |
| #4087 | |
| #4088 | @media (max-width: 720px) { |
| #4089 | .content-intake-grid { |
| #4090 | grid-template-columns: 1fr; |
| #4091 | } |
| #4092 | } |
| #4093 | |
| #4094 | @keyframes stagger-fade-in { |
| #4095 | from { opacity: 0; transform: translateY(4px); } |
| #4096 | to { opacity: 1; transform: translateY(0); } |
| #4097 | } |
| #4098 | |
| #4099 | ::-webkit-scrollbar { width: 6px; height: 6px; } |
| #4100 | ::-webkit-scrollbar-track { background: var(--bg-1); } |
| #4101 | ::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 3px; } |
| #4102 | ::-webkit-scrollbar-thumb:hover { background: var(--border); } |
| #4103 | |
| #4104 | h1, h2, h3 { font-family: var(--font-serif), Georgia, serif; } |
| #4105 | |
| #4106 | .sovereign-profile-shell { |
| #4107 | padding: 0; |
| #4108 | overflow: hidden; |
| #4109 | } |
| #4110 | |
| #4111 | .trust-frame { |
| #4112 | position: relative; |
| #4113 | min-height: 100%; |
| #4114 | padding: 16px; |
| #4115 | border-radius: 8px; |
| #4116 | border: 1px solid color-mix(in srgb, var(--trust-primary, var(--gold-2)) 68%, transparent); |
| #4117 | background: |
| #4118 | linear-gradient(180deg, rgba(255,255,255,0.035), transparent 38%), |
| #4119 | radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--trust-primary, var(--gold-2)) 18%, transparent), transparent 46%), |
| #4120 | linear-gradient(160deg, color-mix(in srgb, var(--trust-secondary, #050505) 42%, var(--bg-card)), var(--bg-2)); |
| #4121 | box-shadow: |
| #4122 | inset 0 0 0 1px rgba(255,255,255,0.025), |
| #4123 | 0 0 24px color-mix(in srgb, var(--trust-primary, var(--gold-2)) 12%, transparent); |
| #4124 | } |
| #4125 | |
| #4126 | .trust-frame::before, |
| #4127 | .trust-frame::after { |
| #4128 | content: ''; |
| #4129 | position: absolute; |
| #4130 | inset: 8px; |
| #4131 | pointer-events: none; |
| #4132 | border: 1px solid color-mix(in srgb, var(--trust-primary, var(--gold-2)) 26%, transparent); |
| #4133 | border-radius: 6px; |
| #4134 | } |
| #4135 | |
| #4136 | .trust-frame::after { |
| #4137 | inset: 13px; |
| #4138 | border-color: rgba(255,255,255,0.045); |
| #4139 | } |
| #4140 | |
| #4141 | .profile-topline { |
| #4142 | position: relative; |
| #4143 | z-index: 1; |
| #4144 | display: flex; |
| #4145 | align-items: flex-start; |
| #4146 | justify-content: space-between; |
| #4147 | gap: 10px; |
| #4148 | margin-bottom: 14px; |
| #4149 | } |
| #4150 | |
| #4151 | .profile-actions { |
| #4152 | display: flex; |
| #4153 | align-items: center; |
| #4154 | gap: 8px; |
| #4155 | } |
| #4156 | |
| #4157 | .profile-icon-button { |
| #4158 | display: inline-grid; |
| #4159 | width: 28px; |
| #4160 | height: 28px; |
| #4161 | place-items: center; |
| #4162 | border-radius: 6px; |
| #4163 | border: 1px solid color-mix(in srgb, var(--trust-primary, var(--gold-2)) 42%, var(--border)); |
| #4164 | background: rgba(0,0,0,0.25); |
| #4165 | color: var(--gold-1); |
| #4166 | } |
| #4167 | |
| #4168 | .profile-icon-button:hover { |
| #4169 | border-color: var(--trust-primary, var(--gold-2)); |
| #4170 | color: var(--text-1); |
| #4171 | } |
| #4172 | |
| #4173 | .tier-stack { |
| #4174 | display: flex; |
| #4175 | flex-direction: column; |
| #4176 | gap: 3px; |
| #4177 | min-width: 0; |
| #4178 | } |
| #4179 | |
| #4180 | .tier-badge, |
| #4181 | .status-badge, |
| #4182 | .earned-badge { |
| #4183 | display: inline-flex; |
| #4184 | align-items: center; |
| #4185 | min-height: 24px; |
| #4186 | border-radius: 6px; |
| #4187 | white-space: nowrap; |
| #4188 | font-size: 11px; |
| #4189 | line-height: 1; |
| #4190 | letter-spacing: 0.02em; |
| #4191 | } |
| #4192 | |
| #4193 | .tier-badge { |
| #4194 | width: max-content; |
| #4195 | max-width: 100%; |
| #4196 | padding: 0 9px; |
| #4197 | color: var(--bg-1); |
| #4198 | background: linear-gradient(180deg, var(--trust-primary, var(--gold-2)), var(--gold-3)); |
| #4199 | border: 1px solid color-mix(in srgb, var(--trust-primary, var(--gold-2)) 72%, #000); |
| #4200 | font-weight: 700; |
| #4201 | } |
| #4202 | |
| #4203 | .tier-detail { |
| #4204 | color: var(--text-3); |
| #4205 | font-size: 10px; |
| #4206 | letter-spacing: 0.04em; |
| #4207 | text-transform: uppercase; |
| #4208 | } |
| #4209 | |
| #4210 | .status-badge { |
| #4211 | padding: 0 9px; |
| #4212 | color: var(--gold-1); |
| #4213 | border: 1px solid color-mix(in srgb, var(--trust-primary, var(--gold-2)) 42%, var(--border)); |
| #4214 | background: rgba(0,0,0,0.28); |
| #4215 | } |
| #4216 | |
| #4217 | .status-executor { |
| #4218 | color: var(--gold-1); |
| #4219 | box-shadow: inset 0 0 14px color-mix(in srgb, var(--trust-primary, var(--gold-2)) 12%, transparent); |
| #4220 | } |
| #4221 | |
| #4222 | .profile-portrait-row { |
| #4223 | position: relative; |
| #4224 | z-index: 1; |
| #4225 | display: grid; |
| #4226 | grid-template-columns: 112px minmax(0, 1fr); |
| #4227 | align-items: center; |
| #4228 | gap: 14px; |
| #4229 | } |
| #4230 | |
| #4231 | .profile-portrait { |
| #4232 | position: relative; |
| #4233 | width: 112px; |
| #4234 | aspect-ratio: 1; |
| #4235 | border-radius: 7px; |
| #4236 | border: 1px solid color-mix(in srgb, var(--trust-primary, var(--gold-2)) 54%, var(--border)); |
| #4237 | background: |
| #4238 | linear-gradient(135deg, rgba(255,255,255,0.06), transparent 38%), |
| #4239 | linear-gradient(160deg, var(--bg-3), var(--bg-1)); |
| #4240 | display: grid; |
| #4241 | place-items: center; |
| #4242 | box-shadow: inset 0 0 28px rgba(0,0,0,0.42); |
| #4243 | } |
| #4244 | |
| #4245 | .profile-initials { |
| #4246 | font-family: var(--font-serif), Georgia, serif; |
| #4247 | color: var(--gold-1); |
| #4248 | font-size: 32px; |
| #4249 | font-weight: 700; |
| #4250 | } |
| #4251 | |
| #4252 | .profile-photo { |
| #4253 | width: 100%; |
| #4254 | height: 100%; |
| #4255 | border-radius: 7px; |
| #4256 | object-fit: cover; |
| #4257 | } |
| #4258 | |
| #4259 | .trust-seal { |
| #4260 | position: absolute; |
| #4261 | right: -10px; |
| #4262 | bottom: -10px; |
| #4263 | width: 48px; |
| #4264 | height: 48px; |
| #4265 | border-radius: 50%; |
| #4266 | display: grid; |
| #4267 | place-items: center; |
| #4268 | overflow: hidden; |
| #4269 | color: var(--bg-1); |
| #4270 | background: radial-gradient(circle, var(--trust-primary, var(--gold-2)), var(--gold-3)); |
| #4271 | border: 2px solid var(--bg-1); |
| #4272 | box-shadow: 0 0 0 1px color-mix(in srgb, var(--trust-primary, var(--gold-2)) 76%, transparent), 0 7px 18px rgba(0,0,0,0.52); |
| #4273 | font-family: var(--font-serif), Georgia, serif; |
| #4274 | font-size: 12px; |
| #4275 | font-weight: 700; |
| #4276 | cursor: var(--cursor-seal); |
| #4277 | transition: transform 180ms ease, box-shadow 180ms ease; |
| #4278 | } |
| #4279 | |
| #4280 | .trust-seal:hover { |
| #4281 | transform: translateY(-1px) scale(1.03); |
| #4282 | box-shadow: 0 0 0 1px color-mix(in srgb, var(--trust-primary, var(--gold-2)) 76%, transparent), 0 9px 22px rgba(0,0,0,0.58), 0 0 24px color-mix(in srgb, var(--trust-primary, var(--gold-2)) 16%, transparent); |
| #4283 | } |
| #4284 | |
| #4285 | .trust-seal img { |
| #4286 | width: 100%; |
| #4287 | height: 100%; |
| #4288 | object-fit: cover; |
| #4289 | } |
| #4290 | |
| #4291 | .profile-identity { |
| #4292 | min-width: 0; |
| #4293 | } |
| #4294 | |
| #4295 | .profile-identity h2 { |
| #4296 | color: var(--text-1); |
| #4297 | font-size: 24px; |
| #4298 | line-height: 1.1; |
| #4299 | margin: 0 0 5px; |
| #4300 | } |
| #4301 | |
| #4302 | .trust-name { |
| #4303 | color: var(--gold-1); |
| #4304 | font-size: 13px; |
| #4305 | line-height: 1.25; |
| #4306 | margin: 0 0 5px; |
| #4307 | } |
| #4308 | |
| #4309 | .trust-meta { |
| #4310 | color: var(--text-3); |
| #4311 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; |
| #4312 | font-size: 11px; |
| #4313 | line-height: 1.35; |
| #4314 | margin: 0; |
| #4315 | overflow-wrap: anywhere; |
| #4316 | } |
| #4317 | |
| #4318 | .profile-edit-panel { |
| #4319 | position: relative; |
| #4320 | z-index: 1; |
| #4321 | margin-top: 14px; |
| #4322 | padding: 12px; |
| #4323 | border-radius: 8px; |
| #4324 | border: 1px solid rgba(255,255,255,0.07); |
| #4325 | background: rgba(0,0,0,0.24); |
| #4326 | } |
| #4327 | |
| #4328 | .profile-edit-grid { |
| #4329 | display: grid; |
| #4330 | grid-template-columns: repeat(2, minmax(0, 1fr)); |
| #4331 | gap: 10px; |
| #4332 | } |
| #4333 | |
| #4334 | .profile-edit-grid label { |
| #4335 | display: grid; |
| #4336 | gap: 5px; |
| #4337 | min-width: 0; |
| #4338 | } |
| #4339 | |
| #4340 | .profile-edit-grid label.wide { |
| #4341 | grid-column: 1 / -1; |
| #4342 | } |
| #4343 | |
| #4344 | .profile-edit-grid span { |
| #4345 | color: var(--text-3); |
| #4346 | font-size: 10px; |
| #4347 | letter-spacing: 0.06em; |
| #4348 | text-transform: uppercase; |
| #4349 | } |
| #4350 | |
| #4351 | .profile-edit-grid input, |
| #4352 | .profile-edit-grid select { |
| #4353 | width: 100%; |
| #4354 | min-height: 34px; |
| #4355 | border-radius: 6px; |
| #4356 | border: 1px solid var(--border); |
| #4357 | background: var(--bg-1); |
| #4358 | color: var(--text-1); |
| #4359 | padding: 0 9px; |
| #4360 | font-size: 12px; |
| #4361 | } |
| #4362 | |
| #4363 | .profile-edit-error { |
| #4364 | margin-top: 10px; |
| #4365 | color: var(--red); |
| #4366 | font-size: 12px; |
| #4367 | } |
| #4368 | |
| #4369 | .profile-edit-actions { |
| #4370 | display: flex; |
| #4371 | flex-wrap: wrap; |
| #4372 | gap: 8px; |
| #4373 | margin-top: 12px; |
| #4374 | } |
| #4375 | |
| #4376 | .profile-text-button { |
| #4377 | display: inline-flex; |
| #4378 | align-items: center; |
| #4379 | gap: 7px; |
| #4380 | min-height: 32px; |
| #4381 | padding: 0 10px; |
| #4382 | border-radius: 6px; |
| #4383 | border: 1px solid var(--gold-3); |
| #4384 | background: linear-gradient(180deg, var(--gold-2), var(--gold-3)); |
| #4385 | color: var(--bg-1); |
| #4386 | font-size: 12px; |
| #4387 | font-weight: 700; |
| #4388 | } |
| #4389 | |
| #4390 | .profile-text-button.ghost { |
| #4391 | border-color: var(--border); |
| #4392 | background: var(--bg-3); |
| #4393 | color: var(--text-2); |
| #4394 | } |
| #4395 | |
| #4396 | .profile-text-button:disabled { |
| #4397 | opacity: 0.55; |
| #4398 | } |
| #4399 | |
| #4400 | .status-progression { |
| #4401 | position: relative; |
| #4402 | z-index: 1; |
| #4403 | display: grid; |
| #4404 | gap: 9px; |
| #4405 | margin: 18px 0 14px; |
| #4406 | padding: 11px; |
| #4407 | border-radius: 8px; |
| #4408 | border: 1px solid rgba(255,255,255,0.06); |
| #4409 | background: rgba(0,0,0,0.18); |
| #4410 | overflow: hidden; |
| #4411 | } |
| #4412 | |
| #4413 | .status-progression::after { |
| #4414 | content: ''; |
| #4415 | position: absolute; |
| #4416 | inset: 0; |
| #4417 | pointer-events: none; |
| #4418 | background: linear-gradient(110deg, transparent 12%, color-mix(in srgb, var(--trust-primary, var(--gold-2)) 18%, transparent) 48%, transparent 78%); |
| #4419 | opacity: 0; |
| #4420 | transform: translateX(-100%); |
| #4421 | } |
| #4422 | |
| #4423 | .status-progression.threshold-crossed::after { |
| #4424 | animation: threshold-rite 1.2s ease both; |
| #4425 | } |
| #4426 | |
| #4427 | .status-progression-top, |
| #4428 | .xp-next-target { |
| #4429 | display: flex; |
| #4430 | align-items: baseline; |
| #4431 | justify-content: space-between; |
| #4432 | gap: 12px; |
| #4433 | } |
| #4434 | |
| #4435 | .status-progression-top span, |
| #4436 | .xp-next-target span { |
| #4437 | color: var(--text-3); |
| #4438 | font-size: 10px; |
| #4439 | letter-spacing: 0.08em; |
| #4440 | text-transform: uppercase; |
| #4441 | } |
| #4442 | |
| #4443 | .status-progression-top strong, |
| #4444 | .xp-next-target strong { |
| #4445 | color: var(--gold-1); |
| #4446 | font-size: 12px; |
| #4447 | } |
| #4448 | |
| #4449 | .sovereign-ladder { |
| #4450 | display: grid; |
| #4451 | grid-template-columns: repeat(6, minmax(0, 1fr)); |
| #4452 | gap: 6px; |
| #4453 | } |
| #4454 | |
| #4455 | .ladder-step { |
| #4456 | position: relative; |
| #4457 | display: grid; |
| #4458 | justify-items: center; |
| #4459 | gap: 3px; |
| #4460 | min-width: 0; |
| #4461 | color: var(--text-4); |
| #4462 | animation: status-step-in 320ms ease both; |
| #4463 | animation-delay: calc(var(--step-index, 0) * 56ms); |
| #4464 | } |
| #4465 | |
| #4466 | .ladder-step::before { |
| #4467 | content: ''; |
| #4468 | position: absolute; |
| #4469 | top: 5px; |
| #4470 | left: calc(-50% + 9px); |
| #4471 | right: calc(50% + 9px); |
| #4472 | height: 1px; |
| #4473 | background: rgba(255,255,255,0.08); |
| #4474 | } |
| #4475 | |
| #4476 | .ladder-step:first-child::before { |
| #4477 | display: none; |
| #4478 | } |
| #4479 | |
| #4480 | .ladder-dot { |
| #4481 | position: relative; |
| #4482 | z-index: 1; |
| #4483 | width: 11px; |
| #4484 | height: 11px; |
| #4485 | border-radius: 50%; |
| #4486 | border: 1px solid rgba(255,255,255,0.12); |
| #4487 | background: rgba(0,0,0,0.42); |
| #4488 | } |
| #4489 | |
| #4490 | .ladder-step.complete .ladder-dot, |
| #4491 | .ladder-step.active .ladder-dot { |
| #4492 | border-color: color-mix(in srgb, var(--trust-primary, var(--gold-2)) 68%, transparent); |
| #4493 | background: radial-gradient(circle, var(--trust-primary, var(--gold-2)), var(--gold-3)); |
| #4494 | box-shadow: 0 0 12px color-mix(in srgb, var(--trust-primary, var(--gold-2)) 18%, transparent); |
| #4495 | } |
| #4496 | |
| #4497 | .ladder-step.active .ladder-dot { |
| #4498 | animation: pulse-gold 2.2s ease-in-out infinite; |
| #4499 | } |
| #4500 | |
| #4501 | .ladder-step small, |
| #4502 | .ladder-step em { |
| #4503 | max-width: 100%; |
| #4504 | overflow: hidden; |
| #4505 | text-align: center; |
| #4506 | text-overflow: ellipsis; |
| #4507 | white-space: nowrap; |
| #4508 | } |
| #4509 | |
| #4510 | .ladder-step small { |
| #4511 | color: var(--text-3); |
| #4512 | font-size: 9px; |
| #4513 | } |
| #4514 | |
| #4515 | .ladder-step em { |
| #4516 | color: var(--text-4); |
| #4517 | font-size: 8px; |
| #4518 | font-style: normal; |
| #4519 | } |
| #4520 | |
| #4521 | .ladder-step.complete small, |
| #4522 | .ladder-step.active small { |
| #4523 | color: var(--gold-1); |
| #4524 | } |
| #4525 | |
| #4526 | .xp-thread { |
| #4527 | position: relative; |
| #4528 | z-index: 1; |
| #4529 | height: 28px; |
| #4530 | border-radius: 999px; |
| #4531 | overflow: hidden; |
| #4532 | border: 1px solid rgba(255,255,255,0.06); |
| #4533 | background: rgba(0,0,0,0.3); |
| #4534 | } |
| #4535 | |
| #4536 | .xp-thread-fill { |
| #4537 | position: absolute; |
| #4538 | inset: 0 auto 0 0; |
| #4539 | background: linear-gradient(90deg, color-mix(in srgb, var(--trust-primary, var(--gold-2)) 72%, transparent), var(--gold-1)); |
| #4540 | opacity: 0.85; |
| #4541 | transition: width 740ms cubic-bezier(0.22, 1, 0.36, 1); |
| #4542 | } |
| #4543 | |
| #4544 | .xp-thread span { |
| #4545 | position: relative; |
| #4546 | z-index: 1; |
| #4547 | display: flex; |
| #4548 | align-items: center; |
| #4549 | justify-content: flex-end; |
| #4550 | height: 100%; |
| #4551 | padding: 0 10px; |
| #4552 | color: var(--text-1); |
| #4553 | font-size: 11px; |
| #4554 | font-weight: 700; |
| #4555 | } |
| #4556 | |
| #4557 | .xp-thread-advanced { |
| #4558 | margin: 0; |
| #4559 | } |
| #4560 | |
| #4561 | @keyframes threshold-rite { |
| #4562 | 0% { opacity: 0; transform: translateX(-100%); } |
| #4563 | 35% { opacity: 1; } |
| #4564 | 100% { opacity: 0; transform: translateX(100%); } |
| #4565 | } |
| #4566 | |
| #4567 | @keyframes status-step-in { |
| #4568 | from { opacity: 0; transform: translateY(4px); } |
| #4569 | to { opacity: 1; transform: translateY(0); } |
| #4570 | } |
| #4571 | |
| #4572 | .profile-stat-grid { |
| #4573 | position: relative; |
| #4574 | z-index: 1; |
| #4575 | display: grid; |
| #4576 | grid-template-columns: repeat(4, minmax(0, 1fr)); |
| #4577 | gap: 8px; |
| #4578 | margin-bottom: 14px; |
| #4579 | } |
| #4580 | |
| #4581 | .profile-stat-grid div { |
| #4582 | min-width: 0; |
| #4583 | border: 1px solid rgba(255,255,255,0.055); |
| #4584 | border-radius: 7px; |
| #4585 | padding: 8px 6px; |
| #4586 | background: rgba(0,0,0,0.18); |
| #4587 | text-align: center; |
| #4588 | } |
| #4589 | |
| #4590 | .profile-stat-grid span { |
| #4591 | display: block; |
| #4592 | color: var(--text-1); |
| #4593 | font-size: 15px; |
| #4594 | font-weight: 700; |
| #4595 | } |
| #4596 | |
| #4597 | .profile-stat-grid label { |
| #4598 | display: block; |
| #4599 | color: var(--text-3); |
| #4600 | font-size: 9px; |
| #4601 | line-height: 1.2; |
| #4602 | margin-top: 3px; |
| #4603 | text-transform: uppercase; |
| #4604 | letter-spacing: 0.04em; |
| #4605 | } |
| #4606 | |
| #4607 | .profile-section { |
| #4608 | position: relative; |
| #4609 | z-index: 1; |
| #4610 | margin-top: 12px; |
| #4611 | } |
| #4612 | |
| #4613 | .profile-section-title { |
| #4614 | color: var(--text-3); |
| #4615 | font-size: 10px; |
| #4616 | letter-spacing: 0.08em; |
| #4617 | text-transform: uppercase; |
| #4618 | margin-bottom: 7px; |
| #4619 | } |
| #4620 | |
| #4621 | .badge-gallery { |
| #4622 | display: flex; |
| #4623 | flex-wrap: wrap; |
| #4624 | gap: 6px; |
| #4625 | } |
| #4626 | |
| #4627 | .earned-badge { |
| #4628 | padding: 0 8px; |
| #4629 | color: var(--text-2); |
| #4630 | border: 1px solid rgba(255,255,255,0.065); |
| #4631 | background: rgba(0,0,0,0.22); |
| #4632 | cursor: var(--cursor-sovereign); |
| #4633 | transition: border-color 160ms ease, color 160ms ease, transform 160ms ease; |
| #4634 | } |
| #4635 | |
| #4636 | .earned-badge:hover { |
| #4637 | color: var(--gold-1); |
| #4638 | border-color: color-mix(in srgb, var(--trust-primary, var(--gold-2)) 48%, var(--border)); |
| #4639 | transform: translateY(-1px); |
| #4640 | } |
| #4641 | |
| #4642 | .earned-tier { |
| #4643 | color: var(--gold-1); |
| #4644 | border-color: color-mix(in srgb, var(--trust-primary, var(--gold-2)) 38%, var(--border)); |
| #4645 | } |
| #4646 | |
| #4647 | .earned-origin_founder { |
| #4648 | color: #ffe9a6; |
| #4649 | border-color: rgba(212,175,55,0.52); |
| #4650 | background: linear-gradient(135deg, rgba(212,175,55,0.16), rgba(0,0,0,0.28)); |
| #4651 | } |
| #4652 | |
| #4653 | .earned-founder_executor { |
| #4654 | color: #f8d978; |
| #4655 | border-color: rgba(248,217,120,0.64); |
| #4656 | background: |
| #4657 | linear-gradient(135deg, rgba(248,217,120,0.18), rgba(0,0,0,0.72)), |
| #4658 | #050505; |
| #4659 | box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035), 0 0 16px rgba(248,217,120,0.08); |
| #4660 | } |
| #4661 | |
| #4662 | .campaign-list { |
| #4663 | display: grid; |
| #4664 | gap: 6px; |
| #4665 | } |
| #4666 | |
| #4667 | .campaign-row { |
| #4668 | border-radius: 7px; |
| #4669 | border: 1px solid rgba(255,255,255,0.055); |
| #4670 | background: rgba(0,0,0,0.18); |
| #4671 | padding: 7px 9px; |
| #4672 | color: var(--text-2); |
| #4673 | font-size: 12px; |
| #4674 | line-height: 1.3; |
| #4675 | } |
| #4676 | |
| #4677 | .campaign-row.muted { |
| #4678 | color: var(--text-3); |
| #4679 | } |
| #4680 | |
| #4681 | .membership-grid { |
| #4682 | display: grid; |
| #4683 | grid-template-columns: repeat(2, minmax(0, 1fr)); |
| #4684 | gap: 8px; |
| #4685 | } |
| #4686 | |
| #4687 | .membership-grid div, |
| #4688 | .pool-panel { |
| #4689 | border-radius: 7px; |
| #4690 | border: 1px solid rgba(255,255,255,0.055); |
| #4691 | background: rgba(0,0,0,0.18); |
| #4692 | padding: 8px 9px; |
| #4693 | } |
| #4694 | |
| #4695 | .membership-grid span, |
| #4696 | .membership-grid small { |
| #4697 | display: block; |
| #4698 | color: var(--text-3); |
| #4699 | font-size: 10px; |
| #4700 | line-height: 1.25; |
| #4701 | text-transform: uppercase; |
| #4702 | letter-spacing: 0.04em; |
| #4703 | } |
| #4704 | |
| #4705 | .membership-grid strong { |
| #4706 | display: block; |
| #4707 | color: var(--text-1); |
| #4708 | font-size: 13px; |
| #4709 | line-height: 1.25; |
| #4710 | margin: 3px 0; |
| #4711 | } |
| #4712 | |
| #4713 | .membership-grid .pma-paid { |
| #4714 | color: var(--green); |
| #4715 | } |
| #4716 | |
| #4717 | .membership-grid .pma-pending { |
| #4718 | color: var(--amber); |
| #4719 | } |
| #4720 | |
| #4721 | .pool-panel { |
| #4722 | display: grid; |
| #4723 | gap: 8px; |
| #4724 | } |
| #4725 | |
| #4726 | .pool-bar { |
| #4727 | display: flex; |
| #4728 | height: 10px; |
| #4729 | overflow: hidden; |
| #4730 | border-radius: 999px; |
| #4731 | background: rgba(0,0,0,0.28); |
| #4732 | } |
| #4733 | |
| #4734 | .pool-bar span:nth-child(1) { |
| #4735 | background: var(--trust-primary, var(--gold-2)); |
| #4736 | } |
| #4737 | |
| #4738 | .pool-bar span:nth-child(2) { |
| #4739 | background: var(--blue); |
| #4740 | } |
| #4741 | |
| #4742 | .pool-bar span:nth-child(3) { |
| #4743 | background: var(--green); |
| #4744 | } |
| #4745 | |
| #4746 | .pool-legend { |
| #4747 | display: flex; |
| #4748 | flex-wrap: wrap; |
| #4749 | gap: 7px; |
| #4750 | color: var(--text-3); |
| #4751 | font-size: 10px; |
| #4752 | } |
| #4753 | |
| #4754 | .pool-share { |
| #4755 | display: flex; |
| #4756 | align-items: baseline; |
| #4757 | justify-content: space-between; |
| #4758 | gap: 10px; |
| #4759 | } |
| #4760 | |
| #4761 | .pool-share strong { |
| #4762 | color: var(--gold-1); |
| #4763 | font-size: 15px; |
| #4764 | } |
| #4765 | |
| #4766 | .pool-share span { |
| #4767 | color: var(--text-3); |
| #4768 | font-size: 11px; |
| #4769 | text-align: right; |
| #4770 | } |
| #4771 | |
| #4772 | .next-milestone { |
| #4773 | position: relative; |
| #4774 | z-index: 1; |
| #4775 | margin-top: 12px; |
| #4776 | padding-top: 10px; |
| #4777 | border-top: 1px solid rgba(255,255,255,0.055); |
| #4778 | } |
| #4779 | |
| #4780 | .next-milestone span { |
| #4781 | display: block; |
| #4782 | color: var(--text-3); |
| #4783 | font-size: 10px; |
| #4784 | letter-spacing: 0.08em; |
| #4785 | text-transform: uppercase; |
| #4786 | margin-bottom: 4px; |
| #4787 | } |
| #4788 | |
| #4789 | .next-milestone strong { |
| #4790 | display: block; |
| #4791 | color: var(--text-1); |
| #4792 | font-size: 12px; |
| #4793 | line-height: 1.35; |
| #4794 | } |
| #4795 | |
| #4796 | .profile-skeleton { |
| #4797 | background: linear-gradient(90deg, var(--bg-2), var(--bg-3), var(--bg-2)); |
| #4798 | background-size: 180% 100%; |
| #4799 | animation: profile-skeleton 1.8s ease-in-out infinite; |
| #4800 | } |
| #4801 | |
| #4802 | @keyframes profile-skeleton { |
| #4803 | 0%, 100% { background-position: 0% 50%; } |
| #4804 | 50% { background-position: 100% 50%; } |
| #4805 | } |
| #4806 | |
| #4807 | @media (max-width: 520px) { |
| #4808 | .profile-portrait-row { |
| #4809 | grid-template-columns: 1fr; |
| #4810 | justify-items: center; |
| #4811 | text-align: center; |
| #4812 | } |
| #4813 | |
| #4814 | .profile-stat-grid { |
| #4815 | grid-template-columns: repeat(2, minmax(0, 1fr)); |
| #4816 | } |
| #4817 | |
| #4818 | .profile-topline { |
| #4819 | flex-direction: column; |
| #4820 | } |
| #4821 | |
| #4822 | .profile-actions { |
| #4823 | align-self: stretch; |
| #4824 | justify-content: space-between; |
| #4825 | } |
| #4826 | |
| #4827 | .profile-edit-grid, |
| #4828 | .membership-grid { |
| #4829 | grid-template-columns: 1fr; |
| #4830 | } |
| #4831 | |
| #4832 | .sovereign-ladder { |
| #4833 | grid-template-columns: repeat(3, minmax(0, 1fr)); |
| #4834 | } |
| #4835 | |
| #4836 | .ladder-step::before { |
| #4837 | display: none; |
| #4838 | } |
| #4839 | |
| #4840 | .status-progression-top, |
| #4841 | .xp-next-target { |
| #4842 | align-items: flex-start; |
| #4843 | flex-direction: column; |
| #4844 | gap: 3px; |
| #4845 | } |
| #4846 | } |
| #4847 | |
| #4848 | .trust-wizard-page { |
| #4849 | min-height: 100vh; |
| #4850 | padding: 28px 18px 42px; |
| #4851 | background: |
| #4852 | radial-gradient(circle at 22% 0%, color-mix(in srgb, var(--trust-accent, var(--blue)) 13%, transparent), transparent 34%), |
| #4853 | radial-gradient(circle at 78% 8%, color-mix(in srgb, var(--trust-primary, var(--gold-2)) 13%, transparent), transparent 30%), |
| #4854 | var(--bg-1); |
| #4855 | } |
| #4856 | |
| #4857 | .trust-wizard-shell { |
| #4858 | width: min(1500px, 100%); |
| #4859 | margin: 0 auto; |
| #4860 | } |
| #4861 | |
| #4862 | .trust-wizard-header { |
| #4863 | display: grid; |
| #4864 | gap: 12px; |
| #4865 | margin-bottom: 22px; |
| #4866 | } |
| #4867 | |
| #4868 | .trust-back-link { |
| #4869 | width: max-content; |
| #4870 | color: var(--text-3); |
| #4871 | font-size: 12px; |
| #4872 | text-decoration: none; |
| #4873 | } |
| #4874 | |
| #4875 | .trust-back-link:hover { |
| #4876 | color: var(--gold-1); |
| #4877 | } |
| #4878 | |
| #4879 | .trust-eyebrow { |
| #4880 | margin: 0 0 6px; |
| #4881 | color: var(--gold-2); |
| #4882 | font-size: 11px; |
| #4883 | letter-spacing: 0.12em; |
| #4884 | text-transform: uppercase; |
| #4885 | } |
| #4886 | |
| #4887 | .trust-wizard-header h1 { |
| #4888 | margin: 0; |
| #4889 | color: var(--text-1); |
| #4890 | font-size: clamp(30px, 4vw, 54px); |
| #4891 | line-height: 1; |
| #4892 | } |
| #4893 | |
| #4894 | .trust-wizard-header p:last-child { |
| #4895 | max-width: 760px; |
| #4896 | margin: 10px 0 0; |
| #4897 | color: var(--text-2); |
| #4898 | font-size: 14px; |
| #4899 | line-height: 1.55; |
| #4900 | } |
| #4901 | |
| #4902 | .trust-stepper { |
| #4903 | display: grid; |
| #4904 | grid-template-columns: repeat(7, minmax(0, 1fr)); |
| #4905 | gap: 8px; |
| #4906 | margin-bottom: 16px; |
| #4907 | } |
| #4908 | |
| #4909 | .trust-step { |
| #4910 | min-height: 76px; |
| #4911 | padding: 10px 8px; |
| #4912 | border: 1px solid var(--border); |
| #4913 | border-radius: 8px; |
| #4914 | background: rgba(20,17,15,0.86); |
| #4915 | color: var(--text-3); |
| #4916 | text-align: left; |
| #4917 | transition: border-color 160ms ease, background 160ms ease, color 160ms ease; |
| #4918 | } |
| #4919 | |
| #4920 | .trust-step span { |
| #4921 | width: 24px; |
| #4922 | height: 24px; |
| #4923 | display: grid; |
| #4924 | place-items: center; |
| #4925 | border-radius: 50%; |
| #4926 | color: var(--text-3); |
| #4927 | border: 1px solid rgba(255,255,255,0.08); |
| #4928 | font-size: 11px; |
| #4929 | margin-bottom: 7px; |
| #4930 | } |
| #4931 | |
| #4932 | .trust-step strong, |
| #4933 | .trust-step small { |
| #4934 | display: block; |
| #4935 | overflow: hidden; |
| #4936 | text-overflow: ellipsis; |
| #4937 | white-space: nowrap; |
| #4938 | } |
| #4939 | |
| #4940 | .trust-step strong { |
| #4941 | color: var(--text-2); |
| #4942 | font-size: 12px; |
| #4943 | line-height: 1.2; |
| #4944 | } |
| #4945 | |
| #4946 | .trust-step small { |
| #4947 | color: var(--text-4); |
| #4948 | font-size: 10px; |
| #4949 | margin-top: 3px; |
| #4950 | } |
| #4951 | |
| #4952 | .trust-step.active { |
| #4953 | border-color: color-mix(in srgb, var(--trust-primary, var(--gold-2)) 55%, var(--border)); |
| #4954 | background: linear-gradient(180deg, color-mix(in srgb, var(--trust-primary, var(--gold-2)) 10%, var(--bg-card)), var(--bg-2)); |
| #4955 | } |
| #4956 | |
| #4957 | .trust-step.active span, |
| #4958 | .trust-step.complete span { |
| #4959 | color: var(--bg-1); |
| #4960 | background: var(--trust-primary, var(--gold-2)); |
| #4961 | border-color: var(--trust-primary, var(--gold-2)); |
| #4962 | } |
| #4963 | |
| #4964 | .trust-step.active strong { |
| #4965 | color: var(--gold-1); |
| #4966 | } |
| #4967 | |
| #4968 | .trust-step.complete strong { |
| #4969 | color: var(--text-1); |
| #4970 | } |
| #4971 | |
| #4972 | .trust-wizard-grid { |
| #4973 | display: grid; |
| #4974 | grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); |
| #4975 | gap: 16px; |
| #4976 | align-items: start; |
| #4977 | } |
| #4978 | |
| #4979 | .trust-wizard-card, |
| #4980 | .trust-preview-column { |
| #4981 | border: 1px solid var(--border); |
| #4982 | border-radius: 10px; |
| #4983 | background: linear-gradient(160deg, rgba(22,18,16,0.98), rgba(13,11,10,0.98)); |
| #4984 | box-shadow: 0 16px 40px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.025); |
| #4985 | } |
| #4986 | |
| #4987 | .trust-wizard-card { |
| #4988 | padding: 18px; |
| #4989 | } |
| #4990 | |
| #4991 | .trust-step-panel { |
| #4992 | animation: trust-step-in 260ms ease both; |
| #4993 | } |
| #4994 | |
| #4995 | @keyframes trust-step-in { |
| #4996 | from { opacity: 0; transform: translateY(6px); } |
| #4997 | to { opacity: 1; transform: translateY(0); } |
| #4998 | } |
| #4999 | |
| #5000 | .trust-panel-header { |
| #5001 | margin-bottom: 18px; |
| #5002 | border-bottom: 1px solid rgba(255,255,255,0.055); |
| #5003 | padding-bottom: 14px; |
| #5004 | } |
| #5005 | |
| #5006 | .trust-panel-header p { |
| #5007 | margin: 0 0 5px; |
| #5008 | color: var(--gold-2); |
| #5009 | font-size: 10px; |
| #5010 | letter-spacing: 0.1em; |
| #5011 | text-transform: uppercase; |
| #5012 | } |
| #5013 | |
| #5014 | .trust-panel-header h2 { |
| #5015 | margin: 0; |
| #5016 | color: var(--text-1); |
| #5017 | font-size: 24px; |
| #5018 | } |
| #5019 | |
| #5020 | .trust-panel-header span { |
| #5021 | display: block; |
| #5022 | max-width: 760px; |
| #5023 | color: var(--text-2); |
| #5024 | font-size: 13px; |
| #5025 | line-height: 1.55; |
| #5026 | margin-top: 7px; |
| #5027 | } |
| #5028 | |
| #5029 | .field-grid { |
| #5030 | display: grid; |
| #5031 | grid-template-columns: repeat(2, minmax(0, 1fr)); |
| #5032 | gap: 12px; |
| #5033 | } |
| #5034 | |
| #5035 | .field-grid.three { |
| #5036 | grid-template-columns: repeat(3, minmax(0, 1fr)); |
| #5037 | margin-top: 12px; |
| #5038 | } |
| #5039 | |
| #5040 | .trust-field { |
| #5041 | display: grid; |
| #5042 | gap: 6px; |
| #5043 | } |
| #5044 | |
| #5045 | .trust-field span, |
| #5046 | .seal-generate-box label { |
| #5047 | color: var(--text-3); |
| #5048 | font-size: 11px; |
| #5049 | letter-spacing: 0.05em; |
| #5050 | text-transform: uppercase; |
| #5051 | } |
| #5052 | |
| #5053 | .trust-field input, |
| #5054 | .seal-generate-box textarea { |
| #5055 | width: 100%; |
| #5056 | min-height: 42px; |
| #5057 | border: 1px solid var(--border); |
| #5058 | border-radius: 8px; |
| #5059 | background: var(--bg-1); |
| #5060 | color: var(--text-1); |
| #5061 | padding: 9px 11px; |
| #5062 | font-size: 14px; |
| #5063 | outline: none; |
| #5064 | } |
| #5065 | |
| #5066 | .trust-field input:focus, |
| #5067 | .seal-generate-box textarea:focus { |
| #5068 | border-color: color-mix(in srgb, var(--trust-primary, var(--gold-2)) 48%, var(--border)); |
| #5069 | } |
| #5070 | |
| #5071 | .trust-name-options { |
| #5072 | display: grid; |
| #5073 | gap: 9px; |
| #5074 | margin-bottom: 12px; |
| #5075 | } |
| #5076 | |
| #5077 | .trust-name-option { |
| #5078 | border: 1px solid var(--border); |
| #5079 | border-radius: 8px; |
| #5080 | background: rgba(0,0,0,0.18); |
| #5081 | padding: 12px; |
| #5082 | color: var(--text-2); |
| #5083 | text-align: left; |
| #5084 | } |
| #5085 | |
| #5086 | .trust-name-option.selected { |
| #5087 | border-color: color-mix(in srgb, var(--trust-primary, var(--gold-2)) 60%, var(--border)); |
| #5088 | background: color-mix(in srgb, var(--trust-primary, var(--gold-2)) 10%, transparent); |
| #5089 | } |
| #5090 | |
| #5091 | .trust-name-option span, |
| #5092 | .trust-name-option small { |
| #5093 | display: block; |
| #5094 | } |
| #5095 | |
| #5096 | .trust-name-option span { |
| #5097 | color: var(--text-1); |
| #5098 | font-family: var(--font-serif), Georgia, serif; |
| #5099 | font-size: 18px; |
| #5100 | } |
| #5101 | |
| #5102 | .trust-name-option small { |
| #5103 | color: var(--gold-2); |
| #5104 | margin-top: 5px; |
| #5105 | font-size: 11px; |
| #5106 | } |
| #5107 | |
| #5108 | .tradition-note, |
| #5109 | .ucc-validation, |
| #5110 | .secured-toggle, |
| #5111 | .activate-summary { |
| #5112 | border: 1px solid rgba(255,255,255,0.06); |
| #5113 | border-radius: 8px; |
| #5114 | background: rgba(0,0,0,0.18); |
| #5115 | } |
| #5116 | |
| #5117 | .tradition-note { |
| #5118 | display: flex; |
| #5119 | gap: 10px; |
| #5120 | align-items: flex-start; |
| #5121 | color: var(--text-2); |
| #5122 | padding: 11px; |
| #5123 | margin: 12px 0; |
| #5124 | } |
| #5125 | |
| #5126 | .tradition-note svg { |
| #5127 | color: var(--gold-2); |
| #5128 | flex: 0 0 auto; |
| #5129 | margin-top: 2px; |
| #5130 | } |
| #5131 | |
| #5132 | .tradition-note p { |
| #5133 | margin: 0; |
| #5134 | font-size: 13px; |
| #5135 | line-height: 1.45; |
| #5136 | } |
| #5137 | |
| #5138 | .seal-workbench { |
| #5139 | display: grid; |
| #5140 | grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); |
| #5141 | gap: 12px; |
| #5142 | } |
| #5143 | |
| #5144 | .seal-dropzone { |
| #5145 | min-height: 160px; |
| #5146 | border: 1px dashed color-mix(in srgb, var(--trust-primary, var(--gold-2)) 44%, var(--border)); |
| #5147 | border-radius: 9px; |
| #5148 | background: color-mix(in srgb, var(--trust-primary, var(--gold-2)) 7%, rgba(0,0,0,0.22)); |
| #5149 | color: var(--text-2); |
| #5150 | display: grid; |
| #5151 | place-items: center; |
| #5152 | align-content: center; |
| #5153 | gap: 8px; |
| #5154 | cursor: pointer; |
| #5155 | } |
| #5156 | |
| #5157 | .seal-dropzone svg { |
| #5158 | color: var(--gold-2); |
| #5159 | } |
| #5160 | |
| #5161 | .seal-dropzone span, |
| #5162 | .seal-dropzone small { |
| #5163 | display: block; |
| #5164 | } |
| #5165 | |
| #5166 | .seal-dropzone small { |
| #5167 | color: var(--text-4); |
| #5168 | font-size: 11px; |
| #5169 | } |
| #5170 | |
| #5171 | .seal-dropzone input { |
| #5172 | display: none; |
| #5173 | } |
| #5174 | |
| #5175 | .seal-generate-box { |
| #5176 | display: grid; |
| #5177 | gap: 8px; |
| #5178 | } |
| #5179 | |
| #5180 | .seal-generate-box textarea { |
| #5181 | min-height: 104px; |
| #5182 | resize: vertical; |
| #5183 | } |
| #5184 | |
| #5185 | .seal-study-grid, |
| #5186 | .palette-grid, |
| #5187 | .doc-check-grid { |
| #5188 | display: grid; |
| #5189 | gap: 10px; |
| #5190 | } |
| #5191 | |
| #5192 | .seal-study-grid { |
| #5193 | grid-template-columns: repeat(4, minmax(0, 1fr)); |
| #5194 | margin-top: 12px; |
| #5195 | } |
| #5196 | |
| #5197 | .seal-study, |
| #5198 | .palette-preset, |
| #5199 | .doc-check-grid label { |
| #5200 | border: 1px solid var(--border); |
| #5201 | border-radius: 8px; |
| #5202 | background: rgba(0,0,0,0.2); |
| #5203 | color: var(--text-2); |
| #5204 | } |
| #5205 | |
| #5206 | .seal-study { |
| #5207 | min-height: 116px; |
| #5208 | display: grid; |
| #5209 | place-items: center; |
| #5210 | gap: 8px; |
| #5211 | padding: 10px; |
| #5212 | } |
| #5213 | |
| #5214 | .seal-study.selected { |
| #5215 | border-color: color-mix(in srgb, var(--trust-primary, var(--gold-2)) 62%, var(--border)); |
| #5216 | } |
| #5217 | |
| #5218 | .seal-study img { |
| #5219 | width: 68px; |
| #5220 | height: 68px; |
| #5221 | border-radius: 50%; |
| #5222 | object-fit: cover; |
| #5223 | } |
| #5224 | |
| #5225 | .seal-study span { |
| #5226 | font-size: 11px; |
| #5227 | } |
| #5228 | |
| #5229 | .generated-seal { |
| #5230 | width: 86px; |
| #5231 | height: 86px; |
| #5232 | border-radius: 50%; |
| #5233 | display: grid; |
| #5234 | place-items: center; |
| #5235 | color: var(--trust-secondary, #050505); |
| #5236 | background: |
| #5237 | radial-gradient(circle at 35% 28%, rgba(255,255,255,0.34), transparent 18%), |
| #5238 | radial-gradient(circle, var(--trust-primary, var(--gold-2)), color-mix(in srgb, var(--trust-primary, var(--gold-2)) 72%, #6b4a11)); |
| #5239 | border: 3px solid color-mix(in srgb, var(--trust-primary, var(--gold-2)) 72%, #000); |
| #5240 | box-shadow: inset 0 0 0 5px rgba(0,0,0,0.2), 0 8px 18px rgba(0,0,0,0.35); |
| #5241 | font-family: var(--font-serif), Georgia, serif; |
| #5242 | font-weight: 800; |
| #5243 | letter-spacing: 0.04em; |
| #5244 | } |
| #5245 | |
| #5246 | .generated-seal.double { |
| #5247 | box-shadow: inset 0 0 0 4px rgba(0,0,0,0.22), inset 0 0 0 10px rgba(255,255,255,0.12), 0 8px 18px rgba(0,0,0,0.35); |
| #5248 | } |
| #5249 | |
| #5250 | .generated-seal.compact { |
| #5251 | width: 68px; |
| #5252 | height: 68px; |
| #5253 | font-size: 13px; |
| #5254 | } |
| #5255 | |
| #5256 | .palette-grid { |
| #5257 | grid-template-columns: repeat(4, minmax(0, 1fr)); |
| #5258 | margin-top: 14px; |
| #5259 | } |
| #5260 | |
| #5261 | .palette-preset { |
| #5262 | padding: 10px; |
| #5263 | text-align: left; |
| #5264 | } |
| #5265 | |
| #5266 | .palette-swatches { |
| #5267 | display: flex; |
| #5268 | gap: 4px; |
| #5269 | margin-bottom: 8px; |
| #5270 | } |
| #5271 | |
| #5272 | .palette-swatches i { |
| #5273 | width: 22px; |
| #5274 | height: 22px; |
| #5275 | border-radius: 50%; |
| #5276 | border: 1px solid rgba(255,255,255,0.14); |
| #5277 | } |
| #5278 | |
| #5279 | .palette-preset strong { |
| #5280 | color: var(--text-2); |
| #5281 | font-size: 12px; |
| #5282 | } |
| #5283 | |
| #5284 | .ucc-validation { |
| #5285 | display: flex; |
| #5286 | align-items: center; |
| #5287 | gap: 8px; |
| #5288 | margin-top: 12px; |
| #5289 | padding: 10px; |
| #5290 | font-size: 13px; |
| #5291 | } |
| #5292 | |
| #5293 | .ucc-validation.valid { |
| #5294 | color: var(--green); |
| #5295 | } |
| #5296 | |
| #5297 | .ucc-validation.invalid { |
| #5298 | color: var(--amber); |
| #5299 | } |
| #5300 | |
| #5301 | .filing-link { |
| #5302 | display: inline-block; |
| #5303 | margin-top: 11px; |
| #5304 | color: var(--gold-2); |
| #5305 | font-size: 13px; |
| #5306 | } |
| #5307 | |
| #5308 | .secured-toggle { |
| #5309 | width: 100%; |
| #5310 | display: grid; |
| #5311 | gap: 5px; |
| #5312 | padding: 16px; |
| #5313 | text-align: left; |
| #5314 | } |
| #5315 | |
| #5316 | .secured-toggle.selected { |
| #5317 | border-color: color-mix(in srgb, var(--trust-primary, var(--gold-2)) 60%, var(--border)); |
| #5318 | } |
| #5319 | |
| #5320 | .secured-toggle span { |
| #5321 | color: var(--text-1); |
| #5322 | font-size: 16px; |
| #5323 | } |
| #5324 | |
| #5325 | .secured-toggle small { |
| #5326 | color: var(--text-3); |
| #5327 | } |
| #5328 | |
| #5329 | .doc-check-grid { |
| #5330 | grid-template-columns: repeat(2, minmax(0, 1fr)); |
| #5331 | } |
| #5332 | |
| #5333 | .doc-check-grid label { |
| #5334 | display: flex; |
| #5335 | gap: 9px; |
| #5336 | align-items: center; |
| #5337 | padding: 12px; |
| #5338 | font-size: 13px; |
| #5339 | } |
| #5340 | |
| #5341 | .doc-check-grid input { |
| #5342 | accent-color: var(--trust-primary, var(--gold-2)); |
| #5343 | } |
| #5344 | |
| #5345 | .activate-summary { |
| #5346 | display: grid; |
| #5347 | gap: 9px; |
| #5348 | padding: 12px; |
| #5349 | } |
| #5350 | |
| #5351 | .activate-summary div { |
| #5352 | display: flex; |
| #5353 | justify-content: space-between; |
| #5354 | gap: 12px; |
| #5355 | border-bottom: 1px solid rgba(255,255,255,0.05); |
| #5356 | padding-bottom: 8px; |
| #5357 | } |
| #5358 | |
| #5359 | .activate-summary div:last-child { |
| #5360 | border-bottom: 0; |
| #5361 | padding-bottom: 0; |
| #5362 | } |
| #5363 | |
| #5364 | .activate-summary span { |
| #5365 | color: var(--text-3); |
| #5366 | font-size: 12px; |
| #5367 | } |
| #5368 | |
| #5369 | .activate-summary strong { |
| #5370 | color: var(--text-1); |
| #5371 | text-align: right; |
| #5372 | } |
| #5373 | |
| #5374 | .trust-step-actions { |
| #5375 | display: flex; |
| #5376 | justify-content: space-between; |
| #5377 | gap: 10px; |
| #5378 | margin-top: 20px; |
| #5379 | padding-top: 14px; |
| #5380 | border-top: 1px solid rgba(255,255,255,0.055); |
| #5381 | } |
| #5382 | |
| #5383 | .trust-preview-column { |
| #5384 | position: sticky; |
| #5385 | top: 18px; |
| #5386 | padding: 14px; |
| #5387 | } |
| #5388 | |
| #5389 | .trust-preview-stack { |
| #5390 | display: grid; |
| #5391 | gap: 12px; |
| #5392 | } |
| #5393 | |
| #5394 | .preview-header { |
| #5395 | display: flex; |
| #5396 | justify-content: space-between; |
| #5397 | gap: 12px; |
| #5398 | align-items: baseline; |
| #5399 | } |
| #5400 | |
| #5401 | .preview-header span { |
| #5402 | color: var(--text-3); |
| #5403 | font-size: 10px; |
| #5404 | letter-spacing: 0.08em; |
| #5405 | text-transform: uppercase; |
| #5406 | } |
| #5407 | |
| #5408 | .preview-header strong { |
| #5409 | color: var(--gold-1); |
| #5410 | font-size: 12px; |
| #5411 | } |
| #5412 | |
| #5413 | .pmo-preview, |
| #5414 | .id-preview, |
| #5415 | .affidavit-preview { |
| #5416 | border-radius: 8px; |
| #5417 | border: 1px solid color-mix(in srgb, var(--trust-primary, var(--gold-2)) 28%, var(--border)); |
| #5418 | background: #efe5cf; |
| #5419 | color: #15110b; |
| #5420 | box-shadow: 0 12px 24px rgba(0,0,0,0.32); |
| #5421 | } |
| #5422 | |
| #5423 | .pmo-preview { |
| #5424 | position: relative; |
| #5425 | min-height: 230px; |
| #5426 | padding: 20px; |
| #5427 | overflow: hidden; |
| #5428 | } |
| #5429 | |
| #5430 | .pmo-preview::before, |
| #5431 | .affidavit-preview::before { |
| #5432 | content: ''; |
| #5433 | position: absolute; |
| #5434 | inset: 10px; |
| #5435 | border: 1px solid rgba(90,62,20,0.22); |
| #5436 | pointer-events: none; |
| #5437 | } |
| #5438 | |
| #5439 | .instrument-label { |
| #5440 | margin: 0 0 6px; |
| #5441 | color: #6d4e19; |
| #5442 | font-size: 10px; |
| #5443 | letter-spacing: 0.12em; |
| #5444 | text-transform: uppercase; |
| #5445 | } |
| #5446 | |
| #5447 | .pmo-preview h3, |
| #5448 | .affidavit-preview h3 { |
| #5449 | max-width: 72%; |
| #5450 | margin: 0 0 18px; |
| #5451 | font-family: Georgia, serif; |
| #5452 | font-size: 20px; |
| #5453 | line-height: 1.1; |
| #5454 | } |
| #5455 | |
| #5456 | .pmo-line { |
| #5457 | display: flex; |
| #5458 | justify-content: space-between; |
| #5459 | border-bottom: 1px solid rgba(0,0,0,0.18); |
| #5460 | padding: 8px 0; |
| #5461 | font-size: 12px; |
| #5462 | } |
| #5463 | |
| #5464 | .pmo-line span { |
| #5465 | color: #6d5c3f; |
| #5466 | } |
| #5467 | |
| #5468 | .pmo-preview footer { |
| #5469 | position: absolute; |
| #5470 | left: 20px; |
| #5471 | bottom: 16px; |
| #5472 | color: #6d5c3f; |
| #5473 | font-size: 11px; |
| #5474 | } |
| #5475 | |
| #5476 | .preview-seal { |
| #5477 | width: 76px; |
| #5478 | height: 76px; |
| #5479 | border-radius: 50%; |
| #5480 | overflow: hidden; |
| #5481 | display: grid; |
| #5482 | place-items: center; |
| #5483 | } |
| #5484 | |
| #5485 | .preview-seal img { |
| #5486 | width: 100%; |
| #5487 | height: 100%; |
| #5488 | object-fit: cover; |
| #5489 | } |
| #5490 | |
| #5491 | .preview-seal.materialize { |
| #5492 | animation: seal-materialize 1200ms ease both; |
| #5493 | } |
| #5494 | |
| #5495 | @keyframes seal-materialize { |
| #5496 | 0% { opacity: 0; transform: scale(0.86); filter: blur(8px); } |
| #5497 | 44% { opacity: 1; transform: scale(1.04); filter: blur(0); } |
| #5498 | 100% { opacity: 1; transform: scale(1); filter: blur(0); } |
| #5499 | } |
| #5500 | |
| #5501 | .pmo-preview > .preview-seal { |
| #5502 | position: absolute; |
| #5503 | right: 18px; |
| #5504 | top: 18px; |
| #5505 | } |
| #5506 | |
| #5507 | .id-preview { |
| #5508 | display: grid; |
| #5509 | grid-template-columns: 1fr 1fr; |
| #5510 | overflow: hidden; |
| #5511 | background: #111; |
| #5512 | color: #f4efe0; |
| #5513 | } |
| #5514 | |
| #5515 | .id-front, |
| #5516 | .id-back { |
| #5517 | min-height: 176px; |
| #5518 | padding: 16px; |
| #5519 | } |
| #5520 | |
| #5521 | .id-front { |
| #5522 | display: grid; |
| #5523 | grid-template-columns: 64px minmax(0, 1fr); |
| #5524 | gap: 12px; |
| #5525 | position: relative; |
| #5526 | background: linear-gradient(135deg, var(--trust-secondary, #050505), #17120c); |
| #5527 | } |
| #5528 | |
| #5529 | .id-front .preview-seal { |
| #5530 | position: absolute; |
| #5531 | right: 12px; |
| #5532 | bottom: 12px; |
| #5533 | width: 48px; |
| #5534 | height: 48px; |
| #5535 | } |
| #5536 | |
| #5537 | .id-photo { |
| #5538 | width: 64px; |
| #5539 | height: 80px; |
| #5540 | border-radius: 5px; |
| #5541 | display: grid; |
| #5542 | place-items: center; |
| #5543 | color: var(--trust-primary, var(--gold-2)); |
| #5544 | border: 1px solid color-mix(in srgb, var(--trust-primary, var(--gold-2)) 40%, rgba(255,255,255,0.1)); |
| #5545 | background: rgba(255,255,255,0.04); |
| #5546 | font-family: Georgia, serif; |
| #5547 | font-size: 22px; |
| #5548 | font-weight: 700; |
| #5549 | } |
| #5550 | |
| #5551 | .id-front p, |
| #5552 | .id-front h3, |
| #5553 | .id-front span { |
| #5554 | margin: 0; |
| #5555 | } |
| #5556 | |
| #5557 | .id-front p { |
| #5558 | color: var(--trust-primary, var(--gold-2)); |
| #5559 | font-size: 10px; |
| #5560 | letter-spacing: 0.1em; |
| #5561 | text-transform: uppercase; |
| #5562 | } |
| #5563 | |
| #5564 | .id-front h3 { |
| #5565 | color: #fff; |
| #5566 | font-size: 16px; |
| #5567 | margin: 7px 0; |
| #5568 | } |
| #5569 | |
| #5570 | .id-front span { |
| #5571 | color: #c9bda5; |
| #5572 | font-size: 11px; |
| #5573 | line-height: 1.3; |
| #5574 | } |
| #5575 | |
| #5576 | .id-back { |
| #5577 | position: relative; |
| #5578 | display: grid; |
| #5579 | align-content: start; |
| #5580 | gap: 4px; |
| #5581 | background: #eee4cc; |
| #5582 | color: #17120c; |
| #5583 | overflow: hidden; |
| #5584 | } |
| #5585 | |
| #5586 | .id-watermark { |
| #5587 | position: absolute; |
| #5588 | right: 10px; |
| #5589 | bottom: -8px; |
| #5590 | color: rgba(0,0,0,0.06); |
| #5591 | font-family: Georgia, serif; |
| #5592 | font-size: 64px; |
| #5593 | font-weight: 800; |
| #5594 | } |
| #5595 | |
| #5596 | .id-back span { |
| #5597 | color: #75633f; |
| #5598 | font-size: 9px; |
| #5599 | letter-spacing: 0.08em; |
| #5600 | text-transform: uppercase; |
| #5601 | } |
| #5602 | |
| #5603 | .id-back strong { |
| #5604 | position: relative; |
| #5605 | z-index: 1; |
| #5606 | color: #17120c; |
| #5607 | font-size: 11px; |
| #5608 | margin-bottom: 7px; |
| #5609 | } |
| #5610 | |
| #5611 | .affidavit-preview { |
| #5612 | position: relative; |
| #5613 | min-height: 132px; |
| #5614 | display: flex; |
| #5615 | justify-content: space-between; |
| #5616 | gap: 16px; |
| #5617 | padding: 18px; |
| #5618 | overflow: hidden; |
| #5619 | } |
| #5620 | |
| #5621 | .affidavit-preview p, |
| #5622 | .affidavit-preview h3, |
| #5623 | .affidavit-preview span { |
| #5624 | position: relative; |
| #5625 | z-index: 1; |
| #5626 | } |
| #5627 | |
| #5628 | .affidavit-preview p { |
| #5629 | margin: 0 0 6px; |
| #5630 | color: #6d4e19; |
| #5631 | font-size: 10px; |
| #5632 | letter-spacing: 0.12em; |
| #5633 | text-transform: uppercase; |
| #5634 | } |
| #5635 | |
| #5636 | .affidavit-preview span { |
| #5637 | color: #6d5c3f; |
| #5638 | font-size: 12px; |
| #5639 | } |
| #5640 | |
| #5641 | .affidavit-preview .preview-seal { |
| #5642 | position: relative; |
| #5643 | z-index: 1; |
| #5644 | flex: 0 0 auto; |
| #5645 | } |
| #5646 | |
| #5647 | @media (max-width: 1120px) { |
| #5648 | .trust-wizard-grid { |
| #5649 | grid-template-columns: 1fr; |
| #5650 | } |
| #5651 | |
| #5652 | .trust-preview-column { |
| #5653 | position: static; |
| #5654 | } |
| #5655 | } |
| #5656 | |
| #5657 | @media (max-width: 820px) { |
| #5658 | .trust-stepper { |
| #5659 | grid-template-columns: repeat(2, minmax(0, 1fr)); |
| #5660 | } |
| #5661 | |
| #5662 | .seal-workbench, |
| #5663 | .field-grid, |
| #5664 | .field-grid.three, |
| #5665 | .seal-study-grid, |
| #5666 | .palette-grid, |
| #5667 | .doc-check-grid, |
| #5668 | .id-preview { |
| #5669 | grid-template-columns: 1fr; |
| #5670 | } |
| #5671 | |
| #5672 | .trust-step { |
| #5673 | min-height: 66px; |
| #5674 | } |
| #5675 | } |
| #5676 | |
| #5677 | .affidavit-page { |
| #5678 | min-height: 100vh; |
| #5679 | padding: 28px; |
| #5680 | color: var(--text-1); |
| #5681 | background: |
| #5682 | radial-gradient(circle at 72% 0%, color-mix(in srgb, var(--affidavit-primary, var(--gold-2)) 12%, transparent), transparent 34%), |
| #5683 | linear-gradient(180deg, #0a0908 0%, #120f0d 100%); |
| #5684 | } |
| #5685 | |
| #5686 | .affidavit-page-header { |
| #5687 | max-width: 1360px; |
| #5688 | margin: 0 auto 22px; |
| #5689 | } |
| #5690 | |
| #5691 | .affidavit-page-header h1 { |
| #5692 | margin: 6px 0 8px; |
| #5693 | color: var(--gold-1); |
| #5694 | font-size: clamp(32px, 4vw, 52px); |
| #5695 | line-height: 0.95; |
| #5696 | } |
| #5697 | |
| #5698 | .affidavit-page-header p { |
| #5699 | max-width: 740px; |
| #5700 | color: var(--text-2); |
| #5701 | } |
| #5702 | |
| #5703 | .affidavit-workbench { |
| #5704 | display: grid; |
| #5705 | grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); |
| #5706 | gap: 22px; |
| #5707 | align-items: start; |
| #5708 | max-width: 1360px; |
| #5709 | margin: 0 auto; |
| #5710 | } |
| #5711 | |
| #5712 | .affidavit-control-panel { |
| #5713 | position: sticky; |
| #5714 | top: 22px; |
| #5715 | display: flex; |
| #5716 | flex-direction: column; |
| #5717 | gap: 16px; |
| #5718 | padding: 18px; |
| #5719 | border-radius: 10px; |
| #5720 | border: 1px solid color-mix(in srgb, var(--affidavit-primary, var(--gold-2)) 30%, var(--border)); |
| #5721 | background: linear-gradient(160deg, rgba(24, 19, 15, 0.98), rgba(14, 12, 10, 0.98)); |
| #5722 | box-shadow: 0 18px 60px rgba(0,0,0,0.36); |
| #5723 | } |
| #5724 | |
| #5725 | .affidavit-panel-heading { |
| #5726 | display: flex; |
| #5727 | gap: 11px; |
| #5728 | align-items: flex-start; |
| #5729 | color: var(--gold-1); |
| #5730 | } |
| #5731 | |
| #5732 | .affidavit-panel-heading h2 { |
| #5733 | margin: 0; |
| #5734 | font-size: 22px; |
| #5735 | } |
| #5736 | |
| #5737 | .affidavit-panel-heading p { |
| #5738 | margin: 3px 0 0; |
| #5739 | color: var(--text-3); |
| #5740 | font-size: 13px; |
| #5741 | } |
| #5742 | |
| #5743 | .affidavit-control-group { |
| #5744 | display: grid; |
| #5745 | gap: 10px; |
| #5746 | } |
| #5747 | |
| #5748 | .affidavit-control-group h3 { |
| #5749 | margin: 2px 0 0; |
| #5750 | color: var(--gold-2); |
| #5751 | font-size: 15px; |
| #5752 | } |
| #5753 | |
| #5754 | .affidavit-control-group label { |
| #5755 | display: grid; |
| #5756 | gap: 6px; |
| #5757 | color: var(--text-2); |
| #5758 | font-size: 12px; |
| #5759 | } |
| #5760 | |
| #5761 | .affidavit-control-group input, |
| #5762 | .affidavit-control-group textarea { |
| #5763 | width: 100%; |
| #5764 | border-radius: 7px; |
| #5765 | border: 1px solid var(--border); |
| #5766 | background: rgba(0,0,0,0.26); |
| #5767 | color: var(--text-1); |
| #5768 | padding: 9px 10px; |
| #5769 | font-size: 13px; |
| #5770 | line-height: 1.4; |
| #5771 | outline: none; |
| #5772 | } |
| #5773 | |
| #5774 | .affidavit-control-group input:focus, |
| #5775 | .affidavit-control-group textarea:focus { |
| #5776 | border-color: color-mix(in srgb, var(--affidavit-primary, var(--gold-2)) 62%, var(--border)); |
| #5777 | box-shadow: 0 0 0 2px color-mix(in srgb, var(--affidavit-primary, var(--gold-2)) 14%, transparent); |
| #5778 | } |
| #5779 | |
| #5780 | .affidavit-two-col, |
| #5781 | .affidavit-upload-grid { |
| #5782 | display: grid; |
| #5783 | grid-template-columns: repeat(2, minmax(0, 1fr)); |
| #5784 | gap: 10px; |
| #5785 | } |
| #5786 | |
| #5787 | .affidavit-upload-grid { |
| #5788 | grid-template-columns: 1fr; |
| #5789 | } |
| #5790 | |
| #5791 | .affidavit-file-drop { |
| #5792 | cursor: pointer; |
| #5793 | } |
| #5794 | |
| #5795 | .affidavit-file-drop input { |
| #5796 | display: none; |
| #5797 | } |
| #5798 | |
| #5799 | .affidavit-upload-empty, |
| #5800 | .affidavit-upload-preview { |
| #5801 | display: grid; |
| #5802 | min-height: 78px; |
| #5803 | gap: 5px; |
| #5804 | align-content: center; |
| #5805 | justify-items: start; |
| #5806 | padding: 10px; |
| #5807 | border-radius: 8px; |
| #5808 | border: 1px dashed color-mix(in srgb, var(--affidavit-primary, var(--gold-2)) 42%, var(--border)); |
| #5809 | background: rgba(0,0,0,0.22); |
| #5810 | color: var(--text-2); |
| #5811 | } |
| #5812 | |
| #5813 | .affidavit-upload-empty svg { |
| #5814 | color: var(--gold-2); |
| #5815 | } |
| #5816 | |
| #5817 | .affidavit-upload-empty strong, |
| #5818 | .affidavit-upload-preview span { |
| #5819 | color: var(--text-1); |
| #5820 | font-size: 12px; |
| #5821 | } |
| #5822 | |
| #5823 | .affidavit-upload-empty small { |
| #5824 | color: var(--text-3); |
| #5825 | font-size: 11px; |
| #5826 | } |
| #5827 | |
| #5828 | .affidavit-upload-preview { |
| #5829 | grid-template-columns: 48px minmax(0, 1fr); |
| #5830 | align-items: center; |
| #5831 | } |
| #5832 | |
| #5833 | .affidavit-upload-preview img { |
| #5834 | width: 48px; |
| #5835 | height: 48px; |
| #5836 | object-fit: cover; |
| #5837 | border-radius: 6px; |
| #5838 | } |
| #5839 | |
| #5840 | .affidavit-generate-button { |
| #5841 | display: inline-flex; |
| #5842 | justify-content: center; |
| #5843 | align-items: center; |
| #5844 | gap: 8px; |
| #5845 | min-height: 42px; |
| #5846 | border-radius: 8px; |
| #5847 | border: 1px solid color-mix(in srgb, var(--affidavit-primary, var(--gold-2)) 68%, #000); |
| #5848 | background: linear-gradient(180deg, var(--affidavit-primary, var(--gold-2)), var(--gold-3)); |
| #5849 | color: #080706; |
| #5850 | font-weight: 700; |
| #5851 | } |
| #5852 | |
| #5853 | .affidavit-generate-button:disabled { |
| #5854 | opacity: 0.48; |
| #5855 | cursor: not-allowed; |
| #5856 | } |
| #5857 | |
| #5858 | .affidavit-generation-note { |
| #5859 | margin: -4px 0 0; |
| #5860 | color: var(--text-3); |
| #5861 | font-size: 12px; |
| #5862 | } |
| #5863 | |
| #5864 | .affidavit-preview-stage { |
| #5865 | min-width: 0; |
| #5866 | display: grid; |
| #5867 | justify-items: center; |
| #5868 | } |
| #5869 | |
| #5870 | .affidavit-sheet { |
| #5871 | width: min(100%, 8.5in); |
| #5872 | min-height: 11in; |
| #5873 | padding: 0.52in; |
| #5874 | color: #1b1711; |
| #5875 | font-family: Georgia, 'Times New Roman', serif; |
| #5876 | background: |
| #5877 | radial-gradient(circle at 18% 20%, rgba(255,255,255,0.55), transparent 17%), |
| #5878 | radial-gradient(circle at 82% 0%, color-mix(in srgb, var(--affidavit-primary, var(--gold-2)) 18%, transparent), transparent 24%), |
| #5879 | linear-gradient(135deg, rgba(138, 112, 58, 0.08), transparent 36%), |
| #5880 | #f3e6c7; |
| #5881 | border-radius: 2px; |
| #5882 | box-shadow: |
| #5883 | 0 24px 80px rgba(0,0,0,0.52), |
| #5884 | inset 0 0 0 1px rgba(83, 59, 28, 0.16); |
| #5885 | } |
| #5886 | |
| #5887 | .affidavit-sheet-border { |
| #5888 | min-height: calc(11in - 1.04in); |
| #5889 | padding: 0.24in; |
| #5890 | border: 2px double color-mix(in srgb, var(--affidavit-primary, #b8923f) 78%, #3a2d17); |
| #5891 | background: |
| #5892 | linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.04) 38%, transparent), |
| #5893 | repeating-linear-gradient(90deg, rgba(80,55,25,0.018) 0 1px, transparent 1px 8px); |
| #5894 | } |
| #5895 | |
| #5896 | .affidavit-document-header { |
| #5897 | display: grid; |
| #5898 | grid-template-columns: 84px minmax(0, 1fr) 98px; |
| #5899 | gap: 14px; |
| #5900 | align-items: center; |
| #5901 | padding-bottom: 18px; |
| #5902 | border-bottom: 4px double color-mix(in srgb, var(--affidavit-primary, #b8923f) 72%, #4c3515); |
| #5903 | text-align: center; |
| #5904 | } |
| #5905 | |
| #5906 | .affidavit-document-header h2 { |
| #5907 | margin: 4px 0; |
| #5908 | color: #19140c; |
| #5909 | font-size: 28px; |
| #5910 | line-height: 1; |
| #5911 | letter-spacing: 0.08em; |
| #5912 | text-transform: uppercase; |
| #5913 | } |
| #5914 | |
| #5915 | .affidavit-document-header p, |
| #5916 | .affidavit-document-header small { |
| #5917 | margin: 0; |
| #5918 | color: #6c5120; |
| #5919 | letter-spacing: 0.06em; |
| #5920 | text-transform: uppercase; |
| #5921 | } |
| #5922 | |
| #5923 | .affidavit-emblem, |
| #5924 | .affidavit-embossed-seal { |
| #5925 | display: grid; |
| #5926 | place-items: center; |
| #5927 | border-radius: 50%; |
| #5928 | overflow: hidden; |
| #5929 | color: #2a1e0d; |
| #5930 | font-weight: 800; |
| #5931 | } |
| #5932 | |
| #5933 | .affidavit-emblem { |
| #5934 | width: 76px; |
| #5935 | height: 76px; |
| #5936 | border: 1px solid rgba(88, 60, 20, 0.36); |
| #5937 | background: rgba(255,255,255,0.18); |
| #5938 | } |
| #5939 | |
| #5940 | .affidavit-emblem img { |
| #5941 | width: 100%; |
| #5942 | height: 100%; |
| #5943 | object-fit: contain; |
| #5944 | } |
| #5945 | |
| #5946 | .affidavit-embossed-seal { |
| #5947 | width: 96px; |
| #5948 | height: 96px; |
| #5949 | padding: 8px; |
| #5950 | border: 2px solid rgba(118, 86, 28, 0.62); |
| #5951 | background: |
| #5952 | radial-gradient(circle at 35% 24%, rgba(255,255,255,0.72), transparent 22%), |
| #5953 | radial-gradient(circle at 62% 72%, rgba(83, 55, 20,0.22), transparent 34%), |
| #5954 | color-mix(in srgb, var(--affidavit-primary, #d4af37) 38%, #f5e7c9); |
| #5955 | box-shadow: |
| #5956 | inset 4px 5px 10px rgba(255,255,255,0.48), |
| #5957 | inset -6px -7px 12px rgba(74,49,16,0.24), |
| #5958 | 0 2px 1px rgba(95,67,22,0.24); |
| #5959 | } |
| #5960 | |
| #5961 | .affidavit-embossed-seal img { |
| #5962 | width: 100%; |
| #5963 | height: 100%; |
| #5964 | object-fit: contain; |
| #5965 | filter: sepia(0.18) saturate(0.95) contrast(1.04) drop-shadow(0 1px 1px rgba(73,52,14,0.26)); |
| #5966 | } |
| #5967 | |
| #5968 | .affidavit-photo-block { |
| #5969 | display: grid; |
| #5970 | justify-items: center; |
| #5971 | gap: 7px; |
| #5972 | margin: 22px 0 18px; |
| #5973 | } |
| #5974 | |
| #5975 | .affidavit-photo-frame { |
| #5976 | display: grid; |
| #5977 | place-items: center; |
| #5978 | width: 1.62in; |
| #5979 | height: 2.02in; |
| #5980 | border: 2px solid #2c261c; |
| #5981 | outline: 1px solid rgba(127, 94, 38, 0.42); |
| #5982 | outline-offset: 5px; |
| #5983 | background: #e8ddc5; |
| #5984 | color: #4d3a1b; |
| #5985 | font-size: 28px; |
| #5986 | font-weight: 700; |
| #5987 | } |
| #5988 | |
| #5989 | .affidavit-photo-frame img { |
| #5990 | width: 100%; |
| #5991 | height: 100%; |
| #5992 | object-fit: cover; |
| #5993 | } |
| #5994 | |
| #5995 | .affidavit-photo-block p { |
| #5996 | margin: 0; |
| #5997 | color: #765a25; |
| #5998 | font-size: 10px; |
| #5999 | letter-spacing: 0.12em; |
| #6000 | text-transform: uppercase; |
| #6001 | } |
| #6002 | |
| #6003 | .affidavit-field-section { |
| #6004 | margin-top: 16px; |
| #6005 | font-size: 13px; |
| #6006 | line-height: 1.58; |
| #6007 | } |
| #6008 | |
| #6009 | .affidavit-field-section h3, |
| #6010 | .affidavit-notary-block h3 { |
| #6011 | margin: 0 0 9px; |
| #6012 | padding-bottom: 4px; |
| #6013 | border-bottom: 1px solid rgba(89,65,29,0.32); |
| #6014 | color: #3d2e16; |
| #6015 | font-size: 12px; |
| #6016 | letter-spacing: 0.14em; |
| #6017 | text-transform: uppercase; |
| #6018 | } |
| #6019 | |
| #6020 | .affidavit-field-line { |
| #6021 | display: grid; |
| #6022 | grid-template-columns: 174px minmax(0, 1fr); |
| #6023 | gap: 10px; |
| #6024 | margin: 5px 0; |
| #6025 | } |
| #6026 | |
| #6027 | .affidavit-field-line strong { |
| #6028 | color: #3e321e; |
| #6029 | } |
| #6030 | |
| #6031 | .affidavit-field-line span { |
| #6032 | min-height: 22px; |
| #6033 | border-bottom: 1px solid rgba(70,54,29,0.45); |
| #6034 | } |
| #6035 | |
| #6036 | .affidavit-declaration { |
| #6037 | margin: 0; |
| #6038 | padding: 13px; |
| #6039 | border: 1px solid rgba(89,65,29,0.26); |
| #6040 | background: rgba(255,255,255,0.22); |
| #6041 | text-align: justify; |
| #6042 | } |
| #6043 | |
| #6044 | .affidavit-signature-grid, |
| #6045 | .affidavit-notary-lines { |
| #6046 | display: grid; |
| #6047 | grid-template-columns: repeat(2, minmax(0, 1fr)); |
| #6048 | gap: 24px; |
| #6049 | } |
| #6050 | |
| #6051 | .affidavit-signature-grid { |
| #6052 | margin-top: 36px; |
| #6053 | } |
| #6054 | |
| #6055 | .affidavit-signature-grid span, |
| #6056 | .affidavit-notary-lines span { |
| #6057 | display: block; |
| #6058 | border-top: 1px solid #1a1710; |
| #6059 | height: 1px; |
| #6060 | } |
| #6061 | |
| #6062 | .affidavit-signature-grid p, |
| #6063 | .affidavit-signature-grid small, |
| #6064 | .affidavit-notary-lines p { |
| #6065 | display: block; |
| #6066 | margin: 5px 0 0; |
| #6067 | } |
| #6068 | |
| #6069 | .affidavit-signature-grid small { |
| #6070 | color: #755920; |
| #6071 | font-size: 10px; |
| #6072 | } |
| #6073 | |
| #6074 | .affidavit-notary-block { |
| #6075 | margin-top: 28px; |
| #6076 | padding: 15px; |
| #6077 | border: 1px solid rgba(80,58,24,0.34); |
| #6078 | font-size: 12px; |
| #6079 | } |
| #6080 | |
| #6081 | .affidavit-notary-lines { |
| #6082 | margin-top: 28px; |
| #6083 | } |
| #6084 | |
| #6085 | .affidavit-footer { |
| #6086 | display: flex; |
| #6087 | justify-content: space-between; |
| #6088 | gap: 12px; |
| #6089 | margin-top: 24px; |
| #6090 | padding-top: 8px; |
| #6091 | border-top: 1px solid rgba(89,65,29,0.22); |
| #6092 | color: #765a25; |
| #6093 | font-size: 9px; |
| #6094 | letter-spacing: 0.08em; |
| #6095 | text-transform: uppercase; |
| #6096 | } |
| #6097 | |
| #6098 | .affidavit-sheet.is-embossing .affidavit-embossed-seal { |
| #6099 | animation: affidavit-emboss 0.9s ease-out; |
| #6100 | } |
| #6101 | |
| #6102 | .document-seal-emboss { |
| #6103 | position: relative; |
| #6104 | display: grid; |
| #6105 | justify-items: center; |
| #6106 | gap: 5px; |
| #6107 | margin: 0; |
| #6108 | color: #2a1e0d; |
| #6109 | isolation: isolate; |
| #6110 | cursor: var(--cursor-seal); |
| #6111 | } |
| #6112 | |
| #6113 | .document-seal-face { |
| #6114 | display: grid; |
| #6115 | place-items: center; |
| #6116 | width: 86px; |
| #6117 | height: 86px; |
| #6118 | padding: 8px; |
| #6119 | border-radius: 50%; |
| #6120 | border: 2px solid rgba(118, 86, 28, 0.62); |
| #6121 | background: |
| #6122 | radial-gradient(circle at 35% 24%, rgba(255,255,255,0.72), transparent 22%), |
| #6123 | radial-gradient(circle at 62% 72%, rgba(83, 55, 20,0.22), transparent 34%), |
| #6124 | color-mix(in srgb, var(--instrument-primary, var(--affidavit-primary, #d4af37)) 38%, #f5e7c9); |
| #6125 | box-shadow: |
| #6126 | inset 4px 5px 10px rgba(255,255,255,0.48), |
| #6127 | inset -6px -7px 12px rgba(74,49,16,0.24), |
| #6128 | 0 2px 1px rgba(95,67,22,0.24); |
| #6129 | font-family: Georgia, 'Times New Roman', serif; |
| #6130 | font-size: 16px; |
| #6131 | font-weight: 800; |
| #6132 | line-height: 1; |
| #6133 | } |
| #6134 | |
| #6135 | .document-seal-face img { |
| #6136 | width: 100%; |
| #6137 | height: 100%; |
| #6138 | object-fit: contain; |
| #6139 | filter: sepia(0.18) saturate(0.95) contrast(1.04) drop-shadow(0 1px 1px rgba(73,52,14,0.26)); |
| #6140 | } |
| #6141 | |
| #6142 | .document-seal-emboss figcaption { |
| #6143 | display: grid; |
| #6144 | gap: 1px; |
| #6145 | color: #765a25; |
| #6146 | font-size: 8px; |
| #6147 | line-height: 1.25; |
| #6148 | letter-spacing: 0.08em; |
| #6149 | text-align: center; |
| #6150 | text-transform: uppercase; |
| #6151 | } |
| #6152 | |
| #6153 | .seal-size-small .document-seal-face { |
| #6154 | width: 52px; |
| #6155 | height: 52px; |
| #6156 | padding: 5px; |
| #6157 | font-size: 11px; |
| #6158 | } |
| #6159 | |
| #6160 | .seal-size-large .document-seal-face { |
| #6161 | width: 144px; |
| #6162 | height: 144px; |
| #6163 | padding: 12px; |
| #6164 | font-size: 24px; |
| #6165 | } |
| #6166 | |
| #6167 | .document-seal-emboss.is-active .document-seal-face { |
| #6168 | animation: seal-emboss-press 0.9s ease-out; |
| #6169 | } |
| #6170 | |
| #6171 | .document-seal-emboss:hover .document-seal-face, |
| #6172 | .preview-seal:hover, |
| #6173 | .generated-seal:hover, |
| #6174 | .seal-dropzone:hover { |
| #6175 | cursor: var(--cursor-seal); |
| #6176 | } |
| #6177 | |
| #6178 | .document-hover, |
| #6179 | .instrument-template-button, |
| #6180 | .instrument-preview-toolbar button, |
| #6181 | .documents-affidavit-link, |
| #6182 | .instrument-paper, |
| #6183 | .instrument-id-card, |
| #6184 | .affidavit-sheet { |
| #6185 | cursor: var(--cursor-document); |
| #6186 | } |
| #6187 | |
| #6188 | .instrument-template-button, |
| #6189 | .documents-affidavit-link, |
| #6190 | .instrument-preview-toolbar button { |
| #6191 | transition: border-color 170ms ease, transform 170ms ease, box-shadow 170ms ease; |
| #6192 | } |
| #6193 | |
| #6194 | .instrument-template-button:hover, |
| #6195 | .documents-affidavit-link:hover, |
| #6196 | .instrument-preview-toolbar button:hover { |
| #6197 | transform: translateY(-1px); |
| #6198 | box-shadow: 0 10px 24px rgba(0,0,0,0.28); |
| #6199 | } |
| #6200 | |
| #6201 | .seal-placement-pmo-top-right.is-active .document-seal-face { |
| #6202 | animation-name: seal-emboss-pmo; |
| #6203 | } |
| #6204 | |
| #6205 | .seal-placement-id-front-bottom-right.is-active .document-seal-face { |
| #6206 | animation-name: seal-emboss-id; |
| #6207 | } |
| #6208 | |
| #6209 | .seal-placement-ucc-bottom-center.is-active .document-seal-face, |
| #6210 | .seal-placement-dishonor-bottom-right.is-active .document-seal-face { |
| #6211 | animation-name: seal-emboss-stamp; |
| #6212 | } |
| #6213 | |
| #6214 | .seal-placement-bond-center.is-active .document-seal-face { |
| #6215 | animation-name: seal-emboss-bond; |
| #6216 | } |
| #6217 | |
| #6218 | @keyframes seal-emboss-press { |
| #6219 | 0% { transform: scale(1.14); filter: brightness(1.2); box-shadow: 0 0 0 18px rgba(212,175,55,0.12); } |
| #6220 | 58% { transform: scale(0.96); } |
| #6221 | 100% { transform: scale(1); filter: brightness(1); } |
| #6222 | } |
| #6223 | |
| #6224 | @keyframes seal-emboss-pmo { |
| #6225 | 0% { transform: translateY(-8px) scale(1.1); filter: brightness(1.18); } |
| #6226 | 60% { transform: translateY(2px) scale(0.97); } |
| #6227 | 100% { transform: translateY(0) scale(1); filter: brightness(1); } |
| #6228 | } |
| #6229 | |
| #6230 | @keyframes seal-emboss-id { |
| #6231 | 0% { transform: translateX(8px) scale(1.12); filter: brightness(1.16); } |
| #6232 | 60% { transform: translateX(-1px) scale(0.98); } |
| #6233 | 100% { transform: translateX(0) scale(1); filter: brightness(1); } |
| #6234 | } |
| #6235 | |
| #6236 | @keyframes seal-emboss-stamp { |
| #6237 | 0% { transform: translateY(10px) scale(1.08); filter: brightness(1.18); } |
| #6238 | 56% { transform: translateY(-1px) scale(0.98); } |
| #6239 | 100% { transform: translateY(0) scale(1); filter: brightness(1); } |
| #6240 | } |
| #6241 | |
| #6242 | @keyframes seal-emboss-bond { |
| #6243 | 0% { transform: scale(1.24); filter: brightness(1.22); box-shadow: 0 0 0 24px rgba(212,175,55,0.11); } |
| #6244 | 62% { transform: scale(0.97); } |
| #6245 | 100% { transform: scale(1); filter: brightness(1); } |
| #6246 | } |
| #6247 | |
| #6248 | .affidavit-seal-instance { |
| #6249 | justify-self: center; |
| #6250 | } |
| #6251 | |
| #6252 | @keyframes affidavit-emboss { |
| #6253 | 0% { transform: scale(1.18); filter: brightness(1.25); box-shadow: 0 0 0 18px rgba(212,175,55,0.14); } |
| #6254 | 58% { transform: scale(0.96); } |
| #6255 | 100% { transform: scale(1); filter: brightness(1); } |
| #6256 | } |
| #6257 | |
| #6258 | @media (max-width: 1080px) { |
| #6259 | .affidavit-workbench { |
| #6260 | grid-template-columns: 1fr; |
| #6261 | } |
| #6262 | |
| #6263 | .affidavit-control-panel { |
| #6264 | position: static; |
| #6265 | } |
| #6266 | } |
| #6267 | |
| #6268 | @media (max-width: 720px) { |
| #6269 | .affidavit-page { |
| #6270 | padding: 18px; |
| #6271 | } |
| #6272 | |
| #6273 | .affidavit-two-col, |
| #6274 | .affidavit-signature-grid, |
| #6275 | .affidavit-notary-lines { |
| #6276 | grid-template-columns: 1fr; |
| #6277 | } |
| #6278 | |
| #6279 | .affidavit-document-header { |
| #6280 | grid-template-columns: 1fr; |
| #6281 | } |
| #6282 | |
| #6283 | .affidavit-field-line { |
| #6284 | grid-template-columns: 1fr; |
| #6285 | } |
| #6286 | |
| #6287 | .affidavit-sheet { |
| #6288 | padding: 18px; |
| #6289 | } |
| #6290 | } |
| #6291 | |
| #6292 | @page { |
| #6293 | size: letter; |
| #6294 | margin: 0.55in; |
| #6295 | } |
| #6296 | |
| #6297 | @media print { |
| #6298 | html, |
| #6299 | body { |
| #6300 | background: #fff !important; |
| #6301 | } |
| #6302 | |
| #6303 | .affidavit-page { |
| #6304 | padding: 0 !important; |
| #6305 | background: #fff !important; |
| #6306 | } |
| #6307 | |
| #6308 | .affidavit-page-header, |
| #6309 | .affidavit-control-panel { |
| #6310 | display: none !important; |
| #6311 | } |
| #6312 | |
| #6313 | .affidavit-workbench { |
| #6314 | display: block !important; |
| #6315 | max-width: none !important; |
| #6316 | margin: 0 !important; |
| #6317 | } |
| #6318 | |
| #6319 | .affidavit-preview-stage { |
| #6320 | display: block !important; |
| #6321 | } |
| #6322 | |
| #6323 | .affidavit-sheet { |
| #6324 | width: auto !important; |
| #6325 | min-height: auto !important; |
| #6326 | padding: 0 !important; |
| #6327 | box-shadow: none !important; |
| #6328 | border-radius: 0 !important; |
| #6329 | -webkit-print-color-adjust: exact; |
| #6330 | print-color-adjust: exact; |
| #6331 | } |
| #6332 | |
| #6333 | .affidavit-sheet-border { |
| #6334 | min-height: calc(11in - 1.1in); |
| #6335 | } |
| #6336 | } |
| #6337 | |
| #6338 | @media (prefers-reduced-motion: reduce) { |
| #6339 | *, |
| #6340 | *::before, |
| #6341 | *::after { |
| #6342 | animation-duration: 1ms !important; |
| #6343 | animation-iteration-count: 1 !important; |
| #6344 | scroll-behavior: auto !important; |
| #6345 | transition-duration: 1ms !important; |
| #6346 | } |
| #6347 | } |
| #6348 | |
| #6349 | .documents-emboss-page { |
| #6350 | min-height: 100vh; |
| #6351 | padding: 28px; |
| #6352 | color: var(--text-1); |
| #6353 | background: |
| #6354 | radial-gradient(circle at 74% 0%, color-mix(in srgb, var(--instrument-primary, var(--gold-2)) 12%, transparent), transparent 34%), |
| #6355 | linear-gradient(180deg, #0a0908 0%, #120f0d 100%); |
| #6356 | } |
| #6357 | |
| #6358 | .documents-emboss-header { |
| #6359 | display: grid; |
| #6360 | grid-template-columns: minmax(0, 1fr) auto; |
| #6361 | gap: 18px; |
| #6362 | align-items: end; |
| #6363 | max-width: 1360px; |
| #6364 | margin: 0 auto 22px; |
| #6365 | } |
| #6366 | |
| #6367 | .documents-emboss-header h1 { |
| #6368 | margin: 6px 0 8px; |
| #6369 | color: var(--gold-1); |
| #6370 | font-size: clamp(30px, 4vw, 50px); |
| #6371 | line-height: 0.98; |
| #6372 | } |
| #6373 | |
| #6374 | .documents-emboss-header p { |
| #6375 | max-width: 780px; |
| #6376 | color: var(--text-2); |
| #6377 | } |
| #6378 | |
| #6379 | .documents-affidavit-link { |
| #6380 | display: inline-flex; |
| #6381 | align-items: center; |
| #6382 | min-height: 36px; |
| #6383 | padding: 0 12px; |
| #6384 | border-radius: 7px; |
| #6385 | border: 1px solid color-mix(in srgb, var(--instrument-primary, var(--gold-2)) 38%, var(--border)); |
| #6386 | color: var(--gold-1); |
| #6387 | background: rgba(0,0,0,0.22); |
| #6388 | font-size: 13px; |
| #6389 | } |
| #6390 | |
| #6391 | .documents-emboss-grid { |
| #6392 | display: grid; |
| #6393 | grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); |
| #6394 | gap: 22px; |
| #6395 | max-width: 1360px; |
| #6396 | margin: 0 auto; |
| #6397 | } |
| #6398 | |
| #6399 | .instrument-template-list { |
| #6400 | display: grid; |
| #6401 | gap: 9px; |
| #6402 | } |
| #6403 | |
| #6404 | .instrument-template-button { |
| #6405 | display: grid; |
| #6406 | grid-template-columns: 28px minmax(0, 1fr); |
| #6407 | gap: 6px 10px; |
| #6408 | align-items: start; |
| #6409 | width: 100%; |
| #6410 | min-height: 74px; |
| #6411 | padding: 12px; |
| #6412 | border-radius: 8px; |
| #6413 | border: 1px solid var(--border); |
| #6414 | color: var(--text-2); |
| #6415 | background: linear-gradient(160deg, rgba(24, 19, 15, 0.94), rgba(14, 12, 10, 0.94)); |
| #6416 | text-align: left; |
| #6417 | } |
| #6418 | |
| #6419 | .instrument-template-button svg { |
| #6420 | color: var(--gold-2); |
| #6421 | } |
| #6422 | |
| #6423 | .instrument-template-button strong { |
| #6424 | color: var(--text-1); |
| #6425 | font-size: 13px; |
| #6426 | } |
| #6427 | |
| #6428 | .instrument-template-button small { |
| #6429 | grid-column: 2; |
| #6430 | color: var(--text-3); |
| #6431 | font-size: 11px; |
| #6432 | line-height: 1.35; |
| #6433 | } |
| #6434 | |
| #6435 | .instrument-template-button.active { |
| #6436 | border-color: color-mix(in srgb, var(--instrument-primary, var(--gold-2)) 62%, var(--border)); |
| #6437 | box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--instrument-primary, var(--gold-2)) 18%, transparent); |
| #6438 | } |
| #6439 | |
| #6440 | .instrument-library-list { |
| #6441 | display: grid; |
| #6442 | gap: 8px; |
| #6443 | margin-top: 8px; |
| #6444 | padding-top: 12px; |
| #6445 | border-top: 1px solid rgba(255,255,255,0.06); |
| #6446 | } |
| #6447 | |
| #6448 | .instrument-library-item { |
| #6449 | display: grid; |
| #6450 | gap: 4px; |
| #6451 | width: 100%; |
| #6452 | border-radius: 8px; |
| #6453 | border: 1px solid rgba(255,255,255,0.055); |
| #6454 | background: rgba(0,0,0,0.18); |
| #6455 | padding: 9px 10px; |
| #6456 | text-align: left; |
| #6457 | } |
| #6458 | |
| #6459 | .instrument-library-item.active { |
| #6460 | border-color: color-mix(in srgb, var(--instrument-primary, var(--gold-2)) 54%, var(--border)); |
| #6461 | background: color-mix(in srgb, var(--instrument-primary, var(--gold-2)) 10%, rgba(0,0,0,0.18)); |
| #6462 | } |
| #6463 | |
| #6464 | .instrument-library-item strong { |
| #6465 | color: var(--text-1); |
| #6466 | font-size: 12px; |
| #6467 | line-height: 1.25; |
| #6468 | } |
| #6469 | |
| #6470 | .instrument-library-item span, |
| #6471 | .instrument-library-empty, |
| #6472 | .instrument-library-error { |
| #6473 | color: var(--text-3); |
| #6474 | font-size: 11px; |
| #6475 | line-height: 1.35; |
| #6476 | overflow-wrap: anywhere; |
| #6477 | } |
| #6478 | |
| #6479 | .instrument-library-error { |
| #6480 | margin: 0 0 12px; |
| #6481 | color: var(--red); |
| #6482 | } |
| #6483 | |
| #6484 | .instrument-preview-panel { |
| #6485 | min-width: 0; |
| #6486 | padding: 18px; |
| #6487 | border-radius: 10px; |
| #6488 | border: 1px solid color-mix(in srgb, var(--instrument-primary, var(--gold-2)) 30%, var(--border)); |
| #6489 | background: linear-gradient(160deg, rgba(24, 19, 15, 0.98), rgba(14, 12, 10, 0.98)); |
| #6490 | box-shadow: 0 18px 60px rgba(0,0,0,0.36); |
| #6491 | } |
| #6492 | |
| #6493 | .instrument-preview-toolbar { |
| #6494 | display: flex; |
| #6495 | align-items: flex-start; |
| #6496 | justify-content: space-between; |
| #6497 | gap: 14px; |
| #6498 | margin-bottom: 16px; |
| #6499 | } |
| #6500 | |
| #6501 | .instrument-preview-actions { |
| #6502 | display: flex; |
| #6503 | flex-wrap: wrap; |
| #6504 | justify-content: flex-end; |
| #6505 | gap: 8px; |
| #6506 | } |
| #6507 | |
| #6508 | .instrument-preview-toolbar h2 { |
| #6509 | margin: 3px 0; |
| #6510 | color: var(--gold-1); |
| #6511 | font-size: 26px; |
| #6512 | } |
| #6513 | |
| #6514 | .instrument-preview-toolbar span { |
| #6515 | color: var(--text-3); |
| #6516 | font-size: 12px; |
| #6517 | } |
| #6518 | |
| #6519 | .instrument-preview-toolbar button { |
| #6520 | display: inline-flex; |
| #6521 | align-items: center; |
| #6522 | gap: 8px; |
| #6523 | min-height: 38px; |
| #6524 | padding: 0 12px; |
| #6525 | border-radius: 8px; |
| #6526 | border: 1px solid color-mix(in srgb, var(--instrument-primary, var(--gold-2)) 68%, #000); |
| #6527 | background: linear-gradient(180deg, var(--instrument-primary, var(--gold-2)), var(--gold-3)); |
| #6528 | color: #080706; |
| #6529 | font-weight: 700; |
| #6530 | } |
| #6531 | |
| #6532 | .instrument-preview-toolbar button:disabled { |
| #6533 | opacity: 0.45; |
| #6534 | cursor: not-allowed; |
| #6535 | } |
| #6536 | |
| #6537 | .instrument-paper { |
| #6538 | position: relative; |
| #6539 | min-height: 650px; |
| #6540 | padding: 34px; |
| #6541 | overflow: hidden; |
| #6542 | color: #1b1711; |
| #6543 | font-family: Georgia, 'Times New Roman', serif; |
| #6544 | background: |
| #6545 | radial-gradient(circle at 18% 20%, rgba(255,255,255,0.55), transparent 17%), |
| #6546 | linear-gradient(135deg, rgba(138, 112, 58, 0.08), transparent 36%), |
| #6547 | #f3e6c7; |
| #6548 | border: 2px double color-mix(in srgb, var(--instrument-primary, #b8923f) 72%, #3a2d17); |
| #6549 | box-shadow: 0 18px 52px rgba(0,0,0,0.42); |
| #6550 | } |
| #6551 | |
| #6552 | .instrument-paper header { |
| #6553 | text-align: center; |
| #6554 | border-bottom: 4px double color-mix(in srgb, var(--instrument-primary, #b8923f) 68%, #4c3515); |
| #6555 | padding-bottom: 16px; |
| #6556 | } |
| #6557 | |
| #6558 | .instrument-paper header p, |
| #6559 | .instrument-paper header span { |
| #6560 | margin: 0; |
| #6561 | color: #6c5120; |
| #6562 | font-size: 11px; |
| #6563 | letter-spacing: 0.09em; |
| #6564 | text-transform: uppercase; |
| #6565 | } |
| #6566 | |
| #6567 | .instrument-paper header h3 { |
| #6568 | margin: 6px 0; |
| #6569 | color: #19140c; |
| #6570 | font-size: 30px; |
| #6571 | line-height: 1; |
| #6572 | letter-spacing: 0.08em; |
| #6573 | text-transform: uppercase; |
| #6574 | } |
| #6575 | |
| #6576 | .instrument-body-copy { |
| #6577 | display: grid; |
| #6578 | gap: 9px; |
| #6579 | max-width: 590px; |
| #6580 | margin: 42px auto 0; |
| #6581 | font-size: 13px; |
| #6582 | } |
| #6583 | |
| #6584 | .instrument-line { |
| #6585 | display: grid; |
| #6586 | grid-template-columns: 190px minmax(0, 1fr); |
| #6587 | gap: 10px; |
| #6588 | } |
| #6589 | |
| #6590 | .instrument-line strong { |
| #6591 | color: #3e321e; |
| #6592 | } |
| #6593 | |
| #6594 | .instrument-line span { |
| #6595 | min-height: 22px; |
| #6596 | border-bottom: 1px solid rgba(70,54,29,0.45); |
| #6597 | } |
| #6598 | |
| #6599 | .instrument-paper footer { |
| #6600 | position: absolute; |
| #6601 | left: 34px; |
| #6602 | right: 34px; |
| #6603 | bottom: 24px; |
| #6604 | display: flex; |
| #6605 | justify-content: space-between; |
| #6606 | gap: 12px; |
| #6607 | border-top: 1px solid rgba(89,65,29,0.22); |
| #6608 | padding-top: 8px; |
| #6609 | color: #765a25; |
| #6610 | font-size: 9px; |
| #6611 | letter-spacing: 0.08em; |
| #6612 | text-transform: uppercase; |
| #6613 | } |
| #6614 | |
| #6615 | .instrument-pmo .seal-placement-pmo-top-right { |
| #6616 | position: absolute; |
| #6617 | top: 30px; |
| #6618 | right: 32px; |
| #6619 | } |
| #6620 | |
| #6621 | .instrument-ucc1 .seal-placement-ucc-bottom-center { |
| #6622 | position: absolute; |
| #6623 | left: 50%; |
| #6624 | bottom: 112px; |
| #6625 | transform: translateX(-50%); |
| #6626 | } |
| #6627 | |
| #6628 | .instrument-trust-charter .seal-placement-charter-top-center { |
| #6629 | margin: 0 auto 16px; |
| #6630 | } |
| #6631 | |
| #6632 | .instrument-bond-certificate .seal-placement-bond-center { |
| #6633 | position: absolute; |
| #6634 | left: 50%; |
| #6635 | top: 50%; |
| #6636 | opacity: 0.86; |
| #6637 | transform: translate(-50%, -50%); |
| #6638 | } |
| #6639 | |
| #6640 | .instrument-bond-certificate .instrument-body-copy { |
| #6641 | position: relative; |
| #6642 | z-index: 1; |
| #6643 | margin-top: 160px; |
| #6644 | } |
| #6645 | |
| #6646 | .instrument-notice-dishonor .seal-placement-dishonor-bottom-right { |
| #6647 | position: absolute; |
| #6648 | right: 42px; |
| #6649 | bottom: 104px; |
| #6650 | } |
| #6651 | |
| #6652 | .instrument-affidavit-status .seal-placement-affidavit-header { |
| #6653 | position: absolute; |
| #6654 | top: 28px; |
| #6655 | right: 34px; |
| #6656 | } |
| #6657 | |
| #6658 | .instrument-id-pair { |
| #6659 | display: grid; |
| #6660 | grid-template-columns: repeat(2, minmax(260px, 1fr)); |
| #6661 | gap: 18px; |
| #6662 | } |
| #6663 | |
| #6664 | .instrument-id-card { |
| #6665 | position: relative; |
| #6666 | min-height: 324px; |
| #6667 | padding: 22px; |
| #6668 | overflow: hidden; |
| #6669 | border-radius: 12px; |
| #6670 | border: 1px solid color-mix(in srgb, var(--instrument-primary, var(--gold-2)) 50%, var(--border)); |
| #6671 | background: |
| #6672 | radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--instrument-primary, var(--gold-2)) 18%, transparent), transparent 40%), |
| #6673 | linear-gradient(145deg, #17110d, #060504); |
| #6674 | color: var(--text-1); |
| #6675 | box-shadow: 0 18px 52px rgba(0,0,0,0.42); |
| #6676 | } |
| #6677 | |
| #6678 | .instrument-id-card h3 { |
| #6679 | margin: 0 0 16px; |
| #6680 | color: var(--gold-1); |
| #6681 | font-size: 20px; |
| #6682 | } |
| #6683 | |
| #6684 | .instrument-id-photo { |
| #6685 | display: grid; |
| #6686 | place-items: center; |
| #6687 | width: 92px; |
| #6688 | height: 112px; |
| #6689 | margin-bottom: 14px; |
| #6690 | border: 1px solid color-mix(in srgb, var(--instrument-primary, var(--gold-2)) 56%, var(--border)); |
| #6691 | background: rgba(255,255,255,0.06); |
| #6692 | color: var(--gold-1); |
| #6693 | font-family: var(--font-serif), Georgia, serif; |
| #6694 | font-size: 28px; |
| #6695 | } |
| #6696 | |
| #6697 | .instrument-id-card p { |
| #6698 | margin: 0; |
| #6699 | font-weight: 700; |
| #6700 | } |
| #6701 | |
| #6702 | .instrument-id-card span { |
| #6703 | display: block; |
| #6704 | margin-top: 4px; |
| #6705 | color: var(--text-3); |
| #6706 | font-size: 12px; |
| #6707 | } |
| #6708 | |
| #6709 | .instrument-id-card .seal-placement-id-front-bottom-right { |
| #6710 | position: absolute; |
| #6711 | right: 18px; |
| #6712 | bottom: 18px; |
| #6713 | } |
| #6714 | |
| #6715 | .instrument-id-watermark { |
| #6716 | position: absolute; |
| #6717 | right: -42px; |
| #6718 | bottom: 42px; |
| #6719 | color: color-mix(in srgb, var(--instrument-primary, var(--gold-2)) 16%, transparent); |
| #6720 | font-family: var(--font-serif), Georgia, serif; |
| #6721 | font-size: 42px; |
| #6722 | line-height: 0.9; |
| #6723 | transform: rotate(-18deg); |
| #6724 | } |
| #6725 | |
| #6726 | @media (max-width: 1080px) { |
| #6727 | .documents-emboss-grid, |
| #6728 | .documents-emboss-header, |
| #6729 | .instrument-id-pair { |
| #6730 | grid-template-columns: 1fr; |
| #6731 | } |
| #6732 | |
| #6733 | .instrument-preview-toolbar { |
| #6734 | flex-direction: column; |
| #6735 | } |
| #6736 | } |
| #6737 | |
| #6738 | @media (max-width: 720px) { |
| #6739 | .documents-emboss-page { |
| #6740 | padding: 18px; |
| #6741 | } |
| #6742 | |
| #6743 | .instrument-paper { |
| #6744 | min-height: 600px; |
| #6745 | padding: 22px; |
| #6746 | } |
| #6747 | |
| #6748 | .instrument-paper header h3 { |
| #6749 | font-size: 22px; |
| #6750 | } |
| #6751 | |
| #6752 | .instrument-line { |
| #6753 | grid-template-columns: 1fr; |
| #6754 | } |
| #6755 | } |
| #6756 |