:root{--navy:#123c78;--navy2:#0b2d5d;--teal:#0b8f90;--orange:#ef6c00;--bg:#eef3f8;--card:#fff;--text:#17324d;--muted:#6d8091;--line:#dbe5ee;--green:#168a62;--red:#b54343}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:Tahoma,"Segoe UI",Arial,sans-serif;color:var(--text)}
.topbar{background:linear-gradient(135deg,var(--navy2),var(--navy));color:#fff;padding:16px 20px}
.topin{max-width:1500px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:13px}.logoPlaceholder{width:54px;height:54px;border:1px solid rgba(255,255,255,.35);border-radius:15px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);font-weight:800}
.topbar h1{font-size:23px;margin:0 0 6px}.topbar p{font-size:11px;margin:0;opacity:.84}.topActions{display:flex;gap:8px;align-items:center}
.liveBadge{font-size:10px;border-radius:20px;padding:7px 10px;background:#1a8b67;color:#fff}.liveBadge.demo{background:#a56b00}
.nav{background:#fff;border-bottom:1px solid var(--line);padding:8px 16px;display:flex;gap:7px;position:sticky;top:0;z-index:7}.navBtn{border:0;border-radius:10px;padding:9px 13px;font:inherit;background:#edf3f8;color:#31536f;cursor:pointer}.navBtn.active{background:var(--navy);color:#fff}
.wrap{max-width:1500px;margin:16px auto;padding:0 16px 40px}.hidden{display:none!important}.setupBanner{background:#fff8e7;border:1px solid #f0d58d;color:#765100;border-radius:14px;padding:12px 14px;margin-bottom:12px;font-size:11px;line-height:1.9}.setupBanner strong{display:block;font-size:12px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:15px;box-shadow:0 6px 22px rgba(30,60,90,.05);margin-bottom:14px}.card h2{font-size:16px;color:var(--navy);margin:0 0 8px}.card p{font-size:11px;color:var(--muted);line-height:1.8;margin:3px 0}
.filters{display:grid;grid-template-columns:1fr 1fr 1fr 1.3fr 120px;gap:9px;align-items:end}.lastUpdate{font-size:10px;color:var(--muted);margin-top:9px}
label{font-size:11px;color:#5d7387;display:block;margin-bottom:5px}input,select,textarea{width:100%;border:1px solid #cfdce7;border-radius:10px;padding:9px 10px;font:inherit;color:var(--text);background:#fbfdff;outline:none}textarea{resize:vertical}
.btn{border:0;border-radius:10px;padding:10px 12px;font:inherit;font-weight:700;cursor:pointer}.btn.primary{background:var(--navy);color:#fff}.btn.teal{background:var(--teal);color:#fff}.btn.soft{background:#eaf1f7;color:#31536f}.btn.danger{background:#fff0ef;color:var(--red)}.btn.white{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.25)}.btn.wide,.wide{width:100%}
.kpis{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;margin:13px 0}.kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px;min-height:104px;position:relative;overflow:hidden}.kpi:before{content:"";position:absolute;right:0;top:0;width:4px;height:100%;background:var(--navy)}.kpi:nth-child(2n):before{background:var(--teal)}.kpi:nth-child(3n):before{background:var(--orange)}.kpi span{font-size:10px;color:var(--muted);line-height:1.6}.kpi strong{display:block;font-size:25px;color:var(--navy);margin-top:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.sectionHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.sectionHead h2{margin:0}.barlist{display:grid;gap:8px}.barlist.compact{margin-bottom:13px}.barrow{display:grid;grid-template-columns:170px 1fr 70px;gap:8px;align-items:center}.barname{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track{height:18px;background:#eef3f7;border-radius:9px;overflow:hidden}.fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--navy));border-radius:9px}.barval{font-size:11px;font-weight:700;color:var(--navy)}
.compareControls{display:grid;grid-template-columns:1fr 1fr 120px;gap:8px}.emptyBox{border:1px dashed #cbd8e3;border-radius:14px;background:#fbfdff;padding:15px;color:var(--muted);font-size:11px;margin-top:10px}.compareTable{width:100%;border-collapse:collapse;font-size:11px;margin-top:10px}.compareTable th,.compareTable td{padding:8px;border-bottom:1px solid #edf2f6;text-align:center}.compareTable th{background:#f5f8fb}.plus{color:var(--green);font-weight:800}.minus{color:var(--red);font-weight:800}
.cultureKpis,.managerKpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}.miniKpi{border:1px solid var(--line);border-radius:13px;padding:11px;background:#f9fbfd}.miniKpi b{display:block;color:var(--navy);font-size:21px}.miniKpi span{font-size:10px;color:var(--muted)}
.programGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.programCard{border:1px solid var(--line);border-radius:15px;padding:12px;background:#fbfdff}.programCard h3{font-size:13px;color:var(--navy);margin:7px 0}.programMeta{font-size:10px;color:var(--muted);line-height:1.9}.miniImages{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.miniImages img{width:55px;height:45px;object-fit:cover;border-radius:7px;border:1px solid var(--line)}
.formGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.formGrid.two{grid-template-columns:1fr 1fr}.fieldGap{margin-top:10px}.pill{border-radius:20px;padding:7px 10px;font-size:10px;font-weight:700}.pill.warning{background:#fff3dc;color:#8c5e00}.pill.ok{background:#e8f8f2;color:#147454}.pill.returned{background:#fff0ef;color:#a33f3f}.pill.draft{background:#edf2f7;color:#5e7080}.pill.pending{background:#fff3dc;color:#8c5e00}
.uploadBox{margin-top:12px;border:1px dashed #a9bdcf;border-radius:14px;background:#f8fbfd;padding:12px;display:flex;justify-content:space-between;align-items:center;gap:10px}.uploadBtn{display:inline-flex;align-items:center;justify-content:center;background:var(--teal);color:#fff;border-radius:10px;padding:10px 14px;font-size:11px;font-weight:700;cursor:pointer;margin:0}.imageCounter,.fileName,.miniResult{font-size:10px;color:var(--muted);margin-top:7px;line-height:1.8}.imagePreview{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}.thumb{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:#f3f6f9}.thumb img{width:100%;height:100%;object-fit:cover}.thumb button{position:absolute;left:5px;top:5px;border:0;border-radius:50%;width:25px;height:25px;background:rgba(177,55,55,.9);color:#fff;cursor:pointer}.actions{display:flex;gap:8px;margin-top:12px}
.listItem{border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:8px;display:grid;grid-template-columns:1fr auto;gap:10px;background:#fbfdff}.listItem h3{font-size:13px;color:var(--navy);margin:0 0 5px}.listActions{display:flex;gap:6px;align-items:center}.userAssign{display:grid;grid-template-columns:1fr 250px auto;gap:8px;align-items:center}
.modal{position:fixed;inset:0;background:rgba(8,24,41,.55);display:flex;align-items:center;justify-content:center;padding:18px;z-index:30}.modalCard{width:min(440px,100%);background:#fff;border-radius:18px;padding:18px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.25)}.modalClose{position:absolute;left:12px;top:10px;border:0;background:#eef3f7;width:30px;height:30px;border-radius:50%;font-size:20px;cursor:pointer}.authTabs{display:flex;gap:7px;margin-bottom:14px}.authTab{border:0;border-radius:10px;padding:9px 13px;font:inherit;background:#edf3f8;cursor:pointer}.authTab.active{background:var(--navy);color:#fff}
.toast{position:fixed;left:20px;bottom:20px;background:#17324d;color:#fff;border-radius:10px;padding:11px 14px;font-size:11px;opacity:0;pointer-events:none;transition:.2s;z-index:40}.toast.show{opacity:1}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(4,1fr)}.programGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.topin{flex-direction:column;align-items:flex-start}.filters{grid-template-columns:1fr 1fr}.grid2{grid-template-columns:1fr}.formGrid{grid-template-columns:1fr 1fr}.programGrid{grid-template-columns:1fr}.imagePreview{grid-template-columns:repeat(3,1fr)}.barrow{grid-template-columns:120px 1fr 60px}.userAssign{grid-template-columns:1fr}}
@media(max-width:520px){.filters,.formGrid,.formGrid.two,.compareControls{grid-template-columns:1fr}.kpis{grid-template-columns:1fr 1fr}.cultureKpis,.managerKpis{grid-template-columns:1fr 1fr}.imagePreview{grid-template-columns:1fr 1fr}.topActions{flex-wrap:wrap}.nav{overflow:auto}}

/* ===== Version 3: news + expanded charts ===== */
.chartGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.newsHero{background:linear-gradient(135deg,#fff,#f5f9fd)}
.newsHero h2{font-size:21px;margin-bottom:5px}
.newsList{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.newsCard{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 6px 22px rgba(30,60,90,.05)}
.newsImage{width:100%;aspect-ratio:16/10;background:#eef3f7;object-fit:cover;display:block}
.newsNoImage{width:100%;aspect-ratio:16/10;background:linear-gradient(135deg,#e8f0f7,#f6f9fb);display:flex;align-items:center;justify-content:center;color:#8296a8;font-size:12px}
.newsBody{padding:14px}.newsBody h3{font-size:16px;color:var(--navy);margin:0 0 7px;line-height:1.8}.newsDate{font-size:10px;color:var(--muted);margin-bottom:8px}.newsText{font-size:11px;line-height:2;color:#40586c;white-space:pre-line}
.newsActions{display:flex;align-items:center;gap:8px;border-top:1px solid #edf2f6;padding-top:10px;margin-top:12px}.likeBtn{border:0;border-radius:10px;padding:8px 11px;background:#f0f5f9;color:#37536c;cursor:pointer;font:inherit;font-size:11px}.likeBtn.liked{background:#fff0f1;color:#b33648}.likeCount{font-size:10px;color:var(--muted)}
.commentArea{margin-top:12px;border-top:1px dashed #dce5ed;padding-top:10px}.commentArea h4{font-size:11px;color:var(--navy);margin:0 0 8px}.commentForm{display:grid;grid-template-columns:130px 1fr auto;gap:7px;align-items:start}.commentForm input,.commentForm textarea{font-size:11px;padding:8px}.commentForm textarea{min-height:58px}.commentList{display:grid;gap:7px;margin-top:9px}.commentItem{background:#f8fbfd;border:1px solid #e5edf4;border-radius:10px;padding:8px}.commentItem b{font-size:10px;color:#34536e}.commentItem p{font-size:10px;margin:4px 0 0;color:#62798d;line-height:1.8}
.promoteLine{display:flex;align-items:center;gap:7px;font-size:10px;color:#6a7e90;margin-top:7px}.promoteLine input{width:auto;accent-color:var(--teal)}
.commentModeration{border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:8px;background:#fbfdff}.commentModeration .meta{font-size:10px;color:var(--muted);margin-bottom:5px}.commentModeration .txt{font-size:11px;line-height:1.8}.commentModeration .actions{margin-top:7px}
@media(max-width:1050px){.newsList{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.chartGrid{grid-template-columns:1fr}.commentForm{grid-template-columns:1fr}.newsList{grid-template-columns:1fr}}


/* ===== Version 4: responsive mobile + news filters + competitions ===== */
html{max-width:100%;overflow-x:hidden}body{max-width:100%;overflow-x:hidden}.nav{-webkit-overflow-scrolling:touch}.navBtn{white-space:nowrap}.newsFilters{grid-template-columns:1fr 1fr 1.2fr 1.2fr 110px 100px}.newsMetaLine{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:7px}.libraryBadge,.topicBadge{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;font-size:9px}.libraryBadge{background:#eef5ff;color:#285d92}.topicBadge{background:#edf8f6;color:#16766c}.tagComposer{display:grid;grid-template-columns:1fr auto;gap:7px}.tagChips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.tagChip{display:inline-flex;align-items:center;gap:5px;background:#edf6f5;color:#176f69;border:1px solid #cfe7e3;border-radius:999px;padding:6px 9px;font-size:10px}.tagChip button{border:0;background:transparent;color:#9b3f3f;cursor:pointer;font-size:15px;line-height:1}.importPreview{margin-top:10px;border:1px solid var(--line);border-radius:12px;padding:10px;background:#f9fbfd;max-height:310px;overflow:auto}.previewOk{color:var(--green);font-weight:700}.previewWarn{color:#a66a00;font-weight:700}.tableScroll{overflow:auto;-webkit-overflow-scrolling:touch}.smallTable{width:100%;border-collapse:collapse;font-size:10px;min-width:680px}.smallTable th,.smallTable td{padding:7px;border-bottom:1px solid #e5edf4;text-align:center;white-space:nowrap}.smallTable th{background:#eef4f8;color:#31536f;position:sticky;top:0}.competitionList{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.competitionCard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:15px;box-shadow:0 6px 22px rgba(30,60,90,.05)}.competitionCard h3{font-size:16px;color:var(--navy);margin:0 0 7px}.competitionPeriod{font-size:10px;color:var(--muted);margin-bottom:8px}.competitionStatus{display:inline-flex;border-radius:999px;padding:5px 8px;font-size:9px;font-weight:700;margin-bottom:7px}.competitionStatus.open{background:#e8f8f2;color:#147454}.competitionStatus.closed{background:#edf2f7;color:#5e7080}.competitionStatus.upcoming{background:#fff3dc;color:#8c5e00}.identityNotice{background:#fff8e7;border:1px solid #f0d58d;color:#765100;border-radius:12px;padding:10px;font-size:10px;line-height:1.9;margin-bottom:12px}.questionList{display:grid;gap:10px}.publicQuestion,.builderQuestion{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fbfdff}.publicQuestion h3,.builderQuestion h3{font-size:12px;margin:0 0 9px;color:var(--navy);line-height:1.8}.optionList{display:grid;gap:6px}.optionLine{display:flex;gap:7px;align-items:center;border:1px solid #e4ebf2;border-radius:10px;padding:8px;background:#fff;font-size:11px}.optionLine input{width:auto}.questionBuilderHead{display:flex;align-items:center;justify-content:space-between;gap:10px}.questionBuilder{display:grid;gap:10px;margin-top:10px}.builderTop{display:grid;grid-template-columns:1fr 170px auto;gap:8px;align-items:end}.optionBuilder{display:grid;grid-template-columns:1fr 150px;gap:7px;margin-top:8px}.builderOptions{display:grid;gap:6px}.builderOption{display:grid;grid-template-columns:auto 1fr auto;gap:7px;align-items:center}.builderOption input[type=radio]{width:auto}.builderOption .removeOption{border:0;background:#fff0ef;color:#a33f3f;border-radius:8px;padding:7px;cursor:pointer}.competitionManagerItem{border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:9px;background:#fbfdff}.competitionManagerTop{display:grid;grid-template-columns:1fr auto;gap:10px}.competitionManagerActions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.drawPanel{margin-top:9px;padding-top:9px;border-top:1px dashed #dce5ed;display:grid;grid-template-columns:110px 1fr auto auto;gap:7px;align-items:end}.drawResult{margin-top:8px;background:#f3faf7;border:1px solid #d5eee2;border-radius:10px;padding:9px;font-size:10px;line-height:1.9}.questionAnswerPreview{font-size:10px;line-height:1.8;color:#4c6376}.requiredStar{color:#b54343}

@media(max-width:900px){.newsFilters{grid-template-columns:1fr 1fr}.competitionList{grid-template-columns:1fr}.drawPanel{grid-template-columns:1fr 1fr}.competitionManagerTop{grid-template-columns:1fr}}
@media(max-width:640px){
  .wrap{padding:0 9px 28px;margin-top:9px}.topbar{padding:11px 10px}.topbar h1{font-size:17px;line-height:1.7}.topbar p{font-size:10px}.logoPlaceholder{width:45px;height:45px;border-radius:12px}.topin{gap:10px}.topActions{width:100%}.topActions .btn{flex:1}.liveBadge{font-size:9px}.nav{padding:7px 8px;gap:5px}.navBtn{padding:10px 11px;min-height:42px}.card{border-radius:14px;padding:11px;margin-bottom:10px}.card h2{font-size:14px}.newsHero h2{font-size:17px}.filters,.newsFilters,.formGrid,.formGrid.two,.compareControls,.builderTop,.optionBuilder,.drawPanel{grid-template-columns:1fr}.kpis{grid-template-columns:1fr 1fr;gap:7px}.kpi{min-height:85px;padding:10px}.kpi strong{font-size:21px}.cultureKpis,.managerKpis{grid-template-columns:1fr 1fr}.barrow{grid-template-columns:96px 1fr 46px;gap:5px}.barname,.barval{font-size:9px}.track{height:16px}.programGrid,.newsList,.competitionList{grid-template-columns:1fr}.newsBody{padding:11px}.newsBody h3{font-size:14px}.newsText{font-size:11px}.commentForm{grid-template-columns:1fr}.listItem,.userAssign{grid-template-columns:1fr}.listActions,.competitionManagerActions{justify-content:flex-start}.imagePreview{grid-template-columns:1fr 1fr}.uploadBox{align-items:stretch;flex-direction:column}.uploadBtn{min-height:44px}.btn{min-height:42px}input,select,textarea{font-size:16px;padding:10px}.questionBuilderHead{align-items:stretch;flex-direction:column}.questionBuilderHead .btn{width:100%}.builderOption{grid-template-columns:auto 1fr auto}.tagComposer{grid-template-columns:1fr}.tagComposer .btn{width:100%}.compareTable{min-width:590px}.compareResult{overflow:auto}.sectionHead{align-items:flex-start;flex-direction:column}.sectionHead>.btn{width:100%}.competitionEntryCard{scroll-margin-top:60px}
}