:root{font-family:'IBM Plex Sans Arabic',Tahoma,Arial,sans-serif;color:#183f4a;background:#edf5f1;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 15% 10%,#a8d9df 0,transparent 28%),#edf5f1}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}a{color:inherit}#app{min-height:100vh}.loading{padding:4rem;text-align:center;color:#506e77}
.shell{max-width:1440px;margin:auto;padding:0 30px 70px}.topbar{height:86px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #bad0cd;gap:14px}.brand{display:flex;align-items:center;gap:13px;font-size:20px;font-weight:700}.brandmark{width:38px;height:38px;border-radius:12px;background:#368f98;color:#fffaf0;display:grid;place-items:center;font-weight:800}.top-actions{display:flex;gap:10px}.btn{border:1px solid #b5ccc9;border-radius:12px;background:#eff8f6;color:#214e58;padding:10px 17px;font-weight:600}.btn:hover{background:#dcefeb}.btn.primary{background:#247d88;border-color:#247d88;color:#ffffff}.btn.primary:hover{background:#226b77}.btn.ghost{background:transparent}.btn.danger{color:#a63f4e;border-color:#d7a1a7}.iconbtn{border:0;background:transparent;color:#55747c;font-size:18px}.intro{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:48px 0 28px}.eyebrow{color:#246f7a;font-size:13px;letter-spacing:.08em;font-weight:700}.intro h1,.detail-head h1{font-size:clamp(28px,4vw,47px);line-height:1.25;margin:8px 0}.muted{color:#57737a}.intro p{margin:0}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:28px}.stat,.panel,.card{background:#fffdf6;border:1px solid #c6d8d1;border-radius:20px}.stat{padding:22px}.stat b{display:block;font-size:28px;margin-top:4px}.stat span{color:#57737a;font-size:13px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:22px 0 16px}.section-head h2{font-size:20px;margin:0}.controls{display:flex;gap:10px}.search,.select,input,textarea{background:#fffef9;color:#193e49;border:1px solid #b5ccc9;border-radius:11px;padding:11px 13px;outline:none}.search:focus,.select:focus,input:focus,textarea:focus{border-color:#247d88;box-shadow:0 0 0 3px #247d8822}.search{min-width:220px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.card{padding:23px;cursor:pointer;transition:transform .15s,border-color .15s}.card:hover{transform:translateY(-3px);border-color:#438e96}.cardtop{display:flex;justify-content:space-between;align-items:start;gap:10px}.card h3{font-size:20px;margin:15px 0 7px}.card p{color:#4e6c76;font-size:14px;min-height:42px;margin:0 0 24px;line-height:1.7}.badge{display:inline-block;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:700;background:#dae9ed;color:#305e71}.badge.active{background:#d7ece6;color:#246357}.badge.done{background:#dcebd8;color:#306544}.badge.blocked{background:#f4dfdf;color:#974451}.badge.review{background:#f0e4ca;color:#7a5a27}.badge.paused{background:#e5e2ef;color:#635578}.pct{font-size:30px;font-weight:700}.bar{height:8px;border-radius:20px;background:#dce8e6;overflow:hidden}.fill{height:100%;background:linear-gradient(90deg,#247d88,#8bc4bd);border-radius:20px}.cardfoot{display:flex;justify-content:space-between;align-items:center;color:#57737a;font-size:13px;margin-top:16px}.empty{border:1px dashed #9abdb9;border-radius:20px;padding:55px;text-align:center;color:#57737a;grid-column:1/-1}.empty h3{color:#193f49;margin:0 0 8px}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}.login{width:min(430px,100%);background:#fffdf5;border:1px solid #c5d6d0;border-radius:24px;padding:36px;box-shadow:0 25px 80px #23556622}.login .brand{margin-bottom:42px}.login h1{margin:0 0 6px;font-size:31px}.login p{color:#55747b;margin:0 0 27px}.field{display:grid;gap:7px;margin-bottom:18px}.field label{font-size:13px;color:#466771;font-weight:600}.field input,.field textarea,.field select{width:100%}.field textarea{min-height:98px;resize:vertical}.login .btn{width:100%;margin-top:8px}.error{color:#a1444d;min-height:22px;font-size:13px}.formhint{color:#5b7479;font-size:12px;line-height:1.6}
.back{display:inline-flex;align-items:center;gap:8px;background:none;border:0;color:#52747b;padding:25px 0 0}.back:hover{color:#fff}.detail-head{display:flex;align-items:start;justify-content:space-between;gap:15px;padding:28px 0 22px}.detail-head p{color:#536e77;max-width:780px;line-height:1.8}.detail-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:18px}.panel{padding:25px;margin-bottom:18px}.panel h2{margin:0 0 22px;font-size:19px}.progress-line{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px}.progress-line strong{font-size:42px}.milestone{display:flex;align-items:center;gap:13px;padding:13px 0;border-top:1px solid #ceddd8}.milestone:first-of-type{border-top:0}.check{height:22px;width:22px;border:1px solid #8badab;border-radius:6px;display:grid;place-items:center;color:#247164;flex:none}.check.done{background:#d7ece6;border-color:#3d8b7c}.milestone .date{margin-right:auto;color:#55747b;font-size:12px}.meta{display:grid;grid-template-columns:1fr 1fr;gap:18px}.meta span{display:block;color:#54717a;font-size:12px}.meta b{display:block;font-weight:600;margin-top:5px}.note{background:#eef5ee;border-radius:13px;padding:15px;color:#3e626e;line-height:1.7;white-space:pre-wrap}.history{display:grid;gap:10px}.history-row{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid #cbdcd7;padding-top:10px;color:#56747b;font-size:13px}
.modalcover{position:fixed;inset:0;background:#2346529e;z-index:20;display:grid;place-items:center;padding:15px}.modal{width:min(800px,100%);max-height:92vh;overflow:auto;background:#fffdf6;border:1px solid #bad0ca;border-radius:22px;padding:25px}.modalheader{display:flex;justify-content:space-between;align-items:start;gap:10px}.modalheader h2{margin:0 0 22px}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.full{grid-column:1/-1}.milestone-edit{display:grid;grid-template-columns:auto minmax(0,1fr) 80px 125px auto;gap:8px;align-items:center;margin-bottom:9px}.milestone-edit input[type=checkbox]{width:20px;height:20px;accent-color:#368f98}.milestone-edit input{min-width:0}.modalactions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}.small{font-size:12px;padding:7px 11px}.notice{position:fixed;bottom:22px;left:22px;background:#e7f2e7;color:#224f49;border:1px solid #81b1a4;border-radius:12px;padding:11px 16px;z-index:30}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}.detail-layout{grid-template-columns:1fr}}
@media(max-width:620px){.shell{padding:0 16px 40px}.topbar{height:72px}.brand{font-size:16px}.top-actions .btn{font-size:11px;padding:7px}.intro{display:block;padding:32px 0 22px}.intro .btn{margin-top:20px}.stats{gap:8px}.stat{padding:16px}.grid{grid-template-columns:1fr}.section-head{display:block}.controls{margin-top:12px}.search{min-width:0;width:100%}.detail-head{display:block}.detail-head .btn{margin-top:10px}.formgrid{grid-template-columns:1fr}.milestone-edit{grid-template-columns:auto 1fr auto}.milestone-edit .weight,.milestone-edit .due{grid-column:2}.modal{padding:17px}.meta{grid-template-columns:1fr 1fr}}
.status-chart{display:grid;grid-template-columns:1fr 1.5fr;gap:30px;align-items:center}.status-chart h2{font-size:22px;margin:5px 0}.status-chart p{margin:0}.chart-rows{display:grid;gap:11px}.chart-row{display:grid;grid-template-columns:110px 1fr 25px;gap:10px;align-items:center;font-size:13px;color:#526f77}.chart-row .bar{height:9px}.chart-row b{text-align:left;color:#22434e}.chart-row:nth-child(2) .fill{background:#e6b87d}.chart-row:nth-child(3) .fill{background:#ee8998}.chart-row:nth-child(4) .fill{background:#84a9d4}.chart-row:nth-child(5) .fill{background:#ad9fdc}.chart-row:nth-child(6) .fill{background:#306544}@media(max-width:800px){.status-chart{grid-template-columns:1fr}}@media(max-width:420px){.chart-row{grid-template-columns:90px 1fr 20px;font-size:11px}}
.metric{padding:14px 0;border-top:1px solid #c5d8d3}.metric:first-of-type{border-top:0}.metric .progress-line{margin-bottom:8px}.metric .formhint{margin-top:6px}.metric-edit{display:grid;grid-template-columns:minmax(0,2fr) 90px 90px 140px auto;gap:8px;align-items:center;margin-bottom:8px}.metric-edit input{min-width:0;width:100%}@media(max-width:700px){.metric-edit{grid-template-columns:1fr 1fr auto}.metric-edit .label{grid-column:1/-1}.metric-edit .observed{grid-column:1/3}}

.project-tools{display:flex;flex-wrap:wrap;gap:10px}.project-tools .btn{flex:1 1 180px}.check{background:transparent}.brand>span:last-child{overflow-wrap:anywhere}@media(max-width:620px){.topbar{height:auto;min-height:80px;flex-wrap:wrap;padding:12px 0}.brand{font-size:15px}}

.card-actions{display:flex;gap:7px;margin-top:20px;flex-wrap:wrap}.control-panel{border-color:#94bdb4}.resource{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:15px 0;border-top:1px solid #c4d9d3}.resource small,.control-history small{display:block;margin:6px 0;color:#57737b}.resource-actions{display:flex;gap:8px;flex-wrap:wrap}.resources{margin:20px 0}.workflow-choice{display:flex;gap:10px;align-items:center;padding:10px;border-bottom:1px solid #c4d9d3}.workflow-choice small{display:block;color:#54717a}#workflow-picker{max-height:300px;overflow:auto;margin:18px 0}.connection-list{margin-bottom:24px}.notice-inline{padding:14px;background:#f3ead6;border-radius:12px}.control-history{max-height:340px;overflow:auto}.resource a{text-decoration:none}@media(max-width:620px){.resource{display:block}.resource-actions{margin-top:12px}.top-actions{flex-wrap:wrap}}

/* Shore palette, light surfaces and slow sea motion. */
:root{color-scheme:light}body{background:linear-gradient(180deg,#d8edf2 0,#eff7f4 48%,#f5ecda 100%);color:#183f4a}#app{position:relative;z-index:1}.shore-scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}.shore-scene svg{width:100%;height:100%;opacity:.65}.shore-wave{transform-origin:center;animation:shore-drift 24s ease-in-out infinite alternate}.shore-wave.second{animation-duration:33s;animation-direction:alternate-reverse}.sun-glow{animation:sun-breathe 20s ease-in-out infinite alternate}@keyframes shore-drift{from{transform:translateX(-1%) translateY(0)}to{transform:translateX(1%) translateY(9px)}}@keyframes sun-breathe{from{opacity:.6}to{opacity:.9}}
.shell{padding-bottom:110px}.topbar{border-bottom-color:#99bdbe80;min-height:90px;height:auto;padding:16px 0;flex-wrap:wrap}.brandmark{background:linear-gradient(145deg,#277f8c,#66aeb0);border-radius:14px;box-shadow:0 4px 14px #377e8620}.top-actions{flex-wrap:wrap}.brand{letter-spacing:-.02em}.intro{padding:45px 28px;margin:24px 0;background:linear-gradient(110deg,#ffffffbb,#eff9f7b8);border:1px solid #ffffffc9;border-radius:28px;box-shadow:0 10px 35px #31737a08}.intro h1{color:#1d5965}.intro .eyebrow::before{content:'≈';font-size:24px;margin-left:9px}.stat,.panel,.card{background:#fffdf5ed;border-color:#c6d8d1a8;box-shadow:0 9px 26px #2c667009;border-radius:22px}.stat{background:#ffffffbd}.stat b{color:#286b75}.card:hover{box-shadow:0 16px 36px #31717b15;transform:translateY(-3px)}.card h3{color:#25515d}.card p{line-height:1.85}.btn{transition:background .2s,box-shadow .2s}.btn.primary{box-shadow:0 4px 12px #247d8818}.btn.ghost:hover{background:#e0efea}.bar{background:#dae8e3}.fill{background:linear-gradient(90deg,#277e8b,#87c5bc)}.status-chart{background:linear-gradient(115deg,#fffcf2ed,#e8f4efed)}.chart-row:nth-child(2) .fill{background:#bfa36c}.chart-row:nth-child(3) .fill{background:#bb7580}.chart-row:nth-child(4) .fill{background:#759db8}.chart-row:nth-child(5) .fill{background:#998caf}.chart-row:nth-child(6) .fill{background:#6caa87}.note{border:1px solid #d5e2d6;background:#f1f6ed}.modal{box-shadow:0 25px 90px #25495333}.back:hover{color:#216373}.login-wrap{padding:100px 20px 110px}.login{background:#fffdf5ed;border-color:#ffffffd9;box-shadow:0 25px 80px #2a627827}.login h1{color:#245a64}.login .brand{margin-bottom:34px}.login p{line-height:1.8}.check.done{color:#23685b}.formhint{line-height:1.8}.empty{background:#fffdf5b8}.notice{bottom:104px}.music-player{position:fixed;bottom:18px;left:22px;z-index:15;display:flex;align-items:center;gap:14px;padding:11px 16px;border:1px solid #bbd2cc;background:#fffdf4f2;backdrop-filter:blur(14px);border-radius:20px;box-shadow:0 8px 30px #215c741c;color:#245460}.music-toggle{display:flex;gap:10px;align-items:center;border:0;background:transparent;color:#245460;padding:3px;text-align:right}.music-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#e0efe9;color:#236a76;font-size:18px}.music-copy strong{font-size:13px;display:block}.music-copy small{display:block;color:#607c81;font-size:11px;margin-top:3px}.music-player input[type=range]{width:80px;accent-color:#287e89;padding:0;border:0;box-shadow:none;background:transparent}.music-player label{font-size:11px;color:#5e777b}.music-volume{display:grid;gap:3px}.music-toggle:focus-visible{outline:2px solid #287e89;outline-offset:5px;border-radius:12px}.playing .music-icon{background:#287e89;color:#fff}.music-error{color:#a1444d;font-size:11px;max-width:160px}
@media(prefers-reduced-motion:reduce){.shore-wave,.sun-glow{animation:none}.card,.btn{transition:none}}
@media(max-width:620px){.intro{padding:28px 20px;margin:20px 0}.shell{padding-bottom:130px}.music-player{left:12px;right:12px;bottom:12px;justify-content:space-between;gap:10px}.music-player input[type=range]{width:68px}.brand{font-size:16px}.notice{left:12px;bottom:105px}.topbar{padding:14px 0}.section-head .controls{flex-wrap:wrap}.controls .select{max-width:100%}}

.shore-photo{background:linear-gradient(180deg,#eaf6f34d,#eff7f4c9 72%,#f6efddeb),url('/images/beach.jpeg') center/cover no-repeat}.beach-banner{height:260px;margin:26px 0 0;border-radius:24px;overflow:hidden;position:relative;border:1px solid #ffffffb0;box-shadow:0 12px 35px #28576014}.beach-banner>img{width:100%;height:100%;object-fit:cover;object-position:center 55%;display:block}.beach-caption{position:absolute;bottom:18px;right:22px;background:#fffdf1e6;color:#24515c;padding:12px 20px;border-radius:14px;font-size:17px;font-weight:600;backdrop-filter:blur(8px)}.intro{margin-top:18px;padding-top:30px;padding-bottom:30px}.project-art{margin:0 0 24px;border-radius:24px;overflow:hidden;border:1px solid #ccdfd6;background:#edf5f0}.project-art img{display:block;width:100%;height:280px;object-fit:cover;object-position:center}.card-art{width:calc(100% + 46px);margin:-23px -23px 20px;height:155px;object-fit:cover;border-radius:21px 21px 0 0;display:block}.login{background:#fffdf5f0}.stat,.panel,.card{background:#fffdf5f5}.topbar{background:#eff7f4c9;padding-inline:15px;border-radius:0 0 18px 18px}.project-art+ .detail-layout{margin-top:6px}@media(max-width:620px){.beach-banner{height:210px;margin-top:18px}.beach-caption{font-size:13px;right:12px;bottom:12px;padding:10px 13px}.project-art img{height:220px}.card-art{height:170px}.topbar{padding-inline:8px}}

.project-art img{object-fit:contain;background:linear-gradient(120deg,#edf6f1,#d7e7e3)}.detail-head{background:#fffdf2e6;border:1px solid #ffffffa8;border-radius:22px;padding:25px;margin:18px 0 20px}