*{margin:0;padding:0;box-sizing:border-box}
/* ===== Design Tokens ===== */
:root{
  --text-tertiary:#999;
  --bg-page:#f5f6fa;
  --bg-card:#fff;
  --space-xs:4px;
  --space-sm:8px;
  --space-md:16px;
  --space-lg:24px;
  --fs-2xs:0.625rem;  /* 10px - badge, tag */
  --fs-xs:0.75rem;    /* 12px - meta, footnote */
  --fs-2sm:0.8125rem; /* 13px - table data, secondary */
  --fs-sm:0.875rem;   /* 14px - body, buttons (unchanged) */
  --fs-base:0.9375rem;/* 15px - content text (added) */
  --fs-md:1rem;       /* 16px - heading, card title (unchanged) */
  --fs-lg:1.125rem;   /* 18px - section title (resized from 20px) */
  --fs-2xl:1.25rem;   /* 20px - page title (resized from --fs-lg) */
  --font-family:var(--font-family);
  /* Breakpoints (for documentation & JS reference; CSS vars cannot be used inside @media directly) */
  --breakpoint-xs:374px;
  --breakpoint-sm:480px;
  --breakpoint-md:640px;
  --breakpoint-lg:768px;
  /* Extended colors */
  --text-deep:#333;
  --text-mid:#666;
  --text-light:#888;
  --bg-muted:#f0f0f0;
  --bg-hover:#f8f9fa;
  --border-light:#e0e0e0;
  --success-light:#f6ffed;
  --success-text:#52c41a;
  --danger-light:#fff1f0;
  --warning-light:#fff7e6;
  --warning-text:#fa8c16;
}
html,body{width:100%;height:100%;overflow:hidden;font-family:var(--font-family)}
#app{height:100vh;display:flex;flex-direction:column;position:relative}
[v-cloak]{display:none!important}


/* ===== Component Base (bk-* unified) ===== */
.bk-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--mask,rgba(0,0,0,0.45));z-index:99999;display:flex;align-items:center;justify-content:center;animation:bk-fadeIn .15s ease}
.bk-modal{width:90%;max-width:35rem;max-height:85vh;background:rgba(255,255,255,0.65);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,0.3);border-radius:var(--radius-lg,0.75rem);box-shadow:var(--shadow-lg,0 12px 48px rgba(0,0,0,0.15));display:flex;flex-direction:column;overflow:hidden;animation:bk-scaleIn .2s ease}
.bk-modal-sm{max-width:25rem}
.bk-modal-lg{max-width:45rem}
.bk-modal-hd{display:flex;align-items:center;justify-content:space-between;padding:0.875rem 1.25rem;border-bottom:1px solid var(--border,rgba(0,0,0,0.08))}
.bk-modal-hd .title{font-weight:600;font-size:var(--fs-md,1rem);color:var(--text-primary,#333)}
.bk-modal-hd .close{width:1.75rem;height:1.75rem;border:none;background:transparent;border-radius:var(--radius-sm,0.25rem);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-tertiary,#999);transition:var(--transition,.2s ease);font-size:var(--fs-lg)}
.bk-modal-hd .close:hover{background:rgba(0,0,0,0.04);color:var(--text-primary,#1a1a2e)}
.bk-modal-bd{padding:1.25rem;overflow-y:auto;flex:1}
.bk-modal-ft{display:flex;justify-content:flex-end;gap:var(--space-sm,0.5rem);padding:0.75rem 1.25rem;border-top:1px solid var(--border,rgba(0,0,0,0.08))}
.bk-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.375rem;padding:0.5rem 1.125rem;border:1px solid transparent;border-radius:var(--radius-md,0.5rem);font-size:var(--fs-sm,0.875rem);font-weight:500;line-height:1.4;cursor:pointer;transition:var(--transition,.2s ease);white-space:nowrap;user-select:none}
.bk-btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.bk-btn-primary{background:var(--primary,#166534);color:#fff}
.bk-btn-primary:hover{background:var(--primary-hover,#4a7fff)}
.bk-btn-ghost{background:transparent;color:var(--text-secondary,#555);border-color:var(--border,rgba(0,0,0,0.08))}
.bk-btn-ghost:hover{color:var(--primary,#166534);border-color:var(--primary,#166534);background:var(--primary-bg,rgba(22,101,52,0.06))}
@keyframes bk-fadeIn{from{opacity:0}to{opacity:1}}
@keyframes bk-scaleIn{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}
.bk-input{width:100%;padding:0.625rem 0.875rem;border:1px solid var(--border,rgba(0,0,0,0.08));border-radius:var(--radius-md,0.5rem);font-size:var(--fs-sm,0.875rem);font-family:inherit;outline:none;background:var(--bg-card,#fff);color:var(--text-primary,#333);box-sizing:border-box}
.bk-input:focus{border-color:var(--primary,#166534);box-shadow:0 0 0 3px rgba(22,101,52,0.08)}
.bk-form-row{display:flex;flex-direction:column;gap:0.375rem;margin-bottom:0.875rem}
.bk-form-row:last-child{margin-bottom:0}
.bk-form-label{font-size:var(--fs-sm,0.875rem);font-weight:600;color:var(--text-secondary,#555);display:flex;align-items:center;gap:0.375rem}
.bk-form-label i{color:var(--primary,#166534);font-size:var(--fs-xs)}
.bk-form-select-wrap{position:relative}
.bk-form-select-wrap .bk-input{padding-right:2.25rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;min-height:2.5rem}
.bk-form-select-arrow{position:absolute;right:0.875rem;top:50%;transform:translateY(-50%);color:var(--text-tertiary,#999);font-size:var(--fs-2xs);pointer-events:none}
.bk-form-preview{border:1px solid rgba(var(--primary-rgb),0.12);border-radius:var(--radius-md,0.5rem);background:var(--primary-bg,rgba(22,101,52,0.04));overflow:hidden;position:relative}
.bk-form-preview-tag{position:absolute;top:0;left:0;background:var(--primary,#166534);color:#fff;font-size:var(--fs-2xs);padding:0.125rem 0.5rem;border-radius:0 0 0.5rem 0;font-weight:600}
.bk-form-preview-body{padding:0.875rem 1rem 0.75rem;font-size:var(--fs-sm,0.875rem);color:var(--text-secondary,#555);line-height:1.7;max-height:8.75rem;overflow-y:auto;white-space:pre-wrap;word-break:break-all}
.bk-form-preview-body::-webkit-scrollbar{width:0.25rem}
.bk-form-preview-body::-webkit-scrollbar-thumb{background:rgba(var(--primary-rgb),0.2);border-radius:0.125rem}
.bk-btn-danger{background:#ff4d4f;color:#fff;border-color:#ff4d4f}
.bk-btn-danger:hover{background:#ff7875;border-color:#ff7875}
.bk-btn-sm{padding:0.3125rem 0.75rem;font-size:var(--fs-xs,0.75rem)}

.bk-btn-xs{padding:0.25rem 0.5rem;font-size:var(--fs-2xs)}
/* Toast */
.toast-wrap{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:99999;display:flex;flex-direction:column;align-items:center;gap:0.5rem;pointer-events:none}
.toast{pointer-events:auto;padding:0.625rem 1.125rem;border-radius:var(--radius-md);font-size:var(--fs-sm);box-shadow:var(--shadow);display:flex;align-items:center;gap:0.5rem;animation:toast-in .3s ease}
.toast-success{background:#f6ffed;color:var(--success);border:1px solid #b7eb8f}
.toast-warning{background:#fffbe6;color:var(--warning);border:1px solid #ffe58f}
.toast-error{background:#fff1f0;color:var(--danger);border:1px solid #ffa39e}
.toast-info{background:var(--primary-bg);color:var(--info);border:1px solid var(--primary-border)}
@keyframes toast-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}

/* Steps */
.steps{display:flex;gap:0.5rem;margin-bottom:1.25rem;padding:0.625rem;background:rgba(255,255,255,0.5);border-radius:var(--radius-md)}
.steps span{flex:1;text-align:center;padding:0.5rem;font-size:var(--fs-sm);color:var(--text-tertiary);border-radius:var(--radius-sm);background:rgba(0,0,0,0.02);transition:.2s}
.steps span.on{background:rgba(var(--primary-rgb),0.12);color:var(--primary);font-weight:600}
.steps span.clickable{cursor:pointer}
.steps span.clickable:hover{background:var(--primary-bg)}
/* ===== Topbar ===== */
.topbar{display:flex;align-items:center;background:linear-gradient(135deg,rgba(var(--primary-rgb,22,101,52),0.75),rgba(var(--primary-rgb,22,101,52),0.85));padding:0 0.75rem;height:3.25rem;flex-shrink:0;gap:0.25rem;z-index:1000;box-shadow:0 1px 8px rgba(0,0,0,0.15);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.topbar .logo{cursor:pointer;display:flex;align-items:center;gap:0.375rem;flex-shrink:0;position:relative}
.topbar .logo span{color:#fff;font-size:var(--fs-2xl);font-weight:bold;white-space:nowrap;display:flex;align-items:center;gap:0.375rem}
.topbar .logo-img{width:1.75rem;height:1.75rem;object-fit:contain;border-radius:0.25rem}
.topbar .tabs{display:flex;gap:0.125rem;flex:1;overflow-x:auto;-webkit-overflow-scrolling:touch}
.topbar .tabs::-webkit-scrollbar{display:none}
.topbar .tab{padding:0.375rem 1rem;white-space:nowrap;cursor:pointer;color:rgba(255,255,255,0.75);font-size:1.0625rem;border-radius:0.375rem;transition:.2s}
.topbar .tab:hover{color:#fff;background:rgba(255,255,255,0.12)}
.topbar .tab.on{color:#fff;background:rgba(255,255,255,0.25);box-shadow:inset 0 -2px 0 var(--primary)}
.topbar .btns{display:flex;gap:0.375rem;flex-shrink:0;align-items:center}
.topbar .btns button{padding:0.3125rem 0.75rem;border:1px solid rgba(255,255,255,0.25);border-radius:0.375rem;background:rgba(255,255,255,0.08);color:#fff;font-size:var(--fs-base);cursor:pointer;white-space:nowrap;transition:.2s}
.topbar .btns button:hover{background:rgba(255,255,255,0.18)}
.logo-drop{position:absolute;top:2.875rem;left:0;background:#fff;border-radius:0.625rem;box-shadow:0 8px 32px rgba(0,0,0,0.18);min-width:11.25rem;z-index:9999;overflow:hidden;display:none}
.logo-drop.on{display:block}
.logo-drop .ld-item{padding:0.625rem 1rem;font-size:var(--fs-sm);cursor:pointer;color:var(--text-primary);transition:.2s}
.logo-drop .ld-item:hover{background:var(--primary-bg);color:var(--primary)}

/* ===== User Menu ===== */
.user-btn{position:relative;display:flex;align-items:center;gap:0.375rem;padding:0.25rem 0.625rem;border:1px solid rgba(255,255,255,0.25);border-radius:2rem;background:rgba(255,255,255,0.08);color:#fff;font-size:var(--fs-sm);cursor:pointer;white-space:nowrap;transition:.2s}
.user-btn:hover{background:rgba(255,255,255,0.18)}
.user-avatar{width:1.75rem;height:1.75rem;border-radius:50%;object-fit:cover;flex-shrink:0}
.user-avatar-text{width:1.75rem;height:1.75rem;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:600;flex-shrink:0}
.user-name{max-width:5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-drop{position:absolute;top:2.625rem;right:0;background:#fff;border-radius:0.625rem;box-shadow:0 8px 32px rgba(0,0,0,0.18);min-width:10rem;z-index:9999;overflow:hidden;display:none}
.user-drop.on{display:block}
.user-drop .ud-item{padding:0.625rem 1rem;font-size:var(--fs-sm);cursor:pointer;color:var(--text-primary);transition:.2s}
.user-drop .ud-item:hover{background:var(--primary-bg);color:var(--primary)}
.user-drop .ud-item + .ud-item{border-top:1px solid rgba(0,0,0,0.06)}

/* ===== Subbar ===== */
.subbar{position:absolute;top:3.25rem;left:0;right:0;z-index:990;display:none;align-items:center;gap:0.25rem;padding:0 0.75rem;height:2.625rem;background:#fff;border-bottom:1px solid rgba(0,0,0,0.06);overflow-x:auto;-webkit-overflow-scrolling:touch;flex-shrink:0}
.subbar.on{display:flex}
.subbar::-webkit-scrollbar{display:none}
.subbar .sub{padding:0.3125rem 0.875rem;font-size:var(--fs-base);cursor:pointer;white-space:nowrap;border-radius:0.375rem;color:var(--text-secondary);transition:.2s}
.subbar .sub:hover{background:var(--primary-bg);color:var(--primary)}
.subbar .sub.on{background:var(--primary);color:#fff}

/* ===== Main ===== */
.main{flex:1;position:relative;overflow:hidden;background:linear-gradient(135deg,#e8f5e9,#c8e6c9,#a5d6a7,#81c784,#66bb6a)}

/* ===== Cover ===== */
.cover{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}
.cover.hide{display:none}
.cover .ct{text-align:center;position:relative;z-index:1}
.cover-custom{font-size:4.5rem;font-weight:900;color:#fff;letter-spacing:8px;margin-bottom:12.5rem;line-height:1.2;-webkit-text-stroke:1px rgba(255,59,48,0.15);text-shadow:0 3px 12px rgba(0,0,0,0.4);animation:breathe 4s ease-in-out infinite}
.cover .logo-icon{position:relative;font-size:5rem;margin-bottom:1rem;margin-left:-1rem;animation:bounce 3s ease-in-out infinite;display:flex;align-items:center;justify-content:center}
.cover .logo-icon img{width:5rem;height:5rem;object-fit:contain;border-radius:0.75rem}
.cover .title{font-size:3rem;font-weight:800;color:#1b5e20;letter-spacing:6px;text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff,0 2px 4px rgba(0,0,0,0.1),0 0 8px rgba(255,255,255,0.6);margin-bottom:0.625rem}
.cover .sub{font-size:1.375rem;color:#2d6a4f;letter-spacing:4px;font-weight:700;text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff,0 0 6px rgba(255,255,255,0.9)}

@keyframes breathe{0%,100%{text-shadow:0 3px 12px rgba(0,0,0,0.4),0 0 5px rgba(255,59,48,0.1);-webkit-text-stroke-color:rgba(255,59,48,0.1);opacity:0.9}50%{text-shadow:0 3px 12px rgba(0,0,0,0.4),0 0 40px rgba(255,59,48,0.5),0 0 100px rgba(255,59,48,0.3),0 0 160px rgba(255,59,48,0.15);-webkit-text-stroke-color:rgba(255,59,48,0.4);opacity:1}}
@keyframes bounce{0%,100%{top:0}50%{top:-12px}}

/* ===== Desktop Icons (Apple/macOS style) ===== */
.desktop-icons{position:absolute;top:1rem;left:1rem;bottom:1rem;z-index:2;display:grid;grid-template-rows:repeat(auto-fill,7rem);grid-auto-columns:5.5rem;grid-auto-flow:column;gap:.5rem .75rem;align-content:start;justify-content:start;pointer-events:none;overflow-x:auto;overflow-y:hidden;padding-right:1rem}
.desktop-icons.has-subbar{top:3.75rem}
@media(max-width:768px){.desktop-icons.has-subbar{top:3.5rem}}
.desktop-icons::-webkit-scrollbar{width:.25rem;height:.25rem}
.desktop-icons::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:.125rem}
.desktop-icon{pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:.5rem;cursor:pointer;transition:all .2s;user-select:none;width:5.5rem;height:7rem;border-radius:.75rem}
.desktop-icon:hover{background:rgba(255,255,255,.06)}
.desktop-icon.active{background:rgba(0,120,212,.18)}
.desktop-icon-img{width:3.75rem;height:3.75rem;border-radius:24%;display:flex;align-items:center;justify-content:center;font-size:1.625rem;color:#fff;background:var(--primary);box-shadow:0 4px 14px rgba(0,0,0,.18),0 1px 3px rgba(0,0,0,.1);transition:all .25s cubic-bezier(.25,.46,.45,.94);position:relative;overflow:hidden;flex-shrink:0}
.desktop-icon-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,.05) 45%,transparent 60%);border-radius:inherit;pointer-events:none}
.desktop-icon:hover .desktop-icon-img{transform:scale(1.08);box-shadow:0 6px 24px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.12)}
.desktop-icon.active .desktop-icon-img{transform:scale(1.04);box-shadow:0 4px 18px rgba(0,120,212,.35),0 2px 6px rgba(0,0,0,.1)}
.desktop-icon-label{font-size:var(--fs-2sm);color:rgba(255,255,255,.95);text-align:center;font-weight:400;text-shadow:0 1px 4px rgba(0,0,0,.5);max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-all;line-height:1.3;margin-top:.5rem;padding:0 2px;letter-spacing:.01em}
.desktop-icon.active .desktop-icon-label{color:#fff;text-shadow:0 1px 6px rgba(0,120,212,.5);font-weight:500}

/* Pin button */
.ctitle-pin{width:1.5rem;height:1.5rem;border:none;background:rgba(255,255,255,0.15);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;margin-right:.5rem;font-size:var(--fs-sm);transition:all .2s;flex-shrink:0}
.ctitle-pin:hover{background:rgba(255,255,255,0.3);transform:scale(1.1)}
.ctitle-pin.pinned{background:var(--primary);color:#fff}

/* ===== Map ===== */
#map{position:absolute;inset:0;z-index:0;display:none}
#map.on{display:block}
.layer-switch{position:absolute;bottom:1.5rem;right:1rem;z-index:10;display:flex;background:rgba(0,0,0,0.55);border-radius:0.5rem;overflow:hidden}
.layer-switch button{padding:0.5rem 1.125rem;border:none;background:transparent;color:rgba(255,255,255,0.68);font-size:var(--fs-sm);cursor:pointer}
.layer-switch button.on{background:rgba(var(--primary-rgb),0.8);color:#fff}

/* ===== Content Panel (3002 style) ===== */
.content{position:absolute;top:3rem;left:0.625rem;right:0.625rem;bottom:0.625rem;z-index:250;overflow:hidden;display:none;flex-direction:column;background:rgba(245,247,250,0.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:0.5rem;border:1px solid rgba(0,0,0,0.3)}
.content.on{display:flex}
.content-inner{flex:1;display:flex;flex-direction:column;overflow:hidden}
.ctitle{display:flex;align-items:center;padding:0.375rem 1.125rem;background:rgba(var(--primary-rgb),0.45);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);flex-shrink:0;box-shadow:0 1px 8px rgba(0,0,0,0.12);z-index:1;border-radius:0.5rem 0.5rem 0 0}
.ctitle-t{font-size:var(--fs-lg);font-weight:600;color:#fff;flex:1;letter-spacing:1px;text-shadow:0 1px 3px rgba(0,0,0,0.3)}
.cbtn-title{display:flex;align-items:center;gap:0.375rem;padding:0.3125rem 0.75rem;border:none;border-radius:0.375rem;background:rgba(var(--primary-rgb),0.1);color:var(--primary);font-size:var(--fs-2sm);cursor:pointer;transition:all .15s;white-space:nowrap;border:1px solid rgba(var(--primary-rgb),0.2)}
.cbtn-title:hover{background:rgba(var(--primary-rgb),0.2)}
.cbtn-title i{font-size:var(--fs-sm)}
.mac-close{width:1.5rem;height:1.5rem;border-radius:50%;background:#ff5f57;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;position:relative}
.mac-close i{opacity:0.7;transition:opacity .2s}
.mac-close:hover{background:#ff4444;transform:scale(1.1)}
.mac-close:hover i{opacity:1}

/* ===== Tabs ===== */
.ctabs{display:flex;align-items:center;gap:0.125rem;padding:0.625rem 1.125rem;background:rgba(255,255,255,0.8);border-bottom:1px solid rgba(0,0,0,0.06);flex-shrink:0;overflow-x:auto;min-height:2.5rem;-webkit-overflow-scrolling:touch}
.ctabs::-webkit-scrollbar{display:none}
.ctab{padding:1rem 1rem;font-size:var(--fs-base);cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;white-space:nowrap;transition:.2s}
.ctab:hover{color:var(--primary)}
.ctab.on{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}

/* ===== Card Tabs ===== */
.ctabs-card{display:flex;flex-wrap:wrap;gap:0.625rem;padding:0.75rem 1.125rem;background:transparent;border-bottom:none;flex-shrink:0;justify-content:flex-start;align-self:flex-start}
.ctab-card{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:0.25rem;width:6.25rem;height:6.25rem;padding:0.5rem;border-radius:0.625rem;background:rgba(255,255,255,0.55);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,0.4);cursor:pointer;transition:.2s}
.ctab-card:hover{border-color:var(--primary);background:#f0f7ff}
.ctab-card.on{border-color:var(--primary);background:var(--primary-bg);box-shadow:0 2px 8px rgba(var(--primary-rgb),0.15)}
.ctab-card .tab-icon{font-size:1.375rem;margin-bottom:0;color:var(--primary);flex-shrink:0}
.ctab-card-name{font-size:var(--fs-md);color:var(--text-primary);text-align:center;line-height:1.3;word-break:break-all}

/* ===== Content Body ===== */
.cbody{flex:1;overflow-x:hidden;overflow-y:auto;padding:1.125rem;padding-bottom:5rem;word-break:break-all;min-height:0;position:relative}
/* ===== Content Header Buttons ===== */
.cheader-btns{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1.125rem;background:transparent;align-self:flex-end}
.cbtn-title{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 1.125rem;border:none;border-radius:0.5rem;background:linear-gradient(135deg,var(--primary),var(--primary-hover));color:#fff;font-size:var(--fs-base);cursor:pointer;transition:all .2s;white-space:nowrap;box-shadow:0 2px 8px rgba(var(--primary-rgb),0.25);font-weight:500}
.cbtn-title:hover{background:linear-gradient(135deg,var(--primary-hover),var(--primary-hover));transform:translateY(-1px);box-shadow:0 4px 12px rgba(var(--primary-rgb),0.35)}
.cbtn-title:active{transform:scale(0.97)}
.cbtn-title i{font-size:var(--fs-md)}
/* ===== Sidebar ===== */
.cmain-body{display:flex;flex-direction:column;flex:1;overflow:hidden}
.cmain-body.with-sidebar{flex-direction:row}
.sidebar::-webkit-scrollbar{width:0.25rem}
.sidebar::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12);border-radius:0.125rem}
.sidebar-toggle{width:1.5rem;height:1.5rem;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,0.15);color:#fff;font-size:var(--fs-sm);cursor:pointer;margin-right:0.5rem;transition:.2s;display:flex;align-items:center;justify-content:center}
.sidebar-toggle:hover{background:rgba(255,255,255,0.3);transform:scale(1.1)}

/* 通用图标按钮：所有页面的工具栏图标按钮统一风格 */
.pd-btn-icon,.cw-btn-icon,.dkb-btn-icon{width:1.75rem;height:1.75rem;border-radius:50%;border:none;background:rgba(var(--primary-rgb),0.1);color:var(--primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;flex-shrink:0}
.pd-btn-icon:hover,.cw-btn-icon:hover,.dkb-btn-icon:hover{background:rgba(var(--primary-rgb),0.2)}
.dkb-btn-toggle{padding:0.375rem 0.625rem;border:none;border-radius:0.375rem;background:rgba(var(--primary-rgb),0.1);color:var(--primary);font-size:var(--fs-sm);cursor:pointer;margin-right:0.25rem;transition:.2s}
.sidebar-item{display:flex;align-items:center;gap:0.625rem;padding:0.625rem 0.75rem;border-radius:0.625rem;background:transparent;color:var(--text-secondary);font-size:var(--fs-sm);cursor:pointer;transition:all .2s;text-align:left}
.sidebar-item:hover{background:var(--primary-bg);color:var(--primary);transform:translateX(2px)}
.sidebar-item.on{background:var(--primary);color:#fff;box-shadow:0 2px 12px rgba(var(--primary-rgb),0.3)}
.sidebar-item i{font-size:var(--fs-md);width:1.25rem;text-align:center}
/* ===== Main Content Area ===== */
.cmain{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}
.cright{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
/* ===== Button Overlay ===== */
.btn-overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.2);backdrop-filter:blur(6px)}
.btn-overlay-panel{width:50%;height:50%;display:flex;flex-direction:column;background:rgba(245,247,250,0.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:0.75rem;border:1px solid rgba(0,0,0,0.15);box-shadow:0 8px 32px rgba(0,0,0,0.15);overflow:hidden}
.btn-overlay-hd{padding:0.75rem 1.125rem;background:rgba(var(--primary-rgb),0.4);backdrop-filter:blur(20px) saturate(180%);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(0,0,0,0.06)}
.btn-overlay-hd span{color:#fff;font-size:var(--fs-md);font-weight:600}
.btn-overlay-hd button{background:rgba(255,255,255,0.15);border:none;color:#fff;width:1.75rem;height:1.75rem;border-radius:50%;font-size:var(--fs-md);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.btn-overlay-hd button:hover{background:rgba(255,255,255,0.3)}
.btn-overlay-bd{flex:1;padding:1.25rem;overflow-y:auto;font-size:var(--fs-base);color:var(--text-secondary);line-height:1.7}


/* ===== Unified Sidebar (all pages) ===== */
.page-wrap{position:absolute;inset:0;display:flex;font-family:var(--font-family);background:var(--bg-hover)}
.sidebar{width:16rem;min-width:14rem;flex-shrink:0;display:flex;flex-direction:column;background:rgba(255,255,255,0.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-right:1px solid rgba(0,0,0,0.06);transition:width .3s;z-index:10}
.sidebar.collapsed{width:3rem;min-width:auto}
.sidebar-hd{display:flex;align-items:center;justify-content:space-between;padding:0.875rem 1rem;border-bottom:1px solid rgba(0,0,0,0.06);font-weight:700;font-size:var(--fs-base);color:var(--text-deep)}
.sidebar.collapsed .sidebar-hd{justify-content:center;padding:0.875rem 0.5rem}
.sidebar.collapsed .sidebar-hd span{display:none}
.sidebar-body{flex:1;overflow-y:auto;padding:0.75rem;display:flex;flex-direction:column;gap:0.625rem}
.sidebar-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:0.25rem;min-height:0}
.sidebar-item-title{font-size:var(--fs-sm);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-item-meta{font-size:var(--fs-xs);color:var(--text-tertiary);margin-top:2px}
.sidebar-item.on .sidebar-item-meta{color:rgba(255,255,255,0.7)}
.sidebar-empty{text-align:center;padding:2.5rem 1.25rem;color:var(--text-tertiary);font-size:var(--fs-sm)}
.page-btn-icon{width:1.75rem;height:1.75rem;border-radius:50%;border:none;background:rgba(var(--primary-rgb),0.1);color:var(--primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;flex-shrink:0}
.page-btn-icon:hover{background:rgba(var(--primary-rgb),0.2)}
.page-main{flex:1;display:flex;flex-direction:column;overflow:hidden}



/* ===== Bottom Menu Bar ===== */
.cbottom{position:absolute;bottom:0.75rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:0.125rem;padding:0.5rem 1.25rem;background:rgba(245,245,245,0.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:1.25rem;flex-shrink:0;z-index:10;box-shadow:0 2px 12px rgba(0,0,0,0.08)}
.cbottom::-webkit-scrollbar{display:none}
.cbtn-bottom{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.625rem;padding:0.625rem 1.125rem;border:none;border-radius:0.75rem;background:transparent;color:#1a1a1a;font-size:var(--fs-base);cursor:pointer;transition:all .15s;white-space:nowrap;line-height:1}
.cbtn-bottom:hover{background:rgba(255,255,255,0.45)}
.cbtn-bottom:active{background:rgba(255,255,255,0.6);transform:scale(0.95)}
.ctmpl-info{position:absolute;bottom:0.375rem;left:0.875rem;z-index:30;font-size:var(--fs-xs);color:rgba(0,0,0,0.45);display:flex;align-items:center;gap:0.3125rem}
.ctmpl-label{background:rgba(0,0,0,0.08);padding:0.0625rem 0.375rem;border-radius:0.1875rem;font-size:var(--fs-2xs);color:rgba(0,0,0,0.5);text-transform:uppercase;letter-spacing:0.5px}
.ctmpl-name{color:rgba(0,0,0,0.5);font-weight:500}
.ctmpl-name[title]{color:var(--primary);cursor:pointer;text-decoration:underline}
.ctmpl-name[title]:hover{color:var(--primary-hover)}
.tmpl-editor-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:200;background:rgba(0,0,0,0.45);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center}

/* Template list — auto-width columns, no wrapping */
.tm-list{width:100%;overflow-x:auto}
.tm-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:0.75rem;align-items:center;padding:0.625rem 0.75rem;border-bottom:1px solid var(--border-color,#eee);min-width:0}
.tm-header{font-weight:600;color:var(--text-secondary,#666);font-size:var(--fs-2sm);border-bottom:2px solid var(--border-color,#e0e0e0)}
.tm-col-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tm-col-size{white-space:nowrap;font-family:monospace;font-size:var(--fs-2sm);text-align:right}
.tm-col-time{white-space:nowrap;font-size:var(--fs-2sm);color:var(--text-tertiary,#888)}
.tm-col-action{white-space:nowrap}
.tm-count{font-size:var(--fs-2sm);color:var(--text-secondary,#666)}
.tmpl-editor-panel{width:86%;height:82%;background:rgba(255,255,255,0.98);border-radius:0.625rem;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,0.2)}
.tmpl-editor-hd{display:flex;align-items:center;justify-content:space-between;padding:0.625rem 1rem;background:#f8f9fa;border-bottom:1px solid #e8e8e8;font-size:var(--fs-base);font-weight:600}
.tmpl-editor-hd button{background:none;border:none;font-size:var(--fs-lg);cursor:pointer;color:var(--text-tertiary,#999)}
.tmpl-editor-hd button:hover{color:var(--text-deep,#333)}
.tmpl-editor-bd{flex:1;padding:0.625rem;overflow:hidden}
.tmpl-editor-bd .CodeMirror{height:100%;font-family:"Cascadia Mono",monospace;font-size:var(--fs-2sm)}
.tmpl-editor-ft{display:flex;justify-content:flex-end;gap:0.625rem;padding:0.625rem 1rem;border-top:1px solid #e8e8e8}
.cm-toolbar{display:flex;align-items:center;gap:0.25rem;padding:0.375rem 0.625rem;background:#f5f5f5;border-bottom:1px solid #e8e8e8;flex-wrap:wrap}
.cm-toolbar-btn{padding:0.25rem 0.625rem;border:1px solid #d9d9d9;background:#fff;border-radius:0.25rem;cursor:pointer;font-size:var(--fs-xs);color:var(--text-secondary);transition:.2s;line-height:1.4}
.cm-toolbar-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-bg)}
.cm-toolbar-sep{width:0.0625rem;height:1rem;background:#ddd;margin:0 0.25rem}
.tmpl-editor-panel.fullscreen{position:fixed;inset:0;width:100%;height:100%;border-radius:0;z-index:99999}
.chelp-fb{position:absolute;bottom:0.75rem;right:0.75rem;z-index:11;display:flex;align-items:center;gap:0.375rem}
.cbtn-circle{width:1.375rem;height:1.375rem;border-radius:50%;border:none;background:rgba(var(--primary-rgb),0.12);color:var(--primary);font-size:var(--fs-2xs);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .2s;padding:0}
.cbtn-circle:hover{background:var(--primary);color:#fff}
.cbtn-bottom i{font-size:var(--fs-2xl);color:#1a1a1a}
.cbtn-bottom span{font-size:var(--fs-base);color:#1a1a1a}
.cbody{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,0.15) transparent}
.cbody::-webkit-scrollbar{width:0.375rem;height:0.375rem}
.cbody::-webkit-scrollbar-track{background:transparent}
.cbody::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15);border-radius:0.1875rem}
.cbody .loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-tertiary);font-size:var(--fs-md);background:rgba(245,247,250,0.6);backdrop-filter:blur(2px);z-index:5}
.ld-pulse{display:flex;gap:0.875rem;justify-content:center;align-items:center;margin-bottom:1.5rem}
.ld-dot{width:1.125rem;height:1.125rem;border-radius:50%;animation:ld-wave 1.2s ease-in-out infinite}
.ld-dot:nth-child(1){background:linear-gradient(135deg,var(--primary),var(--primary-hover));box-shadow:0 0 16px rgba(var(--primary-rgb),0.45);animation-delay:0s}
.ld-dot:nth-child(2){background:linear-gradient(135deg,#07c160,var(--success));box-shadow:0 0 16px rgba(7,193,96,0.45);animation-delay:0.2s}
.ld-dot:nth-child(3){background:linear-gradient(135deg,#fa8c16,#ffc53d);box-shadow:0 0 16px rgba(250,140,22,0.45);animation-delay:0.4s}
@keyframes ld-wave{0%,100%{transform:translateY(0) scale(1);opacity:.5}50%{transform:translateY(-22px) scale(1.2);opacity:1}}
.ld-text{font-size:var(--fs-base);color:#667085;letter-spacing:2px;animation:ld-breathe 1.5s ease-in-out infinite}
@keyframes ld-breathe{0%,100%{opacity:.4}50%{opacity:1}}
.cbody .empty{text-align:center;padding:5rem 1.25rem;color:var(--text-tertiary);font-size:var(--fs-md)}

/* ===== Lazy Load Sentinel ===== */
.lazy-sentinel{height:2.5rem;display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);font-size:var(--fs-2sm)}
.lazy-sentinel.loading::after{content:'';width:1rem;height:1rem;border:2px solid #e0e0e0;border-top-color:var(--primary);border-radius:50%;animation:spin 0.8s linear infinite;margin-left:0.5rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Info / Modal Panels ===== */
.panel-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:5000;display:flex;align-items:center;justify-content:center}
.info-panel{background:rgba(255,255,255,0.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:0.875rem;box-shadow:0 12px 48px rgba(0,0,0,0.2);width:90%;max-width:26.25rem;overflow:hidden}
.info-hd{padding:1rem 1.25rem;background:linear-gradient(135deg,rgba(var(--primary-rgb),0.95),rgba(var(--primary-rgb),0.95));display:flex;align-items:center;justify-content:space-between}
.info-hd span{color:#fff;font-size:var(--fs-md);font-weight:600}
.info-hd button{background:transparent;border:none;color:var(--text-tertiary,#999);width:1.75rem;height:1.75rem;border-radius:var(--radius-sm,0.25rem);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);transition:var(--transition,.2s ease)}
.info-bd{padding:1.25rem;font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.8;white-space:pre-wrap;max-height:60vh;overflow-y:auto}
.info-ft{padding:0.75rem 1.25rem;border-top:1px solid rgba(0,0,0,0.06);text-align:right}
.info-ft button{padding:0.5rem 1.25rem;background:var(--primary);color:#fff;border:none;border-radius:0.375rem;font-size:var(--fs-sm);cursor:pointer}
.info-ft button:hover{background:var(--primary-hover)}

/* ===== System Settings ===== */
.page-main-pad{flex:1;overflow-y:auto;padding:1.25rem;display:flex;flex-direction:column;gap:1rem}
.ss-tabs{display:flex;gap:0.5rem;padding:0.75rem 1rem;border-bottom:1px solid rgba(0,0,0,0.06);background:rgba(255,255,255,0.6);backdrop-filter:blur(12px);overflow-x:auto;flex-shrink:0}
.ss-tab{display:flex;align-items:center;gap:0.375rem;padding:0.5rem 0.875rem;border-radius:0.625rem;font-size:var(--fs-sm);cursor:pointer;transition:all .2s;white-space:nowrap;color:var(--text-secondary);background:transparent;border:none}
.ss-tab:hover{background:var(--primary-bg);color:var(--primary)}
.ss-tab.on{background:var(--primary);color:#fff;box-shadow:0 2px 12px rgba(var(--primary-rgb),0.3)}
.ss-hd{font-size:var(--fs-lg);font-weight:700;color:var(--primary);margin-bottom:1.25rem;padding-bottom:0.625rem;border-bottom:2px solid var(--primary)}
.ss-form{display:flex;flex-direction:column;gap:1rem}
.ss-row{display:flex;flex-direction:column;gap:0.375rem}
.ss-row label{font-size:var(--fs-sm);color:var(--text-secondary);font-weight:500}
.ss-row label small{color:var(--text-tertiary);font-weight:400;margin-left:0.375rem}
.ss-row input,.ss-row textarea,.ss-row select{width:100%;padding:0.6875rem 0.875rem;border:1px solid rgba(0,0,0,0.08);border-radius:0.625rem;font-size:var(--fs-sm);outline:none;transition:all .2s;background:rgba(255,255,255,0.7);color:var(--text-deep,#333)}
.ss-row input:focus,.ss-row textarea:focus,.ss-row select:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(var(--primary-rgb),0.1);background:#fff}
.ss-row textarea{resize:vertical;min-height:5rem}
.ss-row select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238898aa' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:2rem}
.ss-ft{margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(0,0,0,0.06)}
.ss-image{display:flex;flex-direction:column;gap:0.5rem}
.ss-image input[type='file']{padding:0.625rem 0.875rem;font-size:var(--fs-sm);color:var(--text-secondary);border:1px dashed rgba(0,0,0,0.12);border-radius:0.625rem;background:rgba(255,255,255,0.5);cursor:pointer;transition:all .2s;width:100%}
.ss-image input[type='file']:hover{border-color:var(--primary);background:rgba(var(--primary-rgb),0.04)}
.ss-image img{max-width:7.5rem;max-height:7.5rem;object-fit:contain;border-radius:0.5rem;border:1px solid #e0e0e0;padding:0.25rem;background:#fff}



/* ===== Wallpaper Panel ===== */
.wp-panel{position:absolute;top:1rem;left:7rem;bottom:auto;right:auto;z-index:999;background:rgba(255,255,255,0.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:0.875rem;padding:1.125rem;width:18.75rem;box-shadow:0 8px 32px rgba(0,0,0,0.15);display:none}
.wp-panel.on{display:block}
.wp-panel .wpt{font-size:var(--fs-base);font-weight:600;margin-bottom:0.75rem;color:var(--text-deep,#333)}
.wp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.625rem;margin-bottom:0.875rem;width:80%;margin-left:auto;margin-right:auto}
.wp-thumb{height:3.5rem;border-radius:0.5rem;cursor:pointer;border:2px solid transparent;transition:.2s;display:flex;align-items:center;justify-content:center;font-size:1.75rem;color:var(--text-tertiary);background:#f5f5f5;position:relative;overflow:hidden}
.wp-thumb:hover{border-color:var(--primary)}
.wp-thumb.on{border-color:var(--primary);box-shadow:0 0 0 2px rgba(var(--primary-rgb),0.2)}
.wp-thumb-name{position:absolute;bottom:0;left:0;right:0;padding:0.125rem 0;text-align:center;font-size:var(--fs-2xs);color:#fff;background:rgba(0,0,0,0.4);text-shadow:0 1px 2px rgba(0,0,0,0.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.wp-upload{border:2px dashed #d9d9d9;background:#fafafa;cursor:pointer;transition:.2s}
.wp-upload:hover{border-color:var(--primary);background:#f0f7ff}
.wp-input{margin-top:0.75rem}
.wp-input label{display:block;font-size:var(--fs-2sm);color:var(--text-secondary);margin-bottom:0.375rem}
.wp-input input{width:100%;padding:0.6875rem 0.875rem;border:1px solid rgba(0,0,0,0.08);border-radius:0.625rem;font-size:var(--fs-sm);outline:none;transition:all .2s;background:rgba(255,255,255,0.7);color:var(--text-deep,#333)}
.wp-input input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(var(--primary-rgb),0.1);background:#fff}

/* ===== Settings Panel ===== */
.set-panel{position:absolute;top:1rem;left:7rem;bottom:auto;right:auto;z-index:999;background:rgba(255,255,255,0.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:0.875rem;padding:1.125rem;width:16.25rem;box-shadow:0 8px 32px rgba(0,0,0,0.15);display:none}
.set-panel.on{display:block}
.set-panel .st{font-size:var(--fs-base);font-weight:600;margin-bottom:0.75rem;color:var(--text-deep,#333)}
.set-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.625rem}
.set-row label{font-size:var(--fs-sm);color:var(--text-secondary,#555)}
.set-row .set-btns{display:flex;gap:0.375rem}
.set-row .set-btns button{width:2rem;height:2rem;border:1px solid #e0e0e0;border-radius:0.375rem;background:#fff;font-size:var(--fs-2sm);cursor:pointer;color:var(--text-secondary);transition:.2s}
.set-row .set-btns button:hover{border-color:var(--primary);color:var(--primary)}
.set-row .set-btns button.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.font-slider{width:100%;height:0.375rem;-webkit-appearance:none;appearance:none;background:#e0e0e0;border-radius:0.1875rem;outline:none;cursor:pointer}
.font-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1.125rem;height:1.125rem;border-radius:50%;background:var(--primary);cursor:pointer;box-shadow:0 2px 6px rgba(var(--primary-rgb),0.4);transition:.2s}
.font-slider::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 3px 10px rgba(var(--primary-rgb),0.5)}
.font-slider::-moz-range-thumb{width:1.125rem;height:1.125rem;border-radius:50%;background:var(--primary);cursor:pointer;border:none;box-shadow:0 2px 6px rgba(var(--primary-rgb),0.4)}
.font-reset-btn{width:100%;padding:0.625rem;border:1px solid var(--primary);border-radius:0.5rem;background:#fff;color:var(--primary);font-size:var(--fs-sm);cursor:pointer;transition:.2s;margin-top:0.25rem}
.font-reset-btn:hover{background:var(--primary);color:#fff}

/* ===== Floating Action Buttons ===== */
.sa-group{position:absolute;bottom:5rem;right:1rem;z-index:999;display:flex;flex-direction:column;gap:0.625rem;align-items:center}
.sa-btn{width:3rem;height:3rem;border-radius:50%;color:#fff;border:1px solid rgba(255,255,255,0.35);font-size:var(--fs-2xl);cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,0.25)}
.sa-btn:hover{box-shadow:0 4px 16px rgba(0,0,0,0.35);transform:scale(1.08)}
.sa-btn:active{transform:scale(0.95)}

/* ===== Style Settings Modal ===== */
.style-overlay{position:fixed;inset:0;z-index:99998;background:rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center;animation:bk-fadeIn .15s ease;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.style-overlay .bk-modal{background:rgba(255,255,255,0.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 12px 48px rgba(0,0,0,0.2);border:1px solid rgba(var(--primary-rgb),0.25);border-radius:0.75rem;overflow:hidden;max-width:28rem}
.style-overlay .bk-modal-hd{background:linear-gradient(135deg,rgba(var(--primary-rgb),0.9),rgba(var(--primary-rgb),0.95));border-bottom:none}
.style-overlay .bk-modal-hd .title{color:#fff;font-size:1.0625rem}
.style-overlay .bk-modal-hd .close{color:rgba(255,255,255,0.7)}
.style-overlay .bk-modal-hd .close:hover{background:rgba(255,255,255,0.15);color:#fff}
.style-overlay .bk-tabs{border-bottom:1px solid var(--border,rgba(0,0,0,0.08));background:rgba(0,0,0,0.02)}
.style-overlay .bk-tab{font-size:var(--fs-base);padding:0.75rem 1rem}

/* ===== Delete Confirm ===== */
.del-panel{background:rgba(255,255,255,0.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:0.875rem;box-shadow:0 12px 48px rgba(0,0,0,0.2);width:90%;max-width:22.5rem;overflow:hidden}
.del-bd{padding:1.5rem 1.25rem;font-size:var(--fs-base);color:var(--text-secondary);text-align:center;line-height:1.6}
.del-ft{padding:0.75rem 1.25rem;border-top:1px solid rgba(0,0,0,0.06);display:flex;gap:0.625rem;justify-content:flex-end}
.del-ft button{padding:0.5rem 1.125rem;border-radius:0.375rem;font-size:var(--fs-sm);cursor:pointer;border:none}
.del-ft .btn-cancel{background:#f5f5f5;color:var(--text-mid,#666)}
.del-ft .btn-cancel:hover{background:#e8e8e8}
.del-ft .btn-confirm{background:var(--danger);color:#fff}
.del-ft .btn-confirm:hover{background:#f87171}

/* ===== Auth Overlay ===== */
.auth-overlay{position:fixed;inset:0;z-index:99999;background:linear-gradient(135deg,var(--primary) 0%,#2d7a52 50%,var(--primary) 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-size:var(--fs-md);user-select:none}
.auth-overlay .auth-icon{font-size:4rem;margin-bottom:0.75rem}
.auth-overlay .auth-title{font-size:1.75rem;font-weight:700;margin-bottom:0.375rem;letter-spacing:3px}
.auth-overlay .auth-sub{font-size:var(--fs-base);color:rgba(255,255,255,0.6);margin-bottom:1.25rem}
.auth-overlay .auth-agreement{background:rgba(255,255,255,0.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:0.75rem;padding:1.25rem 1.75rem;max-width:32.5rem;width:92%;line-height:1.8;font-size:var(--fs-sm);text-align:left;color:rgba(255,255,255,0.85);max-height:50vh;overflow-y:auto;margin-bottom:1.25rem;border:1px solid rgba(255,255,255,0.08)}
.auth-overlay .auth-agreement h3{text-align:center;font-size:var(--fs-md);color:#fff;margin-bottom:0.625rem}
.auth-overlay .auth-agreement::-webkit-scrollbar{width:0.25rem}
.auth-overlay .auth-agreement::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:0.125rem}
.auth-btn{padding:0.875rem 3.75rem;border:none;border-radius:0.625rem;font-size:var(--fs-lg);font-weight:700;cursor:pointer;transition:.2s;letter-spacing:2px}
.auth-btn.agree{background:linear-gradient(135deg,var(--success),#4ade80);color:#fff}
.auth-btn.agree:hover:not(:disabled){transform:scale(1.03);box-shadow:0 4px 20px rgba(82,196,26,0.4)}
.auth-btn.agree:disabled{opacity:0.4;cursor:default}
.auth-btn.disagree{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.6);margin-left:0.75rem}
.auth-btn.disagree:hover{background:rgba(255,255,255,0.2);color:#fff}
.auth-countdown{font-size:3rem;font-weight:900;color:var(--success);margin:0.625rem 0;text-shadow:0 0 20px rgba(82,196,26,0.3)}
.auth-countdown.done{color:var(--primary);text-shadow:0 0 20px rgba(var(--primary-rgb),0.3)}
.auth-btns{display:flex;align-items:center;justify-content:center}

/* ===== Watermark ===== */
.watermark{position:absolute;inset:0;pointer-events:none;z-index:10}




/* ===== Scrollbar ===== */
::-webkit-scrollbar{width:0.3125rem;height:0.3125rem}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15);border-radius:0.1875rem}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.3)}

/* ===== Touch Optimization ===== */
button,input,select,textarea,a,.tab,.sub,.sidebar-item,.ctab-card,.cbtn-bottom,.cbtn-title,.logo,.ld-item,.wp-thumb,.sa-btn{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
input,select,textarea{font-size:var(--fs-md)}

/* ===== Responsive ===== */
/* Breakpoint: --breakpoint-lg */
@media(max-width:768px){
.topbar{padding:0 0.375rem;height:2.875rem}
.topbar .tab{padding:0.3125rem 0.625rem;font-size:var(--fs-lg)}
.topbar .logo span{font-size:var(--fs-2xl)}
.subbar{padding:0 0.375rem;height:2.375rem}
.subbar .sub{padding:0.25rem 0.625rem;font-size:1.0625rem}
.cover-custom{font-size:3.25rem;margin-bottom:7.5rem}
.cover .logo-icon{font-size:4.25rem}
.cover .logo-icon img{width:3.5rem;height:3.5rem}
.cover .title{font-size:2.5rem}
.cover .sub{font-size:var(--fs-2xl)}

.content{top:2.9375rem;left:0;right:0;bottom:0;border-radius:0}
.wp-panel,.set-panel{right:0.375rem;width:calc(100% - 0.75rem);max-width:18.75rem}
.ctabs-card{padding:0.625rem}
.ctab-card{width:5rem;height:5rem}
.cbottom{padding:0.25rem 0.5rem;border-radius:1rem}
.cbtn-bottom{min-width:4.375rem;min-height:4.375rem;padding:0.25rem 0.125rem;gap:0.25rem;font-size:var(--fs-xs);border-radius:0.625rem}
.cbtn-bottom i{font-size:var(--fs-lg)}
.cbtn-title{min-height:2.25rem;padding:0.375rem 0.875rem}
/* 代码生成器移动端 */
.cg-steps{gap:0.25rem;padding:0.375rem}
.cg-steps span{padding:0.375rem 0.25rem;font-size:var(--fs-xs)}
.cg-actions{flex-direction:column;gap:0.5rem}
.cg-actions button{width:100%}
.cg-field-edit-table table,.cg-translate-table table{display:block;min-width:auto}
.cg-field-edit-table thead,.cg-translate-table thead{display:none}
.cg-field-edit-table tbody,.cg-translate-table tbody{display:block}
.cg-field-edit-table tr{display:block;position:relative;margin-bottom:0.625rem;padding:2.25rem 0.625rem 0.625rem;background:rgba(255,255,255,0.7);border-radius:0.5rem;border:1px solid rgba(0,0,0,0.06)}
.cg-translate-table tr{display:block;margin-bottom:0.625rem;padding:0.625rem;background:rgba(255,255,255,0.7);border-radius:0.5rem;border:1px solid rgba(0,0,0,0.06)}
.cg-field-edit-table td,.cg-translate-table td{display:flex;align-items:center;gap:0.5rem;padding:0.3125rem 0;border:none}
.cg-field-edit-table td::before,.cg-translate-table td::before{content:attr(data-label);font-size:var(--fs-xs);color:var(--text-tertiary);width:3.5rem;flex-shrink:0;text-align:right}
/* 中文名作为卡片标题 */
.cg-field-edit-table td[data-label="中文名"]{position:absolute;top:0.5rem;left:0.625rem;right:3.75rem;padding:0}
.cg-field-edit-table td[data-label="中文名"]::before{display:none}
/* 删除按钮放右上角 */
.cg-field-edit-table td[data-label="操作"]{position:absolute;top:0.375rem;right:0.625rem;padding:0;width:auto}
.cg-field-edit-table td[data-label="操作"]::before{display:none}
/* 必填/列表/搜索 三列并排 */
.cg-field-edit-table td[data-label="必填"],.cg-field-edit-table td[data-label="列表"],.cg-field-edit-table td[data-label="搜索"]{display:inline-flex;width:auto;padding:0.25rem 0.625rem 0.25rem 0}
.cg-field-edit-table td[data-label="必填"]::before,.cg-field-edit-table td[data-label="列表"]::before,.cg-field-edit-table td[data-label="搜索"]::before{width:auto;margin-right:0.1875rem}
/* 类型选择框移动端缩小 */
.cg-field-edit-table td[data-label="类型"] select{font-size:var(--fs-2sm);padding:0.1875rem 0.375rem}
/* 选项列占满 */
.cg-field-edit-table td[data-label="选项"]>div{width:100%}
.cg-relate-select{flex-direction:column}
/* 弹窗移动端 */
/* 字段选择列表移动端 */
.cg-field-list-header{display:none !important}
.cg-field-list-item{gap:0.375rem !important;padding:0.375rem 0.5rem !important}
.cg-field-list-item span:nth-child(4){display:none}
.cg-field-list-item span{font-size:var(--fs-sm) !important}
/* 列表页移动端 */
.ul-toolbar{gap:0.375rem}
.ul-toolbar input{width:100%}
.ul-pager{flex-direction:column;align-items:flex-start}
.ul-pager-right{flex-wrap:wrap}
/* 通用表格横向滚动 */
.bk-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bk-table{min-width:37.5rem}
/* boka-table 内置分页 */
.boka-pagination{display:flex;align-items:center;justify-content:center;gap:0.375rem;padding:0.625rem;border-top:1px solid rgba(0,0,0,0.06);flex-shrink:0;flex-wrap:wrap}
.boka-pagination button{padding:0.3125rem 0.75rem;border:1px solid var(--border-light,rgba(0,0,0,0.1));border-radius:0.375rem;background:#fff;cursor:pointer;color:var(--text-secondary,#555);font-size:var(--fs-2sm);transition:.2s;min-width:2rem;text-align:center}
.boka-pagination button:hover{border-color:var(--primary,#166534);color:var(--primary,#166534)}
.boka-pagination button:disabled{opacity:.4;cursor:not-allowed}
.boka-pagination span{font-size:var(--fs-2sm);color:var(--text-tertiary,#999)}
/* 模板编辑器移动端 */
.tmpl-editor-panel{width:96%;height:90%}
.cm-toolbar-btn{padding:0.375rem 0.625rem;font-size:var(--fs-2sm);min-height:2.25rem}
/* 按钮覆盖层移动端 */
.btn-overlay-panel{width:96%;height:60%;max-height:70vh}
/* 菜单管理移动端 */
.mm-row{padding:0.625rem 0.5rem}
.mm-actions{margin-left:auto;margin-top:0.25rem;width:100%;justify-content:flex-end}
}

/* Breakpoint: --breakpoint-sm */
@media(max-width:480px){
.cover-custom{font-size:2.5rem;margin-bottom:5rem}
.cover .title{font-size:1.75rem}
.cover .sub{font-size:var(--fs-md)}
.topbar{height:2.75rem}
.topbar .tab{padding:0.25rem 0.5rem;font-size:var(--fs-md)}
.topbar .logo span{font-size:var(--fs-lg)}
.subbar{height:2.25rem}
.subbar .sub{padding:0.25rem 0.5rem;font-size:var(--fs-md)}
.sa-btn{width:2.75rem;height:2.75rem;font-size:var(--fs-lg)}
.ctab-card{width:4.375rem;height:4.375rem;padding:0.375rem}
.ctab-card .tab-icon{font-size:var(--fs-lg)}
.ctab-card-name{font-size:var(--fs-sm)}
.cbtn-bottom{min-width:3.75rem;min-height:3.75rem;font-size:var(--fs-2xs)}
.cbtn-bottom i{font-size:var(--fs-md)}
.ctmpl-info{display:none}
.chelp-fb{bottom:0.5rem;right:0.5rem}
.layer-switch{bottom:0.75rem;right:0.5rem}
.layer-switch button{padding:0.375rem 0.75rem;font-size:var(--fs-2sm)}
.modal-panel,.info-panel,.del-panel{width:96%;max-width:none}
.auth-overlay .auth-agreement{padding:0.875rem 1rem;font-size:var(--fs-2sm)}
.auth-btn{padding:0.75rem 2.5rem;font-size:var(--fs-md)}

.wp-panel,.set-panel{left:0.375rem;right:0.375rem;width:auto;max-width:none}
.wp-grid{grid-template-columns:repeat(3,1fr);gap:0.5rem}
.wp-thumb{height:3rem}
}



/* =====================================================================
   Mobile Optimization (Phase 1)
   ===================================================================== */

/* Safe area for notched phones */
@supports(padding:max(0rem)) {
  .topbar { padding-left:max(0.75rem, env(safe-area-inset-left, 0.75rem)); padding-right:max(0.75rem, env(safe-area-inset-right, 0.75rem)); }
  .content { bottom:max(0.625rem, env(safe-area-inset-bottom, 0.625rem)); }
  .sa-group { bottom:max(5rem, calc(env(safe-area-inset-bottom, 0rem) + 4rem)); right:max(1rem, env(safe-area-inset-right, 1rem)); }
  .auth-overlay .auth-agreement { padding-left:max(2rem, env(safe-area-inset-left, 2rem)); padding-right:max(2rem, env(safe-area-inset-right, 2rem)); }
}

/* Improved touch targets: ensure minimum 44x44pt tap area */
.sa-btn { width:3.25rem; height:3.25rem; font-size: 1.375rem; }
.topbar .tab { padding:0.5rem 0.875rem; min-height:2.75rem; display: flex; align-items: center; }
.subbar .sub { padding:0.5rem 0.75rem; min-height:2.75rem; display: flex; align-items: center; }
.cbtn-bottom { min-height:2.75rem; min-width:2.75rem; }
.mm-row { min-height:2.75rem; }
.sidebar-item { min-height:2.75rem; }

/* Prevent text size adjustment on orientation change */
html { -webkit-text-size-adjust: 100%; }

/* Better overscroll behavior */
.main, .cbody, .sidebar { overscroll-behavior: contain; }

/* ===== Mobile-First Responsive Overrides ===== */
/* Breakpoint: --breakpoint-lg */
@media (max-width: 768px) {
  /* Full-width content panel with no border-radius */
  .content { left:0; right:0; top:2.875rem; bottom:0; border-radius:0 !important; }

  /* ===== 通用侧边栏移动端适配：推挤模式 ===== */
  .cmain-body.with-sidebar,
  .page-wrap:has(> .sidebar) { flex-direction: row !important; overflow: hidden; }

  /* 收起状态：宽度为 0，不占据空间 */
  .cmain-body.with-sidebar > .sidebar,
  .page-wrap > .sidebar {
    position: relative !important;
    width: 0;
    min-width: 0 !important;
    padding: 0;
    overflow: hidden;
    transition: width .3s ease, min-width .3s ease, padding .3s ease;
    background: transparent; backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none; border-radius: 0;
    box-shadow: none;
    opacity: 1; pointer-events: auto;
    display: flex !important; flex-direction: column;
    z-index: 20;
  }

  /* 展开状态：推挤主内容 */
  .cmain-body.with-sidebar > .sidebar.open,
  .page-wrap > .sidebar.open {
    width: 13.75rem;
    min-width: 13.75rem;
    padding: 0.5rem;
    background: rgba(255,255,255,0.98); backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 0.75rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    overflow-y: auto;
  }

  /* 移动端遮罩层：fixed 覆盖主内容区域，点击关闭 */
  .sidebar-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 15;
    background: rgba(0,0,0,0.25);
  }

  /* sidebar 内部元素移动端微调 */
  .sidebar-hd > span:first-child { display: none; }
  .sidebar-toggle, .page-btn-icon, .pd-btn-icon, .cw-btn-icon, .dkb-btn-icon, .dkb-btn-toggle { width:2.25rem; height:2.25rem; padding:0; display: inline-flex; align-items: center; justify-content: center; border-radius:0.5rem; background:rgba(var(--primary-rgb),0.1); color:var(--primary); border:none; cursor:pointer; transition:.2s; }
  .sidebar-item, .dkb-kb-item { border-radius:0.5rem; }
  .sidebar-item:hover { transform: none; }
  .sidebar-item.on { box-shadow: none; }
  .sidebar-item i { font-size: var(--fs-md); width:1.25rem; text-align: center; }

  /* Card tabs: 3-column grid on mobile */
  .ctabs-card { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap:0.5rem; padding:0.625rem; 
  }
  .ctab-card { 
    width:100%; height:auto; 
    aspect-ratio: 1; padding:0.5rem 0.25rem;
    flex-direction: column; gap:0.25rem;
  }
  .ctab-card .tab-icon { font-size: var(--fs-2xl); }
  .ctab-card-name { font-size: var(--fs-2sm); word-break: break-word; }

  /* Bottom menu bar: scrollable with better spacing */
  .cbottom { 
    padding:0.25rem 0.375rem; gap:0; border-radius:1rem;
    bottom:max(0.5rem, env(safe-area-inset-bottom, 0.5rem));
    max-width:95vw; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cbtn-bottom { 
    width:auto; height:auto; 
    padding:0.5rem 0.875rem; gap:0.25rem; 
    font-size: var(--fs-xs); border-radius:0.625rem;
    flex-shrink: 0;
  }
  .cbtn-bottom i { font-size: var(--fs-lg); }

  /* Topbar: better tab scrolling */
  .topbar { padding:0 0.25rem; height:2.875rem; }
  .topbar .tabs { gap:0; }
  .topbar .tab { padding:0.375rem 0.625rem; font-size: var(--fs-md); }
  .topbar .btns button { padding:0.25rem 0.625rem; font-size: var(--fs-sm); }

  /* Subbar */
  .subbar { top:2.875rem; height:2.375rem; padding:0 0.375rem; }
  .subbar .sub { padding:0.25rem 0.625rem; font-size: var(--fs-base); }

  /* Cover elements */
  .cover-custom { font-size: 3rem; margin-bottom:6.25rem; }
  .cover .logo-icon { font-size: 4rem; }
  .cover .logo-icon img { width:3.5rem; height:3.5rem; }
  .cover .title { font-size: 2.25rem; }
  .cover .sub { font-size: var(--fs-lg); }

  /* Login/Auth panels */


  .auth-overlay .auth-title { font-size: 1.375rem; }
  .auth-overlay .auth-agreement { padding:1rem 1.125rem; max-width:96%; }
  .auth-btn { padding:0.75rem 2.5rem; font-size: var(--fs-md); }

  /* Floating buttons */
  .sa-group { bottom:max(4.5rem, calc(env(safe-area-inset-bottom, 0rem) + 3.75rem)); right:max(0.75rem, env(safe-area-inset-right, 0.75rem)); gap:0.5rem; }
  .sa-btn { width:3rem; height:3rem; font-size: var(--fs-lg); }

  /* Wallpaper/Settings panels */
  .wp-panel, .set-panel { 
    right:max(0.5rem, env(safe-area-inset-right, 0.5rem)); 
    width:calc(100% - 1rem); max-width:20rem; 
    bottom:max(4.5rem, env(safe-area-inset-bottom, 4.5rem));
    padding:0.875rem;
  }

  /* Info panel */
  .info-panel { width:94%; max-width:23.75rem; }

  /* Template editor */
  .tmpl-editor-panel { width:96%; height:88%; }

  /* Button overlay */
  .btn-overlay-panel { width:92%; height:auto; max-height:70vh; }

  /* Content header buttons */
  .cheader-btns { padding:0.375rem 0.75rem; flex-wrap: wrap; }
  .cbtn-title { padding:0.375rem 0.875rem; font-size: var(--fs-sm); }

  /* Tabs in content */
  .ctabs { padding:0.5rem 0.75rem; }
  .ctab { padding:0.625rem 0.75rem; font-size: var(--fs-sm); }


  /* Menu manage */
  .mm-row { padding:0.5rem 0.625rem; gap:0.25rem; }
  .mm-title { font-size: var(--fs-2sm); }
  .mm-actions { margin-left:0.375rem; }
  .mm-actions button { padding:0.1875rem 0.375rem; font-size: var(--fs-2xs); }

  /* Template manage — mobile: stack or compact grid */
  .template-manage { padding:0.75rem; }
  .tm-row { padding:0.5rem 0.5rem; gap:0.375rem; font-size:var(--fs-xs); grid-template-columns:minmax(0,1fr) auto auto auto; }

  /* AI provider list */
  .ai-item { flex-direction: column; align-items: stretch; padding:0.75rem; gap:0.625rem; }

  /* Code generator */
  .code-gen { padding:0.75rem; }
  .cg-section { padding:0.875rem; }
  .cg-steps { gap:0.25rem; padding:0.375rem; }
  .cg-steps span { padding:0.375rem 0.25rem; font-size: var(--fs-xs); }
  .cg-actions { flex-direction: column; gap:0.5rem; }
  .cg-actions button { width:100%; }
  /* Audit logs */
  .al-filters { flex-direction: column; }
  .al-stats { flex-direction: column; }
}

/* ===== Extra small screens (< 375px) ===== */
/* Breakpoint: --breakpoint-xs */
@media (max-width: 374px) {
  .cover-custom { font-size: 2rem; margin-bottom:3.75rem; }
  .cover .title { font-size: 1.5rem; }
  .cover .sub { font-size: var(--fs-base); }
  .cover .logo-icon { font-size: 3rem; }
  .cover .logo-icon img { width:2.5rem; height:2.5rem; }
  .topbar .tab { padding:0.25rem 0.5rem; font-size: var(--fs-sm); }
  .ctabs-card { grid-template-columns: repeat(2, 1fr); }

  .wp-panel, .set-panel { max-width:calc(100vw - 0.75rem); }
}

/* ===== Landscape mobile optimization ===== */
/* Breakpoint: --breakpoint-sm (landscape) */
@media (max-height: 480px) and (orientation: landscape) {
  .cover-custom { font-size: 2rem; margin-bottom:1.25rem; }
  .cover .logo-icon img { width:2rem; height:2rem; }
  .cover .title { font-size: 1.5rem; }
  .cover .sub { font-size: var(--fs-sm); margin-bottom:0.625rem; }
  .cover .logo-icon { font-size: 2rem; margin-bottom:0.5rem; }
  .topbar { height:2.5rem; }
  .subbar { display: none !important; }
  .content { top:2.5rem; }

  .auth-overlay .auth-title { font-size: var(--fs-lg); }
  .auth-overlay .auth-agreement { max-height:40vh; }
  .sa-group { gap:0.375rem; }
  .sa-btn { width:2.5rem; height:2.5rem; font-size: var(--fs-md); }
}

/* ===== Mobile-specific component tweaks ===== */

/* Make tables scrollable horizontally on mobile */
@media (max-width:48rem) {
  .gen-table-wrap, .bk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Universal list: toolbar stacks vertically */
  .ul-toolbar { flex-direction: column; gap:0.5rem; }
  .ul-toolbar input { width:100%; box-sizing: border-box; }
  .ul-toolbar .ul-toolbar-right { width:100%; flex-wrap: wrap; gap:0.375rem; }

  /* Universal list & table: pagination on mobile */
  .ul-pager { flex-direction: column; align-items: flex-start; gap:0.5rem; }
  .ul-pager-right { flex-wrap: wrap; gap:0.25rem; }
  .ul-pager .bk-pager { justify-content: flex-start; }
  .bk-pager { justify-content: flex-start; gap:0.25rem; }
  .boka-pagination { flex-direction: column; align-items: center; gap:0.5rem; }
  .boka-pagination button { padding:0.375rem 0.5rem; font-size:var(--fs-xs); min-width:1.75rem; }

  /* Mobile card-style list items */
  .ul-list-item { 
    display: flex; flex-direction: column; 
    padding:0.875rem; margin-bottom:0.5rem;
    background: rgba(255,255,255,0.85);
    border-radius:0.625rem; border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  }
  .ul-list-item .ul-field { 
    display: flex; justify-content: space-between; 
    padding:0.375rem 0; border-bottom: 1px solid rgba(0,0,0,0.03);
  }
  .ul-list-item .ul-field:last-child { border-bottom: none; }
  .ul-list-item .ul-field-label { 
    font-size: var(--fs-xs); color: var(--text-tertiary); 
    width:5rem; flex-shrink: 0; 
  }
  .ul-list-item .ul-field-value { 
    font-size: var(--fs-sm); color: var(--text-primary); 
    text-align: right; flex: 1; 
  }
  .ul-list-item .ul-actions { 
    display: flex; gap:0.5rem; 
    margin-top:0.625rem; padding-top:0.625rem;
    border-top: 1px solid rgba(0,0,0,0.04);
    justify-content: flex-end;
  }

  /* Universal form */
  .uf-row { flex-direction: column; align-items: stretch; gap:0.25rem; }
  .uf-row label { margin-bottom:0.125rem; }

  /* Steps on mobile */
  .steps { overflow-x: auto; -webkit-overflow-scrolling: touch; gap:0.25rem; }
  .steps span { white-space: nowrap; font-size: var(--fs-2sm); padding:0.375rem; }

  /* 无侧边栏页面在移动端保持整洁边距，与PC端统一 */
  .page-wrap:not(:has(> .sidebar)) {
    padding: 0.625rem;
    box-sizing: border-box;
  }
.page-toolbar{display:flex;align-items:center;gap:0.625rem;flex-wrap:wrap;margin-bottom:0.75rem}
  .page-wrap:not(:has(> .sidebar)) .page-toolbar > input.page-input,
  .page-wrap:not(:has(> .sidebar)) .page-toolbar > select {
    flex: 1 1 120px;
    min-width: 100px;
  }
  .page-wrap:not(:has(> .sidebar)) .page-toolbar > button {
    flex-shrink: 0;
  }
  .page-wrap:not(:has(> .sidebar)) .page-panel {
    border-radius: 0.5rem;
    padding-bottom: 4rem;
  }
}

/* ===== Pull-to-refresh indicator ===== */
.ptr-indicator {
  position: absolute; top:-3.125rem; left:0; right:0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  height:3.125rem; font-size: var(--fs-2sm); color: var(--text-tertiary);
  transition: transform 0.3s ease;
}
.ptr-indicator .ptr-spinner {
  width:1.25rem; height:1.25rem; margin-right:0.5rem;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius:50%;
  animation: ptr-spin 0.6s linear infinite;
}
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* ===== Toast positioning on mobile ===== */
@media (max-width:48rem) {
  .toast-wrap { 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
  }
  .toast { font-size: var(--fs-2sm); padding:0.5rem 0.875rem; max-width:fit-content; align-self:center; }
}

/* ===== Modal responsiveness ===== */
@media (max-width:48rem) {
  .modal-panel { width:96%; max-width:none; max-height:80vh; }
  .del-panel { width:94%; }
}

/* ===== Kimi CLI Assistant Panel ===== */
.kimi-fab{position:fixed;bottom:calc(1rem + 15rem);right:1rem;z-index:9999;width:3rem;height:3rem;border-radius:50%;color:#fff;border:1px solid rgba(255,255,255,0.35);font-size:var(--fs-2xl);cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,0.25);background:var(--primary)}
.kimi-hd-btn{background:transparent;border:none;color:rgba(255,255,255,0.7);width:1.75rem;height:1.75rem;border-radius:var(--radius-sm,0.25rem);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);transition:var(--transition,.2s ease)}
.kimi-hd-btn:hover{background:rgba(255,255,255,0.15);color:#fff}
.kimi-fab:hover{box-shadow:0 4px 16px rgba(var(--primary-rgb),0.4);transform:scale(1.08)}
.kimi-fab:active{transform:scale(0.95)}
.kimi-fab.on{box-shadow:0 0 0 4px rgba(var(--primary-rgb),0.25)}
.kimi-empty{text-align:center;color:var(--text-tertiary);margin-top:var(--space-lg,1.5rem);display:flex;flex-direction:column;align-items:center;gap:var(--space-sm,0.5rem)}
.kimi-empty-icon{font-size:var(--fs-lg,1.25rem)}
.kimi-empty-title{font-size:var(--fs-md,1rem);font-weight:600;color:var(--text-primary)}
.kimi-empty-desc{font-size:var(--fs-sm,0.875rem)}
.kimi-msg-row{display:flex;gap:0.625rem;max-width:100%}
.kimi-msg-row-user{flex-direction:row-reverse}
.kimi-msg-row-ai{flex-direction:row}
.kimi-msg-avatar{width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-md);background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.08);flex-shrink:0}
.kimi-msg-body{display:flex;flex-direction:column;gap:0.25rem;max-width:calc(100% - 2.625rem)}
.kimi-msg-meta{display:flex;align-items:center;gap:0.375rem;font-size:var(--fs-xs)}
.kimi-msg-row-user .kimi-msg-meta{justify-content:flex-end}
.kimi-msg-name{font-weight:600;color:var(--text-primary)}
.kimi-msg-time{color:var(--text-tertiary)}
.kimi-msg-content{padding:0.625rem 0.875rem;border-radius:var(--radius-md,0.5rem);word-break:break-word;font-size:var(--fs-sm,0.875rem);line-height:1.6}
.kimi-msg-content-user{background:var(--primary);color:#fff;border-bottom-right-radius:var(--radius-sm,0.25rem)}
.kimi-msg-content-ai{background:var(--bg-page,#f5f6fa);color:var(--text-secondary);border-bottom-left-radius:var(--radius-sm,0.25rem);border:1px solid var(--border,rgba(0,0,0,0.08))}
.kimi-msg-content-ai code{background:rgba(0,0,0,0.06);padding:0.125rem 0.3125rem;border-radius:0.25rem;font-family:monospace;font-size:var(--fs-sm)}
.kimi-msg-content-ai pre{background:#1e1e1e;color:#d4d4d4;padding:0.75rem;border-radius:0.5rem;overflow-x:auto;font-size:var(--fs-2sm);line-height:1.5;margin:0.5rem 0}
.kimi-msg-content-ai pre code{background:none;padding:0}
.kimi-msg-content-ai img,.kimi-msg-content-user img{max-width:100%;border-radius:0.375rem;margin:0.25rem 0;display:block}
.kimi-msg-loading{display:flex;align-items:center;gap:0.375rem;color:var(--text-tertiary);font-size:var(--fs-sm,0.875rem);padding:0.625rem 0.875rem;background:var(--bg-page,#f5f6fa);border-radius:var(--radius-md,0.5rem);border-bottom-left-radius:var(--radius-sm,0.25rem);border:1px solid var(--border,rgba(0,0,0,0.08))}
.kimi-dot{width:0.4375rem;height:0.4375rem;border-radius:50%;background:var(--primary);animation:kimi-bounce 1.4s infinite ease-in-out both}
.kimi-dot:nth-child(1){animation-delay:-0.32s}
.kimi-dot:nth-child(2){animation-delay:-0.16s}
@keyframes kimi-bounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}
.kimi-tags{display:flex;flex-wrap:wrap;gap:0.375rem}
.kimi-tag{padding:0.25rem 0.625rem;border-radius:1rem;background:rgba(var(--primary-rgb),0.08);color:var(--primary);font-size:var(--fs-xs);cursor:pointer;border:1px solid rgba(var(--primary-rgb),0.15);transition:.2s}
.kimi-tag:hover{background:var(--primary);color:#fff}
.kimi-input-row{display:flex;gap:0.5rem;align-items:flex-end}
.kimi-status{font-size:var(--fs-2xs);color:var(--text-tertiary);text-align:center}
@media (max-width:48rem){
  .kimi-fab{bottom:calc(0.75rem + 15rem);right:0.75rem;width:2.75rem;height:2.75rem;font-size:var(--fs-lg)}
}
/* ===== Map Search ===== */
.ls-row{display:flex;gap:0.25rem;align-items:center}
/* ===== 大地图人口分布 ===== */
.map-town-circle{fill-opacity:0.7;stroke:#fff;stroke-width:1.5;cursor:pointer;transition:all .2s}
.map-town-circle:hover{fill-opacity:1;stroke-width:2.5}
.map-town-popup{font-size:var(--fs-2sm);line-height:1.5}
.map-town-popup b{color:var(--primary)}








/* ===== Accessibility: Respect user's motion preference ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


.hide-mobile{display:inline}



/* ===== Unified Placeholder / Dev-in-Progress Page ===== */
.dev-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1rem;background:rgba(255,255,255,0.25);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);color:var(--text-mid);font-family:var(--font-family)}
.dev-placeholder .icon{font-size:4rem;opacity:0.7;margin-bottom:0.5rem}
.dev-placeholder h2{font-size:1.5rem;font-weight:700;color:var(--text-deep);margin:0}
.dev-placeholder p{font-size:var(--fs-base);color:var(--text-tertiary);margin:0;line-height:1.6;max-width:24rem}
.dev-placeholder .hint{font-size:var(--fs-2sm);color:var(--text-tertiary);background:rgba(0,0,0,0.04);padding:6px 14px;border-radius:20px;margin-top:0.5rem}

/* ===== Global Page Wrap Glassmorphism ===== */
.page-wrap{background:rgba(245,247,250,0.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}


/* ===== Online PPT Viewer ===== */
.ppt-entry-btn{margin-top:1.5rem;padding:0.625rem 1.5rem;border-radius:2rem;border:none;background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:var(--fs-base);font-family:var(--font-family);cursor:pointer;transition:all .25s;display:inline-flex;align-items:center;gap:.5rem;box-shadow:0 2px 8px rgba(0,0,0,0.15);text-shadow:0 1px 2px rgba(0,0,0,0.3)}
.ppt-entry-btn:hover{background:rgba(255,255,255,0.28);transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,0.25)}
.ppt-entry-btn i{font-size:var(--fs-lg)}

.ppt-overlay{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-family)}
.ppt-toolbar{position:absolute;top:0;left:0;right:0;height:3rem;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;background:rgba(30,30,30,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,0.08);z-index:10}
.ppt-toolbar-title{color:#fff;font-size:var(--fs-base);font-weight:500;display:flex;align-items:center;gap:.375rem}
.ppt-toolbar-page{color:rgba(255,255,255,0.6);font-size:var(--fs-2sm)}
.ppt-toolbar-btns{display:flex;align-items:center;gap:.375rem}
.ppt-toolbar-btns button,.ppt-file-label{width:2rem;height:2rem;border-radius:.375rem;border:none;background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.8);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);transition:all .2s}
.ppt-toolbar-btns button:hover,.ppt-file-label:hover{background:rgba(255,255,255,0.18);color:#fff}
.ppt-toolbar-btns button:disabled{opacity:.35;cursor:not-allowed}

.ppt-canvas-wrap{flex:1;width:100%;display:flex;align-items:center;justify-content:center;position:relative;padding:3.5rem 1rem 2.5rem}
.ppt-canvas-wrap canvas{max-width:100%;max-height:100%;box-shadow:0 8px 32px rgba(0,0,0,0.4);border-radius:.25rem}

.ppt-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;color:rgba(255,255,255,0.5)}
.ppt-empty-icon{font-size:3rem;opacity:.6}
.ppt-empty-text{font-size:var(--fs-md);color:rgba(255,255,255,0.7)}
.ppt-empty-sub{font-size:var(--fs-2sm);color:rgba(255,255,255,0.4)}

.ppt-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;color:rgba(255,255,255,0.7);font-size:var(--fs-base)}
.ppt-spinner{width:1.5rem;height:1.5rem;border:2px solid rgba(255,255,255,0.15);border-top-color:rgba(255,255,255,0.8);border-radius:50%;animation:ppt-spin .8s linear infinite}
@keyframes ppt-spin{to{transform:rotate(360deg)}}

.ppt-hint{position:absolute;bottom:.75rem;left:50%;transform:translateX(-50%);font-size:var(--fs-2xs);color:rgba(255,255,255,0.35);pointer-events:none}

/* Fullscreen mode: hide chrome, fill screen */
.ppt-overlay:fullscreen .ppt-toolbar{display:none}
.ppt-overlay:fullscreen .ppt-hint{display:none}
.ppt-overlay:fullscreen .ppt-canvas-wrap{padding:0}

/* PPT toolbar auto-hide, show on ESC */
.ppt-toolbar{transform:translateY(-100%);transition:transform .3s ease}
.ppt-toolbar.show{transform:translateY(0)}
.ppt-overlay:fullscreen .ppt-toolbar{transform:translateY(-100%)}
.ppt-overlay:fullscreen .ppt-toolbar.show{transform:translateY(0)}


/* ===== field-input 组件样式 ===== */
.uf-upload { display:flex; align-items:center; gap:8px; }
.uf-upload label { display:flex; align-items:center; gap:6px; padding:8px 14px; border:1px dashed var(--border); border-radius:8px; background:rgba(0,0,0,0.02); cursor:pointer; transition:.2s; color:var(--text-secondary); font-size:var(--fs-sm); }
.uf-upload label:hover { border-color:var(--primary); background:rgba(var(--primary-rgb),0.04); color:var(--primary); }

.uf-richtext { border:1px solid var(--border-light); border-radius:8px; overflow:hidden; background:#fff; }
.uf-rt-toolbar { display:flex; flex-wrap:wrap; gap:4px; padding:8px 10px; background:rgba(0,0,0,0.02); border-bottom:1px solid var(--border-light); }
.uf-rt-toolbar button { padding:4px 10px; border:1px solid transparent; border-radius:6px; background:transparent; cursor:pointer; font-size:var(--fs-2sm); color:var(--text-secondary); transition:.2s; }
.uf-rt-toolbar button:hover { background:rgba(0,0,0,0.04); color:var(--primary); border-color:var(--border-light); }
.uf-rt-editor { min-height:120px; padding:12px; font-size:var(--fs-base); line-height:1.6; color:var(--text-primary); outline:none; }
.uf-rt-editor:empty:before { content:'请输入内容...'; color:var(--text-tertiary); }

.uf-opts { display:flex; flex-wrap:wrap; gap:10px 16px; }
.uf-opts label { display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); color:var(--text-secondary); cursor:pointer; }
.uf-opts input[type="radio"], .uf-opts input[type="checkbox"] { cursor:pointer; }

.uf-relate-search { display:flex; gap:8px; margin-bottom:8px; }
.uf-relate-search input { flex:1; }

/* ===== 企业微信配置操作面板 ===== */
.wecom-actions { padding: 1rem; border-top: 1px solid var(--border,#e8e8e8); margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.wecom-action-row { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); }
.wecom-action-row label { white-space: nowrap; color: var(--text-secondary,#555); flex-shrink: 0; }
.wecom-callback-url { font-size: var(--fs-xs); word-break: break-all; flex: 1; background: #f5f5f5; padding: 0.25rem 0.5rem; border-radius: 0.25rem; }
.wecom-success { color: #10b981; font-size: var(--fs-2sm); }
.wecom-error { color: #ef4444; font-size: var(--fs-2sm); }

/* ===== 系统设置顶部工具栏 ===== */
.ss-toolbar { display: flex; align-items: center; gap: 0.5rem; padding: 0 0 0.75rem; border-bottom: 1px solid var(--border,#e8e8e8); margin-bottom: 1rem; }
.ss-extra-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border: 1px solid var(--border,#d0d7de); border-radius: 0.375rem; background: #fff; cursor: pointer; font-size: var(--fs-2sm); color: var(--text-secondary,#555); transition: all 0.15s; font-family: inherit; white-space: nowrap; }
.ss-extra-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(var(--primary-rgb),0.04); }
.ss-dropdown { padding: 0.375rem 0.625rem; border: 1px solid var(--border,#d0d7de); border-radius: 0.375rem; font-size: var(--fs-2sm); color: var(--text-secondary,#555); background: #fff; cursor: pointer; font-family: inherit; outline: none; }
.ss-dropdown:focus { border-color: var(--primary); }

/* ===== 左侧可点击列表 ===== */
.ss-sidebar-list { padding: 0.25rem 0; }
.ss-sidebar-group { padding: 0.5rem 0.75rem 0.25rem; font-size: var(--fs-2xs); font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.03em; }
.ss-sidebar-item { display: flex; flex-direction: column; padding: 0.5rem 0.75rem; cursor: pointer; border-left: 3px solid transparent; transition: all 0.12s; margin: 0.125rem 0; }
.ss-sidebar-item:hover { background: rgba(var(--primary-rgb),0.06); border-left-color: rgba(var(--primary-rgb),0.2); }
.ss-sidebar-item.on { background: rgba(var(--primary-rgb),0.1); border-left-color: var(--primary); }
.ss-sidebar-label { font-size: var(--fs-2sm); color: #333; font-weight: 500; line-height: 1.3; }
.ss-sidebar-val { font-size: var(--fs-2xs); color: #aaa; margin-top: 0.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* ===== 右侧编辑面板 ===== */
.ss-edit-panel { padding: 0.5rem 0; }
.ss-edit-label { font-size: var(--fs-md); font-weight: 600; color: #333; margin-bottom: 0.75rem; }
.ss-edit-label small { font-weight: 400; font-size: var(--fs-2sm); color: #999; margin-left: 0.375rem; }
.ss-edit-field input, .ss-edit-field textarea, .ss-edit-field select { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid var(--border,#d0d7de); border-radius: 0.5rem; font-size: var(--fs-base); outline: none; font-family: inherit; transition: border-color 0.2s, box-shadow 0.2s; background: #fff; }
.ss-edit-field input:focus, .ss-edit-field textarea:focus, .ss-edit-field select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.12); }

/* =====================================================================
   Unified Glassmorphism & Mobile Enhancement
   ===================================================================== */

/* Ensure all page-wrap children inherit glass background */
.page-wrap, .page-panel { background: rgba(245,247,250,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.page-panel-pad { padding: 1rem; }

/* Unified toolbar: responsive, wraps on mobile */
.page-toolbar { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; flex-shrink: 0; flex-wrap: wrap; background: rgba(255,255,255,0.5); border-bottom: 1px solid rgba(0,0,0,0.05); }
.page-toolbar-left { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; }
.page-toolbar-right { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; flex-shrink: 0; }
.page-input { padding: 0.4375rem 0.75rem; border: 1px solid var(--border,rgba(0,0,0,0.1)); border-radius: 0.5rem; font-size: var(--fs-sm); outline: none; background: #fff; font-family: inherit; min-height: 2.25rem; }
.page-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.08); }
.page-select { padding: 0.4375rem 0.75rem; border: 1px solid var(--border,rgba(0,0,0,0.1)); border-radius: 0.5rem; font-size: var(--fs-sm); outline: none; background: #fff; font-family: inherit; cursor: pointer; min-height: 2.25rem; }
.page-tag { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-size: var(--fs-xs); font-weight: 500; }

/* Badge */
.page-badge { display: inline-block; padding: 0.0625rem 0.4375rem; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 600; }

/* Empty state */
.page-empty { text-align: center; padding: 3rem 1.25rem; color: var(--text-tertiary); }
.page-empty-icon { font-size: 3rem; margin-bottom: 0.75rem; }
.page-empty-text { font-size: var(--fs-base); }

/* Button tooltip enhancement: built-in title attribute styling */
.bk-btn[title]:not([title=""]) { position: relative; }

/* Unified icon button for page toolbars: small, round, frosted glass */
.page-icon-btn { width: 2rem; height: 2rem; border: none; border-radius: 50%; background: rgba(var(--primary-rgb),0.1); color: var(--primary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .2s; flex-shrink: 0; font-size: var(--fs-sm); }
.page-icon-btn:hover { background: rgba(var(--primary-rgb),0.2); }

/* ===== Mobile Enhancement ===== */
@media (max-width: 768px) {
  .page-toolbar { padding: 0.5rem 0.625rem; gap: 0.375rem; }
  .page-input, .page-select { min-height: 2.5rem; font-size: var(--fs-base); }
  .page-main-pad { padding: 0.75rem; }

  /* Ensure content fills width */
  .page-wrap { overflow-x: hidden; }

  /* Stack toolbar items vertically on very small screens */
  .page-toolbar-left, .page-toolbar-right { flex: 1 1 100%; }
  .page-toolbar-right { margin-left: 0; justify-content: flex-end; }
}

@media (max-width: 480px) {
  .page-toolbar { flex-direction: column; align-items: stretch; }
  .page-toolbar-left, .page-toolbar-right { flex: 1; }
  .page-toolbar-right { justify-content: flex-start; }
  .page-main-pad { padding: 0.5rem; }
}

/* ===== Table action buttons: compact, wrap on mobile ===== */
.table-actions { display: flex; align-items: center; gap: 0.375rem; }

/* ===== Mobile: table action buttons become icon-only on small screens ===== */
@media (max-width: 480px) {
  .table-actions .bk-btn { padding: 0.375rem; font-size: var(--fs-xs); }
  .bk-table-wrap { margin: 0 -0.5rem; }
  .page-panel-pad { padding: 0.5rem; }
  /* Make tab-bar scrollable on mobile when tabs overflow */
  .tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-shrink: 0; }
  .tab-bar-item { white-space: nowrap; }
  /* Wider touch targets for action buttons in tables */
  .table-actions .bk-btn { min-height: 1.75rem; min-width: 1.75rem; }
}