*{margin:0;padding:0;box-sizing:border-box}
:root{
--color-bg:#050505;
--color-surface:rgba(255,255,255,0.03);
--color-surface-hover:rgba(255,255,255,0.06);
--color-border:rgba(255,255,255,0.08);
--color-border-hover:rgba(255,255,255,0.15);
--color-text:#fff;
--color-text-secondary:rgba(255,255,255,0.5);
--color-text-muted:rgba(255,255,255,0.3);
--color-accent:#fff;
--font-main:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
a{color:inherit;text-decoration:none}
html{font-size:16px}
body{
font-family:var(--font-main);
font-weight:400;line-height:1.5;
color:var(--color-text);
background:var(--color-bg);
min-height:100vh;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.background-overlay{
position:fixed;top:0;left:0;width:100%;height:100%;
background:radial-gradient(ellipse at center, rgba(255,255,255,0.06) 0%, transparent 70%), var(--color-bg);
opacity:1;z-index:-1;
}
.background-overlay.has-bg{
background-image:url('../main.jpg');
background-size:cover;background-position:center;background-repeat:no-repeat;
filter:blur(20px) brightness(0.5);
opacity:0;transition:opacity 1s ease;
}
.background-overlay.has-bg.loaded{opacity:0.4}
.container{
max-width:960px;margin:0 auto;padding:60px 40px;
}
.header{
display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px;
padding-bottom:40px;border-bottom:1px solid var(--color-border);
}
.logo{display:flex;align-items:baseline;gap:16px}
.logo h1{font-size:32px;font-weight:700;letter-spacing:0.1em;color:var(--color-text)}
.logo-sub{font-size:14px;font-weight:300;letter-spacing:0.3em;color:var(--color-text-secondary);text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:24px;list-style:none}
.nav-links a{
color:var(--color-text-secondary);
text-decoration:none;
font-size:12px;font-weight:500;letter-spacing:0.1em;
transition:color 0.3s ease;
}
.nav-links a:hover{color:var(--color-text)}
.header-actions{display:flex;gap:12px}
.main-content{padding:60px 0}
.hero{margin-bottom:60px}
.hero h2{font-size:14px;font-weight:500;letter-spacing:0.4em;color:var(--color-text-secondary);margin-bottom:12px;text-transform:uppercase}
.hero p{font-size:28px;font-weight:300;letter-spacing:0.02em;color:var(--color-text);line-height:1.3}
.hero .hero-sub{font-size:12px;color:var(--color-text-muted);margin-top:16px;letter-spacing:0.05em}

/* Add Area */
.add-area{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:40px}
@media(max-width:768px){.add-area{grid-template-columns:1fr}}
.upload-zone{
background:var(--color-surface);
border:1px dashed var(--color-border);
padding:40px 32px;
text-align:center;
cursor:pointer;
transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
position:relative;
min-height:280px;
display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.upload-zone:hover,.upload-zone.drag-over{
border-color:var(--color-text);
background:var(--color-surface-hover);
}
.upload-icon{margin-bottom:20px;opacity:0.4}
.upload-icon svg{width:48px;height:48px;stroke:var(--color-text)}
.upload-text{font-size:15px;font-weight:500;letter-spacing:0.1em;color:var(--color-text-secondary);margin-bottom:16px}
.upload-zone input{width:100%;padding:10px 14px;background:rgba(255,255,255,0.03);border:1px solid var(--color-border);color:var(--color-text);font-family:var(--font-main);font-size:13px;outline:none;text-align:center;margin-bottom:8px;transition:border-color 0.3s}
.upload-zone input:focus{border-color:var(--color-border-hover)}
.upload-zone input::placeholder{color:var(--color-text-muted)}
.r-link-line{height:20px;font-size:10px;letter-spacing:0.05em;color:var(--color-text-muted);margin-top:2px}
.r-link-line .loading{color:var(--color-text-secondary);padding:0}
.r-link-line .success{color:#4caf50}
.r-link-line .error{color:#f44336}

.preview-area{
background:var(--color-surface);
border:1px solid var(--color-border);
padding:32px;
display:flex;flex-direction:column;align-items:center;justify-content:center;
min-height:280px;
}
.preview-area .placeholder{
font-size:12px;color:var(--color-text-muted);letter-spacing:0.1em;text-align:center
}

/* List */
.list-section{margin-bottom:40px}
.section-title{
font-size:11px;font-weight:500;letter-spacing:0.2em;
color:var(--color-text-secondary);margin-bottom:16px;text-transform:uppercase
}
.map-grid{display:grid;grid-template-columns:1fr;gap:10px}
.map-card{
padding:18px 22px;
background:var(--color-surface);
border:1px solid var(--color-border);
cursor:default;
transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
display:flex;align-items:center;gap:16px;
}
.map-card:hover{border-color:var(--color-border-hover);background:var(--color-surface-hover)}
.map-card-icon{
width:40px;height:40px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font-size:18px;
background:rgba(255,255,255,0.06);
color:var(--color-text-secondary);
}
.map-card-info{min-width:0;flex:1}
.map-card-name{
font-size:14px;font-weight:500;letter-spacing:0.03em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
color:var(--color-text);
}
.map-card-url{
font-size:10px;color:var(--color-text-muted);letter-spacing:0.04em;
margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.map-card-time{font-size:10px;color:var(--color-text-muted);letter-spacing:0.05em;white-space:nowrap;flex-shrink:0}
.map-card-actions{display:none;gap:6px;flex-shrink:0}
.map-card:hover .map-card-actions{display:flex}
.map-card-actions button{
background:none;border:none;color:var(--color-text-muted);
cursor:pointer;font-size:13px;padding:4px;
transition:color 0.3s ease;
}
.map-card-actions .link-btn:hover{color:var(--color-text)}
.map-card-actions .edit-btn:hover{color:var(--color-text)}
.map-card-actions .del-btn:hover{color:#f44336}

.empty-state{
text-align:center;padding:40px 20px;
}
.empty-state .empty-icon{font-size:36px;color:var(--color-text-muted);margin-bottom:12px;opacity:0.4}
.empty-state .empty-text{font-size:14px;color:var(--color-text-secondary);letter-spacing:0.05em}
.empty-state .empty-hint{font-size:11px;color:var(--color-text-muted);margin-top:6px;letter-spacing:0.05em}

.divider{height:1px;background:var(--color-border);margin-bottom:40px}
.action-bar{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.action-bar .stat{font-size:11px;color:var(--color-text-muted);letter-spacing:0.1em;margin-left:auto}
.action-bar .stat span{color:var(--color-text);font-weight:600}

.btn{
padding:14px 32px;
font-family:var(--font-main);
font-size:13px;font-weight:600;letter-spacing:0.1em;
cursor:pointer;border:none;
transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
text-transform:uppercase;
}
.btn-primary{background:var(--color-text);color:var(--color-bg)}
.btn-primary:hover{opacity:0.85}
.btn-secondary{
background:transparent;border:1px solid var(--color-border);color:var(--color-text)
}
.btn-secondary:hover{border-color:var(--color-text)}
.btn-sm{padding:10px 24px;font-size:12px}

/* Loading */
.loading{text-align:center;padding:60px 0;color:var(--color-text-muted);font-size:12px;letter-spacing:0.1em}

/* Modal */
.modal-overlay{
position:fixed;top:0;left:0;width:100%;height:100%;
background:rgba(0,0,0,0.7);
backdrop-filter:blur(4px);
display:none;align-items:center;justify-content:center;
z-index:9999;
}
.modal-overlay.active{display:flex}
.modal{
background:#0f0f0f;border:1px solid var(--color-border);
width:460px;max-width:90vw;max-height:90vh;overflow-y:auto;
padding:32px;
}
.modal-title{
font-size:14px;font-weight:600;letter-spacing:0.1em;
margin-bottom:24px;text-transform:uppercase;
}
.modal .input-group{margin-bottom:16px}
.modal .input-group label{
display:block;font-size:10px;font-weight:500;letter-spacing:0.15em;
color:var(--color-text-secondary);margin-bottom:6px;text-transform:uppercase;
}
.modal .input-group input{
width:100%;padding:10px 14px;
background:rgba(255,255,255,0.03);
border:1px solid var(--color-border);
color:var(--color-text);
font-family:var(--font-main);font-size:13px;
outline:none;transition:border-color 0.3s;
}
.modal .input-group input:focus{border-color:var(--color-border-hover)}
.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}

/* Toast */
.toast{
position:fixed;bottom:32px;left:50%;transform:translateX(-50%);
background:rgba(0,0,0,0.85);
backdrop-filter:blur(8px);
border:1px solid var(--color-border);
padding:12px 24px;
font-size:12px;letter-spacing:0.05em;
color:var(--color-text);
z-index:99999;
opacity:0;transition:opacity 0.4s ease;
pointer-events:none;
}
.toast.show{opacity:1}

/* Footer */
.footer{padding:60px 0 40px;border-top:1px solid var(--color-border);margin-top:40px;text-align:center}
.footer-content{display:flex;flex-direction:column;align-items:center;gap:12px}
.footer .copyright{font-size:11px;font-weight:400;letter-spacing:0.1em;color:var(--color-text-muted)}
.footer-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.footer-links a{color:var(--color-text-secondary);text-decoration:none;transition:color 0.3s ease;font-size:11px;font-weight:500;letter-spacing:0.1em}
.footer-links a:hover{color:var(--color-text)}
.separator{font-size:10px;color:var(--color-text-muted);opacity:0.4}
.beian{font-size:10px;letter-spacing:0.05em;color:var(--color-text-muted)}
.beian a{color:var(--color-text-muted);text-decoration:none;transition:color 0.3s ease}
.beian a:hover{color:var(--color-text)}

/* Responsive */
@media(max-width:768px){
.container{padding:40px 24px}
.header{grid-template-columns:1fr;gap:16px}
.logo h1{font-size:26px}
.nav-links{justify-content:flex-start;gap:16px}
.main-content{padding:40px 0}
.hero{margin-bottom:40px}
.hero p{font-size:22px}
.map-card{padding:14px 16px;flex-wrap:wrap;gap:10px}
.map-card-time{display:none}
}
@media(max-width:480px){
.container{padding:24px 16px}
.logo h1{font-size:22px}
.logo-sub{font-size:12px}
.hero h2{font-size:12px}
.hero p{font-size:18px}
.hero .hero-sub{font-size:11px}
.upload-zone{padding:24px 16px;min-height:200px}
.preview-area{min-height:200px}
.footer-links{flex-direction:column;gap:4px}
.separator{display:none}
}