.sd-portal { position: relative; background: #11314a; border: 1px solid rgba(255,246,232,0.08); border-radius: 16px; width: 680px; max-width: 100%; height: 480px; margin: 0 auto; overflow: hidden; font-family: 'DM Sans', sans-serif; box-shadow: 0 8px 40px rgba(17,49,74,0.35), inset 0 1px 0 rgba(255,255,255,0.04); } .sd-portal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,246,232,0.08) 30%, rgba(255,246,232,0.12) 50%, rgba(255,246,232,0.08) 70%, transparent 100%); z-index: 1; } .sd-portal-topbar { display: flex; align-items: center; padding: 10px 20px; border-bottom: 1px solid rgba(255,246,232,0.06); gap: 12px; } .sd-portal-dots { display: flex; gap: 6px; flex-shrink: 0; } .sd-portal-dot { width: 10px; height: 10px; border-radius: 50%; } .sd-portal-dot--r { background: #DB635D; } .sd-portal-dot--y { background: #F6C893; } .sd-portal-dot--g { background: #80a38f; } .sd-portal-title { font-size: 14px; font-weight: 700; color: #FFF6E8; flex-shrink: 0; } .sd-portal-dropdown { display: flex; align-items: center; gap: 6px; margin-left: 8px; padding: 5px 12px; border-radius: 6px; background: rgba(255,246,232,0.05); border: 1px solid rgba(255,246,232,0.08); } .sd-portal-dropdown-text { font-size: 11px; font-weight: 500; color: rgba(255,246,232,0.6); white-space: nowrap; } .sd-portal-dropdown-arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid rgba(255,246,232,0.35); } .sd-portal-topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; } .sd-portal-bell { width: 20px; height: 20px; position: relative; flex-shrink: 0; } .sd-portal-bell::before { content: ''; position: absolute; bottom: 3px; left: 3px; width: 14px; height: 12px; border: 2px solid rgba(255,246,232,0.4); border-radius: 8px 8px 0 0; } .sd-portal-bell::after { content: ''; position: absolute; bottom: 1px; left: 6px; width: 8px; height: 2px; background: rgba(255,246,232,0.4); border-radius: 1px; } .sd-portal-bell-badge { position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; border-radius: 8px; background: #DB635D; border: 2px solid #11314a; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #FFF6E8; padding: 0 3px; line-height: 1; } .sd-portal-avatar { width: 26px; height: 26px; border-radius: 50%; background: rgba(84,146,182,0.25); border: 1.5px solid rgba(84,146,182,0.3); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #5492B6; flex-shrink: 0; } .sd-portal-project { margin: 12px 20px; padding: 14px 16px; background: rgba(255,246,232,0.03); border: 1px solid rgba(255,246,232,0.06); border-radius: 12px; } .sd-portal-project-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; } .sd-portal-project-info { flex: 1; min-width: 0; } .sd-portal-project-name { font-size: 16px; font-weight: 700; color: #FFF6E8; margin-bottom: 6px; } .sd-portal-status-pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 600; background: rgba(128,163,143,0.15); color: #80a38f; border: 1px solid rgba(128,163,143,0.2); letter-spacing: 0.02em; } .sd-portal-progress-ring { width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(#5492B6 0% 65%, rgba(255,246,232,0.08) 65% 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; } .sd-portal-progress-inner { width: 48px; height: 48px; border-radius: 50%; background: #11314a; display: flex; align-items: center; justify-content: center; flex-direction: column; } .sd-portal-progress-val { font-size: 14px; font-weight: 800; color: #FFF6E8; line-height: 1; } .sd-portal-progress-label { font-size: 8px; font-weight: 500; color: rgba(255,246,232,0.35); margin-top: 1px; text-transform: uppercase; letter-spacing: 0.05em; } .sd-portal-stats { display: flex; gap: 0; border-top: 1px solid rgba(255,246,232,0.05); margin-top: 10px; padding-top: 10px; } .sd-portal-stat { flex: 1; text-align: center; position: relative; } .sd-portal-stat + .sd-portal-stat::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: rgba(255,246,232,0.06); } .sd-portal-stat-val { font-size: 16px; font-weight: 700; color: #FFF6E8; line-height: 1; margin-bottom: 3px; } .sd-portal-stat-label { font-size: 9px; font-weight: 500; color: rgba(255,246,232,0.35); text-transform: uppercase; letter-spacing: 0.05em; } .sd-portal-chart-section { margin: 0 20px 10px; padding: 12px 16px 10px; background: rgba(255,246,232,0.03); border: 1px solid rgba(255,246,232,0.06); border-radius: 12px; } .sd-portal-section-title { font-size: 11px; font-weight: 700; color: rgba(255,246,232,0.45); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; } .sd-portal-chart { display: flex; align-items: flex-end; gap: 8px; height: 80px; position: relative; padding-bottom: 18px; } .sd-portal-chart-avg { position: absolute; left: 0; right: 0; bottom: 50px; height: 0; border-top: 1.5px dashed rgba(255,246,232,0.15); z-index: 1; } .sd-portal-chart-avg-label { position: absolute; right: 0; top: -14px; font-size: 8px; font-weight: 600; color: rgba(255,246,232,0.25); text-transform: uppercase; letter-spacing: 0.05em; } .sd-portal-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; } .sd-portal-bar { width: 100%; max-width: 40px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #DB635D 0%, #5492B6 100%); } .sd-portal-bar-label { position: absolute; bottom: -18px; font-size: 9px; font-weight: 600; color: rgba(255,246,232,0.3); letter-spacing: 0.02em; } .sd-portal-tasks-section { margin: 0 20px 10px; padding: 12px 16px 8px; background: rgba(255,246,232,0.03); border: 1px solid rgba(255,246,232,0.06); border-radius: 12px; } .sd-portal-task { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255,246,232,0.04); } .sd-portal-task:last-child { border-bottom: none; padding-bottom: 4px; } .sd-portal-task-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .sd-portal-task-dot--done { background: #80a38f; } .sd-portal-task-dot--progress { background: #5492B6; } .sd-portal-task-dot--review { background: #F6C893; } .sd-portal-task-dot--backlog { background: rgba(255,246,232,0.2); } .sd-portal-task-name { flex: 1; font-size: 12px; font-weight: 500; color: rgba(255,246,232,0.7); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sd-portal-task-name--done { color: rgba(255,246,232,0.4); text-decoration: line-through; text-decoration-color: rgba(255,246,232,0.15); } .sd-portal-task-assignee { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; flex-shrink: 0; } .sd-portal-task-due { font-size: 10px; font-weight: 500; color: rgba(255,246,232,0.25); white-space: nowrap; flex-shrink: 0; } .sd-portal-footer { padding: 10px 20px; border-top: 1px solid rgba(255,246,232,0.06); display: flex; align-items: center; justify-content: space-between; } .sd-portal-sync { font-size: 10px; font-weight: 500; color: rgba(255,246,232,0.25); } .sd-portal-sync-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #80a38f; margin-right: 6px; vertical-align: middle; animation: sd-portal-sync-ping 3s ease-out infinite; will-change: box-shadow; } @keyframes sd-portal-sync-ping { 0%   { box-shadow: 0 0 0 0 rgba(128,163,143,0.45); } 70%  { box-shadow: 0 0 0 7px rgba(128,163,143,0); } 100% { box-shadow: 0 0 0 7px rgba(128,163,143,0); } } @media (prefers-reduced-motion: reduce) { .sd-portal-sync-dot { animation: none !important; } } .sd-portal-roadmap-link { font-size: 11px; font-weight: 600; color: #5492B6; letter-spacing: 0.02em; display: flex; align-items: center; gap: 4px; } .sd-portal-roadmap-arrow { display: inline-block; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid #5492B6; } .sd-portal-section-head { display: flex; align-items: center; padding: 10px 20px; cursor: pointer; user-select: none; border-top: 1px solid rgba(255,246,232,0.06); transition: background 0.2s ease; } .sd-portal-section-head:hover { background: rgba(255,246,232,0.03); } .sd-portal-section-head-title { font-size: 12px; font-weight: 700; color: rgba(255,246,232,0.5); text-transform: uppercase; letter-spacing: 0.06em; } .sd-portal-section-head::after { content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid rgba(255,246,232,0.3); margin-left: auto; transition: transform 0.3s ease; } .sd-portal-section-head.sd-portal-open::after { transform: rotate(180deg); } .sd-portal-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .sd-portal-accordion-content.sd-portal-open { max-height: 600px; } .sd-portal-accordion-content .sd-portal-chart-section, .sd-portal-accordion-content .sd-portal-tasks-section { border-top: none; margin-top: 0; } .sd-portal-accordion-content .sd-portal-section-title { display: none; } @media (max-width: 768px) { .sd-portal { width: 100%; max-width: 100%; height: auto; min-height: 220px; overflow: visible; display: flex; flex-direction: column; } .sd-portal-dropdown { display: none; } .sd-portal-chart-section { display: none; } .sd-portal-topbar { padding: 10px 14px; gap: 8px; } .sd-portal-topbar-right { gap: 8px; } .sd-portal-project { margin: 14px 16px 14px; padding: 14px 16px; } .sd-portal-project-header { margin-bottom: 12px; gap: 12px; align-items: center; } .sd-portal-project-name { font-size: 15px; margin-bottom: 4px; } .sd-portal-status-pill { font-size: 9px; padding: 2px 8px; } .sd-portal-progress-ring { width: 58px; height: 58px; } .sd-portal-progress-inner { width: 44px; height: 44px; } .sd-portal-progress-val { font-size: 14px; } .sd-portal-progress-label { font-size: 7px; } .sd-portal-stats { margin-top: 10px; padding-top: 10px; } .sd-portal-stat-val { font-size: 18px; } .sd-portal-stat-label { font-size: 9px; } .sd-portal-roadmap-link { display: none; } .sd-portal-footer { justify-content: flex-start; padding: 10px 16px; } .sd-portal-section-head { padding: 10px 16px; } } @media (max-width: 480px) { .sd-portal-title { font-size: 13px; } .sd-portal-project { margin: 12px 12px; padding: 12px 14px; } .sd-portal-project-name { font-size: 14px; } .sd-portal-progress-ring { width: 52px; height: 52px; } .sd-portal-progress-inner { width: 38px; height: 38px; } .sd-portal-progress-val { font-size: 12px; } .sd-portal-stat-val { font-size: 16px; } } @media (hover: none) { .sd-portal-section-head:hover { background: transparent; } }