/* 全局变量与主题色 */
:root{
  --bg: #f6f9fc;
  --card: #ffffff;
  --text: #0f1724;
  --subtle: #55607a;
  --primary: #2563eb;
  --accent: #06b6d4;
  --muted: #e6eef8;
  --shadow: 0 6px 18px rgba(16,24,40,0.06);
  --radius: 12px;
  --glass: rgba(255,255,255,0.6);
  --transition: 200ms ease;
}

[data-theme="dark"]{
  --bg: #071025;
  --card: #072033;
  --text: #e6f0ff;
  --subtle: #9fb0cc;
  --primary: #60a5fa;
  --accent: #2dd4bf;
  --muted: rgba(255,255,255,0.04);
  --shadow: 0 10px 30px rgba(0,0,0,0.5);
  --glass: rgba(255,255,255,0.03);
}

/* Reset 和基础 */
*{box-sizing:border-box}
html，body,#app{height:100%}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial;
  margin:0;
  padding:0;
  background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 90%, #0000 10%));
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  transition: background var(--transition), color var(--transition);
  padding:24px;
}

/* 应用容器 */
。app{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* 顶部区域 */
。topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:18px;
  border-radius:var(--radius);
  background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 90%, #0000));
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition);
}

。title-area{
  display:flex;
  flex-direction:column;
}
。title{
  margin:0;
  font-size:20px;
}
。subtitle{
  margin:2px 0 0 0;
  font-size:12px;
  color:var(--subtle);
}

/* 控件 */
。controls{
  display:flex;
  align-items:center;
  gap:12px;
}
。search-wrap{
  position:relative;
}
。search{
  padding:10px 36px 10px 12px;
  border-radius:10px;
  border:1px solid var(--muted);
  background:transparent;
  outline:none;
  color:var(--text);
  width:320px;
  transition: box-shadow var(--transition), border-color var(--transition);
}
。search:focus{
  box-shadow:0 6px 18px rgba(37,99,235,0.12);
  border-color:var(--primary);
}
。icon-btn{background:transparent;border:0;padding:6px;border-radius:8px;cursor:pointer}
。icon-btn。hidden{display:none}
。actions{display:flex; gap:8px; align-items:center}
。btn{
  padding:8px 12px;
  border-radius:10px;
  background:transparent;
  border:1px solid var(--muted);
  cursor:pointer;
  color:var(--text);
}
。btn。tiny{padding:6px}
。btn。primary{
  background:linear-gradient(90deg,var(--primary),color-mix(in srgb,var(--primary) 80%, var(--accent)));
  color:white;
  border:0;
  box-shadow: 0 6px 18px rgba(37,99,235,0.12);
}

/* 分类栏 */
。category-bar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  padding:8px;
}
。cat-item{
  padding:8px 12px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--muted);
  cursor:pointer;
  transition:transform var(--transition), box-shadow var(--transition);
  display:flex;
  gap:8px;
  align-items:center;
}
。cat-item。active{
  background:linear-gradient(90deg,var(--primary),color-mix(in srgb,var(--primary) 80%, var(--accent)));
  color:white;
  box-shadow:0 8px 30px rgba(37,99,235,0.12);
}

/* 链接卡片区 */
。links-container{
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* 分类组 */
。group{
  display:flex;
  flex-direction:column;
  gap:12px;
}
。group-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--subtle);
  font-weight:600;
}

/* 卡片网格 */
。grid{
  display:grid;
  grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
  gap:12px;
}

/* 单张卡片 */
。card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:12px;
  border-radius:12px;
  background:var(--card);
  box-shadow:var(--shadow);
  transition:transform 200ms ease, box-shadow 200ms ease;
  cursor:pointer;
  min-height:110px;
  position:relative;
  overflow:hidden;
}
。card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px rgba(2,6,23,0.15);
}
。card-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
。icon{
  width:46px;
  height:46px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:var(--card);
  background:linear-gradient(135deg,var(--muted), color-mix(in srgb, var(--muted) 70%, transparent));
  overflow:hidden;
}
。icon img{width:100%;height:100%;object-fit:cover;display:block}
。card-title{
  font-weight:600;
  font-size:14px;
  margin:0;
  color:var(--text);
}
。card-url{font-size:12px;color:var(--subtle);overflow:hidden;text-overflow:ellipsis;white-space:现在rap}
。delete-btn{
  border:0;background:transparent;color:var(--subtle);cursor:pointer;padding:6px;border-radius:8px;
}
。card-footer{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* 图标预览与上传 */
。icon-row{display:flex;gap:10px;align-items:center}
。icon-preview{
  width:46px;height:46px;border-radius:8px;border:1px dashed var(--muted);display:flex;align-items:center;justify-content:center;color:var(--subtle);overflow:hidden;background:transparent;
}

/* 模态框 */
。modal{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:60;
}
。modal。hidden{display:none}
。modal-backdrop{position:absolute;inset:0;background:linear-gradient(90deg， rgba(2，6，23，0.45)， rgba(2，6,23,0.30));backdrop-filter: blur(4px);}
。modal-card{
  position:relative;z-index:2;max-width:520px;width:100%;background:var(--card);border-radius:12px;padding:0;box-shadow:var(--shadow);
  transform-origin:center; animation:pop 180ms ease;
}
@keyframes pop{from{transform:translateY(10px) scale(.98);opacity:0}to{transform:none;opacity:1}}

。modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--muted)}
。modal-body{padding:16px;display:flex;flex-direction:column;gap:12px}
。modal-body label{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--subtle)}
。modal-body input, .modal-body select{padding:8px;border-radius:8px;border:1px solid var(--muted);background:transparent;color:var(--text);outline:none}
。modal-footer{display:flex;justify-content:flex-end;gap:8px;padding-top:8px;border-top:1px solid var(--muted)}

/* 底部 */
。footer{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:8px;background:transparent;color:var(--subtle)}

/* 响应式 */
@media (max-width:800px){
  。search{width:180px}
  。topbar{flex-direction:column;align-items:stretch;gap:12px}
  。controls{justify-content:space-between}
}

@media (max-width:520px){
  body{padding:12px}
  。grid{grid-template-columns: repeat(2,1fr)}
  。search{width:100%}
  。title{font-size:18px}
}