/* =========================================================
   拾光小记 - Shiguang Feature Styles
   ========================================================= */
#shiguang-page .page-body { padding: 0; overflow-y: auto; }
.sg-char-select { display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid #f0e8df; }
.sg-char-select select { flex:1; padding:8px 12px; border-radius:10px; border:1px solid #eee; font-size:14px; background:#fff; }
.sg-tabs { display:flex; border-bottom:1px solid #f0e8df; }
.sg-tab { flex:1; text-align:center; padding:12px 0; font-size:14px; color:#999; cursor:pointer; position:relative; }
.sg-tab.active { color:#333; font-weight:600; }
.sg-tab.active::after { content:''; position:absolute; bottom:0; left:30%; right:30%; height:2px; background:#d4a373; border-radius:2px; }
.sg-panel { display:none; padding:16px; }
.sg-panel.active { display:block; }
.sg-plan-list { display:flex; flex-direction:column; gap:12px; }
.sg-plan-card { background:#fff; border-radius:12px; padding:14px 16px; box-shadow:0 2px 8px rgba(0,0,0,0.05); display:flex; align-items:center; justify-content:space-between; }
.sg-plan-info { flex:1; }
.sg-plan-title { font-size:15px; font-weight:500; color:#333; }
.sg-plan-streak { font-size:12px; color:#999; margin-top:4px; }
.sg-plan-btn { padding:6px 14px; border-radius:16px; font-size:13px; border:none; cursor:pointer; }
.sg-plan-btn.done { background:#f0f0f0; color:#aaa; }
.sg-plan-btn.todo { background:#d4a373; color:#fff; }
.sg-plan-btn.todo:active { opacity:0.8; }
.sg-plan-del { font-size:12px; color:#ccc; margin-left:8px; cursor:pointer; }
.sg-plan-del:active { color:#e74c3c; }
.sg-add-plan { margin-top:16px; display:flex; gap:8px; }
.sg-add-plan input { flex:1; padding:10px 14px; border:1px solid #eee; border-radius:10px; font-size:14px; outline:none; }
.sg-add-plan button { padding:10px 16px; background:#d4a373; color:#fff; border:none; border-radius:10px; font-size:14px; cursor:pointer; }
.sg-calendar { margin-top:20px; }
.sg-cal-header { display:flex; align-items:center; justify-content:space-between; padding:0 4px; margin-bottom:12px; }
.sg-cal-header span { font-size:15px; font-weight:600; color:#333; }
.sg-cal-header button { background:none; border:none; font-size:18px; cursor:pointer; color:#666; }
.sg-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center; }
.sg-cal-day { font-size:11px; color:#999; padding:4px 0; }
.sg-cal-cell { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:12px; color:#666; border-radius:50%; position:relative; }
.sg-cal-cell.today { font-weight:700; color:#d4a373; }
.sg-cal-cell.checked::after {
  content:'';
  position:absolute;
  width:10px; height:10px;
  bottom:0px;
  left:50%; transform:translateX(-50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g><circle cx='12' cy='12' r='2.6' fill='%23f7d488'/><ellipse cx='12' cy='6' rx='3.2' ry='4.2' fill='%23ff6b81'/><ellipse cx='18' cy='12' rx='4.2' ry='3.2' fill='%23ff6b81'/><ellipse cx='12' cy='18' rx='3.2' ry='4.2' fill='%23ff6b81'/><ellipse cx='6' cy='12' rx='4.2' ry='3.2' fill='%23ff6b81'/><ellipse cx='8' cy='8' rx='3' ry='3.6' fill='%23ff8aa0' transform='rotate(-45 8 8)'/><ellipse cx='16' cy='8' rx='3' ry='3.6' fill='%23ff8aa0' transform='rotate(45 16 8)'/><ellipse cx='8' cy='16' rx='3' ry='3.6' fill='%23ff8aa0' transform='rotate(45 8 16)'/><ellipse cx='16' cy='16' rx='3' ry='3.6' fill='%23ff8aa0' transform='rotate(-45 16 16)'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 分享面板 */
.sg-share-mask { position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:99999; display:flex; align-items:flex-end; justify-content:center; animation: sgFadeIn 0.2s ease; }
@keyframes sgFadeIn { from { opacity:0; } to { opacity:1; } }
.sg-share-panel { width:100%; max-width:480px; background:#fff; border-top-left-radius:18px; border-top-right-radius:18px; padding:16px 0 12px; animation: sgSlideUp 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes sgSlideUp { from { transform:translateY(100%); } to { transform:translateY(0); } }
.sg-share-title { text-align:center; font-size:15px; font-weight:600; color:#333; padding:0 16px 14px; border-bottom:1px solid #f0f0f0; }
.sg-share-list { max-height:50vh; overflow-y:auto; padding:10px 8px; display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; }
.sg-share-item { display:flex; flex-direction:column; align-items:center; padding:8px 4px; border-radius:10px; cursor:pointer; transition:background 0.15s; }
.sg-share-item:active { background:#f5f5f5; }
.sg-share-avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; background:#eee; margin-bottom:6px; }
.sg-share-name { font-size:12px; color:#444; text-align:center; max-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sg-share-cancel { text-align:center; padding:14px; font-size:14px; color:#666; cursor:pointer; border-top:1px solid #f0f0f0; }

/* 评语框 */
.sg-view-comment { margin-top:18px; background:rgba(255, 250, 240, 0.85); border:1px dashed #d4a373; border-radius:12px; padding:14px 14px 16px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.sg-comment-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.sg-comment-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; background:#eee; flex-shrink:0; }
.sg-comment-meta { flex:1; min-width:0; }
.sg-comment-name { font-size:13px; font-weight:600; color:#5a4a3a; }
.sg-comment-time { font-size:11px; color:#999; margin-top:2px; }
.sg-comment-text { font-size:14px; line-height:1.7; color:#333; white-space:pre-wrap; word-break:break-word; padding-left:46px; }

/* 重新生成评语按钮 */
.sg-regen-btn { background:#fff; border:1px solid #e0c8a8; color:#a07a4a; padding:6px 16px; border-radius:16px; font-size:12px; cursor:pointer; transition:all 0.15s; }
.sg-regen-btn:active { background:#f5ebd5; }

/* 字体 URL 输入表单 */
.sg-font-url-form { margin-top:12px; background:rgba(0,0,0,0.02); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.sg-font-url-tip { font-size:11px; color:#999; }
.sg-font-input { width:100%; box-sizing:border-box; padding:8px 10px; border:1px solid #e0e0e0; border-radius:8px; font-size:13px; outline:none; background:#fff; }
.sg-font-input:focus { border-color:#d4a373; }
.sg-font-chip { position:relative; padding-right:22px; }
.sg-font-del { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:14px; height:14px; line-height:12px; text-align:center; font-size:14px; color:#999; cursor:pointer; }
.sg-font-del:hover { color:#e74c3c; }
.sg-journal-list { display:flex; flex-direction:column; gap:12px; }
.sg-journal-card { background:#fff; border-radius:12px; padding:12px; box-shadow:0 2px 8px rgba(0,0,0,0.05); cursor:pointer; }
.sg-journal-card-date { font-size:12px; color:#999; margin-bottom:6px; }
.sg-journal-card-preview { font-size:14px; color:#444; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sg-journal-card-imgs { display:flex; gap:6px; margin-top:8px; }
.sg-journal-card-imgs img { width:48px; height:48px; object-fit:cover; border-radius:6px; }
.sg-add-journal { margin-top:16px; text-align:center; }
.sg-add-journal button { padding:10px 24px; background:#d4a373; color:#fff; border:none; border-radius:10px; font-size:14px; cursor:pointer; }
.sg-tpl-select { display:flex; gap:12px; padding:12px 0; justify-content:center; }
.sg-tpl-item { padding:8px 16px; border:1px solid #ddd; border-radius:8px; font-size:13px; cursor:pointer; color:#666; }
.sg-tpl-item.active { border-color:#d4a373; color:#d4a373; font-weight:600; }
.sg-journal-canvas { position:relative; width:100%; min-height:480px; border-radius:12px; overflow:hidden; background:#fdf8f0; padding:0; box-sizing:border-box; }
.sg-journal-canvas.custom-bg { background-size:cover; background-position:center; background-repeat:no-repeat; }
.sg-img-slot { border:2px dashed #ccc; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; position:relative; color:#bbb; font-size:12px; background:rgba(255,255,255,0.5); }
.sg-img-slot img { width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; }
.sg-img-slot input { display:none; }
.sg-text-area { width:100%; min-height:80px; border:none; background:rgba(255,255,255,0.6); border-radius:8px; padding:10px; font-size:14px; line-height:1.8; resize:none; outline:none; margin-top:12px; box-sizing:border-box; }
.sg-layout-2 { display:grid; grid-template-rows:60% 40%; gap:10px; height:320px; }
.sg-layout-3 { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:10px; height:320px; }
.sg-layout-3 .sg-img-slot:first-child { grid-row:1/3; }
.sg-layout-4 { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:10px; height:320px; }
.sg-edit-actions { display:flex; gap:10px; padding:16px 0; justify-content:center; }
.sg-edit-actions button { padding:10px 24px; border:none; border-radius:10px; font-size:14px; cursor:pointer; }
.sg-edit-actions .sg-save-btn { background:#d4a373; color:#fff; }
.sg-edit-actions .sg-cancel-btn { background:#f0f0f0; color:#666; }
.sg-settings-section { padding:16px; }
.sg-settings-section h4 { font-size:14px; color:#333; margin:0 0 10px; }
.sg-font-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.sg-font-chip { padding:6px 12px; border:1px solid #ddd; border-radius:16px; font-size:13px; cursor:pointer; }
.sg-font-chip.active { border-color:#d4a373; color:#d4a373; }
.sg-upload-btn { display:inline-block; padding:8px 16px; background:#f5f0eb; border:1px dashed #d4a373; border-radius:8px; font-size:13px; color:#d4a373; cursor:pointer; margin-top:8px; }
.sg-upload-btn input { display:none; }
.sg-bg-preview { width:60px; height:60px; border-radius:8px; border:1px solid #eee; object-fit:cover; cursor:pointer; }
.sg-view-canvas { position:relative; width:100%; min-height:500px; border-radius:12px; overflow:hidden; background:#fdf8f0; padding:16px; box-sizing:border-box; }
.sg-view-canvas.custom-bg { background-size:cover; background-position:center; }
.sg-view-text { font-size:14px; line-height:2; color:#444; padding:12px 0; white-space:pre-wrap; }
.sg-view-imgs { display:grid; gap:10px; }
.sg-view-imgs img { width:100%; border-radius:8px; object-fit:cover; }
/* 自由画布元素 */
.sg-canvas-el { position:absolute; cursor:grab; user-select:none; -webkit-user-drag:none; touch-action:none; }
.sg-canvas-el:active { cursor:grabbing; z-index:10; }
.sg-canvas-el img { width:100%; height:100%; object-fit:contain; pointer-events:none; -webkit-user-drag:none; user-select:none; }
.sg-canvas-text { background:rgba(255,255,255,0.7); border-radius:6px; padding:4px; }
.sg-el-textbox { width:100%; height:100%; outline:none; font-size:13px; line-height:1.6; overflow:hidden; cursor:text; }
.sg-el-del { position:absolute; top:-8px; right:-8px; width:18px; height:18px; background:#e74c3c; color:#fff; border-radius:50%; font-size:11px; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:opacity 0.2s; }
.sg-canvas-el:hover .sg-el-del { opacity:1; }
.sg-canvas-el.selected { outline:1.5px dashed #f0a500; outline-offset:2px; }
.sg-canvas-el.selected .sg-el-del { opacity:1; }
.sg-el-resize { position:absolute; right:-9px; bottom:-9px; width:20px; height:20px; background:#f0a500; border:2px solid #fff; border-radius:50%; cursor:nwse-resize; opacity:0; transition:opacity 0.2s; touch-action:none; }
.sg-canvas-el:hover .sg-el-resize, .sg-canvas-el.selected .sg-el-resize { opacity:1; }

/* 贴纸面板 */
.sg-sticker-tabs { display:flex !important; flex-direction:row !important; gap:6px; overflow-x:auto; padding:8px 12px; border-bottom:1px solid #f5f5f5; -webkit-overflow-scrolling:touch; }
.sg-sticker-tab { padding:4px 10px; font-size:11px; color:#999; white-space:nowrap; cursor:pointer; border-radius:12px; flex-shrink:0; }
.sg-sticker-tab.active { background:#d4a373; color:#fff; }
.sg-sticker-grid { display:flex; flex-wrap:wrap; gap:8px; padding:10px 12px; overflow-y:auto; max-height:120px; }
.sg-sticker-item { width:56px; height:56px; cursor:pointer; border-radius:6px; overflow:hidden; flex-shrink:0; }
.sg-sticker-item img { width:100%; height:100%; object-fit:contain; pointer-events:none; -webkit-user-drag:none; }
.sg-sticker-item:active { transform:scale(0.9); }