:root{
 --c:#087b75;
 --ink:#173c3e;
 --muted:#728789;
 --bg:#f2f7f7;
 --line:#ddebea;
}

*{box-sizing:border-box}

html,body{
 margin:0;
 min-height:100%;
 font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
 background:var(--bg);
 color:var(--ink)
}

button,input,textarea{font:inherit}
button{cursor:pointer}

.app{
 max-width:760px;
 min-height:100vh;
 margin:auto;
 padding-bottom:80px
}

.top{
 height:67px;
 padding:9px 14px;
 position:sticky;
 top:0;
 z-index:50;
 display:flex;
 align-items:center;
 justify-content:space-between;
 background:rgba(242,247,247,.93);
 backdrop-filter:blur(15px);
 border-bottom:1px solid var(--line)
}

.brand{
 border:0;
 background:none;
 color:inherit;
 display:flex;
 align-items:center;
 gap:9px;
 text-align:left
}

.logo{
 width:41px;height:41px;
 border-radius:14px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:linear-gradient(145deg,#0b958b,#07595d);
 color:white;
 font-weight:950
}

.brand b,.brand small{display:block}
.brand b{font-size:14px}
.brand small{font-size:9px;color:var(--muted)}

.bell{
 width:40px;height:40px;
 border:1px solid var(--line);
 border-radius:13px;
 background:white
}

main{padding:12px 14px 25px}

.screen{display:none}
.screen.active{display:block}

.hero{
 padding:22px;
 min-height:160px;
 border-radius:27px;
 color:white;
 background:
 radial-gradient(circle at 90% 10%,rgba(255,255,255,.18),transparent 34%),
 linear-gradient(145deg,#0b9087,#07575b);
 box-shadow:0 15px 34px rgba(4,79,81,.2)
}

.hero small{font-size:8px;letter-spacing:.16em}
.hero h1{font-size:27px;margin:9px 0 3px}
.hero p{font-size:10px;margin:0;opacity:.8}

.hero>span{
 display:inline-block;
 margin-top:19px;
 padding:6px 10px;
 border-radius:999px;
 border:1px solid rgba(255,255,255,.2);
 background:rgba(255,255,255,.1);
 font-size:9px
}

.status{
 position:relative;
 z-index:2;
 margin:-19px 10px 0;
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:7px
}

.status div{
 min-height:76px;
 border:1px solid var(--line);
 border-radius:17px;
 background:#fff;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 box-shadow:0 8px 20px rgba(8,60,62,.06)
}

.status b{font-size:16px}
.status small{font-size:8px;color:var(--muted)}

.screen>h2{
 margin:21px 3px 9px;
 font-size:13px
}

.services{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:9px
}

.services button{
 min-height:112px;
 padding:13px;
 text-align:left;
 border:1px solid var(--line);
 border-radius:20px;
 background:#fff;
 color:inherit
}

.services button>span{
 width:44px;height:44px;
 border-radius:14px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:#edf7f6;
 font-size:21px
}

.services b{
 display:block;
 margin-top:9px;
 font-size:11px
}

.services small{
 display:block;
 margin-top:3px;
 font-size:8px;
 color:var(--muted)
}

.services .ai{
 background:linear-gradient(145deg,#e8f8f5,#fff)
}

.head{
 min-height:76px;
 padding:14px;
 margin-bottom:9px;
 border-radius:21px;
 display:flex;
 align-items:center;
 gap:10px
}

.head.orange{background:#fff0d9}
.head.green{background:#e8f7ec}
.head.blue{background:#e5f4ff}
.head.purple{background:#efecff}
.head.teal{background:#e5f7f4}
.head.yellow{background:#fff2de}
.head.gray{background:#edf2f3}

.head>span{
 width:47px;height:47px;
 border-radius:15px;
 background:rgba(255,255,255,.72);
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:23px
}

.head div{flex:1}
.head h1{font-size:17px;margin:0}
.head p{font-size:9px;margin:3px 0 0;color:#698082}

.head>button{
 width:37px;height:37px;
 border:0;border-radius:11px;
 background:#fff
}

.map{
 width:100%;
 height:390px;
 overflow:hidden;
 border:1px solid var(--line);
 border-radius:20px;
 background:#dfe8e7
}

.summary-card,.info{
 margin-bottom:9px;
 padding:13px;
 border:1px solid var(--line);
 border-radius:17px;
 background:#fff;
 font-size:10px
}

.summary-card strong{font-size:24px}

.list{
 display:flex;
 flex-direction:column;
 gap:7px;
 margin-top:9px
}

.item{
 padding:11px;
 border:1px solid var(--line);
 border-radius:16px;
 background:#fff;
 display:flex;
 align-items:center;
 gap:9px
}

.item .icon{
 width:40px;height:40px;
 border-radius:13px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:#edf7f6
}

.item .copy{flex:1;min-width:0}
.item b{display:block;font-size:10px}
.item small{display:block;color:var(--muted);font-size:8px;margin-top:2px}
.value{font-weight:900;font-size:15px}

.empty{
 padding:18px;
 border:1px dashed #d3e2e1;
 border-radius:16px;
 text-align:center;
 color:var(--muted);
 background:#fff;
 font-size:9px
}

.vehicle-pin{
 width:34px;height:34px;
 border-radius:11px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:#fff;
 border:2px solid var(--c);
 font-size:18px
}

.radar-controls{
 margin:8px 0;
 padding:8px;
 display:grid;
 grid-template-columns:38px 1fr 75px;
 align-items:center;
 gap:7px;
 border:1px solid var(--line);
 border-radius:15px;
 background:#fff
}

.radar-controls button{
 width:38px;height:38px;
 border:0;border-radius:11px;
 color:#fff;background:#6558ad
}

.radar-controls span{
 font-size:8px;text-align:right;color:var(--muted)
}

.radio-page{
 min-height:68vh;
 padding:40px 20px;
 border-radius:27px;
 color:#fff;
 display:flex;
 flex-direction:column;
 align-items:center;
 text-align:center;
 background:
 radial-gradient(circle at 50% 18%,#198078,#095157 45%,#06383c)
}

.record{
 width:178px;height:178px;
 padding:14px;
 border-radius:50%;
 background:repeating-radial-gradient(circle,#142d30 0 4px,#0a1d20 5px 9px)
}

.record div{
 width:100%;height:100%;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 background:#e9c77e;
 color:#31595a;
 font-size:33px;
 font-weight:950
}

.live{margin-top:22px;color:#ffb1b1;font-size:9px}
.radio-page h1{margin:7px 0 3px}
.radio-page p{margin:0;font-size:9px;opacity:.7}

.radio-page button{
 margin-top:21px;
 padding:12px 22px;
 border:0;border-radius:999px;
 color:#175355;background:#fff;font-weight:900
}

.mini-radio{
 position:fixed;
 z-index:65;
 left:50%;
 transform:translateX(-50%);
 bottom:69px;
 width:min(720px,calc(100% - 22px));
 height:53px;
 padding:7px 10px;
 border-radius:16px;
 color:#fff;background:#0c5355;
 display:flex;
 align-items:center;
 justify-content:space-between;
 box-shadow:0 10px 28px rgba(0,45,47,.25)
}

.mini-radio[hidden]{display:none}

.mini-radio span{font-size:9px;font-weight:850}
.mini-radio button{
 width:37px;height:37px;border:0;border-radius:10px;
 color:#fff;background:rgba(255,255,255,.12)
}

.report{
 padding:12px;
 border:1px solid var(--line);
 border-radius:20px;
 background:#fff
}

.report textarea{
 width:100%;
 min-height:140px;
 padding:13px;
 border:1px solid #d7e6e5;
 border-radius:15px;
 resize:vertical;
 outline:none
}

.report-tools{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:7px;
 margin-top:7px
}

.report-tools button,
.report-tools label{
 min-height:40px;
 border:1px solid var(--line);
 border-radius:12px;
 background:#f5f9f9;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:9px;
 font-weight:800
}

.attach,.gps{
 margin-top:7px;
 padding:7px;
 border-radius:12px;
 background:#edf7f6
}

.attach{display:flex;align-items:center;gap:7px}
.attach[hidden],.gps[hidden]{display:none}
.attach img{width:52px;height:52px;border-radius:10px;object-fit:cover}
.attach span,.gps{font-size:8px}

.primary,.submit{
 width:100%;
 min-height:43px;
 margin-top:8px;
 border:0;border-radius:12px;
 color:#fff;font-weight:900
}

.primary{background:var(--c)}
.submit{background:#168159}

.ai-result,.done{
 margin-top:9px;
 padding:13px;
 border:1px solid var(--line);
 border-radius:18px;
 background:#fff;
 font-size:10px
}

.ai-result[hidden],.done[hidden]{display:none}

#aiReply{white-space:pre-wrap;line-height:1.6}

.chips{
 display:flex;flex-wrap:wrap;gap:5px;margin-top:8px
}

.chip{
 padding:4px 7px;border-radius:999px;
 background:#e8f4f2;color:#426969;font-size:8px
}

.done{text-align:center}
.done>span{
 width:47px;height:47px;
 margin:auto;
 border-radius:50%;
 display:flex;align-items:center;justify-content:center;
 background:#e6f8ec;color:#168159;font-size:22px
}
.done h2{font-size:16px}
.done small{display:block;color:var(--muted)}
.done b{font-size:17px}

.settings{
 overflow:hidden;
 border:1px solid var(--line);
 border-radius:19px;
 background:#fff
}

.settings>button{
 width:100%;
 min-height:56px;
 padding:10px 13px;
 border:0;
 border-bottom:1px solid #edf2f2;
 background:#fff;
 display:flex;
 align-items:center;
 justify-content:space-between;
 text-align:left;
 font-size:10px
}

.settings label{
 min-height:42px;
 padding:0 13px;
 display:flex;
 align-items:center;
 gap:8px;
 border-bottom:1px solid #edf2f2;
 font-size:10px
}

.settings .topic-save{
 margin:9px;
 width:calc(100% - 18px);
 min-height:41px;
 border:0;border-radius:12px;
 color:#245f5e;background:#e7f5f3;font-weight:900
}

nav{
 position:fixed;
 z-index:60;
 left:50%;
 transform:translateX(-50%);
 bottom:0;
 width:min(760px,100%);
 height:68px;
 display:grid;
 grid-template-columns:repeat(4,1fr);
 border-top:1px solid var(--line);
 background:rgba(255,255,255,.96);
 backdrop-filter:blur(15px)
}

nav button{
 border:0;background:none;color:#7e9091;
 display:flex;flex-direction:column;
 align-items:center;justify-content:center
}

nav span{font-size:17px}
nav b{font-size:8px}
nav button.active{color:var(--c)}

.toast{
 position:fixed;
 z-index:200;
 left:50%;
 transform:translateX(-50%);
 bottom:145px;
 max-width:calc(100% - 30px);
 padding:8px 13px;
 border-radius:999px;
 background:#173f41;color:#fff;font-size:9px
}
.toast[hidden]{display:none}

@media(max-width:390px){
 .map{height:345px}
}

/* =========================================================
   D2 MODULE OWNERSHIP
   SmartDocument keeps its original public AI intake UI.
   ========================================================= */

.smartdoc-owner{
 margin-bottom:9px;
 padding:12px 14px;
 border:1px solid #dce9e8;
 border-radius:18px;
 background:#fff;
}

.smartdoc-owner>span{
 display:block;
 color:#087b75;
 font-size:8px;
 font-weight:950;
 letter-spacing:.14em;
}

.smartdoc-owner>b{
 display:block;
 margin-top:4px;
 font-size:13px;
}

.smartdoc-owner>small{
 display:block;
 margin-top:4px;
 color:#718487;
 font-size:9px;
 line-height:1.55;
}

.smartdoc-frame-wrap{
 width:100%;
 min-height:720px;
 overflow:hidden;
 border:1px solid #dce9e8;
 border-radius:22px;
 background:#fff;
}

.smartdoc-frame{
 display:block;
 width:100%;
 min-height:720px;
 border:0;
 background:#fff;
}

@media(max-width:480px){
 .smartdoc-frame-wrap,
 .smartdoc-frame{
  min-height:760px;
 }
}

/* =========================================================
   D2 SMARTDOCUMENT CLEAN EMBED V3
   SmartDocument owns its own header and UI.
   ========================================================= */

.smartdoc-screen{
 width:100%;
 max-width:100%;
 padding:0 !important;
 margin:0;
 overflow:hidden;
}

.smartdoc-frame-wrap{
 width:100%;
 max-width:100%;
 height:calc(100dvh - 148px);
 min-height:560px;
 margin:0;
 padding:0;
 overflow:hidden;
 border:0;
 border-radius:0;
 background:#fff;
}

.smartdoc-frame{
 display:block;
 width:100%;
 max-width:100%;
 height:100%;
 min-height:100%;
 margin:0;
 padding:0;
 border:0;
 background:#fff;
}


/* PWA install */

.install-app-box{
 margin-top:14px;
 padding:10px 11px;
 display:flex;
 align-items:center;
 gap:10px;
 border:1px solid rgba(255,255,255,.22);
 border-radius:15px;
 background:rgba(255,255,255,.12);
}

.install-app-box>div{
 flex:1;
 min-width:0;
}

.install-app-box b{
 display:block;
 color:#fff;
 font-size:10px;
}

.install-app-box small{
 display:block;
 margin-top:2px;
 color:rgba(255,255,255,.78);
 font-size:8px;
}

.install-app-box button{
 min-width:70px;
 height:35px;
 padding:0 12px;
 border:0;
 border-radius:11px;
 background:#fff;
 color:#087b75;
 font-size:9px;
 font-weight:900;
}

.install-app-box[hidden]{
 display:none;
}