/* FrameFlow visual system: editorial typography, soft glass surfaces and bento rhythm. */
:root {
  --ff-ink: #172033;
  --ff-muted: #7d879a;
  --ff-line: rgba(31, 45, 74, .10);
  --ff-purple: #6d5df5;
  --ff-coral: #ff795f;
  --ff-lime: #c6f36b;
  --ff-shadow: 0 20px 60px rgba(31, 42, 74, .09);
}

body { background: #f5f6fb; color: var(--ff-ink); }
body::before {
  content: ""; position: fixed; z-index: -1; inset: 0 0 auto 0; height: 420px;
  background: radial-gradient(circle at 83% 8%, rgba(198,243,107,.23), transparent 27%),
    radial-gradient(circle at 19% 0%, rgba(109,93,245,.13), transparent 30%);
  pointer-events: none;
}

.login-shell { background: #f7f7fb; }
.login-art {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(145deg, #161b34 0%, #302d69 58%, #e76d5d 150%);
  color: #fff; padding: clamp(40px, 8vw, 110px);
}
.login-art::before, .login-art::after { content:""; position:absolute; border-radius:50%; z-index:-1; }
.login-art::before { width: 360px; height: 360px; right: -120px; top: -100px; background: rgba(198,243,107,.22); filter: blur(4px); }
.login-art::after { width: 220px; height: 220px; left: -80px; bottom: -50px; background: rgba(255,121,95,.35); filter: blur(12px); }
.login-art h1 { font-size: clamp(35px, 5vw, 70px); letter-spacing: -3px; line-height: 1.05; max-width: 620px; }
.login-art h1 span { color: var(--ff-lime); }
.login-art > p:not(.eyebrow) { color: rgba(255,255,255,.72); max-width: 440px; line-height: 1.9; }
.login-art .brand-mark.large { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.art-card { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); border-radius: 22px; backdrop-filter: blur(16px); box-shadow: 0 20px 50px rgba(0,0,0,.14); }
.login-panel { background: rgba(255,255,255,.88); backdrop-filter: blur(18px); border-left: 1px solid rgba(255,255,255,.7); box-shadow: -18px 0 50px rgba(25,31,70,.07); }
.login-panel h2 { font-size: 30px; letter-spacing: -1px; }
.login-panel label { color: #59647a; }
.login-panel input { border: 1px solid #dfe3ef; border-radius: 14px; background: #fff; padding: 13px 15px; transition: .2s ease; }
.login-panel input:focus { border-color: var(--ff-purple); box-shadow: 0 0 0 4px rgba(109,93,245,.12); }

.sidebar { width: 264px; padding: 27px 18px 20px; background: linear-gradient(180deg,#12162b 0%,#1d2040 58%,#14172e 100%); box-shadow: 14px 0 45px rgba(30,34,73,.14); }
.logo { padding: 0 9px; }
.logo > span:last-child { letter-spacing: -.3px; }
.logo small { color: #969bbd; }
.brand-mark { background: linear-gradient(145deg,#7768ff,#ff806d); border: 0; box-shadow: 0 9px 24px rgba(107,91,245,.32); }
#nav { margin-top: 28px; }
#nav button { border-radius: 13px; margin-bottom: 5px; padding: 12px 13px; color: #a9afd0; transition: .2s ease; }
#nav button:hover { color: #fff; background: rgba(255,255,255,.08); transform: translateX(2px); }
#nav button.active { color: #fff; background: linear-gradient(100deg,rgba(109,93,245,.8),rgba(123,89,227,.42)); box-shadow: 0 10px 25px rgba(109,93,245,.18); }
#nav button i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.09); font-style: normal; }
#nav .nav-label { color: #6d7195; letter-spacing: 2px; margin: 26px 13px 9px; }
.sidebar-foot { border-top-color: rgba(255,255,255,.12); }
.provider-dot { color: #e5e7f4; }
.provider-dot small { color: #969bbd; }

.app-shell main { margin-left: 264px; }
.topbar { height: 86px; padding: 0 45px; background: rgba(247,248,252,.75); border-bottom: 1px solid rgba(33,42,72,.07); backdrop-filter: blur(16px); }
.topbar h1 { letter-spacing: -1px; }
.top-actions .icon-btn { border-radius: 12px; border-color: var(--ff-line); background: #fff; }
.avatar { background: linear-gradient(145deg,#6d5df5,#ff795f); box-shadow: 0 8px 20px rgba(109,93,245,.22); }
.view { max-width: 1420px; padding: 38px 45px 70px; }
.hero { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.55); border-radius: 26px; padding: 35px 38px; background: linear-gradient(115deg,#fff 0%,#f4f1ff 65%,#fff0ea 100%); box-shadow: var(--ff-shadow); }
.hero::after { content:""; position:absolute; width:180px; height:180px; right:4%; top:-90px; border-radius:50%; background:rgba(198,243,107,.48); filter:blur(4px); }
.hero h2 { position: relative; z-index: 1; font-size: clamp(25px,3vw,42px); letter-spacing: -1.5px; }
.hero p { position: relative; z-index: 1; color: #727b91; }
.hero .btn { position: relative; z-index: 1; }
.panel, .card, .toolbar, .studio-form, .content-card, .history-item { border: 1px solid var(--ff-line); border-radius: 19px; box-shadow: var(--ff-shadow); }
.panel-head, .section-title { border-bottom-color: rgba(31,45,74,.08); }
.panel-body { padding: 25px; }
.stats { gap: 16px; }
.stat { position: relative; overflow: hidden; border: 1px solid var(--ff-line); border-radius: 19px; background: linear-gradient(135deg,#fff 0%,#fafaff 70%,#fff2ee 100%); box-shadow: var(--ff-shadow); padding: 23px 25px; }
.stat::after { content:""; position:absolute; right:-28px; top:-28px; width:100px; height:100px; border-radius:50%; background:rgba(109,93,245,.10); }
.stat strong { font-size: 39px; color: var(--ff-ink); }
.grid-2 { gap: 18px; }
.content-list > *, .ideas-table tr, .calendar-item { transition: .18s ease; }
.content-list > *:hover, .ideas-table tr:hover { background: #faf9ff; transform: translateX(3px); }
.btn { border-radius: 12px; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:hover { transform: translateY(-2px); }
.btn.primary, .btn.lime { border: 0; background: linear-gradient(135deg,#6d5df5,#8b58e6); box-shadow: 0 12px 25px rgba(109,93,245,.22); }
.btn.primary:hover, .btn.lime:hover { background: linear-gradient(135deg,#5c4ceb,#7e4fd9); box-shadow: 0 16px 30px rgba(109,93,245,.28); }
.btn.small { border-color: var(--ff-line); }
input, select, textarea { border-radius: 12px !important; border-color: #dfe3ef !important; background: #fcfcff !important; }
input:focus, select:focus, textarea:focus { border-color: var(--ff-purple) !important; box-shadow: 0 0 0 4px rgba(109,93,245,.10) !important; }
.badge, .status, .type-tag { border-radius: 999px; }
.task-progress { border-radius: 20px; box-shadow: 0 20px 55px rgba(21,29,58,.22); }
.modal-card { border-radius: 24px; border: 1px solid rgba(255,255,255,.65); box-shadow: 0 25px 80px rgba(20,25,60,.25); }
.toast { border-radius: 14px; box-shadow: 0 16px 38px rgba(25,30,58,.22); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(109,93,245,.35); outline-offset: 3px; }
@media (max-width: 980px) { .app-shell main { margin-left: 0; } .topbar { padding: 0 24px; } .view { padding: 28px 24px 55px; } }
@media (max-width: 680px) { .view { padding: 22px 16px 45px; } .hero { padding: 27px 23px; border-radius: 21px; } .hero h2 { font-size: 28px; } .stat { padding: 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }