:root{
  --bg:#f7f7fb; --card:#fff; --line:#ececf1; --text:#202124; --muted:#6b7280;
  --accent:#6c5ce7; --accent-2:#8a7dff; --danger:#e03131; --ok:#16a34a;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);
     font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}

/* NAV */
.nav{display:flex;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);background:#fff}
.nav .brand{font-weight:700;color:#111;text-decoration:none}
.nav .nav-link{margin-left:12px}
.nav .sp{flex:1}
.nav .lang a{margin-left:8px}

/* LAYOUT */
.container{max-width:1200px;margin:16px auto;padding:0 16px}
.grid{display:grid;gap:16px}
@media (min-width:980px){ .grid.cols-2{grid-template-columns:360px 1fr} }
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.04)}
.card h2,.card h3{margin:0 0 10px}

/* FORMS */
label{font-size:12px;color:var(--muted);display:block;margin:10px 2px 6px}
.input, input[type="text"], input[type="email"], input[type="password"], textarea, select{
  width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:14px;background:#fafbff
}
textarea{min-height:140px;resize:vertical}

/* BUTTONS */
.btn{display:inline-block;padding:10px 14px;border:1px solid var(--line);border-radius:10px;
     background:#fafafa;color:#111;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost{background:#fff}
.btn.danger{background:#fff;border-color:#ffd6d6;color:var(--danger)}
.btn + .btn{margin-left:8px}

/* TABLES */
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line);text-align:left}
.table th{background:#fafbff;font-weight:600}

/* TAGS & MESSAGE */
.tag{display:inline-block;background:#f4f4ff;border:1px solid #eceaff;border-radius:999px;padding:2px 8px;margin:2px;font-size:12px}
.small{color:var(--muted);font-size:12px}
.notice{background:#fffbe6;border:1px solid #ffe58f;padding:10px;border-radius:10px}
.err{background:#fff1f0;border:1px solid #ffa39e;color:#a8071a;padding:10px;border-radius:10px}
.ok{background:#f6ffed;border:1px solid #b7eb8f}

/* PROGRESS */
.progress{height:12px;background:#f1f1fb;border-radius:999px;overflow:hidden;border:1px solid #edeef9}
.progress > span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}