/* 基础变量与全局重置 / 机身框架 / 加载页
   —— 由 styles.css 第 1–164 行原样切分，规则与顺序未改动。 */
/* styles.css —— 由 index.html 内联 <style> 抽取，样式原样保留
   顺序与原文一致：① 全局/基础样式 ② 商店·日程·拍立得·组件等页面样式 */

/* ================== ⭐ 新增：修复拖拽和长按（全局生效） ================== */
.app-item, .profile-card, .chat-bubble-widget, .custom-widget-desktop {
  touch-action: none !important; /* 阻止浏览器默认的滚动和长按菜单 */
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
}

/* ===== 日程 App 配色变量（截图对应色） ===== */
:root{
  --blue-1: #F0F6FF;
  --blue-2: #C5DCF7;
  --blue-3: #A8CCF0;
  --pink-2: #FFE0EC;
  --pink-3: #FF9CB9;
  --ink: #2C3340;
  --gray: #8A93A3;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
:root{
  --grid-unit:8px;
  --font-caption:12px;--font-body-sm:14px;--font-body-base:16px;
  --font-h3:20px;--font-h2:24px;--font-h1:32px;
  --line-height-body:1.6;--line-height-heading-sm:1.4;--line-height-heading-lg:1.2;
  
  /* 核心主题变量 */
  --color-primary:#FFD4E8;
  --color-secondary:#D4E8FF;
  --color-bg-glass:rgba(255,255,255,0.25);
  --color-text-primary:#333;
  --color-text-secondary:#666;
  --color-text-white:#fff;
  
  /* 气泡与交互变量 */
  --bubble-user-bg:#d4e8ff;
  --bubble-friend-bg:rgba(255,255,255,0.95);
  --color-accent:#FF9CB9;
  --border-color:rgba(255,255,255,0.3);
  
  --radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-xl:32px;
  --spacing-xs:8px;--spacing-sm:16px;--spacing-md:24px;--spacing-lg:32px;--spacing-xl:48px;
}
html,body{
  width:100%;height:100%;overflow:hidden;
  font-family:'Inter','SF Pro Display',-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
#app{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#1a1a1a;overflow:hidden;}

.phone-frame{
  width:100%;max-width:430px;height:100vh;max-height:932px;
  background:linear-gradient(160deg,var(--color-primary) 0%,var(--color-secondary) 100%);
  border-radius:40px;
  box-shadow:0 24px 72px rgba(0,0,0,0.4);
  position:relative;overflow:hidden;
  margin:24px auto;
}
@media (max-width:768px){
  .phone-frame{width:100%;height:100vh;max-height:none;border-radius:0;margin:0;}
}

/* 通用按钮图标 */
.icon-btn{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,0.5);
  backdrop-filter:blur(10px);
  border:none;display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
  transition:all 0.2s ease;
}
.icon-btn svg{width:18px;height:18px;fill:#333;}
.icon-btn:active{transform:scale(0.9);}
.icon-btn.dark{background:rgba(0,0,0,0.5);}
.icon-btn.dark svg{fill:#fff;}

/* Loading */
.loading-screen{
  position:absolute;inset:0;
  background:linear-gradient(160deg,var(--color-primary) 0%,var(--color-secondary) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:10000;
}
.loading-text{
  font-size:40px;color:#fff;font-weight:300;
  margin-bottom:64px;letter-spacing:0.1em;
}
.progress-container{
  width:240px;height:8px;background:rgba(255,255,255,0.2);
  border-radius:8px;overflow:hidden;margin-bottom:16px;
}
.progress-bar{height:100%;background:#fff;border-radius:8px;transition:width 0.3s ease;}
.progress-text{font-size:14px;color:rgba(255,255,255,0.9);font-weight:500;}
.enter-button{
  position:absolute;bottom:120px;
  width:80px;height:80px;border-radius:50%;
  background:rgba(255,255,255,0.3);backdrop-filter:blur(20px);
  border:2px solid rgba(255,255,255,0.5);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;transform:scale(0.8);
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.enter-button svg{width:32px;height:32px;fill:#fff;}
.enter-button.show{opacity:1;transform:scale(1);}

/* 控制中心 */
.cc-mask{
  position:absolute;inset:0;z-index:9900;
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.cc-panel{
  background:rgba(30,30,35,0.88);
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  border-radius:0 0 28px 28px;
  padding:16px 16px 24px;
  color:#fff;
  transform:translateY(-100%);
  transition:transform 0.25s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 12px 40px rgba(0,0,0,0.4);
}
.cc-handle{
  width:40px;height:4px;background:rgba(255,255,255,0.35);
  border-radius:2px;margin:0 auto 14px;
}
.cc-grid{display:flex;flex-direction:column;gap:12px;}
.cc-card{
  background:rgba(255,255,255,0.1);
  border-radius:18px;padding:14px 16px;
}
.cc-slider-card{display:flex;align-items:center;gap:12px;}
.cc-label{font-size:13px;font-weight:600;min-width:52px;}
.cc-slider{
  flex:1;-webkit-appearance:none;appearance:none;
  height:6px;border-radius:3px;background:rgba(255,255,255,0.2);
  outline:none;
}
.cc-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(0,0,0,0.3);
  cursor:pointer;
}
.cc-value{font-size:11px;color:rgba(255,255,255,0.7);min-width:34px;text-align:right;}
.cc-toggles{display:flex;gap:10px;}
.cc-toggle{
  flex:1;background:rgba(255,255,255,0.1);
  border-radius:16px;padding:12px 8px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;transition:all 0.2s;
  border:1px solid transparent;
}
.cc-toggle.on{background:rgba(255,212,232,0.35);border-color:rgba(255,212,232,0.5);}
.cc-toggle:active{transform:scale(0.95);}
.cc-toggle-icon{font-size:20px;}
.cc-toggle-name{font-size:11px;color:rgba(255,255,255,0.85);}
.cc-tip{
  text-align:center;font-size:11px;color:rgba(255,255,255,0.45);
  margin-top:24px;
}

/* ============================================================
   全局滚动条：平时隐形，鼠标移入可滚动区域时浮现 4px 细条
   ------------------------------------------------------------
   原样式只给 14 个容器单独写了 ::-webkit-scrollbar{display:none}，
   结果是"哪能滚"完全没有提示，漏写的容器又露出 15px 系统灰条。
   这里统一改成"悬停显形"：
     · 常态 thumb 全透明 → 视觉上等同隐藏
     · 鼠标进入任意可滚动区域（含其子元素）→ 4px 圆角细条浮现
     · 指针直接落在细条上 → 再加深一档，方便拖动
   display:block!important 用来压过上面那些历史 display:none，
   否则这些老容器永远不会显形，各处行为不一致。
   Firefox / 旧 Edge 没有滚动条伪元素，退化为始终隐藏（同原状）。
   ============================================================ */
*{ scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar{ width: 4px; height: 4px; display: block !important; }
*::-webkit-scrollbar-track{ background: transparent !important; }
*::-webkit-scrollbar-thumb{ background: transparent !important; border-radius: 2px; }
:hover::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.22) !important; }
*::-webkit-scrollbar-thumb:hover{ background: rgba(0,0,0,.35) !important; }