:root{
  --navy:#0b456f;--blue:#0f72a9;--sky:#eaf5fb;--line:#d7e5ee;--ink:#163a55;
  --muted:#71879a;--bg:#f3f8fb;--white:#fff;--orange:#ef7d14;--green:#0d9660;
  --red:#d94249;--amber:#d49400;--shadow:0 12px 34px rgba(20,67,96,.08)
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,"Segoe UI",Tahoma,sans-serif;color:var(--ink);background:var(--bg)}
button,input,select,textarea{font:inherit}.hidden{display:none!important}
button{cursor:pointer}.toast-host{position:fixed;z-index:9999;top:18px;left:50%;transform:translateX(-50%);display:grid;gap:8px;width:min(92vw,580px)}
.toast{padding:12px 15px;border-radius:12px;color:#fff;background:#184f73;box-shadow:0 15px 35px rgba(0,0,0,.18);font-weight:750}
.toast.error{background:#b82f38}.toast.success{background:#087a4d}

.login-shell{min-height:100vh;display:grid;place-items:center;padding:20px;background:
 radial-gradient(circle at 12% 12%,rgba(23,128,181,.14),transparent 34%),
 radial-gradient(circle at 88% 90%,rgba(239,125,20,.12),transparent 31%),#f5f9fc}
.login-card{width:min(94vw,510px);background:#fff;border:1px solid var(--line);border-radius:26px;padding:30px;box-shadow:0 28px 70px rgba(21,66,94,.13);text-align:center}
.login-logo{height:55px;max-width:240px;object-fit:contain;margin-bottom:14px}.portal-badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#e9f4fb;color:#0b5b8a;font-size:11px;font-weight:900;letter-spacing:.08em}
.login-card h1{font-size:28px;margin:14px 0 8px}.login-card p{color:var(--muted);line-height:1.7;margin:0 0 24px}
.login-form{text-align:right}.login-form label{display:block;font-weight:850;margin-bottom:7px}.login-form input{width:100%;height:50px;border:1px solid #bed4e3;border-radius:12px;padding:0 13px;direction:ltr}
.login-form button{width:100%;height:50px;border:0;border-radius:12px;background:var(--navy);color:white;font-weight:900;margin-top:11px}
.login-message{min-height:24px;margin:12px 0 4px;color:#146998}.login-card small{color:#8797a5}

.app-shell{min-height:100vh}.topbar{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line);min-height:76px;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px}.brand img{height:45px;max-width:190px;object-fit:contain}.brand div{display:grid}.brand strong{font-size:18px;color:var(--navy)}.brand span{font-size:12px;color:var(--muted)}
.top-actions{display:flex;align-items:center;gap:8px}.soft{border:1px solid #c9dae6;background:#fff;color:var(--navy);height:40px;border-radius:11px;padding:0 12px;font-weight:800}.soft.danger{color:#a32d35}.user-chip{display:flex;align-items:center;gap:8px;padding:4px 9px 4px 5px;border:1px solid #d4e2eb;border-radius:14px}
.user-chip>span{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#e8f3f9;color:var(--navy);font-weight:900}.user-chip div{display:grid;text-align:start}.user-chip b{font-size:13px}.user-chip small{font-size:10px;color:var(--muted);direction:ltr}

main{max-width:1440px;margin:0 auto;padding:24px}.hero{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#fff;border:1px solid var(--line);border-right:5px solid #198dc3;border-radius:20px;padding:22px;box-shadow:var(--shadow)}
.eyebrow{font-size:11px;color:var(--orange);font-weight:950;letter-spacing:.12em}.hero h1{font-size:30px;margin:6px 0}.hero p{margin:0;color:var(--muted)}.outline{border:1px solid #bad0df;background:#fff;color:var(--navy);border-radius:11px;height:42px;padding:0 16px;font-weight:850}
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:16px 0}.kpis article{background:#fff;border:1px solid var(--line);border-top:4px solid #65a9cb;border-radius:16px;padding:15px;box-shadow:0 6px 20px rgba(20,67,96,.04)}
.kpis article.amber{border-top-color:var(--amber)}.kpis article.red{border-top-color:var(--red)}.kpis article.blue{border-top-color:#2b83c6}.kpis article.green{border-top-color:var(--green)}
.kpis span{font-size:11px;font-weight:900;color:#70879a}.kpis b{display:block;font-size:31px;color:var(--navy);margin:7px 0}.kpis small{color:#8496a4}

.list-toolbar{display:flex;gap:10px;margin:16px 0}.searchbox{flex:1;height:46px;border:1px solid #cbdce7;background:#fff;border-radius:12px;display:flex;align-items:center;gap:8px;padding:0 13px;font-size:22px}.searchbox input{border:0;outline:0;flex:1;font-size:14px;background:transparent}.list-toolbar select{min-width:180px;border:1px solid #cbdce7;background:#fff;border-radius:12px;padding:0 10px;color:var(--ink)}
.capa-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.capa-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:16px;box-shadow:0 7px 24px rgba(20,67,96,.04);position:relative;overflow:hidden}
.capa-card:before{content:"";position:absolute;right:0;top:0;bottom:0;width:5px;background:#6aa9c9}.capa-card.overdue:before{background:var(--red)}.capa-card.review:before{background:#2b83c6}.capa-card.closed:before{background:var(--green)}
.card-top{display:flex;justify-content:space-between;gap:10px;align-items:start}.card-top h3{margin:0;color:var(--navy);font-size:16px}.card-top small{display:block;color:var(--muted);margin-top:3px}.status{font-size:11px;font-weight:900;padding:6px 9px;border-radius:999px;background:#edf5f9;color:#3b6d8d;white-space:nowrap}.status.waiting{background:#eaf2ff;color:#2e68a8}.status.closed{background:#e8f7ef;color:#08794d}.status.overdue{background:#fff0f0;color:#b52d35}
.capa-card .desc{line-height:1.55;color:#425f73;margin:12px 0;min-height:44px}.meta{display:flex;flex-wrap:wrap;gap:7px}.meta span{font-size:11px;background:#f2f6f9;border-radius:8px;padding:6px 8px;color:#61798c}
.progressbar{height:8px;background:#edf2f5;border-radius:999px;overflow:hidden;margin:13px 0 5px}.progressbar i{display:block;height:100%;background:#1688bd;border-radius:inherit}.progress-label{font-size:11px;color:var(--muted);display:flex;justify-content:space-between}
.card-actions{display:flex;gap:8px;margin-top:12px}.primary{border:0;background:var(--navy);color:#fff;border-radius:10px;height:40px;padding:0 14px;font-weight:850}.secondary{border:1px solid #c7dae6;background:#fff;color:var(--navy);border-radius:10px;height:40px;padding:0 14px;font-weight:850}.empty{grid-column:1/-1;background:#fff;border:1px dashed #bdd2df;border-radius:18px;padding:50px;text-align:center;color:#8193a1}

.detail-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px}.detail-head button{height:42px}.detail-title{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;border-right:5px solid var(--orange);box-shadow:var(--shadow)}
.detail-title h1{margin:4px 0;font-size:25px}.detail-title p{margin:0;color:var(--muted)}.detail-grid{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-top:14px}
.panel{background:#fff;border:1px solid var(--line);border-radius:17px;padding:18px}.panel h2{font-size:17px;margin:0 0 15px;color:var(--navy)}.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.info{padding:10px;border:1px solid #e1eaf0;border-radius:11px;background:#fbfdfe}.info.full{grid-column:1/-1}.info span{display:block;font-size:10px;color:#7d90a0;font-weight:850;margin-bottom:5px}.info b{font-size:13px;white-space:pre-wrap;word-break:break-word}
.work-box{display:grid;gap:12px}.work-box label{font-size:12px;font-weight:850}.work-box input[type=range]{width:100%}.work-box textarea{width:100%;min-height:95px;border:1px solid #c9dce8;border-radius:11px;padding:10px;resize:vertical}.work-row{display:flex;gap:8px;align-items:center}.work-row b{min-width:45px;text-align:center;color:var(--navy)}
.upload-zone{border:2px dashed #bdd4e2;border-radius:14px;padding:15px;background:#f9fcfe}.upload-zone input{width:100%}.upload-zone small{color:#7c91a0}.evidence-list{display:grid;gap:8px;margin-top:12px}.evidence{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid #dce8ef;border-radius:11px;padding:10px}.evidence div{min-width:0}.evidence b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}.evidence small{color:var(--muted)}.evidence a{text-decoration:none}
.submit-review{width:100%;min-height:48px;background:var(--green);border:0;color:#fff;border-radius:12px;font-weight:900;margin-top:12px}.submit-review:disabled{opacity:.5;cursor:not-allowed}
.locked-box{padding:14px;border-radius:12px;background:#eef5fb;color:#356a8e;line-height:1.6}.returned{background:#fff6e7;color:#946200}
.mobile-tabs{display:none}footer{text-align:center;color:#8999a6;padding:25px;font-size:12px}

html[dir="ltr"] .hero,html[dir="ltr"] .detail-title{border-right-width:1px;border-left:5px solid #198dc3}
html[dir="ltr"] .detail-title{border-left-color:var(--orange)}

@media(max-width:900px){
  .topbar{padding:9px 12px;align-items:flex-start}.brand img{height:38px;max-width:145px}.brand div{display:none}.top-actions{gap:5px}.user-chip div{display:none}.soft{padding:0 9px;height:37px;font-size:11px}
  main{padding:13px 10px 92px}.hero{padding:16px}.hero h1{font-size:23px}.hero p{font-size:13px}.kpis{grid-template-columns:repeat(2,1fr);gap:8px}.kpis article:first-child{grid-column:1/-1}
  .list-toolbar{flex-direction:column}.list-toolbar select{height:44px;width:100%}.capa-list{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr}.info-grid{grid-template-columns:1fr}.info.full{grid-column:auto}
  .mobile-tabs{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;bottom:0;left:0;right:0;z-index:500;background:#fff;border-top:1px solid #cfdee8;padding:7px 6px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -10px 25px rgba(19,57,82,.09)}
  .mobile-tabs button{border:0;background:transparent;color:#61788a;border-radius:10px;min-height:48px;font-size:10px;font-weight:850;display:grid;place-items:center;gap:2px}.mobile-tabs button b{font-size:11px}.mobile-tabs button.active{background:#eaf4fa;color:var(--navy)}
  .evidence b{max-width:180px}
}


/* V1.0.1 — English default login + language switch */
.login-title-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:2px;
}
.login-lang-btn{
  border:1px solid #c9dae6;
  background:#fff;
  color:#0b456f;
  border-radius:999px;
  height:31px;
  min-width:42px;
  padding:0 10px;
  font-size:11px;
  font-weight:900;
}
html[dir="ltr"] .login-form{text-align:left}
html[dir="rtl"] .login-form{text-align:right}


/* ============================================================
   V2.0.0 — Workflow timeline / rework / advanced dashboard
   ============================================================ */
.kpis article.orange{border-top-color:#f07c22}
.status.returned{background:#fff3e6;color:#b65a0b}
.capa-card.rework:before{background:#f07c22}
.rework-note{margin:10px 0;padding:9px 10px;border-radius:10px;background:#fff5e9;color:#8b531b;font-size:12px;line-height:1.45}
.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-title-row h2{margin:0}.panel-title-row>span{font-size:11px;color:#748a9c}
.plain-textarea{width:100%;margin-top:9px;min-height:74px;border:1px solid #c9dce8;border-radius:10px;padding:9px;resize:vertical}
.review-banner{margin-top:14px;padding:15px 17px;border-radius:15px;border:1px solid #d7e5ee;background:#fff;box-shadow:0 8px 24px rgba(20,67,96,.05)}
.review-banner b{font-size:15px}.review-banner p{margin:6px 0;color:#526b7d}.review-banner small{color:#8091a0}
.returned-banner{border-right:5px solid #f07c22;background:#fff9f2}.closed-banner{border-right:5px solid #0d9660;background:#f3fbf7}
.submit-hint{font-size:11px;color:#8a6d24;margin-top:7px}
.evidence-view{display:inline-flex;align-items:center;text-decoration:none}
.timeline{display:grid;gap:0}.timeline-event{position:relative;display:grid;grid-template-columns:18px 1fr;gap:9px;padding:0 0 17px}
.timeline-event:before{content:"";position:absolute;top:14px;bottom:-2px;left:7px;width:2px;background:#d9e7ef}
html[dir="rtl"] .timeline-event:before{left:auto;right:7px}
.timeline-event:last-child:before{display:none}.timeline-dot{width:14px;height:14px;border-radius:50%;background:#1c82b4;margin-top:2px;box-shadow:0 0 0 4px #e7f3f8}
.timeline-event b{font-size:13px;color:#174d72}.timeline-event p{margin:4px 0;color:#506b7f;font-size:12px;line-height:1.45}.timeline-event small{color:#8293a1;font-size:10px}.timeline-event .file-note{color:#376f94}
.list-toolbar select{min-width:165px}

@media(max-width:1100px){
  .kpis{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .mobile-tabs{grid-template-columns:repeat(5,1fr)}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kpis article:first-child{grid-column:auto}
  .review-banner{margin-top:10px}
}