:root{--bg-dark:#050505;--gold:#D4AF37;--gold-dim:#8a701e;--glass:rgba(20, 20, 20, 0.85);--font-title:'Cinzel', serif;--font-body:'Inter', sans-serif;--safe-bottom:env(safe-area-inset-bottom, 20px);}*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}body{margin:0; padding:0;background-color:var(--bg-dark);color:#fff;font-family:var(--font-body);overflow:hidden;height:100vh; height:100dvh;display:flex; flex-direction:column;}.app-container{flex:1; position: relative; overflow:hidden;width:100%; max-width: 480px; margin:0 auto;background:radial-gradient(circle at center, #1a1a1a 0%, #000000 100%);}.top-nav{position:absolute; top: 0; left: 0; width:100%;padding:calc(8px + env(safe-area-inset-top, 10px)) 15px 8px 15px;display:flex; justify-content: flex-end; align-items:center;z-index:100; pointer-events:none;}.nav-group-right{display:flex; align-items: center; gap: 8px; pointer-events:all;}.nav-btn{background:rgba(0,0,0,0.4); border: 1px solid var(--gold-dim); color:var(--gold);width:34px; height: 34px; border-radius:50%;display:flex; align-items: center; justify-content:center;cursor:pointer; transition: 0.3s; backdrop-filter:blur(4px);}.nav-btn:active{background: var(--gold); color: #000; transform:scale(0.95);}.nav-btn svg{width:16px; height:16px;}.credits-display{font-size:0.7rem; color: var(--gold); background:rgba(0,0,0,0.6);padding:0 10px; height: 34px; border-radius:17px;border:1px solid var(--gold-dim); font-family:var(--font-title);display:flex; align-items: center; white-space: nowrap; backdrop-filter:blur(4px);font-weight:600; letter-spacing:0.5px;}.screen{position:absolute; top: 0; left: 0; width: 100%; height:100%;display:flex; flex-direction: column; padding:20px;opacity:0; pointer-events:none;transition:opacity 0.4s ease, transform 0.4s ease;transform:scale(0.98); z-index:1;}.screen.active{opacity:1; pointer-events: all; transform: scale(1); z-index:10;}#screen-era, #screen-result{padding-top:calc(60px + env(safe-area-inset-top, 20px));}h1, h2{font-family:var(--font-title); text-align: center; color: var(--gold); text-shadow:0 0 10px rgba(212, 175, 55, 0.3);}h1{font-size:2.2rem; margin-bottom:0.5rem;}h2{font-size:1.6rem; margin:0 0 10px 0;}.subtitle{text-align:center; opacity: 0.7; margin-bottom: 30px; font-size:0.9rem;}.input-group{margin-bottom:15px; width:100%;}input[type="tel"], input[type="number"]{width:100%; padding:12px;background:rgba(255,255,255,0.05); border:1px solid var(--gold-dim);color:#fff; font-size: 1.1rem; border-radius: 8px; text-align: center; outline: none; transition:0.3s;}input:focus{border-color: var(--gold); box-shadow:0 0 10px rgba(212, 175, 55, 0.15);}.btn-main{background:linear-gradient(135deg, var(--gold-dim), var(--gold));color:#000; border:none;padding:12px 20px;font-size:0.95rem; font-weight: 600; text-transform:uppercase;border-radius:30px; cursor: pointer; width:100%;box-shadow:0 4px 15px rgba(212, 175, 55, 0.2);transition:all 0.2s; font-family: var(--font-title); letter-spacing:1px;text-decoration:none; display: flex; align-items: center; justify-content: center; gap:8px;}.btn-main:active{transform: scale(0.97); box-shadow:0 2px 10px rgba(212, 175, 55, 0.1);}.btn-secondary{background:rgba(0,0,0,0.3); border: 1px solid var(--gold-dim); color: var(--gold); margin-top: 10px; box-shadow: none; font-size: 0.85rem; padding:10px 20px;}.status-msg{text-align:center; color: var(--gold); font-family: var(--font-title); font-size: 1rem; margin-top: 15px; animation:pulse 1.5s infinite;}#camera-preview{width:100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index:-1;}.camera-overlay{position:absolute; top: 0; left: 0; width: 100%; height:100%;background:url('data:image/svg+xml;utf8,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="100%" height="100%" fill="none" stroke="%23D4AF37" stroke-width="1" opacity="0.2"/><path d="M20 20 L50 20 M20 20 L20 50" stroke="%23D4AF37" stroke-width="3" fill="none"/><path d="M20 calc(100% - 20) L50 calc(100% - 20) M20 calc(100% - 20) L20 calc(100% - 50)" stroke="%23D4AF37" stroke-width="3" fill="none"/><path d="Mcalc(100% - 20) 20 Lcalc(100% - 50) 20 Mcalc(100% - 20) 20 Lcalc(100% - 20) 50" stroke="%23D4AF37" stroke-width="3" fill="none"/><path d="Mcalc(100% - 20) calc(100% - 20) Lcalc(100% - 50) calc(100% - 20) Mcalc(100% - 20) calc(100% - 20) Lcalc(100% - 20) calc(100% - 50)" stroke="%23D4AF37" stroke-width="3" fill="none"/></svg>');pointer-events:none;}.camera-controls{position:absolute; bottom:calc(60px + var(--safe-bottom));width:100%; display: flex; justify-content: space-evenly; align-items: center; z-index:20;}.shutter-btn{width:65px; height: 65px; border-radius: 50%; border:3px solid #fff;background:rgba(255,255,255,0.1); position: relative; cursor: pointer; transition:0.2s;}.shutter-btn::after{content:''; position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%);width:50px; height: 50px; background: #fff; border-radius: 50%; transition:0.2s;}.shutter-btn:active{transform:scale(0.95);}.shutter-btn:active::after{transform: translate(-50%, -50%) scale(0.85); background:var(--gold);}.icon-btn{background:rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2); color:#fff;padding:10px; border-radius: 50%; cursor:pointer;width:44px; height: 44px; display: flex; justify-content: center; align-items:center;backdrop-filter:blur(4px);}.icon-btn:active{background:rgba(255,255,255,0.1);}.era-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top:5px;overflow-y:auto; padding-bottom: calc(140px + var(--safe-bottom)); width:100%;}.era-card{background:rgba(255,255,255,0.03); border:1px solid var(--gold-dim);border-radius:6px; padding: 12px 4px; text-align: center; cursor: pointer; transition:0.2s;display:flex; align-items: center; justify-content:center;}.era-card.selected{background:var(--gold); color: #000; box-shadow: 0 0 12px rgba(212, 175, 55, 0.5); transform: scale(1.02); border-color:#fff;}.era-year{font-family:var(--font-title); font-size: 1.1rem; font-weight:bold;}.bottom-actions{position:absolute; bottom: 0; left: 0; right: 0; z-index:20;padding:15px 20px calc(30px + var(--safe-bottom)) 20px;background:linear-gradient(to top, #000 85%, transparent); display: flex; flex-direction:column;}.mode-switch{display:flex; background: rgba(0,0,0,0.5); border-radius: 20px; padding:3px;border:1px solid var(--gold-dim); margin-bottom:8px;width:fit-content; margin-left: auto; margin-right: auto; min-width:200px;}.mode-option{flex:1; text-align: center; padding: 6px 12px; border-radius: 16px; cursor: pointer; font-family: var(--font-title); font-size: 0.8rem; color: #aaa; transition:0.3s;}.mode-option.active{background:var(--gold); color: #000; font-weight: bold; box-shadow:0 0 8px rgba(212, 175, 55, 0.3);}.mode-hint{text-align:center; font-size: 0.7rem; color: var(--gold); opacity: 0.9; margin-bottom: 10px; font-family: var(--font-body); letter-spacing:0.5px;}.result-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:5px;}.generated-media-wrapper{width:100%; max-height: 60vh; margin-bottom: 15px; border-radius: 8px; border:1px solid var(--gold);box-shadow:0 0 25px rgba(212,175,55,0.15); overflow: hidden; background:#000;display:flex; justify-content: center; align-items:center;}.generated-image{width:100%; height: 100%; object-fit: contain; max-height:60vh;}#chrono-alert{position:fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: flex; justify-content: center; align-items: center; z-index: 9999; opacity: 0; pointer-events: none; transition: 0.3s; backdrop-filter:blur(8px);}#chrono-alert.visible{opacity:1; pointer-events:all;}.alert-box{background:#151515; border: 1px solid var(--gold); padding: 25px 20px; width: 85%; max-width: 320px; text-align: center; border-radius: 4px; position: relative; box-shadow:0 0 40px rgba(212,175,55,0.1);}.alert-title{font-family:var(--font-title); color: var(--gold); font-size: 1.1rem; margin-bottom: 8px; letter-spacing:1px;}.alert-msg{margin-bottom:20px; line-height: 1.4; color: #ccc; font-size:0.9rem;}#time-tunnel{position:fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 5000; display: none; align-items: center; justify-content: center; flex-direction:column;}.spinner{width:50px; height: 50px; border: 2px solid var(--gold-dim); border-top: 2px solid var(--gold); border-radius: 50%; animation: spin 0.8s linear infinite; box-shadow:0 0 10px var(--gold);}@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}.loading-text{margin-top:15px; font-family: var(--font-title); color: var(--gold); animation: pulse 1.5s infinite; font-size: 0.9rem; letter-spacing:1px;}@keyframes pulse{0%, 100%{opacity:0.6;}50%{opacity:1;}}.nuvol-footer{position:absolute; bottom: calc(10px + var(--safe-bottom)); width: 100%; text-align: center; font-size: 0.65rem; color: rgba(255, 255, 255, 0.4); z-index: 100; font-family: var(--font-body); pointer-events: none; text-shadow: 0 1px 2px #000; display: flex; flex-direction: column; gap:3px;}.ai-disclaimer{font-size:0.55rem; opacity: 0.6; max-width: 90%; margin: 0 auto; letter-spacing:0.3px;}.nuvol-footer a{color:var(--gold-dim); text-decoration: none; pointer-events: all; transition:color 0.3s;}.nuvol-footer a:hover{color: var(--gold); text-shadow:0 0 5px var(--gold);}.modal-overlay{position:fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); backdrop-filter: blur(5px); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition:opacity 0.3s ease;}.modal-overlay.open{opacity:1; pointer-events:all;}.modal-box{background:#111; border: 1px solid var(--gold); padding: 20px; width: 90%; max-width: 380px; border-radius: 8px; box-shadow: 0 0 30px rgba(212, 175, 55, 0.1); transform: scale(0.95); transition:transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}.modal-overlay.open .modal-box{transform:scale(1);}.modal-box h3{color:var(--gold); font-family: var(--font-title); margin-top: 0; text-align: center; margin-bottom: 15px; font-size: 1.1rem; border-bottom: 1px solid #333; padding-bottom:10px;}.legal-scroll-area{max-height:40vh; overflow-y: auto; text-align: left; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 8px; border: 1px solid #333; margin-bottom:10px;}.legal-scroll-area p{color:#ccc; font-size: 0.85rem; margin-bottom: 10px; line-height:1.4;}.legal-scroll-area ul{padding-left:20px; margin:0;}.legal-scroll-area li{color:#aaa; font-size: 0.8rem; margin-bottom: 8px; line-height:1.3;}.legal-scroll-area strong{color:var(--gold);}#userGalleryModal.modal-overlay{z-index:3000 !important; background:rgba(0, 0, 0, 0.95);}.gallery-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding:5px;}.gallery-item{background:#151515; border: 1px solid #333; border-radius: 6px; overflow: hidden; position: relative; display: flex; flex-direction:column;}.gallery-media-container{width:100%; aspect-ratio: 1/1; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; position:relative;}.gallery-media-container img, .gallery-media-container video{width:100%; height: 100%; object-fit:cover;}.gallery-placeholder{color:var(--gold); font-size: 1.5rem; animation:pulse 1.5s infinite;}.gallery-info{padding:6px; font-size: 0.7rem; background: #1a1a1a; display: flex; justify-content: space-between; align-items: center; border-top:1px solid #222;}.gallery-btn-download{color:var(--gold); text-decoration: none; font-weight: bold; font-size: 0.65rem; border: 1px solid var(--gold-dim); padding: 3px 8px; border-radius: 10px; background:rgba(212, 175, 55, 0.1);}