html,body,#root{margin:0;min-height:100%}:root{--blue-950: #0a2347;--blue-900: #0f376f;--blue-800: #1752a0;--blue-700: #1f67c8;--sky-500: #55b9ff;--white: #ffffff;--text: #0b2a55;--text-soft: #446792;--line: #c7def4;--danger: #b72136;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:var(--text)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 0% 0%,#d7f0ff 0%,transparent 35%),radial-gradient(circle at 100% 12%,#cae9ff 0%,transparent 35%),linear-gradient(145deg,#f8fcff,#ebf6ff 48%,#ddedff)}#root{min-height:100vh;padding:1rem 1.2rem 2rem}.app-shell{width:min(1180px,100%);margin:0 auto}.navbar{position:sticky;top:.8rem;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1rem;border-radius:18px;background:#ffffffd1;border:1px solid rgba(22,85,166,.2);box-shadow:0 14px 32px #10366e1a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.logo-wrap{display:inline-flex;align-items:center;gap:.7rem;border:0;background:transparent;cursor:pointer;text-align:left;color:inherit}.logo-dot{width:1.1rem;height:1.1rem;border-radius:999px;background:linear-gradient(130deg,var(--sky-500),var(--blue-700));box-shadow:0 0 0 6px #d8edff}.logo-text{display:grid}.logo-text strong{font-size:1rem}.logo-text small{color:var(--text-soft);font-size:.76rem}.nav-links{display:flex;gap:.55rem;flex-wrap:wrap;justify-content:flex-end}.nav-btn{border:1px solid rgba(17,83,162,.28);background:#f2f9ff;color:var(--blue-900);padding:.58rem .95rem;border-radius:11px;font-size:.92rem;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.nav-btn:hover{transform:translateY(-1px)}.nav-btn:disabled{opacity:.75;cursor:not-allowed;transform:none}.nav-primary{color:var(--white);border-color:transparent;background:linear-gradient(135deg,var(--blue-700),var(--blue-800));box-shadow:0 9px 18px #144d993d}main{margin-top:1rem}.chip{display:inline-flex;margin:0;padding:.24rem .65rem;border-radius:999px;font-size:.78rem;font-weight:700;color:var(--blue-900);background:linear-gradient(150deg,#e5f3ff,#cde9ff)}.home-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem}.hero-panel,.pulse-panel,.about-panel,.login-card,.overview-card,.kpi-card,.chart-card,.client-card,.client-detail-card,.guard-card{border-radius:18px;border:1px solid var(--line);background:#ffffffe6;box-shadow:0 12px 24px #0b397814}.hero-panel{grid-column:span 8;padding:1.6rem}.hero-panel h1{margin:.45rem 0 .75rem;font-size:clamp(1.5rem,3.5vw,2.3rem);line-height:1.2}.hero-panel p{margin:0;color:var(--text-soft);line-height:1.55;max-width:95%}.home-actions{margin-top:1rem;display:flex;gap:.55rem;flex-wrap:wrap}.pulse-panel{grid-column:span 4;padding:1.25rem;background:linear-gradient(160deg,#fffffff2,#ddefffcc)}.pulse-panel h3{margin:.5rem 0;font-size:1.1rem}.pulse-panel p{margin:0;color:var(--text-soft)}.about-panel{grid-column:span 12;padding:1.35rem}.about-panel h2{margin:0 0 .55rem}.about-panel p{margin:0;color:var(--text-soft);line-height:1.55}.split-content{display:grid;grid-template-columns:1.3fr .7fr;gap:1rem;align-items:center}.image-frame{margin:0;border-radius:14px;overflow:hidden;border:1px solid #d3e5f8;min-height:170px}.image-frame img{width:100%;height:100%;object-fit:cover;display:block}.image-frame-sm{min-height:120px}.workflow-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.workflow-item{border-radius:12px;border:1px solid #d4e6fa;background:#f5fbff;padding:.85rem}.workflow-item h4{margin:0 0 .4rem}.workflow-item p{margin:0;color:var(--text-soft);font-size:.92rem}.center-screen{min-height:calc(100vh - 140px);display:grid;place-items:center}.login-card{width:min(560px,100%);padding:1.7rem}.login-card h2{margin:.45rem 0}.login-card p{margin-top:0;color:var(--text-soft)}.login-form{display:grid;gap:.45rem}.login-form label{font-weight:600;margin-top:.45rem;color:#21487e}.login-form input{border:1px solid #bdd7f6;border-radius:9px;background:#f9fcff;color:#163a67;font-size:.94rem;padding:.68rem .75rem}.login-form input:focus{outline:2px solid #8cc8f8;border-color:#73b9ef}.error-box{margin:.5rem 0 0;color:var(--danger);font-weight:600;font-size:.9rem}.full-btn{width:100%;margin-top:.8rem}.help-box{margin-top:1rem;border-radius:10px;border:1px dashed #9ac7ef;background:#eef8ff;padding:.85rem}.help-box p{margin:0 0 .35rem;font-weight:700;color:#24548f}.help-box code{display:block;margin-bottom:.35rem;border-radius:7px;padding:.3rem .45rem;background:#ddf0ff;color:#133f73;font-size:.84rem}.dashboard-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem;min-height:calc(100vh - 150px);align-content:center}.overview-card,.guard-card{grid-column:span 12;padding:1.25rem}.overview-card h2,.guard-card h2{margin:.45rem 0}.overview-card p,.guard-card p{margin:0;color:var(--text-soft)}.kpi-grid{grid-column:span 12;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}.kpi-card{padding:.95rem}.kpi-card p{margin:0;color:var(--text-soft)}.kpi-card h3{margin:.35rem 0;color:#184c8d}.kpi-card span{font-size:.85rem;font-weight:700;color:#1a71cf}.chart-card{grid-column:span 6;padding:1.1rem}.chart-card h3{margin-top:0}.trend-graph{height:220px;display:flex;gap:.8rem;align-items:flex-end;border-radius:12px;border:1px solid #d4e6fa;background:#f7fcff;padding:.9rem}.trend-col{flex:1;display:grid;justify-items:center;gap:.35rem}.trend-bars{display:flex;align-items:flex-end;gap:.22rem;height:170px}.bar{width:15px;border-radius:8px 8px 2px 2px;display:inline-block}.bar.roi{background:linear-gradient(180deg,#4db4ff,#1970d1)}.bar.margin{background:linear-gradient(180deg,#89d0ff,#3d8ddf)}.trend-col small{color:var(--text-soft);font-weight:600}.channel-list{display:grid;gap:.7rem}.channel-row{display:grid;grid-template-columns:150px 1fr 92px;gap:.6rem;align-items:center}.channel-row p{margin:.12rem 0 0;font-size:.84rem;color:var(--text-soft)}.channel-track{height:12px;border-radius:999px;border:1px solid #c4dcf4;background:#deefff;overflow:hidden}.channel-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#57b8ff,#1b6bc8)}.client-card{grid-column:span 12;padding:1.1rem}.client-card h3{margin:0}.client-card p{margin:.4rem 0 .75rem;color:var(--text-soft)}.client-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.client-item{border:1px solid #c7def4;border-radius:12px;background:#f6fbff;padding:.75rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;text-align:left}.client-item strong{display:block;color:#17457f}.client-item small{color:var(--text-soft)}.client-item span{color:#1b67bf;font-weight:700;font-size:.84rem}.client-detail-card{width:min(860px,100%);padding:1.35rem}.client-detail-card h2{margin:.45rem 0}.client-detail-card p{margin-top:0;color:var(--text-soft)}.client-detail-grid{margin-top:.6rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.client-detail-grid div{border:1px solid #d0e4f8;border-radius:11px;background:#f7fcff;padding:.75rem}.client-detail-grid h4{margin:0 0 .35rem}.client-detail-grid p{margin:0}.detail-actions{margin-top:1rem;display:flex;gap:.55rem;flex-wrap:wrap}.appear{animation:fadeUp .55s ease both}.delay-1{animation-delay:.06s}.delay-2{animation-delay:.14s}.delay-3{animation-delay:.2s}.delay-4{animation-delay:.26s}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:980px){.hero-panel,.pulse-panel,.about-panel,.overview-card,.chart-card,.client-card{grid-column:span 12}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workflow-grid,.client-detail-grid,.client-list,.split-content{grid-template-columns:1fr}}@media(max-width:680px){#root{padding:.7rem}.navbar{position:static;flex-direction:column;align-items:flex-start}.nav-links{width:100%;justify-content:flex-start}.kpi-grid{grid-template-columns:1fr}.channel-row{grid-template-columns:1fr;gap:.35rem}.trend-graph{height:210px;overflow-x:auto}.trend-col{min-width:56px}.hero-panel,.pulse-panel,.about-panel,.login-card,.overview-card,.kpi-card,.chart-card,.client-card,.client-detail-card,.guard-card{padding:.95rem}}