@font-face{font-family:'TiaoTiao';src:url('/assets/fonts/HYTiaoTiaoTi.ttf') format('truetype');font-display:swap}
html,body,input,button,textarea,select,*{font-family:'TiaoTiao',ui-rounded,'Comic Sans MS','Xiaolai SC','PingFang SC','Microsoft YaHei',system-ui,-apple-system,BlinkMacSystemFont,sans-serif!important}
:root{--bg:#fff7d6;--ink:#24180f;--muted:#806b55;--pink:#ff8fb5;--pink2:#ffd3e2;--green:#8bdc9b;--blue:#83c7ff;--yellow:#ffd75e;--card:#fffdf2;--shadow:#24180f;--radius:28px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:ui-rounded,"Comic Sans MS","Xiaolai SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--ink);min-height:100vh;background:radial-gradient(circle at 12% 15%,rgba(255,143,181,.35) 0 90px,transparent 92px),radial-gradient(circle at 85% 10%,rgba(131,199,255,.32) 0 115px,transparent 118px),radial-gradient(circle at 78% 82%,rgba(139,220,155,.35) 0 150px,transparent 152px),linear-gradient(135deg,#fff7d6,#fff1f7 55%,#effcff);overflow-x:hidden}.doodles{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.95}.doodle{position:absolute;font-weight:900;color:rgba(36,24,15,.25);transform:rotate(var(--r));font-size:clamp(20px,3vw,42px)}.d1{top:9%;left:6%;--r:-14deg}.d2{top:20%;right:8%;--r:13deg}.d3{bottom:16%;left:7%;--r:19deg}.d4{bottom:8%;right:11%;--r:-9deg}.d5{top:54%;left:2%;--r:8deg}.d6{top:50%;right:3%;--r:-15deg}.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:22px clamp(16px,3vw,34px) 52px}header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:34px}.brand{display:flex;align-items:center;gap:12px;font-weight:1000;letter-spacing:.2px;color:var(--ink);text-decoration:none}.logo{width:48px;height:48px;border:3px solid var(--ink);border-radius:18px;background:var(--yellow);box-shadow:5px 5px 0 var(--shadow);display:grid;place-items:center;transform:rotate(-5deg)}.logo svg{width:35px;height:35px}.nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.nav a,.pill{color:var(--ink);text-decoration:none;background:rgba(255,255,255,.55);border:2px solid var(--ink);border-radius:999px;padding:9px 14px;font-weight:800;box-shadow:3px 3px 0 var(--shadow)}.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:34px;align-items:center;min-height:calc(100vh - 140px)}.copy{padding:10px 0}.badge{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--ink);border-radius:999px;background:var(--green);padding:8px 14px;font-weight:950;box-shadow:4px 4px 0 var(--shadow);transform:rotate(-2deg);margin-bottom:18px}h1{font-size:clamp(42px,7vw,92px);line-height:.95;margin:0 0 18px;letter-spacing:-3px;text-wrap:balance}h1 .small{font-size:.52em;background:var(--pink2);border:3px solid var(--ink);border-radius:22px;padding:.02em .16em;box-shadow:5px 5px 0 var(--shadow);display:inline-block;transform:rotate(2deg);white-space:nowrap}.sub{font-size:clamp(17px,2.2vw,23px);line-height:1.65;color:#4b3827;max-width:690px;margin:0 0 24px;font-weight:700}.panel,.card{background:rgba(255,253,242,.9);backdrop-filter:blur(10px);border:4px solid var(--ink);border-radius:var(--radius);box-shadow:9px 9px 0 var(--shadow);padding:18px;position:relative;overflow:hidden}.panel:before,.card:before{content:"";position:absolute;right:-28px;top:-28px;width:120px;height:120px;border:4px dashed rgba(36,24,15,.25);border-radius:999px;transform:rotate(20deg)}.search{display:flex;gap:10px;align-items:center;position:relative;z-index:1}.inputBox{flex:1;display:flex;align-items:center;min-width:0;background:white;border:3px solid var(--ink);border-radius:22px;padding:4px 6px 4px 16px;box-shadow:4px 4px 0 rgba(36,24,15,.25)}input,select,textarea{width:100%;border:3px solid var(--ink);outline:0;font:inherit;font-size:18px;font-weight:850;background:white;color:var(--ink);min-width:80px;padding:13px;border-radius:18px;box-shadow:3px 3px 0 rgba(36,24,15,.22)}.inputBox input{border:0;box-shadow:none;background:transparent;padding:13px 0}.suffix{font-weight:950;color:#8b6d50;background:#fff1bd;border:2px solid var(--ink);border-radius:16px;padding:10px 12px;white-space:nowrap}button,.btn{display:inline-block;text-decoration:none;border:3px solid var(--ink);background:var(--pink);border-radius:20px;padding:13px 18px;font:inherit;font-weight:1000;color:var(--ink);cursor:pointer;box-shadow:5px 5px 0 var(--shadow);transition:.16s transform,.16s box-shadow;white-space:nowrap}button:hover,.btn:hover{transform:translate(-2px,-2px) rotate(-1deg);box-shadow:7px 7px 0 var(--shadow)}.btn.alt,button.alt{background:var(--yellow)}.btn.green,button.green{background:var(--green)}.chips{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap;margin-top:15px}.chip{border:2px solid var(--ink);background:#fff;border-radius:999px;padding:9px 12px;font-weight:950;cursor:pointer;box-shadow:3px 3px 0 rgba(36,24,15,.3);transition:.15s transform}.chip:nth-child(2){background:#dff5ff}.chip:nth-child(3){background:#fff0a4}.chip:nth-child(4){background:#e5ffd9}.chip:hover{transform:rotate(-3deg) scale(1.04)}.result,.notice{margin-top:16px;border:3px dashed var(--ink);border-radius:22px;background:#f6fff7;padding:14px 15px;font-weight:950;display:flex;align-items:center;gap:10px;word-break:break-all;min-height:58px}.notice.err{background:#ffe6ee}.mascot-card{position:relative;display:grid;place-items:center;min-height:520px;background:rgba(255,255,255,.45);border:4px solid var(--ink);border-radius:38px;box-shadow:10px 10px 0 var(--shadow);overflow:hidden;transform:rotate(1deg)}.mascot-card:after{content:"caonimabi.de";position:absolute;bottom:20px;right:22px;font-weight:1000;font-size:22px;opacity:.22;transform:rotate(-5deg)}.bubble{position:absolute;border:3px solid var(--ink);background:white;border-radius:22px;padding:10px 14px;font-weight:1000;box-shadow:4px 4px 0 var(--shadow);animation:float 3.5s ease-in-out infinite}.b1{top:34px;left:24px;transform:rotate(-7deg)}.b2{right:20px;top:96px;background:#e8f8ff;transform:rotate(8deg);animation-delay:.4s}.b3{left:42px;bottom:70px;background:#ffe1ee;transform:rotate(5deg);animation-delay:.8s}@keyframes float{50%{translate:0 -9px}}.llama{width:min(420px,86%);filter:drop-shadow(8px 10px 0 rgba(36,24,15,.22));animation:wiggle 4.2s ease-in-out infinite;position:relative;z-index:2}@keyframes wiggle{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(-4px)}}.features,.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:42px}.feature,.mini{background:var(--card);border:3px solid var(--ink);border-radius:24px;padding:18px;box-shadow:6px 6px 0 var(--shadow);font-weight:800;min-height:146px}.feature h3,.mini h3{margin:0 0 8px;font-size:21px}.feature p,.mini p{margin:0;color:var(--muted);line-height:1.55}.feature .ico{font-size:30px;margin-bottom:8px}footer{text-align:center;margin-top:42px;color:#6f5a46;font-weight:800}.form{display:grid;gap:14px;position:relative;z-index:1}.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.table{width:100%;border-collapse:separate;border-spacing:0 10px}.table th{text-align:left;color:#6f5a46}.table td,.table th{padding:10px}.table tr td{background:#fff;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}.table tr td:first-child{border-left:2px solid var(--ink);border-radius:14px 0 0 14px}.table tr td:last-child{border-right:2px solid var(--ink);border-radius:0 14px 14px 0}.page-title{font-size:clamp(34px,5vw,62px);margin:20px 0}.admin-layout{display:grid;grid-template-columns:230px 1fr;gap:18px}.side{align-self:start}.side a{display:block;margin:8px 0}.muted{color:var(--muted)}@media (max-width:920px){header{align-items:flex-start}.hero{grid-template-columns:1fr;gap:22px}.mascot-card{min-height:420px;order:-1}.features,.grid{grid-template-columns:1fr 1fr}h1{letter-spacing:-2px}.nav a{padding:8px 12px}.admin-layout{grid-template-columns:1fr}.row{grid-template-columns:1fr}}@media (max-width:620px){.wrap{padding:16px 14px 36px}header{gap:14px;margin-bottom:18px}.brand span{font-size:15px}.logo{width:43px;height:43px}.nav{display:none}.hero{min-height:auto}.badge{font-size:14px;padding:7px 11px}.sub{font-size:16px}.panel,.card{border-width:3px;border-radius:24px;padding:14px;box-shadow:6px 6px 0 var(--shadow)}.search{flex-direction:column;align-items:stretch}.inputBox{width:100%;border-radius:20px}.suffix{padding:8px 9px;font-size:14px}input,select,textarea{font-size:16px}.inputBox input{font-size:18px}button,.btn{width:100%;text-align:center;padding:14px}.chips{gap:8px}.chip{font-size:14px;padding:8px 10px}.mascot-card{min-height:360px;border-radius:28px;box-shadow:7px 7px 0 var(--shadow);transform:none}.bubble{font-size:13px;padding:7px 10px}.b1{top:20px;left:14px}.b2{right:12px;top:72px}.b3{left:16px;bottom:40px}.features,.grid{grid-template-columns:1fr;margin-top:28px}.doodle{display:none}h1 .small{border-radius:16px}.table{font-size:13px}}

/* 首页统计卡片 */
.stats-feature{background:linear-gradient(135deg,#fffdf2,#fff1bd 55%,#e8f8ff)}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px;position:relative;z-index:1}
.stat{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:12px 10px;text-align:center;box-shadow:3px 3px 0 rgba(36,24,15,.3)}
.stat strong{display:block;font-size:clamp(24px,3vw,34px);line-height:1;font-weight:1000;color:var(--ink)}
.stat span{display:block;margin-top:7px;font-size:13px;font-weight:950;color:var(--muted);white-space:nowrap}
@media (max-width:620px){.stats-row{grid-template-columns:1fr 1fr}.stat:last-child{grid-column:1/-1}}

/* 功能中心：手绘涂鸦按钮（强制覆盖版） */
.function-center{
  background:linear-gradient(135deg,#fffdf2,#ffe1ee 58%,#e8f8ff) !important;
}
.function-center .tool-links{
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:14px !important;
  margin-top:14px !important;
}
.function-center .handdrawn-link,
.function-center .doodle-tool-button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:150px !important;
  padding:14px 22px !important;
  color:var(--ink) !important;
  text-decoration:none !important;
  font-weight:1000 !important;
  font-size:18px !important;
  background:#fff0a4 !important;
  border:4px solid var(--ink) !important;
  border-radius:22px 18px 24px 16px !important;
  box-shadow:6px 6px 0 var(--shadow) !important;
  transform:rotate(-2deg) !important;
  position:relative !important;
  overflow:visible !important;
}
.function-center .handdrawn-link::before,
.function-center .doodle-tool-button::before{
  content:"" !important;
  position:absolute !important;
  inset:-9px !important;
  border:3px dashed var(--ink) !important;
  border-radius:26px 20px 28px 18px !important;
  opacity:.75 !important;
  transform:rotate(4deg) !important;
  pointer-events:none !important;
}
.function-center .handdrawn-link::after,
.function-center .doodle-tool-button::after{
  content:"✎" !important;
  position:absolute !important;
  right:-13px !important;
  top:-17px !important;
  width:28px !important;
  height:28px !important;
  display:grid !important;
  place-items:center !important;
  background:#ff8fb5 !important;
  border:3px solid var(--ink) !important;
  border-radius:999px !important;
  box-shadow:3px 3px 0 var(--shadow) !important;
  font-size:15px !important;
}
.function-center .handdrawn-link:hover,
.function-center .doodle-tool-button:hover{
  transform:translate(-2px,-2px) rotate(1deg) !important;
  box-shadow:8px 8px 0 var(--shadow) !important;
}
@media (max-width:620px){
  .function-center .handdrawn-link,
  .function-center .doodle-tool-button{width:100% !important; min-width:0 !important;}
}


/* 图床页面 */
.image-preview{background:#fff;border:3px dashed var(--ink);border-radius:22px;padding:12px;margin:12px 0;box-shadow:4px 4px 0 rgba(36,24,15,.22)}
.image-preview img{display:block;max-width:100%;max-height:360px;margin:0 auto;border-radius:16px;border:2px solid var(--ink);background:#fff}
textarea[readonly]{min-height:74px;resize:vertical;font-size:15px;line-height:1.45;word-break:break-all}
.image-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative;z-index:1}
.image-item{background:#fff;border:3px solid var(--ink);border-radius:20px;padding:10px;box-shadow:4px 4px 0 rgba(36,24,15,.28)}
.image-item img{width:100%;aspect-ratio:1/1;object-fit:cover;border:2px solid var(--ink);border-radius:14px;display:block;background:#fff7d6}
.image-item textarea{margin-top:8px;min-height:58px;font-size:12px;padding:9px;border-radius:14px}
.function-center .tool-links .doodle-tool-button:nth-child(2){background:#dff5ff !important;transform:rotate(2deg) !important}
.function-center .tool-links .doodle-tool-button:nth-child(2)::after{content:"☁" !important;background:#8bdc9b !important}
@media (max-width:920px){.image-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.image-grid{grid-template-columns:1fr 1fr}.image-preview img{max-height:260px}}

/* 图床增强：多图上传、复制按钮、小缩略图、删除按钮 */
.image-host-grid{align-items:start}
.upload-results{display:grid;gap:18px;max-height:720px;overflow:auto;padding-right:4px;position:relative;z-index:2}
.upload-result-item{background:#fff;border:3px solid var(--ink);border-radius:22px;padding:12px;box-shadow:4px 4px 0 rgba(36,24,15,.24)}
.image-preview.small{padding:8px;margin:0 0 10px;border-width:2px;border-radius:18px;box-shadow:3px 3px 0 rgba(36,24,15,.2)}
.image-preview.small img{max-height:160px;border-radius:12px;border-width:2px}
.copy-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch;margin:6px 0 12px;position:relative;z-index:2}
.copy-row textarea{min-height:54px;margin:0;font-size:13px;padding:9px;border-radius:14px}
.copy-row .copy-btn{width:auto;min-width:74px;padding:8px 12px;border-radius:14px;font-size:14px;background:var(--green)}
.image-grid.compact{grid-template-columns:repeat(6,1fr);gap:12px}
.image-item.compact{padding:8px;border-radius:16px;box-shadow:3px 3px 0 rgba(36,24,15,.24)}
.image-item.compact img{aspect-ratio:1/1;border-radius:11px;border-width:2px}
.image-actions{display:grid;grid-template-columns:1fr;gap:6px;margin-top:7px}
.image-actions form{margin:0}
.mini-copy{width:100%;font-size:12px;padding:7px 8px;border-width:2px;border-radius:12px;box-shadow:2px 2px 0 var(--shadow)}
button.danger{background:#ffb4c8}
@media (max-width:1100px){.image-grid.compact{grid-template-columns:repeat(5,1fr)}}
@media (max-width:920px){.image-host-grid{grid-template-columns:1fr !important}.image-grid.compact{grid-template-columns:repeat(4,1fr)}}
@media (max-width:620px){.image-grid.compact{grid-template-columns:repeat(3,1fr)}.copy-row{grid-template-columns:1fr}.copy-row .copy-btn{width:100%}.image-preview.small img{max-height:130px}.mini-copy{font-size:11px;padding:6px}}

/* admin image manager */
.admin-image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:14px}
.admin-image-card{border:3px solid #24180f;border-radius:20px;background:#fffdf2;padding:10px;box-shadow:4px 4px 0 #24180f;transform:rotate(-.4deg)}
.admin-image-card:nth-child(even){transform:rotate(.5deg)}
.admin-image-card img{width:100%;height:92px;object-fit:cover;border-radius:14px;border:2px dashed #24180f;background:#fff}
.admin-image-meta{display:flex;flex-direction:column;gap:4px;margin:8px 0;font-size:12px;word-break:break-all}
.admin-image-card .danger{width:100%;padding:8px 10px;font-size:13px}
@media(max-width:640px){.admin-image-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.admin-image-card img{height:76px}}


/* 上传进度条 */
.upload-progress-wrap{
  margin-top:12px;
  border:3px dashed #24180f;
  border-radius:20px;
  background:#fff8cf;
  padding:12px;
  box-shadow:4px 4px 0 rgba(36,24,15,.22);
  transform:rotate(-.25deg);
}
.upload-progress-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:14px;
  margin-bottom:8px;
}
.upload-progress-top strong{
  background:#fff;
  border:2px solid #24180f;
  border-radius:999px;
  padding:3px 10px;
  box-shadow:2px 2px 0 rgba(36,24,15,.18);
}
.upload-progress{
  height:18px;
  border:3px solid #24180f;
  border-radius:999px;
  background:#fff;
  overflow:hidden;
  box-shadow:inset 2px 2px 0 rgba(36,24,15,.08);
}
.upload-progress-bar{
  width:0%;
  height:100%;
  background:repeating-linear-gradient(45deg,#8ee68e 0 12px,#c5ff9a 12px 24px);
  transition:width .18s ease;
}
.upload-file-name{
  margin-top:8px;
  font-size:12px;
  color:#6b543d;
  word-break:break-all;
}
#uploadBtn:disabled{
  opacity:.75;
  cursor:not-allowed;
  transform:none;
}
.notice:empty{display:none}

/* 图床手机端优化：单栏、留白、缩小预览和代码框 */
@media (max-width: 700px){
  .image-host-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    margin-top:0 !important;
  }
  .image-host-grid .card,
  #codeCard,
  .card:has(.image-grid.compact){
    padding:14px !important;
    border-radius:22px !important;
    box-shadow:5px 5px 0 var(--shadow) !important;
  }
  .image-host-grid h2,
  .card h2{
    font-size:22px !important;
    margin:0 0 8px !important;
  }
  .image-host-grid .muted{
    font-size:13px !important;
    line-height:1.45 !important;
  }
  .form{
    gap:10px !important;
  }
  input[type="file"]{
    width:100% !important;
    max-width:100% !important;
    font-size:14px !important;
    padding:12px !important;
    box-sizing:border-box !important;
  }
  .upload-progress-wrap{
    padding:10px !important;
    border-radius:18px !important;
    margin-top:8px !important;
  }
  .upload-progress-top{
    font-size:12px !important;
    gap:8px !important;
  }
  .upload-progress{
    height:14px !important;
    border-width:2px !important;
  }
  .upload-results{
    max-height:none !important;
    overflow:visible !important;
    gap:12px !important;
    padding-right:0 !important;
  }
  .upload-result-item{
    padding:10px !important;
    border-radius:18px !important;
    box-shadow:3px 3px 0 rgba(36,24,15,.22) !important;
  }
  .upload-result-item label{
    display:block !important;
    font-size:13px !important;
    margin:8px 0 4px !important;
  }
  .image-preview.small{
    width:96px !important;
    padding:5px !important;
    margin:0 0 8px !important;
    border-radius:14px !important;
  }
  .image-preview.small img{
    width:100% !important;
    height:72px !important;
    max-height:72px !important;
    object-fit:cover !important;
    border-radius:10px !important;
  }
  .copy-row{
    grid-template-columns:1fr auto !important;
    gap:6px !important;
    margin:4px 0 8px !important;
  }
  .copy-row textarea{
    min-height:40px !important;
    max-height:72px !important;
    font-size:12px !important;
    line-height:1.35 !important;
    padding:8px !important;
    border-radius:12px !important;
  }
  .copy-row .copy-btn{
    width:auto !important;
    min-width:58px !important;
    padding:7px 9px !important;
    font-size:12px !important;
    border-radius:12px !important;
  }
  .image-grid.compact{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .image-item.compact{
    padding:7px !important;
    border-radius:15px !important;
  }
  .image-item.compact img{
    aspect-ratio:1/1 !important;
    border-radius:10px !important;
  }
  .image-actions{
    gap:5px !important;
    margin-top:6px !important;
  }
  .mini-copy,
  .image-actions .danger{
    font-size:11px !important;
    padding:6px 6px !important;
    border-radius:10px !important;
    box-shadow:2px 2px 0 var(--shadow) !important;
  }
}

@media (max-width: 380px){
  .image-grid.compact{grid-template-columns:1fr 1fr !important;gap:8px !important;}
  .copy-row{grid-template-columns:1fr !important;}
  .copy-row .copy-btn{width:100% !important;}
  .image-preview.small{width:84px !important;}
  .image-preview.small img{height:62px !important;}
}