:root { --bg:#0c1423; --panel:#152136; --panel-soft:#192840; --line:#283951; --text:#f2f6ff; --muted:#9aa9be; --cyan:#62d5dc; --blue:#829cff; --green:#61d7a0; --amber:#f0b75c; --red:#f27f78; }
* { box-sizing:border-box; }
html,body { overflow-x:hidden; scrollbar-width:none; }
::-webkit-scrollbar { display:none; }
body { margin:0; background:#050914; color:var(--text); font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; }
button,input,select { font:inherit; }
button { color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.dev-shell { position:relative; width:min(100%,520px); min-height:100dvh; margin:auto; padding:0 15px calc(6.2rem + env(safe-area-inset-bottom)); background:radial-gradient(circle at 65% 0,#1c2c4c 0,transparent 32%),var(--bg); }
.dev-head { display:flex; height:68px; align-items:center; gap:10px; border-bottom:1px solid #ffffff10; }
.dev-logo { display:flex; align-items:center; gap:8px; color:#fff; text-decoration:none; }
.dev-logo>i { display:grid; width:35px; height:35px; place-items:center; border:1px solid #8aa5ff44; border-radius:11px; background:linear-gradient(145deg,#829cff,#506de4); color:white; font-size:17px; box-shadow:0 6px 18px #526fe640; }
.dev-logo span { font-size:13px; font-weight:850; letter-spacing:.04em; }
.dev-logo small { display:block; margin-top:3px; color:#9aafd7; font-size:7px; letter-spacing:.14em; }
.status { max-width:128px; overflow:hidden; margin-left:auto; color:#a4b4c8; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.status i { display:inline-block; width:6px; height:6px; margin-right:4px; border-radius:50%; background:var(--green); box-shadow:0 0 8px #61d7a088; }
.profile-button { display:grid; flex:none; width:30px; height:30px; place-items:center; border:1px solid #ffffff24; border-radius:50%; background:#263752; color:#dce6f6; font-size:11px; font-weight:700; }
.dev-hero { position:relative; isolation:isolate; display:flex; flex-direction:column; gap:17px; min-height:360px; overflow:hidden; margin:0 -15px; padding:25px 18px 16px; border-radius:0 0 22px 22px; background:linear-gradient(90deg,#0b1424f7 0%,#0b1424e3 43%,#0b14247d 100%),linear-gradient(0deg,#0b1424d9 0%,transparent 58%),url("assets/project-workspace-v1.png") 57% center/cover; }
.hero-copy { position:relative; z-index:1; max-width:23rem; }
.hero-copy>span,.section-heading small,.team-card>div>small { color:var(--cyan); font-size:7px; font-weight:800; letter-spacing:.16em; }
.hero-copy h1 { margin:12px 0 8px; color:#f5f8ff; font-size:29px; font-weight:780; line-height:1.26; letter-spacing:-.04em; text-shadow:0 5px 24px #0008; }
.hero-copy p { max-width:18rem; margin:0; color:#b8c6d9; font-size:10px; line-height:1.7; }
.hero-action { display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:9px 12px; border:1px solid #91a7ff67; border-radius:9px; background:#7188fa26; color:#e9efff; font-size:9px; font-weight:700; }
.hero-action i { color:var(--cyan); }
.hero-metrics { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:auto; }
.hero-metrics article { min-width:0; padding:10px 9px; border:1px solid #d9e5ff20; border-radius:11px; background:#0d192bcc; box-shadow:0 8px 24px #03081235; backdrop-filter:blur(12px); }
.hero-metrics small,.hero-metrics strong,.hero-metrics em { display:block; }
.hero-metrics small { overflow:hidden; color:#a9bad0; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.hero-metrics strong { margin:5px 0 4px; color:#f4f7ff; font-size:18px; line-height:1; }
.hero-metrics em { overflow:hidden; color:var(--green); font-size:6px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.hero-metrics em i { font-size:7px; }
.hero-metrics .metric-alert strong,.hero-metrics .metric-alert em { color:#ffaaa1; }
.quick-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-top:14px; }
.quick-actions button { min-width:0; min-height:74px; padding:9px 4px 8px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(155deg,#192740,#111b2d); color:#bdc9da; font-size:8px; }
.quick-actions button:active,.hero-action:active { transform:scale(.97); }
.quick-actions i { display:grid; width:34px; height:34px; margin:0 auto 6px; place-items:center; border:1px solid #839aff24; border-radius:10px; background:#829cff16; color:#91a8ff; font-size:16px; }
.quick-actions button:nth-child(2) i { color:var(--cyan); background:#62d5dc14; }
.quick-actions button:nth-child(3) i { color:var(--amber); background:#f0b75c14; }
.quick-actions button:nth-child(4) i { color:#bf9dff; background:#bf9dff14; }
.dev-section,.task-section,.milestone-section { padding-top:24px; scroll-margin-top:12px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:8px; margin-bottom:10px; }
.section-heading h2,.team-card h2 { margin:4px 0 0; color:#f0f4fd; font-size:16px; font-weight:750; }
.section-heading h2>b { display:inline-grid; min-width:19px; height:19px; margin-left:4px; place-items:center; border-radius:7px; background:#7e96ff20; color:#a7b8ff; font-size:10px; vertical-align:2px; }
.dev-section .section-heading>button { padding:7px 10px; border:1px solid #7087f467; border-radius:8px; background:#748bfa20; color:#cad5ff; font-size:8px; font-weight:700; }
.project-list { display:grid; gap:8px; }
.project-card { overflow:hidden; border:1px solid var(--line); border-radius:13px; background:linear-gradient(130deg,#18263d,#111b2d); box-shadow:0 8px 24px #02081330; }
.project-main { display:grid; grid-template-columns:38px minmax(0,1fr) 14px; align-items:center; gap:9px; width:100%; padding:11px 10px 10px; border:0; background:none; text-align:left; }
.project-icon { display:grid; width:38px; height:38px; place-items:center; border-radius:11px; font-size:17px; }
.project-icon.violet { background:#829cff20; color:#9cb0ff; }
.project-icon.cyan { background:#62d5dc18; color:var(--cyan); }
.project-icon.amber { background:#f0b75c19; color:var(--amber); }
.project-copy { display:grid; min-width:0; }
.project-meta { display:flex; align-items:center; justify-content:space-between; gap:5px; }
.project-meta small { overflow:hidden; color:#8696ad; font-size:6px; text-overflow:ellipsis; white-space:nowrap; }
.project-state { flex:none; padding:3px 5px; border-radius:5px; font-size:6px; font-weight:700; }
.project-state.live { background:#62d5dc18; color:#7ce1e5; }
.project-state.review { background:#829cff1b; color:#a7b7ff; }
.project-state.risk { background:#f0b75c1b; color:#f2c476; }
.project-copy>strong { overflow:hidden; margin-top:4px; color:#f0f4fd; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.project-subtitle { overflow:hidden; margin-top:3px; color:#8796ab; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.progress-line { display:block; height:4px; overflow:hidden; margin-top:8px; border-radius:5px; background:#27364e; }
.progress-line i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#748cff,#a3b3ff); }
.progress-line i.progress-cyan { background:linear-gradient(90deg,#43bfc8,#75e1df); }
.progress-line i.progress-amber { background:linear-gradient(90deg,#d99b42,#f2c777); }
.progress-copy { display:flex; justify-content:space-between; gap:4px; margin-top:4px; }
.progress-copy small { color:#8291a7; font-size:6px; }
.progress-copy small b { color:#dce5f4; }
.project-chevron { color:#71819a; font-size:10px; transition:transform .2s; }
.project-main[aria-expanded="true"] .project-chevron { transform:rotate(180deg); }
.project-detail { display:grid; gap:7px; padding:9px 12px 11px 57px; border-top:1px solid #ffffff0d; color:#9eacc0; font-size:7px; }
.project-detail span { display:flex; align-items:center; gap:6px; }
.project-detail i { color:var(--cyan); }
.project-form { display:grid; gap:9px; margin-bottom:9px; padding:12px; border:1px solid #829cff43; border-radius:12px; background:#141f32; }
.project-form[hidden],.project-detail[hidden] { display:none; }
.project-form label { display:grid; gap:5px; color:#a7b5c9; font-size:8px; }
.project-form input,.project-form select { min-width:0; width:100%; padding:8px 9px; border:1px solid #30405a; border-radius:7px; outline:none; background:#0b1423; color:#edf2ff; font-size:9px; }
.project-form input:focus,.project-form select:focus { border-color:#829cff; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.form-actions { display:flex; justify-content:flex-end; gap:7px; }
.form-actions button { padding:7px 10px; border:1px solid var(--line); border-radius:7px; background:#1a2940; color:#bdc9da; font-size:8px; }
.form-actions .submit-project { border-color:#7187f4; background:#748bfa; color:#fff; font-weight:700; }
.text-link { padding:4px 0; border:0; background:none; color:#a9b8ff; font-size:8px; }
.task-list { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#131e30; }
.task-row { display:grid; grid-template-columns:21px minmax(0,1fr) auto; align-items:center; gap:8px; width:100%; padding:10px 9px; border:0; border-bottom:1px solid #ffffff0d; background:transparent; text-align:left; }
.task-row:last-child { border-bottom:0; }
.task-check { display:grid; width:19px; height:19px; place-items:center; border:1px solid #465672; border-radius:6px; color:transparent; font-size:11px; }
.task-row>span:nth-child(2) { display:grid; gap:3px; min-width:0; }
.task-row strong { overflow:hidden; color:#dce5f3; font-size:8px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.task-row small { overflow:hidden; color:#8392a7; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.task-priority { padding:3px 5px; border-radius:5px; font-size:6px; font-weight:650; }
.task-priority.urgent { background:#f27f781a; color:#ff9d95; }
.task-priority.normal { background:#829cff18; color:#a9b8ff; }
.task-row.is-done .task-check { border-color:#5cc998; background:#5cc998; color:#0d1a20; }
.task-row.is-done strong { color:#8795a7; text-decoration:line-through; }
.task-row.is-done .task-priority { color:#79d9ae; background:#61d7a014; }
.week-label { padding:5px 7px; border:1px solid var(--line); border-radius:7px; color:#9cacc1; font-size:7px; }
.milestone-track { position:relative; display:grid; gap:0; padding:3px 9px; border:1px solid var(--line); border-radius:12px; background:#131e30; }
.milestone-track:before { position:absolute; top:20px; bottom:22px; left:43px; width:1px; background:#34445c; content:""; }
.milestone-track article { position:relative; display:grid; grid-template-columns:27px 9px minmax(0,1fr) auto; align-items:start; gap:8px; min-height:52px; padding:8px 0; }
.milestone-track time { display:grid; color:#e4ebf7; font-size:10px; font-weight:750; text-align:center; }
.milestone-track time span { color:#8392a7; font-size:6px; font-weight:500; }
.milestone-track article>i { z-index:1; width:8px; height:8px; margin-top:4px; border:2px solid #101a2a; border-radius:50%; background:#68d4d4; box-shadow:0 0 0 1px #68d4d455; }
.milestone-track article:nth-child(n+2)>i { background:#7488a5; box-shadow:0 0 0 1px #7488a544; }
.milestone-track article>div { display:grid; gap:3px; }
.milestone-track article>div strong { color:#dce5f3; font-size:8px; }
.milestone-track article>div small { color:#8493a8; font-size:6px; }
.milestone-track article>b { margin-top:2px; color:#75dcb0; font-size:6px; }
.milestone-track article>b.milestone-upcoming { color:#9baac0; }
.team-card { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:20px; padding:13px 12px; border:1px solid var(--line); border-radius:13px; background:linear-gradient(120deg,#182740,#121d30); scroll-margin-top:12px; }
.team-card h2 { font-size:13px; }
.team-card p { margin:4px 0 0; color:#8999ae; font-size:7px; }
.team-avatars { display:flex; align-items:center; padding-left:5px; }
.team-avatars>span,.team-avatars>b { display:grid; width:23px; height:23px; margin-left:-5px; place-items:center; border:2px solid #17243a; border-radius:50%; background:#54739a; color:#fff; font-size:7px; font-weight:700; }
.team-avatars>span:nth-child(2) { background:#a76f61; }.team-avatars>span:nth-child(3) { background:#5e897a; }.team-avatars>span:nth-child(4) { background:#8373a8; }
.team-avatars>b { background:#293a54; color:#c5d2e5; font-size:6px; }
.team-avatars button { display:grid; width:24px; height:24px; margin-left:4px; place-items:center; border:1px solid #344661; border-radius:50%; background:#1b2b42; color:#aebdff; font-size:9px; }
.app-footer { padding:16px 2px 3px; color:#91a0b4; font-size:8px; }
.app-footer span { display:block; margin-top:4px; color:#687990; font-size:7px; }
.dev-nav { position:fixed; z-index:8; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(4,1fr); width:min(100%,520px); min-height:4.4rem; margin:auto; padding:.55rem .5rem max(.65rem,env(safe-area-inset-bottom)); border-top:1px solid #28364b; background:#0b1220f5; backdrop-filter:blur(16px); }
.dev-nav button { display:grid; gap:.22rem; min-height:2.9rem; place-items:center; border:0; background:transparent; color:#8090a8; font-size:.69rem; font-weight:600; line-height:1.2; }
.dev-nav i { font-size:1.3rem; }
.dev-nav button.active { color:#8fe3df; }
.dev-toast { position:fixed; z-index:20; bottom:calc(5.2rem + env(safe-area-inset-bottom)); left:50%; max-width:calc(100% - 2rem); padding:9px 13px; border:1px solid #3a4a63; border-radius:9px; background:#17253a; color:#fff; font-size:9px; opacity:0; pointer-events:none; transform:translate(-50%,9px); transition:.2s; white-space:nowrap; }
.dev-toast.show { opacity:1; transform:translate(-50%,0); }
@media (min-width:600px) {
  html { min-height:100%; }
  body { display:grid; min-height:100dvh; place-items:center; margin:0; padding:0 1.5rem; background:radial-gradient(ellipse 56% 78% at 50% 42%,#293b5a 0%,#17243b 44%,#080d18 100%); }
  .dev-shell { width:min(100%,26rem); height:100dvh; min-height:0; overflow-x:hidden; overflow-y:auto; border:.625rem solid #151b26; border-radius:2.2rem; box-shadow:0 1.8rem 3.5rem #050914aa; scrollbar-width:none; }
  .dev-shell::-webkit-scrollbar { display:none; }
  .dev-nav { width:min(calc(100% - 3.75rem),24.75rem); bottom:.625rem; border-radius:0 0 1.5rem 1.5rem; }
  .dev-toast { bottom:5.9rem; }
}
@media (max-width:360px) {
  .dev-shell { padding-right:11px; padding-left:11px; }
  .dev-hero { margin-right:-11px; margin-left:-11px; padding-right:14px; padding-left:14px; }
  .hero-copy h1 { font-size:26px; }
  .hero-metrics { gap:5px; }
  .hero-metrics article { padding-right:6px; padding-left:6px; }
  .hero-metrics strong { font-size:16px; }
  .project-main { grid-template-columns:34px minmax(0,1fr) 12px; gap:7px; padding-right:8px; padding-left:8px; }
  .project-icon { width:34px; height:34px; }
  .project-detail { padding-left:49px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }