/* GazuaSEO design tokens: white / #EF4F4B / black */
:root { --brand: #EF4F4B; --brand-dark: #D93C38; --brand-soft: #FEECEB; }
html { scroll-behavior: smooth; }

.g-input { width: 100%; border: 1px solid #d4d4d4; background: #fff; color: #171717; border-radius: .5rem; padding: .625rem .75rem; font-size: .875rem; }
.g-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(239,79,75,.25); }
.dark .g-input { background: #171717; border-color: #404040; color: #f5f5f5; }

.g-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .5rem; background: var(--brand); color: #fff; font-weight: 600; font-size: .875rem; padding: .625rem 1.25rem; transition: background .15s; white-space: nowrap; }
.g-btn:hover { background: var(--brand-dark); }
.g-btn:disabled { opacity: .6; cursor: not-allowed; }
.g-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .5rem; border: 1px solid #d4d4d4; background: transparent; color: inherit; font-weight: 600; font-size: .875rem; padding: .625rem 1.25rem; transition: all .15s; white-space: nowrap; }
.g-btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.dark .g-btn-outline { border-color: #404040; }
.g-btn-danger { display: inline-flex; align-items: center; justify-content: center; border-radius: .5rem; border: 1px solid var(--brand); background: transparent; color: var(--brand); font-weight: 600; font-size: .875rem; padding: .5rem 1rem; transition: all .15s; }
.g-btn-danger:hover { background: var(--brand); color: #fff; }
.g-btn-danger:disabled { opacity: .6; cursor: not-allowed; }

.g-card { border: 1px solid #e5e5e5; border-radius: 1rem; padding: 1.25rem; background: #fff; }
.dark .g-card { border-color: #262626; background: #0a0a0a; }

.g-wrap { overflow-x: auto; border: 1px solid #e5e5e5; border-radius: .5rem; }
.dark .g-wrap { border-color: #262626; }
.g-table { width: 100%; text-align: left; font-size: .875rem; }
.g-table th { padding: .5rem .75rem; font-weight: 600; white-space: nowrap; background: #fafafa; }
.dark .g-table th { background: #171717; }
.g-table td { padding: .5rem .75rem; border-top: 1px solid #e5e5e5; vertical-align: top; }
.dark .g-table td { border-color: #262626; }
.g-trunc { display: block; max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.g-badge { display: inline-block; border-radius: .375rem; padding: .125rem .5rem; font-size: .75rem; font-weight: 700; background: #f5f5f5; color: #262626; margin: .1rem .1rem .1rem 0; white-space: nowrap; }
.dark .g-badge { background: #262626; color: #f5f5f5; }
.g-badge-brand { background: var(--brand); color: #fff; }
.g-badge-dark { background: #000; color: #fff; }
.dark .g-badge-dark { background: #fff; color: #000; }

.g-nav-link { display: flex; align-items: center; gap: .625rem; border-radius: .5rem; padding: .5rem .75rem; font-size: .875rem; font-weight: 500; transition: all .15s; }
.g-nav-link:hover { background: var(--brand-soft); color: var(--brand); }
.dark .g-nav-link:hover { background: rgba(239,79,75,.12); }
.g-nav-link.active { background: var(--brand); color: #fff; }

.spinner { width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }