:root{
  --bg:#f3f7ff;
  --card:#ffffff;
  --text:#1d2b4f;
  --muted:#546186;
  --blue:#2563eb;
  --blue-dark:#1d4ed8;
  --violet:#6d28d9;
  --line:#d7e1ff;
  --danger:#b91c1c;
  --ok:#0f766e;
  --radius:18px;
  --shadow:0 10px 30px rgba(37,99,235,.12);
  --touch:44px;
}

*{box-sizing:border-box;min-width:0}
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{
  margin:0;
  font-family:Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top right,#e9f0ff,transparent 45%),
    radial-gradient(circle at bottom left,#eef4ff,transparent 40%),
    var(--bg);
  line-height:1.5;
  padding-bottom:calc(env(safe-area-inset-bottom) + 12px);
}

a{color:var(--blue);text-decoration:none;word-break:break-word}
a:hover{color:var(--blue-dark)}

h1,h2,h3{margin:0 0 .6rem 0;line-height:1.25}
p{margin:.35rem 0 .75rem}

img,svg,video,canvas{max-width:100%;height:auto}

.container{width:min(1120px,92vw);margin:0 auto;padding:0 12px}

.card{
  background:var(--card);
  padding:clamp(.9rem,2.5vw,1.15rem);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow-wrap:anywhere;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  background:var(--blue);
  color:#fff;
  padding:.75rem 1rem;
  min-height:var(--touch);
  border-radius:12px;
  border:0;
  cursor:pointer;
  line-height:1.2;
  text-align:center;
  font-weight:600;
}
.btn:hover{background:var(--blue-dark);color:#fff}
.btn-secondary{background:var(--violet)}
.btn-secondary:hover{background:#5b21b6}
.btn-ghost{background:#eef4ff;color:#1e3a8a}
.btn-ghost:hover{background:#dbeafe;color:#1e3a8a}

input,textarea,select{
  width:100%;
  max-width:100%;
  padding:.8rem;
  margin:.35rem 0;
  border-radius:12px;
  border:1px solid #b9c9ff;
  background:#fff;
  font:inherit;
  color:inherit;
  min-height:var(--touch);
}
textarea{min-height:120px;resize:vertical}

label{display:block;font-weight:600;margin-top:.5rem}
small{color:var(--muted)}

pre,code{white-space:pre-wrap;word-break:break-word;overflow:auto}

table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{border-bottom:1px solid var(--line);padding:.55rem .4rem;text-align:left;vertical-align:top}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px;background:#fff}

.stack{display:flex;flex-direction:column;gap:.7rem}
.mt-1{margin-top:1rem}
.mt-2{margin-top:2rem}
.muted{color:var(--muted)}
.alert{padding:.75rem .9rem;border-radius:12px;border:1px solid transparent}
.alert-danger{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.alert-success{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}

@media (max-width:768px){
  body{padding-bottom:calc(env(safe-area-inset-bottom) + 84px)}
  .container{width:min(100%,98vw);padding:0 10px}
  h1{font-size:1.5rem}
  h2{font-size:1.25rem}
  .btn{width:100%;min-height:46px}
  table{display:block;overflow-x:auto;white-space:nowrap}
  input,textarea,select,button{font-size:16px}
  textarea{min-height:110px}
}