* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
       background: #f5f6fa; color: #1a1a1a; }
.hidden { display: none !important; }
.muted { color: #888; }
.error { color: #c0392b; margin-top: 8px; }
.success { color: #27ae60; margin-top: 8px; }

.topbar { display: flex; align-items: center; padding: 12px 24px;
          background: #fff; border-bottom: 1px solid #e1e4eb;
          box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.brand { font-weight: 600; font-size: 18px; color: #2c3e50; }
.userbar { margin-left: auto; }

main#root { max-width: 1080px; margin: 24px auto; padding: 0 24px; }
h2 { margin: 0 0 16px; font-weight: 600; }
h3 { font-weight: 600; }
h4 { margin: 0 0 12px; font-weight: 600; }

.card { background: #fff; border-radius: 10px; padding: 20px; margin-bottom: 16px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.forms { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .forms { grid-template-columns: 1fr; } }

form label { display: block; margin-bottom: 10px; font-size: 14px; color: #555; }
form input[type="text"], form input[type="email"], form input[type="password"],
form input[type="number"], form input[type="search"], form select, form textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #d4d8e0; border-radius: 6px;
  font-size: 14px; margin-top: 4px;
}
form input:focus { outline: 2px solid #4a90e2; outline-offset: -1px; }

button, .btn { background: #4a90e2; color: #fff; border: 0; border-radius: 6px;
               padding: 8px 16px; font-size: 14px; cursor: pointer;
               text-decoration: none; display: inline-block; }
button:hover, .btn:hover { background: #3a7bc8; }
button:disabled { background: #ccc; cursor: not-allowed; }
button.danger { background: #e74c3c; }
button.danger:hover { background: #c0392b; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
         gap: 12px; }
.tile { background: #fff; border-radius: 10px; padding: 16px; text-align: center;
        text-decoration: none; color: inherit; display: flex; flex-direction: column;
        align-items: center; gap: 8px; transition: transform 0.15s, box-shadow 0.15s;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.tile:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.tile.tile-personal { border-left: 4px solid #27ae60; }
.tile.tile-org      { border-left: 4px solid #4a90e2; }
.tile .logo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.tile .logo.placeholder { background: #ddd; display: flex; align-items: center;
        justify-content: center; font-size: 24px; font-weight: 600; color: #777; }
.tile .title { font-weight: 600; font-size: 14px; }
.tile .kind  { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid #e1e4eb; margin-bottom: 16px; }
.tab { padding: 10px 16px; background: transparent; border: 0; cursor: pointer;
       border-bottom: 2px solid transparent; color: #555; }
.tab.active { color: #4a90e2; border-bottom-color: #4a90e2; }

table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px;
        overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eef0f4; font-size: 14px; }
th { background: #f8f9fb; font-weight: 600; color: #555; }
tr:last-child td { border-bottom: 0; }

.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.toolbar .grow { flex: 1; }

#yandex-map { width: 100%; height: 420px; border-radius: 8px; background: #eee; }