/* App chrome variables + base — ported from the Content Studio design's <style> block */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root {
  --app-bg:#f4efe7; --app-panel:#ffffff; --app-text:#1f1f21; --app-text2:#3a3a3c;
  --app-muted:#6f6f77; --app-border:#e0e1e6; --app-input:#ffffff; --app-sunken:#f8f3e9;
  --app-accent-soft:#eef0f9; --app-accent-soft-bd:#d6daf0; --app-accent-text:#283891;
}
.dark-app {
  --app-bg:#14161b; --app-panel:#1c1f26; --app-text:#f3f4f6; --app-text2:#cbccd2;
  --app-muted:#8c8f99; --app-border:#2b2f39; --app-input:#23262f; --app-sunken:#23262f;
  --app-accent-soft:#1b2540; --app-accent-soft-bd:#2a3866; --app-accent-text:#8f9cdd;
}

.ksb::-webkit-scrollbar { width: 10px; }
.ksb::-webkit-scrollbar-thumb { background: var(--app-border); border-radius: 8px; border: 3px solid var(--app-panel); }

textarea, input { font-family: var(--font-sans); }
textarea:focus, input:focus { outline: none; border-color: var(--kapatid-blue) !important; box-shadow: 0 0 0 3px var(--focus-ring); }

button { font-family: var(--font-sans); }
.tpl-btn:hover { background: var(--app-accent-soft) !important; }

/* Login screen */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--kapatid-blue);
}
.login-card {
  background: #fff;
  border-radius: 20px;
  padding: 48px 40px 40px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,0.25);
}
.login-logo { width: 72px; height: 72px; object-fit: contain; margin-bottom: 16px; }
.login-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #283891;
  margin: 0 0 4px;
}
.login-sub {
  font-size: 0.875rem;
  color: #6f6f77;
  margin: 0 0 24px;
}
.login-error {
  background: #fceced;
  color: #bf1e2e;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.875rem;
  margin-bottom: 16px;
}
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-form input {
  height: 48px;
  padding: 0 16px;
  border: 2px solid #e0e1e6;
  border-radius: 10px;
  font-size: 0.9375rem;
  color: #1f1f21;
  background: #f8f3e9;
}
.login-form input:focus { outline: none; border-color: #283891; box-shadow: 0 0 0 3px rgba(40,56,145,0.15); }
.login-form button {
  height: 48px;
  border-radius: 10px;
  border: none;
  background: #283891;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.15s;
}
.login-form button:hover { background: #3846b2; }