/* TechDigitalPro VIP 3D portal/auth theme
   Shared by buyer/seller operational pages and authentication screens.
   The marketplace transaction logic remains PHP/database controlled. */
:root{
  --portal-bg:#eef7ff;
  --portal-surface:#ffffff;
  --portal-surface-soft:#f5fbff;
  --portal-ink:#123452;
  --portal-muted:#6d8297;
  --portal-blue:#117cf0;
  --portal-cyan:#19bfe8;
  --portal-line:#c8dfef;
  --portal-shadow:0 18px 55px rgba(28,94,145,.12);
  --portal-shadow-strong:0 28px 70px rgba(27,105,174,.17);
}
body.portal-page{
  min-height:100vh;
  background:
    radial-gradient(circle at 8% 0%,rgba(45,183,245,.15),transparent 28%),
    radial-gradient(circle at 94% 12%,rgba(91,113,245,.10),transparent 25%),
    linear-gradient(180deg,#f9fdff 0%,#eef7ff 52%,#eaf5ff 100%);
  color:var(--portal-ink);
}
.portal-topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.90);
  border-bottom:1px solid var(--portal-line);
  box-shadow:0 8px 26px rgba(38,104,153,.08);
  backdrop-filter:blur(20px);
}
.portal-topbar-inner{
  width:min(100% - 28px,1370px);margin:0 auto;min-height:72px;
  display:flex;align-items:center;gap:14px;
}
.portal-brand{display:flex;align-items:center;gap:10px;font-weight:900;color:#123452;text-decoration:none;white-space:nowrap}
.portal-brand-mark{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(145deg,#1489ff,#56d6ff);color:#fff;
  box-shadow:0 10px 26px rgba(20,124,245,.24),inset 3px 4px 8px rgba(255,255,255,.45);
}
.portal-brand small{display:block;color:#7890a7;font-size:8px;letter-spacing:1.8px;margin-top:2px}
.portal-nav{display:flex;align-items:center;gap:5px;margin-left:auto;flex-wrap:wrap}
.portal-nav a{
  color:#48667f;text-decoration:none;padding:9px 10px;border-radius:10px;font-size:12px;font-weight:800
}
.portal-nav a:hover{background:#eaf6ff;color:#0b72d5}
.portal-logout{
  color:#fff!important;background:linear-gradient(120deg,#1178ef,#18bce9);
  box-shadow:0 9px 20px rgba(20,126,242,.18);
}
.portal-main{width:min(100% - 28px,1370px);margin:0 auto;padding:34px 0 70px}
.portal-heading{
  display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:22px
}
.portal-heading h1{margin:0;color:#123452;font-size:clamp(28px,4vw,44px);letter-spacing:-1.5px}
.portal-heading p{margin:6px 0 0;color:var(--portal-muted);font-size:13px}
.portal-card,.portal-main .box,.portal-main .notice,.portal-main .info-panel{
  background:linear-gradient(145deg,#fff,#f0f9ff);
  border:1px solid var(--portal-line);
  border-radius:19px;
  box-shadow:var(--portal-shadow);
}
.portal-main .box{padding:22px;margin:16px 0}
.portal-main .box h2{color:#153c5c}
.portal-main .notice{
  padding:14px 17px;color:#4e687f;line-height:1.7
}
.portal-main .warning{
  padding:13px 16px;border-radius:13px;background:#fff4f4;border:1px solid #f0caca;color:#a33845
}
.portal-main .ok{color:#087d64}
.portal-main label{display:block;margin:15px 0 7px;color:#47657e;font-weight:800;font-size:12px}
.portal-main input,.portal-main textarea,.portal-main select,
body.portal-page input,body.portal-page textarea,body.portal-page select{
  width:100%;padding:12px 13px;border:1px solid #bcd8e9;border-radius:11px;
  background:#fff;color:#173a57;outline:none;box-shadow:inset 0 1px 5px rgba(26,94,145,.04);
}
.portal-main textarea{min-height:115px}
.portal-main input:focus,.portal-main textarea:focus,.portal-main select:focus,
body.portal-page input:focus,body.portal-page textarea:focus,body.portal-page select:focus{
  border-color:#53bce8;box-shadow:0 0 0 4px rgba(24,169,230,.10)
}
.portal-main button,.portal-main .btn,body.portal-page button{
  border:1px solid rgba(55,164,244,.75);border-radius:11px;
  background:linear-gradient(120deg,#1178ef,#18bce9);color:#fff;
  padding:11px 17px;font-weight:900;cursor:pointer;box-shadow:0 11px 25px rgba(20,126,242,.18)
}
.portal-main button:hover,.portal-main .btn:hover,body.portal-page button:hover{transform:translateY(-1px);filter:brightness(1.03)}
.portal-main .danger{background:linear-gradient(120deg,#e96b75,#f29b78);border-color:#e47b84}
.portal-main .muted,body.portal-page .muted{color:#7890a5}
.portal-main a{color:#0b73cc}
.portal-main .tablewrap{overflow:auto;border:1px solid var(--portal-line);border-radius:16px;box-shadow:var(--portal-shadow)}
.portal-main table{width:100%;min-width:720px;border-collapse:collapse;background:#fff}
.portal-main th,.portal-main td{padding:13px 14px;text-align:left;border-bottom:1px solid #e0edf5;color:#47637a}
.portal-main th{background:#eff9ff;color:#15557f;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.portal-main tr:last-child td{border-bottom:0}
.portal-main pre{
  background:#0e2948;color:#dff5ff;border:1px solid #2e618a;border-radius:13px;padding:15px
}
.portal-footer{
  border-top:1px solid var(--portal-line);padding:22px 14px;text-align:center;color:#7890a5;font-size:11px;
  background:rgba(255,255,255,.72)
}
/* Auth cards */
body.portal-auth{
  min-height:100vh;display:flex;flex-direction:column;
  background:
    radial-gradient(circle at 12% 12%,rgba(33,187,244,.17),transparent 28%),
    radial-gradient(circle at 88% 25%,rgba(93,104,239,.13),transparent 25%),
    linear-gradient(145deg,#fafdff,#eaf6ff);
  color:var(--portal-ink);padding:0;
}
body.portal-auth>header{
  width:100%;padding:17px max(20px,5vw);background:rgba(255,255,255,.88)!important;
  border-bottom:1px solid var(--portal-line)!important;color:#123452!important;
  box-shadow:0 8px 26px rgba(38,104,153,.07);backdrop-filter:blur(18px)
}
body.portal-auth>main,body.portal-auth>.box{
  width:min(calc(100% - 28px),560px);margin:42px auto;padding:31px;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(232,247,255,.96))!important;
  border:1px solid #bcdced!important;border-radius:25px!important;
  box-shadow:25px 30px 70px rgba(26,94,145,.15),inset 2px 2px 0 #fff!important;
}
body.portal-auth h1,body.portal-auth h2{color:#123b5b!important;letter-spacing:-1px}
body.portal-auth p{color:#698197}
body.portal-auth label{display:block;margin:16px 0 7px;color:#42627c;font-weight:800;font-size:12px}
body.portal-auth a{color:#0874cf}
body.portal-auth button{width:100%;margin-top:21px;min-height:48px}
body.portal-auth .error,body.portal-auth .notice{
  padding:13px 15px;border-radius:13px;background:#fff4f4;border:1px solid #efc9cc;color:#9d3d49
}
body.portal-auth .ok{background:#eafaf5;border-color:#bce7da;color:#087b62}
body.portal-auth footer{margin-top:auto;border-top:1px solid var(--portal-line);padding:20px;color:#7890a5;background:rgba(255,255,255,.68)}
.auth-brand{
  width:64px;height:64px;margin:0 auto 13px;border-radius:20px;display:grid;place-items:center;
  background:linear-gradient(145deg,#1489ff,#56d6ff);color:#fff;font-size:27px;font-weight:950;
  box-shadow:0 17px 30px rgba(20,124,245,.22),inset 4px 5px 10px rgba(255,255,255,.45)
}
.auth-subtitle{text-align:center;color:#71869b!important;margin-bottom:24px}
@media(max-width:900px){.portal-nav a{padding:8px 7px;font-size:11px}}
@media(max-width:700px){
  .portal-topbar-inner{min-height:64px;flex-wrap:wrap;padding:9px 0}
  .portal-nav{width:100%;order:3;overflow:auto;justify-content:flex-start;padding-bottom:2px}
  .portal-main{padding-top:24px}
  .portal-heading{display:block}
  .portal-heading .btn{margin-top:13px}
}
@media(max-width:520px){
  .portal-main .box{padding:17px}
  body.portal-auth>main,body.portal-auth>.box{margin:20px auto;padding:22px}
}