/* ══════════════════════════════════════
   Sharp Print — Web Apps Shared Styles
   用于 /news/ /wiki/ /stock/ 三个应用
   与 WordPress 主站风格一致
   ══════════════════════════════════════ */

/* ── Design Tokens ── */
:root {
  --bg: #ffffff;
  --text: #111111;
  --text-2: #555555;
  --text-3: #999999;
  --border: #111111;
  --border-subtle: #e5e5e5;
  --border-ghost: #f0f0f0;
  --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,
          "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  --mono: "SF Mono", "Cascadia Code", "Consolas", "Microsoft YaHei", monospace;
  --gap: 14px;
}

/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:17px}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font);font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--text);text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* ── Top Bar (matches WordPress site-header) ── */
.app-header{
  max-width:1200px;margin:0 auto;padding:0 48px;height:60px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  position:sticky;top:0;background:var(--bg);z-index:100;
}
.app-header .brand{
  font-size:.85rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--text);flex-shrink:0;
}
.app-header .brand a{color:var(--text);text-decoration:none}
.app-header .brand a:hover{text-decoration:none}
.app-header .brand .app-tag{
  font-size:.6rem;font-weight:500;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.08em;margin-left:6px;
}
.app-header .header-nav{
  display:flex;gap:32px;font-size:.7rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;flex:1;justify-content:center;
}
.app-header .header-nav a{color:var(--text-2);text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent;transition:all .15s}
.app-header .header-nav a:hover{color:var(--text)}
.app-header .header-nav a.active{color:var(--text);font-weight:700;border-bottom-color:var(--text)}
.app-header .header-tools{
  display:flex;gap:16px;font-size:.65rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;flex-shrink:0;
}
.app-header .header-tools a{color:var(--text-3);padding:3px 10px;border:1px solid var(--border-subtle);transition:all .15s;text-decoration:none}
.app-header .header-tools a:hover{color:var(--text);border-color:var(--text)}
.app-header .header-tools a.here{color:var(--text);border-color:var(--text);font-weight:700}

/* ── Main Container ── */
.app-main{max-width:1200px;margin:0 auto;padding:32px 48px}

/* ── Footer (matches WordPress site-footer) ── */
.site-footer{
  max-width:1200px;margin:0 auto;padding:32px 48px;
  border-top:1px solid var(--border-ghost);
  display:flex;justify-content:space-between;align-items:center;
  font-size:.65rem;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.08em;
}
.site-footer a{color:var(--text-3);text-decoration:none;transition:color .15s}
.site-footer a:hover{color:var(--text)}

/* ── Cards ── */
.card{
  background:var(--bg);border:1px solid var(--border-subtle);
  padding:20px 24px;margin-bottom:var(--gap);
}
.card-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;padding-bottom:10px;
  border-bottom:2px solid var(--border);
}
.card-title{
  font-size:.8rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text);
}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 16px;font-size:.72rem;font-weight:600;cursor:pointer;
  font-family:var(--font);border:1px solid var(--border);
  text-transform:uppercase;letter-spacing:.04em;
  transition:all .1s;white-space:nowrap;
}
.btn-primary{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn-primary:hover{background:var(--text-2);border-color:var(--text-2)}
.btn-secondary{background:var(--bg);color:var(--text);border-color:var(--border)}
.btn-secondary:hover{background:var(--border-ghost)}
.btn-danger{background:var(--bg);color:#c42e2e;border-color:#c42e2e}
.btn-danger:hover{background:#fef2f2}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ── Form Inputs ── */
input,select,textarea{
  padding:7px 12px;border:1px solid var(--border-subtle);
  font-size:.8rem;font-family:var(--font);
  background:var(--bg);color:var(--text);
  transition:border-color .15s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--border);
}
input[type=date]{font-family:var(--mono);font-size:.75rem}

/* ── Tabs ── */
.tabs{
  display:flex;gap:0;border-bottom:2px solid var(--border);
  margin-bottom:20px;
}
.tab{
  padding:8px 18px;font-size:.72rem;font-weight:500;
  color:var(--text-3);cursor:pointer;
  text-transform:uppercase;letter-spacing:.05em;
  border:none;background:none;
  border-bottom:2px solid transparent;margin-bottom:-2px;
  transition:all .15s;font-family:var(--font);
}
.tab:hover{color:var(--text)}
.tab.active{color:var(--text);font-weight:700;border-bottom-color:var(--text);background:var(--border-ghost)}

/* ── Status Badges ── */
.badge{
  display:inline-block;font-size:.62rem;font-weight:700;padding:1px 7px;
  text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;
}
.badge-idle{border:1px solid var(--border-subtle);color:var(--text-3)}
.badge-running{border:1px solid #d97706;color:#b85c10;background:#fffbeb}
.badge-done{border:1px solid #16a34a;color:#1a7d3a;background:#f0fdf4}
.badge-error{border:1px solid #dc2626;color:#c42e2e;background:#fef2f2}

/* ── Tables ── */
table{width:100%;border-collapse:collapse;font-size:.78rem}
th{
  text-align:left;font-weight:700;color:var(--text);
  padding:8px 12px;border-bottom:2px solid var(--border);
  font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;
}
td{padding:7px 12px;border-bottom:1px solid var(--border-ghost)}
tr:hover td{background:var(--border-ghost)}

/* ── Log Viewer ── */
.log-viewer{
  background:#111;color:#a0d0a0;
  font-family:var(--mono);font-size:.7rem;
  padding:12px 16px;line-height:1.8;
  max-height:280px;overflow-y:auto;margin-top:10px;
}
.log-viewer .log-warn{color:#f0ad4e}
.log-viewer .log-error{color:#e74c3c}
.log-viewer .log-dim{color:#555}

/* ── Empty State ── */
.empty{text-align:center;padding:48px 20px;color:var(--text-3)}
.empty-desc{font-size:.8rem}

/* ── Grid utilities ── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}

@media(max-width:860px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .app-main{padding:20px 16px}
  .app-header{padding:0 16px}
}