/* ONESTOP visual polish — shared native typography, buttons and detail hierarchy */
:root{--os-blue:#0757c9;--os-dark:#06265f;--os-sky:#1688e8;--os-text:#14213d;--os-muted:#60708d;--os-light:#f5f9ff;--os-border:#dbe7f6}
html,body{font-family:Arial,"Segoe UI",Helvetica,sans-serif!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,.btn,.back,.action,.tab,.quick a,.hero-quick a,.v3-filter,.open,.play{font-family:Arial,"Segoe UI",Helvetica,sans-serif!important;letter-spacing:0!important;font-weight:600!important}
body:has(.hero-quick) .hero{width:100%!important;background:linear-gradient(112deg,#0757c9 0%,#167be4 48%,#5bc8f4 100%)!important}
body:has(.hero-quick) .hero-quick{gap:10px!important}
body:has(.hero-quick) .hero-quick a{font-size:14px!important;font-weight:600!important;line-height:1.2!important;padding:10px 16px!important;border-radius:11px!important;background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.38)!important;box-shadow:0 5px 16px rgba(0,0,0,.08)!important}
body:has(.hero-quick) .hero-quick a:hover{background:rgba(255,255,255,.18)!important}
body:has(.hero-quick) .btn{font-size:15px!important;font-weight:600!important;line-height:1.25!important;padding:13px 20px!important}
body:has(.hero-quick) .badge{font-weight:600!important;letter-spacing:0!important}
body:has(.hero-quick) .hero h1{font-family:Arial,"Segoe UI",Helvetica,sans-serif!important;font-weight:800!important;letter-spacing:-1.4px!important}
body:has(.hero-quick) .hero p{font-family:Arial,"Segoe UI",Helvetica,sans-serif!important;line-height:1.6!important}
.category .cat-head{font-weight:600!important;letter-spacing:0!important}
.tool,.game{position:relative!important;background:#f8fbff!important;border:1px solid #dce8f7!important;border-left:3px solid #8bb9ed!important;color:var(--os-text)!important;box-shadow:0 3px 12px rgba(20,50,100,.035)!important}
.tool:hover,.game:hover{background:#eef6ff!important;border-left-color:var(--os-blue)!important}
.tool-title,.game-title{color:var(--os-blue)!important;font-weight:600!important;font-size:14px!important;line-height:1.35!important;letter-spacing:0!important}
.tool-desc,.game-desc{color:#5b6f8d!important;font-weight:400!important;font-size:12px!important;line-height:1.45!important;letter-spacing:0!important;margin-top:4px!important}
.open,.play{font-size:11px!important;font-weight:600!important;color:var(--os-blue)!important;padding:5px 8px!important;border-radius:7px!important;background:#eaf3ff!important;border:1px solid #d4e5fb!important}
.tool:hover .open,.game:hover .play{background:var(--os-blue)!important;color:#fff!important}
.tool-icon,.game-icon{background:#eef6ff!important;border-radius:9px!important}
.category{border-color:#dbe7f6!important}
.category.open .cat-head{border-bottom:1px solid #e1ebf8!important;background:#fafdff!important}
.category.open .game-list,.category.open .tool-list{background:#f5f9ff!important}
.v3-feature-card{font-family:Arial,"Segoe UI",Helvetica,sans-serif!important;border-left:3px solid #8bb9ed!important}
.v3-feature-title{color:var(--os-blue)!important;font-weight:600!important;font-size:14px!important;letter-spacing:0!important}
.v3-feature-desc{color:#5b6f8d!important;font-weight:400!important;font-size:12px!important;letter-spacing:0!important}
.v3-go{font-weight:600!important;background:#eaf3ff!important;border:1px solid #d4e5fb!important;border-radius:7px!important;padding:5px 8px!important}
body:has(.quick) .quick a{font-weight:600!important;letter-spacing:0!important}
body:has(.quick) .item{font-weight:500!important;letter-spacing:0!important}
body:has(.quick) .panel h3{font-weight:600!important}
body:has(.quick) .tag,.fresh-badge{font-weight:600!important;letter-spacing:0!important}
body:has(.template-grid) .btn,body:has(.template-grid) .tab,body:has(.template-grid) .tpl{font-family:Arial,"Segoe UI",Helvetica,sans-serif!important;font-weight:600!important;letter-spacing:0!important}
body:has(.template-grid) .btn{font-size:13px!important;padding:9px 12px!important}
body:has(.template-grid) .tab{font-size:13px!important}
@media(max-width:700px){body:has(.hero-quick) .hero-quick a{font-size:13px!important;padding:9px 12px!important}.tool-title,.game-title{font-size:13px!important}.tool-desc,.game-desc{font-size:11.5px!important}}

/* FREE TOOLS — native ONESTOP blue/white surface. The legacy inline styles remain for tool internals, while this isolated layer owns the page shell. */
body:has(.v3-filters){background:#eef5ff!important;color:var(--os-text)!important;font-family:Arial,"Segoe UI",Helvetica,sans-serif!important;overflow-x:hidden!important;overflow-y:auto!important}
body:has(.v3-filters) .top{height:68px!important;background:#fff!important;border-bottom:1px solid #dbe7f6!important;position:sticky!important;top:0!important;z-index:20!important;backdrop-filter:none!important}
body:has(.v3-filters) .topin{max-width:1180px!important;padding:12px 20px!important}
body:has(.v3-filters) .brand{font-size:17px!important;font-weight:700!important;color:var(--os-dark)!important}
body:has(.v3-filters) .brand span{color:var(--os-blue)!important}
body:has(.v3-filters) .back{font-size:13px!important;padding:9px 13px!important;border-radius:9px!important;background:#eef6ff!important;color:var(--os-blue)!important;border:1px solid #d5e5f8!important}
body:has(.v3-filters) main{height:auto!important;max-width:none!important;padding:0 0 28px!important;display:block!important}
body:has(.v3-filters) .hero{width:100%!important;margin:0!important;padding:34px 20px 28px!important;text-align:center!important;background:linear-gradient(135deg,#031d50 0%,#0757c9 58%,#1688e8 100%)!important;color:#fff!important}
body:has(.v3-filters) .hero .tag{color:#e8f5ff!important;background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.30)!important;box-shadow:none!important}
body:has(.v3-filters) .hero h1{color:#fff!important;background:none!important;-webkit-text-fill-color:#fff!important;font-family:Arial,"Segoe UI",Helvetica,sans-serif!important;font-size:clamp(36px,5vw,58px)!important;font-weight:800!important;letter-spacing:-1.5px!important;margin:13px 0 8px!important}
body:has(.v3-filters) .hero p{color:#e6f1ff!important;font-size:15px!important;line-height:1.55!important;max-width:700px!important;margin:0 auto 15px!important}
body:has(.v3-filters) .stats{gap:9px!important;margin:0 auto 16px!important}
body:has(.v3-filters) .stat{color:#eaf4ff!important;background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.25)!important;box-shadow:none!important;font-size:12px!important;padding:7px 12px!important;border-radius:999px!important}
body:has(.v3-filters) .stat b,body:has(.v3-filters) .stat.live b{color:#fff!important}
body:has(.v3-filters) .search{width:min(820px,100%)!important;margin:0 auto 14px!important}
body:has(.v3-filters) .search input{width:100%!important;height:52px!important;padding:0 18px!important;border-radius:13px!important;background:#fff!important;border:1px solid rgba(255,255,255,.75)!important;color:var(--os-text)!important;font-size:15px!important;box-shadow:0 10px 26px rgba(3,29,80,.16)!important}
body:has(.v3-filters) .search input::placeholder{color:#71819b!important}
body:has(.v3-filters) .search input:focus{border-color:#9fc3ef!important;box-shadow:0 0 0 3px rgba(255,255,255,.18),0 10px 26px rgba(3,29,80,.16)!important}
body:has(.v3-filters) .v3-filters{gap:8px!important;margin:0 auto!important}
body:has(.v3-filters) .v3-filter{color:#eaf4ff!important;background:rgba(255,255,255,.09)!important;border:1px solid rgba(255,255,255,.30)!important;padding:8px 13px!important;border-radius:999px!important;font-size:12px!important;font-weight:600!important}
body:has(.v3-filters) .v3-filter:hover,body:has(.v3-filters) .v3-filter.active{color:var(--os-blue)!important;background:#fff!important;border-color:#fff!important}
body:has(.v3-filters) .v3-featured{max-width:1180px!important;margin:28px auto 24px!important;padding:0 20px!important}
body:has(.v3-filters) .v3-section-title{color:var(--os-dark)!important;font-size:19px!important;font-weight:700!important}
body:has(.v3-filters) .v3-section-sub{color:var(--os-muted)!important;font-size:12px!important;margin-top:3px!important}
body:has(.v3-filters) .v3-feature-grid{gap:11px!important}
body:has(.v3-filters) .v3-feature-card{background:#fff!important;border:1px solid #dbe7f6!important;border-left:3px solid #8bb9ed!important;color:var(--os-text)!important;box-shadow:0 6px 20px rgba(20,50,100,.06)!important;border-radius:13px!important;padding:13px!important}
body:has(.v3-filters) .v3-feature-card:hover{background:#f7fbff!important;border-color:#b9d2ef!important;border-left-color:var(--os-blue)!important;transform:translateY(-2px)!important}
body:has(.v3-filters) .v3-feature-icon{background:#eef6ff!important;border-radius:10px!important}
body:has(.v3-filters) .v3-feature-title{color:var(--os-blue)!important}
body:has(.v3-filters) .v3-feature-desc{color:#5b6f8d!important}
body:has(.v3-filters) .v3-go{color:var(--os-blue)!important;background:#eaf3ff!important;border:1px solid #d4e5fb!important}
body:has(.v3-filters) .tools-area{max-width:1180px!important;margin:0 auto!important;padding:0 20px 12px!important;overflow:visible!important}
body:has(.v3-filters) .categories{gap:13px!important}
body:has(.v3-filters) .category{background:#fff!important;border:1px solid #dbe7f6!important;border-radius:15px!important;box-shadow:0 5px 20px rgba(20,50,100,.05)!important}
body:has(.v3-filters) .cat-head{color:var(--os-dark)!important;background:#fff!important;padding:15px 16px!important;min-height:60px!important;font-size:14px!important;font-weight:600!important}
body:has(.v3-filters) .cat-head small{color:var(--os-muted)!important;background:#f1f6fc!important;padding:5px 8px!important;border-radius:999px!important;font-size:10px!important}
body:has(.v3-filters) .arrow{color:var(--os-blue)!important}
body:has(.v3-filters) .category.open .cat-head{background:#fafdff!important;border-bottom:1px solid #e1ebf8!important}
body:has(.v3-filters) .tool-list{background:#f5f9ff!important;padding:0 11px 11px!important;gap:8px!important}
body:has(.v3-filters) .tool{min-height:58px!important;padding:10px 11px!important;background:#fff!important;border:1px solid #dce8f7!important;border-left:3px solid #8bb9ed!important;color:var(--os-text)!important;border-radius:10px!important;box-shadow:0 2px 8px rgba(20,50,100,.035)!important}
body:has(.v3-filters) .tool:hover{background:#eef6ff!important;border-left-color:var(--os-blue)!important;transform:translateY(-1px)!important}
body:has(.v3-filters) .tool-icon{background:#eef6ff!important}
body:has(.v3-filters) .tool-title{color:var(--os-blue)!important;font-size:14px!important;font-weight:600!important;line-height:1.35!important}
body:has(.v3-filters) .tool-desc{color:#5b6f8d!important;font-size:12px!important;font-weight:400!important;line-height:1.45!important;margin-top:4px!important}
body:has(.v3-filters) .tool .open{color:var(--os-blue)!important;background:#eaf3ff!important;border:1px solid #d4e5fb!important;font-size:11px!important;padding:5px 8px!important;border-radius:7px!important}
body:has(.v3-filters) .credit{max-width:1180px!important;margin:0 auto!important;padding:22px 20px 8px!important;color:#71819b!important;font-size:11px!important}
body:has(.v3-filters) .credit b{color:var(--os-blue)!important}
@media(max-width:900px){body:has(.v3-filters) .v3-feature-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:700px){body:has(.v3-filters) .topin{padding:10px 14px!important}body:has(.v3-filters) .hero{padding:26px 14px 22px!important}body:has(.v3-filters) .hero h1{font-size:34px!important}body:has(.v3-filters) .hero p{font-size:13px!important}body:has(.v3-filters) .v3-featured{padding:0 14px!important;margin-top:22px!important}body:has(.v3-filters) .tools-area{padding:0 14px 10px!important}body:has(.v3-filters) .categories{grid-template-columns:1fr!important}body:has(.v3-filters) .v3-feature-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:480px){body:has(.v3-filters) .v3-feature-grid{grid-template-columns:1fr!important}body:has(.v3-filters) .hero h1{font-size:30px!important}body:has(.v3-filters) .search input{height:48px!important}body:has(.v3-filters) .cat-head{font-size:13px!important}body:has(.v3-filters) .tool-title{font-size:13px!important}body:has(.v3-filters) .tool-desc{font-size:11.5px!important}}

/* RESUME MAKER — premium, fresh, spacious native ONESTOP application UI */
body:has(.template-grid){background:#eef5ff!important;color:var(--os-text)!important}
body:has(.template-grid) .app{grid-template-columns:360px minmax(0,1fr)!important;min-height:100vh;background:#eef5ff!important}
body:has(.template-grid) .panel{background:rgba(255,255,255,.98)!important;border-right:1px solid #d8e5f5!important;padding:24px!important;box-shadow:8px 0 30px rgba(20,50,100,.06)!important;position:relative!important}
body:has(.template-grid) .panel:before{content:"";display:block;height:5px;border-radius:8px;margin:-24px -24px 22px;background:linear-gradient(90deg,#031d50,#0757c9,#1688e8)}
body:has(.template-grid) .brand{font-size:23px!important;font-weight:700!important;color:var(--os-dark)!important;line-height:1.25!important}
body:has(.template-grid) .sub{font-size:13px!important;color:var(--os-muted)!important;margin:5px 0 18px!important;line-height:1.5!important}
body:has(.template-grid) .back{display:inline-flex!important;align-items:center!important;gap:5px!important;background:#eef6ff!important;border:1px solid #d5e5f8!important;border-radius:9px!important;padding:8px 11px!important;color:var(--os-blue)!important;font-size:12px!important;font-weight:600!important;margin-bottom:18px!important}
body:has(.template-grid) .btns{gap:8px!important;margin:14px 0 20px!important;padding-bottom:18px!important;border-bottom:1px solid #e5edf8!important}
body:has(.template-grid) .btn{border-radius:9px!important;padding:9px 13px!important;font-size:13px!important;font-weight:600!important;box-shadow:none!important}
body:has(.template-grid) .btn:not(.alt){background:var(--os-blue)!important;color:#fff!important}
body:has(.template-grid) .btn.alt{background:#f4f8fd!important;color:var(--os-text)!important;border:1px solid #dbe7f4!important}
body:has(.template-grid) .btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(7,87,201,.12)!important}
body:has(.template-grid) .field{margin:0 0 15px!important}
body:has(.template-grid) .field label{font-size:12px!important;color:#314565!important;font-weight:600!important;margin:0 0 6px!important}
body:has(.template-grid) .field input,body:has(.template-grid) .field textarea{width:100%!important;padding:11px 12px!important;border:1px solid #d5e1ef!important;border-radius:9px!important;background:#fbfdff!important;color:var(--os-text)!important;font-size:13px!important;line-height:1.45!important;outline:none!important;transition:border-color .18s,box-shadow .18s,background .18s!important}
body:has(.template-grid) .field input:focus,body:has(.template-grid) .field textarea:focus{border-color:#6fa5e8!important;background:#fff!important;box-shadow:0 0 0 3px rgba(7,87,201,.08)!important}
body:has(.template-grid) .field textarea{min-height:78px!important;resize:vertical!important}
body:has(.template-grid) .panel h3{font-size:14px!important;color:var(--os-dark)!important;font-weight:600!important;margin:22px 0 10px!important}
body:has(.template-grid) .tabs{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;margin:0 0 11px!important}
body:has(.template-grid) .tab{width:100%!important;text-align:left!important;padding:10px 12px!important;border:1px solid #d7e4f2!important;background:#f8fbff!important;color:#405472!important;border-radius:9px!important;font-size:13px!important;font-weight:600!important}
body:has(.template-grid) .tab.active{background:#eaf3ff!important;color:var(--os-blue)!important;border-color:#9fc3ef!important;box-shadow:inset 3px 0 0 var(--os-blue)!important}
body:has(.template-grid) .template-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;padding-bottom:18px!important}
body:has(.template-grid) .tpl{min-height:42px!important;padding:9px 10px!important;border:1px solid #dbe6f3!important;border-radius:8px!important;background:#fff!important;color:#435575!important;font-size:11px!important;font-weight:600!important;line-height:1.3!important}
body:has(.template-grid) .tpl:hover{border-color:#9fc3ef!important;background:#f4f9ff!important;color:var(--os-blue)!important}
body:has(.template-grid) .tpl.selected{border:1px solid var(--os-blue)!important;background:#eaf3ff!important;color:var(--os-blue)!important;box-shadow:0 3px 10px rgba(7,87,201,.08)!important}
body:has(.template-grid) .tpl.locked{color:#8794a8!important;background:#f5f7fa!important}
body:has(.template-grid) .main{padding:28px 34px 50px!important;background:linear-gradient(180deg,#f5f9ff 0%,#eef5ff 100%)!important;overflow:auto!important}
body:has(.template-grid) .toolbar{max-width:1050px!important;margin:0 auto 18px!important;gap:12px!important}
body:has(.template-grid) .notice{padding:10px 13px!important;background:#eaf3ff!important;border-left:4px solid var(--os-blue)!important;border-radius:9px!important;color:#355274!important;font-size:12px!important;line-height:1.45!important}
body:has(.template-grid) .toolbar .btn{padding:10px 15px!important;white-space:nowrap!important}
body:has(.template-grid) .resume{max-width:900px!important;margin:0 auto!important;background:#fff!important;border-radius:12px!important;box-shadow:0 12px 40px rgba(20,50,100,.12)!important;border:1px solid #e0e9f5!important;overflow:hidden!important}
body:has(.template-grid) .cv{padding:52px!important}
body:has(.template-grid) .name{font-weight:700!important;letter-spacing:-.5px!important}
body:has(.template-grid) .role{font-weight:600!important}
body:has(.template-grid) .contact,.muted{line-height:1.5!important}
body:has(.template-grid) .premium{backdrop-filter:blur(5px)!important;background:rgba(3,29,80,.45)!important}
body:has(.template-grid) .modal{border:1px solid #dbe7f6!important;box-shadow:0 20px 60px rgba(3,29,80,.22)!important;padding:28px!important}
body:has(.template-grid) .price{color:var(--os-blue)!important}
@media(max-width:900px){body:has(.template-grid) .app{grid-template-columns:1fr!important}body:has(.template-grid) .panel{border-right:0!important;border-bottom:1px solid #d8e5f5!important;box-shadow:0 5px 20px rgba(20,50,100,.05)!important}body:has(.template-grid) .panel:before{margin:-24px -24px 22px!important}body:has(.template-grid) .main{padding:18px 12px 35px!important}body:has(.template-grid) .cv{padding:30px!important}}
@media(max-width:560px){body:has(.template-grid) .panel{padding:18px!important}body:has(.template-grid) .panel:before{margin:-18px -18px 18px!important}body:has(.template-grid) .main{padding:12px 8px 28px!important}body:has(.template-grid) .toolbar{align-items:stretch!important}body:has(.template-grid) .toolbar .btn{width:100%!important}body:has(.template-grid) .notice{width:100%!important}body:has(.template-grid) .cv{padding:20px!important}body:has(.template-grid) .template-grid{grid-template-columns:1fr 1fr!important}}
