:root { --accent: #69dfbd; --panel: #132330; --panel-2: #1d3441; --border: #304957; --bg: #0c1a24; --muted: #95abb9; }
.shell-header { position: fixed; top: 0; left: 0; right: 0; height: 66px; background: #101d28; border-bottom: 1px solid #2a3e4b; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; z-index: 20; }
.shell-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #e5eff3; }
.shell-brand-mark { background: #69dfbd; color: #133a2f; width: 31px; height: 31px; border-radius: 9px; display: grid; place-items: center; font-size: 22px; font-style: italic; font-weight: 700; }
.shell-product-label { border-left: 1px solid #405461; padding-left: 20px; margin-left: 8px; font-size: 9px; letter-spacing: 1.5px; color: #9ab2c0; }
.shell-sidebar { position: fixed; top: 66px; bottom: 0; left: 0; width: 70px; z-index: 19; padding: 16px 10px; background: #101d28; transition: width .3s ease; overflow: hidden; }
.shell-sidebar .nav-item { display: flex; align-items: center; gap: 18px; background: none; border: none; height: 46px; font-size: 12px; white-space: nowrap; color: #a4bcc7; padding: 12px; width: 100%; }
.shell-sidebar .nav-item .icon { width: 20px; height: 20px; }
.shell-sidebar .nav-item span { opacity: 0; transition: opacity .2s; }
.shell-sidebar .nav-item:hover { background: #223c49; }
.shell-sidebar .nav-item.active { color: #69dfbd; background: #69dfbd15; box-shadow: none; }
.shell-sidebar .logout { margin-top: auto; }
.app:not(.workspace-page) .content { padding: 108px 40px 40px; margin-left: 70px; background: radial-gradient(ellipse at 70% 10%,#18374350,transparent 55%); min-height: 100dvh; transition: margin-left .3s ease; }
.app.shell-nav-expanded .shell-sidebar { width: 208px; }
.app.shell-nav-expanded .shell-sidebar .nav-item span { opacity: 1; }
.app.shell-nav-expanded:not(.workspace-page) .content { margin-left: 208px; }
.workspace-page .shell-header { display: none; }
.shell-eyebrow { font-size: 10px; letter-spacing: 1.5px; color: #9ab2c0; font-weight: 600; }
.projects-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1500px; margin: 0 auto 30px; }
.projects-heading h1 { font-size: 30px; letter-spacing: -.8px; font-weight: 550; margin: 10px 0; }
.projects-heading p { color: #9ab2c0; font-size: 13px; line-height: 1.6; margin: 0; }
.projects-heading .btn { padding: 12px 18px; border-radius: 9px; white-space: nowrap; font-size: 12px; }
.projects-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1500px; margin: 0 auto 20px; font-size: 12px; color: #9ab2c0; }
.projects-toolbar strong { color: #e4eef3; }
.project-search { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #162c39; border: 1px solid #304957; border-radius: 8px; min-width: 260px; }
.project-search input { border: 0; outline: 0; background: transparent; color: #e4eef3; width: 100%; font: inherit; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(330px,1fr)); gap: 24px; max-width: 1500px; margin: 0 auto; }
.project-card { background: #142936; border: 1px solid #36515f; border-radius: 14px; padding: 20px; box-shadow: 0 10px 24px #06121c25; transition: border-color .2s,transform .2s; min-width: 0; }
.project-card:hover { border-color: #67bba3; transform: translateY(-2px); }
.project-card-top { display: flex; align-items: center; justify-content: space-between; }
.project-reference { font-size: 9px; letter-spacing: 1.2px; color: #9db8c5; }
.project-status { border: 1px solid #3e5866; color: #bad0dc; background: #203d4b; padding: 4px 8px; font-size: 9px; border-radius: 5px; }
.status-planned { color: #86e2c4; border-color: #347e69; background: #224a40; }
.status-archived { opacity: .6; }
.project-card-illustration { background: #1b3442; border-radius: 8px; overflow: hidden; margin: 18px 0; }
.project-card-illustration svg { display: block; width: 100%; height: 112px; }
.project-card h2 { font-size: 18px; font-weight: 550; line-height: 1.4; margin: 0 0 8px; letter-spacing: -.3px; }
.project-card h2 a { color: #e2eef4; text-decoration: none; }
.project-customer { color: #83c8b6; margin: 0 0 22px; font-size: 12px; }
.project-journey { display: grid; gap: 10px; min-height: 60px; color: #a4bcc7; font-size: 10px; line-height: 1.5; }
.project-journey span { display: flex; align-items: start; gap: 9px; }
.project-journey .icon { width: 14px; height: 14px; color: #76cbb0; margin-top: 2px; }
.project-card-footer { display: flex; gap: 10px; border-top: 1px solid #2c4958; margin-top: 22px; padding-top: 16px; }
.project-open { flex: 1; display: flex; align-items: center; gap: 10px; text-decoration: none; color: #80e0c0; font-size: 12px; }
.project-open span { margin-left: auto; font-size: 18px; }
.project-edit { display: grid; place-items: center; background: #243e4b; border-radius: 7px; width: 32px; height: 32px; color: #b1c8d5; }
.project-card-actions { display: flex; gap: 7px; align-items: center; }
.project-card-actions form { margin: 0; }
.project-duplicate { border: 0; padding: 0; box-shadow: none; cursor: pointer; }
.project-duplicate:hover { background: #345764; color: #8fe7cc; }
.project-delete { color: #f1a9a5; background: #543037; }
.project-delete:hover { color: #ffd0c7; background: #70404a; }
.project-card-footer { flex-wrap: wrap; gap: 10px; }
.project-delete-dialog { width: min(440px,calc(100% - 32px)); padding: 28px; color: #e2edf3; background: #162b38; border: 1px solid #5d4651; border-radius: 16px; box-shadow: 0 24px 90px #0008; }
.project-delete-dialog::backdrop { background: #07131bb3; backdrop-filter: blur(4px); }
.delete-project-symbol { display: grid; place-items: center; width: 44px; height: 44px; color: #f4aca5; background: #f29a9415; border: 1px solid #bb6a6655; border-radius: 12px; margin-bottom: 20px; }
.delete-project-symbol .icon { width: 23px; height: 23px; }
.project-delete-dialog h2,.project-delete-confirm h1 { font-size: 22px; margin: 0 0 12px; font-weight: 600; }
.project-delete-dialog p,.project-delete-confirm p { color: #a9c0cc; font-size: 13px; line-height: 1.6; }
.project-delete-dialog .delete-project-name,.project-delete-confirm .delete-project-name { color: #e6f0f5; font-weight: 600; overflow-wrap: anywhere; }
.delete-project-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 24px; }
.delete-cancel { display: inline-flex; justify-content: center; background: #243e4b; border: 1px solid #3f5d6b; border-radius: 8px; padding: 10px 18px; font-size: 12px; color: #d6e5ec; text-decoration: none; box-shadow: none; }
.delete-project-submit { background: #a84449; border: 1px solid #bd5458; padding: 10px 16px; color: #fff; border-radius: 8px; font-size: 12px; }
.delete-project-submit:hover { background: #bf5257; }
.project-delete-confirm { max-width: 520px; margin: 40px auto; background: #162b38; border: 1px solid #5d4651; border-radius: 16px; padding: 30px; }
.project-delete-confirm .delete-confirm-error { color: #f4aca5; }
.projects-empty { text-align: center; color: #a7bfcc; background: #152b38; border: 1px dashed #3c5e6c; border-radius: 12px; padding: 40px; }
.projects-empty > .icon { width: 40px; height: 40px; color: #7bd9bb; }
.project-form-heading { max-width: 1000px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: space-between; }
.project-form-heading a { color: #94cebc; font-size: 12px; text-decoration: none; }
.project-form-card { max-width: 1000px; margin: auto; padding: 30px; border-radius: 14px; }
.project-form-card h1 { font-size: 26px; margin: 0 0 12px; font-weight: 550; }
.form-intro { font-size: 12px; color: #9ab2c0; margin-bottom: 30px; line-height: 1.6; }
.project-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.project-form-field { display: flex; flex-direction: column; gap: 8px; }
.project-form-field label { font-size: 12px; color: #b1c7d4; }
.project-form-field.field-wide { grid-column: 1/-1; }
.project-form-field input,.project-form-field select,.project-form-field textarea,.app:not(.workspace-page) .card form p input { padding: 12px; background: #1b3341; color: #e2eef4; border: 1px solid #3b5968; border-radius: 8px; width: 100%; font: inherit; font-size: 13px; }
.project-form-field small,.helptext { color: #93abba; font-size: 11px; }
.project-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 24px; margin-top: 30px; padding-top: 24px; border-top: 1px solid #304957; }
.project-form-actions a { font-size: 12px; color: #abc1ce; text-decoration: none; }
.project-form-actions button { padding: 12px 28px; }
.errorlist { color: #f8ac95; font-size: 12px; }
.app:not(.workspace-page) .content > .card:not(.project-form-card) { max-width: 580px; margin: 20px auto; padding: 30px; border-radius: 14px; }
.language-picker { position: relative; color: #c6dce5; z-index: 30; }
.shell-logo,.studio-logo { display: block; width: 157px; height: auto; }
@media(max-width:720px) { .shell-logo,.studio-logo { width: 130px; } }
.language-picker summary { display: flex; align-items: center; gap: 8px; cursor: pointer; background: #223844; border: 1px solid #3a5462; padding: 9px 10px; border-radius: 8px; font-size: 10px; }
.language-picker summary::-webkit-details-marker { display: none; }
.language-picker .icon { width: 12px; height: 12px; }
.language-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 160px; background: #152b38; padding: 6px; border: 1px solid #3a5462; border-radius: 10px; box-shadow: 0 12px 30px #07131b50; }
.language-menu button { display: flex; gap: 10px; width: 100%; background: transparent; color: #bfd3de; padding: 10px; font-size: 12px; border-radius: 6px; font-weight: 450; }
.language-menu button:hover,.language-menu button[aria-pressed="true"] { background: #284a4a; color: #91e4c8; }
.language-flag { display: inline-block; position: relative; width: 23px; height: 15px; flex: 0 0 23px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px #ffffff22; }
.flag-en { background: url('../img/flag-gb.svg') center / cover no-repeat; }
.flag-it { background: linear-gradient(90deg,#239665 0 33.3%,#fff 33.3% 66.6%,#db5659 66.6%); }
.flag-fr { background: linear-gradient(90deg,#355895 0 33.3%,#fff 33.3% 66.6%,#db5659 66.6%); }
.flag-de { background: linear-gradient(#24272d 0 33.3%,#d8585b 33.3% 66.6%,#efc14d 66.6%); }
.flag-es { background: linear-gradient(#d95759 0 25%,#f2cf61 25% 75%,#d95759 75%); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline: 2px solid #69dfbd; outline-offset: 3px; }
[hidden] { display: none !important; }
.account-menu { position: relative; z-index: 35; color: #c6dce5; }
.shell-header-actions { display: flex; align-items: center; gap: 10px; }
.account-menu summary { display: flex; align-items: center; gap: 7px; cursor: pointer; padding: 9px 10px; border: 1px solid #3a5462; border-radius: 8px; font-size: 11px; list-style: none; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu .icon { width: 16px; height: 16px; }
.account-popover { position: absolute; right: 0; top: calc(100% + 8px); width: 260px; padding: 18px; background: #152b38; border: 1px solid #3a5462; border-radius: 10px; box-shadow: 0 12px 30px #07131b50; }
.account-popover dt,.project-dates dt { font-size: 10px; color: #9bb3c2; margin-bottom: 5px; }
.account-popover dd,.project-dates dd { font-size: 11px; margin: 0; color: #dae8ed; }
.account-popover p { font-size: 10px; color: #9bb3c2; margin-bottom: 0; }
.project-dates { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 12px; padding-top: 14px; margin: 16px 0; border-top: 1px solid #304957; }
.project-dates time { display: inline-block; line-height: 1.5; }
.project-activity { margin-top: 18px; }
.project-activity summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 11px; color: #a8c3cf; }
.project-activity .icon { width: 15px; height: 15px; }
.project-card { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.project-card:hover,.project-card:focus-within { border-color: #67cfb5; box-shadow: 0 12px 28px #06161f40; transform: translateY(-2px); }
.project-preview-link { position: relative; display: block; text-decoration: none; border-radius: 10px; overflow: hidden; }
.project-preview-open { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 9px; color: #d6f8ec; background: #0d2837b8; opacity: 0; transition: opacity .2s ease; font-size: 12px; font-weight: 600; }
.project-card:hover .project-preview-open,.project-card:focus-within .project-preview-open { opacity: 1; }
@media(hover:none) { .project-preview-open { opacity: 1; inset: auto 8px 8px auto; border-radius: 7px; padding: 9px; background: #0d2837e8; } }
@media(prefers-reduced-motion:reduce) { .project-card,.project-preview-open { transition: none; transform: none; } }
@media(max-width:720px) { .account-menu summary > span { display: none; } .account-menu summary { padding: 8px; } .account-popover { position: fixed; right: 12px; top: 64px; } }
@media(max-width:720px) { .shell-header { height: 58px; padding: 0 12px; } .shell-brand { font-size: 13px; } .shell-product-label { display: none; } .shell-sidebar { top: 58px; width: 60px; padding: 12px 6px; } .app:not(.workspace-page) .content { margin-left: 60px; padding: 86px 16px 24px; } .app.shell-nav-expanded:not(.workspace-page) .content { margin-left: 60px; } .projects-heading { align-items: flex-start; flex-direction: column; gap: 15px; } .projects-heading h1 { font-size: 24px; } .projects-toolbar { align-items: stretch; flex-direction: column; } .project-search { min-width: 0; } .project-grid { grid-template-columns: minmax(0,1fr); } .project-card { padding: 16px; } .project-form-card { padding: 20px; } .project-form-grid { grid-template-columns: 1fr; gap: 18px; } .project-form-heading .shell-eyebrow { display: none; } }