.vtxws-root{
  --vtxws-navy-950:#0F1417;
  --vtxws-navy-900:#161C21;
  --vtxws-navy-800:#212A31;
  --vtxws-navy-700:#2E3A43;
  --vtxws-gold:#B8912F;
  --vtxws-gold-light:#D4AF5A;
  --vtxws-gray-900:#20262B;
  --vtxws-gray-700:#4A535C;
  --vtxws-gray-500:#7C868F;
  --vtxws-gray-300:#C7CDD3;
  --vtxws-gray-200:#DEE2E6;
  --vtxws-gray-100:#EEF0F2;
  --vtxws-surface:#F2F3F5;
  --vtxws-card:#FFFFFF;
  --vtxws-border:#E1E4E8;
  --vtxws-text:#1B2126;
  --vtxws-text-muted:#6B7580;
  --vtxws-success:#2E7D5B;
  --vtxws-success-bg:#E5F3EC;
  --vtxws-danger:#B23A3A;
  --vtxws-danger-bg:#FBEAEA;
  --vtxws-info:#3E6FA6;
  --vtxws-info-bg:#EAF1FB;

  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--vtxws-text);
  background:var(--vtxws-surface);
}
.vtxws-root *{box-sizing:border-box;}
.vtxws-hidden{display:none !important;}
.vtxws-root button{font-family:inherit; cursor:pointer; border:none;}
.vtxws-root input, .vtxws-root textarea, .vtxws-root select{font-family:inherit; font-size:14px;}
.vtxws-root .vtxws-full{width:100%;}
.vtxws-root .vtxws-auto{width:auto;}
.vtxws-root .vtxws-auto-w{max-width:150px;}

/* ---------- LOGIN ---------- */
.vtxws-login-view{min-height:80vh; display:flex; flex-wrap:wrap; border-radius:14px; overflow:hidden; box-shadow:0 1px 3px rgba(20,25,30,0.08);}
.vtxws-login-brand{
  flex:1.1; min-width:300px;
  background:linear-gradient(160deg, var(--vtxws-navy-950) 0%, var(--vtxws-navy-800) 100%);
  color:#fff; display:flex; flex-direction:column; justify-content:space-between;
  padding:48px 52px; position:relative; overflow:hidden;
}
.vtxws-login-brand::after{content:""; position:absolute; width:480px; height:480px; border-radius:50%; border:1px solid rgba(184,145,47,0.22); top:-160px; right:-160px;}
.vtxws-login-brand::before{content:""; position:absolute; width:300px; height:300px; border-radius:50%; border:1px solid rgba(199,205,211,0.14); bottom:-120px; right:-40px;}
.vtxws-brand-mark{display:flex; align-items:center; gap:12px; z-index:1;}
.vtxws-mono{width:42px; height:42px; background:var(--vtxws-gold); border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:19px; color:var(--vtxws-navy-950);}
.vtxws-name{font-size:19px; font-weight:700; letter-spacing:0.3px;}
.vtxws-name span{color:var(--vtxws-gold-light); font-weight:500;}
.vtxws-login-tagline{z-index:1; max-width:420px;}
.vtxws-login-tagline h1{font-size:30px; line-height:1.28; font-weight:700; margin:18px 0 14px;}
.vtxws-login-tagline p{color:rgba(255,255,255,0.62); font-size:14.5px; line-height:1.7;}
.vtxws-login-footnote{z-index:1; font-size:11.5px; color:rgba(255,255,255,0.38); letter-spacing:0.3px;}
.vtxws-login-form-wrap{flex:1; min-width:300px; display:flex; align-items:center; justify-content:center; padding:40px; background:#fff;}
.vtxws-login-card{width:100%; max-width:360px;}
.vtxws-login-card h2{font-size:21px; font-weight:700; margin-bottom:6px;}
.vtxws-sub{color:var(--vtxws-text-muted); font-size:13.5px; margin-bottom:24px;}
.vtxws-login-error{background:var(--vtxws-danger-bg); color:var(--vtxws-danger); font-size:13px; padding:10px 12px; border-radius:8px; margin-bottom:16px;}

/* ---------- FORM ELEMENTS ---------- */
.vtxws-field{margin-bottom:16px;}
.vtxws-field label{display:block; font-size:12px; font-weight:600; color:var(--vtxws-text-muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.3px;}
.vtxws-field input, .vtxws-field select, .vtxws-field textarea{
  width:100%; padding:11px 13px; border:1px solid var(--vtxws-border); border-radius:8px; background:#fff; transition:border-color .15s;
}
.vtxws-field input:focus, .vtxws-field select:focus, .vtxws-field textarea:focus{outline:none; border-color:var(--vtxws-navy-700); box-shadow:0 0 0 3px rgba(46,58,67,0.12);}
.vtxws-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.vtxws-span-2{grid-column:1/-1;}
.vtxws-row-flex{display:flex; gap:10px;}
.vtxws-row-flex input[type=text], .vtxws-row-flex input:not([type]){flex:1; padding:11px 13px; border:1px solid var(--vtxws-border); border-radius:8px;}

/* ---------- BUTTONS ---------- */
.vtxws-btn{padding:11px 20px; border-radius:8px; font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:background .15s, transform .1s;}
.vtxws-btn-primary{background:var(--vtxws-navy-900); color:#fff;}
.vtxws-btn-primary:hover{background:var(--vtxws-navy-800);}
.vtxws-btn-gold{background:var(--vtxws-gold); color:var(--vtxws-navy-950);}
.vtxws-btn-gold:hover{background:var(--vtxws-gold-light);}
.vtxws-btn-ghost{background:transparent; color:var(--vtxws-navy-900); border:1px solid var(--vtxws-border) !important;}
.vtxws-btn-ghost:hover{background:var(--vtxws-surface);}
.vtxws-btn-danger-outline{background:transparent; color:var(--vtxws-danger); border:1px solid #E9C6C6 !important;}
.vtxws-btn-danger-outline:hover{background:var(--vtxws-danger-bg);}
.vtxws-btn-sm{padding:7px 12px; font-size:12px; border-radius:6px;}

/* ---------- APP SHELL ---------- */
.vtxws-app-shell{display:flex; min-height:80vh; border-radius:14px; overflow:hidden; box-shadow:0 1px 3px rgba(20,25,30,0.08);}
.vtxws-sidebar{width:240px; background:var(--vtxws-navy-950); color:#fff; display:flex; flex-direction:column; padding:22px 0; flex-shrink:0;}
.vtxws-sidebar .vtxws-brand-mark{padding:0 22px 24px; border-bottom:1px solid rgba(255,255,255,0.08); margin-bottom:16px;}
.vtxws-sidebar .vtxws-mono{width:34px; height:34px; font-size:15px;}
.vtxws-sidebar .vtxws-name{font-size:15px;}
.vtxws-nav-item{display:flex; align-items:center; gap:11px; padding:10px 22px; color:rgba(255,255,255,0.58); font-size:13.5px; font-weight:500; cursor:pointer; border-right:3px solid transparent;}
.vtxws-nav-item:hover{color:#fff; background:rgba(255,255,255,0.04);}
.vtxws-nav-item.active{color:#fff; background:rgba(184,145,47,0.12); border-right-color:var(--vtxws-gold);}
.vtxws-nav-icon{width:16px; text-align:center; font-size:13.5px;}
.vtxws-sidebar-bottom{margin-top:auto; padding:14px 22px 0; border-top:1px solid rgba(255,255,255,0.08);}
.vtxws-user-chip{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.vtxws-user-avatar{width:32px; height:32px; border-radius:50%; background:var(--vtxws-gold); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--vtxws-navy-950); font-size:12px; flex-shrink:0;}
.vtxws-u-name{font-size:13px; font-weight:600; color:#fff;}
.vtxws-u-role{font-size:10.5px; color:rgba(255,255,255,0.42); text-transform:uppercase; letter-spacing:0.3px;}
.vtxws-sidebar .vtxws-btn-ghost{color:#fff; border-color:rgba(255,255,255,0.15) !important;}

.vtxws-main{flex:1; display:flex; flex-direction:column; min-width:0; background:var(--vtxws-surface);}
.vtxws-topbar{height:60px; background:#fff; border-bottom:1px solid var(--vtxws-border); display:flex; align-items:center; justify-content:space-between; padding:0 28px; flex-shrink:0;}
.vtxws-topbar h1{font-size:16.5px; font-weight:700;}
.vtxws-top-actions{display:flex; gap:10px; align-items:center;}
.vtxws-content{padding:28px; flex:1; overflow-y:auto; max-height:calc(80vh - 60px);}

/* ---------- BADGES ---------- */
.vtxws-badge{display:inline-flex; align-items:center; padding:3px 10px; border-radius:100px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; white-space:nowrap;}
.vtxws-badge-admin{background:#EAE8F0; color:#4B4270;}
.vtxws-badge-ceo{background:#FFF3DE; color:var(--vtxws-gold);}
.vtxws-badge-employee{background:var(--vtxws-info-bg); color:var(--vtxws-info);}
.vtxws-badge-all{background:var(--vtxws-success-bg); color:var(--vtxws-success);}
.vtxws-badge-gray{background:var(--vtxws-gray-100); color:var(--vtxws-gray-700);}

/* ---------- CARDS ---------- */
.vtxws-card{background:var(--vtxws-card); border:1px solid var(--vtxws-border); border-radius:12px; padding:22px; margin-bottom:18px;}
.vtxws-card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.vtxws-card-head h3{font-size:14.5px; font-weight:700;}
.vtxws-count{color:var(--vtxws-text-muted); font-size:12px; font-weight:500;}
.vtxws-note{font-size:13.5px; color:var(--vtxws-text-muted); line-height:1.8;}

.vtxws-stat-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:14px; margin-bottom:22px;}
.vtxws-stat-card{background:#fff; border:1px solid var(--vtxws-border); border-radius:12px; padding:18px;}
.vtxws-label{font-size:11px; color:var(--vtxws-text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.3px; margin-bottom:8px;}
.vtxws-value{font-size:26px; font-weight:800; color:var(--vtxws-navy-950);}
.vtxws-value.vtxws-gold{color:var(--vtxws-gold);}

/* ---------- TABLE ---------- */
.vtxws-table{width:100%; border-collapse:collapse;}
.vtxws-table th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.3px; color:var(--vtxws-text-muted); padding:9px 10px; border-bottom:1px solid var(--vtxws-border); font-weight:700;}
.vtxws-table td{padding:12px 10px; border-bottom:1px solid var(--vtxws-border); font-size:13px;}
.vtxws-table tr:last-child td{border-bottom:none;}
.vtxws-row-name{font-weight:600;}
.vtxws-muted{color:var(--vtxws-text-muted);}

.vtxws-empty-state{text-align:center; padding:44px 20px; color:var(--vtxws-text-muted);}
.vtxws-empty-state .vtxws-ico{font-size:30px; margin-bottom:10px;}
.vtxws-empty-state p{font-size:13px;}

/* ---------- MODAL ---------- */
.vtxws-modal-overlay{position:fixed; inset:0; background:rgba(15,20,23,0.55); display:flex; align-items:center; justify-content:center; z-index:9999; padding:20px;}
.vtxws-modal{background:#fff; border-radius:14px; width:100%; max-width:640px; max-height:88vh; display:flex; flex-direction:column; overflow:hidden;}
.vtxws-modal-sm{max-width:500px;}
.vtxws-modal-head{padding:18px 24px; border-bottom:1px solid var(--vtxws-border); display:flex; align-items:center; justify-content:space-between;}
.vtxws-modal-head h3{font-size:15px; font-weight:700;}
.vtxws-modal-close{width:28px; height:28px; border-radius:8px; background:var(--vtxws-surface); color:var(--vtxws-text-muted); font-size:16px;}
.vtxws-modal-close:hover{background:var(--vtxws-border);}
.vtxws-modal-body{padding:20px 24px; overflow-y:auto;}

.vtxws-tabs{display:flex; gap:4px; border-bottom:1px solid var(--vtxws-border); margin-bottom:18px;}
.vtxws-tab-btn{padding:9px 4px; margin-right:20px; font-size:13px; font-weight:600; color:var(--vtxws-text-muted); background:transparent; border-bottom:2px solid transparent; position:relative; top:1px;}
.vtxws-tab-btn.active{color:var(--vtxws-navy-950); border-bottom-color:var(--vtxws-gold);}
.vtxws-tab-panel{display:none;}
.vtxws-tab-panel.active{display:block;}

.vtxws-radio-group{display:flex; gap:10px;}
.vtxws-radio-pill{flex:1; border:1px solid var(--vtxws-border); border-radius:8px; padding:10px 12px; text-align:center; font-size:12.5px; font-weight:600; color:var(--vtxws-text-muted);}
.vtxws-radio-pill.selected{border-color:var(--vtxws-navy-800); background:var(--vtxws-navy-950); color:#fff;}

/* ---------- SHARE / TASK ITEMS ---------- */
.vtxws-item{border:1px solid var(--vtxws-border); border-radius:10px; padding:15px; margin-bottom:12px; background:#fff;}
.vtxws-item .vtxws-i-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:7px;}
.vtxws-item .vtxws-i-title{font-weight:700; font-size:13.5px;}
.vtxws-item .vtxws-i-meta{font-size:11.5px; color:var(--vtxws-text-muted); margin-top:2px;}
.vtxws-item .vtxws-i-desc{font-size:12.5px; color:var(--vtxws-text); line-height:1.6; margin-top:7px;}
.vtxws-attach-chip{display:inline-flex; align-items:center; gap:6px; background:var(--vtxws-surface); border:1px solid var(--vtxws-border); border-radius:6px; padding:5px 10px; font-size:11.5px; margin-top:9px; color:var(--vtxws-text); text-decoration:none;}
.vtxws-attach-chip:hover{border-color:var(--vtxws-gold);}
.vtxws-item-actions{display:flex; gap:8px; margin-top:10px;}

.vtxws-progress{height:8px; background:var(--vtxws-gray-100); border-radius:100px; overflow:hidden; flex:1;}
.vtxws-progress-bar{height:100%; background:linear-gradient(90deg, var(--vtxws-gold), var(--vtxws-gold-light)); border-radius:100px;}

/* ---------- FOLDERS ---------- */
.vtxws-folder-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:13px;}
.vtxws-folder-card{border:1px solid var(--vtxws-border); border-radius:10px; padding:15px; cursor:pointer; transition:border-color .15s, transform .1s;}
.vtxws-folder-card:hover{border-color:var(--vtxws-gold); transform:translateY(-2px);}
.vtxws-folder-card .vtxws-f-icon{font-size:20px; margin-bottom:7px;}
.vtxws-folder-card .vtxws-f-name{font-weight:700; font-size:13px; margin-bottom:2px;}
.vtxws-folder-card .vtxws-f-count{font-size:11px; color:var(--vtxws-text-muted);}
.vtxws-doc-row{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--vtxws-border);}
.vtxws-doc-row:last-child{border-bottom:none;}

/* ---------- FEED ---------- */
.vtxws-post-tools{display:flex; align-items:center; justify-content:space-between; margin-top:10px;}
.vtxws-file-btn{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--vtxws-text-muted); cursor:pointer; padding:8px 12px; border:1px solid var(--vtxws-border); border-radius:8px;}
.vtxws-file-btn:hover{border-color:var(--vtxws-gold); color:var(--vtxws-text);}
.vtxws-file-btn input{display:none;}
.vtxws-post-card{background:#fff; border:1px solid var(--vtxws-border); border-radius:12px; padding:18px; margin-bottom:14px;}
.vtxws-post-head{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.vtxws-post-avatar{width:34px; height:34px; border-radius:50%; background:var(--vtxws-navy-900); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex-shrink:0;}
.vtxws-post-author{font-weight:700; font-size:13px;}
.vtxws-post-meta{font-size:11px; color:var(--vtxws-text-muted);}
.vtxws-post-content{font-size:13.5px; line-height:1.7; white-space:pre-wrap; margin-bottom:10px;}
.vtxws-post-image{max-width:100%; border-radius:10px; border:1px solid var(--vtxws-border); margin-bottom:10px; display:block;}
.vtxws-post-actions{display:flex; gap:16px; padding-top:10px; border-top:1px solid var(--vtxws-border);}
.vtxws-post-action{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--vtxws-text-muted); background:transparent;}
.vtxws-post-action.liked{color:var(--vtxws-gold); font-weight:700;}
.vtxws-post-action:hover{color:var(--vtxws-text);}
.vtxws-comment-list{margin-top:12px; display:flex; flex-direction:column; gap:9px;}
.vtxws-comment{background:var(--vtxws-surface); border-radius:8px; padding:9px 11px; font-size:12.5px;}
.vtxws-comment b{font-weight:700; margin-right:4px;}
.vtxws-comment-del{float:right; color:var(--vtxws-danger); font-size:11px; background:transparent;}
.vtxws-comment-form{display:flex; gap:8px; margin-top:10px;}
.vtxws-comment-form input{flex:1; padding:9px 12px; border:1px solid var(--vtxws-border); border-radius:8px; font-size:12.5px;}
.vtxws-post-delete{background:transparent; color:var(--vtxws-text-muted); font-size:12px; margin-right:auto;}
.vtxws-post-delete:hover{color:var(--vtxws-danger);}

/* ---------- NOTIFICATIONS ---------- */
.vtxws-bell-wrap{position:relative;}
.vtxws-bell{background:var(--vtxws-surface); border:1px solid var(--vtxws-border); width:38px; height:38px; border-radius:9px; font-size:15px; position:relative;}
.vtxws-bell-count{position:absolute; top:-5px; right:-5px; background:var(--vtxws-danger); color:#fff; font-size:10px; font-weight:700; border-radius:100px; padding:1px 5px; min-width:16px;}
.vtxws-notif-dropdown{position:absolute; top:46px; right:0; width:320px; max-height:380px; overflow-y:auto; background:#fff; border:1px solid var(--vtxws-border); border-radius:12px; box-shadow:0 8px 24px rgba(15,20,23,0.14); z-index:50; padding:8px;}
.vtxws-notif-item{padding:10px 12px; border-radius:8px; font-size:12.5px; line-height:1.5;}
.vtxws-notif-item:hover{background:var(--vtxws-surface);}
.vtxws-notif-item .vtxws-n-time{font-size:11px; color:var(--vtxws-text-muted); margin-top:2px;}
.vtxws-notif-item.unread{background:var(--vtxws-info-bg);}

@media (max-width: 820px){
  .vtxws-app-shell{flex-direction:column; min-height:auto;}
  .vtxws-sidebar{width:100%; flex-direction:row; overflow-x:auto; padding:14px;}
  .vtxws-sidebar .vtxws-brand-mark{display:none;}
  .vtxws-sidebar-bottom{display:none;}
  .vtxws-nav-item{border-right:none; border-bottom:2px solid transparent; white-space:nowrap;}
  .vtxws-nav-item.active{border-bottom-color:var(--vtxws-gold);}
  .vtxws-content{max-height:none;}
  .vtxws-grid-2{grid-template-columns:1fr;}
  .vtxws-login-view{min-height:auto;}
}