#cameraFeed,#photo,.screen.active{display:block}.hero-content,.upload-card,header{text-align:center}body{margin:0;font-family:system-ui;background:#f2f2f2}header{background:#0a3d62;color:#fff;padding:12px;font-size:18px}#camera-buttons-row button,button{font-size:16px;background:#0a3d62}.screen{display:none;padding:12px}button{width:100%;padding:14px;border:none;border-radius:8px;margin-top:10px;color:#fff}button.secondary{background:#777!important}.color-grid,.controls{display:flex;gap:10px}.bottom-bar button,.color-grid button,.controls button{flex:1}img{max-width:100%}.upload-card{margin-top:40px;width:80%;max-width:360px;margin-left:auto;margin-right:auto;background:#fff;border-radius:18px;padding:32px 20px;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.12);transition:transform .15s,box-shadow .15s}.upload-card:active{transform:scale(.97);box-shadow:0 6px 18px rgba(0,0,0,.12)}.upload-title{font-size:18px;font-weight:600;color:#0a3d62}.hero-sub,.toast,.upload-sub{font-size:14px}.upload-sub{color:#666}.preview-box{width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#ddd;margin-top:10px}.color-grid button:hover{background:#f5f5f5}.color-grid button.active{border-color:#0a3d62;box-shadow:0 4px 12px rgba(0,0,0,.25);background:#0a6246}.crop-wrapper{display:flex;justify-content:center;align-items:center;background:#000;padding:3px}.crop-stage{position:relative;width:821px;aspect-ratio:821/844;max-width:100%;overflow:hidden;background:#000}#liveOverlay,.mask{position:absolute;inset:0;pointer-events:none}#photo{max-width:none}.mask{background:rgba(0,0,0,.1);-webkit-mask:radial-gradient(circle at center,transparent 48%,black 50%);mask:radial-gradient(circle at center,transparent 48%,black 50%)}.bottom-bar,.toast{position:fixed;z-index:9999}.bottom-bar{bottom:0;left:0;right:0;background:#fff;padding:10px;display:flex;gap:10px;border-top:1px solid #ccc}.bottom-actions,.final-actions{display:flex;flex-direction:column;gap:10px;margin-top:12px}#cameraFeed{max-width:100%;max-height:70vh;margin:0 auto}#camera-buttons-row{display:flex;gap:10px;margin-top:12px}#camera-buttons-row button{padding:12px;border-radius:8px;border:none;font-weight:600;cursor:pointer;color:#fff;flex:1;box-shadow:0 4px 12px rgba(10,61,98,.25);transition:transform 80ms,box-shadow 80ms}#camera-buttons-row button:active{transform:scale(.97);box-shadow:0 2px 6px rgba(10,61,98,.25)}#camera-buttons-row button.switch{font-size:30px;font-weight:400;padding:0 0 3px;background:#0178cf}.toast{bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(0,0,0,.8);color:#fff;padding:12px 18px;border-radius:24px;opacity:0;pointer-events:none;transition:.3s;box-shadow:0 8px 20px rgba(0,0,0,.2)}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.landing-hero{padding:0}.hero-content{padding:26px 16px 30px;display:flex;flex-direction:column;justify-content:space-between;height:80vh}.landing-hero h1{font-size:21px;margin:0 0 8px;color:#0a3d62;font-weight:700}.hero-sub{color:#444;margin-bottom:14px}.hero-steps{display:flex;justify-content:space-around;font-size:13px;margin:12px 0;color:#333}.hero-note{font-size:11px;color:#777;margin-top:8px}.hero-cta{margin-top:16px;padding:14px 18px;font-size:15px;border-radius:10px;background:linear-gradient(135deg,#0a3d62,#1e5aa8);color:#fff;border:none;font-weight:600;box-shadow:0 8px 20px rgba(10,61,98,.35)}.hero-cta:active{transform:scale(.97)}