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

:root{
  --bg:#f4f5f7;
  --surface:#fff;
  --text:#1f2329;
  --text-secondary:#5c636a;
  --text-muted:#8b949e;
  --accent:#4f46e5;
  --accent-light:#818cf8;
  --accent-bg:rgba(79,70,229,.06);
  --accent-hover:#4338ca;
  --border:#e5e7eb;
  --border-light:#f0f1f3;
  --radius:12px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:50px;
  --max:1200px;
  --content:720px;
  --sans:Inter,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --serif:"Noto Serif SC","Source Han Serif",Georgia,serif;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow:0 2px 8px rgba(0,0,0,.06);
  --shadow-md:0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:0 8px 32px rgba(0,0,0,.1);
  --transition:all .2s cubic-bezier(.4,0,.2,1);
}
.icon{width:1em;height:1em;vertical-align:middle;flex-shrink:0;margin-right:6px}
.icon-pin,.icon-search,.icon-menu,.icon-close,.icon-warning,.icon-check{width:16px;height:16px}

html{scroll-behavior:smooth}
body{font-family:var(--sans);font-size:16px;line-height:1.75;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

#app{display:flex;flex-direction:column;min-height:100vh}

/* ============================================
   Header - Halo Style
   ============================================ */
.site-header{
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-light);
  position:sticky;
  top:0;
  z-index:100;
  transition:var(--transition);
}
.header-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 32px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.site-logo{
  font-family:var(--serif);
  font-size:1.25rem;
  font-weight:700;
  letter-spacing:-.02em;
  cursor:pointer;
  transition:var(--transition);
  color:var(--text);
  display:flex;
  align-items:center;
  gap:8px;
}
.site-logo-icon{
  width:28px;
  height:28px;
  object-fit:contain;
}
.site-logo:hover{color:var(--accent)}
.site-nav{display:flex;gap:32px;list-style:none}
.site-nav a{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.9rem;
  color:var(--text-secondary);
  transition:var(--transition);
  padding:6px 0;
  position:relative;
  font-weight:500;
}
.site-nav a:hover{color:var(--text)}
.site-nav a.active{color:var(--accent)}
.site-nav a.active::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:20px;
  height:2px;
  background:var(--accent);
  border-radius:1px;
}

/* ============================================
   Content
   ============================================ */
.site-content{flex:1;max-width:var(--content);width:100%;margin:0 auto;padding:40px 24px 80px}

/* Transitions */
.fade-enter-active,.fade-leave-active{transition:opacity .25s ease}
.fade-enter-from,.fade-leave-to{opacity:0}

/* ============================================
   Hero Section - Halo Style
   ============================================ */
.hero-full{
  position:relative;
  width:100vw;
  height:100vh;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin-left:calc(-50vw + 50%);
  margin-right:calc(-50vw + 50%);
  margin-bottom:0;
}
.hero-bg{
  position:fixed;
  inset:0;
  background:url('images/cover.jpg') center/cover no-repeat;
  background-color:#1a1a2e;
  z-index:-1;
}
.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.5) 100%);
}
.hero-content{
  position:relative;
  z-index:1;
  text-align:center;
  padding:80px 20px;
  max-width:700px;
}
.hero-content h1{
  font-family:var(--serif);
  font-size:3rem;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.03em;
  margin-bottom:16px;
  color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.3);
}
.hero-content>p{
  color:rgba(255,255,255,.85);
  font-size:1.1rem;
  line-height:1.7;
  margin-bottom:32px;
  text-shadow:0 1px 8px rgba(0,0,0,.2);
}
.hero-content .hero-tag{
  display:inline-block;
  margin-bottom:20px;
  font-size:.85rem;
  padding:8px 20px;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(10px);
  border-radius:50px;
  color:#fff;
  font-weight:500;
  border:1px solid rgba(255,255,255,.2);
  letter-spacing:.02em;
}
.hero-actions{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}
.btn-hero{
  padding:14px 36px;
  border-radius:50px;
  font-size:.95rem;
  font-weight:600;
  cursor:pointer;
  transition:var(--transition);
  border:2px solid transparent;
  font-family:var(--sans);
  letter-spacing:.02em;
}
.btn-hero{
  background:rgba(255,255,255,.95);
  color:var(--text-primary);
  backdrop-filter:blur(10px);
}
.btn-hero:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  background:#fff;
}
.btn-hero.btn-outline{
  background:transparent;
  color:#fff;
  border:2px solid rgba(255,255,255,.6);
  backdrop-filter:blur(10px);
}
.btn-hero.btn-outline:hover{
  background:rgba(255,255,255,.15);
  border-color:#fff;
}

/* ============================================
   Post List - Halo Card Style
   ============================================ */
.search-box{
  position:relative;
  margin-bottom:24px;
}
.search-box input{
  width:100%;
  padding:14px 48px 14px 20px;
  border:2px solid var(--border);
  border-radius:var(--radius);
  font-size:1rem;
  font-family:var(--sans);
  background:var(--surface);
  transition:var(--transition);
  outline:none;
}
.search-box input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-bg);
}
.search-box input::placeholder{
  color:var(--text-muted);
}
.search-icon{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  color:var(--text-muted);
}
.search-info{
  color:var(--text-muted);
  font-size:0.9rem;
  margin-bottom:16px;
  padding-left:4px;
}
.no-results{
  text-align:center;
  padding:60px 20px;
  color:var(--text-muted);
  font-size:1.1rem;
}
.post-list{display:flex;flex-direction:column;gap:16px}
.post-item{
  background:var(--surface);
  padding:28px 32px;
  border-radius:var(--radius-lg);
  cursor:pointer;
  transition:var(--transition);
  border:1px solid var(--border-light);
  box-shadow:var(--shadow-sm);
}
.post-item:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:var(--border);
}
.post-meta{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  font-size:.85rem;
  color:var(--text-muted);
}
.post-tag{
  display:inline-block;
  background:var(--accent-bg);
  color:var(--accent);
  font-size:.75rem;
  font-weight:600;
  padding:4px 12px;
  border-radius:20px;
  letter-spacing:.02em;
}
.post-item h2{
  font-family:var(--serif);
  font-size:1.35rem;
  font-weight:700;
  line-height:1.4;
  letter-spacing:-.02em;
  margin-bottom:10px;
  transition:var(--transition);
  color:var(--text);
}
.post-item:hover h2{color:var(--accent)}
.post-item .excerpt{
  color:var(--text-secondary);
  font-size:.95rem;
  line-height:1.7;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ============================================
   Pagination
   ============================================ */
.pagination{display:flex;justify-content:center;gap:12px;margin-top:48px}
.pagination button{
  font-family:var(--sans);
  font-size:.9rem;
  padding:10px 24px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:var(--radius-sm);
  cursor:pointer;
  color:var(--text);
  transition:var(--transition);
  font-weight:500;
  box-shadow:var(--shadow-sm);
}
.pagination button:hover:not(:disabled){
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-bg);
}
.pagination button:disabled{opacity:.4;cursor:not-allowed}

/* ============================================
   Article Page - Halo Style
   ============================================ */
.back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.9rem;
  color:var(--text-muted);
  margin-bottom:32px;
  cursor:pointer;
  transition:var(--transition);
  padding:8px 16px;
  background:var(--surface);
  border-radius:var(--radius-sm);
  border:1px solid var(--border-light);
  width:fit-content;
}
.back-link:hover{color:var(--accent);border-color:var(--accent)}
.article-header{margin-bottom:40px}
.article-header h1{
  font-family:var(--serif);
  font-size:2.2rem;
  font-weight:800;
  line-height:1.3;
  letter-spacing:-.03em;
  margin-bottom:16px;
}
.article-meta{
  display:flex;
  align-items:center;
  gap:16px;
  font-size:.85rem;
  color:var(--text-muted);
}
.article-cover{
  width:100%;
  border-radius:var(--radius-lg);
  margin-bottom:24px;
  background:url('images/cover.jpg') center/cover no-repeat;
  background-color:#e8f0e8;
  height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
}
.article-cover::before{
  content:"";
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle,rgba(255,255,255,.06) 0%,transparent 60%);
  animation:coverShine 8s ease-in-out infinite;
}
@keyframes coverShine{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(20%,20%)}
}
.article-cover-text{
  font-size:1.3rem;
  font-weight:600;
  color:rgba(255,255,255,.85);
  text-shadow:0 1px 6px rgba(0,0,0,.1);
  z-index:1;
  letter-spacing:-.01em;
}
.article-body{
  font-family:var(--serif);
  font-size:1.05rem;
  line-height:2;
  color:#374151;
}
.article-body h2{
  font-size:1.5rem;
  font-weight:700;
  margin:48px 0 20px;
  padding-bottom:8px;
  border-bottom:1px solid var(--border-light);
}
.article-body h3{
  font-size:1.25rem;
  font-weight:600;
  margin:36px 0 16px;
  color:var(--text-primary);
}
.article-body p{margin-bottom:24px}
.article-body strong{font-weight:700;color:var(--text-primary)}
.article-body em{font-style:italic;color:var(--text-secondary)}
.article-body img{
  max-width:100%;
  border-radius:var(--radius);
  margin:24px 0;
  box-shadow:var(--shadow);
}
.article-body hr{
  border:none;
  height:1px;
  background:var(--border);
  margin:40px 0;
}
.article-body table{
  width:100%;
  border-collapse:collapse;
  margin:28px 0;
  border-radius:var(--radius-sm);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.article-body table th{
  background:var(--accent-bg);
  font-weight:600;
  text-align:left;
  padding:12px 16px;
  border-bottom:2px solid var(--border);
}
.article-body table td{
  padding:12px 16px;
  border-bottom:1px solid var(--border-light);
}
.article-body table tr:last-child td{border-bottom:none}
.article-body table tr:hover td{background:var(--accent-bg)}
.article-body blockquote{
  border-left:4px solid var(--accent);
  margin:28px 0;
  padding:16px 24px;
  background:var(--accent-bg);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--text-secondary);
  font-style:italic;
}
.article-body code{
  background:#f3f4f6;
  padding:3px 8px;
  border-radius:6px;
  font-size:.9em;
  font-family:"Fira Code",monospace;
}
.article-body pre{
  background:#1e1e2e;
  color:#cdd6f4;
  padding:24px;
  border-radius:var(--radius);
  overflow-x:auto;
  margin:28px 0;
  font-size:.9rem;
  line-height:1.7;
  box-shadow:var(--shadow-md);
}
.article-body pre code{background:none;padding:0;color:inherit;font-size:inherit}
.article-body ul,.article-body ol{margin:20px 0;padding-left:28px}
.article-body li{margin-bottom:10px;line-height:1.8}
.article-body ul{list-style-type:disc}
.article-body ul ul{list-style-type:circle;margin:8px 0}
.article-body ol{list-style-type:decimal}
.article-body ol ol{list-style-type:lower-alpha}
.article-body a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:var(--transition);
}
.article-body a:hover{
  text-decoration-thickness:2px;
  color:var(--accent-dark);
}
.article-body h1{
  font-size:1.8rem;
  font-weight:700;
  margin:40px 0 20px;
  padding-bottom:8px;
  border-bottom:2px solid var(--border);
}
.article-body h4{
  font-size:1.1rem;
  font-weight:600;
  margin:28px 0 12px;
  color:var(--text-primary);
}
.article-body h5{
  font-size:1rem;
  font-weight:600;
  margin:24px 0 10px;
  color:var(--text-secondary);
}
.article-body h6{
  font-size:.95rem;
  font-weight:600;
  margin:20px 0 8px;
  color:var(--text-muted);
}

/* ============================================
   Archive Page
   ============================================ */
.archive-year{
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:700;
  margin:40px 0 20px;
  padding-bottom:12px;
  border-bottom:2px solid var(--border);
  color:var(--text);
}
.archive-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.archive-list li{
  display:flex;
  align-items:baseline;
  gap:16px;
  padding:14px 20px;
  cursor:pointer;
  border-radius:var(--radius-sm);
  transition:var(--transition);
  background:var(--surface);
  border:1px solid var(--border-light);
}
.archive-list li:hover{
  background:var(--accent-bg);
  border-color:var(--accent);
  transform:translateX(4px);
}
.archive-date{
  font-size:.85rem;
  color:var(--text-muted);
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
  font-weight:500;
}
.archive-title{
  font-family:var(--serif);
  font-size:1rem;
  transition:var(--transition);
  font-weight:500;
}
.archive-list li:hover .archive-title{color:var(--accent)}

/* ============================================
   Footer - Halo Style
   ============================================ */
.site-footer{
  border-top:1px solid var(--border-light);
  background:var(--surface);
  text-align:center;
  padding:32px 24px;
  font-size:.85rem;
  color:var(--text-muted);
}

/* ============================================
   Responsive
   ============================================ */
@media(max-width:768px){
  .header-inner{padding:0 16px;height:56px}
  .site-nav{gap:8px}
  .site-nav a{font-size:.82rem;padding:6px 8px;white-space:nowrap}
  .site-nav a.active::after{width:16px}
  .hero h1{font-size:2rem}
  .hero{padding:32px 0 28px}
  .article-header h1{font-size:1.8rem}
  .article-cover{height:200px}
  .post-item{padding:20px 24px}
  .site-content{padding:32px 20px 60px}
}
@media(max-width:640px){
  .site-nav{gap:4px}
  .site-nav a{font-size:.78rem;padding:6px 6px}
  .site-logo{font-size:1.05rem}
  .site-logo-icon{width:24px;height:24px}
  .header-inner{padding:0 12px}
  .hero-content h1{font-size:2.2rem}
  .hero-content>p{font-size:1rem}
  .post-item{padding:16px 18px;border-radius:var(--radius)}
  .post-item h2{font-size:1.15rem}
  .post-meta{flex-wrap:wrap;gap:8px}
  .site-content{padding:24px 16px 48px}

  /* Archive page mobile */
  .archive-list li{
    flex-direction:column;gap:4px;padding:12px 16px;align-items:flex-start
  }
  .archive-date{font-size:.8rem}
  .archive-title{font-size:.95rem}
  .archive-year{font-size:1.3rem;margin:32px 0 16px}

  /* Links page mobile */
  .links-page{padding:0 0 40px}
  .link-grid{grid-template-columns:1fr;gap:12px}
  .link-category{margin-bottom:32px}
  .link-category-title{font-size:1.2rem}
  .link-category-icon{width:32px;height:32px}
  .link-card{padding:16px}
  .link-card-desc{padding-left:0}
  .link-card-icon-wrap{width:24px;height:24px}
  .link-card-icon{width:18px;height:18px}

  /* About page mobile */
  .about-page{padding:24px 16px 40px}
  .about-name{font-size:1.6rem}
  .about-avatar{width:96px;height:96px}
  .about-card{padding:20px}
  .tech-stack-grid{grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:12px}
  .tech-icon{width:36px;height:36px}

  /* Article page mobile */
  .article-header h1{font-size:1.5rem}
  .article-meta{flex-wrap:wrap;gap:8px}
  .article-body{font-size:1rem}
  .article-body h2{font-size:1.3rem}
  .article-body pre{padding:16px;font-size:.85rem}

  /* Hero mobile */
  .hero-content{padding:60px 16px}
  .hero-content h1{font-size:2rem}
  .btn-hero{padding:12px 28px;font-size:.9rem}

  /* Page hero mobile */
  .page-hero{padding:40px 16px 32px}
  .page-hero h1{font-size:1.6rem}

  /* About links mobile */
  .about-links{gap:8px}
  .about-link-card{padding:12px 16px;font-size:.9rem}
}
@media(max-width:400px){
  .site-nav{gap:2px}
  .site-nav a{font-size:.72rem;padding:4px 4px}
  .site-logo{font-size:.95rem}
  .site-logo-icon{width:20px;height:20px}
}

/* ============================================
   Admin Layout - Halo Dashboard Style
   ============================================ */
.admin-layout{display:flex;min-height:100vh;background:var(--bg)}
.admin-sidebar{
  width:240px;
  background:var(--surface);
  border-right:1px solid var(--border-light);
  padding:24px 0;
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-sm);
  z-index:50;
}
.admin-logo{
  font-family:var(--serif);
  font-size:1.2rem;
  font-weight:700;
  padding:0 24px 20px;
  border-bottom:1px solid var(--border-light);
  margin-bottom:16px;
  color:var(--text);
}
.admin-nav{flex:1;display:flex;flex-direction:column;gap:4px;padding:0 12px}
.admin-nav button{
  background:none;
  border:none;
  color:var(--text-secondary);
  padding:12px 16px;
  text-align:left;
  font-size:.9rem;
  cursor:pointer;
  border-radius:var(--radius-sm);
  transition:var(--transition);
  font-family:var(--sans);
  font-weight:500;
  display:flex;
  align-items:center;
  gap:10px;
}
.admin-nav-icon{
  width:18px;
  height:18px;
  flex-shrink:0;
}
.admin-nav button.active .admin-nav-icon{
  filter:brightness(0) invert(1);
}
.admin-nav button:hover{
  background:var(--accent-bg);
  color:var(--accent);
}
.admin-nav button.active{
  background:var(--accent);
  color:#fff;
  box-shadow:var(--shadow-sm);
}
.admin-back{padding:16px 24px;border-top:1px solid var(--border-light)}
.admin-back a{
  color:var(--text-muted);
  font-size:.85rem;
  transition:var(--transition);
  font-weight:500;
}
.admin-back a:hover{color:var(--accent)}
.admin-main{margin-left:240px;flex:1;padding:32px 40px}
.admin-main h1{
  font-family:var(--serif);
  font-size:1.75rem;
  font-weight:800;
  margin-bottom:28px;
  color:var(--text);
}

/* Admin Header */
.admin-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}

/* Admin Table */
.admin-table{
  width:100%;
  background:var(--surface);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid var(--border-light);
}
.admin-table thead{background:var(--bg)}
.admin-table th{
  text-align:left;
  padding:14px 20px;
  font-size:.8rem;
  font-weight:600;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.admin-table td{
  padding:16px 20px;
  border-top:1px solid var(--border-light);
  font-size:.9rem;
}
.admin-table tbody tr{transition:var(--transition)}
.admin-table tbody tr:hover{background:var(--accent-bg)}
.admin-actions{display:flex;gap:8px}

/* Pinned Badge */
.pinned-badge{
  display:inline-flex;
  align-items:center;
  margin-left:6px;
  vertical-align:middle;
  color:var(--accent);
}
.btn-pin{
  background:var(--accent-bg);
  color:var(--accent);
  border:1px solid var(--accent);
  white-space:nowrap;
}
.btn-pin:hover{background:var(--accent);color:#fff}

/* Admin Filters */
.admin-filters{
  display:flex;
  gap:12px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.search-input{
  flex:1;
  min-width:200px;
  padding:10px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:.9rem;
  background:var(--surface);
  color:var(--text);
  outline:none;
  transition:border-color .2s;
}
.search-input:focus{border-color:var(--accent)}
.filter-select{
  padding:10px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:.9rem;
  background:var(--surface);
  color:var(--text);
  outline:none;
  cursor:pointer;
  transition:border-color .2s;
}
.filter-select:focus{border-color:var(--accent)}

/* Admin No Results */
.admin-no-results{
  text-align:center;
  padding:40px 20px;
  color:var(--text-muted);
  font-size:1rem;
}

/* Admin Pagination */
.admin-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:24px;
  padding:16px 0;
}
.admin-page-info{
  font-size:.85rem;
  color:var(--text-muted);
}

/* ============================================
   Buttons - Halo Style
   ============================================ */
.btn-primary{
  background:var(--accent);
  color:#fff;
  border:none;
  padding:12px 28px;
  border-radius:var(--radius-xl);
  font-size:.9rem;
  cursor:pointer;
  transition:var(--transition);
  font-family:var(--sans);
  font-weight:600;
  box-shadow:var(--shadow-sm);
  letter-spacing:.02em;
}
.btn-primary:hover{
  background:var(--accent-hover);
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}
.btn-small{
  background:var(--surface);
  border:1px solid var(--border);
  padding:8px 18px;
  border-radius:var(--radius-xl);
  font-size:.8rem;
  cursor:pointer;
  transition:var(--transition);
  font-family:var(--sans);
  font-weight:500;
  letter-spacing:.01em;
  color:var(--text-secondary);
}
.btn-small:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-bg);
}
.btn-danger{color:#ef4444}
.btn-danger:hover{
  border-color:#ef4444;
  background:rgba(239,68,68,.06);
  color:#ef4444;
}

/* ============================================
   Editor - Halo Style
   ============================================ */
.editor-panel{
  background:var(--surface);
  border-radius:var(--radius-lg);
  padding:32px;
  box-shadow:var(--shadow);
  border:1px solid var(--border-light);
}
.editor-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
  padding-bottom:20px;
  border-bottom:1px solid var(--border-light);
}
.editor-header h2{
  font-family:var(--serif);
  font-size:1.4rem;
  font-weight:700;
}
.editor-toolbar{
  display:flex;
  gap:8px;
  margin-bottom:24px;
  flex-wrap:wrap;
  padding:12px;
  background:var(--bg);
  border-radius:var(--radius-sm);
}
.form-group{margin-bottom:20px}
.form-group label{
  display:block;
  font-size:.85rem;
  font-weight:600;
  color:var(--text-secondary);
  margin-bottom:8px;
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding:12px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:.9rem;
  font-family:var(--sans);
  transition:var(--transition);
  background:var(--surface);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-bg);
}
.form-group input.error,
.form-group select.error,
.form-group textarea.error{
  border-color:#ef4444;
}
.form-error{
  color:#ef4444;
  font-size:0.8rem;
  margin-top:4px;
  display:flex;
  align-items:center;
  gap:4px;
}
.form-error::before{
  content:'';
  width:14px;
  height:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2'%3E%3Cpath d='M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.editor-footer{
  display:flex;
  gap:12px;
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid var(--border-light);
  align-items:center;
}
.draft-status{
  margin-left:auto;
  font-size:0.85rem;
  color:var(--text-muted);
  display:flex;
  align-items:center;
  gap:6px;
}
.draft-status::before{
  content:'';
  width:14px;
  height:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
}

/* ============================================
   WYSIWYG Editor - Word-like Style
   ============================================ */
.wysiwyg-toolbar{
  display:flex;
  gap:4px;
  margin-bottom:0;
  flex-wrap:wrap;
  padding:8px 12px;
  background:var(--bg);
  border:1px solid var(--border);
  border-bottom:none;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  align-items:center;
}
.tb-btn{
  background:var(--surface);
  border:1px solid transparent;
  padding:6px 10px;
  border-radius:6px;
  font-size:.85rem;
  cursor:pointer;
  transition:var(--transition);
  font-family:var(--sans);
  color:var(--text-secondary);
  line-height:1;
  min-width:32px;
  text-align:center;
}
.tb-btn:hover{
  background:var(--accent-bg);
  border-color:var(--accent);
  color:var(--accent);
}
.tb-btn:active{
  background:var(--accent);
  color:#fff;
}
.tb-sep{
  width:1px;
  height:24px;
  background:var(--border);
  margin:0 4px;
}
.toolbar-icon{
  width:18px;
  height:18px;
  object-fit:contain;
  vertical-align:middle;
}
.action-icon{
  width:16px;
  height:16px;
  object-fit:contain;
  vertical-align:middle;
  margin-right:4px;
}
.wysiwyg-editor{
  min-height:400px;
  max-height:600px;
  overflow-y:auto;
  padding:24px;
  border:1px solid var(--border);
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
  font-size:1rem;
  line-height:1.8;
  color:var(--text);
  background:var(--surface);
  outline:none;
  transition:border-color .2s;
}
.wysiwyg-editor:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-bg);
}
.wysiwyg-editor h1{
  font-size:1.8rem;
  font-weight:700;
  margin:0 0 16px;
  padding-bottom:8px;
  border-bottom:2px solid var(--border);
}
.wysiwyg-editor h2{
  font-size:1.5rem;
  font-weight:700;
  margin:24px 0 12px;
}
.wysiwyg-editor h3{
  font-size:1.25rem;
  font-weight:600;
  margin:20px 0 10px;
}
.wysiwyg-editor p{
  margin:0 0 12px;
}
.wysiwyg-editor img{
  max-width:100%;
  height:auto;
  border-radius:var(--radius-sm);
  margin:12px 0;
}
.wysiwyg-editor table{
  width:100%;
  border-collapse:collapse;
  margin:16px 0;
}
.wysiwyg-editor table th,
.wysiwyg-editor table td{
  border:1px solid var(--border);
  padding:8px 12px;
  text-align:left;
}
.wysiwyg-editor table th{
  background:var(--bg);
  font-weight:600;
}
.wysiwyg-editor blockquote{
  border-left:4px solid var(--accent);
  padding:12px 20px;
  margin:16px 0;
  background:var(--accent-bg);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--text-secondary);
}
.wysiwyg-editor pre{
  background:#1e1e1e;
  color:#d4d4d4;
  padding:16px 20px;
  border-radius:var(--radius-sm);
  overflow-x:auto;
  margin:16px 0;
  font-family:'Consolas','Monaco',monospace;
  font-size:.9rem;
  line-height:1.6;
}
.wysiwyg-editor code{
  background:var(--bg);
  padding:2px 6px;
  border-radius:4px;
  font-size:.9em;
  font-family:'Consolas','Monaco',monospace;
}
.wysiwyg-editor a{
  color:var(--accent);
  text-decoration:underline;
}
.wysiwyg-editor ul,
.wysiwyg-editor ol{
  margin:12px 0;
  padding-left:24px;
}
.wysiwyg-editor li{
  margin:4px 0;
}
.wysiwyg-editor hr{
  border:none;
  border-top:2px solid var(--border);
  margin:24px 0;
}

/* ============================================
   Settings Panel
   ============================================ */
.settings-panel{
  background:var(--surface);
  border-radius:var(--radius-lg);
  padding:32px;
  box-shadow:var(--shadow);
  border:1px solid var(--border-light);
  max-width:100%;
  width:100%;
}

/* ============================================
   Login Page - Halo Style
   ============================================ */
.login-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#f4f5f7 0%,#e0e7ff 100%);
}
.login-box{
  background:var(--surface);
  border-radius:var(--radius-lg);
  padding:48px 40px;
  width:100%;
  max-width:420px;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--border-light);
}
.login-box h1{
  font-family:var(--serif);
  font-size:1.75rem;
  font-weight:800;
  text-align:center;
  margin-bottom:36px;
  color:var(--text);
}
.login-error{
  color:#ef4444;
  font-size:.85rem;
  text-align:center;
  margin-bottom:20px;
  padding:10px 16px;
  background:rgba(239,68,68,.06);
  border-radius:var(--radius-sm);
}
.login-box form{display:flex;flex-direction:column;align-items:center}
.login-box form .form-group{width:100%}
.login-box form .btn-primary{width:100%;display:block;text-align:center}
.login-back{
  text-align:center;
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid var(--border-light);
}
.login-back a{
  color:var(--text-muted);
  font-size:.85rem;
  text-decoration:none;
  transition:var(--transition);
}
.login-back a:hover{color:var(--accent)}

/* ============================================
   Admin Logout
   ============================================ */
.admin-logout{
  padding:16px 24px;
  margin-top:auto;
  border-top:1px solid var(--border-light);
}
.admin-logout .btn-small{
  width:100%;
  text-align:center;
  display:block;
}

/* ============================================
   Responsive Admin
   ============================================ */
.mobile-header{display:none}
@media(max-width:768px){
  .mobile-header{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
    padding-bottom:16px;
    border-bottom:1px solid var(--border-light);
  }
  .sidebar-toggle{
    background:var(--surface);
    border:1px solid var(--border-light);
    border-radius:var(--radius-sm);
    width:40px;
    height:40px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text);
  }
  .sidebar-toggle .icon{
    width:20px;
    height:20px;
  }
  .mobile-title{
    font-family:var(--serif);
    font-weight:600;
    font-size:1.1rem;
  }
  .admin-sidebar{
    width:240px;
    transform:translateX(-100%);
    transition:transform 0.3s ease;
    padding:16px 0;
  }
  .admin-sidebar.collapsed{
    transform:translateX(-100%);
  }
  .admin-sidebar:not(.collapsed){
    transform:translateX(0);
    box-shadow:2px 0 10px rgba(0,0,0,0.15);
  }
  .admin-logo{
    font-size:1rem;
    padding:0 16px 16px;
  }
  .admin-nav button{
    padding:12px 16px;
    text-align:left;
    font-size:0.9rem;
  }
  .admin-back{display:block;
    padding:12px 16px}
  .admin-logout{display:block;
    padding:12px 16px}
  .admin-main{
    margin-left:0;
    padding:24px 20px;
  }
  .admin-main.sidebar-collapsed{
    margin-left:0;
  }
  .form-row{grid-template-columns:1fr}
  .editor-panel{padding:20px}
  .settings-panel{padding:24px}
}

/* ============================================
   Page Hero
   ============================================ */
.page-hero{
  text-align:center;
  padding:60px 20px 40px;
}
.page-hero h1{
  font-family:var(--serif);
  font-size:2.2rem;
  font-weight:800;
  margin-bottom:12px;
  background:linear-gradient(135deg,var(--accent),#7c3aed);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.page-hero p{
  color:var(--text-muted);
  font-size:1rem;
}

/* ============================================
   Links Page
   ============================================ */
.links-page{
  padding:0 20px 60px;
  max-width:1100px;
  margin:0 auto;
}
.link-category{
  margin-bottom:48px;
}
.link-category-title{
  font-family:var(--serif);
  font-size:1.4rem;
  font-weight:700;
  margin-bottom:20px;
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--text-primary);
}
.link-category-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:var(--radius-sm);
  background:var(--accent-bg);
  color:var(--accent);
  font-size:.85rem;
  font-weight:700;
}
.link-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px;
}
.link-card{
  display:block;
  background:var(--surface);
  border:1px solid var(--border-light);
  border-radius:var(--radius-md);
  padding:20px;
  text-decoration:none;
  color:inherit;
  transition:var(--transition);
  box-shadow:var(--shadow-sm);
}
.link-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  border-color:var(--accent);
}
.link-card-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.link-card-icon-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  flex-shrink:0;
}
.link-card-icon{
  width:20px;
  height:20px;
  object-fit:contain;
  border-radius:4px;
  display:block;
}
.link-card-icon-default{
  color:var(--text-muted);
  opacity:.6;
}
.link-card-name{
  font-weight:600;
  font-size:.95rem;
  color:var(--text-primary);
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.link-card-arrow{
  width:16px;
  height:16px;
  color:var(--text-muted);
  transition:var(--transition);
  flex-shrink:0;
  opacity:.5;
}
.link-card:hover .link-card-arrow{
  color:var(--accent);
  opacity:1;
  transform:translate(2px,-2px);
}
.link-card-desc{
  color:var(--text-muted);
  font-size:.82rem;
  line-height:1.5;
  margin:0;
  padding-left:38px;
}

/* ============================================
   About Page - iOS Style
   ============================================ */
.about-page {
  padding: 40px 20px 60px;
}
.about-container {
  max-width: 680px;
  margin: 0 auto;
}
.about-hero {
  text-align: center;
  padding: 40px 0 48px;
}
.about-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--border);
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
  border: 4px solid var(--surface);
}
.about-name {
  font-family: var(--sans);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.about-role {
  font-size: 1.05rem;
  color: var(--text-muted);
  font-weight: 400;
}
.about-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}
.about-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow);
  transition: all 0.2s ease;
}
.about-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.card-icon {
  font-size: 1.8rem;
  margin-bottom: 12px;
}
.about-card h2 {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}
.about-card p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}
.tech-stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 20px;
  margin-top: 16px;
}
.tech-stack-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 12px;
  background: var(--bg);
  border-radius: 12px;
  transition: all 0.2s ease;
}
.tech-stack-item:hover {
  background: var(--border-light);
  transform: translateY(-2px);
}
.tech-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.tech-stack-item span {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  text-align: center;
}
.about-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.about-link-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--accent);
  box-shadow: var(--shadow);
  transition: all 0.2s ease;
  text-decoration: none;
}
.about-link-card:hover {
  background: var(--bg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.link-icon {
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.link-icon .icon {
  width: 18px;
  height: 18px;
}

@media (max-width: 768px) {
  .about-links {
    flex-direction: column;
  }
  .about-link-card {
    justify-content: center;
  }
}

/* ============================================
   Loading Spinner
   ============================================ */
.app-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
}
.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.app-loading p {
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: 0.95rem;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   404 Page
   ============================================ */
.not-found-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#f4f5f7 0%,#e0e7ff 100%);
}
.not-found-content{
  text-align:center;
  background:var(--surface);
  border-radius:var(--radius-lg);
  padding:64px 48px;
  width:100%;
  max-width:420px;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--border-light);
}
.not-found-content h1{
  font-size:6rem;
  font-weight:900;
  color:var(--accent);
  line-height:1;
  margin-bottom:8px;
  font-family:var(--serif);
}
.not-found-content p{
  font-size:1.25rem;
  color:var(--text-secondary);
  margin-bottom:36px;
}
.not-found-link{
  display:inline-block;
  padding:12px 32px;
  background:var(--accent);
  color:#fff;
  border-radius:var(--radius-sm);
  text-decoration:none;
  font-weight:600;
  transition:var(--transition);
}
.not-found-link:hover{
  background:var(--accent-hover);
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
}