:root{--bg-color: #f4e4bc;--text-main: #3e2723;--text-light: #5c4033;--accent-gold: #d4af37;--accent-gold-hover: #b5952f;--border-color: #8b5a2b;--card-bg: rgba(253, 245, 230, .85);--shadow-color: rgba(92, 64, 51, .3)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Georgia,Times New Roman,serif;background-color:var(--bg-color);color:var(--text-main);background-image:radial-gradient(rgba(139,90,43,.1) 1px,transparent 1px);background-size:20px 20px;min-height:100vh;overflow-x:hidden}.app-container{max-width:1000px;margin:0 auto;padding:0 20px 40px}.app-header{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:2px dashed var(--border-color);margin-bottom:30px}.logo{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:700;cursor:pointer;color:var(--text-main);text-shadow:1px 1px 0 var(--accent-gold)}.header-right{display:flex;align-items:center;gap:20px}.cloud-status{font-size:12px;color:var(--text-light);background:#ffffff80;padding:4px 8px;border-radius:12px}.nav-btn{display:flex;align-items:center;gap:6px;background:none;border:none;font-family:inherit;font-size:16px;color:var(--text-main);cursor:pointer;padding:8px 12px;border-radius:8px;transition:all .2s}.nav-btn:hover,.nav-btn.active{background:var(--card-bg);box-shadow:2px 2px 0 var(--border-color)}.home-page{position:relative;min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center}.bg-map-svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:auto;z-index:-1;opacity:.6}.home-content{background:#f4e4bccc;padding:40px;border-radius:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:2px solid var(--border-color)}.title-glowing{font-size:48px;margin-bottom:16px;color:var(--text-main);text-shadow:0 0 10px rgba(212,175,55,.5)}.subtitle{font-size:18px;color:var(--text-light);margin-bottom:30px}.btn-primary{background:var(--text-main);color:var(--bg-color);border:none;padding:12px 30px;font-size:18px;font-family:inherit;cursor:pointer;border-radius:255px 15px 225px/15px 225px 15px 255px;transition:transform .2s,box-shadow .2s;box-shadow:4px 4px 0 var(--accent-gold)}.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--accent-gold)}.btn-secondary{display:flex;align-items:center;gap:8px;background:var(--card-bg);color:var(--text-main);border:2px solid var(--border-color);padding:8px 16px;border-radius:8px;cursor:pointer;font-family:inherit}.btn-secondary.active{background:var(--bg-color);border-color:var(--accent-gold)}.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:15px}.search-box{display:flex;align-items:center;gap:10px;background:var(--card-bg);padding:8px 15px;border-radius:20px;border:2px solid var(--border-color);flex:1;min-width:200px}.search-box input{border:none;background:transparent;outline:none;font-family:inherit;font-size:16px;width:100%;color:var(--text-main)}.filters{display:flex;gap:15px;align-items:center}.filters select{padding:8px 15px;border-radius:20px;border:2px solid var(--border-color);background:var(--card-bg);font-family:inherit;color:var(--text-main);outline:none}.view-toggle{display:flex;background:var(--card-bg);border:2px solid var(--border-color);border-radius:20px;overflow:hidden}.view-toggle button{background:none;border:none;padding:8px 12px;cursor:pointer;color:var(--text-light)}.view-toggle button.active{background:var(--border-color);color:var(--bg-color)}.grid-view{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:25px}.wonder-card{background:var(--card-bg);border:2px solid var(--border-color);border-radius:12px;overflow:hidden;cursor:pointer;box-shadow:4px 4px 0 var(--shadow-color);display:flex;flex-direction:column;position:relative}.card-img-wrapper{height:180px;position:relative;border-bottom:2px solid var(--border-color);background:#e8d5a5}.wonder-img{width:100%;height:100%;object-fit:cover}.svg-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:20px;color:var(--border-color)}.emoji-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:60px}.img-loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.spinner{width:30px;height:30px;border:3px solid var(--border-color);border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.status-badge{position:absolute;top:10px;right:10px;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:700;border:1px solid var(--border-color)}.status-badge.exist{background:#90ee90cc;color:#006400}.status-badge.lost{background:#d3d3d3cc;color:#696969}.card-info{padding:15px;flex:1;display:flex;flex-direction:column;gap:8px;position:relative}.card-info h3{font-size:18px;margin-bottom:5px}.card-info p{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--text-light)}.fav-btn{position:absolute;bottom:15px;right:15px;background:none;border:none;cursor:pointer;color:var(--border-color);transition:transform .2s}.fav-btn:hover{transform:scale(1.2)}.timeline-view{position:relative;padding:20px 0}.timeline-line{position:absolute;left:50%;top:0;bottom:0;width:4px;background:var(--border-color);transform:translate(-50%)}.timeline-item{display:flex;justify-content:flex-end;padding-right:50%;position:relative;margin-bottom:40px;width:100%}.timeline-item.right{justify-content:flex-start;padding-right:0;padding-left:50%}.timeline-item .wonder-card{width:90%;max-width:400px;margin:0 20px}.timeline-dot{position:absolute;left:50%;top:20px;width:16px;height:16px;background:var(--accent-gold);border:3px solid var(--border-color);border-radius:50%;transform:translate(-50%);z-index:1}@media (max-width: 768px){.timeline-line{left:20px}.timeline-item,.timeline-item.right{justify-content:flex-start;padding-left:40px;padding-right:0}.timeline-dot{left:20px}.timeline-item .wonder-card{width:100%;margin:0}}.back-btn{display:flex;align-items:center;gap:5px;background:none;border:none;font-family:inherit;font-size:16px;cursor:pointer;margin-bottom:20px;color:var(--text-light)}.detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;background:var(--card-bg);padding:30px;border-radius:16px;border:2px solid var(--border-color);box-shadow:6px 6px 0 var(--shadow-color)}@media (max-width: 768px){.detail-layout{grid-template-columns:1fr}}.detail-visual{display:flex;flex-direction:column;gap:20px}.detail-img-box{width:100%;aspect-ratio:1;border:4px solid var(--border-color);border-radius:8px;overflow:hidden;background:#e8d5a5;position:relative}.detail-content h2{font-size:32px;margin-bottom:15px;color:var(--text-main)}.meta-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:25px}.tag{display:flex;align-items:center;gap:5px;background:#8b5a2b1a;padding:6px 12px;border-radius:20px;font-size:14px;border:1px solid var(--border-color)}.info-section{margin-bottom:25px;line-height:1.6}.info-section h3{font-size:18px;margin-bottom:10px;border-bottom:1px dashed var(--border-color);padding-bottom:5px;display:inline-block}.fun-fact{background:#d4af3726;padding:15px;border-radius:8px;border-left:4px solid var(--accent-gold)}.ai-section{margin-top:30px}.btn-ai{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:linear-gradient(135deg,#3e2723,#5c4033);color:#f4e4bc;border:none;padding:15px;border-radius:8px;font-size:16px;font-family:inherit;cursor:pointer;box-shadow:0 4px 15px #0003;transition:all .3s}.btn-ai:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.btn-ai:disabled{opacity:.7;cursor:not-allowed}.ai-story-box{margin-top:20px;padding:20px;background:#fffdf5;border:1px solid var(--accent-gold);border-radius:8px;position:relative;line-height:1.8;font-size:15px;box-shadow:inset 0 0 20px #d4af371a}.story-icon{position:absolute;top:-12px;left:20px;background:#fffdf5;padding:0 5px;color:var(--accent-gold)}.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%);background:var(--text-main);color:#fff;padding:12px 24px;border-radius:30px;box-shadow:0 4px 12px #0003;z-index:1000;font-size:14px}.empty-state{text-align:center;padding:50px;color:var(--text-light);font-size:18px;font-style:italic}