:root{
    --navy:#0F3D3E; --navy-dark:#0A2A2B; --navy-soft:#134C4D;
    --gold:#C9A227; --gold-soft:#E4C868;
    --paper:#FAF8F3; --paper-dim:#F1EEE5;
    --ink:#1C2321; --ink-soft:#5B6360;
    --line:#DDD8C8;
    --red:#B23A2E; --red-bg:#F7E5E2;
    --amber:#B5810A; --amber-bg:#FBF0D4;
    --green:#1E7A49; --green-bg:#E1F0E5;
    --warn:#1978B5; --warn-bg:#DCEFFA;
    --cancelled:#6B7280; --cancelled-bg:#E5E7EB;
    --suspended:#7C4FA0; --suspended-bg:#EDE3F5;
    --ontime:#0E7C86; --ontime-bg:#DCF3F3; --latecomplete:#B5810A;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:'IBM Plex Sans',sans-serif;-webkit-font-smoothing:antialiased;}
  .wrap{max-width:1220px;margin:0 auto;padding:0 28px 80px;}

  header{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-dark) 100%);color:var(--paper);padding:26px 0 0;position:relative;overflow:hidden;}
  header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:repeating-linear-gradient(90deg,var(--gold) 0 18px,transparent 18px 26px);opacity:.9;}
  .header-top{max-width:1220px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:center;gap:16px;}
  .logo-chip{background:#fff;border-radius:12px;padding:18px 28px;display:flex;align-items:center;box-shadow:0 6px 20px rgba(0,0,0,.22);}
  .logo-chip img{height:78px;display:block;}
  .header-inner{max-width:1220px;margin:0 auto;padding:18px 28px 26px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;}
  .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 10px;}
  h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(22px,3.4vw,34px);margin:0;line-height:1.1;letter-spacing:-.01em;white-space:nowrap;}
  .active-project-badge{display:block;margin-top:12px;background:none;color:var(--gold);font-family:'Fraunces',serif;font-weight:600;font-size:clamp(20px,2.6vw,28px);letter-spacing:.01em;}
  .sub{font-size:14px;color:#CFE0D9;max-width:560px;line-height:1.5;}
  .seal{display:flex;align-items:center;gap:18px;flex-shrink:0;}
  .seal-ring{position:relative;width:220px;height:220px;}
  .seal-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
  .seal-ring .pct{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
  .seal-ring .pct b{font-family:'Fraunces',serif;font-size:50px;font-weight:600;line-height:1;}
  .seal-ring .pct span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#BFD3CC;margin-top:6px;}

  /* PROJECT BAR */
  .project-bar{max-width:1220px;margin:0 auto;padding:0 28px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .project-bar label{
    font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--paper);font-weight:700;
    border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.07);
    padding:8px 14px;border-radius:6px;display:inline-flex;align-items:center;
  }
  .project-bar select{
    background:rgba(255,255,255,.08); color:var(--paper); border:1px solid rgba(255,255,255,.25);
    padding:8px 12px; border-radius:6px; font-family:'IBM Plex Sans',sans-serif; font-size:13.5px; font-weight:500; max-width:260px;
  }
  .project-bar select option{ color:#111; }
  .pb-btn{
    font-family:'IBM Plex Sans',sans-serif; font-size:12px; font-weight:600; padding:7px 12px; border-radius:6px;
    border:1px solid rgba(255,255,255,.25); background:transparent; color:var(--paper); cursor:pointer; transition:.15s;
  }
  .pb-btn:hover{ background:rgba(255,255,255,.1); }
  .pb-btn.gold{ background:var(--gold); border-color:var(--gold); color:var(--navy-dark); }
  .pb-btn.gold:hover{ background:var(--gold-soft); }
  .pb-btn.green{ border-color:rgba(78,178,128,.6); color:#BFE8D2; }
  .pb-btn.green:hover{ background:rgba(30,122,73,.22); }
  .pb-btn.red{ border-color:rgba(212,110,96,.65); color:#F6CFC9; }
  .pb-btn.red:hover{ background:rgba(178,58,46,.22); }

  .tabbar{max-width:1220px;margin:0 auto;padding:0 28px;display:flex;gap:4px;margin-top:6px;}
  .tabbar button{font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:13.5px;color:var(--ink-soft);background:var(--paper-dim);border:1px solid var(--line);border-bottom:none;padding:11px 22px;border-radius:8px 8px 0 0;cursor:pointer;transition:.15s;position:relative;top:1px;}
  .tabbar button.active{background:var(--paper);color:var(--navy);border-bottom:1px solid var(--paper);}
  .tabbar button:hover{color:var(--navy);}

  .panel{display:none;border-top:1px solid var(--line);padding-top:28px;}
  .panel.active{display:block;}

  .stats{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:24px;border-radius:8px;overflow:hidden;}
  .stat{background:var(--paper);padding:16px 20px;}
  .stat .n{font-family:'Fraunces',serif;font-size:24px;font-weight:600;}
  .stat .l{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);margin-top:3px;}
  .stat.red .n{color:var(--red);} .stat.amber .n{color:var(--amber);} .stat.green .n{color:var(--green);}
  .stat.cancelled .n{color:var(--cancelled);} .stat.suspended .n{color:var(--suspended);}

  .segbar{display:flex;height:10px;border-radius:3px;overflow:hidden;margin:0 0 2px;border:1px solid var(--line);}
  .segbar>div{transition:width .35s ease;}
  .seg-red{background:var(--red);} .seg-amber{background:var(--amber);} .seg-green{background:var(--green);}
  .seg-cancelled{background:var(--cancelled);} .seg-suspended{background:var(--suspended);}
  .segbar-legend{display:flex;gap:18px;font-size:11.5px;color:var(--ink-soft);margin-bottom:32px;flex-wrap:wrap;}
  .segbar-legend span{display:inline-flex;align-items:center;gap:6px;}
  .segbar-legend i{width:9px;height:9px;border-radius:2px;display:inline-block;}

  .rank-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:10px;}
  .rank-card{border-radius:12px;padding:26px 22px 20px;position:relative;overflow:hidden;border:1.5px solid var(--line);background:var(--paper);}
  .rank-card::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;}
  .rank-card--advanced{background:var(--green-bg);border-color:var(--green);}
  .rank-card--advanced::before{background:var(--green);}
  .rank-card--late{background:var(--red-bg);border-color:var(--red);}
  .rank-card--late::before{background:var(--red);}
  .rank-card--soon{background:var(--warn-bg);border-color:var(--warn);}
  .rank-card--soon::before{background:var(--warn);}
  .rank-card-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
  .rank-title-block{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;}
  .rank-sub-line{font-family:'IBM Plex Sans',sans-serif;font-size:11px;font-weight:400;color:var(--ink-soft);margin-top:2px;line-height:1.2;}
  .rank-icon-wrap{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0;}
  .rank-icon{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(15,61,62,.1);}
  .rank-icon svg{width:24px;height:24px;}
  .rank-icon-bar{width:30px;height:4px;border-radius:3px;}
  .rank-icon.advanced{background:var(--green);color:#fff;}
  .rank-icon-wrap.advanced .rank-icon-bar{background:var(--green);}
  .rank-icon.late{background:var(--red);color:#fff;}
  .rank-icon-wrap.late .rank-icon-bar{background:var(--red);}
  .rank-icon.soon{background:var(--warn);color:#fff;}
  .rank-icon-wrap.soon .rank-icon-bar{background:var(--warn);}
  .rank-card h3{font-family:'Fraunces',serif;font-size:19px;margin:0;font-weight:600;text-transform:uppercase;letter-spacing:.02em;line-height:1.2;}
  .rank-row{display:grid;grid-template-columns:18px 1fr 78px;gap:10px;align-items:center;margin-bottom:12px;}
  .rank-row .idx{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-soft);}
  .rank-row .info .t{font-size:12px;font-weight:500;margin-bottom:5px;line-height:1.3;}
  .rank-tag{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;padding:2px 8px;border-radius:8px;display:inline-block;}
  .rank-tag.never{background:var(--red-bg);color:var(--red);}
  .rank-tag.started{background:#F3D8C4;color:#8A3B12;}
  .rank-tag.soonpct{background:var(--warn-bg);color:var(--warn);}
  .rank-bar-bg{height:7px;background:rgba(255,255,255,.65);border-radius:4px;overflow:hidden;}
  .rank-bar{height:100%;border-radius:4px;}
  .rank-row .val{font-family:'IBM Plex Mono',monospace;font-size:10px;line-height:1.3;text-align:right;font-weight:600;}
  .empty-msg{font-size:12.5px;color:var(--ink-soft);font-style:italic;padding:8px 0;}

  @media(max-width:900px){.rank-grid{grid-template-columns:1fr;}}

  .controls{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 18px;}
  .filters{display:flex;gap:8px;flex-wrap:wrap;}
  .filters button{font-size:12.5px;font-weight:500;padding:7px 14px;border-radius:20px;border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);cursor:pointer;transition:.15s;}
  .filters button:hover{border-color:var(--navy);color:var(--navy);}
  .filters button.active{background:var(--navy);border-color:var(--navy);color:var(--paper);}
  .toolbar-right{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
  .btn{font-family:'IBM Plex Sans',sans-serif;font-size:12.5px;font-weight:600;padding:9px 16px;border-radius:6px;border:1px solid var(--line);background:var(--paper);color:var(--navy);cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:6px;}
  .btn:hover{border-color:var(--navy);background:var(--paper-dim);}
  .btn-primary{background:var(--navy);color:var(--paper);border-color:var(--navy);}
  .btn-primary:hover{background:var(--navy-soft);}
  .btn-gold{background:var(--gold);color:var(--navy-dark);border-color:var(--gold);}
  .btn-gold:hover{background:var(--gold-soft);}

  .form-card{background:var(--paper-dim);border:1px solid var(--line);border-radius:10px;padding:22px 24px;margin-bottom:24px;display:none;}
  .form-card.open{display:block;}
  .form-card h3{font-family:'Fraunces',serif;font-size:17px;margin:0 0 16px;}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .form-grid .full{grid-column:1/-1;}
  .field label{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:5px;}
  .field-ctrl,.field-ctrl-static{display:inline-flex;gap:4px;flex-shrink:0;}
  .field-ctrl button,.field-ctrl-static button{width:18px;height:18px;border-radius:4px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);font-size:10px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-transform:none;letter-spacing:0;}
  .field-ctrl button:hover,.field-ctrl-static button:hover{border-color:var(--navy);color:var(--navy);}
  .field-ctrl button.del:hover,.field-ctrl-static button.del:hover{border-color:var(--red);color:var(--red);}
  .custom-field-row input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:6px;font-family:'IBM Plex Sans',sans-serif;font-size:13.5px;background:#fff;color:var(--ink);}
  .field input, .field select{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:6px;font-family:'IBM Plex Sans',sans-serif;font-size:13.5px;background:#fff;color:var(--ink);}
  .field input:focus, .field select:focus{outline:2px solid var(--navy-soft);outline-offset:1px;}
  .form-actions{display:flex;gap:10px;margin-top:18px;}

  .task{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:6px;padding:16px 20px;margin-bottom:12px;display:grid;grid-template-columns:40px 1fr 300px 70px;gap:16px;align-items:center;}
  .task.st-red{border-left-color:var(--red);} .task.st-amber{border-left-color:var(--amber);} .task.st-green{border-left-color:var(--green);}
  .task.st-warn{border-left-color:var(--warn);}
  .task.st-cancelled{border-left-color:var(--cancelled);} .task.st-suspended{border-left-color:var(--suspended);}
  .task-num{font-family:'Fraunces',serif;font-size:14px;font-weight:600;color:var(--navy);width:34px;height:34px;border-radius:50%;background:var(--paper-dim);display:flex;align-items:center;justify-content:center;}
  .task-main .title{font-size:14.5px;font-weight:500;line-height:1.4;margin-bottom:7px;}
  .task-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-soft);align-items:center;}
  .task-completion-line{margin-top:7px;font-size:11.5px;}
  .task-meta b{color:var(--ink);font-weight:600;}
  .task-meta .tag{font-family:'IBM Plex Mono',monospace;font-size:10px;background:var(--paper-dim);padding:2px 7px;border-radius:3px;color:var(--navy-soft);}
  .task-meta .proj-tag{background:#E7EEEC;color:var(--navy);font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:10.5px;padding:2px 8px;border-radius:10px;}
  .task-meta .late{color:var(--red);font-weight:600;background:var(--red-bg);padding:2px 8px;border-radius:10px;}
  .task-meta .warnbadge{color:var(--warn);font-weight:600;background:var(--warn-bg);padding:2px 8px;border-radius:10px;}
  .ontimebadge{color:var(--ontime);font-weight:600;background:var(--ontime-bg);padding:2px 8px;border-radius:10px;}
  .latecompletebadge{color:var(--latecomplete);font-weight:600;background:var(--amber-bg);padding:2px 8px;border-radius:10px;}
  .task-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
  .pct-buttons{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:280px;}
  .pct-buttons button.special{font-size:9.5px;padding:0 8px;}
  .pct-buttons button.special.cancel{color:var(--cancelled);border-color:var(--cancelled);}
  .pct-buttons button.special.cancel.sel{background:var(--cancelled);border-color:var(--cancelled);color:#fff;}
  .pct-buttons button.special.suspend{color:var(--suspended);border-color:var(--suspended);}
  .pct-buttons button.special.suspend.sel{background:var(--suspended);border-color:var(--suspended);color:#fff;}
  .pct-buttons button{width:36px;height:28px;border-radius:5px;border:1px solid var(--line);background:var(--paper-dim);font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:.12s;}
  .pct-buttons button:hover{border-color:var(--navy);color:var(--navy);}
  .pct-buttons button.sel{background:var(--navy);border-color:var(--navy);color:var(--paper);}
  .status-pill{font-size:11px;font-weight:600;padding:5px 12px;border-radius:20px;white-space:nowrap;}
  .status-pill.red{background:var(--red-bg);color:var(--red);} .status-pill.amber{background:var(--amber-bg);color:var(--amber);} .status-pill.green{background:var(--green-bg);color:var(--green);}
  .status-pill.cancelled{background:var(--cancelled-bg);color:var(--cancelled);} .status-pill.suspended{background:var(--suspended-bg);color:var(--suspended);}
  .row-actions{display:flex;flex-direction:column;gap:6px;align-items:center;}
  .icon-btn{width:30px;height:30px;border-radius:6px;border:1px solid var(--line);background:var(--paper);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);transition:.12s;}
  .icon-btn:hover{border-color:var(--navy);color:var(--navy);}
  .icon-btn.danger:hover{border-color:var(--red);color:var(--red);}

  .search-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
  .search-row input, .search-row select{padding:9px 12px;border:1px solid var(--line);border-radius:6px;font-family:'IBM Plex Sans',sans-serif;font-size:13px;background:#fff;}
  .search-row input{flex:1;min-width:200px;}

  footer{text-align:center;font-size:11.5px;color:var(--ink-soft);padding:30px 0 10px;}
  .save-note{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy);color:var(--paper);font-size:12.5px;padding:9px 18px;border-radius:20px;opacity:0;transition:.25s;pointer-events:none;box-shadow:0 6px 20px rgba(0,0,0,.18);z-index:50;}
  .save-note.show{opacity:1;transform:translateX(-50%) translateY(0);}

  @media(max-width:760px){
    .task{grid-template-columns:1fr;}
    .task-right{align-items:flex-start;}
    .row-actions{flex-direction:row;}
    .stats{grid-template-columns:repeat(3,1fr);}
    .header-inner{flex-direction:column;align-items:flex-start;}
    .form-grid{grid-template-columns:1fr;}
  }