@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&family=Quicksand:wght@500;700&display=swap');

* { box-sizing: border-box; }
body { margin: 0; background: #f7f4fa; color: #2c3e50; font-family: "Quicksand", sans-serif; min-height: 100vh; }
header { background: #fff; border-bottom: 1px solid #eee; padding: 18px 24px; }
.header-banner { max-width: 1100px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.brand { color: #b52df1; font: 700 1.8rem "Comfortaa", sans-serif; text-decoration: none; }
.container { max-width: 1100px; width: calc(100% - 32px); margin: 28px auto; }
main { min-height: 65vh; }
.hero-section { background: #fff; border-radius: 14px; padding: 32px; box-shadow: 0 5px 22px #24193612; }
.auth-main { display: flex; align-items: center; justify-content: center; }
.auth-card { max-width: 500px; width: 100%; }
.page-title { font-family: "Comfortaa", sans-serif; color: #2c3e50; text-align: center; font-size: 2.2em; margin: 0 0 28px; }
.intro { text-align: center; line-height: 1.7; }
.landing { display: flex; align-items: center; justify-content: center; }
.landing .hero-section { max-width: 760px; width: 100%; padding: 55px 32px; }
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 320px; margin: 25px auto 0; }
.form-group {
    text-align: left;
    margin-bottom: 20px;
    width: 100%;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #2c3e50;
    font-size: 1em;
}
.form-control {
    width: 100%;
    padding: 12px;
    font-family: "Quicksand", sans-serif;
    font-size: 1em;
    border: 3px solid #ddd;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s;
}
.form-control:focus { border-color: #b52df1; }
.btn-submit {
    width: 100%;
    background-color: #b52df1;
    color: white;
    cursor: pointer;
    margin-top: 10px;
    font-family: "Quicksand", sans-serif;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-size: 1.05em;
    font-weight: bold;
    transition: background-color 0.2s;
    display: inline-block;
    text-align: center;
    text-decoration: none;
}
.btn-submit:hover { background-color: #711997; }
.btn-submit:disabled { opacity: .65; cursor: wait; }
.alert {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.95em;
}
.alert-error { background-color: #ffe6e6; color: #cc0000; border: 2px solid #ffcccc; }
.alert-success { background-color: #e6ffe6; color: #006600; border: 2px solid #ccffcc; }
.register-link {
    display: block;
    margin-top: 20px;
    font-family: "Quicksand", sans-serif;
    font-size: 0.95em;
    color: #555;
    text-align: center;
}
.register-link a { color: #b52df1; text-decoration: none; }
.register-link a:hover { text-decoration: underline; }
.secondary-link { color: #b52df1; text-decoration: none; }
.secondary-link:hover { text-decoration: underline; }
.top-nav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.top-nav a, footer a { color: #b52df1; text-decoration: none; font-weight: 700; }
.top-nav a:hover, footer a:hover { text-decoration: underline; }
.nav-button { border: 0; background: transparent; color: #b52df1; font: 700 1em "Quicksand", sans-serif; cursor: pointer; }
footer { text-align: center; color: #777; padding: 22px 0; }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-top: 28px; }
.feature-card, .item-card { display: block; padding: 20px; border: 2px solid #eee; border-radius: 10px; color: #2c3e50; text-decoration: none; background: #fff; }
.feature-card:hover { border-color: #b52df1; }
.feature-card h2 { color: #b52df1; margin-top: 0; font-family: "Comfortaa", sans-serif; }
.section-title { font: 700 1.25rem "Comfortaa", sans-serif; margin: 30px 0 14px; }
.item-list { display: grid; gap: 10px; }
.item-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.item-card p { margin: 4px 0; }
.small-button { border: 0; background: #b52df1; color: white; border-radius: 7px; padding: 9px 13px; cursor: pointer; font: 700 .9rem "Quicksand", sans-serif; }
.small-button:hover { background: #711997; }
.chat-area { margin-top: 28px; }
.messages-list { height: 320px; overflow-y: auto; border: 2px solid #eee; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.message-bubble { max-width: 85%; padding: 10px 13px; border-radius: 10px; background: #f1e4f8; overflow-wrap: anywhere; }
.message-bubble.mine { align-self: flex-end; background: #ead0f8; }
.message-meta { display: block; color: #71577d; font-size: .78rem; margin-bottom: 4px; }
.message-form { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.message-form .btn-submit { width: auto; min-width: 90px; }
.hidden { display: none; }
small { color: #777; display: block; margin-top: 6px; }
textarea.form-control { resize: vertical; }
@media (max-width: 650px) {
  .hero-section { padding: 22px; }
  .page-title { font-size: 1.8em; }
  .top-nav { width: 100%; gap: 12px; }
  .message-form { flex-direction: column; align-items: stretch; }
  .message-form .btn-submit { width: 100%; }
}