.color-text-primary{color:var(--db-color-primary)}button,input,select,optgroup,textarea,h1,h2,h3,h4,h5,h6,a:active,a:focus,a:hover strong,div,p,blockquote,q,code{color:var(--db-text-primary)}button a,input a,select a,optgroup a,textarea a,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a,a:active a,a:focus a,a:hover strong a,div a,p a,blockquote a,q a,code a{color:inherit}.disclaimer,kbd,tt,var,a,a:visited{color:var(--db-text-secondary)}label{color:var(--db-text-secondary)}code{background-color:var(--db-surface-layer-2);border-radius:var(--db-radius-s);padding:2px 4px}kbd,tt,var,abbr,acronym{color:var(--db-text-secondary)}mark{color:var(--db-color-primary);background:var(--db-color-primary-20)}.wp-block-separator,hr{background-color:var(--db-border-base)}.icon{color:var(--db-icon-default)}body.dark-mode button.input-search-icon,.darkmode--activated button.input-search-icon{background-image:url(../9a51b8d55567a413020c.svg)}@property --rotate{syntax:"<angle>";initial-value:132deg;inherits:false}.tool-page--grid-calculator{--gc-header-control-h: var(--db-size-control-m, 32px)}.tool-page--grid-calculator .preview-head-left{display:flex;align-items:center;gap:var(--db-gap-s);min-width:0;flex-wrap:nowrap}.tool-page--grid-calculator .breakpoint-tabs{flex-shrink:0;display:inline-flex;align-items:center;height:var(--gc-header-control-h);padding:2px;box-sizing:border-box}.tool-page--grid-calculator .breakpoint-tabs .breakpoint-tab{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:calc(var(--gc-header-control-h) - 4px);min-height:calc(var(--gc-header-control-h) - 4px);padding:0 10px;font-size:12px;line-height:1;box-sizing:border-box}.tool-page--grid-calculator .breakpoint-tabs .breakpoint-tab i{font-size:14px;line-height:1}.tool-page--grid-calculator .device-preset-selector{flex-shrink:0}.tool-page--grid-calculator .device-preset-selector .device-preset-select{height:var(--gc-header-control-h);min-height:var(--gc-header-control-h);width:auto;min-width:128px;max-width:168px;padding:0 28px 0 10px;font-size:12px;line-height:1.2;box-sizing:border-box;background-position:right 8px center;background-size:14px}.tool-page--grid-calculator .function-wrap{display:flex;flex-shrink:0;align-items:center;gap:var(--db-gap-xs)}.tool-page--grid-calculator .function-wrap .button.small{height:var(--gc-header-control-h);min-height:var(--gc-header-control-h);padding:0 var(--db-padding-s);font-size:12px;line-height:1;box-sizing:border-box;white-space:nowrap}.tool-page--grid-calculator .function-wrap .button.small i{font-size:14px}.grid-calculator-tool{width:100%}.page-template-page-grid-calculator .container-full{max-width:1920px;padding:0}.page-template-page-grid-calculator .inputwl{width:100%}.page-template-page-grid-calculator .helper-text{font-size:12px;color:var(--db-text-tertiary);margin-top:var(--db-margin-xs);line-height:1.2}.page-template-page-grid-calculator .input-with-segment{display:flex;align-items:center;gap:var(--db-padding-xs)}.page-template-page-grid-calculator .input-with-segment input{flex:1}.page-template-page-grid-calculator .input-with-segment .segment-tabs{display:flex;border:1px solid var(--db-border-base);border-radius:var(--db-radius-m);-webkit-border-radius:var(--db-radius-m);-moz-border-radius:var(--db-radius-m);-ms-border-radius:var(--db-radius-m);padding:var(--db-padding-xxs);background-color:var(--db-bg-secondary);overflow:hidden}.page-template-page-grid-calculator .input-with-segment .segment-tabs .segment-tab{padding:var(--db-padding-xxs) var(--db-padding-xs);background:rgba(0,0,0,0);cursor:pointer;font-size:11px;width:26px;height:26px;line-height:16px;text-align:center;color:var(--db-text-tertiary);border:1px solid rgba(0,0,0,0);border-radius:var(--db-radius-s);-webkit-border-radius:var(--db-radius-s);-moz-border-radius:var(--db-radius-s);-ms-border-radius:var(--db-radius-s);transition:all .2s ease}.page-template-page-grid-calculator .input-with-segment .segment-tabs .segment-tab:hover{color:var(--db-text-primary);background:var(--db-bg-secondary)}.page-template-page-grid-calculator .input-with-segment .segment-tabs .segment-tab.active{background:var(--db-bg-primary);color:var(--db-text-primary);border:1px solid var(--db-border-base)}.page-template-page-grid-calculator .input-wrap{display:grid;grid-template-columns:repeat(4, 1fr);gap:var(--db-padding-l)}@media only screen and (max-width: 767px){.page-template-page-grid-calculator .input-wrap{grid-template-columns:repeat(2, 1fr)}}.grid-display{position:relative}.mobile-notice{display:none}.function-wrap .button i{font-size:16px;color:var(--db-text-secondary)}.function-wrap .button:hover i{color:var(--db-color-primary)}.code-actions .button i{font-size:14px;color:var(--db-text-secondary)}.code-actions .button:hover i{color:var(--db-color-primary)}.breakpoint-header .header-left i{font-size:20px;color:var(--db-text-secondary)}.breakpoint-header .breakpoint-range-button i{font-size:12px;color:var(--db-text-secondary)}.breakpoint-header .breakpoint-range-button:hover i{color:var(--db-color-primary)}#presetModal .modal{max-width:600px}#presetModal .preset-grid{display:grid;grid-template-columns:1fr;gap:var(--db-margin-m)}#presetModal .preset-item{background-color:var(--db-bg-secondary);border:1px solid var(--db-border-base);border-radius:var(--db-radius-l);-webkit-border-radius:var(--db-radius-l);-moz-border-radius:var(--db-radius-l);-ms-border-radius:var(--db-radius-l);padding:var(--db-padding-m);cursor:pointer;transition:all .2s ease;position:relative}#presetModal .preset-item:hover{border-color:var(--db-color-primary);box-shadow:0 4px 12px rgba(var(--db-color-primary), 0.1);transform:translateY(-2px)}#presetModal .preset-item.selected{border-color:var(--db-color-primary);background-color:rgba(var(--db-color-primary), 0.05);box-shadow:0 0 0 2px rgba(var(--db-color-primary), 0.2)}#presetModal .preset-item .preset-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--db-margin-s)}#presetModal .preset-item .preset-header h4{margin:0;font-size:16px;font-weight:600;color:var(--db-text-primary)}#presetModal .preset-item .preset-description{margin:0 0 var(--db-margin-s) 0;font-size:12px;line-height:1.4;color:var(--db-text-secondary)}#presetModal .preset-item .preset-details{display:grid;grid-template-columns:repeat(2, 1fr);gap:var(--db-margin-xs)}#presetModal .preset-item .preset-details .preset-detail{display:flex;justify-content:space-between;align-items:center;font-size:12px}#presetModal .preset-item .preset-details .preset-detail .label{color:var(--db-text-secondary);font-weight:500}#presetModal .preset-item .preset-details .preset-detail .value{color:var(--db-text-primary);font-weight:600;background-color:rgba(var(--db-color-primary), 0.1);padding:var(--db-margin-xxs) var(--db-padding-xxs);border-radius:var(--db-radius-s);-webkit-border-radius:var(--db-radius-s);-moz-border-radius:var(--db-radius-s);-ms-border-radius:var(--db-radius-s);font-size:11px}#codeModal .modal{max-width:600px}#codeModal .modal-body{display:flex;flex-direction:column;gap:var(--db-margin-m)}#codeModal .code-tabs{display:flex;gap:var(--db-margin-xxs);padding:var(--db-margin-xxs);background:var(--db-bg-secondary);border-radius:var(--db-radius-l);-webkit-border-radius:var(--db-radius-l);-moz-border-radius:var(--db-radius-l);-ms-border-radius:var(--db-radius-l)}#codeModal .code-tabs .code-tab{flex:1;font-size:14px;padding:var(--db-padding-xs) var(--db-padding-l);border-radius:var(--db-radius-m);-webkit-border-radius:var(--db-radius-m);-moz-border-radius:var(--db-radius-m);-ms-border-radius:var(--db-radius-m);border:none;background:none;cursor:pointer;color:var(--db-text-secondary);transition:all .2s ease}#codeModal .code-tabs .code-tab.active{background:var(--db-bg-primary);color:var(--db-text-primary);font-weight:600}#codeModal .code-tabs .code-tab:hover:not(.active){background:rgba(var(--db-color-primary), 0.1);color:var(--db-color-primary)}#codeModal .code-actions{display:flex;gap:var(--db-padding-xs)}#codeModal .code-content .code-block{margin:0;height:400px;overflow:auto;border-radius:var(--db-radius-l);-webkit-border-radius:var(--db-radius-l);-moz-border-radius:var(--db-radius-l);-ms-border-radius:var(--db-radius-l);box-shadow:0 8px 24px -8px rgba(0,0,0,.1);background:#2d2d2d;position:relative;scrollbar-width:none}@media only screen and (max-width: 767px){#codeModal .code-content .code-block{height:60vh}}#codeModal .code-content .code-block code{width:100%;display:block;padding:1em}#codeModal .code-content .code-block code.language-css,#codeModal .code-content .code-block code.language-scss{position:absolute;top:0;left:0;right:0;bottom:0}#codeModal .code-content .code-block code.language-css[style*="display: none"],#codeModal .code-content .code-block code.language-scss[style*="display: none"]{visibility:hidden}#codeModal .code-content .code-block::-webkit-scrollbar{width:0;background:rgba(0,0,0,0)}@media only screen and (max-width: 1920px){.page-template-page-grid-calculator .container-full{padding:0 20px}}input[type=checkbox].switch{--active-inner: #fff;--border: #edf1f6;--border-hover: var(--db-color-primary);--background: #fff;appearance:none;-webkit-appearance:none;-moz-appearance:none;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid #bbc1e1;background:var(--db-bg-primary);transition:background .3s,border-color .3s,box-shadow .2s;width:40px;height:24px;border-radius:12px}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 16px;background:var(--db-color-secondary);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox].switch:after{content:"";display:block;position:absolute;left:2px;top:2px;border-radius:50%;width:18px;height:18px;border:1px solid #bbc1e1;background:var(--ab, var(--border));transform:translateX(var(--x, 0));transition:transform var(--d-t, 0.3s) var(--d-t-e, ease),opacity var(--d-o, 0.2s)}input[type=checkbox].switch:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox].switch+label{font-size:14px;line-height:24px;display:inline-block;vertical-align:top;cursor:pointer}.grid-inputs{display:flex;flex-direction:column;gap:var(--db-margin-m);padding:var(--db-padding-l) 0}.grid-inputs .grid-input{flex:1;padding:var(--db-padding-s);background:var(--db-bg-primary);padding:var(--db-padding-s);border-radius:var(--db-radius-l);-webkit-border-radius:var(--db-radius-l);-moz-border-radius:var(--db-radius-l);-ms-border-radius:var(--db-radius-l)}.grid-inputs .grid-input label{font-size:12px;font-weight:bold;margin-bottom:var(--db-margin-xs);display:flex;align-items:center}.grid-inputs .grid-input label span{font-size:10px;line-height:1;margin-left:2px;background-color:var(--db-bg-secondary);padding:4px 6px;border-radius:var(--db-radius-l);-webkit-border-radius:var(--db-radius-l);-moz-border-radius:var(--db-radius-l);-ms-border-radius:var(--db-radius-l)}.preview-head-left{display:flex;align-items:center;gap:var(--db-margin-xs)}.preview-head{width:100%}.preview-head h2{font-size:24px;margin-bottom:0}.preview-head .button-group{display:flex;gap:var(--db-padding-xs);align-items:center}.preview-head .button-group .code-type-tabs{display:flex;gap:var(--db-margin-xxs);padding:var(--db-margin-xxs);background:var(--db-bg-secondary);border-radius:var(--db-radius-l);-webkit-border-radius:var(--db-radius-l);-moz-border-radius:var(--db-radius-l);-ms-border-radius:var(--db-radius-l)}.preview-head .button-group .code-type-tabs .tab-button{font-size:14px;padding:var(--db-margin-xxs) var(--db-padding-m);border-radius:var(--db-radius-m);-webkit-border-radius:var(--db-radius-m);-moz-border-radius:var(--db-radius-m);-ms-border-radius:var(--db-radius-m);border:none;background:none;cursor:pointer}.preview-head .button-group .code-type-tabs .tab-button.active{background:var(--db-bg-primary);font-weight:bold}.preview-head .button-group .download-buttons{display:flex;gap:var(--db-padding-xs)}.preview-head .button-group .button{white-space:nowrap}.device-preset-selector .device-preset-select{color:var(--db-text-primary)}.device-preset-selector .device-preset-select:hover{border-color:var(--db-color-primary)}.device-preset-selector .device-preset-select:focus{outline:none;border-color:var(--db-color-primary);box-shadow:0 0 0 2px rgba(var(--db-color-primary), 0.2)}.function-wrap{display:flex;align-items:center;gap:var(--db-margin-s)}.function-wrap .device-preset-selector .device-preset-select:focus{outline:none;border-color:var(--db-color-primary);box-shadow:0 0 0 2px rgba(var(--db-color-primary), 0.2)}.function-wrap label{font-size:14px;font-weight:bold;flex-shrink:0}.function-wrap #frame-size-input{width:120px}.function-wrap #preset-button .icon,.function-wrap #code-view-button .icon{width:16px;height:16px}.preview-container{position:relative;width:100%}.grid-preview-container{position:relative;margin:auto;margin-bottom:50px;overflow:hidden}.grid-preview-container .browser-head{position:relative;width:100%;height:24px;background-color:var(--db-bg-tertiary)}.grid-preview-container .browser-head .button-area{display:flex;gap:var(--db-padding-xs);padding:6px}.grid-preview-container .browser-head .button-area i{width:12px;height:12px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;background-color:var(--db-text-warning)}.grid-preview-container .browser-head .button-area i:first-child{background-color:var(--db-text-error)}.grid-preview-container .browser-head .button-area i:last-child{background-color:var(--db-text-success)}.grid-preview-container .grid-column .width-info{background:rgba(0,0,0,.7);color:#fff;padding:var(--db-margin-xxs) var(--db-padding-xxs);border-radius:var(--db-radius-xs);-webkit-border-radius:var(--db-radius-xs);-moz-border-radius:var(--db-radius-xs);-ms-border-radius:var(--db-radius-xs);font-size:12px}.grid-preview-container .preview-info-item:not(:last-child)::after{content:"";position:absolute;right:-10px;top:50%;transform:translateY(-50%);height:70%;width:1px;background:rgba(255,255,255,.2)}.grid-preview-container .size-controller{cursor:col-resize;position:absolute;width:20px;height:40px;background-color:rgba(var(--db-color-primary), 0.2);top:calc(50% - 20px);z-index:100;box-shadow:0 2px 12px rgba(0,0,0,.1);transition:.3s;display:flex;align-items:center;justify-content:center}.grid-preview-container .size-controller.left{left:0;border-radius:0 var(--db-radius-s) var(--db-radius-s) 0;-webkit-border-radius:0 var(--db-radius-s) var(--db-radius-s) 0;-moz-border-radius:0 var(--db-radius-s) var(--db-radius-s) 0;-ms-border-radius:0 var(--db-radius-s) var(--db-radius-s) 0}.grid-preview-container .size-controller.right{right:0;border-radius:var(--db-radius-s) 0 0 var(--db-radius-s);-webkit-border-radius:var(--db-radius-s) 0 0 var(--db-radius-s);-moz-border-radius:var(--db-radius-s) 0 0 var(--db-radius-s);-ms-border-radius:var(--db-radius-s) 0 0 var(--db-radius-s)}.grid-preview-container .size-controller:hover{background-color:rgba(var(--db-color-primary), 0.3)}.grid-preview-container .size-controller.drag{background-color:rgba(var(--db-color-primary), 0.3)}.grid-preview-container .size-controller svg{width:16px;height:16px}.frame-size-display{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);font-size:12px;white-space:nowrap;z-index:2}.frame-size-display .frame-size-label{color:var(--db-text-tertiary);margin-right:4px}.frame-size-display .frame-size-value{color:var(--db-text-primary)}.inputbox{display:inline-flex;align-items:center;gap:var(--db-padding-xs)}.inputbox input{width:120px}.selectbox{display:inline-flex;align-items:center;gap:var(--db-margin-xxs)}.selectbox select{width:120px;background-color:var(--db-bg-primary)}.grid-info{display:none;padding:var(--db-padding-l);background-color:var(--db-bg-secondary);margin:var(--db-margin-m) 0;border-radius:var(--db-radius-l);-webkit-border-radius:var(--db-radius-l);-moz-border-radius:var(--db-radius-l);-ms-border-radius:var(--db-radius-l)}.grid-preview-frame{position:relative;width:100%;max-width:1920px;margin:auto;display:flex;justify-content:center;height:400px;background-color:var(--db-bg-primary);border:1px solid var(--db-border-base);height:100%;min-height:500px}.grid-preview-frame .browser-head{width:100%;height:28px;background-color:var(--db-bg-secondary);border-bottom:1px solid var(--db-border-base)}.grid-preview-frame .browser-head .button-area{display:inline-flex;float:right;gap:var(--db-margin-xxs);padding:8px}.grid-preview-frame .browser-head .button-area i{display:block;width:12px;height:12px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;background-color:#c5c6cc}.grid-preview-frame #container{width:100%;display:flex;height:100%;box-sizing:border-box}.grid-preview-frame .grid-item{position:relative;height:100%;background-color:rgba(203,14,14,.2)}.grid-preview-frame .grid-item span{position:absolute;left:50%;top:50%;color:var(--db-text-secondary);text-align:center;transform:translate(-50%, -50%);font-size:12px;transition:all .2s ease}.grid-preview-frame .grid-item.integer span{font-weight:700;color:var(--db-text-primary)}@media only screen and (max-width: 1024px){.tool-page--grid-calculator .preview-head-left{flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:var(--db-gap-xs);width:100%;min-width:0;overflow:visible}.tool-page--grid-calculator .breakpoint-tabs{flex:0 1 auto;min-width:0;max-width:calc(100% - 116px);overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none}.tool-page--grid-calculator .breakpoint-tabs::-webkit-scrollbar{display:none}.tool-page--grid-calculator .device-preset-selector{flex:0 0 auto;margin-left:auto;min-width:0}.tool-page--grid-calculator .device-preset-selector .device-preset-select{width:auto;min-width:108px;max-width:132px}.tool-page--grid-calculator .function-wrap{width:100%;justify-content:flex-start;flex-wrap:wrap}}@media only screen and (max-width: 767px){.tool-page--grid-calculator .breakpoint-tabs .breakpoint-tab{padding:0 8px;gap:2px;font-size:11px}.tool-page--grid-calculator .device-preset-selector .device-preset-select{min-width:100px;max-width:120px;font-size:11px}.mobile-notice{display:flex;align-items:flex-start;gap:var(--db-padding-l);padding:16px;background:linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));border:1px solid rgba(59,130,246,.2);border-radius:12px;margin-bottom:16px}.mobile-notice .notice-content{flex:1}.mobile-notice .notice-content h4{margin:0 0 8px 0;font-size:16px;font-weight:600;color:#1e40af}.mobile-notice .notice-content p{margin:0;font-size:14px;line-height:1.5;color:#374151}.grid-preview-container .size-controller{display:none}.size-controller{display:none !important}#presetModal .preset-item .preset-details,#codeModal .preset-item .preset-details{grid-template-columns:1fr}#presetModal .code-tabs,#codeModal .code-tabs{justify-content:center}#presetModal .code-actions,#codeModal .code-actions{justify-content:center}}.breakpoint-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--db-margin-m)}.breakpoint-header .toggle-switch{position:relative;display:inline-flex;align-items:center;cursor:pointer}.breakpoint-header .toggle-switch input{opacity:0;width:0;height:0}.breakpoint-header .toggle-switch input:checked+.slider{background-color:var(--db-color-primary)}.breakpoint-header .toggle-switch input:checked+.slider:before{transform:translateX(18px)}.breakpoint-header .toggle-switch input:disabled+.slider{background-color:var(--db-border-base);cursor:not-allowed}.breakpoint-header .toggle-switch .slider{position:relative;width:40px;height:22px;background-color:var(--db-border-layer-1);border-radius:var(--db-radius-full);-webkit-border-radius:var(--db-radius-full);-moz-border-radius:var(--db-radius-full);-ms-border-radius:var(--db-radius-full);transition:.4s;margin-right:8px}.breakpoint-header .toggle-switch .slider:before{content:"";position:absolute;height:18px;width:18px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:.4s}.breakpoint-header .toggle-switch .label{font-size:12px;color:var(--db-text-secondary)}.grid-input.disabled{opacity:.5;pointer-events:none}.grid-input.disabled input{background-color:var(--db-border-base)}.gutter-annotation,.margin-annotation{pointer-events:none;user-select:none;box-shadow:0 2px 4px rgba(0,0,0,.1);transition:opacity .2s ease}.gutter-annotation{background:rgba(255,193,7,.9) !important;color:#000 !important;font-weight:700}.margin-annotation{background:rgba(220,53,69,.9) !important;color:#fff !important;font-weight:700}.grid-container{position:relative;display:flex;flex-wrap:nowrap;width:100%;height:100%;align-items:stretch}.grid-margin{flex-shrink:0;height:100%;background-color:rgba(220,53,69,.15);position:relative;transition:all .3s ease}.grid-margin span{position:absolute;left:50%;top:50%;text-align:center;transform:translate(-50%, -50%);font-size:12px;color:rgba(220,53,69,.8);padding:var(--db-margin-xxs) var(--db-padding-xxs);border-radius:var(--db-radius-xs);-webkit-border-radius:var(--db-radius-xs);-moz-border-radius:var(--db-radius-xs);-ms-border-radius:var(--db-radius-xs);white-space:nowrap}.grid-gutter{flex-shrink:0;height:100%;background-color:rgba(255,193,7,.15);position:relative;transition:all .3s ease}.grid-gutter span{position:absolute;left:50%;top:50%;text-align:center;transform:translate(-50%, -50%);font-size:12px;color:rgba(255,193,7,.9);padding:var(--db-margin-xxs) var(--db-padding-xxs);border-radius:var(--db-radius-xs);-webkit-border-radius:var(--db-radius-xs);-moz-border-radius:var(--db-radius-xs);-ms-border-radius:var(--db-radius-xs);white-space:nowrap}.grid-column{flex:1;height:100%;background-color:rgba(0,123,255,.15);position:relative;transition:all .3s ease}.grid-column span{position:absolute;left:50%;top:50%;text-align:center;transform:translate(-50%, -50%);font-size:12px;color:rgba(0,123,255,.8);padding:var(--db-margin-xxs) var(--db-padding-xxs);border-radius:var(--db-radius-xs);-webkit-border-radius:var(--db-radius-xs);-moz-border-radius:var(--db-radius-xs);-ms-border-radius:var(--db-radius-xs);white-space:nowrap;transition:all .2s ease}.grid-column.integer span{font-weight:bold}.preview-bottom-info{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:300px;background:rgba(0,0,0,.8);padding:var(--db-padding-xs) var(--db-padding-m);border-radius:var(--db-radius-m);-webkit-border-radius:var(--db-radius-m);-moz-border-radius:var(--db-radius-m);-ms-border-radius:var(--db-radius-m);font-size:12px;font-weight:500;display:flex;gap:var(--db-padding-xs);z-index:2}.preview-bottom-info span{color:#fff}.preview-bottom-info .info-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px}.preview-bottom-info .info-label{font-size:11px}.preview-bottom-info .info-value{font-weight:600;font-size:12px}.single-breakpoint-section h4{font-size:16px;font-weight:600;color:var(--db-text-secondary)}.single-breakpoint-section .breakpoint-input-group{display:grid;grid-template-columns:1fr auto;gap:var(--db-margin-m);align-items:start}@media(max-width: 768px){.single-breakpoint-section .breakpoint-input-group{grid-template-columns:1fr;gap:var(--db-margin-s)}}.single-breakpoint-section .breakpoint-input-group.compact{grid-template-columns:1fr;gap:var(--db-margin-s)}.single-breakpoint-section .breakpoint-description{font-size:12px;line-height:1.4;color:var(--db-text-secondary)}.single-breakpoint-section .breakpoint-settings.compact{padding:var(--db-padding-s);margin-top:var(--db-margin-s)}.single-breakpoint-section .breakpoint-settings.compact .breakpoint-header{display:flex;align-items:center;gap:var(--db-padding-xs);margin-bottom:var(--db-margin-s)}.single-breakpoint-section .breakpoint-settings.compact .breakpoint-header i{font-size:20px;color:var(--db-text-secondary)}.single-breakpoint-section .breakpoint-settings.compact .breakpoint-header h4{font-size:14px;margin:0}.single-breakpoint-section .breakpoint-settings.compact .width-type-segment.compact .segment-tabs .segment-tab{padding:var(--db-margin-xxs) var(--db-padding-xs);font-size:11px}.grid-input .breakpoint-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--db-margin-s)}.grid-input .breakpoint-header .header-left{display:flex;align-items:center;gap:var(--db-padding-xs)}.grid-input .breakpoint-header .header-left h3{margin:0;font-size:18px}.grid-input .breakpoint-header .breakpoint-range-button{display:inline-flex;align-items:center;gap:var(--db-margin-xxs);padding:4px 8px;background:var(--db-bg-secondary);border:1px solid var(--db-border-base);border-radius:var(--db-radius-s);font-size:12px;color:var(--db-text-secondary);cursor:pointer;transition:all .2s ease}.grid-input .breakpoint-header .breakpoint-range-button:hover{background:var(--db-bg-primary);color:var(--db-text-primary)}.grid-input .breakpoint-header .breakpoint-range-button .range-text{font-weight:500}[data-theme=dark] .gutter-annotation,.dark-mode .gutter-annotation{background:rgba(255,193,7,.8) !important;color:#000 !important}[data-theme=dark] .margin-annotation,.dark-mode .margin-annotation{background:rgba(220,53,69,.8) !important;color:#fff !important}[data-theme=dark] .column-info,.dark-mode .column-info{background:rgba(0,0,0,.8) !important;color:#fff !important;border-color:rgba(0,123,255,.4) !important}[data-theme=dark] .grid-container,.dark-mode .grid-container{background:rgba(0,0,0,.3) !important;box-shadow:inset 0 2px 8px rgba(255,255,255,.05) !important}[data-theme=dark] .grid-margin,.dark-mode .grid-margin{background-color:rgba(220,53,69,.15) !important;border-color:rgba(220,53,69,.4) !important}[data-theme=dark] .grid-gutter,.dark-mode .grid-gutter{background-color:rgba(255,193,7,.15) !important;border-color:rgba(255,193,7,.4) !important}[data-theme=dark] .grid-column,.dark-mode .grid-column{background-color:rgba(0,123,255,.15) !important;border-color:rgba(0,123,255,.4) !important}[data-theme=dark] .grid-preview-frame,.dark-mode .grid-preview-frame{background-color:var(--db-bg-secondary)}[data-theme=dark] .grid-preview-frame .browser-head,.dark-mode .grid-preview-frame .browser-head{background-color:var(--db-bg-secondary);border-bottom:1px solid var(--db-bg-secondary)}[data-theme=dark] .layout-preview-container,.dark-mode .layout-preview-container{background:rgba(45,55,72,.95)}[data-theme=dark] .layout-preview-container .layout-preview,.dark-mode .layout-preview-container .layout-preview{background:#2d3748;color:#e2e8f0}[data-theme=dark] .layout-preview-container .layout-preview .preview-header,[data-theme=dark] .layout-preview-container .layout-preview .preview-footer,.dark-mode .layout-preview-container .layout-preview .preview-header,.dark-mode .layout-preview-container .layout-preview .preview-footer{border-color:#4a5568}[data-theme=dark] .grid-input.focused,.dark-mode .grid-input.focused{border-color:#3182ce;box-shadow:0 0 0 3px rgba(49,130,206,.1);background:#2d3748}[data-theme=dark] .grid-input.focused .breakpoint-header,.dark-mode .grid-input.focused .breakpoint-header{background:linear-gradient(135deg, #3182ce, #2c5282)}[data-theme=dark] .grid-input.focused .input-wrap,.dark-mode .grid-input.focused .input-wrap{background:#4a5568;box-shadow:0 2px 8px rgba(49,130,206,.1)}[data-theme=dark] .preview-bottom-info,.dark-mode .preview-bottom-info{background:rgba(0,0,0,.9)}[data-theme=dark] .preview-bottom-info span,.dark-mode .preview-bottom-info span{color:var(--db-text-inverse-primary)}[data-theme=dark] .mobile-notice,.dark-mode .mobile-notice{background:linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(147, 51, 234, 0.15));border-color:rgba(59,130,246,.3)}[data-theme=dark] .mobile-notice .notice-icon,.dark-mode .mobile-notice .notice-icon{background:rgba(59,130,246,.2);color:#60a5fa}[data-theme=dark] .mobile-notice .notice-content h4,.dark-mode .mobile-notice .notice-content h4{color:#93c5fd}[data-theme=dark] .mobile-notice .notice-content p,.dark-mode .mobile-notice .notice-content p{color:var(--db-text-secondary)}.breakpoint-settings{margin-top:var(--db-margin-m);padding:var(--db-padding-m);background-color:var(--db-bg-primary);border-radius:var(--db-radius-l);-webkit-border-radius:var(--db-radius-l);-moz-border-radius:var(--db-radius-l);-ms-border-radius:var(--db-radius-l)}.breakpoint-settings .breakpoint-input-group{display:flex;gap:var(--db-margin-m);align-items:flex-end}.breakpoint-settings .breakpoint-input-group .inputwl{flex:1}.breakpoint-settings .breakpoint-input-group label{font-size:12px;font-weight:bold;margin-bottom:var(--db-margin-xs);display:flex;align-items:center}.breakpoint-settings .breakpoint-input-group label span{font-size:10px;line-height:1;margin-left:2px;background-color:var(--db-bg-primary);padding:4px 6px;border-radius:var(--db-radius-l);-webkit-border-radius:var(--db-radius-l);-moz-border-radius:var(--db-radius-l);-ms-border-radius:var(--db-radius-l)}.breakpoint-settings .breakpoint-input-group .width-type-segment{flex:1}.breakpoint-settings .breakpoint-input-group .width-type-segment .segment-tabs{display:flex;gap:var(--db-margin-xxs);padding:var(--db-margin-xxs);background:var(--db-bg-primary);border-radius:var(--db-radius-m);-webkit-border-radius:var(--db-radius-m);-moz-border-radius:var(--db-radius-m);-ms-border-radius:var(--db-radius-m);border:1px solid var(--db-border-base)}.breakpoint-settings .breakpoint-input-group .width-type-segment .segment-tabs .segment-tab{flex:1;padding:var(--db-padding-xxs) var(--db-padding-m);font-size:12px;font-weight:500;border:none;background:none;color:var(--db-text-secondary);cursor:pointer;border-radius:var(--db-radius-s);-webkit-border-radius:var(--db-radius-s);-moz-border-radius:var(--db-radius-s);-ms-border-radius:var(--db-radius-s);transition:all .2s ease}.breakpoint-settings .breakpoint-input-group .width-type-segment .segment-tabs .segment-tab.active{background:var(--db-bg-primary);color:var(--db-text-primary);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.1)}.breakpoint-settings .breakpoint-input-group .width-type-segment .segment-tabs .segment-tab:hover:not(.active){background:rgba(var(--db-color-primary), 0.1);color:var(--db-color-primary)}.breakpoint-tabs{display:flex;gap:var(--db-margin-xxs);padding:var(--db-margin-xxs);background:var(--db-bg-secondary);border-radius:var(--db-radius-m);-webkit-border-radius:var(--db-radius-m);-moz-border-radius:var(--db-radius-m);-ms-border-radius:var(--db-radius-m);border:1px solid var(--db-border-base)}.breakpoint-tabs .breakpoint-tab{padding:var(--db-margin-xxs) var(--db-padding-xxs);font-size:12px;border:none;background:none;color:var(--db-text-secondary);cursor:pointer;border-radius:var(--db-radius-s);-webkit-border-radius:var(--db-radius-s);-moz-border-radius:var(--db-radius-s);-ms-border-radius:var(--db-radius-s);transition:all .2s ease;white-space:nowrap;display:flex;align-items:center;gap:var(--db-margin-xxs)}.breakpoint-tabs .breakpoint-tab i{font-size:16px;color:var(--db-text-secondary)}.breakpoint-tabs .breakpoint-tab.active{background:var(--db-bg-primary);color:var(--db-text-primary);box-shadow:0 1px 3px rgba(0,0,0,.1)}.breakpoint-tabs .breakpoint-tab.active i{color:var(--db-text-primary)}.breakpoint-tabs .breakpoint-tab:hover:not(.active){background:rgba(var(--db-color-primary), 0.1);color:var(--db-color-primary)}#tabletBreakpointModal .modal-body .breakpoint-settings-modal .breakpoint-input-group,#mobileBreakpointModal .modal-body .breakpoint-settings-modal .breakpoint-input-group{display:flex;flex-direction:column;gap:var(--db-padding-l)}#tabletBreakpointModal .modal-body .breakpoint-settings-modal .breakpoint-input-group .inputwl label,#mobileBreakpointModal .modal-body .breakpoint-settings-modal .breakpoint-input-group .inputwl label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}#tabletBreakpointModal .modal-body .breakpoint-settings-modal .breakpoint-input-group .inputwl input,#mobileBreakpointModal .modal-body .breakpoint-settings-modal .breakpoint-input-group .inputwl input{width:100%;padding:8px 12px;border:1px solid #d1d5da;border-radius:4px;font-size:14px}#tabletBreakpointModal .modal-body .breakpoint-settings-modal .breakpoint-input-group .inputwl .breakpoint-description,#mobileBreakpointModal .modal-body .breakpoint-settings-modal .breakpoint-input-group .inputwl .breakpoint-description{font-size:12px;color:#666;margin-top:4px;line-height:1.4}#tabletBreakpointModal .modal-body .modal-actions,#mobileBreakpointModal .modal-body .modal-actions{display:flex;gap:var(--db-padding-xs);justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid #e1e4e8}.preview-toggle-btn{display:flex;align-items:center;gap:6px}.preview-toggle-btn svg{width:16px;height:16px}.preview-toggle-btn.active{background:#007bff;border-color:#007bff;color:#fff}.preview-toggle-btn.active:hover{background:#0056b3;border-color:#0056b3}.preset-section{display:flex;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:var(--db-padding-l)}#grid-container{position:relative;z-index:2;width:100%;height:auto;pointer-events:none}#preview-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;overflow-y:auto;display:none}#preview-container .layout-preview{background:#fff;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.1);overflow:hidden;margin:0 auto;max-width:100%;position:relative}#preview-container .layout-preview .preview-header,#preview-container .layout-preview .preview-banner,#preview-container .layout-preview .preview-cards,#preview-container .layout-preview .preview-section,#preview-container .layout-preview .preview-footer{transition:all .3s ease}#preview-container .layout-preview .row{display:flex;flex-wrap:wrap;margin:0 -10px}#preview-container .layout-preview .row>div{padding:0 10px;margin-bottom:20px}@media(max-width: 768px){#preview-container .layout-preview .row{margin:0 -5px}#preview-container .layout-preview .row>div{padding:0 5px;margin-bottom:15px}}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}