:root{--primary:#1677ff;--text:#1f1f1f;--sub:#595959;--border:#e5e6eb;--bg:#fafafa;--danger:#cf1322;--warn:#ad6800;}
*{box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",Arial;color:var(--text);background:#fff;margin:24px}
h2{margin:0 0 16px}
.ant-tabs{display:flex;gap:8px;margin-bottom:16px}
.ant-tab{padding:8px 14px;border:1px solid var(--border);border-bottom:2px solid transparent;border-radius:8px;background:#fff;color:var(--sub);text-decoration:none}
.ant-tab.active{color:var(--text);border-color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
.ant-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px 8px;text-align:left;vertical-align:middle}
.table th{background:var(--bg);color:#444}
.row{display:flex;gap:16px}
.col{flex:1}
.input {
  border:1px solid var(--border);
  border-radius:8px;
  padding:0 10px;
  height:36px;               /* 統一高度 */
  width:100%;
}
.btn{border:1px solid var(--border);background:#fff;border-radius:8px;padding:6px 10px;cursor:pointer}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn.warn{border-color:#ffe58f;color:var(--warn)}
.btn.danger{border-color:#ffccc7;color:var(--danger)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.msg{margin-bottom:12px;color:#389e0d;font-weight:600}
.search{display:flex;gap:8px;margin-bottom:12px}
.img-thumb{width:48px;height:48px;object-fit:contain;border:1px solid var(--border);border-radius:8px;background:#fff}
.phone{width:360px;height:640px;border:10px solid #111;border-radius:36px;overflow:hidden;background:#000;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.phone iframe{width:100%;height:100%;border:0;background:#fff}
.tr-disabled{background:#f5f5f5;color:#a0a0a0}
.tr-disabled .btn{opacity:.7}
.tag{display:inline-block;background:var(--bg);border:1px solid var(--border);padding:2px 6px;border-radius:6px;color:#555}
/* 浮動通知 */
.notice {
  position: fixed;
  top: 20px;
  right: 20px;
  min-width: 200px;
  max-width: 360px;
  background: #52c41a;   /* 預設綠色 */
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-size: 14px;
  z-index: 9999;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.notice.show {
  opacity: 1;
  transform: translateY(0);
}
.notice.error { background: #f5222d; }   /* 紅色 */
.notice.warn  { background: #faad14; }   /* 橘色 */
.notice.success { background: #52c41a; } /* 綠色 */

/* === 追加：搜尋框高度 & 對齊 === */
.search{ align-items: center; }
.search .input{ height:36px; line-height:36px; padding:0 10px; }
.search .btn{ height:36px; line-height:34px; }

/* === 追加：表格內行內表單/按鈕對齊 === */
.form-inline{ display:flex; gap:6px; align-items:center; }
.actions .btn{ margin-right:6px; }

/* === 追加：線路預設顯示為綠色標籤 === */
.label-green{
  display:inline-block;
  background:#f6ffed;
  border:1px solid #b7eb8f;
  color:#389e0d;
  padding:2px 8px;
  border-radius:12px;
  font-size:12px;
}

/* === 追加：無手機殼的預覽盒（用在 create 頁「網址」下方） === */
.preview-wrap{ margin-top:12px; }
.preview{
  width:360px; height:640px;              /* 9:16，接近 1083.56 x 1925 比例 */
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  overflow:hidden;
  background:#fff;
}
.preview iframe{ width:100%; height:100%; border:0; }

/* === 追加：表頭「編號」排序按鈕樣式 === */
.sort-btn{
  border:0; background:transparent; color:var(--primary);
  cursor:pointer; padding:0 4px;
}
.sort-btn:hover{ text-decoration:underline; }

/* 搜尋列：按鈕顏色與對齊 */
.search{ align-items:center; }
.search .btn.sky {
  background:#69b1ff;        /* 淡藍 */
  color:#fff; 
  border-color:#91caff;
  width:80px;
  height:36px;               /* 與輸入框高度一致 */
  display:flex;
  align-items:center;        /* 垂直置中 */
  justify-content:center;    /* 水平置中 */
  font-weight:500;
}
.search .btn.sky:hover{ filter:brightness(.96); }

/* 表頭顏色用主文字色；排序鈕跟著表頭顏色走 */
.table th{ color:var(--text); }        /* 原本是 #444，改成與主文字一致 */
.sort-btn{ color:inherit; }            /* 黑色，跟「編號」同色 */

/* 圖片 + 更新按鈕垂直置中 */
.cell-img{ display:flex; align-items:center; gap:8px; }

/* 讓操作欄內的按鈕更齊 */
.actions .btn{ margin-right:6px; }

/* 線路標籤維持 */
.label-green{
  display:inline-block;background:#f6ffed;border:1px solid #b7eb8f;color:#389e0d;
  padding:2px 8px;border-radius:12px;font-size:12px
}

.btn.sky{
  background:#69b1ff;
  color::#fff!important;
  border:1px solid #91caff;
  font-size: 14px;
}
.btn.sky:hover{
  background:#4096ff;
  color:#fff!important;
  text-decoration:none;
}

.btn.oss{
  background:#fff;          
  color:#7c4a00;               
  border:1px solid #ffbb96;
}
.btn.oss:hover{
  background:#fa8c16;          
  color:#fff;                  
  border-color:#fa8c16;
  text-decoration:none;
}

.url-link{
  color:#000000;
  text-decoration:none;
  word-break: break-all;
}
.url-link:hover{
  color:#1677ff;   
  text-decoration:underline;
}