:root{ --ink:#152A38; --ink-soft:#4C6472; --paper:#FBFBF9; --panel:#FFFFFF; --line:#DDE3E2; --navy:#153A52; --navy-deep:#0E2836; --teal:#3E6E68; --teal-soft:#E7EEEC; } .panel{ width: 100%; max-width: 340px; background: var(--panel); border: 1px solid var(--line); position:relative; box-sizing:border-box; } .panel *{box-sizing:border-box;} .panel::before{ content:""; position:absolute; top:-1px; left:-1px; width:10px; height:10px; border-top:2px solid var(--navy); border-left:2px solid var(--navy); } .panel::after{ content:""; position:absolute; bottom:-1px; right:-1px; width:10px; height:10px; border-bottom:2px solid var(--navy); border-right:2px solid var(--navy); } .panel ul.links{ list-style:none !important; margin:0 !important; padding: 6px 0 !important; } .panel ul.links li{ border-bottom: 1px solid var(--line); margin:0 !important; padding:0 !important; list-style:none !important; } .panel ul.links li:last-child{ border-bottom: none; } .panel ul.links a{ display:flex; align-items:center; gap: 14px; padding: 12px 22px; margin:0; min-height: 54px; text-decoration:none; color: var(--ink); font-size: 11px; font-weight: 500; line-height: 1.35; transition: background-color .15s ease, color .15s ease, padding-left .15s ease; } .panel ul.links a:hover{ background: var(--teal-soft); color: var(--navy-deep); padding-left: 26px; } .panel .icon-tile{ flex: 0 0 30px; width: 30px; height: 30px; display:flex; align-items:center; justify-content:center; border-radius: 6px; background: #EEF3F2; color: var(--navy); transition: background-color .15s ease, color .15s ease; } .panel ul.links a:hover .icon-tile{ background: var(--navy); color: #fff; } .panel .icon-tile svg{ width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .panel .label{ flex: 1; line-height: 1.3; } .panel .chev{ flex: 0 0 auto; width: 14px; height: 14px; color: var(--ink-soft); opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease; } .panel ul.links a:hover .chev{ opacity: 1; transform: translateX(0); color: var(--navy); }