/* Hosey Mijn omgeving v1 — consistent with hosey.nl */
:root{--ink:#122f37;--teal:#1b7b70;--accent:#dca36c;--paper:#f6f8f5;--panel:#fff;--line:#dde7e0;--muted:#647c78;--mint:#e7f2ed;--sans:system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);font-family:var(--sans);color:var(--ink);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--teal);text-decoration:none}a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid #cf985c;outline-offset:2px}
h1,h2,h3,p{margin-top:0}
.topbar{position:relative;z-index:20;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 20px #12353708}
.topbar-inner{width:min(1400px,calc(100% - 55px));margin:auto;min-height:79px;display:flex;gap:22px;align-items:center}
.logo{width:148px;display:block;flex:none}.logo img{width:148px;height:auto;object-fit:contain}
.top-label{font-size:10px;font-weight:850;color:#5d8079;letter-spacing:.12em;border-left:1px solid #d4e3db;padding-left:22px}
.top-links{display:flex;align-items:center;gap:26px;margin-left:auto;font-weight:700;font-size:12px}
.top-links a{color:#456962}.top-links a:hover{color:#0e816e}
main{min-height:calc(100vh - 152px)}
.public-wrap{width:min(488px,calc(100% - 34px));margin:60px auto 90px}
.public-intro{text-align:center;margin-bottom:28px}
.overline{display:block;color:var(--teal);text-transform:uppercase;letter-spacing:.15em;font-size:10px;font-weight:800;margin-bottom:15px}
.public-intro h1{font-size:clamp(34px,4vw,46px);letter-spacing:-.055em;line-height:1.14;margin-bottom:13px}
.public-intro p{font-size:14px;color:var(--muted)}
.panel{background:var(--panel);border:1px solid #dce6df;border-radius:13px;box-shadow:0 14px 48px #143b2610;padding:30px;margin-bottom:24px;min-width:0}
.panel-head{margin-bottom:25px}
.panel-head h2{font-size:22px;letter-spacing:-.04em;line-height:1.35;margin:0 0 9px}
.panel-head p{font-size:13px;color:var(--muted);line-height:1.65;margin:0}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:19px}
.field>span{font-size:12px;font-weight:800;color:#345850}
.field input,.field select,.field textarea{width:100%;border:1px solid #cdded3;padding:13px 14px;background:#fcfefd;border-radius:8px;color:var(--ink);min-height:48px;transition:box-shadow .18s,border-color .18s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#3d9a83;box-shadow:0 0 0 3px #97ddc72e}
.field textarea{min-height:150px;resize:vertical}
.check{display:flex;align-items:start;gap:11px;color:#637d76;font-size:12px;line-height:1.7;margin:10px 0 22px}
.check input{margin:3px 0 0;accent-color:var(--teal)}
.check a{text-decoration:underline;text-underline-offset:3px}
.button{appearance:none;display:inline-flex;align-items:center;justify-content:space-between;gap:15px;background:transparent;border-radius:9px;padding:13px 19px;font-size:12px;line-height:1.45;font-weight:780;border:1px solid #bfd1c5;min-height:46px;color:var(--ink);text-align:left;transition:transform .15s,background .15s,border-color .15s}
.button:hover{transform:translateY(-1px);text-decoration:none;background:#eef5ef}
.button.primary{color:#fff;background:var(--ink);border-color:var(--ink)}
.button.primary:hover{background:#1d645c}
.button.secondary{background:#eaf2ed;color:#145b52;border-color:#d4e5da}
.button.secondary:hover{background:#daebe2}
form .button{width:100%}
.formfoot{border-top:1px solid var(--line);padding-top:21px;margin-top:22px;text-align:center;color:var(--muted);font-size:12px}
.formfoot a{font-weight:800}
.small{font-size:12px}.muted{color:var(--muted)}
.alert{max-width:100%;background:#eaf5ee;border:1px solid #b6dacc;border-left:3px solid #298c71;color:#1e6755;padding:15px 18px;border-radius:8px;margin-bottom:22px;font-size:13px;line-height:1.65;overflow-wrap:anywhere}
.app-shell{width:min(1400px,calc(100% - 55px));margin:35px auto 75px;display:grid;grid-template-columns:258px minmax(0,1fr);gap:32px;align-items:start}
.sidebar{background:#fff;border:1px solid #dce6df;border-radius:13px;min-height:620px;overflow:hidden;position:sticky;top:24px;display:flex;flex-direction:column}
.sidebar-top{background:#163b42;padding:27px 24px}
.side-tag{font-size:11px;letter-spacing:.13em;font-weight:800;color:#bbe1d6;text-transform:uppercase}
.side-section{font-size:10px;letter-spacing:.12em;font-weight:850;color:#81958f;padding:25px 23px 11px}
.nav-item{display:flex;gap:13px;align-items:center;color:#486861;font-size:13px;font-weight:750;padding:11px 19px;margin:2px 10px;border-radius:8px;transition:background .15s}
.nav-item:hover{background:#edf6f0;text-decoration:none;color:#166d5f}
.nav-item.selected{background:#e2f0e8;color:#12695a;border-left:3px solid #d2a06e;padding-left:16px}
.nav-icon{display:grid;place-items:center;width:25px;height:25px;border-radius:7px;background:#ecf4ef;color:#1b776a;font-size:18px;flex:none}
.sidebar-bottom{padding:24px 18px;margin-top:auto;border-top:1px solid var(--line)}
.side-identity{display:flex;gap:10px;align-items:center;min-width:0}
.avatar{height:37px;width:37px;border-radius:11px;background:#d9eee4;display:grid;place-items:center;color:#147d6e;font-weight:850;flex:none}
.side-identity div{min-width:0}
.side-identity strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.side-identity small{font-size:11px;color:#80978e}
.logout{color:#8b5a51;border:0;background:transparent;padding:10px 0 0;font-size:11px;font-weight:750;text-align:left}
.logout:hover{text-decoration:underline}
.main-area{min-width:0}
.page-intro{display:flex;flex-direction:column;margin:16px 0 28px}
.page-intro h1{font-size:35px;line-height:1.18;letter-spacing:-.05em;margin:0}
.intro{font-size:14px;color:#5c786f;max-width:750px;margin:0 0 28px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin-bottom:25px}
.stat{border:1px solid var(--line);background:#fff;border-radius:12px;padding:25px;min-width:0}
.stat span{display:block;font-size:12px;font-weight:750;color:#5a7971}
.stat strong{display:block;font-size:40px;line-height:1.1;letter-spacing:-.06em;margin:17px 0 10px}
.stat small{color:#859991;font-size:11px}
.quicklinks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:24px}
.quicklinks a{padding:23px 20px;min-width:0;background:#e5eee7;border:1px solid #cfe0d3;border-radius:11px;display:flex;flex-direction:column;color:#184c47;transition:transform .16s}
.quicklinks a:hover{transform:translateY(-2px);text-decoration:none}
.quicklinks span{font-size:27px;color:#177b6d;margin-bottom:14px}
.quicklinks strong{font-size:13px}
.quicklinks small{font-size:11px;color:#66827a;margin-top:7px}
.table{border:1px solid #e0e9e3;border-radius:10px;overflow:hidden;margin:9px 0}
.table-h,.table-r{display:grid;grid-template-columns:1.6fr 1fr;gap:15px;align-items:center;padding:15px 20px}
.table-h{background:#f2f6f2;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.08em;color:#69847a;text-transform:uppercase;font-weight:800}
.table-r{border-bottom:1px solid #edf1ed;font-size:13px;overflow-wrap:anywhere}
.table-r:last-child{border-bottom:0}
.table-r code{max-width:100%;overflow-wrap:anywhere;white-space:normal;font-family:ui-monospace,Consolas,monospace;font-size:11px}
.table-r small{display:block;color:#8b9c95;font-size:10px;margin-top:4px}
.table-r strong{color:#1d4947}
.table-r.dns-cols,.table-h.dns-cols{grid-template-columns:1.3fr .45fr .4fr 2fr}
.table-r.req-cols,.table-h.req-cols{grid-template-columns:1.6fr 1.2fr .9fr}
.empty{text-align:center;background:#fcfdfb;padding:38px 20px;color:#84988c;font-size:13px}
.panel-actions{margin-top:23px}
.status{display:inline-block;border-radius:7px;background:#e5efe9;color:#227264;padding:7px 9px;font-size:10px;letter-spacing:.025em;font-weight:800;width:max-content;max-width:100%}
.status.pending{background:#f8eddf;color:#9f733e}
.status.good{background:#e0f1e7;color:#147454}
.domain-block{border:1px solid #dce6df;border-radius:11px;padding:21px 24px;margin-bottom:15px}
.domain-title{display:flex;align-items:center;gap:16px}
.domain-icon{display:grid;place-items:center;background:#dfeee5;width:45px;height:45px;border-radius:11px;font-size:24px;color:#158171;flex:none}
.domain-title>div{min-width:0;flex:1}
.domain-title h3{font-size:17px;margin:0 0 4px;overflow-wrap:anywhere}
.domain-title small{font-size:11px;color:#84978f}
.domain-action{padding:20px 0 0 61px}
.verify-box{margin-top:21px;border-top:1px solid var(--line);padding-top:17px}
.verify-box p{font-size:13px;color:#657f76}
.record{display:grid;grid-template-columns:125px 1fr;gap:13px;align-items:center;border-bottom:1px solid #e7eee8;padding:12px 0}
.record span{font-size:11px;color:#728981;font-weight:800}
.record code,.secret strong{overflow-wrap:anywhere;font-family:ui-monospace,Consolas,monospace;font-size:12px;color:#175d54}
.verify-box form{margin-top:21px}
.verify-box .button{width:auto}
.secret{padding:17px;border-radius:9px;border:1px dashed #93b9a7;background:#eaf5ed;text-align:center;margin:20px 0;font-size:15px;letter-spacing:.07em;overflow-wrap:anywhere}
.recover-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:19px 0 27px}
.recover-grid code{background:#e8f3ec;padding:12px;text-align:center;border-radius:7px;font-size:13px;font-family:ui-monospace,Consolas,monospace;letter-spacing:.05em}
.notice{padding:16px 19px;border:1px solid #c9ded3;border-radius:8px;background:#edf5ef;color:#4f7066;margin:0 0 22px;font-size:13px}
.notice.warning{background:#fbf3e8;border-color:#e7d5b9;color:#92703b}
.notice.success{background:#e3f4e9;color:#186b57}
.intro-block{background:#153941;color:#fff;padding:35px;border-radius:12px;margin-bottom:25px}
.intro-block h2{font-size:24px;letter-spacing:-.04em}
.intro-block p{color:#c0d7d1;font-size:13px;max-width:560px}
.intro-block .button{color:#173b3b}
.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.footer{border-top:1px solid var(--line);background:#fff;padding:25px max(28px,calc((100% - 1400px)/2));display:flex;align-items:center;justify-content:space-between;gap:20px;color:#6c847b;font-size:11px}
.footer a{color:#1f7969}
@media(max-width:1180px){.quicklinks{grid-template-columns:repeat(2,1fr)}.app-shell{grid-template-columns:230px minmax(0,1fr);gap:22px}.table-h,.table-r{padding:15px}}
@media(max-width:850px){.app-shell{display:block}.sidebar{position:static;min-height:0;margin-bottom:26px}.sidebar-top,.sidebar-bottom,.side-section{display:none}.sidebar{display:flex;flex-direction:row;flex-wrap:wrap;padding:9px;gap:5px}.nav-item{margin:0;padding:9px;font-size:12px}.nav-item.selected{padding-left:9px;border-left:0;border-bottom:3px solid #d2a06e}.page-intro{margin-top:23px}.stats{gap:11px}}
@media(max-width:650px){.topbar-inner,.app-shell{width:calc(100% - 30px)}.topbar-inner{min-height:68px;gap:9px}.logo,.logo img{width:107px}.top-label{display:none}.top-links{gap:13px;font-size:11px}.public-wrap{margin-top:37px}.panel{padding:23px 19px}.page-intro h1{font-size:29px}.stats{grid-template-columns:1fr}.stat{padding:20px}.stat strong{font-size:30px;margin:11px 0 6px}.quicklinks{grid-template-columns:1fr 1fr;gap:10px}.quicklinks a{padding:16px}.domain-title{flex-wrap:wrap}.domain-title .status{width:100%}.domain-action{padding-left:0}.table-h{display:none}.table-r,.table-r.dns-cols,.table-r.req-cols{grid-template-columns:1fr;gap:6px}.table-r{padding:17px 20px}.grid-two{grid-template-columns:1fr;gap:0}.record{grid-template-columns:1fr;gap:4px}.footer{display:block}.footer span{display:block;margin-top:6px}.sidebar .nav-item{flex:1 1 auto}.sidebar .nav-icon{display:none}}
@media(max-width:390px){.quicklinks{grid-template-columns:1fr}.recover-grid{grid-template-columns:1fr}.top-links{gap:9px}.top-links a:first-child{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.quicklinks a{transition:none}}