.gold-market-card{padding:14px;border:1px solid var(--border-default);border-radius:18px;background:var(--surface-card);color:var(--ink);min-width:0}
.gold-market-head{display:flex;align-items:center;gap:10px;min-width:0}.gold-market-icon{width:36px;height:36px;border:1px solid #e0b15a38;border-radius:12px;background:#e0b15a12;color:var(--tone-gold);display:grid;place-items:center;flex-shrink:0}.gold-market-icon svg{width:19px;height:19px}.gold-market-title{flex:1;min-width:0}.gold-market-title h4{font-size:14px;font-weight:700;line-height:1.7;margin:0;color:var(--ink);overflow-wrap:anywhere}.gold-market-title p{font-size:10px;color:var(--ink-secondary);line-height:1.7;margin:0}
.gold-market-state{display:flex;align-items:center;gap:5px;font-size:10px;flex-shrink:0;border:1px solid #34d39930;border-radius:20px;background:#34d3990d;padding:3px 8px;color:#6ee7b7;white-space:nowrap}.gold-market-state i{width:5px;height:5px;border-radius:50%;background:currentColor}.gold-market-state.cached{color:var(--tone-gold);background:#e0b15a12;border-color:#e0b15a38}.gold-market-state.offline{color:var(--ink-secondary);background:var(--surface-subcard);border-color:var(--border-default)}body.theme-light .gold-market-state:not(.cached):not(.offline){color:#047857}
.gold-market-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.gold-market-quote{min-width:0;background:var(--surface-subcard);border:1px solid var(--border-subtle);border-radius:11px;padding:8px 10px;display:flex;flex-direction:column;gap:3px;align-items:flex-start}.gold-market-karat{font-size:11px;color:var(--ink-secondary);font-weight:600;line-height:1.5}.gold-market-quote strong{display:block;max-width:100%;font-family:Arial,sans-serif;font-variant-numeric:tabular-nums;font-size:25px;line-height:1.2;font-weight:700;color:var(--ink);white-space:nowrap;direction:ltr;unicode-bidi:isolate}.gold-market-foot{display:flex;justify-content:space-between;gap:6px;margin-top:9px;font-size:9px;color:var(--ink-secondary);line-height:1.8;flex-wrap:wrap}.gold-market-time{font-variant-numeric:tabular-nums}
.gold-market-quote strong{color:var(--tone-gold)}
@media(max-width:360px){.gold-market-card{padding:14px}.gold-market-title h4{font-size:12px}.gold-market-head{gap:7px}.gold-market-icon{width:31px;height:31px}.gold-market-state{font-size:9px;padding:3px 6px}.gold-market-quote{padding:7px 8px}.gold-market-quote strong{font-size:21px}}


#zakatCard.zakat-compact{padding:14px;border:1px solid var(--border-default);border-radius:18px;background:var(--surface-card);color:var(--ink);min-width:0}
#zakatCard.zakat-compact .zakat-head{display:flex;align-items:center;flex-wrap:nowrap;gap:9px;padding:0;border:0}
.zakat-icon{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border:1px solid #e0b15a38;background:#e0b15a12;border-radius:11px;color:var(--tone-gold)}.zakat-icon svg{width:18px;height:18px}.zakat-heading{flex:1;min-width:0}.zakat-heading h3{font:700 14px/1.7 Cairo,sans-serif;color:var(--ink);margin:0;overflow-wrap:anywhere}.zakat-heading p{font-size:10px;line-height:1.7;color:var(--ink-secondary);margin:0}.zakat-refresh{display:grid;place-items:center;flex:0 0 40px;min-width:40px;border:1px solid var(--border-default);background:var(--surface-subcard);border-radius:11px;color:var(--tone-gold);cursor:pointer}.zakat-refresh svg{width:17px;height:17px}
.zakat-summary{margin-top:10px}.zakat-currency-note{padding:0 10px 2px;text-align:end;font-size:9px;line-height:1.6;color:var(--ink-secondary)}.zakat-line{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:39px;padding:8px 10px;border-bottom:1px solid var(--border-subtle)}.zakat-line>span{font-size:11px;line-height:1.8;color:var(--ink-secondary);min-width:0}.zakat-line strong{display:inline-flex;align-items:baseline;gap:5px;flex-shrink:0;text-align:left;font:700 18px/1.5 Arial,sans-serif;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;direction:ltr;unicode-bidi:isolate}.zakat-line strong small{text-align:left;font-size:10px;font-weight:400;color:var(--ink-secondary)}#zakatNisabVal{color:var(--tone-gold)}.zakat-line.due{border:0;background:#34d3990a;padding:8px 10px;border-radius:10px;margin-top:7px}.zakat-line.due>span{color:var(--tone-income);font-weight:600}.zakat-line.due strong{color:var(--tone-income);font-size:18px}.zakat-info{font-size:10px;line-height:1.8;color:var(--ink-secondary);margin:11px 0 0}.zakat-info bdi{white-space:nowrap;direction:ltr;unicode-bidi:isolate}.zakat-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}.zakat-hawl{min-width:0;font-size:10px;line-height:1.8;color:var(--tone-income)}.zakat-hawl button{font:inherit;display:block;background:none;border:0;color:var(--ink-secondary);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0;min-height:32px!important}.zakat-breakdown{display:flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;border:1px solid var(--border-default);background:var(--surface-subcard);border-radius:11px;padding:8px 11px;color:var(--ink);font:600 11px/1.6 Cairo,sans-serif;cursor:pointer}.zakat-breakdown svg{width:15px;height:15px;color:var(--tone-gold)}#zakatCard button:focus-visible{outline:2px solid var(--tone-gold);outline-offset:3px}
@media(max-width:360px){.zakat-heading h3{font-size:13px}.zakat-heading p{font-size:9px}.zakat-line>span{font-size:10px}.zakat-line strong{font-size:16px}.zakat-line.due strong{font-size:16px}.zakat-icon{width:30px;height:30px;flex-basis:30px}}


#toolsHomeActions.home-options{position:relative;flex-shrink:0;align-self:center;margin:0;z-index:3}
.home-options>summary{list-style:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;color:var(--ink-secondary);border:1px solid var(--border-default);background:var(--surface-subcard);cursor:pointer}
.home-options>summary::-webkit-details-marker{display:none}
.home-options>summary:focus-visible{outline:2px solid var(--tone-gold);outline-offset:3px}
.home-options[open]>summary{color:var(--tone-gold);border-color:var(--tone-gold)}
.home-options-panel{position:absolute;inset-inline-end:0;top:calc(100% + 8px);width:228px;max-width:calc(100vw - 50px);background:var(--surface-card);border:1px solid var(--border-default);border-radius:14px;padding:6px;box-shadow:0 14px 35px #0005;display:grid;gap:3px}
.home-options-panel button{display:flex;align-items:center;gap:10px;text-align:start;width:100%;min-height:46px;padding:10px 12px;background:transparent;border:0;border-radius:9px;color:var(--ink);font:600 12px Cairo,sans-serif;cursor:pointer}
.home-options-panel button:hover{background:var(--surface-subcard)}
.home-options-panel button svg{width:17px;height:17px;flex-shrink:0;color:var(--tone-gold)}
.finance-overview{position:relative}.finance-overview>div:first-child{flex:1;min-width:0}
.finance-overview time{flex-shrink:0}.finance-overview h1{overflow-wrap:anywhere}
@media(max-width:360px){.finance-overview{gap:8px}.finance-overview h1{font-size:19px}}


#quickTransactionModal .transaction-mode-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:5px;background:var(--surface-subcard);border:1px solid var(--border-default);border-radius:16px}
#quickTransactionModal .transaction-mode-button{appearance:none;display:flex;align-items:center;justify-content:center;gap:9px;min-width:0;min-height:52px;margin:0;padding:9px 10px;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--ink-secondary);font:700 13px/1.6 Cairo,sans-serif;cursor:pointer}
#quickTransactionModal .transaction-mode-button .mode-icon{display:grid;place-items:center;width:27px;height:27px;flex:0 0 27px;border-radius:9px;background:var(--surface-card);color:var(--ink-secondary)}
#quickTransactionModal .transaction-mode-button svg{display:block;width:16px;height:16px;flex-shrink:0;stroke-width:2}
#quickTransactionModal .transaction-mode-button>span:last-child{white-space:nowrap}
#quickTransactionModal .transaction-mode-button[aria-pressed=true][data-mode=expense]{background:#fb71851a;border-color:#fb71854d;color:#fda4af}
#quickTransactionModal .transaction-mode-button[aria-pressed=true][data-mode=expense] .mode-icon{background:#fb718525;color:#fda4af}
#quickTransactionModal .transaction-mode-button[aria-pressed=true][data-mode=income]{background:#34d39917;border-color:#34d3994d;color:#6ee7b7}
#quickTransactionModal .transaction-mode-button[aria-pressed=true][data-mode=income] .mode-icon{background:#34d39925;color:#6ee7b7}
body.theme-light #quickTransactionModal .transaction-mode-button[aria-pressed=true][data-mode=expense]{background:#be123c0d;border-color:#be123c4d;color:#9f1239}
body.theme-light #quickTransactionModal .transaction-mode-button[aria-pressed=true][data-mode=expense] .mode-icon{background:#be123c12;color:#9f1239}
body.theme-light #quickTransactionModal .transaction-mode-button[aria-pressed=true][data-mode=income]{background:#0478570d;border-color:#0478574d;color:#065f46}
body.theme-light #quickTransactionModal .transaction-mode-button[aria-pressed=true][data-mode=income] .mode-icon{background:#04785712;color:#065f46}
#quickTransactionModal .transaction-mode-button:focus-visible{outline:2px solid var(--tone-gold);outline-offset:2px}


#watchlistPanel{padding:12px;border:1px solid var(--border-default);border-radius:18px;background:var(--surface-card);color:var(--ink);min-width:0}.watchlist-heading{display:flex;align-items:center;gap:8px;padding-bottom:9px;border-bottom:1px solid var(--border-subtle)}.watchlist-heading-icon{width:32px;height:32px;display:grid;place-items:center;flex:0 0 32px;border:1px solid #b7bfff30;background:#b7bfff0c;border-radius:10px;color:var(--tone-investment)}.watchlist-heading-icon svg{width:17px;height:17px}.watchlist-heading-copy{flex:1;min-width:0}.watchlist-heading h3{font:700 14px/1.7 Cairo,sans-serif;margin:0;color:var(--ink);display:flex;align-items:center;gap:7px}.watchlist-heading-copy p{font-size:9px;color:var(--ink-secondary);line-height:1.7;margin:0}.watchlist-heading-copy time{unicode-bidi:isolate;direction:ltr;display:inline-block}.watchlist-dot{width:6px;height:6px;border-radius:50%;background:var(--tone-income);flex-shrink:0}.watchlist-dot.cached{background:var(--tone-gold)}.watchlist-dot.unavailable{background:var(--ink-muted)}.watchlist-add{display:grid;place-items:center;flex:0 0 40px;min-height:44px;border:1px solid var(--border-default);background:var(--surface-subcard);border-radius:11px;color:var(--tone-investment);cursor:pointer}.watchlist-add svg{width:18px;height:18px}
#watchlistCardsContainer{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-top:9px}.stock-row{display:grid;grid-template-columns:minmax(0,1fr) max-content 4px;grid-template-rows:22px 16px;gap:2px 6px;align-content:center;min-height:58px;padding:6px 10px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--surface-subcard);min-width:0;box-sizing:border-box}.stock-company,.stock-company-heading{display:contents}.stock-name{grid-column:1;grid-row:1;display:block;align-self:center;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 12px/22px Cairo,sans-serif;color:var(--ink);text-align:start}.stock-company-meta{grid-column:1;grid-row:2;min-width:0;overflow:hidden}.stock-symbol{display:block;text-align:right;font:400 10px/16px Arial,sans-serif;color:var(--ink-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:isolate}.stock-values{margin-left:14px;grid-column:2;grid-row:1 / 3;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-width:0;direction:ltr;text-align:left;align-self:center}.stock-amount{display:inline-flex;align-items:baseline;gap:5px;font:700 16px/22px Arial,sans-serif;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;unicode-bidi:isolate}.stock-amount small{font-size:9px;font-weight:400;color:var(--ink-secondary)}.stock-change-line{display:flex;align-items:center;gap:5px;max-height:16px;white-space:nowrap}.stock-change{font:600 11px/16px Arial,sans-serif;color:var(--tone-income);font-variant-numeric:tabular-nums;white-space:nowrap}.stock-change.negative{color:var(--tone-expense)}.stock-cached{font:400 9px/16px Cairo,sans-serif;color:var(--tone-gold);direction:rtl}.stock-unavailable{font:400 9px/16px Cairo,sans-serif;color:var(--ink-secondary);white-space:nowrap}.watchlist-note{font-size:9px;color:var(--ink-secondary);line-height:1.7;margin:8px 0 0}
.stock-actions{grid-column:3;grid-row:1 / 3;position:relative;align-self:center;justify-self:center;width:4px;height:44px}.stock-actions>summary{position:absolute;top:0;left:-20px;display:grid;place-items:center;width:44px;height:44px;border-radius:8px;list-style:none;color:var(--ink-secondary);cursor:pointer}.stock-actions>summary::-webkit-details-marker{display:none}.stock-actions>summary svg{width:4px;height:16px}.stock-actions>summary:hover,.stock-actions[open]>summary{background:#94a3b815;color:var(--tone-gold)}.stock-actions-panel{position:absolute;left:0;right:auto;top:calc(100% + 3px);width:156px;background:var(--surface-card);border:1px solid var(--border-default);border-radius:12px;padding:5px;box-shadow:0 10px 24px #0005;z-index:4}.stock-actions:not([open])>.stock-actions-panel{display:none}.stock-actions-panel .stock-remove{display:flex;align-items:center;justify-content:flex-start;gap:7px;width:100%;padding:7px 9px;min-height:44px;background:transparent;border:0;border-radius:8px;color:var(--tone-expense);font:600 10px/1.7 Cairo,sans-serif;cursor:pointer}.stock-actions-panel .stock-remove svg{width:14px;height:14px;flex-shrink:0}.stock-source-details{border-top:1px solid var(--border-subtle);margin:3px 3px 0;padding:6px 3px 3px;font:400 9px/1.8 Cairo,sans-serif;color:var(--ink-secondary)}.stock-source-details time{display:block;direction:ltr;text-align:start;unicode-bidi:isolate}.stock-row:has(.stock-actions[open]){position:relative;z-index:5}.stock-actions summary:focus-visible,#watchlistPanel button:focus-visible{outline:2px solid var(--tone-gold);outline-offset:2px}
html[dir=ltr] .stock-actions-panel{left:auto;right:0}html[dir=ltr] .stock-symbol{text-align:left}html[dir=ltr] .stock-values{margin-left:0;margin-right:14px;align-items:flex-end;text-align:right}
@media(min-width:640px){#watchlistCardsContainer{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:1024px){#watchlistCardsContainer{grid-template-columns:repeat(3,minmax(0,1fr))}}

.watchlist-header-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.watchlist-reorder{min-height:44px;min-width:52px;padding:5px 8px;border:1px solid var(--border-default);background:var(--surface-subcard);border-radius:10px;color:var(--tone-gold);font:600 11px/1.6 Cairo,sans-serif;cursor:pointer}.watchlist-reorder[aria-pressed=true]{background:#f5cb7515;border-color:var(--tone-gold)}.watchlist-reorder-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding:6px 8px;border:1px solid var(--border-default);border-radius:12px;background:var(--surface-subcard)}.watchlist-reorder-toolbar[hidden]{display:none!important}.watchlist-selection-status{flex:1;min-width:0;font:600 11px/1.8 Cairo,sans-serif;color:var(--ink-secondary)}.watchlist-move-buttons{display:flex;gap:5px;flex-shrink:0}.watchlist-move{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border:1px solid var(--border-default);background:var(--surface-card);color:var(--ink);border-radius:10px;cursor:pointer}.watchlist-move svg{width:18px;height:18px}.watchlist-move:disabled{opacity:.35;cursor:default}
.stock-selection{display:none;grid-column:3;grid-row:1 / 3;position:relative;align-self:center;justify-self:center;width:16px;height:44px}.stock-selection-label{position:absolute;top:0;left:-14px;display:grid;place-items:center;width:44px;height:44px;cursor:pointer}.stock-selection-label input{appearance:auto;width:16px!important;height:16px!important;min-height:16px!important;padding:0!important;margin:0!important;accent-color:var(--tone-gold);cursor:pointer}.stock-selection-label:has(input:focus-visible){outline:2px solid var(--tone-gold);outline-offset:-4px;border-radius:9px}#watchlistPanel.is-reordering .stock-actions{display:none}#watchlistPanel.is-reordering .stock-selection{display:block}#watchlistPanel.is-reordering .stock-row{grid-template-columns:minmax(0,1fr) max-content 16px}#watchlistPanel.is-reordering .stock-row.is-selected{border-color:var(--tone-gold);background:#f5cb750c}

.drag-hint{font:500 10px Cairo,sans-serif;color:var(--ink-secondary)}
#watchlistPanel.is-reordering .stock-row.is-selected{touch-action:none;cursor:grab;user-select:none}
#watchlistPanel.is-dragging .stock-row.is-selected{opacity:.35}
.watchlist-drop-line{position:fixed;height:3px;background:var(--tone-gold);border-radius:4px;z-index:9998;pointer-events:none;box-shadow:0 0 10px #f5cb7540}
.watchlist-drag-ghost{position:fixed;padding:10px 16px;border:1px solid var(--tone-gold);border-radius:12px;background:var(--surface-card);color:var(--tone-gold);font:700 12px Cairo,sans-serif;z-index:9999;pointer-events:none;box-shadow:0 8px 24px #0005;transform:translate(-50%,-50%)}

.home-options>summary svg{width:18px;height:18px}.stock-row.is-selected *{user-select:none}.bank-review-source{font-size:10px;color:var(--ink-secondary);line-height:1.8}

/* Shared functional icon rules; brand marks, charts and the approved ellipsis keep their geometry. */
svg.zad-icon{display:inline-block;width:1em;height:1em;vertical-align:middle;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
svg.zad-icon[width="12"]{width:12px;height:12px}svg.zad-icon[width="14"]{width:14px;height:14px}svg.zad-icon[width="16"]{width:16px;height:16px}svg.zad-icon[width="18"]{width:18px;height:18px}svg.zad-icon[width="20"]{width:20px;height:20px}svg.zad-icon[width="24"]{width:24px;height:24px}
[data-lucide]{flex-shrink:0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zad-icon-label{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;max-width:100%}.zad-icon-label .zad-icon{flex-shrink:0}
.toast>.zad-icon{margin-top:2px}#bottomNavBar button[data-tab]>svg{width:24px;height:24px}
.finance-transaction-row button:has(svg),.tools-layout button:has(svg){display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px}
.bank-review-fields input[type=number],.bank-review-fields select[name=currency]{text-align:center!important;text-align-last:center;direction:ltr;padding-inline:12px!important;text-indent:0!important}
.bank-review-fields input[type=number]{appearance:textfield;-moz-appearance:textfield}.bank-review-fields input[type=number]::-webkit-inner-spin-button,.bank-review-fields input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.tools-planning-entry{display:flex;align-items:center;gap:10px;padding:14px!important}.tools-planning-entry>.zad-icon{color:var(--tone-gold)}.tools-planning-entry-copy{flex:1;min-width:0}.tools-planning-entry h2{font-size:13px;margin:0;color:var(--ink)}.tools-planning-entry p{margin:3px 0 0;color:var(--ink-secondary);font-size:10px;line-height:1.8}.tools-planning-entry button{flex-shrink:0;min-height:44px}
.tools-annual-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.tools-annual-heading h3{margin:0}.tools-annual-heading button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px}

/* Approved outer-card rhythm; retain compact spacing within each card. */
:root{--card-gap:16px}
#appContainer .tab-view> :not([hidden]):not(.hidden)~:not([hidden]):not(.hidden){margin-block-start:var(--card-gap)!important}
#appContainer .tab-view>div.grid{gap:var(--card-gap)!important}
/* Keep the real live/cached/offline state accessible without a visible status pill. */
.gold-market-state,.gold-market-state.cached,.gold-market-state.offline{padding:6px!important;border:0!important;background:none!important}
.gold-market-state i{width:7px;height:7px}
.gold-market-state:not(.cached):not(.offline){color:var(--tone-income)}
.gold-market-head{direction:rtl}