/* ===== Design Tokens ===== */
:root{
  --bg: #FBFBFB;
  --surface: #FFFFFF;
  --surface-alt: #F2F3F4;
  --border: #E4E7EA;
  --ink: #111315;
  --ink-muted: #70757A;
  --ink-faint: #A6ACB1;
  --accent: #DDE1E4;
  --accent-dark: #3F454A;
  --accent-soft: #F2F4F5;
  --accent-text: #151719;
  --like: #C76672;
  --like-soft: #F5E7EA;
  --danger: #B65A47;
  --danger-soft: #F3E5E0;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 14px;
  --shadow-card: 0 1px 2px rgba(25,27,29,0.05), 0 1px 1px rgba(25,27,29,0.04);
  --shadow-modal: 0 20px 50px rgba(25,27,29,0.16);
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
}

html[data-theme="light"]{
  --bg: #FBFBFB;
  --surface: #FFFFFF;
  --surface-alt: #F2F3F4;
  --border: #E4E7EA;
  --ink: #111315;
  --ink-muted: #70757A;
  --ink-faint: #A6ACB1;
  --accent: #DDE1E4;
  --accent-dark: #3F454A;
  --accent-soft: #F2F4F5;
  --accent-text: #151719;
  --like: #C76672;
  --like-soft: #F5E7EA;
  --danger: #B65A47;
  --danger-soft: #F3E5E0;
  --shadow-card: 0 1px 2px rgba(25,27,29,0.05), 0 1px 1px rgba(25,27,29,0.04);
  --shadow-modal: 0 20px 50px rgba(25,27,29,0.16);
}

html[data-theme="green"]{
  --bg: #F5F7F1;
  --surface: #FFFFFF;
  --surface-alt: #EDF2E8;
  --border: #DCE5D5;
  --ink: #2A3128;
  --ink-muted: #747E6E;
  --ink-faint: #A3ADA0;
  --accent: #7B946F;
  --accent-dark: #5E7654;
  --accent-soft: #E7EFE1;
  --accent-text: #FFFFFF;
  --like: #C77982;
  --like-soft: #F6E8EA;
  --danger: #B76B50;
  --danger-soft: #F3E6DF;
  --shadow-card: 0 1px 2px rgba(42,49,40,0.05), 0 1px 1px rgba(42,49,40,0.04);
  --shadow-modal: 0 20px 50px rgba(42,49,40,0.16);
}

html[data-theme="dark"]{
  --bg: #070809;
  --surface: #111214;
  --surface-alt: #191B1E;
  --border: #2A2E33;
  --ink: #F3F5F6;
  --ink-muted: #AFB4B9;
  --ink-faint: #757B81;
  --accent: #2C3136;
  --accent-dark: #E7EBEE;
  --accent-soft: #1B1F23;
  --accent-text: #F8F9FA;
  --like: #D37C88;
  --like-soft: #3A252B;
  --danger: #D06F5E;
  --danger-soft: #3A2622;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.42), 0 1px 1px rgba(0,0,0,0.32);
  --shadow-modal: 0 20px 50px rgba(0,0,0,0.68);
}

html[data-theme="pink"]{
  --bg: #FCF8F8;
  --surface: #FFFFFF;
  --surface-alt: #F5EFF0;
  --border: #E8DDE0;
  --ink: #30282A;
  --ink-muted: #827477;
  --ink-faint: #AEA1A3;
  --accent: #B97883;
  --accent-dark: #925D68;
  --accent-soft: #F5E7E9;
  --accent-text: #FFFFFF;
  --like: #C86D75;
  --like-soft: #F7E6E8;
  --danger: #B96550;
  --danger-soft: #F5E9E5;
  --shadow-card: 0 1px 2px rgba(48,40,42,0.05), 0 1px 1px rgba(48,40,42,0.04);
  --shadow-modal: 0 20px 50px rgba(48,40,42,0.16);
}

html[data-theme="blue"]{
  --bg: #F7F9FB;
  --surface: #FFFFFF;
  --surface-alt: #EEF2F5;
  --border: #DDE4E9;
  --ink: #273038;
  --ink-muted: #74808A;
  --ink-faint: #A1ABB2;
  --accent: #6F93AE;
  --accent-dark: #527891;
  --accent-soft: #E4EDF3;
  --accent-text: #FFFFFF;
  --like: #C77A86;
  --like-soft: #F6E9EC;
  --danger: #B86952;
  --danger-soft: #F4E9E5;
  --shadow-card: 0 1px 2px rgba(39,48,56,0.05), 0 1px 1px rgba(39,48,56,0.04);
  --shadow-modal: 0 20px 50px rgba(39,48,56,0.16);
}
html[data-theme="purple"]{
  --bg: #F9F7FA;
  --surface: #FFFFFF;
  --surface-alt: #F2EEF4;
  --border: #E4DDE7;
  --ink: #302C33;
  --ink-muted: #7D7482;
  --ink-faint: #AAA1AF;
  --accent: #95839F;
  --accent-dark: #74637E;
  --accent-soft: #EDE6F0;
  --accent-text: #FFFFFF;
  --like: #BE7D91;
  --like-soft: #F5E8ED;
  --danger: #B86C5A;
  --danger-soft: #F4E8E4;
  --shadow-card: 0 1px 2px rgba(48,44,51,0.05), 0 1px 1px rgba(48,44,51,0.04);
  --shadow-modal: 0 20px 50px rgba(48,44,51,0.16);
}

html{ transition: background-color .2s ease; }
body{ transition: background-color .2s ease, color .2s ease; }

*{ box-sizing: border-box; }
[hidden]{
  display:none !important;
}

html,
body {
  width: 100%;
  height: 100%;
}

html {
  background: var(--surface);
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  height: 100vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

@supports (height: 100lvh) {
  body {
    height: 100lvh;
  }
}

h1,h2,h3,h4{ margin:0; font-weight:600; }
p{ margin:0; }
button{ font-family: inherit; cursor:pointer; }
input,textarea,select{ font-family: inherit; }

/* ===== Topbar ===== */
.topbar{
  flex-shrink:0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top);
}
.topbar-inner{
  max-width: 960px;
  margin: 0 auto;
  padding: 12px max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left));
  display:flex;
  align-items:center;
  gap:20px;
  min-height:57px;
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  min-height:38px;
}
.brand{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

.brand-mark{
  color: var(--accent);
  font-size:18px;
}

.brand-name{
  color: var(--accent-dark);
  font-size:17px;
  font-weight:700;
  letter-spacing:0.5px;
}

.search-input{
  border:1px solid var(--border); background: var(--surface);
  border-radius: 999px; padding:7px 14px; font-size:13px; width:180px;
  color: var(--ink); outline:none;
}
.search-input:focus{ border-color: var(--accent); }

#openNewPostBtn {
  order: 2;
}

#searchInput {
  order: 1;
}

#openSettingsBtn {
  order: 3;
}

.topbar-actions > [hidden] {
  display: none;
}

.icon-btn{
  border:1px solid var(--border); background: var(--surface);
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color: var(--ink-muted);
}
.icon-btn:hover{ color: var(--ink); border-color: var(--ink-faint); }
#openSettingsBtn{
  color: var(--accent-dark);
  border-color: var(--accent-soft);
  background: var(--accent-soft);
}

#openSettingsBtn:hover{
  color: var(--accent-text);
  border-color: var(--accent);
  background: var(--accent);
}

.icon-svg{
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-svg svg{
  width: 100%;
  height: 100%;
  display: block;
}

.avatar-placeholder-icon{
  display:flex;
  align-items:center;
  justify-content:center;
}

.avatar-placeholder-icon svg{
  width:100%;
  height:100%;
  display:block;
}

.btn{
  border:none; border-radius: 999px; padding:8px 16px; font-size:13px; font-weight:600;
  transition: opacity .15s, background .15s;
}
.btn-primary{
  background: var(--accent);
  color: var(--accent-text);
}

.btn-primary:hover{
  background: var(--accent);
  color: var(--accent-text);
  filter: brightness(0.92);
}

.btn-outline{ background: var(--surface); border:1px solid var(--border); color: var(--ink); }
.btn-outline:hover{ border-color: var(--accent); color: var(--accent-dark); }
.btn-ghost{ background: transparent; color: var(--ink-muted); }
.btn-ghost:hover{ color: var(--ink); }
.btn-danger{ background: var(--danger-soft); color: var(--danger); }
.btn-danger:hover{ background: var(--danger); color:#fff; }

/* ===== Main layout ===== */
.app-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;

  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 20px;
  background: var(--bg);
}
.view{ display:none; }
.view.is-active{ display:block; }

/* ===== Feed / Post cards ===== */
.feed{ display:flex; flex-direction:column; gap:14px; }
.feed--compact{ gap:10px; }

.feed-load-more{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:20px 0 4px;
  color:var(--ink-faint);
}

.feed-load-more[hidden]{
  display:none;
}

.feed-load-more::before,
.feed-load-more::after{
  content:"";
  height:1px;
  background:var(--border);
  flex:1;
}

.feed-load-more-btn{
  appearance:none;
  border:0;
  background:transparent;
  box-shadow:none;
  padding:0;
  min-width:0;
  height:auto;
  font-size:12px;
  font-weight:600;
  line-height:1;
  color:var(--ink-faint);
}

.feed-load-more-btn:hover,
.feed-load-more-btn:focus-visible{
  background:transparent;
  box-shadow:none;
}

/* 將卡片改為 Grid 佈局，讓縮圖靠右，並固定最小高度 */
.post-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color .15s, transform .1s;
  
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "author images"
    "title  images"
    "foot   images";
  column-gap: 16px;
  min-height: 110px;
}

.post-card-author-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  grid-area: author;
}

.post-card-avatar{
  width:22px; height:22px; border-radius:50%; flex-shrink:0; overflow:hidden;
  background: var(--accent-soft); color: var(--accent-dark);
  display:flex; align-items:center; justify-content:center; font-size:12px;
}
.post-card-avatar img{ width:100%; height:100%; object-fit:cover; }

.post-card-avatar .avatar-placeholder-icon{
  width:14px;
  height:14px;
}

.post-card-username{ font-size:12.5px; font-weight:600; color: var(--ink); }
.post-card-time { 
  display: none; 
}

.post-card-title {
  font-size: 15.5px; font-weight: 700; line-height: 1.4;
  grid-area: title;
  align-self: start;
}

.post-card-text {
  display: none;
}

.post-card-cover{
  position: relative; width:76px; height:76px; flex-shrink:0;
  grid-area: images; border-radius: var(--radius-s); overflow:hidden;
  background: var(--surface-alt);
}
.post-card-cover--empty{ width:0; height:0; }
.post-card-cover img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.cover-count-badge{
  position:absolute; right:4px; bottom:4px;
  background: rgba(12,13,14,0.72); color:#fff;
  font-size:10.5px; font-weight:600; line-height:1;
  padding:3px 6px; border-radius:999px;
  display:flex; align-items:center; gap:3px;
}

.post-card-foot {
  display: flex; align-items: center; gap: 16px;
  grid-area: foot;
  margin-top: auto;
}
.stat-pill{ font-size:12.5px; color: var(--ink-muted); display:flex; align-items:center; gap:4px; }
.inline-svg-icon{
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: currentColor;
}

.inline-svg-icon svg{
  width: 100%;
  height: 100%;
  display: block;
}

.action-btn .inline-svg-icon{
  width: 13px;
  height: 13px;
}

.lightbox-download .inline-svg-icon{
  width: 16px;
  height: 16px;
}
.stat-pill.is-active{ color: var(--like); font-weight:600; }
.stat-pill.is-active.is-fav{
  color: var(--accent-dark);
}

.empty-hint{ text-align:center; color: var(--ink-faint); font-size:13.5px; padding: 60px 20px; }

/* ===== Me view ===== */
.profile-card{
  display:grid;
  grid-template-columns:60px 1fr auto;
  grid-template-areas:
    "avatar info edit"
    "signature signature signature"
    "intro intro intro";
  align-items:center;
  column-gap:14px;
  row-gap:0;
  min-height:190px;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  padding:20px 22px;
  margin-bottom:18px;
  box-shadow:var(--shadow-card);
}

.profile-avatar{
  grid-area:avatar;
  width:60px;
  height:60px;
  border-radius:50%;
  flex-shrink:0;
  overflow:hidden;
  background:var(--accent-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:23px;
  color:var(--accent-dark);
  border:2px solid var(--surface);
  box-shadow:0 0 0 1px var(--border);
}

.profile-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.profile-avatar .avatar-placeholder-icon{
  width:30px;
  height:30px;
}

.profile-info{
  grid-area:info;
  min-width:0;
  overflow:hidden;
}

.profile-nickname{
  font-size:20px;
  line-height:1.35;
  font-weight:700;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.profile-info img,
.profile-card > img{
  display:block;
  width:135px;
  max-width:100%;
  height:30px;
  margin-top:4px;
  object-fit:contain;
  object-position:left center;
}

.profile-card > img{
  grid-area:info;
  justify-self:start;
  align-self:end;
}

.profile-signature{
  grid-area:signature;
  margin-top:10px;
  font-size:15px;
  line-height:1.55;
  font-weight:700;
  color:var(--ink);
  overflow-wrap:anywhere;
}

.profile-intro{
  grid-area:intro;
  margin-top:6px;
  font-size:15px;
  line-height:1.65;
  color:var(--ink-muted);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.profile-edit-btn{
  grid-area:edit;
  justify-self:end;
  flex-shrink:0;
  padding:8px 14px;
  font-size:12.5px;
}
.subtabs{ display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.subtab-btn{
  border:1px solid var(--border); background: var(--surface); color: var(--ink-muted);
  padding:6px 14px; border-radius:999px; font-size:13px; font-weight:600;
}
.subtab-btn.is-active{ background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent-soft); }

/* ===== 收藏分类 ===== */
.fav-category-bar{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.cat-chip{
  border:1px solid var(--border); background: var(--surface); color: var(--ink-muted);
  padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:600;
}
.cat-chip.is-active{
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

.fav-item{ display:flex; flex-direction:column; }
.fav-item-catbar{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:-6px; padding:8px 14px; background: var(--surface-alt);
  border:1px solid var(--border); border-top:none;
  border-radius: 0 0 var(--radius-l) var(--radius-l); font-size:12px;
}
.fav-cat-badge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-muted);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fav-cat-icon{
  width: 13px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent-dark);
}

.fav-cat-icon svg{
  width: 100%;
  height: 100%;
  display: block;
}
.fav-cat-change-btn{ border:none; background:transparent; color: var(--accent-dark); font-weight:600; font-size:12px; flex-shrink:0; }
.fav-cat-change-btn:hover{ text-decoration: underline; }

.category-choice-list{ display:flex; flex-direction:column; gap:6px; max-height:280px; overflow-y:auto; }
.category-choice-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border:1px solid var(--border); border-radius: var(--radius-s);
  font-size:13.5px; color: var(--ink);
}
.category-choice-item:hover{ border-color: var(--ink-faint); }
.category-choice-item.is-selected{ background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent); font-weight:600; }
.category-choice-item .cat-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.cat-del-btn{ border:none; background:transparent; color: var(--ink-faint); font-size:12px; flex-shrink:0; }
.cat-del-btn:hover{ color: var(--danger); }
.category-add-row{ display:flex; gap:8px; margin-top:12px; }
.category-add-row .text-input{ flex:1; }

/* ===== 邀请评论选择列表（Char / NPC 多选） ===== */
.invite-picker-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.invite-picker-head .subtabs{
  margin-bottom:0;
}

.invite-random-btn{
  flex-shrink:0;
  height:34px;
  padding:0 13px;
  font-size:12.5px;
}

.invite-pick-list{ display:flex; flex-direction:column; gap:6px; max-height:320px; overflow-y:auto; margin-bottom:4px; }
.invite-pick-list[hidden]{ display:none; }
.invite-pick-item{
  display:flex; align-items:center; gap:10px; width:100%;
  border:1px solid var(--border); background: var(--surface); border-radius: var(--radius-s);
  padding:9px 12px; font-size:13.5px; color: var(--ink); cursor:pointer;
}
.invite-pick-item:hover{ border-color: var(--accent); background: var(--accent-soft); }
.invite-pick-item input[type="checkbox"]{ width:16px; height:16px; flex-shrink:0; accent-color: var(--accent); }
.invite-pick-item input:disabled{ opacity:0.5; }
.invite-pick-avatar{
  width:26px;
  height:26px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  background:var(--accent-soft);
  color:var(--accent-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
}

.invite-pick-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.invite-pick-avatar .avatar-placeholder-icon{
  width:16px;
  height:16px;
}

.invite-pick-name{ font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.invite-foot{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:8px;
  width:100%;
  box-sizing:border-box;
}

.invite-setting{
  display:flex;
  flex-direction:column;
  gap:4px;
  width:112px;
  min-width:112px;
  flex:0 0 112px;
}

.invite-vision-select{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}

.invite-foot-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex:0 0 auto;
  white-space:nowrap;
}

.invite-foot-actions .btn{
  white-space:nowrap;
}

@media (max-width:560px){
  .invite-foot{
    justify-content:space-between;
    gap:8px;
  }

  .invite-setting{
    width:104px;
    min-width:104px;
    flex:0 0 104px;
  }

  .invite-vision-select{
    width:100%;
    min-width:0;
  }

  .invite-foot-actions{
    gap:6px;
  }
}

.mention-row{
  margin: 8px 0 12px;
}

.mention-trigger{
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  font: inherit;
  cursor: pointer;
}

.mention-trigger:hover{
  border-color: var(--accent);
  background: var(--accent-soft);
}

.mention-trigger-label{
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-dark);
}

.mention-trigger-value{
  min-width: 0;
  flex: 1;
  text-align: right;
  font-size: 12.5px;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal--mini{
  max-width: 360px;
}

/* ===== NPC 列表 ===== */
.npc-toolbar{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.character-list-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.character-subtabs{
  margin-bottom:0;
  flex:1;
  min-width:0;
}

.character-toolbar{
  justify-content:flex-end;
  margin-bottom:0;
  flex-shrink:0;
}

.profile-avatar{
  cursor: pointer;
}

.profile-card--modal{
  margin-bottom: 16px;
  cursor: default;
}

.character-back-btn{
  margin-right: 4px;
}

.npc-card--openable{
  cursor: pointer;
}

.npc-card--openable:hover{
  border-color: var(--accent);
  background: var(--accent-soft);
}

.char-profile-section-title{
  margin: 4px 0 10px;
  font-size: 13px;
  color: var(--ink-muted);
}

.npc-toolbar .btn-outline{
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-color: var(--accent-soft);
  padding:5px 11px;
  min-height:30px;
  font-size:12px;
  font-weight:700;
}

.npc-toolbar .btn-outline:hover{
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-color: var(--accent);
  filter: brightness(0.98);
}
.npc-list{ display:flex; flex-direction:column; gap:10px; }
.npc-card{
  display:flex; align-items:center; gap:12px;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-l);
  padding:12px 14px; box-shadow: var(--shadow-card);
}
.npc-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  flex-shrink:0;
  overflow:hidden;
  background:var(--accent-soft);
  color:var(--accent-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
}

.npc-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.npc-avatar .avatar-placeholder-icon{
  width:24px;
  height:24px;
}

.npc-info{ flex:1; min-width:0; }
.npc-name{ font-size:14px; font-weight:700; }
.npc-bio{
  margin-top:2px; font-size:12px; color: var(--ink-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.npc-actions{ display:flex; gap:6px; flex-shrink:0; }

/* ===== Modal ===== */
.modal-mask{
  position: fixed; inset:0;
  background: rgba(10,11,12,0.56);
  display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-mask[hidden]{ display:none; }
.modal{
  background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow-modal);
  width: 100%; max-height: 88vh; display:flex; flex-direction:column;
}
.modal--form{ max-width: 520px; }
.modal--detail{ max-width: 600px; }
.title-reward-modal,
.title-detail-modal{
  max-width:420px;
  text-align:center;
  padding-top:34px;
  position:relative;
}

.title-reward-close{
  position:absolute;
  top:12px;
  right:12px;
}

.title-reward-image-wrap,
.title-detail-image-wrap{
  width:92px;
  height:92px;
  margin:0 auto 12px;
  border-radius:18px;
  overflow:hidden;
  background:var(--surface-alt);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
}

.title-reward-image-wrap img,
.title-detail-image-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.title-reward-image-placeholder{
  font-size:28px;
  font-weight:700;
  color:var(--accent-dark);
}

.title-reward-label{
  margin:0 0 6px;
  font-size:12px;
  font-weight:700;
  color:var(--ink-faint);
  letter-spacing:0;
}

.title-reward-modal h3,
.title-detail-modal h3{
  margin:0;
  font-size:20px;
  line-height:1.35;
  color:var(--ink);
  overflow-wrap:anywhere;
}

.title-reward-modal p,
.title-detail-modal p{
  margin:8px 0 0;
  font-size:13.5px;
  line-height:1.7;
  color:var(--ink-muted);
  white-space:pre-wrap;
}
.points-detail-modal{
  width:min(360px, calc(100vw - 32px));
}

.points-detail-body{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.points-detail-total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
  color:var(--ink-muted);
  font-size:13px;
}

.points-detail-total strong{
  color:var(--accent-dark);
  font-size:20px;
}

.points-detail-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--ink-muted);
  font-size:13px;
}

.points-detail-row span{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.points-detail-row small{
  color:var(--ink-faint);
  font-size:11px;
}

.points-detail-row strong{
  flex-shrink:0;
  color:var(--accent-dark);
  font-size:13px;
}

.points-checkin-btn{
  width:100%;
  margin-top:4px;
}

.points-checkin-btn:disabled{
  cursor:default;
  opacity:.55;
}

.modal-head{
  display:flex; align-items:center; justify-content:space-between; padding: 16px 20px;
  border-bottom: 1px solid var(--border); flex-shrink:0;
}
.modal-body{ padding: 18px 20px; overflow-y:auto; }
.modal-foot{ padding: 14px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; flex-shrink:0; }

.field-label{ display:block; font-size:12.5px; font-weight:600; color: var(--ink-muted); margin: 14px 0 6px; }
.field-label:first-child{ margin-top:0; }
.text-input, .textarea-input{
  width:100%; border:1px solid var(--border); border-radius: var(--radius-s); padding:9px 12px;
  font-size:14px; color: var(--ink); outline:none; background: var(--surface);
}
.text-input:focus, .textarea-input:focus{ border-color: var(--accent); }
.textarea-input{ resize: vertical; line-height:1.6; }

.uploader{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.uploader-hint{ font-size:12px; color: var(--ink-faint); }

.image-preview-grid{ margin-top:10px; display:grid; grid-template-columns: repeat(4,1fr); gap:8px; }
.preview-thumb{
  position:relative; aspect-ratio:1/1; border-radius: var(--radius-s); overflow:hidden;
  background: var(--surface-alt); transition: opacity .12s, outline-color .12s;
}
.preview-thumb img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.preview-thumb .remove-thumb{
  position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%;
  background: rgba(0,0,0,0.55); color:#fff; border:none; font-size:11px; display:flex; align-items:center; justify-content:center;
  z-index:3;
}
.preview-thumb .drag-handle{
  position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background: rgba(0,0,0,0.5); color:#fff; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  cursor: grab; touch-action:none; z-index:3; user-select:none;
}
.preview-thumb .cover-badge{
  position:absolute; left:3px; bottom:3px; z-index:3;
  background: var(--accent); color:#fff; font-size:10px; font-weight:700;
  padding:2px 7px; border-radius:999px; pointer-events:none;
}
.preview-thumb.is-dragging{ opacity:0.4; }
.preview-thumb.drag-over{ outline:2px solid var(--accent); outline-offset:-2px; }
.preview-hint{ margin-top:8px; font-size:11.5px; color: var(--ink-faint); }
.compress-progress{ margin-top:8px; font-size:12px; color: var(--ink-muted); }

.avatar-uploader{ display:flex; align-items:center; gap:14px; }
.avatar-preview{
  width:64px;
  height:64px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  background:var(--accent-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  color:var(--accent-dark);
}

.avatar-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.avatar-preview .avatar-placeholder-icon{
  width:32px;
  height:32px;
}

.avatar-uploader-actions{ display:flex; flex-direction:column; gap:6px; }
.avatar-url-row{ display:flex; gap:8px; margin-top:10px; }
.avatar-url-row .text-input{ flex:1; }

.data-size-info{ font-size:12.5px; color: var(--accent-dark); margin-bottom:10px; }

/* Detail modal */
.detail-meta-row{ display:flex; align-items:center; gap:6px; }
.detail-meta-avatar{
  width:20px; height:20px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background: var(--accent-soft); color: var(--accent-dark);
  display:flex; align-items:center; justify-content:center; font-size:11px;
}
.detail-meta-avatar img{ width:100%; height:100%; object-fit:cover; }

.detail-meta-avatar .avatar-placeholder-icon{
  width:14px;
  height:14px;
}

.detail-meta-text{ font-size:12.5px; color: var(--ink-faint); }
.detail-text{ margin-top:10px; font-size:14.5px; line-height:1.7; color: var(--ink); white-space:pre-wrap; }
.detail-image-grid{
  margin-top:14px; display:grid; grid-template-columns: repeat(3, 1fr); gap:6px;
}
.detail-image-grid.is-single{
  grid-template-columns: minmax(120px, 45%);
}
.detail-thumb{
  position:relative; aspect-ratio:1/1; border-radius: var(--radius-s); overflow:hidden;
  background: var(--surface-alt); border:none; padding:0; cursor:zoom-in; display:block;
}
.detail-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.expand-btn{
  display:block; width:100%; margin-top:10px; padding:9px;
  border:1px dashed var(--border); border-radius: var(--radius-m);
  background: var(--surface-alt); color: var(--accent-dark);
  font-size:13px; font-weight:600; text-align:center;
}
.expand-btn[hidden]{ display:none; }
.expand-btn:hover{ border-color: var(--accent); background: var(--accent-soft); }

.detail-actions{ display:flex; gap:6px; margin-top:12px; flex-wrap:wrap; }
.action-btn{
  border:1px solid var(--border); background: var(--surface); border-radius:999px;
  padding:5px 11px; font-size:12px; color: var(--ink-muted); font-weight:600;
  display:flex; align-items:center; gap:4px;
}
.action-btn:hover{ border-color: var(--ink-faint); }
.action-btn.is-active{ background: var(--like-soft); color: var(--like); border-color: var(--like-soft); }
.action-btn.is-active.is-fav{
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-color: var(--accent-soft);
}
.action-btn--danger{ margin-left:auto; color: var(--danger); }
.action-btn--danger:hover{ background: var(--danger-soft); border-color: var(--danger-soft); }

.comments-block{ margin-top:16px; border-top:1px solid var(--border); padding-top:12px; }
.comments-block h4{ font-size:13px; }
.comments-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.comment-list{ list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:10px; }

.comment-item{
  border-radius: var(--radius-s);
}
.comment-swipe-wrap{
  position: relative;
  border-radius: var(--radius-s);
  overflow: hidden;
}

.comment-item-empty{
  font-size:12.5px; color: var(--ink-faint); background: var(--surface-alt);
  border-radius: var(--radius-s); padding:7px 10px;
}

.comment-swipe-actions{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:128px;
  display:flex;
  align-items:stretch;
  z-index:0;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .2s ease, opacity .12s ease;
}

.comment-item.is-swiping > .comment-swipe-wrap .comment-swipe-actions,
.comment-item.is-open > .comment-swipe-wrap .comment-swipe-actions{
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.comment-ai-reply-btn,
.comment-delete-btn{
  flex:1;
  border:none;
  color:#fff;
  font-size:13px;
  font-weight:600;
}

.comment-ai-reply-btn{
  background: var(--accent-dark);
}

.comment-delete-btn{
  background: var(--danger);
}
.comment-item-inner{
  position:relative;
  z-index:1;
  width:100%;
  font-size:13.5px;
  background: var(--surface-alt);
  border-radius: var(--radius-s);
  padding:9px 12px;
  transform: translateX(0);
  transition: transform .2s ease;
  touch-action: pan-y;
}

.comment-item.is-swiping .comment-item-inner{ transition:none; user-select:none; -webkit-user-select:none; }
.comment-item--reply .comment-item-inner{ background: var(--surface); border:1px solid var(--border); padding:8px 10px; }

.comment-row1{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:3px; }
.comment-who{ display:flex; align-items:center; gap:6px; min-width:0; }
.comment-avatar{
  width:18px; height:18px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background: var(--accent-soft); color: var(--accent-dark);
  display:flex; align-items:center; justify-content:center; font-size:10px;
}
.comment-avatar img{ width:100%; height:100%; object-fit:cover; }

.comment-avatar .avatar-placeholder-icon{
  width:12px;
  height:12px;
}

.comment-author{ font-size:12.5px; font-weight:700; color: var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.npc-tag{
  margin-left:4px; font-size:9.5px; font-weight:700; color: var(--accent-dark);
  background: var(--accent-soft); padding:1px 6px; border-radius:999px; vertical-align:1px;
}
.comment-meta{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.comment-text{ line-height:1.6; white-space:pre-wrap; }
.comment-time{ font-size:11.5px; color: var(--ink-faint); white-space:nowrap; }
.comment-reply-btn{ border:none; background:transparent; padding:0; color: var(--accent-dark); font-size:12px; font-weight:600; white-space:nowrap; }
.comment-reply-btn:hover{ text-decoration: underline; }

.reply-list{ list-style:none; margin:8px 0 0; padding-left:14px; border-left:2px solid var(--border); display:flex; flex-direction:column; gap:8px; }

.reply-target-bar{
  display:flex; align-items:center; gap:6px; margin-bottom:8px;
  background: var(--accent-soft); color: var(--accent-dark);
  border-radius: var(--radius-s); padding:6px 10px; font-size:12.5px;
}
.reply-target-bar[hidden]{ display:none; }
.reply-target-bar span{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reply-target-bar button{ margin-left:auto; border:none; background:transparent; color: var(--accent-dark); font-weight:700; font-size:13px; }

.comment-input-row{ display:flex; gap:6px; align-items:center; }
.comment-input-row .text-input{ flex:1; height:32px; padding:6px 10px; font-size:12.5px; }
#submitCommentBtn{
  height:32px;
  padding:6px 13px;
  font-size:12.5px;
}
.comment-image-btn{
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:var(--radius-s);
  background:var(--surface);
  color:var(--accent-dark);
  padding:0;
}

.comment-image-btn:hover{
  border-color:var(--accent);
  background:var(--accent-soft);
}

.comment-image-btn svg{
  width:16px;
  height:16px;
  display:block;
}

.comment-image-preview-grid{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}

.comment-image-preview{
  position:relative;
  width:56px;
  height:56px;
  overflow:hidden;
  border-radius:var(--radius-s);
  background:var(--surface-alt);
}

.comment-image-preview img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.comment-image-preview button{
  position:absolute;
  top:3px;
  right:3px;
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50%;
  padding:0;
  background:rgba(0,0,0,0.62);
  color:#fff;
  font-size:11px;
}

.comment-image-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:6px;
  margin-top:8px;
  max-width:300px;
}

.comment-image-thumb{
  aspect-ratio:1 / 1;
  overflow:hidden;
  border:0;
  border-radius:var(--radius-s);
  padding:0;
  background:var(--surface-alt);
}

.comment-image-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Lightbox */
.modal-mask--lightbox{
  background: rgba(5,6,7,0.94); padding:0;
  flex-direction: column; align-items:stretch; justify-content:stretch;
}
.lightbox-stage{
  flex:1; display:flex; align-items:center; justify-content:center;
  min-height:0; padding: max(20px, env(safe-area-inset-top)) 16px 10px;
}
.modal-mask--lightbox img{ max-width:92vw; max-height:100%; border-radius:6px; object-fit:contain; touch-action: pan-y; }
.lightbox-close{
  position:absolute; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right));
  background: rgba(255,255,255,0.15); color:#fff; border-color: transparent; z-index:2;
}
.lightbox-toolbar{
  flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:14px;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
}
.lightbox-nav{
  width:40px; height:40px; border-radius:50%;
  background: rgba(255,255,255,0.15); color:#fff; border:none;
  font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.lightbox-nav[hidden]{ display:none; }
.lightbox-nav:hover{ background: rgba(255,255,255,0.28); }
.lightbox-counter{
  color:#fff; font-size:12.5px; font-weight:600;
  background: rgba(255,255,255,0.12); padding:6px 12px; border-radius:999px;
  min-width:44px; text-align:center;
}
.lightbox-counter[hidden]{
  display:none;
}
.lightbox-download{
  display:flex; align-items:center; gap:5px;
  background: rgba(255,255,255,0.15); color:#fff; border:none;
  font-size:13px; font-weight:600; padding:9px 16px; border-radius:999px;
}
.lightbox-download:hover{ background: rgba(255,255,255,0.28); }

/* Settings */
.settings-block{ padding: 14px 0; border-bottom:1px solid var(--border); }
.settings-block:first-child{ padding-top:0; }
.settings-block:last-child{ border-bottom:none; padding-bottom:0; }
.settings-block h4{ font-size:14px; margin-bottom:6px; }
.settings-desc{ font-size:12.5px; color: var(--ink-muted); line-height:1.6; margin-bottom:10px; }
.backup-mode-desc{
  margin-top:8px;
  margin-bottom:10px;
  color: var(--ink-muted);
  font-size:11.5px;
  line-height:1.6;
}

.backup-mode-desc p{
  margin:0;
}
.settings-status{ font-size:12px; color: var(--accent-dark); margin-top:8px; min-height:14px; }
.settings-block--danger .settings-desc{ color: var(--danger); }
.settings-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.github-backup-actions{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:6px;
}

.github-backup-actions .btn{
  min-width:0;
  padding:6px 6px;
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
}
.settings-divider{ height:1px; background: var(--border); margin:16px 0; }
.settings-version{ font-size:12.5px; color: var(--ink-muted); margin-bottom:10px; }
/* Changelog */
.changelog-modal{
  max-width:520px;
}

.changelog-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.changelog-item{
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px;
  background:var(--surface);
}

.changelog-item-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

.changelog-item h4{
  margin:2px 0 0;
  font-size:15px;
  line-height:1.4;
  color:var(--ink);
}

.changelog-version{
  margin:0;
  font-size:11.5px;
  color:var(--ink-faint);
  line-height:1.4;
}

.changelog-badge{
  flex-shrink:0;
  border-radius:999px;
  padding:3px 8px;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:11px;
  font-weight:700;
  line-height:1.4;
}

.changelog-summary{
  margin:0 0 10px;
  color:var(--ink-muted);
  font-size:12.5px;
  line-height:1.7;
}

.changelog-points{
  margin:8px 0 0;
  padding-left:18px;
  color:var(--ink);
  font-size:13px;
  line-height:1.75;
}

.changelog-points li + li{
  margin-top:3px;
}

.changelog-points--fix{
  color:var(--ink-muted);
}

.theme-choice-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.theme-choice-btn{
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--ink-muted);
  border-radius: 8px;
  padding:4px 3px;
  width:46px;
  height:46px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  font-size:10.5px;
  line-height:1;
  font-weight:700;
  white-space:nowrap;
  transition: border-color .15s, background .15s, color .15s, transform .1s;
}

.theme-choice-btn:hover{
  border-color: var(--accent);
  color: var(--accent-dark);
}

.theme-choice-btn.is-active{
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-color: var(--accent);
}

.theme-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.9);
  box-shadow: 0 0 0 1px var(--border);
}

.theme-dot--light{
  background: linear-gradient(135deg, #AEB5BA 0%, #FAFBFC 100%);
}

.theme-dot--green{
  background: linear-gradient(135deg, #7B946F 0%, #E7EFE1 100%);
}

.theme-dot--pink{
  background: linear-gradient(135deg, #B97883 0%, #F5E7E9 100%);
}

.theme-dot--blue{
  background: linear-gradient(135deg, #6F93AE 0%, #E4EDF3 100%);
}
.theme-dot--purple{
  background: linear-gradient(135deg, #95839F 0%, #EDE6F0 100%);
}
.theme-dot--dark{
  background: linear-gradient(135deg, #141517 0%, #C8CDD2 100%);
}
@media (max-width: 420px){
  .theme-choice-grid{
    flex-wrap: nowrap;
    gap: 5px;
  }

  .theme-choice-btn{
    width: auto;
    min-width: 0;
    flex: 1 1 0;
  }
}

.api-model-select{
  margin-top:8px;
}

.api-preset-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12.5px;
  font-weight:700;
  color: var(--ink-muted);
  margin-bottom:8px;
}

.api-preset-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.api-preset-empty{
  font-size:12.5px;
  color: var(--ink-faint);
  background: var(--surface-alt);
  border-radius: var(--radius-s);
  padding:9px 10px;
}

.api-preset-item{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-s);
  padding:9px 10px;
}
.api-preset-item.active{
  background: var(--accent-soft);
  border-color: var(--accent);
}

.api-preset-item.active .api-preset-name{
  color: var(--accent-dark);
}

.api-preset-item.active::after{
  content:"使用中";
  font-size:11px;
  font-weight:700;
  color:var(--accent-text);
  background:var(--accent);
  padding:3px 8px;
  border-radius:999px;
}

.api-preset-info{
  flex:1;
  min-width:0;
}

.api-preset-name{
  font-size:13px;
  font-weight:700;
  color: var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.api-preset-meta{
  margin-top:2px;
  font-size:11.5px;
  color: var(--ink-faint);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.api-preset-actions{
  display:flex;
  gap:6px;
  flex-shrink:0;
}

.api-preset-actions button{
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--ink-muted);
  border-radius:999px;
  padding:5px 9px;
  font-size:12px;
  font-weight:700;
}

.api-preset-actions button:hover{
  border-color: var(--accent);
  color: var(--accent-dark);
}

.api-preset-actions .api-preset-delete:hover{
  border-color: var(--danger-soft);
  background: var(--danger-soft);
  color: var(--danger);
}


/* Toast */
.toast{
  position: fixed; bottom: 78px; left:50%; transform: translateX(-50%);
  background: #111214; color:#fff; padding:10px 18px; border-radius:999px;
  font-size:13px; z-index: 200; box-shadow: var(--shadow-modal);
}

/* ===== 底部 Dock 導覽列 ===== */
.dock{
  flex-shrink:0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display:flex; justify-content:center; gap:8px;
  padding: 6px max(16px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.dock-btn{
  flex:1; max-width:180px; border:none; background:transparent;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 10px; border-radius: var(--radius-m);
  color: var(--ink-faint); font-size:11px; font-weight:600;
  transition: background .15s, color .15s;
}
.dock-btn .dock-icon{
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.dock-btn .dock-icon svg{
  width:100%;
  height:100%;
  display:block;
}
.dock-btn.is-active{ color: var(--accent-dark); background: var(--accent-soft); }

/* ===== Responsive ===== */
@media (max-width: 640px){
  .topbar-inner{
    flex-wrap:nowrap;
    gap:8px;
    min-height:57px;
  }

  .topbar-actions{
    min-width:0;
    flex:1;
    justify-content:flex-end;
  }

  .search-input{
    width:clamp(92px, 34vw, 150px);
    min-width:0;
  }

  #openNewPostBtn{
    white-space:nowrap;
    padding-left:12px;
    padding-right:12px;
  }

  .app-main{
    padding: 16px 12px;
  }
}

/* ===== 開屏動畫：月光信紙版 ===== */

.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.68),
      rgba(241, 245, 255, 0.82)
    ),
    url("notice-bg.svg");
  background-size: cover;
  background-position: center;
  color: #272b38;
  pointer-events: auto;
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  overflow: hidden;
  transition:
    opacity 0.55s ease,
    visibility 0.55s ease;
}

.splash-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.94) 0 18%, rgba(255, 255, 255, 0.56) 38%, transparent 68%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(228, 235, 255, 0.26));
  pointer-events: none;
}

.splash-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
}

.splash-ambient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.splash-orbit {
  position: absolute;
  left: 50%;
  top: 43%;
  width: min(82vw, 420px);
  aspect-ratio: 1;
  border: 1px solid rgba(182, 195, 245, 0.44);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.86);
}

.splash-orbit--one {
  animation: splashOrbitIn 1.25s cubic-bezier(.22, .8, .25, 1) .2s forwards;
}

.splash-orbit--two {
  width: min(66vw, 330px);
  border-color: rgba(215, 204, 255, 0.5);
  animation: splashOrbitIn 1.25s cubic-bezier(.22, .8, .25, 1) .38s forwards;
}

.splash-star {
  position: absolute;
  width: 9px;
  height: 9px;
  opacity: 0;
  transform: rotate(45deg) scale(0.6);
}

.splash-star::before,
.splash-star::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(174, 188, 255, 0.72);
}

.splash-star::before {
  width: 2px;
  height: 100%;
}

.splash-star::after {
  width: 100%;
  height: 2px;
}

.splash-star--one {
  left: 31%;
  top: 34%;
  animation: splashStarTwinkle 2.8s ease-in-out .85s infinite;
}

.splash-star--two {
  right: 28%;
  top: 39%;
  width: 7px;
  height: 7px;
  animation: splashStarTwinkle 3.2s ease-in-out 1.2s infinite;
}

.splash-star--three {
  left: 52%;
  top: 61%;
  width: 6px;
  height: 6px;
  animation: splashStarTwinkle 3s ease-in-out 1.55s infinite;
}

.splash-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-26px);
}

.splash-logo {
  width: 86px;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(236, 240, 255, 0.64));
  box-shadow:
    0 18px 42px rgba(126, 142, 211, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.78) inset,
    0 0 0 1px rgba(199, 209, 245, 0.62);
  opacity: 0;
  transform: translateY(12px) scale(0.82);
  filter: blur(8px);
  overflow: hidden;
}

.splash-logo img {
  width: 68px;
  height: 68px;
  display: block;
  object-fit: contain;
  border-radius: 18px;
}

.splash-logo.is-visible {
  animation: splashLogoIn 0.9s cubic-bezier(.18, .9, .25, 1) forwards;
}

.splash-brand {
  margin-top: 18px;
  color: #303443;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .18em;
  text-indent: .18em;
  opacity: 0;
  transform: translateY(8px);
}

.splash-screen.is-started .splash-brand {
  animation: splashTextIn .72s cubic-bezier(.22, .8, .25, 1) .78s forwards;
}

.splash-quote {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(64vw, 210px);
  gap: 0;
  margin-top: 13px;
  color: #596176;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: .08em;
}

.splash-line:first-child {
  position: relative;
  left: -4px;
  text-align: left;
}

.splash-line:last-child {
  position: relative;
  left: 4px;
  text-align: right;
}

.splash-line {
  display: block;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(5px);
  transition:
    opacity 0.65s cubic-bezier(.22, .8, .25, 1),
    transform 0.65s cubic-bezier(.22, .8, .25, 1),
    filter 0.65s cubic-bezier(.22, .8, .25, 1);
}

.splash-line.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.splash-enter-hint {
  position: fixed;
  left: 50%;
  bottom: max(30px, calc(22px + env(safe-area-inset-bottom)));
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 28px;
  padding: 0 14px;
  border-radius: 999px;
  color: #8f98ad;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  opacity: 0;
  transform: translate(-50%, 8px);
  white-space: nowrap;
}

.splash-screen.is-started .splash-enter-hint {
  animation: splashHintIn 0.7s ease 2.45s forwards;
}

.splash-enter-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #aab8ef;
  box-shadow: 0 0 0 0 rgba(170, 184, 239, 0.34);
}

.splash-screen.is-started .splash-enter-dot {
  animation: splashDotPulse 1.8s ease-in-out 3.15s infinite;
}

@keyframes splashLogoIn {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.82);
    filter: blur(8px);
  }

  68% {
    opacity: 1;
    transform: translateY(0) scale(1.04);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes splashTextIn {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes splashOrbitIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.86) rotate(-8deg);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
}

@keyframes splashStarTwinkle {
  0%, 100% {
    opacity: 0.24;
    transform: rotate(45deg) scale(0.72);
  }

  50% {
    opacity: 0.95;
    transform: rotate(45deg) scale(1.08);
  }
}

@keyframes splashHintIn {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes splashDotPulse {
  0%, 100% {
    opacity: 0.48;
    transform: scale(0.86);
    box-shadow: 0 0 0 0 rgba(170, 184, 239, 0.34);
  }

  50% {
    opacity: 1;
    transform: scale(1.18);
    box-shadow: 0 0 0 6px rgba(170, 184, 239, 0);
  }
}

.splash-screen:focus-visible {
  outline: 2px solid rgba(142, 151, 219, 0.85);
  outline-offset: -8px;
}

.splash-screen.is-hiding {
  opacity: 0;
  visibility: hidden;
}

.splash-screen.is-hiding .splash-content,
.splash-screen.is-hiding .splash-ambient,
.splash-screen.is-hiding .splash-enter-hint {
  animation: none;
}

@media (max-width: 520px) {
  .splash-content {
    transform: translateY(-24px);
  }

  .splash-logo {
    width: 76px;
    height: 76px;
    border-radius: 22px;
  }

  .splash-logo img {
    width: 60px;
    height: 60px;
    border-radius: 16px;
  }

  .splash-brand {
    margin-top: 16px;
    font-size: 22px;
  }

  .splash-quote {
   width: min(66vw, 210px);
   margin-top: 12px;
   font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash-screen,
  .splash-logo,
  .splash-line,
  .splash-brand {
    transition: none;
  }

  .splash-logo.is-visible,
  .splash-screen.is-started .splash-brand,
  .splash-screen.is-started .splash-enter-hint,
  .splash-screen.is-started .splash-enter-dot,
  .splash-orbit,
  .splash-star {
    animation: none;
  }

  .splash-logo,
  .splash-brand,
  .splash-line,
  .splash-enter-hint,
  .splash-orbit,
  .splash-star {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@media (max-width:640px){
  .profile-card{
    grid-template-columns:52px 1fr auto;
    column-gap:12px;
    min-height:170px;
    padding:18px 16px;
  }

  .profile-avatar{
    width:52px;
    height:52px;
    font-size:21px;
  }

  .profile-nickname{
    font-size:18px;
  }

  .profile-signature{
    margin-top:9px;
    font-size:14px;
    line-height:1.55;
  }

  .profile-intro{
    margin-top:5px;
    font-size:14px;
    line-height:1.6;
  }

  .profile-edit-btn{
    padding:7px 11px;
    font-size:12px;
  }
}

@media (max-width:640px){
  .character-list-head{
    align-items:flex-start;
    gap:8px;
  }

  .character-toolbar{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }

  .character-toolbar .btn-outline{
    width:100%;
    padding:4px 6px;
    min-height:28px;
    font-size:10.5px;
    white-space:nowrap;
  }
}

/* ===== Album ===== */
.album-toolbar{
  display:flex;
  justify-content:flex-end;
  margin-bottom:14px;
}

.album-toolbar-actions{
  position:relative;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.album-menu-wrap{
  position:relative;
}

.album-tool-btn{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:50%;
  padding:0;
  background:var(--surface);
  color:var(--accent-dark);
}

.album-tool-btn:hover{
  border-color:var(--accent);
  background:var(--accent-soft);
}

.album-tool-icon{
  width:17px;
  height:17px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.album-tool-icon svg{
  width:100%;
  height:100%;
  display:block;
}

.album-popover{
  position:absolute;
  top:40px;
  right:0;
  z-index:20;
  min-width:142px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  background:var(--surface);
  box-shadow:var(--shadow-modal);
}

.album-sort-menu{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.album-sort-menu button{
  width:100%;
  border:0;
  border-radius:var(--radius-s);
  padding:8px 10px;
  background:transparent;
  color:var(--ink-muted);
  font-size:13px;
  font-weight:700;
  text-align:left;
}

.album-sort-menu button:hover,
.album-sort-menu button.is-active{
  background:var(--accent-soft);
  color:var(--accent-dark);
}

.album-date-menu{
  width:190px;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

.album-date-menu .text-input{
  height:34px;
  padding:6px 8px;
  font-size:12.5px;
}

.album-date-menu .btn{
  width:100%;
  padding:7px 10px;
  font-size:12.5px;
}

.album-list{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.album-section{
  scroll-margin-top:18px;
}

.album-date-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  color:var(--ink-muted);
  font-size:12.5px;
  font-weight:700;
}

.album-date-head::after{
  content:"";
  height:1px;
  flex:1;
  background:var(--border);
  opacity:.75;
}

.album-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}

.album-item{
  min-width:0;
}

.album-thumb{
  width:100%;
  aspect-ratio:1 / 1;
  display:block;
  border:0;
  padding:0;
  overflow:hidden;
  border-radius:var(--radius-s);
  background:var(--surface-alt);
  cursor:zoom-in;
}

.album-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.album-source-btn{
  width:100%;
  margin-top:5px;
  border:0;
  padding:0;
  background:transparent;
  color:var(--ink-faint);
  font-size:11px;
  line-height:1.35;
  text-align:left;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.album-source-btn:hover{
  color:var(--accent-dark);
  text-decoration:underline;
}

@media (max-width:640px){
  .album-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:6px;
  }

  .album-source-btn{
    font-size:10.5px;
  }
}
/* ===== 稱號小舖 ===== */

.title-shop-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.title-shop-head h3{
  margin:0;
  font-size:16px;
  line-height:1.35;
  color:var(--ink);
}

.title-shop-head p{
  margin:4px 0 0;
  font-size:12.5px;
  line-height:1.5;
  color:var(--ink-muted);
}

.title-points{
  flex-shrink:0;
  padding:7px 11px;
  border:0;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.title-points:hover,
.title-points:focus-visible{
  background:var(--accent);
  outline:none;
}

.title-shop-divider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:16px 0 12px;
  color:var(--ink-faint);
  font-size:12px;
  font-weight:600;
}

.title-shop-divider::before,
.title-shop-divider::after{
  content:"";
  height:1px;
  background:var(--border);
  flex:1;
}

.title-shop-divider span{
  flex-shrink:0;
}

/* ===== 稱號九宮格 ===== */

.title-points-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.title-code-toggle {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent-dark);
  cursor: pointer;
  transition:
    background 0.16s ease,
    border-color 0.16s ease;
}

.title-code-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}

.title-code-toggle:hover,
.title-code-toggle:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent-dark);
  outline: none;
}

.title-code-box {
  margin: -4px 0 14px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--surface-alt);
}

.title-code-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.title-code-row .text-input {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 5px 9px;
  font-size: 12.5px;
}

.title-code-row .btn {
  height: 30px;
  padding: 5px 11px;
  font-size: 12.5px;
  line-height: 1;
}

.title-code-status {
  margin-top: 5px;
  min-height: 14px;
  font-size: 11.5px;
}

.title-code-status:empty {
  display: none;
}

.title-shop-list,
.title-special-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
}

.title-item {
  display: flex;
  min-width: 0;
  height: auto;
  min-height: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  overflow: hidden;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
}

.title-item__image {
  width: 100%;
  height: 56px;
  aspect-ratio: auto;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-alt);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-item__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.title-item__body {
  min-width: 0;
  flex: 1 1 auto;
  overflow: visible;
}

.title-item__name {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.title-item__desc {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 3px;
  color: var(--ink-muted);
  font-size: 10.5px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.title-item__meta {
  overflow: hidden;
  margin-top: 4px;
  color: var(--ink-faint);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title-item__actions {
  display: flex;
  width: 100%;
  min-height: 22px;
  flex-shrink: 0;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

.title-item__cost {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--accent-dark);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title-item__btn {
  width: auto;
  min-width: 30px;
  flex: 0 0 auto;
  padding: 4px 6px;
  font-size: 9px;
  line-height: 1.15;
}

.title-item__status {
  width: 100%;
  color: var(--ink-faint);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
}

@media (max-width: 640px) {
  .title-shop-head {
    align-items: center;
  }

  .title-shop-head p {
    max-width: 190px;
  }

  .title-shop-list,
  .title-special-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .title-item {
    height: auto;
    min-height: 0;
    gap: 5px;
    padding: 8px 6px;
  }

  .title-item__image {
    width: 100%;
    height: 48px;
    aspect-ratio: auto;
    border-radius: 8px;
  }

  .title-item__name {
    font-size: 13px;
  }

  .title-item__desc {
    min-height: 36px;
    font-size: 10px;
    line-height: 1.35;
    -webkit-line-clamp: 3;
  }

  .title-item__meta {
    font-size: 8.5px;
  }

  .title-item__actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
  }

  .title-item__cost {
    font-size: 8.5px;
  }

  .title-item__btn {
    width: auto;
    min-width: 30px;
    padding: 3px 5px;
    font-size: 8.5px;
  }

  .title-code-row {
    align-items: stretch;
  }

  .title-code-row .btn {
    flex-shrink: 0;
    padding-inline: 10px;
  }
}

.mention-display{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 12px;
}

.mention-chip{
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
}
.worldbook-bind-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:6px 0 4px;
  max-height:180px;
  overflow:auto;
}

.worldbook-bind-item{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-s);
  background:var(--surface-alt);
  cursor:pointer;
}

.worldbook-bind-item:hover{
  border-color:var(--accent);
  background:var(--accent-soft);
}

.worldbook-bind-item input{
  margin-top:2px;
}

.worldbook-bind-info{
  min-width:0;
  flex:1;
}

.worldbook-bind-title{
  font-size:13px;
  font-weight:700;
  color:var(--ink);
}

.worldbook-bind-preview{
  margin-top:3px;
  font-size:12px;
  color:var(--ink-muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.worldbook-scope-grid{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:6px 0 14px;
}

.worldbook-scope-option{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:var(--radius-s);
  background:var(--surface);
  cursor:pointer;
}

.worldbook-scope-option:hover{
  background:var(--accent-soft);
  border-color:var(--accent);
}

.worldbook-scope-option span{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.worldbook-scope-option strong{
  font-size:13px;
}

.worldbook-scope-option small{
  font-size:12px;
  color:var(--ink-muted);
}

.worldbook-enabled-option{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  font-size:13px;
  cursor:pointer;
}

.worldbook-card{
  align-items:flex-start;
}

.worldbook-card .npc-info{
  min-width:0;
}

.worldbook-scope-label{
  display:inline-flex;
  margin-top:5px;
  padding:2px 7px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:11px;
  font-weight:700;
}

.worldbook-bound-list{
  margin-top:5px;
  font-size:12px;
  color:var(--ink-muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.worldbook-avatar svg{
  width:24px;
  height:24px;
  color:var(--accent-dark);
  display:block;
}
/* ===== 首次使用聲明／更新公告 ===== */

.notice-mask {
  background:
    linear-gradient(
      rgba(255, 255, 255, 0.08),
      rgba(224, 224, 255, 0.16)
    ),
    url("notice-bg.svg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.notice-lead-line {
  display: block;
  width: fit-content;
  margin-bottom: 4px;
}

.notice-lead{
  margin-top:0;
}

.notice-modal {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.94),
      rgba(250, 248, 255, 0.9)
    );
  backdrop-filter: blur(22px) saturate(1.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.18);
  border: 1px solid rgba(218, 224, 255, 0.92);
  box-shadow:
    0 26px 76px rgba(121, 139, 210, 0.28),
    0 8px 28px rgba(173, 154, 226, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.68) inset;
}

.notice-header{
  display:flex;
  align-items:center;
  gap:14px;
  padding:24px 26px 18px;
}

.notice-symbol {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 10px 24px rgba(143, 157, 220, 0.24),
    0 0 0 1px rgba(207, 216, 244, 0.82);
  overflow: hidden;
}

.notice-symbol img {
  width: 38px;
  height: 38px;
  display: block;
  object-fit: contain;
}

.notice-eyebrow {
  margin: 0 0 3px;
  color: #aeb8cc;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

.notice-header h2 {
  margin: 0;
  color: #262a36;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: .02em;
}

.notice-divider {
  height: 1px;
  margin: 0 26px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(190, 201, 238, 0.78),
    transparent
  );
}

.notice-scroll-area{
  max-height:450px;
  overflow-y:auto;
  padding:20px 26px 12px;
  overscroll-behavior:contain;
  scrollbar-color:var(--accent) transparent;
}

.notice-lead {
  margin: 0 0 18px;
  color: #687084;
  font-size: 14px;
  line-height: 1.8;
}

.notice-lead strong {
  color: #6e72b8;
  font-weight: 800;
}

.notice-section {
  margin: 0 0 16px;
  padding: 15px 16px;
  border: 1px solid rgba(207, 216, 244, 0.9);
  border-radius: 14px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.82),
      rgba(247, 249, 255, 0.74)
    );
  box-shadow:
    0 8px 22px rgba(140, 154, 205, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.58) inset;
}

.notice-section--highlight {
  border-color: rgba(181, 189, 239, 0.95);
  background:
    linear-gradient(
      180deg,
      rgba(247, 245, 255, 0.96),
      rgba(238, 246, 255, 0.82)
    );
  box-shadow:
    0 10px 26px rgba(143, 157, 220, 0.13),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}

.notice-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: #292d39;
  font-size: 14px;
  line-height: 1.4;
}

.notice-section h3 span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #eef6ff, #d6dcff 58%, #b7c8ff);
  color: #40475c;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(135, 150, 218, 0.22);
}

.notice-section p {
  margin: 0 0 8px;
  color: #687084;
  font-size: 13px;
  line-height: 1.8;
}

.notice-section p:last-child{
  margin-bottom:0;
}

.notice-emphasis {
  color: #6067ad;
  font-weight: 800;
  background: rgba(220, 225, 255, 0.62);
  border-radius: 4px;
  padding: 1px 4px;
}

.notice-danger{
  color:var(--danger);
  font-weight:800;
}

.notice-read-end {
  margin: 18px 0 4px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(241, 245, 255, 0.82);
  color: #a7b0c4;
  font-size: 11px;
  text-align: center;
  opacity: .88;
}

.notice-agreement {
  padding: 14px 26px 4px;
  border-top: 1px solid rgba(207, 216, 244, 0.82);
  background: rgba(255, 255, 255, 0.28);
}

.notice-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #71798b;
  font-size: 12.5px;
  line-height: 1.65;
  cursor: pointer;
  user-select: none;
}

.notice-checkbox-label input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.notice-custom-checkbox {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  border: 1px solid rgba(188, 199, 237, 0.95);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.78);
  transition: .18s ease;
}

.notice-checkbox-label input:checked + .notice-custom-checkbox {
  border-color: #7f88d6;
  background: linear-gradient(135deg, #b9c9ff, #9185dd);
  box-shadow: 0 0 0 4px rgba(200, 208, 255, 0.42);
}

.notice-checkbox-label input:checked + .notice-custom-checkbox::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.notice-hint {
  margin: 7px 0 0 27px;
  color: #a4adbf;
  font-size: 11px;
}
.notice-hint.is-ready {
  color: #747bd1;
}

.notice-footer{
  display:flex;
  justify-content:flex-end;
  padding:12px 26px 22px;
}

.notice-agree-btn {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, #aebfff, #8e86dc 58%, #756dca);
  border: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow:
    0 12px 26px rgba(127, 136, 214, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.42) inset;
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}

.notice-agree-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow:
    0 16px 32px rgba(127, 136, 214, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.notice-agree-btn:disabled {
  cursor: not-allowed;
  opacity: .46;
  color: #8f96a8;
  background: linear-gradient(135deg, #edf1f8, #e5e8f1);
  box-shadow: none;
}

@media (max-width:520px){
  .notice-mask{
    align-items:center;
    justify-content:center;
    padding:
      calc(max(18px, env(safe-area-inset-top)) + 10px)
      18px
      max(18px, env(safe-area-inset-bottom));
  }

  .notice-modal{
    width:100%;
    max-width:420px;
    max-height:calc(
      100dvh
      - calc(max(18px, env(safe-area-inset-top)) + 10px)
      - max(18px, env(safe-area-inset-bottom))
    );
    border-radius:22px;
  }
}

  .notice-header{
    padding:18px 18px 13px;
    gap:11px;
  }

  .notice-symbol{
    width:42px;
    height:42px;
    border-radius:14px;
    font-size:25px;
  }

  .notice-eyebrow{
    font-size:9px;
    letter-spacing:.13em;
  }

  .notice-header h2{
    font-size:19px;
  }

  .notice-divider{
    margin:0 18px;
  }

  .notice-scroll-area{
    max-height:calc(100dvh - 310px);
    padding:15px 18px 10px;
  }

  .notice-lead{
    font-size:13px;
    line-height:1.7;
  }

  .notice-section{
    padding:12px 13px;
    margin-bottom:12px;
    border-radius:13px;
  }

  .notice-section h3{
    font-size:13px;
  }

  .notice-section h3 span{
    width:23px;
    height:19px;
    font-size:9px;
  }

  .notice-section p{
    font-size:12.5px;
    line-height:1.75;
  }

  .notice-agreement{
    padding:11px 18px 3px;
  }

  .notice-checkbox-label{
    font-size:12px;
    line-height:1.6;
  }

  .notice-footer{
    padding:10px 18px calc(16px + env(safe-area-inset-bottom));
  }

  .notice-agree-btn{
    min-height:42px;
    font-size:13px;
  }
}