2026-10-30 12:28:48 +01:00
/* Generated, do not edit. sha256:3a6f73b7505bd7ec634402e61c222e218812ab7432c634bed61f9c0331123db5 */
2026-10-29 11:57:29 +01:00
: root {
--logo-mask : url ( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cpath d='M 46.108 37.099 L 79.826 68.032 L 113.068 37.288 L 142.067 37.244 L 92.564 85.773 L 92.367 123.544 L 80.04 135.851 L 67.262 123.517 L 67.425 85.773 L 17.176 37.092 L 46.108 37.099 Z'/%3E%3Cpath d='M 49.901 91.273 L 0 43.722 L 0 24.666 L 64.78 87.731 L 64.689 118.25 L 50.234 105.711 L 49.901 91.273 Z'/%3E%3Cpath d='M 95.221 87.779 L 160 24.149 L 160 43.383 L 109.554 93.918 L 109.584 105.756 L 94.924 118.584 L 95.221 87.779 Z'/%3E%3C/svg%3E" );
--radius-sm : 8 px ;
--radius-md : 14 px ;
--radius-lg : 20 px ;
--radius-xl : 28 px ;
--radius-full : 999 px ;
--font-base : 'Inter' , - apple-system , sans-serif ;
--font-mono : 'SF Mono' , 'Fira Code' , monospace ;
--ease-out : cubic-bezier ( 0.16 , 1 , 0.3 , 1 );
--table-vh-offset : 9.5 rem ;
--table-row-lines : 2 ;
--table-line-h : 1.35 em ;
--table-cell-py : 0.85 rem ;
--table-actions-w : 6.8 rem ;
--table-exp-w : 2.2 rem ;
--table-exp-pad : 0.55 rem ;
--sig-chrome : 7.7 rem ;
--main-pad-y : 1.7 rem ;
--main-pad-x : var ( -- sidebar - pad );
--page-head-h : 4.25 rem ;
--aside-vh-offset : 5.9 rem ;
--year-box-w : 4.4 rem ;
--year-box-h : 2.6 rem ;
--page-aside-w : calc ( var ( -- sidebar - w ) * 1.65 );
--hint-line-x : var ( -- sidebar - w );
--sidebar-w : 240 px ;
--sidebar-pad : 1.5 rem ;
--nav-line-cap : 10 px ;
--nav-line-top : 1.7 rem ;
--nav-line-bottom : 1.7 rem ;
--sig-green : var ( -- pos ); --sig-yellow : #ffd93d ; --sig-red : var ( -- neg ); --sig-blue : #5b9bff ;
--sig-green-zone : rgba ( 57 , 255 , 138 , 0.12 ); --sig-yellow-zone : rgba ( 255 , 217 , 61 , 0.10 ); --sig-red-zone : rgba ( 255 , 69 , 69 , 0.10 );
}
[ data-theme = "light" ] {
--sig-yellow : #c98a00 ;
--sig-green-zone : rgba ( 0 , 122 , 72 , 0.12 ); --sig-yellow-zone : rgba ( 201 , 138 , 0 , 0.10 ); --sig-red-zone : rgba ( 204 , 34 , 34 , 0.10 );
}
[ data-theme = "dark" ][ data-accent = "neutral" ] {
--bg : #080808 ; --bg-elevated : #181818 ; --bg-raised : #242424 ; --bg-overlay : #303030 ;
--border : rgba ( 255 , 255 , 255 , 0.18 ); --border-mid : rgba ( 255 , 255 , 255 , 0.28 );
--text-primary : #f2f2f2 ; --text-sec : #a3a3a3 ; --text-ter : #6a6a6a ;
--accent : #a3a3a3 ; --accent-soft : rgba ( 255 , 255 , 255 , 0.08 ); --accent-mid : rgba ( 255 , 255 , 255 , 0.14 );
--accent-glow : rgba ( 255 , 255 , 255 , 0.10 ); --accent-text : #a3a3a3 ;
--pos : #39FF8A ; --pos-bg : rgba ( 57 , 255 , 138 , 0.16 ); --neg : #ff5a5a ; --neg-bg : rgba ( 255 , 69 , 69 , 0.18 );
--neutral-bg : rgba ( 255 , 255 , 255 , 0.08 ); --input-bg : #1c1c1c ; --scrollbar : #2c2c2c ;
}
[ data-theme = "light" ][ data-accent = "neutral" ] {
--bg : #fff ; --bg-elevated : #f7f7f7 ; --bg-raised : #f0f0f0 ; --bg-overlay : #e8e8e8 ;
--border : rgba ( 0 , 0 , 0 , 0.12 ); --border-mid : rgba ( 0 , 0 , 0 , 0.18 );
--text-primary : #0a0a0a ; --text-sec : #888 ; --text-ter : #bbb ;
--accent : #888 ; --accent-soft : rgba ( 0 , 0 , 0 , 0.05 ); --accent-mid : rgba ( 0 , 0 , 0 , 0.10 );
--accent-glow : rgba ( 0 , 0 , 0 , 0.08 ); --accent-text : #888 ;
--pos : #007a48 ; --pos-bg : rgba ( 0 , 149 , 90 , 0.08 ); --neg : #cc2222 ; --neg-bg : rgba ( 204 , 34 , 34 , 0.08 );
--neutral-bg : rgba ( 0 , 0 , 0 , 0.04 ); --input-bg : #f5f5f5 ; --scrollbar : #ddd ;
}
[ data-theme = "dark" ][ data-accent = "orange" ] {
--bg : #080808 ; --bg-elevated : #181818 ; --bg-raised : #242424 ; --bg-overlay : #303030 ;
--border : rgba ( 255 , 255 , 255 , 0.18 ); --border-mid : rgba ( 255 , 255 , 255 , 0.28 );
--text-primary : #f2f2f2 ; --text-sec : #a3a3a3 ; --text-ter : #6a6a6a ;
--accent : #FF6B00 ; --accent-soft : rgba ( 255 , 107 , 0 , 0.16 ); --accent-mid : rgba ( 255 , 107 , 0 , 0.26 );
--accent-glow : rgba ( 255 , 107 , 0 , 0.30 ); --accent-text : #FF8124 ;
--pos : #39FF8A ; --pos-bg : rgba ( 57 , 255 , 138 , 0.16 ); --neg : #ff5a5a ; --neg-bg : rgba ( 255 , 69 , 69 , 0.18 );
--neutral-bg : rgba ( 255 , 255 , 255 , 0.08 ); --input-bg : #1c1c1c ; --scrollbar : #2c2c2c ;
}
[ data-theme = "dark" ][ data-accent = "blue" ] {
--bg : #080808 ; --bg-elevated : #181818 ; --bg-raised : #242424 ; --bg-overlay : #303030 ;
--border : rgba ( 255 , 255 , 255 , 0.18 ); --border-mid : rgba ( 255 , 255 , 255 , 0.28 );
--text-primary : #f2f2f2 ; --text-sec : #a3a3a3 ; --text-ter : #6a6a6a ;
--accent : #3B82F6 ; --accent-soft : rgba ( 59 , 130 , 246 , 0.16 ); --accent-mid : rgba ( 59 , 130 , 246 , 0.26 );
--accent-glow : rgba ( 59 , 130 , 246 , 0.30 ); --accent-text : #6AA1FF ;
--pos : #39FF8A ; --pos-bg : rgba ( 57 , 255 , 138 , 0.16 ); --neg : #ff5a5a ; --neg-bg : rgba ( 255 , 69 , 69 , 0.18 );
--neutral-bg : rgba ( 255 , 255 , 255 , 0.08 ); --input-bg : #1c1c1c ; --scrollbar : #2c2c2c ;
}
[ data-theme = "light" ][ data-accent = "orange" ] {
--bg : #fff ; --bg-elevated : #f7f7f7 ; --bg-raised : #f0f0f0 ; --bg-overlay : #e8e8e8 ;
--border : rgba ( 0 , 0 , 0 , 0.12 ); --border-mid : rgba ( 0 , 0 , 0 , 0.18 );
--text-primary : #0a0a0a ; --text-sec : #888 ; --text-ter : #bbb ;
--accent : #E05500 ; --accent-soft : rgba ( 224 , 85 , 0 , 0.08 ); --accent-mid : rgba ( 224 , 85 , 0 , 0.16 );
--accent-glow : rgba ( 224 , 85 , 0 , 0.22 ); --accent-text : #E05500 ;
--pos : #007a48 ; --pos-bg : rgba ( 0 , 149 , 90 , 0.08 ); --neg : #cc2222 ; --neg-bg : rgba ( 204 , 34 , 34 , 0.08 );
--neutral-bg : rgba ( 0 , 0 , 0 , 0.04 ); --input-bg : #f5f5f5 ; --scrollbar : #ddd ;
}
[ data-theme = "light" ][ data-accent = "blue" ] {
--bg : #fff ; --bg-elevated : #f7f7f7 ; --bg-raised : #f0f0f0 ; --bg-overlay : #e8e8e8 ;
--border : rgba ( 0 , 0 , 0 , 0.12 ); --border-mid : rgba ( 0 , 0 , 0 , 0.18 );
--text-primary : #0a0a0a ; --text-sec : #888 ; --text-ter : #bbb ;
--accent : #2563EB ; --accent-soft : rgba ( 37 , 99 , 235 , 0.08 ); --accent-mid : rgba ( 37 , 99 , 235 , 0.16 );
--accent-glow : rgba ( 37 , 99 , 235 , 0.22 ); --accent-text : #2563EB ;
--pos : #007a48 ; --pos-bg : rgba ( 0 , 149 , 90 , 0.08 ); --neg : #cc2222 ; --neg-bg : rgba ( 204 , 34 , 34 , 0.08 );
--neutral-bg : rgba ( 0 , 0 , 0 , 0.04 ); --input-bg : #f5f5f5 ; --scrollbar : #ddd ;
}
[ data-theme = "dark" ][ data-accent = "lila" ] {
--bg : #080808 ; --bg-elevated : #181818 ; --bg-raised : #242424 ; --bg-overlay : #303030 ;
--border : rgba ( 255 , 255 , 255 , 0.18 ); --border-mid : rgba ( 255 , 255 , 255 , 0.28 );
--text-primary : #f2f2f2 ; --text-sec : #a3a3a3 ; --text-ter : #6a6a6a ;
--accent : #B388FF ; --accent-soft : rgba ( 179 , 136 , 255 , 0.16 ); --accent-mid : rgba ( 179 , 136 , 255 , 0.26 );
--accent-glow : rgba ( 179 , 136 , 255 , 0.30 ); --accent-text : #C7A6FF ;
--pos : #39FF8A ; --pos-bg : rgba ( 57 , 255 , 138 , 0.16 ); --neg : #ff5a5a ; --neg-bg : rgba ( 255 , 69 , 69 , 0.18 );
--neutral-bg : rgba ( 255 , 255 , 255 , 0.08 ); --input-bg : #1c1c1c ; --scrollbar : #2c2c2c ;
}
[ data-theme = "light" ][ data-accent = "lila" ] {
--bg : #fff ; --bg-elevated : #f7f7f7 ; --bg-raised : #f0f0f0 ; --bg-overlay : #e8e8e8 ;
--border : rgba ( 0 , 0 , 0 , 0.12 ); --border-mid : rgba ( 0 , 0 , 0 , 0.18 );
--text-primary : #0a0a0a ; --text-sec : #888 ; --text-ter : #bbb ;
--accent : #7C3AED ; --accent-soft : rgba ( 124 , 58 , 237 , 0.08 ); --accent-mid : rgba ( 124 , 58 , 237 , 0.16 );
--accent-glow : rgba ( 124 , 58 , 237 , 0.22 ); --accent-text : #7C3AED ;
--pos : #007a48 ; --pos-bg : rgba ( 0 , 149 , 90 , 0.08 ); --neg : #cc2222 ; --neg-bg : rgba ( 204 , 34 , 34 , 0.08 );
--neutral-bg : rgba ( 0 , 0 , 0 , 0.04 ); --input-bg : #f5f5f5 ; --scrollbar : #ddd ;
}
[ data-theme = "dark" ][ data-accent = "teal" ] {
--bg : #080808 ; --bg-elevated : #181818 ; --bg-raised : #242424 ; --bg-overlay : #303030 ;
--border : rgba ( 255 , 255 , 255 , 0.18 ); --border-mid : rgba ( 255 , 255 , 255 , 0.28 );
--text-primary : #f2f2f2 ; --text-sec : #a3a3a3 ; --text-ter : #6a6a6a ;
--accent : #14B8A6 ; --accent-soft : rgba ( 20 , 184 , 166 , 0.16 ); --accent-mid : rgba ( 20 , 184 , 166 , 0.26 );
--accent-glow : rgba ( 20 , 184 , 166 , 0.30 ); --accent-text : #2DD4BF ;
--pos : #39FF8A ; --pos-bg : rgba ( 57 , 255 , 138 , 0.16 ); --neg : #ff5a5a ; --neg-bg : rgba ( 255 , 69 , 69 , 0.18 );
--neutral-bg : rgba ( 255 , 255 , 255 , 0.08 ); --input-bg : #1c1c1c ; --scrollbar : #2c2c2c ;
}
[ data-theme = "light" ][ data-accent = "teal" ] {
--bg : #fff ; --bg-elevated : #f7f7f7 ; --bg-raised : #f0f0f0 ; --bg-overlay : #e8e8e8 ;
--border : rgba ( 0 , 0 , 0 , 0.12 ); --border-mid : rgba ( 0 , 0 , 0 , 0.18 );
--text-primary : #0a0a0a ; --text-sec : #888 ; --text-ter : #bbb ;
--accent : #0D9488 ; --accent-soft : rgba ( 13 , 148 , 136 , 0.08 ); --accent-mid : rgba ( 13 , 148 , 136 , 0.16 );
--accent-glow : rgba ( 13 , 148 , 136 , 0.22 ); --accent-text : #0D9488 ;
--pos : #007a48 ; --pos-bg : rgba ( 0 , 149 , 90 , 0.08 ); --neg : #cc2222 ; --neg-bg : rgba ( 204 , 34 , 34 , 0.08 );
--neutral-bg : rgba ( 0 , 0 , 0 , 0.04 ); --input-bg : #f5f5f5 ; --scrollbar : #ddd ;
}
[ data-theme = "dark" ][ data-accent = "magenta" ] {
--bg : #080808 ; --bg-elevated : #181818 ; --bg-raised : #242424 ; --bg-overlay : #303030 ;
--border : rgba ( 255 , 255 , 255 , 0.18 ); --border-mid : rgba ( 255 , 255 , 255 , 0.28 );
--text-primary : #f2f2f2 ; --text-sec : #a3a3a3 ; --text-ter : #6a6a6a ;
--accent : #E24DAE ; --accent-soft : rgba ( 226 , 77 , 174 , 0.16 ); --accent-mid : rgba ( 226 , 77 , 174 , 0.26 );
--accent-glow : rgba ( 226 , 77 , 174 , 0.30 ); --accent-text : #F072C4 ;
--pos : #39FF8A ; --pos-bg : rgba ( 57 , 255 , 138 , 0.16 ); --neg : #ff5a5a ; --neg-bg : rgba ( 255 , 69 , 69 , 0.18 );
--neutral-bg : rgba ( 255 , 255 , 255 , 0.08 ); --input-bg : #1c1c1c ; --scrollbar : #2c2c2c ;
}
[ data-theme = "light" ][ data-accent = "magenta" ] {
--bg : #fff ; --bg-elevated : #f7f7f7 ; --bg-raised : #f0f0f0 ; --bg-overlay : #e8e8e8 ;
--border : rgba ( 0 , 0 , 0 , 0.12 ); --border-mid : rgba ( 0 , 0 , 0 , 0.18 );
--text-primary : #0a0a0a ; --text-sec : #888 ; --text-ter : #bbb ;
--accent : #BE2A86 ; --accent-soft : rgba ( 190 , 42 , 134 , 0.08 ); --accent-mid : rgba ( 190 , 42 , 134 , 0.16 );
--accent-glow : rgba ( 190 , 42 , 134 , 0.22 ); --accent-text : #BE2A86 ;
--pos : #007a48 ; --pos-bg : rgba ( 0 , 149 , 90 , 0.08 ); --neg : #cc2222 ; --neg-bg : rgba ( 204 , 34 , 34 , 0.08 );
--neutral-bg : rgba ( 0 , 0 , 0 , 0.04 ); --input-bg : #f5f5f5 ; --scrollbar : #ddd ;
}
[ data-theme = "dark" ][ data-accent = "indigo" ] {
--bg : #080808 ; --bg-elevated : #181818 ; --bg-raised : #242424 ; --bg-overlay : #303030 ;
--border : rgba ( 255 , 255 , 255 , 0.18 ); --border-mid : rgba ( 255 , 255 , 255 , 0.28 );
--text-primary : #f2f2f2 ; --text-sec : #a3a3a3 ; --text-ter : #6a6a6a ;
--accent : #818CF8 ; --accent-soft : rgba ( 129 , 140 , 248 , 0.16 ); --accent-mid : rgba ( 129 , 140 , 248 , 0.26 );
--accent-glow : rgba ( 129 , 140 , 248 , 0.30 ); --accent-text : #A5B4FC ;
--pos : #39FF8A ; --pos-bg : rgba ( 57 , 255 , 138 , 0.16 ); --neg : #ff5a5a ; --neg-bg : rgba ( 255 , 69 , 69 , 0.18 );
--neutral-bg : rgba ( 255 , 255 , 255 , 0.08 ); --input-bg : #1c1c1c ; --scrollbar : #2c2c2c ;
}
[ data-theme = "light" ][ data-accent = "indigo" ] {
--bg : #fff ; --bg-elevated : #f7f7f7 ; --bg-raised : #f0f0f0 ; --bg-overlay : #e8e8e8 ;
--border : rgba ( 0 , 0 , 0 , 0.12 ); --border-mid : rgba ( 0 , 0 , 0 , 0.18 );
--text-primary : #0a0a0a ; --text-sec : #888 ; --text-ter : #bbb ;
--accent : #4F46E5 ; --accent-soft : rgba ( 79 , 70 , 229 , 0.08 ); --accent-mid : rgba ( 79 , 70 , 229 , 0.16 );
--accent-glow : rgba ( 79 , 70 , 229 , 0.22 ); --accent-text : #4F46E5 ;
--pos : #007a48 ; --pos-bg : rgba ( 0 , 149 , 90 , 0.08 ); --neg : #cc2222 ; --neg-bg : rgba ( 204 , 34 , 34 , 0.08 );
--neutral-bg : rgba ( 0 , 0 , 0 , 0.04 ); --input-bg : #f5f5f5 ; --scrollbar : #ddd ;
}
[ data-theme = "dark" ][ data-accent = "cyan" ] {
--bg : #080808 ; --bg-elevated : #181818 ; --bg-raised : #242424 ; --bg-overlay : #303030 ;
--border : rgba ( 255 , 255 , 255 , 0.18 ); --border-mid : rgba ( 255 , 255 , 255 , 0.28 );
--text-primary : #f2f2f2 ; --text-sec : #a3a3a3 ; --text-ter : #6a6a6a ;
--accent : #22D3EE ; --accent-soft : rgba ( 34 , 211 , 238 , 0.16 ); --accent-mid : rgba ( 34 , 211 , 238 , 0.26 );
--accent-glow : rgba ( 34 , 211 , 238 , 0.30 ); --accent-text : #67E8F9 ;
--pos : #39FF8A ; --pos-bg : rgba ( 57 , 255 , 138 , 0.16 ); --neg : #ff5a5a ; --neg-bg : rgba ( 255 , 69 , 69 , 0.18 );
--neutral-bg : rgba ( 255 , 255 , 255 , 0.08 ); --input-bg : #1c1c1c ; --scrollbar : #2c2c2c ;
}
[ data-theme = "light" ][ data-accent = "cyan" ] {
--bg : #fff ; --bg-elevated : #f7f7f7 ; --bg-raised : #f0f0f0 ; --bg-overlay : #e8e8e8 ;
--border : rgba ( 0 , 0 , 0 , 0.12 ); --border-mid : rgba ( 0 , 0 , 0 , 0.18 );
--text-primary : #0a0a0a ; --text-sec : #888 ; --text-ter : #bbb ;
--accent : #0E7490 ; --accent-soft : rgba ( 14 , 116 , 144 , 0.08 ); --accent-mid : rgba ( 14 , 116 , 144 , 0.16 );
--accent-glow : rgba ( 14 , 116 , 144 , 0.22 ); --accent-text : #0E7490 ;
--pos : #007a48 ; --pos-bg : rgba ( 0 , 149 , 90 , 0.08 ); --neg : #cc2222 ; --neg-bg : rgba ( 204 , 34 , 34 , 0.08 );
--neutral-bg : rgba ( 0 , 0 , 0 , 0.04 ); --input-bg : #f5f5f5 ; --scrollbar : #ddd ;
}
[ data-theme = "dark" ][ data-accent = "slate" ] {
--bg : #080808 ; --bg-elevated : #181818 ; --bg-raised : #242424 ; --bg-overlay : #303030 ;
--border : rgba ( 255 , 255 , 255 , 0.18 ); --border-mid : rgba ( 255 , 255 , 255 , 0.28 );
--text-primary : #f2f2f2 ; --text-sec : #a3a3a3 ; --text-ter : #6a6a6a ;
--accent : #94A3B8 ; --accent-soft : rgba ( 148 , 163 , 184 , 0.16 ); --accent-mid : rgba ( 148 , 163 , 184 , 0.26 );
--accent-glow : rgba ( 148 , 163 , 184 , 0.30 ); --accent-text : #B4C0D0 ;
--pos : #39FF8A ; --pos-bg : rgba ( 57 , 255 , 138 , 0.16 ); --neg : #ff5a5a ; --neg-bg : rgba ( 255 , 69 , 69 , 0.18 );
--neutral-bg : rgba ( 255 , 255 , 255 , 0.08 ); --input-bg : #1c1c1c ; --scrollbar : #2c2c2c ;
}
[ data-theme = "light" ][ data-accent = "slate" ] {
--bg : #fff ; --bg-elevated : #f7f7f7 ; --bg-raised : #f0f0f0 ; --bg-overlay : #e8e8e8 ;
--border : rgba ( 0 , 0 , 0 , 0.12 ); --border-mid : rgba ( 0 , 0 , 0 , 0.18 );
--text-primary : #0a0a0a ; --text-sec : #888 ; --text-ter : #bbb ;
--accent : #475569 ; --accent-soft : rgba ( 71 , 85 , 105 , 0.08 ); --accent-mid : rgba ( 71 , 85 , 105 , 0.16 );
--accent-glow : rgba ( 71 , 85 , 105 , 0.22 ); --accent-text : #475569 ;
--pos : #007a48 ; --pos-bg : rgba ( 0 , 149 , 90 , 0.08 ); --neg : #cc2222 ; --neg-bg : rgba ( 204 , 34 , 34 , 0.08 );
--neutral-bg : rgba ( 0 , 0 , 0 , 0.04 ); --input-bg : #f5f5f5 ; --scrollbar : #ddd ;
}
[ data-theme = "dark" ][ data-accent = "sand" ] {
--bg : #080808 ; --bg-elevated : #181818 ; --bg-raised : #242424 ; --bg-overlay : #303030 ;
--border : rgba ( 255 , 255 , 255 , 0.18 ); --border-mid : rgba ( 255 , 255 , 255 , 0.28 );
--text-primary : #f2f2f2 ; --text-sec : #a3a3a3 ; --text-ter : #6a6a6a ;
--accent : #C8B89E ; --accent-soft : rgba ( 200 , 184 , 158 , 0.16 ); --accent-mid : rgba ( 200 , 184 , 158 , 0.26 );
--accent-glow : rgba ( 200 , 184 , 158 , 0.30 ); --accent-text : #DDD0BA ;
--pos : #39FF8A ; --pos-bg : rgba ( 57 , 255 , 138 , 0.16 ); --neg : #ff5a5a ; --neg-bg : rgba ( 255 , 69 , 69 , 0.18 );
--neutral-bg : rgba ( 255 , 255 , 255 , 0.08 ); --input-bg : #1c1c1c ; --scrollbar : #2c2c2c ;
}
[ data-theme = "light" ][ data-accent = "sand" ] {
--bg : #fff ; --bg-elevated : #f7f7f7 ; --bg-raised : #f0f0f0 ; --bg-overlay : #e8e8e8 ;
--border : rgba ( 0 , 0 , 0 , 0.12 ); --border-mid : rgba ( 0 , 0 , 0 , 0.18 );
--text-primary : #0a0a0a ; --text-sec : #888 ; --text-ter : #bbb ;
--accent : #7A6650 ; --accent-soft : rgba ( 122 , 102 , 80 , 0.08 ); --accent-mid : rgba ( 122 , 102 , 80 , 0.16 );
--accent-glow : rgba ( 122 , 102 , 80 , 0.22 ); --accent-text : #7A6650 ;
--pos : #007a48 ; --pos-bg : rgba ( 0 , 149 , 90 , 0.08 ); --neg : #cc2222 ; --neg-bg : rgba ( 204 , 34 , 34 , 0.08 );
--neutral-bg : rgba ( 0 , 0 , 0 , 0.04 ); --input-bg : #f5f5f5 ; --scrollbar : #ddd ;
}
: root {
--surface : var ( -- bg - elevated );
--surface-inset : var ( -- bg - raised );
--surface-blur : 0 px ;
--surface-sat : 100 % ;
--edge : none ;
--ambient : none ;
--shadow-1 : 0 1 px 2 px rgba ( 0 , 0 , 0 , 0.06 ), 0 4 px 16 px rgba ( 0 , 0 , 0 , 0.05 );
--shadow-2 : 0 12 px 44 px rgba ( 0 , 0 , 0 , 0.35 );
--shadow-3 : 0 24 px 60 px rgba ( 0 , 0 , 0 , 0.40 );
--lift-shadow : var ( -- shadow -2 );
--hover-shadow : var ( -- lift - shadow );
}
[ data-theme = "light" ] { --lift-shadow : 0 8 px 22 px -14 px rgba ( 0 , 0 , 0 , 0.14 ); --hover-shadow : 0 10 px 26 px -12 px rgba ( 0 , 0 , 0 , 0.20 ); }
[ data-theme = "dark" ] { --shadow-1 : 0 1 px 2 px rgba ( 0 , 0 , 0 , 0.30 ); }
[ data-depth = "deep" ] { --surface-blur : 16 px ; --surface-sat : 135 % ; }
[ data-depth = "deep" ][ data-theme = "dark" ] {
--surface : color-mix ( in srgb , #1c1c1c 78 % , transparent );
--surface-inset : color-mix ( in srgb , #262626 76 % , transparent );
--edge : linear-gradient ( 180 deg , rgba ( 255 , 255 , 255 , 0.10 ), rgba ( 255 , 255 , 255 , 0 ) 42 % );
--shadow-1 : 0 1 px 2 px rgba ( 0 , 0 , 0 , 0.35 ), 0 10 px 30 px -18 px rgba ( 0 , 0 , 0 , 0.9 );
}
[ data-depth = "deep" ][ data-theme = "light" ] {
--surface : color-mix ( in srgb , #ffffff 72 % , transparent );
--surface-inset : color-mix ( in srgb , #f2f2f2 74 % , transparent );
--edge : linear-gradient ( 180 deg , rgba ( 255 , 255 , 255 , 0.85 ), rgba ( 255 , 255 , 255 , 0 ) 46 % );
}
[ data-depth = "deep" ] : not ([ data-glow = "off" ]) {
--ambient : radial-gradient ( 58 rem 34 rem at 8 % -8 % , var ( -- accent - glow ), transparent 62 % ),
radial-gradient ( 46 rem 30 rem at 102 % 4 % , color-mix ( in srgb , var ( -- accent ) 14 % , transparent ), transparent 66 % );
}
@ media ( prefers-reduced-transparency : reduce ) {
[ data-depth = "deep" ] {
--surface : var ( -- bg - elevated ); --surface-inset : var ( -- bg - raised );
--surface-blur : 0 px ; --surface-sat : 100 % ;
}
}
@ media ( prefers-reduced-motion : reduce ) {
body :: before , . card , . table-frame { transition : none ; }
}
: root {
--frost : transparent ;
--surface-tint : var ( -- surface - inset );
--row-line : color-mix ( in srgb , var ( -- border ) 50 % , transparent );
--row-hover : var ( -- neutral - bg );
--lit : none ;
--lift : none ;
--slider-track : var ( -- bg - raised );
--slider-track-edge : inset 0 0 0 1 px var ( -- border );
--slider-fill : linear-gradient ( var ( -- accent ), var ( -- accent ));
--slider-thumb : var ( -- text - primary );
--slider-thumb-edge : 0 0 0 2 px var ( -- bg ), 0 1 px 3 px rgba ( 0 , 0 , 0 , 0.5 );
}
[ data-theme = "light" ] {
--slider-thumb : #ffffff ;
--slider-thumb-edge : 0 0 0 1 px rgba ( 0 , 0 , 0 , 0.14 ), 0 1 px 3 px rgba ( 0 , 0 , 0 , 0.2 );
}
: root [ data-profile = "glass" ] { --surface-blur : 36 px ; --float-blur : calc (( 100 - var ( -- dialog - transparency , 30 )) * 0.4 px ); }
: root { --ring-seam : 0 ; --ring-sheen : 0 ; }
: root [ data-profile = "glass" ] { --ring-seam : 2 ; --ring-sheen : 1 ; }
: root [ data-profile = "glass" ][ data-theme = "dark" ] {
--surface : color-mix ( in srgb , #161616 calc ( 100 % - var ( -- glass - transparency , 65 % )), transparent );
--surface-inset : color-mix ( in srgb , #262626 calc ( 100 % - var ( -- glass - transparency , 65 % )), transparent );
--surface-tint : rgba ( 255 , 255 , 255 , 0.035 );
--surface-sat : 165 % ;
--frost : color-mix ( in srgb , #ffffff var ( -- glass - frost , 3 % ), transparent );
--edge : linear-gradient ( 155 deg , rgba ( 255 , 255 , 255 , 0.07 ), rgba ( 255 , 255 , 255 , 0.015 ) 55 % , rgba ( 255 , 255 , 255 , 0 ));
--shadow-1 : 0 1 px 2 px rgba ( 0 , 0 , 0 , 0.4 ), 0 24 px 60 px -28 px rgba ( 0 , 0 , 0 , 0.85 );
--glans : inset 0 0 0 transparent ;
--glans-on : inset 0 0 0 transparent ;
--hover-shadow : 0 18 px 40 px -22 px rgba ( 0 , 0 , 0 , 0.7 );
--select-shadow : 0 14 px 44 px -18 px var ( -- accent - glow );
--frame-border : rgba ( 255 , 255 , 255 , 0.10 );
--frame-top : rgba ( 255 , 255 , 255 , 0.12 );
--row-line : rgba ( 255 , 255 , 255 , 0.07 );
--row-hover : rgba ( 255 , 255 , 255 , 0.05 );
--row-sel : rgba ( 255 , 255 , 255 , 0.09 );
--row-sel-hover : rgba ( 255 , 255 , 255 , 0.13 );
--rim-top : rgba ( 255 , 255 , 255 , 0.18 );
--rim-bottom : rgba ( 255 , 255 , 255 , 0.05 );
--rim-hover : rgba ( 255 , 255 , 255 , 0.55 );
--rim-hover-bottom : rgba ( 255 , 255 , 255 , 0.16 );
--hairline : rgba ( 255 , 255 , 255 , 0.60 );
--hairline-hover : rgba ( 255 , 255 , 255 , 0.95 );
--hover-fill : rgba ( 255 , 255 , 255 , 0.04 );
--chip-on : rgba ( 255 , 255 , 255 , 0.12 );
--chip-on-edge : inset 0 1 px 0 rgba ( 255 , 255 , 255 , 0.16 );
--float-bg : color-mix ( in srgb , var ( -- bg - raised ) calc ( 100 % - var ( -- dialog - transparency , 30 ) * 1 % ), transparent );
--slider-track : rgba ( 255 , 255 , 255 , 0.07 );
--slider-track-edge : inset 0 1 px 2 px rgba ( 0 , 0 , 0 , 0.45 ), 0 1 px 0 rgba ( 255 , 255 , 255 , 0.06 );
--slider-fill : linear-gradient ( 90 deg , color-mix ( in srgb , var ( -- accent ) 40 % , transparent ), var ( -- accent ));
--slider-thumb : radial-gradient ( circle at 35 % 30 % , #ffffff , rgba ( 255 , 255 , 255 , 0.8 ) 50 % , rgba ( 255 , 255 , 255 , 0.55 ));
--slider-thumb-edge : inset 0 0 0 1 px rgba ( 255 , 255 , 255 , 0.7 ), 0 2 px 10 px rgba ( 0 , 0 , 0 , 0.55 ), 0 0 14 px -2 px var ( -- accent - glow );
}
: root [ data-profile = "glass" ][ data-theme = "light" ] {
--surface : color-mix ( in srgb , #ffffff calc ( 100 % - var ( -- glass - transparency , 65 % )), transparent );
--surface-inset : color-mix ( in srgb , #f4f4f4 calc ( 100 % - var ( -- glass - transparency , 65 % )), transparent );
--surface-tint : rgba ( 0 , 0 , 0 , 0.025 );
--surface-sat : 160 % ;
--frost : color-mix ( in srgb , #ffffff calc ( var ( -- glass - frost , 3 % ) * 2 ), transparent );
--edge : linear-gradient ( 155 deg , rgba ( 255 , 255 , 255 , 0.7 ), rgba ( 255 , 255 , 255 , 0.12 ) 60 % );
--shadow-1 : 0 1 px 2 px rgba ( 0 , 0 , 0 , 0.04 ), 0 10 px 28 px -20 px rgba ( 0 , 0 , 0 , 0.10 );
--glans : inset 0 1 px 0 rgba ( 255 , 255 , 255 , 0.9 );
--glans-on : inset 0 0 0 transparent ;
--hover-shadow : 0 10 px 26 px -12 px rgba ( 0 , 0 , 0 , 0.20 );
--select-shadow : 0 8 px 24 px -14 px color-mix ( in srgb , var ( -- accent ) 22 % , transparent );
--frame-border : rgba ( 0 , 0 , 0 , 0.12 );
--frame-top : rgba ( 255 , 255 , 255 , 0.9 );
--row-line : rgba ( 0 , 0 , 0 , 0.06 );
--row-hover : rgba ( 0 , 0 , 0 , 0.035 );
--row-sel : rgba ( 255 , 255 , 255 , 0.6 );
--row-sel-hover : rgba ( 255 , 255 , 255 , 0.75 );
--rim-top : rgba ( 0 , 0 , 0 , 0.14 );
--rim-bottom : rgba ( 0 , 0 , 0 , 0.07 );
--rim-hover : rgba ( 0 , 0 , 0 , 0.28 );
--rim-hover-bottom : rgba ( 0 , 0 , 0 , 0.14 );
--hairline : rgba ( 0 , 0 , 0 , 0.22 );
--hairline-hover : rgba ( 0 , 0 , 0 , 0.42 );
--hover-fill : rgba ( 255 , 255 , 255 , 0.35 );
--chip-on : rgba ( 255 , 255 , 255 , 0.75 );
--chip-on-edge : inset 0 1 px 0 #ffffff , 0 1 px 2 px rgba ( 0 , 0 , 0 , 0.08 );
--float-bg : color-mix ( in srgb , #ffffff calc ( 100 % - var ( -- dialog - transparency , 30 ) * 1 % ), transparent );
--slider-track : rgba ( 0 , 0 , 0 , 0.06 );
--slider-track-edge : inset 0 1 px 2 px rgba ( 0 , 0 , 0 , 0.12 ), 0 1 px 0 rgba ( 255 , 255 , 255 , 0.9 );
--slider-fill : linear-gradient ( 90 deg , color-mix ( in srgb , var ( -- accent ) 40 % , transparent ), var ( -- accent ));
--slider-thumb : radial-gradient ( circle at 35 % 30 % , #ffffff , #f5f5f5 55 % , #e6e6e6 );
--slider-thumb-edge : inset 0 0 0 1 px rgba ( 0 , 0 , 0 , 0.10 ), 0 2 px 8 px rgba ( 0 , 0 , 0 , 0.18 ), 0 0 14 px -2 px var ( -- accent - glow );
}
: root [ data-profile = "glass" ] : not ([ data-glow = "off" ]) {
--ambient : radial-gradient ( 58 rem 34 rem at 8 % -8 % , var ( -- accent - glow ), transparent 62 % ),
radial-gradient ( 46 rem 30 rem at 102 % 4 % , color-mix ( in srgb , var ( -- accent ) 14 % , transparent ), transparent 66 % );
}
: root [ data-profile = "glass" ] : not ([ data-render = "real" ]) : is ( . card , . table-frame ) {
backdrop-filter : none ; -webkit- backdrop-filter : none ;
}
@ media ( prefers-reduced-transparency : reduce ) {
: root [ data-profile = "glass" ][ data-theme ] {
--surface : var ( -- bg - elevated ); --surface-inset : var ( -- bg - raised ); --surface-tint : var ( -- bg - raised );
--surface-blur : 0 px ; --surface-sat : 100 % ; --frost : transparent ;
}
}
*, * :: before , * :: after { box-sizing : border-box ; margin : 0 ; padding : 0 ; }
html { scroll-behavior : smooth ; scrollbar-width : thin ; scrollbar-color : var ( -- scrollbar ) transparent ; }
body {
font-family : var ( -- font - base ); background : var ( -- bg ); color : var ( -- text - primary );
font-size : 15 px ; line-height : 1.6 ; -webkit- font-smoothing : antialiased ;
transition : background 0.25 s , color 0.25 s ;
}
a { color : var ( -- accent ); }
a : visited { color : var ( -- accent ); }
body :: before {
content : '' ; position : fixed ; inset : 0 ; z-index : 0 ; pointer-events : none ;
background : var ( -- ambient ); transition : background 0.3 s ;
}
. page { position : relative ; z-index : 1 ; display : flex ; min-height : 100 vh ; }
. page , . mobile-topbar { opacity : 0 ; }
html [ data-app = "ready" ] . page , html [ data-app = "ready" ] . mobile-topbar { opacity : 1 ; transition : opacity 0.3 s var ( -- ease-out ); }
. sidebar {
width : var ( -- sidebar - w ); flex-shrink : 0 ; position : sticky ; top : 0 ; height : 100 vh ; overflow-y : auto ;
padding : var ( -- nav - line - top ) var ( -- sidebar - pad ) 2 rem ; scrollbar-width : none ;
display : flex ; flex-direction : column ; transition : border-color 0.25 s , background 0.25 s ;
}
. sidebar :: -webkit-scrollbar { display : none ; }
# splash { position : fixed ; inset : 0 ; z-index : 2000 ; display : none ; align-items : center ; justify-content : center ; background : var ( -- bg ); transition : opacity 0 ms ease ; }
html [ data-splash = "on" ] # splash { display : flex ; }
# splash . is-done { opacity : 0 ; pointer-events : none ; }
. splash-stage { display : flex ; flex-direction : column ; align-items : center ; gap : 2.4 rem ; padding : 1 rem ; }
. splash-band { display : flex ; align-items : center ; gap : clamp ( 1.2 rem , 4 vmin , 2.6 rem ); }
. splash-logo { width : clamp ( 9 rem , 38 vmin , 17 rem ); aspect-ratio : 1 ; background : var ( -- text - primary ); -webkit- mask : var ( -- logo - mask ) center / contain no-repeat ; mask : var ( -- logo - mask ) center / contain no-repeat ; animation : splashLogo 1.3 s cubic-bezier ( 0.2 , 0.7 , 0.2 , 1 ) both ; }
. splash-wing { display : flex ; flex-direction : column ; gap : 0.55 rem ; }
. splash-wing--l { align-items : flex-end ; }
. splash-wing--r { align-items : flex-start ; }
. splash-wing span { position : relative ; display : block ; height : 1 px ; width : clamp ( 4 rem , 17 vw , 15 rem ); background : var ( -- border - mid ); transform : scaleX ( 0 ); animation : splashDraw 0.8 s cubic-bezier ( 0.25 , 0.8 , 0.3 , 1 ) 0.55 s both ; }
. splash-wing span : nth-child ( 2 ) { height : 3 px ; }
. splash-wing span : nth-child ( 1 ), . splash-wing span : nth-child ( 3 ) { width : clamp ( 2.4 rem , 10.5 vw , 9.5 rem ); }
. splash-wing--l span { transform-origin : right center ; }
. splash-wing--r span { transform-origin : left center ; }
. splash-wing span :: after { content : "" ; position : absolute ; inset : 0 ; background : var ( -- accent ); opacity : 0 ; animation : splashIgnite 0.9 s linear 1.35 s both ; }
. splash-title { white-space : nowrap ; font-size : clamp ( 1 rem , 3.2 vmin , 1.5 rem ); font-weight : 300 ; letter-spacing : 0.42 em ; padding-left : 0.42 em ; text-transform : uppercase ; color : var ( -- text - primary ); animation : splashTitle 0.9 s ease 0.9 s both ; }
@ keyframes splashLogo { from { opacity : 0 ; transform : scale ( 0.8 ); } to { opacity : 1 ; transform : scale ( 1 ); } }
@ keyframes splashDraw { to { transform : scaleX ( 1 ); } }
@ keyframes splashIgnite { 0 % { opacity : 0 ; } 8 % { opacity : 0.9 ; } 14 % { opacity : 0.1 ; } 26 % { opacity : 0.75 ; } 34 % { opacity : 0.2 ; } 48 % { opacity : 1 ; } 100 % { opacity : 1 ; } }
@ keyframes splashTitle { from { opacity : 0 ; letter-spacing : 0.6 em ; } to { opacity : 1 ; letter-spacing : 0.42 em ; } }
. splash-portfolio { margin-top : 0.9 rem ; font-size : clamp ( 0.8 rem , 2 vmin , 0.95 rem ); font-weight : 300 ; letter-spacing : 0.18 em ; text-transform : uppercase ; color : var ( -- text - sec ); animation : splashTitle 0.9 s ease 1.4 s both ; }
. splash-portfolio :: after { content : var ( -- portfolio - name , "" ); }
html : not ([ data-portfolio ]) . splash-portfolio { display : none ; }
. splash-quote { display : none ; max-width : min ( 34 rem , 82 vw ); min-height : 7.7 em ; text-align : center ; font-size : clamp ( 0.85 rem , 2.2 vmin , 1 rem ); font-weight : 300 ; font-style : italic ; letter-spacing : 0.06 em ; line-height : 1.9 ; color : var ( -- text - sec ); }
# splash . is-manual . splash-quote { display : block ; }
. splash-quote-caret { display : inline-block ; width : 1 px ; height : 1 em ; margin-left : 2 px ; background : currentColor ; vertical-align : -0.15 em ; animation : splashCaret 1 s steps ( 1 ) infinite ; }
# splash . is-typed . splash-quote-caret { display : none ; }
@ keyframes splashCaret { 50 % { opacity : 0 ; } }
@ media ( prefers-reduced-motion : reduce ) {
# splash { transition : none ; }
# splash . splash-logo , # splash . splash-wing span , # splash . splash-title ,
# splash . splash-portfolio { animation : none ; transform : none ; opacity : 1 ; }
# splash . splash-wing span :: after { animation : none ; opacity : 1 ; }
# splash . splash-quote-caret { animation : none ; }
}
. login-page { min-height : 100 vh ; display : flex ; align-items : center ; justify-content : center ; padding : 1.5 rem ; background : var ( -- bg ); }
. login-form { display : flex ; flex-direction : column ; align-items : center ; gap : 0.7 rem ; width : min ( 22 rem , 88 vw ); animation : loginRise 0.7 s ease 1.5 s both ; }
. login-row { display : flex ; align-items : stretch ; justify-content : center ; gap : 0.5 rem ; width : 100 % ; }
. login-row . btn { flex : 0 0 auto ; }
@ media ( max-width : 768px ) {
. login-row { flex-direction : column ; }
. login-row . btn { width : 100 % ; }
}
. login-input { flex : 1 1 auto ; }
. login-error { min-height : 1.1 em ; margin : 0 ; text-align : center ; }
@ keyframes loginRise { from { opacity : 0 ; transform : translateY ( 0.6 rem ); } to { opacity : 1 ; transform : none ; } }
@ media ( prefers-reduced-motion : reduce ) {
. login-page . splash-logo , . login-page . splash-wing span , . login-page . splash-title ,
. login-page . splash-portfolio , . login-form { animation : none ; transform : none ; opacity : 1 ; }
. login-page . splash-wing span :: after { animation : none ; opacity : 1 ; }
}
. sidebar-logo { font-size : 1 rem ; font-weight : 700 ; letter-spacing : -0.01 em ; margin-bottom : 2 rem ; display : flex ; flex-direction : column ; align-items : center ; gap : 0.6 rem ; text-align : center ; cursor : pointer ; }
. sidebar-portfolio { margin-top : -1.4 rem ; margin-bottom : 2 rem ; text-align : center ; font-size : 0.7 rem ; font-weight : 600 ; letter-spacing : 0.12 em ; text-transform : uppercase ; color : var ( -- text - sec ); }
. sidebar-portfolio :: after { content : var ( -- portfolio - name , "" ); }
html : not ([ data-portfolio ]) . sidebar-portfolio { display : none ; }
. mobile-topbar-portfolio { font-size : 0.6 rem ; font-weight : 600 ; line-height : 1.2 ; letter-spacing : 0.08 em ; text-transform : uppercase ; color : var ( -- text - sec ); overflow : hidden ; text-overflow : ellipsis ; white-space : nowrap ; }
. mobile-topbar-portfolio :: after { content : var ( -- portfolio - name , "" ); }
html : not ([ data-portfolio ]) . mobile-topbar-portfolio { display : none ; }
. sidebar-logo-icon { width : 40 px ; height : 40 px ; background : var ( -- accent ); border-radius : 10 px ; display : grid ; align-content : end ; place-items : center ; flex-shrink : 0 ; transition : background 0.45 s var ( -- ease-out ); }
. sidebar-logo-icon :: before { content : "" ; width : 30 px ; height : 30 px ; background : #fff ; -webkit- mask : var ( -- logo - mask ) center / contain no-repeat ; mask : var ( -- logo - mask ) center / contain no-repeat ; transform : translateY ( 2 px ); }
[ data-theme = "dark" ] . sidebar-logo-icon :: before { background : #000 ; }
. sidebar-logo . sidebar-logo-icon { width : 56 px ; height : 45 px ; border-radius : 8 px ; }
. sidebar-logo . sidebar-logo-icon :: before { width : 46 px ; height : 46 px ; }
. mobile-topbar-logo . sidebar-logo-icon { width : 40 px ; height : 32 px ; border-radius : 6 px ; }
. mobile-topbar-logo . sidebar-logo-icon :: before { width : 33 px ; height : 33 px ; transform : translateY ( 1 px ); }
. sidebar-section-title { text-align : right ; padding : 1.4 rem 0.6 rem 0.5 rem 0 ; }
. sidebar-section-title : first-child { padding-top : 0 ; }
# nav { display : flex ; flex-direction : column ; flex : 1 ; padding-bottom : 1 rem ; }
. nav-spacer { flex : 1 1 auto ; min-height : 1.8 rem ; }
. sidebar a { display : block ; font-size : 0.92 rem ; font-weight : 600 ; letter-spacing : 0.01 em ; color : var ( -- text - sec ); text-decoration : none ; padding : 0.32 rem 0.6 rem ; text-align : right ; transition : color 0.15 s ; margin : 1 px 0 ; cursor : pointer ; }
. sidebar a : hover { color : var ( -- text - primary ); }
. sidebar a . active { color : var ( -- accent - text ); }
. sidebar a . has-attention { display : flex ; align-items : center ; justify-content : flex-end ; gap : 0.4 rem ; }
. sidebar a . is-customizable { display : flex ; align-items : center ; justify-content : flex-end ; gap : 0.4 rem ; }
. sidebar a . nav-attention { order : -1 ; }
. sidebar a . nav-edit-toggle { order : -2 ; }
. nav-edit-toggle { flex : none ; display : inline-flex ; align-items : center ; color : var ( -- text - sec ); opacity : 0 ; cursor : pointer ; padding : 0.12 rem ; border-radius : var ( -- radius - sm ); transition : opacity 0.12 s , color 0.12 s , background 0.12 s ; }
. sidebar a . is-customizable : hover . nav-edit-toggle { opacity : 0.5 ; }
. sidebar a . is-customizable . nav-edit-toggle . is-on { opacity : 1 ; color : var ( -- accent ); }
. sidebar a . is-customizable . nav-edit-toggle : hover { opacity : 1 ; color : var ( -- accent ); background : var ( -- accent - soft ); }
. sidebar a . nav-label { min-width : 0 ; overflow : hidden ; text-overflow : ellipsis ; }
. nav-attention { --attn-c : var ( -- accent ); display : inline-block ; flex : none ; width : 7 px ; height : 7 px ; border-radius : 50 % ; background : var ( -- attn - c ); vertical-align : middle ; }
. nav-attention . is-problem { --attn-c : var ( -- sig - red ); }
. nav-attention . is-dim { opacity : 0.4 ; box-shadow : none ; animation : none ; }
@ media ( prefers-reduced-motion : no-preference ) { . nav-attention { animation : attn-pulse 2 s ease-in-out infinite ; } }
. controls { margin-top : auto ; padding-top : 1.5 rem ; border-top : 1 px solid var ( -- border ); display : flex ; flex-direction : column ; gap : 0.75 rem ; }
. pill-toggle { display : flex ; background : var ( -- pill - track , var ( -- bg - raised )); border-radius : var ( -- radius - full ); padding : 3 px ; gap : 2 px ; }
. slider { -webkit- appearance : none ; appearance : none ; width : 100 % ; height : 22 px ; margin : 0 ; background : transparent ; cursor : pointer ; --pct : 50 % ; }
. slider :: -webkit-slider-runnable-track { height : 6 px ; border-radius : var ( -- radius - full );
background : var ( -- slider - fill ) 0 0 / var ( -- pct ) 100 % no-repeat , var ( -- slider - track ); box-shadow : var ( -- slider - track - edge ); }
. slider :: -moz-range-track { height : 6 px ; border-radius : var ( -- radius - full ); background : var ( -- slider - track ); box-shadow : var ( -- slider - track - edge ); }
. slider :: -moz-range-progress { height : 6 px ; border-radius : var ( -- radius - full ); background : var ( -- slider - fill ); }
. slider :: -webkit-slider-thumb { -webkit- appearance : none ; appearance : none ; width : 18 px ; height : 18 px ; margin-top : -6 px ; border : 0 ; border-radius : 50 % ;
background : var ( -- slider - thumb ); box-shadow : var ( -- slider - thumb - edge ); transition : transform 0.15 s var ( -- ease-out ), box-shadow 0.15 s ; }
. slider :: -moz-range-thumb { width : 18 px ; height : 18 px ; border : 0 ; border-radius : 50 % ;
background : var ( -- slider - thumb ); box-shadow : var ( -- slider - thumb - edge ); transition : transform 0.15 s var ( -- ease-out ), box-shadow 0.15 s ; }
. slider : hover :: -webkit-slider-thumb { transform : scale ( 1.1 ); }
. slider : hover :: -moz-range-thumb { transform : scale ( 1.1 ); }
. slider : active :: -webkit-slider-thumb { transform : scale ( 1.18 ); box-shadow : var ( -- slider - thumb - edge ), 0 0 0 6 px var ( -- accent - soft ); }
. slider : active :: -moz-range-thumb { transform : scale ( 1.18 ); box-shadow : var ( -- slider - thumb - edge ), 0 0 0 6 px var ( -- accent - soft ); }
. slider : focus-visible { outline : none ; }
. slider : focus-visible :: -webkit-slider-thumb { box-shadow : var ( -- slider - thumb - edge ), 0 0 0 3 px var ( -- bg ), 0 0 0 5 px var ( -- accent ); }
. slider : focus-visible :: -moz-range-thumb { box-shadow : var ( -- slider - thumb - edge ), 0 0 0 3 px var ( -- bg ), 0 0 0 5 px var ( -- accent ); }
. slider-row { display : grid ; grid-template-columns : 7.5 rem minmax ( 0 , 1 fr ) 3.2 rem ; align-items : center ; gap : 0.75 rem ; font-size : 0.8 rem ; color : var ( -- text - sec ); }
. slider-row output { text-align : right ; font-variant-numeric : tabular-nums ; color : var ( -- text - primary ); }
. slider-row--wide { grid-template-columns : 10 rem minmax ( 0 , 1 fr ) 3.2 rem ; }
[ data-theme = "dark" ] : is ( . dialog , . card ) { --pill-track : rgba ( 0 , 0 , 0 , 0.30 ); }
[ data-theme = "light" ] : is ( . dialog , . card ) { --pill-track : rgba ( 0 , 0 , 0 , 0.06 ); }
. accent-dots { display : flex ; flex-wrap : wrap ; gap : 0.5 rem ; }
. accent-dots button {
width : 22 px ; height : 22 px ; padding : 0 ; border-radius : 50 % ; border : 2 px solid transparent ;
background : var ( -- accent ); background-clip : padding-box ; box-shadow : 0 0 0 1 px var ( -- border );
cursor : pointer ; transition : border-color 0.15 s , transform 0.15 s ;
}
. accent-dots button : hover { transform : scale ( 1.12 ); }
. accent-dots button . on { border-color : var ( -- text - primary ); }
. accent-dots button : focus-visible { outline : 2 px solid var ( -- accent ); outline-offset : 2 px ; }
. pill-toggle button { flex : 1 ; border : none ; background : transparent ; color : var ( -- text - sec ); font-family : var ( -- font - base ); font-size : 0.75 rem ; font-weight : 500 ; padding : 0.3 rem 0.5 rem ; border-radius : var ( -- radius - full ); cursor : pointer ; transition : all 0.2 s ; white-space : nowrap ; }
. pill-toggle button . on { background : var ( -- accent ); color : #fff ; }
[ data-theme = "dark" ] . pill-toggle button . on { color : #000 ; }
. controls { gap : 0.5 rem ; }
. controls . pill-toggle { padding : 2 px ; }
. controls . pill-toggle button { font-size : 0.66 rem ; padding : 0.2 rem 0.4 rem ; }
. main { flex : 1 ; padding : var ( -- main - pad - y ) var ( -- main - pad - x ); max-width : none ; min-width : 0 ; }
. main :: before , . page-aside :: after {
content : "" ; position : fixed ; pointer-events : none ;
top : var ( -- nav - line - top ); bottom : var ( -- nav - line - bottom );
width : var ( -- nav - line - cap );
border : 1 px solid var ( -- border - mid ); border-left : none ;
border-top-right-radius : calc ( var ( -- nav - line - cap ) - 1 px );
border-bottom-right-radius : calc ( var ( -- nav - line - cap ) - 1 px );
transition : border-color 0.25 s ;
}
. main :: before { left : calc ( var ( -- sidebar - w ) - var ( -- nav - line - cap )); }
. sidebar a . active { position : relative ; }
. sidebar a . active :: after {
content : "" ; position : absolute ; z-index : 1 ; top : 0 ; bottom : 0 ;
right : calc ( -1 * var ( -- sidebar - pad ) - 1 px ); width : 3 px ;
border-radius : 2 px ; background : var ( -- accent );
}
. page-layout { display : flex ; align-items : flex-start ; gap : 2 rem ; }
html : has ( . page-layout--narrow ) { --page-aside-w : var ( -- sidebar - w ); }
html : has ( . page-layout > . page-aside ) { --hint-line-x : calc ( var ( -- sidebar - w ) + var ( -- page - aside - w )); }
html : has ( . page-layout > . page-aside ) { --aside-vh-offset : 1.7 rem ; }
. page-aside {
flex : 0 0 var ( -- page - aside - w ); width : var ( -- page - aside - w );
margin-left : calc ( -1 * var ( -- main - pad - x ));
padding : 0 var ( -- sidebar - pad ) 2 rem ;
position : sticky ; top : var ( -- aside - vh - offset ); height : calc ( 100 vh - var ( -- aside - vh - offset ) - var ( -- main - pad - y )); overflow-y : auto ; scrollbar-width : none ;
display : flex ; flex-direction : column ; gap : 1.6 rem ;
z-index : 20 ;
}
. page-aside :: -webkit-scrollbar { display : none ; }
. page-aside . tabset { flex-direction : column ; gap : 0.1 rem ; padding : 0 ; margin : 0 0 0.2 rem ; border-bottom : none ; }
. page-aside . tabset :: before { display : none ; }
. page-aside . tabset-tab { position : relative ; text-align : right ; padding : 0.5 rem 0.2 rem ; margin : 0 ; border-bottom : none ; border-radius : var ( -- radius - sm ); }
. page-aside . tabset-tab . is-on :: after {
content : "" ; position : absolute ; z-index : 1 ; top : 0 ; bottom : 0 ;
right : calc ( -1 * var ( -- sidebar - pad ) - 1 px ); width : 3 px ;
border-radius : 2 px ; background : var ( -- accent );
}
. page-aside :: after { left : calc ( var ( -- sidebar - w ) + var ( -- page - aside - w ) - var ( -- nav - line - cap )); }
. page-body { flex : 1 ; min-width : 0 ; }
@ media ( max-width : 1280px ) {
html : has ( . page-layout > . page-aside ) { --hint-line-x : var ( -- sidebar - w ); }
. page-layout { --page-aside-w : auto ; display : block ; }
. page-aside { position : relative ; top : auto ; width : auto ; height : auto ; overflow : visible ; margin : 0 0 1.8 rem ; padding : 0 ; }
. page-aside :: after { display : none ; }
. page-aside . tabset { flex-direction : row ; flex-wrap : wrap ; gap : 0.5 rem ; }
. page-aside . tabset-tab { text-align : left ; border-bottom : 2 px solid transparent ; }
. page-aside . tabset-tab . is-on { border-bottom-color : var ( -- accent ); }
. page-aside . tabset-tab . is-on :: after { display : none ; }
}
. page-header { display : flex ; align-items : baseline ; gap : 1 rem ; margin-bottom : 2 rem ; }
. page-title { font-size : 1.4 rem ; font-weight : 700 ; letter-spacing : -0.02 em ; }
. page-title svg { width : 1.15 em ; height : 1.15 em ; vertical-align : -0.18 em ; margin-right : 0.35 em ; }
html [ data-pagetitle = "off" ] . page-header : has (> h1 . page-title ) { display : none ; }
html [ data-pagetitle = "off" ] { --table-vh-offset : 5.3 rem ; --sig-chrome : 3.5 rem ; --aside-vh-offset : 1.7 rem ; --page-head-h : 0 rem ; }
html [ data-pagetitle = "off" ] . dashboard-grid { margin-top : 0 ; }
. t-h3 { font-size : 1.1 rem ; font-weight : 600 ; letter-spacing : -0.01 em ; line-height : 1.3 ; }
. t-h4 { font-size : 0.9 rem ; font-weight : 600 ; line-height : 1.4 ; }
. t-body { font-size : 0.93 rem ; font-weight : 400 ; line-height : 1.65 ; color : var ( -- text - primary ); }
. t-body-sm { font-size : 0.82 rem ; line-height : 1.6 ; color : var ( -- text - sec ); }
. t-caption { font-size : 0.72 rem ; line-height : 1.5 ; color : var ( -- text - sec ); }
. t-label { font-size : 0.68 rem ; font-weight : 600 ; letter-spacing : 0.08 em ; text-transform : uppercase ; color : var ( -- text - sec ); }
. t-label--ter { color : var ( -- text - ter ); }
. t-mono { font-size : 0.82 rem ; font-family : var ( -- font - mono ); color : var ( -- accent ); }
. t-num-lg { font-size : 2.4 rem ; font-weight : 700 ; letter-spacing : -0.03 em ; font-variant-numeric : tabular-nums ; }
. t-num-md { font-size : 1.4 rem ; font-weight : 700 ; letter-spacing : -0.02 em ; font-variant-numeric : tabular-nums ; }
. t-pos { color : var ( -- pos ); } . t-neg { color : var ( -- neg ); } . t-muted { color : var ( -- text - sec ); } . t-accent { color : var ( -- accent ); }
. delta { display : inline-block ; width : max-content ; padding : 0.05 rem 0.45 rem ; border-radius : var ( -- radius - full ); font-weight : 600 ; font-variant-numeric : tabular-nums ; }
. delta . t-pos { background : var ( -- pos - bg ); }
. delta . t-neg { background : var ( -- neg - bg ); }
. btn { display : inline-flex ; align-items : center ; justify-content : center ; gap : 0.4 rem ; border : none ; cursor : pointer ; font-family : var ( -- font - base ); font-weight : 600 ; letter-spacing : -0.01 em ; transition : opacity 0.15 s , transform 0.1 s , box-shadow 0.2 s ; white-space : nowrap ; text-decoration : none ; }
. btn : active { transform : scale ( 0.97 ); }
. btn : disabled { opacity : 0.35 ; cursor : not-allowed ; }
. btn : disabled : active { transform : none ; }
. btn-lg { font-size : 0.9 rem ; padding : 0.85 rem 1.8 rem ; border-radius : var ( -- radius - md ); }
. btn-md { font-size : 0.82 rem ; padding : 0.65 rem 1.3 rem ; border-radius : var ( -- radius - md ); }
. btn-sm { font-size : 0.75 rem ; padding : 0.45 rem 0.9 rem ; border-radius : var ( -- radius - sm ); }
. btn-xs { font-size : 0.68 rem ; padding : 0.3 rem 0.7 rem ; border-radius : var ( -- radius - sm ); }
. btn--field { padding-block : 0.65 rem ; font-size : 0.88 rem ; }
. btn-new { width : var ( -- tctl - h ); height : var ( -- tctl - h ); padding : 0 ; align-self : center ; display : inline-flex ; align-items : center ; justify-content : center ; border-radius : var ( -- radius - md ); color : var ( -- accent ); background : var ( -- neutral - bg ); border : 1 px solid var ( -- border ); transition : color 0.15 s , background 0.15 s , border-color 0.15 s ; }
. btn-new : hover { background : var ( -- accent ); border-color : var ( -- accent ); color : #fff ; }
[ data-theme = "dark" ] . btn-new : hover { color : #000 ; }
. tx-link { position : absolute ; left : 0.4 rem ; top : 50 % ; transform : translateY ( -50 % ); width : 3 px ; height : 3 px ; border-radius : 50 % ; background : var ( -- text - ter ); opacity : 0 ; cursor : pointer ; transition : opacity 0.12 s var ( -- ease-out ), transform 0.12 s var ( -- ease-out ), background 0.15 s ; }
. tx-link :: before { content : '' ; position : absolute ; inset : -7 px ; border-radius : var ( -- radius - full ); }
. tx-link . is-matched { opacity : 1 ; background : var ( -- accent ); }
tbody tr : hover . tx-link , . mv-row : hover . tx-link , . tx-link . is-open , . tx-link : focus-visible { opacity : 1 ; transform : translateY ( -50 % ) scale ( 1.9 ); outline : none ; }
. match-pop { position : fixed ; z-index : 1000 ; min-width : 280 px ; max-width : 340 px ; background : var ( -- bg - elevated ); border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - md ); box-shadow : var ( -- shadow -2 ); padding : 0.5 rem ; font-size : 0.82 rem ; }
[ data-theme = "dark" ] . match-pop { background : var ( -- bg - raised ); }
. conv-pop { position : fixed ; z-index : 1000 ; min-width : 210 px ; background : var ( -- bg - elevated ); border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - md ); box-shadow : var ( -- shadow -2 ); padding : 0.7 rem ; font-size : 0.82 rem ; }
[ data-theme = "dark" ] . conv-pop { background : var ( -- bg - raised ); }
. conv-head { margin-bottom : 0.55 rem ; }
. conv-row { display : flex ; align-items : center ; gap : 0.5 rem ; margin-bottom : 0.45 rem ; }
. conv-label { flex : 0 0 4.5 rem ; color : var ( -- text - sec ); }
. conv-row . input { flex : 1 ; min-width : 0 ; }
. conv-apply { width : 100 % ; margin-top : 0.25 rem ; }
. new-menu { position : fixed ; z-index : 1000 ; min-width : 190 px ; max-width : 92 vw ; background : var ( -- bg - elevated ); border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - md ); box-shadow : var ( -- shadow -2 ); padding : 0.4 rem ; display : flex ; flex-direction : column ; gap : 0.2 rem ; }
[ data-theme = "dark" ] . new-menu { background : var ( -- bg - raised ); }
. new-menu . btn { margin : 0 ; padding : 0.55 rem 0.9 rem ; border-radius : var ( -- radius - sm ); transition : color 0.15 s , background 0.15 s , border-color 0.15 s ; }
. new-menu . btn : hover { background : var ( -- accent ); border-color : var ( -- accent ); color : #fff ; }
[ data-theme = "dark" ] . new-menu . btn : hover { color : #000 ; }
. new-menu . new-menu-item { display : block ; width : 100 % ; text-align : left ; white-space : nowrap ; }
. merge-menu { width : 260 px ; max-width : 92 vw ; padding : 0.75 rem ; gap : 0.5 rem ; }
. merge-menu . t-label { margin : 0 ; }
. merge-menu . input { width : 100 % ; }
. merge-menu [ data-merge-status ] { white-space : normal ; line-height : 1.35 ; }
. conv-field { position : relative ; }
. conv-field . input { width : 100 % ; padding-right : 1.7 rem ; }
. conv-trigger { position : absolute ; top : 50 % ; right : 0.3 rem ; transform : translateY ( -50 % ); display : inline-flex ; align-items : center ; justify-content : center ; width : 1.45 rem ; height : 1.45 rem ; padding : 0 ; border : none ; border-radius : var ( -- radius - sm ); background : transparent ; color : var ( -- text - sec ); cursor : pointer ; opacity : 0 ; transition : opacity .12 s , color .15 s , background .15 s ; }
. conv-field : hover . conv-trigger , . conv-field : focus-within . conv-trigger { opacity : 1 ; }
. conv-trigger : hover { color : var ( -- accent ); background : var ( -- bg - overlay ); }
. table-wrap input [ type = "number" ] { appearance : textfield ; -moz- appearance : textfield ; }
. table-wrap input [ type = "number" ] :: -webkit-outer-spin-button ,
. table-wrap input [ type = "number" ] :: -webkit-inner-spin-button { -webkit- appearance : none ; margin : 0 ; }
. input [ type = "number" ] { appearance : textfield ; -moz- appearance : textfield ; }
. input [ type = "number" ] :: -webkit-outer-spin-button ,
. input [ type = "number" ] :: -webkit-inner-spin-button { -webkit- appearance : none ; margin : 0 ; }
. match-pop-head { padding : 0.3 rem 0.35 rem 0.45 rem ; }
. match-pop-link { display : flex ; align-items : flex-start ; gap : 0.5 rem ; padding : 0.5 rem 0.4 rem ; }
. match-pop-cand { display : flex ; align-items : flex-start ; gap : 0.5 rem ; padding : 0.55 rem 0.4 rem ; border-radius : var ( -- radius - sm ); cursor : pointer ; }
. match-pop-cand : hover { background : var ( -- neutral - bg ); }
. match-pop-main { flex : 1 ; min-width : 0 ; }
. match-pop-main . l1 { font-weight : 600 ; line-height : 1.3 ; }
. match-pop-main . l2 { color : var ( -- text - sec ); font-size : 0.74 rem ; line-height : 1.35 ; margin-top : 0.1 rem ; }
. match-pop-method { display : inline-block ; margin-top : 0.3 rem ; font-size : 0.6 rem ; text-transform : uppercase ; letter-spacing : 0.06 em ; color : var ( -- text - ter ); }
. match-pop-x { flex-shrink : 0 ; border : none ; background : none ; color : var ( -- text - ter ); cursor : pointer ; font-size : 1.05 rem ; line-height : 1 ; padding : 0.1 rem 0.35 rem ; border-radius : var ( -- radius - sm ); }
. match-pop-x : hover { color : var ( -- neg ); background : var ( -- neg - bg ); }
. match-pop-sep { border-top : 1 px solid var ( -- border - mid ); margin : 0.4 rem 0 ; }
. match-pop-filter { margin : 0.15 rem 0 0.5 rem ; }
. match-pop-list { max-height : 240 px ; overflow-y : auto ; }
. match-pop-empty { color : var ( -- text - ter ); padding : 0.5 rem 0.35 rem ; }
. btn-primary { background : var ( -- accent ); color : #fff ; }
[ data-theme = "dark" ] . btn-primary { color : #000 ; }
. btn-primary : hover { opacity : 0.88 ; }
[ data-theme = "dark" ][ data-accent = "green" ] . btn-primary { box-shadow : 0 0 20 px var ( -- accent - glow ); }
[ data-theme = "dark" ][ data-accent = "lila" ] . btn-primary { box-shadow : 0 0 20 px var ( -- accent - glow ); }
. btn-secondary { background : var ( -- bg - raised ); color : var ( -- text - primary ); border : 1 px solid var ( -- border - mid ); }
. btn-secondary : hover { background : var ( -- bg - overlay ); }
. btn-ghost { background : transparent ; color : var ( -- text - primary ); border : 1 px solid var ( -- border - mid ); }
. btn-ghost : hover { background : var ( -- neutral - bg ); }
. btn-danger { background : var ( -- neg - bg ); color : var ( -- neg ); }
. btn-danger : hover { opacity : 0.8 ; }
. badge { display : inline-flex ; align-items : center ; gap : 0.3 rem ; font-size : 0.7 rem ; font-weight : 600 ; padding : 0.25 rem 0.65 rem ; border-radius : var ( -- radius - full ); letter-spacing : 0.02 em ; border : 1 px solid color-mix ( in srgb , currentColor 30 % , transparent ); }
. badge svg { width : 0.95 em ; height : 0.95 em ; flex-shrink : 0 ; }
. badge-icon { width : 28 px ; height : 28 px ; padding : 0 ; justify-content : center ; }
. badge-icon svg { width : 15 px ; height : 15 px ; }
. badge-accent { background : var ( -- accent - soft ); color : var ( -- accent - text ); }
. badge-pos { background : var ( -- pos - bg ); color : var ( -- pos ); }
. badge-neg { background : var ( -- neg - bg ); color : var ( -- neg ); }
. badge-neutral { background : var ( -- neutral - bg ); color : var ( -- text - sec ); }
. badge-outline { background : transparent ; color : var ( -- text - sec ); border : 1 px solid var ( -- border - mid ); }
. conn-frame { margin-bottom : 1.4 rem ; }
. conn-usedby { margin : 0.2 rem 0 1 rem ; }
. connp-row { display : grid ; grid-template-columns : repeat ( auto - fill , minmax ( 250 px , 1 fr )); gap : 0.8 rem ; margin-bottom : 1.1 rem ; }
. connp { position : relative ; min-width : 0 ; padding : 0.95 rem 1.15 rem 2.7 rem ; border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - md ); background : var ( -- bg - raised ); cursor : pointer ; transition : border-color 0.15 s , background 0.15 s ; }
. connp : hover { border-color : var ( -- text - ter ); }
. connp . is-active { border-color : var ( -- accent ); background : var ( -- accent - soft ); }
. connp-dot { position : absolute ; top : 0.75 rem ; right : 0.75 rem ; width : 8 px ; height : 8 px ; border-radius : 50 % ; background : var ( -- border - mid ); }
. connp-dot . dot-ok { background : var ( -- pos ); }
. connp-dot . dot-fail { background : var ( -- neg ); }
. connp-name { font-weight : 600 ; padding-right : 1.4 rem ; }
. connp-url { font-family : var ( -- font - mono ); font-size : 0.75 rem ; color : var ( -- text - ter ); margin-top : 0.25 rem ; white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; }
. connp-hover { position : absolute ; right : 0.55 rem ; bottom : 0.55 rem ; display : flex ; gap : 0.3 rem ; opacity : 0 ; transition : opacity 0.15 s ; }
. connp : hover . connp-hover , . connp : focus-within . connp-hover { opacity : 1 ; }
. connp-mini { border : 1 px solid var ( -- border - mid ); background : var ( -- bg - elevated ); color : var ( -- text - sec ); border-radius : var ( -- radius - sm ); width : 1.7 rem ; height : 1.7 rem ; display : grid ; place-items : center ; cursor : pointer ; font-size : 0.78 rem ; }
. connp-mini : hover { color : var ( -- text - primary ); }
. conn-foot { display : flex ; align-items : center ; gap : 0.6 rem ; flex-wrap : wrap ; }
. conn-result { font-size : 0.82 rem ; color : var ( -- text - sec ); opacity : 1 ; transition : opacity 0 ms ease ; }
. conn-result . is-fading { opacity : 0 ; }
. conn-result . is-ok { color : var ( -- pos ); }
. conn-result . is-fail { color : var ( -- neg ); }
. card { position : relative ; background : var ( -- surface ); --radius : var ( -- radius - lg ); --padding : 1.8 rem ; --padding-x : var ( -- padding ); border-radius : var ( -- radius ); padding : var ( -- padding ); box-shadow : var ( -- shadow -1 ); backdrop-filter : blur ( var ( -- surface - blur )) saturate ( var ( -- surface - sat )); -webkit- backdrop-filter : blur ( var ( -- surface - blur )) saturate ( var ( -- surface - sat )); transition : background 0.25 s , box-shadow 0.25 s ; }
[ data-theme = "light" ] . card { border : 1 px solid var ( -- border ); }
[ data-theme = "dark" ] . card { border : 1 px solid var ( -- border ); }
. card :: before { content : '' ; position : absolute ; inset : 0 ; border-radius : inherit ; background : var ( -- edge ); pointer-events : none ; }
. card > * { position : relative ; }
. card-flat { background : var ( -- surface ); border : 1 px solid var ( -- border ); --radius : var ( -- radius - lg ); --padding : 1.4 rem ; border-radius : var ( -- radius ); padding : var ( -- padding ); }
. card > . card , . card > . card-flat , . card > . table-wrap ,
. card-flat > . card , . card-flat > . table-wrap ,
. card . alert , . card . input , . card-flat . input ,
. card . btn , . card-flat . btn , . field . btn ,
. card . label-combo-btn , . card-flat . label-combo-btn ,
. field . field-input {
border-radius : max ( 4 px , calc ( var ( -- radius ) - var ( -- padding )));
}
. t-value { font-weight : 700 ; font-variant-numeric : tabular-nums ; color : var ( -- text - primary ); letter-spacing : -0.025 em ; }
. card-cols { display : grid ; grid-template-columns : repeat ( 3 , minmax ( 0 , 1 fr )); gap : 1.5 rem ; align-items : start ; }
. card-stack { display : flex ; flex-direction : column ; gap : 1.5 rem ; align-items : stretch ; }
@ media ( max-width : 1040px ) { . card-cols { grid-template-columns : repeat ( 2 , minmax ( 0 , 1 fr )); } }
@ media ( max-width : 700px ) { . card-cols { grid-template-columns : 1 fr ; } }
. dashboard-grid { --dash-gap : 1.5 rem ; display : grid ; grid-template-columns : repeat ( 12 , 1 fr ); column-gap : var ( -- dash - gap ); row-gap : var ( -- dash - gap ); grid-auto-rows : 3 rem ; align-items : start ; margin-top : 0.5 rem ; }
. dashboard-cell { min-width : 0 ; min-height : 0 ; display : flex ; flex-direction : column ; }
. dashboard-grid > . dashboard-cell . is-sized { align-self : stretch ; }
. dashboard-body { flex : 1 1 auto ; min-height : 0 ; display : flex ; flex-direction : column ; overflow : hidden ; }
. dashboard-body > * { flex : 1 1 auto ; }
. net-card , . card . clockw , . metrics-card , . standing-card { display : flex ; flex-direction : column ; }
. net-card > # net-body { margin-top : auto ; margin-bottom : auto ; }
. standing-card > # standing-body { margin-top : auto ; margin-bottom : auto ; }
. card . clockw > . clockw-world { margin-top : auto ; }
. card . clockw > . clockw-list { margin-bottom : auto ; }
. card . clockw . clockw--no-ex > . clockw-world { margin-bottom : auto ; }
. metrics-card > . metrics-strip { margin-top : auto ; }
. metrics-card > : last-child { margin-bottom : auto ; }
. metrics-strip { display : flex ; flex-wrap : wrap ; gap : 0.6 rem 1.25 rem ; }
. metric-tile { display : flex ; align-items : center ; gap : 0.5 rem ; min-width : 5 rem ; }
. metric-dot { width : 9 px ; height : 9 px ; border-radius : 50 % ; flex : 0 0 auto ; background : var ( -- text - ter ); }
. metric-dot . is-ok { background : var ( -- sig - green ); }
. metric-dot . is-warn { background : var ( -- sig - yellow ); }
. metric-dot . is-bad { background : var ( -- sig - red ); }
. metric-meta { line-height : 1.15 ; }
. clockw { display : flex ; flex-direction : column ; }
. clockw-world { display : flex ; justify-content : center ; align-items : flex-start ; gap : 0.6 rem ; flex-wrap : nowrap ; margin : 0.3 rem 0 0.7 rem ; }
@ media ( min-width : 769px ) {
. dashboard-cell [ data-w = "1" ] . clockw-world ,
. dashboard-cell [ data-w = "2" ] . clockw-world { flex-direction : column ; align-items : center ; gap : 0.5 rem ; }
. dashboard-cell [ data-w = "1" ] . clockw-world . clockw-clock ,
. dashboard-cell [ data-w = "2" ] . clockw-world . clockw-clock { flex : 0 0 auto ; width : 100 % ; max-width : 84 px ; }
}
. clockw-clock { flex : 1 1 0 ; min-width : 0 ; max-width : 104 px ; display : flex ; flex-direction : column ; align-items : center ; gap : 0.3 rem ; }
. clockw-clock . clockw-face { width : 100 % ; height : auto ; }
. clockw-clock-cap { text-align : center ; line-height : 1.15 ; min-width : 0 ; max-width : 100 % ; }
. clockw-clock-name { display : block ; font-size : 0.68 rem ; color : var ( -- text - sec ); white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; }
. clockw-clock . is-local . clockw-clock-name { color : var ( -- text - primary ); font-weight : 600 ; }
. clockw-clock-time { display : block ; font-family : var ( -- font - mono ); font-size : 0.78 rem ; font-weight : 600 ; color : var ( -- text - primary ); font-variant-numeric : tabular-nums ; }
. clockw-clock-date { display : block ; font-size : 0.62 rem ; color : var ( -- text - ter ); white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; }
. clockw-face { display : block ; }
. clockw-dial { fill : var ( -- bg - elevated ); stroke : var ( -- border ); stroke-width : 1.5 ; transition : stroke 0.3 s , filter 0.3 s ; }
. clockw-tick { stroke : var ( -- text - ter ); stroke-width : 0.8 ; }
. clockw-tick . is-major { stroke : var ( -- text - sec ); stroke-width : 1.6 ; }
. clockw-hand { stroke-linecap : round ; }
. clockw-hour { stroke : var ( -- text - primary ); stroke-width : 3 ; }
. clockw-min { stroke : var ( -- text - primary ); stroke-width : 2 ; }
. clockw-sec { stroke : var ( -- accent ); stroke-width : 1 ; }
. clockw-cap { fill : var ( -- text - primary ); }
. clockw-face . is-open . clockw-dial { stroke : var ( -- sig - green ); stroke-width : 2 ; }
. clockw-list { display : flex ; flex-direction : column ; }
. clockw-list-head { margin : 0.9 rem 0 0.4 rem ; padding : 0 0.3 rem ; }
. clockw-row { display : flex ; align-items : center ; gap : 0.7 rem ; padding : 0.5 rem 0.3 rem ; border-radius : var ( -- radius - sm ); }
. clockw-mini { flex : none ; display : inline-flex ; }
. clockw-mini . clockw-face { width : 32 px ; height : 32 px ; }
. clockw-ex-text { flex : 1 ; min-width : 0 ; display : flex ; flex-direction : column ; gap : 0.05 rem ; }
. clockw-ex-name { min-width : 0 ; font-weight : 600 ; color : var ( -- text - primary ); white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; }
. clockw-ex-sub { font-size : 0.74 rem ; color : var ( -- text - ter ); font-variant-numeric : tabular-nums ; white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; }
. clockw-open { flex : none ; font-size : 0.8 rem ; font-variant-numeric : tabular-nums ; color : var ( -- text - ter ); white-space : nowrap ; }
@ media ( prefers-reduced-motion : no-preference ) { . clockw-row . is-flash { animation : clockw-open-flash 1.5 s ease-out 1 ; } }
@ keyframes clockw-open-flash { 0 % { background : var ( -- sig - green - zone ); } 100 % { background : transparent ; } }
. dash-settings { position : absolute ; top : 2.5 rem ; left : 50 % ; transform : translateX ( -50 % ); z-index : 4 ; min-width : 210 px ; max-width : 88 % ; background : var ( -- bg - elevated ); border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - md ); box-shadow : 0 8 px 24 px rgba ( 0 , 0 , 0 , 0.35 ); padding : 0.55 rem 0.6 rem ; max-height : 280 px ; overflow : auto ; }
[ data-theme = "dark" ] . dash-settings { background : var ( -- bg - raised ); }
. dash-settings [ hidden ] { display : none ; }
. amount-second { margin-left : 0.6 em ; color : var ( -- text - sec ); }
. dash-settings . dash-settings--wide { width : max-content ; max-width : calc ( 100 vw - 2 rem ); }
. dash-set-row { display : flex ; flex-direction : column ; gap : 0.3 rem ; }
. dash-set-row + . dash-set-row { margin-top : 0.6 rem ; padding-top : 0.55 rem ; border-top : 1 px solid var ( -- border ); }
. dash-set-select { font-size : 0.8 rem ; padding : 0.28 rem 0.45 rem ; }
. dashboard-cell . is-settings-open . dash-edit-grip ,
. dashboard-cell . is-settings-open . dash-edit-wsel-wrap ,
. dashboard-cell . is-settings-open . dash-edit-x { opacity : 0.35 ; pointer-events : none ; }
. dashboard-cell . is-settings-open . dash-edit-cfg { color : var ( -- accent ); }
. clockw-settings-title { margin-bottom : 0.4 rem ; }
. clockw-check { display : flex ; align-items : center ; gap : 0.6 rem ; padding : 0.25 rem 0.15 rem ; font-size : 0.85 rem ; color : var ( -- text - primary ); cursor : pointer ; }
. clockw-check-name { min-width : 0 ; overflow : hidden ; text-overflow : ellipsis ; white-space : nowrap ; }
. clockw-settings-sep { border-top : 1 px solid var ( -- border ); margin : 0.45 rem 0 ; }
. net-ladder { display : flex ; align-items : center ; justify-content : flex-end ; gap : 0.4 rem ; font-weight : 600 ; color : var ( -- text - primary ); }
. net-quote { margin-top : 0.5 rem ; font-style : italic ; color : var ( -- text - sec ); line-height : 1.5 ; }
. net-quote strong { font-style : normal ; font-weight : 600 ; color : var ( -- text - primary ); font-variant-numeric : tabular-nums ; }
. net-card { position : relative ; overflow : hidden ; }
. net-watermark { position : absolute ; top : 0.4 rem ; right : -0.7 rem ; z-index : 0 ; font-size : 8 rem ; line-height : 1 ; opacity : 0.09 ; filter : grayscale ( 1 ); pointer-events : none ; user-select : none ; }
. net-card . t-label , . net-card # net-body { position : relative ; z-index : 1 ; }
@ media ( max-width : 768px ) {
. dashboard-grid { grid-auto-rows : auto !important ; }
. dashboard-grid > . dashboard-cell { grid-column : 1 / -1 !important ; grid-row : auto !important ; }
. dashboard-grid > . dashboard-cell . dashboard-body { overflow : visible ; }
}
# dashboard-root { position : relative ; }
. dashboard-grid { transition : opacity 0.2 s var ( -- ease-out ); }
. dashboard-grid . is-loading { opacity : 0 ; }
. dashboard-skeleton { position : absolute ; inset : 0 ; z-index : 1 ; }
. dashboard-skel-grid { --dash-gap : 1.5 rem ; display : grid ; grid-template-columns : repeat ( 12 , 1 fr ); gap : var ( -- dash - gap ); align-items : start ; }
@ media ( max-width : 768px ) { . dashboard-skel-grid > . dashboard-skel-cell { grid-column : 1 / -1 !important ; } }
. dashboard-cell { position : relative ; }
. page-tools { display : flex ; align-items : center ; gap : 0.5 rem ; margin-left : auto ; align-self : center ; }
. page-tools : empty { display : none ; }
. dashboard-grid . is-editing > . dashboard-cell { border-radius : var ( -- radius - lg ); isolation : isolate ; }
. dashboard-grid . is-editing > . dashboard-cell :: before {
content : "" ; position : absolute ; inset : -6 px ; z-index : -1 ; pointer-events : none ;
border : 1.5 px solid var ( -- accent - mid ); border-radius : calc ( var ( -- radius - lg ) + 6 px ); background : transparent ;
transition : border-color 0.18 s var ( -- ease-out ), box-shadow 0.18 s var ( -- ease-out ), background 0.18 s var ( -- ease-out );
}
. dashboard-grid . is-editing > . dashboard-drop-preview {
z-index : 2 ; pointer-events : none ; border-radius : var ( -- radius - lg );
border : 2 px dashed var ( -- accent ); background : var ( -- accent - soft ); box-shadow : 0 0 0 1 px var ( -- accent ), 0 0 18 px var ( -- accent - glow );
}
. dashboard-grid . is-editing > . dashboard-cell . is-drop-swap :: before { border-color : var ( -- accent ); border-width : 2 px ; box-shadow : 0 0 0 1 px var ( -- accent ), 0 8 px 26 px var ( -- accent - glow ); background : var ( -- accent - soft ); }
. dashboard-grid . is-editing > . dashboard-cell . is-dragging { opacity : 0.4 ; }
. dashboard-grid . is-editing > . dashboard-cell . is-dragging :: before { border-color : var ( -- border ); box-shadow : none ; background : transparent ; }
. dashboard-grid . is-dragging-active { user-select : none ; -webkit- user-select : none ; }
. dash-edit-grip { cursor : grab ; touch-action : none ; color : var ( -- text - ter ); display : inline-flex ; align-items : center ; padding : 0.15 rem ; border-radius : 3 px ; line-height : 0 ; }
. dash-edit-grip : hover { color : var ( -- accent ); background : var ( -- neutral - bg ); }
. dashboard-cell . is-dragging . dash-edit-grip { cursor : grabbing ; }
. dashboard-drag-ghost { position : fixed ; z-index : 1000 ; pointer-events : none ; opacity : 0.92 ; transform : rotate ( -1.5 deg ); filter : drop-shadow ( 0 14 px 30 px rgba ( 0 , 0 , 0 , 0.38 )); }
. dashboard-drag-ghost > . card { margin : 0 ; outline : 1.5 px solid var ( -- accent ); outline-offset : 2 px ; }
. dash-edit-bar { position : absolute ; top : 0.6 rem ; left : 50 % ; right : auto ; transform : translateX ( -50 % ); z-index : 3 ; display : flex ; align-items : center ; gap : 0.1 rem ; background : var ( -- bg - elevated ); border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - md ); padding : 0.15 rem 0.3 rem ; box-shadow : 0 2 px 10 px rgba ( 0 , 0 , 0 , 0.2 ); }
[ data-theme = "dark" ] . dash-edit-bar { background : var ( -- bg - raised ); }
. dash-edit-bar button { background : none ; border : 0 ; cursor : pointer ; color : var ( -- text - sec ); display : inline-flex ; align-items : center ; padding : 0.15 rem ; border-radius : 3 px ; line-height : 0 ; }
. dash-edit-bar button : hover { color : var ( -- accent ); background : var ( -- neutral - bg ); }
. dash-edit-bar . chev-btn { padding : 0.15 rem ; }
. dash-edit-wsel-wrap { display : inline-flex ; align-items : center ; gap : 1 px ; }
. dash-edit-wsel { appearance : none ; -webkit- appearance : none ; background : var ( -- bg - raised ); border : 1 px solid var ( -- border - mid ); border-radius : 3 px ; color : var ( -- text - primary ); font : inherit ; font-size : 0.7 rem ; font-weight : 600 ; font-variant-numeric : tabular-nums ; line-height : 1 ; padding : 0.12 rem 0.3 rem ; cursor : pointer ; text-align : right ; }
. dash-edit-wsel option { text-align : right ; }
. dash-edit-wsel : hover { border-color : var ( -- accent ); }
. dash-edit-wsel : focus { outline : none ; border-color : var ( -- accent ); box-shadow : 0 0 0 2 px var ( -- accent - soft ); }
. dash-edit-x : hover { color : var ( -- neg , #e5484d ) !important ; background : none !important ; }
. dash-profiles { display : flex ; flex-direction : column ; gap : 0.25 rem ; min-width : 9 rem ; max-width : 14 rem ; }
. dash-profile-list { display : flex ; flex-direction : column ; background : var ( -- bg - raised ); border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - sm ); padding : 0.15 rem ; max-height : 9 rem ; overflow : auto ; }
. dash-profile-item { display : block ; width : 100 % ; text-align : left ; background : none ; border : 0 ; border-radius : 3 px ; cursor : pointer ; color : var ( -- text - primary ); font : inherit ; font-size : 0.78 rem ; padding : 0.28 rem 0.45 rem ; white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; }
. dash-profile-item : hover { background : var ( -- neutral - bg ); }
. dash-profile-item . is-active { background : var ( -- accent - soft ); color : var ( -- accent ); font-weight : 600 ; }
. dash-profile-actions { display : flex ; justify-content : center ; gap : 0.25 rem ; }
. dash-profile-btn { display : inline-flex ; align-items : center ; justify-content : center ; background : none ; border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - sm ); color : var ( -- text - sec ); cursor : pointer ; padding : 0.3 rem 0.6 rem ; line-height : 0 ; }
. dash-profile-btn : hover : not ( : disabled ) { color : var ( -- accent ); border-color : var ( -- accent ); }
. dash-profile-btn [ data-act = "profile-delete" ] : hover { color : var ( -- neg , #e5484d ); border-color : var ( -- neg , #e5484d ); }
. dash-profile-btn : disabled { opacity : 0.4 ; cursor : default ; }
. nav-tools . dash-profiles { max-width : none ; }
. nav-tools . dash-profile-actions { justify-content : stretch ; }
. nav-tools . dash-profile-btn { flex : 1 1 0 ; }
. dash-add-bar { display : flex ; align-items : center ; justify-content : center ; z-index : 2 ; color : var ( -- accent ); background : var ( -- accent - soft ); border : 1.5 px dashed var ( -- accent ); border-radius : var ( -- radius - lg ); cursor : pointer ; }
. dash-add-bar [ hidden ] { display : none ; }
. dash-add-bar-plus { display : inline-flex ; line-height : 0 ; padding : 0.3 rem ; border-radius : 50 % ; }
. dash-add-bar : hover . dash-add-bar-plus { background : var ( -- accent - mid ); }
. dash-add-bar-plus svg { width : 26 px ; height : 26 px ; }
. dash-add-room { visibility : hidden ; pointer-events : none ; }
. dash-add-pop { position : fixed ; top : auto ; right : auto ; margin-top : 0 ; z-index : 60 ; width : max-content ; max-width : min ( 20 rem , calc ( 100 vw - 1 rem )); }
. dash-add-mobile { display : none ; }
@ media ( max-width : 768px ) {
. dash-add-bar , . dash-add-room { display : none !important ; }
. dash-add-mobile { display : block ; margin-top : 1 rem ; padding : 0.6 rem ; border : 1.5 px dashed var ( -- accent ); border-radius : var ( -- radius - lg ); }
. dash-add-mobile > . t-label { margin : 0 0 0.3 rem 0.5 rem ; }
}
. dashboard-add-menu { position : absolute ; top : 100 % ; right : 0 ; margin-top : 0.35 rem ; min-width : 220 px ; background : var ( -- bg - elevated ); border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - sm ); box-shadow : 0 8 px 24 px rgba ( 0 , 0 , 0 , 0.35 ); padding : 0.3 rem ; z-index : 20 ; display : none ; max-height : 340 px ; overflow : auto ; }
[ data-theme = "dark" ] . dashboard-add-menu { background : var ( -- bg - raised ); }
. dashboard-add-menu . is-open { display : block ; }
. dashboard-add-item { display : block ; width : 100 % ; text-align : left ; background : none ; border : 0 ; cursor : pointer ; color : var ( -- text - primary ); font-size : 0.82 rem ; padding : 0.4 rem 0.5 rem ; border-radius : 3 px ; }
. dashboard-add-item : hover { background : var ( -- accent - soft ); color : var ( -- accent ); }
. dashboard-add-empty { font-size : 0.78 rem ; color : var ( -- text - sec ); padding : 0.4 rem 0.5 rem ; font-style : italic ; }
. nav-tools { display : flex ; flex-direction : column ; gap : 0.3 rem ; margin : 0.35 rem 0 0.7 rem ; padding : 0 0.6 rem ; }
. nav-tools : empty { display : none ; }
. nav-tools . btn { width : 100 % ; }
. nav-edit-group { position : relative ; padding-bottom : 0.5 rem ; }
. nav-edit-group > . nav-tools { margin : 0.3 rem 0 0 ; }
. nav-edit-group > a . active :: after { display : none ; }
. nav-edit-group :: after {
content : "" ; position : absolute ; z-index : 1 ; top : 0 ; bottom : 0 ;
right : calc ( -1 * var ( -- sidebar - pad ) - 1 px ); width : 3 px ;
border-radius : 2 px ; background : var ( -- accent );
}
. spot-card { display : flex ; flex-direction : column ; justify-content : center ; padding : 1 rem 1.1 rem ; --padding : 1 rem ; --padding-x : 1.1 rem ; }
. spot-head-row { align-items : baseline ; }
. spot-head { display : flex ; align-items : center ; gap : 0.35 rem ; }
. spot-price { font-size : 1.15 rem ; font-weight : 700 ; font-variant-numeric : tabular-nums ; color : var ( -- text - primary ); }
. spot-sub { align-items : center ; margin-top : 0.2 rem ; min-height : 1.1 rem ; }
. spark-change { font-size : 0.8 rem ; font-weight : 600 ; font-variant-numeric : tabular-nums ; }
. spark-change . delta { padding : 0.1 rem 0.45 rem 0 ; }
. momentum-dot { position : relative ; display : inline-block ; width : 5 px ; height : 5 px ; margin-left : 0.35 em ; border-radius : 50 % ; vertical-align : 0.12 em ; }
. momentum-dot :: after { content : '' ; position : absolute ; inset : -6 px ; }
. momentum-dot . is-up { background : var ( -- pos ); }
. momentum-dot . is-down { background : var ( -- neg ); }
. range-cycle { display : flex ; justify-content : flex-end ; gap : 0.1 rem ; }
. range-cycle . range-cycle-btn { border-radius : var ( -- radius - md ); }
. spot-spark-wrap { margin-top : 0.5 rem ; height : 38 px ; }
. spot-spark-empty { height : 38 px ; display : flex ; align-items : center ; justify-content : center ; font-size : 0.72 rem ; color : var ( -- text - sec ); font-style : italic ; }
. spark-mini { position : relative ; width : 100 % ; height : 100 % ; }
. spark-mini . is-up { color : var ( -- pos ); }
. spark-mini . is-down { color : var ( -- neg ); }
. spark-mini . is-accent { color : var ( -- accent ); }
. spark-mini-svg { display : block ; width : 100 % ; height : 100 % ; }
. spark-mini-svg . spark-grad-top { stop-color : currentColor ; stop-opacity : 0.28 ; }
. spark-mini-svg . spark-grad-bot { stop-color : currentColor ; stop-opacity : 0 ; }
. spark-mini-clip { position : absolute ; inset : 0 ; overflow : hidden ; pointer-events : none ; }
. spark-mini-vline { position : absolute ; top : 0 ; bottom : 0 ; width : 1 px ; transform : translateX ( -0.5 px ); background : var ( -- text - primary ); opacity : 0.5 ; pointer-events : none ; }
. spark-mini-dot { position : absolute ; left : var ( -- spark - x , 50 % ); width : 8 px ; height : 8 px ; border-radius : 50 % ; background : currentColor ; border : 2 px solid var ( -- bg - elevated ); transform : translate ( -50 % , -50 % ); pointer-events : none ; }
. spark-mini-mark { position : absolute ; left : var ( -- spark - x , 50 % ); width : 6 px ; height : 6 px ; border-radius : 50 % ; background : currentColor ; box-shadow : 0 0 0 1.5 px var ( -- bg - elevated ); transform : translate ( -50 % , -50 % ); pointer-events : none ; }
. spark-mini-mark . is-sell { background : var ( -- bg - elevated ); box-shadow : 0 0 0 1.5 px currentColor ; }
. spark-mini-cmp { opacity : 0.4 ; }
. spot-spark-wrap , . sigw-spark , . wealth-spark {
width : calc ( 100 % + 2 * var ( -- padding - x , 0 px ));
margin-left : calc ( -1 * var ( -- padding - x , 0 px ));
}
. spark-mini-label { position : absolute ; z-index : 2 ; transform : translate ( -50 % , calc ( -100 % - 9 px )); background : var ( -- bg - elevated ); color : var ( -- text - sec ); border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - sm ); padding : 0.2 rem 0.45 rem ; font-size : 0.7 rem ; font-weight : 500 ; line-height : 1.35 ; font-variant-numeric : tabular-nums ; white-space : pre-line ; width : max-content ; max-width : calc ( 100 % - 8 px ); pointer-events : none ; box-shadow : 0 2 px 8 px rgba ( 0 , 0 , 0 , 0.25 ); }
. spark-mini-label :: first-line { color : var ( -- text - primary ); font-weight : 700 ; }
. spark-mini-label . is-below { transform : translate ( -50 % , 9 px ); }
. spark-mini-vline [ hidden ], . spark-mini-dot [ hidden ], . spark-mini-label [ hidden ] { display : none ; }
. dash-tables { display : flex ; flex-direction : column ; margin-top : 0.6 rem ; }
. dash-trow { display : flex ; justify-content : space-between ; align-items : baseline ; gap : 0.8 rem ; padding : 0.32 rem 0 ; border-bottom : 1 px solid var ( -- border ); font-size : 0.86 rem ; }
. dash-trow : last-child { border-bottom : 0 ; }
. dash-trow . tname { color : var ( -- text - sec ); }
. dash-trow . n { font-variant-numeric : tabular-nums ; font-weight : 600 ; color : var ( -- text - primary ); text-align : right ; }
. stw-dot { display : inline-block ; width : 5 px ; height : 5 px ; border-radius : 50 % ; background : var ( -- accent ); margin-right : 0.5 rem ; vertical-align : middle ; flex : none ; }
. stw-today { font-size : 0.8 rem ; color : var ( -- text - sec ); font-variant-numeric : tabular-nums ; margin-bottom : 0.15 rem ; }
. stw-today-row { font-size : 0.75 rem ; margin-right : 1.2 rem ; font-variant-numeric : tabular-nums ; }
. stw-grid { display : grid ; grid-template-columns : minmax ( 0 , 1 fr ) auto auto ; }
. stw-grid > . dash-trow { display : grid ; grid-template-columns : subgrid ; grid-column : 1 / -1 ; gap : 0 ; }
. standing-card . dash-trow { border-bottom : 0 ; }
. stw-grid . tname { min-width : 0 ; padding-right : 0.8 rem ; }
. stw-today-cell { text-align : right ; }
. stw-grid . n . po-host : has ( . po-btn ) :: before { content : '' ; display : inline-block ; width : 1 rem ; transition : width 0.12 s ; }
. stw-grid . n . po-host : hover :: before , . stw-grid . n . po-host : has ( . po-btn : focus-visible ) :: before { width : 0 ; }
. notify-list { margin : 0.35 rem calc ( -1 * var ( -- padding - x , 0.5 rem )) 0 ; container-type : inline - size ; }
. notify-row { display : grid ; grid-template-columns : auto minmax ( 0 , 1 fr ) auto ; grid-template-areas : "count kind side" "count detail side" ; align-items : baseline ; column-gap : 0.75 rem ; row-gap : 0.1 rem ; padding : 0.55 rem var ( -- padding - x , 0.5 rem ); cursor : pointer ; transition : background 0.15 s ; }
. notify-count { grid-area : count ; align-self : center ; }
. notify-kind { grid-area : kind ; }
. notify-detail { grid-area : detail ; }
. notify-side { grid-area : side ; align-self : center ; }
. notify-row : hover , . notify-row : focus-visible { background : var ( -- row - hover ); outline : none ; }
. notify-row : focus-visible { box-shadow : inset 2 px 0 0 var ( -- accent ); }
. notify-count {
display : grid ; place-items : center ; min-width : 1.75 rem ; height : 1.75 rem ; padding : 0 0.3 rem ; border : 1 px solid var ( -- accent ); border-radius : 999 px ;
background : transparent ; color : var ( -- accent - text ); font : inherit ; font-size : 0.76 rem ; font-weight : 600 ; font-variant-numeric : tabular-nums ;
cursor : pointer ; transition : background 0.15 s , color 0.15 s , transform 0.1 s ;
}
. notify-count > * { grid-area : 1 / 1 ; display : inline-flex ; transition : opacity 0.15 s ; }
. notify-check { opacity : 0 ; }
. notify-check svg { width : 14 px ; height : 14 px ; }
. notify-count : is ( : hover , : focus-visible ) { background : var ( -- accent ); color : #fff ; outline : none ; }
[ data-theme = "dark" ] . notify-count : is ( : hover , : focus-visible ) { color : #000 ; }
. notify-count : is ( : hover , : focus-visible ) . notify-n { opacity : 0 ; }
. notify-count : is ( : hover , : focus-visible ) . notify-check { opacity : 1 ; }
. notify-count : active { transform : scale ( 0.94 ); }
. notify-kind { font-size : 0.82 rem ; font-weight : 600 ; color : var ( -- text - primary ); line-height : 1.3 ; overflow-wrap : break-word ; }
. notify-detail { font-size : 0.74 rem ; color : var ( -- text - sec ); line-height : 1.35 ; display : -webkit- box ; -webkit- box-orient : vertical ; -webkit- line-clamp : 2 ; overflow : hidden ; }
. notify-side { display : flex ; align-items : center ; gap : 0.35 rem ; }
. notify-date { font-size : 0.7 rem ; color : var ( -- text - ter ); font-variant-numeric : tabular-nums ; white-space : nowrap ; }
. notify-go { display : inline-flex ; color : var ( -- text - ter ); transition : color 0.15 s ; }
. notify-go svg { width : 14 px ; height : 14 px ; }
. notify-row : is ( : hover , : focus-visible ) . notify-go { color : var ( -- accent - text ); }
@ container ( max-width : 18rem ) {
. notify-row { grid-template-areas : "count kind go" "count detail go" "count date go" ; }
. notify-side { display : contents ; }
. notify-date { grid-area : date ; }
. notify-go { grid-area : go ; align-self : center ; }
}
. imp-conflict { margin-bottom : 0.8 rem ; }
. imp-switch { display : inline-flex ; align-items : center ; gap : 0.55 rem ; cursor : pointer ; }
. imp-switch-label { font-size : 0.72 rem ; font-weight : 600 ; color : var ( -- text - sec ); min-width : 5.5 rem ; text-align : right ; }
. imp-diff { width : 100 % ; border-collapse : collapse ; margin-top : 0.6 rem ; font-size : 0.8 rem ; }
. imp-diff th { color : var ( -- text - ter ); padding : 0.2 rem 0.55 rem ; border-bottom : 1 px solid var ( -- border ); }
. imp-diff td { padding : 0.32 rem 0.55 rem ; border-bottom : 1 px solid var ( -- border ); vertical-align : top ; }
. imp-diff tr : last-child td { border-bottom : 0 ; }
. imp-diff-field { color : var ( -- text - sec ); }
. imp-diff-new { color : var ( -- accent - text ); font-weight : 600 ; }
. imp-multi { margin-bottom : 0.8 rem ; }
. imp-cands { margin-top : 0.4 rem ; }
. imp-cand { padding : 0.55 rem 0 ; border-top : 1 px solid var ( -- border ); }
. imp-cand : first-child { border-top : 0 ; }
. empty-state { font-size : 0.93 rem ; color : var ( -- text - sec ); line-height : 1.6 ; padding : 0.9 rem 0 ; }
. empty-state-why { color : var ( -- text - ter ); }
. task-card-head { display : flex ; align-items : center ; justify-content : space-between ; gap : 0.6 rem ; margin-bottom : 0.6 rem ; }
. task-card-empty { display : flex ; align-items : center ; margin-top : 0.7 rem ; }
. task-card-empty-icon { display : inline-flex ; color : var ( -- accent ); opacity : 0.85 ; }
. task-card-empty-icon svg { width : 28 px ; height : 28 px ; }
. rec-wiz-nav { display : flex ; align-items : center ; justify-content : space-between ; gap : 0.6 rem ; margin-bottom : 0.6 rem ; }
. rec-item { padding : 0.55 rem 0.6 rem ; border-bottom : 1 px solid var ( -- border ); border-radius : var ( -- radius - sm ); }
. rec-item : last-child { border-bottom : 0 ; }
. rec-item-row { display : flex ; align-items : center ; gap : 0.7 rem ; flex-wrap : wrap ; justify-content : space-between ; }
. rec-item-meta { min-width : 0 ; font-size : 0.86 rem ; }
. rec-wiz-item { border : 1 px solid var ( -- border - mid ); background : var ( -- bg - elevated ); padding : 0.9 rem 1 rem ; }
. rec-item . is-current { border-left : 3 px solid var ( -- accent ); background : var ( -- bg - elevated ); }
. rec-hover { opacity : 0 ; transition : opacity 0.15 s ; }
. rec-item : hover . rec-hover , . rec-item : focus-within . rec-hover ,
. rec-item : has ( . prop-form : not ( . hidden )) . rec-hover { opacity : 1 ; }
. rec-bulk { display : flex ; gap : 0.5 rem ; margin-top : 0.6 rem ; }
. sigw-price { font-size : 2 rem ; font-weight : 700 ; letter-spacing : -0.025 em ; font-variant-numeric : tabular-nums ; margin : 0.35 rem 0 0.5 rem ; }
. sigw-sub { margin-bottom : 0.35 rem ; }
. sigw-spark { position : relative ; height : 120 px ; margin-bottom : 0.6 rem ; }
. sigw-lights { display : grid ; grid-template-columns : repeat ( 3 , 1 fr ); gap : 0.55 rem ; }
. sigw-lights . sig-card { text-decoration : none ; color : inherit ; flex-direction : column ; align-items : flex-start ; gap : 0.45 rem ; padding : 0.7 rem 0.7 rem ; border-radius : var ( -- radius - md ); }
. sigw-lights . sig-card-val { white-space : normal ; font-size : 0.78 rem ; }
. sigw-card { display : flex ; flex-direction : column ; }
. sigw-card > . sigw-lights { margin-top : auto ; }
. tax-card { padding : 1.1 rem 1.2 rem ; overflow-x : auto ; }
. tax-group-switch { margin-bottom : 0.8 rem ; }
. tax-card-title { margin-bottom : 0.8 rem ; }
. tax-card-wrap + . tax-card-wrap { margin-top : 1.2 rem ; }
. tax-main-head { display : flex ; align-items : flex-start ; justify-content : space-between ; gap : 0.8 rem ; flex-wrap : wrap ; }
. tax-all { display : inline-flex ; align-items : center ; cursor : pointer ; }
. tax-card-wrap { position : relative ; }
. ai-sec > summary { cursor : pointer ; list-style : none ; display : flex ; align-items : center ; gap : 0.6 rem ; flex-wrap : wrap ; }
. ai-sec > summary :: -webkit-details-marker { display : none ; }
. ai-sec [ open ] > summary . chev-btn { transform : rotate ( 180 deg ); }
. ai-stats { display : flex ; align-items : flex-start ; gap : 1.6 rem ; margin-left : auto ; flex-wrap : wrap ; }
. ai-stat { display : flex ; flex-direction : column ; line-height : 1.3 ; }
. ai-schuiven { display : flex ; align-items : flex-start ; gap : 1.6 rem ; flex-wrap : wrap ; }
. ai-schuiven > . ai-stat { min-width : 5.2 rem ; align-items : center ; text-align : center ; }
. ai-stats > . ai-tellers { display : flex ; align-items : flex-start ; gap : 1.6 rem ; }
. ai-stat > . toggle-switch { margin-top : 0.55 rem ; }
. tax-sec { margin-top : 1.4 rem ; }
. tax-sec > summary { cursor : pointer ; list-style : none ; padding : 0.4 rem 0.2 rem ; display : flex ; align-items : center ; gap : 0.45 rem ; }
. tax-sec > summary :: -webkit-details-marker { display : none ; }
. tax-sec [ open ] > summary . chev-btn { transform : rotate ( 180 deg ); }
. tax-sec > . card { margin-top : 0.6 rem ; }
. tax-table { width : 100 % ; border-collapse : collapse ; table-layout : fixed ; font-size : 0.86 rem ; font-variant-numeric : tabular-nums ; }
. tax-table th { padding : 0.6 rem 0.7 rem ; border-bottom : 1 px solid var ( -- border - mid ); overflow : hidden ; text-overflow : ellipsis ; }
. tax-table th . num , . tax-table td . num { text-align : right ; }
. tax-table td { padding : 0.55 rem 0.7 rem ; border-bottom : 1 px solid var ( -- border ); vertical-align : middle ; white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; }
. tax-table tr : last-child td { border-bottom : none ; }
. tax-table td . cap { color : var ( -- text - sec ); }
. tax-label { font-weight : 600 ; }
. tax-expand { margin-right : 0.35 rem ; vertical-align : middle ; }
. tax-sub { display : none ; }
. tax-sub . visible { display : table-row ; }
. tax-sub td { font-size : 0.78 rem ; }
. tax-sub td . cap { padding-left : 1.6 rem ; }
. tax-totals td { font-weight : 700 ; border-top : 1 px solid var ( -- border - mid ); padding-top : 0.75 rem ; padding-bottom : 0.75 rem ; }
. tax-strong td { font-weight : 700 ; }
. tax-pct { font-size : 0.74 rem ; font-weight : 600 ; margin-right : 0.5 rem ; }
. tax-perf { display : flex ; flex-wrap : wrap ; gap : 0.45 rem ; justify-content : flex-end ; margin-top : 0.2 rem ; }
. tax-perf . tax-pct { margin-right : 0 ; }
. tax-table td [ title ] { cursor : pointer ; }
. tax-pct-lbl { color : var ( -- text - sec ); font-weight : 700 ; font-size : 0.66 rem ; letter-spacing : 0.03 em ; margin-right : 0.25 rem ; }
. tax-colsub { text-transform : none ; letter-spacing : 0 ; font-weight : 400 ; margin-top : 0.1 rem ; }
. form-group { display : flex ; flex-direction : column ; gap : 0.5 rem ; margin-bottom : 1.2 rem ; }
. form-label { font-size : 0.78 rem ; font-weight : 600 ; color : var ( -- text - primary ); }
. form-hint { font-size : 0.72 rem ; color : var ( -- text - sec ); margin-top : 0.3 rem ; }
. form-error { font-size : 0.72 rem ; color : var ( -- neg ); margin-top : 0.3 rem ; }
. input { background : var ( -- input - bg ); border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - md ); padding : 0.65 rem 0.9 rem ; font-family : var ( -- font - base ); font-size : 0.88 rem ; color : var ( -- text - primary ); outline : none ; transition : border-color 0.15 s , box-shadow 0.15 s ; width : 100 % ; }
. input :: placeholder { color : var ( -- text - ter ); }
. input : focus { border-color : var ( -- accent ); box-shadow : 0 0 0 3 px var ( -- accent - soft ); }
. input . error { border-color : var ( -- neg ); }
. input . error : focus { box-shadow : 0 0 0 3 px var ( -- neg - bg ); }
select . input { appearance : none ; cursor : pointer ; }
[ data-theme = "dark" ] select { color-scheme : dark ; }
[ data-theme = "light" ] select { color-scheme : light ; }
select option , select optgroup { background-color : var ( -- bg - elevated ); color : var ( -- text - primary ); }
. select-label { position : relative ; display : inline-flex ; align-items : center ; min-width : 0 ; color : var ( -- text - sec ); }
. select-label select { appearance : none ; -webkit- appearance : none ; border : 0 ; background : transparent ; box-shadow : none ;
padding : 0.1 rem 1.3 rem 0.1 rem 0 ; margin : 0 ; font : inherit ; font-size : 0.9 rem ; font-weight : 500 ; color : inherit ;
cursor : pointer ; outline : none ; text-overflow : ellipsis ; min-width : 0 ; }
. select-label svg { position : absolute ; right : 0 ; width : 1 rem ; height : 1 rem ; pointer-events : none ; }
. select-label : hover , . select-label : focus-within { color : var ( -- accent - text ); }
. select-label select : focus-visible { box-shadow : 0 0 0 2 px var ( -- accent - soft ); border-radius : var ( -- radius - sm , 4 px ); }
textarea . input { resize : vertical ; min-height : 5.5 rem ; }
. toggle-switch { position : relative ; width : 40 px ; height : 22 px ; flex-shrink : 0 ; display : inline-block ; }
. toggle-switch input { opacity : 0 ; width : 0 ; height : 0 ; position : absolute ; }
. toggle-track { position : absolute ; inset : 0 ; background : var ( -- bg - overlay ); border-radius : var ( -- radius - full ); cursor : pointer ; transition : background 0.2 s ; border : 1 px solid var ( -- border - mid ); }
. toggle-switch input : checked ~ . toggle-track { background : color-mix ( in srgb , var ( -- accent ) 45 % , var ( -- bg - overlay ));
border-color : color-mix ( in srgb , var ( -- accent ) 55 % , var ( -- bg - overlay )); }
. toggle-track :: after { content : '' ; position : absolute ; left : 2 px ; top : 2 px ; width : 16 px ; height : 16 px ; border-radius : 50 % ; background : #fff ; transition : transform 0.2 s var ( -- ease-out ); }
. toggle-switch input : checked ~ . toggle-track :: after { transform : translateX ( 18 px ); }
. table-frame { border : 1 px solid var ( -- border ); border-radius : var ( -- radius - lg ); overflow : hidden ; background : var ( -- edge ), var ( -- surface ); box-shadow : var ( -- shadow -1 ); backdrop-filter : blur ( var ( -- surface - blur )) saturate ( var ( -- surface - sat )); -webkit- backdrop-filter : blur ( var ( -- surface - blur )) saturate ( var ( -- surface - sat )); transition : background 0.25 s , box-shadow 0.25 s ; }
. table-frame--plain { --surface-blur : 0 px ; }
[ data-theme = "light" ] . table-frame { box-shadow : 0 1 px 3 px rgba ( 0 , 0 , 0 , 0.04 ); }
. table-wrap { width : 100 % ; max-height : calc ( 100 vh - var ( -- table - vh - offset )); overflow : auto ; }
@ supports selector ( :: -webkit-scrollbar ) {
. table-wrap { --head-fill : var ( -- bg - elevated ); --head-line : var ( -- border - mid ); scrollbar-color : auto ; scrollbar-width : auto ; }
. table-wrap :: -webkit-scrollbar { width : 8 px ; height : 8 px ; }
. table-wrap :: -webkit-scrollbar : vertical { background : linear-gradient ( var ( -- head - fill ) calc ( var ( -- sticky - row - top , 0 px ) - 1 px ), var ( -- head - line ) 0 var ( -- sticky - row - top , 0 px ), transparent 0 ); }
. table-wrap :: -webkit-scrollbar-thumb { background : var ( -- scrollbar ); border-radius : var ( -- radius - full ); }
. table-wrap :: -webkit-scrollbar-track , . table-wrap :: -webkit-scrollbar-corner { background : transparent ; }
. table-wrap :: -webkit-scrollbar-track : vertical { margin-top : var ( -- sticky - row - top , 0 px ); }
}
table { width : 100 % ; border-collapse : collapse ; font-size : 0.85 rem ; font-variant-numeric : tabular-nums ; }
thead { position : sticky ; top : 0 ; z-index : 3 ; }
thead tr : last-child > th { box-shadow : inset 0 -1 px 0 var ( -- border - mid ); }
th { padding : 0.75 rem 1.1 rem ; text-align : left ; font-size : 0.67 rem ; font-weight : 600 ; letter-spacing : 0.09 em ; text-transform : uppercase ; color : var ( -- text - sec ); white-space : nowrap ; background : var ( -- bg - elevated ); transition : background 0.25 s , color 0.25 s ; }
th . num , td . num { text-align : right ; }
th . center , td . center { text-align : center ; }
. table-wrap : is ( th , td ) : nth-last-child ( 1 of : not ( . actions-cell , [ colspan ])) { text-align : right ; }
tbody tr { position : relative ; border-bottom : 1 px solid color-mix ( in srgb , var ( -- border ) 50 % , transparent ); transition : background 0.1 s ; }
tbody tr : last-child { border-bottom : none ; }
tbody tr : hover { background : var ( -- neutral - bg ); }
td { padding : var ( -- table-cell - py ) 1.1 rem ; vertical-align : middle ; color : var ( -- text - primary ); white-space : nowrap ; transition : color 0.25 s , background 0.25 s ; }
. t-muted-cell { color : var ( -- text - sec ); font-size : 0.8 rem ; }
. t-subline { display : block ; min-height : 1.2 em ; }
. asset-name { color : var ( -- text - primary ); }
. table-wrap td . text , . table-wrap th . text { white-space : normal ; overflow-wrap : anywhere ; min-width : 7 rem ; }
. table-wrap td { height : calc ( var ( -- table-row - lines ) * var ( -- table - line - h ) + 2 * var ( -- table-cell - py )); }
. table-wrap td . text > . cell-clamp {
display : -webkit- box ; -webkit- box-orient : vertical ; -webkit- line-clamp : var ( -- table-row - lines ); overflow : hidden ;
}
. table-controls-bar { padding : 0.6 rem 0.7 rem ; background : var ( -- bg - elevated ); }
. tbl-title { padding : 0.15 rem 0.15 rem 0.6 rem ; }
. table-controls { display : flex ; align-items : center ; gap : 0.6 rem ; flex-wrap : wrap ; --tctl-h : 2.5 rem ; }
. table-controls . input { height : var ( -- tctl - h ); }
. tbl-search { width : auto ; min-width : 150 px ; max-width : 240 px ; }
. table-controls . tbl-group-select { width : auto ; min-width : 140 px ; }
. row-editing . tbl-textarea , . edit-expand-row . tbl-textarea { resize : vertical ; width : 100 % ; }
. edit-expand-row . edit-expand-fields { flex-wrap : wrap ; align-items : flex-end ; }
. edit-expand-row . edit-expand-field { margin-bottom : 0 ; min-width : 200 px ; flex : 1 ; }
. edit-expand-row . edit-expand-field . is-full { min-width : auto ; flex : 1 0 100 % ; }
. edit-expand-row . edit-expand-error { margin-top : 0.6 rem ; }
. edit-expand-row . edit-actions { justify-content : flex-start ; }
. edit-expand-row : is ( . edit-expand-fields , . edit-expand-error ) + . edit-actions { margin-top : 0.8 rem ; }
. t-caption . mt-sm { text-align : center ; }
. table-controls label { font-size : 0.72 rem ; font-weight : 600 ; color : var ( -- text - sec ); }
. tbl-filter { justify-content : center ; flex : 1 1 auto ; min-width : 0 ; }
. tbl-empty-spacer td { height : 18 px ; padding : 0 ; }
. tbl-count { flex : 0 0 auto ; margin-left : auto ; display : inline-flex ; align-items : center ; justify-content : center ; height : var ( -- tctl - h ); min-width : 2.6 rem ; padding : 0 0.7 rem ; border-radius : var ( -- radius - md ); border : 1 px solid var ( -- border - mid ); background : var ( -- bg - elevated ); color : var ( -- text - sec ); font-size : 0.8 rem ; font-weight : 600 ; font-variant-numeric : tabular-nums ; }
th . th-sort { cursor : pointer ; user-select : none ; }
th . th-sort : hover { color : var ( -- text - primary ); }
. sort-arrow { font-size : 0.55 rem ; margin-left : 0.3 rem ; opacity : 0.7 ; }
. group-row > td { background : var ( -- bg - elevated ); padding : 0.5 rem 1.1 rem ; box-shadow : inset 0 1 px 0 var ( -- border ), inset 0 -1 px 0 var ( -- border ); }
. group-header { display : flex ; align-items : center ; gap : 0.6 rem ; font-size : 0.86 rem ; font-weight : 700 ; color : var ( -- accent ); margin : 0 ; }
. group-header . group-count { color : var ( -- text - sec ); font-weight : 500 ; background : var ( -- neutral - bg ); padding : 0.05 rem 0.5 rem ; border-radius : var ( -- radius - full ); font-size : 0.72 rem ; }
. group-row td { padding : 0 ; border : none ; background : transparent ; }
. group-row : hover td { background : transparent ; }
. group-row . group-header { margin : 1.2 rem 1.1 rem 0.4 rem ; }
. table-wrap . has-exp . group-row . group-header { margin-left : var ( -- table - exp - pad ); }
. group-header [ data-gcollapse ] { cursor : pointer ; user-select : none ; }
. group-header . chev-btn { flex : 0 0 auto ; }
. group-header . group-summary { color : var ( -- text - sec ); font-weight : 500 ; font-variant-numeric : tabular-nums ; font-size : 0.78 rem ; margin-left : 0.2 rem ; }
. fbar-item . is-collapsed { opacity : 0.6 ; font-style : italic ; }
tbody tr [ data-row-id ] { cursor : pointer ; }
tbody tr . row-selected td { background : var ( -- accent - soft ); }
tbody tr . row-selected : hover td { background : var ( -- accent - mid ); }
tbody tr . row-selected td : first-child { box-shadow : inset 3 px 0 0 var ( -- accent ); }
. actions-cell { text-align : right ; width : var ( -- table - actions - w ); white-space : nowrap ; }
. exp-cell { width : var ( -- table - exp - w ); text-align : left ; padding-left : var ( -- table - exp - pad ); padding-right : 0 ; }
. exp-cell . chev-btn { vertical-align : middle ; }
tbody tr [ data-row-id ] : hover . exp-cell . chev-btn { color : var ( -- accent ); }
. row-actions { display : inline-flex ; gap : 0.4 rem ; justify-content : flex-end ; }
@ media ( min-width : 1201px ) {
. table-frame > . table-wrap : has (> table > thead . actions-cell ) { container-type : inline - size ; }
. table-frame > . table-wrap : is ( th , td ) . actions-cell { width : 0 ; padding : 0 ; }
. table-frame > . table-wrap tr . row-selected > td . actions-cell { position : sticky ; right : 0 ; z-index : 2 ; }
. table-frame > . table-wrap tr . row-selected > td . actions-cell > . row-actions {
position : absolute ; top : 50 % ; right : 50 cqw ; transform : translate ( 50 % , -50 % );
padding : 0.3 rem ; border : 1 px solid color-mix ( in srgb , var ( -- accent ) 70 % , transparent ); border-radius : var ( -- radius - md );
background : var ( -- bg - raised ); box-shadow : 0 6 px 18 px rgba ( 0 , 0 , 0 , 0.35 );
}
. table-frame > . table-wrap tr . row-selected > td . actions-cell > . row-actions : empty { display : none ; }
: root [ data-profile = "glass" ] . table-frame > . table-wrap tr . row-selected > td . actions-cell > . row-actions {
background : var ( -- float - bg );
backdrop-filter : blur ( var ( -- float - blur )); -webkit- backdrop-filter : blur ( var ( -- float - blur ));
}
: root [ data-profile = "glass" ] . table-frame > . table-wrap tbody tr . row-selected > td . actions-cell { backdrop-filter : none ; -webkit- backdrop-filter : none ; }
}
. row-expansion > td { padding : 0 ; background : var ( -- bg - raised ); box-shadow : inset 3 px 0 0 var ( -- accent ); transition : background 0.25 s ; }
. row-expansion : hover > td { background : var ( -- bg - raised ); }
. src-drawer { padding : 1 rem 1.2 rem 1.1 rem ; }
. ai-gesprek { padding : 0.5 rem 0 0.5 rem 1.1 rem ; }
. src-drawer-title { margin-bottom : 0.7 rem ; }
. row-expansion . table-wrap { border : none ; border-radius : 0 ; box-shadow : none ; overflow : visible ; max-height : none ; }
. row-expansion thead { position : static ; }
. row-expansion . table-controls { margin-bottom : 0.6 rem ; }
. row-expansion th { background : transparent ; }
. row-expansion tbody tr : last-child { border-bottom : none ; }
. ip-box { margin-top : 1.5 rem ; display : flex ; flex-direction : column ; gap : 1.2 rem ; }
. ip-box-head { display : flex ; align-items : baseline ; flex-wrap : wrap ; gap : 0.3 rem 1 rem ; }
. ip-acc + . ip-acc { border-top : 1 px solid var ( -- border ); padding-top : 1.2 rem ; }
. ip-acc-name { font-weight : 600 ; color : var ( -- text - primary ); margin-bottom : 0.7 rem ; }
. ip-sched + . ip-sched , . ip-sched + . ip-due { margin-top : 1.1 rem ; }
. ip-sched-head { display : flex ; align-items : baseline ; flex-wrap : wrap ; gap : 0.2 rem 0.8 rem ; margin-bottom : 0.5 rem ; }
. ip-sched-name { font-weight : 600 ; color : var ( -- text - primary ); }
. ip-figs { display : grid ; grid-template-columns : repeat ( auto - fill , minmax ( 13 rem , 1 fr )); gap : 0.6 rem ; }
. ip-fig { padding : 0.65 rem 0.85 rem ; border-radius : var ( -- radius - sm ); background : var ( -- surface - tint ); }
. ip-fig > . t-label { white-space : nowrap ; }
. ip-fig-value { font-size : 1.05 rem ; margin : 0.2 rem 0 0.1 rem ; }
@ media ( max-width : 700px ) {
. ip-figs { grid-template-columns : 1 fr ; gap : 0.4 rem ; }
. ip-fig { display : flex ; flex-wrap : wrap ; align-items : baseline ; justify-content : space-between ; column-gap : 0.8 rem ; padding : 0.5 rem 0.75 rem ; }
. ip-fig-value { margin : 0 ; }
. ip-fig > . t-body-sm { flex-basis : 100 % ; text-align : right ; }
}
. ip-num { font-variant-numeric : tabular-nums ; text-align : right ; }
. ip-upcoming { margin-top : 0.55 rem ; }
. ip-upcoming > summary { display : inline-flex ; align-items : center ; gap : 0.35 rem ; cursor : pointer ; list-style : none ; color : var ( -- text - sec ); }
. ip-upcoming > summary :: -webkit-details-marker { display : none ; }
. ip-upcoming [ open ] > summary . chev-btn { transform : rotate ( 180 deg ); }
. ip-upcoming-list { display : grid ; grid-template-columns : repeat ( auto - fill , 11 rem ); gap : 0.25 rem 1.5 rem ; margin-top : 0.5 rem ; }
. ip-up { display : flex ; justify-content : space-between ; gap : 0.8 rem ; font-size : 0.82 rem ; }
. ip-due . t-label { margin-bottom : 0.3 rem ; }
. ip-due-row { display : flex ; flex-wrap : wrap ; align-items : center ; gap : 0.3 rem 1.2 rem ; padding : 0.25 rem 0 ; }
. ip-due-row > : first-child { min-width : 11 rem ; }
. ip-due-row > . ip-num { min-width : 5.5 rem ; }
. ip-due-btns { display : flex ; gap : 0.4 rem ; }
2026-10-30 12:28:48 +01:00
. table-wrap . sticky-sel > table > tbody > tr . row-selected > td { position : sticky ; top : var ( -- sticky - row - top , 2.7 rem ); z-index : 2 ; background : color-mix ( in srgb , var ( -- accent ) 20 % , var ( -- bg - elevated )); }
. table-wrap . sticky-sel > table > tbody > tr . row-selected : hover > td { background : color-mix ( in srgb , var ( -- accent ) 30 % , var ( -- bg - elevated )); }
2026-10-29 11:57:29 +01:00
. cmd-bar {
position : fixed ; left : 50 % ; bottom : 1.8 rem ; transform : translateX ( -50 % ); z-index : 60 ;
display : flex ; align-items : center ; gap : 0.9 rem ;
padding : 0.75 rem 1.1 rem ; border-radius : var ( -- radius - md );
background : var ( -- bg - elevated ); border : 1 px solid var ( -- accent );
box-shadow : 0 6 px 24 px rgba ( 0 , 0 , 0 , 0.25 ); font-size : 0.95 rem ;
}
. cmd-bar-text { white-space : nowrap ; }
. cmd-bar-buttons { display : flex ; align-items : center ; gap : 0.5 rem ; }
. cmd-bar-buttons . btn-primary : focus-visible { outline : 2 px solid var ( -- accent ); outline-offset : 2 px ; }
. tabset { position : relative ; display : flex ; gap : 0.3 rem ; margin-bottom : 1.1 rem ; padding-left : 1.3 rem ; border-bottom : 1 px solid transparent ; }
. tabset :: before { content : "" ; position : absolute ; bottom : 0 ; left : 0 ; right : 0 ; height : 8 px ; border-bottom : 1 px solid var ( -- border - mid ); border-left : 1 px solid var ( -- border - mid ); border-right : 1 px solid var ( -- border - mid ); border-bottom-left-radius : 7 px ; border-bottom-right-radius : 7 px ; }
. tabset-tab { appearance : none ; border : none ; cursor : pointer ; background : transparent ; color : var ( -- text - sec ); font-family : var ( -- font - base ); font-size : 0.78 rem ; font-weight : 600 ; letter-spacing : 0.01 em ; padding : 0.45 rem 0.9 rem ; border-radius : var ( -- radius - sm ) var ( -- radius - sm ) 0 0 ; margin-bottom : -1 px ; border-bottom : 2 px solid transparent ; transition : color 0.15 s , border-color 0.15 s ; }
. tabset-tab : hover { color : var ( -- text - primary ); }
. tabset-tab . is-on { color : var ( -- accent - text ); border-bottom-color : var ( -- accent ); }
. tabset--lg { gap : 0.5 rem ; margin-bottom : 1.6 rem ; padding-left : 2.2 rem ; }
. tabset--lg :: before { height : 12 px ; border-bottom-left-radius : 11 px ; border-bottom-right-radius : 11 px ; }
. tabset--lg . tabset-tab { font-size : 0.92 rem ; padding : 0.7 rem 1.4 rem ; border-bottom-width : 3 px ; }
@ media ( min-width : 769px ) {
. tabset--lg . tabset--rows { --tabset-row-gap : 0.6 rem ; display : grid ; grid-template-columns : repeat ( var ( -- tabset - cols ), minmax ( 0 , 1 fr )); grid-auto-rows : 1 fr ; gap : var ( -- tabset - row - gap ) 0 ; padding-right : 2.2 rem ; }
. tabset--lg . tabset--rows . tabset-tab { padding-inline : 0.4 rem ; }
. tabset--lg . tabset--rows :: before { top : calc (( 100 % - var ( -- tabset - row - gap )) / 2 - 12 px ); bottom : auto ; right : auto ; width : 12 px ; border-right : none ; border-bottom-right-radius : 0 ; }
. tabset--lg . tabset--rows :: after { content : "" ; position : absolute ; top : calc (( 100 % - var ( -- tabset - row - gap )) / 2 - 1 px ); bottom : 0 ; left : 0 ; right : 0 ; border : 1 px solid var ( -- border - mid ); border-radius : 11 px ; pointer-events : none ;
mask : linear-gradient ( transparent calc ( 100 % - 12 px ), #000 0 ) 0 0 / 12 px 100 % no-repeat , linear-gradient ( #000 , #000 ) 12 px 0 / calc ( 100 % - 12 px ) 100 % no-repeat ; }
}
@ media ( max-width : 768px ) {
. tabset { flex-wrap : wrap ; gap : 0.4 rem ; padding-left : 0 ; border-bottom : none ; }
. tabset :: before { display : none ; }
. tabset-tab { margin-bottom : 0 ; border : 1 px solid var ( -- border - mid ); border-radius : 999 px ; }
. tabset-tab . is-on { border-color : var ( -- accent ); background : color-mix ( in srgb , var ( -- accent ) 12 % , transparent ); }
. tabset--lg { gap : 0.45 rem ; padding-left : 0 ; }
. tabset--lg . tabset-tab { font-size : 0.85 rem ; padding : 0.5 rem 1.1 rem ; border-bottom-width : 1 px ; }
}
. fbar { display : flex ; flex-wrap : wrap ; gap : 0.4 rem ; align-items : center ; }
. fbar-item { appearance : none ; cursor : pointer ; border : 1 px solid var ( -- border - mid ); background : var ( -- bg - elevated ); color : var ( -- text - sec ); font-family : var ( -- font - base ); transition : border-color .15 s , background .15 s , color .15 s ; }
. fbar-item : hover { color : var ( -- text - primary ); border-color : var ( -- text - ter ); }
. fbar-item . is-on { border-color : var ( -- accent ); background : var ( -- accent - soft ); color : var ( -- accent - text ); }
. fbar-item : disabled { opacity : 0.5 ; cursor : default ; }
. fbar--chip . fbar-item { padding : 0.3 rem 0.7 rem ; border-radius : var ( -- radius - full ); font-size : 0.76 rem ; font-weight : 600 ; letter-spacing : 0.02 em ; }
. fbar-act { color : var ( -- text - ter ); }
. fbar-act : hover { color : var ( -- text - primary ); }
. fbar--tctl . fbar-item { width : 5.5 rem ; height : var ( -- tctl - h ); text-align : center ; font-size : 0.8 rem ; font-weight : 500 ; line-height : calc ( var ( -- tctl - h ) - 2 px ); padding : 0 0.4 rem ; border-radius : var ( -- radius - md ); letter-spacing : 0 ; white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; }
. mtr-chart { margin : 0.2 rem 0 1 rem ; }
. mtr-chart-h { display : flex ; align-items : center ; gap : 0.4 rem ; margin-bottom : 0.35 rem ; }
. mtr-dot { width : 8 px ; height : 8 px ; border-radius : 2 px ; display : inline-block ; flex-shrink : 0 ; }
. spark { width : 100 % ; height : 46 px ; display : block ; background : var ( -- bg - raised ); border-radius : var ( -- radius - sm ); }
. ilog-last { display : flex ; align-items : center ; flex-wrap : wrap ; gap : 0.4 rem ; margin : 0.3 rem 0 0.6 rem ; }
. ilog-filter { max-width : 16 rem ; }
. ilog-scroll { overflow-x : auto ; }
. ilog-table { border-collapse : collapse ; width : 100 % ; font-size : 0.82 rem ; }
. ilog-table th { text-align : left ; font-weight : 500 ; color : var ( -- text - sec ); padding : 0.3 rem 0.8 rem 0.3 rem 0 ; border-bottom : 1 px solid var ( -- border ); white-space : nowrap ; }
. ilog-table td { padding : 0.3 rem 0.8 rem 0.3 rem 0 ; border-bottom : 1 px solid var ( -- border ); vertical-align : top ; }
. ilog-table td . num { text-align : right ; }
. ilog-nowrap { white-space : nowrap ; }
. ilog-id { font-size : 0.75 rem ; white-space : nowrap ; }
. trk-block { display : flex ; flex-direction : column ; gap : 0.5 rem ; min-width : 0 ; }
. trk-act { appearance : none ; cursor : pointer ; flex : 0 0 auto ; padding : 0.32 rem 0.75 rem ; border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - sm ); background : transparent ; color : var ( -- text - ter ); font-family : var ( -- font - base ); font-size : 0.72 rem ; font-weight : 600 ; letter-spacing : 0.02 em ; }
. trk-act : hover { color : var ( -- text - primary ); border-color : var ( -- text - ter ); }
. trk-acct-foot { display : flex ; align-items : center ; justify-content : space-between ; gap : 0.6 rem ; }
. trk-selection { min-width : 0 ; font-size : 0.72 rem ; line-height : 1.3 ; }
. trk-scan-status { text-align : right ; font-size : 0.72 rem ; line-height : 1.35 ; }
. trk-scan-log { list-style : none ; margin : 0 ; padding : 0 ; width : 100 % ; display : flex ; flex-direction : column ; gap : 0.15 rem ; max-height : 14 rem ; overflow-y : auto ; scrollbar-width : none ; font-size : 0.72 rem ; line-height : 1.35 ; }
. trk-scan-log : empty { display : none ; }
. trk-scan-log :: -webkit-scrollbar { display : none ; }
. trk-scan-group { display : flex ; flex-direction : column ; gap : 0.1 rem ; }
. trk-scan-group + . trk-scan-group { margin-top : 0.4 rem ; }
. trk-scan-acct { overflow : hidden ; text-overflow : ellipsis ; white-space : nowrap ; }
. trk-scan-acct : empty { display : none ; }
. trk-scan-wallets { list-style : none ; margin : 0 ; padding : 0 0 0 0.6 rem ; display : flex ; flex-direction : column ; gap : 0.15 rem ; }
. trk-scan-row { display : flex ; justify-content : space-between ; gap : 0.6 rem ; min-width : 0 ; }
. trk-scan-name { color : var ( -- text - sec ); overflow : hidden ; text-overflow : ellipsis ; white-space : nowrap ; min-width : 0 ; }
. trk-scan-out { flex : 0 0 auto ; text-align : right ; white-space : nowrap ; }
. trk-accounts { flex : 0 1 auto ; min-height : 6 rem ; }
. trk-acct-list { display : grid ; grid-template-columns : repeat ( auto - fit , minmax ( 7.5 rem , 1 fr )); gap : 0.4 rem ; align-content : start ; flex : 1 1 auto ; min-height : 0 ; overflow-y : auto ; scrollbar-width : none ; }
. trk-acct-list :: -webkit-scrollbar { display : none ; }
. trk-acct { appearance : none ; cursor : pointer ; width : 100 % ; text-align : left ; display : flex ; flex-direction : column ; justify-content : space-between ; gap : 0.35 rem ; min-height : 4 rem ; padding : 0.55 rem 0.7 rem ; border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - sm ); background : var ( -- bg - elevated ); color : var ( -- text - sec ); font-family : var ( -- font - base ); transition : border-color .15 s , background .15 s , color .15 s ; }
. trk-acct : hover { color : var ( -- text - primary ); border-color : var ( -- text - ter ); }
. trk-acct . is-on { border-color : var ( -- accent ); background : var ( -- accent - soft ); color : var ( -- accent - text ); }
. trk-acct-name { font-size : 0.85 rem ; font-weight : 600 ; overflow : hidden ; text-overflow : ellipsis ; white-space : nowrap ; }
. trk-acct-line { display : flex ; align-items : baseline ; justify-content : space-between ; gap : 0.4 rem ; }
. trk-acct-sub { font-size : 0.66 rem ; color : var ( -- text - ter ); white-space : nowrap ; }
. trk-acct-amt { font-size : 0.85 rem ; font-weight : 600 ; font-variant-numeric : tabular-nums ; text-align : right ; overflow : hidden ; text-overflow : ellipsis ; white-space : nowrap ; }
. trk-total { align-items : center ; text-align : center ; gap : 0.15 rem ; }
. trk-total-amt { display : flex ; flex-direction : column ; gap : 0.1 rem ; text-align : right ; min-width : 0 ; }
. trk-total . t-num-lg { font-size : 1.9 rem ; line-height : 1.15 ; }
. trk-stats { display : flex ; flex-wrap : wrap ; justify-content : center ; gap : 0.7 rem 1.4 rem ; margin-top : 0.9 rem ; }
. trk-stat { min-width : 4.5 rem ; text-align : right ; }
. trk-scan { align-items : flex-end ; gap : 0.4 rem ; }
. trk-scan-when { text-align : right ; }
@ media ( max-width : 1280px ) {
. trk-accounts { min-height : 0 ; }
. trk-acct-list { display : grid ; grid-template-columns : repeat ( auto - fill , minmax ( 13 rem , 1 fr )); overflow : visible ; min-height : 0 ; }
. trk-total , . trk-total-amt { align-items : flex-start ; text-align : left ; }
. trk-stats { max-width : 30 rem ; }
. trk-stat , . trk-scan-when , . trk-scan-status { text-align : left ; }
. trk-scan { align-self : flex-start ; align-items : flex-start ; }
. trk-scan-log { max-width : 30 rem ; }
. trk-acct-foot { justify-content : flex-start ; }
}
. wealth-years { position : relative ; z-index : 6 ; }
. wealth-year-boxes { display : flex ; flex-wrap : wrap ; justify-content : center ; gap : 0.35 rem ; padding : 0 2 rem ; }
. wealth-year-menu :: before { content : "" ; position : absolute ; left : 0 ; right : 0 ; top : -0.55 rem ; height : 0.55 rem ; }
. wealth-year-menu { position : absolute ; top : calc ( 100 % + 0.55 rem ); right : 0 ; left : 0 ; z-index : 6 ; max-height : calc ( 100 vh - var ( -- aside - vh - offset ) - var ( -- year - box - h ) - var ( -- main - pad - y ) - 1.1 rem ); overflow-y : auto ; padding : 0.5 rem ; border-radius : var ( -- radius - md ); background : var ( -- bg - elevated ); border : 1 px solid var ( -- border ); box-shadow : var ( -- shadow -2 ); opacity : 0 ; visibility : hidden ; transform : translateY ( -4 px ); transition : opacity 0.15 s , transform 0.15 s , visibility 0.15 s ; }
. wealth-years : hover . wealth-year-menu , . wealth-years : focus-within . wealth-year-menu { opacity : 1 ; visibility : visible ; transform : translateY ( 0 ); }
. wealth-year-grid { display : grid ; grid-template-columns : repeat ( auto - fill , var ( -- year - box - w )); gap : 0.35 rem ; justify-content : center ; }
. wealth-year-chip , . wealth-year { box-sizing : border-box ; width : var ( -- year - box - w ); height : var ( -- year - box - h ); display : inline-flex ; flex-direction : column ; align-items : center ; justify-content : center ; gap : 0.1 rem ; padding : 0 0.3 rem ; border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - sm ); background : transparent ; color : var ( -- text - sec ); font-family : var ( -- font - base ); font-size : 0.82 rem ; font-weight : 600 ; font-variant-numeric : tabular-nums ; line-height : 1.1 ; text-align : center ; transition : background 0.15 s , color 0.15 s , border-color 0.15 s ; }
. wealth-year-pct { font-size : 0.72 rem ; font-weight : 500 ; font-variant-numeric : tabular-nums ; }
. wealth-year { cursor : pointer ; }
. wealth-year : hover { background : var ( -- bg - raised ); color : var ( -- text - primary ); border-color : var ( -- text - ter ); }
. wealth-year-chip , . wealth-year . is-on { border-color : var ( -- accent ); background : var ( -- accent - soft ); color : var ( -- accent - text ); }
button . wealth-year-chip { cursor : pointer ; }
button . wealth-year-chip : hover { background : var ( -- accent - mid ); }
. wealth-year-tip { margin : 0.3 rem 0.6 rem 0.1 rem ; }
. wealth-header-stats { display : flex ; flex-direction : column ; align-items : flex-end ; gap : 0.8 rem ; margin-top : 1.1 rem ; }
. wealth-header-stats { display : grid ; grid-template-columns : repeat ( 2 , minmax ( 0 , 1 fr )); gap : 0.8 rem 4 rem ; width : auto ; }
. wealth-header-stats . wealth-stat { text-align : right ; }
. wealth-header-note { margin-top : 0.5 rem ; max-width : 34 rem ; text-align : left ; }
. wealth-header-rings { display : flex ; flex-direction : column ; gap : 1.2 rem ; min-width : 0 ; flex : 1 1 0 ; min-height : 0 ; }
. wealth-ring { margin : 0 ; min-width : 0 ; display : flex ; flex-direction : column ; gap : 0.4 rem ; align-items : center ; flex : 1 1 0 ; min-height : 0 ; }
. wealth-ring-plot { width : 100 % ; min-width : 0 ; flex : 1 1 0 ; min-height : 6 rem ; }
. wealth-aside-total { display : flex ; flex-direction : column ; align-items : center ; text-align : center ; gap : 0.15 rem ; }
. wealth-aside-head { display : flex ; align-items : center ; gap : 0.25 rem ; }
. wealth-all { margin : 0 0.25 rem ; display : inline-flex ; align-items : center ; cursor : pointer ; }
@ media ( max-width : 1280px ) {
. wealth-aside-total , . wealth-header-stats { align-items : flex-start ; text-align : left ; }
. wealth-header-stats . wealth-stat { text-align : left ; }
. wealth-year-boxes { justify-content : flex-start ; }
. wealth-header-rings { flex-direction : row ; flex-wrap : wrap ; flex : 0 0 auto ; }
. wealth-ring { flex : 1 1 16 rem ; }
. wealth-ring-plot { height : min ( 11 rem , 16 vh ); flex : 0 0 auto ; }
}
. pf-blok + . pf-blok { margin-top : 1.4 rem ; padding-top : 1.4 rem ; border-top : 1 px solid var ( -- border ); }
. pf-blok : first-of-type { margin-top : 1 rem ; }
2026-10-30 12:28:48 +01:00
. pf-grid { display : grid ; grid-template-columns : repeat ( auto - fill , minmax ( min ( 24 rem , 100 % ), 1 fr )); grid-auto-rows : 1 fr ; gap : 1.5 rem ; }
. pf-grid-archive { grid-auto-rows : auto ; align-items : start ; margin-top : 1.5 rem ; }
. pf-grid . is-stacked { grid-template-columns : minmax ( 0 , 1 fr ); max-width : 46 rem ; }
. pf-card { display : flex ; flex-direction : column ; }
. pf-card . is-open { border-color : var ( -- accent ); }
. pf-head { display : flex ; align-items : center ; gap : 0.7 rem ; flex-wrap : wrap ; }
. pf-head-end { margin-left : auto ; }
. pf-name { font-size : 1.9 rem ; font-weight : 700 ; letter-spacing : -0.025 em ; line-height : 1.15 ; }
. pf-sub { margin-top : 0.3 rem ; min-height : 1.4 em ; white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; }
. pf-facts { display : grid ; grid-template-columns : repeat ( 2 , minmax ( 0 , 1 fr )); gap : 0.6 rem ; margin : 1.3 rem 0 0 ; }
. pf-fact { min-width : 0 ; padding : 0.65 rem 0.85 rem ; border-radius : var ( -- radius - sm ); background : var ( -- surface - tint ); }
. pf-fact : empty { background : transparent ; }
. pf-fact > * { white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; }
. pf-fact dt { font-size : 0.78 rem ; color : var ( -- text - ter ); }
. pf-fact dd { margin : 0.15 rem 0 0 ; font-variant-numeric : tabular-nums ; }
. pf-fact . is-late dd { color : var ( -- sig - yellow ); }
. pf-kinds { list-style : none ; margin : 0.45 rem 0 0 ; padding : 0 ; min-height : calc ( var ( -- pf - lines , 1 ) * 1.45 em ); font-size : 0.8 rem ; color : var ( -- text - ter ); white-space : normal ; }
. pf-kinds li { display : flex ; justify-content : space-between ; gap : 0.8 rem ; line-height : 1.45 ; }
. pf-kinds li > span : last-child { font-variant-numeric : tabular-nums ; color : var ( -- text - sec ); }
. pf-actions { display : flex ; align-items : center ; gap : 0.5 rem ; margin-top : auto ; padding-top : 1.4 rem ; }
. pf-actions : empty { display : none ; }
. pf-more { margin-left : auto ; min-width : 2.2 rem ; letter-spacing : 0.08 em ; }
. pf-archive { display : block ; }
. dialog--wide . pf-settings-dialog { max-width : min ( 36 rem , 100 % ); }
. pf-archive > summary { cursor : pointer ; list-style : none ; display : flex ; align-items : center ; gap : 0.6 rem ; }
. pf-archive > summary :: -webkit-details-marker { display : none ; }
. pf-archive [ open ] > summary . chev-btn { transform : rotate ( 180 deg ); }
. pf-archive-list { display : flex ; flex-direction : column ; gap : 0.9 rem ; margin-top : 1.2 rem ; }
. pf-new { display : flex ; align-items : center ; justify-content : center ; gap : 0.5 rem ; min-height : 12 rem ; padding : 1.6 rem ; border : 1.5 px dashed var ( -- border - mid ); border-radius : var ( -- radius - lg ); color : var ( -- text - ter ); }
. pf-new-btn { width : 4 rem ; height : 4 rem ; border-radius : var ( -- radius - lg ); }
. pf-new-btn svg { width : 28 px ; height : 28 px ; }
2026-10-29 11:57:29 +01:00
. wealth-grid { display : grid ; grid-template-columns : repeat ( auto - fill , minmax ( min ( 22 rem , 100 % ), 1 fr )); gap : 1.2 rem ; align-items : stretch ; }
. gap-list { max-height : 16 rem ; overflow-y : auto ; margin-top : 0.4 rem ; }
. gap-row { display : flex ; align-items : center ; justify-content : space-between ; gap : 0.6 rem ; padding : 0.25 rem 0 ; border-top : 1 px solid color-mix ( in srgb , var ( -- border ) 50 % , transparent ); }
. gap-row . gap-fill { padding : 0.25 rem 0.4 rem ; line-height : 0 ; opacity : 0 ; pointer-events : none ; transition : opacity 0.15 s ease ; }
. gap-row : hover . gap-fill , . gap-row : focus-within . gap-fill { opacity : 1 ; pointer-events : auto ; }
. gap-row . is-focus { background : var ( -- accent - soft ); box-shadow : 0 0 0 0.4 rem var ( -- accent - soft ); border-radius : var ( -- radius - sm ); }
. ph-weak-row . gap-fill { padding : 0.25 rem 0.4 rem ; line-height : 0 ; opacity : 0 ; pointer-events : none ; transition : opacity 0.15 s ease ; }
. ph-weak-row : hover . gap-fill , . ph-weak-row : focus-within . gap-fill { opacity : 1 ; pointer-events : auto ; }
. ph-ignored { margin-top : 1.2 rem ; }
. ph-ignored > summary { display : flex ; align-items : center ; gap : 0.35 rem ; cursor : pointer ; list-style : none ; color : var ( -- text - sec ); font-weight : 500 ; }
. ph-ignored > summary :: -webkit-details-marker { display : none ; }
. ph-ignored > summary svg { transition : transform 0.15 s ease ; }
. ph-ignored [ open ] > summary svg { transform : rotate ( 90 deg ); }
. ph-grid { display : grid ; grid-template-columns : repeat ( auto - fill , minmax ( min ( 22 rem , 100 % ), 1 fr )); grid-auto-rows : 1 fr ; gap : 1 rem ; margin-bottom : 1.2 rem ; }
. ph-card { display : flex ; flex-direction : column ; }
. ph-counts { display : flex ; flex-wrap : wrap ; gap : 0.2 rem 0.8 rem ; margin-top : 0.3 rem ; }
. ph-count { display : inline-flex ; align-items : center ; gap : 0.3 rem ; }
. ph-dot { display : inline-block ; width : 0.55 rem ; height : 0.55 rem ; border-radius : 2 px ; }
. ph-notices { display : flex ; flex-wrap : wrap ; gap : 0.1 rem 0.9 rem ; min-height : 1.2 rem ; margin-top : 0.2 rem ; }
. ph-notice { display : inline-flex ; align-items : center ; gap : 0.35 rem ; }
. ph-notice . nav-attention { margin : 0 ; animation : none ; }
. ph-finding { padding : 0.5 rem 0 ; border-top : 1 px solid var ( -- border ); }
. ph-finding : first-child { border-top : 0 ; }
. ph-proposal { margin-top : 0.4 rem ; }
. ph-gaps-head { display : flex ; align-items : center ; justify-content : space-between ; gap : 0.6 rem ; }
. ph-filter { margin-bottom : 0.6 rem ; }
. ph-confirm , . ph-outcome { margin : 0.6 rem 0 ; padding : 0.6 rem 0.8 rem ; border : 1 px solid var ( -- border ); border-radius : var ( -- radius - sm ); background : var ( -- bg - raised ); }
. ph-confirm-actions { display : flex ; justify-content : flex-end ; gap : 0.5 rem ; margin-top : 0.5 rem ; }
. ph-outcome { margin-top : 0 ; }
. ph-spark-wrap { margin-top : auto ; }
. ph-detail-chart { padding : 0 ; }
. ph-detail-chart . ph-strip { height : 1 rem ; margin-top : 0.4 rem ; }
. ph-detail-plot { position : relative ; height : min ( 16 rem , 30 vh ); }
. dialog : has ( . ph-detail ) { max-width : min ( 90 rem , 100 % ); }
. wealth-detail-tabs > [ role = "tabpanel" ] : has (> . ph-prices ) { display : flex ; flex-direction : column ; overflow : hidden ; }
. ph-prices { display : flex ; flex-direction : column ; flex : 1 1 auto ; min-height : 0 ; }
. wealth-detail-tabs > [ role = "tabpanel" ] : has (> . notes ) { display : flex ; flex-direction : column ; overflow : hidden ; }
. notes { display : flex ; flex-direction : column ; gap : 0.6 rem ; flex : 1 1 auto ; min-height : 0 ; padding-bottom : 0.2 rem ; }
. notes-add { display : flex ; gap : 0.6 rem ; }
. notes-when { flex : 0 0 auto ; width : auto ; }
. notes-line { flex : 1 1 auto ; min-width : 0 ; }
textarea . notes-body { flex : 1 1 auto ; min-height : 8 rem ; resize : none ; line-height : 1.55 ; font-family : inherit ; }
. notes-status { min-height : 1.2 em ; }
. ph-prices > . table-frame {
display : flex ; flex-direction : column ; min-height : 0 ;
border : 0 ; border-radius : 0 ; background : none ; box-shadow : none ; backdrop-filter : none ; -webkit- backdrop-filter : none ;
}
. ph-prices . table-controls-bar { padding : 0 0 0.6 rem ; background : none ; }
. ph-detail . ph-prices . table-wrap { flex : 0 1 auto ; min-height : 0 ; overflow : auto ; }
. wealth-detail-tabs > [ role = "tabpanel" ] : has (> . ph-prov ) { display : flex ; flex-direction : column ; overflow : hidden ; }
. ph-prov { display : flex ; flex-direction : column ; flex : 1 1 auto ; min-height : 0 ; }
. ph-detail . ph-prov . table-wrap { flex : 0 1 auto ; min-height : 0 ; overflow : auto ; margin-top : 0.8 rem ; }
. ph-spark { height : 3 rem ; }
. ph-strip { height : 0.35 rem ; margin-top : 0.2 rem ; }
. ph-strip svg { display : block ; width : 100 % ; height : 100 % ; }
. ph-card . ph-strip {
width : calc ( 100 % + 2 * var ( -- padding - x , 0 px ));
margin-left : calc ( -1 * var ( -- padding - x , 0 px ));
}
. wealth-detail . gap-list { max-height : none ; overflow : visible ; }
. ph-k-close { fill : var ( -- accent ); background : var ( -- accent ); opacity : 0.35 ; }
. ph-k-manual { fill : var ( -- sig - blue ); background : var ( -- sig - blue ); }
. ph-k-live { fill : var ( -- accent ); background : var ( -- accent ); }
. ph-k-spot { fill : var ( -- sig - yellow ); background : var ( -- sig - yellow ); }
. ph-k-carried { fill : var ( -- text - sec ); background : var ( -- text - sec ); opacity : 0.6 ; }
. ph-k-none { fill : var ( -- sig - red ); background : var ( -- sig - red ); }
. wealth-card { display : flex ; flex-direction : column ; }
. wealth-card . wealth-spark-wrap { margin-top : auto ; }
. wealth-stat . is-leeg { visibility : hidden ; }
. wealth-card { width : 100 % ; cursor : pointer ; border : 0 ; }
. wealth-card : hover { box-shadow : var ( -- hover - shadow ); }
. wealth-detail-btn { display : inline - grid ; place-items : center ; width : 1.7 rem ; height : 1.7 rem ; padding : 0 ; border : 0 ; border-radius : 50 % ; background : none ; color : var ( -- text - ter ); cursor : pointer ; }
. wealth-detail-btn : hover , . wealth-detail-btn : focus-visible { background : var ( -- accent - soft ); color : var ( -- accent - text ); }
. wealth-detail-btn svg { display : block ; }
. wealth-detail-btn--inline { width : 1.2 rem ; height : 1.2 rem ; margin-left : 0.15 rem ; vertical-align : middle ; }
. wealth-detail-btn--inline svg { width : 0.85 rem ; height : 0.85 rem ; }
. return-view { display : flex ; flex-direction : column ; gap : 0.9 rem ; min-width : 0 ; }
. dialog-title-aside [ data-return-data ] { max-width : 16 rem ; }
. dialog : has ( . return-view--dialog ) { max-width : min ( 84 rem , 100 % ); overflow : hidden ; }
. dialog-body--rich : has (> . return-view--dialog ) { overflow : visible ; max-height : none ; }
. return-view--dialog . return-plot { height : min ( 26 rem , 46 vh );
margin : 0 calc ( -1 * var ( -- dialog - pad - x )) calc ( -1 * var ( -- dialog - pad - y )); }
. return-periods { display : grid ; grid-template-columns : repeat ( auto - fit , minmax ( 7 rem , 1 fr )); gap : 0.4 rem ; }
. return-period { display : flex ; flex-direction : column ; align-items : center ; gap : 0.15 rem ; padding : 0.45 rem 0.4 rem ;
border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - sm ); background : transparent ; color : var ( -- text - sec );
font-family : var ( -- font - base ); font-variant-numeric : tabular-nums ; cursor : pointer ;
transition : background 0.15 s , border-color 0.15 s ; }
. return-period : not ( . is-on ) : not ( : disabled ) : hover { background : var ( -- bg - raised ); border-color : var ( -- text - ter ); }
. return-period . is-on { border-color : var ( -- accent ); background : var ( -- accent - soft ); }
. return-period . is-on : hover { background : var ( -- accent - mid ); }
. return-period : disabled { opacity : 0.5 ; cursor : default ; }
. return-period-label { font-size : 0.78 rem ; font-weight : 600 ; }
. return-period-amount { font-size : 0.95 rem ; font-weight : 700 ; }
. return-period-pct { font-size : 0.72 rem ; min-height : 1 em ; }
. return-plot { position : relative ; height : 16 rem ; }
. wealth-detail . is-return . wealth-detail-spark { display : none ; }
. wealth-detail . is-return . wealth-detail-tabs > [ role = "tabpanel" ] {
overflow : hidden ; margin-left : calc ( -1 * var ( -- dialog - pad - x )); margin-right : calc ( -1 * var ( -- dialog - pad - x )); }
. wealth-return-tab { display : flex ; flex-direction : column ; gap : 0.9 rem ; height : 100 % ; }
. wealth-return-years { flex : 1 1 auto ; min-height : 0 ; overflow-y : auto ; padding : 0 var ( -- dialog - pad - x ); }
. wealth-return-tab . return-view { flex : 0 0 auto ; }
. wealth-detail . return-periods { padding : 0 var ( -- dialog - pad - x ); }
. return-w-amount { margin : 0.4 rem 0 0.1 rem ; color : var ( -- text - sec ); }
. return-w-pct { font-size : 0.85 rem ; font-variant-numeric : tabular-nums ; }
. return-view--widget { margin-top : 0.6 rem ; }
2026-10-30 12:28:48 +01:00
. return-view--widget . return-plot > . t-muted-cell { display : grid ; place-items : center ; height : 100 % ; padding : 0 var ( -- padding - x ); text-align : center ; }
2026-10-29 11:57:29 +01:00
. return-view--widget . return-plot { height : 8 rem ; margin : 0 calc ( -1 * var ( -- padding - x )) calc ( -1 * var ( -- padding ));
overflow : hidden ; border-radius : 0 0 var ( -- radius ) var ( -- radius ); }
. wealth-detail . return-plot { height : min ( 12 rem , 22 vh ); }
. wealth-card . wealth-detail-btn {
position : absolute ; margin : 0 ;
top : calc ( 0.8 rem - var ( -- padding )); right : calc ( 0.8 rem - var ( -- padding - x ));
}
. wealth-head . wealth-detail-btn { opacity : 0 ; pointer-events : none ; transition : opacity 0.15 s ease , background 0.15 s ease ; }
. wealth-card : hover . wealth-detail-btn ,
. wealth-card : focus-within . wealth-detail-btn { opacity : 1 ; pointer-events : auto ; }
. card-go-btn , . card-go-btn : visited { color : var ( -- text - ter ); text-decoration : none ; }
. card-go-btn : hover , . card-go-btn : focus-visible { color : var ( -- accent - text ); }
. card-go-btn {
position : absolute ; margin : 0 ;
top : calc ( 0.8 rem - var ( -- padding )); right : calc ( 0.8 rem - var ( -- padding - x ));
opacity : 0 ; pointer-events : none ; transition : opacity 0.15 s ease , background 0.15 s ease ;
}
. card : hover . card-go-btn ,
. card : focus-within . card-go-btn { opacity : 1 ; pointer-events : auto ; }
. wealth-card { transition : box-shadow 0.15 s ease ; }
. wealth-card : hover , . wealth-card : focus-within { z-index : 3 ; }
. wealth-card . is-linked { box-shadow : inset 0 0 0 2 px var ( -- accent ), var ( -- lift - shadow ); }
. wealth-card . is-selected { box-shadow : inset 0 0 0 2 px var ( -- accent ), var ( -- lift - shadow ); background : var ( -- accent - soft ); }
[ data-theme = "light" ] . wealth-card : is ( . is-linked , . is-selected ) :: before { opacity : 0 ; }
. wealth-stats { display : grid ; grid-template-columns : 1 fr 1 fr ; gap : 1.1 rem 1.6 rem ; margin-top : 1 rem ; }
. wealth-spark-wrap { margin-top : 1.1 rem ; }
. wealth-noprice { margin-top : 0.9 rem ; }
# page-hint { position : fixed ; z-index : 120 ; top : var ( -- nav - line - top ); left : calc ( var ( -- hint - line - x ) - 1.85 rem ); }
html [ data-pagehint = "off" ] # page-hint { display : none ; }
. hint { position : relative ; }
. hint-btn { display : flex ; align-items : center ; justify-content : center ; width : 1.6 rem ; height : 1.6 rem ; padding : 0 ; border : none ; border-radius : 50 % ; background : transparent ; color : var ( -- text - sec ); opacity : 0.55 ; cursor : pointer ; transition : opacity 0.15 s , color 0.15 s ; }
. hint-btn : hover , . hint-btn : focus-visible { opacity : 1 ; color : var ( -- accent - text ); }
html : has ( . po-btn . is-warn ) # page-hint . hint-btn { opacity : 1 ; color : var ( -- sig - yellow ); }
# page-hint . hint-warn { display : none ; }
html : has ( . po-btn . is-warn ) # page-hint . hint-warn { display : flex ; }
# page-hint . hint . is-fallback { display : none ; }
html : has ( . po-btn . is-warn ) # page-hint . hint . is-fallback { display : block ; }
. hint-warn . hint-sample { color : var ( -- sig - yellow ); }
. hint-warn . hint-sample svg { width : 0.8 rem ; height : 0.8 rem ; }
. hint-panel {
position : fixed ; top : var ( -- nav - line - top );
right : calc ( 100 % - var ( -- hint - line - x ) + 1.4 rem ); left : auto ;
width : min ( 44 rem , calc ( var ( -- hint - line - x ) - 2.8 rem ));
max-height : calc ( 100 vh - var ( -- nav - line - top ) - 2 rem ); overflow-y : auto ;
padding : 0.9 rem 1 rem ; border-radius : var ( -- radius - md ); background : var ( -- bg - elevated );
border : 1 px solid var ( -- border ); box-shadow : var ( -- shadow -2 );
opacity : 0 ; visibility : hidden ; transform : translateY ( 4 px );
transition : opacity 0.15 s , transform 0.15 s , visibility 0.15 s ; pointer-events : none ;
}
html : not ( : has ( . page-layout > . page-aside )) . hint-panel {
right : auto ; left : calc ( var ( -- hint - line - x ) + 1.4 rem );
width : min ( 44 rem , calc ( 100 vw - var ( -- hint - line - x ) - 2.8 rem ));
}
. hint : hover . hint-panel , . hint-btn : focus-visible + . hint-panel { opacity : 1 ; visibility : visible ; transform : translateY ( 0 ); }
2026-10-30 12:28:48 +01:00
. hint . is-open . hint-panel { opacity : 1 ; visibility : visible ; transform : translateY ( 0 ); pointer-events : auto ; }
. hint . is-open . hint-btn { opacity : 1 ; color : var ( -- accent - text ); }
2026-10-29 11:57:29 +01:00
@ media ( min-width : 769px ) {
# page-hint . hint-panel . is-wide {
right : auto ; left : calc ( var ( -- hint - line - x ) + 1.4 rem );
width : min ( 64 rem , calc ( 100 vw - var ( -- hint - line - x ) - 2.8 rem ));
column-count : 2 ; column-gap : 1.8 rem ;
}
# page-hint . hint-panel . is-wide > . t-label : first-child { column-span : all ; }
# page-hint . hint-panel . is-wide : is ( . hint-row , . hint-heading ) { break-inside : avoid ; }
}
. hint-heading { margin-top : 1 rem ; }
. hint-heading : first-of-type { margin-top : 0.8 rem ; }
. hint-row { display : flex ; align-items : baseline ; gap : 0.6 rem ; margin-top : 0.55 rem ; font-size : 0.78 rem ; color : var ( -- text - sec ); line-height : 1.45 ; }
. hint-sample { flex : 0 0 1.4 rem ; }
. hint-row > span : last-child > div { margin-top : 0.2 rem ; }
. hint-line { display : inline-block ; width : 1.4 rem ; height : 0 ; border-top : 2 px solid var ( -- accent ); transform : translateY ( -0.25 rem ); }
. hint-line . is-dashed { border-top-style : dashed ; opacity : 0.5 ; }
. hint-dot { display : inline-block ; width : 0.4 rem ; height : 0.4 rem ; margin-left : 0.5 rem ; border-radius : 50 % ; background : var ( -- accent ); transform : translateY ( -0.1 rem ); }
. hint-dot . is-open { background : var ( -- bg - elevated ); box-shadow : 0 0 0 1.5 px var ( -- accent ); }
. hint-ring { display : inline-block ; width : 0.75 rem ; height : 0.75 rem ; margin-left : 0.3 rem ; border-radius : 50 % ; border : 3 px solid var ( -- accent ); transform : translateY ( 0.1 rem ); }
. wealth-spark { height : 4.5 rem ; margin-top : 0.3 rem ; color : var ( -- accent ); }
. wealth-stat { min-width : 0 ; }
. wealth-stats . wealth-stat : nth-child ( even ) { text-align : right ; }
. wealth-head { display : flex ; align-items : center ; gap : 0.5 rem ; flex-wrap : wrap ; }
. wealth-head . wealth-detail-btn { margin-left : auto ; }
. acc-total { font-size : 2 rem ; font-weight : 700 ; letter-spacing : -0.025 em ; line-height : 1.15 ; font-variant-numeric : tabular-nums ;
margin-top : 0.5 rem ; }
. acc-card . acc-lines { margin-top : auto ; padding-top : 1 rem ; }
. acc-interest { margin-top : 0.3 rem ; font-size : 0.8 rem ; }
. acc-interest > span { white-space : nowrap ; }
. acc-card . acc-spark-wrap { margin-top : 0.8 rem ; }
. acc-pulse { height : 4 rem ; margin : 0.2 rem 0 1 rem ; color : var ( -- accent ); }
. acc-pulse . spark-mini-area { display : none ; }
. acc-detail-plot { height : 5 rem ; color : var ( -- accent ); }
. spark-mini . is-pickable { cursor : pointer ; }
. spark-mini-mark . is-agreement { background : var ( -- bg - elevated ); box-shadow : 0 0 0 1.5 px currentColor ; }
. spark-mini-mark . is-account { width : 4 px ; height : 4 px ; opacity : 0.6 ; }
. spark-mini-mark . is-reservation { background : var ( -- bg - elevated ); box-shadow : 0 0 0 1.5 px currentColor ; border-radius : 1 px ; }
. spark-mini-mark . is-now { width : 8 px ; height : 8 px ; }
. spark-mini-mark . is-now :: before , . spark-mini-mark . is-now :: after {
content : '' ; position : absolute ; inset : 0 ; border-radius : 50 % ; border : 1.5 px solid currentColor ; opacity : 0 ;
animation : spark-now-ring 3 s ease-out infinite ;
}
. spark-mini-mark . is-now :: after { animation-delay : 1.5 s ; }
@ keyframes spark-now-ring { 0 % { transform : scale ( 1 ); opacity : 0.75 ; } 100 % { transform : scale ( 3.4 ); opacity : 0 ; } }
@ media ( prefers-reduced-motion : reduce ) { . spark-mini-mark . is-now :: before , . spark-mini-mark . is-now :: after { animation : none ; } }
. acc-lines { display : flex ; flex-direction : column ; gap : 0.6 rem ; margin-top : 0.8 rem ; }
. acc-line-main , . acc-line-sub { display : flex ; justify-content : space-between ; gap : 0.8 rem ; }
. acc-card . acc-line-main > span , . acc-card . acc-line-sub > span { min-width : 0 ; white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; }
. acc-line-sub { font-size : 0.8 rem ; }
. acc-filter { display : flex ; flex-wrap : wrap ; align-items : center ; gap : 0.4 rem 1.2 rem ; }
. acc-grid { grid-auto-rows : 1 fr ; }
. dialog-body--rich : has (> . wealth-detail . acc-detail ) { height : calc ( 100 vh - 9 rem ); }
. acc-detail { --table-row-lines : 2 ; }
. wealth-detail . acc-detail . group-header { justify-content : flex-start ; }
. wealth-detail . acc-detail . group-header . group-summary { margin-left : 0.2 rem ; }
. acc-summary { flex : 0 0 auto ; display : grid ; grid-template-columns : repeat ( auto - fill , minmax ( 16 rem , 1 fr )); gap : 0.6 rem ;
padding : 0 var ( -- dialog - pad - x ); margin-bottom : 0.9 rem ; }
. acc-summary > . acc-interest { grid-column : 1 / -1 ; margin-top : 0 ; }
. acc-detail [ role = "tabpanel" ] : not ( : has (> # sched )) { display : flex ; flex-direction : column ; overflow : hidden ; }
. acc-detail [ role = "tabpanel" ] > # tbl { display : flex ; flex-direction : column ; flex : 1 1 auto ; min-height : 0 ; }
. acc-detail . table-frame {
display : flex ; flex-direction : column ; min-height : 0 ;
border : 0 ; border-radius : 0 ; background : none ; box-shadow : none ; backdrop-filter : none ; -webkit- backdrop-filter : none ;
}
. acc-detail . table-controls-bar { padding : 0 0 0.6 rem ; background : none ; }
. acc-detail [ role = "tabpanel" ] : not ( : has (> # sched )) > # tbl . table-wrap { flex : 0 1 auto ; min-height : 0 ; overflow : auto ; }
. wealth-detail . acc-detail . table-wrap { overflow-x : auto ; }
@ media ( min-width : 1201px ) {
. acc-detail td . actions-cell : has (> . row-actions ) { position : sticky ; right : 0 ; z-index : 1 ; }
: root : not ([ data-profile = "glass" ]) . acc-detail td . actions-cell : has (> . row-actions ) { background : var ( -- bg - elevated ); }
: root [ data-profile = "glass" ] . acc-detail td . actions-cell : has (> . row-actions ) { backdrop-filter : blur ( var ( -- float - blur )); -webkit- backdrop-filter : blur ( var ( -- float - blur )); }
}
. dialog-title-aside : has ( . acc-total ) { display : inline-flex ; align-items : center ; gap : 0.6 rem ; }
. dialog-title-aside . acc-total { margin : 0 ; font-size : inherit ; }
. wealth-group , . wealth-filter { flex : none ; justify-content : center ; }
. acc-pick { display : flex ; flex-direction : column ; gap : 0.3 rem ; }
. acc-single { grid-column : 1 / -1 ; display : flex ; align-items : center ; gap : 0.8 rem ; }
. acc-anchor-btn { align-self : flex-end ; }
. acc-line--pick { display : block ; width : 100 % ; text-align : left ; font : inherit ; color : inherit ; cursor : pointer ;
background : transparent ; border : 1 px solid var ( -- border ); border-radius : var ( -- radius - md ); padding : 0.5 rem 0.7 rem ; }
. acc-line--pick : hover { border-color : var ( -- border - mid ); }
. acc-line--pick . is-on { border-color : var ( -- accent ); background : var ( -- accent - soft ); }
. dialog : has ( . wealth-detail ) { padding : var ( -- dialog - pad - y ) 0 0 ; overflow : hidden ; }
. dialog : has ( . wealth-detail ) . dialog-title { padding : 0 var ( -- dialog - pad - x ); }
. dialog-body--rich : has (> . wealth-detail ) {
display : flex ; overflow : hidden ; padding : 0 ;
height : min ( 78 vh , calc ( 100 vh - 12 rem )); max-height : none ;
}
. wealth-detail { display : flex ; flex-direction : column ; flex : 1 1 auto ; min-width : 0 ; min-height : 0 ; }
. wealth-detail-tabs { display : flex ; flex-direction : column ; flex : 1 1 auto ; min-height : 0 ; padding : 0 var ( -- dialog - pad - x ); }
. wealth-detail-cijfers { padding : 0 0 0.9 rem ; }
. wealth-detail-stats { display : flex ; flex-wrap : wrap ; gap : 0.6 rem 2.4 rem ; }
. wealth-detail-beheerd { margin-bottom : 0.9 rem ; }
. wealth-detail-beheerd table { width : 100 % ; }
. wealth-detail-tabs > [ role = "tabpanel" ] { flex : 1 1 auto ; min-height : 0 ; overflow-y : auto ; margin-top : 0.9 rem ; }
. wealth-detail-spark { flex : 0 0 auto ; margin-top : 0.6 rem ; position : relative ; z-index : 0 ; }
. dialog : has ( . wealth-detail ) { position : relative ; }
. wealth-detail-plot { height : min ( 18 rem , 34 vh ); color : var ( -- accent ); }
. wealth-detail-leeg { display : flex ; align-items : center ; justify-content : center ; height : 100 % ; }
. wealth-detail { --table-row-lines : 1 ; --table-cell-py : 0.45 rem ; }
. wealth-detail . table-wrap { max-height : none ; overflow : visible ; }
. dialog-body--rich : has (> . wealth-overview ) { display : flex ; overflow : hidden ; }
. wealth-overview { display : flex ; flex-direction : column ; flex : 1 1 auto ; min-width : 0 ; min-height : 0 ; --table-row-lines : 1 ; --table-cell-py : 0.45 rem ; }
. wealth-overview . table-wrap { max-height : none ; flex : 1 1 auto ; min-height : 0 ; overflow : auto ; }
. wealth-overview-plot { flex : 0 0 auto ; height : min ( 16 rem , 30 vh ); margin-bottom : 0.8 rem ; }
. wealth-detail-periode { position : absolute ; top : calc ( var ( -- dialog - pad - y ) + 0.95 rem ); left : 50 % ; transform : translate ( -50 % , -50 % );
z-index : 2 ; pointer-events : none ; border-color : var ( -- border - mid ); background : transparent ; color : var ( -- text - sec ); }
. wealth-detail-spark . wealth-detail-plot { position : relative ; z-index : 1 ; }
. wealth-detail . group-header { justify-content : space-between ; }
. wealth-detail . group-header . group-summary { margin-left : auto ; }
. wealth-trade-leeg > td { color : var ( -- text - ter ); font-style : italic ; }
tr [ data-trade ] . is-active > td { background : var ( -- accent - soft ); }
. spark-mini-mark . is-active { width : 11 px ; height : 11 px ; box-shadow : 0 0 0 2 px var ( -- bg - elevated ), 0 0 0 3.5 px currentColor ; z-index : 1 ; }
. oca-grid { display : flex ; align-items : flex-start ; gap : 1.5 rem ; --cols : 1 ; }
@ media ( min-width : 1000px ) { . oca-grid { --cols : 2 ; } }
@ media ( min-width : 2100px ) { . oca-grid { --cols : 3 ; } }
@ media ( min-width : 2900px ) { . oca-grid { --cols : 4 ; } }
. masonry-col { display : flex ; flex-direction : column ; gap : 1.5 rem ; flex : 1 1 0 ; min-width : 0 ; }
. oca-source { position : relative ; min-width : 0 ; --wallet-pad : 1.3 rem ; --padding : var ( -- wallet - pad ); }
. oca-source-head { display : flex ; align-items : center ; gap : 0.9 rem ; flex-wrap : wrap ; }
. oca-source-meta { flex : 1 ; min-width : 0 ; }
. oca-source-acct { font-size : 0.66 rem ; font-weight : 700 ; letter-spacing : 0.06 em ; text-transform : uppercase ; color : var ( -- text - ter ); margin-top : 0.15 rem ; }
. oca-source-name { font-size : 1.25 rem ; font-weight : 600 ; overflow : hidden ; text-overflow : ellipsis ; white-space : nowrap ; }
. oca-source-total { flex : 1 ; text-align : right ; }
. oca-wallet-tags { flex : 0 0 auto ; display : flex ; justify-content : center ; gap : 0.4 rem ; }
. oca-movements {
--padding : 0.4 rem ; margin : 0.9 rem calc ( -1 * var ( -- wallet - pad )) calc ( -1 * var ( -- wallet - pad ));
border-top : 1 px solid var ( -- row - line ); border-radius : 0 0 var ( -- radius ) var ( -- radius ); overflow : hidden ;
}
. mv-group { display : flex ; flex-direction : column ; }
. mv-group + . mv-group { border-top : 1 px solid var ( -- row - line ); }
. mv-date { font-size : 0.72 rem ; font-weight : 600 ; letter-spacing : 0.04 em ; color : var ( -- text - sec ); padding : 0.5 rem var ( -- wallet - pad ) 0 ; }
. mv-empty { padding : 0.7 rem var ( -- wallet - pad ); }
. oca-source { --mv-linked : color-mix ( in srgb , var ( -- accent ) 3.5 % , transparent ); }
[ data-theme = "dark" ] . oca-source { --mv-linked : color-mix ( in srgb , var ( -- accent ) 5.5 % , transparent ); }
. mv-row : has (> . mv-mid > . tx-link . is-matched ) { background : var ( -- mv - linked ); }
. mv-card : not ( : has ( . tx-link : not ( . is-matched ))) > . mv-date { background : var ( -- mv - linked ); }
. mv-row : not ( : hover ) . tx-link . is-matched : not ( . is-open , : focus-visible ) { opacity : 0 ; }
. mv-row { position : relative ; display : flex ; align-items : center ; gap : 0.9 rem ; padding : 0.5 rem var ( -- wallet - pad ); }
. mv-dir { flex-shrink : 0 ; width : 38 px ; height : 38 px ; display : grid ; place-items : center ; border : 1 px solid var ( -- border - mid ); border-radius : 50 % ; color : var ( -- text - sec ); }
. mv-mid { flex : 1 ; min-width : 0 ; }
. mv-label { font-weight : 600 ; cursor : pointer ; display : block ; overflow : hidden ; text-overflow : ellipsis ; white-space : nowrap ; }
. mv-label : hover { color : var ( -- accent ); }
. mv-addr { font-family : var ( -- font - mono ); font-size : 0.8 rem ; color : var ( -- text - ter ); cursor : pointer ; display : block ; overflow : hidden ; text-overflow : ellipsis ; white-space : nowrap ; }
. mv-mid { display : flex ; align-items : center ; gap : 0.45 rem ; }
. mv-mid > . mv-label , . mv-mid > . mv-addr { min-width : 0 ; }
. copy-btn { flex-shrink : 0 ; border : none ; background : none ; padding : 0 0.15 rem ; color : var ( -- text - ter ); cursor : pointer ; font-size : 0.9 rem ; line-height : 1 ; opacity : 0 ; transition : opacity 0.12 s , color 0.15 s ; vertical-align : middle ; }
tbody tr : hover . copy-btn , . mv-row : hover . copy-btn , . card-flat : hover . copy-btn { opacity : 1 ; }
. copy-btn : hover , . copy-btn : focus-visible { opacity : 1 ; color : var ( -- accent ); outline : none ; }
. copy-btn . is-copied { opacity : 1 ; color : var ( -- pos ); }
. mv-grp > summary { list-style : none ; }
. mv-grp > summary :: -webkit-details-marker { display : none ; }
. mv-grp > summary . mv-row { cursor : pointer ; }
. mv-chev { flex-shrink : 0 ; color : var ( -- accent ); font-size : 1 rem ; line-height : 1 ; transition : transform 0.15 s ; }
. mv-grp [ open ] . mv-chev { transform : rotate ( 90 deg ); }
. mv-sub . mv-row { padding-left : calc ( var ( -- wallet - pad ) + 1.2 rem ); }
. mv-addr : hover { color : var ( -- accent ); }
. mv-mid . label-combo { width : 100 % ; }
. mv-amounts { display : flex ; align-items : flex-start ; gap : 0.9 rem ; flex-shrink : 0 ; }
. mv-amt { width : 8 rem ; text-align : right ; flex-shrink : 0 ; }
. mv-fee { width : 6.5 rem ; text-align : right ; flex-shrink : 0 ; opacity : 0.75 ; }
. mv-amt . num , . mv-fee . num { font-weight : 600 ; font-variant-numeric : tabular-nums ; }
. mv-feecap { font-size : 0.7 em ; font-weight : 600 ; color : var ( -- text - ter ); margin-right : 0.15 rem ; }
. alert { display : flex ; gap : 0.8 rem ; align-items : flex-start ; padding : 1 rem 1.2 rem ; border-radius : var ( -- radius - md ); font-size : 0.84 rem ; margin-bottom : 0.75 rem ; }
. alert-icon { font-size : 1 rem ; flex-shrink : 0 ; margin-top : 0.05 rem ; }
. alert-content { flex : 1 ; min-width : 0 ; }
. alert-title { font-weight : 600 ; margin-bottom : 0.1 rem ; }
. alert-body { color : var ( -- text - sec ); font-size : 0.8 rem ; }
. alert-info { background : var ( -- accent - soft ); color : var ( -- accent - text ); }
. alert-success { background : var ( -- pos - bg ); color : var ( -- pos ); }
. alert-error { background : var ( -- neg - bg ); color : var ( -- neg ); }
. alert-neutral { background : var ( -- neutral - bg ); color : var ( -- text - sec ); border : 1 px solid var ( -- border ); }
. divider { height : 1 px ; background : var ( -- border ); margin : 2 rem 0 ; }
. code { background : var ( -- bg - raised ); border : 1 px solid var ( -- border ); border-radius : var ( -- radius - md ); padding : 1.2 rem 1.4 rem ; font-family : var ( -- font - mono ); font-size : 0.8 rem ; color : var ( -- accent ); overflow-x : auto ; line-height : 1.7 ; }
. codeblock { position : relative ; width : fit-content ; max-width : 100 % ; margin : 0.8 rem 0 ; background : var ( -- bg - raised ); border : 1 px solid var ( -- border ); border-radius : var ( -- radius - md ); overflow : hidden ; }
. codeblock > pre { margin : 0 ; padding : 1 rem 1.2 rem ; padding-right : 6.5 rem ; overflow-x : auto ; font-family : var ( -- font - mono ); font-size : 0.8 rem ; line-height : 1.6 ; }
. codeblock-tools { position : absolute ; top : 0.45 rem ; right : 0.6 rem ; display : flex ; align-items : stretch ; gap : 0.35 rem ; }
. codeblock-tag { display : inline-flex ; align-items : center ; font-size : 0.62 rem ; font-weight : 700 ; letter-spacing : 0.09 em ; text-transform : uppercase ; color : var ( -- text - ter ); background : var ( -- bg - elevated ); border : 1 px solid var ( -- border ); border-radius : var ( -- radius - sm ); padding : 0 0.4 rem ; pointer-events : none ; }
. codeblock-copy { display : inline-flex ; align-items : center ; justify-content : center ; padding : 0.2 rem 0.3 rem ; border : 1 px solid var ( -- border ); border-radius : var ( -- radius - sm ); background : var ( -- bg - elevated ); color : var ( -- text - sec ); cursor : pointer ; opacity : 0 ; transition : opacity 0.15 s , color 0.15 s , border-color 0.15 s ; }
. codeblock : hover . codeblock-copy ,
. codeblock-copy : focus-visible { opacity : 1 ; }
. codeblock-copy : hover { color : var ( -- text - primary ); border-color : var ( -- border - mid ); }
. codeblock-copy . is-done { color : var ( -- pos ); border-color : var ( -- pos ); opacity : 1 ; }
@ media ( hover : none ) { . codeblock-copy { opacity : 1 ; } }
. skeleton { background : linear-gradient ( 90 deg , var ( -- bg - raised ) 25 % , var ( -- bg - overlay ) 50 % , var ( -- bg - raised ) 75 % ); background-size : 200 % 100 % ; animation : shimmer 1.6 s infinite ; border-radius : var ( -- radius - sm ); }
@ keyframes shimmer { to { background-position : -200 % 0 ; } }
. mt-sm { margin-top : 0.5 rem ; } . mt-md { margin-top : 1 rem ; } . mt-lg { margin-top : 1.5 rem ; }
. gap-sm { gap : 0.5 rem ; } . gap-md { gap : 1 rem ; }
. flex { display : flex ; align-items : center ; } . flex-between { display : flex ; align-items : center ; justify-content : space-between ; }
. hidden { display : none !important ; }
2026-10-30 12:28:48 +01:00
. conv-card { container-type : inline - size ; display : flex ; flex-direction : column ; gap : 1.2 rem ; }
2026-10-29 11:57:29 +01:00
. price-label { margin-bottom : 0.35 rem ; display : flex ; align-items : center ; gap : 0.5 rem ; }
. price-val { font-size : 2.1 rem ; letter-spacing : -0.03 em ; line-height : 1.1 ; }
. price-meta { font-size : 0.72 rem ; color : var ( -- text - ter ); margin-top : 0.35 rem ; }
2026-10-30 12:28:48 +01:00
. conv-grid { display : grid ; grid-template-columns : repeat ( 6 , minmax ( 0 , 1 fr )); gap : 0.9 rem ; }
@ container ( max-width : 980px ) { . conv-grid { grid-template-columns : repeat ( 3 , minmax ( 0 , 1 fr )); } }
@ container ( max-width : 480px ) { . conv-grid { grid-template-columns : repeat ( 2 , minmax ( 0 , 1 fr )); } }
2026-10-29 11:57:29 +01:00
. field { display : flex ; flex-direction : column ; gap : 0.6 rem ; background : var ( -- bg - elevated ); border : 1 px solid var ( -- border ); --radius : var ( -- radius - lg ); --padding : 1.1 rem ; border-radius : var ( -- radius ); padding : 1.1 rem 1.2 rem ; transition : border-color 0.15 s , background 0.25 s ; }
. field : focus-within { border-color : var ( -- accent ); }
. field-head { display : flex ; align-items : center ; justify-content : space-between ; gap : 0.5 rem ; }
. field-name { font-size : 0.9 rem ; font-weight : 600 ; }
. field-input { background : var ( -- input - bg ); border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - md ); padding : 0.6 rem 0.85 rem ; font-family : var ( -- font - base ); font-size : 1.05 rem ; font-weight : 600 ; color : var ( -- text - primary ); outline : none ; width : 100 % ; text-align : right ; font-variant-numeric : tabular-nums ; transition : border-color 0.15 s , box-shadow 0.15 s ; }
. field-input :: placeholder { color : var ( -- text - ter ); font-weight : 400 ; }
. field-input : focus { border-color : var ( -- accent ); box-shadow : 0 0 0 3 px var ( -- accent - soft ); }
. field-hint { font-size : 0.7 rem ; color : var ( -- text - sec ); font-variant-numeric : tabular-nums ; }
@ media ( max-width : 560px ) {
. price-val { font-size : 1.8 rem ; }
}
. lock-panel { max-width : 44 rem ; padding : 1.4 rem 1.6 rem ; border : 1 px solid var ( -- border ); border-radius : var ( -- radius - md ); background : var ( -- bg - raised ); }
. lock-panel-head { display : flex ; align-items : center ; gap : 0.5 rem ; font-weight : 600 ; margin-bottom : 0.6 rem ; }
. lock-panel-what { margin : 0 0 0.9 rem ; color : var ( -- text - sec ); line-height : 1.55 ; }
. lock-panel-more { margin : 0 ; }
. lock-icon { font-size : 0.9 em ; opacity : 0.75 ; }
. settings-cols {
display : grid ; gap : 1.5 rem ; align-items : start ;
grid-template-columns : repeat ( auto - fit , minmax ( min ( 100 % , 26 rem ), 32.5 rem ));
}
. lic-head { display : flex ; align-items : baseline ; justify-content : space-between ; gap : 1 rem ; margin-bottom : 1.2 rem ; }
. lic-card p { margin : 0 0 0.8 rem ; overflow-wrap : break-word ; }
2026-10-30 12:28:48 +01:00
. lic-layout { display : grid ; gap : 1.5 rem ; align-items : start ; grid-template-columns : minmax ( 0 , 1 fr ) minmax ( 17 rem , 24 rem ); }
2026-10-29 11:57:29 +01:00
. lic-side , . lic-main { display : flex ; flex-direction : column ; gap : 1.5 rem ; min-width : 0 ; }
. lic-hero { display : flex ; flex-direction : column ; align-items : center ; gap : 1 rem ; margin-bottom : 1.6 rem ; }
. lic-feat { margin-bottom : 0.8 rem ; }
. lic-feat-row { display : grid ; grid-template-columns : minmax ( 0 , 1 fr ) 5 rem 5 rem ; align-items : center ; justify-items : center ;
padding : 0.4 rem 0.5 rem ; border-radius : var ( -- radius - sm ); cursor : default ; }
. lic-feat-row > : first-child { justify-self : start ; }
2026-10-30 12:28:48 +01:00
. lic-feat-row [ data-feature ] : focus-visible , . lic-feat-row . is-on { background : var ( -- neutral - bg ); outline : none ; }
. lic-feat-row : is ( . lic-feat-yes , . lic-feat-no , . lic-feat-part , . lic-feat-open ) { cursor : help ; }
2026-10-29 11:57:29 +01:00
. lic-feat-cols { font-weight : 500 ; color : var ( -- text - sec ); font-size : 0.8 rem ; padding-top : 0 ; }
. lic-group + . lic-group { border-top : 1 px solid var ( -- border ); }
. lic-group > summary { list-style : none ; cursor : pointer ; padding : 0.7 rem 0.5 rem ; font-size : 1.05 rem ; font-weight : 500 ; }
. lic-group > summary :: -webkit-details-marker { display : none ; }
. lic-group-name { display : inline-flex ; align-items : center ; gap : 0.5 rem ; }
. lic-group [ open ] > summary . chev-btn { transform : rotate ( 180 deg ); }
. lic-feat-sub { list-style : none ; margin : 0 0 0.5 rem ; padding : 0 ; font-size : 0.88 rem ; color : var ( -- text - sec ); }
. lic-feat-sub . lic-feat-row > : first-child { padding-left : 1.6 rem ; }
. lic-feat-yes { color : var ( -- pos ); display : inline-flex ; }
. lic-feat-yes svg { width : 1.4 rem ; height : 1.4 rem ; }
. lic-feat-sub . lic-feat-yes svg { width : 1.1 rem ; height : 1.1 rem ; }
. lic-feat-no , . lic-feat-open { color : var ( -- text - sec ); font-size : 1.2 rem ; line-height : 1 ; }
2026-10-30 12:28:48 +01:00
. lic-feat-part { color : var ( -- text - ter ); display : inline-flex ; }
. lic-feat-part svg { width : 1.4 rem ; height : 1.4 rem ; }
2026-10-29 11:57:29 +01:00
. lic-feat-shot [ hidden ] { display : none ; }
. lic-feat-shot { position : fixed ; z-index : 1000 ; width : min ( 34 rem , calc ( 100 vw - 1 rem )); aspect-ratio : 16 / 10 ; display : grid ; place-items : center ;
padding : 0.6 rem ; text-align : center ; overflow : hidden ; pointer-events : none ;
background : var ( -- bg - raised ); border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - md ); box-shadow : 0 12 px 40 px rgba ( 0 , 0 , 0 , 0.35 ); }
. lic-feat-img { max-width : 100 % ; max-height : 100 % ; object-fit : contain ; border-radius : var ( -- radius - sm ); }. lic-section { border-top : 1 px solid var ( -- border ); margin-top : 1.2 rem ; padding-top : 1.2 rem ; }
2026-10-30 12:28:48 +01:00
. lic-section [ hidden ] { display : none ; }
. lic-card . lic-status { margin-top : 0.9 rem ; }
. lic-attach { margin-left : auto ; display : inline-flex ; align-items : center ; }
2026-10-29 11:57:29 +01:00
2026-10-30 12:28:48 +01:00
. lic-chat-card { display : flex ; flex-direction : column ; }
2026-10-29 11:57:29 +01:00
. lic-chat-card [ hidden ] { display : none ; }
2026-10-30 12:28:48 +01:00
. lic-chat { display : flex ; flex-direction : column ; gap : 0.8 rem ; min-height : 6 rem ; max-height : 20 rem ; overflow-y : auto ; padding : 0.25 rem 0.25 rem 0.5 rem ; margin-bottom : 1 rem ; }
@ media ( max-width : 820px ) {
2026-10-29 11:57:29 +01:00
. lic-layout { grid-template-columns : minmax ( 0 , 1 fr ); }
}
. lic-msg { display : flex ; flex-direction : column ; gap : 0.2 rem ; max-width : 75 % ; }
. lic-msg . is-mine { align-self : flex-end ; align-items : flex-end ; }
. lic-msg . is-theirs { align-self : flex-start ; }
. lic-bubble { display : flex ; flex-direction : column ; gap : 0.5 rem ; padding : 0.6 rem 0.85 rem ; border-radius : var ( -- radius - md ); background : var ( -- neutral - bg ); }
. lic-msg . is-mine . lic-bubble { background : var ( -- accent - soft ); }
. lic-card . lic-bubble p { margin : 0 ; white-space : pre-wrap ; }
. lic-shot { display : block ; max-width : 100 % ; max-height : 16 rem ; border-radius : var ( -- radius - sm ); border : 1 px solid var ( -- border ); }
. lic-pending { display : flex ; flex-wrap : wrap ; align-items : flex-end ; gap : 0.75 rem ; margin-top : 0.5 rem ; }
. lic-pending . lic-shot { max-height : 7 rem ; }
@ media ( max-width : 768px ) { . lic-msg { max-width : 90 % ; } }
. lock-note { display : flex ; align-items : center ; gap : 0.4 rem ; flex-wrap : wrap ; margin : 0 0 0.8 rem ; font-size : 0.82 rem ; color : var ( -- text - sec ); }
. lock-counter { margin-left : 0.5 rem ; font-size : 0.78 rem ; color : var ( -- text - ter ); }
. tbl-note { align-self : center ; font-size : 0.78 rem ; color : var ( -- text - ter ); }
. mobile-topbar { display : none ; position : sticky ; top : 0 ; z-index : 300 ; background : var ( -- bg ); border-bottom : 1 px solid var ( -- border ); padding : 0.9 rem 1.2 rem ; align-items : center ; justify-content : space-between ; gap : 0.5 rem ; transition : background 0.25 s , border-color 0.25 s ; }
. mobile-topbar-logo { font-weight : 700 ; font-size : 0.75 rem ; display : flex ; align-items : center ; gap : 0.5 rem ; margin-right : auto ; min-width : 0 ; cursor : pointer ; }
. mobile-topbar-names { display : flex ; flex-direction : column ; justify-content : center ; gap : 0.1 rem ; min-width : 0 ; }
. mobile-topbar-logo # mobile-logo-text { line-height : 1.15 ; overflow : hidden ; text-overflow : ellipsis ; white-space : nowrap ; }
. mobile-menu-btn { background : var ( -- bg - raised ); border : 1 px solid var ( -- border ); color : var ( -- text - primary ); border-radius : var ( -- radius - sm ); padding : 0.4 rem 0.7 rem ; font-size : 1 rem ; cursor : pointer ; }
@ media ( max-width : 768px ) {
. sidebar { display : none ; }
. sidebar . open { display : flex ; position : fixed ; inset : 0 ; width : 100 % ; z-index : 200 ; height : 100 vh ; overflow-y : auto ; padding-top : 4.5 rem ; background : var ( -- bg ); }
. sidebar-logo { display : none ; }
. mobile-topbar { display : flex ; }
# sb-slot-desktop { display : none ; }
. main :: before { display : none ; }
. sidebar a . active :: after , . nav-edit-group :: after { display : none ; }
# page-hint { top : 4.4 rem ; left : auto ; right : 1 rem ; }
# page-hint . hint-panel { top : 4.4 rem ; left : auto ; right : 1 rem ; width : min ( 44 rem , calc ( 100 vw - 2 rem )); }
. sidebar a . active { background : var ( -- accent - soft ); border-radius : var ( -- radius - sm ); }
. nav-edit-group { background : var ( -- accent - soft ); border-radius : var ( -- radius - md ); }
. nav-edit-group > a . active { background : transparent ; }
. sidebar a { text-align : left ; }
. sidebar a . has-attention , . sidebar a . is-customizable { justify-content : flex-start ; }
. sidebar a . nav-attention , . sidebar a . nav-edit-toggle { order : 0 ; }
. sidebar a . nav-edit-toggle { margin-left : auto ; }
. sidebar-section-title { text-align : left ; padding-right : 0 ; }
. main { padding : 2 rem 1.2 rem 4 rem ; max-width : 100 % ; }
: root { --table-vh-offset : 13 rem ; }
. page { flex-direction : column ; }
. t-num-lg { font-size : 1.8 rem ; }
. oca-header { flex-direction : column ; align-items : stretch ; }
. oca-header-right { align-items : stretch ; }
. oca-total { text-align : left ; }
. oca-header-right . btn { width : 100 % ; }
. page-actions { flex-wrap : wrap ; }
}
@ media ( max-width : 520px ) {
. main { padding : 1.5 rem 1 rem 4 rem ; }
. mv-row { gap : 0.5 rem ; padding : 0.4 rem var ( -- wallet - pad ); }
. mv-dir { width : 32 px ; height : 32 px ; }
. mv-amounts { gap : 0.55 rem ; }
. mv-amt { width : 6.5 rem ; }
. mv-fee { width : 5.4 rem ; }
. mv-amt . num , . mv-fee . num { font-size : 0.78 rem ; }
. mv-date { font-size : 0.68 rem ; }
. oca-source-name { font-size : 1.1 rem ; }
}
. act-block { display : flex ; flex-direction : column ; gap : 0.15 rem ; align-items : flex-end ; text-align : right ; }
. act-block . t-num-lg { font-size : 2.2 rem ; line-height : 1.15 ; }
. act-jump { display : flex ; flex-direction : column ; gap : 0.3 rem ; }
. act-jump-item { appearance : none ; cursor : pointer ; width : 100 % ; display : flex ; align-items : center ; justify-content : space-between ; gap : 0.6 rem ; padding : 0.55 rem 0.7 rem ; border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - sm ); background : var ( -- bg - elevated ); color : var ( -- text - sec ); font-family : var ( -- font - base ); font-size : 0.85 rem ; font-weight : 600 ; text-align : left ; transition : border-color .15 s , background .15 s , color .15 s ; }
. act-jump-item : hover { color : var ( -- text - primary ); border-color : var ( -- text - ter ); }
. act-jump-label { min-width : 0 ; overflow : hidden ; text-overflow : ellipsis ; white-space : nowrap ; }
. act-jump-count { flex : 0 0 auto ; font-variant-numeric : tabular-nums ; color : var ( -- accent - text ); }
. act-jump-item . is-done { color : var ( -- text - ter ); }
. act-jump-item . is-done . act-jump-count { color : var ( -- pos ); }
. act-jump-count svg { display : block ; }
@ media ( max-width : 1280px ) {
. act-block { align-items : flex-start ; text-align : left ; }
}
. guide-section { max-width : 46 rem ; padding-top : var ( -- guide - top ); }
html { --guide-top : 0 rem ; }
html [ data-pagetitle = "off" ] { --guide-top : 1.2 rem ; }
. guide-body { margin-top : 0.8 rem ; }
. guide-body p , . guide-body ul { margin : 0 0 0.8 rem ; }
. guide-body ul { padding-left : 1.2 rem ; }
. guide-body li { margin-bottom : 0.4 rem ; }
. guide-body > p : first-child { font-size : 1 rem ; color : var ( -- text - sec ); }
. guide-body . guide-h { margin : 1.6 rem 0 0.6 rem ; font-size : 0.72 rem ; font-weight : 600 ; letter-spacing : 0.08 em ;
text-transform : uppercase ; color : var ( -- text - ter ); }
. guide-terms { display : grid ; grid-template-columns : minmax ( 7 rem , 11 rem ) 1 fr ; gap : 0.55 rem 1.2 rem ; margin : 0 0 1 rem ; }
. guide-terms dt { font-weight : 600 ; color : var ( -- text - primary ); text-align : right ; padding-right : 1.2 rem ;
border-right : 1 px solid var ( -- border - mid ); }
. guide-terms dd { margin : 0 ; }
@ media ( max-width : 700px ) {
. guide-terms { grid-template-columns : 1 fr ; gap : 0.15 rem ; }
. guide-terms dt { text-align : left ; padding-right : 0 ; border-right : 0 ; margin-top : 0.5 rem ; }
}
. guide-note { margin : 0 0 1 rem ; padding : 0.65 rem 0.9 rem ; border-left : 3 px solid var ( -- accent );
border-radius : 0 var ( -- radius - sm ) var ( -- radius - sm ) 0 ; background : var ( -- accent - soft ); color : var ( -- text - primary ); }
. guide-body a , . guide-related a { color : var ( -- accent - text ); }
. guide-code { margin : 0 0 0.8 rem ; padding : 0.6 rem 0.8 rem ; border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - sm );
background : var ( -- bg - overlay ); font-family : var ( -- font - mono ); font-size : 0.82 rem ;
white-space : pre-wrap ; word-break : break-word ; user-select : all ; }
. guide-foot { display : flex ; flex-wrap : wrap ; align-items : baseline ; justify-content : space-between ; gap : 0.8 rem ; margin-top : 1.8 rem ; padding-top : 1 rem ; border-top : 1 px solid var ( -- border - mid ); font-size : 0.85 rem ; }
. guide-goto { margin-left : auto ; gap : 0.25 rem ; padding-right : 0.55 rem ; transition : color 0.15 s , border-color 0.15 s , background 0.15 s ; }
. guide-goto svg { width : 14 px ; height : 14 px ; }
. guide-goto : hover , . guide-goto : focus-visible { color : var ( -- accent - text ); border-color : var ( -- accent ); background : var ( -- accent - soft ); }
. guide-aside . guide-sections . tabset-tab { font-size : 0.85 rem ; padding : 0.42 rem 0.2 rem ; }
. guide-aside . guide-groups { margin-top : calc ( var ( -- page - head - h ) + var ( -- guide - top )); }
. guide-body . guide-icon { display : inline-flex ; vertical-align : -0.2 em ; color : var ( -- accent - text ); }
. guide-body . guide-icon svg { width : 1 em ; height : 1 em ; }
. guide-aside . guide-groups . tabset { flex-direction : row ; justify-content : flex-end ; gap : 1.6 rem ; margin : 0 ;
padding-bottom : 0.15 rem ; border-bottom : 1 px solid var ( -- border - mid ); }
. guide-aside . guide-groups . tabset-tab { font-size : 0.85 rem ; padding : 0.3 rem 0.1 rem ; }
. guide-aside . guide-groups . tabset-tab . is-on :: after { top : auto ; bottom : calc ( -0.15 rem - 2 px ); left : 0 ; right : 0 ;
width : auto ; height : 2 px ; }
. guide-aside . guide-sections { margin-top : 0.5 rem ; }
@ media ( max-width : 1280px ) {
. guide-aside . guide-groups { margin-top : 0 ; }
. guide-aside . guide-groups . tabset { justify-content : flex-start ; }
}
. sig-aside . sig-bar { display : flex ; flex-direction : column ; gap : 0.35 rem ; margin : auto 0 0 ; }
. sig-aside . sig-card { padding : 0.6 rem 0.8 rem ; gap : 0.7 rem ; }
. sig-aside . sig-card-val { white-space : normal ; }
. sig-aside . tabset--lg . tabset-tab { font-size : 0.85 rem ; padding : 0.42 rem 0.2 rem ; }
. sig-aside . tabset { margin-top : calc ( var ( -- page - head - h ) + 5.2 rem ); }
. sig-panel-head { display : flex ; align-items : flex-start ; justify-content : space-between ; flex-wrap : wrap ; gap : 0.8 rem ; margin-bottom : 1 rem ; }
. sig-panel-btns { display : flex ; flex-wrap : wrap ; gap : 0.4 rem ; }
@ media ( max-width : 1280px ) {
. sig-aside . tabset { margin-top : 0 ; }
}
. sig-card { display : flex ; align-items : center ; gap : 0.9 rem ; text-align : left ; width : 100 % ; background : var ( -- bg - elevated ); border : 1 px solid var ( -- border ); border-radius : var ( -- radius - lg ); padding : 0.85 rem 1.1 rem ; cursor : pointer ; transition : border-color 0.2 s , background 0.2 s ; font-family : var ( -- font - base ); }
. sig-card : hover { border-color : var ( -- border - mid ); background : var ( -- bg - raised ); }
. sig-light { width : 8 px ; height : 8 px ; border-radius : 50 % ; flex-shrink : 0 ; background : var ( -- bg - overlay ); transition : all 0.4 s ; }
. sig-bar . sig-light { width : 14 px ; height : 14 px ; }
. sig-light . green { background : var ( -- sig - green ); }
. sig-light . yellow { background : var ( -- sig - yellow ); }
. sig-light . red { background : var ( -- sig - red ); }
. sig-card-text { display : flex ; flex-direction : column ; min-width : 0 ; }
. sig-card-val { font-family : var ( -- font - mono ); font-size : 0.82 rem ; margin-top : 2 px ; white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; }
. sig-panel > . card { display : flex ; flex-direction : column ; height : calc ( 100 vh - var ( -- sig - chrome )); min-height : 22 rem ; }
. sig-canvas { position : relative ; flex : 1 1 auto ; min-height : 280 px ; }
. sig-canvas canvas { width : 100 % !important ; }
. sig-canvas : fullscreen { height : 100 vh ; background : var ( -- bg ); padding : 1 rem ; }
. sig-loading { position : absolute ; inset : 0 ; display : flex ; flex-direction : column ; align-items : center ; justify-content : center ; gap : 1 rem ; background : var ( -- bg - elevated ); z-index : 5 ; transition : opacity 0.3 s ; }
. sig-loading . hidden { display : none ; }
. sig-spinner { width : 38 px ; height : 38 px ; border : 3 px solid var ( -- border ); border-top-color : var ( -- accent ); border-radius : 50 % ; animation : spin 0.8 s linear infinite ; }
@ keyframes spin { to { transform : rotate ( 360 deg ); } }
. sig-error { position : absolute ; inset : 0 ; display : flex ; align-items : center ; justify-content : center ; color : var ( -- neg ); font-family : var ( -- font - mono ); font-size : 0.85 rem ; text-align : center ; padding : 1 rem ; }
. skel { display : inline-block ; background : var ( -- bg - raised ); border-radius : var ( -- radius - sm ); position : relative ; overflow : hidden ; }
. skel :: after { content : "" ; position : absolute ; inset : 0 ; transform : translateX ( -100 % );
background : linear-gradient ( 90 deg , transparent , var ( -- accent - soft ), transparent ); animation : skel-shimmer 1.4 s ease-in-out infinite ; }
@ keyframes skel-shimmer { 100 % { transform : translateX ( 100 % ); } }
. skel-line { height : 0.7 rem ; border-radius : 999 px ; }
. skel-block { display : block ; }
. skel-cell { display : inline-block ; height : 0.8 rem ; border-radius : 999 px ; }
. skel-wrap { display : block ; }
. skel-row { display : flex ; align-items : center ; justify-content : space-between ; gap : 0.8 rem ; margin-bottom : 0.55 rem ; }
. skel-row : last-child { margin-bottom : 0 ; }
. skel-row-l { display : flex ; align-items : center ; gap : 0.6 rem ; flex : 1 1 auto ; min-width : 0 ; }
. skel-card { background : var ( -- bg - elevated ); border : 1 px solid var ( -- border ); border-radius : var ( -- radius - md ); padding : 1 rem 1.1 rem ; }
. skel-card-body { margin-top : 0.9 rem ; }
. skel-grid { display : grid ; grid-template-columns : repeat ( auto - fill , minmax ( 240 px , 1 fr )); gap : 1 rem ; }
. skel-table { display : flex ; flex-direction : column ; gap : 0.55 rem ; }
. skel-trow { display : grid ; grid-auto-flow : column ; grid-auto-columns : 1 fr ; gap : 1 rem ; align-items : center ; }
. skel-td { display : flex ; }
. skel-spin-wrap { display : flex ; flex-direction : column ; align-items : center ; justify-content : center ; gap : 0.7 rem ; padding : 2.5 rem 1 rem ; }
. skel-spinner { width : 30 px ; height : 30 px ; border : 3 px solid var ( -- border ); border-top-color : var ( -- accent ); border-radius : 50 % ; animation : spin 0.8 s linear infinite ; }
. skel-error { padding : 1.5 rem 0 ; }
@ media ( prefers-reduced-motion : reduce ) {
. skel :: after { animation : none ; }
. skel-spinner { animation : none ; }
}
. sr-only { position : absolute ; width : 1 px ; height : 1 px ; padding : 0 ; margin : -1 px ; overflow : hidden ; clip : rect ( 0 , 0 , 0 , 0 ); white-space : nowrap ; border : 0 ; }
@ media ( max-width : 900px ) {
. sig-bar { grid-template-columns : 1 fr ; }
. sig-info-grid { grid-template-columns : 1 fr ; }
: root { --sig-chrome : 23.6 rem ; }
}
. label-combo { display : inline-flex ; align-items : center ; gap : 4 px ; }
. label-combo-input { width : auto ; min-width : 140 px ; padding : 0.4 rem 0.6 rem ; font-size : 0.82 rem ; }
. label-combo-btn {
display : none ; width : 30 px ; height : 30 px ; flex-shrink : 0 ;
align-items : center ; justify-content : center ;
border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - sm );
background : var ( -- bg - raised ); color : var ( -- text - sec );
font-size : 1 rem ; line-height : 1 ; cursor : pointer ; transition : color .15 s , background .15 s ;
}
. label-combo-btn : hover { color : var ( -- text - primary ); background : var ( -- bg - overlay ); }
. label-combo-btn : disabled { opacity : 0.35 ; cursor : not-allowed ; }
. label-combo : focus-within . label-combo-btn { display : inline-flex ; }
. dialog-overlay { position : fixed ; inset : 0 ; z-index : 2000 ; display : flex ; align-items : center ; justify-content : center ; padding : 1.5 rem ; background : rgba ( 0 , 0 , 0 , 0.55 ); animation : dlg-fade 0.12 s ease-out ; }
. dialog-overlay--stacked { z-index : 2001 ; background : rgba ( 0 , 0 , 0 , 0.3 ); }
. dialog { --dialog-pad-y : 1.5 rem ; --dialog-pad-x : 1.6 rem ; width : 100 % ; max-width : 420 px ; background : var ( -- bg - elevated ); border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - lg ); padding : var ( -- dialog - pad - y ) var ( -- dialog - pad - x ); box-shadow : var ( -- shadow -3 ); }
[ data-theme = "dark" ] . dialog { background : var ( -- bg - raised ); }
. dialog-title { font-size : 1.05 rem ; font-weight : 700 ; color : var ( -- text - primary ); margin-bottom : 0.6 rem ; }
. dialog-title : has ( . dialog-title-aside ) { display : flex ; align-items : center ; gap : 0.7 rem ; }
. dialog-title : has ( . dialog-title-aside ) . dialog-title-text { min-width : 0 ; }
. dialog : has ( . dialog-close ) . dialog-title { padding-right : 2.2 rem ; }
. dialog-eye { display : inline-flex ; align-items : center ; justify-content : center ; flex : none ; width : 1.7 rem ; height : 1.7 rem ; padding : 0 ;
border : 0 ; border-radius : 50 % ; background : transparent ; color : var ( -- text - ter ); cursor : pointer ; }
. dialog-eye : hover , . dialog-eye : focus-visible { background : var ( -- accent - soft ); color : var ( -- accent - text ); }
. dialog-eye svg { width : 1 rem ; height : 1 rem ; }
2026-10-29 15:24:06 +01:00
. dialog : not ( : has ( . val )) . dialog-eye { display : none ; }
2026-10-29 11:57:29 +01:00
. dialog : has ( . dialog-close ) { position : relative ; }
. dialog-close {
position : absolute ; top : 0.65 rem ; right : 0.65 rem ; z-index : 3 ;
display : inline-flex ; align-items : center ; justify-content : center ;
width : 1.7 rem ; height : 1.7 rem ; padding : 0 ;
border : 0 ; border-radius : 50 % ; background : transparent ; color : var ( -- text - ter );
cursor : pointer ; opacity : 0 ; pointer-events : none ;
transition : opacity 0.15 s , background 0.15 s , color 0.15 s ;
}
. dialog : hover . dialog-close , . dialog-close : focus-visible { opacity : 1 ; pointer-events : auto ; }
. dialog-close : hover { background : var ( -- accent - soft ); color : var ( -- accent - text ); }
. dialog-close : focus-visible { outline : 2 px solid var ( -- accent ); outline-offset : 1 px ; }
. dialog-body { font-size : 0.9 rem ; color : var ( -- text - sec ); line-height : 1.5 ; white-space : pre-line ; }
. dialog--wide { max-width : min ( 72 rem , 100 % ); }
. dialog--wide . dialog--xl { max-width : min ( 110 rem , 100 % ); }
. dialog-body--rich { white-space : normal ; max-height : min ( 78 vh , calc ( 100 vh - 12 rem )); overflow-y : auto ; }
. dialog-actions { display : flex ; justify-content : flex-end ; gap : 0.6 rem ; margin-top : 1.4 rem ; }
@ keyframes dlg-fade { from { opacity : 0 ; } to { opacity : 1 ; } }
. dialog-overlay--focus { background : rgba ( 0 , 0 , 0 , 0.78 ); backdrop-filter : blur ( 6 px ); -webkit- backdrop-filter : blur ( 6 px ); }
. dialog--wide . dialog-stepper { width : min ( 56 rem , 100 % ); max-width : min ( 56 rem , 100 % ); height : min ( 34 rem , calc ( 100 vh - 3 rem ));
display : flex ; flex-direction : column ; --dialog-pad-y : 2.2 rem ; --dialog-pad-x : 2.4 rem ; }
. dialog-stepper . dialog-body { flex : 1 ; min-height : 0 ; max-height : none ; }
. stepper-title { font-size : 1.5 rem ; font-weight : 600 ; letter-spacing : -0.01 em ; color : var ( -- text - primary ); margin-bottom : 1.6 rem ; }
. stepper-actions . stepper-skip { margin-right : auto ; }
. setup-choices { display : grid ; grid-template-columns : repeat ( auto - fill , minmax ( 11 rem , 1 fr )); gap : 0.8 rem ; }
. setup-choice { display : flex ; flex-direction : column ; gap : 0.25 rem ; text-align : left ; padding : 1.1 rem 1.2 rem ;
border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - md ); background : var ( -- bg - raised );
color : var ( -- text - sec ); font : inherit ; cursor : pointer ; transition : border-color 0.15 s , background 0.15 s ; }
. setup-choice : hover { border-color : var ( -- text - ter ); }
. setup-choice . is-on { border-color : var ( -- accent ); background : var ( -- accent - soft ); }
. setup-choice : focus-visible { outline : 2 px solid var ( -- accent ); outline-offset : 1 px ; }
. setup-choice-name { font-weight : 600 ; color : var ( -- text - primary ); }
. setup-choice-sub { font-size : 0.75 rem ; color : var ( -- text - ter ); font-family : var ( -- font - mono ); }
. dialog--wide . dialog-stepper--hero { width : min ( 60 rem , 100 % ); max-width : min ( 60 rem , 100 % ); height : min ( 44 rem , calc ( 100 vh - 3 rem )); }
. stepper-hero { padding-bottom : 2 rem ; }
. dialog-stepper--hero . stepper-title { text-align : center ; }
. dialog-stepper--hero . setup-choices { max-width : 40 rem ; margin-inline : auto ; }
. splash-mini { display : flex ; flex-direction : column ; align-items : center ; gap : 1.2 rem ; }
. splash-mini . splash-logo { width : clamp ( 4.5 rem , 13 vmin , 7 rem ); }
. splash-mini . splash-wing span { width : clamp ( 2.5 rem , 9 vw , 8 rem ); }
. splash-mini . splash-wing span : nth-child ( 1 ), . splash-mini . splash-wing span : nth-child ( 3 ) { width : clamp ( 1.5 rem , 5.5 vw , 5 rem ); }
. splash-mini . splash-title { font-size : clamp ( 0.85 rem , 2.4 vmin , 1.1 rem ); }
@ media ( prefers-reduced-motion : reduce ) {
. splash-mini . splash-logo , . splash-mini . splash-wing span , . splash-mini . splash-title { animation : none ; transform : none ; opacity : 1 ; }
. splash-mini . splash-wing span :: after { animation : none ; opacity : 1 ; }
}
. chev-btn { display : inline-flex ; align-items : center ; justify-content : center ; padding : 0 ; border : none ; background : none ; color : var ( -- text - ter ); cursor : pointer ; transition : opacity 0.15 s , color 0.15 s , transform 0.15 s ; transform-origin : center ; }
. chev-btn svg { display : block ; }
. chev-btn : hover { color : var ( -- accent ); }
. chev-btn . is-open { transform : rotate ( 180 deg ); }
. chev-btn . is-accent { color : var ( -- accent ); }
. oca-collapse { position : absolute ; top : 0.4 rem ; left : 0 ; right : 0 ; margin : 0 auto ; width : 1.6 rem ; height : 1.6 rem ; z-index : 2 ; opacity : 0 ; }
. oca-source : hover . oca-collapse , . oca-collapse : focus-visible { opacity : 1 ; }
. oca-source . is-collapsed . oca-movements { display : none ; }
. val { transition : filter 0.12 s ; }
[ data-blur = "on" ] . val { filter : blur ( max ( 10 px , 0.55 em )); }
[ data-blur = "on" ] . val : hover { filter : none ; }
. statusbar-eye { display : inline-flex ; align-items : center ; justify-content : center ; width : 100 % ; padding : 0.25 rem ; border : none ; background : none ; color : var ( -- text - ter ); cursor : pointer ; border-radius : var ( -- radius - sm ); transition : color 0.15 s ; }
. statusbar-eye : hover { color : var ( -- text - primary ); }
. statusbar-eye . is-on { color : var ( -- accent ); }
. statusbar-eye svg { display : block ; }
. po-btn { display : inline-flex ; align-items : center ; justify-content : center ; vertical-align : middle ; border : 0 ; background : none ;
color : var ( -- text - sec ); cursor : default ; opacity : 0 ; max-width : 0 ; padding : 0 ; margin : 0 ; overflow : hidden ; pointer-events : none ;
transition : max-width 0.12 s , opacity 0.12 s , margin 0.12 s ; }
. po-btn svg { width : 0.8 rem ; height : 0.8 rem ; flex : none ; }
td : hover . po-btn , . po-host : hover . po-btn , . po-btn : focus-visible { opacity : 1 ; max-width : 0.8 rem ; margin-left : 0.2 rem ; pointer-events : auto ; }
@ media ( min-width : 1201px ) {
td : not ( . num ) : has (> . po-btn ) :: after , td : not ( . num ) : has (> . po-btn ) :: after ,
td . num : has (> . po-btn ) :: before , td . num : has (> . po-btn ) :: before {
content : '' ; display : inline-block ; width : 1 rem ; transition : width 0.12 s ;
}
td : hover : has (> . po-btn ) :: after , td : hover : has (> . po-btn ) :: after ,
td : hover : has (> . po-btn ) :: before , td : hover : has (> . po-btn ) :: before { width : 0 ; }
}
. po-btn : hover , . po-btn : focus-visible { color : var ( -- accent - text ); outline : none ; }
td : hover . po-btn , . po-host : hover . po-btn { color : var ( -- accent - text ); }
. po-btn . is-warn , td : hover . po-btn . is-warn , . po-host : hover . po-btn . is-warn , . po-btn . is-warn : hover { color : var ( -- sig - yellow ); }
. po-pop { position : fixed ; z-index : 1000 ; max-width : 22 rem ; padding : 0.55 rem 0.75 rem ; font-size : 0.78 rem ; line-height : 1.45 ;
background : var ( -- bg - elevated ); border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - md ); box-shadow : var ( -- shadow -2 );
pointer-events : none ; }
[ data-theme = "dark" ] . po-pop { background : var ( -- bg - raised ); }
. ring-tip { position : fixed ; z-index : 2100 ; display : flex ; flex-direction : column ; gap : 0.05 rem ; padding : 0.3 rem 0.55 rem ; line-height : 1.3 ;
font-size : 0.72 rem ; font-variant-numeric : tabular-nums ; white-space : nowrap ; color : var ( -- text - primary );
background : var ( -- bg - elevated ); border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - md ); box-shadow : var ( -- shadow -2 );
transform : translate ( -50 % , calc ( -100 % - 10 px )); pointer-events : none ; opacity : 0 ; transition : opacity 0.12 s ease ; }
[ data-theme = "dark" ] . ring-tip { background : var ( -- bg - raised ); }
. ring-tip . is-visible { opacity : 1 ; }
. ring-tip-label { font-weight : 600 ; }
. ring-tip-row { display : flex ; gap : 0.35 rem ; }
. ring-tip-pct { color : var ( -- text - sec ); }
. ring-tip-row--sub { padding-left : 0.7 rem ; font-size : 0.92 em ; }
. po-pop . po-head { font-weight : 600 ; font-variant-numeric : tabular-nums ; }
. po-pop . po-line { color : var ( -- text - sec ); }
. tax-table td . num . copy-btn { opacity : 0 ; max-width : 0 ; padding : 0 ; overflow : hidden ; transition : max-width 0.12 s , opacity 0.12 s , padding 0.12 s ; }
. tax-table td . num : hover . copy-btn { opacity : 1 ; max-width : 1.5 rem ; padding : 0 0.15 rem ; margin-left : 0.2 rem ; }
. statusbar {
display : grid ; grid-template-columns : var ( -- sb - vak , 3 rem ) 1 px var ( -- sb - vak , 3 rem ) 1 px var ( -- sb - vak , 3 rem ); align-items : center ; gap : 0.5 rem ;
height : 2.4 rem ; padding : 0 0.55 rem ; background : color-mix ( in srgb , var ( -- neutral - bg ) 90 % , transparent ); border-radius : var ( -- radius - sm );
}
. statusbar-slot { display : flex ; align-items : center ; min-width : 0 ; }
# sb-slot-desktop { margin : 0 0 1.5 rem ; }
# sb-slot-desktop . statusbar { width : 100 % ; grid-template-columns : 1 fr 1 px 1 fr 1 px 1 fr ; }
# sb-slot-mobile . statusbar { gap : 0.35 rem ; padding : 0 0.35 rem ; max-width : 100 % ; grid-template-columns : var ( -- sb - vak , 3 rem ) 1 px minmax ( 0.6 rem , var ( -- sb - vak , 3 rem )) 1 px var ( -- sb - vak , 3 rem ); }
. statusbar-div { width : 1 px ; height : 1.5 rem ; background : var ( -- bg ); justify-self : center ; }
. statusbar-dots { display : grid ; grid-auto-flow : column ; grid-template-rows : repeat ( var ( -- sb - rows , 2 ), 1 fr ); gap : 5 px ; align-content : center ; justify-content : center ; }
. statusbar-dot { width : 7 px ; height : 7 px ; padding : 0 ; border : none ; border-radius : 50 % ; background : var ( -- bg ); opacity : 1 ; cursor : pointer ; transition : background 0.2 s , opacity 0.3 s , box-shadow 0.3 s , transform 0.2 s ; }
. statusbar-dot : hover { background : var ( -- text - ter ); opacity : 0.7 ; }
. statusbar-dot . is-active . is-ok { background : var ( -- sig - green ); opacity : 1 ; }
. statusbar-dot . is-active . is-fail { background : var ( -- sig - red ); opacity : 1 ; }
. statusbar-dot . is-active { animation : sb-blip 0.6 s ease-out ; }
. statusbar-labels { display : flex ; flex-direction : column ; justify-content : center ; gap : 1 px ; min-width : 0 ; }
. statusbar-label { font-family : var ( -- font - mono ); font-size : 0.62 rem ; line-height : 1.25 ; color : var ( -- text - primary ); white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; opacity : 0 ; }
. statusbar-label . is-flash { animation : sb-label 2.6 s var ( -- ease-out ) forwards ; }
. statusbar-blur { display : flex ; align-items : center ; justify-content : center ; }
@ keyframes sb-blip { 0 % { transform : scale ( 0.6 ); } 50 % { transform : scale ( 1.35 ); } 100 % { transform : scale ( 1 ); } }
@ keyframes sb-label { 0 % { opacity : 1 ; } 70 % { opacity : 1 ; } 100 % { opacity : 0 ; } }
@ keyframes attn-pulse { 0 %, 100 % { opacity : 1 ; } 50 % { opacity : 0.5 ; } }
@ media ( prefers-reduced-motion : reduce ) {
. statusbar-dot . is-active { animation : none ; }
. statusbar-label . is-flash { animation : none ; opacity : 1 ; }
. nav-attention { animation : none ; }
. statusbar-attn . is-shown { animation : none ; }
}
. statusbar-labels { position : relative ; }
. statusbar-attn {
position : absolute ; inset : 0 ; margin : auto ; width : 14 px ; height : 14 px ; padding : 0 ; border : none ; border-radius : 50 % ;
display : grid ; place-items : center ; --attn-c : var ( -- accent ); background : var ( -- attn - c ); color : #000 ; font-size : 0.62 rem ; font-weight : 800 ; line-height : 1 ;
cursor : pointer ; opacity : 0 ; transform : scale ( 0.6 ); pointer-events : none ; transition : opacity 0.25 s , transform 0.25 s ;
}
. statusbar-attn . is-shown { opacity : 1 ; transform : scale ( 1 ); pointer-events : auto ; animation : attn-pulse 2 s ease-in-out infinite ; }
. statusbar-attn . is-shown . is-dim { opacity : 0.45 ; animation : none ; }
. statusbar-attn . is-problem { --attn-c : var ( -- sig - red ); }
. statusbar-attn : hover { filter : brightness ( 1.1 ); }
. statusbar-attn . is-count { width : auto ; min-width : 16 px ; height : 16 px ; padding : 0 3 px ; border-radius : 8 px ; }
. attn-menu { position : fixed ; min-width : 15 rem ; max-width : 22 rem ; padding : 0.35 rem ; background : var ( -- bg - elevated ); border : 1 px solid var ( -- border - mid ); border-radius : var ( -- radius - md ); box-shadow : 0 10 px 30 px rgba ( 0 , 0 , 0 , 0.3 ); z-index : 1000 ; }
[ data-theme = "dark" ] . attn-menu { background : var ( -- bg - raised ); }
. attn-menu-title { padding : 0.3 rem 0.5 rem 0.4 rem ; }
. attn-menu-item { display : block ; width : 100 % ; text-align : left ; background : none ; border : none ; border-radius : var ( -- radius - sm ); padding : 0.45 rem 0.5 rem ; font-size : 0.8 rem ; color : var ( -- text - primary ); cursor : pointer ; }
. attn-menu-item : hover { background : var ( -- neutral - bg ); }
. int-section + . int-section { margin-top : 1.6 rem ; }
. mx-card { display : flex ; flex-direction : column ; gap : 0.9 rem ; padding : 1.1 rem 1.2 rem 1.2 rem ; }
. mx-card-head { display : flex ; flex-direction : column ; gap : 0.2 rem ; }
. mx-stand { color : var ( -- text - ter ); }
. mx-wrap { overflow : hidden ; }
. mx-table { --mx-rank : 1.5 rem ; border-collapse : separate ; border-spacing : 0 0.3 rem ; width : 100 % ; table-layout : fixed ; font-size : 0.8 rem ; }
. mx-table thead { position : static ; }
. mx-table th , . mx-table td { padding : 0.6 rem 0.4 rem ; border : 0 ; background : none ; box-shadow : none ; text-align : center ; vertical-align : middle ; white-space : nowrap ; color : var ( -- text - primary ); }
. mx-table tr , . mx-table tbody tr , . mx-table tr : hover , . mx-table tbody tr : hover ,
. mx-table tr : hover > td , . mx-table tbody tr : hover > td { border : 0 ; background : none ; box-shadow : none ; }
. mx-table thead th { font-size : 0.7 rem ; font-weight : 500 ; color : var ( -- text - sec ); line-height : 1.2 ; padding-bottom : 0.5 rem ; }
. mx-table thead tr : last-child th { border-bottom : 1 px solid var ( -- border ); }
. mx-table . mx-cur-row th { padding-top : 0 ; height : 1.4 rem ; line-height : 0.9 rem ; }
. mx-name { display : block ; overflow : hidden ; text-overflow : ellipsis ; }
. mx-table . mx-lab { width : 5.5 rem ; text-align : left ; padding-left : 0 ; font-weight : 500 ; color : var ( -- text - sec ); }
. mx-cur { font-size : 0.65 rem ; color : var ( -- text - ter ); }
. mx-cell { cursor : pointer ; border-radius : var ( -- radius - sm ); transition : background 0.12 s ; }
. mx-table tbody tr > td . mx-cell : hover { background : var ( -- accent - soft ); }
. mx-pick { display : inline - grid ; place-items : center ; width : var ( -- mx - rank ); height : var ( -- mx - rank ); vertical-align : middle ; color : var ( -- text - ter ); font-weight : 700 ; opacity : 0 ; transition : opacity 0.12 s , color 0.12 s ; }
. mx-table tbody td { height : calc ( var ( -- mx - rank ) + 1.2 rem ); }
. mx-rank { vertical-align : middle ; }
. mx-card : hover . mx-pick { opacity : 0.45 ; }
. mx-card . mx-cell : hover . mx-pick { opacity : 1 ; color : var ( -- accent - text ); }
. mx-empty { font-size : 0.78 rem ; color : var ( -- text - ter ); }
. mx-rank { display : inline - grid ; place-items : center ; width : var ( -- mx - rank ); height : var ( -- mx - rank ); border-radius : 50 % ; font-size : calc ( var ( -- mx - rank ) * 0.48 ); font-weight : 700 ; font-variant-numeric : tabular-nums ; background : var ( -- accent - soft ); color : var ( -- accent - text ); border : 1 px solid color-mix ( in srgb , var ( -- accent ) 35 % , transparent ); }
. mx-rank-1 { background : var ( -- accent ); color : #fff ; border-color : var ( -- accent ); }
[ data-theme = "dark" ] . mx-rank-1 { color : #000 ; }
. mx-rank . is-proposed { box-shadow : 0 0 0 2 px var ( -- sig - yellow ); }
. mx-svc { cursor : default ; }
. mx-rank . is-service { border-style : dashed ; }
. mx-rank . is-off , [ data-theme = "dark" ] . mx-rank . is-off { background : var ( -- bg - elevated ); color : var ( -- text - ter ); border-color : var ( -- border ); }
. mx-col . is-off { color : var ( -- text - ter ); }
. cov-lines { --cov-line : 1.6 rem ; display : grid ; grid-template-columns : repeat ( 2 , minmax ( 0 , 1 fr )); column-gap : 1 rem ; align-content : center ; }
. cov-line { display : flex ; align-items : center ; min-height : var ( -- cov - line ); min-width : 0 ; }
. cov-line : last-child : nth-child ( odd ) { grid-column : 1 / -1 ; }
. mx-rank . is-empty { background : transparent ; color : var ( -- text - ter ); border : 1 px dashed var ( -- border - mid ); }
. mx-grid { display : grid ; grid-template-columns : repeat ( auto - fill , minmax ( min ( 24 rem , 100 % ), 1 fr )); grid-auto-rows : 1 fr ; gap : 1.25 rem ; align-items : stretch ; margin-top : 1 rem ; }
. mx-filter { margin : 0.2 rem 0 1.3 rem ; }
@ media ( max-width : 520px ) {
. mx-table { --mx-rank : 1.25 rem ; font-size : 0.72 rem ; }
}
@ media ( max-width : 1200px ) {
. table-wrap { max-height : none ; overflow : visible ; }
. table-wrap table , . table-wrap tbody , . table-wrap tr , . table-wrap td { display : block ; width : auto ; }
. table-wrap thead { display : none ; }
. table-wrap tbody tr { border : none ; }
. table-wrap tbody tr [ data-row-id ] {
border : none ; border-top : 1 px solid var ( -- border - mid ); background : transparent ; margin : 0 0 0.4 rem ;
}
. table-wrap tbody tr [ data-row-id ] : hover { background : transparent ; }
. table-wrap tbody tr [ data-row-id ] . row-alt ,
. table-wrap tbody tr [ data-row-id ] . row-alt : hover { background : color-mix ( in srgb , var ( -- text - primary ) 6 % , transparent ); }
. table-wrap tbody tr [ data-row-id ] : has (+ tr . row-expansion ) { margin-bottom : 0 ; }
. table-wrap tbody tr . row-expansion { margin : 0 0 1.1 rem ; }
. table-wrap tbody tr . group-row + tr [ data-row-id ] { border-top : none ; }
. table-controls . tbl-filter { justify-content : flex-start ; }
. table-wrap tbody tr . row-selected { box-shadow : none ; }
. table-wrap tbody tr . row-selected > td { background : transparent ; box-shadow : inset 3 px 0 0 var ( -- accent ); }
. table-wrap td [ data-label ] {
display : flow - root ; text-align : right ; white-space : normal ; overflow-wrap : anywhere ;
padding : 0.5 rem 0.9 rem ; border : none ; border-top : 1 px solid var ( -- border );
}
. table-wrap td { height : auto ; }
. table-wrap td . text > . cell-clamp { display : block ; -webkit- line-clamp : none ; overflow : visible ; }
. table-wrap tr > td [ data-label ] : first-child ,
. table-wrap tr > td . exp-cell + td [ data-label ] { border-top : none ; }
. table-wrap td [ data-label ] :: before {
content : attr ( data - label ); float : left ; margin-right : 1 rem ; text-align : left ; line-height : 1.5 ;
font-size : 0.66 rem ; font-weight : 600 ; letter-spacing : 0.05 em ; text-transform : uppercase ; color : var ( -- text - sec );
}
. table-wrap td : not ([ data-label ]) : not ( . actions-cell ) : empty { display : none ; }
. table-wrap td . exp-cell , . table-wrap th . exp-cell { display : none ; }
. table-wrap . group-row > td ,
. table-wrap . row-expansion > td ,
. table-wrap . edit-expand-row > td { display : block ; }
. table-wrap . actions-cell { display : flex ; align-items : center ; justify-content : flex-end ; width : auto ; min-height : 2.6 rem ; padding : 0.35 rem 0.9 rem ; }
. table-wrap tr . row-editing > . actions-cell : empty { display : none ; }
. table-wrap tr . row-editing td [ data-label ] { display : block ; text-align : left ; }
. table-wrap tr . row-editing td [ data-label ] :: before { float : none ; display : block ; margin : 0 0 0.25 rem ; }
. table-wrap tr . row-editing td [ data-label ] . input ,
. table-wrap tr . row-editing td [ data-label ] . conv-field { width : 100 % ; }
2026-10-30 12:28:48 +01:00
. table-wrap . sticky-sel > table > tbody > tr . row-selected > td { position : static ; }
2026-10-29 11:57:29 +01:00
}
. health-start { display : flex ; align-items : center ; gap : 0.8 rem ; flex-wrap : wrap ; margin-bottom : 0.6 rem ; }
. health-rows { list-style : none ; margin : 0.4 rem 0 0 ; padding : 0 ; }
. health-rows li { display : flex ; gap : 0.45 rem ; align-items : baseline ; padding : 0.15 rem 0 ; font-size : 0.86 rem ; overflow-wrap : anywhere ; }
. health-rows li > span { min-width : 0 ; }
. health-rows li . btn { flex-shrink : 0 ; }
. health-findings { display : flex ; flex-direction : column ; gap : 0.9 rem ; }
. health-accepted : not ( : empty ) { margin-top : 1.6 rem ; }
. card . health-warn { background : var ( -- neg - bg ); border-color : color-mix ( in srgb , var ( -- neg ) 35 % , transparent ); }
. card . health-info { background : var ( -- accent - soft ); border-color : color-mix ( in srgb , var ( -- accent ) 35 % , transparent ); }
. health-finding . task-card-head { justify-content : flex-start ; gap : 0.7 rem ; }
@ property --rim-top { syntax : '<color>' ; inherits : true ; initial-value : transparent ; }
@ property --rim-bottom { syntax : '<color>' ; inherits : true ; initial-value : transparent ; }
@ property --hairline { syntax : '<color>' ; inherits : true ; initial-value : transparent ; }
: root [ data-profile = "glass" ] : is ( . card , . card-flat ) {
position : relative ;
background : var ( -- lift ), var ( -- lit ), linear-gradient ( var ( -- frost ), var ( -- frost )), var ( -- card - fill , var ( -- surface ));
border-color : transparent ;
box-shadow : var ( -- shadow -1 ), var ( -- glans );
transition : background-color 0.25 s , box-shadow 0.25 s , -- rim-top 0.25 s , -- rim-bottom 0.25 s , -- hairline 0.25 s ;
}
: root [ data-profile = "glass" ] : is ( . card , . card-flat ) :: after {
content : '' ; position : absolute ; inset : -1 px ; border-radius : inherit ; padding : 1 px ; pointer-events : none ;
background :
linear-gradient ( 90 deg , transparent 14 % , var ( -- hairline ) 50 % , transparent 86 % ) top / 100 % 1 px no-repeat ,
linear-gradient ( 180 deg , var ( - -rim- top ), var ( - -rim- bottom ));
-webkit- mask : linear-gradient ( #000 0 0 ) content-box , linear-gradient ( #000 0 0 );
-webkit- mask-composite : xor ;
mask : linear-gradient ( #000 0 0 ) content-box exclude , linear-gradient ( #000 0 0 );
}
: root [ data-profile = "glass" ] . tax-card { border-color : var ( -- frame - border ); box-shadow : var ( -- shadow -1 ), inset 0 1 px 0 var ( -- frame - top ); }
: root [ data-profile = "glass" ] . tax-card :: after { content : none ; }
: root [ data-profile = "glass" ] . net-card :: after , . net-card > . attn { inset : 0 ; }
: root [ data-profile = "glass" ] : is ( . card , . card-flat ) : is ( . card , . card-flat ) {
--card-fill : var ( -- surface - tint ); --frost : transparent ; box-shadow : none ; backdrop-filter : none ; -webkit- backdrop-filter : none ;
}
: root [ data-profile = "glass" ] . card . health-warn { --card-fill : var ( -- neg - bg ); }
: root [ data-profile = "glass" ] . card . health-info { --card-fill : var ( -- accent - soft ); }
: root [ data-profile = "glass" ] . wealth-card : hover {
--rim-top : var ( - -rim- hover ); --rim-bottom : var ( - -rim- hover - bottom ); --hairline : var ( -- hairline - hover );
--lift : linear-gradient ( var ( -- hover - fill ), var ( -- hover - fill ));
box-shadow : var ( -- shadow -1 ), var ( -- glans ), var ( -- hover - shadow );
}
: root [ data-profile = "glass" ] . wealth-card . is-linked {
--rim-top : color-mix ( in srgb , var ( -- accent ) 65 % , transparent );
--rim-bottom : color-mix ( in srgb , var ( -- accent ) 18 % , transparent );
--hairline : var ( -- accent - text );
--glans : var ( -- glans - on );
box-shadow : var ( -- shadow -1 ), var ( -- glans );
}
: root [ data-profile = "glass" ] . wealth-card . is-selected {
--rim-top : color-mix ( in srgb , var ( -- accent ) 85 % , transparent );
--rim-bottom : color-mix ( in srgb , var ( -- accent ) 30 % , transparent );
--hairline : var ( -- accent - text );
--glans : var ( -- glans - on );
--lit : radial-gradient ( 120 % 85 % at 50 % -12 % , color-mix ( in srgb , var ( -- accent ) 17 % , transparent ), transparent 68 % );
box-shadow : var ( -- shadow -1 ), var ( -- glans ), var ( -- select - shadow );
}
: root [ data-profile = "glass" ] : is ( . sig-card , . connp , . setup-choice ) {
background : linear-gradient ( var ( -- frost ), var ( -- frost )), var ( -- surface - tint );
border-color : var ( -- frame - border );
}
: root [ data-profile = "glass" ] : is ( . sig-card , . connp , . setup-choice ) : hover {
background : linear-gradient ( var ( -- hover - fill ), var ( -- hover - fill )), var ( -- surface - tint );
border-color : var ( - -rim- hover );
}
: root [ data-profile = "glass" ] . setup-choice . is-on { background : var ( -- accent - soft ); border-color : var ( -- accent ); }
: root [ data-profile = "glass" ] . connp . is-active { background : var ( -- accent - soft ); border-color : var ( -- accent ); }
: root [ data-profile = "glass" ] . table-frame {
background : var ( -- edge ), linear-gradient ( var ( -- frost ), var ( -- frost )), var ( -- surface );
border-color : var ( -- frame - border );
box-shadow : var ( -- shadow -1 ), inset 0 1 px 0 var ( -- frame - top );
}
: root [ data-profile = "glass" ] thead th { background : var ( -- surface - tint ); }
: root [ data-profile = "glass" ] tbody th { background : transparent ; }
: root [ data-profile = "glass" ] . tax-table thead { position : static ; }
: root [ data-profile = "glass" ] . tax-table thead th { background : transparent ; backdrop-filter : none ; -webkit- backdrop-filter : none ; box-shadow : none ; }
: root [ data-profile = "glass" ] table . mx-table thead th { background : transparent ; backdrop-filter : none ; -webkit- backdrop-filter : none ; box-shadow : none ; }
: root [ data-profile = "glass" ] thead tr : last-child > th { box-shadow : inset 0 -1 px 0 var ( -- frame - border ); }
: root [ data-profile = "glass" ] . table-wrap { --head-fill : var ( -- surface - tint ); --head-line : var ( -- frame - border ); }
: root [ data-profile = "glass" ] tbody tr { border-bottom-color : var ( -- row - line ); }
: root [ data-profile = "glass" ] tbody tr : hover { background : var ( -- row - hover ); }
: root [ data-profile = "glass" ] : is ( . row-expansion > td , . row-expansion : hover > td ) { background : var ( -- surface - tint ); }
: root [ data-profile = "glass" ] tbody tr . row-selected td { background : transparent ; }
: root [ data-profile = "glass" ] tbody tr . row-selected : hover td { background : var ( -- row - hover ); }
: root [ data-profile = "glass" ] tbody tr . row-selected td : first-child { box-shadow : inset 2 px 0 0 var ( -- accent ), inset 14 px 0 18 px -14 px var ( -- accent - glow ); }
: root [ data-profile = "glass" ] tbody tr . row-selected {
background : linear-gradient ( 192 deg , color-mix ( in srgb , var ( -- accent ) 20 % , transparent ), color-mix ( in srgb , var ( -- accent ) 5 % , transparent ) 45 % , transparent 85 % );
}
: root [ data-profile = "glass" ][ data-rowsel = "tint" ] tbody tr . row-selected { background : var ( -- row - sel ); }
: root [ data-profile = "glass" ][ data-rowsel = "tint" ] tbody tr . row-selected : hover { background : var ( -- row - sel - hover ); }
: root [ data-profile = "glass" ][ data-rowsel = "tint" ] tbody tr . row-selected : hover td { background : transparent ; }
: root [ data-profile = "glass" ][ data-rowsel = "tint" ] tbody tr . row-selected td : first-child { box-shadow : inset 3 px 0 0 var ( -- accent ); }
: root [ data-profile = "glass" ][ data-rowsel = "pill" ] . table-wrap table { border-collapse : separate ; border-spacing : 0 ; }
: root [ data-profile = "glass" ][ data-rowsel = "pill" ] . table-wrap tbody td { border-bottom : 1 px solid var ( -- row - line ); }
: root [ data-profile = "glass" ][ data-rowsel = "pill" ] . table-wrap tbody tr : last-child > td ,
: root [ data-profile = "glass" ][ data-rowsel = "pill" ] . table-wrap tbody tr . row-selected > td ,
: root [ data-profile = "glass" ][ data-rowsel = "pill" ] . table-wrap tbody tr : has (+ tr . row-selected ) > td { border-bottom-color : transparent ; }
: root [ data-profile = "glass" ][ data-rowsel = "pill" ] tbody tr . row-selected { background : none ; }
: root [ data-profile = "glass" ][ data-rowsel = "pill" ] tbody tr . row-selected td {
background : color-mix ( in srgb , var ( -- accent ) 8 % , transparent );
box-shadow : inset 0 1 px 0 color-mix ( in srgb , var ( -- accent ) 55 % , transparent ), inset 0 -1 px 0 color-mix ( in srgb , var ( -- accent ) 18 % , transparent );
}
: root [ data-profile = "glass" ][ data-rowsel = "pill" ] tbody tr . row-selected td : first-child {
border-radius : 10 px 0 0 10 px ;
box-shadow : inset 1 px 1 px 0 color-mix ( in srgb , var ( -- accent ) 55 % , transparent ), inset 0 -1 px 0 color-mix ( in srgb , var ( -- accent ) 18 % , transparent );
}
: root [ data-profile = "glass" ][ data-rowsel = "pill" ] tbody tr . row-selected td : nth-last-child ( 1 of : not ( . actions-cell )) {
border-radius : 0 10 px 10 px 0 ;
box-shadow : inset -1 px 1 px 0 color-mix ( in srgb , var ( -- accent ) 55 % , transparent ), inset 0 -1 px 0 color-mix ( in srgb , var ( -- accent ) 18 % , transparent );
}
: root [ data-profile = "glass" ] . table-wrap . sticky-sel {
--sel-fill : color-mix ( in srgb , var ( -- accent ) 10 % , transparent ); --sel-fill-hover : color-mix ( in srgb , var ( -- accent ) 16 % , transparent );
}
: root [ data-profile = "glass" ][ data-rowsel = "tint" ] . table-wrap . sticky-sel {
--sel-fill : var ( -- row - sel ); --sel-fill-hover : var ( -- row - sel - hover );
}
: root [ data-profile = "glass" ][ data-rowsel = "pill" ] . table-wrap . sticky-sel {
--sel-fill : color-mix ( in srgb , var ( -- accent ) 8 % , transparent ); --sel-fill-hover : color-mix ( in srgb , var ( -- accent ) 13 % , transparent );
}
2026-10-30 12:28:48 +01:00
: root [ data-profile = "glass" ] . table-wrap . sticky-sel > table > tbody > tr . row-selected { background : none ; }
: root [ data-profile = "glass" ] . table-wrap . sticky-sel > table > tbody > tr . row-selected > td {
2026-10-29 11:57:29 +01:00
background : linear-gradient ( var ( -- sel - fill ), var ( -- sel - fill ));
backdrop-filter : blur ( var ( -- float - blur )); -webkit- backdrop-filter : blur ( var ( -- float - blur ));
}
2026-10-30 12:28:48 +01:00
: root [ data-profile = "glass" ] . table-wrap . sticky-sel > table > tbody > tr . row-selected : hover > td {
2026-10-29 11:57:29 +01:00
background : linear-gradient ( var ( -- sel - fill - hover ), var ( -- sel - fill - hover ));
}
2026-10-30 12:28:48 +01:00
: root [ data-profile = "glass" ] : not ([ data-rowsel = "tint" ], [ data-rowsel = "pill" ]) . table-wrap . sticky-sel > table > tbody > tr . row-selected > td {
2026-10-29 11:57:29 +01:00
background-image : linear-gradient ( 192 deg , color-mix ( in srgb , var ( -- accent ) 20 % , transparent ), color-mix ( in srgb , var ( -- accent ) 5 % , transparent ) 45 % , transparent 85 % );
background-size : var ( -- row - w , 100 % ) 100 % ;
background-position : calc ( -1 * var ( -- cell - x , 0 px )) 0 ;
background-repeat : no-repeat ;
transition : background-color 0.25 s ;
}
2026-10-30 12:28:48 +01:00
: root [ data-profile = "glass" ] : not ([ data-rowsel = "tint" ], [ data-rowsel = "pill" ]) . table-wrap . sticky-sel > table > tbody > tr . row-selected : hover > td {
2026-10-29 11:57:29 +01:00
background-image : linear-gradient ( var ( -- row - hover ), var ( -- row - hover )), linear-gradient ( 192 deg , color-mix ( in srgb , var ( -- accent ) 20 % , transparent ), color-mix ( in srgb , var ( -- accent ) 5 % , transparent ) 45 % , transparent 85 % );
background-size : 100 % 100 % , var ( -- row - w , 100 % ) 100 % ;
background-position : 0 0 , calc ( -1 * var ( -- cell - x , 0 px )) 0 ;
}
: root [ data-profile = "glass" ] . pill-toggle { background : var ( -- surface - tint ); box-shadow : inset 0 0 0 1 px var ( -- row - line ); }
: root [ data-profile = "glass" ] . btn-secondary { background : var ( -- surface - tint ); border-color : var ( -- frame - border ); }
: root [ data-profile = "glass" ] . btn-secondary : hover { background : var ( -- row - hover ); border-color : var ( - -rim- hover ); }
: root [ data-profile = "glass" ] : is ( . input , . field-input , . dash-profile-list ) { background : var ( -- surface - tint ); border-color : var ( -- frame - border ); }
: root [ data-profile = "glass" ] : is ( . input , . field-input ) : focus { border-color : var ( -- accent ); box-shadow : 0 0 0 3 px var ( -- accent - soft ), 0 0 18 px -4 px var ( -- accent - glow ); }
: root [ data-profile = "glass" ] . field { background : linear-gradient ( var ( -- frost ), var ( -- frost )), var ( -- surface ); border-color : var ( -- frame - border ); }
: root [ data-profile = "glass" ] . field : focus-within { border-color : var ( -- accent ); }
: root [ data-profile = "glass" ] . label-combo-btn { background : var ( -- surface - tint ); border-color : var ( -- frame - border ); }
: root [ data-profile = "glass" ] : is ( . label-combo-btn , . conv-trigger ) : hover { background : var ( -- row - hover ); }
: root [ data-profile = "glass" ] . wealth-year : hover { background : var ( -- row - hover ); border-color : var ( - -rim- hover ); }
: root [ data-profile = "glass" ] . toggle-switch input : not ( : checked ) ~ . toggle-track { background : var ( -- surface - tint ); border-color : var ( -- frame - border ); }
: root [ data-profile = "glass" ] : is ( . fbar-item , . trk-acct , . act-jump-item , . tbl-count , . guide-code ) { background : var ( -- surface - tint ); border-color : var ( -- frame - border ); }
: root [ data-profile = "glass" ] : is ( . fbar-item , . trk-acct , . act-jump-item ) : hover { background : var ( -- row - hover ); border-color : var ( - -rim- hover ); }
: root [ data-profile = "glass" ] : is ( . fbar-item , . trk-acct ) . is-on { background : var ( -- accent - soft ); border-color : var ( -- accent ); }
: root [ data-profile = "glass" ] : is ( . trk-act , . btn-new ) { border-color : var ( -- frame - border ); }
: root [ data-profile = "glass" ] : is ( . trk-act , . btn-new ) : hover { border-color : var ( - -rim- hover ); }
: root [ data-profile = "glass" ] . btn-new : hover { border-color : var ( -- accent ); }
: root [ data-profile = "glass" ] . table-controls-bar { background : var ( -- surface - tint ); }
: root [ data-profile = "glass" ] : is ( . connp-mini , . dash-edit-wsel , . rec-wiz-item , . spark , . code , . codeblock , . codeblock-tag , . codeblock-copy , . info , . lock-panel , . mobile-menu-btn , . skel ) {
background : var ( -- surface - tint ); border-color : var ( -- frame - border );
}
: root [ data-profile = "glass" ] . skel-card {
background : linear-gradient ( var ( -- frost ), var ( -- frost )), var ( -- surface ); border-color : var ( -- frame - border );
}
: root [ data-profile = "glass" ] . btn-primary { box-shadow : inset 0 1 px 0 rgba ( 255 , 255 , 255 , 0.25 ); }
: root [ data-profile = "glass" ][ data-theme = "dark" ] . btn-primary { box-shadow : 0 0 20 px var ( -- accent - glow ), inset 0 1 px 0 rgba ( 255 , 255 , 255 , 0.25 ); }
: root [ data-profile = "glass" ] : is ( . hint-panel , . match-pop , . conv-pop , . new-menu , . attn-menu , . dash-settings , . dashboard-add-menu , . wealth-year-menu , . po-pop , . ring-tip , . cmd-bar ) {
background : linear-gradient ( var ( -- frost ), var ( -- frost )), var ( -- float - bg );
border-color : var ( -- frame - border );
box-shadow : var ( -- shadow -2 ), inset 0 1 px 0 var ( -- frame - top );
backdrop-filter : blur ( var ( -- float - blur )) saturate ( 150 % ); -webkit- backdrop-filter : blur ( var ( -- float - blur )) saturate ( 150 % );
}
: root [ data-profile = "glass" ] . cmd-bar { border-color : var ( -- accent ); }
: root [ data-profile = "glass" ] : is ( . dash-edit-bar , . spark-mini-label ) {
background : var ( -- float - bg ); border-color : var ( -- frame - border );
backdrop-filter : blur ( var ( -- float - blur )); -webkit- backdrop-filter : blur ( var ( -- float - blur ));
}
: root [ data-profile = "glass" ] . mobile-topbar {
background : color-mix ( in srgb , var ( -- bg ) 60 % , transparent );
border-bottom-color : var ( -- frame - border );
backdrop-filter : blur ( var ( -- float - blur )) saturate ( 150 % ); -webkit- backdrop-filter : blur ( var ( -- float - blur )) saturate ( 150 % );
}
: root [ data-profile = "glass" ] . dialog-overlay { background : transparent ; }
: root [ data-profile = "glass" ] . dialog-overlay :: before {
content : '' ; position : absolute ; inset : 0 ; pointer-events : none ;
background : rgba ( 0 , 0 , 0 , 0.32 );
backdrop-filter : blur ( 6 px ); -webkit- backdrop-filter : blur ( 6 px );
}
: root [ data-profile = "glass" ][ data-theme = "light" ] . dialog-overlay :: before { background : rgba ( 0 , 0 , 0 , 0.18 ); }
: root [ data-profile = "glass" ] . dialog {
position : relative ; isolation : isolate ;
background : none ;
border-color : var ( -- frame - border );
box-shadow : var ( -- shadow -3 );
}
: root [ data-profile = "glass" ] . dialog :: before {
content : '' ; position : absolute ; inset : 0 ; z-index : -1 ; pointer-events : none ; border-radius : inherit ;
background : linear-gradient ( var ( -- frost ), var ( -- frost )), var ( -- float - bg );
box-shadow : inset 0 1 px 0 var ( -- frame - top );
backdrop-filter : blur ( var ( -- float - blur )) saturate ( 150 % ); -webkit- backdrop-filter : blur ( var ( -- float - blur )) saturate ( 150 % );
}
: root [ data-profile = "glass" ] . lic-feat-shot {
background : linear-gradient ( var ( -- frost ), var ( -- frost )), var ( -- float - bg ); border-color : var ( -- frame - border );
backdrop-filter : blur ( var ( -- float - blur )) saturate ( 150 % ); -webkit- backdrop-filter : blur ( var ( -- float - blur )) saturate ( 150 % );
}
: root [ data-profile = "glass" ] . dialog . table-frame { background : none ; border : 0 ; box-shadow : none ; backdrop-filter : none ; -webkit- backdrop-filter : none ; }
: root [ data-profile = "glass" ] . dialog . table-controls-bar { background : none ; }
. aurora { display : none ; position : fixed ; inset : 0 ; z-index : 0 ; pointer-events : none ; overflow : hidden ; }
: root [ data-profile = "glass" ] : not ([ data-glow = "off" ]) . aurora { display : block ; }
: root [ data-profile = "glass" ] body : has (> . aurora ) :: before { display : none ; }
. blob {
position : absolute ; border-radius : 50 % ; translate : -50 % -50 % ; will-change : transform ;
transition : transform var ( -- drift - dur , 24 s ) cubic-bezier ( 0.45 , 0.05 , 0.25 , 1 ), opacity 2.5 s ;
}
. blob :: before , . blob :: after {
content : '' ; position : absolute ; border-radius : 50 % ; pointer-events : none ;
transition : opacity var ( -- drift - dur , 24 s ) ease-in-out ;
}
. blob :: before { inset : 0 ; background : var ( -- spot ); }
. blob :: after {
left : 50 % ; top : 50 % ; width : var ( -- core - size ); height : var ( -- core - size ); translate : -50 % -50 % ;
background : radial-gradient ( closest - side , color-mix ( in srgb , var ( -- accent ) var ( -- core - hi ), transparent ), color-mix ( in srgb , var ( -- accent ) var ( -- core - lo ), transparent ) 30 % , transparent 70 % );
opacity : 0 ;
}
. blob . is-core :: before { opacity : 0.35 ; }
. blob . is-core :: after { opacity : 1 ; }
. blob-a { left : 8 % ; top : -8 % ; width : 116 rem ; height : 68 rem ; --spot : radial-gradient ( closest - side , var ( -- accent - glow ), transparent 62 % ); --core-size : 74 rem ; --core-hi : 40 % ; --core-lo : 13 % ; }
. blob-b { left : 102 % ; top : 4 % ; width : 92 rem ; height : 60 rem ; --spot : radial-gradient ( closest - side , color-mix ( in srgb , var ( -- accent ) 14 % , transparent ), transparent 66 % ); --core-size : 62 rem ; --core-hi : 24 % ; --core-lo : 8 % ; }
. blob-c { left : 50 % ; top : 100 % ; width : 124 rem ; height : 84 rem ; --spot : radial-gradient ( closest - side , color-mix ( in srgb , var ( -- accent ) 14 % , transparent ), transparent 64 % ); --core-size : 66 rem ; --core-hi : 24 % ; --core-lo : 8 % ; opacity : 0 ; }
[ data-theme = "light" ] . blob-a { --core-hi : 26 % ; --core-lo : 9 % ; }
[ data-theme = "light" ] : is ( . blob-b , . blob-c ) { --core-hi : 16 % ; --core-lo : 5 % ; }
: is ([ data-motion = "step" ], [ data-motion = "always" ]) . blob-c { opacity : 1 ; }
[ data-motion = "always" ] . blob { transition : opacity 2.5 s ; }
[ data-motion = "always" ] . blob-a { animation : drift-a calc ( 24 s * var ( -- drift - mult , 2 )) ease-in-out infinite alternate ; }
[ data-motion = "always" ] . blob-b { animation : drift-b calc ( 30 s * var ( -- drift - mult , 2 )) ease-in-out infinite alternate ; }
[ data-motion = "always" ] . blob-c { animation : drift-c calc ( 36 s * var ( -- drift - mult , 2 )) ease-in-out infinite alternate ; }
@ keyframes drift-a { 50 % { transform : translate ( 20 vw , 6 vh ) rotate ( 10 deg ) scale ( 1.15 , 0.9 ); } 100 % { transform : translate ( 42 vw , 14 vh ) rotate ( -6 deg ) scale ( 0.95 , 1.15 ); } }
@ keyframes drift-b { 50 % { transform : translate ( -24 vw , 12 vh ) rotate ( -12 deg ) scale ( 0.9 , 1.15 ); } 100 % { transform : translate ( -52 vw , 18 vh ) rotate ( 8 deg ) scale ( 1.1 , 0.95 ); } }
@ keyframes drift-c { 40 % { transform : translate ( -32 vw , -30 vh ) rotate ( 8 deg ) scale ( 1.15 , 0.9 ); } 75 % { transform : translate ( 30 vw , -18 vh ) rotate ( -10 deg ) scale ( 0.95 , 1.12 ); } 100 % { transform : translate ( 10 vw , 80 vh ) rotate ( -4 deg ) scale ( 1 , 1 ); } }
@ media ( prefers-reduced-motion : reduce ) {
. blob { transition : opacity 2.5 s ; animation : none ; transform : none !important ; }
. blob . is-core :: before { opacity : 1 ; }
. blob . is-core :: after { opacity : 0 ; }
}
. bands {
display : none ; position : absolute ; inset : 0 ; opacity : 0 ; transition : opacity 5 s ease-in-out ;
-webkit- mask-image : radial-gradient ( farthest - corner at 100 % 0 % , #000 15 % , rgba ( 0 , 0 , 0 , 0.45 ) 55 % , transparent 95 % );
mask-image : radial-gradient ( farthest - corner at 100 % 0 % , #000 15 % , rgba ( 0 , 0 , 0 , 0.45 ) 55 % , transparent 95 % );
}
: root [ data-glowshape = "bands" ] . bands { display : block ; }
. bands . is-shown { opacity : var ( -- band - alpha ); }
[ data-theme = "dark" ] { --band-ink : color-mix ( in srgb , var ( -- accent ) 60 % , #ffffff ); --band-alpha : 0.55 ; }
[ data-theme = "light" ] { --band-ink : color-mix ( in srgb , var ( -- accent ) 85 % , #000000 ); --band-alpha : 0.32 ; }
. band {
position : absolute ; left : 50 % ; top : 50 % ;
width : calc ( 100 vw + 30 vh + 60 px ); height : calc ( 100 vh + 30 vw + var ( -- tile - h , 0 px ) + 60 px );
background : var ( -- band - ink );
-webkit- mask-image : linear-gradient ( transparent , transparent ); mask-image : linear-gradient ( transparent , transparent );
-webkit- mask-repeat : repeat ; mask-repeat : repeat ;
will-change : transform ;
animation : band-fall calc ( var ( -- band - dur , 20 s ) * var ( -- drift - mult , 2 ) / 2 ) linear infinite paused ;
}
. bands . is-falling . band { animation-play-state : running ; }
@ keyframes band-fall {
from { transform : translate ( -50 % , -50 % ) rotate ( var ( -- tilt )) translateY ( calc ( var ( -- tile - h ) * -0.5 )); }
to { transform : translate ( -50 % , -50 % ) rotate ( var ( -- tilt )) translateY ( calc ( var ( -- tile - h ) * 0.5 )); }
}
: root [ data-glowshape = "bands" ] . blob { animation : none ; transform : none !important ; }
: root [ data-glowshape = "bands" ] . blob-c { opacity : 0 ; }
@ media ( prefers-reduced-motion : reduce ) {
. band { animation-play-state : paused !important ; }
}
. attn {
position : absolute ; inset : -1 px ; border-radius : inherit ; padding : 1.5 px ; pointer-events : none ;
overflow : hidden ; opacity : 0 ; transition : opacity 0.8 s ;
-webkit- mask : linear-gradient ( #000 0 0 ) content-box , linear-gradient ( #000 0 0 );
-webkit- mask-composite : xor ;
mask : linear-gradient ( #000 0 0 ) content-box exclude , linear-gradient ( #000 0 0 );
}
. card > . attn { position : absolute ; }
. attn-spin {
position : absolute ; left : 50 % ; top : 50 % ;
width : var ( -- attn - d , 800 px ); height : var ( -- attn - d , 800 px );
margin : calc ( var ( -- attn - d , 800 px ) / -2 ) 0 0 calc ( var ( -- attn - d , 800 px ) / -2 );
background : conic-gradient ( from 0 deg , transparent 0 52 % , color-mix ( in srgb , var ( -- accent ) 45 % , transparent ) 70 % , var ( -- accent - text ) 82 % , transparent 94 % );
animation : attn-spin 3.5 s linear infinite ; animation-play-state : paused ;
}
. is-attention > . attn { opacity : 1 ; }
. is-attention > . attn . attn-spin { animation-play-state : running ; will-change : transform ; }
. is-attention { box-shadow : var ( -- shadow -1 ), 0 0 0 1 px color-mix ( in srgb , var ( -- accent ) 25 % , transparent ), 0 16 px 48 px -20 px var ( -- accent - glow ); }
@ keyframes attn-spin { to { transform : rotate ( 1 turn ); } }
@ media ( prefers-reduced-motion : reduce ) {
. attn-spin { animation : none ; background : var ( -- accent ); }
}
@ media ( prefers-reduced-transparency : reduce ) {
: root [ data-profile = "glass" ] : is ( thead th , . hint-panel , . match-pop , . conv-pop , . new-menu , . attn-menu , . dash-settings , . dashboard-add-menu , . wealth-year-menu , . po-pop , . ring-tip , . cmd-bar , . dash-edit-bar , . spark-mini-label , . mobile-topbar , . dialog ) {
background : var ( -- bg - elevated ); backdrop-filter : none ; -webkit- backdrop-filter : none ;
}
: root [ data-profile = "glass" ] . dialog :: before { background : var ( -- bg - elevated ); backdrop-filter : none ; -webkit- backdrop-filter : none ; }
: root [ data-profile = "glass" ] . table-wrap { --head-fill : var ( -- bg - elevated ); }
2026-10-30 12:28:48 +01:00
: root [ data-profile = "glass" ] . table-wrap . sticky-sel > table > tbody > tr . row-selected > td {
2026-10-29 11:57:29 +01:00
background : color-mix ( in srgb , var ( -- accent ) 20 % , var ( -- bg - elevated )); backdrop-filter : none ; -webkit- backdrop-filter : none ;
}
}