/* APCM Global Design System — aligned with public marketing site */
:root{
  --brand:#0B5FFF;--brand-2:#1FC1F4;--brand-dark:#1748D4;
  --brand-soft:#EEF4FF;--brand-softer:#F7FAFF;
  --navy:#08111F;--ink:#0B1220;--sub:#667085;
  --bg:#F5F7FB;--sf:#FFFFFF;--line:#E7EAF0;
  --green:#0F9F6E;--green-s:#E9F8F1;
  --amber:#B86E00;--amber-s:#FFF5E5;
  --danger:#D92D20;--danger-d:#B42318;--danger-s:#FEECEB;
  --red:#D92D20;--red-d:#B42318;--red-s:#FEECEB;
  --blue:#0B5FFF;--blue-s:#EEF4FF;
  --grey:#08111F;--grey-m:#667085;--grey-l:#98A2B3;
  --radius-sm:10px;--radius:14px;--radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.04),0 2px 8px rgba(16,24,40,.04);
  --shadow-md:0 12px 30px rgba(16,24,40,.08);
  --shadow-lg:0 28px 70px rgba(7,20,41,.16);
}
:root[data-theme="dark"]{
  --bg:#0B1220;--sf:#111B2B;--line:#26344A;--ink:#F4F7FB;--sub:#AEB9CA;
  --grey:#F4F7FB;--grey-m:#AEB9CA;--brand-soft:#14284B;--blue-s:#14284B;
}
body{
  background:
    radial-gradient(circle at 85% 0,rgba(31,193,244,.07),transparent 26%),
    radial-gradient(circle at 10% 0,rgba(11,95,255,.06),transparent 22%),
    var(--bg);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
input,select,textarea{
  border:1px solid #D9DEEA;border-radius:10px;background:var(--sf);
  min-height:40px;padding:9px 11px;transition:border-color .16s,box-shadow .16s,background .16s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(11,95,255,.12);
}
.card{
  background:var(--sf);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:18px;
}
.ttl{color:var(--ink);border-left-color:var(--brand);font-weight:850}
.btn{
  border-radius:11px;padding:10px 16px;font-weight:800;
  transition:transform .16s,box-shadow .16s,background .16s,border-color .16s;
}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.b-pri{
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;
  box-shadow:0 8px 18px rgba(11,95,255,.18)
}
.b-pri:hover:not(:disabled){box-shadow:0 12px 26px rgba(11,95,255,.24)}
.b-dark{background:var(--navy);color:#fff}
.b-out{background:var(--sf);color:#344054;border-color:#D9DEEA}
.b-out:hover:not(:disabled){border-color:#BFC9DA;background:#FAFBFC}
.p-blue{background:var(--brand-soft);color:var(--brand-dark)}
.bar{background:#E8EDF5}.bar>div{background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.warn{border:1px solid rgba(184,110,0,.12);border-radius:10px}
.warn.red{border-color:rgba(217,45,32,.13);background:var(--danger-s);color:var(--danger-d)}
.p-red{background:var(--danger-s)!important;color:var(--danger-d)!important}
.warn.ok{border-color:rgba(15,159,110,.13)}

/* Main application shell */
.top{
  position:relative;background:rgba(255,255,255,.95);border-bottom:1px solid var(--line);
  padding:12px 20px;box-shadow:0 1px 0 rgba(16,24,40,.02);backdrop-filter:blur(12px)
}
.nav{
  background:#fff;border-bottom:1px solid var(--line);padding:0 10px;gap:2px;
  box-shadow:none
}
.nav button{
  color:#344054;padding:12px 14px;border-radius:9px;margin:6px 0;font-weight:700;
  transition:background .15s,color .15s,border-color .15s
}
.nav button:hover{background:#F4F7FC;color:var(--brand-dark)}
.nav button.on{
  background:linear-gradient(135deg,var(--brand),#1748D4);color:#fff;font-weight:800;
  box-shadow:0 7px 18px rgba(11,95,255,.18)
}
.wrap{max-width:1240px;padding:20px}
th{background:#F8FAFD;color:#667085;border-bottom:1px solid var(--line)}
tr:hover td{background:rgba(238,244,255,.32)}

/* Authentication / account journey */
.apcm-auth{
  min-height:100vh;
  background:
    radial-gradient(circle at 82% 14%,rgba(31,193,244,.16),transparent 31%),
    radial-gradient(circle at 12% 8%,rgba(11,95,255,.13),transparent 27%),
    linear-gradient(180deg,#FBFDFF,#F4F7FC);
  padding:38px 18px;
}
.apcm-auth-frame{width:100%;max-width:470px;margin:auto}
.apcm-auth-frame:has(.pk-section){max-width:940px}
.apcm-auth .card{
  border-radius:20px;border:1px solid rgba(217,222,234,.9);padding:26px;
  box-shadow:0 24px 65px rgba(7,20,41,.12)
}
.apcm-auth .card>div:first-child{color:var(--ink)!important;letter-spacing:-.2px}
.apcm-auth a{color:var(--brand)!important}
.apcm-auth .warn{background:rgba(255,255,255,.72);border-color:var(--line);color:#667085}
.apcm-auth input,.apcm-auth select{min-height:44px;border-radius:11px}
.apcm-auth .lbl,.apcm-auth .pk-field>span{font-size:12px;color:#475467;font-weight:750}
.apcm-auth .b-pri{min-height:44px}

/* Authentication links keep the APCM brand while errors remain red. */
.auth a{color:var(--brand)!important}
.drop.on{border-color:var(--brand)!important;background:var(--brand-soft)!important}

/* Pricing & plans */
.pk-cards{gap:16px;margin:16px 0}
.pk-card{
  position:relative;border:1px solid #DDE3EC;border-radius:16px;padding:18px;background:#fff;
  box-shadow:0 5px 16px rgba(16,24,40,.04);transition:transform .17s,border-color .17s,box-shadow .17s
}
.pk-card:hover:not(:disabled){transform:translateY(-2px);border-color:#B8C8E4;box-shadow:0 13px 28px rgba(16,24,40,.08)}
.pk-card.selected{
  border:2px solid var(--brand);padding:17px;background:linear-gradient(180deg,#F8FBFF,#EEF4FF);
  box-shadow:0 15px 34px rgba(11,95,255,.13)
}
.pk-card-title{font-size:15px;color:var(--ink)}
.pk-price{font-size:25px;letter-spacing:-.6px;color:var(--ink)}
.pk-price small{font-size:12px;font-weight:700;color:var(--sub)}
.pk-details,.pk-features{line-height:1.5;color:#475467}
.pk-offer{
  color:var(--green);background:var(--green-s);border:1px solid rgba(15,159,110,.12);
  padding:10px 12px;border-radius:10px
}
.pk-section .between .row{gap:5px;background:#F1F4F8;padding:4px;border-radius:11px}
.pk-section .between .row .btn{border-radius:8px;box-shadow:none}

/* Mobile UI follows brand */
#apcm-mobile-install{background:rgba(255,255,255,.96);backdrop-filter:blur(10px)}
#apcm-install-dialog #apcm-install-native{background:linear-gradient(135deg,var(--brand),var(--brand-dark))}
.apcm-mobile-dock{background:rgba(255,255,255,.96)!important;backdrop-filter:blur(14px)}
.apcm-mobile-dock button.on{color:var(--brand)!important;background:var(--brand-soft)!important}

@media(max-width:640px){
  .apcm-auth{padding:18px 10px}
  .apcm-auth .card{padding:18px;border-radius:16px}
  .apcm-auth-frame:has(.pk-section){max-width:100%}
  .pk-cards{grid-template-columns:1fr;gap:10px}
  .top{padding:10px 12px}.wrap{padding:12px}
}

/* Premium two-column auth shell */
.apcm-auth-layout{isolation:isolate}
.apcm-auth-card .b-pri{background:linear-gradient(135deg,var(--brand),var(--brand-dark));box-shadow:0 10px 24px rgba(11,95,255,.20)}
.apcm-auth-card input:focus,.apcm-auth-card select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(11,95,255,.12)}
.apcm-auth-secure{background:var(--brand-softer)!important}
@media(max-width:860px){.apcm-auth-layout{box-shadow:0 20px 55px rgba(7,20,41,.12)}}


/* Authenticated application interior — marketing-site visual language */
.apcm-shell-layout{
  background:
    radial-gradient(circle at 100% 0,rgba(31,193,244,.055),transparent 28%),
    linear-gradient(180deg,#F7FAFF 0,#F5F7FB 240px);
  min-height:calc(100vh - 120px);
}
.apcm-shell-layout > .wrap{max-width:1600px!important;padding:22px!important}
.apcm-shell-layout .card{
  border:1px solid #E3E8F0!important;border-radius:16px!important;
  box-shadow:0 7px 24px rgba(16,24,40,.055)!important;
}
.apcm-shell-layout .ttl{
  border-left:3px solid var(--brand)!important;color:var(--ink)!important;
  padding-left:10px!important;
}
.apcm-shell-layout .b-pri{
  background:linear-gradient(135deg,var(--brand),var(--brand-dark))!important;
  color:#fff!important;border-color:transparent!important;
  box-shadow:0 9px 20px rgba(11,95,255,.18)!important;
}
.apcm-shell-layout .b-out{
  background:#fff!important;color:#344054!important;border-color:#D8DFEA!important;
}
.apcm-shell-layout .bar>div{
  background:linear-gradient(90deg,var(--brand),var(--brand-2))!important;
}
.apcm-shell-layout .v9-summary{
  background:linear-gradient(135deg,#F7FAFF,#EEF4FF)!important;
  color:var(--brand-dark)!important;border:1px solid #D6E4FF!important;
  border-radius:12px!important;
}
.apcm-shell-layout details,.apcm-shell-layout fieldset{
  border-color:#E3E8F0!important;border-radius:12px!important;background:#fff;
}
.apcm-shell-layout table{
  overflow:hidden;border-radius:12px;
}
.apcm-shell-layout th{
  background:#F7F9FC!important;color:#667085!important;
}
.apcm-shell-layout tr:hover td{background:#F7FAFF!important}
.apcm-shell-layout input:focus,.apcm-shell-layout select:focus,.apcm-shell-layout textarea:focus{
  border-color:var(--brand)!important;box-shadow:0 0 0 3px rgba(11,95,255,.11)!important;
}
.apcm-shell-layout progress{accent-color:var(--brand)}
.apcm-shell-layout progress::-webkit-progress-value{background:var(--brand)}
.apcm-shell-layout progress::-moz-progress-bar{background:var(--brand)}

.apcm-statusbar{
  padding:9px 20px!important;background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid var(--line)!important;color:#344054!important;
  box-shadow:0 1px 0 rgba(16,24,40,.02);
}
.apcm-statusbar button{
  border:1px solid #D8DFEA;border-radius:9px;background:#fff;color:#344054;
  padding:7px 10px;font-weight:700;
}
.apcm-statusbar button:hover{border-color:#BFD0EA;background:#F8FBFF}
.top + .noprint{
  background:linear-gradient(90deg,#EEF4FF,#F7FAFF)!important;
  color:#175CD3!important;border-bottom:1px solid #D8E6FF!important;
}

@media(min-width:1200px){
  body .apcm-shell-layout .apcm-desktop-nav{
    background:rgba(255,255,255,.98)!important;
    border-right:1px solid #E3E8F0!important;
    box-shadow:8px 0 26px rgba(16,24,40,.035)!important;
    padding:18px 11px!important;
  }
  body .apcm-shell-layout .apcm-desktop-nav button{
    color:#344054!important;border-radius:10px!important;
    padding:10px 12px!important;font-weight:700!important;
    background:transparent!important;box-shadow:none!important;
  }
  body .apcm-shell-layout .apcm-desktop-nav button:hover{
    color:var(--brand-dark)!important;background:#F3F7FF!important;
  }
  body .apcm-shell-layout .apcm-desktop-nav button.on{
    color:#fff!important;
    background:linear-gradient(135deg,var(--brand),var(--brand-dark))!important;
    box-shadow:0 8px 18px rgba(11,95,255,.18)!important;
  }
  body .apcm-shell-layout .apcm-nav-label{
    color:#71829A!important;letter-spacing:.10em!important;
  }
}

/* Semantic danger stays red; brand accents stay blue. */
.apcm-shell-layout .warn.red{background:var(--danger-s)!important;color:var(--danger-d)!important;border-color:#F7C7C3!important}
.apcm-shell-layout .p-red{background:var(--danger-s)!important;color:var(--danger-d)!important}


/* Disabled actions stay in the blue family instead of legacy pink/red. */
.b-pri:disabled,.apcm-shell-layout .b-pri:disabled{
  background:#DDE8FF!important;color:#7A96C8!important;
  border-color:#D3E0FA!important;box-shadow:none!important;opacity:1!important
}

/* Floating system access follows the same light APCM visual language. */
#apcmSysBtn{
  background:#fff!important;color:#1748D4!important;border:1px solid #CFE0FF!important;
  box-shadow:0 10px 26px rgba(16,24,40,.10)!important
}
#apcmSysBtn:hover{background:#F4F8FF!important;border-color:#AFC8F6!important}

/* Reviewed Word requirements: scoped overview and additive revisions. */
.overview-project-picker{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--sub)}
.overview-project-picker select{min-width:210px;max-width:430px}
.extra-work{margin:8px 0;padding:10px;border:1px solid #D8E6FF;border-radius:12px;background:#F7FAFF}
.revision-history{padding:8px 0;font-size:12px;color:var(--sub)}
.revision-history article{padding:10px;margin:6px 0;border:1px solid var(--line);border-radius:10px;background:var(--sf)}
@media(max-width:640px){.overview-project-picker{width:100%;flex-wrap:wrap}.overview-project-picker select{width:100%;min-width:0}.extra-work .row{flex-wrap:wrap}}

.quality-template{margin:16px 0;padding:14px;border:1px solid var(--line);border-radius:12px;background:#f8fbff}.quality-template summary{font-weight:700;cursor:pointer}.quality-template fieldset{border:0;padding:0;min-width:0}.quality-template input{min-width:0;width:100%}
