/* ========== Base Public Styles ========== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");

:root {
   --bg: #f6f8fa;
   --text: #111827;
   --muted: #6b7280;
   --primary: #0b5fff;
   --accent: #22d3ee;
   --radius: 8px;
   --white: #ffffff;
   --shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

* {
   box-sizing: border-box;
}

html,
body {
   height: 100%;
   margin: 0;
   padding: 0;
}

body {
   margin: 0;
   font-family:
      Inter,
      system-ui,
      -apple-system,
      Segoe UI,
      Roboto,
      Arial,
      sans-serif;
   background: var(--bg);
   color: var(--text);
   line-height: 1.5;
   display: flex;
   flex-direction: column;
   
   min-height: 100vh;
}

main.container {
   flex: 1;
   width: 100%;
}

a {
   color: var(--white);
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}

.container {
   max-width: 1100px;
   margin: 0 auto;
   padding: 0 16px;
}

h1,
h2,
h3,
h4,
h5 {
   margin: 0 0 0.5em;
   font-weight: 700;
}

h1 {
   font-size: clamp(28px, 4vw, 42px);
}
h2 {
   font-size: clamp(22px, 3vw, 32px);
}

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--radius);
   padding: 8px 12px;
   border: none;
   cursor: pointer;
   font-weight: 600;
}

.btn-primary {
   background: var(--primary);
   color: var(--white);
}

.btn-primary:hover {
   background: #0044cc;
}

.btn-outline {
   background: transparent;
   border: 1px solid var(--primary);
   color: var(--primary);
}

.text-muted {
   color: var(--muted);
}

main {
   padding: 20px 0;
}

img {
   max-width: 100%;
   height: auto;
}

@media (max-width: 640px) {
   .container {
      padding: 0 12px;
   }
}

/* ===== Public: messages ===== */
.pub-messages {
   list-style: none;
   margin: 12px 0 0;
   padding: 0;
}
.pub-msg {
   background: #fff;
   border: 1px solid #e5e7eb;
   border-radius: 10px;
   padding: 10px 12px;
   margin-bottom: 8px;
}
.pub-msg.error {
   border-color: #fecaca;
   background: #fff1f2;
}
.pub-msg.success {
   border-color: #bbf7d0;
   background: #f0fdf4;
}

/* ===== Public: auth layout ===== */
.pub-auth {
   background: #fff;
   border-radius: 12px;
   box-shadow: var(--shadow);
   padding: 24px;
   width: min(520px, 96%);
   margin: 24px auto 40px;
}
.pub-auth__title {
   margin: 0 0 12px;
}
.pub-auth__alt {
   margin-top: 12px;
   color: var(--muted);
}

/* ===== Public: form base ===== */
.pub-form {
   display: grid;
   gap: 12px;
}
.pub-form__row {
   display: grid;
   gap: 6px;
}
.pub-label {
   font-weight: 600;
}
.pub-form input[type="text"],
.pub-form input[type="email"],
.pub-form input[type="password"],
.pub-form input[type="number"],
.pub-form select,
.pub-form textarea {
   padding: 10px 12px;
   border-radius: 10px;
   border: 1px solid #e5e7eb;
   font: inherit;
   background: #fff;
   color: var(--text);
}
.pub-form__errors {
   display: grid;
   gap: 6px;
   margin-bottom: 6px;
}
.pub-error {
   color: #b91c1c;
   font-size: 13px;
}
.pub-form__actions {
   display: flex;
   gap: 12px;
   align-items: center;
   margin-top: 4px;
}

/* small tweak for mobile */
@media (max-width: 640px) {
   .pub-auth {
      padding: 20px;
   }
   .pub-form__actions {
      flex-wrap: wrap;
   }
}

/* ===== Public: card block ===== */
.pub-card {
   background: #fff;
   border: 1px solid #e5e7eb;
   border-radius: 12px;
   padding: 20px;
}
.mb-16 {
   margin-bottom: 16px;
}
.pub-card h3 {
   margin-top: 0;
   margin-bottom: 8px;
}

.pub-card .btn {
   margin-top: 8px;
}

/* ===== Public: table ===== */
.pub-table {
   width: 100%;
   border-collapse: collapse;
}
.pub-table th,
.pub-table td {
   text-align: left;
   padding: 8px 10px;
   border-bottom: 1px solid #eee;
}
.pub-table th {
   font-weight: 600;
   background: #f9fafb;
}