/* DEH Law — Client Portal styles. Tokens mirror the main website theme. */
:root{
  --nav1:#121417;--nav2:#0c0f13;--gold:#e6ae48;--gold2:#f7c02e;--goldD:#b8860b;
  --hero1:#2f3745;--hero2:#425069;--hero3:#344154;
  --ink:#191919;--text:#3e3e3e;--muted:#727272;--line:#dddddd;--line2:#e8e8e8;
  --bg:#f3f3f3;--card:#ffffff;--ok:#1e7a46;--okbg:#e9f5ee;--err:#8f2626;--errbg:#fbeaea;
  --foot:#202020;--copy:#181818;
  --r:6px;--shadow:0 10px 30px rgba(0,0,0,.06);
  --ff-title:"Lato",Arial,sans-serif;--ff-nav:"Raleway",Arial,sans-serif;--ff-body:"Open Sans","Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{font-family:var(--ff-body);font-size:16px;line-height:1.6;color:var(--text);background:var(--bg);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--goldD);text-decoration:none}a:hover{color:var(--gold)}
h1,h2,h3{font-family:var(--ff-title);color:var(--ink);margin:0;line-height:1.2}
p{margin:0 0 12px}
button,input,select,textarea{font-family:inherit;font-size:16px}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:8px;top:8px}
.wrap{width:100%;max-width:900px;margin:0 auto;padding:0 20px}
.wrap-narrow{max-width:560px}

/* header */
.ph{background:linear-gradient(180deg,var(--nav1) 0%,var(--nav2) 100%);color:#fff}
.ph-in{max-width:1180px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ph-logo img{display:block;height:56px;width:auto;max-width:48vw}
.ph-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.ph-nav a{font-family:var(--ff-nav);font-weight:600;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:#f1f1f1;padding:10px 12px;border-radius:4px;white-space:nowrap}
.ph-nav a:hover,.ph-nav a.on{color:var(--gold)}
.ph-nav a.ph-out{border:1px solid rgba(255,255,255,.25);margin-left:6px}
.ph-nav a.ph-out:hover{border-color:var(--gold)}
.ph-nav a.ph-lang{border:1px solid rgba(230,174,72,.6);color:var(--gold);margin-left:6px;padding:8px 12px}
.ph-nav a.ph-lang:hover{background:var(--gold);color:var(--nav1)}
@media (max-width:640px){
  .ph-in{padding:10px 14px;gap:6px}
  .ph-logo img{height:44px}
  .ph-nav{width:100%;gap:2px;justify-content:flex-start}
  .ph-nav a{font-size:11px;padding:8px 8px;letter-spacing:.06em}
  .ph-nav a.ph-out,.ph-nav a.ph-lang{margin-left:2px;padding:7px 9px}
}
.ph-gold{height:3px;background:linear-gradient(90deg,var(--gold) 0%,var(--gold2) 55%,rgba(230,174,72,.25) 100%)}

/* hero band */
.hero{background:linear-gradient(140deg,var(--hero1) 0%,var(--hero2) 58%,var(--hero3) 100%);color:#fff;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;width:380px;height:380px;right:-140px;top:-160px;border-radius:50%;background:radial-gradient(circle,rgba(230,174,72,.28),transparent 70%)}
.hero .wrap{position:relative;z-index:1;padding-top:36px;padding-bottom:36px}
.hero h1{color:#fff;font-size:clamp(26px,4.6vw,38px);font-weight:700;text-wrap:pretty}
.hero p{margin:10px 0 0;max-width:62ch;color:rgba(255,255,255,.88);font-size:16px}
.kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;background:rgba(230,174,72,.18);color:#ffdd8a;font-family:var(--ff-nav);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.hero.hero-slim .wrap{padding-top:26px;padding-bottom:26px}
.hero.hero-slim h1{font-size:clamp(22px,3.6vw,30px)}

/* main */
.pm{flex:1;padding:26px 0 40px}
.pm > .wrap + .wrap{margin-top:18px}
.card{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);box-shadow:var(--shadow);padding:clamp(20px,3.5vw,32px)}
.card + .card{margin-top:18px}
.card h2{font-size:22px;margin-bottom:6px}
.card .intro{color:var(--muted);font-size:15px;margin-bottom:18px}
.step{display:flex;align-items:baseline;gap:10px}
.step .n{font-family:var(--ff-title);color:var(--goldD);font-weight:900;font-size:15px}
.flash{border-radius:var(--r);padding:12px 16px;font-size:15px;font-weight:600;margin-bottom:18px;border:1px solid}
.flash-info{background:#eef4fb;border-color:#c9dcf1;color:#1f3d63}
.flash-ok{background:var(--okbg);border-color:#bfe0cc;color:var(--ok)}
.flash-err{background:var(--errbg);border-color:#e3b7b7;color:var(--err)}

/* forms */
.f{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.f > span,.f label,label.lbl{font-size:13.5px;font-weight:700;color:var(--ink)}
.f small,.hint{font-size:13px;color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=tel],select,textarea{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(230,174,72,.22)}
input[readonly]{background:#f7f7f7;color:var(--muted)}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23727272' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:38px}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:78px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--goldD);font-weight:700;font-size:13px;cursor:pointer;padding:8px 10px;border-radius:4px}
.pw-toggle:hover{background:rgba(230,174,72,.12)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:600px){.row2{grid-template-columns:1fr}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 26px;border-radius:4px;border:1px solid transparent;font-family:var(--ff-nav);font-weight:700;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .15s,transform .15s,border-color .15s;text-decoration:none}
.btn-gold{background:var(--gold);color:var(--nav1)}
.btn-gold:hover{background:var(--gold2);color:var(--nav1);transform:translateY(-1px)}
.btn-dark{background:var(--nav1);color:#fff}
.btn-dark:hover{background:#2a2f36;color:#fff}
.btn-line{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-line:hover{border-color:var(--gold);color:var(--ink)}
.btn-sm{min-height:38px;padding:8px 14px;font-size:12px}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.btn-block{width:100%}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:8px}
.links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-size:14.5px}
.divider{height:1px;background:var(--line2);margin:22px 0}

.meter{height:6px;border-radius:999px;background:#eee;overflow:hidden;margin-top:4px}
.meter i{display:block;height:100%;width:0;background:#c9302c;transition:width .2s,background .2s}
.meter-l{font-size:12.5px;color:var(--muted)}

/* upload rows */
.rows{display:flex;flex-direction:column;gap:14px}
.urow{border:1px solid var(--line2);border-radius:var(--r);background:#fbfbfb;padding:16px;position:relative}
.urow .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;align-items:end}
@media (max-width:640px){.urow .grid{grid-template-columns:1fr}}
.urow .f{margin-bottom:0}
.urow .other{grid-column:1 / -1}
.urow .rm{position:absolute;top:8px;right:8px;border:none;background:transparent;color:#9c2f2f;font-size:13px;font-weight:700;cursor:pointer;padding:6px 8px;border-radius:4px}
.urow .rm:hover{background:#fbeaea}
.filebtn{display:flex;align-items:center;gap:10px;min-height:48px;border:1.5px dashed var(--goldD);border-radius:4px;background:rgba(230,174,72,.07);padding:8px 14px;cursor:pointer;color:#6b4b00;font-weight:600;font-size:14.5px}
.filebtn:hover{background:rgba(230,174,72,.15)}
.filebtn input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.filebtn.has{border-style:solid;background:var(--okbg);border-color:#bfe0cc;color:var(--ok)}
.flist{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;grid-column:1 / -1}
.flist li{display:flex;align-items:center;gap:10px;font-size:13.5px;background:#fff;border:1px solid var(--line2);border-radius:4px;padding:7px 10px}
.flist li .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flist li .sz{color:var(--muted);font-size:12.5px;flex:none}
.flist li img{width:30px;height:30px;object-fit:cover;border-radius:4px;border:1px solid var(--line2)}
.flist li button{border:none;background:transparent;color:#9c2f2f;font-weight:700;font-size:12.5px;cursor:pointer;padding:3px 6px}
.addbtn{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:10px 18px;border-radius:999px;border:1.5px dashed var(--goldD);background:rgba(230,174,72,.07);color:#6b4b00;font-size:14.5px;font-weight:700;cursor:pointer;margin-top:14px}
.addbtn:hover{background:rgba(230,174,72,.15)}
.addbtn b{font-size:20px;line-height:1}

.bar{position:sticky;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line2);box-shadow:0 -10px 30px rgba(0,0,0,.06);margin-top:22px;z-index:5}
.bar .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.bar .prog{flex:1;min-width:180px;font-size:13.5px;color:var(--muted)}

/* modal */
.upmodal{position:fixed;inset:0;z-index:60;background:rgba(9,12,17,.6);display:none;align-items:center;justify-content:center;padding:20px}
.upmodal.show{display:flex}
.upcard{width:min(380px,100%);background:#fff;border-radius:var(--r);box-shadow:0 24px 60px rgba(0,0,0,.35);padding:30px 26px;text-align:center}
.spin{width:46px;height:46px;margin:0 auto;border-radius:50%;border:4px solid #eee;border-top-color:var(--gold);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.upcard h3{font-size:19px;margin:18px 0 0}
.upcard .sub{font-size:13.5px;color:var(--muted);margin-top:6px}
.track{height:7px;border-radius:999px;background:#eee;overflow:hidden;margin-top:16px}
.fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .3s;width:0}

/* success */
.success{text-align:center;padding:30px 0 10px}
.okball{width:84px;height:84px;border-radius:50%;margin:0 auto;background:linear-gradient(135deg,var(--gold) 0%,var(--gold2) 100%);box-shadow:0 16px 35px rgba(230,174,72,.35);display:flex;align-items:center;justify-content:center}
.success h1{font-size:clamp(26px,5vw,36px);margin:22px 0 10px}
.success .msg{margin:0 auto;max-width:52ch}
.sent{text-align:left;margin-top:22px}
.sent .h{font-family:var(--ff-nav);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--goldD)}
.sent ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.sent li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.45}
.sent li small{display:block;color:var(--muted);font-size:13px}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{text-align:left;font-family:var(--ff-nav);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px 10px;border-bottom:2px solid var(--line2);white-space:nowrap}
.tbl td{padding:11px 10px;border-bottom:1px solid var(--line2);vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl .mono{font-family:Consolas,Menlo,monospace;font-size:13px;word-break:break-all}
.tbl-wrap{overflow-x:auto}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:#eef0f3;color:#3e3e3e;white-space:nowrap}
.pill-gold{background:rgba(230,174,72,.18);color:#6b4b00}
.pill-ok{background:var(--okbg);color:var(--ok)}
.pill-err{background:var(--errbg);color:var(--err)}
.empty{color:var(--muted);font-size:15px;padding:12px 0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:18px}
.stat{background:#fbfbfb;border:1px solid var(--line2);border-radius:var(--r);padding:14px 16px}
.stat b{display:block;font-family:var(--ff-title);font-size:24px;color:var(--ink)}
.stat span{font-size:13px;color:var(--muted)}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;font-size:15px}
.kv dt{color:var(--muted)}.kv dd{margin:0;color:var(--ink)}
.tip{display:flex;gap:12px;align-items:flex-start;background:rgba(230,174,72,.08);border:1px solid rgba(230,174,72,.35);border-radius:var(--r);padding:14px 16px;font-size:14.5px;color:#4b3a12}
.tip svg{flex:none;margin-top:2px}

/* footer */
.pf{background:var(--foot);color:#ababab;margin-top:20px}
.pf-in{display:flex;flex-direction:column;gap:8px;font-size:13.5px;line-height:1.6;padding-top:28px;padding-bottom:28px}
.pf-lock{display:flex;align-items:center;gap:8px;color:var(--gold);font-weight:700;font-family:var(--ff-nav);letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.pf p{margin:0}
.pf a{color:#d6d6d6}.pf a:hover{color:var(--gold)}
.pf-copy{background:var(--copy);color:#838383;text-align:center;font-size:12px;letter-spacing:1.5px;padding:16px 20px;text-transform:uppercase}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}