/* zikir.xyz — adapted from materi/style1.css + style2.css visual direction */
:root{
  --background:0 0% 97%;--foreground:240 10% 3.9%;--card:0 0% 100%;--card-foreground:240 10% 3.9%;
  --primary:160 84% 39%;--primary-foreground:0 0% 98%;--secondary:210 40% 94%;--muted:210 40% 92%;
  --muted-foreground:215.4 16.3% 40%;--border:214.3 31.8% 84%;--input:214.3 31.8% 84%;--ring:160 84% 39%;
  --accent-gold:#d4af37;--radius:.9rem;--shadow:0 18px 55px hsl(220 40% 2%/.09);--shadow-soft:0 8px 28px hsl(220 40% 2%/.06);
  --font-ui:"Quicksand",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-arabic:"Amiri","Times New Roman",serif;
}
[data-theme="dark"]{--background:240 10% 3.9%;--foreground:0 0% 98%;--card:240 8% 7%;--card-foreground:0 0% 98%;--secondary:240 3.7% 15.9%;--muted:240 3.7% 15.9%;--muted-foreground:240 5% 64.9%;--border:240 3.7% 18%;--input:240 3.7% 18%;--shadow:0 20px 70px hsl(0 0% 0%/.35);--shadow-soft:0 10px 35px hsl(0 0% 0%/.24)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--font-ui);background:radial-gradient(circle at top left,hsl(var(--primary)/.12),transparent 34rem),linear-gradient(135deg,hsl(var(--background)),hsl(var(--muted)/.45));color:hsl(var(--foreground));min-height:100vh;min-height:100dvh}button,input,select{font:inherit}button,select{cursor:pointer}a{color:hsl(var(--primary));text-decoration:none}a:hover{text-decoration:underline}.touch-target{min-height:44px;min-width:44px}.app-shell{width:min(1800px,100%);margin:0 auto;padding:env(safe-area-inset-top) clamp(12px,2vw,26px) max(18px,env(safe-area-inset-bottom));}.app-header{height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:12px;color:hsl(var(--foreground));text-decoration:none}.brand:hover{text-decoration:none}.brand-mark{width:48px;height:48px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,hsl(var(--primary)),#0f766e);color:#fff;font-family:var(--font-arabic);font-size:30px;box-shadow:0 12px 26px hsl(var(--primary)/.28)}.brand strong{display:block;font-size:22px;letter-spacing:-.04em}.brand small{display:block;color:hsl(var(--muted-foreground));font-size:12px;margin-top:1px}.header-actions{display:flex;align-items:center;gap:10px}.editor-grid{display:grid;grid-template-columns:minmax(280px,360px) minmax(420px,1fr) minmax(280px,360px);gap:18px;align-items:start}.panel,.preview-panel,.about-card{background:hsl(var(--card)/.88);color:hsl(var(--card-foreground));border:1px solid hsl(var(--border)/.8);border-radius:calc(var(--radius) + .45rem);box-shadow:var(--shadow);backdrop-filter:blur(16px)}.panel{padding:18px;position:sticky;top:14px;max-height:calc(100dvh - 104px);overflow:auto}.preview-panel{padding:18px;min-height:calc(100dvh - 104px)}.panel-heading{margin-bottom:16px}.eyebrow{margin:0 0 4px;color:hsl(var(--primary));font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:800}.panel h1,.panel h2,.preview-topbar h2{margin:0;letter-spacing:-.04em}.panel h1{font-size:30px}.panel h2,.preview-topbar h2{font-size:22px}.field-label{display:block;margin:13px 0 7px;font-size:13px;font-weight:800;color:hsl(var(--muted-foreground))}.search-wrap{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid hsl(var(--input));border-radius:16px;background:hsl(var(--background)/.7)}.search-wrap input{border:0;outline:0;background:transparent;color:hsl(var(--foreground));width:100%;min-height:30px}.result-count{font-weight:800;color:hsl(var(--primary));font-size:12px;white-space:nowrap}select,input[type="search"]{width:100%}select{border:1px solid hsl(var(--input));background:hsl(var(--background)/.75);color:hsl(var(--foreground));border-radius:14px;padding:12px;min-height:46px;outline-color:hsl(var(--ring))}.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin:13px 0}.tag-chip{border:1px solid hsl(var(--border));background:hsl(var(--secondary)/.7);color:hsl(var(--foreground));border-radius:999px;padding:7px 10px;font-size:12px;font-weight:800;transition:transform .1s ease,background .2s}.tag-chip:active{transform:scale(.96)}.tag-chip.active{background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-color:hsl(var(--primary))}.doa-list{display:grid;gap:10px;margin-top:12px}.doa-item{border:1px solid hsl(var(--border));background:hsl(var(--background)/.58);border-radius:18px;padding:12px;text-align:left;color:hsl(var(--foreground));transition:transform .14s ease,border-color .2s,box-shadow .2s,background .2s}.doa-item:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft);border-color:hsl(var(--primary)/.45)}.doa-item.active{background:hsl(var(--primary)/.11);border-color:hsl(var(--primary));box-shadow:0 0 0 3px hsl(var(--primary)/.1)}.doa-item strong{display:block;font-size:14px}.doa-item small{display:block;color:hsl(var(--muted-foreground));margin-top:3px;line-height:1.35}.doa-item .mini-ar{font-family:var(--font-arabic);font-size:20px;direction:rtl;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:hsl(var(--foreground));margin-top:8px}.preview-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.data-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid hsl(var(--primary)/.25);background:hsl(var(--primary)/.1);color:hsl(var(--primary));border-radius:999px;padding:8px 10px;font-size:12px;font-weight:800;white-space:nowrap}.canvas-stage{min-height:440px;display:grid;place-items:center;overflow:auto;padding:20px;border-radius:24px;background:linear-gradient(135deg,hsl(var(--muted)/.75),hsl(var(--background)/.75));border:1px dashed hsl(var(--border))}.canvas-stage canvas{width:min(100%,620px);height:auto;max-height:72dvh;border-radius:18px;box-shadow:0 28px 80px hsl(220 40% 2%/.18);background:transparent}.doa-detail{margin-top:16px;padding:16px;border:1px solid hsl(var(--border));border-radius:22px;background:hsl(var(--background)/.55)}.arabic-dom{font-family:var(--font-arabic);font-size:clamp(28px,4vw,44px);line-height:2;text-align:right}.translit-dom{color:hsl(var(--muted-foreground));font-weight:600;line-height:1.75}.translation-dom{font-size:17px;line-height:1.75}details{color:hsl(var(--muted-foreground));line-height:1.65}summary{cursor:pointer;font-weight:800;color:hsl(var(--primary))}.control-grid{display:grid;gap:13px;margin-top:8px}.control-grid label{display:grid;gap:7px}.control-grid span{font-size:13px;font-weight:800;color:hsl(var(--muted-foreground))}input[type="range"]{accent-color:hsl(var(--primary));width:100%}.advanced-controls{margin-top:16px;padding:12px;border:1px solid hsl(var(--border));border-radius:18px;background:hsl(var(--background)/.42)}.advanced-controls summary{font-size:13px;font-weight:900;color:hsl(var(--primary));cursor:pointer}.advanced-controls .control-grid{margin-top:12px}.toggle-stack{display:grid;gap:10px;margin:18px 0}.toggle-stack label{display:flex;gap:10px;align-items:center;padding:11px;border:1px solid hsl(var(--border));border-radius:14px;background:hsl(var(--background)/.45);font-weight:700}.toggle-stack input{accent-color:hsl(var(--primary));width:18px;height:18px}.export-card{display:grid;gap:10px;margin-top:16px;padding:14px;border:1px solid hsl(var(--border));border-radius:20px;background:linear-gradient(135deg,hsl(var(--primary)/.08),hsl(var(--background)/.55))}.primary-button,.secondary-button,.ghost-button{min-height:46px;border-radius:15px;border:1px solid transparent;padding:10px 14px;font-weight:900;transition:transform .1s ease,opacity .15s,box-shadow .2s,background .2s}.primary-button{background:linear-gradient(135deg,hsl(var(--primary)),#0f766e);color:#fff;box-shadow:0 14px 28px hsl(var(--primary)/.25)}.secondary-button{background:hsl(var(--secondary));color:hsl(var(--foreground));border-color:hsl(var(--border))}.ghost-button{background:hsl(var(--background)/.55);color:hsl(var(--foreground));border-color:hsl(var(--border));display:inline-grid;place-items:center}.full{width:100%}.primary-button:active,.secondary-button:active,.ghost-button:active{transform:scale(.97);opacity:.86}.status-text{min-height:20px;margin:0;color:hsl(var(--muted-foreground));font-size:13px;font-weight:700}.about-card{margin:18px 0 0;padding:22px;line-height:1.7}.about-card h2{margin-top:0}.about-card p{max-width:980px;color:hsl(var(--muted-foreground))}
@media (max-width:1180px){.editor-grid{grid-template-columns:minmax(260px,340px) 1fr}.right-panel{grid-column:1/-1;position:static;max-height:none}.preview-panel{min-height:auto}}
@media (max-width:820px){.app-shell{padding-left:10px;padding-right:10px}.app-header{height:auto;padding:12px 0;align-items:flex-start}.brand-mark{width:44px;height:44px}.brand strong{font-size:20px}.brand small{font-size:11px}.editor-grid{display:flex;flex-direction:column}.panel,.preview-panel{width:100%;position:static;max-height:none;padding:14px;border-radius:22px}.left-panel{order:1}.preview-panel{order:2}.right-panel{order:3}.canvas-stage{min-height:300px;padding:12px}.canvas-stage canvas{width:100%;max-height:none}.header-actions{gap:6px}.ghost-button{min-height:42px;padding:8px 10px}.arabic-dom{font-size:32px}.doa-list{max-height:420px;overflow:auto;-webkit-overflow-scrolling:touch}.export-card{position:sticky;bottom:max(8px,env(safe-area-inset-bottom));z-index:5;box-shadow:var(--shadow)}}
@media (hover:none){.doa-item:hover{transform:none;box-shadow:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
@media print{.left-panel,.right-panel,.app-header,.about-card{display:none}.editor-grid{display:block}.preview-panel{box-shadow:none;border:0}.canvas-stage{border:0;background:white}}