/* ===== Theme Colors ===== */
:root {
    --color-primary: #b56576;
    --color-primary-hover: #9e4f60;
    --color-danger: #a04050;
    --color-danger-hover: #883848;
    --color-secondary: #8a8a8a;
    --color-secondary-hover: #6e6e6e;

    --color-bg: transparent;
    --color-text: #333;
    --color-text-muted: #888;
    --color-text-label: #555;
    --color-heading: #333;
    --color-heading-sub: #444;

    --color-card-bg: #fff;
    --color-card-shadow: rgba(0, 0, 0, 0.06);
    --color-border: #ddd;
    --color-border-light: #eee;

    --color-table-header-bg: #faf5f6;

    --color-flash-success-bg: #d4edda;
    --color-flash-success-text: #155724;
    --color-flash-success-border: #c3e6cb;
    --color-flash-error-bg: #f8d7da;
    --color-flash-error-text: #721c24;
    --color-flash-error-border: #f5c6cb;
    --color-flash-info-bg: #d1ecf1;
    --color-flash-info-text: #0c5460;
    --color-flash-info-border: #bee5eb;

    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --border-radius: 6px;
}

/* ===== Reset & Base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--font-family);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
}

/* ===== Layout ===== */
.container { max-width: 800px; margin: 0 auto; padding: 15px; }
.container.wide { max-width: 1100px; }

/* ===== Cards ===== */
.card {
    background: var(--color-card-bg);
    border-radius: var(--border-radius);
    box-shadow: 0 1px 4px var(--color-card-shadow);
    padding: 24px;
    margin-bottom: 16px;
    overflow-x: auto;
}

/* ===== Typography ===== */
h1 { color: var(--color-heading); margin-bottom: 16px; font-size: 1.4em; }
h2 { color: var(--color-heading-sub); margin-bottom: 12px; font-size: 1.15em; }

/* ===== Forms ===== */
label { display: block; margin-bottom: 4px; font-weight: 600; color: var(--color-text-label); font-size: 14px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"] {
    width: 100%; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--border-radius);
    font-size: 14px; margin-bottom: 12px; transition: border-color 0.3s; font-family: var(--font-family);
}
input:focus { outline: none; border-color: var(--color-primary); }

/* ===== Buttons ===== */
.btn {
    display: inline-block; padding: 8px 18px; border: none; border-radius: var(--border-radius);
    font-size: 14px; cursor: pointer; text-decoration: none; transition: background 0.3s; font-family: var(--font-family);
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: var(--color-danger-hover); }
.btn-secondary { background: var(--color-secondary); color: #fff; }
.btn-secondary:hover { background: var(--color-secondary-hover); }

/* ===== Flash Messages ===== */
.flash { padding: 10px 14px; border-radius: var(--border-radius); margin-bottom: 12px; font-size: 14px; }
.flash-success { background: var(--color-flash-success-bg); color: var(--color-flash-success-text); border: 1px solid var(--color-flash-success-border); }
.flash-error { background: var(--color-flash-error-bg); color: var(--color-flash-error-text); border: 1px solid var(--color-flash-error-border); }
.flash-info { background: var(--color-flash-info-bg); color: var(--color-flash-info-text); border: 1px solid var(--color-flash-info-border); word-break: break-all; }

/* ===== Navigation ===== */
nav { background: #b56576; padding: 10px 0; margin-bottom: 16px; }
nav .nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 15px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
nav a { color: rgba(255,255,255,0.85); text-decoration: none; margin-left: 12px; font-size: 14px; }
nav a:hover { color: #fff; }
nav .brand { font-size: 16px; font-weight: 700; color: #fff; text-decoration: none; margin-left: 0; }

/* ===== Tables ===== */
table { width: 100%; border-collapse: collapse; margin-top: 12px; white-space: nowrap; font-size: 14px; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--color-border-light); }
th { background: var(--color-table-header-bg); font-weight: 600; color: var(--color-text-label); }
.actions { white-space: nowrap; }
.actions form { display: inline; }
.actions .btn { padding: 4px 10px; font-size: 13px; }

/* ===== Helper ===== */
.text-muted { color: var(--color-text-muted); }
.text-small { font-size: 13px; }
.optional-label { font-weight: normal; color: var(--color-text-muted); }