/* ==== BASE ==== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans','Liberation Sans',sans-serif;background:#ffffff;color:#111827}
.wrap{max-width:1080px;margin:0 auto;padding:14px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.06);padding:14px}

/* ==== TOPBAR / FLOATING ==== */
.topbar{position:sticky;top:0;z-index:20;background:#ffffffcc;backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #e5e7eb;padding:10px 12px;display:flex;align-items:center;gap:10px}
.topbar a{text-decoration:none;font-weight:700;color:#0ea5e9;border:1px solid #bae6fd;padding:8px 12px;border-radius:10px}
.topbar h1{margin:0;font-size:16px;color:#0f172a}
.floating-bar{position:fixed;left:0;right:0;bottom:0;padding:10px 12px;background:#fffffff2;border-top:1px solid #e5e7eb;backdrop-filter:saturate(180%) blur(8px);display:flex;gap:8px;justify-content:center}
.btn,button{display:inline-block;padding:10px 12px;border-radius:12px;border:1px solid #0ea5e9;background:linear-gradient(135deg,#0ea5e9,#10b981);color:#fff;font-weight:700;text-decoration:none;cursor:pointer}
.btn:hover,button:hover{filter:brightness(.96)}

/* ==== FORMS (uppercase on input only) ==== */
label{display:block;margin:8px 0 4px;font-weight:600}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:12px;outline:none;background:#f9fafb;}
input:focus,select:focus,textarea:focus{border-color:#60a5fa;background:#fff;box-shadow:0 0 0 4px rgba(59,130,246,.15)}
.box{max-width:520px;margin:18px auto;padding:14px;background:#fff;border-radius:16px;border:1px solid #e5e7eb;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.help{color:#6b7280;font-size:12px}
.msg{background:#ecfdf5;border:1px solid #10b981;padding:8px 10px;border-radius:10px;margin:8px 0}
.error{background:#fef2f2;border:1px solid #ef4444;padding:8px 10px;border-radius:10px;margin:8px 0}

/* ==== TABLES ==== */
.table{width:100%;border-collapse:collapse;margin-top:10px}
.table th,.table td{padding:9px 10px;border:1px solid #e5e7eb;text-align:left}
.table th{background:#f3f4f6}

/* ==== DASHBOARD GRID & TILES ==== */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:820px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.tile{display:block;padding:14px;border-radius:14px;color:#fff;text-decoration:none;font-weight:800;letter-spacing:.3px;box-shadow:0 8px 18px rgba(16,185,129,.18);border:0;font-size:13px;line-height:1.2;min-height:74px}
.tile .sub{display:block;margin-top:4px;font-weight:500;opacity:.95;color:#eafcf5;font-size:11px}
.tile .ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:#ffffff22;margin-right:8px;vertical-align:middle}
.tile svg{width:14px;height:14px;display:block}
.tile.bluegreen{background:linear-gradient(135deg,#0284c7,#10b981)}
.tile.teal{background:linear-gradient(135deg,#0ea5e9,#14b8a6)}
.tile.cyan{background:linear-gradient(135deg,#06b6d4,#22c55e)}
.tile.em{background:linear-gradient(135deg,#2563eb,#10b981)}
.tile:hover{transform:translateY(-2px);transition:all .18s ease;box-shadow:0 12px 24px rgba(16,185,129,.26)}

/* ==== UTIL ==== */
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.small{font-size:12px;color:#6b7280}


/* Floating labels + inputs uppercase only */
.fl{position:relative;margin-top:14px}
.fl input,.fl select,.fl textarea{width:100%;padding:16px 12px 12px;border:1px solid #d1d5db;border-radius:12px;background:#f9fafb;outline:none;}
.fl input:focus,.fl select:focus,.fl textarea:focus{border-color:#60a5fa;background:#fff;box-shadow:0 0 0 4px rgba(59,130,246,.12)}
.fl label{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#6b7280;pointer-events:none;transition:all .18s ease;background:transparent;padding:0 4px}
.fl input:not(:placeholder-shown)+label,.fl input:focus+label,
.fl select:focus+label,.fl textarea:focus+label{top:0;transform:translateY(-50%) scale(.9);background:#fff;color:#0ea5e9}


/* == FLOATING LABELS & INPUTS == */
.fl{position:relative;margin-top:14px}
.fl input,.fl select,.fl textarea{width:100%;padding:16px 12px 12px;border:1px solid #d1d5db;border-radius:12px;background:#f9fafb;outline:none;text-transform:uppercase}
.fl input:focus,.fl select:focus,.fl textarea:focus{border-color:#60a5fa;background:#fff;box-shadow:0 0 0 4px rgba(59,130,246,.12)}
.fl label{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#6b7280;pointer-events:none;transition:all .18s ease;background:transparent;padding:0 4px}
.fl input:not(:placeholder-shown)+label,.fl input:focus+label,
.fl select:focus+label,.fl textarea:focus+label{top:0;transform:translateY(-50%) scale(.9);background:#fff;color:#0ea5e9}

.wrap{max-width:1080px;margin:0 auto;padding:14px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.06);padding:14px}
.topbar{position:sticky;top:0;z-index:20;background:#ffffffcc;backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #e5e7eb;padding:10px 12px;display:flex;align-items:center;gap:10px}
.topbar a{text-decoration:none;font-weight:700;color:#0ea5e9;border:1px solid #bae6fd;padding:8px 12px;border-radius:10px}
.topbar h1{margin:0;font-size:16px;color:#0f172a}
.btn,button{display:inline-block;padding:10px 12px;border-radius:12px;border:1px solid #0ea5e9;background:linear-gradient(135deg,#0ea5e9,#10b981);color:#fff;font-weight:700;text-decoration:none;cursor:pointer}
.btn:hover,button:hover{filter:brightness(.96)}

/* Tiles/Grid */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:820px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tile{display:block;padding:14px;border-radius:14px;color:#fff;text-decoration:none;font-weight:800;letter-spacing:.3px;box-shadow:0 8px 18px rgba(16,185,129,.18);border:0;font-size:13px;line-height:1.2;min-height:74px}
.tile .sub{display:block;margin-top:4px;font-weight:500;opacity:.95;color:#eafcf5;font-size:11px}
.tile .ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:#ffffff22;margin-right:8px;vertical-align:middle}
.tile svg{width:14px;height:14px;display:block}
.tile.bluegreen{background:linear-gradient(135deg,#0284c7,#10b981)}
.tile.teal{background:linear-gradient(135deg,#0ea5e9,#14b8a6)}
.tile.cyan{background:linear-gradient(135deg,#06b6d4,#22c55e)}
.tile.em{background:linear-gradient(135deg,#2563eb,#10b981)}
.tile:hover{transform:translateY(-2px);transition:all .18s ease;box-shadow:0 12px 24px rgba(16,185,129,.26)}

/* Table */
.table{width:100%;border-collapse:collapse;margin-top:10px}
.table th,.table td{padding:9px 10px;border:1px solid #e5e7eb;text-align:left}
.table th{background:#f3f4f6}
.small{font-size:12px;color:#6b7280}