:root{
  /* Light theme */
  --bg:#f7fafc;
  --panel:#ffffff;
  --card:#ffffff;
  --muted:#5b6472;
  --text:#101218;
  --line:#e6e9ef;
  --accent:#0ea5e9;
  --accent-2:#0891b2;
  --good:#10b981;
  --warn:#f59e0b;
  --bad:#ef4444;
  --shadow:0 6px 18px rgba(9,30,66,.08);

  --btn-bg: rgba(0,0,0,.02);
  --btn-border: var(--line);
  --btn-text: var(--text);
  --btn-hover: rgba(14,165,233,.10);
  --btn-ghost-bg: transparent;
  --btn-ghost-border: var(--line);
  --btn-ghost-text: var(--text);
  --btn-ghost-hover: rgba(0,0,0,.04);
}

/* Dark theme */
html[data-theme="dark"]{
  --bg:#0b0c10;
  --panel:#111218;
  --card:#161821;
  --muted:#9aa3b2;
  --text:#e9edf3;
  --line:#252838;
  --accent:#0ea5e9;
  --accent-2:#22d3ee;
  --shadow:0 8px 24px rgba(0,0,0,.25);

  --btn-bg: rgba(255,255,255,.06);
  --btn-border: var(--line);
  --btn-text: var(--text);
  --btn-hover: rgba(255,255,255,.12);
  --btn-ghost-bg: transparent;
  --btn-ghost-border: var(--line);
  --btn-ghost-text: var(--text);
  --btn-ghost-hover: rgba(255,255,255,.10);
}

*{box-sizing:border-box}
html,body{margin:0; padding:0; background:var(--bg); color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; line-height:1.45}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px; margin:0 auto; padding:96px 20px 48px}

/* Header */
.pk-header{position:sticky; top:0; z-index:50; background:var(--panel); border-bottom:1px solid var(--line); box-shadow:var(--shadow)}
.pk-header .bar{max-width:1100px; margin:0 auto; display:flex; align-items:center; gap:16px; padding:14px 20px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px}
.badge{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:white; font-weight:900}
.spacer{flex:1}
.mode-toggle{border:1px solid var(--line); background:transparent; color:var(--text); padding:8px 10px; border-radius:10px; cursor:pointer}
.back{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); padding:8px 12px; border-radius:10px}

/* Footer */
footer{margin-top:48px; border-top:1px solid var(--line); background:var(--panel)}
footer .inner{max-width:1100px; margin:0 auto; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; color:var(--muted)}

/* Hero */
.hero{display:flex; flex-direction:column; gap:10px; margin-bottom:18px}
.title{font-size:clamp(24px,2.6vw,34px); font-weight:800; letter-spacing:.2px}
.subtitle{color:var(--muted)}

/* Cards */
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow)}
.grid{display:grid; grid-template-columns:1fr; gap:16px}
@media(min-width:900px){ .grid{grid-template-columns:1fr 1fr} }
.kicker{font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted)}
.h2{font-size:20px; font-weight:800; margin:8px 0 10px}
.h3{font-weight:700; margin:14px 0 8px}
.muted{color:var(--muted)}
.callout{border-left:4px solid var(--accent); padding:10px 12px; background:rgba(14,165,233,.08); border-radius:8px}

/* Forms */
.row{display:grid; grid-template-columns:1fr; gap:10px}
@media(min-width:640px){ .row{grid-template-columns:repeat(2,1fr)} }
label{font-size:13px; color:var(--muted)}
input, select, textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); background:transparent; color:var(--text);
  border-radius:10px; outline:none;
}
input:focus, select:focus, textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(14,165,233,.25)}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--btn-border); cursor:pointer; background:var(--btn-bg); color:var(--btn-text); transition:background .15s,border-color .15s}
.btn:hover{background:var(--btn-hover)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:white; border:0}
.btn.ghost{background:var(--btn-ghost-bg); color:var(--btn-ghost-text); border:1px solid var(--btn-ghost-border)}
.btn.ghost:hover{background:var(--btn-ghost-hover)}

.btn-row{display:flex; gap:10px; flex-wrap:wrap}
.monosmall{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:12px}
.table{width:100%; border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--line); padding:10px 8px; text-align:left; vertical-align:top}
.tag{display:inline-flex; align-items:center; padding:3px 8px; font-size:12px; border-radius:999px; border:1px solid var(--line); color:var(--muted)}
.flex{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.small{font-size:12px}
.success{color:var(--good)} .warn{color:var(--warn)} .danger{color:var(--bad)}
.sep{height:1px; background:var(--line); margin:14px 0}
details{background:transparent; border:1px solid var(--line); border-radius:12px; padding:12px; margin:10px 0}
details > summary{cursor:pointer; font-weight:700}
.right{text-align:right}
.note{font-size:12px; color:var(--muted)}

.share-wrap{margin-top:8px; display:flex; gap:8px; align-items:center}
.share-url{flex:1; padding:10px 12px; border:1px dashed var(--line); background:transparent; color:var(--text); border-radius:10px}

.figure{display:flex; flex-direction:column; gap:8px}
.figure img{width:100%; height:auto; border-radius:12px; border:1px solid var(--line)}
.figure figcaption{font-size:12px; color:var(--muted)}

.two-col{display:grid; grid-template-columns:1fr; gap:16px}
@media(min-width:980px){ .two-col{grid-template-columns:1.15fr .85fr} }

@media print {
  .no-print, .mode-toggle, .btn, .back, .share-wrap, details { display:none !important; }
  .container { padding: 0 0 0 0; }
  .card { box-shadow:none; border-color:#ccc; }
  a { text-decoration:none; color:#000; }
}