/* ICFK Community Portal v3
 * Visual compatibility layer for the legacy Vue/PHP portal.
 * It intentionally uses restrained surfaces and task-led hierarchy rather
 * than generic glass cards or decorative dashboard chrome.
 */
:root {
  --portal-ease: cubic-bezier(.2,.72,.2,1);
  --portal-ease-emphasized: cubic-bezier(.16,1,.3,1);
  --portal-duration-fast: 120ms;
  --portal-duration: 190ms;
  --portal-duration-slow: 320ms;
  --c-accent: var(--ui-primary, #0a84ff);
  --c-bg: var(--ui-bg, #f5f8fc);
  --c-surface: var(--ui-surface, #fff);
  --c-surface2: var(--ui-surface-muted, #f8fafc);
  --c-border: var(--ui-border, #dbe5f0);
  --c-border2: var(--ui-border-strong, #c7d5e5);
  --c-text: var(--ui-text, #172033);
  --c-text1: var(--ui-text, #172033);
  --c-text2: var(--ui-text-secondary, #526077);
  --c-text3: var(--ui-text-muted, #7b889c);
  --radius-sm: 8px;
  --radius: 11px;
  --radius-lg: 16px;
}

/* Shell continuity */
.app-shell { background: var(--c-bg); }
.sidebar {
  border-right: 1px solid var(--c-border);
  background: var(--c-surface);
  box-shadow: none;
}
.sidebar-brand { min-height: 48px; }
.sidebar-brand-icon { border-radius: 10px; box-shadow: 0 6px 18px rgb(37 99 235 / .16); }
.sidebar-section { gap: 3px; }
.sidebar-section-title { letter-spacing: .08em; font-weight: 700; }
.sidebar-item {
  min-height: 40px;
  border-radius: 9px;
  transition: color var(--portal-duration) var(--portal-ease), background var(--portal-duration) var(--portal-ease), transform var(--portal-duration-fast) var(--portal-ease);
}
.sidebar-item:hover { transform: translateX(1px); }
.sidebar-item.active { color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 10%, var(--c-surface)); }
.sidebar-item.active::before { width: 3px; border-radius: 0 3px 3px 0; }
.topbar {
  background: color-mix(in srgb, var(--c-surface) 96%, transparent);
  border-bottom: 1px solid var(--c-border);
  box-shadow: none;
  backdrop-filter: saturate(130%) blur(9px);
  -webkit-backdrop-filter: saturate(130%) blur(9px);
}
.topbar-action, .btn-icon { border-radius: 9px; }
.topbar-popover { border-radius: 14px; box-shadow: 0 18px 50px rgb(15 23 42 / .14); animation: portal-popover-in var(--portal-duration) var(--portal-ease-emphasized); }
@keyframes portal-popover-in { from { opacity: 0; transform: translateY(-5px) scale(.985); } }

/* Buttons: a small, consistent grammar */
.btn {
  min-height: 38px;
  border-radius: 9px;
  font-weight: 670;
  transition: color var(--portal-duration) var(--portal-ease), background var(--portal-duration) var(--portal-ease), border-color var(--portal-duration) var(--portal-ease), box-shadow var(--portal-duration) var(--portal-ease), transform var(--portal-duration-fast) var(--portal-ease);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--c-accent); box-shadow: 0 6px 16px rgb(37 99 235 / .16); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 8px 22px rgb(37 99 235 / .22); }
.btn-secondary { background: var(--c-surface); border-color: var(--c-border2); }
.btn-ghost { border: 1px solid transparent; background: transparent; color: var(--c-text2); }
.btn-ghost:hover { background: var(--c-surface2); color: var(--c-text); }
.btn:focus-visible, .sidebar-item:focus-visible, .topbar-action:focus-visible, .form-input:focus-visible { outline: 3px solid rgb(37 99 235 / .2); outline-offset: 2px; }

/* Views and panels */
.view-pane { animation: portal-view-in var(--portal-duration-slow) var(--portal-ease-emphasized) both; }
@keyframes portal-view-in { from { opacity: 0; transform: translateY(7px); } }
.modal-backdrop { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal { border: 1px solid var(--c-border); box-shadow: 0 24px 70px rgb(15 23 42 / .2); animation: portal-modal-in var(--portal-duration-slow) var(--portal-ease-emphasized) both !important; }
@keyframes portal-modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.admin-nav { border: 1px solid var(--c-border); background: var(--c-surface); border-radius: 12px; }
.admin-nav-item { border-radius: 8px; }

/* Announcement center */
.announcement-center { width: min(920px, calc(100vw - 32px)); max-height: min(82vh, 760px); overflow: hidden; }
.announcement-center-head { display: flex; align-items: center; gap: 13px; padding: 18px 20px; color: var(--c-text); background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.announcement-center-head .announcement-center-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: #b76900; background: #fff4df; }
.announcement-center-head h3 { margin: 0; font-size: 17px; }
.announcement-center-head p { margin: 3px 0 0; color: var(--c-text3); font-size: 12px; }
.announcement-center-head .btn-icon { margin-left: auto; }
.announcement-center-layout { min-height: 360px; display: grid; grid-template-columns: 260px minmax(0,1fr); }
.announcement-center-list { overflow-y: auto; padding: 10px; border-right: 1px solid var(--c-border); background: var(--c-surface2); }
.announcement-center-item { appearance: none; width: 100%; padding: 11px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--c-text2); text-align: left; cursor: pointer; }
.announcement-center-item:hover { background: var(--c-surface); }
.announcement-center-item.active { color: var(--c-text); background: var(--c-surface); box-shadow: 0 1px 3px rgb(15 23 42 / .06); }
.announcement-center-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.announcement-center-item span { display: block; margin-top: 4px; color: var(--c-text3); font-size: 11px; }
.announcement-center-detail { min-width: 0; overflow-y: auto; padding: 24px; }
.announcement-center-detail h4 { margin: 0 0 15px; color: var(--c-text); font-size: 20px; line-height: 1.35; }
.announcement-center-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--c-text3); font-size: 11px; }
.announcement-center-foot { display: flex; align-items: center; gap: 16px; padding: 14px 20px 18px; border-top: 1px solid var(--c-border); background: var(--c-surface); }
.announcement-center-foot label { display: inline-flex; align-items: center; gap: 8px; color: var(--c-text2); font-size: 12px; }
.announcement-center-foot .announcement-center-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }

/* Site visual scene editor */
.ss-scene-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.ss-scene-card { overflow: hidden; border: 1px solid var(--c-border); border-radius: 14px; background: var(--c-surface); }
.ss-scene-preview { position: relative; min-height: 156px; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; padding: 15px; color: #fff; background: linear-gradient(135deg,#172033,#334155); }
.ss-scene-preview::before { content: ""; position: absolute; z-index: -2; inset: -35px; background-image: var(--scene-image, none); background-size: cover; background-position: var(--scene-position,50% 50%); filter: blur(var(--scene-blur,0px)) brightness(var(--scene-brightness,1)); transform: scale(var(--scene-scale,1)); }
.ss-scene-preview::after { content: ""; position: absolute; z-index: -1; inset: 0; background: rgb(10 18 32 / var(--scene-overlay,.6)); }
.ss-scene-preview strong { font-size: 14px; }
.ss-scene-preview span { display: block; margin-top: 3px; color: rgb(255 255 255 / .72); font-size: 11px; }
.ss-scene-body { padding: 14px; }
.ss-scene-upload-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-scene-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 12px; margin-top: 14px; }
.ss-range-field { min-width: 0; }
.ss-range-field label { display: flex; justify-content: space-between; color: var(--c-text2); font-size: 11px; }
.ss-range-field input[type="range"] { width: 100%; accent-color: var(--c-accent); }
.ss-scene-hint { margin: 8px 0 0; color: var(--c-text3); font-size: 11px; line-height: 1.55; }

/* Scene utility shared with Vue portal */
.portal-scene { position: relative; isolation: isolate; overflow: hidden; }
.portal-scene::before { content: ""; position: absolute; z-index: -2; inset: calc(var(--scene-blur,0px) * -2); background-image: var(--scene-image,none); background-size: cover; background-position: var(--scene-position,50% 50%); filter: blur(var(--scene-blur,0px)) brightness(var(--scene-brightness,1)); transform: scale(var(--scene-scale,1)); }
.portal-scene::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(110deg, rgb(8 16 30 / calc(var(--scene-overlay,.62) + .12)), rgb(8 16 30 / var(--scene-overlay,.62))); }

@media (max-width: 900px) {
  .announcement-center-layout { grid-template-columns: 210px minmax(0,1fr); }
  .ss-scene-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .announcement-center { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
  .announcement-center-layout { min-height: 0; grid-template-columns: 1fr; }
  .announcement-center-list { max-height: 130px; display: flex; gap: 7px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--c-border); }
  .announcement-center-item { min-width: 190px; }
  .announcement-center-detail { min-height: 240px; padding: 18px; }
  .announcement-center-foot { align-items: stretch; flex-direction: column; }
  .announcement-center-foot .announcement-center-actions { width: 100%; margin-left: 0; }
  .announcement-center-foot .btn { flex: 1; }
  .ss-scene-controls { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .view-pane, .modal, .topbar-popover { animation: none !important; }
}
.announcement-center-note{margin:0;color:var(--c-text3);font-size:12px;line-height:1.55;max-width:520px}

/* ============================================================
   ICFK 门户 · v4.0 高级视觉打磨层（作用于首页 SPA）
   统一光影层级、渐变点缀、卡片升起与排版节奏。
   ============================================================ */
:root{ --c-grad: linear-gradient(135deg, var(--c-accent,#2f6bff), var(--c-accent2,#6d5efc)); }

/* — 顶部欢迎条：从平面白卡升级为带品牌微光的高级卡 — */
.welcome-strip{
  position:relative; overflow:hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c-accent) 5%, var(--c-surface)), var(--c-surface));
  border-color: color-mix(in srgb, var(--c-accent) 16%, var(--c-border));
  box-shadow: var(--ui-shadow-xs);
}
.welcome-strip::before{
  content:""; position:absolute; top:-40px; inset-inline-end:-30px; width:180px; height:180px; border-radius:50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent) 16%, transparent), transparent 70%); pointer-events:none;
}
.welcome-stat-val{ background: var(--c-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* — 首页导航卡：渐变图标 + 更精致的升起与描边发光 — */
.home-cards{ gap:16px; }
.home-card{
  position:relative; border-radius:16px; overflow:hidden;
  box-shadow: var(--ui-shadow-xs);
  transition: transform var(--portal-duration) var(--portal-ease-emphasized), box-shadow var(--portal-duration) var(--portal-ease), border-color var(--portal-duration) var(--portal-ease);
}
.home-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:0;
  background: var(--c-grad); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity var(--portal-duration) var(--portal-ease);
}
.home-card:hover{ transform:translateY(-4px); box-shadow: var(--ui-shadow); border-color:transparent; }
.home-card:hover::after{ opacity:.9; }
.home-card-icon{ box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--c-accent) 70%, transparent); }
.home-card-title{ letter-spacing:-.01em; }

/* — Hero 标题排版更有力量感 — */
.home-banner-title{ letter-spacing:-.02em; line-height:1.08; }
.home-banner-tag{ backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.22); }
.home-banner-btn{ border-radius:11px; font-weight:750; }
.home-banner-btn--primary{ box-shadow:0 10px 24px -10px rgba(0,0,0,.35); }

/* — 用户卡 / 活动流 / 段位卡：统一柔和层级 — */
.home-mine-card, .home-feed, .tier-card, .lb-toolbar{ box-shadow: var(--ui-shadow-xs); border-radius:16px; }
.home-mine-avatar{ box-shadow:0 6px 16px -8px color-mix(in srgb, var(--c-accent) 60%, transparent); }
.home-feed-item{ border-radius:10px; }
.home-feed-item:hover{ background: color-mix(in srgb, var(--c-accent) 6%, var(--c-surface)); }

/* — 通用卡片（战绩/服务器/Bento）升起统一 — */
.feature-card, .server-card, .bento-card, .portal-feature-card, .lb-table{
  border-radius:16px; box-shadow: var(--ui-shadow-xs);
  transition: transform var(--portal-duration) var(--portal-ease-emphasized), box-shadow var(--portal-duration) var(--portal-ease), border-color var(--portal-duration) var(--portal-ease);
}
.feature-card:hover, .server-card:hover, .bento-card:hover, .portal-feature-card:hover{
  transform:translateY(-3px); box-shadow: var(--ui-shadow-sm); border-color: color-mix(in srgb, var(--c-accent) 22%, var(--c-border));
}

/* — 侧栏当前项：渐变指示条 — */
.sidebar-item.active::before{ background: var(--c-grad); }
.sidebar-item.active{ font-weight:700; }
.sidebar-brand-icon{ background: var(--c-grad) !important; }

/* — 排行榜 Hero：渐变遮罩更高级 — */
.lb-hero{ border-radius:18px; }
.lb-hero:not(.has-scene){ background: var(--c-grad) !important; box-shadow:0 16px 40px -20px color-mix(in srgb, var(--c-accent) 60%, transparent); }

/* — 主按钮在门户内也走渐变 — */
.btn-primary{ background: var(--c-grad) !important; box-shadow:0 8px 18px -8px color-mix(in srgb, var(--c-accent) 60%, transparent) !important; }
.btn-primary:hover:not(:disabled){ filter:saturate(108%); }

/* — Tab 选中态更精致 — */
.tab-item.active{ box-shadow: var(--ui-shadow-xs); }

@media (max-width:640px){
  .home-banner{ padding:34px 22px !important; }
  .home-banner-title{ font-size:26px !important; }
}

/* ============================================================
   iOS 灵动层 · v4.1（首页 SPA）
   按压回弹 / 图标微弹 / 弹性进场 / 毛玻璃弹层 —— 让界面"活"起来
   ============================================================ */
:root {
  --ios-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ios-spring-soft: cubic-bezier(.22, 1.18, .36, 1);
  --ios-decel: cubic-bezier(.16, 1, .3, 1);
}
.sidebar-item, .btn, .btn-primary, .btn-secondary, .btn-icon, .btn-sm, .ts-chip,
.tab-item, .user-pill, .home-banner-btn, .home-card, .portal-feature-card,
.lb-hero-btn, .dropdown-item, .home-feed-item, .topbar-action { -webkit-tap-highlight-color: transparent; }

/* — 按压反馈：按下微缩、松手弹回（iOS 招牌手感）— */
.sidebar-item { transition: background .18s var(--ios-decel), color .18s var(--ios-decel), transform .34s var(--ios-spring); }
.sidebar-item:active { transform: scale(.955); transition: transform .1s ease-out; }
.btn:active, .btn-primary:active, .btn-secondary:active, .btn-icon:active, .ts-chip:active,
.tab-item:active, .home-banner-btn:active, .lb-hero-btn:active, .dropdown-item:active,
.topbar-action:active { transform: scale(.93); transition: transform .1s ease-out; }
.user-pill { transition: background .2s var(--ios-decel), transform .34s var(--ios-spring); }
.user-pill:active { transform: scale(.975); transition: transform .1s ease-out; }

/* — 侧栏图标 hover/active 微弹（活的细节）— */
.sidebar-item .sidebar-icon { transition: transform .42s var(--ios-spring); }
.sidebar-item:hover .sidebar-icon { transform: scale(1.16) rotate(-3deg); }
.sidebar-item.active .sidebar-icon { transform: scale(1.1); }

/* — 首页导航卡：弹性上浮 + 图标联动 — */
.home-card { transition: transform .4s var(--ios-spring), box-shadow .3s var(--ios-decel), border-color .3s var(--ios-decel); }
.home-card:hover { transform: translateY(-6px) scale(1.012); }
.home-card:active { transform: translateY(-2px) scale(.99); transition: transform .12s ease-out; }
.home-card-icon { transition: transform .48s var(--ios-spring); }
.home-card:hover .home-card-icon { transform: scale(1.12) rotate(-4deg); }

/* — 按钮 hover 轻浮起 — */
.btn-primary:hover:not(:disabled), .btn-secondary:hover:not(:disabled) { transform: translateY(-1.5px); }
.home-banner-btn:hover { transform: translateY(-2px) scale(1.02); }
.topbar-action:hover { transform: translateY(-1px); }

/* — 首页四张卡错落淡入上浮 — */
@keyframes ios-rise { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }
.home-cards .home-card { animation: ios-rise .58s var(--ios-decel) both; }
.home-cards .home-card:nth-child(1) { animation-delay: .03s; }
.home-cards .home-card:nth-child(2) { animation-delay: .1s; }
.home-cards .home-card:nth-child(3) { animation-delay: .17s; }
.home-cards .home-card:nth-child(4) { animation-delay: .24s; }

/* — 欢迎条 / 活动流卡片 也来一次轻进场 — */
.welcome-strip { animation: ios-rise .6s var(--ios-decel) both; }
.home-mine-card, .home-feed { animation: ios-rise .62s var(--ios-decel) .08s both; }

/* — 侧栏徽章 pop 弹入 — */
@keyframes ios-badge-pop { 0% { transform: scale(0); } 68% { transform: scale(1.18); } 100% { transform: scale(1); } }
.sidebar-badge { animation: ios-badge-pop .44s var(--ios-spring) both; }

/* — 毛玻璃：模态背景 + 顶栏下拉弹层（真正叠在内容上，材质感明显）— */
.modal-overlay, .modal-backdrop, .modal-mask { backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); }
.dropdown, .topbar-popover { backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); background: color-mix(in srgb, var(--c-surface) 82%, transparent) !important; }
.topbar { background: color-mix(in srgb, var(--c-surface) 88%, transparent); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); }

/* — 模态弹性进场（覆盖原线性 pop）— */
@keyframes modal-pop-in { 0% { opacity: 0; transform: translateY(22px) scale(.94); } 100% { opacity: 1; transform: none; } }
.modal-fade-enter-active .modal { animation: modal-pop-in .46s var(--ios-spring-soft) !important; }

/* — 更柔的圆角 — */
.home-card, .feature-card, .bento-card, .home-mine-card, .home-feed, .server-card, .portal-feature-card { border-radius: 18px; }
.btn, .btn-primary, .btn-secondary, .btn-icon { border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
  .home-cards .home-card, .welcome-strip, .home-mine-card, .home-feed, .sidebar-badge { animation: none !important; }
  *:active { transform: none !important; }
  .sidebar-item:hover .sidebar-icon, .home-card:hover .home-card-icon { transform: none !important; }
}

/* ============================================================
   细节打磨层 · v4.2（首页 SPA）—— 顺手体验雕琢
   ============================================================ */

/* — 精致滚动条：主内容区 / 侧栏 / 弹窗体 统一细圆悬浮 — */
.view-container, .sidebar, .modal-body, .anno-list, .emoji-picker-body {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--c-text3) 40%, transparent) transparent;
  overscroll-behavior: contain;              /* 防滚动链 */
}
.view-container { scroll-behavior: smooth; }
.view-container::-webkit-scrollbar, .modal-body::-webkit-scrollbar, .anno-list::-webkit-scrollbar { width: 11px; }
.view-container::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb, .anno-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--c-text3) 32%, transparent);
  border-radius: 8px; border: 3px solid transparent; background-clip: padding-box;
  transition: background-color .2s var(--ios-decel, ease);
}
.view-container::-webkit-scrollbar-thumb:hover, .sidebar::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--c-text3) 58%, transparent); background-clip: padding-box; }
.view-container::-webkit-scrollbar-track, .sidebar::-webkit-scrollbar-track { background: transparent; }

/* — 锚点吸顶偏移（顶栏高度）— */
:where([id]) { scroll-margin-top: calc(var(--topbar-h, 60px) + 14px); }

/* — 交互元素禁止选中文本（顺手）— */
.sidebar-item, .btn, .btn-primary, .btn-secondary, .btn-icon, .ts-chip, .tab-item,
.user-pill, .home-banner-btn, .home-card, .portal-feature-card, .lb-hero-btn,
.dropdown-item, .topbar-action, .sidebar-brand, .sidebar-badge, .home-card-icon,
.status-tag, .nav-link { -webkit-user-select: none; user-select: none; }
.sidebar-item, .btn, .ts-chip, .tab-item, .topbar-action, .nav-link, .dropdown-item { cursor: pointer; }

/* — 原生表单控件品牌着色 — */
:root { accent-color: var(--c-accent); }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--c-accent); }

/* — 占位符柔和 — */
.form-input::placeholder, textarea::placeholder, input::placeholder { color: var(--c-text3); opacity: .85; }

/* — 图标/头像不可拖拽出鬼影 — */
.sidebar-icon svg, .user-avatar img, .home-card-icon svg, .sidebar-brand-icon { -webkit-user-drag: none; }

/* — 活动流条目 hover 更跟手（轻微内移而非突兀位移）— */
.home-feed-item { transition: background .18s var(--ios-decel), transform .3s var(--ios-spring); }
.home-feed-item:active { transform: scale(.99); transition: transform .1s ease-out; }