:root{--blue:#1268ff;--ink:#102957;--muted:#7182a0;--line:#dce7f5;--bg:#eef6ff;--card:#fff;--shadow:0 8px 24px rgba(31,79,140,.08)}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(135deg,#edf7ff,#fff 48%,#f1f8ff);font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink)}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}
.app{min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:220px;background:rgba(255,255,255,.94);border-right:1px solid var(--line);padding:18px 13px;z-index:5}.brand{display:flex;align-items:center;gap:10px;padding:4px 9px 22px;border-bottom:1px solid #edf2f8}.brand-icon{width:36px;height:36px;border-radius:9px;background:#1268ff;color:#fff;display:grid;place-items:center;font-weight:900}.brand b{font-size:16px;display:block}.brand small{font-size:12px;color:#7b8ba4}.nav{padding-top:17px}.nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:650;color:#365071;margin:3px 0}.nav a.active{background:#1268ff;color:#fff;box-shadow:0 6px 15px rgba(18,104,255,.18)}.ico{width:18px;text-align:center;font-size:17px}
.main{margin-left:220px;min-height:100vh}.top{height:62px;background:rgba(255,255,255,.9);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 24px;gap:15px;position:sticky;top:0;z-index:4;backdrop-filter:blur(10px)}.search{height:36px;border:1px solid #dfe8f4;background:#f7faff;border-radius:9px;display:flex;align-items:center;padding:0 12px;color:#8392aa;flex:1;max-width:650px}.search input{border:0;outline:0;background:transparent;width:100%;font-size:14px;margin-left:7px}.top-right{margin-left:auto;display:flex;align-items:center;gap:10px}.bell{font-size:19px;position:relative}.badge-dot{position:absolute;right:-4px;top:-5px;background:#ef3c52;color:#fff;font-size:11px;width:13px;height:13px;border-radius:50%;display:grid;place-items:center}.avatar{width:35px;height:35px;border-radius:50%;background:linear-gradient(135deg,#263d64,#8baed2);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}.content{padding:22px;max-width:1350px;margin:auto}.head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.head-left{display:flex;align-items:center;gap:11px}.page-icon{width:42px;height:42px;border-radius:11px;background:#e8f2ff;color:#1268ff;display:grid;place-items:center;font-size:22px}.head h1{font-size:26px;margin:0 0 2px}.head p{margin:0;color:var(--muted);font-size:13px}.card{background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);padding:15px}.grid{display:grid;gap:12px}.stats{grid-template-columns:repeat(4,1fr)}.stat{display:flex;gap:11px;align-items:center}.stat-icon{width:38px;height:38px;border-radius:10px;background:#edf5ff;color:#1268ff;display:grid;place-items:center;font-size:19px}.stat b{font-size:20px}.stat small{display:block;color:var(--muted);font-size:12px;margin-top:2px}.hero{border-radius:17px;padding:23px;background:linear-gradient(110deg,#e7f3ff,#f8fbff 60%,#d8efff);position:relative;overflow:hidden;margin-bottom:14px}.hero:after{content:"";position:absolute;width:300px;height:180px;right:-40px;top:-20px;background:radial-gradient(circle at 50% 35%,#ffd46b 0 15%,transparent 16%),linear-gradient(145deg,transparent 45%,#b8d9f4 46% 60%,#8ebce5 61% 72%,transparent 73%);opacity:.8}.hero h1{font-size:28px;margin:3px 0}.hero p{font-size:14px;color:#5f7495;margin:0}.hero small{font-size:12px;color:#527099}.employee-card{margin-top:13px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px;display:flex;align-items:center;gap:10px;width:360px}.employee-card b{font-size:14px}.employee-card small{display:block;color:var(--muted);margin-top:3px}.quick-title{font-size:16px;margin:17px 0 8px}.quick{grid-template-columns:repeat(4,1fr)}.quick .card{text-align:center;padding:13px}.qicon{width:35px;height:35px;border-radius:10px;background:#edf6ff;color:#1268ff;display:grid;place-items:center;margin:auto auto 7px}.quick b{font-size:13px}.quick small{display:block;color:var(--muted);font-size:12px;margin-top:3px}.section-title{display:flex;justify-content:space-between;align-items:center;margin:18px 0 8px}.section-title h3{font-size:16px;margin:0}.view{font-size:12px;color:var(--blue);font-weight:700}.activity{margin-top:15px}.activity-row{display:flex;align-items:center;padding:10px 0;border-bottom:1px solid #edf2f7;font-size:13px;gap:9px}.activity-row:last-child{border:0}.activity-row span{margin-left:auto;color:var(--muted);font-size:12px}.dot{width:7px;height:7px;border-radius:50%;background:#1268ff}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px}.toolbar .search{max-width:none;background:#fff}.btn{border:0;border-radius:9px;padding:9px 13px;background:#1268ff;color:#fff;font-weight:750;font-size:13px;cursor:pointer}.btn.soft{background:#eaf3ff;color:#1268ff}.btn.light{background:#fff;color:#526783;border:1px solid var(--line)}
.categories{grid-template-columns:repeat(7,1fr);margin-bottom:12px}.cat{padding:11px 7px;text-align:center;border-radius:11px;font-size:13px}.cat b{display:block;margin:4px 0}.cat small{background:#fff;border-radius:7px;padding:2px 6px;color:#687b97}.c1{background:#fff;border:1px solid #3781ff}.c2{background:#eaf5ff}.c3{background:#eaf9f1}.c4{background:#f1edff}.c5{background:#fff2ec}.c6{background:#fff0f5}.c7{background:#fff8df}.bookmark-section{padding:12px;border-radius:13px;margin-bottom:10px}.business{background:linear-gradient(90deg,#eef7ff,#fff)}.development{background:linear-gradient(90deg,#effbf5,#fff)}.tools{background:linear-gradient(90deg,#f5f0ff,#fff)}.finance{background:linear-gradient(90deg,#fff4ef,#fff)}.section-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.section-top h3{font-size:16px;margin:0}.section-top p{font-size:12px;color:var(--muted);margin:3px 0 0}.bookmark-grid{grid-template-columns:repeat(3,1fr)}.bookmark{display:flex;align-items:center;gap:8px;padding:9px;background:#fff;border:1px solid #e5edf6;border-radius:10px}.logo{width:32px;height:32px;border-radius:8px;background:#edf3fb;display:grid;place-items:center;font-weight:800;font-size:12px;flex:none}.bookmark b{font-size:12px;display:block}.bookmark small{font-size:11px;color:var(--muted);display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.star{margin-left:auto;color:#f4a600}.dots{color:#8190a7}.login-list{display:grid;gap:9px}.login{display:flex;align-items:center;gap:11px;padding:11px;border:1px solid #e6edf6;border-radius:11px;background:#fff}.login-logo{width:37px;height:37px;border-radius:9px;background:#edf4ff;display:grid;place-items:center;font-weight:900;color:#1268ff}.login-info{flex:1}.login-info b{font-size:14px}.login-info small{display:block;color:var(--muted);font-size:12px;margin-top:3px}.table{width:100%;border-collapse:collapse;font-size:13px}.table th{background:#f6f9fd;text-align:left;color:#637793;padding:10px}.table td{padding:11px;border-bottom:1px solid #edf2f7}.pill{display:inline-block;padding:4px 8px;border-radius:99px;font-size:12px;font-weight:700}.green{background:#e8f9f1;color:#09966a}.blue{background:#eaf2ff;color:#1268ff}.orange{background:#fff1dc;color:#bd7600}
.notes{grid-template-columns:repeat(4,1fr)}.note{min-height:145px;padding:14px;border-radius:10px;box-shadow:0 4px 12px rgba(30,65,110,.05);position:relative}.note h3{font-size:15px;margin:0 0 7px}.note p{font-size:12px;line-height:1.5;margin:0;color:#4f6180}.note small{position:absolute;bottom:10px;left:13px;color:#7889a2;font-size:11px}.yellow{background:#fff5c9}.note-blue{background:#dcecff}.pink{background:#ffe2ec}.mint{background:#dcf8ea}.purple{background:#eee3ff}.todo{padding-left:0;list-style:none}.todo li{font-size:12px;margin:6px 0}.todo input{vertical-align:middle;margin-right:5px}.profile-grid{grid-template-columns:1.1fr .9fr}.profile{display:flex;gap:18px}.profile-photo{width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,#203c66,#a7c2dd);color:#fff;display:grid;place-items:center;font-size:26px;font-weight:800;flex:none}.details{flex:1}.details h2{font-size:19px;margin:5px 0}.details p{font-size:13px;color:var(--muted);margin:0}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.detail{padding:8px 9px;background:#f8fbff;border-radius:8px}.detail small{display:block;color:var(--muted);font-size:11px}.detail b{font-size:12px}.settings h3{font-size:15px;margin:0 0 8px}.setting{display:flex;align-items:center;padding:10px 0;border-bottom:1px solid #edf2f7;font-size:13px}.setting span:last-child{margin-left:auto;color:#72839c}.mobile-nav{display:none}
@media(max-width:1000px){.categories{grid-template-columns:repeat(4,1fr)}.notes{grid-template-columns:repeat(2,1fr)}.stats,.quick{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.sidebar{display:none}.main{margin-left:0}.content{padding:15px 12px 90px}.top{padding:0 12px}.top .search{display:none}.bookmark-grid,.notes,.profile-grid{grid-template-columns:1fr}.mobile-nav{display:flex;position:fixed;bottom:9px;left:9px;right:9px;height:58px;background:#fff;border:1px solid var(--line);border-radius:17px;z-index:10;justify-content:space-around;align-items:center;box-shadow:0 8px 24px rgba(20,50,90,.15)}.mobile-nav a{font-size:12px;text-align:center;color:#637592}.mobile-nav span{display:block;font-size:18px;margin-bottom:2px}.mobile-nav .active{color:#1268ff;font-weight:800}.employee-card{width:100%}}