/* Light Saffron Theme (Programmer's Picnic) */
:root{
  --pp-bg:#fff7e6; --pp-card:#ffffff; --pp-ink:#1f2937; --pp-muted:#6b7280;
  --pp-brand:#d97706; --pp-brand2:#f59e0b; --pp-border:#eadcc5;
  --pp-shadow:0 18px 40px rgba(31,41,55,.14);
  --pp-codebg:#0b1220; --pp-codeink:#e5e7eb;
  --pp-ok:#166534; --pp-warn:#92400e; --pp-bad:#b91c1c;
  --pp-ring:0 0 0 4px rgba(245,158,11,.22);
  --pp-radius:18px;
  --pp-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --pp-sans:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

body{
  margin:0;
  background:
    radial-gradient(1000px 600px at 10% -10%, rgba(245,158,11,.25), transparent 60%),
    radial-gradient(900px 540px at 95% 0%, rgba(217,119,6,.18), transparent 55%),
    linear-gradient(180deg, var(--pp-bg), #fff 55%, var(--pp-bg));
}

.pp-app{ font-family:var(--pp-sans); color:var(--pp-ink); }
.pp-app, .pp-app *{ box-sizing:border-box; }

.pp-wrap{ max-width:1280px; margin:18px auto; padding:14px; }
.pp-topbar{ display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:12px; }
.pp-brand{ display:flex; gap:10px; align-items:center; }
.pp-logo{
  width:42px;height:42px;border-radius:14px;
  background:conic-gradient(from 220deg, var(--pp-brand2), var(--pp-brand), #ffb020, var(--pp-brand2));
  box-shadow:var(--pp-shadow); border:1px solid rgba(0,0,0,.06); position:relative; flex:0 0 auto;
}
.pp-logo:after{ content:"</>"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:900; color:#111827; opacity:.9; }

.pp-title{ margin:0; font-size:18px; line-height:1.2; }
.pp-sub{ margin:2px 0 0; color:var(--pp-muted); font-size:12px; }
.pp-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

.pp-btn{
  appearance:none; border:1px solid var(--pp-border); background:var(--pp-card); color:var(--pp-ink);
  border-radius:14px; padding:10px 12px; box-shadow:0 10px 24px rgba(31,41,55,.08);
  cursor:pointer; font-weight:800; font-size:13px; transition:transform .06s ease, box-shadow .2s ease, border-color .2s ease;
  user-select:none; line-height:1;
}
.pp-btn:hover{ transform:translateY(-1px); box-shadow:0 16px 30px rgba(31,41,55,.12); border-color:#e6cfae; }
.pp-btn:active{ transform:translateY(0); }
.pp-btn:focus-visible{ outline:none; box-shadow:var(--pp-shadow), var(--pp-ring); }
.pp-btn-primary{ background:linear-gradient(180deg, var(--pp-brand2), var(--pp-brand)); border-color:transparent; color:#111827; }
.pp-btn-danger{ background:#fff; border-color:#f3c7c7; color:var(--pp-bad); }
.pp-btn-ghost{ background:transparent; box-shadow:none; }

.pp-kbd{
  font-family:var(--pp-mono); font-size:11px; padding:2px 6px; border:1px solid var(--pp-border);
  border-bottom-width:2px; border-radius:8px; background:#fff; margin-left:4px;
}

.pp-grid{ display:grid; grid-template-columns:1.35fr .85fr; gap:12px; }
@media (max-width:980px){ .pp-grid{ grid-template-columns:1fr; } .pp-actions{ justify-content:flex-start; } }

.pp-card{
  background:rgba(255,255,255,.82);
  border:1px solid var(--pp-border);
  border-radius:var(--pp-radius);
  box-shadow:var(--pp-shadow);
  overflow:hidden;
  backdrop-filter:blur(6px);
}

.pp-cardhead{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px; border-bottom:1px solid var(--pp-border);
  background:linear-gradient(180deg, rgba(255,241,214,.88), rgba(255,255,255,.6));
}
.pp-cardhead h2{ margin:0; font-size:14px; }
.pp-small{ font-size:12px; color:var(--pp-muted); }
.pp-toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }

.pp-pill{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--pp-border); background:rgba(255,255,255,.6);
  padding:8px 10px; border-radius:999px; font-size:12px; color:var(--pp-muted);
  white-space:nowrap;
}
.pp-select,.pp-input,.pp-textarea{
  border:1px solid var(--pp-border); background:#fff; border-radius:14px; padding:9px 10px; font-size:13px; outline:none;
}
.pp-select:focus,.pp-input:focus,.pp-textarea:focus{ box-shadow:var(--pp-ring); border-color:#e6cfae; }
.pp-toggle{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--pp-border); border-radius:999px; background:#fff; font-weight:900; font-size:12px; cursor:pointer; user-select:none; }
.pp-toggle input{ accent-color:var(--pp-brand); }
.pp-toggle-wide{ width:100%; justify-content:flex-start; }

.pp-editorwrap{ display:grid; grid-template-rows:auto auto 1fr auto; min-height:650px; }
.pp-tabs{ display:flex; gap:8px; padding:10px 12px; border-bottom:1px solid var(--pp-border); background:rgba(255,255,255,.55); overflow:auto; }
.pp-tab{
  display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
  border:1px solid var(--pp-border); background:#fff; padding:8px 12px;
  border-radius:999px; font-weight:900; font-size:12px; cursor:pointer; line-height:1;
}
.pp-tab.pp-active{ background:linear-gradient(180deg, var(--pp-brand2), var(--pp-brand)); border-color:transparent; }

.pp-editorarea{ background:var(--pp-codebg); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); position:relative; min-height:560px; }
.pp-editor{ position:absolute; inset:0; display:grid; grid-template-columns:auto 1fr; font-family:var(--pp-mono); font-size:14px; line-height:1.55; }
.pp-gutter{
  padding:12px 10px; text-align:right; color:rgba(229,231,235,.45);
  background:rgba(255,255,255,.03); border-right:1px solid rgba(255,255,255,.06);
  user-select:none; min-width:52px; white-space:pre; overflow:hidden;
}
.pp-code{
  width:100%; height:100%; padding:12px 12px;
  color:var(--pp-codeink); caret-color:#fff; background:transparent; border:0; outline:none; resize:none;
  font-family:var(--pp-mono); font-size:14px; line-height:1.55; tab-size:4; white-space:pre; overflow:auto;
}

.pp-footerbar{
  padding:10px 12px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,241,214,.58));
  border-top:1px solid var(--pp-border);
}
.pp-status{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.pp-dot{ width:10px;height:10px;border-radius:999px;background:#9ca3af; display:inline-block; }
.pp-dot.ok{ background:var(--pp-ok); } .pp-dot.warn{ background:var(--pp-warn); } .pp-dot.bad{ background:var(--pp-bad); }
.pp-progress{ height:10px; width:180px; background:rgba(17,24,39,.08); border:1px solid var(--pp-border); border-radius:999px; overflow:hidden; }
.pp-bar{ height:100%; width:0%; background:linear-gradient(90deg, var(--pp-brand2), var(--pp-brand)); transition:width .25s ease; }
.pp-footerRight{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.pp-split{ display:grid; gap:12px; grid-template-rows:auto auto auto auto 1fr auto; }
.pp-pad{ padding:12px; }
.pp-io{ width:100%; min-height:78px; font-family:var(--pp-mono); font-size:13px; line-height:1.45; }

.pp-out{
  background:#0b1220; color:#e5e7eb; border:1px solid rgba(255,255,255,.07);
  border-radius:16px; padding:10px; font-family:var(--pp-mono); font-size:13px; line-height:1.55;
  min-height:180px; max-height:560px; overflow:auto; white-space:pre-wrap; word-break:break-word;
}
.pp-out-stderr{ opacity:.95; }
.pp-judge{ border:1px dashed #eadcc5; background:rgba(255,255,255,.6); border-radius:16px; padding:10px; }
.pp-judge h3{ margin:0 0 6px; font-size:13px; }
.pp-judge p{ margin:6px 0; font-size:12px; color:var(--pp-muted); line-height:1.45; }

.pp-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pp-row > * { flex: 0 0 auto; }

.pp-badge{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--pp-border);
  background:rgba(255,255,255,.72); padding:8px 10px; border-radius:999px; font-size:12px; color:var(--pp-muted);
}

.pp-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width:520px){ .pp-grid2{ grid-template-columns:1fr; } }

.pp-mono{ font-family:var(--pp-mono); font-size:12px; }

.pp-table{ width:100%; border-collapse:separate; border-spacing:0 8px; margin-top:10px; }
.pp-table th{ text-align:left; font-size:12px; color:var(--pp-muted); padding:0 6px; }
.pp-table td{ vertical-align:top; padding:10px; background:rgba(255,255,255,.75); border:1px solid var(--pp-border); border-radius:14px; }

.pp-toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  background:#111827; color:#fff; border:1px solid rgba(255,255,255,.18);
  padding:10px 12px; border-radius:999px; box-shadow:0 18px 50px rgba(0,0,0,.25);
  font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  max-width:min(92vw,900px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pp-toast.show{ opacity:1; transform:translateX(-50%) translateY(-2px); }