/* Design System Base Variables */
:root{
  --font-title: "Microsoft YaHei","PingFang SC","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
  --font-body: "PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.08);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow-md: 0 6px 18px rgba(0,0,0,.12);
  --shadow-lg: 0 12px 28px rgba(0,0,0,.16);

  --gap-2: 2px;
  --gap-4: 4px;
  --gap-8: 8px;
  --gap-12: 12px;
  --gap-16: 16px;
  --gap-20: 20px;
  --gap-24: 24px;

  --transition-fast: 120ms ease;
  --transition: 200ms ease;
  --transition-slow: 320ms ease;
}

html,body{height:100%}
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
}

.container{max-width:1120px;margin:0 auto;padding:32px}
.grid{display:grid;gap:20px}

/* Primitives */
.card{
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  border: 1px solid var(--color-border);
}
.card-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.card-title{font-family:var(--font-title);font-size:22px;font-weight:700;color:var(--color-title)}
.card-sub{color:var(--color-text-2);font-size:14px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border-radius:12px;padding:10px 16px;font-weight:500;border:1px solid transparent;transition:all var(--transition);}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--color-primary);color:#fff;box-shadow:inset 0 -2px 0 rgba(0,0,0,.1)}
.btn-primary:hover{background:var(--color-primary-600)}
.btn-outline{background:transparent;color:var(--color-primary);border-color:var(--color-primary-300)}
.btn-outline:hover{background:var(--color-primary-50)}
.btn-ghost{background:transparent;color:var(--color-text)}
.btn-ghost:hover{background:var(--color-hover)}
.btn-danger{background:var(--color-danger);color:#fff}

.tag{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--color-primary-50);color:var(--color-primary-700);border:1px solid var(--color-primary-100);font-size:14px;font-weight:600}

.input{background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;padding:10px 12px;outline:none;color:var(--color-text);transition:all var(--transition)}
.input::placeholder{color:var(--color-text-3)}
.input:focus{border-color:var(--color-primary-400);box-shadow:0 0 0 3px var(--color-primary-50)}

.select{appearance:none}

.checkbox{width:16px;height:16px;border-radius:6px;border:1px solid var(--color-border);display:inline-flex;align-items:center;justify-content:center;background:var(--color-surface);cursor:pointer}
.checkbox.checked{background:var(--color-primary);border-color:var(--color-primary)}

.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table th{font-weight:700;color:var(--color-text-2);text-align:left;padding:10px 12px}
.table td{background:var(--color-surface);border:1px solid var(--color-border);padding:12px;border-left:none;border-right:none}

.pill{border-radius:999px}

.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:var(--color-hover);padding:2px 6px;border-radius:6px;border:1px solid var(--color-border);}

.section-title{font-family:var(--font-title);font-weight:800;font-size:28px;margin:8px 0 16px;color:var(--color-title)}
.muted{color:var(--color-text-3)}

.nav{position:sticky;top:0;z-index:10;background:var(--color-surface);border-bottom:1px solid var(--color-border);backdrop-filter:none;box-shadow:0 2px 4px rgba(0,0,0,.05)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1120px;margin:0 auto;height:80px;padding:0 15px}
.nav a{color:var(--color-title);text-decoration:none;font-weight:700;margin-right:16px}
.nav .actions{display:flex;gap:10px}

/* Demo layout helpers */
.row{display:flex;gap:12px;flex-wrap:wrap}
.col{flex:1;min-width:260px}

/* Modal mock */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.4)}
.modal.open{display:flex}
.modal-card{width:min(560px,92vw)}

/* Animations */
@keyframes pop{from{transform:scale(.98);opacity:.8}to{transform:scale(1);opacity:1}}
.pop{animation:pop var(--transition)}