/* LaVision-iT customer portal — same brand as lavisionit.com: white · sky blue · black, one typeface.
   Light on every device by default; dark only when the visitor picks it (lv_theme cookie → data-theme). */
:root{
  --white:#FFFFFF; --pale:#F5FAFF; --pale-2:#E6F4FE; --ink:#0A0A0B; --muted:#4B5563; --line:#E5EAF0; --line-2:#CBD5E1;
  --link:#0369A1; --accent:#0284C7; --btn-bg:#0EA5E9; --btn-ink:#0A0A0B; --sky:#38BDF8; --sky-soft:#E0F2FE;
  --ok:#047857; --ok-bg:#D1FAE5; --err:#B42318; --err-bg:#FEE4E2; --warn:#78350F; --warn-bg:#FEF3C7; --dot:#EF4444;
  --r:16px; --r-lg:24px; --r-sm:12px;
  --shadow:0 1px 2px rgba(10,10,11,.05), 0 12px 32px -14px rgba(10,10,11,.18);
  --shadow-lg:0 2px 6px rgba(10,10,11,.04), 0 34px 70px -30px rgba(3,105,161,.38);
  --glow:radial-gradient(1100px 520px at 88% -12%, #DBEFFD 0%, rgba(219,239,253,0) 62%), radial-gradient(800px 420px at -10% 110%, #EAF6FE 0%, rgba(234,246,254,0) 60%);
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --white:#111113; --pale:#0A0A0B; --pale-2:#18181B; --ink:#F4F4F5; --muted:#A1A1AA; --line:#27272A; --line-2:#3F3F46;
  --link:#7DD3FC; --accent:#7DD3FC; --btn-bg:#38BDF8; --btn-ink:#0A0A0B; --sky-soft:#0C2A3A;
  --ok:#6EE7B7; --ok-bg:#053B2C; --err:#FCA5A5; --err-bg:#3F0D0D; --warn:#FDE68A; --warn-bg:#3A2A06;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.7);
  --shadow-lg:0 34px 70px -30px rgba(0,0,0,.85);
  --glow:radial-gradient(1100px 520px at 88% -12%, #0B2433 0%, rgba(11,36,51,0) 62%);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--glow), var(--pale); background-attachment:fixed; color:var(--ink); font:400 1rem/1.55 var(--sans)}
main{flex:1 0 auto; width:100%}
a{color:var(--link); text-underline-offset:3px}
img{max-width:100%}
h1{font-size:clamp(1.6rem,3.2vw,2.2rem); letter-spacing:-.03em; line-height:1.12; margin:0 0 8px; font-weight:800}
h2{font-size:1.12rem; letter-spacing:-.015em; margin:0 0 14px; font-weight:700}
h3{font-size:1.05rem; margin:0 0 6px}
.muted{color:var(--muted)} .small{font-size:.85rem}
.ic{width:20px; height:20px; flex:none}
.wrap{max-width:1080px; margin:0 auto; padding:30px 16px 64px}
.wrap--narrow{max-width:580px}
.wrap--wide{max-width:1140px; padding-top:34px}
.eyebrow{font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--link); margin:0 0 10px}
.eyebrow--sky{color:var(--sky)}

/* ---------- header: white bar like lavisionit.com */
.top{position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--white) 86%, transparent); -webkit-backdrop-filter:saturate(1.5) blur(14px); backdrop-filter:saturate(1.5) blur(14px); border-bottom:1px solid var(--line)}
.top-in{max-width:1140px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:-.01em; font-size:1.02rem}
.brand .mark{width:52px; height:26px; color:var(--ink)}
.brand b{color:var(--link); font-weight:800}
.brand small{font-weight:700; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--link); background:var(--sky-soft); padding:4px 9px; border-radius:999px; margin-left:4px}
.nav{display:flex; align-items:center; gap:6px; font-size:.92rem}
.nav-link{color:var(--ink); text-decoration:none; padding:8px 12px; border-radius:999px; font-weight:500}
.nav-link:hover{background:var(--pale-2)}
.nav-link.is-on{background:var(--sky-soft); color:var(--link); font-weight:700}
.icon-btn{position:relative; width:40px; height:40px; display:inline-grid; place-items:center; border-radius:999px; border:1px solid var(--line); background:var(--white); color:var(--ink); cursor:pointer; padding:0; text-decoration:none}
.icon-btn:hover{border-color:var(--line-2); background:var(--pale-2)}
.icon-btn.is-on{background:var(--sky-soft); color:var(--link); border-color:transparent}
.bell-n{position:absolute; top:-4px; right:-4px; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--dot); color:#fff; font-size:.68rem; font-weight:800; display:grid; place-items:center; border:2px solid var(--white)}
.nav .lang{font-weight:800; color:var(--link); text-decoration:none; padding:8px 10px; border-radius:999px; font-size:.85rem}
.nav .lang:hover{background:var(--pale-2)}
.nav .btn{color:var(--btn-ink)}
.inline{display:inline}
.linkbtn{background:none; border:0; color:var(--link); font:inherit; cursor:pointer; padding:0}
.nav > *{flex:none}
@media (max-width:720px){
  .nav{width:100%; gap:4px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
  .nav::-webkit-scrollbar{display:none}
  .nav-link{padding:7px 8px; white-space:nowrap; font-size:.88rem}
  .icon-btn{width:36px; height:36px}
  .nav .lang{padding:7px 6px}
  .nav .inline{margin-left:auto}
}
.notice{display:flex; align-items:center; justify-content:center; gap:10px; background:var(--warn-bg); color:var(--warn); text-align:center; padding:10px 16px; font-size:.9rem; font-weight:500}
.notice .ic{width:18px; height:18px}

/* ---------- messages */
.flash{display:flex; align-items:center; gap:10px; background:var(--sky-soft); color:var(--ink); border:1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius:var(--r-sm); padding:12px 16px; margin-bottom:18px; font-weight:500}
.flash .ic{color:var(--link)}
.error{color:var(--err); background:var(--err-bg); border-radius:var(--r-sm); padding:10px 14px; font-weight:600; margin:0 0 14px}
.ok{color:var(--ok); font-weight:600}
.big-ok{width:56px; height:56px; margin:0 auto 10px; border-radius:999px; background:var(--ok-bg); color:var(--ok); display:grid; place-items:center; font-size:1.6rem; font-weight:800}
.note{display:flex; gap:10px; align-items:flex-start; margin:18px 0 0; padding:12px 14px; border-radius:var(--r-sm); background:var(--pale); border:1px dashed var(--line-2); color:var(--muted); font-size:.88rem}
.note .ic{color:var(--link); width:18px; height:18px; margin-top:1px}

/* ---------- surfaces */
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:clamp(18px,3vw,28px); box-shadow:var(--shadow); margin-bottom:20px}
.card--center{text-align:center}
.sub{color:var(--muted); margin:0 0 20px; max-width:60ch}
.head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.head h1,.head h2{margin-bottom:0}
.h-ic{display:flex; align-items:center; gap:10px}
.h-ic .ic{color:var(--link)}
.crumb{margin:0 0 14px; font-size:.9rem}
.crumb a{text-decoration:none; font-weight:600}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px} .grid .card{margin-bottom:0}
@media (max-width:760px){.grid{grid-template-columns:1fr}}
.split{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:20px; align-items:start}
.split .card{margin-bottom:0}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* ---------- forms */
.form{display:grid; gap:15px}
.form label{display:grid; gap:7px; font-weight:600; font-size:.92rem}
.form small{font-weight:400; color:var(--muted)}
.label-row{display:flex; justify-content:space-between; gap:12px}
.label-row a{font-weight:500; font-size:.86rem}
.fs{border:0; margin:0; padding:0; display:grid; gap:15px}
.fs legend{font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:0; margin:6px 0 12px; display:flex; align-items:center; gap:10px; width:100%}
.fs legend::after{content:""; flex:1; height:1px; background:var(--line)}
input,select,textarea{font:inherit; color:var(--ink); background:var(--white); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:12px 14px; width:100%; transition:border-color .15s, box-shadow .15s}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb, var(--accent) 45%, var(--line-2))}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--sky) 28%, transparent)}
input[disabled]{opacity:.7; background:var(--pale)}
.check{display:flex !important; align-items:flex-start; gap:10px; font-weight:400 !important}
.check input{width:18px; height:18px; margin-top:3px; accent-color:var(--accent)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px} @media (max-width:560px){.row2{grid-template-columns:1fr}}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 24px; border-radius:999px; border:1px solid transparent;
  background:var(--btn-bg); color:var(--btn-ink); font:700 .98rem/1 var(--sans); text-decoration:none; cursor:pointer; justify-self:start;
  box-shadow:0 8px 20px -10px color-mix(in srgb, var(--btn-bg) 90%, transparent); transition:transform .15s, filter .15s}
.btn:hover{filter:brightness(1.06); transform:translateY(-1px)}
.btn .ic{width:18px; height:18px}
.btn-block{width:100%; justify-self:stretch}
.btn-sm{min-height:38px; padding:0 16px; font-size:.88rem}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--line-2); box-shadow:none}
.btn-outline:hover{background:var(--pale-2)}
.alt{margin:16px 0 0; font-size:.92rem; color:var(--muted)}

/* ---------- sign-in / sign-up: form beside a photo */
.auth{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg)}
.auth-form{padding:clamp(26px,5vw,60px); display:flex; flex-direction:column; justify-content:center; min-width:0}
.auth-form h1{margin-bottom:10px}
.auth-art{position:relative; min-height:660px; background:#0A0A0B; color:#fff; margin:0}
.auth-art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.auth-art::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,11,0) 30%, rgba(10,10,11,.55) 58%, rgba(10,10,11,.9) 100%)}
.auth-art-copy{position:absolute; left:0; right:0; bottom:0; z-index:1; padding:clamp(22px,3.5vw,38px)}
.auth-art-copy h2{font-size:clamp(1.4rem,2.4vw,1.85rem); line-height:1.15; letter-spacing:-.025em; font-weight:800; margin:0 0 10px; color:#fff}
.auth-lead{margin:0; color:rgba(255,255,255,.86); max-width:44ch}
.auth-steps{list-style:none; padding:0; margin:20px 0 0; display:grid; gap:10px}
.auth-steps li{display:flex; gap:12px; align-items:center; font-size:.95rem; font-weight:500; color:rgba(255,255,255,.94); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:10px 12px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.auth-steps b{flex:none; width:28px; height:28px; border-radius:999px; background:var(--sky); color:#0A0A0B; display:grid; place-items:center; font-size:.82rem; font-weight:800}
@media (max-width:860px){
  .auth{grid-template-columns:1fr}
  .auth-art{order:-1; min-height:250px}
  .auth-steps,.auth-lead{display:none}
}

/* ---------- dashboard */
.hello{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); margin-bottom:20px}
.hello-copy{padding:clamp(24px,4vw,44px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start}
.hello-art{margin:0; position:relative; min-height:250px}
.hello-art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
@media (max-width:760px){.hello{grid-template-columns:1fr} .hello-art{order:-1; min-height:190px}}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px}
@media (max-width:640px){.stats{grid-template-columns:1fr}}
.stat{display:flex; align-items:center; gap:14px; background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; text-decoration:none; color:var(--muted); font-size:.88rem; box-shadow:var(--shadow); transition:transform .15s, border-color .15s}
.stat:hover{transform:translateY(-2px); border-color:var(--line-2)}
.stat b{display:block; font-size:1.55rem; line-height:1.1; color:var(--ink); font-weight:800; letter-spacing:-.02em}
.stat-ic{width:44px; height:44px; flex:none; border-radius:14px; background:var(--sky-soft); color:var(--link); display:grid; place-items:center}
.plist{list-style:none; margin:0; padding:0}
.plist li + li{border-top:1px solid var(--line)}
.plist a{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center; padding:16px 6px; text-decoration:none; color:var(--ink); border-radius:var(--r-sm)}
.plist a:hover{background:var(--pale)}
.plist-ic{width:42px; height:42px; border-radius:12px; background:var(--pale-2); color:var(--link); display:grid; place-items:center}
.plist-main{display:grid; gap:3px; min-width:0}
.plist-main strong{overflow-wrap:anywhere}
.plist-main .muted{font-size:.85rem}
@media (max-width:520px){.plist a{grid-template-columns:auto minmax(0,1fr)} .plist a .badge{grid-column:2; justify-self:start}}

/* where a project stands */
.track{list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:5px; max-width:320px}
.track li{height:6px; border-radius:999px; background:var(--line)}
.track li.is-done{background:var(--sky)}
.track li.is-now{background:var(--accent)}
.track--off li{background:var(--line) !important}
.track--full{max-width:none; gap:8px; margin:6px 0 22px}
.track--full li,.track--full li.is-done,.track--full li.is-now{height:auto; background:none; display:grid; gap:8px; font-size:.78rem; color:var(--muted); font-weight:500}
.track--full li::before{content:""; height:7px; border-radius:999px; background:var(--line)}
.track--full li.is-done::before{background:var(--sky)}
.track--full li.is-now::before{background:var(--accent)}
.track--full li.is-now{color:var(--ink); font-weight:700}
.track--full.track--off li::before{background:var(--line)}
@media (max-width:560px){.track--full li span{display:none} .track--full li.is-now span{display:block; grid-column:1}}

.empty{text-align:center; padding:12px 0 8px}
.empty p{color:var(--muted); margin:0 0 18px}
.empty h3{font-size:1.2rem; margin:18px 0 6px}
.empty-img{width:100%; max-width:420px; aspect-ratio:8/5; object-fit:cover; border-radius:var(--r); height:auto}
.empty-ic{width:56px; height:56px; margin:0 auto 12px; border-radius:16px; background:var(--sky-soft); color:var(--link); display:grid; place-items:center}

/* new project: tips beside the form */
.tips{padding:0; overflow:hidden}
.tips img{width:100%; height:auto; aspect-ratio:8/5; object-fit:cover; display:block}
.tips-body{padding:20px 22px 22px}
.checks{list-style:none; padding:0; margin:0 0 14px; display:grid; gap:10px}
.checks li{display:flex; gap:10px; align-items:flex-start; font-size:.94rem; line-height:1.45}
.checks li::before{content:""; flex:none; width:20px; height:20px; margin-top:1px; border-radius:999px; background:var(--sky-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='%230284C7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}

/* ---------- account */
.profile{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); margin-bottom:20px}
.profile-cover{position:relative; height:clamp(150px,22vw,210px)}
.profile-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.profile-cover::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,11,0) 55%, rgba(10,10,11,.35))}
.profile-id{position:relative; z-index:1; display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; padding:0 clamp(18px,3vw,30px); margin-top:-40px}
.profile-name{flex:1 1 220px; padding-top:44px; min-width:0}
.profile-name h1{margin:0 0 2px; font-size:clamp(1.4rem,2.6vw,1.8rem); overflow-wrap:anywhere}
.profile-name p{margin:0; overflow-wrap:anywhere}
.profile-id .badge{margin-bottom:6px}
.avatar{width:84px; height:84px; flex:none; border-radius:24px; background:linear-gradient(135deg,#BAE6FD,#38BDF8 70%); color:#0A0A0B; font-weight:800; font-size:1.7rem; letter-spacing:-.02em; display:grid; place-items:center; border:4px solid var(--white); box-shadow:var(--shadow)}
.facts{display:flex; flex-wrap:wrap; gap:14px 34px; margin:18px 0 0; padding:16px clamp(18px,3vw,30px) 22px; border-top:1px solid var(--line)}
.facts dt{font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.facts dd{margin:3px 0 0; font-weight:600}

/* ---------- notifications */
.nlist{list-style:none; margin:0; padding:0}
.nlist li{display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:14px; padding:16px 4px; border-bottom:1px solid var(--line); align-items:start}
.nlist li:last-child{border-bottom:0}
.nlist li.is-new{background:linear-gradient(90deg, color-mix(in srgb, var(--sky) 10%, transparent), transparent 70%); border-radius:var(--r-sm)}
.n-ic{width:44px; height:44px; border-radius:14px; background:var(--sky-soft); color:var(--link); display:grid; place-items:center}
.n-title{font-weight:700; color:var(--ink); text-decoration:none}
.n-title:hover{text-decoration:underline}
.n-body{color:var(--muted); font-size:.92rem; margin:4px 0 0; overflow-wrap:anywhere}
.n-time{font-size:.8rem; color:var(--muted); white-space:nowrap; padding-top:2px}
.nlist--compact li{padding:12px 0}
@media (max-width:560px){.nlist li{grid-template-columns:40px minmax(0,1fr)} .n-time{grid-column:2; padding:0}}

/* ---------- lists, badges, tables (projects, admin) */
.list{list-style:none; margin:0; padding:0}
.list li{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--line)}
.list li:last-child{border-bottom:0}
.list a{display:grid; gap:2px; text-decoration:none; color:var(--ink)}
.list .muted{font-size:.85rem}
.badge{display:inline-block; padding:5px 11px; border-radius:999px; font-size:.75rem; font-weight:700; background:var(--sky-soft); color:var(--link); white-space:nowrap}
.badge--active{background:var(--ok-bg); color:var(--ok)} .badge--closed{background:var(--line); color:var(--muted)}
.badge--quoted{background:var(--sky-soft); color:var(--link)} .badge--unread,.badge--new{background:var(--err-bg); color:var(--err)}
.badge--new{padding:2px 8px; font-size:.7rem; vertical-align:2px}
.price{font-size:1.9rem; font-weight:800; letter-spacing:-.02em; margin:0 0 6px} .price span{font-size:.95rem; font-weight:500; color:var(--muted)}
.pay{display:grid; gap:12px; margin-top:12px}
.inline-form{display:flex; gap:10px; flex-wrap:wrap} .inline-form input{flex:1 1 180px; width:auto}
.thread{display:grid; gap:12px; margin-bottom:18px}
.msg{border:1px solid var(--line); border-radius:16px 16px 16px 4px; padding:12px 14px; background:var(--pale); max-width:85%}
.msg--me{margin-left:auto; background:var(--sky-soft); border-color:transparent; border-radius:16px 16px 4px 16px}
.msg-h{display:flex; justify-content:space-between; gap:12px; font-size:.82rem; color:var(--muted); margin-bottom:4px}
.msg p{margin:0}
.files{list-style:none; margin:0 0 16px; padding:0} .files li{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:.95rem}
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.tab{padding:7px 13px; border-radius:999px; border:1px solid var(--line-2); text-decoration:none; color:var(--ink); font-size:.85rem; background:var(--white)} .tab.is-on{background:var(--ink); color:var(--white); border-color:var(--ink)}
.table{width:100%; border-collapse:collapse; font-size:.92rem} .table th{text-align:left; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line-2)}
.table td{padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:top}
@media (max-width:760px){.card:has(.table){overflow-x:auto}}
.prose p{margin:0 0 12px}
.foot{border-top:1px solid var(--line); font-size:.82rem; color:var(--muted); background:color-mix(in srgb, var(--white) 70%, transparent)} .foot .wrap{padding-top:18px; padding-bottom:24px}