/* ========================================= */
/* 文件：shared-ui.css                        */
/* 功能：跨页面共用的通用小零件 —— 输入面板、  */
/*       滑块控件、开关按钮、骨架屏加载占位，   */
/*       不管在哪个页面都能反复拿出来用         */
/* ========================================= */

/* --- 星空瓶输入面板 --- */
.sb-add-tag-panel,
.sb-add-modal {
    position: absolute;
    left: 0; right: 0;
    z-index: 50;
    background: rgba(14, 10, 28, 0.72);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-top: 0.5px solid rgba(162,155,254,0.28);
    border-radius: 20px 20px 0 0;
    transition: bottom 0.3s cubic-bezier(0.4,0,0.2,1);
    padding: 14px 20px max(36px, calc(env(safe-area-inset-bottom) + 16px));
}
.sb-add-tag-panel { bottom: -215px; height: 215px; }
.sb-add-tag-panel.sb-open { bottom: 0; }
.sb-add-modal { bottom: -345px; height: 345px; }
.sb-add-modal.sb-open { bottom: 0; }

/* --- 面板内部零件 --- */
.sb-modal-handle { width: 36px; height: 3px; background: rgba(162,155,254,0.2); border-radius: 2px; margin: 0 auto 14px; }
.sb-modal-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.sb-modal-star { display: inline-block; animation: sbTwinkleStar 4s ease-in-out infinite; }
.sb-modal-title { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; background: linear-gradient(90deg,#cbbbf9,#ffb37a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.sb-modal-label { font-size: 10px; color: rgba(203,187,249,0.4); margin-bottom: 8px; letter-spacing: 0.05em; }

/* --- 文本输入框 --- */
.sb-modal-textarea {
    width: 100%; height: 80px;
    background: rgba(162,155,254,0.08);
    border: 1px solid rgba(162,155,254,0.4);
    box-shadow: 0 0 8px rgba(162,155,254,0.2);
    border-radius: 16px;
    color: rgba(255,255,255,0.82); font-size: 12px;
    padding: 12px 14px; resize: none; outline: none;
    font-family: inherit; line-height: 1.6; margin-bottom: 12px;
}
.sb-modal-textarea::placeholder { color: rgba(255,255,255,0.2); }
.sb-modal-textarea:focus { border-color: rgba(255,179,122,0.4); box-shadow: 0 0 10px rgba(255,179,122,0.1); }

/* --- 标签输入框 --- */
.sb-tag-input {
    width: 90%; margin: 0 auto 14px; display: block;
    background: rgba(162,155,254,0.08);
    border: 1px solid rgba(162,155,254,0.4);
    box-shadow: 0 0 8px rgba(162,155,254,0.2);
    border-radius: 30px;
    color: rgba(255,255,255,0.82); font-size: 12px;
    padding: 10px 16px; outline: none; font-family: inherit;
}
.sb-tag-input::placeholder { color: rgba(255,255,255,0.2); }

/* --- 下拉选择器 --- */
.sb-select-row { display: flex; gap: 8px; margin-bottom: 16px; }
.sb-custom-select {
    flex: 1; position: relative;
    background: rgba(162,155,254,0.06);
    border: 0.5px solid rgba(162,155,254,0.25);
    border-radius: 30px; overflow: hidden;
}
.sb-custom-select select {
    width: 100%; appearance: none; -webkit-appearance: none;
    background: transparent; border: none; outline: none;
    color: rgba(203,187,249,0.8); font-size: 11px;
    padding: 9px 28px 9px 14px; font-family: inherit; cursor: pointer;
}
.sb-custom-select select option { background: #0a0818; color: rgba(255,255,255,0.8); }
.sb-custom-select::after { content: '\25BE'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 10px; color: rgba(162,155,254,0.4); pointer-events: none; }

/* --- 面板按钮 --- */
.sb-modal-btn-row { display: flex; gap: 8px; }
.sb-modal-btn {
    flex: 1; height: 38px; border-radius: 30px;
    font-size: 11px; font-weight: 600; cursor: pointer;
    font-family: inherit; transition: all 0.2s; letter-spacing: 0.05em; border: none;
}
.sb-modal-btn:hover { transform: translateY(-2px); }
.sb-cancel { background: transparent; color: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.12) !important; }
.sb-save { background: linear-gradient(90deg,rgba(162,155,254,0.15),rgba(255,179,122,0.15)); color: #ffb37a; border: 1px solid rgba(255,179,122,0.3) !important; box-shadow: inset 0 0 10px rgba(162,155,254,0.1); }

/* --- 滑块控件（紫橙渐变轨道） --- */
.evol-slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 6px; background: rgba(0,0,0,0.3);
  border-radius: 3px; outline: none; position: relative;
}
.evol-slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #a29bfe, #ffb37a);
}
.evol-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  margin-top: -7px; border: 2px solid rgba(162, 155, 254, 0.5);
}

/* --- 呼吸动画（加载中指示灯） --- */
@keyframes breathe { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } }

/* --- 开关按钮 --- */
.toggle-switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.2); transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 24px; width: 24px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
input:checked + .slider { background-color: #a29bfe; }
input:checked + .slider:before { transform: translateX(22px); }
.sm-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 5px 12px; border-radius: 6px; font-size: 12px; }

/* --- 骨架屏加载占位 --- */
.skeleton-item {
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  margin-bottom: 10px;
}

/* --- 骨架屏闪光动画 --- */
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- 骨架屏在关键词列表里的特别处理 --- */
.kw-list::-webkit-scrollbar { display: none; }
.kw-list .skeleton-item {
  width: 100%;
  flex-shrink: 0;
}