/* ====== PALETAT ====== */
:root{
  --vu:1vh; --vwu:1vw;
  --f-body:'Inter Variable','Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --f-head:'Lora Variable','Lora',Georgia,'Times New Roman',serif;
  --f-num:'Saira Variable','Saira','Inter Variable',system-ui,sans-serif;
  --f-ar:'Amiri','Noto Naskh Arabic','Traditional Arabic','Scheherazade New',serif;
  --bg:#041a28; --ink:#edeae2; --mute:rgba(229,225,213,.84);
  --blue:#2b7a99; --blue-2:#86c8df;
  --gold:#c4c2bf; --gold-2:#96938e; --gf1:#dedddb; --gf2:#9e9b96; --gf3:#6d6b66; --on-gold:#1b1814; --gl:186,184,180;
  --emerald:var(--blue); --emerald-2:var(--blue-2);
  --panel:rgba(9,48,69,.6); --panel-2:rgba(4,30,46,.82);
  --line:rgba(var(--gl),.26); --line-gold:rgba(208,205,197,.6);
  --track:rgba(var(--gl),.16); --tick:rgba(var(--gl),.42);
  --rg1:#dbdad7; --rg2:#908e88;
  --cell:rgba(0,0,0,.22); --field-bg:rgba(0,0,0,.3); --ico-bg:rgba(134,200,223,.12);
  --act-1:rgba(43,122,153,.42); --act-2:rgba(var(--gl),.3);
  --modal-1:#0a3a55; --modal-2:#041c2c; --th-bg:#0a3a55;
  --compass-bg:radial-gradient(circle,rgba(43,122,153,.28),rgba(2,16,26,.9) 72%);
  --sky-line:rgba(2,16,26,.6); --ok:#4ade80; --err:#fca5a5;
  --glow-1:rgba(43,122,153,.35); --glow-2:rgba(var(--gl),.14);
  --sky-a:rgba(0,0,0,0); --sky-b:rgba(0,0,0,0); --star-op:0;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
/* Smerald (Muharrem) */
[data-palette="emerald"]{
  --bg:#04201c; --ink:#eeece5; --mute:rgba(226,232,200,.72);
  --blue:#1f8a6c; --blue-2:#7be0b8;
  --gold:#c6c5c1; --gold-2:#96938e; --gf1:#dedddb; --gf2:#9e9b96; --gf3:#6d6b66; --on-gold:#1b1814; --gl:189,187,183;
  --panel:rgba(8,62,52,.6); --panel-2:rgba(3,38,32,.84);
  --line-gold:rgba(208,205,197,.6); --rg1:#dbdad7; --rg2:#908e88;
  --ico-bg:rgba(123,224,184,.12); --act-1:rgba(31,138,108,.42);
  --modal-1:#0a4a3e; --modal-2:#03221e; --th-bg:#0a4a3e;
  --compass-bg:radial-gradient(circle,rgba(31,138,108,.3),rgba(2,24,20,.9) 72%);
  --sky-line:rgba(1,20,17,.6); --glow-1:rgba(31,138,108,.38);
}
/* Mentë (jeshil-ujë) */
[data-palette="mint"],[data-palette="fresh"]{
  --bg:#052e2b; --ink:#effcf7; --mute:rgba(200,240,226,.74);
  --blue:#2bb89a; --blue-2:#9ff3d6;
  --gold:#a6f5da; --gold-2:#6fd9b8; --gf1:#d4fbee; --gf2:#7fe6c4; --gf3:#3fb592; --on-gold:#032a22; --gl:159,243,214;
  --panel:rgba(10,84,76,.5); --panel-2:rgba(4,52,48,.8);
  --line-gold:rgba(212,251,238,.6); --rg1:#d4fbee; --rg2:#3fb592;
  --ico-bg:rgba(159,243,214,.12); --act-1:rgba(43,184,154,.42);
  --modal-1:#0b6155; --modal-2:#04302c; --th-bg:#0b6155;
  --compass-bg:radial-gradient(circle,rgba(43,184,154,.3),rgba(3,36,32,.9) 72%);
  --sky-line:rgba(2,30,27,.6); --glow-1:rgba(43,184,154,.42);
}
/* Turkez + ar */
[data-palette="turquoise"]{
  --bg:#06424b; --ink:#f5f2eb; --mute:rgba(228,228,219,.74);
  --blue:#18a2ad; --blue-2:#8eeaf0;
  --gold:#c2c0bc; --gold-2:#97938e; --gf1:#dcdbd9; --gf2:#9c9992; --gf3:#67645e; --on-gold:#1c1914; --gl:185,182,177;
  --panel:rgba(12,104,116,.52); --panel-2:rgba(6,66,76,.82);
  --line-gold:rgba(205,201,192,.65); --rg1:#d8d7d4; --rg2:#918d87;
  --ico-bg:rgba(142,234,240,.13); --act-1:rgba(24,162,173,.45);
  --modal-1:#0d7380; --modal-2:#05353d; --th-bg:#0d7380;
  --compass-bg:radial-gradient(circle,rgba(24,162,173,.32),rgba(3,40,46,.9) 72%);
  --sky-line:rgba(3,38,44,.6); --glow-1:rgba(24,162,173,.45);
}
/* Blu mbretëror */
[data-palette="royal"]{
  --bg:#0a1b4a; --ink:#edeae1; --mute:rgba(221,220,213,.72);
  --blue:#3d6fe0; --blue-2:#9db8ff;
  --gold:#bebcb7; --gold-2:#93908a; --gf1:#dbdad7; --gf2:#a19d98; --gf3:#65615c; --on-gold:#1c1914; --gl:179,176,171;
  --panel:rgba(22,48,128,.5); --panel-2:rgba(8,24,76,.82);
  --line-gold:rgba(203,199,190,.62); --rg1:#d7d5d2; --rg2:#8e8a85;
  --ico-bg:rgba(157,184,255,.13); --act-1:rgba(61,111,224,.45);
  --modal-1:#16348a; --modal-2:#081a52; --th-bg:#16348a;
  --compass-bg:radial-gradient(circle,rgba(61,111,224,.3),rgba(6,16,56,.92) 72%);
  --sky-line:rgba(5,12,44,.6); --glow-1:rgba(61,111,224,.4);
}

/* Rubin: vishnje e thellë + ar shampanjë */
[data-palette="ruby"]{
  --bg:#1c0a12; --ink:#f4f0ed; --mute:rgba(235,226,222,.84);
  --blue:#c0506b; --blue-2:#f4a9bb;
  --gold:#ceccc9; --gold-2:#9e9b97; --gf1:#e6e5e4; --gf2:#a7a49f; --gf3:#6d6a65; --on-gold:#1b1714; --gl:197,195,191;
  --panel:rgba(96,24,48,.56); --panel-2:rgba(46,10,26,.84);
  --line-gold:rgba(219,216,210,.6); --rg1:#e4e3e1; --rg2:#989590;
  --ico-bg:rgba(244,169,187,.14); --act-1:rgba(166,44,80,.46);
  --modal-1:#6a1a38; --modal-2:#26060f; --th-bg:#6a1a38;
  --compass-bg:radial-gradient(circle,rgba(166,44,80,.32),rgba(30,6,16,.92) 72%);
  --sky-line:rgba(20,4,10,.6); --glow-1:rgba(176,44,86,.42);
}
/* Ametist: vjollcë mbretërore + ar */
[data-palette="amethyst"],[data-palette="lavender"]{
  --bg:#150a2a; --ink:#f6efff; --mute:rgba(232,220,250,.84);
  --blue:#8a63e6; --blue-2:#c9b0ff;
  --gold:#c9c7c4; --gold-2:#999691; --gf1:#e4e3e2; --gf2:#a6a39d; --gf3:#686560; --on-gold:#1b1815; --gl:192,190,186;
  --panel:rgba(70,40,130,.52); --panel-2:rgba(30,14,70,.84);
  --line-gold:rgba(217,214,207,.6); --rg1:#e1e1de; --rg2:#94918b;
  --ico-bg:rgba(201,176,255,.14); --act-1:rgba(122,84,220,.46);
  --modal-1:#3d2285; --modal-2:#170a38; --th-bg:#3d2285;
  --compass-bg:radial-gradient(circle,rgba(122,84,220,.3),rgba(18,8,44,.92) 72%);
  --sky-line:rgba(14,6,34,.6); --glow-1:rgba(122,84,220,.42);
}
/* Karamele: espreso + karamel i artë */
[data-palette="caramel"],[data-palette="cream"]{
  --bg:#1e1209; --ink:#f3efe9; --mute:rgba(233,225,215,.85);
  --blue:#b9773a; --blue-2:#f0c9a0;
  --gold:#c4c1bd; --gold-2:#98948f; --gf1:#e5e4e3; --gf2:#a9a5a0; --gf3:#6b6763; --on-gold:#1a1613; --gl:186,183,179;
  --panel:rgba(96,58,28,.56); --panel-2:rgba(44,24,10,.86);
  --line-gold:rgba(218,215,209,.6); --rg1:#e3e2e0; --rg2:#928e89;
  --ico-bg:rgba(240,201,160,.14); --act-1:rgba(168,105,58,.46);
  --modal-1:#6b4020; --modal-2:#24130a; --th-bg:#6b4020;
  --compass-bg:radial-gradient(circle,rgba(168,105,58,.3),rgba(28,16,8,.92) 72%);
  --sky-line:rgba(18,10,4,.6); --glow-1:rgba(190,120,60,.38);
}
/* Rozë: kajsi-rozë + ar rozë */
[data-palette="rose"],[data-palette="blush"]{
  --bg:#200b1c; --ink:#fdeef4; --mute:rgba(250,226,236,.85);
  --blue:#d1588a; --blue-2:#ffb7d0;
  --gold:#dcdad9; --gold-2:#b6b2b0; --gf1:#f3f2f1; --gf2:#c9c5c4; --gf3:#8f8a88; --on-gold:#261e1c; --gl:215,212,210;
  --panel:rgba(110,30,80,.52); --panel-2:rgba(52,12,42,.86);
  --line-gold:rgba(238,234,233,.6); --rg1:#f1f0f0; --rg2:#b2adac;
  --ico-bg:rgba(255,183,208,.14); --act-1:rgba(200,70,130,.46);
  --modal-1:#6e1f58; --modal-2:#2a0a24; --th-bg:#6e1f58;
  --compass-bg:radial-gradient(circle,rgba(200,70,130,.3),rgba(32,8,28,.92) 72%);
  --sky-line:rgba(24,5,20,.6); --glow-1:rgba(210,80,140,.4);
}
/* Grafit: i zi neutral (kursen bateri në AMOLED) + ar i ngrohtë */
[data-palette="graphite"]{
  --bg:#0b0c10; --ink:#f4f4f6; --mute:rgba(222,224,232,.84);
  --blue:#7c8aa5; --blue-2:#bcc8de;
  --gold:#c6c4c0; --gold-2:#9a9893; --gf1:#e4e3e2; --gf2:#a19f99; --gf3:#64615c; --on-gold:#1a1814; --gl:189,187,182;
  --panel:rgba(44,46,58,.62); --panel-2:rgba(18,19,26,.88);
  --line-gold:rgba(216,214,207,.58); --rg1:#e1e1de; --rg2:#95928d;
  --ico-bg:rgba(188,200,222,.12); --act-1:rgba(110,120,150,.42);
  --modal-1:#2a2d3a; --modal-2:#0f1015; --th-bg:#2a2d3a;
  --compass-bg:radial-gradient(circle,rgba(110,120,150,.28),rgba(8,9,12,.94) 72%);
  --sky-line:rgba(4,4,6,.6); --glow-1:rgba(100,110,140,.3);
}

/* ====== MODI I NDRITSHËM ====== */
[data-theme="light"]{
  --bg:#f3f2f0; --ink:#0c2a3d; --mute:rgba(12,42,61,.8);
  --blue:#1d6a8a; --blue-2:#1d6a8a;
  --gold:#89857d; --gold-2:#5e5b55; --gl:123,120,114;
  --panel:rgba(255,255,255,.86); --panel-2:rgba(243,241,238,.96);
  --line:rgba(103,97,87,.34); --line-gold:rgba(103,97,87,.75);
  --track:rgba(12,42,61,.1); --tick:rgba(12,42,61,.3);
  --rg1:#b1afab; --rg2:#625f59;
  --cell:rgba(255,255,255,.75); --field-bg:#fff; --ico-bg:rgba(29,106,138,.1);
  --act-1:rgba(230,191,106,.38); --act-2:rgba(227,225,220,.65);
  --modal-1:#fbfaf9; --modal-2:#e9e7e3; --th-bg:#e4e2de;
  --compass-bg:radial-gradient(circle,rgba(230,191,106,.3),rgba(255,250,240,.95) 72%);
  --sky-line:rgba(12,42,61,.15); --ok:#15803d; --err:#b91c1c;
  --glow-1:rgba(230,191,106,.3); --glow-2:rgba(29,106,138,.1);
}
[data-theme="light"][data-palette="emerald"]{
  --bg:#f1f3e3; --ink:#0b2e26; --mute:rgba(11,46,38,.72); --blue:#1a7a5e; --blue-2:#1a7a5e;
  --modal-1:#fbf9ec; --modal-2:#e8ecd2; --th-bg:#e3e8c8; --glow-1:rgba(31,138,108,.22);
  --ico-bg:rgba(26,122,94,.1); --sky-line:rgba(11,46,38,.15);
  --compass-bg:radial-gradient(circle,rgba(31,138,108,.2),rgba(251,249,236,.95) 72%);
}
[data-theme="light"][data-palette="mint"]{
  --bg:#e6f6f1; --ink:#07302b; --mute:rgba(7,48,43,.72);
  --blue:#0f7a63; --blue-2:#0f7a63; --gold:#0f7a63; --gold-2:#0b5f4d; --gl:15,122,99;
  --line:rgba(15,122,99,.3); --line-gold:rgba(15,122,99,.7); --tick:rgba(7,48,43,.3);
  --rg1:#43c9a6; --rg2:#0b6a56; --ico-bg:rgba(15,122,99,.1);
  --act-1:rgba(43,184,154,.28); --act-2:rgba(212,251,238,.7);
  --modal-1:#f6fffb; --modal-2:#d4efe6; --th-bg:#cdeade;
  --glow-1:rgba(43,184,154,.28); --glow-2:rgba(15,122,99,.1); --sky-line:rgba(7,48,43,.15);
  --compass-bg:radial-gradient(circle,rgba(43,184,154,.25),rgba(246,255,251,.95) 72%);
}
[data-theme="light"][data-palette="turquoise"]{
  --bg:#e4f4f3; --ink:#06353b; --mute:rgba(6,53,59,.72); --blue:#0e7f8a; --blue-2:#0e7f8a;
  --gold:#8b867f; --gl:118,114,107; --ico-bg:rgba(14,127,138,.1);
  --modal-1:#f7fdfc; --modal-2:#d5ecea; --th-bg:#cde6e4; --glow-1:rgba(24,162,173,.25); --sky-line:rgba(6,53,59,.15);
  --compass-bg:radial-gradient(circle,rgba(24,162,173,.22),rgba(247,253,252,.95) 72%);
}
[data-theme="light"][data-palette="royal"]{
  --bg:#e8edfa; --ink:#0b1d52; --mute:rgba(11,29,82,.72); --blue:#2a56c4; --blue-2:#2a56c4;
  --gold:#868179; --gl:112,108,101; --ico-bg:rgba(42,86,196,.1);
  --modal-1:#fafbff; --modal-2:#dbe3f7; --th-bg:#d3dcf4; --glow-1:rgba(61,111,224,.22); --sky-line:rgba(11,29,82,.15);
  --compass-bg:radial-gradient(circle,rgba(61,111,224,.2),rgba(250,251,255,.95) 72%);
}

[data-theme="light"][data-palette="ruby"]{
  --bg:#fbf1ea; --ink:#3a0f1e; --mute:rgba(58,15,30,.78); --blue:#a23a59; --blue-2:#a23a59;
  --gold:#88847d; --gl:115,111,105; --ico-bg:rgba(162,58,89,.1);
  --modal-1:#fffaf6; --modal-2:#f2dcd2; --th-bg:#ecd2c6; --glow-1:rgba(170,60,90,.22); --sky-line:rgba(58,15,30,.15);
  --compass-bg:radial-gradient(circle,rgba(190,70,100,.2),rgba(255,250,246,.95) 72%);
}
[data-theme="light"][data-palette="amethyst"]{
  --bg:#f4eefc; --ink:#231048; --mute:rgba(35,16,72,.78); --blue:#6a45c9; --blue-2:#6a45c9;
  --gold:#868179; --gl:112,108,101; --ico-bg:rgba(106,69,201,.1);
  --modal-1:#fbf8ff; --modal-2:#e2d6f6; --th-bg:#dacbf2; --glow-1:rgba(122,84,220,.22); --sky-line:rgba(35,16,72,.15);
  --compass-bg:radial-gradient(circle,rgba(122,84,220,.2),rgba(251,248,255,.95) 72%);
}
[data-theme="light"][data-palette="caramel"]{
  --bg:#fbf2e6; --ink:#2c241e; --mute:rgba(53,42,34,.78); --blue:#a0602c; --blue-2:#a0602c;
  --gold:#89837d; --gl:115,110,105; --ico-bg:rgba(160,96,44,.1);
  --modal-1:#fffaf2; --modal-2:#f0dcc2; --th-bg:#e8d0b0; --glow-1:rgba(200,130,60,.24); --sky-line:rgba(58,34,16,.15);
  --compass-bg:radial-gradient(circle,rgba(200,130,60,.22),rgba(255,250,242,.95) 72%);
}
[data-theme="light"][data-palette="rose"]{
  --bg:#fdf0f4; --ink:#4a1230; --mute:rgba(74,18,48,.78); --blue:#b8386e; --blue-2:#b8386e;
  --gold:#948e8c; --gl:129,123,121; --ico-bg:rgba(184,56,110,.1);
  --modal-1:#fffafb; --modal-2:#f6d8e4; --th-bg:#f0cadb; --glow-1:rgba(220,90,140,.22); --sky-line:rgba(74,18,48,.15);
  --compass-bg:radial-gradient(circle,rgba(220,90,140,.2),rgba(255,250,251,.95) 72%);
}
[data-theme="light"][data-palette="graphite"]{
  --bg:#f2f3f6; --ink:#15171d; --mute:rgba(21,23,29,.76); --blue:#4b5878; --blue-2:#4b5878;
  --gold:#87837b; --gl:113,110,103; --ico-bg:rgba(75,88,120,.1);
  --modal-1:#fbfbfd; --modal-2:#dfe2ea; --th-bg:#d5d9e3; --glow-1:rgba(120,130,160,.2); --sky-line:rgba(21,23,29,.15);
  --compass-bg:radial-gradient(circle,rgba(120,130,160,.2),rgba(251,251,253,.95) 72%);
}

/* ===== 5 TEMAT E BARDHA ===== */
[data-theme="light"][data-palette="snow"]{
  --bg:#f7f9fc; --ink:#10243a; --mute:rgba(16,36,58,.74); --blue:#1f6fb2; --blue-2:#1f6fb2;
  --gold:#8d8981; --gl:120,116,109; --panel:rgba(255,255,255,.94); --panel-2:rgba(243,248,254,.97);
  --line:rgba(16,36,58,.14); --line-gold:rgba(99,93,81,.5); --track:rgba(16,36,58,.09); --tick:rgba(16,36,58,.28);
  --rg1:#62b4f4; --rg2:#1f6fb2; --ico-bg:rgba(31,111,178,.1); --cell:rgba(255,255,255,.85);
  --act-1:rgba(98,180,244,.28); --act-2:rgba(232,230,225,.75);
  --modal-1:#ffffff; --modal-2:#e6eef8; --th-bg:#dce8f5; --glow-1:rgba(80,160,230,.18); --glow-2:rgba(99,93,81,.07); --sky-line:rgba(16,36,58,.13);
  --compass-bg:radial-gradient(circle,rgba(80,160,230,.2),rgba(255,255,255,.96) 72%);
}
[data-theme="light"][data-palette="blush"]{
  --bg:#fff6f9; --ink:#4a1230; --mute:rgba(74,18,48,.76); --blue:#c0407a; --blue-2:#c0407a;
  --gold:#948e8c; --gl:129,123,121; --panel:rgba(255,255,255,.94); --panel-2:rgba(255,241,247,.97);
  --line:rgba(192,64,122,.2); --line-gold:rgba(110,100,96,.5); --track:rgba(74,18,48,.09); --tick:rgba(74,18,48,.26);
  --rg1:#f7a6c4; --rg2:#c0407a; --ico-bg:rgba(192,64,122,.1); --cell:rgba(255,255,255,.85);
  --act-1:rgba(247,166,196,.34); --act-2:rgba(240,237,236,.8);
  --modal-1:#fffcfd; --modal-2:#fbe4ee; --th-bg:#f6d3e3; --glow-1:rgba(240,120,170,.2); --glow-2:rgba(110,100,96,.07); --sky-line:rgba(74,18,48,.13);
  --compass-bg:radial-gradient(circle,rgba(240,120,170,.2),rgba(255,252,253,.96) 72%);
}
[data-theme="light"][data-palette="fresh"]{
  --bg:#f4fcf9; --ink:#06352c; --mute:rgba(6,53,44,.76); --blue:#0f8a6f; --blue-2:#0f8a6f;
  --gold:#0f7a63; --gold-2:#0b5f4d; --gl:15,122,99; --panel:rgba(255,255,255,.94); --panel-2:rgba(238,251,246,.97);
  --line:rgba(15,122,99,.22); --line-gold:rgba(15,122,99,.55); --track:rgba(6,53,44,.09); --tick:rgba(6,53,44,.26);
  --rg1:#43c9a6; --rg2:#0b6a56; --ico-bg:rgba(15,122,99,.1); --cell:rgba(255,255,255,.85);
  --act-1:rgba(67,201,166,.3); --act-2:rgba(214,252,238,.85);
  --modal-1:#fbfffd; --modal-2:#dcf3ea; --th-bg:#cdeade; --glow-1:rgba(67,201,166,.22); --glow-2:rgba(15,122,99,.07); --sky-line:rgba(6,53,44,.13);
  --compass-bg:radial-gradient(circle,rgba(67,201,166,.22),rgba(251,255,253,.96) 72%);
}
[data-theme="light"][data-palette="lavender"]{
  --bg:#faf7ff; --ink:#2a1a55; --mute:rgba(42,26,85,.76); --blue:#7a54dc; --blue-2:#7a54dc;
  --gold:#868179; --gl:112,108,101; --panel:rgba(255,255,255,.94); --panel-2:rgba(246,241,255,.97);
  --line:rgba(122,84,220,.2); --line-gold:rgba(89,82,72,.5); --track:rgba(42,26,85,.09); --tick:rgba(42,26,85,.26);
  --rg1:#b79cf5; --rg2:#7a54dc; --ico-bg:rgba(122,84,220,.1); --cell:rgba(255,255,255,.85);
  --act-1:rgba(183,156,245,.32); --act-2:rgba(232,230,225,.8);
  --modal-1:#fdfbff; --modal-2:#ebe1fb; --th-bg:#e0d3f7; --glow-1:rgba(150,110,240,.2); --glow-2:rgba(89,82,72,.07); --sky-line:rgba(42,26,85,.13);
  --compass-bg:radial-gradient(circle,rgba(150,110,240,.2),rgba(253,251,255,.96) 72%);
}
[data-theme="light"][data-palette="cream"]{
  --bg:#fffaf1; --ink:#2c241e; --mute:rgba(53,42,34,.78); --blue:#a0602c; --blue-2:#a0602c;
  --gold:#89837d; --gl:115,110,105; --panel:rgba(255,255,255,.94); --panel-2:rgba(255,247,234,.97);
  --line:rgba(114,106,99,.22); --line-gold:rgba(93,85,77,.52); --track:rgba(58,34,16,.09); --tick:rgba(58,34,16,.26);
  --rg1:#cccac6; --rg2:#827e78; --ico-bg:rgba(160,96,44,.1); --cell:rgba(255,255,255,.85);
  --act-1:rgba(245,192,112,.32); --act-2:rgba(234,232,228,.85);
  --modal-1:#fffdf8; --modal-2:#f6e8d2; --th-bg:#eedcc0; --glow-1:rgba(235,170,80,.22); --glow-2:rgba(93,85,77,.07); --sky-line:rgba(58,34,16,.13);
  --compass-bg:radial-gradient(circle,rgba(235,170,80,.22),rgba(255,253,248,.96) 72%);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%;overflow-x:hidden}
body{
  margin:0;min-height:100%;line-height:1.5;font-weight:500;letter-spacing:.005em;font-family:var(--f-body);color:var(--ink);
  background-color:var(--bg);
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overflow-x:hidden;
  padding:var(--safe-t) 0 var(--safe-b);transition:background-color .5s ease,color .3s ease;
}
button{font-family:inherit}

/* ---------- ATMOSPHERE ---------- */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 70% at 50% 108%,var(--sky-a),transparent 62%),linear-gradient(180deg,var(--sky-b),transparent 55%),
   radial-gradient(at 15% 0%,var(--glow-1),transparent 55%),radial-gradient(at 90% 100%,var(--glow-2),transparent 55%)}
.stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--star-op);transition:opacity 2s ease;
  background-image:
   radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 28% 8%,#fff,transparent),
   radial-gradient(1.5px 1.5px at 44% 24%,#f1f0ee,transparent),radial-gradient(1px 1px at 63% 12%,#fff,transparent),
   radial-gradient(1.5px 1.5px at 78% 22%,#fff,transparent),radial-gradient(1px 1px at 90% 9%,#f1f0ee,transparent),
   radial-gradient(1px 1px at 8% 46%,#fff,transparent),radial-gradient(1.5px 1.5px at 94% 52%,#fff,transparent),
   radial-gradient(1px 1px at 55% 40%,#fff,transparent),radial-gradient(1px 1px at 35% 58%,#f1f0ee,transparent);
  }
[data-theme="light"] .stars{display:none}

/* ---------- LAYOUT ---------- */
.app{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:12px 12px 28px}
.glass{background:linear-gradient(160deg,var(--panel),var(--panel-2));border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 6px 18px rgba(0,0,0,.25)}
[data-theme="light"] .glass{box-shadow:0 6px 16px rgba(120,84,20,.12)}

.hdr{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 4px 12px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--gf1);font-size:1.1rem;
  background:radial-gradient(circle at 35% 30%,var(--modal-1),var(--modal-2));border:2px solid var(--gf2);
  box-shadow:0 0 0 3px rgba(var(--gl),.2),0 0 22px rgba(var(--gl),.35)}
.brand h1{margin:0;font-family:var(--f-head);font-weight:700;font-size:1.5rem;letter-spacing:.02em;line-height:1}
.brand small{display:block;color:var(--mute);font-size:.74rem;margin-top:3px}
.hdr-right{display:flex;align-items:center;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font-size:.74rem;font-weight:700}
.chip i{color:var(--gold);font-size:.74rem}
.chip small{display:block;color:var(--mute);font-size:.74rem;font-weight:500;line-height:1}
.icon-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--gold);cursor:pointer;transition:.25s}
.icon-btn:hover{transform:rotate(60deg);border-color:var(--line-gold)}

/* ---------- HERO ---------- */
.top-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.top-row>section{margin:0;min-width:0}
.hero{position:relative;overflow:hidden;padding:18px 8px 0;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-time{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:900;
  font-size:clamp(1.55rem,7.2vw,3.1rem);line-height:1;letter-spacing:.02em;color:#fff;white-space:nowrap;
  text-shadow:0 0 14px rgba(var(--gl),.45)}
[data-theme="light"] .hero-time{color:var(--ink);text-shadow:none}
.hero-time .sec{font-size:.36em;color:var(--blue-2);margin-left:6px;font-weight:700}
.hero-time .colon{color:var(--gold)}
.hero-date{margin-top:10px;font-family:var(--f-head);font-size:clamp(.88rem,3.4vw,1.15rem);font-weight:700;letter-spacing:.03em}
.hero-date b{color:var(--gold);font-weight:700}
.hero-hijri{margin-top:2px;color:var(--gold);font-family:var(--f-ar);font-size:clamp(.8rem,3vw,1.02rem)}
.sun-row{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:12px;color:var(--mute);font-size:clamp(.66rem,2.6vw,.78rem);font-weight:600}
.sun-row i{color:var(--gold);margin-right:5px}
.sun-row b{color:var(--ink)}
.skyline{display:block;width:calc(100% + 16px);margin:auto -8px 0;padding-top:8px;height:56px;color:var(--sky-line)}

/* ---------- ACTIONS ---------- */
.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}
.act{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:16px;cursor:pointer;
  color:var(--gold);font-size:.74rem;font-weight:700;border:1px solid var(--line);background:linear-gradient(160deg,var(--panel),var(--panel-2));transition:.25s}
.act i{font-size:1.05rem}
.act:hover{transform:translateY(-2px);border-color:var(--line-gold)}
.act:active{transform:scale(.96)}

/* ---------- COUNTDOWN RING ---------- */
.next{padding:12px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-wrap{position:relative;width:100%;max-width:250px;aspect-ratio:1}
.ring-wrap svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ring-track{fill:none;stroke:var(--track);stroke-width:7}
.ring-prog{fill:none;stroke:url(#ringGrad);stroke-width:7;stroke-linecap:round;
  }
.ring-dot{fill:var(--gold)}
.ring-ticks line{stroke:var(--tick);stroke-width:1.5}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.ring-center .lbl{font-size:clamp(.66rem,2.2vw,.7rem);color:var(--mute);font-weight:600}
.ring-center .pname{font-family:var(--f-head);font-size:clamp(1.15rem,5vw,1.7rem);font-weight:700;line-height:1.05}
.ring-center .parab{font-family:var(--f-ar);color:var(--gold);font-size:clamp(.95rem,3.8vw,1.25rem);line-height:1}
.ring-center .cd{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:700;font-size:clamp(.82rem,3.9vw,1.5rem);margin-top:4px;white-space:nowrap;color:var(--gold)}
.ring-center .at{font-size:clamp(.66rem,2.2vw,.7rem);color:var(--mute);margin-top:2px}

/* ---------- PRAYER LIST ---------- */
#prayerGrid{display:grid;gap:8px;margin:12px 0}
.prayer{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;
  border:1px solid var(--line);background:linear-gradient(150deg,var(--panel),var(--panel-2));
  transition:transform .3s,border-color .3s,opacity .4s,background .4s;overflow:hidden}
.prayer .ico{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;
  color:var(--blue-2);background:var(--ico-bg);border:1px solid var(--line);transition:.4s}
.prayer .names{flex:1;min-width:0}
.prayer .sq{font-weight:800;font-size:1rem}
.prayer .ar{font-family:var(--f-ar);font-size:1.05rem;color:var(--mute);line-height:1.1}
.prayer .tm{font-family:var(--f-num);font-weight:700;font-size:1.35rem;color:var(--gold);font-variant-numeric:tabular-nums}
.prayer .st{width:20px;text-align:center;color:var(--blue-2);font-size:.85rem}
.prayer.past{opacity:.6}
.prayer.past .tm{color:var(--mute)}
.prayer.next-up{border-color:var(--line-gold)}
.prayer.next-up .st{color:var(--gold)}
.prayer.active{border-color:var(--gf2);background:linear-gradient(120deg,var(--act-1),var(--act-2),var(--act-1));
  box-shadow:0 0 18px rgba(var(--gl),.35)}
.prayer.active .ico{background:linear-gradient(135deg,var(--gf1),var(--gf2));color:var(--on-gold);border-color:var(--gf2);box-shadow:0 0 20px rgba(var(--gl),.65)}
.prayer.active .tm{color:#fff;text-shadow:0 0 14px rgba(var(--gl),.9)}
[data-theme="light"] .prayer.active .tm{color:var(--ink);text-shadow:none}
.enter{animation:rise .35s ease-out both}
@keyframes rise{from{opacity:0}to{opacity:1}}

/* ---------- AYAH + TOMORROW ---------- */
.ayah{padding:16px 18px;margin-bottom:12px;position:relative}
.ayah::before{content:'\201C';position:absolute;top:-6px;left:12px;font-family:var(--f-head);font-size:4rem;color:var(--gold);opacity:.35;line-height:1}
.ayah p{margin:0}
#ayahText{font-family:var(--f-head);font-size:1.2rem;font-weight:700;line-height:1.35;padding-left:18px}
#ayahSource{margin-top:8px!important;text-align:right;color:var(--gold);font-size:.74rem;font-weight:700}
.tom{padding:12px}
.tom h3{margin:0 0 9px;font-size:.78rem;color:var(--mute);font-weight:700}
#tomorrowGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;text-align:center}
#tomorrowGrid div{padding:7px 2px;border-radius:11px;background:var(--cell);border:1px solid var(--line)}
#tomorrowGrid span{display:block;font-size:.74rem;color:var(--mute);font-weight:600;margin-bottom:3px}
#tomorrowGrid b{font-family:var(--f-num);font-size:.74rem;color:var(--gold)}
#statusText{text-align:center;margin:14px 0 0;font-size:.74rem;color:var(--mute)}

/* ---------- MODALS ---------- */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(2,10,16,.82);opacity:0;pointer-events:none;transition:opacity .3s}
[data-theme="light"] .modal{background:rgba(40,28,8,.6)}
.modal.show{opacity:1;pointer-events:all}
.modal-content{width:100%;max-width:480px;max-height:calc(90 * var(--vu));overflow-y:auto;padding:20px 18px;border-radius:26px;
  background:linear-gradient(160deg,var(--modal-1),var(--modal-2));border:1px solid var(--line-gold);color:var(--ink);
  box-shadow:0 0 60px rgba(var(--gl),.15),0 30px 70px rgba(0,0,0,.4);animation:pop .2s ease-out}
@keyframes pop{from{opacity:0}to{opacity:1}}
.modal h2{margin:0;font-family:var(--f-head);font-size:1.55rem;color:var(--gold)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.x{background:none;border:none;color:var(--gold);font-size:1.2rem;cursor:pointer}
.field label{display:block;font-size:.74rem;font-weight:700;color:var(--blue-2);margin-bottom:5px}
.field select{width:100%;padding:10px 12px;border-radius:12px;font-size:.82rem;font-family:inherit;
  background:var(--field-bg);color:var(--ink);border:1px solid var(--line);outline:none}
.field select:focus{border-color:var(--line-gold)}
.field select option{background:var(--modal-2);color:var(--ink)}
.stack{display:grid;gap:12px}
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.sw{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;cursor:pointer;color:var(--mute);font-size:.74rem;font-weight:700;padding:2px 0}
.sw .dot{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);transition:.25s;position:relative}
.sw .dot::after{content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:.8rem;opacity:0;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.sw.on{color:var(--gold)}
.sw.on .dot{border-color:var(--gf2);box-shadow:0 0 0 3px rgba(var(--gl),.3)}
.sw.on .dot::after{opacity:1}
.sw:hover .dot{transform:scale(1.07)}
.btn{width:100%;padding:11px;border-radius:13px;border:none;cursor:pointer;font-weight:800;font-size:.8rem;color:var(--on-gold);
  background:linear-gradient(135deg,var(--gf1),var(--gf2));box-shadow:0 4px 18px rgba(var(--gl),.35);transition:.25s}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--gold);border:1px solid var(--line-gold);box-shadow:none}
.btn.danger{background:transparent;color:var(--err);border:1px solid var(--err);box-shadow:none;opacity:.85}
.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:12px;background:var(--cell);border:1px solid var(--line);font-size:.82rem;font-weight:700}
.switch{width:50px;height:28px;border-radius:99px;border:1px solid var(--line-gold);background:var(--field-bg);position:relative;cursor:pointer}
.switch i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--gf1),var(--gf2));transition:.3s;box-shadow:0 0 8px rgba(var(--gl),.6)}
.switch.on i{left:calc(100% - 23px)}

/* Qibla */
.compass{position:relative;width:240px;height:240px;margin:0 auto;border-radius:50%;background:var(--compass-bg);
  border:3px solid var(--gf2);box-shadow:0 0 18px rgba(var(--gl),.2);transition:box-shadow .4s,border-color .4s}
[data-theme="light"] .compass{box-shadow:0 8px 26px rgba(120,84,20,.2),inset 0 0 26px rgba(150,108,30,.12)}
.compass.aligned{border-color:var(--ok);box-shadow:0 0 50px var(--ok),inset 0 0 36px rgba(74,222,128,.2)}
.compass .d{position:absolute;font-family:var(--f-head);font-weight:700;color:var(--mute);font-size:1rem}
.d.n{top:7px;left:50%;transform:translateX(-50%);color:var(--gold)!important}.d.s{bottom:7px;left:50%;transform:translateX(-50%)}
.d.e{right:12px;top:50%;transform:translateY(-50%)}.d.w{left:12px;top:50%;transform:translateY(-50%)}
.needle{position:absolute;top:50%;left:50%;width:4px;height:96px;transform-origin:center bottom;transform:translate(-50%,-100%);
  background:linear-gradient(to top,transparent,var(--gf2) 40%,var(--gf2));transition:transform .3s ease;box-shadow:0 0 12px rgba(var(--gl),.7)}
.needle::before{content:'';position:absolute;top:-10px;left:50%;transform:translateX(-50%);border:8px solid transparent;border-bottom:15px solid var(--gf2);border-top:0}
.kaaba{position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--gf2);box-shadow:0 0 12px var(--gf2)}

/* Calendar */
.cal-table{width:100%;border-collapse:collapse;font-size:.74rem}
.cal-table th{position:sticky;top:0;padding:8px 3px;background:var(--th-bg);color:var(--gold);font-size:.74rem}
.cal-table td{padding:7px 3px;text-align:center;border-bottom:1px solid var(--line);font-family:var(--f-num);font-size:.74rem}
.cal-table td:first-child{font-family:var(--f-body);font-weight:800}
.cal-table tr.today td{background:rgba(var(--gl),.22);color:var(--gold);font-weight:800}

/* Tasbih */
.tasbih{width:170px;height:170px;margin:0 auto;border-radius:50%;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;font-family:var(--f-num);font-size:2.8rem;font-weight:900;border:4px solid var(--gf2);
  background:radial-gradient(circle at 35% 30%,var(--blue),#0a2a45 75%);background:radial-gradient(circle at 35% 30%,var(--blue),color-mix(in srgb,var(--blue) 40%,#000) 78%);box-shadow:0 0 40px rgba(var(--gl),.35),inset 0 0 30px rgba(0,0,0,.35);transition:.15s}
.tasbih:active{transform:scale(.94);box-shadow:0 0 60px rgba(var(--gl),.7)}
.tasbih small{font-family:var(--f-body);font-size:.74rem;font-weight:500;opacity:.85}

/* Banner */
.banner{position:fixed;bottom:calc(14px + var(--safe-b));left:50%;transform:translate(-50%,160%);z-index:200;display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-radius:16px;max-width:94%;background:linear-gradient(160deg,var(--modal-1),var(--modal-2));border:1px solid var(--line-gold);color:var(--ink);
  box-shadow:0 20px 50px rgba(0,0,0,.45);transition:transform .5s cubic-bezier(.4,0,.2,1)}
.banner.show{transform:translate(-50%,0)}
.banner .t{font-weight:800;font-size:.78rem}.banner .s{font-size:.74rem;color:var(--mute)}
.banner .btn{width:auto;padding:7px 14px;font-size:.74rem}

.hidden{display:none!important}
.center{text-align:center}
.spin{width:46px;height:46px;border:4px solid var(--track);border-top-color:var(--gold);border-radius:50%;animation:sp 1s linear infinite;margin:0 auto 14px}
@keyframes sp{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:380px){.prayer .tm{font-size:1.15rem}.brand h1{font-size:1.25rem}}

/* =====================================================
   SHTESAT (versioni i plotë)
   ===================================================== */
html[data-font="s"]{font-size:15px}
html[data-font="m"]{font-size:17px}
html[data-font="l"]{font-size:19px}
html[data-font="xl"]{font-size:21px}

.toast{position:fixed;left:50%;bottom:calc(24px + var(--safe-b));transform:translate(-50%,40px);opacity:0;z-index:300;
  padding:9px 16px;border-radius:12px;background:var(--modal-2);color:var(--ink);border:1px solid var(--line-gold);font-size:.78rem;font-weight:700;
  transition:.35s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

.ezan-stop{position:fixed;top:calc(10px + var(--safe-t));left:50%;transform:translate(-50%,-160%);z-index:250;display:flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;border:1px solid var(--line-gold);background:var(--modal-1);color:var(--ink);font-weight:800;font-size:.8rem;cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .4s cubic-bezier(.4,0,.2,1)}
.ezan-stop.show{transform:translate(-50%,0)}
.ezan-stop i{color:var(--gold)}

/* cilësimet: seksione */
.sec{border:1px solid var(--line);border-radius:16px;background:var(--cell);padding:0 12px}
.sec>summary{cursor:pointer;list-style:none;padding:12px 2px;font-weight:800;font-size:.86rem;color:var(--gold);display:flex;justify-content:space-between;align-items:center}
.sec>summary::-webkit-details-marker{display:none}
.sec>summary::after{content:'\f078';font-family:'Font Awesome 6 Free';font-weight:900;font-size:.74rem;transition:transform .3s}
.sec[open]>summary::after{transform:rotate(180deg)}
.sec>.stack{padding:2px 0 14px}
.input{width:100%;padding:10px 12px;border-radius:12px;font-size:.84rem;font-family:inherit;background:var(--field-bg);color:var(--ink);border:1px solid var(--line);outline:none}
.input:focus{border-color:var(--line-gold)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.field input[type=range]{width:100%;accent-color:var(--gf2)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip-btn{padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--mute);font-size:.74rem;font-weight:700;cursor:pointer;transition:.2s}
.chip-btn.on{background:linear-gradient(135deg,var(--gf1),var(--gf2));color:var(--on-gold);border-color:var(--gf2)}
.adjust{display:grid;gap:6px}
.adj-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:12px;background:var(--cell);border:1px solid var(--line);font-size:.8rem;font-weight:700}
.adj-ctl{display:flex;align-items:center;gap:8px}
.adj-ctl button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-gold);background:transparent;color:var(--gold);font-size:1rem;font-weight:800;cursor:pointer;line-height:1}
.adj-ctl output{min-width:34px;text-align:center;font-family:var(--f-num);font-size:.78rem;color:var(--gold)}

/* karta të përgjithshme */
.card{padding:14px 14px 12px;margin-bottom:12px}
.card-title{font-size:.8rem;font-weight:800;color:var(--gold);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.bar{height:7px;border-radius:99px;background:var(--track);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gf1),var(--gf2));transition:width .6s ease}

/* butoni i shënimit te vakti */
.chk{width:32px;height:32px;flex:none;border-radius:50%;border:1.5px solid var(--line-gold);background:transparent;color:transparent;cursor:pointer;display:grid;place-items:center;font-size:.8rem;transition:.25s;z-index:2}
.chk:hover{border-color:var(--gf2)}
.chk.on{background:linear-gradient(135deg,var(--gf1),var(--gf2));border-color:var(--gf2);color:var(--on-gold);box-shadow:0 0 14px rgba(var(--gl),.5)}
.prayer.past.done{opacity:.88}
.prayer .ar em{font-style:normal;font-family:var(--f-body);font-size:.74rem;margin-inline-start:6px;opacity:.85}

/* shënim nën unazë */
.endnote{margin-top:8px;padding:5px 12px;border-radius:99px;border:1px solid var(--line-gold);font-size:clamp(.66rem,2.5vw,.74rem);font-weight:800;color:var(--gold);text-align:center}

/* Ramazani */
.ramadan{padding:14px;margin:12px 0}
.ram-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ram-title{font-family:var(--f-head);font-size:1.25rem;font-weight:700;color:var(--gold)}
.ram-day{font-size:.78rem;font-weight:800;color:var(--ink);padding:3px 10px;border-radius:99px;border:1px solid var(--line-gold)}
.ram-main{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.ram-label{font-size:.82rem;color:var(--mute);font-weight:700}
.ram-count{font-family:var(--f-num);font-weight:800;font-size:1.5rem;color:var(--gold);font-variant-numeric:tabular-nums}
.ram-times{display:flex;justify-content:space-between;margin-top:9px;font-size:.76rem;color:var(--mute);font-weight:700}
.ram-times b{font-family:var(--f-num);color:var(--ink);margin-inline-start:4px}

/* gjurmuesi */
.tr-head{display:flex;align-items:baseline;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.tr-head b{font-family:var(--f-num);font-size:1.3rem;color:var(--ink)}
.tr-streak{font-size:.78rem;font-weight:800;color:var(--gold)}
.tr-best{font-size:.74rem;color:var(--mute);font-weight:700;margin-inline-start:auto}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:12px;text-align:center}
.wd{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.74rem;font-weight:700;color:var(--mute)}
.wd span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line);font-family:var(--f-num);font-size:.74rem;color:var(--mute)}
.wd.part span{border-color:var(--gf2);color:var(--gold)}
.wd.full span{background:linear-gradient(135deg,var(--gf1),var(--gf2));border-color:var(--gf2);color:var(--on-gold)}
.wd.today{color:var(--ink)}

/* ngjarjet */
.tip{padding:8px 12px;border-radius:12px;background:rgba(var(--gl),.14);border:1px solid var(--line-gold);font-size:.78rem;font-weight:700;margin-bottom:8px}
.ev-list{display:grid;gap:6px}
.ev-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:var(--cell);border:1px solid var(--line);font-size:.8rem;font-weight:700}
.ev-item small{display:block;font-weight:500;color:var(--mute);font-size:.74rem;margin-top:2px}
.ev-in{font-family:var(--f-num);font-size:.74rem;color:var(--gold);white-space:nowrap}

/* orë shtesë */
.extra-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.xc{padding:8px 4px;text-align:center;border-radius:12px;background:var(--cell);border:1px solid var(--line)}
.xc span{display:block;font-size:.74rem;color:var(--mute);font-weight:700;margin-bottom:3px;line-height:1.2}
.xc b{font-family:var(--f-num);font-size:.74rem;color:var(--gold)}
.forb-title{font-size:.74rem;color:var(--mute);font-weight:700;margin:4px 0 6px}

/* ajeti */
.ayah-ar{font-family:var(--f-ar);font-size:1.45rem;line-height:1.9;text-align:center;color:var(--gold);padding:2px 4px 6px;direction:rtl}
.ayah-ar:empty{display:none}

/* kibla */
.big-deg{font-family:var(--f-num);font-size:1.8rem;font-weight:800;color:var(--gold)}
.cal-head{font-family:var(--f-head);font-size:1.15rem;font-weight:700;margin-bottom:8px}

/* tasbih me unazë progresi */
.tasbih-wrap{position:relative;width:200px;height:200px;margin:0 auto 6px;display:grid;place-items:center}
.tas-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.tas-track{fill:none;stroke:var(--track);stroke-width:4}
.tas-prog{fill:none;stroke:var(--gf2);filter:none;stroke-width:4;stroke-linecap:round;stroke-dasharray:339.29;stroke-dashoffset:339.29;transition:stroke-dashoffset .25s ease;}
.tasbih{width:166px;height:166px;margin:0;position:relative;z-index:1}
.tas-msg{min-height:1.2em;font-size:.82rem;font-weight:800;color:var(--gold)}

/* 99 emrat */
.names-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:calc(56 * var(--vu));overflow-y:auto;padding:2px}
.name-card{padding:10px 10px 9px;border-radius:14px;background:var(--cell);border:1px solid var(--line);text-align:center}
.name-card .n{font-size:.74rem;color:var(--mute);font-weight:800}
.name-card .a{font-family:var(--f-ar);font-size:1.5rem;color:var(--gold);line-height:1.5;direction:rtl}
.name-card .tr{font-size:.74rem;font-weight:800}
.name-card .m{font-size:.74rem;color:var(--mute);margin-top:2px}

/* dua */
.dua-list{display:grid;gap:10px;max-height:calc(62 * var(--vu));overflow-y:auto;padding:2px}
.dua-card{padding:12px 14px;border-radius:16px;background:var(--cell);border:1px solid var(--line)}
.dua-card .a{font-family:var(--f-ar);font-size:1.45rem;line-height:1.9;color:var(--gold);text-align:center;direction:rtl}
.dua-card .tr{font-size:.74rem;font-style:italic;color:var(--mute);margin-top:4px;text-align:center}
.dua-card .m{font-size:.82rem;margin-top:6px;text-align:center;font-weight:600}
.dua-card .rep{display:inline-block;margin-top:6px;padding:2px 10px;border-radius:99px;background:rgba(var(--gl),.18);border:1px solid var(--line-gold);font-family:var(--f-num);font-size:.74rem;color:var(--gold)}

/* RTL (arabisht) */
[dir="rtl"] .ayah::before{left:auto;right:12px}
[dir="rtl"] #ayahText{padding-left:0;padding-right:18px}
[dir="rtl"] #ayahSource{text-align:left}
[dir="rtl"] .sec>summary{flex-direction:row}
[dir="rtl"] .hero-time,[dir="rtl"] .prayer .tm,[dir="rtl"] .ring-center .cd{direction:ltr}
[dir="rtl"] .banner{direction:rtl}

@media (max-width:420px){
  .names-list{grid-template-columns:1fr}
  .extra-grid{grid-template-columns:repeat(3,1fr)}
}

/* numrat dhe orët mbeten gjithmonë majtas→djathtas (edhe në arabisht) */
.xc b,.ev-in,.ram-count,.ram-times b,#tomorrowGrid b,.cal-table td,.big-deg,.tas-msg b,.adj-ctl output,.ring-center .at,.endnote{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .ring-center .at,[dir="rtl"] .endnote{direction:rtl;unicode-bidi:plaintext}

/* telefon i vogël */
@media (max-width:360px){
  .app{padding:8px 8px 24px}
  .top-row{gap:8px}
  .hero{padding:14px 4px 0}
  .actions{gap:6px}.act{font-size:.74rem;padding:10px 2px}
  .prayer{padding:10px 10px;gap:9px}.prayer .ico{width:36px;height:36px}
  .chip small{display:none}
}
@media (max-width:360px){
  .ring-center .lbl{font-size:.74rem}
  .ring-center .cd{font-size:.8rem}
  .ring-center .pname{font-size:1.05rem}
}

/* instalimi + kontrolli */
.install{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:12px;border-color:var(--line-gold)}
.install img{border-radius:12px;flex:none}
.install .inst-body{flex:1;min-width:0}
.install b{font-size:.9rem}
.install p{margin:3px 0 0;font-size:.74rem;color:var(--mute);line-height:1.4}
.install p i{color:var(--gold);margin:0 2px}
.install .btn{width:auto;padding:9px 16px;flex:none}
.check-list{display:grid;gap:6px}
.chk-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--cell);border:1px solid var(--line);font-size:.78rem;font-weight:700}
.chk-row i{width:18px;text-align:center;flex:none}
.chk-row.ok i{color:var(--ok)}.chk-row.bad i{color:var(--err)}.chk-row.warn i{color:var(--gold)}
.chk-row span{flex:1}
.chk-row small{font-weight:600;color:var(--mute);font-size:.74rem;text-align:end}
.note{margin:0;font-size:.74rem;color:var(--mute);line-height:1.5}

/* ===== abonimi, renditja, chat, donate ===== */
.srv-sub{margin:0 0 12px;font-size:.8rem;color:var(--mute);line-height:1.5}
.hp{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
.consent{display:flex;gap:8px;align-items:flex-start;font-size:.74rem;color:var(--mute);margin:10px 0 6px;line-height:1.4;cursor:pointer}
.consent input{margin-top:2px;accent-color:var(--gf2)}
.srv-err{color:var(--err);font-size:.76rem;font-weight:700;min-height:1em;margin:8px 0 0}
.have{margin:10px 0}.have summary{cursor:pointer;font-size:.76rem;color:var(--gold);font-weight:700;margin-bottom:8px}
.acc-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.acc-head b{font-size:1rem}.acc-today{font-family:var(--f-num);font-size:.74rem;color:var(--gold)}
.acc-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:10px 0;font-size:.78rem;font-weight:700}
.btn.small{width:auto;padding:7px 14px;font-size:.74rem;flex:none}
.code-row{display:flex;gap:8px;align-items:center;margin:8px 0}
.code-row code{flex:1;font-size:.74rem;word-break:break-all;padding:8px;border-radius:10px;background:var(--cell);border:1px solid var(--line);direction:ltr;user-select:all}
.acc-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.tabs{display:flex;gap:6px;margin-bottom:10px}
.tabs button{flex:1;padding:8px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--mute);font-weight:800;font-size:.76rem;cursor:pointer}
.tabs button.on{background:linear-gradient(135deg,var(--gf1),var(--gf2));color:var(--on-gold);border-color:var(--gf2)}
.lb-list{list-style:none;margin:8px 0;padding:0;display:grid;gap:5px;max-height:440px;overflow-y:auto}
.lb-list li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:var(--cell);border:1px solid var(--line);font-size:.82rem;font-weight:700}
.lb-list li.me{border-color:var(--gf2);background:rgba(var(--gl),.16)}
.lb-list .rk{min-width:30px;text-align:center;font-family:var(--f-num);font-size:.74rem;color:var(--gold)}
.lb-list .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-list .ct{font-family:var(--f-num);color:var(--gold);font-size:.8rem}
.donate-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:12px 0 4px;padding:15px 18px;border-radius:18px;border:2px solid var(--gf2);
  background:linear-gradient(135deg,var(--gf1),var(--gf2));color:var(--on-gold);font-family:var(--f-body);font-weight:800;font-size:1.05rem;line-height:1.2;cursor:pointer;
  box-shadow:0 6px 18px rgba(var(--gl),.28);transition:transform .2s}
.donate-btn:active{transform:scale(.98)}
.donate-btn i{color:#b91c1c;font-size:1.15rem}
.amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.amounts button{padding:14px 6px;border-radius:14px;border:1.5px solid var(--line);background:var(--cell);color:var(--ink);font-family:var(--f-num);font-weight:800;font-size:1rem;cursor:pointer}
.amounts button.on{background:linear-gradient(135deg,var(--gf1),var(--gf2));color:var(--on-gold);border-color:var(--gf2)}
.btn.paypal{background:#ffc439;color:#111;box-shadow:none;display:flex;align-items:center;justify-content:center;gap:8px}
.btn.paypal i{color:#003087;font-size:1.1rem}
.chat-fab{position:fixed;right:14px;bottom:calc(16px + var(--safe-b));z-index:120;width:54px;height:54px;border-radius:50%;border:2px solid var(--gf2);
  background:linear-gradient(135deg,var(--modal-1),var(--modal-2));color:var(--gold);font-size:1.25rem;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.chat-fab .badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;border-radius:9px;background:var(--err);color:#fff;font-size:.74rem;font-weight:800;display:grid;place-items:center;padding:0 4px}
.chat-panel{position:fixed;right:12px;bottom:calc(80px + var(--safe-b));z-index:130;width:min(360px,calc(100 * var(--vwu) - 24px));height:min(calc(70 * var(--vu)),520px);
  display:flex;flex-direction:column;border-radius:20px;background:linear-gradient(160deg,var(--modal-1),var(--modal-2));border:1px solid var(--line-gold);box-shadow:0 14px 40px rgba(0,0,0,.5);overflow:hidden;color:var(--ink)}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);color:var(--gold);font-size:.9rem}
.chat-list{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px}
.chat-empty{margin:auto;text-align:center;font-size:.78rem;color:var(--mute);padding:20px}
.msg{max-width:86%;padding:7px 10px;border-radius:12px;background:var(--cell);border:1px solid var(--line);align-self:flex-start;font-size:.8rem}
.msg.mine{align-self:flex-end;background:rgba(var(--gl),.2);border-color:var(--gf2)}
.msg .who{font-weight:800;font-size:.74rem;color:var(--gold)}
.msg .tm{font-size:.74rem;color:var(--mute);margin-inline-start:6px}
.msg p{margin:2px 0 0;word-break:break-word;white-space:pre-wrap;line-height:1.4}
.chat-note{margin:0;padding:6px 12px;font-size:.74rem;color:var(--mute);text-align:center}
.chat-note.err{color:var(--err);font-weight:700}
.chat-form{display:flex;gap:8px;padding:6px 10px 10px}
.chat-form .btn{width:auto;padding:9px 14px}
.chat-form .btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
@media (max-width:420px){.chat-panel{right:8px;width:calc(100 * var(--vwu) - 16px)}}

/* ===== lexueshmëri: fonte të reja ===== */
html[lang="ar"]{--f-body:'Cairo Variable','Inter Variable',system-ui,sans-serif;--f-head:'Cairo Variable','Inter Variable',sans-serif}
h1,h2,h3,b,strong{font-synthesis:none}
.brand h1{font-size:1.32rem;letter-spacing:0;font-weight:700}
.hero-date{font-weight:700}
.modal h2{font-size:1.35rem;font-weight:700}
#ayahText{font-size:1.12rem;font-weight:600;line-height:1.5}
.ram-title{font-size:1.15rem}
/* numrat e vegjël: font i lexueshëm (Saira te numrat e mëdhenj) */
.cal-table td,#tomorrowGrid b,.xc b,.adj-ctl output,.wd span,.ev-in,.lb-list .rk,.lb-list .ct,.ram-times b,.acc-today,.tr-head b,.sun-row b,.ring-center .at,.cal-table td:first-child{
  font-family:var(--f-body);font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:0}
.cal-table td{font-size:.78rem}
#tomorrowGrid b,.xc b{font-size:.84rem}
.xc span,#tomorrowGrid span{font-size:.74rem;font-weight:600}
.note,.srv-sub{font-size:.8rem}
.prayer .ar{font-size:1.15rem}
.prayer .ar em{font-size:.74rem;font-weight:600}
.sq,.prayer .sq{font-weight:700}
.act{font-size:.76rem;font-weight:700}
.btn{font-weight:700}
.chip,.chip small{font-weight:600}
/* bosh poshtë që ikona e chat-it të mos mbulojë përmbajtjen */
.app{padding-bottom:96px}
.ver{margin:6px 0 0;text-align:center;font-size:.7rem;color:var(--mute);opacity:.7}
.card-title{font-size:1rem;font-weight:800}
.srv .btn{margin-top:10px}
.srv .note{margin:8px 0}

/* ===== renditja: avatar me inicialet, emri bold, vaktet e vogla ===== */
.lb-list{gap:8px}
.lb-list li.lb-row{display:flex;align-items:center;gap:8px;padding:10px 10px;border-radius:16px;background:var(--cell);border:1px solid var(--line)}
.lb-list li.lb-row.me{border-color:var(--gf2);background:rgba(var(--gl),.16)}
.lb-list li.lb-empty{padding:14px;text-align:center;color:var(--mute);font-weight:600;border:1px dashed var(--line);border-radius:14px}
.lb-row .rk{min-width:24px;text-align:center;font-weight:800;font-size:.9rem;color:var(--gold)}
.lb-row .av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.95rem;letter-spacing:.02em;
  color:var(--on-gold);background:linear-gradient(135deg,var(--gf1),var(--gf2));border:2px solid var(--gf2);text-transform:uppercase}
.lb-row .info{flex:1;min-width:0}
.lb-row .nm{display:block;font-size:1rem;font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-row .pst{margin-top:3px;display:flex;flex-wrap:wrap;gap:1px 9px;font-size:.74rem;font-weight:600;color:var(--mute);line-height:1.4}
.lb-row .pp{white-space:nowrap}
.lb-row .pp-ok{color:var(--ok);font-weight:700}
.lb-row .pp-bad{color:var(--err);font-weight:700}
.lb-row .pp-wait{opacity:.7}
.lb-row .ct{flex:none;min-width:26px;text-align:center;font-size:1.05rem;font-weight:800;color:var(--gold)}

/* ===== Saira: numrat e mëdhenj (ora, vaktet, numërimi) ===== */
.hero-time{letter-spacing:.01em;font-weight:800;font-size:clamp(1.9rem,8.6vw,3.5rem)}
.hero-time .sec{font-weight:700}
.prayer .tm{font-size:1.6rem;font-weight:700;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.ring-center .cd{font-weight:700;font-size:clamp(1rem,4.6vw,1.7rem);letter-spacing:.01em}
.ram-count{font-weight:700;font-size:1.7rem}
.big-deg{font-weight:700}
.tasbih{font-weight:700}

/* =====================================================================
   PAMJA E RE: gradient i lehtë, shkëlqim, butona "karamele"
   (të gjitha statike, pa animacione të pafundme, që faqja të mbetet e lehtë)
   ===================================================================== */
:root{--sheen:rgba(255,255,255,.07);--gloss:rgba(255,255,255,.55)}
[data-theme="light"]{--sheen:rgba(255,255,255,.75);--gloss:rgba(255,255,255,.7)}

/* kartat: shkëlqim i lehtë sipër */
.glass,.prayer,.act,.tom,.card,.ayah,.next,.hero{
  background-image:linear-gradient(180deg,var(--sheen) 0%,rgba(255,255,255,0) 42%),linear-gradient(160deg,var(--panel),var(--panel-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 20px rgba(0,0,0,.22)}
[data-theme="light"] .glass,[data-theme="light"] .prayer,[data-theme="light"] .act{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 20px rgba(120,84,20,.12)}

/* butonat kryesorë: karamele me shkëlqim */
.btn,.donate-btn,.chip-btn.on,.tabs button.on,.amounts button.on,.chk.on{
  background-image:linear-gradient(180deg,var(--gloss) 0%,rgba(255,255,255,.14) 46%,rgba(255,255,255,0) 52%),linear-gradient(180deg,var(--gf1) 0%,var(--gf2) 58%,var(--gf3) 100%);
  background-color:var(--gf2);color:var(--on-gold);border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 3px rgba(0,0,0,.14),0 6px 14px rgba(var(--gl),.32);
  text-shadow:0 1px 0 rgba(255,255,255,.4)}
.btn{border-radius:15px;padding:12px}
.btn:active,.donate-btn:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 2px rgba(0,0,0,.14),0 2px 6px rgba(var(--gl),.3)}
@media (hover:hover){.btn:hover,.donate-btn:hover{filter:brightness(1.06) saturate(1.05)}}
.btn:disabled{filter:grayscale(.35);opacity:.6}
.btn.ghost{background-image:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 60%);background-color:rgba(var(--gl),.08);color:var(--gold);
  border:1px solid var(--line-gold);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);text-shadow:none}
.btn.danger{background-image:none;background-color:transparent;color:var(--err);border:1px solid var(--err);box-shadow:none;text-shadow:none}
.btn.paypal{background-image:linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.12) 46%,rgba(255,255,255,0) 52%),linear-gradient(180deg,#ffe28a 0%,#ffc439 58%,#f0a800 100%);
  color:#14233f;border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 14px rgba(240,168,0,.35)}
.btn.small{border-radius:12px;padding:8px 14px}
.donate-btn{border-radius:20px;padding:16px 18px;font-size:1.1rem}
.donate-btn i{color:#c0262d;text-shadow:none}

/* butonat e veprimeve (Kibla, Kalendari…): ikonë karamele në rreth të shndritshëm */
.act{color:var(--ink);gap:8px;padding:12px 4px 10px;border:1px solid var(--line)}
.act i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:1.02rem;color:var(--on-gold);
  background-image:linear-gradient(180deg,var(--gloss) 0%,rgba(255,255,255,.12) 46%,rgba(255,255,255,0) 52%),linear-gradient(180deg,var(--gf1),var(--gf2) 58%,var(--gf3));
  border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 4px 10px rgba(var(--gl),.34)}
@media (hover:hover){.act:hover{border-color:var(--line-gold);transform:translateY(-2px)}}

/* ikonat e vakteve dhe vakti aktual */
.prayer .ico{background-image:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 62%);background-color:var(--ico-bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.prayer.active{background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 50%),linear-gradient(120deg,var(--act-1),var(--act-2),var(--act-1));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 22px rgba(var(--gl),.32)}
.prayer.active .ico{background-image:linear-gradient(180deg,var(--gloss) 0%,rgba(255,255,255,.12) 46%,rgba(255,255,255,0) 52%),linear-gradient(180deg,var(--gf1),var(--gf2) 58%,var(--gf3));
  border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 18px rgba(var(--gl),.55)}
.chk{background-image:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0))}

/* avatar, java, ndërruesi, logoja */
.lb-row .av,.wd.full span{background-image:linear-gradient(180deg,var(--gloss) 0%,rgba(255,255,255,.12) 46%,rgba(255,255,255,0) 52%),linear-gradient(180deg,var(--gf1),var(--gf2) 58%,var(--gf3));
  border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 3px 8px rgba(var(--gl),.3)}
.switch i{background-image:linear-gradient(180deg,var(--gloss),rgba(255,255,255,0) 52%),linear-gradient(180deg,var(--gf1),var(--gf3));box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 6px rgba(var(--gl),.45)}
.icon-btn{background-image:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0));box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.brand-mark{background-image:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 52%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 3px rgba(var(--gl),.2),0 0 22px rgba(var(--gl),.35)}
.tabs button{background-image:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0))}
.chip-btn,.amounts button{background-image:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0))}
.chat-fab{background-image:linear-gradient(180deg,var(--gloss) 0%,rgba(255,255,255,.12) 46%,rgba(255,255,255,0) 52%),linear-gradient(180deg,var(--gf1),var(--gf2) 58%,var(--gf3));
  color:var(--on-gold);border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 18px rgba(0,0,0,.4),0 0 16px rgba(var(--gl),.4)}
.modal-content{background-image:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 30%),linear-gradient(160deg,var(--modal-1),var(--modal-2))}
.card-title{letter-spacing:.01em}

/* ===== paleta: katrorë, më afër njëri-tjetrit ===== */
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.sw-h{grid-column:1/-1;margin:6px 0 1px;font-size:.74rem;font-weight:800;color:var(--mute);letter-spacing:.02em}
.sw-h:first-child{margin-top:0}
.sw{gap:3px;padding:0}
.sw .dot{width:100%;height:auto;aspect-ratio:1/1;border-radius:11px;border:1.5px solid var(--line);box-shadow:inset 0 0 0 1px rgba(128,128,128,.22),0 2px 5px rgba(0,0,0,.18)}
.sw .nm{font-size:.7rem;font-weight:700;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw.on .dot{border-color:var(--gf2);box-shadow:0 0 0 2px var(--gf2),0 0 0 4px rgba(var(--gl),.28)}
.sw.on .nm{color:var(--gold)}
.sw .dot::after{border-radius:inherit;background:rgba(0,0,0,.28)}
/* logoja në pamje të ndritshme: sfond i errët që ikona e artë të duket */
[data-theme="light"] .brand-mark{background-image:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--blue) 70%,#000),color-mix(in srgb,var(--blue) 28%,#000));color:#ede4ce}
/* katrorë me madhësi të barabartë (emrat e gjatë nuk i zgjerojnë kolonat) */
.swatches{grid-template-columns:repeat(5,minmax(0,1fr))}
.sw{min-width:0}
.sw .nm{display:block;width:100%;text-align:center}
.sw .dot::after{inset:auto;top:4px;right:4px;width:19px;height:19px;border-radius:50%;background:var(--gf2);color:var(--on-gold);font-size:.62rem;box-shadow:0 1px 4px rgba(0,0,0,.35)}

/* =====================================================================
   PERSONALIZIMI (vetëm abonentët), VAKTI QË PRITET, EKRANE TË MËDHA
   ===================================================================== */
.u-hide{display:none!important}

/* imazhi i sfondit + errësimi (statike, asnjë blur: faqja mbetet e lehtë) */
.bgimg{position:fixed;inset:0;z-index:0;pointer-events:none;background-size:cover;background-position:center;background-repeat:no-repeat}
.bgscrim{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--bg);opacity:0}

/* ---------- vakti që pritet: border i madh + puls i lehtë te ikona ---------- */
.prayer{overflow:visible}
.prayer.next-up{border-color:var(--gf2);
  box-shadow:0 0 0 3px rgba(var(--gl),.5),0 0 24px rgba(var(--gl),.32),inset 0 1px 0 rgba(255,255,255,.14)}
.prayer.next-up .ico{position:relative;color:var(--gold);border-color:var(--gf2);
  box-shadow:0 0 16px rgba(var(--gl),.65),inset 0 1px 0 rgba(255,255,255,.25)}
.prayer.next-up .ico::after{content:'';position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--gf2);
  pointer-events:none;animation:ico-pulse 1.9s ease-out infinite;will-change:transform,opacity}
@keyframes ico-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.75);opacity:0}}
.prayer.next-up .st{color:var(--gold)}

/* ---------- "Vakti i radhës" si shirit ---------- */
#nextCard .bar-wrap{display:none;width:100%;padding:8px 12px 6px;direction:ltr}
#nextCard[data-style="bar"] .bar-wrap{display:block}
#nextCard[data-style="bar"] .ring-wrap{display:none}
#nextCard[data-style="bar"]{padding:14px 12px}
.top-row[data-next="bar"],.top-row[data-n="1"]{grid-template-columns:1fr}
.bw-top{display:flex;justify-content:space-between;align-items:baseline;font-size:.8rem;font-weight:700;color:var(--mute)}
.bw-main{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:6px 0 12px}
.bw-name{display:flex;align-items:baseline;gap:10px;min-width:0}
.bw-name b{font-family:var(--f-head);font-size:1.55rem;line-height:1.1}
.bw-name .parab{color:var(--gold);font-family:var(--f-ar);font-size:1.3rem}
.bw-main .cd{font-family:var(--f-num);font-weight:700;font-size:1.75rem;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.pbar{position:relative;height:14px;border-radius:99px;background:var(--track);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.pbar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;
  background-image:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 55%),linear-gradient(90deg,var(--rg1),var(--rg2))}
.pbar u{position:absolute;top:50%;left:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;text-decoration:none;
  background-image:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0) 55%),linear-gradient(180deg,var(--gf1),var(--gf3));
  border:1px solid rgba(255,255,255,.2);box-shadow:0 0 12px rgba(var(--gl),.7)}
.bw-ends{display:flex;justify-content:space-between;margin-top:8px;font-size:.8rem;font-weight:700;color:var(--mute);font-variant-numeric:tabular-nums}

/* ---------- paneli i personalizimit te Cilësimet ---------- */
.mem-badge{font-style:normal;font-size:.7rem;font-weight:800;padding:2px 9px;border-radius:99px;border:1px solid var(--line-gold);color:var(--gold);margin-inline-start:8px}
.cu-list{display:grid;gap:6px}
.cu-row{display:flex;align-items:center;gap:10px}
.cu-row .switch{flex:none}
.cu-row .input{flex:1;min-width:0;padding:9px 11px;font-size:.84rem}
.cu-name{flex:1;font-size:.84rem;font-weight:700;color:var(--ink)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.seg button{padding:10px;border-radius:13px;border:1px solid var(--line);background:transparent;color:var(--mute);font-weight:800;font-size:.84rem;cursor:pointer}
.seg button.on{background-image:linear-gradient(180deg,var(--gloss) 0%,rgba(255,255,255,.14) 46%,rgba(255,255,255,0) 52%),linear-gradient(180deg,var(--gf1),var(--gf2) 58%,var(--gf3));
  color:var(--on-gold);border-color:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 4px 10px rgba(var(--gl),.3)}
.bg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.bg-t{position:relative;aspect-ratio:1/1;border-radius:12px;border:1.5px solid var(--line);background-color:var(--cell);background-size:cover;background-position:center;cursor:pointer;overflow:hidden;padding:0}
.bg-t span{position:absolute;left:0;right:0;bottom:0;padding:14px 4px 4px;font-size:.72rem;font-weight:800;color:#fff;text-align:center;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.7));text-shadow:0 1px 2px rgba(0,0,0,.6)}
.bg-t.none,.bg-t.up:not([style]){display:grid;place-items:center}
.bg-t.none span,.bg-t.up:not([style]) span{position:static;background:none;color:var(--mute);text-shadow:none;padding:4px}
.bg-t.on{border-color:var(--gf2);box-shadow:0 0 0 2px var(--gf2),0 0 0 4px rgba(var(--gl),.28)}
.field input[type=range]{margin-top:4px}

/* dritaret mbulojnë ikonën e chat-it */
.modal{z-index:160}
.chat-fab{z-index:120}

@supports (height:1dvh){:root{--vu:1dvh}}

/* =====================================================================
   GJERËSIA E FAQES (opsionale, vetëm abonentët, te Cilësimet)
   Si zoom i shfletuesit: gjithçka zmadhohet proporcionalisht (tekst, ikona, kartat, hapësirat).
   Parazgjedhja është pamja normale. --zf vendoset nga js/custom.js.
   ===================================================================== */
body.wide .app,body.wide .modal-content,body.wide .chat-panel,body.wide .chat-fab,
body.wide .banner,body.wide .ezan-stop,body.wide .toast{zoom:var(--zf)}
.cu-w{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.cu-w button{padding:9px 2px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--mute);font-weight:800;font-size:.76rem;cursor:pointer}
.cu-w button.on{background-image:linear-gradient(180deg,var(--gloss) 0%,rgba(255,255,255,.14) 46%,rgba(255,255,255,0) 52%),linear-gradient(180deg,var(--gf1),var(--gf2) 58%,var(--gf3));
  color:var(--on-gold);border-color:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 3px 8px rgba(var(--gl),.3)}

/* kalibrimi */
.calib-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.calib-grid .cb{display:flex;flex-direction:column;gap:3px;font-size:.78rem;font-weight:700}
.calib-grid input{width:100%;padding:9px 10px;border-radius:12px;border:1px solid var(--line);background:var(--field-bg);color:var(--ink);font-family:var(--f-body);font-size:.95rem;font-variant-numeric:tabular-nums}
.calib-grid input::placeholder{color:var(--mute)}

/* =====================================================================
   RRESHTAT E VAKTEVE: më të ngushtë. Emri BOLD dhe më i madh; arabishtja dhe "deri …" më të vogla.
   Imsaku është rreshti i parë (informues, pa shenjë "e fala").
   ===================================================================== */
#prayerGrid{gap:6px;margin:10px 0}
.prayer{padding:7px 12px;gap:10px;border-radius:16px}
.prayer .ico{width:34px;height:34px;font-size:.86rem}
.prayer .names{display:flex;flex-direction:column;min-width:0}
.prayer .sq{font-size:1.2rem;font-weight:800;line-height:1.15;letter-spacing:0}
.prayer .ar{display:flex;align-items:baseline;gap:6px;font-size:.92rem;line-height:1.15;color:var(--mute)}
.prayer .ar em{font-size:.72rem;font-weight:600;margin:0;font-style:normal;white-space:nowrap}
.prayer .tm{font-size:1.55rem;line-height:1;font-weight:700}
.prayer .chk{width:28px;height:28px;font-size:.7rem}
.prayer .chk-sp{width:28px;height:28px;flex:none}
.prayer.imsak .tm{color:var(--blue-2)}
.prayer.imsak.cur{border-color:var(--line-gold);box-shadow:0 0 0 2px rgba(var(--gl),.28)}

/* vaktet e nesërme me Imsakun: 6 kolona, në telefon 3 x 2 */
#tomorrowGrid{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
@media (max-width:480px){#tomorrowGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* kalendari me 8 kolona */
.cal-table th{font-size:.7rem;padding:7px 2px}
.cal-table td{font-size:.74rem;padding:6px 2px}

/* kalendari: 7 kolona të ngjeshura që hyjnë në telefon */
.cal-table{table-layout:fixed;width:100%}
.cal-table th,.cal-table td{padding:6px 1px;white-space:nowrap;overflow:hidden;text-overflow:clip}
.cal-table th{font-size:.66rem;letter-spacing:0}
.cal-table td{font-size:.72rem}
.cal-table th:first-child,.cal-table td:first-child{width:15%;text-align:center;font-size:.68rem}
.cal-table th{font-size:.6rem}

/* =====================================================================
   PASTRIM VIZUAL
   - të gjitha buzët (border) 80% transparente: tani faqja ka imazh sfondi
   - vakti që pritet: buzë e hollë, vetëm sa duket
   - Lindja / Imsaku më të mëdha; butoni Dhuro i vogël
   ===================================================================== */
html[data-theme][data-palette]{--line:rgba(var(--gl),.2);--line-gold:rgba(var(--gl),.2)}

/* ngjyra të buzëve që ishin të plota -> 80% transparente */
.prayer.active,.chip-btn.on,.tabs button.on,.amounts button.on,.chk.on,.chk:hover,.wd.part span,.wd.full span,
.lb-list li.me,.lb-row.me,.msg.mine,.seg button.on,.cu-w button.on,.act:hover,.lb-row .av,.brand-mark,.chat-fab,.tasbih,.compass,
.prayer.active .ico,.banner,.ezan-stop,.install,.endnote,.modal-content,.chat-panel,.mem-badge,.btn.ghost,.donate-btn{border-color:rgba(var(--gl),.2)}
.compass.aligned{border-color:var(--ok)}
.compass{border-width:2px}

/* vakti që pritet: buzë e hollë */
.prayer.next-up{border-color:rgba(var(--gl),.42);
  box-shadow:0 0 0 1px rgba(var(--gl),.2),0 0 14px rgba(var(--gl),.14),inset 0 1px 0 rgba(255,255,255,.1)}
.prayer.next-up .ico{border-color:rgba(var(--gl),.5);box-shadow:0 0 12px rgba(var(--gl),.45),inset 0 1px 0 rgba(255,255,255,.2)}
.prayer.next-up .ico::after{border:1.5px solid rgba(var(--gl),.7)}

/* Lindja / Imsaku në kartën e orës: shkronja më të mëdha */
.sun-row{gap:6px;margin-top:12px;font-size:clamp(.9rem,3.7vw,1.08rem);font-weight:600}
.sun-row b{font-weight:800;font-size:1.06em;letter-spacing:.01em}
.sun-row i{font-size:.95em;margin-right:6px}

/* Dhuro: i vogël, max 120px */
.donate-btn{display:flex;width:fit-content;max-width:120px;margin:10px auto 6px;padding:6px 10px;gap:5px;border-radius:14px;
  font-size:.7rem;line-height:1.2;white-space:nowrap;overflow:hidden}
.donate-btn i{font-size:.78rem}
.donate-btn{padding:6px 8px;gap:4px;font-size:.66rem;letter-spacing:0}
.donate-btn i{font-size:.72rem}

/* Share: WhatsApp, Viber, Facebook (djathtas te "Gjurmuesi i namazit") */
.card-title{flex-wrap:wrap;row-gap:8px}
.share-row{margin-inline-start:auto;display:flex;align-items:center;gap:6px}
.share-lbl{font-size:.78rem;font-weight:700;color:var(--mute)}
.share-btn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;font-size:1.05rem;padding:0;
  border:1px solid var(--line);background-image:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0));background-color:var(--cell);transition:transform .15s}
.share-btn:active{transform:scale(.92)}
@media (hover:hover){.share-btn:hover{transform:translateY(-2px)}}
.share-btn.wa i{color:#25d366}.share-btn.vb i{color:#8a78ff}.share-btn.fb i{color:#4c8dff}
[data-theme="light"] .share-btn.vb i{color:#6a55e6}[data-theme="light"] .share-btn.fb i{color:#1877f2}
/* Share në të njëjtin rresht me titullin (djathtas), edhe në telefon */
#trackerCard .card-title{flex-wrap:nowrap}
#trackerCard .card-title .ct{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.share-row{flex:none;gap:4px}
.share-btn{width:30px;height:30px;font-size:.95rem}
.share-lbl{margin-inline-end:2px}
@media (max-width:360px){.share-lbl{display:none}}
/* titulli i plotë "Gjurmuesi i namazit" + Share në të njëjtin rresht */
#trackerCard .card-title{font-size:.92rem;gap:6px}
.share-row{gap:3px}
.share-btn{width:28px;height:28px;font-size:.86rem}
.share-lbl{font-size:.72rem;margin-inline-end:1px}
/* kalendari me 8 kolona: kokat e shkurtra, që të hyjnë të plota ("Akshami") */
.cal-table th{font-size:.58rem;letter-spacing:-.01em;padding:7px 0}
.cal-table th:first-child,.cal-table td:first-child{width:13%}
.cal-table td{font-size:.7rem;letter-spacing:-.01em}

/* seksioni Android te Cilësimet */
.and-row{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;margin:6px 0}
.and-row i{margin-top:2px}.and-row i.ok{color:var(--ok)}.and-row i.warn{color:#f0b429}

/* ===== Karta e abonimit: e mbyllur, hapet me klikim ===== */
.acc-toggle{width:100%;background:none;border:0;padding:0;margin:0;font:inherit;cursor:pointer;text-align:start;color:inherit;display:flex;align-items:center;gap:8px}
.acc-toggle .ct{flex:1;min-width:0;color:var(--gold);font-weight:800}
.acc-toggle>i:first-child{color:var(--gold)}
.acc-chev{margin-inline-start:auto;transition:transform .2s;color:var(--mute)}
.acc.open .acc-chev{transform:rotate(180deg)}
.acc-toggle:focus-visible{outline:2px solid var(--gf2);outline-offset:4px;border-radius:10px}
.acc-body{margin-top:12px}
.acc:not(.open){padding-top:14px;padding-bottom:14px}
.fld{display:block;margin:10px 0 4px;font-size:.82rem;font-weight:800;color:var(--blue-2)}
.acc-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.acc-nickrow{display:flex;align-items:center;gap:8px;margin:8px 0;flex-wrap:wrap}
.acc-nick-lbl{font-size:.82rem;color:var(--mute);font-weight:700}
.acc-nickrow b{font-size:1rem}
.acc-nickrow .btn{margin-inline-start:auto}

/* ===== Kartat që hapen/mbyllen: Gjurmuesi, Ditët e rëndësishme, Orë të tjera, Top 100 ===== */
.acc-bar{display:flex;align-items:center;gap:8px}
.acc-bar .acc-toggle{flex:1;min-width:0;width:auto;font-size:1.02rem;font-weight:800}
.acc-bar .acc-toggle .ct{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-chev-btn{flex:none;background:none;border:0;padding:4px 2px;cursor:pointer;color:var(--mute);display:grid;place-items:center}
.acc-bar .share-row{margin-inline-start:0;flex:none}
.acc.enter:not(.open){padding-top:14px;padding-bottom:14px}
@media (max-width:420px){.share-lbl{display:none}}
.tom{margin-bottom:14px}

/* ===== Ramazani: agjërimi + imsakija ===== */
.ram-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.ram-actions .btn{width:auto;flex:1;min-width:130px}
#ramFast.on{background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0));background-color:rgba(var(--gl),.2);color:var(--ink)}
#ramFastCount{margin:8px 0 0}
.imk td,.imk th{font-size:.78rem}.imk td:nth-child(2){text-align:start;white-space:nowrap}
.imk tr.today td{background:rgba(var(--gl),.2);font-weight:800}
.plink{color:var(--mute);text-decoration:underline;font-size:.78rem}
/* ===== Kaza ===== */
.qz-list{display:grid;gap:8px;margin-top:6px}
.qz-row{display:flex;align-items:center;gap:8px}
.qz-name{flex:1;font-weight:700}
.qz-b{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--cell);color:var(--ink);font-size:1.2rem;font-weight:800;cursor:pointer}
.qz-n{width:76px;text-align:center;padding:8px 4px;border-radius:12px;border:1px solid var(--line);background:var(--field-bg);color:var(--ink);font:700 1rem var(--f-num,inherit);-moz-appearance:textfield}
.qz-n::-webkit-outer-spin-button,.qz-n::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qz-total{margin:10px 0 0;font-weight:800;color:var(--gold)}
/* ===== Raporto mesazhin ===== */
.msg{position:relative}
.rep-btn{position:absolute;top:6px;inset-inline-end:6px;width:26px;height:26px;border-radius:50%;border:0;background:transparent;color:var(--mute);opacity:.55;cursor:pointer;font-size:.72rem}
.rep-btn:hover{opacity:1;color:#fca5a5}.rep-btn:disabled{opacity:.25;cursor:default}
.cal-table.imk{table-layout:auto}
.cal-table.imk th:first-child,.cal-table.imk td:first-child{width:auto;min-width:34px}
.cal-table.imk td:nth-child(2){white-space:nowrap;padding:6px 8px}

/* ===== Shfaqja në monitor (Cilësimet → Pamja): vertikale ose horizontale ===== */
html.mode-v .app{zoom:var(--hz,1);max-width:774px}
/* horizontale: kanavacë 1920x1080 e shkallëzuar sa ekrani; vetëm blloqet e ekranit të parë */
html.mode-h,html.mode-h body{overflow:hidden;height:100%}
html.mode-h body{display:flex;align-items:center;justify-content:center}
html.mode-h .app{zoom:var(--hz,1);flex:none;width:1920px;max-width:none;height:1080px;margin:0;padding:34px 40px 38px;box-sizing:border-box;
  display:grid;grid-template-columns:630px minmax(0,1fr);grid-template-rows:96px auto minmax(0,1fr) auto;column-gap:34px;row-gap:0}
html.mode-h #results,html.mode-h #layout{display:contents}
html.mode-h #layout>:not(#prayerGrid):not(.ayah),html.mode-h #results>:not(.top-row):not(#ramadanCard):not(#layout),html.mode-h #installCard,html.mode-h .banner{display:none!important}
html.mode-h #loading,html.mode-h #error{grid-column:1/-1;grid-row:3}
html.mode-h .hdr{grid-column:2;grid-row:1;margin:0 0 22px;padding:0 22px;border-radius:26px;border:1px solid var(--line);background:linear-gradient(160deg,var(--panel),var(--panel-2))}
html.mode-h .brand{gap:18px}
html.mode-h .brand-mark{width:68px;height:68px;font-size:28px}
html.mode-h .brand h1{font-size:36px}
html.mode-h .brand small{font-size:21px;margin-top:4px}
html.mode-h .hdr-right{gap:16px}
html.mode-h .chip{font-size:21px;padding:10px 24px;gap:12px}
html.mode-h .chip small{font-size:20px}
html.mode-h .icon-btn{width:60px;height:60px;font-size:24px}
/* kolona majtas: ora sipër, vakti i radhës poshtë */
html.mode-h .top-row{grid-column:1;grid-row:1/5;display:flex;flex-direction:column;gap:46px;min-height:0}
html.mode-h .top-row>section{flex:1 1 0;min-height:0;border-radius:38px}
html.mode-h .hero{padding:30px 20px 0;justify-content:flex-start}
html.mode-h .hero-time{font-size:112px!important;line-height:1}
html.mode-h .hero-date{font-size:36px!important;margin-top:18px}
html.mode-h .hero-hijri{font-size:28px!important;margin-top:6px}
html.mode-h .sun-row{font-size:36px!important;gap:10px;margin-top:22px}
html.mode-h .skyline{height:92px}
html.mode-h .next{padding:20px}
html.mode-h .ring-wrap{max-width:430px!important}
html.mode-h .ring-center{gap:6px}
html.mode-h .ring-center .lbl{font-size:22px!important}
html.mode-h .ring-center .pname{font-size:58px!important}
html.mode-h .ring-center .parab{font-size:40px!important}
html.mode-h .ring-center .cd{font-size:56px!important;margin-top:10px}
html.mode-h .ring-center .at{font-size:23px!important;margin-top:6px}
html.mode-h .bar-wrap{zoom:1.9;width:100%}
/* kolona djathtas: vaktet dhe thënia */
html.mode-h #prayerGrid{grid-column:2;grid-row:3;display:flex;flex-direction:column;gap:14px;min-height:0}
html.mode-h .prayer{flex:1 1 0;min-height:0;padding:0 34px;gap:28px;border-radius:34px}
html.mode-h .prayer .ico{width:78px;height:78px;font-size:32px}
html.mode-h .prayer .sq{font-size:46px;line-height:1.05}
html.mode-h .prayer .ar{font-size:29px}
html.mode-h .prayer .ar em{font-size:27px;margin-inline-start:10px}
html.mode-h .prayer .tm{font-size:66px}
html.mode-h .prayer .chk{width:64px;height:64px;font-size:26px;flex:none}
html.mode-h .ayah{grid-column:2;grid-row:4;margin:22px 0 0;padding:24px 46px;height:236px;box-sizing:border-box;border-radius:36px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
html.mode-h .ayah::before{font-size:104px;top:-10px;left:26px}
html.mode-h #ayahText{font-size:37px!important;line-height:1.35;padding-left:36px}
html.mode-h #ayahSource{font-size:25px!important;text-align:end;margin-top:12px}
html.mode-h .ayah-ar{font-size:44px!important;line-height:1.5}
/* Ramazani (kur është aktiv): rresht i ngjeshur mbi vaktet */
html.mode-h #ramadanCard{grid-column:2;grid-row:2;margin:0 0 22px;padding:16px 34px;border-radius:30px;display:flex;align-items:center;justify-content:space-between;gap:30px}
html.mode-h #ramadanCard .bar,html.mode-h #ramadanCard .ram-actions,html.mode-h #ramadanCard #ramFastCount{display:none}
html.mode-h #ramadanCard .ram-head,html.mode-h #ramadanCard .ram-main,html.mode-h #ramadanCard .ram-times{margin:0}
html.mode-h #ramadanCard .ram-title,html.mode-h #ramadanCard .ram-label{font-size:25px}
html.mode-h #ramadanCard .ram-count{font-size:44px}
html.mode-h #ramadanCard .ram-times{font-size:25px;gap:26px}
html.mode-h #ramadanCard .ram-times b{font-size:30px}
html.mode-h.idle,html.mode-h.idle *{cursor:none!important}      /* kursori fshihet pas pak sekondash pa lëvizje (TV) */