@import"https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@400;500;600;700&display=swap";:root{--color-gold-50: #fdf8e8;--color-gold-100: #f9edca;--color-gold-200: #f3d98f;--color-gold-300: #edca5e;--color-gold-400: #e5b83a;--color-gold-500: #d4a01e;--color-gold-600: #b58516;--color-gold-700: #8a6410;--color-gold-800: #5e440c;--color-gold-900: #372808;--color-teal-50: #e6f7f5;--color-teal-100: #c0ece7;--color-teal-200: #8fdbd2;--color-teal-300: #5ec9bd;--color-teal-400: #3bbcad;--color-teal-500: #20a898;--color-teal-600: #188a7d;--color-teal-700: #116b61;--color-teal-800: #0a4d45;--color-teal-900: #052f2a;--color-query-50: #eef0ff;--color-query-100: #d4d8ff;--color-query-200: #a8b0ff;--color-query-300: #7c88ff;--color-query-400: #5a68f5;--color-query-500: #4250e6;--color-query-600: #333ec4;--color-query-700: #262e9e;--color-query-800: #1a2078;--color-query-900: #101452;--color-neutral-0: #ffffff;--color-neutral-50: #f8f9fa;--color-neutral-100: #f1f3f5;--color-neutral-200: #e9ecef;--color-neutral-300: #dee2e6;--color-neutral-400: #ced4da;--color-neutral-500: #adb5bd;--color-neutral-600: #868e96;--color-neutral-700: #495057;--color-neutral-800: #343a40;--color-neutral-900: #212529;--color-user: var(--color-gold-500);--color-user-light: var(--color-gold-100);--color-user-bg: var(--color-gold-50);--color-connection: var(--color-teal-500);--color-connection-light: var(--color-teal-100);--color-query: var(--color-query-500);--color-query-light: var(--color-query-100);--color-query-bg: var(--color-query-50);--color-amber: #f59f00;--color-amber-light: #fff3cd;--color-red: #e03131;--color-red-light: #ffe0e0;--color-green: #2f9e44;--color-green-light: #d3f9d8;--color-link-same-story: #4dabf7;--color-link-similar-wording: #69db7c;--color-link-completes: #9775fa;--color-link-contrasts: #ffa94d;--color-link-context: #868e96;--color-link-ring-mirror: #da77f2;--color-link-tension: var(--color-red);--font-arabic: "Amiri", "Traditional Arabic", serif;--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-arabic-lg: 1.75rem;--text-arabic-xl: 2.25rem;--leading-tight: 1.25;--leading-normal: 1.5;--leading-relaxed: 1.75;--leading-arabic: 2.2;--weight-normal: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--touch-min: 48px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--border-width: 1px;--border-color: var(--color-neutral-200);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .35s ease;--z-base: 0;--z-dropdown: 100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-popover: 500;--z-toast: 600;--z-nav: 700;--nav-height-mobile: 56px;--nav-height-desktop: 48px;--editor-collapsed-height: 48px;--content-max-width: 1280px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-neutral-900);background-color:var(--color-neutral-0);overflow-x:hidden;min-height:100dvh}[dir=rtl],.arabic{font-family:var(--font-arabic);direction:rtl;text-align:right;line-height:var(--leading-arabic)}h1,h2,h3,h4,h5,h6{font-weight:var(--weight-semibold);line-height:var(--leading-tight)}h1{font-size:var(--text-3xl)}h2{font-size:var(--text-2xl)}h3{font-size:var(--text-xl)}h4{font-size:var(--text-lg)}a{color:var(--color-teal-600);text-decoration:none}a:hover{text-decoration:underline}button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit;min-height:var(--touch-min);min-width:var(--touch-min);display:inline-flex;align-items:center;justify-content:center}input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);background:var(--color-neutral-0);min-height:var(--touch-min)}input:focus,textarea:focus,select:focus{outline:2px solid var(--color-teal-400);outline-offset:1px;border-color:var(--color-teal-400)}textarea{resize:vertical}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-neutral-300);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-400)}::selection{background:var(--color-teal-200);color:var(--color-neutral-900)}.badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:1;white-space:nowrap}.badge--makki{background:var(--color-gold-100);color:var(--color-gold-700)}.badge--madani{background:var(--color-teal-100);color:var(--color-teal-700)}.badge--juz{background:var(--color-neutral-100);color:var(--color-neutral-700)}.badge--link-type{font-size:var(--text-xs);padding:2px var(--space-2)}.badge--query{background:var(--color-query-100);color:var(--color-query-700)}.chip{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--weight-medium);border:var(--border-width) solid var(--border-color);background:var(--color-neutral-0);cursor:pointer;min-height:var(--touch-min);transition:background var(--transition-fast),border-color var(--transition-fast)}.chip:hover{background:var(--color-neutral-50)}.chip--selected{background:var(--color-teal-50);border-color:var(--color-teal-400);color:var(--color-teal-700)}.chip--theme{border-color:var(--color-gold-300)}.chip--removable:after{content:"×";margin-left:var(--space-1);font-size:var(--text-lg);opacity:.6}.card{background:var(--color-neutral-0);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-sm)}.card--user{border-left:3px solid var(--color-user)}.card--imported{border-left:3px solid var(--color-gold-300);opacity:.85}.card--query{border-left:3px solid var(--color-query);background:var(--color-query-bg)}.note-card{display:flex;flex-direction:column;gap:var(--space-2)}.note-card__meta{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-neutral-600)}.note-card__text{font-size:var(--text-base);line-height:var(--leading-relaxed)}.note-card__themes{display:flex;flex-wrap:wrap;gap:var(--space-1)}.note-card__actions{display:flex;gap:var(--space-2);margin-top:var(--space-2)}.mention-chip{display:inline-flex;align-items:center;gap:var(--space-1);padding:1px var(--space-2);background:var(--color-teal-50);color:var(--color-teal-700);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer;text-decoration:none}.mention-chip:hover{background:var(--color-teal-100);text-decoration:none}.query-banner{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-query-bg);border:var(--border-width) solid var(--color-query-200);border-radius:var(--radius-md);font-size:var(--text-sm)}.query-banner__label{flex:1;color:var(--color-query-700)}.query-banner__actions{display:flex;gap:var(--space-2);flex-wrap:wrap}.query-banner__close{color:var(--color-query-500);font-size:var(--text-lg)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--weight-medium);min-height:var(--touch-min);transition:background var(--transition-fast),color var(--transition-fast);white-space:nowrap}.btn--primary{background:var(--color-teal-500);color:var(--color-neutral-0)}.btn--primary:hover{background:var(--color-teal-600)}.btn--secondary{background:var(--color-neutral-100);color:var(--color-neutral-700)}.btn--secondary:hover{background:var(--color-neutral-200)}.btn--ghost{background:transparent;color:var(--color-neutral-600)}.btn--ghost:hover{background:var(--color-neutral-50);color:var(--color-neutral-800)}.btn--gold{background:var(--color-gold-500);color:var(--color-neutral-0)}.btn--gold:hover{background:var(--color-gold-600)}.btn--query{background:var(--color-query-500);color:var(--color-neutral-0)}.btn--query:hover{background:var(--color-query-600)}.btn--sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs);min-height:32px}.word-chip{display:inline-block;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition-fast);font-family:var(--font-arabic);font-size:var(--text-arabic-lg);line-height:var(--leading-arabic)}.word-chip:hover,.word-chip:active{background:var(--color-teal-50)}.word-chip--selected{background:var(--color-teal-100)}.word-chip--tracked-root{background:var(--color-gold-100);border-bottom:2px solid var(--color-gold-400)}.section-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) 0;margin-top:var(--space-6);margin-bottom:var(--space-3);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-neutral-600);text-transform:uppercase;letter-spacing:.05em}.note-editor{position:fixed;bottom:var(--nav-height-mobile);left:0;right:0;z-index:var(--z-sticky);background:var(--color-neutral-0);border-top:var(--border-width) solid var(--border-color);box-shadow:var(--shadow-lg);transition:height var(--transition-base)}@media(min-width:768px){.note-editor{bottom:0;max-width:var(--content-max-width);margin:0 auto;border-radius:var(--radius-lg) var(--radius-lg) 0 0}}.note-editor--collapsed{height:var(--editor-collapsed-height);overflow:hidden}.note-editor--expanded{height:auto;max-height:60dvh}.note-editor__trigger-bar{display:flex;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-top:var(--border-width) solid var(--border-color);background:var(--color-neutral-50)}.note-editor__trigger-bar button{padding:var(--space-1) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-lg)}.popover{position:absolute;z-index:var(--z-popover);background:var(--color-neutral-0);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-4);max-width:320px;width:max-content}.morphology-popover{min-width:260px}.morphology-popover__arabic{font-family:var(--font-arabic);font-size:var(--text-arabic-lg);color:var(--color-neutral-900);margin-bottom:var(--space-3)}.morphology-popover__row{display:flex;gap:var(--space-2);padding:var(--space-1) 0;font-size:var(--text-sm)}.morphology-popover__label{color:var(--color-neutral-500);min-width:60px}.morphology-popover__value{color:var(--color-neutral-800);font-weight:var(--weight-medium)}.morphology-popover__source{font-size:var(--text-xs);color:var(--color-neutral-500);margin-top:var(--space-2);padding-top:var(--space-2);border-top:var(--border-width) solid var(--border-color)}.morphology-popover__actions{display:flex;gap:var(--space-2);margin-top:var(--space-3);flex-wrap:wrap}.banner{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm)}.banner--info{background:var(--color-teal-50);color:var(--color-teal-800);border:var(--border-width) solid var(--color-teal-200)}.banner--warning{background:var(--color-amber-light);color:var(--color-gold-800);border:var(--border-width) solid var(--color-gold-300)}.empty-state{text-align:center;padding:var(--space-10) var(--space-4);color:var(--color-neutral-500)}.empty-state__icon{font-size:var(--text-4xl);margin-bottom:var(--space-3)}.empty-state__text{font-size:var(--text-base);margin-bottom:var(--space-4)}#app{display:flex;flex-direction:column;min-height:100dvh}.app-content{flex:1;overflow-y:auto;padding-bottom:var(--nav-height-mobile)}@media(min-width:768px){.app-content{padding-bottom:0;padding-top:var(--nav-height-desktop)}}.nav{position:fixed;z-index:var(--z-nav);background:var(--color-neutral-0);border-color:var(--border-color)}.nav--mobile{bottom:0;left:0;right:0;height:var(--nav-height-mobile);border-top:var(--border-width) solid var(--border-color);display:flex;align-items:center;justify-content:space-around}.nav--desktop{top:0;left:0;right:0;height:var(--nav-height-desktop);border-bottom:var(--border-width) solid var(--border-color);display:flex;align-items:center;padding:0 var(--space-6);gap:var(--space-4)}@media(min-width:768px){.nav--mobile{display:none}.nav--desktop{display:flex}}@media(max-width:767px){.nav--mobile{display:flex}.nav--desktop{display:none}}.nav-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);color:var(--color-neutral-600);text-decoration:none;font-size:var(--text-xs);font-weight:var(--weight-medium);transition:color var(--transition-fast),background var(--transition-fast);min-width:var(--touch-min);min-height:var(--touch-min)}.nav-item--active{color:var(--color-teal-600)}.nav-item:hover{color:var(--color-teal-500);background:var(--color-teal-50)}.nav-item__icon{font-size:var(--text-xl)}@media(min-width:768px){.nav-item{flex-direction:row;font-size:var(--text-sm);gap:var(--space-2);padding:var(--space-2) var(--space-3)}}.view{max-width:var(--content-max-width);margin:0 auto;padding:var(--space-4);width:100%}@media(min-width:768px){.view{padding:var(--space-6)}}.bottom-sheet{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-overlay);background:var(--color-neutral-0);border-radius:var(--radius-xl) var(--radius-xl) 0 0;box-shadow:var(--shadow-xl);transform:translateY(100%);transition:transform var(--transition-base);max-height:80dvh;overflow-y:auto;padding:var(--space-4);padding-bottom:calc(var(--space-4) + var(--nav-height-mobile))}.bottom-sheet--open{transform:translateY(0)}.bottom-sheet__handle{width:32px;height:4px;background:var(--color-neutral-300);border-radius:var(--radius-full);margin:0 auto var(--space-4)}.panel-layout{display:flex;flex-direction:column;gap:var(--space-4)}@media(min-width:768px){.panel-layout{flex-direction:row}.panel-layout__sidebar{width:280px;flex-shrink:0}.panel-layout__main{flex:1;min-width:0}}.map-container{position:relative;width:100%;height:calc(100dvh - var(--nav-height-mobile));overflow:hidden;background:var(--color-neutral-900)}@media(min-width:768px){.map-container{height:calc(100dvh - var(--nav-height-desktop))}}.map-canvas{width:100%;height:100%;display:block}.map-controls{position:absolute;top:var(--space-4);left:var(--space-4);display:flex;gap:var(--space-2);z-index:var(--z-dropdown)}.map-mode-select{background:var(--color-neutral-0);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);box-shadow:var(--shadow-md);min-height:var(--touch-min)}.map-query-btn{background:var(--color-neutral-0);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);box-shadow:var(--shadow-md);gap:var(--space-1)}.filter-bar{position:absolute;bottom:0;left:0;right:0;background:#fffffff2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:var(--space-3) var(--space-4);border-top:var(--border-width) solid var(--border-color);overflow-x:auto;display:flex;gap:var(--space-2);align-items:center}@media(max-width:767px){.filter-bar{display:none}.filter-bar--open{display:flex;flex-wrap:wrap;position:fixed;bottom:var(--nav-height-mobile);z-index:var(--z-overlay);border-radius:var(--radius-xl) var(--radius-xl) 0 0;box-shadow:var(--shadow-xl);max-height:50dvh;overflow-y:auto}}.map-tooltip{position:absolute;z-index:var(--z-popover);background:var(--color-neutral-0);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-3);max-width:280px;pointer-events:none}@media(max-width:767px){.map-tooltip{position:fixed;bottom:var(--nav-height-mobile);left:0;right:0;max-width:none;border-radius:var(--radius-xl) var(--radius-xl) 0 0;pointer-events:auto}}.map-tooltip__surah{font-weight:var(--weight-semibold);margin-bottom:var(--space-1)}.map-tooltip__ref{font-size:var(--text-sm);color:var(--color-neutral-500)}.map-tooltip__preview{font-size:var(--text-sm);color:var(--color-neutral-700);margin-top:var(--space-2)}.map-tooltip__stats{display:flex;gap:var(--space-3);margin-top:var(--space-2);font-size:var(--text-xs);color:var(--color-neutral-500)}.query-map-banner{position:absolute;top:var(--space-4);right:var(--space-4);z-index:var(--z-dropdown);background:var(--color-query-bg);border:var(--border-width) solid var(--color-query-200);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);color:var(--color-query-700);box-shadow:var(--shadow-md);display:flex;align-items:center;gap:var(--space-2)}