.ilmu-x-tool-kahfi-container{max-width:900px;margin:32px auto;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#0c3808;background:#fff;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.08);overflow:hidden}
.ilmu-x-kahfi-tool-header{background:linear-gradient(135deg,#249749 0%,#1a7a38 100%);color:#fff;padding:24px 20px;text-align:center}
.ilmu-x-kahfi-tool-header h2{margin:0 0 8px;font-size:24px;font-weight:700}
.ilmu-x-kahfi-tool-header p{margin:0;font-size:14px;opacity:0.95}
.ilmu-x-kahfi-controls{display:flex;gap:10px;padding:16px;background:#f8fcf9;flex-wrap:wrap}
.ilmu-x-kahfi-controls input{flex:1;min-width:200px;padding:10px 14px;border:2px solid #249749;border-radius:6px;font-size:14px}
.ilmu-x-kahfi-controls button{padding:10px 18px;background:#249749;color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;font-size:14px;transition:all 0.3s}
.ilmu-x-kahfi-controls button:hover{background:#1a7a38;transform:translateY(-1px)}
.ilmu-x-kahfi-progress{height:4px;background:#e0e0e0;position:relative}
.ilmu-x-progress-bar{height:100%;background:#249749;width:0;transition:width 0.3s ease}
.ilmu-x-kahfi-content{max-height:70vh;overflow-y:auto;padding:16px}
.ilmu-x-ayah{background:#fff;border:1px solid #e8f5ec;border-radius:8px;padding:16px;margin-bottom:16px;transition:all 0.3s}
.ilmu-x-ayah:hover{box-shadow:0 2px 8px rgba(36,151,73,0.1)}
.ilmu-x-ayah.bookmarked{border-left:4px solid #ffc107;background:#fffdf7}
.ilmu-x-ayah.playing{border-left:4px solid #249749;background:#f0f7f3}
.ilmu-x-ayah.highlight{background:#fffacd}
.ilmu-x-ayah-number{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.ilmu-x-num{background:#249749;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.ilmu-x-bookmark-btn{background:transparent;border:none;font-size:20px;cursor:pointer;transition:transform 0.2s}
.ilmu-x-bookmark-btn:hover{transform:scale(1.2)}
.ilmu-x-ayah-arabic{font-size:22px;line-height:2;text-align:right;direction:rtl;color:#0c3808;margin-bottom:12px;font-family:'Traditional Arabic',serif}
.ilmu-x-ayah-rumi{font-size:15px;line-height:1.7;color:#2d5a3a;margin-bottom:10px;font-style:italic;background:#f8fcf9;padding:10px;border-radius:4px}
.ilmu-x-ayah-malay{font-size:15px;line-height:1.7;color:#0c3808;margin-bottom:12px}
.ilmu-x-ayah-audio{margin-top:10px}
.ilmu-x-play-btn{background:#249749;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:13px;font-weight:600;transition:all 0.3s}
.ilmu-x-play-btn:hover{background:#1a7a38}
.ilmu-x-loading,.ilmu-x-error{text-align:center;padding:40px 20px;color:#666;font-size:16px}
.ilmu-x-error{color:#d32f2f}
.ilmu-x-kahfi-footer{background:#f8fcf9;padding:16px;text-align:center;border-top:1px solid #e0e0e0;font-size:14px}
.ilmu-x-kahfi-footer strong{color:#249749}

@media(max-width:768px){
.ilmu-x-kahfi-controls{flex-direction:column}
.ilmu-x-kahfi-controls input,.ilmu-x-kahfi-controls button{width:100%}
.ilmu-x-ayah-arabic{font-size:20px}
.ilmu-x-kahfi-content{max-height:60vh}}

#surah-alkahf-tool-container .ilmu-sak-journey-item {display:flex!important; align-items:center!important; gap:12px!important; padding:10px 12px!important; border-radius:6px!important; background:transparent!important; color:#fff!important; text-decoration:none!important; border:none!important; box-shadow:none!important;}
#surah-alkahf-tool-container .ilmu-sak-journey-item svg {width:20px!important; height:20px!important; fill:currentColor!important; opacity:.8!important;}
#surah-alkahf-tool-container .ilmu-sak-ayah-actions .ilmu-sak-action-button {display:inline-flex!important; align-items:center!important; gap:6px!important; cursor:pointer!important; font-size:12px!important; font-weight:600!important; padding:7px 12px!important; border-radius:6px!important; border:none!important; text-decoration:none!important; white-space:nowrap!important; line-height:1!important; background:#2b702a!important; color:#fff!important; box-shadow:0 2px 6px rgba(0,0,0,.18)!important;}
#surah-alkahf-tool-container .ilmu-sak-ayah-actions .ilmu-sak-action-button:hover {background:#1e5a2a!important;}
#surah-alkahf-tool-container .ilmu-sak-ayah-actions .ilmu-sak-action-button svg {width:14px!important; height:14px!important; fill:#fff!important; display:block!important;}
#surah-alkahf-tool-container .ilmu-sak-journey-item {display:flex!important; align-items:center!important; gap:12px!important; padding:10px 12px!important; border-radius:6px!important; background:transparent!important; color:#fff!important; text-decoration:none!important; border:none!important; box-shadow:none!important;}
#surah-alkahf-tool-container .ilmu-sak-journey-item svg {width:20px!important; height:20px!important; fill:currentColor!important; opacity:.8!important;}
#surah-alkahf-tool-container .ilmu-sak-ayah-actions .ilmu-sak-action-button {display:inline-flex!important; align-items:center!important; gap:6px!important; cursor:pointer!important; font-size:12px!important; font-weight:600!important; padding:7px 12px!important; border-radius:6px!important; border:none!important; text-decoration:none!important; white-space:nowrap!important; line-height:1!important; background:#2b702a!important; color:#fff!important; box-shadow:0 2px 6px rgba(0,0,0,.18)!important;}
#surah-alkahf-tool-container .ilmu-sak-ayah-actions .ilmu-sak-action-button:hover {background:#1e5a2a!important;}
#surah-alkahf-tool-container .ilmu-sak-ayah-actions .ilmu-sak-action-button svg {width:14px!important; height:14px!important; fill:#fff!important; display:block!important;}
#surah-alkahf-tool-container .ilmu-sak-ayah-actions .ilmu-sak-action-share {background:#2b702a!important;}
#surah-alkahf-tool-container .ilmu-sak-ayah-actions .ilmu-sak-action-share:hover {background:#0d47a1!important;}
#surah-alkahf-tool-container .ilmu-sak-ayah-actions .ilmu-sak-action-bookmark {background:#ffc107!important; color:#4a3600!important;}
#surah-alkahf-tool-container .ilmu-sak-ayah-actions .ilmu-sak-action-bookmark:hover {background:#ffb300!important;}
#surah-alkahf-tool-container .ilmu-sak-ayah-actions .ilmu-sak-action-copy {background:#424242!important;}
#surah-alkahf-tool-container .ilmu-sak-ayah-actions .ilmu-sak-action-copy:hover {background:#212121!important;}
#surah-alkahf-tool-container .ilmu-sak-ayah-actions .ilmu-sak-action-sync {background:#ff9800!important; color:#fff!important;}
#surah-alkahf-tool-container .ilmu-sak-ayah-actions .ilmu-sak-action-sync:hover {background:#e68900!important;}
#surah-alkahf-tool-container .ilmu-sak-ayah-actions .ilmu-sak-action-share {background:#2b702a!important;}
#surah-alkahf-tool-container .ilmu-sak-ayah-actions .ilmu-sak-action-share:hover {background:#0d47a1!important;}
#surah-alkahf-tool-container .ilmu-sak-ayah-actions .ilmu-sak-action-bookmark {background:#ffc107!important; color:#4a3600!important;}
#surah-alkahf-tool-container .ilmu-sak-ayah-actions .ilmu-sak-action-bookmark:hover {background:#ffb300!important;}
#surah-alkahf-tool-container .ilmu-sak-ayah-actions .ilmu-sak-action-copy {background:#424242!important;}
#surah-alkahf-tool-container .ilmu-sak-ayah-actions .ilmu-sak-action-copy:hover {background:#212121!important;}
#surah-alkahf-tool-container .ilmu-sak-ayah-actions .ilmu-sak-action-sync {background:#ff9800!important; color:#fff!important;}
#surah-alkahf-tool-container .ilmu-sak-ayah-actions .ilmu-sak-action-sync:hover {background:#e68900!important;}

.ilmu-sak-container {width:100%; max-width:1200px; margin:10px auto; background-color:#fff; border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,.1); overflow:hidden}
.ilmu-sak-layout {display:flex; opacity:0; transition:opacity .5s ease-in-out}
.ilmu-sak-sidebar {width:200px; background-color:#1e7a3a; color:#fff; padding:25px; display:flex; flex-direction:column; flex-shrink:0}
.ilmu-sak-logo-title {display:flex; align-items:center; gap:10px; opacity:.8; margin-bottom:20px}
.ilmu-sak-surah-title {font-family:'Amiri', serif; font-size:28px; margin:0}
.ilmu-sak-surah-subtitle {font-size:14px; opacity:.8; margin-bottom:30px}
.ilmu-sak-journeys-panel {margin-bottom:30px}
.ilmu-sak-panel-title {font-size:16px; font-weight:700; margin-bottom:15px; border-bottom:1px solid rgba(255,255,255,.2); padding-bottom:10px}
.ilmu-sak-journey-item {display:flex; align-items:center; gap:12px; padding:10px; border-radius:6px; font-size:14px; color:#fff; text-decoration:none; transition:background-color .2s}
.ilmu-sak-journey-item:hover {background-color:rgba(255,255,255,.1)}
.ilmu-sak-journey-item svg {width:20px; height:20px; fill:currentColor; opacity:.7}
.ilmu-sak-toggles-panel {border-top:1px solid rgba(255,255,255,.2); padding-top:20px; margin-top:auto}
.ilmu-sak-toggle-item {display:flex; justify-content:space-between; align-items:center; margin-bottom:15px}
.ilmu-sak-switch {position:relative; display:inline-block; width:44px; height:24px}
.ilmu-sak-switch input {opacity:0; width:0; height:0}
.ilmu-sak-slider {position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,.2); transition:.4s; border-radius:24px}
.ilmu-sak-slider:before {position:absolute; content:""; height:18px; width:18px; left:3px; bottom:3px; background-color:#fff; transition:.4s; border-radius:50%}
.ilmu-sak-switch input:checked+.ilmu-sak-slider {background-color:#fff}
.ilmu-sak-switch input:checked+.ilmu-sak-slider:before {transform:translateX(20px); background-color:#249749}
.ilmu-sak-main-content {flex-grow:1; background-color:#f9f9f9; padding:10px}
.ilmu-sak-controls {display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; padding:10px; background-color:#fff; border-radius:8px; border:1px solid #eee}
.ilmu-sak-play-all-button {background-color:#249749; color:#fff; border:none; padding:8px 16px; border-radius:5px; cursor:pointer; font-size:14px; font-weight:700; transition:background-color .3s; display:flex; align-items:center; gap:8px}
.ilmu-sak-play-all-button:hover {background-color:#1e7a3a}
.ilmu-sak-custom-select-wrapper {position:relative}
.ilmu-sak-custom-select-arrow {position:absolute; top:50%; right:10px; transform:translateY(-50%); width:12px; height:12px; fill:#555; pointer-events:none}
.ilmu-sak-original-select {-webkit-appearance:none; -moz-appearance:none; appearance:none; padding:8px 30px 8px 12px; border-radius:4px; border:1px solid #ccc; font-size:14px; background-color:#fff; cursor:pointer}
#ilmu-sak-ayah-list {height:150vh; overflow-y:auto; padding:0 5px}
.ilmu-sak-ayah-placeholder {min-height:200px; border:1px dashed #e0e0e0; margin-bottom:15px; border-radius:8px}
.ilmu-sak-ayah {padding:10px; margin-bottom:15px; border-radius:8px; border:1px solid #e0e0e0; background-color:#fff; position:relative}
.ilmu-sak-ayah.ilmu-sak-playing {background-color:#e8f5e9; border-left:5px solid #249749; box-shadow:0 2px 8px rgba(0,0,0,.1)}
.ilmu-sak-ayah.ilmu-sak-bookmarked {background-color:#fffde7; border-left:5px solid #ffc107}
.ilmu-sak-ayah-header {display:flex; justify-content:space-between; align-items:center; margin-bottom:15px}
.ilmu-sak-ayah-number {font-weight:700; font-size:14px; color:#249749; background-color:#e8f5e9; padding:5px 10px; border-radius:15px}
.ilmu-sak-arabic {font-family:'Amiri', serif; font-size:28px; line-height:2; text-align:right; direction:rtl; margin-bottom:15px}
.ilmu-sak-rumi {font-size:14px; line-height:1.3; color:#0c3802; font-family:'Inter', Courier, monospace; background-color:#d3f8e2; padding:10px; border:1px dashed #0c3802; border-radius:4px; margin:10px 0}
.ilmu-sak-translation {font-size:15px; line-height:1.3; color:#555; font-style:italic}
.ilmu-sak-ayah-actions {display:flex; flex-wrap:wrap; gap:10px; margin-top:15px; padding-top:10px; border-top:1px solid #f0f0f0}
.ilmu-sak-notification {position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background-color:#333; color:#fff; padding:10px 20px; border-radius:5px; z-index:1000; opacity:0; transition:opacity .5s; pointer-events:none}

@media (max-width:850px) {
.ilmu-sak-layout {flex-direction:column}
.ilmu-sak-sidebar {width:100%; border-radius:0}
#ilmu-sak-ayah-list {height:auto; max-height:none}}