:root{--nav:#0b2044;--ink:#14294d;--muted:#64748b;--line:#e0e7f1;--bg:#f3f6fb;--blue:#214f98;--pale:#e8effc;--serif:Georgia,'Yu Mincho',serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;font-size:14px;line-height:1.6}button,input,select{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #5984c4;outline-offset:3px}
.hidden{display:none!important}
.sidebar{position:fixed;inset:0 auto 0 0;width:228px;background:var(--nav);color:#d2d7df;padding:35px 24px;display:flex;flex-direction:column}
.brand{font-size:28px;letter-spacing:-1.1px;font-weight:700;color:white;display:flex;align-items:center;gap:6px}
.brand-mark{display:inline-grid;place-items:center;width:30px;height:34px;background:#acc2e2;color:#0f2443;border-radius:11px 5px 11px 5px;font-family:var(--serif);font-style:italic;margin-right:3px}
.brand-dot{font-size:7px;color:#acc2e2;align-self:flex-end;margin-bottom:11px}
.product{font-size:10px;letter-spacing:3px;margin:25px 0 30px;color:#96a0b0}
.product span{background:#243248;border:1px solid #425167;border-radius:4px;padding:1px 5px;letter-spacing:0;margin-left:5px}
.nav-link{border:0;background:none;color:#959faf;display:flex;width:100%;text-align:left;gap:13px;align-items:center;padding:13px 14px;border-radius:7px;margin:4px 0;font-size:17px}
.nav-link span{font-size:12px;font-weight:600}
.nav-link.active{background:#22334d;color:#cbd9ed}
.nav-link:hover{background:#22334d}
.sidebar-bottom{margin-top:auto;padding:25px 12px 0}
.sidebar-bottom strong{font-size:12px;color:#c8cfd9}
.sidebar-bottom p{font-size:11px;color:#8c96a5;line-height:1.9}
.sidebar-bottom a{display:block;font-size:10px;color:#97a5b9;margin-top:12px}
.privacy-icon{font-size:28px;color:#8da9d3;margin-bottom:10px}
.plan{border-top:1px solid #2e3c50;font-size:11px;color:#a6b6ce;margin-top:23px;padding-top:17px}main{margin-left:228px;padding:0 42px;max-width:1900px}
.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted)}
.topbar span{margin:0 13px;color:#afb6bf}
.topbar b{font-weight:500;color:#293547}
.identity{display:flex;align-items:center;font-size:10px;gap:7px}
.small-dot{width:6px;height:6px;background:#3361a5;display:inline-block;border-radius:100%}
.topbar .small-dot{margin:0}
.heading{display:flex;justify-content:space-between;align-items:center;padding:32px 0 26px;gap:15px}
.eyebrow{font-size:9px;letter-spacing:2px;font-weight:600;color:#6c7889;margin:0 0 10px}h1{font-size:29px;letter-spacing:.5px;font-weight:650;line-height:1.5;margin:0}h2{font-size:14px;margin:0}h3{font-size:14px}h4{font-size:12px}
.subtitle{color:var(--muted);font-size:11px;margin:8px 0 0}
.button{background:var(--blue);color:white;border:1px solid var(--blue);border-radius:6px;padding:10px 15px;font-size:11px;font-weight:600;white-space:nowrap}
.secondary{background:#fff;color:var(--ink);border:1px solid #d4d9e1}
.button:hover{filter:brightness(.95)}
.card{background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 2px 3px #132a4d02}
.filters{display:flex;gap:20px;padding:16px 19px;align-items:flex-end}
.filters label{font-size:9px;letter-spacing:.3px;color:var(--muted);flex:1}
.filters .page-filter{flex:1.8}select,input{display:block;width:100%;border:1px solid #dadfe5;background:#fff;border-radius:5px;color:#232f41;padding:8px 10px;margin-top:4px;font-size:12px;min-height:35px}select{cursor:pointer}
.icon-button{background:#fff;border:1px solid var(--line);color:#606e82;width:36px;height:36px;border-radius:5px;font-size:21px;flex-shrink:0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:20px 0}
.stat{padding:18px 20px}
.stat>span{display:flex;justify-content:space-between;font-size:10px;color:#66707f}
.stat i{font-style:normal;font-size:11px;color:#96a0af}
.stat strong{display:block;font-size:32px;line-height:1.3;font-weight:550;letter-spacing:-1px;margin:10px 0 7px}
.stat small{font-size:9px;color:#89909b}
.quality{background:#ebeff5;border-color:#d9e0e9}
.quality strong{font-size:20px;letter-spacing:0;margin-top:17px;margin-bottom:13px;color:#28497b}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:start;gap:20px}
.panel-head{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:8px}
.tabs,.devices{display:flex;gap:3px}
.tab,.device{border:0;background:none;font-size:10px;color:#838b97;padding:6px 10px;border-radius:4px}
.tab{font-size:11px;font-weight:600;padding:7px 10px}
.tab.selected{color:var(--blue);background:#ebf0f6}
.device.selected{background:#e9ecf0;color:#2c3a4e}
.map-toolbar{padding:12px 20px;display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #eceef1;font-size:10px;color:#7a8390;align-items:center}
.map-toolbar>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:65%}
.map-toolbar label{display:flex;align-items:center;gap:7px;white-space:nowrap}
.map-toolbar select{display:inline-block;width:65px;font-size:10px;margin:0;min-height:28px;padding:4px}
.map-topnote{padding:12px 20px;display:flex;align-items:center;gap:7px;font-size:9px;color:#828a96}
.map-topnote .text-button{margin-left:auto}
.text-button{background:none;border:0;padding:0;color:var(--blue);font-size:10px;white-space:nowrap}
.map-viewport{position:relative;overflow:hidden;max-height:720px;padding:10px 35px 0 45px;background:#f5f6f7;overflow-y:auto}#heatmap{display:block;width:100%;height:auto;background:#fff;border:1px solid #e0e3e8;box-shadow:0 1px 4px #161d2908}
.map-axis{position:absolute;left:8px;top:10px;bottom:0;display:flex;flex-direction:column;justify-content:space-between;font-size:8px;color:#9ba2ac;pointer-events:none}
.map-empty{position:absolute;inset:20% 35px auto 45px;text-align:center;pointer-events:none;color:#717f94;background:#fff9;padding:20px 5px}
.map-empty strong{display:block;font-size:16px;margin-bottom:10px}
.map-empty span{font-size:11px}
.legend{display:flex;align-items:center;padding:14px 20px;gap:7px;font-size:8px;color:#7f8896}
.legend>div{width:100px;height:6px;border-radius:4px;background:linear-gradient(90deg,#80cba0,#f4dc68,#f79b55,#df5358)}
.legend p{margin:0 0 0 auto;font-size:8px}
.ranking .panel-head{border-bottom:0;padding-bottom:0}
.ranking h2{font-size:12px}
.muted{font-size:10px;color:#8d94a0;margin:5px 20px 18px}
.rank-label{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:10px 20px;font-size:9px;color:#9299a5;background:#fafbfc}
.rank-row{width:100%;background:none;border:0;border-top:1px solid #eceef1;display:flex;padding:15px 18px;text-align:left;align-items:center;gap:10px}
.rank-row:hover,.rank-row.selected{background:#eff2f6}
.rank-n{font-size:11px;color:#929ba9;width:12px}
.rank-name{min-width:0;flex:1}
.rank-name b{display:block;font-size:10px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:135px}
.rank-name small{font-size:8px;display:block;color:#888f9b;margin-top:3px}
.rank-value{font-size:14px;font-weight:600;color:#41526c;text-align:right}
.rank-value small{display:block;font-size:8px;color:#969fac;font-weight:400}
.footnote{font-size:9px;color:#9097a1;line-height:1.9;padding:14px 19px;border-top:1px solid var(--line);margin:0}
.note-card{background:#e6ebf4;border-color:#d0dae8;margin-top:18px;padding:19px}
.note-icon{color:#586984;font-size:24px}
.note-card h3{font-size:12px;margin:8px 0}
.note-card p{font-size:10px;line-height:1.9;color:#758091}
.note-card h4{margin:15px 0 7px}
.divider{height:1px;background:#cdd7e5;margin-top:18px}code{font-size:10px;background:#d4ddeb;border-radius:3px;padding:2px 4px}
.retention{display:flex;gap:10px;padding:17px 10px;color:#989fa8}
.retention>span{font-size:20px}
.retention p{margin:0;font-size:9px;line-height:1.9}
.method-note{color:#969ba3;font-size:9px;line-height:1.8;margin:18px 0 25px}footer{border-top:1px solid var(--line);font-size:10px;color:#979ea9;padding:20px 0;display:flex;justify-content:space-between}footer span{font-size:9px}
.mobile-only{display:none}
.empty{padding:55px 20px;text-align:center;margin:20px 0}
.empty h2{font-size:20px}
.empty p{color:var(--muted);font-size:12px}
.empty-mark{font-size:35px;color:var(--blue)}
.demo,.message{padding:11px 15px;font-size:11px;background:#fff4d9;border:1px solid #eee1b8;border-radius:5px;margin-top:16px}
.message{background:#ecf0f6;color:#2f425f}
.message.error{background:#fff0eb;color:#9b4731}dialog{border:1px solid var(--line);border-radius:10px;width:680px;max-width:94vw;max-height:85vh;padding:0;color:var(--ink);box-shadow:0 20px 80px #111f3333}dialog::backdrop{background:#091a3255}
.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:18px 23px;border-bottom:1px solid var(--line)}#dialog-body{padding:23px;font-size:12px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}form label{display:block;font-size:11px;color:#6d7581}form .button{margin-top:15px}
.site-item{border:1px solid var(--line);padding:16px;border-radius:6px;margin:16px 0}
.site-item h3{font-size:14px;margin:0}
.site-item p{font-size:10px;color:var(--muted);margin:5px 0}
.page-item{padding:9px 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:9px;font-size:11px}
.page-item span{flex:1}
.page-item small{color:var(--muted)}
.page-item button{border:0;background:#eceff4;color:#515f73;border-radius:4px;padding:4px 8px;font-size:9px}
.site-item form{margin-top:12px}
.site-item form input{font-size:11px}
.tag-code{display:block;background:#0f1e35;color:#becfe9;font:11px/1.8 monospace;padding:18px;white-space:pre-wrap;word-break:break-all;border-radius:6px}
.help{font-size:11px;color:#7d8490;line-height:1.9}
.badge{background:#dfe6f2;color:#405a81;font-size:9px;border-radius:4px;padding:2px 7px}
.admin-card{padding:22px;margin-bottom:20px}
.admin-card h2{margin-bottom:15px}
.admin-row{padding:15px 0;border-top:1px solid var(--line);overflow-wrap:anywhere}
.admin-row form{display:grid;grid-template-columns:80px 80px 1fr auto;gap:12px;align-items:end}
.admin-row form .button{margin:0}
.admin-row small{font-size:10px;color:var(--muted)}
.admin-row strong{font-size:11px}
.admin-actions{display:flex;justify-content:space-between;gap:10px;margin:8px 0}
.admin-audit{font:10px/1.8 monospace;white-space:pre-wrap;overflow-wrap:anywhere}
@media(min-width:1500px){main{padding:0 55px}
.workspace{grid-template-columns:minmax(0,1fr) 340px}
.map-viewport{max-height:850px}
.rank-name b{max-width:170px}}
@media(max-width:1150px){.sidebar{width:190px;padding:28px 18px}main{margin-left:190px;padding:0 24px}
.workspace{grid-template-columns:minmax(0,1fr) 270px}
.stat{padding:15px}
.stat strong{font-size:28px}
.quality strong{font-size:18px}
.map-panel .panel-head{flex-wrap:wrap}
.filters{gap:12px}
.rank-name b{max-width:110px}}
@media(max-width:900px){.sidebar{width:78px;padding:26px 13px}
.brand{font-size:0}
.brand-mark{font-size:28px;margin:auto}
.brand-dot,.product,.nav-link span,.sidebar-bottom{display:none}
.nav-link{justify-content:center;padding:13px;margin-top:20px}main{margin-left:78px;padding:0 20px}
.workspace{grid-template-columns:minmax(0,1fr)}
.insights{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.note-card{margin:0}
.retention{display:none}
.rank-name b{max-width:170px}
.stats{gap:10px;grid-template-columns:1fr 1fr}
.stat strong{font-size:25px}
.quality strong{font-size:17px}
.stat small{font-size:8px}
.stat>span{font-size:9px}
.heading{padding-top:24px}h1{font-size:25px}}
@media(max-width:600px){.sidebar{position:static;width:100%;height:58px;padding:10px 18px;flex-direction:row;align-items:center}
.brand{font-size:23px}
.brand-mark{font-size:25px;width:25px;height:28px;margin:0 7px 0 0}
.sidebar nav{display:flex;margin-left:auto}
.nav-link{margin:0;padding:6px 12px}
.nav-link.active{display:none}main{margin:0;padding:0 16px}
.topbar{height:45px;font-size:10px}
.identity{font-size:8px}
.heading{align-items:flex-start;gap:5px}
.heading>.button{font-size:9px;padding:8px}
.eyebrow{font-size:8px;letter-spacing:1px}
.mobile-only{display:block}h1{font-size:23px}
.subtitle{font-size:9px}
.filters{flex-wrap:wrap;padding:12px;gap:10px}
.filters label,.filters .page-filter{flex:auto;width:43%}
.filters label:nth-child(3){width:75%}
.stats{grid-template-columns:1fr 1fr}
.stat{padding:15px}
.stat strong{font-size:29px}
.quality strong{font-size:19px}
.insights{grid-template-columns:1fr}
.map-viewport{padding-left:32px;padding-right:15px}
.map-topnote{padding:12px;font-size:8px}
.map-topnote .text-button{font-size:8px}
.panel-head{padding:14px 12px}
.map-toolbar{padding:10px 12px}
.map-empty strong{font-size:12px}
.map-empty span{font-size:9px}
.legend{padding:12px;font-size:7px}
.legend>div{width:65px}
.legend p{font-size:7px}footer span{display:none}
.form-grid{grid-template-columns:1fr}
.admin-row form{grid-template-columns:1fr 1fr}
.admin-row form label:nth-child(3){grid-column:span 2}}

/* Shared Skymiis brand kit v1.0.0; keep the product palette independent. */
.brand .skymiis-heatmap-logo{display:block;width:160px;height:auto;max-width:100%}
.brand .skymiis-heatmap-mark{display:none}
@media(min-width:621px) and (max-width:900px){.brand .skymiis-heatmap-logo{display:none}
.brand .skymiis-heatmap-mark{display:block}}

/* Heatmap navy palette; shared logo artwork keeps its approved colors. */
.sidebar{background:linear-gradient(165deg,#102b58 0%,#091a36 100%)}
.brand .skymiis-heatmap-logo img{display:block;width:100%;height:auto}
.product{font-size:8px;letter-spacing:1.5px;margin:22px 0 26px}
.topbar{min-height:82px;height:auto;gap:20px;padding:14px 0}
.identity{display:flex;align-items:center;gap:16px;min-width:0;font-size:11px}
.user-info{display:flex;align-items:center;gap:10px;min-width:0}
.avatar{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:50%;background:#e4ecfa;color:#214f98;font-size:13px;font-weight:700}
.user-details{display:flex;flex-direction:column;min-width:0;gap:2px}
#user-name{color:#172f58;font-size:12px;font-weight:600;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.current-plan{font-size:10px;color:#496388;letter-spacing:.3px}
#auth-status{color:#64748b}
.identity .button{font-size:11px;padding:8px 13px}
.welcome{padding:64px 24px;text-align:center;background:radial-gradient(ellipse at top,#e9f0ff,white 65%);margin-bottom:40px}
.welcome-symbol{display:grid;place-items:center;margin:0 auto 24px;width:56px;height:56px;border:1px solid #d3e1fa;border-radius:16px;background:#fff;color:#214f98;font-size:30px}
.welcome h2{font-size:30px;line-height:1.65;letter-spacing:1px}
.welcome>p:not(.eyebrow){font-size:13px;line-height:2;color:#60738f;margin:18px 0 26px}
.welcome>.button{display:inline-block;padding:13px 26px;font-size:12px}
.welcome-plans{display:flex;gap:32px;justify-content:center;margin:38px auto 16px;font-size:12px;color:#64748b}
.welcome-plans span{padding:0 25px}.welcome-plans span+span{border-left:1px solid #d5deeb}
.welcome-plans b{display:block;color:#233f69;margin-bottom:4px;font-size:12px}.welcome small{font-size:10px;color:#64748b}
@media(min-width:601px) and (max-width:900px){.brand .skymiis-heatmap-logo{display:none}.brand .skymiis-heatmap-mark{display:block}}
@media(max-width:600px){.brand .skymiis-heatmap-logo{display:block;width:142px}.brand .skymiis-heatmap-mark{display:none}.topbar{min-height:79px;padding:12px 0;gap:8px}.breadcrumb{display:none}.identity{width:100%;justify-content:space-between;gap:10px}.user-info{gap:9px;flex:1}#user-name{max-width:160px;font-size:12px}.current-plan{font-size:10px}.identity .button{font-size:11px}.welcome{padding:38px 16px}.welcome h2{font-size:24px}.welcome-plans{gap:10px}.welcome-plans span{padding:0 12px}}
/* Analysis and monitoring */
.notifications,.comparison-controls,.comparison-result,.signal-summary { margin-bottom:20px; padding:22px 24px; }
.notifications h2,.comparison-result h2 { font-size:16px; margin:0; }
.comparison-controls { display:flex; flex-wrap:wrap; align-items:end; gap:14px; }
.comparison-controls label { display:grid; gap:7px; color:#526781; font-size:12px; }
.comparison-controls input,.comparison-controls select { min-height:38px; border:1px solid #dbe3ee; border-radius:8px; padding:6px 10px; background:#fff; color:#193454; }
.comparison-result table { width:100%; border-collapse:collapse; font-size:13px; }
.comparison-result th,.comparison-result td { text-align:right; padding:12px 8px; border-bottom:1px solid #e5ebf2; }
.comparison-result th:first-child { text-align:left; }
.signal-summary { display:flex; gap:32px; align-items:center; background:#edf3fc; border-color:#d8e5f7; }
.signal-summary>div { min-width:160px; display:grid; gap:5px; }
.signal-summary strong { font-size:30px; color:#163a69; }
.signal-summary span { font-size:12px; font-weight:600; }
.signal-summary small,.signal-summary p { font-size:11px; color:#536983; line-height:1.8; }
.alert-row { display:flex; justify-content:space-between; gap:15px; align-items:center; padding:12px; background:#fff6e7; border-radius:8px; margin-top:8px; font-size:12px; }
.alert-row small { display:block; margin-top:5px; color:#65768b; }
.alert-row.resolved { background:#edf7f2; }
.notes-panel { padding:22px; }
.notes-panel h2 { font-size:15px; margin:0; }
.note-row { border-bottom:1px solid #e5ebf2; padding:16px 0; }
.note-row small { color:#718199; font-size:11px; }
.note-row p { font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
#note-form,#monitor-form { display:grid; gap:18px; }
#note-form label,#monitor-form label { display:grid; gap:8px; }
@media(max-width:1000px) { .signal-summary { flex-wrap:wrap; gap:20px; } .signal-summary p { margin:0; } .map-panel>.panel-head { flex-wrap:wrap; gap:15px; } }
@media(max-width:600px) { .notifications,.comparison-controls,.comparison-result,.signal-summary { padding:17px; } .comparison-controls label { flex:1 1 130px; } .comparison-controls input { min-width:0; width:100%; } .signal-summary>div { min-width:100px; } .alert-row { align-items:start; } .comparison-result { overflow-x:auto; } .tabs { flex-wrap:wrap; } }