@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Nunito:wght@400;600;700;800&family=Quicksand:wght@400;600;700&display=swap');

:root{
 --bg:#f7f6fb; --surface:#fff; --surface2:#f0eef6; --text:#292631; --muted:#777080;
 --line:#e5e1eb; --purple:#7563a8; --purple2:#8c7aba; --blue:#6687a8; --green:#6e927f;
 --gold:#b28f5a; --rose:#a97986; --shadow:0 12px 34px rgba(49,39,67,.08);
 --nav:#ffffffeb;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
body.dark{
 --bg:#121217; --surface:#1d1c22; --surface2:#28262f; --text:#f0edf5; --muted:#aaa3b2;
 --line:#35323d; --shadow:0 14px 36px rgba(0,0,0,.25); --nav:#1a191fec;
}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.topbar{position:sticky;top:0;z-index:20;padding:16px 18px 14px;display:flex;justify-content:space-between;align-items:flex-start;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.today-date{font-size:23px;font-weight:850;letter-spacing:-.35px}
.alt-date{margin-top:5px;font-size:12px;color:var(--muted);line-height:1.7}
.brand{font-size:12px;font-weight:800;letter-spacing:.5px;color:var(--purple);margin-top:3px}
.icon-btn{width:42px;height:42px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);font-size:26px;line-height:1;box-shadow:0 4px 14px rgba(0,0,0,.04)}
main{width:min(820px,100%);margin:auto;padding:20px 16px 112px}
.title{font-size:30px;font-weight:900;letter-spacing:-.7px;margin:0 0 4px}
.subtitle{color:var(--muted);margin:0 0 18px;line-height:1.55}
.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:17px;box-shadow:var(--shadow)}
.grid{display:grid;gap:12px}.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:440px){.two{grid-template-columns:1fr}.today-date{font-size:20px}.card{border-radius:19px}}
.section{display:flex;justify-content:space-between;align-items:center;margin:22px 2px 10px}
.section h2{font-size:17px;margin:0}.section button{border:0;background:none;color:var(--purple);font-weight:800}
.stat{font-size:29px;font-weight:900}.muted{color:var(--muted)}
.btn{border:0;border-radius:13px;background:var(--purple);color:#fff;padding:12px 15px;font-weight:800}
.btn.soft{background:var(--surface2);color:var(--text)}
.fab{position:fixed;right:20px;bottom:92px;z-index:19;width:58px;height:58px;border:0;border-radius:20px;background:var(--purple);color:#fff;font-size:31px;box-shadow:0 12px 28px rgba(117,99,168,.35)}
nav{position:fixed;z-index:18;bottom:0;left:0;right:0;height:76px;background:var(--nav);backdrop-filter:blur(18px);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom)}
nav button{border:0;background:none;color:var(--muted);font-size:20px;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
nav button span{font-size:11px}.nav-icon{font-size:21px}.nav-active{color:var(--purple)!important}
.quick{min-height:92px;text-align:left;border:0;display:flex;flex-direction:column;gap:7px;justify-content:center}
.quick .qicon{font-size:22px}.quick b{font-size:14px}.quick small{color:var(--muted)}
.list{margin:0}.item{display:flex;gap:11px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line)}.item:last-child{border-bottom:0}
.check{margin-top:3px;accent-color:var(--purple);width:18px;height:18px}
.pill{display:inline-flex;padding:5px 8px;border-radius:9px;background:var(--surface2);font-size:11px;font-weight:800}
.high{color:#9c5c68}.medium{color:#9b7a42}.low{color:#5e876f}
.input,.select,.textarea{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:13px;padding:13px;outline:none}
.input:focus,.select:focus,.textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(117,99,168,.12)}
.textarea{min-height:145px;resize:vertical;line-height:1.65}
label{font-size:12px;font-weight:800;margin:10px 0 6px;display:block}
.empty{padding:28px 8px;text-align:center;color:var(--muted)}
/* calendar */
.cal-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}
.month-title{font-size:22px;font-weight:900}.cal-actions{display:flex;gap:6px}
.cal-actions button{border:0;background:var(--surface2);color:var(--text);width:36px;height:36px;border-radius:11px;font-weight:900}
.week,.days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.week div{text-align:center;color:var(--muted);font-size:10px;font-weight:850;padding:5px 0}
.day{min-width:0;min-height:72px;border:1px solid transparent;border-radius:14px;background:transparent;color:var(--text);padding:7px 3px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.day:hover{background:var(--surface2)}.day.other{opacity:.34}.day.today{border-color:var(--purple)}
.day.selected{background:var(--purple);color:#fff;box-shadow:0 7px 18px rgba(117,99,168,.25)}
.gnum{font-size:17px;font-weight:900;line-height:1.2}.alt-num{font-size:9px;line-height:1.45;margin-top:3px;opacity:.9;white-space:nowrap}
.ev-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);margin-top:5px}
.selected .ev-dot{background:#fff}
.three-cal{margin-top:15px;padding:13px;border-radius:16px;background:var(--surface2);display:grid;gap:6px}
.three-cal .g{font-size:18px;font-weight:900}.three-cal .altline{font-size:12px;color:var(--muted)}
.detail{margin-top:13px}.detail-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.detail h3{font-size:14px;margin:18px 0 7px}.detail p{margin:0;color:var(--muted);line-height:1.7;font-size:13px}
.detail .event-title{font-size:19px;font-weight:900;margin-top:8px}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
/* notes / keep */
.note-grid{columns:2 260px;column-gap:12px}.note-card{break-inside:avoid;margin:0 0 12px;display:block;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:15px;box-shadow:0 5px 20px rgba(0,0,0,.04)}
.note-card h3{font-size:16px;margin:0 0 8px}.note-body{white-space:pre-wrap;color:var(--muted);line-height:1.55;font-size:14px;max-height:180px;overflow:hidden}
.note-meta{font-size:10px;color:var(--muted);margin-top:12px}
.notes-search{margin-bottom:14px}
/* modal */
#modal{display:none}.modal-bg{position:fixed;inset:0;background:rgba(15,13,20,.56);z-index:60;display:flex;align-items:flex-end}
.modal-box{width:100%;max-height:92vh;overflow:auto;background:var(--surface);color:var(--text);border-radius:26px 26px 0 0;padding:20px;box-shadow:0 -15px 50px rgba(0,0,0,.2)}
@media(min-width:720px){.modal-bg{align-items:center}.modal-box{width:min(680px,94%);border-radius:26px}}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.modal-head h2{margin:0;font-size:21px}.close{border:0;background:var(--surface2);color:var(--text);width:35px;height:35px;border-radius:11px;font-size:19px}
.menu{position:fixed;z-index:50;right:13px;top:66px;width:265px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:7px;box-shadow:0 18px 44px rgba(0,0,0,.18)}
.menu button{width:100%;border:0;background:none;color:var(--text);text-align:left;padding:12px;border-radius:11px;font-weight:800}.menu button:hover{background:var(--surface2)}
.menu .separator{height:1px;background:var(--line);margin:5px 0}
.toast{position:fixed;z-index:100;bottom:91px;left:50%;transform:translate(-50%,18px);opacity:0;background:#28232f;color:#fff;padding:11px 15px;border-radius:13px;transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
/* note editor */
.note-editor{padding:4px 2px 20px}.note-title-input{font-size:27px;font-weight:850;border:0!important;padding:8px 0!important;background:transparent!important;box-shadow:none!important}.note-editor textarea{border:0!important;background:transparent!important;box-shadow:none!important;min-height:48vh;padding:8px 0;font-size:18px;line-height:1.7}
.editor-tools{display:flex;gap:7px;align-items:center;border-top:1px solid var(--line);padding-top:12px}.editor-tools .btn{padding:9px 12px}.pin-on{background:var(--gold)!important}
.progressbar{height:10px;border-radius:99px;background:var(--surface2);overflow:hidden}.progressbar i{display:block;height:100%;background:var(--purple);border-radius:99px}
.prayers{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.prayer{background:var(--surface2);border-radius:15px;padding:12px}.prayer b{display:block;font-size:12px;color:var(--muted)}.prayer span{display:block;font-size:18px;font-weight:900;margin-top:4px}
.compass{width:210px;height:210px;border:4px solid var(--purple);border-radius:50%;margin:20px auto;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,var(--surface2),transparent 65%)}.needle{width:5px;height:85px;border-radius:4px;background:var(--rose);position:absolute;top:19px;transform-origin:50% 85px}

/* ===== My Planner 2.2 visual refinement ===== */
:root{
 --purple:#7658b5; --purple2:#9a7bd0; --blue:#5d86b5; --green:#6f9b86;
 --gold:#b99152; --rose:#b77a91; --cyan:#5f9fa8;
}
body{overflow-x:hidden}
.topbar{padding:13px 16px 12px;min-height:82px;align-items:center}
.brand{font-family:"Trebuchet MS",ui-rounded,system-ui,sans-serif;font-size:28px;line-height:1;font-weight:950;letter-spacing:-1.7px;color:var(--text);text-shadow:0 1px 0 rgba(255,255,255,.35);margin-top:7px}
.today-date{font-size:20px}
.alt-date{font-size:11px}
.topbar .brand-wrap{min-width:0}
.topbar .icon-btn{flex:0 0 auto}
.almanac-top{margin-bottom:16px;padding:17px 18px;border-radius:22px;background:linear-gradient(135deg,rgba(118,88,181,.16),rgba(95,159,168,.12));border:1px solid var(--line)}
.section-kicker{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--purple);font-weight:950}
.almanac-date{font-size:24px;font-weight:950;margin-top:5px}
.almanac-alt{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.7}
.almanac-alt span{padding:0 5px}
.home-stats .card{min-height:145px}
.color-card{position:relative;overflow:hidden}
.color-card:after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-35px;bottom:-50px;background:rgba(255,255,255,.08)}
.purple-card{background:linear-gradient(135deg,#6d55aa,#8b6bc4);color:#fff;border:0}
.blue-card{background:linear-gradient(135deg,#4f759e,#7196bd);color:#fff;border:0}
.color-card small,.color-card>span{opacity:.88}
.color-card .progressbar{background:rgba(255,255,255,.25)}
.color-card .progressbar i{background:#fff}
.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.service-card{border:1px solid var(--line);border-radius:20px;padding:16px;text-align:left;background:var(--surface);color:var(--text);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:5px;min-height:120px}
.service-card .service-icon{width:39px;height:39px;border-radius:13px;display:grid;place-items:center;font-size:20px;margin-bottom:4px}
.service-card small{color:var(--muted);line-height:1.4}
.service-prayer .service-icon{background:rgba(111,155,134,.17);color:var(--green)}
.service-alarm .service-icon{background:rgba(183,122,145,.17);color:var(--rose)}
.service-news .service-icon{background:rgba(185,145,82,.18);color:var(--gold)}
.service-qibla .service-icon{background:rgba(93,134,181,.18);color:var(--blue)}
/* Main calendar */
.calendar-shell{padding:14px 11px 12px}
.cal-toolbar{margin-bottom:8px}
.month-title{font-size:23px}
.month-jump{border:0;background:var(--surface2);color:var(--purple);font-size:11px;font-weight:900;border-radius:10px;padding:8px 10px}
.cal-actions button{font-size:24px}
.calendar-legend{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:9px;margin:2px 0 9px}
.calendar-legend i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px}
.lg-g{background:var(--text)}.lg-b{background:#32a46b}.lg-h{background:#358cc5}
.week,.days{gap:2px}
.week div{font-size:10px;padding:7px 0;font-weight:900}
.week .weekend{color:var(--rose)}
.day{min-height:78px;border-radius:9px;padding:5px 1px;background:transparent;border:1px solid transparent;overflow:hidden}
.day:hover{background:var(--surface2)}
.day.today{border:2px solid var(--purple)}
.day.selected{background:linear-gradient(145deg,#7658b5,#9071c9);color:#fff;border:0}
.day.other{opacity:.30}
.gnum{font-size:19px;font-weight:950;line-height:1.1}
.bnnum,.hinum{display:block;font-size:9px;line-height:1.45;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.bnnum{color:#2e9b67;margin-top:4px}
.hinum{color:#398dca}
.day.selected .bnnum,.day.selected .hinum{color:#fff}
.bnnum em,.hinum em{font-style:normal;font-size:7px;opacity:.82}
.ev-dot{width:5px;height:5px;background:var(--gold);margin-top:3px}
.calendar-selected{margin-top:11px;padding:12px 13px;border-radius:15px;background:var(--surface2);border-left:4px solid var(--purple)}
.selected-main{font-size:17px;font-weight:950}
.selected-alt{font-size:11px;color:var(--muted);line-height:1.65}
.detail{border-radius:20px}
.detail .event-title{font-size:20px}
.detail p{font-size:13px}
.detail h3{font-size:13px;text-transform:none;letter-spacing:.1px}
@media(max-width:390px){
 main{padding-left:10px;padding-right:10px}
 .today-date{font-size:17px}
 .brand{font-size:25px}
 .day{min-height:69px}
 .gnum{font-size:17px}
 .bnnum,.hinum{font-size:8px}
 .bnnum em,.hinum em{font-size:6px}
 .calendar-shell{padding-left:7px;padding-right:7px}
}
@media(max-width:340px){
 .day{min-height:64px}
 .calendar-legend{gap:7px}
 .week div{font-size:8px}
}
/* Notes: spacious Keep-like editor */
.notes-toolbar{display:flex;gap:8px;align-items:center;margin-bottom:15px}
.notes-toolbar .notes-search{margin:0;flex:1}
.note-grid{columns:2 250px;column-gap:13px}
.note-card{position:relative;min-height:125px;border-radius:18px;padding:17px;background:var(--surface);transition:transform .16s,box-shadow .16s}
.note-card:active{transform:scale(.985)}
.note-card h3{font-size:18px;line-height:1.25;padding-right:15px}
.note-body{font-size:15px;line-height:1.65;max-height:190px}
.note-pin{position:absolute;right:13px;top:10px;color:var(--gold);font-size:18px}
.note-editor{min-height:70vh;display:flex;flex-direction:column;padding:6px 3px 4px}
.note-editor .note-title-input{font-size:30px!important;font-weight:900!important;min-height:52px}
.note-editor textarea{flex:1;min-height:55vh!important;font-size:18px!important;line-height:1.75!important}
.editor-tools{position:sticky;bottom:0;background:var(--surface);padding:12px 0 2px}
.modal-box.wide{max-height:96vh}
@media(max-width:719px){.modal-box.wide{height:100dvh;max-height:100dvh;border-radius:0;padding:17px}.modal-box.wide .modal-head{display:none}}
/* Modals and menus must always be clickable */
.modal-bg{touch-action:auto}
.modal-box{position:relative}
.close{cursor:pointer;z-index:3}
.menu{max-height:calc(100vh - 85px);overflow:auto}
/* alarm / news / cloud */
.alarm-hero{display:flex;gap:13px;align-items:center;padding:14px;border-radius:17px;background:var(--surface2);margin-bottom:12px}
.alarm-icon,.cloud-icon{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;font-size:26px;background:rgba(183,122,145,.15)}
.alarm-list{margin-top:15px}.alarm-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.alarm-row>span{font-size:19px}.alarm-row div{flex:1}.alarm-row small{display:block;color:var(--muted);margin-top:3px}
.news-list{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px}
.news-item{text-decoration:none;color:var(--text);border:1px solid var(--line);background:var(--surface2);border-radius:15px;padding:13px;display:grid;grid-template-columns:28px 1fr;column-gap:8px;align-items:center}
.news-item span{grid-row:span 2;font-size:20px}.news-item b{font-size:13px}.news-item small{color:var(--muted)}
.cloud-card{text-align:center;padding:17px;background:var(--surface2);border-radius:18px}.cloud-icon{margin:0 auto 9px;color:var(--blue)}
.cloud-note{margin-top:12px;padding:12px;border-left:3px solid var(--gold);background:var(--surface2);border-radius:12px}
@media(max-width:420px){.news-list{grid-template-columns:1fr}.service-grid{gap:9px}.service-card{padding:13px;min-height:112px}}
body.dark{
 --bg:#101116; --surface:#191a20; --surface2:#242630; --text:#eeeaf4; --muted:#aaa6b2;
 --line:#343640; --shadow:0 14px 34px rgba(0,0,0,.28);
}
body.dark .topbar{background:rgba(16,17,22,.92)}
body.dark .almanac-top{background:linear-gradient(135deg,rgba(118,88,181,.22),rgba(95,159,168,.12))}
body.dark .day.today{border-color:#a88ce1}
body.dark .day.selected{background:linear-gradient(145deg,#7658b5,#8068b5)}
body.dark .service-card,body.dark .note-card{box-shadow:0 8px 24px rgba(0,0,0,.18)}

/* ===== My Planner 2.4 polish ===== */
:root{
 --purple:#7563b1; --purple2:#927fc8; --blue:#5d87b4; --green:#6f9b83;
 --gold:#b89355; --rose:#b7798e; --teal:#5f9fa6; --orange:#bd815e;
 --shadow:0 14px 38px rgba(58,45,78,.10);
}
.topbar{padding:12px 15px 13px;min-height:92px}
.brand-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.brand-logo{width:34px;height:34px;flex:0 0 34px;filter:drop-shadow(0 4px 8px rgba(117,99,177,.2))}
.brand{font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif;font-size:27px;letter-spacing:-1.8px;font-weight:950;color:var(--text);margin:0}
.today-date{font-size:20px;line-height:1.2}
.alt-date{font-size:11px;margin-top:3px}
.almanac-top{position:relative;overflow:hidden;padding:19px 18px;margin-bottom:17px;border-radius:24px;background:linear-gradient(135deg,rgba(117,99,177,.17),rgba(95,159,166,.13) 58%,rgba(184,147,85,.10));}
.almanac-top:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-65px;top:-85px;background:rgba(117,99,177,.12)}
.section-kicker{position:relative;z-index:1}
.almanac-date{font-size:25px;line-height:1.25}
.almanac-alt{position:relative;z-index:1}
.home-stats{gap:11px}
.home-stats .card{min-height:135px}
.color-card{border:0!important}
.purple-card{background:linear-gradient(135deg,#6c58a7,#8b73c2)}
.blue-card{background:linear-gradient(135deg,#4d759d,#7299bc)}
.service-grid{gap:11px}
.service-card{min-height:124px;border-radius:21px;transition:transform .15s,box-shadow .15s}
.service-card:active{transform:scale(.98)}
.service-card .service-icon{width:42px;height:42px;border-radius:14px}
.link-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.link-strip a{min-height:78px;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px;display:flex;align-items:center;gap:9px;box-shadow:var(--shadow)}
.link-strip b{font-size:12px}
.link-icon{width:35px;height:35px;border-radius:11px;display:grid;place-items:center;font-weight:950;font-size:18px}
.web-icon{background:rgba(93,135,180,.16);color:var(--blue)}
.yt-icon{background:rgba(183,121,142,.16);color:var(--rose)}
.weather-icon{background:rgba(184,147,85,.17);color:var(--gold)}
/* Calendar: three calendars visible in every cell */
.calendar-shell{padding:15px 12px 13px;border-radius:24px}
.cal-toolbar{gap:8px;margin-bottom:10px}
.month-title.month-picker{border:0;background:transparent;color:var(--text);font-size:23px;font-weight:950;padding:4px 8px;cursor:pointer}
.month-title.month-picker:active{transform:scale(.98)}
.cal-actions button{width:40px;height:40px;border-radius:13px}
.calendar-legend{font-size:10px;gap:15px;margin:3px 0 10px}
.week,.days{gap:3px}
.week div{font-size:10px;padding:7px 0}
.day{min-height:82px;border-radius:12px;padding:6px 2px;box-shadow:inset 0 0 0 1px transparent;transition:background .12s,transform .12s}
.day:active{transform:scale(.97)}
.day.today{border:2px solid var(--purple)}
.day.selected{background:linear-gradient(145deg,#7059ad,#9075c7);box-shadow:0 8px 20px rgba(117,99,177,.28)}
.gnum{font-size:20px}
.bnnum,.hinum{font-size:9px;line-height:1.5}
.bnnum{color:#27915f}.hinum{color:#3288bc}
.bnnum em,.hinum em{font-size:7px}
.day.weekend-day:not(.selected) .gnum{color:var(--rose)}
.calendar-selected{border-left:4px solid var(--purple);border-radius:17px}
.selected-main{font-size:18px}
.detail{margin-top:15px;border-radius:22px}
.detail .event-title{font-size:21px}
.detail p{font-size:13.5px;line-height:1.75}
.badges .pill{border-radius:10px}
/* Modal close must remain visible on every device */
.modal-bg{align-items:flex-end;padding:0}
.modal-box{position:relative;padding:18px 18px 24px}
.modal-head{position:sticky;top:-18px;z-index:5;padding:2px 0 12px;background:var(--surface)}
.close{display:grid;place-items:center!important;font-size:23px!important;line-height:1!important;min-width:40px!important;min-height:40px!important;border:1px solid var(--line)!important}
.modal-box.wide{max-height:96vh}
@media(max-width:719px){
 .modal-box.wide{height:96dvh;max-height:96dvh;border-radius:24px 24px 0 0;padding:16px 17px 22px}
 .modal-box.wide .modal-head{display:flex!important}
}
.month-picker-form{display:grid;gap:8px}
.device-alarm-btn{width:100%;border:1px solid var(--line);background:var(--surface2);color:var(--text);padding:12px 14px;border-radius:13px;font-weight:850;margin-top:10px}
.tiny-note{font-size:11px;line-height:1.5;margin:8px 2px 0}
body.dark{
 --bg:#101116;--surface:#1a1b21;--surface2:#252730;--text:#f2eef6;--muted:#aaa6b3;
 --line:#363740;--shadow:0 15px 38px rgba(0,0,0,.34)
}
body.dark .topbar{background:rgba(16,17,22,.94)}
body.dark .brand-logo{filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
body.dark .link-strip a{background:var(--surface)}
body.dark .modal-head{background:var(--surface)}
@media(max-width:430px){
 .link-strip{grid-template-columns:1fr}
 .link-strip a{min-height:58px}
 .today-date{font-size:18px}
 .brand{font-size:25px}
 .brand-logo{width:32px;height:32px;flex-basis:32px}
 .calendar-shell{padding-left:7px;padding-right:7px}
 .day{min-height:75px}
 .gnum{font-size:18px}
 .bnnum,.hinum{font-size:8px}
 .bnnum em,.hinum em{font-size:6.5px}
}
@media(max-width:350px){
 .day{min-height:68px}
 .gnum{font-size:17px}
 .bnnum,.hinum{font-size:7px}
 .week div{font-size:8px}
}


/* ===== My Planner 2.5 polish ===== */
:root{
 --bg:#f4f2f8; --surface:#ffffff; --surface2:#eeebf4; --text:#25222c; --muted:#746f7d;
 --line:#e2dde9; --purple:#7557b6; --blue:#587fae; --green:#63937c; --gold:#b28a4e; --rose:#b46f86; --cyan:#579ca5;
 --shadow:0 10px 30px rgba(48,35,69,.08);
}
body.dark{
 --bg:#111216; --surface:#1b1b21; --surface2:#26252d; --text:#f5f2f7; --muted:#aaa5b1;
 --line:#35333d; --shadow:0 12px 34px rgba(0,0,0,.32); --nav:#18181dee;
}
body.dark .card,body.dark .note-card,body.dark .service-card,body.dark .calendar-shell,
body.dark .modal-box,body.dark .menu,body.dark .input,body.dark .select,body.dark .textarea{
 color:var(--text);
}
body.dark .note-body,body.dark .muted{color:var(--muted)}
body.dark .topbar{background:rgba(17,18,22,.88)}
body.dark .modal-bg{background:rgba(0,0,0,.72)}
body.dark .btn.soft{background:#302e38;color:#f5f2f7}
body.dark .cal-actions button,body.dark .month-jump{background:#302e38;color:#f5f2f7}
body.dark .weekend-day{background:rgba(180,111,134,.055)}
body.dark .quick,body.dark .service-card{box-shadow:0 8px 25px rgba(0,0,0,.18)}
body.dark .note-card{background:#1b1b21}
body.dark .note-editor-full .rich-editor{color:#f5f2f7}
body.dark .rich-toolbar button{background:#302e38;color:#f5f2f7}

/* top live clock + brand */
.home-hero{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:15px;padding:17px 18px;border-radius:24px;background:linear-gradient(135deg,rgba(117,87,182,.14),rgba(87,156,165,.11),rgba(180,111,134,.08));border:1px solid var(--line);box-shadow:var(--shadow)}
.live-clock{font-size:22px;font-weight:950;letter-spacing:-.5px;text-align:right;min-width:92px}
.live-clock small{display:block;font-size:9px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin-top:2px}
.brand{font-family:"Trebuchet MS",ui-rounded,system-ui,sans-serif;letter-spacing:-1.9px}

/* clean colorful service cards */
.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.service-card{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.service-card:active{transform:scale(.98)}
.service-focus .service-icon{background:rgba(117,87,182,.16);color:var(--purple)}
.service-analytics .service-icon{background:rgba(87,156,165,.16);color:var(--cyan)}
.service-card b{font-size:14px}.service-card small{font-size:11px}

/* quick links */
.link-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.link-strip a{min-width:0;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:11px 9px;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow)}
.link-strip a b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link-icon{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;font-weight:950;flex:0 0 auto}
.mail-icon{background:rgba(180,111,134,.16);color:var(--rose)}.drive-icon{background:rgba(99,147,124,.16);color:var(--green)}
.map-icon{background:rgba(87,127,174,.16);color:var(--blue)}.yt-icon{background:rgba(180,111,134,.16);color:var(--rose)}
.web-icon{background:rgba(117,87,182,.16);color:var(--purple)}.weather-icon{background:rgba(178,138,78,.17);color:var(--gold)}
@media(max-width:390px){.link-strip{grid-template-columns:repeat(2,1fr)}}

/* cleaner calendar */
.calendar-shell{padding:16px 12px 13px}
.calendar-shell.card{overflow:hidden}
.cal-toolbar{padding:2px 3px 10px}
.month-title{font-size:21px;letter-spacing:-.4px}
.calendar-legend{gap:15px;font-size:9px;padding-bottom:4px}
.calendar-legend i{width:7px;height:7px}
.lg-g{background:var(--purple)}.lg-b{background:var(--green)}.lg-h{background:var(--gold)}
.week,.days{gap:4px}
.week div{font-size:9px;padding:4px 0;text-transform:uppercase;letter-spacing:.25px}
.day{min-height:82px;border-radius:15px;padding:7px 2px;background:transparent}
.day.weekend-day{background:rgba(117,87,182,.035)}
.day.other{opacity:.27}
.day.today{border:1.5px solid var(--purple);background:rgba(117,87,182,.07)}
.day.selected{background:linear-gradient(145deg,var(--purple),#9576ca);color:#fff;transform:translateY(-1px)}
.gnum{font-size:18px}
.bnnum,.hinum{font-size:9px;line-height:1.5}
.bnnum{color:var(--green);font-weight:800}.hinum{color:var(--gold);font-weight:800}
.day.selected .bnnum,.day.selected .hinum{color:#fff}
.ev-dot{margin-top:4px;width:5px;height:5px;background:var(--rose)}
.calendar-selected{margin-top:13px;padding:14px 15px;border-radius:17px;background:var(--surface2);border:1px solid var(--line)}
.selected-main{font-size:17px;font-weight:900}.selected-alt{font-size:11px;color:var(--muted);line-height:1.7}
@media(max-width:380px){.day{min-height:74px}.gnum{font-size:16px}.bnnum,.hinum{font-size:8px}.calendar-shell{padding-left:7px;padding-right:7px}}

/* task filters / subtasks */
.filter-bar{display:flex;gap:7px;overflow:auto;padding:2px 1px 12px}
.filter-bar button{flex:0 0 auto;border:1px solid var(--line);background:var(--surface);color:var(--muted);padding:9px 13px;border-radius:12px;font-weight:850;font-size:12px}
.filter-bar button.active{background:var(--purple);border-color:var(--purple);color:#fff}
.subtasks{margin-top:8px;padding:7px 9px;border-radius:11px;background:var(--surface2);display:grid;gap:4px}
.subtasks label{margin:0;font-size:11px;font-weight:600;color:var(--muted)}
.subtasks input{accent-color:var(--purple)}

/* mood */
.mood-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mood-strip button,.mood-picker button{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:15px;padding:10px 5px;display:flex;flex-direction:column;align-items:center;gap:4px}
.mood-strip button{font-size:23px}.mood-strip small{font-size:9px;color:var(--muted)}
.mood-strip button.active,.mood-picker button.active{border-color:var(--purple);background:rgba(117,87,182,.12);box-shadow:0 0 0 2px rgba(117,87,182,.08)}
.mood-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:15px}.mood-picker button{font-size:28px}.mood-picker b{font-size:11px}
.mood-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.mood-stats div{padding:12px;border-radius:14px;background:var(--surface2);text-align:center}.mood-stats span,.mood-stats b{display:block}.mood-stats span{font-size:10px;color:var(--muted)}.mood-stats b{font-size:20px;margin-top:4px}

/* rich notes */
.notes-toolbar{display:flex;gap:8px;align-items:center}.notes-toolbar .notes-search{margin:0;flex:1}
.note-card{position:relative}.note-pin{position:absolute;right:12px;top:10px;color:var(--gold)}
.note-editor-full{padding:2px 1px 20px}.note-editor-full .note-title-input{font-size:29px}
.rich-toolbar{display:flex;gap:6px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 0;margin:8px 0}
.rich-toolbar button{border:0;background:var(--surface2);color:var(--text);border-radius:9px;padding:7px 10px;font-weight:800}
.rich-editor{min-height:46vh;outline:0;font-size:18px;line-height:1.75;padding:9px 2px;white-space:pre-wrap}
.rich-editor:empty:before{content:"Start writing…";color:var(--muted)}
.attach-btn{display:inline-flex;align-items:center;gap:4px;margin:0;padding:8px 10px;border-radius:10px;background:var(--surface2);color:var(--text);cursor:pointer;font-weight:800;font-size:11px}
.attachment-list{display:grid;gap:5px;margin-top:10px}.attachment{display:flex;align-items:center;gap:7px;background:var(--surface2);padding:7px 9px;border-radius:10px;font-size:11px}.attachment button{margin-left:auto;border:0;background:none;color:var(--rose);font-size:18px}

/* permissions */
.permission-card{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;padding:13px;border:1px solid var(--line);background:var(--surface2);border-radius:15px;margin-bottom:9px}
.perm-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(117,87,182,.14);color:var(--purple)}
.permission-card b,.permission-card small{display:block}.permission-card small{font-size:10px;color:var(--muted);margin-top:2px}.permission-help{font-size:11px;line-height:1.6;margin-top:12px}
.settings-stack{display:grid;gap:4px}.setting-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.setting-row small{display:block;color:var(--muted);font-size:10px;margin-top:3px}

/* focus + analytics */
.focus-face{text-align:center;padding:20px 0}.focus-face #focusTime{font-size:64px;font-weight:950;letter-spacing:-3px}.focus-face small{color:var(--muted);text-transform:uppercase;letter-spacing:1.2px}
.focus-actions{display:flex;gap:8px;justify-content:center}.analytics-hero .stat{font-size:42px}.analytics-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}.analytics-summary span{padding:10px;border-radius:13px;background:var(--surface2)}.analytics-summary b,.analytics-summary small{display:block}.analytics-summary small{color:var(--muted);font-size:9px;margin-top:3px}
.chart-card{padding:17px}.mini-chart{height:180px;display:flex;align-items:flex-end;justify-content:space-around;gap:8px;padding-top:15px}.bar-col{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}.bar{width:min(26px,75%);min-height:8px;border-radius:8px 8px 3px 3px;background:linear-gradient(to top,var(--purple),var(--cyan))}.bar-col small{font-size:9px;color:var(--muted)}

/* modal/close reliability */
.modal-bg{touch-action:auto}.close{display:grid;place-items:center;cursor:pointer;position:relative;z-index:3;flex:0 0 35px}.modal-head{position:sticky;top:-20px;padding-top:2px;background:var(--surface);z-index:2}.modal-box{overscroll-behavior:contain}
.toast{max-width:calc(100vw - 30px);text-align:center}

.view-tabs{display:flex;gap:6px;padding:2px 0 12px;overflow:auto}.view-tabs button{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:11px;padding:8px 13px;font-weight:850;font-size:11px}.view-tabs button.active{background:var(--purple);border-color:var(--purple);color:#fff}
.week-view-head{font-size:15px;font-weight:900;padding-bottom:10px}.week-row{width:100%;border:0;border-top:1px solid var(--line);background:transparent;color:var(--text);padding:12px 3px;display:grid;grid-template-columns:38px 1fr 22px;gap:10px;text-align:left;align-items:center}.week-row>span:nth-child(2) b,.week-row>span:nth-child(2) small{display:block}.week-row small{font-size:10px;color:var(--muted);margin-top:2px}.week-g{font-size:22px;font-weight:950;text-align:center}.today-row{background:rgba(117,87,182,.08);border-radius:12px}.daily-view{text-align:center;padding:28px 18px}.daily-big{font-size:82px;font-weight:950;line-height:.9;background:linear-gradient(135deg,var(--purple),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}.daily-week{font-size:20px;font-weight:900;margin-top:12px}.daily-alt{font-size:12px;color:var(--muted);line-height:1.8}


/* My Planner 3.0 Priority 1 */
#p3-features{padding:0 16px 110px;max-width:760px;margin:0 auto}
.p3-panel{margin:14px 0;padding:16px;border-radius:22px;background:var(--card,#fff);border:1px solid rgba(127,90,160,.14);box-shadow:0 8px 26px rgba(40,30,60,.06)}
.p3-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.p3-head h3{margin:0;font-size:18px}
.p3-head button,.p3-chip,.p3-upload{border:0;border-radius:12px;padding:9px 12px;background:var(--accent,#7357d9);color:#fff;font-weight:700;cursor:pointer}
.p3-upload{display:inline-block}.p3-upload input{display:none}
.p3-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid rgba(127,90,160,.12)}.p3-row:last-child{border-bottom:0}.p3-row>div:first-child{flex:1}.p3-row small{display:block;opacity:.65;margin-top:3px}.p3-icon{border:0;background:transparent;font-size:24px;opacity:.65;cursor:pointer}.p3-empty{opacity:.6;padding:10px 0}
.p3-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.p3-stats>div{padding:13px;border-radius:16px;background:rgba(115,87,217,.09);text-align:center}.p3-stats b{display:block;font-size:22px}.p3-stats span{font-size:11px;opacity:.7}
@media(max-width:420px){.p3-stats{grid-template-columns:1fr 1fr}.p3-stats>div:last-child{grid-column:1/-1}}
.dark .p3-panel,body.dark .p3-panel{background:#202128;color:#eee;border-color:rgba(255,255,255,.08);box-shadow:none}.dark .p3-row,body.dark .p3-row{border-color:rgba(255,255,255,.08)}.dark .p3-stats>div,body.dark .p3-stats>div{background:rgba(160,130,255,.13)}


/* ===== My Planner 4.0 visual polish ===== */
#p4-features{padding:0 16px 120px;max-width:760px;margin:0 auto}
.p4-panel{margin:15px 0;padding:18px;border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,244,255,.98));border:1px solid rgba(116,91,190,.15);box-shadow:0 10px 30px rgba(61,45,100,.08)}
.p4-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.p4-head h3{margin:0;font-size:18px}
.p4-head button,.p4-actions button,.p4-primary{border:0;border-radius:13px;padding:9px 13px;background:#7257d6;color:#fff;font-weight:700}
.p4-actions{display:flex;gap:8px;justify-content:center}.p4-study{text-align:center;background:linear-gradient(145deg,#f1edff,#eaf5ff)}#p4-study-time{font-size:48px;font-weight:800;letter-spacing:2px;margin:8px 0 14px}
.p4-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid rgba(100,80,150,.12)}.p4-row>div:first-child{flex:1}.p4-row small{display:block;opacity:.65;margin-top:3px}.p4-x{border:0;background:transparent;font-size:23px;opacity:.55}.p4-total{padding:10px 0 14px}.p4-muted{opacity:.62;font-size:13px}.p4-search{width:100%;box-sizing:border-box;border:1px solid rgba(100,80,150,.2);border-radius:14px;padding:13px 14px;background:transparent;font-size:15px}.p4-search-hit{padding:10px 0;border-bottom:1px solid rgba(100,80,150,.1)}.p4-weather-main{font-size:20px;font-weight:750}.p4-compass{width:120px;height:120px;margin:12px auto;border-radius:50%;display:grid;place-items:center;border:8px solid rgba(114,87,214,.15);background:radial-gradient(circle,#fff,#ece8ff);font-size:32px}.p4-badge{display:inline-block;margin:5px;padding:9px 12px;border-radius:14px;background:rgba(114,87,214,.12);font-weight:700}.p4-analytics-bar{height:12px;border-radius:20px;background:#e8e4ef;overflow:hidden;margin:10px 0}.p4-analytics-bar span{display:block;height:100%;background:linear-gradient(90deg,#7257d6,#5ba6d9);border-radius:20px}.p4-locked{min-height:100vh;display:grid;place-content:center;text-align:center;font-family:system-ui}
body.dark .p4-panel,.dark .p4-panel{background:linear-gradient(145deg,#20212a,#262432);color:#f2f1f6;border-color:rgba(255,255,255,.08);box-shadow:0 12px 30px rgba(0,0,0,.25)}
body.dark .p4-search,.dark .p4-search{color:#fff;border-color:rgba(255,255,255,.15)}body.dark .p4-compass,.dark .p4-compass{background:#2a2933}
body.dark .p4-analytics-bar,.dark .p4-analytics-bar{background:#3b3945}
@media(max-width:430px){#p4-features{padding-left:12px;padding-right:12px}.p4-panel{border-radius:20px;padding:15px}#p4-study-time{font-size:44px}}

/* ===== My Planner 5.0 Home Command Center ===== */
#p3-features,#p4-features{display:none!important}
.v5-command{padding-bottom:18px}
.v5-myday{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:17px 16px 15px;margin-bottom:12px;border-radius:24px;background:linear-gradient(135deg,rgba(117,99,177,.18),rgba(95,159,166,.13),rgba(184,147,85,.10));border:1px solid var(--line);overflow:hidden}
.v5-kicker{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--purple);font-weight:950}.v5-myday h1{margin:4px 0 0;font-size:24px;letter-spacing:-.7px}.v5-myday p{margin:2px 0 0;color:var(--muted);font-size:12px}.v5-clock{font-size:23px;font-weight:950;letter-spacing:-.8px;white-space:nowrap;color:var(--text)}
.v5-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.v5-card{border:0;min-height:91px;border-radius:18px;padding:12px;text-align:left;color:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.v5-card small{font-size:10px;opacity:.82;font-weight:800}.v5-card b{font-size:18px;line-height:1.05;letter-spacing:-.3px}.v5-card b.small-b{font-size:12px;line-height:1.25}.v5-card span{font-size:9px;opacity:.8}.v5-card #v5-weather{display:flex;flex-direction:column;gap:2px}.v5-card #v5-weather b{font-size:18px}.v5-card #v5-weather span,.v5-card #v5-weather small{font-size:9px}.c-purple{background:linear-gradient(145deg,#6f58ad,#8970c1)}.c-green{background:linear-gradient(145deg,#5d8f77,#76a38d)}.c-blue{background:linear-gradient(145deg,#537da5,#7199bd)}.c-gold{background:linear-gradient(145deg,#a78048,#c09b63)}.c-rose{background:linear-gradient(145deg,#a96880,#c1859a)}.c-teal{background:linear-gradient(145deg,#4d8d92,#69a6a9)}.c-indigo{background:linear-gradient(145deg,#5861a0,#747cc0)}.c-orange{background:linear-gradient(145deg,#a96f51,#c18a68)}
.v5-section-title{display:flex;justify-content:space-between;align-items:center;margin:17px 2px 8px;font-size:13px}.v5-section-title button,.v5-section-title span{border:0;background:none;color:var(--purple);font-size:10px;font-weight:850}.v5-almanac{width:100%;text-align:left;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:19px;padding:14px;box-shadow:var(--shadow)}.v5-almanac-date{font-size:18px;font-weight:950}.v5-almanac div:nth-child(2){font-size:10px;color:var(--muted);margin-top:3px}.v5-almanac strong{display:block;margin-top:10px;font-size:14px}.v5-almanac p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.5}.v5-scroller{display:flex;gap:8px;overflow-x:auto;padding:2px 1px 7px;scroll-snap-type:x mandatory;scrollbar-width:none}.v5-scroller::-webkit-scrollbar{display:none}.v5-scroller button{flex:0 0 92px;min-height:80px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:17px;padding:10px;text-align:left;scroll-snap-align:start;box-shadow:0 5px 16px rgba(40,35,55,.06);display:flex;flex-direction:column;gap:4px}.v5-scroller button b{font-size:11px}.v5-scroller button small{font-size:9px;color:var(--muted)}.v5-links{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:9px}.v5-links a{text-decoration:none;color:var(--text);background:var(--surface2);border:1px solid var(--line);border-radius:13px;padding:9px 5px;text-align:center;font-size:9px;font-weight:800}
.v5-score-big{font-size:52px;font-weight:950;text-align:center;color:var(--purple);padding:18px}.v5-list{margin-top:13px}.v5-list>div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}.v5-achievements{text-align:center;line-height:2;font-size:16px}
body.dark .v5-card{box-shadow:0 9px 25px rgba(0,0,0,.24)}body.dark .v5-scroller button,body.dark .v5-almanac,body.dark .v5-links a{box-shadow:none}
@media(max-width:620px){.v5-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.v5-card{min-height:92px}.v5-clock{font-size:21px}.v5-links{grid-template-columns:repeat(2,1fr)}}
@media(max-width:380px){.v5-myday h1{font-size:21px}.v5-clock{font-size:18px}.v5-card{padding:10px;min-height:86px}.v5-card b{font-size:16px}}
/* Prevent old white strips in dark mode and keep modal close buttons responsive. */
body.dark main,body.dark #main{background:transparent!important}.modal-bg{z-index:1000!important}.modal-box{z-index:1001!important}.close{pointer-events:auto!important;touch-action:manipulation!important}


/* My Planner 5.1 UI polish */
:root{
  --mp-radius:18px;
}
.myday-shell{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
  gap:14px;
  margin:10px 0 16px;
}
.myday-hero{
  border-radius:22px;
  padding:18px;
  min-height:170px;
  background:linear-gradient(135deg,rgba(111,78,170,.95),rgba(62,91,142,.95));
  color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.myday-title{font-size:clamp(25px,7vw,36px);font-weight:800;margin:0 0 4px}
.myday-date{font-size:14px;opacity:.9}
.myday-clock{font-size:clamp(30px,9vw,48px);font-weight:800;letter-spacing:.5px;margin-top:12px}
.myday-next{margin-top:8px;font-size:14px}
.myday-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.myday-card{
  min-height:82px;
  padding:13px;
  border-radius:17px;
  background:var(--card-bg,#fff);
  box-shadow:0 5px 18px rgba(0,0,0,.08);
  border:1px solid rgba(120,120,140,.12);
}
.myday-card .label{font-size:12px;opacity:.68}
.myday-card .value{font-size:18px;font-weight:750;margin-top:5px;line-height:1.15}
.myday-card.wide{grid-column:span 2}
.planner-tools-scroll{
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  overscroll-behavior-x:contain;
  touch-action:pan-x;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  gap:10px;
  padding:4px 2px 12px;
  width:100%;
  min-width:0;
}
.planner-tools-scroll > *{
  flex:0 0 132px !important;
  width:132px !important;
  min-width:132px !important;
  scroll-snap-align:start;
}
.planner-tools-scroll::-webkit-scrollbar{height:4px}
.section-title{font-size:18px;font-weight:800;margin:14px 2px 8px}
.feature-card{min-height:92px !important}
.modal,.overlay,.dialog{
  overscroll-behavior:contain;
}
.modal .close,.overlay .close,.dialog .close{
  min-width:42px !important;
  min-height:42px !important;
  display:grid !important;
  place-items:center !important;
  cursor:pointer !important;
  z-index:9999 !important;
}
@media(max-width:700px){
  .myday-shell{grid-template-columns:1fr}
  .myday-hero{min-height:155px}
  .myday-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-color-scheme:dark){
  .myday-card{--card-bg:#20212a;background:#20212a;color:#f3f3f5;border-color:rgba(255,255,255,.08)}
}

/* ===== My Planner 5.2 — clean brand + single My Day clock ===== */
.mp-brandbar{position:sticky;top:0;z-index:40;width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px!important;min-height:58px;background:var(--surface);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.mp-main-brand{font-size:clamp(25px,7vw,34px)!important;font-weight:950!important;letter-spacing:-1.5px!important;line-height:1;background:linear-gradient(90deg,#6e55b5,#4d8fa4,#b27b4f);-webkit-background-clip:text;background-clip:text;color:transparent!important;flex:1;text-align:left}
.brand-date-cache{display:none!important}.mp-menu-btn{flex:0 0 44px!important;width:44px!important;height:44px!important;border-radius:14px!important;font-size:28px!important;background:var(--surface2)!important;border:1px solid var(--line)!important;color:var(--text)!important}
.myday-command{padding-top:4px}.myday-main-hero{position:relative;overflow:hidden;border-radius:26px;padding:20px 18px 18px;background:linear-gradient(135deg,#6b55aa 0%,#4b779f 55%,#4d918c 100%);color:#fff;box-shadow:0 14px 34px rgba(60,50,90,.20);margin-bottom:12px}.myday-main-hero:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-70px;top:-80px;background:rgba(255,255,255,.10)}.myday-greeting{font-size:clamp(28px,8vw,40px);font-weight:950;letter-spacing:-1.2px;position:relative;z-index:1}.myday-date{font-size:14px;font-weight:700;opacity:.94;margin-top:4px;position:relative;z-index:1}.myday-alt{font-size:11px;opacity:.84;margin-top:4px;position:relative;z-index:1}.myday-clock{font-size:clamp(38px,11vw,58px);font-weight:950;letter-spacing:-1.5px;line-height:1;margin-top:17px;position:relative;z-index:1}.myday-summary{font-size:12px;font-weight:700;margin-top:9px;opacity:.9;position:relative;z-index:1}
.myday-dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.myday-dashboard-grid .myday-card{border:0!important;box-shadow:0 8px 22px rgba(45,38,60,.10);color:#fff!important;min-height:92px;padding:13px;border-radius:18px;display:flex;flex-direction:column;justify-content:space-between;text-align:left}.myday-dashboard-grid .myday-card .label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;opacity:.84}.myday-dashboard-grid .myday-card .value{font-size:19px;font-weight:950;margin-top:5px}.myday-dashboard-grid .myday-card .small-value{font-size:13px;line-height:1.3}.myday-dashboard-grid .myday-card .mini{font-size:9px;opacity:.82;margin-top:4px}.myday-dashboard-grid .c-gold{background:linear-gradient(145deg,#a17b3f,#bd9a61)}.myday-dashboard-grid .c-green{background:linear-gradient(145deg,#4f856c,#6ca188)}.myday-dashboard-grid .c-purple{background:linear-gradient(145deg,#6d55aa,#8971c0)}.myday-dashboard-grid .c-rose{background:linear-gradient(145deg,#a25f78,#bd7d96)}.myday-dashboard-grid .c-blue{background:linear-gradient(145deg,#4c719b,#668eb5)}.myday-dashboard-grid .c-teal{background:linear-gradient(145deg,#438387,#61a1a2)}.myday-dashboard-grid .c-indigo{background:linear-gradient(145deg,#555c9a,#727ac0)}.myday-dashboard-grid .c-orange{background:linear-gradient(145deg,#a4674b,#bf8667)}
#v5-weather{display:flex;flex-direction:column;gap:2px}.myday-dashboard-grid #v5-weather b{font-size:19px}.myday-dashboard-grid #v5-weather span,.myday-dashboard-grid #v5-weather small{font-size:9px;line-height:1.2}.planner-tools-scroll{touch-action:pan-x!important;overscroll-behavior-x:contain!important;user-select:none}.planner-tools-scroll button{touch-action:pan-x!important}
.timeline-row{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}.timeline-row b{min-width:70px}.timeline-row span{flex:1}.weekly-review{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.weekly-review>div{background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:13px;text-align:center}.weekly-review b{display:block;font-size:23px}.weekly-review small{display:block;color:var(--muted);margin-top:3px;font-size:9px}
body.dark .mp-brandbar{background:rgba(25,25,31,.94)}body.dark .mp-menu-btn{background:#2b2a33!important}.myday-main-hero,.myday-dashboard-grid .myday-card{color:#fff!important}
@media(max-width:380px){.mp-brandbar{padding:10px 10px!important}.mp-main-brand{font-size:26px!important}.myday-main-hero{padding:17px 15px}.myday-clock{font-size:38px}.myday-dashboard-grid .myday-card{min-height:88px;padding:11px}.myday-dashboard-grid .myday-card .value{font-size:17px}}

/* ===== My Planner 5.4 Home/My Day polish ===== */
.myday-wrap{display:block;padding-bottom:110px}
.myday-head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:4px 2px 12px}
.myday-kicker{font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--purple)}
.myday-head h1{margin:4px 0 2px;font-size:30px;line-height:1.08;letter-spacing:-.03em}
.myday-date{font-size:15px;font-weight:800;color:var(--text)}
.myday-alt{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.6}
.myday-weather{min-width:62px;text-align:center;padding:9px 11px;border-radius:18px;background:linear-gradient(135deg,var(--surface2),var(--surface));font-size:21px;font-weight:900;color:var(--blue);box-shadow:var(--shadow);border:1px solid var(--line)}
.myday-clock-card{margin:4px 0 14px;padding:17px 14px 13px;text-align:center;border-radius:26px;background:linear-gradient(135deg,#7563a8,#6687a8);color:#fff;box-shadow:0 14px 35px rgba(75,59,110,.22)}
.myday-clock{font-variant-numeric:tabular-nums;font-size:clamp(42px,13vw,64px);font-weight:900;letter-spacing:.045em;line-height:1}
.myday-clock-label{font-size:9px;letter-spacing:.22em;font-weight:800;opacity:.8;margin-top:7px}
.myday-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.myday-card{position:relative;min-height:78px;padding:12px;border-radius:19px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);display:flex;align-items:center;gap:10px;overflow:hidden}
.myday-card:active{transform:scale(.985)}
.myday-icon{font-size:22px;flex:0 0 auto}
.myday-card>div{min-width:0}
.myday-card small{display:block;color:var(--muted);font-size:10px;font-weight:700;margin-bottom:3px}
.myday-card b{display:block;font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.weather-card{border-top:3px solid var(--blue)}
.prayer-card{border-top:3px solid var(--green)}
.task-card{border-top:3px solid var(--purple)}
.overdue-card{border-top:3px solid var(--rose)}
.study-card{border-top:3px solid var(--gold)}
.mood-card{border-top:3px solid #9a7c9e}
.progress-card{border-top:3px solid var(--green)}
.almanac-card{border-top:3px solid var(--purple)}
.reminder-card{border-top:3px solid var(--gold)}
.mini-progress{position:absolute;left:12px;right:12px;bottom:8px;height:3px;border-radius:5px;background:var(--surface2);overflow:hidden}
.mini-progress em{display:block;height:100%;background:var(--green);border-radius:5px}
.myday-section{margin-top:18px;margin-bottom:8px}
.myday-section h2{margin:0}
.myday-section>span{font-size:10px}
.planner-tools-scroll{display:flex!important;gap:10px;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain!important;touch-action:pan-x!important;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:2px 2px 12px;scrollbar-width:none}
.planner-tools-scroll::-webkit-scrollbar{display:none}
.planner-tools-scroll>button{flex:0 0 116px;min-height:92px;border:1px solid var(--line);border-radius:19px;background:var(--surface);color:var(--text);box-shadow:var(--shadow);padding:12px;text-align:left;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center;gap:3px}
.planner-tools-scroll>button:first-letter{font-size:21px}
.planner-tools-scroll>button b{font-size:12px}
.planner-tools-scroll>button small{font-size:9px;color:var(--muted)}
body.dark .myday-clock-card{box-shadow:0 15px 40px rgba(0,0,0,.38)}
body.dark .myday-weather{background:var(--surface)}
body.dark .myday-card,body.dark .planner-tools-scroll>button{background:var(--surface);border-color:#302e38}
@media(max-width:390px){
 .myday-grid{gap:8px}.myday-card{min-height:72px;padding:10px}.myday-icon{font-size:19px}.myday-card b{font-size:12px}.myday-card small{font-size:9px}
 .myday-head h1{font-size:26px}
}

/* ===== My Planner 5.6 — final professional polish ===== */
:root{
  --mp-accent:#7357b6;
  --mp-accent2:#4d8fa4;
  --mp-ink:#25212c;
}
.brand-block{min-width:0;display:flex;flex-direction:column;gap:3px;flex:1}
.brand-credit{font-size:9px;font-weight:800;letter-spacing:.35px;color:var(--muted);padding-left:2px}
.mp-main-brand{font-size:clamp(29px,8vw,39px)!important;line-height:.95!important;letter-spacing:-1.8px!important}
.mp-brandbar{min-height:72px!important;padding:11px 14px 10px!important}

.home-pro{padding-bottom:105px}
.myday-main-hero{background:linear-gradient(135deg,#5f48a6 0%,#4d719e 52%,#4b918b 100%)!important;border-radius:26px!important;padding:20px 18px 18px!important;box-shadow:0 18px 42px rgba(69,55,105,.22)!important}
.myday-hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;position:relative;z-index:2}
.hero-temp{min-width:72px;padding:8px 10px;border-radius:15px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);font-size:19px;font-weight:900;text-align:center;backdrop-filter:blur(8px)}
.myday-kicker{font-size:10px!important;letter-spacing:.16em!important;color:rgba(255,255,255,.82)!important}
.myday-greeting{font-size:clamp(29px,8.5vw,42px)!important;margin-top:4px}
.myday-clock{font-size:clamp(42px,12vw,64px)!important;letter-spacing:-1.6px!important;text-shadow:0 5px 20px rgba(0,0,0,.16)}
.myday-summary{font-size:11px!important}

.myday-dashboard-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.myday-dashboard-grid .myday-card{min-height:104px!important;padding:13px!important;border-radius:19px!important;box-shadow:0 9px 25px rgba(38,31,52,.12)!important}
.myday-dashboard-grid .myday-card .label{font-size:10px!important;letter-spacing:.35px}
.myday-dashboard-grid .myday-card .value{font-size:19px!important;line-height:1.18!important}
.myday-dashboard-grid .myday-card .small-value{font-size:13px!important}
.myday-dashboard-grid .myday-card .mini{font-size:9px!important}

/* Planner Tools: compact 1×1-style cards, no horizontal scrolling */
.planner-tools-scroll{display:none!important}
.planner-tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:10px}
.planner-tools-grid button{min-width:0;min-height:88px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--text);box-shadow:0 7px 20px rgba(38,31,52,.07);padding:11px;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:3px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.planner-tools-grid button:active{transform:scale(.975)}
.planner-tools-grid button b{font-size:12px}
.planner-tools-grid button small{font-size:9px;color:var(--muted)}
.planner-tools-grid button:nth-child(4n+1){background:linear-gradient(145deg,color-mix(in srgb,var(--purple) 11%,var(--surface)),var(--surface))}
.planner-tools-grid button:nth-child(4n+2){background:linear-gradient(145deg,color-mix(in srgb,var(--blue) 11%,var(--surface)),var(--surface))}
.planner-tools-grid button:nth-child(4n+3){background:linear-gradient(145deg,color-mix(in srgb,var(--gold) 11%,var(--surface)),var(--surface))}
.planner-tools-grid button:nth-child(4n+4){background:linear-gradient(145deg,color-mix(in srgb,var(--green) 11%,var(--surface)),var(--surface))}

/* Dark mode: eliminate every legacy white task/note surface */
body.dark main,body.dark #main,body.dark .home-pro{background:transparent!important;color:var(--text)!important}
body.dark .card,body.dark .item,body.dark .note-card,body.dark .task-card,body.dark .note-editor,
body.dark .myday-card,body.dark .planner-tools-grid button,body.dark .filter-bar,
body.dark .prayer,body.dark .prayers>div,body.dark .three-cal,body.dark .selected-alt,
body.dark .input,body.dark .select,body.dark .textarea{background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}
body.dark .item{border-bottom-color:var(--line)!important}
body.dark .note-body,body.dark .note-meta,body.dark .muted,body.dark .subtitle{color:var(--muted)!important}
body.dark .note-editor textarea,body.dark .note-title-input{color:var(--text)!important}
body.dark .v5-almanac{background:var(--surface)!important;color:var(--text)!important}
body.dark .planner-tools-grid button:nth-child(4n+1),body.dark .planner-tools-grid button:nth-child(4n+2),body.dark .planner-tools-grid button:nth-child(4n+3),body.dark .planner-tools-grid button:nth-child(4n+4){background:var(--surface)!important}

/* Permission dialog diagnostics */
.permission-diagnostic{margin-top:12px;padding:12px 13px;border-radius:15px;background:var(--surface2);border:1px solid var(--line);font-size:11px;line-height:1.55}
.permission-diagnostic b{font-size:12px}
.permission-diagnostic p{margin:5px 0 0}

/* Better modal close target */
.modal-head .close,.mp55-x{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;font-size:25px!important;touch-action:manipulation!important;position:relative;z-index:10001}

@media(max-width:380px){
 .mp-main-brand{font-size:28px!important}
 .brand-credit{font-size:8px}
 .myday-dashboard-grid{gap:8px}
 .myday-dashboard-grid .myday-card{min-height:96px!important;padding:11px!important}
 .myday-dashboard-grid .myday-card .value{font-size:17px!important}
 .planner-tools-grid{gap:8px}
 .planner-tools-grid button{min-height:82px;padding:10px}
}

/* ================= My Planner 5.7 visual system ================= */
:root[data-font="Inter"]{--mp-font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
:root[data-font="Nunito"]{--mp-font:"Nunito",Inter,ui-sans-serif,system-ui,sans-serif}
:root[data-font="Manrope"]{--mp-font:"Manrope",Inter,ui-sans-serif,system-ui,sans-serif}
:root[data-font="Quicksand"]{--mp-font:"Quicksand",Inter,ui-sans-serif,system-ui,sans-serif}
html{font-family:var(--mp-font)}
body{font-family:var(--mp-font)}
:root[data-ui-theme="ocean"]{--purple:#397ea5;--purple2:#5ca8bd;--blue:#4f8fae;--green:#4b9b91}
:root[data-ui-theme="forest"]{--purple:#4c7f68;--purple2:#79a98b;--blue:#5d8f80;--green:#4d9a70}
:root[data-ui-theme="sunset"]{--purple:#a15e74;--purple2:#c27f68;--blue:#7c719f;--green:#6f9a83}
.brand-credit{font-size:12px!important;font-weight:900!important;letter-spacing:.5px!important;color:var(--purple)!important;background:linear-gradient(90deg,var(--purple),var(--blue),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent!important}
.home-search-pro{margin:0 0 12px}
.home-search-button{width:100%;height:48px;border:1px solid var(--line);background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--purple) 5%,var(--surface)));color:var(--muted);border-radius:16px;padding:0 13px;display:flex;align-items:center;gap:10px;box-shadow:0 7px 22px rgba(40,30,60,.06);font-weight:750;text-align:left}
.home-search-button .search-svg{width:22px;height:22px;color:var(--purple);display:grid;place-items:center}
.home-search-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.home-search-button kbd{margin-left:auto;border:1px solid var(--line);background:var(--surface2);border-radius:8px;padding:3px 7px;color:var(--muted)}
.tool-icon-svg{width:30px;height:30px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--purple) 10%,var(--surface));color:var(--purple);margin-bottom:2px}
.tool-icon-svg svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.planner-tools-grid button{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.planner-tools-grid button:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(38,31,52,.11);border-color:color-mix(in srgb,var(--purple) 28%,var(--line))}
.myday-main-hero{position:relative}
.myday-alt{font-size:13px!important;font-weight:750!important;letter-spacing:.1px}
.myday-date{font-weight:850!important}
.myday-clock{font-variant-numeric:tabular-nums}
body.dark .home-search-button,body.dark .tool-icon-svg{background:var(--surface)!important}
body.dark .home-search-button{border-color:var(--line);box-shadow:none}
body.dark .myday-alt{color:rgba(255,255,255,.9)!important}

/* Professional Qibla dial */
.qibla57-dial{width:min(270px,72vw);aspect-ratio:1;margin:15px auto 18px;border-radius:50%;position:relative;border:10px solid var(--surface2);background:radial-gradient(circle at 50% 48%,var(--surface),color-mix(in srgb,var(--purple) 10%,var(--surface)));box-shadow:inset 0 0 0 2px var(--line),0 18px 40px rgba(30,25,45,.12)}
.qibla57-dial>span{position:absolute;font-weight:950}.qibla57-dial>span:nth-child(1){top:10px;left:50%;transform:translateX(-50%);color:var(--rose)}.qibla57-dial>span:nth-child(2){right:11px;top:50%;transform:translateY(-50%)}.qibla57-dial>span:nth-child(3){bottom:10px;left:50%;transform:translateX(-50%)}.qibla57-dial>span:nth-child(4){left:11px;top:50%;transform:translateY(-50%)}
.qibla57-dial i{position:absolute;left:50%;top:50%;width:6px;height:105px;border-radius:8px;background:linear-gradient(var(--rose),var(--purple));transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(0deg);box-shadow:0 4px 15px rgba(100,70,130,.25)}
.qibla57-dial b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:28px}
.qibla57-reading{text-align:center;font-weight:900;font-size:16px;color:var(--purple);margin-bottom:12px}
.mp57-overlay{position:fixed;inset:0;z-index:100000;display:grid;place-items:end center}
.mp57-backdrop{position:absolute;inset:0;background:rgba(15,12,22,.58);backdrop-filter:blur(7px)}
.mp57-sheet{position:relative;width:min(650px,100%);max-height:91dvh;overflow:auto;background:var(--surface);color:var(--text);border-radius:28px 28px 0 0;padding:20px;box-shadow:0 -20px 60px rgba(0,0,0,.28)}
.mp57-sheet header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.mp57-sheet header b{display:block;font-size:21px}.mp57-sheet header small{display:block;color:var(--muted);margin-top:3px}
.mp57-close{width:44px;height:44px;border:1px solid var(--line);background:var(--surface2);color:var(--text);border-radius:14px;font-size:27px;touch-action:manipulation}
.mp57-primary,.mp57-secondary{border:0;border-radius:14px;padding:13px 16px;font-weight:900}.mp57-primary{background:linear-gradient(135deg,var(--purple),var(--purple2));color:#fff}.mp57-secondary{background:var(--surface2);color:var(--text)}
.mp57-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.mp57-help{font-size:12px;color:var(--muted);line-height:1.55}
.mp57-list{display:grid;gap:8px;margin-bottom:14px}.mp57-row{display:grid;grid-template-columns:28px 1fr 36px 36px 56px;align-items:center;gap:6px;padding:10px;border:1px solid var(--line);border-radius:15px;background:var(--surface2)}.mp57-row.is-hidden{opacity:.48}.mp57-row button{border:0;border-radius:9px;background:var(--surface);color:var(--text);height:34px}.mp57-row .mp57-eye{font-size:10px;font-weight:850}.mp57-grip{color:var(--muted)}
.mp57-save{width:100%;margin-top:3px}
.alarm-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}.alarm-settings-grid output{display:block;color:var(--purple);font-weight:900;margin-top:4px}
.mp57-alarm-list{margin-top:15px}.mp57-alarm-list>div{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.mp57-alarm-list small{display:block;color:var(--muted);margin-top:3px}.mp57-alarm-list button{width:36px;height:36px;border:0;border-radius:11px;background:var(--surface2);color:var(--text);font-size:20px}
body.dark .mp57-sheet{box-shadow:0 -20px 60px rgba(0,0,0,.55)}body.dark .mp57-row{background:var(--surface2)}
@media(max-width:460px){.alarm-settings-grid,.mp57-actions{grid-template-columns:1fr}.mp57-row{grid-template-columns:24px 1fr 34px 34px 50px}.myday-alt{font-size:12px!important}}

/* 5.7 dark-mode hardening */
body.dark #app,
body.dark main,
body.dark #main,
body.dark .home-pro,
body.dark .note-grid,
body.dark .list{background:transparent!important}
body.dark .card,
body.dark .note-card,
body.dark .item,
body.dark .notes-toolbar,
body.dark .task-list,
body.dark .tasks-list,
body.dark .filter-bar,
body.dark .empty,
body.dark .three-cal,
body.dark .detail,
body.dark .calendar-shell,
body.dark .week-view,
body.dark .daily-view{color:var(--text)!important}
body.dark nav{background:rgba(24,22,29,.96)!important;color:var(--text)!important}
body.dark .notes-toolbar .input,
body.dark .note-card,
body.dark .card,
body.dark .task-card{background:var(--surface)!important}

/* ================= My Planner 6.0 visual system ================= */
.myday-main-hero{overflow:hidden}
.myday-clock{display:block!important;width:100%!important;text-align:center!important;font-size:clamp(38px,10vw,52px)!important;line-height:1.05!important;letter-spacing:-1px!important;margin:10px auto 6px!important}
.myday-alt{color:#fff!important;font-weight:800!important;text-shadow:0 1px 4px rgba(0,0,0,.12)}
.myday-summary{display:flex!important;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.myday-next-prayer{font-weight:850!important;color:inherit}
.hero-temp{cursor:pointer!important;user-select:none}
.mp88-search{grid-template-columns:minmax(0,1fr) 36px 36px!important;gap:7px!important}
.mp88-search-input{font-size:12px!important;height:42px!important;font-weight:650!important}
.mp88-brand-google,.mp88-brand-youtube{width:36px!important;height:36px!important;border-radius:10px!important}
.mp88-brand-google{font-family:Arial,sans-serif!important;font-size:20px!important;font-weight:900!important;background:#fff!important;color:#4285f4!important}
.mp88-brand-youtube{font-size:16px!important;background:#ff0033!important;color:#fff!important}
.alarm6-settings{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:13px;border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--purple) 10%,var(--surface2)),color-mix(in srgb,var(--blue) 8%,var(--surface2)));margin-bottom:12px}
.alarm6-settings label{margin:0}.alarm6-settings input[type=range]{width:100%;accent-color:var(--purple)}
.alarm6-settings output{font-weight:900;color:var(--purple);display:block;margin-top:4px}
.v5-almanac{background:linear-gradient(135deg,var(--purple),var(--blue),var(--green))!important;color:#fff!important;border:0!important;box-shadow:0 14px 32px rgba(75,64,120,.18)!important}
body.dark .v5-almanac{background:linear-gradient(135deg,#51427c,#315a70,#35665a)!important;color:#fff!important}
body:not(.dark) .myday-dashboard-grid .myday-card{box-shadow:0 10px 26px rgba(40,30,60,.10)!important}
@media(max-width:620px){.alarm6-settings{grid-template-columns:1fr}.myday-clock{font-size:clamp(36px,11vw,50px)!important}}


/* ===== 6.0.2 focused visual repair ===== */
.mp602-search{margin:10px 0 12px;width:100%}
.mp602-search-box{width:100%;min-height:46px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--text);display:flex;align-items:center;gap:9px;padding:8px 10px;box-shadow:0 6px 18px rgba(30,25,45,.06);font:inherit}
.mp602-search-placeholder{font-size:12px;font-weight:650;color:var(--muted);flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp602-search-icon{font-size:21px;color:var(--purple);line-height:1}
.mp602-external{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;font-weight:950;font-size:13px;flex:0 0 27px}
.mp602-external.google{background:#f2f2f2;color:#4285f4;font-family:Arial,sans-serif}
.mp602-external.youtube{background:#ff0033;color:#fff;font-size:11px}
.myday-greeting{font-size:clamp(20px,6vw,30px)!important;letter-spacing:-.6px!important}
.myday-clock{font-size:clamp(32px,9vw,46px)!important;max-width:100%;text-align:center!important;margin-left:auto!important;margin-right:auto!important}
.myday-alt{color:#fff!important}
.myday-next-prayer{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.mp602-prayer-times{display:inline-flex;gap:6px;margin-left:6px;flex-wrap:wrap;font-size:10px;font-weight:650;opacity:.9}
.mp602-prayer-times span{padding:2px 5px;border-radius:7px;background:rgba(255,255,255,.12)}
.v5-almanac strong{color:#111!important}
.v5-almanac p,.v5-almanac-date{color:#111!important}
body.dark .v5-almanac strong,body.dark .v5-almanac p,body.dark .v5-almanac-date{color:#fff!important}
.v5-almanac{background:linear-gradient(135deg,#cdb9ff,#9bd8d5)!important;border:none!important}
nav#bottom-nav button{color:var(--purple)!important;background:var(--surface)!important}
nav#bottom-nav button:nth-child(2){color:#3f7fbe!important}
nav#bottom-nav button:nth-child(3){color:#b36b45!important}
nav#bottom-nav button:nth-child(4){color:#5d9b70!important}
nav#bottom-nav button:nth-child(5){color:#8c62b8!important}
body.dark nav#bottom-nav button{background:var(--surface)!important}
.mp602-alarm-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.mp602-alarm-row label{font-size:11px;font-weight:800;color:var(--muted)}
.mp602-range{width:100%;accent-color:var(--purple)}
#mp602-test-tone{margin-bottom:8px}
@media(max-width:480px){.mp602-alarm-row{grid-template-columns:1fr}.mp602-prayer-times{display:flex;margin-left:0;width:100%}}