/* Shared styles for Hala's tool pages (gold, currencies, horoscopes, calculators). Uses the theme's tokens. */
.ht-page{display:flex;flex-direction:column;gap:28px;padding-block:24px 56px}
.ht-head{display:flex;flex-direction:column;gap:8px}
.ht-head__title{font-size:clamp(26px,3vw,36px);line-height:1.4}
.ht-head__intro{max-width:820px;font-size:17px;line-height:1.9;color:var(--hc-ink-3)}
.ht-updated{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--hc-muted)}
.ht-updated .hc-pulse{background:#1f9d55}

.ht-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
.ht-main{display:flex;flex-direction:column;gap:28px;min-width:0}
.ht-side{display:flex;flex-direction:column;gap:24px;position:sticky;top:16px}

.ht-section h2{font-size:22px;border-bottom:2px solid var(--hc-ink);padding-bottom:8px;margin-bottom:14px}
.ht-section h3{font-size:18px;margin-bottom:8px}
.ht-section p{line-height:1.9;color:var(--hc-ink-2)}

.ht-card{background:var(--hc-bg,#fff);border:1px solid var(--hc-line);border-radius:var(--hc-radius-lg);padding:20px}
.ht-card--dark{background:linear-gradient(135deg,var(--hc-dark) 0%,#232833 100%);border:0;color:#fff;box-shadow:inset 0 -3px 0 var(--hc-red)}
.ht-card--dark .ht-muted{color:var(--hc-on-dark-2)}
.ht-muted{color:var(--hc-muted);font-size:14px}

.ht-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.ht-stat{display:flex;flex-direction:column;gap:4px}
.ht-stat__label{font-size:14px;color:var(--hc-on-dark-2)}
.ht-stat__value{font-size:clamp(24px,2.6vw,32px);font-weight:700;line-height:1.3;direction:ltr;text-align:right}
.ht-stat__value small{font-size:.5em;font-weight:500;color:var(--hc-on-dark-2)}
.ht-change{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;direction:ltr}
.ht-change--up{color:#1f9d55}
.ht-change--down{color:#e5484d}
.ht-card--dark .ht-change--up{color:#5fd38d}
.ht-card--dark .ht-change--down{color:#ff8a8d}

.ht-table-wrap{overflow-x:auto;border:1px solid var(--hc-line);border-radius:var(--hc-radius)}
.ht-table{width:100%;border-collapse:collapse;font-size:15px}
.ht-table th,.ht-table td{padding:11px 14px;text-align:start;border-bottom:1px solid var(--hc-line);white-space:nowrap}
.ht-table thead th{background:var(--hc-surface);font-size:13px;font-weight:600;color:var(--hc-ink-3)}
.ht-table tbody tr:last-child td{border-bottom:0}
.ht-table tbody tr:hover{background:var(--hc-surface,#fafafa)}
.ht-num{direction:ltr;text-align:end !important;font-variant-numeric:tabular-nums}
.ht-code{display:inline-block;min-width:42px;font-size:12px;font-weight:600;color:var(--hc-muted);direction:ltr}

.ht-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;align-items:end}
.ht-field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--hc-ink-2)}
.ht-field input,.ht-field select{height:46px;width:100%;border:1px solid var(--hc-line-2);border-radius:var(--hc-radius);padding:0 12px;background:var(--hc-bg,#fff);font:inherit;font-weight:500;color:var(--hc-ink)}
.ht-field input:focus,.ht-field select:focus{outline:2px solid var(--hc-red);outline-offset:1px;border-color:transparent}
.ht-field input[type="number"]{direction:ltr;text-align:right}
.ht-field small{font-weight:400;color:var(--hc-muted)}
.ht-seg{display:flex;flex-wrap:wrap;gap:8px}
.ht-seg label{position:relative}
.ht-seg input{position:absolute;opacity:0;inset:0}
.ht-seg span{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border:1px solid var(--hc-line-2);border-radius:20px;font-size:14px;font-weight:500;cursor:pointer;background:var(--hc-bg,#fff)}
.ht-seg input:checked+span{background:var(--hc-ink);border-color:var(--hc-ink);color:#fff}
.ht-seg input:focus-visible+span{outline:2px solid var(--hc-red);outline-offset:2px}
.ht-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border:0;border-radius:var(--hc-radius);background:var(--hc-red);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.ht-btn:hover{background:var(--hc-red-dark);color:#fff}
.ht-btn--ghost{background:var(--hc-bg,#fff);color:var(--hc-ink);border:1px solid var(--hc-line-2)}
.ht-btn--ghost:hover{background:var(--hc-surface);color:var(--hc-ink)}

.ht-result{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:16px;padding:16px;border-radius:var(--hc-radius);background:var(--hc-pink)}
.ht-result__value{font-size:28px;font-weight:700;color:var(--hc-red-dark);direction:ltr}

.ht-note{padding:14px 16px;border-inline-start:4px solid var(--hc-red);background:var(--hc-surface);border-radius:var(--hc-radius);font-size:14px;line-height:1.9;color:var(--hc-ink-3)}
.ht-sources{font-size:13px;line-height:1.9;color:var(--hc-muted)}
.ht-sources a{text-decoration:underline;text-underline-offset:3px}

.ht-faq details{border-bottom:1px solid var(--hc-line);padding:14px 0}
.ht-faq summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.ht-faq summary::-webkit-details-marker{display:none}
.ht-faq summary::after{content:"+";font-size:20px;line-height:1;color:var(--hc-red)}
.ht-faq details[open] summary::after{content:"−"}
.ht-faq p{margin-top:8px;line-height:1.9;color:var(--hc-ink-3)}

.ht-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.ht-links a{display:flex;align-items:center;gap:10px;padding:14px;border:1px solid var(--hc-line);border-radius:var(--hc-radius);font-weight:600;background:var(--hc-bg,#fff)}
.ht-links a:hover{border-color:var(--hc-red);color:var(--hc-red)}
.ht-links svg{flex:0 0 auto;width:22px;height:22px;color:var(--hc-red)}

@media (max-width:1024px){
	.ht-layout{grid-template-columns:minmax(0,1fr)}
	.ht-side{position:static}
}
@media (max-width:768px){
	.ht-page{gap:22px;padding-block:16px 40px}
	.ht-card{padding:16px}
	.ht-table{font-size:14px}
	.ht-table th,.ht-table td{padding:10px}
	.ht-form{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){
	.ht-form{grid-template-columns:1fr}
}
@media print{.ht-side,.ht-form .ht-btn{display:none !important}}
.ht-field[hidden],.ht-page [hidden]{display:none !important}