/* ==========================================================================
   Ekkoo 设计系统 —— 单一真相来源
   对标 v0.app：简洁 · 克制 · 高端。高级来自减法。
   所有页面引用此文件，改一处全站生效（杜绝各页面重复内联样式）。
   ========================================================================== */

:root{
  /* ---- 颜色：近白底 + 黑白灰三级，颜色留给作品内容（v0 心法）---- */
  --bg:            #ffffff;   /* 页面底：纯白 */
  --bg-subtle:     #fafafa;   /* 次级背景（缩略图占位、hover 底）*/
  --card:          #ffffff;   /* 卡片底 */
  --fg:            #171717;   /* 主文字：近黑 */
  --fg-muted:      #737373;   /* 次要文字：中灰 */
  --fg-faint:      #a3a3a3;   /* 更弱：占位、元信息 */
  --border:        #ebebeb;   /* 边框：极浅灰（v0 的关键，几乎不可见）*/
  --border-strong: #d4d4d4;   /* 稍强边框：hover/聚焦 */

  /* ---- 品牌色：Ekkoo 水蓝，极度克制，只在 logo/高亮点缀 ---- */
  --accent:        #3a5ccc;   /* 主强调（偏冷、压了饱和，更"工具站"）*/
  --accent-hover:  #2e4aa8;
  --accent-subtle: #f1f4fb;   /* 强调色的极浅底 */

  /* ---- 圆角：克制的小圆角（v0：按钮6 卡片8）---- */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-full: 999px;

  /* ---- 阴影：极弱，能不用就不用（v0 心法）---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.08);

  /* ---- 间距刻度（8pt 栅格）---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-8: 48px; --sp-10: 64px;

  /* ---- 字体：几何无衬线，全站统一 ---- */
  --font: "Inter","Geist","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;

  /* ---- 内容最大宽度 ---- */
  --maxw: 1120px;
}

*{margin:0;padding:0;box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* 细腻滚动条 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-full);border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--fg-faint)}

/* ==========================================================================
   顶栏
   ========================================================================== */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:var(--sp-5);
  height:56px;padding:0 var(--sp-5);
  background:rgba(255,255,255,.8);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
}
.logo{
  display:flex;align-items:center;gap:8px;
  font-size:17px;font-weight:600;letter-spacing:-.02em;cursor:pointer;
}
.logo .oo{color:var(--accent)}
.nav{display:flex;gap:2px}
.nav a{
  padding:6px 10px;border-radius:var(--r-sm);
  font-size:14px;font-weight:500;color:var(--fg-muted);cursor:pointer;
  transition:color .12s,background .12s;
}
.nav a:hover{color:var(--fg);background:var(--bg-subtle)}
.spacer{flex:1}

/* 搜索框 */
.search{
  display:flex;align-items:center;gap:8px;
  width:100%;max-width:280px;
  padding:7px 12px;border-radius:var(--r-md);
  background:var(--bg-subtle);border:1px solid var(--border);
  color:var(--fg-faint);font-size:13px;
  transition:border-color .12s,background .12s;
}
.search:focus-within{border-color:var(--border-strong);background:var(--bg)}
.search input{flex:1;background:none;border:none;outline:none;color:var(--fg);font-family:inherit;font-size:13px}
.search input::placeholder{color:var(--fg-faint)}

/* ==========================================================================
   按钮 —— 克制：主按钮实心，次按钮描边，无硬投影
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 14px;border-radius:var(--r-sm);
  font-size:14px;font-weight:500;cursor:pointer;
  border:1px solid transparent;
  transition:background .12s,border-color .12s,color .12s,opacity .12s;
  white-space:nowrap;
}
.btn-primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn-primary:hover{background:#000}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-accent:hover{background:var(--accent-hover)}
.btn-ghost{background:var(--bg);color:var(--fg);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--border-strong);background:var(--bg-subtle)}
.btn-lg{padding:11px 22px;font-size:15px;border-radius:var(--r-md)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* 头像 */
.avatar{
  width:30px;height:30px;border-radius:var(--r-full);
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;cursor:pointer;flex-shrink:0;
}

/* 用户下拉 */
.umenu{position:relative}
.udrop{
  position:absolute;right:0;top:38px;min-width:180px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  overflow:hidden;display:none;z-index:60;
}
.udrop.show{display:block}
.udrop .uhead{padding:12px 14px;border-bottom:1px solid var(--border)}
.udrop .uhead .nm{font-size:14px;font-weight:600}
.udrop .uhead .em{color:var(--fg-faint);font-size:12px;margin-top:2px}
.udrop a{display:block;padding:9px 14px;font-size:14px;font-weight:500;color:var(--fg);cursor:pointer}
.udrop a:hover{background:var(--bg-subtle)}

/* ==========================================================================
   通用：容器、标题、标签
   ========================================================================== */
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-5)}

.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:var(--r-full);
  background:var(--bg-subtle);border:1px solid var(--border);
  font-size:13px;font-weight:500;color:var(--fg-muted);
}

/* 分类标签 */
.tab{
  padding:6px 13px;border-radius:var(--r-full);
  font-size:13px;font-weight:500;color:var(--fg-muted);cursor:pointer;
  border:1px solid transparent;background:transparent;
  transition:all .12s;
}
.tab:hover:not(.active){color:var(--fg);background:var(--bg-subtle)}
.tab.active{background:var(--fg);color:var(--bg);font-weight:500}

/* ==========================================================================
   作品卡片 —— v0 风：极浅边、无硬投影、小圆角、封面为主角
   ========================================================================== */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;cursor:pointer;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.thumb{
  aspect-ratio:16/13;position:relative;overflow:hidden;    /* 加高，突出作品本体 */
  background:var(--bg-subtle);
  display:flex;align-items:center;justify-content:center;font-size:44px;
  border-bottom:1px solid var(--border);
}
.thumb .tag{
  position:absolute;top:10px;right:10px;z-index:3;
  padding:3px 9px;border-radius:var(--r-full);
  background:rgba(255,255,255,.92);backdrop-filter:blur(4px);
  border:1px solid var(--border);
  font-size:11px;font-weight:500;color:var(--fg-muted);
}
.thumb .ic-fallback{position:absolute;z-index:1;opacity:.5}
.live-preview{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;background:#0a0e1a}
/* 预览放大到 500% 并下移，裁掉作品顶部的标题/水印栏，只露核心视觉，缩略图更干净 */
.prev-frame{position:absolute;top:-14%;left:-2%;width:520%;height:560%;transform:scale(.2);transform-origin:top left;border:none;pointer-events:none}
.thumb .play-ov{
  position:absolute;inset:0;z-index:4;
  background:rgba(23,23,23,.55);backdrop-filter:blur(1px);
  display:flex;align-items:center;justify-content:center;gap:8px;
  color:#fff;font-size:14px;font-weight:500;
  opacity:0;transition:opacity .15s;
}
.card:hover .play-ov{opacity:1}
/* 文字区压紧，把空间让给作品本体 */
.card .body{padding:8px 11px 9px}
/* 标题限 1 行，超出省略号，不占两行 */
.card .title{font-size:13px;font-weight:600;line-height:1.3;color:var(--fg);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 作者+数据挤到紧贴标题下的一行，更小更淡，不抢作品 */
.card .meta{display:flex;align-items:center;gap:5px;margin-top:3px}
.mini-av{
  width:15px;height:15px;border-radius:var(--r-full);
  background:var(--accent);color:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:600;
}
/* 作者名限宽省略，避免长名字挤掉数据 */
.card .author{font-size:11px;color:var(--fg-faint);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:84px}
.card .stats{margin-left:auto;display:flex;gap:8px;font-size:11px;color:var(--fg-faint);flex-shrink:0}
.card .from{
  display:inline-block;margin-top:8px;
  font-size:11px;color:var(--accent);
  background:var(--accent-subtle);padding:2px 8px;border-radius:var(--r-full);
}

/* 空状态 / 加载骨架 */
.empty{grid-column:1/-1;text-align:center;padding:64px 20px;color:var(--fg-faint);font-size:14px}
.skel{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.skel .sk-thumb{aspect-ratio:16/10;background:linear-gradient(90deg,#f5f5f5 25%,#ececec 50%,#f5f5f5 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}
.skel .sk-body{padding:12px 14px}
.skel .sk-line{height:11px;border-radius:var(--r-sm);background:linear-gradient(90deg,#f5f5f5 25%,#ececec 50%,#f5f5f5 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;margin-bottom:8px}
.skel .sk-line.short{width:55%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ==========================================================================
   响应式
   ========================================================================== */
@media(max-width:640px){
  .topbar{gap:var(--sp-3);padding:0 var(--sp-4)}
  .nav{display:none}
}