:root {
    --bg: #121417;
    --bg-soft: #171a20;
    --panel: rgba(24, 28, 34, 0.92);
    --panel-2: rgba(32, 36, 44, 0.98);
    --text: #f6f2df;
    --muted: #efe1b2;
    --line: rgba(255, 193, 7, 0.16);
    --accent: #ffc107;
    --accent-soft: #ffd560;
    --shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
}
html, body { min-height: 100%; }
* { box-sizing: border-box; }
body {
    margin: 0;
    color: var(--text);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16.5px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background:
        radial-gradient(circle at top right, rgba(255, 193, 7, 0.12), transparent 28%),
        radial-gradient(circle at 14% 14%, rgba(255, 193, 7, 0.08), transparent 20%),
        linear-gradient(180deg, #111317 0%, #12151b 48%, #101318 100%);
    background-attachment: fixed;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,193,7,0.05) 0%, transparent 18%, transparent 82%, rgba(255,193,7,0.06) 100%);
    z-index: 0;
}
.site-header, main, .site-footer { position: relative; z-index: 1; }
.site-header, .navbar, .site-footer {
    background: rgba(15, 17, 22, 0.88);
    backdrop-filter: blur(12px);
}
.site-header { box-shadow: 0 12px 24px rgba(0,0,0,.18); z-index: 1000; }
.navbar, .site-header { overflow: visible; }
.brand-lockup { display: inline-flex; flex-direction: column; line-height: 1; text-decoration: none; }
.brand-title { color: var(--accent); letter-spacing: .16rem; font-weight: 800; font-size: 1.5rem; }
.brand-subtitle { color: #f4ead2; font-size: .72rem; letter-spacing: .18rem; text-transform: lowercase; margin-top: .16rem; }
.navbar-toggler { border-color: rgba(255,193,7,.35); }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 232, 179, 0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.navbar-toggler:focus { box-shadow: 0 0 0 .18rem rgba(255,193,7,.18); }
.nav-link { color: #f6f0cf !important; transition: color .2s ease, opacity .2s ease; opacity: .94; }
.nav-link:hover, .nav-link:focus { color: var(--accent) !important; opacity: 1; }
.hero-card, .product-card, .search-panel, .content-page, .admin-stat, .admin-link-card, .stat-card, .mini-product, .table-dark, .card {
    background: linear-gradient(180deg, rgba(29, 32, 39, 0.97) 0%, rgba(18, 21, 27, 0.98) 100%);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.hero-card { position: relative; overflow: hidden; border-radius: 1.7rem; min-height: 360px; }
.hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(12,15,20,.88) 0%, rgba(12,15,20,.58) 42%, rgba(16,18,24,.16) 100%), url('/images/hero-service-scene.svg') right center/contain no-repeat;
    opacity: .97;
}
.hero-card > * { position: relative; z-index: 1; }
.hero-card::after {
    content: "";
    position: absolute;
    inset: auto -4rem -5rem auto;
    width: 18rem;
    height: 18rem;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.16), transparent 65%);
    pointer-events: none;
}
.pill-tag {
    display: inline-block;
    padding: .55rem .95rem;
    border-radius: 999px;
    background: rgba(255,193,7,.12);
    border: 1px solid rgba(255,193,7,.2);
    color: var(--accent-soft);
    font-size: .95rem;
}
.hero-actions { display:flex; gap:.75rem; flex-wrap:wrap; }
.hero-service-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.service-note { padding:1.15rem; border-radius:1.15rem; border:1px solid rgba(255,193,7,.18); background:rgba(18,22,30,.82); }
.service-note h3 { margin:0; color:var(--accent); font-size:1.8rem; }
.service-note p { margin:.35rem 0 0; color:#eee4bf; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; }
.brand-badge { width:108px; height:108px; border-radius:1rem; background:linear-gradient(180deg,#ffffff 0%,#f8f8f8 100%); color:#111; display:grid; place-items:center; font-weight:800; letter-spacing:.08rem; box-shadow:0 10px 24px rgba(255,193,7,.18); border:1px solid rgba(255,255,255,.18); }
.mini-product { border-radius:.9rem; padding:.9rem; height:100%; }
.admin-link-card { display:block; color:#f7f7f7; text-decoration:none; padding:1rem 1.15rem; border-radius:1rem; font-weight:600; transition:transform .18s ease, background .18s ease, color .18s ease; }
.admin-link-card:hover { color:#111; background:linear-gradient(180deg,#ffd75c 0%,#ffc107 100%); transform:translateY(-2px); }
.admin-table-scroll { max-height: 650px; overflow:auto; }
.stats-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.stat-card, .admin-stat { padding:1.25rem; border-radius:1.1rem; text-align:center; }
.stat-card span, .admin-stat span { display:block; font-size:1.8rem; font-weight:700; color:var(--accent); }
.stat-card small, .admin-stat small, .text-secondary, small.text-secondary { color: var(--muted) !important; }
.form-control, .form-select, textarea { background: var(--panel-2); border-color: #3c4350; color: #f5f5f5; }
.form-control::placeholder, textarea::placeholder { color:#8f8f8f; }
.form-control:focus, .form-select:focus, textarea:focus { background:#181b22; color:#fff; border-color:var(--accent); box-shadow:0 0 0 .2rem rgba(255,193,7,.15); }
.form-label { color:#f0e1ac; }
.btn-warning { font-weight:700; box-shadow:0 10px 24px rgba(255,193,7,.15); }
.btn-outline-light:hover, .btn-outline-warning:hover { color:#111; background:var(--accent); border-color:var(--accent); }
.btn-account { background:rgba(25,29,36,.94); color:#fff; border:1px solid rgba(255,193,7,.22); }
.language-btn { min-width:58px; }
.account-avatar { width:28px; height:28px; display:inline-grid; place-items:center; border-radius:999px; background:var(--accent); color:#111; font-weight:800; margin-right:.45rem; }
.account-dropdown-wrap { position: relative; z-index: 10000; }
.account-dropdown { min-width: 280px; background: rgba(20,23,29,.98); border:1px solid rgba(255,193,7,.18); z-index:10001 !important; }
.dropdown-menu.account-dropdown { overflow: visible; }
.dropdown-item { color: #f3e8c4; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(255,193,7,.14); color:#fff; }
a { color: var(--accent-soft); }
a:hover { color: var(--accent); }
.alert-success { background: rgba(18, 67, 35, 0.88); border-color: rgba(65, 170, 96, 0.28); color: #e4ffec; }
.alert-danger { background: rgba(96, 28, 28, 0.88); border-color: rgba(218, 93, 93, 0.28); color: #ffe4e4; }
.content-page { border-radius: 1.5rem; padding: 2rem; }
.account-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.account-detail-item { background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:1rem; padding:1rem; }
.account-detail-item small { display:block; color:var(--muted); margin-bottom:.35rem; }
.site-footer { background: linear-gradient(180deg, rgba(15,17,22,.96) 0%, rgba(12,14,18,.98) 100%); }
.footer-brand { font-size:1.3rem; font-weight:800; color:var(--accent); letter-spacing:.12rem; }
.footer-brand span { display:block; font-size:.78rem; color:#f5e8c2; letter-spacing:.18rem; }
.footer-title { font-size:1rem; color:#fff1ba; margin-bottom:.8rem; }
.footer-links { display:flex; flex-direction:column; gap:.45rem; }
.footer-links a { color:#f3e6be; text-decoration:none; }
.footer-links a:hover { color:var(--accent); }
.search-mode-shell { position:relative; }
.search-mode-trigger { min-width: 180px; justify-content: space-between; }
.search-mode-menu { min-width: 220px; background: rgba(19,22,27,.98); border:1px solid rgba(255,193,7,.18); }
.search-mode-menu .dropdown-item { border-left: 3px solid transparent; }
.search-mode-menu .dropdown-item.active { background: rgba(255,193,7,.16); border-left-color: var(--accent); }
.search-panel .search-row { display:grid; grid-template-columns: 220px 1fr auto; gap:1rem; align-items:end; }
.catalog-grid { display:grid; grid-template-columns: 1fr; gap:1rem; }
.catalog-result-card { padding:1.25rem; border-radius:1.2rem; }
.hero-note-block, .consent-box, .readability-panel { background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:1.25rem; padding:1.25rem; }
.mismatch-hint { display:none; color:#ffb4b4; font-size:.92rem; margin-top:.35rem; }
.mismatch-hint.show { display:block; }
@media (max-width: 992px) {
    .hero-card::before { background: linear-gradient(180deg, rgba(12,15,20,.94) 0%, rgba(12,15,20,.70) 100%), url('/images/hero-service-scene.svg') center/cover no-repeat; }
    .hero-service-list, .account-detail-grid { grid-template-columns:1fr; }
    .search-panel .search-row { grid-template-columns: 1fr; }
}

.text-high-contrast { color: #f3ead0 !important; }
.brand-logo-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    overflow: hidden;
    padding: .8rem;
    border-radius: 1rem;
}
.brand-logo-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    margin: 0 auto;
}
.product-card h1, .product-card h2, .product-card h3, .product-card h4, .product-card h5, .product-card h6, .content-page h1, .content-page h2, .content-page h3, .content-page h4, .content-page h5, .content-page h6, .hero-card h1, .hero-card h2, .hero-card h3, .hero-card h4, .hero-card h5, .hero-card h6, .admin-menu h1, .admin-menu h2, .admin-menu h3, .admin-menu h4, .admin-menu h5, .admin-menu h6, .accordion-button, .table-dark, .table-dark h1, .table-dark h2, .table-dark h3, .table-dark h4, .table-dark h5, .table-dark h6 { color: #ffffff !important; }
.section-heading h2, .footer-title, .admin-link-card, .admin-menu, .hero-card .lead, .hero-card p, .product-card p, .product-card .text-secondary, .readability-panel h1, .readability-panel h2, .readability-panel h3 { color: #ffffff; }

.timeline-thread { display: grid; gap: 1rem; }
.thread-bubble { border: 1px solid rgba(255,193,7,.16); border-radius: 1rem; padding: 1rem 1.1rem; }
.thread-user { background: rgba(255,255,255,.03); }
.thread-admin { background: rgba(255,193,7,.08); }
.form-check-label { color: #f3ead0; }


p, li { font-size: 1rem; }
h1, h2, h3, h4, h5, h6 { line-height: 1.25; color: #ffffff; }
.text-secondary, small.text-secondary, .form-text.text-secondary { color: var(--muted) !important; }
.content-page p, .content-page li, .consent-box p, .consent-box li, .readability-panel p, .readability-panel li { color: #f4ead0; line-height: 1.8; }
.content-page ul, .readability-panel ul, .consent-box ul { padding-left: 1.2rem; }
.content-page li, .readability-panel li, .consent-box li { margin-bottom: .6rem; }
.legal-page { max-width: 980px; margin: 0 auto; }
.section-intro { font-size: 1.08rem; color: #f8edd0; margin-bottom: 1.2rem; }
.legal-section-title { color: var(--accent); font-size: 1.15rem; font-weight: 700; margin-bottom: .85rem; }
.emphasis-note { border-left: 4px solid var(--accent); padding: 1rem 1.1rem; border-radius: .9rem; background: rgba(255,193,7,.08); color: #fff3cf; }
.form-label { font-weight: 600; letter-spacing: .01rem; }
.form-control, .form-select, textarea { font-size: 1rem; line-height: 1.55; }
.form-check-input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; }
.form-check-label { color: #f3ead0; line-height: 1.6; }
.table-dark th, .table-dark td { color: #f6efd6; vertical-align: middle; }
.table-dark thead th { color: #fff3c1; }
.footer-links.small-links a { font-size: .98rem; line-height: 1.6; }
.card .small, small { font-size: .92rem; }


/* readability and usability enhancements */
.product-card, .content-page, .admin-stat, .stat-card { border-radius: 1.2rem; }
.product-card .card-body, .content-page, .hero-note-block, .consent-box, .readability-panel { padding: 1.45rem; }
.product-card .text-secondary, .card .text-secondary, .admin-stat small, .stat-card small, .admin-table-scroll .text-secondary { color: #f8f1d8 !important; }
.product-card .small, .table-dark small, .account-detail-item small, .timeline-thread .small { color: #efe4bf !important; }
.btn, .form-control, .form-select, textarea { border-radius: .9rem; }
.btn-warning, .btn-outline-warning, .btn-outline-light, .btn-account { min-height: 44px; padding: .72rem 1rem; font-size: .98rem; font-weight: 700; }
.btn-sm { min-height: 38px; padding: .48rem .9rem; }
.form-control, .form-select, textarea { padding: .9rem 1rem; }
.form-text, .helper-text { color: #f4e8c4 !important; font-size: .95rem; line-height: 1.65; }
.brand-card { height: 100%; }
.brand-card .card-body { display: flex; flex-direction: column; align-items: flex-start; gap: .95rem; }
.brand-badge.brand-logo-tile {
  width: 100%;
  max-width: 132px;
  min-width: 132px;
  height: 96px;
  border-radius: 1rem;
  padding: .8rem;
  align-self: flex-start;
}
.brand-card h2, .brand-card h3 { margin: 0; }
.brand-card p { min-height: 4.7rem; margin: 0; }
.brand-card .btn { margin-top: auto; }
.admin-menu .btn { white-space: nowrap; }
.status-badge { display:inline-flex; align-items:center; justify-content:center; padding:.38rem .72rem; border-radius:999px; font-size:.9rem; font-weight:700; letter-spacing:.01rem; border:1px solid rgba(255,193,7,.22); }
.status-badge.pending { background: rgba(255,193,7,.14); color:#ffe8a3; }
.status-badge.in-progress, .status-badge.adminreplied { background: rgba(13,110,253,.18); color:#d9e6ff; }
.status-badge.answered, .status-badge.resolved, .status-badge.approved { background: rgba(25,135,84,.20); color:#daf5e6; }
.status-badge.rejected, .status-badge.closed { background: rgba(220,53,69,.18); color:#ffd7dc; }
.list-card-link { display:block; text-decoration:none; color:#fff; padding:1rem 1.05rem; border-radius:1rem; border:1px solid rgba(255,193,7,.16); background:rgba(255,255,255,.025); }
.list-card-link:hover { background:rgba(255,193,7,.09); color:#fff; }
.table-filter-input { max-width: 340px; }
.table-dark td, .table-dark th { font-size: .98rem; }
.table-dark tbody tr:hover { background: rgba(255,193,7,.06); }
.thread-bubble p { color:#fff7df; line-height:1.75; }
.thread-bubble strong { color:#fff; }
.home-admin-link { color:#111 !important; background: linear-gradient(180deg,#ffd75c 0%,#ffc107 100%); border-color: transparent; }
.admin-home-link { min-width: 120px; }
.legal-page .card, .legal-page .content-page { padding: 0; }
.footer-links a, .footer-links.small-links a { font-weight: 500; }
@media (max-width: 768px) {
  body { font-size: 16px; }
  .product-card .card-body, .content-page, .hero-note-block, .consent-box, .readability-panel { padding: 1.2rem; }
  .brand-badge.brand-logo-tile { max-width: 120px; min-width: 120px; height: 88px; padding: .75rem; }
  .brand-card p { min-height: unset; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .btn-warning, .btn-outline-warning, .btn-outline-light, .btn-account { width: 100%; }
  .hero-actions .btn { width: auto; }
}

/* mail verification panel */
.verification-card .card-body { color: #ffffff; }
.verification-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #ffc107;
  color: #111111;
  font-size: 1.7rem;
  font-weight: 800;
}
.verification-code-input {
  text-align: center;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: .35rem;
}

/* registration code verification panel */
.register-code-card { border: 1px solid rgba(255,193,7,.28); }
.verification-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(255,193,7,.16);
  border: 1px solid rgba(255,193,7,.28);
  font-size: 1.7rem;
}
.code-focus-panel {
  background: linear-gradient(180deg, rgba(255,193,7,.14), rgba(255,193,7,.06));
  border: 2px solid rgba(255,193,7,.42);
  border-radius: 1.3rem;
  padding: 1.35rem;
  box-shadow: 0 14px 32px rgba(0,0,0,.22);
}
.code-focus-panel .small { color: #ffe49a !important; letter-spacing: .08rem; }
.verification-code-input {
  text-align: center;
  font-size: clamp(2rem, 7vw, 3.2rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .42rem;
  color: #111 !important;
  background: #fff !important;
  border: 3px solid #ffc107 !important;
  min-height: 82px;
}
.verification-code-input::placeholder { color: #999 !important; }
@media (max-width: 576px) {
  .verification-code-input { letter-spacing: .24rem; font-size: 2.1rem; min-height: 72px; }
  .code-focus-panel { padding: 1rem; }
}