*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:system-ui,-apple-system,sans-serif;background:#f4f3fb;min-height:100vh;}

/* ── 頂欄 ── */
.topbar{height:52px;background:#534AB7;display:flex;align-items:center;padding:0 24px;gap:8px;position:sticky;top:0;z-index:100;}
.barea{display:flex;align-items:center;gap:8px;margin-right:12px;}
.bname{font-size:13px;font-weight:600;color:#ffffff;}
#nav-btns{display:flex;gap:4px;}
.sp{flex:1;}
.ava{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.2);color:#ffffff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;cursor:pointer;user-select:none;}
.ava:hover{background:rgba(255,255,255,0.35);}

/* ── 按鈕（通用）── */
.btn{padding:5px 16px;border-radius:999px;font-size:12px;font-weight:500;border:1.5px solid #aaaaaa;background:#ffffff;color:#333333;cursor:pointer;white-space:nowrap;line-height:1.4;}
.btn:hover{border-color:#534AB7;color:#534AB7;}
.btn.on{background:#534AB7;color:#ffffff;border-color:#534AB7;}
.btn.on:hover{background:#3d3891;border-color:#3d3891;}
.btn.danger{background:#FCEBEB;border-color:#f0c0c0;color:#A32D2D;}
.btn.danger:hover{background:#f5d0d0;border-color:#e0a0a0;}
.btn.success{border-color:#86EFAC;color:#166534;}
.btn.success:hover{background:#DCFCE7;}
.btn.bu-cf.on{background:#534AB7;border-color:#534AB7;color:#ffffff;}
.btn.bu-cf.on:hover{background:#3d3891;border-color:#3d3891;}

/* ── 導覽列按鈕（覆蓋通用樣式）── */
#nav-btns .btn{color:#ffffff;border-color:transparent;background:transparent;}
#nav-btns .btn:hover{background:rgba(255,255,255,0.15);border-color:transparent;color:#ffffff;}
#nav-btns .btn.on{background:rgba(255,255,255,0.2);border-color:transparent;color:#ffffff;}
#nav-btns .btn.on:hover{background:rgba(255,255,255,0.3);border-color:transparent;}

/* ── 子頁籤（覆蓋通用樣式）── */
.stabs .btn{background:#ffffff;color:#666666;border-color:#cccccc;}
.stabs .btn:hover{border-color:#534AB7;color:#534AB7;background:#ffffff;}
.stabs .btn.on{background:#534AB7;color:#ffffff;border-color:#534AB7;}
.stabs .btn.on:hover{background:#3d3891;border-color:#3d3891;}

/* ── 主內容 ── */
.cnt{padding:14px;max-width:1200px;margin:0 auto;}
.scr{display:none;}
.scr.on{display:block;}
.stabs{display:flex;gap:6px;margin-bottom:14px;}

/* ── 統計卡片 ── */
.sr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px;}
.sc{background:#ffffff;border-radius:10px;padding:12px 14px;box-shadow:0 1px 4px rgba(83,74,183,0.06);}
.sc.red{background:#FEF2F2;}
.sc.hl{border-left:3px solid #534AB7;padding-left:11px;}
.sl{font-size:12px;color:#999999;margin-bottom:3px;}
.sv{font-size:21px;font-weight:700;color:#534AB7;line-height:1.2;}
.sc.red .sv{color:#A32D2D;}
.ss{font-size:10px;color:#cccccc;margin-top:2px;}

/* ── 卡片 ── */
.card{background:#ffffff;border-radius:10px;padding:14px 16px;margin-bottom:12px;box-shadow:0 1px 4px rgba(83,74,183,0.06);}
.ct{font-size:13px;font-weight:600;color:#1a1a1a;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.cs{font-size:11px;font-weight:400;color:#bbbbbb;}

/* ── 表格 ── */
.t{width:100%;table-layout:fixed;font-size:12px;border-collapse:collapse;}
.t th{font-size:12px;font-weight:600;color:#3C3489;padding:8px 6px;background:#EEEDFE;text-align:left;}
.t th:first-child{border-radius:6px 0 0 6px;}
.t th:last-child{border-radius:0 6px 6px 0;}
.t td{padding:8px 6px;border-top:0.5px solid #f0effe;vertical-align:middle;color:#1a1a1a;}
.t tr:first-child td{border-top:none;}
.t tr:last-child td{border-bottom:none;}
.t tr.h:hover td{background:#f8f7fe;cursor:pointer;}
.t tr.gr td{background:#FFF5F5;}
.t tr.gr:hover td{background:#FFE4E4;cursor:pointer;}
.dr{display:none;}
.dr td{background:#f8f7fe!important;font-size:11px;color:#888888;padding:7px 6px;}

/* ── 分級徽章 ── */
.gd{display:inline-block;font-size:10px;font-weight:600;padding:2px 9px;border-radius:999px;}
.g4{background:#DCFCE7;color:#166534;}
.g3{background:#EEEDFE;color:#534AB7;}
.g2{background:#FEF9C3;color:#854D0E;}
.g1{background:#F3F4F6;color:#4B5563;}
.gp{background:#FEF9C3;color:#92600A;}

/* ── 國家 badge（縮短版圓形）── */
.cy{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#EEEDFE;color:#534AB7;font-size:10px;font-weight:600;margin-right:2px;flex-shrink:0;}

/* ── 跨國缺口 badge ── */
.gb{display:inline-block;font-size:10px;padding:2px 7px;border-radius:4px;font-weight:600;background:#FCEBEB;color:#A32D2D;}

/* ── 播放按鈕 ── */
.pb{display:inline-flex;font-size:10px;padding:3px 9px;border-radius:6px;background:#534AB7;color:#ffffff;cursor:pointer;text-decoration:none;border:none;margin:1px;}
.pb:hover{background:#3d3891;color:#ffffff;}

/* ── 上傳日期 badge ── */
.dp{display:inline-block;font-size:10px;padding:1px 6px;border-radius:4px;background:#F3F4F6;color:#888888;}

/* ── 備註 ── */
.nt{font-size:10px;color:#cccccc;margin-top:2px;cursor:pointer;}
.nt:hover{color:#534AB7;}
.nt.has{color:#888888;font-style:italic;}
.ni{font-size:11px;width:100%;border:1px solid #e0e0e0;border-radius:3px;padding:2px 5px;outline:none;display:none;margin-top:2px;color:#333333;background:#ffffff;}

/* ── 狀態點 ── */
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:3px;}
.dot-pending{background:#F59E0B;}
.dot-running{background:#22C55E;}

/* ── 勾選框 ── */
.cb{width:16px;height:16px;border-radius:3px;border:1.5px solid #bbbbbb;background:#ffffff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.cb.on{background:#534AB7;border-color:#534AB7;}
.cb.on::after{content:'';display:block;width:4px;height:7px;border:1.5px solid #fff;border-top:none;border-left:none;transform:rotate(45deg) translateY(-1px);}

/* ── 表單 ── */
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.fg{display:flex;flex-direction:column;gap:4px;}
.fg label{font-size:11px;color:#888888;}
.fg select,.fg input{width:100%;font-size:12px;padding:5px 8px;border:1px solid #cccccc;border-radius:7px;outline:none;color:#1a1a1a;background:#ffffff;}
.fg select:focus,.fg input:focus{border-color:#534AB7;}
.iadd{display:none;align-items:center;gap:6px;margin-top:5px;}
.iadd input{flex:1;font-size:12px;padding:4px 8px;border:1px solid #cccccc;border-radius:6px;outline:none;color:#1a1a1a;}
.iadd button{font-size:11px;padding:4px 12px;border-radius:999px;border:1.5px solid #aaaaaa;background:#ffffff;color:#333333;cursor:pointer;}
.iadd button:hover{border-color:#534AB7;color:#534AB7;}

/* ── 修改面板 ── */
.edit-panel{background:#f8f7fe;border:1px solid #e8e6f8;border-radius:10px;padding:13px 15px;margin-bottom:12px;}

/* ── 圖書館工具欄 ── */
.ebar{background:#f8f7fe;border:1px solid #e8e6f8;border-radius:8px;padding:10px 13px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.ecnt{font-size:11px;color:#534AB7;background:#ffffff;padding:2px 9px;border-radius:999px;border:1px solid #c4b5fd;}
.sbr{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.sbox{flex:1;border:1.5px solid #aaaaaa;border-radius:999px;padding:5px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-height:36px;cursor:text;background:#ffffff;}
.sbox:focus-within{border-color:#534AB7;}
.tc{display:inline-flex;align-items:center;gap:4px;background:#534AB7;color:#ffffff;font-size:11px;padding:2px 9px;border-radius:999px;}
.tc-x{cursor:pointer;opacity:.7;}
.tc-x:hover{opacity:1;}
.si{border:none;outline:none;font-size:12px;color:#1a1a1a;min-width:80px;background:transparent;flex:1;}
.adp{display:none;background:#f8f7fe;border:1px solid #e8e6f8;border-radius:8px;padding:10px 13px;margin-bottom:8px;}
.adp.on{display:block;}
.nores{text-align:center;color:#cccccc;font-size:12px;padding:24px 0;}

/* ── 管理員區塊標題 ── */
.asec{font-size:12px;font-weight:600;color:#333333;margin:14px 0 8px;padding:6px 12px;background:#EEEDFE;border-radius:6px;border-left:3px solid #534AB7;}
.atag{font-size:12px;background:#ffffff;border:1px solid #cccccc;border-radius:6px;padding:4px 10px;display:inline-flex;align-items:center;gap:5px;margin:3px;}
.atag-x{cursor:pointer;color:#A32D2D;font-size:14px;line-height:1;}

/* ── CSV 上傳 ── */
.csv-drop{border:1.5px dashed #bbbbbb;border-radius:8px;padding:18px;text-align:center;color:#aaaaaa;font-size:12px;cursor:pointer;transition:border-color .15s,background .15s;}
.csv-drop:hover,.csv-drop.drag{border-color:#534AB7;background:#f0edff;color:#534AB7;}

/* ── 分級提示 ── */
.grade-hint{font-size:10px;border-radius:6px;padding:5px 8px;}
.g4-hint{background:#DCFCE7;border:1px solid #86EFAC;color:#166534;}
.g3-hint{background:#EEEDFE;border:1px solid #c4b5fd;color:#534AB7;}
.g2-hint{background:#FEF9C3;border:1px solid #FDE047;color:#854D0E;}
.g1-hint{background:#F3F4F6;border:1px solid #D1D5DB;color:#4B5563;}

/* ── 管理員行銷角色鎖 ── */
.role-readonly #ed-form-card{display:none;}

/* ── Combobox ── */
.cmb{position:relative;}
.cmb-input{width:100%;font-size:12px;padding:5px 8px;border:1px solid #cccccc;border-radius:7px;outline:none;color:#1a1a1a;background:#ffffff;}
.cmb-input:focus{border-color:#534AB7;}
.cmb-list{position:absolute;top:calc(100% + 2px);left:0;right:0;background:#ffffff;border:1px solid #cccccc;border-radius:7px;box-shadow:0 4px 14px rgba(0,0,0,.1);z-index:200;max-height:200px;overflow-y:auto;display:none;}
.cmb-list.open{display:block;}
.cmb-item{padding:6px 10px;font-size:12px;cursor:pointer;color:#333333;}
.cmb-item:hover{background:#f3f0fd;color:#534AB7;}
.cmb-item.cmb-new{color:#534AB7;font-weight:500;border-top:1px solid #f0f0f0;}
.cmb-item.cmb-new:hover{background:#EEEDFE;}

/* ── 多國連結列 ── */
.link-row{display:flex;gap:6px;align-items:center;margin-bottom:6px;}
.link-row select{flex:0 0 auto;width:auto;font-size:12px;padding:4px 6px;border:1px solid #cccccc;border-radius:6px;color:#1a1a1a;background:#fff;min-width:90px;}
.link-row input{flex:1;width:0;font-size:12px;padding:4px 8px;border:1px solid #cccccc;border-radius:6px;color:#1a1a1a;background:#fff;outline:none;}
.link-row input:focus{border-color:#534AB7;}
.link-row .lnk-rm{flex-shrink:0;padding:2px 8px;font-size:12px;border-radius:999px;border:1.5px solid #f0c0c0;background:#FCEBEB;color:#A32D2D;cursor:pointer;}
.link-row .lnk-rm:hover{background:#f5d0d0;}

@media(max-width:600px){
  .sr{grid-template-columns:1fr 1fr;}
  .fg2{grid-template-columns:1fr;}
}