:root{
  --primary:#6366f1;--primary-d:#4f46e5;--bg:#f5f6fa;--card:#fff;--text:#1f2937;--muted:#6b7280;
  --border:#e5e7eb;--success:#10b981;--danger:#ef4444;--warn:#f59e0b;--side:#1e293b;--side-a:#334155;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-d)}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
button,.btn{display:inline-block;padding:8px 16px;border-radius:8px;background:var(--primary);color:#fff;border:0;cursor:pointer;font-size:14px;transition:.15s}
button:hover,.btn:hover{background:var(--primary-d);color:#fff}
.btn-secondary{background:#fff;color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{background:#f9fafb;color:var(--text)}
.btn-danger{background:var(--danger)}.btn-danger:hover{background:#dc2626}
.btn-success{background:var(--success)}.btn-success:hover{background:#059669}
.btn-sm{padding:4px 10px;font-size:12px}
input,select,textarea{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;background:#fff;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.15)}
textarea{font-family:ui-monospace,Menlo,Consolas,monospace;min-height:100px}
label{display:block;margin:10px 0 5px;color:#374151;font-weight:500;font-size:13px}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);font-size:13px}
th{background:#f9fafb;color:#374151;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
tbody tr:hover{background:#fafbfc}
.card{background:var(--card);border-radius:12px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.04);border:1px solid var(--border)}
.card + .card{margin-top:16px}
.card h2,.card h3{margin-top:0}
.flash{padding:12px 16px;border-radius:8px;margin:16px 0}
.flash-success{background:#d1fae5;color:#065f46}
.flash-error{background:#fee2e2;color:#991b1b}
.flash-info{background:#dbeafe;color:#1e40af}
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;font-weight:500}
.badge-ok{background:#d1fae5;color:#065f46}
.badge-no{background:#fee2e2;color:#991b1b}
.badge-info{background:#e0e7ff;color:#3730a3}
.badge-warn{background:#fef3c7;color:#92400e}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:#f3f4f6;padding:2px 6px;border-radius:4px}
.flex{display:flex;gap:12px;align-items:center}
.flex-between{display:flex;justify-content:space-between;align-items:center}
/* site nav */
.nav{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.nav-in{display:flex;justify-content:space-between;align-items:center;padding:14px 20px}
.brand{font-size:20px;font-weight:700;color:var(--text)}
.nav nav{display:flex;gap:20px;align-items:center}
.nav nav a{color:#374151;font-weight:500}
.nav nav a.btn-primary{background:var(--primary);color:#fff;padding:6px 14px;border-radius:6px}
.footer{text-align:center;color:var(--muted);padding:30px 0;margin-top:50px;border-top:1px solid var(--border);background:#fff}
/* home hero - anime style */
.hero{text-align:center;padding:70px 20px 50px;background:linear-gradient(135deg,#ff6b9d 0%,#c06bff 50%,#6b9dff 100%);color:#fff;border-radius:20px;margin-top:20px;position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(192,107,255,.3)}
.anime-hero{animation:heroGlow 3s ease-in-out infinite alternate}
@keyframes heroGlow{from{box-shadow:0 8px 32px rgba(192,107,255,.3)}to{box-shadow:0 12px 48px rgba(255,107,157,.5)}}
.hero-stars{position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="10" y="25" font-size="20" fill="rgba(255,255,255,.3)">✨</text><text x="65" y="65" font-size="15" fill="rgba(255,255,255,.2)">⭐</text><text x="25" y="85" font-size="18" fill="rgba(255,255,255,.25)">💫</text><text x="80" y="35" font-size="16" fill="rgba(255,255,255,.2)">🌟</text></svg>');background-size:400px 400px;animation:starsMove 20s linear infinite;pointer-events:none}
@keyframes starsMove{from{background-position:0 0}to{background-position:400px 400px}}
.hero-title{font-size:42px;margin:0 0 16px;font-weight:800;text-shadow:0 2px 20px rgba(0,0,0,.2);animation:titleFloat 2s ease-in-out infinite}
@keyframes titleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero-desc{font-size:18px;opacity:.95;margin-bottom:35px;text-shadow:0 1px 10px rgba(0,0,0,.15)}
.hero-actions{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.hero-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;border-radius:50px;font-size:16px;font-weight:600;text-decoration:none;transition:all .3s ease;box-shadow:0 4px 15px rgba(0,0,0,.2);position:relative;overflow:hidden}
.hero-btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.3);transition:width .6s,height .6s,top .6s,left .6s;transform:translate(-50%,-50%)}
.hero-btn:hover::before{width:300px;height:300px}
.hero-btn-primary{background:linear-gradient(135deg,#fff 0%,#f0f0ff 100%);color:#6b5cff;box-shadow:0 4px 20px rgba(255,255,255,.4)}
.hero-btn-primary:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 30px rgba(255,255,255,.6);color:#5b4cef}
.hero-btn-secondary{background:rgba(255,255,255,.2);color:#fff;border:2px solid rgba(255,255,255,.5);backdrop-filter:blur(10px)}
.hero-btn-secondary:hover{transform:translateY(-3px) scale(1.05);background:rgba(255,255,255,.3);border-color:#fff;box-shadow:0 8px 30px rgba(255,255,255,.3);color:#fff}
.btn-icon{font-size:20px;position:relative;z-index:1}
.btn-text{position:relative;z-index:1}
/* api search header - anime style */
.api-search-header{text-align:center;margin-top:30px;margin-bottom:20px}
.page-title{font-size:36px;font-weight:800;margin:0 0 8px;background:linear-gradient(135deg,#ff6b9d,#c06bff,#6b9dff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:titleShine 3s ease-in-out infinite}
@keyframes titleShine{0%,100%{filter:brightness(1)}50%{filter:brightness(1.2)}}
.page-subtitle{color:var(--muted);font-size:16px;margin:0}
.anime-card{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#ff6b9d,#c06bff,#6b9dff) border-box;box-shadow:0 4px 20px rgba(192,107,255,.15);transition:all .3s ease}
.anime-card:hover{box-shadow:0 8px 30px rgba(192,107,255,.25);transform:translateY(-2px)}
.anime-search-form{gap:12px}
.search-input-wrapper{position:relative;flex:2}
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none;z-index:1}
.search-input-wrapper input{padding-left:38px;border:2px solid #e5e7eb;transition:all .3s ease}
.search-input-wrapper input:focus{border-color:#c06bff;box-shadow:0 0 0 3px rgba(192,107,255,.15)}
.anime-select{border:2px solid #e5e7eb;transition:all .3s ease;flex:1;max-width:180px}
.anime-select:focus{border-color:#ff6b9d;box-shadow:0 0 0 3px rgba(255,107,157,.15)}
.anime-btn{background:linear-gradient(135deg,#ff6b9d,#c06bff);border:none;padding:10px 24px;font-weight:600;transition:all .3s ease;box-shadow:0 2px 10px rgba(192,107,255,.3)}
.anime-btn:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(192,107,255,.5);background:linear-gradient(135deg,#ff5a8d,#b05bef)}
/* api cards - anime enhanced */
.api-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:20px}
.api-card{background:#fff;border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,rgba(255,107,157,.3),rgba(192,107,255,.3),rgba(107,157,255,.3)) border-box;border-radius:16px;padding:20px;transition:all .3s ease;display:block;color:var(--text);position:relative;overflow:hidden}
.api-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(255,255,255,.1),transparent);transform:rotate(45deg);transition:all .6s ease;opacity:0}
.api-card:hover::before{opacity:1;top:-60%;left:-60%}
.api-card:hover{box-shadow:0 8px 30px rgba(192,107,255,.2);transform:translateY(-4px) scale(1.02);color:var(--text);border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#ff6b9d,#c06bff,#6b9dff) border-box}
.corner-badge{position:absolute;top:20px;right:-40px;transform:rotate(45deg);background:linear-gradient(135deg,#ff6b9d,#ff8bb5);color:#fff;padding:4px 50px;font-size:12px;font-weight:600;box-shadow:0 2px 8px rgba(255,107,157,.4);z-index:1;text-align:center;white-space:pre}
.api-card h3{margin:0 0 8px;font-size:17px;font-weight:700;color:#1f2937}
.api-card .ep{font-family:ui-monospace,monospace;color:#c06bff;font-size:13px;font-weight:600;background:rgba(192,107,255,.08);padding:4px 8px;border-radius:6px;display:inline-block}
.api-card .desc{color:var(--muted);font-size:13px;margin:10px 0;min-height:38px;line-height:1.5}
.api-card .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.api-card .badge{transition:all .2s ease}
.api-card:hover .badge{transform:scale(1.05)}
/* panel layout */
.panel{display:flex;min-height:100vh;background:var(--bg)}
.side{width:220px;background:var(--side);color:#cbd5e1;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto}
.side-brand{padding:20px;font-weight:700;font-size:17px;border-bottom:1px solid #334155}
.side-brand a{color:#fff}
.side-nav{display:flex;flex-direction:column;padding:12px 0}
.side-nav a{padding:11px 20px;color:#cbd5e1;border-left:3px solid transparent}
.side-nav a:hover{background:var(--side-a);color:#fff}
.side-nav a.active{background:var(--side-a);color:#fff;border-left-color:var(--primary)}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{background:#fff;padding:16px 28px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-weight:600}
.user-chip{background:#f3f4f6;padding:6px 12px;border-radius:20px;font-weight:500;font-size:13px}
.content{padding:24px 28px;flex:1}
.content .flash{margin-bottom:16px}
/* stat cards */
.stat{background:#fff;padding:20px;border-radius:12px;border:1px solid var(--border)}
.stat .label{color:var(--muted);font-size:13px}
.stat .val{font-size:26px;font-weight:700;margin-top:4px}
/* auth page */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.auth .box{background:#fff;border-radius:14px;padding:36px;max-width:400px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,.2)}
.auth h1{margin:0 0 6px}
.auth .sub{color:var(--muted);margin-bottom:20px}
.auth button{width:100%;padding:11px}
.auth .foot{text-align:center;margin-top:16px;font-size:13px}
pre{background:#1e293b;color:#e2e8f0;padding:14px;border-radius:8px;overflow-x:auto;font-size:12px}
code{font-family:ui-monospace,Menlo,Consolas,monospace}
@media(max-width:768px){
  .panel{flex-direction:column}.side{width:100%;height:auto;position:relative}
  .side-nav{flex-direction:row;overflow-x:auto;padding:0}
  .side-nav a{padding:12px 14px;border-left:0;border-bottom:3px solid transparent;white-space:nowrap}
  .side-nav a.active{border-left:0;border-bottom-color:var(--primary)}
  .row,.row3,.row4{grid-template-columns:1fr}
  .hero-title{font-size:32px}
  .hero-actions{flex-direction:column;gap:12px}
  .hero-btn{width:100%;max-width:300px;justify-content:center}
  .page-title{font-size:28px}
  .anime-search-form{flex-direction:column}
  .search-input-wrapper{width:100%}
  .anime-select{width:100%}
}