.ai-body {
  background:
    radial-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
    #f3f4f6;
  background-size: 14px 14px;
  min-height: 100vh;
}
.ai-page {
  padding: 18px 16px 80px;
  max-width: 480px;
  margin: 0 auto;
}
.ai-hello { margin-bottom: 14px; }
.ai-hi { font-size: 26px; font-weight: 800; color: #2b2b2b; }
.ai-tagline { margin-top: 4px; color: #7a7a7a; font-size: 13px; }

.ai-vip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fff8d6;
  border-radius: 16px;
  padding: 14px 14px;
  margin-bottom: 14px;
  box-shadow: 0 6px 0 rgba(0,0,0,.06);
}
.ai-vip-title { font-weight: 800; color: #5c4a1f; }
.ai-vip-sub { font-size: 12px; color: #8a7a4a; margin-top: 2px; }
.ai-vip-btn {
  border: 0;
  background: #4a3728;
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  white-space: nowrap;
}

.ai-mode-card {
  display: block;
  background: #fff;
  border: 2px solid #1f1f1f;
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: 4px 4px 0 #1f1f1f;
  color: inherit;
  text-decoration: none;
  position: relative;
}
.ai-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 8px;
  margin-bottom: 8px;
}
.ai-badge.blue { background: #dcebff; color: #2b6cb0; }
.ai-badge.purple { background: #f0e4ff; color: #6b46c1; }
.ai-mode-row { display: flex; gap: 10px; align-items: center; }
.ai-mode-title { font-size: 22px; font-weight: 900; }
.ai-mode-desc { margin-top: 6px; font-size: 13px; color: #555; line-height: 1.4; }
.ai-mode-icon {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; font-size: 24px; flex-shrink: 0;
}
.ai-mode-icon.blue { background: #3b82f6; color: #fff; }
.ai-mode-icon.purple { background: #a78bfa; color: #fff; }
.ai-go { text-align: right; margin-top: 8px; font-weight: 800; }

.ai-recent-head {
  display: flex; justify-content: space-between; align-items: center;
  margin: 8px 0 10px; font-weight: 800; color: #555;
}
.ai-recent-head a { color: #888; font-size: 12px; font-weight: 500; }
.ai-recent {
  min-height: 72px;
  border: 2px dashed #c9c9c9;
  border-radius: 14px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: rgba(255,255,255,.5);
}
.ai-recent-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #999;
  font-size: 12px;
  padding: 18px 0;
}
.ai-thumb img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block;
}

.ai-subpage { padding: 12px 16px 40px; max-width: 480px; margin: 0 auto; }
.ai-nav {
  display: grid; grid-template-columns: 40px 1fr 40px;
  align-items: center; margin-bottom: 14px;
}
.ai-back {
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; border: 2px solid #222;
  display: grid; place-items: center; text-decoration: none; color: #222; font-weight: 700;
}
.ai-nav-title { text-align: center; font-size: 18px; font-weight: 900; }

.ai-form-card, .ai-diary-card {
  background: #fff;
  border: 2px solid #222;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 4px 4px 0 #222;
}
.ai-step { font-weight: 800; margin-bottom: 8px; }
.ai-input-wrap {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid #ddd; border-radius: 12px; padding: 10px 12px;
}
.ai-input-wrap input {
  flex: 1; border: 0; outline: none; font-size: 15px; background: transparent;
}
.ai-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ai-tag {
  border: 0; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.ai-tag.c0 { background: #fff3bf; }
.ai-tag.c1 { background: #d3f9d8; }
.ai-tag.c2 { background: #ffdeeb; }

.ai-grades {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.ai-grade {
  border: 1.5px dashed #bbb; background: #fff; border-radius: 12px;
  padding: 12px 0; font-size: 13px; color: #666; cursor: pointer;
}
.ai-grade.on {
  border: 2px solid #3b82f6; color: #3b82f6; font-weight: 800; border-style: solid;
}

.ai-diary-title { font-weight: 800; margin-bottom: 8px; color: #6b46c1; }
.ai-diary-card textarea {
  width: 100%; min-height: 180px; border: 0; outline: none; resize: vertical;
  font-size: 14px; line-height: 1.8;
  background: repeating-linear-gradient(#fff, #fff 27px, #eee 28px);
}
.ai-count { text-align: right; color: #999; font-size: 12px; }

.ai-cost {
  margin: 14px 0;
  background: #fff4e0;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  color: #8a5a00;
}
.ai-action {
  width: 100%;
  border: 2px solid #222;
  border-radius: 16px;
  padding: 14px;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 4px 4px 0 #222;
  cursor: pointer;
}
.ai-action.yellow { background: #ffe066; color: #222; }
.ai-action.pink { background: #ff8fab; color: #222; }
.ai-action:disabled { opacity: .6; cursor: wait; }

.ai-result {
  margin-top: 16px;
  background: #fff;
  border: 2px solid #222;
  border-radius: 16px;
  padding: 12px;
  text-align: center;
}
.ai-result img { width: 100%; border-radius: 12px; display: block; }
.ai-result a { display: inline-block; margin-top: 10px; color: #3b82f6; font-size: 13px; }

.ai-works-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.ai-work-item {
  background: #fff; border: 2px solid #222; border-radius: 14px; overflow: hidden;
  box-shadow: 3px 3px 0 #222; color: inherit; text-decoration: none;
}
.ai-work-item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.ai-work-meta { padding: 8px; font-size: 12px; color: #555; }
.creating-mask[hidden]{display:none!important}.creating-mask{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;background:rgba(83,54,65,.45);backdrop-filter:blur(8px)}.creating-card{width:min(360px,100%);padding:30px 24px;text-align:center;border:2px solid #ffd8a8;border-radius:28px;background:linear-gradient(160deg,#fffdf7,#fff1f5);box-shadow:0 28px 80px rgba(89,47,61,.28)}.creating-card h2{margin:14px 0 6px;color:#724858}.creating-card p{min-height:24px;color:#9a6878}.creating-card small{display:block;margin-top:14px;color:#b18b96}.creating-orbit{width:88px;height:88px;margin:auto;display:grid;place-items:center;border-radius:50%;background:#fff;border:3px dashed #f3aa5d;animation:creating-bob 1.8s ease-in-out infinite}.creating-orbit span{font-size:42px}.creating-track{height:9px;margin-top:18px;overflow:hidden;border-radius:999px;background:#f4dce3}.creating-track i{display:block;width:12%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f7aa52,#ef88a5);transition:width .7s ease}@keyframes creating-bob{50%{transform:translateY(-8px) rotate(-3deg)}}