:root {
     /* Sayt vari bor bo'lsa shularni oladi; bo'lmasa fallback */
     --card: var(--app-card, #ffffff);
     --brand: var(--brand, #0b74da);
     --radius: 18px;
      
     --shadow: 0 10px 24px rgba(15, 23, 42, .06);
     --ring: 0 0 0 3px rgba(11, 116, 218, .12);
     --chip-bg: #f2f5f8;

     --accent: #26ce2c;
     /* yashil brend */
     --bg: #fafafa;
     --text: #222;
     --muted: #6f7781;
     --border: #e8e8e8;
     --surface: #ffffff;

     --like: #ff3b3b;
     --like-bg: rgba(255, 59, 59, .12);
     --fontFamiliyMian: "Press Start 2P", system-ui;
 }




 .hero {
     background: var(--bg);
     border: var(--border);
     box-shadow: var(--shadow);
     border-radius: 28px;
     padding: 28px 24px;
     margin: 10px 0 22px;
 }

 .hero h1 {
     margin: 0 0 6px;
     font-size: clamp(26px, 4.2vw, 42px);
     letter-spacing: .2px
 }

 .hero p {
     margin: 0;
     color: var(--text);
     font-size: 18px
 }

 /* Toolbar */
 .toolbar {
     display: grid;
     grid-template-columns: 1fr;
     gap: 14px;
     margin: 6px 0 18px;
 }

 @media (min-width: 880px) {
     .toolbar {
         grid-template-columns: 1fr auto auto;
     }
 }

 .input,
 .select,
 .btn {
     background: var(--bg);
     border: var(--border);
     border-radius: 16px;
     box-shadow: var(--shadow);
     height: 56px;
     padding: 0 16px;
     font-size: 16px;
     color: var(--text);
 }

 .search {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .search input {
     flex: 1;
     border: 0;
     outline: 0;
     background: transparent;
     font-size: 16px;
     color: var(--text)
 }

 .search svg {
     opacity: .6
 }

 .select {
     display: flex;
     align-items: center;
     gap: 10px;
     padding-right: 18px;
 }

 select {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     border: 0;
     outline: 0;
     background: transparent;
     font-size: 16px;
     color: var(--text);
     padding-right: 20px;
     cursor: pointer;
 }

 .select .chev {
     width: 16px;
     height: 16px;
     opacity: .7
 }

 .btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     justify-content: center;
     cursor: pointer;
     user-select: none;
     padding: 0 18px;
 }

 .btn:hover {
     filter: brightness(1.03)
 }

 .btn:active {
     transform: translateY(1px)
 }

 .btn .sign {
     font-weight: 700;
     font-size: 22px;
     line-height: 1
 }

 /* List */
 .faq {
     display: grid;
     gap: 14px
 }

 .item {
     background: var(--bg);
     border: var(--border);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     overflow: hidden;
 }


 .head {
     width: 100%;
     background: transparent;
     border: 0;
     text-align: left;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 20px 22px;
     font-size: 20px;
 }

 .head:focus-visible {
     outline: none;
     box-shadow: var(--ring)
 }

 .left {
     display: flex;
     align-items: center;
     gap: 14px
 }

 .bubble {
     width: 28px;
     height: 28px;
     border-radius: 10px;
     background: var(--chip-bg);
     display: grid;
     place-items: center;
     font-weight: 700;
     color: #1f2937;
     flex: none;
 }

 .title {
     font-weight: 650;
     color: var(--text);
 }

 .rchev {
     width: 18px;
     height: 18px;
     opacity: .8;
     transition: transform .22s ease
 }

 .body {
     border-top: 1px solid rgba(2, 6, 23, .05);
     padding: 0 22px;
     color: var(--text);
     font-size: 17px;
     line-height: 1.6;
     max-height: 0;
     overflow: hidden;
     opacity: 0;
     transition: max-height .28s ease, padding-top .28s ease, padding-bottom .28s ease, opacity .28s ease;
 }

 .item[aria-expanded="true"] .body {
     padding-top: 10px;
     padding-bottom: 30px !important;
     opacity: 1
 }

 .item[aria-expanded="true"] .rchev {
     transform: rotate(180deg)
 }

 .empty {
     display: none;
     text-align: center;
     color: var(--text);
     padding: 10px
 }

 .empty.show {
     display: block
 }

 @media (max-width: 520px) {
     .head {
         padding: 16px;
         font-size: 18px
     }

     .body {
         padding-left: 16px;
         padding-right: 16px
     }
 }