* { box-sizing: border-box; } body { margin: 0; min-width: 900px; min-height: 100vh; font: 14px "Segoe UI", system-ui, sans-serif; color: var(--pmd-text); background: var(--pmd-bg); } button, input { font: inherit; } button { padding: .58rem .8rem; border: 1px solid var(--pmd-border-strong); border-radius: var(--pmd-radius-small); color: #fff; background: #0a1a2f; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, opacity .15s; } button:hover:not(:disabled) { background: var(--pmd-blue-hover); border-color: var(--pmd-blue); } button:disabled { cursor: not-allowed; opacity: .45; }.app-header, .app-footer { padding: .9rem 1.1rem; border-color: var(--pmd-border); background: var(--pmd-sidebar); }.app-header { display: flex; align-items: baseline; gap: .75rem; border-bottom: 1px solid var(--pmd-border); }.app-header h1 { margin: 0; color: var(--pmd-blue); font-size: 1.2rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.app-header p, .app-footer p { margin: 0; color: var(--pmd-text-muted); }.app-layout { display: grid; grid-template-columns: 270px minmax(460px, 1fr) 280px; min-height: calc(100vh - 116px); }.panel { padding: 1rem; border-right: 1px solid var(--pmd-border); background: var(--pmd-sidebar); }.properties-panel { border-right: 0; border-left: 1px solid var(--pmd-border); }.panel h2 { margin: 0 0 1rem; color: var(--pmd-accent); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }.drop-zone { margin: 1rem 0 .5rem; padding: 1rem; border: 1px dashed var(--pmd-border-strong); border-radius: var(--pmd-radius); color: var(--pmd-text-muted); text-align: center; }.drop-zone.is-dragging { border-color: var(--pmd-accent); background: rgb(122 63 0 / 24%); color: var(--pmd-text); }.message { min-height: 1.4em; color: var(--pmd-success); }.tattoo-list { max-height: calc(100vh - 260px); margin: 0; padding: 0; overflow-y: auto; list-style: none; }.tattoo-list button { width: 100%; margin: .2rem 0; border-color: transparent; background: var(--pmd-panel-alt); overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }.tattoo-list button:hover { border-color: var(--pmd-border-strong); }.tattoo-list button[aria-current="true"] { border-color: var(--pmd-accent); background: var(--pmd-accent-dark); }.viewer-panel { position: relative; min-height: 500px; overflow: hidden; background: radial-gradient(circle at center, #0e1b2d, var(--pmd-bg) 72%); }.viewer-canvas { position: absolute; inset: 0; }.viewer-canvas canvas { display: block; width: 100%; height: 100%; }.model-status, .placement-status, .viewer-actions { position: absolute; z-index: 1; padding: .55rem .7rem; border: 1px solid var(--pmd-border); border-radius: var(--pmd-radius-small); background: rgb(5 11 20 / 88%); box-shadow: var(--pmd-shadow); }.model-status { top: 1rem; left: 1rem; color: var(--pmd-accent); }.placement-status { top: 1rem; right: 1rem; color: var(--pmd-text); }.viewer-actions { right: 1rem; bottom: 1rem; }.properties-panel label { display: grid; gap: .4rem; margin: 1rem 0; color: var(--pmd-text-muted); }.properties-panel .check-label { display: block; }.properties-panel input[type="range"] { width: 100%; accent-color: var(--pmd-accent); }.selection-name { min-height: 1.4em; color: var(--pmd-text); overflow-wrap: anywhere; }.properties-panel #place-tattoo, .app-footer button { border-color: var(--pmd-accent); background: var(--pmd-accent-dark); }.properties-panel #place-tattoo:hover:not(:disabled), .app-footer button:hover:not(:disabled) { border-color: var(--pmd-accent-hover); background: #b45309; }.properties-panel #delete-tattoo { border-color: var(--pmd-danger); background: #351313; }.app-footer { display: flex; align-items: center; gap: 1rem; border-top: 1px solid var(--pmd-border); }.tattoo-list::-webkit-scrollbar { width: 8px; }.tattoo-list::-webkit-scrollbar-thumb { border-radius: 8px; background: var(--pmd-border-strong); }.atlas-debug { position: fixed; z-index: 3; right: 1rem; bottom: 4.6rem; width: 280px; padding: .7rem; border: 1px solid var(--pmd-border-strong); border-radius: var(--pmd-radius); background: var(--pmd-panel); box-shadow: var(--pmd-shadow); }.atlas-debug strong { display: block; margin-bottom: .5rem; color: var(--pmd-accent); }.atlas-debug canvas { display: block; width: 100%; height: auto; background-image: linear-gradient(45deg, #182537 25%, transparent 25%), linear-gradient(-45deg, #182537 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #182537 75%), linear-gradient(-45deg, transparent 75%, #182537 75%); background-size: 16px 16px; }