* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; background: #f0f2f5; color: #333; }

/* NAV */
nav { background: #1a1a2e; color: #fff; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; }
nav h1 { font-size: 18px; color: #f4a015; text-decoration: none; }
nav a  { color: #f4a015; text-decoration: none; font-size: 18px; font-weight: bold; }
nav span { font-size: 13px; color: #aaa; }
nav .logout { background: #f4a015; color: #000; border: none; padding: 6px 12px; border-radius: 5px; cursor: pointer; font-size: 13px; text-decoration: none; }

/* TABS */
.tabs { display: flex; background: #fff; border-bottom: 2px solid #ddd; padding: 0 20px; flex-wrap: wrap; }
.tab  { padding: 12px 16px; font-size: 14px; color: #666; border-bottom: 3px solid transparent; margin-bottom: -2px; text-decoration: none; display: inline-block; }
.tab:hover { color: #1a1a2e; }
.tab.active { color: #1a1a2e; border-bottom-color: #f4a015; font-weight: bold; }

/* PAGE */
.page { padding: 24px; max-width: 920px; margin: 0 auto; }

/* CARD */
.card { background: #fff; border-radius: 8px; padding: 22px; margin-bottom: 18px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.card h2 { font-size: 16px; margin-bottom: 14px; color: #1a1a2e; }

/* STATS */
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 18px; }
.stat  { background: #fff; border-radius: 8px; padding: 16px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.stat .num { font-size: 32px; font-weight: bold; }
.stat .lbl { font-size: 12px; color: #888; margin-top: 4px; }
.num-red   { color: #c0392b; }
.num-green { color: #27ae60; }
.num-blue  { color: #2980b9; }

/* FORMS */
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group.full { grid-column: 1 / -1; }
label { font-size: 12px; color: #666; }
input, select, textarea { border: 1px solid #ccc; padding: 8px 10px; border-radius: 5px; font-size: 13px; font-family: Arial; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #f4a015; }
textarea { resize: vertical; min-height: 75px; }

/* BUTTONS */
.btn         { padding: 9px 18px; border: none; border-radius: 5px; cursor: pointer; font-size: 13px; font-family: Arial; display: inline-block; text-decoration: none; }
.btn-primary { background: #1a1a2e; color: #fff; }
.btn-green   { background: #28a745; color: #fff; }
.btn-small   { padding: 4px 10px; font-size: 12px; background: #eee; border-radius: 4px; cursor: pointer; border: 1px solid #ccc; text-decoration: none; color: #333; }
.btn-claim   { padding: 4px 10px; font-size: 12px; background: #28a745; color: #fff; border-radius: 4px; cursor: pointer; border: none; }

/* TABLE */
table  { width: 100%; border-collapse: collapse; font-size: 13px; }
th     { background: #f5f5f5; padding: 10px; text-align: left; font-size: 12px; color: #666; border-bottom: 1px solid #ddd; }
td     { padding: 10px; border-bottom: 1px solid #eee; vertical-align: middle; }
tr:last-child td { border: none; }

/* BADGES */
.badge    { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; }
.b-lost   { background: #fde8e8; color: #c0392b; }
.b-found  { background: #e8f8e8; color: #27ae60; }
.b-claimed{ background: #e8f0ff; color: #2980b9; }

/* ALERTS */
.alert         { border-radius: 6px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }
.alert-success { background: #d4edda; border: 1px solid #28a745; }
.alert-error   { background: #fff3cd; border: 1px solid #ffc107; }

/* INFO BOX */
.info-box { background: #fff8e1; border: 1px solid #f4a015; border-radius: 6px; padding: 10px 14px; font-size: 12px; color: #555; margin-bottom: 16px; }

/* PASSWORD EYE */
.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 40px; }
.eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; font-size: 16px; user-select: none; }

/* LOGIN BOX */
.login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box { background: #fff; padding: 32px; border-radius: 10px; width: 360px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); text-align: center; }
.login-box h1 { color: #f4a015; font-size: 20px; margin-bottom: 4px; }
.login-box p  { color: #888; font-size: 12px; margin-bottom: 20px; }
.login-box .form-group { text-align: left; margin-bottom: 12px; }
.auth-tabs { display: flex; border-bottom: 2px solid #eee; margin-bottom: 16px; }
.auth-tab  { flex: 1; padding: 8px; cursor: pointer; font-size: 13px; color: #aaa; text-decoration: none; text-align: center; border-bottom: 2px solid transparent; margin-bottom: -2px; display: inline-block; }
.auth-tab.active { font-weight: bold; color: #1a1a2e; border-bottom-color: #f4a015; }

/* STICKER */
.sticker { border: 2px solid #000; padding: 20px; text-align: center; background: #fff; border-radius: 4px; max-width: 320px; margin: 0 auto; }
@media print {
  nav, .tabs, .page > p, .btn, h2 { display: none !important; }
  body { background: #fff; }
  .sticker { border: 2px solid #000; max-width: 300px; margin: 20px auto; }
}